/* =====================================================
   TRADEVEST EXAM SYSTEM
   CORE CSS
===================================================== */


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root{

    --tv-primary:#2563eb;
    --tv-primary-dark:#1d4ed8;

    --tv-secondary:#475569;
    --tv-secondary-dark:#334155;

    --tv-success:#16a34a;
    --tv-warning:#f59e0b;
    --tv-danger:#dc2626;

    --tv-text:#0f172a;
    --tv-text-light:#64748b;

    --tv-border:#e5e7eb;

    --tv-bg:#f4f7fb;
    --tv-card:#ffffff;

    --tv-radius:16px;

    --tv-shadow-sm:
        0 4px 14px rgba(15,23,42,.04);

    --tv-shadow-md:
        0 8px 24px rgba(15,23,42,.06);

    --tv-shadow-lg:
        0 12px 32px rgba(15,23,42,.08);
}


/* =====================================================
   RESET
===================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;
}


/* =====================================================
   BODY
===================================================== */

body{

    font-family:
        Inter,
        system-ui,
        -apple-system,
        sans-serif;

    background:var(--tv-bg);

    color:var(--tv-text);

    overflow-x:hidden;

    line-height:1.5;

    -webkit-font-smoothing:antialiased;
}


/* =====================================================
   GLOBAL LINKS
===================================================== */

a{

    color:inherit;

    text-decoration:none;
}


/* =====================================================
   GLOBAL IMAGES
===================================================== */

img{

    max-width:100%;

    height:auto;
}


/* =====================================================
   GLOBAL BUTTONS
===================================================== */

button{

    font-family:inherit;

    border:none;

    border-radius:10px;

    padding:10px 16px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

button:hover{

    transform:translateY(-1px);
}

button:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;
}


/* =====================================================
   ACCESSIBILITY
===================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{

    outline:2px solid var(--tv-primary);

    outline-offset:2px;
}


/* =====================================================
   HEADER
===================================================== */

.tv-header{

    background:
        linear-gradient(
            135deg,
            #0b3d91,
            #1e40af
        );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:16px 24px;

    box-shadow:
        0 4px 16px rgba(0,0,0,.08);
}

.tv-header-left{

    display:flex;

    align-items:center;

    gap:12px;
}

.tv-logo{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:#0b3d91;

    padding:6px 10px;

    border-radius:8px;

    font-size:13px;

    font-weight:700;

    line-height:1;
}

.tv-title{

    font-size:15px;

    font-weight:700;
}

.tv-sub{

    margin-top:2px;

    font-size:11px;

    opacity:.82;
}

.tv-header-right{

    display:flex;

    align-items:center;

    gap:14px;
}

.tv-user{

    font-size:13px;

    font-weight:600;
}

.tv-timer{

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;
}


/* =====================================================
   END BUTTON
===================================================== */

.tv-end{

    background:var(--tv-danger);

    color:#fff;
}

.tv-end:hover{

    background:#b91c1c;
}


/* =====================================================
   INFO BAR
===================================================== */

.tv-info{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    background:#fff;

    padding:12px 20px;

    border-bottom:
        1px solid var(--tv-border);
}


/* =====================================================
   SUMMARY
===================================================== */

.tv-summary,
.tv-marking{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    font-size:13px;
}

.tv-summary span b{

    color:#111827;

    font-weight:700;
}

.tv-positive,
.tv-negative{

    padding:4px 8px;

    border-radius:6px;

    font-size:12px;

    font-weight:700;
}

.tv-positive{

    background:#dcfce7;

    color:#166534;
}

.tv-negative{

    background:#fee2e2;

    color:#991b1b;
}

/* =====================================================
   WARNING MODAL
===================================================== */

.tv-warning-overlay{

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.6);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

    padding:18px;
}

.tv-warning-box{

    width:320px;

    max-width:100%;

    background:#fff;

    border-radius:16px;

    padding:22px 24px;

    text-align:center;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}

.tv-warning-box h3{

    margin-bottom:8px;

    color:#dc2626;

    font-size:16px;

    font-weight:700;
}

.tv-warning-box p{

    margin-bottom:16px;

    color:#374151;

    font-size:14px;

    line-height:1.7;
}

.tv-warning-btn{

    background:var(--tv-primary);

    color:#fff;
}


/* =====================================================
   LOADING
===================================================== */

.tv-loading-text{

    text-align:center;
}


/* =====================================================
   SUBMIT ACTIONS
===================================================== */

.tv-submit-actions{

    margin-top:15px;

    display:flex;

    gap:10px;

    justify-content:center;
}


/* =====================================================
   GLOBAL MOBILE
===================================================== */

@media(max-width:768px){

    .tv-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .tv-header-right{

        width:100%;

        justify-content:space-between;
    }
}