/**
 * core-ui.css — Techsillica
 *
 * CSS companion to core-ui.js.
 *
 * WHY THIS FILE EXISTS
 * ────────────────────
 * The server enforces  Content-Security-Policy: style-src 'self'
 * which blocks every form of inline styling:
 *   • element.style.xxx = value        (CSSOM inline style)
 *   • Object.assign(element.style, {}) (CSSOM inline style)
 *   • <el style="...">                 (HTML style attribute)
 *
 * The original core-ui.js set all visual rules via those three
 * mechanisms, causing showConfirmModal() → showModal() to trap focus
 * inside an invisible dialog, permanently freezing the page after
 * "Submit Exam" was clicked.
 *
 * Every rule in this file was previously an inline style in core-ui.js.
 * core-ui.js now uses only classList.add/remove and className to toggle
 * the rules defined here.
 *
 * LOAD ORDER (mandatory)
 * ──────────────────────
 * 1. variables.css   ← design tokens (--cui-brand, --card-bg, etc.)
 * 2. core-ui.css     ← this file
 * 3. js-bridge.css   ← other bridge classes
 * 4. [page].css      ← page-specific overrides
 *
 * FONT REQUIREMENT
 * ────────────────
 * font-src 'self' is enforced by CSP — Google Fonts is blocked.
 * Manrope must be self-hosted. Place the woff2 file at /fonts/Manrope.woff2
 * (or adjust the src path below to match your actual path).
 *
 * Affected pages: mains.html, dashboard.html, result.html, rpsc.html
 */
/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Wraps all transitions/animations. Users who set
   prefers-reduced-motion: reduce get instant state changes — no
   flashing, no spinning, important for vestibular disorders.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast-visible,
  .cui-btn,
  .cui-btn-yes,
  .cui-btn-no,
  .cui-lb-close {
    transition: none !important;
    animation:  none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════════════════════════════════════ */

/**
 * #core-toast-container
 * ─────────────────────
 * Previously: Object.assign(container.style, { position:'fixed', … })
 * in showToast() — 7 inline properties, all CSP-blocked.
 * Now: CSS ID rule applied the moment the element enters the DOM.
 */
#core-toast-container {
    position:       fixed;
    bottom:         24px;
    left:           50%;
    transform:      translateX(-50%);
    z-index:        var(--z-toast, 9999);
    display:        flex;
    flex-direction: column;
    gap:            10px;
    pointer-events: none;
    align-items:    center;
}

/**
 * .toast
 * ──────
 * Previously: Object.assign(toast.style, { opacity:'0', transform:… })
 * — 10 inline properties.
 * The initial state (opacity:0, translateY:20px) is the "hidden" state.
 * Adding .toast-visible triggers the CSS transition into the shown state.
 *
 * NOTE: js-bridge.css intentionally does NOT define .toast — this file
 * owns the toast system. js-bridge.css only adds .toast--visible etc.
 */
.toast {
    /* Colour — default/info; overridden by .toast-error etc. below */
    background:    var(--cui-dark-blue, #1e2f5e);
    color:         var(--color-white, #fff);

    /* Layout */
    padding:       10px 22px;
    border-radius: 2rem;
    font-size:     0.9rem;
    white-space:   nowrap;
    box-shadow:    var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
    pointer-events: auto;

    /* Animation initial (hidden) state */
    opacity:       0;
    transform:     translateY(20px);
    transition:    opacity 0.35s ease, transform 0.35s ease;
}

/**
 * Semantic colour variants
 * Previously: TOAST_COLORS object in JS with inline style assignments.
 * Now: class-based — core-ui.js does toast.className = 'toast toast-error'
 */
.toast-error   { background: var(--cui-toast-error,   #dc3545); }
.toast-warning { background: var(--cui-toast-warning, #d97706); }
.toast-success { background: var(--cui-toast-success, #28a745); }
.toast-info    { background: var(--cui-dark-blue,     #1e2f5e); }

/**
 * .toast-visible
 * ──────────────
 * Previously: toast.style.opacity = '1'; toast.style.transform = '…'
 * set in requestAnimationFrame() — 2 CSP-blocked assignments.
 * core-ui.js now: requestAnimationFrame(() => toast.classList.add('toast-visible'))
 */
.toast.toast-visible {
    opacity:   1;
    transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════
   CONFIRM MODAL
   ═══════════════════════════════════════════════════════════════════ */

/**
 * .cui-dialog  (the <dialog> element)
 * ─────────────────────────────────────
 * Previously: Object.assign(dlg.style, { border:'none', … })
 * — 6 inline properties, the exact 6 SHA hashes in the console errors.
 *
 * [open] state: browsers hide <dialog> via internal UA styles when
 * it is not open. We only override layout/visual — never display —
 * so the UA display:none on closed dialogs is preserved.
 */
.cui-dialog {
    border:        none;
    border-radius: var(--radius-xl, 1.5rem);
    padding:       0;
    max-width:     400px;
    width:         calc(100% - 2rem);
    box-shadow:    var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.25));
}

/**
 * Explicit [open] state — ensures correct display when dialog is shown
 * via showModal(). Without this, some browsers may leave it display:none.
 */
.cui-dialog[open] {
    display: flex;
    flex-direction: column;
}

/**
 * Native <dialog>::backdrop
 * The browser positions this automatically in the top layer.
 * No JS overlay div needed.
 */
.cui-dialog::backdrop {
    background:      rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/**
 * .cui-dialog-body  (the <article> inside the dialog)
 * ────────────────────────────────────────────────────
 * Previously: style="padding:1.75rem; text-align:center; …" inline.
 */
.cui-dialog-body {
    padding:       1.75rem;
    text-align:    center;
    font-family:   var(--font-manrope, 'Manrope', sans-serif);
    background:    var(--card-bg, #fff);
    border-radius: var(--radius-xl, 1.5rem); /* prevent background bleed */
}

/**
 * .cui-dialog-title  (the <h3>)
 * ─────────────────────────────
 * Previously: style="margin-top:0; color:var(--text-color,#1b1b23);"
 */
.cui-dialog-title {
    margin-top: 0;
    color:      var(--text-color, #1b1b23);
}

/**
 * .cui-dialog-msg  (the <p>)
 * ──────────────────────────
 * Previously: style="color:…; margin-bottom:1.5rem; font-size:0.95rem;"
 */
.cui-dialog-msg {
    color:         var(--muted-color, #767586);
    margin-bottom: 1.5rem;
    font-size:     0.95rem;
}

/**
 * .cui-dialog-actions  (the button-row <div>)
 * ────────────────────────────────────────────
 * Previously: style="display:flex; gap:1rem; …"
 */
.cui-dialog-actions {
    display:         flex;
    gap:             1rem;
    justify-content: center;
    flex-wrap:       wrap;
}

/**
 * .cui-btn  (shared base for both dialog buttons)
 * ─────────────────────────────────────────────────
 */
.cui-btn {
    padding:       0.7rem 1.5rem;
    border-radius: 2rem;
    font-weight:   600;
    font-family:   inherit;
    font-size:     1rem;
    cursor:        pointer;
    min-width:     7rem;
    line-height:   1.4;
    transition:    background var(--transition-fast, 0.15s ease),
                   box-shadow var(--transition-fast, 0.15s ease);
}

/**
 * .cui-btn-yes  (confirm button)
 * ─────────────────────────────────────────────────
 * Previously: style="background:#4648d4; border:none; color:#fff; …"
 */
.cui-btn-yes {
    border:     none;
    background: var(--cui-brand, #4648d4);
    color:      var(--color-white, #fff);
}
.cui-btn-yes:hover {
    background: var(--cui-brand-hover, #3739b8);
}
.cui-btn-yes:focus-visible {
    outline:        3px solid var(--cui-brand-focus, #4648d4);
    outline-offset: 3px;
    background:     var(--cui-brand-hover, #3739b8);
}

/**
 * .cui-btn-no  (cancel button)
 * ───────────────────────────────────────
 * Previously: style="border:2px solid #c7c4d7; background:transparent; …"
 */
.cui-btn-no {
    border:     2px solid var(--cui-border-muted, #c7c4d7);
    background: transparent;
    color:      var(--text-color, #1b1b23);
}
.cui-btn-no:hover {
    background: var(--hover-bg, #f4f4f8);
}
.cui-btn-no:focus-visible {
    outline:        3px solid var(--cui-border-muted, #c7c4d7);
    outline-offset: 3px;
    background:     var(--hover-bg, #f4f4f8);
}


/* ═══════════════════════════════════════════════════════════════════
   LIGHTBOX / ZOOM
   ═══════════════════════════════════════════════════════════════════ */

/**
 * .cui-lightbox  (the full-screen <dialog>)
 * ──────────────────────────────────────────
 * Previously: Object.assign(lb.style, { background:'rgba(0,0,0,0.85)', … })
 * — 9 inline properties.
 *
 * The lightbox dialog IS the backdrop (covers full viewport).
 * ::backdrop is hidden to avoid a double-overlay.
 */
.cui-lightbox {
    border:      none;
    margin:      0;
    padding:     2rem;
    box-sizing:  border-box;
    max-width:   100vw;
    max-height:  100vh;
    width:       100vw;
    height:      100vh;
    background:  rgba(0, 0, 0, 0.85);
}

/**
 * Only apply display:grid when the dialog is actually open.
 * Prevents conflict with UA's dialog:not([open]) { display:none }.
 */
.cui-lightbox[open] {
    display:     grid;
    place-items: center;
}

/* Lightbox covers the full viewport — suppress the UA backdrop */
.cui-lightbox::backdrop {
    display: none;
}

/**
 * .cui-lb-close  (the ✕ close button)
 * ─────────────────────────────────────
 * Previously: style="position:fixed; top:20px; right:20px; …"
 */
.cui-lb-close {
    position:      fixed;
    top:           20px;
    right:         20px;
    background:    none;
    border:        none;
    color:         var(--color-white, #fff);
    font-size:     2rem;
    cursor:        pointer;
    line-height:   1;
    padding:       0.25rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    transition:    background var(--transition-fast, 0.15s ease);
}
.cui-lb-close:hover {
    background: rgba(255, 255, 255, 0.15);
}
.cui-lb-close:focus-visible {
    outline:        2px solid var(--color-white, #fff);
    outline-offset: 2px;
    background:     rgba(255, 255, 255, 0.15);
}

/**
 * .cui-lb-content  (the scrollable content pane)
 * ─────────────────────────────────────────────────
 * Previously: style="max-width:90vw; max-height:85vh; overflow:auto; …"
 */
.cui-lb-content {
    max-width:     90vw;
    max-height:    85vh;
    overflow:      auto;
    background:    var(--card-bg, #fff);
    border-radius: var(--radius-md, 8px);
    padding:       1rem;
}