/* Egitto ERP
   ---------------------------------------------------------------------------
   Navy carries the structure, amber marks the one thing you are looking at,
   and money keeps the green/red it has in every ledger. Nothing is loaded from
   the internet - no web fonts, no CDN - because this is meant to run on a
   company server that may have no way out to the network, and a screen that
   half-arrives is worse than a plain one. */

:root{
  --bg:#EFF2F6;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --line:#DDE3EA;
  --line-soft:#EAEEF3;

  --ink:#16202B;
  --muted:#57646F;
  --faint:#8A96A2;

  --navy:#12395F;
  --navy-deep:#0C2942;
  --navy-soft:#E7EEF6;

  --accent:#D99A1E;
  --accent-soft:#FDF4DE;
  --accent-ink:#7A5808;

  --in:#1E7F52;      /* debit / money in  */
  --out:#C0392B;     /* credit / money out */
  --in-soft:#E8F5EE;
  --out-soft:#FBEAE8;

  --radius:9px;
  --shadow:0 1px 2px rgba(16,32,48,.05), 0 8px 22px -14px rgba(16,32,48,.25);
  --sidebar:252px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",system-ui,sans-serif;
  font-size:14.5px; line-height:1.55;
  display:flex; min-height:100vh;
}
a{color:var(--navy); text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font-family:inherit; font-size:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ------------------------------------------------------------------ sidebar */
.side{
  width:var(--sidebar); flex:none; background:var(--navy); color:#DCE6F0;
  display:flex; flex-direction:column; overflow-y:auto; position:sticky; top:0;
  height:100vh;
}
.side .brand{padding:18px 18px 15px; border-bottom:1px solid rgba(255,255,255,.10)}
.side .brand b{display:block; font-size:17px; color:#fff; letter-spacing:-.2px}
.side .brand span{display:block; font-size:11.5px; color:#93A9C0; margin-top:2px}

.navhead{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; padding:15px 18px 6px; border:0; background:none; cursor:pointer;
  color:#8FA6BE; font-size:11px; letter-spacing:.07em; text-align:right;
}
.navhead:hover{color:#C7D6E6}
.navhead .mark{display:flex; align-items:center; gap:7px}
.navhead .chev{font-size:15px; line-height:1; color:#C9A25A; transition:transform .18s ease}
.navhead.shut .chev{transform:rotate(90deg)}
.navhead .dot{width:5px; height:5px; border-radius:50%; background:var(--accent); display:none}
.navhead.has-on .dot{display:block}

.navitem{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 18px; color:#C3D2E2; font-size:14px;
  border-inline-start:3px solid transparent;
}
.navitem:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.navitem.on{
  background:rgba(217,154,30,.14); color:#FFDFA1; font-weight:600;
  border-inline-start-color:var(--accent);
}
.side .foot{
  margin-top:auto; padding:14px 18px; border-top:1px solid rgba(255,255,255,.10);
  font-size:12px; color:#8FA6BE;
}

/* --------------------------------------------------------------------- main */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 22px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20;
}
.topbar h1{margin:0; font-size:18px; font-weight:700}
.topbar .spacer{flex:1}
.yearpick{display:flex; align-items:center; gap:7px; margin:0}
.yearpick label{font-size:11.5px; color:var(--faint)}
.yearpick select{
  width:auto; padding:5px 9px; font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; border-radius:6px;
}
.who{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted)}
.who .avatar{
  width:30px; height:30px; border-radius:50%; background:var(--navy-soft);
  color:var(--navy); display:grid; place-items:center; font-weight:700; font-size:13px;
}
.content{padding:20px 22px 60px; flex:1}

/* ------------------------------------------------------------------ notices */
.flash{
  padding:10px 14px; border-radius:var(--radius); margin-bottom:14px;
  border:1px solid; font-size:14px;
}
.flash.ok{background:var(--in-soft); border-color:#BFE0CE; color:#14603C}
.flash.bad{background:var(--out-soft); border-color:#F0C6C0; color:#8E2A1F}

/* ------------------------------------------------------------------- panels */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px;
}
.panel > h2{
  margin:0; padding:13px 16px; font-size:14.5px; font-weight:700;
  border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px;
}
.panel > h2 .spacer{flex:1}
.panel .body{padding:16px}
.panel .body.flush{padding:0}

/* -------------------------------------------------------------------- tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-bottom:18px}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow);
}
.tile .k{font-size:12px; color:var(--faint)}
.tile .v{
  font-size:22px; font-weight:700; margin-top:5px;
  font-variant-numeric:tabular-nums; letter-spacing:-.3px;
}
.tile .v small{font-size:12px; font-weight:600; color:var(--faint); margin-inline-start:4px}
.tile.in .v{color:var(--in)}
.tile.out .v{color:var(--out)}
.tile.cash .v,.tile.bank .v{color:var(--navy)}

/* ------------------------------------------------------------------- tables */
.wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:9px 12px; text-align:right; border-bottom:1px solid var(--line-soft)}
thead th{
  background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:700;
  letter-spacing:.02em; position:sticky; top:0; border-bottom:1px solid var(--line);
}
tbody tr:hover{background:#FAFBFD}
tbody tr:last-child td{border-bottom:0}
/* Figures read left to right inside the cell, but sit against its right
   edge - the same edge a heading sits against - so a column of numbers
   stands under its own name instead of beside the next one along. */
.num{font-variant-numeric:tabular-nums; text-align:right; direction:ltr; white-space:nowrap}
.debit{color:var(--in)}
.credit{color:var(--out)}
tfoot td{font-weight:700; background:var(--surface-2); border-top:2px solid var(--line)}
.tree-pad{display:inline-block}
tr.group td{background:#FBFCFD; font-weight:700}
.empty{padding:34px 16px; text-align:center; color:var(--faint)}

/* -------------------------------------------------------------------- forms */
.field{margin-bottom:13px}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px}
input[type=text],input[type=password],input[type=date],input[type=email],
input[type=number],select,textarea{
  width:100%; padding:8px 10px; background:var(--surface);
  border:1px solid var(--line); border-radius:7px; color:var(--ink);
}
input:disabled,select:disabled{background:var(--surface-2); color:var(--faint)}
textarea{min-height:70px; resize:vertical}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 16px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 16px}
.check{display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:14px}
.check input{width:16px; height:16px; accent-color:var(--navy)}
.hint{font-size:12px; color:var(--faint); margin-top:5px}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 15px;
  border:1px solid var(--line); border-radius:7px; background:var(--surface);
  color:var(--ink); cursor:pointer; font-size:14px; font-weight:600;
}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn.primary{background:var(--navy); border-color:var(--navy); color:#fff}
.btn.primary:hover{background:var(--navy-deep)}
.btn.gold{background:var(--accent); border-color:var(--accent); color:#3A2A05}
.btn.gold:hover{filter:brightness(.96)}
.btn.danger{color:var(--out); border-color:#EFC9C3}
.btn.danger:hover{background:var(--out-soft)}
.btn.small{padding:5px 10px; font-size:13px; font-weight:600}
.actions{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.toolbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar .spacer{flex:1}
.toolbar input[type=text],.toolbar input[type=date],.toolbar select{width:auto; min-width:150px}

/* --------------------------------------------------------------------- tags */
.tag{
  display:inline-block; padding:2px 9px; border-radius:99px; font-size:11.5px;
  font-weight:700; border:1px solid;
}
.tag.draft{background:var(--accent-soft); border-color:#EBD49B; color:var(--accent-ink)}
.tag.posted{background:var(--in-soft); border-color:#BFE0CE; color:#14603C}
.tag.void{background:#F1F3F6; border-color:var(--line); color:var(--faint)}
.tag.asset,.tag.expense{background:var(--navy-soft); border-color:#C9DAEB; color:var(--navy)}
.tag.liability,.tag.income,.tag.equity{background:#F3EEF8; border-color:#DCCDE9; color:#5B3B7A}

/* ------------------------------------------------------------- entry editor */
.lines th{font-size:11.5px}
.lines td{padding:5px 7px; border-bottom:1px solid var(--line-soft)}
.lines select,.lines input{padding:6px 8px; border-radius:6px}
.lines input.amount{text-align:left; direction:ltr; font-variant-numeric:tabular-nums}
.lines .drop{width:38px; text-align:center}
.balance-bar{
  display:flex; gap:22px; align-items:center; padding:12px 16px;
  background:var(--surface-2); border-top:1px solid var(--line); flex-wrap:wrap;
}
.balance-bar .k{font-size:12px; color:var(--faint); display:block}
.balance-bar .v{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; direction:ltr}
.balance-bar .diff.ok{color:var(--in)}
.balance-bar .diff.bad{color:var(--out)}

/* ------------------------------------------------------------- sign-in page */
.gate{
  margin:auto; width:min(400px,92vw); background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:28px;
}
body.centred{display:grid; place-items:center; background:
  linear-gradient(160deg,#0C2942 0%,#12395F 46%,#1B4E7D 100%);}
.gate h1{margin:0 0 4px; font-size:21px}
.gate p.sub{margin:0 0 20px; color:var(--faint); font-size:13px}

/* -------------------------------------------------------------- permissions */
.perm-group{border:1px solid var(--line); border-radius:8px; padding:11px 13px; margin-bottom:11px}
.perm-group h4{margin:0 0 8px; font-size:13px; color:var(--navy)}
.perm-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:4px 14px}

/* ------------------------------------------------------------------- print */
@media print{
  .side,.topbar,.toolbar,.btn,.actions,.flash{display:none!important}
  body{background:#fff; display:block}
  .content{padding:0}
  .panel{border:0; box-shadow:none; margin:0}
  thead th{position:static}
}

/* ------------------------------------------------------------ pin a screen */
.pin{
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:4px 11px; font-size:12px; font-weight:600; color:var(--muted);
  cursor:pointer; white-space:nowrap; margin-right:10px;
}
.pin:hover{background:var(--surface-2); color:var(--ink)}
.pin.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
.pin[hidden]{display:none}