/* ============================================================
   styles.css — Διαχείριση Erasmus+
   Χωρίς εξωτερικά fonts ή βιβλιοθήκες, δουλεύει offline.
   ============================================================ */

:root {
  --bg: #f6f5f3;
  --surface: #ffffff;
  --surface-2: #faf9f7;
  --border: #e3e0da;
  --border-strong: #cdc8bf;
  --text: #1f1d1a;
  --text-2: #5c574f;
  --text-3: #8a847a;

  --a1: #9b3f1f;  --a1-bg: #fbeee8;  --a1-soft: #f2c9b7;
  --a2: #4a44ad;  --a2-bg: #eeedfd;  --a2-soft: #c9c6f2;
  --a3: #0f6b55;  --a3-bg: #e3f4ee;  --a3-soft: #a6e0cc;
  --a4: #8a5a00;  --a4-bg: #fdf2dc;  --a4-soft: #f0d19a;
  --a5: #1d5f8a;  --a5-bg: #e6f1f8;  --a5-soft: #a9cfe6;
  --a6: #7a3070;  --a6-bg: #f9eaf6;  --a6-soft: #e5bcdd;
  --a7: #4d6320;  --a7-bg: #eef4e0;  --a7-soft: #c8dc9c;
  --a8: #5a4a42;  --a8-bg: #f2efec;  --a8-soft: #d4c9c0;

  --done: #14804a;   --done-bg: #dff3e7;
  --doing: #b06f00;  --doing-bg: #fdf0d6;
  --danger: #b3261e; --danger-bg: #fbeae8;
  --warn: #8a5a00; --warn-bg: #fdf0d6;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Ώστε τα πεδία ημερομηνίας, οι μπάρες κύλισης και τα μενού του browser
     να ακολουθούν το θέμα και να μη μένουν σκούρα μέσα σε ανοιχτή σελίδα. */
  color-scheme: light;
}

/* Το θέμα το διαλέγει ο χρήστης με το κουμπί στην κορυφή. Το data-theme
   μπαίνει στο <html> από μικρό script μέσα στο index.html, πριν ζωγραφιστεί
   η σελίδα, ώστε να μην τρεμοπαίζει. Προεπιλογή: ανοιχτό. */
:root[data-theme="dark"] {
    --bg: #16150f;
    --surface: #1f1e17;
    --surface-2: #27251d;
    --border: #35322a;
    --border-strong: #4a463c;
    --text: #f0ede6;
    --text-2: #b8b2a6;
    --text-3: #8a8478;

    --a1: #f0997b;  --a1-bg: #3a1a0c;  --a1-soft: #7a3418;
    --a2: #afa9ec;  --a2-bg: #201c4a;  --a2-soft: #3c3489;
    --a3: #5dcaa5;  --a3-bg: #06342a;  --a3-soft: #0d5c49;
    --a4: #e8b45c;  --a4-bg: #3a2a06;  --a4-soft: #6b4d10;
    --a5: #7fb8db;  --a5-bg: #0c2635;  --a5-soft: #1c4a68;
    --a6: #d99ccd;  --a6-bg: #331028;  --a6-soft: #5e2352;
    --a7: #a8c46b;  --a7-bg: #22300c;  --a7-soft: #40561a;
    --a8: #c4b3a8;  --a8-bg: #2b2521;  --a8-soft: #4d423a;

    --done: #6bd39b;   --done-bg: #0d3a24;
    --doing: #e8b45c;  --doing-bg: #3d2c08;
    --danger: #f2938c; --danger-bg: #3d1512;
    --warn: #e6b661; --warn-bg: #3a2c0d;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);

    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Ό,τι έχει hidden ΠΡΕΠΕΙ να εξαφανίζεται, ακόμη κι αν παρακάτω του δίνουμε
   display. Χωρίς αυτό, ένα κρυμμένο στοιχείο με display:grid ή flex παραμένει
   ορατό και μπορεί να σκεπάσει όλη τη σελίδα. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0 0 10px; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ============================================================
   Οθόνη εισόδου
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: grid; place-items: center;
  padding: 24px;
  overflow-y: auto;
}
/* ΚΡΙΣΙΜΟ: το display:grid πιο πάνω υπερισχύει του hidden, γιατί οι κανόνες
   του αρχείου νικούν τον προεπιλεγμένο κανόνα [hidden]{display:none} του browser.
   Χωρίς αυτή τη γραμμή, η κρυμμένη οθόνη εισόδου μένει ως μπεζ πέπλο πάνω
   από όλη την εφαρμογή και δεν φαίνεται τίποτα. */
.gate[hidden] { display: none; }
.gate-box {
  width: min(430px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 28px 26px;
}
.gate-box h1 { font-size: 20px; margin-bottom: 6px; }
/* Το λογότυπο είναι ήδη κομμένο σε κύκλο με διαφάνεια, οπότε κάθεται
   σωστά και στο ανοιχτό και στο σκούρο θέμα, χωρίς λευκό πλαίσιο. */
.gate-logo { display: block; width: 92px; height: 92px; margin: 0 auto 14px; }
.gate-lead { color: var(--text-2); font-size: 14px; margin-bottom: 18px; }
.gate-warn {
  background: var(--doing-bg); border: 1px solid var(--doing); color: var(--doing);
  border-radius: 8px; padding: 10px 13px; font-size: 12.5px; line-height: 1.5; margin: 4px 0 14px;
}
.gate-err {
  background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger);
  border-radius: 8px; padding: 8px 13px; font-size: 13px; margin-bottom: 12px;
}
.gate-btn { width: 100%; padding: 10px; font-size: 15px; }
.gate-alt { width: 100%; margin-top: 8px; font-size: 12px; }
.gate-mode {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 10px; border-radius: 999px; margin-bottom: 12px;
}
.gate-mode.srv { background: var(--a3-bg); color: var(--a3); border: 1px solid var(--a3-soft); }
.gate-mode.loc { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border-strong); }

.modebadge {
  font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border-strong);
}
.modebadge.srv { background: var(--a3-bg); color: var(--a3); border-color: var(--a3-soft); }
.modebadge.srv.off { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
/* Άνοιγμα με διπλό κλικ στο αρχείο: τα δεδομένα ΔΕΝ πάνε στην κοινή βάση. */
.modebadge.loc.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }

.strength { font-size: 12px; margin: -6px 0 12px; color: var(--text-3); min-height: 18px; }
.strength.s0, .strength.s1 { color: var(--danger); }
.strength.s2, .strength.s3 { color: var(--doing); }
.strength.s4, .strength.s5 { color: var(--done); }

/* ============================================================
   Header
   ============================================================ */
.top { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); }
.top-in { max-width: 1560px; margin: 0 auto; padding: 12px 20px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; margin-inline-end: auto; }
.brand-logo { width: 34px; height: 34px; flex: none; }
.brand h1 { font-size: 17px; letter-spacing: -.01em; }
.brand .sub { font-size: 12px; color: var(--text-3); }

.overdue {
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}

.countdown {
  display: flex; align-items: center; gap: 8px;
  background: var(--a2-bg); color: var(--a2); border: 1px solid var(--a2-soft);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600;
}
.countdown .num { font-size: 18px; font-variant-numeric: tabular-nums; }
.countdown.urgent { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

.saveState { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.saveState .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--done); }
.saveState.fail { color: var(--danger); }
.saveState.fail .dot { background: var(--danger); }

.tabs {
  display: flex; gap: 2px; max-width: 1560px; margin: 0 auto;
  padding: 10px 20px 0; flex-wrap: wrap;
}
.tab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 14px 10px; cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--text-2); border-radius: 6px 6px 0 0; white-space: nowrap;
}
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }

/* Κάθε κατηγορία κρατάει το χρώμα της και στην καρτέλα. */
.tab.a1 { color: var(--a1); } .tab.a1[aria-selected="true"] { color: var(--a1); border-bottom-color: var(--a1); background: var(--a1-bg); }
.tab.a2 { color: var(--a2); } .tab.a2[aria-selected="true"] { color: var(--a2); border-bottom-color: var(--a2); background: var(--a2-bg); }
.tab.a3 { color: var(--a3); } .tab.a3[aria-selected="true"] { color: var(--a3); border-bottom-color: var(--a3); background: var(--a3-bg); }
.tab.a4 { color: var(--a4); } .tab.a4[aria-selected="true"] { color: var(--a4); border-bottom-color: var(--a4); background: var(--a4-bg); }
.tab.a5 { color: var(--a5); } .tab.a5[aria-selected="true"] { color: var(--a5); border-bottom-color: var(--a5); background: var(--a5-bg); }
.tab.a6 { color: var(--a6); } .tab.a6[aria-selected="true"] { color: var(--a6); border-bottom-color: var(--a6); background: var(--a6-bg); }
.tab.a7 { color: var(--a7); } .tab.a7[aria-selected="true"] { color: var(--a7); border-bottom-color: var(--a7); background: var(--a7-bg); }
.tab.a8 { color: var(--a8); } .tab.a8[aria-selected="true"] { color: var(--a8); border-bottom-color: var(--a8); background: var(--a8-bg); }

/* ---------- λωρίδα κατηγορίας ---------- */
.axhead {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--border); border-left: 5px solid var(--text-3);
  border-radius: var(--radius); background: var(--surface);
  padding: 14px 18px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.axhead-main { flex: 1; min-width: 240px; }
.axhead-t { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.axhead-sub { font-size: 12.5px; color: var(--text-2); }
.axhead-sub .od { color: var(--danger); }
.axhead-sub .sn { color: var(--doing); }
.axhead-bar { margin-top: 9px; max-width: 460px; }
.axhead-pct { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.axhead-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.axhead.a1 { border-left-color: var(--a1); } .axhead.a1 .axhead-t, .axhead.a1 .axhead-pct { color: var(--a1); }
.axhead.a2 { border-left-color: var(--a2); } .axhead.a2 .axhead-t, .axhead.a2 .axhead-pct { color: var(--a2); }
.axhead.a3 { border-left-color: var(--a3); } .axhead.a3 .axhead-t, .axhead.a3 .axhead-pct { color: var(--a3); }
.axhead.a4 { border-left-color: var(--a4); } .axhead.a4 .axhead-t, .axhead.a4 .axhead-pct { color: var(--a4); }
.axhead.a5 { border-left-color: var(--a5); } .axhead.a5 .axhead-t, .axhead.a5 .axhead-pct { color: var(--a5); }
.axhead.a6 { border-left-color: var(--a6); } .axhead.a6 .axhead-t, .axhead.a6 .axhead-pct { color: var(--a6); }
.axhead.a7 { border-left-color: var(--a7); } .axhead.a7 .axhead-t, .axhead.a7 .axhead-pct { color: var(--a7); }
.axhead.a8 { border-left-color: var(--a8); } .axhead.a8 .axhead-t, .axhead.a8 .axhead-pct { color: var(--a8); }

/* Κουμπί «Άνοιγμα» μέσα στο δέντρο. */
.gobtn {
  appearance: none; border: 1px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 2px 10px; border-radius: 999px; cursor: pointer; opacity: .55; white-space: nowrap;
}
.node:hover .gobtn { opacity: 1; }
.gobtn:hover { background: var(--surface); }

/* ============================================================
   Layout
   ============================================================ */
main { max-width: 1560px; margin: 0 auto; padding: 22px 20px 90px; }
.view[hidden] { display: none; }
.view-head { margin-bottom: 18px; }
.view-head h2 { font-size: 20px; margin-bottom: 4px; }
.view-head .lead { color: var(--text-2); font-size: 14px; max-width: 78ch; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; margin-bottom: 16px;
}
.card > h3 { font-size: 15px; margin-bottom: 10px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--text-3); font-size: 13px; }

.btn {
  appearance: none; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 6px 13px; font-size: 13px; font-weight: 500;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--text); color: var(--surface); border-color: var(--text); }
.btn.primary:hover { opacity: .88; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.iconbtn {
  display: inline-grid; place-items: center;
  width: 34px; height: 30px; padding: 0; color: var(--text-2);
}
.btn.iconbtn:hover { color: var(--text); }

input[type="text"], input[type="password"], input[type="date"], textarea, select {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 6px 10px; font-size: 14px; width: 100%;
}
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--a2); outline-offset: -1px; }
label.field { display: block; margin-bottom: 10px; }
label.field > span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 3px; font-weight: 500; }

/* ============================================================
   Πρόοδος και άξονες
   ============================================================ */
.bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar .fdone { background: var(--done); }
.bar .fdoing { background: var(--doing); }
.pct { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.axis-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 20px; }
.axis-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); cursor: pointer; }
.axis-card:hover { border-color: var(--border-strong); }
.axis-card .t { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.axis-card .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.axis-card .bar { margin-top: 8px; }

.a1 { border-left: 3px solid var(--a1); } .a1 .t, .a1 .n { color: var(--a1); }
.a2 { border-left: 3px solid var(--a2); } .a2 .t, .a2 .n { color: var(--a2); }
.a3 { border-left: 3px solid var(--a3); } .a3 .t, .a3 .n { color: var(--a3); }
.a4 { border-left: 3px solid var(--a4); } .a4 .t, .a4 .n { color: var(--a4); }
.a5 { border-left: 3px solid var(--a5); } .a5 .t, .a5 .n { color: var(--a5); }
.a6 { border-left: 3px solid var(--a6); } .a6 .t, .a6 .n { color: var(--a6); }
.a7 { border-left: 3px solid var(--a7); } .a7 .t, .a7 .n { color: var(--a7); }
.a8 { border-left: 3px solid var(--a8); } .a8 .t, .a8 .n { color: var(--a8); }

/* ============================================================
   Δέντρο
   ============================================================ */
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree > ul > li { margin-bottom: 14px; }
.node {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 14px; font-weight: 500; user-select: none;
}
.node:hover { border-color: var(--border-strong); }
.chev { font-size: 11px; color: var(--text-3); transition: transform .15s; display: inline-block; width: 10px; }
li.closed > .kids { display: none; }
li.closed > .node .chev { transform: rotate(-90deg); }
.kids { margin: 6px 0 6px 16px; padding-left: 16px; border-left: 1px dashed var(--border-strong); }
.count { margin-left: auto; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: var(--border); color: var(--text-2); font-variant-numeric: tabular-nums; }
.leaf {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; margin: 3px 0; font-size: 13px; color: var(--text-2);
  border-left: 2px solid var(--border); line-height: 1.45; cursor: pointer;
}
.leaf .lt { flex: 1; min-width: 0; }
.leaf .hint { display: block; font-size: 11px; color: var(--text-3); }
.leaf .minibar { width: 70px; flex: none; }
.leaf.full { color: var(--text); }
.leaf.full .lt { text-decoration: line-through; text-decoration-color: var(--done); }

.br.a1 .node { background: var(--a1-bg); border-color: var(--a1-soft); color: var(--a1); }
.br.a1 .count { background: var(--a1-soft); } .br.a1 .leaf { border-left-color: var(--a1-soft); }
.br.a2 .node { background: var(--a2-bg); border-color: var(--a2-soft); color: var(--a2); }
.br.a2 .count { background: var(--a2-soft); } .br.a2 .leaf { border-left-color: var(--a2-soft); }
.br.a3 .node { background: var(--a3-bg); border-color: var(--a3-soft); color: var(--a3); }
.br.a3 .count { background: var(--a3-soft); } .br.a3 .leaf { border-left-color: var(--a3-soft); }
.br.a4 .node { background: var(--a4-bg); border-color: var(--a4-soft); color: var(--a4); }
.br.a4 .count { background: var(--a4-soft); } .br.a4 .leaf { border-left-color: var(--a4-soft); }
.br.a5 .node { background: var(--a5-bg); border-color: var(--a5-soft); color: var(--a5); }
.br.a5 .count { background: var(--a5-soft); } .br.a5 .leaf { border-left-color: var(--a5-soft); }
.br.a6 .node { background: var(--a6-bg); border-color: var(--a6-soft); color: var(--a6); }
.br.a6 .count { background: var(--a6-soft); } .br.a6 .leaf { border-left-color: var(--a6-soft); }
.br.a7 .node { background: var(--a7-bg); border-color: var(--a7-soft); color: var(--a7); }
.br.a7 .count { background: var(--a7-soft); } .br.a7 .leaf { border-left-color: var(--a7-soft); }
.br.a8 .node { background: var(--a8-bg); border-color: var(--a8-soft); color: var(--a8); }
.br.a8 .count { background: var(--a8-soft); } .br.a8 .leaf { border-left-color: var(--a8-soft); }
.br .count { color: var(--text); }

/* ============================================================
   Προθεσμίες
   ============================================================ */
.duetag {
  flex: none; font-size: 11.5px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap;
  background: var(--border); color: var(--text-2);
}
.duetag.d-overdue { background: var(--danger-bg); color: var(--danger); }
.duetag.d-soon    { background: var(--doing-bg);  color: var(--doing); }
.duetag.d-done    { background: var(--done-bg);   color: var(--done); }

.dl-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.dl-row:first-of-type { border-top: 0; }
.dl-date { flex: none; width: 110px; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 12.5px; }
.dl-t {
  flex: 1; min-width: 0; text-align: left;
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.dl-t:hover { text-decoration: underline; }
.dl-w { display: block; font-size: 11.5px; color: var(--text-3); text-decoration: none; }
.dl-n { flex: none; font-size: 12px; font-weight: 600; }
.dl-row.d-overdue .dl-n, .dl-row.d-overdue .dl-date { color: var(--danger); }
.dl-row.d-soon .dl-n { color: var(--doing); }

/* Το κουτάκι ολοκλήρωσης, δίπλα σε κάθε προθεσμία. */
.dl-chk { flex: none; width: 18px; height: 18px; accent-color: var(--done); cursor: pointer; margin: 0; }
/* Οι προθεσμίες ολόκληρου σχεδίου δεν τσεκάρονται, κλείνουν μόνες τους. */
.dl-mark { flex: none; width: 18px; text-align: center; color: var(--text-3); font-size: 10px; }
.dl-row.done { opacity: .5; }
/* Η στιγμή ανάμεσα στο τσεκάρισμα και στην εξαφάνιση: γίνεται πράσινη,
   ώστε να φαίνεται τι μόλις ολοκληρώθηκε. */
.dl-row.leaving {
  opacity: 1; background: var(--done-bg); color: var(--done);
  border-radius: 8px; transition: background .15s;
}
.dl-row.leaving .dl-date, .dl-row.leaving .dl-n, .dl-row.leaving .dl-w { color: var(--done); }
.dl-row.done .dl-t { text-decoration: line-through; }
.dl-row.done .dl-n { color: var(--done); }

/* Κεφαλίδα ομάδας μέσα σε λίστα ενεργειών, π.χ. μία πρόταση.
   Ανοιγοκλείνει, ώστε μια ολοκληρωμένη πρόταση να μην πιάνει χώρο. */
.lgroup-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.lgroup-head h3 { margin-bottom: 0; flex: 1; min-width: 0; }
.lgroup-head .pgroup-n { margin-left: 0; flex: none; }
.lgroup-head .duetag { flex: none; }
.lgroup-head .edt, .lgroup-head .btn.ghost { opacity: .45; flex: none; }
.lgroup:hover .lgroup-head .btn.ghost { opacity: 1; }
.lgroup-body { margin-top: 8px; }
.lgroup.closed .lgroup-head { margin-bottom: 0; }
.lgroup.closed .lgroup-head .chev { transform: rotate(-90deg); }
.lgroup.closed .lgroup-body { display: none; }

/* Ολοκληρωμένη ενέργεια: πράσινο περίβλημα, ώστε να φαίνεται με μια ματιά
   τι έχει κλείσει χωρίς να διαβάσεις τίποτα. */
.lgroup .check.done {
  background: var(--done-bg);
  border-left: 3px solid var(--done);
  border-radius: 8px;
  padding-inline: 10px;
  margin-inline: -10px;
}
.lgroup .check.done .title { color: var(--done); }
/* Ολοκληρωμένη πρόταση: πράσινη και η κεφαλίδα της. */
.lgroup.full { border-color: var(--done); }
.lgroup.full .lgroup-head h3 { color: var(--done); }
.lgroup.full .lgroup-head .pgroup-n { background: var(--done-bg); color: var(--done); }

.dl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dl-head h3 { margin-bottom: 0; }
.dl-sum { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.dl-sum.od { background: var(--danger-bg); color: var(--danger); }
.dl-sum.sn { background: var(--doing-bg); color: var(--doing); }
.dl-count { margin-left: auto; }

/* Φίλτρα κατηγορίας πάνω από τη λίστα προθεσμιών. */
.dl-chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; }
.chip.dlchip {
  appearance: none; cursor: pointer; font: inherit;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border-strong);
}
.chip.dlchip b { font-variant-numeric: tabular-nums; opacity: .75; margin-inline-start: 3px; }
.chip.dlchip:hover { border-color: var(--text-3); }
/* Η επιλεγμένη γεμίζει με το χρώμα της κατηγορίας της. */
.chip.dlchip.on { border-width: 2px; font-weight: 700; }
.chip.dlchip.on b { opacity: 1; }
.chip.dlchip.on:not(.a1):not(.a2):not(.a3):not(.a4):not(.a5):not(.a6):not(.a7):not(.a8) {
  background: var(--text); color: var(--surface); border-color: var(--text);
}

/* Μικρή ετικέτα κατηγορίας μέσα στη γραμμή, όταν δείχνουμε όλες μαζί. */
.dl-ax {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; margin-inline-end: 6px;
  background: var(--border); color: var(--text-2);
}
.dl-ax.a1 { background: var(--a1-bg); color: var(--a1); }
.dl-ax.a2 { background: var(--a2-bg); color: var(--a2); }
.dl-ax.a3 { background: var(--a3-bg); color: var(--a3); }
.dl-ax.a4 { background: var(--a4-bg); color: var(--a4); }
.dl-ax.a5 { background: var(--a5-bg); color: var(--a5); }
.dl-ax.a6 { background: var(--a6-bg); color: var(--a6); }
.dl-ax.a7 { background: var(--a7-bg); color: var(--a7); }
.dl-ax.a8 { background: var(--a8-bg); color: var(--a8); }

.crow { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.duelab { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.duelab input { width: auto; padding: 3px 8px; font-size: 12.5px; }

/* ============================================================
   Checklist
   ============================================================ */
.check { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border); align-items: flex-start; }
.check:first-of-type { border-top: 0; }
.check .body { flex: 1; min-width: 0; }
.check .title { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.check .title .edt { opacity: 0; flex: none; }
.check:hover .title .edt { opacity: 1; }
.check .hint { font-size: 12px; color: var(--text-3); }
.check.done .title { text-decoration: line-through; color: var(--text-3); }
.check .note-in { margin-top: 6px; font-size: 13px; min-height: 0; }
.check.d-overdue { border-left: 3px solid var(--danger); padding-left: 10px; margin-left: -13px; }
.check.d-soon    { border-left: 3px solid var(--doing);  padding-left: 10px; margin-left: -13px; }

.stbtn {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 6px; border: 1.5px solid var(--border-strong);
  background: var(--surface); cursor: pointer; padding: 0;
  display: grid; place-items: center; font-size: 13px; line-height: 1; font-weight: 700;
}
.stbtn[data-s="doing"] { background: var(--doing-bg); border-color: var(--doing); color: var(--doing); }
.stbtn[data-s="done"]  { background: var(--done-bg);  border-color: var(--done);  color: var(--done); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-2); }
.chip.a1 { background: var(--a1-bg); color: var(--a1); border-color: var(--a1-soft); }
.chip.a2 { background: var(--a2-bg); color: var(--a2); border-color: var(--a2-soft); }
.chip.a3 { background: var(--a3-bg); color: var(--a3); border-color: var(--a3-soft); }
.chip.a4 { background: var(--a4-bg); color: var(--a4); border-color: var(--a4-soft); }
.chip.a5 { background: var(--a5-bg); color: var(--a5); border-color: var(--a5-soft); }
.chip.a6 { background: var(--a6-bg); color: var(--a6); border-color: var(--a6-soft); }
.chip.a7 { background: var(--a7-bg); color: var(--a7); border-color: var(--a7-soft); }
.chip.a8 { background: var(--a8-bg); color: var(--a8); border-color: var(--a8-soft); }

/* ============================================================
   Εβδομάδες
   ============================================================ */
.week { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 14px; overflow: hidden; }
.week.current { border-color: var(--a2); box-shadow: 0 0 0 2px var(--a2-bg); }
.week.past { opacity: .62; }
.week-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.week-head .wn { font-size: 14px; font-weight: 600; }
.week-head .wd { font-size: 12px; color: var(--text-3); }
.tagnow { font-size: 11px; font-weight: 700; background: var(--a2); color: #fff; padding: 1px 8px; border-radius: 999px; }
.tagdl { background: var(--danger); }
.week-body { padding: 12px 16px 14px; }
.week-focus { margin-bottom: 10px; }
.witem { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.witem:first-child { border-top: 0; }
.witem .wt { flex: 1; min-width: 0; font-size: 14px; }
.witem .wsrc { display: block; font-size: 11px; color: var(--text-3); }
.witem.done .wt { text-decoration: line-through; color: var(--text-3); }
.witem input[type="checkbox"] { width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--done); }
.week-add { display: flex; gap: 8px; margin-top: 10px; }
.week-add input { flex: 1; }

/* ============================================================
   Πίνακας
   ============================================================ */
.tablewrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-height: 78vh; }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.matrix th, table.matrix td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
table.matrix thead th { position: sticky; background: var(--surface-2); z-index: 3; }
table.matrix thead tr:nth-child(1) th { top: 0; height: 30px; }
table.matrix thead tr:nth-child(2) th { top: 30px; }
table.matrix th.grp { font-size: 12px; font-weight: 600; text-align: center; padding: 5px 8px; white-space: nowrap; }
table.matrix th.tsk {
  height: 232px; width: 34px; min-width: 34px; padding: 6px 2px; vertical-align: bottom;
  font-weight: 500; text-align: left; cursor: pointer;
}
table.matrix th.tsk > div { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 218px; overflow: hidden; text-overflow: ellipsis; }
table.matrix th.tsk:hover { background: var(--border); }
table.matrix th.tsk.own > div::after { content: ' •'; color: var(--a2); }
.gc0 { border-top: 3px solid var(--a1); }
.gc1 { border-top: 3px solid var(--a2); }
.gc2 { border-top: 3px solid var(--a3); }
.gc3 { border-top: 3px solid var(--a4); }

/* Στήλη οργανισμού, μόνο εκεί που υπάρχουν πραγματικά σχέδια. */
th.orgcol, td.orgcol {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  width: 150px; min-width: 150px; max-width: 150px; text-align: left; padding: 6px 10px;
  font-size: 12.5px; color: var(--text-2);
}
thead th.orgcol { z-index: 5; background: var(--surface-2); font-weight: 600; color: var(--text); }

th.namecol, td.namecol {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  width: 230px; min-width: 230px; max-width: 230px; text-align: left; padding: 6px 10px;
  border-right: 1px solid var(--border-strong);
}
thead th.namecol { z-index: 5; background: var(--surface-2); }
table.matrix.withorg th.namecol, table.matrix.withorg td.namecol { left: 150px; }
table.matrix.withorg th.pctcol, table.matrix.withorg td.pctcol { left: 380px; }
td.namecol .pn { font-weight: 500; cursor: pointer; display: block; text-align: left; background: none; border: 0; padding: 0; width: 100%; }
td.namecol .pn:hover { text-decoration: underline; }
td.namecol .pm { font-size: 11px; color: var(--text-3); }
th.pctcol, td.pctcol { position: sticky; left: 230px; z-index: 2; background: var(--surface); min-width: 92px; padding: 6px 10px; border-right: 1px solid var(--border-strong); }
thead th.pctcol { z-index: 5; background: var(--surface-2); }

td.cell { width: 34px; min-width: 34px; padding: 0; text-align: center; position: relative; }
td.cell button {
  width: 100%; height: 30px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--text-3);
}
td.cell button:hover { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--border-strong); }
td.cell[data-s="doing"] { background: var(--doing-bg); } td.cell[data-s="doing"] button { color: var(--doing); }
td.cell[data-s="done"]  { background: var(--done-bg); }  td.cell[data-s="done"] button { color: var(--done); }
td.cell.na { background: var(--surface-2); }
td.cell.hasnote::after { content: ''; position: absolute; top: 1px; right: 1px; border: 4px solid transparent; border-top-color: var(--a2); border-right-color: var(--a2); }
td.cell.d-overdue { box-shadow: inset 0 -3px 0 var(--danger); }
td.cell.d-soon    { box-shadow: inset 0 -3px 0 var(--doing); }
table.matrix tbody tr:hover td.namecol, table.matrix tbody tr:hover td.pctcol { background: var(--surface-2); }

/* ============================================================
   Αναλυτικές κάρτες ανά σχέδιο
   ============================================================ */
.pcards { margin-top: 28px; }
.pcards-h { font-size: 16px; margin-bottom: 4px; }

.pcard {
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: var(--radius); background: var(--surface);
  margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow);
}
.pcard.a1 { border-left-color: var(--a1); }
.pcard.a2 { border-left-color: var(--a2); }
.pcard.a3 { border-left-color: var(--a3); }
.pcard.a4 { border-left-color: var(--a4); }
.pcard.a5 { border-left-color: var(--a5); }
.pcard.a6 { border-left-color: var(--a6); }
.pcard.a7 { border-left-color: var(--a7); }
.pcard.a8 { border-left-color: var(--a8); }

.pcard-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer; user-select: none; background: var(--surface);
}
.pcard-head:hover { background: var(--surface-2); }
.pcard.closed .pcard-head .chev { transform: rotate(-90deg); }
.pcard-names { flex: 1; min-width: 200px; }
.pcard-org { display: block; font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.pcard-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pcard-due { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pcard-prog { flex: none; width: 130px; }
.pcard-prog .pct { display: block; text-align: right; margin-bottom: 3px; }
.pcard.closed .pcard-body { display: none; }
.pcard-body { padding: 4px 16px 16px; border-top: 1px solid var(--border); }
.pcard.flash { animation: flash 1.4s ease-out; }
@keyframes flash {
  0% { box-shadow: 0 0 0 3px var(--doing); }
  100% { box-shadow: var(--shadow); }
}

/* Σταθερά στοιχεία, μόνο για ανάγνωση. */
.pinfo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 22px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 13px 16px; margin: 14px 0 18px;
}
.pinfo .wide { grid-column: 1 / -1; }
.pinfo .k { display: block; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.pinfo .v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 500; }
.pinfo .mono { font-family: var(--mono); font-size: 12.5px; font-weight: 400; }
.pinfo-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-3); border-top: 1px dashed var(--border-strong); padding-top: 8px; }

/* ---------- σύνδεσμοι Drive ---------- */
.dlink {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 22px; border-radius: 6px;
  color: var(--text-3); text-decoration: none; vertical-align: -5px;
  border: 1px solid transparent;
}
.dlink:hover { color: var(--a5); background: var(--a5-bg); border-color: var(--a5-soft); }
.dlink:focus-visible { outline: 2px solid var(--a2); outline-offset: 1px; }

.nmrow { display: flex; align-items: center; gap: 2px; }
.nmrow .pn { flex: 1; min-width: 0; }

/* Το επεξεργάσιμο πεδίο του απολογιστικού website. */
.elink { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.elink-url { font-size: 12px; color: var(--a5); word-break: break-all; }
.elink-in { flex: 1; min-width: 240px; max-width: 520px; font-size: 13px; padding: 4px 9px; }
.elink.editing { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 7px 10px; }

/* Οι ομάδες ανοιγοκλείνουν όπως και οι κάρτες των σχεδίων. */
.pgroup {
  margin-bottom: 10px; scroll-margin-top: 90px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--surface);
}
.pgroup-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; cursor: pointer; user-select: none;
  background: var(--surface-2);
}
.pgroup-head:hover { background: var(--border); }
.pgroup.closed .pgroup-head .chev { transform: rotate(-90deg); }
.pgroup.closed .pgroup-body { display: none; }
.pgroup-body { padding: 4px 13px 10px; }
.pgroup-t { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pgroup-n {
  margin-left: auto; font-size: 11.5px; font-weight: 700; letter-spacing: 0;
  background: var(--border); color: var(--text-2);
  padding: 1px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
}

/* Ομάδα στηλών που συμπτύχθηκε σε μία στήλη σύνοψης. */
table.matrix th.grp { cursor: pointer; user-select: none; }
table.matrix th.grp:hover { background: var(--border); }
.grp-chev { font-size: 9px; margin-inline-end: 5px; color: var(--text-3); }
table.matrix th.sumcol {
  min-width: 96px; padding: 8px 10px; text-align: center; vertical-align: bottom;
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
table.matrix th.sumcol:hover { background: var(--border); }
td.phasecell.sumcell { min-width: 96px; padding: 8px 10px; }
.pgroup.flash { animation: flashbg 1.4s ease-out; }
@keyframes flashbg {
  0% { background: var(--doing-bg); }
  100% { background: transparent; }
}

/* ---------- πίνακας φάσεων ---------- */
table.matrix.phases th.phasehead {
  min-width: 150px; padding: 8px 12px; text-align: left; vertical-align: bottom;
  font-size: 12.5px; font-weight: 600; white-space: normal; line-height: 1.3;
}
.phasehead-n { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); margin-top: 2px; }
td.phasecell {
  min-width: 150px; padding: 10px 12px; cursor: pointer; vertical-align: middle;
}
td.phasecell:hover { box-shadow: inset 0 0 0 2px var(--border-strong); }
.phasecell-n { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 5px; }
td.phasecell.p-none { color: var(--text-3); }
td.phasecell.p-part { background: var(--doing-bg); } td.phasecell.p-part .phasecell-n { color: var(--doing); }
td.phasecell.p-done { background: var(--done-bg); }  td.phasecell.p-done .phasecell-n { color: var(--done); }
table.matrix.phases td.namecol, table.matrix.phases th.namecol { width: 260px; min-width: 260px; max-width: 260px; }
table.matrix.phases td.pctcol, table.matrix.phases th.pctcol { left: 260px; }

.legend .l-none { background: var(--surface); border-color: var(--border-strong); }
.legend .l-part { background: var(--doing-bg); border-color: var(--doing); }
.legend .l-full { background: var(--done-bg); border-color: var(--done); }

/* ============================================================
   Αρμοδιότητες στα Δεδομένα
   ============================================================ */
.axes { display: flex; flex-direction: column; gap: 8px; }
.axrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); flex-wrap: wrap; }
.axrow .axn { font-weight: 700; font-size: 12px; width: 18px; flex: none; }
.axrow input { flex: 1; min-width: 160px; }
.axrow .axmeta { flex: none; }

/* ============================================================
   Drawer, modal, toast
   ============================================================ */
.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--bg); border-left: 1px solid var(--border);
  z-index: 61; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.16);
}
.drawer-head { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 18px; z-index: 2; }
.drawer-body { padding: 16px 18px 60px; }
.drawer-head .row { align-items: flex-start; }
.drawer-head h3 { font-size: 16px; }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 70; display: grid; place-items: center; padding: 20px; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); width: min(520px, 100%); max-height: 86vh; overflow-y: auto; }
.modal-head { padding: 15px 18px 0; }
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 12px 18px; }
.modal-foot { padding: 12px 18px 16px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--text); color: var(--bg); padding: 9px 18px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); max-width: 90vw; text-align: center; }
.toast.err { background: var(--danger); color: #fff; }

/* ============================================================
   Διάφορα
   ============================================================ */
.emptystate { color: var(--text-3); font-size: 13px; padding: 10px 0; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); align-items: center; }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--border-strong); vertical-align: -2px; margin-inline-end: 5px; }
.legend .l-doing { background: var(--doing-bg); border-color: var(--doing); }
.legend .l-done { background: var(--done-bg); border-color: var(--done); }
.legend .l-over { background: var(--surface); border-color: var(--border-strong); box-shadow: inset 0 -3px 0 var(--danger); }

/* Σε κινητό οι καρτέλες γίνονται μία σειρά που σέρνεται οριζόντια,
   ώστε να μη γεμίζει η οθόνη με τρεις σειρές καρτελών. Ποτέ κομμένες. */
@media (max-width: 720px) {
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; flex: none; }
  .axhead { gap: 12px; padding: 12px 14px; }
  .axhead-pct { font-size: 24px; }
}

@media (max-width: 720px) {
  main { padding: 16px 12px 80px; }
  .top-in, .tabs { padding-inline: 12px; }
  .brand h1 { font-size: 15px; }
  th.pctcol, td.pctcol { display: none; }
  th.namecol, td.namecol { width: 160px; min-width: 160px; max-width: 160px; }
  .dl-date { width: 84px; }
}

/* ============================================================
   ΚΙΝΗΤΟ

   ΟΛΟ αυτό το κομμάτι ισχύει ΜΟΝΟ σε οθόνες ως 640px φάρδος.
   Σε laptop και desktop δεν αλλάζει απολύτως τίποτα.

   Τι διορθώνει, με σειρά σημασίας:
     1. Το πάνω μέρος έτρωγε μισή οθόνη πριν φανεί περιεχόμενο.
     2. Οι τέσσερις κάρτες σύνοψης έπιαναν χίλια pixel ύψους.
     3. Τα κουμπιά και τα κουτάκια ήταν πολύ μικρά για δάχτυλο.
     4. Ο μεγάλος πίνακας είχε δύο κολλημένες στήλες που έπιαναν
        όλη την οθόνη και δεν έμενε χώρος για τις εργασίες.
     5. Τα πεδία είχαν μικρά γράμματα, που κάνει το iPhone να
        κάνει ζουμ μόνο του μόλις τα πατήσεις.
   ============================================================ */
@media (max-width: 640px) {

  /* ---------- βασικά της αφής ----------
     Χωρίς αυτά, κάθε πάτημα έχει μισό δευτερόλεπτο καθυστέρηση
     και ένα γκρίζο τετράγωνο αναβοσβήνει γύρω του. */
  button, a, .tab, .node, .leaf, .chip, td.cell button, .stbtn,
  .pcard-head, .pgroup-head, .axis-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .05);
  }

  /* Το iPhone κάνει ζουμ μόνο του σε κάθε πεδίο με γράμματα κάτω
     από 16px. Με 16px δεν το κάνει, και η σελίδα δεν «χοροπηδάει». */
  input[type="text"], input[type="password"], input[type="date"],
  input[type="email"], input[type="number"], textarea, select {
    font-size: 16px; padding: 9px 11px; border-radius: 9px;
  }
  label.field > span { font-size: 12.5px; margin-bottom: 4px; }

  /* ---------- κουμπιά: αρκετά μεγάλα για δάχτυλο ---------- */
  .btn { padding: 9px 15px; font-size: 14px; min-height: 42px; border-radius: 9px; }
  .btn.sm { padding: 7px 12px; font-size: 13px; min-height: 36px; }
  .btn.iconbtn { width: 42px; height: 42px; }
  .btn.ghost { min-height: 40px; }

  /* ---------- πάνω μέρος ----------
     Μπαίνει σε σειρά: τίτλος, θέμα, backup. Από κάτω τα μικρά. */
  .top-in { padding: 8px 12px 0; gap: 7px 8px; }
  .brand { gap: 8px; order: 1; margin-inline-end: auto; }
  .brand-logo { width: 28px; height: 28px; }
  .gate-logo { width: 78px; height: 78px; margin-bottom: 12px; }
  .brand h1 { font-size: 15.5px; }
  .brand .sub { font-size: 11px; }
  #btnTheme { order: 2; }
  #btnExportTop { order: 3; }
  #countdown { order: 4; }
  .modebadge { order: 5; }
  .overdue { order: 6; }
  .saveState { order: 7; }

  .countdown { font-size: 11.5px; padding: 3px 11px; gap: 6px; }
  .countdown .num { font-size: 15px; }
  .modebadge { font-size: 11px; padding: 2px 9px; max-width: 100%;
               overflow: hidden; text-overflow: ellipsis; }
  .overdue { font-size: 11.5px; padding: 3px 10px; }
  .saveState { font-size: 11.5px; }

  /* ---------- καρτέλες ---------- */
  .tabs { padding: 8px 12px 0; gap: 4px; }
  .tab { font-size: 14px; padding: 11px 14px 12px; min-height: 44px; }

  /* ---------- σύνοψη αρμοδιοτήτων ----------
     Ήταν τέσσερις ψηλές κάρτες, μία κάτω από την άλλη, και έπρεπε
     να κατεβείς πολύ για να φτάσεις στο περιεχόμενο. Τώρα κάθε
     κάρτα είναι μία συμπαγής σειρά. */
  .axis-summary { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
  .axis-card {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "t n" "meta meta" "bar bar";
    align-items: center; column-gap: 12px; row-gap: 5px;
    padding: 11px 13px; min-height: 44px;
  }
  .axis-card .t { grid-area: t; font-size: 13.5px; margin-bottom: 0; }
  .axis-card .n { grid-area: n; font-size: 20px; }
  .axis-card .muted { grid-area: meta; font-size: 12px; }
  .axis-card .bar { grid-area: bar; margin-top: 2px; }

  /* ---------- κείμενα και κάρτες ---------- */
  main { padding: 14px 12px 90px; }
  .view-head { margin-bottom: 14px; }
  .view-head h2 { font-size: 18px; }
  .view-head .lead { font-size: 13px; }
  .card { padding: 14px 14px; border-radius: 12px; }
  .card > h3 { font-size: 14.5px; }

  /* ---------- λωρίδα κατηγορίας ---------- */
  .axhead { padding: 12px 14px; gap: 10px 14px; border-radius: 12px; }
  .axhead-main { min-width: 0; }
  .axhead-t { font-size: 15.5px; }
  .axhead-sub { font-size: 12px; }
  .axhead-pct { font-size: 22px; }
  .axhead-bar { margin-top: 8px; }
  .axhead-btns { width: 100%; gap: 8px; }
  .axhead-btns .btn { flex: 1; }

  /* ---------- δέντρο ---------- */
  .node { padding: 12px; font-size: 14px; min-height: 46px; }
  .kids { margin-left: 8px; padding-left: 12px; }
  .leaf { padding: 10px 10px; margin: 2px 0; min-height: 44px; font-size: 13.5px; }
  .leaf .minibar { width: 56px; }
  /* Σε οθόνη αφής δεν υπάρχει «πέρασμα με το ποντίκι», οπότε ό,τι
     εμφανιζόταν μόνο τότε πρέπει να φαίνεται πάντα. */
  .gobtn { opacity: 1; font-size: 12px; padding: 6px 12px; }
  .check .title .edt { opacity: 1; }
  .lgroup-head .btn.ghost { opacity: 1; }

  /* ---------- λίστες εργασιών ---------- */
  .check { gap: 12px; padding: 13px 0; }
  .check .title { font-size: 14.5px; }
  .check .hint { font-size: 12.5px; }
  /* Το κουτάκι μένει μικρό και καθαρό στην όψη, αλλά η περιοχή που
     δέχεται το δάχτυλο απλώνεται γύρω του και γίνεται 44×44.
     Έτσι δεν χρειάζεται σημάδι, χωρίς να χοντρύνει το σχέδιο. */
  .stbtn { width: 30px; height: 30px; border-radius: 8px; font-size: 16px; margin-top: 0; position: relative; }
  .stbtn::after { content: ''; position: absolute; inset: -8px; }
  .crow { gap: 8px 12px; margin-top: 8px; }
  .duelab { font-size: 12px; width: 100%; }
  .duelab input { flex: 1; min-width: 0; }
  .chip { padding: 8px 14px; font-size: 13px; }
  .chips { gap: 8px; }

  /* ---------- προθεσμίες ----------
     Ημερομηνία και μέρες πάνω, τίτλος από κάτω με όλο το πλάτος. */
  .dl-row { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 10px; padding: 11px 0; align-items: center; }
  .dl-chk, .dl-mark { grid-column: 1; grid-row: 1 / span 2; width: 24px; height: 24px; }
  .dl-mark { line-height: 24px; }
  .dl-date { width: auto; grid-column: 2; grid-row: 1; }
  .dl-n { grid-column: 3; grid-row: 1; }
  .dl-t { grid-column: 2 / -1; grid-row: 2; min-height: 32px; }
  .dl-count { margin-left: 0; flex-basis: 100%; }
  .dl-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .dl-chips::-webkit-scrollbar { display: none; }
  .chip.dlchip { flex: none; }

  /* ---------- εβδομάδες ---------- */
  .week-head { padding: 11px 13px; gap: 8px 10px; }
  .week-body { padding: 11px 13px 13px; }
  .witem { padding: 9px 0; }
  .witem input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; }
  .week-add { flex-direction: column; gap: 8px; }
  .week-add .btn { width: 100%; }

  /* ---------- ο μεγάλος πίνακας ----------
     Οι δύο κολλημένες στήλες έπιαναν 380px σε οθόνη 390px, οπότε
     δεν έμενε τίποτα για τις εργασίες. Ο οργανισμός φεύγει (φαίνεται
     ούτως ή άλλως μέσα στην κάρτα του σχεδίου) και τα κελιά γίνονται
     αρκετά φαρδιά για δάχτυλο. */
  .tablewrap { max-height: 60vh; border-radius: 12px; }
  th.orgcol, td.orgcol { display: none; }
  table.matrix.withorg th.namecol, table.matrix.withorg td.namecol { left: 0; }
  th.namecol, td.namecol { width: 136px; min-width: 136px; max-width: 136px; padding: 8px 9px; }
  /* Τα μακριά ονόματα σχεδίων έκαναν μια γραμμή του πίνακα εφτά σειρές ψηλή.
     Κόβονται στις τρεις σειρές με αποσιωπητικά. Το πλήρες όνομα φαίνεται
     ούτως ή άλλως στην κάρτα του σχεδίου, ακριβώς από κάτω. */
  td.namecol .pn {
    font-size: 13px; line-height: 1.3; padding: 5px 0; min-height: 38px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  td.namecol .pm { font-size: 10.5px; }

  table.matrix th.tsk { height: 158px; width: 44px; min-width: 44px; }
  table.matrix th.tsk > div { max-height: 144px; font-size: 12px; }
  td.cell, table.matrix td.cell { width: 44px; min-width: 44px; }
  td.cell button { height: 44px; font-size: 15px; }
  table.matrix th.grp { padding: 7px 8px; }
  table.matrix th.sumcol, td.phasecell.sumcell { min-width: 84px; }

  /* πίνακας φάσεων */
  table.matrix.phases th.namecol, table.matrix.phases td.namecol {
    width: 136px; min-width: 136px; max-width: 136px;
  }
  table.matrix.phases th.phasehead { min-width: 118px; padding: 8px 10px; font-size: 12px; }
  td.phasecell { min-width: 118px; padding: 11px 10px; }
  .legend { gap: 8px 14px; font-size: 12px; }

  /* ---------- κάρτες σχεδίων ----------
     Τίτλος πάνω, προθεσμία και πρόοδος από κάτω, με όλο το πλάτος. */
  .pcard { border-radius: 12px; margin-bottom: 12px; }
  .pcard-head { padding: 13px 14px; gap: 8px 12px; min-height: 56px; }
  .pcard-names { flex: 1 1 calc(100% - 26px); min-width: 0; }
  .pcard-title { font-size: 15px; }
  .pcard-org { font-size: 11px; }
  .pcard-due { font-size: 11.5px; flex: 1 1 auto; white-space: normal; }
  .pcard-prog { flex: 1 1 130px; width: auto; }
  .pcard-body { padding: 4px 12px 14px; }
  .chev { width: 14px; font-size: 12px; }

  .pinfo { padding: 12px 13px; gap: 9px 16px; margin: 12px 0 14px; }
  .pinfo .v { font-size: 13.5px; }
  .pinfo .mono { font-size: 11.5px; word-break: break-all; }

  .pgroup-head { padding: 12px 13px; min-height: 48px; }
  .pgroup-t { font-size: 12px; }
  .pgroup-body { padding: 4px 12px 10px; }

  .dlink { width: 34px; height: 32px; vertical-align: -9px; position: relative; }
  .dlink::after { content: ''; position: absolute; inset: -9px; }
  .elink { gap: 8px; }
  .elink-in { flex: 1 1 100%; min-width: 0; max-width: none; font-size: 16px; padding: 8px 10px; }

  /* ---------- αρμοδιότητες στα Δεδομένα ---------- */
  .axrow { padding: 11px 12px; gap: 8px 10px; }
  .axrow input { flex: 1 1 100%; min-width: 0; }
  .axrow .axmeta { flex: 1 1 100%; font-size: 12px; }

  /* ---------- παράθυρα ----------
     Τα κουμπιά μπαίνουν το ένα κάτω από το άλλο και πιάνουν όλο το
     πλάτος, ώστε να μη χρειάζεται σημάδι με το δάχτυλο. */
  .modal-bg { padding: 12px; align-items: end; }
  .modal { border-radius: 14px; max-height: 88vh; }
  .modal-head { padding: 16px 15px 0; }
  .modal-head h3 { font-size: 16.5px; }
  .modal-body { padding: 12px 15px; }
  .modal-foot { padding: 10px 15px 15px; flex-direction: column; gap: 8px; }
  .modal-foot .btn { width: 100%; }

  .drawer { width: 100%; border-left: 0; }
  .drawer-head { padding: 13px 14px; }
  .drawer-body { padding: 14px 14px 80px; }

  #toasts { bottom: 14px; width: 100%; padding: 0 14px; }
  .toast { font-size: 13px; padding: 10px 18px; max-width: 100%; }

  /* ---------- οθόνη εισόδου ---------- */
  .gate { padding: 16px; align-content: center; }
  .gate-box { padding: 22px 18px; border-radius: 16px; }
  .gate-box h1 { font-size: 19px; }
  .gate-btn { padding: 13px; min-height: 48px; }
}

/* Στα πιο στενά κινητά (ως 400px) κερδίζουμε λίγο ακόμη χώρο.
   Το «KA152 / KA153» είναι διακοσμητικό, ο τίτλος από πάνω το λέει ήδη. */
@media (max-width: 400px) {
  .brand .sub { display: none; }
  .brand h1 { font-size: 15px; }
  main { padding: 12px 10px 90px; }
  .card, .axhead { padding-inline: 12px; }
  .pcard-head { padding-inline: 12px; }
  .pcard-body { padding-inline: 10px; }
}

@media print {
  .top, .tabs, .btn, .week-add { display: none !important; }
  .tablewrap { max-height: none; overflow: visible; }
  body { background: #fff; }
}