:root {
  --navy: #244f45;
  --navy-2: #32675a;
  --blue: #347b69;
  --cyan: #54a795;
  --green: #2f765a;
  --red: #b44742;
  --amber: #b57b22;
  --orange: #d97757;
  --ink: #25332f;
  --muted: #687772;
  --line: #dfe6e1;
  --soft: #f5f7f5;
  --white: #fff;
  --shadow: 0 10px 28px rgba(35, 71, 61, .09);
  font-family: Almarai, Tahoma, "Segoe UI", Arial, sans-serif;
}

body { background: #f4f7f4; }

/* Compact executive typography: denser than the field app, while remaining readable. */
body {
  font-size: 14px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-size: 13.5px; }
label { font-size: 12.5px; }
.button, .nav-item, .period-toolbar > button:not(.button) { font-size: 13px; }
.sidebar-brand strong { font-size: 14px; }
.nav-item { line-height: 1.35; }
.topbar h1 { font-size: 17px; }
.auth-panel h1 { font-size: 23px; }
.command-copy h2 { font-size: clamp(20px, 2.4vw, 28px); }
.command-copy > p:last-child { font-size: 13px; }
.section-heading h2 { font-size: 21px; }
.surface-title h3, .compose-card h3 { font-size: 15px; }
.metric > span, .metric small { font-size: 11.5px; }
.metric strong { font-size: 23px; }
.pulse-item strong { font-size: 21px; }
.decision-item, .message-row, .rep-performance-row,
.approval-card, .timeline-item, .detail-row, .operation-detail-row { font-size: 13px; }
table { font-size: 13px; }
th { font-size: 11px; }
td small, .decision-item small, .rep-performance-row small,
.approval-card small, .timeline-item span, .operation-detail-row small { font-size: 11px; }
.role-badge, .state-badge, .status-pill { font-size: 11px; }
.dialog h2 { font-size: 20px; }
.dialog p, .security-note, .toggle-row small, .permission-item small { font-size: 11.5px; }

.auth-shell {
  background: linear-gradient(112deg, #244f45 0 48%, #f4f7f4 48%);
}
.auth-panel { border: 1px solid rgba(36, 79, 69, .1); border-radius: 8px; }
.brand-mark { border-radius: 8px; box-shadow: 0 8px 22px rgba(36, 79, 69, .14); }

.portal { grid-template-columns: 250px minmax(0, 1fr); }
.sidebar {
  padding: 24px 14px;
  background: #244f45;
  border-inline-start: 0;
}
.sidebar-brand { padding: 0 8px 22px; border-bottom-color: rgba(255, 255, 255, .16); }
.sidebar-brand img { width: 40px; height: 40px; border-radius: 8px; }
.sidebar-brand span, .sidebar-foot span { color: #c1d7d0; }
.sidebar nav { gap: 4px; margin-top: 18px; }
.nav-item { min-height: 46px; border-radius: 8px; color: #dce9e5; }
.nav-item span { color: #cfdfda; }
.nav-item:hover, .nav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, .13);
  box-shadow: inset -3px 0 0 #e5bb62;
}
.nav-item.active span { color: #f0cf86; }
.sidebar-foot { border-top-color: rgba(255, 255, 255, .16); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  min-height: 64px;
  padding: 8px clamp(18px, 3vw, 34px);
  background: rgba(255, 255, 255, .97);
  border-bottom-color: #e2e8e4;
}
.topbar h1 { font-size: 17px; }
.topbar .eyebrow { color: var(--muted); font-size: 11px; }
.account-chip { min-height: 46px; }
.account-chip > span { background: #32675a; }
.icon-button { border-radius: 8px; }
.icon-button:hover { border-color: var(--blue); background: var(--soft); color: var(--blue); }

.content { padding: 26px clamp(18px, 3vw, 34px) 56px; }
.command-banner {
  min-height: 96px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0 18px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.command-banner::before, .command-banner::after { display: none; }
.command-kicker { color: var(--green); letter-spacing: .04em; }
.command-copy h2 { font-size: clamp(20px, 2.4vw, 28px); }
.command-copy > p:last-child, .dashboard-date { color: var(--muted); }
.status-pill { color: var(--green); background: color-mix(in srgb, var(--green), var(--white) 88%); border-color: color-mix(in srgb, var(--green), transparent 60%); }
.command-state { gap: 8px; }

.period-toolbar {
  gap: 9px;
  padding: 8px;
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(36, 79, 69, .035);
}
.period-toolbar > button:not(.button) { border-radius: 7px; background: #f3f6f4; }
.period-toolbar > button.active { background: var(--blue); }

.metric-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 14px; }
.metric {
  min-height: 124px;
  padding: 18px;
  border-color: #e1e7e3;
  border-top-width: 4px;
  border-radius: 8px;
  box-shadow: 0 2px 9px rgba(36, 79, 69, .055);
}
.metric strong { font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif; }
.metric-icon { color: var(--green) !important; background: #ecf5f1; border-radius: 8px; }

.dashboard-grid { gap: 14px; }
.surface, .table-wrap, .approval-card, .timeline-item, .team-card {
  border-color: #e0e7e2;
  border-radius: 8px;
  box-shadow: 0 2px 9px rgba(36, 79, 69, .05);
}
.surface { padding: 20px; }
.surface-title { border-bottom-color: #e7ece8; }
.section-icon { color: var(--blue); background: color-mix(in srgb, var(--blue), var(--white) 88%); border-radius: 8px; }
.text-action { color: var(--blue); }
.text-action:hover { color: color-mix(in srgb, var(--blue), black 20%); }

.sales-chart { border-bottom-color: #e4eae6; }
.chart-column i { background: #4f9a84; }
.chart-column i.credit { background: #dfad54; }
.chart-legend i { background: #4f9a84; }
.chart-legend .credit i { background: #dfad54; }
.rep-avatar { background: #32675a; }
.row-chevron { color: var(--blue); }
.pulse-item { border-radius: 8px; background: #f7f9f7; }
.pulse-item:hover, .pulse-item:focus-visible { border-color: var(--blue); background: color-mix(in srgb, var(--blue), var(--white) 92%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue), transparent 88%); }
.message-row > span { background: #4f9a84; }

.button { border-radius: 7px; }
.button.primary { background: var(--green); }
.button.primary:hover { background: color-mix(in srgb, var(--blue), black 15%); }
.button.ghost:hover { border-color: color-mix(in srgb, var(--blue), transparent 45%); background: var(--soft); }
input, select, textarea { border-color: #cfdad3; border-radius: 7px; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline-color: color-mix(in srgb, var(--blue), transparent 78%);
  border-color: var(--blue);
}
th { color: #52635d; background: #f4f7f5; }
th, td { border-bottom-color: var(--line); }
.role-badge { color: var(--blue); background: color-mix(in srgb, var(--blue), var(--white) 88%); }
.state-badge.active { color: var(--green); background: color-mix(in srgb, var(--green), var(--white) 88%); }
.seat-bar span { background: var(--green); }
.branch-code-box { border-color: color-mix(in srgb, var(--blue), transparent 55%); background: color-mix(in srgb, var(--blue), var(--white) 90%); }
.branch-archive-row.active { border-color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); background: color-mix(in srgb, var(--cyan), var(--white) 88%); }

.dialog::backdrop { background: rgba(24, 43, 37, .66); }
.dialog { border-radius: 8px; }

@media (max-width: 1100px) {
  .metric-grid, .executive-metrics { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 920px) {
  .sidebar { background: #244f45; }
}
@media (max-width: 560px) {
  body { font-size: 13.5px; }
  button, input, select, textarea { font-size: 13px; }
  .topbar h1 { font-size: 16px; }
  .command-copy h2 { font-size: 20px; }
  .section-heading h2 { font-size: 19px; }
  .metric strong { font-size: 20px; }
  .dialog h2 { font-size: 18px; }
  .auth-shell { background: #244f45; }
  .content { padding: 18px 12px 42px; }
  .command-banner { min-height: auto; padding: 4px 0 16px; }
  .metric-grid, .executive-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .surface { padding: 16px; }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

/* Platform-owner identity: deliberately distinct from company operations. */
.platform-mode {
  --navy: #172033;
  --navy-2: #263552;
  --blue: #5b5bd6;
  --cyan: #16a6a1;
  --green: #14866d;
  --red: #cf4f5f;
  --amber: #c98224;
  --orange: #ef765f;
  --ink: #20283b;
  --muted: #687086;
  --line: #dfe3ec;
  --soft: #f2f4f9;
  background: #f2f4f9;
}
.platform-mode .sidebar { background: #172033; border-color: #2a3752; }
.platform-mode .sidebar-brand span, .platform-mode .sidebar-foot span { color: #aeb9d1; }
.platform-mode .nav-item { color: #cad2e3; }
.platform-mode .nav-item span { color: #8f9bea; }
.platform-mode .nav-item:hover, .platform-mode .nav-item.active { background: #273552; box-shadow: inset -3px 0 0 #62d0c3; }
.platform-mode .nav-item.active span { color: #75ddd1; }
.platform-mode .workspace { min-height: 100vh; background: #f2f4f9; }
.platform-mode .topbar { background: rgba(255,255,255,.96); border-bottom-color: #e0e4ed; }
.platform-mode .topbar .eyebrow { color: #5b5bd6; }
.platform-mode .account-chip > span { background: #5b5bd6; }
.platform-mode .icon-button:hover { color: #5b5bd6; border-color: #b7b9ea; background: #f4f4ff; }
.platform-mode .section-heading { margin-bottom: 18px; padding: 20px 22px; color: #fff; background: #202a42; border-radius: 8px; }
.platform-mode .section-heading h2, .platform-mode .section-heading p { color: #fff; }
.platform-mode .section-heading p { opacity: .72; }
.platform-mode .metric { border-top-color: #5b5bd6; background: #fff; }
.platform-mode .metric[data-tone="green"] { border-top-color: #16a085; }
.platform-mode .metric[data-tone="cyan"] { border-top-color: #22aeb7; }
.platform-mode .metric[data-tone="orange"] { border-top-color: #ef765f; }
.platform-mode .metric-icon { color: #5b5bd6 !important; background: #eeeeff; }
.platform-mode .button.primary { background: #5b5bd6; }
.platform-mode .button.primary:hover { background: #4747bd; }
.platform-mode input:focus, .platform-mode select:focus, .platform-mode textarea:focus, .platform-mode button:focus-visible { border-color: #5b5bd6; outline-color: rgba(91,91,214,.2); }
.platform-mode .platform-company-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
.platform-mode .platform-company-layout > * { min-width: 0; }
.platform-mode .platform-registry .table-wrap { overflow-x: auto; }
.platform-mode .platform-registry table { min-width: 960px; }
.platform-users-panel { margin-top: 18px; border-top: 4px solid #5b5bd6; scroll-margin-top: 82px; }
.platform-user-grid { display: grid; grid-template-columns: repeat(3,minmax(220px,1fr)); gap: 10px; }
.platform-user-card { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px; border: 1px solid #e0e4ed; border-radius: 8px; background: #f8f9fc; color: #182235; color-scheme: light; }
.platform-user-card div { min-width: 0; display: grid; gap: 3px; }
.platform-user-card strong { color: #182235; }
.platform-user-card small { overflow: hidden; color: #59657a; text-overflow: ellipsis; white-space: nowrap; }
.platform-user-card .state-badge.active { color: #176b43; background: #e5f5eb; }
.platform-user-card .state-badge.inactive { color: #a62e2e; background: #fde9e9; }
.platform-user-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: #5b5bd6; border-radius: 8px; font-weight: 800; }
@media (max-width: 1220px) {
  .platform-mode .platform-company-layout { grid-template-columns: 1fr; }
  .platform-user-grid { grid-template-columns: repeat(2,minmax(210px,1fr)); }
}
@media (max-width: 620px) {
  .platform-mode .section-heading { padding: 16px; }
  .platform-user-grid { grid-template-columns: 1fr; }
}

/* Theme-aware finishing layer: every reference palette controls the whole command center. */
body[data-dashboard-theme] .sidebar { background: color-mix(in srgb,var(--theme-bg),#000 8%); }
body[data-dashboard-theme] .sidebar-brand span,body[data-dashboard-theme] .sidebar-foot span,body[data-dashboard-theme] .nav-item { color: var(--muted); }
body[data-dashboard-theme] .nav-item span { color: var(--theme-accent); }
body[data-dashboard-theme] .topbar { background: var(--white); }
body[data-dashboard-theme] .topbar h1,body[data-dashboard-theme] .topbar .eyebrow { color: var(--ink); }
body[data-dashboard-theme] .command-banner { color: var(--ink); background: linear-gradient(145deg,var(--theme-card),var(--theme-card-alt)); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
body[data-dashboard-theme] .command-copy h2 { color: var(--ink) !important; }
body[data-dashboard-theme] .command-copy>p:last-child,body[data-dashboard-theme] .dashboard-date { color: var(--muted) !important; }
body[data-dashboard-theme] .command-kicker { color: var(--theme-accent) !important; }
body[data-dashboard-theme] .nav-item:hover,body[data-dashboard-theme] .nav-item.active { color: var(--ink); background: var(--theme-card-alt); box-shadow: inset -3px 0 0 var(--theme-accent); }
body[data-dashboard-theme] .account-chip>span,body[data-dashboard-theme] .rep-avatar { color: var(--ink); background: var(--theme-card-alt); }
body[data-dashboard-theme] .metric { color: var(--ink); border-color: var(--line); background: linear-gradient(160deg,var(--theme-card),var(--theme-card-alt)); }
body[data-dashboard-theme] .metric-icon,body[data-dashboard-theme] .section-icon { color: var(--theme-accent) !important; background: var(--soft); }
body[data-dashboard-theme] th { color: var(--muted); background: var(--soft); }
body[data-dashboard-theme] .security-note { color: var(--muted) !important; background: var(--soft); border-color: var(--line); }
body[data-dashboard-theme] .chart-column i,body[data-dashboard-theme] .chart-legend i { background: var(--green); }
body[data-dashboard-theme] .chart-column i.credit,body[data-dashboard-theme] .chart-legend .credit i { background: var(--orange); }
body[data-dashboard-theme] .pulse-item { background: var(--soft); }
body[data-dashboard-theme] .pulse-item:hover { border-color: var(--theme-accent); background: var(--white); }
body[data-dashboard-theme] .button.primary,body[data-dashboard-theme] .button.success { background: var(--theme-accent); }