/*
 * Redmine SLA plugin styles.
 *
 * Written to sit on top of any Redmine theme: only plugin-scoped class names
 * (.sla-*) are used, colours come from a small token set declared once, and
 * the dark variants are keyed off the attributes Redmine's own themes set.
 */

:root {
  --sla-healthy: #3c9e4c;
  --sla-healthy-bg: #eaf6ec;
  --sla-warning: #c07c00;
  --sla-warning-bg: #fdf3e0;
  --sla-critical: #d4610f;
  --sla-critical-bg: #fdeee2;
  --sla-breached: #c1272d;
  --sla-breached-bg: #fbeaea;
  --sla-paused: #6b7280;
  --sla-paused-bg: #f1f2f4;
  --sla-completed: #2f6fb3;
  --sla-completed-bg: #e9f1fa;
  --sla-border: #d8d8d8;
  --sla-surface: #fbfbfb;
  --sla-text-muted: #6b7280;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sla-healthy-bg: #14301a;
    --sla-warning-bg: #33270d;
    --sla-critical-bg: #3a2210;
    --sla-breached-bg: #3a1618;
    --sla-paused-bg: #26282c;
    --sla-completed-bg: #142438;
    --sla-border: #3a3d42;
    --sla-surface: #1e2024;
    --sla-text-muted: #9aa0a6;
  }
}

/* ------------------------------------------------------------------ */
/* Issue panel                                                         */
/* ------------------------------------------------------------------ */

.sla-panel {
  margin: 1em 0;
  padding: 0.6em 0.9em 0.4em;
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  background: var(--sla-surface);
}

.sla-panel-header {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
}

.sla-panel-header h3 {
  margin: 0;
  font-size: 1em;
}

.sla-panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  margin: 0.5em 0 0.7em;
  font-size: 0.9em;
}

.sla-meta-label {
  color: var(--sla-text-muted);
  margin-right: 0.35em;
}

.sla-meta-value {
  font-weight: 600;
}

table.sla-timers {
  width: 100%;
  border-collapse: collapse;
}

table.sla-timers th,
table.sla-timers td {
  padding: 0.35em 0.5em;
  border-top: 1px solid var(--sla-border);
  text-align: left;
  vertical-align: middle;
  font-weight: normal;
}

table.sla-timers tr:first-child th,
table.sla-timers tr:first-child td {
  border-top: 0;
}

.sla-timer-name {
  font-weight: 600;
  white-space: nowrap;
}

.sla-timer-progress {
  width: 30%;
  min-width: 110px;
}


.sla-timer-business,
.sla-timer-due {
  white-space: nowrap;
  font-size: 0.9em;
}

.sla-panel-actions {
  margin: 0.5em 0 0.2em;
  font-size: 0.9em;
}

.sla-panel-actions .sla-link {
  margin-right: 1em;
}

.sla-stale {
  color: var(--sla-warning);
  font-style: italic;
}

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

.sla-badge {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 10px;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.sla-badge-healthy   { color: var(--sla-healthy);   background: var(--sla-healthy-bg); }
.sla-badge-warning   { color: var(--sla-warning);   background: var(--sla-warning-bg); }
.sla-badge-critical  { color: var(--sla-critical);  background: var(--sla-critical-bg); }
.sla-badge-breached  { color: var(--sla-breached);  background: var(--sla-breached-bg); }
.sla-badge-paused    { color: var(--sla-paused);    background: var(--sla-paused-bg); }
.sla-badge-completed { color: var(--sla-completed); background: var(--sla-completed-bg); }
.sla-badge-none      { color: var(--sla-text-muted); background: var(--sla-paused-bg); }

/* ------------------------------------------------------------------ */
/* Donut gauge                                                         */
/* ------------------------------------------------------------------ */

.sla-donut {
  display: block;
  /* The arc starts at 12 o'clock and runs clockwise. */
  transform: rotate(0deg);
}

.sla-donut-track { stroke: var(--sla-paused-bg); }

.sla-donut-value {
  stroke: currentColor;
  transition: stroke-dasharray 0.3s ease;
}

.sla-donut-label {
  fill: currentColor;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
}

/* One colour per health drives both the arc and the centred figure. */
.sla-donut-healthy   { color: var(--sla-healthy); }
.sla-donut-warning   { color: var(--sla-warning); }
.sla-donut-critical  { color: var(--sla-critical); }
.sla-donut-breached  { color: var(--sla-breached); }
.sla-donut-paused    { color: var(--sla-paused); }
.sla-donut-completed { color: var(--sla-completed); }
.sla-donut-none      { color: var(--sla-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .sla-donut-value { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Dashboard cards and metrics                                         */
/* ------------------------------------------------------------------ */

.sla-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  margin: 1em 0;
}

.sla-card {
  flex: 1 1 140px;
  min-width: 130px;
  padding: 0.8em 1em;
  border: 1px solid var(--sla-border);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--sla-surface);
}

/* Cards double as links to the matching filtered list. */
a.sla-card {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.sla-card:hover,
a.sla-card:focus-visible {
  border-color: var(--sla-completed);
  transform: translateY(-1px);
  text-decoration: none;
}

.sla-card-value {
  display: block;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.1;
}

.sla-card-label {
  display: block;
  margin-top: 0.2em;
  font-size: 0.85em;
  color: var(--sla-text-muted);
}

.sla-card-healthy   { border-left-color: var(--sla-healthy); }
.sla-card-warning   { border-left-color: var(--sla-warning); }
.sla-card-breached  { border-left-color: var(--sla-breached); }
.sla-card-paused    { border-left-color: var(--sla-paused); }
.sla-card-completed { border-left-color: var(--sla-completed); }

.sla-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin: 1em 0;
  padding: 0.8em 1em;
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  background: var(--sla-surface);
}

/* ------------------------------------------------------------------ */
/* Dashboard: headline, period presets, health distribution            */
/* ------------------------------------------------------------------ */

.sla-hero {
  display: flex;
  align-items: center;
  gap: 1.5em;
  flex-wrap: wrap;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  background: var(--sla-surface);
}

a.sla-hero-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  color: inherit;
  text-decoration: none;
}

a.sla-hero-gauge:hover { text-decoration: none; }
a.sla-hero-gauge:hover .sla-donut-value { opacity: 0.85; }

.sla-hero-body { flex: 1 1 340px; min-inline-size: 0; }

.sla-hero-heading {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  flex-wrap: wrap;
}

.sla-hero-title { font-size: 1.1em; font-weight: 700; }

/* The window the figure covers, stated next to it rather than left implicit. */
.sla-hero-period {
  font-size: 0.85em;
  color: var(--sla-text-muted);
}

.sla-hero-summary {
  margin: 0.2em 0 0.7em;
  font-size: 0.95em;
}

table.sla-compliance-breakdown {
  border-collapse: collapse;
  inline-size: 100%;
  max-inline-size: 460px;
}

table.sla-compliance-breakdown th,
table.sla-compliance-breakdown td {
  padding: 0.15em 0.5em 0.15em 0;
  border: 0;
  font-weight: normal;
  text-align: start;
  white-space: nowrap;
}

table.sla-compliance-breakdown th {
  inline-size: 9em;
  color: var(--sla-text-muted);
}

table.sla-compliance-breakdown td.sla-num { text-align: end; inline-size: 4em; font-weight: 600; }

.sla-hero-fraction {
  color: var(--sla-text-muted);
  font-size: 0.88em;
}

/* Metrics double as links to the report that explains them. */
a.sla-metric {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

a.sla-metric:hover,
a.sla-metric:focus-visible {
  border-bottom-color: var(--sla-completed);
  text-decoration: none;
}

.sla-period-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin-block-end: 0.6em;
}

a.sla-preset {
  padding: 0.15em 0.7em;
  border: 1px solid var(--sla-border);
  border-radius: 12px;
  background: var(--sla-surface);
  font-size: 0.85em;
  text-decoration: none;
}

a.sla-preset:hover { border-color: var(--sla-completed); text-decoration: none; }

a.sla-preset-active {
  border-color: var(--sla-completed);
  background: var(--sla-completed-bg);
  font-weight: 600;
}

.sla-period-form label { margin-inline-end: 0.3em; }

/* Proportion at a glance; each band links to its filtered list. */
.sla-health-bar {
  display: flex;
  block-size: 22px;
  margin: 1em 0 0.5em;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--sla-border);
}

a.sla-health-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2px;
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.15s ease;
}

a.sla-health-segment:hover { filter: brightness(1.12); text-decoration: none; }

.sla-health-healthy   { background: var(--sla-healthy); }
.sla-health-warning   { background: var(--sla-warning); }
.sla-health-critical  { background: var(--sla-critical); }
.sla-health-breached  { background: var(--sla-breached); }
.sla-health-paused    { background: var(--sla-paused); }
.sla-health-completed { background: var(--sla-completed); }
.sla-health-none      { background: var(--sla-text-muted); }

ul.sla-health-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.2em;
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
  font-size: 0.9em;
}

ul.sla-health-legend a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: inherit;
  text-decoration: none;
}

ul.sla-health-legend a:hover .sla-legend-label { text-decoration: underline; }

.sla-legend-swatch {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 2px;
}

.sla-legend-value { font-weight: 600; }

/* Inline compliance meter in the per-policy table. */
.sla-meter {
  display: inline-block;
  inline-size: 90px;
  block-size: 8px;
  margin-inline-end: 0.5em;
  border-radius: 4px;
  background: var(--sla-paused-bg);
  overflow: hidden;
  vertical-align: middle;
}

.sla-meter-value {
  display: block;
  block-size: 100%;
  border-radius: 4px;
}

td.sla-compliance-cell { white-space: nowrap; }

.sla-metric-label {
  display: block;
  font-size: 0.85em;
  color: var(--sla-text-muted);
}

.sla-metric-value {
  display: block;
  font-size: 1.25em;
  font-weight: 600;
}

.sla-compliance-good    { color: var(--sla-healthy); }
.sla-compliance-warning { color: var(--sla-warning); }
.sla-compliance-bad     { color: var(--sla-breached); }
.sla-value-warning      { color: var(--sla-warning); }
.sla-value-breached     { color: var(--sla-breached); }

/* ------------------------------------------------------------------ */
/* Tables, filters, misc                                               */
/* ------------------------------------------------------------------ */

table.sla-table { width: 100%; }
table.sla-table td.sla-num,
table.sla-table th.sla-num { text-align: right; white-space: nowrap; }
table.sla-table tr.sla-inactive td { opacity: 0.6; }
table.sla-table td.sla-audit-details { font-size: 0.85em; color: var(--sla-text-muted); }

.sla-filter-form {
  margin: 0.8em 0;
  padding: 0.6em 0.9em;
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  background: var(--sla-surface);
}

.sla-filter-form label {
  margin-right: 1.2em;
  white-space: nowrap;
}

.sla-hint {
  color: var(--sla-text-muted);
  font-size: 0.9em;
}

/*
 * Explanatory line inside a form. Redmine's .tabular p reserves a fixed 180px
 * left column for the floated label, which would indent a note that has no
 * label; these opt out of that column and span the full width.
 */
.tabular p.sla-form-note,
fieldset.box p.sla-form-note {
  padding-inline-start: 0;
  margin-block: 0.2em 0.6em;
  min-block-size: 0;
  color: var(--sla-text-muted);
  font-size: 0.9em;
}

/* Checkbox columns in the rule and pause-rule tables. */
table.list td.sla-center,
table.list th.sla-center {
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Mail templates                                                      */
/* ------------------------------------------------------------------ */

.sla-language-chip {
  display: inline-block;
  margin-inline-end: 0.35em;
  margin-block-end: 0.25em;
  padding: 0.05em 0.55em;
  border-radius: 10px;
  background: var(--sla-completed-bg);
  font-size: 0.85em;
}

.sla-language-chip.sla-language-off { background: var(--sla-paused-bg); opacity: 0.7; }
.sla-language-chip a { text-decoration: none; }

textarea.sla-template-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  line-height: 1.5;
}

.sla-variable-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8em;
}

.sla-variable-group h4 { margin: 0 0 0.3em; font-size: 0.95em; }
.sla-variable-group ul { margin: 0; padding: 0; list-style: none; }
.sla-variable-group li { margin-block-end: 0.15em; }

code.sla-variable {
  display: inline-block;
  padding: 0.05em 0.4em;
  border: 1px solid var(--sla-border);
  border-radius: 3px;
  background: var(--sla-surface);
  font-size: 0.85em;
  cursor: pointer;
  user-select: all;
}

code.sla-variable:hover { border-color: var(--sla-completed); }

.sla-preview {
  margin-block-start: 0.8em;
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  overflow: hidden;
}

.sla-preview-subject {
  padding: 0.6em 0.9em;
  background: var(--sla-surface);
  border-block-end: 1px solid var(--sla-border);
}

.sla-preview-label {
  display: inline-block;
  min-inline-size: 5em;
  color: var(--sla-text-muted);
  font-size: 0.9em;
}

pre.sla-preview-body {
  margin: 0;
  padding: 0.9em;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.9em;
  line-height: 1.5;
  background: transparent;
}

/* --- policy conditions --- */

table.sla-rules-table td { vertical-align: top; }
table.sla-rules-table select { max-inline-size: 100%; }
table.sla-rules-table td.sla-rule-values { min-inline-size: 16em; }

/* Every value picker occupies the same cell; only the active one is shown. */
.sla-rule-value-control[hidden] { display: none; }
select.sla-rule-value-control { min-inline-size: 14em; }

.sla-rule-no-values {
  color: var(--sla-text-muted);
  font-style: italic;
  font-size: 0.9em;
}

/*
 * Progressive enhancement: "Add condition" and the per-row remove link do
 * nothing without scripting, so they stay hidden until sla.js marks the form.
 * A blank row left untouched is dropped on save regardless.
 */
.sla-js-only,
.sla-rule-remove { display: none; }

.sla-js .sla-js-only { display: inline-block; }
.sla-js .sla-rule-remove { display: inline; }

.sla-rule-actions { margin-block-start: 0.6em; }

/*
 * The subproject cell is only meaningful for a project condition, but a table
 * cell cannot simply vanish without shifting every column after it: keep it in
 * the layout and hide only its contents.
 */
.sla-rule-row td.sla-rule-subprojects[hidden] {
  display: table-cell;
  visibility: hidden;
}

/* ------------------------------------------------------------------ */
/* Calendar working hours: one row per weekday, a column per period    */
/* ------------------------------------------------------------------ */

table.sla-hours-table th.sla-day-name {
  inline-size: 10em;
  text-align: start;
  font-weight: 600;
  white-space: nowrap;
}

table.sla-hours-table td.sla-hours-cell {
  inline-size: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

table.sla-hours-table .sla-range-dash {
  margin-inline: 0.35em;
  color: var(--sla-text-muted);
}

table.sla-hours-table input[type="text"] {
  inline-size: 5.5em;
  text-align: center;
}

/*
 * The period inputs are labelled by their column header, so the per-input
 * labels exist for screen readers only. Not display:none, which would remove
 * them from the accessibility tree as well.
 */
.sla-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sla-danger { color: var(--sla-breached); }

ul.sla-tabs {
  display: flex;
  gap: 0.4em;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--sla-border);
}

ul.sla-tabs li a {
  display: block;
  padding: 0.4em 0.9em;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

ul.sla-tabs li a.selected {
  border-color: var(--sla-border);
  background: var(--sla-surface);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Administration landing page                                         */
/* ------------------------------------------------------------------ */

.sla-section { margin-block: 1.8em; }

.sla-section > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  margin-block-end: 0.6em;
  padding-block-end: 0.3em;
  border-block-end: 1px solid var(--sla-border);
}

.sla-section-link {
  font-size: 0.8rem;
  font-weight: normal;
}

/* Attention banner shown while setup is incomplete. */
.sla-banner {
  margin-block: 1em;
  padding: 0.8em 1em;
  border: 1px solid var(--sla-warning);
  border-inline-start-width: 4px;
  border-radius: 4px;
  background: var(--sla-warning-bg);
}

.sla-banner-title { display: block; font-weight: 700; color: var(--sla-warning); }
.sla-banner-body { display: block; margin-block-start: 0.2em; }

/* Missing configuration is more serious than an unscheduled cron. */
.sla-banner-todo {
  border-color: var(--sla-breached);
  background: var(--sla-breached-bg);
}
.sla-banner-todo .sla-banner-title { color: var(--sla-breached); }

/* --- setup checklist --- */

ul.sla-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  overflow: hidden;
}

.sla-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 1em;
  background: var(--sla-surface);
  border-block-start: 1px solid var(--sla-border);
}

.sla-checklist-item:first-child { border-block-start: 0; }

/* Status is conveyed by the mark's shape and the text, not colour alone. */
.sla-checklist-mark {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.sla-checklist-ok .sla-checklist-mark {
  background: var(--sla-healthy-bg);
  color: var(--sla-healthy);
}
.sla-checklist-ok .sla-checklist-mark::before { content: '\2713'; }

.sla-checklist-warning .sla-checklist-mark {
  background: var(--sla-warning-bg);
  color: var(--sla-warning);
}
.sla-checklist-warning .sla-checklist-mark::before { content: '!'; }

.sla-checklist-todo .sla-checklist-mark {
  background: var(--sla-breached-bg);
  color: var(--sla-breached);
}
.sla-checklist-todo .sla-checklist-mark::before { content: '\2013'; }

.sla-checklist-body { flex: 1 1 auto; min-inline-size: 0; }
.sla-checklist-label { display: block; font-weight: 600; }
.sla-checklist-value,
.sla-checklist-hint {
  display: block;
  font-size: 0.9em;
  color: var(--sla-text-muted);
}
.sla-checklist-hint { font-style: italic; }
.sla-checklist-action { flex: 0 0 auto; }
.sla-checklist-action form { display: inline; margin: 0; }

.sla-state { font-weight: 600; }
.sla-state-ok { color: var(--sla-healthy); }
.sla-state-warning { color: var(--sla-warning); }
.sla-state-todo { color: var(--sla-breached); }
.sla-state-detail {
  display: block;
  font-size: 0.9em;
  color: var(--sla-text-muted);
}

/* --- configuration navigation --- */

.sla-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.7em;
}

a.sla-nav-card {
  display: block;
  padding: 0.75em 0.9em;
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  background: var(--sla-surface);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.sla-nav-card:hover,
a.sla-nav-card:focus-visible {
  border-color: var(--sla-completed);
  transform: translateY(-1px);
  text-decoration: none;
}

.sla-nav-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
}

.sla-nav-count {
  padding: 0 0.5em;
  border-radius: 10px;
  background: var(--sla-paused-bg);
  color: var(--sla-text-muted);
  font-size: 0.8em;
  font-weight: 600;
}

.sla-nav-description {
  display: block;
  margin-block-start: 0.2em;
  color: var(--sla-text-muted);
  font-size: 0.88em;
  line-height: 1.4;
}

/* --- maintenance tasks --- */

.sla-maintenance {
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  overflow: hidden;
}

.sla-task {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  padding: 0.8em 1em;
  background: var(--sla-surface);
  border-block-start: 1px solid var(--sla-border);
}

.sla-maintenance .sla-task:first-child { border-block-start: 0; }
.sla-task-body { flex: 1 1 260px; min-inline-size: 0; }
.sla-task-title { display: block; font-weight: 600; }
.sla-task-description {
  display: block;
  color: var(--sla-text-muted);
  font-size: 0.9em;
  line-height: 1.4;
}
.sla-task form { margin: 0; }
.sla-task-form {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
}
.sla-task-check { font-size: 0.9em; white-space: nowrap; }
.sla-task-select { max-inline-size: 12em; }

.sla-danger-zone {
  margin-block-start: 1em;
  border: 1px solid var(--sla-breached);
  border-radius: 4px;
  overflow: hidden;
}
.sla-danger-zone .sla-task { border-block-start: 0; background: var(--sla-breached-bg); }
.sla-danger-zone .sla-task-title { color: var(--sla-breached); }

a.sla-button-danger,
.sla-button-danger {
  border-color: var(--sla-breached);
  color: var(--sla-breached);
}

table.sla-meta-table th { inline-size: 40%; text-align: start; }
td.sla-audit-when { white-space: nowrap; color: var(--sla-text-muted); font-size: 0.9em; }

@media screen and (max-width: 720px) {
  .sla-checklist-item { flex-wrap: wrap; }
  .sla-checklist-action { inline-size: 100%; padding-inline-start: 2.6em; }
  .sla-nav-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Reports                                                             */
/* ------------------------------------------------------------------ */

.sla-report-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9em;
}

.sla-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.sla-filter-field label {
  font-size: 0.85em;
  color: var(--sla-text-muted);
}

.sla-filter-field select { min-inline-size: 12em; }

/* Searchable multi-select, built by sla.js around the native control. */
.sla-select-box {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-block-end: 0.2em;
}

input.sla-select-search {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  padding: 0.1em 0.4em;
  font-size: 0.85em;
}

.sla-select-status {
  white-space: nowrap;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--sla-completed);
}

a.sla-select-clear {
  white-space: nowrap;
  font-size: 0.8em;
}

select.sla-searchable option:checked {
  background: var(--sla-completed-bg);
  font-weight: 600;
}
.sla-filter-actions { display: flex; align-items: center; gap: 0.8em; }

.sla-report-scope {
  margin: 0.8em 0;
  color: var(--sla-text-muted);
  font-size: 0.9em;
}

.sla-report-count { margin: 0.8em 0 0.4em; font-weight: 600; }

/* Headline figures for the duration reports. */
.sla-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7em;
  margin: 1em 0;
}

.sla-stat {
  padding: 0.8em 1em;
  border: 1px solid var(--sla-border);
  border-radius: 4px;
  background: var(--sla-surface);
}

.sla-stat-value {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
}

.sla-stat-label {
  display: block;
  margin-block-start: 0.15em;
  font-size: 0.85em;
  color: var(--sla-text-muted);
}

.sla-stat-note {
  display: block;
  margin-block-start: 0.3em;
  font-size: 0.8em;
  color: var(--sla-text-muted);
}

table.sla-histogram {
  inline-size: 100%;
  max-inline-size: 720px;
  border-collapse: collapse;
}

table.sla-histogram th,
table.sla-histogram td {
  padding: 0.2em 0.6em 0.2em 0;
  border: 0;
  vertical-align: middle;
}

.sla-histogram-label {
  inline-size: 7em;
  text-align: end;
  font-weight: normal;
  color: var(--sla-text-muted);
  white-space: nowrap;
}

.sla-histogram-bar { inline-size: 100%; }
.sla-histogram-share { inline-size: 4em; color: var(--sla-text-muted); font-size: 0.9em; }

.sla-bar {
  display: block;
  block-size: 14px;
  min-inline-size: 2px;
  border-radius: 3px;
  background: var(--sla-completed);
}

/* ------------------------------------------------------------------ */
/* Timeline                                                            */
/* ------------------------------------------------------------------ */

ol.sla-timeline {
  margin: 1em 0;
  padding-left: 1.2em;
  list-style: none;
  border-left: 2px solid var(--sla-border);
}

.sla-timeline-item {
  position: relative;
  padding: 0.4em 0 0.4em 0.8em;
}

.sla-timeline-item::before {
  content: '';
  position: absolute;
  left: -1.45em;
  top: 0.9em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sla-completed);
}

.sla-timeline-timer_breached::before { background: var(--sla-breached); }
.sla-timeline-warning_reached::before { background: var(--sla-warning); }
.sla-timeline-critical_reached::before { background: var(--sla-critical); }
.sla-timeline-timer_paused::before { background: var(--sla-paused); }
.sla-timeline-timer_completed::before { background: var(--sla-healthy); }

.sla-timeline-time {
  display: inline-block;
  min-width: 12em;
  color: var(--sla-text-muted);
  font-size: 0.9em;
}

.sla-timeline-label { font-weight: 600; }
.sla-timeline-actor { margin-left: 0.6em; font-size: 0.9em; }
.sla-timeline-meta {
  display: block;
  margin-left: 12em;
  color: var(--sla-text-muted);
  font-size: 0.85em;
}

/* ------------------------------------------------------------------ */
/* Project overview box                                                */
/* ------------------------------------------------------------------ */

ul.sla-stat-list { list-style: none; padding-left: 0; margin: 0; }
ul.sla-stat-list li { display: flex; justify-content: space-between; padding: 0.15em 0; }
.sla-stat-label { color: var(--sla-text-muted); }
.sla-stat-value { font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 720px) {
  .sla-panel-meta { gap: 0.6em; }
  table.sla-timers { display: block; overflow-x: auto; }
  .sla-cards { gap: 0.5em; }
  .sla-card { flex-basis: 45%; }
  .sla-metrics { gap: 1em; }
  .sla-timeline-meta { margin-left: 0; }
  .sla-timeline-time { min-width: auto; display: block; }
}