:root {
    --primary-color:#2563eb;
    --bg-color:#f8fafc;
    --card-bg:#ffffff;
    --text-color:#1e293b;
    --border-color:#e2e8fc;
    --success-color:#22c55e;
    --danger-color:#ef4444;

    --shadow-sm:0 1px 2px rgba(0,0,0,.05);
    --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
    --radius:8px;
    --transition:.2s ease-in-out;
}

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

body {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
    background:var(--bg-color);
    color:var(--text-color);
    line-height:1.6;
    min-height:100vh;
    display:flex;flex-direction:column;
}

a{color:var(--primary-color);text-decoration:none;transition:color var(--transition)}
a:hover{color:#1d4ed8}

/* ── Nav ─────────────────────────────────────── */
.navbar {
    background:var(--card-bg);border-bottom:1px solid var(--border-color);
    padding:0 2rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm);
}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-brand{font-size:1.5rem;font-weight:700;color:var(--primary-color)}
.nav-links{display:flex;gap:1.5rem;list-style:none}
.nav-links a{color:var(--text-color);font-weight:500;padding:.5rem .25rem;border-bottom:2px solid transparent;transition:border var(--transition),color var(--transition)}
.nav-links a:hover,.nav-links a.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}

/* ── Layout ──────────────────────────────────── */
.main-wrap{max-width:1200px;margin:0 auto;padding:2rem;flex:1;width:100%}

/* ── Hero ────────────────────────────────────── */
.hero{text-align:center;padding:4rem 2rem;background:linear-gradient(135deg,var(--primary-color),#7c3aed);color:#fff;border-radius:var(--radius);margin-bottom:2.5rem}
.hero h1{font-size:2.5rem;font-weight:800;margin-bottom:.75rem}
.hero p{font-size:1.25rem;opacity:.9;margin-bottom:2rem}

/* ── Buttons ─────────────────────────────────── */
.btn{display:inline-block;padding:.625rem 1.5rem;border-radius:var(--radius);font-weight:600;font-size:.9375rem;cursor:pointer;border:none;text-decoration:none;transition:all var(--transition)}
.btn-primary{background:var(--primary-color);color:#fff}
.btn-primary:hover{background:#1d4ed8;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;border:2px solid var(--border-color);color:var(--text-color)}
.btn-outline:hover{border-color:var(--primary-color);color:var(--primary-color)}

/* ── Cards ───────────────────────────────────── */
.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* ── Stats Grid ──────────────────────────────── */
.stats-grid{display:grid;gap:1.5rem;margin-bottom:2.5rem}
.stats-grid.s3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stat-card{text-align:center;padding:2rem 1.5rem}
.stat-value{font-size:2rem;font-weight:800;color:var(--primary-color)}
.stat-label{color:#64748b;margin-top:.25rem;font-size:.9375rem}

/* ── Section headings ────────────────────────── */
.section-title{font-size:1.5rem;font-weight:700;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--border-color)}

/* ── Tables ──────────────────────────────────── */
.table-wrap{overflow-x:auto;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:.875rem 1.25rem;background:#f1f5f9;font-weight:600;color:#475569;border-bottom:2px solid var(--border-color);font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em}
td{padding:.875rem 1.25rem;border-bottom:1px solid var(--border-color)}
tr:hover td{background:#f8fafc}

/* ── Badges / Tags ───────────────────────────── */
.badge{display:inline-block;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600}
.badge-success{background:#dcfce7;color:#166534}
.badge-warning{background:#fef9c3;color:#854d0e}
.badge-danger{background:#fee2e2;color:#991b1b}

/* ── Forms ───────────────────────────────────── */
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-weight:600;margin-bottom:.375rem;font-size:.875rem}
.form-input,.form-select,.form-textarea {
    width:100%;padding:.625rem .875rem;border:1px solid var(--border-color);border-radius:var(--radius);
    font-size:.9375rem;transition:border var(--transition),box-shadow var(--transition);background:#fff;color:var(--text-color);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-textarea{min-height:120px;resize:vertical}

/* ── Alerts / flash messages ─────────────────── */
.alert{padding:.75rem 1rem;border-radius:var(--radius);font-size:.875rem;margin-bottom:1.25rem;line-height:1.5}
.alert-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}

/* ── Footer ──────────────────────────────────── */
.footer{text-align:center;padding:2rem;color:#94a3b8;font-size:.8125rem;border-top:1px solid var(--border-color)}

/* ── Empty state ─────────────────────────────── */
.empty-state{text-align:center;padding:4rem 2rem}
.empty-icon{font-size:3.5rem;margin-bottom:1rem;opacity:.3}
.empty-text{color:#94a3b8;font-size:1.0625rem}

/* ── Responsive ──────────────────────────────── */
@media(max-width:768px){
    .navbar{padding:0 1rem}
    .nav-links{gap:.75rem;flex-wrap:wrap}
    .hero h1{font-size:1.75rem}
    .hero p{font-size:1rem}
    .main-wrap{padding:1rem}
    .stats-grid.s3{grid-template-columns:1fr}
    th,td{padding:.625rem .75rem;font-size:.8125rem}
}

@media(max-width:480px){
    .nav-brand{font-size:1.25rem}
    .hero h1{font-size:1.375rem}
    .stat-value{font-size:1.5rem}
    .btn{width:100%;text-align:center;margin-bottom:.5rem}
    .cta-row{display:flex;flex-direction:column;gap:.5rem}
}

/* ═══════════════════════════════════════════════════
 * ENHANCED RESPONSIVE BREAKPOINTS (≤360px)
 * ═══════════════════════════════════════════════════ */
@media(max-width:360px){
    html{font-size:14px}
    .main-wrap{padding:.75rem}
    .hero{padding:2.5rem 1rem}
    .card{padding:1rem}
    th,td{padding:.5rem .5rem;font-size:.75rem}
    .section-title{font-size:1.25rem}
}

/* ═══════════════════════════════════════════════════
 * FOCUS-VISIBLE — Ring effect for keyboard users
 * ═══════════════════════════════════════════════════ */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.4), 0 0 0 1px var(--primary-color);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.4), 0 0 0 1px var(--primary-color);
}

/* ═══════════════════════════════════════════════════
 * SCREEN-READER UTILITY (sr-only)
 * ═══════════════════════════════════════════════════ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════
 * SKIP-TO-CONTENT LINK (accessibility)
 * ═══════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: #fff;
    padding: .625rem 1.5rem;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 600;
    z-index: 9999;
    transition: top .2s ease;
}
.skip-link:focus {
    top: 0;
    box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════
 * HAMBURGER BUTTON — visible on mobile only (≤768px)
 * ═══════════════════════════════════════════════════ */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    gap: 5px;
    z-index: 200;
}

.hamburger-line,
.hamburger-btn .hamburger-line {
    display: block;
    width: 24px;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
}

/* ── Mobile nav collapse (≤768px) ─────────────── */
@media(max-width:768px){
    .hamburger-btn {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card-bg);
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-md);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
        opacity: 0;
    }

    .nav-links.mobile-open {
        max-height: 360px;
        opacity: 1;
        padding: .75rem 1rem;
    }

    .nav-links li {
        border-bottom: 1px solid var(--border-color);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        display: block;
        padding: .875rem .5rem;
        font-size: 1.0625rem;
        min-height: 44px;
        line-height: 1.25;
        border-bottom: none !important;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background: #f8fafc;
        border-radius: var(--radius);
    }

    /* Hamburger animation when open */
    .hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Ensure navbar inner expands to accommodate dropdown */
    .nav-inner {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════
 * TOAST NOTIFICATION SYSTEM
 * ═══════════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    pointer-events: none;
}

.toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: .875rem 1.25rem;
    box-shadow: var(--shadow-md), 0 4px 24px rgba(0,0,0,.08);
    border-left: 4px solid var(--primary-color);
    min-width: 260px;
    max-width: 380px;
    pointer-events: auto;
    animation: toast-in .35s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.toast.fade-out {
    animation: toast-out .3s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}

.toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
}

.toast-message {
    flex: 1;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--text-color);
}

.toast-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1;
    color: #94a3b8;
    transition: background .15s ease, color .15s ease;
}

.toast-dismiss:hover {
    background: #f1f5f9;
    color: var(--text-color);
}

/* ── Toast colour variants (left border + icon bg) ── */
.toast-success {
    border-left-color: var(--success-color);
}
.toast-success .toast-icon {
    background: var(--success-color);
}

.toast-error {
    border-left-color: var(--danger-color);
}
.toast-error .toast-icon {
    background: var(--danger-color);
}

.toast-warning {
    border-left-color: #f59e0b;
}
.toast-warning .toast-icon {
    background: #f59e0b;
    color: #fff;
}

.toast-info {
    border-left-color: var(--primary-color);
}
.toast-info .toast-icon {
    background: var(--primary-color);
}

/* ═══════════════════════════════════════════════════
 * LOADING SPINNER (CSS-only)
 * ═══════════════════════════════════════════════════ */
.spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Spinner overlay (for loading states) ───────── */
.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(248,250,252,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* ═══════════════════════════════════════════════════
 * TABLE ROW — click-to-select highlight
 * ═══════════════════════════════════════════════════ */
.vooch-row-selected td {
    background: rgba(37,99,235,.08) !important;
}

/* ═══════════════════════════════════════════════════
 * FORM — invalid state styles
 * ═══════════════════════════════════════════════════ */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

.field-error-msg {
    color: var(--danger-color);
    font-size: .8125rem;
    margin-top: .375rem;
    line-height: 1.4;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════
 * REDUCED MOTION — respect user preference
 * ═══════════════════════════════════════════════════ */
@media(prefers-reduced-motion: reduce){
    *,*::before,*::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}