/*
 * Merdigit AI — design system core.
 *
 * Served as a plain static file (no build step): the authenticated app has never depended on the Vite/Tailwind
 * pipeline (that pipeline exists only for the public marketing site's resources/css/app.css). Loading this as one
 * cacheable <link> instead of re-embedding an inline <style> block on every page response is the same zero-build
 * model the project already uses for every other public/ asset (favicon.ico, robots.txt, ...), just applied to CSS.
 *
 * Load order (see components/global-styles.blade.php): design-system.css, then components.css, then utilities.css.
 * A workspace layout additionally loads customer-support.css for the Customer Support Agent Workspace.
 *
 * This file: design tokens, base/reset, the two-level shell (Platform sidebar + Agent Workspace sidebar share the
 * same .sidebar/.nav-item/.main-* classes), page-header, and the small set of responsive grid helpers.
 * Reusable components (buttons, cards, badges, forms, tables, ...) live in components.css.
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    --bg-app:      #080813;
    --bg-surface:  #0d0d1a;
    --bg-elevated: #111120;
    --bg-card:     #141428;
    --bg-hover:    rgba(255,255,255,0.035);
    --border:      rgba(255,255,255,0.07);
    --border-md:   rgba(255,255,255,0.12);
    --border-lg:   rgba(255,255,255,0.20);
    --text-1:      #eef0ff;
    --text-2:      #8892a4;
    /*
     * --text-3 is the MUTED tier (helper text, placeholders, metadata, inactive nav, table secondary columns): visibly
     * subordinate to --text-1/--text-2 but still readable, never decorative-only. The previous value, #4a5568, measured
     * ~2.75:1 against --bg-app (#080813) - below even the 3:1 floor WCAG allows for large text/UI components, let alone
     * the 4.5:1 body-text target. #707b8d keeps the same cool slate hue and the same relative position in the
     * hierarchy (lighter than --text-2's #8892a4 is wrong - --text-2 is the mid tier; --text-3 stays the dimmest) while
     * reaching ~4.5:1 on --bg-app and ~4.3:1 on --bg-elevated/--bg-card - passes normal-text AA on the app background,
     * and clears the 3:1 UI-component floor everywhere else with margin. Do not darken this back down.
     */
    --text-3:      #707b8d;
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius:      10px;
    --radius-lg:   14px;
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.5);
    --shadow:      0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.65);

    /* Merdigit brand tokens. Primary drives CTAs/active states/brand
       accent; secondary is reserved for destructive/critical/error;
       third is reserved for warning/pending/attention. Used sparingly
       and never combined in one component. */
    --brand-primary:   #D02EF4;
    --brand-secondary: #F44647;
    --brand-third:     #FBB03B;

    --accent:      var(--brand-primary);
    --accent-2:    #a821c4;
    --accent-glow: rgba(208,46,244,0.15);

    /* Spacing scale, for new rules; existing pixel values are left as they were (see PART 8 - not a rewrite). */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* Semantic state colors, one place, reused by badges/alerts/status dots instead of re-picking a green each time. */
    --state-success: #4ade80;
    --state-danger:  #f87171;
    --state-warning: #fbbf24;

    --transition-fast: 0.12s ease;
    --transition:       0.2s ease;
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--bg-app); color: var(--text-1); }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; overflow: hidden; }
.sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 30;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
}
.sidebar-overlay.open { display: block; }

/*
 * ── Sidebar ────────────────────────────────────────────────────────────────
 * ONE set of rules for both navigation levels: the Platform shell's sidebar (app.layouts.app - product/account/channel
 * selection) and the Agent Workspace sidebar (app.layouts.agent - navigation inside one Agent). They are structurally
 * identical chrome (.sidebar > .sidebar-nav > .nav-item, .sidebar-footer) with different content, which is exactly
 * the "two levels, one visual language" hierarchy the product calls for - a Workspace should not look like a
 * different product from the Platform shell it was opened from.
 */
.sidebar {
    width: 240px; flex-shrink: 0; display: flex; flex-direction: column;
    background: var(--bg-surface); border-right: 1px solid var(--border);
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    transform: translateX(-100%); transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}
.sidebar.open { transform: translateX(0); }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 0; height: 100vh; transform: none !important; } }

.sidebar-brand {
    height: 60px; padding: 0 18px; display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-brand-icon {
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--accent); display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: white; letter-spacing: -0.5px;
}
.sidebar-brand-text { font-size: 14px; font-weight: 700; color: var(--text-1); }
.sidebar-brand-sub  { font-size: 11px; font-weight: 500; color: var(--text-3); margin-top: 1px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 8px; }
.sidebar-section {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-3);
    padding: 16px 10px 6px; margin-top: 4px;
}
.sidebar-section:first-child { padding-top: 6px; }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
    text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast);
    position: relative; margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-1); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Active state is carried by background + left accent bar + text color together, not by color alone. */
.nav-item.active {
    background: var(--accent-glow); color: #e879f9;
    border-left: 2px solid var(--accent);
    padding-left: 8px;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.75; transition: opacity var(--transition-fast); }
.nav-item:hover svg { opacity: 0.95; }
.nav-item.active svg { opacity: 1; }
.nav-item-locked { opacity: .55; }
.nav-item-locked:hover { opacity: .85; }
.nav-upgrade-badge { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); border: 1px solid var(--border-md); border-radius: 99px; padding: 1px 6px; }

.sidebar-footer {
    flex-shrink: 0; padding: 12px; border-top: 1px solid var(--border);
}
.sidebar-user {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    margin-bottom: 4px;
}
.user-avatar {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--accent-glow); border: 1px solid var(--border-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #e879f9;
}
.user-name  { font-size: 12.5px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role  { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.user-role-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--state-success); flex-shrink: 0; }
.logout-btn {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 7px 10px; border-radius: var(--radius-sm); background: none; border: none;
    font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast); font-family: inherit;
}
.logout-btn:hover { background: rgba(239,68,68,0.08); color: var(--state-danger); }
.logout-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logout-btn svg { width: 14px; height: 14px; }

/* ── Main area ──────────────────────────────────────────────────────────── */
.main-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; overflow: hidden; }
@media (min-width: 1024px) { .main-wrapper { margin-left: 0; } }

.main-header {
    height: 60px; flex-shrink: 0;
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; padding: 0 24px; gap: 14px;
}
.hamburger-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
    background: none; cursor: pointer; flex-shrink: 0;
    transition: background var(--transition-fast);
}
.hamburger-btn:hover { background: var(--bg-hover); }
.hamburger-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hamburger-btn svg { width: 17px; height: 17px; color: var(--text-2); }
@media (min-width: 1024px) { .hamburger-btn { display: none; } }

.header-title { font-size: 15px; font-weight: 600; color: var(--text-1); flex: 1; }
.header-actions { display: flex; align-items: center; gap: 8px; }

.main-content { flex: 1; overflow-y: auto; padding: 24px; }
@media (max-width: 640px) { .main-content { padding: 16px; } }
/* .badge / .btn set their own `display`, which silently overrode the `hidden` attribute (a hidden "0 pending" badge
   was still drawn). `hidden` must always hide, everywhere in the app. */
.main-content [hidden], .main-header [hidden] { display: none !important; }
/* A plain .btn (no variant class) has no colour of its own and would otherwise render as a bare blue link inside
   this shell - give it the same look as .btn-secondary so an unstyled secondary action still reads as a button. */
.main-content .btn:not([class*="btn-"]), .main-header .btn:not([class*="btn-"]) {
    color: var(--text-1); background: rgba(255,255,255,0.05); border-color: var(--border-md);
}
.main-content .btn:not([class*="btn-"]):hover, .main-header .btn:not([class*="btn-"]):hover { background: rgba(255,255,255,0.09); }

/*
 * Page header: title + optional subtitle + optional right-aligned actions. Every authenticated page shares this one
 * class instead of hand-rolling its own font-size/weight/color, which previously drifted (16px/18px/20px title sizes
 * all appeared across different pages for what is the same "page title" level).
 */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-header-title { font-size: 20px; font-weight: 800; color: var(--text-1); line-height: 1.3; }
.page-header-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Responsive grid helpers ────────────────────────────────────────────── */
.grid-stats { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 480px)  { .grid-stats { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1200px) { .grid-stats { grid-template-columns: repeat(4,1fr); } }

.grid-stats-3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .grid-stats-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .grid-stats-3 { grid-template-columns: repeat(3,1fr); } }

.grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: repeat(2,1fr); } }

.grid-3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3,1fr); } }