/* ══════════════════════════════════════════════════════════════════════════
   The application's own styling, on top of Bootstrap.

   Bootstrap supplies the reset, the grid, the form controls and the two
   colour schemes; this file supplies the shell (topbar, sidebar, content),
   the table and figure conventions, and the small number of components the
   product needs that Bootstrap has no opinion about.

   Both themes come from one set of custom properties keyed off
   `[data-bs-theme]`, which is the same attribute Bootstrap reads — so the
   theme button flips both at once and there is no second switch to forget.

   Checked at 390px and at desktop width, in both themes.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --shell-bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --line: #dfe3e8;
  --ink: #1b2430;
  --ink-soft: #5b6673;
  --ink-faint: #8b95a1;
  --accent: #0b6bcb;
  --accent-soft: #e7f0fb;
  /* The two series that run through the whole application. Validated against
     the light chart surface with the dataviz palette checker: lightness band,
     chroma floor, CVD separation (ΔE 18.4 protan), normal-vision separation
     and 3:1 contrast all pass. Do not nudge them by eye. */
  --awarded: #0b6bcb;
  --received: #1f8a70;
  --grid: #e6e9ed;
  --axis: #c3c8ce;
  --warn: #b45309;
  --side-w: 232px;
  --radius: 10px;
}

[data-bs-theme="dark"] {
  --shell-bg: #12161c;
  --panel: #1a1f27;
  --panel-2: #212832;
  --line: #2e3843;
  --ink: #e6eaef;
  --ink-soft: #a3adba;
  --ink-faint: #78838f;
  --accent: #6aa9f0;
  --accent-soft: #17293f;
  /* Dark is SELECTED, not a flip of the light pair: the light steps sit at
     OKLCH L 0.72+, outside the dark band of 0.48–0.67. These two are
     re-validated against the dark chart surface (#1a1f27) and pass all five
     checks. */
  --awarded: #4a90e2;
  --received: #35a882;
  --grid: #29323d;
  --axis: #3c4753;
  --warn: #e0a03a;
}

body {
  background: var(--shell-bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
}

/* ── Shell ──────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .9rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: .5rem;
  color: var(--ink); text-decoration: none; font-size: 1.05rem;
}
.brand i { color: var(--accent); font-size: 1.25rem; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.who { display: none; line-height: 1.15; text-align: right; }
@media (min-width: 768px) { .who { display: block; } }
.who-name { display: block; font-weight: 600; font-size: .85rem; }
.who-role { display: block; font-size: .75rem; color: var(--ink-faint); }

.body { display: flex; align-items: flex-start; }

.side {
  width: var(--side-w); flex: 0 0 var(--side-w);
  position: sticky; top: 49px; height: calc(100vh - 49px);
  overflow-y: auto; padding: .75rem .6rem;
  background: var(--panel); border-right: 1px solid var(--line);
}
.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; margin-bottom: .15rem;
  border-radius: var(--radius);
  color: var(--ink-soft); text-decoration: none; font-size: .9rem;
}
.nav-item i { width: 1.1rem; text-align: center; font-size: 1rem; }
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.main { flex: 1 1 auto; min-width: 0; padding: 1rem 1.1rem 3rem; }

@media (max-width: 991.98px) {
  .side {
    position: fixed; inset: 49px auto 0 0; z-index: 40;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, .18);
  }
  .side.open { transform: none; }
  .main { padding: .85rem .8rem 3rem; }
}

/* ── Page furniture ─────────────────────────────────────────────────────── */

.page-head { margin-bottom: 1rem; }
.page-head .crumbs {
  font-size: .82rem; color: var(--ink-faint); margin-bottom: .2rem;
}
.page-head .crumbs a { color: var(--ink-soft); text-decoration: none; }
.page-head .crumbs a:hover { text-decoration: underline; }
.page-title { font-size: 1.4rem; font-weight: 650; margin: 0; line-height: 1.25; }
.page-sub { color: var(--ink-soft); font-size: .88rem; margin-top: .2rem; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 1rem;
}
.panel-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .85rem; border-bottom: 1px solid var(--line);
}
.panel-title { font-size: .95rem; font-weight: 620; margin: 0; }
.panel-note { font-size: .8rem; color: var(--ink-faint); }
.panel-body { padding: .85rem; }
.panel-body.flush { padding: 0; }

/* ── Figures ────────────────────────────────────────────────────────────────
   Two money columns run through the whole application: what was awarded and
   what was received. They are coloured consistently everywhere — including in
   the charts — because the pair appears on nearly every screen and a reader
   should not have to check the header each time.
   ─────────────────────────────────────────────────────────────────────────── */

.stat-row { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .8rem;
}
.stat-label {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-faint); display: flex; align-items: center; gap: .35rem;
}
.stat-value { font-size: 1.32rem; font-weight: 650; margin-top: .15rem; line-height: 1.2; }
.stat-note { font-size: .78rem; color: var(--ink-soft); margin-top: .1rem; }

/* Identity is carried by a coloured key BESIDE the text, never by colouring
   the number. A figure written in the series hue is a light colour used as
   text — illegible at small sizes and unreadable to anyone the hue is hard
   for; the swatch does the same job without spending the text's legibility. */
.key {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 2px;
  flex: 0 0 auto;
}
.key.awarded { background: var(--awarded); }
.key.received { background: var(--received); }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num .key { margin-right: .3rem; vertical-align: baseline; }
.muted { color: var(--ink-faint); }
.small-note { font-size: .8rem; color: var(--ink-soft); }

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
table.grid { width: 100%; margin: 0; border-collapse: collapse; font-size: .88rem; }
table.grid th, table.grid td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
table.grid thead th {
  position: sticky; top: 0; background: var(--panel-2);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-faint); font-weight: 600; white-space: nowrap; z-index: 1;
}
table.grid tbody tr.clickable { cursor: pointer; }
table.grid tbody tr.clickable:hover { background: var(--panel-2); }
table.grid td .sub { display: block; font-size: .78rem; color: var(--ink-faint); }
table.grid th.sortable { cursor: pointer; user-select: none; }
table.grid th.sortable:hover { color: var(--ink); }
table.grid th .dir { opacity: .75; }

.pill {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .74rem; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--ink-soft); white-space: nowrap;
}
.pill.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.pill.warn { background: transparent; border-color: var(--warn); color: var(--warn); }

/* ── Search ─────────────────────────────────────────────────────────────── */

.search-hero { max-width: 720px; margin: 1.5rem auto 1rem; text-align: center; }
.search-hero h1 { font-size: 1.5rem; font-weight: 650; }
.search-hero p { color: var(--ink-soft); font-size: .92rem; }
.search-box { position: relative; margin-top: 1rem; }
.search-box input { padding: .7rem 1rem .7rem 2.4rem; font-size: 1.02rem; }
.search-box .bi-search {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint);
}
.chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: .7rem; }
.chip {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: .22rem .7rem; font-size: .82rem;
  color: var(--ink-soft); cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

.result-card {
  display: block; padding: .7rem .85rem; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.result-card:last-child { border-bottom: 0; }
.result-card:hover { background: var(--panel-2); }
.result-name { font-weight: 600; }
.result-meta { font-size: .82rem; color: var(--ink-faint); margin-top: .1rem; }

/* ── Empty, skeleton, toast ─────────────────────────────────────────────── */

.empty-state { text-align: center; padding: 2.4rem 1rem; color: var(--ink-faint); }
.empty-state i { font-size: 1.8rem; display: block; margin-bottom: .5rem; }
.empty-state p { margin-bottom: .6rem; }

.skeleton { padding: .4rem 0; }
.skeleton-bar {
  height: 2.1rem; border-radius: var(--radius); margin-bottom: .55rem;
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite linear;
}
.skeleton-bar.short { width: 55%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } }

.toast-root { position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 90; }
.toast-note {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16); font-size: .9rem; max-width: 92vw;
}
.toast-note.bad { border-color: #c0392b; color: #c0392b; }
.toast-note.good { border-color: var(--received); color: var(--received); }

/* ── Modal ──────────────────────────────────────────────────────────────── */

.modal-back {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .42);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); width: 100%; max-width: 460px;
  padding: 1rem 1.1rem;
}
.modal-card h2 { font-size: 1.05rem; font-weight: 620; margin-bottom: .8rem; }

/* ── Charts ─────────────────────────────────────────────────────────────── */

.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 320px; }

/* ── Login ──────────────────────────────────────────────────────────────── */

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.login-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem; width: 100%; max-width: 380px;
}
.login-card .brand { justify-content: center; margin-bottom: 1.1rem; font-size: 1.2rem; }

/* The card carries four screens — σύνδεση, ξεχασμένος κωδικός, and the two
   forms a one-time link opens. Only the last three are titled: the sign-in
   form needs no heading above the brand, and adding one to it would push the
   fields below the fold on a phone. */
.login-card .login-title {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 .35rem;
  text-align: center; color: var(--ink);
}
.login-card .small-note { margin-bottom: 1rem; text-align: center; }
.login-card .small-note:last-child { margin-bottom: 0; }

/* Print: the sidebar and the buttons are not part of a report. */
@media print {
  .side, .topbar, .btn, .chips { display: none !important; }
  .main { padding: 0; }
  .panel { break-inside: avoid; border-color: #bbb; }
}