/* ============================================================
   dialogistis — premium design system  ("quiet luxury fintech")
   Font: Commissioner (πλήρη ελληνικά)
   ============================================================ */
:root{
  --font: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --bg:#F4F5F2;          /* warm neutral canvas */
  --bg-2:#ECEEE9;
  --card:#FFFFFF;
  --ink:#14181F;         /* near-black slate */
  --navy:#182430;        /* headings / deep (κρατείται για inline styles) */
  --navy2:#26343f;
  --muted:#69727E;
  --faint:#98A0AB;
  --line:rgba(20,24,31,.09);
  --line-2:rgba(20,24,31,.14);

  --brand:#0B7B5B;       /* emerald */
  --brand-2:#0A6A4E;
  --brand-soft:#E6F2ED;
  --green:#0B7B5B;       /* income */
  --red:#C0392B;         /* expenses */
  --red-soft:#FBEDEB;
  --purple:#5B54D6;      /* ΦΠΑ / accent */
  --purple-soft:#ECEBFB;
  --amber:#9A6B1A;
  --amber-soft:#FBF0DC;

  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(16,24,32,.05);
  --shadow:0 1px 3px rgba(16,24,32,.04), 0 12px 28px -14px rgba(16,24,32,.16);
  --shadow-lg:0 28px 60px -28px rgba(12,18,26,.32);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  letter-spacing:-.011em;line-height:1.55;
  background-image:radial-gradient(1200px 600px at 100% -10%, rgba(11,123,91,.05), transparent 60%);}
::selection{background:rgba(11,123,91,.16)}
a{color:var(--brand);text-decoration:none;transition:color .15s}
a:hover{color:var(--brand-2)}

/* ---------- Top navigation ---------- */
nav.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:0 22px;min-height:62px;
  background:linear-gradient(180deg,#111C26,#0E1720);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 24px -12px rgba(0,0,0,.5);}
nav.top a{color:rgba(233,238,244,.72);padding:8px 13px;border-radius:9px;font-size:14px;font-weight:500;
  transition:background .16s,color .16s}
nav.top a:hover{background:rgba(255,255,255,.08);color:#fff}
nav.top .sp{flex:1}
nav.top .code{font-family:ui-monospace,'SF Mono',Menlo,monospace;background:rgba(255,255,255,.09);
  color:#cfeee1;padding:5px 11px;border-radius:8px;font-size:12px;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.08)}

/* ---------- Layout & headings ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:30px 24px 60px}
h1{font-size:27px;font-weight:600;color:var(--navy);margin:0 0 5px;letter-spacing:-.02em}
h2{font-size:16px;font-weight:600;color:var(--navy);margin:0 0 16px;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:14px;margin:0 0 22px}

/* ---------- Panels & cards ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;box-shadow:var(--shadow);
  animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px 18px;
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;
  animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card .l{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.card .v{font-size:26px;font-weight:700;margin-top:8px;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cards .card:nth-child(2){animation-delay:.04s}
.cards .card:nth-child(3){animation-delay:.08s}
.cards .card:nth-child(4){animation-delay:.12s}
.cards .card:nth-child(5){animation-delay:.16s}
.cards .card:nth-child(6){animation-delay:.2s}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Forms ---------- */
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 5px;font-weight:500}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  font-size:14.5px;font-family:inherit;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:rgba(20,24,31,.22)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3.5px rgba(11,123,91,.14)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;border:none;
  border-radius:var(--radius-sm);padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;letter-spacing:-.01em;box-shadow:0 1px 2px rgba(11,123,91,.25),0 6px 16px -8px rgba(11,123,91,.5);
  transition:transform .14s,box-shadow .14s,background .14s}
.btn:hover{background:var(--brand-2);transform:translateY(-1px);color:#fff;text-decoration:none;
  box-shadow:0 2px 4px rgba(11,123,91,.28),0 10px 22px -8px rgba(11,123,91,.55)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:16px;height:16px;flex:none}
.btn.sec{background:#fff;color:var(--navy);border:1px solid var(--line-2);box-shadow:var(--shadow-sm)}
.btn.sec:hover{background:var(--bg-2);color:var(--navy);box-shadow:var(--shadow-sm)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px}
.btn.g{background:var(--brand)}.btn.r{background:var(--red)}
.btn.r:hover{background:#a5312673}

/* Icon buttons (ενέργειες γραμμής) */
.actions{display:inline-flex;gap:6px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:33px;height:33px;padding:0;
  border:1px solid var(--line-2);background:#fff;border-radius:9px;color:#616b77;cursor:pointer;
  transition:all .14s;box-shadow:var(--shadow-sm)}
.iconbtn:hover{background:var(--bg-2);color:var(--navy);border-color:rgba(20,24,31,.24);
  transform:translateY(-1px);text-decoration:none}
.iconbtn:active{transform:translateY(0) scale(.94)}
.iconbtn svg{width:16px;height:16px}
.iconbtn.danger:hover{color:var(--red);border-color:rgba(192,57,43,.4);background:var(--red-soft)}
.iconbtn.accent:hover{color:var(--brand);border-color:rgba(11,123,91,.4);background:var(--brand-soft)}

/* Dropzone (upload) */
.drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:26px;text-align:center;
  background:var(--bg-2);transition:all .16s;cursor:pointer}
.drop:hover,.drop.hot{border-color:var(--brand);background:var(--brand-soft)}
.drop .ic{color:var(--brand);margin-bottom:8px}
.drop .ic svg{width:30px;height:30px;stroke-width:1.6}
.drop input{display:none}
.drop .hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.drop .picked{font-size:13px;color:var(--brand-2);font-weight:600;margin-top:8px}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:10.5px;text-transform:uppercase;color:var(--faint);letter-spacing:.07em;font-weight:600}
tr:last-child td{border-bottom:none}
tbody tr,table tr{transition:background .12s}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
#docs tr[data-kind]:hover td{background:rgba(11,123,91,.035)}

/* ---------- Badges & pills ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:7px;font-size:11px;font-weight:600;letter-spacing:.01em}
.b-expense{background:var(--red-soft);color:#a5312a}
.b-income{background:var(--brand-soft);color:#0a5f47}
.b-bank_payment{background:var(--purple-soft);color:#4741ad}
.b-legal_document{background:#eef1f4;color:#42505f}
.b-non_expense_proof{background:var(--amber-soft);color:#8a5f14}
.b-unknown{background:#f0f1ee;color:#666}
.pill{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;background:var(--bg-2);color:#4a5560;font-weight:500}
.pill.warn{background:var(--amber-soft);color:#8a5f14}

/* ---------- Bars (charts) ---------- */
.bar{height:8px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin-top:5px}
.bar>span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#0B7B5B,#12a074)}

.muted{color:var(--muted)}.small{font-size:12.5px}

/* ---------- Alerts ---------- */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:14px;
  border:1px solid transparent;display:flex;align-items:center;gap:9px}
.alert.err{background:var(--red-soft);color:#8a2820;border-color:rgba(192,57,43,.18)}
.alert.ok{background:var(--brand-soft);color:#0a5f47;border-color:rgba(11,123,91,.2)}

/* ---------- Filters ---------- */
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.fbtn{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;
  cursor:pointer;color:#4a5560;font-family:inherit;font-weight:500;transition:all .14s}
.fbtn:hover{border-color:rgba(20,24,31,.28);background:var(--bg-2)}
.fbtn.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;border-radius:20px;padding:34px 32px;margin-bottom:24px;
  background:linear-gradient(135deg,#132532 0%,#0E1B24 60%,#0c2a22 130%);
  box-shadow:var(--shadow-lg);animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.hero::after{content:"";position:absolute;top:-40%;right:-10%;width:460px;height:460px;
  background:radial-gradient(circle,rgba(18,160,116,.28),transparent 62%);pointer-events:none}
.hero h1{color:#fff;font-size:29px;position:relative}
.hero .sub{color:rgba(215,228,224,.82);position:relative;margin-bottom:20px}
.hero .btn.sec{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.16);backdrop-filter:blur(4px)}
.hero .btn.sec:hover{background:rgba(255,255,255,.17);color:#fff}

/* ---------- Misc components ---------- */
.grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}
@media(max-width:840px){.grid2{grid-template-columns:1fr}}
.codebox{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:19px;letter-spacing:.06em;
  background:var(--brand-soft);border:1px solid rgba(11,123,91,.22);color:var(--brand-2);
  padding:13px 18px;border-radius:12px;display:inline-block;font-weight:600}
.mlist a{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;
  border:1px solid var(--line);border-radius:12px;margin-bottom:9px;color:var(--ink);
  background:#fff;transition:border-color .15s,transform .15s,box-shadow .15s}
.mlist a:hover{border-color:rgba(11,123,91,.4);transform:translateX(2px);text-decoration:none;box-shadow:var(--shadow-sm)}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo .mk{width:33px;height:33px;border-radius:10px;background:linear-gradient(150deg,#12a074,#0B7B5B);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px -3px rgba(11,123,91,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.logo .mk svg{width:19px;height:19px;fill:currentColor}
.logo .wm{font-size:21px;font-weight:700;letter-spacing:-.035em;color:var(--navy)}
.logo .wm b{color:var(--brand);font-weight:700}
.logo.big{flex-direction:column;gap:15px}
.logo.big .mk{width:60px;height:60px;border-radius:17px}
.logo.big .mk svg{width:34px;height:34px}
.logo.big .wm{font-size:37px}
nav.top .logo{margin-right:12px}
nav.top .logo .wm{color:#fff}
nav.top .logo .wm b{color:#5fe0b0}
nav.top .logo .mk{box-shadow:0 3px 10px -2px rgba(11,123,91,.6)}