/* ============================================================
   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; }
    html, body { height: auto !important; min-height: 0 !important; }
    body {
        background: #fff !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        color: #000 !important;
    }
    main { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }

    /* Card itself: tight, borderless, one page */
    .print-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Photo + fields + QR row — force horizontal even though the print
       page is narrower than the md: breakpoint that normally triggers this */
    .print-card .result-body-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .print-card .result-body-row img { max-width: 90px !important; height: auto !important; }

    .print-card dl {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 20px !important;
    }
    .print-card dt { font-size: 10px !important; margin-bottom: 0 !important; }
    .print-card dd { font-size: 12px !important; }
    .print-card dl > div { padding-bottom: 3px !important; }

    .print-card .text-center.border-b {
        border-color: #000 !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }
    .print-card .text-center.border-b img { width: 40px !important; height: 40px !important; }

    .result-verified-footer {
        background: #f0f9ff !important;
        border: 1px solid #93c5fd !important;
        padding: 8px 14px !important;
        margin-top: 10px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .result-verified-footer p { font-size: 10px !important; margin: 0 !important; }

    /* Safety net: if content still runs slightly long, shrink it to
       guarantee a single page instead of spilling a mostly-blank 2nd/3rd page */
    .print-card { zoom: 0.9; }

    @page {
        size: A4 portrait;
        margin: 8mm;
    }
}

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


/* ============================================================
   v2 — হিরো স্লাইডার / নোটিশ টিকার / গ্যালারি / মডাল
   ============================================================ */

/* ── Hero slider */
.hero-track { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* slide effect: পাশাপাশি সাজানো ট্র্যাক */
.hero-track-slide { display: flex; transition: transform .8s cubic-bezier(.65,.05,.36,1); }
.hero-track-slide .hero-slide { position: relative; flex: 0 0 100%; height: 100%; opacity: 1; visibility: visible; transition: none; }

.hero-dot { transition: all .25s; }
.hero-dot.is-active { background: #fbbf24; width: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-track-slide { transition: none; }
}

/* ── Notice ticker (ডান থেকে বামে) */
.ticker { mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.ticker-track { display: flex; width: max-content; animation: ticker-scroll 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; flex-shrink: 0; min-width: 100%; align-items: center; }
.ticker-item { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.75rem; font-size: .875rem; white-space: nowrap; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; overflow-x: auto; }
    .ticker { overflow-x: auto !important; }
}

/* ── Modal (প্রশিক্ষক প্রোফাইল) */
.csti-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.55); }
.csti-modal.open { display: flex; }
.csti-modal-box { background: #fff; color: #1f2937; border-radius: 1rem; width: 100%; max-width: 38rem; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); }
html.dark .csti-modal-box { background: #1f2937; color: #f3f4f6; }

/* ── Lightbox (গ্যালারি) */
.lightbox { position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.9); padding: 1rem; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: .5rem; }