/* Wozzy Panel — Cal.com Design System */

:root {
    /* Canvas & Surfaces */
    --canvas:               #ffffff;
    --surface-soft:         #f8f9fa;
    --surface-card:         #f5f5f5;
    --surface-strong:       #e5e7eb;
    --surface-dark:         #101010;
    --surface-dark-el:      #1a1a1a;

    /* Borders */
    --hairline:             #e5e7eb;
    --hairline-soft:        #f3f4f6;

    /* Text */
    --ink:                  #111111;
    --body-txt:             #374151;
    --muted:                #6b7280;
    --muted-soft:           #898989;
    --on-dark:              #ffffff;
    --on-dark-soft:         #a1a1aa;

    /* Brand / Actions */
    --primary:              #111111;
    --primary-active:       #242424;
    --on-primary:           #ffffff;
    --accent:               #3b82f6;

    /* Semantic */
    --success:              #10b981;
    --warning:              #f59e0b;
    --error:                #ef4444;

    /* Radius (Cal.com scale) */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   8px;   /* buttons, inputs */
    --r-lg:   12px;  /* content cards */
    --r-xl:   16px;  /* hero mockup */
    --r-pill: 9999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--surface-card);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Display headlines (Cal Sans substitute: Inter 600, tight tracking) ── */
h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.15;
}

/* ── Cards ──────────────────────────────────── */
.card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 24px;
}

/* ── Buttons ────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}
.btn-primary:active:not(:disabled) {
    background: var(--primary-active);
    border-color: var(--primary-active);
}

.btn-secondary {
    background: var(--canvas);
    color: var(--ink);
    border-color: var(--hairline);
}
.btn-secondary:active:not(:disabled) { background: var(--surface-card); }

.btn-ghost {
    background: transparent;
    color: var(--muted);
    border: none;
    padding: 0 10px;
}

/* ── Inputs ─────────────────────────────────── */
.input {
    height: 40px;
    padding: 0 14px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}
.input:focus { border-color: var(--ink); }
.input::placeholder { color: var(--muted); }

select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

textarea.input { height: auto; padding: 10px 14px; resize: vertical; }

/* ── Sidebar nav ────────────────────────────── */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--r-md);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.12s, background 0.12s;
}
.sidebar-link:hover { color: var(--ink); background: var(--surface-card); }
.sidebar-link.active { color: var(--ink); background: var(--surface-card); font-weight: 600; }

.sidebar-label {
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-soft);
    margin-bottom: 2px;
}

/* ── Text utilities ─────────────────────────── */
.text-muted      { color: var(--muted); }
.text-muted-soft { color: var(--muted-soft); }

/* ── Pre / Code ─────────────────────────────── */
pre {
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 16px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: var(--body-txt);
}

code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.875em;
    background: var(--surface-card);
    padding: 1px 5px;
    border-radius: var(--r-xs);
}

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-strong); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

/* ── Toast ──────────────────────────────────── */
#toast-container > div { transition: opacity 0.25s; }

/* ─────────────────────────────────────────────────────────────────────────
   THEME BRIDGE: remap Tailwind dark-theme utility classes to light values
   so page templates don't need per-class edits
   ───────────────────────────────────────────────────────────────────────── */

/* Backgrounds */
.bg-black\/30, .bg-black\/40 { background-color: var(--surface-soft)  !important; }
.bg-black                     { background-color: var(--surface-card)  !important; }
.bg-zinc-900, .bg-zinc-950    { background-color: var(--surface-card)  !important; }
.bg-zinc-800\/60              { background-color: var(--hairline-soft) !important; }

/* Borders */
.border-zinc-800,
.border-zinc-800\/60,
.border-zinc-800\/70,
.border-zinc-900             { border-color: var(--hairline)       !important; }
.border-zinc-700             { border-color: var(--surface-strong) !important; }

/* Text — keep semantic palette intact */
.text-zinc-300,
.text-zinc-200,
.text-zinc-100               { color: var(--ink)       !important; }
.text-zinc-400               { color: var(--body-txt)  !important; }
.text-zinc-500,
.text-zinc-600               { color: var(--muted)     !important; }
.text-zinc-700               { color: var(--muted-soft)!important; }

/* Semantic colours — preserve as-is */
.text-green-400   { color: #059669 !important; }
.text-blue-400    { color: #2563eb !important; }
.text-red-400,
.text-red-300     { color: #dc2626 !important; }
.text-yellow-400  { color: #d97706 !important; }
.text-purple-400  { color: #7c3aed !important; }

/* Semantic tinted backgrounds — lighter pastels on white */
.bg-green-500\/10  { background-color: #d1fae5 !important; }
.bg-red-500\/10    { background-color: #fee2e2 !important; }
.bg-blue-500\/10   { background-color: #dbeafe !important; }
.bg-yellow-500\/5  { background-color: #fffbeb !important; }
.bg-yellow-500\/10 { background-color: #fef3c7 !important; }
.bg-purple-500\/10 { background-color: #ede9fe !important; }
.bg-red-600        { background-color: #dc2626 !important; }

/* Semantic tinted borders */
.border-green-500\/20  { border-color: #6ee7b7 !important; }
.border-red-500\/20    { border-color: #fca5a5 !important; }
.border-blue-500\/20   { border-color: #93c5fd !important; }
.border-yellow-500\/20 { border-color: #fcd34d !important; }
.border-purple-500\/20 { border-color: #c4b5fd !important; }
.border-red-600        { border-color: #dc2626 !important; }
.border-red-500\/10    { border-color: #fca5a5 !important; }

/* Font mono in preformatted blocks */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — html.dark overrides every CSS variable; layout surfaces flip
   ═══════════════════════════════════════════════════════════════════════════ */

html.dark {
    --canvas:         #0c0c0e;
    --surface-soft:   #111113;
    --surface-card:   #09090b;
    --surface-strong: #27272a;
    --hairline:       #27272a;
    --hairline-soft:  #1c1c1f;

    --ink:            #fafafa;
    --body-txt:       #d4d4d8;
    --muted:          #a1a1aa;
    --muted-soft:     #71717a;
    --on-dark:        #fafafa;
    --on-dark-soft:   #a1a1aa;

    --primary:        #fafafa;
    --primary-active: #e5e5e5;
    --on-primary:     #09090b;
}

/* Body & structural surfaces */
html.dark body        { background-color: #09090b; color: #fafafa; }
html.dark #sidebar    { background-color: #0c0c0e !important; border-color: #27272a !important; }
html.dark #sidebar-logo-area { border-color: #1c1c1f !important; }
html.dark #page-header { background-color: #0c0c0e !important; border-color: #27272a !important; }

/* Logo icon — flip to white bg with dark icon in dark mode */
html.dark #sidebar-logo-icon { background-color: #fafafa !important; }
html.dark #sidebar-logo-icon i { color: #111111 !important; }

/* Hard-coded hex text/border classes in base.html */
html.dark .text-\[\#111111\]  { color: #fafafa   !important; }
html.dark .text-\[\#6b7280\]  { color: #a1a1aa   !important; }
html.dark .text-\[\#898989\]  { color: #71717a   !important; }
html.dark .bg-white           { background-color: #0c0c0e !important; }
html.dark .border-\[\#e5e7eb\] { border-color: #27272a !important; }
html.dark .border-\[\#f3f4f6\] { border-color: #1c1c1f !important; }

/* Dark mode — restore Tailwind dark utilities to their intended dark values */
html.dark .bg-black\/30        { background-color: rgba(0,0,0,0.3)   !important; }
html.dark .bg-black\/40        { background-color: rgba(0,0,0,0.4)   !important; }
html.dark .bg-black            { background-color: #000000           !important; }
html.dark .bg-zinc-900         { background-color: #18181b           !important; }
html.dark .bg-zinc-950         { background-color: #09090b           !important; }
html.dark .bg-zinc-800\/60     { background-color: rgba(39,39,42,.6) !important; }

html.dark .border-zinc-800,
html.dark .border-zinc-800\/60,
html.dark .border-zinc-800\/70,
html.dark .border-zinc-900     { border-color: #27272a !important; }
html.dark .border-zinc-700     { border-color: #3f3f46 !important; }

html.dark .text-zinc-300       { color: #d4d4d8 !important; }
html.dark .text-zinc-200,
html.dark .text-zinc-100       { color: #fafafa  !important; }
html.dark .text-zinc-400       { color: #a1a1aa  !important; }
html.dark .text-zinc-500,
html.dark .text-zinc-600       { color: #71717a  !important; }
html.dark .text-zinc-700       { color: #52525b  !important; }

/* Dark mode: hard-coded hex colour overrides in page templates */
html.dark [style*="color:#111111"]     { color: #fafafa  !important; }
html.dark [style*="color:#374151"]     { color: #d4d4d8  !important; }
html.dark [style*="color:#6b7280"]     { color: #a1a1aa  !important; }
html.dark [style*="color:#92400e"]     { color: #fde68a  !important; }
html.dark [style*="background:#f5f5f5"],
html.dark [style*="background:#f8f9fa"],
html.dark [style*="background:#ffffff"],
html.dark .bg-\[\#f5f5f5\],
html.dark .bg-\[\#f8f9fa\]             { background-color: #111113 !important; }
html.dark [style*="background:#fffbeb"]{ background-color: #1c1700 !important; }
html.dark [style*="border-color:#fde68a"] { border-color: #92400e !important; }
html.dark [style*="border-color:#e5e7eb"],
html.dark .border-\[\#e5e7eb\]         { border-color: #27272a !important; }
html.dark .bg-white.border-\[\#e5e7eb\] { background-color: #0c0c0e !important; }

/* Dark semantic tinted backgrounds — stay intentional but darken */
html.dark .bg-green-500\/10  { background-color: #052e16 !important; }
html.dark .bg-red-500\/10    { background-color: #450a0a !important; }
html.dark .bg-blue-500\/10   { background-color: #0c1445 !important; }
html.dark .bg-yellow-500\/5,
html.dark .bg-yellow-500\/10 { background-color: #1c1400 !important; }
html.dark .bg-purple-500\/10 { background-color: #2e1065 !important; }

html.dark .border-green-500\/20  { border-color: #14532d !important; }
html.dark .border-red-500\/20    { border-color: #7f1d1d !important; }
html.dark .border-blue-500\/20   { border-color: #1e3a8a !important; }
html.dark .border-yellow-500\/20 { border-color: #78350f !important; }
html.dark .border-purple-500\/20 { border-color: #4c1d95 !important; }

/* Pre/code dark */
html.dark pre  { background-color: #111113; border-color: #27272a; color: #a1a1aa; }
html.dark code { background-color: #1c1c1f; }