:root{--navy:#12233f;--blue:#246bfd;--pale:#f4f7fb;--line:#dfe6ef;--ink:#172033;--muted:#697386;--green:#0c9463;--red:#d14343}*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--pale)}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:8px;background:var(--blue);color:white;padding:10px 16px;font-weight:650}.login-shell{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#ffe4c2 0%,#f8fbff 42%,#0b86d1 100%)}.login-card{position:relative;width:min(420px,90vw);padding:42px 40px 38px;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #bedaff;border-radius:20px;box-shadow:0 30px 90px #0754c842;overflow:hidden}.brand-mark,.brand span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff;font-weight:800;overflow:hidden}.login-card .brand-mark{width:70px;height:70px;border-radius:18px;background:#fff;border:1px solid #cfe2ff;box-shadow:0 14px 30px #0754c824}.brand-mark img,.brand span img,.logo-preview img{width:100%;height:100%;object-fit:contain;background:white}.login-card::before{content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,#f58220,#1594ff)}.login-card h1{margin:18px 0 4px;color:#08265c;font-size:24px;line-height:1.15;text-transform:uppercase}.login-card p{color:var(--muted);margin:0 0 24px}.login-card label{display:block;margin:14px 0}.login-card input{display:block;width:100%;margin-top:6px}.login-card button{width:100%;margin-top:10px}input,select{border:1px solid var(--line);border-radius:8px;padding:10px;background:white}.error{color:var(--red);margin-top:12px}#app{min-height:100vh;display:grid;grid-template-columns:230px 1fr}aside{background:var(--navy);color:white;padding:24px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:0 8px 28px}.brand span{width:38px;height:38px;flex:none}.brand strong{line-height:1.2;overflow-wrap:anywhere}nav{display:grid;gap:5px}nav button,.quiet{background:transparent;text-align:left;color:#bdc9da;padding:11px 13px}nav button:hover,nav button.active{background:#ffffff18;color:white}.quiet{margin-top:8px}main{padding:0 32px 40px;min-width:0}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:28px}header h1{margin:2px 0;font-size:25px}header small,#userName,.muted{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px}.card small{color:var(--muted)}.card strong{display:block;font-size:25px;margin:8px 0}.positive{color:var(--green)}.negative{color:var(--red)}.panel{margin-top:20px}.panel-head,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel h2{font-size:17px;margin:0}.toolbar{margin-bottom:16px}.button-row{display:flex;gap:8px;flex-wrap:wrap}.secondary{background:white;color:var(--ink);border:1px solid var(--line)}table{border-collapse:collapse;width:100%;margin-top:14px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:12px 8px}th{font-size:12px;text-transform:uppercase;color:var(--muted)}td.num,th.num{text-align:right}.tag{display:inline-block;border-radius:20px;padding:3px 9px;background:#eef2f7}.tag.Paid{background:#e7f7f0;color:var(--green)}.actions button{padding:5px 8px;background:transparent;color:var(--red)}dialog{border:0;border-radius:15px;padding:24px;width:min(620px,92vw);box-shadow:0 20px 60px #0003}dialog::backdrop{background:#10213c90}.dialog-title,.dialog-actions{display:flex;align-items:center;justify-content:space-between}.dialog-title h2{margin:0}.icon{background:transparent;color:var(--muted);font-size:24px;padding:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.form-grid label{display:grid;gap:6px}.form-grid .wide{grid-column:1/-1}.form-grid .check{display:flex;align-items:center;gap:8px}.dialog-actions{justify-content:flex-end;gap:8px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings-grid form label{display:grid;gap:6px;margin-bottom:12px}.logo-preview{display:grid;place-items:center;width:90px;height:90px;border:1px solid var(--line);border-radius:14px;background:var(--pale);overflow:hidden;font-size:24px;font-weight:800;margin:10px 0 14px}#toast{position:fixed;right:25px;bottom:25px;background:var(--navy);color:white;padding:12px 18px;border-radius:9px;display:none}@media(max-width:900px){#app{grid-template-columns:1fr}aside{display:none}main{padding:0 15px 30px}.cards{grid-template-columns:1fr 1fr}.settings-grid{grid-template-columns:1fr}}@media(max-width:520px){.cards,.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.panel{overflow:auto}}
.customer-search{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.customer-search label{display:grid;gap:6px;min-width:min(420px,100%);flex:1}.customer-search .button-row{padding-bottom:1px}.tag.Part.Paid{background:#fff4d6;color:#9a6500}#statementDialog{width:min(1100px,96vw)}#deleteAuthDialog{border-top:6px solid var(--red)}#deleteAuthDialog h2{color:var(--red)}.daily-status{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:12px;margin:14px 0 16px}.daily-status.saved{background:#e7f7f0;color:#08764d;border:1px solid #bcebd7}.daily-status.missing{background:#fff4d6;color:#8a5a00;border:1px solid #f2daa0}.selection-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#eef4ff;border:1px solid #bfd2ff;border-radius:12px;padding:14px 18px;margin-bottom:16px}.danger{background:var(--red)}.user-creator{border:2px solid #b9cdfd;background:linear-gradient(145deg,#fff,#f4f7ff)}.password-tools{display:grid;grid-template-columns:1fr auto;gap:8px}.user-list{display:grid;gap:10px;margin-top:14px}.user-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px}.user-item div:first-child{display:grid}.user-item span{color:var(--muted);font-size:12px}.sales-command{position:relative;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:24px 28px;text-align:left;border-radius:20px;overflow:hidden;box-shadow:0 18px 45px #10213c22}.sales-command.complete{background:linear-gradient(120deg,#102f5e,#126f73);color:#fff}.sales-command.pending{background:linear-gradient(120deg,#132b55,#3851a7);color:#fff}.sales-command:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-70px;top:-150px;background:#ffffff12}.sales-command:hover{transform:translateY(-2px);box-shadow:0 22px 55px #10213c30}.sales-command-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:#ffffff20;border:1px solid #ffffff35;font-size:30px}.sales-command-copy,.sales-command-total{display:grid;gap:2px;min-width:0}.sales-command small{font-size:11px;letter-spacing:.15em;color:#c7ddff}.sales-command strong{font-size:24px;line-height:1.2;white-space:normal}.sales-command em{font-style:normal;color:#d7e5f5;font-weight:500}.sales-command-total{text-align:right}.sales-command-total strong{font-size:25px}.sales-command-arrow{position:relative;font-size:34px}@media(max-width:700px){.sales-command{grid-template-columns:auto minmax(0,1fr) auto;padding:20px;gap:14px}.sales-command-total{grid-column:2;text-align:left}.sales-command-arrow{grid-column:3;grid-row:1/3}.sales-command strong,.sales-command-total strong{font-size:19px}.daily-status{display:grid}.user-item{align-items:flex-start;display:grid}}
.actions .secondary{color:var(--blue);border:1px solid var(--line);padding:5px 8px;margin-right:4px}.actions{white-space:nowrap}
textarea{font:inherit;border:1px solid var(--line);border-radius:8px;padding:10px;background:white;resize:vertical;width:100%}
.catalog-link{display:inline-flex;align-items:center;margin-top:5px;padding:4px 9px;border:1px solid #f39a45;border-radius:999px;background:#fff5e9;color:#0d3471;font-size:11px;font-weight:750}.catalog-link:hover{background:#ffead2}
.upload-progress{height:12px;margin-top:9px;border-radius:999px;background:#dfe8f5;overflow:hidden}.upload-progress div{width:0;height:100%;background:linear-gradient(90deg,#0d3471,#ff7a18);transition:width .15s}.upload-percent{display:block;margin-top:6px;color:#0d3471}.upload-percent.complete{color:var(--green)}.upload-percent.failed{color:var(--red)}
.premium-settings .settings-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;padding:22px 25px;border-radius:16px;background:linear-gradient(135deg,#0b4d91,#2297d5 68%,#f58220);color:#fff;box-shadow:0 15px 35px #0754c82b}.settings-hero small{font-weight:850;letter-spacing:.18em;color:#dff4ff}.settings-hero h2{margin:5px 0 2px;font-size:23px}.settings-hero p{margin:0;color:#eaf7ff}.settings-health{display:grid;min-width:145px;padding:13px 18px;border:1px solid #ffffff55;border-radius:13px;background:#ffffff18;text-align:center}.settings-health strong{font-size:28px}.settings-health span{font-size:11px}.premium-settings .settings-grid{align-items:start}.premium-settings .settings-card{position:relative;overflow:hidden;border:1px solid #b8d8f4;box-shadow:0 10px 28px #0754c814}.premium-settings .settings-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#1594ff,#f58220)}.settings-card-head{display:flex;align-items:center;gap:12px;margin:-4px 0 14px;padding-bottom:12px;border-bottom:1px solid #dceafa}.settings-card-head>span{display:grid;place-items:center;width:55px;height:55px;border-radius:14px;background:linear-gradient(135deg,#dff4ff,#fff0df);color:#0d3471;font-size:10px;font-weight:850;text-transform:uppercase}.settings-card-head h2{margin:0!important;color:#0d3471}.settings-card-head p{margin:2px 0 0;color:var(--muted);font-size:11px}.premium-company-form>h2{display:none}.letterhead-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.letterhead-fields .wide{grid-column:1/-1}.premium-settings label{font-weight:700;color:#173b68}.premium-settings label small{font-weight:500}.premium-settings input,.premium-settings select,.premium-settings textarea{border-color:#b8d5f1;background:#fbfdff}.premium-settings input:focus,.premium-settings select:focus,.premium-settings textarea:focus{outline:2px solid #54a9e7;border-color:#238bd0}.premium-settings .user-creator{background:linear-gradient(145deg,#fff,#eef8ff);border-color:#86bfe7}.premium-settings .user-item{background:#f8fbff;border-color:#c7ddf3}@media(max-width:900px){.settings-hero{display:grid!important}.settings-health{min-width:0}.letterhead-fields{grid-template-columns:1fr}}

.login-shell{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#ffe3bc 0%,#f8fbff 38%,#87cbee 68%,#168ed3 100%)}
.login-shell::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(255,255,255,.48) 0 1px,transparent 1px 16.5%),linear-gradient(180deg,rgba(255,255,255,.45) 0 1px,transparent 1px 23%),linear-gradient(115deg,rgba(255,255,255,.78) 0 43%,rgba(255,255,255,.18) 43.2% 62%,transparent 62.2%),linear-gradient(155deg,#ffe6c5 0 26%,transparent 26.2%),linear-gradient(180deg,rgba(11,80,130,.08),rgba(11,80,130,.22));background-size:170px 100%,100% 115px,100% 100%,100% 100%,100% 100%;filter:saturate(1.08)}
.login-shell::after{content:"";position:absolute;left:-12vw;right:-12vw;bottom:-18vh;height:48vh;z-index:-1;transform:perspective(780px) rotateX(60deg);transform-origin:bottom;background:linear-gradient(115deg,rgba(255,255,255,.72),rgba(219,239,251,.82) 42%,rgba(245,130,32,.18) 43%,rgba(21,148,255,.28)),repeating-linear-gradient(90deg,rgba(7,43,96,.16) 0 2px,transparent 2px 120px),repeating-linear-gradient(0deg,rgba(7,43,96,.12) 0 2px,transparent 2px 78px);border-top:1px solid rgba(255,255,255,.8);box-shadow:0 -24px 90px rgba(8,56,105,.22)}
.login-office-art{position:absolute;left:max(24px,7vw);bottom:max(18px,5vh);width:min(48vw,760px);max-height:82vh;object-fit:contain;z-index:0;filter:drop-shadow(0 38px 45px rgba(8,45,82,.22));transform:perspective(900px) rotateY(4deg) rotateX(1deg)}
.login-card{z-index:1;backdrop-filter:blur(10px);box-shadow:0 35px 95px #0754c852,0 18px 35px #f5822024}
@media(min-width:1000px){.login-card{transform:translateX(185px)}}
@media(max-width:900px){.login-office-art{width:min(86vw,640px);left:50%;bottom:3vh;transform:translateX(-50%);opacity:.2}.login-card{transform:none}}
.purchase-table .select-cell{width:44px;text-align:center}.purchase-table input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:#0b7df0}
.universal-select-cell{width:44px!important;text-align:center!important}.universal-select-cell input{width:18px;height:18px;cursor:pointer;accent-color:#0b7df0}.universal-selection-bar{margin:0 0 16px}

/* Stronger form and column outlines for easier reading. */
dialog .form-grid label{font-weight:650;color:#113d73}
dialog input,dialog select,dialog textarea{border:2px solid #7ea9d6;background:#fff;box-shadow:inset 0 0 0 1px #eef5fc}
dialog input:hover,dialog select:hover,dialog textarea:hover{border-color:#477fb8}
dialog input:focus,dialog select:focus,dialog textarea:focus{border-color:#075fae;outline:2px solid #9dcef5;outline-offset:1px}
#posForm .panel{border:2px solid #e87921}
#posForm .panel .form-grid{column-gap:14px;row-gap:12px}

/* Dynamic sales growth overview */
#dashboard{display:grid;gap:18px}
.growth-dashboard{position:relative;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(360px,1.18fr);gap:18px;padding:20px;border:1px solid #b7d5f1;border-radius:18px;background:linear-gradient(135deg,#071f46 0%,#0a5e9d 52%,#f58220 100%);color:#fff;box-shadow:0 18px 45px #0a4f8b24;overflow:hidden}
.growth-dashboard::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.13) 0 1px,transparent 1px 42px),linear-gradient(180deg,rgba(255,255,255,.1) 0 1px,transparent 1px 38px);opacity:.32}
.growth-dashboard>*{position:relative}
.growth-hero{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:205px}
.growth-hero small{font-size:11px;font-weight:900;letter-spacing:.18em;color:#cfeaff}
.growth-hero h2{margin:6px 0 4px;font-size:42px;line-height:1;letter-spacing:0}
.growth-hero p{margin:0;color:#d9edff;font-weight:650}
.growth-signal{width:max-content;min-width:160px;padding:13px 16px;border:1px solid #ffffff45;border-radius:14px;background:#ffffff18;box-shadow:inset 0 1px 0 #ffffff38}
.growth-signal strong{display:block;font-size:25px;line-height:1}
.growth-signal span{display:block;margin-top:4px;color:#e6f4ff;font-size:11px;font-weight:750}
.growth-signal.positive strong{color:#8dffbf}.growth-signal.negative strong{color:#ffd2d2}
.growth-chart{display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:12px;min-height:205px;padding:15px 14px 10px;border:1px solid #ffffff38;border-radius:16px;background:#ffffff12;backdrop-filter:blur(6px)}
.growth-bar{display:grid;grid-template-rows:1fr auto;gap:8px;height:100%;min-width:0;text-align:center}
.growth-bar span{align-self:end;display:block;min-height:8px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#fff4c7,#ffb04f 52%,#2de0a0);box-shadow:0 0 0 1px #ffffff45,0 8px 18px #021a3a36}
.growth-bar small{color:#eaf7ff;font-size:11px;font-weight:800}
.growth-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.growth-metrics>div{min-height:72px;padding:12px 13px;border:1px solid #ffffff35;border-radius:13px;background:#ffffff15}
.growth-metrics small{display:block;color:#d9edff;font-weight:850}.growth-metrics strong{display:block;margin-top:4px;font-size:20px}.growth-metrics span{display:block;color:#eaf7ff;font-size:11px}
.premium-cards .card{position:relative;overflow:hidden;border-color:#b8d6f4;box-shadow:0 8px 22px #0a4f8b12}
.premium-cards .card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px}
.income-card::before{background:#0b8bd3}.expense-card::before{background:#d14343}.profit-card::before{background:#0c9463}.gst-card::before{background:#f58220}
.premium-cards .card small{font-weight:850;color:#244c78}.premium-cards .card strong{color:#061c42}
.recent-panel{margin-top:0;border-color:#b8d6f4;box-shadow:0 10px 25px #0a4f8b10}
@media(max-width:950px){.growth-dashboard{grid-template-columns:1fr}.growth-metrics{grid-template-columns:1fr 1fr}.growth-hero{min-height:0}.growth-hero h2{font-size:34px}}
@media(max-width:560px){.growth-metrics{grid-template-columns:1fr}.growth-chart{gap:7px;padding-inline:9px}.growth-bar small{font-size:9px}}

/* Full supplier outstanding report preview. */
#supplierOutstandingDialog{max-width:96vw}
#supplierOutstandingPreview{max-height:72vh;overflow:auto;margin:18px 0;padding:2px 8px 8px}
.supplier-report-head{display:flex;align-items:center;gap:16px;border-bottom:4px solid #ed7b22;padding:6px 4px 12px}
.supplier-report-head img{width:90px;height:62px;object-fit:contain}
.supplier-report-head h1,.supplier-report-head h2,.supplier-report-title h3{margin:2px 0}
.supplier-report-head p{margin:4px 0;color:var(--muted)}
.supplier-report-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.supplier-report-summary>div{border:1px solid #a9c7e8;border-radius:10px;padding:12px;background:#f6faff}
.supplier-report-summary small,.supplier-report-summary strong{display:block}.supplier-report-summary strong{font-size:21px;margin-top:4px}
.supplier-report-group{margin:18px 0;border:1px solid #bdd2e8;border-radius:10px;overflow:hidden}
.supplier-report-title{display:flex;justify-content:space-between;align-items:end;gap:12px;padding:10px 12px;background:#eaf3ff;border-left:5px solid #176cbd}
.supplier-report-group table{margin:0}.supplier-report-group tfoot{background:#fff3e8}.supplier-report-group tfoot td{font-weight:750}
.supplier-report-empty{padding:34px;text-align:center;border:1px solid #bdd2e8;border-radius:10px;background:#f8fbff}
@media(max-width:700px){.supplier-report-summary{grid-template-columns:1fr}.supplier-report-title{align-items:flex-start;display:grid}}

/* Compact Customers page and use the available width evenly. */
body:has(#customers:not([hidden])) main>header{height:68px;margin-bottom:14px}
#customers>.toolbar{margin-bottom:9px}
#customers>.toolbar h2{margin:0 0 2px;line-height:1.15}
#customers>.panel{margin-top:11px;padding:12px 14px;border-radius:10px}
#customers>.customer-search{gap:8px 12px}
#customers>.customer-search label{gap:3px}
#customers>.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0}
#customers>.cards .card{padding:12px 14px;border-radius:10px}
#customers>.cards .card strong{font-size:22px;line-height:1.1;margin:4px 0 0}
#customers>div.panel>table{margin-top:0}
#customers>div.panel>table th,#customers>div.panel>table td{padding-top:8px;padding-bottom:8px}
#customers>div.panel>table td.actions{white-space:nowrap}
@media(max-width:700px){#customers>.cards{grid-template-columns:1fr}#customers>div.panel>table td.actions{white-space:normal}}

/* Compact Settings heading and control-center banner. */
body:has(#settings:not([hidden])) main>header{height:52px!important;margin-bottom:8px!important;padding-top:4px!important;padding-bottom:4px!important}
body:has(#settings:not([hidden])) main>header small{font-size:10px!important;line-height:1!important}
body:has(#settings:not([hidden])) main>header h1{margin:3px 0 0!important;font-size:21px!important;line-height:1!important}
.premium-settings .settings-hero{min-height:0!important;margin-bottom:10px!important;padding:11px 18px!important;gap:14px!important;border-radius:12px!important}
.premium-settings .settings-hero small{font-size:9px!important;line-height:1!important}
.premium-settings .settings-hero h2{margin:4px 0 2px!important;font-size:20px!important;line-height:1.1!important}
.premium-settings .settings-hero p{font-size:11px!important;line-height:1.2!important}
.premium-settings .settings-health{min-width:125px!important;padding:7px 12px!important;border-radius:10px!important}
.premium-settings .settings-health strong{font-size:23px!important;line-height:1.05!important}
.premium-settings .settings-health span{font-size:10px!important}