/* Optional palette layer. UI_THEME=original restores the untouched base styles. */
:root {
  --blue:#296EF9;
  --blue-dark:#1F59CC;
  --blue-light:#A2B5CD;
  --navy:#0B1B3D;
  --text:#0B1B3D;
  --slate:#1C355E;
  --slate-light:#1C355E;
  --muted:#1C355E;
  --border:#A2B5CD;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface-secondary:#F0F4FA;
}
body { background:var(--bg); color:var(--text); }
.sidebar { background:var(--navy); }
.topbar {
  background-color:var(--slate);
  background-image:url('/topbar-pattern.png');
  background-repeat:repeat-x;
  background-position:left top;
  background-size:auto 100%;
}
.sidebar .brand .subtitle,.nav-group-label,.sidebar-footer { color:var(--border); }
.nav-item { color:#F0F4FA; }
.nav-item.active { background:var(--blue);border-left-color:var(--border);color:#FFFFFF; }
.nav-item:hover { background:#0B1B3D;color:#FFFFFF; }
.topbar .sub,.topbar .u-role,.topbar .switch-user-link { color:var(--border); }
.btn-primary,.btn-add-icon { background:var(--blue);border-color:var(--blue);color:#FFFFFF; }
th,.rte-editable table th { background:var(--slate);color:#FFFFFF;border-color:var(--border); }
th {
  background-image:url('/dashboard-card-pattern.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.rte-editable table th { background-image:none; }
.dashboard-page > .kpi-grid > .kpi-tile {
  background-color:var(--navy);
  background-image:url('/dashboard-card-pattern.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  color:#FFFFFF;
  display:grid;
  /* 164px → 131.2px total height: 20% smaller, keeping the 58px value row. */
  grid-template-rows:minmax(22.8px,1fr) minmax(58px,auto) minmax(22.8px,1fr);
  padding:12.8px 16px;
  min-width:0;
}
.dashboard-page > .kpi-grid > .kpi-tile .kpi-lbl { grid-row:1;align-self:start;margin:0;color:#FFFFFF; }
.dashboard-page > .kpi-grid > .kpi-tile .kpi-val { grid-row:2;min-width:0;color:#FFFFFF; }
.dashboard-page > .kpi-grid > .kpi-tile .kpi-sub { grid-row:3;align-self:end;margin:0;color:#FFFFFF; }
input,textarea { border-color:var(--border);color:var(--text); }
input:focus,textarea:focus,[contenteditable="true"]:focus {
  background:var(--surface-secondary);border-color:var(--blue);outline-color:var(--blue);
}
select,select option { background-color:var(--surface-secondary);color:var(--text);border-color:var(--border); }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B1B3D' stroke-width='2'/%3E%3C/svg%3E"); }
select.status-select { background-color:var(--surface-secondary);color:var(--text); }
.total-tile,.total-tile.alt { background:var(--surface-secondary);color:var(--text);border:1px solid var(--border); }
.total-tile .lbl { opacity:1;color:var(--slate); }
.review-card,.card { border-color:var(--border); }
.review-card .rc-row { border-bottom-color:var(--border); }
.group-header-row td,.group-subheader-row td,.note,.input-prefix {
  background:var(--surface-secondary);color:var(--text);
}
[data-box-drop],.drop-zone,.dropzone,.upload-drop-zone { background:var(--surface-secondary);border-color:var(--border); }
/* Same palette on the server login/enrollment screen; keep the QR black on white. */
body.sq-login .card { border-color:var(--border); }
body.sq-login p { color:var(--slate); }
body.sq-login input { border-color:var(--border);color:var(--text); }
body.sq-login button { background:var(--blue);border-color:var(--blue); }
body.sq-login a,body.sq-login summary { color:var(--blue); }
body.sq-login #secret { background:var(--surface-secondary); }
body.sq-login #status,body.sq-login #qr-error { color:#A32626; }

/* System menu accents and the same vector HP artwork used in proposal PDFs. */
.sidebar .nav-item.active[data-nav="admin"],
.sidebar .nav-item.active[data-nav="users"] { background:#FF585D;border-left-color:#FF585D;color:#FFFFFF; }
.sidebar .hp-badge { padding:0;background:transparent; }

/* Requested action/selection accents, scoped independently of financial status colors. */
:root { --ui-accent:#0957C3; }
:root[data-ui-section="system"],:root[data-ui-section="privileged"] { --ui-accent:#FF585D; }
.btn-primary,.btn-add-icon,.btn-success,
.btn-primary:hover,.btn-add-icon:hover,.btn-success:hover { background:var(--ui-accent);border-color:var(--ui-accent);color:#FFFFFF; }
.btn-secondary,.btn-ghost { color:var(--ui-accent);border-color:var(--ui-accent); }
.tab.active { color:var(--ui-accent);border-bottom-color:var(--ui-accent); }
.content-service-item.active { color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 10%,white); }
.rte-btn.active { background:var(--ui-accent);color:#FFFFFF; }
.sidebar .nav-item.active:not([data-nav="admin"]):not([data-nav="users"]) { background:#0957C3;border-left-color:#0957C3;color:#FFFFFF; }
.dashboard-page > .kpi-grid > .kpi-tile::before { background:#0957C3; }
body.sq-login button { background:var(--ui-accent);border-color:var(--ui-accent); }