/* ── Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  /* Surfaces — warm ivory */
  --bg-page:       #f4ece0;
  --bg-panel:      #faf5ed;
  --bg-surface:    #f0e8d8;
  --bg-elevated:   #e6dcc8;
  --bg-hover:      #ddd0b8;

  /* Byzantine crimson — primary UI accent */
  --crimson:       #7a1408;
  --crimson-mid:   #9e2418;
  --crimson-soft:  #c05038;
  --crimson-glow:  rgba(122,20,8,0.07);

  /* Antique gold — secondary accent */
  --gold:          #9a7a35;
  --gold-soft:     #c4a05a;
  --gold-dim:      #c8aa70;

  /* Text */
  --text-primary:  #1a1208;
  --text-secondary:#5a4228;
  --text-muted:    #9a8060;

  /* Borders */
  --border:        rgba(122,20,8,0.11);
  --border-mid:    rgba(122,20,8,0.22);
  --border-bright: rgba(122,20,8,0.45);

  /* Parchment for content */
  --parchment:     #fdf5e4;
  --parchment-warm:#fff9f1;

  --shadow:        0 4px 20px rgba(26,18,8,0.10);
  --shadow-deep:   0 10px 44px rgba(26,18,8,0.16);
  --radius:        2px;

  /* ── Κατάσταση δημοσίευσης — ΤΟ ΜΟΝΟ λεξιλόγιο χρωμάτων γι' αυτόν τον άξονα ──
     Κάθε δείκτης κατάστασης στο UI χρησιμοποιεί ΑΠΟΚΛΕΙΣΤΙΚΑ αυτά τα 4 tokens.
     Το κόκκινο είναι δεσμευμένο ΜΟΝΟ για σφάλματα: η απουσία μετάφρασης είναι η
     αναμενόμενη κατάσταση σε 941 σελίδες × 3 γλώσσες, δεν είναι συναγερμός. */
  --st-published:  #2e7d32;            /* γεμάτο  — δημοσιευμένο */
  --st-draft:      var(--gold);        /* περίγραμμα — υπάρχει, μη δημοσιευμένο */
  --st-none:       var(--bg-elevated); /* σιωπηλό — δεν υπάρχει καθόλου */
  --st-error:      var(--crimson);     /* ΜΟΝΟ σφάλματα */
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  background: var(--bg-page);
  color: var(--text-primary);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Scrollbars ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ════════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════════ */
body.login-page {
  justify-content: center;
  align-items: center;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

/* Warm vignette */
body.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(250,245,237,0.9) 0%, transparent 70%),
    radial-gradient(circle at 10% 10%, rgba(122,20,8,0.04) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(154,122,53,0.04) 0%, transparent 50%);
  pointer-events: none;
}

/* Subtle manuscript grid */
body.login-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(122,20,8,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,20,8,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* ── Login card ──────────────────────────────────────── */
.login-card {
  position: relative;
  z-index: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 54px 48px 46px;
  width: 400px;
  box-shadow: var(--shadow-deep),
              inset 0 1px 0 rgba(255,255,255,0.8);
  animation: cardReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cardReveal {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Crimson top beam */
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--crimson) 30%, var(--crimson) 70%, transparent 95%);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Inner border inset */
.login-card::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(122,20,8,0.06);
  border-radius: 1px;
  pointer-events: none;
}

.login-card .logo {
  text-align: center;
  margin-bottom: 12px;
  font-size: 38px;
  color: var(--crimson);
  animation: crossPulse 5s ease-in-out infinite;
}

@keyframes crossPulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}

.login-card h1 {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.login-card .subtitle {
  text-align: center;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 36px;
}

.login-card label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--crimson);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.login-card input {
  display: block;
  width: 100%;
  margin-bottom: 18px;
  padding: 11px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-card input:focus {
  outline: none;
  border-color: var(--crimson-mid);
  box-shadow: 0 0 0 3px var(--crimson-glow);
}

.login-card input::placeholder { color: var(--text-muted); opacity: 0.7; }

.login-card button {
  display: block;
  width: 100%;
  padding: 13px;
  background: var(--crimson);
  color: #f8f0e4;
  border: none;
  border-radius: var(--radius);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.login-card button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
}

.login-card button:not(:disabled):hover {
  background: var(--crimson-mid);
  box-shadow: 0 4px 16px rgba(122,20,8,0.28);
}

.login-card button:disabled { opacity: 0.50; cursor: not-allowed; }

.error-msg {
  color: var(--crimson-soft);
  font-size: 14px;
  font-style: italic;
  margin-top: 14px;
  text-align: center;
  min-height: 22px;
}

/* ════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════ */
header {
  background: var(--crimson);
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(122,20,8,0.30);
  position: relative;
}

/* Gold bottom line */
header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold-dim) 70%, transparent);
}

.header-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: #f8f0e4;
}

.header-controls { display: flex; align-items: center; gap: 10px; }

.lang-select {
  padding: 5px 10px;
  border: 1px solid rgba(248,240,228,0.3);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.15);
  color: #f8f0e4;
  font-size: 13px;
  font-family: 'Cormorant Garamond', serif;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.lang-select:focus { outline: none; border-color: var(--gold-dim); }
.lang-select option { background: var(--crimson); }

.logout-btn {
  padding: 5px 14px;
  border: 1px solid rgba(248,240,228,0.35);
  background: transparent;
  color: rgba(248,240,228,0.85);
  border-radius: var(--radius);
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-btn:hover {
  border-color: rgba(248,240,228,0.7);
  color: #f8f0e4;
  background: rgba(0,0,0,0.15);
}

/* ════════════════════════════════════════════════════════
   MAIN LAYOUT
   ════════════════════════════════════════════════════════ */
.main-layout { display: flex; flex: 1; overflow: hidden; }

/* ════════════════════════════════════════════════════════
   NAVIGATION PANEL
   ════════════════════════════════════════════════════════ */
.nav-panel {
  width: 272px;
  background: var(--bg-panel);
  /* Το δεξί περίγραμμα το αναλαμβάνει πλέον το .nav-splitter — αλλιώς διπλή γραμμή. */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}

.nav-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.nav-search input {
  width: 100%;
  padding: 7px 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nav-search input::placeholder { color: var(--text-muted); }
.nav-search input:focus {
  outline: none;
  border-color: var(--crimson-mid);
  box-shadow: 0 0 0 2px var(--crimson-glow);
}

.nav-actions {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.nav-action-btn {
  width: 100%;
  padding: 5px 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.nav-action-btn:hover { border-color: var(--crimson-mid); color: var(--crimson); }

.nav-tree { flex: 1; overflow-y: auto; padding: 5px 0; }

/* ── Μενού ενεργειών κόμβου (⋯) ────────────────────────────
   Εμφανίζεται μόνο στο hover ώστε το δέντρο να μένει ήσυχο στην ανάγνωση — οι
   δομικές ενέργειες είναι σπάνιες σε σχέση με την πλοήγηση.                    */
.node-menu-btn {
  margin-left: auto;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
  border-radius: 2px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.tree-label:hover .node-menu-btn { opacity: 1; }
.node-menu-btn:hover { color: var(--crimson); background: var(--crimson-glow); }

/* Όταν υπάρχει το ⋯, αυτό παίρνει το margin-left:auto — η τριάδα πρέπει να το αφήσει,
   αλλιώς θα σπρωχνόταν σε άλλη θέση ανάλογα με το hover. */
.tree-label .node-menu-btn + .lang-triad { margin-left: 6px; }

.node-menu {
  position: fixed;
  z-index: 500;
  min-width: 210px;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
  padding: 4px 0;
}

.node-menu-item {
  padding: 7px 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14.5px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.node-menu-item:hover { background: var(--crimson-glow); color: var(--crimson); }

.node-menu-item.disabled {
  opacity: 0.35;
  cursor: default;
}
.node-menu-item.disabled:hover { background: none; color: var(--text-secondary); }

.node-menu-item.menu-sep-above {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
}

/* ── Λαβή πλάτους του δέντρου ──────────────────────────────
   Λεπτή γραμμή που «ζωντανεύει» στο hover — ίδια λογική με τον splitter των panel,
   αλλά με μεγαλύτερη περιοχή σύλληψης από το ορατό πάχος (5px ορατά, άνετο στόχευμα). */
.nav-splitter {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  border-right: 1px solid var(--border);
  transition: background 0.15s;
}

.nav-splitter:hover,
.nav-splitter.dragging { background: var(--crimson-glow); border-right-color: var(--crimson-soft); }

/* ── Tree nodes ───────────────────────────────────────── */
.tree-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14.5px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius);
  margin: 1px 5px;
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tree-label:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-left-color: var(--crimson-soft);
}

.tree-label.selected {
  background: var(--crimson-glow);
  color: var(--crimson);
  border-left-color: var(--crimson);
  font-weight: 600;
}

/* Το χρώμα του τίτλου ΔΕΝ κωδικοποιεί πια κατάσταση — αυτό το έλεγε η τριάδα
   EL·EN·RU ούτως ή άλλως, και μάλιστα μόνο για την τρέχουσα γλώσσα, που ερχόταν
   σε αντίφαση με την κουκκίδα δίπλα του. Ο τίτλος μένει ουδέτερος/ευανάγνωστος. */

.tree-icon {
  font-size: 9px;
  color: var(--text-muted);
  width: 12px;
  flex-shrink: 0;
}

.tree-children { display: none; }
.tree-children.open { display: block; }

/* ── Τριάδα EL·EN·RU (σελίδες) ─────────────────────────────
   Ένα τετράγωνο ανά γλώσσα, ΠΑΝΤΑ στη σειρά EL, EN, RU. Καμία άθροιση: φαίνεται
   ΠΟΙΑ γλώσσα λείπει, όχι πόσες — ο παλιός ενιαίος «κύκλος 0/1-2/3» απαιτούσε
   tooltip για να αποκωδικοποιηθεί.                                            */
.lang-triad {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
}

.lang-triad .lt {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  box-sizing: border-box;
}

/* Τα τρία — και μόνα — states. Ίδια όψη σε δέντρο και page-bar. */
.lt.st-published { background: var(--st-published); border: 1px solid var(--st-published); }
.lt.st-draft     { background: transparent;         border: 1px solid var(--st-draft); }
.lt.st-none      { background: var(--st-none);      border: 1px solid rgba(26,18,8,0.10); }

/* Στην page-bar λίγο μεγαλύτερη + ετικέτες γλώσσας από πάνω */
.page-bar .lang-triad { margin-left: 0; gap: 4px; }
.page-bar .lang-triad .lt { width: 9px; height: 9px; }

/* ── Τριάδα φακέλου ────────────────────────────────────────
   ΙΔΙΟ σχήμα και ίδιο λεξιλόγιο με τις σελίδες — γιατί απαντά την ΙΔΙΑ ερώτηση,
   απλώς σε άλλη κλίμακα («όλα τα κείμενα εδώ μέσα, σε ποιες γλώσσες είναι
   δημοσιευμένα;»). Προηγουμένως ο φάκελος είχε δακτύλιο, με σκεπτικό «διαφορετικό
   σχήμα = διαφορετική ερώτηση» — λάθος: η ερώτηση δεν ήταν διαφορετική, οπότε τα
   δύο σχήματα διάβαζαν σαν άσχετα μεγέθη.

   Το ότι ο φάκελος ΠΑΤΙΕΤΑΙ (μαζικό publish) δηλώνεται με συμπεριφορά — cursor
   και hover — όχι με άλλο σύμβολο: το σχήμα λέει τι ισχύει, το hover τι μπορείς
   να κάνεις.                                                                    */
.lang-triad.folder-triad {
  cursor: pointer;
  padding: 2px 3px;
  margin-right: -3px;
  border-radius: 2px;
  transition: background 0.15s, box-shadow 0.15s;
}

.lang-triad.folder-triad:hover {
  background: var(--crimson-glow);
  box-shadow: 0 0 0 1px var(--border-mid);
}

.lang-triad.folder-triad.triad-empty { cursor: default; opacity: 0.55; }
.lang-triad.folder-triad.triad-empty:hover { background: none; box-shadow: none; }
.lang-triad.folder-triad.triad-busy { opacity: 0.4; pointer-events: none; }

/* ── Υπόμνημα (σταθερό, κάτω από το δέντρο) ────────────────
   Η σημασιολογία δεν πρέπει να ζει αποκλειστικά σε title attributes. */
.nav-legend {
  border-top: 1px solid var(--border);
  padding: 7px 12px 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.7;
  flex-shrink: 0;
  user-select: none;
}

.nav-legend .legend-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.nav-legend .legend-row + .legend-row { margin-top: 2px; }
.nav-legend .lt { display: inline-block; width: 7px; height: 7px; border-radius: 1px; box-sizing: border-box; }
.nav-legend .legend-sep { opacity: 0.45; margin: 0 2px; }
.nav-legend .legend-order { letter-spacing: 0.04em; }

/* ════════════════════════════════════════════════════════
   EDITOR AREA
   ════════════════════════════════════════════════════════ */
.editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-page);
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.empty-state .icon { font-size: 52px; opacity: 0.20; }

.empty-state p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-style: italic;
  color: var(--text-muted);
}

.editor-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Page header bar */
.page-bar {
  padding: 9px 18px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(26,18,8,0.05);
}

.page-bar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.badge {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* ── Δείκτης αναποθήκευτων αλλαγών ─────────────────────────
   ΔΕΝ είναι κουκκίδα κατάστασης: ανήκει σε εντελώς άλλον άξονα (ροή επεξεργασίας,
   εφήμερο) από το publish state. Οι δύο άξονες μοιράζονταν παλιά την ίδια κουκκίδα
   και το ίδιο πορτοκαλί, που στο δέντρο σήμαινε «μερικώς δημοσιευμένο».
   Τώρα: κουκκίδα-τελεία πριν τον τίτλο, όπως στους code editors. */
.dirty-marker {
  display: none;
  font-size: 15px;
  line-height: 1;
  color: var(--crimson-soft);
  flex-shrink: 0;
}
.dirty-marker.on { display: inline-block; }

.badge.published {
  background: rgba(46,125,50,0.10);
  color: var(--st-published);
  border: 1px solid rgba(46,125,50,0.25);
}

.badge.untranslated {
  background: rgba(122,20,8,0.05);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.badge.draft {
  background: rgba(154,122,53,0.10);
  color: var(--gold);
  border: 1px solid rgba(154,122,53,0.35);
}

/* Split view */
.split-view { flex: 1; display: flex; overflow: hidden; }

.panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 150px; }

/* Drag splitter */
.splitter {
  width: 5px;
  background: var(--border-mid);
  cursor: col-resize;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
  user-select: none;
}

.splitter::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 32px;
  background: var(--crimson-soft);
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: 1px;
}

.splitter:hover, .splitter.dragging {
  background: var(--crimson-soft);
}

.splitter:hover::after, .splitter.dragging::after {
  opacity: 0.6;
}

.panel-header {
  padding: 7px 18px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--crimson);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header-btn {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 10px;
  border: 1px solid var(--border-mid);
  background: var(--bg-panel);
  color: var(--text-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
}

.panel-header-btn:hover {
  border-color: var(--crimson-mid);
  color: var(--crimson);
  background: white;
}

/* ── Content preview (original Greek) ────────────────── */
.content-preview {
  flex: 1;
  overflow-y: auto;
  padding: 20px 26px;
  background: var(--parchment-warm);
  color: #2a1a08;
}

.content-preview h1 { font-family: 'Palatino Linotype', serif; font-size: 12pt; color: rgb(204,0,0); font-weight: bold; text-align: center; margin: 20px 0 6px; }
.content-preview h2 { font-family: 'Palatino Linotype', serif; font-size: 11pt; font-weight: normal; color: rgb(204,0,0); text-align: center; margin-bottom: 6px; }
.content-preview h3 { font-family: 'Palatino Linotype', serif; font-size: 11pt; font-weight: normal; color: rgb(0,128,0); }
.content-preview p  { font-family: 'Palatino Linotype', serif; font-size: 11pt; margin-bottom: 8px; line-height: 1.65; }
.content-preview p::first-letter { font-weight: bold; color: rgb(204,0,0); }
.content-preview a  { color: rgb(0,0,160); text-decoration: none; }
.content-preview .not-loaded { color: #a08060; font-style: italic; padding: 20px 0; }
.panel > .toc-bar {
  flex-shrink: 0;
  background: var(--parchment-warm);
  padding: 8px 26px;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  text-align: center;
  line-height: 1.8;
  font-family: 'Palatino Linotype', serif;
  font-size: 11pt;
}
.panel > .toc-bar::first-letter { font-weight: normal; color: inherit; }

.content-preview.editing {
  outline: none;
  box-shadow: inset 6px 0 0 rgba(122,20,8,0.25);
  caret-color: var(--crimson);
}

.cancel-btn {
  padding: 8px 16px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}

.cancel-btn:hover {
  border-color: var(--border-bright);
  color: var(--text-primary);
}

/* ── Toolbar ──────────────────────────────────────────── */
.toolbar {
  padding: 6px 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.toolbar button {
  padding: 4px 10px;
  border: 1px solid var(--border-mid);
  background: var(--bg-panel);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: all 0.15s;
}

.toolbar button:hover {
  background: white;
  border-color: var(--crimson-mid);
  color: var(--crimson);
  box-shadow: 0 1px 4px rgba(122,20,8,0.10);
}

.toolbar button:active { background: var(--crimson-glow); }

.toolbar .sep {
  color: var(--border-mid);
  font-size: 18px;
  margin: 0 2px;
  line-height: 1;
}

.btn-red { color: #aa3322 !important; border-color: rgba(170,51,34,0.3) !important; }
.btn-red:hover { color: var(--crimson) !important; border-color: var(--crimson) !important; background: var(--crimson-glow) !important; }
.btn-black { color: var(--text-secondary) !important; }
.btn-link  { font-size: 11px !important; }

/* ── Editor (contenteditable) ─────────────────────────── */
.editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 26px;
  outline: none;
  background: var(--parchment-warm);
  color: #2a1a08;
  font-family: 'Palatino Linotype', serif;
  font-size: 11pt;
  line-height: 1.65;
  caret-color: var(--crimson);
  transition: box-shadow 0.2s;
}

.editor-content:focus {
  box-shadow: inset 6px 0 0 rgba(122,20,8,0.25);
}

.editor-content h1 { color: rgb(204,0,0); font-size: 12pt; font-weight: bold; text-align: center; margin: 20px 0 6px; }
.editor-content h2 { color: rgb(204,0,0); font-size: 11pt; font-weight: normal; text-align: center; margin-bottom: 6px; }
.editor-content h3 { color: rgb(0,128,0); font-size: 11pt; font-weight: normal; }
.editor-content p  { margin-bottom: 8px; }
.editor-content p::first-letter { font-weight: bold; color: rgb(204,0,0); }
.editor-content a  { color: rgb(0,0,160); text-decoration: none; }
.editor-content:empty::before {
  content: 'Γράψτε εδώ τη μετάφραση…';
  color: #b09878;
  pointer-events: none;
  font-style: italic;
}

.editor-content[contenteditable="false"]:empty::before {
  content: 'Δεν υπάρχει μετάφραση ακόμα — πάτησε «Επεξεργασία» για να ξεκινήσεις.';
}

.translation-edit-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Panel footer (κουμπιά ανά panel — πρωτότυπο αριστερά, μετάφραση δεξιά) ── */
.panel-footer {
  padding: 10px 16px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
  box-shadow: 0 -1px 4px rgba(26,18,8,0.05);
  justify-content: flex-end;
}

.save-btn {
  padding: 8px 28px;
  background: var(--crimson);
  color: #f8f0e4;
  border: none;
  border-radius: var(--radius);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.save-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
}

.save-btn:not(:disabled):hover {
  background: var(--crimson-mid);
  box-shadow: 0 4px 14px rgba(122,20,8,0.28);
}

.save-btn:disabled { opacity: 0.40; cursor: not-allowed; }

.save-msg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-style: italic;
  color: var(--text-muted);
}

.save-msg.ok  { color: #2e7d32; }
.save-msg.err { color: var(--crimson-soft); }

.save-btn-secondary {
  background: var(--bg-elevated) !important;
  color: var(--crimson) !important;
  border: 1px solid var(--border-mid) !important;
}

.save-btn-secondary:not(:disabled):hover {
  background: var(--crimson-glow) !important;
  border-color: var(--crimson) !important;
  box-shadow: none !important;
}

.save-btn-publish {
  background: #2e7d32 !important;
}

.save-btn-publish:not(:disabled):hover {
  background: #276b2a !important;
  box-shadow: 0 4px 14px rgba(46,125,50,0.28) !important;
}

.save-btn-publish:disabled {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
}

.save-btn-unpublish {
  background: var(--bg-elevated) !important;
  color: var(--crimson-mid) !important;
  border: 1px solid var(--border-mid) !important;
}

.save-btn-unpublish:not(:disabled):hover {
  background: var(--crimson-glow) !important;
  border-color: var(--crimson) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════
   LINK PICKER MODAL
   ════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,18,8,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}

.modal::before {
  content: '';
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--crimson) 30%, var(--crimson) 70%, transparent 95%);
  flex-shrink: 0;
}

.modal-header {
  padding: 14px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header span {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.modal-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
  transition: color 0.15s;
}

.modal-close:hover { color: var(--crimson); }

.modal-search-wrap {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-search-wrap input {
  width: 100%;
  padding: 7px 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--text-primary);
}

.modal-search-wrap input:focus { outline: none; border-color: var(--crimson-mid); }
.modal-search-wrap input::placeholder { color: var(--text-muted); }

.modal-tree {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.link-tree-folder {
  padding: 5px 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 2px solid transparent;
  margin: 1px 5px;
  border-radius: var(--radius);
  transition: all 0.12s;
}

.link-tree-folder:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.link-tree-leaf {
  padding: 5px 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  border-left: 2px solid transparent;
  margin: 1px 5px;
  border-radius: var(--radius);
  transition: all 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-tree-leaf:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-left-color: var(--crimson-soft);
}

.link-tree-leaf.selected {
  background: var(--crimson-glow);
  color: var(--crimson);
  border-left-color: var(--crimson);
  font-weight: 600;
}

.modal-footer {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg-surface);
}

.modal-manual label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.modal-manual input {
  width: 100%;
  padding: 7px 11px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--text-primary);
}

.modal-manual input:focus { outline: none; border-color: var(--crimson-mid); }
.modal-manual input::placeholder { color: var(--text-muted); }

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Anchor heading list ──────────────────────────────── */
.anchor-list { padding: 8px 0; min-height: 80px; }

.anchor-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.12s;
}

.anchor-item:hover {
  background: var(--bg-surface);
  border-left-color: var(--crimson);
}

.anchor-tag {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--crimson);
  min-width: 24px;
}

.anchor-label {
  font-family: 'Cormorant Garamond', serif;
  color: var(--text-primary);
}

.anchor-h1 .anchor-label { font-size: 16px; font-weight: 600; }
.anchor-h2 .anchor-label { font-size: 15px; padding-left: 12px; }
.anchor-h3 .anchor-label { font-size: 14px; padding-left: 24px; color: var(--text-secondary); }

/* ════════════════════════════════════════════════════════
   SEARCH — mode toggle + αναλυτικά αποτελέσματα
   ════════════════════════════════════════════════════════ */
.search-mode-toggle {
  display: flex;
  gap: 4px;
  margin-top: 7px;
}

.search-mode-btn {
  flex: 1;
  padding: 4px 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}

.search-mode-btn:hover { border-color: var(--crimson-mid); color: var(--crimson); }

.search-mode-btn.active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #f8f0e4;
}

.search-mode-hint {
  margin-top: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
}

.search-input-wrap { position: relative; }
.search-input-wrap input { padding-right: 34px; }

.accent-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.accent-toggle:hover { color: var(--crimson); border-color: var(--border-mid); }
.accent-toggle.active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #f8f0e4;
}

.search-results { flex: 1; overflow-y: auto; padding: 6px; }

.search-status {
  padding: 16px 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13.5px;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
}

.search-result {
  display: block;
  padding: 8px 10px;
  margin-bottom: 5px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--crimson-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}

.search-result:hover {
  background: white;
  border-left-color: var(--crimson);
  box-shadow: 0 1px 6px rgba(122,20,8,0.10);
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.result-crumb {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(154,122,53,0.10);
  border-radius: var(--radius);
  padding: 2px 6px;
}

.result-count {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--crimson);
  background: rgba(122,20,8,0.08);
  border-radius: var(--radius);
  padding: 2px 6px;
  white-space: nowrap;
}

.result-title {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.result-snippet {
  margin-top: 5px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 5px 7px;
}

.search-result mark {
  background: rgba(115,92,0,0.18);
  color: inherit;
  border-radius: 1px;
}