/* ============================================================
   assets/css/app.css — CSTI Global Styles
   ============================================================ */

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

body {
    font-family: 'Hind Siliguri', sans-serif;
}

/* ---- Primary color variables ---- */
:root {
    --color-primary:      #1a56db;
    --color-primary-dark: #1e429f;
    --color-primary-light:#e8f0fd;
    --color-accent:       #f59e0b;
}

/* Dark mode overrides */
.dark {
    --color-primary:       #3b82f6;
    --color-primary-dark:  #2563eb;
    --color-primary-light: #1e3a5f;
}

/* ---- Focus ring ---- */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- Card ---- */
.card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 2px 12px rgba(0,0,0,.04);
    transition: box-shadow .2s;
}
.dark .card {
    background: #1f2937;
    box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 2px 12px rgba(0,0,0,.2);
}
.card:hover {
    box-shadow: 0 4px 16px rgba(26,86,219,.12);
}
.dark .card:hover {
    box-shadow: 0 4px 16px rgba(59,130,246,.18);
}

/* ---- Flash messages ---- */
.flash-success {
    background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0;
    padding: .75rem 1rem; border-radius: .5rem; font-size: .9rem;
}
.flash-error {
    background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
    padding: .75rem 1rem; border-radius: .5rem; font-size: .9rem;
}
.flash-info {
    background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;
    padding: .75rem 1rem; border-radius: .5rem; font-size: .9rem;
}
.dark .flash-success { background: #064e3b; color: #6ee7b7; border-color: #065f46; }
.dark .flash-error   { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; }
.dark .flash-info    { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; }

/* ---- Admin table ---- */
.admin-table {
    width: 100%; border-collapse: collapse; font-size: .875rem;
}
.admin-table th {
    background: #f1f5f9; text-align: right;
    padding: .625rem .875rem; font-weight: 600;
    border-bottom: 2px solid #e2e8f0; white-space: nowrap;
}
.dark .admin-table th { background: #374151; border-bottom-color: #4b5563; }
.admin-table td {
    padding: .625rem .875rem; border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.dark .admin-table td { border-bottom-color: #374151; }
.admin-table tr:hover td { background: #f8fafc; }
.dark .admin-table tr:hover td { background: #374151; }

/* ---- Badges ---- */
.badge-pass    { background:#d1fae5; color:#065f46; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.badge-fail    { background:#fee2e2; color:#991b1b; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.badge-pending { background:#fef3c7; color:#92400e; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; }

/* ---- Result page — result card ---- */
.result-verified-footer {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #bfdbfe;
    border-radius: .75rem;
    padding: 1rem 1.5rem;
    text-align: center;
    margin-top: 1.5rem;
}
.dark .result-verified-footer {
    background: linear-gradient(135deg, #1e3a5f 0%, #064e3b 100%);
    border-color: #2563eb;
}

/* ---- Print styles ---- */
@media print {
    nav, footer, .no-print { display: none !important; }
    body { background: #fff !important; font-size: 13px; color: #000 !important; }
    main { padding: 0 !important; max-width: 100% !important; }

    .print-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        border-radius: 8px !important;
        padding: 24px !important;
    }

    .print-card dl { grid-template-columns: 1fr 1fr !important; }
    .print-card { page-break-inside: avoid; }
    .print-card .text-center.border-b { border-color: #000 !important; }

    .result-verified-footer {
        background: #f0f9ff !important;
        border: 1px solid #93c5fd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @page {
        size: A4 portrait;
        margin: 15mm 12mm;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}