@import 'tailwindcss';

@source '../views';
@source '../js';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@theme {
    --font-sans:
        'Inter', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
}

/* ── Theme CSS variables ─────────────────────────────────────────────────── */
:root,
html.dark {
    --bg-base:        #0f0f14;
    --bg-surface:     #13131a;
    --bg-elevated:    #1a1a24;
    --bg-card:        rgba(255, 255, 255, 0.03);
    --bg-card-hover:  rgba(255, 255, 255, 0.06);
    --bg-input:       rgba(255, 255, 255, 0.05);
    --border:         rgba(255, 255, 255, 0.05);
    --border-hover:   rgba(255, 255, 255, 0.1);
    --text-primary:   #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
    --text-faint:     #475569;
}

html.light {
    --bg-base:        #f1f5f9;
    --bg-surface:     #ffffff;
    --bg-elevated:    #f8fafc;
    --bg-card:        rgba(0, 0, 0, 0.025);
    --bg-card-hover:  rgba(0, 0, 0, 0.05);
    --bg-input:       rgba(0, 0, 0, 0.04);
    --border:         rgba(0, 0, 0, 0.07);
    --border-hover:   rgba(0, 0, 0, 0.13);
    --text-primary:   #0f172a;
    --text-secondary: #1e293b;
    --text-muted:     #475569;
    --text-faint:     #94a3b8;
}

/* ── Light theme global overrides ────────────────────────────────────────── */

/* Hardcoded hex backgrounds */
html.light [class*="bg-\[#0f0f14\]"]  { background-color: var(--bg-base) !important; }
html.light [class*="bg-\[#13131a\]"]  { background-color: var(--bg-surface) !important; }
html.light [class*="bg-\[#1a1a24\]"]  { background-color: var(--bg-elevated) !important; }
html.light .bg-\[#0f0f14\]            { background-color: var(--bg-base) !important; }
html.light .bg-\[#13131a\]            { background-color: var(--bg-surface) !important; }
html.light .bg-\[#1a1a24\]            { background-color: var(--bg-elevated) !important; }

/* Opacity-based white backgrounds */
html.light .bg-white\/\[0\.02\]        { background-color: rgba(0,0,0,0.02) !important; }
html.light .bg-white\/\[0\.03\]        { background-color: var(--bg-card) !important; }
html.light .bg-white\/\[0\.04\]        { background-color: rgba(0,0,0,0.04) !important; }
html.light .bg-white\/\[0\.06\]        { background-color: rgba(0,0,0,0.05) !important; }
html.light .bg-white\/5                { background-color: rgba(0,0,0,0.04) !important; }
html.light .bg-white\/10               { background-color: rgba(0,0,0,0.06) !important; }
html.light .bg-white\/20               { background-color: rgba(0,0,0,0.09) !important; }

/* Opacity-based white backgrounds – hover states */
html.light .hover\:bg-white\/\[0\.06\]:hover { background-color: rgba(0,0,0,0.06) !important; }
html.light .hover\:bg-white\/5:hover          { background-color: rgba(0,0,0,0.05) !important; }
html.light .hover\:bg-white\/10:hover         { background-color: rgba(0,0,0,0.07) !important; }

/* Modal / overlay backdrops */
html.light .bg-black\/60  { background-color: rgba(0,0,0,0.35) !important; }
html.light .bg-black\/50  { background-color: rgba(0,0,0,0.25) !important; }
html.light .bg-black\/40  { background-color: rgba(0,0,0,0.20) !important; }

/* Borders */
html.light .border-white\/\[0\.05\]   { border-color: #e2e8f0 !important; }
html.light .border-white\/\[0\.06\]   { border-color: #e2e8f0 !important; }
html.light .border-white\/\[0\.07\]   { border-color: #e2e8f0 !important; }
html.light .border-white\/\[0\.08\]   { border-color: #d1d9e6 !important; }
html.light .border-white\/\[0\.10\]   { border-color: #cbd5e1 !important; }
html.light .border-white\/5            { border-color: #e8edf5 !important; }
html.light .border-white\/10           { border-color: #d1d9e6 !important; }
html.light .border-white\/20           { border-color: #94a3b8 !important; }
html.light .hover\:border-white\/10:hover { border-color: #94a3b8 !important; }
html.light .hover\:border-white\/20:hover { border-color: #64748b !important; }
html.light .divide-white\/5 > *        { border-color: #e8edf5 !important; }

/* Divider lines (h-px bg-white/10 pattern) */
html.light [class*="h-px"][class*="bg-white"]  { background-color: #e2e8f0 !important; }

/* Text */
html.light .text-white                  { color: #0f172a !important; }
html.light .text-slate-100              { color: #0f172a !important; }
html.light .text-slate-200              { color: #1e293b !important; }
html.light .text-slate-300              { color: #334155 !important; }
html.light .text-slate-400              { color: #64748b !important; }
html.light .text-slate-500              { color: #94a3b8 !important; }
html.light .text-slate-600              { color: #94a3b8 !important; }
/* Keep white text on colored buttons/badges/bubbles — both as child AND same-element */
html.light .bg-indigo-600 .text-white,
html.light .bg-indigo-600.text-white,
html.light .bg-indigo-500 .text-white,
html.light .bg-indigo-500.text-white,
html.light .bg-gradient-to-r .text-white,
html.light [class*="bg-indigo-"].text-white,
html.light [class*="bg-purple-"].text-white,
html.light [class*="bg-emerald-"].text-white,
html.light [class*="bg-red-"].text-white,
html.light [class*="bg-amber-"].text-white { color: #ffffff !important; }

/* Inputs */
html.light input,
html.light textarea,
html.light select {
    color: #0f172a !important;
    background-color: #ffffff !important;
    border-color: #d1d9e6 !important;
}
html.light input:focus,
html.light textarea:focus,
html.light select:focus { border-color: #6366f1 !important; }
html.light input::placeholder,
html.light textarea::placeholder { color: #94a3b8 !important; }
html.light select option {
    background-color: #ffffff;
    color: #0f172a;
}
/* Native checkbox */
html.light input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #d1d9e6 !important;
    accent-color: #6366f1;
}

/* Cards get a subtle shadow in light mode */
html.light .rounded-2xl,
html.light .rounded-xl {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
/* But NOT on buttons — reset shadow on interactive elements */
html.light button.rounded-2xl,
html.light button.rounded-xl,
html.light a.rounded-2xl,
html.light a.rounded-xl { box-shadow: none; }

/* Auth layout – left decorative panel always stays dark */
html.light .auth-panel-left { background: linear-gradient(135deg, #312e81, #1e1b4b, #4c1d95) !important; }

/* Ring offset on color pickers */
html.light [class*="ring-offset-\[#"] { --tw-ring-offset-color: var(--bg-elevated) !important; }

/* Gradient via dark hex (auth left panel) — keep dark */
html.light [class*="via-\[#0f0f14\]"] { /* intentionally kept dark for decorative panels */ }

/* Microsoft button / social login buttons */
html.light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.06) !important; }

/* Floating chat bar */
html.light .floating-chat-bar { background-color: #ffffff !important; border-color: #d1d9e6 !important; }

/* ── Scrollbar styling ───────────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
}

html.light * {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}
html.light *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.13);
}
html.light *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.22);
}

/* Date input calendar icon */
html.light input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.5;
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
    cursor: pointer;
}

/* Select arrow */
select option {
    background-color: #1a1a24;
    color: white;
}