/* SSO Citymall Daily Operations v15: legible dark mode, screen-fit workspace, reconciliation. */
:root { --v15-navy:#10223a; --v15-blue:#3e78c8; --v15-surface:#f7f9fc; --v15-good:#167b52; --v15-warn:#a96500; --v15-danger:#b43d51; }
body { overflow-x:hidden; }
.content { width:100%; max-width:none; margin:0; padding:clamp(18px,2vw,32px); }
.sync-status { display:inline-flex; align-items:center; gap:6px; max-width:205px; padding:5px 8px; border:1px solid #4b6585; border-radius:999px; color:#dceaff; font-size:10px; font-weight:700; text-align:left; }
.sync-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#8fb2dc; box-shadow:0 0 0 3px rgba(143,178,220,.16); }
.sync-status[data-state="synced"]::before { background:#65d5a2; box-shadow:0 0 0 3px rgba(101,213,162,.16); }
.sync-status[data-state="syncing"]::before { background:#ffd31a; animation:v15pulse 1s infinite; }
.sync-status[data-state="paused"]::before,.sync-status[data-state="warning"]::before { background:#ffb956; }
@keyframes v15pulse { 50% { opacity:.35; transform:scale(.72); } }

.reconciliation-status { align-self:center; display:grid; gap:2px; min-width:170px; padding:10px 13px; border-radius:12px; background:#eaf3ff; border:1px solid #c9dcf7; color:#173d69; }
.reconciliation-status span { font-weight:800; }
.reconciliation-status small { color:#55718f; }
.reconciliation-controls { align-items:end; flex-wrap:wrap; }
.reconciliation-controls label { min-width:145px; margin:0; }
.reconciliation-controls label:nth-child(3) { min-width:185px; }
.reconciliation-controls button { margin-top:0; }
.reconciliation-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-top:17px; }
.reconciliation-list { display:grid; gap:5px; }
.reconciliation-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:39px; padding:9px 11px; border-radius:9px; background:#f4f7fb; color:#37516f; }
.reconciliation-list > div b { color:#172c44; }
.reconciliation-list .reconciliation-check.good { background:#e6f7ee; color:#176640; }
.reconciliation-list .reconciliation-check.good b { color:#126039; }
.reconciliation-list .reconciliation-check.attention { background:#fff1df; color:#985700; }
.reconciliation-list .reconciliation-check.attention b { color:#8a4e00; }
.reconciliation-list .reconciliation-check.source { background:#eef4fe; color:#416385; }
.reconciliation-history { margin-top:17px; }
.v15-audit-stamp { border:1px solid #d4e2f4; background:#eef5ff !important; color:#183f6c; }
.v15-audit-stamp small { color:#52759f !important; }

/* Keep wide tables usable at a glance without squeezing values into unreadable columns. */
.table-wrap { max-width:100%; }
@media (min-width:1200px) { .content > .page.active { min-height:calc(100vh - 110px); } .dashboard-split { grid-template-columns:1fr 1fr 1fr; } }

/* High-contrast dark workspace. These rules deliberately cover tables, forms, notices and dialogs. */
body.dark-mode { --bg:#08111f; --paper:#101d2e; --ink:#f4f8ff; --mute:#b7c6dc; --line:#29435f; background:#08111f; color:#f4f8ff; }
body.dark-mode .content { background:linear-gradient(180deg,#0a1422 0%,#0b1726 100%); }
body.dark-mode .panel, body.dark-mode .metric, body.dark-mode .court-day, body.dark-mode .table-wrap { background:#101e30; border-color:#2b4766; box-shadow:0 10px 28px rgba(0,0,0,.15); }
body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,body.dark-mode b,body.dark-mode strong { color:#f8fbff; }
body.dark-mode .title p,body.dark-mode .muted,body.dark-mode .empty,body.dark-mode small { color:#b5c7de; }
body.dark-mode table td { border-color:#273f5c; color:#e5eefb; }
body.dark-mode table th { background:#172a42; border-color:#324e6f; color:#c4d5ec; }
body.dark-mode input,body.dark-mode select,body.dark-mode textarea { background:#0a1728; border-color:#3a597c; color:#f5f9ff; }
body.dark-mode input::placeholder,body.dark-mode textarea::placeholder { color:#9db1cc; opacity:1; }
body.dark-mode .secondary { background:#243b59; color:#f1f6ff; border:1px solid #3c5d83; }
body.dark-mode .notice { background:#362c16; border:1px solid #76602a; color:#ffe8a7; }
body.dark-mode dialog { background:#122238; color:#f5f8ff; border:1px solid #315172; }
body.dark-mode .detail-grid div { background:#152842; color:#eef6ff; }
body.dark-mode .detail-grid small { color:#afc5e1; }
body.dark-mode .reconciliation-status { background:#152d4b; border-color:#345d8e; color:#dcecff; }
body.dark-mode .reconciliation-status small { color:#a9c7ec; }
body.dark-mode .reconciliation-list > div { background:#152942; color:#c9dbf0; border:1px solid #2f4b6b; }
body.dark-mode .reconciliation-list > div b { color:#f4f8ff; }
body.dark-mode .reconciliation-list .reconciliation-check.good { background:#123a2d; border-color:#27755a; color:#b9f3d9; }
body.dark-mode .reconciliation-list .reconciliation-check.good b { color:#d4ffe8; }
body.dark-mode .reconciliation-list .reconciliation-check.attention { background:#47351b; border-color:#896b2d; color:#ffe1a0; }
body.dark-mode .reconciliation-list .reconciliation-check.attention b { color:#fff1c8; }
body.dark-mode .reconciliation-list .reconciliation-check.source { background:#172f50; border-color:#365d8d; color:#c8ddf5; }
body.dark-mode .v15-audit-stamp { background:#142d4b !important; border-color:#3b6595; color:#e2f0ff; }
body.dark-mode .v15-audit-stamp small { color:#b8d5f4 !important; }
body.dark-mode .sync-status { border-color:#4a6c94; color:#e1edfd; background:#122239; }

@media (max-width:980px) {
  .sync-status { display:none; }
  .reconciliation-grid { grid-template-columns:1fr; }
  .reconciliation-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reconciliation-controls label,.reconciliation-controls label:nth-child(3) { min-width:0; }
}
@media (max-width:620px) {
  .content { padding:14px; }
  .reconciliation-controls { grid-template-columns:1fr; }
  .reconciliation-status { width:100%; }
  .reconciliation-list > div { font-size:12px; }
  .reconciliation-list > div b { text-align:right; }
}