/* SSO Citymall Daily Operations v7: commercial workspace shell and controlled roles. */
:root { --sso-navy:#101b2e; --sso-deep:#0a1220; --sso-gold:#ffc928; --sso-gold-dark:#e5a800; --sso-surface:#f6f8fb; --sso-card:#ffffff; --sso-text:#17243a; --sso-muted:#718098; --sso-border:#e6ebf2; --sso-shadow:0 16px 40px rgba(21,34,54,.09); }
body { background:var(--sso-surface); color:var(--sso-text); transition:background .2s ease,color .2s ease; }
body.dark-mode { --sso-surface:#101725; --sso-card:#172234; --sso-text:#f5f8ff; --sso-muted:#aab7c9; --sso-border:#2a3950; --sso-shadow:0 16px 40px rgba(0,0,0,.25); --bg:#101725; --paper:#172234; --ink:#f5f8ff; --mute:#aab7c9; --line:#2a3950; background:var(--sso-surface); }
body.dark-mode input,body.dark-mode select,body.dark-mode textarea,body.dark-mode .time-slot,body.dark-mode .schedule-calendar,body.dark-mode .mini-date { background:#111c2d; color:#f5f8ff; border-color:#34445d; }
body.dark-mode .panel,body.dark-mode .metric,body.dark-mode .inventory-highlight,body.dark-mode .catalog-result { background:var(--sso-card); border-color:var(--sso-border); }
body.dark-mode .schedule-corner,body.dark-mode .schedule-date,body.dark-mode .schedule-time,body.dark-mode .spreadsheet-court-grid .schedule-time { background:#1c2a3d; color:#eef4ff; border-color:#34445d; }
body.dark-mode .spreadsheet-court-grid .time-slot.free { background:#143b2d; color:#c8f4dc; }
body.dark-mode .activity,body.dark-mode td,body.dark-mode th { border-color:#2a3950; }
body.dark-mode .secondary,body.dark-mode .file-picker { background:#26364e; color:#eef4ff; }
body.dark-mode .login-reminder,body.dark-mode .operations-banner { background:#153a3a; border-color:#27676b; color:#d6ffff; }

.sso-loader { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:radial-gradient(circle at 75% 16%,rgba(255,201,40,.24),transparent 23%),radial-gradient(circle at 20% 80%,rgba(41,174,162,.22),transparent 25%),linear-gradient(135deg,#09111e,#15233a); transition:opacity .45s ease,visibility .45s ease; }
.sso-loader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-card { width:min(310px,calc(100% - 40px)); padding:34px 26px; border:1px solid rgba(255,255,255,.16); border-radius:24px; background:rgba(15,27,45,.68); box-shadow:0 24px 70px rgba(0,0,0,.3); color:#fff; text-align:center; backdrop-filter:blur(15px); }
.loader-brand { display:inline-block; color:#fff; font:800 36px/ .78 Outfit,sans-serif; letter-spacing:-.06em; text-align:left; }
.loader-brand i { color:var(--sso-gold); font:800 15px/1.2 Outfit,sans-serif; letter-spacing:.14em; font-style:normal; }
.loader-line { height:5px; margin:27px 0 13px; overflow:hidden; border-radius:99px; background:#ffffff25; }
.loader-line::after { content:""; display:block; width:45%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffdb52,var(--sso-gold)); animation:sso-load 1.1s ease-in-out infinite; }
.loader-card p { margin:0; color:#dce5f2; font-size:13px; }
@keyframes sso-load { 0% { transform:translateX(-110%); } 100% { transform:translateX(240%); } }

#authView:not([hidden]) { position:relative; isolation:isolate; background:linear-gradient(135deg,#080f1a,#14243d); }
#authView:not([hidden])::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.75; background:radial-gradient(circle at 18% 18%,rgba(75,204,195,.28),transparent 23%),radial-gradient(circle at 88% 16%,rgba(255,201,40,.36),transparent 20%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.04) 30% 31%,transparent 31% 52%,rgba(255,255,255,.04) 52% 53%,transparent 53%); filter:blur(1px); }
#authView .auth-card { position:relative; width:min(455px,100%); border:1px solid rgba(255,255,255,.65); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:0 30px 85px rgba(0,0,0,.38); backdrop-filter:blur(14px); }
#authView .auth-card::after { content:""; position:absolute; inset:0 0 auto; height:5px; border-radius:28px 28px 0 0; background:linear-gradient(90deg,var(--sso-gold),#ffe481); }
.secure-chip { display:inline-block; margin-left:8px; padding:5px 8px; border-radius:99px; background:#edf7f5; color:#117669; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.admin-only-note { color:#607087; font-size:11px; font-weight:700; line-height:1.35; }
#authView input { border-color:#dce4ed; background:#fbfcfe; }
#authView input:focus { outline:2px solid rgba(255,201,40,.55); border-color:var(--sso-gold); }

header { min-height:74px; height:auto; padding:10px 24px; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(110deg,#0c1727,#172942); box-shadow:0 3px 12px rgba(17,27,43,.15); }
header h1 { font-size:21px; letter-spacing:.02em; }
.theme-toggle { border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:6px 9px; background:rgba(255,255,255,.08); color:#fff; font-size:11px; font-weight:800; }
.theme-toggle:hover { background:rgba(255,255,255,.17); }
.account { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:3px 8px; max-width:330px; }
.account strong { width:100%; }
.account .login-state { margin:0; }

.shell { grid-template-columns:234px minmax(0,1fr); }
nav { position:sticky; top:74px; height:calc(100vh - 74px); overflow:auto; padding:19px 12px; background:linear-gradient(180deg,#111d2f,#0c1523); border-right:1px solid #1e314b; }
.nav { position:relative; padding:12px 13px; color:#d5deea; transition:background .16s ease,color .16s ease,transform .16s ease; }
.nav:hover { transform:translateX(2px); background:rgba(255,255,255,.09); }
.nav.active { background:linear-gradient(90deg,#ffc928,#ffe171); color:#16233a; box-shadow:0 7px 15px rgba(255,201,40,.16); }
.content { max-width:1550px; padding:30px; }
.page-eyebrow { display:block; margin:0 0 5px; color:#a67300; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.title h2 { color:var(--sso-text); }
.metrics { gap:16px; }
.metric,.panel { border-color:var(--sso-border); background:var(--sso-card); box-shadow:var(--sso-shadow); }
.metric { position:relative; overflow:hidden; min-height:112px; padding:18px; }
.metric::after { content:""; position:absolute; width:72px; height:72px; right:-28px; bottom:-32px; border-radius:50%; background:radial-gradient(circle,#ffdc68 0 30%,transparent 31%); opacity:.45; }
.metric small { color:var(--sso-muted); }
.metric strong { color:var(--sso-text); font-size:25px; }
.metric.accent { border-top:4px solid var(--sso-gold); }
.panel { border-radius:16px; }
.panel h3 { color:var(--sso-text); }
.login-reminder { border-left:4px solid #20a490; box-shadow:0 8px 19px rgba(20,122,80,.08); }
.operations-banner { box-shadow:0 8px 19px rgba(41,103,201,.08); }
.table-wrap { border:1px solid var(--sso-border); border-radius:14px; box-shadow:none; }
th { background:#f8fafc; color:#607087; }
body.dark-mode th { background:#1d2a3d; }
tr:hover td { background:rgba(255,201,40,.06); }
.primary { background:linear-gradient(110deg,#ffc928,#ffd84f); box-shadow:0 6px 15px rgba(222,169,0,.2); }
.primary:hover { background:linear-gradient(110deg,#ffcf3e,#ffe171); }
.secondary { background:#edf2f7; color:#243954; }

@media(max-width:980px) { .shell { grid-template-columns:1fr; } nav { position:fixed; top:74px; height:auto; max-height:calc(100vh - 74px); } .content { padding:22px; } }
@media(max-width:700px) { header { padding:9px 13px; } .theme-toggle { font-size:10px; } .account { max-width:180px; } .account strong,.account #userRole,.account .notification-button { display:none; } .content { padding:16px; } .page-eyebrow { font-size:10px; } .metric { min-height:auto; } }
@media(max-width:430px) { #authView .auth-card { padding:25px 21px; } .secure-chip { display:block; width:max-content; margin:8px 0 0; } .auth-links { display:flex; flex-direction:column-reverse; align-items:flex-start; } }