/* ===== DNX Drawer (Razor) – match Vue AppMenu look/feel ===== */

:root{
    /* Map to your variables.css tokens */
    --green-800: oklch(36.4% 0.0719 169.64);
    --primary-800: var(--green-800);
    --primary-700: #13342d;
    --primary-600: #174039;
    --primary-500: #1d4d45;
    --menu-border: rgba(255,255,255,.08);
    --menu-item-text: #e7f0ee;
    --menu-item-active-bg: rgba(255,255,255,.06);
    --menu-item-active-text: #ffffff;
    --surface-overlay: #0c1e1a;
    --surface-elevated: rgba(255,255,255,.06);
    --gray-400: #9aa6a0;
    --shadow-lg: 0 10px 30px rgba(0,0,0,.45);
}

.menu{
    position:fixed; inset:0; z-index:100;
    display:none; /* toggled by .is-open */
}
.menu.is-open{ display:block; }

/* Overlay */
.menu-overlay,
.overlay{ /* support both class names */
    position:absolute; inset:0;
    background: color(from #000 srgb r g b / .5);
    z-index:101; cursor:pointer;
}

/* Panel */
.menu-panel,
.content{ /* support both class names */
    position:absolute; right:0; top:0; height:100%;
    width:300px; max-width:90vw;
    background: var(--primary-800);
    box-shadow: var(--shadow-lg);
    color: var(--menu-item-text);
    display:flex; flex-direction:column;
    overflow-y:auto; padding:0; z-index:102;

    transform: translateX(100%);
    transition: transform .30s ease;
    border-left: 1px solid var(--menu-border);
}
.menu.is-open .menu-panel,
.menu.is-open .content{ transform: translateX(0); }

/* Header */
.menu-header,
.header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; border-bottom:1px solid var(--menu-border);
}
.menu-title,
.title{ font-size:18px; font-weight:600; margin:0; color:var(--menu-item-text); }
.menu-close,
.close{
    border:0; background:none; color:var(--menu-item-text);
    font-size:24px; padding:4px; cursor:pointer;
}

/* Nav */
.menu-nav,
.nav{ display:flex; flex-direction:column; gap:0; padding:16px 0; }
.menu-list{ list-style:none; padding:0; margin:0; }
.nav-section{ margin-bottom:24px; }
.nav-section:last-child{ margin-bottom:0; }

/* Links (map your .menu-link to Vue's .link) */
.menu-link,
.link{
    display:flex; align-items:center;
    gap:12px; padding:12px; margin:0 12px;
    border-radius:8px; text-decoration:none;
    color: var(--menu-item-text);
    font-size:.95rem; font-weight:400;
    transition: background-color .2s ease;
}
.menu-link:hover,
.link:hover{ background: var(--surface-elevated); }

.link--active{ background: var(--menu-item-active-bg); color: var(--menu-item-active-text); font-weight:600; }
.link--external{ justify-content:space-between; }
.link--disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }

.menu-icon{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; opacity:.95; }
.menu-text{ flex:1; }
.menu-arrow{ display:none; } /* Vue menu doesn’t show chevrons */

/* Footer (stub to match spacing; you can add theme/lang later) */
.menu-footer,
.footer{
    background: var(--primary-800);
    margin-top:auto; padding:16px 24px; border-top:1px solid var(--menu-border);
}

/* Dark mode overrides – keep drawer consistent across themes */
/*[data-theme='dark'] .menu-panel,*/
/*[data-theme='dark'] .content{ background: var(--primary-400, #15463f); }*/
/*[data-theme='dark'] .menu-header,*/
/*[data-theme='dark'] .header{ border-bottom-color: var(--primary-500); }*/
/*[data-theme='dark'] .menu-footer,*/
/*[data-theme='dark'] .footer{ border-top-color: var(--primary-500); }*/

     /* === DNX Manage menu – tone/contrast to match Vue === */
     /* Panel uses same green as header (fallback included) */
 .menu .menu-panel{
     background: var(--header-bg, var(--primary-600, #18463d));
     /* keep the subtle border like Vue */
     border-left: 1px solid var(--menu-border, rgba(255,255,255,.07));
 }

/* Item text & icons slightly brighter */
.menu .menu-link{
    color: rgba(255,255,255,.92);
}
.menu .menu-icon{
    color: rgba(255,255,255,.90);
    opacity: 1;              /* remove the extra dim */
}

/* Hover uses a touch more lift than before */
.menu .menu-link:hover{
    background: rgba(255,255,255,.08);
}

/* Active is a hair stronger + semi outline for definition */
.menu .menu-link.link--active{
    background: rgba(255,255,255,.12);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Disabled mirrors Vue’s 50% feel */
.menu .menu-link.link--disabled{
    opacity: .50;
}

/* Section divider a bit subtler */
.menu .menu-footer,
.menu .menu-header{
    border-color: rgba(255,255,255,.10);
}

/* === DNX Manage menu – exact match to Vue === */

/* 1️⃣ Panel tone */
.menu .menu-panel {
    background: oklch(36.4% .0719 169.64); /* ← exact Vue Manage green */
    border-left: 1px solid rgba(255,255,255,.07);
}

/* 2️⃣ Item readability and weight */
.menu .menu-link {
    color: rgba(255,255,255,.94);
    font-weight: 500; /* matches Vue font tone */
}

.menu .menu-icon {
    color: rgba(255,255,255,.95);
    opacity: 1;
}

/* 3️⃣ Hover and active lift */
.menu .menu-link:hover {
    background: rgba(255,255,255,.08);
}

.menu .menu-link.link--active {
    background: rgba(255,255,255,.15);
    color: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* 4️⃣ Subtle header/footer borders */
.menu .menu-header,
.menu .menu-footer {
    border-color: rgba(255,255,255,.10);
}

/* 5️⃣ Overlay brightness (so content still visible behind) */
.menu .menu-overlay {
    background: rgba(0, 0, 0, 0.40);
}

/* === Final match to Vue Manage === */
:root { --manage-panel: oklch(36.4% .0719 169.64); }

/* Panel tone (force in both themes) */
.menu .menu-panel{
    background: var(--manage-panel);
    border-left: 1px solid rgba(255,255,255,.10);
}
[data-theme="dark"] .menu .menu-panel{ background: var(--manage-panel); }

/* Title + subtitle (email) */
.menu .menu-title{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 600; font-size: 18px; letter-spacing: .2px;
    color: rgba(255,255,255,.96);
    margin-bottom: 10px;
    margin-top: 10px;
}
.menu .menu-subtitle{
    display:block;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400; font-size: 13.5px; line-height: 1.1;
    color: rgba(255,255,255,.72);
}

/* Items: font/contrast/spacing like Vue */
.menu .menu-list li + li{ margin-top: 6px; }         /* rhythm */
.menu .menu-link{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500; font-size: 15.5px; line-height: 1.35;
    color: rgba(255,255,255,.94);
    padding: 12px 14px;
    border-radius: 12px;
}
.menu .menu-link:hover{ background: rgba(255,255,255,.10); }
.menu .menu-link.link--active{
    background: rgba(255,255,255,.16);
    color:#fff;
    outline: 1px solid rgba(255,255,255,.06);
    outline-offset: 0;
}

/* External link row style (DNX Marketplace look) */
.menu .menu-link.link--external{ justify-content: space-between; }
.menu .external-icon{ font-size: .9rem; opacity: .8; }

/* Subtle borders like Vue */
.menu .menu-header, .menu .menu-footer{ border-color: rgba(255,255,255,.12); }

/* Softer backdrop so page content still breathes */
.menu .menu-overlay{ background: rgba(0,0,0,.40); }

/* === Vue-accurate typography + tones (final polish) ==================== */
:root { --manage-panel: oklch(36.4% .0719 169.64); }

.menu .menu-panel{
    background: var(--manage-panel);
    border-left: 1px solid rgba(255,255,255,.10);
}
[data-theme="dark"] .menu .menu-panel{ background: var(--manage-panel); }

/* Title + email under it */
.menu .menu-title{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 600; font-size: 18px; letter-spacing: .2px;
    color: rgba(255,255,255,.96);
    margin-bottom: 2px;
}
.menu .menu-subtitle{
    display:block;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400; font-size: 13.5px; line-height: 1.15;
    color: rgba(255,255,255,.72);
}

/* Items – font, spacing, lift */
.menu .menu-list li + li{ margin-top: 6px; }   /* consistent rhythm like Manage */
.menu .menu-link{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;               /* Manage uses ~500 */
    font-size: 15.5px;
    line-height: 1.35;
    color: rgba(255,255,255,.94);
    padding: 12px 14px;
    border-radius: 12px;
}
.menu .menu-link:hover{ background: rgba(255,255,255,.10); }

/* Active “pill” */
.menu .menu-link.link--active{
    background: rgba(255,255,255,.16);
    color:#fff;
    outline: 1px solid rgba(255,255,255,.06);
    outline-offset: 0;
    border-radius: 12px;
}

/* External row (DNX Marketplace) */
.menu .menu-link.link--external{ justify-content: space-between; }
.menu .external-icon{ font-size:.9rem; opacity:.8; }

/* Header/footer separators & overlay tone */
.menu .menu-header, .menu .menu-footer{ border-color: rgba(255,255,255,.12); }
.menu .menu-overlay{ background: rgba(0,0,0,.40); }