/* ══════════════════════════════════════════════════════════════════════════
   B2B Portal — εμφάνιση.

   ΚΑΘΕ χρώμα είναι μεταβλητή, και καμία τιμή δεν γράφεται καρφωτά πιο κάτω.
   Αυτός είναι ο λόγος που το σκούρο θέμα είναι ένα μπλοκ τιμών και όχι
   ξαναγράψιμο του αρχείου: αλλάζουν μόνο οι τιμές, οι κανόνες μένουν ίδιοι.

   Το θέμα μπαίνει ως `data-theme="dark"` στο <html> από το κουμπί του μενού
   και θυμάται την επιλογή του χρήστη. Δες `src/views/layout.js`.

   Τρεις κανόνες που δεν σπάνε:
   1. Η σελίδα δεν κυλάει ΠΟΤΕ πλάγια. Ό,τι είναι φαρδύ (πίνακες) κυλά μέσα
      στο δικό του κουτί· κάθε μακρύ κείμενο χωρίς κενά σπάει στη γραμμή του.
   2. Κάθε κίνηση είναι μικρή (≤ 250ms) και σβήνει τελείως για όποιον έχει
      ζητήσει «λιγότερη κίνηση» από το σύστημά του.
   3. Καμία κλάση δεν ξέρει χρώμα — μόνο ονόματα μεταβλητών.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* επιφάνειες και κείμενο */
  --bg:#f4f5f9; --panel:#ffffff; --panel-2:#f8f9fc;
  --ink:#111827; --ink-2:#374151; --muted:#6b7280; --muted-soft:#9ca3af;
  --line:#e5e7ee; --line-strong:#d4d8e1;

  /* χρώματα σημασίας */
  --brand:#4f46e5; --brand-hover:#4338ca; --brand-ink:#ffffff;
  --brand-soft:#eef0fe; --brand-soft-ink:#3730a3;
  --ok:#047857; --warn:#b45309; --danger:#dc2626;

  /* πεδία και κουμπιά */
  --field-bg:#ffffff; --field-line:#d4d8e1; --field-hover:#aeb5c2; --focus:#c9ccfb;
  --disabled-bg:#f1f3f7;
  --btn-bg:#ffffff; --btn-line:#d4d8e1; --btn-hover:#f3f4f8;
  --danger-line:#f5c6c2; --danger-hover:#fef3f2;

  /* πίνακες και πλακίδια */
  --th-bg:#f8f9fc; --row-hover:#f5f5ff; --tile-line-hover:#c9ccfb;

  /* ενδείξεις κατάστασης */
  --pill-ok-bg:#e3f5ee; --pill-off-bg:#eff1f5;
  --pill-warn-bg:#fdf1de; --pill-warn-ink:#92400e; --pill-bad-bg:#fdecea;

  /* μηνύματα */
  --info-bg:#eef2ff; --info-ink:#3730a3; --info-line:#d5dafd;
  --warn-bg:#fff8eb; --warn-ink:#92400e; --warn-line:#f8e1b5;
  --error-bg:#fef2f2; --error-ink:#991b1b; --error-line:#f8cfcb;

  /* το πλαϊνό μενού: σκούρο και στα δύο θέματα, για να ξεχωρίζει από τη δουλειά */
  --side-bg:#111827; --side-ink:#cfd4dc; --side-muted:#6b7280; --side-line:#1f2937;
  --side-hover:#1c2433; --side-on:#262b5c; --side-on-ink:#ffffff; --side-accent:#a5b4fc;

  /* σκιές (μόνο διαφάνεια — το χρώμα τους δεν αλλάζει με το θέμα) */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -12px rgba(16,24,40,.14);
  --shadow-lg:0 2px 4px rgba(16,24,40,.06),0 18px 40px -16px rgba(16,24,40,.24);
  --scrim:rgba(10,14,22,.55);

  /* σχήμα και κίνηση */
  --radius:12px; --radius-md:10px; --radius-sm:8px;
  --side-w:252px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ─── Σκούρο θέμα: μόνο τιμές, κανένας νέος κανόνας ─────────────────────── */
:root[data-theme="dark"]{
  /* Λέει στον browser να ζωγραφίσει σκούρα και τα ΔΙΚΑ ΤΟΥ χειριστήρια —
     ημερολόγια, μπάρες κύλισης, λίστες επιλογής. Χωρίς αυτό, το ημερολόγιο
     των πεδίων ημερομηνίας ανοίγει κατάλευκο μέσα σε σκούρη σελίδα. */
  color-scheme: dark;

  --bg:#0b0f17; --panel:#121826; --panel-2:#161d2c;
  --ink:#e6e8ee; --ink-2:#c9cfda; --muted:#9aa3b2; --muted-soft:#6b7485;
  --line:#222a3a; --line-strong:#2f3849;

  --brand:#818cf8; --brand-hover:#a5b4fc; --brand-ink:#0b0f17;
  --brand-soft:#1e2250; --brand-soft-ink:#c7cbfb;
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171;

  --field-bg:#0e1420; --field-line:#2f3849; --field-hover:#46516a; --focus:#353a8a;
  --disabled-bg:#151b28;
  --btn-bg:#182032; --btn-line:#2f3849; --btn-hover:#202a3f;
  --danger-line:#5b2a2a; --danger-hover:#2a1618;

  --th-bg:#151c2a; --row-hover:#171f35; --tile-line-hover:#3b40a0;

  --pill-ok-bg:#0f2e24; --pill-off-bg:#1e2533;
  --pill-warn-bg:#33270d; --pill-warn-ink:#fbbf24; --pill-bad-bg:#3a1618;

  --info-bg:#151c3d; --info-ink:#c7cbfb; --info-line:#2c3470;
  --warn-bg:#2b2210; --warn-ink:#fcd34d; --warn-line:#4a3a17;
  --error-bg:#2c1515; --error-ink:#fca5a5; --error-line:#4f2323;

  --side-bg:#080b12; --side-ink:#c9cfda; --side-muted:#5d6678; --side-line:#141a26;
  --side-hover:#131a28; --side-on:#1e2250; --side-on-ink:#ffffff; --side-accent:#a5b4fc;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7);
}

/* ─── Βάση ──────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Κανόνας 1: ένα email ή ένα όνομα χωρίς κενά σπάει στη γραμμή του, δεν σπρώχνει τη σελίδα. */
  overflow-wrap:anywhere}
a{color:var(--brand);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--brand-hover);text-decoration:underline;text-underline-offset:3px}
img,svg{max-width:100%}
.icon{flex:none;display:block}
code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--panel-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}
strong{font-weight:650}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
::selection{background:var(--brand-soft);color:var(--brand-soft-ink)}

/* ─── Το σκαρί: πλαϊνό μενού + περιεχόμενο ──────────────────────────────── */

.sidebar{position:fixed;inset:0 auto 0 0;z-index:40;width:var(--side-w);display:flex;flex-direction:column;
  background:var(--side-bg);color:var(--side-ink);border-inline-end:1px solid var(--side-line)}
.main-col{margin-inline-start:var(--side-w);min-width:0;min-height:100vh;display:flex;flex-direction:column}

.sidebar-head{display:flex;align-items:center;gap:8px;padding:18px 16px 14px}
.logo{display:flex;align-items:center;gap:10px;min-width:0;color:inherit}
.logo:hover{text-decoration:none;color:inherit}
.logo-mark{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;
  background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-sm)}
.sidebar .logo-mark{background:var(--brand);color:var(--side-on-ink)}
:root[data-theme="dark"] .sidebar .logo-mark{color:var(--brand-ink)}
.logo-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.logo-text strong{color:var(--side-on-ink);font-size:15px;letter-spacing:-.01em}
.logo-text small{color:var(--side-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.side-nav{flex:1;overflow-y:auto;padding:6px 12px 16px;scrollbar-width:thin;scrollbar-color:var(--side-hover) transparent}
.nav-group{margin-top:14px}
.nav-title{display:block;padding:0 10px 6px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--side-muted)}
.nav-link{position:relative;display:flex;align-items:center;gap:11px;padding:8px 10px;margin:1px 0;
  border-radius:var(--radius-sm);color:var(--side-ink);font-size:14px;font-weight:500;
  transition:background .15s var(--ease),color .15s var(--ease)}
.nav-link .icon{opacity:.75;transition:transform .2s var(--ease),opacity .15s}
.nav-link:hover{background:var(--side-hover);color:var(--side-on-ink);text-decoration:none}
.nav-link:hover .icon{opacity:1;transform:translateX(2px)}
.nav-link.on{background:var(--side-on);color:var(--side-on-ink);font-weight:600}
.nav-link.on .icon{opacity:1;color:var(--side-accent)}
.nav-link.on::before{content:"";position:absolute;inset:8px auto 8px -12px;width:3px;border-radius:0 3px 3px 0;background:var(--side-accent)}
.nav-link span:not(.badge){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.badge{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;
  border-radius:999px;background:var(--danger);color:var(--brand-ink);font-size:11px;font-weight:700;line-height:1}
:root:not([data-theme="dark"]) .badge{color:var(--panel)}

.sidebar-foot{border-top:1px solid var(--side-line);padding:12px 12px 14px;display:flex;flex-direction:column;gap:10px}
.me{display:flex;align-items:center;gap:10px;min-width:0;padding:0 4px}
.avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--side-on);color:var(--side-accent);font-weight:700;font-size:14px}
.me-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.me-text strong{color:var(--side-on-ink);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-text small{color:var(--side-muted);font-size:12px}
.me-actions{display:flex;gap:4px}

/* Κουμπί-εικονίδιο: τετράγωνο, διάφανο, ίδιο σε μενού και μπάρα. */
.icon-btn{display:inline-grid;place-items:center;position:relative;width:38px;height:38px;min-height:0;padding:0;box-shadow:none;
  border:0;border-radius:var(--radius-sm);background:transparent;color:inherit;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}
.icon-btn:hover{background:var(--btn-hover);text-decoration:none;color:inherit}
.icon-btn:active{transform:scale(.94)}
.sidebar .icon-btn{color:var(--side-ink)}
.sidebar .icon-btn:hover{background:var(--side-hover);color:var(--side-on-ink)}
.me-actions .icon-btn{flex:1;height:34px}
.icon-btn .badge{position:absolute;top:2px;inset-inline-end:0;height:17px;min-width:17px;font-size:10px;padding:0 4px}

/* Ο διακόπτης θέματος δείχνει το ΘΕΜΑ ΣΤΟ ΟΠΟΙΟ ΠΑΣ, με CSS — σωστός από το πρώτο βάψιμο. */
.t-dark,.t-light{place-items:center}
.t-dark{display:inline-grid}
.t-light{display:none}
:root[data-theme="dark"] .t-light{display:inline-grid}
:root[data-theme="dark"] .t-dark{display:none}

.nav-close,.mobilebar,.nav-scrim{display:none}

/* ─── Σελίδα ────────────────────────────────────────────────────────────── */

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:36px 40px 80px}
.wrap.wide{max-width:1480px}

/* Κάθε σελίδα «ανεβαίνει» απαλά στη θέση της· τα πρώτα κομμάτια λίγο πιο νωρίς. */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wrap > *{animation:rise .32s var(--ease) both}
.wrap > *:nth-child(2){animation-delay:.03s}
.wrap > *:nth-child(3){animation-delay:.06s}
.wrap > *:nth-child(4){animation-delay:.09s}
.wrap > *:nth-child(n+5){animation-delay:.12s}

h1{font-size:28px;line-height:1.2;margin:0 0 8px;letter-spacing:-.025em;font-weight:700;color:var(--ink)}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  margin:34px 0 14px;font-weight:700}
.card > h2:first-child,.card > h1 + h2{margin-top:6px}
h3{font-size:15px;margin:22px 0 10px}
p{margin:0 0 12px}
.lede{color:var(--muted);margin:0 0 24px;max-width:72ch;font-size:15px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;margin-bottom:6px}
.page-head > div{min-width:0;flex:1 1 380px}
.page-head .lede{margin-bottom:14px}
.page-head > .btn,.page-head > a.btn{margin-bottom:14px;flex:none}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);max-width:680px;min-width:0}
.card + .card,.card + form,.form-actions + .card{margin-top:20px}
.card.narrow{max-width:440px;margin:56px auto}
.card.wide{max-width:960px}
.card > h1{font-size:22px}
.card > :last-child{margin-bottom:0}
ol,ul{padding-inline-start:22px;margin:0 0 12px}
li{margin:4px 0}

/* ─── Φόρμες ────────────────────────────────────────────────────────────── */

label{display:block;margin:0 0 18px;font-weight:600;font-size:13px;color:var(--ink-2)}
label small{font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=date],input[type=number],select,textarea{
  display:block;width:100%;max-width:100%;min-width:0;margin-top:6px;padding:10px 12px;min-height:42px;
  font:inherit;font-size:15px;font-weight:400;color:var(--ink);
  border:1px solid var(--field-line);border-radius:var(--radius-sm);background:var(--field-bg);
  box-shadow:var(--shadow-sm);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
/* Το <select> έχει φυσικό πλάτος όσο η μεγαλύτερη επιλογή του: χωρίς αυτό το όριο,
   ένα μακρύ όνομα προϊόντος «φούσκωνε» το πεδίο έξω από τη σελίδα. */
select{text-overflow:ellipsis;cursor:pointer}
textarea{min-height:96px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--field-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--focus)}
input::placeholder,textarea::placeholder{color:var(--muted-soft)}
input:disabled,select:disabled,textarea:disabled{background:var(--disabled-bg);color:var(--muted);
  border-color:var(--line);box-shadow:none;cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--brand);cursor:pointer}

/* Κουτάκια επιλογής: ολόκληρη η γραμμή είναι στόχος για το δάχτυλο, με την εξήγηση από κάτω. */
label.check{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:flex-start;font-weight:600;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);
  cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease)}
label.check:hover{border-color:var(--tile-line-hover);background:var(--panel-2)}
label.check:has(input:checked){border-color:var(--tile-line-hover)}
label.check small{flex-basis:100%;padding-inline-start:27px;color:var(--muted);font-weight:400;font-size:12.5px;line-height:1.5}

button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  padding:8px 16px;font:inherit;font-size:14px;font-weight:600;line-height:1.2;text-align:center;
  border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--ink);
  border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-sm);overflow-wrap:normal;
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .2s var(--ease),transform .15s var(--ease),color .15s}
button:hover,.btn:hover{background:var(--btn-hover);border-color:var(--field-hover);color:var(--ink);text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.primary,a.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.primary:hover,a.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-ink);
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--brand) 65%,transparent);transform:translateY(-1px)}
.primary:active{transform:translateY(0)}
.btn.small,button.small,.small.btn{min-height:32px;padding:5px 11px;font-size:12.5px;border-radius:7px}
small.small,p.small{font-size:12.5px}
.danger{color:var(--danger);border-color:var(--danger-line)}
.danger:hover{background:var(--danger-hover);border-color:var(--danger);color:var(--danger)}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}

/* Δύο στήλες σε φόρμες με πολλά πεδία — μία στήλη σε στενή οθόνη. */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.cols > *{min-width:0}
.cols .wide{grid-column:1 / -1}

/* ─── Φίλτρα: μια «εργαλειοθήκη» πάνω από τη λίστα ──────────────────────── */

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 20px;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.filters > *{margin:0}
.filters select,.filters input{width:auto;margin-top:0;flex:1 1 170px;min-width:0}
.filters input[type=search]{flex:2 1 240px}
.filters input[type=date]{flex:1 1 150px}
.filters button,.filters .btn{flex:none}
.card .filters{box-shadow:none;background:var(--panel-2)}

/* ─── Πίνακες ───────────────────────────────────────────────────────────── */
/*
   Πίνακες με πολλές στήλες κυλίονται οριζόντια μέσα στο δικό τους κουτί,
   ώστε η σελίδα να μην κυλάει ποτέ πλάγια. Δευτερεύουσες στήλες: .hide-sm.
*/
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.table-scroll table.grid{min-width:760px;border:0;border-radius:0;box-shadow:none}
.table-scroll.xl table.grid{min-width:1080px}
/* Πίνακες λίγων στηλών: κανένα ελάχιστο πλάτος — κυλούν μόνο αν πραγματικά δεν χωρούν. */
.table-scroll.plain table.grid{min-width:0}
.table-scroll.xl .grid th,.table-scroll.xl .grid td{padding:12px 12px}

table.grid{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.grid th,.grid td{padding:13px 16px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
.grid th{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  background:var(--th-bg);white-space:nowrap;overflow-wrap:normal}
.grid tr:last-child td{border-bottom:0}
.grid td{transition:background .12s var(--ease)}
/* Ένα όνομα χωρίς κενά σπάει μέσα στο κελί του — αλλά κάθε στήλη κειμένου κρατά ένα
   λογικό ελάχιστο πλάτος, ώστε οι ΚΑΝΟΝΙΚΕΣ λέξεις να μη σπάνε γράμμα-γράμμα. */
.table-scroll .grid td:not(.num):not(.actions){min-width:8rem}
.table-scroll .grid td:first-child:not(.num):not(.actions){min-width:11rem}

/* Ο φωτισμός της σειράς στο πέρασμα του ποντικιού: σε πίνακα έντεκα στηλών η
   δυσκολία είναι να μη χάσεις τη ΣΕΙΡΑ καθώς το μάτι ταξιδεύει ως την πληρωμή. */
.grid tbody tr:hover td{background:var(--row-hover)}

.grid .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal}
.grid code{font-size:12px}
.grid small{font-size:12px}
.grid .actions{text-align:end;white-space:nowrap}
.grid .actions form{display:inline}
.grid .actions > * + *{margin-inline-start:6px}

/* Γραμμές παραγγελίας/αγοράς: τα πεδία ζουν μέσα στα κελιά και δεν φουσκώνουν τη σειρά. */
.grid td input[type=text],.grid td input[type=number],.grid td select{margin-top:0;padding:6px 9px;min-height:36px;font-size:14px}
.grid td input.num{text-align:end;max-width:120px;margin-inline-start:auto}
.grid td select{min-width:180px;max-width:340px}
.grid td small{display:block;margin-top:3px}

/* ─── Ενδείξεις και μηνύματα ────────────────────────────────────────────── */

/* Τα pill μένουν στρογγυλά επίτηδες: το στρογγυλό διαβάζεται ως «κατάσταση», ενώ
   τα κουμπιά είναι τετράγωνα — αλλιώς ο χρήστης θα πήγαινε να τα πατήσει. Η τελεία
   μπροστά κάνει την κατάσταση αναγνωρίσιμη και χωρίς να διαβαστεί η λέξη. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.6;white-space:nowrap;overflow-wrap:normal;vertical-align:middle}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{background:var(--pill-ok-bg);color:var(--ok)}
.pill.off{background:var(--pill-off-bg);color:var(--muted)}
.pill.warn{background:var(--pill-warn-bg);color:var(--pill-warn-ink)}
.pill.bad{background:var(--pill-bad-bg);color:var(--danger)}

.alert{padding:12px 16px;border-radius:var(--radius-md);margin:0 0 20px;font-size:14px;
  box-shadow:inset 3px 0 0 currentColor}
.alert ul{margin:0;padding-inline-start:18px}
.alert.error{background:var(--error-bg);color:var(--error-ink);border:1px solid var(--error-line)}
.alert.info{background:var(--info-bg);color:var(--info-ink);border:1px solid var(--info-line)}
.alert.warn{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line)}
p.alert,div.alert{animation:rise .3s var(--ease) both}

.hint{color:var(--muted);font-size:13px;margin-top:16px;max-width:80ch}
/* «διαβάζεται ως 1.250,50» κάτω από τα πεδία ποσού */
.read-as{display:block;margin-top:4px;font-weight:500;font-size:12px;color:var(--brand);min-height:1em}
.read-as:empty{margin-top:0;min-height:0}
.empty{color:var(--muted);padding:44px 24px;text-align:center;background:var(--panel);
  border:1px dashed var(--line-strong);border-radius:var(--radius);margin:0}

/* ─── Πλακίδια ──────────────────────────────────────────────────────────── */

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:16px;margin:10px 0 0}
.tile{position:relative;display:block;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);color:var(--ink);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.tile .n{display:block;font-size:28px;line-height:1.25;font-weight:700;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .l{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.4}
.tile .l em{font-style:normal;color:var(--muted-soft)}
/* Μόνο τα πλακίδια που ΟΔΗΓΟΥΝ κάπου κινούνται — τα σκέτα νούμερα μένουν ακίνητα. */
a.tile::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
a.tile:hover{text-decoration:none;color:var(--ink);border-color:var(--tile-line-hover);
  transform:translateY(-2px);box-shadow:var(--shadow-lg)}
a.tile:hover::after{transform:scaleX(1)}
a.tile:hover .n{color:var(--brand)}
.tile.off{opacity:.6}

/* ─── Ειδοποιήσεις ──────────────────────────────────────────────────────── */

.alert-list{margin-bottom:22px}
.alert-row{margin-bottom:12px;max-width:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.alert-row:hover{border-color:var(--tile-line-hover);box-shadow:var(--shadow-lg)}
.alert-row.read{opacity:.7}
.alert-row p{margin:8px 0}
.alert-head{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.alert-row .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.alert-row .actions form{display:inline}

/* ─── Σελίδες χωρίς σύνδεση (είσοδος) ───────────────────────────────────── */

body.auth{min-height:100vh;
  background:radial-gradient(1200px 520px at 50% -140px,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%),var(--bg)}
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px}
.auth-logo{color:var(--ink);font-size:18px;margin-bottom:18px;animation:rise .3s var(--ease) both}
.auth-logo:hover{color:var(--ink)}
.auth-wrap .card.narrow{margin:0;width:100%;animation:rise .35s var(--ease) .04s both;box-shadow:var(--shadow-lg)}
.auth-wrap .card button.primary{width:100%}

/* ─── Τιμές με/χωρίς ΦΠΑ, συντελεστής, καθεστώς (`views/vat-ui.js`) ─────── */

[hidden]{display:none !important}

/* Ζεύγος τιμής: τίτλος σαν ετικέτα, από κάτω δύο πεδία δίπλα-δίπλα. Το πεδίο που
   συμπληρώνεται μόνο του έχει απαλό φόντο — φαίνεται ποιο γράψατε εσείς. */
.price-pair{margin:0 0 18px;min-width:0}
.pair-title{display:block;font-weight:600;font-size:13px;color:var(--ink-2)}
.pair-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.pair-field{margin:0;min-width:0}
.pair-label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.pair-field input{margin-top:4px}
input.derived{background:var(--panel-2);color:var(--ink-2)}
input.derived:focus{background:var(--field-bg);color:var(--ink)}
.pair-hint{display:block;margin-top:6px;font-weight:400;font-size:12.5px}

/* Μέσα σε γραμμή πίνακα: τα δύο πεδία το ένα κάτω από το άλλο, με μικρή ετικέτα μπροστά. */
.price-pair.compact{margin:0;min-width:190px}
.price-pair.compact .pair-fields{grid-template-columns:minmax(0,1fr);gap:4px;margin-top:0}
.price-pair.compact .pair-field{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.price-pair.compact .pair-label{font-size:11px;white-space:nowrap;letter-spacing:0}
.grid td .price-pair.compact input.num{margin:0;max-width:112px}

/* Συντελεστής: λίστα και, στο «Άλλος…», πεδίο με το % κολλημένο δεξιά. */
.vat-field{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.vat-field select{flex:1 1 150px;width:auto}
.vat-custom{position:relative;flex:0 1 130px;min-width:96px}
.vat-custom input{padding-inline-end:30px}
.vat-suffix{position:absolute;inset-inline-end:12px;top:calc(50% + 3px);transform:translateY(-50%);
  color:var(--muted);font-weight:600;pointer-events:none}
.vat-custom input:focus + .vat-suffix{color:var(--brand)}

.pill.info{background:var(--info-bg);color:var(--info-ink)}

/* Λογιστής: ανάλυση των «χωρίς ΦΠΑ» κάτω από το σύνολό τους, με εσοχή. */
.grid tr.sub-head td:first-child{font-weight:600;color:var(--ink-2)}
.grid tr.sub-row td:first-child{padding-inline-start:36px;color:var(--ink-2)}
.grid tr.sub-row td:first-child::before{content:"↳";margin-inline-end:8px;color:var(--muted-soft)}
/* Άθροισμα αναζήτησης κάτω από λίστα παραγγελιών/αγορών. */
.sum-card{margin-top:20px}
.sum-card .tiles{margin-bottom:0}

/* ─── Οθόνες μέχρι tablet: το μενού γίνεται συρτάρι ─────────────────────── */

@media (max-width:1023px){
  .main-col{margin-inline-start:0}
  .sidebar{transform:translateX(-100%);transition:transform .25s var(--ease),visibility 0s linear .25s;
    visibility:hidden;box-shadow:var(--shadow-lg);width:min(86vw,var(--side-w))}
  .nav-open .sidebar{transform:none;visibility:visible;transition:transform .25s var(--ease)}
  .nav-close{display:inline-grid;margin-inline-start:auto}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:30;background:var(--scrim);opacity:0;pointer-events:none;
    transition:opacity .25s var(--ease)}
  .nav-open .nav-scrim{opacity:1;pointer-events:auto}
  .nav-open body{overflow:hidden}

  .mobilebar{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:20;height:58px;padding:0 10px;
    background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);
    -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
  .mobilebar .logo{color:var(--ink);font-size:15px;gap:8px;min-width:0}
  .mobilebar .logo-mark{width:30px;height:30px;border-radius:8px}
  .mobilebar .bell{margin-inline-start:auto;color:var(--ink)}
  .wrap{padding:28px 24px 64px}
}

@media (max-width:700px){
  .wrap{padding:22px 16px 56px}
  h1{font-size:23px}
  .card{padding:20px 18px}
  .card.narrow{margin:24px auto}
  .grid th,.grid td{padding:10px 12px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .filters{padding:10px}
  .filters select,.filters input,.filters input[type=search]{flex:1 1 100%}
  .filters button,.filters .btn{flex:1 1 auto}
  .hide-sm{display:none}
  .table-scroll table.grid,.table-scroll.xl table.grid{min-width:540px}
  .table-scroll.plain table.grid{min-width:0}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tile{padding:14px 16px}
  .tile .n{font-size:22px}
  .page-head > .btn,.page-head > a.btn{width:100%}
  .form-actions > *{flex:1 1 auto}
  .vat-custom{flex:1 1 100%}
  .grid tr.sub-row td:first-child{padding-inline-start:20px}
}

@media (max-width:380px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .grid td select{min-width:140px}
  /* Στα πολύ μικρά κινητά οι μικροί πίνακες (π.χ. «Ο λογιστής βλέπει») χωρούν με στενότερα κελιά. */
  .grid th,.grid td{padding:9px 8px}
  .grid th{letter-spacing:.02em}
  .grid .num{white-space:normal}
  .pair-fields{grid-template-columns:minmax(0,1fr)}
}

/* ─── Λιγότερη κίνηση, όταν το ζητά το σύστημα ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ─── Αρχική: γρήγορες ενέργειες ────────────────────────────────────────── */
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 8px}
@media (max-width:700px){ .quick-actions > .btn{flex:1 1 calc(50% - 5px)} }