/* Portal-specific layouts. Loaded after /theme.css on every /app page. */

/* ─── Clock card (dashboard) ─── */
.clock-card { text-align: center; padding: 2.5rem 1.5rem; }
.clock-now { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 4.5rem); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.clock-date { color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; margin-top: 0.5rem; }
.clock-state { margin: 1.5rem 0; font-size: 0.95rem; }
.clock-state .dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted); margin-right: 0.5rem; vertical-align: 0.02em; }
.clock-state.on .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(79,157,105,0.18); }
.clock-elapsed { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-light); margin-top: 0.3rem; }

/* ─── Dashboard quick links ─── */
.quick a.card-link h3 { display: flex; align-items: center; gap: 0.5rem; }

/* ─── Policies / forms lists ─── */
.doc-list { display: flex; flex-direction: column; gap: 0.75rem; }
.doc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--dark-surface); border: 0.5px solid var(--line); border-radius: 4px;
  padding: 1.1rem 1.3rem; transition: border-color .2s;
}
.doc-item:hover { border-color: var(--gold); }
.doc-item .doc-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--off-white); }
.doc-item .doc-meta { color: var(--muted); font-size: 0.78rem; margin-top: 0.15rem; }
.doc-cat { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 1.75rem 0 0.5rem; }

/* ─── SOP policy library ─── */
.policy-page { max-width: 1440px; }
.policy-head { max-width: 980px; }
.policy-brand-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(154,122,46,0.10), #ffffff 46%, rgba(46,125,79,0.07));
  box-shadow: var(--card-shadow);
}
.policy-brand-panel p { color: rgba(32,30,24,0.68); margin-top: 0.4rem; font-size: 0.86rem; }
.policy-brand-mark { display: flex; align-items: center; gap: 0.75rem; color: var(--gold-light); font-family: var(--font-display); font-size: 1.35rem; }
.policy-brand-mark img { width: 42px; height: 42px; object-fit: contain; }
.policy-whakatauki { font-family: var(--font-display); font-style: italic; color: var(--off-white); font-size: 1.35rem; white-space: nowrap; }
.policy-brand-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
@media (max-width: 860px) { .policy-brand-actions { align-items: flex-start; } }
.policy-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-top: 1rem; }
.policy-stat {
  border: 0.5px solid var(--line); border-radius: 4px; padding: 1rem;
  background: #ffffff;
}
.policy-stat .label { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.policy-stat .value { font-family: var(--font-display); font-size: 2.15rem; line-height: 1; color: var(--white); margin-top: 0.45rem; }
.policy-toolbar {
  display: grid; grid-template-columns: minmax(260px, 1fr) auto;
  gap: 0.9rem; align-items: end; margin: 1.1rem 0 1.4rem;
}
.policy-toolbar .field { margin-bottom: 0; }
.segmented {
  display: inline-grid; grid-template-columns: repeat(3, minmax(78px, 1fr));
  border: 0.5px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--black);
}
.segmented button {
  min-height: 2.55rem; border: 0; border-right: 0.5px solid var(--line); background: transparent;
  color: var(--muted); font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer;
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover, .segmented button.active { color: var(--on-accent); background: var(--gold); }
.policy-layout { display: grid; grid-template-columns: 220px minmax(360px, 0.95fr) minmax(420px, 1.2fr); gap: 1rem; align-items: start; }
.policy-nav, .policy-results, .policy-reader {
  border: 0.5px solid var(--line); border-radius: 6px; background: #ffffff;
}
.policy-nav { position: sticky; top: 5.5rem; padding: 0.9rem; }
.policy-nav-title { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.65rem; }
.policy-nav button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  background: transparent; border: 0; border-radius: 3px; color: var(--off-white); cursor: pointer;
  padding: 0.55rem 0.6rem; text-align: left; font-family: var(--font-body); font-size: 0.78rem;
}
.policy-nav button b { color: var(--muted); font-weight: 400; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.policy-nav button:hover, .policy-nav button.active { background: rgba(201,168,76,0.12); color: var(--gold-light); }
.policy-picker { border-top: 0.5px solid var(--line); margin-top: 0.9rem; padding-top: 0.9rem; }
.policy-picker label {
  display: block; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.45rem;
}
.policy-picker-meta { display: flex; flex-direction: column; gap: 0.5rem; color: var(--muted); font-size: 0.75rem; margin-top: 0.65rem; }
.policy-picker-meta .pill { align-self: flex-start; }
/* Self-contained sticky panel: fixed header on top, list scrolls beneath it.
   (Previously the header was itself sticky and covered the first list rows,
   making the top documents unselectable.) */
.policy-results {
  position: sticky; top: 5.5rem;
  display: flex; flex-direction: column;
  min-height: 0; max-height: calc(100vh - 7rem); overflow: hidden;
}
.policy-result-head {
  flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 1rem; border-bottom: 0.5px solid var(--line); background: #ffffff;
}
.policy-result-head .doc-cat { margin-top: 0; }
.policy-result-head h2 { font-family: var(--font-display); font-weight: 400; color: var(--off-white); font-size: 1.45rem; }
.policy-doc-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem; overflow: auto; }
.policy-doc {
  width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem;
  border: 0.5px solid var(--line-soft); border-radius: 4px; background: var(--dark-surface);
  color: var(--off-white); padding: 0.85rem; cursor: pointer; text-align: left; transition: border-color .16s, background .16s;
}
.policy-doc:hover, .policy-doc.active { border-color: var(--gold); background: rgba(201,168,76,0.08); }
.policy-doc .doc-id { grid-row: span 3; width: 5.8rem; color: var(--gold-light); font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 500; }
.policy-doc .doc-title { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.15; }
.policy-doc .doc-summary { color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
.doc-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.25rem; }
.policy-empty { padding: 1rem; color: var(--muted); }
.policy-reader {
  position: sticky; top: 5.5rem; min-height: 680px; max-height: calc(100vh - 7rem);
  overflow: auto;
}
.reader-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.25rem; border-bottom: 0.5px solid var(--line); background: #ffffff;
}
.reader-head .doc-cat { margin-top: 0; }
.reader-head h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; color: var(--off-white); font-size: 1.8rem; }
.reader-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; justify-content: flex-end; }
.reader-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.65rem; }
.reader-summary { color: rgba(32,30,24,0.66); border-bottom: 0.5px solid var(--line-soft); padding: 0.9rem 1.25rem; font-size: 0.9rem; }
.reader-loading, .reader-empty { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; color: var(--muted); text-align: center; padding: 2rem; }
.reader-empty h2 { font-family: var(--font-display); font-weight: 400; color: var(--gold-light); font-size: 2rem; }
.markdown-body { padding: 0.4rem 1.25rem 1.5rem; color: var(--off-white); }
.markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5 {
  font-family: var(--font-display); font-weight: 500; color: var(--gold-light); line-height: 1.15;
  margin: 1.3rem 0 0.55rem;
}
.markdown-body h2 { font-size: 1.55rem; }
.markdown-body h3 { font-size: 1.3rem; }
.markdown-body h4, .markdown-body h5 { font-size: 1.1rem; color: var(--off-white); }
.markdown-body p, .markdown-body li { font-size: 0.9rem; line-height: 1.65; color: rgba(32,30,24,0.78); }
.markdown-body p { margin: 0.7rem 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.25rem; margin: 0.65rem 0 0.95rem; }
.markdown-body li + li { margin-top: 0.35rem; }
/* Inline code = a subtle monospace literal (a Toniq code, F-key, path, email) —
   NOT a bordered pill/button. */
.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(32,30,24,0.05); border: 0; border-radius: 2px;
  padding: 0 0.15em; color: var(--gold-light); font-size: 0.86em; white-space: nowrap;
}
.markdown-body pre { overflow: auto; background: var(--black); border: 0.5px solid var(--line); border-radius: 4px; padding: 1rem; margin: 1rem 0; }
.markdown-body pre code { white-space: pre; }
.markdown-body hr { border: 0; border-top: 0.5px solid var(--line); margin: 1.4rem 0; }
/* Tables scroll horizontally when wide; cells wrap on WORDS (never mid-word) and
   keep a legible minimum width so 15–31-column log grids stay readable. */
.md-table-wrap { overflow-x: auto; border: 0.5px solid var(--line); border-radius: 4px; margin: 0.9rem 0 1.2rem; }
.markdown-body table { min-width: 100%; width: auto; border-collapse: collapse; font-size: 0.82rem; }
.markdown-body th, .markdown-body td { border-bottom: 0.5px solid var(--line-soft); padding: 0.55rem 0.65rem; vertical-align: top; text-align: left; min-width: 4rem; overflow-wrap: normal; word-break: normal; }
.markdown-body th { color: var(--gold-light); background: rgba(201,168,76,0.08); font-weight: 500; }
.fill-grid td { height: 1.9em; }
.needs-token {
  display: inline-block; border: 0.5px solid rgba(201,168,76,0.5); border-radius: 999px;
  padding: 0.02rem 0.42rem; color: var(--gold-light); font-size: 0.75em; letter-spacing: 0.04em;
}

/* ─── Kiosk ─── */
.kiosk-shell { max-width: 760px; margin: 0 auto; }
.kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.kiosk-tile {
  background: var(--dark-surface); border: 0.5px solid var(--line); border-radius: 6px;
  padding: 1.3rem 1rem; text-align: center; cursor: pointer; transition: all .15s;
}
.kiosk-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.kiosk-tile .nm { font-family: var(--font-display); font-size: 1.25rem; color: var(--off-white); }
.kiosk-tile.on { border-color: var(--ok); }
.kiosk-tile .st { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }
.kiosk-tile.on .st { color: var(--ok); }

.pinpad { max-width: 320px; margin: 0 auto; text-align: center; }
.pin-display { font-family: var(--font-display); font-size: 2.6rem; letter-spacing: 0.4em; height: 3.2rem; color: var(--gold-light); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1rem; }
.pin-key {
  font-family: var(--font-body); font-size: 1.5rem; padding: 1rem 0; border-radius: 6px;
  background: var(--charcoal); border: 0.5px solid var(--line); color: var(--white); cursor: pointer; transition: all .12s;
}
.pin-key:hover { border-color: var(--gold); }
.pin-key:active { background: var(--gold); color: var(--on-accent); }

/* ─── Filters bar (admin / timesheet) ─── */
.filters { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.5rem; }
.filters .field { margin: 0; }
.filters .field label { margin-bottom: 0.2rem; }

/* ─── Modal ─── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal { background: var(--charcoal); border: 0.5px solid var(--gold); border-radius: 6px; padding: 1.75rem; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; }
.modal h3 { font-family: var(--font-display); color: var(--gold-light); font-size: 1.5rem; margin-bottom: 1rem; }

@media (max-width: 1180px) {
  .policy-layout { grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr); }
  .policy-nav { position: static; grid-column: 1 / -1; }
  #policy-nav-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.35rem; }
}

@media (max-width: 860px) {
  .policy-brand-panel { align-items: flex-start; flex-direction: column; }
  .policy-whakatauki { white-space: normal; }
  .policy-stats { grid-template-columns: repeat(2, 1fr); }
  .policy-toolbar { grid-template-columns: 1fr; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-results { position: static; min-height: 0; max-height: none; overflow: visible; }
  .policy-doc-list { max-height: 70vh; }
  .policy-reader { position: static; min-height: 0; max-height: none; }
  .reader-head { position: static; flex-direction: column; }
}

@media (max-width: 520px) {
  .policy-stats { grid-template-columns: 1fr; }
  .policy-doc { grid-template-columns: 1fr; }
  .policy-doc .doc-id { grid-row: auto; width: auto; }
  .segmented { grid-template-columns: 1fr; }
  .segmented button { border-right: 0; border-bottom: 0.5px solid var(--line); }
  .segmented button:last-child { border-bottom: 0; }
}

/* ─── Small button size + result-head actions ─── */
.btn.sm { font-size: 0.62rem; padding: 0.5rem 1rem; letter-spacing: 0.12em; }
.policy-result-actions { display: flex; align-items: center; gap: 0.6rem; }

/* ─── Editor availability status (brand panel) ─── */
.policy-editor-status { font-size: 0.76rem; color: rgba(32,30,24,0.72); margin-top: 0.55rem; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.policy-editor-status code { background: rgba(32,30,24,0.08); border: 0.5px solid var(--line-soft); border-radius: 3px; padding: 0.02rem 0.3rem; color: var(--gold-light); font-size: 0.9em; }
.conn-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; background: var(--muted); flex: none; }
.conn-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(79,157,105,0.2); }
.conn-dot.off { background: var(--danger); }
.linklike { background: none; border: 0; color: var(--gold-light); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font: inherit; padding: 0; }
.linklike:hover { color: var(--gold); }

/* ─── Reader: on-this-page TOC, blockquotes, back-to-top ─── */
.reader-toc { margin: 0.7rem 1.25rem 0; padding: 0.75rem 0.95rem; border: 0.5px solid var(--line-soft); border-left: 2px solid var(--gold); border-radius: 0 4px 4px 0; background: rgba(201,168,76,0.05); }
.reader-toc-title, .ed-preview-head { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.reader-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.reader-toc li.lvl-3 { padding-left: 1rem; }
.reader-toc a { color: rgba(32,30,24,0.7); font-size: 0.8rem; display: block; padding: 0.18rem 0.35rem; border-radius: 3px; border-left: 2px solid transparent; margin-left: -0.35rem; }
.reader-toc a:hover { color: var(--gold-light); background: rgba(201,168,76,0.06); }
.reader-toc a.active { color: var(--gold-light); border-left-color: var(--gold); background: rgba(201,168,76,0.1); }
.markdown-body :is(h2, h3, h4, h5) { scroll-margin-top: 4.75rem; }
.markdown-body blockquote { margin: 0.95rem 0; padding: 0.6rem 1rem; border-left: 2px solid var(--gold); background: rgba(201,168,76,0.06); border-radius: 0 4px 4px 0; }
.markdown-body blockquote p { margin: 0.3rem 0; color: rgba(32,30,24,0.82); }
.markdown-body blockquote p:first-child { margin-top: 0; }
.markdown-body blockquote p:last-child { margin-bottom: 0; }
.markdown-body em { font-style: italic; color: var(--off-white); }
.markdown-body a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }
.markdown-body a:hover { color: var(--gold); }
.reader-top {
  position: sticky; bottom: 1rem; margin: 0 1.1rem 1rem auto; display: block; width: fit-content;
  background: var(--charcoal); border: 0.5px solid var(--gold); color: var(--gold-light);
  border-radius: 999px; padding: 0.42rem 0.95rem; font-family: var(--font-body); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s, transform .2s;
}
.reader-top.show { opacity: 1; pointer-events: auto; transform: none; }
.reader-top:hover { background: var(--gold); color: var(--on-accent); }

/* ─── Plain document reader ───────────────────────────────────────────────
   Render the selected SOP as an ordinary light "paper" document rather than a
   heavily themed panel. Scoped to .policy-reader so the rest of the portal
   keeps the dark/gold theme. Re-maps the theme tokens to a neutral palette and
   overrides the few hard-coded colours in the reader/markdown rules above. */
.policy-reader {
  --off-white: #202020; --white: #111111; --gold: #6f6f6f; --gold-light: #1a1a1a;
  --muted: #6b6b6b; --line: #d8d8d8; --line-soft: #e6e6e6; --charcoal: #efefef; --black: #f5f5f3;
  background: #ffffff; color: #202020; border: 1px solid #e0e0e0;
}
.policy-reader .reader-head { background: #ffffff; border-bottom: 1px solid #e4e4e4; }
.policy-reader .reader-head h2 { color: #161616; }
.policy-reader .doc-cat { color: #7a7a7a; }
.policy-reader .reader-summary { color: #444; background: #fafafa; border-bottom: 1px solid #eee; }
.policy-reader .reader-toc { background: #fafafa; border-color: #e6e6e6; border-left-color: #bcbcbc; }
.policy-reader .reader-toc-title { color: #777; }
.policy-reader .reader-toc a { color: #555; }
.policy-reader .reader-toc a:hover, .policy-reader .reader-toc a.active { color: #111; background: #ededed; border-left-color: #999; }
.policy-reader .markdown-body { color: #262626; }
.policy-reader .markdown-body :is(h2, h3, h4, h5) { font-family: var(--font-body); font-weight: 600; color: #161616; }
.policy-reader .markdown-body h2 { font-size: 1.28rem; border-bottom: 1px solid #ececec; padding-bottom: 0.3rem; }
.policy-reader .markdown-body h3 { font-size: 1.1rem; }
.policy-reader .markdown-body h4, .policy-reader .markdown-body h5 { font-size: 0.98rem; }
.policy-reader .markdown-body p, .policy-reader .markdown-body li { color: #333; }
.policy-reader .markdown-body em { color: #444; }
.policy-reader .markdown-body a { color: #1a5276; }
.policy-reader .markdown-body a:hover { color: #0d3c5e; }
/* Codes/paths/F-keys as quiet monospace literals on paper — no grey button box. */
.policy-reader .markdown-body code { background: transparent; border: 0; color: #33475b; padding: 0; }
.policy-reader .markdown-body pre { background: #f6f6f6; border-color: #e0e0e0; }
.policy-reader .markdown-body hr { border-top-color: #e4e4e4; }
.policy-reader .md-table-wrap { border-color: #dcdcdc; }
.policy-reader .markdown-body th { color: #222; background: #f2f2f2; }
.policy-reader .markdown-body th, .policy-reader .markdown-body td { border-bottom-color: #e4e4e4; }
.policy-reader .markdown-body blockquote { background: #f7f7f5; border-left-color: #bcbcbc; }
.policy-reader .markdown-body blockquote p { color: #444; }
.policy-reader .reader-head .pill { color: #555; border-color: #cfcfcf; background: #fafafa; }
.policy-reader .reader-head .pill.live { color: #1a5276; border-color: #a6c3d4; }
.policy-reader .reader-top { background: #333; border-color: #333; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.policy-reader .reader-top:hover { background: #111; color: #fff; }

/* ─── Full-screen policy editor ─── */
.policy-editor-overlay { position: fixed; inset: 0; z-index: 600; background: rgba(8,8,8,0.86); backdrop-filter: blur(6px); display: flex; padding: 1.2rem; }
.editor-shell { margin: auto; width: min(1400px, 100%); max-height: calc(100vh - 2.4rem); display: flex; flex-direction: column; background: var(--charcoal); border: 0.5px solid var(--gold); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.6); }
.editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 0.5px solid var(--line); background: #F7F5EF; flex-wrap: wrap; }
.editor-bar-left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.editor-kicker { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.editor-doc-id { color: var(--gold-light); letter-spacing: 0.08em; font-size: 0.95rem; }
.editor-conn { font-size: 0.66rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; letter-spacing: 0.04em; }
.editor-conn.ok { color: var(--ok); }
.editor-conn.off { color: var(--warn-light); }
.editor-bar-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.segmented.ed-view-toggle { grid-template-columns: repeat(3, minmax(56px, 1fr)); }
.segmented.ed-view-toggle button { min-height: 2.1rem; }
.editor-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.editor-body[data-view="edit"] { grid-template-columns: 1fr; }
.editor-body[data-view="edit"] .editor-preview { display: none; }
.editor-body[data-view="preview"] { grid-template-columns: 1fr; }
.editor-body[data-view="preview"] .editor-form { display: none; }
.editor-pane { min-height: 0; overflow: auto; padding: 1rem 1.15rem; }
.editor-form { border-right: 0.5px solid var(--line); display: flex; flex-direction: column; }
.editor-preview { background: #FAF9F5; }
.ed-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem 0.9rem; margin-bottom: 0.85rem; }
.ed-field { margin: 0; display: flex; flex-direction: column; }
.ed-field-wide { grid-column: 1 / -1; }
.ed-field label { font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.ed-optional { text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 0.85em; }
.ed-hint { font-size: 0.68rem; margin-top: 0.25rem; color: var(--muted); }
.ed-hint.warn { color: var(--warn-light); }
.ed-hint.ok { color: var(--ok); }
.segmented.ed-type { grid-template-columns: repeat(2, 1fr); }

/* Managed dropdowns (Category / Status / Review) — add/remove options inline */
select.ed-select { cursor: pointer; }
.ed-opt-add { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.ed-opt-add[hidden] { display: none; }
.ed-opt-add .input { flex: 1; }
.ed-opt-add .btn.sm { padding: 0.4rem 0.7rem; font-size: 0.58rem; white-space: nowrap; }
.ed-opt-remove { align-self: flex-start; margin-top: 0.3rem; font-size: 0.62rem; letter-spacing: 0.04em; color: var(--muted); }
.ed-opt-remove:hover { color: var(--warn-light); }
.segmented.ed-type button { min-height: 2.35rem; }
.ed-summary { resize: vertical; font-family: var(--font-body); min-height: 2.8rem; }
.ed-md-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.5rem 0 0.45rem; flex-wrap: wrap; }
.ed-md-head label { font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ed-md-toolbar { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.ed-md-toolbar button { background: var(--black); border: 0.5px solid var(--line); color: var(--off-white); border-radius: 3px; padding: 0.3rem 0.55rem; font-size: 0.7rem; cursor: pointer; font-family: var(--font-body); line-height: 1; }
.ed-md-toolbar button:hover { border-color: var(--gold); color: var(--gold-light); }
.ed-textarea { flex: 1; min-height: 340px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; tab-size: 2; }
.editor-preview .markdown-body { padding: 0; }

@media (max-width: 900px) {
  .policy-editor-overlay { padding: 0; }
  .editor-shell { max-height: 100vh; border-radius: 0; border: 0; }
  .editor-body[data-view="split"] { grid-template-columns: 1fr; }
  .editor-body[data-view="split"] .editor-preview { display: none; }
  .ed-meta { grid-template-columns: 1fr; }
  .editor-form { border-right: 0; }
}

/* ─── Forms: landing tiles ────────────────────────────────────────────────*/
.form-group { margin-bottom: 2rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.85rem; margin-top: 0.6rem; }
.form-tile {
  display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.15rem;
  background: var(--dark-surface); border: 0.5px solid var(--line); border-radius: 6px;
  color: var(--off-white); transition: border-color .16s, transform .16s;
}
.form-tile:hover { border-color: var(--gold); transform: translateY(-2px); color: var(--off-white); }
.form-tile-title { font-family: var(--font-display); font-size: 1.18rem; color: var(--gold-light); line-height: 1.15; }
.form-tile-meta { color: var(--muted); font-size: 0.78rem; line-height: 1.4; flex: 1; }
.form-tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.35rem; }
.form-tile-foot .arrow { color: var(--gold); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.back-link { display: inline-block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.back-link:hover { color: var(--gold-light); }

/* ─── Fillable form ───────────────────────────────────────────────────────*/
.fillform-wrap { max-width: 780px; }
.fillform { margin-top: 1.25rem; }
.ff-head { margin-bottom: 1rem; }
.ff-section { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-light); font-weight: 500; margin: 1.6rem 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 0.5px solid var(--line-soft); }
.ff-static { color: var(--muted); font-size: 0.82rem; }
.ff-help { color: var(--muted); font-size: 0.72rem; margin-bottom: 0.35rem; }
.field label.req::after { content: " *"; color: var(--gold); }
.ff-radios, .ff-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.35rem; }
.ff-radio, .ff-check { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.85rem; color: var(--off-white); cursor: pointer; }
.ff-radio input, .ff-check input { margin-top: 0.15rem; accent-color: var(--gold); }
.ff-consent { background: rgba(201,168,76,0.06); border: 0.5px solid var(--line-soft); border-radius: 4px; padding: 0.75rem 0.85rem; }
.ff-success { background: rgba(79,157,105,0.12); border: 0.5px solid var(--ok); color: var(--ok); border-radius: 4px; padding: 0.75rem 0.9rem; margin-bottom: 1.25rem; }
.ff-readonly { border-top: 0.5px solid var(--line-soft); }
.ff-ro { display: grid; grid-template-columns: 240px 1fr; gap: 0.5rem 1.25rem; padding: 0.6rem 0; border-bottom: 0.5px solid var(--line-soft); }
.ff-ro-label { color: var(--muted); font-size: 0.78rem; }
.ff-ro-val { color: var(--off-white); font-size: 0.9rem; white-space: pre-wrap; }

/* ─── Print-visibility helpers (screen defaults) ─────────────────────────── */
.print-only { display: none; }

@media (max-width: 560px) {
  .ff-ro { grid-template-columns: 1fr; gap: 0.15rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ═══ PRINT ═══════════════════════════════════════════════════════════════
   Plain, professional output for SOPs and filled forms. */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  @page landscape { size: A4 landscape; margin: 10mm 12mm; }
  html, body {
    background: #fff !important; color: #111 !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  }
  body * {
    color: #111 !important;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    text-shadow: none !important;
  }
  .koru-bg, .pnav, .pfoot, .no-print,
  .page-head, .policy-brand-panel, .policy-stats, .policy-toolbar,
  .policy-nav, .policy-results, .reader-actions, .policy-editor-overlay, .reader-toc,
  .reader-top, .reader-empty, .reader-loading { display: none !important; }
  .print-only { display: block; }
  .wrap, .policy-page, .fillform-wrap { padding: 0; margin: 0; max-width: none; }

  /* Policy / SOP reader */
  .policy-layout { display: block; }
  .policy-reader {
    position: static; max-height: none; min-height: 0; overflow: visible;
    border: 0; background: #fff;
  }
  .reader-head {
    position: static; background: #fff; border-bottom: 1px solid #999;
    padding: 0 0 8mm;
  }
  .reader-head .pill { display: none; }
  .reader-head h2, .policy-reader .markdown-body h2,
  .policy-reader .markdown-body h3, .policy-reader .markdown-body h4,
  .policy-reader .markdown-body h5 {
    color: #111; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700; font-style: normal; letter-spacing: 0; text-transform: none;
    line-height: 1.2; break-after: avoid-page; page-break-after: avoid;
    break-inside: avoid; page-break-inside: avoid;
  }
  .reader-head h2, .policy-reader .markdown-body h2 { font-size: 13pt; }
  .policy-reader .markdown-body h2 { border-bottom: 0; padding-bottom: 0; }
  .policy-reader .markdown-body h3 { font-size: 11.5pt; }
  .policy-reader .markdown-body h4, .policy-reader .markdown-body h5 { font-size: 10pt; }
  .doc-cat {
    color: #333 !important; font-size: 8pt; font-weight: 600;
    letter-spacing: 0; text-transform: none;
  }
  .reader-summary, .policy-reader .markdown-body p, .policy-reader .markdown-body li {
    color: #111; font-size: 10pt; line-height: 1.4;
  }
  .pill { border-color: #999; color: #111; }
  .policy-reader .reader-summary { padding: 5mm 0; border-bottom: 1px solid #ddd; background: #fff; }
  .markdown-body { padding: 0; color: #111; }
  .markdown-body :is(h2, h3, h4, h5) + :is(p, ul, ol, blockquote, .md-table-wrap, section) {
    break-before: avoid-page; page-break-before: avoid;
  }
  .markdown-body :is(p, ul, ol, blockquote) {
    break-inside: avoid-page; page-break-inside: avoid;
  }
  .markdown-body code { color: #111; border: 0; background: transparent; padding: 0; white-space: nowrap; }
  .policy-reader .markdown-body pre { background: #fff; border: 0.6pt solid #666; white-space: pre-wrap; word-break: break-word; }
  .policy-reader .markdown-body blockquote { background: #fff; border-left: 2px solid #666; border-radius: 0; }
  .md-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .markdown-body table {
    break-inside: auto; width: 100%; min-width: 0; border-collapse: collapse;
    table-layout: fixed; font-size: 9.5pt;
  }
  .markdown-body thead { display: table-header-group; }
  .markdown-body tfoot { display: table-footer-group; }
  .markdown-body th, .markdown-body td { min-width: 0; }
  .markdown-body .wide-table table { font-size: 8.5pt; }
  .markdown-body tr { break-inside: avoid; }
  .policy-reader .markdown-body th, .policy-reader .markdown-body td {
    border: 0.6pt solid #666; padding: 4pt 5pt; min-width: 0;
    font-size: inherit; vertical-align: top; overflow-wrap: break-word;
    word-break: normal; hyphens: none;
  }
  .policy-reader .markdown-body th { color: #000; background: #eee !important; font-weight: 700; }
  .wide-table th, .wide-table td { padding: 3pt 4pt; line-height: 1.25; }
  .write-grid td { height: 8mm; }
  .wide-table.write-grid table { font-size: 7.8pt; }
  .wide-table.write-grid td { height: 8.5mm; }
  /* Wide grids: the first column carries the label (task, month, product) —
     give it real width so "Month"/"Vacuum shop area" don't letter-wrap in the
     equal-width fixed layout. */
  .wide-table th:first-child, .wide-table td:first-child { width: 14%; }
  .day-grid table { font-size: 7.4pt; }
  .day-grid th:first-child, .day-grid td:first-child {
    width: 42mm; text-align: left; overflow-wrap: normal; word-break: normal;
  }
  .day-grid th:not(:first-child), .day-grid td:not(:first-child) {
    text-align: center; padding-left: 1pt; padding-right: 1pt;
  }
  .day-grid td { height: 18mm; }
  .month-grid table { font-size: 7.2pt; }
  .month-grid th:first-child, .month-grid td:first-child {
    width: 18mm; text-align: left; overflow-wrap: normal; word-break: normal;
  }
  .month-grid th:not(:first-child), .month-grid td:not(:first-child) {
    text-align: center; padding-left: 1pt; padding-right: 1pt;
  }
  .month-grid td { height: 9.5mm; }

  /* A wide log/register sheet prints on its own LANDSCAPE page so the grid is
     usable in a binder instead of being crammed into portrait. The reader adds
     .landscape-sheet around such tables (Form/log docs with many columns). */
  section.landscape-sheet {
    page: landscape; break-before: page; padding: 0;
  }
  .policy-reader .markdown-body section.landscape-sheet > h3 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12pt; font-weight: 700; font-style: normal;
    letter-spacing: 0; text-transform: none; margin: 0 0 3mm;
  }
  .policy-reader .markdown-body section.landscape-sheet > p,
  .policy-reader .markdown-body section.landscape-sheet > blockquote { margin: 0 0 3mm; }
  .markdown-body p, .markdown-body li { orphans: 2; widows: 2; }
  .markdown-body img { max-width: 100%; }

  /* Print-only document header (logo + title) shared by forms & the SOP footer */
  .print-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border-bottom: 2px solid #111; padding-bottom: 4mm; margin-bottom: 6mm;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #111; font-style: normal;
  }
  .print-brand { display: flex; align-items: center; gap: 0.6rem; }
  .print-brand img { width: 42px; height: 42px; object-fit: contain; }
  .pb-name { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: 13pt; color: #111; font-style: normal; }
  .pb-sub { font-size: 8pt; color: #333 !important; font-style: normal; }
  .print-doc { text-align: right; }
  .pd-title { font-weight: 700; font-size: 10pt; color: #111; font-style: normal; }
  .pd-meta { font-size: 8pt; color: #333 !important; font-style: normal; }

  /* Filled form print */
  .ff-head, .ff-success { display: none !important; }
  .ff-readonly { border: 0; }
  .ff-ro { grid-template-columns: 240px 1fr; border-bottom: 1px solid #ddd; color: #111; }
  .ff-ro-label { color: #444; }
  .ff-ro-val { color: #111; }
  .ff-section { color: #111; border-color: #999; }
  .ff-signblock { display: flex; gap: 20mm; margin-top: 12mm; }
  .ff-sigline { flex: 1; border-top: 1px solid #111; padding-top: 2mm; font-size: 0.75rem; color: #333; }
  .ff-print-foot {
    margin-top: 10mm; padding-top: 3mm; border-top: 1px solid #999;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 8pt; font-style: normal; color: #111; text-align: center;
  }
}

/* ═══ SCHEDULING, LEAVE & APPROVALS ═══════════════════════════════════════
   Self-service timesheets, balance cards, weekly roster grid and manager
   inbox. These layouts stay dark/gold and collapse to single-column cards. */
.nav-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem;
  margin-left: 0.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--gold); color: var(--on-accent);
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0;
}
.page-head-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.page-head-actions .lead { max-width: 64ch; }
.table-actions { display: flex; align-items: center; gap: 0.45rem; }
.status-note { display: block; margin-top: 0.3rem; color: var(--gold-light); font-size: 0.67rem; white-space: normal; }
.modal-lead { color: var(--muted); font-size: 0.8rem; margin: -0.45rem 0 1.1rem; }
.break-hint {
  margin: -0.2rem 0 1rem; padding: 0.65rem 0.75rem; border: 0.5px solid var(--line-soft); border-radius: 4px;
  background: rgba(201,168,76,0.06); color: var(--gold-light); font-size: 0.75rem; line-height: 1.45;
}
.break-hint.warn, .shift-hint.warn { border-color: rgba(192,86,63,0.55); color: var(--danger); }

/* Leave balances and request form */
.balance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.balance-card { position: relative; overflow: hidden; }
.balance-card::after { content: ''; position: absolute; right: -2rem; bottom: -3.5rem; width: 8rem; height: 8rem; border: 1px solid var(--line); border-radius: 50%; }
.balance-label { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; }
.balance-value { position: relative; z-index: 1; margin-top: 0.45rem; font-family: var(--font-display); font-size: 2.35rem; color: var(--white); line-height: 1; }
.balance-value small { color: var(--gold-light); font-family: var(--font-body); font-size: 0.8rem; }
.balance-sub { position: relative; z-index: 1; margin-top: 0.55rem; color: var(--muted); font-size: 0.72rem; }
.leave-layout { display: grid; grid-template-columns: minmax(290px, 0.72fr) minmax(520px, 1.4fr); gap: 1.25rem; align-items: start; }
.form-note { min-height: 2.8rem; margin: -0.45rem 0 1rem; color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; }
.section-head h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--off-white); }
.minimum-note { border-top: 0.5px solid var(--line); padding-top: 1rem; color: var(--muted); font-size: 0.75rem; line-height: 1.6; }
.minimum-note strong { color: var(--gold-light); font-weight: 400; }

/* Week controls and staff day cards */
.schedule-wrap { max-width: 1500px; }
.week-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.9rem 1rem; }
.week-label { color: var(--off-white); font-family: var(--font-display); font-size: 1.35rem; text-align: center; }
.week-legend { display: flex; justify-content: flex-end; gap: 0.45rem; }
.day-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 0.85rem; }
.day-card { min-height: 210px; border: 0.5px solid var(--line); border-radius: 5px; background: var(--dark-surface); overflow: hidden; }
.day-card.is-public-holiday { border-color: rgba(201,168,76,0.58); box-shadow: inset 0 3px 0 rgba(201,168,76,0.72); }
.day-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1rem; border-bottom: 0.5px solid var(--line-soft); }
.day-card-head strong { display: block; color: var(--off-white); font-family: var(--font-display); font-size: 1.18rem; font-weight: 500; }
.day-card-head > div > span:not(.pill) { display: block; color: var(--muted); font-size: 0.63rem; }
.day-markers { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.staff-shift-list { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.85rem; }
.staff-shift { border-left: 2px solid var(--gold); padding: 0.2rem 0 0.2rem 0.75rem; }
.staff-shift-time { color: var(--white); font-size: 1rem; font-variant-numeric: tabular-nums; }
.staff-shift-role { color: var(--gold-light); font-size: 0.78rem; }
.shift-meta { color: var(--muted); font-size: 0.63rem; line-height: 1.35; }
.shift-hint { display: block; margin-top: 0.25rem; color: rgba(32,30,24,0.55); font-size: 0.62rem; line-height: 1.35; white-space: normal; }
.day-empty { padding: 1.4rem 0.4rem; color: var(--muted); font-size: 0.78rem; text-align: center; }

/* Manager weekly roster grid */
.roster-scroll { overflow: auto; max-height: calc(100vh - 18rem); border: 0.5px solid var(--line); border-radius: 5px; background: var(--dark-surface); }
.roster-grid { width: 100%; min-width: 1190px; border-collapse: separate; border-spacing: 0; font-size: 0.75rem; }
.roster-grid th, .roster-grid td { border-right: 0.5px solid var(--line-soft); border-bottom: 0.5px solid var(--line-soft); vertical-align: top; }
.roster-grid thead th { position: sticky; top: 0; z-index: 4; min-width: 140px; padding: 0.7rem 0.55rem; background: var(--charcoal); color: var(--muted); font-size: 0.57rem; font-weight: 500; letter-spacing: 0.11em; text-align: center; text-transform: uppercase; }
.roster-grid thead th span { display: block; margin-top: 0.2rem; color: var(--gold-light); font-size: 0.52rem; letter-spacing: 0; text-transform: none; }
.roster-grid .roster-name { position: sticky; left: 0; z-index: 3; width: 150px; min-width: 150px; padding: 0.75rem; background: var(--charcoal); text-align: left; }
.roster-grid thead .roster-name { z-index: 6; }
.roster-name strong { display: block; color: var(--off-white); font-size: 0.78rem; font-weight: 400; }
.roster-name span { display: block; color: var(--muted); font-size: 0.58rem; font-weight: 300; }
.roster-grid .roster-total { position: sticky; right: 0; z-index: 3; min-width: 72px; width: 72px; padding: 0.75rem 0.45rem; background: var(--charcoal); color: var(--gold-light); text-align: center; font-variant-numeric: tabular-nums; }
.roster-grid thead .roster-total { z-index: 6; }
.roster-grid .is-public-holiday { background-image: linear-gradient(rgba(201,168,76,0.055), rgba(201,168,76,0.055)); }
.roster-cell { width: 140px; min-width: 140px; height: 132px; padding: 0.38rem; background-color: #FCFBF9; cursor: pointer; }
.roster-cell:hover, .roster-cell:focus { outline: none; background-color: rgba(201,168,76,0.07); }
.add-shift-cue { display: block; padding: 0.65rem 0.25rem; color: var(--gold-dark); font-size: 0.62rem; text-align: center; }
.leave-marker { display: block; margin-bottom: 0.35rem; padding: 0.2rem 0.35rem; border: 0.5px solid rgba(79,157,105,0.44); border-radius: 3px; color: var(--ok); font-size: 0.57rem; line-height: 1.3; text-align: center; }
.shift-block { display: block; width: 100%; margin-bottom: 0.35rem; padding: 0.42rem; border: 0.5px solid var(--line); border-left: 2px solid var(--gold); border-radius: 3px; background: var(--black); color: var(--off-white); cursor: pointer; font-family: var(--font-body); text-align: left; }
.shift-block:hover { border-color: var(--gold); }
.shift-block.draft { border-left-color: var(--gold); background: rgba(201,168,76,0.07); }
.shift-block.published { border-left-color: var(--ok); background: rgba(79,157,105,0.07); }
.shift-block.break-warning { border-bottom-color: rgba(192,86,63,0.75); }
.shift-block > span { display: block; }
.shift-time { color: var(--white); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.shift-role { color: var(--gold-light); font-size: 0.62rem; }

/* Admin shortcuts and manager approvals */
.admin-feature-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin: -0.5rem 0 1.5rem; }
.admin-feature-links .card { padding: 1rem 1.1rem; }
.admin-feature-links .card h3 { font-size: 1.15rem; }
.admin-feature-links .arrow { margin-top: 0.55rem; }
.approval-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.approval-tabs { width: min(680px, 100%); }
.approval-tabs button span { display: inline-flex; min-width: 1.1rem; justify-content: center; margin-left: 0.25rem; }
.approval-list { display: grid; gap: 0.9rem; }
.approval-note { padding: 0.7rem 0.85rem; border: 0.5px solid var(--line); border-radius: 4px; background: rgba(201,168,76,0.06); color: var(--gold-light); font-size: 0.75rem; }
#pending-summary { margin-bottom: 1rem; }
.approval-item { padding: 1.15rem 1.25rem; }
.approval-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.approval-head .doc-cat { margin: 0 0 0.2rem; }
.approval-head h3 { margin: 0; }
.approval-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.55rem; margin-top: 0.85rem; }
.approval-facts > div { padding: 0.6rem 0.7rem; border: 0.5px solid var(--line-soft); border-radius: 3px; background: #F7F5EF; }
.approval-facts span, .approval-reason span, .compare-card > span { display: block; color: var(--muted); font-size: 0.56rem; letter-spacing: 0.15em; text-transform: uppercase; }
.approval-facts strong { color: var(--off-white); font-size: 0.8rem; font-weight: 400; }
.approval-reason { margin-top: 0.7rem; color: rgba(32,30,24,0.75); font-size: 0.8rem; white-space: pre-wrap; }
.approval-actions { display: flex; gap: 0.55rem; margin-top: 1rem; }
.approval-empty { padding: 2.5rem 1.25rem; text-align: center; }
.approval-empty h3 { margin-top: 0.65rem; }
.approval-entry-date { margin-top: 0.45rem; color: var(--muted); font-size: 0.72rem; }
.compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0.75rem; margin-top: 0.85rem; }
.compare-card { padding: 0.75rem; border: 0.5px solid var(--line-soft); border-radius: 4px; background: var(--black); }
.compare-card.proposed { border-color: rgba(201,168,76,0.42); background: rgba(201,168,76,0.055); }
.compare-card strong { display: block; margin-top: 0.3rem; color: var(--gold-light); font-weight: 400; }
.compare-card p { color: var(--white); font-size: 0.88rem; }
.compare-card small { color: var(--muted); }
.compare-arrow { align-self: center; color: var(--gold); font-size: 1.4rem; }

@media (max-width: 1100px) {
  .pnav { flex-wrap: wrap; }
  .pnav-links { order: 3; width: 100%; justify-content: center; }
  .leave-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .page-head-actions { align-items: flex-start; flex-direction: column; }
  .balance-grid, .admin-feature-links { grid-template-columns: 1fr; }
  .week-toolbar { grid-template-columns: 1fr; }
  .week-toolbar .btn-row, .week-legend { justify-content: center; }
  .approval-toolbar { align-items: flex-start; flex-direction: column; }
  .approval-tabs { grid-template-columns: 1fr; }
  .approval-tabs button { border-right: 0; border-bottom: 0.5px solid var(--line); }
  .approval-tabs button:last-child { border-bottom: 0; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-arrow { justify-self: center; transform: rotate(90deg); }
}

@media (max-width: 520px) {
  .pnav-links { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 0.35rem; }
  .pnav-meta { width: 100%; flex-wrap: wrap; }
  .day-card-grid { grid-template-columns: 1fr; }
  .approval-actions, .table-actions { align-items: stretch; flex-direction: column; }
  .approval-actions .btn, .table-actions .btn { width: 100%; }
}

/* ═══ SCHEDULING V2: TEAM ROSTER, POWER TOOLS & SHIFT SWAPS ═══════════════
   Shared team week grid, manager copy/publish controls, compliance warnings,
   and staff trade cards. The wide roster deliberately scrolls on phones. */
.schedule-v2 .page-head { margin-bottom: 1.25rem; }
.manager-roster-tools {
  display: grid; grid-template-columns: minmax(190px, 0.6fr) minmax(420px, 1.4fr); gap: 0.8rem 1.5rem;
  align-items: center; margin-bottom: 1rem; padding: 1rem 1.15rem;
  border-color: rgba(201,168,76,0.34); background: linear-gradient(115deg, rgba(201,168,76,0.1), var(--dark-surface) 42%);
}
.manager-roster-tools .doc-cat { margin: 0 0 0.15rem; }
.manager-roster-tools h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; color: var(--off-white); }
.manager-tool-actions { display: flex; justify-content: flex-end; gap: 0.45rem; flex-wrap: wrap; }
.manager-tool-actions .btn { white-space: nowrap; }
.manager-tool-actions #draft-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem;
  padding: 0 0.25rem; border-radius: 99px; background: rgba(154,122,46,0.18); font-size: 0.58rem;
}
.manager-tool-foot {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.65rem;
  border-top: 0.5px solid var(--line-soft); color: var(--muted); font-size: 0.7rem;
}
.manager-tool-foot a { white-space: nowrap; }

.schedule-v2 .week-toolbar { margin-bottom: 1rem; }
.schedule-v2 .week-legend { align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 0.6rem; }
.schedule-v2 .week-legend > span { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.legend-dot { width: 0.52rem; height: 0.52rem; border-radius: 2px; border: 1px solid currentColor; }
.legend-dot.published { color: var(--ok); background: rgba(79,157,105,0.4); }
.legend-dot.draft { color: var(--gold); background: rgba(201,168,76,0.36); }
.legend-dot.open { color: var(--warn-light); border-style: dashed; }
.legend-dot.leave { color: var(--ok); background: rgba(79,157,105,0.18); }
.legend-dot.holiday { color: var(--gold-light); background: rgba(201,168,76,0.16); border-radius: 50%; }

.schedule-warning-panel {
  margin: 1rem 0; padding: 0.9rem 1rem; border: 0.5px solid rgba(192,86,63,0.58); border-radius: 4px;
  background: rgba(192,86,63,0.08); color: rgba(32,30,24,0.76); font-size: 0.75rem;
}
.warning-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--danger); }
.warning-summary-head strong { font-weight: 400; }
.warning-summary-head span { color: var(--muted); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; }
.schedule-warning-panel ul { margin: 0.55rem 0 0; padding-left: 1.1rem; }
.schedule-warning-panel li + li { margin-top: 0.25rem; }

.schedule-v2 .roster-scroll {
  width: 100%; max-height: none; overflow: auto; overscroll-behavior-inline: contain;
  border-color: rgba(201,168,76,0.24); scrollbar-color: var(--gold-dark) var(--black);
}
.schedule-v2 .team-roster-grid { min-width: 1280px; table-layout: fixed; }
.schedule-v2 .team-roster-grid thead th { min-width: 146px; width: 146px; }
.schedule-v2 .team-roster-grid .roster-name { min-width: 176px; width: 176px; }
.schedule-v2 .team-roster-grid .roster-total { min-width: 76px; width: 76px; }
.schedule-v2 .roster-cell {
  min-width: 146px; width: 146px; height: 148px; padding: 0.38rem; cursor: default;
  background-color: #FCFBF9;
}
.schedule-v2 .roster-cell.is-empty[tabindex="0"] { cursor: pointer; }
.schedule-v2 .roster-cell.is-empty[tabindex="0"]:hover { background-color: rgba(201,168,76,0.07); }
.schedule-v2 .roster-grid tbody tr:hover > .roster-name { color: var(--gold-light); }
.schedule-v2 .roster-grid .my-roster-row > .roster-name { box-shadow: inset 2px 0 0 var(--gold); }
.schedule-v2 .roster-grid .my-roster-row > .roster-name span { color: var(--gold-light); }
.schedule-v2 .open-shifts-row .roster-name { background: #F3ECD9; }
.schedule-v2 .open-shifts-row .roster-cell { background-color: rgba(201,168,76,0.035); }
.schedule-v2 .open-shifts-row > * { border-bottom-color: rgba(201,168,76,0.34); }
.schedule-v2 .is-public-holiday { background-image: linear-gradient(rgba(201,168,76,0.065), rgba(201,168,76,0.065)); }
.schedule-v2 .leave-marker { padding: 0.32rem 0.4rem; background: rgba(79,157,105,0.08); text-transform: capitalize; }
.empty-cell-actions { display: flex; flex-direction: column; gap: 0.25rem; }
.cell-action {
  width: 100%; border: 0.5px dashed rgba(201,168,76,0.38); border-radius: 3px; padding: 0.52rem 0.25rem;
  background: transparent; color: var(--gold-dark); font: 300 0.62rem var(--font-body); cursor: pointer;
}
.cell-action:hover, .cell-action:focus { outline: none; color: var(--gold-light); border-color: var(--gold); background: rgba(201,168,76,0.07); }
.cell-action.paste { border-style: solid; }
.empty-cell-note { display: block; padding-top: 1.2rem; color: var(--muted); text-align: center; }

.shift-chip {
  position: relative; display: block; margin-bottom: 0.38rem; padding: 0.45rem; overflow: hidden;
  border: 0.5px solid var(--line); border-left: 2px solid var(--ok); border-radius: 3px;
  background: rgba(79,157,105,0.075); color: var(--off-white); text-align: left;
}
.shift-chip:last-child { margin-bottom: 0; }
.shift-chip.draft { border-left-color: var(--gold); background: rgba(201,168,76,0.08); }
.shift-chip.open { border: 0.5px dashed rgba(224,168,120,0.62); border-left: 2px solid var(--warn-light); background: rgba(224,168,120,0.055); }
.shift-chip.mine { border-color: rgba(201,168,76,0.65); box-shadow: inset 0 0 0 1px rgba(201,168,76,0.08); }
.shift-chip.has-warning { border-bottom-color: rgba(192,86,63,0.78); }
.shift-chip-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.25rem; }
.shift-chip-top strong { color: var(--white); font-size: 0.7rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shift-chip-top .pill { flex: none; padding: 0.08rem 0.32rem; font-size: 0.46rem; }
.shift-chip-role, .shift-chip-meta, .shift-chip-break, .shift-warning-label { display: block; }
.shift-chip-role { margin-top: 0.13rem; color: var(--gold-light); font-size: 0.61rem; }
.shift-chip-meta { color: var(--muted); font-size: 0.54rem; }
.shift-chip-break { margin-top: 0.16rem; color: rgba(32,30,24,0.48); font-size: 0.5rem; line-height: 1.28; }
.shift-chip-break.warn, .shift-warning-label { color: var(--danger); }
.shift-warning-label { margin-top: 0.22rem; font-size: 0.5rem; }
.shift-chip-actions { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.38rem; }
.shift-chip-actions button {
  flex: 1 1 auto; min-height: 1.55rem; padding: 0.2rem 0.28rem; border: 0.5px solid var(--line); border-radius: 2px;
  background: var(--black); color: var(--gold-light); font: 400 0.49rem var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
}
.shift-chip-actions button:hover { border-color: var(--gold); }
.schedule-v2 .roster-grid tfoot th, .schedule-v2 .roster-grid tfoot td {
  border-right: 0.5px solid var(--line-soft); padding: 0.58rem 0.45rem; background: #F2F0E9;
}
.schedule-v2 .roster-grid tfoot .roster-name, .schedule-v2 .roster-grid tfoot .roster-total { position: sticky; z-index: 3; background: var(--charcoal); }
.schedule-v2 .roster-grid tfoot .roster-name { left: 0; }
.schedule-v2 .roster-grid tfoot .roster-total { right: 0; }
.day-total { color: var(--muted); text-align: center; }
.day-total strong, .day-total span { display: block; }
.day-total strong { color: var(--off-white); font-size: 0.66rem; font-weight: 400; }
.day-total span { color: var(--gold-light); font-size: 0.57rem; }
.schedule-check { display: flex; align-items: center; gap: 0.48rem; margin: -0.15rem 0 1rem; color: var(--off-white); font-size: 0.8rem; cursor: pointer; }
.schedule-check input { accent-color: var(--gold); }
.swap-flow-note { margin: -0.45rem 0 1rem; padding: 0.65rem 0.75rem; border-left: 2px solid var(--gold); background: rgba(201,168,76,0.06); color: rgba(32,30,24,0.7); font-size: 0.76rem; }

.swaps-section .section-head { align-items: flex-start; }
.swaps-section .section-head .doc-cat { margin: 0 0 0.2rem; }
.swaps-section .section-head .sub { color: var(--muted); font-size: 0.78rem; }
.swap-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.swap-column { min-width: 0; padding: 1rem; }
.swap-column-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.65rem; padding-bottom: 0.65rem; border-bottom: 0.5px solid var(--line-soft); }
.swap-column-head h3 { margin: 0; font-size: 1.16rem; }
.swap-list { display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.swap-card { min-width: 0; padding: 0.75rem; border: 0.5px solid var(--line-soft); border-radius: 4px; background: #FCFBF9; }
.swap-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.42rem; color: var(--muted); font-size: 0.58rem; text-transform: capitalize; }
.swap-card > strong { display: block; color: var(--off-white); font-size: 0.76rem; font-weight: 400; line-height: 1.45; }
.swap-card > p { margin-top: 0.28rem; color: var(--muted); font-size: 0.67rem; }
.swap-card .swap-reason { color: rgba(32,30,24,0.68); font-style: italic; }
.swap-counter { margin: 0.65rem 0 0; }
.swap-counter .input { padding: 0.45rem 0.5rem; font-size: 0.68rem; }
.swap-counter small { display: block; margin-top: 0.3rem; color: var(--danger); font-size: 0.62rem; }
.swap-card-actions { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.65rem; }
.swap-card-actions .muted { font-size: 0.62rem; }
.swap-empty { padding: 1rem 0.35rem; color: var(--muted); font-size: 0.72rem; text-align: center; }

.approval-tabs { width: min(880px, 100%); grid-template-columns: repeat(4, minmax(90px, 1fr)); }
.swap-counter-approval {
  margin-top: 0.7rem; padding: 0.65rem 0.75rem; border: 0.5px solid rgba(201,168,76,0.34); border-radius: 3px;
  background: rgba(201,168,76,0.055);
}
.swap-counter-approval span { display: block; color: var(--muted); font-size: 0.56rem; letter-spacing: 0.15em; text-transform: uppercase; }
.swap-counter-approval strong { display: block; margin-top: 0.2rem; color: var(--gold-light); font-size: 0.8rem; font-weight: 400; }

@media (max-width: 1080px) {
  .manager-roster-tools { grid-template-columns: 1fr; }
  .manager-tool-actions { justify-content: flex-start; }
  .manager-tool-foot { grid-column: auto; }
  .swap-columns { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .schedule-v2 .week-toolbar { grid-template-columns: 1fr; }
  .schedule-v2 .week-label { order: -1; }
  .schedule-v2 .week-toolbar .btn-row, .schedule-v2 .week-legend { justify-content: center; }
  .manager-tool-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .manager-tool-actions .btn { width: 100%; padding-inline: 0.6rem; }
  .manager-tool-foot, .warning-summary-head { align-items: flex-start; flex-direction: column; }
  .schedule-v2 .roster-scroll { margin-right: -1.1rem; width: calc(100% + 1.1rem); border-right: 0; border-radius: 5px 0 0 5px; }
  .approval-tabs { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .manager-tool-actions { grid-template-columns: 1fr; }
  .manager-tool-foot a { white-space: normal; }
  .schedule-v2 .week-legend { justify-content: flex-start; }
  .modal .row { display: block; }
}