/* ───────────────────────────────────────────────────────────
   v2 fresh design — vibrant gradient (Stripe Atlas vibe)
   Dark + light theme via CSS variables.
   ─────────────────────────────────────────────────────────── */

[v-cloak] { display: none; }

/* Design tokens */
:root {
    /* Surfaces (dark default) */
    --bg-base: 8 10 22;
    --bg-canvas: 12 14 26;
    --bg-elevated: 22 26 44;
    --bg-card: 255 255 255;
    --bg-card-alpha: 0.04;
    --bg-card-hover-alpha: 0.07;
    --border: 255 255 255;
    --border-alpha: 0.08;
    --border-strong-alpha: 0.14;

    /* Text */
    --text-primary: 241 245 249;
    --text-secondary: 148 163 184;
    --text-muted: 100 116 139;

    /* Accent (indigo → purple) */
    --accent-from: 99 102 241;
    --accent-mid: 139 92 246;
    --accent-to: 168 85 247;

    /* Semantic */
    --positive: 52 211 153;
    --negative: 251 113 133;
    --warning: 251 191 36;
    --info: 96 165 250;

    /* Ambient glow tints */
    --orb-1: 99 102 241;
    --orb-2: 168 85 247;
    --orb-3: 56 189 248;
}

:root[data-theme="light"] {
    --bg-base: 250 250 252;
    --bg-canvas: 248 250 254;
    --bg-elevated: 255 255 255;
    --bg-card: 255 255 255;
    --bg-card-alpha: 1;
    --bg-card-hover-alpha: 1;
    --border: 15 23 42;
    --border-alpha: 0.08;
    --border-strong-alpha: 0.16;

    --text-primary: 15 23 42;
    --text-secondary: 71 85 105;
    --text-muted: 100 116 139;

    --orb-1: 99 102 241;
    --orb-2: 168 85 247;
    --orb-3: 56 189 248;
}

/* Base */
html, body { font-size: 14px; }
@media (min-width: 640px) {
    html, body { font-size: 15px; }
}

body {
    color: rgb(var(--text-primary));
    background: rgb(var(--bg-base));
    background-attachment: fixed;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Animated gradient orbs (live background) */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
    animation: orbFloat 20s ease-in-out infinite;
}
body::before {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgb(var(--orb-1) / 0.35), transparent 70%);
}
body::after {
    bottom: -15%;
    right: -10%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgb(var(--orb-2) / 0.30), transparent 70%);
    animation-delay: -7s;
    animation-duration: 26s;
}
:root[data-theme="light"] body::before { opacity: 0.4; }
:root[data-theme="light"] body::after { opacity: 0.35; }

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(4vw, -3vw) scale(1.05); }
    66% { transform: translate(-3vw, 4vw) scale(0.95); }
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgb(var(--border) / 0.18);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--border) / 0.30); }

/* ─── Glass card ─── */
.card {
    background: rgb(var(--bg-card) / var(--bg-card-alpha));
    border: 1px solid rgb(var(--border) / var(--border-alpha));
    border-radius: 1.25rem;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow:
        0 10px 30px -10px rgb(0 0 0 / 0.4),
        inset 0 1px 0 rgb(255 255 255 / 0.04);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
:root[data-theme="light"] .card {
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        0 8px 24px -6px rgb(15 23 42 / 0.10);
}

.card-glow {
    position: relative;
    overflow: hidden;
}
.card-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgb(var(--accent-from) / 0.4), rgb(var(--accent-to) / 0.2), transparent 60%);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.card-glow:hover::before { opacity: 1; }

.card-accent {
    background: linear-gradient(135deg,
        rgb(var(--accent-from) / 0.12),
        rgb(var(--accent-to) / 0.08));
    border-color: rgb(var(--accent-mid) / 0.25);
}

/* ─── Buttons ─── */
.btn-primary {
    background: linear-gradient(135deg, rgb(var(--accent-from)), rgb(var(--accent-to)));
    color: white;
    box-shadow:
        0 8px 20px -6px rgb(var(--accent-from) / 0.5),
        inset 0 1px 0 rgb(255 255 255 / 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    font-weight: 600;
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.10);
    box-shadow:
        0 12px 28px -8px rgb(var(--accent-from) / 0.6),
        inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    background: rgb(var(--bg-card) / var(--bg-card-alpha));
    border: 1px solid rgb(var(--border) / var(--border-alpha));
    color: rgb(var(--text-primary));
    transition: background 0.15s ease, border-color 0.15s ease;
    font-weight: 500;
}
.btn-ghost:hover {
    background: rgb(var(--bg-card) / var(--bg-card-hover-alpha));
    border-color: rgb(var(--border) / var(--border-strong-alpha));
}

.btn-danger {
    background: linear-gradient(135deg, rgb(244 63 94), rgb(225 29 72));
    color: white;
    box-shadow: 0 8px 20px -6px rgb(244 63 94 / 0.45);
    font-weight: 600;
}
.btn-danger:hover { filter: brightness(1.10); transform: translateY(-1px); }

/* ─── Inputs ─── */
.input-dark, input[type="text"], input[type="number"], input[type="date"], input[type="password"], textarea, select {
    width: 100%;
    background: rgb(var(--bg-elevated) / 0.7);
    border: 1px solid rgb(var(--border) / var(--border-alpha));
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    color: rgb(var(--text-primary));
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    outline: none;
}
:root[data-theme="light"] .input-dark,
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
    background: white;
}
.input-dark:focus, input:focus, textarea:focus, select:focus {
    border-color: rgb(var(--accent-from) / 0.6);
    box-shadow: 0 0 0 4px rgb(var(--accent-from) / 0.15);
}

/* ─── Nav active state ─── */
.nav-active {
    background: linear-gradient(135deg, rgb(var(--accent-from) / 0.18), rgb(var(--accent-to) / 0.18));
    color: white;
    box-shadow: inset 0 0 0 1px rgb(var(--accent-from) / 0.4),
                0 4px 12px -4px rgb(var(--accent-from) / 0.4);
}
:root[data-theme="light"] .nav-active { color: rgb(var(--accent-from)); }

/* ─── Text helpers ─── */
.text-primary { color: rgb(var(--text-primary)); }
.text-secondary { color: rgb(var(--text-secondary)); }
.text-muted { color: rgb(var(--text-muted)); }

.text-gradient {
    background: linear-gradient(135deg, rgb(var(--accent-from)), rgb(var(--accent-to)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-positive { color: rgb(var(--positive)); }
.text-negative { color: rgb(var(--negative)); }
.text-warning { color: rgb(var(--warning)); }
.text-info { color: rgb(var(--info)); }

/* ─── Modal transitions ─── */
.modal-enter-active, .modal-leave-active { transition: opacity 0.25s ease; }
.modal-enter-from, .modal-leave-to { opacity: 0; }
.modal-enter-active .modal-panel, .modal-leave-active .modal-panel {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.modal-enter-from .modal-panel, .modal-leave-to .modal-panel {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
}
.modal-panel {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgb(var(--bg-elevated));
    border: 1px solid rgb(var(--border) / var(--border-strong-alpha));
}

/* ─── Toast transitions ─── */
.toast-enter-active, .toast-leave-active {
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateX(20px); }

/* ─── Legacy compatibility (old class names used by cow.php / rakhal.php) ─── */
.glass {
    background: rgb(var(--bg-card) / var(--bg-card-alpha));
    border: 1px solid rgb(var(--border) / var(--border-alpha));
    border-radius: 1rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.glass-strong {
    background: rgb(var(--bg-card) / calc(var(--bg-card-alpha) * 1.6));
    border: 1px solid rgb(var(--border) / var(--border-alpha));
    border-radius: 1rem;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.35);
}
:root[data-theme="light"] .glass,
:root[data-theme="light"] .glass-strong {
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 6px 20px -4px rgb(15 23 42 / 0.08);
}

/* Tailwind text bumps kept (for cow.php verbatim) */
.text-\[9px\] { font-size: 12px !important; line-height: 1.4 !important; }
.text-\[10px\] { font-size: 13px !important; line-height: 1.4 !important; }
.text-\[11px\] { font-size: 13px !important; line-height: 1.5 !important; }
.text-\[8px\] { font-size: 12px !important; }

/* Light-mode legibility for color-classed text from verbatim pages */
:root[data-theme="light"] .text-gray-400 { color: rgb(71 85 105); }
:root[data-theme="light"] .text-gray-500 { color: rgb(100 116 139); }
:root[data-theme="light"] .text-gray-300 { color: rgb(51 65 85); }
:root[data-theme="light"] .text-gray-200 { color: rgb(30 41 59); }
:root[data-theme="light"] .text-gray-100 { color: rgb(15 23 42); }
:root[data-theme="light"] .text-white { color: rgb(15 23 42); }

/* Light-mode overlay flip for white-on-dark → dark-on-light */
:root[data-theme="light"] .bg-white\/5 { background-color: rgb(15 23 42 / 0.04) !important; }
:root[data-theme="light"] .bg-white\/10 { background-color: rgb(15 23 42 / 0.06) !important; }
:root[data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgb(15 23 42 / 0.02) !important; }
:root[data-theme="light"] .bg-white\/\[0\.025\] { background-color: rgb(15 23 42 / 0.025) !important; }
:root[data-theme="light"] .bg-white\/\[0\.03\] { background-color: rgb(15 23 42 / 0.03) !important; }
:root[data-theme="light"] .bg-white\/\[0\.04\] { background-color: rgb(15 23 42 / 0.04) !important; }
:root[data-theme="light"] .bg-white\/\[0\.05\] { background-color: rgb(15 23 42 / 0.05) !important; }
:root[data-theme="light"] .bg-white\/\[0\.06\] { background-color: rgb(15 23 42 / 0.06) !important; }
:root[data-theme="light"] .bg-white\/\[0\.08\] { background-color: rgb(15 23 42 / 0.06) !important; }
:root[data-theme="light"] .bg-white\/\[0\.10\],
:root[data-theme="light"] .bg-white\/\[0\.1\] { background-color: rgb(15 23 42 / 0.08) !important; }
:root[data-theme="light"] .bg-white\/\[0\.15\] { background-color: rgb(15 23 42 / 0.10) !important; }
:root[data-theme="light"] .bg-white\/\[0\.01\],
:root[data-theme="light"] .bg-white\/\[0\.015\] { background-color: rgb(15 23 42 / 0.015) !important; }

:root[data-theme="light"] [class*="bg-dark-"] { background-color: rgb(248 250 254) !important; }

:root[data-theme="light"] .divide-white\/5 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-white\/10 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-white\/\[0\.03\] > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-white\/\[0\.04\] > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .divide-white\/\[0\.06\] > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(15 23 42 / 0.08) !important;
}

:root[data-theme="light"] .border-white\/5,
:root[data-theme="light"] .border-white\/10,
:root[data-theme="light"] .border-white\/\[0\.03\],
:root[data-theme="light"] .border-white\/\[0\.04\],
:root[data-theme="light"] .border-white\/\[0\.06\],
:root[data-theme="light"] .border-white\/\[0\.08\],
:root[data-theme="light"] .border-white\/\[0\.10\],
:root[data-theme="light"] .border-white\/\[0\.1\] {
    border-color: rgb(15 23 42 / 0.08) !important;
}