/* Garage AutoCare Cloud 4.5 — professional bilingual tablet interface.
   Pure presentation layer: original DB identifiers and application workflow preserved. */
:root {
 --nav:#123e75; --nav2:#102e56; --bg:#f3f7fb; --card:#ffffff;
 --ink:#17324e; --muted:#677d92; --line:#e1e9f2;
 --teal:#10b5ae; --red:#ee4250; --gold:#efaa40;
 --shadow:0 5px 26px rgba(21,61,103,.065);
 --blue-soft:#eaf3ff; --teal-soft:#eafaf8;
}
html{scroll-behavior:smooth}
body{background:#f3f7fb;color:var(--ink);font-size:14px}
header{height:72px;min-height:72px;position:sticky;top:0;z-index:25;display:flex;
 align-items:center;gap:12px;background:linear-gradient(108deg,#103159 0%,#143f76 66%,#0e5c7c 100%);
 border-top:3px solid var(--teal);border-bottom:1px solid #ffffff20;box-shadow:0 4px 16px #0e2d4a24;padding:0 22px}
header:before{content:"";position:absolute;width:115px;height:3px;top:-3px;inset-inline-start:0;background:var(--red)}
.brand45{display:flex;align-items:center;gap:11px;min-width:0;line-height:1.15;letter-spacing:.1px;flex:1}
.brand-logo-box45{width:52px;height:52px;flex:0 0 52px;border:1px solid #d9edf5b8;border-radius:14px;
 background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px #0a1d3440;overflow:hidden}
.brand-logo-box45 img{width:100%;height:100%;object-fit:contain;padding:3px}
.brand-titles45{display:flex;align-items:baseline;column-gap:9px;row-gap:2px;flex-wrap:wrap;min-width:0}
.brand-titles45 strong{font-size:19px;white-space:nowrap;color:#fff;font-weight:820}
.brand-titles45 em{font-style:normal;color:#40dbd4}
.brand-titles45 small{display:block;flex-basis:100%;color:#c2d9ed;font-size:11px;line-height:1.4;font-weight:500;letter-spacing:.1px}
.buildbadge{font-size:10px;border:1px solid #48c4bf7c;border-radius:8px;padding:4px 7px;color:#f6ffff;background:#ffffff0f}
header .top{display:flex;align-items:center;gap:7px}
header .top button{background:#ffffff16;border:1px solid #ffffff2a;border-radius:10px;color:#fff;min-height:41px;padding:8px 11px}
header .top button:hover{background:#ffffff2c}
header .top .syncstate{color:#d0e7f7;border-radius:20px;font-size:11px}
header .gac-navback43{background:#ffffff13;border:1px solid #ffffff30;color:#fff;min-height:40px;border-radius:10px}
.layout{grid-template-columns:238px minmax(0,1fr);min-height:calc(100vh - 72px)}
aside{padding:20px 10px;background:linear-gradient(180deg,#102f58,#0e2c50 72%,#102641);border-inline-end:1px solid #ffffff0b;box-shadow:3px 0 20px #07264414;position:sticky;top:72px;height:calc(100dvh - 72px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#557b99 #0d294b;align-self:start}
.navlabel{color:#b1c6da;font-weight:750;font-size:10px;letter-spacing:.8px;padding:6px 14px 16px}
nav{display:grid;gap:3px}
nav button{width:100%;min-height:45px;gap:12px;padding:10px 12px;background:transparent;color:#d4e5f3;border:1px solid transparent;border-radius:11px;font-size:13px;text-align:start;font-weight:600}
nav button:hover{background:#ffffff12;color:white}
nav button.active{background:linear-gradient(100deg,#15aaa8 0%,#0f8ca3 100%);box-shadow:0 7px 16px #062d4d3b;border:1px solid #51d5d05e;color:#fff}
main{padding:26px clamp(16px,2.3vw,35px) 70px;max-width:1660px;min-width:0;margin:0 auto;align-self:start}
h1,.pagehead h1{font-size:clamp(21px,2.1vw,28px);color:#153b66;font-weight:850;letter-spacing:-.3px}
.pagehead h1 small{font-size:.62em;font-weight:600;color:#5b829e;white-space:normal}
.pagehead{margin-bottom:19px;gap:12px;align-items:center}
.pagehead>.muted,.pagehead .muted{color:#728598;line-height:1.65}
.eyebrow45{font-size:10px;display:block;letter-spacing:1.8px;font-weight:850;color:#0b9a9a;margin-bottom:6px}
.panel,.stat{border:1px solid #e1eaf3;border-radius:17px;background:var(--card);box-shadow:var(--shadow)}
.panel{padding:19px;margin-bottom:17px}
.panel h2{color:#163f6e;font-size:16px;line-height:1.5}
.stat{min-height:99px}
.stat .ico{background:linear-gradient(135deg,#ebf5ff,#dffaf7);color:#116f84;border:1px solid #d6efef}
.stat strong{color:#19467c;font-weight:820}
.muted,.helptext{line-height:1.65}
button{border-radius:10px;background:linear-gradient(108deg,#0d9da7,#10b7af);color:#fff;border:1px solid transparent;
 padding:10px 16px;font-weight:730;min-height:42px;box-shadow:0 2px 7px #103e5820;transition:transform .14s,filter .14s,box-shadow .14s}
button:hover:not(:disabled){filter:brightness(.97);box-shadow:0 3px 10px #103e582a}
button.secondary{background:#f0f5fb;color:#1d4e7f;border:1px solid #d8e5f2;box-shadow:none}
button.danger{background:#fff0f0;color:#b72836;border-color:#ffdee1;box-shadow:none}
button.mini{padding:8px 10px;min-height:38px;font-size:12px;font-weight:750;white-space:normal}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #23bcb9;outline-offset:2px}
input,select,textarea{border:1px solid #d3dfeb;border-radius:10px;background:#fff;color:#1d3b57;padding:10px 12px;min-height:46px;font-size:14px}
input:focus,select:focus,textarea:focus{border-color:#0daea9;box-shadow:0 0 0 3px #25c4b61b;outline:0}
label{color:#49647d;line-height:1.5;font-size:12px;font-weight:650}
.actions{align-items:center;gap:8px}
.action-cluster{display:flex;flex-wrap:wrap;gap:6px;min-width:228px}
.action-cluster button{white-space:nowrap;flex:0 0 auto}
.formgrid{gap:12px}
.tablewrap{border-radius:12px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:separate;border-spacing:0;width:100%;background:white}
thead th{font-weight:800;color:#315774;background:#eef5fc;font-size:12px;border-bottom:2px solid #cbdfe9;white-space:normal;vertical-align:middle}
td,th{padding:12px 11px;text-align:start;border-bottom:1px solid #e5edf4;font-size:13px;vertical-align:middle}
tbody tr:nth-child(even){background:#f9fbfd}
tbody tr:hover{background:#eff9fa}
tbody tr:last-child td{border-bottom:0}
td:has(.action-cluster){min-width:260px}
.pill,.gac-badge{background:#eaf7f4;color:#077b7c;border:1px solid #c3ece6}
.pill.warn,.gac-badge.warn{background:#fff5e5;color:#9a6815;border-color:#f1dbb2}
.gac-journey{background:#fff;border:1px solid #dceaf0;border-inline-start:4px solid #12b0aa;border-radius:17px;box-shadow:var(--shadow);padding:20px}
.gac-journey h2{color:#164779;font-size:17px}
.gac-step{border-color:#dee9f1;background:#f7fafc;border-radius:10px}
.gac-step.done{background:#eaf9f4;border-color:#b5e5cd}
.gac-step.active{background:#e7faff;border-color:#2ab1bf;box-shadow:inset 0 0 0 1px #2ab1bf38}
.gac-step strong{color:#174c78}
.gac-outstanding{background:#f3fafc;border-color:#b9e4e3}
.quickdocs45{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding:18px 22px;
 margin:17px 0;background:linear-gradient(115deg,#143e76,#12657f);border-radius:17px;color:white;box-shadow:0 8px 22px #133f6d20;
 border-inline-start:5px solid #f04b55}
.quickdocs45 strong{display:block;font-size:19px;margin:4px 0}.quickdocs45 small{display:block;color:#d4e9f3}
.quickdocs45 .eyebrow45{color:#7df3e8}.quickdocs-actions45{display:flex;flex-wrap:wrap;gap:10px}
.quickdocs45 button{background:#11b8ae;border-color:#41dbd6;min-height:47px}.quickdocs45 button.secondary{background:#ffffff17;color:white;border-color:#ffffff51}
/* Business document registers */
.doc-kpis45{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
.doc-kpi45{background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);border-radius:15px;padding:16px 18px;
 border-top:3px solid #11b3ac;min-width:0}
.doc-kpi45:nth-child(2){border-top-color:#eb4350}.doc-kpi45:nth-child(3){border-top-color:#184978}
.doc-kpi45 span{display:block;font-size:12px;color:#6c8295;margin-bottom:9px;line-height:1.5}
.doc-kpi45 b{display:block;font-size:clamp(20px,2.1vw,30px);color:#173f71;font-weight:850;overflow-wrap:anywhere}
.doc-kpi45:nth-child(2) b{color:#db3949}
.doc-instructions45{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--teal-soft);
 border:1px solid #c4ebe8;padding:12px 16px;margin-bottom:18px;border-radius:12px;color:#286a78;font-weight:750;font-size:12px}
.step-dot45{display:inline-grid;place-items:center;width:24px;height:24px;background:#12b2b0;color:#fff;border-radius:50%;font-size:12px;flex:0 0 24px}
.step-arrow45{color:#e44755;font-size:20px;font-weight:900;padding:0 3px}
#dispatch>.panel.formgrid{display:grid;grid-template-columns:1.2fr 1.25fr 1fr 1.4fr;gap:12px;align-items:end}
#dispatch>.panel.formgrid .actions{grid-column:1/-1;margin:2px 0 0;justify-content:flex-end}
#dispatch>.panel.formgrid .actions button{font-size:14px;min-height:47px;background:linear-gradient(112deg,#0b999e,#10b9b0)}
.doc-listhead45{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.doc-listhead45 h2{margin:0 0 1px;color:#17477b}.doc-listhead45 h2 small{color:#7292a7;font-size:13px;font-weight:600}
.doc-listhead45 p{margin:4px 0}.doc-listhead45 label{width:min(100%,340px)}
.doc-listhead45 input{width:100%;font-size:14px;background:#f9fcfe}
.doc-table-panel45{padding:18px}
.doc-tablewrap45{border:1px solid #dce7f1;border-radius:11px}
.doc-table45{width:100%;min-width:790px;direction:inherit}
.doc-table45 thead th{background:#edf5fc;color:#194976;white-space:normal;padding:15px 12px;font-size:12px;line-height:1.6}
.doc-table45 tbody td{padding:13px 12px;line-height:1.55;white-space:normal;color:#28465f}
.doc-table45 tbody td:nth-child(4){white-space:nowrap;direction:ltr;unicode-bidi:isolate;text-align:center}
.doc-table45 tbody tr:nth-child(even){background:#f9fbfe}
.doc-table45 tbody tr:hover{background:#eef9f9}
.doc-table45 .doc-ref45{display:inline-block;white-space:nowrap;direction:ltr;unicode-bidi:isolate;font-weight:850;color:#174f85;font-size:13px}
.doc-table45 .doc-name45{font-weight:750;color:#193b5c;max-width:220px}
.doc-table45 .doc-amount45{color:#154f70;font-weight:850;white-space:nowrap;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start}
.doc-table45 .action-cluster{min-width:260px;max-width:435px}
.doc-table45 .action-cluster .primary-convert45{background:linear-gradient(110deg,#ec4652,#da3246)}
.doc-table45 .action-cluster .wa-send43{background:#1a9368;color:#fff}
.doc-table45 .action-cluster .pdf-send43{background:#164c7f;color:#fff}
.doc-table45 .doc-badge45{display:inline-flex;align-items:center;padding:5px 9px;border-radius:50px;font-size:11px;font-weight:800;background:#e7f8ef;color:#117b5a;border:1px solid #c5e9d6;white-space:nowrap}
.doc-table45 .doc-badge45.pending{background:#fff5e6;border-color:#f5dfb5;color:#a16b13}
#invoiceDeliveryPanel43.show{margin-bottom:16px;background:#eaf8f8;border:1px solid #b3e2de;border-inline-start:4px solid #12b4ae;box-shadow:var(--shadow)}
#invoiceDeliveryPanel43 b{color:#1e5b76}
#invoiceDeliveryPanel43 p{margin-bottom:0!important}
#invoices41>.pagehead{margin-top:18px}
/* Brand settings */
.brand-setting45{border-inline-start:4px solid #13b4ad}
.brand-setting-title45 h2{margin:2px 0 5px}
.brand-setting-preview45{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
#logoPreview45{width:170px;height:132px;flex:0 0 170px;min-height:132px;margin:6px 0;padding:10px;display:grid;place-items:center}
#logoPreview45 img{max-width:100%;max-height:92px;object-fit:contain}
#logoPreview45 small{font-size:10px;text-align:center;color:#8196a7}
.brand-setting-upload45{flex:1;min-width:250px;display:grid;justify-items:start;gap:11px}
.brand-setting-upload45 label{width:100%}
/* A4 document view — readable table, colour-coded hierarchy */
#bonPreview42,#repairBonPreview44{width:min(1040px,98vw);max-height:94dvh;border-radius:18px;border:1px solid #e1edf3;box-shadow:0 24px 75px #071e3688}
.gac-doc-wrap{padding:15px;background:#eaf1f7;max-height:94dvh}
.gac-doc-actions{padding:12px;top:0;gap:9px;box-shadow:0 4px 10px #17355116;border:1px solid #dce8f1;border-radius:13px}
.gac-doc-actions button{min-height:44px}
.gac-doc-actions .primary-convert45{background:linear-gradient(105deg,#ea4854,#cb2d43);font-weight:850}
.gac-document{max-width:800px;min-height:780px;padding:32px 37px;border:1px solid #e3e9ef;border-radius:9px;box-shadow:0 5px 15px #14304c12;line-height:1.6}
.gac-document h2{color:#164e7e;border-bottom:2px solid #11b5af}
.gac-document table{border-collapse:collapse;border-spacing:0;margin:12px 0}
.gac-document th,.gac-document td{border:1px solid #d3e1ed;padding:11px 10px;white-space:normal;font-size:12px;line-height:1.7;vertical-align:middle}
.gac-document th{background:#eaf3f9;color:#1f4d71}
.gac-document tr:nth-child(even) td{background:#fcfdff}
.doc-head45{display:flex;align-items:center;justify-content:space-between;gap:17px;padding-bottom:17px;margin-bottom:15px;border-bottom:3px solid #14b3ad}
.doc-head45 .doc-mark45{min-width:90px;max-width:140px;border-radius:10px;background:#f5f9fb;padding:8px;text-align:center}
.doc-head45 .doc-mark45 img{max-width:120px;height:auto;max-height:75px;object-fit:contain}
.doc-head45 .doc-company45{flex:1;min-width:0}.doc-head45 .doc-company45 b{font-size:21px;display:block;color:#194776}
.doc-head45 .doc-company45 span{font-size:11px;color:#6a7e8d;display:block;overflow-wrap:anywhere}
.doc-title45{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;margin-bottom:12px}
.doc-title45 h2{border:0;padding:0;margin:0;color:#124876;font-size:19px}
.doc-number45{padding:6px 10px;background:#e5f3ff;border-radius:8px;border:1px solid #cfdef3;color:#194c7d;direction:ltr;unicode-bidi:isolate;font-weight:800;font-size:13px}
.doc-meta45{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:17px}
.doc-meta45>div{background:#f7fafc;border:1px solid #e1eaf1;border-radius:9px;padding:12px;line-height:1.7;font-size:12px;overflow-wrap:anywhere}
.doc-meta45 b{display:block;color:#1b5a86;font-size:12px;margin-bottom:5px}
.doc-subhead45{font-weight:850;color:#1b527e;margin:17px 0 8px;font-size:13px}
.gac-document table.doc-lines45 th:first-child{width:48%}
.gac-document .doc-total45{margin:15px 0 0;display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:9px;background:#17497b;color:#fff;padding:13px 17px}
.gac-document .doc-total45 strong{font-size:20px;white-space:nowrap}
.doc-note45{color:#597282;font-size:11px;line-height:1.8}
.doc-tag45{display:inline-block;background:#e6f8f4;padding:4px 10px;border-radius:8px;color:#0b837c;font-size:12px;font-weight:800}
.gac-document .doc-sign43{margin-top:24px}.gac-document .doc-sign43 .doc-sign-cell{min-height:125px}
.authwrap{max-width:530px}.authcard{border-radius:19px;border:1px solid #dceaf3;box-shadow:0 12px 38px #123e7520;border-top:5px solid #10b5ae}
.authcard h2{color:#153f76}.authcard button{min-height:47px}
/* hide hidden rows correctly even if striping styles apply */
.doc-table45 tbody tr[hidden]{display:none!important}
@media(max-width:1250px){.layout{grid-template-columns:208px 1fr}aside{padding-inline:7px}nav button{font-size:12px;padding:9px 10px}main{padding:18px}.brand-titles45 strong{font-size:17px}#dispatch>.panel.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
 header{height:auto;min-height:68px;padding:7px 10px;gap:6px;flex-wrap:wrap;align-items:center}
 header .brand45{min-width:unset;flex:1;order:0}.brand-logo-box45{width:43px;height:43px;flex-basis:43px;border-radius:11px}.brand-titles45 strong{font-size:15px}.brand-titles45 small{font-size:9px}.buildbadge{font-size:9px}
 header .top{flex:0 1 auto;order:3;margin-inline-start:auto;justify-content:flex-end}
 header .gac-navback43{order:2}
 .layout{grid-template-columns:1fr}
 .layout aside{background:#0f3058}
 .layout main{padding:16px 12px 95px}
 .mobile-menu-toggle{display:inline-flex;min-height:42px;order:-1;background:#ffffff20;color:white;border:1px solid #ffffff40}
 .doc-kpis45{gap:8px}.doc-kpi45{padding:12px}.doc-kpi45 span{font-size:10px}.doc-kpi45 b{font-size:19px}
 .mobilebar{background:#fff;border-top:1px solid #d7e5f1;box-shadow:0 -5px 18px #10345816}
 .mobilebar button.active{background:#e9faf8;color:#087b85;border-top:3px solid #10b4ae}
 #bonPreview42,#repairBonPreview44{width:min(99vw,940px);max-height:95dvh}
 .gac-doc-wrap{max-height:95dvh;padding:8px}.gac-document{padding:18px;min-height:650px}
}
@media(max-width:650px){
 .brand-titles45 small{display:none}.brand45{gap:6px}.brand-titles45 strong{font-size:14px}
 header .top{gap:3px}.brand-titles45 .buildbadge{padding:3px 5px}
 .doc-kpis45{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.doc-kpi45{padding:9px 8px}.doc-kpi45 b{font-size:16px}
 .doc-instructions45{gap:5px;font-size:11px;padding:9px}.doc-instructions45 .step-arrow45{display:none}
 #dispatch>.panel.formgrid{grid-template-columns:1fr}
 .doc-listhead45 label{width:100%}.doc-table-panel45{padding:10px}
 .doc-meta45{grid-template-columns:1fr}
 .gac-document{padding:12px 10px;min-height:500px}.gac-document .doc-head45{gap:9px}.doc-head45 .doc-company45 b{font-size:15px}.doc-head45 .doc-mark45{min-width:60px;max-width:80px}
 .gac-document th,.gac-document td{font-size:11px!important;padding:6px 5px!important}
 .gac-document .doc-title45 h2{font-size:16px}
 .gac-document .doc-total45{padding:9px;font-size:12px}.gac-document .doc-total45 strong{font-size:16px}
 .gac-doc-actions{gap:5px;padding:8px}.gac-doc-actions button{font-size:11px;min-height:42px;padding:7px 9px}
 .quickdocs45{padding:14px;gap:12px}.quickdocs45 strong{font-size:16px}
 .brand-setting-upload45{min-width:0}
}
@media print{
 header,aside,.mobilebar,.quickdocs45,.doc-kpis45,.gac-doc-actions{display:none!important}
 .gac-document{max-width:none;box-shadow:none;border:0;padding:0!important;min-height:0}
 .gac-document table.doc-lines45{page-break-inside:auto}
 .gac-document table.doc-lines45 tr{page-break-inside:avoid}
 .gac-document .doc-head45{break-inside:avoid}
 .gac-document .doc-meta45{break-inside:avoid}
 .gac-document .doc-sign43{break-inside:avoid}
 @page{size:A4;margin:10mm}
}