/* Checkbook: styled after VersaCheck's classic Windows look (light only, dense 12px type). */
:root{
  --odd:#fffcee; --even:#e6eedb;            /* register row colors (changeable in Options) */
  --sel:#0a64d6; --sel-ink:#fff;
  --ink:#000; --muted:#555; --line:#a0a0a0; --line2:#d4d0c8;
  --chrome:#f0f0f0; --chrome2:#e4e4e4;
  --khaki:#d6cdae; --khaki2:#e6dfc8; --tan-dlg:#d9d1b5;
  --nav1:#dce7f7; --nav2:#c2d4ee;
  --neg:#e00000; --pos:#006400; --link:#1a4fa0; --focus:#3b7ddd;
  --font:"Segoe UI",Tahoma,Verdana,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:12px/1.35 var(--font);color:var(--ink);background:var(--chrome)}
[hidden]{display:none!important}
a{color:var(--link)}
code{font-size:11px}
.small{font-size:11px}
.muted{color:var(--muted)}
.neg{color:var(--neg)} .pos{color:var(--pos)}
.err{color:#c00000;min-height:1.1em;font-size:12px;margin:4px 0}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{border:1px solid #7a7a7a;background:#fff;padding:2px 4px;height:22px;border-radius:0;min-width:0}
textarea{height:auto}
input:focus,select:focus,textarea:focus{outline:1px solid var(--focus);outline-offset:0;border-color:var(--focus)}
input[type=checkbox],input[type=radio]{height:auto}
input:disabled,select:disabled{background:#f4f4f4;color:#777}
label{display:block}
fieldset{border:1px solid var(--line2);padding:6px 8px 8px;margin:0 0 8px}
legend{padding:0 3px}

/* Windows-style push buttons */
.btn{display:inline-flex;align-items:center;gap:5px;min-width:76px;justify-content:center;height:24px;padding:0 10px;background:linear-gradient(#fdfdfd,#e3e3e3);border:1px solid #8c8c8c;border-radius:2px;cursor:pointer;white-space:nowrap}
.btn:hover{background:linear-gradient(#f1f8fe,#d6e9f9);border-color:#3c7fb1}
.btn:active{background:#cfe4f7}
.btn:disabled{opacity:.5;cursor:default}
.btn.danger{color:#b00000}
i[data-i]{display:inline-flex;width:16px;height:16px;flex:none}
i[data-i] svg{width:100%;height:100%}

/* sign-in */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:#808080}
.auth-dlg{width:100%;max-width:340px}
.auth-dlg label{margin-bottom:6px}
.auth-dlg input{width:100%}

/* app frame */
#app{display:flex;flex-direction:column;height:100vh}
.menubar{display:flex;align-items:center;background:#fff;border-bottom:1px solid #e5e5e5;height:22px;padding:0 2px;flex:none}
.menubar>button{background:none;border:1px solid transparent;padding:1px 7px;height:20px;cursor:default}
.menubar>button:hover,.menubar>button.open{background:#cce8ff;border-color:#99d1ff}
.menubar .mb-title{margin-left:auto;padding-right:8px;color:var(--muted)}
.toolbar{display:flex;align-items:center;gap:1px;background:linear-gradient(#fafafa,#ececec);border-bottom:1px solid #c8c8c8;padding:2px 4px;flex:none;flex-wrap:wrap}
.tb{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid transparent;padding:2px 6px;height:24px;cursor:pointer;border-radius:2px}
.tb:hover{background:#e5f1fb;border-color:#a8cbe8}
.tb:disabled{opacity:.45;cursor:default;background:none;border-color:transparent}
.tb-sep{width:1px;height:18px;background:#c8c8c8;margin:0 4px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.body{flex:1;display:flex;min-height:0}
.navpanel{width:108px;flex:none;background:linear-gradient(90deg,var(--nav1),var(--nav2));border-right:1px solid #8ea6c9;overflow:auto;display:flex;flex-direction:column;align-items:stretch}
.nav-head{background:linear-gradient(#fafafa,#dedede);border:1px solid #9a9a9a;text-align:center;padding:2px;margin:2px;font-size:11px}
.navpanel button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:1px solid transparent;padding:7px 2px 6px;margin:1px 3px;cursor:pointer;font-size:11px;line-height:1.15;border-radius:2px}
.navpanel button i[data-i]{width:32px;height:32px}
.navpanel button:hover{background:rgba(255,255,255,.45);border-color:#9fb8de}
.navpanel button.on{background:rgba(255,255,255,.75);border-color:#7d9cd0}
.badge{position:absolute;top:3px;right:16px;background:#e00000;color:#fff;border-radius:8px;padding:0 5px;font-size:10px;font-weight:700}
main{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff;border-left:2px solid #fff}
.view{flex:1;display:flex;flex-direction:column;min-height:0}
.statusbar{display:flex;gap:0;height:20px;flex:none;background:var(--chrome);border-top:1px solid #c8c8c8;font-size:11px}
.statusbar>span{padding:2px 8px;border-right:1px solid #c8c8c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sbRecords{min-width:110px}
#sync{min-width:160px}
#sync.error{background:#c00000;color:#fff;cursor:pointer}
#sbSite{flex:1;color:var(--muted)}

/* page title bars (each page has its own color, like VersaCheck) */
.pagebar{color:#fff;font-size:15px;padding:3px 8px;flex:none;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.pb-green{background:linear-gradient(90deg,#55682a,#93a35f 55%,#c3cc9e)}
.pb-blue{background:linear-gradient(90deg,#3d58a7,#7f93cf 55%,#c6cfec)}
.pb-brown{background:linear-gradient(90deg,#5e5546,#998e7b 55%,#cfc7b8)}
.pb-teal{background:linear-gradient(90deg,#2c6670,#6a9ea6 55%,#bcd5d8)}
.pb-gray{background:linear-gradient(90deg,#596577,#8c97a8 55%,#c9ced7)}
.pb-purple{background:linear-gradient(90deg,#5b3f78,#937cae 55%,#cdc2db)}
.subbar{display:flex;align-items:center;gap:2px;background:var(--khaki);border-bottom:1px solid #b5ab88;padding:2px 4px;flex:none;flex-wrap:wrap}
.subbar.white{background:#fff;border-bottom:none}
.subbar .tb:hover{background:rgba(255,255,255,.55);border-color:#9d9372}
.subbar select{height:21px}
.tabs{display:flex;gap:0;padding:2px 4px 0;flex:none;border-bottom:1px solid #b8b8b8;background:#fff}
.tabs button{background:#f0f0f0;border:1px solid #b8b8b8;border-bottom:none;padding:2px 8px;margin-right:-1px;cursor:pointer;font-size:11px;position:relative;top:1px}
.tabs button.on{background:#fff;padding-bottom:3px;font-weight:600}
.flabel{color:#1a1aa8;margin-left:6px}
.flabel .x{color:#777;cursor:pointer;margin-left:4px;text-decoration:none}

/* grids */
.grid-wrap{flex:1;overflow:auto;min-height:120px;border-top:1px solid #b8b8b8;background:#fff;outline:none;position:relative}
table.grid{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed}
.grid th{position:sticky;top:0;z-index:1;background:linear-gradient(#fff,#ebebeb);font-weight:400;text-align:left;border-right:1px solid #c8c8c8;border-bottom:1px solid #a8a8a8;padding:1px 4px;height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;user-select:none}
.grid th.sort{cursor:pointer}
.grid th.sorted{font-weight:700}
.grid th .arrow{font-size:9px;margin-left:3px;color:#666}
.grid td{padding:0 4px;height:20px;border-bottom:1px solid #d6d6d6;border-right:1px solid #ececec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.grid tbody tr.r-odd td{background:var(--odd)}
.grid tbody tr.r-even td{background:var(--even)}
.grid tbody tr.sel td{background:var(--sel)!important;color:var(--sel-ink)!important}
.grid tbody tr.sel td .bal-neg{color:#ffd0d0}
.grid tbody tr.future td{color:#6b6b6b;font-style:italic}
.grid tbody tr.void td.amt{text-decoration:line-through}
.grid tbody tr.spacer td{background:#fff;border:none;padding:0;height:auto}
.grid .amt{text-align:right;font-variant-numeric:tabular-nums}
.grid th.amt{text-align:right}
.grid .ctr{text-align:center}
.grid .bal-neg{color:var(--neg)}
.grid .st{text-align:center;cursor:pointer}
.grid tr.due td.due{color:#c00000;font-weight:700}
.grid tr.today-line td{border-bottom:2px solid #3d58a7}
.grid .empty td{background:#fff!important;color:var(--muted);font-style:italic;text-align:center;height:40px}
.grid tr.grp td{font-weight:700;background:#f2efe2}
.grid tr.tot td{font-weight:700;border-top:1px solid #777;background:#fff}
.grid tr.click{cursor:pointer}

/* register footer (records and balances) */
.regfoot{display:flex;justify-content:space-between;gap:12px;background:var(--khaki2);border-top:1px solid #b5ab88;padding:2px 8px;flex:none;font-size:11px;flex-wrap:wrap}
.regfoot .l,.regfoot .r{display:grid;grid-template-columns:auto auto;gap:0 10px;align-content:center}
.regfoot .r{grid-template-columns:auto auto auto auto auto auto}
.regfoot b{text-align:right;font-variant-numeric:tabular-nums}

/* panels inside pages */
.page{flex:1;overflow:auto;padding:10px 12px}
.panel{border:1px solid var(--line2);background:#fff;padding:10px 12px;margin-bottom:10px}
.panel h3{margin:0 0 6px;font-size:13px}
.kv{display:grid;grid-template-columns:max-content auto;gap:3px 14px}
.kv b{font-variant-numeric:tabular-nums}
.payee-top{display:flex;border-bottom:1px solid #b8b8b8;height:130px;flex:none}
.payee-top .name{width:200px;flex:none;padding:10px 12px;font:700 15px Georgia,"Times New Roman",serif;border-right:1px solid #b8b8b8;overflow:auto}
.payee-top .name .small{font:11px var(--font);font-weight:400;margin-top:6px;color:var(--muted)}
.payee-top .notes{flex:1;display:flex;flex-direction:column}
.payee-top .notes .nh{background:#1f5aa8;color:#f5d36a;padding:1px 8px;font-weight:700}
.payee-top textarea{flex:1;border:none;resize:none;padding:6px 8px;font:12px var(--font)}
.welcome{max-width:760px}
.welcome h2{font-size:16px;margin:4px 0 8px}
.welcome ol{padding-left:20px}
.welcome li{margin-bottom:6px}

/* reports */
.rep-setup{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;max-width:760px}
.rep-setup select[size]{height:auto;width:100%}
.rep-paper{border:1px solid #bbb;background:#fff;padding:14px 18px;margin-top:10px;max-width:900px;box-shadow:2px 2px 6px rgba(0,0,0,.12)}
.rep-paper h2{margin:0;font-size:16px}
.rep-paper .sub{color:var(--muted);margin-bottom:8px}
.rep-paper table{border-collapse:collapse;width:100%}
.rep-paper td,.rep-paper th{padding:2px 6px;border-bottom:1px solid #eee;text-align:left}
.rep-paper .amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rep-paper tr.grp td{font-weight:700;padding-top:8px;border-bottom:1px solid #ccc}
.rep-paper tr.sub td:first-child{padding-left:22px}
.rep-paper tr.tot td{font-weight:700;border-top:1px solid #333}
.rep-paper tr.gtot td{font-weight:700;border-top:3px double #333;font-size:13px}
.rep-paper tr.click{cursor:pointer}
.rep-paper tr.click:hover td{background:#eef4ff}
.checklist{border:1px solid #888;background:#fff;height:220px;overflow:auto}
.checklist label{display:flex;gap:6px;align-items:center;padding:1px 6px;white-space:nowrap}
.checklist label:nth-child(even){background:#f6f6f6}

/* dialogs */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.18);display:flex;align-items:flex-start;justify-content:center;padding:60px 12px 12px;z-index:20;overflow:auto}
.dlg{background:#fff;border:1px solid #6d6d6d;box-shadow:0 6px 24px rgba(0,0,0,.35);width:100%;max-width:520px}
.dlg.wide{max-width:860px}
.dlg.mid{max-width:640px}
.dlg-title{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 4px 8px;background:#fff;border-bottom:1px solid #ddd;user-select:none}
.dlg-title .x{background:none;border:none;font-size:15px;line-height:1;padding:2px 8px;cursor:pointer}
.dlg-title .x:hover{background:#e81123;color:#fff}
.dlg-body{padding:10px;background:#f0f0f0}
.dlg-body.tan{background:var(--tan-dlg)}
.dlg-btns{display:flex;gap:6px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap;align-items:center}
.fgrid{display:grid;grid-template-columns:72px 1fr 60px 150px;gap:4px 8px;align-items:center}
.fgrid>label{text-align:left}
.fgrid input,.fgrid select{width:100%}
.fgrid .span3{grid-column:2 / -1}
.status-box{grid-column:3 / -1;border:1px solid #b9ae8c;padding:4px 6px;min-height:28px}
.splits{margin-top:10px;background:#fff;border:1px solid #9a9070}
.splits table{width:100%;border-collapse:collapse}
.splits th{background:linear-gradient(#fff,#ebebeb);border-bottom:1px solid #aaa;border-right:1px solid #ccc;font-weight:400;text-align:left;padding:1px 4px}
.splits td{padding:1px;border-bottom:1px solid #e3e3e3}
.splits td input{width:100%;border:1px solid transparent;height:20px}
.splits td input:focus{border-color:var(--focus)}
.splits .amt input{text-align:right}
.splits .rm{background:none;border:none;color:#b00000;cursor:pointer;font-size:14px;padding:0 6px}
.splits-foot{display:flex;justify-content:space-between;align-items:center;padding:4px;background:#f3f0e4;border-top:1px solid #c9c09f;gap:8px;flex-wrap:wrap}
.splitsum{background:#ffffcc;border:1px solid #c9c09f;padding:1px 8px;min-width:150px;display:flex;justify-content:space-between;gap:10px}
.form2{display:grid;grid-template-columns:130px 1fr;gap:5px 8px;align-items:center}
.form2 input,.form2 select,.form2 textarea{width:100%}
.form2 .full{grid-column:1 / -1}
.chk{display:flex;align-items:center;gap:6px}
.rec-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0}
.rec-sum div{background:#fff;border:1px solid #bbb;padding:4px 8px}
.rec-sum span{display:block;font-size:11px;color:var(--muted)}
.rec-sum b{font-size:14px;font-variant-numeric:tabular-nums}
.rec-sum .ok{background:#d8f3d8;border-color:#5aa85a}
.dlg .grid-wrap{border:1px solid #888;max-height:50vh;min-height:150px}

/* drop-down and context menus */
.menu{position:fixed;z-index:40;background:#f9f9f9;border:1px solid #a0a0a0;box-shadow:2px 3px 6px rgba(0,0,0,.25);padding:2px;min-width:180px;font-size:12px}
.menu .mi{display:flex;align-items:center;gap:6px;padding:3px 20px 3px 6px;cursor:default;white-space:nowrap;position:relative}
.menu .mi:hover,.menu .mi.hl{background:#91c9f7}
.menu .mi.dis{color:#999;background:none}
.menu .mi .k{margin-left:auto;padding-left:24px;color:#555}
.menu .mi .chk{width:14px;display:inline-block}
.menu .mi.sub::after{content:"▸";position:absolute;right:6px}
.menu .ms{height:1px;background:#d0d0d0;margin:3px 2px}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#ffffe1;border:1px solid #767676;color:#000;padding:8px 12px;z-index:50;display:flex;gap:10px;align-items:center;box-shadow:2px 3px 8px rgba(0,0,0,.3);max-width:calc(100% - 24px)}

/* narrow screens (phone) */
@media (max-width:760px){
  .body{flex-direction:column}
  .navpanel{width:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid #8ea6c9;background:linear-gradient(var(--nav1),var(--nav2))}
  .nav-head{display:none}
  .navpanel button{min-width:72px;padding:4px 2px}
  .navpanel button i[data-i]{width:24px;height:24px}
  .toolbar .tb span,.tb-right #who{display:none}
  .grid-wrap table.grid{min-width:620px}   /* scroll sideways rather than squeeze the payee column to nothing */
  .fgrid{grid-template-columns:70px 1fr}
  .fgrid .span3,.status-box{grid-column:2}
  .rep-setup,.rec-sum{grid-template-columns:1fr 1fr}
  .payee-top .name{width:130px}
  .statusbar #sbSite{display:none}
}

/* printing: just the page content */
@media print{
  .menubar,.toolbar,.navpanel,.statusbar,.subbar,.tabs,.no-print,.toast,.regfoot .no-print{display:none!important}
  #app{height:auto;display:block} .body{display:block} main{display:block}
  .view{display:block} .grid-wrap{overflow:visible;max-height:none;border:none}
  .grid th{position:static}
  .pagebar{color:#000;background:none!important;font-weight:700;text-shadow:none}
  .rep-paper{border:none;box-shadow:none;margin:0;padding:0;max-width:none}
}