/* =====================================================================
   VesselsFlow PMS — design tokens
   Navy κύτους · ορείχαλκος οργάνων γέφυρας · φανάρια κατάστασης
   ===================================================================== */
:root {
  --hull: #13283a;        /* navy — sidebar, κύρια κουμπιά */
  --hull-2: #1d3a52;
  --hull-3: #2a4d69;
  --brass: #b08d57;       /* ορείχαλκος — focus, ενεργό, έμφαση */
  --brass-soft: #efe6d6;
  --paper: #f3f4f1;       /* φόντο εφαρμογής */
  --sheet: #ffffff;
  --drawing: #f8f8f3;     /* χαρτί σχεδίου */
  --ink: #17222c;
  --ink-2: #4a5864;
  --ink-3: #7a8792;
  --line: #d5dbdd;
  --line-2: #e6eaeb;
  --ok: #2f7d55;
  --ok-soft: #e1f0e7;
  --due: #c99413;
  --due-soft: #fbf1d4;
  --over: #bf3131;
  --over-soft: #f8e1df;
  --none: #a9b3ba;
  --info-soft: #e3edf5;

  --font: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-c: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;

  --r-sm: 4px;
  --r: 6px;
  --nav-w: 236px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.5 var(--font);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "tnum" 1;
}
a { color: var(--hull-3); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--hull); }
h1, h2, h3 { font-family: var(--font-c); font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: .005em; }
h1 { font-size: 28px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 .8em; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- Κέλυφος εφαρμογής ---------------- */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; }
.nav {
  background: var(--hull);
  color: #c9d5de;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.nav__brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: #fff; text-decoration: none; }
.nav__brand:hover { color: #fff; }
.nav__brand:hover b { color: #fff; }
.nav__brand:hover small { color: #b9c9d4; }
.nav__brand svg { flex: none; }
.nav__brand b { font: 600 17px/1 var(--font-c); letter-spacing: .02em; display: block; }
.nav__brand small { display: block; color: #8fa5b5; font-size: 12px; margin-top: 3px; }
.nav__company {
  margin: 0 12px 10px; padding: 10px 12px; border-radius: var(--r);
  background: var(--hull-2); font-size: 13px; color: #e6edf2;
}
.nav__company span { display: block; color: #8fa5b5; font-size: 12px; }
.nav__group { padding: 10px 12px 4px; }
.nav__group > span { display: block; padding: 0 8px 6px; font-size: 12px; color: #7f97a8; }
.nav a.nav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r);
  color: #d5e0e8; text-decoration: none; font-size: 14px;
}
.nav a.nav__link:hover { background: var(--hull-2); color: #fff; }
.nav a.nav__link.is-active { background: var(--hull-2); color: #fff; box-shadow: inset 3px 0 0 var(--brass); }
.nav a.nav__link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav__link--soon { opacity: .45; pointer-events: none; }
.nav__link--soon em, .nav__link > em:not(.nav__badge) { margin-left: auto; font-style: normal; font-size: 11px; color: #8fa5b5; }
.nav__foot { margin-top: auto; padding: 14px 18px; font-size: 12px; color: #6f8899; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 28px; min-height: 56px;
  background: var(--sheet); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar__crumbs { font-size: 14px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__crumbs a { color: var(--ink-2); text-decoration: none; }
.topbar__spacer { flex: 1; }
.topbar__user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass-soft); color: #6b5430; font: 600 13px var(--font-c);
}
.btn.menu-btn { display: none; }
/* Κάθε εικονίδιο έχει μέγεθος κειμένου εκτός αν ορίζεται αλλιώς (π.χ. .btn svg) */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.ctx-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 28px; background: var(--brass-soft); border-bottom: 1px solid #e0d2b8;
  font-size: 14px; color: #5d4826;
}
.ctx-banner form { margin-left: auto; }

.content { padding: 26px 28px 60px; width: 100%; min-width: 0; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head__text { flex: 1; min-width: 240px; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); max-width: 70ch; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Κουμπιά & φόρμες ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; min-height: 36px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--sheet); color: var(--ink);
  font: 500 14px/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); color: var(--ink); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--hull); border-color: var(--hull); color: #fff; }
.btn--primary:hover { background: var(--hull-2); color: #fff; border-color: var(--hull-2); }
.btn--danger { color: var(--over); border-color: #e7b8b5; }
.btn--danger:hover { background: var(--over-soft); color: var(--over); border-color: var(--over); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--sm { padding: 5px 10px; min-height: 30px; font-size: 13px; }
.btn--block { width: 100%; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--ink-3); }
.field .err { font-size: 12px; color: var(--over); }
.input, select.input, textarea.input {
  width: 100%; padding: 8px 10px; min-height: 38px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; color: var(--ink); font: 400 14px/1.4 var(--font);
}
textarea.input { min-height: 90px; resize: vertical; }
.input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(176, 141, 87, .2); }
.has-error .input { border-color: var(--over); }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--hull); }
.check-row { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 4px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); }

/* ---------------- Ενότητες (sheets) ---------------- */
.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); }
.sheet + .sheet { margin-top: 18px; }
.sheet__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.sheet__head h2 { flex: 1; }
.sheet__body { padding: 18px; }
.sheet__body--flush { padding: 0; }
fieldset.sheet { margin: 0 0 18px; padding: 0; min-width: 0; }
fieldset.sheet > legend { float: left; width: 100%; padding: 14px 18px; border-bottom: 1px solid var(--line-2); font: 600 17px var(--font-c); }
fieldset.sheet > legend small { font: 400 13px var(--font); color: var(--ink-3); margin-left: 8px; }
fieldset.sheet > .form-grid { clear: both; padding: 18px; }

/* ---------------- Πίνακες ---------------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font: 500 13px var(--font); color: var(--ink-3);
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fafbfa; white-space: nowrap;
}
.table td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fbfbf8; }
.table .num { text-align: right; font-family: var(--font-c); }
.table a.row-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.table a.row-link:hover { color: var(--hull-3); text-decoration: underline; }

/* ---------------- Ετικέτες κατάστασης ---------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--line-2); color: var(--ink-2);
}
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag--due { background: var(--due-soft); color: #8a6508; }
.tag--over { background: var(--over-soft); color: var(--over); }
.tag--info { background: var(--info-soft); color: var(--hull-3); }
.tag--brass { background: var(--brass-soft); color: #6b5430; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--none); flex: none; }
.dot--ok { background: var(--ok); }
.dot--due { background: var(--due); }
.dot--overdue { background: var(--over); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: -1px; background: var(--line); }

/* ---------------- Ειδοποιήσεις ---------------- */
.flash { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin-bottom: 16px; border-radius: var(--r); font-size: 14px; border: 1px solid; }
.flash--success { background: var(--ok-soft); border-color: #b7d8c4; color: #1f5a3c; }
.flash--error { background: var(--over-soft); border-color: #e9b9b5; color: #8c2121; }
.flash--info { background: var(--info-soft); border-color: #c4d6e5; color: #1e425f; }
.secret-box { border: 1px dashed var(--brass); background: #fffaf0; border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; }
.secret-box code { font-size: 16px; padding: 2px 8px; background: #fff; border: 1px solid var(--line); border-radius: 4px; user-select: all; }

/* ---------------- Στατιστικά (μία λωρίδα, όχι κάρτες) ---------------- */
.stats { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); margin-bottom: 22px; }
.stats > div { flex: 1 1 150px; padding: 14px 18px; border-right: 1px solid var(--line-2); }
.stats > div:last-child { border-right: 0; }
.stats b { display: block; font: 600 26px/1.1 var(--font-c); }
.stats span { font-size: 13px; color: var(--ink-3); }

/* ---------------- Στόλος (dashboard) ---------------- */
.fleet-group { margin-bottom: 26px; }
.fleet-group__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fleet-group__head h2 { font-size: 17px; }
.vessel-rows { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); }
.vessel-row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px auto;
  align-items: center; gap: 18px; padding: 10px 16px;
  border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none;
}
.vessel-row:last-child { border-bottom: 0; }
.vessel-row:hover { background: #fbfbf7; }
.vessel-row:hover .ship-svg--mini .sv-hull { stroke: var(--hull); }
.vessel-row__name b { display: block; font: 600 16px var(--font-c); }
.vessel-row__name span { font-size: 13px; color: var(--ink-3); }
.vessel-row__meta { font-size: 13px; color: var(--ink-2); }
.vessel-row__status { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 13px; color: var(--ink-3); white-space: nowrap; }

/* ---------------- Σχέδιο πλοίου ---------------- */
.drawing {
  position: relative;
  background-color: var(--drawing);
  background-image:
    linear-gradient(rgba(19, 40, 58, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 40, 58, .045) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 18px 0;
  overflow: hidden;
}
.drawing__frame { border: 1px solid rgba(19, 40, 58, .25); padding: 10px 10px 0; }
.drawing__titleblock {
  display: grid; grid-template-columns: repeat(4, auto); width: max-content; max-width: 100%;
  margin: 0 0 0 auto; border: 1px solid rgba(19, 40, 58, .35); border-bottom: 0;
  font-size: 12px; background: rgba(255, 255, 255, .7);
}
.drawing__titleblock > div { padding: 5px 10px; border-left: 1px solid rgba(19, 40, 58, .2); }
.drawing__titleblock > div:first-child { border-left: 0; }
.drawing__titleblock span { display: block; color: var(--ink-3); font-size: 11px; }
.drawing__titleblock b { font: 600 13px var(--font-c); }

.ship-svg { display: block; width: 100%; height: auto; }
.ship-svg .sv-sea { fill: rgba(42, 77, 105, .06); }
.ship-svg .sv-waterline { fill: none; stroke: #6f93ad; stroke-width: 1.2; stroke-dasharray: 0; opacity: .7; }
.ship-svg .sv-hull { fill: #fdfdfb; stroke: var(--hull); stroke-width: 2; stroke-linejoin: round; }
.ship-svg .sv-boottop { fill: rgba(140, 52, 44, .12); }
.ship-svg .sv-db { fill: rgba(19, 40, 58, .05); stroke: rgba(19, 40, 58, .25); stroke-width: .8; }
.ship-svg .sv-space { fill: rgba(255, 255, 255, .55); stroke: rgba(19, 40, 58, .45); stroke-width: 1; }
.ship-svg .sv-machine { fill: #e9ecec; stroke: var(--hull-3); stroke-width: 1; }
.ship-svg .sv-detail, .ship-svg .sv-deckline { stroke: rgba(19, 40, 58, .35); stroke-width: .8; fill: none; }
.ship-svg .sv-shaft { stroke: var(--hull-3); stroke-width: 2.5; }
.ship-svg .sv-prop, .ship-svg .sv-rudder { fill: #dcd2c0; stroke: var(--hull); stroke-width: 1.2; }
.ship-svg .sv-thruster { fill: none; stroke: var(--hull-3); stroke-width: 1.2; stroke-dasharray: 3 2; }
.ship-svg .sv-house { fill: #fdfdfb; stroke: var(--hull); stroke-width: 1.4; }
.ship-svg .sv-bridge { fill: #fdfdfb; stroke: var(--hull); stroke-width: 1.6; }
.ship-svg .sv-window { fill: rgba(19, 40, 58, .45); }
.ship-svg .sv-window--bridge { fill: rgba(42, 77, 105, .75); }
.ship-svg .sv-mast, .ship-svg .sv-crane { fill: none; stroke: var(--hull); stroke-width: 1.6; stroke-linecap: round; }
.ship-svg .sv-radar { fill: var(--hull); }
.ship-svg .sv-funnel { fill: #fdfdfb; stroke: var(--hull); stroke-width: 1.4; }
.ship-svg .sv-funnel-band { fill: var(--brass); }
.ship-svg .sv-hatch { fill: #eef0ee; stroke: var(--hull); stroke-width: 1.1; }
.ship-svg .sv-pipe { stroke: var(--hull-3); stroke-width: 2; }
.ship-svg .sv-pipe--thin { stroke-width: 1; }
.ship-svg .sv-dome { fill: #eef0ee; stroke: var(--hull); stroke-width: 1.3; }
.ship-svg .sv-box { stroke: rgba(19, 40, 58, .55); stroke-width: .6; }
.ship-svg .sv-box--0 { fill: #c9d6df; } .ship-svg .sv-box--1 { fill: #e3d6bf; }
.ship-svg .sv-box--2 { fill: #d5dfd2; } .ship-svg .sv-box--3 { fill: #ece9e1; }
.ship-svg .sv-hit { fill: transparent; stroke: none; }
.ship-svg .sv-fender { fill: none; stroke: #3b4248; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ship-svg .sv-fender--bow { stroke-width: 12; }
.ship-svg .sv-tyre { fill: #3b4248; }
.ship-svg .sv-crane--heavy { stroke-width: 2.6; }
.ship-svg .sv-tender { fill: #fdfdfb; stroke: var(--hull); stroke-width: 1.2; }
.ship-svg .sv-lifeboat { fill: #e2833a; stroke: var(--hull); stroke-width: 1; }
.ship-svg .sv-winch { fill: #fdfdfb; stroke: var(--hull); stroke-width: 1.2; }
.ship-svg .sv-towline { fill: none; stroke: var(--brass); stroke-width: 1.6; stroke-dasharray: 5 3; }
.ship-svg--mini .sv-tyre, .ship-svg--mini .sv-towline { display: none; }
.ship-svg .sv-hatchline { stroke: currentColor; stroke-width: 2; }
.ship-svg .sv-label {
  font: 600 11px var(--font-c); letter-spacing: .08em; fill: rgba(19, 40, 58, .55);
  text-anchor: middle; pointer-events: none;
}
.ship-svg .sv-label--sm { font-size: 9.5px; }

/* Ζώνες: κατάσταση + διάδραση */
.ship-svg .zone { cursor: pointer; transition: opacity .15s; }
.ship-svg .zone.z-ok .sv-space, .ship-svg .zone.z-ok .sv-house { fill: rgba(47, 125, 85, .16); }
.ship-svg .zone.z-due .sv-space, .ship-svg .zone.z-due .sv-house { fill: rgba(201, 148, 19, .22); }
.ship-svg .zone.z-overdue .sv-space, .ship-svg .zone.z-overdue .sv-house { fill: rgba(191, 49, 49, .2); }
.ship-svg .zone.z-overdue .sv-space { stroke: var(--over); }
.ship-interactive .ship-svg:hover .zone { opacity: .55; }
.ship-interactive .ship-svg .zone:hover, .ship-interactive .ship-svg .zone.is-selected { opacity: 1; }
.ship-interactive .ship-svg .zone:hover .sv-space, .ship-interactive .ship-svg .zone.is-selected .sv-space,
.ship-interactive .ship-svg .zone:hover .sv-house, .ship-interactive .ship-svg .zone.is-selected .sv-house,
.ship-interactive .ship-svg .zone:hover .sv-bridge, .ship-interactive .ship-svg .zone.is-selected .sv-bridge {
  stroke: var(--brass); stroke-width: 2.2;
}
.ship-interactive .ship-svg .zone.is-selected .sv-space,
.ship-interactive .ship-svg .zone.is-selected .sv-house { fill: rgba(176, 141, 87, .18); }
.ship-svg--mini { max-width: 260px; }
.ship-svg--mini .sv-hull { stroke-width: 3; }
.ship-svg--mini .sv-window { display: none; }

/* Πίνακας ζώνης δίπλα στο σχέδιο */
.zone-panel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.zone-info { min-height: 100%; }
.zone-info h3 { font-size: 18px; margin-bottom: 4px; }
.zone-info dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0; font-size: 14px; }
.zone-info dt { color: var(--ink-2); }
.zone-info dd { margin: 0; font: 600 15px var(--font-c); text-align: right; }
.zone-info ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-2); padding: 12px 0 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Στοιχεία πλοίου (particulars) */
.particulars { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0; }
.particulars section { padding: 16px 18px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.particulars h3 { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; font-weight: 600; }
.particulars dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 14px; }
.particulars dt { color: var(--ink-3); }
.particulars dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: 9px 18px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.list-plain li:last-child { border-bottom: 0; }

/* ---------------- RBAC πίνακας ---------------- */
.perm-matrix td, .perm-matrix th { text-align: center; }
.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; }
.perm-matrix input { width: 17px; height: 17px; accent-color: var(--hull); }
.perm-matrix .na { color: var(--line); }
.perm-matrix tr.is-soon td:first-child { color: var(--ink-3); }

/* ---------------- Audit ---------------- */
.diff { font-size: 12px; margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.diff dt { color: var(--ink-3); }
.diff dd { margin: 0; overflow-wrap: anywhere; }
.diff del { color: var(--over); text-decoration: line-through; }
.diff ins { color: var(--ok); text-decoration: none; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { min-width: 150px; }
.pager { display: flex; gap: 6px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line-2); font-size: 14px; }

.empty { padding: 40px 24px; text-align: center; color: var(--ink-2); }
.empty h3 { margin-bottom: 6px; }
.empty .btn { margin-top: 10px; }

/* ---------------- Login ---------------- */
.auth {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  background: var(--hull);
}
.auth__art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; color: #d5e0e8; overflow: hidden; }
.auth__art .ship-svg { position: absolute; left: -4%; right: -4%; width: 108%; bottom: 34%; opacity: .95; }
.auth__art .ship-svg .sv-hull, .auth__art .ship-svg .sv-house, .auth__art .ship-svg .sv-bridge,
.auth__art .ship-svg .sv-funnel, .auth__art .ship-svg .sv-hatch, .auth__art .ship-svg .sv-dome { fill: transparent; stroke: #8fb0c8; }
.auth__art .ship-svg .sv-space, .auth__art .ship-svg .sv-machine { fill: transparent; stroke: rgba(143, 176, 200, .45); }
.auth__art .ship-svg .sv-mast, .auth__art .ship-svg .sv-crane, .auth__art .ship-svg .sv-shaft { stroke: #8fb0c8; }
.auth__art .ship-svg .sv-window { fill: rgba(143, 176, 200, .5); }
.auth__art .ship-svg .sv-label { fill: rgba(176, 141, 87, .9); }
.auth__art .ship-svg .sv-sea { fill: rgba(143, 176, 200, .06); }
.auth__art .ship-svg .sv-boottop, .auth__art .ship-svg .sv-db { fill: transparent; stroke: none; }
.auth__art .ship-svg .sv-prop, .auth__art .ship-svg .sv-rudder, .auth__art .ship-svg .sv-radar { fill: transparent; stroke: #8fb0c8; }
.auth__art .ship-svg .sv-funnel-band { fill: var(--brass); }
.auth__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(143, 176, 200, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 176, 200, .07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.auth__claim { position: relative; max-width: 30ch; }
.auth__claim h1 { color: #fff; font-size: 34px; font-weight: 500; margin-bottom: 12px; }
.auth__claim p { color: #a9bccb; font-size: 16px; }
.auth__panel { background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 32px; }
.auth__box { width: 100%; max-width: 380px; }
.auth__box h2 { font-size: 24px; margin: 18px 0 6px; }
.auth__box > p { color: var(--ink-2); margin-bottom: 22px; }
.auth__box .field { margin-bottom: 14px; }
.brandmark { display: flex; align-items: center; gap: 10px; color: var(--hull); }
.brandmark b { font: 600 18px var(--font-c); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .zone-panel, .two-col { grid-template-columns: 1fr; }
  .vessel-row { grid-template-columns: 180px minmax(0, 1fr) auto; }
  .vessel-row__meta { display: none; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .nav.is-open { transform: none; box-shadow: 0 0 0 100vmax rgba(10, 20, 30, .45); }
  .btn.menu-btn { display: inline-flex; }
  .topbar, .content, .ctx-banner { padding-left: 16px; padding-right: 16px; }
  .topbar__user .who { display: none; }
  .form-grid .span-2 { grid-column: 1 / -1; }
  .auth { grid-template-columns: 1fr; }
  .auth__art { min-height: 230px; padding: 24px; }
  .auth__art .ship-svg { bottom: 18%; }
  .auth__claim h1 { font-size: 24px; }
  .vessel-row { grid-template-columns: minmax(0, 1fr) auto; }
  .vessel-row .ship-svg--mini { grid-column: 1 / -1; grid-row: 2; max-width: 100%; }
  .drawing__titleblock { grid-template-columns: repeat(2, auto); }
  h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =====================================================================
   Βήμα 2 — Equipment, PMS jobs, ζώνες
   ===================================================================== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -6px 0 20px; overflow-x: auto; }
.tabs a {
  padding: 10px 16px; font-size: 14px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 8px; align-items: center;
}
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--brass); font-weight: 500; }
.tabs .count { font-size: 12px; color: var(--ink-3); }
.tabs .count--over { color: var(--over); font-weight: 600; }

/* Δέντρο εξοπλισμού */
.tree { list-style: none; margin: 0; padding: 0; }
.tree-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 120px 150px auto;
  align-items: center; gap: 12px; padding: 7px 16px 7px 0; border-bottom: 1px solid var(--line-2); font-size: 14px;
}
.tree-row:hover { background: #fbfbf7; }
.tree-row[hidden] { display: none; }
.tree-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tree-toggle {
  width: 22px; height: 22px; flex: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-3);
  display: grid; place-items: center; border-radius: 4px;
}
.tree-toggle:hover { background: var(--line-2); color: var(--ink); }
.tree-toggle svg { width: 14px; height: 14px; transition: transform .15s; }
.tree-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.tree-toggle--leaf { visibility: hidden; }
.tree-code { font: 500 13px var(--font-c); color: var(--ink-3); white-space: nowrap; }
.tree-name a { color: var(--ink); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-name a:hover { color: var(--hull-3); text-decoration: underline; }
.tree-maker { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-counter { font: 500 13px var(--font-c); text-align: right; color: var(--ink-2); white-space: nowrap; }
.tree-jobs { display: flex; gap: 6px; justify-content: flex-end; align-items: center; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.tree-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; }
.tree-row:hover .tree-actions, .tree-row:focus-within .tree-actions { opacity: 1; }
.tree-head { font-size: 12px; color: var(--ink-3); background: #fafbfa; font-weight: 500; }
.tree-head:hover { background: #fafbfa; }
.crit { display: inline-block; font: 600 11px var(--font-c); color: var(--over); border: 1px solid #e7b8b5; border-radius: 3px; padding: 0 4px; line-height: 16px; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; font: 600 12px var(--font-c); }
.count-pill--over { background: var(--over-soft); color: var(--over); }
.count-pill--due { background: var(--due-soft); color: #8a6508; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.toolbar .spacer { flex: 1; }
.breadcrumb-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.breadcrumb-path a { color: var(--ink-2); text-decoration: none; }
.breadcrumb-path a:hover { text-decoration: underline; }
.breadcrumb-path span.sep { color: var(--line); }

/* Κάρτα counter */
.counter-big { font: 600 34px/1 var(--font-c); }
.counter-big small { font: 500 15px var(--font-c); color: var(--ink-3); margin-left: 4px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.qr-box { display: flex; gap: 14px; align-items: center; }
.qr-box [data-qr] { background: #fff; padding: 6px; border: 1px solid var(--line); border-radius: 4px; line-height: 0; }
.prose { font-size: 14px; white-space: pre-line; }

/* Εργασίες */
.status-strip { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); margin-bottom: 16px; overflow: hidden; }
.status-strip a, .status-strip > .stat {
  flex: 1 1 120px; padding: 12px 16px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 2px;
}
.status-strip a:last-child, .status-strip > .stat:last-child { border-right: 0; }
.status-strip a:hover { background: #fbfbf7; }
.status-strip a.is-active { box-shadow: inset 0 -3px 0 var(--brass); background: #fcfbf6; }
.status-strip b { font: 600 24px/1.1 var(--font-c); }
.status-strip span { font-size: 13px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.due-cell { font: 500 14px var(--font-c); white-space: nowrap; }
.due-cell small { display: block; font: 400 12px var(--font); color: var(--ink-3); }
.due-over { color: var(--over); }
.due-soon { color: #8a6508; }
.trigger-fields [data-for] { display: none; }
.trigger-fields[data-trigger="calendar"] [data-for~="calendar"],
.trigger-fields[data-trigger="counter"] [data-for~="counter"],
.trigger-fields[data-trigger="combined"] [data-for~="combined"],
.trigger-fields[data-trigger="condition"] [data-for~="condition"] { display: flex; }
.notice { padding: 10px 14px; border-radius: var(--r); background: var(--due-soft); color: #6d5007; font-size: 14px; margin-bottom: 14px; }

/* Ζώνη / κάτοψη μηχανοστασίου */
.zone-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.zone-switch a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--sheet); color: var(--ink-2); font-size: 13px; text-decoration: none;
}
.zone-switch a:hover { border-color: var(--ink-3); color: var(--ink); }
.zone-switch a.is-active { border-color: var(--hull); background: var(--hull); color: #fff; }
.er-svg { display: block; width: 100%; height: auto; }
.er-svg .er-hull { fill: rgba(255, 255, 255, .6); stroke: var(--hull); stroke-width: 2; }
.er-svg .er-bulkhead { stroke: var(--hull); stroke-width: 2; stroke-dasharray: 8 5; }
.er-svg .er-shaft { stroke: var(--hull-3); stroke-width: 4; }
.er-svg .er-prop { fill: #dcd2c0; stroke: var(--hull); }
.er-svg .er-note { font: 500 10px var(--font-c); letter-spacing: .08em; fill: rgba(19, 40, 58, .45); }
.er-svg .er-block { cursor: pointer; }
.er-svg .er-box { fill: #fdfdfb; stroke: var(--hull); stroke-width: 1.3; }
.er-svg .er-block.z-ok .er-box { fill: #e9f4ed; stroke: var(--ok); }
.er-svg .er-block.z-due .er-box { fill: #fbf1d4; stroke: var(--due); }
.er-svg .er-block.z-overdue .er-box { fill: #f8e1df; stroke: var(--over); stroke-width: 2; }
.er-svg .er-block.z-none .er-box { fill: #f6f7f5; stroke: rgba(19, 40, 58, .35); stroke-dasharray: 4 3; }
.er-svg .er-block:hover .er-box, .er-svg .er-block.is-selected .er-box, .er-svg .er-block:focus .er-box { stroke: var(--brass); stroke-width: 2.6; }
.er-svg .er-block:focus { outline: none; }
.er-svg .er-sym { fill: none; stroke: rgba(19, 40, 58, .4); stroke-width: 1.2; }
.er-svg .er-label { font: 600 13px var(--font-c); fill: var(--ink); }
.er-svg .er-meta { font: 400 11px var(--font); fill: var(--ink-3); }
.er-svg .er-badge { fill: var(--over); }
.er-svg .er-block.z-due .er-badge { fill: var(--due); }
.er-svg .er-badge-t { font: 600 11px var(--font-c); fill: #fff; text-anchor: middle; }
.group-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fafbfa; border-bottom: 1px solid var(--line-2); font: 600 15px var(--font-c); }
.group-head .muted { font: 400 13px var(--font); }
.zone-groups .sheet { scroll-margin-top: 80px; }
.zone-groups .sheet.is-target { box-shadow: 0 0 0 2px var(--brass); }

/* Ετικέτες QR (εκτύπωση) */
.labels-page { background: #fff; padding: 12mm; }
.labels-page .no-print { margin-bottom: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.qr-label {
  display: grid; grid-template-columns: 26mm 1fr; gap: 3mm; align-items: center;
  border: 1px solid #333; border-radius: 2mm; padding: 2.5mm; break-inside: avoid; min-height: 32mm; font-family: var(--font);
}
.qr-label [data-qr] { line-height: 0; }
.qr-label [data-qr] img, .qr-label [data-qr] canvas { width: 26mm !important; height: 26mm !important; }
.qr-label b { display: block; font: 600 11pt var(--font-c); line-height: 1.15; }
.qr-label .c { font: 600 9pt var(--font-c); color: #444; }
.qr-label .m { font-size: 8pt; color: #555; margin-top: 1mm; }
.qr-label .v { font-size: 7.5pt; color: #777; margin-top: 1.5mm; }
@media print {
  .no-print { display: none !important; }
  .labels-page { padding: 0; }
  @page { margin: 8mm; }
}

@media (max-width: 1100px) {
  .tree-row { grid-template-columns: minmax(0, 1fr) 110px 120px auto; }
  .tree-maker { display: none; }
}
@media (max-width: 860px) {
  .tree-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tree-counter, .tree-actions { display: none; }
  .labels { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Βήμα 3 — Work orders
   ===================================================================== */
.stepper { display: flex; margin: 0 0 20px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); overflow: hidden; }
.stepper li {
  flex: 1; position: relative; padding: 11px 14px 11px 26px; font-size: 13px; color: var(--ink-3);
  border-right: 1px solid var(--line-2); min-width: 0;
}
.stepper li:first-child { padding-left: 16px; }
.stepper li:last-child { border-right: 0; }
.stepper li b { display: block; font: 600 14px var(--font-c); color: var(--ink-2); }
.stepper li span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper li.is-done { background: #f3f8f4; }
.stepper li.is-done b { color: var(--ok); }
.stepper li.is-current { background: var(--brass-soft); box-shadow: inset 0 -3px 0 var(--brass); }
.stepper li.is-current b { color: #6b5430; }
.stepper li.is-skip { display: none; }

.action-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 14px 18px; background: #fcfbf6; border: 1px solid #e6dcc6; border-radius: var(--r); margin-bottom: 18px; }
.action-bar > p { margin: 0; flex: 1 1 260px; font-size: 14px; color: #5d4826; align-self: center; }
.action-bar details { position: relative; }
.action-bar details > summary { list-style: none; }
.action-bar details > summary::-webkit-details-marker { display: none; }
.action-bar details[open] > summary { box-shadow: 0 0 0 2px var(--brass); }
.action-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(360px, 86vw);
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: 0 8px 24px rgba(19, 40, 58, .14);
}
.action-pop textarea { min-height: 70px; margin: 6px 0 10px; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 18px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.checklist li:last-child { border-bottom: 0; }
.checklist input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ok); flex: none; }
.checklist .is-done { color: var(--ink-3); text-decoration: line-through; }

.timeline { list-style: none; margin: 0; padding: 6px 18px 12px; }
.timeline li { position: relative; padding: 8px 0 8px 22px; font-size: 13px; border-left: 2px solid var(--line-2); margin-left: 5px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--hull-3); }
.timeline li.t-approved::before { border-color: var(--ok); background: var(--ok); }
.timeline li.t-completed::before, .timeline li.t-reviewed::before { border-color: var(--brass); background: var(--brass); }
.timeline li.t-cancelled::before { border-color: var(--over); }
.timeline b { font-weight: 600; }
.timeline .muted { display: block; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 14px 18px; }
.photo { position: relative; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #f6f7f5; }
.photo img { display: block; width: 100%; height: 110px; object-fit: cover; }
.photo .pdf { display: grid; place-items: center; height: 110px; font: 600 14px var(--font-c); color: var(--ink-3); }
.photo figcaption { padding: 5px 8px; font-size: 12px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 6px; }
.photo figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo form { position: absolute; top: 4px; right: 4px; }
.photo form button { background: rgba(255, 255, 255, .9); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 2px 5px; line-height: 1; }

.m-table input { min-height: 34px; padding: 6px 8px; }
.m-table td { padding: 6px 8px; }
.cond-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.cond-pick label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; background: #fff; }
.cond-pick input { accent-color: var(--hull); }
.cond-pick label:has(input:checked) { border-color: var(--hull); background: #eef2f5; font-weight: 500; }

.history-table td.res-good { color: var(--ok); }
.history-table td.res-poor, .history-table td.res-failed { color: var(--over); font-weight: 500; }
.counter-input { width: 130px; text-align: right; font: 500 15px var(--font-c); }
.row-error td { background: var(--over-soft) !important; }
.row-ok td { background: var(--ok-soft) !important; }

/* Εκτύπωση WO (φύλλο εργασίας για το πλοίο) */
.wo-print { max-width: 190mm; margin: 0 auto; padding: 10mm; font-size: 10.5pt; color: #000; background: #fff; }
.wo-print h1 { font-size: 18pt; margin: 0 0 2mm; }
.wo-print table { width: 100%; border-collapse: collapse; margin: 3mm 0; }
.wo-print th, .wo-print td { border: 1px solid #555; padding: 1.6mm 2mm; text-align: left; vertical-align: top; }
.wo-print th { background: #eee; width: 32%; font-weight: 600; }
.wo-print h2 { font-size: 12pt; margin: 5mm 0 1mm; border-bottom: 1.5px solid #000; padding-bottom: 1mm; }
.wo-print .box { border: 1px solid #555; min-height: 22mm; padding: 2mm; white-space: pre-line; }
.wo-print .sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-top: 6mm; }
.wo-print .sign div { border-top: 1px solid #000; padding-top: 1.5mm; font-size: 9pt; min-height: 16mm; }
.wo-print .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; border-bottom: 2px solid #000; padding-bottom: 3mm; margin-bottom: 3mm; }

@media print {
  .nav, .topbar, .ctx-banner, .action-bar, .tabs, .no-print, .page-head__actions, .flash { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; max-width: none; }
  .sheet { border-color: #999; break-inside: avoid; }
  body { background: #fff; }
}
@media (max-width: 860px) {
  .stepper { flex-direction: column; }
  .stepper li { border-right: 0; border-bottom: 1px solid var(--line-2); padding-left: 16px; }
}
.two-col > .sheet + .sheet { margin-top: 0; }

/* ---------- Βήμα 4: reports ---------- */
.section-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 22px 0 10px; letter-spacing: .02em; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.report-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.report-card:hover { border-color: var(--brass); box-shadow: 0 2px 10px rgba(19,40,58,.08); }
.report-card b { display: block; margin-bottom: 3px; }
.report-card__icon { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--brass-soft); color: var(--hull); display: grid; place-items: center; }
.report-card__icon svg { width: 18px; height: 18px; }
.table--report td, .table--report th { white-space: nowrap; }
.table--report td.small { white-space: normal; min-width: 140px; max-width: 320px; }
.table--report td.small.nowrap { white-space: nowrap; min-width: 0; }
.report-print { padding: 8mm; font-size: 8.5pt; color: #000; background: #fff; }
.report-print .rp-head { display: flex; justify-content: space-between; gap: 8mm; border-bottom: 2px solid #000; padding-bottom: 3mm; margin-bottom: 3mm; }
.report-print .rp-kicker { font-size: 8pt; letter-spacing: .08em; color: #555; }
.report-print h1 { font-size: 15pt; margin: 1mm 0 0; }
.report-print .rp-meta { text-align: right; font-size: 8pt; line-height: 1.5; }
.report-print table { width: 100%; border-collapse: collapse; }
.report-print th, .report-print td { border: 1px solid #888; padding: 1.2mm 1.6mm; text-align: left; vertical-align: top; }
.report-print th { background: #e8e8e4; font-weight: 600; }
.report-print td.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-print thead { display: table-header-group; }
.report-print tr { page-break-inside: avoid; }
.kpi--link { text-decoration: none; color: inherit; }
dialog.sheet { border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px rgba(19,40,58,.25); }
dialog.sheet::backdrop { background: rgba(19,40,58,.45); }
dialog .field label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.inline-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-add select.input { flex: 1 1 260px; min-width: 0; }

/* ---------- Βήμα 5: Manuals & AI ---------- */
.nav__badge { margin-left: auto; font-style: normal; font: 600 11px/18px var(--font); min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--brass); color: var(--hull); text-align: center; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.input--sm { padding: 5px 8px; font-size: 13px; min-height: 30px; }
.lead-note { display: flex; gap: 8px; align-items: flex-start; margin: -6px 0 16px; color: var(--ink-2); font-size: 14px; }
.lead-note svg { width: 16px; height: 16px; margin-top: 2px; color: var(--brass); flex: none; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Ανέβασμα */
.upload-box { margin-bottom: 18px; }
.upload-box > summary { cursor: pointer; list-style: none; }
.upload-box > summary::-webkit-details-marker { display: none; }
.upload-box > summary h2 { display: flex; gap: 8px; align-items: center; }
.upload-box > summary h2 svg { width: 18px; height: 18px; }
.dropzone { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 18px; text-align: center; border: 1.5px dashed #c3ccd0;
  border-radius: var(--r); background: var(--drawing); background-image: linear-gradient(rgba(19,40,58,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(19,40,58,.035) 1px, transparent 1px);
  background-size: 18px 18px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--brass); background-color: #fbf8f1; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--line); display: grid; place-items: center; color: var(--hull); }
.dropzone__icon svg { width: 22px; height: 22px; }

/* Πρόοδος εργασίας: το πλοίο ταξιδεύει όσο διαβάζεται το manual */
.job-progress { display: flex; gap: 14px; align-items: center; padding: 14px 18px; margin-bottom: 14px; background: var(--sheet); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: var(--r); }
.job-progress__ship { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--brass-soft); color: var(--hull); animation: bob 2.4s ease-in-out infinite; flex: none; }
.job-progress__ship svg { width: 20px; height: 20px; }
.job-progress__body { flex: 1; display: grid; gap: 6px; min-width: 0; }
.job-progress .bar { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.job-progress .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hull-3), var(--brass)); border-radius: 3px; transition: width .6s ease; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }

/* Viewer manual */
.two-col--wide { grid-template-columns: minmax(0, 1fr) 380px; }
.viewer .sheet__head { gap: 10px; }
.viewer__nav { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.viewer__pdf { display: block; width: 100%; height: min(78vh, 980px); border: 0; border-top: 1px solid var(--line-2); background: #e9ecec; }
.viewer__text { border-top: 1px solid var(--line-2); }
.viewer__text summary { padding: 10px 18px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.viewer__text pre { margin: 0; padding: 12px 18px 18px; max-height: 420px; overflow: auto; white-space: pre-wrap; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-2); background: var(--drawing); }

/* Συνομιλία */
.two-col--chat { grid-template-columns: minmax(0, 1fr) 320px; }
.chat { display: flex; flex-direction: column; min-height: 72vh; }
.chat__scope { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line-2); font-size: 14px; background: #fafbfa; border-radius: var(--r) var(--r) 0 0; }
.chat__scope svg { width: 15px; height: 15px; color: var(--brass); vertical-align: -2px; }
.chat__scope .muted { margin-left: auto; }
.chat__log { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow-y: auto; max-height: 64vh; }
.chat__empty { margin: auto; max-width: 520px; text-align: center; color: var(--ink-2); display: grid; gap: 12px; justify-items: center; }
.chat__emblem { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--brass-soft); color: var(--hull); }
.chat__emblem svg { width: 26px; height: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { border: 1px solid var(--line); background: var(--sheet); border-radius: 16px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--brass); }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.55; }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 4px 0 10px; padding-left: 22px; } .msg li { margin: 3px 0; }
.msg--user { align-self: flex-end; background: var(--hull); color: #fff; border-bottom-right-radius: 3px; white-space: pre-wrap; }
.msg--ai { align-self: flex-start; background: var(--drawing); border: 1px solid var(--line-2); border-bottom-left-radius: 3px; }
.ai-answer .msg--ai { max-width: none; }
.msg--wait { color: var(--ink-3); }
.msg__foot { display: flex; gap: 6px; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.typing { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.cite { display: inline-block; padding: 0 6px; margin: 0 1px; border-radius: 4px; background: var(--brass-soft); color: #6e5126; font: 500 12px/20px var(--font-c); text-decoration: none; white-space: nowrap; vertical-align: 1px; }
a.cite:hover { background: var(--brass); color: var(--hull); }
.cite--pms { background: var(--info-soft); color: var(--hull-3); }
.hits { display: grid; gap: 6px; margin-top: 10px; }
.hit { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--sheet); border: 1px solid var(--line-2); text-decoration: none; color: inherit; }
.hit:hover { border-color: var(--brass); }
.chat__composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.chat__composer textarea { flex: 1; resize: vertical; min-height: 46px; }
.chat__fine { margin: 0; padding: 0 16px 12px; }
.history li { display: grid; gap: 2px; }

/* Ουρά προτάσεων */
.action-bar--sticky { position: sticky; top: 64px; z-index: 5; align-items: center; box-shadow: 0 6px 14px rgba(19,40,58,.06); }
.action-bar--sticky p { margin: 0 auto 0 0; }
.table--sugg td { vertical-align: top; }
.table--sugg tr.is-dup td { background: #fdfaf1; }
.input--cell { padding: 5px 7px; font-size: 13px; min-height: 30px; width: 100%; min-width: 90px; }
.input--cell.input--wide { min-width: 220px; }
.input--cell.input--num { min-width: 64px; }
.ai-panel .sheet__head h2 { display: flex; gap: 8px; align-items: center; }
.ai-panel .sheet__head svg { width: 17px; height: 17px; color: var(--brass); }

@media (max-width: 1100px) {
  .two-col--wide, .two-col--chat { grid-template-columns: 1fr; }
  .chat { min-height: 60vh; }
}
@media (max-width: 860px) {
  .msg { max-width: 100%; }
  .action-bar--sticky { position: static; }
  .viewer__pdf { height: 70vh; }
}

/* ---------- Βήμα 7α: Certificates ---------- */
.cert-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 14px 18px 18px; }
.cert-tile { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); border-left: 4px solid var(--none); text-decoration: none; color: var(--ink); background: var(--sheet); }
.cert-tile:hover { border-color: var(--brass); }
.cert-tile.is-ok { border-left-color: var(--ok); } .cert-tile.is-due { border-left-color: var(--due); } .cert-tile.is-over { border-left-color: var(--over); }
.cert-tile > span { font-size: 12px; color: var(--ink-3); }
.cert-tile__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.cert-tile__stats em { font-style: normal; font-size: 12px; }
.due-ok { color: var(--ok); }
.cert-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 18px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.cert-hero > div { background: var(--sheet); padding: 14px 16px; display: grid; gap: 2px; }
.cert-hero span { font-size: 12px; color: var(--ink-3); }
.cert-hero b { font: 600 20px/1.2 var(--font-c); }
.cert-hero em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.cert-hero.is-over > div:first-child { background: var(--over-soft); } .cert-hero.is-over > div:first-child b { color: var(--over); }
.cert-hero.is-due > div:first-child { background: var(--due-soft); }
.cert-hero.is-ok > div:first-child { background: var(--ok-soft); }
@media (max-width: 860px) { .cert-hero { grid-template-columns: 1fr 1fr; } }

/* ---- Procurement ---- */
.table--compact td, .table--compact th { padding: 6px 8px; }
.req-items td { vertical-align: middle; }
.req-items input { width: 100%; min-width: 0; }
.req-items td:nth-child(1) { min-width: 200px; }
.req-items td:nth-child(2) { min-width: 200px; }
.cmp td.is-best { background: #eef6ee; font-weight: 600; }
.cmp td.is-na { color: var(--ink-3); }
.cmp tfoot td, .cmp tfoot th { border-top: 2px solid var(--line); font-weight: 600; }
.cmp th.sup { min-width: 130px; text-align: right; }
.cmp .sup small { display: block; font-weight: 400; color: var(--ink-3); }
.approvals { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.approvals span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--sheet); }
.approvals span.is-done { border-color: #9cc59c; background: #eef6ee; }
.proc-flow { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--sheet); }
.proc-flow span { flex: 1 1 100px; padding: 8px 10px; font-size: 12.5px; color: var(--ink-3); border-right: 1px solid var(--line-2); text-align: center; }
.proc-flow span:last-child { border-right: 0; }
.proc-flow span.is-done { color: var(--ink); background: #f4f7f1; }
.proc-flow span.is-now { color: var(--ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--brass); background: #fcfbf6; }
.recv-grid input { width: 7em; }
.doc-print table.lines th { width: auto; }
.doc-print .num { text-align: right; }
.doc-print small { font-size: 8.5pt; }
.doc-print .totals { width: 45%; margin-left: auto; }
.doc-print .totals th { width: 55%; }
.table td.num { white-space: nowrap; }
.appr-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.appr-forms form { display: flex; gap: 8px; align-items: flex-end; }
.appr-forms .field { flex: 1; margin: 0; }
@media (max-width: 760px) { .appr-forms { grid-template-columns: 1fr; } }
.two-col > * { min-width: 0; }
.table-wrap { position: relative; } /* absolute .sr-only μέσα σε πίνακα να μην φαρδαίνει τη σελίδα */

/* ---------- Βήμα 7β: Risk assessment / Permit to work ---------- */
.risk { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.risk--low { background: var(--ok-soft); color: #1f5a3c; border-color: #b7d8c4; }
.risk--medium { background: var(--due-soft); color: #7a5806; border-color: #ecd593; }
.risk--high { background: #fbe3cc; color: #8a3f06; border-color: #efbb8b; }
.risk--extreme { background: var(--over); color: #fff; }
.stats .risk { font: 600 15px/1.4 var(--font); }
td.risk--low, td.risk--medium, td.risk--high, td.risk--extreme { border-radius: 0; }
.risk-matrix { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 12px; }
.risk-matrix th { font-weight: 600; color: var(--ink-2); padding: 4px; text-align: center; vertical-align: bottom; }
.risk-matrix th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 10.5px; }
.risk-matrix tbody th { text-align: right; white-space: nowrap; }
.risk-matrix .rm-corner { font-weight: 400; font-size: 10.5px; color: var(--ink-3); text-align: left; }
.risk-matrix td { text-align: center; padding: 8px 4px; border-radius: 4px; font-weight: 600; position: relative; min-width: 34px; }
.risk-matrix td.risk--low { background: #d7ecdf; } .risk-matrix td.risk--medium { background: #f6e4ad; } .risk-matrix td.risk--high { background: #f4c597; } .risk-matrix td.risk--extreme { background: #d9534f; color: #fff; }
.risk-matrix td.has-mark { box-shadow: inset 0 0 0 2px var(--hull); }
.risk-matrix td b { position: absolute; top: -6px; right: -6px; background: var(--hull); color: #fff; border-radius: 99px; font-size: 10.5px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; }
.ra-table td { vertical-align: top; }
.ra-table textarea { width: 100%; min-width: 170px; resize: vertical; }
.ra-table td.rk { white-space: nowrap; }
.ra-table td.rk select { display: block; width: 9.5em; margin-bottom: 4px; }
.ra-table td.rk .risk { display: block; text-align: center; }
.ra-view td { vertical-align: top; }
.ptw-type { display: inline-block; font: 700 11px/1 var(--font-c); letter-spacing: .04em; padding: 4px 6px; border-radius: 4px; background: var(--hull); color: #fff; vertical-align: middle; }
.ptw-type--hot_work { background: #c4471f; } .ptw-type--enclosed_space { background: #6a4bb0; } .ptw-type--electrical_isolation { background: #c99413; color: #1d1a10; }
.ptw-type--working_aloft { background: #2d6fa3; } .ptw-type--working_overboard { background: #137b84; } .ptw-type--other { background: var(--hull-3); }
h1 .ptw-type { font-size: 14px; padding: 5px 8px; position: relative; top: -3px; }
.ptw-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 18px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.ptw-hero > div { background: var(--sheet); padding: 14px 16px; display: grid; gap: 2px; }
.ptw-hero span { font-size: 12px; color: var(--ink-3); }
.ptw-hero b { font: 600 18px/1.25 var(--font-c); }
.ptw-hero em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.ptw-hero.is-active > div:first-child { background: var(--ok-soft); } .ptw-hero.is-active > div:first-child b { color: var(--ok); }
.ptw-hero.is-expired > div:first-child { background: var(--over-soft); } .ptw-hero.is-expired > div:first-child b { color: var(--over); }
.ptw-hero.is-requested > div:first-child { background: var(--due-soft); }
.ptw-check { list-style: none; margin: 0; padding: 6px 0; }
.ptw-check li { padding: 7px 18px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.ptw-check li:last-child { border-bottom: 0; }
.ptw-check label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ptw-check input { margin-top: 3px; width: 17px; height: 17px; flex: none; }
.ptw-check li.is-critical span::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--over); margin-left: 6px; vertical-align: middle; }
.ptw-check li.is-done span { color: var(--ink-2); }
.crit-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--over); }
.gas-form { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(60px, .7fr)) 1.2fr 1.2fr auto; gap: 8px; align-items: end; }
.gas-form .field { margin: 0; }
.ptw-req { display: flex; flex-wrap: wrap; gap: 8px; }
.ptw-req > span { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; font-size: 13.5px; background: var(--sheet); }
.ptw-req em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.ptw-req .is-missing { border-color: #e9b9b5; background: var(--over-soft); } .ptw-req .is-missing em { color: var(--over); font-weight: 600; }
.ptw-req .is-active { border-color: #b7d8c4; } .ptw-req .is-done { border-color: #b7d8c4; background: var(--ok-soft); }
.ptw-pick { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 4px 0; }
.ptw-stamp { font-size: 15pt; font-weight: 700; color: #a00; border: 2px solid #a00; padding: 2mm; text-align: center; margin: 0 0 3mm; }
.ptw-print-head { border-bottom-width: 4px; }
.ptw-print-head--hot_work { border-color: #c4471f; } .ptw-print-head--enclosed_space { border-color: #6a4bb0; } .ptw-print-head--electrical_isolation { border-color: #c99413; }
.doc-print td.risk--low { background: #d7ecdf; } .doc-print td.risk--medium { background: #f6e4ad; } .doc-print td.risk--high { background: #f4c597; } .doc-print td.risk--extreme { background: #d9534f; color: #fff; }
@media (max-width: 900px) { .ptw-hero { grid-template-columns: 1fr 1fr; } .gas-form { grid-template-columns: repeat(3, 1fr); } }
@media print { .doc-print td.risk--low, .doc-print td.risk--medium, .doc-print td.risk--high, .doc-print td.risk--extreme { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Βήμα 7β: Dry dock ---------- */
.dd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dd-card { display: grid; gap: 4px; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); color: inherit; text-decoration: none; }
.dd-card:hover { border-color: var(--brass); box-shadow: 0 2px 10px rgba(19, 40, 58, .06); }
.dd-card > b { font: 600 18px/1.25 var(--font-c); }
.dd-card__top { display: flex; justify-content: space-between; align-items: center; }
.dd-card__nums { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.dd-card__nums em { font-style: normal; }
.dd-stats > div { position: relative; }
.dd-bar { display: block; height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; margin-top: 6px; min-width: 80px; }
.dd-bar > i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.dd-spec tr.dd-cat th { background: var(--drawing); font: 600 13px var(--font-c); color: var(--ink-2); text-transform: none; letter-spacing: 0; padding: 7px 12px; }
.dd-spec td { vertical-align: top; }
.dd-specdetails summary { cursor: pointer; color: var(--hull-3); margin-top: 3px; }
.dd-specdetails div { margin-top: 4px; padding: 8px 10px; background: var(--drawing); border-radius: 4px; max-width: 560px; }
.dd-edit { display: inline-block; position: relative; }
.dd-edit > summary { list-style: none; } .dd-edit > summary::-webkit-details-marker { display: none; }
.dd-itemform { position: absolute; right: 0; z-index: 20; width: min(560px, 86vw); white-space: normal; text-align: left; }
.dd-inline { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.dd-inline .input--sm { width: 8.5em; text-align: right; }
.dd-progress .dd-inline { justify-content: flex-start; }
.dd-progress input[type=range] { width: 140px; accent-color: var(--ok); }
.dd-progress output { font-size: 12.5px; width: 3em; color: var(--ink-2); }
.dd-progress .dd-inline select { width: auto; text-align: left; }
.dd-cands { max-height: 360px; overflow: auto; }
.dd-punch li.is-closed b { color: var(--ink-3); text-decoration: line-through; }
.dd-punch .dd-inline { justify-content: flex-start; }
.dd-punch .dd-inline .input--sm { width: 220px; text-align: left; }
.dd-bars { display: grid; gap: 2px; }
.dd-bars i { display: block; height: 6px; border-radius: 3px; min-width: 1px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin: 0 2px 0 8px; }
.lg--b { background: #a9b9c6; } .lg--q { background: var(--brass); } .lg--a { background: var(--hull); }
.tabs .count--over { color: #fff; background: var(--due); border-radius: 99px; padding: 0 6px; }
.dd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.dd-two > * { min-width: 0; margin: 0; }
@media (max-width: 900px) { .dd-two { grid-template-columns: 1fr; } }
.ra-table td.rk select { width: 11.5em; }
.gas-form { grid-template-columns: minmax(190px, 1.6fr) repeat(4, minmax(60px, .7fr)) 1.2fr 1.2fr auto; }
.wo-print .ptw-print-head { border-bottom-width: 4px; } .wo-print .ptw-print-head--hot_work { border-color: #c4471f; } .wo-print .ptw-print-head--enclosed_space { border-color: #6a4bb0; } .wo-print .ptw-print-head--electrical_isolation { border-color: #c99413; }

/* ---------- Βήμα 7γ: Condition monitoring ---------- */
.cm-chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.cm-chart .z-warn { fill: #fbf1d4; } .cm-chart .z-alarm { fill: #f8e1df; }
.cm-chart .grid { stroke: var(--line-2); stroke-width: 1; }
.cm-chart .ax { font-size: 10.5px; fill: var(--ink-3); }
.cm-chart .line { fill: none; stroke: var(--hull); stroke-width: 2; stroke-linejoin: round; }
.cm-chart .proj { stroke: var(--due); stroke-width: 2; stroke-dasharray: 5 4; }
.cm-chart .pt { fill: var(--sheet); stroke: var(--hull); stroke-width: 2; }
.cm-chart .pt--warn { stroke: var(--due); fill: var(--due); } .cm-chart .pt--alarm { stroke: var(--over); fill: var(--over); }
.cm-key { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin: 0 3px 0 10px; vertical-align: -1px; }
.cm-key--warn { background: #fbf1d4; border: 1px solid #ecd593; } .cm-key--alarm { background: #f8e1df; border: 1px solid #e9b9b5; } .cm-key--proj { height: 0; border-top: 2px dashed var(--due); }
.cm-spark { display: block; } .cm-spark polyline { fill: none; stroke: var(--hull-3); stroke-width: 1.6; }
.cm-spark--warn polyline { stroke: var(--due); } .cm-spark--alarm polyline { stroke: var(--over); }
.cm-alerts .cm-alert { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; border-left: 4px solid transparent; }
.cm-alert--alarm { border-left-color: var(--over) !important; } .cm-alert--warn { border-left-color: var(--due) !important; } .cm-alert--trend { border-left-color: var(--brass) !important; }
.cm-alert__main { display: grid; gap: 3px; } .cm-alert__main > a, .cm-alert__main > span.tag { display: inline; }
.cm-alert__act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.action-bar.cm-alert--alarm, .action-bar.cm-alert--warn, .action-bar.cm-alert--trend { border-left-width: 4px; border-left-style: solid; }
.cm-limits { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; gap: 10px; align-items: end; padding: 18px; clear: both; }
.cm-limits .field:nth-child(1) label, .cm-limits .field:nth-child(5) label { color: var(--over); }
.cm-limits .field:nth-child(2) label, .cm-limits .field:nth-child(4) label { color: #8a6508; }
.cm-limits__ok { align-self: center; padding: 10px 14px; background: var(--ok-soft); color: #1f5a3c; border-radius: var(--r); font-size: 13px; white-space: nowrap; }
@media (max-width: 760px) { .cm-limits { grid-template-columns: 1fr 1fr; } .cm-limits__ok { grid-column: 1 / -1; text-align: center; } }
.cm-big { font: 600 22px var(--font-c); }
.cm-round .cm-in { width: 7em; text-align: right; }
.cm-round tr.is-warn td { background: var(--due-soft); } .cm-round tr.is-alarm td { background: var(--over-soft); }

/* ---------- Βήμα 7γ: ERP ---------- */
.erp-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); overflow: hidden; }
.erp-flow > div { padding: 14px 18px; display: grid; gap: 3px; }
.erp-flow b { font: 600 16px var(--font-c); } .erp-flow span { font-size: 13px; color: var(--ink-2); } .erp-flow em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.erp-flow__mid { background: var(--hull); color: #fff; place-items: center; text-align: center; min-width: 110px; }
.erp-flow__mid span { color: #fff !important; font-weight: 600; } .erp-flow__mid svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .erp-flow { grid-template-columns: 1fr; } }
.erp-export { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 10px; align-items: end; }
.erp-export .field { margin: 0; }
@media (max-width: 760px) { .erp-export { grid-template-columns: 1fr 1fr; } }
.erp-token { display: inline-block; word-break: break-all; background: var(--drawing); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; font: 12.5px ui-monospace, Menlo, monospace; }
.erp-api td { vertical-align: top; } .erp-api td:first-child { white-space: nowrap; }
.budget-bar { display: inline-block; width: calc(100% - 42px); vertical-align: middle; margin: 0 6px 0 0; }
.budget-bar.is-due > i { background: var(--due); } .budget-bar.is-over > i { background: var(--over); }
.cm-alert__main > .tag { justify-self: start; }
.erp-api td:last-child { white-space: normal; word-break: break-word; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* ---------------- Βήμα 8α: Inspections / Checklists ---------------- */
.insp-type { display: inline-block; font: 600 11.5px/18px var(--font-c); padding: 0 7px; border-radius: 3px; background: var(--info-soft); color: var(--hull-2); letter-spacing: .02em; white-space: nowrap; }
.insp-type--psc, .insp-type--flag { background: #f3e3d9; color: #7a3b16; }
.insp-type--vetting { background: #e9e2f3; color: #4b2f7a; }
.insp-type--class { background: #dde9ef; color: #1f4f66; }
.insp-type--superintendent, .insp-type--ism_audit { background: var(--brass-soft); color: #6b5226; }
.insp-prog { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--line-2); vertical-align: middle; overflow: hidden; }
.insp-prog i { display: block; height: 100%; background: var(--hull-3); }
.insp-prev { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; text-decoration: none; color: var(--ink-2); }
.table tr.is-muted td { color: var(--ink-3); }

.insp-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.insp-tpl { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--sheet); }
.insp-tpl:hover { border-color: var(--hull-3); }
.insp-tpl:has(input:checked) { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); background: #fdfbf6; }
.insp-tpl input { margin-top: 3px; accent-color: var(--hull); }
.insp-tpl b { display: block; font-weight: 600; }
.insp-tpl small { color: var(--ink-3); font-size: 12.5px; }

/* Checklist */
.ck-sec { margin-bottom: 14px; }
.ck-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid var(--line-2); align-items: center; }
.ck-item:first-child { border-top: 0; }
.ck-item.is-def { background: #fdf5f4; box-shadow: inset 3px 0 0 var(--over); }
.ck-q { display: flex; gap: 10px; align-items: flex-start; }
.ck-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--ink-3); font: 600 12px/24px var(--font-c); text-align: center; }
.ck-item.is-answered .ck-n { background: var(--hull); color: #fff; }
.ck-item.is-def .ck-n { background: var(--over); }
.ck-ref { font: 600 12px var(--font-c); color: var(--hull-3); background: var(--info-soft); padding: 0 5px; border-radius: 3px; }
.ck-flink { display: inline-block; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--over); }
.ck-a { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.ck-val { width: 96px; text-align: right; }
.ck-valro { font: 600 15px var(--font-c); margin-right: 6px; }
.ck-c { grid-column: 1 / -1; margin-left: 34px; width: calc(100% - 34px); font-size: 14px; }
.ck-cro { grid-column: 1 / -1; margin-left: 34px; color: var(--ink-2); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--sheet); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: block; padding: 6px 12px; font: 500 13.5px/20px var(--font-c); color: var(--ink-2); border-right: 1px solid var(--line-2); white-space: nowrap; min-width: 44px; text-align: center; }
.seg__opt:last-child span { border-right: 0; }
.seg__opt input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: -2px; }
.seg__opt input:hover + span { background: #f6f7f4; }
.seg__opt--sat input:checked + span { background: var(--ok); color: #fff; }
.seg__opt--def input:checked + span { background: var(--over); color: #fff; }
.seg__opt--na input:checked + span { background: var(--ink-3); color: #fff; }
.ck-complete { margin-top: 4px; }
.ck-complete .form-grid { padding: 14px 18px; }
.ck-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px -2px 0; padding: 10px 14px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 -4px 14px rgba(19,40,58,.08); backdrop-filter: blur(4px); }
.insp-done { margin-bottom: 18px; }
.insp-done .form-grid { padding: 14px 18px; align-items: end; }

/* Ευρήματα */
.finding { margin-bottom: 12px; border-left: 3px solid var(--due); }
.finding--action_taken { border-left-color: var(--hull-3); }
.finding--closed { border-left-color: var(--ok); }
.finding.is-focus { box-shadow: 0 0 0 2px var(--brass); }
.finding__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px 0; }
.finding__no { font: 600 17px var(--font-c); }
.finding__due { margin-left: auto; color: var(--ink-2); }
.finding__body { padding: 8px 18px 4px; }
.finding__desc { margin: 0 0 6px; }
.finding__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); }
.finding__ca { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 4px; padding: 10px 12px; background: var(--drawing); border-radius: var(--r-sm); font-size: 14px; }
.finding__ca dt { color: var(--ink-3); font-size: 13px; }
.finding__ca dd { margin: 0; }
.finding__closed { color: var(--ok); margin: 6px 0 0; }
.finding__acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding: 8px 18px 14px; }
.finding__acts form { margin: 0; }
.finding__acts details[open] { flex-basis: 100%; order: 10; }
.finding__acts details > summary { list-style: none; cursor: pointer; }
.finding__acts details > summary::-webkit-details-marker { display: none; }
.finding__acts details[open] > summary { background: var(--hull); color: #fff; }
.finding__form { padding: 12px; margin-top: 4px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--drawing); }
.tpl-items td { vertical-align: top; }
.tpl-items textarea.input--cell { min-height: 34px; resize: vertical; }

@media (max-width: 860px) {
  .ck-item { grid-template-columns: 1fr; padding: 12px 14px; }
  .ck-a { justify-content: flex-start; margin-left: 34px; flex-wrap: wrap; }
  .seg__opt span { padding: 8px 12px; }
  .finding__due { margin-left: 0; flex-basis: 100%; }
  .finding__ca { grid-template-columns: 1fr; }
  .ck-bar { margin: 14px 0 0; }
}

/* ---------------- Βήμα 8α: Critical equipment ---------------- */
.crit-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 14px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.crit-ladder__step { position: relative; padding: 12px 18px 12px 28px; background: var(--sheet); border-right: 1px solid var(--line-2); }
.crit-ladder__step:last-child { border-right: 0; }
.crit-ladder__step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.crit-ladder__step--1::before { background: var(--due); }
.crit-ladder__step--2::before { background: #c46a1d; }
.crit-ladder__step--3::before { background: var(--over); }
.crit-ladder__step b { display: block; font: 600 24px/1.1 var(--font-c); }
.crit-ladder__step span { font-size: 13px; color: var(--ink-2); }
.crit-ladder__step em { display: inline-block; margin-left: 6px; font: 600 11px var(--font-c); font-style: normal; color: var(--hull); background: var(--brass-soft); padding: 0 6px; border-radius: 3px; }
.crit-ladder__step.is-me { background: #fdfbf6; }
.esc { display: flex; gap: 16px; align-items: flex-start; padding: 14px 18px; margin-bottom: 10px; border-left: 4px solid var(--due); }
.esc--l2 { border-left-color: #c46a1d; }
.esc--l3 { border-left-color: var(--over); }
.esc.is-mine { box-shadow: 0 0 0 1px var(--brass) inset; }
.esc__main { flex: 1; min-width: 0; }
.esc__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.esc__title { font: 600 16px var(--font-c); color: var(--ink); text-decoration: none; }
.esc__title:hover { text-decoration: underline; }
.esc__ack { margin-top: 6px; padding: 6px 10px; background: var(--drawing); border-radius: var(--r-sm); }
.esc__act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.esc__act form { margin: 0; }
.two-col--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.opstat { padding: 14px 18px; }
.opstat--out { background: var(--over-soft); }
.opstat__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.opstat form { margin-top: 10px; }
@media (max-width: 860px) {
  .crit-ladder { grid-template-columns: 1fr; }
  .crit-ladder__step { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .esc { flex-direction: column; }
  .esc__act { flex-direction: row; align-items: center; }
  .two-col--even { grid-template-columns: 1fr; }
}
#new-finding .form-grid { padding: 14px 18px; }
.ck-item .ck-c { width: calc(100% - 34px); max-width: calc(100% - 34px); min-height: 32px; padding: 4px 10px; font-size: 13.5px; background: #fafbf9; }
.ck-item textarea.ck-c { min-height: 58px; }
.ck-item .ck-c:focus { background: #fff; }
.ck-item.is-def .ck-c { background: #fff; border-color: #e7b8b5; }
@media (max-width: 860px) { .ck-item .ck-c { margin-left: 0; width: 100%; max-width: 100%; } .ck-a { margin-left: 0; } }
fieldset.sheet > .insp-tpls { clear: both; padding: 18px; }

/* ---------------- Βήμα 8β: Analytics ---------------- */
.chart { overflow: visible; }
.chart__grid { stroke: var(--line-2); stroke-width: 1; }
.chart__tick { font: 500 11px var(--font-c); fill: var(--ink-3); }
.chart__bar { fill: var(--hull-3); }
.chart__hit { fill: transparent; }
.chart__hit:hover { fill: rgba(42,77,105,.06); }
.hbar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--line-2); min-width: 60px; margin-top: 4px; }
.hbar > i { display: block; height: 100%; border-radius: 4px; background: var(--hull-3); }
.hbar--bad > i { background: var(--over); }
.hbar--good > i { background: var(--ok); }
.hbar > b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.ring__bg { fill: none; stroke: var(--line-2); stroke-width: 5; }
.ring__fg { fill: none; stroke-width: 5; stroke-linecap: round; }
.ring--good .ring__fg { stroke: var(--ok); }
.ring--watch .ring__fg { stroke: var(--due); }
.ring--risk .ring__fg { stroke: var(--over); }
.ring text { font: 600 13px var(--font-c); fill: var(--ink); }
.reasons { list-style: none; margin: 0; padding: 0; }
.reasons li { position: relative; padding-left: 12px; line-height: 1.45; }
.reasons li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--due); }
.reasons li.reasons--over::before { background: var(--over); }
.reasons li.muted::before { display: none; }
.recs .rec { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-top: 1px solid var(--line-2); }
.recs .rec:first-child { border-top: 0; }
.rec__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--info-soft); color: var(--hull-2); }
.rec--p1 .rec__icon { background: var(--over-soft); color: var(--over); }
.rec--p2 .rec__icon { background: var(--due-soft); color: #8a6508; }
.rec--p3 .rec__icon { background: var(--ok-soft); color: var(--ok); }
.rec__main { flex: 1; min-width: 0; }
.rec__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec__act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
.rec__act form { margin: 0; }
.pareto, .model-bars { padding: 10px 18px 14px; }
.pareto li, .model-bars li { display: grid; grid-template-columns: minmax(110px, 40%) 1fr 28px 36px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13.5px; }
.model-bars { padding: 0; }
.model-bars li { grid-template-columns: minmax(90px, 30%) 1fr 40px; padding: 2px 0; }
.pareto .hbar, .model-bars .hbar { margin: 0; }
.pareto b, .model-bars b { text-align: right; font: 600 13px var(--font-c); }
.pareto em { font-style: normal; color: var(--ink-3); font-size: 12px; text-align: right; }
.fail-list summary { cursor: pointer; color: var(--hull-3); margin-top: 2px; }
.fail-list ul { margin: 4px 0 0; padding-left: 16px; }
.table.bench td { min-width: 120px; }
.table.bench th[scope=row] { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.table.forecast tr.is-short td { background: #fdf7f6; }
@media (max-width: 860px) {
  .recs .rec { flex-wrap: wrap; }
  .rec__act { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding-left: 48px; }
  .pareto li { grid-template-columns: 1fr 70px 24px 32px; }
}
.health-mini { display: flex; gap: 14px; align-items: center; padding: 14px 18px; }
.seg--plain .seg__opt input:checked + span { background: var(--hull); color: #fff; }
.table.bench { table-layout: fixed; min-width: 640px; } .table.bench thead th:first-child { width: 230px; } .table.bench thead th:last-child { width: 110px; }
@media (max-width: 860px) { .sheet__head { flex-wrap: wrap; row-gap: 4px; } .sheet__head > h2 { flex: 1 1 auto; } .sheet__head > span.small { flex-basis: 100%; } }

/* ---------------- Βήμα 8γ: Fleet dashboard (§17) ---------------- */
.kpi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 10px; }
.kpi-card h3 { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.kpi-card h3 .icon { width: 17px; height: 17px; color: var(--hull-3); }
.kpi-card__nums { display: flex; gap: 6px; }
.kpi-card__nums a { flex: 1; min-width: 0; text-decoration: none; color: inherit; padding: 4px 6px; margin: -4px -6px; border-radius: var(--r-sm); }
.kpi-card__nums a:hover { background: #f6f7f4; }
.kpi-card__nums b { display: block; font: 600 24px/1.1 var(--font-c); color: var(--ink); }
.kpi-card__nums span { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.tl { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-size: 14px; white-space: nowrap; }
.tl > i { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); flex: none; }
.tl--amber > i { background: var(--due); box-shadow: 0 0 0 3px var(--due-soft); }
.tl--red > i { background: var(--over); box-shadow: 0 0 0 3px var(--over-soft); }
.tl b { font: 600 15px var(--font-c); }
.tl small { font-size: 11.5px; color: var(--over); }
.tl--big { font-size: 13px; color: var(--ink-2); }
a.tl:hover b { text-decoration: underline; }
.fleet-matrix td.tl-col, .fleet-matrix th.tl-col { text-align: left; white-space: nowrap; }
.fleet-matrix th.tl-col a { color: inherit; text-decoration: none; }
.fleet-matrix th.tl-col a:hover { text-decoration: underline; }
.fleet-matrix tr.fm-group td { background: var(--drawing); font: 600 12.5px var(--font-c); color: var(--ink-2); padding-top: 6px; padding-bottom: 6px; }
.fleet-matrix .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.drill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.drill-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); border-left: 4px solid var(--ok); }
.drill-card--amber { border-left-color: var(--due); }
.drill-card--red { border-left-color: var(--over); }
.drill-card:hover { box-shadow: 0 2px 10px rgba(19,40,58,.08); }
.drill-card__main { flex: 1; min-width: 0; }
.drill-card__main b { font: 600 15px var(--font-c); }
.drill-card__main small { display: block; color: var(--ink-3); font-size: 12.5px; }
.drill-card__go { font-size: 22px; color: var(--ink-3); }
.drill-items li a { display: flex; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.drill-items li:first-child a { border-top: 0; }
.drill-items li a:hover { background: #fbfbf7; }
.drill-items__main { flex: 1; min-width: 0; }
.drill-items__main b { font-weight: 500; }
.drill-items__main small, .drill-items__side small { display: block; color: var(--ink-3); font-size: 12.5px; }
.drill-items__side { text-align: right; flex: none; }
@media (max-width: 860px) {
  .kpi-cards { grid-template-columns: 1fr 1fr; }
  .drill-items li a { flex-wrap: wrap; }
  .drill-items__side { text-align: left; padding-left: 24px; }
}
@media (max-width: 480px) { .kpi-cards { grid-template-columns: 1fr; } }
.tl--none > i { background: var(--none); box-shadow: 0 0 0 3px var(--line-2); }
.kpi-card__nums { gap: 12px; }
.kpi-card__nums a { flex: 1 1 0; }
.kpi-card__nums span { overflow-wrap: anywhere; hyphens: auto; }
.list-plain.drill-items > li { padding: 0; border: 0; }
.health-list li { display: flex; gap: 10px; align-items: flex-start; }
.health-list .tag { flex: none; min-width: 70px; text-align: center; }
.health-list__main small { display: block; color: var(--ink-3); }
.health-list__main { flex: 1; min-width: 0; }
.health-list form { flex: none; }
.log-tail { margin: 0; padding: 12px 18px; max-height: 420px; overflow: auto; font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; color: var(--ink-2); background: var(--drawing); }
@media (max-width: 860px) { .cm-alert__act { flex-wrap: wrap; justify-content: flex-start; } .cm-alert { flex-wrap: wrap; } }
@media (max-width: 860px) { .cm-alerts .cm-alert { flex-wrap: wrap; } .cm-alerts .cm-alert__act { flex: 1 1 100%; justify-content: flex-start; } }

/* ---- Βήμα 9α: OCR ---- */
.ocr-box { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 10px; padding: 14px 16px; margin: 0 0 18px; }
.ocr-box__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #f5efe0; color: #8a6a1f; display: grid; place-items: center; }
.ocr-box__icon svg { width: 22px; height: 22px; }
.ocr-box__text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ocr-box__text > span { color: var(--ink-2); font-size: 14px; }
.ocr-box__note { color: #8a4b12 !important; font-size: 13px !important; }
.ocr-box form { flex: none; }
@media (max-width: 640px) { .ocr-box { flex-wrap: wrap; } .ocr-box form, .ocr-box form .btn { width: 100%; } }
.choice-list { display: grid; gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
.choice:hover { border-color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--hull-3); background: #f4f7f9; box-shadow: inset 3px 0 0 var(--brass); }
.choice input { margin-top: 3px; accent-color: var(--hull); }
.choice span { display: grid; gap: 2px; }
.choice small { color: var(--ink-3); font-size: 13px; }

/* ---- Βήμα 9β: σύγκριση με κατασκευαστή ---- */
.review-strip { flex-wrap: wrap; }
.review-table td { vertical-align: top; }
.review-table tr.is-risk td { background: #fdf3f1; }
.review-table tr.is-risk td:first-child { box-shadow: inset 3px 0 0 var(--over, #b4372b); }
.choice.is-disabled { opacity: .6; cursor: default; }
.review-start > summary { cursor: pointer; list-style: none; }
.review-start > summary::-webkit-details-marker { display: none; }

/* ---- Βήμα 9γ: AI διάγνωση ---- */
.diag__body { display: grid; gap: 14px; }
.diag__summary { display: grid; gap: 6px; justify-items: start; }
.diag__summary p { margin: 0; }
.diag__h { font: 600 15px var(--font-c); margin: 6px 0 -4px; color: var(--ink); }
.diag__causes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: c; }
.diag__cause { border: 1px solid var(--line); border-left: 4px solid var(--ink-3); border-radius: 8px; padding: 10px 12px; background: #fff; counter-increment: c; }
.diag__cause--high { border-left-color: var(--over); }
.diag__cause--medium { border-left-color: var(--brass); }
.diag__cause-head { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.diag__cause-head b::before { content: counter(c) ". "; color: var(--ink-3); }
.diag__cause p { margin: 4px 0 6px; color: var(--ink-2); font-size: 14px; }
.diag__lk { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.diag__lk i { width: 42px; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.diag__lk i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 33%; background: var(--ink-3); }
.diag__cause--high .diag__lk i::after { width: 100%; background: var(--over); }
.diag__cause--medium .diag__lk i::after { width: 66%; background: var(--brass); }
.diag__refs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.diag__steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.diag__steps li span.small { display: block; color: var(--ink-2); }
.diag__spares li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.diag__stock { font-size: 13px; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.diag__safety { background: #fdf6e7; border: 1px solid #ecd9a8; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.diag__safety ul { margin: 4px 0 0; padding-left: 18px; }
.diag__escalate { display: flex; gap: 10px; background: var(--over-soft); color: #7a1f1f; border-radius: 8px; padding: 10px 12px; }
.diag__escalate svg { width: 20px; height: 20px; flex: none; }
.diag__escalate span { display: block; font-size: 14px; }
.diag__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; border-top: 1px dashed var(--line); padding-top: 10px; }
.diag__fb { display: inline-flex; gap: 6px; align-items: center; }
.cite--hist { background: #eef1f6; color: #33475b; }
.cite--cm { background: #eaf4ef; color: #2b6048; }
details.ai-panel > summary { cursor: pointer; list-style: none; }
details.ai-panel > summary::-webkit-details-marker { display: none; }
/* δύο αριθμητικά πεδία σε ένα κελί (min – max) */
.cell-pair { display: flex; align-items: center; gap: 4px; }
.cell-pair > span { color: var(--ink-3); flex: none; }
.cell-pair .input--cell.input--num { width: 74px; min-width: 0; flex: none; }
.input--cell.input--unit { width: 70px; min-width: 0; }

/* ---------- Βήμα 9δ: προβολή σελίδας με πινέζες, σημειώσεις πληρώματος ---------- */
.vmode { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-right: 6px; }
.vmode__opt { padding: 4px 10px; font: 500 13px/20px var(--font-c); color: var(--ink-2); text-decoration: none; border-right: 1px solid var(--line-2); }
.vmode__opt:last-child { border-right: 0; }
.vmode__opt:hover { background: #f6f7f4; color: var(--ink); }
.vmode__opt.is-on { background: var(--hull); color: #fff; }
.pv { background: #5b6872; border-top: 1px solid var(--line-2); padding: 18px; display: grid; justify-items: center; gap: 10px; }
.pv__frame { position: relative; width: min(100%, 860px); line-height: 0; box-shadow: 0 6px 24px rgba(0,0,0,.35); background: #fff; }
.pv__img { width: 100%; height: auto; display: block; min-height: 240px; }
.pv.is-placing .pv__frame { cursor: crosshair; outline: 3px solid var(--brass); outline-offset: 2px; }
.pv__pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--brass); border: 2px solid #fff;
  color: #fff; font: 600 12px/22px var(--font-c); text-align: center; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 2; }
.pv__pin:hover, .pv__pin.is-hl { background: var(--hull); transform: translate(-50%, -50%) scale(1.15); }
.pv__pin--new { background: var(--ok); }
.pv__pin--static { position: static; transform: none; width: 22px; height: 22px; font-size: 11px; line-height: 18px; flex: none; box-shadow: none; }
.pv__pin--static:hover { transform: none; }
.pv__hint { color: #fff; display: flex; gap: 8px; align-items: center; margin: 0; line-height: 1.4; }
.pv__hint .btn { color: #fff; border-color: rgba(255,255,255,.4); }
.notes .sheet__head h2 { display: flex; gap: 8px; align-items: center; }
.notes__pages { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line-2); background: #fafbf9; }
.notes__pages .chip { padding: 2px 10px; text-decoration: none; }
.notes__pages .chip b { color: #7a5c2a; margin-left: 2px; }
.chip.is-on { border-color: var(--brass); background: var(--brass-soft); }
.notes__list { display: grid; gap: 10px; padding: 14px 18px; }
.note { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--sheet); display: grid; gap: 6px; scroll-margin-top: 80px; }
.note:target { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass-soft); }
.note__head { display: flex; gap: 4px 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.note__head .muted { font-size: 12.5px; }
.note__del { margin-left: auto; }
.note__body { white-space: pre-line; font-size: 14px; overflow-wrap: anywhere; }
.note__file { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 6px 8px; background: #f6f7f4; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; min-width: 0; }
.note__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note__file:hover { background: #eef0ec; color: var(--ink); }
.note__file img { width: 64px; height: 48px; object-fit: cover; border-radius: 3px; flex: none; }
.note__file .icon { width: 16px; height: 16px; flex: none; }
.notes__form { border-top: 1px solid var(--line-2); padding: 14px 18px 16px; display: grid; gap: 10px; }
.notes__extra { gap: 10px 14px; }
.notes__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.notes__actions [data-note-pos].is-set { color: var(--ok); font-weight: 500; }
.cite--team { background: var(--brass-soft); color: #7a5c2a; }

/* ---------- Βήμα 9δ: ροπές & ανοχές, λιπαντικά ---------- */
.tech__intro { margin: 0; padding: 10px 18px 0; }
.tech__table + .tech__table { border-top: 1px solid var(--line-2); }
.tech__add { border-top: 1px solid var(--line-2); }
.tech__add > summary { padding: 10px 18px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.tech__add > summary .icon { width: 15px; height: 15px; }
.tech__add[open] > summary { color: var(--ink); }
.tech__form { padding: 4px 18px 16px; }
.lube-eq th { background: #fafbf9; font: 600 14px var(--font-c); padding: 8px 12px; border-top: 1px solid var(--line); }
.lube-eq th a { color: var(--ink); text-decoration: none; }
.lube-eq th a:hover { text-decoration: underline; }
.lube-print table th { width: auto; }
.lube-print .lube-print__eq { background: #ddd; font-size: 10pt; }
@media (max-width: 640px) {
  .pv { padding: 8px; }
  .notes__list, .notes__form { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Βήμα 10α: συνδρομές ---------- */
.bill-banner { display: flex; gap: 10px; align-items: center; padding: 9px 28px; font-size: 14px; border-bottom: 1px solid var(--line); }
.bill-banner .icon { width: 18px; height: 18px; flex: none; }
.bill-banner a { font-weight: 600; white-space: nowrap; }
.bill-banner--info { background: var(--info-soft); color: var(--hull-2); }
.bill-banner--due { background: var(--due-soft); color: #6d5106; }
.bill-banner--over { background: var(--over-soft); color: #8e2222; }
@media (max-width: 640px) { .bill-banner { padding: 9px 16px; } }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.plan-card { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--sheet); display: grid; gap: 8px; align-content: start; }
.plan-card--on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.plan-card h3 { margin: 0; font-size: 17px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.plan-card__price { font: 600 22px/1.1 var(--font-c); }
.plan-card__price small { font: 400 13px var(--font); color: var(--ink-3); }
.plan-card ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.usage { display: grid; gap: 4px; }
.usage__bar { height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.usage__bar i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.usage__bar--due i { background: var(--due); }
.usage__bar--over i { background: var(--over); }
.usage__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.pay-info { white-space: pre-line; background: #f6f7f4; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; }
.inv-act { display: inline-block; position: relative; }
.inv-act > summary { list-style: none; cursor: pointer; }
.inv-act > summary::-webkit-details-marker { display: none; }
.inv-act__form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 260px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 12px; display: grid; gap: 8px; text-align: left; }
.inv-act__form .field label { font-size: 12px; }

/* ---- Βήμα 10β: δημόσιες σελίδες, νομικά κείμενα, demo, απόρρητο ---- */
.pub { background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
.pub__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 40px); background: var(--hull); color: #fff; }
.pub__brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 17px; }
.pub__brand span { color: var(--brass); font-weight: 400; }
.pub__nav { display: flex; align-items: center; gap: 14px; }
.pub__nav > a:not(.btn) { color: #d5e0e8; text-decoration: none; font-size: 14px; }
.pub__nav > a:not(.btn):hover { color: #fff; }
.pub__main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 48px; }
.pub__foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 18px 16px 26px; color: var(--ink-3); font-size: 13px; border-top: 1px solid var(--line-2); }
.pub__foot a { color: var(--ink-2); }
.legal { max-width: 760px; margin: 0 auto; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: clamp(20px, 4vw, 44px); line-height: 1.65; font-size: 15.5px; }
.legal h1 { font-size: 28px; line-height: 1.2; margin: 0 0 6px; }
.legal h1 + p { color: var(--ink-3); font-size: 14px; margin-top: 0; }
.legal h2 { font-size: 18px; margin: 30px 0 8px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.legal h3 { font-size: 16px; margin: 20px 0 6px; }
.legal p, .legal ul, .legal ol { margin: 0 0 12px; }
.legal li { margin: 3px 0; }
.legal .table-wrap { margin: 6px 0 14px; }
.legal__hist { margin-top: 28px !important; }
.legal-accept { display: grid; gap: 10px; margin-top: 16px; }
.auth__legal { text-align: center; margin-top: 6px; }
.auth__legal a { color: var(--ink-3); }
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.demo__kicker { color: var(--brass); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; margin: 6px 0 8px; }
.demo__intro h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; margin: 0 0 14px; }
.demo__intro > p { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.demo__points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.demo__points li { padding-left: 26px; position: relative; }
.demo__points li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.demo__card { margin: 0; }
.demo__hp { display: none; }
.demo__error { color: var(--over); font-size: 14px; margin: 12px 0 0; }
.demo__done h2 { margin: 0 0 8px; }
.legal-list { list-style: none; margin: 0; padding: 0; }
.legal-list > li { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 12px 18px; border-top: 1px solid var(--line-2); }
.legal-list > li:first-child { border-top: 0; }
.legal-list__state { text-align: right; flex-shrink: 0; }
.legal-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; min-height: 520px; }
.legal-help p { margin: 0 0 4px; }
.legal-help code { font-size: 12.5px; }
.code-snippet { margin: 0; background: #0f1f2c; color: #d5e0e8; padding: 14px 16px; border-radius: 6px; font-size: 12.5px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.steps-plain { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.danger-zone { border-color: #e7c3bf; }
.danger-zone > summary h2 { color: var(--over); }
@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; }
  .pub__nav > a:not(.btn) { display: none; }
  .legal-list > li { flex-direction: column; }
  .legal-list__state { text-align: left; }
}

/* ---- Βήμα 10γ: γλώσσα ---- */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 600; letter-spacing: .03em; flex-shrink: 0; }
.lang-switch a { padding: 3px 9px; color: var(--ink-3); text-decoration: none; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-on { background: var(--hull); color: #fff; }
.topbar .lang-switch { margin-right: 14px; }
.auth__lang { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.pub__bar .lang-switch { border-color: rgba(255, 255, 255, .25); }
.pub__bar .lang-switch a { color: #d5e0e8; }
.pub__bar .lang-switch a.is-on { background: var(--brass); color: #13283a; }
@media (max-width: 640px) { .topbar .lang-switch { margin-right: 6px; } }