/* ============================================================
   LMS CRM — "Obsidian Kinetic" design system
   High-velocity engineering aesthetic: obsidian blacks, electric
   orange + lime accents, glassmorphism, editorial serif disruptor.
   Tailwind (CDN) provides utilities; this file adds theme primitives
   that are awkward to express as utility classes.
   ============================================================ */

:root {
    --canvas: #0a0a0a;
    --flame: #ffffff;   /* primary accent — now white (monochrome theme) */
    --lime: #ffffff;    /* success accent — white */
    --fg: #f5f5f5;
    --muted: #a3a3a3;
    --stroke: rgba(255, 255, 255, 0.08);
    --stroke-soft: rgba(255, 255, 255, 0.06);
}

html { scroll-behavior: smooth; }

body {
    background: var(--canvas);
    color: var(--fg);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambient background glow — subtle depth behind the obsidian canvas. */
.bg-aurora {
    position: relative;
    isolation: isolate;
}
.bg-aurora::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(600px 400px at 12% -5%, rgba(255, 255, 255, 0.05), transparent 70%),
        radial-gradient(560px 380px at 100% 105%, rgba(255, 255, 255, 0.035), transparent 70%);
    pointer-events: none;
}

/* Editorial serif "disruptor" for keywords inside headlines. */
.accent-serif {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

/* --- Surfaces --------------------------------------------------- */

/* Level 1: solid container / card. */
.card {
    background: #0f0f10;
    border: 1px solid var(--stroke-soft);
    border-radius: 1.5rem;      /* 24px enveloping radius */
}

/* Level 2: glassmorphic floating surface (nav, modals, sidebar). */
.glass {
    background: rgba(21, 21, 21, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--stroke);
}
/* Top-light gradient stroke for glass edges. */
.glass-stroke {
    position: relative;
}
.glass-stroke::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* --- Form fields ------------------------------------------------ */
.field {
    background: #151515;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--fg);
    border-radius: 0.5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: #6c6764; }
.field:focus {
    outline: none;
    border-color: var(--flame);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}
select.field option { background: #151515; color: var(--fg); }

/* --- Buttons ---------------------------------------------------- */
.btn-flame {
    background: var(--flame);
    color: #0a0a0a;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background .15s ease, transform .05s ease, box-shadow .2s ease;
}
.btn-flame:hover { background: #e5e5e5; box-shadow: 0 6px 24px rgba(255, 255, 255, 0.12); }
.btn-flame:active { transform: translateY(1px); }

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #f6f6f6;
    border-radius: 0.5rem;
    transition: border-color .15s ease, background .15s ease;
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); }

.btn-danger {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #d4d4d4;
    border-radius: 0.5rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-danger:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45); color: #fff; }

/* --- Status dots ------------------------------------------------ */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 9999px;
}
.status-dot.is-success { background: #ffffff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); }
.status-dot.is-alert   { background: #a3a3a3; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10); }

/* --- Table zebra + scrollbar ------------------------------------ */
[data-leads-table] tbody tr[data-row]:hover { background: rgba(255, 255, 255, 0.03); }

.overflow-x-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar { height: 8px; width: 8px; }
.overflow-x-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
}

/* Expandable dashboard rows: rotate the chevron when open. */
.detail-chevron { transition: transform .15s ease; }
.detail-chevron.is-open { transform: rotate(90deg); color: var(--flame); }

/* Consistent focus ring for keyboard users. */
:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }