/* Thuto PrintTech Intranet — brand: navy #002154, blue #1565C0 */
:root {
  --navy: #002154;
  --navy-2: #0a3068;
  --navy-3: #13417f;
  --blue: #1565C0;
  --blue-2: #1976d2;
  --blue-soft: #eaf1fb;
  --ink: #1a2333;
  --muted: #5a6577;
  --line: #dbe3ee;
  --bg: #f3f5f8;
  --card: #ffffff;
  --ok: #0d8b58; --ok-bg: #e8f5ee;
  --warn: #a15c00; --warn-bg: #fff5df;
  --danger: #b42318; --danger-bg: #fef0ef;
  --green: #0d8b58; --green-soft: #e8f5ee;
  --orange: #e25813; --orange-soft: #fff0e7;
  --purple: #6e3aa6; --purple-soft: #f4edfb;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(4, 18, 44, .06);
  --shadow-lg: 0 16px 36px rgba(4, 18, 44, .14);
  --maxw: 1180px;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .35rem; color: var(--navy); }
h2 { font-size: 1.12rem; margin: 1.4rem 0 .6rem; color: var(--navy); }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.page-sub { color: var(--muted); margin: 0 0 1.2rem; max-width: 70ch; }

/* ---------- hero banner ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 20px; color: #fff;
  padding: 32px 34px; margin-bottom: 1.2rem;
  background: linear-gradient(120deg, #00122e 0%, #002a63 62%, #1565C0 150%);
  box-shadow: 0 16px 36px rgba(4, 18, 44, .18);
}
.hero::before {
  content: ""; position: absolute; inset: auto -80px -130px auto;
  width: 360px; height: 360px; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .05);
}
.hero::after {
  content: ""; position: absolute; right: 20%; top: -90px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(226, 88, 19, .22), rgba(226, 88, 19, 0) 70%);
}
.hero-copy { position: relative; z-index: 2; max-width: 680px; }
.hero-eyebrow { color: #8fc1f5; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { color: #fff; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; margin: .4rem 0 .5rem; }
.hero p { color: #c3d4ec; margin: 0; font-size: .98rem; max-width: 620px; }
.hero-actions { display: flex; gap: .6rem; margin-top: 1.15rem; flex-wrap: wrap; }
.btn-hero { background: #fff; color: var(--navy); }
.btn-hero:hover { background: var(--blue-soft); }
.btn-hero-ghost { background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .18); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: .5rem 1rem; z-index: 99; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- shell ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: rgba(255,255,255,.9); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 10px rgba(4,18,44,.05); }
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; align-items: center; gap: 1.25rem;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand img { display: block; }
.brand-sub {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--navy); border-radius: 4px; padding: .15rem .45rem;
}
.global-search { flex: 1; display: flex; max-width: 520px; }
.global-search input {
  flex: 1; border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px;
  padding: .5rem .8rem; font-size: .92rem; background: var(--bg);
}
.global-search button {
  border: 1px solid var(--line); background: var(--navy); color: #fff;
  border-radius: 0 8px 8px 0; padding: 0 .9rem; cursor: pointer; font-size: 1rem;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.icon-link { position: relative; font-size: 1.1rem; text-decoration: none; }
.icon-link .pill {
  position: absolute; top: -6px; right: -10px; background: var(--danger); color: #fff;
  font-size: .66rem; font-weight: 700; border-radius: 999px; padding: 0 .35rem; line-height: 1.4;
}
.me { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.me:hover { text-decoration: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
}
.me-name { font-size: .9rem; font-weight: 600; }

.body-row { flex: 1; display: flex; max-width: var(--maxw); margin: 0 auto; width: 100%; gap: 1.5rem; padding: 1.25rem; }
.sidenav {
  width: 234px; flex-shrink: 0; align-self: flex-start; position: sticky; top: 1.25rem;
  background: linear-gradient(180deg, #001233 0%, #002154 54%, #001a44 100%);
  border-radius: 16px; padding: .85rem .65rem; box-shadow: var(--shadow-lg);
}
.sidenav ul { list-style: none; margin: 0 0 .4rem; padding: 0; }
.sidenav a {
  display: block; padding: .55rem .7rem; border-radius: 10px; color: #c6d4ea;
  font-size: .93rem; font-weight: 600; transition: background .15s ease, color .15s ease;
}
.sidenav a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.sidenav a.active { background: #fff; color: var(--navy); box-shadow: 0 7px 20px rgba(0, 0, 0, .22); }
.sidenav-group {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: #8098bd; padding: 1rem .7rem .35rem;
}
.sidenav-logout { padding: .55rem .7rem; margin-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .09); }
.btn-link { border: 0; background: none; color: #9fb2d0; cursor: pointer; font-size: .88rem; padding: 0; }
.btn-link:hover { color: #fff; text-decoration: underline; }

.content { flex: 1; min-width: 0; }
.footer { background: #fff; border-top: 1px solid var(--line); margin-top: 2rem; }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .8rem 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--muted); font-size: .8rem;
}

/* ---------- cards / layout ---------- */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-main-side { grid-template-columns: 2fr 1fr; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; }
.card h2 { margin-top: 0; }
.card + .card { margin-top: 1rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.card-head .more { font-size: .85rem; white-space: nowrap; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; }
.stat { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .95rem 1.05rem; box-shadow: var(--shadow); }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue); }
.stat.green::before { background: var(--green); }
.stat.orange::before { background: var(--orange); }
.stat.red::before { background: var(--danger); }
.stat.purple::before { background: var(--purple); }
.stat .n { font-size: 1.75rem; font-weight: 800; color: var(--navy); line-height: 1.12; letter-spacing: -.02em; }
.stat .l { font-size: .8rem; color: var(--muted); font-weight: 600; }
a.stat { display: block; text-decoration: none; cursor: pointer; }
a.stat:hover, a.stat:focus-visible { border-color: var(--navy); }
a.stat:hover .l, a.stat:focus-visible .l { color: var(--navy); }

/* ---------- lists & tables ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list .meta { font-size: .8rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table.data th {
  text-align: left; background: var(--navy); color: #fff; padding: .55rem .75rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
table.data td { padding: .55rem .75rem; border-top: 1px solid var(--line); vertical-align: top; }
table.data tr:nth-child(even) td { background: #fafbfe; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px;
  padding: .12rem .6rem; white-space: nowrap; letter-spacing: .02em;
}
.badge-draft { background: #eef0f4; color: #4a5568; }
.badge-review { background: var(--warn-bg); color: var(--warn); }
.badge-approved { background: #e5edfb; color: var(--blue); }
.badge-published { background: var(--ok-bg); color: var(--ok); }
.badge-due { background: #fde8d7; color: #b4500a; }
.badge-archived { background: #efe7f5; color: #6b3fa0; }
.badge-important { background: var(--danger-bg); color: var(--danger); }
.badge-neutral { background: var(--blue-soft); color: var(--navy); }

/* ---------- forms & buttons ---------- */
label { display: block; font-size: .85rem; font-weight: 600; margin: .7rem 0 .25rem; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date],
input[type=url], input[type=number], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem;
  font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus, a:focus {
  outline: 3px solid rgba(21, 101, 192, .35); outline-offset: 1px;
}
.btn {
  display: inline-block; border: 0; border-radius: 8px; padding: .55rem 1.1rem;
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: none;
  background: var(--navy); color: #fff;
}
.btn:hover { background: #06316f; text-decoration: none; }
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: var(--danger); }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.field-hint { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.form-narrow { max-width: 560px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 1rem; }
legend { font-size: .85rem; font-weight: 700; color: var(--navy); padding: 0 .35rem; }

/* ---------- flash & empty states ---------- */
.flash { border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; font-size: .92rem; border: 1px solid; }
.flash-success { background: var(--ok-bg); color: var(--ok); border-color: #bfe5d0; }
.flash-error { background: var(--danger-bg); color: var(--danger); border-color: #f2c4c0; }
.flash-info { background: var(--blue-soft); color: var(--navy); border-color: #c9dcf5; }
.empty {
  text-align: center; padding: 2.2rem 1rem; color: var(--muted); font-size: .95rem;
  background: #fff; border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty strong { display: block; color: var(--ink); margin-bottom: .25rem; }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
.crumbs a { color: var(--muted); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- auth pages ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 1.5rem; }
.auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 2rem; }
.auth-card .logo { display: block; margin: 0 auto 1rem; max-width: 240px; }
.auth-card h1 { text-align: center; font-size: 1.15rem; }
.auth-sub { text-align: center; color: var(--muted); font-size: .88rem; margin: 0 0 1rem; }
.auth-card .btn { width: 100%; margin-top: 1.1rem; }
.auth-links { text-align: center; margin-top: 1rem; font-size: .85rem; }
.auth-footer { text-align: center; color: var(--muted); font-size: .75rem; margin-top: 1.4rem; }

/* ---------- policy detail ---------- */
.doc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1.2rem; margin: 1rem 0; }
.doc-meta div .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.doc-meta div .v { font-size: .92rem; font-weight: 600; }
.preview-frame { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.preview-doc {
  padding: 1.5rem 2rem; max-height: 640px; overflow-y: auto; font-size: .92rem;
}
.preview-doc h1, .preview-doc h2, .preview-doc h3 { color: var(--navy); }
.preview-doc table { border-collapse: collapse; margin: .6rem 0; }
.preview-doc td, .preview-doc th { border: 1px solid var(--line); padding: .3rem .5rem; font-size: .85rem; }
.preview-doc img { max-width: 100%; height: auto; }
/* Every one of these documents was written on a Word letterhead, and mammoth carries that
   letterhead into the first paragraph as a 600px image - so each policy opened with a
   full-width logo directly beneath the logo already in the top bar. Only the LEADING
   image is capped: anything further down the document is content, and shrinking a diagram
   to letterhead size would be worse than the problem. */
.preview-doc > p:first-child img, .preview-doc > img:first-child { max-width: 220px; }
.ack-banner {
  background: var(--warn-bg); border: 1px solid #edd9a3; border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1rem; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap;
}
.ack-done { background: var(--ok-bg); border-color: #bfe5d0; }

/* ---------- notifications ---------- */
.notif { display: flex; gap: .8rem; align-items: flex-start; }
.notif.unread { background: var(--blue-soft); margin: 0 -1.25rem; padding: .55rem 1.25rem; }
.notif .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: .5rem; flex-shrink: 0; }
.notif.read .dot { background: transparent; }

/* ---------- progress bars (ack reports) ---------- */
.bar { background: var(--line); border-radius: 999px; height: 10px; overflow: hidden; min-width: 120px; }
.bar > span { display: block; height: 100%; background: var(--ok); }

/* ---------- filters ---------- */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filters > div { min-width: 140px; flex: 0 1 auto; }
.filters label { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .body-row { flex-direction: column; padding: .9rem; }
  .sidenav { width: 100%; position: static; }
  .sidenav ul { display: flex; flex-wrap: wrap; gap: .25rem; }
  .sidenav-group { width: 100%; padding-left: 0; }
  .grid-2, .grid-3, .grid-main-side { grid-template-columns: 1fr; }
  .topbar-inner { flex-wrap: wrap; gap: .6rem; }
  .global-search { order: 3; width: 100%; max-width: none; }
}
@media print {
  .topbar, .sidenav, .footer, .btn, .flash { display: none !important; }
}

/* ============================================================
   TPT-SKIN-START  (appended by feat37/38/39 - safe to remove)
   Portal look and feel, taken from ThutoPrintTechIntranetPortalDemo.html.
   Full-bleed layout, navy sidebar with icons, softer canvas,
   rounder cards, and nothing heavier than weight 600 anywhere.
   ============================================================ */
:root {
  --bg: #f3f5f8;
  --line: #dbe1e8;
  --line-dark: #c8d1da;
  --radius: 16px;
  --shadow: 0 3px 13px rgba(4, 18, 44, .05);
  --shadow-lg: 0 16px 36px rgba(4, 18, 44, .16);
  --maxw: none;
  --skin-pad: clamp(1rem, 2.2vw, 2.25rem);
}

/* ---------- full bleed ---------- */
.topbar-inner, .body-row, .footer-inner { max-width: none; }
.topbar-inner { padding: .65rem var(--skin-pad); }
.footer-inner { padding: .9rem var(--skin-pad); }
.topbar { background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); }
.body-row { padding: 0; gap: 0; align-items: stretch; }
.content { padding: var(--skin-pad) var(--skin-pad) 2rem; }

/* ---------- weight ceiling: nothing heavier than 600 ---------- */
h1, h2, h3, h4, h5, h6,
strong, b, th, dt, label, legend, summary, optgroup,
.btn, .badge, .stat .n, .stat-value, .brand-sub, .sidenav-group,
.me-name, .card-head .more, .more, .btn-link, .crumbs [aria-current],
.eyebrow, .page-head h1, .hero h1, .nav-label { font-weight: 600; }

/* ---------- cards read a little quieter ---------- */
.card h2, .card h3, .card-head h2, .card-head h3 { font-size: 1rem; letter-spacing: -.005em; }
.card-head .more, .more { font-size: .84rem; }
.stat { border-radius: 15px; box-shadow: var(--shadow); padding: .85rem 1rem; }
.stat .n, .stat-value { font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; }
.stat .l { font-size: .79rem; line-height: 1.35; }
.card { border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; }
.card + .card { margin-top: 1.1rem; }
.empty { border-radius: 14px; }
.ack-banner { border-radius: 14px; box-shadow: 0 4px 17px rgba(226, 88, 19, .07); }

/* ---------- sidebar ---------- */
.sidenav {
  width: 286px;
  background: linear-gradient(180deg, #001233 0%, #002154 54%, #001a44 100%);
  border-right: 1px solid rgba(255, 255, 255, .07);
  padding: 1.1rem .85rem 1.6rem;
}
.sidenav ul { margin-bottom: .4rem; }
.sidenav a {
  color: #c6d4ea;
  border-radius: 10px;
  padding: .55rem .7rem;
  margin: 2px 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sidenav a:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: translateX(1px); }
.sidenav a.active { background: #fff; color: var(--ink); box-shadow: 0 7px 22px rgba(0, 0, 0, .22); }
.sidenav a.active:hover { background: #fff; color: var(--ink); transform: none; }
.sidenav-group { color: #7f97bd; padding: 1.1rem .7rem .35rem; }
.sidenav-logout .btn-link { color: #9db4d6; }
.sidenav-logout .btn-link:hover { color: #ffb4a8; }

/* Icons are attached by destination, so no markup changes are needed.
   A link with no rule below simply gets a neutral dot. */
.sidenav a::before {
  content: "\2022";
  width: 1.3em;
  flex: 0 0 auto;
  text-align: center;
  font-size: 1.02em;
  line-height: 1;
  opacity: .9;
}
.sidenav a[href="/"]::before { content: "\1F3E0"; }
.sidenav a[href^="/policies"]::before { content: "\1F4C4"; }
.sidenav a[href^="/resources"]::before { content: "\1F4C1"; }
.sidenav a[href^="/news"]::before { content: "\1F4F0"; }
.sidenav a[href^="/events"]::before { content: "\1F4C5"; }
.sidenav a[href^="/vehicles"]::before { content: "\1F69A"; }
.sidenav a[href^="/forms"]::before { content: "\1F4DD"; }
.sidenav a[href^="/directory"]::before { content: "\1F465"; }
.sidenav a[href="/biz"]::before { content: "\1F4CA"; }
.sidenav a[href^="/biz/customers"]::before { content: "\1F91D"; }
.sidenav a[href^="/biz/leads"]::before { content: "\1F3AF"; }
.sidenav a[href^="/biz/quotes"]::before { content: "\1F4D1"; }
.sidenav a[href^="/biz/orders"]::before { content: "\1F5C2"; }
.sidenav a[href^="/biz/deliveries"]::before { content: "\1F69B"; }
.sidenav a[href^="/biz/inventory"]::before { content: "\1F4E6"; }
.sidenav a[href^="/biz/invoices"]::before { content: "\1F4B3"; }
.sidenav a[href^="/biz/statements"]::before { content: "\1F4C8"; }
.sidenav a[href^="/biz/purchase"]::before { content: "\1F6D2"; }
.sidenav a[href^="/biz/tasks"]::before { content: "\2705"; }
.sidenav a[href="/admin"]::before { content: "\1F512"; }
.sidenav a[href^="/admin/users"]::before { content: "\1F464"; }
.sidenav a[href^="/admin/roles"]::before { content: "\1F511"; }
.sidenav a[href^="/admin/policies"]::before { content: "\1F4DD"; }
.sidenav a[href^="/admin/announcements"]::before { content: "\1F4E3"; }
.sidenav a[href^="/admin/resources"]::before { content: "\1F5C3"; }
.sidenav a[href^="/admin/taxonomy"]::before { content: "\1F3F7"; }
.sidenav a[href^="/admin/acknowledgements"]::before { content: "\270D"; }
.sidenav a[href^="/admin/audit"]::before { content: "\1F50D"; }
.sidenav a[href^="/admin/settings"]::before { content: "\2699"; }
.sidenav a[href^="https://www.thutoprinttech"]::before { content: "\1F310"; }

/* ---------- controls ---------- */
.btn {
  border-radius: 10px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(4, 18, 44, .10); }
.btn:active { transform: none; }
input, select, textarea { border-radius: 9px; }
.global-search input { border-radius: 10px 0 0 10px; }
.global-search button { border-radius: 0 10px 10px 0; }
.avatar { border-radius: 11px; }

/* ---------- narrow screens: the sidebar goes back on top ---------- */
@media (max-width: 1000px) {
  .body-row { flex-direction: column; }
  .sidenav { width: 100%; padding: 1rem var(--skin-pad); }
  .content { padding-top: 1.25rem; }
}
/* TPT-SKIN-END */

/* ============================================================
   TPT-DEPT-START  (appended by feat43 - safe to remove)
   Department workspace cards and the quick-link chips.
   ============================================================ */
.dept-card {
  display: flex; flex-direction: column; min-height: 190px;
  color: inherit; position: relative; overflow: hidden;
}
/* Push the foot to the bottom so every card's lead and counts line up, whatever
   length the description runs to. */
.dept-card .dept-foot { margin-top: auto; }
/* `.card + .card` adds a 1rem top margin for stacked cards; inside a grid that
   pushes every card after the first down by a row-relative amount. */
.dept-card + .dept-card { margin-top: 0; }
.dept-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--line-dark, #c8d1da); }
.dept-card { transition: transform .18s ease, border-color .18s ease; }
.dept-card::after {
  content: ""; position: absolute; right: -28px; bottom: -38px;
  width: 105px; height: 105px; border-radius: 50%; background: var(--blue-soft); opacity: .55;
}
.dept-card > * { position: relative; z-index: 2; }
.dept-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 43px; height: 43px; border-radius: 12px; font-size: 1.25rem;
  background: var(--blue-soft); color: var(--navy);
}
.dept-icon-sm { width: 30px; height: 30px; font-size: .95rem; border-radius: 9px; vertical-align: -6px; }
.dept-orange .dept-icon { background: #fdeee0; color: #b4500a; }
.dept-orange.dept-card::after { background: #fdeee0; }
.dept-green .dept-icon { background: var(--ok-bg); color: var(--ok); }
.dept-green.dept-card::after { background: var(--ok-bg); }
.dept-purple .dept-icon { background: #efe7f5; color: #6b3fa0; }
.dept-purple.dept-card::after { background: #efe7f5; }
.dept-teal .dept-icon { background: #dcefec; color: #0f766e; }
.dept-teal.dept-card::after { background: #dcefec; }
.dept-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--muted);
}
.dept-foot strong { color: var(--blue); font-weight: 600; }
.chip-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .8rem; }
.chip {
  font-size: .72rem; background: #eef2f7; color: #51617a;
  border-radius: 999px; padding: .2rem .55rem; white-space: nowrap;
}
a.chip-link { color: var(--navy); }
a.chip-link:hover { background: var(--blue-soft); text-decoration: none; }
.sidenav a[href^="/departments"]::before { content: "\1F3E2"; }
/* TPT-DEPT-END */
.sidenav a[href^="/biz/production"]::before { content: "\1F5A8"; }
.sidenav a[href^="/biz/tickets"]::before { content: "\1F3AB"; }

/* ---- collapsible sidebar sections --------------------------------------------
   Native <details>/<summary>, so collapsing works with no script at all - the
   only JavaScript involved is remembering the choice between page loads. The
   chevron is drawn here rather than with the browser's default marker because
   the default renders differently in every browser and cannot sit on the right. */
.sidenav-sec > summary { cursor: pointer; user-select: none; position: relative; list-style: none; }
.sidenav-sec > summary::-webkit-details-marker { display: none; }
.sidenav-sec > summary::after {
  content: '\25B8'; position: absolute; right: .8rem;
  transition: transform .15s ease; opacity: .7;
}
.sidenav-sec[open] > summary::after { transform: rotate(90deg); }
.sidenav-sec > summary:hover { color: #fff; }

/* ---- organisation chart ----------------------------------------------------
   Nested lists with the connector lines drawn by ::before/::after on each item.
   No script and no images: this system serves no inline JavaScript at all, and a
   chart is not a good enough reason to make the first exception. The whole thing
   scrolls sideways inside its own box rather than stretching the page, because a
   fourth level would otherwise push the sidebar off a laptop screen. */
.orgchart { overflow-x: auto; padding: .4rem 0 .2rem; }
.orgchart ul { display: flex; justify-content: center; padding-top: 20px; margin: 0; list-style: none; position: relative; }
.orgchart li { list-style: none; position: relative; padding: 20px .5rem 0; text-align: center; }
.orgchart li::before, .orgchart li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  width: 50%; height: 20px; border-top: 2px solid var(--line);
}
.orgchart li::after { right: auto; left: 50%; border-left: 2px solid var(--line); }
.orgchart li:only-child::before, .orgchart li:only-child::after { display: none; }
.orgchart li:only-child { padding-top: 0; }
.orgchart li:first-child::before, .orgchart li:last-child::after { border: 0 none; }
.orgchart li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 5px 0 0; }
.orgchart li:first-child::after { border-radius: 5px 0 0 0; }
.orgchart ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  border-left: 2px solid var(--line); width: 0; height: 20px;
}
.org-box {
  display: inline-block; min-width: 150px; max-width: 210px; padding: .5rem .7rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); text-align: center;
}
.org-box strong { display: block; font-size: .86rem; color: var(--navy); }
.org-role { display: block; font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.org-dept { display: block; font-size: .72rem; color: var(--blue); font-weight: 600; margin-top: .25rem; }
.org-top { background: var(--navy); border-color: var(--navy); }
.org-top strong, .org-top .org-role { color: #fff; }
.org-top .org-dept { color: #9fc4f5; }
/* A post nobody holds. Dashed and pale on purpose: it must not read as a person at a
   glance, because the difference between "we have one" and "we plan to" is the whole
   point of showing it. */
.org-planned { border-style: dashed; border-color: #b9c4d4; background: transparent; box-shadow: none; }
.org-planned strong { color: var(--muted); font-weight: 600; }

/* ============================================================
   Mobile menu (feat14) - on phones/tablets the sidebar collapses
   behind a hamburger in the top bar instead of stacking above the
   page. Desktop is unchanged (the toggle is hidden >900px).
   ============================================================ */
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-toggle {
    order: -1; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 40px; flex: 0 0 auto;
    background: #fff; color: var(--navy);
    border: 1px solid var(--line); border-radius: 10px;
    font-size: 1.3rem; line-height: 1; cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
  .brand { flex: 1 1 auto; }
  .topbar-actions { gap: .55rem; }

  .sidenav {
    display: none; width: 100%; position: static;
    margin: 0 0 .9rem; padding: .7rem; border-radius: 14px;
  }
  body.nav-open .sidenav { display: block; }
  .sidenav ul { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .sidenav-sec, .sidenav-group { width: 100%; }
  .sidenav a { padding: .7rem .8rem; }
  .content { width: 100%; }
}

/* ============================================================
   TPT-SIDESCROLL-START (feat16) - the left menu gets its own
   scroll bar on desktop, so the bottom entries (Inventory,
   Administration) stay reachable even when the page itself is
   short. Applies only above 1000px; the stacked / hamburger
   layouts on smaller screens are unchanged.
   ============================================================ */
@media (min-width: 1001px) {
  .sidenav {
    position: sticky;
    top: 70px;                      /* just below the sticky top bar */
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(198, 212, 234, .45) transparent;
  }
  .sidenav::-webkit-scrollbar { width: 8px; }
  .sidenav::-webkit-scrollbar-track { background: transparent; }
  .sidenav::-webkit-scrollbar-thumb { background: rgba(198, 212, 234, .35); border-radius: 8px; }
  .sidenav::-webkit-scrollbar-thumb:hover { background: rgba(198, 212, 234, .55); }
}
/* TPT-SIDESCROLL-END */

/* New-password checklist (partials/pw-fields.ejs + js/pw-rules.js) */
.pw-rules { list-style: none; margin: .35rem 0 .8rem; padding: 0; font-size: .84rem; color: var(--muted); }
.pw-rules li { padding-left: 1.4rem; position: relative; line-height: 1.6; }
.pw-rules li::before { content: '\25CB'; position: absolute; left: .2rem; }
.pw-rules li.ok { color: #157347; }
.pw-rules li.ok::before { content: '\2713'; font-weight: 700; }
.pw-rules li.bad { color: var(--danger); }
.pw-rules li.bad::before { content: '\2717'; }
.pw-count { color: var(--muted); }
.pw-match { min-height: 1.2em; font-size: .84rem; margin: .3rem 0 .4rem; }
.pw-match.ok { color: #157347; }
.pw-match.bad { color: var(--danger); }
.pw-show { display: flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .86rem; margin: .2rem 0 .4rem; }
.pw-show input { width: auto; margin: 0; }
.pw-tip { font-size: .8rem; color: var(--muted); margin: 0 0 .8rem; }
.pw-block { position: static; margin: 0 0 .8rem; }