/* ══ fer_web.css — ΤΟ ΚΕΛΥΦΟΣ ΤΟΥ MOCKUP ΓΙΑ ΤΗΝ ΠΛΑΤΦΟΡΜΑ ΕΚΤΟΣ POWER APPS ══════════════════
   Μόνο το κέλυφος (web/index.html): πράσινη αριστερή στήλη με λευκό λογότυπο, λευκή μπάρα πάνω,
   συρτάρι ≤ 1024px. Από το εγκεκριμένο mockup (Όψη/shell.html: .sidebar/.brand/.navsec/.navitem/
   .topbar/.burger/.drawer). Όλα τα ονόματα αρχίζουν από «sh-»· το περιεχόμενο των σελίδων μένει
   στο fer_koino.css, αυτούσιο. Tokens από το fer_koino.css. Ελάχιστο κείμενο 12px.
   ════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --sh-side-w:232px; --sh-top-h:56px;
  --sh-brand:var(--green); --sh-ink:#E9E5DC; --sh-dim:rgba(233,229,220,.78);
}

/* «Μετάβαση στο περιεχόμενο» (mockup .skip-link) */
.skip-link{position:fixed;left:8px;top:8px;z-index:1000;background:var(--surface);color:var(--green-fg);
  padding:8px 16px;border-radius:var(--r-sm);font-weight:600;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.skip-link:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%);box-shadow:none}

/* ══ ΔΙΑΤΑΞΗ: στήλη 232px + περιεχόμενο ══ */
.sh{display:grid;grid-template-columns:var(--sh-side-w) minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh;
  background:linear-gradient(to right,var(--sh-brand) 0 var(--sh-side-w),var(--paper) var(--sh-side-w) 100%)}
.sh-top{grid-column:2;grid-row:1;position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--sp-3);
  height:var(--sh-top-h);padding:0 var(--page-pad);background:var(--surface);border-bottom:1px solid var(--line)}
.sh-side{grid-column:1;grid-row:1 / span 2;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  background:var(--sh-brand);color:var(--sh-ink);padding:0 0 var(--sp-6);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sh-main{grid-column:2;grid-row:2;min-width:0}
main.page:focus{outline:none}
main [id]{scroll-margin-top:calc(var(--sh-top-h) + var(--sp-3))}

/* λογότυπο (λευκό, fer_logo_lefko.svg) + tagline */
.sh-brand{display:block;padding:16px 16px 0;line-height:0}
.sh-brand img{display:block;width:156px;max-width:100%;height:auto}
.sh-tag{margin:8px 0 0;padding:0 16px 12px;font-size:var(--fs-12);font-style:italic;letter-spacing:.02em;color:var(--sh-dim);
  border-bottom:1px solid rgba(232,239,234,.16)}

/* μενού: τίτλοι ενοτήτων 12px κεφαλαία · επιλογές 13px · ενεργή με λευκή γραμμή αριστερά */
.sh-sec{margin:0;padding:12px 16px 2px;font-size:var(--fs-12);font-weight:600;line-height:1.4;text-transform:uppercase;
  letter-spacing:.08em;color:var(--sh-dim)}
.sh-side ul{list-style:none;margin:0;padding:0}
.sh-it{display:flex;align-items:center;gap:10px;min-height:34px;padding:7px 16px;border-left:2px solid transparent;
  font-size:var(--fs-13);line-height:1.35;color:var(--sh-ink);text-decoration:none;transition:background .12s,color .12s}
.sh-it .ico{flex:none;opacity:.9}
.sh-it:hover{background:rgba(255,255,255,.07);color:#fff}
.sh-it.on{background:rgba(255,255,255,.13);color:#fff;font-weight:600;border-left-color:#fff}
.sh-side :focus-visible{outline:2px solid var(--on-green);outline-offset:-2px}
@media (min-width:1025px) and (pointer:fine){ .sh-it{min-height:30px;padding:5px 16px} .sh-it.sub{padding-left:32px} }
/* «Έργα n ▸» — ομάδα που ανοιγοκλείνει (mockup .navsec-tog/.navgrp/.navgroup-toggle) */
.sh-tog{display:flex;align-items:center;gap:var(--sp-2);width:100%;border:0;background:none;cursor:pointer;font:inherit;
  font-size:var(--fs-12);font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.08em;color:var(--sh-dim);text-align:left}
.sh-tog:hover,.sh-tog[aria-expanded="true"]{color:#fff}
.sh-tog .nst-n{font-weight:500;letter-spacing:0;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.16);color:#EEF3EF}
.sh-tog .nst-n:empty{display:none}
.sh-tog .ic{margin-left:auto;width:16px;text-align:center;letter-spacing:0}
.sh-it.sub{padding-left:32px}
.sh-it.sub .ic{width:16px;flex:none;text-align:center;opacity:.9}
.sh-tog2{width:100%;border:0;border-left:2px solid transparent;background:none;cursor:pointer;font:inherit;font-size:var(--fs-13);
  text-align:left;color:rgba(233,229,220,.86);font-weight:500}
.sh-tog2:hover,.sh-tog2[aria-expanded="true"]{color:#fff}
.sh-grp:not(.open) > li:not(.on){display:none}
.sh-grp:not(.done-open) > li[data-ingroup="done"]:not(.on){display:none}


/* μπάρα (mockup .topbar): [μενού ≤1024] αναζήτηση · κενό · [εικονίδιο αναζήτησης ≤1024] · Θέμα · + Νέο · αρχικά */
.sh-srch{flex:1;max-width:440px;min-width:0;display:flex}
.sh-sp{flex:1}
.search{flex:1;width:100%;max-width:440px;height:36px;padding:0 12px;border:1px solid var(--control-border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-14)}
.search::placeholder{color:var(--muted);opacity:1}
.search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sh-dsrch{display:none;padding:var(--sp-2) var(--sp-4) var(--sp-3)}
.sh-srch-btn{display:none;flex:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:none;
  border:1px solid var(--control-border);border-radius:var(--r-sm);color:var(--ink);cursor:pointer}
.sh-srch-btn svg{display:block}
.sh-top .btn{flex:none}
#fer-new{text-decoration:none}
.sh-acc{position:relative;flex:none}
.sh-av{width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--green);color:var(--on-green);cursor:pointer;
  display:grid;place-items:center;font:inherit;font-size:var(--fs-12);font-weight:600}
.sh-acc-p{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:max-content;min-width:220px;max-width:min(320px,calc(100vw - 32px));
  padding:var(--sp-3) var(--sp-4);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(0,0,0,.14)}
.sh-acc-p p{margin:0 0 var(--sp-1);overflow-wrap:anywhere}
.sh-acc-n{font-weight:600}
.sh-acc-e,.sh-acc-ro{font-size:var(--fs-13);color:var(--muted)}
.sh-acc-ro{margin-bottom:var(--sp-3)!important}
.sh-auth{padding:var(--sp-4) var(--page-pad) 0}
.sh-auth .state{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
/* σήματα του μενού (mockup .navitem .badge) — μηδέν → κενό */
.sh-badge{margin-left:auto;font-size:var(--fs-12);font-weight:500;line-height:1.5;padding:0 8px;background:rgba(255,255,255,.16);
  color:#EEF3EF;border-radius:999px}
.sh-badge:empty{display:none}
/* λίστα αποτελεσμάτων της αναζήτησης (mockup .srch-*) */
.srch-pop{position:fixed;z-index:80;overflow-y:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.14);padding:var(--sp-1) 0;color:var(--ink)}
.srch-pop[hidden]{display:none}
.srch-grp + .srch-grp{border-top:1px solid var(--line-soft)}
.srch-gh{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:var(--fs-12);font-weight:600;color:var(--muted)}
.srch-gh span{font-weight:400}
.srch-opt{display:flex;flex-direction:column;gap:1px;padding:6px var(--sp-3);min-height:36px;justify-content:center;cursor:pointer}
.srch-opt:hover,.srch-opt.on{background:var(--green-tint)}
.srch-l{font-size:var(--fs-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-s{font-size:var(--fs-12);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-all .srch-l{font-size:var(--fs-13);color:var(--green-fg);font-weight:600}
.srch-none{padding:var(--sp-3);font-size:var(--fs-14);color:var(--muted)}

/* κουμπί μενού (mockup .burger) */
.sh-burger{display:none;flex:none;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:40px;height:40px;
  padding:0;background:none;border:1px solid var(--control-border);border-radius:var(--r-sm);cursor:pointer}
.sh-burger span{display:block;width:18px;height:2px;border-radius:1px;background:var(--ink);transition:transform .15s,opacity .15s}
.sh-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.sh-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sh-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.sh-scrim{display:none}

/* ══ ≤ 1024: κουμπί μενού + συρτάρι πάνω από τη σελίδα, κάτω από τη μπάρα (mockup .drawer) ══ */
@media (max-width:1024px){
  .sh{grid-template-columns:minmax(0,1fr);background:var(--paper)}
  .sh-top{grid-column:1}
  .sh-main{grid-column:1}
  .sh-burger{display:inline-flex}
  .sh-side{position:fixed;top:var(--sh-top-h);left:0;bottom:0;z-index:60;width:min(320px,88vw);height:auto;align-self:stretch;
    overscroll-behavior:contain;padding:var(--sp-2) 0 var(--sp-5);
    transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .sh-side.open{transform:none;visibility:visible;transition:transform .2s ease;box-shadow:4px 0 24px rgba(0,0,0,.25)}
  .sh-brand,.sh-tag{display:none}
  .sh-srch{display:none}
  .sh-srch-btn{display:inline-flex}
  .sh-dsrch{display:block}
  .sh-dsrch .search{max-width:none;height:44px}
  .sh-it{min-height:44px;padding:10px var(--sp-4);font-size:var(--fs-14)}
  .sh-it.sub{padding-left:var(--sp-6)}
  .sh-sec{padding:var(--sp-4) var(--sp-4) var(--sp-1)}
  .sh-scrim.on{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--sh-top-h);z-index:55;background:rgba(10,18,13,.45)}
  html.sh-open{overflow:hidden}
}
@media (max-width:480px){ .sh-top{gap:var(--sp-2)} }
@media (pointer:coarse){ .sh-burger,.sh-srch-btn{width:44px;height:44px} .sh-tog{min-height:44px} .sh-av{width:44px;height:44px} }
@media (prefers-reduced-motion:reduce){ .sh-side,.sh-burger span{transition:none!important} }
@media print{
  .sh{display:block;background:none}
  .sh-top,.sh-side,.sh-scrim,.skip-link,.sh-auth,.srch-pop{display:none!important}
}

/* ══ «Θέμα»: ΣΚΟΥΡΟ (mockup Όψη/shell.html :root[data-theme="dark"]) ═════════════════════════════════════════
   Τα ίδια tokens που χρησιμοποιούν οι σελίδες (fer_koino.css), με τις τιμές του σκούρου θέματος του mockup.
   Οι σελίδες δεν αλλάζουν: όλα τα χρώματά τους είναι tokens. Το --heat-* (πίνακες-μήτρες) δεν υπάρχει στο mockup:
   τέσσερις σκούρες αποχρώσεις του μπλε με το ίδιο ανοιχτό κείμενο. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --green:#0B4A29; --green-fg:#7FBF97; --on-green:#EAF2EC;
  --green-hover:#15653A; --green-tint:#17251C; --green-mid:#6FAE87;
  --ink:#EEF2EF; --ink-soft:#B4BCB6; --muted:#9AA39C; --stone:#4A544D;
  --paper:#0D120F; --surface:#151C17; --line:#26302A; --line-soft:#202A24; --stone-tint:#1B231D;
  --control-border:#6F7B73;
  --row-hover:#1C251F; --row-active:#243029;
  --xsec-bg:#3A382C; --xsec-fg:#E6E0CE; --xsec-line:#4A4839;
  --ok:#6FBE8A; --ok-bg:#16281C; --warn:#D9AC55; --warn-bg:#2A2314;
  --alert:#E0837A; --alert-bg:#2B1917; --info:#8AB0D6; --info-bg:#16212B;
  --neutral:#9AA39C; --neutral-bg:#1E2620; --viol:#A79EF0; --viol-bg:#221E33;
  --heat-1:#17202A; --heat-2:#1D2935; --heat-3:#243341; --heat-4:#2C3E4F;
  --sh-brand:#052914;
}
:root[data-theme="dark"] .alert .ai{color:var(--paper)}   /* mockup */
/* «Νέα εγγραφή» (fer_neo.html — mockup extras.js:renderForms) */
.neo-g{margin-bottom:6px}
.neo-gh{margin:0;font-size:var(--fs-12);letter-spacing:1.3px;font-weight:700;color:var(--muted);text-transform:none;border-top:1px solid var(--line);padding:13px 0 9px}
.neo-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:9px;max-width:1150px}
@media (max-width:600px){ .neo-l{grid-template-columns:minmax(0,1fr)} }
.neo-c{display:flex;gap:11px;align-items:flex-start;padding:var(--sp-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);text-decoration:none;color:var(--ink);min-width:0}
.neo-c:hover{border-color:var(--green-mid)}
.neo-c b{display:block;font-size:var(--fs-14);color:var(--green-fg)}
.neo-ic{flex:none;margin-top:2px}
.neo-s{display:block;font-size:var(--fs-12);color:var(--muted)}