:root{--navy:#1E3A5F;--teal:#0EA5A4;--bg:#F5F7FA;--card:#fff;--text:#1F2937;--ok:#16A34A;--added:#2563EB;--out:#DC2626;--pend:#D97706}

*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}
.wrap{max-width:440px;margin:6vh auto;padding:0 16px}.card{background:var(--card);border-radius:12px;padding:24px;box-shadow:0 2px 10px #0001}
h1{color:var(--navy);margin-top:0}label{display:block;margin:12px 0 4px;font-weight:600}
input,select{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;font:inherit}
button{background:var(--navy);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;cursor:pointer;margin-top:16px}
button:hover{background:var(--teal)}.err{color:var(--out);font-size:.9rem}.msg{color:var(--ok)}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;color:#fff;font-size:.8rem}.pending{background:var(--pend)}
table{width:100%;border-collapse:collapse}td,th{padding:10px;text-align:left;border-bottom:1px solid #e2e8f0}
.top{background:var(--navy);color:#fff;padding:12px 20px;display:flex;justify-content:space-between}.top a,.top button{color:#fff;background:none;margin:0;padding:0}
.wide{max-width:960px}.roles label{display:inline-block;font-weight:400;margin-right:10px}.roles input{width:auto}
.top{align-items:center;gap:14px;flex-wrap:wrap}.top .links a{margin-right:14px;opacity:.9}.top .links a:hover{opacity:1;color:#7fe3e2}
.top .who{display:flex;gap:10px;align-items:center}.av{width:28px;height:28px;border-radius:50%;object-fit:cover}
.wrap.wide{max-width:1100px;margin:3vh auto}.scroll{overflow-x:auto}.tabs a{margin-right:14px;font-weight:600;color:var(--teal);text-decoration:none}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:12px 0}.inline>*{flex:1 1 130px}.inline button{flex:0 0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.stat{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 2px 10px #0001}.stat b{font-size:1.8rem;color:var(--navy);display:block}
.st-AVAILABLE,.st-COMPLETED,.st-PAID{background:var(--ok)}.st-ADDED,.st-APPROVED{background:var(--added)}.st-SOLD_OUT{background:var(--out)}.st-PENDING,.st-FULLY_REGISTERED{background:var(--pend)}.st-FULLY_REGISTERED{background:var(--ok)}
.low{color:var(--out);font-weight:700}td form{display:inline}td button,.small{margin:0;padding:5px 10px;font-size:.85rem}td input,td select{padding:6px;width:auto;max-width:110px}
.danger{background:var(--out)}pre{white-space:pre-wrap;margin:0;font-size:.8rem}
@media (max-width:700px){td,th{padding:6px;font-size:.85rem}}
.person{display:flex;gap:18px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid #e2e8f0}.big{width:150px;height:150px;object-fit:cover;border-radius:12px}
.noimg{width:150px;height:150px;border-radius:12px;background:#cbd5e1;display:flex;align-items:center;justify-content:center;color:#475569}
.info{flex:1 1 320px}.warn{background:#fef3c7;color:#92400e;padding:8px 12px;border-radius:8px}.note{background:#e0f2fe;color:#075985;padding:8px 12px;border-radius:8px}
textarea{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;font:inherit}.stack>*{display:block}.plist{max-height:140px;overflow:auto;border:1px solid #cbd5e1;border-radius:8px;padding:6px}
details{margin:12px 0}summary{cursor:pointer;font-weight:600;color:var(--teal)}.note-card{background:var(--card);border-left:4px solid var(--teal);border-radius:8px;padding:12px 16px;margin:12px 0;box-shadow:0 1px 6px #0001}.pre{white-space:pre-wrap}
.mk input{display:block;margin:4px 0;max-width:170px}.mk{margin-top:6px}
.bar{width:100%;height:12px;display:block}.barcell{width:30%}.kpi b{font-size:1.5rem}

/* ---- navigation: top bar + left drawer on phones/tablets, fixed left sidebar from 900px ---- */
.appbar{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;display:flex;align-items:center;gap:10px;padding:6px 10px;padding-top:calc(6px + env(safe-area-inset-top))}
.appbar .brand{flex:1;font-size:17px}.appbar-r{display:flex;align-items:center;gap:12px;font-size:13px}.appbar-r a{color:#fff}
.iconbtn{background:none;border:0;color:#fff;margin:0;padding:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer}
.iconbtn:hover,.iconbtn:focus-visible{background:#ffffff26}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30;opacity:0;visibility:hidden;transition:opacity .22s}.scrim.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(82vw,320px);background:var(--card);color:var(--text);z-index:40;display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:2px 0 12px #0003}
.drawer.open{transform:none;visibility:visible;transition-delay:0s}
.dh{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:6px 10px 6px 18px;padding-top:calc(6px + env(safe-area-inset-top))}
.mecard{display:flex;gap:12px;align-items:center;padding:14px 18px;background:var(--bg);color:var(--text);text-decoration:none;border-bottom:1px solid #8883}
.mecard small{display:block;opacity:.7;word-break:break-all}.av.big{width:42px;height:42px}
.dnav h5{margin:14px 18px 4px;font-size:11px;letter-spacing:.06em;color:#64748B;font-weight:500;text-transform:uppercase}
.dnav a{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 18px;color:var(--text);text-decoration:none;font-size:16px;border-bottom:1px solid #8882}
.dnav a:hover{background:#0EA5A41a}.dnav a.act{background:#0EA5A426;box-shadow:inset 4px 0 0 var(--teal);font-weight:600}
.drawer .foot{margin-top:auto;position:sticky;bottom:0;padding:14px 18px;border-top:1px solid #8883;background:var(--card)}
.drawer .foot button{width:100%;min-height:44px;margin:0;background:transparent;color:var(--out);border:1px solid var(--out)}
body.lock{overflow:hidden}
@media (min-width:900px) and (min-height:520px){
 .appbar #menuBtn,#closeBtn{display:none}.appbar .brand{display:none}.appbar{justify-content:flex-end;position:static}
 .drawer{transform:none;visibility:visible;width:250px;z-index:10;box-shadow:none;border-right:1px solid #8883}.dh{padding-left:18px}.scrim{display:none}
 body.has-nav{padding-left:250px}
}
@media (min-width:900px) and (min-height:520px){body:has(#drawer){padding-left:250px}}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}
/* short screens (phone held sideways): keep the menu as a panel and make the top bar compact */
@media (max-height:519px){.appbar{padding-top:2px;padding-bottom:2px}}

/* ---- small fixes seen on phones ---- */
.scroll{background:linear-gradient(to right,var(--card) 30%,transparent),linear-gradient(to left,var(--card) 30%,transparent) 100% 0,radial-gradient(farthest-side at 0 50%,#0003,transparent),radial-gradient(farthest-side at 100% 50%,#0003,transparent) 100% 0;background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
a.stat{display:block;color:var(--text);text-decoration:none}.stat{color:var(--text)}


/* Stage 2: lightweight accessible transitions and welcome page */
@media (prefers-reduced-motion: no-preference) { .card { animation: cms-rise .3s ease-out both; } button, a, .card { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } button:hover { transform: translateY(-1px); } @keyframes cms-rise { from {opacity:.75;transform:translateY(7px)} to {opacity:1;transform:translateY(0)} } }
.welcome-page { min-height:100vh; background:linear-gradient(125deg,#f0f5ff,#f9fbff 52%,#e9f5f1); color:#162c42; }
.welcome-top {display:flex;justify-content:space-between;align-items:center;padding:22px max(5vw,20px)}
.welcome-login {display:inline-block;background:#145a83;color:white!important;padding:12px 22px;border-radius:12px;text-decoration:none;font-weight:700}
.welcome-hero {max-width:1100px;margin:8vh auto 0;padding:24px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.welcome-hero h1 {font-size:clamp(2rem,5vw,4.2rem);line-height:1.13;margin:16px 0}.welcome-hero p {font-size:1.12rem;max-width:460px;margin-bottom:30px}
.welcome-kicker {letter-spacing:.1em;text-transform:uppercase;color:#186b7a;font-weight:700}
.welcome-art {min-height:280px;border-radius:32px;background:linear-gradient(140deg,#b8dfe5,#d4e1fa);display:flex;align-items:center;justify-content:center;gap:20px;box-shadow:0 24px 60px #294b6c25}
.welcome-art span {font-size:clamp(2rem,5vw,4.5rem)}.welcome-footer{text-align:center;padding:45px 15px;color:#476075}
@media(max-width:700px){.welcome-hero{grid-template-columns:1fr;margin-top:3vh}.welcome-art{min-height:160px}}

/* Compact admin actions and grouped navigation */
.bulk-actions{display:flex;justify-content:flex-start;margin-top:16px}
.bulk-actions form{display:inline-flex;width:auto;flex:none}
.bulk-actions button{width:auto;min-width:0;margin:0;padding:7px 14px}
.reverse-form{display:inline-flex;flex-wrap:nowrap;gap:5px;align-items:center;margin:4px 0}
.reverse-form input{width:135px;min-width:90px;max-width:135px}
.reverse-form button{width:auto;white-space:nowrap;flex:none;padding:5px 9px}
.nav-group summary{cursor:pointer;list-style:revert;padding:12px 18px;font-weight:600;color:var(--text);border-bottom:1px solid #8882}
.nav-group>a{padding-left:32px}

/* Explicit light/dark theme; persistent only in the visitor browser. */
:root[data-theme="light"]{color-scheme:light;--bg:#f5f7fa;--card:#fff;--text:#1f2937;--navy:#1e3a5f}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0b1423;--card:#17263b;--text:#e9f1fc;--navy:#254d78}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#243750;color:#f4f8ff;border-color:#54708d}
:root[data-theme="dark"] h1,:root[data-theme="dark"] .stat b{color:#9fd4fa}
:root[data-theme="dark"] .note{background:#193954;color:#d8f1ff}
.theme-toggle{margin:0;background:transparent;color:#fff;padding:5px 9px;border:1px solid #ffffff55;font-size:19px;line-height:1.2}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:16px;margin:24px 0}
.category-tile{background:var(--bg);border:1px solid #8ba4bb55;border-radius:16px;padding:14px;box-shadow:0 6px 20px #0001;transition:transform .2s,box-shadow .2s}
.category-tile:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0002}
.category-link{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text);min-height:110px}.category-link strong{font-size:1.15rem}.category-link small{opacity:.7}.category-symbol{font-size:30px;color:var(--teal)}
.category-tile form{display:flex;justify-content:flex-end}.category-tile button{margin:0}
/* Standalone public welcome page: no real CMS records or metrics. */
.welcome-page{background:linear-gradient(125deg,#f8fbff,#edf7ff 55%,#f1f9f7);color:#17324a;overflow-x:hidden}
.welcome-top{max-width:1200px;margin:auto}.welcome-brand{font-size:1.15rem;letter-spacing:.02em}.welcome-top-actions{display:flex;align-items:center;gap:12px}
.welcome-hero{max-width:1200px;margin:5vh auto 0;min-height:62vh;grid-template-columns:1.1fr 1fr}.welcome-hero h1{color:#17324a}.welcome-hero p{line-height:1.75;color:#4e657a}
.welcome-highlight{color:#168d9a}.welcome-kicker{display:inline-block;padding:8px 14px;border-radius:30px;background:#dff5f3;letter-spacing:.04em}
.welcome-art{position:relative;overflow:hidden;background:linear-gradient(135deg,#e4f4ff,#d3eaf5 65%,#d8f8ed);border:1px solid #fff;min-height:340px}
.welcome-orb{position:absolute;border-radius:50%;filter:blur(3px);background:#fff9;width:190px;height:190px;top:-60px;right:-40px}
.welcome-showcase{position:relative;display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:15px;width:85%;z-index:1}
.welcome-showcase>div{background:#ffffffdc;box-shadow:0 12px 30px #26567819;padding:25px 15px;border-radius:18px;text-align:center;font-weight:700;color:#23516a}
.welcome-showcase span{display:block;font-size:2rem;margin-bottom:10px}.welcome-showcase>div:nth-child(2){transform:translateY(26px)}
.welcome-features{max-width:1150px;margin:40px auto;padding:25px}.welcome-features h2{text-align:center;color:#17324a}.welcome-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:26px}.welcome-feature{padding:25px;background:#fff;border-radius:18px;box-shadow:0 8px 25px #234e7412}.welcome-feature h3{margin:12px 0;color:#17324a}.welcome-feature p{color:#52687a;line-height:1.6}
@media(prefers-reduced-motion:no-preference){.welcome-hero>div:first-child{animation:cms-rise .7s ease-out both}.welcome-art{animation:cms-rise .9s ease-out both}.welcome-showcase>div{animation:floatWelcome 5s ease-in-out infinite alternate}.welcome-showcase>div:nth-child(2){animation-delay:-2s}.welcome-feature{transition:transform .2s,box-shadow .2s}.welcome-feature:hover{transform:translateY(-5px);box-shadow:0 15px 32px #234e7420}@keyframes floatWelcome{to{translate:0 -10px}}}
@media(max-width:700px){.welcome-hero{grid-template-columns:1fr;margin-top:2vh}.welcome-art{min-height:260px}.welcome-showcase>div{padding:15px 8px}}

:root[data-theme="dark"] .welcome-page{background:linear-gradient(130deg,#101e30,#1a3149);color:#eaf4ff}
:root[data-theme="dark"] .welcome-hero h1,:root[data-theme="dark"] .welcome-features h2{color:#f1f7ff}
:root[data-theme="dark"] .welcome-hero p,:root[data-theme="dark"] .welcome-feature p{color:#c3d6e6}
:root[data-theme="dark"] .welcome-art{background:linear-gradient(135deg,#25415d,#1a5363)}
:root[data-theme="dark"] .welcome-feature,:root[data-theme="dark"] .welcome-showcase>div{background:#21384f;color:#eaf4ff}
:root[data-theme="dark"] .welcome-feature h3{color:#f1f7ff}

/* CMS public-page image backgrounds: single authoritative rule. */
html body.welcome-page,
html body.cms-login-background {
    background: linear-gradient(rgba(12, 27, 45, .18), rgba(12, 27, 45, .32)),
                url('/img/welcome/background.jpeg') center center / cover no-repeat fixed !important;
    min-height: 100vh;
}
/* Preserve the readable sign-in card. */
body.cms-login-background .card {
    background: rgba(255,255,255,.96);
    border-radius: 16px;
    box-shadow: 0 15px 45px rgba(0,0,0,.25);
}
/* Make welcome content readable against photographs. */
body.welcome-page .welcome-hero > div:first-child {
    background: rgba(255,255,255,.88);
    border-radius: 24px;
    padding: clamp(20px,3vw,36px);
    backdrop-filter: blur(5px);
}
body.welcome-page .welcome-top {
    background: rgba(255,255,255,.80);
    border-radius: 0 0 20px 20px;
    backdrop-filter: blur(5px);
}
body.welcome-page .welcome-features {
    background: rgba(255,255,255,.86);
    border-radius: 24px;
    backdrop-filter: blur(5px);
}
@media(max-width:700px) {
    html body.welcome-page,html body.cms-login-background {background-attachment:scroll !important;}
}