/* Ταυτότητα emspace: τυρκουάζ #31BDCA, navy #1D2433, κάψουλες, Didact Gothic / Noto Sans */
:root{
  --bg:#f3f6f9;--fg:#2c3338;--mut:#6b7480;--card:#fff;--line:#e2e8ee;
  --acc:#31bdca;--acc-d:#1e8f9a;--acc-soft:rgba(49,189,202,.12);--on-acc:#fff;
  --navy:#1d2433;--navy-2:#2c3338;
  --c-late:#d64545;--c-red:#e5683c;--c-orange:#f0a02e;--c-soft:var(--acc-d);
  --link:#1e8f9a;--ok-bg:#dff3f4;--ok-fg:#14606a;--danger:#c0392b;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#141a26;--fg:#e7edf5;--mut:#9aa6b6;--card:#1d2433;--line:#2c3648;
  --acc-soft:rgba(49,189,202,.16);--link:#5fd3de;--ok-bg:#16363c;--ok-fg:#9be6ee;
  --c-late:#ef6b6b;--c-red:#f08a5d;--c-orange:#f3b04f;--c-soft:#5fd3de}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 "Didact Gothic","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--fg)}
h1,h2,h3,th,.brand,button,.btn{font-family:"Noto Sans","Didact Gothic",system-ui,sans-serif}
header{display:flex;gap:22px;align-items:center;padding:0 24px;background:var(--navy);flex-wrap:wrap;border-bottom:3px solid var(--acc)}
.brand{display:flex;align-items:center;gap:10px;padding:12px 0;text-decoration:none}
.brand img{height:30px;width:auto;display:block}
.brand span{background:var(--acc);color:#fff;font-size:.68rem;font-weight:700;padding:2px 9px;border-radius:99px;letter-spacing:.8px;font-style:normal}
header nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
header nav a,header .out{padding:18px 14px;text-decoration:none;color:#c9d2de;font-size:.95rem;border-bottom:3px solid transparent;margin-bottom:-3px}
header nav a:hover,header .out:hover{color:#fff}
header nav a.on{color:#fff;border-bottom-color:var(--acc)}
main{max-width:1150px;margin:0 auto;padding:26px 16px 70px}
h1{margin:.1em 0 .6em;font-size:1.7rem;font-weight:600;color:var(--fg)}
h1 small{color:var(--mut);font-weight:400;font-size:1rem}
h2{margin-top:2em;font-size:1.15rem;font-weight:600;padding-bottom:6px;border-bottom:2px solid var(--acc-soft)}
a{color:var(--link)}.muted{color:var(--mut)}
.flash{background:var(--ok-bg);color:var(--ok-fg);padding:11px 16px;border-radius:12px;margin-bottom:16px;border-left:4px solid var(--acc)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(29,36,51,.04)}
.cards .card b{display:block;font-size:1.55rem;font-weight:600;color:var(--navy)}
@media(prefers-color-scheme:dark){.cards .card b{color:#fff}}
.cards .card:nth-last-child(-n+3){border-top:3px solid var(--acc)}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
th{font-size:.74rem;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;background:var(--acc-soft);font-weight:600}
tfoot td{font-weight:700;background:var(--acc-soft)}
.num{text-align:right;white-space:nowrap}
/* λήξεις: καθαρές γραμμές, χρώμα μόνο στο αριστερό περίγραμμα και στην «κάψουλα» */
tr.lv-late td:first-child{box-shadow:inset 4px 0 0 var(--c-late)}tr.lv-red td:first-child{box-shadow:inset 4px 0 0 var(--c-red)}
tr.lv-orange td:first-child{box-shadow:inset 4px 0 0 var(--c-orange)}tr.lv-yellow td:first-child{box-shadow:inset 4px 0 0 var(--c-soft)}
.card.lv-late{border-left:5px solid var(--c-late)}.card.lv-red{border-left:5px solid var(--c-red)}.card.lv-orange{border-left:5px solid var(--c-orange)}.card.lv-yellow{border-left:5px solid var(--c-soft)}
.card.lv-late b{color:var(--c-late)}.card.lv-red b{color:var(--c-red)}.card.lv-orange b{color:var(--c-orange)}.card.lv-yellow b{color:var(--c-soft)}
.pill{display:inline-block;padding:2px 12px;border-radius:99px;font-size:.82rem;font-weight:600;white-space:nowrap;background:var(--line);color:var(--mut)}
.pill.lv-late{background:var(--c-late);color:#fff}.pill.lv-red{background:var(--c-red);color:#fff}
.pill.lv-orange{background:var(--c-orange);color:#3b2a05}.pill.lv-yellow{background:var(--acc-soft);color:var(--link)}
tbody tr:hover{filter:brightness(.97)}
.bar{display:flex;gap:10px;margin:12px 0;flex-wrap:wrap;align-items:center}.bar form{display:flex;gap:8px;flex-wrap:wrap}
input,select,textarea{font:inherit;padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
button,.btn{font-size:.92rem;font-weight:600;padding:9px 20px;border:2px solid var(--acc);border-radius:99px;background:var(--acc);color:var(--on-acc);cursor:pointer;text-decoration:none;display:inline-block;transition:background .15s,border-color .15s}
button:hover,.btn:hover{background:var(--acc-d);border-color:var(--acc-d)}
.btn.ghost,button.ghost{background:transparent;color:var(--link)}
.btn.ghost:hover,button.ghost:hover{background:var(--acc-soft)}
.sm{padding:3px 13px;font-size:.82rem}
.danger{background:var(--danger);border-color:var(--danger);margin-top:16px}.danger:hover{background:#a52e22;border-color:#a52e22}
.inline{display:inline}.act{white-space:nowrap;text-align:right}
.form{display:grid;gap:13px;max-width:580px}.form label{display:grid;gap:5px;font-size:.88rem;color:var(--mut)}
.form input,.form select,.form textarea,.login input{width:100%}
.form .chk{display:flex;gap:8px;align-items:center}.form .chk input{width:auto}
.login label{display:grid;gap:5px;font-size:.88rem;color:var(--mut)}
tr.off{opacity:.55}
.tag{font-size:.72rem;background:var(--acc-soft);color:var(--link);padding:2px 10px;border-radius:99px;vertical-align:middle;font-weight:600}
.login{max-width:360px;margin:12vh auto;display:grid;gap:12px;border-top:4px solid var(--acc);border-radius:16px}
.login .brand{padding:0 0 6px}.login .brand img{height:38px}
.err{color:var(--danger)}
@media(max-width:700px){table{display:block;overflow-x:auto}header{padding:0 14px}}

/* κουμπί κατάστασης πελάτη: δείχνει την τρέχουσα κατάσταση, με κλικ αλλάζει */
.st{min-width:104px}
.st-on{background:var(--acc);border-color:var(--acc);color:#fff}
.st-off{background:transparent;border-color:var(--line);color:var(--mut)}
.st-off:hover{background:var(--line);border-color:var(--line);color:var(--fg)}