/* ================================================================
   KANOON MITRA SOLUTIONS — LABOUR LAW COMPLIANCE PORTAL — CONTRACTOR AUDIT TOOL
   Motion / polish overlay — Option A (visual harmonization).

   This tool's colours and fonts already match the shared portal theme
   exactly (it was clearly the original template theme.css was built
   from), so there was nothing to "re-skin" there. What this file adds
   is motion: entrance animations, smooth accordion expand/collapse,
   button and toggle micro-interactions, and a shimmer on the progress
   bar — layered on top of the tool's existing CSS, with ZERO changes
   to its HTML or JavaScript. Every rule here either overrides a purely
   visual property or adds a new one; nothing here can break the tool's
   actual audit logic.

   Loaded AFTER the tool's own <style> block, so plain-specificity
   rules here win by cascade order without needing !important, except
   where explicitly noted (overriding a `display: none` that can't
   otherwise be animated).
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {

    @keyframes ca-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ca-fade-scale { from { opacity: 0; transform: scale(.98) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes ca-shimmer-once { 0% { transform: translateX(-140%) rotate(20deg); } 60%, 100% { transform: translateX(140%) rotate(20deg); } }
    @keyframes ca-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
    @keyframes ca-progress-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

    /* ---------- Entrances ---------- */
    #main-app { animation: ca-fade-up .5s cubic-bezier(.2,.8,.2,1) both; }
    .topbar { animation: ca-fade-up .4s cubic-bezier(.2,.8,.2,1) both; }
    #report-panel { animation: ca-fade-scale .45s cubic-bezier(.2,.8,.2,1) both; }

    .section-card { animation: ca-fade-up .4s cubic-bezier(.2,.8,.2,1) both; }
    .section-card:nth-of-type(1) { animation-delay: .02s; }
    .section-card:nth-of-type(2) { animation-delay: .05s; }
    .section-card:nth-of-type(3) { animation-delay: .08s; }
    .section-card:nth-of-type(4) { animation-delay: .11s; }
    .section-card:nth-of-type(5) { animation-delay: .14s; }
    .section-card:nth-of-type(6) { animation-delay: .17s; }
    .section-card:nth-of-type(7) { animation-delay: .20s; }
    .section-card:nth-of-type(8) { animation-delay: .23s; }
    .section-card:nth-of-type(9) { animation-delay: .26s; }
    .section-card:nth-of-type(n+10) { animation-delay: .29s; }

    /* One-shot light sweep across the topbar logo, matching the same
       treatment the portal's own topbar and login page use. */
    .topbar-logo { position: relative; overflow: hidden; }
    .topbar-logo::after {
        content: ""; position: absolute; inset: -50%;
        background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
        animation: ca-shimmer-once 1.7s ease-out .5s 1 both;
    }
}

/* ---------- Smooth accordion (works with the existing JS unchanged —
   it already toggles the "open" class; we're just changing what that
   class visually means, from an instant display swap to an animated
   max-height/opacity transition). `display: block` must replace the
   original `display: none` because you cannot transition to/from
   `display: none` — max-height + overflow does the hiding instead. ---------- */
.section-body {
    display: block !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.section-body.open {
    max-height: 6000px;
    opacity: 1;
    transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .4s ease .05s;
}

/* ---------- Card & row interactivity ---------- */
.section-card {
    transition: box-shadow .25s ease, transform .25s ease;
}
.section-head { cursor: pointer; transition: background .2s ease; }
.section-head:hover { background: var(--gold-pale); }
.section-toggle { transition: color .2s ease; }

.q-row { transition: background .2s ease; }
.q-row:hover { background: #fbf8f2; }

/* ---------- Compliance Yes / No / N/A toggle ---------- */
.ct-btn { transition: background .18s ease, color .18s ease, transform .12s ease; }
.ct-btn:active { transform: scale(.94); }
.ct-btn.active { animation: ca-pop .32s cubic-bezier(.34,1.56,.64,1); }
.compliance-toggle { transition: box-shadow .2s ease; }
.compliance-toggle:hover { box-shadow: 0 2px 10px rgba(15,20,25,.08); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary, .btn-logout {
    transition: transform .15s ease, box-shadow .2s ease, background .18s ease, border-color .18s ease !important;
    position: relative; overflow: hidden;
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,20,25,.15); }
.btn-primary:active, .btn-secondary:active, .btn-logout:active { transform: translateY(0) scale(.97); }

/* A subtle one-way shine sweep on hover, not a looping animation —
   pairs with the lift above without feeling gimmicky on repeat use. */
.btn-primary::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .5s ease;
    pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* ---------- Progress bar ---------- */
.progress-track { position: relative; }
.progress-fill { position: relative; overflow: hidden; }
.progress-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 40%, transparent 60%);
    animation: ca-progress-shimmer 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .progress-fill::after { animation: none; } }

/* ---------- Toast ---------- */
.toast { transition: opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1) !important; }

/* ---------- Inputs ---------- */
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease; }