/* ============================================================================
   INFINITY MOONWAYS BUSSES : 2023  —  faithful re-creation of the vendor UI.
   Every colour/metric here was taken from screenshots of the live vendor app
   (reference/screenshots/). Do not "modernise" these values.
   ========================================================================== */

:root{
  /* window chrome */
  --title-1:#e4eefb; --title-2:#c3d9f1; --title-ink:#1a3a5c;
  --tabstrip-1:#dbe8f8; --tabstrip-2:#ffffff;
  --panel-1:#fdfeff; --panel-2:#dbe7f6; --panel-line:#a8c0de;
  --btn-ink:#15386b;
  --workspace:#9bb7d4;
  --status-bg:#bdd4ef; --status-panel:#ffffff; --status-ink:#15386b;
  /* themeable chrome (Theme Setup / Look & Feel) — defaults reproduce the classic look */
  --ribbon-1:#f2f7fd; --ribbon-2:#cfe0f4;               /* ribbon strip gradient      */
  --btn-1:#fdfdfd; --btn-2:#e2e2e2; --btn-border:#8c8c8c;/* push-button gradient        */
  --ribbon-accent:#ffe9a8; --ribbon-accent-bd:#e0b64a;   /* ribbon icon hover glow      */
  --tab-ink:#0e2f56;                                     /* inactive tab text           */

  /* form document colours (the band colour encodes document type) */
  --band-invoice:#7b7bdd;      /* Sales Invoice          */
  --band-history:#8f8fe4;      /* Sales History          */
  --band-cashbook:#0000b0;     /* Cash Book              */
  --band-payment:#e00000;      /* Payment / Debit        */
  --band-receipt:#008a00;      /* Receipt / Credit       */
  --band-journal:#0f7f7f;      /* Journal Voucher        */
  --band-navy:#1f3864;         /* Accounts / statements  */
  --band-black:#000000;        /* Ledger / history / user*/
  --band-green:#00a600;        /* Income statement       */
  --band-blue:#0000d0;         /* Bus Sale Report        */

  /* page tints used by the voucher twins */
  --tint-payment:#fbe9df;
  --tint-receipt:#cdf3cd;
  --tint-plain:#c8dcf0;

  /* section bands inside Sales Invoice */
  --sec-departure:#d3d3f5;
  --sec-return:#f7cfe4;
  --sec-expense:#e00000;
  --sec-fuel:#0f7f7f;
  --sec-total:#008a00;

  /* controls */
  --grid-head-1:#3a3a3a; --grid-head-2:#1e1e1e;
  --field-focus:#ffffcc;
  --row-alt:#fffff0;
  --group-row:#dff07c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden;
  background:var(--workspace);
  color:#000;
  font:12px/1.35 "Segoe UI",Tahoma,Arial,sans-serif;
  user-select:none;
}
.num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- title bar */
#titlebar{
  height:24px; display:flex; align-items:center; gap:6px; padding:0 6px;
  background:linear-gradient(180deg,var(--title-1),var(--title-2));
  border-bottom:1px solid #9fb9d8;
  font-size:12px; color:var(--title-ink); white-space:nowrap; overflow:hidden;
}
#titlebar .ico{width:16px;height:16px;flex:none}
#titlebar .caption{overflow:hidden;text-overflow:ellipsis}
#titlebar .userbox{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
#titlebar .userbox .uname{font-size:12px;color:var(--title-ink);font-weight:600}
#titlebar .userbox #tb-logout{
  display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 9px;cursor:pointer;
  font:600 11.5px "Segoe UI",Tahoma,sans-serif;color:#7a1414;
  background:linear-gradient(180deg,#fff,#ffe3e3);border:1px solid #d99;border-radius:9px;
}
#titlebar .userbox #tb-logout:hover{background:linear-gradient(180deg,#fff,#ffd0d0);border-color:#c66;color:#a00}
#titlebar .userbox #tb-logout:active{background:#ffbdbd}
#titlebar .sys{margin-left:8px;display:flex;gap:2px}
#titlebar .sys i{
  width:26px;height:18px;display:grid;place-items:center;font-style:normal;
  font-size:11px;color:var(--title-ink);opacity:.85;border:1px solid transparent;border-radius:2px;
}
#titlebar .sys i:hover{background:#ffffff88;border-color:#9fb9d8}

/* ------------------------------------------------------------------- ribbon */
#tabstrip{
  display:flex; align-items:flex-end; gap:1px; height:22px; padding:0 4px;
  background:linear-gradient(180deg,var(--tabstrip-1),var(--tabstrip-2));
}
#tabstrip .tab{
  padding:3px 12px 4px; font-size:12px; color:var(--tab-ink); cursor:default;
  border:1px solid transparent; border-bottom:0; border-radius:3px 3px 0 0;
}
#tabstrip .tab:hover{background:#ffffff55}
#tabstrip .tab.on{background:#fff;color:#0e2f56;border-color:#a8c0de;font-weight:600}

#ribbon{
  display:flex; align-items:stretch; gap:6px; padding:3px 4px 4px;
  background:linear-gradient(180deg,var(--ribbon-1),var(--ribbon-2));
  border-bottom:1px solid #a8c0de; min-height:78px;
}
.rgroup{
  display:flex; gap:0; padding:2px 3px;
  background:linear-gradient(180deg,var(--panel-1),var(--panel-2));
  border:1px solid var(--panel-line); border-radius:3px;
}
.rbtn{
  width:58px; padding:3px 2px 2px; display:flex; flex-direction:column;
  align-items:center; gap:2px; cursor:pointer; border:1px solid transparent;
  border-radius:3px; text-align:center;
}
.rbtn:hover{background:var(--ribbon-accent);border-color:var(--ribbon-accent-bd)}
.rbtn.on{background:var(--ribbon-accent);border-color:var(--ribbon-accent-bd);box-shadow:inset 0 0 0 1px #ffffff80}
.rbtn .gl{font-size:26px;line-height:26px;filter:saturate(1.1)}
.rbtn .cap{font-size:11px;line-height:1.05;color:var(--btn-ink)}

/* ---------------------------------------------------------------- workspace */
#workspace{
  position:absolute; left:0; right:0; bottom:22px; top:124px;
  background:var(--workspace); overflow:auto;
}

/* ---------------------------------------------------------------- statusbar */
#statusbar{
  position:absolute; left:0; right:0; bottom:0; height:22px;
  display:flex; align-items:stretch; gap:3px; padding:2px 3px;
  background:var(--status-bg); border-top:1px solid #9fb9d8;
}
#statusbar .sp{
  background:var(--status-panel); border:1px solid #9db9d6;
  display:flex; align-items:center; padding:0 7px;
  font-size:11px; font-weight:600; color:var(--status-ink); white-space:nowrap;
}
#statusbar .sp.grow{flex:1}
#statusbar .sp.mid{flex:1}

/* ======================================================================= forms
   Two shapes: .form.docked (top-left, full width) and .form.float (centred).
   ------------------------------------------------------------------------- */
.form{
  position:absolute; background:var(--tint-plain);
  border:1px solid #7f9dbd; box-shadow:2px 2px 6px #00000030;
}
.form.docked{left:0; top:0; right:0;}
.form.wide{right:0}
.band{
  display:flex; align-items:center; padding:5px 10px; color:#fff;
  font-size:15px; font-weight:700; letter-spacing:.2px;
}
.band .right{margin-left:auto;font-size:13px}
.band .bico{margin-right:7px;font-size:15px}

.pad{padding:8px 10px 10px}

/* ------------------------------------------------------------------ controls */
label.l{display:block;font-size:11px;color:#000;margin:0 0 2px}
.fld{
  height:21px; padding:1px 4px; border:1px solid #7f9db9; background:#fff;
  font:12px "Segoe UI",Tahoma,sans-serif; color:#000; outline:0;
}
.fld:focus{background:var(--field-focus);border-color:#c0a000}
.fld.yellow{background:var(--field-focus)}
.fld.r{text-align:right}
select.fld{height:21px;padding:0 2px}
/* Hold-to-peek password eye (login + change-password) */
.pw-wrap{position:relative;display:block}
.pw-has-eye{padding-right:26px;box-sizing:border-box}
.pw-eye{
  position:absolute;top:0;bottom:0;right:2px;margin:auto;
  height:19px;width:22px;padding:0;border:0;background:transparent;
  cursor:pointer;font-size:14px;line-height:1;opacity:.5;user-select:none;
}
.pw-eye:hover{opacity:.78}
.pw-eye.on{opacity:1}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.hint{font-size:11px;color:#c00000}
.note{font-size:11px;color:#000}
.saveHint{font-size:12px;font-weight:700;color:#0000c0}

.btn{
  min-width:66px; height:23px; padding:0 12px;
  background:linear-gradient(180deg,var(--btn-1),var(--btn-2));
  border:1px solid var(--btn-border); border-radius:3px;
  font:12px "Segoe UI",Tahoma,sans-serif; color:#000; cursor:pointer;
}
.btn:hover{background:linear-gradient(180deg,#fff,#d8e8fa);border-color:#5a8bc0}
.btn:active{background:#cfe0f2}
.btn u{text-decoration:underline}
.btnrow{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}

/* --------------------------------------------------------------------- grids */
.grid{border:1px solid #6f8fae;background:#fff;overflow:auto}
table.g{width:100%;border-collapse:collapse;font-size:12px}
table.g thead th{
  background:linear-gradient(180deg,var(--grid-head-1),var(--grid-head-2));
  color:#fff; font-size:11px; font-weight:600; text-transform:uppercase;
  text-align:left; padding:3px 6px; border-right:1px solid #555;
  position:sticky; top:0; white-space:nowrap;
}
table.g thead th.r{text-align:right}
table.g td{padding:2px 6px;border-bottom:1px solid #dfe6ee;white-space:nowrap}
table.g td.r{text-align:right}
table.g tbody tr:nth-child(even) td{background:var(--row-alt)}
table.g tbody tr.sel td{background:#cfe0f2}
table.g tr.grp td{background:var(--group-row);font-weight:700}
table.g tr.grpend td{background:var(--group-row)}

/* total bars */
.totbar{
  display:flex;align-items:center;gap:10px;padding:4px 10px;
  color:#fff;font-weight:700;font-size:13px;
}
.totbar .lbl{margin-left:auto}
.totbar .val{
  background:#fff;color:#000;border:1px solid #00000040;
  min-width:110px;text-align:right;padding:1px 6px;font-weight:700;
}
.totbar.black{background:#000}
.totbar.black .green{color:#00ff40;margin-right:auto}

/* section bands inside Sales Invoice */
.secband{
  text-align:center;font-weight:700;font-size:13px;padding:3px 0;
  border:1px solid #00000030;
}
.secband.dep{background:var(--sec-departure);color:#000}
.secband.ret{background:var(--sec-return);color:#000}
.secband.exp{background:var(--sec-expense);color:#fff}
.secband.fuel{background:var(--sec-fuel);color:#fff}
.secfoot{background:var(--sec-total);color:#fff;font-weight:700;text-align:right;padding:3px 8px;font-size:13px}

/* modal dialogs (report pickers) */
#modalwrap{position:absolute;inset:0;display:none;z-index:50}
#modalwrap.on{display:block}
.dlg{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  background:var(--tint-plain);border:1px solid #7f9dbd;box-shadow:3px 3px 10px #00000040;
  min-width:330px;
}
.dlg .band{font-size:15px}
.dlg .art{
  width:88px;background:linear-gradient(160deg,#cfe2f6,#9dc0e6);
  display:grid;place-items:center;font-size:40px;
}
.dlg .body{display:flex}
.dlg .body .fields{padding:10px 12px;flex:1}
.radio{display:flex;align-items:center;gap:6px;margin:6px 0;font-size:12px}
.chk{display:flex;align-items:center;gap:5px;font-size:12px;margin:3px 0}

/* login */
#login{
  position:absolute;inset:0;display:grid;place-items:center;
  background:var(--workspace);z-index:100;
}
#login .box{width:330px;background:var(--tint-plain);border:1px solid #7f9dbd;box-shadow:3px 3px 10px #00000040}
#login .err{color:#c00000;font-size:11px;min-height:14px}

.hidden{display:none !important}

/* Look & Feel options (Theme Setup) */
body.compact table.g td{padding:1px 6px}
body.compact .fld{height:19px}
body.compact .rbtn{padding:2px 2px 1px}
body.no-stripe table.g tbody tr:nth-child(even) td{background:var(--surface,#fff)}

/* ============================================================================
   MODERN POLISH LAYER — refines rendering only. Same layout, same vendor
   colours and structure; crisper type, controls, grids, depth. (2026-08-14)
   ========================================================================== */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body{ letter-spacing:.1px; }

/* --- inputs & selects: crisp, consistent, clear focus --- */
.fld{
  height:22px; border:1px solid #9db4cc; border-radius:4px;
  background:#fff; box-shadow:inset 0 1px 1px #00000008; transition:border-color .12s, box-shadow .12s, background .12s;
}
.fld:hover{ border-color:#6f97c4; }
.fld:focus{ background:var(--field-focus); border-color:#3f77c0; box-shadow:0 0 0 2px #3f77c033; outline:0; }
.fld.yellow{ background:var(--field-focus); }
textarea.fld{ height:auto; line-height:1.4; }
select.fld{
  height:22px; padding:0 22px 0 6px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%235a7699'/></svg>");
  background-repeat:no-repeat; background-position:right 7px center;
}
input[type=date].fld{ padding-right:4px; }
input[type=checkbox],input[type=radio]{ accent-color:#2f6fb3; width:14px; height:14px; vertical-align:-2px; }
label.l{ letter-spacing:.2px; color:#33475b; }

/* --- buttons: smoother, subtle depth, clear states --- */
.btn{
  height:24px; border-radius:5px; border:1px solid #9aa6b2;
  background:linear-gradient(180deg,#ffffff,#e9eef3);
  box-shadow:0 1px 1px #0000000f, inset 0 1px 0 #ffffffcc;
  transition:background .12s, border-color .12s, box-shadow .12s, transform .04s;
}
.btn:hover{ background:linear-gradient(180deg,#ffffff,#dcebfb); border-color:#5a8bc0; box-shadow:0 1px 3px #2f6fb322, inset 0 1px 0 #fff; }
.btn:active{ background:linear-gradient(180deg,#d7e6f6,#c7ddf2); transform:translateY(1px); box-shadow:inset 0 1px 2px #00000022; }
.btn:focus-visible{ outline:2px solid #3f77c0; outline-offset:1px; }

/* --- ribbon: cleaner tabs & buttons --- */
#tabstrip .tab{ transition:background .12s; border-radius:5px 5px 0 0; }
#tabstrip .tab.on{ box-shadow:0 -1px 3px #00000012; }
.rbtn{ border-radius:5px; transition:background .1s, border-color .1s, box-shadow .1s; }
.rbtn:hover{ box-shadow:0 1px 3px #e0b64a44; }
.rbtn .gl{ filter:drop-shadow(0 1px 1px #00000022); }
.rgroup{ border-radius:5px; box-shadow:0 1px 2px #0000000a; }

/* --- form/dialog cards: soft depth + rounded --- */
.form{ border:1px solid #7f9dbd; border-radius:8px; box-shadow:0 6px 22px #0000002e, 0 1px 0 #ffffff40 inset; }
.form.docked{ border-radius:0 0 8px 8px; border-top:0; }
.dlg{ border-radius:10px; box-shadow:0 14px 40px #00000040; overflow:hidden; }
.band{ letter-spacing:.3px; text-shadow:0 1px 1px #00000030; box-shadow:inset 0 -1px 0 #00000018; }
.band .bico{ filter:drop-shadow(0 1px 1px #00000030); }

/* --- grids: lighter lines, sticky header shadow, smooth hover --- */
table.g thead th{ box-shadow:inset 0 -1px 0 #00000040; letter-spacing:.4px; }
table.g td{ border-bottom:1px solid #eef2f6; }
table.g tbody tr{ transition:background .08s; }
table.g tbody tr:hover td{ background:#eaf3ff; }
table.g tr.grp td, table.g tr.grpend td{ box-shadow:inset 0 -1px 0 #00000012; }
.grid{ border-radius:6px; }

/* --- total bars & section bands: subtle sheen --- */
.totbar{ box-shadow:inset 0 1px 0 #ffffff22, inset 0 -1px 0 #00000022; }
.totbar .val{ border-radius:3px; }
.secband{ border-radius:4px; box-shadow:inset 0 1px 0 #ffffff40; letter-spacing:.3px; }
.secfoot{ border-radius:0 0 4px 4px; }

/* --- status bar panels --- */
#statusbar .sp{ border-radius:4px; box-shadow:inset 0 1px 1px #ffffffcc, 0 1px 1px #00000010; }

/* --- thin, modern scrollbars --- */
*{ scrollbar-width:thin; scrollbar-color:#9db4cc #eef2f6; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#eef2f6; }
::-webkit-scrollbar-thumb{ background:#b7c6d6; border:2px solid #eef2f6; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#93a8be; }

/* --- fieldset (search-criteria boxes) --- */
fieldset{ border:1px solid #9db4cc !important; border-radius:6px; }
fieldset legend{ padding:0 5px; color:#33475b; font-weight:600; }

/* --- datalist-style helpers keep tabular numbers aligned --- */
.fld.r.num{ font-variant-numeric:tabular-nums; }

/* ============================================================================
   Custom autocomplete combobox (vms-combo.js) — replaces the native <datalist>
   popup, which the browser drew unstyled against the far-right screen edge.
   This panel is anchored under the field and styled like the vendor's grid
   lookup: field-width, header-less, alternating bands, highlighted match.
   ========================================================================== */
.fld.combo{
  padding-right:22px; cursor:text;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%235a7699'/></svg>");
  background-repeat:no-repeat; background-position:right 7px center;
}
#combo-pop.combopop{
  position:fixed; z-index:1000;              /* above #modalwrap (50) & dialogs */
  max-height:264px; overflow-y:auto; overflow-x:hidden;
  background:#fff; border:1px solid #3f77c0; border-radius:6px;
  box-shadow:0 8px 26px #0000003a; padding:2px;
  font:12px "Segoe UI",Tahoma,sans-serif;
}
.combo-opt{
  padding:3px 9px; cursor:pointer; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; border-radius:3px; color:#1a3a5c;
}
.combo-opt:nth-child(even){ background:#f5f9fd; }   /* vendor-style alternating bands */
.combo-opt:hover{ background:#eaf3ff; }
.combo-opt.on{ background:#cfe2f6; }                 /* keyboard / auto highlight */
.combo-none,.combo-more{ padding:4px 9px; color:#7a869a; font-style:italic; white-space:nowrap; }
.combo-more{ border-top:1px solid #eef2f6; margin-top:2px; }

/* ============================================================================
   Date fields + calendar picker (vms-date.js). The box keeps the vendor's
   DD-MM-YYYY text; the calendar icon sits in its right padding — drawn INTO
   the field rather than added as a button so none of the 16 report-dialog
   date fields change width. Clicking that strip opens our own month view
   (native type=date renders MM/DD/YYYY and cannot be restyled).
   ========================================================================== */
.fld.datefld{
  padding-right:22px; cursor:text;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 14 14'><rect x='.5' y='2' width='13' height='11.5' rx='1.5' fill='%23fff' stroke='%235a7699'/><path d='M.5 5.5h13' stroke='%235a7699'/><path d='M4 .8v2.4M10 .8v2.4' stroke='%235a7699' stroke-width='1.6' stroke-linecap='round'/><rect x='3' y='7.5' width='2.4' height='2.2' fill='%235a7699'/><rect x='8.6' y='7.5' width='2.4' height='2.2' fill='%235a7699'/></svg>");
  background-repeat:no-repeat; background-position:right 4px center;
}
.fld.datefld.bad{ border-color:#d00000; background-color:#fff1f1; box-shadow:0 0 0 2px #d0000022; }
.mv th.nav:hover{ background:#e8eef7; border-radius:3px; }

#date-pop.datepop{
  position:fixed; z-index:1000;              /* above #modalwrap (50) & dialogs */
  width:214px; background:#fff; border:1px solid #3f77c0; border-radius:6px;
  box-shadow:0 8px 26px #0000003a; padding:5px 6px 4px;
  font:12px "Segoe UI",Tahoma,sans-serif;
}
#date-pop .dp-foot{ display:flex; gap:5px; margin-top:4px; padding-top:4px; border-top:1px solid #e3eaf2; }
.dp-act{
  flex:1; height:20px; cursor:pointer; color:#1a3a5c;
  font:11px "Segoe UI",Tahoma,sans-serif;
  border:1px solid #9aa6b2; border-radius:4px;
  background:linear-gradient(180deg,#ffffff,#e9eef3);
}
.dp-act:hover{ background:linear-gradient(180deg,#ffffff,#dcebfb); border-color:#5a8bc0; }
.dp-act:active{ background:#cfe0f2; }

/* quick ranges on the report dialogs — the vendor-look shell had none, so every
   report period had to be typed twice */
.dpre{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.dpre-b{
  height:19px; padding:0 8px; cursor:pointer; color:#33475b;
  font:11px "Segoe UI",Tahoma,sans-serif;
  border:1px solid #b9c8d8; border-radius:9px; background:#f4f8fd;
}
.dpre-b:hover{ background:#e2eefb; border-color:#5a8bc0; color:#1a3a5c; }
.dpre-b:active{ background:#cfe2f6; }

/* --- software credit (built-by line), shown app-wide --- */
.lg-credit{ margin-top:10px; padding-top:9px; border-top:1px solid #d7e0ea; text-align:center;
  font-size:11px; line-height:1.5; color:#33475b; letter-spacing:.2px; }
.credit-box{ margin-top:12px; padding:9px 12px; border:1px solid var(--band-navy);
  border-radius:6px; background:#f3f7fd; text-align:center; line-height:1.6; }
.credit-box .credit-title{ font-weight:800; letter-spacing:.4px; color:var(--band-navy); }
.rpt-credit{ margin-top:8px; padding-top:6px; border-top:1px dashed #999; text-align:center;
  font-size:10px; color:#555; letter-spacing:.3px; }

/* --- report letterhead (Crystal-style header on the in-app reports) --- */
.letterhead{ text-align:center; padding:4px 0 8px; margin-bottom:6px; border-bottom:2px solid var(--band-navy); }
.letterhead .lh-co{ font-size:20px; font-weight:800; letter-spacing:1px; color:var(--band-navy); }
.letterhead .lh-ad{ font-size:11px; color:#33475b; }
.letterhead .lh-ti{ font-size:13px; font-weight:700; margin-top:3px; }
.letterhead .lh-sub{ font-size:11.5px; font-weight:700; color:#1a3a5c; margin-top:2px; letter-spacing:.3px; }

/* --- per-trip INCOME/EXPENSE voucher (matches the vendor's Crystal layout) --- */
.vinfo{ border:1px solid #333; font-size:12px; margin-bottom:0; }
.vinfo .vrow{ display:flex; align-items:stretch; }
.vinfo .vk{ padding:3px 6px; font-weight:700; border-right:1px solid #333; white-space:nowrap; }
.voucher-tbl thead th{ background:#f8c8e0 !important; color:#000; }
.voucher-tbl tr.vsec td{ font-weight:700; background:#fff; }
.voucher-tbl tr.vsub td{ font-weight:700; background:#fdfcd0; }
.voucher-tbl tr.vnet td{ font-weight:800; background:#e8e0f0; font-size:13px; }

/* ============================================================================
   VENDOR-FAITHFUL REPORT VIEW (.rptview) — the Crystal report look, applied to
   every showReport() output. Plain white page, thin black gridlines, bold
   black-on-white header (no dark fill / no zebra / no hover), plain bold GRAND
   TOTAL. Scoped to .rptview so the in-app data grids (Cash Book, Sales History)
   keep the modern style.
   ========================================================================== */
.rptview.form{ background:#fff; }
.rptview .pad{ background:#fff; }
.rptview .letterhead{ border-bottom:2px solid #000; }
.rptview .letterhead .lh-co,
.rptview .letterhead .lh-ad,
.rptview .letterhead .lh-ti,
.rptview .letterhead .lh-sub{ color:#000; }
/* Accounts Report — vendor prints its company name in BLUE (other reports are black) */
.rpt-blue .letterhead .lh-co{ color:#1414dc; }
/* Accounts Report TOTAL AMOUNT band — vendor's pale-yellow grand-total row */
.rptview table.g tr.rpt-grand td{ background:#fffbcc; font-weight:700; }
/* Trial Balance summary — serif letterhead, blue DEBIT/CREDIT section heads, red BALANCE line */
.rpt-tb .letterhead .lh-co{ font-family:'Times New Roman',Georgia,serif; font-weight:700; }
.rptview table.g tr.tb-sec td{ color:#0b3ec9; font-weight:800; font-size:15px; background:#fff; border-bottom:none; padding-top:9px; }
.rptview table.g tr.tb-colhd td{ font-weight:700; background:#fff; border-bottom:1.5px solid #000; }
.rptview table.g tr.tb-bal td{ font-weight:700; background:#fff; }
.rptview table.g tr.tb-bal .tb-red{ color:#d00000; }
.rptview table.g tr.tb-grand td{ font-weight:800; background:#fff; border-top:1.5px solid #000; }
/* Accounts Summary — vendor prints the GRAND TOTAL row in blue */
.rptview table.g tr.as-grand td{ color:#1414dc; font-weight:800; background:#fff; }
/* Account Statement — "Account History Report" custom letterhead + ledger */
.rpt-ah .ah-head{ display:grid; grid-template-columns:1fr auto; align-items:start; column-gap:24px; row-gap:2px;
  border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:10px; }
.rpt-ah .ah-co{ grid-column:1; grid-row:1; font-size:22px; font-weight:800; letter-spacing:.5px; }
.rpt-ah .ah-box{ grid-column:2; grid-row:1 / span 2; align-self:start; border:1.5px solid #000;
  padding:14px 22px; font-size:16px; font-weight:700; white-space:nowrap; }
.rpt-ah .ah-ad{ grid-column:1; grid-row:2; font-size:12px; font-weight:700; }
.rpt-ah .ah-meta{ grid-column:1; grid-row:3; font-size:15px; font-weight:700; margin-top:8px; line-height:1.55; }
.rpt-ah .ah-range{ grid-column:2; grid-row:3; font-size:14px; font-weight:700; margin-top:8px; line-height:1.55; }
.rptview table.g td.c, .rptview table.g th.c{ text-align:center; }
.rptview table.g tr.ah-bf td{ font-weight:700; background:#fff; }
.rptview table.g tr.ah-total td{ font-weight:800; background:#fff; border-top:1.5px solid #000; }
.rptview table.g.ah-detailed td, .rptview table.g.ah-detailed th{ border:1px solid #000; }
.rptview table.g.ah-detailed tbody tr td div:first-child{ font-weight:700; }
/* Address Book report — red Area headers, blue Town headers */
.rptview table.g.adr tr.adr-area td{ color:#d00000; font-weight:800; font-size:14px; background:#fff; padding-top:9px; }
.rptview table.g.adr tr.adr-town td{ color:#1414dc; font-weight:800; font-size:14px; background:#fff; }
.rptview .grid{ border:0; background:#fff; border-radius:0; }
.rptview table.g{ border:1px solid #000; }
.rptview table.g thead th{
  background:#fff; color:#000; border:1px solid #000;
  font-weight:700; letter-spacing:0; text-shadow:none; box-shadow:none;
}
.rptview table.g thead th.r{ text-align:right; }
.rptview table.g td{ border:1px solid #000; background:#fff; }
.rptview table.g tbody tr:nth-child(even) td{ background:#fff; }   /* kill zebra */
.rptview table.g tbody tr:hover td{ background:#fff; }             /* kill hover  */
.rptview table.g tr.grp td,
.rptview table.g tr.grpend td{ background:#fff; font-weight:700; box-shadow:none; }

/* Sales History on-screen grid — vendor green collapsible date-group header */
tr.sh-datehdr td{ background:var(--group-row); font-weight:700; cursor:pointer; user-select:none; }
tr.sh-datehdr .sh-tog{ display:inline-block; width:14px; text-align:center; font-weight:700; }

/* Sales History printable report — vendor light-green Crystal header + green GRAND TOTAL */
.rpt-green .lh-ti{ text-transform:uppercase; }
.rpt-green table.g thead th{ background:#c6efce; color:#000; }
.rpt-green table.g tr.grpend td{ background:#fff; color:#006100; }

/* Cash Book rows — vendor: receipt rows light-green, payment rows white with blue text
   (overrides zebra + hover; placed after those rules so source order wins) */
table.g tbody tr.cb-recv td{ background:#ccffcc; color:#000; }
table.g tbody tr.cb-recv:hover td{ background:#c2f5c2; }
table.g tbody tr.cb-pay td{ background:#fff; color:#0000c0; }
table.g tbody tr.cb-pay:hover td{ background:#eef2ff; }

/* Trans History — vendor highlights the selected row lime-green */
table.g.th-grid tbody tr.sel td{ background:#a5d84a; color:#000; }
table.g.th-grid tbody tr.sel:hover td{ background:#9ccf40; }

/* Change Date — month-view calendar (mirrors the vendor's MonthView) */
.mv{ border-collapse:collapse; width:100%; font-size:12px; background:#fff; }
.mv thead tr:first-child th{ color:#1414dc; font-size:13px; font-weight:800; padding:2px; }
.mv th.nav{ cursor:pointer; color:#333; width:18px; user-select:none; }
.mv tr.dow th{ color:#1414dc; border-bottom:1px solid #cbd5e6; font-weight:700; padding:2px 0; }
.mv tr.dow th:last-child{ color:#d00000; }
.mv td{ padding:3px 4px; text-align:center; color:#111; }
.mv td.mut{ }
.mv td.day{ cursor:pointer; border:1px solid transparent; }
.mv td.day:hover{ background:#e8eef7; }
.mv tbody tr td:nth-child(7){ color:#d00000; }
.mv td.day.today{ border:1px solid #d00000; border-radius:50%; font-weight:700; }
.mv td.day.sel{ background:#1414dc; color:#fff; border-radius:2px; }

/* Theme Setup / Look & Feel — visual theme gallery with live mini-previews */
.thmpad{ width:540px; max-width:94vw; }
.thmhint{ font-size:12px; color:#1a3a5c; background:#eef4ff; border:1px solid #cfe0f4;
  border-radius:6px; padding:6px 10px; margin-bottom:10px; }
.thmcard.on .thmprev::after{ content:'\2713 Applied'; position:absolute; top:5px; right:5px;
  background:#16a34a; color:#fff; font-size:9px; font-weight:700; letter-spacing:.2px;
  padding:1px 6px; border-radius:9px; box-shadow:0 1px 2px #00000055; }
.thmgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:11px; }
.thmcard{ padding:0; border:2px solid #d7deea; border-radius:8px; background:#fff; cursor:pointer;
  overflow:hidden; text-align:left; box-shadow:0 1px 3px #0000001c; transition:transform .09s ease, box-shadow .13s ease; }
.thmcard:hover{ transform:translateY(-2px); box-shadow:0 4px 12px #00000033; }
.thmcard.on{ border-color:var(--band-navy); box-shadow:0 3px 12px #00000038; }
.thmprev{ height:62px; position:relative; }
.thmbar{ position:absolute; inset:0 0 auto 0; height:15px; border-bottom:1px solid #ffffff66; }
.thmwin{ position:absolute; left:13px; right:13px; top:25px; bottom:8px; background:#fff;
  border-radius:3px; box-shadow:0 1px 4px #00000045; overflow:hidden; }
.thmacc{ display:block; height:9px; width:100%; }
.thmmeta{ padding:5px 8px 7px; display:flex; flex-direction:column; gap:1px; }
.thmname{ font-size:12px; color:#1a2b45; line-height:1.15; }
.thmmood{ font-size:10px; color:#8090a6; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thmopts{ display:flex; gap:18px; flex-wrap:wrap; }
.thmcard.on .thmname{ font-weight:700; }

/* Query Manager — secret-code gate (mirrors the vendor's access prompt) */
.qm-gate{ padding:16px 18px; width:330px; background:var(--tint-plain); }
.qm-gate .qm-g1{ color:#c00000; font-weight:700; text-align:center; font-size:14px; }
.qm-gate .qm-g2{ color:#1414dc; font-weight:800; text-align:center; font-size:24px; margin:6px 0 12px; }

/* Sales Invoice line grids — per-row delete ✕ (double-click a line to edit it) */
.linedel{ color:#c00000; font-weight:700; cursor:pointer; opacity:.5; padding:0 4px; user-select:none; }
.linedel:hover{ opacity:1; }

/* --- printing: drop the app chrome, print just the report card + letterhead --- */
@media print{
  #titlebar, #tabstrip, #ribbon, #statusbar, #modalwrap, .btnrow, .dpre, #date-pop, #login{ display:none !important; }
  /* Release the fixed-viewport layout so a long report flows onto page 2, 3, … instead of
     being clipped to one screen. Every ancestor that pins a height / hides overflow / is
     absolutely positioned must be freed, or the browser paginates only the first screenful. */
  html, body{ height:auto !important; overflow:visible !important; }
  body{ background:#fff; }
  #workspace{ position:static !important; top:auto; right:auto; bottom:auto; left:auto;
              height:auto !important; overflow:visible !important; margin:0; padding:0; }
  .form, .form.docked{ position:static !important; height:auto !important; overflow:visible !important;
                       box-shadow:none; border:0; }
  .pad{ overflow:visible !important; }
  .grid{ height:auto !important; overflow:visible !important; border:0; }
  /* repeat the column headers at the top of every printed page, and never slice a row across a break */
  table.g thead{ display:table-header-group; }
  table.g thead th{ position:static; }
  table.g tr{ page-break-inside:avoid; }
  /* keep the black Crystal gridlines when printing */
  .rptview table.g, .rptview table.g th, .rptview table.g td{ border:1px solid #000 !important; }
}