/* ============================================================
   Unified Navigation — Light / Dark Adaptive
   Combined-Admin · Lisle Design Ltd
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* --- CSS custom properties (light mode defaults) --- */
:root {
    --nav-h:             52px;
    --nav-bg:            #1e2535;
    --nav-hover:         #2d3d5a;
    --nav-border:        rgba(255, 255, 255, 0.07);
    --nav-text:          #c8d4e8;
    --nav-text-muted:    #7a8faa;
    --nav-brand:         #ffffff;
    --nav-accent:        #e05530;
    --nav-accent-hover:  #c44420;

    --dd-bg:             #ffffff;
    --dd-text:           #1e2535;
    --dd-hover:          #f0f4ff;
    --dd-border:         #e0e6f0;
    --dd-shadow:         0 8px 28px rgba(0, 0, 0, 0.14);
    --dd-active-bg:      #e05530;
    --dd-active-text:    #ffffff;

    --page-bg:           #f2f4f8;
    --page-text:         #1e2535;
    --page-border:       #d0d8e8;
    --page-input-bg:     #ffffff;
    --page-link:         #2b5fad;

    /* --- Extended design tokens (light mode) --- */
    --surface:           #ffffff;
    --surface-2:         #f7f9fc;
    --surface-hover:     #eef2ff;
    --text-primary:      #1e2535;
    --text-secondary:    #5a6480;
    --text-muted:        #8894aa;
    --font-base:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --tbl-head-bg:       #1e2535;
    --tbl-head-text:     #e8edf8;
    --tbl-row-a:         #ffffff;
    --tbl-row-b:         #f7f9fc;
    --tbl-row-hover:     #eef2ff;
    --tbl-border:        #dce1eb;
    --btn-bg:            #1e2535;
    --btn-text:          #ffffff;
    --btn-hover:         #2d3d5a;
    --input-bg:          #ffffff;
    --input-border:      #ced4e0;
    --input-text:        #1e2535;
    --input-focus:       #4a7bd4;
    --radius:            5px;
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:         0 4px 12px rgba(0,0,0,0.1);

    color-scheme: light;
}

/* --- Dark mode overrides --- */
[data-theme="dark"] {
    --dd-bg:             #1a2540;
    --dd-text:           #c0ceE4;
    --dd-hover:          #263550;
    --dd-border:         #2d3f5c;
    --dd-shadow:         0 8px 28px rgba(0, 0, 0, 0.5);

    --page-bg:           #0e1420;
    --page-text:         #c0cce0;
    --page-border:       #2d3f5c;
    --page-input-bg:     #1a2540;
    --page-link:         #6b9fd4;

    /* --- Extended design tokens (dark mode) --- */
    --surface:           #1a2540;
    --surface-2:         #1e2b42;
    --surface-hover:     #263550;
    --text-primary:      #c0cce0;
    --text-secondary:    #8099bb;
    --text-muted:        #5a6e88;
    --tbl-head-bg:       #263550;
    --tbl-head-text:     #d0d8e8;
    --tbl-row-a:         #1a2540;
    --tbl-row-b:         #1e2b42;
    --tbl-row-hover:     #263550;
    --tbl-border:        #2d3f5c;
    --btn-bg:            #263550;
    --btn-text:          #d0d8e8;
    --btn-hover:         #2d3f5c;
    --input-bg:          #1a2540;
    --input-border:      #2d3f5c;
    --input-text:        #c0cce0;
    --input-focus:       #6b9fd4;

    color-scheme: dark;
}

/* Dark-mode fallback via OS preference (no JS) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dd-bg:         #1a2540;
        --dd-text:       #c0cee4;
        --dd-hover:      #263550;
        --dd-border:     #2d3f5c;
        --dd-shadow:     0 8px 28px rgba(0, 0, 0, 0.5);
        --page-bg:       #0e1420;
        --page-text:     #c0cce0;
        --page-border:   #2d3f5c;
        --page-input-bg: #1a2540;
        --page-link:     #6b9fd4;

        /* --- Extended design tokens (dark mode fallback) --- */
        --surface:           #1a2540;
        --surface-2:         #1e2b42;
        --surface-hover:     #263550;
        --text-primary:      #c0cce0;
        --text-secondary:    #8099bb;
        --text-muted:        #5a6e88;
        --tbl-head-bg:       #263550;
        --tbl-head-text:     #d0d8e8;
        --tbl-row-a:         #1a2540;
        --tbl-row-b:         #1e2b42;
        --tbl-row-hover:     #263550;
        --tbl-border:        #2d3f5c;
        --btn-bg:            #263550;
        --btn-text:          #d0d8e8;
        --btn-hover:         #2d3f5c;
        --input-bg:          #1a2540;
        --input-border:      #2d3f5c;
        --input-text:        #c0cce0;
        --input-focus:       #6b9fd4;

        color-scheme: dark;
    }
}

/* --- Page-level theming --- */
html {
    background: var(--page-bg);
}

body {
    background-color: var(--page-bg) !important;
    color: var(--page-text);
}

/* ============================================================
   Top nav bar
   ============================================================ */
.topnav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
    font-size: 14px;
    /* ensure sticky works even inside a wrapper div */
    width: 100%;
    box-sizing: border-box;
}

.topnav-inner {
    display: flex;
    align-items: stretch;
    height: var(--nav-h);
    padding: 0 1rem;
}

/* --- Brand / logo --- */
.topnav-brand {
    display: flex;
    align-items: center;
    color: var(--nav-brand);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    padding-right: 1.25rem;
    flex-shrink: 0;
    transition: color 0.15s;
}

.topnav-brand:hover {
    color: var(--nav-accent);
    text-decoration: none;
}

/* --- Dropdown items row --- */
.topnav-menu {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

/* ============================================================
   Individual nav item + dropdown
   ============================================================ */
.nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    padding: 0 0.8rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--nav-text);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    user-select: none;
}

.nav-btn:hover {
    color: var(--nav-brand);
    background: var(--nav-hover);
}

/* Active group highlight */
.nav-item.group-active > .nav-btn {
    color: var(--nav-accent);
    border-bottom-color: var(--nav-accent);
}

/* Chevron */
.nav-chevron {
    width: 8px;
    height: 5px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.2s;
    opacity: 0.6;
}

.nav-item:hover > .nav-btn .nav-chevron,
.nav-item.open   > .nav-btn .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* --- Dropdown panel --- */
.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(var(--nav-h) - 1px);
    left: 0;
    min-width: 190px;
    background: var(--dd-bg);
    border: 1px solid var(--dd-border);
    border-top: 2px solid var(--nav-accent);
    border-radius: 0 0 6px 6px;
    box-shadow: var(--dd-shadow);
    z-index: 1100;
    overflow: hidden;
}

/* Show on hover (desktop) or JS-toggled .open */
.nav-item:hover > .nav-dropdown,
.nav-item.open  > .nav-dropdown {
    display: block;
}

.nav-dropdown-link {
    display: block;
    padding: 9px 16px;
    color: var(--dd-text);
    text-decoration: none;
    font-size: 13.5px;
    white-space: nowrap;
    border-bottom: 1px solid var(--dd-border);
    transition: background 0.1s, color 0.1s;
}

.nav-dropdown-link:last-child {
    border-bottom: none;
}

.nav-dropdown-link:hover {
    background: var(--dd-hover);
    color: var(--dd-text);
    text-decoration: none;
}

.nav-dropdown-link.active {
    background: var(--dd-active-bg);
    color: var(--dd-active-text);
    font-weight: 600;
}

.nav-dropdown-link.active:hover {
    background: var(--nav-accent-hover);
    color: var(--dd-active-text);
}

/* ============================================================
   Right-side actions (theme toggle + logout)
   ============================================================ */
.topnav-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 0.75rem;
}

/* Theme toggle */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    background: none;
    color: var(--nav-text);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.theme-toggle:hover {
    background: var(--nav-hover);
    color: var(--nav-brand);
    border-color: rgba(255, 255, 255, 0.3);
}

.theme-toggle svg {
    width: 15px;
    height: 15px;
}

/* Sun = shown in dark mode (click to go light) */
/* Moon = shown in light mode (click to go dark) */
.icon-sun  { display: none; }
.icon-moon { display: block; }

[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon-sun  { display: block; }
    :root:not([data-theme="light"]) .icon-moon { display: none; }
}

/* Logout */
.topnav-logout {
    display: flex;
    align-items: center;
    height: var(--nav-h);
    padding: 0 0.7rem;
    color: var(--nav-text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s;
    white-space: nowrap;
}

.topnav-logout:hover {
    color: var(--nav-brand);
    text-decoration: none;
}

/* ============================================================
   Hamburger (mobile only)
   ============================================================ */
.topnav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.topnav-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--nav-text);
    border-radius: 2px;
    transition: transform 0.22s, opacity 0.22s;
    transform-origin: center;
}

/* Animate to × when open */
.topnav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topnav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.topnav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Responsive — collapse below 960 px
   ============================================================ */
@media (max-width: 960px) {
    .topnav-hamburger {
        display: flex;
    }

    .topnav-inner {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--nav-h);
        padding-right: 0.5rem;
        align-items: center;
    }

    .topnav-brand {
        height: var(--nav-h);
        flex: 1;
    }

    .topnav-actions {
        margin-left: 0;
        padding-left: 0;
        height: var(--nav-h);
        order: 2;
    }

    .topnav-hamburger {
        order: 3;
    }

    .topnav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        order: 4;
        background: var(--nav-bg);
        border-top: 1px solid var(--nav-border);
        max-height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        overflow-x: hidden;
    }

    .topnav-menu.open {
        display: flex;
    }

    /* Mobile nav items stack vertically */
    .nav-item {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-btn {
        height: 46px;
        border-bottom: 1px solid var(--nav-border);
        border-right: none;
        border-bottom-width: 1px;
        padding: 0 1rem;
        justify-content: space-between;
    }

    /* Disable CSS hover on mobile — JS .open controls visibility */
    .nav-item:hover:not(.open) > .nav-dropdown {
        display: none;
    }

    .nav-dropdown {
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.18);
        top: auto;
        min-width: 0;
    }

    .nav-item.open > .nav-dropdown {
        display: block;
    }

    .nav-dropdown-link {
        padding: 10px 1.5rem;
        color: var(--nav-text);
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: 13px;
    }

    .nav-dropdown-link:hover {
        background: var(--nav-hover);
        color: var(--nav-brand);
    }

    .nav-dropdown-link.active {
        background: var(--dd-active-bg);
        color: var(--dd-active-text);
    }

    .topnav-logout {
        height: auto;
        padding: 0.5rem 0.7rem;
    }
}

/* ============================================================
   Wrapper compatibility
   ============================================================ */

/* Ensure the sticky nav isn't clipped by an ancestor wrapper */
.wrapper {
    overflow: visible !important;
}

/* ============================================================
   Sub-page navigation (used inside page content)
   ============================================================ */
.sub-page-menu {
    width: 98%;
    margin: 0.5% 1%;
    background-color: var(--dd-bg);
    border: 1px solid var(--page-border);
    border-radius: 4px;
    box-sizing: border-box;
}

.sub-page-menu th {
    border: none;
    padding: 0;
    background: transparent;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

.sub-page-menu a {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
    font-size: 0.82em;
    display: block;
    padding: 0.45em 0.8em;
    color: var(--page-link);
    text-decoration: none;
    white-space: nowrap;
}

.sub-page-menu a:hover,
.sub-page-menu a.mouseover-blue:hover {
    background-color: var(--dd-hover);
    border-radius: 3px;
}

/* ============================================================
   Global dark-mode content overrides
   ============================================================ */
[data-theme="dark"] a:not([class]),
[data-theme="dark"] a.mouseover-blue {
    color: var(--page-link);
}

[data-theme="dark"] table {
    color: var(--page-text);
}

[data-theme="dark"] th,
[data-theme="dark"] td {
    border-color: var(--page-border);
}

[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--page-input-bg);
    color: var(--page-text);
    border-color: var(--page-border);
}

/* Logs pages use the new unified theme */
[data-theme="dark"] #content {
    background: var(--page-bg);
}

[data-theme="dark"] #header h1 {
    color: var(--page-text);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) a:not([class]) { color: var(--page-link); }
    :root:not([data-theme="light"]) table         { color: var(--page-text); }
    :root:not([data-theme="light"]) #content      { background: var(--page-bg); }
}