/* Asterias ERP — one stylesheet, no framework (DF7).
   UI-1a (Stavros 10 Oct): Dark by default, Light per user (html[data-theme]); printed pages always light; every page fits
   the screen of a phone; menu behind ☰ under 900 px; finger-size controls on touch screens. Every colour is a variable.
   T1 (Stavros 21 Oct, «B»): the Asterias identity of asterias.gr — Asterias blue #000F9F and the teal of «CREATIVE DESIGN»;
   the logo on a blue top bar; Open Sans for text (as asterias.gr) and Manrope for headings (Montserrat, the site's heading
   face, has no Greek letters). Dark = night blue, not grey. The colours of meaning (ok / warn / err) are the same as before.
   Fonts are served from /assets/fonts (OFL licences beside them): no outside host, CSP unchanged. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/open-sans-greek-400-normal.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: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/open-sans-greek-600-normal.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: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/open-sans-greek-700-normal.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: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/open-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/open-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/open-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/open-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/open-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/open-sans-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/manrope-greek-600-normal.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: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/manrope-greek-700-normal.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: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/manrope-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/manrope-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/manrope-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/manrope-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5fa; --panel: #ffffff; --ink: #1b1f3b; --muted: #545b7c; --line: #dde1ee; --field: #ffffff;
  --accent: #000f9f; --accent-ink: #ffffff; --hover: #e8eaf8;
  --ok: #1e7a3c; --ok-bg: #e6f4ea; --err: #b3261e; --err-bg: #fce8e6; --warn: #8a4b00; --warn-bg: #fdf3e7;
  --info-bg: #e8eaf8; --tag-bg: #eceef6; --callout-line: #f0c98c; --callout-bg: #fffaf2; --banner-line: #e0a0a0;
  --shadow: 0 6px 24px rgba(11, 16, 96, .16);
  --top: #000f9f; --top-ink: #ffffff; --top-line: rgba(255, 255, 255, .38); --hl: #007581;
  --l0: #e8edff; --l1: #9fdce1; --l2: #ffc36b; --l3: #c2410c; --l0-ink: #1b1f3b; --l1-ink: #0b2a33; --l2-ink: #3a2400; --l3-ink: #ffffff;
  --s1: #000f9f; --s2: #2fb5c0; --s3: #7c8bd9; --s4: #e8590c; --s5: #1e7a3c; --s6: #8a4b00;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0d2b; --panel: #121741; --ink: #e9ebf8; --muted: #a9afd8; --line: #283070; --field: #0d1236;
  --accent: #2fd0db; --accent-ink: #002a30; --hover: #1b2260;
  --ok: #72d394; --ok-bg: #173022; --err: #ff8f85; --err-bg: #3b1e1c; --warn: #f2b65e; --warn-bg: #33270f;
  --info-bg: #1f2768; --tag-bg: #1f2768; --callout-line: #6b5326; --callout-bg: #231d12; --banner-line: #6b2f2b;
  --shadow: 0 6px 24px rgba(0, 0, 0, .55);
  --top: #000b78; --top-ink: #ffffff; --top-line: rgba(255, 255, 255, .32); --hl: #6fe0e7;
  --l0: #1f2768; --l1: #2a8f99; --l2: #f2b65e; --l3: #ff7a45; --l0-ink: #e9ebf8; --l1-ink: #04181b; --l2-ink: #2a1a00; --l3-ink: #1a0800;
  --s1: #2fd0db; --s2: #7c8bd9; --s3: #f2b65e; --s4: #ff8f85; --s5: #72d394; --s6: #c6a6ff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); }

/* ---- frame ---- */
.top { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; padding: .7rem 1.1rem; background: var(--top);
  color: var(--top-ink); flex-wrap: wrap; }
.brand { display: flex; align-items: center; font-weight: 700; text-decoration: none; color: var(--top-ink); margin-right: auto; }
.brand img { display: block; height: 36px; width: auto; }
.who { display: flex; gap: .6rem; align-items: center; color: var(--top-ink); flex-wrap: wrap; min-width: 0; }
.who form { margin: 0; }
.who button.link { color: var(--top-ink); }
.burger { display: none; text-decoration: none; color: var(--top-ink); border: 1px solid var(--top-line); border-radius: 999px; padding: .3rem .8rem; }
button.icon { background: transparent; color: var(--top-ink); border: 1px solid var(--top-line); padding: .2rem .6rem; line-height: 1.2; font-size: 1.05rem; }
.wrap { display: flex; gap: 1.2rem; padding: 1.2rem 1rem; max-width: 1240px; margin: 0 auto; }
.menu { flex: 0 0 210px; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: .45rem .9rem; border-radius: 999px; text-decoration: none; color: var(--ink); }
.menu a:hover { background: var(--hover); }
.menu a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
main { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.4rem; overflow-wrap: break-word; }
h1, h2, h3 { font-family: Manrope, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 1rem; text-wrap: balance; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 1.5rem 0 .6rem; }
.muted { color: var(--muted); }
.small { font-size: .9em; }
.flash { padding: .6rem .8rem; border-radius: 6px; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--err-bg); color: var(--err); }
.stack { display: grid; gap: .6rem; max-width: 420px; }
.stack label { display: grid; gap: .2rem; grid-template-columns: minmax(0, 1fr); }
input, select, button, textarea { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; max-width: 100%; min-width: 0; }
input, select, textarea { background: var(--field); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
textarea { width: 100%; resize: vertical; }
.stack select { width: 100%; }
button, .button { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); cursor: pointer; text-decoration: none; display: inline-block;
  padding: .45rem 1rem; border-radius: 999px; font-weight: 600; }
button.link { background: none; border: 0; color: var(--accent); padding: 0; text-decoration: underline; }
button.secondary, .button.secondary { background: var(--panel); color: var(--ink); border-color: var(--line); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
table.grid { border-collapse: collapse; width: 100%; }
/* UI-1a.1: a table never breaks a word to fit (on a tablet «Πελάτης» came out one letter per line); a table wider than
   the page scrolls inside its own box (the script wraps every table.grid in .table-scroll; without it, phones use
   display:block below). */
table.grid th, table.grid td { overflow-wrap: normal; word-break: normal; }
.table-scroll { overflow-x: auto; max-width: 100%; margin-bottom: .2rem; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line); padding: .35rem .4rem; text-align: left; vertical-align: middle; }
table.grid input:not([type=checkbox]) { width: 100%; min-width: 7rem; }
tr.inactive { opacity: .55; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
body.plain main { max-width: 560px; margin: 3rem auto; }
code { overflow-wrap: anywhere; }

/* ---- 0c: imports and data health ---- */
.steps { margin: .4rem 0 1rem; padding-left: 1.3rem; }
table.narrow { width: auto; }
td.good { color: var(--ok); font-weight: 600; }
td.bad, .bad { color: var(--err); font-weight: 600; }
table.num td:not(:first-child), td.n { text-align: right; font-variant-numeric: tabular-nums; }
table.facts-table td:first-child { width: 60%; }
tr.differs { background: var(--warn-bg); }
tr.selected { background: var(--info-bg); }
.tag, .sev { display: inline-block; padding: .05rem .45rem; border-radius: 99px; font-size: .85em; background: var(--tag-bg); }
.tag.applied { background: var(--ok-bg); color: var(--ok); }
.tag.rejected, .tag.failed, .sev.error { background: var(--err-bg); color: var(--err); }
.tag.dry_run, .sev.warning { background: var(--warn-bg); color: var(--warn); }
.callout { border: 1px solid var(--callout-line); background: var(--callout-bg); border-radius: 8px; padding: .6rem .9rem; margin: 0 0 1rem; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: 0 .4rem .4rem 0; max-width: 100%; }
form.inline label { display: grid; gap: .2rem; min-width: 0; grid-template-columns: minmax(0, 1fr); }
details summary { cursor: pointer; color: var(--accent); margin: .4rem 0; }
.pager { display: flex; flex-wrap: wrap; gap: .5rem; }
code.small { font-size: .8em; }

/* ---- 0d: Billit import and data health resolutions ---- */
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; margin: 0; min-width: 0; }
legend { padding: 0 .3rem; font-weight: 600; }
td form.inline input[type=text] { min-width: 10rem; }
q { color: var(--muted); }
.banner { border: 1px solid var(--banner-line); background: var(--err-bg); color: var(--err); border-radius: 8px; padding: .4rem .9rem; margin: 0 0 1rem; }
.banner p { margin: .25rem 0; }
.banner a { color: inherit; font-weight: 600; }

/* ---- 1a: revenue and brands ---- */
section.brand { border-top: 1px solid var(--line); margin-top: 1rem; }
td.client details summary { color: var(--ink); }
td.client ul { margin: .3rem 0 .2rem; padding-left: 1.1rem; }
nav.pager strong { padding: 0 .2rem; }
tfoot td, tfoot th { border-top: 2px solid var(--line); }
table.num td.client { text-align: left; }
table.num td:not(:first-child):not(.client), table.num th.n { white-space: nowrap; }
section.brand form.inline, form.stack { flex-wrap: wrap; max-width: 100%; }
section.brand form.inline label { min-width: 0; }
section.brand select, form[data-form="new-brand"] select { max-width: min(100%, 40rem); width: 100%; }
form[data-form="new-brand"] { max-width: 40rem; }

/* ---- 1b: linking documents to jobs ---- */
section.doc { border-top: 1px solid var(--line); padding: .5rem 0; }
section.doc .doc-head { margin: .2rem 0; }
ul.doc-lines { margin: .2rem 0 .4rem; padding-left: 1.1rem; }
label.pick { float: right; font-size: .9em; color: var(--muted); }
.tag.manual { background: var(--info-bg); }
form.inline-x { display: inline; margin: 0; }
form.split-form input { width: 7rem; text-align: right; }
nav.tabs { margin: .5rem 0 1rem; }
td.nowrap { white-space: nowrap; }

/* ---- 2b «Εργασίες» ---- */
form[data-form=new-job], form[data-form=edit-job], form[data-form=new-project] { max-width: 36rem; }
fieldset.inline label { display: inline-flex; gap: .3rem; margin-right: 1rem; }
.tag.status-open { background: var(--info-bg); }
.tag.status-delivered { background: var(--warn-bg); color: var(--warn); }
.tag.status-invoiced { background: var(--ok-bg); color: var(--ok); }
.tag.status-cancelled { background: var(--err-bg); color: var(--err); }
table[data-table=jobs] td.job { min-width: 18rem; }
.err { color: var(--err); }

/* ---- 2d.2 purchases ---- */
section.task, div.task-new { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; margin: .6rem 0; }
section.task h3, div.task-new h3 { margin: 0 0 .4rem; font-size: 1rem; }
label.check { display: inline-flex; gap: .3rem; align-items: center; }
label.check > input[type=checkbox] { flex: none; } /* a long name never squeezes the box (seen on the clean-start list) */
.flash[data-pending] { background: var(--warn-bg); color: var(--warn); margin-bottom: 1rem; }
section.task form.inline, form[data-form=task_add] { display: flex; flex-wrap: wrap; }
section.task label.check { flex-basis: 100%; }
form.inline label.check { display: flex; flex-direction: row; align-items: center; gap: .4rem; }
section.task input[type=file] { max-width: 16rem; }

/* ---- 2b.1 products ---- */
form[data-form="merge"] select, form[data-form="merge"] .combo { width: min(100%, 22rem); }

/* ---- UI-1a: Greek calendar (input[data-date]) ---- */
.date-wrap { position: relative; display: inline-flex; gap: .3rem; align-items: center; max-width: 100%; }
.date-wrap input { width: 9.5rem; }
button.cal-btn { background: var(--panel); color: var(--ink); border-color: var(--line); padding: .3rem .5rem; line-height: 1.2; }
.cal { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 18.5rem; max-width: calc(100vw - 1rem); background: var(--panel);
  color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: .5rem; }
.cal[hidden] { display: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .3rem; }
.cal-title { display: flex; gap: .25rem; min-width: 0; flex: 1 1 auto; justify-content: center; }
.cal-title select { width: auto; min-width: 0; padding: .2rem .3rem; font-size: .9rem; }
.cal-title .cal-month { flex: 1 1 auto; max-width: 8.5rem; }
.cal-head button, .cal-foot button { background: var(--panel); color: var(--ink); border-color: var(--line); padding: .25rem .6rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .wd { text-align: center; font-size: .78rem; color: var(--muted); padding: .2rem 0; }
.cal-grid button { background: transparent; color: var(--ink); border: 1px solid transparent; padding: .35rem 0; border-radius: 6px; min-width: 0;
  font-variant-numeric: tabular-nums; }
.cal-grid button:hover { background: var(--hover); }
.cal-grid button.out { color: var(--muted); opacity: .55; }
.cal-grid button.today { border-color: var(--accent); }
.cal-grid button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.cal-grid button.we { color: var(--muted); }
.cal-grid button[aria-selected="true"].we { color: var(--accent-ink); }
.cal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem; margin-top: .4rem; }
.cal-foot button { white-space: nowrap; flex: 1 1 auto; } /* never «Σήμερ-α» on a phone: a button goes to the next row instead */

/* ---- UI-1a: search boxes (select[data-search]) ---- */
.combo { position: relative; display: inline-block; width: min(100%, 36rem); }
.stack .combo, label > .combo { width: 100%; }
.combo input { width: 100%; }
.combo ul { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; min-width: 100%; width: max-content; max-width: min(34rem, calc(100vw - 1rem)); max-height: 18rem; overflow-y: auto; margin: 0; padding: .2rem;
  list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.combo ul[hidden] { display: none; }
.combo li { padding: .4rem .55rem; border-radius: 6px; cursor: pointer; }
.combo li[aria-selected="true"], .combo li:hover { background: var(--hover); }
.combo li.note { cursor: default; color: var(--muted); font-size: .9em; }
.combo li.note:hover { background: transparent; }
select.enhanced { display: none; }

/* ---- UI-1b: file boxes (input[type=file][data-drop]) ---- */
.drop { position: relative; display: grid; gap: .15rem; place-items: center; text-align: center; min-width: min(100%, 16rem); padding: .7rem .9rem;
  border: 2px dashed var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--hover); }
.drop.has-file { border-style: solid; border-color: var(--ok); }
.drop.bad { border-color: var(--err); }
.drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-text { font-weight: 600; }
.drop-file { font-size: .9em; color: var(--muted); overflow-wrap: anywhere; }
.drop.bad .drop-file { color: var(--err); }
section.task input[type=file].drop-input { max-width: none; }
/* P1: the × that empties the box (above the invisible input), and the offer text beside the box */
.drop-clear { position: absolute; top: .2rem; right: .2rem; z-index: 1; padding: 0 .45rem; line-height: 1.4; border: 1px solid var(--line);
  border-radius: 999px; background: var(--field); color: var(--ink); cursor: pointer; }
.drop-clear:hover { border-color: var(--err); color: var(--err); }
.drop-clear[hidden] { display: none; }
/* W1: the Owner's team workload on «Αρχική» */
.home-load { margin: 1.4rem 0; min-width: 0; max-width: 100%; }
.home-load table { width: 100%; }
.home-load details summary { cursor: pointer; }
ul.load-jobs { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .9em; text-align: left; }
ul.load-jobs li { margin: .15rem 0; }
/* P2: «Αγορές» — the purchase gets the room */
/* W2: the team's load ahead (heatmap people × weeks; charts are server-made SVG, coloured by class) */
.load-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin: .6rem 0; }
.load-card { border-radius: 12px; padding: .6rem .8rem; }
.load-card b { display: block; font-family: Manrope, "Open Sans", sans-serif; font-size: 1.05rem; }
.load-card.over { background: var(--l3); color: var(--l3-ink); }
.load-card.slack { background: var(--l0); color: var(--l0-ink); }
.load-card.mid { background: var(--l1); color: var(--l1-ink); }
p.load-card { margin: 0; }
.hm-scroll { overflow-x: auto; margin: .4rem 0; max-width: 100%; min-width: 0; }
.hm { display: grid; grid-template-columns: minmax(7.5rem, 11rem) repeat(8, minmax(3.6rem, 1fr)); gap: .3rem; min-width: 40rem; align-items: center; }
.hm .hm-head { font-size: .78rem; font-weight: 600; color: var(--muted); text-align: center; }
.hm .hm-name { position: sticky; left: 0; background: var(--panel); font-weight: 600; font-size: .92rem; line-height: 1.2; padding-right: .3rem; }
.hm .hm-name small { display: block; font-weight: 400; color: var(--muted); }
.hm a.cell, .hm span.cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.9rem; border-radius: 9px;
  text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.15; border: 1px solid transparent; }
.hm .cell small { font-weight: 400; font-size: .72rem; }
.hm .b0 { background: var(--l0); color: var(--l0-ink); border-color: var(--line); }
.hm .b1 { background: var(--l1); color: var(--l1-ink); }
.hm .b2 { background: var(--l2); color: var(--l2-ink); }
.hm .b3 { background: var(--l3); color: var(--l3-ink); }
.hm .leave, .hm .off { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-weight: 400; font-size: .8rem; }
.load-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; color: var(--muted); margin: .4rem 0; }
.load-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; }
.load-legend i.b0 { background: var(--l0); border: 1px solid var(--line); } .load-legend i.b1 { background: var(--l1); }
.load-legend i.b2 { background: var(--l2); } .load-legend i.b3 { background: var(--l3); }
svg.chart { display: block; width: 100%; height: auto; max-width: 56rem; }
svg.chart text { fill: var(--muted); font: 600 11px "Open Sans", system-ui, sans-serif; }
svg.chart text.strong { fill: var(--ink); }
svg.chart .cap { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
svg.chart .base { stroke: var(--line); stroke-width: 1; }
svg.chart .b0 { fill: var(--l0); stroke: var(--line); } svg.chart .b1 { fill: var(--l1); } svg.chart .b2 { fill: var(--l2); } svg.chart .b3 { fill: var(--l3); }
svg.chart .s1 { fill: var(--s1); } svg.chart .s2 { fill: var(--s2); } svg.chart .s3 { fill: var(--s3); }
svg.chart .s4 { fill: var(--s4); } svg.chart .s5 { fill: var(--s5); } svg.chart .s6 { fill: var(--s6); }
svg.chart .track { fill: var(--tag-bg); }
svg.chart .band { fill: var(--ok-bg); }
svg.chart .med { fill: var(--ink); }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-right: .35rem; }
.swatch.s1 { background: var(--s1); } .swatch.s2 { background: var(--s2); } .swatch.s3 { background: var(--s3); }
.swatch.s4 { background: var(--s4); } .swatch.s5 { background: var(--s5); } .swatch.s6 { background: var(--s6); }
table[data-table="purchases"] td:first-child { min-width: 14rem; }
table[data-table="purchases"] td:nth-child(2), table[data-table="purchases"] td:nth-child(3) { min-width: 9rem; }
.drop.has-file { padding-left: 2.1rem; padding-right: 2.1rem; }
form.inline label.offer-text { flex: 1 1 18rem; }
label.offer-text textarea { min-height: 4.6rem; }
textarea.bad { border-color: var(--err); }

/* ---- UI-1b: folded warning boxes on phones ---- */
.banner.folded p:not(:first-child) { display: none; }
.banner .fold-btn { color: inherit; font-weight: 600; margin: .1rem 0 .2rem; }

/* ---- UI-1b: lists as cards on phones (table.cards; labels from the column titles) ---- */
@media (max-width: 760px) {
  .js table.cards, .js table.cards tbody, .js table.cards tr, .js table.cards td { display: block; width: 100%; }
  .js table.cards thead { display: none; }
  .js table.cards tr { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; margin: 0 0 .6rem; background: var(--panel); }
  .js table.cards tr.selected { border-color: var(--accent); }
  .js table.cards td { border: 0; padding: .12rem 0; text-align: left !important; white-space: normal !important; min-width: 0 !important; }
  .js table.cards td:first-child { font-size: 1.02em; padding-bottom: .3rem; }
  .js table.cards td[data-label]:not(:first-child)::before { content: attr(data-label) " · "; color: var(--muted); font-size: .85em; }
  .js table.cards td:empty { display: none; }
  .js .table-scroll:has(> table.cards) { overflow: visible; }
}

/* ---- UI-1a: phones and tablets ---- */
@media (max-width: 900px) {
  .burger { display: inline-flex; gap: .35rem; align-items: center; }
  .wrap { flex-direction: column; padding: .5rem; gap: .5rem; }
  .menu { display: none; flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .3rem; }
  .menu:target, body.menu-open .menu { display: block; }
  body.menu-closed .menu:target { display: none; }
  .menu ul { columns: 2 12rem; column-gap: .3rem; }
  .menu li { break-inside: avoid; }
  main { padding: .8rem; }
  html:not(.js) table.grid { display: block; overflow-x: auto; }
}
@media (max-width: 520px) {
  form.inline { display: flex; width: 100%; margin-right: 0; }
  form.inline label { flex: 1 1 100%; }
  form.inline input[type=text], form.inline input:not([type]), form.inline select, form.inline .combo { width: 100%; }
  .who-name { display: none; }
  .burger-text { display: none; }
  .top { padding: .5rem .6rem; }
  dl.facts { grid-template-columns: 1fr; }
  dl.facts dd { margin-bottom: .4rem; }
  table[data-table=jobs] td.job { min-width: 12rem; }
}
@media (pointer: coarse) {
  input, select, button, textarea, .button, .burger { min-height: 44px; }
  input[type=checkbox], input[type=radio] { min-height: 0; width: 1.3rem; height: 1.3rem; }
  .menu a { padding: .65rem .7rem; }
  .cal-grid button { min-height: 40px; }
  .combo li { padding: .65rem .6rem; }
  button.link { min-height: 0; }
}

/* ---- print: always light, without the frame ---- */
/* UI-2: the job page in tabs (one part at a time with the script; every part without it and on paper) */
nav.job-tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
nav.job-tabs a { flex: 0 0 auto; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; white-space: nowrap; }
nav.job-tabs a.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
@media (pointer: coarse) { nav.job-tabs a { min-height: 44px; display: inline-flex; align-items: center; } }
section.tab { margin-top: .6rem; }
details.more { border: 1px solid var(--line); border-radius: 8px; padding: .2rem .8rem; margin: .8rem 0; }
details.more > summary { font-weight: 600; }
details.rules > summary { font-size: .9em; }
section.task, div.task-new { background: var(--panel); }
.task-new form.inline { display: flex; flex-wrap: wrap; }

/* 2c «Οι ώρες μου»: week strip, one row per job/code with its hour box (finger-size on touch) */
nav.weeknav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .4rem 0; }
ul.daystrip { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
ul.daystrip li a, ul.daystrip li > span { display: flex; flex-direction: column; align-items: center; padding: .35rem .1rem; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font-size: .85rem; min-height: 44px; justify-content: center; }
ul.daystrip li.active a { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
ul.daystrip li.missing a { border-color: var(--err); }
ul.daystrip li.future > span { opacity: .45; }
ul.daystrip .dh { font-size: .8rem; white-space: nowrap; }
fieldset.hours { display: grid; gap: .3rem; }
label.hour-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .25rem 0; border-bottom: 1px solid var(--line); }
label.hour-row .hr-label { flex: 1 1 auto; min-width: 0; }
label.hour-row input { width: 5rem; flex: 0 0 auto; text-align: right; }
@media (pointer: coarse) { label.hour-row input { min-height: 44px; font-size: 1.05rem; } }
th.missing { color: var(--err); }
/* 2c.1: a day over the person's hours (amber), its reason box */
.warn { color: var(--warn); }
ul.daystrip li.over a { border-color: var(--warn); }
ul.daystrip li.over.missing a { border-color: var(--err); }
ul.daystrip .dh.plus { color: var(--warn); font-weight: 600; }
ul.daystrip li.active .dh.plus { color: inherit; }
th.over { color: var(--warn); }
.over-reason[hidden] { display: none; }
.over-reason textarea { width: 100%; }
ul.over-notes { padding-left: 1.1rem; }
.po-from { margin: 0 0 1rem; padding: 0 0 .6rem; border-bottom: 2px solid var(--ink); line-height: 1.4; }

/* D1 «Αρχική»: the dashboard on the page background (main.bare), its blocks as cards */
main.bare { background: transparent; border: 0; padding: .2rem 0 0; }
.eyebrow { margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hl); }
.home { display: grid; gap: 1.3rem; grid-template-columns: minmax(0, 1fr); }
.home h2 { margin: 0; }
.home-summary { margin: -.5rem 0 0; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; margin: .7rem 0 0; }
.tile { display: grid; gap: .15rem; align-content: start; min-height: 5.6rem; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; color: var(--ink); text-decoration: none; }
.tile:hover { border-color: var(--accent); }
.tile b { font: 700 2rem/1.1 Manrope, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--hl); font-variant-numeric: tabular-nums; }
.tile.zero b { color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.2rem; margin: 0 0 .9rem; }
.meter { display: flex; align-items: center; gap: .7rem; flex: 0 1 20rem; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.meter progress { flex: 1 1 5rem; height: .5rem; -webkit-appearance: none; appearance: none; border: 0; border-radius: 99px; background: var(--tag-bg); overflow: hidden; }
.meter progress::-webkit-progress-bar { background: var(--tag-bg); border-radius: 99px; }
.meter progress::-webkit-progress-value { background: var(--hl); border-radius: 99px; }
.meter progress::-moz-progress-bar { background: var(--hl); border-radius: 99px; }
ol.week { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
.day { display: grid; gap: .1rem; align-content: start; min-height: 5.6rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--muted); text-decoration: none; }
.day .dn { font-size: .82rem; font-weight: 600; }
.day .dh { font: 700 1.45rem/1.15 Manrope, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.day .dh small { font-size: .55em; font-weight: 600; color: var(--muted); }
.day .dx { font-size: .78rem; font-weight: 600; }
.day.ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.day.short { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.day.over { border-color: var(--warn); color: var(--warn); }
.day.today { border: 2px solid var(--accent); background: var(--panel); color: var(--ink); }
.day.future { opacity: .65; }
.day:hover { border-color: var(--accent); }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin: .9rem 0 0; }
.card-foot p { margin: 0; }
.home-jobs .card-head { margin: 0; }
.home-jobs h3 { margin: 1rem 0 .5rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
ul.jcards { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.jcard { display: grid; gap: .35rem; padding: .9rem 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.jtop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.tag.product { font-size: .72rem; font-weight: 700; letter-spacing: .06em; border-radius: 6px; }
.jcard a.jt { font: 600 1.08rem/1.3 Manrope, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); text-decoration: none; }
.jcard a.jt:hover { text-decoration: underline; }
.jmeta { margin: 0; display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; font-size: .9rem; color: var(--muted); }
@media (max-width: 560px) {
  ol.week { gap: .3rem; }
  .day { min-height: 0; padding: .5rem .25rem; text-align: center; }
  .day .dh { font-size: 1.1rem; }
  .day .dh small { display: block; }
  .day .dd { display: block; }
  .day .dx { font-size: .68rem; }
  .card { padding: .9rem; }
}

@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff; --panel: #ffffff; --ink: #000000; --muted: #444444; --line: #bbbbbb; --field: #ffffff;
    --accent: #000000; --accent-ink: #ffffff; --hover: #ffffff;
    --ok: #1e7a3c; --ok-bg: #ffffff; --err: #b3261e; --err-bg: #ffffff; --warn: #8a4b00; --warn-bg: #ffffff;
    --info-bg: #ffffff; --tag-bg: #ffffff; --callout-line: #bbbbbb; --callout-bg: #ffffff; --banner-line: #bbbbbb; --shadow: none;
    --top: #ffffff; --top-ink: #000000; --top-line: #bbbbbb; --hl: #000000;
    --l0: #ffffff; --l1: #dddddd; --l2: #aaaaaa; --l3: #555555; --l0-ink: #000000; --l1-ink: #000000; --l2-ink: #000000; --l3-ink: #ffffff;
    --s1: #000000; --s2: #333333; --s3: #555555; --s4: #777777; --s5: #999999; --s6: #bbbbbb;
  }
  body { background: #fff; color: #000; }
  .menu, header, .noprint, .banner, .flash, .burger, .cal, .cal-btn { display: none !important; }
  /* UI-2: on paper the facts of every part, no form */
  section.tab, section.tab[hidden] { display: block !important; }
  main form, details.more, details.rules, button, .drop { display: none !important; }
  section.task { break-inside: avoid; }
  main { padding: 0; border: 0; }
  .wrap { padding: 0; }
  a { color: #000; }
}
/* E1 / PO (Stavros 25 Oct): printed pages keep left and right margins (also when saved as PDF) */
@page { size: A4; margin: 16mm 18mm; }

/* 2b.2: the job's client contact/product (pick or write) and its people (checkboxes, finger-size on touch) */
.js [data-nojs] { display: none; }
fieldset.pick, fieldset.people { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: flex-end; }
fieldset.people label.check { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; }
@media (pointer: coarse) { fieldset.people label.check { min-height: 44px; } }

/* 2e «Έξοδα»: invoice cards, the split rows */
.tag.warn { background: var(--warn-bg); color: var(--warn); }
section.expense h3.exp-head { margin: 0 0 .2rem; font-size: 1rem; }
section.expense .exp-amounts { margin: 0 0 .4rem; }
section.expense.changed { border-color: var(--err); }
.part-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.part-row label { display: grid; gap: .2rem; }
.part-row input { width: 8rem; max-width: 100%; }
.suggest form.inline { margin: .2rem 0; }
.suggest button { white-space: normal; text-align: left; }

/* 2b.5 «Πελάτης»: the job in the client's court */
.client-waits .buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.wait-button { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); font-weight: 700; }
.invoice-check { border-left: 3px solid var(--warn); padding: .25rem .75rem; margin: .5rem 0; }
.tag.wait-approved { background: var(--ok-bg); color: var(--ok); }
.tag.wait-corrections, .tag.wait-brief { background: var(--warn-bg); color: var(--warn); }

/* 2b.6 the folder path; the «someone changed this job» note */
.folder-path code { user-select: all; overflow-wrap: anywhere; background: var(--tag-bg); padding: .1rem .3rem; }
.live-note { border-left: 3px solid var(--warn); padding: .25rem .75rem; color: var(--warn); }

/* 2e.2 possible duplicate invoices */
.callout.twin { border-color: var(--warn); }
.twin-group { border-left: 3px solid var(--warn); padding: .1rem .75rem; margin: .5rem 0; }

/* the clean start */
button.danger { background: var(--err); color: var(--accent-ink); border-color: var(--err); }
button.danger:disabled { opacity: .5; }
[data-checks] .ok { color: var(--ok); }
[data-checks] .err { color: var(--err); }

/* J1 «Αναζήτηση εργασιών»: the form in columns that fold to one on a phone; the words box and the buttons across */
.search-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .6rem 1rem; align-items: end; max-width: 60rem; margin-bottom: 1rem; }
.search-form label { display: grid; gap: .2rem; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.search-form .wide { grid-column: 1 / -1; }
.search-form select, .search-form input[type=search] { width: 100%; }
.search-form .search-go { margin: 0; display: flex; gap: 1rem; align-items: center; }


/* AI-0: a code block (the config lines to add) scrolls inside itself on a phone, never the page */
pre { max-width: 100%; overflow-x: auto; white-space: pre; background: var(--tag-bg); padding: .5rem; border-radius: 6px; }

/* LK1: the guide of «Σύνδεση με εργασίες» */
details.guide { border: 1px solid var(--line); border-radius: 8px; padding: .3rem .9rem .6rem; margin: .8rem 0; background: var(--panel); }
details.guide h3 { font-size: 1rem; margin: .8rem 0 .2rem; }
details.guide ol { padding-left: 1.3rem; margin: .3rem 0; }
details.guide li { margin: .25rem 0; }

/* IN1: a person in a table by a short form; the full name on hover / long tap («.who» is the top bar: IN1.1) */
main .person { white-space: nowrap; text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; letter-spacing: .02em; }