/* figma-2026.css — canonical Service1 redesign design system
   Tokens + utilities consumed by Dashboard, Job Detail, Scheduling, and the shell.
   Linked globally in _Layout.cshtml before any page-specific stylesheet. */

:root {
  --s1-bg: #EEF0EC;
  --s1-card: #FFFFFF;
  --s1-line: #E8ECE9;
  --s1-primary: #004D40;
  --s1-primary-soft: #E0F2F1;
  --s1-accent: #D4960A;
  --s1-amber-soft: #FEF6E0;
  --s1-danger: #B42318;
  --s1-danger-soft: #FEE4E2;
  --s1-info: #1E4A86;
  --s1-info-soft: #E0EBF6;
  --s1-ink: #0A2540;
  --s1-ink-2: #3C4257;
  --s1-ink-3: #697386;
  --s1-muted: #788680;
  --s1-radius: 10px;
  --s1-radius-sm: 6px;
  --s1-radius-btn: 8px;
  --s1-radius-pill: 999px;
  --s1-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Card */
.s1-card {
  background: var(--s1-card);
  border: 1px solid var(--s1-line);
  border-radius: var(--s1-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.s1-card-row { display: flex; justify-content: space-between; align-items: center; }
.s1-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--s1-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 8px;
}

/* Buttons */
.s1-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 14px;
  border-radius: var(--s1-radius-btn);
  border: 1px solid transparent;
  background: #fff;
  color: var(--s1-ink-2);
  cursor: pointer;
  text-decoration: none;
}
.s1-btn:hover { filter: brightness(0.97); }
.s1-btn--primary { background: var(--s1-primary); color: #fff; }
.s1-btn--accent  { background: var(--s1-accent); color: #fff; }
.s1-btn--ghost   { background: #fff; color: var(--s1-ink); border-color: #DDE2DF; }
.s1-btn--danger  { background: #fff; color: var(--s1-danger); border-color: #FECDCA; }
.s1-btn--danger-text { background: transparent; color: var(--s1-danger); border: 0; padding: 6px 8px; }
.s1-btn--sm { padding: 6px 10px; font-size: 12px; }
.s1-btn--block { width: 100%; justify-content: center; }

/* Tabs (underline) */
.s1-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  margin-right: 22px;
  font-size: 13px;
  color: var(--s1-ink-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.s1-tab--active, .s1-tab.active {
  color: var(--s1-ink);
  border-bottom-color: var(--s1-primary);
  font-weight: 600;
}
.s1-tab-count {
  display: inline-block;
  background: var(--s1-primary-soft);
  color: var(--s1-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--s1-radius-pill);
  margin-left: 4px;
}
.s1-tab-count.amber { background: var(--s1-amber-soft); color: #7A5400; }
.s1-tab-count.red   { background: var(--s1-danger-soft); color: var(--s1-danger); }

/* Pill-tab filter chips */
.s1-pill-tabs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.s1-pill-tab {
  padding: 5px 12px;
  border-radius: var(--s1-radius-pill);
  background: var(--s1-bg);
  color: var(--s1-ink-2);
  font-size: 12px;
  border: 1px solid transparent;
  cursor: pointer;
}
.s1-pill-tab--active, .s1-pill-tab.active {
  background: #fff;
  border-color: #DDE2DF;
  font-weight: 600;
  color: var(--s1-ink);
}

/* KPI */
.s1-kpi {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--s1-line);
  border-radius: var(--s1-radius);
  padding: 14px 16px;
  min-width: 180px;
  margin-right: 8px;
  vertical-align: top;
}
.s1-kpi__label {
  font-size: 11px;
  color: var(--s1-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.s1-kpi__value { font-size: 26px; font-weight: 700; margin: 4px 0; color: var(--s1-ink); }
.s1-kpi__sub   { font-size: 12px; color: var(--s1-muted); }
.s1-kpi__delta--up { color: #0E7C66; }
.s1-kpi__delta--down { color: var(--s1-danger); }

/* Chips/badges */
.s1-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--s1-radius-pill);
  background: #F5F7F4;
  color: var(--s1-ink-2);
  font-size: 12px;
  margin-right: 6px;
}
.s1-chip--green { background: var(--s1-primary-soft); color: var(--s1-primary); }
.s1-chip--amber { background: var(--s1-amber-soft); color: #7A5400; }
.s1-chip--red   { background: var(--s1-danger-soft); color: var(--s1-danger); }
.s1-chip--blue  { background: var(--s1-info-soft); color: var(--s1-info); }
.s1-chip--ghost { background: #fff; border: 1px solid #DDE2DF; }

.s1-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--s1-radius-pill);
  background: #F5F7F4;
  color: var(--s1-ink-2);
  font-size: 11px;
  margin-left: 4px;
  vertical-align: middle;
}
.s1-badge--green { background: var(--s1-primary-soft); color: var(--s1-primary); }
.s1-badge--amber { background: var(--s1-amber-soft); color: #7A5400; }
.s1-badge--red   { background: var(--s1-danger-soft); color: var(--s1-danger); }

/* Right rail */
.s1-rail { width: 280px; }
.s1-rail__title {
  font-size: 11px;
  color: var(--s1-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.s1-rail__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: var(--s1-ink-2);
}

/* Claim banner */
.s1-claim-banner {
  background: var(--s1-amber-soft);
  border-radius: var(--s1-radius-btn);
  padding: 10px 14px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.s1-claim-banner__text { font-size: 13px; color: var(--s1-ink-2); }
.s1-claim-banner__text b { color: var(--s1-ink); }

/* Avatars */
.s1-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #0E7C66;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.s1-avatar--sm { width: 22px; height: 22px; font-size: 10px; }

/* Header / sidebar shell helpers (used by _LayoutHeader redesign) */
.s1-sidebar__icon {
  width: 32px; height: 32px;
  border-radius: var(--s1-radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: #fff;
}
.s1-sidebar__icon--active { background: var(--s1-accent); color: #fff; }

.s1-header__search-context {
  flex: 1;
  background: #fff;
  border: 1px solid #DDE2DF;
  border-radius: var(--s1-radius-btn);
  padding: 8px 12px;
  color: var(--s1-ink-3);
  font-size: 13px;
}
.s1-header__kbd {
  background: #F5F7F4;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--s1-muted);
  font-family: inherit;
  margin-left: 6px;
}

/* Page bar (title row) */
.s1-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.s1-page-bar h1, .s1-page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--s1-ink);
}

/* Subnav (Scheduling) */
.s1-subnav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--s1-line);
  margin-bottom: 16px;
  overflow-x: auto;
}

/* AI fab */
.s1-ai-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  background: #0F1B17;
  color: #fff;
  border-radius: var(--s1-radius-pill);
  padding: 10px 16px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 1000;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.s1-ai-fab::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--s1-accent);
}

/* Resource calendar booking pills */
.s1-cal-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--s1-radius-sm);
  font-size: 11px;
  margin: 2px;
}
.s1-cal-pill--confirmed { background: var(--s1-primary-soft); color: var(--s1-primary); }
.s1-cal-pill--tentative { background: var(--s1-amber-soft); color: #7A5400; }
.s1-cal-pill--dayoff    { background: var(--s1-danger-soft); color: var(--s1-danger); }
.s1-cal-pill--requested {
  background: repeating-linear-gradient(45deg, var(--s1-danger-soft) 0 6px, transparent 6px 10px);
  color: var(--s1-danger);
}