/*
 * sms123 theme: palette, type and Bootstrap 5.3 component overrides.
 * Spec: docs/superpowers/specs/2026-10-22-redesign-design.md (light only).
 * Load order: bootstrap.min.css -> theme.css -> shell.css -> pages.css
 */

:root {
  --c-bg: #f5f4ef;
  --c-surface: #ffffff;
  --c-surface-2: #eeece5;
  --c-line: #e2dfd6;
  --c-line-strong: #c9c5b9;
  --c-text: #1b1a17;
  --c-text-2: #57544c;
  --c-brand: #2c7538;
  --c-brand-fill: #3e9348;
  --c-autofill: #edf5ec;
  --c-on-brand: #ffffff;
  --c-ok: #2c7538;
  --c-warn: #9a6400;
  --c-bad: #b3261e;

  --radius-card: 12px;
  --radius-ctl: 8px;
  --font: "Manrope", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dur-press: 120ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Bootstrap mapping */
  --bs-body-bg: var(--c-bg);
  --bs-body-bg-rgb: 245, 244, 239;
  --bs-body-color: var(--c-text);
  --bs-body-color-rgb: 27, 26, 23;
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.55;
  --bs-emphasis-color: var(--c-text);
  --bs-secondary-color: var(--c-text-2);
  --bs-secondary-color-rgb: 87, 84, 76;
  --bs-secondary-bg: var(--c-surface-2);
  --bs-tertiary-bg: var(--c-surface-2);
  --bs-tertiary-color: var(--c-text-2);
  --bs-heading-color: var(--c-text);
  --bs-primary: var(--c-brand);
  --bs-primary-rgb: 44, 117, 56;
  --bs-secondary: var(--c-text-2);
  --bs-secondary-rgb: 87, 84, 76;
  --bs-success: var(--c-ok);
  --bs-success-rgb: 44, 117, 56;
  --bs-info: var(--c-brand);
  --bs-info-rgb: 44, 117, 56;
  --bs-warning: var(--c-warn);
  --bs-warning-rgb: 154, 100, 0;
  --bs-danger: var(--c-bad);
  --bs-danger-rgb: 179, 38, 30;
  --bs-light: var(--c-surface-2);
  --bs-light-rgb: 238, 236, 229;
  --bs-dark: var(--c-text);
  --bs-dark-rgb: 27, 26, 23;
  --bs-primary-text-emphasis: var(--c-brand);
  --bs-primary-bg-subtle: #e3efe3;
  --bs-primary-border-subtle: #c3dcc5;
  --bs-success-text-emphasis: var(--c-ok);
  --bs-success-bg-subtle: #e3efe3;
  --bs-success-border-subtle: #c3dcc5;
  --bs-info-text-emphasis: var(--c-brand);
  --bs-info-bg-subtle: #e3efe3;
  --bs-info-border-subtle: #c3dcc5;
  --bs-warning-text-emphasis: #7a4f00;
  --bs-warning-bg-subtle: #f6ecd6;
  --bs-warning-border-subtle: #e8d3a6;
  --bs-danger-text-emphasis: var(--c-bad);
  --bs-danger-bg-subtle: #f7e1df;
  --bs-danger-border-subtle: #edc0bc;
  --bs-secondary-text-emphasis: var(--c-text-2);
  --bs-secondary-bg-subtle: var(--c-surface-2);
  --bs-secondary-border-subtle: var(--c-line);
  --bs-light-text-emphasis: var(--c-text-2);
  --bs-light-bg-subtle: var(--c-surface-2);
  --bs-light-border-subtle: var(--c-line);
  --bs-dark-text-emphasis: var(--c-text);
  --bs-dark-bg-subtle: var(--c-surface-2);
  --bs-dark-border-subtle: var(--c-line);
  --bs-link-color: var(--c-brand);
  --bs-link-color-rgb: 44, 117, 56;
  --bs-link-hover-color: #215a2b;
  --bs-link-hover-color-rgb: 33, 90, 43;
  --bs-border-color: var(--c-line);
  --bs-border-color-translucent: var(--c-line);
  --bs-border-radius: var(--radius-ctl);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--radius-card);
  --bs-focus-ring-color: rgba(44, 117, 56, 0.25);
  --bs-form-valid-color: var(--c-ok);
  --bs-form-valid-border-color: var(--c-ok);
  --bs-form-invalid-color: var(--c-bad);
  --bs-form-invalid-border-color: var(--c-bad);
  --bs-code-color: #8a3b12;
  --bs-highlight-bg: #f6ecd6;
}

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

a { text-underline-offset: 0.18em; }
::selection { background: rgba(62, 147, 72, 0.22); }
code, pre, kbd, samp { font-family: var(--font-mono); }

/* Icons (includes/icons.php) */
.ic { width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex: none; }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1.05rem;
  --bs-btn-border-radius: var(--radius-ctl);
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform var(--dur-press) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-sm { --bs-btn-padding-y: 0.3rem; --bs-btn-padding-x: 0.7rem; --bs-btn-border-radius: 6px; gap: 0.3rem; }
.btn-lg { --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.4rem; --bs-btn-border-radius: var(--radius-ctl); }

.btn-primary, .btn-success, .btn-info {
  --bs-btn-color: var(--c-on-brand);
  --bs-btn-bg: var(--c-brand-fill);
  --bs-btn-border-color: var(--c-brand-fill);
  --bs-btn-hover-color: var(--c-on-brand);
  --bs-btn-hover-bg: var(--c-brand);
  --bs-btn-hover-border-color: var(--c-brand);
  --bs-btn-active-color: var(--c-on-brand);
  --bs-btn-active-bg: #255f2f;
  --bs-btn-active-border-color: #255f2f;
  --bs-btn-disabled-color: var(--c-on-brand);
  --bs-btn-disabled-bg: var(--c-brand-fill);
  --bs-btn-disabled-border-color: var(--c-brand-fill);
}
.btn-outline-primary, .btn-outline-success, .btn-outline-info {
  --bs-btn-color: var(--c-brand);
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-bg: var(--c-surface);
  --bs-btn-hover-color: var(--c-brand);
  --bs-btn-hover-bg: #eaf3ea;
  --bs-btn-hover-border-color: var(--c-brand);
  --bs-btn-active-color: var(--c-brand);
  --bs-btn-active-bg: #dcebdc;
  --bs-btn-active-border-color: var(--c-brand);
  --bs-btn-disabled-color: var(--c-text-2);
  --bs-btn-disabled-border-color: var(--c-line);
}
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
  --bs-btn-color: var(--c-text);
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-color: var(--c-text);
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-border-color: var(--c-line-strong);
  --bs-btn-active-color: var(--c-text);
  --bs-btn-active-bg: #e4e1d8;
  --bs-btn-active-border-color: var(--c-line-strong);
  --bs-btn-disabled-color: var(--c-text-2);
  --bs-btn-disabled-bg: var(--c-surface);
  --bs-btn-disabled-border-color: var(--c-line);
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--c-bad);
  --bs-btn-border-color: var(--c-bad);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #961f18;
  --bs-btn-hover-border-color: #961f18;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7f1a14;
  --bs-btn-active-border-color: #7f1a14;
}
.btn-outline-danger {
  --bs-btn-color: var(--c-bad);
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: var(--bs-danger-border-subtle);
  --bs-btn-hover-color: var(--c-bad);
  --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
  --bs-btn-hover-border-color: var(--c-bad);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--c-bad);
  --bs-btn-active-border-color: var(--c-bad);
}
.btn-warning, .btn-outline-warning {
  --bs-btn-color: var(--c-warn);
  --bs-btn-bg: var(--bs-warning-bg-subtle);
  --bs-btn-border-color: var(--bs-warning-border-subtle);
  --bs-btn-hover-color: #7a4f00;
  --bs-btn-hover-bg: #efdfbd;
  --bs-btn-hover-border-color: var(--c-warn);
  --bs-btn-active-color: #7a4f00;
  --bs-btn-active-bg: #efdfbd;
  --bs-btn-active-border-color: var(--c-warn);
}
.btn-link {
  --bs-btn-color: var(--c-brand);
  --bs-btn-hover-color: #215a2b;
  --bs-btn-active-color: #215a2b;
}
.btn-close:focus { box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: 0.8125rem; color: var(--c-text-2); margin-bottom: 0.35rem; }
.form-label strong { font-weight: inherit; }
.form-control, .form-select {
  border-color: var(--c-line-strong);
  border-radius: var(--radius-ctl);
  background-color: var(--c-surface);
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  color: var(--c-text);
}
.form-select { padding-right: 2.4rem; }
textarea.form-control { min-height: 6rem; }
.form-control-sm, .form-select-sm { min-height: 2.25rem; padding: 0.35rem 0.6rem; font-size: 0.875rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
.form-control:disabled, .form-select:disabled {
  background-color: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text-2);
}
.form-control::placeholder { color: #8f8b80; }
/* Chrome draws autofilled values in the system font; ::first-line is the only hook that reaches that text.
   Values filled on page load stay a browser preview (system font, not readable by the page) until the
   first click or key press, and the preview shown while hovering a suggestion is browser UI: neither can
   be styled. The inset shadow replaces Chrome's blue autofill background with the theme's. */
input:-webkit-autofill::first-line { font-family: var(--font); color: var(--c-text); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-text);
  box-shadow: 0 0 0 1000px var(--c-autofill) inset;
  transition: background-color 9999s;
}
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--c-autofill) inset, 0 0 0 0.2rem var(--bs-focus-ring-color); }
.form-text { color: var(--c-text-2); font-size: 0.8125rem; }
.form-check-input { border-color: var(--c-line-strong); width: 1.15em; height: 1.15em; margin-top: 0.2em; }
.form-check-input:checked { background-color: var(--c-brand-fill); border-color: var(--c-brand-fill); }
.form-check-input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232c7538'/%3e%3c/svg%3e"); }
.form-switch .form-check-input { width: 2.2em; }
.input-group-text { background: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-text-2); }
.input-group > .btn { min-height: 2.75rem; }

/* ---------- Cards ---------- */
.card {
  --bs-card-bg: var(--c-surface);
  --bs-card-border-color: var(--c-line);
  --bs-card-border-radius: var(--radius-card);
  --bs-card-inner-border-radius: calc(var(--radius-card) - 1px);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: 1.1rem;
  --bs-card-cap-padding-x: 1.25rem;
  box-shadow: none !important;
}
.card-header { border-bottom: 0; padding-bottom: 0; }
h1.card-header, h2.card-header, h3.card-header, h4.card-header, h5.card-header, .card-header h5, .card-header .h5 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.card-footer { background: transparent; border-top-color: var(--c-line); }

/* ---------- Alerts, badges ---------- */
.alert {
  --bs-alert-border-radius: var(--radius-ctl);
  --bs-alert-padding-y: 0.8rem;
  --bs-alert-padding-x: 1rem;
  font-size: 0.9375rem;
}
.alert-info, .alert-secondary, .alert-light { --bs-alert-color: var(--c-text); --bs-alert-bg: var(--c-surface-2); --bs-alert-border-color: var(--c-line); --bs-alert-link-color: var(--c-brand); }
.alert-primary { --bs-alert-color: #1f4f28; --bs-alert-bg: #e8f2e8; --bs-alert-border-color: #cfe3d0; --bs-alert-link-color: var(--c-brand); }
.alert .ic { margin-right: 0.35rem; }
.alert-info .ic { color: var(--c-text-2); }
.badge { font-size: 0.875em; font-weight: 600; border-radius: 999px; padding: 0.3em 0.7em; }
.badge.bg-primary, .badge.text-bg-primary, .badge.bg-success, .badge.text-bg-success { background-color: #e3efe3 !important; color: var(--c-brand) !important; }
.badge.bg-info, .badge.text-bg-info { background-color: #e3efe3 !important; color: var(--c-brand) !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: #f6ecd6 !important; color: #7a4f00 !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: #f7e1df !important; color: var(--c-bad) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.bg-dark { background-color: var(--c-surface-2) !important; color: var(--c-text-2) !important; }
.text-primary, .text-info { color: var(--c-brand) !important; }
.text-success { color: var(--c-ok) !important; }
.text-warning { color: var(--c-warn) !important; }
.text-danger { color: var(--c-bad) !important; }
.text-muted, .text-secondary { color: var(--c-text-2) !important; }
.bg-light { background-color: var(--c-surface-2) !important; }
.bg-primary { background-color: var(--c-brand-fill) !important; }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-text);
  --bs-table-border-color: var(--c-line);
  --bs-table-striped-bg: rgba(238, 236, 229, 0.55);
  --bs-table-hover-bg: rgba(238, 236, 229, 0.8);
  --bs-table-active-bg: var(--c-surface-2);
  margin-bottom: 0;
}
.table > thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-2);
  border-bottom-width: 1px;
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: 0.65rem 0.6rem; }
.table-light { --bs-table-bg: var(--c-surface-2); --bs-table-color: var(--c-text-2); }

/* ---------- Nav tabs, pagination, dropdowns ---------- */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--c-line);
  --bs-nav-tabs-link-active-color: var(--c-brand);
  --bs-nav-tabs-link-active-bg: var(--c-surface);
  --bs-nav-tabs-link-active-border-color: var(--c-line) var(--c-line) var(--c-surface);
  --bs-nav-link-color: var(--c-text-2);
  --bs-nav-link-hover-color: var(--c-text);
  --bs-nav-link-font-weight: 600;
}
/* Card headers have no bottom padding/border here, so Bootstrap's negative margin pulled
   the tabs into the card body; keep them as a normal tab row with their own baseline. */
.card-header-tabs {
  margin-bottom: 0;
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--c-brand-fill); --bs-nav-link-color: var(--c-text-2); }
.nav-link { color: var(--c-text-2); }
.nav-link:hover, .nav-link:focus { color: var(--c-text); }
.pagination {
  --bs-pagination-color: var(--c-text);
  --bs-pagination-bg: var(--c-surface);
  --bs-pagination-border-color: var(--c-line);
  --bs-pagination-hover-color: var(--c-text);
  --bs-pagination-hover-bg: var(--c-surface-2);
  --bs-pagination-hover-border-color: var(--c-line);
  --bs-pagination-focus-color: var(--c-text);
  --bs-pagination-focus-bg: var(--c-surface-2);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
  --bs-pagination-active-color: var(--c-on-brand);
  --bs-pagination-active-bg: var(--c-brand-fill);
  --bs-pagination-active-border-color: var(--c-brand-fill);
  --bs-pagination-disabled-color: #9a978d;
  --bs-pagination-disabled-bg: var(--c-surface);
  --bs-pagination-disabled-border-color: var(--c-line);
  --bs-pagination-border-radius: var(--radius-ctl);
}
.dropdown-menu {
  --bs-dropdown-border-color: var(--c-line);
  --bs-dropdown-border-radius: var(--radius-ctl);
  --bs-dropdown-link-active-bg: var(--c-brand-fill);
  --bs-dropdown-link-hover-bg: var(--c-surface-2);
  box-shadow: 0 8px 24px rgba(27, 26, 23, 0.12);
}
.list-group { --bs-list-group-border-color: var(--c-line); --bs-list-group-active-bg: var(--c-brand-fill); --bs-list-group-active-border-color: var(--c-brand-fill); }

/* ---------- Modal, offcanvas ---------- */
.modal {
  --bs-modal-border-color: var(--c-line);
  --bs-modal-border-radius: 16px;
  --bs-modal-inner-border-radius: 15px;
  --bs-modal-header-border-color: var(--c-line);
  --bs-modal-footer-border-color: var(--c-line);
  --bs-modal-box-shadow: 0 24px 64px rgba(27, 26, 23, 0.18);
  /* Visible area (default.js): above the phone keyboard when it is open */
  top: var(--vv-top, 0);
  height: var(--vv-height, 100%);
}
.modal-title { font-weight: 700; font-size: 1.125rem; }
.modal-backdrop { --bs-backdrop-bg: #1b1a17; --bs-backdrop-opacity: 0.4; }
.offcanvas { --bs-offcanvas-bg: var(--c-surface); --bs-offcanvas-border-color: var(--c-line); }

/* ---------- Progress, misc ---------- */
.progress { --bs-progress-bar-bg: var(--c-brand-fill); --bs-progress-bg: var(--c-surface-2); }
hr { border-color: var(--c-line); opacity: 1; }
pre { background: var(--c-surface-2); border-radius: var(--radius-ctl); padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.875rem; }
pre.bg-light { background: var(--c-surface-2) !important; }
code { font-size: 0.95em; }

/* ---------- flatpickr ---------- */
.flatpickr-calendar {
  font-family: var(--font);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(27, 26, 23, 0.16);
  border: 1px solid var(--c-line);
}
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--c-brand-fill);
  border-color: var(--c-brand-fill);
}
.flatpickr-day.today { border-color: var(--c-brand); }
.flatpickr-day:hover { background: var(--c-surface-2); border-color: var(--c-surface-2); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; }
.flatpickr-input[readonly] { background-color: var(--c-surface); color: var(--c-text); }

/* ---------- bootstrap-table ---------- */
.bootstrap-table .fixed-table-container { border-color: var(--c-line); border-radius: var(--radius-ctl); }
.bootstrap-table .fixed-table-container .table thead th { border-bottom: 1px solid var(--c-line); }
.bootstrap-table .fixed-table-container .table thead th .th-inner { padding: 0.6rem; }
.bootstrap-table .fixed-table-pagination .page-list .btn-group .btn { min-height: 0; }
.filter-control .search-input, .filter-control .form-select { min-height: 2rem; padding: 0.2rem 0.5rem; font-size: 0.8125rem; font-weight: 400; text-transform: none; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- Info button + popover ---------- */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin: -0.25rem 0 -0.25rem 0.15rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--c-text-2);
  vertical-align: middle; cursor: pointer;
}
.info-btn:hover, .info-btn:focus-visible, .info-btn[aria-describedby] { color: var(--c-brand); background: var(--c-surface-2); }
.info-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; }
.info-btn .ic { width: 1.05rem; height: 1.05rem; }
/* Next to a label: line up with the letters (x-height), not the line box incl. descenders */
.form-check-label .info-btn { position: relative; top: -0.1rem; }
.popover {
  --bs-popover-font-size: 0.875rem;
  --bs-popover-border-color: var(--c-line);
  --bs-popover-border-radius: var(--radius-ctl);
  --bs-popover-header-bg: var(--c-surface-2);
  --bs-popover-header-color: var(--c-text);
  --bs-popover-body-color: var(--c-text);
  --bs-popover-max-width: 320px;
  font-family: var(--font);
  box-shadow: 0 8px 24px rgba(27, 26, 23, 0.12);
}
.popover-header { font-weight: 700; font-size: 0.875rem; }
.info-popover .popover-body p { margin-bottom: 0.4rem; }
.info-popover .popover-body p:last-child { margin-bottom: 0; }