/* The hidden attribute must win over component display rules (.fab, .icon-button). */
[hidden] { display: none !important; }

:root {
  color-scheme: light dark;
  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #e6e9ed;
  --surface-3: #f6f7f9;
  --text: #15181d;
  --muted: #58616d;
  --border: #cbd1d8;
  --border-strong: #9aa4b0;
  --accent: #d9541a;
  --accent-strong: #b9420e;
  --accent-soft: #fff0e8;
  --on-accent: #ffffff;
  --focus: #0b63c5;
  --danger: #b42318;
  --shadow: 0 8px 24px rgb(16 24 40 / 12%);
  --tabbar-height: 4.25rem;
  --radius: 12px;
  --tap: 48px;

  --open-bg: #e2eefc;
  --open-fg: #104b93;
  --progress-bg: #fff0c7;
  --progress-fg: #744500;
  --waiting-bg: #efe5ff;
  --waiting-fg: #562b8d;
  --done-bg: #ddf3e4;
  --done-fg: #15622e;
  --danger-bg: #ffe4e0;
  --danger-fg: #941d15;
  --neutral-bg: #e5e8eb;
  --neutral-fg: #46505b;

  /* Statistics charts (SPEC-v3.md section 7): series colours from tokens so
     light and dark themes both stay readable. */
  --chart-c1: #d9541a;
  --chart-c2: #0b63c5;
  --chart-c3: #15622e;
  --chart-c4: #744500;
  --chart-c5: #562b8d;
  --chart-c6: #104b93;
  --chart-text: #58616d;
  --chart-grid: #cbd1d8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101317;
    --surface: #1a1e23;
    --surface-2: #252b32;
    --surface-3: #20252b;
    --text: #f0f3f6;
    --muted: #aeb7c1;
    --border: #3a434d;
    --border-strong: #5e6975;
    --accent: #f07a3e;
    --accent-strong: #ff8f57;
    --accent-soft: #38241b;
    --on-accent: #1c1009;
    --focus: #76bdff;
    --danger: #ff8d82;
    --shadow: 0 8px 24px rgb(0 0 0 / 45%);

    --open-bg: #173a63;
    --open-fg: #cce3ff;
    --progress-bg: #4a3508;
    --progress-fg: #ffe08b;
    --waiting-bg: #3c2a58;
    --waiting-fg: #e4d2ff;
    --done-bg: #16412a;
    --done-fg: #b8f0c9;
    --danger-bg: #4d1d19;
    --danger-fg: #ffc0b9;
    --neutral-bg: #303740;
    --neutral-fg: #d4dbe3;

    --chart-c1: #f07a3e;
    --chart-c2: #76bdff;
    --chart-c3: #b8f0c9;
    --chart-c4: #ffe08b;
    --chart-c5: #e4d2ff;
    --chart-c6: #cce3ff;
    --chart-text: #aeb7c1;
    --chart-grid: #3a434d;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 1.5rem);
}

a {
  color: var(--focus);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button,
.tab,
.icon-button,
.fab,
.btn {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.skip-link:focus {
  top: 0.5rem;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 720px;
  margin: 0 auto;
  padding: calc(0.55rem + env(safe-area-inset-top)) 0.75rem 0.55rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex: none;
}

h1 {
  font-size: 1.12rem;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 1.45rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  flex: none;
}

.icon-button:hover {
  background: var(--surface-2);
}

.back-button {
  margin-left: -0.35rem;
}

main {
  display: block;
  outline: none;
}

.page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 0.75rem 1.25rem;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.page-head h2,
.section-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.section-title {
  font-size: 1.05rem;
  margin: 1.35rem 0 0.55rem;
}

.section-title:first-child {
  margin-top: 0;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.85rem;
}

.tabular,
.qty,
.meta-value,
time {
  font-variant-numeric: tabular-nums;
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 14px rgb(16 24 40 / 8%);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tabbar-height);
  min-width: 44px;
  flex: 1;
  padding: 0.3rem 0.15rem;
  color: var(--muted);
  text-decoration: none;
  /* V3-M3 review fix: "Prev. Maint." must stay on one line at 390 px. */
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-top: 3px solid transparent;
}

.tab[aria-current="page"] {
  color: var(--accent-strong);
  border-top-color: var(--accent);
  background: var(--accent-soft);
}

.fab {
  position: fixed;
  z-index: 25;
  right: max(1rem, calc((100vw - 720px) / 2 + 1rem));
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 1rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 750;
  box-shadow: var(--shadow);
}

.fab:hover {
  background: var(--accent-strong);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--tap);
  padding: 0.6rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--surface-2);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--accent-strong);
}

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

.btn-danger:hover {
  background: var(--danger-bg);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}

.btn-small {
  min-height: 40px;
  padding: 0.35rem 0.7rem;
  font-size: 0.88rem;
}

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

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.stack {
  display: grid;
  gap: 0.65rem;
}

/* Chips */
.chips {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.35rem;
  scrollbar-width: thin;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.chip[aria-pressed="true"] .chip-count,
.chip.is-active .chip-count {
  background: rgb(255 255 255 / 28%);
  color: inherit;
}

/* Job detail status buttons (SPEC-v2.md 15.4 item 4): a wrapping grid, not a
   horizontal scroll strip. Filter chip rows above keep their scroll behaviour. */
.status-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.status-buttons .chip {
  width: 100%;
  justify-content: center;
}

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

/* Cards and lists */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
}

.list {
  display: grid;
  gap: 0.55rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

a.row:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.row-main {
  min-width: 0;
  flex: 1;
}

.row-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.row-sub {
  color: var(--muted);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex: none;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

.row-chevron {
  color: var(--muted);
  font-size: 1.3rem;
  flex: none;
}

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--neutral-bg);
  color: var(--neutral-fg);
}

.status-open {
  background: var(--open-bg);
  color: var(--open-fg);
}

.status-in-progress {
  background: var(--progress-bg);
  color: var(--progress-fg);
}

.status-waiting-parts,
.status-waiting-tech {
  background: var(--waiting-bg);
  color: var(--waiting-fg);
}

.status-done,
.status-running,
.status-ok {
  background: var(--done-bg);
  color: var(--done-fg);
}

.status-overdue,
.status-down,
.status-urgent,
.status-retired,
.status-low {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.status-due-soon {
  background: var(--progress-bg);
  color: var(--progress-fg);
}

/* In storage: neutral slate, distinct from Retired (SPEC-v2.md 15.3). */
.status-in-storage {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
  box-shadow: inset 0 0 0 1px var(--neutral-fg);
}

.status-neutral {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
}

.pill-priority {
  border: 1px solid currentColor;
  background: transparent;
}

/* Machine type badge (SPEC-v2.md 15.4 item 5): a small muted pill used on
   machine cards and table rows. */
.type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.3rem;
  padding: 0.02rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}

.row-sub .type-badge {
  margin-right: 0.2rem;
}

/* Search */
.search-wrap {
  position: relative;
  margin-bottom: 0.65rem;
}

.search-wrap input {
  width: 100%;
  padding-left: 2.4rem;
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.05rem;
  pointer-events: none;
}

/* Forms */
form.form {
  display: grid;
  gap: 0.9rem;
}

.field {
  display: grid;
  gap: 0.32rem;
}

.field > label,
.field-label {
  font-weight: 700;
  font-size: 0.92rem;
}

.field-hint {
  color: var(--muted);
  font-size: 0.82rem;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  font-size: 1rem;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input[type="checkbox"] {
  width: 24px;
  min-height: 24px;
  height: 24px;
  accent-color: var(--accent);
  flex: none;
}

input[type="date"] {
  min-height: var(--tap);
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: var(--tap);
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-3);
}

.check-row label {
  font-weight: 600;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

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

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.form-error {
  color: var(--danger);
  background: var(--danger-bg);
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.form-error:empty {
  display: none;
}

details.more {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  background: var(--surface-3);
}

details.more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
}

details.more[open] > summary {
  margin-bottom: 0.65rem;
}

/* Detail */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(7rem, 0.4fr) 1fr;
  gap: 0.35rem 0.85rem;
  margin: 0;
}

.detail-grid dt {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 650;
}

.detail-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.detail-head h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Parts used editor */
.parts-editor {
  display: grid;
  gap: 0.55rem;
}

.part-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.2rem 44px;
  gap: 0.45rem;
  align-items: center;
}

.part-edit-row select,
.part-edit-row input {
  min-height: 44px;
}

.stock-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stock-controls .qty-big {
  font-size: 1.65rem;
  font-weight: 800;
  min-width: 3.5rem;
  text-align: center;
}

/* Home */
.counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}

@media (min-width: 560px) {
  .counters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.counter {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: 76px;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.counter:hover {
  border-color: var(--accent);
}

.counter-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.counter-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.counter.is-alert {
  border-left: 5px solid var(--danger);
}

.counter.is-warn {
  border-left: 5px solid var(--accent);
}

.attention-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 58px;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.attention-item.type-pm {
  border-left-color: var(--danger);
}

.attention-item.type-job {
  border-left-color: var(--accent);
}

.attention-item.type-part {
  border-left-color: var(--danger);
}

.attention-item .row-main {
  flex: 1;
}

.empty-state {
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.empty-state p {
  margin: 0.4rem 0 0.9rem;
  color: var(--muted);
}

.backup-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.9rem;
}

.backup-note a {
  font-weight: 700;
}

/* PM groups */
.pm-group {
  margin-bottom: 1.2rem;
}

.pm-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pm-group-head h3 {
  margin: 0;
  font-size: 1rem;
}

/* Paused PM group: collapsed <details> by default (SPEC-v2.md 15.3). */
details.pm-group-paused > summary {
  cursor: pointer;
}

details.pm-group-paused > summary .pm-group-head {
  margin-bottom: 0;
}

details.pm-group-paused[open] > summary {
  margin-bottom: 0.5rem;
}

.pm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.pm-row .row-main {
  flex: 1 1 12rem;
}

/* Dialog */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  /* Above the M2 drawer (SPEC-v3.md section 10) so the in-drawer discard
     check is not covered by the drawer or its backdrop. */
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(0 0 0 / 55%);
}

.dialog {
  width: min(100%, 30rem);
  max-height: 88vh;
  overflow: auto;
  padding: 1.1rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.dialog h2 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
}

.dialog p {
  margin: 0 0 0.9rem;
  color: var(--muted);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

/* Toast */
.toast-root {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 1rem);
  z-index: 70;
  width: min(92vw, 34rem);
  transform: translateX(-50%);
  display: grid;
  gap: 0.45rem;
  pointer-events: none;
}

.toast {
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: #1d232a;
  color: #fff;
  box-shadow: var(--shadow);
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: auto;
}

.toast.warn {
  background: #8a2e1a;
}

.toast.error {
  background: #8f1710;
}

/* Misc */
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.inline-link {
  color: var(--focus);
  font-weight: 650;
}

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

.settings-actions {
  display: grid;
  gap: 0.65rem;
}

.settings-actions .btn {
  justify-content: flex-start;
}

.settings-actions small {
  display: block;
  color: var(--muted);
  font-weight: 400;
}

.export-counts {
  margin: 0.35rem 0 0.8rem;
  padding-left: 1.1rem;
}

.export-counts li {
  margin: 0.15rem 0;
}

.erases input {
  margin-top: 0.5rem;
}

/* ---------- Help page ---------- */

.help-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
  margin: 0.9rem 0 0.4rem;
}

.help-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-toc li + li {
  margin-top: 0.3rem;
}

.help-section {
  scroll-margin-top: 4.5rem;
  margin-top: 1.7rem;
}

.help-section > h2 {
  margin: 0 0 0.45rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.help-section > p {
  margin: 0.4rem 0;
}

.help-section > p:first-of-type {
  margin-top: 0;
}

.help-list,
.help-steps {
  margin: 0.5rem 0 0;
  padding-left: 1.3rem;
}

.help-list li,
.help-steps li {
  margin: 0.4rem 0;
}

.help-glossary {
  margin: 0.4rem 0 0;
}

.help-glossary dt {
  font-weight: 700;
  margin-top: 0.75rem;
}

.help-glossary dd {
  margin: 0.15rem 0 0;
}

.help-question {
  margin: 1.1rem 0 0.2rem;
  font-size: 1rem;
}

.help-question:first-of-type {
  margin-top: 0.5rem;
}

.help-shortcuts {
  border-collapse: collapse;
  margin: 0.55rem 0 0;
}

.help-shortcuts th {
  text-align: left;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.help-shortcuts th,
.help-shortcuts td {
  padding: 0.35rem 0.9rem 0.35rem 0;
  border-bottom: 1px solid var(--border);
}

.help-shortcuts kbd {
  display: inline-block;
  min-width: 1.7rem;
  padding: 0.08rem 0.38rem;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.85rem;
  font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   M8a: Tablet and desktop breakpoints (mobile-first).
   Everything above is the phone layout (< 768px) and stays unchanged.
   ========================================================================== */

/* Base (< 768px): sidebar is desktop-only, keep the phone layout as-is. */
.sidebar {
  display: none;
}

.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 0.02rem 0.42rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Tablet: 768–1023px — wider content, Home counters in 3 columns. */
@media (min-width: 768px) {
  .app-header,
  .page {
    max-width: 960px;
  }

  .counters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop: 1024px and up — fixed left sidebar replaces tab bar + FAB. */
@media (min-width: 1024px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 232px;
    padding: 1rem 0.85rem;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: 2px 0 14px rgb(16 24 40 / 6%);
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.35rem 0.75rem;
  }

  .sidebar-app-name {
    font-size: 0.95rem;
    font-weight: 750;
  }

  .sidebar-new {
    width: 100%;
    margin-bottom: 0.6rem;
  }

  .sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 650;
  }

  .sidebar-link:hover {
    background: var(--surface-2);
  }

  .sidebar-link[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent-strong);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .sidebar-link[aria-current="page"] .nav-count {
    background: var(--surface);
  }

  /* Visible keyboard focus on sidebar links and list rows. */
  .sidebar-link:focus-visible,
  a.row:focus-visible,
  .attention-item:focus-visible,
  .pm-row .row-title:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  /* The bottom tab bar and the floating button are replaced by the sidebar. */
  .tabbar,
  .fab {
    display: none !important;
  }

  /* Make room for the fixed sidebar; the tab bar is gone so drop its padding. */
  body {
    margin-left: 232px;
    padding-bottom: 1.5rem;
  }

  /* Desktop header (SPEC-v2.md 15.4 item 3): the sidebar already shows the
     brand, so the header logo is dropped. */
  .header-title .brand-mark {
    display: none;
  }

  .app-header,
  .page {
    max-width: 1200px;
  }

  .counters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Home: "Needs attention" and "PM due this week" side by side. */
  .home-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }
}

/* ==========================================================================
   M8b: Desktop sortable tables and list + detail split view (SPEC 13.1 item 2 & 3).
   Below 1024px nothing changes: the card lists stay the only list UI.
   ========================================================================== */

/* Base (< 1024px): the table wrapper is hidden; card lists render as before. */
.table-wrap {
  display: none;
  overflow-x: auto;
}

@media (min-width: 1024px) {
  /* On Jobs, Machines and Parts the table replaces the card list; the empty
     state drops .cards-only so it shows at every width. */
  .table-wrap {
    display: block;
    margin-bottom: 1rem;
  }

  .list.cards-only {
    display: none;
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
  }

  .data-table thead th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-strong);
  }

  .data-table tbody tr:last-child td,
  .data-table tbody tr:last-child th {
    border-bottom: 0;
  }

  .data-table td {
    overflow-wrap: break-word;
  }

  /* Split view: the list pane is ~55% wide, so keep only the columns needed to pick a row. */
  .split-list .data-table [data-col="kind"],
  .split-list .data-table [data-col="priority"],
  .split-list .data-table [data-col="reported"],
  .split-list .data-table [data-col="downtime"],
  .split-list .data-table [data-col="location"],
  .split-list .data-table [data-col="nextPM"],
  .split-list .data-table [data-col="partNumber"],
  .split-list .data-table [data-col="min"],
  .split-list .data-table [data-col="supplier"],
  .split-list .data-table [data-col="editedBy"] {
    display: none;
  }

  .th-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.15rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    cursor: pointer;
  }

  .th-sort:hover {
    color: var(--accent-strong);
  }

  .th-sort:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .sort-arrow {
    font-size: 0.75rem;
  }

  .data-row {
    cursor: pointer;
  }

  .data-row:hover {
    background: var(--surface-2);
  }

  .data-row:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
  }

  .data-row td .pill {
    margin-left: 0.45rem;
  }

  /* List + detail split view: list left, detail right (~45%). */
  .split {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 0.75rem 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: 1.25rem;
    align-items: start;
  }

  .split-list,
  .split-detail {
    min-width: 0;
  }

  .split .page {
    max-width: none;
    padding: 0;
  }

  .split-detail {
    position: sticky;
    top: 0.75rem;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    padding-left: 1.25rem;
    border-left: 1px solid var(--border);
  }

  /* Retract control for the detail pane: top-left of the pane, sized for a
     comfortable click/tap (44px) rather than a tiny icon. */
  .split-detail-bar {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 0.85rem;
  }

  .split-close {
    min-height: 2.75rem;
    padding: 0 1.05rem;
    gap: 0.55rem;
    font-size: 0.95rem;
  }

  .split-close-icon {
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: -0.08em;
  }

  .split-close-hint {
    padding: 0.1rem 0.38rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* ---------- Team sync (SPEC-v2.md section 9.4) ---------- */

.header-sync {
  display: flex;
  align-items: center;
  flex: none;
}

.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.7rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.sync-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
}

.sync-pill-compact {
  display: none;
}

.sync-pill.is-ok {
  border-color: transparent;
  background: var(--done-bg);
  color: var(--done-fg);
}

.sync-pill.is-saving {
  border-color: transparent;
  background: var(--progress-bg);
  color: var(--progress-fg);
}

.sync-pill.is-offline {
  border-color: transparent;
  background: var(--waiting-bg);
  color: var(--waiting-fg);
}

.sync-pill.is-failed {
  border-color: transparent;
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.sync-pill.is-login {
  border-color: transparent;
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.user-button {
  width: auto;
  max-width: 12rem;
  min-width: 2.6rem;
  padding: 0 0.7rem;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-button-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-button-avatar {
  display: none;
}

/*
 * Account menu (SPEC-v2.md 15.4 item 1): anchored to the user button by JS
 * (top/right inline styles); width 280px capped at the viewport minus gutters.
 */
.user-menu {
  position: fixed;
  z-index: 60;
  width: min(280px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.user-menu-name {
  font-weight: 800;
}

.user-menu-role {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
}

.user-menu-divider {
  height: 1px;
  margin: 0.35rem 0;
  background: var(--border);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--surface-2);
}

.user-menu-item.is-danger {
  color: var(--danger);
}

.user-menu-item-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
}

.user-menu-item.is-danger .user-menu-item-icon {
  color: var(--danger);
}

/* Phone header (< 768px, SPEC-v2.md 15.4 item 2): initials avatar instead of
   the full name, compact sync pill, and room for the page title (the logo
   moves aside; the sidebar/tablet still carries the brand). */
@media (max-width: 767.98px) {
  .header-title .brand-mark {
    display: none;
  }

  .user-button {
    min-width: 0;
    padding: 0 0.25rem;
  }

  .user-button-name {
    display: none;
  }

  .user-button-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .sync-pill {
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
  }

  .sync-pill-full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sync-pill-compact {
    display: inline;
  }
}

/* Login screen (SPEC-v2.md section 9.1): no app chrome before sign-in. */

body.logged-out .sidebar,
body.logged-out .tabbar,
body.logged-out .fab,
body.logged-out #help-link,
body.logged-out #settings-link,
body.logged-out #back-button {
  display: none !important;
}

.login-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: min(24rem, 100%);
  margin: 18vh auto 0;
  padding: 1.4rem 1.4rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-card h2 {
  font-size: 1.25rem;
  margin: 0;
}

.login-sub {
  color: var(--muted);
  margin: 0 0 0.9rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.login-form .field-label {
  margin-top: 0.55rem;
}

.login-error {
  min-height: 1.2em;
  margin: 0.35rem 0 0;
  color: var(--danger);
  font-size: 0.92rem;
}

/* ---------- Team UI: edited-by tags and history (SPEC-v2.md 9.2, 9.3) ---------- */

.edited-tag {
  display: inline-block;
  color: var(--muted);
  font-size: 0.78rem;
}

.edited-tag.is-pending {
  color: var(--waiting-fg);
  font-weight: 650;
}

.row-sub .edited-tag {
  margin-left: 0.35rem;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.conflict-banner {
  margin-top: 0.75rem;
  border-left: 4px solid var(--waiting-bg);
  background: var(--waiting-bg);
  color: var(--waiting-fg);
  font-size: 0.92rem;
}

.history-section {
  margin-top: 1.25rem;
}

.history-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.history-entry {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-3);
  font-size: 0.88rem;
}

.history-entry.is-conflict {
  border-color: var(--waiting-bg);
  background: var(--waiting-bg);
  color: var(--waiting-fg);
}

.history-line {
  font-weight: 650;
}

.history-note {
  margin-top: 0.15rem;
  font-size: 0.8rem;
}

/* ---------- Team Settings: server backups, users, import (SPEC-v2.md 9.5-9.7) ---------- */

.card-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.settings-note {
  margin: 0.5rem 0 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.86rem;
}

.settings-note a {
  color: inherit;
}

.server-list {
  display: flex;
  flex-direction: column;
  margin-top: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.server-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: baseline;
  padding: 0.55rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.server-row:last-child {
  border-bottom: 0;
}

.server-row .grow {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: break-word;
}

.server-row .muted {
  color: var(--muted);
}

.server-row .btn {
  padding: 0.3rem 0.65rem;
}

.failed-list {
  margin-top: 0.4rem;
}

.failed-entry {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--danger-bg);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger-fg);
  font-size: 0.86rem;
  overflow-wrap: break-word;
}

.user-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.user-row:last-child {
  border-bottom: 0;
}

.user-row .user-names {
  flex: 1 1 12rem;
  min-width: 0;
}

.user-row .user-names .muted {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: break-word;
}

.user-row .user-role {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.user-row.is-disabled .user-names {
  color: var(--muted);
  text-decoration: line-through;
}

/* Phone: when everything is synced, show only the green dot so the page title keeps its room.
   The full text stays available to screen readers via the visually-hidden full label. */
@media (max-width: 767px) {
  .sync-pill.is-ok {
    padding: 0.15rem 0.45rem;
  }
  .sync-pill.is-ok .sync-pill-compact {
    display: none !important;
  }
  .sync-pill.is-ok .sync-pill-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ==========================================================================
   V3-M2: Shell redesign (SPEC-v3.md sections 8 and 10).
   Desktop ≥ 1024 px: dark sidebar with icon rail state; top-bar global
   search; right drawer component. Phone: "More" bottom sheet.
   This section overrides the M8a desktop rules above; phone/tablet
   behaviour below 1024 px is unchanged apart from the More button.
   ========================================================================== */

/* Branding slots (SPEC-v3.md section 8): shown by JS when branding loads.
   The header carries the brand on tablets; on desktop the sidebar does. */
.header-brand-logo,
.header-brand-name {
  display: none;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .header-brand-logo {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: contain;
    flex: none;
  }

  .header-brand-name {
    display: inline;
    font-size: 0.95rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.brand-logo {
  object-fit: contain;
}

.login-card h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.login-logo {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

/* Phone tab-bar "More" button is a <button class="tab"> (SPEC-v3.md 10). */
.tab-button {
  background: none;
  border: none;
  border-top: 3px solid transparent;
  cursor: pointer;
}

/* ----- Desktop shell (≥ 1024 px) ----- */

.global-search {
  display: none;
}

body.logged-out .global-search {
  display: none !important;
}

@media (min-width: 1024px) {
  :root {
    --sidebar-w: 272px; /* fits "Preventive Maintenance" plus its badge */
  }

  body.sidebar-rail {
    --sidebar-w: 64px;
  }

  /* Dark sidebar: deep slate, light text, orange active indicator. */
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: var(--sidebar-w);
    padding: 0.9rem 0.7rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    color: #e6ecf2;
    background: #1c232d;
    border-right: 1px solid rgb(0 0 0 / 40%);
    transition: width 0.18s ease;
  }

  body.sidebar-rail .sidebar {
    padding: 0.9rem 0.4rem 1rem;
    transition: width 0.18s ease;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.15rem 0.3rem 0.8rem;
    min-height: 44px;
  }

  .sidebar .brand-mark {
    background: #f07a3e;
    color: #241105;
    flex: none;
  }

  .sidebar .brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #f4f7fa;
    flex: none;
  }

  .sidebar-app-name {
    flex: 1;
    min-width: 0;
    color: #f4f7fa;
    font-size: 0.98rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-toggle {
    width: 34px;
    height: 34px;
    color: #aebccd;
    flex: none;
  }

  .sidebar-toggle:hover {
    background: rgb(255 255 255 / 8%);
  }

  body.sidebar-rail .sidebar-toggle-icon {
    transform: rotate(180deg);
  }

  .sidebar-new {
    width: 100%;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
  }

  .sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
  }

  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 42px;
    padding: 0.45rem 0.6rem;
    border-radius: 9px;
    color: #c9d2dd;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .sb-icon {
    width: 19px;
    height: 19px;
    flex: none;
    color: #8fa0b3;
  }

  .sidebar-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-link:hover {
    background: rgb(255 255 255 / 6%);
    color: #f2f6fa;
  }

  .sidebar-link[aria-current="page"] {
    background: rgb(240 122 62 / 16%);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #f07a3e;
  }

  .sidebar-link[aria-current="page"] .sb-icon {
    color: #f9a770;
  }

  .sidebar .nav-count {
    border-color: transparent;
    background: #36445a;
    color: #e0e8f1;
  }

  /* Active item: the older light-theme rule paints the badge white; keep it readable on the dark sidebar. */
  .sidebar .sidebar-link[aria-current="page"] .nav-count {
    background: #f07a3e;
    color: #1b1f27;
  }

  .sidebar-group-title {
    margin: 0.85rem 0.6rem 0.3rem;
    color: #7f8ea0;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .sidebar-sublink {
    min-height: 38px;
    margin-left: 25px;
    font-size: 0.86rem;
  }

  /* Icon rail: labels and group titles collapse, badges pin to the icon. */
  body.sidebar-rail .sidebar-brand {
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
  }

  body.sidebar-rail .sidebar-app-name,
  body.sidebar-rail .sidebar-label,
  body.sidebar-rail .sidebar-group-title,
  body.sidebar-rail .sidebar-new-label {
    display: none;
  }

  body.sidebar-rail .sidebar-new {
    padding-inline: 0.4rem;
  }

  body.sidebar-rail .sidebar-link,
  body.sidebar-rail .sidebar-sublink {
    position: relative;
    justify-content: center;
    margin-left: 0;
    padding: 0.5rem 0;
  }

  body.sidebar-rail .nav-count {
    position: absolute;
    top: 1px;
    right: 3px;
    min-width: 0.95rem;
    padding: 0 0.22rem;
    font-size: 0.6rem;
  }

  /* Room for the fixed sidebar; the tab bar and FAB are already hidden. */
  body {
    margin-left: var(--sidebar-w);
    transition: margin-left 0.18s ease;
  }

  body.drawer-open {
    overflow: hidden;
  }

  /* Keep the old block's intent: tablet carries the brand in the header,
     desktop carries it in the sidebar, phones have no room for it. */
  .header-title .brand-mark,
  .header-title .header-brand-logo,
  .header-title .header-brand-name {
    display: none;
  }

  .app-header,
  .page {
    max-width: 1200px;
  }

  .counters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .home-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }

  /* Top-bar global search (SPEC-v3.md section 10): service orders,
     machines and parts; results in a dropdown under the box. */
  body:not(.logged-out) .global-search {
    display: block;
    position: relative;
    flex: 0 1 300px;
    min-width: 160px;
    margin-left: 0.4rem;
  }

  .global-search input {
    width: 100%;
    min-height: 40px;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text);
  }

  .global-search input::placeholder {
    color: var(--muted);
  }

  .global-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 55;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .gs-result {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    padding: 0.5rem 0.7rem;
    color: var(--text);
    text-decoration: none;
  }

  .gs-result + .gs-result {
    border-top: 1px solid var(--border);
  }

  .gs-result:hover,
  .gs-result[aria-selected="true"] {
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .gs-kind {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .gs-title {
    font-weight: 650;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
  }

  .gs-sub {
    color: var(--muted);
    font-size: 0.78rem;
  }

  .gs-empty {
    padding: 0.65rem 0.7rem;
    color: var(--muted);
    font-size: 0.85rem;
  }
}

/* ----- Right slide-over drawer (SPEC-v3.md sections 3 and 10) ----- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgb(15 20 26 / 46%);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  width: min(560px, 100vw);
  background: var(--surface);
  color: var(--text);
  box-shadow: -10px 0 34px rgb(16 24 40 / 22%);
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem 0.7rem;
  border-bottom: 1px solid var(--border);
}

.drawer-head h2 {
  flex: 1;
  margin: 0;
  font-size: 1.08rem;
}

.drawer-close {
  font-size: 1.2rem;
}

.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem 1.1rem 1.3rem;
}

@media (max-width: 767.98px) {
  .drawer {
    width: 100vw;
  }
}

/* ----- Phone "More" bottom sheet (SPEC-v3.md section 10) ----- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgb(0 0 0 / 42%);
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 76;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 30rem;
  margin: 0 auto;
  padding: 0.55rem 0.85rem calc(env(safe-area-inset-bottom) + 0.6rem);
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -8px 30px rgb(16 24 40 / 22%);
}

.sheet-title {
  margin: 0.2rem 0.45rem 0.35rem;
  font-size: 0.95rem;
  font-weight: 800;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0 0.6rem;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
}

.sheet-item:hover,
.sheet-item:focus-visible {
  background: var(--surface-2);
}

.sheet-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
}

/* ==========================================================================
   V3-M3 (SPEC-v3.md section 3): service orders toolbar (view switch, search,
   Filters), removable filter chips, table pagination, phone cards, board
   with drag-and-drop, calendar, drawer form sections (assignees, checklist,
   labour, attachments), avatars, priority badges. Phone bottom bar fix
   above (.tab). This section comes last so it can override earlier rules.
   ========================================================================== */

/* ----- Service orders page layout ----- */

.so-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.6rem;
}

.so-toolbar-search {
  flex: 1 1 220px;
  min-width: 0;
}

.so-toolbar-search .search-wrap {
  margin-bottom: 0;
}

/* View switch: List · Board · Calendar (desktop only, SPEC-v3.md 3.1). */
.view-switch {
  display: none;
}

@media (min-width: 1024px) {
  .view-switch {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
  }
}

.view-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.2rem 0.8rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
}

.view-switch-btn:hover {
  color: var(--accent-strong);
  background: var(--surface-2);
}

.view-switch-btn.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

/* ----- Removable filter chips + Clear all ----- */

.so-chips-host:empty {
  display: none;
}

.so-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.3rem 0.22rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.filter-chip-label {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-chip-x {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.filter-chip-x:hover {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.clear-all {
  border: 0;
  padding: 0.2rem 0.35rem;
  background: none;
  color: var(--focus);
  font-size: 0.85rem;
  font-weight: 650;
  text-decoration: underline;
  cursor: pointer;
}

/* ----- Filter popover (desktop) and phone bottom sheet ----- */

.filter-popover {
  position: fixed;
  z-index: 90;
  width: min(440px, calc(100vw - 32px));
  max-height: min(72vh, 640px);
  overflow-y: auto;
  padding: 0.9rem 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.filter-popover-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.filter-controls {
  display: grid;
  gap: 0.85rem;
}

.filter-group {
  border: 0;
  padding: 0;
  margin: 0;
}

.filter-group legend {
  padding: 0;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.filter-chips {
  flex-wrap: wrap;
  overflow: visible;
  padding: 0;
}

.chip.chip-toggle {
  min-height: 38px;
  padding: 0.25rem 0.7rem;
}

.chip.chip-toggle .tick {
  font-size: 0.8rem;
}

.filter-chips .chip[aria-pressed="true"],
.filter-chips .chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.filter-selects {
  gap: 0.55rem;
}

.filter-actions {
  margin-top: 0.2rem;
}

.filter-sheet {
  max-height: 82vh;
  overflow-y: auto;
  gap: 0.45rem;
}

.filter-sheet-grid,
.filter-sheet .filter-controls {
  display: grid;
}

.filter-sheet-grip {
  width: 42px;
  height: 5px;
  margin: 0.15rem auto 0.25rem;
  border-radius: 999px;
  background: var(--border-strong);
}

/* ----- Phone service order cards ----- */

.so-card .so-number {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.due-overdue {
  color: var(--danger);
  font-weight: 650;
}

.text-overdue {
  color: var(--danger);
  font-weight: 650;
}

/* ----- Pagination (desktop list) ----- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0.25rem 0.1rem;
}

.pager-status {
  flex: none;
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.pager select {
  width: auto;
  min-height: 38px;
  padding: 0.3rem 0.5rem;
}

/* ----- Avatars + assignee stack ----- */

.avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  flex: none;
}

.avatar-contractor {
  background: var(--waiting-bg);
  color: var(--waiting-fg);
}

.avatar-coworker {
  background: var(--open-bg);
  color: var(--open-fg);
}

.avatar-user {
  background: var(--done-bg);
  color: var(--done-fg);
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.avatar-stack .avatar + .avatar {
  margin-left: -7px;
}

.avatar-names {
  font-size: 0.82rem;
}

.assignees-view .avatar-names {
  display: block;
  margin-top: 0.3rem;
}

/* ----- Priority badges (SPEC-v3.md 3.3: badge + text) ----- */

.pill-priority {
  border: 1px solid currentColor;
  background: transparent;
}

.priority-none {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
}

.priority-low {
  background: var(--open-bg);
  color: var(--open-fg);
}

.priority-medium {
  background: var(--progress-bg);
  color: var(--progress-fg);
}

.priority-high {
  background: var(--waiting-bg);
  color: var(--waiting-fg);
}

.priority-urgent {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

/* ----- Board view (SPEC-v3.md 3.4) ----- */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(235px, 1fr);
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.board-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-3);
}

.board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
}

.board-col-title {
  font-weight: 750;
  font-size: 0.9rem;
}

.board-column.status-done .board-col-title {
  color: var(--done-fg);
}

.board-col-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.board-list {
  display: grid;
  gap: 0.5rem;
  padding: 0 0.55rem 0.7rem;
  min-height: 74px;
}

.board-list.is-drop-target {
  outline: 3px dashed var(--accent);
  outline-offset: -3px;
  border-radius: 10px;
}

.board-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: grab;
}

.board-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.board-card.is-dragging {
  opacity: 0.55;
}

.board-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.board-card-number {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.board-card-number:hover {
  color: var(--accent-strong);
}

.board-card-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.board-card-title:hover {
  color: var(--accent-strong);
}

.board-card-meta {
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.board-card-due {
  font-size: 0.8rem;
  color: var(--muted);
}

.board-card-due.is-overdue {
  color: var(--danger);
  font-weight: 700;
}

.board-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.board-move {
  min-height: 32px;
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  flex: none;
}

/* "Move to…" popup menu (keyboard/touch alternative to drag and drop). */
.move-menu {
  position: fixed;
  z-index: 92;
  display: grid;
  min-width: 170px;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.move-menu-item {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  text-align: left;
  font-weight: 600;
  cursor: pointer;
}

.move-menu-item:hover:not(:disabled),
.move-menu-item:focus-visible {
  background: var(--surface-2);
}

.move-menu-item.is-current {
  color: var(--muted);
  cursor: default;
}

/* ----- Calendar view (SPEC-v3.md 3.5) ----- */

.cal-wrap {
  display: grid;
  gap: 0.6rem;
}

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cal-month {
  margin: 0;
  font-size: 1.05rem;
}

.cal-nav {
  display: flex;
  gap: 0.4rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal-weekday {
  padding: 0.25rem 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 92px;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.cal-cell.is-out {
  background: var(--surface-3);
  border-color: var(--border);
}

.cal-cell.is-out .cal-day,
.cal-cell.is-out .cal-item {
  opacity: 0.55;
}

.cal-cell.is-today {
  border-color: var(--accent);
  border-width: 2px;
}

.cal-day {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cal-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  background: var(--neutral-bg);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.cal-item:hover {
  background: var(--accent-soft);
}

.cal-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-item.status-open {
  background: var(--open-bg);
  color: var(--open-fg);
}

.cal-item.status-in-progress {
  background: var(--progress-bg);
  color: var(--progress-fg);
}

.cal-item.status-waiting-parts,
.cal-item.status-waiting-tech {
  background: var(--waiting-bg);
  color: var(--waiting-fg);
}

.cal-item.status-done {
  background: var(--done-bg);
  color: var(--done-fg);
}

.cal-item.is-overdue {
  outline: 1px solid var(--danger);
}

.cal-more {
  border: 0;
  padding: 0.1rem 0.4rem;
  background: none;
  color: var(--focus);
  font-size: 0.75rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.cal-empty-note {
  margin: 0;
}

/* ----- Assign people picker ----- */

.assignee-list {
  display: grid;
  gap: 0.4rem;
}

.assignee-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.assignee-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.assignee-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.assignee-add select {
  width: 100%;
}

/* ----- Checklist editor + view ----- */

.checklist-edit {
  display: grid;
  gap: 0.45rem;
}

.check-edit-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.check-edit-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.check-edit-actions .btn {
  min-height: 34px;
  padding: 0.1rem 0.4rem;
}

.check-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

.checklist-view {
  display: grid;
  gap: 0.35rem;
}

.check-progress {
  margin: 0 0 0.15rem;
}

.check-view-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.check-view-item.is-done .check-view-text {
  color: var(--muted);
  text-decoration: line-through;
}

.check-box {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--done-bg);
  color: var(--done-fg);
  font-size: 0.8rem;
  font-weight: 750;
}

.check-box.is-empty {
  background: var(--surface);
}

/* ----- Labour editor + view ----- */

.labour-edit {
  display: grid;
  gap: 0.4rem;
}

.labour-add {
  display: grid;
  grid-template-columns: 2fr auto auto;
  gap: 0.45rem;
  align-items: center;
}

.labour-add-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  align-items: center;
}

.labour-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  font-size: 0.88rem;
}

.labour-row.is-legacy {
  background: var(--surface-3);
}

.labour-person {
  font-weight: 650;
}

.labour-date,
.labour-hours {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.labour-note {
  flex: 1 1 140px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.labour-view {
  display: grid;
  gap: 0.4rem;
}

.labour-view .labour-row {
  background: transparent;
  border: 0;
  padding: 0;
}

.labour-total {
  margin: 0.25rem 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ----- Attachments grid ----- */

.attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
}

.attach-grid-edit {
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
}

.attach-cell {
  position: relative;
}

.attach-thumb {
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}

.attach-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attach-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  aspect-ratio: 1;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

.attach-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger-fg);
  font-size: 0.65rem;
  font-weight: 800;
}

.attach-file-name {
  font-size: 0.72rem;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.attach-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 24px;
  height: 24px;
}

/* Details drawer form sections breathing room. */
.so-form .section-title {
  margin-top: 1.5rem;
}

.so-form .section-title:first-of-type {
  margin-top: 0.25rem;
}

/* Split-view sidebar (list pane) keeps the new table readable. */
.split-list .data-table [data-col="labour"],
.split-list .data-table [data-col="category"],
.split-list .data-table [data-col="age"] {
  display: none;
}

/* Service order numbers never break across lines (SO-0001). */
.so-number {
  white-space: nowrap;
}

/* PM task form (V3-M4): same section rhythm as the service order form. */
.pm-form .section-title {
  margin-top: 1.5rem;
}

.pm-form .section-title:first-of-type {
  margin-top: 0.25rem;
}

/* Machine manuals (SPEC-v3.md sections 4 and 6): PDF attachments listed
   with the file name, size and an Open link (new tab). */
.manual-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manual-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.manual-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.manual-item .inline-link {
  margin-left: auto;
}

/* ==========================================================================
   V3-M5 People: coworkers and outside contractors (SPEC-v3.md sections 5
   and 13) — active/inactive pills, phone person cards, contact links with
   Copy buttons, and the "View only" badge on read-only pages.
   ========================================================================== */

/* Active / Inactive pills: green like other good states, grey for inactive. */
.status-active {
  background: var(--done-bg);
  color: var(--done-fg);
}

.status-inactive {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
  box-shadow: inset 0 0 0 1px var(--neutral-fg);
}

/* "View only" badge (SPEC-v3.md 13.3): amber so it reads as a notice. */
.view-only-badge {
  background: var(--waiting-bg);
  color: var(--waiting-fg);
}

/* Phone people cards: a tappable row plus the contact strip underneath.
   The card carries the border; the row inside loses its own. */
.person-card {
  padding: 0;
  overflow: hidden;
}

.person-card .person-row {
  min-height: 56px;
  border: 0;
  border-radius: 0;
}

.person-card .person-row:hover {
  border-radius: 0;
}

.person-card .contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  padding: 0.55rem 0.8rem 0.65rem;
  border-top: 1px dashed var(--border);
  background: var(--surface-3);
}

/* Contact values: tel:/mailto: link with a small Copy button beside it. */
.contact-value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}

.contact-link {
  color: var(--accent-strong);
  overflow-wrap: anywhere;
}

.contact-link:hover,
.contact-link:focus-visible {
  text-decoration: underline;
}

.contact-copy {
  flex: none;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
}

/* Detail pages: keep the contact pairs in the card grid readable. */
.detail-grid dd .contact-value {
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  /* The table carries contact details as text; cards are hidden anyway. */
  .data-table td[data-col='phone'],
  .data-table td[data-col='email'] {
    overflow-wrap: anywhere;
  }
}

/* Emails and phone numbers in tables: break at sensible points, never mid-word. */
.data-table [data-col="email"],
.data-table [data-col="phone"] {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

/* ==========================================================================
   V3-M6b: Statistics page (SPEC-v3.md section 7). Tiles, KPIs, hand-written
   SVG charts and the tables behind them. Phones: tiles 2 per row, charts
   scale with their viewBox, tables scroll inside their own container — no
   page-level horizontal scroll.
   ========================================================================== */

/* Sub-tabs: Status monitor · Reports, on every screen size. */
.stats-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.2rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}

.stats-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.2rem 0.85rem;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 650;
  text-decoration: none;
}

.stats-tab:hover {
  color: var(--accent-strong);
  background: var(--surface-2);
}

.stats-tab[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
}

/* Status tiles + "Today" strip: 2 per row on phones, 4 from 560 px. */
.stats-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}

@media (min-width: 560px) {
  .stats-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: 76px;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.stat-tile-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-tile-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.stat-tile-link {
  text-decoration: none;
}

a.stat-tile-link:hover {
  border-color: var(--accent);
}

.stat-tile.is-alert {
  border-left: 5px solid var(--danger);
}

.stat-tile.is-warn {
  border-left: 5px solid var(--accent);
}

/* Reports: 2 KPI tiles per row on phones, 3 from 560 px, 6 on desktop. */
.kpi-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}

@media (min-width: 560px) {
  .kpi-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kpi-tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Range selector: Last 30 / 90 / 365 days, on every screen size. */
.stats-range {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.stats-range-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.2rem 0.8rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
}

.stats-range-btn:hover {
  color: var(--accent-strong);
  background: var(--surface-2);
}

.stats-range-btn.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

/* Statistics tables stay visible at every width and scroll inside their own
   container, so the page itself never scrolls sideways. */
.table-scroll {
  max-width: 100%;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.stats-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.stats-table-wide {
  min-width: 720px;
}

.stats-table th,
.stats-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.stats-table thead th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom: 2px solid var(--border-strong);
}

.stats-table tbody tr:last-child td {
  border-bottom: 0;
}

.stats-table td {
  overflow-wrap: anywhere;
}

.stats-table td[data-col="hours"],
.stats-table td[data-col="down-since"],
.stats-table td[data-col="mtbf"],
.stats-table td[data-col="cost"] {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Chart cards: SVG scales with its viewBox; the table toggle and CSV export
   sit in the card head. */
.chart-card {
  margin-bottom: 0;
}

.chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}

@media (min-width: 1024px) {
  .chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.chart-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.chart-card-title {
  margin: 0;
  font-size: 1rem;
}

.chart-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chart-host {
  width: 100%;
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   V3-M8 AI assistant (SPEC-v3.md section 9): fixed chat button, popover
   panel (desktop 380 × 560, phone full-screen sheet), draft card, Settings
   card. Permissions section 13 decide visibility in app.js.
   ========================================================================== */

/* Fixed chat button: above the phone tab bar and the FAB so they never
   overlap; on the desktop sidebar layout it sits alone bottom-right. */
.ai-chat-fab {
  position: fixed;
  z-index: 65;
  right: 1.5rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}

.ai-chat-fab:hover {
  background: var(--accent-strong);
}

.ai-chat-fab:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.ai-chat-fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.ai-chat-icon {
  width: 24px;
  height: 24px;
}

@media (max-width: 1023.98px) {
  /* Keep the same right edge as the FAB and stack above it (the FAB bottom
     is tabbar + safe-area + 1rem and it is ~52px tall). */
  .ai-chat-fab {
    right: max(1rem, calc((100vw - 720px) / 2 + 1rem));
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 5.5rem);
  }
}

/* Login screen (SPEC-v2.md 9.1): no app chrome before sign-in. */
body.logged-out .ai-chat-fab {
  display: none !important;
}

/* The panel: desktop popover bottom-right; phone full-screen sheet. */
.ai-chat-panel {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + var(--tap) + 0.75rem);
  z-index: 65;
  display: flex;
  flex-direction: column;
  width: 380px;
  height: 560px;
  max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 3rem - var(--tap));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.ai-chat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 0.95rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

.ai-chat-title {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
}

.ai-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.8rem 0.95rem;
  background: var(--surface-3);
}

/* Bubbles: user right, assistant left (SPEC-v3.md section 9). */
.ai-msg {
  max-width: 86%;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  font-size: 0.95rem;
}

.ai-msg.is-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-right-radius: 4px;
}

.ai-msg.is-assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* Line breaks survive without innerHTML: paragraphs keep newlines. */
.chat-para {
  margin: 0 0 0.45rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.chat-list {
  margin: 0 0 0.45rem;
  padding-left: 1.2rem;
}

.chat-list li {
  margin: 0 0 0.2rem;
  overflow-wrap: anywhere;
}

.ai-msg > :last-child,
.ai-msg > :last-child > :last-child {
  margin-bottom: 0;
}

.ai-chat-thinking {
  align-self: flex-start;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
}

.ai-chat-error {
  margin: 0;
  padding: 0.45rem 0.95rem;
}

.ai-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem 0.25rem;
}

.ai-chat-input {
  flex: 1;
  min-height: 2.6rem;
  max-height: 8rem;
  resize: vertical;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.ai-chat-form .btn {
  margin: 0;
  min-height: 2.6rem;
}

.ai-chat-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  padding: 0 0.95rem 0.7rem;
}

.ai-chat-count {
  font-size: 0.8rem;
  color: var(--muted);
}

.ai-chat-notice {
  flex: 1;
  min-width: 12rem;
  margin: 0;
  text-align: right;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Starter suggestions when the conversation is empty. */
.ai-chat-starters {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.4rem 0.2rem;
}

.ai-chat-starters-title {
  margin: 0 0 0.1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.ai-starter {
  align-self: flex-start;
  max-width: 100%;
  text-align: left;
}

/* Draft service order card (SPEC-v3.md section 9): shown in the chat, saved
   only after "Open as new service order" + Save in the normal form. */
.ai-draft-card {
  align-self: flex-start;
  width: 92%;
  margin: 0;
  padding: 0.6rem 0.75rem;
}

.ai-draft-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.ai-draft-facts {
  margin: 0 0 0.4rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.55rem;
}

.ai-draft-facts dt {
  font-size: 0.8rem;
  color: var(--muted);
}

.ai-draft-facts dd {
  margin: 0;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.ai-draft-card .btn {
  margin: 0;
}

/* Proposed change from the assistant (machines, service orders, PM tasks):
   applied by the AI Assistant user only after the user presses Apply. */
.ai-proposal-card {
  align-self: flex-start;
  width: 92%;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--accent, #2f6f4f);
}

.ai-proposal-summary {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
}

.ai-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.ai-proposal-actions .btn {
  margin: 0;
}

.ai-proposal-done {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Phone: the panel becomes a full-screen sheet above the tab bar. */
@media (max-width: 767.98px) {
  .ai-chat-panel {
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
  }

  .ai-msg {
    max-width: 92%;
  }

  .ai-chat-notice {
    text-align: left;
  }
}

/* Settings → AI assistant card fields (SPEC-v3.md section 9). */
.ai-settings-card .field-label {
  display: block;
  margin: 0.55rem 0 0.2rem;
}

.ai-settings-card input,
.ai-settings-card select {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.ai-settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
}

/* Admin dashboard (SPEC-v3.md 13.3): users table, roles matrix, history. */
.admin-tabs {
  margin: 0.25rem 0 0.9rem;
}

.matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.roles-matrix {
  min-width: 40rem;
}

.roles-matrix .matrix-area,
.roles-matrix th:first-child,
.roles-matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}

.matrix-role.is-locked {
  color: var(--muted);
}

.matrix-lock {
  margin-left: 0.35rem;
  cursor: help;
}

.matrix-lock svg {
  width: 0.95rem;
  height: 0.95rem;
  vertical-align: -0.1rem;
}

.seg {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-3);
  white-space: nowrap;
}

.seg-option {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.seg-option:has(input[type="radio"]:checked) {
  background: var(--accent-soft);
  color: var(--text);
}

.seg-option input[type="radio"] {
  width: 0.85rem;
  height: 0.85rem;
  margin: 0;
  accent-color: var(--accent);
  flex: none;
}

.seg-option:has(input[type="radio"]:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.unsaved-bar {
  position: sticky;
  bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.85rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  box-shadow: var(--shadow);
}

.unsaved-bar-text {
  font-weight: 600;
}

.role-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  background: var(--surface);
}

.role-card-actions {
  display: inline-flex;
  gap: 0.4rem;
  margin-left: auto;
}

.role-delete-reason {
  flex-basis: 100%;
  font-size: 0.8rem;
}

.role-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-history-entry {
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--border);
}

.role-history-entry:last-child {
  border-bottom: 0;
}

.role-history-who {
  font-weight: 600;
}

.role-history-when {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.role-history-changes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-history-change {
  padding: 0.1rem 0;
  font-size: 0.88rem;
}

.toast-action {
  margin-left: 0.5rem;
}

.branding-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.branding-logo-preview {
  max-height: 48px;
  max-width: 140px;
  border-radius: 6px;
}

.admin-users-table td,
.admin-users-table th {
  vertical-align: middle;
}

.matrix-lock-svg {
  width: 0.95rem;
  height: 0.95rem;
  vertical-align: -0.12rem;
}

/* Section title followed by an editor: the editor's own label repeats the title
   ("Checklist / Checklist"), so keep it for screen readers only. */
.section-title + .field > .editor-label:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Empty hint lines left big gaps under labels. */
.field-hint:empty {
  display: none;
}

.downtime-details > summary {
  cursor: pointer;
  font-weight: 650;
  padding-block: 0.5rem;
}