/* =============================================================================
   Primitives. Every value here comes from tokens.css via var(). No raw colours.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ typography */
.t-display     { font: var(--type-display);     letter-spacing: var(--track-display); margin: 0; }
.t-headline    { font: var(--type-headline);    letter-spacing: var(--track-headline); margin: 0; }
.t-headline-sm { font: var(--type-headline-sm); letter-spacing: var(--track-headline-sm); margin: 0; }
.t-title       { font: var(--type-title);       letter-spacing: var(--track-title); margin: 0; }
.t-body-lg     { font: var(--type-body-lg);     margin: 0; }
.t-body        { font: var(--type-body);        margin: 0; }
.t-data        { font: var(--type-data);        margin: 0; }
.t-mono        { font: var(--type-mono);        font-variant-numeric: tabular-nums; }
.t-label       { font: var(--type-label);       letter-spacing: var(--track-label); }
.t-label-sm    { font: var(--type-label-sm);    letter-spacing: var(--track-label-sm); text-transform: uppercase; color: var(--text-secondary); }
.t-kicker      { font: var(--type-kicker);      letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--text-secondary); }
.t-eyebrow     { font: var(--type-eyebrow);     letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-accent);
                 display: inline-flex; align-items: center; gap: var(--space-1); }
.t-eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--color-accent); }
.quiet         { color: var(--text-secondary); }

/* --------------------------------------------------------------- buttons */
.btn {
  font: var(--type-label); letter-spacing: var(--track-label);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--duration-interactive) var(--ease-colour),
              border-color var(--duration-interactive) var(--ease-colour),
              color var(--duration-interactive) var(--ease-colour);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-accent); }

.btn-primary {
  background: var(--button-primary-bg); color: var(--button-primary-text);
  border: none; padding: 11px 18px; box-shadow: var(--button-primary-shadow);
}
.btn-secondary {
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--border-default); padding: 10px 17px;
}
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Never a filled red block: filled red gets clicked by muscle memory. */
.btn-destructive {
  background: var(--surface-raised); color: var(--color-destructive);
  border: 1px solid var(--color-destructive-border); padding: 10px 17px;
}
.btn-destructive:hover { background: var(--color-destructive-fill); }

.btn:disabled, .btn[disabled] {
  background: var(--surface-quiet); color: var(--icon-quiet);
  border-color: transparent; box-shadow: none; cursor: not-allowed;
}

/* The one sanctioned use of Outline as text is a disabled control. */
.link {
  color: var(--color-accent); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--duration-interactive) var(--ease-entrance);
}
.link:hover { background-size: 100% 1px; }

/* ---------------------------------------------------------------- status */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius-pill); padding: 4px 10px;
  font: var(--type-label-sm); letter-spacing: var(--track-label-sm); text-transform: uppercase;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.pill-neutral  { color: var(--status-neutral-text);  background: var(--status-neutral-bg); }
.pill-progress { color: var(--status-progress-text); background: var(--status-progress-bg); }
.pill-waiting  { color: var(--status-waiting-text);  background: var(--status-waiting-bg); }
.pill-error    { color: var(--status-error-text);    background: var(--status-error-bg); }
.pill-success  { color: var(--status-success-text);  background: var(--status-success-bg); }

/* Six rungs: junior technician, technician, supervisor, assistant manager,
   manager, system administrator. Level reads as WEIGHT, not hue, so the ladder
   stays legible in greyscale and does not spend the accent on something that is
   not urgency. The administrator is the one outline treatment, because it is a
   different KIND of authority rather than simply more of it. */
.role-badge {
  font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: 0.06em;
  border-radius: 4px; padding: 3px 6px; display: inline-block;
}
.role-l1 { border: 1px solid var(--border-default); color: var(--text-secondary); }
.role-l2 { border: 1px solid var(--icon-quiet); color: var(--text-primary); }
.role-l3 { background: var(--surface-quiet); border: 1px solid var(--border-default); color: var(--text-primary); }
.role-l4 { background: var(--accent-tint-07); border: 1px solid var(--accent-tint-35); color: var(--color-accent); }
.role-l5 { background: var(--brand-pen); color: var(--color-white); border: 1px solid var(--brand-pen); }
.role-l6 { background: transparent; color: var(--brand-pen); border: 1.5px solid var(--brand-pen); }
[data-theme="dark"] .role-l5 { color: var(--text-primary); }
[data-theme="dark"] .role-l6 { color: var(--color-accent); border-color: var(--color-accent); }

/* ----------------------------------------------------------------- forms */
.field {
  font: var(--type-data); color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-default); border-radius: var(--radius-control);
  padding: 7px 11px; min-width: 218px;
}
.field:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-accent); }
.field-error { border-color: var(--color-destructive); }
.field-message {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-destructive); font: 400 12px/16px var(--font-body); margin-top: 4px;
}

/* ------------------------------------------------------------ icon tile */
.icon-tile {
  width: 48px; height: 48px; border-radius: var(--radius-card);
  background: var(--accent-tint-07); border: 1px solid var(--accent-tint-20);
  color: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-tile .msym { font-size: 24px; }
.icon-quiet { color: var(--icon-quiet); font-size: 20px; }

/* ---------------------------------------------------------------- table */
.table-container {
  border: 1px solid var(--border-default); border-radius: var(--radius-card);
  background: var(--surface-raised); overflow: hidden;
}
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  background: var(--surface-sunken); text-align: left;
  padding: 14px 20px; border-bottom: 1px solid var(--border-default);
  font: var(--type-label-sm); letter-spacing: var(--track-label-sm);
  text-transform: uppercase; color: var(--text-secondary);
  white-space: nowrap; cursor: pointer;
}
.table thead th .msym { font-size: 14px; opacity: 0.4; vertical-align: middle; }
.table thead th.sorted { color: var(--color-accent); }
.table thead th.sorted .msym { opacity: 1; }
/* No zebra striping, no vertical rules. */
.table tbody td {
  padding: 16px 20px; border-bottom: 1px solid var(--border-default);
  font: var(--type-data); color: var(--text-primary);
}
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: none; }
/* Type size never changes between densities, only padding. */
.table.compact tbody td { padding: 8px 16px; }
.table.compact thead th { padding: 8px 16px; }
.cell-id { font: var(--type-mono); }

.empty-state {
  border: 1px dashed var(--border-default); border-radius: var(--radius-control);
  padding: var(--space-5); text-align: center; color: var(--text-secondary);
}
.empty-state .msym { font-size: 24px; color: var(--icon-quiet); }
.empty-state .headline { font: var(--type-label); color: var(--text-primary); margin-top: var(--space-1); }

/* -------------------------------------------------------------- surfaces */
.card {
  background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-card); padding: var(--space-4);
}
.panel { border-radius: var(--radius-panel); }

/* ---------------------------------------------------- reduced motion */
/* Under reduced motion all animation stops and nothing hides. */
@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;
  }
}

/* =============================================================================
   The app shell. Values from the design handoff, expressed in tokens.
   ========================================================================== */

.shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-page); }

.topbar {
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 20px;
  border-bottom: 1px solid var(--border-default);
}
.topbar-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--color-white);
               display: grid; place-items: center; flex-shrink: 0; }
.topbar-mark img { width: 20px; height: 20px; object-fit: contain; display: block; }
.topbar-name { font-family: var(--font-display); font-weight: 600; font-size: 14px;
               line-height: 20px; letter-spacing: -0.01em; }
.topbar-divider { width: 1px; height: 22px; background: var(--border-default); }
.breadcrumb { font: var(--type-data); color: var(--text-primary); }
.topbar-search {
  display: flex; align-items: center; gap: var(--space-1);
  min-width: 218px; padding: 7px 11px;
  border: 1px solid var(--border-default); border-radius: var(--radius-control);
  color: var(--icon-quiet); font: var(--type-data);
}
.topbar-search .msym { font-size: 17px; }
.topbar-bell { position: relative; display: flex; color: var(--text-secondary); }
.topbar-bell .msym { font-size: 21px; }
.topbar-dot { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px;
              border-radius: var(--radius-pill); background: var(--color-accent);
              border: 1.5px solid var(--surface-page); }
.avatar { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--brand-pen);
          color: #FFFFFF; display: grid; place-items: center; font-weight: 600; font-size: 11px; }
.topbar-out { display: flex; }

.shell-body { flex-grow: 1; display: flex; min-height: 0; }

.sidebar {
  width: 216px; flex-shrink: 0;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border-default);
  padding: var(--space-1);
  display: flex; flex-direction: column; gap: 2px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--radius-control);
  text-decoration: none; color: var(--text-secondary);
  font-weight: 500; font-size: 13.5px; line-height: 18px;
}
.nav-item:hover { background: var(--color-cloud-deep); }
.nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-icon { font-size: 19px; color: var(--icon-quiet); }
.nav-label { flex-grow: 1; }
.nav-count { font-family: var(--font-mono); font-weight: 600; font-size: 11px; color: var(--icon-quiet); }
.nav-item-active {
  font-weight: 600; color: var(--color-accent);
  background: var(--accent-tint-07);
  box-shadow: inset 2px 0 0 var(--color-accent);
}
.nav-item-active .nav-icon, .nav-item-active .nav-count { color: var(--color-accent); }
.nav-divider { height: 1px; background: var(--border-default); margin: var(--space-1) 10px; }

.page { flex-grow: 1; min-width: 0; padding: var(--space-4); }
.page-header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.page-header h1 { font: var(--type-display); font-size: 24px; line-height: 32px;
                  letter-spacing: -0.018em; margin: 0; }
.page-header p { font: var(--type-data); font-size: 14px; line-height: 22px;
                 color: var(--text-secondary); margin: 2px 0 0; }

/* Below 1280 the rail is the default, per the handoff. */
@media (max-width: 1279px) {
  .sidebar { width: 64px; align-items: center; }
  .nav-label, .nav-count { display: none; }
  .nav-item { width: 40px; height: 40px; justify-content: center; padding: 0; }
}

/* ------------------------------------------------------------ list controls */
.filter-bar {
  display: flex; align-items: center; gap: var(--space-1);
  padding: 12px 20px; border-bottom: 1px solid var(--border-default);
}
.filter-search {
  display: flex; align-items: center; gap: var(--space-1);
  min-width: 218px; padding: 5px 11px;
  border: 1px solid var(--border-default); border-radius: var(--radius-control);
}
.filter-search .msym { font-size: 17px; color: var(--icon-quiet); }
.filter-input { border: none; outline: none; background: transparent; font: var(--type-data);
                color: var(--text-primary); width: 100%; }
.filter-input::placeholder { color: var(--icon-quiet); }

.quick-filter {
  padding: 6px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  font-size: 13px; color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
.quick-filter:hover { border-color: var(--color-accent); color: var(--color-accent); }
.quick-filter-on { background: var(--accent-tint-07); border-color: transparent; color: var(--color-accent); }

.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius-pill);
  background: var(--accent-tint-07); color: var(--color-accent);
  font-size: 13px; text-decoration: none;
}
.filter-chip .msym { font-size: 15px; }

.sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.sort-link .msym { font-size: 14px; opacity: 0.4; }
.table thead th.sorted .sort-link { color: var(--color-accent); }
.table thead th.sorted .msym { opacity: 1; }

/* Whole row is the click target: the anchor covers the row, the rest sits above it. */
.row-link { position: relative; }
.row-target::after { content: ""; position: absolute; inset: 0; }
.row-target { color: inherit; text-decoration: none; }
.due-overdue { color: var(--status-error-text); font-weight: 500; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------- job card detail */
.detail-columns { display: flex; gap: var(--space-4); align-items: flex-start; }
.detail-main { flex-grow: 1; min-width: 0; }
.detail-side { width: 320px; flex-shrink: 0; }

.flow { display: flex; align-items: center; gap: var(--space-1); }
.flow-step { display: flex; align-items: center; gap: var(--space-1); }
.flow-dot { width: 10px; height: 10px; border-radius: var(--radius-pill);
            background: var(--surface-raised); border: 2px solid var(--border-default); }
.flow-done { background: var(--status-success-dot); border-color: var(--status-success-bg); }
.flow-here { background: var(--color-accent); border-color: var(--accent-tint-20); }
.flow-label { font: var(--type-data); color: var(--icon-quiet); white-space: nowrap; }
.flow-label-here { color: var(--color-accent); font-weight: 600; }
.flow-line { width: 40px; height: 1px; background: var(--border-default); margin: 0 6px; }

.note { padding: 12px 14px; border-bottom: 1px solid var(--border-default); }
.note:last-child { border-bottom: none; }
.note-form { display: flex; gap: var(--space-1); align-items: flex-start; margin-top: var(--space-2); }
.note-form textarea { flex-grow: 1; resize: vertical; font: var(--type-data); }

.kv { display: flex; gap: var(--space-2); margin-top: 6px; font: var(--type-data); }
.kv > span:first-child { width: 96px; flex-shrink: 0; color: var(--text-secondary); }

.assignee { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }
.status-form { display: flex; gap: var(--space-1); margin-top: var(--space-1); }
.status-form .field { flex-grow: 1; min-width: 0; }

/* Printed and signed on site, so print is part of the component. */
@media print {
  .topbar, .sidebar, .note-form, .status-form, .btn, .flow-line { display: none !important; }
  .detail-columns { display: block; }
  .detail-side { width: auto; }
  .pill { background: transparent !important; color: #000000 !important; padding: 0; }
  .pill::before { background: #000000 !important; }
  .table td, .table th, .table-container, .card { border-color: #000000 !important; }
  .t-data, .t-body { font-size: 12pt; }
  .table td { font-size: 10pt; }
}