/*
  CoreAlign design-system components: buttons, cards, forms, feedback, overlays, data-display.
  Depends on tokens.css. See docs/design-system/component-catalogue.md for usage of each class
  and which states are required.
*/

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(1px);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.btn-outline:active:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #FFFFFF;
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #FFFFFF;
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
}

.btn-cancel {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-cancel:hover:not(:disabled) {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-text-muted);
}

.btn-icon {
  padding: var(--space-sm);
  border-radius: var(--radius-circle);
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text);
  line-height: 0;
}

.btn-icon:hover:not(:disabled) {
  background-color: var(--color-bg-subtle);
}

.btn-filter {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-small);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-lg);
}

.btn-filter:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.btn-filter.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

/* An inline text action within a line of content (e.g. the "Change" link next to a locked
   context value) - not a bordered/padded button, just underlined text that reads as clickable. */
.btn-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: var(--font-weight-normal);
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.btn-link:hover {
  color: var(--color-accent-dark);
}

.btn-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Cards / tiles ---- */

/* UI pass 2: shadows removed from every STATIC section/card (see docs/design-system/
   design-principles.md, "Elevation") - a shadow now means "this is genuinely floating above the
   page" (a dropdown/flyout/modal/toast), never "this is a section that's part of the page".
   A 1px hairline border delineates a static section instead. Combined with the halved --radius
   and the tightened --card-padding/--card-gap, this is the direct fix for "bubble style and
   big" / "rounded boxes floating inside rounded boxes". */
.tile,
.box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-padding);
  margin-bottom: var(--card-gap);
}

.tile-title {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}

.tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.tile-link:hover {
  border-color: var(--color-primary);
  background-color: var(--color-bg-subtle);
}

.tile-link:focus-visible {
  box-shadow: var(--focus-ring);
}

.tile--narrow {
  max-width: 480px;
}

/* An inner grouping WITHIN a .tile/.box - a subsection that needs visual separation from the
   content above it, but is not its own card. Delineated by a heading + a hairline top rule, per
   UI pass 2's "no card-in-card" rule - never its own bordered/shadowed/padded box. */
.tile-subsection {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Progressive disclosure (UX principle #4): the panel a [data-disclosure-target] button reveals.
   Collapsed by default via the `hidden` attribute in markup; site.js toggles it open on click. */
.disclosure-panel {
  margin-top: var(--space-md);
  max-width: 420px;
}

/* ---- Forms ---- */

.form-container {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  max-width: 420px;
  margin-bottom: var(--card-gap);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.form-group .required::after {
  content: " *";
  color: var(--color-danger);
}

/* Phase 16: CSV import's column-mapping form - several short field+dropdown pairs side by side,
   distinct from the single-column .form-container used by every other create/edit form. */
.mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/* UX rework: a create/edit form with enough fields that a single narrow column means a long
   scroll (rule #2, "no long, narrow forms") - .form-container's 420px cap becomes this wider
   box, and .form-grid inside it lays fields out in responsive columns instead of stacking every
   .form-group full-width. */
.form-container--wide {
  max-width: 760px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-md);
}

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

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

/* A field whose value already came from the page the user arrived from (rule #1, "use arrival
   context") - shown as a confirmed value with a "Change" link rather than an empty control, so
   the underlying <select>/<input> (.locked-field__control) stays out of sight until asked for. */
.locked-field__display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 38px;
}

.locked-field__value {
  font-weight: var(--font-weight-bold);
}

.form-control {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-base);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:hover {
  border-color: var(--color-text-muted);
}

.form-control:focus-visible,
.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.form-control:disabled {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.form-control.is-invalid,
.input-validation-error {
  border-color: var(--color-danger);
}

.form-control.is-invalid:focus-visible,
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ---- Feedback ---- */

.hint {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.error,
.field-validation-error,
.validation-summary-errors {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-danger);
  margin-top: var(--space-xs);
}

.success {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-success-text);
  margin-top: var(--space-xs);
}

.warning {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-warning-text);
  background-color: var(--color-warning-bg);
  padding: var(--space-sm);
  border-radius: var(--radius);
  margin-top: var(--space-xs);
}

/* Inline text-colour variant of .btn-danger's colour, for flagging a count/value as needing
   attention (e.g. an overdue-activities figure) without the padding/background .warning has -
   used inline within a table cell, alongside .success/.hint's existing text-colour role. */
.danger {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

/* ---- Badges ---- */

/* Phase 16: a small inline label, distinct from .success/.warning/.danger (block-level feedback
   text) - used to mark a single record as something other than an ordinary real record. */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-circle);
  line-height: 1.4;
}

/* Reuses the warning colour pair (amber) - sample data is never wrong, but it is never real
   either, and a tenant should always be able to tell the two apart at a glance wherever a
   sample record appears (lists, detail pages, the diary, dashboards). */
.badge--sample {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* ---- Onboarding checklist (Phase 16 - Home page "Getting started" panel) ---- */

.checklist {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.checklist-item__status {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  color: var(--color-success-text);
}

.checklist-item--complete .checklist-item__status {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-text);
}

.checklist-item__body {
  display: flex;
  flex-direction: column;
}

/* ---- Tabs (UI pass 2) ---- */
/* Splits a record detail page into ONE thing at a time instead of every section stacked down a
   long scroll - see docs/design-system/design-principles.md ("One thing per page") and
   REPORT.md. A flat underline-style tab strip (no card wrapper of its own - see the
   card-in-card rule above), built once as Views/Shared/_Tabs.cshtml
   (+ CoreAlign.Web.Models.TabItem) - a calling view renders the tab strip via
   <partial name="_Tabs" model="tabItems" />, then writes its own .tabs__panel blocks (one per
   tab id), the first visible, the rest starting with the `hidden` attribute. wwwroot/js/site.js
   switches panels on tab click, and also intercepts any in-page `href="#id"` link (e.g. an
   action-bar item) that targets a .tabs__panel id, so a link that used to scroll to a page
   section now switches to that tab instead - no markup change needed on links that already
   pointed at a section id. */
.tabs__list {
  display: flex;
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  /* Setting overflow-x alone forces the UA to compute overflow-y as auto too (CSS Overflow
     spec) - which was rendering a vertical scrollbar (the product owner's "stray up/down
     control", item #5) even though this row never scrolls vertically. Pin it to hidden so only
     horizontal scrolling (many tabs on a narrow viewport) is ever possible. */
  overflow-y: hidden;
}

.tabs__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-sm) var(--space-xs);
  margin-bottom: -1px;
  font-family: var(--font-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tabs__tab:hover {
  color: var(--color-primary);
}

.tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

.tabs__tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tabs__panel[hidden] {
  display: none;
}

.toast-success {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-sm) var(--space-md);
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-toast);
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner-rotate 0.7s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Overlays: modal & lightbox ---- */

.modal-backdrop-custom {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
}

.modal-dialog-custom {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  max-width: 560px;
  margin: 10vh auto;
  padding: var(--space-lg);
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}

.modal-dialog-custom .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.modal-dialog-custom .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
}

.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}

/* ---- Data display ---- */

.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* ---- Record detail header (UI pass 3) ---- */
/* Replaces the persistent action bar (see the deleted "Persistent record action bar" block and
   REPORT.md): a record's own genuine forward actions sit inline, top-right of its own <h1>, one
   row, instead of a separate rail below it. Mirrors .results-bar's title-left/buttons-right
   layout for visual consistency between Index and Details pages. */
.record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.record-header .page-title {
  margin: 0;
}

.record-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .record-header {
    flex-direction: column;
    align-items: stretch;
  }
}

.results-bar .count {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Inline colour modifiers for a .count that needs to flag a good/caution/bad figure (e.g. a CSV
   import preview's create/duplicate/error counts) without adopting .success/.warning's own
   block-level padded-box layout, which would break the flex row .results-bar counts sit in. */
.count--success {
  color: var(--color-success-text);
}

.count--warning {
  color: var(--color-warning-text);
}

.count--danger {
  color: var(--color-danger);
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.table-standard {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* A table that is already inside a .tile/.box/.tabs__panel section doesn't need its own
   bordered box too - that section is the ONE container (see .tile-subsection above). Add this
   modifier when a table sits inside another section rather than being a page's primary content
   (see e.g. Jobs/Details, Customers/Details). */
.table-standard--plain {
  border: none;
  border-radius: 0;
}

.table-standard th,
.table-standard td {
  text-align: left;
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--color-border);
}

.table-standard th {
  background-color: var(--color-bg-subtle);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.table-standard tbody tr:hover {
  background-color: var(--color-bg-subtle);
}

.table-standard tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 480px) {
  .form-container {
    max-width: 100%;
    padding: var(--space-md);
  }

  .results-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Record detail label/value table (UI foundation pass) ---- */
/* The ONE canonical label/value component for record detail pages (customer, lead, job, quote),
   replacing ad-hoc <p>Label: value</p> markup - a considered synthesis of the three label/value
   table variants measured from the legacy system (grey label column + zebra striping; bordered
   cells with a hover wash; an icon before each label) rather than picking just one wholesale, and
   a deliberate small improvement on the legacy source: the legacy CSS let zebra striping and the
   label column's own grey background fight over which wins on even rows (both similarly
   specific, so which one actually rendered was accidental); here the label column's background
   always wins except on hover, and zebra striping is scoped to the value column only, so the
   look is exactly what the legacy design clearly intended rather than what its CSS accidentally
   produced. See docs/design-system/component-catalogue.md and REPORT.md. */

.record-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.record-table td {
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-body);
  vertical-align: top;
}

.record-table tbody tr:last-child td {
  border-bottom: none;
}

.record-table td:first-child {
  width: 35%;
  white-space: nowrap;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  background-color: var(--color-bg-subtle);
}

.record-table td:first-child i {
  margin-right: var(--space-sm);
  color: var(--color-primary);
}

/* Zebra striping applies to the VALUE column only - the label column keeps its own constant
   background regardless of row parity (see the comment above). */
.record-table tbody tr:nth-child(even) td:nth-child(2) {
  background-color: var(--color-bg-subtle);
}

/* Matches the zebra rule's specificity (class+pseudo count) exactly via the same :nth-child(2)
   compound, so hover reliably wins on even rows too (ties break on source order - this rule is
   declared after the zebra rule) rather than the zebra grey silently showing through a hover. */
.record-table tbody tr:hover td,
.record-table tbody tr:hover td:nth-child(2) {
  background-color: var(--color-row-hover);
}

@media (max-width: 480px) {
  .record-table td:first-child {
    width: 45%;
    white-space: normal;
  }
}

/* ---- Diary / calendar (Phase 9) ---- */
/* Both diary views are plain CSS Grid, server-rendered - no JavaScript, no charting library.
   Provisional: first real use of colour-as-data (appointment type colour) in the design
   system: bars use an inline background-color from tenant-configured data, not a design token,
   since the whole point is tenant-chosen colour-coding. */

.diary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.diary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.resource-week {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.resource-week__header,
.resource-week__row {
  display: grid;
  grid-template-columns: 180px repeat(7, 1fr);
  border-bottom: 1px solid var(--color-border);
}

.resource-week__row:last-child {
  border-bottom: none;
}

.resource-week__staff-col-header,
.resource-week__staff-col {
  padding: var(--space-sm);
  font-weight: var(--font-weight-bold);
  border-right: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}

.resource-week__day-header {
  padding: var(--space-sm);
  text-align: center;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
}

.resource-week__day-header--today {
  background-color: var(--color-bg-subtle);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.resource-week__grid {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 30px;
  gap: 2px;
  padding: var(--space-xs);
}

.resource-week__bar {
  border-radius: var(--radius);
  padding: 2px var(--space-xs);
  /* Typeface pass: the condensed cut earns its place here specifically - these bars cram long
     text ("I: McDonagh - Hamilton | 7W, 1 upvc door...") into narrow slots. Not used as a general
     body face elsewhere. */
  font-family: var(--font-condensed);
  font-size: var(--font-size-small);
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  display: block;
}

.resource-week__bar--unavailability {
  color: var(--color-text);
  font-style: italic;
  opacity: 0.85;
}

.resource-week__bar--conflict {
  outline: 2px solid var(--color-danger);
  outline-offset: -2px;
}

.resource-week__bar--cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}

.day-column {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.day-column__grid {
  display: grid;
  position: relative;
}

.day-column__time-label {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.day-column__staff-header {
  padding: var(--space-sm);
  text-align: center;
  font-weight: var(--font-weight-bold);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-subtle);
}

.day-column__cell {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.day-column__block {
  border-radius: var(--radius);
  padding: 2px var(--space-xs);
  font-size: var(--font-size-small);
  color: #FFFFFF;
  overflow: hidden;
  margin: 1px;
  text-decoration: none;
  display: block;
}

/* ---- Dashboard / reports (Phase 14) ---- */
/* Stat-card summary grid, the shared date-range filter, and the chart/table pairing used by
   every dashboard/report page - see docs/decisions/architecture-decisions.md ADR-0021/ADR-0022. */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.stat-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-padding);
}

.stat-card__label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs);
}

.stat-card__value {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
}

.stat-card__value--accent {
  color: var(--color-accent-dark);
}

.stat-card__sub {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
}

.date-range-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.date-range-filter__custom {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.date-range-filter__label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.dashboard-section {
  margin-bottom: var(--space-xl);
}

.dashboard-section__title {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
}

.chart-block {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-padding);
  margin-bottom: var(--card-gap);
}

.chart-block__title {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-md);
}

.chart-container {
  position: relative;
  height: 260px;
  width: 100%;
  margin-bottom: var(--space-md);
}

.chart-data-table {
  font-size: var(--font-size-small);
}

@media (max-width: 768px) {
  .stat-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .chart-container {
    height: 220px;
  }
}

@media (max-width: 480px) {
  .stat-cards {
    grid-template-columns: 1fr 1fr;
  }

  .date-range-filter {
    flex-direction: column;
    align-items: flex-start;
  }
}