/*
  Legacy compatibility shim.
  Primary control panel styling is compiled at runtime via Tailwind CDN
  from templates/control_panel/_tailwind_primitives.css.
*/

:root {
  --cp-brand: #0A3B13;
  --cp-brand-soft: #87A284;
  --cp-bg: #f8f8f8;
  --cp-surface: #ffffff;
  --cp-subtle: #ede7d9;
  --cp-warm: #E9F54F;
  --cp-text: #1f2a27;
  --cp-text-muted: #4a5a56;
  --cp-border: #ddd6c5;
  --cp-error: #a5544c;
  --cp-success: #104C1B;
  --forest: #0a3b13;
  --forest-2: #14521f;
  --lime: #e9f54f;
  --cream: #f8f8f8;
  --cream-2: #fbf7f1;
  --white: #fff;
  --ink: #1c2b1e;
  --muted: #435447;
  --dim: #657468;
  --line: #e8dfd3;
  --good: #2e7d3d;
  --off: #5b6472;
  --off-bg: #e7e4de;
  --warn: #e9f54f;
  --danger: #d32f2f;
  --danger-bg: #fff1f1;
  --warn-bg: #f7fadf;
  --shadow: 0 8px 28px rgba(37, 53, 39, .07);
  --cp-sticky-top: 0px;
}

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

html,
body,
button,
input,
select,
textarea {
  font-family: Roboto, "Segoe UI", sans-serif !important;
}

html,
body {
  font-size: 14px !important;
  line-height: 1.42 !important;
}

body {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

h1,
h2,
h3,
h4,
.cp-brand,
.section-title,
.sales-approved h1,
.dashboard-approved h1 {
  font-family: Roboto, "Segoe UI", sans-serif !important;
}

.cp-shell {
  grid-template-columns: 246px minmax(0, 1fr) !important;
}

.cp-sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  gap: 0 !important;
  overflow: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  border-right: 0 !important;
  background: var(--forest) !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, .76) !important;
  box-shadow: none !important;
}

.cp-sidebar::-webkit-scrollbar {
  display: none !important;
}

.cp-sidebar-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 22px 20px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
}

.cp-sidebar-head a {
  gap: 12px !important;
}

.cp-sidebar-head img {
  width: 33px !important;
  height: 29px !important;
  object-fit: contain !important;
}

.cp-brand {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: lowercase !important;
}

.cp-subtitle {
  margin-top: 6px !important;
  color: var(--lime) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

.cp-sidebar-close {
  display: none !important;
}

.cp-sidebar-collapse-toggle {
  display: none;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, .8) !important;
  background: rgba(255, 255, 255, .06) !important;
  cursor: pointer !important;
}

.cp-sidebar-collapse-toggle:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
}

.cp-sidebar-collapse-toggle .cp-icon {
  width: 15px !important;
  height: 15px !important;
  transition: transform .18s ease !important;
}

.cp-shell {
  transition: grid-template-columns .18s ease !important;
}

@media (min-width: 1181px) {
  .cp-sidebar-collapse-toggle {
    display: inline-flex !important;
  }

  .cp-shell.cp-sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-sidebar-collapse-toggle .cp-icon {
    transform: rotate(180deg) !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-sidebar-head {
    padding: 18px 10px !important;
    justify-content: center !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-sidebar-head a {
    gap: 0 !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-sidebar-brand-text {
    display: none !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-nav {
    padding: 18px 10px !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-nav-group-summary {
    display: none !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-nav-group-items,
  .cp-shell.cp-sidebar-collapsed .cp-nav-group:not([open]) .cp-nav-group-items {
    display: flex !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-nav-group {
    margin: 0 !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-nav a {
    justify-content: center !important;
    padding: 9px !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-nav-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-sidebar > form {
    display: flex !important;
    justify-content: center !important;
  }

  .cp-shell.cp-sidebar-collapsed .cp-sidebar .cp-btn-ghost {
    justify-content: center !important;
    width: auto !important;
    min-width: 40px !important;
    padding: 9px !important;
  }
}

.cp-nav {
  flex: 1 !important;
  gap: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 18px 12px !important;
}

.cp-nav::-webkit-scrollbar {
  display: none !important;
}

.cp-nav-group {
  display: block !important;
  margin: 0 0 10px !important;
}

.cp-nav-group + .cp-nav-group {
  margin-top: 0 !important;
}

.cp-nav-group-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 14px 9px 7px !important;
  padding: 0 9px !important;
  color: rgba(255, 255, 255, .96) !important;
  cursor: pointer !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  list-style: none !important;
}

.cp-nav-group-summary::-webkit-details-marker {
  display: none !important;
}

.cp-nav-group-summary:focus-visible {
  outline: 2px solid rgba(233, 245, 79, .85) !important;
  outline-offset: 4px !important;
  border-radius: 5px !important;
}

.cp-nav-group-summary .cp-icon {
  width: 11px !important;
  height: 11px !important;
  color: rgba(255, 255, 255, .7) !important;
}

.cp-nav-group-chevron {
  transition: transform .15s ease !important;
}

.cp-nav-group:not([open]) .cp-nav-group-chevron {
  transform: rotate(180deg) !important;
}

.cp-nav-group-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-bottom: 0 !important;
}

.cp-nav-group:not([open]) .cp-nav-group-items {
  display: none !important;
}

.cp-nav a {
  position: relative !important;
  display: flex !important;
  min-height: 39px !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, .9) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.cp-nav a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .09) !important;
}

.cp-nav a.is-active {
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
  font-weight: 700 !important;
  box-shadow: inset 4px 0 0 var(--lime) !important;
}

.cp-nav a.is-active::before {
  content: none !important;
}

.cp-nav a .cp-icon {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
  flex: 0 0 auto !important;
}

.cp-sidebar > form {
  margin: 0 !important;
  padding: 14px 16px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, .1) !important;
}

.cp-sidebar .cp-btn-ghost {
  width: 100% !important;
  justify-content: flex-start !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, .78) !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.cp-sidebar .cp-btn-ghost:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
}

.cp-main {
  padding-top: 0 !important;
  background: var(--cream) !important;
}

.cp-desktop-topbar {
  display: flex;
  min-height: 72px;
  justify-content: space-between;
  align-items: center;
  margin: 0 -2rem 0;
  padding: 14px 34px;
  border-bottom: 1px solid rgba(10, 59, 19, .08);
  background: #fff;
}

.cp-main-inner {
  max-width: 1540px !important;
}

.cp-main-inner-dashboard,
.cp-main-inner:has(.dashboard-approved) {
  max-width: none !important;
  width: 100% !important;
}

.cp-venue,
.cp-profile-pill,
.cp-top-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cp-venue {
  color: var(--forest);
  font-weight: 700;
}

.cp-venue small {
  display: block;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cp-venue-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--forest);
  background: var(--lime);
  font-weight: 800;
}

.cp-date-pill,
.cp-profile-pill {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}

.cp-profile-pill {
  padding: 5px 10px 5px 5px;
  color: var(--forest);
  font-weight: 700;
}

.cp-profile-menu {
  position: relative;
}

.cp-profile-menu > summary {
  cursor: pointer;
  list-style: none;
}

.cp-profile-menu > summary::-webkit-details-marker {
  display: none;
}

.cp-profile-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  display: grid;
  min-width: 11rem;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(10, 59, 19, .14);
}

.cp-profile-menu-list button {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--forest);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.cp-profile-menu-list button:hover {
  background: var(--lime);
}

.sales-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.sales-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 20px;
}

.sales-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sales-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.sales-approved .hero p:last-child {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.sales-approved .btn {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: .16s ease;
}

.sales-approved .btn:hover {
  transform: translateY(-1px);
}

.sales-approved .btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.sales-approved .btn.soft {
  border-color: var(--line);
  background: #fff;
}

.sales-approved .card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.sales-approved .filters {
  display: grid;
  grid-template-columns: 90px minmax(180px, 1fr) 120px minmax(150px, .9fr) minmax(150px, .9fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.sales-approved .field {
  display: grid;
  gap: 5px;
}

.sales-approved .field label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sales-approved .input {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}

.sales-approved .input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(10, 59, 19, .1);
}

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

.sales-approved .metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.sales-approved .metric {
  min-height: 136px;
}

.sales-approved .label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sales-approved .value {
  margin-top: 12px;
  color: var(--forest);
  font: 700 39px/1 Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.sales-approved .meta {
  margin-top: 9px;
  color: var(--dim);
  font-size: 12px;
}

.sales-approved .tag {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 100px;
  color: var(--good);
  background: #edf7e9;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.sales-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) minmax(300px, .72fr);
  gap: 15px;
  margin-bottom: 15px;
}

.sales-approved .card-head {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sales-approved .section-title {
  margin: 0;
  color: var(--forest);
  font: 500 24px/1.1 Roboto, sans-serif;
  letter-spacing: 0;
}

.sales-approved .section-sub {
  margin: 5px 0 0;
  color: var(--dim);
  font-size: 13px;
}

.sales-approved .link {
  color: var(--forest);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.sales-approved .chart-root {
  min-height: 200px;
}

.sales-approved .insight-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.sales-approved .insight-note strong {
  display: block;
  color: var(--forest);
  font-size: 14px;
}

.sales-approved .table-card {
  margin-bottom: 15px;
}

.sales-approved .table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.sales-approved .table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--white);
  font-size: 12px;
}

.sales-approved .table th,
.sales-approved .table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.sales-approved .table th {
  color: var(--muted);
  background: #fbfaf7;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sales-approved .table tr:last-child td {
  border-bottom: 0;
}

.sales-approved .table td strong,
.sales-approved .positive {
  color: var(--good);
  font-weight: 700;
}

.sales-approved .pager {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  margin-top: 12px;
}

.sales-approved .pager a,
.sales-approved .pager span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--forest);
  background: var(--white);
  text-decoration: none;
}

.sales-approved .pager .active {
  border-color: var(--forest);
  color: var(--lime);
  background: var(--forest);
}

.sales-approved .modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1400px) {
  .sales-approved .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sales-filter-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {
  .sales-approved .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-insights-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .cp-desktop-topbar {
    display: none;
  }

  .sales-approved .hero {
    display: block;
  }

  .sales-approved .hero .btn {
    margin-top: 16px;
  }

  .sales-approved .filters,
  .sales-approved .metrics {
    grid-template-columns: 1fr;
  }

  .sales-filter-actions {
    flex-wrap: wrap;
  }
}

.dashboard-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.dashboard-approved .hero {
  display: flex;
  gap: 28px;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 20px;
}

.dashboard-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.dashboard-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.dashboard-approved .hero p:last-child {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .hero-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.dashboard-approved .btn {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: .16s ease;
}

.dashboard-approved .btn:hover {
  transform: translateY(-1px);
}

.dashboard-approved .btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.dashboard-approved .btn.soft {
  border-color: var(--line);
  background: #fff;
}

.dashboard-approved .btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.dashboard-approved .focus-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: 16px;
  color: var(--white);
  background: var(--forest);
  box-shadow: var(--shadow);
}

.dashboard-approved .focus-copy {
  display: flex;
  gap: 11px;
  align-items: center;
}

.dashboard-approved .focus-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
}

.dashboard-approved .focus-strip strong,
.dashboard-approved .focus-strip span,
.dashboard-approved .focus-link {
  color: var(--lime);
}

.dashboard-approved .daily-brief-strip ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, .84);
}

.dashboard-approved .daily-brief-strip {
  align-items: center;
  min-height: 128px;
  padding: 16px 18px;
}

.dashboard-approved .daily-brief-copy {
  min-width: 0;
}

.dashboard-approved .daily-brief-title {
  display: flex;
  gap: 11px;
  align-items: center;
}

.dashboard-approved .daily-brief-title strong {
  color: var(--lime);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
}

.dashboard-approved .daily-brief-strip ul {
  margin: 6px 0 0 31px;
  padding-left: 18px;
  color: rgba(255, 255, 255, .84);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
  list-style: disc;
}

.dashboard-approved .daily-brief-strip li {
  display: list-item;
  margin: 2px 0;
  padding-left: 0;
}

.dashboard-approved .focus-link {
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

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

.dashboard-approved .card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  align-self: start;
  padding: 18px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.dashboard-approved .span-kpi,
.dashboard-approved .span-3 {
  grid-column: span 3;
}

.dashboard-approved .span-4 {
  grid-column: span 4;
}

.dashboard-approved .span-5 {
  grid-column: span 5;
}

.dashboard-approved .span-6 {
  grid-column: span 6;
}

.dashboard-approved .span-7 {
  grid-column: span 7;
}

.dashboard-approved .span-8 {
  grid-column: span 8;
}

.dashboard-approved .span-12 {
  grid-column: span 12;
}

.dashboard-approved .card-top {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}

.dashboard-approved .card-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dashboard-approved .section-title {
  margin: 0;
  color: var(--forest);
  font: 500 24px/1.1 Roboto, sans-serif;
  letter-spacing: 0;
}

.dashboard-approved .section-sub {
  margin: 5px 0 0;
  color: var(--dim);
  font-size: 13px;
}

.dashboard-approved .link {
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-approved .data-value {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.dashboard-approved .metric-line {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 10px;
  color: var(--forest);
}

.dashboard-approved .metric-line strong {
  color: var(--forest);
  font-size: 36px;
  line-height: 1;
}

.dashboard-approved .metric-line span {
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-approved .metric-line.danger strong,
.dashboard-approved .data-value.danger {
  color: var(--danger);
}

.dashboard-approved .compact-list,
.dashboard-approved .ai-bullets,
.dashboard-approved .finance-section ul,
.dashboard-approved .team-note ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-approved .compact-list li,
.dashboard-approved .ai-bullets li,
.dashboard-approved .finance-section li,
.dashboard-approved .team-note li {
  margin: 5px 0;
}

.issue-grid,
.shift-table,
.task-table,
.mini-table {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.issue-head,
.issue-row,
.shift-head,
.shift-row,
.task-head,
.task-row,
.mini-table > div {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.issue-head,
.shift-head,
.task-head,
.mini-table > div:first-child {
  border-top: 0;
  background: #f8f4ed;
  color: var(--dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.issue-head,
.issue-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(120px, .9fr) minmax(110px, .8fr) minmax(70px, auto);
}

.issue-row strong,
.shift-row strong,
.task-row strong {
  color: var(--forest);
}

.issue-row.critical {
  background: #fff8f8;
}

.dashboard-approved .priority-issues {
  min-height: 300px;
}

.dashboard-approved .priority-issues .issue-grid {
  margin-top: 28px;
  border-color: #d8ddd6;
  border-radius: 14px;
}

.dashboard-approved .priority-issues .issue-head,
.dashboard-approved .priority-issues .issue-row {
  grid-template-columns: minmax(0, 1.55fr) minmax(150px, .95fr) minmax(140px, .85fr) minmax(80px, .45fr);
  min-height: 46px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 14px;
}

.dashboard-approved .priority-issues .issue-head {
  background: #f1f1f1;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08em;
}

.dashboard-approved .priority-issues .issue-row strong {
  font-size: 14px;
  font-weight: 700;
}

.dashboard-approved .priority-issues .issue-row.critical {
  position: relative;
  background: #fff;
}

.dashboard-approved .priority-issues .issue-row.critical::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--danger);
}

.shift-head,
.shift-row {
  grid-template-columns: 68px minmax(0, 1fr);
}

.shift-row em {
  color: var(--dim);
  font-style: normal;
}

.staff-stack {
  display: flex;
}

.staff {
  position: relative;
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  margin-left: -6px;
  border: 2px solid var(--white);
  border-radius: 50%;
  color: var(--forest);
  background: #e4edce;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  overflow: hidden;
}

.staff:first-child {
  margin-left: 0;
}

.staff img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.task-head,
.task-row {
  grid-template-columns: 120px minmax(0, 1fr) 64px;
}

.stacked-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0e9;
}

.stacked-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
}

.stacked-bar.warn i {
  background: #87916a;
}

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

.team-note {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffdf8;
}

.team-note strong,
.finance-section strong {
  color: var(--forest);
  font-size: 13px;
}

.score-table {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
}

.score-table div {
  padding: 11px;
  border-left: 1px solid var(--line);
  background: #fff;
}

.score-table div:first-child {
  border-left: 0;
}

.score-table span {
  display: block;
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
}

.score-table strong {
  display: block;
  margin-top: 4px;
  color: var(--forest);
  font-size: 20px;
}

.score-table .amber {
  color: #8a5200;
}

.review-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 13px;
  color: var(--muted);
}

.review-summary strong {
  color: var(--forest);
  font-size: 30px;
}

.mini-table > div {
  grid-template-columns: 1fr 70px 70px;
}

.sales-overview {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

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

.forecast-summary div {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.forecast-summary small {
  display: block;
  color: var(--dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.forecast-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--forest);
  font-size: 24px;
}

.forecast-chart {
  min-height: 220px;
}

.finance-section {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.finance-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.finance-section p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Dashboard widget baseline: keep every homepage widget on the approved
   card/table rhythm instead of the older compact admin-table styling. */
.dashboard-approved .card {
  color: var(--ink);
  line-height: 1.42;
}

.dashboard-approved .card-top {
  align-items: flex-start;
}

.dashboard-approved .section-title {
  color: var(--forest);
  font: 500 24px/1.1 Roboto, sans-serif;
}

.dashboard-approved .section-sub {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .link {
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
}

.dashboard-approved .metric-line strong {
  font-size: 38px;
  font-weight: 700;
}

.dashboard-approved .metric-line span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-approved .compact-list,
.dashboard-approved .ai-bullets,
.dashboard-approved .finance-section ul,
.dashboard-approved .team-note ul {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .compact-list li,
.dashboard-approved .ai-bullets li,
.dashboard-approved .finance-section li,
.dashboard-approved .team-note li {
  margin: 6px 0;
}

.dashboard-approved .issue-grid,
.dashboard-approved .shift-table,
.dashboard-approved .task-table,
.dashboard-approved .mini-table {
  border-color: #d8ddd6;
  border-radius: 14px;
}

.dashboard-approved .issue-head,
.dashboard-approved .issue-row,
.dashboard-approved .shift-head,
.dashboard-approved .shift-row,
.dashboard-approved .task-head,
.dashboard-approved .task-row,
.dashboard-approved .mini-table > div {
  min-height: 46px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .issue-head,
.dashboard-approved .shift-head,
.dashboard-approved .task-head,
.dashboard-approved .mini-table > div:first-child {
  background: #f1f1f1;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
}

.dashboard-approved .issue-row strong,
.dashboard-approved .shift-row strong,
.dashboard-approved .task-row strong,
.dashboard-approved .mini-table strong {
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-approved .shift-row em {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .stacked-bar {
  background: #e8ece5;
}

.dashboard-approved .stacked-bar.warn i {
  background: var(--forest);
}

.dashboard-approved .team-note,
.dashboard-approved .finance-section {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .team-note strong,
.dashboard-approved .finance-section strong {
  font-size: 14px;
  font-weight: 700;
}

.dashboard-approved .score-table span,
.dashboard-approved .forecast-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-approved .score-table strong {
  font-size: 22px;
  font-weight: 700;
}

.dashboard-approved .review-summary {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .review-summary strong {
  color: var(--forest);
  font-size: 30px;
  font-weight: 700;
}

.dashboard-approved .forecast-summary strong {
  color: var(--forest);
  font-size: 26px;
  font-weight: 700;
}

.dashboard-grid.customizing .approved-card-shell > .card {
  height: 100%;
}

/* Approved dashboard widget system. Keep this block late in the dashboard
   section so older generic table/card rules cannot bleed into the widgets. */
.dashboard-approved {
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .dashboard-grid {
  gap: 15px;
}

.dashboard-approved .card {
  padding: 18px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow);
  line-height: 1.42;
}

.dashboard-approved .ai-summary-card {
  min-height: 132px;
}

.dashboard-approved .card-top {
  align-items: flex-start;
  margin-bottom: 13px;
}

.dashboard-approved .card-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
}

.dashboard-approved .metric-line {
  gap: 9px;
  margin-top: 10px;
}

.dashboard-approved .metric-line strong {
  color: var(--forest);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-approved .metric-line span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
}

.dashboard-approved .section-title {
  margin: 0;
  color: var(--forest);
  font: 500 24px/1.1 Roboto, sans-serif;
  letter-spacing: 0;
}

.dashboard-approved .section-sub {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .link {
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
}

.dashboard-approved .compact-list,
.dashboard-approved .ai-bullets,
.dashboard-approved .team-note ul,
.dashboard-approved .finance-section ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .compact-list li,
.dashboard-approved .ai-bullets li,
.dashboard-approved .team-note li,
.dashboard-approved .finance-section li {
  margin: 6px 0;
}

.dashboard-approved .issue-grid,
.dashboard-approved .shift-table,
.dashboard-approved .task-table,
.dashboard-approved .mini-table {
  overflow: hidden;
  border: 1px solid #d8ddd6;
  border-radius: 14px;
  background: #fff;
}

.dashboard-approved .priority-issues {
  min-height: 300px;
}

.dashboard-approved .priority-issues .issue-grid {
  margin-top: 28px;
}

.dashboard-approved .issue-head,
.dashboard-approved .issue-row,
.dashboard-approved .shift-head,
.dashboard-approved .shift-row,
.dashboard-approved .task-head,
.dashboard-approved .task-row,
.dashboard-approved .mini-table > div {
  min-height: 46px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .issue-head,
.dashboard-approved .shift-head,
.dashboard-approved .task-head,
.dashboard-approved .mini-table > div:first-child {
  border-top: 0;
  background: #f1f1f1;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dashboard-approved .issue-row strong,
.dashboard-approved .shift-row strong,
.dashboard-approved .task-row strong,
.dashboard-approved .mini-table strong {
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-approved .issue-row.critical {
  position: relative;
  background: #fff;
}

.dashboard-approved .issue-row.critical::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--danger);
}

.dashboard-approved .shift-head,
.dashboard-approved .shift-row {
  grid-template-columns: 80px minmax(0, 1fr);
}

.dashboard-approved .shift-row em {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  line-height: 1.42;
}

.dashboard-approved .task-head,
.dashboard-approved .task-row {
  grid-template-columns: 120px minmax(0, 1fr) 64px;
}

.dashboard-approved .stacked-bar {
  height: 10px;
  background: #edf0e9;
}

.dashboard-approved .stacked-bar i,
.dashboard-approved .stacked-bar.warn i {
  background: var(--forest);
}

.dashboard-approved .team-overview-card .card-top {
  margin-bottom: 28px;
}

.dashboard-approved .team-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: stretch;
}

.dashboard-approved .team-note {
  min-height: 225px;
  padding: 16px;
  border: 1px solid #d8ddd6;
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .team-overview-card .team-note ul {
  margin: 14px 0 0;
  padding-left: 18px;
  list-style: disc;
}

.dashboard-approved .team-overview-card .team-note li {
  display: list-item;
  margin: 8px 0;
  padding-left: 0;
}

.dashboard-approved .team-note strong,
.dashboard-approved .finance-section strong {
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-approved .score-table {
  grid-column: auto;
  align-self: start;
  overflow: hidden;
  grid-template-columns: 1fr;
  border: 1px solid #d8ddd6;
  border-radius: 14px;
  background: #fff;
}

.dashboard-approved .score-table div {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid #d8ddd6;
  border-left: 0;
  background: #fff;
}

.dashboard-approved .score-table div:first-child {
  border-top: 0;
}

.dashboard-approved .score-table span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
}

.dashboard-approved .score-table strong {
  margin-top: 0;
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-approved .review-summary {
  gap: 12px;
  margin-bottom: 13px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .review-summary strong {
  color: var(--forest);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-approved .sales-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.dashboard-approved .forecast-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.dashboard-approved .forecast-summary div {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.dashboard-approved .forecast-summary small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.42;
  text-transform: none;
}

.dashboard-approved .forecast-summary strong {
  margin-top: 6px;
  color: var(--forest);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.dashboard-approved .forecast-chart {
  min-width: 0;
}

.dashboard-approved .finance-section {
  padding: 12px 0;
  color: var(--ink);
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.42;
}

.dashboard-approved .finance-section p {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.42;
}

.team-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.team-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}

.team-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.team-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.team-approved .hero p:last-child {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.team-approved .btn {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: .16s ease;
}

.team-approved .btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.team-approved .metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.team-approved .card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.team-approved .metric {
  min-height: 122px;
}

.team-approved .label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.team-approved .value {
  margin-top: 11px;
  color: var(--forest);
  font: 700 36px/1 Roboto, sans-serif;
}

.team-approved .meta {
  margin-top: 8px;
  color: var(--dim);
  font-size: 12px;
}

.team-approved .tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 5px;
  margin-bottom: 15px;
  padding: 5px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
}

.team-approved .tab {
  padding: 9px 15px;
  border: 0;
  border-radius: 100px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.team-approved .tab.active {
  color: var(--lime);
  background: var(--forest);
}

.team-approved .panel {
  display: none;
}

.team-approved .panel.active {
  display: block;
}

.team-approved .card-head {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.team-approved .section-title {
  margin: 0;
  color: var(--forest);
  font: 500 24px/1.1 Roboto, sans-serif;
  letter-spacing: 0;
}

.team-approved .section-sub {
  margin: 5px 0 0;
  color: var(--dim);
  font-size: 12px;
}

.team-approved .filters {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.team-approved .input {
  min-height: 39px;
  width: auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}

.team-approved .search {
  min-width: 230px;
}

.team-approved .table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.team-approved .table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  background: var(--white);
  font-size: 12px;
}

.team-approved .table th,
.team-approved .table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.team-approved .table th {
  color: var(--muted);
  background: #fbfaf7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.team-approved .table tr:last-child td {
  border-bottom: 0;
}

.team-approved .person {
  display: flex;
  gap: 9px;
  align-items: center;
}

.team-approved .person-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--forest);
  background: #edf3da;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
}

.team-approved .person-photo {
  object-fit: cover;
  font-style: normal;
}

.team-approved .person strong,
.team-approved .role-card strong {
  display: block;
  color: var(--forest);
}

.team-approved .person span,
.team-approved .role-card p {
  display: block;
  color: var(--dim);
  font-size: 11px;
}

.team-approved .tag {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 100px;
  color: var(--good);
  background: #edf7e9;
  font-size: 10px;
  font-weight: 700;
}

.team-approved .tag.dim {
  color: var(--muted);
  background: #f0f1ee;
}

.team-approved .actions,
.team-approved .role-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.team-approved .icon-btn {
  display: inline-flex;
  width: auto;
  height: auto;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--forest);
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.team-approved .switch {
  position: relative;
  width: 34px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: #dfe5dd;
}

.team-approved .switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: .15s;
}

.team-approved .switch.on {
  background: var(--forest);
}

.team-approved .switch.on::after {
  left: 17px;
  background: var(--lime);
}

.team-approved .switch:disabled {
  cursor: default;
}

.team-approved .roles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.team-approved .role-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.team-approved .role-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.team-approved .role-code {
  color: var(--forest);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.team-approved .role-card p {
  min-height: 34px;
  margin: 7px 0 12px;
}

.team-approved .role-card button {
  border: 0;
  color: var(--forest);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.team-approved .danger-link {
  color: var(--danger) !important;
}

.team-approved .matrix {
  min-width: 1030px;
}

.team-approved .matrix td:not(:first-child),
.team-approved .matrix th:not(:first-child) {
  text-align: center;
}

.team-approved .check {
  width: 16px;
  height: 16px;
  accent-color: var(--forest);
}

.team-approved .matrix-save {
  margin-top: 14px;
}

.team-approved .embedded-form {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf7;
}

.team-approved .temp-password-card {
  margin-bottom: 15px;
}

.team-approved .temp-password {
  display: inline-block;
  margin-top: 8px;
  color: var(--forest);
  font-weight: 700;
}

.team-approved .empty-state,
.team-approved .table-empty {
  color: var(--dim);
  font-size: 12px;
}

.rota-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.rota-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}

.rota-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.rota-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.rota-approved .hero p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.rota-approved {
  --rota-person-column: 250px;
  --rota-day-min: 128px;
  --rota-grid-min-width: 1146px;
}

.rota-page-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.rota-toolbar-left,
.rota-period-nav,
.rota-schedule-actions,
.rota-legend,
.rota-month-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.rota-schedule-actions {
  justify-content: flex-end;
}

.rota-arrow {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--forest);
  background: #fff;
  text-decoration: none;
}

.rota-period {
  display: inline-flex;
  min-height: 42px;
  min-width: 182px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--forest);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

button.rota-period {
  cursor: pointer;
}

.rota-status-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #e2c56a;
  border-radius: 100px;
  color: #6a5200;
  background: #fff9d9;
  font-size: 13px;
  font-weight: 700;
}

.rota-status-pill.published {
  border-color: #bcd6b9;
  color: var(--good);
  background: #edf7e9;
}

.rota-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: .16s ease;
}

.rota-btn svg {
  width: 14px;
  height: 14px;
}

.rota-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.rota-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.rota-btn.danger {
  border-color: #e0bcb7;
  color: var(--danger);
  background: #fff6f4;
}

.rota-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.rota-view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.rota-view-toggle button {
  min-height: 36px;
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.rota-view-toggle button.active {
  color: var(--lime);
  background: var(--forest);
}

.rota-legend {
  gap: 16px;
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.rota-legend span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.rota-legend i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.rota-schedule-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

.rota-schedule-grid {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fbf8f1;
}

.rota-grid-cell {
  padding: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.rota-grid-head {
  min-height: 74px;
  padding: 12px 10px 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--forest);
  background: #fbf8f1;
  text-align: center;
}

.rota-staff-head {
  z-index: 4;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

.rota-weekday {
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.rota-day-number {
  margin-top: 8px;
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.rota-today-mark {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-top: 5px;
  border-radius: 50%;
  color: #fff;
  background: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.rota-month-label {
  margin-top: 6px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
}

.rota-day-rule {
  height: 2px;
  margin: 10px 8px 0;
  border-radius: 2px;
  background: var(--line);
}

.rota-grid-head.today-head {
  box-shadow: inset 0 -3px 0 var(--forest);
}

.rota-group-row {
  min-height: 36px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: #f4f4ef;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rota-person-cell {
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  background: #fbf8f1;
}

.rota-person-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--forest);
  background: #e7efdc;
  font-size: 11px;
  font-style: italic;
  font-weight: 800;
}

.rota-person-photo {
  object-fit: cover;
  font-style: normal;
}

.rota-person-copy {
  min-width: 0;
}

.rota-person-copy strong {
  display: block;
  overflow: hidden;
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rota-person-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.rota-shift {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-bottom: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: filter .12s;
}

.rota-shift strong,
.rota-shift small {
  display: block;
}

.rota-shift strong {
  color: rgba(255, 255, 255, .98);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.rota-shift small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.rota-open-person-cell > span:first-child {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.rota-open-person-cell em {
  color: var(--muted);
  font-size: 12px;
}

.rota-open-slot {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-bottom: 8px;
  padding: 9px 10px;
  border: 1px dashed #d8cdbf;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}

.rota-open-slot span {
  display: block;
  margin-top: 3px;
  color: var(--good);
  font-size: 12px;
  font-weight: 700;
}

.rota-empty-state {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 48px 32px;
  color: var(--muted);
  text-align: center;
}

.rota-empty-state div {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 4px;
  color: var(--muted);
  background: #ede7d9;
  font-size: 12px;
  font-weight: 800;
}

.rota-empty-state strong {
  color: var(--muted);
  font-size: 14px;
}

.rota-empty-state span {
  color: var(--good);
  font-size: 13px;
}

@media (min-width: 1181px) and (max-width: 1440px) {
  .rota-approved {
    --rota-person-column: 196px;
    --rota-day-min: 114px;
    --rota-grid-min-width: 994px;
  }

  .rota-grid-cell {
    padding: 9px 8px;
  }

  .rota-grid-head {
    padding-right: 8px;
    padding-left: 8px;
  }

  .rota-shift,
  .rota-open-slot {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .rota-approved {
    --rota-person-column: 154px;
    --rota-day-min: 98px;
    --rota-grid-min-width: 840px;
  }

  .rota-page-toolbar {
    grid-template-columns: 1fr;
  }

  .rota-schedule-actions {
    justify-content: flex-start;
  }

  .rota-period {
    min-width: 168px;
  }

  .rota-legend {
    gap: 12px;
  }

  .rota-grid-cell {
    padding: 8px 7px;
  }

  .rota-grid-head {
    min-height: 64px;
    padding: 10px 6px 7px;
  }

  .rota-staff-head {
    font-size: 13px;
  }

  .rota-weekday,
  .rota-day-number {
    font-size: 12px;
  }

  .rota-month-label {
    font-size: 11px;
  }

  .rota-day-rule {
    margin-right: 4px;
    margin-left: 4px;
  }

  .rota-group-row {
    min-height: 32px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .rota-person-cell {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
  }

  .rota-person-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .rota-person-copy strong,
  .rota-person-copy span {
    font-size: 11px;
  }

  .rota-shift,
  .rota-open-slot {
    min-height: 48px;
    padding: 8px 7px;
    border-radius: 7px;
  }

  .rota-shift strong,
  .rota-shift small,
  .rota-open-slot,
  .rota-open-slot span {
    font-size: 11px;
  }
}

.rota-month-nav {
  margin-bottom: 16px;
}

.rota-month-card {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

.availability-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.availability-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.availability-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.availability-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.availability-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.availability-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.availability-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.availability-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.availability-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.availability-tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 5px;
  margin-bottom: 15px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
}

.availability-tabs button {
  min-height: 40px;
  padding: 9px 17px;
  border: 0;
  border-radius: 100px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.availability-tabs button.active {
  color: var(--lime);
  background: var(--forest);
}

.availability-tabs span {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  margin-left: 4px;
  border-radius: 50%;
  color: var(--forest);
  background: #edf7e9;
}

.availability-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.availability-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.availability-toolbar,
.availability-tool-row,
.availability-card-head,
.availability-week-nav,
.availability-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.availability-toolbar {
  justify-content: space-between;
  margin-bottom: 13px;
}

.availability-toolbar-main {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.availability-summary-inline {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.availability-summary-metric {
  min-width: 108px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f9f6ef;
  text-align: left;
}

.availability-summary-metric strong {
  display: block;
  color: var(--forest);
  font-size: 22px;
  line-height: 1.1;
}

.availability-summary-metric span {
  display: block;
  margin-top: 2px;
  color: var(--dim);
  font-size: 11px;
}

.availability-input {
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
}

.availability-person-select {
  min-width: 215px;
  font-weight: 700;
}

.availability-single-person {
  color: var(--forest);
}

.availability-week-nav {
  gap: 7px;
}

.availability-arrow {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--forest);
  background: #fff;
  font-size: 20px;
  line-height: 1;
}

.availability-week {
  position: relative;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--forest);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.availability-week input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.availability-tool-row {
  justify-content: flex-start;
}

.availability-tool-row.secondary {
  margin-top: 9px;
}

.availability-paint-tools {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #f5efe7;
}

.availability-paint-tools button {
  display: inline-flex;
  gap: 6px;
  min-height: 34px;
  align-items: center;
  padding: 7px 12px;
  border: 0;
  border-radius: 100px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.availability-paint-tools button.active {
  color: #fff;
  background: var(--good);
}

.availability-paint-tools button[data-state="tentative"].active {
  background: #b07316;
}

.availability-paint-tools button[data-state="off"].active {
  color: #fff;
  background: var(--off);
}

.availability-paint-tools svg,
.availability-saving svg {
  width: 13px;
  height: 13px;
}

.availability-saving {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.availability-quick-guide {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 11px;
  padding: 11px 13px;
  border: 1px solid #d8e89a;
  border-radius: 12px;
  color: var(--ink);
  background: #f8fbdd;
  font-size: 13px;
  line-height: 1.42;
}

.availability-quick-guide strong {
  flex: 0 0 auto;
  color: var(--forest);
  font-weight: 700;
}

.availability-quick-guide span {
  min-width: 0;
  color: var(--muted);
}

.availability-divider {
  height: 1px;
  margin: 14px 0;
  background: var(--line);
}

.availability-error {
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(165, 84, 76, .2);
  border-radius: 10px;
  color: var(--cp-error);
  background: rgba(165, 84, 76, .08);
  font-size: 13px;
}

.availability-notice {
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid #d8e89a;
  border-radius: 10px;
  color: var(--forest);
  background: #f8fbdd;
  font-size: 13px;
  font-weight: 700;
}

.availability-loading,
.availability-empty-state {
  padding: 48px 32px;
  color: var(--dim);
  text-align: center;
}

.availability-timeline {
  /* `clip` still clips the rounded corners like `hidden` did, but unlike
     `hidden` it does not establish a scroll container, so the sticky head
     row below can stick against the page instead of this element. */
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.availability-timeline-head,
.availability-row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.availability-timeline-head {
  position: sticky;
  top: var(--cp-sticky-top, 0px);
  z-index: 5;
  min-height: 42px;
  background: #fbfaf7;
  border-bottom: 1px solid var(--line);
}

.availability-timeline-head > div:first-child,
.availability-day-copy {
  border-right: 1px solid var(--line);
}

.availability-timeline-scroll {
  min-width: 0;
  overflow: hidden;
}

.availability-axis {
  display: grid;
  height: 42px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  color: var(--dim);
  font-size: 13px;
  font-weight: 500;
}

.availability-axis > span {
  /* A fixed left offset (rather than symmetric padding on the grid) keeps
     each label pinned to the start of its column regardless of viewport
     width — padding on .availability-axis alone shrank the label columns
     relative to the unpadded .availability-track gridlines below, so the
     labels visibly drifted off the lines as the page was resized. */
  padding-left: 6px;
}

.availability-row {
  min-height: 126px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.availability-row.muted {
  background: #fbfaf7;
}

.availability-day-copy {
  padding: 12px 18px;
}

.availability-day-copy strong,
.availability-day-copy span,
.availability-day-copy p {
  display: block;
}

.availability-day-copy strong {
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.availability-day-copy span {
  margin-top: 2px;
  color: var(--dim);
}

.availability-day-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.availability-day-facts {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.availability-day-facts em {
  padding: 3px 8px;
  border: 1px solid #c7e3c2;
  border-radius: 100px;
  color: var(--good);
  background: #edf7e9;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.availability-day-facts em.warn {
  border-color: #e4c573;
  color: #8a5200;
  background: #fff2cc;
}

.availability-day-facts em.muted {
  border-color: var(--line);
  color: var(--dim);
  background: #f0f1ee;
}

.availability-day-facts em.off {
  border-color: #c7cbd4;
  color: var(--off);
  background: var(--off-bg);
}

.availability-track {
  position: relative;
  height: 100%;
  min-height: 126px;
  /* A faint ground tint distinguishes "not painted" from white page background, so an
     unpainted stretch doesn't read as blank/empty next to the (now much bolder) unavailable
     pills below. */
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 12.5% 100%,
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(#faf9f6, #faf9f6);
}

.availability-time-pill {
  position: absolute;
  top: 50%;
  z-index: 1;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 100px;
  background: var(--good);
  box-shadow: 0 7px 16px rgba(10, 59, 19, .15);
}

.availability-time-pill.tentative {
  background: #b07316;
}

.availability-time-pill.unavailable {
  /* Diagonal hatch (not just a flat colour) so the "explicitly unavailable" state reads
     distinctly from "available"/"tentative" even without relying on hue alone. */
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, .16) 3px, transparent 3px, transparent 9px),
    var(--off);
  box-shadow: 0 7px 16px rgba(30, 35, 41, .18);
}

.availability-time-pill.unavailable span {
  color: rgba(255, 255, 255, .9);
}

.availability-time-pill span {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.availability-slot-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(32, minmax(0, 1fr));
  touch-action: none;
}

.availability-slot-layer button {
  min-width: 0;
  border: 0;
  border-left: 1px solid rgba(232, 223, 211, .52);
  background: transparent;
  cursor: crosshair;
  touch-action: none;
}

.availability-slot-layer button.preview {
  background: rgba(233, 245, 79, .25);
  outline: 1px solid rgba(10, 59, 19, .2);
  outline-offset: -1px;
}

.availability-slot-layer button:disabled {
  cursor: default;
}

.availability-legend {
  justify-content: flex-start;
  margin-top: 11px;
  color: var(--muted);
  font-size: 11px;
}

.availability-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.availability-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--good);
}

.availability-legend i.tentative {
  background: #b07316;
}

.availability-legend i.off {
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .18) 0, rgba(255, 255, 255, .18) 2px, transparent 2px, transparent 5px),
    var(--off);
}

.availability-legend i.unset {
  border: 1px solid var(--line);
  background: #faf9f6;
}

.availability-legend em {
  margin-left: auto;
  color: var(--dim);
}

.availability-card-head {
  justify-content: space-between;
}

.availability-card-head h2,
.availability-requests h2 {
  margin: 0;
  color: var(--forest);
  font: 500 23px/1.1 Roboto, sans-serif;
}

.availability-card-head p,
.availability-empty-copy {
  margin: 5px 0 0;
  color: var(--dim);
  font-size: 12px;
}

.availability-pattern {
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.availability-pattern:first-of-type {
  margin-top: 10px;
}

.availability-pattern strong,
.availability-pattern span {
  display: block;
}

.availability-pattern strong {
  color: var(--forest);
  font-size: 12px;
}

.availability-pattern span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.availability-pattern div {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}

.availability-pattern button {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--forest);
  background: #fff;
  font-size: 13px;
}

.availability-pattern button.danger {
  color: var(--danger);
  background: #fff6f4;
}

.availability-requests {
  max-width: 1000px;
}

.procedures-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.procedures-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.procedures-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.procedures-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.procedures-approved .hero p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.procedures-approved .hero-actions,
.procedures-filters,
.procedures-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.procedures-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.procedures-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.procedures-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.procedures-btn.danger {
  border-color: #eed5d0;
  color: var(--danger);
  background: #fff7f5;
}

.procedures-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.procedures-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.procedures-btn .cp-icon {
  width: 16px;
  height: 16px;
}

.procedures-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.procedures-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.procedures-metric {
  min-height: 132px;
  padding: 28px 22px;
}

.procedures-metric strong,
.procedures-metric span {
  display: block;
}

.procedures-metric strong {
  color: var(--forest);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.procedures-metric span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.procedures-card-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.procedures-card-head h2 {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.procedures-card-head p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.procedures-input {
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.procedures-search {
  min-width: 260px;
  flex: 1;
}

.procedures-table-wrap {
  overflow: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.procedures-table {
  width: 100%;
  min-width: 930px;
  border-collapse: collapse;
}

.procedures-table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.procedures-table td {
  padding: 14px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.procedures-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}

.procedures-table tbody tr:hover {
  background: #fffdf6;
}

.procedure-status,
.procedure-role {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  font-weight: 700;
}

.procedure-status {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
  letter-spacing: .05em;
}

.procedure-status.draft {
  color: #8a5200;
  background: #fff2cc;
}

.procedure-status.approved {
  color: var(--good);
  background: #e7f4df;
}

.procedure-status.archived {
  color: var(--dim);
  background: #f1ede5;
}

.procedure-role {
  margin: 2px 3px 2px 0;
  padding: 3px 8px;
  color: var(--forest);
  background: #f5f9db;
  font-size: 12px;
}

.procedures-empty {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.procedures-table td.procedures-select-col:first-child {
  font-weight: 400;
}

.procedures-select-col {
  width: 40px;
  min-width: 40px;
  text-align: center;
}

/* ── Custom checkbox: native input stays interactive/accessible, visually
   hidden beneath a styled sibling so it fits the pill/rounded language
   used everywhere else on this page instead of the browser default. ── */
.procedures-checkbox {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.procedures-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.procedures-checkbox-box {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  background: #fff;
  transition: background .12s ease, border-color .12s ease;
}

.procedures-checkbox input:checked + .procedures-checkbox-box,
.procedures-checkbox input:indeterminate + .procedures-checkbox-box {
  border-color: var(--forest);
  background: var(--forest);
}

.procedures-checkbox input:checked + .procedures-checkbox-box::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid var(--lime);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.procedures-checkbox input:indeterminate + .procedures-checkbox-box::after {
  content: "";
  width: 8px;
  height: 2px;
  background: var(--lime);
  border-radius: 1px;
}

.procedures-checkbox input:focus-visible + .procedures-checkbox-box {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.procedures-checkbox input:disabled + .procedures-checkbox-box {
  cursor: not-allowed;
  opacity: .45;
}

/* ── Bulk action toolbar: stays out of the way until something is
   selected, then reads as a distinct "action mode" surface rather
   than a row of disabled controls sitting in empty space. ── */
.procedures-bulk-bar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 11px 16px;
  border: 1px solid rgba(10, 59, 19, .14);
  border-radius: 12px;
  background: #eef6ea;
}

.procedures-bulk-bar[hidden] {
  display: none;
}

.procedures-bulk-count {
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
}

.procedures-bulk-bar-actions {
  display: flex;
  gap: 8px;
}

.procedures-table tbody tr.procedures-row-selected,
.procedures-table tbody tr.procedures-row-selected:hover {
  background: #eef6ea;
}

.procedures-notice {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(10, 59, 19, .14);
  border-radius: 10px;
  background: #f5f9db;
  color: var(--forest);
  font-size: 13px;
  font-weight: 600;
}

.procedures-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: var(--dim);
  font-size: 14px;
}

.assets-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.assets-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.assets-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.assets-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.assets-approved .hero p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.assets-approved .hero-actions,
.assets-filters,
.assets-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.assets-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.assets-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.assets-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.assets-btn.danger {
  border-color: #eed5d0;
  color: var(--danger);
  background: #fff7f5;
}

.assets-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.assets-btn.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.assets-btn .cp-icon {
  width: 16px;
  height: 16px;
}

.assets-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.assets-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.assets-metric {
  min-height: 132px;
  padding: 28px 22px;
}

.assets-metric strong,
.assets-metric span {
  display: block;
}

.assets-metric strong {
  color: var(--forest);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.assets-metric span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.assets-metric.alert strong {
  color: var(--danger);
}

.assets-card-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.assets-card-head h2 {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.assets-card-head p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.assets-filters {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.assets-input {
  min-height: 39px;
  width: auto;
  min-width: 145px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  outline: none;
}

.assets-search {
  min-width: 250px;
  flex: 1 1 320px;
}

.assets-table-wrap {
  overflow: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.assets-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
}

.assets-table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.assets-table td {
  padding: 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.assets-table tbody tr:hover {
  background: #fffdf6;
}

.assets-table .asset-name {
  color: var(--ink);
  font-weight: 700;
}

.assets-table .asset-name span {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font-size: 14px;
  font-weight: 400;
}

.asset-maintenance-plan {
  display: block;
  margin-bottom: 6px;
}

.asset-maintenance-plan:last-child {
  margin-bottom: 0;
}

.asset-maintenance-plan a {
  display: block;
  margin-top: 2px;
  color: var(--dim);
  font-size: 13px;
}

.asset-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.asset-tag.good {
  color: var(--good);
  background: #e7f4df;
}

.asset-tag.down {
  color: var(--danger);
  background: #fff1f1;
}

.asset-tag.warn {
  color: #8a5200;
  background: #fff2cc;
}

.asset-tag.normal {
  color: var(--good);
  background: #e7f4df;
}

.status-toggle-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-toggle-label {
  font-size: 13px;
  color: var(--dim);
}

.assets-empty {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.assets-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: var(--dim);
  font-size: 14px;
}

.assets-alert {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
}

.assets-alert.danger {
  border: 1px solid rgba(165, 84, 76, .35);
  color: var(--danger);
  background: rgba(165, 84, 76, .04);
}

.assets-alert.success {
  border: 1px solid rgba(16, 76, 27, .28);
  color: var(--forest);
  background: rgba(16, 76, 27, .04);
}

.issues-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.issues-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.issues-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.issues-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.issues-approved .hero p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.issues-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.issues-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.issues-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.issues-btn.danger {
  border-color: #eed5d0;
  color: var(--danger);
  background: #fff7f5;
}

.issues-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.issues-btn.disabled,
.issues-btn:disabled {
  cursor: not-allowed;
  color: var(--dim);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.issues-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.issues-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.issues-metric {
  min-height: 132px;
  padding: 28px 22px;
}

.issues-metric strong,
.issues-metric span {
  display: block;
}

.issues-metric strong {
  color: var(--forest);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.issues-metric span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.issues-tabs {
  display: flex;
  width: max-content;
  gap: 5px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
}

.issues-tab {
  min-height: 46px;
  padding: 9px 17px;
  border: 0;
  border-radius: 100px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}

.issues-tab.active {
  color: var(--lime);
  background: var(--forest);
}

.issues-tab span {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  border-radius: 50%;
  color: var(--forest);
  background: #e7f4df;
}

.issues-panel {
  display: none;
}

.issues-panel.active {
  display: block;
}

.issues-card-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.issues-card-head h2 {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.issues-card-head p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.issues-input,
.issues-inline-select {
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--forest);
  background: #fff;
  font-size: 14px;
}

.issues-input.small-field {
  width: 150px;
  min-height: 34px;
  padding-block: 7px;
  font-size: 12px;
}

.issues-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.issues-table {
  width: 100%;
  min-width: 990px;
  border-collapse: collapse;
}

.issues-table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.issues-table td {
  padding: 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.issues-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}

.issues-table tbody tr:hover {
  background: #fffdf6;
}

.issue-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.issue-tag.high,
.issue-tag.open {
  color: var(--danger);
  background: #fff1f1;
}

.issue-tag.medium,
.issue-tag.pending {
  color: #8a5200;
  background: #fff2cc;
}

.issue-tag.low {
  color: var(--muted);
  background: #f1ede5;
}

.issue-tag.received {
  color: var(--good);
  background: #e7f4df;
}

.issues-actions,
.issues-inline-form,
.issues-event-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.issues-approved .escalated {
  color: var(--danger);
  font-weight: 700;
}

.issues-empty {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.issues-table td.issues-select-col:first-child {
  font-weight: 400;
}

.issues-select-col {
  width: 40px;
  min-width: 40px;
  text-align: center;
}

/* ── Custom checkbox: native input stays interactive/accessible, visually
   hidden beneath a styled sibling so it fits the pill/rounded language
   used everywhere else on this page instead of the browser default. ── */
.issues-checkbox {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.issues-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.issues-checkbox-box {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  background: #fff;
  transition: background .12s ease, border-color .12s ease;
}

.issues-checkbox input:checked + .issues-checkbox-box,
.issues-checkbox input:indeterminate + .issues-checkbox-box {
  border-color: var(--forest);
  background: var(--forest);
}

.issues-checkbox input:checked + .issues-checkbox-box::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid var(--lime);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.issues-checkbox input:indeterminate + .issues-checkbox-box::after {
  content: "";
  width: 8px;
  height: 2px;
  background: var(--lime);
  border-radius: 1px;
}

.issues-checkbox input:focus-visible + .issues-checkbox-box {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.issues-checkbox input:disabled + .issues-checkbox-box {
  cursor: not-allowed;
  opacity: .45;
}

/* ── Bulk action toolbar: stays out of the way until something is
   selected, then reads as a distinct "action mode" surface rather
   than a row of disabled controls sitting in empty space. ── */
.issues-bulk-bar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 11px 16px;
  border: 1px solid rgba(10, 59, 19, .14);
  border-radius: 12px;
  background: #eef6ea;
}

.issues-bulk-bar[hidden] {
  display: none;
}

.issues-bulk-count {
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
}

.issues-bulk-bar-actions {
  display: flex;
  gap: 8px;
}

.issues-table tbody tr.issues-row-selected,
.issues-table tbody tr.issues-row-selected:hover {
  background: #eef6ea;
}

.issues-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: var(--dim);
  font-size: 14px;
}

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

.issues-pagination-page {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.issues-timeline {
  display: grid;
  gap: 9px;
}

.issues-event {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.issues-event i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--danger);
}

.issues-event strong,
.issues-event span {
  display: block;
}

.issues-event strong {
  color: var(--forest);
  font-size: 14px;
}

.issues-event span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
}

.issues-event-actions {
  margin-top: 8px;
}

.issues-modal {
  font-family: Roboto, sans-serif;
}

.evidence-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.evidence-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.evidence-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.evidence-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.evidence-approved .hero p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.evidence-approved .hero-actions,
.evidence-actions,
.evidence-filters,
.evidence-upload {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.evidence-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.evidence-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.evidence-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.evidence-btn.danger {
  border-color: #eed5d0;
  color: var(--danger);
  background: #fff7f5;
}

.evidence-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.evidence-btn.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.evidence-btn .cp-icon {
  width: 16px;
  height: 16px;
}

.evidence-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.evidence-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.evidence-metric {
  min-height: 132px;
  padding: 28px 22px;
}

.evidence-metric strong,
.evidence-metric span {
  display: block;
}

.evidence-metric strong {
  color: var(--forest);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.evidence-metric span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.evidence-card-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.evidence-card-head h2 {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.evidence-card-head p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.evidence-filters {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.evidence-input {
  min-height: 39px;
  width: auto;
  min-width: 145px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  outline: none;
}

.evidence-type-input {
  min-width: 180px;
}

.evidence-table-wrap {
  overflow: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.evidence-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

.evidence-table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.evidence-table td {
  padding: 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.evidence-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}

.evidence-table tbody tr:hover {
  background: #fffdf6;
}

.evidence-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 100px;
  color: var(--good);
  background: #e7f4df;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.evidence-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: var(--dim);
  font-size: 14px;
}

.evidence-empty {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.evidence-alert {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
}

.evidence-alert.danger {
  border: 1px solid rgba(165, 84, 76, .35);
  color: var(--danger);
  background: rgba(165, 84, 76, .04);
}

.evidence-alert.success {
  border: 1px solid rgba(16, 76, 27, .28);
  color: var(--forest);
  background: rgba(16, 76, 27, .04);
}

.evidence-modal {
  font-family: Roboto, sans-serif;
}

.evidence-modal-content {
  display: grid;
  gap: 16px;
}

.evidence-modal-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}

.evidence-modal-head h3 {
  margin: 0;
  color: var(--forest);
  font-size: 29px;
  font-weight: 500;
}

.evidence-modal-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.evidence-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--forest);
  background: #fff;
}

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

.evidence-detail {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

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

.evidence-detail strong,
.evidence-detail span {
  display: block;
}

.evidence-detail strong {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.evidence-detail span {
  margin-top: 4px;
  color: var(--forest);
  font-size: 14px;
}

.evidence-detail .evidence-input {
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}

.evidence-documents .evidence-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.evidence-modal-content form {
  display: grid;
  gap: 16px;
}

.evidence-documents {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.evidence-doc {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.evidence-doc:first-of-type {
  margin-top: 7px;
}

.evidence-doc a {
  color: var(--forest);
}

.evidence-upload {
  margin-top: 11px;
}

.checks-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.checks-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.checks-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.checks-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.checks-approved .hero-actions,
.checks-approved .filters,
.checks-approved .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.checks-approved .metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.checks-approved .card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.checks-approved .metric {
  min-height: 132px;
  padding: 28px 22px;
}

.checks-approved .metric strong,
.checks-approved .metric span {
  display: block;
}

.checks-approved .metric strong {
  color: var(--forest);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.checks-approved .metric span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.checks-approved .metric.alert strong {
  color: var(--danger);
}

.checks-approved .card-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.checks-approved .section-title {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.checks-approved .section-sub {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.checks-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.checks-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.checks-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.checks-btn.danger {
  border-color: #eed5d0;
  color: var(--danger);
  background: #fff7f5;
}

.checks-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.checks-btn.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.checks-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.checks-btn .cp-icon {
  width: 16px;
  height: 16px;
}

.checks-approved .filters {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.checks-approved .input {
  min-height: 39px;
  min-width: 145px;
  width: auto;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  outline: none;
}

.checks-approved .check {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}

.checks-approved .check input {
  accent-color: var(--forest);
}

.checks-approved .push {
  margin-left: auto;
}

.checks-approved .checks-bulk-bar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
}

.checks-approved .checks-select-all {
  color: var(--ink);
  font-weight: 700;
}

.checks-approved .checks-select-col {
  width: 44px;
  min-width: 44px;
  text-align: center;
}

.checks-approved .checks-select-col input {
  width: 16px;
  height: 16px;
  accent-color: var(--forest);
}

.checks-approved .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.checks-approved .table-wrap {
  overflow: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.checks-approved .table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.checks-approved .table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.checks-approved .table td {
  padding: 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.checks-approved .table tbody tr:hover {
  background: #fffdf6;
}

.checks-approved .task-title {
  color: var(--ink);
  font-weight: 700;
}

.checks-approved .task-title span {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font-size: 14px;
  font-weight: 400;
}

.checks-approved .tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.checks-approved .tag.todo {
  color: var(--good);
  background: #e7f4df;
}

.checks-approved .tag.progress {
  color: #8a5200;
  background: #fff2cc;
}

.checks-approved .tag.done {
  color: var(--good);
  background: #e7f4df;
}

.checks-approved .tag.failed {
  color: var(--danger);
  background: #fff1f1;
}

.checks-approved .overdue {
  color: var(--danger) !important;
  font-weight: 700;
}

.checks-approved .inline-select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--forest);
  background: #fff;
  font-size: 14px;
}

.checks-approved .muted,
.checks-approved .table-empty {
  color: var(--muted);
  font-weight: 400;
}

.checks-approved .pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: var(--dim);
  font-size: 14px;
}

.emails-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.emails-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.emails-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.emails-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.emails-approved .hero p:last-child {
  max-width: 860px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.emails-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.emails-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.emails-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.emails-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.emails-btn:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.email-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.email-summary .summary-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

.email-summary .summary-card span,
.email-summary .summary-card strong {
  display: block;
}

.email-summary .summary-card span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.email-summary .summary-card strong {
  margin-top: 7px;
  color: var(--forest);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mail-layout {
  display: grid;
  grid-template-columns: minmax(390px, .9fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: start;
}

.emails-card {
  min-width: 0;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.inbox-card,
.detail-card {
  overflow: hidden;
  padding: 0;
}

.inbox-head,
.detail-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.inbox-head h2,
.detail-head h2 {
  margin: 0;
  color: var(--forest);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}

.inbox-head p,
.detail-head p {
  margin: 4px 0 0;
  color: var(--dim);
  font-size: 14px;
}

.mail-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  background: #fbfaf7;
}

.mail-filters .filter {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--forest);
  background: #fff;
  font-size: 14px;
  font-weight: 500;
}

.mail-filters .filter.active {
  color: var(--lime);
  border-color: var(--forest);
  background: var(--forest);
  font-weight: 700;
}

.email-list {
  display: grid;
}

.email-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: left;
}

.email-row.active {
  background: #eef5d8;
}

.email-row:hover {
  background: #fbfaf7;
}

.sender-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--forest);
  background: #eef5d8;
  font-size: 12px;
  font-weight: 700;
}

.email-main {
  min-width: 0;
}

.email-top {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.sender,
.subject,
.preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sender {
  min-width: 0;
  color: var(--forest);
  font-weight: 500;
}

.subject {
  margin-top: 3px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.preview {
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
}

.email-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

.email-badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.email-badge.good {
  color: #2e7d3d;
  border-color: #d8e8d1;
  background: #edf7e9;
}

.email-badge.warn {
  color: #8a5200;
  border-color: #e8d99d;
  background: #fff2cc;
}

.email-badge.danger {
  color: var(--danger);
  border-color: #f2cccc;
  background: var(--danger-bg);
}

.email-badge.neutral {
  color: var(--muted);
  border-color: var(--line);
  background: #f2eee8;
}

.detail-body {
  padding: 18px;
  background: #fff;
}

.email-title {
  margin: 0;
  color: var(--forest);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
}

.message-meta {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf7;
  color: var(--muted);
  font-size: 14px;
}

.message-meta strong {
  color: var(--forest);
}

.email-copy {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.58;
}

.email-copy p {
  margin: 0 0 12px;
}

.attachments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.attachment {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--forest);
  background: #fbfaf7;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.reply-box {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #dfe8b8;
  border-radius: 13px;
  background: #f7fadf;
}

.reply-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--forest);
}

.reply-box p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.actions,
.emails-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.actions {
  margin-top: 16px;
}

.emails-pagination {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 14px 15px;
  color: var(--dim);
  font-size: 14px;
}

.email-empty,
.email-preview-empty {
  display: grid;
  gap: 4px;
  padding: 28px 18px;
  color: var(--muted);
  font-size: 14px;
}

.email-empty strong {
  color: var(--forest);
  font-size: 16px;
}

.reviews-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.reviews-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.reviews-approved .eyebrow,
.reviews-modal-eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.reviews-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.reviews-approved .hero p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.reviews-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.reviews-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.reviews-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.reviews-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.reviews-btn:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.reviews-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.reviews-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.reviews-metric {
  min-height: 132px;
  padding: 28px 22px;
}

.reviews-metric strong,
.reviews-metric span {
  display: block;
}

.reviews-metric strong {
  color: var(--forest);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.reviews-metric span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.reviews-card-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.reviews-card-head h2 {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.reviews-card-head p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.reviews-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.reviews-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.reviews-table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.reviews-table td {
  padding: 14px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  vertical-align: middle;
}

.reviews-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}

.reviews-table tbody tr:hover {
  background: #fffdf6;
}

.review-stars {
  color: var(--ink);
  font-size: 17px !important;
  letter-spacing: 0;
  white-space: nowrap;
}

.review-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.review-tag.good {
  color: var(--good);
  background: #e7f4df;
}

.review-tag.warn {
  color: #8a5200;
  background: #fff2cc;
}

.review-tag.muted {
  color: var(--forest);
  background: #edf7e9;
}

.reviews-empty {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.reviews-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: var(--dim);
  font-size: 14px;
}

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

.reviews-modal {
  font-family: Roboto, sans-serif;
}

.reviews-modal-summary {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

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

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

.sandbox-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.sandbox-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.sandbox-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sandbox-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.sandbox-approved .hero p:last-child {
  max-width: 860px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.sandbox-card {
  border: 1px solid rgba(10, 59, 19, .08);
  background: #fff;
  box-shadow: var(--shadow);
}

.sandbox-shell {
  display: grid;
  width: 100%;
  max-width: 1320px;
  min-width: 0;
  height: clamp(520px, calc(100vh - 260px), 700px);
  grid-template-columns: 360px minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
}

.conversation-list {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #fbfaf7;
}

.list-head {
  padding: 15px;
  border-bottom: 1px solid var(--line);
}

.list-head h2 {
  margin: 0;
  color: var(--forest);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}

.list-head p {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 14px;
}

.sandbox-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  outline: none;
}

.sandbox-input:focus {
  border-color: rgba(10, 59, 19, .35);
  box-shadow: 0 0 0 3px rgba(10, 59, 19, .08);
}

.chat-list {
  display: grid;
}

.chat-item {
  display: grid;
  width: 100%;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(232, 223, 211, .78);
  color: inherit;
  background: transparent;
  text-align: left;
  text-decoration: none;
}

.chat-item:hover {
  background: #f7f1e8;
}

.chat-item.active {
  background: #eef5d8;
  box-shadow: inset 4px 0 0 var(--forest);
}

.contact-avatar,
.mini-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
}

.contact-avatar {
  width: 42px;
  height: 42px;
  color: var(--lime);
  background: var(--forest);
}

.mini-avatar {
  width: 24px;
  height: 24px;
  color: var(--forest);
  background: #e6efda;
  font-size: 10px;
}

.chat-main {
  min-width: 0;
}

.chat-name {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--forest);
  font-size: 14px;
  font-weight: 500;
}

.chat-preview {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.unread {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 100px;
  color: var(--forest);
  background: var(--lime);
  font-size: 10px;
  font-weight: 700;
}

.phone-shell {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #efe7db;
}

.conversation-head {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(10, 59, 19, .12);
  background: #fff;
}

.contact-meta {
  min-width: 0;
  flex: 1;
}

.contact-meta strong {
  display: block;
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.contact-meta span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill {
  padding: 5px 9px;
  border-radius: 100px;
  color: #2e7d3d;
  background: #edf7e9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.thread {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 20px 22px;
  background: radial-gradient(circle at 12px 12px, rgba(10, 59, 19, .035) 1px, transparent 1px) 0 0 / 24px 24px, #f7f1e8;
}

.date-separator {
  align-self: center;
  margin: 6px auto;
  padding: 5px 10px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 100px;
  color: var(--muted);
  background: rgba(255, 255, 255, .88);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.date-separator,
.message-row {
  width: min(100%, 880px);
  margin-inline: auto;
}

.message-row {
  display: flex;
  gap: 7px;
  align-items: flex-end;
}

.message-row.out {
  justify-content: flex-end;
}

.message-row + .date-separator {
  margin-top: 16px;
}

.bubble {
  position: relative;
  max-width: min(78%, 470px);
  padding: 9px 10px 7px;
  border-radius: 0 12px 12px 12px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(31, 42, 39, .08);
  font-size: 14px;
  line-height: 1.38;
}

.bubble::before {
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 8px solid #fff;
  border-left: 8px solid transparent;
  content: "";
}

.out .bubble {
  max-width: min(78%, 520px);
  border-radius: 12px 0 12px 12px;
  color: #f7fff0;
  background: var(--forest);
}

.out .bubble::before {
  right: -7px;
  left: auto;
  border-top-color: var(--forest);
  border-right: 8px solid transparent;
  border-left: 0;
}

.bubble.pending {
  opacity: .72;
}

.bubble-meta {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
  color: rgba(92, 108, 94, .82);
  font-size: 12px;
  line-height: 1;
}

.out .bubble-meta {
  color: rgba(247, 255, 240, .72);
}

.ticks {
  color: #9ed66b;
  font-weight: 700;
}

.source {
  font-weight: 700;
}

.incoming-label {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.compose {
  padding: 12px 18px;
  border-top: 1px solid rgba(10, 59, 19, .1);
  background: #fff;
}

.compose-inner {
  display: grid;
  width: min(100%, 900px);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-inline: auto;
}

.icon-btn {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--forest);
  background: #fbfaf7;
  font-size: 18px;
  font-weight: 700;
}

.sandbox-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.sandbox-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.sandbox-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.sandbox-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.sandbox-btn:disabled,
.icon-btn:disabled,
.sandbox-input:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.icon-btn:not(:disabled) {
  cursor: pointer;
}

.icon-btn:not(:disabled):hover {
  border-color: var(--forest);
  background: #f1f5ee;
}

.sandbox-notice {
  width: min(100%, 900px);
  margin: 0 auto 10px;
  padding: 8px 12px;
  border: 1px solid rgba(10, 59, 19, .16);
  border-radius: 10px;
  color: var(--forest);
  background: #f1f5ee;
  font-size: 13px;
  line-height: 1.4;
}

.compose-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: min(100%, 900px);
  margin: 0 auto 8px;
}

.compose-attachments:empty {
  display: none;
}

.attachment-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fbfaf7;
  font-size: 12px;
}

.attachment-chip-label {
  max-width: 180px;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-chip-remove {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: none;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.attachment-chip-remove:hover {
  color: var(--forest);
  background: rgba(10, 59, 19, .08);
}

.bubble-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.bubble-thumb {
  display: block;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(10, 59, 19, .1);
  border-radius: 8px;
  object-fit: cover;
}

.bubble-file-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(10, 59, 19, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .6);
  font-size: 12px;
  font-weight: 600;
}

.out .bubble-file-chip {
  border-color: rgba(247, 255, 240, .3);
  background: rgba(255, 255, 255, .12);
  color: #f7fff0;
}

.send-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
}

.send-btn .cp-icon {
  width: 19px;
  height: 19px;
}

.sandbox-empty-thread,
.sandbox-empty-contact {
  display: grid;
  gap: 4px;
  padding: 28px 18px;
  color: var(--muted);
  font-size: 14px;
}

.sandbox-empty-thread {
  place-items: center;
  margin: auto;
  text-align: center;
}

.sandbox-empty-thread strong {
  color: var(--forest);
  font-size: 16px;
}

.sandbox-clear-form {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.automations-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.automations-approved .hero {
  margin-bottom: 17px;
}

.automations-approved .eyebrow,
.automation-modal-eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.automations-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.automations-approved .hero p:last-child {
  max-width: 880px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.automation-alert {
  margin-bottom: 14px;
  padding: 12px 15px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

.automation-alert p {
  margin: 0;
  font-weight: 700;
}

.automation-alert.error {
  color: var(--danger);
  border: 1px solid #f2cccc;
}

.automation-alert.success {
  color: var(--good);
  border: 1px solid #d8e8d1;
}

.automation-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.automation-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.automation-metric {
  min-height: 132px;
  padding: 28px 22px;
}

.automation-metric strong,
.automation-metric span {
  display: block;
}

.automation-metric strong {
  color: var(--forest);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.automation-metric span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.automations-approved .section-title {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.automations-approved .section-sub {
  margin: 5px 0 13px;
  color: var(--ink);
  font-size: 14px;
}

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

.automation-card.rule {
  min-height: 146px;
  box-shadow: none;
}

.rule-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}

.rule h3 {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.rule p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.automation-tag {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 4px 8px;
  border-radius: 100px;
  color: var(--good);
  background: #e7f4df;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.automation-tag.idle {
  color: #8a5200;
  background: #fff2cc;
}

.automation-tag.error {
  color: var(--danger);
  background: #fff1f1;
}

.switch {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 100px;
  background: #d8d2c7;
  cursor: pointer;
}

.switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: .15s;
}

.switch.on {
  background: var(--good);
}

.switch.on::after {
  left: 19px;
}

.switch.static {
  cursor: default;
}

.switch:disabled {
  cursor: not-allowed;
  opacity: .72;
}

.automation-tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 5px;
  overflow: auto;
  margin: 14px 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
}

.automation-tab {
  padding: 9px 15px;
  border: 0;
  border-radius: 100px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.automation-tab.active {
  color: var(--lime);
  background: var(--forest);
}

.automation-panel {
  display: none;
}

.automation-panel.active {
  display: block;
}

.automation-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.automation-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

.automation-table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.automation-table td {
  padding: 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.automation-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}

.automation-table tbody tr:hover {
  background: #fffdf6;
}

.automation-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.automation-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.automation-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.automation-empty {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.automation-diagnostics {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.diagnostics-title {
  margin: 8px 0 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
}

.automation-diagnostics h3 {
  margin: 0 0 12px;
  color: var(--forest);
  font-size: 20px;
  font-weight: 500;
}

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

.diagnostic-grid article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf7;
}

.diagnostic-grid span,
.diagnostic-grid strong {
  display: block;
}

.diagnostic-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.diagnostic-grid strong {
  margin-top: 6px;
  color: var(--forest);
  font-size: 24px;
  font-weight: 500;
}

.diagnostic-table {
  min-width: 1060px;
}

.automation-link-btn {
  border: 0;
  color: var(--forest);
  background: transparent;
  font-weight: 700;
  text-decoration: underline;
}

.automation-modal {
  font-family: Roboto, sans-serif;
}

.automation-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 15px;
}

.automation-detail-grid div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.automation-detail-grid .full {
  grid-column: 1 / -1;
}

.automation-detail-grid strong,
.automation-detail-grid span {
  display: block;
}

.automation-detail-grid strong {
  color: var(--dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.automation-detail-grid span {
  overflow-wrap: anywhere;
  margin-top: 4px;
  color: var(--forest);
  font-size: 14px;
}

.settings-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.settings-approved .hero {
  margin-bottom: 17px;
}

.settings-approved .eyebrow,
.settings-modal-eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.settings-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.settings-approved .hero p:last-child {
  max-width: 920px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.settings-card {
  min-width: 0;
  margin-bottom: 14px;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.settings-card-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.settings-card-head h2 {
  margin: 0;
  color: var(--forest);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.settings-card-head p {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.settings-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--forest);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.settings-btn.primary {
  color: var(--lime);
  background: var(--forest);
}

.settings-btn.soft {
  border-color: var(--line);
  background: #fff;
}

.settings-btn.danger {
  color: var(--danger);
  border-color: #f2cccc;
  background: #fff1f1;
}

.settings-btn.small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.settings-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  max-width: 1120px;
}

.hours-day {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.hours-day strong {
  display: block;
  color: var(--forest);
  font-size: 14px;
  font-weight: 700;
}

.hours-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.hours-row label,
.hours-controls label,
.settings-actions label,
.settings-form-grid label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.settings-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
}

.settings-input:focus {
  border-color: rgba(10, 59, 19, .35);
  box-shadow: 0 0 0 3px rgba(10, 59, 19, .08);
}

.settings-input:disabled {
  opacity: 1;
  background: #fff;
}

.hours-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  max-width: 780px;
  margin-top: 14px;
}

.settings-note {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  color: var(--forest);
  background: #f7fadf;
  font-size: 14px;
}

.settings-links,
.settings-actions,
.settings-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.settings-links {
  margin-top: 12px;
}

.settings-actions {
  align-items: end;
}

.settings-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.settings-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}

.settings-table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.settings-table td {
  padding: 14px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  vertical-align: middle;
}

.settings-table td:first-child {
  font-weight: 700;
}

.settings-table tbody tr:hover {
  background: #fffdf6;
}

.settings-empty {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.settings-modal {
  font-family: Roboto, sans-serif;
}

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

.checks-modal {
  font-family: Roboto, sans-serif;
}

@media (max-width: 1180px) {
  .procedures-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

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

  .checks-approved .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .mail-layout {
    grid-template-columns: 1fr;
  }

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

  .sandbox-shell {
    grid-template-columns: 330px minmax(0, 1fr);
  }

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

@media (max-width: 820px) {
  .availability-approved .hero {
    display: block;
  }

  .availability-approved .hero .availability-btn {
    margin-top: 15px;
  }

  .availability-timeline-head,
  .availability-row {
    grid-template-columns: 1fr;
  }

  .availability-timeline-head > div:first-child {
    display: none;
  }

  .availability-axis,
  .availability-track {
    min-width: 720px;
  }

  .availability-timeline-scroll {
    overflow-x: auto;
  }

  /* In the collapsed single-column layout the day/pills cell stacks above
     the paint track instead of sitting beside it, so the vertical
     border-right that separated them no longer does anything useful — draw
     a horizontal rule between the two stacked halves instead. */
  .availability-day-copy {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .availability-summary-inline {
    width: 100%;
  }

  .availability-summary-metric {
    flex: 1;
  }

  .procedures-approved .hero {
    display: block;
  }

  .procedures-approved .hero-actions {
    margin-top: 15px;
  }

  .procedures-metrics {
    grid-template-columns: 1fr;
  }

  .procedures-filters {
    display: grid;
  }

  .procedures-search {
    min-width: 0;
    width: 100%;
  }

  .assets-approved .hero {
    display: block;
  }

  .assets-approved .hero-actions {
    margin-top: 15px;
  }

  .assets-metrics {
    grid-template-columns: 1fr;
  }

  .assets-filters {
    display: grid;
  }

  .assets-input,
  .assets-search {
    min-width: 0;
    width: 100%;
  }

  .assets-pagination {
    display: grid;
    gap: 12px;
  }

  .issues-approved .hero {
    display: block;
  }

  .issues-approved .hero .issues-btn {
    margin-top: 15px;
  }

  .issues-metrics {
    grid-template-columns: 1fr;
  }

  .issues-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .issues-card-head {
    display: grid;
  }

  .evidence-approved .hero {
    display: block;
  }

  .evidence-approved .hero-actions {
    margin-top: 15px;
  }

  .evidence-metrics {
    grid-template-columns: 1fr;
  }

  .evidence-filters {
    display: grid;
  }

  .evidence-input,
  .evidence-type-input {
    min-width: 0;
    width: 100%;
  }

  .evidence-pagination {
    display: grid;
    gap: 12px;
  }

  .evidence-detail-grid {
    grid-template-columns: 1fr;
  }

  .checks-approved .hero {
    display: block;
  }

  .checks-approved .hero-actions {
    margin-top: 15px;
  }

  .checks-approved .metrics {
    grid-template-columns: 1fr;
  }

  .checks-approved .filters {
    display: grid;
  }

  .checks-approved .input {
    width: 100%;
  }

  .checks-approved .push {
    margin-left: 0;
  }

  .checks-approved .pagination {
    display: grid;
    gap: 12px;
  }

  .emails-approved .hero {
    display: block;
  }

  .emails-approved .hero .emails-btn {
    margin-top: 15px;
  }

  .email-summary {
    grid-template-columns: 1fr;
  }

  .email-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .email-meta {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
  }

  .detail-head,
  .emails-pagination {
    display: grid;
  }

  .reviews-approved .hero {
    display: block;
  }

  .reviews-approved .hero .reviews-btn {
    margin-top: 15px;
  }

  .reviews-metrics {
    grid-template-columns: 1fr;
  }

  .reviews-pagination {
    display: grid;
    gap: 12px;
  }

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

  .sandbox-approved .hero {
    display: block;
  }

  .sandbox-approved .hero h1 {
    font-size: 34px;
  }

  .sandbox-shell {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    border-radius: 14px;
  }

  .conversation-list {
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .list-head {
    padding: 10px 13px;
  }

  .list-head p {
    display: none;
  }

  .chat-list {
    display: flex;
    min-width: 0;
    overflow: auto;
  }

  .chat-item {
    min-width: 240px;
    border-right: 1px solid var(--line);
  }

  .phone-shell {
    height: clamp(360px, calc(100vh - 430px), 640px);
    min-height: 0;
  }

  .bubble,
  .out .bubble {
    max-width: 84%;
  }

  .status-pill {
    display: none;
  }

  .thread {
    padding: 14px;
  }

  .compose {
    padding-inline: 12px;
  }

  .conversation-head {
    padding-inline: 14px;
  }

  .automation-metrics,
  .rule-grid,
  .diagnostic-grid,
  .automation-detail-grid {
    grid-template-columns: 1fr;
  }

  .automation-detail-grid .full {
    grid-column: auto;
  }

  .automation-tabs {
    width: 100%;
  }

  .settings-card-head {
    display: grid;
  }

  .settings-card-head .settings-btn {
    justify-self: start;
  }

  .hours-grid,
  .hours-row,
  .hours-controls,
  .settings-actions,
  .settings-form-grid {
    grid-template-columns: 1fr;
  }
}

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  place-items: center;
  padding: 18px;
  background: rgba(11, 31, 15, .46);
}

.modal-backdrop.open {
  display: grid;
}

.modal {
  width: min(520px, 100%);
  padding: 22px;
  border-radius: 20px;
  background: var(--cream-2);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .2);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.modal h2 {
  margin: 0;
  color: var(--forest);
  font: 500 29px Roboto, sans-serif;
}

.modal p {
  color: var(--muted);
  font-size: 13px;
}

.close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--forest);
  background: var(--white);
}

.widget-list {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.widget-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  color: var(--forest);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.widget-option span {
  color: var(--dim);
  font-size: 11px;
  font-weight: 500;
}

.dashboard-customizer {
  min-width: 0;
}

.customize-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

.customize-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.approved-card-slot,
.approved-card-shell {
  min-width: 0;
}

.approved-card-shell > .card {
  align-self: stretch;
  width: 100%;
}

.dashboard-grid.customizing {
  align-items: stretch;
}

.approved-card-shell {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  border-radius: 18px;
  transition: outline-color .16s ease;
  outline: 2px dashed transparent;
  outline-offset: 3px;
}

.approved-card-shell:hover {
  outline-color: rgba(10, 59, 19, .28);
}

/* Dims the widget content so the drag handle and actions read as clearly
   separate from it, without dimming the handle/actions themselves. */
.approved-card-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 18px;
  background: rgba(255, 255, 255, .3);
  pointer-events: none;
}

.approved-card-shell.dragging {
  outline-color: rgba(10, 59, 19, .42);
}

/* Drag handle and actions float directly on top of the widget's own
   corners (not in a separate row above it), like hover controls on a
   Notion/Coda card. */
.approved-card-handle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(10, 59, 19, .18);
  border-radius: 999px;
  background: var(--forest);
  box-shadow: var(--shadow);
  color: var(--lime);
  cursor: grab;
  user-select: none;
}

.approved-card-handle:active {
  cursor: grabbing;
}

.approved-card-handle span {
  font-size: 16px;
  line-height: 1;
}

.approved-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}

.approved-card-size-control {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
}

.approved-card-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--dim);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.approved-card-size-btn.active {
  color: var(--lime);
  background: var(--forest);
}

.approved-card-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #f2cccc;
  border-radius: 999px;
  color: var(--danger);
  background: #fff8f8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.approved-card-remove:hover {
  background: #fff1f1;
}

/* Ghost card: while a widget is being dragged, its origin slot collapses
   into an empty outline instead of showing stale widget content, and the
   browser's native drag image represents the card following the cursor. */
.approved-card-ghost {
  display: flex;
  min-height: 100%;
  flex: 1;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(10, 59, 19, .35);
  border-radius: 18px;
  background: rgba(10, 59, 19, .05);
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-widget-grid {
  min-width: 0;
}

.dashboard-widget-grid .react-grid-layout {
  min-height: 260px;
}

.dashboard-widget-grid .react-grid-item {
  transition: transform .18s ease;
}

.dashboard-widget-grid .react-grid-placeholder {
  border-radius: 18px;
  background: rgba(233, 245, 79, .35) !important;
  opacity: 1 !important;
}

.dashboard-widget-card {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.dashboard-widget-handle {
  display: flex;
  gap: 9px;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  cursor: grab;
}

.dashboard-widget-handle:active {
  cursor: grabbing;
}

.dashboard-widget-handle span {
  flex: 1;
  color: var(--forest);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-widget-remove {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
}

.dashboard-widget-remove:hover {
  color: var(--danger);
  border-color: #f2cccc;
  background: #fff1f1;
}

.dashboard-widget-body {
  min-height: 0;
  flex: 1;
  padding: 14px;
}

.dashboard-widget-error {
  color: var(--danger);
  font-size: 13px;
}

.dashboard-widget-skeleton {
  display: grid;
  gap: 10px;
}

.dashboard-widget-skeleton div {
  height: 12px;
  border-radius: 999px;
  background: var(--line);
}

.dashboard-widget-skeleton div:last-child {
  width: 42%;
  height: 34px;
}

.dashboard-stat-widget,
.dashboard-sales-widget,
.dashboard-table-widget {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.dashboard-stat-widget {
  justify-content: space-between;
}

.dashboard-stat-widget h3,
.dashboard-sales-widget h3,
.dashboard-table-widget h3 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dashboard-stat-widget p {
  margin: 0;
  color: var(--forest);
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
}

.dashboard-table-widget > div {
  min-height: 0;
  overflow: auto;
}

.dashboard-table-widget table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
}

.dashboard-table-widget th,
.dashboard-table-widget td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  text-align: left;
}

.dashboard-table-widget th {
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-sales-totals {
  display: flex;
  gap: 14px;
  margin-top: auto;
  align-items: flex-end;
}

.dashboard-sales-totals p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
}

.dashboard-sales-totals strong {
  color: var(--forest);
  font-size: 20px;
  font-weight: 500;
}

.dashboard-sales-totals .muted {
  color: var(--muted);
}

.dashboard-sales-totals .positive,
.dashboard-sales-totals .negative {
  margin: 0 0 2px auto;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-sales-totals .positive {
  color: var(--forest);
}

.dashboard-sales-totals .negative {
  color: var(--danger);
}

.timesheets-approved,
.suppliers-approved {
  color: var(--ink);
  font-family: Roboto, sans-serif;
}

.timesheets-approved .hero,
.suppliers-approved .hero {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 17px;
}

.timesheets-approved .eyebrow,
.suppliers-approved .eyebrow {
  margin: 0 0 5px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.timesheets-approved h1,
.suppliers-approved h1 {
  margin: 0;
  color: var(--forest);
  font: 500 clamp(34px, 4vw, 48px)/1 Roboto, sans-serif;
  letter-spacing: 0;
}

.timesheets-approved .hero p:last-child,
.suppliers-approved .hero p:last-child {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.timesheets-approved .hero-actions,
.suppliers-approved .hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.timesheets-approved .cp-card,
.suppliers-approved .cp-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(10, 59, 19, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.timesheets-approved .cp-card + .cp-card,
.suppliers-approved .cp-card + .cp-card {
  margin-top: 14px;
}

.timesheets-approved .cp-btn,
.suppliers-approved .cp-btn {
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--forest);
  border-radius: 100px;
  color: var(--lime);
  background: var(--forest);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.timesheets-approved .cp-btn-ghost,
.suppliers-approved .cp-btn-ghost {
  border-color: var(--line);
  color: var(--forest);
  background: #fff;
}

.timesheets-approved .cp-btn-danger,
.suppliers-approved .cp-btn-danger {
  border-color: #eed5d0;
  color: var(--danger);
  background: #fff7f5;
}

.timesheets-approved .cp-btn-sm,
.suppliers-approved .cp-btn-sm {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.timesheets-approved .cp-icon,
.suppliers-approved .cp-icon {
  width: 16px;
  height: 16px;
}

.timesheets-approved .cp-filter-bar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.timesheets-approved .cp-inline-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.timesheets-approved .cp-inline-form label,
.timesheets-approved .cp-grid-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.timesheets-approved .cp-filter-select,
.timesheets-approved .cp-grid-form input {
  min-height: 39px !important;
  min-width: 145px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
}

.timesheets-approved .cp-kicker {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.timesheets-approved .cp-card-divider {
  margin: 14px 0;
  border-top: 1px solid var(--line);
}

.timesheets-approved .cp-table-wrap,
.suppliers-approved .cp-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.timesheets-approved .cp-table,
.suppliers-approved .cp-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.suppliers-approved .cp-table {
  min-width: 940px;
}

.timesheets-approved .cp-table th,
.suppliers-approved .cp-table th {
  padding: 11px 13px;
  color: var(--muted);
  background: #f8f4ed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.timesheets-approved .cp-table td,
.suppliers-approved .cp-table td {
  padding: 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.timesheets-approved .cp-table tbody tr:hover,
.suppliers-approved .cp-table tbody tr:hover {
  background: #fffdf6;
}

.timesheets-approved .cp-table td:first-child,
.suppliers-approved .cp-table td:first-child {
  color: var(--ink);
  font-weight: 700;
}

.timesheets-approved .cp-table-empty,
.suppliers-approved .cp-table-empty {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.timesheets-approved .cp-status-badge,
.suppliers-approved .cp-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}

.timesheets-approved .cp-status-badge--completed,
.suppliers-approved .cp-status-badge--completed,
.timesheets-approved .cp-status-badge--pending {
  color: var(--good);
  background: #e7f4df;
}

.timesheets-approved .cp-status-badge--skipped,
.suppliers-approved .cp-status-badge--skipped {
  color: #8a5200;
  background: #fff2cc;
}

.timesheets-approved .cp-pagination {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 14px;
  padding: 0;
  color: var(--dim);
  font-size: 14px;
}

.timesheets-approved .cp-note {
  color: var(--muted);
  font-size: 14px;
}

.suppliers-approved .cp-tab-bar {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.suppliers-approved .cp-tab {
  display: inline-flex;
  gap: 6px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.suppliers-approved .cp-tab.is-active {
  color: var(--lime);
  background: var(--forest);
}

.suppliers-approved .cp-tab span {
  background: rgba(10, 59, 19, .08) !important;
  color: var(--muted) !important;
}

.suppliers-approved .cp-tab.is-active span {
  background: rgba(233, 245, 79, .18) !important;
  color: var(--lime) !important;
}

.suppliers-approved .cp-tab-panel {
  display: none;
  margin-top: 14px;
}

.suppliers-approved .cp-tab-panel.is-active {
  display: block;
}

.suppliers-approved a {
  color: var(--forest) !important;
}

@media (max-width: 1180px) {
  .dashboard-approved .span-kpi,
  .dashboard-approved .span-3,
  .dashboard-approved .span-4,
  .dashboard-approved .span-6 {
    grid-column: span 6;
  }

  .dashboard-approved .span-5,
  .dashboard-approved .span-7,
  .dashboard-approved .span-8 {
    grid-column: span 12;
  }

  .sales-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .dashboard-approved .hero {
    display: block;
  }

  .timesheets-approved .hero,
  .suppliers-approved .hero {
    display: block;
  }

  .timesheets-approved .hero-actions,
  .suppliers-approved .hero-actions {
    justify-content: flex-start;
    margin-top: 16px;
  }

  .suppliers-approved .cp-tab-bar {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .suppliers-approved .cp-tab-bar::-webkit-scrollbar {
    display: none;
  }

  .dashboard-approved .hero-actions {
    margin-top: 16px;
  }

  .customize-toolbar {
    display: grid;
  }

  .dashboard-approved .focus-strip {
    grid-template-columns: 1fr;
  }

  .dashboard-approved .span-kpi,
  .dashboard-approved .span-3,
  .dashboard-approved .span-4,
  .dashboard-approved .span-5,
  .dashboard-approved .span-7,
  .dashboard-approved .span-8,
  .dashboard-approved .span-12 {
    grid-column: span 12;
  }

  .issue-head,
  .issue-row,
  .shift-head,
  .shift-row,
  .task-head,
  .task-row,
  .mini-table > div {
    grid-template-columns: 1fr;
  }

  .team-grid,
  .score-table {
    grid-template-columns: 1fr;
  }

  .score-table {
    display: grid;
  }
}

@media (max-width: 1180px) {
  :root {
    /* The mobile topbar itself is sticky at top:0, so anything else on the
       page (e.g. the availability time-axis) that sticks to the top must
       sit below its 64px height instead of underneath it. */
    --cp-sticky-top: 64px;
  }

  .cp-shell {
    display: block !important;
    min-height: 100vh !important;
  }

  .cp-mobile-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    display: flex !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(10, 59, 19, .08) !important;
    background: #fff !important;
  }

  .cp-mobile-topbar-title {
    text-align: center !important;
  }

  .cp-mobile-topbar-title p {
    color: var(--dim) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
  }

  .cp-mobile-topbar-title strong {
    color: var(--forest) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .cp-nav-toggle,
  .cp-sidebar-close {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    color: var(--forest) !important;
    background: #fff !important;
  }

  .cp-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 70 !important;
    width: min(82vw, 300px) !important;
    max-width: 300px !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    box-shadow: 16px 0 42px rgba(10, 59, 19, .24) !important;
  }

  .cp-sidebar.cp-sidebar-open {
    transform: translateX(0) !important;
  }

  .cp-sidebar-backdrop {
    z-index: 65 !important;
    background: rgba(28, 43, 30, .44) !important;
  }

  .cp-sidebar-backdrop.cp-sidebar-backdrop-open {
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  .cp-desktop-topbar {
    display: none !important;
  }

  .cp-main {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 14px 28px !important;
  }

  .cp-main-inner,
  .cp-main-inner-dashboard,
  .cp-main-inner:has(.dashboard-approved) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .dashboard-approved .hero {
    display: grid !important;
    gap: 14px !important;
    align-items: start !important;
    margin-bottom: 16px !important;
  }

  .dashboard-approved h1 {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1 !important;
  }

  .dashboard-approved .hero-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  .dashboard-approved .hero-actions::-webkit-scrollbar {
    display: none !important;
  }

  .dashboard-approved .hero-actions .btn {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
  }

  .dashboard-approved .daily-brief-strip {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 16px !important;
  }

  .dashboard-approved .daily-brief-strip ul {
    margin-left: 31px !important;
  }

  .dashboard-approved .focus-link {
    justify-self: start !important;
  }

  .dashboard-grid,
  .dashboard-approved .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .approved-card-shell,
  .dashboard-approved .span-kpi,
  .dashboard-approved .span-3,
  .dashboard-approved .span-4,
  .dashboard-approved .span-5,
  .dashboard-approved .span-6,
  .dashboard-approved .span-7,
  .dashboard-approved .span-8,
  .dashboard-approved .span-12 {
    grid-column: 1 / -1 !important;
  }

  .dashboard-approved .card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .dashboard-approved .ai-summary-card {
    min-height: 0 !important;
  }

  .dashboard-approved .card-top {
    gap: 12px !important;
    align-items: flex-start !important;
  }

  .dashboard-approved .section-title {
    font-size: 22px !important;
  }

  .dashboard-approved .issue-grid,
  .dashboard-approved .shift-table,
  .dashboard-approved .task-table,
  .dashboard-approved .mini-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .dashboard-approved .issue-head,
  .dashboard-approved .issue-row {
    min-width: 680px !important;
  }

  .dashboard-approved .shift-head,
  .dashboard-approved .shift-row {
    min-width: 520px !important;
  }

  .dashboard-approved .task-head,
  .dashboard-approved .task-row {
    min-width: 480px !important;
  }

  .dashboard-approved .team-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dashboard-approved .team-note {
    min-height: 0 !important;
  }

  .dashboard-approved .score-table {
    width: 100% !important;
  }

  .dashboard-approved .forecast-summary {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .cp-main {
    padding: 22px 22px 34px !important;
  }

  .dashboard-approved .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-approved .span-kpi,
  .dashboard-approved .span-3,
  .dashboard-approved .span-4,
  .dashboard-approved .span-5,
  .dashboard-approved .span-6 {
    grid-column: span 1 !important;
  }

  .dashboard-approved .span-7,
  .dashboard-approved .span-8,
  .dashboard-approved .span-12 {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 480px) {
  .cp-main {
    padding: 14px 10px 24px !important;
  }

  .dashboard-approved h1 {
    font-size: 34px !important;
  }

  .dashboard-approved .card {
    padding: 14px !important;
  }

  .dashboard-approved .metric-line strong {
    font-size: 34px !important;
  }

  .dashboard-approved .daily-brief-strip {
    border-radius: 14px !important;
  }
}