/* ============================================================================
   nexus-theme.css  -  Nexus look, ported into our no-build (CDN) setup
   ----------------------------------------------------------------------------
   We load daisyUI from the CDN (its components read CSS variables like
   --color-primary, --radius-box, etc.). This file OVERRIDES those variables
   with Nexus's exact theme tokens (taken from the template's daisyui.css), adds
   Nexus's font (Inclusive Sans), and a little sidebar/menu polish. No build step
   is needed - it's plain CSS layered after the daisyUI stylesheet.

   Source of values: nexus-html@4.0.0/src/styles/daisyui.css (light + dark
   themes) and src/styles/pages/layout.css (sidebar) and typography.css (font).
   ============================================================================ */

/* Nexus's font (default theme uses Inclusive Sans), loaded from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Inclusive+Sans:wght@400;500;600;700;800;900&display=swap");

/* ---- LIGHT theme tokens (also the default on :root) ---- */
:root,
[data-theme="light"] {
    /* Layout colors */
    --root-bg: #fafbfc;
    --layout-sidebar-background: #ffffff;
    --layout-topbar-background: #ffffff;

    /* Base colors */
    --color-base-100: #ffffff;
    --color-base-200: #eef0f2;
    --color-base-300: #dcdee0;
    --color-base-content: #1e2328;

    /* Brand + status colors */
    --color-primary: #167bff;
    --color-primary-content: #ffffff;
    --color-secondary: #9c5de8;
    --color-secondary-content: #ffffff;
    --color-accent: #00d3bb;
    --color-accent-content: #f3fbf6;
    --color-neutral: #1e2832;
    --color-neutral-content: #fafcff;
    --color-info: #14b4ff;
    --color-info-content: #ffffff;
    --color-success: #0bbf58;
    --color-success-content: #ffffff;
    --color-warning: #f5a524;
    --color-warning-content: #150a00;
    --color-error: #f31260;
    --color-error-content: #ffffff;

    /* Tight Nexus radii + flat look */
    --radius-selector: 0.25rem;
    --radius-field: 0.25rem;
    --radius-box: 0.5rem;
    --rounded-box: 0.5rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

/* ---- DARK theme tokens (used if you set data-theme="dark") ---- */
[data-theme="dark"] {
    --root-bg: #121416;
    --layout-sidebar-background: #181c20;
    --layout-topbar-background: #181b1f;

    --color-base-100: #181c20;
    --color-base-200: #22262a;
    --color-base-300: #2c3034;
    --color-base-content: #f0f4f8;

    --color-primary: #378dff;
    --color-primary-content: #ffffff;
    --color-secondary: #b071ff;
    --color-secondary-content: #ffffff;
    --color-accent: #00d3bb;
    --color-accent-content: #f3fbf6;
    --color-neutral: #dce1e6;
    --color-neutral-content: #1e2832;
    --color-info: #14b4ff;
    --color-info-content: #ffffff;
    --color-success: #0bbf58;
    --color-success-content: #ffffff;
    --color-warning: #f5a524;
    --color-warning-content: #150a00;
    --color-error: #f31260;
    --color-error-content: #ffffff;
}

/* ---- Typography: Nexus uses Inclusive Sans at a 16px base ---- */
body {
    font-family: "Inclusive Sans", sans-serif;
    font-size: 16px;
    /* Nexus page background is the slightly-off-white root-bg, not base-200. */
    background-color: var(--root-bg);
}
strong {
    font-weight: 500;
}

/* ---- Sidebar / topbar use the Nexus layout backgrounds ---- */
aside {
    background-color: var(--layout-sidebar-background);
}
header.sticky {
    background-color: var(--layout-topbar-background);
}

/* ---- Menu polish to match Nexus (mirrors layout.css .sidebar-menu rules) ---- */
/* Menu links: compact rows, tight radius, base-200 hover (Nexus feel). */
.menu :where(li) > a,
.menu :where(li) > .menu-title {
    border-radius: var(--radius-box);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.menu :where(li) > a:hover {
    background-color: var(--color-base-200);
}

/* ============================================================================
   Dark/light toggle icon swap (we use data-theme, not Tailwind's dark: variant)
   ============================================================================ */
.theme-icon-dark {
    display: none;
}
[data-theme="dark"] .theme-icon-light {
    display: none;
}
[data-theme="dark"] .theme-icon-dark {
    display: inline-block;
}

/* ============================================================================
   Collapsible sidebar (icon rail). Toggled by adding .sidebar-collapsed to <html>.
   On large screens the sidebar shrinks to icons and all labels hide.
   ============================================================================ */
aside {
    transition: width 0.2s ease;
}

@media (min-width: 1024px) {
    html.sidebar-collapsed aside {
        width: 4rem;
        min-width: 4rem;
    }
    /* Hide every label/section-heading/footnote when collapsed. */
    html.sidebar-collapsed .nav-text,
    html.sidebar-collapsed .nav-section-label {
        display: none;
    }
    /* Center the remaining icons (links, group summaries, headings, brand). */
    html.sidebar-collapsed aside .menu :where(li) > a,
    html.sidebar-collapsed aside .menu :where(li) > details > summary,
    html.sidebar-collapsed aside .menu :where(li) > .menu-title,
    html.sidebar-collapsed aside .flex.h-14 > a {
        justify-content: center;
    }
    /* Hide the group chevron when collapsed (no room for it on the icon rail). */
    html.sidebar-collapsed aside .menu :where(li) > details > summary::after {
        display: none;
    }
    /* Collapsed rail shows ONLY top-level icons: hide any expanded submenu (and
       its guide line) so open groups don't leak their children into the rail. */
    html.sidebar-collapsed aside .menu :where(li) > details > ul {
        display: none;
    }
    /* The "New" button becomes a square icon button. */
    html.sidebar-collapsed aside label[for="pageModal"] {
        padding-inline: 0.4rem;
    }
    /* The Pages header row: drop its empty space when its label is hidden. */
    html.sidebar-collapsed aside nav > .flex.items-center.justify-between {
        justify-content: center;
    }
}

/* ============================================================================
   Screen Pop (status pill + activity log). Shared by views/member-screenpop.cfm
   and screenpop-panel.cfm (both wrap content in .member-screenpop).
   ============================================================================ */
.member-screenpop .status-pill { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; background:#e5e7eb; color:#374151; }
.member-screenpop .status-pill.live  { background:#16a34a; color:#fff; }
.member-screenpop .status-pill.error { background:#dc2626; color:#fff; }
.member-screenpop .log-stream { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:12px; max-height:240px; overflow-y:auto; white-space:pre-wrap; }
.member-screenpop .log-line { margin-bottom:4px; }
.member-screenpop .log-line.info    { color:#1f2937; }
.member-screenpop .log-line.muted   { color:#6b7280; }
.member-screenpop .log-line.error   { color:#dc2626; }
.member-screenpop .log-line.success { color:#16a34a; }

/* ============================================================================
   Nexus-style stat cards (icon in a tinted rounded box + large value)
   ============================================================================ */
.stat-card .stat-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-box);
    background-color: color-mix(in oklab, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}
.stat-card .stat-icon.accent-success {
    background-color: color-mix(in oklab, var(--color-success) 14%, transparent);
    color: var(--color-success);
}
.stat-card .stat-icon.accent-warning {
    background-color: color-mix(in oklab, var(--color-warning) 16%, transparent);
    color: var(--color-warning);
}
.stat-card .stat-icon.accent-info {
    background-color: color-mix(in oklab, var(--color-info) 14%, transparent);
    color: var(--color-info);
}
.stat-card .stat-icon.accent-primary {
    background-color: color-mix(in oklab, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}
.stat-card .stat-icon.accent-secondary {
    background-color: color-mix(in oklab, var(--color-secondary) 14%, transparent);
    color: var(--color-secondary);
}
.stat-card .stat-icon.accent-error {
    background-color: color-mix(in oklab, var(--color-error) 14%, transparent);
    color: var(--color-error);
}
.stat-card .stat-icon.accent-accent {
    background-color: color-mix(in oklab, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}

/* ---- General polish: subtle card shadow + crisp borders ---- */
.card {
    box-shadow: 0 1px 2px color-mix(in oklab, var(--color-base-content) 6%, transparent);
}