/* =========================================================
   LESSON INTERACTIONS: STATUS & MENUS
   ========================================================= */
.lesson-status-actions .context-menu-btn {
    background: none; border: none; font-size: 20px; font-weight: 800;
    color: #666; cursor: pointer; padding: 0 4px; display: inline-flex;
    align-items: center; justify-content: center; line-height: 1;
}
.lesson-status-actions .context-menu-btn:hover { color: #000; }

.lesson-status-actions .context-menu-dropdown {
    display: none; position: absolute; top: 100%; right: 0; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 100; width: max-content; overflow: hidden; margin-top: 5px;
}
.lesson-status-actions .context-menu-dropdown .status-action-btn {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 10px 18px; color: #333; text-decoration: none; font-size: 14px;
    font-weight: 500; transition: background 0.2s ease; cursor: pointer; font-family: inherit;
}
.lesson-status-actions .context-menu-dropdown .status-action-btn:hover { background: #f2f2f2; }

.status-icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
.status-icon.pending { color: #f39c12; }
.status-icon.draft { color: #3498db; }

/* =========================================================
   LESSON INTERACTIONS: HEART & SAVE
   ========================================================= */
.llh-heart-wrap { display: inline-flex; align-items: center; gap: 0.35rem; }

.llh-heart-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; background-color: transparent !important;
    border: 1.5px solid #00b1b9 !important; box-shadow: none !important; outline: none !important;
    border-radius: 50% !important; width: 28px !important; height: 28px !important;
    min-width: 28px !important; padding: 0 0 0 1px !important; margin: 0 !important;
}

.llh-heart-svg {
    width: 16px !important; height: 16px !important; min-width: 16px !important;
    display: block !important;
}

/* Base Heart Stroke Rules */
.llh-heart-btn[aria-pressed="false"] .llh-heart-svg path {
    fill: transparent !important; stroke: #00b1b9 !important; stroke-width: 1.5px !important; transition: all 0.2s ease;
}
.llh-heart-btn[aria-pressed="true"] .llh-heart-svg path {
    fill: #00b1b9 !important; stroke: #00b1b9 !important; stroke-width: 1.5px !important; transition: all 0.2s ease;
}

.llh-save-count {
    font-size: 0.85rem !important; color: #445 !important; background: #eef5ff !important;
    padding: 0.1rem 0.4rem !important; border-radius: 8px !important; line-height: 1 !important; min-width: unset !important;
}

.llh-more-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border: none !important; background: none !important; cursor: pointer !important;
    font-size: 26px !important; color: #777 !important; font-weight: 800 !important;
    line-height: 1 !important; padding: 2px 6px !important; border-radius: 6px !important; min-width: unset !important;
}
.llh-more-btn:hover { color: #2291e6 !important; }

/* =========================================================
   LESSON INTERACTIONS: MODAL POPUP
   ========================================================= */
#llh-lists-modal-root { display:none; position:fixed; z-index:9999; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,.25); }

#llh-lists-modal { 
    background:#f2f2f2; 
    width: 320px; 
    max-width: 90vw; /* Keeps it safe on skinny phones */
    max-height: 85vh; /* Bounds checking for short laptops */
    padding:1.25rem 1.25rem 1rem; 
    border-radius:12px; 
    box-shadow:0 10px 40px rgba(0,0,0,.18); 
    border: 1px solid #05D7B2; 
    box-sizing: border-box;
    
    /* Auto-Centering Magic */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Flex ensures internal list section can scroll without pushing borders */
    display: flex;
    flex-direction: column;
}

#llh-lists-close { position:absolute; right:.6rem; top:.4rem; border:none; background:none; font-size:1.6rem; cursor:pointer; color:black; z-index: 10; }
.llh-modal-head { margin:.2rem 0 1rem; font-weight:700; font-size:1.1rem; border-bottom: 1px solid #05D7B2; padding-bottom: 10px; flex-shrink: 0;}
.llh-lists-container { overflow-y:auto; padding:.5rem .75rem; flex: 1; min-height: 100px; }
.llh-list-row { display:flex; align-items:center; justify-content:space-between; padding:.38rem .2rem; }
.llh-list-row:last-child { border-bottom:none; }
.llh-list-row label { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.llh-badge { font-size:.72rem; padding:.1rem .45rem; border-radius:8px; background:#eef5ff; color:#246; }

.llh-modal-footer-form { flex-shrink: 0; margin-top: 10px; padding-top: 15px; border-top: 1px solid #05D7B2; }
.llh-actions { display:flex; gap:.5rem; margin-top:.9rem; flex-shrink: 0; }
.llh-btn { padding:.5rem .9rem; border-radius:8px; border:none; cursor:pointer; font-weight:700; }
.llh-btn.primary { background: #05D7B2; color: black; border-radius: 25px; padding: 5px 25px; font-size: 14px; }
.llh-btn.secondary { background:#e9eef5; }
.llh-muted { color:#777; }

.loader-rotate { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* =========================================================
   CUSTOM DIALOG MODALS (Replaces window.confirm / prompt)
   ========================================================= */
#ozo-dialog-root { display:none; position:fixed; z-index:100000; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,.4); backdrop-filter: blur(2px); }
#ozo-dialog-box { background:#fff; width:360px; max-width:90vw; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.2); overflow:hidden; font-family:inherit; }
#ozo-dialog-header { background:#f9f9f9; padding:16px 20px; border-bottom:1px solid #eee; font-weight:800; font-size:16px; color:#333; }
#ozo-dialog-body { padding:20px; }
#ozo-dialog-message { font-size:15px; color:#555; line-height:1.4; }
#ozo-dialog-message.has-margin { margin-bottom:15px; }
#ozo-dialog-input { display:none; width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #ccc; border-radius:6px; font-size:15px; margin-bottom:5px; outline:none; transition:border 0.2s; }
#ozo-dialog-input:focus { border-color:#05D7B2; box-shadow: 0 0 0 2px rgba(5,215,178,0.2); }
#ozo-dialog-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; background:#f9f9f9; border-top:1px solid #eee; }
.ozo-dialog-btn { padding:8px 20px; border:none; border-radius:20px; cursor:pointer; font-weight:700; font-size:14px; transition:opacity 0.2s, transform 0.1s; }
.ozo-dialog-btn:hover { opacity:0.8; }
.ozo-dialog-btn:active { transform:scale(0.96); }
#ozo-dialog-cancel { background:#e0e0e0; color:#333; }
#ozo-dialog-confirm { background:#05D7B2; color:#000; }