/* New Synergy — styled to match Synergy Auto Shop Premium 11 (Windows desktop look) */
:root{
  --desk:#1b6fe0; --menu-bg:#f0f0f0; --frame:#dbe7f5; --frame-active:#cfe0f5; --title-text:#1d2d44;
  --navy:#16337a; --navy2:#2a55b8; --hdr-text:#fff; --panel-border:#8aa4c8; --sel:#3399ff; --sel-text:#fff;
  --grid-alt:#ffffff; --grid-line:#e2e2e2; --red:#d40000; --link:#0033cc; --btn:#f3f3f3; --btn-border:#9a9a9a;
  --font: Tahoma, "Segoe UI", Verdana, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font:11px var(--font);color:#000;background:var(--desk)}
button,input,select,textarea{font:11px var(--font)}

/* ---------- app frame ---------- */
#appbar{position:fixed;left:0;right:0;top:0;height:20px;background:#fff;display:flex;align-items:center;padding:0 6px;border-bottom:1px solid #cfcfcf;gap:6px}
#appbar .logo{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9bd 0,#246 70%)}
#appbar .ttl{font-size:12px}
#menubar{position:fixed;top:20px;left:0;right:0;height:19px;background:var(--menu-bg);display:flex;align-items:center;padding-left:2px}
#menubar .mi{padding:2px 7px;cursor:default;position:relative;user-select:none}
#menubar .mi:hover,#menubar .mi.open{background:#cce4f7;outline:1px solid #99c9ef}
.dropdown{position:absolute;top:18px;left:0;background:#f2f2f2;border:1px solid #979797;box-shadow:2px 2px 3px rgba(0,0,0,.3);min-width:230px;padding:2px;z-index:99999;display:none}
.mi.open .dropdown{display:block}
.dropdown .di{display:flex;justify-content:space-between;padding:3px 20px 3px 28px;white-space:nowrap}
.dropdown .di:hover{background:#91c9f7}
.dropdown .di.dis{color:#9a9a9a}
.dropdown .sep{border-top:1px solid #d7d7d7;margin:3px 2px 3px 26px}
#toolbar{position:fixed;top:39px;left:0;right:0;height:24px;background:linear-gradient(#f7f9fd,#e3ebf6);border-bottom:1px solid #b5c4dc;display:flex;align-items:center;gap:2px;padding-left:6px}
#toolbar .tb{display:flex;align-items:center;gap:4px;padding:2px 6px;border:1px solid transparent;cursor:default}
#toolbar .tb:hover{border-color:#9fbbe0;background:#e7f0fb}
#toolbar .sep{width:1px;height:16px;background:#b5c4dc;margin:0 4px}
#desk{position:fixed;top:63px;left:0;right:0;bottom:20px;overflow:hidden}
#statusbar{position:fixed;bottom:0;left:0;right:0;height:20px;background:#f0f0f0;border-top:1px solid #cfcfcf;display:flex;align-items:center;gap:0}
#statusbar .sp{padding:0 10px;border-right:1px solid #cfcfcf;height:100%;display:flex;align-items:center;white-space:nowrap}
#statusbar .grow{flex:1}

/* ---------- MDI windows ---------- */
.win{position:absolute;background:var(--frame);border:1px solid #7a8ea8;box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,2px 3px 8px rgba(0,0,0,.35);display:flex;flex-direction:column;min-width:200px;min-height:80px;border-radius:5px 5px 0 0}
.win.active{background:var(--frame-active);border-color:#456a9b}
.win .tbar{height:22px;display:flex;align-items:center;padding:0 4px 0 7px;color:#56677e;cursor:default;user-select:none;gap:6px}
.win.active .tbar{color:var(--title-text)}
.win .tbar .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.win .tbar .wb{width:24px;height:16px;border:1px solid #8ea3bf;border-radius:3px;background:linear-gradient(#f4f8fd,#d5e1f0);display:flex;align-items:center;justify-content:center;font-size:10px;color:#333}
.win .tbar .wb.x{width:36px;background:linear-gradient(#e9a99a,#c74c35);color:#fff;border-color:#8c3a2b}
.win .body{flex:1;background:#eef3fa;margin:0 5px 5px;border:1px solid #9fb2cc;overflow:hidden;display:flex;flex-direction:column;padding:6px;gap:5px;position:relative}
.win .grip{position:absolute;right:0;bottom:0;width:12px;height:12px;cursor:nwse-resize}
.win.min .body,.win.min .grip{display:none}
.win.min{height:24px!important;min-height:24px}

/* ---------- controls ---------- */
.row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.row.wrap{flex-wrap:wrap}
.lbl{white-space:nowrap}
.lbl.b{font-weight:bold;color:var(--link)}
input[type=text],input[type=date],input[type=password],input[type=number],select,textarea{border:1px solid #abadb3;background:#fff;padding:2px 3px;height:20px}
textarea{height:auto;resize:none}
input[readonly],textarea[readonly]{background:#fff}
input.ro,select.ro{background:#f4f4f4}
.blue{color:var(--link)}
.btn{background:linear-gradient(#f6f6f6,#dedede);border:1px solid var(--btn-border);border-radius:3px;padding:2px 10px;min-width:70px;height:22px;cursor:default;white-space:nowrap}
.btn:hover{background:linear-gradient(#eaf6fd,#bee6fd);border-color:#3c7fb1}
.btn:active{background:#c4e5f6}
.btn.l{color:var(--link)}
.btn:disabled{color:#a0a0a0;background:#f4f4f4;border-color:#c9c9c9}
.btn.sm{min-width:0;padding:1px 6px}
.ib{width:22px;height:22px;min-width:0;padding:0;display:inline-flex;align-items:center;justify-content:center}
.spacer{flex:1}
fieldset{border:1px solid #b9c7da;padding:4px 6px;margin:0}
legend{color:#1d4f91}

/* tabs */
.tabs{display:flex;gap:0;border-bottom:1px solid #8ea3bf}
.tabs .tab{flex:1;text-align:center;padding:4px 10px;border:1px solid #9fb2cc;border-bottom:none;background:linear-gradient(#f7f9fc,#e2eaf4);margin-right:-1px;cursor:default}
.tabs .tab.on{background:#fff;position:relative;top:1px;font-weight:normal;outline:1px dotted #333;outline-offset:-4px}
.tabpage{display:none;flex:1;overflow:auto;background:#eef3fa;padding:6px 0}
.tabpage.on{display:flex;flex-direction:column;gap:5px}

/* grids */
.grid{flex:1;overflow:auto;background:#fff;border:1px solid #828790;position:relative}
.grid table{border-collapse:collapse;width:100%;table-layout:fixed}
.grid th{position:sticky;top:0;background:linear-gradient(#fff,#f1f2f4);border-right:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;font-weight:normal;text-align:left;padding:2px 4px;white-space:nowrap;overflow:hidden;z-index:1;cursor:default}
.grid th.sorted::after{content:" \25B2";color:#2a8a2a;font-size:9px}
.grid th.sorted.desc::after{content:" \25BC"}
.grid td{padding:1px 4px;border-right:1px solid var(--grid-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:17px;border-bottom:1px solid #f0f0f0}
.grid td.n,.grid th.n{text-align:right}
.grid tr.sel td{background:#cde8ff;outline:none}
.grid:focus-within tr.sel td{background:var(--sel);color:#fff}
.grid tr.red td{color:var(--red)}
.grid:focus-within tr.sel.red td{color:#fff}
.grid tr:hover td{background:#e5f3ff}
.grid tr.sel:hover td{background:var(--sel);color:#fff}
.grid .empty{padding:10px;color:#666}
.gridstat{color:#555}

/* ---------- navigation menu window ---------- */
.nav{display:flex;flex:1;gap:4px;overflow:hidden;background:#fff;padding:0;margin:-6px}
.nav .left{width:140px;background:linear-gradient(90deg,#c6d5ec,#dfe8f5);display:flex;flex-direction:column;border-right:1px solid #8aa4c8}
.navhdr{background:linear-gradient(#2c4f9a,#16337a);color:#fff;font-weight:bold;text-align:center;padding:4px;font-size:12px}
.navbtn{white-space:nowrap;display:flex;align-items:center;gap:6px;padding:3px 6px;border-bottom:1px solid #b3c3dc;background:linear-gradient(#f5f8fc,#dce6f3);cursor:default;height:22px}
.navbtn:hover{background:linear-gradient(#fdf4d8,#f8dc8c)}
.navbtn.on{background:linear-gradient(#c7dafb,#99bbee);font-weight:normal}
.navbtn.dis{color:#8d8d8d}
.navbtn .cnt{color:#c00000;margin-left:auto}
.navsub{margin-top:auto;font-size:12px;padding:4px 6px;display:flex;align-items:center;gap:6px}
.winlist{background:#fff;border:1px solid #8aa4c8;margin:0 3px 3px;height:96px;overflow:auto}
.winlist div{padding:1px 3px;white-space:nowrap;cursor:default}
.winlist div.on{background:var(--sel);color:#fff}
.nav .main{flex:1;display:flex;flex-direction:column;gap:4px;padding:4px 4px 4px 0;min-width:0}
.modhdr{background:linear-gradient(#2c4f9a,#16337a);color:#fff;font-weight:bold;padding:4px 8px;font-size:12px;display:flex}
.modhdr span{margin-left:auto;font-weight:normal}
.navgrid{display:grid;grid-template-columns:1fr 132px;grid-template-rows:1fr 1fr;gap:4px;flex:1;min-height:0}
.panel{border:1px solid #8aa4c8;background:#fff;display:flex;flex-direction:column;min-height:0}
.panel .ph{font-weight:bold;padding:2px 4px}
.panel .ph.blue{background:linear-gradient(#2c4f9a,#16337a);color:#fff;text-align:center;font-weight:bold}
.icons{display:flex;flex-wrap:wrap;gap:4px 2px;padding:4px;align-content:flex-start;overflow:auto}
.ico{width:76px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:3px 1px;cursor:default;border:1px solid transparent;border-radius:2px;line-height:1.2}
.ico:hover{border-color:#a8d0f5;background:#e7f2fd}
.ico svg{width:32px;height:32px;margin-bottom:2px}
.ico u{text-decoration:underline}
.lst{overflow:auto;flex:1}
.lst div{padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.lst div:hover{background:#e5f3ff}
.lst div.on{background:var(--sel);color:#fff}
.setupgrid{display:flex;gap:4px;flex:1;min-height:0}
.setupgrid .panel{flex:1}

/* invoice */
.inv-top{display:grid;grid-template-columns:190px 1fr 1fr;gap:6px}
.inv-client{background:#fff;border:1px solid #9fb2cc;padding:4px;min-height:100px;position:relative}
.inv-client .nm{font-weight:bold;color:var(--link)}
.inv-client .flags{position:absolute;left:4px;bottom:4px;color:var(--red);font-size:10px;line-height:1.2}
.kv input,.kv select{min-width:0;width:100%}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 6px;align-items:center}
.kv label{white-space:nowrap}
.inv-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.box{background:#fff;border:1px solid #9fb2cc;padding:4px}
.money{display:grid;grid-template-columns:1fr auto;gap:1px 10px}
.money .v{text-align:right;color:var(--link)}
.vehline{color:var(--link);text-align:right}
.warnbox{background:#fff3c4;border:1px solid #d9b100;padding:4px;color:#7a5600}
.redflag{color:var(--red)}

/* report preview */
.report{flex:1;overflow:auto;background:#7d7d7d;padding:14px}
.page{background:#fff;width:640px;margin:0 auto 14px;padding:24px 28px;box-shadow:2px 2px 6px rgba(0,0,0,.5);font:12px Arial,sans-serif}
.page h1{font-size:17px;text-align:center;margin:0}
.page h2{font-size:13px;text-align:center;font-style:italic;margin:4px 0 10px}
.page .vd{border:1px solid #000}
.page .vd .h{background:#ccc;text-align:center;font-weight:bold;border-bottom:1px solid #000;padding:2px}
.page .vd .r{display:flex;justify-content:space-between;padding:2px 4px}
.page .inv{border-top:1px solid #000;border-bottom:1px solid #000;margin-top:8px;padding:2px 4px;font-weight:bold;font-style:italic;display:flex;gap:30px}
.page .ln{display:grid;grid-template-columns:110px 50px 1fr 80px;padding:1px 20px;gap:6px}
.page .tx{padding:1px 20px;white-space:pre-wrap}

/* login */
#login{position:fixed;inset:0;background:radial-gradient(ellipse at center,#fdfdff 0,#dfe9f6 60%,#e8c9c0 140%);display:flex;align-items:center;justify-content:center;z-index:100000}
#login .lw{width:460px;background:var(--frame-active);border:1px solid #456a9b;box-shadow:2px 3px 10px rgba(0,0,0,.35)}
#login .lw .tbar{padding:4px 7px}
#login .lw .body{margin:0 5px 5px;background:#eef3fa;border:1px solid #9fb2cc;padding:6px;display:flex;flex-direction:column;gap:6px}
.msg{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200000;background:rgba(0,0,0,.05)}
.msg .mw{background:var(--frame-active);border:1px solid #456a9b;box-shadow:2px 3px 10px rgba(0,0,0,.35);min-width:320px;max-width:520px}
.msg .mw .tbar{padding:4px 7px}
.msg .mw .body{margin:0 5px 5px;background:#fff;border:1px solid #9fb2cc;padding:14px;display:flex;flex-direction:column;gap:12px}
.loading{position:absolute;inset:0;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-weight:bold;color:#345}