:root {
  --navy: #0b2545;
  --navy-2: #13315c;
  --sea: #1b6ca8;
  --foam: #eef3f8;
  --line: #dde5ee;
}
body { background: var(--foam); font-size: .925rem; min-height: 100vh; }
a { text-decoration: none; }
.navbar-marine { background: linear-gradient(90deg, var(--navy), var(--navy-2)); }
.navbar-marine .navbar-brand { font-weight: 600; letter-spacing: .2px; }
.navbar-marine .nav-link { color: rgba(255,255,255,.8); }
.navbar-marine .nav-link:hover, .navbar-marine .nav-link.active { color: #fff; }
.brand-mark { display:inline-flex; width:32px; height:32px; border-radius:8px; background:var(--sea);
  align-items:center; justify-content:center; margin-right:.5rem; }

.card { border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 1px 2px rgba(11,37,69,.04); }
.card-header { background: #fff; font-weight: 600; border-bottom: 1px solid var(--line); }
.page-title { font-size: 1.35rem; font-weight: 600; color: var(--navy); margin: 0; }
.breadcrumb { font-size: .8rem; margin-bottom: .25rem; }

/* KPI tiles */
.kpi { display:flex; flex-direction:row; align-items:center; gap:.85rem; padding:1rem; height:100%; color:inherit; }
.kpi:hover { background:#f7fafd; }
.kpi .icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0; }
.kpi .value { font-size:1.55rem; font-weight:700; line-height:1; color:var(--navy); white-space:nowrap; }
.kpi .value.small-value { font-size:1.2rem; }
.kpi > span:last-child { min-width:0; }
.kpi .label { font-size:.78rem; color:#5d6b7c; margin-top:.2rem; }
.tone-danger { background:#fdecec; color:#b42318; }
.tone-warning { background:#fff4e0; color:#b25e09; }
.tone-ok { background:#e6f5ec; color:#18794e; }
.tone-info { background:#e5f0fa; color:var(--sea); }

/* Vessel sidebar (mirrors the system chart) */
.vessel-side { width: 250px; flex-shrink: 0; }
.vessel-side .side-head { background: var(--navy); color:#fff; border-radius:.6rem .6rem 0 0; padding:.85rem 1rem; }
.vessel-side .side-body { background:#fff; border:1px solid var(--line); border-top:0; border-radius:0 0 .6rem .6rem; padding:.4rem 0 .6rem; }
.side-link { display:flex; align-items:center; gap:.55rem; padding:.42rem 1rem; color:#2b3a4d; border-left:3px solid transparent; }
.side-link:hover { background:var(--foam); color:var(--navy); }
.side-link.active { background:#e5f0fa; color:var(--sea); border-left-color:var(--sea); font-weight:600; }
.side-group { padding:.7rem 1rem .25rem; font-size:.7rem; font-weight:700; letter-spacing:.06em; color:#7b8797; text-transform:uppercase; }
.side-link.sub { padding-left:1.6rem; font-size:.88rem; }
@media (max-width: 991.98px) { .vessel-side { width: 100%; } }

.table { --bs-table-bg: transparent; margin-bottom:0; }
.table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#5d6b7c;
  background:#f7f9fc; border-bottom:1px solid var(--line); white-space:nowrap; }
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background:#f7fafd; }
.badge { font-weight:600; }
.detail-grid dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#7b8797; font-weight:600; }
.detail-grid dd { margin-bottom:.9rem; }
.detail-grid dd.multiline { white-space:pre-line; }
.vessel-card { transition: transform .1s, box-shadow .1s; color:inherit; display:block; height:100%; }
.vessel-card:hover { transform: translateY(-2px); box-shadow:0 6px 18px rgba(11,37,69,.10); }
.vessel-photo { height:130px; background:linear-gradient(135deg,var(--navy-2),var(--sea)); border-radius:.6rem .6rem 0 0;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:3rem; background-size:cover; background-position:center; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--sea) 100%); padding:1rem; }
.audit { font-size:.75rem; color:#7b8797; }
.empty { padding:2.5rem 1rem; text-align:center; color:#7b8797; }
.empty i { font-size:2rem; display:block; margin-bottom:.5rem; opacity:.6; }
@media print { .navbar, .vessel-side, .btn, .no-print { display:none !important; } body { background:#fff; } }

/* Hierarchy: Al Rafedain > technical management company > vessels */
.company-row td { background:#eef3f8 !important; font-weight:600; color:var(--navy); border-top:2px solid var(--line); }
.company-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin:1.5rem 0 .75rem; padding-bottom:.4rem; border-bottom:2px solid var(--line); }
.company-head h2 { font-size:1.05rem; font-weight:600; margin:0; color:var(--navy); }
.hier { font-size:.8rem; color:#5d6b7c; }
.hier i { font-size:.65rem; margin:0 .35rem; }
.vessel-photo.no-photo { height:64px; font-size:1.8rem; }

/* ---- Crewing section (navy / teal) ---- */
:root { --teal:#0f766e; --teal-2:#14958a; --teal-soft:#e6f4f2; }
.crewing-bar { background:var(--teal); margin:-1rem -1rem 1rem; padding:0 1rem; overflow-x:auto; white-space:nowrap; }
@media (min-width:992px) { .crewing-bar { margin:-1rem -1.5rem 1.25rem; padding:0 1.5rem; } }
.crewing-bar a { display:inline-block; color:rgba(255,255,255,.82); padding:.6rem .8rem; font-size:.875rem; border-bottom:3px solid transparent; }
.crewing-bar a:hover { color:#fff; }
.crewing-bar a.active { color:#fff; font-weight:600; border-bottom-color:#fff; }
.crewing-bar .label { color:rgba(255,255,255,.6); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-right:.5rem; }
.hero { background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 55%,var(--teal) 100%); color:#fff; border-radius:.8rem; padding:1.75rem 1.5rem; }
.hero h1 { font-size:1.6rem; font-weight:700; margin-bottom:.4rem; }
.hero p { color:rgba(255,255,255,.85); max-width:46rem; margin-bottom:1rem; }
.btn-teal { background:var(--teal); border-color:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--teal-2); border-color:var(--teal-2); color:#fff; }
.btn-report { background:#fff; color:#b42318; font-weight:600; border:0; }
.btn-report:hover { background:#fdecec; color:#b42318; }
.tone-teal { background:var(--teal-soft); color:var(--teal); }
.role-card .icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.sop-link { display:flex; gap:.75rem; align-items:flex-start; padding:.8rem 1rem; color:inherit; border-bottom:1px solid var(--line); }
.sop-link:last-child { border-bottom:0; }
.sop-link:hover, .sop-link.active { background:var(--teal-soft); }
.sop-link .num { width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff; font-size:.8rem; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.steps { list-style:none; padding:0; margin:0; counter-reset:step; }
.steps li { position:relative; padding:0 0 1.1rem 3rem; counter-increment:step; }
.steps li::before { content:counter(step); position:absolute; left:0; top:0; width:2rem; height:2rem; border-radius:50%; background:var(--teal); color:#fff; font-weight:600; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.steps li::after { content:""; position:absolute; left:1rem; top:2.1rem; bottom:.1rem; width:2px; background:var(--line); transform:translateX(-1px); }
.steps li:last-child::after { display:none; }
.form-chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; padding:.15rem .5rem; border-radius:1rem; background:var(--teal-soft); color:var(--teal); margin:.25rem .25rem 0 0; }
a.form-chip:hover { background:var(--teal); color:#fff; }
.view-tabs .nav-link { color:var(--navy); font-weight:600; }
.view-tabs .nav-link.active { background:var(--teal); color:#fff; }
/* document matrix: colour + icon + text, never colour alone */
.mx { display:block; border-radius:.4rem; padding:.3rem .35rem; font-size:.74rem; line-height:1.2; text-align:center; min-width:74px; color:inherit; }
.mx i { font-size:.8rem; }
.mx-green { background:#e6f5ec; color:#14633f; }
.mx-amber { background:#fff1d6; color:#8a4b00; }
.mx-red { background:#fde3e3; color:#9f1c12; font-weight:600; }
.mx-missing { background:#fff; color:#9f1c12; border:1px dashed #d9534f; }
.mx-na { color:#9aa5b1; }
.legend span { display:inline-flex; align-items:center; gap:.3rem; margin-right:.9rem; font-size:.8rem; }
.legend .sw { width:.9rem; height:.9rem; border-radius:.2rem; display:inline-block; }
.contact-card .big { font-size:1.05rem; font-weight:600; color:var(--navy); }
.disclaimer { border-left:4px solid var(--teal); background:var(--teal-soft); padding:.9rem 1rem; border-radius:.3rem; font-size:.875rem; }

/* autofilled fields */
.was-autofilled .form-control, .was-autofilled .form-select { border-left:3px solid var(--teal); background-color:#f3faf9; }
.was-autofilled .form-check-label::after { content:" (auto)"; color:var(--teal); font-size:.75rem; }

/* crew change workflow stepper */
.wf-steps { display:flex; gap:.25rem; overflow-x:auto; }
.wf-step { flex:1 1 0; min-width:120px; text-align:center; position:relative; padding-top:.1rem; }
.wf-step .dot { width:2rem; height:2rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; background:#e4e9f0; color:#5d6b7c; position:relative; z-index:1; }
.wf-step::before { content:""; position:absolute; top:1.05rem; left:-50%; width:100%; height:2px; background:#e4e9f0; }
.wf-step:first-child::before { display:none; }
.wf-step .name { display:block; font-size:.8rem; font-weight:600; margin-top:.3rem; color:#5d6b7c; }
.wf-step .who { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#9aa5b1; }
.wf-done .dot { background:var(--teal); color:#fff; } .wf-done::before, .wf-now::before { background:var(--teal); } .wf-done .name { color:var(--teal); }
.wf-now .dot { background:var(--navy); color:#fff; box-shadow:0 0 0 4px rgba(11,37,69,.15); } .wf-now .name { color:var(--navy); }

/* ---- Crew Management hub ---- */
.side-group-link { display:block; text-decoration:none; }
.side-group-link:hover, .side-group-link.active { color:var(--sea); }
.hub-card { text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s; }
.hub-card:hover { box-shadow:0 6px 18px rgba(12,44,82,.12); transform:translateY(-1px); color:inherit; }
.hub-card .icon { width:44px; height:44px; border-radius:12px; background:var(--foam); color:var(--sea); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.hub-card .icon.sm { width:34px; height:34px; font-size:1rem; border-radius:9px; }
.hub-accent { border-top:3px solid var(--teal); }

/* ---- Crew SMS forms (fill / print) ---- */
.sms-sheet { background:#fff; }
.sms-sheet-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--navy); padding-bottom:.5rem; margin-bottom:.75rem; }
.sms-title { text-align:center; text-transform:uppercase; letter-spacing:.04em; font-size:1.05rem; margin:.5rem 0 1rem; color:var(--navy); }
.sms-form { font-size:.86rem; }
.sms-heading { font-size:.95rem; font-weight:700; margin:1rem 0 .4rem; color:var(--navy); }
.sms-para { margin:.35rem 0; white-space:pre-wrap; }
.sms-line { display:flex; gap:.5rem; align-items:baseline; margin:.35rem 0; flex-wrap:wrap; }
.sms-label { font-weight:600; }
.sms-input { border:0; border-bottom:1px solid #9fb3c8; background:transparent; padding:.1rem .25rem; width:100%; min-width:6rem; font:inherit; outline:none; }
.sms-input:focus { border-bottom-color:var(--sea); background:#f4f9ff; }
.sms-input.prefilled { border-bottom:2px solid var(--teal); }
.sms-line .sms-input { flex:1 1 12rem; }
.sms-area { resize:vertical; min-height:1.6rem; overflow:hidden; line-height:1.3; }
.sms-table { width:100%; border-collapse:collapse; margin:.5rem 0 .9rem; table-layout:auto; }
.sms-table td { border:1px solid #8a99ab; padding:.25rem .4rem; vertical-align:top; }
.sms-table td.sms-answer { background:#fbfdff; min-width:5rem; }
.sms-table td.sms-check { text-align:center; width:3.2rem; }
.sms-tick { font-weight:700; color:var(--navy); }
.sms-value { white-space:pre-wrap; }
.sms-cell-text { white-space:pre-wrap; }
.sms-foot { border-top:1px solid #dfe6ee; margin-top:1rem; padding-top:.4rem; }
.sticky-actions { position:sticky; bottom:0; background:#fff; border-top:1px solid #dfe6ee; padding:.6rem 0; margin-top:-.5rem; z-index:5; }
@media print {
  main { padding:0 !important; }
  .card { border:0 !important; box-shadow:none !important; }
  .sms-sheet { padding:0 !important; }
  .sms-form { font-size:11pt; }
  .sms-table td { border-color:#000; }
  .sms-input { border-bottom-color:#000; }
  .back-bar { display:none !important; }
  .sms-value:empty::after { content:"\00a0"; }
}

/* ---- global Back button ---- */
.back-bar { margin:-.25rem 0 .6rem; }
.back-bar .btn { --bs-btn-padding-y:.15rem; --bs-btn-padding-x:.55rem; --bs-btn-font-size:.8rem; }

/* ---- SMS manual reader ---- */
.man-chip { display:inline-block; background:var(--foam); color:var(--sea); font-weight:700; font-size:.75rem; padding:.1rem .45rem; border-radius:6px; margin-right:.5rem; }
.man-toc-card { position:sticky; top:4.4rem; max-height:calc(100vh - 5.5rem); overflow:auto; }
.man-toc a { display:block; padding:.25rem .75rem; font-size:.82rem; color:#2b3a4d; text-decoration:none; border-left:3px solid transparent; }
.man-toc a:hover, .man-toc a.active { background:var(--foam); color:var(--sea); }
.man-toc a.man-toc-l2 { padding-left:1.4rem; }
.man-toc a.man-toc-l3 { padding-left:2.1rem; font-size:.78rem; color:#5d6b7c; }
.man-toc a.man-toc-l4 { padding-left:2.7rem; font-size:.76rem; color:#7b8797; }
.man-toc .man-num { color:#7b8797; margin-right:.35rem; font-weight:600; }
.man-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--navy); padding-bottom:.5rem; margin-bottom:.75rem; }
.man-title { text-align:center; text-transform:uppercase; letter-spacing:.04em; font-size:1.1rem; margin:.5rem 0 1.2rem; color:var(--navy); }
.man-body { font-size:.92rem; line-height:1.55; max-width:900px; }
.man-h { color:var(--navy); scroll-margin-top:4.5rem; }
.man-h .man-num { color:var(--teal); margin-right:.5rem; font-weight:700; }
.man-h1 { font-size:1.15rem; font-weight:700; margin:1.6rem 0 .6rem; padding-bottom:.25rem; border-bottom:1px solid #dfe6ee; text-transform:uppercase; }
.man-h2 { font-size:1.02rem; font-weight:700; margin:1.2rem 0 .4rem; }
.man-h3 { font-size:.95rem; font-weight:600; margin:1rem 0 .3rem; }
.man-h4 { font-size:.9rem; font-weight:600; margin:.8rem 0 .3rem; color:#3c4b5e; }
.man-list { margin:.2rem 0 .5rem; padding-left:1.4rem; }
.man-list li { margin:.15rem 0; }
.man-resp { background:var(--foam); border-left:3px solid var(--teal); padding:.3rem .6rem; margin:.5rem 0; font-size:.86rem; border-radius:0 6px 6px 0; }
.man-note { background:#fff8e6; border-left:3px solid #e0a800; padding:.3rem .6rem; margin:.5rem 0; font-size:.86rem; border-radius:0 6px 6px 0; }
.man-table { width:100%; border-collapse:collapse; margin:.5rem 0 1rem; font-size:.85rem; }
.man-table th, .man-table td { border:1px solid #c5d0dc; padding:.3rem .5rem; vertical-align:top; }
.man-table th { background:var(--foam); color:var(--navy); text-align:left; }
.form-ref { font-weight:600; color:var(--sea); text-decoration:none; border-bottom:1px dotted var(--sea); }
@media print { .man-body { max-width:none; font-size:11pt; } .man-toc-card { display:none; } }
.back-bar + .crewing-bar { margin-top:-.4rem; }
.man-comment { background:#eef7ff; border-left:3px solid var(--sea); padding:.3rem .6rem; margin:.5rem 0; font-size:.86rem; border-radius:0 6px 6px 0; }
.man-caution { background:#fff3e0; border-left:3px solid #fd7e14; padding:.3rem .6rem; margin:.5rem 0; font-size:.86rem; border-radius:0 6px 6px 0; }
.man-warning { background:#fdecea; border-left:3px solid #dc3545; padding:.3rem .6rem; margin:.5rem 0; font-size:.86rem; border-radius:0 6px 6px 0; font-weight:600; }
.man-figure { margin:.6rem 0; text-align:center; } .man-figure img { max-width:100%; height:auto; border:1px solid #dfe6ee; border-radius:6px; }

/* =====================================================================
   Visual polish layer - tokens, typeface, hierarchy, status colour,
   accessibility.  Later rules win over the defaults above.
   ===================================================================== */
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"IBM Plex Sans"; font-style:italic; font-weight:400; font-display:swap; src:url("../vendor/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../vendor/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../vendor/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --ink:#1f2a37; --slate:#5d6b7c; --mute:#8a96a5; --paper:#f4f6f9; --line:#dfe5ec;
  --red:#b42318; --red-soft:#fbeae8; --amber:#b45309; --amber-soft:#fdf1e1; --green:#18794e; --green-soft:#e6f4ec;
  --blue:#1b5e9e; --blue-soft:#e8f0f9; --grey:#5f6b7a; --grey-soft:#eceff3;
  --radius:6px; --radius-sm:4px;
  --bs-body-font-family:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-font-sans-serif:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-body-color:#1f2a37; --bs-link-color:#1b5e9e; --bs-link-hover-color:#0b2545; --bs-border-color:#dfe5ec;
  --bs-primary:#1b5e9e; --bs-primary-rgb:27,94,158;
}
html { font-size:15px; }
body { font-family:var(--bs-body-font-family); background:var(--paper); color:var(--ink); font-size:.9rem; line-height:1.5;
  font-feature-settings:"tnum" 1, "cv11" 1; -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4, h5, h6, .page-title, .hero h1 { letter-spacing:-.01em; }
.page-title { font-size:1.55rem; font-weight:600; line-height:1.2; }
.hero h1 { font-size:1.75rem; font-weight:600; letter-spacing:-.015em; max-width:38ch; }
.hero p { max-width:70ch; font-size:.95rem; }
.hero .small.text-uppercase { text-transform:none !important; letter-spacing:0 !important; font-weight:600; }
.hier, .breadcrumb { font-size:.8rem; color:var(--slate); }
.table, .kpi .value, .badge, .form-control, .form-select { font-variant-numeric:tabular-nums; }
.btn-primary { --bs-btn-bg:#1b5e9e; --bs-btn-border-color:#1b5e9e; --bs-btn-hover-bg:#0b2545; --bs-btn-hover-border-color:#0b2545; --bs-btn-active-bg:#0b2545; --bs-btn-active-border-color:#0b2545; }

/* cards: one radius for containers, a smaller one for controls; shadow only where the card is clickable */
.card { border-radius:var(--radius); box-shadow:none; }
.card-header { font-weight:600; font-size:.9rem; color:var(--ink); }
.form-control, .form-select, .btn, .input-group-text, .dropdown-menu { border-radius:var(--radius-sm); }
.btn-group > .btn { border-radius:var(--radius-sm); }
.kpi:hover, .hub-card:hover, .vessel-card:hover { box-shadow:0 4px 14px rgba(11,37,69,.10); }
.card.border-warning, .card.border-success, .card.border-danger, .card.border-info { border-color:var(--line) !important; border-left-width:4px !important; }
.card.border-warning { border-left-color:var(--amber) !important; }
.card.border-success { border-left-color:var(--green) !important; }
.card.border-danger { border-left-color:var(--red) !important; }
.card.border-info { border-left-color:var(--blue) !important; }
.card-note { border:0 !important; background:transparent !important; box-shadow:none !important; }
.card-note .card-header { background:transparent; border:0; padding:.25rem 0 .1rem; font-size:.85rem; color:var(--slate); }
.card-note .card-body { padding:.25rem 0; font-size:.83rem; color:var(--slate); line-height:1.55; max-width:60ch; }

/* tables: sentence-case headers, weight not caps for hierarchy */
.table thead th { text-transform:none; letter-spacing:0; font-size:.78rem; font-weight:600; color:var(--slate); background:#f7f9fc; }
.table td, .table th { padding:.5rem .6rem; }
.table-sm td, .table-sm th { padding:.32rem .5rem; }
.detail-grid dt, .side-group, .wf-step .who, .crewing-bar .label { text-transform:none; letter-spacing:0; }
.detail-grid dt { font-size:.76rem; font-weight:600; color:var(--mute); }
.wf-step .who { font-size:.72rem; color:var(--mute); }
.crewing-bar .label { font-size:.8rem; font-weight:600; }
h2.h6.text-uppercase { text-transform:none !important; letter-spacing:0 !important; font-size:.95rem !important; color:var(--ink) !important; }

/* status colour means urgency, not stage: red = problem, amber = waiting for someone, green = done, blue = in hand, grey = neutral */
.badge { font-weight:600; font-size:.72rem; padding:.28em .55em; border-radius:999px; letter-spacing:0; }
.badge.text-bg-danger { background:var(--red-soft) !important; color:var(--red) !important; }
.badge.text-bg-warning { background:var(--amber-soft) !important; color:var(--amber) !important; }
.badge.text-bg-success { background:var(--green-soft) !important; color:var(--green) !important; }
.badge.text-bg-info { background:var(--blue-soft) !important; color:var(--blue) !important; }
.badge.text-bg-secondary { background:var(--grey-soft) !important; color:var(--grey) !important; }
.badge.text-bg-light { background:#fff !important; color:var(--slate) !important; border:1px solid var(--line); }
.badge.fs-6 { font-size:.85rem !important; padding:.35em .7em; }
.table-danger, .table-warning, .table-success, .table-info { --bs-table-bg:transparent; }
.table-danger td, td.table-danger, th.table-danger { background:var(--red-soft) !important; }
.table-warning td, td.table-warning, th.table-warning { background:var(--amber-soft) !important; }
.table-success td, td.table-success, th.table-success { background:var(--green-soft) !important; }
.table-info td, td.table-info, th.table-info { background:var(--blue-soft) !important; }
.alert { border-radius:var(--radius); border-width:0; border-left:4px solid; }
.alert-danger { background:var(--red-soft); color:#7a1710; border-left-color:var(--red); }
.alert-warning { background:var(--amber-soft); color:#6f3402; border-left-color:var(--amber); }
.alert-success { background:var(--green-soft); color:#0f5132; border-left-color:var(--green); }
.alert-info { background:var(--blue-soft); color:#12406b; border-left-color:var(--blue); }
.alert-secondary { background:var(--grey-soft); color:var(--ink); border-left-color:var(--grey); }

/* KPI tiles: the number leads, the label explains */
.kpi { padding:.9rem 1rem; gap:.75rem; }
.kpi .icon { width:40px; height:40px; border-radius:10px; font-size:1.15rem; }
.kpi .value { font-size:1.6rem; font-weight:600; letter-spacing:-.02em; }
.kpi .label { font-size:.78rem; line-height:1.3; color:var(--slate); }
.kpi.kpi-lead .value { font-size:2rem; }
.stat-strip { display:flex; flex-wrap:wrap; gap:.35rem 1.5rem; font-size:.83rem; color:var(--slate); padding:.2rem 0 .6rem; }
.stat-strip a { color:inherit; display:inline-flex; gap:.35rem; align-items:baseline; }
.stat-strip a:hover { color:var(--navy); }
.stat-strip strong { color:var(--ink); font-size:.95rem; }
.stat-strip .is-bad strong { color:var(--red); }
.stat-strip .is-warn strong { color:var(--amber); }

/* sidebar: collapsible groups, jump filter, pinned pages */
.side-group { font-size:.78rem; font-weight:600; color:var(--slate); display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; padding:.55rem 1rem .3rem; }
.side-group .chev { font-size:.7rem; color:var(--mute); transition:transform .15s; }
.side-group[aria-expanded="false"] .chev { transform:rotate(-90deg); }
.side-items.collapsed { display:none; }
.side-jump { padding:.5rem .75rem .25rem; }
.side-jump input { font-size:.8rem; }
.side-link { font-size:.86rem; }
.side-link.sub { font-size:.84rem; }
.side-pinned { border-bottom:1px solid var(--line); margin-bottom:.25rem; padding-bottom:.25rem; }
.side-link.hidden-by-filter, .side-group.hidden-by-filter { display:none; }

/* forms: sections and conditional groups */
.form-section { grid-column:1 / -1; font-size:.85rem; font-weight:600; color:var(--navy); margin-top:1.25rem; padding-bottom:.25rem; border-bottom:1px solid var(--line); }
.form-section:first-child { margin-top:0; }
.form-section-hidden { display:none !important; }
.form-label.small.fw-semibold { font-weight:500 !important; color:var(--slate); }

/* keyboard focus is visible everywhere, including on the navy bar */
:focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:var(--radius-sm); }
.form-control:focus, .form-select:focus { border-color:var(--teal); box-shadow:0 0 0 .2rem rgba(15,118,110,.18); }
.navbar-marine :focus-visible, .side-head :focus-visible, .crewing-bar :focus-visible, .hero :focus-visible { outline-color:#fff; }
.wf-step[aria-current="step"] .dot { outline:2px solid transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }

/* print: content only */
@media print {
  .crewing-bar, .breadcrumb, .back-bar, .side-jump, .no-print, .kpi .icon { display:none !important; }
  body { font-size:10.5pt; color:#000; }
  .badge { border:1px solid #999; color:#000 !important; background:#fff !important; }
  .card, .card-header { border-color:#999 !important; }
}
