/* OSDOMA COMMAND SURFACE — Design Tokens & Application Shell */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root {
  /* Color */
  --cs-white: #FFFFFF;
  --cs-bg: #F7F9FC;
  --cs-bg-soft: #F8FAFC;
  --cs-bg-panel: #F4F7FB;
  --cs-navy: #0B1F45;
  --cs-navy-deep: #071631;
  --cs-blue: #1268FF;
  --cs-blue-2: #1769E8;
  --cs-cyan: #00C2FF;
  --cs-blue-soft: #EAF4FF;
  --cs-border: #D9E3EF;
  --cs-border-card: #DCE5EF;
  --cs-text: #10213D;
  --cs-text-2: #64748B;
  --cs-text-3: #94A3B8;
  --cs-success: #16A36A;
  --cs-warning: #F2A529;
  --cs-danger: #D94A4A;
  --cs-chart-2: #00A8E8;

  /* Type */
  --cs-font: "Inter", system-ui, sans-serif;
  --cs-font-display: "Manrope", "Inter", system-ui, sans-serif;

  /* Space / radius / motion */
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 24px;
  --cs-space-6: 32px;
  --cs-space-7: 40px;
  --cs-radius-sm: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --cs-shadow-1: 0 1px 2px rgba(7, 22, 49, 0.04);
  --cs-shadow-2: 0 8px 24px rgba(7, 22, 49, 0.08);
  --cs-shadow-3: 0 18px 48px rgba(7, 22, 49, 0.16);
  --cs-ease: 180ms ease;
  --cs-ease-page: 240ms ease;

  --cs-sidebar-w: 252px;
  --cs-sidebar-collapsed: 76px;
  --cs-topbar-h: 68px;
  --cs-topbar-bg: rgba(255, 255, 255, 0.92);
  --cs-elevated: #FFFFFF;
  --cs-track: #E8EEF6;
}

[data-theme="dark"] {
  /* Page stays dark; surfaces lift brighter so structure stays readable */
  --cs-white: #1A3358;
  --cs-bg: #0A1628;
  --cs-bg-soft: #12243F;
  --cs-bg-panel: #1E3A62;
  --cs-elevated: #234672;
  --cs-navy: #F5F8FC;
  --cs-navy-deep: #E8EEF7;
  --cs-border: #3A5F8C;
  --cs-border-card: #4A72A3;
  --cs-text: #F5F8FC;
  --cs-text-2: #C2D0E3;
  --cs-text-3: #9BB0C9;
  --cs-blue-soft: rgba(64, 140, 255, 0.28);
  --cs-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --cs-shadow-2: 0 10px 28px rgba(0, 0, 0, 0.42);
  --cs-shadow-3: 0 18px 48px rgba(0, 0, 0, 0.5);
  --cs-topbar-bg: rgba(16, 36, 68, 0.94);
  --cs-track: #2A4468;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--cs-font);
  color: var(--cs-text);
  background: var(--cs-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }

.cs-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--cs-sidebar-w) 1fr;
  grid-template-rows: var(--cs-topbar-h) 1fr auto;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main"
    "sidebar status";
  background:
    linear-gradient(180deg, rgba(234, 244, 255, 0.35), transparent 220px),
    var(--cs-bg);
  background-attachment: local;
  transition: grid-template-columns var(--cs-ease);
}

.cs-app.is-collapsed {
  grid-template-columns: var(--cs-sidebar-collapsed) 1fr;
}

.cs-app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image:
    linear-gradient(var(--cs-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--cs-border) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: 0;
}

/* ── Sidebar ── */
.cs-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100dvh;
  z-index: 30;
  background: var(--cs-white);
  border-right: 1px solid var(--cs-border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  transition: width var(--cs-ease);
}

.cs-sidebar::-webkit-scrollbar {
  width: 8px;
}
.cs-sidebar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cs-text-3) 55%, transparent);
  border-radius: 999px;
}
.cs-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.cs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 18px;
  min-height: 56px;
  flex-shrink: 0;
  position: sticky;
  top: -16px;
  z-index: 2;
  background: var(--cs-white);
}

.cs-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}

.cs-brand__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.cs-brand__name {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--cs-navy);
}

.cs-brand__sub {
  font-size: 11px;
  color: var(--cs-text-3);
  white-space: nowrap;
}

.cs-workspace {
  margin: 0 4px 16px;
  padding: 10px 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-bg-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cs-workspace__mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--cs-blue), #0B1F45);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  flex: 0 0 auto;
}

.cs-workspace__meta { overflow: hidden; }
.cs-workspace__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cs-text-3); }
.cs-workspace__name { font-size: 13px; font-weight: 600; color: var(--cs-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cs-nav-group { margin-bottom: 18px; flex-shrink: 0; }
.cs-nav-group__title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-text-3);
  padding: 0 12px 8px;
}

.cs-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
  margin: 2px 0;
  border-radius: var(--cs-radius-sm);
  color: var(--cs-text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--cs-ease), color var(--cs-ease);
}

.cs-nav-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.cs-nav-link svg[data-filled] {
  fill: currentColor;
  stroke: none;
}

.cs-nav-link:hover {
  background: var(--cs-blue-soft);
  color: var(--cs-navy);
}

.cs-nav-link.is-active {
  background: var(--cs-blue-soft);
  color: var(--cs-navy);
}

.cs-nav-link.is-active svg { color: var(--cs-blue); }

.cs-nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cs-blue);
}

.cs-sidebar__foot {
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 4px;
  border-top: 1px solid var(--cs-border);
  flex-shrink: 0;
  position: sticky;
  bottom: -16px;
  z-index: 2;
  background: var(--cs-white);
}

.cs-app.is-collapsed .cs-brand__text,
.cs-app.is-collapsed .cs-workspace__meta,
.cs-app.is-collapsed .cs-nav-group__title,
.cs-app.is-collapsed .cs-nav-link span,
.cs-app.is-collapsed .cs-profile-mini__meta {
  display: none;
}

.cs-app.is-collapsed .cs-nav-link { justify-content: center; padding: 0; }
.cs-app.is-collapsed .cs-nav-link.is-active::before { display: none; }
.cs-app.is-collapsed .cs-workspace { justify-content: center; }

/* ── Top command bar ── */
.cs-topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--cs-topbar-h);
  display: grid;
  grid-template-columns: 1fr minmax(240px, 520px) 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  background: var(--cs-topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cs-border);
  transition: box-shadow var(--cs-ease), background var(--cs-ease), color var(--cs-ease);
}

.cs-topbar.is-scrolled { box-shadow: var(--cs-shadow-1); }

.cs-topbar__context { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-white);
  color: var(--cs-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--cs-ease), border-color var(--cs-ease), color var(--cs-ease);
}
.cs-icon-btn:hover { background: var(--cs-blue-soft); color: var(--cs-blue); border-color: #c5daf7; }
.cs-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cs-context-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-command {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-white);
  color: var(--cs-text-3);
}
.cs-jump {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-3);
  z-index: 70;
  overflow: hidden;
}
.cs-jump[hidden] { display: none !important; }
.cs-jump__hint {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-text-3);
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-bg-soft);
}
.cs-jump__list { max-height: 320px; overflow-y: auto; }
.cs-jump__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--cs-navy);
  border-bottom: 1px solid #EEF2F7;
}
.cs-jump__item:hover, .cs-jump__item.is-active { background: var(--cs-blue-soft); }
.cs-jump__item span { color: var(--cs-text-3); font-size: 11px; }
.cs-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.cs-quicklinks a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
  font-size: 12px;
  font-weight: 600;
  color: var(--cs-text-2);
  transition: background var(--cs-ease), border-color var(--cs-ease), color var(--cs-ease);
}
.cs-quicklinks a:hover { background: var(--cs-blue-soft); border-color: #c5daf7; color: var(--cs-blue); }
.cs-command input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--cs-text);
  font-size: 13px;
}
.cs-command kbd {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--cs-border);
  border-radius: 5px;
  color: var(--cs-text-3);
  background: var(--cs-bg-soft);
}

.cs-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cs-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cs-blue), var(--cs-navy));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Main ── */
.cs-main {
  grid-area: main;
  position: relative;
  z-index: 1;
  padding: 28px 36px 40px;
  max-width: 1480px;
  width: 100%;
}

.cs-statusbar {
  grid-area: status;
  border-top: 1px solid var(--cs-border);
  background: var(--cs-white);
  padding: 8px 28px;
  font-size: 12px;
  color: var(--cs-text-3);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ── Page header ── */
.cs-page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  margin-bottom: 24px;
  align-items: start;
}
.cs-breadcrumb {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--cs-text-3);
}
.cs-breadcrumb a:hover { color: var(--cs-blue); }
.cs-page-title {
  margin: 0;
  font-family: var(--cs-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cs-navy);
}
.cs-page-desc {
  margin: 6px 0 0;
  color: var(--cs-text-2);
  font-size: 14px;
  max-width: 62ch;
}
.cs-page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Grid ── */
.cs-grid { display: grid; gap: 16px; align-items: start; }
.cs-grid-12 { grid-template-columns: repeat(12, 1fr); }
.cs-span-2 { grid-column: span 2; }
.cs-span-3 { grid-column: span 3; }
.cs-span-4 { grid-column: span 4; }
.cs-span-5 { grid-column: span 5; }
.cs-span-6 { grid-column: span 6; }
.cs-span-7 { grid-column: span 7; }
.cs-span-8 { grid-column: span 8; }
.cs-span-12 { grid-column: span 12; }

/* ── Panels / cards ── */
.cs-panel {
  background: var(--cs-white);
  border: 1px solid var(--cs-border-card);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-1);
  padding: 24px;
  height: fit-content;
  transition: border-color var(--cs-ease);
}
.cs-panel:hover { border-color: #c9d8ea; }
.cs-panel--compact { padding: 16px; }
.cs-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cs-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cs-navy);
}
.cs-panel__sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--cs-text-3);
}

.cs-insight {
  background: linear-gradient(180deg, #F3F9FF, #FFFFFF);
  border: 1px solid #C9DFFA;
  position: relative;
  overflow: hidden;
}
.cs-insight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--cs-blue);
}

/* ── KPI ── */
.cs-kpi { padding: 18px 20px; }
.cs-kpi__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-text-3);
}
.cs-kpi__value {
  margin-top: 8px;
  font-family: var(--cs-font-display);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--cs-navy);
}
.cs-kpi__delta {
  margin-top: 8px;
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.cs-kpi__delta.up { color: var(--cs-success); }
.cs-kpi__delta.down { color: var(--cs-danger); }
.cs-kpi__delta .muted { color: var(--cs-text-3); }

/* ── Buttons ── */
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--cs-radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--cs-ease), border-color var(--cs-ease), color var(--cs-ease), transform 120ms ease;
}
.cs-btn:active { transform: translateY(1px); }
.cs-btn--primary { background: var(--cs-blue); color: #fff; }
.cs-btn--primary:hover { background: var(--cs-blue-2); }
.cs-btn--secondary { background: var(--cs-white); color: var(--cs-navy); border-color: var(--cs-border); }
.cs-btn--secondary:hover { background: var(--cs-blue-soft); border-color: #c5daf7; }
.cs-btn--ghost { background: transparent; color: var(--cs-text-2); }
.cs-btn--ghost:hover { color: var(--cs-blue); background: var(--cs-blue-soft); }
.cs-btn--danger { background: #FCEEEE; color: var(--cs-danger); border-color: #F4CACA; }
.cs-btn--sm { height: 34px; padding: 0 10px; font-size: 12px; }

/* ── Forms ── */
.cs-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cs-field label { font-size: 12px; font-weight: 600; color: var(--cs-text-2); line-height: 1.2; min-height: 16px; }
.cs-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}
.cs-form-row .cs-field { margin-bottom: 0; min-width: 0; }
.cs-form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .cs-form-row, .cs-form-row--2 { grid-template-columns: 1fr; }
}
.cs-input, .cs-select, .cs-textarea {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-white);
  color: var(--cs-text);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--cs-ease), box-shadow var(--cs-ease);
}
.cs-textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
select.cs-select[multiple],
.cs-select--multi {
  height: auto;
  min-height: 108px;
  padding: 8px;
  line-height: 1.4;
  overflow-y: auto;
  appearance: none;
  -webkit-appearance: none;
}
select.cs-select[multiple] option,
.cs-select--multi option {
  padding: 8px 10px;
  border-radius: 6px;
  margin: 2px 0;
}
.cs-input:focus, .cs-select:focus, .cs-textarea:focus {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(18, 104, 255, 0.12);
}

/* Multi employee picker (task assign) */
.cs-multi-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 96px;
  max-height: 168px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-white);
  box-sizing: border-box;
}
.cs-multi-pick:focus-within {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(18, 104, 255, 0.12);
}
.cs-multi-pick__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-text);
  cursor: pointer;
  line-height: 1.3;
  min-height: 16px;
  transition: background var(--cs-ease);
}
.cs-multi-pick__item:hover {
  background: var(--cs-blue-soft);
}
.cs-multi-pick__item:has(input:checked) {
  background: var(--cs-blue-soft);
  color: var(--cs-navy);
}
.cs-multi-pick__item input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cs-blue);
  flex-shrink: 0;
  cursor: pointer;
}
.cs-multi-pick__empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--cs-text-3);
}
.cs-field-hint {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--cs-text-3);
  font-weight: 500;
}

/* Roles matrix editor */
.cs-roles-table__role,
.cs-roles-table__cell {
  text-align: center;
  white-space: nowrap;
}
.cs-roles-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  min-height: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cs-text-3);
  cursor: pointer;
  user-select: none;
}
.cs-roles-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cs-blue);
  cursor: pointer;
}
.cs-roles-check span::before {
  content: "Off";
}
.cs-roles-check:has(input:checked) {
  color: var(--cs-blue);
}
.cs-roles-check:has(input:checked) span::before {
  content: "On";
}
.cs-roles-check--locked {
  cursor: default;
  opacity: 0.85;
}
.cs-roles-check--locked input {
  cursor: default;
}
.cs-banner {
  padding: 10px 14px;
  border-radius: var(--cs-radius-sm);
  font-size: 13px;
  border: 1px solid var(--cs-border);
  background: var(--cs-blue-soft);
  color: var(--cs-navy);
}
.cs-invoice-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.cs-invoice-line {
  display: grid;
  grid-template-columns: 1.6fr 0.5fr 0.7fr;
  gap: 8px;
}
@media (max-width: 700px) {
  .cs-invoice-line { grid-template-columns: 1fr; }
}

/* Password field: one box, eye icon inside on the right */
.cs-password {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 42px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-white);
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color var(--cs-ease), box-shadow var(--cs-ease);
}
.cs-password:focus-within {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(18, 104, 255, 0.12);
}
.cs-password .cs-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent;
  padding: 0 8px 0 12px;
}
.cs-password .cs-input:focus {
  border: 0 !important;
  box-shadow: none !important;
}
.cs-password__toggle {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 100%;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-text-3);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 !important;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}
.cs-password__toggle:hover,
.cs-password__toggle:focus {
  color: var(--cs-blue);
  background: var(--cs-blue-soft);
  outline: none;
}
.cs-password__toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.cs-password__icon-hide { display: none !important; }
.cs-password.is-visible .cs-password__icon-show { display: none !important; }
.cs-password.is-visible .cs-password__icon-hide { display: block !important; }

[data-theme="dark"] .cs-password {
  background: var(--cs-bg-soft);
  border-color: var(--cs-border);
}

/* ── Badges ── */
.cs-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cs-badge--active { background: #E8F7EF; color: #0F7A4A; }
.cs-badge--completed { background: #EAF4FF; color: #1268FF; }
.cs-badge--delivered { background: #EAF4FF; color: #0B1F45; }
.cs-badge--pending, .cs-badge--invited, .cs-badge--draft { background: #F3F5F8; color: #64748B; }
.cs-badge--requested { background: #FFF6E8; color: #A66B10; }
.cs-badge--rejected { background: #FCEEEE; color: #D94A4A; }
.cs-badge--overdue, .cs-badge--failed { background: #FCEEEE; color: #D94A4A; }
.cs-badge--due { background: #FFF6E8; color: #A66B10; }
.cs-badge--paid, .cs-badge--approved, .cs-badge--confirmed, .cs-badge--active, .cs-badge--delivered { background: #E8F7EF; color: #0F7A4A; }
.cs-badge--paused, .cs-badge--on_hold, .cs-badge--warning { background: #FFF6E8; color: #A66B10; }
.cs-badge--approved { background: #E8F7EF; color: #0F7A4A; }
.cs-badge--disabled { background: #F3F5F8; color: #94A3B8; }

/* ── Table ── */
.cs-table-wrap { overflow: auto; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); background: var(--cs-white); }
.cs-table { width: 100%; border-collapse: collapse; min-width: 0; }
@media (min-width: 861px) {
  .cs-table-wrap:not(.cs-table-wrap--fluid) .cs-table { min-width: 640px; }
}
.cs-table th {
  position: sticky;
  top: 0;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cs-text-3);
  background: var(--cs-bg-soft);
  border-bottom: 1px solid var(--cs-border);
  padding: 12px 16px;
}
.cs-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #EEF2F7;
  font-size: 13px;
  vertical-align: middle;
}
.cs-table tr:hover td { background: var(--cs-blue-soft); }
.cs-table .primary { font-weight: 600; color: var(--cs-navy); }
.cs-table a.primary,
.cs-table a.cs-table-link {
  color: var(--cs-blue);
  text-decoration: none;
  font-weight: 600;
}
.cs-table a.primary:hover,
.cs-table a.cs-table-link:hover {
  text-decoration: underline;
}
.cs-table-row-link {
  cursor: pointer;
}
.cs-table-row-link:focus {
  outline: 2px solid var(--cs-blue);
  outline-offset: -2px;
}
.cs-table-open {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.cs-table .meta { color: var(--cs-text-3); font-size: 12px; }

/* ── Progress ── */
.cs-progress {
  height: 8px;
  border-radius: 999px;
  background: #E8EEF6;
  overflow: hidden;
}
.cs-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cs-blue), var(--cs-chart-2));
  transition: width 300ms ease;
}
.cs-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--cs-text-2);
  margin-bottom: 6px;
}

.cs-ring {
  --p: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(var(--cs-blue) calc(var(--p) * 1%), var(--cs-track) 0);
  display: grid;
  place-items: center;
}
.cs-ring::after {
  content: attr(data-label);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--cs-white);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--cs-navy);
}

/* ── Business health ── */
.cs-health {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 8px auto 0;
}
.cs-health__core {
  position: absolute;
  inset: 48px;
  border-radius: 50%;
  border: 1px solid var(--cs-border);
  background: radial-gradient(circle at 40% 35%, #F7FBFF, #EEF5FF);
  display: grid;
  place-items: center;
  text-align: center;
}
.cs-health__score {
  font-family: var(--cs-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--cs-navy);
  line-height: 1;
}
.cs-health__label { font-size: 11px; color: var(--cs-text-3); margin-top: 4px; }
.cs-health__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 10px solid #EAF1F9;
}
.cs-health__ring--a { border-top-color: var(--cs-blue); border-right-color: var(--cs-blue); transform: rotate(-20deg); }
.cs-health__ring--b { inset: 14px; border-width: 8px; border-bottom-color: var(--cs-success); border-left-color: var(--cs-success); transform: rotate(35deg); }
.cs-health__ring--c { inset: 28px; border-width: 6px; border-top-color: var(--cs-chart-2); border-left-color: transparent; transform: rotate(-50deg); }
.cs-health-list { display: grid; gap: 8px; margin-top: 16px; }
.cs-health-list div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--cs-bg-soft);
}
.cs-health-list strong { font-variant-numeric: tabular-nums; color: var(--cs-navy); }

/* ── Timeline ── */
.cs-timeline { display: grid; gap: 0; }
.cs-timeline__item {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 1px solid var(--cs-border);
  margin-left: 7px;
}
.cs-timeline__item:last-child { padding-bottom: 0; }
.cs-timeline__dot {
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cs-white);
  border: 2px solid var(--cs-blue);
}
.cs-timeline__time { font-size: 11px; color: var(--cs-text-3); }
.cs-timeline__event { font-size: 13px; font-weight: 500; color: var(--cs-text); margin-top: 2px; }
.cs-timeline__meta { font-size: 12px; color: var(--cs-text-2); margin-top: 2px; }

/* ── Charts ── */
.cs-chart-box {
  position: relative;
  width: 100%;
  height: 160px;
  max-height: 160px;
  overflow: hidden;
}
.cs-chart-box--sm { height: 120px; max-height: 120px; }
.cs-chart-box--lg { height: 200px; max-height: 200px; }
.cs-chart-box canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  max-height: 100%;
}
.cs-bars { display: grid; gap: 10px; }
.cs-bars__row {
  display: grid;
  grid-template-columns: minmax(72px, 110px) 1fr minmax(36px, 48px);
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.cs-bars__row > span {
  color: var(--cs-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-bars__row > strong {
  text-align: right;
  color: var(--cs-navy);
  font-variant-numeric: tabular-nums;
}
.cs-bars__track {
  height: 8px;
  background: var(--cs-track);
  border-radius: 999px;
  overflow: hidden;
}
.cs-bars__fill { height: 100%; background: var(--cs-blue); border-radius: inherit; min-width: 0; }

/* ── Auth / empty / alert ── */
.cs-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(18, 104, 255, 0.08), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0, 194, 255, 0.06), transparent 35%),
    var(--cs-bg);
}
.cs-auth__card {
  width: min(440px, 100%);
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-2);
  padding: 32px;
}
.cs-auth__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.cs-auth__brand img { width: 36px; height: 36px; }
.cs-flash {
  padding: 10px 12px;
  border-radius: var(--cs-radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
}
.cs-flash--ok { background: #E8F7EF; color: #0F7A4A; }
.cs-flash--err { background: #FCEEEE; color: #D94A4A; }

.cs-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--cs-text-2);
}
.cs-empty__mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--cs-blue), #0B1F45);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  opacity: 0.85;
}

.cs-file-grid { display: grid; gap: 10px; }
.cs-file {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-bg-soft);
}
.cs-file__ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--cs-blue);
  overflow: hidden;
}
.cs-file__ico img { width: 100%; height: 100%; object-fit: cover; }
.cs-file__name { font-size: 13px; font-weight: 600; color: var(--cs-navy); }
.cs-file__meta { font-size: 12px; color: var(--cs-text-3); margin-top: 2px; }
.cs-file__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Client project list — vertical scroll cards, no horizontal table scroll */
.cs-project-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(62vh, 640px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  overscroll-behavior: contain;
}
.cs-project-card {
  display: block;
  padding: 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: var(--cs-bg-soft);
  transition: border-color var(--cs-ease), background var(--cs-ease);
}
.cs-project-card:hover {
  border-color: #c5daf7;
  background: var(--cs-blue-soft);
}
.cs-project-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.cs-project-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--cs-navy);
}
.cs-project-card__meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--cs-text-3);
}
.cs-project-card__desc {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--cs-text-2);
  line-height: 1.45;
}

.cs-discuss {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.cs-discuss__item {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--cs-border);
  background: var(--cs-bg-soft);
}
.cs-discuss__item--admin { border-left: 3px solid var(--cs-blue); }
.cs-discuss__item--client { border-left: 3px solid var(--cs-success); }
.cs-discuss__meta { font-size: 11px; color: var(--cs-text-3); margin-bottom: 4px; }
.cs-discuss__body { font-size: 13px; color: var(--cs-text); white-space: pre-wrap; }
.cs-discuss__item.is-focus {
  outline: 2px solid rgba(18, 104, 255, 0.35);
  background: #F3F9FF;
}

/* WhatsApp-style project chat */
.cs-chat {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  height: 100%;
  background:
    radial-gradient(circle at 10% 0%, rgba(18, 104, 255, 0.05), transparent 40%),
    linear-gradient(180deg, #F4F7FB, #EEF3F9);
}
.cs-chat__head {
  padding: 14px 16px;
  background: var(--cs-white);
  border-bottom: 1px solid var(--cs-border);
}
.cs-chat__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cs-navy);
}
.cs-chat__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--cs-text-3);
}
.cs-chat__thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 280px;
  max-height: 420px;
}
.cs-chat__empty {
  margin: auto;
  text-align: center;
  color: var(--cs-text-3);
  font-size: 13px;
}
.cs-chat__row {
  display: flex;
  width: 100%;
}
.cs-chat__row.is-mine { justify-content: flex-end; }
.cs-chat__row.is-theirs { justify-content: flex-start; }
.cs-chat__bubble {
  max-width: min(82%, 360px);
  padding: 8px 10px 6px;
  border-radius: 14px;
  box-shadow: 0 1px 1px rgba(7, 22, 49, 0.06);
  position: relative;
}
.cs-chat__row.is-mine .cs-chat__bubble {
  background: #D9ECFF;
  border-bottom-right-radius: 4px;
  color: var(--cs-navy);
}
.cs-chat__row.is-theirs .cs-chat__bubble {
  background: #FFFFFF;
  border: 1px solid #E4ECF5;
  border-bottom-left-radius: 4px;
}
.cs-chat__who {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-blue);
  margin-bottom: 4px;
}
.cs-chat__row.is-mine .cs-chat__who { color: #0B4FBF; text-align: right; }
.cs-chat__text {
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.cs-chat__time {
  margin-top: 4px;
  font-size: 10px;
  color: var(--cs-text-3);
  text-align: right;
}
.cs-chat__attach { margin-bottom: 6px; }
.cs-chat__img-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  max-width: 240px;
}
.cs-chat__img-link img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}
.cs-chat__file-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(217, 227, 239, 0.9);
}
.cs-chat__file-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--cs-navy);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.cs-chat__file-card strong {
  display: block;
  font-size: 12px;
  color: var(--cs-navy);
}
.cs-chat__file-card small {
  display: block;
  font-size: 11px;
  color: var(--cs-text-3);
  margin-top: 2px;
}
.cs-chat__attach-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
}
.cs-chat__attach-actions a { color: var(--cs-blue); font-weight: 600; }

.cs-chat__composer {
  border-top: 1px solid var(--cs-border);
  background: var(--cs-white);
  padding: 10px 12px 12px;
}
.cs-chat__attach-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--cs-blue-soft);
  border: 1px solid #C9DFFA;
  font-size: 12px;
  color: var(--cs-navy);
}
.cs-chat__attach-clear {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--cs-text-2);
  font-size: 14px;
}
.cs-chat__compose-row {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
  align-items: end;
}
.cs-chat__plus { position: relative; }
.cs-chat__plus-btn,
.cs-chat__send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cs-chat__plus-btn {
  background: var(--cs-bg-soft);
  color: var(--cs-navy);
  border: 1px solid var(--cs-border);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
}
.cs-chat__plus-btn:hover { background: var(--cs-blue-soft); color: var(--cs-blue); }
.cs-chat__send {
  background: var(--cs-blue);
  color: #fff;
}
.cs-chat__send:hover { background: var(--cs-blue-2); }
.cs-chat__input {
  width: 100%;
  min-height: 42px;
  max-height: 120px;
  resize: none;
  border: 1px solid var(--cs-border);
  border-radius: 21px;
  padding: 11px 14px;
  font: inherit;
  font-size: 13.5px;
  outline: none;
  background: var(--cs-bg-soft);
  color: var(--cs-text);
}
.cs-chat__input:focus {
  border-color: var(--cs-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(18, 104, 255, 0.12);
}
.cs-chat__plus-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 210px;
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  box-shadow: var(--cs-shadow-2);
  overflow: hidden;
  z-index: 5;
}
.cs-chat__plus-menu[hidden],
.cs-chat__attach-bar[hidden],
.cs-chat__library[hidden] {
  display: none !important;
}
.cs-chat__plus-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  background: #fff;
  text-align: left;
  font-size: 13px;
  color: var(--cs-navy);
  cursor: pointer;
}
.cs-chat__plus-menu button:hover { background: var(--cs-blue-soft); }
.cs-chat__plus-menu button:disabled { opacity: 0.45; cursor: not-allowed; }

.cs-chat__library {
  position: absolute;
  inset: 0;
  background: rgba(7, 22, 49, 0.28);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 20;
}
.cs-chat { position: relative; }
.cs-chat__library-card {
  width: min(420px, 100%);
  max-height: 70%;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--cs-shadow-3);
  display: flex;
  flex-direction: column;
}
.cs-chat__library-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-chat__library-list {
  overflow-y: auto;
  padding: 8px;
}
.cs-chat__library-item {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.cs-chat__library-item:hover { background: var(--cs-blue-soft); }
.cs-chat__library-item strong { display: block; font-size: 13px; color: var(--cs-navy); }
.cs-chat__library-item small { display: block; font-size: 11px; color: var(--cs-text-3); margin-top: 2px; }

.cs-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(110px, 0.6fr) minmax(120px, 0.7fr) auto;
  gap: 12px;
  align-items: end;
}
.cs-upload-row .cs-field {
  margin: 0;
  min-width: 0;
}
.cs-upload-row .cs-field label {
  display: block;
  margin-bottom: 6px;
  min-height: 16px;
}
.cs-upload-row .cs-input,
.cs-upload-row .cs-select,
.cs-upload-row .cs-file-input,
.cs-upload-row .cs-btn {
  height: 42px;
  width: 100%;
  box-sizing: border-box;
}
.cs-upload-row .cs-btn {
  width: auto;
  min-width: 110px;
  align-self: end;
}
.cs-file-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-white);
  color: var(--cs-text-2);
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
}
.cs-file-input:hover { border-color: #c5daf7; background: var(--cs-blue-soft); }
.cs-file-input input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.cs-file-input__btn {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--cs-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.cs-file-input__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cs-text-3);
}
@media (max-width: 860px) {
  .cs-upload-row { grid-template-columns: 1fr; }
  .cs-upload-row .cs-btn { width: 100%; }
  .cs-project-scroll { max-height: none; }
}

/* Notifications */
.cs-notify { position: relative; }
.cs-notify__btn { position: relative; }
.cs-notify__dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cs-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cs-white);
}
.cs-notify__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-3);
  z-index: 60;
  overflow: hidden;
}
.cs-notify__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-notify__list { max-height: 360px; overflow-y: auto; }
.cs-notify__item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid #EEF2F7;
  transition: background var(--cs-ease);
}
.cs-notify__item:hover { background: var(--cs-blue-soft); }
.cs-notify__item.is-unread { background: var(--cs-blue-soft); }
.cs-notify__item.is-urgent {
  background: #FDF2F2;
  border-left: 3px solid #D94A4A;
}
.cs-notify__item.is-urgent.is-unread {
  background: #FCE8E8;
}
.cs-notify__item.is-urgent .cs-notify__title { color: #9B1C1C; }
.cs-notify__urgent-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: #D94A4A;
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 6px;
}
.cs-notify__dot--urgent {
  background: #D94A4A !important;
}
.cs-notify__title { font-size: 13px; font-weight: 600; color: var(--cs-navy); }
.cs-notify__body { margin-top: 4px; font-size: 12px; color: var(--cs-text-2); line-height: 1.4; }
.cs-notify__time { margin-top: 6px; font-size: 11px; color: var(--cs-text-3); }

.cs-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 22, 49, 0.35);
  display: none;
  place-items: center;
  align-content: center;
  z-index: 100;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cs-modal-backdrop.is-open { display: grid; }
.cs-modal {
  width: min(560px, 100%);
  max-height: min(88vh, 820px);
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cs-rise 200ms ease;
  margin: auto;
}
.cs-modal > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.cs-modal__head, .cs-modal__foot {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cs-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  background: var(--cs-white);
}
.cs-modal__foot {
  border-bottom: 0;
  border-top: 1px solid var(--cs-border);
  justify-content: flex-end;
  gap: 8px;
}
.cs-modal__body {
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.cs-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 22, 49, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cs-ease);
  z-index: 80;
}
.cs-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cs-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(460px, 100%);
  height: 100%;
  background: var(--cs-white);
  border-left: 1px solid var(--cs-border);
  box-shadow: var(--cs-shadow-3);
  transform: translateX(100%);
  transition: transform var(--cs-ease);
  z-index: 90;
  display: flex;
  flex-direction: column;
}
.cs-drawer.is-open { transform: translateX(0); }
.cs-drawer__head { padding: 18px 20px; border-bottom: 1px solid var(--cs-border); display: flex; justify-content: space-between; align-items: center; }
.cs-drawer__body { padding: 20px; overflow: auto; flex: 1; }

.cs-skel {
  background: linear-gradient(90deg, #EAF0F7 25%, #F7FAFD 37%, #EAF0F7 63%);
  background-size: 400% 100%;
  animation: cs-shimmer 1.2s ease infinite;
  border-radius: 8px;
}

@keyframes cs-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@keyframes cs-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cs-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--cs-navy-deep);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cs-ease);
  z-index: 40;
}
.cs-app.is-collapsed .cs-nav-link { position: relative; }
.cs-app.is-collapsed .cs-nav-link:hover .cs-tooltip { opacity: 1; }

@media (max-width: 1100px) {
  .cs-span-2, .cs-span-3, .cs-span-4, .cs-span-5, .cs-span-6, .cs-span-7, .cs-span-8 { grid-column: span 6; }
  .cs-topbar { grid-template-columns: auto 1fr auto; padding: 0 16px; }
  .cs-main { padding: 20px; }
}

@media (max-width: 860px) {
  .cs-app, .cs-app.is-collapsed {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main"
      "status";
  }
  .cs-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(280px, 86vw);
    height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform var(--cs-ease);
    box-shadow: var(--cs-shadow-3);
  }
  .cs-app.sidebar-open .cs-sidebar { transform: translateX(0); }
  .cs-span-2, .cs-span-3, .cs-span-4, .cs-span-5, .cs-span-6, .cs-span-7, .cs-span-8, .cs-span-12 { grid-column: span 12; }
  .cs-page-header { grid-template-columns: 1fr; }
  .cs-page-actions { justify-content: flex-start; }
  .cs-command kbd { display: none; }
}


/* -- Ops extensions: inbox, status track, payments, docs, forms -- */
.cs-badge--awaiting_payment { background: #FFF4E5; color: #9A5B00; }
.cs-badge--warning { background: #FFF4E5; color: #9A5B00; }
.cs-stack-form { display: flex; flex-direction: column; gap: 0; }
.cs-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cs-text-2);
  margin: 0 0 12px;
}
.cs-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-text-3);
  margin: 0 0 8px;
}
.cs-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cs-border);
  font-size: 13px;
  flex-wrap: wrap;
}
.cs-list-row__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-inline-form { display: flex; gap: 6px; align-items: center; }
.cs-select--sm { height: 34px; min-width: 100px; }
.cs-shortcut-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.cs-status-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 8px 0 4px;
}
.cs-status-track__node {
  flex: 1;
  min-width: 0;
  text-align: center;
  position: relative;
}
.cs-status-track__node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 7px;
  left: calc(50% + 10px);
  right: calc(-50% + 10px);
  height: 2px;
  background: var(--cs-border);
}
.cs-status-track__node.is-done:not(:last-child)::after,
.cs-status-track__node.is-current:not(:last-child)::after { background: #7EB0F5; }
.cs-status-track__dot {
 display: inline-block;
 width: 14px;
 height: 14px;
 border-radius: 50%;
 border: 2px solid var(--cs-border);
 background: var(--cs-white);
 position: relative;
 z-index: 1;
}
.cs-status-track__node.is-done .cs-status-track__dot {
 background: var(--cs-blue);
 border-color: var(--cs-blue);
}
.cs-status-track__node.is-current .cs-status-track__dot {
 background: var(--cs-white);
 border-color: var(--cs-blue);
 box-shadow: 0 0 0 3px rgba(18,104,255,0.18);
}
.cs-status-track__label {
 display: block;
 margin-top: 8px;
 font-size: 11px;
 font-weight: 600;
 color: var(--cs-text-3);
 line-height: 1.3;
}
.cs-status-track__node.is-done .cs-status-track__label,
.cs-status-track__node.is-current .cs-status-track__label { color: var(--cs-navy); }
.cs-status-track--compact {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin: 10px 0 8px;
}
.cs-status-track--compact .cs-status-track__step {
 font-size: 10px;
 font-weight: 600;
 padding: 3px 7px;
 border-radius: 6px;
 background: var(--cs-bg-soft);
 color: var(--cs-text-3);
 border: 1px solid var(--cs-border);
}
.cs-status-track--compact .cs-status-track__step.is-done,
.cs-status-track--compact .cs-status-track__step.is-current {
 background: var(--cs-blue-soft);
 color: var(--cs-blue);
 border-color: #c5daf7;
}

.cs-inbox { display: flex; flex-direction: column; gap: 8px; }
.cs-inbox__item {
 display: block;
 padding: 12px 14px;
 border: 1px solid var(--cs-border);
 border-radius: var(--cs-radius-sm);
 background: var(--cs-white);
 transition: border-color var(--cs-ease), background var(--cs-ease);
}
.cs-inbox__item:hover { border-color: #c5daf7; background: var(--cs-blue-soft); }
.cs-inbox__item--high { border-left: 3px solid #E2A100; }
.cs-inbox__item--medium { border-left: 3px solid var(--cs-blue); }
.cs-inbox__type {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.06em;
 color: var(--cs-text-3);
 margin-bottom: 4px;
}
.cs-inbox__title { font-size: 14px; font-weight: 600; color: var(--cs-navy); }
.cs-inbox__meta { font-size: 12px; color: var(--cs-text-3); margin-top: 4px; }
.cs-inbox--full .cs-inbox__item { padding: 14px 16px; }

.cs-pay-card {
 padding: 12px 0;
 border-bottom: 1px solid var(--cs-border);
}
.cs-pay-card--link { display: block; color: inherit; }
.cs-pay-card__top {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: flex-start;
}
.cs-pay-card__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 10px;
}
.cs-pay-detail {
 display: grid;
 gap: 10px;
 padding: 14px;
 border: 1px solid var(--cs-border);
 border-radius: var(--cs-radius-md);
 background: var(--cs-bg-soft);
}
.cs-pay-detail__row {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 font-size: 14px;
 flex-wrap: wrap;
}
.cs-pay-detail__row span { color: var(--cs-text-3); }
.cs-steps {
 margin: 0 0 16px;
 padding-left: 18px;
 color: var(--cs-text-2);
 font-size: 13px;
 line-height: 1.7;
}
.cs-details summary { cursor: pointer; list-style: none; }
.cs-details summary::-webkit-details-marker { display: none; }

.cs-doc-body { background: #E8EEF5; margin: 0; }
.cs-doc-toolbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 padding: 14px 20px;
 background: var(--cs-white);
 border-bottom: 1px solid var(--cs-border);
}
.cs-doc-sheet {
 max-width: 800px;
 margin: 24px auto;
 background: #fff;
 padding: 40px 44px;
 border-radius: 12px;
 box-shadow: var(--cs-shadow-2);
 color: #12263A;
}
.cs-doc-sheet__head {
 display: flex;
 justify-content: space-between;
 gap: 20px;
 padding-bottom: 20px;
 border-bottom: 2px solid #1268FF;
 margin-bottom: 24px;
}
.cs-doc-brand { font-size: 22px; font-weight: 800; letter-spacing: 0.04em; color: #0B1F3A; }
.cs-doc-sub { font-size: 12px; color: #5B6B7C; margin-top: 4px; }
.cs-doc-meta { text-align: right; font-size: 13px; color: #5B6B7C; line-height: 1.5; }
.cs-doc-block { margin-bottom: 22px; }
.cs-doc-block h1 { margin: 0 0 8px; font-size: 26px; color: #0B1F3A; }
.cs-doc-muted { margin: 0; color: #5B6B7C; font-size: 14px; }
.cs-doc-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 16px;
 margin-bottom: 24px;
}
.cs-doc-label {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: #7A8796;
 margin-bottom: 6px;
}
.cs-doc-value { font-size: 20px; font-weight: 700; color: #0B1F3A; }
.cs-doc-prose { white-space: pre-wrap; line-height: 1.6; font-size: 14px; }
.cs-doc-foot {
 margin-top: 32px;
 padding-top: 14px;
 border-top: 1px solid #E4EAF1;
 font-size: 11px;
 color: #7A8796;
}
@media print {
 .no-print, .cs-doc-toolbar { display: none !important; }
 .cs-doc-body { background: #fff; }
 .cs-doc-sheet { box-shadow: none; margin: 0; max-width: none; border-radius: 0; }
}
@media (max-width: 700px) {
 .cs-doc-grid { grid-template-columns: 1fr; }
 .cs-status-track { flex-wrap: wrap; gap: 12px; }
 .cs-status-track__node:not(:last-child)::after { display: none; }
}

/* Workforce suite */
.cs-alert-strip { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.cs-alert-chip {
  display:inline-flex; align-items:center; height:32px; padding:0 12px;
  border-radius:8px; border:1px solid var(--cs-border); background:var(--cs-white);
  font-size:12px; font-weight:600; color:var(--cs-text-2);
}
.cs-alert-chip--high { border-color:#F0C36A; background:#FFF8E8; color:#9A5B00; }
.cs-alert-chip--medium { border-color:#c5daf7; background:var(--cs-blue-soft); color:var(--cs-blue); }
.cs-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.cs-mini-stats > div {
  padding:10px 12px; border:1px solid var(--cs-border); border-radius:10px; background:var(--cs-bg-soft);
}
.cs-mini-stats span { display:block; font-size:11px; color:var(--cs-text-3); margin-bottom:4px; }
.cs-mini-stats strong { font-size:16px; color:var(--cs-navy); }
.cs-company-banner {
  display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap;
  padding:18px 20px; margin:0 0 16px; border:1px solid #c5daf7; border-radius:14px;
  background: linear-gradient(135deg, #F3F8FF 0%, #FFFFFF 55%, #EEF5FF 100%);
}
.cs-company-banner--compact { padding:12px 16px; margin-bottom:12px; }
.cs-company-banner__eyebrow {
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cs-blue);
}
.cs-company-banner__name { font-size:22px; font-weight:800; color:var(--cs-navy); margin-top:2px; }
.cs-company-banner__sub { font-size:13px; color:var(--cs-text-2); margin-top:4px; }
.cs-company-banner__who { text-align:right; }
.cs-company-banner__who strong { display:block; color:var(--cs-navy); }
.cs-company-banner__who span { font-size:12px; color:var(--cs-text-3); }

/* Urgent announcements */
.cs-urgent-stack { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.cs-urgent-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #F4CACA;
  background: linear-gradient(135deg, #FFF5F5 0%, #FCEEEE 100%);
  color: #7F1D1D;
  box-shadow: 0 8px 24px rgba(185, 28, 28, 0.08);
}
.cs-urgent-banner__mark {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: #D94A4A;
  border-radius: 6px;
  padding: 6px 8px;
  line-height: 1;
}
.cs-urgent-banner__body { flex: 1; min-width: 0; }
.cs-urgent-banner__body strong { display: block; font-size: 15px; color: #9B1C1C; }
.cs-urgent-banner__body p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #7F1D1D; }
.cs-urgent-banner__time { display: block; margin-top: 6px; font-size: 11px; color: #B42318; opacity: 0.85; }
.cs-urgent-banner__btn {
  flex: 0 0 auto;
  background: #D94A4A !important;
  color: #fff !important;
  border-color: #D94A4A !important;
}
.cs-urgent-banner__btn:hover { background: #B42318 !important; }
.cs-urgent-pill {
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: #D94A4A;
  border-radius: 4px;
  padding: 2px 6px;
  vertical-align: middle;
}
.cs-list-row--urgent {
  border-left: 3px solid #D94A4A;
  background: #FFF8F8;
  padding-left: 12px;
  border-radius: 8px;
}

[data-theme="dark"] .cs-urgent-banner {
  background: linear-gradient(135deg, #3A1A1A 0%, #4A2020 100%);
  border-color: #8B3A3A;
  color: #FECACA;
}
[data-theme="dark"] .cs-urgent-banner__body strong { color: #FCA5A5; }
[data-theme="dark"] .cs-urgent-banner__body p { color: #FECACA; }
[data-theme="dark"] .cs-notify__item.is-urgent {
  background: rgba(217, 74, 74, 0.18);
  border-left-color: #D94A4A;
}
[data-theme="dark"] .cs-notify__item.is-urgent .cs-notify__title { color: #FCA5A5; }
[data-theme="dark"] .cs-list-row--urgent {
  background: rgba(217, 74, 74, 0.12);
  border-left-color: #D94A4A;
}
.cs-prio {
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  padding:2px 6px; border-radius:6px; background:var(--cs-bg-soft); color:var(--cs-text-3);
}
.cs-prio--high, .cs-prio--urgent { background:#FFF4E5; color:#9A5B00; }
.cs-prio--urgent { background:#FCEEEE; color:var(--cs-danger); }
.cs-day-picks { display:flex; flex-wrap:wrap; gap:8px 14px; }
.cs-att-scroll { overflow-x:auto; }
.cs-att-cal { border-collapse:collapse; min-width:100%; font-size:11px; }
.cs-att-cal th, .cs-att-cal td { padding:4px; text-align:center; border-bottom:1px solid #EEF2F7; }
.cs-att-cal__name { text-align:left !important; min-width:140px; position:sticky; left:0; background:var(--cs-white); }
.cs-att-dot {
  display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;
  border-radius:6px; font-weight:700; font-size:10px;
}
.cs-att-dot--present { background:#E8F7EF; color:#0F7A4A; }
.cs-att-dot--late { background:#FFF4E5; color:#9A5B00; }
.cs-att-dot--remote { background:var(--cs-blue-soft); color:var(--cs-blue); }
.cs-att-dot--leave { background:#F3E8FF; color:#6B21A8; }
.cs-att-dot--off { background:#F1F4F8; color:#9AA6B2; }
.cs-att-dot--missing { background:#FCEEEE; color:#B42318; }
.cs-att-dot--future { background:transparent; color:#C5CDD6; }
.cs-month-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px; }
.cs-month-cell {
  min-height:72px; padding:8px; border-radius:10px; border:1px solid var(--cs-border); background:var(--cs-white);
}
.cs-month-cell__n { font-weight:700; color:var(--cs-navy); }
.cs-month-cell__s { margin-top:8px; font-size:11px; text-transform:capitalize; color:var(--cs-text-3); }
.cs-month-cell--present { background:#E8F7EF; border-color:#B7E4C7; }
.cs-month-cell--late { background:#FFF4E5; border-color:#F0C36A; }
.cs-month-cell--remote { background:var(--cs-blue-soft); border-color:#c5daf7; }
.cs-month-cell--leave { background:#F8F0FF; border-color:#E0C6F5; }
.cs-month-cell--off { background:#F7F8FA; }
.cs-month-cell--missing { background:#FDF2F2; border-color:#F4CACA; }
.cs-team-thread { display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; }
.cs-team-bubble {
  padding:10px 12px; border-radius:10px; border:1px solid var(--cs-border); background:var(--cs-bg-soft); font-size:13px;
}

/* ── Dark mode polish: header, logo, elevated surfaces ── */
[data-theme="dark"] .cs-app {
  background:
    linear-gradient(180deg, rgba(18, 104, 255, 0.08), transparent 240px),
    var(--cs-bg);
}

[data-theme="dark"] .cs-sidebar {
  background: #0F213D;
  border-right-color: var(--cs-border);
}
[data-theme="dark"] .cs-brand,
[data-theme="dark"] .cs-sidebar__foot {
  background: #0F213D;
}

[data-theme="dark"] .cs-brand img {
  background: #FFFFFF;
  padding: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .cs-topbar {
  background: var(--cs-topbar-bg);
  color: var(--cs-text);
  border-bottom-color: var(--cs-border);
}

[data-theme="dark"] .cs-context-title {
  color: var(--cs-navy);
}

[data-theme="dark"] .cs-icon-btn {
  background: var(--cs-bg-soft);
  color: var(--cs-text-2);
  border-color: var(--cs-border);
}

[data-theme="dark"] .cs-icon-btn:hover {
  background: var(--cs-blue-soft);
  color: #8CBCFF;
  border-color: #4A72A3;
}

[data-theme="dark"] .cs-command {
  background: var(--cs-bg-soft);
  border-color: var(--cs-border);
  color: var(--cs-text-3);
}

[data-theme="dark"] .cs-command:focus-within {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(18, 104, 255, 0.25);
}

[data-theme="dark"] .cs-jump {
  background: var(--cs-white);
  border-color: var(--cs-border);
}

[data-theme="dark"] .cs-panel,
[data-theme="dark"] .cs-kpi,
[data-theme="dark"] .cs-table-wrap,
[data-theme="dark"] .cs-inbox__item,
[data-theme="dark"] .cs-month-cell,
[data-theme="dark"] .cs-alert-chip,
[data-theme="dark"] .cs-quicklinks a {
  background: var(--cs-white);
  border-color: var(--cs-border-card);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), var(--cs-shadow-1);
}

[data-theme="dark"] .cs-table tr:hover td {
  background: rgba(64, 140, 255, 0.18);
}

[data-theme="dark"] .cs-table .primary,
[data-theme="dark"] .cs-table td {
  color: var(--cs-text);
}

[data-theme="dark"] .cs-table a.primary,
[data-theme="dark"] .cs-table a.cs-table-link {
  color: #7eb6ff;
}

[data-theme="dark"] .cs-notify__item:hover {
  background: rgba(64, 140, 255, 0.18);
}

[data-theme="dark"] .cs-list-row:hover,
[data-theme="dark"] .cs-inbox__item:hover,
[data-theme="dark"] .cs-chat__library-item:hover,
[data-theme="dark"] .cs-jump__item:hover,
[data-theme="dark"] .cs-jump__item.is-active {
  background: rgba(64, 140, 255, 0.18);
  color: var(--cs-text);
}

[data-theme="dark"] .cs-panel:hover,
[data-theme="dark"] .cs-kpi:hover {
  border-color: #5B86B8;
}

[data-theme="dark"] .cs-insight {
  background: linear-gradient(180deg, #1E3F6C, #1A3358);
  border-color: #4A72A3;
}

[data-theme="dark"] .cs-company-banner {
  background: linear-gradient(135deg, #1A3A66 0%, #1E3F6C 55%, #163152 100%);
  border-color: #4A72A3;
}

[data-theme="dark"] .cs-btn--secondary {
  background: var(--cs-bg-soft);
  color: var(--cs-navy);
  border-color: var(--cs-border);
}

[data-theme="dark"] .cs-btn--secondary:hover {
  background: var(--cs-blue-soft);
  border-color: #5B86B8;
}

[data-theme="dark"] .cs-input,
[data-theme="dark"] .cs-select,
[data-theme="dark"] textarea.cs-input,
[data-theme="dark"] select.cs-input {
  background: var(--cs-bg-soft);
  color: var(--cs-text);
  border-color: var(--cs-border);
}

[data-theme="dark"] .cs-multi-pick {
  background: var(--cs-bg-soft);
  border-color: var(--cs-border);
}

[data-theme="dark"] .cs-multi-pick__item:hover,
[data-theme="dark"] .cs-multi-pick__item:has(input:checked) {
  background: rgba(64, 140, 255, 0.18);
  color: var(--cs-text);
}

[data-theme="dark"] .cs-banner,
[data-theme="dark"] .cs-banner--info {
  background: rgba(64, 140, 255, 0.16);
  border-color: #5B86B8;
  color: var(--cs-text);
}

[data-theme="dark"] .cs-roles-check:has(input:checked) {
  color: #7eb6ff;
}

[data-theme="dark"] .cs-statusbar {
  background: #0F213D;
  border-top-color: var(--cs-border);
  color: var(--cs-text-3);
}

[data-theme="dark"] .cs-notify__panel,
[data-theme="dark"] .cs-drawer__panel,
[data-theme="dark"] .cs-modal__card {
  background: var(--cs-white);
  border-color: var(--cs-border);
}

[data-theme="dark"] .cs-chat__composer,
[data-theme="dark"] .cs-chat__plus-menu,
[data-theme="dark"] .cs-chat__library,
[data-theme="dark"] .cs-chat__bubble--mine {
  background: var(--cs-bg-soft);
  border-color: var(--cs-border);
  color: var(--cs-text);
}

[data-theme="dark"] .cs-chat__bubble--them {
  background: var(--cs-elevated);
  border-color: var(--cs-border);
  color: var(--cs-text);
}

[data-theme="dark"] .cs-health__center {
  background: var(--cs-white);
  color: var(--cs-navy);
}

[data-theme="dark"] .cs-donut {
  background: conic-gradient(var(--cs-blue) calc(var(--p) * 1%), var(--cs-track) 0);
}

[data-theme="dark"] .cs-att-cal__name {
  background: var(--cs-white);
}

[data-theme="dark"] .cs-att-cal th,
[data-theme="dark"] .cs-att-cal td {
  border-bottom-color: var(--cs-border);
}

[data-theme="dark"] .cs-att-dot--present { background: rgba(22, 163, 106, 0.22); color: #6EE7B7; }
[data-theme="dark"] .cs-att-dot--late { background: rgba(242, 165, 41, 0.22); color: #FCD34D; }
[data-theme="dark"] .cs-att-dot--remote { background: var(--cs-blue-soft); color: #93C5FD; }
[data-theme="dark"] .cs-att-dot--leave { background: rgba(107, 33, 168, 0.28); color: #D8B4FE; }
[data-theme="dark"] .cs-att-dot--off { background: var(--cs-bg-soft); color: var(--cs-text-3); }
[data-theme="dark"] .cs-att-dot--missing { background: rgba(217, 74, 74, 0.22); color: #FCA5A5; }

[data-theme="dark"] .cs-month-cell--present { background: rgba(22, 163, 106, 0.18); border-color: #2F7A55; }
[data-theme="dark"] .cs-month-cell--late { background: rgba(242, 165, 41, 0.18); border-color: #9A6B20; }
[data-theme="dark"] .cs-month-cell--remote { background: var(--cs-blue-soft); border-color: #4A72A3; }
[data-theme="dark"] .cs-month-cell--leave { background: rgba(107, 33, 168, 0.2); border-color: #6B3A8C; }
[data-theme="dark"] .cs-month-cell--off { background: var(--cs-bg-soft); }
[data-theme="dark"] .cs-month-cell--missing { background: rgba(217, 74, 74, 0.18); border-color: #8B3A3A; }

[data-theme="dark"] .cs-alert-chip--high { background: rgba(242, 165, 41, 0.18); border-color: #9A6B20; color: #FCD34D; }
[data-theme="dark"] .cs-alert-chip--medium { background: var(--cs-blue-soft); border-color: #4A72A3; color: #93C5FD; }
[data-theme="dark"] .cs-prio--high,
[data-theme="dark"] .cs-prio--urgent { background: rgba(242, 165, 41, 0.18); color: #FCD34D; }
[data-theme="dark"] .cs-prio--urgent { background: rgba(217, 74, 74, 0.2); color: #FCA5A5; }

[data-theme="dark"] .cs-btn--danger {
  background: rgba(217, 74, 74, 0.18);
  color: #FCA5A5;
  border-color: #8B3A3A;
}

[data-theme="dark"] .cs-auth {
  background: var(--cs-bg);
}
[data-theme="dark"] .cs-auth__card {
  background: var(--cs-white);
  border-color: var(--cs-border);
}
[data-theme="dark"] .cs-auth__brand img {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 4px;
}
[data-theme="dark"] .cs-avatar {
  background: linear-gradient(135deg, var(--cs-blue), #0B4FCC);
  color: #fff;
}
[data-theme="dark"] .cs-flash--ok { background: rgba(22, 163, 106, 0.2); color: #6EE7B7; }
[data-theme="dark"] .cs-flash--err { background: rgba(217, 74, 74, 0.2); color: #FCA5A5; }