:root {
  --bg: #f8faff;
  --surface: #ffffff;
  --surface-soft: #f9fafb;
  --ink: #111827;
  --muted: #667085;
  --line: #e5e7eb;
  --line-strong: #d0d5dd;
  --blue: #2563eb;
  --blue-soft: #eff6ff;
  --green: #16a34a;
  --green-soft: #ecfdf3;
  --orange: #f97316;
  --orange-soft: #fff7ed;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
  --shadow-soft: 0 18px 60px rgba(79, 70, 229, 0.08);
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 45% -10%, rgba(99, 102, 241, 0.09), transparent 34%),
    radial-gradient(circle at 92% 4%, rgba(34, 197, 94, 0.08), transparent 26%),
    var(--bg);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

.hidden {
  display: none !important;
}

.app-frame {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 260px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed {
  grid-template-columns: 82px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed .sidebar {
  padding-inline: 12px;
}

.app-frame.sidebar-collapsed .brand-row h1,
.app-frame.sidebar-collapsed .profile-card div:not(.profile-avatar),
.app-frame.sidebar-collapsed .profile-card > svg,
.app-frame.sidebar-collapsed .profile-menu,
.app-frame.sidebar-collapsed .nav-tab span,
.app-frame.sidebar-collapsed .sidebar-footer .field,
.app-frame.sidebar-collapsed #apiSettings,
.app-frame.sidebar-collapsed #saveApiBase {
  display: none;
}

.app-frame.sidebar-collapsed .brand-row,
.app-frame.sidebar-collapsed .nav-tab,
.app-frame.sidebar-collapsed .profile-card {
  justify-content: center;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  padding: 20px 16px;
  backdrop-filter: blur(18px);
}

.brand-row,
.profile-card,
.nav-tab,
.header-actions,
.search-box,
.button,
.icon-button {
  display: flex;
  align-items: center;
}

.brand-row {
  gap: 12px;
  padding: 2px 4px 10px;
}

.brand-mark {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.08);
  overflow: visible;
}

.flow-line {
  position: absolute;
  height: 5px;
  border-radius: 999px;
  background: var(--blue);
}

.flow-line.top {
  top: 13px;
  left: 10px;
  width: 24px;
}

.flow-line.bottom {
  right: 10px;
  bottom: 13px;
  width: 24px;
}

.flow-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--blue);
}

.flow-dot.start {
  top: 11px;
  left: 7px;
  border: 2px solid #031b5f;
  background: white;
}

.flow-dot.mid {
  top: 10px;
  right: 7px;
}

.flow-dot.end {
  right: 7px;
  bottom: 11px;
}

.brand-row h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.profile-card span,
.section-heading p,
.page-subtitle,
.metric-card p,
.metric-card small,
.site-health-row span,
.timeline-item span,
.stack-row span,
.kicker {
  color: var(--muted);
}

.profile-card span {
  margin: 0;
  font-size: 12px;
}

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

.field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.field small,
.form-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  padding: 9px 11px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.profile-card {
  position: relative;
  width: 100%;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 10px;
  color: inherit;
  text-align: left;
}

.profile-card strong {
  display: block;
  font-size: 13px;
  font-weight: 750;
}

.profile-card svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--muted);
}

.profile-menu {
  display: grid;
  gap: 4px;
  margin-top: -10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: var(--shadow);
  padding: 8px;
}

.profile-menu-header {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  padding: 6px 8px 10px;
}

.profile-menu-header strong,
.profile-menu-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-header strong {
  font-size: 13px;
}

.profile-menu-header span {
  color: var(--muted);
  font-size: 12px;
}

.profile-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #344054;
  padding: 9px 8px;
  text-align: left;
  font-size: 13px;
  font-weight: 750;
}

.profile-menu button:hover,
.profile-menu button:focus-visible {
  background: var(--blue-soft);
  color: var(--blue);
}

.profile-menu svg {
  width: 16px;
  height: 16px;
}

.profile-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.nav-tabs {
  display: grid;
  gap: 4px;
}

.nav-tab {
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #344054;
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
}

.nav-tab svg {
  width: 17px;
  height: 17px;
}

.nav-tab:hover,
.nav-tab.active {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  color: #4f46e5;
}

.sidebar-footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.help-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  padding: 10px;
  color: #344054;
}

.help-card div {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: white;
  color: #475467;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.help-card svg {
  width: 18px;
  height: 18px;
}

.help-card strong,
.help-card small {
  display: block;
}

.help-card strong {
  font-size: 13px;
}

.help-card small {
  color: var(--muted);
  font-size: 12px;
}

.developer-settings {
  display: grid;
  gap: 8px;
}

.main {
  min-width: 0;
  padding: 24px;
}

.auth-screen {
  display: grid;
  min-height: calc(100vh - 48px);
  grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
  gap: 24px;
  align-items: center;
}

.auth-copy h2 {
  max-width: 720px;
  margin: 8px 0 12px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.auth-copy p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.auth-card-grid,
.workspace,
.view.active,
.form-card {
  display: grid;
}

.auth-card-grid,
.workspace {
  gap: 18px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-header h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

#currentViewEyebrow:empty {
  display: none;
}

.page-subtitle,
.kicker {
  margin: 0;
}

.kicker {
  font-size: 13px;
  font-weight: 650;
}

.header-actions {
  gap: 10px;
  position: relative;
}

.search-box {
  width: min(380px, 36vw);
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 0 12px;
}

.search-box svg {
  width: 16px;
  color: var(--muted);
}

.search-box input {
  min-height: 42px;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  width: min(420px, 92vw);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: var(--shadow);
}

.search-results button,
.search-empty {
  display: grid;
  gap: 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  padding: 10px 12px;
  text-align: left;
}

.search-results button:hover {
  background: var(--blue-soft);
}

.search-results strong {
  color: var(--ink);
  font-size: 13px;
}

.search-results span,
.search-empty {
  color: var(--muted);
  font-size: 12px;
}

.notification-wrap {
  position: relative;
}

.notification-button {
  position: relative;
}

.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--red);
  color: white;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 850;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 35;
  width: min(380px, 92vw);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: var(--shadow);
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.notification-header strong {
  font-size: 14px;
}

.notification-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.notification-list {
  display: grid;
  max-height: 420px;
  overflow: auto;
}

.notification-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  padding: 12px 14px;
  color: inherit;
  text-align: left;
}

.notification-item:hover {
  background: var(--blue-soft);
}

.notification-item.urgent {
  background: var(--red-soft);
}

.notification-item.read {
  opacity: 0.72;
}

.notification-item svg {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 8px;
}

.notification-item.urgent svg {
  background: white;
  color: var(--red);
}

.notification-item strong,
.notification-item small,
.notification-item em {
  display: block;
}

.notification-item strong {
  color: var(--ink);
  font-size: 13px;
}

.notification-item small,
.notification-item em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.notification-item em {
  font-style: normal;
  font-weight: 750;
}

.view {
  display: none;
}

.view.active {
  gap: 18px;
}

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

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: 18px;
  align-items: start;
}

.dashboard-main,
.dashboard-side {
  display: grid;
  gap: 18px;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 24px;
}

.dashboard-kpi-card,
.dashboard-soft-card,
.encouragement-banner {
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.dashboard-kpi-card {
  position: relative;
  display: grid;
  min-height: 172px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  overflow: visible;
  border-radius: 18px;
  padding: 24px;
}

.dashboard-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
}

.dashboard-kpi-card.violet::before {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), transparent 72%);
}

.dashboard-kpi-card.blue::before {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), transparent 72%);
}

.dashboard-kpi-card.green::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), transparent 72%);
}

.dashboard-kpi-card.orange::before {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.13), transparent 72%);
}

.dashboard-kpi-icon,
.dashboard-kpi-copy,
.dashboard-kpi-arrow {
  position: relative;
  z-index: 1;
}

.dashboard-kpi-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
}

.dashboard-kpi-icon svg {
  width: 26px;
  height: 26px;
}

.dashboard-kpi-card.violet .dashboard-kpi-icon {
  background: #ede9fe;
  color: #6d5dfc;
}

.dashboard-kpi-card.blue .dashboard-kpi-icon {
  background: #e0f2fe;
  color: #0284c7;
}

.dashboard-kpi-card.green .dashboard-kpi-icon {
  background: #d1fae5;
  color: #059669;
}

.dashboard-kpi-card.orange .dashboard-kpi-icon {
  background: #ffedd5;
  color: #f97316;
}

.dashboard-kpi-copy {
  align-self: end;
  display: grid;
  gap: 3px;
}

.dashboard-kpi-copy strong {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dashboard-kpi-copy span {
  color: #172033;
  font-size: 15px;
  font-weight: 800;
}

.dashboard-kpi-copy small {
  color: #667085;
  font-size: 13px;
}

.dashboard-kpi-arrow {
  align-self: end;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: currentColor;
}

.dashboard-kpi-arrow:hover {
  transform: translateX(2px);
}

.dashboard-soft-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.9fr) minmax(330px, 1fr);
  gap: 24px;
  align-items: start;
}

.dashboard-scope-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-scope-bar p {
  margin: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 850;
}

.dashboard-scope-bar small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.scope-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  background: white;
  padding: 4px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.scope-toggle button {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 850;
}

.scope-toggle button.active {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.dashboard-soft-card {
  display: grid;
  gap: 18px;
  min-height: 430px;
  border-radius: 18px;
  padding: 24px;
}

.dashboard-attention-card {
  align-content: start;
  grid-template-rows: auto auto;
}

.dashboard-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-card-header h3 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.dashboard-card-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.soft-count {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #fee2e2;
  color: #ef4444;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 850;
}

.soft-link,
.soft-select {
  border: 1px solid var(--line);
  background: white;
  color: #2563eb;
  font-size: 12px;
  font-weight: 850;
}

.soft-link {
  border-color: transparent;
  background: transparent;
}

.soft-select {
  min-height: 36px;
  width: auto;
  border-radius: 12px;
  color: #475467;
  padding: 6px 12px;
}

.dashboard-attention-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  justify-content: flex-start;
  align-self: start;
  gap: 12px;
  margin-top: 2px;
}

.dashboard-attention-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  gap: 12px;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-height: 64px;
  max-height: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: inherit;
  padding: 10px 12px;
  text-align: left;
}

.dashboard-attention-item.urgent {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff7f7, #fffafa);
}

.dashboard-attention-item:hover,
.dashboard-followup-row:hover,
.dashboard-site-health-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.08);
  transform: translateY(-1px);
}

.attention-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: #fff7ed;
  color: #fb923c;
}

.dashboard-attention-item.urgent .attention-icon {
  background: #fff1f2;
  color: #ef4444;
}

.attention-icon svg,
.attention-chevron {
  width: 16px;
  height: 16px;
}

.attention-copy strong,
.attention-copy small {
  display: block;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attention-copy strong {
  font-size: 13px;
  line-height: 1.25;
}

.attention-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.attention-chevron {
  color: #64748b;
}

.dashboard-attention-list .empty-state {
  align-self: stretch;
  justify-items: center;
  gap: 5px;
  padding: 18px 12px;
}

.dashboard-attention-list .empty-icon {
  width: 34px;
  height: 34px;
}

.dashboard-followup-table {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.dashboard-mini-head,
.dashboard-followup-row {
  display: grid;
  grid-template-columns: 76px minmax(90px, 1.3fr) minmax(80px, 1fr) minmax(86px, 1fr) 18px;
  gap: 10px;
  align-items: center;
}

.dashboard-mini-head {
  min-height: 42px;
  color: #667085;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-followup-row {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-top: 1px solid var(--line);
  background: white;
  color: inherit;
  padding: 10px 0;
  text-align: left;
}

.dashboard-followup-row strong,
.dashboard-followup-row small {
  display: block;
}

.dashboard-followup-row strong {
  font-size: 13px;
  line-height: 1.25;
}

.dashboard-followup-row small,
.dashboard-followup-row span:not(.status-badge) {
  color: #667085;
  font-size: 12px;
}

.dashboard-followup-row > span:first-child {
  color: inherit;
}

.followup-helper-panel {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 10px;
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  background: linear-gradient(135deg, #fbfaff, #ffffff);
  padding: 22px;
}

.helper-clipboard {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 2px solid #c4b5fd;
  border-radius: 18px;
  background: #ede9fe;
  color: #6d5dfc;
}

.helper-clipboard svg {
  width: 34px;
  height: 34px;
}

.followup-helper-panel strong {
  display: block;
  color: #4f46e5;
  font-size: 15px;
}

.followup-helper-panel p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

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

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

.segmented-mini {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  padding: 3px;
}

.segmented-mini button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #667085;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.segmented-mini button.active {
  background: white;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.dashboard-switch-panel,
.dashboard-fade-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  padding: 16px;
  animation: panelFadeIn 180ms ease-out;
}

.site-health-wip-panel {
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
}

.site-health-wip-panel strong,
.leaderboard-heading span {
  color: #101828;
  font-size: 15px;
  font-weight: 850;
}

.site-health-wip-panel p,
.leaderboard-heading small,
.task-leaderboard-wip span {
  margin: 4px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.wip-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  background: #eef2ff;
  color: #4f46e5;
}

.leaderboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.leaderboard-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.leaderboard-filter select {
  min-height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 28px 4px 10px;
}

.leaderboard-subtitle {
  display: block;
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.leaderboard-heading span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.leaderboard-heading svg,
.wip-icon svg {
  width: 17px;
  height: 17px;
}

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

.leaderboard-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 9px;
}

.leaderboard-counts {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.leaderboard-row b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
}

.leaderboard-row strong,
.leaderboard-row small {
  display: block;
}

.leaderboard-row strong {
  font-size: 13px;
}

.leaderboard-row small {
  color: #667085;
  font-size: 12px;
}

.task-leaderboard-wip {
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px;
}

.task-leaderboard-wip strong {
  display: block;
  color: #344054;
  font-size: 13px;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dashboard-site-health-card {
  display: grid;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: inherit;
  padding: 14px;
  text-align: left;
}

.site-health-soft-header,
.site-health-soft-header span,
.site-health-soft-metrics {
  display: flex;
  align-items: center;
}

.site-health-soft-header {
  justify-content: space-between;
  gap: 12px;
}

.site-health-soft-header strong {
  font-size: 15px;
}

.site-health-soft-header span {
  gap: 8px;
  font-size: 18px;
  font-weight: 850;
}

.site-health-soft-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
  padding: 10px 0;
}

.site-health-soft-metrics span {
  display: grid;
  gap: 3px;
  border-right: 1px solid var(--line);
  padding-inline: 10px;
}

.site-health-soft-metrics span:first-child {
  padding-left: 0;
}

.site-health-soft-metrics span:last-child {
  border-right: 0;
  padding-right: 0;
}

.site-health-soft-metrics strong {
  font-size: 16px;
}

.site-health-soft-metrics small {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.encouragement-banner {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(180px, 0.8fr);
  gap: 18px;
  align-items: center;
  min-height: 76px;
  overflow: hidden;
  border-color: #c7d2fe;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbfaff, #eef2ff);
  padding: 16px 24px;
}

.encouragement-banner {
  overflow: visible;
}

.encouragement-icon {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: white;
  color: #6d5dfc;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.1);
  z-index: 3;
}

.encouragement-icon:hover,
.encouragement-icon:focus-visible {
  color: #ef4444;
  transform: translateY(-1px);
}

.encouragement-icon.liked {
  animation: lovePulse 220ms ease-out;
}

.heart-burst {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}

.floating-heart {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #ef4444;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 6px 14px rgba(239, 68, 68, 0.18);
  transform: translate(-50%, -50%) scale(var(--heart-scale));
  animation: floatHeart 1250ms ease-out var(--heart-delay) forwards;
}

@keyframes lovePulse {
  50% {
    transform: scale(1.12);
  }
}

@keyframes floatHeart {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--heart-x)), calc(-50% - var(--heart-y))) scale(var(--heart-scale));
  }
}

.encouragement-banner strong,
.encouragement-banner small,
.encouragement-banner p {
  display: block;
}

.encouragement-banner strong {
  color: #4f46e5;
}

.encouragement-banner small,
.encouragement-banner p {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.encouragement-banner p {
  margin-bottom: 0;
}

.banner-art {
  position: relative;
  height: 54px;
}

.banner-art::before,
.banner-art::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -22px;
  width: 80%;
  height: 54px;
  border-radius: 50% 50% 0 0;
  background: rgba(124, 58, 237, 0.14);
}

.banner-art::after {
  right: 24%;
  width: 50%;
  height: 34px;
  background: rgba(99, 102, 241, 0.14);
}

.banner-sun {
  position: absolute;
  right: 30%;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fdba74;
}

.banner-hill {
  position: absolute;
  right: 62%;
  bottom: 0;
  width: 24px;
  height: 34px;
  border-left: 4px solid #a5b4fc;
}

.banner-hill::before,
.banner-hill::after {
  content: "";
  position: absolute;
  left: -13px;
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: #a5b4fc;
  transform: rotate(35deg);
}

.banner-hill::after {
  left: -3px;
  transform: rotate(-35deg);
}

.admin-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settings-panel {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 14px;
}

.settings-panel-header {
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  padding-bottom: 12px;
}

.settings-panel-header span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.settings-panel-header h3 {
  margin: 4px 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.settings-panel-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.settings-panel a {
  border-radius: 10px;
  color: #344054;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.settings-panel a:hover {
  background: var(--blue-soft);
  color: var(--blue);
}

.admin-content,
.admin-section {
  display: grid;
  gap: 14px;
}

.admin-content {
  gap: 18px;
}

.platform-shell {
  display: grid;
  gap: 18px;
}

.platform-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: var(--shadow);
  padding: 20px;
}

.platform-hero h3 {
  margin: 4px 0;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.platform-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.platform-security-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.platform-security-note svg {
  width: 16px;
  height: 16px;
}

.platform-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.platform-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 0.62fr);
  gap: 18px;
  align-items: start;
}

.platform-create-card,
.platform-card {
  border-radius: 16px;
}

.platform-create-card {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 14px;
}

.platform-create-card > .section-heading > svg {
  width: 22px;
  height: 22px;
  color: var(--blue);
}

.owner-mode-group,
.owner-mode-panel {
  display: grid;
  gap: 8px;
}

.owner-mode-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 10px;
}

.owner-mode-option:has(input:checked) {
  border-color: #bfdbfe;
  background: var(--blue-soft);
}

.owner-mode-option input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.owner-mode-option strong,
.owner-mode-option small {
  display: block;
}

.owner-mode-option strong {
  color: var(--ink);
  font-size: 13px;
}

.owner-mode-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.platform-help {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.platform-help.warning {
  border: 1px solid #fed7aa;
  background: var(--orange-soft);
  color: #9a3412;
}

.platform-help svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.platform-table {
  min-width: 920px;
}

.platform-table td span:not(.status-badge) {
  color: var(--muted);
  font-size: 12px;
}

.platform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 220px;
}

.admin-section {
  scroll-margin-top: 24px;
}

.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

.admin-section.two-column {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.admin-section table {
  min-width: 560px;
}

.signals-layout {
  display: grid;
  gap: 18px;
}

.signals-card {
  display: grid;
  gap: 16px;
}

.signals-page,
.signals-tab-panel,
.signal-step-body {
  display: grid;
  gap: 16px;
}

.signals-header,
.signals-table-header,
.signals-actions,
.signal-steps,
.active-signals-summary {
  display: flex;
  align-items: center;
}

.signals-header {
  justify-content: space-between;
  gap: 16px;
}

.signals-actions,
.signal-steps {
  gap: 10px;
  flex-wrap: wrap;
}

.signals-table-header {
  justify-content: space-between;
  gap: 12px;
}

.signal-steps button {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  padding: 8px 12px;
}

.signal-steps button.active {
  border-color: var(--green);
  color: var(--green);
  background: #eaf8ee;
}

.signal-step-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signal-step-body .span-2,
.signal-step-body .workflow-note {
  grid-column: 1 / -1;
}

.signal-step-body pre {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

.signal-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap: 8px;
}

.signal-day-grid label {
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.active-signals-summary {
  gap: 10px;
}

.active-signals-summary strong {
  font-size: 34px;
  line-height: 1;
}

.employee-signal-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.employee-signal-row {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid #edf3ef;
  padding-bottom: 12px;
}

.employee-signal-row:last-child {
  border-bottom: 0;
}

.employee-signal-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.employee-signal-heading strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-signal-row p {
  margin: 0 0 0 2px;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.inline-admin-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
  padding: 14px;
}

.inline-admin-form.wide {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.inline-admin-form .span-2 {
  grid-column: span 2;
}

.people-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.sites-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.sites-list-panel {
  position: sticky;
  top: 24px;
}

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

.site-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 10px;
  color: inherit;
  text-align: left;
}

.site-list-item:hover,
.site-list-item.active {
  border-color: #bfdbfe;
  background: var(--blue-soft);
}

.site-list-item span,
.site-list-item small {
  display: block;
}

.site-list-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.site-list-item .status-badge {
  grid-column: 1 / -1;
  justify-self: start;
}

.people-module,
.people-tab-panel.active,
.people-management-grid,
.access-control-grid {
  display: grid;
  gap: 18px;
}

.people-tabs,
.profile-tabs,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.people-tab,
.profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #344054;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
}

.people-tab svg {
  width: 16px;
  height: 16px;
}

.people-tab.active,
.profile-tab.active {
  border-color: #bfdbfe;
  background: var(--blue-soft);
  color: var(--blue);
}

.people-tab-panel {
  display: none;
}

.people-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(150px, 190px)) auto;
  gap: 12px;
  align-items: end;
}

.people-toolbar .people-search {
  width: 100%;
}

.people-management-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  align-items: start;
}

.access-control-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  align-items: start;
}

.selected-row {
  background: var(--blue-soft);
}

.profile-tabs {
  border-bottom: 1px solid var(--line);
  margin: -2px 0 14px;
  padding-bottom: 10px;
}

.profile-tab {
  border-radius: 10px;
  padding: 8px 10px;
}

.profile-tab-content {
  display: grid;
  gap: 14px;
}

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

.profile-summary-grid div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 12px;
}

.profile-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.profile-summary-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}

.user-activity-heading {
  margin-top: 16px;
}

.profile-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

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

.permission-preview-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 10px;
}

.permission-preview-item strong,
.permission-preview-item span {
  display: block;
}

.permission-preview-item strong {
  font-size: 13px;
}

.permission-preview-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.people-directory {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 12px;
}

.people-search {
  width: 100%;
}

.people-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 2px;
}

.person-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  padding: 10px;
  color: inherit;
  text-align: left;
}

.person-row:hover,
.person-row.active {
  border-color: #bfdbfe;
  background: var(--blue-soft);
}

.person-row strong,
.person-row small,
.person-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-row strong {
  font-size: 14px;
}

.person-row small,
.person-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.person-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 13px;
  font-weight: 850;
}

.person-avatar.large {
  width: 58px;
  height: 58px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 16px;
}

.person-profile,
.profile-grid {
  display: grid;
  gap: 18px;
}

.person-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.person-hero h3 {
  margin: 2px 0;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.person-hero p {
  margin: 0;
  color: var(--muted);
}

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

.profile-stats span,
.access-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  padding: 6px 9px;
  color: #344054;
  font-size: 12px;
  font-weight: 750;
}

.profile-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.account-summary {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 12px;
}

.account-summary span {
  color: var(--muted);
  font-size: 13px;
}

.inline-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.access-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.access-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.access-pill button {
  border: 0;
  background: transparent;
  color: var(--red);
  padding: 0;
  font-size: 12px;
  font-weight: 800;
}

.compact-timeline {
  max-height: 520px;
  overflow: auto;
}

.admin-drawer {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0;
}

.admin-drawer summary {
  cursor: pointer;
  padding: 14px 16px;
  color: #344054;
  font-size: 14px;
  font-weight: 850;
}

.admin-drawer[open] summary {
  border-bottom: 1px solid var(--line);
}

.admin-drawer > .grid-3 {
  padding: 16px;
}

.grid-2,
.grid-3,
.grid-4,
.metrics {
  display: grid;
  gap: 16px;
  align-items: start;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
}

.grid-4,
.metrics {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.card,
.data-card,
.metric-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card,
.data-card {
  padding: 16px;
}

.metric-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.metric-top,
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.metric-icon,
.empty-icon,
.timeline-dot {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
}

.metric-icon {
  width: 34px;
  height: 34px;
}

.metric-icon svg {
  width: 18px;
  height: 18px;
}

.metric-card strong {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.metric-card p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.metric-card small {
  font-size: 12px;
}

.trend {
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 750;
}

.trend.up {
  background: var(--green-soft);
  color: var(--green);
}

.trend.down {
  background: var(--red-soft);
  color: var(--red);
}

.section-heading {
  margin-bottom: 12px;
}

.section-heading h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-heading p {
  margin: 2px 0 0;
  font-size: 13px;
}

.section-heading.compact h3 {
  font-size: 16px;
}

.form-card {
  gap: 12px;
}

.form-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.form-card h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
}

.workflow-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.workflow-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}

.workflow-command-copy h3 {
  margin: 4px 0;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.workflow-command-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.workflow-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workflow-search,
.workflow-table-search {
  width: min(360px, 28vw);
}

.workflow-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.workflow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
  gap: 18px;
  align-items: start;
}

.workflow-queue table {
  min-width: 1120px;
}

.queue-controls {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.workflow-table-search {
  width: min(460px, 100%);
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #475467;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer;
}

.sort-header svg {
  width: 13px;
  height: 13px;
  color: #94a3b8;
}

.sort-header.active {
  color: var(--blue);
}

.sort-header.active svg {
  color: var(--blue);
}

.status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-tab,
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #344054;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
}

.status-tab span {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  padding: 0 6px;
  font-size: 11px;
}

.status-tab.active {
  border-color: #bfdbfe;
  background: var(--blue-soft);
  color: var(--blue);
}

.status-tab.active span {
  background: white;
  color: var(--blue);
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, auto) repeat(3, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
}

.filter-check {
  min-height: 40px;
  border-radius: 10px;
}

.filter-check input {
  width: auto;
  min-height: auto;
}

.filter-select span {
  font-size: 10px;
}

.filter-select select {
  min-height: 38px;
  border-radius: 10px;
}

.workflow-sidebar {
  display: grid;
  gap: 18px;
}

.workflow-recent {
  min-height: 240px;
}

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

.attention-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 10px;
  color: inherit;
  text-align: left;
}

.attention-item:hover {
  border-color: #bfdbfe;
  background: var(--blue-soft);
}

.attention-item.urgent {
  border-color: #fecaca;
  background: var(--red-soft);
}

.attention-item svg {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  padding: 8px;
}

.attention-item.urgent svg {
  background: white;
  color: var(--red);
}

.attention-item strong,
.attention-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attention-item strong {
  color: var(--ink);
  font-size: 13px;
}

.attention-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.secondary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
}

.secondary-metrics .metric-card {
  box-shadow: none;
  background: var(--surface-soft);
}

.secondary-metrics .metric-card strong {
  font-size: 22px;
}

.followup-title-cell {
  min-width: 210px;
}

.followup-title-line,
.followup-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.followup-title-line strong {
  min-width: 0;
}

.workflow-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}

.workflow-card-header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.workflow-card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.workflow-card-header p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.workflow-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--blue);
  color: white;
}

.workflow-icon svg {
  width: 20px;
  height: 20px;
}

.workflow-card-green .workflow-icon,
.green-action {
  border-color: var(--green) !important;
  background: var(--green) !important;
}

.workflow-card-purple .workflow-icon,
.purple-action {
  border-color: #7c3aed !important;
  background: #7c3aed !important;
}

.step-badge {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.workflow-card-green .step-badge {
  background: var(--green-soft);
  color: var(--green);
}

.workflow-card-purple .step-badge {
  background: #f3e8ff;
  color: #7c3aed;
}

.field.required span::after {
  content: " *";
  color: var(--red);
}

.priority-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.priority-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.priority-button.active {
  background: var(--blue-soft);
  color: var(--blue);
}

.priority-button.low.active {
  border-color: var(--line-strong);
  background: #f2f4f7;
  color: #475467;
}

.priority-button.normal.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

.priority-button.high.active {
  border-color: #fdba74;
  background: var(--orange-soft);
  color: var(--orange);
}

.priority-button.critical.active {
  border-color: #fca5a5;
  background: var(--red-soft);
  color: var(--red);
}

.upload-zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: #fcfcfd;
  color: var(--muted);
  padding: 16px;
  text-align: center;
  cursor: pointer;
}

.upload-zone:hover {
  border-color: #93c5fd;
  background: var(--blue-soft);
}

.upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.upload-zone svg {
  width: 24px;
  height: 24px;
  color: #475467;
}

.upload-zone strong {
  color: #344054;
  font-size: 14px;
}

.upload-zone span {
  color: var(--muted);
  font-size: 12px;
}

.upload-zone em {
  margin-top: 4px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.workflow-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.workflow-note.success {
  border-color: #bbf7d0;
  background: var(--green-soft);
}

.assignment-mode-card {
  display: grid;
  gap: 4px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: var(--blue-soft);
  padding: 10px;
}

.assignment-mode-card p {
  margin: 0;
  color: #344054;
  font-size: 12px;
  line-height: 1.4;
}

.role-picker {
  display: grid;
  gap: 10px;
}

.role-picker-summary {
  display: grid;
  gap: 4px;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}

.role-picker-summary strong {
  color: #101828;
}

.role-picker-summary span {
  color: #667085;
  font-size: 12px;
}

.role-picker-list {
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f9fafb;
  padding: 8px;
}

.role-picker-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  font-weight: 800;
}

.role-picker-option input {
  width: 16px;
  height: 16px;
  accent-color: #155eef;
}

.role-picker-option small {
  color: #667085;
  font-weight: 700;
}

.role-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.field.muted-field {
  opacity: 0.62;
}

.workflow-note svg {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.workflow-note p,
.workflow-tip p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.45;
}

.workflow-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  padding: 12px 14px;
}

.workflow-tip svg {
  width: 18px;
  height: 18px;
  color: var(--orange);
}

.modal-card-wide {
  width: min(820px, 100%);
}

.modal-form,
.followup-fields {
  display: grid;
  gap: 14px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

.check input {
  width: auto;
  min-height: 0;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px 12px;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 10px;
}

.permission-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  padding: 8px;
}

.permission-check small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.button,
.icon-button,
.mini-button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: #344054;
  font-weight: 750;
}

.button {
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 13px;
}

.button svg {
  width: 16px;
  height: 16px;
}

.button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.button.subtle {
  color: var(--blue);
}

.button.quiet {
  justify-content: flex-start;
  color: var(--muted);
}

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
}

.icon-button svg,
.collapse-button svg {
  width: 17px;
  height: 17px;
}

.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  color: var(--blue);
  font-size: 12px;
}

.mini-button.danger {
  color: var(--red);
}

.modal-inline-list {
  padding: 0 24px 16px;
  border-bottom: 1px solid #dde7e2;
}

.preset-modal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0px;
}

.preset-modal-row:last-child {
  border-bottom: 0;
}

.preset-modal-row strong,
.preset-modal-row span,
.preset-modal-row small {
  display: block;
}

.preset-modal-row strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.preset-modal-row span,
.preset-modal-row small {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.preset-modal-row > div:last-child {
  display: inline-flex;
  gap: 8px;
}

.collapse-button {
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--muted);
  padding: 8px;
}

.table-scroll {
  overflow-x: auto;
}

.data-card {
  overflow: hidden;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  text-align: left;
  vertical-align: middle;
}

.table-actions-cell {
  min-width: 190px;
  text-align: center;
}

.table-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.table-action-buttons .mini-button {
  min-width: 72px;
}

.user-accounts-table {
  min-width: 920px;
}

.user-accounts-table th,
.user-accounts-table td {
  height: 58px;
  padding: 12px 14px;
  vertical-align: middle;
}

.user-accounts-table th:last-child,
.user-accounts-table td:last-child {
  text-align: center;
}

.user-accounts-table td:first-child {
  min-width: 190px;
}

.user-accounts-table td:nth-child(2) {
  max-width: 230px;
  word-break: break-word;
}

.user-accounts-table td:nth-child(4),
.user-accounts-table td:nth-child(5) {
  max-width: 180px;
}

.user-accounts-table .status-badge {
  min-height: 24px;
}

.user-accounts-table .table-actions-cell {
  min-width: 260px;
}

.user-accounts-table .table-action-buttons {
  align-items: center;
  justify-content: center;
}

.user-accounts-table .table-action-buttons .mini-button {
  min-width: 84px;
  height: 30px;
}

th {
  background: var(--surface-soft);
  color: #475467;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

tbody tr:hover {
  background: #fbfdff;
}

.clickable-row {
  cursor: pointer;
}

td {
  color: #344054;
  font-size: 13px;
}

td strong {
  color: var(--ink);
}

td span {
  color: var(--muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
}

.badge,
.status-badge.info,
.status-badge.normal {
  background: var(--blue-soft);
  color: var(--blue);
}

.status-badge.success,
.status-badge.active {
  background: var(--green-soft);
  color: var(--green);
}

.status-badge.danger,
.status-badge.critical {
  background: var(--red-soft);
  color: var(--red);
}

.status-badge.warning,
.status-badge.high {
  background: var(--orange-soft);
  color: var(--orange);
}

.status-badge.indigo {
  background: #eef2ff;
  color: #4f46e5;
}

.status-badge.low,
.status-badge.neutral {
  background: #f2f4f7;
  color: #475467;
}

.timeline {
  display: grid;
  gap: 4px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
}

.timeline-dot {
  width: 34px;
  height: 34px;
}

.timeline-dot svg {
  width: 17px;
}

.timeline-item.recognition .timeline-dot {
  background: var(--green-soft);
  color: var(--green);
}

.timeline-item p,
.timeline-item h4 {
  margin: 0;
}

.timeline-item h4 {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 750;
}

.timeline-item span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.timeline-preview {
  display: block;
  margin-top: 6px;
  color: #475467;
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.timeline-meta > span:not(.status-badge) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 0;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 750;
}

.timeline-meta .status-badge {
  margin-top: 0;
}

.timeline-action {
  margin-top: 8px;
}

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

.observation-compact-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 10px;
}

.observation-compact-item:hover {
  border-color: #bfdbfe;
  background: #fbfdff;
}

.observation-compact-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.observation-compact-main .badge {
  justify-self: start;
}

.observation-compact-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.observation-compact-meta,
.observation-compact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.observation-compact-meta span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.site-health-list,
.stack-list {
  display: grid;
  gap: 10px;
}

.site-health-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 12px;
  align-items: center;
}

.site-health-button,
.stack-button {
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  color: inherit;
  text-align: left;
}

.site-health-button {
  border-radius: 12px;
  padding: 10px;
}

.site-health-button:hover,
.stack-button:hover {
  border-color: #bfdbfe;
  background: var(--blue-soft);
}

.site-health-row strong,
.stack-row strong {
  font-size: 13px;
}

.site-health-row div span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.site-health-reasons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.site-health-reasons span {
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 7px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.site-health-reasons strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.progress-track {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.progress-track div {
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.stack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}

.site-score-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 14px;
}

.site-score-card > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.site-score-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.site-score-card strong {
  font-size: 30px;
  line-height: 1;
}

.site-score-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.site-metric-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.site-metric-strip .metric-card {
  box-shadow: none;
}

.site-metric-strip .metric-card strong {
  font-size: 22px;
}

.stack-row.positive {
  border-color: #bbf7d0;
  background: var(--green-soft);
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 12px;
  color: var(--muted);
  text-align: center;
}

.empty-icon {
  width: 42px;
  height: 42px;
}

.empty-state strong {
  color: var(--ink);
}

.empty-state p {
  margin: 0;
  font-size: 13px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  max-width: min(440px, calc(100vw - 40px));
  border-radius: 14px;
  background: #111827;
  color: white;
  padding: 13px 15px;
  box-shadow: var(--shadow);
}

.toast.error {
  background: var(--red);
}

.mobile-bottom-nav,
.mobile-sheet-backdrop {
  display: none;
}

.mobile-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  align-items: end;
  background: rgba(15, 23, 42, 0.38);
}

.mobile-sheet {
  display: grid;
  gap: 12px;
  width: 100%;
  max-height: min(86vh, 680px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  background: white;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 70px rgba(15, 23, 42, 0.22);
  animation: sheetUp 160ms ease-out;
}

.schedule-shell {
  display: grid;
  gap: 16px;
}

.schedule-toolbar,
.schedule-action-row,
.schedule-controls,
.button-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.schedule-controls {
  justify-content: flex-end;
}

.date-control {
  width: auto;
}

.compact-field {
  min-width: 220px;
}

.schedule-two-column {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

.schedule-two-column.wide-main {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.schedule-list,
.schedule-side {
  display: grid;
  gap: 12px;
}

.schedule-subsection {
  margin-top: 18px;
}

.schedule-shift-card,
.request-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.schedule-shift-card strong,
.schedule-shift-card span,
.schedule-shift-card small {
  display: block;
}

.stack-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.schedule-grid {
  display: grid;
  grid-template-columns: minmax(180px, 220px) repeat(7, minmax(130px, 1fr));
  gap: 1px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
}

.schedule-grid-header,
.schedule-employee-cell,
.schedule-day-cell {
  min-height: 76px;
  background: #fff;
  padding: 10px;
}

.schedule-grid-header {
  min-height: auto;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.schedule-employee-cell strong,
.schedule-employee-cell span {
  display: block;
}

.schedule-employee-cell span {
  color: var(--muted);
  font-size: 12px;
}

.schedule-day-cell {
  border: 0;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 6px;
  cursor: pointer;
}

.schedule-day-cell:hover {
  background: #f8fbff;
}

.shift-pill {
  display: grid;
  gap: 2px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 800;
}

.shift-pill small {
  color: #4769b4;
  font-size: 10px;
  text-transform: capitalize;
}

.shift-pill.open_for_pickup,
.shift-pill.pickup_requested,
.shift-pill.dropped_requested {
  background: #fff7ed;
  color: #b45309;
}

.shift-pill.cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

.cell-add {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.availability-warning {
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
}

.availability-warning.cannot_work {
  background: #fee2e2;
  color: #b91c1c;
}

.availability-warning.prefer_off {
  background: #fef3c7;
  color: #92400e;
}

.mobile-sheet-handle {
  justify-self: center;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #d0d5dd;
}

.mobile-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-sheet-header strong,
.mobile-sheet-header span {
  display: block;
}

.mobile-sheet-header strong {
  font-size: 16px;
}

.mobile-sheet-header span {
  color: var(--muted);
  font-size: 13px;
}

.sheet-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: inherit;
  padding: 10px 12px;
  text-align: left;
}

.sheet-action.primary {
  border-color: #bfdbfe;
  background: var(--blue-soft);
}

.sheet-action.danger {
  color: var(--red);
}

.sheet-action svg {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--blue);
  padding: 10px;
}

.sheet-action.danger svg {
  color: var(--red);
}

.sheet-action strong,
.sheet-action small {
  display: block;
}

.sheet-action strong {
  font-size: 14px;
}

.sheet-action small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

@keyframes sheetUp {
  from {
    transform: translateY(18px);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.42);
  padding: 20px;
}

.drawer-backdrop {
  place-items: stretch end;
  padding: 0;
}

.modal-card {
  display: grid;
  gap: 16px;
  width: min(760px, 100%);
  max-height: min(860px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
  padding: 18px;
}

.side-drawer {
  width: min(720px, 100%);
  max-height: 100vh;
  min-height: 100vh;
  border-radius: 18px 0 0 18px;
  padding: 20px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.modal-header h3 {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.review-body,
.review-grid,
.review-note {
  display: grid;
  gap: 12px;
}

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

.review-grid div,
.review-note {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 10px;
}

.review-grid span,
.review-note span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.review-grid strong,
.review-note p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.review-status-card .status-badge {
  margin-top: 4px;
}

.followup-status-line {
  margin-top: 6px;
}

.followup-status-line strong {
  color: var(--ink);
  font-size: 14px;
  text-transform: capitalize;
}

.followup-collab-panel {
  display: grid;
  gap: 14px;
}

.status-control-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-button.active-status {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

.comment-timeline {
  display: grid;
  gap: 10px;
}

.comment-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 10px;
}

.comment-item strong,
.comment-item span {
  display: block;
}

.comment-item strong {
  color: var(--ink);
  font-size: 13px;
}

.comment-item span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.comment-item p {
  margin-top: 8px;
  line-height: 1.45;
}

/* Shared workspace polish. This keeps the existing vanilla app structure
   while aligning all major pages with the soft dashboard design direction. */
.main {
  padding: 28px 32px;
}

.workspace {
  gap: 26px;
}

.page-header {
  align-items: flex-start;
}

.page-header h2 {
  color: #08111f;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.page-subtitle {
  margin-top: 8px;
  color: #64748b;
  font-size: 16px;
}

.header-actions {
  align-items: center;
}

.search-box,
.button.subtle,
.icon-button,
.soft-select {
  border-color: rgba(203, 213, 225, 0.78);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.button {
  border-radius: 13px;
  font-weight: 800;
}

.button.primary {
  border-color: #2563eb;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: white;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
}

.button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
}

.button.subtle:hover,
.icon-button:hover,
.mini-button:hover {
  border-color: #c7d2fe;
  background: #f8fafc;
  color: #2563eb;
}

.card,
.data-card,
.admin-section,
.admin-content,
.platform-card,
.platform-create-card,
.settings-panel,
.people-module,
.people-directory,
.sites-list-panel,
.schedule-subsection,
.schedule-list,
.schedule-side,
.schedule-grid,
.modal-card,
.modal-card-wide,
.side-drawer {
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.065);
}

.data-card,
.admin-section,
.people-module,
.sites-list-panel,
.schedule-subsection,
.platform-card,
.platform-create-card {
  padding: 22px;
}

.section-heading h3,
.workflow-command h3,
.platform-card h3,
.admin-section h3 {
  color: #0f172a;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.section-heading p,
.workflow-command p,
.platform-card p,
.admin-section p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.workflow-command {
  display: none;
}

.workflow-metrics,
.metrics,
.grid-4,
.platform-metric-grid {
  gap: 18px;
}

.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  border-color: rgba(226, 232, 240, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
  padding: 20px;
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), transparent 68%);
  pointer-events: none;
}

.metric-card > * {
  position: relative;
  z-index: 1;
}

.metric-top {
  align-items: flex-start;
}

.metric-icon {
  border-radius: 16px;
  background: #eef2ff;
  color: #4f46e5;
}

.metric-card strong {
  font-size: 32px;
  letter-spacing: -0.04em;
}

.metric-card p {
  color: #172033;
  font-weight: 850;
}

.metric-card small {
  color: #64748b;
}

.workflow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr);
  gap: 24px;
  align-items: start;
}

.workflow-sidebar {
  display: grid;
  gap: 18px;
}

.queue-controls {
  display: grid;
  gap: 14px;
  margin: 16px 0 18px;
}

.status-tabs,
.people-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 16px;
  background: #f8fafc;
  padding: 6px;
}

.status-tab,
.people-tab {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 850;
}

.status-tab.active,
.people-tab.active {
  border-color: #c7d2fe;
  background: white;
  color: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.status-tab span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  padding: 0 7px;
}

.filter-bar {
  align-items: center;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  background: #f8fafc;
  padding: 10px;
}

.filter-check {
  min-height: 40px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 999px;
  background: white;
  padding: 8px 12px;
  color: #475569;
  font-weight: 850;
}

.filter-check:has(input:checked) {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

.filter-select span {
  display: none;
}

.filter-select select {
  min-height: 40px;
  border-radius: 999px;
}

.table-scroll {
  border: 1px solid rgba(226, 232, 240, 0.84);
  border-radius: 0px;
  background: white;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

thead tr {
  background: #f8fafc;
}

th {
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

td {
  border-bottom: 1px solid #edf2f7;
  padding-block: 14px;
}

tbody tr:hover {
  background: #f8fafc;
}

.clickable-row {
  cursor: pointer;
}

.mini-button {
  border-radius: 999px;
  border-color: #dbeafe;
  background: white;
  color: #2563eb;
  font-weight: 850;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.status-badge.info,
.status-badge.normal {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

.status-badge.indigo {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4f46e5;
}

.status-badge.warning,
.status-badge.high {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #ea580c;
}

.status-badge.danger,
.status-badge.critical {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.status-badge.success,
.status-badge.active {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #16a34a;
}

.status-badge.low,
.status-badge.neutral {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

.attention-item,
.timeline-item,
.stack-row,
.site-health-button,
.site-list-item,
.employee-list-item,
.schedule-shift-card,
.request-item {
  border-color: rgba(226, 232, 240, 0.86);
  border-radius: 15px;
  background: white;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
}

.attention-item:hover,
.timeline-item:hover,
.stack-row:hover,
.site-health-button:hover,
.site-list-item:hover,
.employee-list-item:hover {
  border-color: #c7d2fe;
  background: #fbfdff;
  transform: translateY(-1px);
}

.attention-item.urgent {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff7f7, white);
}

.compact-timeline {
  max-height: none;
  overflow: visible;
}

.compact-timeline .timeline-item:nth-child(n + 6) {
  display: none;
}

.sites-layout,
.people-layout,
.platform-layout,
.schedule-two-column.wide-main {
  gap: 24px;
}

.sites-list-panel,
.people-directory {
  position: sticky;
  top: 24px;
}

.site-list-item.active,
.employee-list-item.active,
.people-tab.active {
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}

.site-profile-hero,
.person-hero,
.platform-hero {
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.86));
}

.admin-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
}

.settings-panel {
  border-radius: 18px;
}

.settings-panel button,
.admin-nav button {
  border-radius: 13px;
}

.admin-drawer {
  border-color: #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
}

.admin-drawer summary {
  color: #0f172a;
}

.schedule-shell {
  gap: 22px;
}

.schedule-grid {
  overflow: auto;
}

.schedule-day-cell {
  min-height: 112px;
  background: #fbfdff;
}

.modal-backdrop {
  backdrop-filter: blur(10px);
}

.side-drawer {
  border-radius: 22px 0 0 22px;
}

/* Schedule mockup alignment */
.schedule-shell {
  gap: 22px;
}

.schedule-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  border-radius: 18px;
  padding: 16px 18px;
}

.schedule-toolbar .kicker {
  color: #4f46e5;
}

.schedule-toolbar h3 {
  margin: 2px 0 3px;
  font-size: 18px;
}

.schedule-controls {
  justify-content: flex-end;
  gap: 10px;
}

.date-control {
  width: 160px;
  min-height: 42px;
  border-radius: 13px;
}

.schedule-action-row {
  justify-content: center;
}

.schedule-action-row.single-mode {
  display: none;
}

#scheduleModeTabs {
  width: min(360px, 100%);
  justify-content: center;
  border-radius: 999px;
}

#scheduleModeTabs .status-tab {
  flex: 1;
  justify-content: center;
}

.schedule-two-column {
  grid-template-columns: 1fr;
  gap: 18px;
}

#scheduleMyPanel .schedule-two-column {
  grid-template-columns: minmax(0, 1fr);
}

#myScheduleSummary:empty {
  display: none;
}

.my-week-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  gap: 12px;
}

.my-day-card {
  position: relative;
  display: grid;
  min-height: 136px;
  align-content: start;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fbfdff;
  padding: 14px 12px;
}

.my-day-card.scheduled {
  border-color: #dbeafe;
  background: linear-gradient(180deg, #ffffff, #eff6ff);
}

.my-day-card strong {
  color: #0f172a;
  font-size: 13px;
}

.my-day-card small,
.my-day-card em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.my-day-card b {
  margin-top: 18px;
  color: #1d4ed8;
  font-size: 12px;
}

.shift-dot {
  position: absolute;
  top: 72px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2563eb;
}

.no-shift {
  margin-top: 18px;
  color: #94a3b8;
  font-size: 18px;
  font-weight: 800;
}

.schedule-request-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  gap: 12px;
  align-items: center;
  width: 100%;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: white;
  color: inherit;
  padding: 12px;
  text-align: left;
}

.schedule-request-row:hover {
  border-color: #c7d2fe;
  background: #fbfdff;
  transform: translateY(-1px);
}

.schedule-request-row .mini-button {
  height: 30px;
}

/* Sharper SaaS treatment for the pilot UI pass. */
.workspace-polished .data-card,
.data-card,
.workflow-command,
.schedule-toolbar,
.schedule-summary-card,
.metric-card,
.site-health-card,
.encouragement-banner {
  border-color: #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.workspace-polished .data-card,
.data-card,
.workflow-command,
.schedule-toolbar {
  background: #ffffff;
}

.button,
.mini-button,
.icon-button,
.status-tab,
.filter-check,
.date-control,
.field input,
.field select,
.field textarea {
  border-radius: 10px;
}

.status-badge,
.badge {
  min-height: 24px;
  border-radius: 999px;
  letter-spacing: 0;
}

.workflow-metrics .metric-card,
.dashboard-grid .metric-card {
  min-height: 104px;
}

.shift-pill {
  border-radius: 10px;
}

.conflict-badge {
  border-radius: 8px;
  font-size: 12px;
}

.page-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.page-heading-row h2 {
  margin: 0 0 5px;
  color: #0f172a;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.page-heading-row p {
  margin: 0;
  color: #667085;
}

.split-workspace,
.workflow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: start;
}

.database-card {
  min-height: 650px;
}

.database-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #e4e7ec;
  padding: 0 12px;
}

.database-tabs button,
.database-tabs .status-tab,
.status-tabs .status-tab {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #344054;
  font-weight: 800;
  padding: 16px 0 14px;
}

.database-tabs button.active,
.database-tabs .status-tab.active,
.status-tabs .status-tab.active {
  color: #155eef;
}

.database-tabs button.active::after,
.database-tabs .status-tab.active::after,
.status-tabs .status-tab.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: #155eef;
  content: "";
}

.database-tabs span,
.status-tabs span {
  display: inline-flex;
  min-width: 24px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #155eef;
  font-size: 12px;
  margin-left: 6px;
}

.database-filter-row,
.queue-controls .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px 12px;
}

.database-table {
  min-width: 1000px;
}

.observations-table {
  min-width: 1180px;
}

.observations-workspace .database-card,
.observations-workspace .table-scroll {
  overflow: visible;
}

.database-table th,
.database-table td,
.workflow-queue table th,
.workflow-queue table td {
  height: 58px;
  padding: 12px 14px;
}

.database-table tbody tr,
.workflow-queue tbody tr {
  border-left: 2px solid transparent;
}

.database-table tbody tr.selected-row,
.workflow-queue tbody tr.selected-row {
  outline: 1px solid #155eef;
  outline-offset: -1px;
  background: #f8fbff;
}

.database-table tbody tr.bulk-selected-row {
  background: #f9fafb;
}

.compact-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  accent-color: #155eef;
}

.bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 12px 12px;
  padding: 10px 12px;
  border: 1px solid #b2ddff;
  border-radius: 12px;
  background: #eff8ff;
  color: #175cd3;
}

.bulk-action-bar strong {
  color: #1849a9;
}

.row-action-cell {
  position: relative;
  overflow: visible;
}

.row-action-menu {
  position: absolute;
  top: 42px;
  right: 10px;
  z-index: 30;
  display: grid;
  min-width: 168px;
  padding: 6px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
}

.row-action-menu button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #344054;
  font-weight: 800;
  padding: 9px 10px;
  text-align: left;
}

.row-action-menu button:hover {
  background: #f2f4f7;
  color: #155eef;
}

.row-icon,
.avatar-mini {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.row-icon svg {
  width: 16px;
  height: 16px;
}

.observation-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #344054;
  font-weight: 800;
}

.observation-type-chip svg {
  width: 15px;
  height: 15px;
}

.observation-type-chip.recognition {
  color: #039855;
}

.observation-type-chip.coaching {
  color: #f97316;
}

.observation-type-chip.issue {
  color: #f04438;
}

.detail-panel {
  position: sticky;
  top: 18px;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  padding: 20px;
}

.detail-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.detail-panel-header h3 {
  margin: 8px 0 0;
  color: #101828;
  font-size: 20px;
}

.detail-field-list {
  display: grid;
  gap: 13px;
  border-bottom: 1px solid #e4e7ec;
  padding-bottom: 18px;
}

.detail-field-list div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
}

.detail-field-list span {
  color: #667085;
  font-weight: 700;
}

.detail-field-list strong {
  color: #1d2939;
  font-weight: 800;
}

.detail-section {
  border-bottom: 1px solid #e4e7ec;
  padding: 18px 0;
}

.detail-section h4 {
  margin: 0 0 8px;
  color: #101828;
}

.detail-section p {
  margin: 0;
  color: #344054;
  line-height: 1.55;
}

.panel-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid #e4e7ec;
  padding-top: 16px;
}

.panel-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #475467;
  font-weight: 800;
  padding: 0 0 13px;
}

.panel-tabs button.active {
  border-color: #155eef;
  color: #155eef;
}

.activity-list {
  display: grid;
  gap: 14px;
  padding: 18px 0;
  max-height: 360px;
  overflow: auto;
}

.activity-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.activity-item i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #155eef;
}

.activity-item strong,
.activity-item small {
  display: block;
}

.activity-item small,
.activity-item time {
  color: #667085;
  font-size: 12px;
}

.detail-comment-box {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

.detail-comment-box input {
  min-height: 40px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 0 12px;
}

.inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.task-thread-section {
  display: grid;
  gap: 12px;
}

.task-thread {
  display: grid;
  gap: 12px;
  max-height: 320px;
  overflow: auto;
}

.task-comment-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.task-comment-item p {
  margin: 4px 0 0;
  color: #344054;
  line-height: 1.45;
}

.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #101828;
}

.comment-meta time {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.task-photo-strip {
  display: grid;
  gap: 8px;
}

.task-photo-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #f9fafb;
  padding: 8px 10px;
}

.task-photo-card svg {
  width: 16px;
  height: 16px;
  color: #155eef;
}

.task-photo-card span {
  overflow: hidden;
  color: #344054;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-photo-card small,
.compact-empty {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.task-side-comment-form {
  display: grid;
  gap: 8px;
}

.task-side-comment-form textarea {
  min-height: 76px;
  resize: vertical;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  padding: 10px 12px;
}

.task-side-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.summary-grid {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px 12px;
  margin-bottom: 12px;
}

.summary-grid span {
  color: #667085;
  font-weight: 700;
}

.summary-grid strong {
  color: #1d2939;
}

.full-width {
  width: 100%;
  justify-content: center;
}

.task-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.button.warning-outline {
  border-color: #fd853a;
  color: #c4320a;
}

.button.success-outline {
  border-color: #75e0a7;
  color: #027a48;
}

.database-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #e4e7ec;
  padding: 14px 12px;
  color: #667085;
}

.pagination-lite {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-lite select {
  min-height: 34px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 0 10px;
}

#workflowMetrics {
  display: none;
}

.schedule-request-row strong,
.schedule-request-row small,
.schedule-request-row em {
  display: block;
}

.schedule-request-row strong {
  font-size: 13px;
}

.schedule-request-row small,
.schedule-request-row em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.schedule-row-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
}

.schedule-row-icon svg {
  width: 18px;
  height: 18px;
}

.schedule-row-icon.amber {
  background: #fff7ed;
  color: #f97316;
}

.schedule-row-icon.green {
  background: #ecfdf5;
  color: #059669;
}

.schedule-row-icon.red {
  background: #fef2f2;
  color: #dc2626;
}

.schedule-lower-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: white;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
}

.schedule-lower-row:hover {
  border-color: #c7d2fe;
  background: #fbfdff;
}

.schedule-lower-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
}

.schedule-lower-icon svg {
  width: 19px;
  height: 19px;
}

.schedule-lower-icon.amber {
  background: #fff7ed;
  color: #ea580c;
}

.schedule-lower-icon.green {
  background: #ecfdf5;
  color: #059669;
}

.schedule-lower-icon.blue {
  background: #eff6ff;
  color: #2563eb;
}

.schedule-lower-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.schedule-lower-main strong {
  color: #0f172a;
  font-size: 14px;
}

.schedule-lower-main span,
.schedule-lower-main small,
.schedule-lower-main em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.schedule-lower-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.request-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.request-type-badge {
  display: inline-flex;
  border: 1px solid;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
}

.request-type-badge.drop {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #ea580c;
}

.request-type-badge.pickup {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #059669;
}

.request-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 2px 0 0;
}

.request-meta-grid div {
  min-width: 0;
}

.request-meta-grid dt {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.request-meta-grid dd {
  margin: 2px 0 0;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.schedule-lower-row .mini-button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
}

.availability-row {
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
}

.schedule-summary-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 18px;
  background: white;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.055);
}

.schedule-summary-card div,
.schedule-summary-card button {
  display: grid;
  gap: 8px;
  min-height: 78px;
  border-right: 1px solid #e2e8f0;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  background: white;
  padding: 18px;
  text-align: left;
}

.schedule-summary-card div:last-child,
.schedule-summary-card button:last-child {
  border-right: 0;
}

.schedule-summary-card button {
  cursor: pointer;
}

.schedule-summary-card button:hover {
  background: #fff7ed;
}

.schedule-summary-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.schedule-summary-card strong {
  color: #0f172a;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.schedule-summary-card .warning span,
.schedule-summary-card .warning strong {
  color: #f97316;
}

.schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin-top: 14px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.schedule-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.legend-dot.scheduled {
  background: #3b82f6;
}

.legend-dot.open {
  background: #10b981;
}

.legend-dot.pending {
  background: #f59e0b;
}

.legend-badge {
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-style: normal;
}

.legend-badge.needs-off {
  background: #fef2f2;
  color: #dc2626;
}

.legend-badge.prefer-off {
  background: #fff7ed;
  color: #ea580c;
}

.legend-dash {
  color: #94a3b8;
  font-size: 16px;
  font-style: normal;
  line-height: 1;
}

.schedule-two-column.wide-main {
  grid-template-columns: minmax(0, 1fr);
}

.schedule-two-column.wide-main .schedule-side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-grid {
  grid-template-columns: minmax(180px, 220px) repeat(7, minmax(112px, 1fr)) minmax(84px, 0.7fr);
  gap: 0;
  border-radius: 18px;
  background: white;
}

.schedule-grid-header,
.schedule-employee-cell,
.schedule-day-cell,
.schedule-total-cell,
.schedule-total-label {
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}

.schedule-grid-header {
  display: grid;
  gap: 2px;
  min-height: 58px;
  align-content: center;
  background: #f8fafc;
  color: #334155;
  text-transform: none;
}

.schedule-grid-header small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.schedule-employee-cell {
  min-height: 74px;
  background: white;
}

.schedule-day-cell {
  position: relative;
  min-height: 74px;
  justify-items: center;
  align-content: center;
  background: white;
}

.schedule-day-cell:hover {
  background: #f8fafc;
}

.schedule-day-cell.drag-over {
  outline: 2px solid #2563eb;
  outline-offset: -4px;
  background: #eff6ff;
}

.shift-pill {
  position: relative;
  width: 72px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  text-align: center;
}

.shift-pill.scheduled,
.shift-pill.reassigned {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.shift-pill[draggable="true"] {
  cursor: grab;
}

.shift-pill[draggable="true"]:active {
  cursor: grabbing;
}

.shift-pill.open,
.shift-pill.open_for_pickup {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.shift-pill.pickup_requested {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4f46e5;
}

.shift-pill.dropped_requested,
.shift-pill.drop_requested {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #ea580c;
}

.shift-pill.cancelled {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

.availability-corner {
  position: absolute;
  right: 2px;
  bottom: 2px;
  color: #f97316;
}

.availability-corner svg {
  width: 14px;
  height: 14px;
}

.conflict-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 999px;
  gap: 4px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.conflict-badge.needs-off::before {
  content: "!";
  display: inline-grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border-radius: 999px;
  background: #dc2626;
  color: white;
  font-size: 9px;
}

.conflict-badge.prefer-off::before {
  content: "i";
  display: inline-grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border-radius: 999px;
  background: #f97316;
  color: white;
  font-size: 9px;
  font-style: normal;
}

.conflict-badge[role="button"] {
  cursor: pointer;
}

.conflict-badge.needs-off {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.conflict-badge.prefer-off {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #ea580c;
}

.conflict-badge:hover,
.conflict-badge:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.schedule-day-cell .conflict-badge {
  width: fit-content;
  justify-self: center;
}

.availability-warning-panel {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid;
  border-radius: 16px;
  padding: 12px;
}

.availability-warning-panel.needs-off {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.availability-warning-panel.prefer-off {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.warning-panel-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: white;
}

.warning-panel-icon svg {
  width: 18px;
  height: 18px;
}

.warning-panel-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.availability-warning-panel p,
.availability-warning-panel small,
.availability-warning-panel em {
  display: block;
  margin: 3px 0 0;
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.availability-conflict-body {
  display: grid;
  gap: 14px;
}

.conflict-intro {
  margin: 0;
  color: #475569;
  font-size: 14px;
}

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

.conflict-detail-card {
  display: grid;
  gap: 10px;
  border: 1px solid;
  border-radius: 16px;
  padding: 12px;
}

.conflict-detail-card.needs-off {
  border-color: #fecaca;
  background: #fff7f7;
}

.conflict-detail-card.prefer-off {
  border-color: #fed7aa;
  background: #fffaf3;
}

.conflict-detail-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.conflict-detail-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.conflict-detail-card dl div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
}

.conflict-detail-card dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.conflict-detail-card dd {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
}

.schedule-total-cell,
.schedule-total-label {
  display: grid;
  min-height: 74px;
  place-items: center;
  background: white;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.schedule-total-cell small,
.schedule-total-cell strong {
  display: block;
}

.schedule-total-label {
  justify-items: start;
  padding-inline: 12px;
}

@media (max-width: 1320px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .dashboard-soft-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  }

  .dashboard-site-card {
    grid-column: 1 / -1;
  }

  .kpi-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }

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

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

  .workflow-workspace {
    grid-template-columns: 1fr;
  }

  .platform-layout {
    grid-template-columns: 1fr;
  }

  .platform-create-card {
    position: static;
  }

  .workflow-metrics {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .filter-bar,
  .site-metric-strip {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .secondary-metrics {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .people-layout,
  .sites-layout,
  .inline-admin-form,
  .inline-admin-form.wide,
  .people-management-grid,
  .access-control-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .inline-admin-form .span-2 {
    grid-column: auto;
  }

  .settings-panel {
    position: static;
  }

  .people-directory {
    position: static;
  }

  .sites-list-panel {
    position: static;
  }
}

@media (max-width: 1080px) {
  .grid-4,
  .grid-3,
  .metrics {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 860px) {
  .app-frame,
  body[data-active-view] .app-frame {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    z-index: 25;
    top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
  }

  .brand-row {
    padding: 0;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .brand-row h1 {
    font-size: 18px;
  }

  .sidebar .profile-card {
    width: auto;
    min-width: 44px;
    padding: 6px;
  }

  .sidebar .profile-card div:not(.profile-avatar),
  .sidebar .profile-card > svg,
  .nav-tabs,
  .sidebar-footer,
  .profile-menu {
    display: none;
  }

  .main {
    padding: 16px 16px calc(90px + env(safe-area-inset-bottom));
  }

  .page-header,
  .header-actions,
  .section-heading,
  .platform-hero,
  .workflow-command,
  .workflow-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-toolbar,
  .schedule-action-row,
  .schedule-controls,
  .button-row,
  .schedule-shift-card,
  .request-item {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-two-column,
  .schedule-two-column.wide-main {
    grid-template-columns: 1fr;
  }

  .dashboard-scope-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .scope-toggle {
    width: 100%;
  }

  .scope-toggle button {
    flex: 1;
  }

  .schedule-grid {
    grid-template-columns: minmax(150px, 170px) repeat(7, minmax(120px, 1fr));
  }

  .search-box,
  .workflow-search,
  .workflow-table-search {
    width: 100%;
  }

  .workflow-queue .table-scroll {
    overflow: visible;
  }

  .workflow-queue table,
  .workflow-queue thead,
  .workflow-queue tbody,
  .workflow-queue tr,
  .workflow-queue th,
  .workflow-queue td {
    display: block;
  }

  .workflow-queue table {
    min-width: 0;
  }

  .workflow-queue thead {
    display: none;
  }

  .workflow-queue tbody {
    display: grid;
    gap: 10px;
  }

  .workflow-queue tr {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    padding: 10px 12px;
  }

  .workflow-queue td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    border: 0;
    padding: 7px 0;
  }

  .workflow-queue td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
  }

  .workflow-queue td[colspan] {
    display: block;
  }

  .workflow-queue td[colspan]::before {
    display: none;
  }

  .workflow-queue td[data-label="Actions"] .mini-button {
    width: fit-content;
  }

  .auth-screen,
  .admin-card-grid,
  .admin-section.two-column,
  .people-toolbar,
  .profile-summary-grid,
  .person-hero,
  .review-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .metrics,
  .workflow-metrics,
  .kpi-grid,
  .dashboard-kpi-grid,
  .dashboard-soft-grid,
  .platform-metric-grid,
  .secondary-metrics,
  .site-health-reasons,
  .filter-bar,
  .site-metric-strip,
  .split,
  .check-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-site-card {
    grid-column: auto;
  }

  .dashboard-kpi-card,
  .dashboard-soft-card {
    min-height: auto;
    padding: 18px;
  }

  .dashboard-mini-head {
    display: none;
  }

  .dashboard-followup-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
  }

  .dashboard-followup-row > span {
    grid-column: 1;
  }

  .dashboard-followup-row > i {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .schedule-lower-row {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }

  .schedule-lower-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .request-meta-grid {
    grid-template-columns: 1fr;
  }

  .followup-helper-panel {
    grid-template-columns: 1fr;
  }

  .encouragement-banner {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .banner-art {
    display: none;
  }

  .status-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .status-tab {
    justify-content: space-between;
    min-width: max-content;
    min-height: 44px;
  }

  .table-scroll {
    overflow-x: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
  }

  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 0;
    padding: 7px 4px;
    text-align: right;
  }

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  td:empty {
    display: none;
  }

  .side-drawer {
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
  }

  .modal-backdrop {
    padding: 0;
  }

  .modal-card,
  .modal-card-wide {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    padding: 16px;
  }

  .modal-form {
    padding-bottom: 74px;
  }

  .modal-form > .button.primary,
  #reviewCloseForm .button.primary {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 48px;
    box-shadow: 0 -8px 18px rgba(255, 255, 255, 0.9);
  }

  .button,
  .icon-button,
  .mini-button,
  input,
  select {
    min-height: 44px;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
  }

  .mobile-bottom-nav button {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #475467;
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 800;
  }

  .mobile-bottom-nav button.active {
    background: var(--blue-soft);
    color: var(--blue);
  }

  .mobile-bottom-nav svg {
    width: 19px;
    height: 19px;
  }

  .mobile-sheet-backdrop:not(.hidden) {
    display: flex;
  }

  .observation-compact-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .observation-compact-badges {
    justify-content: flex-start;
  }
}

/* Focused Tasks table/detail/form polish. */
body[data-active-view="workflow"] .workflow-queue table {
  display: block;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
}

body[data-active-view="workflow"] .workflow-queue thead,
body[data-active-view="workflow"] .workflow-queue tbody {
  display: block;
}

body[data-active-view="workflow"] .workflow-task-grid-row {
  display: grid;
  grid-template-columns: 40px minmax(220px, 1.6fr) minmax(220px, 1.4fr) minmax(140px, 1fr) minmax(130px, 0.9fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) minmax(140px, 0.9fr) 56px;
  align-items: center;
  width: 100%;
}

body[data-active-view="workflow"] .workflow-task-grid-row th,
body[data-active-view="workflow"] .workflow-task-grid-row td {
  display: block;
  min-width: 0;
  padding: 12px 10px;
  text-align: left;
  overflow: hidden;
}

body[data-active-view="workflow"] .workflow-task-grid-row th:first-child,
body[data-active-view="workflow"] .workflow-task-grid-row td:first-child,
body[data-active-view="workflow"] .workflow-task-grid-row th:last-child,
body[data-active-view="workflow"] .workflow-task-grid-row td:last-child {
  text-align: center;
}

body[data-active-view="workflow"] .workflow-task-grid-row td > *,
body[data-active-view="workflow"] .workflow-task-grid-row th > * {
  min-width: 0;
}

body[data-active-view="workflow"] .workflow-task-empty-row {
  display: block;
  width: 100%;
}

body[data-active-view="workflow"] .workflow-task-empty-row .task-empty-state-full {
  display: flex;
  width: 100%;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e2e8f0;
  padding: 28px;
  text-align: center;
  overflow: visible;
}

body[data-active-view="workflow"] .followup-title-line,
body[data-active-view="workflow"] .task-assignment-cell,
body[data-active-view="workflow"] .task-location-cell,
body[data-active-view="workflow"] .task-date-cell {
  min-width: 0;
}

body[data-active-view="workflow"] .followup-title-line strong,
body[data-active-view="workflow"] .task-assignment-cell strong,
body[data-active-view="workflow"] .task-location-cell,
body[data-active-view="workflow"] .task-date-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="workflow"] .task-assignment-cell,
body[data-active-view="workflow"] .task-location-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-active-view="workflow"] .task-assignment-cell span,
body[data-active-view="workflow"] .task-date-cell {
  display: grid;
  gap: 3px;
}

body[data-active-view="workflow"] .task-assignment-cell small,
body[data-active-view="workflow"] .task-date-cell small,
body[data-active-view="workflow"] .followup-title-line small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body[data-active-view="workflow"] .selected-row {
  outline: 0;
  background: #f0f8ef;
  box-shadow: inset 3px 0 0 #128a2e;
}

.task-detail-shell-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.task-detail-number {
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.task-detail-control-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.task-status-menu-wrap {
  position: relative;
  z-index: 4;
}

.task-status-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border: 1px solid #d8e3dd;
  border-radius: 8px;
  background: white;
  padding: 4px 8px;
}

.task-status-dropdown:hover {
  border-color: rgba(18, 138, 46, 0.45);
}

.task-status-dropdown svg {
  width: 14px;
  height: 14px;
}

.task-status-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 160px;
  border: 1px solid #d8e3dd;
  border-radius: 8px;
  background: white;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  padding: 6px;
}

/* Tasks precision layout: detail panel starts beside KPI cards. */
body[data-active-view="workflow"] #workflowView.active {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) minmax(360px, 390px);
  column-gap: 18px;
  row-gap: 10px;
  align-items: start;
}

body[data-active-view="workflow"] #workflowMetrics {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-workspace {
  display: contents;
}

body[data-active-view="workflow"] #workflowView.active .workflow-queue {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

body[data-active-view="workflow"] #workflowView.active .workflow-sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  min-width: 0;
  position: sticky;
  top: 24px;
}

body[data-active-view="workflow"] #workflowView.active .task-detail-panel {
  position: relative;
  min-height: 720px;
  border: 1px solid #dfe7e2;
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(18, 138, 46, 0.1), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #f8fbf8 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  padding: 24px;
}

body[data-active-view="workflow"] #workflowView.active .task-detail-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #0a7f24, #18a23b);
}

body[data-active-view="workflow"] #workflowView.active .task-metric-card {
  min-height: 112px;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  border-color: #dfe7e2;
  border-radius: 12px;
  padding: 20px 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

body[data-active-view="workflow"] #workflowView.active .task-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

body[data-active-view="workflow"] #workflowView.active .task-metric-icon svg {
  width: 24px;
  height: 24px;
}

body[data-active-view="workflow"] #workflowView.active .task-metric-card strong {
  font-size: 28px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-queue table {
  min-width: 1000px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-task-grid-row {
  grid-template-columns: 40px minmax(180px, 1.35fr) minmax(190px, 1.25fr) minmax(120px, 0.85fr) minmax(130px, 0.9fr) minmax(88px, 0.65fr) minmax(92px, 0.7fr) minmax(140px, 0.95fr);
}

body[data-active-view="workflow"] #workflowView.active .database-tabs {
  gap: 34px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-pagination {
  gap: 14px;
}

body[data-active-view="workflow"] #workflowView.active .pagination-ellipsis {
  color: #64748b;
  font-weight: 850;
}

@media (max-width: 1380px) {
  body[data-active-view="workflow"] #workflowView.active {
    grid-template-columns: 1fr;
  }

  body[data-active-view="workflow"] #workflowView.active .workflow-sidebar,
  body[data-active-view="workflow"] #workflowView.active .workflow-queue,
  body[data-active-view="workflow"] #workflowMetrics {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-active-view="workflow"] #workflowView.active .workflow-sidebar {
    position: static;
  }
}

/* True final Tasks sidebar and spacing correction. */
body[data-active-view="workflow"] #workflowView.active {
  position: relative;
  display: block;
}

body[data-active-view="workflow"] #workflowMetrics,
body[data-active-view="workflow"] #workflowView.active .workflow-workspace {
  width: calc(100% - 408px);
}

body[data-active-view="workflow"] #workflowMetrics {
  margin-bottom: 18px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-workspace {
  display: block;
}

body[data-active-view="workflow"] #workflowView.active .workflow-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 390px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-queue {
  width: 100%;
}

@media (max-width: 1380px) {
  body[data-active-view="workflow"] #workflowMetrics,
  body[data-active-view="workflow"] #workflowView.active .workflow-workspace {
    width: 100%;
  }

  body[data-active-view="workflow"] #workflowView.active .workflow-sidebar {
    position: static;
    width: 100%;
    margin-top: 18px;
  }
}

/* Final Tasks spacing/sidebar correction. */
body[data-active-view="workflow"] #workflowView.active {
  position: relative;
  display: block;
}

body[data-active-view="workflow"] #workflowMetrics,
body[data-active-view="workflow"] #workflowView.active .workflow-workspace {
  width: calc(100% - 408px);
}

body[data-active-view="workflow"] #workflowMetrics {
  margin-bottom: 18px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-workspace {
  display: block;
}

body[data-active-view="workflow"] #workflowView.active .workflow-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 390px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-queue {
  width: 100%;
}

@media (max-width: 1380px) {
  body[data-active-view="workflow"] #workflowMetrics,
  body[data-active-view="workflow"] #workflowView.active .workflow-workspace {
    width: 100%;
  }

  body[data-active-view="workflow"] #workflowView.active .workflow-sidebar {
    position: static;
    width: 100%;
    margin-top: 18px;
  }
}

#observationTargetRow.single-field {
  grid-template-columns: 1fr;
}

body[data-active-view="workflow"] .workflow-task-grid-row th:first-child,
body[data-active-view="workflow"] .workflow-task-grid-row td:first-child,
body[data-active-view="workflow"] .workflow-task-grid-row th:last-child,
body[data-active-view="workflow"] .workflow-task-grid-row td:last-child {
  text-align: center;
}

body[data-active-view="workflow"] .task-status-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  border: 1px solid #d8e3dd;
  border-radius: 8px;
  background: #ffffff;
  padding: 5px 8px;
}

body[data-active-view="workflow"] .task-status-dropdown svg {
  width: 14px;
  height: 14px;
}

body[data-active-view="workflow"] .task-status-menu button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 8px 10px;
  color: #0f172a;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

body[data-active-view="workflow"] .task-status-menu button:hover {
  background: #f0f7ef;
  color: #08720c;
}

.task-status-menu button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #0f172a;
  padding: 8px 9px;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}

.task-status-menu button:hover {
  background: #eaf8ee;
  color: #128a2e;
}

.task-detail-shell-header .inline-actions {
  display: flex;
  gap: 8px;
}

.detail-panel-header {
  align-items: flex-start;
}

.detail-panel-header h3 {
  margin-top: 0;
  overflow-wrap: anywhere;
}

#observationModal .modal-card-wide {
  max-width: 720px;
}

#observationModal .modal-form {
  gap: 14px;
}

#observationModal .followup-fields {
  border: 1px solid #dbe8d8;
  border-radius: 10px;
  background: #f8fcf8;
  padding: 14px;
}

#observationModal .button.primary[type="submit"] {
  position: sticky;
  bottom: 0;
  z-index: 2;
  align-self: end;
  box-shadow: 0 -8px 18px rgba(255, 255, 255, 0.92);
}

/* Create Task modal: scoped square reference layout. */
.create-task-modal {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
}

.create-task-modal *,
.create-task-modal button,
.create-task-modal input,
.create-task-modal select,
.create-task-modal textarea {
  border-radius: 0px !important;
}

.create-task-card {
  display: grid;
  gap: 0;
  width: min(940px, calc(100vw - 40px));
  max-height: min(90vh, 900px);
  overflow: hidden;
  border: 1px solid #dde7e2;
  border-radius: 0px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
  padding: 0;
}

.create-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 34px 12px;
}

.create-task-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

.create-task-close {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.create-task-form {
  display: grid;
  min-height: 0;
}

.create-task-body {
  display: grid;
  gap: 24px;
  max-height: calc(90vh - 160px);
  overflow: auto;
  padding: 18px 34px 28px;
}

.create-task-grid,
.task-assigning-section,
.task-assignment-panel {
  display: grid;
  gap: 16px;
}

.create-task-grid.two-col,
.create-task-grid.title-row,
.task-assigning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

.create-task-field {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.create-task-field > span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.create-task-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  border: 1px solid #d8e2dc;
  background: #ffffff;
  padding: 0 14px;
}

.create-task-control:focus-within {
  border-color: #4f7cff;
  box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.14);
}

.create-task-control svg {
  width: 16px;
  height: 16px;
  color: #475569;
  flex: 0 0 auto;
}

.create-task-control input,
.create-task-control select,
.create-task-control textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
}

.create-task-control input::placeholder,
.create-task-control textarea::placeholder {
  color: #667085;
}

.textarea-control {
  position: relative;
  align-items: flex-start;
  min-height: 170px;
  padding-top: 16px;
  padding-bottom: 28px;
}

.textarea-control textarea {
  min-height: 124px;
  resize: vertical;
}

.textarea-control em {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #667085;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.task-urgency-options,
.task-assignment-tabs {
  display: grid;
  border: 1px solid #d8e2dc;
  background: #ffffff;
}

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

.task-urgency-option,
.task-assignment-tabs button {
  min-height: 50px;
  border: 0;
  border-right: 1px solid #d8e2dc;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.task-urgency-option:last-child,
.task-assignment-tabs button:last-child {
  border-right: 0;
}

.task-urgency-option.low.active {
  background: #f8fafc;
  color: #475569;
  box-shadow: inset 0 0 0 2px #cbd5e1;
}

.task-urgency-option.normal.active {
  background: #eef4ff;
  color: #2563eb;
  box-shadow: inset 0 0 0 2px #4f7cff;
}

.task-urgency-option.high {
  color: #9a3412;
}

.task-urgency-option.high.active {
  background: #fff7ed;
  color: #c2410c;
  box-shadow: inset 0 0 0 2px #fdba74;
}

.task-urgency-option.critical {
  color: #dc2626;
}

.task-urgency-option.critical.active {
  background: #fef2f2;
  color: #dc2626;
  box-shadow: inset 0 0 0 2px #f87171;
}

.task-upload-box {
  position: relative;
  display: grid;
  min-height: 170px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #b8c4d0;
  background: #ffffff;
  color: #0f172a;
  text-align: center;
  cursor: pointer;
}

.task-upload-box.drag-over,
.task-upload-box:hover {
  border-color: #087a1e;
  background: #f4fbf5;
}

.task-upload-box input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.task-upload-box svg {
  width: 30px;
  height: 30px;
  color: #334155;
}

.task-upload-box strong {
  font-size: 14px;
  line-height: 1.35;
}

.task-upload-box small,
.task-upload-box em {
  color: #475569;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.create-task-divider {
  height: 1px;
  background: #dce5df;
}

.task-assigning-section h4 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}

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

.task-assignment-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.task-assignment-tabs svg {
  width: 15px;
  height: 15px;
}

.task-assignment-tabs button.active {
  background: #f0fbf2;
  color: #087a1e;
  box-shadow: inset 0 0 0 2px #16a34a;
}

.task-assignment-message {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid #d8e2dc;
  background: #f8fafc;
  padding: 10px 12px;
}

.task-assignment-message.success {
  border-color: #bee8c7;
  background: #f0fbf2;
}

.task-assignment-message p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
}

.task-search-input {
  min-height: 42px;
  border: 1px solid #d8e2dc;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 750;
}

.task-search-results {
  display: grid;
  max-height: 150px;
  overflow: auto;
  border: 1px solid #d8e2dc;
  background: #ffffff;
}

.task-search-results button {
  display: grid;
  gap: 3px;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid #edf2ef;
  background: transparent;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.task-search-results button.selected,
.task-search-results button:hover {
  background: #f0fbf2;
}

.task-search-results strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

.task-search-results small,
.task-search-results p {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.task-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-chip-row button {
  min-height: 30px;
  border: 1px solid #bee8c7;
  background: #f0fbf2;
  color: #087a1e;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.field-error {
  min-height: 14px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
}

.create-task-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #dce5df;
  background: #ffffff;
  padding: 20px 34px 24px;
}

.create-task-cancel {
  min-width: 92px;
  min-height: 46px;
  border: 1px solid #d8e2dc;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
}

.create-task-submit {
  min-width: 200px;
  min-height: 50px;
  border-color: #087a1e;
  background: linear-gradient(180deg, #0a8a24 0%, #06731c 100%);
  box-shadow: 0 10px 18px rgba(8, 122, 30, 0.22);
  color: #ffffff;
  font-weight: 900;
}

@media (max-width: 760px) {
  .create-task-card {
    width: calc(100vw - 20px);
  }

  .create-task-grid.two-col,
  .create-task-grid.title-row,
  .task-assigning-grid {
    grid-template-columns: 1fr;
  }

  .task-assignment-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .create-task-footer {
    gap: 12px;
  }
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  min-height: 40px;
  border: 1px solid #d8e3dd;
  border-radius: 8px;
  background-color: white;
  color: #0f172a;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color-scheme: light;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  border-color: #128a2e;
  box-shadow: 0 0 0 3px rgba(18, 138, 46, 0.13);
  outline: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.72;
  filter: sepia(1) saturate(1.4) hue-rotate(72deg);
}

.create-task-control input[type="date"],
.create-task-control input[type="time"] {
  min-height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* Create Task modal layout/focus corrections. Keep scoped to this modal only. */
.create-task-modal .create-task-card {
  display: flex;
  flex-direction: column;
  width: min(920px, calc(100vw - 40px));
  max-height: min(92vh, 900px);
  overflow: hidden;
}

.create-task-modal .create-task-header {
  flex: 0 0 auto;
  padding: 22px 32px 10px;
}

.create-task-modal .create-task-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.create-task-modal .create-task-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 16px 32px 18px;
  gap: 18px;
}

.create-task-modal .create-task-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
  padding: 16px 32px 18px;
  background: #ffffff;
}

.create-task-modal .create-task-grid,
.create-task-modal .task-assigning-section,
.create-task-modal .task-assignment-panel {
  gap: 12px;
}

.create-task-modal .create-task-grid.two-col,
.create-task-modal .create-task-grid.title-row,
.create-task-modal .task-assigning-grid {
  gap: 24px;
}

.create-task-modal .create-task-field {
  gap: 6px;
}

.create-task-modal .create-task-control {
  min-height: 42px;
  gap: 10px;
  padding: 0 12px;
}

.create-task-modal .create-task-control:focus-within,
.create-task-modal .task-search-input:focus,
.create-task-modal .task-upload-box:focus-within {
  border-color: #087a1e;
  box-shadow: 0 0 0 1px #087a1e;
}

.create-task-modal input,
.create-task-modal select,
.create-task-modal textarea,
.create-task-modal button,
.create-task-modal [tabindex] {
  outline: none !important;
}

.create-task-modal input:focus,
.create-task-modal select:focus,
.create-task-modal textarea:focus,
.create-task-modal button:focus,
.create-task-modal [tabindex]:focus {
  outline: none !important;
  box-shadow: none;
}

.create-task-modal input:focus-visible,
.create-task-modal select:focus-visible,
.create-task-modal textarea:focus-visible,
.create-task-modal button:focus-visible,
.create-task-modal [tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px #087a1e;
}

.create-task-modal .create-task-control input:focus-visible,
.create-task-modal .create-task-control select:focus-visible,
.create-task-modal .create-task-control textarea:focus-visible {
  box-shadow: none;
}

.create-task-modal .create-task-control select,
.create-task-modal .create-task-control input,
.create-task-modal .create-task-control textarea {
  min-height: auto;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.create-task-modal .create-task-control select {
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #0f172a 50%), linear-gradient(135deg, #0f172a 50%, transparent 50%) !important;
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50% !important;
  background-repeat: no-repeat !important;
  background-size: 5px 5px, 5px 5px !important;
  padding-right: 24px !important;
}

.create-task-modal .textarea-control {
  min-height: 132px;
  padding-top: 12px;
  padding-bottom: 24px;
}

.create-task-modal .textarea-control textarea {
  min-height: 92px;
}

.create-task-modal .task-upload-box {
  min-height: 132px;
  gap: 6px;
}

.create-task-modal .task-upload-box svg {
  width: 26px;
  height: 26px;
}

.create-task-modal .task-urgency-option,
.create-task-modal .task-assignment-tabs button {
  min-height: 42px;
}

.create-task-modal .task-assignment-message {
  min-height: 44px;
  padding: 8px 10px;
}

.create-task-modal .task-assigning-section h4 {
  font-size: 18px;
}

.create-task-modal .task-search-results {
  max-height: 190px;
  overflow-y: auto;
  z-index: 20;
}

.create-task-modal .task-search-results button {
  min-height: 40px;
}

.create-task-modal .create-task-submit {
  min-height: 46px;
}

.create-task-modal .create-task-cancel {
  min-height: 42px;
}

/* Create Task assignment picker clipping/spacing fixes. */
.create-task-modal .create-task-card {
  width: min(940px, calc(100vw - 48px));
}

.create-task-modal .create-task-body {
  padding-bottom: 24px;
}

.create-task-modal .task-assigning-grid {
  align-items: start;
  column-gap: 28px;
}

.create-task-modal .task-assignment-panel {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.create-task-modal .task-assignment-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.create-task-modal .task-assignment-tabs button {
  min-width: 0;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dde7e2;
  background: #ffffff;
  padding: 0 12px;
  overflow: visible;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.create-task-modal .task-assignment-tabs button:last-child {
  border-right: 1px solid #dde7e2;
}

.create-task-modal .task-assignment-tabs button svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  stroke-width: 2;
}

.create-task-modal .task-assignment-tabs button.active {
  background: #f1faef;
  border-color: #087a1e;
  color: #087a1e;
  box-shadow: inset 0 0 0 1px #087a1e;
}

.create-task-modal .task-assignment-tabs + .task-assignment-panel {
  margin-top: 10px;
}

.create-task-modal .create-task-select-wrap {
  position: relative;
  min-height: 44px;
  border: 1px solid #c9d6d0;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  padding: 0;
}

.create-task-modal .create-task-select-wrap:hover {
  border-color: #9bb8a7;
  background: #fbfdfb;
}

.create-task-modal .create-task-select-wrap:focus-within {
  border-color: #087a1e;
  box-shadow: 0 0 0 1px #087a1e;
}

.create-task-modal .create-task-select-icon,
.create-task-modal .create-task-select-caret {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}

.create-task-modal .create-task-select-icon {
  left: 12px;
  color: #087a1e;
}

.create-task-modal .create-task-select-caret {
  right: 12px;
  color: #334155;
}

.create-task-modal .create-task-control .create-task-select-control {
  width: 100%;
  height: 44px !important;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding: 0 40px !important;
}

.create-task-modal .task-search-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dde7e2;
  background: #ffffff;
  box-sizing: border-box;
}

.create-task-modal .task-search-results {
  width: 100%;
  max-height: 190px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #dde7e2;
  background: #ffffff;
  box-sizing: border-box;
  padding: 6px 0;
  z-index: 10;
}

.create-task-modal .task-search-results button {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #edf2ef;
  background: transparent;
  box-sizing: border-box;
  padding: 8px 12px;
  cursor: pointer;
}

.create-task-modal .task-search-results button:last-child {
  border-bottom: 0;
}

.create-task-modal .task-search-results button:hover,
.create-task-modal .task-search-results button.selected {
  background: #f1faef;
}

.create-task-modal .task-search-results .create-task-user-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, 0.9fr);
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 16px;
  border-radius: 0px;
  padding: 8px 12px;
}

.create-task-modal .task-search-results strong,
.create-task-modal .task-search-results small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-task-modal .task-search-results strong {
  flex: 1 1 auto;
  font-size: 13px;
}

.create-task-modal .task-search-results small {
  flex: 0 0 auto;
  max-width: 42%;
  text-align: right;
}

.create-task-modal .task-search-results .create-task-user-result-main {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.create-task-modal .task-search-results .create-task-user-result-email {
  max-width: none;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

@media (max-width: 720px) {
  .create-task-modal .task-search-results .create-task-user-result-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .create-task-modal .task-search-results .create-task-user-result-email {
    text-align: left;
  }
}

.create-task-modal .task-chip-row {
  gap: 6px;
}

.create-task-modal .task-chip-row button {
  max-width: 100%;
  overflow: hidden;
  border-radius: 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .create-task-modal .task-assignment-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .create-task-modal .task-assignment-tabs button {
    justify-content: center;
    font-size: 12px;
  }
}

@media screen and (max-width: 980px) {
  body[data-active-view="workflow"] .workflow-queue table {
    min-width: 980px;
  }

  body[data-active-view="workflow"] .workflow-task-grid-row {
    grid-template-columns: 40px minmax(190px, 1.4fr) minmax(180px, 1.2fr) minmax(120px, 0.9fr) minmax(120px, 0.8fr) minmax(80px, 0.65fr) minmax(80px, 0.65fr) minmax(125px, 0.85fr) 52px;
  }
}

/* Green platform direction: global shell + dashboard refresh. */
:root {
  --bg: #f7faf7;
  --blue: #137a0c;
  --blue-soft: #eef8ed;
  --green: #137a0c;
  --green-soft: #edf8eb;
  --shadow-soft: 0 18px 38px rgba(15, 23, 42, 0.05);
}

body {
  background: #f8faf8;
}

button:focus-visible,
a:focus-visible {
  outline-color: rgba(19, 122, 12, 0.28);
}

.app-frame {
  grid-template-columns: 280px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed {
  grid-template-columns: 82px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed .sidebar {
  padding-inline: 12px;
}

.app-frame.sidebar-collapsed .brand-row h1,
.app-frame.sidebar-collapsed .profile-card div:not(.profile-avatar),
.app-frame.sidebar-collapsed .profile-card > svg,
.app-frame.sidebar-collapsed .nav-tab span,
.app-frame.sidebar-collapsed .help-card span,
.app-frame.sidebar-collapsed .help-card > svg,
.app-frame.sidebar-collapsed .collapse-button span {
  display: none;
}

.app-frame.sidebar-collapsed .brand-row,
.app-frame.sidebar-collapsed .nav-tab,
.app-frame.sidebar-collapsed .profile-card,
.app-frame.sidebar-collapsed .help-card,
.app-frame.sidebar-collapsed .collapse-button {
  justify-content: center;
}

.app-frame.sidebar-collapsed .sidebar {
  gap: 14px;
}

.app-frame.sidebar-collapsed .brand-row {
  padding-inline: 0;
}

.app-frame.sidebar-collapsed .profile-card,
.app-frame.sidebar-collapsed .nav-tab {
  width: 58px;
  min-width: 58px;
  padding-inline: 0;
}

.app-frame.sidebar-collapsed .sidebar-footer {
  margin-inline: -12px;
}

.app-frame.sidebar-collapsed .help-card {
  grid-template-columns: 36px;
  margin-inline: 12px;
  padding: 10px;
}

.app-frame.sidebar-collapsed .collapse-button {
  padding-inline: 0;
}

.sidebar {
  border-right: 0;
  background:
    radial-gradient(circle at 55% 8%, rgba(66, 174, 45, 0.36), transparent 35%),
    linear-gradient(180deg, #1f8118 0%, #187212 42%, #11610c 100%);
  color: white;
  padding: 28px 16px 0;
}

.brand-row {
  gap: 12px;
  padding: 0 8px 22px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.flow-line,
.flow-line.top,
.flow-line.bottom {
  height: 5px;
  background: white;
}

.flow-dot {
  background: white;
}

.flow-dot.start {
  border-color: white;
  background: transparent;
}

.brand-row h1 {
  color: white;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.profile-card {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  color: white;
  padding: 14px;
}

.profile-card span {
  color: rgba(255, 255, 255, 0.82);
}

.profile-card strong {
  color: white;
  font-size: 15px;
  font-weight: 850;
}

.profile-card svg {
  color: rgba(255, 255, 255, 0.86);
}

.profile-avatar {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 14px;
}

.nav-tabs {
  gap: 9px;
  margin-top: 8px;
}

.nav-tab {
  min-height: 48px;
  gap: 13px;
  border: 0;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.94);
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 850;
}

.nav-tab svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.35;
}

.nav-tab:hover,
.nav-tab.active {
  background: rgba(255, 255, 255, 0.18);
  color: white;
}

.sidebar-footer {
  gap: 18px;
  margin-inline: -16px;
}

.help-card {
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  margin: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  padding: 14px;
}

.help-card div {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  background: transparent;
  color: white;
  box-shadow: none;
}

.help-card strong {
  color: white;
  font-size: 15px;
}

.help-card small {
  color: rgba(255, 255, 255, 0.8);
}

.help-card > svg {
  width: 17px;
  height: 17px;
  color: white;
}

.collapse-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.08);
  color: white;
  padding: 0 24px;
  font-size: 17px;
  font-weight: 850;
}

.collapse-button svg {
  width: 22px;
  height: 22px;
}

.main {
  background: #fbfcfb;
  padding: 36px;
}

.workspace {
  gap: 26px;
}

.page-header {
  align-items: flex-start;
  margin-bottom: 2px;
}

.page-header .kicker {
  display: none;
}

.page-header h2 {
  color: #071329;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.page-subtitle {
  color: #344054;
  font-size: 15px;
}

body[data-active-view="dashboard"] .header-actions {
  display: none;
}

#dashboardView {
  display: grid;
  gap: 20px;
}

#dashboardView:not(.active) {
  display: none;
}

#dashboardView .dashboard-scope-bar {
  position: absolute;
  top: 36px;
  right: 36px;
  margin: 0;
}

#dashboardScopeLabel,
#dashboardScopeHelp {
  display: none;
}

.scope-toggle {
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.scope-toggle button {
  min-height: 48px;
  border: 1px solid #d7dee7;
  border-radius: 7px;
  background: white;
  color: #111827;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 850;
}

.scope-toggle button.active {
  border-color: #126e0c;
  background: #177a11;
  color: white;
  box-shadow: 0 10px 22px rgba(23, 122, 17, 0.18);
}

.dashboard-kpi-grid {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 18px;
}

.dashboard-kpi-card,
.dashboard-soft-card,
.encouragement-banner {
  border: 1px solid #dfe6ee;
  background: white;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
  backdrop-filter: none;
}

.dashboard-kpi-card {
  min-height: 176px;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  border-radius: 9px;
  padding: 28px;
}

.dashboard-kpi-card::before {
  display: none;
}

.dashboard-kpi-icon {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: #edf7ed !important;
  color: #137a0c !important;
}

.dashboard-kpi-copy {
  align-self: start;
  margin-top: 16px;
}

.dashboard-kpi-copy strong {
  color: #071329;
  font-size: 38px;
  font-weight: 900;
}

.dashboard-kpi-card.label-first .dashboard-kpi-copy strong {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.dashboard-kpi-copy span {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

.dashboard-kpi-copy small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #344054;
  font-size: 14px;
}

.dashboard-kpi-copy small svg {
  width: 15px;
  height: 15px;
}

.dashboard-kpi-arrow {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  gap: 10px;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: #137a0c;
  padding: 0;
  font-size: 14px;
  font-weight: 900;
}

.dashboard-kpi-arrow svg {
  width: 18px;
  height: 18px;
}

.dashboard-soft-grid {
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) minmax(330px, 1fr);
  gap: 18px;
}

.dashboard-soft-card {
  min-height: 510px;
  border-radius: 9px;
  padding: 24px;
}

.dashboard-card-header h3 {
  color: #071329;
  font-size: 20px;
  font-weight: 900;
}

.dashboard-card-header p {
  color: #344054;
  font-size: 14px;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #edf7ed;
  color: #137a0c;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}

.live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #29a01d;
}

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

.dashboard-metric-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #e4e9ef;
  border-radius: 7px;
  background: white;
  padding: 12px;
}

.dashboard-metric-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 9px;
  background: #edf7ed;
  color: #137a0c;
}

.dashboard-metric-copy strong,
.dashboard-metric-copy b,
.dashboard-metric-copy small,
.dashboard-metric-trend b,
.dashboard-metric-trend small {
  display: block;
}

.dashboard-metric-copy strong {
  color: #071329;
  font-size: 28px;
  line-height: 1;
}

.dashboard-metric-copy b {
  margin-top: 3px;
  color: #111827;
  font-size: 14px;
}

.dashboard-metric-copy small,
.dashboard-metric-trend small {
  color: #667085;
  font-size: 12px;
}

.dashboard-metric-trend {
  text-align: right;
}

.dashboard-metric-trend.up b {
  color: #137a0c;
}

.dashboard-metric-trend.ok b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #137a0c;
}

.dashboard-metric-trend.ok i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #16a34a;
}

.dashboard-metric-trend.muted b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #667085;
}

.dashboard-metric-trend.muted i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #98a2b3;
}

.dashboard-metric-trend.moderate b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #b45309;
}

.dashboard-metric-trend.moderate i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #f59e0b;
}

.dashboard-card-action {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: #137a0c;
}

.dashboard-mini-head,
.dashboard-followup-row {
  grid-template-columns: 86px minmax(100px, 1.2fr) minmax(78px, 0.8fr) minmax(86px, 0.9fr) 18px;
}

.dashboard-followup-row {
  min-height: 62px;
}

.followup-helper-panel {
  margin-top: auto;
  border-color: #dbe8d8;
  border-radius: 7px;
  background: #f3f8ef;
}

.helper-clipboard {
  border-color: #91c689;
  background: #edf7ed;
  color: #137a0c;
}

.followup-helper-panel strong {
  color: #137a0c;
}

.segmented-mini {
  gap: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.segmented-mini button {
  border-radius: 0;
  color: #111827;
  padding: 0 0 12px;
  font-size: 14px;
}

.segmented-mini button.active {
  background: transparent;
  color: #137a0c;
  box-shadow: inset 0 -3px 0 #137a0c;
}

.dashboard-switch-panel,
.dashboard-fade-panel {
  min-height: 300px;
  border-color: #e4e9ef;
  border-radius: 7px;
  padding: 18px;
}

.leaderboard-filter select {
  border-radius: 7px;
  font-weight: 850;
}

.leaderboard-list .empty-state {
  min-height: 190px;
}

.leaderboard-list .empty-icon {
  background: transparent;
  color: #98a2b3;
}

.leaderboard-list .empty-icon svg {
  width: 54px;
  height: 54px;
}

.encouragement-banner {
  grid-template-columns: 48px minmax(0, 1fr) minmax(260px, 0.8fr);
  min-height: 84px;
  overflow: hidden;
  border-radius: 7px;
  border-color: #dfe6ee;
  background: white;
}

.encouragement-icon {
  border: 2px solid #137a0c;
  background: white;
  color: #137a0c;
  box-shadow: none;
}

.encouragement-banner strong {
  color: #111827;
  font-size: 18px;
}

.encouragement-banner p {
  color: #344054;
}

.banner-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 100%;
}

.banner-hill {
  position: absolute;
  bottom: -34px;
  border: 1px solid rgba(19, 122, 12, 0.45);
  background: rgba(190, 220, 178, 0.55);
}

.banner-hill.hill-one {
  right: 92px;
  width: 250px;
  height: 92px;
  border-radius: 60% 60% 0 0;
}

.banner-hill.hill-two {
  right: -38px;
  width: 300px;
  height: 78px;
  border-radius: 58% 58% 0 0;
}

.banner-sun {
  position: absolute;
  right: 156px;
  top: 22px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f4b000;
}

@media (max-width: 1320px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .dashboard-soft-grid {
    grid-template-columns: 1fr;
  }
}

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

  .sidebar {
    padding: 12px 16px;
  }

  .sidebar .profile-card div:not(.profile-avatar),
  .sidebar .profile-card > svg,
  .nav-tabs,
  .sidebar-footer,
  .profile-menu {
    display: none;
  }

  .main {
    padding: 16px 16px calc(90px + env(safe-area-inset-bottom));
  }

  #dashboardView .dashboard-scope-bar {
    position: static;
  }

  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-metric-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .dashboard-metric-trend {
    grid-column: 2;
    text-align: left;
  }
}

/* Green Tasks page refresh. */
body[data-active-view="workflow"] .main {
  background: #fbfcfb;
}

body[data-active-view="workflow"] .workflow-command {
  display: none;
}

body[data-active-view="workflow"] .page-header {
  margin-bottom: 18px;
}

body[data-active-view="workflow"] #openMyActivity {
  border-color: #d7dee7;
  background: white;
  color: #111827;
}

body[data-active-view="workflow"] #headerPrimaryAction {
  display: inline-flex !important;
  background: #137a0c;
  border-color: #137a0c;
}

.button.primary {
  border-color: #137a0c;
  background: #137a0c;
  color: white;
}

.button.primary:hover {
  background: #0f6509;
  border-color: #0f6509;
}

#workflowMetrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 18px;
}

.task-metric-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 120px;
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  background: white;
  padding: 22px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
}

.task-metric-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 12px;
}

.task-metric-card.green .task-metric-icon {
  background: #e8f7e8;
  color: #137a0c;
}

.task-metric-card.blue .task-metric-icon {
  background: #eaf2ff;
  color: #1d4ed8;
}

.task-metric-card.red .task-metric-icon {
  background: #fee2e2;
  color: #dc2626;
}

.task-metric-card.purple .task-metric-icon {
  background: #f3e8ff;
  color: #7e22ce;
}

.task-metric-card span,
.task-metric-card strong,
.task-metric-card small {
  display: block;
}

.task-metric-card div > span {
  color: #111827;
  font-size: 14px;
  font-weight: 850;
}

.task-metric-card strong {
  margin-top: 4px;
  color: #071329;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.task-trend {
  margin-top: 12px;
  color: #667085;
  font-size: 12px;
}

.task-trend b {
  display: inline;
  margin-right: 4px;
}

.task-trend.good b {
  color: #137a0c;
}

.task-trend.bad b {
  color: #dc2626;
}

.task-trend.neutral b {
  color: #667085;
}

body[data-active-view="workflow"] .workflow-workspace {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
}

body[data-active-view="workflow"] .workflow-queue,
body[data-active-view="workflow"] .task-detail-panel {
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  background: white;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
}

body[data-active-view="workflow"] .database-tabs {
  padding: 0 22px;
}

body[data-active-view="workflow"] .database-tabs button.active,
body[data-active-view="workflow"] .status-tabs .status-tab.active {
  color: #137a0c;
}

body[data-active-view="workflow"] .database-tabs button.active::after,
body[data-active-view="workflow"] .status-tabs .status-tab.active::after {
  background: #137a0c;
}

body[data-active-view="workflow"] .database-tabs span,
body[data-active-view="workflow"] .status-tabs span {
  background: #edf7ed;
  color: #137a0c;
}

body[data-active-view="workflow"] .section-heading {
  display: none;
}

body[data-active-view="workflow"] .queue-controls {
  border-bottom: 1px solid #e4e9ef;
  padding: 16px 22px;
}

body[data-active-view="workflow"] .workflow-table-search,
body[data-active-view="workflow"] .filter-check {
  display: none;
}

body[data-active-view="workflow"] .filter-bar {
  width: 100%;
}

body[data-active-view="workflow"] .filter-select {
  min-width: 170px;
}

.workflow-clear-filters {
  align-self: center;
  color: #344054;
  padding: 0 10px;
}

body[data-active-view="workflow"] .status-tabs {
  flex: 1 1 100%;
  order: -1;
}

body[data-active-view="workflow"] .workflow-queue table {
  min-width: 980px;
}

body[data-active-view="workflow"] .workflow-queue table th {
  height: 44px;
  color: #344054;
  background: #fbfcfd;
  font-size: 11px;
}

body[data-active-view="workflow"] .workflow-queue table td {
  height: 66px;
}

body[data-active-view="workflow"] .workflow-queue tbody tr.selected-row {
  outline: 1px solid rgba(19, 122, 12, 0.45);
  background: #f3f8ef;
}

body[data-active-view="workflow"] .followup-title-cell small,
body[data-active-view="workflow"] td small {
  display: block;
  margin-top: 3px;
  color: #475467;
  font-size: 12px;
}

.row-menu-button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
}

body[data-active-view="workflow"] .task-detail-panel {
  position: sticky;
  top: 18px;
  display: block;
  min-height: 680px;
  padding: 24px;
}

.task-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.task-detail-top > span {
  color: #344054;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

body[data-active-view="workflow"] .detail-panel-header {
  display: grid;
  gap: 8px;
  border-bottom: 0;
  padding-bottom: 12px;
}

body[data-active-view="workflow"] .detail-panel-header .inline-actions {
  justify-content: flex-end;
  order: -1;
}

body[data-active-view="workflow"] .detail-panel-header h3 {
  font-size: 20px;
}

body[data-active-view="workflow"] .detail-panel-header p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: #344054;
  font-size: 13px;
}

body[data-active-view="workflow"] .detail-panel-header p svg {
  width: 15px;
  height: 15px;
}

body[data-active-view="workflow"] .detail-field-list {
  grid-template-columns: 1fr;
  gap: 12px;
  border-bottom: 1px solid #e4e9ef;
  padding-bottom: 16px;
}

body[data-active-view="workflow"] .detail-field-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
}

body[data-active-view="workflow"] .detail-section {
  border-bottom: 1px solid #e4e9ef;
  padding: 16px 0;
}

.task-side-comment-form.compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 16px;
}

.task-side-comment-form.compact textarea {
  min-height: 42px;
}

.task-photo-card img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
}

body[data-active-view="workflow"] .task-action-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid #e4e9ef;
  background: white;
  padding-top: 16px;
}

@media (max-width: 1320px) {
  #workflowMetrics {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  body[data-active-view="workflow"] .workflow-workspace {
    grid-template-columns: 1fr;
  }

  body[data-active-view="workflow"] .task-detail-panel {
    position: static;
  }
}

@media (max-width: 860px) {
  #workflowMetrics {
    grid-template-columns: 1fr;
  }

  .task-side-comment-form.compact {
    grid-template-columns: 1fr;
  }
}

/* Green Schedule page refresh. */
body[data-active-view="schedule"] .main {
  background: #fbfcfb;
}

body[data-active-view="schedule"] .schedule-shell {
  display: grid;
  gap: 18px;
}

body[data-active-view="schedule"] .schedule-toolbar,
body[data-active-view="schedule"] .data-card,
body[data-active-view="schedule"] .schedule-summary-card {
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  background: white;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
}

body[data-active-view="schedule"] .schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
}

body[data-active-view="schedule"] .schedule-toolbar .kicker {
  display: block;
  color: #344054;
}

body[data-active-view="schedule"] .schedule-toolbar h3 {
  margin: 2px 0;
  color: #071329;
  font-size: 22px;
  font-weight: 900;
}

body[data-active-view="schedule"] .schedule-toolbar p {
  margin: 0;
  color: #475467;
}

body[data-active-view="schedule"] .schedule-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-active-view="schedule"] .date-control {
  width: 150px;
}

body[data-active-view="schedule"] #scheduleModeRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body[data-active-view="schedule"] #scheduleModeTabs {
  margin-inline: auto;
  border: 1px solid #dfe6ee;
  border-radius: 999px;
  background: white;
  padding: 4px;
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab {
  min-width: 170px;
  border-radius: 999px;
  color: #344054;
  padding: 10px 18px;
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab.active {
  background: #edf7ed;
  color: #137a0c;
  box-shadow: inset 0 0 0 1px rgba(19, 122, 12, 0.18);
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab.active::after {
  display: none;
}

.schedule-content-heading {
  margin: 6px 0 0;
}

.schedule-content-heading h3 {
  margin: 0;
  color: #071329;
  font-size: 22px;
  font-weight: 900;
}

.schedule-content-heading p {
  margin: 4px 0 0;
  color: #475467;
}

body[data-active-view="schedule"] #myScheduleSummary {
  display: none;
}

body[data-active-view="schedule"] #scheduleMyPanel .schedule-two-column {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 18px;
  align-items: start;
}

body[data-active-view="schedule"] #upcomingShiftsCard {
  grid-row: span 4;
  min-height: 620px;
}

body[data-active-view="schedule"] .section-heading h3 {
  color: #071329;
  font-size: 18px;
  font-weight: 900;
}

body[data-active-view="schedule"] .section-heading p {
  color: #475467;
}

.my-week-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap: 10px;
}

.my-day-card {
  display: grid;
  gap: 5px;
  min-height: 112px;
  border: 1px solid #e4e9ef;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.my-day-card:hover,
.my-day-card:focus-visible {
  border-color: rgba(19, 122, 12, 0.38);
  background: #f4faf4;
}

.my-day-card.active {
  border-color: rgba(19, 122, 12, 0.35);
  background: #edf7ed;
}

.my-day-card strong,
.my-day-card b {
  color: #111827;
}

.my-day-card small,
.my-day-card em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
}

.selected-day-detail {
  margin-top: 22px;
  border-top: 1px solid #e4e9ef;
  padding-top: 18px;
}

.selected-day-detail h4 {
  margin: 0 0 14px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.selected-shift-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.shift-time-column {
  display: grid;
  justify-items: end;
  color: #344054;
  font-size: 13px;
}

.shift-time-column span {
  width: 1px;
  min-height: 44px;
  background: #dfe6ee;
}

.selected-shift-card {
  display: grid;
  gap: 5px;
  border: 1px solid #d7e8d4;
  border-radius: 12px;
  background: #f3f8ef;
  padding: 16px;
}

.selected-shift-card strong {
  color: #071329;
  font-size: 16px;
}

.selected-shift-card small,
.selected-shift-card em {
  color: #475467;
  font-size: 13px;
  font-style: normal;
}

.selected-shift-card p {
  margin: 4px 0 0;
  color: #475467;
  font-size: 12px;
}

.selected-shift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.compact-shift-row {
  grid-template-columns: 42px minmax(0, 1fr);
}

body[data-active-view="schedule"] .schedule-summary-card {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 12px;
}

body[data-active-view="schedule"] .schedule-summary-card div,
body[data-active-view="schedule"] .schedule-summary-card button {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 88px;
  padding: 18px 20px;
  text-align: left;
}

body[data-active-view="schedule"] .schedule-summary-card i,
body[data-active-view="schedule"] .schedule-summary-card svg {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  border-radius: 10px;
  background: #edf7ed;
  color: #137a0c;
  padding: 9px;
  box-sizing: content-box;
}

body[data-active-view="schedule"] .schedule-summary-card span {
  grid-column: 2;
  color: #667085;
  font-size: 12px;
}

body[data-active-view="schedule"] .schedule-summary-card strong {
  grid-column: 2;
  color: #071329;
  font-size: 24px;
}

body[data-active-view="schedule"] .schedule-summary-card .warning svg {
  background: #fff7ed;
  color: #c2410c;
}

body[data-active-view="schedule"] .schedule-two-column.wide-main {
  grid-template-columns: minmax(0, 1fr);
}

body[data-active-view="schedule"] .schedule-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body[data-active-view="schedule"] .schedule-side .data-card:last-child {
  display: none;
}

body[data-active-view="schedule"] .schedule-grid {
  grid-template-columns: minmax(190px, 1.15fr) repeat(7, minmax(132px, 1fr)) minmax(96px, 0.65fr);
  overflow-x: auto;
  border: 1px solid #e4e9ef;
  border-radius: 10px;
}

body[data-active-view="schedule"] .schedule-grid-header,
body[data-active-view="schedule"] .schedule-employee-cell,
body[data-active-view="schedule"] .schedule-day-cell,
body[data-active-view="schedule"] .schedule-total-cell,
body[data-active-view="schedule"] .schedule-total-label {
  border-color: #e4e9ef;
  background: white;
}

body[data-active-view="schedule"] .schedule-grid-header {
  background: #fbfcfd;
  color: #344054;
  text-transform: uppercase;
}

body[data-active-view="schedule"] .schedule-day-cell {
  min-height: 74px;
}

body[data-active-view="schedule"] .shift-pill {
  display: inline-grid;
  gap: 2px;
  min-width: 84px;
  border: 1px solid #93c5fd;
  border-radius: 7px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 850;
  line-height: 1.15;
  padding: 7px 8px;
  text-align: center;
}

body[data-active-view="schedule"] .shift-pill small {
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.82;
}

body[data-active-view="schedule"] .shift-pill.open,
body[data-active-view="schedule"] .shift-pill.open_for_pickup {
  border-color: #86efac;
  background: #ecfdf3;
  color: #137a0c;
}

body[data-active-view="schedule"] .conflict-badge.needs-off {
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #dc2626;
}

body[data-active-view="schedule"] .conflict-badge.prefer-off {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

body[data-active-view="schedule"] .conflict-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 850;
}

body[data-active-view="schedule"] .schedule-request-row {
  width: 100%;
  border: 1px solid #e4e9ef;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  text-align: left;
}

body[data-active-view="schedule"] button.schedule-request-row {
  cursor: pointer;
}

body[data-active-view="schedule"] button.schedule-request-row:hover {
  border-color: rgba(19, 122, 12, 0.32);
  background: #f8fbf6;
}

body[data-active-view="schedule"] .schedule-row-icon.green,
body[data-active-view="schedule"] .schedule-lower-icon.green {
  background: #edf7ed;
  color: #137a0c;
}

body[data-active-view="schedule"] .schedule-row-icon.amber,
body[data-active-view="schedule"] .schedule-lower-icon.amber {
  background: #fff7ed;
  color: #c2410c;
}

body[data-active-view="schedule"] .schedule-row-icon.red,
body[data-active-view="schedule"] .schedule-lower-icon.red {
  background: #fff1f2;
  color: #dc2626;
}

body[data-active-view="schedule"] .schedule-lower-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  border: 1px solid #e4e9ef;
  padding: 14px;
}

body[data-active-view="schedule"] .request-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 10px 0 0;
}

body[data-active-view="schedule"] .request-meta-grid dt {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-active-view="schedule"] .request-meta-grid dd {
  margin: 2px 0 0;
  color: #344054;
  font-size: 13px;
}

body[data-active-view="schedule"] .schedule-lower-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body[data-active-view="schedule"] .request-type-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 850;
}

body[data-active-view="schedule"] .request-type-badge.drop {
  background: #fff7ed;
  color: #c2410c;
}

body[data-active-view="schedule"] .request-type-badge.pickup {
  background: #edf7ed;
  color: #137a0c;
}

body[data-active-view="schedule"] .legend-badge.cannot-work {
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #dc2626;
}

body[data-active-view="schedule"] .schedule-lower-row {
  border-radius: 10px;
  box-shadow: none;
}

@media (max-width: 1320px) {
  body[data-active-view="schedule"] #scheduleMyPanel .schedule-two-column,
  body[data-active-view="schedule"] .schedule-side {
    grid-template-columns: 1fr;
  }

  body[data-active-view="schedule"] #upcomingShiftsCard {
    grid-row: auto;
  }
}

@media (max-width: 860px) {
  body[data-active-view="schedule"] .schedule-toolbar,
  body[data-active-view="schedule"] #scheduleModeRow,
  body[data-active-view="schedule"] .schedule-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .my-week-row {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    overflow-x: auto;
  }
}

/* Target Tasks page polish. */
body[data-active-view="workflow"] .main {
  background: #f8fafc;
}

body[data-active-view="workflow"] .content {
  padding: 28px 32px 36px;
}

body[data-active-view="workflow"] .topbar {
  align-items: flex-start;
  margin-bottom: 18px;
}

body[data-active-view="workflow"] .topbar h1 {
  font-size: 28px;
  line-height: 1.1;
}

body[data-active-view="workflow"] .topbar p {
  margin-top: 8px;
  color: #475467;
}

body[data-active-view="workflow"] .header-actions {
  align-items: center;
  gap: 12px;
}

body[data-active-view="workflow"] .global-search {
  width: 300px;
  height: 44px;
}

body[data-active-view="workflow"] #headerPrimaryAction {
  min-width: 122px;
  border-color: #137a0c;
  background: #137a0c;
}

body[data-active-view="workflow"] #refreshButton,
body[data-active-view="workflow"] #openMyActivity {
  height: 44px;
}

body[data-active-view="workflow"] .page-header {
  margin-top: 10px;
  padding-right: 18px;
}

body[data-active-view="workflow"] .header-actions {
  gap: 8px;
  transform: translateX(-10px);
}

body[data-active-view="workflow"] .search-box {
  width: min(320px, 28vw);
}

body[data-active-view="workflow"] #workflowMetrics {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

body[data-active-view="workflow"] .task-metric-card {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
}

body[data-active-view="workflow"] .task-metric-icon {
  width: 48px;
  height: 48px;
}

body[data-active-view="workflow"] .task-metric-card strong {
  margin-top: 6px;
  font-size: 28px;
}

body[data-active-view="workflow"] .task-trend {
  margin-top: 10px;
}

body[data-active-view="workflow"] .workflow-workspace {
  display: grid;
  grid-template-columns: minmax(700px, 1fr) minmax(390px, 430px);
  gap: 16px;
  align-items: start;
}

body[data-active-view="workflow"] .workflow-queue,
body[data-active-view="workflow"] .task-detail-panel {
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  background: white;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
}

body[data-active-view="workflow"] .workflow-queue {
  overflow: hidden;
}

body[data-active-view="workflow"] .database-tabs {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid #e4e9ef;
  padding: 0 18px;
}

body[data-active-view="workflow"] .database-tabs button {
  height: 54px;
  border: 0;
  background: transparent;
  color: #101828;
  font-size: 14px;
  font-weight: 850;
}

body[data-active-view="workflow"] .database-tabs button.active {
  color: #137a0c;
}

body[data-active-view="workflow"] .database-tabs button.active::after {
  background: #137a0c;
}

body[data-active-view="workflow"] .database-tabs button span {
  margin-left: 7px;
  border-radius: 999px;
  background: #edf7ed;
  color: #137a0c;
  padding: 2px 7px;
  font-size: 12px;
}

body[data-active-view="workflow"] .section-heading,
body[data-active-view="workflow"] .workflow-table-search,
body[data-active-view="workflow"] .filter-check,
body[data-active-view="workflow"] #workflowStatusTabs,
body[data-active-view="workflow"] .workflow-assignment-filter {
  display: none;
}

body[data-active-view="workflow"] .queue-controls {
  display: block;
  border-bottom: 1px solid #e4e9ef;
  padding: 14px 18px;
}

body[data-active-view="workflow"] .filter-bar {
  display: grid;
  grid-template-columns: 150px 150px 150px auto minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
}

body[data-active-view="workflow"] .filter-select {
  min-width: 0;
}

body[data-active-view="workflow"] .filter-select span {
  display: none;
}

body[data-active-view="workflow"] .filter-select select {
  height: 38px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: white;
  color: #101828;
  font-size: 13px;
  font-weight: 700;
}

body[data-active-view="workflow"] .workflow-clear-filters {
  justify-self: start;
  color: #344054;
  padding: 0;
  font-size: 13px;
}

body[data-active-view="workflow"] .workflow-sort-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

body[data-active-view="workflow"] .workflow-sort-control .soft-link {
  color: #101828;
  font-weight: 850;
  padding: 0;
}

body[data-active-view="workflow"] .workflow-sort-control .icon-button {
  width: 38px;
  height: 38px;
}

body[data-active-view="workflow"] .workflow-queue table {
  min-width: 1000px;
  border-collapse: collapse;
}

body[data-active-view="workflow"] .workflow-queue table th {
  height: 42px;
  background: white;
  color: #475467;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
  padding: 20px;
  text-transform: uppercase;
}

body[data-active-view="workflow"] .workflow-queue table td {
  height: 64px;
  border-bottom: 1px solid #edf1f5;
  color: #101828;
  padding: 10px 14px;
  vertical-align: middle;
}

body[data-active-view="workflow"] .workflow-queue input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #137a0c;
}

body[data-active-view="workflow"] .workflow-queue tbody tr {
  transition: background 0.15s ease;
}

body[data-active-view="workflow"] .workflow-queue tbody tr:hover {
  background: #f8fbf6;
}

body[data-active-view="workflow"] .workflow-queue tbody tr.selected-row {
  outline: 0;
  box-shadow: inset 3px 0 0 #137a0c;
  background: #f3f8ef;
}

body[data-active-view="workflow"] .followup-title-line strong,
body[data-active-view="workflow"] .task-date-cell strong,
body[data-active-view="workflow"] .task-assignment-cell strong {
  color: #101828;
  font-size: 13px;
  font-weight: 850;
}

body[data-active-view="workflow"] .followup-title-cell small,
body[data-active-view="workflow"] td small {
  display: block;
  margin-top: 3px;
  color: #475467;
  font-size: 12px;
}

body[data-active-view="workflow"] .task-assignment-cell,
body[data-active-view="workflow"] .task-location-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-active-view="workflow"] .task-assignment-cell svg,
body[data-active-view="workflow"] .task-location-cell svg {
  width: 16px;
  height: 16px;
  color: #344054;
  flex: 0 0 auto;
}

body[data-active-view="workflow"] .status-badge {
  min-width: 0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

body[data-active-view="workflow"] .row-menu-button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
}

body[data-active-view="workflow"] .task-detail-panel {
  position: static;
  display: block;
  min-height: 0;
  overflow: visible;
  padding: 24px;
}

body[data-active-view="workflow"] .task-detail-top {
  margin-bottom: 16px;
}

body[data-active-view="workflow"] .task-status-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: white;
  padding: 4px 8px;
}

body[data-active-view="workflow"] .task-status-dropdown svg {
  width: 14px;
  height: 14px;
  color: #475467;
}

body[data-active-view="workflow"] .detail-panel-header {
  border-bottom: 1px solid #e4e9ef;
  padding-bottom: 18px;
}

body[data-active-view="workflow"] .detail-panel-header h3 {
  font-size: 20px;
  line-height: 1.25;
}

body[data-active-view="workflow"] .detail-field-list {
  grid-template-columns: 1fr;
  gap: 14px;
  border-bottom: 1px solid #e4e9ef;
  padding: 18px 0;
}

body[data-active-view="workflow"] .detail-field-list div {
  grid-template-columns: 128px minmax(0, 1fr);
}

body[data-active-view="workflow"] .detail-field-list span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

body[data-active-view="workflow"] .detail-field-list strong {
  color: #101828;
  font-size: 13px;
  font-weight: 800;
}

body[data-active-view="workflow"] .detail-field-list strong small {
  display: block;
  margin-top: 3px;
  color: #475467;
  font-weight: 600;
}

body[data-active-view="workflow"] .detail-section {
  border-bottom: 1px solid #e4e9ef;
  padding: 16px 0;
}

body[data-active-view="workflow"] .detail-section h4 {
  margin-bottom: 10px;
  color: #101828;
  font-size: 14px;
  font-weight: 900;
}

body[data-active-view="workflow"] .detail-section p {
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
}

body[data-active-view="workflow"] .task-side-comment-form.compact {
  grid-template-columns: minmax(0, 1fr) 40px;
}

body[data-active-view="workflow"] .task-side-comment-form.compact textarea {
  min-height: 40px;
  resize: vertical;
}

body[data-active-view="workflow"] .task-side-comment-form.compact .button {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 36px;
  padding-inline: 16px;
}

body[data-active-view="workflow"] .task-comment-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
}

body[data-active-view="workflow"] .comment-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #475467;
  font-size: 12px;
}

body[data-active-view="workflow"] .comment-meta strong {
  color: #101828;
}

body[data-active-view="workflow"] .task-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body[data-active-view="workflow"] .task-photo-card img {
  height: 78px;
}

body[data-active-view="workflow"] .task-action-bar {
  position: static;
  margin-top: 0;
}

@media (max-width: 1320px) {
  body[data-active-view="workflow"] #workflowMetrics {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  body[data-active-view="workflow"] .workflow-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body[data-active-view="workflow"] #workflowMetrics,
  body[data-active-view="workflow"] .filter-bar {
    grid-template-columns: 1fr;
  }

  body[data-active-view="workflow"] .global-search {
    width: 100%;
  }
}

/* Tasks target fallback when the body data attribute has not synced yet. */
#workflowView.active #workflowStatusTabs,
#workflowView.active .workflow-assignment-filter,
#workflowView.active .workflow-table-search,
#workflowView.active .filter-check,
#workflowView.active .section-heading {
  display: none !important;
}

#workflowView.active .workflow-workspace {
  display: grid;
  grid-template-columns: minmax(700px, 1fr) minmax(390px, 430px);
  gap: 16px;
  align-items: start;
}

#workflowView.active .workflow-queue,
#workflowView.active .task-detail-panel {
  border: 1px solid #dfe6ee;
  border-radius: 0px;
  background: white;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
}

#workflowView.active .queue-controls {
  display: block;
  border-bottom: 1px solid #e4e9ef;
  padding: 12px 18px;
}

#workflowView.active .task-tabs-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  border-bottom: 1px solid #e4e9ef;
  padding: 0 18px;
}

#workflowView.active .task-tabs-header .database-tabs {
  border-bottom: 0;
  padding: 0;
}

#workflowView.active .task-tabs-header .task-view-toggle {
  align-self: center;
}

#workflowView.active .filter-bar {
  display: grid;
  grid-template-columns: 150px 150px 150px auto minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
}

#workflowView.active .filter-select span {
  display: none;
}

#workflowView.active .filter-select select {
  height: 38px;
  border: 1px solid #d7dee8;
  border-radius: 0px;
  background: white;
  color: #101828;
  font-size: 13px;
  font-weight: 700;
}

#workflowView.active .workflow-queue tbody tr.selected-row {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: inset 3px 0 0 #137a0c !important;
  background: #f3f8ef !important;
}

#workflowView.active .task-detail-panel {
  position: static !important;
  min-height: 0;
  overflow: visible;
}

#workflowView.active .task-action-bar {
  position: static !important;
  bottom: auto !important;
}

.workflow-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #edf1f5;
  padding: 14px 18px;
  color: #475467;
  font-size: 13px;
}

.workflow-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workflow-pagination .icon-button {
  width: 32px;
  height: 32px;
}

.page-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #101828;
  font-weight: 800;
}

.page-button.active {
  border: 1px solid #137a0c;
  background: white;
  color: #137a0c;
}

#workflowView.active .workflow-table-footer .soft-link {
  color: #101828;
  font-weight: 800;
}

@media (max-width: 1320px) {
  #workflowView.active .workflow-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  #workflowView.active .filter-bar {
    grid-template-columns: 1fr;
  }

  .workflow-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Employee-focused Dashboard redesign. */
.app-frame {
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  background:
    radial-gradient(circle at 54% 6%, rgba(22, 138, 53, 0.28), transparent 34%),
    linear-gradient(180deg, #065f2e 0%, #064e2e 48%, #053f27 100%);
}

body[data-active-view="dashboard"] .main {
  background: #f8fafc;
  padding: 0;
}

body[data-active-view="dashboard"] .page-header {
  display: none;
}

#dashboardView.employee-dashboard {
  display: grid;
  gap: 22px;
  padding: 32px;
}

#dashboardView.employee-dashboard:not(.active) {
  display: none;
}

.employee-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.employee-dashboard-top h2 {
  margin: 0;
  color: #111827;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.employee-dashboard-top p {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 15px;
}

.employee-dashboard-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.employee-dashboard-actions .button,
.employee-dashboard-actions .icon-button {
  height: 42px;
  border-radius: 10px;
}

.employee-header-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: #eaf8ee;
  color: #128a2e;
  font-size: 13px;
  font-weight: 900;
}

.employee-notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #16a34a;
}

.employee-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(330px, 1.25fr) repeat(3, minmax(220px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.employee-card {
  position: relative;
  min-height: 210px;
  border: 1px solid #dde7e2;
  border-radius: 14px;
  background: white;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
  overflow: hidden;
}

.employee-card-accent {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: #168a35;
}

.employee-card-header,
.employee-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.employee-card-header {
  justify-content: flex-start;
}

.employee-card h3,
.employee-card-title h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

.employee-card-header p,
.employee-card p,
.employee-muted {
  color: #64748b;
}

.employee-icon-box {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  background: #eaf8ee;
  color: #128a2e;
  flex: 0 0 auto;
}

.employee-icon-box.small {
  width: 36px;
  height: 36px;
}

.employee-shift-time {
  display: block;
  margin-top: 24px;
  color: #111827;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.employee-shift-location {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px 8px;
  margin-top: 14px;
  color: #111827;
  font-weight: 800;
}

.employee-shift-location svg {
  width: 17px;
  height: 17px;
  color: #128a2e;
}

.employee-shift-location small {
  grid-column: 2;
  color: #64748b;
  font-weight: 700;
}

.employee-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.employee-chip-row span {
  border-radius: 999px;
  background: #eaf8ee;
  color: #128a2e;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 850;
}

.employee-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #128a2e;
  padding: 0;
  font-size: 13px;
  font-weight: 900;
}

.employee-card-link svg {
  width: 16px;
  height: 16px;
}

.employee-next-shift .employee-card-link {
  margin-top: 20px;
}

.progress-ring {
  --progress: 0;
  display: grid;
  width: 124px;
  height: 124px;
  place-items: center;
  margin: 22px auto 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle, white 58%, transparent 59%),
    conic-gradient(#168a35 calc(var(--progress) * 1%), #e2e8f0 0);
}

.progress-ring span,
.progress-ring small {
  grid-area: 1 / 1;
  display: block;
  text-align: center;
}

.progress-ring span {
  transform: translateY(-8px);
  color: #111827;
  font-size: 28px;
  font-weight: 900;
}

.progress-ring small {
  transform: translateY(18px);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.employee-trend {
  color: #168a35;
  font-size: 13px;
  font-weight: 850;
}

.progress-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.progress-stat-grid div {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}

.progress-stat-grid span,
.progress-stat-grid small {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.progress-stat-grid strong {
  display: block;
  margin-top: 6px;
  color: #111827;
  font-size: 25px;
  font-weight: 900;
}

.progress-stat-grid small {
  color: #168a35;
}

.progress-sparkline {
  width: 100%;
  height: 88px;
  margin-top: 16px;
}

.employee-leader-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.employee-leader-row {
  display: grid;
  grid-template-columns: 24px 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 10px;
  padding: 8px;
}

.employee-leader-row.current,
.employee-leader-row:hover {
  background: #eaf8ee;
}

.employee-leader-row b {
  color: #128a2e;
}

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

.employee-leader-row small {
  color: #64748b;
}

.employee-tasks-card {
  grid-column: span 3;
  min-height: 360px;
}

.employee-announcements-card {
  min-height: 360px;
}

.employee-task-table {
  display: grid;
  margin-top: 18px;
}

.employee-task-head,
.employee-task-row {
  display: grid;
  grid-template-columns: 90px minmax(180px, 1fr) 150px 150px 115px;
  gap: 12px;
  align-items: center;
}

.employee-task-head {
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  padding: 0 0 10px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.employee-task-row {
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  background: transparent;
  color: #111827;
  padding: 10px 0;
  text-align: left;
}

.employee-task-row:hover {
  background: #f8fcf8;
}

.employee-task-row strong {
  font-weight: 900;
}

.employee-card-footer-note {
  margin: 14px 0 0;
  color: #64748b;
  font-size: 13px;
}

.employee-training-card,
.employee-hours-card,
.employee-shift-notes-card {
  min-height: 260px;
}

.training-feature {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 88px;
  gap: 16px;
  align-items: center;
  margin-top: 22px;
}

.training-date {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf8ee;
  color: #128a2e;
  padding: 10px;
}

.training-date span {
  font-size: 12px;
  font-weight: 900;
}

.training-date strong {
  color: #111827;
  font-size: 28px;
}

.training-feature h4 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 16px;
}

.training-feature p,
.training-feature small {
  color: #64748b;
}

.training-progress strong,
.training-progress span {
  display: block;
  text-align: right;
}

.training-progress strong {
  color: #168a35;
  font-size: 22px;
}

.training-progress i {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #168a35 10%, #e2e8f0 10%);
}

.hours-value {
  display: block;
  margin-top: 20px;
  color: #111827;
  font-size: 42px;
  font-weight: 900;
}

.hours-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  height: 88px;
  margin-top: 22px;
}

.hours-bars span {
  display: grid;
  align-items: end;
  justify-items: center;
  height: 100%;
  gap: 6px;
}

.hours-bars i {
  display: block;
  width: 12px;
  min-height: 8px;
  border-radius: 999px 999px 0 0;
  background: #168a35;
}

.hours-bars small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.employee-wip-list .empty-state {
  min-height: 190px;
}

.empty-dashboard-copy {
  display: grid;
  gap: 6px;
  margin-top: 24px;
}

.empty-dashboard-copy strong {
  color: #111827;
  font-size: 22px;
}

.empty-dashboard-copy span {
  color: #64748b;
}

.employee-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #64748b;
  font-size: 13px;
}

.employee-dashboard-footer span:last-child {
  display: flex;
  gap: 18px;
}

@media (max-width: 1340px) {
  .employee-dashboard-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .employee-tasks-card {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  #dashboardView.employee-dashboard {
    padding: 18px;
  }

  .employee-dashboard-top,
  .employee-dashboard-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .employee-dashboard-grid,
  .employee-tasks-card {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .employee-task-head {
    display: none;
  }

  .employee-task-row {
    grid-template-columns: 1fr;
  }

  .training-feature {
    grid-template-columns: 1fr;
  }
}

/* Tasks checkbox and metric-card cleanup. */
body[data-active-view="workflow"] .task-metric-card {
  align-items: center;
}

body[data-active-view="workflow"] .task-metric-icon,
#workflowView.active .task-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: start;
  line-height: 0;
}

body[data-active-view="workflow"] .task-metric-icon svg,
#workflowView.active .task-metric-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  margin: 0;
  stroke-width: 2.4;
}

body[data-active-view="workflow"] .workflow-queue th:first-child,
body[data-active-view="workflow"] .workflow-queue td:first-child,
#workflowView.active .workflow-queue th:first-child,
#workflowView.active .workflow-queue td:first-child {
  width: 48px;
  min-width: 48px;
  padding-inline: 12px;
  text-align: center;
}

body[data-active-view="workflow"] .workflow-queue th:first-child input,
body[data-active-view="workflow"] .workflow-queue td:first-child input,
#workflowView.active .workflow-queue th:first-child input,
#workflowView.active .workflow-queue td:first-child input {
  display: block;
  margin: 0 auto;
}

body[data-active-view="workflow"] .workflow-queue .workflow-task-empty-row .task-empty-state-full,
#workflowView.active .workflow-queue .workflow-task-empty-row .task-empty-state-full {
  display: flex;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: 40px 20px;
  text-align: center;
}

.workflow-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #dbe8d8;
  background: #f3f8ef;
  padding: 10px 14px;
}

.workflow-bulk-actions span {
  color: #344054;
  font-size: 13px;
}

.workflow-bulk-actions span strong {
  color: #137a0c;
  font-weight: 900;
}

.workflow-bulk-actions .button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
}

.workflow-bulk-actions .button.success-outline {
  border-color: rgba(19, 122, 12, 0.32);
  background: white;
  color: #137a0c;
}

.workflow-bulk-actions .button.success-outline:hover {
  background: #137a0c;
  color: white;
}

.workflow-bulk-actions .button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .workflow-bulk-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* OneSpotOps green visual system refresh. */
:root {
  --bg: #f7faf8;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #dde7e2;
  --line-strong: #cbdcd2;
  --blue: #2563eb;
  --blue-soft: #eff6ff;
  --green: #128a2e;
  --green-soft: #eaf8ee;
  --orange: #f59e0b;
  --orange-soft: #fff7ed;
  --red: #ef4444;
  --red-soft: #fef2f2;
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.055);
  --radius: 10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background: #f7faf8;
  color: #0f172a;
  font-size: 13px;
}

.app-frame {
  grid-template-columns: 226px minmax(0, 1fr);
}

.app-frame,
body[data-active-view] .app-frame {
  grid-template-columns: 226px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed,
body[data-active-view] .app-frame.sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}

.sidebar {
  gap: 13px;
  border-right: 0;
  background:
    radial-gradient(circle at 52% 9%, rgba(35, 170, 60, 0.28), transparent 38%),
    linear-gradient(180deg, #047124 0%, #06622c 42%, #064e2e 100%);
  padding: 18px 12px;
  color: white;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.brand-row {
  gap: 10px;
  padding: 0 8px 12px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-row h1 {
  color: white;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.flow-line {
  height: 4px;
  background: white;
}

.flow-dot {
  width: 7px;
  height: 7px;
  background: white;
}

.flow-dot.start {
  border-color: white;
  background: transparent;
}

.profile-card {
  min-height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  padding: 12px;
  color: white;
}

.profile-card:hover {
  background: rgba(255, 255, 255, 0.17);
}

.profile-avatar {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 11px;
  font-weight: 900;
}

.profile-card strong,
.profile-card span {
  color: white;
}

.profile-card strong {
  font-size: 13px;
  font-weight: 900;
}

.profile-card span {
  opacity: 0.9;
  font-size: 11px;
  line-height: 1.35;
}

.nav-tabs {
  gap: 4px;
}

.nav-tab {
  min-height: 39px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.92);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

.nav-tab svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.3;
}

.nav-tab:hover,
.nav-tab.active {
  background: rgba(255, 255, 255, 0.18);
  color: white;
}

.sidebar-footer {
  gap: 10px;
}

.help-card {
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
}

.help-card,
.help-card strong,
.help-card small {
  color: white;
}

.help-card small {
  opacity: 0.86;
}

.collapse-button {
  min-height: 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 13px;
  font-weight: 850;
}

.main,
.workspace {
  background: #f7faf8;
}

.button,
.icon-button,
.soft-select,
select,
input,
textarea {
  border-color: #d8e3dd;
  border-radius: 8px;
}

.button {
  min-height: 36px;
  font-size: 12px;
  font-weight: 800;
}

.button.primary,
.button.success,
#headerPrimaryAction {
  border-color: #128a2e;
  background: #128a2e;
  color: white;
}

.button.primary:hover,
.button.success:hover,
#headerPrimaryAction:hover {
  background: #0f7627;
}

.card,
.data-card,
.database-card,
.workflow-queue,
.task-detail-panel,
.employee-card {
  border: 1px solid #dde7e2;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

table th {
  color: #475569;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

table td {
  color: #0f172a;
  font-size: 12px;
}

.status-badge,
.pill,
.metric-badge {
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 850;
}

body[data-active-view="dashboard"] .main {
  background: #f7faf8;
}

#dashboardView.employee-dashboard {
  gap: 16px;
  min-height: 100vh;
  padding: 22px 26px;
}

.employee-dashboard-top {
  min-height: 48px;
}

.employee-dashboard-top h2 {
  color: #0f172a;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.employee-dashboard-top p {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.employee-dashboard-actions {
  gap: 9px;
}

.employee-dashboard-actions .button,
.employee-dashboard-actions .icon-button {
  height: 38px;
  border-radius: 8px;
  background: white;
}

.employee-header-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid #cfe4d5;
  background: #eaf8ee;
  color: #128a2e;
  font-size: 12px;
}

.employee-dashboard-grid {
  grid-template-columns: minmax(320px, 1.34fr) minmax(210px, 0.84fr) minmax(280px, 1fr) minmax(260px, 0.94fr);
  gap: 14px;
}

.employee-card {
  min-height: 168px;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 9px rgba(15, 23, 42, 0.045);
}

.employee-card h3,
.employee-card-title h3 {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.018em;
}

.employee-card p,
.employee-muted {
  font-size: 12px;
}

.employee-card-accent {
  height: 3px;
}

.employee-card-header {
  align-items: flex-start;
}

.employee-card-header > div {
  min-width: 0;
}

.employee-card-header h3,
.employee-card-header p {
  margin: 0;
}

.employee-icon-box {
  width: 40px;
  height: 40px;
  border: 1px solid #d6eadb;
  border-radius: 8px;
}

.employee-icon-box svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.employee-icon-box.small {
  width: 33px;
  height: 33px;
}

.employee-status-pill {
  margin-left: auto;
  border-radius: 999px;
  background: #eaf8ee;
  color: #128a2e;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 850;
}

.employee-shift-time {
  margin-top: 18px;
  font-size: 25px;
}

.employee-shift-location {
  margin-top: 11px;
  font-size: 12px;
}

.employee-chip-row {
  margin-top: 12px;
}

.employee-chip-row span {
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
}

.employee-card-link {
  color: #0f7e27;
  font-size: 12px;
}

.employee-next-shift .employee-card-link {
  margin-top: 14px;
}

.progress-ring {
  position: relative;
  display: block;
  width: 106px;
  height: 106px;
  margin: 12px auto 10px;
  border-radius: 999px;
  background: transparent;
}

.progress-ring svg {
  width: 106px;
  height: 106px;
  transform: rotate(-90deg);
}

.progress-ring-track,
.progress-ring-value {
  fill: none;
  stroke-width: 12;
}

.progress-ring-track {
  stroke: #e7eee9;
}

.progress-ring-value {
  stroke: url(#taskCompletionGradient);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}

.progress-ring span,
.progress-ring small {
  position: absolute;
  left: 50%;
  display: block;
  width: 80px;
  text-align: center;
  transform: translateX(-50%);
}

.progress-ring span {
  top: 35px;
  color: #0f172a;
  font-size: 23px;
  font-weight: 900;
}

.progress-ring small {
  top: 60px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.employee-trend {
  margin: 6px 0 12px;
  color: #128a2e;
  font-size: 11px;
  font-weight: 850;
}

.progress-stat-grid {
  gap: 12px;
  margin-top: 13px;
}

.progress-stat-grid div {
  padding-bottom: 8px;
}

.progress-stat-grid span,
.progress-stat-grid small {
  font-size: 10px;
}

.progress-stat-grid strong {
  margin-top: 4px;
  font-size: 20px;
}

.progress-sparkline {
  width: 100%;
  height: 118px;
  margin-top: 8px;
}

.spark-grid line {
  stroke: #e5eee8;
  stroke-width: 1;
}

.spark-grid text,
.spark-labels text {
  fill: #94a3b8;
  font-size: 8px;
  font-weight: 700;
}

.employee-leader-list {
  gap: 5px;
  margin-top: 10px;
}

.employee-leader-row {
  grid-template-columns: 22px 30px minmax(0, 1fr);
  border-radius: 8px;
  padding: 7px;
}

.employee-leader-row b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #eaf8ee;
  color: #128a2e;
  font-size: 11px;
}

.avatar-mini {
  width: 29px;
  height: 29px;
  font-size: 10px;
}

.employee-leader-row strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.employee-leader-row small {
  font-size: 11px;
  font-weight: 700;
}

.employee-tasks-card {
  grid-column: span 3;
  min-height: 314px;
}

.employee-announcements-card {
  min-height: 314px;
}

.employee-task-table {
  margin-top: 12px;
}

.employee-task-head,
.employee-task-row {
  grid-template-columns: 82px minmax(170px, 1fr) 128px 112px 96px;
  gap: 10px;
}

.employee-task-head {
  padding-bottom: 8px;
  font-size: 10px;
}

.employee-task-row {
  min-height: 44px;
  padding: 8px 0;
  font-size: 12px;
}

.employee-task-row strong {
  font-size: 12px;
}

.employee-card-footer-note {
  margin-top: 10px;
  font-size: 11px;
}

.employee-announcement-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.employee-announcement-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  border-bottom: 1px solid #edf3ef;
  padding-bottom: 10px;
}

.employee-announcement-row:last-child {
  border-bottom: 0;
}

.employee-announcement-row strong,
.shift-note-card span {
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.employee-announcement-row p,
.shift-note-card p {
  margin: 3px 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.employee-announcement-row small,
.shift-note-card small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.employee-training-card,
.employee-hours-card,
.employee-shift-notes-card {
  min-height: 204px;
}

.training-feature {
  grid-template-columns: 56px minmax(0, 1fr) 76px;
  gap: 12px;
  margin-top: 16px;
}

.training-date {
  border-radius: 8px;
  padding: 8px;
}

.training-date span {
  font-size: 10px;
}

.training-date strong {
  font-size: 23px;
}

.training-feature h4 {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 850;
}

.training-feature p,
.training-feature small {
  font-size: 11px;
  line-height: 1.45;
}

.training-progress strong {
  font-size: 18px;
}

.training-progress span {
  font-size: 10px;
}

.hours-value {
  margin-top: 10px;
  font-size: 34px;
}

.hours-bars {
  height: 70px;
  margin-top: 14px;
}

.hours-bars i {
  width: 10px;
}

.shift-note-card {
  margin-top: 18px;
  border-left: 3px solid #128a2e;
  background: #f8fcf8;
  padding: 12px 14px;
}

.employee-dashboard-footer {
  color: #64748b;
  font-size: 11px;
}

@media (max-width: 1380px) {
  .employee-dashboard-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .employee-tasks-card {
    grid-column: span 2;
  }
}

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

  .sidebar {
    position: relative;
    height: auto;
  }

  .employee-dashboard-grid,
  .employee-tasks-card {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}

/* Tasks reference precision pass. */
body[data-active-view="workflow"] {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-active-view="workflow"] .main {
  background: #f7faf8;
  padding: 32px 30px 36px 42px;
}

body[data-active-view="workflow"] .workspace {
  gap: 24px;
}

body[data-active-view="workflow"] .page-header {
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 28px;
  padding-right: 0;
}

body[data-active-view="workflow"] .page-header h2 {
  color: #0f172a;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

body[data-active-view="workflow"] .page-subtitle {
  margin-top: 10px;
  color: #64748b;
  font-size: 15px;
}

body[data-active-view="workflow"] .header-actions {
  gap: 10px;
  transform: none;
}

body[data-active-view="workflow"] .search-box {
  width: min(390px, 31vw);
  height: 44px;
  border-color: #dde7e2;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

body[data-active-view="workflow"] .button.subtle,
body[data-active-view="workflow"] .icon-button {
  border-color: #dde7e2;
  background: white;
  color: #0f172a;
}

body[data-active-view="workflow"] #openMyActivity,
body[data-active-view="workflow"] #refreshButton,
body[data-active-view="workflow"] #headerPrimaryAction,
body[data-active-view="workflow"] .notification-button {
  height: 44px;
  border-radius: 0px;
}

body[data-active-view="workflow"] #headerPrimaryAction {
  min-width: 132px;
  border-color: #087a1e;
  background: linear-gradient(180deg, #0a8a24 0%, #06731c 100%);
  box-shadow: 0 10px 18px rgba(8, 122, 30, 0.22);
  color: white;
  font-weight: 850;
}

body[data-active-view="workflow"] #headerPrimaryAction:hover {
  border-color: #066a1a;
  background: linear-gradient(180deg, #087a1e 0%, #066a1a 100%);
}

body[data-active-view="workflow"] #workflowMetrics {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 0;
}

body[data-active-view="workflow"] .task-metric-card {
  min-height: 124px;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border-color: #dde7e2;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

body[data-active-view="workflow"] .task-metric-icon {
  width: 50px;
  height: 50px;
  border-radius: 11px;
}

body[data-active-view="workflow"] .task-metric-icon svg {
  width: 22px;
  height: 22px;
}

body[data-active-view="workflow"] .task-metric-card span:not(.task-metric-icon) {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

body[data-active-view="workflow"] .task-metric-card strong {
  margin-top: 6px;
  color: #0f172a;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

body[data-active-view="workflow"] .task-trend {
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
}

body[data-active-view="workflow"] .workflow-workspace {
  grid-template-columns: minmax(760px, 1fr) minmax(360px, 410px);
  gap: 18px;
  align-items: start;
}

body[data-active-view="workflow"] .workflow-queue,
body[data-active-view="workflow"] .task-detail-panel {
  border-color: #dde7e2;
  border-radius: 12px;
  background: white;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.045);
}

body[data-active-view="workflow"] .database-tabs {
  height: 64px;
  gap: 28px;
  border-bottom-color: #e1e8e4;
  padding: 0 28px;
}

body[data-active-view="workflow"] .task-tabs-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  border-bottom: 1px solid #e1e8e4;
  padding: 0 28px;
}

body[data-active-view="workflow"] .task-tabs-header .database-tabs {
  border-bottom: 0;
  padding: 0;
}

body[data-active-view="workflow"] .task-tabs-header .task-view-toggle {
  align-self: center;
}

body[data-active-view="workflow"] .database-tabs button {
  height: 64px;
  color: #334155;
  font-size: 14px;
  font-weight: 850;
}

body[data-active-view="workflow"] .database-tabs button.active {
  color: #087a1e;
}

body[data-active-view="workflow"] .database-tabs button.active::after {
  height: 2px;
  background: #087a1e;
}

body[data-active-view="workflow"] .database-tabs button span {
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="workflow"] .queue-controls {
  border-bottom-color: #e1e8e4;
  padding: 16px 28px;
}

body[data-active-view="workflow"] .workflow-assignment-filter {
  display: block !important;
}

body[data-active-view="workflow"] .filter-bar {
  grid-template-columns: 150px 150px 150px 170px auto minmax(220px, 1fr);
  gap: 12px;
}

body[data-active-view="workflow"] .filter-select select {
  height: 40px;
  border-color: #dde7e2;
  border-radius: 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
}

body[data-active-view="workflow"] .workflow-clear-filters {
  min-height: 40px;
  color: #334155;
  font-weight: 800;
}

body[data-active-view="workflow"] .workflow-sort-control {
  color: #64748b;
  font-size: 13px;
}

body[data-active-view="workflow"] .workflow-queue table {
  min-width: 1080px;
}

body[data-active-view="workflow"] .workflow-queue table th {
  height: 52px;
  border-bottom: 1px solid #e1e8e4;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.045em;
}

body[data-active-view="workflow"] .workflow-queue table td {
  height: 72px;
  border-bottom-color: #edf2ef;
  color: #0f172a;
  font-size: 13px;
}

body[data-active-view="workflow"] .workflow-queue tbody tr.selected-row {
  background: #f1faef !important;
  box-shadow: inset 3px 0 0 #16a34a !important;
}

body[data-active-view="workflow"] .followup-title-line strong,
body[data-active-view="workflow"] .task-date-cell strong,
body[data-active-view="workflow"] .task-assignment-cell strong {
  font-size: 14px;
  font-weight: 900;
}

body[data-active-view="workflow"] .status-badge {
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
}

body[data-active-view="workflow"] .task-detail-panel {
  padding: 24px;
}

body[data-active-view="workflow"] .task-detail-shell-header {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 18px;
}

body[data-active-view="workflow"] .task-detail-number {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

body[data-active-view="workflow"] .detail-panel-header {
  border-bottom: 1px solid #e1e8e4;
  padding-bottom: 22px;
}

body[data-active-view="workflow"] .detail-panel-header h3 {
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}

body[data-active-view="workflow"] .detail-panel-header p {
  margin-top: 10px;
  color: #64748b;
  font-size: 14px;
}

body[data-active-view="workflow"] .detail-field-list {
  gap: 16px;
  border-bottom-color: #e1e8e4;
  padding: 22px 0;
}

body[data-active-view="workflow"] .detail-field-list div {
  grid-template-columns: 122px minmax(0, 1fr);
}

body[data-active-view="workflow"] .detail-field-list span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="workflow"] .detail-field-list strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

body[data-active-view="workflow"] .detail-section {
  border-bottom-color: #e1e8e4;
  padding: 18px 0;
}

body[data-active-view="workflow"] .task-side-comment-form.compact {
  grid-template-columns: 34px minmax(0, 1fr) 38px 38px;
  align-items: center;
}

body[data-active-view="workflow"] .task-side-comment-form.compact::before {
  content: attr(data-user-initials);
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #087a1e;
  color: white;
  font-size: 11px;
  font-weight: 900;
}

body[data-active-view="workflow"] .task-side-comment-form.compact textarea {
  min-height: 44px;
  border-radius: 0px;
}

body[data-active-view="workflow"] .task-side-comment-form.compact .button {
  grid-column: auto;
  justify-self: stretch;
  min-height: 38px;
  padding-inline: 12px;
}

body[data-active-view="workflow"] .task-photo-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-active-view="workflow"] .task-photo-card img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 8px;
}

/* Final task polish overrides: keep these last so workflow table alignment wins. */
body[data-active-view="workflow"] .workflow-queue table {
  display: block;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
}

body[data-active-view="workflow"] .workflow-queue thead,
body[data-active-view="workflow"] .workflow-queue tbody {
  display: block;
}

body[data-active-view="workflow"] .workflow-task-grid-row {
  display: grid;
  grid-template-columns: 40px minmax(220px, 1.6fr) minmax(220px, 1.4fr) minmax(140px, 1fr) minmax(130px, 0.9fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) minmax(140px, 0.9fr) 56px;
  align-items: center;
  width: 100%;
}

body[data-active-view="workflow"] .workflow-task-grid-row th,
body[data-active-view="workflow"] .workflow-task-grid-row td {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 12px 10px;
  text-align: left;
}

body[data-active-view="workflow"] .task-assignment-cell,
body[data-active-view="workflow"] .task-location-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body[data-active-view="workflow"] .task-assignment-cell span,
body[data-active-view="workflow"] .task-date-cell,
body[data-active-view="workflow"] .followup-title-line {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-active-view="workflow"] .followup-title-line strong,
body[data-active-view="workflow"] .task-assignment-cell strong,
body[data-active-view="workflow"] .task-location-cell,
body[data-active-view="workflow"] .task-date-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-shell-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.task-detail-control-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.task-status-menu-wrap {
  position: relative;
  z-index: 4;
}

.task-status-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 160px;
  border: 1px solid #d8e3dd;
  border-radius: 8px;
  background: white;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  padding: 6px;
}

/* Final Tasks precision layout: detail panel starts beside KPI cards. */
body[data-active-view="workflow"] #workflowView.active {
  position: relative;
  display: block;
}

body[data-active-view="workflow"] #workflowMetrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  width: calc(100% - 408px);
  margin-bottom: 18px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-workspace {
  display: block;
  width: calc(100% - 408px);
}

body[data-active-view="workflow"] #workflowView.active .workflow-queue {
  width: 100%;
  min-width: 0;
}

body[data-active-view="workflow"] #workflowView.active .workflow-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 390px;
}

body[data-active-view="workflow"] .task-metric-card,
body[data-active-view="workflow"] .workflow-queue,
body[data-active-view="workflow"] #workflowView.active .task-detail-panel {
  border-radius: 8px;
}

body[data-active-view="workflow"] .button,
body[data-active-view="workflow"] .icon-button,
body[data-active-view="workflow"] .search-box,
body[data-active-view="workflow"] .filter-select select,
body[data-active-view="workflow"] .page-button,
body[data-active-view="workflow"] .task-status-menu,
body[data-active-view="workflow"] .task-side-comment-form textarea,
body[data-active-view="workflow"] .task-photo-card,
body[data-active-view="workflow"] .task-photo-card img {
  border-radius: 0px;
}

body[data-active-view="workflow"] #workflowView.active .task-detail-panel {
  position: relative;
  min-height: 720px;
  border: 1px solid #dfe7e2;
  border-radius: 0px;
  background:
    radial-gradient(circle at top right, rgba(18, 138, 46, 0.1), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #f8fbf8 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  padding: 20px 24px 22px;
}

body[data-active-view="workflow"] #workflowView.active .task-detail-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #0a7f24, #18a23b);
}

body[data-active-view="workflow"] #workflowView.active .task-metric-card {
  min-height: 112px;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  border-color: #dfe7e2;
  border-radius: 0px;
  padding: 20px 18px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

body[data-active-view="workflow"] #workflowView.active .task-metric-icon {
  width: 42px;
  height: 42px;
  border-radius: 0px;
}

body[data-active-view="workflow"] #workflowView.active .task-metric-icon svg {
  width: 24px;
  height: 24px;
}

body[data-active-view="workflow"] #workflowView.active .task-metric-card strong {
  font-size: 28px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-queue table {
  min-width: 1000px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-task-grid-row {
  grid-template-columns: 40px minmax(180px, 1.35fr) minmax(190px, 1.25fr) minmax(120px, 0.85fr) minmax(130px, 0.9fr) minmax(88px, 0.65fr) minmax(92px, 0.7fr) minmax(140px, 0.95fr);
}

body[data-active-view="workflow"] #workflowView.active .database-tabs {
  gap: 34px;
}

body[data-active-view="workflow"] #workflowView.active .workflow-pagination {
  gap: 14px;
}

body[data-active-view="workflow"] #workflowView.active .pagination-ellipsis {
  color: #64748b;
  font-weight: 850;
}

body[data-active-view="workflow"] .status-badge,
body[data-active-view="workflow"] .task-status-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  gap: 6px;
  border-radius: 0px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

body[data-active-view="workflow"] .status-badge.success,
body[data-active-view="workflow"] .status-badge.active,
body[data-active-view="workflow"] .task-status-dropdown.success,
body[data-active-view="workflow"] .task-status-dropdown.active {
  border: 1px solid #9be7af;
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="workflow"] .status-badge.info,
body[data-active-view="workflow"] .status-badge.normal,
body[data-active-view="workflow"] .task-status-dropdown.info,
body[data-active-view="workflow"] .task-status-dropdown.normal {
  border: 1px solid #afcbff;
  background: #eaf2ff;
  color: #2563eb;
}

body[data-active-view="workflow"] .status-badge.indigo,
body[data-active-view="workflow"] .task-status-dropdown.indigo {
  border: 1px solid #afcbff;
  background: #eaf2ff;
  color: #2563eb;
}

body[data-active-view="workflow"] .status-badge.warning,
body[data-active-view="workflow"] .task-status-dropdown.warning {
  border: 1px solid #ffb5b5;
  background: #ffe8e8;
  color: #dc2626;
}

body[data-active-view="workflow"] .status-badge.danger,
body[data-active-view="workflow"] .status-badge.critical,
body[data-active-view="workflow"] .task-status-dropdown.danger,
body[data-active-view="workflow"] .task-status-dropdown.critical {
  border: 1px solid #fca5a5;
  background: #fee2e2;
  color: #b91c1c;
}

body[data-active-view="workflow"] .status-badge.low,
body[data-active-view="workflow"] .status-badge.neutral,
body[data-active-view="workflow"] .task-status-dropdown.low,
body[data-active-view="workflow"] .task-status-dropdown.neutral {
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

body[data-active-view="workflow"] .task-status-dropdown {
  height: 28px;
  padding: 0 10px;
  box-shadow: none;
  cursor: pointer;
}

body[data-active-view="workflow"] .task-status-dropdown svg {
  width: 12px;
  height: 12px;
  color: currentColor;
}

body[data-active-view="workflow"] .task-detail-shell-header {
  margin-bottom: -40px;
}

body[data-active-view="workflow"] .task-detail-control-stack {
  grid-column: 2;
  gap: 8px;
  transform: translateY(30px);
}

body[data-active-view="workflow"] .task-detail-shell-header .inline-actions {
  display: flex;
  gap: 8px;
}

body[data-active-view="workflow"] .task-detail-shell-header .icon-button {
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

body[data-active-view="workflow"] .detail-panel-header {
  padding-bottom: 16px;
}

body[data-active-view="workflow"] .detail-panel-header h3 {
  margin-top: 0;
  font-size: 21px;
  line-height: 1.2;
}

body[data-active-view="workflow"] .detail-panel-header p {
  margin-top: 8px;
}

body[data-active-view="workflow"] .detail-field-list {
  gap: 14px;
  padding: 16px 0;
}

body[data-active-view="workflow"] .detail-section {
  padding: 16px 0;
}

body[data-active-view="workflow"] .task-status-menu button {
  border-radius: 0px;
  font-weight: 800;
}

body[data-active-view="workflow"] .task-status-menu button.active,
body[data-active-view="workflow"] .task-status-menu button:disabled {
  background: #e8f8ec;
  color: #087a1e;
  cursor: default;
}

/* Tasks bugfix pass: scoped alignment/actions without disturbing the tuned layout above. */
body[data-active-view="workflow"] .task-table-header-checkbox {
  position: relative;
  top: -3px;
}

body[data-active-view="workflow"] .workflow-sort-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-active-view="workflow"] .task-sort-label-button,
body[data-active-view="workflow"] .task-sort-icon-button {
  border-radius: 0px;
}

body[data-active-view="workflow"] .task-sort-icon-button {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dde7e2;
  background: #ffffff;
  color: #0f172a;
}

body[data-active-view="workflow"] .task-sort-icon-button svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

body[data-active-view="workflow"] .task-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  display: grid;
  min-width: 220px;
  border: 1px solid #dde7e2;
  border-radius: 0px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
}

body[data-active-view="workflow"] .task-sort-menu.hidden {
  display: none;
}

body[data-active-view="workflow"] .task-sort-menu button {
  min-height: 34px;
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

body[data-active-view="workflow"] .task-sort-menu button:hover,
body[data-active-view="workflow"] .task-sort-menu button.active {
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="workflow"] .task-action-bar {
  align-items: center;
}

body[data-active-view="workflow"] .task-detail-secondary-actions {
  display: flex;
  width: 100%;
  gap: 8px;
  margin-top: 2px;
}

body[data-active-view="workflow"] .task-detail-secondary-actions .task-icon-action {
  width: 36px;
  height: 36px;
  border-radius: 0px;
}

body[data-active-view="workflow"] .task-edit-action {
  min-height: 36px;
  border: 1px solid #087a1e;
  border-radius: 0px;
  background: #ffffff;
  color: #087a1e;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="workflow"] .task-edit-action svg {
  width: 14px;
  height: 14px;
}

body[data-active-view="workflow"] .task-detail-edit-form {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

body[data-active-view="workflow"] .task-edit-heading {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid #e1e8e4;
  padding-bottom: 10px;
}

body[data-active-view="workflow"] .task-edit-heading strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="workflow"] .task-edit-heading span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body[data-active-view="workflow"] .task-edit-field {
  display: grid;
  gap: 6px;
}

body[data-active-view="workflow"] .task-edit-field > span {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

body[data-active-view="workflow"] .task-edit-field input,
body[data-active-view="workflow"] .task-edit-field select,
body[data-active-view="workflow"] .task-edit-field textarea,
body[data-active-view="workflow"] .task-detail-edit-form .task-search-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dde7e2;
  border-radius: 0px;
  background: #ffffff;
  box-sizing: border-box;
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
  outline: none;
  padding: 0 10px;
}

body[data-active-view="workflow"] .task-edit-field textarea {
  min-height: 92px;
  padding: 10px;
  resize: vertical;
}

body[data-active-view="workflow"] .task-edit-field input:focus,
body[data-active-view="workflow"] .task-edit-field select:focus,
body[data-active-view="workflow"] .task-edit-field textarea:focus,
body[data-active-view="workflow"] .task-detail-edit-form .task-search-input:focus {
  border-color: #087a1e;
  box-shadow: 0 0 0 1px #087a1e;
}

body[data-active-view="workflow"] .task-edit-assignment-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  background: transparent;
}

body[data-active-view="workflow"] .task-edit-assignment-tabs button {
  min-height: 40px;
  border: 1px solid #dde7e2;
  border-radius: 0px;
  background: #ffffff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-active-view="workflow"] .task-edit-assignment-tabs button:last-child {
  border-right: 1px solid #dde7e2;
}

body[data-active-view="workflow"] .task-edit-assignment-tabs button.active {
  border-color: #087a1e;
  background: #f1faef;
  color: #087a1e;
  box-shadow: inset 0 0 0 1px #087a1e;
}

body[data-active-view="workflow"] .task-edit-due-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.75fr);
  gap: 10px;
}

body[data-active-view="workflow"] .task-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #e1e8e4;
  padding-top: 12px;
}

body[data-active-view="workflow"] .task-edit-footer .button {
  min-height: 38px;
  border-radius: 0px;
}

body[data-active-view="workflow"] .task-view-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body[data-active-view="workflow"] .task-view-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid #d8e3dd;
  border-radius: 0px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

body[data-active-view="workflow"] .task-view-toggle button.active {
  border-color: #087a1e;
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="workflow"] .task-view-toggle svg {
  width: 15px;
  height: 15px;
}

body[data-active-view="workflow"] #workflowView.task-card-mode .filter-bar {
  display: none;
}

body[data-active-view="workflow"] .task-card-view {
  display: grid;
  gap: 18px;
  border-top: 1px solid #e1e8e4;
  padding: 18px;
}

body[data-active-view="workflow"] .task-card-view.hidden {
  display: none;
}

body[data-active-view="workflow"] .task-card-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto auto;
  align-items: end;
  gap: 10px;
}

body[data-active-view="workflow"] .task-card-filter-row label {
  display: grid;
  gap: 5px;
}

body[data-active-view="workflow"] .task-card-filter-row span,
body[data-active-view="workflow"] .task-card-filter-row label span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body[data-active-view="workflow"] .task-card-filter-row select,
body[data-active-view="workflow"] .task-card-clear {
  min-height: 38px;
  border: 1px solid #d8e3dd;
  border-radius: 0px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 850;
}

body[data-active-view="workflow"] .task-card-clear {
  cursor: pointer;
}

body[data-active-view="workflow"] .task-card-count {
  align-self: center;
  justify-self: end;
  text-transform: none;
}

body[data-active-view="workflow"] .task-card-filter-row .workflow-sort-control {
  align-self: end;
  justify-self: end;
}

body[data-active-view="workflow"] .task-card-empty-state {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e8e4;
  border-radius: 0px;
  background: #ffffff;
  text-align: center;
}

body[data-active-view="workflow"] .task-card-section {
  display: grid;
  gap: 12px;
  max-height: none;
  overflow: visible;
}

body[data-active-view="workflow"] .task-card-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

body[data-active-view="workflow"] .task-card-section h3 span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 0px;
  background: #dff7e5;
  color: #087a1e;
  font-size: 11px;
}

body[data-active-view="workflow"] .task-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: auto;
  gap: 14px;
  max-height: none;
  overflow: visible;
}

body[data-active-view="workflow"] .task-card {
  position: relative;
  display: grid;
  min-height: 206px;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 8px;
  border: 1px solid #d8e3dd;
  border-radius: 0px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
  padding: 14px 14px 12px;
  cursor: pointer;
}

body[data-active-view="workflow"] .task-card.selected {
  border-color: #0a8a24;
  background: #f1faef;
  box-shadow: inset 3px 0 0 #0a8a24, 0 10px 20px rgba(15, 23, 42, 0.06);
}

body[data-active-view="workflow"] .task-card.overdue {
  border-color: #ef4444;
  background: #fffafa;
  box-shadow: inset 4px 0 0 #ef4444, 0 8px 18px rgba(220, 38, 38, 0.12);
}

body[data-active-view="workflow"] .task-card.overdue.selected {
  border-color: #0a8a24;
  background: #f1faef;
  box-shadow: inset 3px 0 0 #0a8a24, 0 10px 20px rgba(15, 23, 42, 0.06);
}

body[data-active-view="workflow"] .task-card-top,
body[data-active-view="workflow"] .task-card-footer,
body[data-active-view="workflow"] .task-card-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body[data-active-view="workflow"] .task-card-top > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

body[data-active-view="workflow"] .task-card-top svg {
  width: 14px;
  height: 14px;
}

body[data-active-view="workflow"] .task-card-tools {
  position: relative;
  display: inline-flex;
  gap: 4px;
}

body[data-active-view="workflow"] .task-card-icon,
body[data-active-view="workflow"] .task-card-expand {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 0px;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
}

body[data-active-view="workflow"] .task-card-icon.pinned {
  color: #087a1e;
}

body[data-active-view="workflow"] .task-card-icon:hover,
body[data-active-view="workflow"] .task-card-expand {
  border-color: #0a8a24;
  background: #f0fbf2;
  color: #087a1e;
}

body[data-active-view="workflow"] .task-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-active-view="workflow"] .task-card h4 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-active-view="workflow"] .task-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-active-view="workflow"] .task-card-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(94px, auto);
  align-items: end;
}

body[data-active-view="workflow"] .task-card-details div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-active-view="workflow"] .task-card-details span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

body[data-active-view="workflow"] .task-card-details strong,
body[data-active-view="workflow"] .task-card-details small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="workflow"] .task-card-details .task-card-due {
  justify-items: end;
  min-width: 94px;
  text-align: right;
}

body[data-active-view="workflow"] .task-card-details .task-card-due strong,
body[data-active-view="workflow"] .task-card-details .task-card-due small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

body[data-active-view="workflow"] .task-card-details strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="workflow"] .task-card-details small,
body[data-active-view="workflow"] .task-card-footer {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

body[data-active-view="workflow"] .task-card-footer {
  border-top: 1px solid #edf2ef;
  padding-top: 8px;
}

body[data-active-view="workflow"] .task-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

body[data-active-view="workflow"] .task-card-meta svg {
  width: 13px;
  height: 13px;
}

body[data-active-view="workflow"] .task-card-action-menu {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 25;
  display: grid;
  width: 172px;
  border: 1px solid #d8e3dd;
  border-radius: 0px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
  padding: 6px;
}

body[data-active-view="workflow"] .task-card-action-menu button {
  min-height: 32px;
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: #0f172a;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

body[data-active-view="workflow"] .task-card-action-menu button:hover {
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="workflow"] .task-card-load-state {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e1e8e4;
  padding: 12px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 980px) {
  body[data-active-view="workflow"] .task-card-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-active-view="workflow"] .task-card-filter-row,
  body[data-active-view="workflow"] .task-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1380px) {
  body[data-active-view="workflow"] #workflowView.active {
    display: block;
  }

  body[data-active-view="workflow"] #workflowView.active .workflow-sidebar,
  body[data-active-view="workflow"] #workflowView.active .workflow-queue,
  body[data-active-view="workflow"] #workflowMetrics {
    width: 100%;
  }

  body[data-active-view="workflow"] #workflowView.active .workflow-sidebar {
    position: static;
    margin-top: 18px;
  }
}

.button.create-action-button,
#headerPrimaryAction.create-action-button {
  min-height: 38px;
  height: 38px;
  border: 1px solid #087a1e;
  border-radius: 0px !important;
  background: linear-gradient(180deg, #0b8f25 0%, #087a1e 52%, #056516 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 122, 30, 0.18);
  padding: 0 16px;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.button.create-action-button svg,
#headerPrimaryAction.create-action-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke-width: 2.4;
}

.button.create-action-button:hover,
#headerPrimaryAction.create-action-button:hover {
  border-color: #056516;
  background: linear-gradient(180deg, #0a8421 0%, #06701a 52%, #045812 100%);
  box-shadow: 0 10px 20px rgba(8, 122, 30, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}

.button.create-action-button:focus-visible,
#headerPrimaryAction.create-action-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(8, 122, 30, 0.28), 0 8px 18px rgba(8, 122, 30, 0.18);
}

body[data-active-view="observations"] .observations-accountability-shell {
  display: grid;
  gap: 14px;
}

body[data-active-view="observations"] .observation-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cfe1f4;
  border-radius: 0px;
  background: #f4f8fc;
  color: #334155;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 750;
}

body[data-active-view="observations"] .observation-info-banner svg {
  width: 16px;
  height: 16px;
  color: #087a1e;
  flex: 0 0 16px;
}

body[data-active-view="observations"] .observation-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}

body[data-active-view="observations"] .observation-kpi-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #dde7e2;
  border-radius: 0px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
  padding: 14px;
}

body[data-active-view="observations"] .observation-kpi-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 0px;
}

body[data-active-view="observations"] .observation-kpi-icon svg {
  width: 20px;
  height: 20px;
}

body[data-active-view="observations"] .observation-kpi-card.green .observation-kpi-icon {
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="observations"] .observation-kpi-card.red .observation-kpi-icon {
  background: #fee2e2;
  color: #dc2626;
}

body[data-active-view="observations"] .observation-kpi-card.purple .observation-kpi-icon {
  background: #f3e8ff;
  color: #7e22ce;
}

body[data-active-view="observations"] .observation-kpi-card.orange .observation-kpi-icon {
  background: #fff7ed;
  color: #ea580c;
}

body[data-active-view="observations"] .observation-kpi-card p,
body[data-active-view="observations"] .observation-kpi-card strong,
body[data-active-view="observations"] .observation-kpi-card small {
  display: block;
  margin: 0;
}

body[data-active-view="observations"] .observation-kpi-card p {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="observations"] .observation-kpi-card strong {
  color: #020617;
  font-size: 24px;
  font-weight: 950;
  line-height: 1.05;
}

body[data-active-view="observations"] .observation-kpi-card small {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

body[data-active-view="observations"] .observations-workspace {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 380px;
}

body[data-active-view="observations"] .observation-record-card,
body[data-active-view="observations"] .observation-detail-panel,
body[data-active-view="observations"] .database-filter-row select,
body[data-active-view="observations"] .database-filter-row input,
body[data-active-view="observations"] .database-filter-row button,
body[data-active-view="observations"] .database-tabs button,
body[data-active-view="observations"] .database-footer button,
body[data-active-view="observations"] .database-footer select,
body[data-active-view="observations"] .observation-detail-panel button,
body[data-active-view="observations"] .observation-detail-panel input {
  border-radius: 0px !important;
}

body[data-active-view="observations"] .database-filter-row select,
body[data-active-view="observations"] .database-filter-row input {
  min-height: 38px;
  border-color: #c9d6d0;
  font-size: 12px;
  font-weight: 800;
}

body[data-active-view="observations"] .database-filter-row select:focus,
body[data-active-view="observations"] .database-filter-row input:focus,
body[data-active-view="observations"] .database-filter-row select:focus-visible,
body[data-active-view="observations"] .database-filter-row input:focus-visible,
body[data-active-view="observations"] .observation-detail-panel input:focus,
body[data-active-view="observations"] .observation-detail-panel input:focus-visible {
  outline: none;
  border-color: #087a1e;
  box-shadow: 0 0 0 1px #087a1e;
}

body[data-active-view="observations"] .database-tabs {
  border-bottom: 1px solid #dde7e2;
}

body[data-active-view="observations"] .database-tabs button {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

body[data-active-view="observations"] .database-tabs button.active {
  color: #087a1e;
}

body[data-active-view="observations"] .database-tabs button.active::after {
  border-radius: 0px;
  background: #087a1e;
}

body[data-active-view="observations"] .observations-table {
  min-width: 1280px;
}

body[data-active-view="observations"] .observations-table th {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-active-view="observations"] .observations-table td {
  vertical-align: middle;
}

body[data-active-view="observations"] .observations-table tbody tr.selected-row {
  border-left: 3px solid #087a1e;
  background: #f1faef;
}

body[data-active-view="observations"] .observation-employee-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

body[data-active-view="observations"] .observation-employee-cell .avatar-mini,
body[data-active-view="observations"] .detail-comment-box .avatar-mini {
  border-radius: 0px;
}

body[data-active-view="observations"] .observation-employee-cell strong,
body[data-active-view="observations"] .observation-summary-cell strong,
body[data-active-view="observations"] .observation-date-cell strong,
body[data-active-view="observations"] .observation-issued-cell strong,
body[data-active-view="observations"] .observation-next-cell strong {
  display: block;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-view="observations"] .observation-employee-cell small,
body[data-active-view="observations"] .observation-summary-cell small,
body[data-active-view="observations"] .observation-date-cell small,
body[data-active-view="observations"] .observation-issued-cell small,
body[data-active-view="observations"] .observation-next-cell small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

body[data-active-view="observations"] .observation-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 0px;
  background: #f8fafc;
  color: #334155;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

body[data-active-view="observations"] .status-open,
body[data-active-view="observations"] .status-complete,
body[data-active-view="observations"] .status-acknowledged,
body[data-active-view="observations"] .level-recognition,
body[data-active-view="observations"] .category-recognition,
body[data-active-view="observations"] .severity-low,
body[data-active-view="observations"] .severity-normal {
  border-color: #9be7af;
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="observations"] .status-follow-up-needed,
body[data-active-view="observations"] .status-pending-acknowledgement,
body[data-active-view="observations"] .status-in-progress,
body[data-active-view="observations"] .level-pip,
body[data-active-view="observations"] .level-written-warning,
body[data-active-view="observations"] .level-verbal-warning,
body[data-active-view="observations"] .level-attendance-note,
body[data-active-view="observations"] .severity-medium,
body[data-active-view="observations"] .severity-high,
body[data-active-view="observations"] .category-attendance,
body[data-active-view="observations"] .category-coaching,
body[data-active-view="observations"] .category-performance {
  border-color: #fdba74;
  background: #fff7ed;
  color: #c2410c;
}

body[data-active-view="observations"] .level-final-warning,
body[data-active-view="observations"] .severity-critical,
body[data-active-view="observations"] .category-policy,
body[data-active-view="observations"] .category-safety,
body[data-active-view="observations"] .category-conduct {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #b91c1c;
}

body[data-active-view="observations"] .status-archived,
body[data-active-view="observations"] .status-no-follow-up {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
}

body[data-active-view="observations"] .observation-detail-panel {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  border: 1px solid #dde7e2;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

body[data-active-view="observations"] .observation-record-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px;
}

body[data-active-view="observations"] .observation-record-header span,
body[data-active-view="observations"] .observation-record-header small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

body[data-active-view="observations"] .observation-record-header h3 {
  margin: 6px 0 4px;
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.1;
}

body[data-active-view="observations"] .observation-record-fields {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-active-view="observations"] .observation-record-fields div,
body[data-active-view="observations"] .observation-record-section,
body[data-active-view="observations"] .observation-next-step {
  border: 1px solid #edf2ef;
  border-radius: 0px;
  background: #fbfdfb;
  padding: 10px;
}

body[data-active-view="observations"] .observation-record-fields span,
body[data-active-view="observations"] .observation-record-section h4,
body[data-active-view="observations"] .observation-next-step h4 {
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-active-view="observations"] .observation-record-fields strong,
body[data-active-view="observations"] .observation-record-section strong,
body[data-active-view="observations"] .observation-next-step strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

body[data-active-view="observations"] .observation-record-fields small,
body[data-active-view="observations"] .observation-record-section p,
body[data-active-view="observations"] .observation-next-step span {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

body[data-active-view="observations"] .observation-detail-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

body[data-active-view="observations"] .observation-detail-actions .button {
  justify-content: center;
  min-height: 36px;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="observations"] .observation-record-tabs {
  margin-top: 14px;
}

body[data-active-view="observations"] .observation-attachment-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

body[data-active-view="observations"] .observation-attachment-list p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

body[data-active-view="observations"] .observation-attachment-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #edf2ef;
  border-radius: 0px;
  padding: 8px;
}

body[data-active-view="observations"] .observation-attachment-row svg {
  width: 16px;
  height: 16px;
  color: #087a1e;
}

body[data-active-view="observations"] .observation-attachment-row strong,
body[data-active-view="observations"] .observation-attachment-row small,
body[data-active-view="observations"] .observation-attachment-row time {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="observations"] .observation-attachment-row strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="observations"] .observation-attachment-row small,
body[data-active-view="observations"] .observation-attachment-row time {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

body[data-active-view="observations"] .database-footer .pagination-lite {
  display: none;
}

@media (max-width: 1320px) {
  body[data-active-view="observations"] .observations-workspace {
    grid-template-columns: 1fr;
  }

  body[data-active-view="observations"] .observation-detail-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 900px) {
  body[data-active-view="observations"] .observation-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-active-view="observations"] .observation-kpi-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-view="observations"] .observation-record-header {
    grid-template-columns: 1fr auto;
  }
}

/* Observations precision layout pass */
body[data-active-view="observations"] .observations-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 18px;
}

body[data-active-view="observations"] .observations-left-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

body[data-active-view="observations"] .observations-table-card {
  min-width: 0;
  overflow: hidden;
}

body[data-active-view="observations"] .observations-table-card .table-scroll {
  width: 100%;
  overflow-x: hidden;
}

body[data-active-view="observations"] .observations-table {
  display: block;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

body[data-active-view="observations"] .observations-table thead,
body[data-active-view="observations"] .observations-table tbody {
  display: block;
  width: 100%;
}

body[data-active-view="observations"] .observation-table-header,
body[data-active-view="observations"] .observation-row {
  display: grid;
  grid-template-columns:
    34px
    minmax(136px, 1.15fr)
    minmax(96px, 0.75fr)
    minmax(88px, 0.7fr)
    minmax(150px, 1.25fr)
    minmax(76px, 0.55fr)
    minmax(90px, 0.65fr)
    minmax(104px, 0.75fr)
    minmax(126px, 0.9fr);
  align-items: center;
  width: 100%;
}

body[data-active-view="observations"] .observation-table-header > *,
body[data-active-view="observations"] .observation-row > * {
  min-width: 0;
}

body[data-active-view="observations"] .observations-table th,
body[data-active-view="observations"] .observations-table td {
  display: block;
  min-width: 0;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 8px;
  overflow: hidden;
}

body[data-active-view="observations"] .observations-table th:first-child,
body[data-active-view="observations"] .observations-table td:first-child {
  display: grid;
  place-items: center;
}

body[data-active-view="observations"] .observations-table tbody tr.selected-row {
  border-left: 3px solid #087a1e;
  background: #f1faef;
  outline: none;
}

body[data-active-view="observations"] .observation-employee-cell {
  min-width: 0;
}

body[data-active-view="observations"] .observation-employee-cell > div,
body[data-active-view="observations"] .observation-summary-cell,
body[data-active-view="observations"] .observation-date-cell,
body[data-active-view="observations"] .observation-issued-cell,
body[data-active-view="observations"] .observation-next-cell {
  min-width: 0;
}

body[data-active-view="observations"] .observation-employee-cell strong,
body[data-active-view="observations"] .observation-employee-cell small,
body[data-active-view="observations"] .observation-summary-cell strong,
body[data-active-view="observations"] .observation-summary-cell small,
body[data-active-view="observations"] .observation-date-cell strong,
body[data-active-view="observations"] .observation-date-cell small,
body[data-active-view="observations"] .observation-issued-cell strong,
body[data-active-view="observations"] .observation-issued-cell small,
body[data-active-view="observations"] .observation-next-cell strong,
body[data-active-view="observations"] .observation-next-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-active-view="observations"] .observation-summary-cell strong,
body[data-active-view="observations"] .observation-summary-cell small,
body[data-active-view="observations"] .observation-issued-cell small,
body[data-active-view="observations"] .observation-next-cell strong,
body[data-active-view="observations"] .observation-next-cell small {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-active-view="observations"] .database-footer .pagination-lite {
  display: flex;
}

body[data-active-view="observations"] .observation-detail-panel {
  position: sticky;
  top: 18px;
  align-self: start;
  width: 360px;
  max-height: calc(100vh - 36px);
  overflow: hidden auto;
  border: 1px solid #dde7e2;
  border-radius: 0px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

body[data-active-view="observations"] .observation-detail-panel::before {
  content: "";
  display: block;
  height: 4px;
  background: #087a1e;
}

body[data-active-view="observations"] .observation-detail-inner {
  display: grid;
  background: #ffffff;
}

body[data-active-view="observations"] .observation-detail-header {
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 18px 14px;
}

body[data-active-view="observations"] .observation-detail-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 8px;
}

body[data-active-view="observations"] .observation-detail-topline > span {
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-view="observations"] .observation-detail-topline .icon-button {
  width: 34px;
  height: 34px;
}

body[data-active-view="observations"] .observation-detail-header h3 {
  margin: 12px 0 4px;
  color: #0f172a;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.05;
}

body[data-active-view="observations"] .observation-detail-header small {
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

body[data-active-view="observations"] .observation-detail-fields {
  display: grid;
  row-gap: 10px;
  padding: 16px 18px;
}

body[data-active-view="observations"] .observation-detail-field-row {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

body[data-active-view="observations"] .observation-detail-field-row span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

body[data-active-view="observations"] .observation-detail-field-row strong {
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

body[data-active-view="observations"] .observation-detail-section {
  border-top: 1px solid #e2e8f0;
  padding: 14px 18px;
}

body[data-active-view="observations"] .observation-detail-section h4 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

body[data-active-view="observations"] .observation-detail-section p {
  margin: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

body[data-active-view="observations"] .observation-create-followup-btn {
  width: auto;
  min-height: 36px;
  margin-top: 12px;
  border-color: #087a1e;
  color: #087a1e;
  font-weight: 900;
}

body[data-active-view="observations"] .observation-record-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

body[data-active-view="observations"] .observation-record-tabs button {
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="observations"] .observation-record-tabs button.active {
  border-bottom-color: #087a1e;
  color: #087a1e;
}

body[data-active-view="observations"] .observation-record-timeline {
  display: grid;
  gap: 0;
  padding: 16px 18px;
}

body[data-active-view="observations"] .observation-timeline-item {
  position: relative;
  display: grid;
  gap: 3px;
  border-left: 1px solid #cbd5e1;
  padding: 0 0 18px 18px;
}

body[data-active-view="observations"] .observation-timeline-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 3px;
  width: 9px;
  height: 9px;
  border: 2px solid #087a1e;
  border-radius: 50%;
  background: #ffffff;
}

body[data-active-view="observations"] .observation-timeline-item.filled::before {
  background: #087a1e;
}

body[data-active-view="observations"] .observation-timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

body[data-active-view="observations"] .observation-timeline-item time {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

body[data-active-view="observations"] .observation-timeline-item strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-view="observations"] .observation-timeline-item small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body[data-active-view="observations"] .observation-attachment-list {
  margin: 0;
  padding: 0 18px 14px;
}

body[data-active-view="observations"] .detail-comment-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 0;
  border-top: 1px solid #e2e8f0;
  padding: 14px 18px 16px;
}

body[data-active-view="observations"] .detail-comment-box input {
  min-height: 38px;
  border: 1px solid #dde7e2;
  border-right: 0;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}

body[data-active-view="observations"] .detail-comment-box .button {
  min-height: 38px;
  border-color: #087a1e;
  background: #087a1e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-view="observations"] .level-coaching-note {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

body[data-active-view="observations"] .level-pip {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
}

body[data-active-view="observations"] .category-performance {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

@media (max-width: 1500px) {
  body[data-active-view="observations"] .observation-table-header,
  body[data-active-view="observations"] .observation-row {
    grid-template-columns:
      32px
      minmax(128px, 1.1fr)
      minmax(86px, 0.7fr)
      minmax(82px, 0.65fr)
      minmax(136px, 1.15fr)
      minmax(68px, 0.5fr)
      minmax(84px, 0.6fr)
      minmax(92px, 0.7fr)
      minmax(112px, 0.8fr);
  }

  body[data-active-view="observations"] .observations-table th,
  body[data-active-view="observations"] .observations-table td {
    padding-inline: 6px;
  }

  body[data-active-view="observations"] .observation-badge {
    padding-inline: 5px;
    font-size: 9px;
  }
}

@media (max-width: 1320px) {
  body[data-active-view="observations"] .observations-main-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-view="observations"] .observation-detail-panel {
    position: static;
    width: 100%;
    max-height: none;
  }

  body[data-active-view="observations"] .observations-table-card .table-scroll {
    overflow-x: auto;
  }

  body[data-active-view="observations"] .observations-table {
    min-width: 1120px;
  }
}

/* New Observation modal: Create Task style, scoped. */
#observationModal.new-observation-modal {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
}

#observationModal.new-observation-modal *,
#observationModal.new-observation-modal button,
#observationModal.new-observation-modal input,
#observationModal.new-observation-modal select,
#observationModal.new-observation-modal textarea,
#observationModal.new-observation-modal .modal-card,
#observationModal.new-observation-modal .modal-card-wide,
#observationModal.new-observation-modal .upload-zone,
#observationModal.new-observation-modal .followup-fields,
#observationModal.new-observation-modal .assignment-mode-card,
#observationModal.new-observation-modal .role-picker,
#observationModal.new-observation-modal .role-picker-summary,
#observationModal.new-observation-modal .role-picker-list,
#observationModal.new-observation-modal .role-picker-option {
  border-radius: 0px !important;
}

#observationModal .new-observation-card {
  display: flex;
  width: min(960px, calc(100vw - 48px));
  max-width: none;
  max-height: min(92vh, 900px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dde7e2;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
  padding: 0;
}

#observationModal .new-observation-header {
  flex: 0 0 auto;
  padding: 26px 34px 14px;
}

#observationModal .new-observation-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
}

#observationModal .new-observation-header .kicker {
  margin: 0 0 6px;
  color: #087a1e;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

#observationModal #closeObservationModal {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#observationModal .new-observation-form {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
}

#observationModal .new-observation-body {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 18px;
  overflow-y: auto;
  padding: 16px 34px 22px;
}

#observationModal .new-observation-grid {
  display: grid;
  gap: 20px;
}

#observationModal .new-observation-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#observationModal #observationTargetRow.single-field {
  grid-template-columns: 1fr;
}

#observationModal .new-observation-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

#observationModal .new-observation-field > span,
#observationModal .new-observation-severity > span {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

#observationModal .new-observation-field small,
#observationModal .role-picker + small,
#observationModal #assignmentRoleHelp {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

#observationModal .new-observation-field input,
#observationModal .new-observation-field select,
#observationModal .new-observation-field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #c9d6d0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 750;
}

#observationModal .new-observation-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #0f172a 50%), linear-gradient(135deg, #0f172a 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 34px;
}

#observationModal .new-observation-field textarea {
  min-height: 132px;
  padding: 12px;
  resize: vertical;
}

#observationModal input,
#observationModal select,
#observationModal textarea,
#observationModal button,
#observationModal [tabindex] {
  outline: none !important;
}

#observationModal input:focus,
#observationModal select:focus,
#observationModal textarea:focus,
#observationModal button:focus,
#observationModal [tabindex]:focus {
  outline: none !important;
  box-shadow: none;
}

#observationModal .new-observation-field input:focus-visible,
#observationModal .new-observation-field select:focus-visible,
#observationModal .new-observation-field textarea:focus-visible,
#observationModal .upload-zone:focus-within,
#observationModal .role-picker:focus-within,
#observationModal button:focus-visible {
  border-color: #087a1e;
  outline: none !important;
  box-shadow: 0 0 0 1px #087a1e;
}

#observationModal .priority-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dde7e2;
  background: #ffffff;
}

#observationModal .priority-button {
  min-height: 46px;
  border: 0;
  border-right: 1px solid #dde7e2;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

#observationModal .priority-button:last-child {
  border-right: 0;
}

#observationModal .priority-button.low.active {
  background: #f8fafc;
  color: #334155;
  box-shadow: inset 0 0 0 1px #94a3b8;
}

#observationModal .priority-button.normal.active {
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px #3b82f6;
}

#observationModal .priority-button.high.active {
  background: #fff7ed;
  color: #c2410c;
  box-shadow: inset 0 0 0 1px #f97316;
}

#observationModal .priority-button.critical.active {
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px #ef4444;
}

#observationModal .new-observation-upload {
  position: relative;
  display: grid;
  min-height: 132px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px dashed #b8c8c0;
  background: #ffffff;
  color: #334155;
  padding: 16px;
  text-align: center;
  cursor: pointer;
}

#observationModal .new-observation-upload:hover {
  border-color: #087a1e;
  background: #fbfdfb;
}

#observationModal .new-observation-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#observationModal .new-observation-upload svg {
  width: 28px;
  height: 28px;
  color: #334155;
}

#observationModal .new-observation-upload strong {
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

#observationModal .new-observation-upload span,
#observationModal .new-observation-upload em {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  font-style: normal;
}

#observationModal .new-observation-followup-section {
  display: grid;
  gap: 10px;
  border-top: 1px solid #dde7e2;
  padding-top: 16px;
}

#observationModal .new-observation-check,
#observationModal .assignment-mode-card .check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

#observationModal input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #087a1e;
}

#observationModal .followup-fields {
  display: grid;
  gap: 14px;
  border: 1px solid #dde7e2;
  background: #fbfdfb;
  padding: 14px;
}

#observationModal .followup-fields.hidden {
  display: none;
}

#observationModal .assignment-mode-card {
  border: 1px solid #dde7e2;
  background: #ffffff;
  padding: 10px 12px;
}

#observationModal .assignment-mode-card p {
  margin: 4px 0 0 25px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

#observationModal .role-picker {
  border: 1px solid #c9d6d0;
  background: #ffffff;
  padding: 10px;
}

#observationModal .role-picker-summary {
  border: 0;
  background: transparent;
  padding: 0;
}

#observationModal .role-picker-list {
  max-height: 150px;
  overflow-y: auto;
  border-top: 1px solid #dde7e2;
  margin-top: 8px;
  padding-top: 8px;
}

#observationModal .role-picker-option {
  min-height: 34px;
  padding: 6px;
}

#observationModal .new-observation-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #dde7e2;
  background: #ffffff;
  padding: 16px 34px 18px;
}

#observationModal .new-observation-cancel {
  min-height: 42px;
  border: 1px solid #c9d6d0;
  background: #ffffff;
  color: #0f172a;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 850;
}

#observationModal .new-observation-submit,
#observationModal .button.primary.new-observation-submit[type="submit"] {
  min-height: 46px;
  border: 1px solid #087a1e;
  background: linear-gradient(180deg, #0b8f25 0%, #087a1e 52%, #056516 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 122, 30, 0.18);
  padding: 0 20px;
  font-size: 13px;
  font-weight: 950;
}

#observationModal .button.primary[type="submit"] {
  position: static;
  align-self: auto;
}

@media (max-width: 760px) {
  #observationModal .new-observation-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  #observationModal .new-observation-header,
  #observationModal .new-observation-body,
  #observationModal .new-observation-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  #observationModal .new-observation-grid.two-col {
    grid-template-columns: 1fr;
  }
}

/* Observations viewport fit refinements. */
body[data-active-view="observations"] .page-header {
  gap: 12px;
}

body[data-active-view="observations"] .header-actions {
  min-width: 0;
  gap: 8px;
}

body[data-active-view="observations"] .global-search {
  width: clamp(260px, 27vw, 360px);
}

body[data-active-view="observations"] #refreshButton,
body[data-active-view="observations"] #openMyActivity,
body[data-active-view="observations"] #headerPrimaryAction {
  min-height: 38px;
  padding-inline: 12px;
  white-space: nowrap;
}

body[data-active-view="observations"] .observations-main-grid {
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 16px;
}

body[data-active-view="observations"] .observation-detail-panel {
  width: 348px;
}

body[data-active-view="observations"] .observation-info-banner,
body[data-active-view="observations"] .observation-record-card {
  margin-right: 0;
}

body[data-active-view="observations"] .observation-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-active-view="observations"] .observation-kpi-card {
  min-width: 0;
  padding: 12px;
}

body[data-active-view="observations"] .database-filter-row {
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  gap: 10px;
}

body[data-active-view="observations"] .database-filter-row .field,
body[data-active-view="observations"] .database-filter-row select,
body[data-active-view="observations"] .database-filter-row input {
  min-width: 0;
}

body[data-active-view="observations"] .observations-table-card {
  padding-inline: 22px;
  padding-bottom: 18px;
}

body[data-active-view="observations"] .observations-table-card .table-scroll {
  overflow-x: hidden;
  padding-inline: 0;
}

body[data-active-view="observations"] .observation-table-header,
body[data-active-view="observations"] .observation-row {
  grid-template-columns:
    32px
    minmax(122px, 1fr)
    minmax(96px, 0.78fr)
    minmax(92px, 0.72fr)
    minmax(138px, 1.08fr)
    minmax(118px, 0.9fr)
    minmax(88px, 0.68fr)
    minmax(96px, 0.76fr)
    minmax(128px, 0.94fr);
}

body[data-active-view="observations"] .observation-row {
  min-height: 64px;
}

body[data-active-view="observations"] .observations-table th,
body[data-active-view="observations"] .observations-table td {
  padding: 12px 6px;
  overflow: hidden;
}

body[data-active-view="observations"] .observations-table .observation-badge {
  max-width: 100%;
  min-height: 20px;
  white-space: normal;
  line-height: 1.15;
}

body[data-active-view="observations"] .observation-employee-cell {
  align-items: start;
  gap: 8px;
}

body[data-active-view="observations"] .observation-employee-cell .avatar-mini {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-top: 1px;
}

body[data-active-view="observations"] .observation-employee-cell strong,
body[data-active-view="observations"] .observation-employee-cell small {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-active-view="observations"] .observation-summary-cell strong {
  -webkit-line-clamp: 2;
}

body[data-active-view="observations"] .observation-summary-cell small {
  -webkit-line-clamp: 1;
}

body[data-active-view="observations"] .observation-detail-field-row {
  grid-template-columns: 96px minmax(0, 1fr);
}

body[data-active-view="observations"] .observation-detail-field-row strong {
  overflow-wrap: anywhere;
}

body[data-active-view="observations"] .observation-detail-topline {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) 34px;
}

body[data-active-view="observations"] .observation-detail-topline .observation-badge {
  max-width: 138px;
  white-space: normal;
  line-height: 1.15;
}

@media (max-width: 1700px) {
  body[data-active-view="observations"] .global-search {
    width: clamp(220px, 23vw, 320px);
  }

  body[data-active-view="observations"] #refreshButton {
    width: 42px;
    min-width: 42px;
    overflow: hidden;
    padding-inline: 0;
    color: transparent;
    gap: 0;
  }

  body[data-active-view="observations"] #refreshButton svg {
    color: #2563eb;
    margin: auto;
  }
}

@media (max-width: 1360px) {
  body[data-active-view="observations"] .observations-main-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-view="observations"] .observation-detail-panel {
    position: static;
    width: 100%;
    max-height: none;
  }

  body[data-active-view="observations"] .observations-table-card .table-scroll {
    overflow-x: auto;
  }

  body[data-active-view="observations"] .observations-table {
    min-width: 1080px;
  }
}

/* Observations no-inner-scrollbar guard. */
body[data-active-view="observations"] .observation-detail-panel {
  max-height: none;
  overflow: visible;
}

body[data-active-view="observations"] .observations-table-card .table-scroll {
  overflow: hidden;
}

body[data-active-view="observations"] .observations-table th,
body[data-active-view="observations"] .observations-table td,
body[data-active-view="observations"] .observation-row > *,
body[data-active-view="observations"] .observation-table-header > * {
  max-height: none;
  overflow: hidden !important;
  scrollbar-width: none;
}

body[data-active-view="observations"] .observations-table th::-webkit-scrollbar,
body[data-active-view="observations"] .observations-table td::-webkit-scrollbar,
body[data-active-view="observations"] .observation-row > *::-webkit-scrollbar,
body[data-active-view="observations"] .observation-table-header > *::-webkit-scrollbar {
  display: none;
}

body[data-active-view="observations"] .observation-row {
  min-height: 66px;
}

body[data-active-view="observations"] .observation-employee-cell strong,
body[data-active-view="observations"] .observation-employee-cell small,
body[data-active-view="observations"] .observation-summary-cell strong,
body[data-active-view="observations"] .observation-summary-cell small,
body[data-active-view="observations"] .observation-date-cell strong,
body[data-active-view="observations"] .observation-date-cell small,
body[data-active-view="observations"] .observation-issued-cell strong,
body[data-active-view="observations"] .observation-issued-cell small,
body[data-active-view="observations"] .observation-next-cell strong,
body[data-active-view="observations"] .observation-next-cell small {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
}

body[data-active-view="observations"] .observation-employee-cell strong,
body[data-active-view="observations"] .observation-summary-cell strong,
body[data-active-view="observations"] .observation-next-cell strong {
  -webkit-line-clamp: 2;
}

body[data-active-view="observations"] .observation-employee-cell small,
body[data-active-view="observations"] .observation-summary-cell small,
body[data-active-view="observations"] .observation-date-cell strong,
body[data-active-view="observations"] .observation-date-cell small,
body[data-active-view="observations"] .observation-issued-cell strong,
body[data-active-view="observations"] .observation-issued-cell small,
body[data-active-view="observations"] .observation-next-cell small {
  -webkit-line-clamp: 1;
}

body[data-active-view="observations"] .observation-summary-cell {
  display: grid;
  gap: 2px;
}

body[data-active-view="observations"] .observations-table .observation-badge {
  display: inline-flex;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

/* Final table-cell alignment and summary clipping. */
body[data-active-view="observations"] .observation-employee-cell {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

body[data-active-view="observations"] .observation-employee-cell .avatar-mini {
  align-self: center;
  justify-self: start;
  margin: 0;
}

body[data-active-view="observations"] .observation-employee-cell > div {
  display: grid;
  align-content: center;
  min-width: 0;
}

body[data-active-view="observations"] .observation-employee-cell strong,
body[data-active-view="observations"] .observation-employee-cell small,
body[data-active-view="observations"] .observation-summary-cell strong,
body[data-active-view="observations"] .observation-summary-cell small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

body[data-active-view="observations"] .observation-summary-cell {
  display: grid;
  align-content: center;
  min-width: 0;
  max-height: 42px;
  overflow: hidden !important;
}

body[data-active-view="observations"] .observation-summary-cell strong,
body[data-active-view="observations"] .observation-summary-cell small {
  line-height: 1.25;
}

/* Employee cell final alignment: avatar and name side by side. */
body[data-active-view="observations"] .observations-table td.observation-employee-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

body[data-active-view="observations"] .observations-table td.observation-employee-cell .avatar-mini {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin: 0;
}

body[data-active-view="observations"] .observations-table td.observation-employee-cell > div {
  display: block;
  min-width: 0;
}

body[data-active-view="observations"] .observations-table td.observation-employee-cell strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="observations"] .observations-table td.observation-employee-cell small {
  display: none;
}

/* Logs table final layout. */
body[data-active-view="observations"] .observations-table-card .table-scroll {
  overflow-x: auto;
}

body[data-active-view="observations"] .observations-table {
  min-width: 1120px;
}

body[data-active-view="observations"] .observation-table-header,
body[data-active-view="observations"] .observation-row {
  grid-template-columns:
    minmax(150px, 1.1fr)
    minmax(118px, 0.78fr)
    minmax(112px, 0.72fr)
    minmax(170px, 1.35fr)
    minmax(96px, 0.62fr)
    minmax(128px, 0.82fr)
    minmax(124px, 0.78fr)
    minmax(132px, 0.82fr)
    minmax(70px, 0.42fr);
}

body[data-active-view="observations"] .observations-table th,
body[data-active-view="observations"] .observations-table td {
  padding: 13px 10px;
  text-align: left;
}

body[data-active-view="observations"] .observations-table th:first-child,
body[data-active-view="observations"] .observations-table td:first-child {
  display: block;
  place-items: initial;
}

body[data-active-view="observations"] .observations-table td.observation-employee-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}

body[data-active-view="observations"] .observations-table td.observation-employee-cell small {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="observations"] .observations-table .observation-badge,
body[data-active-view="observations"] .observations-table .mini-button {
  white-space: nowrap;
}

/* Schedule v2 mockup layout. */
body[data-active-view="schedule"] .content {
  background: #f8fbf9;
}

body[data-active-view="schedule"] *,
body[data-active-view="schedule"] .data-card,
body[data-active-view="schedule"] button,
body[data-active-view="schedule"] input,
body[data-active-view="schedule"] select,
body[data-active-view="schedule"] .schedule-v2-kpi,
body[data-active-view="schedule"] .schedule-v2-day,
body[data-active-view="schedule"] .schedule-v2-shift-card,
body[data-active-view="schedule"] .shift-pill,
body[data-active-view="schedule"] .schedule-day-cell,
body[data-active-view="schedule"] .schedule-grid,
body[data-active-view="schedule"] .conflict-badge,
body[data-active-view="schedule"] .schedule-v2-availability {
  border-radius: 0px !important;
}

body[data-active-view="schedule"] .schedule-shell.schedule-v2 {
  display: grid;
  gap: 14px;
}

body[data-active-view="schedule"] .page-header {
  display: none;
}

body[data-active-view="schedule"] .schedule-v2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-active-view="schedule"] .schedule-v2-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
}

body[data-active-view="schedule"] .schedule-v2-header p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 13px;
  font-weight: 650;
}

body[data-active-view="schedule"] .schedule-v2-header-actions {
  display: flex;
  gap: 10px;
}

body[data-active-view="schedule"] .schedule-v2-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body[data-active-view="schedule"] #scheduleModeTabs {
  display: flex;
  gap: 28px;
  border: 0;
  background: transparent;
  padding: 0;
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab {
  position: relative;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #334155;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab.active {
  background: transparent;
  color: #087a1e;
  box-shadow: none;
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 2px;
  background: #087a1e;
  content: "";
}

body[data-active-view="schedule"] .schedule-admin-actions {
  display: flex;
  gap: 10px;
}

body[data-active-view="schedule"] .schedule-v2-week-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

body[data-active-view="schedule"] .schedule-v2-week-row .schedule-week-menu-wrap {
  margin-left: auto;
}

body[data-active-view="schedule"] .schedule-v2-week-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid #d6e1dc;
  background: #ffffff;
  color: #0f172a;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
}

body[data-active-view="schedule"] .schedule-v2-week-label svg {
  width: 15px;
  height: 15px;
  color: #087a1e;
}

body[data-active-view="schedule"] .schedule-week-menu-wrap {
  position: relative;
}

body[data-active-view="schedule"] #scheduleCurrentWeek {
  gap: 7px;
}

body[data-active-view="schedule"] .schedule-week-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 170px;
  border: 1px solid #dde7e2;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  border-radius: 0px;
}

body[data-active-view="schedule"] .schedule-week-menu button {
  display: block;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  padding: 8px 11px;
  text-align: left;
  font-size: 12px;
  font-weight: 850;
  border-radius: 0px;
}

body[data-active-view="schedule"] .schedule-week-menu button:last-child {
  border-bottom: 0;
}

body[data-active-view="schedule"] .schedule-week-menu button:hover {
  background: #f1faef;
  color: #087a1e;
}

body[data-active-view="schedule"] .schedule-hidden-date {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body[data-active-view="schedule"] .schedule-v2-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

body[data-active-view="schedule"] #myScheduleSummary.schedule-v2-kpis {
  display: grid;
}

body[data-active-view="schedule"] .schedule-v2-kpi {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 128px;
  border: 1px solid #dde7e2;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  padding: 18px;
}

body[data-active-view="schedule"] .schedule-v2-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="schedule"] .schedule-v2-kpi.orange .schedule-v2-icon {
  background: #fff7ed;
  color: #ea580c;
}

body[data-active-view="schedule"] .schedule-v2-kpi p,
body[data-active-view="schedule"] .schedule-v2-kpi strong,
body[data-active-view="schedule"] .schedule-v2-kpi small,
body[data-active-view="schedule"] .schedule-v2-kpi em {
  display: block;
  margin: 0;
}

body[data-active-view="schedule"] .schedule-v2-kpi p {
  color: #0f172a;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

body[data-active-view="schedule"] .schedule-v2-kpi strong {
  margin-top: 5px;
  color: #020617;
  font-size: 20px;
  font-weight: 950;
}

body[data-active-view="schedule"] .schedule-v2-kpi small,
body[data-active-view="schedule"] .schedule-v2-kpi em {
  margin-top: 4px;
  color: #475569;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

body[data-active-view="schedule"] .schedule-v2-kpi-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

body[data-active-view="schedule"] .schedule-v2-kpi-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  background: #e8f8ec;
  color: #087a1e;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 900;
  border-radius: 0px;
}

.schedule-v2-progress {
  width: min(100%, 150px);
  height: 6px;
  margin: 8px 0 5px;
  background: #e2e8f0;
}

.schedule-v2-progress span {
  display: block;
  height: 100%;
  background: #087a1e;
}

body[data-active-view="schedule"] .schedule-v2-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid #dde7e2;
  background: #ffffff;
  margin-top: 12px;
}

body[data-active-view="schedule"] .schedule-v2-day {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 160px;
  border: 0;
  border-right: 1px solid #dde7e2;
  background: #ffffff;
  padding: 11px;
  text-align: left;
}

body[data-active-view="schedule"] .schedule-v2-day:last-child {
  border-right: 0;
}

body[data-active-view="schedule"] .schedule-v2-day.active {
  outline: 2px solid #087a1e;
  outline-offset: -2px;
}

body[data-active-view="schedule"] .schedule-v2-day > span {
  display: grid;
  gap: 2px;
}

body[data-active-view="schedule"] .schedule-v2-day > span strong {
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
}

body[data-active-view="schedule"] .schedule-v2-day > span small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

body[data-active-view="schedule"] .schedule-v2-day > b {
  position: absolute;
  justify-self: end;
  background: #dff8e7;
  color: #087a1e;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

body[data-active-view="schedule"] .schedule-v2-shift-card {
  display: grid;
  gap: 4px;
  background: #eef8f0;
  color: #087a1e;
  padding: 10px 11px;
}

body[data-active-view="schedule"] .schedule-v2-shift-card strong {
  color: #087a1e;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

body[data-active-view="schedule"] .schedule-v2-shift-card small,
body[data-active-view="schedule"] .schedule-v2-shift-card em {
  color: #334155;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

body[data-active-view="schedule"] .schedule-v2-shift-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}

body[data-active-view="schedule"] .schedule-v2-shift-badges em {
  background: #dcfce7;
  color: #087a1e;
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 900;
}

body[data-active-view="schedule"] .schedule-v2-no-shift {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 84px;
  color: #475569;
  text-align: center;
}

body[data-active-view="schedule"] .schedule-v2-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.85fr);
  gap: 14px;
  align-items: start;
  margin-top: 12px;
}

body[data-active-view="schedule"] .schedule-v2-detail-card,
body[data-active-view="schedule"] .schedule-v2-coworkers-card {
  min-height: 0;
  padding: 15px 16px;
}

body[data-active-view="schedule"] #upcomingShiftsCard.schedule-v2-detail-card {
  grid-row: auto;
  min-height: 0;
}

body[data-active-view="schedule"] #upcomingShiftsCard .empty-state,
body[data-active-view="schedule"] #upcomingShiftsSideCard .empty-state {
  min-height: 128px;
  padding: 20px 12px;
}

body[data-active-view="schedule"] .schedule-v2-detail-heading h3 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

body[data-active-view="schedule"] .schedule-v2-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
  gap: 14px;
}

body[data-active-view="schedule"] .schedule-v2-detail-grid p,
body[data-active-view="schedule"] .schedule-v2-detail-grid h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}

body[data-active-view="schedule"] .schedule-v2-time {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body[data-active-view="schedule"] .schedule-v2-time span {
  color: #2563eb;
  font-size: 11px;
}

body[data-active-view="schedule"] .schedule-v2-reminder {
  border: 1px solid #d9eee1;
  background: #eef8f0;
  color: #334155;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 750;
}

body[data-active-view="schedule"] .schedule-v2-coworker-list {
  display: grid;
  gap: 10px;
}

body[data-active-view="schedule"] .schedule-v2-coworker {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(120px, auto);
  gap: 9px;
  align-items: center;
}

body[data-active-view="schedule"] .schedule-v2-coworker strong,
body[data-active-view="schedule"] .schedule-v2-coworker small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-view="schedule"] .schedule-v2-coworker strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

body[data-active-view="schedule"] .schedule-v2-coworker small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body[data-active-view="schedule"] .schedule-v2-coworker-time {
  justify-self: end;
  text-align: right;
}

body[data-active-view="schedule"] .schedule-v2-coworker-time small {
  max-width: 150px;
}

body[data-active-view="schedule"] .schedule-v2-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

body[data-active-view="schedule"] .schedule-v2-action-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  border: 1px solid #dde7e2;
  background: #ffffff;
  padding: 12px 14px;
  text-align: left;
}

body[data-active-view="schedule"] .schedule-v2-action-card span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="schedule"] .schedule-v2-action-card.danger span:first-child {
  background: #fff1f2;
  color: #dc2626;
}

body[data-active-view="schedule"] .schedule-v2-action-card strong,
body[data-active-view="schedule"] .schedule-v2-action-card small {
  display: block;
}

body[data-active-view="schedule"] .schedule-v2-action-card strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-view="schedule"] .schedule-v2-action-card small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body[data-active-view="schedule"] .schedule-v2-team-card {
  padding: 0 0 18px;
  overflow-x: auto;
}

body[data-active-view="schedule"] .schedule-grid {
  display: grid;
  min-width: 1260px;
  grid-template-columns: minmax(180px, 1.1fr) repeat(7, minmax(132px, 1fr)) minmax(90px, 0.55fr);
  border: 0;
  overflow: visible;
}

body[data-active-view="schedule"] .schedule-grid-header,
body[data-active-view="schedule"] .schedule-employee-cell,
body[data-active-view="schedule"] .schedule-day-cell,
body[data-active-view="schedule"] .schedule-total-cell,
body[data-active-view="schedule"] .schedule-total-label {
  min-height: 58px;
  border-right: 1px solid #dde7e2;
  border-bottom: 1px solid #dde7e2;
  background: #ffffff;
  padding: 10px;
}

body[data-active-view="schedule"] .schedule-grid-header {
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

body[data-active-view="schedule"] .schedule-grid-header small,
body[data-active-view="schedule"] .schedule-employee-cell span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  text-transform: none;
}

body[data-active-view="schedule"] .schedule-employee-cell strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-view="schedule"] .schedule-day-cell {
  display: grid;
  place-items: center;
  gap: 6px;
  border-top: 0;
}

body[data-active-view="schedule"] .shift-pill,
body[data-active-view="schedule"] .schedule-v2-availability {
  display: grid;
  gap: 2px;
  min-width: 98px;
  max-width: 100%;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

body[data-active-view="schedule"] .shift-pill strong,
body[data-active-view="schedule"] .schedule-v2-availability strong {
  display: block;
  white-space: nowrap;
  line-height: 1.1;
}

body[data-active-view="schedule"] .shift-pill small,
body[data-active-view="schedule"] .schedule-v2-availability small {
  color: inherit;
  font-size: 10px;
  font-weight: 750;
}

body[data-active-view="schedule"] .shift-pill.open,
body[data-active-view="schedule"] .shift-pill.open_for_pickup {
  border-color: #86efac;
  background: #ecfdf3;
  color: #087a1e;
}

body[data-active-view="schedule"] .schedule-v2-availability.cannot-work,
body[data-active-view="schedule"] .schedule-v2-availability.unavailable {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #dc2626;
}

body[data-active-view="schedule"] .schedule-v2-availability.prefer-off {
  border-color: #fdba74;
  background: #fff7ed;
  color: #c2410c;
}

body[data-active-view="schedule"] .schedule-total-cell,
body[data-active-view="schedule"] .schedule-total-label {
  display: grid;
  place-items: center;
  min-height: 64px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

body[data-active-view="schedule"] .schedule-total-cell small,
body[data-active-view="schedule"] .schedule-total-cell strong {
  display: block;
  line-height: 1.15;
}

body[data-active-view="schedule"] .schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 12px 0;
  margin-top: 0;
  border-top: 1px solid #dde7e2;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

body[data-active-view="schedule"] .schedule-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-active-view="schedule"] .legend-dot,
body[data-active-view="schedule"] .legend-badge,
body[data-active-view="schedule"] .legend-dash {
  width: 10px;
  height: 10px;
  border-radius: 0px;
  flex: 0 0 10px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

body[data-active-view="schedule"] .legend-dot.scheduled {
  background: #3b82f6;
}

body[data-active-view="schedule"] .legend-dot.open {
  background: #087a1e;
}

body[data-active-view="schedule"] .legend-dot.pending {
  background: #f59e0b;
}

body[data-active-view="schedule"] .legend-badge.cannot-work {
  background: #ef4444;
}

body[data-active-view="schedule"] .legend-badge.prefer-off {
  background: #fdba74;
}

body[data-active-view="schedule"] .schedule-v2-hidden-support {
  display: none;
}

@media (max-width: 1100px) {
  body[data-active-view="schedule"] .schedule-v2-kpis,
  body[data-active-view="schedule"] .schedule-v2-details-grid,
  body[data-active-view="schedule"] .schedule-v2-action-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-view="schedule"] .schedule-v2-week-strip {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    overflow-x: auto;
  }
}

body[data-active-view="people"] .people-module {
  border: 0;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 18px;
}

body[data-active-view="people"] .data-card,
body[data-active-view="people"] .people-tab-panel.active,
body[data-active-view="people"] .person-profile,
body[data-active-view="people"] .person-hero,
body[data-active-view="people"] .modal-card,
body[data-active-view="people"] .modal-card-wide,
body[data-active-view="people"] .profile-summary-grid div,
body[data-active-view="people"] .permission-preview-item,
body[data-active-view="people"] .linked-account-card,
body[data-active-view="people"] .people-kpi-card {
  border-radius: 0px;
}

body[data-active-view="people"] .people-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 18px;
}

body[data-active-view="people"] .people-kpi-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 112px;
  border: 1px solid #dde7e2;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  padding: 18px 20px;
}

body[data-active-view="people"] .people-kpi-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 0px;
  background: #e8f8ec;
  color: #087a1e;
}

body[data-active-view="people"] .people-kpi-icon svg {
  width: 22px;
  height: 22px;
}

body[data-active-view="people"] .people-kpi-card span,
body[data-active-view="people"] .people-detail-fields span,
body[data-active-view="people"] .account-summary > span:first-child {
  display: block;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

body[data-active-view="people"] .people-kpi-card strong {
  display: block;
  margin-top: 2px;
  color: #071426;
  font-size: 26px;
  line-height: 1;
}

body[data-active-view="people"] .people-kpi-card small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body[data-active-view="people"] .people-tabs {
  gap: 28px;
  border: 0;
  border-bottom: 1px solid #dde7e2;
  border-radius: 0px;
  background: transparent;
  padding: 0;
}

body[data-active-view="people"] .people-tab,
body[data-active-view="people"] .profile-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  color: #334155;
  padding: 12px 0 10px;
}

body[data-active-view="people"] .people-tab.active,
body[data-active-view="people"] .profile-tab.active {
  border-color: #087a1e;
  background: transparent;
  box-shadow: none;
  color: #087a1e;
}

body[data-active-view="people"] .people-toolbar {
  grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(140px, 180px));
  border: 1px solid #dde7e2;
  border-radius: 0px;
  background: #fff;
  box-shadow: none;
  padding: 16px;
}

body[data-active-view="people"] .people-management-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.15fr);
  gap: 18px;
}

body[data-active-view="people"] .people-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body[data-active-view="people"] .people-setup-grid .data-card:last-child {
  grid-column: 1 / -1;
}

body[data-active-view="people"] .people-setup-empty .empty-state {
  min-height: 150px;
}

body[data-active-view="people"] .data-card {
  border: 1px solid #dde7e2;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

body[data-active-view="people"] .people-table {
  width: 100%;
  border-collapse: collapse;
}

body[data-active-view="people"] .people-table th {
  height: 48px;
  border-bottom: 1px solid #dde7e2;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-active-view="people"] .people-table td {
  min-width: 0;
  border-bottom: 1px solid #e2e8f0;
  color: #071426;
  font-size: 13px;
  vertical-align: middle;
}

body[data-active-view="people"] .people-table td span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body[data-active-view="people"] .selected-row {
  background: #f1faef;
  box-shadow: inset 3px 0 0 #087a1e;
}

body[data-active-view="people"] .status-badge,
body[data-active-view="people"] .access-pill,
body[data-active-view="people"] .mini-button,
body[data-active-view="people"] .button,
body[data-active-view="people"] input,
body[data-active-view="people"] select,
body[data-active-view="people"] textarea {
  border-radius: 0px;
}

body[data-active-view="people"] .mini-button,
body[data-active-view="people"] .button.subtle {
  border-color: #c9d6d0;
  background: #fff;
  color: #0f172a;
}

body[data-active-view="people"] .button.primary,
body[data-active-view="people"] .create-action-button {
  border-color: #087a1e;
  background: linear-gradient(180deg, #0b8f27 0%, #056915 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(8, 122, 30, 0.22);
}

body[data-active-view="people"] .person-hero {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background: #fff;
}

body[data-active-view="people"] .profile-tabs {
  gap: 24px;
  margin: 0 0 16px;
  padding-bottom: 0;
}

body[data-active-view="people"] .profile-summary-grid div,
body[data-active-view="people"] .permission-preview-item,
body[data-active-view="people"] .linked-account-card {
  border: 1px solid #dde7e2;
  background: #fbfdfb;
}

body[data-active-view="people"] .people-detail-card {
  display: grid;
  gap: 0;
  padding: 0;
}

body[data-active-view="people"] .people-detail-section {
  padding: 18px 20px;
  border-bottom: 1px solid #e2e8f0;
}

body[data-active-view="people"] .people-detail-section h4 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 14px;
}

body[data-active-view="people"] .people-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-active-view="people"] .people-detail-fields strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

body[data-active-view="people"] .linked-account-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

body[data-active-view="people"] .linked-account-card span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body[data-active-view="people"] .people-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 20px;
}

body[data-active-view="people"] .people-helper-note {
  margin: 0 0 12px;
  border: 1px solid #cfe8d7;
  border-radius: 0px;
  background: #f1faef;
  color: #0f5132;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
}

body[data-active-view="people"] .text-link {
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: #087a1e;
  padding: 0;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

body[data-active-view="people"] .table-action-buttons {
  align-items: center;
}

@media (max-width: 1280px) {
  body[data-active-view="people"] .people-kpi-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  body[data-active-view="people"] .people-management-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-view="people"] .people-setup-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-view="people"] .people-setup-grid .data-card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  body[data-active-view="people"] .people-kpi-grid,
  body[data-active-view="people"] .people-toolbar,
  body[data-active-view="people"] .people-detail-fields {
    grid-template-columns: 1fr;
  }
}

.brand-row {
  align-items: center;
  min-height: 42px;
  padding: 0 8px 18px;
}

.auth-brand-logo {
  display: block;
  object-fit: contain;
}

.app-frame.sidebar-collapsed .brand-row {
  justify-content: center;
  padding-inline: 0;
}

.auth-brand-logo {
  width: min(210px, 80%);
  height: 56px;
  margin-bottom: 18px;
  border-radius: 0px;
  background: transparent;
  filter: none;
}

.auth-copy {
  position: relative;
  min-height: 380px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0px;
  background:
    radial-gradient(circle at 42% 48%, rgba(255, 255, 255, 0.32), transparent 18%),
    linear-gradient(110deg, #7acc7b 0%, #56b86c 42%, #15a34a 100%);
  box-shadow: 0 18px 48px rgba(8, 122, 30, 0.18);
  padding: 56px 48px;
  overflow: hidden;
}

.auth-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 42%, rgba(255, 255, 255, 0.1));
  pointer-events: none;
}

.auth-copy > * {
  position: relative;
  z-index: 1;
}

.auth-copy .kicker,
.auth-copy h2,
.auth-copy p {
  color: #fff;
}

.auth-copy p {
  max-width: 500px;
  color: rgba(255, 255, 255, 0.86);
}

.auth-copy .auth-brand-logo {
  width: min(360px, 88%);
  height: 92px;
  margin-bottom: 30px;
  object-position: left center;
}

.auth-screen .card,
.auth-screen .form-card,
.auth-screen input,
.auth-screen button {
  border-radius: 0px;
}

.brand-row,
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 18px 14px;
  color: #fff;
  box-sizing: border-box;
}

.sidebar-brand-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-brand-mark svg {
  display: block;
  width: 26px;
  height: 26px;
  overflow: visible;
}

.brand-mark-ring,
.brand-mark-line,
.brand-mark-arrow {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.sidebar-brand-text {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

.app-frame.sidebar-collapsed .sidebar-brand-text {
  display: none;
}

.app-frame.sidebar-collapsed .sidebar-brand-mark {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.app-frame.sidebar-collapsed .brand-row,
.app-frame.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding: 0 0 14px;
}

.sidebar .nav-tab,
.sidebar .profile-card,
.sidebar .help-card,
.sidebar .collapse-button {
  border-radius: 0px;
}

body[data-active-view="dashboard"] .main {
  overflow-x: hidden;
}

#dashboardView.employee-dashboard {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  gap: 18px;
  padding: 24px 28px;
}

.employee-dashboard-grid {
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 18px;
}

.employee-card {
  min-height: 220px;
  border-radius: 0px;
  padding: 18px;
}

.employee-dashboard-actions .button,
.employee-dashboard-actions .icon-button,
.employee-icon-box,
.employee-status-pill,
.employee-chip-row span,
.training-date,
.soft-select,
.status-badge,
.pill,
.metric-badge {
  border-radius: 0px;
}

.employee-next-shift,
.employee-task-completion,
.employee-progress,
.employee-leaderboard {
  min-height: 220px;
}

.employee-tasks-card {
  grid-column: span 3;
  min-height: 250px;
}

.employee-announcements-card {
  grid-column: span 1;
  min-height: 250px;
}

.employee-training-card,
.employee-hours-card,
.employee-shift-notes-card {
  min-height: 210px;
}

.empty-dashboard-copy {
  margin-top: 18px;
}

.empty-dashboard-copy strong {
  font-size: 20px;
}

.employee-wip-list .empty-state {
  min-height: 120px;
}

.employee-dashboard-footer {
  max-width: 1480px;
}

@media (max-width: 1380px) {
  .employee-dashboard-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .employee-tasks-card,
  .employee-announcements-card {
    grid-column: span 2;
  }
}

@media (max-width: 860px) {
  #dashboardView.employee-dashboard {
    padding: 18px;
  }

  .employee-dashboard-grid,
  .employee-tasks-card,
  .employee-announcements-card {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}

/* Final collapsed sidebar correction: keep the rail clean and let pages use the freed width. */
.app-frame.sidebar-collapsed,
body[data-active-view] .app-frame.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed .sidebar {
  width: 64px;
  min-width: 64px;
  padding: 14px 8px;
  gap: 10px;
  overflow: hidden;
}

.app-frame.sidebar-collapsed .brand-row,
.app-frame.sidebar-collapsed .sidebar-brand {
  width: 48px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}

.app-frame.sidebar-collapsed .profile-card,
.app-frame.sidebar-collapsed .nav-tab,
.app-frame.sidebar-collapsed .help-card,
.app-frame.sidebar-collapsed .collapse-button {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.app-frame.sidebar-collapsed .profile-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.app-frame.sidebar-collapsed .nav-tab svg,
.app-frame.sidebar-collapsed .collapse-button svg,
.app-frame.sidebar-collapsed .help-card svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.app-frame.sidebar-collapsed .help-card {
  grid-template-columns: 1fr;
}

.app-frame.sidebar-collapsed .help-card div {
  width: 34px;
  height: 34px;
  border-width: 2px;
}

.app-frame.sidebar-collapsed .help-card > svg,
.app-frame.sidebar-collapsed .help-card span,
.app-frame.sidebar-collapsed .collapse-button span,
.app-frame.sidebar-collapsed .profile-card div:not(.profile-avatar),
.app-frame.sidebar-collapsed .profile-card > svg,
.app-frame.sidebar-collapsed .nav-tab span,
.app-frame.sidebar-collapsed .sidebar-brand-text {
  display: none !important;
}

.app-frame.sidebar-collapsed .sidebar-footer {
  width: 48px;
  margin: auto 0 0;
  gap: 10px;
  display: grid;
  justify-items: center;
}

.app-frame.sidebar-collapsed .main {
  width: 100%;
  min-width: 0;
}

.app-frame.sidebar-collapsed #dashboardView.employee-dashboard,
.app-frame.sidebar-collapsed .workspace-polished,
.app-frame.sidebar-collapsed .view.active {
  max-width: none;
}

/* Reference-style two-column sidebar. */
.app-frame,
body[data-active-view] .app-frame {
  grid-template-columns: 300px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  width: 300px;
  min-width: 300px;
  height: 100vh;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-right: 0;
  background: #063f25;
  color: #fff;
}

.sidebar-rail {
  width: 68px;
  flex: 0 0 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 22px 10px 14px;
  background: linear-gradient(180deg, #064e2a 0%, #03351f 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-main {
  width: 232px;
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 55% 7%, rgba(34, 197, 94, 0.18), transparent 36%),
    linear-gradient(180deg, #087a1e 0%, #064e2a 45%, #05351f 100%);
}

.sidebar-rail-brand {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  margin-bottom: 16px;
}

.sidebar-rail-brand svg {
  width: 28px;
  height: 28px;
  overflow: visible;
}

.sidebar-rail-nav {
  width: 100%;
  display: grid;
  gap: 8px;
}

.sidebar-rail .nav-tab {
  width: 48px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
}

.sidebar-rail .nav-tab span {
  display: none;
}

.sidebar-rail .nav-tab svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.sidebar-rail .nav-tab:hover,
.sidebar-rail .nav-tab.active {
  background: rgba(34, 197, 94, 0.26);
  color: #fff;
}

.sidebar-rail-collapse {
  width: 48px;
  height: 48px;
  min-height: 48px;
  margin-top: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: #fff;
}

.sidebar-rail-collapse span {
  display: none;
}

.sidebar-rail-collapse svg {
  width: 22px;
  height: 22px;
}

.sidebar-brand {
  height: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  color: #fff;
  box-sizing: border-box;
}

.sidebar-brand-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.sidebar-brand-mark svg {
  width: 22px;
  height: 22px;
}

.sidebar-brand-text {
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.brand-mark-ring,
.brand-mark-line,
.brand-mark-arrow {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.sidebar-main .profile-card {
  min-height: 84px;
  margin: 0 14px 20px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  gap: 10px;
}

.sidebar-main .profile-card strong,
.sidebar-main .profile-card span,
.sidebar-main .profile-card svg {
  color: #fff;
}

.sidebar-main .profile-card span {
  opacity: 0.88;
  line-height: 1.35;
}

.sidebar-main .profile-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  background: rgba(34, 197, 94, 0.45);
  color: #fff;
}

.sidebar-main .nav-tabs {
  display: grid;
  gap: 2px;
  overflow-y: auto;
  padding-bottom: 12px;
}

.sidebar-section-label {
  margin: 18px 0 8px;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sidebar-section-label:first-child {
  margin-top: 0;
}

.sidebar-main .nav-tab {
  height: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 800;
}

.sidebar-main .nav-tab svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.sidebar-main .nav-tab:hover,
.sidebar-main .nav-tab.active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.sidebar-main .sidebar-footer {
  margin: auto 0 0;
  padding-top: 10px;
  display: grid;
  gap: 0;
}

.sidebar-main .help-card {
  min-height: 66px;
  margin: 16px 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sidebar-main .help-card div {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 0px;
  background: transparent;
  color: #fff;
}

.sidebar-main .help-card strong,
.sidebar-main .help-card small,
.sidebar-main .help-card svg {
  color: #fff;
}

.sidebar-main .help-card small {
  opacity: 0.86;
}

.sidebar-main .collapse-button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0px;
  background: rgba(0, 0, 0, 0.08);
  color: #fff;
  font-weight: 800;
}

.sidebar-main .collapse-button svg {
  width: 20px;
  height: 20px;
}

.app-frame.sidebar-collapsed,
body[data-active-view] .app-frame.sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed .sidebar {
  width: 68px;
  min-width: 68px;
}

.app-frame.sidebar-collapsed .sidebar-main {
  display: none;
}

.app-frame.sidebar-collapsed .sidebar-rail-collapse svg {
  transform: rotate(180deg);
}

@media (max-width: 860px) {
  .app-frame,
  body[data-active-view] .app-frame,
  .app-frame.sidebar-collapsed,
  body[data-active-view] .app-frame.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .sidebar-rail {
    display: none;
  }

  .sidebar-main {
    width: 100%;
    flex-basis: 100%;
    min-height: auto;
  }
}

/* Expanded sidebar should be a single panel; the icon rail appears only when collapsed. */
.app-frame,
body[data-active-view] .app-frame {
  grid-template-columns: 232px minmax(0, 1fr);
}

.sidebar {
  width: 232px;
  min-width: 232px;
  background:
    radial-gradient(circle at 55% 7%, rgba(34, 197, 94, 0.18), transparent 36%),
    linear-gradient(180deg, #087a1e 0%, #064e2a 45%, #05351f 100%);
}

.sidebar-rail {
  display: none;
}

.sidebar-main {
  width: 232px;
  flex-basis: 232px;
  overflow: hidden;
}

.sidebar-brand {
  height: 54px;
  min-height: 54px;
  padding: 0 18px;
}

.sidebar-main .profile-card {
  min-height: 70px;
  margin: 0 14px 14px;
  padding: 12px 14px;
}

.sidebar-main .profile-avatar {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.sidebar-main .profile-card strong {
  font-size: 13px;
}

.sidebar-main .profile-card span {
  font-size: 11px;
}

.sidebar-main .nav-tabs {
  overflow: visible;
  gap: 1px;
  padding-bottom: 4px;
}

.sidebar-section-label {
  margin: 13px 0 5px;
  padding-left: 18px;
  font-size: 10px;
}

.sidebar-main .nav-tab {
  height: 35px;
  min-height: 35px;
  margin: 1px 12px;
  padding: 0 14px;
  gap: 11px;
  font-size: 13px;
}

.sidebar-main .nav-tab svg {
  width: 17px;
  height: 17px;
}

.sidebar-main .sidebar-footer {
  padding-top: 6px;
}

.sidebar-main .help-card {
  min-height: 58px;
  margin: 10px 14px;
  padding: 10px;
}

.sidebar-main .help-card div {
  width: 32px;
  height: 32px;
}

.sidebar-main .help-card strong {
  font-size: 13px;
}

.sidebar-main .help-card small {
  font-size: 11px;
}

.sidebar-main .collapse-button {
  min-height: 42px;
  padding: 0 18px;
}

.app-frame.sidebar-collapsed,
body[data-active-view] .app-frame.sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr);
}

.app-frame.sidebar-collapsed .sidebar {
  width: 68px;
  min-width: 68px;
  background: #063f25;
}

.app-frame.sidebar-collapsed .sidebar-rail {
  display: flex;
}

.app-frame.sidebar-collapsed .sidebar-main {
  display: none;
}

@media (max-width: 860px) {
  .sidebar-rail {
    display: none;
  }

  .app-frame.sidebar-collapsed .sidebar-rail {
    display: none;
  }
}

/* Sidebar profile and collapsed rail refinement. */
.sidebar-main .profile-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  column-gap: 12px;
  min-height: 74px;
  padding: 12px 12px 12px 16px;
}

.sidebar-main .profile-avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  align-self: center;
}

.sidebar-main .profile-card > div:not(.profile-avatar) {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: center;
}

.sidebar-main .profile-card strong,
.sidebar-main .profile-card span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-main .profile-card strong {
  line-height: 1.1;
}

.sidebar-main .profile-card span {
  line-height: 1.3;
}

.sidebar-main .profile-card > svg {
  width: 15px;
  height: 15px;
  margin-left: 0;
  align-self: center;
}

.app-frame.sidebar-collapsed .sidebar {
  padding: 0;
  align-items: stretch;
  overflow: hidden;
}

.app-frame.sidebar-collapsed .sidebar-rail {
  width: 68px;
  flex-basis: 68px;
  min-height: 100vh;
  padding: 20px 8px 18px;
}

.app-frame.sidebar-collapsed .sidebar-rail-brand {
  width: 52px;
  height: 44px;
  margin-bottom: 14px;
}

.app-frame.sidebar-collapsed .sidebar-rail-nav {
  display: grid;
  justify-items: center;
  gap: 7px;
}

.app-frame.sidebar-collapsed .sidebar-rail .nav-tab {
  width: 48px;
  height: 42px;
  min-height: 42px;
}

.app-frame.sidebar-collapsed .sidebar-rail .nav-tab svg {
  width: 19px;
  height: 19px;
}

.app-frame.sidebar-collapsed .sidebar-rail-collapse {
  width: 48px;
  height: 44px;
  min-height: 44px;
  margin-top: auto;
}

.app-frame.sidebar-collapsed .sidebar-rail-collapse svg {
  width: 21px;
  height: 21px;
}

.metabase-shell {
  display: grid;
  gap: 16px;
  min-height: calc(100vh - 150px);
}

.metabase-frame-card {
  min-height: calc(100vh - 150px);
  border: 1px solid #dde7e2;
  border-radius: 0px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.metabase-frame-card iframe {
  display: block;
  width: 100%;
  min-height: calc(100vh - 150px);
  border: 0;
  background: #fff;
}

/* Sidebar brand lockup for the OneSpotOps wordmark. */
.sidebar-brand {
  height: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: #ffffff;
  color: #064e2a;
  box-sizing: border-box;
  box-shadow: 0 10px 22px rgba(4, 53, 30, 0.16);
}

.sidebar-brand-logo {
  display: block;
  width: min(188px, 100%);
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

.sidebar-brand-mark-img {
  display: block;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  object-fit: contain;
}

.sidebar-brand-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-brand-mark svg,
.sidebar-rail-brand svg,
.sidebar-rail-brand img {
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
}

.brand-mark-ring,
.brand-mark-line,
.brand-mark-arrow {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.sidebar-brand-text {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  color: #064e2a;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: nowrap;
  text-shadow: none;
}

.sidebar-brand-text .brand-text-dark {
  color: #064e2a;
}

.sidebar-brand-text .brand-text-bright {
  color: #16a34a;
}

.app-frame.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  margin: 8px 0 10px;
  padding: 0;
}

.app-frame.sidebar-collapsed .sidebar-brand-text {
  display: none !important;
}

.app-frame.sidebar-collapsed .sidebar-brand-logo {
  display: none !important;
}

.app-frame.sidebar-collapsed .sidebar-brand-mark-img {
  display: none !important;
}

.app-frame.sidebar-collapsed .sidebar-rail-brand {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(4, 53, 30, 0.18);
}

/* White sidebar brand treatment. */
.sidebar,
.sidebar-main,
.sidebar-rail {
  background: #ffffff !important;
  color: #0f172a;
}

.sidebar {
  border-right: 1px solid #dbe7df;
  box-shadow: 10px 0 28px rgba(15, 23, 42, 0.05);
}

.sidebar-main {
  border-right: 0;
}

.sidebar-rail {
  border-right: 1px solid #dbe7df;
}

.sidebar-brand {
  margin: 8px 12px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar-brand-mark-img {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}

.sidebar-brand-text {
  font-size: 18px;
}

.sidebar-section-label {
  color: #087a1e !important;
}

.sidebar-main .profile-card,
.sidebar-main .help-card {
  border-color: #cfe2d6;
  background: #f6fbf7;
  color: #0f172a;
}

.sidebar-main .profile-card strong,
.sidebar-main .help-card strong {
  color: #0f172a;
}

.sidebar-main .profile-card span,
.sidebar-main .help-card small,
.sidebar-main .profile-card svg,
.sidebar-main .help-card svg {
  color: #335244;
  stroke: #335244;
}

.sidebar-main .profile-avatar,
.sidebar-main .help-card div {
  background: linear-gradient(135deg, #064e2a 0%, #087a1e 52%, #16a34a 100%);
  color: #ffffff;
}

.sidebar-main .nav-tab,
.sidebar-main .collapse-button,
.sidebar-rail .nav-tab,
.sidebar-rail-collapse {
  color: #123326;
}

.sidebar-main .nav-tab svg,
.sidebar-main .collapse-button svg,
.sidebar-rail .nav-tab svg,
.sidebar-rail-collapse svg {
  stroke: #087a1e;
}

.sidebar-main .nav-tab:hover,
.sidebar-main .nav-tab.active,
.sidebar-rail .nav-tab:hover,
.sidebar-rail .nav-tab.active {
  background: #eaf8ed;
  color: #064e2a;
}

.sidebar-main .nav-tab:hover svg,
.sidebar-main .nav-tab.active svg,
.sidebar-rail .nav-tab:hover svg,
.sidebar-rail .nav-tab.active svg {
  stroke: #064e2a;
}

.sidebar-main .sidebar-footer {
  border-top-color: #dbe7df;
}

.app-frame.sidebar-collapsed .sidebar-rail-brand,
.sidebar-rail-brand {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar-rail-brand img {
  width: 38px;
  height: 38px;
}

/* Create Log modal. Internal IDs still use observation for API compatibility. */
.new-observation-modal .create-log-body {
  padding: 24px 28px;
}

.create-log-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.create-log-form-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.create-log-form-column .field select,
.create-log-form-column .field input,
.create-log-form-column .field textarea,
.create-log-ack-check,
.log-history-panel,
.log-history-card {
  border-radius: 0px;
}

.create-log-form-column .field select,
.create-log-form-column .field input,
.create-log-form-column .field textarea {
  border: 1px solid #c9d6d0;
  box-shadow: none;
}

.create-log-form-column .field select:focus,
.create-log-form-column .field input:focus,
.create-log-form-column .field textarea:focus,
.create-log-form-column .field select:focus-visible,
.create-log-form-column .field input:focus-visible,
.create-log-form-column .field textarea:focus-visible {
  outline: none;
  border-color: #087a1e;
  box-shadow: 0 0 0 1px #087a1e;
}

.create-log-form-column textarea {
  min-height: 118px;
  resize: vertical;
}

.create-log-form-column input[readonly] {
  color: #087a1e;
  font-weight: 900;
  background: #f1faef;
}

.create-log-ack-check {
  align-items: flex-start;
  border: 1px solid #dde7e2;
  background: #f8fbf8;
  padding: 12px;
  gap: 10px;
}

.create-log-ack-check span {
  display: grid;
  gap: 3px;
}

.create-log-ack-check small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.log-history-panel {
  position: sticky;
  top: 12px;
  border: 1px solid #dde7e2;
  background: #fff;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  max-height: min(62vh, 620px);
  overflow-y: auto;
}

.log-history-panel h4 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

.log-history-panel > p {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.log-history-empty,
.log-history-list {
  display: grid;
  gap: 10px;
}

.log-history-empty {
  border: 1px solid #dde7e2;
  background: #f8fbf8;
  padding: 12px;
}

.log-history-empty strong,
.log-history-card strong {
  color: #0f172a;
  font-weight: 900;
}

.log-history-empty span,
.log-history-card small,
.log-history-card p {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.log-history-card {
  display: grid;
  gap: 6px;
  border: 1px solid #dde7e2;
  background: #fff;
  padding: 12px;
}

.log-history-card > span {
  width: max-content;
  border: 1px solid #9be7af;
  background: #e8f8ec;
  color: #087a1e;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 900;
}

.log-history-card p {
  margin: 0;
}

@media (max-width: 900px) {
  .create-log-layout {
    grid-template-columns: 1fr;
  }

  .log-history-panel {
    position: static;
    max-height: 260px;
  }
}

/* Team Schedule reference pass. */
body[data-active-view="schedule"] .content {
  background: #f7faf8;
}

body[data-active-view="schedule"] #scheduleView.workspace-polished {
  min-height: 100vh;
  background: #f7faf8;
  padding: 28px 40px 32px;
  color: #0f172a;
}

body[data-active-view="schedule"] .schedule-shell.schedule-v2 {
  display: grid;
  gap: 0;
  max-width: none;
  margin: 0;
}

body[data-active-view="schedule"] .schedule-v2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

body[data-active-view="schedule"] .schedule-v2-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

body[data-active-view="schedule"] .schedule-v2-header p {
  margin: 10px 0 0;
  color: #475569;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

body[data-active-view="schedule"] .schedule-v2-header-actions {
  display: grid;
  grid-template-columns: repeat(3, 180px);
  gap: 14px 16px;
  align-items: start;
}

body[data-active-view="schedule"] .schedule-v2-header-actions .button,
body[data-active-view="schedule"] .schedule-admin-actions .button {
  justify-content: center;
  height: 44px;
  min-height: 44px;
  border: 1px solid #cbd5d1;
  background: #fff;
  color: #0f172a;
  padding: 0 18px;
  border-radius: 0px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  gap: 10px;
}

body[data-active-view="schedule"] #openManagerAvailabilityButton,
body[data-active-view="schedule"] #openPresetModalButton,
body[data-active-view="schedule"] #schedulePublishButton.publish-schedule-button,
body[data-active-view="schedule"] #openShiftModalButton,
body[data-active-view="schedule"] #scheduleFullscreenButton,
body[data-active-view="schedule"] #schedulePrintButton,
body[data-active-view="schedule"] #scheduleExitFullscreenButton {
  background: linear-gradient(135deg, #064E2A 0%, #087A1E 48%, #16A34A 100%);
  border-color: #087A1E;
  color: #FFFFFF;
}

body[data-active-view="schedule"] #openManagerAvailabilityButton svg,
body[data-active-view="schedule"] #openPresetModalButton svg,
body[data-active-view="schedule"] #schedulePublishButton.publish-schedule-button svg,
body[data-active-view="schedule"] #openShiftModalButton svg,
body[data-active-view="schedule"] #scheduleFullscreenButton svg,
body[data-active-view="schedule"] #schedulePrintButton svg,
body[data-active-view="schedule"] #scheduleExitFullscreenButton svg {
  color: #FFFFFF;
  stroke: #FFFFFF;
}

body[data-active-view="schedule"] #openManagerAvailabilityButton:hover,
body[data-active-view="schedule"] #openPresetModalButton:hover,
body[data-active-view="schedule"] #schedulePublishButton.publish-schedule-button:hover,
body[data-active-view="schedule"] #openShiftModalButton:hover,
body[data-active-view="schedule"] #scheduleFullscreenButton:hover,
body[data-active-view="schedule"] #schedulePrintButton:hover,
body[data-active-view="schedule"] #scheduleExitFullscreenButton:hover {
  background: linear-gradient(135deg, #053D22 0%, #067018 45%, #22C55E 100%);
  border-color: #16A34A;
  color: #FFFFFF;
}

body[data-active-view="schedule"] #openManagerAvailabilityButton:hover svg,
body[data-active-view="schedule"] #openPresetModalButton:hover svg,
body[data-active-view="schedule"] #schedulePublishButton.publish-schedule-button:hover svg,
body[data-active-view="schedule"] #openShiftModalButton:hover svg,
body[data-active-view="schedule"] #scheduleFullscreenButton:hover svg,
body[data-active-view="schedule"] #schedulePrintButton:hover svg,
body[data-active-view="schedule"] #scheduleExitFullscreenButton:hover svg {
  color: #FFFFFF;
  stroke: #FFFFFF;
}

body[data-active-view="schedule"] #openManagerAvailabilityButton:active,
body[data-active-view="schedule"] #openPresetModalButton:active,
body[data-active-view="schedule"] #schedulePublishButton.publish-schedule-button:active,
body[data-active-view="schedule"] #openShiftModalButton:active,
body[data-active-view="schedule"] #scheduleFullscreenButton:active,
body[data-active-view="schedule"] #schedulePrintButton:active,
body[data-active-view="schedule"] #scheduleExitFullscreenButton:active {
  background: linear-gradient(135deg, #04351E 0%, #065F1B 50%, #0F8F37 100%);
  border-color: #065F1B;
  color: #FFFFFF;
}

body[data-active-view="schedule"] #openManagerAvailabilityButton:focus-visible,
body[data-active-view="schedule"] #openPresetModalButton:focus-visible,
body[data-active-view="schedule"] #schedulePublishButton.publish-schedule-button:focus-visible,
body[data-active-view="schedule"] #openShiftModalButton:focus-visible,
body[data-active-view="schedule"] #scheduleFullscreenButton:focus-visible,
body[data-active-view="schedule"] #schedulePrintButton:focus-visible,
body[data-active-view="schedule"] #scheduleExitFullscreenButton:focus-visible {
  outline: 2px solid #22C55E;
  outline-offset: 2px;
}

body[data-active-view="schedule"] #openManagerAvailabilityButton:disabled,
body[data-active-view="schedule"] #openPresetModalButton:disabled,
body[data-active-view="schedule"] #schedulePublishButton.publish-schedule-button:disabled,
body[data-active-view="schedule"] #openShiftModalButton:disabled,
body[data-active-view="schedule"] #scheduleFullscreenButton:disabled,
body[data-active-view="schedule"] #schedulePrintButton:disabled,
body[data-active-view="schedule"] #scheduleExitFullscreenButton:disabled {
  background: linear-gradient(135deg, #94A3B8 0%, #CBD5E1 100%);
  border-color: #CBD5E1;
  color: #FFFFFF;
  cursor: not-allowed;
  opacity: 0.75;
}

body[data-active-view="schedule"] #openManagerAvailabilityButton:disabled svg,
body[data-active-view="schedule"] #openPresetModalButton:disabled svg,
body[data-active-view="schedule"] #schedulePublishButton.publish-schedule-button:disabled svg,
body[data-active-view="schedule"] #openShiftModalButton:disabled svg,
body[data-active-view="schedule"] #scheduleFullscreenButton:disabled svg,
body[data-active-view="schedule"] #schedulePrintButton:disabled svg,
body[data-active-view="schedule"] #scheduleExitFullscreenButton:disabled svg {
  color: #FFFFFF;
  stroke: #FFFFFF;
}

body[data-active-view="schedule"] #scheduleModeRow {
  display: flex;
  justify-content: center;
  margin: -8px 0 26px;
}

body[data-active-view="schedule"] #scheduleModeTabs {
  display: flex;
  justify-content: center;
  gap: 48px;
  width: auto;
  border: 0;
  background: transparent;
  padding: 0;
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab {
  min-width: 140px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid #cbd5e1;
  background: transparent;
  color: #475569;
  box-shadow: none;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab.active {
  border-bottom: 2px solid #007a2f;
  background: transparent;
  color: #007a2f;
  box-shadow: none;
}

body[data-active-view="schedule"] #scheduleModeTabs .status-tab.active::after {
  display: none;
}

body[data-active-view="schedule"] .schedule-admin-actions {
  display: contents;
}

body[data-active-view="schedule"] .schedule-v2-week-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
  margin: 0 0 22px;
}

body[data-active-view="schedule"] #schedulePrevWeek,
body[data-active-view="schedule"] #scheduleNextWeek {
  width: 48px;
  height: 48px;
  min-height: 48px;
  border: 1px solid #cbd5d1;
  background: #fff;
  color: #0f172a;
  box-shadow: none;
}

body[data-active-view="schedule"] .schedule-v2-week-label {
  height: 48px;
  min-height: 48px;
  min-width: 210px;
  border: 1px solid #cbd5d1;
  border-right: 0;
  border-left: 0;
  background: #fff;
  color: #0f172a;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 900;
  gap: 10px;
}

body[data-active-view="schedule"] .schedule-v2-week-label svg {
  color: #007a2f;
}

body[data-active-view="schedule"] .schedule-week-menu-wrap {
  margin-left: auto;
  margin-right: 16px;
}

body[data-active-view="schedule"] #scheduleCurrentWeek {
  height: 44px;
  min-height: 44px;
  width: 150px;
  justify-content: center;
  border: 1px solid #cbd5d1;
  background: #fff;
  color: #0f172a;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
}

body[data-active-view="schedule"] #scheduleLocationField {
  width: 190px;
  margin: 0;
}

body[data-active-view="schedule"] #scheduleLocationField span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-active-view="schedule"] #scheduleLocationSelect {
  height: 44px;
  border: 1px solid #cbd5d1;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  border-radius: 0px;
}

body[data-active-view="schedule"] #locationScheduleSummary.schedule-v2-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 22px;
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-kpi {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  min-height: 108px;
  border: 1px solid #cbd5d1;
  background: #fff;
  box-shadow: none;
  padding: 0 24px 0 0;
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-kpi::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: #008a37;
  content: "";
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-kpi.red::before {
  background: #ff1f1f;
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-icon {
  width: 86px;
  height: 100%;
  background: transparent;
  color: #007a2f;
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-icon svg {
  width: 44px;
  height: 44px;
  stroke-width: 2;
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-kpi.red .schedule-v2-icon {
  color: #ff1f1f;
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-kpi p {
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-kpi strong {
  margin-top: 8px;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

body[data-active-view="schedule"] #locationScheduleSummary .schedule-v2-kpi small {
  margin-top: 8px;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
}

body[data-active-view="schedule"] .schedule-v2-team-card {
  border: 1px solid #cbd5d1;
  border-radius: 0px;
  background: #fff;
  box-shadow: none;
  padding: 0;
  overflow-x: auto;
}

body[data-active-view="schedule"] .schedule-grid {
  display: grid;
  min-width: 1200px;
  grid-template-columns: 190px repeat(7, minmax(150px, 1fr)) 120px;
  border: 0;
  background: #fff;
}

body[data-active-view="schedule"] .schedule-grid-header {
  display: grid;
  place-items: center;
  min-height: 52px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid #004225;
  background: #005a36;
  color: #fff;
  padding: 8px 12px;
  text-align: center;
}

body[data-active-view="schedule"] .schedule-grid-header.employee-col {
  place-items: center start;
  text-align: left;
}

body[data-active-view="schedule"] .schedule-grid-header strong {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

body[data-active-view="schedule"] .schedule-grid-header small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

body[data-active-view="schedule"] .schedule-employee-cell,
body[data-active-view="schedule"] .schedule-day-cell,
body[data-active-view="schedule"] .schedule-total-cell,
body[data-active-view="schedule"] .schedule-total-label {
  min-height: 58px;
  border-right: 1px solid #d9e2de;
  border-bottom: 1px solid #d9e2de;
  background: #fff;
  padding: 10px 12px;
}

body[data-active-view="schedule"] .schedule-employee-cell {
  display: grid;
  align-content: center;
  text-align: left;
}

body[data-active-view="schedule"] .schedule-employee-cell strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

body[data-active-view="schedule"] .schedule-employee-cell span {
  margin-top: 3px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

body[data-active-view="schedule"] .schedule-day-cell {
  display: grid;
  place-items: center;
  gap: 6px;
  color: #0f172a;
}

body[data-active-view="schedule"] .shift-pill,
body[data-active-view="schedule"] .schedule-v2-availability {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 0px;
  padding: 0 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

body[data-active-view="schedule"] .shift-pill small,
body[data-active-view="schedule"] .schedule-v2-availability small {
  display: none;
}

body[data-active-view="schedule"] .shift-pill.scheduled {
  border-color: #c9ebd1;
  border-left-color: #008a37;
  background: #eaf8ed;
  color: #006b2b;
}

body[data-active-view="schedule"] .shift-pill.open {
  border-color: #c7daff;
  border-left-color: #1d6fff;
  background: #eaf2ff;
  color: #0b63f6;
}

body[data-active-view="schedule"] .shift-pill.pending {
  border-color: #ffd7a3;
  border-left-color: #f59e0b;
  background: #fff4e5;
  color: #d45a00;
}

body[data-active-view="schedule"] .shift-pill.cannot-work,
body[data-active-view="schedule"] .schedule-v2-availability.cannot-work,
body[data-active-view="schedule"] .schedule-v2-availability.unavailable {
  border-color: #ffc8c8;
  border-left-color: #ff2a2a;
  background: #ffeaea;
  color: #e00000;
}

body[data-active-view="schedule"] .schedule-v2-availability.prefer-off {
  border-color: #dcc2ff;
  border-left-color: #7c3fa0;
  background: #f6ecff;
  color: #6b2e91;
}

body[data-active-view="schedule"] .schedule-v2-availability.unavailable strong {
  display: block;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

body[data-active-view="schedule"] .schedule-v2-availability.unavailable {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 38px;
  padding-top: 4px;
  padding-bottom: 4px;
  white-space: normal;
}

body[data-active-view="schedule"] .schedule-v2-availability.unavailable small {
  display: block;
  margin-top: 2px;
  color: inherit;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

body[data-active-view="schedule"] .no-shift {
  color: #94a3b8;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

body[data-active-view="schedule"] .schedule-total-cell,
body[data-active-view="schedule"] .schedule-total-label {
  display: grid;
  place-items: center;
  color: #007a2f;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}

body[data-active-view="schedule"] .schedule-total-label {
  color: #0f172a;
}

body[data-active-view="schedule"] .schedule-total-cell small {
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
}

body[data-active-view="schedule"] .schedule-total-cell strong {
  color: #007a2f;
  font-size: 14px;
  font-weight: 900;
}

body[data-active-view="schedule"] .schedule-legend {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  border-top: 1px solid #d9e2de;
  background: #fff;
  padding: 16px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

body[data-active-view="schedule"] .schedule-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.schedule-print-header {
  display: none;
}

body.schedule-fullscreen-open {
  overflow: hidden;
}

body.schedule-fullscreen-open .sidebar {
  display: none !important;
}

body.schedule-fullscreen-open .main {
  margin: 0;
  width: 100vw;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  overflow: auto;
  background: #f7faf8;
  padding: 24px;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell .schedule-shell {
  display: grid;
  gap: 18px;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell .schedule-v2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell .schedule-v2-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell .schedule-v2-header p {
  margin-top: 6px;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell .schedule-v2-header-actions {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell #scheduleModeRow,
body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell #locationScheduleSummary {
  display: none !important;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell .schedule-week-menu-wrap {
  margin-left: auto;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell .schedule-v2-team-card {
  padding: 0;
  overflow: auto;
  border: 1px solid #cbd5d1;
  background: #ffffff;
}

body[data-active-view="schedule"] #scheduleView.schedule-fullscreen-shell .schedule-grid {
  width: 100%;
  min-width: 1200px;
}

@page {
  size: landscape;
  margin: 0.35in;
}

@media print {
  html,
  body {
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .sidebar,
  .schedule-v2-header,
  .schedule-v2-week-row,
  #scheduleModeRow,
  #locationScheduleSummary,
  .schedule-side,
  #activePresetBanner,
  .no-print {
    display: none !important;
  }

  .main,
  .content,
  #scheduleView,
  .schedule-shell,
  #scheduleLocationPanel,
  .schedule-print-area {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #scheduleMyPanel {
    display: none !important;
  }

  #scheduleLocationPanel {
    display: block !important;
  }

  .schedule-print-header {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 0 10px;
  }

  .schedule-print-header h1 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
  }

  .schedule-print-header p {
    margin: 0;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }

  .schedule-print-brand {
    color: #0f172a;
    font-size: 10px;
    font-weight: 800;
  }

  body[data-active-view="schedule"] .schedule-v2-team-card {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    border: 1px solid #cbd5d1 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body[data-active-view="schedule"] .schedule-grid {
    display: grid !important;
    grid-template-columns: 15% repeat(7, 10.5%) 7.5% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 1.5px solid #9fb3aa !important;
    background: #9fb3aa !important;
    gap: 1px !important;
    font-size: 8px !important;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body[data-active-view="schedule"] .schedule-grid > * {
    min-width: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0.5px solid #9fb3aa !important;
    outline-offset: -0.5px !important;
  }

  body[data-active-view="schedule"] .schedule-grid-header {
    background: #005a36 !important;
    color: #ffffff !important;
    min-height: 30px !important;
    padding: 4px 5px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body[data-active-view="schedule"] .schedule-employee-cell,
  body[data-active-view="schedule"] .schedule-day-cell,
  body[data-active-view="schedule"] .schedule-total-cell,
  body[data-active-view="schedule"] .schedule-total-label {
    background: #ffffff !important;
  }

  body[data-active-view="schedule"] .schedule-grid-header strong,
  body[data-active-view="schedule"] .schedule-grid-header small {
    color: #ffffff !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  body[data-active-view="schedule"] .schedule-employee-cell {
    min-height: 38px !important;
    padding: 4px 5px !important;
  }

  body[data-active-view="schedule"] .schedule-employee-cell strong {
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  body[data-active-view="schedule"] .schedule-employee-cell span {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }

  body[data-active-view="schedule"] .schedule-day-cell {
    min-height: 38px !important;
    padding: 3px 4px !important;
    gap: 2px !important;
  }

  body[data-active-view="schedule"] .schedule-total-cell,
  body[data-active-view="schedule"] .schedule-total-label {
    min-height: 38px !important;
    padding: 3px 4px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  body[data-active-view="schedule"] .shift-pill,
  body[data-active-view="schedule"] .schedule-v2-availability {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 16px !important;
    box-sizing: border-box !important;
    padding: 3px 4px !important;
    margin: 1px 0 !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  body[data-active-view="schedule"] .shift-pill strong,
  body[data-active-view="schedule"] .schedule-v2-availability strong,
  body[data-active-view="schedule"] .schedule-v2-availability small {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }

  body[data-active-view="schedule"] .schedule-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 8px !important;
    border-top: 0 !important;
    padding: 6px 0 0 !important;
    font-size: 8px !important;
  }

  body[data-active-view="schedule"] .shift-pill,
  body[data-active-view="schedule"] .schedule-v2-availability,
  body[data-active-view="schedule"] .schedule-legend,
  body[data-active-view="schedule"] .schedule-legend *,
  body[data-active-view="schedule"] .schedule-grid-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

body[data-active-view="schedule"] .legend-dot,
body[data-active-view="schedule"] .legend-badge,
body[data-active-view="schedule"] .legend-dash {
  width: 10px;
  height: 14px;
  border-radius: 0px;
  flex: 0 0 10px;
  font-size: 0;
}

body[data-active-view="schedule"] .legend-dot.scheduled {
  background: #008a37;
}

body[data-active-view="schedule"] .legend-dot.open {
  background: #1d6fff;
}

body[data-active-view="schedule"] .legend-dot.pending {
  background: #f59e0b;
}

body[data-active-view="schedule"] .legend-badge.cannot-work {
  background: #ff2a2a;
}

body[data-active-view="schedule"] .legend-badge.prefer-off {
  background: #7c3fa0;
}

body[data-active-view="schedule"] .legend-dash {
  height: auto;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
}

@media screen and (max-width: 980px) {
  body[data-active-view="schedule"] #scheduleView.workspace-polished {
    padding: 22px 18px 28px;
  }

  body[data-active-view="schedule"] .schedule-v2-header,
  body[data-active-view="schedule"] .schedule-v2-week-row {
    flex-wrap: wrap;
  }

  body[data-active-view="schedule"] .schedule-v2-header-actions {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    width: 100%;
  }

  body[data-active-view="schedule"] #locationScheduleSummary.schedule-v2-kpis {
    grid-template-columns: 1fr;
  }
}
#observationModal input,
#observationModal select,
#observationModal textarea,
#observationModal button,
#observationModal .modal-card,
#observationModal .log-history-panel,
#observationModal .check {
  border-radius: 0;
}

.native-progress {
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.native-progress::-webkit-progress-bar {
  background: rgba(15, 23, 42, 0.08);
}

.native-progress::-webkit-progress-value,
.native-progress::-moz-progress-bar {
  background: var(--onespotops-green, #16a34a);
}

.hours-bar-native {
  width: 10px;
  height: 72px;
  appearance: none;
  border: 0;
  border-radius: 0;
  writing-mode: vertical-lr;
}

.active-preset-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #eaf8ed;
  border: 1px solid #9bd9aa;
  color: #005a24;
  font-size: 13px;
  font-weight: 900;
  border-radius: 0;
}

.active-preset-banner button {
  min-height: 30px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #008a37;
  color: #006b2b;
  font-weight: 900;
  border-radius: 0;
  cursor: pointer;
}

.schedule-context-menu {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 9999;
  min-width: 210px;
  background: #fff;
  border: 1px solid #cbd5d1;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  border-radius: 0;
  padding: 6px 0;
}

.schedule-context-submenu {
  max-height: min(320px, calc(100vh - 24px));
  overflow-y: auto;
}

.schedule-context-menu-item {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 0;
}

.schedule-context-menu-item:hover {
  background: #eaf8ed;
  color: #007a2f;
}

.schedule-context-menu-item.danger {
  color: #b91c1c;
}

.schedule-context-menu-item.danger:hover {
  background: #fee2e2;
  color: #991b1b;
}

.schedule-context-menu-divider {
  height: 1px;
  margin: 6px 0;
  background: #e2e8f0;
}

.schedule-context-menu-item span {
  display: grid;
  gap: 2px;
}

.schedule-context-menu-item small,
.schedule-context-menu-label span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.schedule-context-menu-label,
.schedule-context-menu-empty {
  display: grid;
  gap: 3px;
  padding: 8px 12px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.schedule-context-menu-empty {
  color: #64748b;
}

.schedule-day-cell.preset-placement-active {
  cursor: copy;
}

.schedule-day-cell.preset-placement-active:hover {
  background: #f0fbf3;
  outline: 2px solid #22c55e;
  outline-offset: -2px;
}

.shift-pill.preset-shift {
  background: #eaf8ed;
  border: 1px solid #c9ebd1;
  border-left: 4px solid #008a37;
  color: #006b2b;
  border-radius: 0;
  font-size: 13px;
  font-weight: 900;
}