/* =========================================================
   eboardresults – Premium Design Layer (v2.0.0)
   Visual redesign that EXACTLY matches the NU Result Unified
   plugin (tabbed checker, floating labels, helper side card,
   popup result modal). Loaded AFTER the original style.css so
   it overrides freely.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Scoped tokens — only apply inside .bdrc-redesign ── */
.bdrc-redesign {
    --primary: #0F52BA;
    --primary-rgb: 15, 82, 186;
    --secondary: #2563EB;
    --accent: #3B82F6;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --dark: #0F172A;
    --light: #F8FAFC;
    --white: #FFFFFF;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #64748B;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-800: #1E293B;
    --font-primary: 'Outfit', sans-serif;
    --font-bengali: 'Hind Siliguri', sans-serif;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.06), 0 4px 6px -2px rgba(0,0,0,.04);
    --shadow-xl: 0 20px 25px -5px rgba(15,82,186,.06), 0 10px 10px -5px rgba(0,0,0,.03);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --transition-normal: all .3s cubic-bezier(.4,0,.2,1);
    --transition-fast: all .15s ease;

    font-family: var(--font-primary);
    color: var(--gray-800);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* ── Container layout ─────────────────────────────────── */
.bdrc-checker-wrapper {
    width: 100%;
    padding: 1.5rem .5rem 2rem;
}
.checker-section-wrapper { width: 100%; }
.checker-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 .5rem;
}

/* ── Utilities ────────────────────────────────────────── */
.bdrc-redesign .flex-center { display: flex; align-items: center; justify-content: center; }
.bdrc-redesign .flex-1 { flex: 1; min-width: 150px; }
.bdrc-redesign .w-full { width: 100%; }
.bdrc-redesign .text-center { text-align: center; }
.bdrc-redesign .text-primary { color: var(--primary); }

/* ── Icons ────────────────────────────────────────────── */
.bdrc-redesign .icon-sm { width: 18px; height: 18px; flex-shrink: 0; }
.bdrc-redesign .icon-md { width: 22px; height: 22px; flex-shrink: 0; }

/* ── Checker card ─────────────────────────────────────── */
.bdrc-redesign.bdrc-app {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.bdrc-redesign .checker-card {
    background: var(--white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    padding: 0 !important;
    box-shadow: var(--shadow-sm) !important;
    margin: 0 auto 1rem;
    max-width: 950px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: var(--transition-normal);
}
.bdrc-redesign .checker-card:hover { box-shadow: var(--shadow-lg) !important; }
.bdrc-redesign .card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: transparent;
    pointer-events: none;
}

/* ── Tabs ─────────────────────────────────────────────── */
.checker-tabs {
    display: flex;
    background-color: var(--white);
    border-bottom: 1.5px solid var(--gray-100);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.checker-tabs::-webkit-scrollbar { display: none; }
.checker-tabs .tab-btn {
    flex: 1;
    min-width: 100px;
    padding: 1rem .75rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: .9rem;
    font-weight: 700;
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: var(--transition-normal);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font-primary);
}
.checker-tabs .tab-btn:hover { color: var(--primary); }
.checker-tabs .tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background-color: var(--white);
}

/* ── Tab panels ───────────────────────────────────────── */
.checker-tab-panels { position: relative; }
.checker-tab-panel { display: none; }
.checker-tab-panel.active-panel { display: block; }
.checker-tab-panel .bdrc-app { margin: 0; padding: 0; max-width: 100%; }

/* ── Checker body (form padding) ──────────────────────── */
.bdrc-redesign .checker-body {
    padding: 2.25rem;
    flex: 1;
    position: relative;
    background: var(--white);
}

/* ── Form layout ──────────────────────────────────────── */
.bdrc-redesign .bdrc-form { margin: 0; padding: 0; border: none; background: none; box-shadow: none; }
.bdrc-redesign .form-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 2.5rem;
}
.bdrc-redesign .form-inputs-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.bdrc-redesign .form-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.bdrc-redesign .form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}
.bdrc-redesign .select-half { width: 150px; }
.bdrc-redesign .form-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}

/* ── Select / Input controls ──────────────────────────── */
.bdrc-redesign .select-wrapper { position: relative; }
.bdrc-redesign .form-control {
    width: 100%;
    background-color: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-family: var(--font-primary);
    font-size: .95rem;
    color: var(--dark);
    font-weight: 600;
    outline: none;
    transition: var(--transition-fast);
    height: 48px;
    line-height: 1.2;
}
.bdrc-redesign .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15,82,186,.1);
}
.bdrc-redesign select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
}
.bdrc-redesign .select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

/* ── Floating-label group ─────────────────────────────── */
.bdrc-redesign .floating-group { position: relative; flex: 1; min-width: 180px; }
.bdrc-redesign .form-control.text-input {
    padding-top: 1.4rem;
    padding-bottom: .35rem;
}
.bdrc-redesign .floating-label {
    position: absolute;
    left: 16px;
    top: 14px;
    color: var(--gray-400);
    font-size: .95rem;
    font-weight: 500;
    pointer-events: none;
    transition: all .2s ease;
    background: transparent;
}
.bdrc-redesign .text-input:focus ~ .floating-label,
.bdrc-redesign .text-input:not(:placeholder-shown) ~ .floating-label {
    top: 5px;
    left: 13px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .04em;
}
.bdrc-redesign .input-helper {
    font-size: .72rem;
    color: var(--gray-400);
    margin-top: 4px;
    padding-left: 2px;
}

/* Invalid state (preserve legacy .bdrc-invalid hook from JS) */
.bdrc-redesign .form-control.bdrc-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

/* ── CAPTCHA box ──────────────────────────────────────── */
.bdrc-redesign .captcha-row { align-items: center; }
.bdrc-redesign .captcha-box {
    background-color: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: .35rem .6rem .35rem .85rem;
    gap: 0;
    user-select: none;
    height: 72px;
    min-width: 250px;
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden;
}
.bdrc-redesign .captcha-image-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
}
.bdrc-redesign .bdrc-captcha-img {
    max-height: 60px;
    max-width: 100%;
    width: auto;
    display: block;
    border-radius: 4px;
}
.bdrc-redesign .bdrc-captcha-loading {
    font-size: .82rem;
    color: var(--gray-400);
    font-weight: 600;
    white-space: nowrap;
}
.bdrc-redesign .btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gray-500);
    padding: .3rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-left: .35rem;
    font-size: 1.2rem;
    line-height: 1;
}
.bdrc-redesign .btn-icon .icon-sm { width: 22px; height: 22px; }
.bdrc-redesign .btn-icon:hover { background: var(--white); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.bdrc-redesign .btn-icon:active { transform: rotate(180deg); }

/* Fading transition while captcha re-loads */
.bdrc-redesign .bdrc-fading { opacity: .4; }

/* ── Buttons ──────────────────────────────────────────── */
.bdrc-redesign .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .95rem;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-normal);
    user-select: none;
    gap: .5rem;
    font-family: var(--font-primary);
    line-height: 1.2;
    min-height: 48px;
}
.bdrc-redesign .btn-primary {
    background-color: var(--primary);
    color: var(--white);
}
.bdrc-redesign .btn-primary:hover:not(:disabled) {
    background-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,82,186,.25);
}
.bdrc-redesign .btn-primary:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.bdrc-redesign .btn-outline {
    background-color: transparent;
    color: var(--gray-600);
    border-color: var(--gray-300);
}
.bdrc-redesign .btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: rgba(15,82,186,.04);
}
.bdrc-redesign .btn-full { flex: 1; min-width: 0; }
.bdrc-redesign .form-actions {
    display: flex;
    gap: 1rem;
    margin-top: .5rem;
}

/* ── Helper Info Side ─────────────────────────────────── */
.bdrc-redesign .form-info-side {
    border-left: 1px solid var(--gray-200);
    padding-left: 2rem;
}
.bdrc-redesign .helper-info-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.bdrc-redesign .helper-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--dark);
}
.bdrc-redesign .helper-desc {
    font-size: .9rem;
    color: var(--gray-600);
    margin: 0 0 1rem;
    line-height: 1.55;
}
.bdrc-redesign .helper-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin: 0 0 1.5rem;
    padding: 0;
}
.bdrc-redesign .helper-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .85rem;
    color: var(--gray-600);
    line-height: 1.5;
}
.bdrc-redesign .helper-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--success);
    font-weight: 800;
    font-size: .95rem;
}

/* ── Spinner inside buttons ───────────────────────────── */
.bdrc-redesign .bdrc-spin { animation: bdrc-spin 1s linear infinite; }
@keyframes bdrc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Alert ────────────────────────────────────────────── */
.bdrc-redesign .bdrc-message {
    padding: .85rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    border: 1px solid;
    margin: 0 0 1.1rem;
    font-weight: 500;
}
.bdrc-redesign .bdrc-msg-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.bdrc-redesign .bdrc-msg-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ─────────────────────────────────────────────────────────
   RESULT POPUP MODAL  (themed to match the search form)
   ───────────────────────────────────────────────────────── */
.bdrc-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(10, 20, 50, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: bdrc-fadein .25s ease;
    font-family: 'Outfit', 'Hind Siliguri', sans-serif;

    /* Re-declare the result-card tokens here (the injected result HTML is no
       longer inside .bdrc-wrapper) AND retheme them to the search-form palette
       so the result page visually matches the form. */
    --bdrc-primary:    #0F52BA;
    --bdrc-primary-dk: #2563EB;
    --bdrc-accent:     #3B82F6;
    --bdrc-success:    #10B981;
    --bdrc-success-bg: #065f46;
    --bdrc-danger:     #EF4444;
    --bdrc-danger-bg:  #991b1b;
    --bdrc-bg:         #F1F5F9;
    --bdrc-card:       #ffffff;
    --bdrc-border:     #E2E8F0;
    --bdrc-text:       #1E293B;
    --bdrc-muted:      #475569;
    --bdrc-radius:     12px;
    --bdrc-shadow:     0 10px 15px -3px rgba(15,82,186,.08), 0 4px 6px -2px rgba(0,0,0,.04);
}
@keyframes bdrc-fadein { from { opacity: 0; } to { opacity: 1; } }
.bdrc-modal-overlay.bdrc-modal-open { display: flex; }

.bdrc-modal-box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(10,20,50,.38);
    width: 100%;
    max-width: 860px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bdrc-modal-in .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bdrc-modal-in {
    from { opacity: 0; transform: scale(.93) translateY(18px); }
    to   { opacity: 1; transform: scale(1)  translateY(0);     }
}

/* Floating close button — sits over the result card's own header */
.bdrc-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background: rgba(15,23,42,.28);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s, transform .18s;
    line-height: 1;
}
.bdrc-modal-close svg { display: block; stroke: #fff; flex-shrink: 0; }
.bdrc-modal-close:hover { background: rgba(15,23,42,.5); transform: scale(1.05); }

.bdrc-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    background: #F8FAFC;
    padding: 0;
    font-family: 'Outfit', 'Hind Siliguri', sans-serif;
}
/* The result card sits flush; modal supplies the frame. */
.bdrc-modal-body > .bdrc-card {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ── Result page → match search-form look ──────────────────
   The result markup uses the same tokens above; these tweaks
   align fonts, header gradient and the result table with the
   sapphire/Outfit search-form aesthetic. */
.bdrc-modal-body .bdrc-card-header {
    background: #0F52BA !important;
    padding: 1.6rem 1.5rem 1.4rem !important;
}
.bdrc-modal-body .bdrc-org {
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    letter-spacing: .08em;
    opacity: .85;
}
.bdrc-modal-body .bdrc-exam-meta {
    font-family: 'Outfit', 'Hind Siliguri', sans-serif;
    font-weight: 700;
    opacity: .96;
}
.bdrc-modal-body .bdrc-section-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--bdrc-text);
}
.bdrc-modal-body .bdrc-result-actions {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.bdrc-modal-body .bdrc-btn {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    border-radius: 12px;
    padding: .7rem 1.3rem;
    min-height: 44px;
    border: 2px solid transparent;
    transition: all .2s ease;
}
.bdrc-modal-body .bdrc-btn-primary { background: #0F52BA; color: #fff; }
.bdrc-modal-body .bdrc-btn-primary:hover { background: #2563EB; transform: translateY(-1px); }
.bdrc-modal-body .bdrc-btn-secondary { background: #fff; color: #0F52BA; border-color: #CBD5E1; }
.bdrc-modal-body .bdrc-btn-secondary:hover { border-color: #0F52BA; background: rgba(15,82,186,.04); }
/* Result table headers in sapphire to match */
.bdrc-modal-body .bdrc-html-result table thead th,
.bdrc-modal-body .bdrc-html-result table tr:first-child td,
.bdrc-modal-body .bdrc-html-result table tr:first-child th {
    background: #0F52BA !important;
}
.bdrc-modal-body .bdrc-html-result table {
    font-family: 'Outfit', 'Hind Siliguri', sans-serif !important;
}

/* ── Full result-card alignment with the search-form aesthetic ──
   Tokens are already sapphire (set on .bdrc-modal-overlay). These rules
   refine spacing, typography and component chrome so the result page
   reads as part of the same design system as the form. */
.bdrc-modal-body .bdrc-card-body { background: #fff; padding: 1.5rem; }

/* Student info grid → clean tiled cells like the form */
.bdrc-modal-body .bdrc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
    margin: 0 0 1.1rem;
}
.bdrc-modal-body .bdrc-info-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: .6rem .8rem;
}
.bdrc-modal-body .bdrc-info-key {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #64748B; margin-bottom: .15rem;
}
.bdrc-modal-body .bdrc-info-val { font-size: .92rem; font-weight: 600; color: #1E293B; }

/* GPA + status row */
.bdrc-modal-body .bdrc-result-row { margin: 0 0 1.1rem; }
.bdrc-modal-body .bdrc-result-row-inner {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    background: rgba(15,82,186,.05);
    border: 1px solid #E2E8F0; border-radius: 12px; padding: .9rem 1.2rem;
}
.bdrc-modal-body .bdrc-gpa-num { color: #0F52BA; font-weight: 800; }
.bdrc-modal-body .bdrc-status-pill {
    border-radius: 99px; font-weight: 700; font-family: 'Outfit', sans-serif;
    letter-spacing: .03em; padding: .35rem 1rem;
}
.bdrc-modal-body .bdrc-status-passed { background: #ECFDF5; color: #065f46; }
.bdrc-modal-body .bdrc-status-failed { background: #FEF2F2; color: #991b1b; }

/* Section titles */
.bdrc-modal-body .bdrc-section-title {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem;
    color: #1E293B; margin-bottom: .7rem;
}

/* Grades + group tables */
.bdrc-modal-body .bdrc-grades-table-wrap {
    border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden;
}
.bdrc-modal-body .bdrc-grades-table { font-family: 'Outfit', 'Hind Siliguri', sans-serif; }
.bdrc-modal-body .bdrc-grades-table thead th {
    background: #0F52BA !important; color: #fff !important;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.bdrc-modal-body .bdrc-grade-badge {
    border-radius: 8px; font-weight: 700; min-width: 30px; display: inline-block; text-align: center;
}

/* School info card (institution) */
.bdrc-modal-body .bdrc-school-card {
    background: #F8FAFC; border: 1px solid #E2E8F0; border-left: 4px solid #0F52BA;
    border-radius: 12px; margin: 0 0 1.1rem;
}
.bdrc-modal-body .bdrc-eiin-badge { background: #0F52BA; border-radius: 99px; }

/* Stat cards (students overview) */
.bdrc-modal-body .bdrc-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem;
}
.bdrc-modal-body .bdrc-stat-card {
    border: 1px solid #E2E8F0; border-radius: 12px; background: #F8FAFC;
}
.bdrc-modal-body .bdrc-stat-val { color: #0F52BA; font-weight: 800; font-family: 'Outfit', sans-serif; }

/* ── COMPACT individual marksheet (official layout, sapphire theme) ──
   Scoped to .bdrc-individual-card (NOT .bdrc-modal-body) so the same
   styles also apply when the card is rendered off-screen for PDF export. */
.bdrc-individual-card {
    font-family: 'Outfit', 'Hind Siliguri', sans-serif;
    color: #1E293B;
    background: #fff;
}

/* Government header band */
.bdrc-individual-card .bdrc-indv-gov-header {
    background: #0F52BA;
    color: #fff;
    text-align: center;
    padding: 1.1rem 1rem 1rem;
}
.bdrc-individual-card .bdrc-gov-1 { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; line-height: 1.25; }
.bdrc-individual-card .bdrc-gov-2 { font-size: .82rem; font-weight: 600; opacity: .95; margin-top: 2px; line-height: 1.3; }
.bdrc-individual-card .bdrc-gov-3 { font-size: .72rem; font-weight: 500; opacity: .85; margin-top: 3px; letter-spacing: .02em; }

.bdrc-individual-card .bdrc-card-body { background: #fff; padding: 1.4rem 1.6rem; }

.bdrc-individual-card .bdrc-indv-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F52BA;
    text-align: center;
    padding: 0 0 1.1rem;
    position: relative;
    letter-spacing: -.01em;
}
.bdrc-individual-card .bdrc-indv-heading::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: #0F52BA;
    border-radius: 3px;
    margin: .65rem auto 0;
}

/* Horizontal scroll wrapper — keeps the 4-column layout on small screens */
.bdrc-individual-card .bdrc-indv-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.4rem;
    border-radius: 12px;
}
.bdrc-individual-card .bdrc-indv-scroll::-webkit-scrollbar { height: 7px; }
.bdrc-individual-card .bdrc-indv-scroll::-webkit-scrollbar-track { background: #F1F5F9; border-radius: 99px; }
.bdrc-individual-card .bdrc-indv-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }
.bdrc-individual-card .bdrc-indv-scroll:last-of-type { margin-bottom: 0; }

/* Info table — 4-column label/value */
.bdrc-individual-card .bdrc-indv-info {
    width: 100%;
    min-width: 540px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .86rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 4px rgba(15,82,186,.05);
    margin-bottom: 0;
}
.bdrc-individual-card .bdrc-indv-info td {
    padding: .7rem .9rem;
    vertical-align: middle;
    border-bottom: 1px solid #EEF2F7;
}
.bdrc-individual-card .bdrc-indv-info tr:last-child td { border-bottom: none; }
.bdrc-individual-card .bdrc-iv-lbl {
    background: #F1F5F9;
    font-weight: 700;
    color: #475569;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    width: 16%;
    white-space: nowrap;
}
.bdrc-individual-card .bdrc-iv-val {
    background: #fff;
    font-weight: 600;
    color: #1E293B;
    width: 34%;
}
.bdrc-individual-card .bdrc-iv-result { font-weight: 800; }
.bdrc-individual-card .bdrc-iv-result.is-passed { color: #047857; }
.bdrc-individual-card .bdrc-iv-result.is-failed { color: #B91C1C; }
.bdrc-individual-card .bdrc-iv-gpa { font-weight: 800; font-size: 1rem; color: #0F52BA; }

/* Grade sheet */
.bdrc-individual-card .bdrc-indv-grades {
    width: 100%;
    min-width: 380px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 4px rgba(15,82,186,.05);
    font-size: .86rem;
}
.bdrc-individual-card .bdrc-indv-grades th {
    background: #0F52BA;
    font-weight: 700;
    padding: .8rem 1rem;
    text-align: left;
    color: #fff;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.bdrc-individual-card .bdrc-indv-grades td {
    padding: .65rem 1rem;
    border-bottom: 1px solid #EEF2F7;
    color: #1E293B;
}
.bdrc-individual-card .bdrc-indv-grades tbody tr:last-child td { border-bottom: none; }
.bdrc-individual-card .bdrc-indv-grades .bdrc-r-even td { background: #F8FAFC; }
.bdrc-individual-card .bdrc-ig-code { font-weight: 600; color: #475569; }
.bdrc-individual-card .bdrc-ig-grade { text-align: center; }

/* Grade badges (match the official palette) */
.bdrc-individual-card .bdrc-grade-badge {
    display: inline-block;
    padding: .2rem .8rem;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    min-width: 40px;
    text-align: center;
    background: #E2E8F0;
    color: #475569;
}
.bdrc-individual-card .bdrc-grade-aplus  { background: #C6F6D5; color: #22543D; }
.bdrc-individual-card .bdrc-grade-a      { background: #BEE3F8; color: #1A365D; }
.bdrc-individual-card .bdrc-grade-aminus { background: #E0E7FF; color: #3730A3; }
.bdrc-individual-card .bdrc-grade-b      { background: #FEF3C7; color: #92400E; }
.bdrc-individual-card .bdrc-grade-c      { background: #FED7AA; color: #9A3412; }
.bdrc-individual-card .bdrc-grade-d      { background: #FECACA; color: #991B1B; }
.bdrc-individual-card .bdrc-grade-f      { background: #FEE2E2; color: #B91C1C; }

.bdrc-individual-card .bdrc-result-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    padding: 1.3rem 0 0;
}

@media (max-width: 560px) {
    .bdrc-individual-card .bdrc-indv-gov-header { padding: .9rem .8rem; }
    .bdrc-individual-card .bdrc-gov-1 { font-size: .92rem; }
    .bdrc-individual-card .bdrc-gov-2 { font-size: .72rem; }
    .bdrc-individual-card .bdrc-gov-3 { font-size: .64rem; }
    .bdrc-individual-card .bdrc-card-body { padding: 1rem .85rem; }
    .bdrc-individual-card .bdrc-indv-heading { font-size: 1.05rem; }

    /* Keep the full 4-column layout — the wrapper scrolls horizontally */
    .bdrc-individual-card .bdrc-indv-info  { font-size: .82rem; }
    .bdrc-individual-card .bdrc-indv-grades { font-size: .82rem; }

    .bdrc-individual-card .bdrc-result-actions { flex-direction: column; }
    .bdrc-individual-card .bdrc-result-actions .bdrc-btn { width: 100%; }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 880px) {
    .bdrc-redesign .form-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .bdrc-redesign .form-info-side {
        border-left: none;
        border-top: 1px solid var(--gray-200);
        padding-left: 0;
        padding-top: 1.5rem;
    }
}
@media (max-width: 768px) {
    .bdrc-checker-wrapper { padding: 1rem .25rem 1.5rem; }
    .bdrc-redesign .checker-body { padding: 1.5rem 1.1rem; }
    .checker-tabs .tab-btn { padding: .85rem .5rem; font-size: .82rem; min-width: 80px; }
    .bdrc-redesign .form-row { flex-direction: column; gap: 1rem; }
    .bdrc-redesign .select-half { width: 100%; }
    .bdrc-redesign .floating-group { min-width: unset; }
    .bdrc-redesign .form-actions { flex-direction: column; gap: .75rem; }
    .bdrc-redesign .btn-full { width: 100%; }
    .bdrc-redesign .captcha-box { min-width: unset; width: 100%; height: 80px; }
    .bdrc-redesign .bdrc-captcha-img { max-height: 66px; }
}
@media (max-width: 480px) {
    .bdrc-redesign .checker-body { padding: 1.25rem .9rem; }
    .checker-tabs .tab-btn { min-width: 0; flex: 1; padding: .75rem .3rem; gap: .25rem; flex-direction: column; font-size: .72rem; }
}

/* ─────────────────────────────────────────────────────────
   TABBED VIEW: neutralise inner card chrome (single container)
   ───────────────────────────────────────────────────────── */
.checker-tab-panel .checker-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}
.checker-tab-panel .checker-card:hover { box-shadow: none !important; }
.checker-tab-panel .card-glow { display: none !important; }
.checker-tab-panel .checker-body { padding: 1.5rem 2.25rem 2.25rem !important; }
@media (max-width: 768px) {
    .checker-tab-panel .checker-body { padding: 1rem .9rem 1.25rem !important; }
}

/* ═════════════════════════════════════════════════════════
   MOBILE — keep the result modal inside the viewport
   (District result intentionally left to its original styling)
   ═════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .bdrc-modal-overlay { padding: 8px; }
    .bdrc-modal-box { max-height: 94vh; border-radius: 12px; }
    .bdrc-modal-body { padding: 0; }
    .bdrc-modal-close { top: 8px; right: 8px; width: 34px; height: 34px; }

    .bdrc-modal-body .bdrc-stats-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .45rem; }
}