/* ViglAI Hub dashboard. Brand rules (viglai-brand): red only where a person must act, slate actions,
   Commissioner for every word, Archivo (no Greek) only for figures, 3px mitered corners, no shadows. */

/* ---- fonts, self-hosted ------------------------------------------------------------------------ */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/f/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/f/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Commissioner"; font-weight: 100 900; font-display: swap; src: url(/f/commissioner-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Commissioner"; font-weight: 100 900; font-display: swap; src: url(/f/commissioner-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Commissioner"; font-weight: 100 900; font-display: swap; src: url(/f/commissioner-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- tokens ------------------------------------------------------------------------------------- */
:root {
  --vg-night: #10222C; --vg-slate: #1B2A32; --vg-stone: #6B7C86; --vg-mist: #93A5AE; --vg-fire: #C8202F; --vg-ember: #F0453F;
  --page: #E9EDEF; --surface: #F7F9FA; --sunken: #DDE3E6; --rule: #C9D2D7;
  --ink: var(--vg-slate); --muted: var(--vg-stone); --faint: var(--vg-mist);
  --action: var(--vg-slate); --action-ink: #F7F9FA;
  --fire: var(--vg-fire); --fire-bg: #F6DADC;
  --ok: #2E6F5E; --ok-bg: #DCEAE5; --smoke: #9A6412; --smoke-bg: #F2E6CF; --sea: #33607A; --sea-bg: #D8E4EC;
  --focus: #33607A;
  --series-1: #1B2A32; --series-2: #33607A; --series-3: #6B7C86; --series-4: #93A5AE; --series-5: #C3CDD2;
  --c-ty: #1B2A32; --c-otb: #4F86A8; --c-ly: #AEBCC4; --c-mark: #1B2A32;
  --font-text: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --font-figure: "Archivo", "Commissioner", system-ui, sans-serif;
  --radius: 3px; --chamfer: 6px; --rail: 252px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0B1A22; --surface: #10222C; --sunken: #1B2A32; --rule: #2C3D46;
    --ink: #E4EAED; --muted: #93A5AE; --faint: #5C6E78; --action: #E4EAED; --action-ink: #10222C;
    --fire: var(--vg-ember); --fire-bg: #3A1618;
    --ok: #6FBFA6; --ok-bg: #12302A; --smoke: #E0A94A; --smoke-bg: #33270F; --sea: #8DB5CD; --sea-bg: #16303F; --focus: #8DB5CD;
    --series-1: #E4EAED; --series-2: #8DB5CD; --series-3: #93A5AE; --series-4: #5C6E78; --series-5: #3A4B54;
    --c-ty: #E4EAED; --c-otb: #6FA3C4; --c-ly: #7A8C96; --c-mark: #F7F9FA;
    color-scheme: dark;
  }
}

/* ---- base --------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 14px/1.5 var(--font-text); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
h1 { font-size: 22px; line-height: 1.25; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 650; margin: 0; }
h3 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--muted); }
p { margin: 0 0 8px; }
a { color: inherit; }
.muted { color: var(--muted); }
.error { color: var(--fire); }
.okmsg { color: var(--ok); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.figure { font-family: var(--font-figure); font-stretch: 78%; font-variant-numeric: tabular-nums lining-nums; font-weight: 600; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.when { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- controls ----------------------------------------------------------------------------------- */
button { font: inherit; font-weight: 550; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; line-height: 1.3; }
button:hover { border-color: var(--muted); }
button.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
button.primary:hover { filter: brightness(1.15); }
button.danger { color: var(--fire); border-color: var(--fire); background: transparent; }
button.link { border: 0; background: none; padding: 4px 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
button:disabled { opacity: .5; cursor: default; }
button.busy { cursor: progress; opacity: .7; }
input, select, textarea { font: inherit; width: 100%; padding: 7px 9px; margin-top: 4px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: inset 0 0 0 1px var(--focus); }
input[type=checkbox] { width: auto; margin: 0 8px 0 0; accent-color: var(--vg-slate); }
label { display: block; margin: 0 0 12px; color: var(--muted); font-size: 13px; }
label.check { display: inline-flex; align-items: center; margin: 4px 18px 8px 0; color: var(--ink); font-size: 14px; }
.hint { display: block; font-size: 12px; margin-top: 4px; color: var(--muted); }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
.checks { display: flex; flex-wrap: wrap; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .inline input { margin: 0; max-width: 320px; }

/* the brand motif: chamfered status chip */
.chip { display: inline-block; padding: 1px 10px; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% 50%, calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 50%);
  background: var(--sunken); color: var(--muted); }
.chip:empty { display: none; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.late { background: var(--smoke-bg); color: var(--smoke); }
.chip.run { background: var(--sea-bg); color: var(--sea); }
.chip.fail { background: var(--fire); color: #fff; }

/* ---- login -------------------------------------------------------------------------------------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(360px, 100%); }
.login-mark { width: 52px; height: 60px; color: var(--ink); display: block; margin-bottom: 18px; }
.login-mark .fire { fill: var(--vg-ember); }
.login-card h1 { font-size: 26px; }
.login-card > p { margin-bottom: 22px; font-style: italic; }
.login-card button { width: 100%; margin-top: 4px; padding: 10px; }

/* ---- shell: the lookout rail + the view ---------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--vg-night) var(--rail), transparent var(--rail)); }
.rail { align-self: start; }
.rail { background: var(--vg-night); color: #C9D4DA; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid #1f3440; }
.brand { display: block; padding: 20px 20px 14px; }
.brand svg { width: 168px; height: auto; display: block; }
.brand .wm { font: 800 48px var(--font-figure); letter-spacing: -1px; fill: #fff; }
.brand .wm-sub { font: 700 14px var(--font-figure); letter-spacing: 6px; fill: #93A5AE; }
.hotelbox { padding: 4px 20px 16px; border-bottom: 1px solid #1f3440; }
.hotelname { color: #fff; font-weight: 650; font-size: 15px; line-height: 1.3; }
.hotelpick[hidden] { display: none; }
.hotelpick { padding: 10px 20px 14px; border-bottom: 1px solid #1f3440; display: grid; gap: 4px; }
.hotelpick .sub { color: var(--mist, #93A5AE); font-size: 12px; }
.hotelpick select { width: 100%; background: #10222C; color: #fff; border: 1px solid #2c4452; border-radius: 3px; padding: 6px 8px; font: inherit; }
/* a hotel whose service does not answer (through the Hub): what happened, the other hotels, and it tries again by itself */
.panel.down h2 { display: flex; align-items: center; gap: 10px; }
.panel.down .dot, .hotelchoices .dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--faint); }
.panel.down .dot.fail, .hotelchoices .dot.fail { background: var(--fire); }
.hotelchoices .dot.ok { background: var(--ok); }
.hubnote[hidden] { display: none; }
.hubnote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 28px; background: var(--smoke-bg); border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.hubnote > span { flex: 1 1 260px; }
.hubnote .buttons { margin: 0; }
.hubnote .dot { display: inline-block; width: 8px; height: 8px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--fire); }
@media (max-width: 760px) { .hubnote { padding: 10px 16px; } }
.hotelchoices { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.hotelchoices button { display: inline-flex; align-items: center; gap: 8px; }
.hotelchoices button.primary .dot.ok { background: #6FBFA6; }
.hotelmeta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #93A5AE; margin-top: 4px; }
.rail .chip { background: #1B2A32; color: #93A5AE; }
.rail .chip.late { background: #33270F; color: #E0A94A; }
.nav { padding: 12px 10px; flex: 1; }
.nav .group { font-size: 12px; color: #6B7C86; padding: 14px 10px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius); text-decoration: none; color: #C9D4DA; font-size: 14px; }
.nav a:hover { background: #172d39; color: #fff; }
.nav a[aria-current="page"] { background: #1B2A32; color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #E4EAED; }
.nav a .dot { width: 7px; height: 7px; flex: 0 0 7px; margin-left: auto; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: transparent; }
.nav a .dot.fail { background: var(--vg-ember); }
.nav a .dot.late { background: #E0A94A; }
.railfoot { padding: 14px 20px 18px; font-size: 12px; font-style: italic; color: #5C6E78; }
.scrim { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 32px; border-bottom: 1px solid var(--rule); background: var(--page); position: sticky; top: 0; z-index: 15; }
.topbar .menu { display: none; }
.tb-hotel { display: none; }
.tb-right { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.tb-link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 0; background: none; color: var(--ink); text-decoration: none; font-weight: 550; border-radius: var(--radius); }
.tb-link:hover { background: var(--sunken); }
.tb-link[aria-current="page"] { background: var(--sunken); }
.tb-link svg, .topbar .icon svg { width: 18px; height: 18px; display: block; }
.usermenu { position: relative; }
.dropdown { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); min-width: 190px; padding: 4px; z-index: 30; }
.dropdown button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; font-weight: 500; }
.dropdown button:hover { background: var(--sunken); }

.view { padding: 26px 32px 48px; max-width: 1360px; width: 100%; outline: none; }
.panel { border-color: transparent; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.pagehead .meta { color: var(--muted); font-size: 13px; text-align: right; }
.pagehead .headtools { display: flex; align-items: center; justify-content: flex-end; gap: 8px 16px; flex-wrap: wrap; }
.pagehead .sub { color: var(--muted); margin-top: 4px; max-width: 70ch; }

/* sections sit on the page; only interactive or grouped content gets a surface */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.panel > h2 { margin-bottom: 12px; }
.panel .lead { color: var(--muted); margin: -6px 0 14px; max-width: 75ch; }
.sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 28px 0 10px; }
.sechead:first-child { margin-top: 0; }

/* ---- instrument band: one strip with dividers, not floating cards --------------------------------- */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 18px; }
.band > div { padding: 14px 18px; border-left: 1px solid var(--rule); min-width: 0; }
.band > div:first-child { border-left: 0; }
.band .k { font-size: 12.5px; color: var(--muted); }
.band .v { font-size: 30px; line-height: 1.15; margin: 2px 0; }
.band .v.text { font-family: var(--font-text); font-size: 20px; font-weight: 600; font-stretch: normal; }
.band .s { font-size: 12.5px; color: var(--muted); }
.band .v.fire { color: var(--fire); } .band .v.late { color: var(--smoke); }

/* ---- home: the lookout ---------------------------------------------------------------------------- */
.horizon { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: end; margin-bottom: 22px; }
.horizon .day { font-size: 54px; line-height: 1; }
.horizon .dayname { font-size: 15px; color: var(--muted); }
.horizon .calm { align-self: end; color: var(--muted); padding-bottom: 6px; }
.attention { background: var(--fire-bg); border-left: 3px solid var(--fire); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 22px; }
.attention h2 { color: var(--fire); margin-bottom: 6px; }
.attention ul { margin: 0; padding: 0 0 0 18px; }
.attention li { margin: 3px 0; }
.attention a { font-weight: 600; }
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.post { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); display: flex; flex-direction: column; }
.post-head { padding: 18px 20px 0; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.post-head p { color: var(--muted); margin: 2px 0 0; font-size: 13px; }
.post-body { padding: 16px 20px; flex: 1; }
.post-foot { padding: 12px 20px 16px; border-top: 1px solid var(--rule); }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.figs .k { font-size: 12.5px; color: var(--muted); }
.figs .v { font-size: 28px; line-height: 1.15; }
.figs .s { font-size: 12.5px; color: var(--muted); }
.figs .unknown { font-family: var(--font-text); font-size: 14px; color: var(--muted); font-weight: 400; }
.empty { color: var(--muted); padding: 8px 0; }
.empty strong { color: var(--ink); display: block; font-size: 15px; margin-bottom: 4px; }

/* ---- the horizon strip: report slots as ticks along the day ----------------------------------------- */
.strip { display: flex; gap: 3px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
.tick { flex: 1 0 44px; max-width: 72px; text-align: center; border-bottom: 3px solid var(--rule); padding: 4px 2px 5px; font-size: 12px; position: relative; cursor: default; }
.tick .t { font-family: var(--font-figure); font-stretch: 78%; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.tick .d { color: var(--muted); font-size: 11px; }
.tick.OK { border-bottom-color: var(--ok); }
.tick.LATE { border-bottom-color: var(--smoke); }
.tick.RUNNING { border-bottom-color: var(--sea); }
.tick.FAILED, .tick.MISSED { background: var(--fire); color: #fff; border-bottom-color: var(--fire); }
.tick.FAILED .d, .tick.MISSED .d { color: #fff; }
.tick.PLANNED { color: var(--muted); border-bottom-style: dashed; }
.tick.next { box-shadow: inset 0 0 0 1px var(--ink); }
.tick.stale::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; background: var(--smoke); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.stripkey { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.stripkey i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 5px; background: var(--rule); }
.stripkey i.OK { background: var(--ok); } .stripkey i.LATE { background: var(--smoke); } .stripkey i.FAIL { background: var(--fire); height: 8px; }

/* ---- lists and tables ------------------------------------------------------------------------------- */
.kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 7px 18px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv dd.none { color: var(--faint); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--muted); background: var(--sunken); padding: 7px 10px; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--sunken) 45%, transparent); }
.tbl .note { font-size: 12px; color: var(--muted); max-width: 440px; white-space: pre-wrap; }
.tbl .note.fire { color: var(--fire); }
.dl { display: inline-block; margin-right: 4px; padding: 1px 8px; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; font-size: 12px; font-weight: 600; }
.dl:hover { border-color: var(--ink); }
.chan { display: inline-block; margin: 0 8px 2px 0; font-size: 12px; white-space: nowrap; }
.chan.bad { color: var(--fire); font-weight: 600; }
.log { max-height: 440px; overflow: auto; background: var(--sunken); padding: 12px; border-radius: var(--radius); font: 12px/1.45 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; margin: 0; }
.foot { color: var(--muted); font-size: 12px; margin-top: 28px; }

/* ---- actions bar ----------------------------------------------------------------------------------- */
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.actions .sep { width: 1px; align-self: stretch; background: var(--rule); margin: 0 4px; }

/* ---- HitIA analysis -------------------------------------------------------------------------------- */
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.presets button { font-weight: 500; padding: 5px 12px; }
.presets button[aria-pressed="true"] { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.pvctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }
.measures { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 2px 0 12px; }
.measures label.check { margin: 3px 14px 3px 0; font-size: 13.5px; }
.pv { font-size: 13px; }
.pv th, .pv td { padding: 6px 10px; }
.pv thead th { position: sticky; top: 0; z-index: 1; }
.pv .rh { text-align: left; font-weight: 500; white-space: nowrap; }
.pv td.rh2 { color: var(--muted); }
.pv .tot { font-weight: 700; }
.pv tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
.pv td.bar { background-image: linear-gradient(to left, var(--sunken) var(--w, 0%), transparent var(--w, 0%)); }
.pv th.grp { text-align: center; border-left: 1px solid var(--rule); }
.pv .cstart { border-left: 1px solid var(--rule); }
.pvmeta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; margin: 10px 0 8px; }

/* ---- tabs (settings, HitIA) --------------------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin: -6px 0 22px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 9px 14px; text-decoration: none; color: var(--muted); font-weight: 550; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.period { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.period label { margin: 0; display: flex; flex-direction: column; }
.period select { width: auto; min-width: 96px; }
.period .vs { color: var(--muted); font-size: 13px; padding-bottom: 8px; }
.notice { background: var(--smoke-bg); border-left: 3px solid var(--smoke); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px; }
.notice .buttons { margin-top: 8px; }

.delta { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.delta.up { color: var(--ok); } .delta.down { color: var(--smoke); }
.band .ly { font-size: 12.5px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cards .panel { margin-bottom: 0; }
.panel .cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.panel .cardhead h2 { margin: 0; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }
.legend i.ty { background: var(--c-ty); } .legend i.otb { background: var(--c-otb); } .legend i.ly { background: var(--c-ly); }
.legend span { user-select: none; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart text { font: 11px var(--font-text); fill: var(--muted); }
svg.chart text.fig { font-family: var(--font-figure); font-stretch: 78%; }
svg.chart .grid { stroke: var(--rule); stroke-width: 1; }
svg.chart .ty { fill: var(--c-ty); } svg.chart .otb { fill: var(--c-otb); } svg.chart .ly { fill: var(--c-ly); }
svg.chart rect:hover { opacity: .8; }
.hb { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto auto; gap: 6px 10px; align-items: center; font-size: 13px; }
.hb .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb .track { position: relative; height: 16px; }
.hb .bar { position: absolute; left: 0; top: 0; height: 10px; background: var(--c-ty); }
.hb .lybar { position: absolute; left: 0; top: 11px; height: 5px; background: var(--c-ly); }
.hb .val { font-variant-numeric: tabular-nums; text-align: right; }
.hb .delta { min-width: 46px; text-align: right; }
.more { font-size: 12px; color: var(--muted); margin-top: 8px; }
.yoy th.grp { text-align: center; border-left: 1px solid var(--rule); }
.yoy td.c0, .yoy th.c0 { border-left: 1px solid var(--rule); }
.yoy td.lyv { color: var(--muted); }

/* ---- toast ----------------------------------------------------------------------------------------- */
.toast { position: fixed; right: 20px; bottom: 20px; max-width: min(560px, calc(100vw - 32px)); background: var(--vg-slate); color: #fff; padding: 11px 16px;
  border-radius: var(--radius); z-index: 50; font-size: 13.5px; border-left: 3px solid var(--ok); }
.toast.error { border-left-color: var(--vg-ember); }
.toast.info { border-left-color: #8DB5CD; }

dialog { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 0; width: min(380px, 92vw); }
dialog::backdrop { background: rgba(16, 34, 44, .55); }
.dlg { padding: 20px; } .dlg h2 { margin-bottom: 14px; }

.recip td { vertical-align: middle; } .recip td.addr { min-width: 230px; } .recip td.addr input { margin: 0; } .recip .c { text-align: center; }
.secret { background: var(--sunken); padding: 12px 14px; border-radius: var(--radius); margin-top: 12px; }

/* ---- narrow screens: the rail becomes a drawer ------------------------------------------------------ */
@media (max-width: 1100px) {
  .posts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .topbar { background: var(--vg-night); color: #fff; padding: 8px 10px; border-bottom: 0; }
  .topbar .menu { display: block; background: none; border: 0; color: #fff; padding: 6px; }
  .tb-hotel { display: flex; gap: 8px; align-items: center; min-width: 0; font-weight: 650; white-space: nowrap; overflow: hidden; }
  .tb-hotel .chip { background: #1B2A32; color: #93A5AE; } .tb-hotel .chip.late { background: #33270F; color: #E0A94A; }
  .tb-link { color: #fff; padding: 6px; } .tb-link:hover, .tb-link[aria-current="page"] { background: #1B2A32; }
  .tb-link span { display: none; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .hb { grid-template-columns: minmax(80px, 38%) 1fr auto; } .hb .delta { display: none; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); z-index: 40; transform: translateX(-100%); transition: transform .18s ease-out; }
  .rail.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(16, 34, 44, .55); z-index: 30; }
  .view { padding: 18px 16px 40px; }
  .horizon { grid-template-columns: 1fr; }
  .horizon .day { font-size: 44px; }
  .band .v { font-size: 26px; }
  .band > div { border-left: 0; border-top: 1px solid var(--rule); }
  .band > div:first-child { border-top: 0; }
  .band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band > div:nth-child(2) { border-top: 0; }
  .band > div:nth-child(even) { border-left: 1px solid var(--rule); }
  .panel { padding: 14px 14px; }
  .hide-sm { display: none; }
  .pagehead .meta { text-align: left; }
}
@media (max-width: 420px) {
  .figs .v { font-size: 24px; }
  .actions button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* ---- HitIA dashboard ------------------------------------------------------------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; }
.kpi { background: var(--surface); padding: 14px 16px 12px; min-width: 0; }
.kpi .k { font-size: 12.5px; color: var(--muted); }
.kpi .v { font-size: 28px; line-height: 1.15; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .ly { font-size: 12.5px; color: var(--muted); }
.kpi .s { font-size: 11.5px; color: var(--muted); }
svg.spark { width: 100%; height: 34px; display: block; margin-top: 6px; }
svg.spark path { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
svg.spark .ty { stroke: var(--c-ty); } svg.spark .ly { stroke: var(--c-ly); stroke-dasharray: 3 3; }

.insights { background: var(--surface); border-left: 3px solid var(--c-otb); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 18px; }
.insights h2 { margin-bottom: 6px; }
.insights ul { margin: 0; padding-left: 18px; columns: 2 380px; column-gap: 32px; }
.insights li { margin: 3px 0; break-inside: avoid; }
.filterbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--sea-bg); color: var(--ink); padding: 8px 14px; border-radius: var(--radius); margin-bottom: 14px; }

.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.dash > .panel { margin-bottom: 0; min-width: 0; }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }

svg.map { width: 100%; height: auto; display: block; background: var(--page); border-radius: var(--radius); }
svg.map .land { fill: var(--sunken); stroke: var(--surface); stroke-width: .6; }
svg.map .land.has { fill: color-mix(in srgb, var(--c-otb) 22%, var(--sunken)); cursor: pointer; }
svg.map .land.has:hover, svg.map .land.on { fill: color-mix(in srgb, var(--c-otb) 45%, var(--sunken)); }
svg.map .tyb { fill: var(--c-ty); fill-opacity: .78; stroke: var(--surface); stroke-width: 1; }
svg.map .lyring { fill: none; stroke: var(--c-otb); stroke-width: 1.6; stroke-dasharray: 3 2; }
svg.map .bub { cursor: pointer; }
svg.map .bub:hover .tyb, svg.map .bub.on .tyb { fill-opacity: 1; stroke: var(--c-otb); stroke-width: 2; }
.maplegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.maplegend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; }
.maplegend i.tyb { background: var(--c-ty); } .maplegend i.lyring { border: 1.6px dashed var(--c-otb); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 4px 10px; font-size: 12.5px; font-weight: 550; background: var(--surface); color: var(--muted); }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--action); color: var(--action-ink); }

.hb.click { display: block; }
.hbrow { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto 52px; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 5px 4px;
  font: inherit; font-size: 13px; text-align: left; color: var(--ink); border-radius: var(--radius); cursor: pointer; }
.hbrow:hover, .hbrow.on { background: var(--sunken); }
.hbrow .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbrow .val { font-variant-numeric: tabular-nums; text-align: right; }
.hbrow .delta { text-align: right; }

.donutwrap { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
svg.donut { width: 170px; height: 170px; display: block; }
svg.donut .sl { cursor: pointer; stroke: var(--surface); stroke-width: 1.5; }
svg.donut .sl:hover, svg.donut .sl.on { opacity: .8; }
svg.donut .ctr { font: 600 17px var(--font-figure); font-stretch: 78%; fill: var(--ink); }
svg.donut .ctrs { font: 11px var(--font-text); fill: var(--muted); }
.s1 { fill: var(--c-ty); background: var(--c-ty); } .s2 { fill: var(--c-otb); background: var(--c-otb); } .s3 { fill: var(--vg-stone); background: var(--vg-stone); }
.s4 { fill: var(--c-ly); background: var(--c-ly); } .s5 { fill: var(--series-5); background: var(--series-5); } .s6 { fill: var(--sunken); background: var(--sunken); }
.dl-list { display: grid; gap: 2px; }
.dl-row { display: grid; grid-template-columns: 12px 1fr auto 66px; gap: 10px; align-items: center; border: 0; background: none; padding: 5px 6px; font: inherit; font-size: 13px; text-align: left; color: var(--ink); cursor: pointer; }
.dl-row:hover:not(:disabled), .dl-row.on { background: var(--sunken); }
.dl-row:disabled { cursor: default; opacity: 1; }
.dl-row .sw { width: 12px; height: 12px; }
.dl-row .val { font-variant-numeric: tabular-nums; }
.dl-row .delta { text-align: right; }
tr.clickrow { cursor: pointer; } tr.clickrow.on td { background: var(--sunken); }

svg.chart .line { fill: none; stroke-width: 2; }
svg.chart .line.ty { stroke: var(--c-ty); } svg.chart .line.ly { stroke: var(--c-ly); stroke-dasharray: 4 3; }
svg.chart .dot.ty { fill: var(--c-ty); } svg.chart .dot.ly { fill: var(--c-ly); }
svg.chart text.val { fill: var(--ink); font-size: 10.5px; }
svg.chart .hit { fill: transparent; }
svg.chart .hit:hover { fill: color-mix(in srgb, var(--sunken) 50%, transparent); }
svg.chart rect.ty, svg.chart rect.otb, svg.chart rect.ly { pointer-events: none; }

.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--vg-slate); color: #F7F9FA; border-radius: var(--radius); padding: 8px 11px; font-size: 12.5px; min-width: 150px; max-width: 280px; }
.tip .head { font-weight: 650; margin-bottom: 4px; }
.tip .row { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.tip .row b { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; }
.tip .delta.up { color: #6FBFA6; } .tip .delta.down { color: #E0A94A; }

@media (max-width: 1250px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .span-4, .span-6, .span-8 { grid-column: span 12; } }
@media (max-width: 600px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 23px; }
  .donutwrap { grid-template-columns: 1fr; justify-items: center; }
  .dl-list { width: 100%; }
}
.offmap { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 12.5px; margin-top: 8px; padding: 6px 10px; background: var(--sunken); border-radius: var(--radius); }
.offmap button:not(.link) { padding: 3px 10px; font-size: 12.5px; margin-left: auto; }

/* ---- a running job: started → running → finished, answered where the person is ----------------------------------- */
.jobbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 32px; font-size: 13.5px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 57px; z-index: 14; background: var(--sea-bg); color: var(--ink); }
.jobbar b { font-weight: 650; }
.jobbar .link { margin-left: auto; }
.jobbar .pulse { width: 9px; height: 9px; flex: none; background: var(--sea); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.jobbar.run .pulse { animation: jobpulse 1.2s ease-in-out infinite; }
.jobbar.ok { background: var(--ok-bg); } .jobbar.ok .pulse { background: var(--ok); }
.jobbar.fail { background: var(--fire-bg); } .jobbar.fail .pulse { background: var(--fire); } .jobbar.fail span { color: var(--fire); }
@keyframes jobpulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .jobbar.run .pulse { animation: none; } }
@media (max-width: 960px) { .jobbar { padding: 8px 16px; } }

/* ---- HitIA · Αγορά: the demand calendar ---------------------------------------------------------------------------- */
.srcline { font-size: 12.5px; color: var(--muted); margin: -2px 0 12px; }
.srcline b { color: var(--ink); font-weight: 600; }
.cal { display: grid; grid-template-columns: 44px repeat(7, minmax(46px, 1fr)); gap: 3px; min-width: 420px; }
.cal-h { font-size: 11.5px; color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal-m { font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 6px; }
.cal-d { position: relative; height: 46px; border-radius: var(--radius); background: var(--sunken); padding: 3px 5px; color: var(--ink); overflow: hidden; }
.cal-d.blank { background: none; }
.cal-d.na { background: repeating-linear-gradient(135deg, var(--sunken) 0 4px, transparent 4px 8px); }
.cal-d .dn { font-size: 10.5px; color: inherit; opacity: .7; line-height: 1; }
.cal-d .dv { position: absolute; right: 6px; bottom: 4px; font-size: 19px; line-height: 1; }
.cal-d .ds { position: absolute; left: 5px; bottom: 4px; font-size: 11px; line-height: 1; opacity: .85; }
.cal-d.o0 { background: color-mix(in srgb, var(--c-ty) 6%, var(--surface)); }
.cal-d.o1 { background: color-mix(in srgb, var(--c-ty) 18%, var(--surface)); }
.cal-d.o2 { background: color-mix(in srgb, var(--c-ty) 34%, var(--surface)); }
.cal-d.o3 { background: color-mix(in srgb, var(--c-ty) 55%, var(--surface)); color: var(--surface); }
.cal-d.o4, .cal-d.o5 { background: var(--c-ty); color: var(--surface); }
.cal-d.p0 { background: var(--surface); border: 1px solid var(--rule); }
.cal-d.p1 { background: color-mix(in srgb, var(--sea) 18%, var(--surface)); }
.cal-d.p2 { background: color-mix(in srgb, var(--sea) 36%, var(--surface)); }
.cal-d.p3 { background: color-mix(in srgb, var(--sea) 60%, var(--surface)); color: var(--surface); }
.cal-d.p4 { background: var(--sea); color: var(--surface); }
.cal-d.pn { background: var(--smoke-bg); color: var(--smoke); }
.cal-d.up1 { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); }
.cal-d.up2 { background: color-mix(in srgb, var(--ok) 34%, var(--surface)); }
.cal-d.up3 { background: color-mix(in srgb, var(--ok) 58%, var(--surface)); color: var(--surface); }
.cal-d.over { box-shadow: inset 0 0 0 2px var(--fire); } .cal-d.over .dn { color: var(--fire); opacity: 1; font-weight: 700; }
.daylists li .over { color: var(--fire); }
.cal-d.dn1 { background: color-mix(in srgb, var(--smoke) 16%, var(--surface)); }
.cal-d.dn2 { background: color-mix(in srgb, var(--smoke) 34%, var(--surface)); }
.cal-d.dn3 { background: color-mix(in srgb, var(--smoke) 58%, var(--surface)); color: var(--surface); }
.cal-d:hover { outline: 2px solid var(--focus); outline-offset: -2px; }
.cal-legend .cal-sw { display: inline-block; width: 14px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 2px; }
.cal-sw.o0 { background: color-mix(in srgb, var(--c-ty) 6%, var(--surface)); border: 1px solid var(--rule); }
.cal-sw.o1 { background: color-mix(in srgb, var(--c-ty) 18%, var(--surface)); } .cal-sw.o2 { background: color-mix(in srgb, var(--c-ty) 34%, var(--surface)); }
.cal-sw.over { box-shadow: inset 0 0 0 2px var(--fire); background: var(--sunken); }
.cal-sw.o3 { background: color-mix(in srgb, var(--c-ty) 55%, var(--surface)); } .cal-sw.o4 { background: var(--c-ty); }
.cal-sw.p3 { background: color-mix(in srgb, var(--sea) 60%, var(--surface)); } .cal-sw.pn { background: var(--smoke-bg); border: 1px solid var(--smoke); }
.cal-sw.up2 { background: color-mix(in srgb, var(--ok) 34%, var(--surface)); } .cal-sw.dn2 { background: color-mix(in srgb, var(--smoke) 34%, var(--surface)); }

/* ---- the market and us: last year → this year, market ring beside our dot ------------------------------------------- */
svg.dumb .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
svg.dumb text.ax { font-size: 10.5px; }
svg.dumb text.lab { fill: var(--ink); font-size: 12.5px; }
svg.dumb .link { stroke: var(--c-ly); stroke-width: 3; }
svg.dumb .mk { fill: var(--surface); stroke: var(--c-otb); stroke-width: 2.2; }
svg.dumb .us { fill: var(--c-ty); }
svg.dumb text.sh { fill: var(--ink); font-size: 12.5px; }
svg.dumb text.shd.up { fill: var(--ok); } svg.dumb text.shd.down { fill: var(--smoke); }
svg.dumb .drow .hit { fill: transparent; }
svg.dumb .drow:hover .hit { fill: color-mix(in srgb, var(--sunken) 60%, transparent); }
.legend i.ring { border: 2px solid var(--c-otb); border-radius: 50%; width: 11px; height: 11px; background: var(--surface); }
.legend i.dotl { border-radius: 50%; width: 10px; height: 10px; }
.legend i.band { background: color-mix(in srgb, var(--c-ly) 45%, transparent); }

/* ---- Ανταγωνισμός ----------------------------------------------------------------------------------------------------- */
svg.chart .line.otb { stroke: var(--c-otb); }
svg.chart .rband { fill: color-mix(in srgb, var(--c-ly) 40%, transparent); stroke: none; }
.rategrid { font-size: 12.5px; }
.rategrid th, .rategrid td { padding: 5px 8px; }
.rategrid .stick { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; min-width: 170px; max-width: 230px; border-right: 1px solid var(--rule); }
.rategrid thead .stick { background: var(--sunken); }
.rategrid .stick .sub, .srctbl .sub, .tbl .sub { font-size: 11.5px; color: var(--muted); font-weight: 400; white-space: normal; }
.rategrid th.dcol { text-align: center; font-weight: 600; line-height: 1.2; }
.rategrid th.dcol.we { color: var(--ink); }
.rategrid td.dcol { text-align: center; min-width: 50px; }
.rategrid td.so { font-size: 11px; color: var(--muted); background: repeating-linear-gradient(135deg, var(--sunken) 0 4px, transparent 4px 8px); }
.rategrid td.above { background: color-mix(in srgb, var(--c-ty) 22%, transparent); font-weight: 700; }
.rategrid td.below { background: color-mix(in srgb, var(--c-otb) 16%, transparent); font-weight: 700; }
.rategrid tr.ours td, .rategrid tr.ours th { color: var(--muted); }
.rategrid tr.self th .sub { color: var(--muted); }
.rategrid tr.self th > div:first-child { font-weight: 700; }
.rategrid tr.med td, .rategrid tr.med th { border-top: 1px solid var(--ink); font-weight: 650; }
.manual .form-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* ---- settings: comp set, import, sources ------------------------------------------------------------------------------ */
.compform { background: var(--sunken); padding: 12px 14px; border-radius: var(--radius); }
.tbl tr.off td { color: var(--muted); }
.tbl tr.editrow td { background: var(--page); }
.importres { margin-top: 14px; }
.importres .notice { margin: 8px 0; }
.tbl td.warn { color: var(--smoke); font-weight: 600; }
.warnlist { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; padding-left: 18px; }
.srctbl td { font-size: 12.5px; }
.keyrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 190px; }
.keyrow input { margin-top: 0; width: 100%; } .keyrow button { padding-inline: 10px; }
@media (max-width: 600px) { .cal { grid-template-columns: 30px repeat(7, minmax(38px, 1fr)); min-width: 0; } .cal-d { height: 40px; } .cal-d .dv { font-size: 15px; } .cal-d .ds { display: none; } }
.calwrap { display: grid; grid-template-columns: minmax(0, 660px) minmax(220px, 1fr); gap: 28px; align-items: start; }
.cal { max-width: 660px; }
.daylists h3 { margin: 0 0 6px; }
.daylists h3 + ul + h3 { margin-top: 18px; }
.daylists ul { list-style: none; margin: 0; padding: 0; }
.daylists li { display: grid; grid-template-columns: 72px 48px 1fr; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.daylists li b { font-size: 16px; text-align: right; }
@media (max-width: 1100px) { .calwrap { grid-template-columns: 1fr; } }

/* ---- HitIA «Έσοδα»: the ledger ------------------------------------------------------------------------------------------ */
.revband { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 6px; }
.revband .s .sub { display: block; margin-top: 2px; }
p.source { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ledger { --lcols: minmax(150px, 1.1fr) minmax(180px, 2.6fr) repeat(6, minmax(64px, .55fr)); font-size: 13px; }
.lrow { display: grid; grid-template-columns: var(--lcols); gap: 0 12px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--rule); }
.lrow.lhead { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--sunken); padding: 7px 4px; border-bottom: 0; align-items: end; }
.lrow.lhead .legend { gap: 10px; font-weight: 400; }
.lrow.click { cursor: pointer; }
.lrow.click:hover, .lrow.open { background: color-mix(in srgb, var(--sunken) 55%, transparent); }
.lrow.click:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lrow.open .lname span:first-child { font-weight: 650; }
.lname { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.lname span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lname .share { font-family: var(--font-figure); font-stretch: 78%; color: var(--muted); font-size: 12px; }
.lfig { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lfig.figure { font-size: 14px; }
.rbar { display: flex; height: 14px; background: var(--sunken); border-radius: 1px; overflow: hidden; }
.rbar span { display: block; height: 100%; min-width: 0; }
.rs-room { background: var(--series-1); }
.rs-fb { background: var(--series-2); }
.rs-ex { background: var(--series-4); }
/* what the channel keeps: the room colour, hatched away */
.rs-fee { background: repeating-linear-gradient(135deg, var(--series-1) 0 2px, var(--surface) 2px 5px); box-shadow: inset 0 0 0 1px var(--series-1); }
.legend i.rs-room, .legend i.rs-fb, .legend i.rs-ex, .legend i.rs-fee { width: 12px; height: 10px; }
.lsub { background: var(--page); border-bottom: 1px solid var(--rule); padding: 4px 0 8px 18px; }
.lsub .lrow { border-bottom: 1px dashed var(--rule); padding: 5px 4px; font-size: 12.5px; }
.lsub .lrow:last-of-type { border-bottom: 0; }
.lsub .rbar { height: 9px; }
.lsubhead { margin: 6px 0 4px; font-size: 12.5px; color: var(--ink); }
input.pct { width: 76px; text-align: right; font-family: var(--font-figure); font-stretch: 78%; }
@media (max-width: 900px) {
  .revband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revband > div:nth-child(odd) { border-left: 0; }
  .revband > div { border-top: 1px solid var(--rule); } .revband > div:nth-child(-n+2) { border-top: 0; }
  .ledger { --lcols: 1fr repeat(3, auto); }
  .lrow { grid-template-areas: "name name name name" "bar bar bar bar" "a b c d"; grid-template-columns: repeat(4, 1fr); gap: 4px 10px; }
  .lrow .lname { grid-area: name; } .lrow .lbar { grid-area: bar; }
  .lrow > .lfig:nth-of-type(n+7) { display: none; }
  .lrow.lhead > .lfig { display: none; }
  .lrow.lhead { grid-template-areas: "name name name name" "bar bar bar bar"; }
  .lsub { padding-left: 8px; }
}

/* ---- Ανταγωνισμός: prices per channel -------------------------------------------------------------------------------------- */
.chgrid th.chh { text-align: center; border-left: 1px solid var(--rule); }
.chgrid thead tr:nth-child(2) th { font-weight: 500; font-size: 12px; }
.chgrid td.num, .chgrid th.num { min-width: 64px; }
.chgrid .avg { background: color-mix(in srgb, var(--sunken) 50%, transparent); }
.chgrid tr.self th, .chgrid tr.self td { font-weight: 650; }
.chgrid td.none { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--rule) 50%, transparent) 4px 5px); }
.chgrid td.parity { color: var(--fire); box-shadow: inset 0 -2px 0 var(--fire); }
/* a price on too few nights to compare: shown, not counted */
.chgrid td.thin, .rategrid td.thin { color: var(--muted); font-style: italic; font-weight: 400; }
.chgrid tr.nights td, .chgrid tr.nights th { color: var(--muted); font-weight: 500; font-size: 12px; }
ul.says { margin: 0 0 12px; padding-left: 18px; }
ul.says li { margin: 3px 0; }
/* month states: closed = the hotel sold nothing, nodata = the table does not cover it (never shown as 0) */
.tbl td .closed { color: var(--muted); font-style: italic; font-size: 12.5px; }
.tbl td .nodata { color: var(--muted); }

/* ---- HitIA «Κανάλια»: three years as three steps, the call as a chip ------------------------------------------------------ */
.chtbl td.steps, .chtbl th.steps { width: 64px; }
.chsteps { display: flex; align-items: flex-end; gap: 3px; height: 26px; width: 48px; }
.chsteps i { flex: 1; min-height: 2px; background: var(--c-ly); }
.chsteps i.ty { background: var(--c-ty); }
.chsteps i.na { background: repeating-linear-gradient(135deg, var(--rule) 0 2px, transparent 2px 5px); }
.chtbl .chip { font-size: 11.5px; }
.chtbl tr.chdetail > td { background: var(--sunken); padding: 14px 16px; }
.chbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 28px; }
.chbox h3 { font-size: 13.5px; margin: 0 0 6px; }
.chbox .reasons { margin: 0; padding-left: 18px; line-height: 1.55; }
@media (max-width: 760px) { .chbox { grid-template-columns: 1fr; } }
.chbox .chmore { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px 28px; }
.chbox .chmore .span2 { grid-column: 1 / -1; }
.chbox .chart .line.ly2 { stroke-dasharray: 2 3; opacity: .7; }
.legend i.ly2 { background: var(--c-ly); opacity: .55; }
.tbl td.warn { color: var(--smoke); font-weight: 600; }
@media (max-width: 760px) { .chbox .chmore { grid-template-columns: 1fr; } }

/* ---- HitIA «Ανάλυση» as a report builder ---------------------------------------------------------------------------------- */
.pvsaved { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pvsaved select { min-width: 240px; max-width: 100%; }
.pvfilters { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: flex-end; margin: 2px 0 8px; }
.pvfilter { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto; gap: 0 10px; align-items: end; }
.pvviews { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 4px 0 12px; }
.pvviews label { margin: 0; }
.pvchart .hb { max-width: 900px; }
svg.chart circle.xy { fill: var(--c-ty); fill-opacity: .7; stroke: var(--surface); stroke-width: 1; }
svg.chart .line.s1 { stroke: var(--series-1); } svg.chart .line.s2 { stroke: var(--series-2); } svg.chart .line.s3 { stroke: var(--series-3); }
svg.chart .line.s4 { stroke: var(--series-4); } svg.chart .line.s5 { stroke: var(--series-5); }
.legend i.s1 { background: var(--series-1); } .legend i.s2 { background: var(--series-2); } .legend i.s3 { background: var(--series-3); }
.legend i.s4 { background: var(--series-4); } .legend i.s5 { background: var(--series-5); }
.tbl.heat td.pos { background: color-mix(in srgb, var(--series-2) calc(var(--a) * 70%), transparent); }
.tbl.heat td.neg { background: color-mix(in srgb, var(--smoke) calc(var(--a) * 60%), transparent); }
@media (max-width: 640px) { .pvfilter { grid-template-columns: 1fr 1fr; } }
.chtbl tr.chdetail > td { padding: 0; }
.chtbl .chbox { position: sticky; left: 0; padding: 14px 16px; box-sizing: border-box; }
.chbox .tbl { width: 100%; }

/* «Budget»: the month grid */
.budgrid input.bud { width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; }
.budgrid input.bud.dirty { outline: 2px solid var(--accent, #c8102e); outline-offset: -1px; }
.budgrid td.rh { white-space: nowrap; }
.tbl tr.total td { font-weight: 600; border-top: 2px solid var(--line, #d8dee2); }
.budgetpack select { margin-right: .4em; }

/* where each market file comes from (Settings → Ξενοδοχείο → Εισαγωγή αρχείου) */
ul.where { margin: 4px 0 14px; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2, inherit); font-size: 14px; }
ul.where a { white-space: nowrap; }

/* allotment use: a thin bar, ember past full */
.usebar { display: inline-block; width: 90px; height: 6px; background: var(--sunken); border-radius: 3px; vertical-align: middle; overflow: hidden; }
.usebar i { display: block; height: 100%; background: var(--sea); border-radius: 3px; }

/* a holiday (Greece, Germany, United Kingdom) on the demand calendar: a small ember mark, the names in the tooltip */
.cal-d.hol { position: relative; }
.cal-d.hol::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; background: var(--vg-ember); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
td.fc { white-space: nowrap; }
.cal-sw.holsw { background: transparent; position: relative; }
.cal-sw.holsw::after { content: ""; position: absolute; inset: 3px; background: var(--vg-ember); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* today's signals on the Πίνακας: a quiet list, one line each, the colour only on the mark */
.signals { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 18px; }
.signals h2 { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.signals ul { list-style: none; margin: 0; padding: 0; }
.signals li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--sunken); font-size: 13.5px; }
.signals li:first-child { border-top: 0; }
.signals li i { flex: 0 0 8px; width: 8px; height: 8px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--sea); transform: translateY(-1px); }
.signals li.fire i { background: var(--fire); }
.signals li.smoke i { background: var(--smoke); }
.signals li span { flex: 1; }
.signals li a { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* «Αποστολές με e-mail»: the reports to attach as a short scrolling list; a paused schedule greyed */
.mailform { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 4px; }
.picklist { max-height: 190px; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 10px; margin-top: 4px; background: var(--surface); }
.picklist label.check { display: flex; margin: 3px 0; }
tr.off td { color: var(--faint); }
textarea { resize: vertical; }

/* terms explained on hover / tap (glossary.js) */
.term { text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 3px; cursor: help; }
.term:focus-visible { outline: 2px solid var(--rule); outline-offset: 2px; border-radius: 2px; }
.gloss-tip { position: fixed; z-index: 1000; padding: 8px 11px; border-radius: var(--radius); background: var(--ink); color: var(--page);
  font: 13px/1.45 var(--font-text); font-weight: 400; text-transform: none; letter-spacing: 0; white-space: pre-line; text-align: left;
  box-shadow: 0 4px 16px rgb(0 0 0 / .18); pointer-events: none; }

/* Settings → Κανάλια: what a channel is, in order */
.chorder { list-style: decimal inside; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.chorder li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; }
.chorder li.off { opacity: .6; list-style: none; }
.chorder li .buttons { gap: 4px; }
@media (max-width: 560px) { .chorder li { grid-template-columns: minmax(0, 1fr) auto; } .chorder li .sub { grid-column: 1 / -1; } }

/* Settings → Αγορά και ανταγωνισμός: the source of the prices as a choice, HIT's part and the manual add closed */
.choices { display: grid; gap: 8px; margin: 10px 0 14px; }
.choice { display: flex !important; grid-template-columns: none; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--sea); background: var(--sea-bg); }
.choice input { margin: 3px 0 0; width: auto; flex: none; }
.choice > span { flex: 1; text-align: left; }
.choice .sub { display: block; margin-top: 2px; }
details.advanced > summary, details.manual > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
details.manual { margin-top: 14px; }
.picker .keyrow { max-width: none; flex-wrap: nowrap; }
.chip.soon { display: inline-block; padding: 2px 8px; border-radius: var(--radius); background: var(--sunken); color: var(--muted); font-size: 12px; font-weight: 600; }

/* ---- Hub users: one table, a tree of hotels with a tick and a role each ------------------------------------------------------ */
.user-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.user-bar input, .user-bar select { width: auto; min-width: 220px; margin: 0; }
.hotel-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.user-editor { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.hotel-tree { border: 1px solid var(--rule); border-radius: var(--radius); }
.tree-root { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--sunken); }
.tree-root select, .tree-root input[type=search] { width: auto; margin: 0; }
.tree-leaves { max-height: 360px; overflow-y: auto; }
.tree-leaf { display: flex !important; margin: 0; gap: 10px; align-items: center; padding: 6px 12px 6px 34px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.tree-leaf:last-child { border-bottom: 0; }
.tree-leaf:has(input:checked) { background: var(--sea-bg); }
.tree-leaf input[type=checkbox] { width: auto; margin: 0; flex: none; }
.tree-leaf > span { flex: 1; min-width: 0; }
.tree-leaf select { width: auto; margin: 0; flex: none; }
@media (max-width: 600px) { .tree-leaf { flex-wrap: wrap; padding-left: 12px; } }

/* Αγορά → Πτήσεις: seats of a day as a slate bar (no colour: the size is the news), the day's flights opened below it */
.fbar { display: block; height: 8px; width: var(--w); min-width: 1px; background: var(--series-1, var(--ink)); border-radius: 1px; }
.tbl.flights td:nth-child(4) { width: 22%; min-width: 80px; }
.tbl.flights tr.fdetail > td { background: var(--sunken); padding: 8px 12px 14px; }
.tbl.compact td, .tbl.compact th { padding-top: 4px; padding-bottom: 4px; }