/* SSO Official Daily Internal Operations v24: friendly pickleball workspace. */
:root {
  --ink:#17233a;
  --bg:#f3f7fb;
  --paper:#ffffff;
  --line:#dbe4ef;
  --mute:#65738a;
  --yellow:#f8bf2f;
  --green:#177d6c;
  --teal:#0e9b88;
  --red:#c44a57;
}

body { background:linear-gradient(135deg,#eef5fb 0%,#f9fbfd 48%,#f3fbf8 100%); color:var(--ink); }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 88% 12%,rgba(248,191,47,.14),transparent 25%),radial-gradient(circle at 5% 92%,rgba(14,155,136,.08),transparent 22%); }

.auth { background:radial-gradient(circle at 82% 14%,rgba(248,191,47,.92) 0,rgba(248,191,47,.26) 12%,transparent 29%),radial-gradient(circle at 15% 84%,rgba(22,151,130,.28),transparent 28%),#101c31; }
.auth-card { width:min(470px,100%); border:1px solid rgba(255,255,255,.72); border-radius:28px; padding:38px; box-shadow:0 30px 86px rgba(2,10,24,.48); }
.auth-card::before { content:"SSO OFFICIAL • PICKLEBALL"; display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#e9f8f5; color:#0b7969; font-size:10px; font-weight:900; letter-spacing:.12em; }
.auth .brand-mark { margin-top:13px; background:var(--yellow); color:#17233a; box-shadow:0 7px 16px rgba(248,191,47,.28); }
.auth h1 { font-size:34px; letter-spacing:-.03em; color:#16223a; }
.auth input { min-height:48px; border-radius:12px; border-color:#d7e1ed; background:#fbfcfe; }
.auth .primary { min-height:48px; border-radius:12px; box-shadow:0 9px 19px rgba(248,191,47,.28); }
.auth-links { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.admin-only-note { color:#6d7b91; font-size:12px; font-weight:700; }

header { height:76px; padding:0 24px; background:linear-gradient(110deg,#10213a 0%,#162d4c 64%,#0e5f5c 130%); box-shadow:0 4px 18px rgba(16,33,58,.16); }
header h1 { font-size:22px; font-weight:800; letter-spacing:-.02em; }
header em { color:#ffd55d; }
.brand-mark { background:#ffd55d; color:#17233a; box-shadow:none; }
.account { min-width:190px; line-height:1.5; }
.account strong { color:#ffd55d; }
.login-state { color:#82e4d0; font-weight:800; }
.theme-toggle,.notification-button { border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 10px; background:rgba(255,255,255,.08); color:#fff; font-weight:800; }

.shell { grid-template-columns:254px minmax(0,1fr); min-height:calc(100vh - 76px); }
nav { padding:20px 13px; background:linear-gradient(180deg,#10213a,#0b1b31); border-right:1px solid rgba(220,231,243,.18); }
#navigation::before { content:"OPERATIONS MENU"; display:block; padding:0 12px 10px; color:#94afcd; font-size:10px; font-weight:900; letter-spacing:.15em; }
.nav { position:relative; min-height:43px; margin:3px 0; padding:11px 13px; border-radius:11px; color:#dbe7f5; font-size:13px; transition:background .18s ease,color .18s ease,transform .18s ease; }
.nav:hover { background:rgba(255,255,255,.1); color:#fff; transform:translateX(2px); }
.nav.active { color:#17233a; background:linear-gradient(90deg,#ffd75c,#f8bf2f); box-shadow:0 8px 18px rgba(4,15,34,.28); }
.nav.active::before { content:""; position:absolute; left:-13px; top:12px; width:4px; height:20px; border-radius:0 7px 7px 0; background:#6ee3ca; }
#navigation .nav-section { margin:18px 11px 6px; color:#89a6c7; }
#navigation .nav-cash::before { background:#6ee3ca; }

.content { width:100%; max-width:none; padding:30px clamp(20px,3vw,44px) 40px; }
.title { align-items:center; margin-bottom:24px; }
.title h2 { color:#172b49; font-size:31px; letter-spacing:-.035em; }
.title p { max-width:740px; color:#66758b; font-size:14px; }
.page-eyebrow,.eyebrow { color:#0b8374; }
.panel,.metric { border:1px solid #dde7f1; border-radius:18px; box-shadow:0 10px 26px rgba(25,51,86,.055); }
.panel { padding:20px; }
.metric { min-height:110px; padding:18px; background:linear-gradient(145deg,#fff,#f9fbfd); }
.metric small { color:#6c7c93; }
.metric strong { color:#172b49; letter-spacing:-.03em; }
.accent { border-top:4px solid #f8bf2f; }
.metrics { gap:17px; }
.notice { border:1px solid #f1dc95; border-radius:12px; background:#fff8dd; color:#634d0d; }
input,select,textarea { border-color:#cfdae8; border-radius:11px; background:#fbfdff; color:#17233a; transition:border-color .18s ease,box-shadow .18s ease; }
input:focus,select:focus,textarea:focus { outline:0; border-color:#0e9b88; box-shadow:0 0 0 3px rgba(14,155,136,.14); }
.primary { border-radius:11px; background:linear-gradient(135deg,#ffd75c,#f7b923); color:#1a293e; box-shadow:0 8px 16px rgba(248,191,47,.22); }
.primary:hover { filter:brightness(1.02); transform:translateY(-1px); }
.secondary { border-radius:11px; background:#edf3f8; color:#254260; }
.status { border-radius:999px; }
th { color:#70819a; background:#f6f9fc; }
td { border-color:#eaf0f6; }
tr:hover td { background:#fbfdff; }
.table-wrap { border-radius:14px; }
.activity { border-color:#e9eff5; }
.activity b { color:#1d3656; }

body.dark-mode { --bg:#101a2c; --paper:#182640; --ink:#e8f0f8; --line:#2c405f; --mute:#aabbd0; background:#101a2c; }
body.dark-mode .content { background:radial-gradient(circle at 88% 4%,rgba(248,191,47,.08),transparent 28%),#101a2c; }
body.dark-mode .title h2,body.dark-mode .metric strong,body.dark-mode .activity b { color:#edf5ff; }
body.dark-mode .panel,body.dark-mode .metric { background:linear-gradient(145deg,#182640,#142138); border-color:#2b405f; box-shadow:none; }
body.dark-mode input,body.dark-mode select,body.dark-mode textarea { background:#102039; border-color:#385474; color:#edf5ff; }
body.dark-mode th { background:#14243c; color:#b4c8e2; }
body.dark-mode td,body.dark-mode .activity { border-color:#293e5c; }
body.dark-mode tr:hover td { background:#1b2c48; }
body.dark-mode .secondary { background:#263c5b; color:#ecf5ff; }

@media (min-width:981px) {
  #appView .shell { height:calc(100vh - 76px); }
}
@media (max-width:980px) {
  .shell { grid-template-columns:1fr; min-height:calc(100vh - 76px); }
  #navigation { top:76px; }
  header { height:76px; }
  .content { padding:22px 18px 34px; }
}
@media (max-width:560px) {
  .auth-card { padding:28px 24px; border-radius:24px; }
  .auth h1 { font-size:29px; }
  header h1 { font-size:17px; }
  .title h2 { font-size:27px; }
  .account { min-width:0; }
  .theme-toggle { display:none; }
}