/* Partner Care visual cleanup v1: one calm palette, less decoration, clearer empty states. */

.app-shell[data-theme="light"] {
  --pulse-canvas: #eef4f2;
  --pulse-surface: #ffffff;
  --pulse-surface-quiet: #f2f7f5;
  --pulse-ink: #17353a;
  --pulse-muted: #53696c;
  --pulse-line: #d2e1dc;
  --pulse-orange: #e95f32;
  --pulse-orange-soft: #fff0e9;
  --pulse-teal: #11786f;
  --pulse-teal-soft: #e3f3ef;
  --pulse-plum: #68445f;
  --pulse-plum-soft: #f3ebf2;
}

/* Page headers use one simple structure. The large rings were decorative and made each page feel like a different product. */
.app-shell[data-theme="light"] :where(.page-heading, .page-heading.team-management-heading, .page-heading.schedule-page-heading) {
  min-height: 0 !important;
  margin-bottom: 22px !important;
  padding: 23px 27px !important;
  overflow: hidden;
  border: 1px solid var(--pulse-line) !important;
  border-radius: 20px !important;
  background: var(--pulse-surface) !important;
  color: var(--pulse-ink) !important;
  box-shadow: var(--pulse-shadow-soft) !important;
}
.app-shell[data-theme="light"] :where(.page-heading::before, .page-heading.team-management-heading::after, .page-heading.schedule-page-heading::after) {
  display: none !important;
  content: none !important;
}
.app-shell[data-theme="light"] .page-heading::after {
  inset: 22px auto 22px 0 !important;
  width: 4px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 5px 5px 0 !important;
  background: var(--pulse-orange) !important;
  box-shadow: none !important;
}
.app-shell[data-theme="light"] :where(.page-heading.team-management-heading, .page-heading.schedule-page-heading) :where(.eyebrow, h1, p) {
  color: var(--pulse-ink) !important;
}
.app-shell[data-theme="light"] :where(.page-heading.team-management-heading, .page-heading.schedule-page-heading) .eyebrow {
  color: var(--pulse-orange) !important;
}
.app-shell[data-theme="light"] :where(.page-heading.team-management-heading, .page-heading.schedule-page-heading) p {
  color: var(--pulse-muted) !important;
}
.app-shell[data-theme="light"] .page-heading h1 {
  letter-spacing: -0.025em;
}

/* Keep the home message useful, but remove its extra ornamental ring. */
.app-shell[data-theme="light"] .home-welcome::after {
  display: none !important;
  content: none !important;
}

/* Empty states should communicate status without taking over the page. */
.app-shell[data-theme="light"] :where(.empty-state, .empty-inline) {
  min-height: 0 !important;
  padding: 26px 18px !important;
  border: 1px dashed var(--pulse-line) !important;
  border-radius: 14px !important;
  background: var(--pulse-surface-quiet) !important;
  color: var(--pulse-muted) !important;
}
.app-shell[data-theme="light"] .empty-state {
  display: grid;
  place-content: center;
  gap: 0;
}
.app-shell[data-theme="light"] .empty-state > span {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  font-size: 18px;
}
.app-shell[data-theme="light"] .empty-state h3 {
  margin: 0 0 4px;
  color: var(--pulse-ink);
  font-size: 1rem;
}
.app-shell[data-theme="light"] .empty-state p {
  margin: 0;
  color: var(--pulse-muted);
  font-size: .86rem;
}
.app-shell[data-theme="light"] .leave-empty-state {
  padding: 26px 18px !important;
  border: 1px dashed var(--pulse-line) !important;
  border-radius: 14px !important;
  background: var(--pulse-surface-quiet) !important;
}

/* Operational tables share the same strong header and quiet row rhythm. */
.app-shell[data-theme="light"] :where(.schedule-table, .leave-calendar, .log-table) thead th {
  background: var(--pulse-ink) !important;
  color: #f8fcfb !important;
  border-color: transparent !important;
}
.app-shell[data-theme="light"] :where(.schedule-table, .leave-calendar, .log-table) tbody tr:nth-child(even) {
  background: var(--pulse-surface-quiet) !important;
}
.app-shell[data-theme="light"] :where(.schedule-table, .leave-calendar, .log-table) tbody td,
.app-shell[data-theme="light"] :where(.schedule-table, .leave-calendar, .log-table) tbody th {
  border-color: var(--pulse-line) !important;
  color: var(--pulse-ink);
}
.app-shell[data-theme="light"] :where(.schedule-table, .leave-calendar, .log-table) tbody tr:hover td {
  background: var(--pulse-teal-soft) !important;
}

/* Make secondary surfaces quieter and avoid competing pastel tints. */
.app-shell[data-theme="light"] :where(.toolbar, .employee-toolbar, .request-card, .schedule-wrap, .leave-calendar-card, .notifications) {
  background: var(--pulse-surface) !important;
}
.app-shell[data-theme="light"] :where(.status.success, .draft-pill.success) {
  background: var(--pulse-teal-soft) !important;
  color: var(--pulse-teal) !important;
}
.app-shell[data-theme="light"] :where(.status.warning, .draft-pill.warning) {
  background: var(--pulse-orange-soft) !important;
  color: #a64727 !important;
}

@media (max-width: 820px) {
  .app-shell[data-theme="light"] :where(.page-heading, .page-heading.team-management-heading, .page-heading.schedule-page-heading) {
    padding: 20px 18px !important;
  }
}

@media (max-width: 560px) {
  .app-shell[data-theme="light"] :where(.page-heading, .page-heading.team-management-heading, .page-heading.schedule-page-heading) {
    margin-bottom: 16px !important;
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
}

/* Preserve dark mode while applying the same cleanup decisions. */
.app-shell[data-theme="dark"] :where(.page-heading::before, .page-heading.team-management-heading::after, .page-heading.schedule-page-heading::after, .home-welcome::after) {
  display: none !important;
  content: none !important;
}
.app-shell[data-theme="dark"] .page-heading::after {
  inset: 22px auto 22px 0 !important;
  width: 4px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 5px 5px 0 !important;
  background: var(--orange) !important;
  box-shadow: none !important;
}

/* Specificity guard: the legacy team and schedule heroes used a second hero system. */
.app-shell[data-theme="light"] .page-heading::before,
.app-shell[data-theme="light"] .page-heading.team-management-heading::after,
.app-shell[data-theme="light"] .page-heading.schedule-page-heading::after {
  display: none !important;
  content: none !important;
}
.app-shell[data-theme="light"] .page-heading.team-management-heading,
.app-shell[data-theme="light"] .page-heading.schedule-page-heading {
  min-height: 0 !important;
  padding: 23px 27px !important;
  border: 1px solid var(--pulse-line) !important;
  border-radius: 20px !important;
  background: var(--pulse-surface) !important;
  color: var(--pulse-ink) !important;
  box-shadow: var(--pulse-shadow-soft) !important;
}
.app-shell[data-theme="light"] .page-heading.team-management-heading::after,
.app-shell[data-theme="light"] .page-heading.schedule-page-heading::after {
  display: block !important;
  inset: 22px auto 22px 0 !important;
  width: 4px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 5px 5px 0 !important;
  background: var(--pulse-orange) !important;
  box-shadow: none !important;
  content: "" !important;
}
.app-shell[data-theme="light"] .page-heading.team-management-heading :where(.eyebrow, h1, p),
.app-shell[data-theme="light"] .page-heading.schedule-page-heading :where(.eyebrow, h1, p) {
  color: var(--pulse-ink) !important;
}
.app-shell[data-theme="light"] .page-heading.team-management-heading .eyebrow,
.app-shell[data-theme="light"] .page-heading.schedule-page-heading .eyebrow {
  color: var(--pulse-orange) !important;
}
.app-shell[data-theme="light"] .page-heading.team-management-heading p,
.app-shell[data-theme="light"] .page-heading.schedule-page-heading p {
  color: var(--pulse-muted) !important;
}

/* The leave page uses a dedicated matrix class; bring it into the same table language. */
.app-shell[data-theme="light"] .leave-matrix thead th {
  background: var(--pulse-ink) !important;
  color: #f8fcfb !important;
  border-color: transparent !important;
}
.app-shell[data-theme="light"] .leave-matrix tbody tr:nth-child(even) {
  background: var(--pulse-surface-quiet) !important;
}
.app-shell[data-theme="light"] .leave-matrix tbody td,
.app-shell[data-theme="light"] .leave-matrix tbody th {
  border-color: var(--pulse-line) !important;
  color: var(--pulse-ink) !important;
}
.app-shell[data-theme="light"] .leave-matrix tbody tr:hover td {
  background: var(--pulse-teal-soft) !important;
}

/* The timeline itself is the visual anchor; the oversized corner disc adds no information. */
.app-shell[data-theme="light"] .ops-pulse-card::after,
.app-shell[data-theme="dark"] .ops-pulse-card::after {
  display: none !important;
  content: none !important;
}

/* Dark-mode specificity guard for the same heading cleanup. */
.app-shell[data-theme="dark"] .page-heading::before,
.app-shell[data-theme="dark"] .page-heading.team-management-heading::after,
.app-shell[data-theme="dark"] .page-heading.schedule-page-heading::after {
  display: none !important;
  content: none !important;
}
.app-shell[data-theme="dark"] .page-heading.team-management-heading::after,
.app-shell[data-theme="dark"] .page-heading.schedule-page-heading::after {
  display: block !important;
  inset: 22px auto 22px 0 !important;
  width: 4px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 5px 5px 0 !important;
  background: var(--orange) !important;
  box-shadow: none !important;
  content: "" !important;
}

/* Operations deck v2: turn the timeline into a compact command surface. */
.app-shell[data-theme="light"] .ops-pulse-card {
  display: grid !important;
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr) !important;
  grid-template-areas: "head metrics" "track track" !important;
  gap: 18px !important;
  margin: 8px 0 24px !important;
  padding: 22px 24px 20px !important;
  border: 1px solid #cfe1db !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #f9fcfb 0%, #edf6f3 100%) !important;
  box-shadow: 0 16px 34px rgb(23 53 58 / 9%) !important;
}
.app-shell[data-theme="light"] .ops-pulse-head {
  grid-area: head;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.app-shell[data-theme="light"] .ops-pulse-head h2 {
  margin: 3px 0 6px !important;
  font-size: clamp(26px, 2.5vw, 38px) !important;
  letter-spacing: -0.035em;
}
.app-shell[data-theme="light"] .ops-pulse-head p {
  max-width: 42ch;
  line-height: 1.7;
}
.app-shell[data-theme="light"] .ops-pulse-status {
  align-self: flex-start !important;
  margin-top: 2px;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: #e4f4ef !important;
  color: var(--pulse-teal) !important;
  font-size: 11px !important;
}
.app-shell[data-theme="light"] .ops-pulse-status.is-attention {
  background: var(--pulse-orange-soft) !important;
  color: #a64b2c !important;
}
.app-shell[data-theme="light"] .ops-pulse-metrics {
  grid-area: metrics;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-content: stretch;
}
.app-shell[data-theme="light"] .ops-pulse-metric {
  min-height: 104px !important;
  padding: 15px 16px !important;
  border: 1px solid #d4e3de !important;
  border-top: 3px solid var(--pulse-teal) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgb(23 53 58 / 5%);
}
.app-shell[data-theme="light"] .ops-pulse-metric:nth-child(2) { border-top-color: var(--pulse-plum) !important; }
.app-shell[data-theme="light"] .ops-pulse-metric:nth-child(3) { border-top-color: var(--pulse-orange) !important; }
.app-shell[data-theme="light"] .ops-pulse-metric:nth-child(4) { border-top-color: #bd5360 !important; }
.app-shell[data-theme="light"] .ops-pulse-metric small { font-size: 11px !important; }
.app-shell[data-theme="light"] .ops-pulse-metric strong { font-size: 28px !important; }
.app-shell[data-theme="light"] .ops-pulse-track {
  grid-area: track;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid #d4e3de !important;
  border-radius: 16px !important;
  background: rgb(255 255 255 / 66%) !important;
}
.app-shell[data-theme="light"] .ops-pulse-track::before { display: none !important; content: none !important; }
.app-shell[data-theme="light"] .ops-pulse-node {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5px !important;
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid #e0ebe7;
  border-radius: 12px;
  background: #fff;
  color: var(--pulse-muted) !important;
  font-size: 10px !important;
}
.app-shell[data-theme="light"] .ops-pulse-node i {
  width: 9px !important;
  height: 9px !important;
  border: 0 !important;
  background: var(--pulse-teal) !important;
  box-shadow: 0 0 0 4px var(--pulse-teal-soft) !important;
}
.app-shell[data-theme="light"] .ops-pulse-node:first-child i,
.app-shell[data-theme="light"] .ops-pulse-node:last-child i {
  background: var(--pulse-orange) !important;
  box-shadow: 0 0 0 4px var(--pulse-orange-soft) !important;
}
.app-shell[data-theme="light"] .ops-pulse-node b { font-family: var(--pulse-data); font-size: 11px; }
.app-shell[data-theme="light"] .ops-pulse-now {
  top: -11px !important;
  inset-inline-start: 50% !important;
  transform: translateX(50%);
  padding: 4px 9px !important;
  border-radius: 999px;
  background: var(--pulse-orange) !important;
  color: #fff !important;
  font-size: 9px !important;
}
.app-shell[data-theme="light"] .ops-pulse-now::after { display: none !important; content: none !important; }

@media (max-width: 820px) {
  .app-shell[data-theme="light"] .ops-pulse-card {
    grid-template-columns: 1fr !important;
    grid-template-areas: "head" "metrics" "track" !important;
    gap: 14px !important;
    padding: 20px 16px !important;
  }
}

/* Same structure in dark mode, using the existing dark semantic palette. */
.app-shell[data-theme="dark"] .ops-pulse-card {
  display: grid !important;
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr) !important;
  grid-template-areas: "head metrics" "track track" !important;
  gap: 18px !important;
  padding: 22px 24px 20px !important;
  background: #142427 !important;
}
.app-shell[data-theme="dark"] .ops-pulse-head { grid-area: head; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 12px; }
.app-shell[data-theme="dark"] .ops-pulse-metrics { grid-area: metrics; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.app-shell[data-theme="dark"] .ops-pulse-metric { min-height: 104px !important; background: #1b3033 !important; border-radius: 16px !important; }
.app-shell[data-theme="dark"] .ops-pulse-track { grid-area: track; margin: 0 !important; padding: 8px !important; border: 1px solid #315155 !important; border-radius: 16px; background: rgb(13 28 31 / 62%); }
.app-shell[data-theme="dark"] .ops-pulse-track::before { display: none !important; content: none !important; }
.app-shell[data-theme="dark"] .ops-pulse-node { padding: 8px 4px; border: 1px solid #315155; border-radius: 12px; background: #1b3033; }
.app-shell[data-theme="dark"] .ops-pulse-now::after { display: none !important; content: none !important; }

@media (max-width: 820px) {
  .app-shell[data-theme="dark"] .ops-pulse-card { grid-template-columns: 1fr !important; grid-template-areas: "head" "metrics" "track" !important; gap: 14px !important; padding: 20px 16px !important; }
}

/* Operations status v4: title plus four metrics, nothing else. */
.app-shell[data-theme="light"] .ops-pulse-card,
.app-shell[data-theme="dark"] .ops-pulse-card {
  grid-template-columns: 1fr !important;
  grid-template-areas: "head" "metrics" !important;
  gap: 12px !important;
  padding: 18px 22px !important;
  border-radius: 20px !important;
}
.app-shell[data-theme="light"] .ops-pulse-head,
.app-shell[data-theme="dark"] .ops-pulse-head {
  grid-area: head;
  display: block !important;
  min-height: 0 !important;
}
.app-shell[data-theme="light"] .ops-pulse-head .eyebrow,
.app-shell[data-theme="light"] .ops-pulse-head p,
.app-shell[data-theme="light"] .ops-pulse-head .ops-pulse-status,
.app-shell[data-theme="dark"] .ops-pulse-head .eyebrow,
.app-shell[data-theme="dark"] .ops-pulse-head p,
.app-shell[data-theme="dark"] .ops-pulse-head .ops-pulse-status {
  display: none !important;
}
.app-shell[data-theme="light"] .ops-pulse-head h2,
.app-shell[data-theme="dark"] .ops-pulse-head h2 {
  margin: 0 !important;
  font-size: 23px !important;
  letter-spacing: -0.02em;
}
.app-shell[data-theme="light"] .ops-pulse-metrics,
.app-shell[data-theme="dark"] .ops-pulse-metrics {
  grid-area: metrics;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.app-shell[data-theme="light"] .ops-pulse-metric,
.app-shell[data-theme="dark"] .ops-pulse-metric {
  min-height: 88px !important;
  padding: 13px 14px !important;
  border-radius: 14px !important;
}
.app-shell[data-theme="light"] .ops-pulse-metric strong,
.app-shell[data-theme="dark"] .ops-pulse-metric strong {
  font-size: 25px !important;
}
.app-shell[data-theme="light"] .ops-pulse-track,
.app-shell[data-theme="dark"] .ops-pulse-track {
  display: none !important;
}
@media (max-width: 820px) {
  .app-shell[data-theme="light"] .ops-pulse-metrics,
  .app-shell[data-theme="dark"] .ops-pulse-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* Logo palette v5: orange + plum, with green success tones removed from the visual system. */
.app-shell[data-theme="light"] {
  --pc-rail: #421943;
  --pc-rail-2: #2c112d;
  --pc-rail-ink: #fffaf8;
  --pc-rail-muted: #dfc9df;
  --pc-nav-active: #f8e9f2;
  --pc-nav-active-ink: #421943;
  --canvas: #fbf7fa;
  --surface: #ffffff;
  --surface-2: #f6edf6;
  --surface-3: #eadceb;
  --ink: #2b1b2e;
  --muted: #6d5d6f;
  --line: #e4d8e4;
  --line-strong: #c4afc4;
  --purple: #421943;
  --purple-2: #30102f;
  --purple-soft: #f1e7f2;
  --orange: #f5662f;
  --orange-text: #a8431f;
  --orange-soft: #fff0e9;
  --green: #5a2a63;
  --green-soft: #f1e7f2;
  --blue: #6b3a6c;
  --blue-soft: #f1e7f2;
  --pc-highlight-bg: linear-gradient(135deg, #421943 0%, #6b3a6c 64%, #f5662f 100%);
  --pcm-info: #6b3a6c;
  --pulse-canvas: #fbf7fa;
  --pulse-surface: #ffffff;
  --pulse-surface-quiet: #f6edf6;
  --pulse-ink: #2b1b2e;
  --pulse-muted: #6d5d6f;
  --pulse-line: #e4d8e4;
  --pulse-orange: #f5662f;
  --pulse-orange-soft: #fff0e9;
  --pulse-teal: #5a2a63;
  --pulse-teal-soft: #f1e7f2;
  --pulse-plum: #6b3a6c;
  --pulse-plum-soft: #f1e7f2;
}

.app-shell[data-theme="dark"] {
  --pc-rail: #241129;
  --pc-rail-2: #140a18;
  --pc-rail-ink: #fffaf8;
  --pc-rail-muted: #d4bfd5;
  --pc-nav-active: #3b2140;
  --pc-nav-active-ink: #ffd3bf;
  --canvas: #120d14;
  --surface: #1d141f;
  --surface-2: #281b2b;
  --surface-3: #39253c;
  --ink: #fffaf8;
  --muted: #cbb9cc;
  --line: #49354b;
  --line-strong: #665068;
  --purple: #d7a7d7;
  --purple-2: #f0d7ef;
  --purple-soft: #3b2140;
  --orange: #ff9b72;
  --orange-text: #ffd3bf;
  --orange-soft: #48291f;
  --green: #c78bd1;
  --green-soft: #3b2140;
  --blue: #d7a7d7;
  --blue-soft: #3b2140;
  --pc-highlight-bg: linear-gradient(135deg, #6b3a6c 0%, #421943 68%, #f5662f 100%);
  --pcm-info: #d7a7d7;
  --pulse-canvas: #120d14;
  --pulse-surface: #1d141f;
  --pulse-surface-quiet: #281b2b;
  --pulse-ink: #fffaf8;
  --pulse-muted: #cbb9cc;
  --pulse-line: #49354b;
  --pulse-orange: #ff9b72;
  --pulse-orange-soft: #48291f;
  --pulse-teal: #c78bd1;
  --pulse-teal-soft: #3b2140;
  --pulse-plum: #e0b2df;
  --pulse-plum-soft: #3b2140;
}

/* Keep the semantic success state, but express it with the logo's plum family. */
.app-shell[data-theme="light"] :where(.status.success, .draft-pill.success, .toggle.on, .availability.ready, .import-result.ready, .objection-control.open) {
  background: var(--green-soft) !important;
  border-color: color-mix(in srgb, var(--green) 30%, var(--line)) !important;
  color: var(--green) !important;
}
.app-shell[data-theme="light"] .objection-control.open { background: var(--green-soft) !important; }
.app-shell[data-theme="light"] .team-management-heading,
.app-shell[data-theme="dark"] .team-management-heading {
  background: linear-gradient(120deg, #421943 0%, #6b3a6c 64%, #f5662f 100%) !important;
}
.app-shell[data-theme="light"] .team-management-heading :where(.eyebrow, h1, p),
.app-shell[data-theme="dark"] .team-management-heading :where(.eyebrow, h1, p) { color: #fffaf8 !important; }

/* Use lining/tabular numerals globally; the language bridge below converts Arabic-Indic glyphs. */
.app-shell,
.app-shell :where(button, input, select, textarea, table, th, td, small, strong, span, em, b) {
  font-variant-numeric: lining-nums tabular-nums;
}


/* Logo surface refinement: remove the last mint-tinted operational surfaces. */
.app-shell[data-theme="light"] .ops-pulse-card {
  border-color: var(--pulse-line) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8eff7 100%) !important;
  box-shadow: 0 16px 34px rgb(66 25 67 / 9%) !important;
}
.app-shell[data-theme="light"] .ops-pulse-status {
  background: var(--pulse-teal-soft) !important;
  color: var(--pulse-teal) !important;
}
.app-shell[data-theme="light"] .ops-pulse-metric,
.app-shell[data-theme="light"] .ops-pulse-track,
.app-shell[data-theme="light"] .ops-pulse-node {
  border-color: var(--pulse-line) !important;
}
.app-shell[data-theme="light"] .ops-pulse-track {
  background: rgb(255 255 255 / 72%) !important;
}
.app-shell[data-theme="light"] .ops-pulse-node {
  background: var(--pulse-surface) !important;
}


/* Dark-mode contrast refinement: keep operational surfaces plum/charcoal, never teal. */
.app-shell[data-theme="dark"] .ops-pulse-card {
  border-color: #49354b !important;
  background: linear-gradient(135deg, #1d141f 0%, #281b2b 100%) !important;
  box-shadow: 0 18px 38px rgb(0 0 0 / 30%) !important;
}
.app-shell[data-theme="dark"] .ops-pulse-metric {
  border-color: #49354b !important;
  background: #211722 !important;
}
.app-shell[data-theme="dark"] .ops-pulse-track {
  border-color: #49354b !important;
  background: rgb(20 12 24 / 74%) !important;
}
.app-shell[data-theme="dark"] .ops-pulse-node {
  border-color: #49354b !important;
  background: #211722 !important;
}


/* Contrast and action clarity v7 */
/* Keep the bright orange as a brand accent, and use a darker action token for text-bearing controls. */
.app-shell[data-theme="light"] {
  --orange-action: #a8431f;
}
.app-shell[data-theme="dark"] {
  --orange-action: #a8431f;
}

/* Small orange labels must remain readable on white surfaces. */
.app-shell[data-theme="light"] :where(
  .home-welcome .eyebrow,
  .ops-pulse-head .eyebrow,
  .daily-inspiration-label,
  .employee-profile-page-head .eyebrow,
  .page-heading:not(.team-management-heading):not(.schedule-page-heading) .eyebrow,
  .schedule-team-heading:not(.team-management-heading) .eyebrow
) {
  color: var(--orange-text) !important;
}

/* Action buttons use the accessible orange; decorative borders and the logo retain the brighter accent. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(
  .primary-button,
  .activation-controls button,
  .ops-pulse-now,
  .report-download .primary-button
) {
  background: var(--orange-action) !important;
  border-color: var(--orange-action) !important;
  color: #fff !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(
  .primary-button:hover:not(:disabled),
  .activation-controls button:hover:not(:disabled),
  .ops-pulse-now:hover:not(:disabled)
) {
  background: #8f371c !important;
  border-color: #8f371c !important;
}

/* Plum badges and avatars keep white glyphs legible in both themes. */
.app-shell[data-theme="light"] :where(
  .avatar,
  .daily-inspiration-mark,
  .bell > span,
  .sidebar nav button > em,
  .mobile-primary-nav button > em,
  .mini-brand
) {
  background: linear-gradient(135deg, #421943 0%, #6b3a6c 100%) !important;
  color: #fff !important;
}
.app-shell[data-theme="dark"] :where(
  .avatar,
  .daily-inspiration-mark,
  .bell > span,
  .sidebar nav button > em,
  .mobile-primary-nav button > em,
  .mini-brand
) {
  background: #6b3a6c !important;
  color: #fff !important;
}

/* Icon-only orange strokes and headline numbers use the same readable token. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(.bell, .top-actions .bell) {
  color: var(--orange-action) !important;
}
.app-shell[data-theme="light"] :where(.home-welcome .date-chip strong, .ops-pulse-metric.attention strong) {
  color: var(--orange-text) !important;
}


/* Contrast specificity patch v7b */
/* These selectors intentionally carry the component context so they win over legacy !important rules. */
.app-shell[data-theme="light"] .daily-inspiration .daily-inspiration-label {
  color: var(--orange-text) !important;
}
.app-shell[data-theme="light"] .home-welcome .date-chip strong {
  color: var(--orange-text) !important;
}
.app-shell[data-theme="light"] .ops-pulse-metric.attention strong {
  color: var(--orange-text) !important;
}
.app-shell[data-theme="dark"] .daily-inspiration .daily-inspiration-label {
  color: var(--orange-text) !important;
}
.app-shell[data-theme="dark"] .home-welcome .date-chip strong,
.app-shell[data-theme="dark"] .ops-pulse-metric.attention strong {
  color: var(--orange-text) !important;
}
.app-shell[data-theme="light"] .primary-button,
.app-shell[data-theme="light"] .activation-controls button,
.app-shell[data-theme="light"] .ops-pulse-now,
.app-shell[data-theme="dark"] .primary-button,
.app-shell[data-theme="dark"] .activation-controls button,
.app-shell[data-theme="dark"] .ops-pulse-now {
  background: var(--orange-action) !important;
  border-color: var(--orange-action) !important;
  color: #fff !important;
}


/* Contrast schedule labels patch v7c */
.app-shell[data-theme="light"] .schedule-page-heading .eyebrow,
.app-shell[data-theme="light"] .schedule-week-strip-head .eyebrow,
.app-shell[data-theme="light"] .schedule-matrix-header .eyebrow {
  color: var(--orange-text) !important;
}
.app-shell[data-theme="dark"] .schedule-page-heading .eyebrow,
.app-shell[data-theme="dark"] .schedule-week-strip-head .eyebrow,
.app-shell[data-theme="dark"] .schedule-matrix-header .eyebrow {
  color: var(--orange-text) !important;
}


/* Contrast schedule heading specificity patch v7d */
.app-shell[data-theme="light"] .page-heading.schedule-page-heading .eyebrow {
  color: var(--orange-text) !important;
}
.app-shell[data-theme="dark"] .page-heading.schedule-page-heading .eyebrow {
  color: var(--orange-text) !important;
}


/* Dark palette unification v8 */
/* The dark rail and command-center heroes use the same plum family as the logo. */
.app-shell[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #241129 0%, #140a18 100%) !important;
  border-color: #49354b !important;
}
.app-shell[data-theme="dark"] .page-heading.team-management-heading,
.app-shell[data-theme="dark"] .page-heading.schedule-page-heading {
  background: linear-gradient(118deg, #211523 0%, #3b2140 58%, #5f3764 100%) !important;
  border: 1px solid #49354b !important;
  box-shadow: 0 20px 46px rgb(20 10 24 / 34%) !important;
}
.app-shell[data-theme="dark"] .page-heading.team-management-heading p,
.app-shell[data-theme="dark"] .page-heading.schedule-page-heading p {
  color: #cbb9cc !important;
}
.app-shell[data-theme="dark"] .page-heading.team-management-heading::after,
.app-shell[data-theme="dark"] .page-heading.schedule-page-heading::after {
  border-color: rgb(255 255 255 / 16%) !important;
  box-shadow: 0 0 0 28px rgb(255 255 255 / 4%), 0 0 0 56px rgb(255 255 255 / 3%) !important;
}

/* Replace the last decorative teal stop with a plum stop. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .daily-inspiration::before {
  background: linear-gradient(180deg, var(--orange), var(--purple)) !important;
}


/* Dark active-tab contrast patch v9 */
/* In dark mode --pulse-ink is intentionally light text, so active tabs need their own plum surface. */
.app-shell[data-theme="dark"] .schedule-control-bar .team-tabs button.active {
  background: #6b3a6c !important;
  border-color: #d7a7d7 !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgb(20 10 24 / 28%) !important;
}
.app-shell[data-theme="dark"] .schedule-control-bar .team-tabs button.active .team-tab-mark {
  background: rgb(255 255 255 / 16%) !important;
  color: #fff !important;
}


/* Account menu clarity v10 */
/* Keep each account menu anchored to its trigger instead of the shared 370px popover rule. */
.app-shell .account-anchor,
.app-shell .sidebar-account-anchor {
  position: relative;
}
.app-shell .account-anchor > .account-menu {
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  width: 190px;
  max-width: calc(100vw - 32px);
  margin: 0;
  display: grid;
  gap: 4px;
  padding: 7px;
  direction: rtl;
}
.app-shell .sidebar-account-menu {
  top: auto;
  bottom: calc(100% + 10px);
  left: auto;
  right: 0;
  width: 220px;
  max-width: calc(100vw - 32px);
  margin: 0;
  display: grid;
  gap: 4px;
  padding: 7px;
  direction: rtl;
}
.app-shell .account-menu button {
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  text-align: right;
  white-space: nowrap;
}
.app-shell .account-menu button:hover,
.app-shell .account-menu button:focus-visible {
  background: var(--surface-2);
  outline: 2px solid color-mix(in srgb, var(--orange-text) 42%, transparent);
  outline-offset: 1px;
}


/* Operations Pulse role and contrast refinement v12 */
.app-shell .topbar-account-anchor { position: relative; }
@media (min-width: 761px) { .app-shell .topbar-account-anchor { display: none !important; } }
.app-shell .manager-home-summary { background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, var(--purple)), color-mix(in srgb, var(--surface) 92%, var(--orange))); border-color: color-mix(in srgb, var(--purple) 30%, var(--line)); }
.app-shell .manager-home-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.app-shell .manager-home-summary-grid button { display: grid; gap: 4px; min-height: 86px; padding: 14px; border: 1px solid color-mix(in srgb, var(--purple) 22%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 86%, var(--purple)); color: var(--ink); text-align: start; font: inherit; cursor: pointer; }
.app-shell .manager-home-summary-grid button:hover, .app-shell .manager-home-summary-grid button:focus-visible { border-color: var(--orange-action); outline: 2px solid color-mix(in srgb, var(--orange-action) 32%, transparent); outline-offset: 2px; }
.app-shell .manager-home-summary-grid strong { color: var(--orange-text); font-size: 25px; line-height: 1; }
.app-shell .manager-home-summary-grid span { color: var(--muted); font-size: 12px; font-weight: 750; }
.app-shell .manager-home-summary-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.app-shell .swap-empty-state { padding: 11px 13px; border: 1px dashed color-mix(in srgb, var(--orange-action) 55%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--orange-soft) 65%, var(--surface)); color: var(--muted); font-size: 12px; line-height: 1.6; }
.app-shell .flow-preview i { color: var(--orange-text); font-style: normal; font-weight: 900; }
.app-shell .schedule-week-strip { border-color: color-mix(in srgb, var(--purple) 25%, var(--line)); }
.app-shell .schedule-day-card { background: color-mix(in srgb, var(--surface) 94%, var(--purple)); border-color: color-mix(in srgb, var(--purple) 24%, var(--line)); }
.app-shell .schedule-day-card-head span, .app-shell .schedule-day-card-date strong, .app-shell .schedule-day-card-stat strong { color: var(--ink) !important; }
.app-shell .schedule-day-card-date small, .app-shell .schedule-day-card-stat small { color: var(--muted) !important; }
.app-shell .schedule-day-card.is-today { background: color-mix(in srgb, var(--orange-soft) 72%, var(--surface)); border-color: var(--orange-action); box-shadow: inset 0 -3px var(--orange-action), 0 10px 24px rgb(255 98 50 / 10%); }
.app-shell .schedule-day-card.is-today .schedule-day-card-head span, .app-shell .schedule-day-card.is-today .schedule-day-card-date strong { color: var(--orange-text) !important; }
.app-shell .schedule-table thead th { background: color-mix(in srgb, var(--purple) 12%, var(--surface)); color: var(--ink); }
.app-shell .schedule-table thead th.today-column { background: color-mix(in srgb, var(--orange-soft) 75%, var(--surface)) !important; box-shadow: inset 0 -4px var(--orange-action); }
.app-shell .schedule-day-header small, .app-shell .schedule-day-header em { color: var(--muted) !important; }
.app-shell .schedule-day-header strong { color: var(--orange-text) !important; }
.app-shell .schedule-table tbody th, .app-shell .employee-cell strong { color: var(--ink) !important; }
.app-shell .schedule-table tbody th { background: color-mix(in srgb, var(--purple) 7%, var(--surface)); }
.app-shell[data-theme="dark"] .schedule-day-card { background: #211722; border-color: #5d3c61; }
.app-shell[data-theme="dark"] .schedule-day-card.is-today { background: #3a2421; border-color: #ff7047; }
.app-shell[data-theme="dark"] .schedule-table thead th { background: #2c1d30; }
.app-shell[data-theme="dark"] .schedule-table thead th.today-column { background: #3a2421 !important; }
.app-shell .team-management-heading { background: linear-gradient(118deg, color-mix(in srgb, var(--purple) 84%, #1c1020), color-mix(in srgb, var(--orange) 24%, var(--purple)) 58%, color-mix(in srgb, #b56888 26%, var(--purple))) !important; }
.app-shell .team-overview-strip article { background: color-mix(in srgb, var(--surface) 91%, var(--purple)); border-color: color-mix(in srgb, var(--purple) 22%, var(--line)); }
.app-shell .team-overview-strip article.needs-attention { background: color-mix(in srgb, var(--orange-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--orange-action) 40%, var(--line)); }
@media (max-width: 760px) { .app-shell .manager-home-summary-grid { grid-template-columns: 1fr; } .app-shell .manager-home-summary-footer { align-items: flex-start; flex-direction: column; } }


/* Operations Pulse team card alignment v13 */
.app-shell .team-roster-grid {
  align-items: stretch;
}
.app-shell .team-roster-card .team-roster-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: center;
  gap: 15px;
  min-height: 122px !important;
  height: 122px;
  padding: 18px 20px !important;
}
.app-shell .team-roster-card .team-roster-head > div {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 5px;
}
.app-shell .team-roster-card .team-roster-head .team-roster-kicker {
  display: block;
  overflow: hidden;
  color: var(--pulse-teal) !important;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell .team-roster-card .team-roster-head h2 {
  display: -webkit-box;
  min-width: 0;
  min-height: 2.45em;
  max-height: 2.45em;
  margin: 0 !important;
  overflow: hidden;
  color: var(--pulse-ink) !important;
  font-size: clamp(18px, 1.65vw, 22px) !important;
  line-height: 1.22 !important;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-align: start;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.app-shell .team-roster-card .team-roster-head > strong {
  display: grid;
  width: 58px;
  height: 58px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  margin: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pulse-plum) 94%, var(--pulse-surface)) !important;
  color: #fff !important;
  font-size: 25px;
  line-height: 1;
}
.app-shell .team-roster-card .team-roster-head > strong small {
  margin: 0 !important;
  color: rgb(255 255 255 / 74%) !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
.app-shell[data-theme=dark] .team-roster-card .team-roster-head > strong {
  background: color-mix(in srgb, var(--pulse-plum) 78%, #120d14) !important;
}
@media (max-width: 560px) {
  .app-shell .team-roster-card .team-roster-head {
    grid-template-columns: minmax(0, 1fr) 56px;
    min-height: 112px !important;
    height: 112px;
    gap: 12px;
    padding: 16px !important;
  }
  .app-shell .team-roster-card .team-roster-head > strong {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    font-size: 22px;
  }
  .app-shell .team-roster-card .team-roster-head h2 {
    font-size: 18px !important;
  }
}


/* Employee profile foundation v14 */
.app-shell .employee-profile-page {
  width: min(1180px, 100%);
  max-width: 1180px;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 30px) !important;
}
.app-shell .employee-profile-page-head {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center;
  gap: 18px;
  min-height: 126px;
  margin: 0;
  padding: 22px 24px !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pulse-plum) 24%, var(--pulse-line)) !important;
  border-radius: 22px !important;
  background: linear-gradient(126deg, var(--pulse-surface), color-mix(in srgb, var(--pulse-plum-soft) 62%, var(--pulse-surface)) 66%, color-mix(in srgb, var(--pulse-orange-soft) 52%, var(--pulse-surface))) !important;
  box-shadow: var(--pulse-shadow-soft);
}
.app-shell .employee-profile-page-head::before {
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--pulse-orange), var(--pulse-plum));
  content: "";
}
.app-shell .employee-profile-page-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.app-shell .employee-profile-page-head .eyebrow {
  color: var(--pulse-orange) !important;
  font-size: 10px;
  letter-spacing: .1em;
}
.app-shell .employee-profile-page-head h1 {
  margin: 0 !important;
  color: var(--pulse-ink) !important;
  font: 850 clamp(26px, 3vw, 36px)/1.15 var(--pulse-display);
  letter-spacing: -.03em;
}
.app-shell .employee-profile-page-head p {
  margin: 2px 0 0;
  color: var(--pulse-muted) !important;
  font-size: 12px;
  line-height: 1.6;
}
.app-shell .employee-profile-page-head .secondary {
  position: relative;
  z-index: 1;
  min-width: 72px;
  min-height: 42px;
  border-color: color-mix(in srgb, var(--pulse-plum) 30%, var(--pulse-line)) !important;
  border-radius: 12px;
  background: var(--pulse-surface) !important;
  color: var(--pulse-plum) !important;
  font-weight: 850;
}
.app-shell .employee-profile-page-head .secondary:hover {
  border-color: var(--pulse-orange) !important;
  color: var(--pulse-orange) !important;
}
.app-shell .employee-profile-page .profile-overview {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 18px;
  min-height: 122px;
  margin: 0;
  padding: 20px 22px !important;
  border: 1px solid var(--pulse-line) !important;
  border-radius: 20px !important;
  background: linear-gradient(120deg, var(--pulse-surface), color-mix(in srgb, var(--pulse-teal-soft) 34%, var(--pulse-surface))) !important;
  box-shadow: var(--pulse-shadow-soft);
}
.app-shell .employee-profile-page .profile-overview > .avatar.large {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 4px solid color-mix(in srgb, var(--pulse-orange) 34%, var(--pulse-surface));
  border-radius: 22px;
  background: linear-gradient(145deg, var(--pulse-plum), color-mix(in srgb, var(--pulse-plum) 72%, var(--pulse-orange)));
  color: #fff;
  font: 850 20px/1 var(--pulse-data);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--pulse-plum) 22%, transparent);
}
.app-shell .employee-profile-page .profile-contact {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell .employee-profile-page .profile-contact small {
  color: var(--pulse-muted) !important;
  font-size: 10px;
  font-weight: 850;
}
.app-shell .employee-profile-page .profile-contact strong {
  min-width: 0;
  overflow: hidden;
  color: var(--pulse-ink) !important;
  font: 850 16px/1.35 var(--pulse-data);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell .employee-profile-page .profile-contact span {
  color: var(--pulse-muted) !important;
  font-size: 11px;
}
.app-shell .employee-profile-page .profile-overview > .status {
  justify-self: start;
  min-width: 92px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--pulse-teal) 32%, var(--pulse-line));
  border-radius: 999px;
  background: var(--pulse-teal-soft);
  color: var(--pulse-teal) !important;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.app-shell .employee-profile-page .profile-primary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 18px !important;
  border: 1px solid color-mix(in srgb, var(--pulse-orange) 34%, var(--pulse-line)) !important;
  border-inline-start: 4px solid var(--pulse-orange) !important;
  border-radius: 16px !important;
  background: var(--pulse-orange-soft) !important;
  box-shadow: none;
}
.app-shell .employee-profile-page .profile-primary-actions small {
  color: var(--pulse-muted) !important;
  font-size: 11px;
  line-height: 1.6;
}
.app-shell .employee-profile-page .profile-primary-actions .primary-button {
  flex: 0 0 auto;
  min-height: 42px;
  border-radius: 12px;
  background: var(--pulse-orange) !important;
  color: #fff !important;
  font-weight: 850;
}
.app-shell .employee-profile-page .profile-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 5px !important;
  border: 1px solid var(--pulse-line) !important;
  border-radius: 14px !important;
  background: var(--pulse-surface-quiet) !important;
  box-shadow: none;
}
.app-shell .employee-profile-page .profile-tabs button {
  min-height: 42px;
  border-radius: 10px;
  color: var(--pulse-muted) !important;
  font-size: 12px;
  font-weight: 850;
}
.app-shell .employee-profile-page .profile-tabs button:hover {
  background: var(--pulse-teal-soft);
  color: var(--pulse-teal) !important;
}
.app-shell .employee-profile-page .profile-tabs button.active {
  background: var(--pulse-plum) !important;
  color: #fff !important;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--pulse-plum) 22%, transparent);
}
.app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid var(--pulse-line) !important;
  border-radius: 18px !important;
  background: var(--pulse-surface) !important;
  box-shadow: var(--pulse-shadow-soft);
}
.app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) > header,
.app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) > .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--pulse-line);
  background: color-mix(in srgb, var(--pulse-plum-soft) 42%, var(--pulse-surface));
}
.app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) > header h3,
.app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) > .card-head h3 {
  margin: 0;
  color: var(--pulse-ink) !important;
  font: 850 15px/1.35 var(--pulse-display);
}
.app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) > header p,
.app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) > .card-head small {
  margin: 4px 0 0;
  color: var(--pulse-muted) !important;
  font-size: 10px;
  line-height: 1.55;
}
.app-shell .employee-profile-page .profile-data-grid,
.app-shell .employee-profile-page .profile-metrics {
  gap: 10px;
  padding: 16px 18px 18px;
}
.app-shell .employee-profile-page .profile-data-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.app-shell .employee-profile-page .profile-data-grid > *,
.app-shell .employee-profile-page .profile-metrics > * {
  min-height: 84px;
  padding: 14px;
  border: 1px solid var(--pulse-line);
  border-radius: 13px;
  background: var(--pulse-surface-quiet);
}
.app-shell .employee-profile-page .profile-data-grid small,
.app-shell .employee-profile-page .profile-metrics small {
  color: var(--pulse-muted) !important;
  font-size: 10px;
  font-weight: 850;
}
.app-shell .employee-profile-page .profile-data-grid strong {
  display: block;
  margin-top: 9px;
  color: var(--pulse-ink) !important;
  font: 850 17px/1.35 var(--pulse-data);
}
.app-shell .employee-profile-page .profile-metrics strong {
  display: block;
  margin-top: 10px;
  color: var(--pulse-orange) !important;
  font: 850 28px/1 var(--pulse-data);
}
.app-shell .employee-profile-page .profile-leave-history > header {
  align-items: center;
}
.app-shell .employee-profile-page .profile-leave-history > header .status {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
}
.app-shell .employee-profile-page .profile-leave-history > :where(.profile-leave-periods, .empty-inline) {
  margin: 16px 18px 18px;
}
.app-shell .employee-profile-page .profile-leave-history .empty-inline {
  padding: 28px 16px;
  border: 1px dashed var(--pulse-line);
  border-radius: 13px;
  background: var(--pulse-surface-quiet);
  color: var(--pulse-muted);
  text-align: center;
}
@media (max-width: 760px) {
  .app-shell .employee-profile-page-head {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    min-height: 0;
  }
  .app-shell .employee-profile-page-head .secondary {
    justify-self: start;
    grid-row: 2;
  }
  .app-shell .employee-profile-page .profile-overview {
    grid-template-columns: 66px minmax(0, 1fr) !important;
  }
  .app-shell .employee-profile-page .profile-overview > .status {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .app-shell .employee-profile-page .profile-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .app-shell .employee-profile-page .profile-primary-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .app-shell .employee-profile-page .profile-primary-actions .primary-button {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .app-shell .employee-profile-page {
    padding: 14px 10px !important;
  }
  .app-shell .employee-profile-page .profile-overview {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px;
    padding: 16px !important;
  }
  .app-shell .employee-profile-page .profile-overview > .avatar.large {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 16px;
  }
  .app-shell .employee-profile-page .profile-contact strong {
    font-size: 14px;
  }
  .app-shell .employee-profile-page .profile-data-grid {
    grid-template-columns: 1fr !important;
  }
  .app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) > header,
  .app-shell .employee-profile-page :where(.profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) > .card-head {
    flex-direction: column;
  }
}

/* Visual refresh v15: Lagoon mix, readable schedules, and a calmer profile hierarchy. */
.app-shell[data-theme="light"] {
  --schedule-head-bg: #321d38;
  --schedule-head-ink: #fffafc;
  --schedule-today-bg: #fff0e8;
  --schedule-today-ink: #572541;
  --schedule-row: #ffffff;
  --schedule-row-alt: #f7f2f8;
}
.app-shell[data-theme="dark"] {
  --schedule-head-bg: #302035;
  --schedule-head-ink: #fffafc;
  --schedule-today-bg: #44292a;
  --schedule-today-ink: #ffe3d4;
  --schedule-row: #182328;
  --schedule-row-alt: #202f35;
}
.app-shell[data-theme="ocean"] {
  --canvas: #e7eff0;
  --surface: #fbfdfc;
  --surface-2: #dfeaec;
  --surface-3: #cbdcdf;
  --ink: #173039;
  --muted: #4d6269;
  --line: #b4c8cd;
  --line-strong: #809ca5;
  --purple: #5b3a6f;
  --purple-2: #432850;
  --purple-soft: #e8ddf0;
  --orange: #eb6b42;
  --orange-text: #8e351d;
  --orange-soft: #fbe2d8;
  --green: #237b6b;
  --green-soft: #d7eee7;
  --red: #b54858;
  --red-soft: #f6dce1;
  --warning: #7e5d1d;
  --warning-soft: #f4eacb;
  --blue: #2e7180;
  --blue-soft: #d9edf0;
  --schedule-head-bg: #2f2a45;
  --schedule-head-ink: #fffafc;
  --schedule-today-bg: #fff1e8;
  --schedule-today-ink: #51233e;
  --schedule-row: #fbfdfc;
  --schedule-row-alt: #edf4f3;
  --pc-highlight-bg: linear-gradient(135deg, #4b315f 0%, #275d65 62%, #227969 100%);
  color-scheme: light;
  background:
    radial-gradient(circle at 88% 0%, rgb(91 58 111 / 12%), transparent 33rem),
    radial-gradient(circle at 7% 96%, rgb(35 123 107 / 10%), transparent 28rem),
    var(--canvas);
}
.app-shell[data-theme="ocean"] .sidebar {
  background: linear-gradient(160deg, #173b45 0%, #34495a 54%, #4a3d61 100%);
  border-color: #6e8991;
  box-shadow: 14px 0 44px rgb(24 57 65 / 22%);
}
.app-shell[data-theme="ocean"] .sidebar :where(h1, strong) { color: #f8fcfb; }
.app-shell[data-theme="ocean"] .sidebar :where(p, small, nav button) { color: #dce9e6; }
.app-shell[data-theme="ocean"] .sidebar nav button:hover,
.app-shell[data-theme="ocean"] .sidebar nav button.active {
  background: rgb(255 241 232 / 14%);
  color: #fff;
  box-shadow: inset -3px 0 var(--orange);
}
.app-shell[data-theme="ocean"] .topbar {
  background: rgb(251 253 252 / 88%);
  border-color: var(--line);
}
.app-shell[data-theme="ocean"] :where(.page-heading, .schedule-matrix-header, .employee-profile-page-head) {
  border-color: var(--line);
  background: linear-gradient(135deg, #fbfdfc 0%, #edf5f3 58%, #efe8f4 100%);
}
.app-shell[data-theme="ocean"] .schedule-page-heading {
  background: linear-gradient(135deg, #294b55 0%, #40536a 56%, #59476b 100%);
  border-color: #6e8991;
}
.app-shell[data-theme="ocean"] .schedule-page-heading :where(.eyebrow, h1, p) { color: #fff !important; }
.app-shell[data-theme="ocean"] .schedule-page-heading .eyebrow { color: #ffd1bc !important; }
.app-shell[data-theme="ocean"] :where(.card, .toolbar, .schedule-wrap, .coverage-board, .stat, .setting-card, .request-card, .employee-toolbar, .profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes) {
  border-color: var(--line);
  background: var(--surface);
}

/* Tables use one deliberate high-contrast header across all themes. */
.app-shell :where(.schedule-table, .log-table, .audit-table, .leave-calendar table) thead th {
  background: var(--schedule-head-bg) !important;
  color: var(--schedule-head-ink) !important;
  border-color: color-mix(in srgb, var(--schedule-head-ink) 18%, var(--schedule-head-bg)) !important;
  text-shadow: 0 1px 0 rgb(0 0 0 / 18%);
}
.app-shell :where(.schedule-table, .log-table, .audit-table, .leave-calendar table) tbody td,
.app-shell :where(.schedule-table, .log-table, .audit-table, .leave-calendar table) tbody th {
  background: var(--schedule-row) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.app-shell :where(.schedule-table, .log-table, .audit-table, .leave-calendar table) tbody tr:nth-child(even) td,
.app-shell :where(.schedule-table, .log-table, .audit-table, .leave-calendar table) tbody tr:nth-child(even) th {
  background: var(--schedule-row-alt) !important;
}
.app-shell :where(.schedule-table, .log-table, .audit-table, .leave-calendar table) tbody tr:hover td,
.app-shell :where(.schedule-table, .log-table, .audit-table, .leave-calendar table) tbody tr:hover th {
  background: color-mix(in srgb, var(--purple-soft) 62%, var(--schedule-row)) !important;
}
.app-shell .schedule-table thead th.today-column,
.app-shell .schedule-table tbody td.today-column {
  background: var(--schedule-today-bg) !important;
  color: var(--schedule-today-ink) !important;
  box-shadow: inset 0 -4px var(--orange);
}
.app-shell .schedule-table thead th.today-column .schedule-day-header :where(small, strong, em) { color: var(--schedule-today-ink) !important; }
.app-shell .schedule-day-header { display: grid; gap: 2px; justify-items: center; min-width: 74px; }
.app-shell .schedule-day-header small { color: currentColor !important; font-size: 11px; font-weight: 750; opacity: .82; }
.app-shell .schedule-day-header strong { color: currentColor !important; font-size: 1.32rem; line-height: 1.1; }
.app-shell .schedule-day-header em { color: currentColor !important; font-size: 10px; font-style: normal; opacity: .72; }
.app-shell .schedule-table tbody tr.my-row > th { box-shadow: inset -3px 0 var(--orange); }
.app-shell .schedule-table .employee-cell { background: inherit !important; }
.app-shell :where(.shift-cell, .schedule-mobile-day) { border-color: var(--line-strong) !important; }
.app-shell :where(.shift-cell.shift, .schedule-mobile-day.shift) { background: var(--purple-soft) !important; color: var(--purple-2) !important; border-color: color-mix(in srgb, var(--purple) 58%, var(--line)) !important; }
.app-shell :where(.shift-cell.off, .schedule-mobile-day.off) { background: var(--warning-soft) !important; color: var(--warning) !important; }
.app-shell :where(.shift-cell.oncall, .schedule-mobile-day.oncall) { background: var(--blue-soft) !important; color: var(--blue) !important; }
.app-shell :where(.shift-cell.leave, .schedule-mobile-day.leave) { background: var(--red-soft) !important; color: var(--red) !important; }
.app-shell :where(.shift-cell.unassigned, .schedule-mobile-day.unassigned) { background: var(--surface-2) !important; color: var(--muted) !important; }

/* Profile foundation: one localized name, fewer repeated facts, clearer hierarchy. */
.app-shell .employee-profile-page .profile-identity > header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.app-shell .employee-profile-page .profile-data-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px; }
.app-shell .employee-profile-page .profile-data-grid > article { min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
.app-shell .employee-profile-page .profile-data-grid > article:nth-child(2) { background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--purple-soft) 38%, var(--surface))); }
.app-shell .employee-profile-page .profile-data-grid small { color: var(--muted); font-weight: 700; }
.app-shell .employee-profile-page .profile-data-grid strong { font-size: 1.08rem; }
.app-shell .employee-profile-page .profile-overview { grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; }
.app-shell .employee-profile-page .profile-contact { background: transparent; border: 0; padding: 0; }
.app-shell .employee-profile-page .profile-contact strong { font-size: 1rem; }
.app-shell .employee-profile-page .profile-overview > .status { justify-self: end; min-width: 112px; text-align: center; }
.app-shell .employee-profile-page .profile-tabs button { min-height: 44px; }

/* The no-shift state is a message, not a fake empty timeline. */
.app-shell .next-shift-empty { display: grid; place-items: center; gap: 4px; min-height: 116px; margin: 16px 0; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 56%, var(--surface)); text-align: center; }
.app-shell .next-shift-empty > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--purple-soft); color: var(--purple-2); font-size: 20px; }
.app-shell .next-shift-empty strong { font-size: 1rem; }
.app-shell .next-shift-empty small { color: var(--muted); }
.app-shell .next-shift-footer { align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.app-shell .next-shift-footer > span { color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .app-shell .employee-profile-page .profile-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app-shell .employee-profile-page .profile-overview { grid-template-columns: 60px minmax(0, 1fr) !important; }
  .app-shell .employee-profile-page .profile-overview > .status { grid-column: 1 / -1; justify-self: stretch; }
  .app-shell .next-shift-footer { align-items: stretch; flex-direction: column; }
  .app-shell .next-shift-footer .ghost { width: 100%; }
}
@media (max-width: 520px) {
  .app-shell .employee-profile-page .profile-data-grid { grid-template-columns: 1fr !important; }
}


/* Visual refresh v15b: force table header contrast after legacy cascade. */
/* Theme-specific selectors intentionally outrank the legacy pulse header rule. */
.app-shell[data-theme="light"] .schedule-table thead th,
.app-shell[data-theme="light"] .log-table thead th,
.app-shell[data-theme="light"] .audit-table thead th,
.app-shell[data-theme="light"] .leave-calendar table thead th { background-color: #321d38 !important; color: #fffafc !important; }
.app-shell[data-theme="dark"] .schedule-table thead th,
.app-shell[data-theme="dark"] .log-table thead th,
.app-shell[data-theme="dark"] .audit-table thead th,
.app-shell[data-theme="dark"] .leave-calendar table thead th { background-color: #302035 !important; color: #fffafc !important; }
.app-shell[data-theme="ocean"] .schedule-table thead th,
.app-shell[data-theme="ocean"] .log-table thead th,
.app-shell[data-theme="ocean"] .audit-table thead th,
.app-shell[data-theme="ocean"] .leave-calendar table thead th { background-color: #2f2a45 !important; color: #fffafc !important; }
.app-shell[data-theme="light"] .schedule-table thead th.today-column,
.app-shell[data-theme="dark"] .schedule-table thead th.today-column,
.app-shell[data-theme="ocean"] .schedule-table thead th.today-column { background-color: var(--schedule-today-bg) !important; color: var(--schedule-today-ink) !important; }


/* Visual refresh v16: Harbor Blend palette for a clearly mixed third appearance. */
/* Partner Care's third appearance is a deliberate harbor blend: warm paper, lagoon glass, and plum dusk. */
.app-shell[data-theme="ocean"] {
  --canvas: #bfced1;
  --surface: #f3e5e3;
  --surface-2: #d1e2df;
  --surface-3: #b6ccce;
  --ink: #17343a;
  --muted: #4d6268;
  --line: #8fa8ac;
  --line-strong: #66868e;
  --purple: #633c69;
  --purple-2: #402749;
  --purple-soft: #e9d8e8;
  --orange: #eb6841;
  --orange-text: #8d351f;
  --orange-soft: #ffd9cc;
  --green: #08776c;
  --green-soft: #c7e3dd;
  --red: #b64958;
  --red-soft: #f2d3d9;
  --warning: #74561c;
  --warning-soft: #f1e2b8;
  --blue: #2f7180;
  --blue-soft: #c9e3e6;
  --pc-rail: #173d45;
  --pc-rail-2: #2b1e3c;
  --pc-rail-ink: #fff9f6;
  --pc-rail-muted: #d5e1df;
  --pc-nav-active: #ffd8ca;
  --pc-nav-active-ink: #432541;
  --white: var(--surface);
  --bg: var(--canvas);
  --pc-highlight-bg: linear-gradient(135deg, #632f58 0%, #1d5960 52%, #e36440 100%);
  background: linear-gradient(135deg, #b9d1d1 0%, #e8d9df 47%, #cfc4dc 100%) !important;
  color: var(--ink);
}
.app-shell[data-theme="ocean"] .workspace {
  background:
    radial-gradient(circle at 11% 6%, rgb(255 223 209 / 62%), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgb(203 181 220 / 56%), transparent 30rem),
    linear-gradient(135deg, #c0d6d6 0%, #eadde0 52%, #d2c9dc 100%) !important;
}
.app-shell[data-theme="ocean"] .sidebar {
  background: linear-gradient(158deg, #173d45 0%, #3d3151 53%, #81434c 100%) !important;
  border-color: #9b858e !important;
  box-shadow: 18px 0 48px rgb(48 32 61 / 28%);
}
.app-shell[data-theme="ocean"] .sidebar nav button:hover,
.app-shell[data-theme="ocean"] .sidebar nav button.active {
  background: linear-gradient(90deg, rgb(255 217 204 / 26%), rgb(221 193 224 / 24%)) !important;
  color: #fff9f6 !important;
  box-shadow: inset -3px 0 #ff9b72, 0 8px 24px rgb(26 15 40 / 18%);
}
.app-shell[data-theme="ocean"] .topbar {
  background: linear-gradient(90deg, #f1e2e0 0%, #d8e8e5 45%, #e5d7e8 100%) !important;
  border-color: #9bb0b2 !important;
}
.app-shell[data-theme="ocean"] .topbar :where(.theme-button, .language-button, .menu-button, .bell, .account-trigger, [data-testid="role-switch"]) {
  background: linear-gradient(135deg, #f5e8e6 0%, #d8e9e6 100%) !important;
  border-color: #9ab2b3 !important;
  color: var(--ink) !important;
}
.app-shell[data-theme="ocean"] .topbar .theme-button {
  background: linear-gradient(135deg, #633c69 0%, #2e6870 100%) !important;
  border-color: #633c69 !important;
  color: #fff9f6 !important;
}
.app-shell[data-theme="ocean"] :where(.page-heading, .schedule-matrix-header, .employee-profile-page-head, .schedule-week-strip-head) {
  border-color: var(--line) !important;
  background: linear-gradient(120deg, #f1dfdd 0%, #cfe4e0 48%, #e4d6e7 100%) !important;
  color: var(--ink) !important;
}
.app-shell[data-theme="ocean"] :where(.page-heading, .schedule-matrix-header, .employee-profile-page-head, .schedule-week-strip-head) :where(h1, h2, h3, p, small) { color: var(--ink) !important; }
.app-shell[data-theme="ocean"] :where(.page-heading, .schedule-matrix-header, .employee-profile-page-head, .schedule-week-strip-head) .eyebrow { color: var(--orange-text) !important; }
.app-shell[data-theme="ocean"] .schedule-page-heading {
  background: linear-gradient(115deg, #20464d 0%, #5c3b62 53%, #a94e47 100%) !important;
  border-color: #b18489 !important;
  box-shadow: 0 18px 42px rgb(66 40 76 / 22%);
}
.app-shell[data-theme="ocean"] .schedule-page-heading :where(.eyebrow, h1, p) { color: #fff9f6 !important; }
.app-shell[data-theme="ocean"] .schedule-page-heading .eyebrow { color: #ffd2c4 !important; }
.app-shell[data-theme="ocean"] :where(.card, .toolbar, .schedule-wrap, .coverage-board, .stat, .setting-card, .request-card, .employee-toolbar, .profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes, .notifications, .report-download, .schedule-source-launch, .schedule-validation) {
  border-color: var(--line) !important;
  background: linear-gradient(135deg, #f4e6e4 0%, #d9e9e5 58%, #e7d9e8 100%) !important;
  color: var(--ink);
  box-shadow: 0 16px 34px rgb(45 38 55 / 10%);
}
.app-shell[data-theme="ocean"] :where(.stat, .coverage-warning, .schedule-validation.blocked) {
  background: linear-gradient(135deg, #ffe0d3 0%, #f1dbdf 50%, #e8d5e8 100%) !important;
}
.app-shell[data-theme="ocean"] :where(.schedule-day-card, .schedule-mobile-card, .team-tab, .schedule-team-toolbar, .schedule-control-bar) {
  border-color: var(--line) !important;
  background: linear-gradient(135deg, #e9f0ee 0%, #d1e5e1 58%, #e5d8e7 100%) !important;
}
.app-shell[data-theme="ocean"] :where(.primary-button, .activation-controls button, .ops-pulse-now, .report-download .primary-button) {
  background: linear-gradient(135deg, #e76540 0%, #9c4051 100%) !important;
  border-color: #9c4051 !important;
  color: #fff9f6 !important;
  box-shadow: 0 10px 22px rgb(156 64 81 / 22%);
}
.app-shell[data-theme="ocean"] :where(.primary-button, .activation-controls button, .ops-pulse-now, .report-download .primary-button):hover:not(:disabled) { background: linear-gradient(135deg, #d95536 0%, #7c3349 100%) !important; }
.app-shell[data-theme="ocean"] :where(.secondary, .ghost, .outline-button) {
  background: rgb(255 245 242 / 72%) !important;
  border-color: #a7879d !important;
  color: var(--purple-2) !important;
}
.app-shell[data-theme="ocean"] :where(.status.success, .draft-pill.success) { background: var(--green-soft) !important; color: var(--green) !important; }
.app-shell[data-theme="ocean"] :where(.status.warning, .draft-pill.warning) { background: var(--orange-soft) !important; color: var(--orange-text) !important; }
.app-shell[data-theme="ocean"] :where(.status.danger, .draft-pill.danger) { background: var(--red-soft) !important; color: var(--red) !important; }
.app-shell[data-theme="ocean"] :where(.avatar, .daily-inspiration-mark, .bell > span, .sidebar nav button > em, .mobile-primary-nav button > em, .mini-brand) {
  background: linear-gradient(135deg, #4a2451 0%, #1d6670 58%, #df6743 100%) !important;
  color: #fff !important;
}
.app-shell[data-theme="ocean"] :where(.shift-cell.shift, .schedule-mobile-day.shift) { background: #ead8e8 !important; color: #432850 !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.off, .schedule-mobile-day.off) { background: #f2e2b8 !important; color: #74561c !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.oncall, .schedule-mobile-day.oncall) { background: #c9e3e6 !important; color: #2f7180 !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.leave, .schedule-mobile-day.leave) { background: #f2d3d9 !important; color: #b64958 !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.unassigned, .schedule-mobile-day.unassigned) { background: #c3d8d8 !important; color: #4d6268 !important; }


/* Visual refresh v17: Midnight Lagoon palette, Cairo type, and a calmer operations rail. */
/* A clearly distinct third appearance: petrol glass, plum dusk, coral action. */
.app-shell[data-theme="ocean"] {
  --pcm-font-arabic: "Cairo", "Noto Sans Arabic", "IBM Plex Sans Arabic", "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
  --pc-display: "Cairo", "Noto Sans Arabic", "Segoe UI Variable Display", "Segoe UI", Tahoma, Arial, sans-serif;
  --pc-body: "Cairo", "Noto Sans Arabic", "IBM Plex Sans Arabic", "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
  --canvas: #102f36;
  --surface: #183e46;
  --surface-2: #244f56;
  --surface-3: #3a6265;
  --ink: #fff6f0;
  --muted: #c4d5d1;
  --line: #587d82;
  --line-strong: #8ca8a6;
  --purple: #c18bd0;
  --purple-2: #f0c5e8;
  --purple-soft: #4a2d52;
  --orange: #ff8b62;
  --orange-text: #ffd1bd;
  --orange-soft: #62332d;
  --green: #62d0b8;
  --green-soft: #1e5a55;
  --red: #ff929d;
  --red-soft: #5b2d3b;
  --warning: #f4c76f;
  --warning-soft: #5c4a2d;
  --blue: #7bcddd;
  --blue-soft: #255a6b;
  --pc-rail: #0b252d;
  --pc-rail-2: #241738;
  --pc-rail-ink: #fff9f5;
  --pc-rail-muted: #c5d8d4;
  --pc-nav-active: #6c3b4a;
  --pc-nav-active-ink: #fff4ed;
  --white: var(--surface);
  --bg: var(--canvas);
  --pulse-canvas: #102f36;
  --pulse-surface: #183e46;
  --pulse-surface-quiet: #244f56;
  --pulse-ink: #fff6f0;
  --pulse-muted: #c4d5d1;
  --pulse-line: #587d82;
  --pulse-orange: #ff8b62;
  --pulse-orange-soft: #62332d;
  --pulse-teal: #62d0b8;
  --pulse-teal-soft: #1e5a55;
  --pulse-plum: #c18bd0;
  --pulse-plum-soft: #4a2d52;
  --schedule-head-bg: #2d2142;
  --schedule-head-ink: #fff6f0;
  --schedule-today-bg: #60342f;
  --schedule-today-ink: #ffd6c1;
  --schedule-row: #183e46;
  --schedule-row-alt: #214d54;
  --pc-highlight-bg: linear-gradient(135deg, #693552 0%, #1d5f67 54%, #e16d4e 100%);
  color-scheme: dark;
  font-family: var(--pc-body);
  background:
    radial-gradient(circle at 8% 4%, rgb(96 207 187 / 24%), transparent 28rem),
    radial-gradient(circle at 88% 16%, rgb(193 139 208 / 22%), transparent 30rem),
    linear-gradient(135deg, #102f36 0%, #2d2041 53%, #5b303e 100%) !important;
  color: var(--ink);
}
.app-shell[data-theme="ocean"] .workspace {
  background:
    radial-gradient(circle at 10% 3%, rgb(98 208 184 / 18%), transparent 28rem),
    radial-gradient(circle at 84% 20%, rgb(193 139 208 / 20%), transparent 32rem),
    linear-gradient(135deg, #102f36 0%, #302241 54%, #5a303e 100%) !important;
}
.app-shell[data-theme="ocean"] .sidebar { background: linear-gradient(158deg, #0a2830 0%, #291a40 54%, #723744 100%) !important; border-color: #6f8e8f !important; box-shadow: 16px 0 48px rgb(3 12 17 / 38%); }
.app-shell[data-theme="ocean"] .sidebar :where(h1, strong) { color: #fff9f5 !important; }
.app-shell[data-theme="ocean"] .sidebar :where(p, small, nav button) { color: #c5d8d4 !important; }
.app-shell[data-theme="ocean"] .sidebar nav button:hover,
.app-shell[data-theme="ocean"] .sidebar nav button.active { background: linear-gradient(90deg, rgb(98 208 184 / 20%), rgb(193 139 208 / 24%), rgb(255 139 98 / 18%)) !important; color: #fff9f5 !important; box-shadow: inset -3px 0 #ff8b62, 0 8px 24px rgb(0 0 0 / 18%); }
.app-shell[data-theme="ocean"] .topbar { background: linear-gradient(90deg, #163e46 0%, #352646 52%, #5b303e 100%) !important; border-color: #587d82 !important; color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] .topbar :where(.theme-button, .language-button, .menu-button, .bell, .account-trigger, [data-testid="role-switch"]) { background: rgb(255 246 240 / 10%) !important; border-color: #6c8c8d !important; color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] .topbar .theme-button { background: linear-gradient(135deg, #c18bd0 0%, #4bbba8 52%, #ff8b62 100%) !important; border-color: transparent !important; color: #1b1a2b !important; }
.app-shell[data-theme="ocean"] :where(.page-heading, .schedule-matrix-header, .employee-profile-page-head, .schedule-week-strip-head) { border-color: #66888a !important; background: linear-gradient(115deg, #183f47 0%, #443052 52%, #713841 100%) !important; color: #fff6f0 !important; box-shadow: 0 18px 38px rgb(0 0 0 / 18%); }
.app-shell[data-theme="ocean"] :where(.page-heading, .schedule-matrix-header, .employee-profile-page-head, .schedule-week-strip-head) :where(h1, h2, h3, p, small) { color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] :where(.page-heading, .schedule-matrix-header, .employee-profile-page-head, .schedule-week-strip-head) .eyebrow { color: #ffb99b !important; }
.app-shell[data-theme="ocean"] .home-welcome { background: linear-gradient(115deg, #183f47 0%, #483052 53%, #873e42 100%) !important; border-color: #729391 !important; color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] .home-welcome :where(h1, h2, p, small) { color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] .home-welcome .eyebrow { color: #ffb99b !important; }
.app-shell[data-theme="ocean"] .schedule-page-heading { background: linear-gradient(115deg, #103f47 0%, #573154 54%, #a34c43 100%) !important; border-color: #9c727a !important; }
.app-shell[data-theme="ocean"] .schedule-page-heading :where(.eyebrow, h1, p) { color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] .schedule-page-heading .eyebrow { color: #ffd0bd !important; }
.app-shell[data-theme="ocean"] :where(.card, .toolbar, .schedule-wrap, .coverage-board, .stat, .setting-card, .request-card, .employee-toolbar, .profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes, .notifications, .report-download, .schedule-source-launch, .schedule-validation, .ops-pulse-card, .daily-inspiration) { border-color: #587d82 !important; background: linear-gradient(135deg, #183f47 0%, #253f50 54%, #49304f 100%) !important; color: var(--ink) !important; box-shadow: 0 18px 40px rgb(0 0 0 / 20%); }
.app-shell[data-theme="ocean"] :where(.stat, .coverage-warning, .schedule-validation.blocked, .daily-inspiration) { background: linear-gradient(135deg, #62332d 0%, #4d2f4d 54%, #1d5158 100%) !important; }
.app-shell[data-theme="ocean"] :where(.schedule-day-card, .schedule-mobile-card, .team-tab, .schedule-team-toolbar, .schedule-control-bar) { border-color: #587d82 !important; background: linear-gradient(135deg, #214d54 0%, #2b3f53 54%, #4a3151 100%) !important; color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] :where(.primary-button, .activation-controls button, .ops-pulse-now, .report-download .primary-button) { background: linear-gradient(135deg, #ff8b62 0%, #b65b69 100%) !important; border-color: #ffac8c !important; color: #271b2b !important; box-shadow: 0 10px 24px rgb(255 139 98 / 23%); }
.app-shell[data-theme="ocean"] :where(.primary-button, .activation-controls button, .ops-pulse-now, .report-download .primary-button):hover:not(:disabled) { background: linear-gradient(135deg, #ffad82 0%, #d27586 100%) !important; }
.app-shell[data-theme="ocean"] :where(.secondary, .ghost, .outline-button) { background: rgb(255 246 240 / 9%) !important; border-color: #799b9a !important; color: #ffe9dd !important; }
.app-shell[data-theme="ocean"] :where(.status.success, .draft-pill.success) { background: #1e5a55 !important; color: #8de4ca !important; }
.app-shell[data-theme="ocean"] :where(.status.warning, .draft-pill.warning) { background: #62472b !important; color: #ffd58b !important; }
.app-shell[data-theme="ocean"] :where(.status.danger, .draft-pill.danger) { background: #5b2d3b !important; color: #ffb5bb !important; }
.app-shell[data-theme="ocean"] :where(.avatar, .daily-inspiration-mark, .bell > span, .sidebar nav button > em, .mobile-primary-nav button > em, .mini-brand) { background: linear-gradient(135deg, #c18bd0 0%, #277c7d 55%, #ff8b62 100%) !important; color: #fff9f5 !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.shift, .schedule-mobile-day.shift) { background: #4a2d52 !important; color: #f0c5e8 !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.off, .schedule-mobile-day.off) { background: #5c4a2d !important; color: #f4cf7d !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.oncall, .schedule-mobile-day.oncall) { background: #255a6b !important; color: #a3e3ee !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.leave, .schedule-mobile-day.leave) { background: #5b2d3b !important; color: #ffb5bb !important; }
.app-shell[data-theme="ocean"] :where(.shift-cell.unassigned, .schedule-mobile-day.unassigned) { background: #315d62 !important; color: #d1e2de !important; }
/* The operations pulse is a compact rail, not a giant red line. */
.app-shell[data-theme="ocean"] .ops-pulse-card { background: linear-gradient(135deg, #173f47 0%, #3e2a4c 56%, #71373f 100%) !important; border-color: #6d9291 !important; color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-head :where(h2, p) { color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-head .eyebrow { color: #ffb99b !important; }
.app-shell[data-theme="ocean"] .ops-pulse-status { background: #1e5a55 !important; color: #8de4ca !important; }
.app-shell[data-theme="ocean"] .ops-pulse-metric { background: rgb(8 28 34 / 42%) !important; border-color: #5e8083 !important; color: #fff6f0 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-metric:nth-child(1) { border-top-color: #62d0b8 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-metric:nth-child(2) { border-top-color: #c18bd0 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-metric:nth-child(3) { border-top-color: #ff8b62 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-metric:nth-child(4) { border-top-color: #ff929d !important; }
.app-shell[data-theme="ocean"] .ops-pulse-metric :where(small, strong) { color: #fff6f0 !important; font-family: var(--pc-body) !important; font-variant-numeric: tabular-nums; }
.app-shell[data-theme="ocean"] .ops-pulse-metric strong { font-size: 26px !important; }
.app-shell[data-theme="ocean"] .ops-pulse-track { position: relative !important; display: grid !important; align-items: start; margin: 0 !important; padding: 18px 10px 8px !important; border: 1px solid #6d9291 !important; border-radius: 18px !important; background: rgb(7 24 30 / 45%) !important; overflow: visible; }
.app-shell[data-theme="ocean"] .ops-pulse-track::before { content: "" !important; display: block !important; position: absolute; inset-inline: 16px; top: 37px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #ff8b62 0%, #62d0b8 48%, #c18bd0 100%); box-shadow: 0 0 0 1px rgb(255 246 240 / 10%); }
.app-shell[data-theme="ocean"] .ops-pulse-node { position: relative; z-index: 1; padding: 8px 4px 4px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #dce9e5 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-node i { width: 14px !important; height: 14px !important; border: 4px solid #173f47 !important; background: #62d0b8 !important; box-shadow: 0 0 0 2px #62d0b8 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-node:first-child i, .app-shell[data-theme="ocean"] .ops-pulse-node:last-child i { background: #ff8b62 !important; box-shadow: 0 0 0 2px #ff8b62 !important; }
.app-shell[data-theme="ocean"] .ops-pulse-node b { color: #dce9e5 !important; font-family: var(--pc-body) !important; font-size: 11px !important; font-weight: 700; }
.app-shell[data-theme="ocean"] .ops-pulse-now { top: 7px !important; inset-inline-start: 50% !important; transform: translateX(-50%); padding: 3px 9px !important; border-radius: 999px !important; font-family: var(--pc-body) !important; font-size: 10px !important; line-height: 1.2; }
.app-shell[data-theme="ocean"] .ops-pulse-now::after { display: none !important; content: none !important; }
/* Cairo gives Arabic labels a calmer rhythm while keeping numeric data tabular. */
.app-shell[data-theme="ocean"] :where(.content, .topbar, .sidebar, .mobile-primary-nav, button, input, select, textarea) { font-family: var(--pc-body) !important; }
.app-shell[data-theme="ocean"] :where(h1, h2, h3, h4, .eyebrow, .page-heading, .card-head) { font-family: var(--pc-display) !important; letter-spacing: 0 !important; }
.app-shell[data-theme="ocean"] :where(.schedule-day-header, .schedule-week-total, .profile-data-grid strong, .ops-pulse-metric strong) { font-variant-numeric: tabular-nums; }


/* Visual refresh v17b: selected schedule tabs keep their label contrast. */
.app-shell[data-theme="ocean"] .team-tabs > .active { background: linear-gradient(135deg, #ff8b62 0%, #b86a83 100%) !important; border-color: #ffb092 !important; color: #291c31 !important; box-shadow: 0 8px 18px rgb(255 139 98 / 20%); }
.app-shell[data-theme="ocean"] .team-tabs > .active :where(.team-tab-mark, .team-tab-copy) { color: #291c31 !important; }
.app-shell[data-theme="ocean"] .team-tabs > .active .team-tab-mark { background: rgb(41 28 49 / 18%) !important; border-color: transparent !important; }


/* Visual refresh v17c: outrank legacy active-tab background-color rules. */
.app-shell[data-theme="ocean"] .schedule-control-bar .team-tabs button.active { background: linear-gradient(135deg, #ff8b62 0%, #b86a83 100%) !important; background-color: #ff8b62 !important; border-color: #ffb092 !important; color: #291c31 !important; }
.app-shell[data-theme="ocean"] .schedule-control-bar .team-tabs button.active :where(.team-tab-mark, .team-tab-copy) { color: #291c31 !important; }


/* Visual refresh v17d: draft badges use a readable coral tint. */
.app-shell[data-theme="ocean"] .draft-pill { background: rgb(255 139 98 / 18%) !important; border-color: #a66772 !important; color: #ffd2bd !important; }


/* Visual refresh v18: focused light and dark themes. */
.app-shell[data-theme="light"] {
  --pulse-canvas: #f6f2f7 !important;
  --pulse-surface: #fffdfd !important;
  --pulse-surface-quiet: #f1eaf3 !important;
  --pulse-ink: #2b1d31 !important;
  --pulse-muted: #6e6171 !important;
  --pulse-line: #dfd0e1 !important;
  --pulse-orange: #ed6b3d !important;
  --pulse-orange-soft: #fff0e8 !important;
  --pulse-plum: #693674 !important;
  --pulse-plum-soft: #f2e9f4 !important;
  --pulse-teal: #2d8d82 !important;
  --pulse-teal-soft: #e4f3ef !important;
  --pulse-red: #b9505f !important;
  --pulse-red-soft: #fae8eb !important;
}
.app-shell[data-theme="dark"] {
  --pulse-canvas: #151119 !important;
  --pulse-surface: #211825 !important;
  --pulse-surface-quiet: #2b2030 !important;
  --pulse-ink: #fcf7fb !important;
  --pulse-muted: #c9b9ca !important;
  --pulse-line: #4d3b51 !important;
  --pulse-orange: #ff8a63 !important;
  --pulse-orange-soft: #3d2925 !important;
  --pulse-plum: #d19bcc !important;
  --pulse-plum-soft: #36263a !important;
  --pulse-teal: #68c9bd !important;
  --pulse-teal-soft: #1d3e3b !important;
  --pulse-red: #ff9ba5 !important;
  --pulse-red-soft: #44262d !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) {
  background: var(--pulse-canvas) !important;
  color: var(--pulse-ink) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(.workspace, .content) { background: var(--pulse-canvas) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(.card, .toolbar, .schedule-wrap, .coverage-board, .stat, .setting-card, .request-card, .employee-toolbar, .profile-section, .profile-admin, .profile-balance, .profile-evaluations, .profile-notes, .notifications, .report-download, .schedule-source-launch, .schedule-source-dock, .schedule-validation, .ops-pulse-card, .daily-inspiration, .leave-calendar-card, .team-management-card, .operations-center, .next-shift, .quick-actions) {
  background: linear-gradient(145deg, var(--pulse-surface) 0%, var(--pulse-surface-quiet) 100%) !important;
  border-color: var(--pulse-line) !important;
  color: var(--pulse-ink) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(h1, h2, h3, h4, strong, .card-head, .page-heading) { color: var(--pulse-ink) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(p, small, em, .eyebrow, .muted, .schedule-note) { color: var(--pulse-muted) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar { background: linear-gradient(180deg, #302238 0%, #482c50 100%) !important; color: #fff9fc !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar nav button { color: #eaddec !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar nav button:hover,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar nav button.active { background: rgb(255 255 255 / 12%) !important; color: #fff !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .topbar { background: color-mix(in srgb, var(--pulse-surface) 94%, var(--pulse-plum) 6%) !important; border-color: var(--pulse-line) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-card { padding: 24px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-head { margin: 0 0 16px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-head h2 { margin: 0 !important; font-size: clamp(22px, 2.2vw, 30px) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric { min-height: 102px !important; background: color-mix(in srgb, var(--pulse-surface) 88%, var(--pulse-plum) 12%) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-track { display: none !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-now { display: none !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar { gap: 18px !important; padding: 18px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-team-heading { min-width: 170px; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-launch { min-height: 74px !important; padding: 16px 20px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-launch small,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-dock > header p,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options button small,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .bridge-source-row small,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .bridge-preview > footer small { display: none !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-dock > header { align-items: center !important; padding-bottom: 10px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options button { min-height: 62px !important; padding: 12px 14px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .week-nav { grid-template-columns: 38px minmax(180px, 1fr) 38px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .week-range-value { display: flex !important; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; direction: ltr; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .week-range-value i { color: var(--pulse-orange); font-style: normal; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-week-strip-head p { display: none !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-page-heading > div > p,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-note,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .live-coverage { display: none !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-week-days { gap: 10px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-day-card { min-height: 142px !important; padding: 14px !important; background: color-mix(in srgb, var(--pulse-surface) 90%, var(--pulse-teal) 10%) !important; border-color: var(--pulse-line) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-day-card.is-today { background: color-mix(in srgb, var(--pulse-surface) 82%, var(--pulse-orange) 18%) !important; border-color: var(--pulse-orange) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-day-card-date { display: flex !important; align-items: baseline; gap: 7px; margin: 14px 0 !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-day-card-date strong { font-size: 30px !important; line-height: 1 !important; color: var(--pulse-ink) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-day-card-date small { color: var(--pulse-muted) !important; font-weight: 700; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-table thead th { background: #39243e !important; color: #fff9fc !important; border-color: #55335c !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-table thead th.today-column { background: var(--pulse-orange) !important; color: #2b1d31 !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-table tbody tr:nth-child(even) > :where(th, td) { background: color-mix(in srgb, var(--pulse-surface-quiet) 72%, transparent) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-table tbody td.today-column { background: color-mix(in srgb, var(--pulse-orange-soft) 72%, var(--pulse-surface)) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-table tbody :where(th, td) { border-color: var(--pulse-line) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-validation.ready,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .coverage-strip { display: none !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-tracker-heading > div > p,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .own-leave-summary .card-head small,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .profile-leave-history header p { display: none !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-control-center { padding: 18px !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-period-toolbar { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) 38px auto !important; align-items: center; gap: 10px; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-period-title { text-align: center; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-period-title strong { display: block; font-size: 20px; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar-account-anchor { min-width: 0 !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar-account-anchor strong { max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options { grid-template-columns: 1fr !important; }
}

/* Visual refresh v19: restrained signal accents across decision cards. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) {
  --pulse-accent-teal: var(--pulse-teal);
  --pulse-accent-orange: var(--pulse-orange);
  --pulse-accent-plum: var(--pulse-plum);
  --pulse-accent-red: var(--pulse-red);
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .manager-home-summary-grid button,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .operations-center > div > button,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .home-stats .stat,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card {
  border-block-start: 3px solid var(--pulse-line) !important;
  background: color-mix(in srgb, var(--pulse-surface) 96%, var(--pulse-plum) 4%) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric:nth-child(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .manager-home-summary-grid button:nth-child(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .operations-center > div > button:nth-child(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button:nth-of-type(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .home-stats .stat:nth-child(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(1) {
  --signal-accent: var(--pulse-accent-teal);
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric:nth-child(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .manager-home-summary-grid button:nth-child(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .operations-center > div > button:nth-child(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button:nth-of-type(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .home-stats .stat:nth-child(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(2) {
  --signal-accent: var(--pulse-accent-orange);
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric:nth-child(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .manager-home-summary-grid button:nth-child(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .operations-center > div > button:nth-child(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button:nth-of-type(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .home-stats .stat:nth-child(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(3) {
  --signal-accent: var(--pulse-accent-plum);
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric:nth-child(4),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button:nth-of-type(4),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(4) {
  --signal-accent: var(--pulse-accent-red);
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(
  .ops-pulse-compact .ops-pulse-metric,
  .manager-home-summary-grid button,
  .operations-center > div > button,
  .quick-actions > button,
  .home-stats .stat,
  .setting-card
) {
  border-block-start-color: var(--signal-accent, var(--pulse-line)) !important;
  background: color-mix(in srgb, var(--pulse-surface) 94%, var(--signal-accent, var(--pulse-plum)) 6%) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(
  .ops-pulse-compact .ops-pulse-metric strong,
  .manager-home-summary-grid button strong,
  .operations-center > div > button strong,
  .home-stats .stat strong
) {
  color: var(--signal-accent, var(--pulse-ink)) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button > span {
  background: color-mix(in srgb, var(--pulse-surface) 84%, var(--signal-accent, var(--pulse-plum)) 16%) !important;
  color: var(--signal-accent, var(--pulse-ink)) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button {
  border-block-start: 3px solid var(--pulse-line) !important;
  background: color-mix(in srgb, var(--pulse-surface) 97%, var(--pulse-plum) 3%) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(1) { border-block-start-color: var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(2) { border-block-start-color: var(--pulse-accent-orange) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(3) { border-block-start-color: var(--pulse-accent-plum) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(4) { border-block-start-color: var(--pulse-accent-red) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(5) { border-block-start-color: var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(6) { border-block-start-color: var(--pulse-accent-plum) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button.active {
  background: color-mix(in srgb, var(--pulse-surface) 88%, var(--signal-accent, var(--pulse-orange)) 12%) !important;
  box-shadow: inset 0 -2px var(--signal-accent, var(--pulse-orange)) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options > button:nth-child(1) { border-block-start-color: var(--pulse-accent-orange) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options > button:nth-child(2) { border-block-start-color: var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(1) { border-inline-start: 3px solid var(--pulse-accent-teal); }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(2) { border-inline-start: 3px solid var(--pulse-accent-orange); }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(3) { border-inline-start: 3px solid var(--pulse-accent-plum); }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(4) { border-inline-start: 3px solid var(--pulse-accent-red); }
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(
  .ops-pulse-compact .ops-pulse-metric,
  .manager-home-summary-grid button,
  .operations-center > div > button,
  .quick-actions > button,
  .home-stats .stat,
  .setting-card,
  .schedule-control-bar .team-tabs > button,
  .schedule-source-options > button
) { transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(
  .manager-home-summary-grid button,
  .operations-center > div > button,
  .quick-actions > button,
  .setting-card,
  .schedule-control-bar .team-tabs > button,
  .schedule-source-options > button
):hover { border-block-start-color: var(--signal-accent, var(--pulse-orange)) !important; }
/* Explicit top edge fallback for accent visibility. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) :where(
  .ops-pulse-compact .ops-pulse-metric,
  .manager-home-summary-grid button,
  .operations-center > div > button,
  .quick-actions > button,
  .home-stats .stat,
  .setting-card
) { border-top-color: var(--signal-accent, var(--pulse-line)) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(1) { border-top-color: var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(2) { border-top-color: var(--pulse-accent-orange) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(3) { border-top-color: var(--pulse-accent-plum) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(4) { border-top-color: var(--pulse-accent-red) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(5) { border-top-color: var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(6) { border-top-color: var(--pulse-accent-plum) !important; }
/* Accent inset fallback v20. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric:nth-child(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .manager-home-summary-grid button:nth-child(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .operations-center > div > button:nth-child(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button:nth-of-type(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .home-stats .stat:nth-child(1),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(1) { box-shadow: inset 0 3px 0 var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric:nth-child(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .manager-home-summary-grid button:nth-child(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .operations-center > div > button:nth-child(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button:nth-of-type(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .home-stats .stat:nth-child(2),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(2) { box-shadow: inset 0 3px 0 var(--pulse-accent-orange) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric:nth-child(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .manager-home-summary-grid button:nth-child(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .operations-center > div > button:nth-child(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button:nth-of-type(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .home-stats .stat:nth-child(3),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(3) { box-shadow: inset 0 3px 0 var(--pulse-accent-plum) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .ops-pulse-compact .ops-pulse-metric:nth-child(4),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .quick-actions > button:nth-of-type(4),
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(4) { box-shadow: inset 0 3px 0 var(--pulse-accent-red) !important; }
/* Active team tab keeps its own signal color. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(1).active { box-shadow: inset 0 -2px var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(2).active { box-shadow: inset 0 -2px var(--pulse-accent-orange) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(3).active { box-shadow: inset 0 -2px var(--pulse-accent-plum) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(4).active { box-shadow: inset 0 -2px var(--pulse-accent-red) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(5).active { box-shadow: inset 0 -2px var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button:nth-child(6).active { box-shadow: inset 0 -2px var(--pulse-accent-plum) !important; }
/* Extended leave legend signals. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(4) { border-inline-start: 3px solid var(--pulse-accent-red); }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(5) { border-inline-start: 3px solid var(--pulse-accent-teal); }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(6) { border-inline-start: 3px solid var(--pulse-accent-orange); }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(7) { border-inline-start: 3px solid var(--pulse-accent-plum); }
/* Continue accent cycle through settings cards. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(5) { --signal-accent: var(--pulse-accent-teal); box-shadow: inset 0 3px 0 var(--pulse-accent-teal) !important; }
.app-shell:is([data-theme="light"], [data-theme="dark"]) .setting-card:nth-child(6) { --signal-accent: var(--pulse-accent-orange); box-shadow: inset 0 3px 0 var(--pulse-accent-orange) !important; }
/* Final leave legend signal. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .leave-type-legend > span:nth-child(8) { border-inline-start: 3px solid var(--pulse-accent-red); }
/* Week navigator overflow fix v22. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .week-nav {
  width: min(100%, 270px) !important;
  min-width: 0 !important;
  box-sizing: border-box;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  overflow: hidden;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .week-range-value {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  white-space: normal !important;
  line-height: 1.35;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .week-range-value span {
  min-width: 0;
  text-align: center;
  white-space: normal;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .week-range-value i { justify-self: center; }
@media (max-width: 820px) {
  .app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .week-nav {
    width: 100% !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  }
}
/* Partner Care polish v23: readable labels, compact source dock, clean sidebar. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button.active {
  color: var(--pulse-ink) !important;
  background: color-mix(in srgb, var(--pulse-surface) 82%, var(--pulse-orange) 18%) !important;
  text-shadow: none !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button.active :where(.team-tab-copy, .team-tab-mark) {
  color: var(--pulse-ink) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-control-bar .team-tabs > button.active .team-tab-mark {
  background: color-mix(in srgb, var(--pulse-surface) 74%, var(--pulse-orange) 26%) !important;
  border-color: color-mix(in srgb, var(--pulse-orange) 46%, var(--pulse-line)) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .manager-home-summary-footer > span {
  display: none !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar nav {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar-profile {
  min-width: 0 !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar-profile > div:last-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar-profile strong {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar .brand strong {
  color: #fff9fc !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar .brand small {
  color: #d8c9da !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .employee-sheet-sync {
  display: none !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-dock {
  display: grid !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: 20px !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-dock > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-dock > header h2 {
  margin: 0 !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-dock > header .schedule-source-close {
  flex: 0 0 auto !important;
  min-height: 38px !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options > button {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 70px !important;
  padding: 12px 14px !important;
  text-align: start !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options > button > div {
  min-width: 0 !important;
}
@media (max-width: 700px) {
  .app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options {
    grid-template-columns: 1fr !important;
  }
}
/* Partner Care polish v24: reinforce sidebar and source actions. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar-profile :where(strong, small, em) {
  color: #fff9fc !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar-profile small {
  color: #d8c9da !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .sidebar-profile em {
  color: #ffb295 !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options > button {
  border: 1px solid var(--pulse-line) !important;
  border-top-color: var(--pulse-line) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--pulse-surface) 92%, var(--pulse-plum) 8%) !important;
  color: var(--pulse-ink) !important;
}
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options > button:hover,
.app-shell:is([data-theme="light"], [data-theme="dark"]) .schedule-source-options > button:focus-visible {
  background: color-mix(in srgb, var(--pulse-surface) 84%, var(--pulse-orange) 16%) !important;
  border-color: color-mix(in srgb, var(--pulse-orange) 52%, var(--pulse-line)) !important;
}
/* Partner Care polish v25: keep the management marker concise. */
.app-shell:is([data-theme="light"], [data-theme="dark"]) .management-privacy-note small {
  display: none !important;
}
/* Partner Care polish v26: make employee names the direct profile action. */
.app-shell .employee-name-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 820;
  text-align: start;
  cursor: pointer;
}
.app-shell .employee-name-link:hover {
  color: var(--orange-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.app-shell .employee-name-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Partner Care polish v27: attendance note composer. */
.app-shell .incident-note-block {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 86%, var(--orange-soft) 14%);
}
.app-shell .incident-note-block legend { padding: 0 7px; color: var(--ink); font-size: 11px; font-weight: 820; }
.app-shell .incident-note-block legend small { color: var(--muted); font-size: 9px; font-weight: 650; }
.app-shell .incident-note-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.app-shell .incident-note-types button { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font: inherit; font-size: 10px; font-weight: 780; cursor: pointer; }
.app-shell .incident-note-types button:hover, .app-shell .incident-note-types button:focus-visible { border-color: var(--orange); color: var(--orange-text); }
.app-shell .incident-note-types button.active { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); }
.app-shell .incident-note-types button.active.positive { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.app-shell .incident-note-types button.active.negative { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.app-shell .incident-note-block > textarea { min-height: 68px; resize: vertical; }
@media (max-width: 560px) { .app-shell .incident-note-types { grid-template-columns: 1fr; } }


/* Partner Care polish v28: turn attendance capture into a calm, scannable workflow. */
.app-shell .attendance-incident-content { display:grid; gap:14px; }
.app-shell .attendance-context-card { display:grid; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg, color-mix(in srgb,var(--purple-soft) 64%,var(--surface) 36%), var(--surface)); }
.app-shell .attendance-context-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.app-shell .attendance-context-top > div { display:grid; gap:3px; }
.app-shell .attendance-eyebrow,.app-shell .attendance-field-kicker { color:var(--muted); font-size:9px; font-weight:780; letter-spacing:.02em; }
.app-shell .attendance-context-top strong { color:var(--ink); font-size:15px; }
.app-shell .attendance-context-date { padding:5px 9px; border:1px solid color-mix(in srgb,var(--purple) 22%,var(--line)); border-radius:999px; color:var(--purple); background:var(--surface); font-size:10px; font-weight:800; }
.app-shell .attendance-context-person { display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:var(--muted); font-size:10px; }
.app-shell .attendance-context-person strong { color:var(--ink); font-size:11px; }
.app-shell .attendance-context-person i { color:var(--line-strong,var(--line)); font-style:normal; }
.app-shell .attendance-context-note { color:var(--muted); font-size:9px; line-height:1.5; }
.app-shell .attendance-form-section { display:grid; gap:13px; }
.app-shell .attendance-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-inline:2px; }
.app-shell .attendance-section-title h3 { margin:0; color:var(--ink); font-size:14px; }
.app-shell .attendance-section-title p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.app-shell .attendance-section-index { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:var(--purple); background:var(--purple-soft); font-size:10px; font-weight:900; }
.app-shell .attendance-choice-group { display:grid; gap:7px; }
.app-shell .attendance-choice-group-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-inline:2px; }
.app-shell .attendance-choice-group-head strong { color:var(--ink); font-size:11px; }
.app-shell .attendance-choice-group-head small { color:var(--muted); font-size:9px; }
.app-shell .attendance-choice-grid { margin:0; gap:8px; }
.app-shell .attendance-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.app-shell .absence-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.app-shell .incident-choice { position:relative; min-height:62px; align-items:center; padding:10px 11px; border-color:var(--line); background:var(--surface); transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.app-shell .incident-choice:hover { transform:translateY(-1px); border-color:var(--choice-accent,var(--orange)); }
.app-shell .incident-choice:focus-visible { outline:2px solid var(--choice-accent,var(--orange)); outline-offset:2px; }
.app-shell .incident-choice-icon { flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:var(--choice-accent,var(--purple)); background:color-mix(in srgb,var(--choice-accent,var(--purple)) 12%,var(--surface)); font-size:13px; font-weight:900; }
.app-shell .incident-choice-copy { display:grid; gap:3px; min-width:0; text-align:start; }
.app-shell .incident-choice-copy strong { color:var(--ink); font-size:10px; line-height:1.25; }
.app-shell .incident-choice-copy small { overflow:hidden; color:var(--muted); font-size:8px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.app-shell .incident-choice-check { display:grid; place-items:center; width:18px; height:18px; margin-inline-start:auto; border-radius:50%; color:#fff; background:var(--choice-accent,var(--orange)); font-size:10px; opacity:0; transform:scale(.7); transition:opacity .16s ease,transform .16s ease; }
.app-shell .incident-choice.active { border-color:var(--choice-accent,var(--orange)); background:color-mix(in srgb,var(--choice-accent,var(--orange)) 8%,var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--choice-accent,var(--orange)) 14%,transparent); }
.app-shell .incident-choice.active .incident-choice-check { opacity:1; transform:scale(1); }
.app-shell .incident-late { --choice-accent:var(--orange); }
.app-shell .incident-early { --choice-accent:var(--purple); }
.app-shell .incident-remote { --choice-accent:var(--teal); }
.app-shell .incident-absence-excused { --choice-accent:var(--green); }
.app-shell .incident-absence-emergency { --choice-accent:var(--orange); }
.app-shell .incident-absence-unexcused { --choice-accent:var(--red); }
.app-shell .incident-no-show { --choice-accent:var(--purple); }
.app-shell .attendance-time-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--orange) 28%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--orange-soft) 28%,var(--surface)); }
.app-shell .attendance-time-card > div { display:grid; gap:3px; }
.app-shell .attendance-time-card strong { color:var(--ink); font-size:11px; }
.app-shell .attendance-time-card input { width:130px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; font-size:12px; }
.app-shell .attendance-text-field { display:grid; gap:7px; padding:12px 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2,var(--bg)); }
.app-shell .attendance-field-label { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink); font-size:10px; font-weight:820; }
.app-shell .attendance-field-label small { color:var(--muted); font-size:9px; font-weight:650; }
.app-shell .attendance-text-field textarea { min-height:64px; resize:vertical; }
.app-shell .attendance-text-field textarea:focus,.app-shell .incident-note-block > textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 16%,transparent); }
.app-shell .incident-note-block { gap:10px; margin:0; padding:12px 13px 13px; border-color:color-mix(in srgb,var(--purple) 24%,var(--line)); background:color-mix(in srgb,var(--purple-soft) 58%,var(--surface) 42%); }
.app-shell .incident-note-block legend { display:flex; align-items:center; gap:7px; }
.app-shell .incident-note-block legend small { padding:3px 6px; border-radius:999px; background:var(--surface); }
.app-shell .incident-note-types { gap:8px; }
.app-shell .incident-note-types button { min-height:40px; border-radius:10px; }
.app-shell .incident-note-types button.active { box-shadow:0 0 0 2px color-mix(in srgb,var(--purple) 12%,transparent); }
.app-shell .incident-note-block > textarea { min-height:70px; border-radius:10px; }
.app-shell .attendance-incident-content + .modal-actions { margin-top:14px !important; }
@media (max-width:700px) {
  .app-shell .attendance-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-shell .attendance-choice-grid .incident-remote { grid-column:1/-1; }
}
@media (max-width:560px) {
  .app-shell .attendance-context-top,.app-shell .attendance-choice-group-head,.app-shell .attendance-time-card { align-items:stretch; flex-direction:column; }
  .app-shell .attendance-context-date { justify-self:start; }
  .app-shell .attendance-choice-grid,.app-shell .absence-choice-grid { grid-template-columns:1fr; }
  .app-shell .attendance-choice-grid .incident-remote { grid-column:auto; }
  .app-shell .attendance-time-card input { width:100%; }
  .app-shell .incident-note-types { grid-template-columns:1fr; }
}


/* Partner Care polish v29: reduce visual noise inside the attendance modal. */
.app-shell .attendance-incident-content { gap:11px; }
.app-shell .attendance-context-card { gap:8px; padding:11px 14px; }
.app-shell .attendance-context-person { font-size:9px; }
.app-shell .attendance-form-section { gap:10px; }
.app-shell .attendance-choice-group { gap:5px; }
.app-shell .attendance-choice-grid { gap:6px; }
.app-shell .incident-choice { min-height:52px; padding:8px 10px; }
.app-shell .incident-choice-icon { width:25px; height:25px; border-radius:8px; font-size:12px; }
.app-shell .incident-choice-copy strong { font-size:10px; white-space:nowrap; }
.app-shell .incident-choice-check { width:17px; height:17px; font-size:9px; }
.app-shell .attendance-incident-content + .modal-actions { padding-top:10px; padding-bottom:10px; }

/* Attendance record split flow and employee history */
.app-shell .attendance-mode-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:5px; margin:14px 0 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-muted); }
.app-shell .attendance-mode-switch button { min-height:42px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease; }
.app-shell .attendance-mode-switch button:hover { color:var(--ink); border-color:var(--line-strong); }
.app-shell .attendance-mode-switch button.active { background:var(--surface); color:var(--purple); border-color:var(--purple); box-shadow:0 6px 14px rgb(77 31 84 / 10%); }
.app-shell .standalone-note-panel { display:grid; gap:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,var(--surface) 0%,var(--surface-muted) 100%); }
.app-shell .standalone-note-panel .attendance-section-title { margin:0; }
.app-shell .standalone-note-types { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.app-shell .standalone-note-types button { min-height:44px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--muted); font-weight:800; cursor:pointer; }
.app-shell .standalone-note-types button.active { color:var(--ink); border-color:var(--purple); box-shadow:inset 0 0 0 1px var(--purple); }
.app-shell .standalone-note-types button.active.positive { border-color:var(--green); color:var(--green); }
.app-shell .standalone-note-types button.active.negative { border-color:var(--red); color:var(--red); }
.app-shell .standalone-note-panel textarea { min-height:150px; width:100%; resize:vertical; border:1px solid var(--line); border-radius:12px; padding:13px 14px; background:var(--surface); color:var(--ink); font:inherit; }
.app-shell .profile-notes[data-record-section="attendance"] { gap:16px; }
.app-shell .profile-notes[data-record-section="attendance"] > .card-head { align-items:flex-start; }
.app-shell .record-filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-muted); }
.app-shell .record-filter-bar > span { margin-inline-end:auto; color:var(--muted); font-size:11px; font-weight:800; }
.app-shell .record-filter-bar button { min-height:32px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); font-size:11px; font-weight:800; cursor:pointer; }
.app-shell .record-filter-bar button.active { color:var(--purple); border-color:var(--purple); background:var(--purple-soft); }
.app-shell .record-filter-bar input { min-height:32px; border:1px solid var(--line); border-radius:9px; padding:0 8px; background:var(--surface); color:var(--ink); font:inherit; font-size:11px; }
.app-shell .record-stat-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.app-shell .record-stat-grid article { min-width:0; padding:12px; border:1px solid var(--line); border-top:3px solid var(--purple); border-radius:12px; background:var(--surface-muted); }
.app-shell .record-stat-grid article small,.app-shell .record-stat-grid article strong { display:block; }
.app-shell .record-stat-grid article small { color:var(--muted); font-size:10px; line-height:1.35; }
.app-shell .record-stat-grid article strong { margin-top:5px; color:var(--ink); font-size:22px; direction:ltr; }
.app-shell .record-stat-grid .stat-absence { border-top-color:var(--red); } .app-shell .record-stat-grid .stat-late { border-top-color:var(--orange); } .app-shell .record-stat-grid .stat-remote { border-top-color:var(--teal); } .app-shell .record-stat-grid .stat-positive { border-top-color:var(--green); } .app-shell .record-stat-grid .stat-negative { border-top-color:var(--red); }
.app-shell .record-timeline { display:grid; gap:8px; }
.app-shell .record-entry.attendance-entry { display:flex; align-items:flex-start; gap:11px; padding:13px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.app-shell .record-entry.attendance-entry.negative { border-inline-start:3px solid var(--red); background:color-mix(in srgb,var(--red-soft) 45%,var(--surface)); }
.app-shell .record-entry.attendance-entry.neutral { border-inline-start:3px solid var(--purple); }
.app-shell .record-entry-icon { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:9px; color:var(--purple); background:var(--purple-soft); font-weight:900; }
.app-shell .record-entry-main { min-width:0; flex:1; } .app-shell .record-entry-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .app-shell .record-entry-head strong { color:var(--ink); } .app-shell .record-entry-head time { color:var(--muted); font-size:10px; } .app-shell .record-entry-main p { margin:5px 0 0; color:var(--ink); font-size:11px; } .app-shell .record-entry-main small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.app-shell .profile-notes[data-record-section="attendance"] .profile-notes { display:contents; }
@media (max-width:900px) { .app-shell .record-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px) { .app-shell .attendance-mode-switch,.app-shell .standalone-note-types { grid-template-columns:1fr; } .app-shell .record-filter-bar > span { width:100%; margin-inline-end:0; } .app-shell .record-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .app-shell .record-filter-bar input { flex:1 1 120px; } }


/* Partner Care polish v30: one clear hierarchy for the attendance dialog. */
.app-shell .attendance-modal { width:min(660px,100%); }
.app-shell .attendance-modal .modal-head { padding-block:16px; }
.app-shell .attendance-modal .attendance-incident-content { gap:12px; }
.app-shell .attendance-modal .attendance-context-card { padding:12px 14px; }
.app-shell .attendance-modal .attendance-context-meta { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; color:var(--muted); font-size:10px; }
.app-shell .attendance-modal .attendance-context-meta strong { color:var(--ink); font-size:10px; }
.app-shell .attendance-modal .attendance-section-title { padding-bottom:2px; }
.app-shell .attendance-modal .attendance-section-title p { display:none; }
.app-shell .attendance-modal .attendance-section-index { display:none; }
.app-shell .attendance-modal .attendance-choice-group-head small { display:none; }
.app-shell .attendance-modal .standalone-note-panel { gap:12px; padding:15px; }
.app-shell .attendance-modal .standalone-note-panel textarea { min-height:130px; }
.app-shell .attendance-modal .attendance-mode-switch { margin:12px 0 14px; }
.app-shell .attendance-modal .modal-actions { position:static; margin:18px 0 0 !important; padding-bottom:18px; }
.app-shell .attendance-modal .attendance-mode-switch button { font-size:11px; }
@media (max-width:560px) {
  .app-shell .attendance-modal .modal-head { padding:14px 16px; }
  .app-shell .attendance-modal > .attendance-incident-content { margin-inline:14px; }
  .app-shell .attendance-modal .attendance-context-top { flex-direction:row; align-items:center; }
  .app-shell .attendance-modal .attendance-context-meta { justify-content:flex-start; }
  .app-shell .attendance-modal .attendance-mode-switch { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-shell .attendance-modal .attendance-mode-switch button { min-height:40px; padding-inline:5px; font-size:10px; }
}