/* ==========================================================================
   Attendance System v2.6.1 — Unified Theme (blue + bubbles)
   Loaded AFTER style.css. Change the colors below to restyle the whole system
   (for example, to match the exact colors of acadtrace.com).
   ========================================================================== */
:root{
    /* Brand colors */
    --theme-navy:#0a2a6b;          /* sidebar / headings            */
    --theme-navy-2:#123c8f;        /* primary buttons               */
    --theme-navy-3:#061d4d;        /* pressed / darkest             */
    --theme-gold:#f2c230;          /* accent / clicked buttons      */
    --theme-gold-2:#d9a400;
    --theme-bg:#eef2f8;            /* page background               */
    --theme-bg-2:#e2e9f4;
    --theme-panel:#ffffff;
    --theme-line:#d8e0ec;
    --theme-text:#1a2540;
    --theme-muted:#5f6b85;

    /* Type scale — every page uses the same sizes */
    --fs-xs:12px;   /* table headers, badges, small notes */
    --fs-sm:13px;   /* labels, helper text                */
    --fs-base:15px; /* body text, inputs, table cells     */
    --fs-md:17px;   /* card sub-headings                  */
    --fs-lg:20px;   /* card titles (h2)                   */
    --fs-xl:26px;   /* page title (h1)                    */
    --fs-stat:30px; /* dashboard numbers                  */

    --font-main:"Century Gothic",CenturyGothic,"URW Gothic","URW Gothic L",AppleGothic,Arial,sans-serif;

    /* map onto the variables already used by style.css */
    --bg:var(--theme-bg);--panel:var(--theme-panel);--text:var(--theme-text);--muted:var(--theme-muted);
    --line:var(--theme-line);--primary:var(--theme-navy-2);--primary2:var(--theme-navy);--accent:var(--theme-gold);
    --sidebar:var(--theme-navy);
}

/* ---------- Font: Century Gothic, falling back to Arial ---------- */
html,body,button,input,select,textarea,table,th,td,.btn,h1,h2,h3,h4,h5,h6{font-family:var(--font-main)!important}
body{font-size:var(--fs-base);line-height:1.45;color:var(--theme-text);-webkit-font-smoothing:antialiased}

/* ---------- Page background: blue with bubbles ---------- */
:root{
    --bg-blue-1:#0b3fa8;   /* top-left   */
    --bg-blue-2:#1565d8;   /* middle     */
    --bg-blue-3:#0a2f86;   /* bottom     */
}
html{background:var(--bg-blue-3)}
body{
    background:linear-gradient(135deg,var(--bg-blue-1) 0%,var(--bg-blue-2) 48%,var(--bg-blue-3) 100%) fixed!important;
    min-height:100vh;position:relative;
}
/* Two fixed bubble layers behind everything (pure CSS, no images) */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
    background:
        radial-gradient(circle closest-side,rgba(255,255,255,0.10) 0,rgba(255,255,255,0.15) 62%,rgba(255,255,255,0.42) 90%,rgba(255,255,255,0.17) 97%,rgba(255,255,255,0) 100%) 6% 14%/170px 170px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.09) 0,rgba(255,255,255,0.13) 62%,rgba(255,255,255,0.36) 90%,rgba(255,255,255,0.14) 97%,rgba(255,255,255,0) 100%) 90% 8%/240px 240px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.07) 0,rgba(255,255,255,0.10) 62%,rgba(255,255,255,0.30) 90%,rgba(255,255,255,0.12) 97%,rgba(255,255,255,0) 100%) 74% 64%/320px 320px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.10) 0,rgba(255,255,255,0.13) 62%,rgba(255,255,255,0.38) 90%,rgba(255,255,255,0.15) 97%,rgba(255,255,255,0) 100%) 20% 84%/210px 210px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.11) 0,rgba(255,255,255,0.16) 62%,rgba(255,255,255,0.45) 90%,rgba(255,255,255,0.18) 97%,rgba(255,255,255,0) 100%) 48% 30%/90px 90px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.10) 0,rgba(255,255,255,0.15) 62%,rgba(255,255,255,0.42) 90%,rgba(255,255,255,0.17) 97%,rgba(255,255,255,0) 100%) 96% 92%/130px 130px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.11) 0,rgba(255,255,255,0.16) 62%,rgba(255,255,255,0.45) 90%,rgba(255,255,255,0.18) 97%,rgba(255,255,255,0) 100%) 38% 97%/70px 70px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.12) 0,rgba(255,255,255,0.17) 62%,rgba(255,255,255,0.50) 90%,rgba(255,255,255,0.20) 97%,rgba(255,255,255,0) 100%) 62% 4%/60px 60px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.11) 0,rgba(255,255,255,0.16) 62%,rgba(255,255,255,0.45) 90%,rgba(255,255,255,0.18) 97%,rgba(255,255,255,0) 100%) 30% 44%/46px 46px no-repeat;
    animation:bubbleDrift 26s ease-in-out infinite alternate;
}
body::after{
    background:
        radial-gradient(circle closest-side,rgba(255,255,255,0.70) 0,rgba(255,255,255,0.24) 55%,rgba(255,255,255,0) 100%) 14% 40%/22px 22px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.60) 0,rgba(255,255,255,0.21) 55%,rgba(255,255,255,0) 100%) 56% 76%/30px 30px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.70) 0,rgba(255,255,255,0.24) 55%,rgba(255,255,255,0) 100%) 82% 34%/18px 18px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.70) 0,rgba(255,255,255,0.24) 55%,rgba(255,255,255,0) 100%) 33% 60%/14px 14px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.55) 0,rgba(255,255,255,0.19) 55%,rgba(255,255,255,0) 100%) 91% 56%/34px 34px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.60) 0,rgba(255,255,255,0.21) 55%,rgba(255,255,255,0) 100%) 4% 66%/26px 26px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.70) 0,rgba(255,255,255,0.24) 55%,rgba(255,255,255,0) 100%) 67% 20%/16px 16px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.60) 0,rgba(255,255,255,0.21) 55%,rgba(255,255,255,0) 100%) 45% 88%/20px 20px no-repeat,
        radial-gradient(circle closest-side,rgba(255,255,255,0.75) 0,rgba(255,255,255,0.26) 55%,rgba(255,255,255,0) 100%) 24% 22%/12px 12px no-repeat;
    animation:bubbleRise 34s linear infinite;
}
@keyframes bubbleDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-24px,-18px,0)}}
@keyframes bubbleRise{0%{transform:translate3d(0,40px,0);opacity:.9}50%{opacity:1}100%{transform:translate3d(0,-40px,0);opacity:.9}}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
.app-shell,.login-shell,.wrap{position:relative;z-index:1}
.main{background:transparent}

/* ---------- Sidebar: deep navy glass ---------- */
.sidebar{
    background:linear-gradient(180deg,rgba(6,29,77,.92) 0%,rgba(4,22,62,.95) 100%)!important;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-right:3px solid var(--theme-gold);box-shadow:6px 0 30px rgba(0,10,40,.35)!important;z-index:2;
}
.brand{border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px;padding-bottom:18px!important}
.brand strong{font-size:19px;letter-spacing:.02em}
.brand span{font-size:11px;letter-spacing:.06em}
.sidebar nav a{font-size:14px;font-weight:700;padding:11px 14px;border-left:4px solid transparent;transition:background .15s,border-color .15s,color .15s}
.sidebar nav a:hover{background:rgba(255,255,255,.10);border-left-color:rgba(242,194,48,.6)}
.sidebar nav a.active{background:rgba(255,255,255,.16)!important;border-left-color:var(--theme-gold);color:#fff}
.sidebar nav a:active{background:var(--theme-gold)!important;color:var(--theme-navy-3)!important}
.sidebar-footer{font-size:13px}
.sidebar-footer a{color:var(--theme-gold)}

/* ---------- Top bar & headings (white text on the blue background) ---------- */
.topbar{padding:26px 32px 16px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:20px}
.topbar h1{font-size:var(--fs-xl)!important;font-weight:800;color:#ffffff!important;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,20,70,.35)}
.topbar p{font-size:var(--fs-base);color:#d6e4ff!important;margin:4px 0 0}
.today{font-size:var(--fs-sm);font-weight:800;color:var(--theme-navy);background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.6);padding:7px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(0,20,70,.2)}
h2,.section-title h2,.card h2{font-size:var(--fs-lg)!important;color:var(--theme-navy);font-weight:800}
h3,.card h3{font-size:var(--fs-md)!important;color:var(--theme-navy)}
.section-title p,.card p{font-size:var(--fs-base)}
.muted,small,.field small{font-size:var(--fs-sm)}
.footer,.login-footer{color:rgba(255,255,255,.88)!important;letter-spacing:.06em}

/* ---------- Cards: white panels floating on the blue ---------- */
.card{background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.7);border-top:3px solid var(--theme-navy-2);border-radius:16px;box-shadow:0 14px 34px rgba(0,18,64,.22),0 2px 6px rgba(0,18,64,.10)}
.card .card{border-top-width:1px;box-shadow:0 3px 10px rgba(10,42,107,.08);border-color:var(--theme-line)}
.stat .label{font-size:var(--fs-sm)!important;text-transform:uppercase;letter-spacing:.04em}
.stat .value{font-size:var(--fs-stat)!important;color:var(--theme-navy)}
.stat .sub{font-size:var(--fs-sm)!important}
.alert{box-shadow:0 8px 20px rgba(0,18,64,.18)}

/* ---------- Forms ---------- */
.field label{font-size:var(--fs-sm)!important;color:#33405e}
.field input,.field select,.field textarea,input[type=text],input[type=search],input[type=number],input[type=date],input[type=time],input[type=email],input[type=password],select,textarea{font-size:var(--fs-base)!important}
.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{outline:3px solid rgba(242,194,48,.35)!important;border-color:var(--theme-gold-2)!important}

/* ---------- Tables ---------- */
th,td{font-size:14px}
th{font-size:var(--fs-xs)!important;background:#eef3fb!important;color:#41507a!important}
tbody tr:hover td{background:#f7faff}
.badge{font-size:var(--fs-xs)!important}

/* ---------- Alerts / notes / footer ---------- */
.alert{font-size:var(--fs-base)}
.note{font-size:var(--fs-sm);border-left-color:var(--theme-gold)!important;background:#fffbea!important;color:#4a4320!important}
.footer{font-size:var(--fs-xs)!important;color:rgba(255,255,255,.85)!important}

/* ==========================================================================
   Buttons — consistent size, hover color, and a clear color change on CLICK
   (gold while pressed, and for a moment after the click via assets/theme.js)
   ========================================================================== */
.btn,input[type=submit],input[type=button],.entry-tab,.history-filter,.history-type-button{
    font-size:14px!important;font-weight:700;border-radius:10px;cursor:pointer;
}
.btn,button,input[type=submit],input[type=button],.entry-tab,.history-filter,.history-type-button{
    transition:background-color .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,transform .08s ease;
}
.btn{padding:10px 16px;min-height:40px;line-height:1.2}
.btn-sm{padding:7px 12px!important;min-height:32px;font-size:12.5px!important}

.btn-primary{background:var(--theme-navy-2)!important;color:#fff!important;border:1px solid var(--theme-navy-2)}
.btn-primary:hover{background:var(--theme-navy)!important;border-color:var(--theme-navy)}
.btn-secondary{background:#e8eef8!important;color:var(--theme-navy)!important;border:1px solid #cdd8ea}
.btn-secondary:hover{background:#d6e1f3!important;border-color:#b7c6e0}
.btn-success{background:#1a8a52!important;color:#fff!important;border:1px solid #1a8a52}
.btn-success:hover{background:#146c40!important}
.btn-danger{background:#c62f22!important;color:#fff!important;border:1px solid #c62f22}
.btn-danger:hover{background:#9f2318!important}

/* Pressed (mouse down / tap) and just-clicked state: turns GOLD */
.btn:active,button:not(.link-button):not(.student-search-item):active,input[type=submit]:active,input[type=button]:active,.entry-tab:active,.history-filter:active,.history-type-button:active,
.btn.is-clicked,button.is-clicked:not(.link-button):not(.student-search-item),input.is-clicked,.entry-tab.is-clicked,.history-filter.is-clicked,.history-type-button.is-clicked{
    background:var(--theme-gold)!important;border-color:var(--theme-gold-2)!important;color:var(--theme-navy-3)!important;
    box-shadow:0 0 0 3px rgba(242,194,48,.35)!important;transform:translateY(1px);
}
.btn:focus-visible,button:focus-visible{outline:3px solid var(--theme-gold);outline-offset:2px}
.btn:disabled,button:disabled{opacity:.55;cursor:not-allowed;transform:none!important}

/* Search-result cards and text links: gentle highlight instead of gold fill */
.student-search-item:active,.student-search-item.is-clicked{background:#fff6d6!important;border-color:var(--theme-gold-2)!important}
.delete-post button:not(.link-button):not(.student-search-item):active,.delete-post button:not(.link-button):not(.student-search-item).is-clicked{background:transparent!important;box-shadow:none!important;color:#b42318!important}

/* Tabs */
.entry-tab{background:#eef3fb!important;color:var(--theme-navy)!important;border:1px solid #cdd8ea!important}
.entry-tab:hover{background:#dde7f6!important}
.entry-tab.active{background:var(--theme-navy-2)!important;color:#fff!important;border-color:var(--theme-navy-2)!important}

/* ---------- Login page ---------- */
.login-shell{background:transparent!important}
.login-card{border-top:4px solid var(--theme-gold);box-shadow:0 18px 40px rgba(10,42,107,.14)}
.login-brand-text h1{font-size:36px!important;color:var(--theme-navy)!important}
.login-brand-text .school-name{font-size:20px!important}
.login-brand-text .school-address{font-size:17px!important}

/* ---------- Mobile ---------- */
@media(max-width:780px){
    :root{--fs-xl:22px;--fs-lg:18px;--fs-stat:26px}
    .sidebar{border-right:0;border-bottom:3px solid var(--theme-gold)}
    .topbar{padding:18px 20px 12px}
    .login-brand-text h1{font-size:28px!important}
}
@media print{body{background:#fff!important}body::before,body::after{display:none}.topbar h1{color:#000!important;text-shadow:none}.card{border-top-width:1px;box-shadow:none}}