/* ══ fer_koino.css — ΚΟΙΝΗ ΟΨΗ ΤΩΝ ΟΘΟΝΩΝ ΤΗΣ ΠΛΑΤΦΟΡΜΑΣ ═══════════════════════ Tokens και στοιχεία από το εγκεκριμένο mockup (Όψη/shell.html, 27/10/2026). Οι οθόνες είναι web resources μέσα στην εφαρμογή «Πλατφόρμα»: το μενού είναι το sitemap, άρα εδώ ΜΟΝΟ περιεχόμενο σελίδας (τίτλος, κάρτες, λίστες, καρτέλες). Κανόνες (Κ11, ΔΙΕΠΑΦΗ 27/10/2026): • χρώματα και μεγέθη μόνο από τα tokens· κανένα style="" στις οθόνες • γράμματα 14px, ελάχιστο 12px· τίτλοι 24 → 16 → 14 → 12 • πράσινο μόνο στο κύριο κουμπί και στο ενεργό στοιχείο • κόκκινο (--alert) μόνο για ό,τι θέλει ενέργεια • WCAG 2.2 AA: αντίθεση ≥ 4,5:1, ορατή εστίαση, στόχοι 24px (44px στην αφή) Τα ονόματα κλάσεων είναι του mockup, ώστε η σήμανση να μεταφέρεται αυτούσια. ════════════════════════════════════════════════════════════════════════ */ :root{ --green:#083C20; --green-fg:#083C20; --on-green:#F5F3EE; --green-hover:#153E35; --green-tint:#E8EEE9; --green-mid:#2E5A41; --ink:#1C211D; --ink-soft:#33493C; --muted:#5E5D54; --stone:#CBC3BA; --paper:#F5F3EE; --surface:#FFFFFF; --line:#E2DCD1; --line-soft:#EDEAE1; --stone-tint:#EDEAE1; --control-border:#8C877B; /* 3,6:1 στο λευκό */ --row-hover:#F2EEE6; --row-active:#E8E3D8; --ok:#2E5A41; --ok-bg:#EDF2EE; --warn:#7A5C14; --warn-bg:#F6EFDF; --alert:#A23B33; --alert-bg:#F7EAE9; /* ΜΟΝΟ για ό,τι θέλει ενέργεια */ --info:#2C4F74; --info-bg:#E7EDF4; --neutral:#5E5D54; --neutral-bg:#EDEAE1; --viol:#4A3A8F; --viol-bg:#EEEBF6; --xsec-bg:#EFEADC; --xsec-fg:#4A4326; --xsec-line:#DED7C2; --bar:var(--info); /* ένα ουδέτερο χρώμα για κάθε μπάρα προόδου */ /* Κ9: η γραμματοσειρά του mockup θα έρθει ως τοπικό web resource· ως τότε η γραμματοσειρά της εφαρμογής (Segoe UI), καμία εξωτερική φόρτωση. */ --font:'Segoe UI','Segoe UI Web (West European)',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-28:1.75rem; --lh-text:1.5; --lh-num:1.25; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --gap-block:var(--sp-4); --page-pad:var(--sp-6); --r-sm:4px; --r-md:8px; } /* ── ΒΑΣΗ ── */ *,*::before,*::after{box-sizing:border-box} html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{margin:0;padding:0} body{font-family:var(--font);font-size:var(--fs-14);line-height:var(--lh-text);color:var(--ink); background:var(--paper);-webkit-font-smoothing:antialiased;overflow-wrap:break-word} b,strong{font-weight:600} a{color:var(--green-fg)} button,input,select,textarea{font:inherit} img,svg{max-width:100%} :focus-visible{outline:2px solid var(--green-fg);outline-offset:2px} h1[tabindex="-1"]:focus,[role="tabpanel"]:focus{outline:none} .vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} [hidden]{display:none!important} /* ── ΣΕΛΙΔΑ ── */ .page{padding:var(--sp-5) var(--page-pad) var(--sp-6);min-width:0} .page-h{display:flex;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap} .page-h > :first-child{min-width:0;flex:1 1 auto} .page-h .badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap} h1.page-title{font-size:var(--fs-24);font-weight:600;line-height:1.25;margin:0 0 var(--sp-1);letter-spacing:-.01em} .page-sub{color:var(--muted);margin:0 0 var(--sp-4)} h2.sec{font-size:var(--fs-16);font-weight:600;line-height:1.25;margin:var(--sp-6) 0 var(--sp-3)} h2.sec:first-child{margin-top:0} .crumb{font-size:var(--fs-13);color:var(--muted);margin-bottom:var(--sp-2)} .meta-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) 18px;font-size:var(--fs-13);color:var(--muted);margin:var(--sp-3) 0} .meta-line b{color:var(--ink)} .stack{display:grid;gap:var(--gap-block)} .page > section + section,.page > .card + .card{margin-top:var(--sp-5)} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-block)} .grid3{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--gap-block)} .g3e{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-block)} .num{text-align:right;font-variant-numeric:tabular-nums} .mono{font-variant-numeric:tabular-nums} .muted{color:var(--muted)} .late-1{color:var(--warn);font-weight:500} /* 30–90 ημέρες */ .late-2{color:var(--alert);font-weight:600} /* > 90 ημέρες: θέλει ενέργεια */ /* ── ΣΥΝΔΕΣΜΟΙ ── */ a.golink{color:var(--green-fg);font-weight:600;cursor:pointer;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--green-mid)} a.golink:hover{background:var(--green-tint);border-radius:3px;box-shadow:0 0 0 3px var(--green-tint)} .card-h .x a,.meta-line a,.nodata a,.ad a,td a{text-underline-offset:3px} a.tel{color:var(--green-fg);font-variant-numeric:tabular-nums;white-space:nowrap;text-underline-offset:3px} /* ── ΔΕΙΚΤΕΣ (το πολύ 4 ανά οθόνη) ── */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap-block)} .kpi{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-md);padding:var(--sp-4);color:var(--ink);text-decoration:none;position:relative} .kpi .label{font-size:var(--fs-12);font-weight:500;color:var(--muted);margin-bottom:var(--sp-1)} .kpi .value{font-size:clamp(20px,2.2vw,28px);font-weight:600;line-height:var(--lh-num);letter-spacing:-.01em;font-variant-numeric:tabular-nums} .kpi .value.sm{font-size:clamp(18px,1.6vw,20px)} .kpi .value .pc{font-size:var(--fs-13);font-weight:600;color:var(--muted);margin-left:6px} .kpi .delta{font-size:var(--fs-12);color:var(--muted);margin-top:var(--sp-1)} .kpi .delta.bad{color:var(--alert)} .kpi .rows{margin-top:var(--sp-2);display:flex;flex-direction:column} .kpi .r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:6px 0;border-top:1px solid var(--line-soft)} .kpi .r:first-child{border-top:0;padding-top:0} .kpi .r .k{font-size:var(--fs-12);color:var(--muted);min-width:0} .kpi .r .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:var(--lh-num)} .kpi .r .v .per{display:block;font-size:var(--fs-12);font-weight:400;color:var(--muted);margin-top:2px} .kpi .nodata{margin-top:var(--sp-2)} .kpi-row > .state,.kpi-row > .sk,.kpi-row > .nodata{grid-column:1/-1} /* κάρτα που ανοίγει τη λίστα της: */ .kpi-go{cursor:pointer;transition:border-color .12s,box-shadow .12s} .kpi-go::after{content:'→';position:absolute;top:var(--sp-3);right:var(--sp-3);font-size:var(--fs-13);color:var(--muted)} .kpi-go .label{padding-right:var(--sp-4)} .kpi-go:hover{border-color:var(--green-mid);box-shadow:0 2px 10px rgba(28,33,29,.08)} .kpi-go:hover::after{color:var(--green-fg)} /* ── ΚΑΡΤΕΣ ── */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;overflow:clip;min-width:0} .card-h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line)} .card-h .t,.card-h h2,.card-h h3{font-size:var(--fs-14);font-weight:600;line-height:1.4;margin:0} .card-h .x{margin-left:auto;font-size:var(--fs-12);color:var(--muted)} .card-b{padding:var(--sp-4)} .xsec{background:var(--xsec-bg);color:var(--xsec-fg);border-top:1px solid var(--xsec-line);border-bottom:1px solid var(--xsec-line); font-size:var(--fs-13);font-weight:600;line-height:1.3;margin:var(--sp-5) calc(-1 * var(--sp-4)) var(--sp-3);padding:var(--sp-2) var(--sp-4)} .xsec:first-child{margin-top:0} /* ── ΚΑΡΤΕΣ ΕΡΓΩΝ (Αρχική) ── */ .proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gap-block)} .proj{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); color:var(--ink);text-decoration:none;overflow:hidden;transition:border-color .12s,box-shadow .12s} .proj:hover{border-color:var(--stone);box-shadow:0 2px 10px rgba(28,33,29,.06)} .proj-h{padding:var(--sp-4) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--line)} .proj-top{display:flex;align-items:center;gap:var(--sp-2)} .proj-top .badge{margin-left:auto} .proj-code{font-size:var(--fs-12);font-weight:600;color:var(--muted);letter-spacing:.06em} .proj-name{font-size:var(--fs-16);font-weight:600;line-height:1.3;margin:2px 0} .proj-loc{font-size:var(--fs-13);color:var(--muted)} .proj-b{padding:var(--sp-3) var(--sp-4) var(--sp-4);display:grid;gap:var(--sp-3)} .metric{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:var(--sp-2);font-size:var(--fs-13)} .metric .m-l{color:var(--ink-soft)} .metric.bare{grid-template-columns:minmax(60px,1fr) auto;min-width:120px} .metric .m-v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right} /* μπάρα: — το πλάτος το βάζει το FER.ui.bars() */ .track{display:block;height:6px;background:var(--line);border-radius:3px;overflow:hidden} .track > span{display:block;height:100%;width:0;border-radius:3px;background:var(--bar)} .track > span.bad{background:var(--alert)} /* ── ΣΗΜΑΝΣΕΙΣ: μία λίστα καταστάσεων (FER.status) ── */ .badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-12);font-weight:500;line-height:1.5; padding:0 8px;border-radius:999px;white-space:nowrap;background:var(--neutral-bg);color:var(--neutral)} .b-ok{background:var(--ok-bg);color:var(--ok)} .b-warn{background:var(--warn-bg);color:var(--warn)} .b-alert{background:var(--alert-bg);color:var(--alert)} .b-info{background:var(--info-bg);color:var(--info)} .b-neutral{background:var(--neutral-bg);color:var(--neutral)} .b-viol{background:var(--viol-bg);color:var(--viol)} /* ── ΚΟΥΜΠΙΑ ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px; border:1px solid var(--control-border);border-radius:var(--r-sm);background:var(--surface);color:var(--ink); font-size:var(--fs-14);font-weight:500;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap} .btn:hover{background:var(--paper);border-color:var(--ink-soft)} .btn.sm{min-height:32px;padding:0 10px;font-size:var(--fs-13)} .btn.primary{background:var(--green);border-color:var(--green);color:var(--on-green)} .btn.primary:hover{background:var(--green-hover)} .btn[disabled]{opacity:.55;cursor:not-allowed} /* ── ΚΑΡΤΕΛΕΣ: role=tablist / role=tab με aria-selected (FER.ui.tabs) ── */ .tabs{display:flex;flex-wrap:nowrap;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;margin:var(--sp-5) 0 0; box-shadow:inset 0 -1px 0 var(--line)} .tabs::-webkit-scrollbar{display:none} .tab{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-3);font-size:var(--fs-14);font-weight:500; white-space:nowrap;color:var(--muted);background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;text-decoration:none} .tab:hover{color:var(--ink);border-bottom-color:var(--line)} .tab[aria-selected="true"],.tab[aria-current="page"]{color:var(--green-fg);border-bottom-color:var(--green-fg)} .tab:focus-visible,.subtab:focus-visible{outline:2px solid var(--green-fg);outline-offset:-2px} .tabs + *{margin-top:var(--sp-5)} .card > .tabs{margin:0;padding:0 var(--sp-2)} .card > .tabs + *{margin-top:0} .subtabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;margin:var(--sp-3) 0 0;max-width:100%; background:var(--stone-tint);border:1px solid var(--line);border-radius:var(--r-md)} .subtab{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-14);font-weight:500; white-space:nowrap;color:var(--ink-soft);background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer} .subtab:hover{color:var(--ink);background:var(--surface)} .subtab[aria-selected="true"]{color:var(--ink);background:var(--surface);border-color:var(--control-border);font-weight:600} .subtabs + *{margin-top:var(--sp-4)} /* ── ΦΙΛΤΡΑ ── */ .chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)} .chip{display:inline-flex;align-items:center;min-height:24px;font-size:var(--fs-12);font-weight:500;padding:2px 10px; border-radius:999px;border:1px solid var(--control-border);background:var(--surface);color:var(--ink-soft);cursor:pointer;white-space:nowrap} .chip[aria-pressed="true"]{background:var(--green);color:var(--on-green);border-color:var(--green)} /* ── «ΧΡΕΙΑΖΟΝΤΑΙ ΠΡΟΣΟΧΗ» ── */ .alerts{display:grid;gap:var(--sp-2)} .alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md); border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none} .alert .ai{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-12); font-weight:600;color:var(--surface);background:var(--info);flex:none;margin-top:1px} .alert.warn .ai{background:var(--warn)} .alert.crit .ai{background:var(--alert)} .alert .at{font-weight:600;margin-bottom:2px} .alert .ad{color:var(--ink-soft);font-size:var(--fs-13)} .alert .aa{margin-left:auto;font-size:var(--fs-13);font-weight:500;color:var(--green-fg);white-space:nowrap;align-self:center} a.alert:hover .aa{text-decoration:underline;text-underline-offset:3px} /* ── ΠΙΝΑΚΕΣ: πάντα μέσα σε .tbl-wrap (κυλά οριζόντια, ποτέ η σελίδα) ── */ .tbl-wrap{position:relative;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-14);line-height:1.45} table.tbl caption{text-align:left;padding:var(--sp-3) var(--sp-4);font-weight:600;border-bottom:1px solid var(--line)} table.tbl th{text-align:left;padding:10px 12px;font-size:var(--fs-12);font-weight:600;line-height:1.3;color:var(--muted); background:var(--surface);border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:bottom} table.tbl th.num{text-align:right} table.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle} table.tbl tbody th{text-align:left;padding:10px 12px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft);vertical-align:middle} table.tbl tbody tr:last-child :is(td,th){border-bottom:0} table.tbl tfoot td{font-weight:600;border-top:2px solid var(--line)} @media (hover:hover){ table.tbl tbody tr:hover :is(td,th){background:var(--row-hover)} } .tbl-wrap[tabindex]:focus-visible{outline:2px solid var(--green-fg);outline-offset:-2px} /* ── ΖΕΥΓΑΡΙΑ ΤΙΜΩΝ ── */ .kv{display:grid;grid-template-columns:minmax(calc(40% - 8px),1fr) minmax(0,max-content);gap:6px var(--sp-4);margin:0} .kv dt{color:var(--ink-soft);min-width:0} .kv dd{margin:0;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere} /* ── ΚΑΤΑΣΤΑΣΕΙΣ: φόρτωση · κενό · σφάλμα ── */ .nodata{color:var(--muted);padding:4px 0} .state{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);padding:var(--sp-4); border:1px dashed var(--control-border);border-radius:var(--r-md);background:var(--surface);color:var(--ink-soft)} .state-err{border-style:solid;border-color:var(--line);border-left:3px solid var(--warn)} .state .btn{margin-left:auto} .sk{display:grid;gap:var(--sp-2);padding:var(--sp-2) 0} .sk i{display:block;height:14px;border-radius:var(--r-sm); background:linear-gradient(90deg,var(--line-soft) 25%,var(--paper) 50%,var(--line-soft) 75%);background-size:200% 100%; animation:fer-sk 1.2s ease-in-out infinite} .sk i:nth-child(3n+2){width:80%} .sk i:nth-child(3n){width:60%} @keyframes fer-sk{0%{background-position:100% 0}100%{background-position:-100% 0}} [aria-busy="true"]{cursor:progress} /* ══ ΑΝΑΔΙΠΛΩΣΗ 1024 / 768 / 600 / 480 (320–1440 χωρίς οριζόντια κύλιση) ══ */ @media (max-width:1024px){ :root{--page-pad:var(--sp-5)} .grid3{grid-template-columns:minmax(0,1fr)} .kpi-row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .kpi-row:has(.rows){grid-template-columns:repeat(2,minmax(0,1fr))} .tbl-wrap > table.tbl:not(.tbl--cards) :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--surface)} } @media (max-width:768px){ :root{--page-pad:var(--sp-4)} .page{padding-top:var(--sp-4)} .grid2,.grid3,.g3e{grid-template-columns:minmax(0,1fr)} h1.page-title{font-size:var(--fs-20)} h2.sec{margin-top:var(--sp-5)} .proj-grid{grid-template-columns:minmax(0,1fr)} input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px} table.tbl.tbl--wide:not(.tbl--cards){min-width:640px} /* .tbl--cards: μία κάρτα ανά γραμμή· κάθε td χρειάζεται data-label */ table.tbl--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} table.tbl--cards,table.tbl--cards tbody{display:block;width:100%} table.tbl--cards tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-4); padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line)} table.tbl.tbl--cards tbody :is(td,th){display:block;min-width:0;padding:0;border:0;text-align:left;overflow-wrap:anywhere} table.tbl--cards :is(td,th):first-child,table.tbl--cards td.wide{grid-column:1/-1;font-weight:600} table.tbl--cards td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-12);font-weight:500;color:var(--muted)} table.tbl--cards :is(td,th):first-child::before{display:none} table.tbl--cards td:empty{display:none} } @media (max-width:600px){ .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} .kpi-row:has(.rows){grid-template-columns:minmax(0,1fr)} .kpi{padding:var(--sp-3)} .subtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .subtab{flex:none} .alert{flex-wrap:wrap} .alert .aa{margin-left:32px} } @media (max-width:360px){ .kpi-row{grid-template-columns:minmax(0,1fr)} .metric{grid-template-columns:80px minmax(0,1fr) auto} } @media (pointer:coarse){ .btn,.btn.sm,.tab,.subtab,.chip{min-height:44px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important} } @media print{ body{background:#fff;font-size:12px} .card,.kpi,.proj{break-inside:avoid;border-color:#bbb} .tbl-wrap{overflow:visible!important} .btn,.state .btn{display:none} } /* ── ΠΡΟΣΘΗΚΕΣ (Αρχική, 27/10/2026) ── */ /* θέση κάρτας δείκτη που φορτώνει μόνη της (FER.ui.load ανά κάρτα) */ .kpi-row > .kpi-slot{display:grid;min-width:0} /* γραμμή κόστους στο κάτω μέρος της κάρτας έργου */ .proj-f{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-12);color:var(--muted); border-top:1px solid var(--line);padding-top:var(--sp-2)} .proj-f b{color:var(--ink)} .proj-f .badge{margin-left:auto} /* ομάδα που ανοίγει (απόφαση 1 και 3):
……
*/ .grp{margin-top:var(--sp-4)} .grp > summary{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:36px;cursor:pointer;font-weight:600;color:var(--ink-soft);list-style:none} .grp > summary::-webkit-details-marker{display:none} .grp > summary::before{content:'▸';color:var(--muted)} .grp[open] > summary::before{content:'▾'} .grp > summary + *{margin-top:var(--sp-3)} @media (pointer:coarse){ .grp > summary{min-height:44px} } /* ── ΠΡΟΣΘΗΚΕΣ (Οικονομικά · Κατασκευή, 27/10/2026) ── */ /* κλίμακα μέσα σε ζεύγη τιμών:
εσοχή, υποσύνολο */ .kv dt.l1{padding-left:var(--sp-3)} .kv dt.l2{padding-left:var(--sp-5)} .kv dt.l3{padding-left:var(--sp-6)} .kv .sum{font-weight:600;color:var(--ink)} .grid2 > .kv{align-content:start} /* γραμμή πίνακα κάτω από ομάδα · μπάρα μέσα σε κελί */ table.tbl :is(td,th).l1{padding-left:28px} table.tbl td .track{min-width:80px} /* κουμπί που ανοίγει/κλείνει τις γραμμές μιας ομάδας: