/* =========================================================
   SIDENAV MENU SYSTEM (Freemium + Premium UX Layer)
   -------------------------------------------------
   Purpose:
   - Provide structured navigation grouping
   - Support monetization via locked Premium features
   - Maintain clean visual hierarchy and UX clarity
========================================================= */


/* ---------------------------------------------------------
   SECTION TITLES (e.g., "Core Access", "Premium Intelligence")
   ---------------------------------------------------------
   - Small uppercase labels to visually separate menu groups
   - Muted color to avoid competing with clickable items
--------------------------------------------------------- */
.menu-title {
    font-size: 11px;              /* Subtle, secondary label size */
    text-transform: uppercase;    /* Standard UI pattern for sections */
    font-weight: 600;             /* Slight emphasis */
    color: #9aa4b2;               /* Neutral gray (low attention) */
    margin: 15px 15px 5px;        /* Spacing above group */
}


/* ---------------------------------------------------------
   MENU BASE STRUCTURE
   ---------------------------------------------------------
   - Removes default list styling
   - Creates a clean vertical navigation stack
--------------------------------------------------------- */
.menu-list {
    list-style: none;             /* Remove bullets */
    padding: 0;                   /* Reset default spacing */
    margin: 0;
}


/* ---------------------------------------------------------
   MENU ITEMS (CLICKABLE ROWS)
   ---------------------------------------------------------
   - Flex layout allows icon + label + badge/lock alignment
   - Space-between keeps right-side elements aligned cleanly
--------------------------------------------------------- */
.menu-list li a {
    display: flex;
    align-items: center;          /* Vertical centering */
    justify-content: space-between; /* Left label / right icon separation */
    padding: 10px 15px;           /* Clickable area */
    color: #4a5568;               /* Neutral readable text */
    text-decoration: none;        /* Remove underline */
    transition: 0.2s ease;        /* Smooth hover effect */
}


/* ---------------------------------------------------------
   HOVER STATE (INTERACTION FEEDBACK)
   ---------------------------------------------------------
   - Light background to indicate clickability
   - Slight text darkening for emphasis
--------------------------------------------------------- */
.menu-list li a:hover {
    background: #f5f7fa;
    color: #111;
}


/* ---------------------------------------------------------
   ICON SPACING
   ---------------------------------------------------------
   - Ensures consistent spacing between icon and label text
--------------------------------------------------------- */
.menu-list i {
    margin-right: 10px;
}


/* ---------------------------------------------------------
   PREMIUM LOCKED STATE (MONETIZATION UX - CONVERSION SAFE)
   ---------------------------------------------------------
   - Visually dimmed but still clickable
   - Enables JS upgrade trigger
   - Provides clear affordance without blocking interaction
--------------------------------------------------------- */
.menu-section.premium .locked {
    opacity: 0.6;                 /* Slightly dimmed */
    cursor: not-allowed;          /* Visual cue */
    position: relative;           /* Required for overlay */
    transition: 0.2s ease;
}

/* Subtle hover to hint interactivity */
.menu-section.premium .locked:hover {
    opacity: 0.8;
    background: #f5f7fa;
}

/* Ensure links inside still clickable */
.menu-section.premium .locked a {
    cursor: not-allowed;
}

/* Optional lock indicator (if not already in HTML) */
.menu-section.premium .locked::after {
    content: "🔒";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.7;
}

/* ---------------------------------------------------------
   LOCKED ITEM CURSOR
   ---------------------------------------------------------
   - Reinforces non-interactive state
--------------------------------------------------------- */
.menu-section.premium .locked a {
    cursor: not-allowed;
}


/* ---------------------------------------------------------
   LOCK ICON (RIGHT SIDE INDICATOR)
   ---------------------------------------------------------
   - Positioned to the far right via flex layout
   - Subtle color to avoid clutter
--------------------------------------------------------- */
.lock-icon {
    margin-left: auto;
    color: #999;
}


/* ---------------------------------------------------------
   BADGE (e.g., "Hot", "New")
   ---------------------------------------------------------
   - Small attention-grabbing indicator
   - Use sparingly to avoid visual noise
--------------------------------------------------------- */
.badge-hot {
    background: red;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}



/* =========================================================
   PUBLIC LAYOUT — STICKY FOOTER SYSTEM
========================================================= */

html, body {
    height: 100%;
}

.public-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-layout main {
    flex: 1;
}

.footer {
    margin-top: auto;
}