@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

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

/* ── Quickro Brand Fonts ─────────────────────────────────────────── */
@theme {
    /* ── Typography ─────────────────────────────────────── */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* ── Quickro Brand Red (#D81B2A) ─────────────────────── */
    --color-brand-50:  #fef2f3;
    --color-brand-100: #fde8ea;
    --color-brand-200: #fbd5d9;
    --color-brand-300: #f7aeb5;
    --color-brand-400: #f27e8a;
    --color-brand-500: #e74e5f;
    --color-brand-600: #d81b2a;
    --color-brand-700: #b91525;
    --color-brand-800: #9a1422;
    --color-brand-900: #7f1520;
    --color-brand-950: #46060d;

    /* Semantic alias */
    --color-brand: #D81B2A;
    --color-brand-hover: #b91525;
    --color-brand-light: #fde8ea;

    /* ── Quickro Brand Green (#1B8A3A) ───────────────────── */
    --color-accent-50:  #f0faf3;
    --color-accent-100: #dcf5e4;
    --color-accent-200: #bbe9cc;
    --color-accent-300: #89d6a9;
    --color-accent-400: #50bb7e;
    --color-accent-500: #2a9e5e;
    --color-accent-600: #1b8a3a;
    --color-accent-700: #176e30;
    --color-accent-800: #155829;
    --color-accent-900: #124922;
    --color-accent-950: #092913;

    /* Semantic alias */
    --color-accent: #1B8A3A;
    --color-accent-hover: #176e30;
    --color-accent-light: #dcf5e4;

    /* ── Neutral palette ─────────────────────────────────── */
    --color-surface:      #ffffff;
    --color-surface-alt:  #f8f9fa;
    --color-border:       #e5e7eb;
    --color-border-dark:  #374151;
    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;
    --color-text-muted:   #9ca3af;

    /* ── Dark mode surfaces ───────────────────────────────── */
    --color-dark-bg:      #0f1117;
    --color-dark-surface: #1a1d23;
    --color-dark-card:    #21252e;
    --color-dark-border:  #2e3340;
}

/* ── Base styles ──────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color-scheme: light;
    margin: 0;
    padding: 0;
}

html.dark {
    color-scheme: dark;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dark body {
    background-color: var(--color-dark-bg);
}

/* ── Dark mode card / UI overrides ───────────────────────────────── */
/* Cards and panels */
html.dark .bg-white {
    background-color: var(--color-dark-card) !important;
}
html.dark .bg-slate-50 {
    background-color: var(--color-dark-surface) !important;
}
html.dark .bg-slate-100 {
    background-color: #171a20 !important;
}
/* Borders */
html.dark .border-slate-200 {
    border-color: var(--color-dark-border) !important;
}
html.dark .border-slate-100 {
    border-color: #252932 !important;
}
html.dark .border-slate-300 {
    border-color: var(--color-dark-border) !important;
}
/* Text */
html.dark .text-slate-900 {
    color: #f1f5f9 !important;
}
html.dark .text-slate-800 {
    color: #e2e8f0 !important;
}
html.dark .text-slate-700 {
    color: #cbd5e1 !important;
}
html.dark .text-slate-600 {
    color: #94a3b8 !important;
}
html.dark .text-slate-500 {
    color: #64748b !important;
}
/* Form controls */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
    background-color: var(--color-dark-surface) !important;
    border-color: var(--color-dark-border) !important;
    color: #f1f5f9 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #475569 !important;
}
/* Tab & pill toggles */
html.dark .bg-gray-100 {
    background-color: #1e2228 !important;
}
html.dark .text-gray-700 {
    color: #cbd5e1 !important;
}
html.dark .text-gray-600 {
    color: #94a3b8 !important;
}
html.dark .text-gray-500 {
    color: #64748b !important;
}
html.dark .text-gray-900 {
    color: #f1f5f9 !important;
}
html.dark .border-gray-200 {
    border-color: var(--color-dark-border) !important;
}
html.dark .border-gray-300 {
    border-color: var(--color-dark-border) !important;
}
html.dark .bg-gray-50 {
    background-color: var(--color-dark-surface) !important;
}
/* Dividers */
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-dark-border) !important;
}
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-dark-border) !important;
}

/* ── Scrollbar styling ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.dark ::-webkit-scrollbar-thumb { background: #374151; }
.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ── Sidebar nav active state ─────────────────────────────────────── */
.nav-item-active {
    background: linear-gradient(135deg, #D81B2A15, #D81B2A08);
    border-left: 3px solid #D81B2A;
    color: #D81B2A !important;
}
.nav-item-active svg { color: #D81B2A !important; }

/* ── Brand gradient ─────────────────────────────────────────────── */
.brand-gradient {
    background: linear-gradient(135deg, #D81B2A 0%, #9a1422 100%);
}
.brand-gradient-green {
    background: linear-gradient(135deg, #1B8A3A 0%, #115a26 100%);
}
.brand-gradient-duo {
    background: linear-gradient(135deg, #D81B2A 0%, #1B8A3A 100%);
}

/* ── KPI card glow ───────────────────────────────────────────────── */
.kpi-card-red { box-shadow: 0 4px 20px #D81B2A22; }
.kpi-card-green { box-shadow: 0 4px 20px #1B8A3A22; }

/* ── Toast transitions ───────────────────────────────────────────── */
[x-cloak] { display: none !important; }

.toast-enter { animation: toastIn 0.3s ease; }
.toast-leave { animation: toastOut 0.3s ease forwards; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(100%); }
}

/* ── Table row hover ─────────────────────────────────────────────── */
.table-row-hover:hover { background-color: #D81B2A08; }

/* ── Form focus ring ─────────────────────────────────────────────── */
.input-focus {
    --tw-ring-color: #D81B2A40;
    outline: none;
    border-color: #D81B2A;
    box-shadow: 0 0 0 3px #D81B2A20;
}

/* ── Status badge colours ────────────────────────────────────────── */
.badge-active   { background:#dcf5e4; color:#156B2E; }
.badge-trial    { background:#fef9c3; color:#854d0e; }
.badge-expired  { background:#fde8ea; color:#9a1422; }
.badge-banned   { background:#f3f4f6; color:#374151; }
.badge-pending  { background:#fff7ed; color:#9a3412; }
.badge-synced   { background:#dcf5e4; color:#156B2E; }
.badge-failed   { background:#fde8ea; color:#9a1422; }

/* ── Sidebar collapse animation ─────────────────────────────────── */
.sidebar-collapsed { width: 4rem !important; }
.sidebar-collapsed .sidebar-label { display: none; }
.sidebar-collapsed .sidebar-logo-text { display: none; }
.sidebar { transition: width 0.2s ease; }