/* ----------------------------------------------------------------------
 * YUDIN BMS — theme tokens
 *
 * Every colour in this file is sourced from one of these custom properties.
 * Toggling `body.theme-dark` / `body.theme-light` switches the whole UI.
 * Structural properties (radii, fonts, spacing) live on :root and are
 * theme-independent.
 * --------------------------------------------------------------------*/

:root {
  --shadow-card-dark:  0 6px 18px rgba(0,0,0,.35);
  --shadow-card-light: 0 2px 8px rgba(30,60,80,.06);
}

body.theme-dark {
  color-scheme: dark;
  --bg-base:        #060e14;
  --sy-donut-gap:   #0e1820;
  --bg-elev:        rgba(255,255,255,.05);
  --bg-input:       rgba(255,255,255,.05);
  --bg-input-hover: rgba(47,143,134,.10);
  /* opaque surface for floating popups (native <select> option lists,
     status pill menus) — the translucent --bg-elev lets content behind
     show through, so the popup blends into the page. Must stay fully opaque. */
  --bg-popover:     #121a20;
  --text-primary:   #e8eef2;
  --text-muted:     #8aa0ab;
  --text-faint:     #6f858f;
  --accent:         #3fd17a;
  --accent-fg:      #ffffff;
  --accent-grad:    linear-gradient(135deg,#2f8f86,#1d5f5a);
  --border:         rgba(255,255,255,.08);
  --border-strong:  rgba(255,255,255,.15);
  --danger:         #ff8080;
  --success:        #3fd17a;
  --warning:        #ffd569;
  --shadow-card:    var(--shadow-card-dark);
  /* the photo-tinted overlay used by login / main / ptw / hh backgrounds */
  --photo-overlay:  linear-gradient(100deg,
                      rgba(6,14,20,.97) 0%, rgba(6,14,20,.95) 28%,
                      rgba(6,14,20,.78) 44%, rgba(6,14,20,.35) 64%,
                      rgba(6,14,20,.30) 100%);
  /* PTW domain-semantic pill colours — bright tints tuned for the dark
     surface. Light theme overrides each with a darker tone (see below) so
     the same pill clears WCAG AA contrast on a white background. */
  --dom-blue:    #6bcaf0;  /* EIC / COLD type */
  --dom-aqua:    #b6e5ff;  /* UNDERWATER type */
  --dom-orange:  #f0a96b;  /* MIC / HOT type */
  --dom-amber:   #f0c66b;  /* tagout / INT flag */
  --dom-purple:  #b78fff;  /* audit OVERRIDE */
  --dom-lt:      #ef7c5e;  /* long-term isolation marker */
}

body.theme-light {
  color-scheme: light;
  --bg-base:        linear-gradient(180deg,#f4f6f8 0%,#e6ebef 100%);
  --sy-donut-gap:   #ffffff;
  --bg-elev:        #ffffff;
  --bg-input:       #ffffff;
  --bg-input-hover: #f0f5f3;
  --bg-popover:     #ffffff;
  --text-primary:   #0e1a22;
  --text-muted:     #5e7280;
  --text-faint:     #8a9aa3;
  --accent:         #1d5f5a;
  --accent-fg:      #ffffff;
  --accent-grad:    linear-gradient(135deg,#2f8f86,#1d5f5a);
  --border:         #e1e6ea;
  --border-strong:  #c9d2d8;
  --danger:         #c0392b;
  --success:        #1d5f5a;
  --warning:        #a76e00;
  --shadow-card:    var(--shadow-card-light);
  /* in light mode the photo backgrounds are hidden — see per-prefix rules */
  --photo-overlay:  none;
  /* Darkened domain-semantic pill colours — each keeps the same hue family
     as its dark-theme counterpart but is deep enough to clear WCAG AA
     contrast (>= 4.5:1) against the white --bg-elev pill surface. */
  --dom-blue:    #1d6f99;  /* EIC / COLD type */
  --dom-aqua:    #2a7ea8;  /* UNDERWATER type */
  --dom-orange:  #b5641a;  /* MIC / HOT type */
  --dom-amber:   #8a6500;  /* tagout / INT flag */
  --dom-purple:  #6b4bb8;  /* audit OVERRIDE */
  --dom-lt:      #c0392b;  /* long-term isolation marker */
}

/* app/static/css/app.css — palette via CSS variables (see top of file) */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: "Segoe UI", system-ui, sans-serif; }
body { color: var(--text-primary); background: var(--bg-base); }

a { color: var(--accent); }

/* ---- login page ---- */
.login-bg { position: fixed; inset: 0; z-index: 0;
  background: url('/static/img/vessel-background.jpg') center/cover no-repeat; }
.login-bg::after { content: ""; position: absolute; inset: 0;
  background: var(--photo-overlay); }
.login-logo { position: fixed; top: 25vh; left: calc(7vw + 368px);
  transform: translate(-100%, -50%); height: 37.5vh; width: auto;
  opacity: .3; mix-blend-mode: screen; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 78%);
          mask-image: linear-gradient(to right, transparent 0%, #000 78%); }
.login-stage { position: relative; z-index: 2; min-height: 100vh;
  display: flex; align-items: flex-start;
  padding: 0 7vw 0 calc(7vw + 38px); }
.login-form { width: 330px; margin-top: calc(43.75vh + 2mm); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 7px; }
.input-wrap { display: flex; align-items: center; gap: 10px;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: 9px; padding: 0 13px;
  transition: border-color .15s, background .15s; }
.input-wrap:focus-within { border-color: var(--accent);
  background: var(--bg-input-hover); }
.input-wrap .ico { color: var(--text-faint); display: flex; }
.input-wrap input { flex: 1; background: transparent; border: none;
  outline: none; color: var(--text-primary); font-size: 14px; padding: 12px 0; }
.input-wrap input::placeholder { color: var(--text-faint); }
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus,
.input-wrap input:-webkit-autofill:active,
.input-wrap input:autofill {
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  transition: background-color 9999s ease-in-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
          box-shadow: 0 0 0 1000px transparent inset !important;
}
.btn { width: 100%; margin-top: 10px; padding: 13px; border: none;
  border-radius: 9px; background: var(--accent-grad);
  color: var(--accent-fg); font-size: 14px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer;
  transition: filter .15s, transform .15s;
  box-shadow: 0 8px 22px rgba(47,143,134,.4); }
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.help { margin-top: 22px; font-size: 12px; color: var(--text-faint); line-height: 1.6; }
.error { margin-top: 14px; font-size: 13px; color: var(--danger); }
.footer { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center;
  z-index: 2; font-size: 11px; color: var(--text-faint); letter-spacing: .4px; }

/* ---- internal pages (home, users) ---- */
.page { position: relative; z-index: 1; max-width: 960px;
  margin: 0 auto; padding: 48px 24px; }
/* `.page-wide` removes the centred-column constraint for admin screens
   that need to spread across the viewport (the User Manager carries
   seven editable columns + an actions cluster — 960 px is too tight). */
.page.page-wide { max-width: 1500px; }
.page.page-wide .formgrid {
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Multi-select Department picker — a clickable label that opens a
   checkbox menu. Several departments stay selected at once (a Chief
   Officer belongs to Nautical AND All Personnel AND Vessel OMT). The
   hidden input mirrors the comma-separated value the server reads. */
.dept-picker {
  position: relative; display: block; width: 100%;
}
.dept-picker-btn {
  width: 100%; text-align: left;
  padding: 6px 28px 6px 8px; font-size: 13px;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: 6px; color: var(--text-primary);
  cursor: pointer; font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Caret indicator on the right edge — sized to match a native select. */
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.dept-picker-btn.is-empty { color: var(--text-muted); font-style: italic; }
.dept-picker-btn:hover { border-color: var(--accent); }
.dept-picker.is-open .dept-picker-btn { border-color: var(--accent); }

.dept-picker-pop {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-height: 280px; overflow-y: auto;
  background: var(--bg-popover); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 50;
}
.dept-picker-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 13px;
  white-space: nowrap;
}
.dept-picker-row:hover { background: var(--bg-input-hover); }
.dept-picker-row input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer;
}
.page h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.page .sub { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; }
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--text-muted); text-transform: uppercase; font-size: 11px;
  letter-spacing: 1px; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 7px;
  border: 1px solid var(--border-strong); background: var(--bg-input);
  color: var(--text-primary); cursor: pointer; }
.btn-sm:hover { background: var(--bg-input-hover); }
form.inline { display: inline; }
.formgrid { display: grid; gap: 14px; max-width: 420px; margin-top: 20px; }
.formgrid input, .formgrid select { width: 100%; padding: 10px 12px;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text-primary); font-size: 14px; }
.formgrid input:-webkit-autofill,
.formgrid input:-webkit-autofill:hover,
.formgrid input:-webkit-autofill:focus,
.formgrid input:autofill {
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  transition: background-color 9999s ease-in-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset !important;
          box-shadow: 0 0 0 1000px var(--bg-elev) inset !important;
}
select { background-color: var(--bg-elev); color: var(--text-primary); }
select option { background-color: var(--bg-popover); color: var(--text-primary); }
.row-input, .row-select {
  width: 100%; padding: 6px 8px; font-size: 13px;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: 6px; color: var(--text-primary);
}
.row-input:-webkit-autofill,
.row-input:-webkit-autofill:hover,
.row-input:-webkit-autofill:focus,
.row-input:autofill {
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  transition: background-color 9999s ease-in-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset !important;
          box-shadow: 0 0 0 1000px var(--bg-elev) inset !important;
}
td form.row-form { display: flex; align-items: center; gap: 6px; margin: 0; }
td.row-actions { white-space: nowrap; }
td.row-actions form { margin: 0; }

/* ---- main page ---- */
.mp-bg { position: fixed; inset: 0; z-index: 0;
  background: url('/static/img/vessel-background.jpg') center/cover no-repeat; }
.mp-bg::after { content: ""; position: absolute; inset: 0;
  background: var(--photo-overlay); }

.mp-watermark { position: fixed; top: 25vh; left: calc(7vw + 368px);
  transform: translate(-100%, -50%); height: 37.5vh; width: auto;
  opacity: .3; mix-blend-mode: screen; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 78%);
          mask-image: linear-gradient(to right, transparent 0%, #000 78%); }

.mp-system-tagline {
  position: fixed; top: 70px; left: calc(7vw + 368px - 33.158vh);
  right: auto; z-index: 1;
  font-size: 44px; font-weight: 300; letter-spacing: 12px;
  color: var(--text-faint); text-transform: uppercase;
  white-space: nowrap; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, #000 75%);
          mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, #000 75%);
}

.mp-header {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end;
  padding: calc(18px - 1mm) 3vw calc(18px - 1mm) calc(7vw + 38px);
  border-bottom: 1px solid var(--border);
}
.mp-vessel-name {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px; font-weight: 600; letter-spacing: 6px;
  color: var(--text-primary); text-transform: uppercase;
  user-select: none;
}

/* The "YUDIN" header text is the dark/light theme toggle — a real <button>
   wrapped in a form. `display: contents` keeps the form out of the layout
   so the button retains its absolute-centred header positioning. */
.theme-toggle-form { display: contents; }

.mp-vessel-name,
.hh-vessel-name,
.ptw-vessel-name {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 80ms ease, color 80ms ease;
}
.mp-vessel-name:active,
.hh-vessel-name:active,
.ptw-vessel-name:active {
  transform: translate(-50%, calc(-50% + 1px)) scale(0.985);
  color: var(--text-muted);
}
.mp-vessel-name:focus-visible,
.hh-vessel-name:focus-visible,
.ptw-vessel-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.mp-user-area { display: flex; align-items: center; gap: 14px; }
.mp-who { font-size: 12.5px; color: var(--text-muted); }
.mp-who strong { color: var(--text-primary); font-weight: 600; }

.mp-logout-form { margin: 0; }
.mp-logout {
  font-family: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); cursor: pointer;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  transition: border-color .15s, background .15s, color .15s;
}
.mp-logout:hover {
  background: var(--bg-input-hover);
  color: var(--text-primary); border-color: var(--accent);
}

.mp-admin-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  transition: border-color .15s, background .15s, color .15s;
}
.mp-admin-gear:hover {
  background: var(--bg-input-hover);
  color: var(--text-primary); border-color: var(--accent);
}

.mp-stage {
  position: relative; z-index: 2;
  min-height: calc(100vh - 60px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0 10vw;
}
.mp-hub { width: 80vw; max-width: 1600px; margin-top: calc(50vh - 3cm); }

.mp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.mp-card {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  padding: 24px 22px; min-height: 140px;
  background: var(--bg-elev);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .18s, background .18s, transform .18s;
  cursor: pointer;
  text-decoration: none; color: inherit;
}
.mp-card:hover {
  border-color: var(--accent);
  background: var(--bg-input-hover);
  transform: translateY(-3px);
}

.mp-ico-chip {
  width: 88px; height: 88px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-primary); flex-shrink: 0;
  transition: color .18s, border-color .18s, background .18s;
}
.mp-card:hover .mp-ico-chip {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-input-hover);
}

.mp-ico-mask {
  display: inline-block;
  width: 56px; height: 56px;
  background-color: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
  transition: background-color .18s;
}

.mp-text { flex: 1; min-width: 0; }
.mp-card h3 { font-size: 21px; font-weight: 600; letter-spacing: .3px; }
.mp-card p  { margin-top: 6px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.mp-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-faint);
  padding: 5px 10px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
}

.mp-footer {
  position: fixed; bottom: 14px; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 3vw;
  z-index: 2; font-size: 11px;
  color: var(--text-faint); letter-spacing: .4px;
}
.mp-credit { grid-column: 2; text-align: center; }
.mp-status {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 10.5px;
}
.mp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(63,209,122,.65);
}
.mp-status.offline { color: var(--danger); }
.mp-status.offline .mp-dot {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(255,90,90,.65);
}

.mp-toast {
  position: fixed; left: 50%; bottom: 64px;
  transform: translate(-50%, 16px);
  z-index: 10;
  padding: 10px 18px;
  font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.mp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- hse hub ---- */
.hh-bg { position: fixed; inset: 0; z-index: 0;
  background: url('/static/img/vessel-background.jpg') center/cover no-repeat; }
.hh-bg::after { content: ""; position: absolute; inset: 0;
  background: var(--photo-overlay); }

.hh-watermark { position: fixed; top: 25vh; left: calc(7vw + 368px);
  transform: translate(-100%, -50%); height: 37.5vh; width: auto;
  opacity: .3; mix-blend-mode: screen; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 78%);
          mask-image: linear-gradient(to right, transparent 0%, #000 78%); }

.hh-system-tagline {
  position: fixed; top: 70px; left: calc(7vw + 368px - 33.158vh);
  right: auto; z-index: 1;
  font-size: 44px; font-weight: 300; letter-spacing: 12px;
  color: var(--text-faint); text-transform: uppercase;
  white-space: nowrap; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, #000 75%);
          mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, #000 75%);
}

.hh-header {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px - 1mm) 3vw calc(18px - 1mm) 3vw;
  border-bottom: 1px solid var(--border);
}
.hh-vessel-name {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px; font-weight: 600; letter-spacing: 6px;
  color: var(--text-primary); text-transform: uppercase;
  user-select: none;
}

.hh-back-link {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); text-decoration: none;
  padding: 8px 13px 8px 11px; border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s, background .15s, color .15s;
}
.hh-back-link svg { display: block; }
.hh-back-link:hover {
  background: var(--bg-input-hover);
  color: var(--text-primary); border-color: var(--accent);
}

.hh-user-area { display: flex; align-items: center; gap: 14px; }
.hh-who { font-size: 12.5px; color: var(--text-muted); }
.hh-who strong { color: var(--text-primary); font-weight: 600; }

.hh-logout-form { margin: 0; }
.hh-logout {
  font-family: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); cursor: pointer;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  transition: border-color .15s, background .15s, color .15s;
}
.hh-logout:hover {
  background: var(--bg-input-hover);
  color: var(--text-primary); border-color: var(--accent);
}

.hh-stage {
  position: relative; z-index: 2;
  min-height: calc(100vh - 60px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0 10vw;
}
.hh-hub { width: 80vw; max-width: 1600px; margin-top: calc(50vh - 3cm); }

.hh-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.hh-card {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  padding: 24px 22px; min-height: 140px;
  background: var(--bg-elev);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .18s, background .18s, transform .18s;
  cursor: pointer;
  text-decoration: none; color: inherit;
}
.hh-card:hover {
  border-color: var(--accent);
  background: var(--bg-input-hover);
  transform: translateY(-3px);
}

/* Empty third slot — same footprint as a card, fully invisible.
   Reserves the grid cell so live cards keep their main-page width. */
.hh-card-slot-empty {
  min-height: 140px;
  visibility: hidden;
}

.hh-ico-chip {
  width: 88px; height: 88px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-primary); flex-shrink: 0;
  transition: color .18s, border-color .18s, background .18s;
}
.hh-card:hover .hh-ico-chip {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-input-hover);
}

.hh-text { flex: 1; min-width: 0; }
.hh-card h3 { font-size: 21px; font-weight: 600; letter-spacing: .3px; }
.hh-card p  { margin-top: 6px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.hh-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-faint);
  padding: 5px 10px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
}

.hh-footer {
  position: fixed; bottom: 14px; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 3vw;
  z-index: 2; font-size: 11px;
  color: var(--text-faint); letter-spacing: .4px;
}
.hh-credit { grid-column: 2; text-align: center; }
.hh-status {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 10.5px;
}
.hh-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(63,209,122,.65);
}

.hh-toast {
  position: fixed; left: 50%; bottom: 64px;
  transform: translate(-50%, 16px);
  z-index: 10;
  padding: 10px 18px;
  font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.hh-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- ptw ---- */

/* === chrome (inherited from hh- with ptw- prefix and a sub-nav block) === */
.ptw-bg { position: fixed; inset: 0; z-index: 0;
  background: url('/static/img/vessel-background.jpg') center/cover no-repeat; }
.ptw-bg::after { content: ""; position: absolute; inset: 0;
  background: var(--photo-overlay); }

.ptw-watermark { position: fixed; top: 25vh; left: calc(7vw + 368px);
  transform: translate(-100%, -50%); height: 30vh; width: auto;
  opacity: .22; mix-blend-mode: screen; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 78%);
          mask-image: linear-gradient(to right, transparent 0%, #000 78%); }

.ptw-system-tagline {
  position: fixed; top: 70px; left: calc(7vw + 368px - 33.158vh + 5cm);
  z-index: 1; font-size: 44px; font-weight: 300; letter-spacing: 12px;
  color: var(--text-faint); text-transform: uppercase; white-space: nowrap;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, #000 75%);
          mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, #000 75%);
}

.ptw-header {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px - 1mm) 3vw calc(18px - 1mm) 3vw;
  border-bottom: 1px solid var(--border);
}
.ptw-vessel-name {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 14px; font-weight: 600; letter-spacing: 6px;
  color: var(--text-primary); text-transform: uppercase;
  user-select: none;
}
.ptw-back-link {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); text-decoration: none;
  padding: 8px 13px 8px 11px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-input);
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s, background .15s, color .15s;
}
.ptw-back-link:hover { background: var(--bg-input-hover); color: var(--text-primary);
  border-color: var(--accent); }

.ptw-user-area { display: flex; align-items: center; gap: 14px; }
.ptw-who { font-size: 12.5px; color: var(--text-muted); }
.ptw-who strong { color: var(--text-primary); font-weight: 600; }
.ptw-logout-form { margin: 0; }
.ptw-logout {
  font-family: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); cursor: pointer;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-input);
  transition: border-color .15s, background .15s, color .15s;
}
.ptw-logout:hover {
  background: var(--bg-input-hover);
  color: var(--text-primary); border-color: var(--accent);
}

/* === sub-nav strip === */
.ptw-subnav {
  position: relative; z-index: 2;
  display: flex; gap: 4px; padding: 14px 3vw 0 3vw;
  margin-top: 7mm;
}
.ptw-subnav-link {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-muted); text-decoration: none;
  padding: 10px 18px;
  border-radius: 9px 9px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
}
.ptw-subnav-link.active {
  color: var(--text-primary);
  background: var(--bg-elev);
  border-color: var(--border);
}
.ptw-subnav-link:hover:not(.active) { color: var(--text-primary); }

/* === filter bar === */
.ptw-filter-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 3vw; margin-top: -1px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  backdrop-filter: blur(7px);
}
.ptw-search {
  flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-input);
}
.ptw-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-primary); font-size: 13px;
}
.ptw-search input::placeholder { color: var(--text-faint); }
.ptw-search-icon { color: var(--text-faint); }

.ptw-filter-group { display: flex; gap: 8px; }
.ptw-filter-group select {
  appearance: none;
  padding: 9px 32px 9px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-input);
  border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; min-width: 130px;
  font-family: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238aa0ab' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s, color .15s;
}
.ptw-filter-group select:hover { color: var(--text-primary); border-color: var(--accent); }

.ptw-clear-btn {
  padding: 9px 13px; font-size: 12px;
  color: var(--text-muted); background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer;
}
.ptw-clear-btn:hover { color: var(--text-primary); border-color: var(--accent); }

.ptw-active-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--text-muted); background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ptw-active-toggle:hover { color: var(--text-primary); border-color: var(--accent); }
.ptw-active-toggle.on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.ptw-active-toggle .ptw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 6px rgba(63,209,122,.6);
}

/* Summary pill: long-term-iso accent — orange semantic colour, not in the
   theme palette (LT iso is a domain marker, not a generic warning). Kept as
   literals on purpose so it stays distinct from --warning/--danger pills. */
.ptw-summary-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--dom-lt);
  background: color-mix(in srgb, var(--dom-lt) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--dom-lt) 45%, transparent);
  border-radius: 9px;
  text-decoration: none;
}
.ptw-summary-pill .ptw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dom-lt); box-shadow: 0 0 6px rgba(239,124,94,.7);
}
.ptw-summary-pill .ptw-count { color: var(--text-primary); font-weight: 700; }

/* All ballast tanks closed (0 open): pill drops the cautionary orange and
   takes the neutral, muted look of an off .ptw-active-toggle — but keeps a
   green dot so it reads as a calm "all clear" state, not a disabled control. */
.ptw-summary-pill.all-closed {
  color: var(--text-muted);
  background: var(--bg-input);
  border-color: var(--border);
}
.ptw-summary-pill.all-closed .ptw-dot {
  background: var(--success);
  box-shadow: 0 0 6px rgba(63,209,122,.6);
}
.ptw-summary-pill.all-closed .ptw-count { color: var(--text-primary); }

/* === table === */
.ptw-table-wrap {
  position: relative; z-index: 2;
  padding: 0 3vw 100px 3vw;
  height: calc(100vh - 200px - 7mm);
  overflow-y: auto;
}
.ptw-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ptw-table thead th {
  position: sticky; top: 0;
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1.4px; font-weight: 600; color: var(--text-faint);
  padding: 14px 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(7px);
}
.ptw-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.ptw-table tbody tr:hover { background: var(--bg-input-hover); }
.ptw-table tbody td { padding: 13px 12px; font-size: 13px; color: var(--text-primary); }

.ptw-row-actions {
  display: inline-flex; gap: 6px; opacity: 0; transition: opacity .15s;
}
.ptw-table tbody tr:hover .ptw-row-actions { opacity: 1; }
/* In modals the focused context is already small and intentional — always
   show row actions instead of revealing on hover. */
.ptw-modal .ptw-row-actions { opacity: 1; }
.ptw-row-action-form { margin: 0; }
.ptw-row-action-btn {
  font-size: 14px;
  padding: 5px 9px;
  color: var(--text-muted); cursor: pointer;
  background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 7px;
  text-decoration: none;
}
.ptw-row-action-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.ptw-row-action-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

/* === type / status / cert / method pills ===
   Type pills (cold/hot/underwater), cert pills (eic/mic) and method pills
   (lockout/tagout) carry semantic *domain* colours, not generic theme
   accents — they keep their literal palette in both themes so a permit's
   classification reads the same to a daylight bridge user as it does at
   night. Status pills follow the theme palette via --success/--warning/
   --danger; LT-iso (long-term isolation) is the one orange semantic that
   stays literal because it is a PTW-specific domain marker. */
.ptw-type-pill {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  border-radius: 6px;
  border: 1px solid;
  background: var(--bg-elev);
}
.ptw-type-pill.cold       { color: var(--dom-blue);
  border-color: color-mix(in srgb, var(--dom-blue) 45%, transparent); }
.ptw-type-pill.hot        { color: var(--dom-orange);
  border-color: color-mix(in srgb, var(--dom-orange) 45%, transparent); }
.ptw-type-pill.underwater { color: var(--dom-aqua);
  border-color: color-mix(in srgb, var(--dom-aqua) 45%, transparent); }
.ptw-type-flags {
  margin-left: 6px; font-size: 9.5px;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;
}

.ptw-status-pill {
  display: inline-block;
  padding: 4px 11px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px;
  border-radius: 14px;
  border: 1px solid;
  background: var(--bg-elev);
  cursor: inherit;
  font-family: inherit;
}
button.ptw-status-pill {
  cursor: pointer;
  font-family: inherit;
  /* Browser button defaults strip the pill outline of its rounded background
     on some engines; force the same look as the <span> variant. */
  line-height: 1;
}
button.ptw-status-pill-btn:hover { filter: brightness(1.18); }
button.ptw-status-pill-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.ptw-status-open       { color: var(--success); border-color: var(--success);
                         background: color-mix(in srgb, var(--success) 10%, transparent); }
.ptw-status-extended   { color: var(--warning); border-color: var(--warning);
                         background: color-mix(in srgb, var(--warning) 10%, transparent); }
.ptw-status-closed     { color: var(--text-muted); border-color: var(--text-muted); }
.ptw-status-lt-iso     { color: var(--dom-lt);
                         border-color: color-mix(in srgb, var(--dom-lt) 45%, transparent);
                         background: color-mix(in srgb, var(--dom-lt) 10%, transparent); }
.ptw-status-isolated   { color: var(--dom-lt);
                         border-color: color-mix(in srgb, var(--dom-lt) 45%, transparent);
                         background: color-mix(in srgb, var(--dom-lt) 10%, transparent); }
.ptw-status-deisolated { color: var(--success); border-color: var(--success);
                         background: color-mix(in srgb, var(--success) 10%, transparent); }

.ptw-cert-pill {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  border-radius: 6px; border: 1px solid;
  background: var(--bg-elev);
}
.ptw-cert-eic { color: var(--dom-blue);
  border-color: color-mix(in srgb, var(--dom-blue) 45%, transparent); }
.ptw-cert-mic { color: var(--dom-orange);
  border-color: color-mix(in srgb, var(--dom-orange) 45%, transparent); }

.ptw-methods { display: inline-flex; gap: 6px; }
.ptw-method-pill {
  display: inline-block; padding: 2px 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  border-radius: 5px; border: 1px solid;
}
.ptw-method-lockout { color: var(--text-primary); border-color: var(--border-strong); }
.ptw-method-tagout  { color: var(--dom-amber);
  border-color: color-mix(in srgb, var(--dom-amber) 45%, transparent); }

.ptw-lt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--dom-lt); padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--dom-lt) 45%, transparent);
  background: color-mix(in srgb, var(--dom-lt) 8%, transparent);
  border-radius: 9px;
}
.ptw-unlinked-note {
  margin-left: 6px;
  font-size: 10px; color: var(--text-faint);
  font-style: italic;
}
.ptw-lt-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dom-lt);
}
/* "was P-X" — for isos that were born linked to a permit but are currently
   unlinked from all permits. Visually muted vs. LT to flag the difference. */
.ptw-was-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-faint); padding: 2px 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 9px;
}

/* Iso state pills: green/amber/red carry theme palette; LT-iso orange stays
   literal as a PTW-specific domain colour. */
.ptw-iso-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 11.5px; font-weight: 600;
  border-radius: 14px; border: 1px solid; text-decoration: none;
}
.ptw-iso-all-isolated { color: var(--dom-lt);
                        border-color: color-mix(in srgb, var(--dom-lt) 45%, transparent);
                        background: color-mix(in srgb, var(--dom-lt) 10%, transparent); }
.ptw-iso-mixed        { color: var(--warning); border-color: var(--warning);
                        background: color-mix(in srgb, var(--warning) 10%, transparent); }
.ptw-iso-clear        { color: var(--success); border-color: var(--success);
                        background: color-mix(in srgb, var(--success) 10%, transparent); }
.ptw-iso-none         { color: var(--text-faint); border-color: var(--border); }

/* === tank hatches chip === */
.ptw-hatch-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 3px 11px;
  font-size: 11.5px; font-weight: 700;
  border-radius: 12px; border: 1px solid;
  color: var(--text-faint); border-color: var(--border);
  background: var(--bg-elev);
}
.ptw-hatch-chip.is-open {
  color: var(--dom-lt);
  border-color: color-mix(in srgb, var(--dom-lt) 45%, transparent);
  background: color-mix(in srgb, var(--dom-lt) 10%, transparent);
}

/* === audit page event-type pills ===
   Most event colours map to theme palette. EIC blue / LT orange / override
   purple use --dom-* tokens (theme-aware: bright on dark, deepened on light
   to clear WCAG AA) — they are domain markers, not theme accents. */
.ptw-entity-pill {
  display: inline-block; padding: 2px 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  border-radius: 5px; border: 1px solid;
  color: var(--text-muted); border-color: var(--border-strong);
}
.ptw-event-pill {
  display: inline-block; padding: 3px 9px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  border-radius: 6px; border: 1px solid;
}
.ptw-event-pill.ptw-event-created    { color: var(--success); border-color: var(--success); }
.ptw-event-pill.ptw-event-closed     { color: var(--text-muted); border-color: var(--text-muted); }
.ptw-event-pill.ptw-event-deleted    { color: var(--danger); border-color: var(--danger); }
.ptw-event-pill.ptw-event-linked     { color: var(--dom-blue);
  border-color: color-mix(in srgb, var(--dom-blue) 45%, transparent); }
.ptw-event-pill.ptw-event-unlinked   { color: var(--warning); border-color: var(--warning); }
.ptw-event-pill.ptw-event-isolated   { color: var(--dom-lt);
  border-color: color-mix(in srgb, var(--dom-lt) 45%, transparent); }
.ptw-event-pill.ptw-event-opened     { color: var(--dom-lt);
  border-color: color-mix(in srgb, var(--dom-lt) 45%, transparent); }
.ptw-event-pill.ptw-event-deisolated { color: var(--success); border-color: var(--success); }
.ptw-event-pill.ptw-event-modified   { color: var(--warning); border-color: var(--warning); }
.ptw-event-pill.ptw-event-override   { color: var(--dom-purple);
  border-color: color-mix(in srgb, var(--dom-purple) 45%, transparent); }
.ptw-tag-auto {
  margin-left: 6px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--dom-purple); padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--dom-purple) 45%, transparent);
  border-radius: 9px;
}
.ptw-diff-row code {
  padding: 2px 6px;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 11.5px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
}

/* === floating add === */
.ptw-floating-add {
  position: fixed; right: 24px; bottom: 60px;
  width: 56px; height: 56px;
  font-size: 28px; line-height: 1;
  border-radius: 50%; cursor: pointer;
  color: var(--text-primary);
  background: var(--bg-elev);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--border);
  transition: border-color .18s, background .18s, transform .18s;
  z-index: 4;
}
.ptw-floating-add:hover {
  border-color: var(--accent);
  background: var(--bg-input-hover);
  transform: translateY(-3px);
}

/* === footer === */
.ptw-footer {
  position: fixed; bottom: 14px; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 3vw;
  z-index: 2; font-size: 11px;
  color: var(--text-faint); letter-spacing: .4px;
}
.ptw-credit { grid-column: 2; text-align: center; }
.ptw-status {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 10.5px;
}
.ptw-status .ptw-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(63,209,122,.65);
}

/* === status pill popup-menu ===
   Host is a fixed-position floating layer; the actual menu is positioned by
   JS relative to the clicked pill (top-left origin set on .ptw-status-menu
   itself via inline style — see ptw.js). */
.ptw-status-menu-host {
  position: fixed; top: 0; left: 0;
  width: 0; height: 0;
  z-index: 30;
  pointer-events: none;
}
.ptw-status-menu-host:empty { display: none; }
.ptw-status-menu {
  position: absolute;
  pointer-events: auto;
  min-width: 200px;
  background: var(--bg-popover);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.ptw-status-menu-header {
  padding: 6px 10px 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-faint); border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.ptw-status-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 12px; font-family: inherit; color: var(--text-primary); text-align: left;
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer;
}
.ptw-status-menu-item:hover { background: var(--bg-input-hover); }
.ptw-status-menu-item.danger { color: var(--danger); }
.ptw-status-menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.ptw-status-menu-icon { font-size: 13px; line-height: 1; }
.ptw-status-menu-note {
  padding: 8px 12px;
  font-size: 11.5px; color: var(--text-muted); font-style: italic;
}

/* === toast === */
.ptw-toast {
  position: fixed; left: 50%; bottom: 64px;
  transform: translate(-50%, 16px);
  /* Above the modal backdrop (z-index 20) and status-menu host (30) so
     server-error toasts triggered from inside an open modal stay visible. */
  z-index: 60;
  padding: 10px 18px;
  font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.ptw-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Error variant — visibly distinct from the default success toast so
   validation failures don't blend into "everything is fine" colours. */
.ptw-toast.is-error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elev));
  border-color: var(--danger);
  text-transform: none;
  letter-spacing: .4px;
  font-size: 13px;
  max-width: min(640px, 92vw);
  text-align: left;
  line-height: 1.45;
  padding: 12px 18px;
  box-shadow: var(--shadow-card);
}

/* === modal host scaffold ===
   The backdrop scrim is rgba(6,14,20,.55) (a dark tint of bg-base) regardless
   of theme — a backdrop must darken the page below in both themes, and a
   white scrim on a light page would not register visually as an overlay. */
.ptw-modal-host {
  position: fixed; inset: 0;
  display: none;
  z-index: 20;
  background: rgba(6,14,20,.55);
  backdrop-filter: blur(10px) saturate(.8);
  -webkit-backdrop-filter: blur(10px) saturate(.8);
}
.ptw-modal-host.is-open { display: block; }
.ptw-modal {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 92vw);
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ptw-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.ptw-modal-header h2 {
  font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--text-primary);
  margin: 0;
}
.ptw-modal-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-muted); cursor: pointer;
  font-size: 18px; line-height: 1;
}
.ptw-modal-close:hover { color: var(--danger); border-color: var(--danger); }
.ptw-modal-body { flex: 1; overflow-y: auto; padding: 24px 26px 8px 26px; }
.ptw-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}

/* === ptw modal form fields & widgets === */
.ptw-modal-accent { color: var(--accent); }
.ptw-modal-accent-gold { color: var(--dom-amber); }

/* width modifier for the add-tank modal */
.ptw-add-tank-modal {
  width: min(560px, 92vw);
  box-shadow: var(--shadow-card);
}

/* Dedicated host for the IA manage mini-modal. Lives at body level so it
   escapes the iso modal's transform-containing-block (transform on the iso
   modal would otherwise trap any nested position:fixed child inside its
   bounds, clipping the IA modal to the iso modal's rectangle). */
.ptw-ia-modal-host {
  position: fixed; inset: 0;
  display: none;
  z-index: 40;
  background: rgba(6,14,20,.55);
  backdrop-filter: blur(10px) saturate(.8);
  -webkit-backdrop-filter: blur(10px) saturate(.8);
}
.ptw-ia-modal-host.is-open { display: flex; align-items: center; justify-content: center; }
.ptw-ia-modal-host > .ptw-modal {
  /* The host flex-centers us — cancel the default centered-absolute rules. */
  position: static; top: auto; left: auto; transform: none;
}

/* Topmost host for the custom confirm dialog — sits above the IA modal
   (z=40) and the status-menu popup (z=30) so confirm prompts triggered
   from inside any other modal are visible without dismissing the source. */
.ptw-confirm-host {
  position: fixed; inset: 0;
  display: none;
  z-index: 70;
  background: rgba(6,14,20,.55);
  backdrop-filter: blur(10px) saturate(.8);
  -webkit-backdrop-filter: blur(10px) saturate(.8);
}
.ptw-confirm-host.is-open { display: flex; align-items: center; justify-content: center; }
.ptw-confirm-host > .ptw-modal {
  position: static; top: auto; left: auto; transform: none;
}

/* IA manage modal — list of existing IAs above the create form */
.ptw-ia-manage-modal { width: min(620px, 92vw); }
.ptw-ia-list {
  border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden;
  background: var(--bg-input);
  max-height: 320px; overflow-y: auto;
  margin-bottom: 18px;
}
.ptw-ia-list-header,
.ptw-ia-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.ptw-ia-list-header {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-faint); background: var(--bg-elev);
}
.ptw-ia-row > .ptw-ia-name { color: var(--text-primary); font-weight: 500; }
.ptw-ia-row > .ptw-ia-position { color: var(--text-muted); }
.ptw-ia-row:last-child { border-bottom: none; }
.ptw-ia-row:hover { background: var(--bg-input-hover); }
.ptw-ia-row.ptw-ia-row-editing { background: var(--bg-input-hover); }
.ptw-ia-row-editing input[type="text"] {
  padding: 6px 10px; font-size: 12.5px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong); color: var(--text-primary);
  border-radius: 7px;
}
.ptw-ia-row-editing input:focus {
  border-color: var(--accent); outline: none;
}
.ptw-ia-row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.ptw-ia-add-section h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-faint); margin: 0 0 12px 0; font-weight: 600;
}

/* Field layout (scoped under .ptw-modal so bare label/input/select rules
   below cannot leak out of the modal subtree) */
.ptw-modal .ptw-field { margin-bottom: 18px; }
.ptw-modal .ptw-field-row { display: grid; gap: 16px; margin-bottom: 18px; }
.ptw-modal .ptw-date-type { grid-template-columns: 200px 1fr; }
.ptw-modal .ptw-cols-2 { grid-template-columns: 1fr 1fr; }
.ptw-modal label {
  display: block;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px;
  font-weight: 600; color: var(--text-faint); margin-bottom: 7px;
}
.ptw-modal input[type="text"],
.ptw-modal input[type="date"],
.ptw-modal input[type="number"],
.ptw-modal textarea,
.ptw-modal select {
  width: 100%; padding: 10px 14px; font-size: 13px;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--border-strong); border-radius: 9px;
  outline: none; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.ptw-modal input::placeholder,
.ptw-modal textarea::placeholder { color: var(--text-faint); font-style: italic; }
.ptw-modal input:focus,
.ptw-modal textarea:focus,
.ptw-modal select:focus {
  border-color: var(--accent); background: var(--bg-input-hover);
}
.ptw-modal textarea { resize: vertical; min-height: 80px; }
.ptw-modal select {
  appearance: none; cursor: pointer; padding-right: 38px; font-weight: 500;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23b9c8d0' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.ptw-modal .ptw-field-help { margin-top: 5px; font-size: 11px; color: var(--text-faint); }

/* Type pills (COLD / HOT / UNDERWATER) — domain colours stay literal. */
.ptw-pill-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ptw-type-radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-primary); cursor: pointer; user-select: none;
}
.ptw-type-radio.checked.cold  { color: var(--dom-blue);
  border-color: color-mix(in srgb, var(--dom-blue) 55%, transparent);
  background: color-mix(in srgb, var(--dom-blue) 10%, transparent); }
.ptw-type-radio.checked.hot   { color: var(--dom-orange);
  border-color: color-mix(in srgb, var(--dom-orange) 55%, transparent);
  background: color-mix(in srgb, var(--dom-orange) 10%, transparent); }
.ptw-type-radio.checked.cse   { color: var(--dom-purple);
  border-color: color-mix(in srgb, var(--dom-purple) 55%, transparent);
  background: color-mix(in srgb, var(--dom-purple) 10%, transparent); }
.ptw-type-radio.checked.under { color: var(--dom-aqua);
  border-color: color-mix(in srgb, var(--dom-aqua) 55%, transparent);
  background: color-mix(in srgb, var(--dom-aqua) 10%, transparent); }

/* Flag checkboxes (CSE / WAH / OVERBOARD / INT) */
.ptw-flag-row { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ptw-flag-check {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.0px;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-muted); cursor: pointer; user-select: none;
}
.ptw-flag-check.checked { color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ptw-flag-check.int.checked { color: var(--dom-amber);
  border-color: color-mix(in srgb, var(--dom-amber) 55%, transparent);
  background: color-mix(in srgb, var(--dom-amber) 10%, transparent); }
.ptw-flag-check.is-disabled {
  opacity: .35; cursor: not-allowed; pointer-events: none;
}
.ptw-check-box {
  width: 14px; height: 14px; border: 1.5px solid currentColor;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.ptw-flag-check.checked .ptw-check-box::after {
  content: "✓"; font-size: 11px; font-weight: 800; line-height: 1;
}

/* Tank sub-form (revealed when INT flag is on) — gold domain accent. */
.ptw-tank-section {
  margin-top: 4px; margin-bottom: 18px;
  padding: 16px;
  background: color-mix(in srgb, var(--dom-amber) 5%, transparent);
  border: 1px dashed color-mix(in srgb, var(--dom-amber) 40%, transparent);
  border-radius: 11px;
}
.ptw-tank-section-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.ptw-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--dom-amber);
  padding: 3px 9px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--dom-amber) 55%, transparent);
  background: color-mix(in srgb, var(--dom-amber) 10%, transparent);
}
.ptw-desc { font-size: 12px; color: var(--text-primary); }
.ptw-tank-row {
  display: grid;
  grid-template-columns: 1fr 110px 1fr 30px;
  gap: 10px; align-items: center; margin-bottom: 8px;
}
.ptw-tank-row select, .ptw-tank-row input { padding: 8px 12px; font-size: 12.5px; }
.ptw-remove-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 7px; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1;
}
.ptw-remove-btn:hover { color: var(--danger); border-color: var(--danger); }
.ptw-add-tank-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 8px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.0px;
  text-transform: uppercase; color: var(--dom-amber);
  background: color-mix(in srgb, var(--dom-amber) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--dom-amber) 35%, transparent);
  border-radius: 8px; cursor: pointer;
}
.ptw-add-tank-btn:hover {
  background: color-mix(in srgb, var(--dom-amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--dom-amber) 55%, transparent);
}

/* Read-only "linked tank" rows in the Edit PTW modal — pre-loaded by
   the server when the permit already has tanks attached. No form inputs,
   no × button: operators close / unlink through Tank Authorisation. */
.ptw-tank-row-existing {
  background: color-mix(in srgb, var(--bg-input) 60%, transparent);
  border: 1px dashed var(--border-strong);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ptw-tank-existing-name { font-weight: 600; color: var(--text); }
.ptw-tank-existing-pill {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  border-radius: 5px; vertical-align: middle;
}
.ptw-tank-existing-pill-open {
  color: #ef7c5e;
  background: color-mix(in srgb, #ef7c5e 12%, transparent);
  border: 1px solid color-mix(in srgb, #ef7c5e 35%, transparent);
}
.ptw-tank-existing-hatches { white-space: nowrap; }
.ptw-tank-existing-note { font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.ptw-tank-existing-lock { text-align: center; opacity: 0.65; cursor: help; }

/* Note banner inside modals */
.ptw-field-note {
  margin-top: 8px; padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 9px; font-size: 11px; color: var(--text-muted);
}

/* Modal footer buttons */
.ptw-btn {
  padding: 10px 22px; font-size: 12px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  border-radius: 9px; cursor: pointer; border: 1px solid;
  transition: all .15s;
  font-family: inherit;
}
.ptw-btn-secondary {
  color: var(--text-muted); background: var(--bg-input);
  border-color: var(--border-strong);
}
.ptw-btn-secondary:hover { color: var(--text-primary); border-color: var(--border-strong); }
.ptw-btn-primary { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.ptw-btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.ptw-id-preview { margin-right: auto; font-size: 12px; color: var(--text-faint); }
.ptw-id-preview strong { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* === permit register pagination (inline inside .ptw-filter-bar) === */
.ptw-pagination {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 0 auto;  /* push to the right edge of .ptw-filter-bar */
  padding: 0;
  background: transparent; border: none;
}
.ptw-pagination-info {
  min-width: 92px; text-align: center;
  font-size: 11px; color: var(--text-faint);
  letter-spacing: .3px; white-space: nowrap;
}
.ptw-pagination-info strong {
  color: var(--text-primary); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ptw-pagination-buttons { display: inline-flex; gap: 4px; }
.ptw-page-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.ptw-page-btn:hover:not(:disabled) {
  background: var(--bg-input-hover);
  color: var(--text-primary);
  border-color: var(--accent);
}
.ptw-page-btn:disabled {
  opacity: .35; cursor: not-allowed;
}

/* === iso modal interior (table + action cards + link-existing picker) === */

/* Iso modal is wider than the default .ptw-modal so the two action cards
   (Add new / Link existing) and the linkable-row grid fit comfortably. */
.ptw-iso-modal { width: min(1080px, 96vw); }
.ptw-iso-modal .ptw-modal-body { overflow-x: hidden; }



/* Header pill linking the modal to its parent permit — EIC blue domain colour. */
.ptw-iso-permit-ref {
  font-size: 13px; color: var(--dom-blue);
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--dom-blue) 40%, transparent);
  background: color-mix(in srgb, var(--dom-blue) 8%, transparent);
  letter-spacing: 1.0px; text-decoration: none;
  margin-left: 10px;
}

/* Linked-isos table inside the modal body */
.ptw-iso-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ptw-iso-table thead th {
  text-align: left;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 1.4px; font-weight: 600; color: var(--text-faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.ptw-iso-table tbody tr { transition: background .12s; }
.ptw-iso-table tbody tr:hover { background: var(--bg-input-hover); }
.ptw-iso-table tbody td {
  padding: 11px 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ptw-iso-table .ptw-iso-id {
  font-weight: 600; color: var(--text-primary); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ptw-iso-table .ptw-ia { color: var(--text-primary); font-size: 12px; }
.ptw-iso-table .ptw-description { color: var(--text-primary); max-width: 240px; }
.ptw-iso-table .ptw-keys {
  color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums;
}
.ptw-iso-table .ptw-empty-row,
.ptw-link-existing-form .ptw-empty-row {
  text-align: center; color: var(--text-faint); font-style: italic;
  padding: 16px 12px;
}

/* Action zone below the table: two side-by-side cards (Add new | Link existing) */
.ptw-iso-action-zone {
  margin-top: 20px;
  display: grid;
  /* minmax(0, 1fr) lets each column shrink below its content min-width so
     the linkable-row grid does not push past the modal boundary. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.ptw-action-card { min-width: 0; }
.ptw-action-card {
  padding: 16px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: border-color .15s, background .15s;
}
.ptw-action-card[open] {
  border-color: var(--accent);
  background: var(--bg-input-hover);
}
.ptw-action-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer; user-select: none;
  list-style: none;
}
.ptw-action-card-title::-webkit-details-marker { display: none; }
.ptw-action-plus {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent); font-size: 14px; line-height: 1; font-weight: 600;
}

/* Inline create-new-iso form inside the left action card */
.ptw-inline-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px 14px;
  align-items: center;
}
.ptw-inline-form label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  font-weight: 600; color: var(--text-faint); margin-bottom: 0;
}
.ptw-inline-form input[type="text"],
.ptw-inline-form select {
  width: 100%; padding: 8px 12px; font-size: 12.5px;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--border-strong); border-radius: 7px;
  outline: none; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.ptw-inline-form input[type="text"]:focus,
.ptw-inline-form select:focus {
  border-color: var(--accent); background: var(--bg-input-hover);
}
.ptw-inline-form select {
  appearance: none; cursor: pointer; padding-right: 32px; font-weight: 500;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23b9c8d0' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ptw-inline-form .ptw-pill-group { display: inline-flex; gap: 6px; }
.ptw-inline-form .ptw-type-radio {
  padding: 5px 11px;
  font-size: 11px; font-weight: 600; letter-spacing: .6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  border-radius: 6px;
  color: var(--text-primary); cursor: pointer; user-select: none;
}
.ptw-inline-form .ptw-type-radio.eic.checked  {
  color: var(--dom-blue);
  border-color: color-mix(in srgb, var(--dom-blue) 55%, transparent);
  background: color-mix(in srgb, var(--dom-blue) 10%, transparent);
}
.ptw-inline-form .ptw-type-radio.mic.checked  {
  color: var(--dom-orange);
  border-color: color-mix(in srgb, var(--dom-orange) 55%, transparent);
  background: color-mix(in srgb, var(--dom-orange) 10%, transparent);
}
.ptw-method-row {
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.ptw-method-check {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-primary); cursor: pointer; user-select: none;
}
.ptw-method-check.checked {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ptw-method-check input[type="checkbox"] { display: none; }
.ptw-keys-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ptw-form-submit-row {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: flex; justify-content: flex-end; gap: 8px;
}

/* Link-existing picker (right action card) */
.ptw-link-existing-form { margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border); }
.ptw-linkable-list {
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-input);
  max-height: 260px; overflow-y: auto;
}
.ptw-linkable-row {
  display: grid;
  /* Compact widths so a single row fits within the action-card column even
     after the scrollbar is rendered. minmax(0,...) on the flexible cells
     prevents long descriptions from forcing the row past its container. */
  grid-template-columns: 16px 90px 42px 90px minmax(0, 1fr) minmax(0, 110px);
  gap: 8px; align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px; cursor: pointer;
  transition: background .12s;
}
.ptw-linkable-row > * { min-width: 0; }
.ptw-linkable-row:last-child { border-bottom: none; }
.ptw-linkable-row:hover { background: var(--bg-input-hover); }
.ptw-linkable-row.checked { background: color-mix(in srgb, var(--success) 8%, transparent); }

/* The real <input type="checkbox"> stays in the DOM (so the form submits
   its value) but is hidden — visual selection is rendered by the sibling
   .ptw-linkable-check-box span which gets the .checked treatment via JS
   in app/static/js/ptw.js (browsers do not render ::after pseudo-elements
   on <input> form controls reliably, so the box-via-span pattern is the
   portable approach used by the mockup). */
.ptw-linkable-check { display: none; }
.ptw-linkable-check-box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.ptw-linkable-row.checked .ptw-linkable-check-box {
  border-color: var(--accent);
  background: var(--accent);
}
.ptw-linkable-row.checked .ptw-linkable-check-box::after {
  content: "\2713"; font-size: 11px; font-weight: 800;
  color: var(--accent-fg); line-height: 1;
}
.ptw-iso-id-link {
  font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ptw-linkable-desc {
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptw-linkable-ptw {
  justify-self: end;
  font-size: 11px; color: var(--text-faint);
  white-space: nowrap;
}
/* PTW reference link inside the linkable row — EIC blue domain colour. */
.ptw-linkable-ptw a {
  color: var(--dom-blue); text-decoration: none; font-weight: 600;
}
.ptw-linkable-ptw a:hover { text-decoration: underline; }
.ptw-linkable-row-active-other .ptw-lt-badge { display: none; }
.ptw-linkable-actions {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: flex-end;
}

/* Select + inline action button (e.g. IA select + "+ NEW IA" trigger) */
.ptw-select-with-action {
  display: flex; gap: 8px; align-items: stretch;
}
.ptw-select-with-action select { flex: 1; }
.ptw-add-ia-btn {
  flex-shrink: 0;
  padding: 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.0px;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.ptw-add-ia-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
}

/* Close-confirm modal (still-isolated → convert to LT prompt) */
.ptw-close-confirm-modal {
  width: min(520px, 92vw);
  box-shadow: var(--shadow-card);
}
/* Generic confirm dialog — replaces window.confirm() for delete buttons
   etc. Matches the close-confirm width/shadow language. */
.ptw-confirm-modal {
  width: min(440px, 92vw);
  box-shadow: var(--shadow-card);
}
.ptw-btn.ptw-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--accent-fg);
}
.ptw-btn.ptw-btn-danger:hover { filter: brightness(1.08); }
.ptw-confirm-lead {
  font-size: 13px; line-height: 1.55; color: var(--text-primary);
}
.ptw-confirm-lead strong { color: var(--text-primary); font-weight: 600; }
.ptw-confirm-iso-list {
  margin: 14px 0 4px 18px; padding: 0;
  list-style: disc; color: var(--text-muted);
  font-size: 12.5px; line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.ptw-confirm-form { display: inline; margin: 0; }

/* Stepper (add-tank modal hatches counter) */
.ptw-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--bg-input); overflow: hidden; width: 180px;
}
.ptw-stepper-btn {
  width: 38px; background: var(--bg-input);
  color: var(--text-primary); border: none; cursor: pointer;
  font-size: 16px; font-weight: 600;
  transition: background .15s, color .15s;
}
.ptw-stepper-btn:hover { background: var(--bg-input-hover); color: var(--accent); }
.ptw-stepper input {
  flex: 1; min-width: 0; border: none; background: transparent;
  color: var(--text-primary); text-align: center;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  outline: none; padding: 0;
}

/* ----------------------------------------------------------------------
 * Light-theme overrides for elements that can't be expressed via tokens.
 * Specifically: backdrop photos and the Micoperi watermark, which rely on
 * dark blends and would be unreadable on a light surface.
 * --------------------------------------------------------------------*/

body.theme-light .login-bg,
body.theme-light .mp-bg,
body.theme-light .hh-bg,
body.theme-light .ptw-bg,
body.theme-light .sy-bg,
body.theme-light .login-logo,
body.theme-light .mp-watermark,
body.theme-light .hh-watermark,
body.theme-light .ptw-watermark,
body.theme-light .sy-watermark {
  display: none;
}

/* ----------------------------------------------------------------------
 * rights-manager — assignment screen (/users/{id}/rights)
 * --------------------------------------------------------------------*/
.page .back { font-size: 13px; }

.rm-saved {
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--bg-input-hover); color: var(--text-primary);
  padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
}

.rm-module {
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--bg-elev); overflow: hidden; margin-bottom: 18px;
}
.rm-module-head {
  padding: 13px 18px; font-size: 15px; font-weight: 600;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 9px;
}
.rm-module-head .chev { color: var(--text-muted); font-size: 12px; }
.rm-module-body { padding: 16px 18px 6px; }

.rm-group { margin-bottom: 16px; }
.rm-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); margin-bottom: 9px;
}
.rm-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 32px; }
.rm-perm {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; cursor: pointer;
}
.rm-perm input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

.rm-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
}
.rm-count { font-size: 12px; color: var(--text-faint); }
.rm-save {
  padding: 11px 22px; border: none; border-radius: 9px;
  background: var(--accent-grad); color: var(--accent-fg);
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer;
}

.rm-admin-note {
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--bg-elev); padding: 14px 16px; font-size: 14px;
  color: var(--text-muted); line-height: 1.6;
}

/* ===================================================================
   SYNERGI (SOC module) — sy- prefix.
   Chrome duplicated from the ptw- rules; dashboard rules ported from
   docs/design/references/synergi-dashboard-mockup-v1.html.
   =================================================================== */

/* === chrome (inherited from ptw- with the sy- prefix) === */
.sy-bg { position: fixed; inset: 0; z-index: 0;
  background: url('/static/img/vessel-background.jpg') center/cover no-repeat; }
.sy-bg::after { content: ""; position: absolute; inset: 0;
  background: var(--photo-overlay); }

.sy-watermark { position: fixed; top: 25vh; left: calc(7vw + 368px);
  transform: translate(-100%, -50%); height: 30vh; width: auto;
  opacity: .22; mix-blend-mode: screen; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 78%);
          mask-image: linear-gradient(to right, transparent 0%, #000 78%); }

.sy-system-tagline {
  position: fixed; top: calc(70px - 3mm); left: calc(7vw + 368px - 33.158vh + 10cm);
  z-index: 1; font-size: 44px; font-weight: 300; letter-spacing: 12px;
  color: var(--text-faint); text-transform: uppercase; white-space: nowrap;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, #000 75%);
          mask-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, #000 75%);
}

.sy-header {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px - 1mm) 3vw calc(18px - 1mm) 3vw;
  border-bottom: 1px solid var(--border);
}
.sy-vessel-name {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 14px; font-weight: 600; letter-spacing: 6px;
  color: var(--text-primary); text-transform: uppercase;
  background: none; border: none; cursor: pointer; font-family: inherit;
  user-select: none;
}
.sy-back-link {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); text-decoration: none;
  padding: 8px 13px 8px 11px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-input);
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s, background .15s, color .15s;
}
.sy-back-link:hover { background: var(--bg-input-hover); color: var(--text-primary);
  border-color: var(--accent); }

.sy-user-area { display: flex; align-items: center; gap: 14px; }
.sy-who { font-size: 12.5px; color: var(--text-muted); }
.sy-who strong { color: var(--text-primary); font-weight: 600; }
.sy-logout-form { margin: 0; }
.sy-logout {
  font-family: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); cursor: pointer;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-input);
  transition: border-color .15s, background .15s, color .15s;
}
.sy-logout:hover {
  background: var(--bg-input-hover);
  color: var(--text-primary); border-color: var(--accent);
}
.sy-qr-link {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); text-decoration: none;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-input);
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color .15s, background .15s, color .15s;
}
.sy-qr-link:hover {
  background: var(--bg-input-hover);
  color: var(--text-primary); border-color: var(--accent);
}

/* === sub-nav strip === */
.sy-subnav {
  position: relative; z-index: 2;
  display: flex; gap: 4px; padding: 14px 3vw 0 3vw;
  border-bottom: 1px solid var(--border);
}
.sy-subnav-link {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-muted); text-decoration: none;
  padding: 10px 18px;
  border-radius: 9px 9px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
}
.sy-subnav-link.active {
  color: var(--text-primary);
  background: var(--bg-elev);
  border-color: var(--border);
}
.sy-subnav-link:hover:not(.active) { color: var(--text-primary); }
.sy-subnav-badge {
  background: color-mix(in srgb, var(--dom-amber) 18%, transparent);
  color: var(--dom-amber);
  font-size: 9px; font-weight: 700;
  border-radius: 8px; padding: 1px 6px; margin-left: 6px;
}

/* === content stage === */
.sy-stage {
  position: relative; z-index: 2;
  padding: 20px 3vw 90px 3vw;
}

/* === footer === */
.sy-footer {
  position: fixed; bottom: 14px; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 3vw;
  z-index: 2; font-size: 11px;
  color: var(--text-faint); letter-spacing: .4px;
}
.sy-credit { grid-column: 2; text-align: center; }
.sy-status {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 1.2px; font-size: 10.5px;
}
.sy-status .sy-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(63,209,122,.65);
}

/* === toast (state classes match synergi.js: .show / .error) === */
.sy-toast {
  position: fixed; left: 50%; bottom: 64px;
  transform: translate(-50%, 16px);
  z-index: 60;
  padding: 10px 18px;
  font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.sy-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.sy-toast.error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elev));
  border-color: var(--danger);
  text-transform: none;
  letter-spacing: .4px;
  font-size: 13px;
  max-width: min(640px, 92vw);
  text-align: left;
  line-height: 1.45;
  padding: 12px 18px;
  box-shadow: var(--shadow-card);
}

/* === dashboard (ported from synergi-dashboard-mockup-v1.html) === */
.sy-period { display: flex; gap: 6px; margin-bottom: 14px; }
.sy-period span {
  font-size: 11px; padding: 5px 12px; border-radius: 7px;
  color: var(--text-muted); cursor: pointer;
  border: 1px solid var(--border-strong);
  transition: color .15s, border-color .15s, background .15s;
}
.sy-period span:hover:not(.on) {
  color: var(--text-primary); border-color: var(--accent);
}
.sy-period span.on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Period-report export — passive looks like a period pill, hover turns it
   into the accent button. */
.sy-period-export {
  margin-left: 14px;
  font-size: 11px; padding: 5px 12px; border-radius: 7px;
  color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--border-strong); background: transparent;
  transition: background .15s, color .15s, border-color .15s,
    box-shadow .15s, transform .15s;
}
.sy-period-export:hover {
  background: var(--accent-grad); color: var(--accent-fg);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(47, 143, 134, 0.4);
  transform: translateY(-1px);
}

.sy-stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sy-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; }
.sy-tile {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 15px;
  display: block; color: inherit; text-decoration: none;
}
.sy-tile .n { font-size: 27px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.sy-tile .l {
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-muted); margin-top: 6px;
}
.sy-tile.accent .n { color: var(--accent); }
.sy-tile.hot .n { color: var(--dom-lt); }
.sy-tile.warn .n { color: var(--dom-amber); }

.sy-proj {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 210px;
  background: color-mix(in srgb, var(--dom-blue) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--dom-blue) 25%, transparent);
  border-radius: 10px; padding: 11px 14px;
}
.sy-proj-k { color: var(--text-muted); text-transform: uppercase;
  font-size: 10px; letter-spacing: 1px; }
.sy-proj-v { color: var(--dom-blue); font-weight: 700; font-size: 15px; }
.sy-proj-since { color: var(--text-muted); font-size: 11px; }
.sy-proj-acts { display: flex; gap: 6px; margin-top: 5px; }
.sy-proj-btn {
  border: 1px solid var(--border-strong); color: var(--text-muted);
  background: var(--bg-input); border-radius: 6px; padding: 3px 9px;
  font-size: 10px; cursor: pointer; font-family: inherit;
}
.sy-proj-btn:hover { color: var(--text-primary); border-color: var(--accent); }

.sy-panel {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 15px;
}
.sy-panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.sy-panel-hd .ttl {
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--text-muted);
}
.sy-panel-hd .ttl b { color: var(--text-primary); }
.sy-panel-foot { margin-top: 10px; }

/* Frosted-glass dashboard cards. In dark mode the cards turn more opaque
   and blur the vessel photo behind them so the text reads clearly; light
   mode keeps its opaque surfaces. */
.sy-tile, .sy-panel, .sy-proj {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.theme-dark .sy-tile,
body.theme-dark .sy-panel {
  background: rgba(13, 22, 30, 0.66);
}
body.theme-dark .sy-proj {
  background: color-mix(in srgb, var(--dom-blue) 14%, rgba(13, 22, 30, 0.74));
}
/* Hover lift only on actionable cards (rendered as <a>); a purely
   informational card stays static. */
a.sy-tile, a.sy-panel, a.sy-proj {
  transition: transform .16s ease, box-shadow .16s ease;
}
a.sy-tile:hover, a.sy-panel:hover, a.sy-proj:hover {
  transform: translateY(-4px) scale(1.02);
}
body.theme-dark a.sy-tile:hover,
body.theme-dark a.sy-panel:hover,
body.theme-dark a.sy-proj:hover {
  box-shadow: 0 8px 28px rgba(63, 209, 122, 0.30);
}
body.theme-light a.sy-tile:hover,
body.theme-light a.sy-panel:hover,
body.theme-light a.sy-proj:hover {
  box-shadow: 0 10px 26px rgba(30, 60, 80, 0.20);
}
.sy-count { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 8px; }
.sy-count.amber {
  background: color-mix(in srgb, var(--dom-amber) 13%, transparent);
  color: var(--dom-amber);
  border: 1px solid color-mix(in srgb, var(--dom-amber) 40%, transparent);
}
.sy-count.tang {
  background: color-mix(in srgb, var(--dom-lt) 13%, transparent);
  color: var(--dom-lt);
  border: 1px solid color-mix(in srgb, var(--dom-lt) 40%, transparent);
}

.sy-chart-ttl {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.sy-chart-row { display: flex; gap: 12px; align-items: center; }
/* Soft depth for the dashboard charts (screen only — the PDF stays flat). */
.sy-panel svg { filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.28)); }
.sy-legend {
  font-size: 10px; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 3px;
}
.sy-legend i {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 5px;
}
.sy-legend-empty { color: var(--text-faint); font-style: italic; }

.sy-crow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.sy-crow:last-child { border-bottom: none; }
.sy-crow .desc {
  color: var(--text-primary); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sy-crow .loc { color: var(--text-muted); flex-shrink: 0; }
.sy-crow .obs {
  color: var(--text-faint); flex-shrink: 0;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sy-crow-empty { padding: 12px 6px; font-size: 12px; color: var(--text-faint);
  font-style: italic; }
.sy-typ {
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; flex-shrink: 0;
}
.sy-typ.obs { background: color-mix(in srgb, var(--dom-blue) 13%, transparent);
  color: var(--dom-blue); }
.sy-typ.int { background: color-mix(in srgb, var(--dom-orange) 13%, transparent);
  color: var(--dom-orange); }
.sy-typ.pos { background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent); }
.sy-pill {
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 9px; flex-shrink: 0;
  background: color-mix(in srgb, var(--dom-lt) 13%, transparent);
  color: var(--dom-lt);
  border: 1px solid color-mix(in srgb, var(--dom-lt) 35%, transparent);
}
.sy-btn-go {
  background: var(--accent-grad); color: var(--accent-fg);
  font-size: 11px; font-weight: 600; border-radius: 6px;
  padding: 6px 12px; display: inline-block;
  border: none; cursor: pointer; font-family: inherit; text-decoration: none;
}
.sy-btn-go:hover { filter: brightness(1.08); }
.sy-btn-ghost {
  background: var(--bg-input); color: var(--text-muted);
  font-size: 11px; font-weight: 600; border-radius: 6px;
  padding: 6px 12px; display: inline-block;
  border: 1px solid var(--border-strong); cursor: pointer; font-family: inherit;
}
.sy-btn-ghost:hover { color: var(--text-primary); border-color: var(--accent); }
.sy-export-row { text-align: right; margin-top: 10px; }

.sy-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.sy-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Pending-layout tile row carries five tiles (Cards · Obs · Int · Open ·
   Pending) instead of four. */
.sy-tiles-5 { grid-template-columns: repeat(5, 1fr); }
/* No-pending Statistic charts row: two pie panels + a third column that
   stacks the Top-categories bar over the Outstanding preview. align-items
   stretches the two pie panels to the (taller) third column so the pies
   have room to grow downward. */
.sy-grid-stat { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: stretch; }
.sy-grid-stat > .sy-panel { display: flex; flex-direction: column; }
.sy-grid-stat > .sy-panel .sy-apex-pie,
.sy-grid-stat > .sy-panel .sy-apex-bar { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ApexCharts charts (no-pending Statistic) — two pies + the Top-categories
   horizontal bar. The lib injects its own SVG; constrain the host so it fills
   the panel width and the static-SVG drop-shadow rule doesn't double up. */
.sy-apex-pie, .sy-apex-bar { width: 100%; min-height: 290px; }
.sy-apex-bar { display: block; }
.sy-apex-bar .apexcharts-canvas, .sy-apex-pie .apexcharts-canvas { margin: 0 auto; }
.sy-apex-bar svg, .sy-apex-pie svg { filter: none; }
.sy-apex-empty {
  font-size: 11px; color: var(--text-muted); opacity: .6;
  display: flex; align-items: center; justify-content: center; min-height: 200px;
}
/* The ApexCharts legend follows the page theme rather than its inline default. */
.sy-apex-pie .apexcharts-legend-text { color: var(--text-muted) !important; }
/* Custom hover tooltip — the slice's department name shown large. */
.sy-apex-tip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.sy-apex-tip-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.sy-apex-tip-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sy-apex-tip-val { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
/* Slice-4 Personal dashboard split — "My open actions" widget dominant
   on the left (2fr), Outstanding panel + sync warnings stacked on the
   right (1fr). Mirrors the brainstorm mockup at
   `.superpowers/brainstorm/997-1779632630/content/dashboard-my-actions.html`. */
/* minmax(0, …): without the 0 floor a track's implicit `auto` minimum lets long
   unbreakable content (e.g. a long Outstanding row) blow the column past its fr
   share. The 0 floor keeps the columns at their intended 2.2 : 1 ratio. */
.sy-grid-widget { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 12px; }
.sy-widget-col { display: flex; flex-direction: column; gap: 12px; }
.sy-side-col { display: flex; flex-direction: column; gap: 12px; }
.mt { margin-top: 12px; }

/* Outstanding panel: cap at a quarter of the viewport so it never stretches
   to full width (e.g. in Statistic mode) — DZ 2026-06-10. */
.sy-outstanding { max-width: 25vw; min-width: 280px; }
/* In My-Data mode it lives in the right 1fr column — let it fill that column so
   its right edge lines up with the Current Project card / page edge. */
.sy-side-col .sy-outstanding { max-width: none; min-width: 0; }

/* Slice-4: Personal | Statistic mode bar at the top of the dashboard
   stage. Pill-switch on the left; period selector (Statistic mode only)
   reads from inside _dashboard_stats.html and lives in its own row
   below. The toggle reuses the .sy-period accent style but with a
   slightly heavier border and a wider gap to read as the page-level
   mode rather than a stat filter. */
.sy-dash-modebar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.sy-dash-modes {
  display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px;
  overflow: hidden;
}
.sy-dash-mode {
  background: transparent; color: var(--text-muted);
  border-right: 1px solid var(--border-strong);
  padding: 6px 16px; font-size: 12px; text-decoration: none;
  transition: background .15s, color .15s;
}
.sy-dash-mode:last-child { border-right: 0; }
.sy-dash-mode:hover { color: var(--text-primary); }
.sy-dash-mode.on {
  background: var(--accent-grad); color: var(--accent-fg);
}

/* "My Data" tile strip — six status tiles plus the project card stretched
   across the full width of the dashboard, matching the 2fr/1fr table grid
   below. Each tile flexes (`flex: 1 1 0`) so they share width equally;
   the project card has a heavier flex so the strip ends with a slightly
   wider anchor. Wraps to a second row only on truly narrow viewports. */
.sy-mydata-tiles {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
  width: 100%;
}
.sy-mydata-tile {
  flex: 1 1 0; min-width: 120px;
  position: relative;
  /* Align number + label consistently across every tile in the row so
     the strip reads as a horizontal data stripe. The tile body is a
     flex column with both children center-aligned; the .n number gets
     a fixed line-height so taller-cap labels don't shift it. */
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  min-height: 86px;
}
.sy-mydata-tiles > .sy-proj {
  /* Project card stretches the same as a tile so the strip is rhythmic;
     a touch wider via flex-basis so it reads as the row's anchor. */
  flex: 1.4 1 0; min-width: 200px;
}
/* Disabled-tile variant: looks like a hot tile but is not interactive.
   Hover lift is suppressed. Used by Open SOC when user.department
   is missing — keeps the count honest at zero, blocks the navigation. */
.sy-mydata-tile-disabled {
  cursor: not-allowed; opacity: .55;
}
.sy-mydata-tile-disabled:hover { transform: none; box-shadow: none; }
.sy-mydata-tile .n {
  font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.sy-mydata-tile .l {
  font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-muted); margin-top: 6px;
  /* Keep two-word labels on one line where possible; long labels like
     "Actions Near Deadline" naturally wrap to two centred lines. */
  text-align: center;
}
button.sy-mydata-tile-btn {
  font: inherit; color: inherit; cursor: pointer;
  /* Override the browser button defaults so the tile reads as a card. */
  background: var(--bg-elev); border: 1px solid var(--border);
}

/* Subtle hover lift — small enough to feel like instrument-panel
   feedback rather than a marketing CTA. The shadow tints in the tile's
   accent colour for hot/warn variants so the affordance reinforces
   urgency. */
.sy-mydata-tile { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.sy-mydata-tile:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.sy-mydata-tile.hot:hover {
  border-color: color-mix(in srgb, var(--dom-lt) 50%, var(--border));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--dom-lt) 25%, transparent);
}
.sy-mydata-tile.warn:hover {
  border-color: color-mix(in srgb, var(--dom-amber) 50%, var(--border));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--dom-amber) 25%, transparent);
}

/* Past Deadline pulse — 4-second cycle, deliberately slow so it reads
   as ambient urgency rather than a flashing alarm. Respects prefers-
   reduced-motion. */
@keyframes sy-mydata-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dom-lt) 50%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--dom-lt) 0%, transparent); }
}
.sy-mydata-pulse { animation: sy-mydata-pulse 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sy-mydata-pulse { animation: none; }
}

/* Match widget height to the Outstanding panel sitting in the 1fr
   column. Outstanding renders ~5 preview rows + header + button →
   ~440 px naturally. Cap the widget at the same height and scroll
   its table body internally so the two panels visually align. */
.sy-grid-widget { align-items: stretch; }
.sy-grid-widget > .sy-widget-col > .sy-my-actions,
.sy-grid-widget > .sy-side-col > .sy-panel {
  display: flex; flex-direction: column;
  max-height: 460px;
}
.sy-my-actions-table-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  /* Custom scrollbar to keep the instrument-panel feel — subtle, not
     OS-default chrome. Falls back gracefully on engines without
     `::-webkit-scrollbar` (the row count is bounded anyway). */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.sy-my-actions-table-wrap::-webkit-scrollbar { width: 8px; }
.sy-my-actions-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
}
.sy-my-actions-table-wrap::-webkit-scrollbar-track { background: transparent; }

/* Switcher accent variants — Near/Past Deadline tabs in the widget
   header echo the tile colours so the user reads the connection between
   tile click and tab state at a glance. */
.sy-my-actions-switch-warn.on { background: var(--dom-amber); color: #1a1a1a; }
.sy-my-actions-switch-hot.on  { background: var(--dom-lt);    color: #fff; }

/* Cases view — the `Vessel Open Cases` widget content. The table shape
   is different (meeting per row, with an Open count badge) but reuses
   the same `.sy-my-actions-table-wrap` container so the height match
   with Outstanding still holds.

   Column layout DZ asked for: Case | Date | Brief description | Author |
   Open (centred header + centred badge) | (Open ↗ button right-aligned
   under the Case column).
   - Case / Date / Author stay nowrap so they hug their content.
   - Brief description gets the remaining flex room and wraps long values.
   - Open column is centred at fixed 80px so header text and the badge
     sit visually centred.
   - Action cell width matches the Case column width so the Open ↗ button
     right-aligns visually under the Case label above it. */
.sy-my-actions-cases th.sy-my-actions-case-col,
.sy-my-actions-cases td.sy-my-actions-case-col,
.sy-my-actions-cases th.sy-my-actions-date,
.sy-my-actions-cases td.sy-my-actions-date,
.sy-my-actions-cases th.sy-my-actions-author,
.sy-my-actions-cases td.sy-my-actions-author {
  white-space: nowrap;
}
/* Cases-table-specific overrides removed in favour of the shared
   `.sy-my-actions-case[-col]` rule above so the Case column matches
   between Actions and Cases views (no jumpy width on tab switch). */
.sy-my-actions-cases .sy-my-actions-date { width: 100px; }
.sy-my-actions-cases .sy-my-actions-author { width: 160px; color: var(--text-muted); font-size: 12px; }
.sy-my-actions-cases .sy-my-actions-brief {
  color: var(--text); font-size: 13px;
}
.sy-my-actions-cases th.sy-my-actions-opencount,
.sy-my-actions-cases td.sy-my-actions-opencount {
  text-align: center; width: 80px;
}
.sy-my-actions-opencount-badge {
  display: inline-block; min-width: 26px; padding: 2px 8px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--dom-lt) 14%, transparent);
  color: var(--dom-lt);
  border: 1px solid color-mix(in srgb, var(--dom-lt) 40%, transparent);
  font-weight: 700; font-size: 12px;
}

/* === Slice-4: "My open actions" widget + KPI tile ====================== */

.sy-my-actions-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sy-my-actions-switch {
  display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px;
  overflow: hidden;
}
.sy-my-actions-switch-btn {
  background: transparent; color: var(--text-muted);
  border: 0; border-right: 1px solid var(--border-strong);
  padding: 6px 14px; font-family: inherit; font-size: 12px; cursor: pointer;
  transition: background .15s, color .15s;
}
.sy-my-actions-switch-btn:last-child { border-right: 0; }
.sy-my-actions-switch-btn:hover { color: var(--text-primary); }
.sy-my-actions-switch-btn.on {
  background: var(--accent-grad); color: var(--accent-fg);
}

.sy-my-actions-warn {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--dom-amber);
  background: color-mix(in srgb, var(--dom-amber) 8%, transparent);
  color: var(--text-primary); font-size: 12px;
}

.sy-my-actions-empty {
  padding: 18px 4px; text-align: center; color: var(--text-muted); font-size: 13px;
}

.sy-my-actions-table {
  width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12px;
  /* `table-layout: fixed` makes column widths deterministic from the
     first row regardless of cell content. Combined with the shared
     `.sy-my-actions-case[-col]` width above, this prevents the visible
     column-jump DZ noticed when quickly tabbing between Mine / Vessel /
     Cases on the dashboard widget. */
  table-layout: fixed;
}
.sy-my-actions-table th {
  text-align: left; color: var(--text-muted); font-weight: 600;
  font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
  padding: 8px 6px; border-bottom: 1px solid var(--border);
}
.sy-my-actions-table td {
  padding: 8px 6px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
/* Case column — used on BOTH the My Open Actions row AND the Vessel
   Open Cases row (different class name on Cases for legacy reasons, see
   .sy-my-actions-case-col). Width and visual treatment kept in sync via
   the var-driven rule below so quickly tabbing between Mine / Vessel /
   Cases doesn't shift the first column visually. */
.sy-my-actions-case,
.sy-my-actions-case-col {
  width: 110px; white-space: nowrap;
  font-size: 12px; font-weight: 600;
}
.sy-my-actions-case a,
.sy-my-actions-case-col a {
  color: var(--accent); text-decoration: none; font-weight: 600;
}
.sy-my-actions-case a:hover,
.sy-my-actions-case-col a:hover { text-decoration: underline; }
.sy-my-actions-num { font-weight: 600; width: 52px; white-space: nowrap; }
.sy-my-actions-desc-text { color: var(--text-primary); }
.sy-my-actions-source { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
.sy-my-actions-followups {
  list-style: none; padding-left: 0; margin: 4px 0 0;
  color: var(--text-muted); font-size: 11px; line-height: 1.4;
}
.sy-my-actions-followups li { padding-left: 8px; border-left: 2px solid var(--border); margin-top: 2px; }
.sy-my-actions-followups-more {
  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
  font-style: italic; font-size: 10px;
  border-left-style: dashed !important;
}
.sy-my-actions-actionees { color: var(--text-muted); font-size: 11px; width: 140px; }
.sy-my-actions-shore { color: var(--dom-amber); font-size: 10px; }
/* Explicit widths on the trailing columns so the Description column gets
   ALL remaining space — under `table-layout: fixed` un-widthed columns
   share remaining space equally, which used to squeeze Description to a
   third of the width. DZ asked the Actions table to stretch like Cases;
   pinning these gives the same effect. */
.sy-my-actions-priority { white-space: nowrap; width: 80px; }
.sy-my-actions-status { white-space: nowrap; width: 100px; }
.sy-my-actions-due { white-space: nowrap; width: 90px; }
.sy-my-actions-act { width: 90px; text-align: right; }
.sy-my-actions-pri {
  display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px;
  font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  border: 1px solid var(--border-strong);
}
.sy-my-actions-pri-high {
  color: var(--dom-lt); border-color: var(--dom-lt);
  background: color-mix(in srgb, var(--dom-lt) 8%, transparent);
}
.sy-my-actions-pri-medium {
  color: var(--dom-amber); border-color: var(--dom-amber);
  background: color-mix(in srgb, var(--dom-amber) 8%, transparent);
}
.sy-my-actions-pri-low { color: var(--text-muted); }
.sy-my-actions-row-closed { opacity: .55; }
.sy-my-actions-overdue .sy-my-actions-due {
  color: var(--dom-lt); font-weight: 600;
}
.sy-my-actions-btn {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 3px 8px; font-size: 11px; font-family: inherit; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sy-my-actions-btn:hover { color: var(--accent); border-color: var(--accent); }

/* KPI tile — reuses the .sy-tile palette with a Mine count nuance. The
   .hot modifier on the anchor turns the count red when N > 0 (already
   defined for the Open SOC tile). */
.sy-my-actions-kpi { cursor: pointer; }



/* === register / pending tables (ported from ptw- table rules) === */
.sy-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sy-filter-bar input[type="text"],
.sy-filter-bar input[type="date"],
.sy-filter-bar select {
  padding: 9px 13px; font-size: 12px; font-family: inherit;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 9px; outline: none;
}
.sy-filter-bar input[type="text"] { flex: 1; min-width: 220px; }
.sy-filter-bar select:hover { border-color: var(--accent); }
.sy-filter-deleted {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}

.sy-table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* DZ review: lift the register / pending / daily-report tables off the
   background photo, and give the column headers a faint fill. */
body.theme-dark .sy-table,
body.theme-dark .syr-table,
body.theme-dark .syr-totals { background: rgba(9, 15, 21, 0.66); }
body.theme-light .sy-table,
body.theme-light .syr-table,
body.theme-light .syr-totals { background: rgba(255, 255, 255, 0.82); }
body.theme-dark .sy-table thead th,
body.theme-dark .syr-table th { background: rgba(255, 255, 255, 0.06); }
body.theme-light .sy-table thead th,
body.theme-light .syr-table th { background: rgba(15, 26, 34, 0.05); }
.sy-table thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1.4px; font-weight: 600; color: var(--text-faint);
  padding: 12px; border-bottom: 1px solid var(--border);
}
.sy-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
.sy-table tbody tr:hover { background: var(--bg-input-hover); }
.sy-table tbody td { padding: 11px 12px; font-size: 13px; color: var(--text-primary); }
.sy-table-empty { color: var(--text-faint); font-style: italic; text-align: center;
  padding: 22px 12px; }
.sy-photo-icon {
  padding: 1px; line-height: 0; vertical-align: middle;
  background: none; border: none; cursor: pointer; color: var(--dom-blue);
}
.sy-photo-icon:hover { color: var(--accent); }
/* Fixed slot so the edit icon stays aligned whether a row has a photo or not. */
.sy-icon-slot {
  display: inline-flex; width: 22px;
  align-items: center; justify-content: center;
}
.sy-resp-select {
  font-family: inherit; font-size: 11px; padding: 4px 6px; max-width: 150px;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.sy-resp-select:hover { border-color: var(--accent); }
.sy-photo-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.sy-photo-cell {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px;
}
.sy-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sy-col-check { width: 32px; }
.sy-cell-desc { max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.sy-row-deleted { opacity: .5; }
.sy-row-actions { display: inline-flex; gap: 6px; }
.sy-row-edit, .sy-row-del, .sy-row-restore, .sy-row-closeout {
  font-size: 14px; padding: 4px 8px; line-height: 1;
  color: var(--text-muted); cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 7px;
}
.sy-row-edit:hover, .sy-row-restore:hover, .sy-row-closeout:hover { color: var(--text-primary);
  border-color: var(--accent); }
.sy-row-del:hover { color: var(--danger); border-color: var(--danger); }
.sy-bulk-bar { display: flex; gap: 8px; margin-bottom: 12px; min-height: 28px; }

.sy-pagination {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; font-size: 11px; color: var(--text-faint);
}
.sy-pagination button {
  padding: 6px 12px; font-size: 11px; font-family: inherit;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--border-strong); border-radius: 7px; cursor: pointer;
}
.sy-pagination button:hover { border-color: var(--accent); }

/* === status pills === */
.sy-status-pill {
  display: inline-block; padding: 4px 11px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  border-radius: 14px; border: 1px solid;
  background: var(--bg-elev); font-family: inherit; cursor: inherit;
}
select.sy-status-pill { cursor: pointer; }
.sy-status-open      { color: var(--dom-lt);
  border-color: color-mix(in srgb, var(--dom-lt) 50%, transparent);
  background: color-mix(in srgb, var(--dom-lt) 10%, transparent); }
.sy-status-closed    { color: var(--text-muted); border-color: var(--border-strong); }
.sy-status-na        { color: var(--dom-blue);
  border-color: color-mix(in srgb, var(--dom-blue) 50%, transparent);
  background: color-mix(in srgb, var(--dom-blue) 10%, transparent); }
.sy-status-cancelled { color: var(--dom-purple);
  border-color: color-mix(in srgb, var(--dom-purple) 50%, transparent);
  background: color-mix(in srgb, var(--dom-purple) 10%, transparent); }
.sy-status-close_requested { color: var(--dom-orange);
  border-color: color-mix(in srgb, var(--dom-orange) 50%, transparent);
  background: color-mix(in srgb, var(--dom-orange) 10%, transparent); }

/* === SOC close-out (review queue, modal banners) === */
/* The request button (.sy-row-closeout) shares the neutral .sy-row-edit chrome
   above — it sits in the same row-actions cluster as Edit/Delete. */
.sy-closeout-queue { margin-bottom: 20px; }
.sy-closeout-hd {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted);
}
.sy-closeout-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11px; font-weight: 700; border-radius: 10px;
  color: var(--dom-orange);
  background: color-mix(in srgb, var(--dom-orange) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--dom-orange) 45%, transparent);
}
.sy-closeout-tag {
  display: inline-block; padding: 2px 7px; margin-left: 4px;
  font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; border-radius: 10px;
  color: var(--dom-orange);
  background: color-mix(in srgb, var(--dom-orange) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--dom-orange) 40%, transparent);
}
.sy-closeout-denied-banner {
  padding: 9px 12px; margin-bottom: 14px; border-radius: 8px; font-size: 12px;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}
.sy-form-error {
  padding: 9px 12px; margin-bottom: 14px; border-radius: 8px; font-size: 12px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}

/* === modal (ported from ptw- modal rules) === */
.sy-modal-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(6,14,20,.55);
  backdrop-filter: blur(10px) saturate(.8);
  -webkit-backdrop-filter: blur(10px) saturate(.8);
}
.sy-modal {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw); max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 16px; box-shadow: var(--shadow-card);
  overflow: hidden;
}
.sy-modal-wide { width: min(820px, 94vw); }
.sy-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.sy-modal-hd h3 {
  font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--text-primary); margin: 0;
}
.sy-modal-x {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text-muted); cursor: pointer;
  font-size: 18px; line-height: 1;
}
.sy-modal-x:hover { color: var(--danger); border-color: var(--danger); }
.sy-modal-bd { flex: 1; overflow-y: auto; padding: 20px 22px; }
.sy-modal-ft {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--border);
}
.sy-modal-rule { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* Confirm dialog — custom replacement for the native confirm() on
   hx-confirm delete actions. The body-level host doubles as the backdrop
   and sits above any open modal (z 20). */
.sy-confirm-host {
  position: fixed; inset: 0; z-index: 60;
  display: none;
  background: rgba(6,14,20,.55);
  backdrop-filter: blur(10px) saturate(.8);
  -webkit-backdrop-filter: blur(10px) saturate(.8);
}
.sy-confirm-host.is-open { display: block; }
.sy-confirm-modal { width: min(420px, 92vw); }
.sy-confirm-lead {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-primary);
}
.sy-btn-danger {
  background: var(--danger); color: var(--accent-fg);
  font-size: 11px; font-weight: 600; border-radius: 6px;
  padding: 6px 12px; display: inline-block;
  border: none; cursor: pointer; font-family: inherit;
}
.sy-btn-danger:hover { filter: brightness(1.08); }

.sy-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sy-form-grid .sy-col-2 { grid-column: 1 / -1; }
.sy-modal .sy-field { margin-bottom: 0; }
.sy-modal label, .sy-form-grid label {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1.2px; font-weight: 600;
  color: var(--text-faint); margin-bottom: 6px;
}
.sy-modal input[type="text"],
.sy-modal input[type="date"],
.sy-modal input[type="file"],
.sy-modal textarea,
.sy-modal select {
  width: 100%; padding: 10px 13px; font-size: 13px; font-family: inherit;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--border-strong); border-radius: 9px; outline: none;
}
.sy-modal textarea { resize: vertical; min-height: 70px; }
.sy-modal input:focus, .sy-modal textarea:focus, .sy-modal select:focus {
  border-color: var(--accent); background: var(--bg-input-hover);
}
.sy-modal input:disabled, .sy-modal textarea:disabled, .sy-modal select:disabled {
  opacity: .65; cursor: not-allowed;
}
.sy-hint { font-weight: 400; text-transform: none; color: var(--text-faint); }
.sy-att-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sy-att-thumb { display: block; width: 84px; height: 84px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sy-att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sy-proj-change-row { display: flex; gap: 8px; }
.sy-proj-change-row input { flex: 1; }
.sy-proj-change-hint { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.sy-proj-history { list-style: none; margin: 0; padding: 0; }
.sy-proj-history li {
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.sy-proj-history li:last-child { border-bottom: none; }
.sy-proj-history li strong { color: var(--text-primary); margin-right: 8px; }
.sy-proj-history li span { color: var(--text-muted); font-size: 12px; }
.sy-proj-history-empty { color: var(--text-faint); font-style: italic; }

/* === public intake form — mobile-first (no PTW source) === */
.sy-submit-bg { position: fixed; inset: 0; background: var(--bg-base); z-index: -1; }
.sy-submit-wrap { max-width: 560px; margin: 0 auto; padding: 22px 16px 60px; }
.sy-submit-topbar { margin-bottom: 12px; }
.sy-submit-head { text-align: center; margin-bottom: 18px; }
.sy-submit-title {
  font-size: 19px; font-weight: 300; letter-spacing: 3px;
  color: var(--text-primary); text-transform: uppercase; font-family: inherit;
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  transition: color .15s;
}
.sy-submit-title:hover { color: var(--accent); }
.sy-submit-head p { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.sy-submit-error {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elev));
  border: 1px solid var(--danger); color: var(--danger);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
.sy-field { margin-bottom: 14px; }
.sy-field label { display: block; font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
.sy-field input[type=text], .sy-field input[type=file], .sy-field textarea, .sy-field select {
  width: 100%; padding: 11px 12px; font-size: 15px; border-radius: 8px;
  background: var(--surface-1, var(--bg-input)); border: 1px solid var(--border); color: var(--text-primary); }
.sy-field textarea { min-height: 84px; resize: vertical; }
.sy-field select optgroup {
  background: var(--bg-popover); color: var(--text-primary);
  font-weight: 700; font-style: normal; }
.sy-field select option {
  background: var(--bg-popover); color: var(--text-primary); font-weight: 400; }
.sy-field .sy-req { color: var(--danger); }
.sy-submit-btn {
  width: 100%; margin-top: 6px; padding: 14px; font-size: 15px;
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  border: none; border-radius: 9px; cursor: pointer;
  background: var(--accent-grad); color: var(--accent-fg);
  box-shadow: 0 8px 22px rgba(47,143,134,.4);
  transition: filter .15s, transform .15s; }
.sy-submit-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.sy-submit-btn:active { transform: translateY(0); }
.sy-thanks { text-align: center; padding: 60px 20px; }
.sy-thanks .sy-tick { font-size: 46px; color: var(--success); }
.sy-login-public { display: block; text-align: center; margin-top: 14px;
  font-size: 13px; color: var(--dom-blue); text-decoration: none; }
.sy-login-public:hover { text-decoration: underline; }
@media (min-width: 620px) { .sy-submit-wrap { padding-top: 40px; } }

/* === SOC intake-QR poster (print-ready) ===
 * The poster card uses fixed white/ink colours, not theme tokens: it is a
 * print artifact — always a black QR on white paper. */
.sy-qr-page { max-width: 560px; margin: 0 auto; padding: 24px 16px 60px; }
.sy-qr-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.sy-qr-print {
  font-family: inherit; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.2px; cursor: pointer; padding: 9px 18px; border-radius: 9px;
  border: none; background: var(--accent-grad); color: var(--accent-fg);
  transition: filter .15s, transform .15s;
}
.sy-qr-print:hover { filter: brightness(1.12); transform: translateY(-1px); }
.sy-qr-poster {
  background: #ffffff; border-radius: 14px; padding: 44px 32px;
  text-align: center; box-shadow: var(--shadow-card);
}
.sy-qr-poster-head {
  font-size: 25px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #0e1a22;
}
.sy-qr-poster-sub { font-size: 14px; color: #5e7280; margin-top: 8px; }
.sy-qr-code { width: 280px; max-width: 72vw; margin: 26px auto 18px; }
.sy-qr-code svg { display: block; width: 100%; height: auto; }
.sy-qr-poster-url {
  font-size: 13px; color: #5e7280; word-break: break-all; margin-top: 4px;
}
.sy-qr-poster-vessel {
  font-size: 13px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: #0e1a22; margin-top: 16px;
}
@media print {
  .sy-qr-actions { display: none; }
  .sy-qr-page { padding: 0; max-width: none; }
  .sy-qr-poster { box-shadow: none; border-radius: 0; }
}

/* === daily-report document — on-screen view ===
 * `_daily_report_doc.html` is shared with the PDF, which carries its own
 * <style>; on the dashboard page these theme-aware rules style it. */
.syr-title { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.syr-date { font-size: 12px; color: var(--text-muted); margin: 3px 0 18px; }
.syr-section {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary); background: var(--bg-elev);
  border-left: 3px solid var(--accent); border-radius: 4px;
  padding: 8px 12px; margin: 20px 0 0;
}
.syr-table {
  width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px;
}
.syr-table th {
  text-align: left; font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  font-weight: 600; color: var(--text-faint);
  padding: 9px 10px; border-bottom: 1px solid var(--border-strong);
}
.syr-table td {
  padding: 9px 10px; color: var(--text-primary); vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.syr-empty { color: var(--text-faint); font-style: italic; text-align: center; }
.syr-totals {
  margin-top: 20px; border-collapse: collapse; font-size: 12.5px;
}
.syr-totals td {
  padding: 8px 14px; border: 1px solid var(--border); color: var(--text-primary);
}
.syr-totals td:last-child { font-weight: 700; text-align: right; min-width: 56px; }

/* === shared access-denied toast (base.html, every page) === */
/* Mirrors .sy-toast / .ptw-toast; z-index above module toasts (60) and
   modals so a denial is always visible. */
.bms-toast {
  position: fixed; left: 50%; bottom: 64px;
  transform: translate(-50%, 16px);
  z-index: 90;
  padding: 12px 18px;
  font-size: 13px; line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.bms-toast.show { opacity: 1; transform: translate(-50%, 0); }
.bms-toast.error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elev));
  border-color: var(--danger);
}

/* === Synergi · Google-Form intake ===================================== */

.sy-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--sy-pill-bg, rgba(120, 120, 120, 0.10));
  font-size: 0.85rem;
  margin: 0.4rem 0;
}

.sy-sync-pill-label { white-space: nowrap; }

/* Compact icon button — replaces the old "Fetch now" text pill. The SVG
   inside is a Feather-style two-arrow refresh glyph. Hover scales the
   whole button by 1.18 and adds an accent-coloured glow ring. While the
   HTMX request is in flight, HTMX sets the `.htmx-request` class on the
   button — we spin the icon (not the whole button — keeps the glow halo
   steady). The transition + transform reads cleanly even on slow LAN
   responses where the spin lasts a couple of seconds. */
.sy-sync-fetch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sy-accent, #2b6cb0);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sy-sync-fetch-btn:hover {
  transform: scale(1.18);
  background: color-mix(in srgb, var(--sy-accent, #2b6cb0) 12%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sy-accent, #2b6cb0) 18%, transparent);
}
.sy-sync-fetch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.sy-sync-fetch-icon { display: block; }
.sy-sync-fetch-btn.htmx-request .sy-sync-fetch-icon {
  animation: sy-sync-spin 0.9s linear infinite;
}
@keyframes sy-sync-spin {
  to { transform: rotate(360deg); }
}

.sy-source-google {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  background: rgba(60, 130, 240, 0.12);
  color: #2b6cb0;
  font-size: 0.7rem;
}

.sy-sync-warnings-plate {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  border: 1px solid #d9b800;
  background: rgba(255, 220, 100, 0.10);
  margin-bottom: 0.7rem;
}

.sy-sync-warnings-icon { font-size: 1.1rem; }
.sy-sync-warnings-text { flex: 1; }
.sy-sync-warnings-link {
  color: var(--sy-accent, #2b6cb0);
  text-decoration: underline;
  cursor: pointer;
}

.sy-sync-modal-meta { display: grid; gap: 0.25rem; margin: 0.6rem 0; }
.sy-sync-warnings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0.4rem 0;
}
.sy-sync-warnings-table th,
.sy-sync-warnings-table td {
  border-bottom: 1px solid rgba(120, 120, 120, 0.2);
  padding: 0.3rem 0.5rem;
  text-align: left;
  vertical-align: top;
}
.sy-sync-warnings-table code { font-size: 0.75rem; }
.sy-sync-modal-empty { color: rgba(120, 120, 120, 0.85); margin: 0.6rem 0; }
.sy-sync-retry-btn {
  border: 0; cursor: pointer; padding: 0.35rem 0.9rem; border-radius: 999px;
  background: var(--sy-accent, #2b6cb0); color: white;
}
.sy-sync-retry-btn[disabled] { background: rgba(120, 120, 120, 0.4); cursor: not-allowed; }

/* Synergi audit tab — minimal additions on top of the existing .sy-table /
   .sy-btn-ghost rules. The page only needs styling for elements unique to
   the audit log (entity/event chips, system tag, meta row). */
.sy-audit-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0.5rem 0 1rem; font-size: 0.9rem;
}
.sy-audit-meta-text { color: var(--text-muted, #666); }
.sy-audit-pagination { display: flex; gap: 0.5rem; }
.sy-audit-system {
  display: inline-block; padding: 1px 6px;
  border-radius: 4px; font-size: 0.7rem;
  background: rgba(120, 120, 120, 0.12); color: var(--text-muted);
}
.sy-audit-entity, .sy-audit-event {
  display: inline-block; padding: 2px 8px;
  border-radius: 4px; font-size: 0.75rem;
  font-weight: 600; text-transform: uppercase;
  background: rgba(60, 130, 240, 0.12); color: #2b6cb0;
}
.sy-audit-event { background: rgba(60, 200, 120, 0.12); color: #2b8a4d; }
.sy-audit-summary { font-weight: 500; }
.sy-audit-diff-row { font-size: 0.85rem; margin-top: 4px; }
.sy-audit-reason { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }

/* ===================================================================
   NOTIFICATIONS — email settings sub-tab. Reuses the Synergi chrome +
   sy-form-grid / sy-field / sy-btn-* rules; only the page wrapper, the
   disabled-warning banner, the outbox status plate, and the button row
   are unique here.
   =================================================================== */
.sy-page { max-width: 720px; }
.sy-page > h1 { font-size: 18px; font-weight: 600; margin: 0 0 16px; color: var(--text-primary); }
.sy-warn {
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--danger); color: var(--text-primary);
  padding: 8px 12px; border-radius: 6px; font-size: 13px; margin: 0 0 16px;
}
.sy-plate {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 10px 14px; margin: 0 0 20px;
  font-size: 13px; color: var(--text-muted);
}
.sy-plate ul {
  flex-basis: 100%; margin: 6px 0 0; padding-left: 18px;
  color: var(--danger); font-size: 12px;
}
.sy-form-actions { display: flex; gap: 10px; margin-top: 18px; }

/* Admin-area tab bar (gear icon → Manage users | Notifications). Both pages
   are require_admin-gated; this lives on the plain `.page` chrome, not the
   Synergi `.sy-subnav`. */
.admin-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin: 4px 0 20px;
}
.admin-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tab:hover { color: var(--text-primary); }
.admin-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }

/* ===================================================================
   HSE EVENTS — Reports sub-tab of Synergi.
   `re-` prefix (`reports`). Chrome (sy-bg, sy-header, sy-subnav, sy-footer)
   inherited verbatim from the SYNERGI section above — only the picker
   surface inside `sy-stage` is novel here.
   =================================================================== */

.re-panel {
  position: relative; z-index: 2;
  /* Per DZ: stretch to full vessel-screen width — the picker uses the screen
     real estate the same way the Synergi register does. */
  width: 100%; margin: 24px 0; padding: 0 3vw;
  display: flex; flex-direction: column; gap: 18px;
}

/* === Search bar — slice-1 renders inert (disabled until Slice 7 / v0.13). === */
.re-search { display: flex; }
.re-search-input {
  flex: 1; padding: 10px 14px; font-size: 14px; font-family: inherit;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 9px;
  transition: border-color .15s, background .15s;
}
.re-search-input:disabled {
  cursor: not-allowed; opacity: .55;
}
.re-search-input::placeholder { color: var(--text-muted); }

/* === Two-column body: types on the left, instance area on the right. === */
.re-cols {
  display: grid; grid-template-columns: 360px 1fr; gap: 18px;
  min-height: 60vh;
}
@media (max-width: 880px) {
  .re-cols { grid-template-columns: 1fr; }
}

/* Per DZ: panels in the Reports picker need a slightly brighter shade than
   the default --bg-elev (rgba(255,255,255,.05)) so the white text reads
   clearly on dark theme. The light-theme override is set further down to
   keep its existing white card surface intact. */
.re-types,
.re-instances {
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--border);
  border-radius: 12px;
}
body.theme-light .re-types,
body.theme-light .re-instances {
  background: var(--bg-elev);  /* light theme stays on the clean white surface */
}
.re-types { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.re-type-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 9px;
  cursor: pointer;  /* Slice 2: every row is an <a> link (live or placeholder) */
  color: var(--text-primary); text-decoration: none;
  transition: background .12s;
}
.re-type-row:hover { background: rgba(255, 255, 255, .06); }
body.theme-light .re-type-row:hover { background: var(--bg-input-hover); }
.re-type-row[data-status="placeholder"] {
  color: var(--text-muted);
}
.re-type-row[data-status="placeholder"] .re-type-label {
  font-style: italic;
}
.re-type-label { font-size: 14px; }
.re-type-count {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.re-type-badge {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-input); color: var(--text-muted);
  border: 1px solid var(--border);
}

.re-instances {
  padding: 28px;
  display: flex; align-items: center; justify-content: center;
}
.re-empty { max-width: 460px; text-align: center; }
.re-empty-headline {
  margin: 0 0 8px; font-size: 16px; font-weight: 600;
  color: var(--text-primary);
}
.re-empty-hint {
  margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55;
}

/* ===========================================================================
 * SCM instance list — Slice 2 of the HSE Events module. Lives inside the
 * .re-instances right column when ?type=scm is selected.
 * =========================================================================== */
.re-instance-list { width: 100%; align-self: stretch; }
.re-instance-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.re-instance-title {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary);
}
/* Per DZ: this button should look like the dashboard "this week" pill —
   neutral by default, accent only on hover. Mirrors `.sy-period-export`. */
.re-new-btn {
  font-size: 12px; padding: 6px 14px; border-radius: 7px;
  color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--border-strong); background: transparent;
  transition: background .15s, color .15s, border-color .15s,
    box-shadow .15s, transform .15s;
}
.re-new-btn:hover {
  background: var(--accent-grad); color: var(--accent-fg);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(47, 143, 134, 0.4);
  transform: translateY(-1px);
}
.re-instance-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.re-instance-table th, .re-instance-table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border);
}
.re-instance-table th {
  font-weight: 600; color: var(--text-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
}
.re-instance-row:hover { background: var(--bg-input); }
.re-cell-number a {
  color: var(--accent); text-decoration: none; font-weight: 600;
}
.re-cell-number a:hover { text-decoration: underline; }
.re-status {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-muted); font-weight: 500;
}
.re-status-draft  { color: var(--text-muted); }
.re-status-open   { color: #2b8a3e; border-color: #2b8a3e44; }
.re-status-closed { color: var(--text-muted); }
.re-cell-count { text-align: center; font-variant-numeric: tabular-nums; }
.re-cell-link a {
  text-decoration: none; color: var(--text-muted); font-size: 16px;
}
.re-cell-link a:hover { color: var(--accent); }
.re-instance-empty {
  color: var(--text-muted); margin: 32px 0; text-align: center; font-size: 13px;
}
.re-type-row.active {
  background: rgba(255, 255, 255, .12);
  outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
body.theme-light .re-type-row.active {
  background: var(--bg-input-hover);
}

/* ===========================================================================
 * SCM form — Slice 2. Single long page + sticky left nav. Sections render
 * in `_section.html` as plain textareas; sections 3 + 8 use the same partial
 * via a self-contained `{% if %}` arm so Slice 3 swaps in the action-table
 * partial with a one-line template diff.
 * =========================================================================== */
.scm-stage {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 24px; align-items: start;
}
.scm-sidenav {
  position: sticky; top: 88px; align-self: start;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--border); border-radius: 12px;
  max-height: calc(100vh - 140px); overflow-y: auto;
}
body.theme-light .scm-sidenav { background: var(--bg-elev); }
.scm-sidenav-link {
  text-decoration: none; color: var(--text-muted); font-size: 13px;
  padding: 6px 10px; border-radius: 6px;
}
.scm-sidenav-link:hover {
  background: var(--bg-input); color: var(--text-primary);
}
.scm-main {
  display: flex; flex-direction: column; gap: 20px; min-width: 0;
}
.scm-section {
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--border);
  padding: 22px; border-radius: 12px;
}
body.theme-light .scm-section { background: var(--bg-elev); }
.scm-section-title {
  margin: 0 0 16px 0; font-size: 16px; font-weight: 600;
  color: var(--text-primary);
}
/* Editable section heading: "Section N — <title input>". The title input reads
   as part of the heading (transparent until hover/focus) and the value is
   mirrored into the left-nav link by scm_section_titles.js. */
.scm-section-head {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px 0;
}
.scm-section-num {
  font-size: 16px; font-weight: 600; color: var(--text-primary); white-space: nowrap;
}
.scm-section-dash { color: var(--text-muted); }
.scm-section-title-input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--text-primary);
  background: transparent; border: none;
  border-bottom: 1px dashed transparent; padding: 1px 2px;
}
.scm-section-title-input::placeholder {
  color: var(--text-muted); font-weight: 400; font-style: italic;
}
.scm-section-title-input:hover:not(:disabled) { border-bottom-color: var(--border); }
.scm-section-title-input:focus { outline: none; border-bottom-color: var(--accent); }
.scm-section-title-input:disabled { opacity: 1; }
/* Section-2 Achieved-vs-Target infographic (scm_bars.render_svg). The SVG is a
   self-contained light-background card, so it sits on a white panel in both
   themes and scales to the section width via its viewBox. */
.scm-obs-int-chart {
  margin: 16px 0 4px 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 6px;
  overflow: hidden;
}
.scm-obs-int-chart .oi-chart-svg {
  display: block; width: 100%; height: auto;
}
.scm-obs-int-caption {
  margin-top: 4px; text-align: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted);
}
/* The department donut is an ApexCharts chart already styled for the app's
   (transparent/dark) panels — so it sits frameless on the section background,
   like the dashboard pies, not in the white SVG card the bars use. */
.scm-dept-pie-figure {
  background: transparent;
  border: none;
  padding: 0;
  overflow: visible;
}
.scm-dept-pie { width: 100%; }
.scm-field-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.scm-field {
  display: flex; flex-direction: column; gap: 4px; font-size: 13px;
}
.scm-field > span {
  color: var(--text-muted); font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
}
.scm-field input,
.scm-field textarea,
.scm-field select {
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; background: var(--bg-input); color: var(--text-primary);
}
.scm-field input:focus,
.scm-field textarea:focus {
  outline: none; border-color: var(--accent);
}
.scm-field input:disabled,
.scm-field textarea:disabled {
  opacity: 0.7; cursor: not-allowed;
}
.scm-field-block { grid-column: 1 / -1; }
.scm-field-wide { grid-column: span 2; }
.scm-required { color: #c1402b; font-weight: 700; margin-left: 2px; }
.scm-readonly-value { padding: 8px 0; color: var(--text-primary); }
.scm-attendees-table {
  width: 100%; border-collapse: collapse; margin-bottom: 12px;
}
.scm-attendees-table th, .scm-attendees-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.scm-attendees-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted); text-align: left;
}
.scm-attendees-table input[type="text"] {
  width: 100%; padding: 6px 8px; font: inherit;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-input); color: var(--text-primary);
}
.scm-row-rm {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text-muted); line-height: 1;
  padding: 2px 6px;
}
.scm-row-rm:hover { color: #c92a2a; }
.scm-attendees-actions, .scm-form-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px;
}
/* Save buttons — neutral pill by default, accent gradient on hover. Same
   pattern DZ approved for `.sy-period-export` and `.re-new-btn`. */
.scm-btn-go {
  font-size: 13px; padding: 8px 16px; border-radius: 7px;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border-strong); cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s,
    box-shadow .15s, transform .15s;
}
.scm-btn-go:hover {
  background: var(--accent-grad); color: var(--accent-fg);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(47, 143, 134, 0.4);
  transform: translateY(-1px);
}
.scm-btn-ghost {
  background: transparent; color: var(--text-muted);
  padding: 8px 16px; border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; font: inherit; text-decoration: none;
  display: inline-flex; align-items: center;
}
.scm-btn-ghost:hover {
  color: var(--text-primary); border-color: var(--text-muted);
}
/* Cancel + submit buttons in a form-actions row must read at the same size.
   `.scm-btn-ghost` otherwise inherits the surrounding (larger) font, while
   `.scm-btn-go` pins 13px — so Cancel looked bigger than its sibling. */
.scm-form-actions .scm-btn-ghost { font-size: 13px; }
/* When the info-topic add form is open, hide its "+ Add info topic" trigger;
   it returns when the form is collapsed (Cancel / after submit set open=false).
   Scoped by id so the Section-3 "+ Add action" trigger is unaffected. */
details#scm-info-topic-add[open] > summary { display: none; }
.scm-create-form {
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--border);
  padding: 24px; border-radius: 12px;
}
body.theme-light .scm-create-form { background: var(--bg-elev); }
@media (max-width: 768px) {
  .scm-stage { grid-template-columns: 1fr; padding: 16px; }
  .scm-sidenav {
    position: static; flex-direction: row; flex-wrap: wrap; max-height: none;
  }
  .scm-field-grid { grid-template-columns: 1fr; }
}

/* === Slice 3: action tables in sections 3 + 8 ============================ */
/* The actions-bar in the rightmost cell holds + Follow-up and × on one row.
   `nowrap` + flex prevents the buttons from stacking vertically when the
   Description cell grows tall (long follow-up history). */
.scm-action-actions-bar {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 6px; white-space: nowrap;
}
.scm-action-actions .scm-action-rm {
  width: 26px; height: 26px;
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 16px; line-height: 1;
}
.scm-action-actions .scm-action-rm:hover {
  color: var(--danger); border-color: var(--danger);
}
.scm-followup-history {
  list-style: none; padding: 6px 0 0; margin: 6px 0 0;
  font-size: 12px; color: var(--text-muted);
}
.scm-followup-history li { margin: 2px 0; line-height: 1.4; }
/* Thumbnails inside a follow-up history line — image previews for
   image/* attachments, a tiny "PDF" tile otherwise. Pattern mirrors
   .sy-att-thumb from the SOC card form, but smaller (48px vs 84px) so
   the inline history stays compact. */
.scm-fu-thumbs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.scm-fu-thumb {
  display: block; width: 48px; height: 48px;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: var(--bg-input);
  text-decoration: none;
}
.scm-fu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scm-fu-thumb-doc {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
}
.scm-fu-thumb:hover { border-color: var(--accent); }
.scm-carry-banner {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 3px solid var(--accent);
  padding: 10px 14px; margin-bottom: 14px;
  border-radius: 6px; font-size: 13px;
}
.re-instance-actions { display: flex; gap: 10px; align-items: center; }
.re-toggle-deleted {
  font-size: 12px; color: var(--text-muted);
  text-decoration: none; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 4px;
}
.re-toggle-deleted:hover { color: var(--text); border-color: var(--accent); }
.scm-locked-banner {
  background: color-mix(in srgb, #2b6cb0 12%, transparent);
  border-left: 3px solid #2b6cb0;
  padding: 10px 14px; margin-bottom: 14px;
  border-radius: 6px; font-size: 13px;
  color: var(--text);
}
.scm-locked-banner-deleted {
  background: color-mix(in srgb, #c1402b 12%, transparent);
  border-left-color: #c1402b;
}

/* Slice 5 polish — pill-styled priority + status on the SCM action row.
   Two variants per token: rendered as a styled `<select>` when the user
   can manage (HTMX-PATCH on change → row re-renders with new pill colour),
   or as a static `<span>` for view-only users. Colour palette matches the
   dashboard widget's `.sy-my-actions-pri-*` so the two surfaces feel
   visually consistent. */
.scm-pri-pill,
.scm-status-pill-act {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  text-align: center;
  text-align-last: center;
}
.scm-pri-pill:focus, .scm-status-pill-act:focus {
  outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Priority colour map (matches dashboard) */
.scm-pri-pill-high {
  color: var(--dom-lt); border-color: var(--dom-lt);
  background: color-mix(in srgb, var(--dom-lt) 12%, transparent);
}
.scm-pri-pill-medium {
  color: var(--dom-amber); border-color: var(--dom-amber);
  background: color-mix(in srgb, var(--dom-amber) 12%, transparent);
}
.scm-pri-pill-low,
.scm-status-pill-act-cancelled,
.scm-pri-pill-info {
  color: var(--text-muted); border-color: var(--border-strong);
}
/* Status colour map — green=closed (done), amber=in-progress, red=open. */
.scm-status-pill-act-open {
  color: var(--dom-lt); border-color: var(--dom-lt);
  background: color-mix(in srgb, var(--dom-lt) 12%, transparent);
}
.scm-status-pill-act-in-progress {
  color: var(--dom-amber); border-color: var(--dom-amber);
  background: color-mix(in srgb, var(--dom-amber) 12%, transparent);
}
/* Section-8 info-topic status "In force" mirrors -closed (green). */
.scm-status-pill-act-closed,
.scm-status-pill-act-in-force {
  color: #2f7a3e; border-color: #2f7a3e;
  background: color-mix(in srgb, #2f7a3e 12%, transparent);
}

/* Slice 5 — sticky bottom toolbar (Sign & Close / Re-open / Delete / Restore). */
.scm-toolbar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-top: 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 5;
}
.scm-toolbar-buttons { display: flex; gap: 8px; }
.scm-toolbar-buttons form { margin: 0; }
.scm-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 6px;
}
.scm-status-draft  { background: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text); }
.scm-status-open   { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.scm-status-closed { background: color-mix(in srgb, #2b6cb0 25%, transparent); color: #2b6cb0; }
.scm-btn-danger {
  padding: 8px 16px;
  border: 1px solid #c1402b;
  background: #c1402b;
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.scm-btn-danger:hover { background: #a93020; }

/* ----- HSE Events search results (Slice 7) ----- */
.re-search-form {
  display: flex;
  flex: 1;
  position: relative;
  gap: 6px;
  align-items: center;
}
.re-search-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  overflow: auto;
  /* `.re-instances` parent is a flex container with `justify-content:
     center; align-items: center` — without `width: 100%; align-self:
     stretch` the results panel sits as a centered single-cell flex
     item, so short hit cards collapse to the middle of the right
     column. DZ smoke caught it: "иногда центр, иногда лево". */
  width: 100%;
  align-self: stretch;
  text-align: left;
}
.re-search-summary {
  padding: 6px 4px;
  color: var(--text-muted);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.re-hit {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, rgba(255,255,255,0.02));
  transition: border-color 80ms ease, background 80ms ease;
}
body.theme-light .re-hit { background: #fff; }
.re-hit:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent);
}
body.theme-light .re-hit:hover { background: #f6f8fb; }
.re-hit-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 12px;
}
.re-hit-type {
  display: inline-block;
  padding: 2px 7px;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 11px;
}
.re-hit-meeting {
  font-weight: 600;
  color: var(--text);
}
.re-hit-date {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 2px;
}
.re-hit-loc {
  color: var(--text-muted);
  margin-left: auto;
  font-style: italic;
}
.re-hit-snippet {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.re-hit-snippet mark {
  background: #ffe680;
  color: #000;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* In-page scroll-to-match navigator (Slice 7) */
mark.bms-q-hit { background: #ffe680; color: #000; padding: 0 1px; border-radius: 2px; }
mark.bms-q-current { background: #ffa500; outline: 2px solid #c1402b; }
.bms-q-nav {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(20,20,20,0.92);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  font-size: 13px;
}
.bms-q-nav button {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.bms-q-nav button:hover { background: rgba(255,255,255,0.1); }
.bms-q-counter { padding: 0 4px; opacity: 0.85; }

/* ===========================================================================
   Slice 8 — action drawer + sub-task + dependency panels
   =========================================================================== */

/* The drawer is a single-column layout (no left side-nav like the SCM form,
   the panels are short enough to scroll without anchors). The parent
   `.scm-stage` grid is `200px 1fr` (sidenav + main); without a sidenav
   the drawer's <main> falls into the narrow 200px column. The
   `.scm-stage-drawer` override collapses the grid to a single column so
   the drawer's main fills the available width. DZ smoke 28/05/26. */
.scm-stage-drawer { grid-template-columns: 1fr; }
.scm-drawer { width: 100%; }
.scm-drawer-header .scm-section-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.scm-drawer-meta {
  /* Use flex with natural widths instead of an auto-fit grid — on a
     wide screen the previous `repeat(auto-fit, minmax(200px, 1fr))`
     stretched each meta field to fill the page, which DZ flagged as
     "too spread out". Flex-wrap keeps fields compact and left-aligned. */
  display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 14px 0 0 0;
}
.scm-drawer-meta div {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 140px; max-width: 360px;
}
.scm-drawer-meta dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted);
}
.scm-drawer-meta dd { margin: 0; font-size: 13px; color: var(--text-primary); }
.scm-drawer-orphan {
  color: var(--text-muted); font-style: italic;
}

.scm-drawer-panel { /* shared with .scm-section */ }
.scm-drawer-subhead {
  margin: 12px 0 6px 0; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px;
}

/* Sub-task compact rows.
   Columns: number (content) · description (flexible) · actionees
   (content) · status (content). The description takes `minmax(0, 1fr)`
   so it grows to fill the row and shrinks gracefully when long
   (min-width 0 lets it wrap instead of overflowing). The number,
   actionees, and status columns size to their content, so a longer
   description naturally pushes actionees + status rightward without
   reserving fixed dead space when descriptions are short.
   DZ smoke 28/05/26. */
.scm-drawer-subtasks { list-style: none; padding: 0; margin: 0; }
.scm-drawer-subtask-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px; align-items: baseline;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.scm-drawer-subtask-row:last-child { border-bottom: none; }
.scm-drawer-subtask-num { font-weight: 600; white-space: nowrap; }
.scm-drawer-subtask-desc { color: var(--text-primary); min-width: 0; }
.scm-drawer-subtask-actionees {
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}

/* Per-follow-up edit/delete icon buttons in the drawer timeline (admin
   only). Small, ghost-style, in-app palette — the edit icon picks up the
   accent on hover, delete goes red. Matches the `sy-photo-icon` weight so
   the three inline affordances (camera / edit / delete) read as a set. */
.scm-fu-row-actions {
  display: inline-flex; gap: 4px; margin-left: 6px;
  vertical-align: middle;
}
.scm-fu-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.scm-fu-icon-btn:hover {
  color: var(--accent); border-color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
}
.scm-fu-icon-btn-danger:hover {
  color: #c1402b; border-color: rgba(193, 64, 43, 0.55);
  background: rgba(193, 64, 43, 0.10);
}

/* Dependency pills (Blocked by / Blocks) */
.scm-drawer-deps { list-style: none; padding: 0; margin: 0 0 8px 0; }
.scm-drawer-dep-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; margin: 4px 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border); border-radius: 6px;
}
.scm-drawer-dep-pill a { color: var(--text-primary); text-decoration: none; }
.scm-drawer-dep-pill a:hover { text-decoration: underline; }
.scm-drawer-dep-rm {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 18px; line-height: 1;
  padding: 0 6px;
}
.scm-drawer-dep-rm:hover { color: #c1402b; }

/* Audit log strip — three-column row: actor · summary · time.
   Operator-friendly: no monospace tokens, no UUID slugs; the summary
   is the same one-liner the merged Synergi audit page uses. */
.scm-drawer-audit { list-style: none; padding: 0; margin: 0; }
.scm-drawer-audit li {
  display: grid;
  /* Column order: time · actor · summary. The summary stretches to
     fill remaining width; the timestamp + actor stay compact. */
  grid-template-columns: 140px minmax(120px, 200px) 1fr;
  gap: 14px; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.scm-drawer-audit li:last-child { border-bottom: none; }
.scm-drawer-audit-actor {
  color: var(--text-primary); font-weight: 500; font-size: 13px;
}
.scm-drawer-audit-summary { color: var(--text-primary); font-size: 13px; }
.scm-drawer-audit-time {
  color: var(--text-muted); font-size: 11px; white-space: nowrap;
}

/* Search-and-add modal hits */
.scm-drawer-search-results { list-style: none; padding: 0; margin: 0; }
.scm-drawer-search-results li {
  display: grid; grid-template-columns: 80px 1fr 120px;
  gap: 10px; padding: 6px 8px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.scm-drawer-search-results li:last-child { border-bottom: none; }
.scm-drawer-search-results em { color: var(--text-muted); font-style: normal; }
.scm-search-action-id { display: none; } /* UUID payload — not for the user's eye */

.scm-drawer-followups { margin: 0 0 8px 0; }

/* My-Open-Actions widget — context markers (Slice 8). Per DZ smoke
   28/05/26: type the markers in the same visual register as the
   follow-up note (small muted text), not as big pills. Drops the
   border + pill background — markers are inline annotations above
   the description text. */
.sy-my-actions-badge {
  display: inline-block;
  font-size: 11px; line-height: 1.4;
  margin-right: 8px;
}
.sy-my-actions-subtask { color: var(--text-muted); }
.sy-my-actions-blocked { color: #c1402b; font-weight: 600; }

/* Account provisioning — invite-link banner + login-state badges */
/* Fixed light-green success tint with explicit dark-green text so it stays
   readable in BOTH themes — without an explicit colour the text inherited
   --text-primary, which is near-white in dark mode → invisible (DZ bug). */
.invite-banner { margin: 12px 0; padding: 10px 12px; border: 1px solid #cfe3cf;
  background: #f3faf3; border-radius: 6px; color: #1f5130; }
.invite-banner p { margin: 0 0 6px; color: #1f5130; }
.invite-banner strong { color: #133a22; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; }
.badge-active { background: #e3f3e3; color: #1d6b1d; }
.badge-pending { background: #fff3d6; color: #8a6100; }
.badge-expired { background: #fde3e3; color: #9b2222; }
.badge-inactive { background: #eceff1; color: #607d8b; }

/* ---- login-page feedback widget (chat-bubble FAB + panel) ----
   A public channel on the login page; styled to match sy-modal. Open state is
   driven by the .fb-open class toggled on #fb-root (feedback.js). */
.fb-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent-grad); color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(47,143,134,.45);
  transition: filter .15s, transform .15s; }
.fb-fab:hover { filter: brightness(1.12); transform: translateY(-2px); }

.fb-backdrop { position: fixed; inset: 0; z-index: 29; display: none;
  background: rgba(6,14,20,.45);
  backdrop-filter: blur(6px) saturate(.85);
  -webkit-backdrop-filter: blur(6px) saturate(.85); }
.fb-open .fb-backdrop { display: block; }

.fb-panel { position: fixed; right: 24px; bottom: 92px; z-index: 31;
  width: min(380px, calc(100vw - 32px)); display: none; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden;
  transform-origin: bottom right; animation: fbpop .14s ease-out; }
.fb-open .fb-panel { display: flex; }
@keyframes fbpop { from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; } }

.fb-hd { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); }
.fb-hd h3 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--text-primary); }
.fb-x { width: 28px; height: 28px; display: flex; align-items: center;
  justify-content: center; background: var(--bg-input);
  border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--text-muted); cursor: pointer; font-size: 17px; line-height: 1; }
.fb-x:hover { color: var(--danger); border-color: var(--danger); }

.fb-body { padding: 16px 18px; }
.fb-lead { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.fb-field { margin-bottom: 13px; }
.fb-field label { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 1.2px; font-weight: 600; color: var(--text-faint); margin-bottom: 6px; }
.fb-field .req { color: var(--danger); }
.fb-field .fb-opt { color: var(--text-faint); font-weight: 400;
  text-transform: none; letter-spacing: 0; }
.fb-field input, .fb-field select, .fb-field textarea { width: 100%;
  padding: 10px 12px; font-size: 13px; font-family: inherit; color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border-strong);
  border-radius: 9px; outline: none; }
.fb-field textarea { resize: vertical; min-height: 84px; }
.fb-field input:focus, .fb-field select:focus, .fb-field textarea:focus {
  border-color: var(--accent); background: var(--bg-input-hover); }
.fb-field select option { background: var(--bg-popover); color: var(--text-primary); }
.fb-err { font-size: 12px; color: var(--danger); margin: -4px 0 10px; }
.fb-send { width: 100%; margin-top: 4px; padding: 12px; border: none; border-radius: 9px;
  background: var(--accent-grad); color: var(--accent-fg); font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 8px 22px rgba(47,143,134,.4); }
.fb-send:hover { filter: brightness(1.12); }
.fb-send:disabled { opacity: .65; cursor: not-allowed; }

/* ---- Synergi Man hours editor ---- */
.sy-mh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sy-mh-nav { display: flex; align-items: center; gap: 10px; }
.sy-mh-arrow, .sy-mh-back { cursor: pointer; user-select: none; opacity: 0.8; }
.sy-mh-arrow:hover, .sy-mh-back:hover { opacity: 1; }
.sy-mh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.sy-mh-cell { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.sy-mh-day { font-size: 11px; opacity: 0.6; text-align: center; }
.sy-mh-pob { width: 100%; text-align: center; padding: 6px 2px; border: 1px solid rgba(127,127,127,0.3); border-radius: 6px; background: transparent; color: inherit; }
.sy-mh-summary { margin-top: 14px; font-size: 13px; opacity: 0.85; }
/* Man hours opener — now an <a> (own page), so it can't inherit the
   `.sy-period span` pill style; restate it here so it still looks like a
   neutral period pill that turns accent on hover. */
.sy-period-mh {
  font-size: 11px; padding: 5px 12px; border-radius: 7px;
  color: var(--text-muted); cursor: pointer; text-decoration: none;
  border: 1px solid var(--border-strong); background: transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.sy-period-mh:hover {
  color: var(--text-primary); border-color: var(--accent);
}

/* ---- Synergi Obs/Int vs Target tiles ----
   Chain .sy-tile.accent so these beat `.sy-tile.accent .n` (specificity 0,3,1
   vs 0,2,1) — otherwise the accent colour wins and under/met never render. Use
   the theme vars (legible in both themes; a bare --accent would paint an
   under-target tile green, which is actively misleading). */
.sy-tile.accent.sy-tile--under .n { color: var(--danger); }   /* below target */
.sy-tile.accent.sy-tile--met .n { color: var(--success); }    /* target met or exceeded */

/* ---- drag-and-drop upload zone (DOS + global .sy-dropzone) ---- */
.dos-dropzone, .sy-dropzone {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; padding: 16px;
  border: 2px dashed var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 12px; color: var(--text-muted);
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}
.dos-dropzone:hover, .sy-dropzone:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-input-hover);
}
/* Active drag-over state — applied by dos_photos.js / attachment_upload.js */
.dos-dropzone--over, .sy-dropzone--over {
  border-color: var(--accent);
  background: var(--bg-input-hover);
  color: var(--text-primary);
}
/* Client-side previews of chosen attachments (before submit). */
.sy-dropzone-previews { margin-top: 10px; }
.sy-dropzone-doc {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-input-hover);
}

/* ---- DOS zone block: spacing + findings actions ---- */
/* Even vertical rhythm around the read-only zone comment so the Assessment-date
   row below isn't glued to the "Potential for dropped objects" line (the gap
   now matches the Area-authority gap above it). */
.dos-zone-authority { margin: 8px 0; }
.dos-zone-do-comment { margin: 8px 0 18px; }
/* Findings row Edit/Delete icon buttons share one line with a small gap. */
.dos-finding-actions-bar { display: inline-flex; gap: 4px; }

/* ---- DOS risk chips (add / edit finding modal) ----
   Clickable coloured pills replacing the plain <select>. Each chip carries its
   risk colour (High=red, Medium=amber, Low=muted, mirroring .scm-pri-pill-*);
   the checked chip fills with a tint of its own colour + a focus-style ring. */
.dos-risk-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dos-risk-chip { position: relative; display: inline-flex; }
.dos-risk-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.dos-risk-chip > span {
  display: inline-block; padding: 5px 16px; border-radius: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  border: 1px solid var(--border-strong); color: var(--text-muted);
  background: transparent; cursor: pointer;
  transition: background .12s, box-shadow .12s, color .12s, border-color .12s;
}
.dos-risk-chip-high > span { color: var(--dom-lt); border-color: var(--dom-lt); }
.dos-risk-chip-medium > span { color: var(--dom-amber); border-color: var(--dom-amber); }
.dos-risk-chip-low > span { color: var(--text-muted); border-color: var(--border-strong); }
.dos-risk-chip input:checked + span {
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent);
}
.dos-risk-chip input:focus-visible + span {
  outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Inline photo block inside the CREATE finding modal (upload at create time). */
.dos-modal-photos-create { margin-top: 14px; }
.dos-modal-photos-label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--text-muted); }
.dos-modal-photos-opt { opacity: .7; }
/* Client-side previews of the photos chosen before submit. */
.dos-create-previews { margin-top: 10px; }

/* ---- In-page photo lightbox (.sy-gallery thumbnails) ---- */
body.sy-lightbox-lock { overflow: hidden; }
.sy-lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .85);
  align-items: center; justify-content: center;
}
.sy-lightbox--open { display: flex; }
.sy-lightbox-img {
  max-width: 90vw; max-height: 86vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.sy-lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 40px; height: 40px; font-size: 26px; line-height: 1;
  color: #fff; background: rgba(255, 255, 255, .12); border: none; border-radius: 8px;
  cursor: pointer;
}
.sy-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 64px; font-size: 32px; line-height: 1;
  color: #fff; background: rgba(255, 255, 255, .12); border: none; border-radius: 8px;
  cursor: pointer;
}
.sy-lightbox-close:hover, .sy-lightbox-nav:hover { background: rgba(255, 255, 255, .22); }
.sy-lightbox-prev { left: 20px; }
.sy-lightbox-next { right: 20px; }
.sy-lightbox-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .85); font-size: 13px; letter-spacing: .5px;
}
.sy-gallery a { cursor: zoom-in; }

/* ---- in-app manual (Help) ---- */
/* context-aware Help button — neutral, styled like .ptw-floating-add, sits in tab bars / hub headers */
.nav-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  color: var(--text-primary); background: var(--bg-elev);
  border: 1px solid var(--border); cursor: pointer; flex: none;
  transition: border-color .15s, background .15s, transform .15s;
}
.nav-help:hover { border-color: var(--accent); background: var(--bg-input-hover); transform: translateY(-1px); }

.man-header {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.man-back-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-muted); text-decoration: none; font-size: 13px;
}
.man-back-link:hover { color: var(--text-primary); }
.man-vessel-name {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-weight: 700; letter-spacing: .08em;
  color: var(--text-primary);
}
.man-title { font-weight: 600; color: var(--text-primary); }
.man-user-area { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.man-version { color: var(--text-faint); font-size: 12px; }
.man-who { color: var(--text-muted); font-size: 13px; }
.man-logout {
  font-family: inherit;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); cursor: pointer;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-input);
  transition: border-color .15s, background .15s, color .15s;
}
.man-logout:hover { background: var(--bg-input-hover); color: var(--text-primary); border-color: var(--accent); }

.man-stage { max-width: 820px; margin: 0 auto; padding: 24px 22px 80px; }
.man-filter {
  width: 100%; padding: 9px 12px; margin-bottom: 18px;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 8px;
}
.man-section { margin-bottom: 26px; }
.man-section-title {
  font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: 10px;
}
.man-toc { list-style: none; }
.man-toc-item a {
  display: block; padding: 10px 12px; margin-bottom: 6px; border-radius: 8px;
  background: var(--bg-elev); border: 1px solid var(--border);
  text-decoration: none; color: var(--text-primary);
}
.man-toc-item a:hover { background: var(--bg-input-hover); }
.man-toc-page { display: block; font-weight: 600; }
.man-toc-summary { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.man-stage-page {
  max-width: 1000px; display: grid; grid-template-columns: 220px 1fr; gap: 32px;
}
.man-side { font-size: 13px; }
.man-side-section {
  text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
  color: var(--text-muted); margin: 14px 0 6px;
}
.man-side-list { list-style: none; }
.man-side-list a {
  display: block; padding: 4px 8px; border-radius: 6px;
  color: var(--text-muted); text-decoration: none;
}
.man-side-list a:hover { color: var(--text-primary); background: var(--bg-input-hover); }
.man-side-list a.is-current { color: var(--accent); font-weight: 600; }

.man-content { color: var(--text-primary); line-height: 1.6; }
.man-content h1 { font-size: 24px; margin-bottom: 14px; }
.man-content h2 { font-size: 18px; margin: 22px 0 10px; }
.man-content h3 { font-size: 15px; margin: 18px 0 8px; }
.man-content p { margin-bottom: 12px; }
.man-content ul, .man-content ol { margin: 0 0 12px 22px; }
.man-content li { margin-bottom: 4px; }
.man-content img {
  max-width: 100%; border: 1px solid var(--border-strong);
  border-radius: 8px; margin: 12px 0;
}
.man-content code {
  background: var(--bg-input); padding: 1px 5px; border-radius: 4px; font-size: 90%;
}
.man-nav {
  display: flex; justify-content: space-between; margin-top: 36px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.man-nav a { color: var(--accent); text-decoration: none; }

/* ===================================================================== */
/* JHA — Job Hazard Analysis module (constructor + picker)                */
/* ===================================================================== */

/* document header strip */
.jha-doc-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px;
}
.jha-doc-head .sy-stage-title { margin: 0; }
.jha-rev, .jha-cat {
  font-size: 12px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px;
}
.jha-audit-link {
  margin-left: auto; font-size: 12.5px; color: var(--accent); text-decoration: none;
}
.jha-audit-link:hover { text-decoration: underline; }

.jha-return-banner {
  background: color-mix(in srgb, var(--warning) 14%, var(--bg-elev));
  border: 1px solid var(--warning); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; color: var(--text-primary);
  font-size: 13px;
}

/* shared panel look */
.jha-header-form, .jha-step, .jha-steps-actions, .jha-actions {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

/* header grid: 3 columns + full-width description */
.jha-header-grid {
  display: grid;
  /* Number · Type (≈⅓ width) · Title (wide) · Location — all on one row.
     Description spans the full width below (jha-header-full). */
  grid-template-columns: 1fr minmax(96px, 0.4fr) 1.6fr 1fr;
  gap: 12px 16px; padding: 16px;
}
.jha-header-grid label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
.jha-header-grid .jha-header-full { grid-column: 1 / -1; }
.jha-header-grid input,
.jha-header-grid select,
.jha-header-grid textarea,
.jha-step textarea,
.jha-return-form textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font: inherit; font-size: 13px;
}
.jha-header-grid input:focus,
.jha-header-grid select:focus,
.jha-step textarea:focus,
.jha-return-form textarea:focus { outline: none; border-color: var(--accent); }
.jha-header-grid input:disabled,
.jha-step textarea:disabled { opacity: .7; cursor: default; }

/* steps */
#jha-steps { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.jha-step { overflow: hidden; }
.jha-step-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.jha-grab { cursor: grab; color: var(--text-faint); font-size: 16px; user-select: none; }
.jha-grab:active { cursor: grabbing; }
.jha-seq {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-fg);
  font-size: 12px; font-weight: 700;
}
.jha-step-rm {
  margin-left: auto; border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); border-radius: 7px; cursor: pointer;
  width: 26px; height: 26px; line-height: 1;
}
.jha-step-rm:hover { color: var(--danger); border-color: var(--danger); }
.jha-step-body {
  display: grid; grid-template-columns: 1.1fr 1.3fr 1.6fr 1fr;
  gap: 12px; padding: 12px;
}
.jha-col { display: flex; flex-direction: column; gap: 5px; }
.jha-col-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 24px;
}
.jha-col label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
/* Height is driven by JS (jha.js growRow) so the whole row grows together and
   all text stays visible — no inner scrollbar, no manual resize handle. */
.jha-col textarea { resize: none; overflow: hidden; min-height: 64px; }
.jha-pick-open {
  font-size: 11px; color: var(--accent); white-space: nowrap;
  background: transparent; border: 1px solid var(--accent);
  border-radius: 6px; padding: 1px 8px; cursor: pointer;
}
.jha-pick-open:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

@media (max-width: 900px) {
  .jha-step-body { grid-template-columns: 1fr; }
  .jha-header-grid { grid-template-columns: 1fr; }
}

/* action rows */
.jha-steps-actions, .jha-actions {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  padding: 14px; margin-top: 16px;
}
.jha-actions form { margin: 0; }
.jha-return-form { display: flex; gap: 8px; align-items: flex-start; }
.jha-return-form textarea { min-width: 240px; width: auto; }
a.sy-btn-go { text-decoration: none; display: inline-flex; align-items: center; }

/* hazard picker list (rendered inside the shared sy-modal frame) */
.jha-picker-list {
  max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.jha-picker-row {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; cursor: pointer; background: var(--bg-input);
}
.jha-picker-row:hover { border-color: var(--accent); background: var(--bg-input-hover); }
.jha-picker-hazard { font-size: 13px; color: var(--text-primary); }

/* status pills — colour by lifecycle state */
.jha-status {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid;
}
.jha-status-draft {
  color: var(--text-muted); border-color: var(--border-strong);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.jha-status-pending_approval {
  color: var(--warning); border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
}
.jha-status-approved {
  color: var(--success); border-color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}
.jha-status-returned {
  color: var(--danger); border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.jha-status-archived {
  color: var(--text-faint); border-color: var(--border);
  background: color-mix(in srgb, var(--text-faint) 10%, transparent);
}

/* catalogue stats */
.jha-result-count { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; }

/* catalogue toolbar: breathing room between the title and the chips */
#jha-filter { margin-top: 16px; }
/* category filter chips */
.jha-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.jha-filter-row { display: flex; flex-wrap: wrap; gap: 10px; flex-basis: 100%; margin-top: 8px; align-items: center; }
.jha-filter-row input[type="text"] { flex: 1; min-width: 220px; }
.jha-new-btn { white-space: nowrap; margin-left: auto; }
.jha-cat-chip {
  font-size: 12px; color: var(--text-muted); cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px;
}
.jha-cat-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.jha-cat-chip.active {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}

/* hazard library page */
.jha-lib-add {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-card);
  padding: 16px; margin-bottom: 20px;
  display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 12px 16px; align-items: end;
}
.jha-lib-add h3 { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--text-primary); }
.jha-lib-add label, .jha-lib-edit label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.jha-lib-add textarea, .jha-lib-edit textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
  font: inherit; font-size: 13px;
}
.jha-lib-add textarea:focus, .jha-lib-edit textarea:focus { outline: none; border-color: var(--accent); }

.jha-lib-list { display: flex; flex-direction: column; gap: 12px; }
.jha-lib-item {
  display: flex; gap: 12px; align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-card); padding: 14px;
}
.jha-lib-edit {
  flex: 1; display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px 16px; align-items: end;
}
.jha-lib-del { margin: 0; }
.jha-lib-del .sy-row-del {
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 16px; line-height: 1;
}
.jha-lib-del .sy-row-del:hover { color: var(--danger); border-color: var(--danger); }

/* auto-grow textareas (Hazard library): height is set by jha.js to fit the
   full text, so no inner scrollbar and nothing to scroll to read it. */
textarea.jha-autogrow { overflow: hidden; resize: none; min-height: 38px; }

/* danger (Return) button — visually distinct from the accent actions */
.jha-btn-danger {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.jha-btn-danger:hover { filter: brightness(1.08); }

/* Return-reason modal */
.jha-return-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.jha-return-label textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 13px;
}
.jha-return-label textarea:focus { outline: none; border-color: var(--accent); }

@media (max-width: 760px) {
  .jha-lib-add, .jha-lib-edit { grid-template-columns: 1fr; }
}