/* PAG Production — app layer on top of propak-glazing.css
   Typography rules: one table size, mono only for codes, numbers and dates. */

.mainnav { display:flex; gap:2px; margin-left:14px; align-items:center; }
.mainnav a {
  color:#C9CDCE; text-decoration:none; font-size:13px; font-weight:500;
  padding:6px 10px; border-radius:6px; white-space:nowrap;
}
.mainnav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.mainnav a.on    { background:rgba(255,255,255,.12); color:#fff;
                   box-shadow: inset 0 -2px 0 var(--pk-accent); }

.whoami    { color:#C9CDCE; font-size:12.5px; margin-right:10px; }
.whoami em { color:#8C9294; font-style:normal; }

/* Keep the Sign out button reachable on narrow screens: let the tab strip
   shrink and scroll sideways instead of pushing the name and sign-out button
   off the right edge of the bar. */
.pk-topbar { flex-wrap: nowrap; }
.mainnav { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.pk-topbar .whoami,
.pk-topbar > form { flex: 0 0 auto; }

/* --- tables: one size, aligned, tabular numerals --- */
table.pk-grid { font-size:13px; }
table.pk-grid th, table.pk-grid td { padding:7px 10px; vertical-align:middle; white-space:nowrap; }
table.pk-grid td.desc { white-space:normal; }

.num  { font-family:var(--pk-mono); text-align:right; font-variant-numeric:tabular-nums; }
.code { font-family:var(--pk-mono); }
th.num { text-align:right; }

.q-req { font-weight:700; }
.q-stk { color:var(--pk-muted); }
.q-buy { color:var(--pk-ok); font-weight:700; }

/* --- section bands: horizontal orange rule, never a left tick --- */
tr.sec td {
  background:#E9ECEC;
  border-top:1px solid var(--pk-line);
  border-bottom:2px solid var(--pk-accent);
  font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pk-slate); padding:10px 10px 8px;
}
tr.sec td .sec-val {
  float:right; font-family:var(--pk-mono); font-weight:400;
  letter-spacing:0; text-transform:none; font-size:12px; color:var(--pk-muted);
}

tr.done td  { color:var(--pk-muted); background:#FAFAFA; }
tr.draft td { background:var(--pk-accent-soft); }

.mini { font-size:12px; color:var(--pk-muted); }

/* --- budgets --- */
.budget { display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
          background:var(--pk-line); border:1px solid var(--pk-line);
          border-radius:var(--pk-radius); overflow:hidden; margin-top:12px; }
.budget > div  { background:var(--pk-card); padding:10px 12px; }
.budget label  { display:block; font-size:10.5px; text-transform:uppercase;
                 letter-spacing:.12em; color:var(--pk-muted); font-weight:700; margin-bottom:5px; }
.budget .row   { display:flex; justify-content:space-between; align-items:baseline; padding:2px 0; }
.budget .row span { font-size:12px; color:var(--pk-muted); }
.budget .row b { font-family:var(--pk-mono); font-size:13px; font-variant-numeric:tabular-nums; }
.over  { color:var(--pk-danger); }
.under { color:var(--pk-ok); }

/* --- login --- */
.login-wrap { max-width:360px; margin:12vh auto; }
.login-wrap .pk-panel-body { padding:22px; }
.login-wrap label { display:block; font-size:12px; font-weight:600;
                    color:var(--pk-muted); margin:10px 0 4px; }
.login-wrap input { width:100%; }
.login-wrap button { width:100%; margin-top:16px; }
.login-mark { text-align:center; margin-bottom:20px; }
.login-mark img { height:38px; }

/* --- capability grid --- */
.capgrid { width:100%; border-collapse:collapse; font-size:13px; }
.capgrid th, .capgrid td { padding:7px 10px; border-bottom:1px solid var(--pk-line); }
.capgrid thead th {
  position:sticky; top:0; background:var(--pk-ink); color:#fff;
  font-weight:500; font-size:12px; text-align:center; z-index:2;
}
.capgrid thead th:first-child { text-align:left; }
.capgrid td.cap { text-align:center; }
.capgrid tr.grouprow td {
  background:var(--pk-card);
  border-bottom:2px solid var(--pk-accent);
  font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding-top:16px;
}
.capgrid tr.grouprow td .note {
  display:block; font-weight:400; font-size:12px; letter-spacing:0;
  text-transform:none; color:var(--pk-muted); margin-top:3px;
}
.capgrid th.adminrole { background:var(--pk-accent); }
.capgrid td.locked { color:var(--pk-muted); font-size:11px; }

.formrow { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
.formrow label { display:block; font-size:12px; font-weight:600;
                 color:var(--pk-muted); margin-bottom:4px; }
.formrow input, .formrow select { width:100%; }

.pk-panel + .pk-panel { margin-top:14px; }

/* ============================================================
   MISSING BASE RULES
   The brand sheet defines .pk-panel-head and .pk-panel-body but not the
   .pk-panel container itself, has no .pk-alert, and does not style form
   controls or the base table. Without these, form controls fall back to the
   browser's system font and tables lose their alignment. Layered here so the
   brand sheet stays untouched.
   ============================================================ */

.pk-panel {
  background: var(--pk-card);
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow);
  margin-bottom: 14px;
  overflow: hidden;
}
.pk-panel-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #FCFCFB;
}
.pk-panel-body { padding: 14px 16px; }

/* base table: without these the grid collapses visually */
table.pk-grid {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* form controls — inherit the brand font instead of the browser default */
input, select, textarea, button {
  font-family: inherit;
  font-size: 13px;
  color: var(--pk-ink);
}
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], select, textarea {
  padding: 6px 9px;
  border: 1px solid var(--pk-line-strong);
  border-radius: var(--pk-radius-sm);
  background: #fff;
  line-height: 1.4;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pk-accent);
  box-shadow: 0 0 0 3px var(--pk-accent-soft);
}
input[type=checkbox] { width: 15px; height: 15px; vertical-align: -2px; accent-color: var(--pk-accent); }

/* table cells hold inputs — keep them from bursting the column */
table.pk-grid input[type=text], table.pk-grid input[type=email],
table.pk-grid input[type=number], table.pk-grid select {
  padding: 4px 7px; max-width: 100%;
}

/* alerts */
.pk-alert {
  padding: 10px 14px;
  border-radius: var(--pk-radius);
  border: 1px solid var(--pk-line);
  border-left-width: 3px;
  background: var(--pk-fill);
  font-size: 13px;
  margin-bottom: 14px;
}
.pk-alert.ok     { background: var(--pk-ok-bg);     border-left-color: var(--pk-ok); }
.pk-alert.warn   { background: var(--pk-warn-bg);   border-left-color: var(--pk-warn); }
.pk-alert.danger { background: var(--pk-danger-bg); border-left-color: var(--pk-danger); }
.pk-alert.info   { background: var(--pk-info-bg);   border-left-color: var(--pk-info); }

/* dark table head used across the app */
table.pk-dark-head thead th {
  background: var(--pk-ink);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
  border-bottom: none;
}

/* spacing between stacked forms and rows */
.formrow + .formrow { margin-top: 10px; }
h2 { margin-top: 0; }
a { color: var(--pk-info); }

/* stats strip needs breathing room under the toolbar */
.pk-stats { margin-top: 12px; }

/* nav items for modules not yet built — visible but clearly inactive */
.mainnav .soon {
  color:#6E7476; font-size:13px; font-weight:500; padding:6px 12px;
  cursor:default; position:relative;
}
.mainnav .soon::after {
  content:'soon'; font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  background:#3A4142; color:#9BA1A3; padding:1px 4px; border-radius:3px; margin-left:5px;
}

/* ---- delivery builder: items left, basket right ---- */
.pk-wrap.wide { max-width: 1440px; }

.delivery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
}
.delivery-layout > div { min-width: 0; }

.basket { position: sticky; top: 76px; }
.basket .pk-panel-head { background: var(--pk-accent-soft); }
.basket table.pk-grid td { padding: 8px 10px; vertical-align: top; }
.basket table.pk-grid tr:last-child td { border-bottom: none; }

@media (max-width: 1100px) {
  .delivery-layout { grid-template-columns: 1fr; }
  .basket { position: static; }
}

/* ---- order tracking board ---- */
table.board td { vertical-align: middle; }

.ordcell {
  transition: background .18s ease;
  border-left: 1px solid var(--pk-line);
}
.ordcell.is-ordered { background: var(--pk-ok-bg); }

.tickwrap { display: flex; align-items: center; gap: 7px; }
.tickwrap .po {
  flex: 1; min-width: 0; padding: 3px 6px; font-size: 12px;
  border: 1px solid transparent; background: transparent;
}
.ordcell.is-ordered .po { border-color: rgba(0,0,0,.10); background: rgba(255,255,255,.65); }
.tickwrap .po:focus { border-color: var(--pk-accent); background: #fff; }

table.board input[type=date] {
  width: 116px; padding: 4px 6px; font-size: 12px;
  font-family: var(--pk-mono);
}

.date-soon    { background: var(--pk-warn-bg); }
.date-overdue { background: var(--pk-danger-bg); }

/* Board: a stronger red than the soft danger tints, for a passed order date or an
   urgent pack. Same colour is used for both, as requested. */
.date-late-strong { background: #e5322b; color: #fff; font-weight: 600; }
table.board tr.row-late    td { background: #fdecec; }
table.board tr.row-late    td:first-child { box-shadow: inset 3px 0 0 #e5322b; }
table.board tr.row-urgent  td { background: #fbdcdc; }
table.board tr.row-urgent  td:first-child { box-shadow: inset 3px 0 0 #e5322b; }
.urgent-btn {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--pk-line); background: #fff; color: var(--pk-muted); font-weight: 800;
}
.urgent-btn.on { background: #e5322b; border-color: #e5322b; color: #fff; }

.saving { opacity: .5; }
.saved  { box-shadow: 0 0 0 2px var(--pk-ok); border-radius: 3px; }

/* ---- fixed: stat cards were running label and number together ---- */
.pk-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-stat {
  background: var(--pk-card);
  border: 1px solid var(--pk-line);
  border-left: 3px solid var(--pk-line-strong);
  border-radius: var(--pk-radius);
  padding: 10px 14px;
  min-width: 132px;
  display: flex; flex-direction: column; gap: 3px;
}
.pk-stat label {
  display: block;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--pk-muted); font-weight: 700;
}
.pk-stat b { display: block; font-size: 21px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pk-stat.ok     { border-left-color: var(--pk-ok); }
.pk-stat.warn   { border-left-color: var(--pk-warn); }
.pk-stat.danger { border-left-color: var(--pk-danger); }
.pk-stat.accent { border-left-color: var(--pk-accent); }

/* ---- two-column blocks line up properly ---- */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-items: stretch;
}
.two-col > .pk-panel { margin-bottom: 0; display: flex; flex-direction: column; }
.two-col > .pk-panel > .pk-panel-body { flex: 1 1 auto; }
/* compact tables (e.g. the project Parties panel) */
.pk-grid.compact td { padding: 5px 12px; font-size: 12px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ---- forms: consistent rows, no colliding controls ---- */
.formrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.formrow > div { min-width: 0; }
.formrow label {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--pk-muted); margin-bottom: 4px; line-height: 1.3;
}
.formrow input, .formrow select { width: 100%; }
.formrow .inline {
  display: flex; align-items: center; gap: 7px;
  font-weight: 400; color: var(--pk-ink); font-size: 13px;
  padding-bottom: 7px;
}

/* ---- work pack chips replacing the empty counter cards ---- */
.packstrip { display: flex; flex-wrap: wrap; gap: 7px; }
.packchip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--pk-line-strong); border-left-width: 3px;
  border-radius: var(--pk-radius); background: var(--pk-card);
  padding: 7px 11px; text-decoration: none; color: var(--pk-ink);
  font-size: 13px; transition: background .15s ease;
}
.packchip:hover { background: var(--pk-fill); }
.packchip .n {
  font-family: var(--pk-mono); font-size: 11px; color: var(--pk-muted);
  background: var(--pk-fill); border-radius: 10px; padding: 1px 7px;
}
.packchip .nm { color: var(--pk-muted); font-size: 12px; }
.packchip.design         { border-left-color: var(--pk-line-strong); }
.packchip.booked_out     { border-left-color: var(--pk-ok); }
.packchip.in_manufacture { border-left-color: var(--pk-warn); }
.packchip.complete       { border-left-color: var(--pk-info); opacity: .7; }

/* ---- filter and selection bars ---- */
.filterbar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.selbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--pk-fill); border-top: 1px solid var(--pk-line);
}
.selbar .divider {
  width: 1px; height: 22px; background: var(--pk-line-strong); margin: 0 4px;
}

.drop {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px dashed var(--pk-line-strong); border-radius: var(--pk-radius);
  margin: 0; background: transparent;
}

/* ---- budget table ---- */
table.budgets td.money { font-family: var(--pk-mono); text-align: right; font-variant-numeric: tabular-nums; }
tr.total-row td { border-top: 2px solid var(--pk-ink); font-weight: 700; padding-top: 9px; }

/* ---- flashings: station tabs and pipeline ---- */
.stagetabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 2px solid var(--pk-line); margin-bottom: 14px;
}
.stagetab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; text-decoration: none; color: var(--pk-muted);
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--pk-radius) var(--pk-radius) 0 0;
  margin-bottom: -2px;
}
.stagetab:hover { background: var(--pk-fill); color: var(--pk-ink); }
.stagetab.on {
  background: var(--pk-card); color: var(--pk-ink);
  border-color: var(--pk-line); border-bottom: 2px solid var(--pk-card);
  box-shadow: inset 0 3px 0 var(--pk-accent);
}
.stagetab .cnt {
  font-family: var(--pk-mono); font-size: 11px;
  background: var(--pk-fill); border: 1px solid var(--pk-line);
  border-radius: 10px; padding: 1px 7px;
}
.stagetab.on .cnt { background: var(--pk-ink); color: #fff; border-color: var(--pk-ink); }
.stagetab .urg {
  font-family: var(--pk-mono); font-size: 11px; font-weight: 700;
  background: var(--pk-danger); color: #fff; border-radius: 10px; padding: 1px 7px;
}

.pipeline { display: flex; gap: 4px; }
.pip {
  width: 24px; height: 24px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--pk-fill); color: var(--pk-muted);
  border: 1px solid var(--pk-line-strong);
}
.pip.ok { background: var(--pk-ok-bg); color: var(--pk-ok); border-color: var(--pk-ok); }
/* v33: DEL pip — wider, links to the delivery note; amber while part-delivered */
.pip.del { width: auto; min-width: 34px; padding: 0 6px; margin-left: 6px; font-size: 10px; text-decoration: none; }
.pip.del.part { background: var(--pk-warn-bg); color: var(--pk-warn); border-color: var(--pk-warn); }
tr.delivered td { opacity: .55; }
tr.delivered td .pip.del { opacity: 1; }

.urgbtn {
  width: 24px; height: 24px; padding: 0; border-radius: 5px;
  border: 1px solid var(--pk-line-strong); background: var(--pk-card);
  color: var(--pk-muted); font-weight: 700; cursor: pointer; line-height: 1;
}
.urgbtn:hover { border-color: var(--pk-danger); color: var(--pk-danger); }
.urgbtn.on { background: var(--pk-danger); border-color: var(--pk-danger); color: #fff; }
.urgbtn.semi { background: var(--pk-warn); border-color: var(--pk-warn); color: #fff; }
.flagcell { display: inline-flex; align-items: center; gap: 3px; }
.flagcell .arrows { display: inline-flex; flex-direction: column; gap: 1px; }
.mvbtn { border: 1px solid var(--pk-line-strong); background: var(--pk-fill); color: var(--pk-muted); font-size: 8px; line-height: 1; padding: 1px 4px; border-radius: 3px; cursor: pointer; }
.mvbtn:hover { color: var(--pk-ink); border-color: var(--pk-ink); }
tr.semirow td { background: var(--pk-warn-bg); }

/* v35.1: site diary forms — .fld was used but never styled, so labels sat inline
   with browser-default inputs. Label above, full-width field, consistent gaps. */
.fld { display: block; margin-bottom: 10px; }
.fld label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 3px; }
.fld input[type="text"], .fld input[type="date"], .fld textarea, .fld select { width: 100%; box-sizing: border-box; }
.fld input[type="file"] { display: block; }
@media (max-width: 900px) { .setup-2col { grid-template-columns: 1fr !important; } }

tr.urgentrow td { background: var(--pk-danger-bg); }
tr.urgentrow td:first-child { box-shadow: inset 3px 0 0 var(--pk-danger); }

/* ---- home dashboard ---- */
.homegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}

/* Home dashboard: branded panel headers — slate bar, white text, orange line.
   Scoped to .homegrid so coloured heads elsewhere (danger, action) are untouched. */
.homegrid .pk-panel-head {
  background: var(--pk-slate);
  color: #fff;
  border-bottom: 3px solid var(--pk-accent);
}
.homegrid .pk-panel-head h2   { color: #fff; }
.homegrid .pk-panel-head .count { color: #C9CDCE; }
.homegrid .pk-panel-head .pk-btn {
  background: rgba(255,255,255,.12); color: #fff; border-color: transparent;
}
.homegrid .pk-panel-head .pk-btn:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Home: per-user "Choose panels" dropdown under the greeting */
.panelchooser { position: relative; }
.panelchooser > summary { list-style: none; cursor: pointer; }
.panelchooser > summary::-webkit-details-marker { display: none; }
.panelchooser-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 250px; padding: 12px 14px;
  background: var(--pk-card); border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius); box-shadow: var(--pk-shadow);
}
.panelchooser-row {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 4px; font-size: 13px;
}
.panelchooser-row:hover { background: var(--pk-fill); border-radius: 6px; }
.panelchooser-row input { width: 15px; height: 15px; }
.panelchooser-row .pc-label { flex: 1; }
.panelchooser-row .pc-move { display: inline-flex; gap: 2px; }
.panelchooser-row .pc-move button {
  border: 1px solid var(--pk-line); background: #fff; color: var(--pk-muted);
  width: 22px; height: 22px; border-radius: 5px; cursor: pointer; font-size: 10px; line-height: 1;
}
.panelchooser-row .pc-move button:hover { background: var(--pk-fill); color: var(--pk-ink); }
.homegrid > .pk-panel { margin-top: 0; margin-bottom: 0; }
.homegrid .span2 { grid-column: span 2; }
@media (max-width: 760px) { .homegrid .span2 { grid-column: span 1; } }

a.pk-stat { color: inherit; cursor: pointer; }
a.pk-stat:hover { background: var(--pk-fill); }
a.pk-stat.active { box-shadow: inset 0 -3px 0 var(--pk-accent); }

.minigrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.minitile {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 12px 6px; border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius); text-decoration: none; color: var(--pk-ink);
  background: var(--pk-card);
}
.minitile:hover { background: var(--pk-fill); }
.minitile .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.minitile .l { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--pk-muted); }
.minitile .u { font-size: 10px; color: var(--pk-danger); font-weight: 700; }
.minitile.urgent { border-color: var(--pk-danger); }

/* ---- notice cause picker ---- */
.causegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 7px; margin-top: 6px; }
.causegroup {
  grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pk-muted);
  border-bottom: 2px solid var(--pk-accent); padding-bottom: 4px; margin-top: 8px;
}
label.cause {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid var(--pk-line); border-radius: var(--pk-radius);
  padding: 9px 11px; cursor: pointer; background: var(--pk-card);
}
label.cause:hover { background: var(--pk-fill); }
label.cause input { margin-top: 2px; }
label.cause span { display: block; font-size: 13px; }
label.cause .mini { display: block; margin-top: 2px; }
label.cause:has(input:checked) { border-color: var(--pk-accent); background: var(--pk-accent-soft); }

/* ---- notice attachments ---- */
.attachgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.attach { border: 1px solid var(--pk-line); border-radius: var(--pk-radius); padding: 7px; background: var(--pk-card); }
.attach img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; display: block; }
.attach .file {
  display: block; padding: 22px 8px; text-align: center; background: var(--pk-fill);
  border-radius: 4px; font-size: 12px; word-break: break-word;
}
.attach form { margin-top: 5px; }

/* ---- board: show/hide columns + auto fab date (batch 5) ---- */
table.board.hide-items   .col-items,
table.board.hide-mfr     .col-mfr,
table.board.hide-plead   .col-plead,
table.board.hide-glead   .col-glead,
table.board.hide-porder  .col-porder,
table.board.hide-gorder  .col-gorder,
table.board.hide-deliver .col-deliver,
table.board.hide-fab     .col-fab { display: none; }

/* an auto (unset) fabrication-start date shows muted so it reads as derived */
table.board input.cell.is-auto { color: var(--pk-muted); font-style: italic; }

/* Columns dropdown on the board toolbar */
.colmenu { position: relative; }
.colmenu > summary { list-style: none; cursor: pointer; }
.colmenu > summary::-webkit-details-marker { display: none; }
.colmenu[open] > summary { background: var(--pk-fill); }
.colmenu-body {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border: 1px solid var(--pk-line); border-radius: 8px;
  box-shadow: var(--pk-shadow); padding: 10px 12px; min-width: 190px;
}
.colmenu-body label { display: block; padding: 3px 0; font-size: 13px; white-space: nowrap; }
.colmenu-body input { margin-right: 7px; }

/* ---- batch 6 ---- */
/* white, high-contrast sign-out button on the dark top bar */
.pk-topbar .signout {
  color: #fff; background: transparent;
  border: 1px solid rgba(255,255,255,.55);
}
.pk-topbar .signout:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* board: darker red for late dates so the white date text reads through */
table.board td.date-late-strong,
table.board .date-late-strong { background: #8E1B12 !important; color: #fff !important; }

/* ---- Workspace sub-header (v22, centred v26, always-on v27, left margin v28) ----
   The pages row starts at the page's left margin, in line with the Propak
   logo above. Always visible (Home and Admin included) — no popping down. */
.pk-subbar {
  position: sticky; top: 54px; z-index: 19;
  display: flex; align-items: center; gap: 16px;
  background: #3A4245; border-bottom: 2px solid var(--pk-accent);
  padding: 0 24px; min-height: 38px;
}
.pk-subbar .ws-name {
  color: var(--pk-accent); font-size: 11px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  flex: 0 0 auto; margin-left: auto;
}
.pk-subbar .subnav {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: 2px; min-width: 0;
}
.pk-subbar .subnav a {
  color: #C9CDCE; text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 9px 10px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.pk-subbar .subnav a:first-child { padding-left: 0; }
.pk-subbar .subnav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.pk-subbar .subnav a.on { color: #fff; border-bottom-color: var(--pk-accent); }

/* ---- header search (v25) ---- */
.pk-search { display:flex; align-items:center; margin-right:10px; }
.pk-search input {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: #fff; border-radius: 7px; padding: 5px 10px; font-size: 12.5px; width: 150px;
}
.pk-search input::placeholder { color: #AEB3B5; }
.pk-search input:focus { background: rgba(255,255,255,.16); outline: none; border-color: var(--pk-accent); width: 190px; }