:root {
  --brand-command: #0b1220;
  --brand-command-2: #162033;
  --brand-rail: #162033;
  --brand-primary: #123cff;
  --brand-primary-strong: #0822a8;
  --brand-secondary: #00a7c8;
  --brand-accent: #6b7280;
  --brand-ice: #eaf2ff;
  --brand-panel: #f6f9ff;
  --brand-surface: #ffffff;
  --brand-border: #b8c7dc;
  --brand-text: #111827;
  --brand-muted: #526173;
  --brand-on-command: #ffffff;
  --brand-on-command-panel: #ffffff;
  --brand-on-rail: #ffffff;
  --brand-on-primary: #ffffff;
  --brand-on-primary-strong: #ffffff;
  --brand-on-surface: #111827;
  --brand-on-panel: #111827;
  --brand-on-ice: #111827;
  --brand-success: #0f8a5f;
  --brand-warning: #ffb020;
  --brand-danger: #dc2626;
  --brand-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-primary-rgb: 18, 60, 255;
  --brand-secondary-rgb: 0, 167, 200;
  --brand-command-rgb: 11, 18, 32;
  --brand-rail-rgb: 22, 32, 51;
  --brand-command-border: color-mix(in srgb, var(--brand-primary) 28%, var(--brand-command-2));
  --brand-command-gradient:
    linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.18), transparent 52%),
    linear-gradient(135deg, var(--brand-command), var(--brand-command-2));
  --brand-command-active-gradient:
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  --brand-primary-gradient:
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  --brand-rail-gradient:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-rail) 86%, #ffffff) 0%, var(--brand-rail) 58%, color-mix(in srgb, var(--brand-rail) 86%, #000000) 100%);
  --frost-command: var(--brand-command);
  --frost-command-2: var(--brand-command-2);
  --frost-blue: var(--brand-primary);
  --frost-blue-soft: color-mix(in srgb, var(--brand-primary) 12%, #ffffff);
  --frost-teal: var(--brand-secondary);
  --frost-ice: var(--brand-ice);
  --frost-panel: var(--brand-panel);
  --frost-surface: var(--brand-surface);
  --frost-border: var(--brand-border);
  --frost-text: var(--brand-text);
  --frost-muted: var(--brand-muted);
  --frost-success: var(--brand-success);
  --frost-success-bg: #eaf7f1;
  --frost-warning: var(--brand-warning);
  --frost-warning-bg: #fff5e5;
  --frost-danger: var(--brand-danger);
  --frost-danger-bg: #fff1f2;
  color: var(--frost-text);
  background: var(--frost-ice);
  font-family: var(--brand-font-family);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

button,
input {
  font: inherit;
}

label > span,
button,
select,
option,
.nav button span,
.stat span,
.detail-grid span,
.wide-detail span {
  text-transform: capitalize;
}

button {
  cursor: pointer;
}

details > summary {
  cursor: pointer;
}

details > summary [data-details-toggle-state] {
  display: inline-grid;
  min-width: 54px;
  min-height: 26px;
  place-items: center;
  margin-left: 8px;
  border-radius: 999px;
  background: #e7efff;
  color: #1f3f8f;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  padding: 0 9px;
  text-transform: capitalize;
  white-space: nowrap;
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
  background: var(--frost-ice);
}

.rail {
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  position: sticky;
  top: 0;
  align-self: start;
  overflow: hidden;
  padding: 22px 16px;
  background:
    linear-gradient(180deg, #10192b 0%, #162033 58%, #0b1220 100%);
  color: var(--brand-on-rail);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brand {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 54px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
}

.rail .brand-logo {
  width: 58px;
  height: 58px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(255, 255, 255, 0.1);
}

.brand strong,
.topbar p,
.topbar h1 {
  display: block;
  margin: 0;
}

.nav {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.nav button,
.install {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: var(--brand-on-rail);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-align: left;
  font-weight: 800;
}

.nav button {
  justify-content: space-between;
}

.nav button span {
  min-width: 0;
}

.nav button b {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--frost-blue);
  color: var(--brand-on-primary);
  font-size: 11px;
  line-height: 1;
}

.nav button.active {
  color: var(--brand-on-primary);
  background: linear-gradient(135deg, var(--frost-command-2), rgba(33, 78, 229, 0.24));
  box-shadow: inset 3px 0 0 var(--frost-blue);
}

.install {
  margin-top: auto;
  justify-content: center;
  background: var(--frost-teal);
  color: #061817;
}

.top-install {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  background: var(--frost-blue);
  color: #ffffff;
  font-weight: 950;
  display: none;
}

.guide-button {
  min-height: 42px;
  border: 1px solid var(--frost-blue);
  border-radius: 8px;
  background: #ffffff;
  color: var(--frost-blue);
  font-size: 11px;
  font-weight: 950;
  padding: 0 10px;
  white-space: nowrap;
}

.guide-button {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  color: #ffffff;
  border-color: var(--brand-primary);
}

.guide-button:hover,
.guide-button:focus-visible {
  background: rgba(33, 78, 229, 0.08);
  outline: 0;
}

.guide-button:hover,
.guide-button:focus-visible {
  background: linear-gradient(135deg, var(--brand-primary-strong), var(--brand-primary));
}

.workspace {
  padding: 24px;
  display: grid;
  gap: 18px;
  align-content: start;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar p {
  color: var(--frost-muted);
  font-size: 13px;
  font-weight: 800;
}

.topbar h1 {
  margin-top: 4px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}

.return-navigation {
  width: fit-content;
  min-height: 42px;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #b8c8ff;
  border-radius: 8px;
  background: #f7fbff;
  color: var(--frost-blue);
  cursor: pointer;
  padding: 8px 12px;
  text-align: left;
}

.return-navigation:hover,
.return-navigation:focus-visible {
  border-color: var(--frost-blue);
  box-shadow: 0 0 0 3px rgba(33, 78, 229, 0.12);
  outline: 0;
}

.return-navigation span {
  color: #607083;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.return-navigation strong {
  color: var(--frost-blue);
  font-size: 13px;
}

.search {
  width: min(100%, 245px);
  padding: 8px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #d3dee9;
  display: grid;
  gap: 3px;
}

.search span {
  color: #607083;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #17212f;
}

.role-switch {
  min-height: 42px;
  padding: 4px;
  border-radius: 8px;
  background: #d7e3ee;
  display: inline-flex;
  gap: 4px;
}

.role-switch button {
  min-width: 112px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #44596b;
  font-size: 13px;
  font-weight: 900;
}

.role-switch button.active {
  background: #ffffff;
  color: #0b1824;
  box-shadow: 0 1px 4px rgba(17, 26, 32, 0.12);
}

.user-menu {
  min-height: 42px;
  max-width: 190px;
  padding: 5px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #d3dee9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-menu div {
  padding-left: 8px;
  min-width: 0;
}

.user-menu span,
.user-menu strong {
  display: block;
}

.user-menu span {
  color: var(--frost-blue);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.user-menu strong {
  color: #17212f;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: #e8f1ff;
  color: var(--frost-blue);
  font-size: 13px;
  font-weight: 900;
  padding: 0 10px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cfdae6;
  text-align: left;
}

.stat-button {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.stat-button:hover,
.stat-button.active {
  border-color: var(--frost-blue);
  box-shadow: inset 0 0 0 1px var(--frost-blue);
}

.stat-button.active {
  background: linear-gradient(135deg, var(--frost-blue), #1639b8);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(33, 78, 229, 0.18);
}

.stat-button.active span,
.stat-button.active strong,
.stat-button.active small {
  color: #ffffff;
}

.stat span,
.detail-grid span,
.section-title span,
.job-row small,
.tech-card span,
.invoice span {
  color: #607083;
  font-size: 12px;
}

.stat span {
  width: 100%;
  line-height: 1.15;
}

.stat strong {
  display: block;
  margin-top: 0;
  font-size: 28px;
  line-height: 1;
}

.stat small {
  display: block;
  width: 100%;
  color: #44596b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}

.stat.warn {
  border-color: #f4c978;
  background: linear-gradient(135deg, #fff5e5, #fffaf2);
}

.stat.good {
  border-color: #addfca;
  background: linear-gradient(135deg, #eaf7f1, #f7fcfa);
}

.stat.bad {
  border-color: #f4b7bd;
  background: linear-gradient(135deg, #fff1f2, #fff7f8);
}

.stats .stat,
.system-status-grid .stat {
  border-top: 4px solid var(--frost-blue);
}

.stats .stat.warn,
.system-status-grid .stat.warn {
  border-top-color: var(--frost-warning);
}

.stats .stat.good,
.system-status-grid .stat.good {
  border-top-color: var(--frost-success);
}

.stats .stat.bad,
.system-status-grid .stat.bad {
  border-top-color: var(--frost-danger);
}

.summary-items {
  display: grid;
  gap: 8px;
}

.summary-item {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d3dee9;
  border-radius: 8px;
  background: #f7fbff;
  color: #17212f;
  padding: 10px;
  text-align: left;
}

.summary-item:hover {
  border-color: #214ee5;
}

.summary-item span,
.summary-item small {
  display: block;
  color: #607083;
  font-size: 12px;
}

.summary-item strong {
  display: block;
  margin-top: 3px;
}

.summary-item b {
  width: max-content;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, #ffffff);
  background: color-mix(in srgb, var(--brand-primary) 12%, #ffffff);
  color: var(--brand-primary-strong);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 950;
}

.crew-summary-item {
  cursor: default;
}

.summary-drilldown {
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
  overflow: hidden;
}

.summary-drilldown summary {
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  list-style: none;
}

.summary-drilldown summary::-webkit-details-marker {
  display: none;
}

.summary-drilldown summary div {
  display: grid;
  gap: 4px;
}

.summary-drilldown summary strong {
  color: #17212f;
  font-size: 15px;
}

.summary-drilldown summary span {
  color: #607083;
  font-size: 12px;
  font-weight: 800;
}

.summary-drilldown summary b {
  width: max-content;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  color: #ffffff;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.22);
}

.summary-drilldown[open] summary {
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--brand-command-2));
  background:
    linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.18), transparent 52%),
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
}

.summary-drilldown-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--brand-border);
  background:
    linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.06), transparent 55%),
    var(--brand-panel);
}

.operations-dashboard {
  display: grid;
  gap: 12px;
}

.permission-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(30, 64, 175, 0.22);
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  margin-left: 0.4rem;
  padding: 0.24rem 0.48rem;
  text-transform: uppercase;
}

.operations-dashboard > .section-title {
  padding: 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.operations-dashboard > .section-title button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-weight: 900;
  padding: 0 12px;
}

.operations-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.operations-stats article {
  min-height: 78px;
  display: grid;
  gap: 5px;
  align-content: center;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.operations-stats span {
  color: #607083;
  font-size: 12px;
  font-weight: 850;
}

.operations-stats strong {
  color: #17212f;
  font-size: 28px;
}

.operations-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.operations-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.operations-list {
  display: grid;
  gap: 10px;
}

.operations-item {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-left: 5px solid #214ee5;
  border-radius: 8px;
  background: #f7fbff;
}

.operations-group.warn .operations-item,
.operations-item.report-submitted {
  border-left-color: #b86b00;
}

.operations-group.blocked .operations-item,
.operations-item.report-rejected {
  border-left-color: #b42318;
}

.operations-group.good .operations-item {
  border-left-color: #167a5b;
}

.operations-open {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.operations-open span,
.operations-open small,
.operations-meta span {
  display: block;
  color: #607083;
  font-size: 12px;
}

.operations-open strong {
  display: block;
  margin-top: 3px;
  color: #17212f;
}

.operations-open b {
  width: max-content;
  border-radius: 999px;
  padding: 6px 9px;
  background: #e7efff;
  color: #1f3f8f;
  font-size: 12px;
}

.operations-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.operations-meta span {
  border-radius: 999px;
  padding: 5px 8px;
  background: #e8f1ff;
}

.operations-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.operations-actions a,
.operations-actions button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-weight: 950;
  text-decoration: none;
}

.operations-review {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.operations-inbox,
.audit-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.operations-inbox-list,
.audit-list {
  display: grid;
  gap: 8px;
}

.project-activity-panel > summary.section-title {
  cursor: pointer;
  list-style: none;
}

.project-activity-panel > summary.section-title::-webkit-details-marker {
  display: none;
}

.project-activity-panel > summary.section-title b[data-details-toggle-state] {
  min-width: 58px;
  min-height: 28px;
  border: 1px solid var(--theme-pill-closed-border, #c7d2fe);
  border-radius: 999px;
  background: var(--theme-pill-closed-background, #eef2ff);
  color: var(--theme-pill-closed-color, #17212f);
  display: grid;
  place-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
}

.operations-inbox-item,
.audit-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #d3dee9;
  border-left: 4px solid #214ee5;
  border-radius: 8px;
  background: #f7fbff;
}

.operations-inbox-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.operations-inbox-item span,
.operations-inbox-item small,
.audit-item span,
.audit-item small,
.inline-audit span {
  display: block;
  color: #607083;
  font-size: 12px;
  font-weight: 850;
}

.operations-inbox-item strong,
.audit-item strong {
  display: block;
  margin-top: 3px;
  color: #17212f;
}

.operations-inbox-item button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-weight: 950;
  padding: 0 12px;
}

.field-inbox-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.field-inbox-lanes article {
  min-height: 92px;
  display: grid;
  gap: 4px;
  align-content: center;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.field-inbox-lanes article.has-items {
  border-color: #f4c978;
  background: #fff8ed;
}

.field-inbox-lanes span,
.field-inbox-lanes small {
  color: #607083;
  font-size: 12px;
  font-weight: 850;
}

.field-inbox-lanes strong {
  color: #17212f;
  font-size: 28px;
}

.audit-item p {
  margin: 0;
  color: #2f4052;
  line-height: 1.4;
}

.inline-audit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inline-audit span {
  border-radius: 999px;
  padding: 5px 8px;
  background: #e8f1ff;
}

.board {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
  gap: 16px;
  align-items: start;
}

.alerts-panel,
.project-calendar,
.create-panel,
.edit-panel {
  padding: 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.edit-panel {
  border-color: #bfd6ff;
  background: #f7fbff;
}

.alerts-panel {
  display: grid;
  gap: 10px;
  border-color: #cbd7df;
}

.alerts-dropdown {
  padding: 0;
  overflow: hidden;
}

.alerts-panel-summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #ffffff;
  color: #17212f;
  cursor: pointer;
  list-style: none;
}

.alerts-panel-summary::-webkit-details-marker {
  display: none;
}

.alerts-panel-summary div {
  display: grid;
  gap: 3px;
}

.alerts-panel-summary strong {
  font-size: 15px;
}

.alerts-panel-summary span {
  color: #607083;
  font-size: 13px;
  font-weight: 800;
}

.alerts-panel-summary b {
  border-radius: 999px;
  background: #e8f1ff;
  color: #214ee5;
  font-size: 11px;
  font-weight: 950;
  padding: 5px 9px;
  text-transform: uppercase;
}

.alerts-dropdown[open] .alerts-panel-summary {
  border-bottom: 1px solid #cfdae6;
  border-radius: 8px 8px 0 0;
}

.alerts-dropdown[open] .alerts-panel-summary b {
  font-size: 0;
}

.alerts-dropdown[open] .alerts-panel-summary b::before {
  content: "Close";
  font-size: 11px;
}

.alerts-dropdown .alert-list,
.alerts-dropdown .empty-alerts {
  margin: 10px;
}

.system-status-page {
  display: grid;
  gap: 12px;
}

.system-status-hero,
.system-status-table {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.system-status-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.system-status-hero span,
.system-status-hero p {
  display: block;
  margin: 0;
  color: #607083;
  font-size: 12px;
  font-weight: 850;
}

.system-status-hero strong {
  display: block;
  margin: 3px 0;
  color: #17212f;
  font-size: 22px;
}

.system-status-hero button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  cursor: pointer;
  font-weight: 900;
  padding: 0 14px;
}

.system-status-grid,
.system-status-columns {
  display: grid;
  gap: 12px;
}

.system-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.system-panel-stat {
  min-height: 112px;
  align-content: start;
}

.system-panel-stat small {
  margin-top: auto;
  color: #607083;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.system-status-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-active-panel,
.system-check-panel,
.system-permission-roster,
.system-permission-audit,
.system-user-permission-panel,
.system-email-panel,
.system-storage-panel,
.system-database-panel,
.system-mobile-panel,
.system-security-panel,
.system-checklist-panel {
  display: grid;
  gap: 12px;
}

.system-active-panel {
  padding: 14px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.system-active-panel > .go-live-readiness {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.system-active-panel > .go-live-readiness {
  border-left: 0;
}

.system-active-panel .section-title button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  cursor: pointer;
  font-weight: 900;
  padding: 0 12px;
}

.system-user-permission-grid,
.system-email-grid,
.system-storage-grid,
.system-database-grid,
.system-mobile-grid,
.system-security-grid,
.system-checklist-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.system-user-permission-panel,
.system-email-panel,
.system-storage-panel,
.system-database-panel,
.system-mobile-panel,
.system-security-panel,
.system-checklist-panel {
  padding: 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
}

.system-document-list {
  display: grid;
  gap: 8px;
}

.system-document-list article {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(130px, auto) minmax(90px, auto) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.system-document-list strong,
.system-document-list span,
.system-document-list small,
.system-document-list em,
.system-document-list a {
  display: block;
}

.system-document-list strong {
  color: #17212f;
}

.system-document-list span,
.system-document-list small,
.system-document-list em {
  color: #44596b;
  font-size: 12px;
  line-height: 1.3;
}

.system-document-list em {
  color: #214ee5;
  font-style: normal;
  font-weight: 900;
  text-transform: capitalize;
}

.system-document-list a {
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.system-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #e7eef5;
}

.system-status-row:last-child {
  border-bottom: 0;
}

.system-status-row span {
  color: #607083;
  font-weight: 850;
}

.system-status-row strong {
  color: #17212f;
  overflow-wrap: anywhere;
  text-align: right;
}

.system-roster-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.system-roster-list article {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
}

.system-roster-list strong,
.system-roster-list span,
.system-roster-list small {
  display: block;
}

.system-roster-list strong {
  color: #17212f;
}

.system-roster-list span {
  color: #607083;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.system-roster-list small {
  color: #214ee5;
  font-weight: 900;
}

.permission-audit-list {
  display: grid;
  gap: 8px;
}

.permission-audit-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(160px, 0.65fr) minmax(240px, 1.4fr) minmax(190px, 0.9fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
}

.permission-audit-row.good {
  border-color: #addfca;
  background: #eaf7f1;
}

.permission-audit-row.warn {
  border-color: #f4c978;
  background: #fff5e5;
}

.permission-audit-row.bad {
  border-color: #f4b7bd;
  background: #fff1f2;
}

.permission-audit-row strong,
.permission-audit-row b,
.permission-audit-row span,
.permission-audit-row small,
.permission-audit-row p,
.permission-audit-row em {
  display: block;
}

.permission-audit-row strong,
.permission-audit-row b {
  color: #17212f;
}

.permission-audit-row span,
.permission-audit-row small,
.permission-audit-row p,
.permission-audit-row em {
  margin: 0;
  color: #44596b;
  font-size: 12px;
  line-height: 1.35;
}

.permission-audit-row em {
  color: #214ee5;
  font-style: normal;
  font-weight: 900;
}

.go-live-readiness {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #cfdae6;
  border-left: 5px solid #214ee5;
  border-radius: 8px;
  background: #ffffff;
}

.go-live-readiness.blocked {
  border-left-color: #b42318;
}

.go-live-readiness.pilot-ready {
  border-left-color: #b86b00;
}

.go-live-readiness.go-live-ready {
  border-left-color: #0f8f8c;
}

.readiness-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.readiness-list article {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
  padding: 10px;
}

.readiness-list article.pass {
  border-color: #addfca;
  background: #eaf7f1;
}

.readiness-list article.warn {
  border-color: #f4c978;
  background: #fff5e5;
}

.readiness-list article.blocker {
  border-color: #f4b7bd;
  background: #fff1f2;
}

.readiness-list span {
  color: #607083;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.readiness-list strong {
  color: #17212f;
}

.readiness-list p {
  margin: 0;
  color: #44596b;
  font-size: 13px;
  line-height: 1.35;
}

.delivery-status {
  display: inline-flex;
  justify-content: center;
  min-width: 76px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f1ff;
  color: #214ee5;
  font-style: normal;
  font-weight: 800;
}

.delivery-status.sent {
  background: #e8f5ee;
  color: #217346;
}

.delivery-status.queued {
  background: #fff4d9;
  color: #8a5a00;
}

.delivery-status.failed {
  background: #fde8e8;
  color: #9f1d1d;
}

.delivery-status.skipped {
  background: #e7eef5;
  color: #607083;
}

.location-picker-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.location-picker-search label {
  display: grid;
  gap: 5px;
}

.location-picker-manual-link {
  display: grid;
  gap: 5px;
}

.location-picker-search span,
.location-picker-manual-link span {
  color: #607083;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.location-picker-search input,
.location-picker-manual-link input {
  min-height: 40px;
  width: 100%;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
  color: #17212f;
  font: inherit;
  padding: 0 10px;
}

.location-picker-search button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  cursor: pointer;
  font-weight: 950;
  padding: 0 14px;
}

.location-picker-results {
  display: grid;
  gap: 6px;
}

.location-picker-results:empty {
  display: none;
}

.location-picker-results button {
  min-height: 48px;
  display: grid;
  gap: 3px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
  color: #17212f;
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
  text-align: left;
}

.location-picker-results button:hover {
  border-color: #214ee5;
  background: #edf4ff;
}

.location-picker-results strong {
  font-size: 13px;
}

.location-picker-results span,
.location-picker-results p {
  margin: 0;
  color: #607083;
  font-size: 12px;
  line-height: 1.35;
}

.map-loading {
  min-height: 430px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  color: #44596b;
}

.map-loading strong {
  color: #17212f;
  font-size: 18px;
}

.map-static-fallback {
  min-height: 430px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.44) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.44) 1px, transparent 1px),
    linear-gradient(135deg, #d9ebef, #eef4e8 48%, #e5eef6);
  background-size: 44px 44px, 44px 44px, auto;
  color: #44596b;
  text-align: center;
}

.map-static-fallback strong {
  color: #17212f;
  font-size: 18px;
}

.alert-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.alert-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid #cfdae6;
  border-left: 5px solid #214ee5;
  border-radius: 8px;
  background: #f7fbff;
}

.alert-card.critical {
  border-left-color: #b42318;
  background: #fff1f2;
}

.alert-card.warning {
  border-left-color: #f28c28;
  background: #fff8ed;
}

.alert-card.info {
  border-left-color: #214ee5;
}

.alert-card span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  border-radius: 999px;
  background: #edf3ff;
  color: #43546a;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  padding: 4px 8px;
  text-transform: uppercase;
}

.alert-card strong {
  display: block;
  color: #17212f;
  font-size: 15px;
}

.alert-card p,
.empty-alerts {
  margin: 4px 0 0;
  color: #607083;
  font-size: 13px;
  line-height: 1.45;
}

.create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.draft-banner {
  grid-column: 1 / -1;
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid #f4c978;
  border-radius: 8px;
  background: #fff5e5;
  color: #77500b;
  font-size: 13px;
  font-weight: 850;
  padding: 8px 10px;
}

.offline-banner {
  min-height: 64px;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #f4c978;
  border-left: 5px solid #b86b00;
  border-radius: 8px;
  background: #fff5e5;
}

.offline-banner strong,
.offline-banner span {
  display: block;
}

.offline-banner strong {
  color: #77500b;
}

.offline-banner span {
  color: #44596b;
  line-height: 1.4;
}

.draft-center {
  border-color: #f4c978;
  background: #fff8ed;
}

.draft-list {
  display: grid;
  gap: 8px;
}

.draft-card {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-left: 5px solid #b86b00;
  border-radius: 8px;
  background: #ffffff;
}

.draft-card.old {
  border-left-color: #b42318;
}

.draft-card span,
.draft-card small {
  display: block;
  color: #607083;
  font-size: 12px;
}

.draft-card span {
  color: #214ee5;
  font-weight: 950;
  text-transform: uppercase;
}

.draft-card strong {
  display: block;
  margin-top: 3px;
  color: #17212f;
}

.draft-card button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #f2e5e7;
  color: #b42318;
  font-weight: 900;
  padding: 0 10px;
}

.create-form.stacked {
  grid-template-columns: 1fr;
}

.create-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.create-form label.wide {
  grid-column: span 2;
}

.create-form label.full {
  grid-column: 1 / -1;
}

.create-form .field-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.create-form .field-block.wide {
  grid-column: span 2;
}

.create-form .field-block.full {
  grid-column: 1 / -1;
}

.create-form fieldset {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
}

.create-form legend {
  grid-column: 1 / -1;
  width: 100%;
  color: #607083;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  padding: 0;
}

.create-form legend button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: #e8f1ff;
  color: #17212f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  padding: 0 10px;
  text-transform: uppercase;
}

.create-form legend button b {
  border-radius: 999px;
  background: #ffffff;
  color: #214ee5;
  font-size: 11px;
  padding: 4px 8px;
}

.create-form fieldset.collapsed {
  gap: 0;
}

.create-form fieldset.collapsed > :not(legend) {
  display: none !important;
}

.create-form fieldset label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: #34465a;
  font-size: 13px;
  font-weight: 800;
}

.create-form fieldset input {
  width: auto;
  min-height: auto;
}

.create-form .project-form-section {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #ffffff;
}

.create-form .project-basics-section {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.create-form .project-form-section label {
  display: grid;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.create-form .project-form-section input,
.create-form .project-form-section select,
.create-form .project-form-section textarea {
  width: 100%;
  min-height: 40px;
}

.project-basics-map-lookup {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
}

.project-basics-map-lookup div {
  display: grid;
  gap: 3px;
}

.project-basics-map-lookup strong {
  color: #17212f;
  font-size: 13px;
}

.project-basics-map-lookup span {
  color: #607083;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.project-basics-map-lookup button {
  min-height: 36px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
  white-space: nowrap;
}

.project-create-required-status {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}

.project-create-required-status div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.project-create-required-status strong {
  color: #17212f;
  font-size: 13px;
}

.project-create-required-status span {
  color: #607083;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.project-create-required-status .complete {
  border-color: rgba(28, 122, 91, 0.28);
  background: #f1fff9;
}

.project-create-required-status .missing {
  border-color: rgba(214, 129, 47, 0.36);
  background: #fff8ed;
}

.create-form button[data-project-create-submit][data-project-submit-ready="false"] {
  opacity: 0.78;
}

.checkbox-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  position: relative;
}

.checkbox-picker-summary {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
  color: #17212f;
  cursor: pointer;
  list-style: none;
  min-width: 0;
}

.checkbox-picker-summary::-webkit-details-marker {
  display: none;
}

.checkbox-picker-summary span {
  min-width: 0;
  overflow: hidden;
  color: #17212f;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.checkbox-picker-summary b {
  color: #214ee5;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.checkbox-picker-summary b::after {
  content: "";
}

.checkbox-picker[open] .checkbox-picker-summary {
  border-color: #214ee5;
  box-shadow: 0 0 0 3px rgba(33, 78, 229, 0.12);
}

.checkbox-picker[open] .checkbox-picker-summary b::after {
  content: "";
}

.checkbox-picker-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  max-height: 300px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.checkbox-picker-panel > small {
  color: #607083;
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
}

.checkbox-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
  min-width: 0;
}

.checkbox-picker-grid p {
  grid-column: 1 / -1;
  margin: 0;
  color: #607083;
  font-size: 13px;
}

.create-form .checkbox-picker-option,
.create-form fieldset .checkbox-picker-option,
.create-form .project-form-section .checkbox-picker-option {
  min-width: 0;
  min-height: 58px;
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: start !important;
  gap: 9px !important;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
  cursor: pointer;
}

.checkbox-picker-option input {
  width: 18px !important;
  height: 18px;
  min-height: auto !important;
  margin-top: 2px;
  accent-color: #214ee5;
}

.checkbox-picker-option span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.checkbox-picker-option strong {
  color: #17212f;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.checkbox-picker-option em {
  color: #607083;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.checkbox-picker-option.selected,
.checkbox-picker-option:has(input:checked) {
  border-color: #214ee5 !important;
  box-shadow: inset 0 0 0 1px #214ee5;
  background: #edf4ff !important;
}

.create-form .checkbox-picker-option.disabled,
.create-form fieldset .checkbox-picker-option.disabled,
.create-form .project-form-section .checkbox-picker-option.disabled {
  cursor: not-allowed;
  opacity: 0.68;
  background: #eef3f8 !important;
}

.checkbox-picker-option.disabled input {
  cursor: not-allowed;
}

.checkbox-picker-option.disabled strong,
.checkbox-picker-option.disabled em {
  color: #607083 !important;
}

.workspace .create-form .checkbox-picker > summary span[data-checkbox-picker-summary] {
  border-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.workspace .create-form .checkbox-picker-panel {
  border-color: var(--brand-border) !important;
  background: var(--brand-surface) !important;
  color: var(--brand-on-surface) !important;
  box-shadow: 0 14px 28px rgba(var(--brand-command-rgb), 0.08) !important;
}

.workspace .create-form .checkbox-picker-panel > small {
  color: var(--brand-muted) !important;
}

.workspace .create-form .checkbox-picker-option,
.workspace .create-form fieldset .checkbox-picker-option,
.workspace .create-form .project-form-section .checkbox-picker-option {
  border-color: var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-primary) 3%, var(--brand-surface)) !important;
  color: var(--brand-text) !important;
  box-shadow: none !important;
}

.workspace .create-form .checkbox-picker-option strong {
  color: var(--brand-text) !important;
}

.workspace .create-form .checkbox-picker-option em {
  color: var(--brand-muted) !important;
}

.workspace .create-form .checkbox-picker-option.selected,
.workspace .create-form .checkbox-picker-option:has(input:checked) {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.16) !important;
}

.workspace .create-form .checkbox-picker-option.disabled,
.workspace .create-form fieldset .checkbox-picker-option.disabled,
.workspace .create-form .project-form-section .checkbox-picker-option.disabled {
  border-color: var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-muted) 10%, var(--brand-surface)) !important;
  color: var(--brand-muted) !important;
  box-shadow: none !important;
}

.workspace .create-form .checkbox-picker-option.selected strong,
.workspace .create-form .checkbox-picker-option.selected em,
.workspace .create-form .checkbox-picker-option:has(input:checked) strong,
.workspace .create-form .checkbox-picker-option:has(input:checked) em {
  color: inherit !important;
}

.scope-hidden {
  display: none !important;
}

.create-form span {
  color: #607083;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.create-form input,
.create-form select,
.create-form textarea {
  min-height: 40px;
  width: 100%;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
  color: #17212f;
  font: inherit;
  padding: 8px 10px;
  outline: 0;
}

.create-form textarea {
  min-height: 82px;
  resize: vertical;
}

.create-form input:focus,
.create-form select:focus,
.create-form textarea:focus {
  border-color: #0f8f8c;
  box-shadow: 0 0 0 3px rgba(15, 143, 140, 0.14);
}

.create-form button {
  min-height: 42px;
  align-self: end;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-weight: 950;
}

.create-form button:disabled {
  opacity: 0.68;
}

.detail-page-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.detail-page-toolbar button {
  min-height: 36px;
  border: 1px solid #cfdbe2;
  border-radius: 8px;
  background: #ffffff;
  color: #17212f;
  font-weight: 900;
  padding: 0 12px;
}

.detail-page-toolbar span {
  color: #607083;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.detail-grid .wide-detail {
  grid-column: 1 / -1;
}

.preference-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.preference-badges span {
  width: max-content;
  border-radius: 999px;
  padding: 5px 8px;
  background: #e7efff;
  color: #1f3f8f;
  font-size: 11px;
  font-weight: 900;
}

.month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-month-controls {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}

.calendar-month-controls label {
  display: grid;
  gap: 4px;
}

.calendar-month-controls label span {
  color: #607083;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.calendar-month-controls button,
.calendar-month-controls input {
  min-height: 36px;
  border: 1px solid #cfd9df;
  border-radius: 8px;
  background: #ffffff;
  color: #17212f;
  font-weight: 900;
  padding: 0 10px;
}

.calendar-month-controls button {
  min-width: 42px;
  background: #edf3f6;
}

.calendar-holiday-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid #f1d596;
  border-radius: 8px;
  background: #fff8ed;
}

.calendar-holiday-strip strong {
  color: #5f3d05;
  font-size: 12px;
  text-transform: uppercase;
}

.calendar-holiday-strip span {
  color: #5f3d05;
  font-size: 12px;
  font-weight: 850;
}

.calendar-holiday-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: #fff0c8;
  padding: 0 10px;
}

.mobile-calendar-agenda {
  display: none;
}

.employee-week-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.employee-week-day {
  min-height: 132px;
  padding: 8px;
  border: 1px solid #d3dee9;
  border-radius: 8px;
  background: #f7fbff;
  display: grid;
  gap: 6px;
  align-content: start;
}

.employee-week-day.today {
  border-color: #0f8f8c;
  box-shadow: inset 0 0 0 1px #0f8f8c;
}

.employee-week-day.holiday {
  background: #fff8ed;
  border-color: #f4c978;
}

.employee-week-day > span {
  color: #214ee5;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.employee-week-day > strong {
  color: #17212f;
  font-size: 14px;
}

.open-week-day {
  color: #607083;
  font-size: 12px;
  font-weight: 800;
}

.calendar-label {
  color: #607083;
  font-size: 11px;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.month-day {
  min-height: 108px;
  padding: 7px;
  border: 1px solid #d3dee9;
  border-radius: 8px;
  background: #f7fbff;
  display: grid;
  gap: 5px;
  align-content: start;
}

.month-day.muted {
  background: #f2f5f7;
  border-style: dashed;
}

.month-day.today {
  border-color: #0f8f8c;
  box-shadow: inset 0 0 0 1px #0f8f8c;
}

.month-day.holiday {
  background: #fff8ed;
  border-color: #f4c978;
}

.month-day > span {
  color: #2f4f5f;
  font-size: 12px;
  font-weight: 950;
}

.calendar-holiday {
  width: 100%;
  min-height: 34px;
  border-radius: 6px;
  background: #fff0c8;
  color: #5f3d05;
  display: grid;
  align-content: center;
  padding: 6px 7px;
}

.calendar-holiday strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-holiday strong {
  font-size: 11px;
}

.calendar-project {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 6px;
  background: var(--project-color, #214ee5);
  color: #ffffff;
  display: grid;
  gap: 2px;
  padding: 6px;
  text-align: left;
}

.calendar-project.active {
  box-shadow: 0 0 0 2px #0b1824, 0 0 0 4px rgba(15, 143, 140, 0.42);
}

.calendar-project strong,
.calendar-project small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-project strong {
  font-size: 12px;
}

.calendar-project small {
  color: inherit;
  font-size: 10px;
  opacity: 0.82;
}

.mobile-agenda-item {
  width: 100%;
  min-height: 58px;
  border: 1px solid #cfdae6;
  border-left: 5px solid var(--project-color);
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  text-align: left;
}

.mobile-agenda-item.active {
  border-color: #214ee5;
  border-left-color: var(--project-color);
  box-shadow: inset 0 0 0 1px #214ee5;
}

.mobile-agenda-item span {
  color: #214ee5;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.mobile-agenda-item b,
.mobile-agenda-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-agenda-item small {
  color: #607083;
  font-size: 12px;
  margin-top: 3px;
}

.empty-state-panel{
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.empty-state-panel p {
  margin: 0;
  color: #607083;
}

.job-list,
.detail,
.tech-card,
.invoice {
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.job-list {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  padding: 4px 2px 8px;
}

.job-row {
  width: 100%;
  min-height: 74px;
  border: 1px solid #d3dee9;
  border-radius: 8px;
  background: #f7fbff;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  text-align: left;
}

.job-row.active {
  border-color: #214ee5;
  background: #edf4ff;
  box-shadow: inset 4px 0 0 #214ee5;
}

.time {
  color: #2f4f5f;
  font-size: 13px;
  font-weight: 950;
}

.job-copy strong,
.job-copy small {
  display: block;
}

.status,
.pill {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.status.scheduled {
  color: #1f3f8f;
  background: #e7efff;
}

.status.in-progress {
  color: #77500b;
  background: #fff0c8;
}

.status.needs-permit,
.pill.urgent,
.pill.high {
  color: #b42318;
  background: #ffe0e3;
}

.status.completed,
.pill.low,
.pill.medium {
  color: #167a5b;
  background: #daf5ed;
}

.detail {
  padding: 18px;
  display: grid;
  gap: 16px;
}

.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
}

.detail p {
  margin: 0;
  color: #44596b;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-grid div,
.notes,
.checklist label {
  border-radius: 8px;
  background: #f3f7fb;
  padding: 12px;
}

.detail-grid strong,
.notes strong {
  display: block;
  margin-top: 4px;
}

.checklist {
  display: grid;
  gap: 8px;
}

.checklist label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
}

.location-picker-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.location-picker-row strong,
.location-picker-row span {
  display: block;
}

.location-picker-row strong {
  color: #17212f;
}

.location-picker-row span {
  margin-top: 3px;
  color: #607083;
  font-size: 12px;
  font-weight: 850;
}

.location-picker-row button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  cursor: pointer;
  font-weight: 900;
  padding: 0 12px;
}

.location-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 26, 32, 0.62);
}

.location-picker-card {
  width: min(920px, 100%);
  display: grid;
  gap: 12px;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 24px 70px rgba(17, 26, 32, 0.28);
}

.location-picker-head,
.location-picker-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.location-picker-head strong,
.location-picker-head span,
.location-picker-foot span {
  display: block;
}

.location-picker-head strong {
  color: #17212f;
  font-size: 18px;
}

.location-picker-head span,
.location-picker-foot span {
  margin-top: 3px;
  color: #607083;
  font-size: 12px;
  font-weight: 850;
}

.location-picker-head button,
.location-picker-foot button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: #cfdae6;
  color: #17212f;
  cursor: pointer;
  font-weight: 900;
  padding: 0 12px;
}

.location-picker-foot button {
  background: #214ee5;
  color: #ffffff;
}

.location-picker-foot button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.location-picker-map {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #e8f1ff;
}

.location-picker-marker {
  background: transparent;
  border: 0;
}

.location-picker-marker span {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  border: 3px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  background: #3f16e8;
  box-shadow: 0 8px 18px rgba(24, 28, 44, 0.35);
  transform: rotate(-45deg);
}

.location-picker-marker span::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #ffffff;
}

.requirement-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.requirement-actions .danger {
  background: #f2d9d9;
  color: #b42318;
}

.actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.actions button,
.invoice button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-weight: 900;
}

.actions .secondary {
  background: #f5b942;
  color: #1d1605;
}

.actions .danger {
  background: #b42318;
  color: #ffffff;
}

.cards,
.asset-list,
.office-page,
.my-day {
  display: grid;
  gap: 12px;
}

.office-panel,
.my-day-hero,
.my-day-panel {
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.my-day-hero {
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
}

.my-day-hero span,
.my-day-status span,
.my-day-project-head span,
.my-day-project-meta span,
.my-day-checklist span {
  color: #214ee5;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.my-day-hero h2,
.my-day-hero p {
  margin: 0;
}

.my-day-hero h2 {
  margin-top: 4px;
  color: #17212f;
  font-size: 30px;
  line-height: 1;
}

.my-day-hero p {
  margin-top: 8px;
  color: #44596b;
  line-height: 1.45;
}

.my-day-status {
  min-width: 140px;
  display: grid;
  gap: 6px;
  justify-items: end;
  padding: 14px;
  border-radius: 8px;
  background: #eaf7f1;
  border: 1px solid #addfca;
}

.my-day-status strong {
  color: #167a5b;
  font-size: 34px;
  line-height: 1;
}

.office-stats,
.office-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.office-workspace {
  align-items: start;
}

.office-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.my-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.my-day-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.daily-report-panel {
  border-color: #b8c8ff;
}

.rejected-report-panel {
  border-color: #f4b7bd;
  background: #fff1f2;
}

.rejected-time-panel {
  border-color: #f4b7bd;
  background: #fff1f2;
}

.my-day-action-alerts {
  border-color: #f4c978;
  background: #fff8ed;
}

.my-day-safety-center {
  border-color: #b8c8ff;
  background: #f7fbff;
}

.my-day-safety-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.my-day-safety-grid > section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
}

.mini-section-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.mini-section-title strong {
  color: #17212f;
  font-size: 14px;
}

.mini-section-title span {
  border-radius: 999px;
  background: #214ee5;
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  padding: 5px 8px;
  text-transform: uppercase;
}

.employee-certification-badges,
.safety-form-status-list,
.official-document-list {
  display: grid;
  gap: 8px;
}

.employee-certification-badges span,
.safety-form-status-list article,
.official-document-list a {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-left: 5px solid #214ee5;
  border-radius: 8px;
  background: #ffffff;
  color: #17212f;
  text-decoration: none;
}

.employee-certification-badges span.current,
.safety-form-status-list article.complete,
.safety-form-status-list article.current {
  border-left-color: #167a5b;
}

.employee-certification-badges span.due-soon {
  border-left-color: #b86b00;
  background: #fff8ed;
}

.employee-certification-badges span.expired,
.safety-form-status-list article.blocked {
  border-left-color: #d33b47;
  background: #fff1f2;
}

.employee-certification-badges b,
.safety-form-status-list strong,
.official-document-list span {
  overflow-wrap: anywhere;
  color: #17212f;
  font-size: 14px;
  font-weight: 950;
}

.employee-certification-badges small,
.safety-form-status-list small,
.official-document-list b,
.official-document-list small {
  overflow-wrap: anywhere;
  color: #607083;
  font-size: 12px;
  font-weight: 850;
}

.my-day-workflow {
  border-color: #b8c8ff;
  background: #f7fbff;
}

.my-day-project-picker {
  min-width: 260px;
  display: grid;
  gap: 5px;
}

.my-day-project-picker span {
  color: #214ee5;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.my-day-project-picker select {
  min-height: 38px;
  width: 100%;
  border: 1px solid #c6d5de;
  border-radius: 8px;
  background: #ffffff;
  color: #17212f;
  font: inherit;
  font-weight: 800;
  padding: 0 10px;
}

.my-day-workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.my-day-workflow-steps article {
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  border: 1px solid #f4c978;
  border-radius: 8px;
  background: #fff5e5;
}

.my-day-workflow-steps article.complete {
  border-color: #addfca;
  background: #eaf7f1;
}

.my-day-workflow-steps article.blocked {
  border-color: #f1b7bd;
  background: #fff1f2;
}

.my-day-workflow-steps span {
  color: #214ee5;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.my-day-workflow-steps strong {
  color: #17212f;
}

.my-day-workflow-steps small {
  color: #44596b;
  line-height: 1.35;
}

.employee-alert-list {
  display: grid;
  gap: 8px;
}

.employee-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d3dee9;
  border-left: 5px solid #214ee5;
  border-radius: 8px;
  background: #ffffff;
}

.employee-alert.critical {
  border-left-color: #b42318;
}

.employee-alert.good {
  border-left-color: #167a5b;
}

.employee-alert span {
  color: #607083;
  font-size: 12px;
  font-weight: 900;
}

.employee-alert strong {
  display: block;
  margin-top: 3px;
}

.employee-alert p {
  margin: 4px 0 0;
  color: #44596b;
  line-height: 1.35;
}

.employee-alert button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-weight: 950;
  padding: 0 12px;
}

.rejected-report-list {
  display: grid;
  gap: 10px;
}

.rejected-time-list {
  display: grid;
  gap: 10px;
}

.rejected-report-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #f4b7bd;
  border-radius: 8px;
  background: #ffffff;
}

.rejected-time-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #f4b7bd;
  border-radius: 8px;
  background: #ffffff;
}

.my-day-projects {
  display: grid;
  gap: 10px;
}

.my-day-project-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #f7fbff;
}

.my-day-project-card.selected {
  border-color: #214ee5;
  box-shadow: inset 4px 0 0 #214ee5;
  background: #f7fbff;
}

.my-day-project-head strong,
.my-day-project-head small {
  display: block;
}

.my-day-project-head strong {
  margin-top: 4px;
  color: #17212f;
  font-size: 20px;
}

.my-day-project-head small {
  margin-top: 3px;
  color: #44596b;
}

.my-day-project-meta,
.my-day-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.my-day-project-meta div,
.my-day-checklist div {
  min-height: 70px;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #cfdae6;
}

.my-day-project-meta strong,
.my-day-checklist strong {
  display: block;
  margin-top: 5px;
  color: #17212f;
}

.my-day-checklist div {
  border-color: #f4c978;
  background: #fff5e5;
}

.my-day-checklist .complete {
  border-color: #addfca;
  background: #eaf7f1;
}

.my-day-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.my-day-actions a,
.my-day-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 950;
  text-decoration: none;
}

.my-day-actions button {
  background: #13283a;
}

.my-day-actions button:disabled {
  background: #cfdae6;
  color: #607083;
  cursor: not-allowed;
}

.my-day-action-note {
  margin: 0;
  color: #b42318;
  font-size: 13px;
  font-weight: 850;
}

.my-day-clock-panel {
  border-color: #b8c8ff;
  background: #f7fbff;
}

.my-day-clock-panel.clocked-in {
  border-color: #addfca;
  background: #eaf7f1;
}

.my-day-clock-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 12px;
  align-items: center;
}

.my-day-clock-active span,
.my-day-clock-form span {
  color: #214ee5;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.my-day-clock-active strong,
.my-day-clock-active small {
  display: block;
}

.my-day-clock-active strong {
  margin-top: 4px;
  color: #17212f;
}

.my-day-clock-active small {
  margin-top: 3px;
  color: #44596b;
}

.my-day-clock-form {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.my-day-clock-form label {
  display: grid;
  gap: 5px;
}

.my-day-clock-form input {
  min-height: 40px;
  width: 100%;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  background: #ffffff;
  color: #17212f;
  font: inherit;
  padding: 0 10px;
}

.my-day-clock-form button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-weight: 950;
  padding: 0 14px;
}

.my-day-report-status {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #f4c978;
  border-radius: 8px;
  background: #fff5e5;
}

.my-day-report-status.approved {
  border-color: #addfca;
  background: #eaf7f1;
}

.my-day-report-status.rejected {
  border-color: #f1b7bd;
  background: #fff1f2;
}

.my-day-report-status span,
.my-day-report-status small {
  display: block;
  color: #607083;
  font-size: 12px;
}

.my-day-report-status span {
  color: #214ee5;
  font-weight: 950;
  text-transform: uppercase;
}

.my-day-report-status strong {
  display: block;
  margin-top: 4px;
  color: #17212f;
}

.my-day-report-status b {
  color: #a15c00;
}

.my-day-report-status.approved b {
  color: #167a5b;
}

.my-day-report-status.rejected b {
  color: #b42318;
}

.cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tech-card {
  min-height: 180px;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.tech-card b {
  color: #214ee5;
}

.dispatch-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.crew-roster {
  display: grid;
  gap: 10px;
}

.employee-profile {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-content: center;
  align-items: center;
}

.employee-profile > span {
  width: 44px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 950;
}

.employee-profile > span,
.mobile-agenda-item > span{
  color: #ffffff;
}

.employee-profile strong,
.employee-profile small {
  display: block;
}

.employee-profile small {
  color: #607083;
  font-size: 12px;
}

.employee-profile b {
  grid-column: 2;
  width: max-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: #e7efff;
  color: #1f3f8f;
  font-size: 12px;
}

.timeline-block,
.open-day {
  min-height: 92px;
  border: 1px solid color-mix(in srgb, var(--project-color, var(--brand-primary)) 24%, var(--brand-border));
  border-left: 5px solid var(--project-color, var(--brand-primary));
  border-radius: 8px;
  background: #ffffff;
  color: var(--brand-text);
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06);
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px;
  text-align: left;
}

.timeline-block {
  display: grid;
  gap: 8px;
  cursor: pointer;
}

.timeline-block > button {
  display: grid;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.timeline-block.in-progress {
  background: #ffffff;
  border-color: #ffcc00;
  border-left-color: var(--project-color, #ffcc00);
}

.timeline-block.completed {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--brand-success) 48%, var(--brand-border));
}

.timeline-block.needs-permit {
  background: #ffffff;
  border-color: #ce2029;
}

.timeline-block span,
.timeline-block small,
.timeline-block em,
.open-day small {
  color: var(--brand-muted);
  font-size: 12px;
}

.timeline-block span,
.timeline-block em {
  font-weight: 900;
  text-transform: uppercase;
}

.timeline-block strong {
  font-size: 15px;
}

.timeline-block em {
  font-style: normal;
}

.support-crew-field {
  display: grid;
  gap: 6px;
  color: #607083;
  font-size: 12px;
  font-weight: 900;
}

.support-crew-field > span {
  color: #607083;
}

.invoice b {
  color: #167a5b;
  font-size: 20px;
}

.invoice {
  min-height: 70px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) auto minmax(180px, 1fr) 110px auto;
  gap: 14px;
  align-items: center;
}

.invoice small,
.invoice em {
  color: #607083;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.invoice.good em {
  color: #167a5b;
}

.invoice.warn {
  border-color: #f4c978;
  background: #fff5e5;
}

.invoice.warn em {
  color: #a15c00;
}

.invoice.bad {
  border-color: #f4b7bd;
  background: #fff1f2;
}

.invoice.bad em {
  color: #b42318;
}

.material-usage-fieldset {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  padding: 10px;
  background: #f7fbff;
}

.material-usage-help {
  color: #607083;
  font-size: 12px;
  font-weight: 750;
}

.material-usage-topline {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.material-usage-actions {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.material-usage-fieldset > div[data-material-usage-rows] {
  display: grid;
  gap: 8px;
}

.material-usage-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.field-quick-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.create-form .field-quick-control.wide {
  grid-column: 1 / -1;
}

.field-quick-control-collapsible {
  padding: 10px;
  border: 1px solid var(--brand-border);
  border-left: 5px solid var(--brand-primary);
  border-radius: 8px;
  background: var(--brand-surface);
}

.field-quick-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.field-quick-heading span {
  color: var(--brand-text);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.field-quick-heading small {
  color: var(--brand-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.field-quick-fill {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.field-quick-fill button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--brand-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
  color: var(--brand-primary-strong);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  padding: 7px 10px;
}

.field-quick-fill button:hover,
.field-quick-fill button:focus-visible,
.field-quick-fill button.active {
  background: var(--brand-command-active-gradient);
  color: var(--brand-on-primary);
}

.field-optional-drawer {
  grid-column: 1 / -1;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-panel);
  overflow: hidden;
}

.field-optional-drawer > summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  color: var(--brand-on-primary);
  cursor: pointer;
  list-style: none;
}

.field-optional-drawer[open] > summary {
  border-color: var(--brand-command-border);
  background: var(--brand-command-gradient);
  color: var(--brand-on-command);
}

.field-optional-drawer > summary::-webkit-details-marker {
  display: none;
}

.field-optional-drawer > summary * {
  color: inherit;
}

.field-optional-drawer > summary div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.field-optional-drawer > summary strong {
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
}

.field-optional-drawer > summary span:not([data-details-toggle-state]) {
  display: block;
  width: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.field-optional-drawer > summary b[data-details-toggle-state] {
  min-width: 58px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--brand-command-border);
  border-radius: 999px;
  background: var(--brand-command-gradient);
  color: var(--brand-on-command);
  font-size: 11px;
  font-weight: 950;
  padding: 0 9px;
}

.field-optional-drawer[open] > summary b[data-details-toggle-state] {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}

.field-optional-drawer > label {
  padding: 10px;
}

.field-optional-drawer textarea {
  min-height: 92px;
}

.material-usage-fieldset button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-weight: 900;
  padding: 0 10px;
}

.material-usage-row .danger {
  background: #b42318;
}

.time-entry-flags span {
  border-radius: 999px;
  background: #ffffff;
  color: #43546a;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 9px;
  text-decoration: none;
}

.time-entry-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.time-entry-flags span {
  background: #fff1f2;
  color: #b42318;
}

.time-review-actions {
  display: flex;
  gap: 8px;
}

.time-review-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #214ee5;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
}

.time-review-actions .danger {
  background: #b42318;
}

.correction-form {
  border-top: 1px solid #f4b7bd;
}

.note-field {
  display: grid;
  gap: 6px;
}

.note-field span {
  color: #607083;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.note-field textarea {
  min-height: 132px;
  width: 100%;
  resize: vertical;
  border: 1px solid #cfdae6;
  border-radius: 8px;
  padding: 12px;
  color: #17212f;
  background: #f7fbff;
  font: inherit;
  outline: 0;
}

.note-field textarea:focus {
  border-color: #0f8f8c;
  box-shadow: 0 0 0 3px rgba(15, 143, 140, 0.14);
}

.attachment-list {
  display: grid;
  gap: 8px;
}

.attachment-list > p {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f3f7fb;
  color: #607083;
}

.attachment-row {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #d3dee9;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  grid-template-columns: 86px 1fr 90px auto;
  gap: 10px;
  align-items: center;
}

.attachment-row span {
  width: max-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: #e7efff;
  color: #1f3f8f;
  font-size: 12px;
  font-weight: 950;
}

.attachment-row a {
  color: #17212f;
  font-weight: 850;
  text-decoration: none;
}

.attachment-row small {
  color: #607083;
}

.attachment-row button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #f2e5e7;
  color: #b42318;
  font-weight: 900;
  padding: 0 10px;
}

.invoice {
  grid-template-columns: minmax(120px, 0.85fr) auto minmax(170px, 1fr) 110px minmax(150px, 0.9fr) auto auto auto;
}

@media (max-width: 1040px) {
  .app {
    grid-template-columns: 1fr;
  }

  .rail {
    min-height: auto;
    height: auto;
    max-height: none;
    position: sticky;
    top: 0;
    align-self: stretch;
    overflow: visible;
    z-index: 2;
    padding: 12px;
  }

  .brand,
  .install {
    display: none;
  }

  .nav {
    grid-template-columns: repeat(8, 1fr);
    flex: 0 0 auto;
    overflow-y: visible;
    padding-right: 0;
  }

  .nav[data-nav-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav[data-nav-count="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .nav[data-nav-count="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .nav[data-nav-count="6"] button {
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .nav[data-nav-count="6"] button b {
    position: static;
    align-self: center;
  }

  .nav[data-nav-count="6"] button span {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
  }

  .nav button {
    min-width: 0;
    justify-content: center;
    padding: 0 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .nav button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav[data-nav-count="6"] button span {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
  }

  .stats,
  .cards,
  .my-day-grid,
  .office-stats,
  .office-workspace,
  .my-day-workflow-steps,
  .my-day-project-meta,
  .my-day-checklist,
  .alert-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board {
    grid-template-columns: 1fr;
  }

  .field-inbox-lanes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .workspace {
    padding: 14px 14px 92px;
    gap: 14px;
  }

  .rail {
    min-height: auto;
    width: 100%;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    padding: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -12px 30px rgba(17, 26, 32, 0.22);
    overflow: hidden;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar h1 {
    font-size: 28px;
  }

  .search {
    width: 100%;
  }

  .topbar > .guide-button,
  .topbar > .top-install {
    display: none !important;
  }

  .user-menu {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .user-menu button {
    white-space: nowrap;
  }

  .top-install {
    width: 100%;
  }

  .role-switch {
    width: 100%;
  }

  .role-switch button {
    flex: 1;
  }

  .stats,
  .cards,
  .employee-summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stat {
    min-height: 78px;
    padding: 12px;
  }

  .stat strong {
    font-size: 22px;
  }

  .nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(86px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav[data-nav-count="4"],
  .nav[data-nav-count="5"],
  .nav[data-nav-count="6"] {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    overflow-x: clip;
  }

  .nav[data-nav-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav[data-nav-count="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .nav[data-nav-count="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .nav button {
    position: relative;
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    gap: 3px;
    padding: 0 3px;
    font-size: 12px;
    white-space: nowrap;
  }

  .nav[data-nav-count="6"] button {
    font-size: 10px;
  }

  .nav[data-nav-count="6"] button span {
    overflow: visible;
  }

  .nav button b {
    min-width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .nav[data-nav-count="6"] button b {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    font-size: 9px;
  }

  .nav button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .nav[data-nav-count="6"] button span {
    flex: 0 0 auto;
    overflow: visible;
  }

  .nav[data-nav-count="6"] button[data-view="time"] span {
    font-size: 0;
  }

  .nav[data-nav-count="6"] button[data-view="time"] span::after {
    content: "Time";
    font-size: 10px;
  }

  .job-row {
    grid-template-columns: 48px 1fr;
  }

  .job-row .status {
    grid-column: 2;
    justify-self: start;
  }

  .detail h2 {
    font-size: 24px;
  }

  .detail-grid,
  .actions,
  .field-inbox-lanes,
  .office-workspace,
  .my-day-hero,
  .my-day-workflow > .section-title,
  .my-day-workflow-steps,
  .my-day-actions,
  .my-day-clock-active,
  .my-day-clock-form,
  .my-day-report-status,
  .draft-card,
  .alert-list,
  .alert-card,
  .dispatch-workspace,
  .operations-open,
  .operations-review,
  .material-usage-row,
  .summary-item,
  .operations-groups,
  .operations-item,
  .create-form,
  .time-review-actions,
  .attachment-row,
  .invoice{
    grid-template-columns: 1fr;
  }

  .my-day-status {
    justify-items: start;
  }

  .create-form label.wide {
    grid-column: auto;
  }

  .create-form .field-block.wide,
  .create-form .field-block.full {
    grid-column: auto;
  }

  .create-form fieldset {
    grid-template-columns: 1fr;
  }

  .my-day-grid,
  .office-stats,
  .office-workspace,
  .my-day-project-meta,
  .my-day-checklist {
    grid-template-columns: 1fr;
  }

  .system-user-permission-grid,
  .system-email-grid,
  .system-storage-grid,
  .system-database-grid,
  .system-mobile-grid,
  .system-security-grid,
  .system-checklist-grid,
  .system-document-list article {
    grid-template-columns: 1fr;
  }

  .permission-audit-row {
    grid-template-columns: 1fr;
  }

  .office-stats,
  .office-workspace,
  .location-picker-search,
  .location-picker-manual-link,
  .project-basics-map-lookup,
  .location-picker-row,
  .location-picker-head,
  .location-picker-foot,
  .create-form .project-form-section,
  .readiness-list{
    grid-template-columns: 1fr;
  }

  .month-calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    min-width: 0;
    width: 100%;
  }

  .calendar-label {
    min-height: 24px;
    border-radius: 6px;
    font-size: 10px;
  }

  .month-day {
    min-height: 48px;
    padding: 4px;
    border-radius: 6px;
  }

  .month-day > span {
    font-size: 11px;
  }

  .month-day .calendar-project,
  .month-day .calendar-holiday {
    display: none;
  }

  .employee-week-calendar {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    min-width: 1080px;
  }

  .location-picker-map {
    min-height: 420px;
  }

  .project-calendar {
    overflow-x: hidden;
    display: grid;
    gap: 12px;
  }

  .calendar-month-controls {
    align-items: stretch;
  }

  .calendar-month-controls label {
    min-width: 170px;
    flex: 1;
  }

  .calendar-month-controls input {
    width: 100%;
  }

  .mobile-calendar-agenda {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .mobile-calendar-agenda > strong {
    color: #17212f;
    font-size: 15px;
  }

  .mobile-calendar-agenda p {
    margin: 0;
    color: #607083;
  }

  .mobile-agenda-item {
    grid-template-columns: 52px 1fr;
  }
}

.stat,
.stat.warn,
.stat.good,
.stat.bad,
.operations-stats article,
.alerts-panel-summary,
.summary-drilldown summary,
.checkbox-picker-summary,
.my-day-status {
  background: linear-gradient(135deg, var(--frost-command), var(--frost-command-2));
  border-color: #284256;
  border-top: 1px solid #284256;
  color: #ffffff;
}

.stat.warn,
.operations-stats article.warning {
  border-top-color: #284256;
}

.stat.good,
.operations-stats article.complete {
  border-top-color: #284256;
}

.stat.bad,
.operations-stats article.blocked {
  border-top-color: #284256;
}

.stat span,
.stat strong,
.stat small,
.operations-stats span,
.operations-stats strong,
.alerts-panel-summary span,
.alerts-panel-summary strong,
.alerts-panel-summary b,
.summary-drilldown summary span,
.summary-drilldown summary strong,
.summary-drilldown summary b,
.checkbox-picker-summary span,
.checkbox-picker-summary b,
.my-day-status small,
.my-day-status strong{
  color: #ffffff;
}

.stat-button:hover,
.stat-button.active,
.checkbox-picker[open] .checkbox-picker-summary,
.alerts-dropdown[open] .alerts-panel-summary {
  background: linear-gradient(135deg, var(--frost-blue), #1639b8);
  border-color: var(--frost-blue);
  border-top-color: var(--frost-blue);
  color: #ffffff;
}

.stats .stat,
.system-status-grid .stat,
.stats .stat.warn,
.system-status-grid .stat.warn,
.stats .stat.good,
.system-status-grid .stat.good,
.stats .stat.bad,
.system-status-grid .stat.bad {
  border-top: 1px solid #284256 !important;
}

.stats .stat.active,
.system-status-grid .stat.active {
  border-top-color: var(--frost-blue) !important;
}

/* Brandable vibrant app theme */
body {
  background:
    radial-gradient(circle at top left, rgba(var(--brand-primary-rgb), 0.16), transparent 34rem),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-ice) 88%, #ffffff), #ffffff);
}

.app {
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--brand-primary-rgb), 0.14), transparent 28rem),
    linear-gradient(135deg, var(--brand-ice), color-mix(in srgb, var(--brand-ice) 68%, #ffffff));
}

.rail {
  background:
    var(--brand-rail-gradient);
  color: var(--brand-on-rail);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--brand-on-rail) 12%, transparent);
}

.brand {
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-on-rail) 14%, transparent);
}

.brand strong,
.topbar h1 {
  color: var(--brand-text);
}

.brand strong {
  color: var(--brand-on-rail);
}

.nav button:hover,
.nav button:focus-visible {
  background: color-mix(in srgb, var(--brand-on-rail) 10%, transparent);
  color: var(--brand-on-rail);
  outline: 0;
}

.nav button.active {
  background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.95), var(--brand-primary-strong));
  box-shadow:
    inset 5px 0 0 #4b5563,
    0 12px 28px rgba(var(--brand-primary-rgb), 0.2);
}

.nav button b,
.top-install,
.user-menu button,
.system-status-hero button,
.system-active-panel .section-title button,
.create-form button,
.detail-page-toolbar button,
.project-basics-map-lookup button {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  color: #ffffff;
}

.install {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  color: #ffffff;
}

.workspace {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0)),
    transparent;
}

.topbar,
.search,
.user-menu,
.return-navigation,
.system-status-hero,
.system-active-panel,
.system-status-table,
.alerts-panel,
.create-panel,
.edit-panel,
.office-panel,
.my-day-panel,
.daily-report-panel,
.rejected-report-panel,
.rejected-time-panel,
.tech-card,
.empty-state-panel{
  border-color: var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface) 94%, var(--brand-panel));
  box-shadow: 0 18px 42px rgba(var(--brand-command-rgb), 0.07);
}

.topbar {
  padding: 14px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
}

.topbar p,
.search span,
.user-menu span,
.return-navigation span,
.section-title span,
.create-form span,
.system-status-hero span,
.system-status-hero p {
  color: var(--brand-muted);
}

.search:focus-within,
.user-menu:focus-within,
.return-navigation:hover,
.return-navigation:focus-visible,
.create-form input:focus,
.create-form select:focus,
.create-form textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.16);
}

.stat,
.stat.warn,
.stat.good,
.stat.bad,
.operations-stats article,
.alerts-panel-summary,
.summary-drilldown summary,
.checkbox-picker-summary,
.my-day-status {
  background:
    linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.18), transparent 52%),
    linear-gradient(135deg, var(--brand-command), var(--brand-command-2));
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--brand-command-2));
  box-shadow: 0 14px 34px rgba(var(--brand-command-rgb), 0.16);
}

.stat-button:hover,
.stat-button.active,
.checkbox-picker[open] .checkbox-picker-summary,
.alerts-dropdown[open] .alerts-panel-summary {
  background:
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  border-color: var(--brand-primary);
  box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb), 0.24);
}

.status.scheduled,
.delivery-status,
details > summary [data-details-toggle-state],
.alerts-panel-summary b {
  background: color-mix(in srgb, var(--brand-primary) 14%, #ffffff);
  color: var(--brand-primary-strong);
}

.summary-item,
.system-document-list article,
.system-roster-list article,
.permission-audit-row,
.draft-card,
.alert-card{
  border-color: var(--brand-border);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06);
}

.summary-item:hover,
.my-day-project-card.selected,
.job-row.active{
  border-color: var(--brand-primary);
  box-shadow:
    inset 0 0 0 1px var(--brand-primary),
    0 14px 32px rgba(var(--brand-primary-rgb), 0.13);
}

.create-form fieldset,
.create-form .project-form-section,
.checkbox-picker-panel,
.system-user-permission-panel,
.system-email-panel,
.system-storage-panel,
.system-database-panel,
.system-mobile-panel,
.system-security-panel,
.system-checklist-panel {
  border-color: var(--brand-border);
  background: var(--brand-panel);
}

.create-form legend,
.section-title strong,
.system-status-hero strong,
.system-status-row strong{
  color: var(--brand-text);
}

/* Fleet page brand cleanup */
.office-panel {
  border-color: var(--brand-border);
  background:
    linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.06), transparent 44%),
    #ffffff;
  box-shadow: 0 18px 42px rgba(var(--brand-command-rgb), 0.07);
}

/* Project operations dropdown open state */
.summary-drilldown[open] > summary {
  background:
    linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.18), transparent 52%),
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  border-color: var(--brand-primary) !important;
}

.summary-drilldown[open] > summary strong,
.summary-drilldown[open] > summary span,
.summary-drilldown[open] > summary b {
  color: #ffffff !important;
}

/* Standard Open / Close pill across dropdowns */
details > summary [data-details-toggle-state],
details > summary .details-toggle-state,
.stat-button small {
  min-width: 64px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: end;
  align-self: center;
  margin-left: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.22) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 10px !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}

details[open] > summary [data-details-toggle-state],
details[open] > summary .details-toggle-state,
.stat-button.active small {
  background:
    linear-gradient(135deg, var(--brand-command), var(--brand-command-2)) !important;
  color: #ffffff !important;
}

details > summary [data-details-toggle-state]::before,
details > summary [data-details-toggle-state]::after,
details > summary .details-toggle-state::before,
details > summary .details-toggle-state::after {
  content: none !important;
}

/* Standard count / number bubbles across the app */
.nav button b,
.summary-drilldown summary b:not([data-details-toggle-state]),
.operations-open b{
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.22) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 9px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Operations drilldown badge alignment */
.summary-drilldown > summary {
  grid-template-columns: minmax(0, 1fr) max-content max-content !important;
  column-gap: 8px !important;
}

.summary-drilldown > summary > div {
  grid-column: 1;
}

.summary-drilldown > summary > b:not([data-details-toggle-state]) {
  grid-column: 2;
  justify-self: end;
}

.summary-drilldown > summary > [data-details-toggle-state],
.summary-drilldown > summary > .details-toggle-state {
  grid-column: 3;
  justify-self: end !important;
}

/* Standard return navigation button */
.return-navigation {
  width: fit-content !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(var(--brand-primary-rgb), 0.2) !important;
  padding: 0 14px !important;
}

.return-navigation span,
.return-navigation strong {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-transform: none !important;
}

details > summary [data-details-toggle-state],
details > summary .details-toggle-state,
details[open] > summary [data-details-toggle-state],
details[open] > summary .details-toggle-state,
.alerts-panel-summary [data-details-toggle-state],
.alerts-panel-summary .details-toggle-state,
.checkbox-picker-summary [data-details-toggle-state],
.checkbox-picker-summary .details-toggle-state,
.stat-button > small,
.stat-button.active > small,
.create-form legend button b{
  width: auto !important;
  min-width: 64px !important;
  max-width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.22) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 10px !important;
  text-align: center !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}

details > summary [data-details-toggle-state]::before,
details > summary [data-details-toggle-state]::after,
details > summary .details-toggle-state::before,
details > summary .details-toggle-state::after,
.create-form legend button b::before,
.create-form legend button b::after {
  content: none !important;
}

/* Centralized command surface color system */
.rail {
  background: var(--brand-rail-gradient) !important;
}

.stat,
.stat.warn,
.stat.good,
.stat.bad,
.stats .stat,
.system-status-grid .stat,
.operations-stats article,
.alerts-panel-summary,
.summary-drilldown summary,
.checkbox-picker-summary,
.my-day-status {
  background: var(--brand-command-gradient) !important;
  border-color: var(--brand-command-border) !important;
  border-top-color: var(--brand-command-border) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(var(--brand-command-rgb), 0.15) !important;
}

.stat-button:hover,
.stat-button.active,
.stats .stat.active,
.system-status-grid .stat.active,
.checkbox-picker[open] .checkbox-picker-summary,
.alerts-dropdown[open] .alerts-panel-summary,
.summary-drilldown[open] > summary {
  background: var(--brand-command-active-gradient) !important;
  border-color: var(--brand-primary) !important;
  border-top-color: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb), 0.24) !important;
}

.stat span,
.stat strong,
.stat small,
.operations-stats span,
.operations-stats strong,
.alerts-panel-summary span,
.alerts-panel-summary strong,
.alerts-panel-summary b,
.summary-drilldown summary span,
.summary-drilldown summary strong,
.summary-drilldown summary b,
.checkbox-picker-summary span,
.checkbox-picker-summary b,
.my-day-status small,
.my-day-status strong{
  color: #ffffff !important;
}

/* Standard page header cards */
.system-panel-stat {
  position: relative !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  justify-content: stretch !important;
  gap: 10px !important;
  padding: 14px 92px 14px 14px !important;
  text-align: left !important;
}

.system-panel-stat .panel-stat-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 9px !important;
  justify-items: start !important;
  align-content: start !important;
  align-self: start !important;
}

.system-panel-stat .panel-stat-label {
  display: block !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.system-panel-stat .panel-stat-value {
  width: fit-content !important;
  max-width: 100% !important;
  display: block !important;
  overflow-wrap: anywhere !important;
  color: #ffffff !important;
  font-size: clamp(18px, 1.55vw, 28px) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

.system-panel-stat .panel-stat-value.panel-stat-long {
  font-size: clamp(15px, 1.1vw, 20px) !important;
  line-height: 1.2 !important;
}

.system-panel-stat > small {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  justify-self: auto !important;
  align-self: auto !important;
}

@media (max-width: 640px) {
  .system-panel-stat {
    min-height: 104px !important;
    padding-right: 14px !important;
    padding-bottom: 52px !important;
  }

  .system-panel-stat > small {
    top: auto !important;
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* System page header readability */
.system-status-grid .system-panel-stat {
  min-height: 104px !important;
  padding: 14px 84px 14px 14px !important;
}

.system-status-grid .system-panel-stat .panel-stat-copy {
  gap: 8px !important;
}

.system-status-grid .system-panel-stat .panel-stat-label {
  max-width: 100% !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

.system-status-grid .system-panel-stat .panel-stat-value {
  font-size: 16px !important;
  line-height: 1.25 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}

.system-status-grid .system-panel-stat .panel-stat-value.panel-stat-long {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.system-status-grid .system-panel-stat > small {
  min-width: 58px !important;
  height: 26px !important;
  top: 12px !important;
  right: 12px !important;
  font-size: 10px !important;
  padding: 0 8px !important;
}

@media (max-width: 640px) {
  .system-status-grid .system-panel-stat {
    min-height: 112px !important;
    padding: 14px 14px 50px !important;
  }

  .system-status-grid .system-panel-stat > small {
    top: auto !important;
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* Project board and calendar brand cleanup */
.project-calendar{
  border-color: var(--brand-border) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(var(--brand-command-rgb), 0.07) !important;
}

.calendar-month-controls label span {
  color: var(--brand-muted) !important;
}

.calendar-month-controls button,
.calendar-month-controls input {
  border-color: var(--brand-border) !important;
  background: #ffffff !important;
  color: var(--brand-text) !important;
}

.calendar-month-controls button {
  background: color-mix(in srgb, var(--brand-primary) 7%, #ffffff) !important;
}

.calendar-label {
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand-command-border);
  border-radius: 8px;
  background: var(--brand-command-gradient);
  color: #ffffff !important;
}

.month-day,
.employee-week-day {
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--brand-border)) !important;
  background: color-mix(in srgb, var(--brand-panel) 82%, #ffffff) !important;
}

.month-day.muted {
  border-color: var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-panel) 60%, #ffffff) !important;
}

.month-day.today,
.employee-week-day.today {
  border-color: var(--brand-secondary) !important;
  box-shadow:
    inset 0 0 0 1px var(--brand-secondary),
    0 10px 22px rgba(var(--brand-secondary-rgb), 0.12) !important;
}

.month-day.holiday,
.employee-week-day.holiday {
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--brand-border)) !important;
  background: color-mix(in srgb, var(--brand-panel) 82%, #ffffff) !important;
}

.month-day > span,
.employee-week-day > span {
  color: var(--brand-primary) !important;
}

.month-day > strong,
.employee-week-day > strong {
  color: var(--brand-text) !important;
}

.calendar-project {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--project-color, var(--brand-primary)) 44%, var(--brand-border)) !important;
  border-left: 5px solid var(--project-color, var(--brand-primary)) !important;
  background: #ffffff !important;
  color: var(--brand-text) !important;
  box-shadow: 0 8px 18px rgba(var(--brand-command-rgb), 0.08) !important;
}

.calendar-project.active {
  border-color: var(--brand-primary) !important;
  box-shadow:
    inset 0 0 0 1px var(--brand-primary),
    0 0 0 3px rgba(var(--brand-primary-rgb), 0.18) !important;
}

.calendar-project strong {
  color: var(--brand-text) !important;
}

.calendar-project small {
  color: var(--brand-muted) !important;
  opacity: 1 !important;
}

.mobile-agenda-item {
  border-color: var(--brand-border) !important;
  border-left-color: var(--project-color, var(--brand-primary)) !important;
  background: #ffffff !important;
}

.calendar-holiday-strip {
  border-color: var(--brand-command-border) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
}

.calendar-holiday-strip strong {
  color: var(--brand-primary) !important;
}

.calendar-holiday-strip span {
  color: var(--brand-text) !important;
}

.calendar-holiday-pill,
.calendar-holiday {
  border: 1px solid var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: #ffffff !important;
}

.calendar-holiday strong,
.calendar-holiday-strip .calendar-holiday-pill,
.calendar-holiday-pill {
  color: #ffffff !important;
}

.calendar-holiday-strip .calendar-holiday-pill {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
}

/* Fleet page final theme pass */
.materials-page .material-usage-help {
  color: var(--brand-muted) !important;
}

.materials-page .material-usage-fieldset,
.materials-page .material-usage-row {
  border-color: var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-primary) 3%, #ffffff) !important;
}

.materials-page .material-usage-fieldset button {
  border: 1px solid var(--brand-primary) !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
}

.materials-page .material-usage-row .danger {
  border-color: #ce2029 !important;
  background: #ce2029 !important;
  color: #ffffff !important;
}

.system-status-page .system-status-hero,
.system-status-page .system-active-panel,
.system-status-page .system-status-table,
.system-status-page .system-user-permission-panel,
.system-status-page .system-email-panel,
.system-status-page .system-storage-panel,
.system-status-page .system-database-panel,
.system-status-page .system-mobile-panel,
.system-status-page .system-security-panel,
.system-status-page .system-checklist-panel {
  border-color: var(--brand-border) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(var(--brand-command-rgb), 0.07) !important;
}

.system-status-page .system-document-list article,
.system-status-page .system-roster-list article,
.system-status-page .permission-audit-row,
.system-status-page .permission-audit-row.good,
.system-status-page .permission-audit-row.warn,
.system-status-page .permission-audit-row.bad,
.system-status-page .readiness-list article,
.system-status-page .readiness-list article.pass,
.system-status-page .readiness-list article.warn,
.system-status-page .readiness-list article.blocker {
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  background: #ffffff !important;
  color: var(--brand-text) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
}

.system-status-page .permission-audit-row.good,
.system-status-page .readiness-list article.pass {
  border-left-color: var(--brand-success) !important;
}

.system-status-page .permission-audit-row.warn,
.system-status-page .readiness-list article.warn {
  border-left-color: #ffcc00 !important;
}

.system-status-page .permission-audit-row.bad,
.system-status-page .readiness-list article.blocker {
  border-left-color: #ce2029 !important;
}

.system-status-page .system-status-row,
.system-status-page .readiness-list article {
  border-color: var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-primary) 3%, #ffffff) !important;
}

.system-status-page .system-status-hero strong,
.system-status-page .system-document-list strong,
.system-status-page .system-roster-list strong,
.system-status-page .permission-audit-row strong,
.system-status-page .permission-audit-row b,
.system-status-page .readiness-list strong {
  color: var(--brand-text) !important;
}

.system-status-page .system-status-hero span,
.system-status-page .system-status-hero p,
.system-status-page .system-status-row span,
.system-status-page .system-document-list span,
.system-status-page .system-document-list small,
.system-status-page .system-document-list em,
.system-status-page .system-roster-list span,
.system-status-page .system-roster-list small,
.system-status-page .permission-audit-row span,
.system-status-page .permission-audit-row small,
.system-status-page .permission-audit-row p,
.system-status-page .permission-audit-row em,
.system-status-page .readiness-list span,
.system-status-page .readiness-list p {
  color: var(--brand-muted) !important;
}

.system-status-page .system-document-list em,
.system-status-page .system-roster-list small,
.system-status-page .permission-audit-row em {
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--brand-border)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--brand-primary) 10%, #ffffff) !important;
  color: var(--brand-primary-strong) !important;
  font-weight: 950 !important;
  padding: 5px 9px !important;
}

.system-status-page .system-document-list article,
.system-status-page .system-roster-list article {
  border-color: var(--brand-border) !important;
  background: #ffffff !important;
}

.system-status-page .system-status-hero button,
.system-status-page .system-active-panel .section-title button,
.system-status-page .system-document-list a {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
}

.system-status-page .go-live-readiness,
.system-status-page .go-live-readiness.blocked,
.system-status-page .go-live-readiness.pilot-ready,
.system-status-page .go-live-readiness.go-live-ready {
  border-color: var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  background: #ffffff !important;
}

.system-status-page .go-live-readiness.blocked {
  border-left-color: #ce2029 !important;
}

.system-status-page .go-live-readiness.pilot-ready {
  border-left-color: #ffcc00 !important;
}

.system-status-page .go-live-readiness.go-live-ready {
  border-left-color: var(--brand-success) !important;
}

.go-live-command-center,
.go-live-plan-panel {
  display: grid !important;
  gap: 12px !important;
}

.go-live-launch-strip,
.go-live-category-board,
.go-live-manual-task-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}

.go-live-launch-strip article,
.go-live-category-board article,
.go-live-manual-task-grid article {
  min-height: 118px !important;
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--brand-text) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
  padding: 12px !important;
}

.go-live-launch-strip article.good,
.go-live-category-board article.good,
.go-live-manual-task-grid article.pass {
  border-left-color: var(--brand-success) !important;
}

.go-live-launch-strip article.warn,
.go-live-category-board article.warn,
.go-live-manual-task-grid article.warn {
  border-left-color: #ffcc00 !important;
}

.go-live-launch-strip article.bad,
.go-live-category-board article.bad,
.go-live-manual-task-grid article.blocker {
  border-left-color: #ce2029 !important;
}

.go-live-launch-strip span,
.go-live-category-board span,
.go-live-manual-task-grid span {
  color: var(--brand-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.go-live-launch-strip strong,
.go-live-category-board strong,
.go-live-manual-task-grid strong {
  color: var(--brand-text) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.go-live-launch-strip p,
.go-live-category-board p,
.go-live-manual-task-grid p {
  margin: 0 !important;
  color: var(--brand-muted) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.go-live-category-board article {
  grid-template-rows: auto 1fr auto !important;
}

.go-live-category-board button,
.go-live-next-actions .section-title button {
  width: max-content !important;
  min-height: 34px !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  padding: 0 11px !important;
}

.go-live-next-actions {
  display: grid !important;
  gap: 10px !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 12px !important;
}

.go-live-next-actions .readiness-list article {
  min-height: 138px !important;
}

.go-live-next-actions .readiness-list button {
  width: max-content !important;
  min-height: 32px !important;
  align-self: end !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  padding: 0 10px !important;
}

.go-live-plan-form textarea {
  min-height: 96px !important;
}

/* System dashboard theme normalization */
.system-status-page .system-status-grid .system-panel-stat,
.system-status-page .system-status-grid .system-panel-stat.warn,
.system-status-page .system-status-grid .system-panel-stat.good,
.system-status-page .system-status-grid .system-panel-stat.bad {
  border: 1px solid var(--brand-command-border) !important;
  border-top: 1px solid var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(var(--brand-command-rgb), 0.15) !important;
}

.system-status-page .system-status-grid .system-panel-stat.active,
.system-status-page .system-status-grid .system-panel-stat:hover {
  border-color: var(--brand-primary) !important;
  border-top-color: var(--brand-primary) !important;
  background: var(--brand-command-active-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb), 0.24) !important;
}

.system-status-page .system-status-grid .system-panel-stat .panel-stat-label,
.system-status-page .system-status-grid .system-panel-stat .panel-stat-value,
.system-status-page .system-status-grid .system-panel-stat > small {
  color: #ffffff !important;
}

.system-status-page .system-status-grid .system-panel-stat > small {
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
}

.system-status-page .system-active-panel > .go-live-readiness {
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.system-status-page .system-check-panel,
.system-status-page .system-permission-roster,
.system-status-page .system-permission-audit,
.system-status-page .system-user-permission-panel,
.system-status-page .system-email-panel,
.system-status-page .system-storage-panel,
.system-status-page .system-database-panel,
.system-status-page .system-mobile-panel,
.system-status-page .system-security-panel,
.system-status-page .system-checklist-panel {
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(var(--brand-command-rgb), 0.07) !important;
}

.system-status-page .system-permission-roster,
.system-status-page .system-permission-audit {
  gap: 12px !important;
}

.system-status-page .system-roster-list,
.system-status-page .permission-audit-list {
  gap: 10px !important;
}

.system-status-page .system-status-columns {
  align-items: start !important;
}

.system-status-page .system-status-table {
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
}

.system-status-page .system-status-table > div {
  display: grid !important;
  gap: 8px !important;
}

.system-status-page .system-status-row,
.system-status-page .system-status-row:last-child {
  display: grid !important;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(var(--brand-command-rgb), 0.04) !important;
}

.system-status-page .system-status-row span {
  color: var(--brand-muted) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.system-status-page .system-status-row strong {
  color: var(--brand-text) !important;
  font-weight: 950 !important;
  text-align: right !important;
}

.system-status-page .empty-alerts,
.system-status-page .system-database-panel .empty-alerts,
.system-status-page .system-storage-panel .empty-alerts,
.system-status-page .system-mobile-panel .empty-alerts,
.system-status-page .system-security-panel .empty-alerts,
.system-status-page .system-checklist-panel .empty-alerts {
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  background: #ffffff !important;
  color: var(--brand-text) !important;
}

/* Brand theme automatic contrast support */
.stat,
.stat span,
.stat strong,
.stat small,
.system-panel-stat .panel-stat-label,
.system-panel-stat .panel-stat-value,
.system-panel-stat > small {
  color: var(--brand-on-command) !important;
}

.stat-button.active,
.stat-button.active span,
.stat-button.active strong,
.stat-button.active small,
.system-status-page .system-status-grid .system-panel-stat.active,
.system-status-page .system-status-grid .system-panel-stat.active .panel-stat-label,
.system-status-page .system-status-grid .system-panel-stat.active .panel-stat-value,
.system-status-page .system-status-grid .system-panel-stat.active > small {
  color: var(--brand-on-primary) !important;
}

.system-status-page .system-status-hero button,
.system-status-page .system-active-panel .section-title button,
.create-form button,
.detail-page-toolbar button,
.project-basics-map-lookup button {
  color: var(--brand-on-primary) !important;
}

.company-profile-panel {
  gap: 14px;
}

.company-profile-preview {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(240px, 0.9fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-surface);
  box-shadow: 0 12px 28px rgba(var(--brand-command-rgb), 0.06);
}

.company-profile-logo-preview {
  min-height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 7%, #ffffff), #ffffff);
  overflow: hidden;
}

.company-profile-logo-preview img {
  max-width: 94px;
  max-height: 94px;
  object-fit: contain;
}

.company-profile-logo-preview strong {
  color: var(--brand-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.company-profile-preview > div:nth-child(2) {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.company-profile-preview span,
.company-profile-contact-list span {
  color: var(--brand-muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.company-profile-preview strong {
  color: var(--brand-text);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.05;
}

.company-profile-preview p,
.company-profile-preview small {
  margin: 0;
  color: var(--brand-muted);
  font-weight: 850;
}

.company-profile-contact-list {
  display: grid;
  gap: 8px;
}

.company-profile-contact-list article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--brand-border);
  border-left: 5px solid var(--brand-primary);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 4%, #ffffff);
}

.company-profile-contact-list strong {
  min-width: 0;
  color: var(--brand-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.company-profile-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.company-profile-form .form-actions [data-company-profile-reset] {
  border: 1px solid var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
}

@media (max-width: 900px) {
  .company-profile-preview {
    grid-template-columns: 1fr;
  }

  .company-profile-logo-preview {
    min-height: 96px;
  }
}

/* Shared brand-theme component standards */
:root {
  --theme-card-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06);
  --theme-card-shadow-strong: 0 18px 42px rgba(var(--brand-command-rgb), 0.08);
  --theme-primary-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.2);
  --theme-header-closed-border: var(--brand-primary);
  --theme-header-closed-background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  --theme-header-closed-color: var(--brand-on-primary);
  --theme-header-closed-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2);
  --theme-header-open-border: var(--brand-command-border);
  --theme-header-open-background: var(--brand-command-gradient);
  --theme-header-open-color: var(--brand-on-command);
  --theme-header-open-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2);
  --theme-pill-closed-border: var(--brand-command-border);
  --theme-pill-closed-background: var(--brand-command-gradient);
  --theme-pill-closed-color: var(--brand-on-command);
  --theme-pill-open-border: rgba(255, 255, 255, 0.34);
  --theme-pill-open-background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong));
  --theme-pill-open-color: var(--brand-on-primary);
  --theme-soft-primary: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
  --theme-soft-command: color-mix(in srgb, var(--brand-command) 8%, #ffffff);
  --theme-soft-success: color-mix(in srgb, var(--brand-success) 10%, #ffffff);
  --theme-soft-warning: color-mix(in srgb, var(--brand-warning) 16%, #ffffff);
  --theme-soft-danger: color-mix(in srgb, var(--brand-danger) 10%, #ffffff);
}

.workspace button:not(.stat):not(.stat-button):not(.fleet-group-card):not(.fleet-group-head):not(.fleet-panel-stat):not(.time-panel-stat):not(.employee-panel-stat):not(.employee-group-card):not(.weekly-day-header):not(.nav-toggle):not(.schedule-assignment-project):not([data-project-section-toggle]),
.top-install,
.install {
  border-radius: 8px;
  font-weight: 950;
}

.workspace button:not(.secondary):not(.danger):not(:disabled):not(.stat):not(.stat-button):not(.fleet-group-card):not(.fleet-group-head):not(.fleet-panel-stat):not(.time-panel-stat):not(.employee-panel-stat):not(.employee-group-card):not(.weekly-day-header):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.summary-item):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button):not([data-project-section-toggle]),
.top-install,
.install {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: var(--theme-primary-shadow) !important;
}

.workspace button.secondary,
.workspace .secondary {
  border: 1px solid var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 10px 22px rgba(var(--brand-command-rgb), 0.12) !important;
}

.workspace button.danger,
.workspace button[data-delete],
.workspace button[data-delete-user],
.workspace button[data-delete-saved],
.workspace button[data-user-status="Inactive"],
.workspace button[data-remove],
.workspace button[data-deactivate] {
  border: 1px solid color-mix(in srgb, var(--brand-danger) 36%, var(--brand-border)) !important;
  background: color-mix(in srgb, var(--brand-danger) 8%, #ffffff) !important;
  color: var(--brand-danger) !important;
  box-shadow: none !important;
}

.workspace button:disabled,
.workspace button[disabled] {
  border-color: var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-command) 8%, #ffffff) !important;
  color: var(--brand-muted) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.section-title,
.system-active-panel > .section-title,
.operations-dashboard > .section-title,
.my-day-workflow > .section-title{
  border-color: var(--brand-border) !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
}

.section-title strong,
.section-title b {
  color: var(--brand-text) !important;
}

.section-title span,
.section-title small,
.section-title p {
  color: var(--brand-muted) !important;
}

.stat,
.stat.warn,
.stat.good,
.stat.bad,
.stat-button,
.system-panel-stat,
.summary-drilldown > summary,
.checkbox-picker > summary,
.alerts-panel-summary{
  border: 1px solid var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 14px 34px rgba(var(--brand-command-rgb), 0.15) !important;
}

.stat *,
.stat-button *,
.system-panel-stat *,
.summary-drilldown > summary *,
.checkbox-picker > summary *,
.alerts-panel-summary *{
  color: inherit !important;
}

.stat.active,
.stat-button.active,
.system-panel-stat.active,
.summary-drilldown[open] > summary,
.checkbox-picker[open] > summary,
.alerts-dropdown[open] > .alerts-panel-summary{
  border-color: var(--brand-primary) !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb), 0.24) !important;
}

details > summary [data-details-toggle-state],
details > summary .details-toggle-state,
.stat-button > small,
.create-form legend button b{
  min-width: 64px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: var(--theme-primary-shadow) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 10px !important;
  text-align: center !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}

details[open] > summary [data-details-toggle-state],
details[open] > summary .details-toggle-state,
.stat-button.active > small {
  background: var(--brand-command) !important;
  color: var(--brand-on-command) !important;
}

.status,
.pill,
.permission-badge,
.delivery-status,
.preference-badges span{
  min-height: 26px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--brand-border)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--brand-primary) 10%, #ffffff) !important;
  color: var(--brand-primary-strong) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 9px !important;
  white-space: nowrap !important;
}

.status.completed,
.status.approved,
.status.sent,
.status.paid,
.status.won,
.pill.low,
.pill.medium,
.delivery-status.sent {
  border-color: var(--brand-success) !important;
  background: var(--brand-success) !important;
  color: #ffffff !important;
}

.status.needs-permit,
.status.waiting,
.status.submitted,
.status.ready,
.pill.high,
.pill.urgent,
.delivery-status.queued {
  border-color: var(--brand-warning) !important;
  background: var(--brand-warning) !important;
  color: var(--brand-text) !important;
}

.status.rejected,
.status.failed,
.status.lost,
.status.overdue,
.delivery-status.failed {
  border-color: var(--brand-danger) !important;
  background: var(--brand-danger) !important;
  color: #ffffff !important;
}

.system-document-list article,
.system-roster-list article,
.permission-audit-row,
.readiness-list article{
  border-color: var(--brand-border) !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: var(--theme-card-shadow) !important;
}

.create-form input,
.create-form select,
.create-form textarea,
.search,
.search input,
.calendar-month-controls input,
.calendar-month-controls select {
  border-color: var(--brand-border) !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
}

.create-form input:focus,
.create-form select:focus,
.create-form textarea:focus,
.search:focus-within,
.calendar-month-controls input:focus,
.calendar-month-controls select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
  outline: 0 !important;
}

.workspace button[type="submit"],
.workspace .create-form button[type="submit"],
.workspace .return-navigation,
.top-install,
.install {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: var(--theme-primary-shadow) !important;
}

.workspace button.secondary,
.workspace .secondary {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 10px 22px rgba(var(--brand-command-rgb), 0.12) !important;
}

.workspace button.danger,
.workspace button[data-delete],
.workspace button[data-delete-user],
.workspace button[data-delete-saved],
.workspace button[data-user-status="Inactive"],
.workspace button[data-remove],
.workspace button[data-deactivate] {
  border-color: color-mix(in srgb, var(--brand-danger) 36%, var(--brand-border)) !important;
  background: color-mix(in srgb, var(--brand-danger) 8%, #ffffff) !important;
  color: var(--brand-danger) !important;
  box-shadow: none !important;
}

.calendar-month-controls button {
  border: 1px solid var(--brand-border) !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: none !important;
}

.calendar-project,
.timeline-block,
.open-day {
  border: 1px solid color-mix(in srgb, var(--project-color, var(--brand-primary)) 32%, var(--brand-border)) !important;
  border-left: 5px solid var(--project-color, var(--brand-primary)) !important;
  background: color-mix(in srgb, var(--project-color, var(--brand-primary)) 9%, #ffffff) !important;
  color: var(--brand-text) !important;
  box-shadow: 0 8px 18px rgba(var(--brand-command-rgb), 0.05) !important;
}

.calendar-project.active,
.timeline-block:hover {
  border-color: var(--project-color, var(--brand-primary)) !important;
  background: color-mix(in srgb, var(--project-color, var(--brand-primary)) 16%, #ffffff) !important;
  color: var(--brand-text) !important;
}

.calendar-project strong,
.calendar-project small,
.timeline-block strong,
.timeline-block small,
.open-day strong,
.open-day small {
  color: inherit !important;
}

.calendar-project small,
.timeline-block small,
.open-day small {
  color: var(--brand-muted) !important;
}

.month-day.today,
.employee-week-day.today {
  border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--brand-border)) !important;
  background: color-mix(in srgb, var(--brand-primary) 6%, #ffffff) !important;
}

.month-day.holiday,
.employee-week-day.holiday {
  border-color: color-mix(in srgb, var(--brand-warning) 38%, var(--brand-border)) !important;
  background: color-mix(in srgb, var(--brand-warning) 12%, #ffffff) !important;
}

.calendar-holiday,
.calendar-holiday-pill {
  border-color: var(--brand-warning) !important;
  background: var(--brand-warning) !important;
  color: var(--brand-text) !important;
}

.status,
.pill,
.permission-badge,
.delivery-status,
.preference-badges span{
  border-color: var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-command) 6%, #ffffff) !important;
  color: var(--brand-text) !important;
}

/* Calendar color restoration after theme restraint */
.month-day.holiday,
.employee-week-day.holiday {
  border-color: var(--brand-warning) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-warning) 58%, #ffffff), color-mix(in srgb, var(--brand-warning) 34%, #ffffff)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand-warning) 70%, transparent),
    0 8px 18px rgba(var(--brand-command-rgb), 0.08) !important;
}

.month-day.holiday > span,
.employee-week-day.holiday > span {
  color: var(--brand-text) !important;
  font-weight: 950 !important;
}

.calendar-holiday,
.calendar-holiday-pill {
  border: 1px solid color-mix(in srgb, var(--brand-warning) 72%, var(--brand-border)) !important;
  background: var(--brand-warning) !important;
  color: var(--brand-text) !important;
  box-shadow: none !important;
}

.calendar-holiday strong,
.calendar-holiday-pill {
  color: var(--brand-text) !important;
}

.calendar-project,
.employee-week-calendar .calendar-project {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--project-color, var(--brand-primary)) 30%, var(--brand-border)) !important;
  border-left: 5px solid var(--project-color, var(--brand-primary)) !important;
  background: #ffffff !important;
  color: var(--brand-text) !important;
  box-shadow: 0 8px 18px rgba(var(--brand-command-rgb), 0.08) !important;
}

.calendar-project::after,
.employee-week-calendar .calendar-project::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--project-color, var(--brand-primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--project-color, var(--brand-primary)) 18%, #ffffff);
}

.calendar-project:hover,
.calendar-project.active {
  border-color: color-mix(in srgb, var(--project-color, var(--brand-primary)) 72%, var(--brand-border)) !important;
  background: color-mix(in srgb, var(--project-color, var(--brand-primary)) 7%, #ffffff) !important;
  color: var(--brand-text) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--project-color, var(--brand-primary)) 24%, transparent),
    0 0 0 3px color-mix(in srgb, var(--project-color, var(--brand-primary)) 18%, transparent) !important;
}

.calendar-project strong,
.calendar-project small {
  color: var(--brand-text) !important;
}

.calendar-project small {
  color: var(--brand-muted) !important;
  opacity: 1 !important;
}

/* Project needs attention theme cleanup */
.project-command-panel + .alerts-dropdown,
.alerts-dropdown.alerts-panel {
  border: 1px solid var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-surface) 96%, var(--brand-panel)) !important;
  box-shadow: 0 18px 42px rgba(var(--brand-command-rgb), 0.07) !important;
}

.alerts-dropdown .alerts-panel-summary {
  border: 1px solid var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
}

.alerts-dropdown[open] .alerts-panel-summary {
  border-color: var(--brand-primary) !important;
  background: var(--brand-command-active-gradient) !important;
}

.alerts-dropdown .alerts-panel-summary strong,
.alerts-dropdown .alerts-panel-summary span,
.alerts-dropdown .alerts-panel-summary b {
  color: inherit !important;
}

.alerts-dropdown .alerts-panel-summary b {
  min-width: 64px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: var(--theme-primary-shadow) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 10px !important;
  text-transform: capitalize !important;
}

.alerts-dropdown[open] .alerts-panel-summary b {
  background: var(--brand-command) !important;
  color: var(--brand-on-command) !important;
  font-size: 0 !important;
}

.alerts-dropdown[open] .alerts-panel-summary b::before {
  content: "Close" !important;
  font-size: 11px !important;
}

.alerts-dropdown .alert-list {
  gap: 12px !important;
}

.alerts-dropdown .alert-card {
  --alert-accent: var(--brand-primary);
  min-width: 0 !important;
  border: 1px solid var(--brand-border) !important;
  border-left: 6px solid var(--alert-accent) !important;
  background: var(--brand-surface) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
}

.alerts-dropdown .alert-card.critical {
  --alert-accent: var(--brand-danger);
}

.alerts-dropdown .alert-card.warning {
  --alert-accent: var(--brand-warning);
}

.alerts-dropdown .alert-card.info {
  --alert-accent: var(--brand-primary);
}

.alerts-dropdown .alert-card span {
  background: var(--alert-accent) !important;
  color: #ffffff !important;
}

.alerts-dropdown .alert-card.warning span {
  color: var(--brand-text) !important;
}

.alerts-dropdown .alert-card strong {
  color: var(--brand-text) !important;
}

.alerts-dropdown .alert-card p,
.alerts-dropdown .empty-alerts {
  color: var(--brand-muted) !important;
}

.alerts-dropdown .alert-card button {
  justify-self: end !important;
  min-width: 112px !important;
}

.workspace .stat,
.workspace .stat.warn,
.workspace .stat.good,
.workspace .stat.bad,
.workspace .stat-button,
.workspace .system-panel-stat,
.workspace .summary-drilldown > summary,
.workspace .checkbox-picker > summary,
.workspace .alerts-panel-summary{
  border-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2) !important;
}

.workspace .stat.active,
.workspace .stat-button.active,
.workspace .system-panel-stat.active,
.workspace .summary-drilldown[open] > summary,
.workspace .checkbox-picker[open] > summary,
.workspace .alerts-dropdown[open] > .alerts-panel-summary{
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace .stat *,
.workspace .stat-button *,
.workspace .system-panel-stat *,
.workspace .summary-drilldown > summary *,
.workspace .checkbox-picker > summary *,
.workspace .alerts-panel-summary *{
  color: inherit !important;
}

.workspace .summary-drilldown > summary span:not([data-details-toggle-state]),
.workspace .checkbox-picker > summary span:not([data-details-toggle-state]),
.workspace .alerts-panel-summary span:not([data-details-toggle-state]) {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: inherit !important;
  box-shadow: none !important;
}

.workspace details > summary [data-details-toggle-state],
.workspace details > summary .details-toggle-state {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: none !important;
}

.workspace details[open] > summary [data-details-toggle-state],
.workspace details[open] > summary .details-toggle-state {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}

/* Sitewide button direction: blue by default, dark when selected/opened */
.workspace button:not(:disabled):not(.active):not([aria-pressed="true"]):not([aria-expanded="true"]):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.stat):not(.stat-button):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button) {
  border-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.2) !important;
}

.workspace button:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.stat):not(.stat-button):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button):hover {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 14px 28px rgba(var(--brand-command-rgb), 0.18) !important;
}

.workspace button.active:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card),
.workspace button[aria-pressed="true"]:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]),
.workspace button[aria-expanded="true"]:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]) {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace button:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button) * {
  color: inherit !important;
}

.workspace .create-form .project-form-section > legend > button {
  border-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2) !important;
}

.workspace .create-form .project-form-section > legend > button[aria-expanded="true"] {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace .create-form .project-form-section > legend > button * {
  color: inherit !important;
}

/* Preserve information-card buttons as light cards, not solid action buttons */
.workspace button[data-location-search-result] {
  border: 1px solid color-mix(in srgb, var(--project-color, var(--brand-primary)) 32%, var(--brand-border)) !important;
  border-left: 5px solid var(--project-color, var(--brand-primary)) !important;
  background: color-mix(in srgb, var(--project-color, var(--brand-primary)) 9%, #ffffff) !important;
  color: var(--brand-text) !important;
  box-shadow: 0 8px 18px rgba(var(--brand-command-rgb), 0.05) !important;
}

.workspace button[data-location-search-result]:hover {
  border-color: var(--project-color, var(--brand-primary)) !important;
  background: color-mix(in srgb, var(--project-color, var(--brand-primary)) 16%, #ffffff) !important;
  color: var(--brand-text) !important;
}

.workspace button[data-location-search-result] * {
  color: inherit !important;
}

/* Attention headers and count badges should follow the same blue-closed, dark-open standard */
.workspace .alerts-dropdown > .alerts-panel-summary {
  border-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2) !important;
}

.workspace .alerts-dropdown[open] > .alerts-panel-summary {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace .alerts-dropdown > .alerts-panel-summary > div {
  justify-items: start !important;
}

.workspace .alerts-dropdown > .alerts-panel-summary span:not([data-details-toggle-state]) {
  width: max-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: inherit !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
}

.workspace .alerts-dropdown > .alerts-panel-summary [data-details-toggle-state],
.workspace .alerts-dropdown > .alerts-panel-summary .details-toggle-state {
  min-width: 64px !important;
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
}

.workspace .alerts-dropdown[open] > .alerts-panel-summary [data-details-toggle-state],
.workspace .alerts-dropdown[open] > .alerts-panel-summary .details-toggle-state {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}

/* High-specificity pass for form, fleet, and employee accordions */
.workspace .create-form fieldset.project-form-section > legend > button[data-project-section-toggle] {
  border-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2) !important;
}

.workspace .create-form fieldset.project-form-section > legend > button[data-project-section-toggle][aria-expanded="true"] {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace .create-form fieldset.project-form-section > legend > button[data-project-section-toggle] * {
  color: inherit !important;
}

.workspace .create-form fieldset.project-form-section > legend > button[data-project-section-toggle] .project-section-title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.workspace .create-form fieldset.project-form-section > legend > button[data-project-section-toggle] .project-section-title em {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.workspace .create-form fieldset.project-form-section.project-section-optional {
  border-style: dashed;
  background: color-mix(in srgb, var(--brand-primary) 4%, #ffffff);
}

.workspace .create-form fieldset.project-form-section > legend > button[data-project-section-toggle] b {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: none !important;
}

.workspace .create-form fieldset.project-form-section > legend > button[data-project-section-toggle][aria-expanded="true"] b {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}

/* System page headers also follow the blue-closed, dark-open direction */
.workspace .system-status-page .system-status-grid .system-panel-stat,
.workspace .system-status-page .system-status-grid .system-panel-stat.warn,
.workspace .system-status-page .system-status-grid .system-panel-stat.good,
.workspace .system-status-page .system-status-grid .system-panel-stat.bad {
  border-color: var(--brand-primary) !important;
  border-top-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2) !important;
}

.workspace .system-status-page .system-status-grid .system-panel-stat.active,
.workspace .system-status-page .system-status-grid .system-panel-stat[aria-pressed="true"],
.workspace .system-status-page .system-status-grid .system-panel-stat:hover {
  border-color: var(--brand-command-border) !important;
  border-top-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace .system-status-page .system-status-grid .system-panel-stat *,
.workspace .system-status-page .system-status-grid .system-panel-stat.active *,
.workspace .system-status-page .system-status-grid .system-panel-stat[aria-pressed="true"] *,
.workspace .system-status-page .system-status-grid .system-panel-stat:hover * {
  color: inherit !important;
}

.workspace .system-status-page .system-status-grid .system-panel-stat > small {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Project and proposal board/calendar headers follow the primary header standard */
.workspace .project-calendar .calendar-label{
  border-color: var(--brand-primary) !important;
  border-top-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 12px 28px rgba(var(--brand-primary-rgb), 0.18) !important;
}

.workspace .project-calendar .calendar-label *{
  color: inherit !important;
}

/* Sitewide action buttons match the Operations Crew Utilization color direction */
.workspace button:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button):not([data-location-search-result]):not([data-project-map-result]) {
  border-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2) !important;
}

.workspace button:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button):not([data-location-search-result]):not([data-project-map-result]):hover,
.workspace button.active:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button):not([data-location-search-result]):not([data-project-map-result]),
.workspace button[aria-pressed="true"]:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button):not([data-location-search-result]):not([data-project-map-result]),
.workspace button[aria-expanded="true"]:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button):not([data-location-search-result]):not([data-project-map-result]) {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace button:not(:disabled):not(.danger):not([data-delete]):not([data-delete-user]):not([data-delete-saved]):not([data-brand-delete-saved]):not([data-user-status="Inactive"]):not([data-remove]):not([data-deactivate]):not(.calendar-project):not(.weekly-project-block):not(.timeline-block):not(.schedule-assignment-project):not(.job-row):not(.summary-item):not(.schedule-summary-row):not(.weekly-day-header):not(.project-board-card):not(.proposal-card):not(.fleet-group-card):not(.fleet-group-head):not(.employee-group-card):not(.brand-qa-primary):not(.brand-qa-secondary):not(.brand-qa-danger):not(.brand-qa-project):not(.ghost):not(.text-button):not([data-location-search-result]):not([data-project-map-result]) * {
  color: inherit !important;
}

.top-install,
.install {
  border-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2) !important;
}

.top-install:hover,
.install:hover {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace .alerts-dropdown > .alerts-panel-summary > div > span:not([data-details-toggle-state]){
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}

/* Office command center expansion */
.workspace .office-command-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)) !important;
  gap: 10px !important;
}

.workspace .office-command-card {
  min-height: 126px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: start !important;
  gap: 9px 14px !important;
  padding: 12px !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-primary-rgb), 0.2) !important;
  text-align: left !important;
}

.workspace .office-command-card.active {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

.workspace .office-command-card span,
.workspace .office-command-card strong,
.workspace .office-command-card small,
.workspace .office-command-card b {
  color: inherit !important;
}

.workspace .office-command-card span {
  display: block !important;
  grid-column: 1 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.workspace .office-command-card strong {
  grid-column: 1 !important;
  font-size: 30px !important;
  line-height: 0.95 !important;
}

.workspace .office-command-card small {
  grid-column: 1 / -1 !important;
  max-width: 100% !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  opacity: 0.88 !important;
}

.workspace .office-command-card b {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 64px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  align-self: start !important;
  justify-self: end !important;
  border: 1px solid var(--brand-command-border) !important;
  border-radius: 999px !important;
  background: var(--brand-command-gradient) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: capitalize !important;
}

.workspace .office-command-card.active b {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: var(--brand-primary) !important;
}

.workspace .office-work-sections,
.workspace .office-subpanel {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.workspace .office-subpanel {
  padding: 12px !important;
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.05) !important;
}

.workspace .office-subpanel .mini-section-title {
  align-items: start !important;
  min-height: 52px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 12px 26px rgba(var(--brand-primary-rgb), 0.16) !important;
}

.workspace .office-subpanel .mini-section-title strong,
.workspace .office-subpanel .mini-section-title span {
  color: inherit !important;
}

.workspace .office-subpanel .mini-section-title span {
  min-width: 58px !important;
  min-height: 26px !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: end !important;
  border: 1px solid var(--brand-command-border) !important;
  border-radius: 999px !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 9px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.workspace .office-empty-panel {
  min-height: 88px !important;
  align-content: center !important;
}

.workspace .user-guide-page {
  display: grid !important;
  gap: 14px !important;
}

.workspace .guide-hero,
.workspace .guide-section,
.workspace .guide-card,
.workspace .guide-workflow {
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--brand-text) !important;
  box-shadow: 0 14px 32px rgba(var(--brand-command-rgb), 0.06) !important;
}

.workspace .guide-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px !important;
}

.workspace .guide-hero span {
  color: var(--brand-primary) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.workspace .guide-hero h2 {
  margin: 5px 0 !important;
  color: var(--brand-text) !important;
  font-size: 32px !important;
  line-height: 1 !important;
}

.workspace .guide-hero p,
.workspace .guide-card p,
.workspace .guide-page-list p {
  margin: 0 !important;
  color: var(--brand-muted) !important;
  line-height: 1.45 !important;
}

.workspace .guide-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.workspace .guide-actions a,
.workspace .guide-actions button {
  min-height: 40px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  padding: 0 12px !important;
  text-decoration: none !important;
}

.workspace .guide-grid,
.workspace .guide-page-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.workspace .guide-card,
.workspace .guide-page-list article,
.workspace .guide-workflow {
  padding: 13px !important;
}

.workspace .guide-card strong,
.workspace .guide-page-list strong,
.workspace .guide-workflow strong {
  color: var(--brand-text) !important;
}

.workspace .guide-card ol,
.workspace .guide-workflow ol {
  margin: 8px 0 0 18px !important;
  padding: 0 !important;
  color: var(--brand-muted) !important;
  line-height: 1.45 !important;
}

.workspace .guide-section {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
}

.workspace .guide-page-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.workspace .guide-page-list article {
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--brand-primary) 2%, #ffffff) !important;
}

.workspace .guide-page-list article strong {
  display: block !important;
  margin-bottom: 5px !important;
}

.workspace .guide-workflow-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.workspace .guide-workflow summary {
  min-height: 34px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: center !important;
  column-gap: 12px !important;
  cursor: pointer !important;
  list-style: none !important;
}

.workspace .guide-workflow summary::-webkit-details-marker {
  display: none !important;
}

.workspace .guide-workflow summary::marker {
  content: "" !important;
}

.workspace .guide-workflow summary strong {
  min-width: 0 !important;
  line-height: 1.25 !important;
}

.workspace .guide-workflow summary [data-details-toggle-state],
.workspace .guide-workflow summary .details-toggle-state {
  justify-self: end !important;
  flex-shrink: 0 !important;
}

.workspace .guide-workflow[open] summary {
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--brand-border) !important;
}

@media (max-width: 1100px) {
  .workspace .guide-grid,
  .workspace .guide-page-list,
  .workspace .guide-workflow-list,
  .workspace .guide-hero {
    grid-template-columns: 1fr !important;
  }

  .workspace .guide-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 900px) {
  .my-day-safety-grid {
    grid-template-columns: 1fr;
  }
}

/* Employee My Day workflow/checklist: remove legacy pastel status cards. */
#root .workspace .my-day .my-day-workflow {
  border-color: var(--brand-border) !important;
  background: var(--brand-panel) !important;
  color: var(--brand-text) !important;
}

#root .workspace .my-day .my-day-workflow-steps article,
#root .workspace .my-day .my-day-workflow-steps article.complete,
#root .workspace .my-day .my-day-workflow-steps article.blocked,
#root .workspace .my-day .my-day-checklist div,
#root .workspace .my-day .my-day-checklist .complete {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
}

#root .workspace .my-day .my-day-workflow-steps article.complete,
#root .workspace .my-day .my-day-checklist .complete {
  border-left-color: var(--brand-success) !important;
}

#root .workspace .my-day .my-day-workflow-steps article.blocked {
  border-left-color: var(--brand-danger) !important;
}

#root .workspace .my-day .my-day-workflow-steps span,
#root .workspace .my-day .my-day-checklist span {
  width: fit-content !important;
  min-height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 999px !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 8px 18px rgba(var(--brand-primary-rgb), 0.16) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 9px !important;
  text-transform: uppercase !important;
}

#root .workspace .my-day .my-day-workflow-steps article.complete span,
#root .workspace .my-day .my-day-checklist .complete span {
  border-color: var(--brand-success) !important;
  background: var(--brand-success) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-success) 24%, transparent) !important;
}

#root .workspace .my-day .my-day-workflow-steps article.blocked span {
  border-color: var(--brand-danger) !important;
  background: var(--brand-danger) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-danger) 22%, transparent) !important;
}

#root .workspace .my-day .my-day-workflow-steps strong,
#root .workspace .my-day .my-day-checklist strong {
  color: var(--brand-text) !important;
}

#root .workspace .my-day .my-day-workflow-steps small {
  color: var(--brand-muted) !important;
}

/* Employee My Day phone-first flow: compact assignment and collapsible priority panels. */
#root .workspace .my-day .my-day-assigned-projects,
#root .workspace .my-day .my-day-priority-drawer {
  border-color: var(--brand-border) !important;
  background: var(--brand-panel) !important;
  color: var(--brand-text) !important;
  box-shadow: 0 14px 30px rgba(var(--brand-command-rgb), 0.08) !important;
}

#root .workspace .my-day .my-day-time-tools-body {
  display: grid !important;
  grid-template-columns: minmax(420px, 1.25fr) minmax(280px, 0.75fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

#root .workspace .my-day .my-day-time-tools-body > .my-day-clock-panel,
#root .workspace .my-day .my-day-time-tools-body > .work-log-panel {
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
  padding: 12px !important;
}

#root .workspace .my-day .my-day-time-tools-body > .my-day-wrap-status {
  grid-column: 1 / -1 !important;
}

#root .workspace .my-day .my-day-time-tools-body > .my-day-clock-panel.clocked-in {
  border-left-color: var(--brand-success) !important;
}

#root .workspace .my-day .my-day-time-tools .my-day-clock-form {
  grid-template-columns: 1fr !important;
}

#root .workspace .my-day .my-day-time-tools .my-day-clock-active {
  grid-template-columns: 1fr !important;
}

#root .workspace .my-day .my-day-workflow-body {
  display: grid !important;
  gap: 10px !important;
}

#root .workspace .my-day .my-day-workflow-body .my-day-project-picker {
  min-width: 0 !important;
  max-width: 520px !important;
}

#root .workspace .my-day .my-day-mobile-utilities {
  display: none;
  border-color: var(--brand-border) !important;
  background: var(--brand-panel) !important;
  color: var(--brand-text) !important;
}

#root .workspace .my-day .my-day-mobile-utility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#root .workspace .my-day .mobile-utility-action {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 12px 26px rgba(var(--brand-primary-rgb), 0.16) !important;
  padding: 10px 12px !important;
  text-align: left !important;
}

#root .workspace .my-day .mobile-utility-action span,
#root .workspace .my-day .mobile-utility-action b {
  color: inherit !important;
}

#root .workspace .my-day .mobile-utility-action span {
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

#root .workspace .my-day .mobile-utility-action b {
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  padding: 0 8px !important;
}

#root .workspace .my-day .my-day-assigned-project-list {
  display: grid !important;
  gap: 8px !important;
}

#root .workspace .my-day .my-day-assigned-project {
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: none !important;
  text-align: left !important;
}

#root .workspace .my-day .my-day-assigned-project.active {
  border-color: var(--brand-primary) !important;
  border-left-color: var(--brand-primary) !important;
  background: color-mix(in srgb, var(--brand-primary) 5%, #ffffff) !important;
}

#root .workspace .my-day .my-day-assigned-project > span,
#root .workspace .my-day .my-day-assigned-project > b {
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 9px !important;
  white-space: nowrap !important;
}

#root .workspace .my-day .my-day-assigned-project strong {
  display: block !important;
  color: var(--brand-text) !important;
  font-weight: 950 !important;
}

#root .workspace .my-day .my-day-assigned-project small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--brand-muted) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#root .workspace .my-day .my-day-priority-drawer {
  overflow: hidden !important;
  padding: 0 !important;
}

#root .workspace .my-day .my-day-priority-drawer > summary {
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  cursor: pointer !important;
  list-style: none !important;
}

#root .workspace .my-day .my-day-priority-drawer[open] > summary {
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
}

#root .workspace .my-day .my-day-priority-drawer > summary::-webkit-details-marker {
  display: none !important;
}

#root .workspace .my-day .my-day-priority-drawer > summary * {
  color: inherit !important;
}

#root .workspace .my-day .my-day-priority-drawer > summary span:not([data-details-toggle-state]) {
  display: block !important;
  margin-top: 3px !important;
  width: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  padding: 0 !important;
}

#root .workspace .my-day .my-day-priority-drawer > summary > b:not([data-details-toggle-state]) {
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), 0.22) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 9px !important;
}

#root .workspace .my-day .my-day-drawer-body {
  padding: 12px !important;
}

#root .workspace .my-day .my-day-priority-drawer.my-day-action-alerts,
#root .workspace .my-day .my-day-priority-drawer.my-day-safety-center {
  border-color: var(--brand-border) !important;
  background: var(--brand-panel) !important;
}

#root .workspace .my-day .my-day-priority-drawer .my-day-safety-grid {
  background: var(--brand-panel) !important;
}

#root .workspace .my-day .my-day-priority-drawer .my-day-safety-grid > section,
#root .workspace .my-day .my-day-priority-drawer .employee-alert {
  background: var(--brand-surface) !important;
}

#root .workspace .my-day .my-day-assigned-projects > .section-title {
  align-items: start !important;
}

#root .workspace .my-day .my-day-assigned-projects > .section-title > div {
  display: grid !important;
  gap: 3px !important;
}

#root .workspace .my-day .my-day-assigned-projects > .section-title span {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#root .workspace .my-day .my-day-safety-shortcut .section-title {
  align-items: center !important;
}

#root .workspace .my-day .my-day-safety-shortcut .section-title button {
  min-height: 38px !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 999px !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: var(--theme-primary-shadow) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  padding: 8px 14px !important;
}

#root .workspace .my-day .my-day-wrap-status-list {
  display: grid !important;
  gap: 8px !important;
}

#root .workspace .my-day .my-day-wrap-status-list article {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
  padding: 10px !important;
}

#root .workspace .my-day .my-day-wrap-status-list article.complete {
  border-left-color: var(--brand-success) !important;
}

#root .workspace .my-day .my-day-wrap-status-list article.blocked {
  border-left-color: var(--brand-danger) !important;
}

#root .workspace .my-day .my-day-wrap-status-list article > span {
  min-width: 56px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 999px !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 9px !important;
  text-transform: uppercase !important;
}

#root .workspace .my-day .my-day-wrap-status-list article.complete > span {
  border-color: var(--brand-success) !important;
  background: var(--brand-success) !important;
  color: #ffffff !important;
}

#root .workspace .my-day .my-day-wrap-status-list article.blocked > span {
  border-color: var(--brand-danger) !important;
  background: var(--brand-danger) !important;
  color: #ffffff !important;
}

#root .workspace .my-day .my-day-wrap-status-list strong,
#root .workspace .my-day .my-day-wrap-status-list small {
  display: block !important;
  min-width: 0 !important;
}

#root .workspace .my-day .my-day-wrap-status-list strong {
  color: var(--brand-text) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#root .workspace .my-day .my-day-wrap-status-list small {
  margin-top: 2px !important;
  color: var(--brand-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#root .workspace .my-day .my-day-wrap-status-list button {
  min-height: 34px !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 999px !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  padding: 7px 11px !important;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  #root .workspace .topbar.my-day-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  #root .workspace .topbar.my-day-topbar > div:first-child {
    min-width: 0 !important;
  }

  #root .workspace .topbar.my-day-topbar p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  #root .workspace .topbar.my-day-topbar h1 {
    margin-top: 2px !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  #root .workspace .topbar.my-day-topbar .search,
  #root .workspace .topbar.my-day-topbar > .guide-button,
  #root .workspace .topbar.my-day-topbar > .top-install {
    display: none !important;
  }

  #root .workspace .topbar.my-day-topbar .user-menu {
    width: auto !important;
    min-width: 0 !important;
    max-width: 192px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 4px !important;
  }

  #root .workspace .topbar.my-day-topbar .user-menu div {
    padding-left: 7px !important;
  }

  #root .workspace .topbar.my-day-topbar .user-menu span {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #root .workspace .topbar.my-day-topbar .user-menu strong {
    max-width: 86px !important;
    font-size: 12px !important;
  }

  #root .workspace .topbar.my-day-topbar .user-menu button {
    min-height: 34px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    padding: 0 9px !important;
  }

  #root .workspace .my-day .my-day-hero {
    margin-bottom: 0 !important;
  }

  #root .workspace .my-day:not(.employee-safety-page) .my-day-hero {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  #root .workspace .my-day:not(.employee-safety-page) .my-day-hero > div:first-child > span {
    display: none !important;
  }

  #root .workspace .my-day:not(.employee-safety-page) .my-day-hero h2 {
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  #root .workspace .my-day:not(.employee-safety-page) .my-day-hero p {
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  #root .workspace .my-day:not(.employee-safety-page) .my-day-progress-status {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 4px 10px !important;
    text-align: left !important;
    padding: 10px !important;
  }

  #root .workspace .my-day:not(.employee-safety-page) .my-day-progress-status strong {
    grid-row: span 2 !important;
    font-size: 26px !important;
  }

  #root .workspace .my-day:not(.employee-safety-page) .my-day-progress-status span,
  #root .workspace .my-day:not(.employee-safety-page) .my-day-progress-status small {
    max-width: none !important;
  }

  #root .workspace .my-day:not(.employee-safety-page) .my-day-progress-meter {
    grid-column: 1 / -1 !important;
    margin-top: 4px !important;
  }

  #root .workspace .my-day .my-day-grid {
    display: none !important;
  }

  #root .workspace .my-day .my-day-time-tools-body {
    grid-template-columns: 1fr !important;
  }

  #root .workspace .my-day .my-day-assigned-project {
    grid-template-columns: 1fr auto !important;
    align-items: start !important;
  }

  #root .workspace .my-day .my-day-assigned-projects {
    padding: 0 !important;
  }

  #root .workspace .my-day .my-day-assigned-projects > .section-title {
    min-height: 0 !important;
    padding: 10px 12px !important;
  }

  #root .workspace .my-day .my-day-assigned-projects > .section-title strong {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  #root .workspace .my-day .my-day-assigned-projects > .section-title span {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #root .workspace .my-day .my-day-assigned-project-list {
    padding: 0 10px 10px !important;
  }

  #root .workspace .my-day .my-day-assigned-project > span {
    grid-column: 1;
    justify-self: start;
  }

  #root .workspace .my-day .my-day-assigned-project > div {
    grid-column: 1 / -1;
  }

  #root .workspace .my-day .my-day-assigned-project > b {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  #root .workspace .my-day .my-day-wrap-status-list article {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  #root .workspace .my-day .my-day-wrap-status-list article > span {
    justify-self: start !important;
  }

  #root .workspace .my-day .my-day-wrap-status-list button {
    width: 100% !important;
  }

  #root .workspace .my-day .my-day-priority-drawer > summary {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  #root .workspace .my-day .my-day-mobile-utilities {
    display: grid !important;
  }

  #root .workspace .my-day .my-day-mobile-utility-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .rail .nav button:hover:not(.active),
  .rail .nav button:focus:not(.active),
  .rail .nav button:focus-visible:not(.active) {
    background: transparent !important;
    color: var(--brand-on-rail) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 680px) {
  .rail .nav {
    grid-auto-columns: minmax(96px, 1fr) !important;
  }

  .rail .nav button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    justify-items: start !important;
    gap: 5px !important;
    min-height: 48px !important;
    padding: 0 7px !important;
    text-align: left !important;
  }

  .rail .nav button span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rail .nav button b {
    justify-self: end !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    font-size: 10px !important;
  }

  .rail .nav[data-nav-count="6"] {
    grid-auto-columns: initial !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    overflow-x: clip !important;
  }

  .rail .nav[data-nav-count="6"] button {
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 3px !important;
    padding: 0 2px !important;
    text-align: center !important;
  }

  .rail .nav[data-nav-count="6"] button span {
    flex: 0 0 auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 10px !important;
  }

  .rail .nav[data-nav-count="6"] button[data-view="time"] span {
    font-size: 0 !important;
  }

  .rail .nav[data-nav-count="6"] button[data-view="time"] span::after {
    content: "Time" !important;
    font-size: 10px !important;
  }

  .rail .nav[data-nav-count="6"] button b {
    position: static !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    display: inline-grid !important;
    place-items: center !important;
    align-self: center !important;
    font-size: 9px !important;
  }
}

@media (max-width: 680px) {
  #root .workspace .topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  #root .workspace .topbar > div:first-child {
    min-height: 52px !important;
    display: grid !important;
    align-content: end !important;
  }

  #root .workspace .topbar p {
    min-height: 16px !important;
    line-height: 1.2 !important;
  }

  #root .workspace .topbar h1 {
    min-height: 30px !important;
    overflow: hidden !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #root .workspace .topbar .search,
  #root .workspace .topbar .guide-button,
  #root .workspace .topbar .top-install,
  #root .workspace .topbar .user-menu {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #root .workspace .topbar .guide-button,
  #root .workspace .topbar .top-install {
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
  }

  #root .workspace .topbar > .guide-button,
  #root .workspace .topbar > .top-install,
  #root .workspace .topbar > .search {
    display: none !important;
    min-height: 0 !important;
  }
}

/* Employee field forms: keep manual text boxes tucked behind a consistent drawer. */
#root .workspace .my-day .field-quick-control-collapsible {
  border-color: var(--brand-border) !important;
  border-left-color: var(--brand-primary) !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
}

#root .workspace .my-day .field-quick-heading span {
  color: var(--brand-text) !important;
}

#root .workspace .my-day .field-quick-heading small {
  color: var(--brand-muted) !important;
}

#root .workspace .my-day .field-quick-fill button.active {
  border-color: var(--brand-primary) !important;
  background: var(--brand-command-active-gradient) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: var(--theme-primary-shadow) !important;
}

#root .workspace .my-day .field-quick-fill button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  white-space: normal !important;
}

#root .workspace .my-day .field-quick-fill button.active::after {
  content: "✓";
  width: 19px;
  min-width: 19px;
  height: 19px;
  min-height: 19px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--brand-on-primary);
  border-radius: 50%;
  background: var(--brand-on-primary);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  padding: 0;
  white-space: nowrap;
}

#root .workspace .my-day .field-optional-drawer {
  border-color: var(--brand-border) !important;
  background: var(--brand-panel) !important;
  color: var(--brand-text) !important;
}

#root .workspace .my-day .field-optional-drawer > summary {
  border: 1px solid var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: 0 12px 26px rgba(var(--brand-primary-rgb), 0.16) !important;
}

#root .workspace .my-day .field-optional-drawer[open] > summary {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
  box-shadow: 0 16px 34px rgba(var(--brand-command-rgb), 0.2) !important;
}

#root .workspace .my-day .field-optional-drawer > summary * {
  color: inherit !important;
}

#root .workspace .my-day .field-optional-drawer > summary span:not([data-details-toggle-state]) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#root .workspace .my-day .field-optional-drawer > summary b[data-details-toggle-state] {
  border-color: var(--brand-command-border) !important;
  background: var(--brand-command-gradient) !important;
  color: var(--brand-on-command) !important;
}

#root .workspace .my-day .field-optional-drawer[open] > summary b[data-details-toggle-state] {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}

/* Optional/manual field details are secondary inputs,
so keep them light. */
#root .workspace .my-day .field-optional-drawer > summary,
#root .workspace .my-day .field-optional-drawer[open] > summary {
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: var(--theme-card-shadow) !important;
}

#root .workspace .my-day .field-optional-drawer > summary strong {
  color: var(--brand-text) !important;
}

#root .workspace .my-day .field-optional-drawer > summary span:not([data-details-toggle-state]) {
  color: var(--brand-primary) !important;
}

#root .workspace .my-day .field-optional-drawer > summary b[data-details-toggle-state],
#root .workspace .my-day .field-optional-drawer[open] > summary b[data-details-toggle-state] {
  border-color: var(--theme-pill-closed-border) !important;
  background: var(--theme-pill-closed-background) !important;
  color: var(--theme-pill-closed-color) !important;
  box-shadow: 0 10px 22px rgba(var(--brand-command-rgb), 0.16) !important;
}

#root .workspace .my-day .my-day-progress-status {
  min-width: 170px !important;
  display: grid !important;
  gap: 6px !important;
  justify-items: end !important;
  text-align: right !important;
  border: 1px solid var(--brand-primary) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: 0 12px 26px rgba(var(--brand-command-rgb), 0.08) !important;
  padding: 12px !important;
}

#root .workspace .my-day button.my-day-progress-status {
  cursor: pointer !important;
}

#root .workspace .my-day button.my-day-progress-status:hover,
#root .workspace .my-day button.my-day-progress-status:focus-visible {
  border-color: var(--brand-primary) !important;
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--brand-surface)) !important;
  color: var(--brand-text) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.14), 0 12px 26px rgba(var(--brand-command-rgb), 0.08) !important;
}

#root .workspace .my-day .my-day-progress-status.complete {
  border-color: var(--brand-success) !important;
  border-left-color: var(--brand-success) !important;
}

#root .workspace .my-day .my-day-progress-status strong {
  color: var(--brand-text) !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#root .workspace .my-day .my-day-progress-status span {
  color: var(--brand-primary) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

#root .workspace .my-day .my-day-progress-status small {
  max-width: 180px !important;
  color: var(--brand-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#root .workspace .my-day .my-day-progress-meter {
  width: 100% !important;
  height: 8px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--brand-primary) 10%, #ffffff) !important;
}

#root .workspace .my-day .my-day-progress-meter em {
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  background: var(--brand-command-active-gradient) !important;
}

/* Safety and credentials theme normalization for desktop and phone My Day. */
#root .workspace .my-day .my-day-safety-center {
  border: 1px solid var(--brand-border) !important;
  background: var(--brand-panel) !important;
}

#root .workspace .my-day .my-day-safety-center[open] > summary > b:not([data-details-toggle-state]) {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: var(--brand-command) !important;
  color: var(--brand-on-command) !important;
  box-shadow: none !important;
}

#root .workspace .my-day .my-day-safety-center .my-day-safety-grid {
  background: var(--brand-panel) !important;
}

#root .workspace .my-day .my-day-safety-center .my-day-safety-grid > section {
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  background: var(--brand-surface) !important;
  box-shadow: 0 10px 24px rgba(var(--brand-command-rgb), 0.06) !important;
}

#root .workspace .my-day .my-day-safety-center .mini-section-title {
  align-items: start !important;
}

#root .workspace .my-day .my-day-safety-center .mini-section-title strong {
  min-width: 0 !important;
  color: var(--brand-text) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

#root .workspace .my-day .my-day-safety-center .mini-section-title span {
  min-width: 28px !important;
  min-height: 26px !important;
  max-width: min(44vw, 150px) !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: end !important;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--brand-border)) !important;
  border-radius: 999px !important;
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
  box-shadow: var(--theme-primary-shadow) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  padding: 0 9px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

#root .workspace .my-day .my-day-safety-center .employee-certification-badges span,
#root .workspace .my-day .my-day-safety-center .safety-form-status-list article,
#root .workspace .my-day .my-day-safety-center .official-document-list a {
  min-width: 0 !important;
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  border-radius: 8px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-text) !important;
  box-shadow: none !important;
}

#root .workspace .my-day .my-day-safety-center .employee-certification-badges span.current,
#root .workspace .my-day .my-day-safety-center .safety-form-status-list article.complete,
#root .workspace .my-day .my-day-safety-center .safety-form-status-list article.current {
  border-left-color: var(--brand-success) !important;
}

#root .workspace .my-day .my-day-safety-center .employee-certification-badges span.due-soon {
  border-left-color: var(--brand-warning) !important;
}

#root .workspace .my-day .my-day-safety-center .employee-certification-badges span.expired,
#root .workspace .my-day .my-day-safety-center .safety-form-status-list article.blocked {
  border-left-color: var(--brand-danger) !important;
}

#root .workspace .my-day .my-day-safety-center .employee-certification-badges b,
#root .workspace .my-day .my-day-safety-center .safety-form-status-list strong,
#root .workspace .my-day .my-day-safety-center .official-document-list span {
  color: var(--brand-text) !important;
}

#root .workspace .my-day .my-day-safety-center .employee-certification-badges small,
#root .workspace .my-day .my-day-safety-center .safety-form-status-list small,
#root .workspace .my-day .my-day-safety-center .official-document-list small {
  color: var(--brand-muted) !important;
}

#root .workspace .my-day .my-day-safety-center .safety-form-status-list article > span,
#root .workspace .my-day .my-day-safety-center .official-document-list a > b {
  width: max-content !important;
  min-height: 26px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--brand-border)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--brand-primary) 10%, #ffffff) !important;
  color: var(--brand-primary-strong) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 9px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#root .workspace .my-day .my-day-safety-center .safety-form-status-list article.complete > span,
#root .workspace .my-day .my-day-safety-center .safety-form-status-list article.current > span {
  border-color: var(--brand-success) !important;
  background: var(--brand-success) !important;
  color: #ffffff !important;
}

#root .workspace .my-day .my-day-safety-center .safety-form-status-list article.blocked > span {
  border-color: var(--brand-danger) !important;
  background: var(--brand-danger) !important;
  color: #ffffff !important;
}

@media (max-width: 900px) {
  #root .workspace .my-day .my-day-safety-center .my-day-safety-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  #root .workspace .my-day .my-day-safety-center > summary {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  #root .workspace .my-day .my-day-safety-center .mini-section-title {
    grid-template-columns: minmax(0, 1fr) max-content !important;
  }

  #root .workspace .my-day .my-day-safety-center .mini-section-title span {
    max-width: 128px !important;
  }
}

/* Header-card correction: keep page tabs readable without turning counts into bubbles. */
#root .workspace .system-status-page .system-panel-stat,
#root .workspace .system-status-page .system-panel-stat:hover:not(.active):not([aria-pressed="true"]) {
  border-color: var(--theme-header-closed-border) !important;
  border-top-color: var(--theme-header-closed-border) !important;
  background: var(--theme-header-closed-background) !important;
  color: var(--theme-header-closed-color) !important;
  box-shadow: var(--theme-header-closed-shadow) !important;
}

#root .workspace .system-status-page .system-panel-stat.active,
#root .workspace .system-status-page .system-panel-stat[aria-pressed="true"] {
  border-color: var(--theme-header-open-border) !important;
  border-top-color: var(--theme-header-open-border) !important;
  background: var(--theme-header-open-background) !important;
  color: var(--theme-header-open-color) !important;
  box-shadow: var(--theme-header-open-shadow) !important;
}

#root .workspace .system-status-page .system-panel-stat * {
  color: inherit !important;
}

#root .workspace .system-status-page .system-panel-stat .panel-stat-value {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#root .workspace .system-status-page .system-panel-stat > small {
  min-width: 64px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid var(--theme-pill-closed-border) !important;
  border-radius: 999px !important;
  background: var(--theme-pill-closed-background) !important;
  color: var(--theme-pill-closed-color) !important;
  box-shadow: 0 10px 22px rgba(var(--brand-command-rgb), 0.16) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 10px !important;
  text-align: center !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}

#root .workspace .system-status-page .system-panel-stat.active > small,
#root .workspace .system-status-page .system-panel-stat[aria-pressed="true"] > small {
  border-color: var(--theme-pill-open-border) !important;
  background: var(--theme-pill-open-background) !important;
  color: var(--theme-pill-open-color) !important;
  box-shadow: var(--theme-primary-shadow) !important;
}

/* Topbar account card: prevent the role label and Sign Out button from crowding. */
#root .workspace .topbar .user-menu {
  width: min(100%, 260px) !important;
  max-width: 260px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 7px 8px !important;
}

#root .workspace .topbar .user-menu > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
  padding: 0 4px !important;
}

#root .workspace .topbar .user-menu span,
#root .workspace .topbar .user-menu strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#root .workspace .topbar .user-menu button {
  min-width: 86px !important;
  justify-self: end !important;
  white-space: nowrap !important;
}

/* Final optional/manual drawer correction across field, safety, and project detail forms. */
#root .workspace details.field-optional-drawer {
  border-color: var(--brand-border) !important;
  background: var(--brand-panel) !important;
  color: var(--brand-text) !important;
}

#root .workspace details.field-optional-drawer > summary,
#root .workspace details.field-optional-drawer[open] > summary {
  border: 1px solid var(--brand-border) !important;
  border-left: 5px solid var(--brand-primary) !important;
  background: var(--brand-surface) !important;
  background-image: none !important;
  color: var(--brand-text) !important;
  box-shadow: var(--theme-card-shadow) !important;
}

#root .workspace details.field-optional-drawer > summary *,
#root .workspace details.field-optional-drawer[open] > summary * {
  color: inherit !important;
}

#root .workspace details.field-optional-drawer > summary strong,
#root .workspace details.field-optional-drawer[open] > summary strong {
  color: var(--brand-text) !important;
}

#root .workspace details.field-optional-drawer > summary span:not([data-details-toggle-state]),
#root .workspace details.field-optional-drawer[open] > summary span:not([data-details-toggle-state]) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--brand-primary) !important;
  padding: 0 !important;
}

#root .workspace details.field-optional-drawer > summary b[data-details-toggle-state],
#root .workspace details.field-optional-drawer[open] > summary b[data-details-toggle-state] {
  min-width: 58px !important;
  min-height: 28px !important;
  border: 1px solid var(--theme-pill-closed-border) !important;
  border-radius: 999px !important;
  background: var(--theme-pill-closed-background) !important;
  background-image: var(--theme-pill-closed-background) !important;
  color: var(--theme-pill-closed-color) !important;
  box-shadow: 0 10px 22px rgba(var(--brand-command-rgb), 0.16) !important;
}

#root .workspace .form-error {
  grid-column: 1 / -1;
  border: 1px solid #f59e0b;
  border-left: 5px solid #f97316;
  border-radius: 8px;
  background: #fff7ed;
  color: #7c2d12;
  font-weight: 800;
  padding: 10px 12px;
}

#root .workspace label.field-error > span {
  color: #9a3412;
}

#root .workspace [aria-invalid="true"] {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
}

#root .workspace .safety-signoff-panel {
  min-width: 0;
}

#root .workspace .safety-signoff-head,
#root .workspace .safety-signoff-head > div {
  min-width: 0;
}

#root .workspace .safety-signoff-head span {
  display: block;
  line-height: 1.35;
}

#root .workspace .crew-signoff-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
  width: 100%;
  min-width: 0;
}

#root .workspace .crew-signoff-row label,
#root .workspace .crew-signoff-row input {
  width: 100%;
  min-width: 0;
}

#root .workspace .crew-signoff-row button {
  width: auto;
  min-width: 96px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #root .workspace .crew-signoff-row {
    grid-template-columns: 1fr;
  }

  #root .workspace .crew-signoff-row button {
    width: 100%;
  }
}