/* Direction: Service Center ERP — cool slate paper, deep teal action colour, dense data-first screens */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2f5f6;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #dbe3ea;
  --border-strong: #aab1b1;
  --ink: #1e293b;
  --muted: #5b6b7f;
  --accent: #0f766e;
  --accent-hover: #0d645e;
  --accent-ink: #ffffff;
  --accent-text: #0b6b63;
  --accent-strong: #0e6d65;
  --accent-soft: #d2e3e3;
  --accent-border: #8cbcb9;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d7e7e0;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ebe2da;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #ebdbdc;
  --danger-strong: #b91c1c;
  --chart-1: #0f766e;
  --chart-2: #3186c9;
  --chart-3: #623887;
  --chart-4: #b9566e;
  --chart-5: #6f4101;
  --chart-6: #6a8b29;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius-card: 10px;
  --radius-btn: 7px;
  --radius-input: 7px;
  --x-side: #0e191f;
  --x-side-ink: #b7c4cf;
  --x-side-hover: #1a2a33;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #02110f;
  --surface: #1b2927;
  --surface-2: #0f1d1b;
  --border: #253231;
  --border-strong: #4e5857;
  --ink: #f2f5f6;
  --muted: #929a9a;
  --accent: #0f766e;
  --accent-hover: #338b84;
  --accent-ink: #ffffff;
  --accent-text: #539d98;
  --accent-strong: #539d98;
  --accent-soft: #052724;
  --accent-border: #083e3a;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #062919;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #29200e;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2a1312;
  --danger-strong: #d16969;
  --chart-1: #23827a;
  --chart-2: #4092d7;
  --chart-3: #9469bd;
  --chart-4: #c66279;
  --chart-5: #b36e0b;
  --chart-6: #759737;
}

.side { background: var(--x-side); color: var(--x-side-ink); }
.side a.nav { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: 7px; font-size: .85rem; font-weight: 500; color: var(--x-side-ink); }
.side a.nav:hover { background: var(--x-side-hover); color: var(--x-on-photo); }
.side a.nav.on { background: var(--accent); color: var(--x-on-photo); }
.side .grp { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 1rem .75rem .35rem; opacity: .7; }
.side .brand { color: var(--x-on-photo); }
.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .6rem .75rem; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.stat { border-left: 4px solid var(--accent); }
.sec-h { font-weight: 700; font-size: .95rem; padding-bottom: .6rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.chip-on { background: var(--accent); color: var(--x-on-photo); border-color: var(--accent); }
.perm-table td, .perm-table th { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }
.paper { background: var(--surface); color: var(--ink); margin: 0 auto; padding: 1.5rem; border: 1px solid var(--border); }
.paper-a4 { max-width: 780px; }
.paper-80 { width: 80mm; font-family: var(--font-mono, monospace); font-size: 12px; padding: 8px; }
.paper-80 .tbl { font-size: 11px; }
.paper-80 .tbl th, .paper-80 .tbl td { padding: 3px 2px; }
.photo-tile { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile button { position: absolute; top: 2px; right: 2px; background: rgb(0 0 0 / .6); color: var(--x-on-photo); border-radius: 999px; width: 20px; height: 20px; line-height: 18px; font-size: 12px; }
.bar { height: 8px; border-radius: 99px; background: var(--accent); }
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }
.rise { animation: rise .35s ease both; }
html.reduced-motion .rise { animation: none; }
@media print {
  .no-print, .side, .topbar { display: none !important; }
  body { background: var(--surface) !important; }
  .paper { border: 0; padding: 0; }
  main { padding: 0 !important; }
}