/* ===========================================================================
   Mehdi Traders - General Ledger, website
   Navy, white and one line of gold. The same house style as the Windows
   program, so the two read as one system.
   =========================================================================== */

:root{
  --ink:#1f2933; --muted:#5f6973; --line:#cbd1d8; --paper:#f3f6f9;
  --navy:#17375e; --navy-deep:#0f2642; --navy-mid:#28527e; --navy-soft:#e8eef5;
  --gold:#c49a30; --amber:#8a5a08; --rose:#a3243b;
  --head:#17375e;
  /* older pages still name these */
  --teal:#17375e; --teal-soft:#e8eef5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font:14px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--navy-mid)}
a:hover{color:var(--navy)}
.wrap{max-width:1500px;margin:0 auto;padding:0 18px}
.mono{font-family:Consolas,"SF Mono",monospace;font-variant-numeric:tabular-nums}

/* header -------------------------------------------------------------- */
.top{background:linear-gradient(90deg,var(--navy),var(--navy-deep));
  border-bottom:3px solid var(--gold)}
.top .wrap{display:flex;align-items:center;gap:18px;height:54px;flex-wrap:wrap}
.brand{font-family:Georgia,serif;font-size:19px;font-weight:700;
  color:#fff;text-decoration:none;letter-spacing:.01em}
.brand:hover{color:#fff}
.co{font-weight:600;color:#fff}
.yr{font-size:12px;color:#b9cce3;letter-spacing:.02em}
.spacer{flex:1}
.who{font-size:13px;color:#b9cce3}
.out{font-size:13px;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.35);border-radius:5px;padding:4px 11px}
.out:hover{background:rgba(255,255,255,.14);color:#fff}

/* nav ----------------------------------------------------------------- */
.bar{background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;box-shadow:0 1px 3px rgba(16,40,66,.05)}
.bar .wrap{display:flex;gap:14px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.bar .grp{display:flex;gap:2px;flex-wrap:wrap}
.bar .grp + .grp{border-left:1px solid var(--line);padding-left:15px}
.bar a{padding:6px 10px;border-radius:5px;font-size:13px;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.bar a:hover{background:var(--navy-soft);color:var(--navy)}

main.wrap{padding-top:18px;padding-bottom:34px}

/* cards --------------------------------------------------------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,40,66,.05)}
.card h2{margin:0 0 13px;font-family:Georgia,serif;font-size:17px;
  color:var(--navy)}
h1.report,h1.rep{margin:0 0 6px;font-family:"Times New Roman",Georgia,serif;
  font-size:24px;text-align:center;text-decoration:none;color:var(--ink)}
.repsub{text-align:center;color:var(--muted);font-size:12.5px;margin:0 0 8px;
  padding-bottom:12px;border-bottom:2px solid var(--navy);
  box-shadow:0 2px 0 var(--gold)}
.rowhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.rowhead h2{margin:0;flex:1}
.nav{display:flex;gap:5px;flex-wrap:wrap}
.muted{color:var(--muted)}
.ok{color:#15704f;font-weight:600}
.warn{color:var(--amber);font-weight:600}

/* flash --------------------------------------------------------------- */
.flash{padding:10px 14px;border-radius:6px;margin-bottom:13px;font-size:13.5px;
  border:1px solid transparent}
.flash.good{background:var(--navy-soft);color:var(--navy);
  border-color:#c6d6e8}
.flash.bad{background:#fdecef;color:var(--rose);border-color:#f0ccd4}

/* forms --------------------------------------------------------------- */
label{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
input,select,textarea{display:block;width:100%;padding:7px 10px;
  border:1px solid #bcc4cd;border-radius:5px;font:14px inherit;
  background:#fff;color:var(--ink);margin-top:3px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-mid);
  box-shadow:0 0 0 2px var(--navy-soft)}
input[readonly]{background:#f1f4f7;color:var(--muted)}
input[type=file]{padding:6px 8px;background:#fbfcfd}
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.filters label{margin-bottom:0}
.filters .wide{flex:1;min-width:200px}
.filters .chk{display:flex;align-items:center;gap:6px;padding-bottom:7px}
.filters .chk input{width:auto;margin:0}
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:15px}
.fields .wide{grid-column:1/-1}
@media(max-width:800px){.fields{grid-template-columns:1fr 1fr}}

button,.btn{display:inline-block;padding:8px 15px;border:1px solid #bcc4cd;
  border-radius:5px;background:#fff;color:var(--ink);font:14px inherit;
  cursor:pointer;text-decoration:none}
button:hover,.btn:hover{background:var(--navy-soft);border-color:#a9b7c7}
.primary{background:var(--navy);border-color:var(--navy-deep);
  color:#fff;font-weight:600}
.primary:hover{background:var(--navy-mid);border-color:var(--navy-deep);color:#fff}
.primary:disabled{background:#b8c2cd;border-color:#b8c2cd;cursor:not-allowed}
.danger{border-color:#e0b6bf;color:var(--rose);background:#fff;font-weight:600}
.danger:hover{background:#fdecef;border-color:#d79aa7;color:var(--rose)}
.sm{padding:5px 10px;font-size:13px}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}

/* tables -------------------------------------------------------------- */
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
table.grid th{background:var(--navy);text-align:left;padding:8px 9px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:#fff;font-weight:600;border:1px solid var(--navy-deep);white-space:nowrap}
table.grid td{padding:6px 9px;border:1px solid #e4e8ed}
table.grid tbody tr:nth-child(even){background:#f7f9fc}
table.grid tbody tr[onclick]{cursor:pointer}
table.grid tbody tr[onclick]:hover{background:var(--navy-soft)}
table.grid tbody tr:hover{background:var(--navy-soft)}
table.grid .n,table.grid .r{text-align:right;font-family:Consolas,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.grid tfoot td{font-weight:700;background:var(--navy-soft);
  border-top:2px solid var(--navy);padding:9px}

/* statement rows ------------------------------------------------------ */
.statement td:first-child{white-space:pre}
tr.section td{background:#dde6f0;font-weight:700;color:var(--navy)}
tr.group td{font-style:italic;color:var(--muted)}
tr.total td{font-weight:700}
tr.sectiontotal td{font-weight:700;background:#eef2f7}
tr.grand td{font-weight:700;background:var(--navy-soft);
  border-top:2px solid var(--navy);border-bottom:3px double var(--navy)}
tr.warn td{font-weight:700;background:#fdf3e3;color:var(--amber)}
tr.bad td{background:#fdecef}
tr.blank td{height:9px;border:0;background:#fff}

/* voucher entry ------------------------------------------------------- */
table.entry input{margin:0;padding:5px 7px;border:1px solid transparent;
  background:transparent;border-radius:3px}
table.entry input:focus{border-color:var(--navy-mid);background:#fff;
  box-shadow:0 0 0 2px var(--navy-soft)}
table.entry td{padding:2px 4px}
.entry .title{font-size:13px;color:var(--muted)}
.del{border:0;background:none;color:var(--rose);font-size:17px;
  line-height:1;padding:2px 6px}
.del:hover{background:#fdecef}
.entryfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.entryfoot .spacer{flex:1}
.tot{font-size:13px;color:var(--muted)}
.tot b{font-family:Consolas,monospace;font-size:15px;color:var(--ink);margin-left:5px}
.status{font-weight:700;font-family:Consolas,monospace}
.status.ok{color:#15704f}
.status.warn{color:var(--amber)}

/* tiles --------------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:16px}
.tile{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px;
  border-top:3px solid var(--navy);box-shadow:0 1px 2px rgba(16,40,66,.05)}
.tile b{display:block;font-size:26px;font-family:Georgia,serif;color:var(--navy)}
.tile span{font-size:12.5px;color:var(--muted)}
@media(max-width:700px){.tiles{grid-template-columns:1fr}}

.cols{display:grid;grid-template-columns:1fr 290px;gap:16px;align-items:start}
.cols.wide-left{grid-template-columns:1fr 520px}
@media(max-width:1000px){.cols,.cols.wide-left{grid-template-columns:1fr}}
.card.narrow h2{font-size:15px}
ul.plain{list-style:none;padding:0;margin:0 0 12px;font-size:13.5px}
ul.plain li{padding:5px 0;border-bottom:1px solid #eceff3}

/* account tree -------------------------------------------------------- */
.findbox{margin-bottom:10px}
.tree{border:1px solid var(--line);border-radius:7px;background:#fff;
  height:560px;overflow:auto;padding:6px 0;font-size:13.5px}
.node{padding:3px 10px;display:flex;align-items:center;gap:7px}
.node a{text-decoration:none;color:var(--ink);flex:1}
.node:hover{background:#eef2f7}
.node.on{background:var(--navy-soft);box-shadow:inset 3px 0 0 var(--navy)}
.node.head a{font-weight:700;color:var(--navy)}
.node.depth1{padding-left:10px}
.node.depth2{padding-left:30px}
.node.depth3{padding-left:52px}
.node.depth4{padding-left:74px}
.node.depth5{padding-left:96px}
.pill{font-size:10.5px;background:#e7ecf2;color:var(--muted);
  padding:1px 7px;border-radius:9px}
.detail label{margin-bottom:9px}
.wide-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.wide-form .wide{grid-column:1/-1}
.wide-form .btnrow{grid-column:1/-1}
@media(max-width:800px){.wide-form{grid-template-columns:1fr}}

.foot{color:var(--muted);font-size:12px;padding-bottom:24px;padding-top:4px;
  border-top:1px solid var(--line);margin-top:10px}

/* sign in ------------------------------------------------------------- */
.centered{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(150deg,var(--navy),var(--navy-deep))}
.login{width:380px;background:#fff;border:1px solid var(--line);
  border-top:4px solid var(--gold);border-radius:10px;padding:28px;
  box-shadow:0 14px 40px rgba(0,0,0,.28)}
/* if the page already wraps the form in a card, let this one box do the work */
.login .card{border:0;padding:0;margin:0;background:transparent;box-shadow:none}
.login h1{font-family:Georgia,serif;font-size:22px;margin:0;color:var(--navy)}
.login .sub{color:var(--muted);margin:3px 0 20px}
.login .hint{font-size:12px;color:var(--muted);margin:14px 0 0}
.login button{width:100%;margin-top:8px}

/* printing ------------------------------------------------------------ */
@media print{
  .top,.bar,.foot,.noprint,.filters{display:none!important}
  body{background:#fff}
  .card{border:0;padding:0;margin:0;box-shadow:none}
  table.grid td,table.grid th{border:1px solid #999}
  table.grid th{background:#e8eef5!important;color:#000!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .repsub{box-shadow:none;border-bottom:1px solid #999}
}