*{box-sizing:border-box} :root{--navy:#092d78;--blue:#087de0;--text:#15243f;--muted:#63748f;--line:#dce7f5}body{margin:0;background:#f1f6ff;color:var(--text);font:14px Inter,Segoe UI,Arial,sans-serif}.app-shell{min-height:100vh;display:flex}.sidebar{width:230px;flex:0 0 230px;background:linear-gradient(180deg,#07317e 0%,#092b72 70%,#37108c 100%);color:#fff;display:flex;flex-direction:column;min-height:100vh;padding:15px 10px 16px}.side-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;padding:3px 7px 20px}.side-brand img{width:58px;height:58px;object-fit:contain}.side-brand b,.mobile-brand b{font-size:17px;letter-spacing:.3px;white-space:nowrap}.side-brand em,.mobile-brand em,.hero-banner em{font-style:normal;color:#ffcc24}.side-brand small{display:block;font-size:10px;margin-top:4px;color:#d5e2ff;letter-spacing:.2px}.side-nav{display:flex;flex-direction:column;gap:5px}.side-nav a{display:flex;align-items:center;gap:12px;color:#e7efff;text-decoration:none;padding:12px 12px;border-radius:9px;font-size:13px;font-weight:650;transition:.15s}.side-nav a i{font-style:normal;font-size:18px;width:18px;text-align:center}.side-nav a:hover,.side-nav a.active{background:linear-gradient(100deg,#087fe9,#0864cb);color:white;box-shadow:0 5px 14px #001d5d4d}.side-nav .logout-link{margin-top:3px;color:#ffd4d4}.sidebar-logo{margin-top:auto;padding:28px 7px 0;text-align:center;display:flex;align-items:center;flex-direction:column}.sidebar-logo img{width:72px;height:72px;object-fit:contain}.sidebar-logo b{font-size:13px;margin-top:4px}.sidebar-logo em{font-style:normal;color:#ffcf26}.sidebar-logo small{font-size:10px;margin-top:5px;color:#dce7ff}.app-main{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:92px;padding:12px 26px;display:flex;align-items:center;gap:24px;color:white;background:radial-gradient(ellipse at 85% 15%,#bb1ed9 0%,transparent 25%),linear-gradient(110deg,#07317b 0%,#0756b8 53%,#2535b5 76%,#bd16d7 100%);box-shadow:0 4px 14px #10356c22}.topbar-spacer{flex:1}.top-date{display:flex;gap:10px;align-items:center;font-weight:650;font-size:12px}.date-icon{font-size:23px}.top-date small,.user-chip small{display:block;font-size:11px;font-weight:400;color:#dce8ff;margin-top:3px}.top-notice{position:relative;font-size:24px;padding:0 14px;border-left:1px solid #ffffff55}.top-notice sup{position:absolute;top:-2px;right:6px;background:#ff365f;border-radius:50%;font-size:10px;padding:3px 5px}.user-chip{display:flex;align-items:center;gap:10px;border-left:1px solid #ffffff55;padding-left:18px}.user-chip b{font-size:13px}.user-avatar{width:38px;height:38px;border-radius:50%;background:#fff;color:#2d76d2;display:grid;place-items:center;font-size:20px}.mobile-brand{display:none}main{max-width:none;width:100%;margin:0 auto;padding:20px 22px 8px;flex:1;min-height:65vh}.welcome-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.welcome-row h1{font-size:23px;margin:0 0 5px;font-weight:800;color:#101e3b}.welcome-row p{margin:0;color:#506584;font-size:14px}.hero-banner{height:66px;min-width:330px;max-width:435px;flex:1;display:flex;align-items:center;gap:13px;padding:7px 18px;border-radius:11px;color:white;background:linear-gradient(100deg,#083b9b,#0570d2 55%,#102d91);box-shadow:0 4px 12px #2362bb25;overflow:hidden}.hero-banner img{width:53px;height:53px;object-fit:contain}.hero-banner b{font-size:17px;white-space:nowrap}.hero-banner small{display:block;font-size:9px;letter-spacing:1px;margin-top:4px;color:#e2eeff}.card,.panel{background:#fff;border:1px solid #e0e9f5;border-radius:13px;padding:18px;box-shadow:0 4px 14px #164a8710;margin:0 0 16px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.stat-card{min-height:78px;border-radius:12px;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid}.stat-blue{background:linear-gradient(110deg,#e6f3ff,#f7fbff);border-color:#9bd0ff}.stat-green{background:linear-gradient(110deg,#e5ffed,#f8fff9);border-color:#a5efbd}.stat-orange{background:linear-gradient(110deg,#fff0dc,#fffaf2);border-color:#ffd8a7}.stat-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:25px;font-weight:800;flex:0 0 auto}.stat-blue .stat-icon{background:#c5e5ff;color:#0876d5}.stat-green .stat-icon{background:#c7f8d5;color:#10a650}.stat-orange .stat-icon{background:#ffe0b5;color:#f18a0b}.stat-card label{font-size:12px;font-weight:700;color:#243552;display:block;margin:0 0 4px}.stat-card strong{font-size:21px;color:#142747}.stat-chart{margin-left:auto;font-size:24px;font-weight:800}.stat-blue .stat-chart{color:#2c98f3}.stat-green .stat-chart{color:#13bd64}.stat-orange .stat-chart{color:#f49b1d}.quick-actions{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1fr;gap:12px;margin:14px 0 16px}.quick-card{min-height:65px;border-radius:11px;padding:12px 13px;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;box-shadow:0 4px 11px #17477b20;transition:transform .15s,filter .15s}.quick-card:hover{transform:translateY(-2px);filter:brightness(1.05)}.quick-card>span{font-size:27px;line-height:1}.quick-card b{font-size:12px;display:block;white-space:nowrap}.quick-card small{display:block;font-size:10px;margin-top:4px;opacity:.9;white-space:nowrap}.quick-blue{background:linear-gradient(120deg,#08b9f2,#0860d5)}.quick-green{background:linear-gradient(120deg,#11c76b,#07983c)}.quick-purple{background:linear-gradient(120deg,#9e1bff,#6412d2)}.quick-red{background:linear-gradient(120deg,#ff4b62,#e71f46)}.quick-cyan{background:linear-gradient(120deg,#10c5df,#008db8)}.dashboard-panels{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.95fr);gap:14px}.panel{padding:15px 15px 14px;margin-bottom:12px;min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.panel-heading h2{font-size:16px;margin:0;color:#16223a;white-space:nowrap}.panel-heading h2 span{color:#137ee4;margin-right:7px}.panel-heading h2 small{font-size:11px;color:#415675;font-weight:600}.view-link{background:#e5f2ff;color:#0870d5;padding:7px 11px;border-radius:7px;text-decoration:none;font-weight:700;font-size:11px;white-space:nowrap}.branch-table-head,.branch-row{display:grid;grid-template-columns:minmax(130px,1.5fr) .8fr 1fr;gap:8px;align-items:center;padding:9px 8px;font-size:11px}.branch-table-head{font-weight:750;color:#293a58;background:#f3f7fc;border-radius:6px}.branch-row{margin-top:4px;border-radius:7px}.branch-row>span{display:flex;align-items:center;gap:7px;min-width:0}.branch-row>span i{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:9px;font-weight:800;flex:0 0 auto;background:#167fe0}.branch-row>b,.branch-row>strong{text-align:center}.branch-row>strong{color:#0865ca;white-space:nowrap}.branch-row-blue{background:#eaf5ff}.branch-row-green{background:#eaffee}.branch-row-green>span i{background:#12a95a}.branch-row-orange{background:#fff0dc}.branch-row-orange>span i{background:#f29318}.branch-row-purple{background:#f5eaff}.branch-row-purple>span i{background:#8d21e7}.branch-total{background:#dcecff;font-weight:800}.branch-total>strong{font-size:12px}.empty-state{min-height:185px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#223452;padding:12px}.empty-icon{position:relative;font-size:42px;color:#b7cce5;margin-bottom:4px}.empty-icon b{position:absolute;right:-12px;bottom:-1px;background:#1680e6;color:white;font-size:20px;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.empty-state strong{font-size:14px}.empty-state p{margin:5px 0 10px;color:#647894;font-size:12px}.button,button{display:inline-block;background:linear-gradient(100deg,#087fe4,#095ec3);color:white;border:0;border-radius:8px;padding:10px 14px;text-decoration:none;font-weight:750;cursor:pointer;margin:3px;font-size:12px}h1{font-size:25px}h2{font-size:19px}label{display:block;font-size:13px;font-weight:700;margin:13px 0}input,select,textarea{display:block;width:100%;padding:11px;margin-top:6px;border:1px solid #cbd9ec;border-radius:7px;font:inherit;background:white;color:#192943}table{border-collapse:collapse;width:100%;font-size:12px}td,th{text-align:left;padding:9px;border-bottom:1px solid #e5ebf4;vertical-align:top}th{background:#f1f5fb;color:#34435e;font-size:11px}.scroll{overflow:auto}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.narrow{max-width:560px;margin:40px auto}.payment-card{max-width:760px;margin:24px auto}.choice-row{display:flex;gap:14px;flex-wrap:wrap}.choice-row input{width:auto;display:inline}.payment-card [hidden]{display:none!important}.error{color:#a12424}.success{background:#e5f8eb;padding:10px}.hint{color:#66758b;font-size:12px}.toolbar{display:flex;justify-content:flex-end;gap:10px}.receipt{max-width:760px;margin:15px auto;background:white;border:1px solid #ddd;padding:32px;color:#111}.receipt h1,.receipt h2,.center{text-align:center}.sign{display:flex;justify-content:space-between;margin-top:45px;gap:20px}.filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.filters label{flex:1;min-width:150px}.inline-form{display:inline-block;margin:0}.inline-form button{padding:5px 8px;font-size:11px;margin:2px}.checkbox-label{display:flex;align-items:center;gap:8px}.checkbox-label input{width:auto;margin:0}.app-footer{display:flex;gap:14px;align-items:center;padding:10px 22px 14px;color:#63758e;font-size:10px;flex-wrap:wrap}.footer-motto{margin-left:auto}.auth-header{padding:16px 24px;background:linear-gradient(100deg,#07317b,#175dc0)}.auth-main{min-height:75vh}.auth-header .side-brand{padding:0}.auth-header .side-brand img{width:52px;height:52px}footer:not(.app-footer){text-align:center;color:#718096;font-size:12px;padding:24px}@media(max-width:1150px){.sidebar{width:205px;flex-basis:205px}.quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-panels{grid-template-columns:1fr}.hero-banner{min-width:270px}}@media(max-width:760px){.app-shell{display:block}.sidebar{width:100%;min-height:0;padding:8px;position:relative}.side-brand{padding-bottom:8px}.side-brand img{width:42px;height:42px}.side-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.side-nav a{font-size:11px;padding:9px}.sidebar-logo{display:none}.topbar{height:auto;min-height:64px;padding:10px 13px;gap:10px;flex-wrap:wrap}.top-date{display:none}.top-notice{display:none}.user-chip{padding-left:10px}.user-chip b{font-size:11px}.user-chip small{font-size:9px}main{padding:15px 12px}.welcome-row{align-items:flex-start;flex-direction:column}.welcome-row h1{font-size:21px}.hero-banner{width:100%;max-width:none;min-width:0}.stats{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quick-card{padding:10px;gap:8px}.quick-card b{white-space:normal}.quick-card small{white-space:normal}.dashboard-panels{grid-template-columns:1fr}.branch-table-head,.branch-row{grid-template-columns:minmax(110px,1.2fr) .6fr 1fr;font-size:10px;padding:8px 5px}.grid{grid-template-columns:1fr}.app-footer{padding:10px 14px}.footer-motto{margin-left:0}.receipt{padding:16px}}@media print{.sidebar,.topbar,.app-footer,footer,.toolbar,button{display:none!important}.app-shell,.app-main{display:block}.app-main main{margin:0;padding:0}.receipt{border:0;margin:0;max-width:none;padding:6mm}@page{margin:7mm}}

/* Reference layout refinement: full-width top header, sidebar starts underneath */
.app-shell{display:flex;flex-direction:column;min-height:100vh}
.topbar{width:100%;height:76px;min-height:76px;flex:0 0 76px;padding:8px 24px;gap:22px}
.top-brand{display:flex;align-items:center;gap:14px;min-width:330px;text-decoration:none;color:#fff}
.top-brand img{width:66px;height:60px;object-fit:contain;flex:0 0 auto}
.top-brand b{font-size:24px;letter-spacing:.2px;white-space:nowrap}
.top-brand em{font-style:normal;color:#ffcc24}
.top-brand small{display:block;font-size:13px;color:#e2edff;margin-top:3px;letter-spacing:.1px}
.app-body{display:flex;flex:1;min-height:calc(100vh - 76px);min-width:0}
.sidebar{width:183px;flex:0 0 183px;min-height:calc(100vh - 76px);padding:15px 8px 14px}
.side-nav{gap:5px}
.side-nav a{padding:12px 10px;gap:10px;font-size:12px;border-radius:8px}
.side-nav a i{font-size:17px;width:17px}
.sidebar-logo{padding-top:22px}
.sidebar-logo img{width:62px;height:62px}
.sidebar-logo b{font-size:12px;white-space:nowrap}
.app-main{min-width:0;flex:1;display:flex;flex-direction:column}
.app-main main{padding:17px 18px 8px;min-height:0;flex:1}
.app-footer{padding:10px 18px 12px;font-size:9px}
.welcome-row{margin-bottom:13px}
.welcome-row h1{font-size:22px}
.hero-banner{height:66px;max-width:435px}
.stats{gap:12px}
.stat-card{min-height:76px;padding:11px 13px}
.quick-actions{margin:12px 0 14px;gap:11px}
.quick-card{min-height:62px;padding:10px 12px}
.dashboard-panels{grid-template-columns:minmax(0,1.18fr) minmax(330px,.95fr);gap:12px}
.panel{padding:14px 14px 13px}
@media(max-width:1150px){.sidebar{width:183px;flex-basis:183px}.top-brand{min-width:260px}.top-brand b{font-size:20px}.quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-panels{grid-template-columns:1fr}}
@media(max-width:760px){.app-shell{display:flex}.topbar{height:auto;min-height:64px;flex:0 0 auto;padding:9px 12px;gap:10px;flex-wrap:wrap}.top-brand{min-width:0;flex:1;gap:8px}.top-brand img{width:42px;height:42px}.top-brand b{font-size:15px}.top-brand small{font-size:9px}.app-body{display:flex;flex-direction:column;min-height:calc(100vh - 64px)}.sidebar{width:100%;flex:0 0 auto;min-height:0;padding:7px;position:relative}.side-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.side-nav a{font-size:11px;padding:9px}.sidebar-logo{display:none}.app-main main{padding:15px 12px}.top-date{display:none}.top-notice{display:none}.user-chip{padding-left:8px}.user-chip b{font-size:10px}.user-chip small{font-size:9px}.stats{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quick-card{padding:10px;gap:8px}.quick-card b,.quick-card small{white-space:normal}.dashboard-panels{grid-template-columns:1fr}.branch-table-head,.branch-row{grid-template-columns:minmax(110px,1.2fr) .6fr 1fr;font-size:10px;padding:8px 5px}.app-footer{padding:10px 14px}.footer-motto{margin-left:0}.grid{grid-template-columns:1fr}}


/* Subtle company-logo watermark across the main dashboard content */
.app-main main{position:relative;isolation:isolate;overflow:hidden}
.app-main main::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:53%;width:min(72%,760px);height:620px;transform:translate(-50%,-35%);background-image:url("agilavetri-logo.png");background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.075;filter:saturate(.9)}
.app-main main>*{position:relative}
@media(max-width:760px){.app-main main::before{width:95%;height:430px;top:55%;opacity:.055}}
@media print{.app-main main::before{display:none}}


/* Premium colorful branded payment receipt */
.receipt-premium{position:relative;isolation:isolate;overflow:hidden;max-width:760px;margin:15px auto;background:#fff;border:1px solid #d9e5f6;border-radius:12px;padding:0 30px 24px;box-shadow:0 10px 35px #173f7b12}
.receipt-premium:before{content:"";position:absolute;z-index:-1;pointer-events:none;right:40px;top:230px;width:330px;height:330px;background:url("agilavetri-logo.png") center/contain no-repeat;opacity:.055}
.receipt-brandbar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0 -30px;padding:22px 30px;color:#fff;background:linear-gradient(112deg,#092d78 0%,#0868c9 58%,#7c26ce 100%);text-align:center}
.receipt-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;width:100%;text-align:center}.receipt-brand img{width:78px;height:78px;object-fit:contain;background:#fff;border-radius:13px;padding:5px;flex:0 0 auto;margin:0 auto}.receipt-brand>div{text-align:center}.receipt-company{font-size:24px;font-weight:900;letter-spacing:.3px;white-space:normal;text-align:center}.receipt-company{font-size:24px;font-weight:900;letter-spacing:.3px;white-space:nowrap}.receipt-company span{color:#ffd43b}.receipt-tagline{font-size:9px;letter-spacing:1.8px;margin-top:5px;font-weight:750;color:#d9eaff}.receipt-system{font-size:11px;color:#e5efff;margin-top:7px}.receipt-type{text-align:center;flex:0 0 auto;width:100%}.receipt-type span{display:inline-block;font-size:9px;letter-spacing:1.5px;font-weight:800;background:#ffffff22;border:1px solid #ffffff66;padding:5px 8px;border-radius:20px;margin-bottom:8px}.receipt-type strong{display:block;font-size:18px;line-height:1.2;letter-spacing:.7px}.receipt-colorline{height:5px;margin:0 -30px;background:linear-gradient(90deg,#11c76b 0 25%,#ffbf25 25% 50%,#08b8ec 50% 75%,#f02e68 75%)}
.receipt-meta{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:12px;padding:18px 0 17px;border-bottom:1px solid #e1e9f4}.receipt-meta>div,.receipt-detail-grid>div,.receipt-payment-grid>div{min-width:0}.receipt-meta small,.receipt-detail-grid small,.receipt-payment-grid small,.receipt-amount small{display:block;font-size:9px;letter-spacing:.8px;color:#71829c;font-weight:800;margin-bottom:6px}.receipt-meta strong{display:block;font-size:12px;overflow-wrap:anywhere;color:#172d50}.receipt-section-title{display:flex;align-items:center;gap:9px;margin:21px 0 12px;font-size:12px;font-weight:900;letter-spacing:.7px;color:#17345d}.receipt-section-title span{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:8px;color:#fff;background:linear-gradient(135deg,#087fe4,#6424ce);font-size:10px}.receipt-detail-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr 1.3fr;gap:10px;padding:15px;background:linear-gradient(110deg,#f1f8ff,#fbfdff);border:1px solid #e0edfb;border-radius:9px}.receipt-detail-grid strong,.receipt-payment-grid strong{display:block;font-size:12px;color:#1a2d4b;overflow-wrap:anywhere}.receipt-payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 15px;border:1px solid #e0e9f5;border-radius:9px}.receipt-amount{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px;padding:17px 20px;border-radius:10px;color:#fff;background:linear-gradient(105deg,#087fe4,#174db5 58%,#6928c9);box-shadow:0 5px 14px #1458b522}.receipt-amount small{color:#d7eaff;margin-bottom:5px}.receipt-amount span{display:block;font-size:10px;color:#e5efff}.receipt-amount>strong{font-size:24px;white-space:nowrap}.receipt-notes{margin-top:14px;padding:11px 13px;background:#fff8e9;border-left:4px solid #ffbd27;border-radius:4px;font-size:12px;color:#35445b;overflow-wrap:anywhere}.receipt-signatures{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:37px}.receipt-signatures>div{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#344760}.receipt-signatures>div:last-child{text-align:center;align-items:center}.receipt-signatures strong{font-size:11px;color:#1a3154}.signature-line{display:block;width:175px;max-width:100%;border-top:1px solid #8da0b8;margin-top:12px;margin-bottom:2px}.receipt-thanks{text-align:center;color:#0b67bf;font-weight:850;font-size:13px;margin-top:24px}.receipt-legal{text-align:center;color:#7b8aa0;font-size:9px;line-height:1.5;margin-top:8px}
@media(max-width:600px){.receipt-premium{padding:0 16px 20px;margin:10px auto}.receipt-brandbar{margin:0 -16px;padding:16px;gap:8px}.receipt-brand{gap:9px;width:100%}.receipt-brand img{width:54px;height:54px}.receipt-company{font-size:16px}.receipt-tagline{font-size:7px;letter-spacing:1px}.receipt-system{font-size:9px}.receipt-type strong{font-size:13px}.receipt-type span{font-size:7px}.receipt-meta{grid-template-columns:1fr;gap:10px}.receipt-detail-grid{grid-template-columns:1fr 1fr}.receipt-amount{padding:14px}.receipt-amount>strong{font-size:19px}.receipt-signatures{gap:12px}}
@media print{.receipt-premium{max-width:none;margin:0;border:1px solid #d8e2ef;border-radius:0;box-shadow:none;padding:0 8mm 7mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}.receipt-premium:before{opacity:.045}.receipt-brandbar{margin:0 -8mm;padding:7mm 8mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}.receipt-colorline{margin:0 -8mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}.receipt-amount{print-color-adjust:exact;-webkit-print-color-adjust:exact}.receipt-detail-grid,.receipt-notes{print-color-adjust:exact;-webkit-print-color-adjust:exact}.receipt-brand img{background:#fff}.receipt-meta{padding-top:5mm}}


/* Monochrome receipt printing: screen remains colorful, printed bill is black and white. */
@media print {
  @page { size: A4; margin: 8mm; }
  html, body, .app-shell, .app-main, main { background: #fff !important; color: #000 !important; }
  .receipt-premium { color: #000 !important; background: #fff !important; border: 1px solid #000 !important; box-shadow: none !important; border-radius: 0 !important; }
  .receipt-brandbar, .receipt-colorline, .receipt-section-title span, .receipt-amount, .receipt-detail-grid, .receipt-notes, .receipt-type span { background: #fff !important; background-image: none !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: none !important; }
  .receipt-brandbar { border-bottom: 2px solid #000 !important; }
  .receipt-company, .receipt-company span, .receipt-tagline, .receipt-system, .receipt-type strong, .receipt-meta strong, .receipt-section-title, .receipt-detail-grid strong, .receipt-payment-grid strong, .receipt-amount small, .receipt-amount span, .receipt-amount>strong, .receipt-notes, .receipt-signatures, .receipt-signatures strong, .receipt-thanks, .receipt-legal { color: #000 !important; }
  .receipt-brand img { filter: grayscale(1) contrast(1.15); background: #fff !important; border: 1px solid #000 !important; }
  .receipt-premium:before { opacity: .07 !important; filter: grayscale(1) contrast(.7) !important; }
  .receipt-meta, .receipt-detail-grid, .receipt-payment-grid { border-color: #777 !important; }
  .receipt-notes { border-left: 2px solid #000 !important; }
  .signature-line { border-top: 1px solid #000 !important; }
  .receipt-colorline { height: 0 !important; border: 0 !important; border-top: 2px solid #000 !important; }
}


/* Professional, more readable typography refresh */
body{font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
input,select,textarea{font-size:15px;line-height:1.45;padding:11px 13px;min-height:42px}
label,.form-label,.field label{font-size:14px;font-weight:700;line-height:1.45}
.side-nav a{font-size:14px;line-height:1.4;padding:13px 12px}
.side-nav a i{font-size:19px}
.side-brand b,.mobile-brand b{font-size:18px}
.side-brand small,.sidebar-logo small{font-size:11px;line-height:1.4}
.sidebar-logo b{font-size:14px}
.top-date{font-size:13px}.top-date small,.user-chip small{font-size:12px}.user-chip b{font-size:14px}
.welcome-row h1{font-size:25px;line-height:1.3}.welcome-row p{font-size:15px}
.hero-banner b{font-size:18px}.hero-banner small{font-size:10px}
.stat-card label{font-size:13.5px}.stat-card strong{font-size:23px}
.quick-card b{font-size:13.5px}.quick-card small{font-size:11.5px}
.panel-heading h2{font-size:17px}
table{font-size:13.5px;line-height:1.5}
th,td{padding:10px 9px}
.btn,button,.button,a.btn,input[type=submit]{font-size:14px;font-weight:700;line-height:1.35}
.card h1,.panel h1{font-size:25px;line-height:1.3}
.card h2,.panel h2{font-size:20px;line-height:1.35}
.card h3,.panel h3{font-size:17px;line-height:1.4}
small,.small,.help-text,.muted{font-size:12.5px;line-height:1.45}
@media(max-width:900px){body{font-size:15px}.side-nav a{font-size:13.5px}.dashboard-panels{grid-template-columns:1fr}}
@media print{body{font-size:12pt;line-height:1.4}}

/* Live clock beside the date in the top header */
.top-clock{display:flex;flex-direction:column;justify-content:center;min-width:112px;padding-left:16px;border-left:1px solid #ffffff55;color:#fff;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.25}.top-clock .clock-icon{display:none}.top-clock small{display:block;margin-top:4px;color:#dce8ff;font-size:10px;font-weight:500}.top-clock #live-clock{letter-spacing:.35px}@media(max-width:760px){.top-clock{min-width:0;padding-left:10px;font-size:12px}.top-clock small{font-size:9px}}
/* Old bill search / reprint page */
.old-bill-filters{align-items:flex-end;gap:12px}
.old-bill-filters label{min-width:165px;margin:0;flex:1}
.old-bill-filters button,.old-bill-filters .button{min-height:42px;white-space:nowrap}
.old-bill-filters input[type=date],.old-bill-filters input[type=search]{min-width:0}
@media(max-width:760px){.old-bill-filters{display:grid;grid-template-columns:1fr}.old-bill-filters label{min-width:0}.old-bill-filters button,.old-bill-filters .button{text-align:center}}

/* Receipt centered relative to the full browser viewport (compensate for left sidebar). */
@media (min-width: 1101px) { .receipt-premium { position: relative; left: -115px; margin-left: auto; margin-right: auto; } }
@media (max-width: 1100px) { .receipt-premium { left: 0; } }
@media print { .receipt-premium { left: 0 !important; margin-left: auto !important; margin-right: auto !important; } }


/* Agilavetri Groups branded, responsive login experience */
.ag-login-page{margin:0;min-height:100vh;background:#06377d;color:#10264c;font-family:Inter,"Segoe UI",Arial,sans-serif;overflow-x:hidden}
.ag-login-page *{box-sizing:border-box}.login-scene{min-height:100vh;position:relative;isolation:isolate;overflow:hidden;padding:0 5.2% 20px;background:#06377d url("login-building-bg.png") center center/cover no-repeat}
.login-scene:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(105deg,rgba(3,35,86,.58) 0%,rgba(0,69,150,.40) 42%,rgba(0,35,91,.72) 100%)}
.login-scene:after{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;bottom:-19%;height:43%;background:linear-gradient(170deg,transparent 0 12%,rgba(0,157,255,.32) 12.2% 14%,rgba(255,183,47,.88) 14.2% 15%,rgba(7,86,181,.88) 15.3% 45%,rgba(5,38,94,.92) 45.3% 100%);border-radius:48% 52% 0 0/18% 25% 0 0;transform:rotate(-2deg)}
.login-glow{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(3px)}.login-glow-one{width:540px;height:540px;left:-170px;top:7%;background:radial-gradient(circle,rgba(20,173,255,.38),transparent 68%)}.login-glow-two{width:550px;height:550px;right:-180px;top:18%;background:radial-gradient(circle,rgba(255,171,45,.28),transparent 68%)}
.login-topbar{height:98px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.2);position:relative;z-index:2}.login-brand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none}.login-brand img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 5px 12px #001f4b55)}.login-brand b{display:block;font-size:21px;font-weight:900;letter-spacing:.2px}.login-brand em{font-style:normal;color:#ffb72e}.login-brand small{display:block;margin-top:5px;font-size:10px;letter-spacing:1.6px;color:#d4e7ff;font-weight:700}.login-top-tag{color:#e8f5ff;font-size:11px;font-weight:800;letter-spacing:1.3px;border:1px solid #ffffff44;border-radius:30px;padding:10px 14px;background:#ffffff10}.login-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4df0a4;box-shadow:0 0 0 4px #4df0a422;margin-right:8px}
.login-layout{max-width:1500px;margin:22px auto 14px;display:grid;grid-template-columns:minmax(250px,1fr) minmax(360px,440px) minmax(245px,.9fr);gap:clamp(24px,3.2vw,54px);align-items:center;position:relative;z-index:1}.login-intro{position:relative;color:#fff;padding:20px 0 18px;min-height:460px;display:flex;flex-direction:column;justify-content:center}.login-eyebrow{font-size:11px;letter-spacing:2px;font-weight:900;color:#b9e3ff;margin-bottom:24px}.login-eyebrow span{display:inline-block;width:27px;height:3px;background:#ffb52c;vertical-align:middle;margin-right:9px}.login-intro h1{font-size:clamp(32px,3vw,48px);line-height:1.13;letter-spacing:-1.5px;margin:0 0 22px;font-weight:900;text-shadow:0 4px 25px #00204c35}.login-intro h1 span{color:#ffbd3f}.login-intro>p{max-width:390px;font-size:16px;line-height:1.8;color:#d9ebff;margin:0}.login-stat-row{display:flex;gap:23px;margin-top:38px;flex-wrap:wrap}.login-stat{display:flex;flex-direction:column;gap:5px;border-left:2px solid #ffb52c;padding-left:11px}.login-stat strong{font-size:21px;color:#fff}.login-stat span{font-size:11px;color:#d2e6ff}.login-bottom-note{display:flex;align-items:center;gap:12px;margin-top:45px}.login-shield{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:#05c78b;color:#fff;font-size:23px;font-weight:900;box-shadow:0 8px 22px #00224b44}.login-bottom-note b,.login-bottom-note small{display:block}.login-bottom-note b{font-size:13px}.login-bottom-note small{font-size:11px;color:#c8e0ff;margin-top:4px}.login-orbit{position:absolute;pointer-events:none;border:1px solid #ffffff15;border-radius:50%;width:340px;height:340px;right:-25px;top:13%;transform:rotate(25deg)}.orbit-two{width:270px;height:270px;right:10px;top:21%;border-color:#ffcc5733}
.login-form-wrap{width:100%;max-width:440px;margin:auto}.login-card{position:relative;padding:31px 34px 25px;border-radius:25px;background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(242,248,255,.97));box-shadow:0 30px 75px #001e5266,0 0 0 1px #ffffffa8;overflow:hidden}.login-card:before{content:"";height:5px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,#05c98a 0 25%,#ffb52c 25% 50%,#0bb4ed 50% 75%,#8737ef 75%)}.login-card:after{content:"";position:absolute;right:-95px;bottom:-130px;width:240px;height:240px;border:25px solid #dbeaff;opacity:.23;transform:rotate(45deg);pointer-events:none}.login-card-brand{display:flex;justify-content:center;margin:0 auto 10px}.login-card-brand img{width:80px;height:70px;object-fit:contain}.login-card-heading{text-align:center;margin-bottom:24px}.login-welcome{font-size:10px;font-weight:900;letter-spacing:2.2px;color:#0878db}.login-card-heading h2{margin:8px 0 7px;font-size:25px;line-height:1.25;color:#0a2c61;letter-spacing:-.5px}.login-card-heading p{margin:0;font-size:12px;line-height:1.6;color:#6b7d99}.login-error{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:11px 12px;margin-bottom:15px;border:1px solid #ffc9c9;background:#fff1f1;color:#b42323;border-radius:10px;font-size:13px}.login-error span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:#d93030;color:#fff;font-weight:900}.login-form{position:relative;z-index:1}.login-form>label{display:block;margin:14px 0 7px;color:#1c355d;font-size:12px;font-weight:800}.login-input-wrap{position:relative;display:flex;align-items:center}.login-input-wrap input{width:100%;height:53px;border:1px solid #c9ddf9;border-radius:12px;background:#fff;padding:0 47px 0 45px;font-size:14px;color:#10264c;outline:none;box-shadow:0 3px 8px #0c4c9510;transition:border-color .18s,box-shadow .18s}.login-input-wrap input::placeholder{color:#9aa9be}.login-input-wrap input:focus{border-color:#1684ee;box-shadow:0 0 0 4px #1684ee19}.login-input-icon{position:absolute;left:15px;width:19px;height:19px;color:#4a6b9a;z-index:1}.login-input-icon svg,.login-eye svg,.login-submit svg,.login-feature svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.login-eye{position:absolute;right:8px;width:37px;height:37px;border:0;background:transparent;color:#7184a1;display:grid;place-items:center;padding:10px;cursor:pointer;border-radius:9px}.login-eye:hover{background:#edf5ff;color:#086fd0}.login-submit{margin-top:24px;width:100%;height:53px;border:0;border-radius:12px;background:linear-gradient(105deg,#079cf3,#0754df 80%);box-shadow:0 11px 22px #0964dd38;color:#fff;display:flex;align-items:center;justify-content:center;gap:13px;font-size:15px;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .15s}.login-submit svg{width:20px;height:20px}.login-submit:hover{transform:translateY(-2px);box-shadow:0 15px 25px #0964dd4a}.login-security{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:21px;padding-top:17px;border-top:1px solid #e2ebf7}.login-lock{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:#e0f8ef;color:#078b61;font-weight:900}.login-security b,.login-security small{display:block}.login-security b{font-size:11px;color:#21416e}.login-security small{font-size:10px;color:#8190a7;margin-top:3px}.login-card-footer{text-align:center;color:#8391a8;font-size:10px;margin-top:19px}.login-form-caption{text-align:center;color:#d7eaff;font-size:10px;letter-spacing:1.6px;font-weight:800;margin-top:18px}.login-form-caption span{color:#ffb52c;padding:0 5px}
.login-features{align-self:center;border:1px solid #ffffff35;border-radius:23px;padding:24px 22px;background:linear-gradient(155deg,#ffffff1c,#ffffff08);box-shadow:inset 0 1px #ffffff15;backdrop-filter:blur(9px);color:#fff}.login-features-heading>span{font-size:10px;letter-spacing:2px;font-weight:900;color:#8dd9ff}.login-features-heading h2{font-size:27px;line-height:1.12;margin:9px 0 21px;letter-spacing:-.5px}.login-feature{display:flex;align-items:center;gap:12px;margin:14px 0;padding:3px 0}.feature-icon{flex:0 0 46px;width:46px;height:46px;border-radius:14px;padding:12px;display:grid;place-items:center;box-shadow:0 7px 16px #001c5033}.feature-blue{background:linear-gradient(135deg,#168ff4,#3156ed)}.feature-green{background:linear-gradient(135deg,#05c98a,#00a96e)}.feature-orange{background:linear-gradient(135deg,#ffbe38,#ff8a1c)}.feature-purple{background:linear-gradient(135deg,#9c4dff,#6832e9)}.feature-pink{background:linear-gradient(135deg,#ff4c9b,#dc2385)}.feature-cyan{background:linear-gradient(135deg,#11d3d2,#008fcb)}.login-feature b,.login-feature small{display:block}.login-feature b{font-size:12px;font-weight:800}.login-feature small{font-size:10px;color:#d5e7ff;margin-top:5px;line-height:1.4}
.login-benefits{position:relative;z-index:1;max-width:1250px;margin:12px auto 12px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ffffff35;border-radius:19px;background:#ffffff13;backdrop-filter:blur(9px);padding:17px 12px}.login-benefits>div{display:flex;align-items:center;justify-content:center;gap:11px;padding:4px 12px;border-right:1px solid #ffffff30}.login-benefits>div:last-child{border-right:0}.benefit-mark{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;color:white;font-size:24px;font-weight:900}.benefit-shield{background:#06bf83}.benefit-speed{background:#ff9f1a}.benefit-easy{background:#158af2}.benefit-complete{background:#8848ee}.login-benefits b,.login-benefits small{display:block;color:#fff}.login-benefits b{font-size:11px;font-weight:900}.login-benefits small{font-size:10px;color:#d1e4ff;margin-top:5px}.login-footer{position:relative;z-index:1;text-align:center;color:#c7dfff;font-size:10px;padding:2px 0 0}.login-footer span{color:#ffb52c;padding:0 5px}
@media(max-width:1150px){.login-scene{padding-left:3%;padding-right:3%}.login-layout{grid-template-columns:minmax(200px,.8fr) minmax(350px,430px);gap:30px}.login-features{display:none}.login-intro h1{font-size:40px}.login-orbit{right:-40px}.login-benefits{max-width:900px}}
@media(max-width:720px){.login-scene{padding:0 18px 20px}.login-topbar{height:78px}.login-brand img{width:43px;height:43px}.login-brand b{font-size:16px}.login-brand small{font-size:8px;letter-spacing:1px}.login-top-tag{font-size:8px;padding:8px}.login-layout{display:flex;flex-direction:column;gap:20px;margin:22px auto 15px}.login-intro{min-height:0;padding:10px 0 0;width:100%;text-align:center}.login-eyebrow{margin-bottom:13px;font-size:9px}.login-intro h1{font-size:30px;line-height:1.12;margin-bottom:12px;letter-spacing:-.7px}.login-intro>p{font-size:13px;line-height:1.55;max-width:450px;margin:0 auto}.login-stat-row{justify-content:center;gap:18px;margin-top:19px}.login-stat strong{font-size:16px}.login-stat span{font-size:9px}.login-bottom-note,.login-orbit{display:none}.login-form-wrap{max-width:430px}.login-card{padding:24px 22px 21px;border-radius:20px}.login-card-brand img{width:61px;height:55px}.login-card-heading{margin-bottom:16px}.login-card-heading h2{font-size:22px}.login-input-wrap input{height:49px}.login-submit{height:50px;margin-top:20px}.login-benefits{grid-template-columns:repeat(2,1fr);padding:8px;margin-top:14px}.login-benefits>div{justify-content:flex-start;border-right:0;padding:10px 6px}.login-benefits>div:nth-child(odd){border-right:1px solid #ffffff30}.benefit-mark{width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:19px}.login-benefits b{font-size:10px}.login-benefits small{font-size:9px}.login-footer{font-size:9px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.login-submit,.login-input-wrap input{transition:none}}


/* Exact sample-inspired login layout: scenic building at left, centered login card, feature panel at right */
.ag-login-page{background:#07377d}
.login-scene{min-height:100vh;padding:0 3.2% 14px;background-position:center center;background-size:cover}
.login-scene:before{background:linear-gradient(90deg,rgba(3,37,91,.08) 0%,rgba(3,49,111,.22) 35%,rgba(4,39,96,.48) 68%,rgba(3,31,80,.64) 100%)}
.login-scene:after{bottom:-20%;height:34%;background:linear-gradient(170deg,transparent 0 12%,rgba(0,157,255,.35) 12.2% 14%,rgba(255,183,47,.92) 14.2% 15%,rgba(7,86,181,.94) 15.3% 45%,rgba(5,38,94,.98) 45.3% 100%)}
.login-topbar{display:none}
.sample-building-brand{position:absolute;z-index:1;left:4.5%;top:29%;width:250px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;text-shadow:0 3px 12px #001d4e99;pointer-events:none}
.sample-building-brand img{width:112px;height:100px;object-fit:contain;filter:drop-shadow(0 4px 8px #001c4a88);margin-bottom:8px}
.sample-building-brand strong{font-size:23px;font-weight:900;letter-spacing:-.5px;line-height:1.15}
.sample-building-brand em{font-style:normal;color:#ffbd32}
.sample-building-brand small{font-size:10px;font-weight:800;letter-spacing:2px;margin-top:8px;color:#fff}
.login-layout{max-width:1480px;min-height:calc(100vh - 145px);margin:0 auto 0;grid-template-columns:minmax(190px,1fr) minmax(360px,440px) minmax(270px,360px);gap:clamp(22px,3vw,48px);align-items:center;padding-top:12px}
.login-intro{display:none}
.login-form-wrap{grid-column:2;max-width:440px}
.login-card{padding:26px 31px 22px;border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(240,247,255,.97));box-shadow:0 22px 55px #001b4d66}
.login-card-brand img{width:72px;height:64px}
.login-card-heading h2{font-size:24px}
.login-card-heading{margin-bottom:19px}
.login-input-wrap input{height:49px}
.login-submit{height:51px;margin-top:19px}
.login-features{grid-column:3;padding:22px 20px;border-radius:22px;background:linear-gradient(150deg,rgba(10,76,147,.55),rgba(8,39,94,.42));backdrop-filter:blur(8px)}
.login-features-heading h2{font-size:25px;margin-bottom:16px}
.login-feature{margin:11px 0}
.feature-icon{width:44px;height:44px;flex-basis:44px}
.login-benefits{max-width:1250px;margin:0 auto 8px;padding:14px 12px;background:rgba(15,82,159,.52);border-radius:18px}
.login-footer{padding-top:0;font-size:10px}
@media(max-width:1100px){.sample-building-brand{left:3%;top:13%;width:180px}.sample-building-brand img{width:70px;height:65px}.sample-building-brand strong{font-size:17px}.login-layout{grid-template-columns:minmax(160px,.65fr) minmax(350px,430px);gap:24px}.login-form-wrap{grid-column:2}.login-features{display:none}.login-benefits{max-width:900px}}
@media(max-width:720px){.login-scene{padding:0 16px 18px}.sample-building-brand{position:relative;left:auto;top:auto;width:100%;flex-direction:row;align-items:center;gap:9px;margin:10px 0 4px}.sample-building-brand img{width:42px;height:42px;margin:0}.sample-building-brand strong{font-size:15px}.sample-building-brand small{display:none}.login-layout{display:flex;min-height:0;margin:12px auto;gap:0;padding-top:0}.login-form-wrap{max-width:430px}.login-card{padding:23px 20px 20px}.login-benefits{grid-template-columns:repeat(2,1fr);margin-top:14px}.login-footer{line-height:1.6}}


/* Approved sample refinement: company logo/name are part of the building facade image */
.ag-login-page{background:#06357b;min-height:100vh}
.login-scene{
  min-height:100vh;padding:0 3.2% 14px;
  background-color:#06357b;
  background-image:linear-gradient(90deg,rgba(0,36,94,.02) 0%,rgba(0,46,112,.03) 34%,rgba(0,47,119,.72) 48%,#06377d 67%,#062b70 100%),url("building-logo-facade.jpg");
  background-position:center center,left center;background-size:cover,52% 100%;background-repeat:no-repeat,no-repeat;
}
.login-scene:before{background:linear-gradient(90deg,rgba(0,37,95,.02) 0%,rgba(0,37,95,.03) 34%,rgba(2,42,103,.2) 45%,rgba(2,35,88,.08) 100%)}
.login-scene:after{bottom:-20%;height:30%;background:linear-gradient(170deg,transparent 0 12%,rgba(0,157,255,.32) 12.2% 14%,rgba(255,183,47,.94) 14.2% 15%,rgba(7,86,181,.94) 15.3% 45%,rgba(5,38,94,.98) 45.3% 100%)}
.sample-building-brand{display:none!important}
.login-topbar{display:none!important}
.login-layout{max-width:1480px;min-height:calc(100vh - 145px);margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(390px,480px) minmax(290px,360px);gap:clamp(20px,2.8vw,46px);align-items:center;padding-top:16px}
.login-intro{display:none!important}
.login-form-wrap{grid-column:2;max-width:480px;width:100%;margin:auto}
.login-card{padding:29px 31px 24px;border-radius:23px;background:linear-gradient(150deg,rgba(255,255,255,.99),rgba(239,246,255,.98));box-shadow:0 25px 65px #001b4d6b,0 0 0 1px #ffffff8a}
.login-card-brand img{width:68px;height:60px}
.login-card-heading h2{font-size:27px}
.login-card-heading{margin-bottom:20px}
.login-input-wrap input{height:54px}
.login-submit{height:56px;margin-top:22px}
.login-features{grid-column:3;padding:22px 20px;border-radius:22px;background:linear-gradient(150deg,rgba(22,92,169,.55),rgba(8,39,94,.48));backdrop-filter:blur(8px)}
.login-features-heading h2{font-size:25px;margin-bottom:16px}
.login-feature{margin:12px 0}
.login-slogan{position:absolute;z-index:1;right:4.5%;top:3.5%;font-family:"Segoe Script","Brush Script MT",cursive;font-size:clamp(18px,2.1vw,32px);font-style:italic;line-height:1.08;color:#fff;text-align:center;text-shadow:0 3px 14px #00275c99;transform:rotate(-5deg);pointer-events:none}
.login-slogan:after{content:"";display:block;width:70%;height:4px;margin:9px 0 0 auto;border-radius:50%;background:#ffb52c;transform:rotate(-7deg)}
.login-benefits{margin-top:10px;max-width:1250px}
.login-footer{padding-top:4px}
@media(max-width:1150px){
 .login-scene{background-size:cover,52% 100%;padding-left:2.5%;padding-right:2.5%}
 .login-layout{grid-template-columns:minmax(0,1fr) minmax(350px,440px);gap:24px}
 .login-features{display:none}
 .login-form-wrap{grid-column:2}
 .login-slogan{right:5%;top:4%;font-size:22px}
 .login-benefits{max-width:900px}
}
@media(max-width:720px){
 .login-scene{padding:20px 16px 18px;background-image:linear-gradient(90deg,rgba(2,40,99,.78),rgba(3,42,102,.91)),url("building-logo-facade.jpg");background-size:cover,100% 100%;background-position:center,left center}
 .login-layout{display:flex;flex-direction:column;gap:16px;margin:90px auto 12px;min-height:auto;padding-top:0}
 .login-form-wrap{max-width:430px;width:100%}
 .login-card{padding:24px 22px 21px;border-radius:20px}
 .login-card-heading h2{font-size:23px}
 .login-slogan{top:18px;right:16px;font-size:18px}
 .login-benefits{grid-template-columns:repeat(2,1fr);padding:8px;margin-top:12px}
 .login-benefits>div{justify-content:flex-start;border-right:0;padding:10px 6px}
 .login-benefits>div:nth-child(odd){border-right:1px solid #ffffff30}
 .login-footer{font-size:9px;line-height:1.6}
}

/* Clean professional login refinement */
@media (min-width: 1151px) {
  .login-scene {
    padding: 0 4.2% 16px;
    background-image: linear-gradient(90deg, rgba(2,35,82,.02) 0%, rgba(2,35,82,.04) 30%, rgba(3,43,100,.48) 45%, rgba(5,43,101,.96) 65%, #062b70 100%), url("building-logo-facade.jpg");
    background-position: center center, left center;
    background-size: cover, 49% 100%;
  }
  .login-scene:before { background: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(5,42,100,.12) 47%, rgba(4,35,85,.1) 100%); }
  .login-layout {
    max-width: 1370px;
    min-height: calc(100vh - 148px);
    grid-template-columns: minmax(120px, 1fr) minmax(365px, 425px) minmax(270px, 315px);
    gap: clamp(22px, 2.2vw, 34px);
    padding-top: 24px;
  }
  .login-form-wrap { max-width: 425px; }
  .login-card { padding: 27px 29px 23px; border-radius: 20px; box-shadow: 0 22px 55px rgba(0,20,65,.34), 0 1px 0 rgba(255,255,255,.95) inset; }
  .login-card-brand img { width: 56px; height: 52px; object-fit: contain; }
  .login-card-heading { margin-bottom: 17px; }
  .login-card-heading h2 { font-size: 25px; letter-spacing: -.45px; }
  .login-card-heading p { line-height: 1.55; }
  .login-input-wrap input { height: 50px; border-radius: 11px; }
  .login-submit { height: 51px; margin-top: 18px; border-radius: 11px; }
  .login-features { padding: 23px 21px; border: 1px solid rgba(255,255,255,.22); border-radius: 19px; background: linear-gradient(145deg,rgba(28,94,171,.48),rgba(4,31,78,.60)); box-shadow: 0 18px 42px rgba(0,18,58,.16); }
  .login-features-heading h2 { font-size: 23px; line-height: 1.15; margin-bottom: 14px; }
  .login-feature { margin: 10px 0; gap: 11px; }
  .feature-icon { width: 39px; height: 39px; flex: 0 0 39px; border-radius: 12px; }
  .login-slogan { display: none; }
  .login-benefits { max-width: 1120px; margin-top: 5px; padding: 11px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(15,75,145,.44); }
  .login-footer { padding-top: 9px; }
}
@media (max-height: 800px) and (min-width: 1151px) {
  .login-layout { min-height: calc(100vh - 125px); padding-top: 8px; }
  .login-card { padding-top: 21px; padding-bottom: 18px; }
  .login-card-heading { margin-bottom: 13px; }
  .login-feature { margin: 8px 0; }
  .login-benefits { padding-top: 8px; padding-bottom: 8px; }
}


/* Final mobile header/layout fix for Agilavetri Groups billing dashboard */
@media (max-width: 760px) {
  .app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow-x: clip;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 64px;
    flex: 0 0 auto;
    padding: 9px 12px;
  }

  .top-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    width: 100%;
  }

  .top-brand img {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .top-brand > span {
    min-width: 0;
  }

  .top-brand b {
    display: block;
    font-size: clamp(10px, 2.8vw, 14px);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .top-brand small {
    display: block;
    font-size: clamp(8px, 2.2vw, 10px);
    line-height: 1.25;
    white-space: normal;
  }

  .topbar-spacer,
  .top-date,
  .top-clock,
  .top-notice {
    display: none !important;
  }

  .user-chip {
    min-width: 0;
    max-width: 42vw;
    gap: 6px;
    padding-left: 8px;
    border-left: 1px solid #ffffff55;
  }

  .user-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 16px;
  }

  .user-chip > span:last-child {
    min-width: 0;
  }

  .user-chip b {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .user-chip small {
    font-size: 8px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .app-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  .sidebar {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    padding: 7px;
  }

  .side-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .side-nav a {
    min-width: 0;
    padding: 9px 8px;
    gap: 7px;
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .side-nav a i {
    flex: 0 0 17px;
    font-size: 16px;
  }

  .sidebar-logo {
    display: none;
  }

  .app-main {
    min-width: 0;
    width: 100%;
  }

  .app-main main {
    width: 100%;
    min-width: 0;
    padding: 14px 12px;
  }

  .welcome-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .welcome-row h1 {
    font-size: 22px;
    overflow-wrap: anywhere;
  }

  .hero-banner {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .quick-card {
    min-width: 0;
    padding: 10px 9px;
    gap: 7px;
  }

  .quick-card b,
  .quick-card small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-panels,
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel,
  .card {
    min-width: 0;
    padding: 13px;
  }

  .scroll {
    max-width: 100%;
  }

  .app-footer {
    gap: 8px;
    padding: 10px 12px;
  }

  .footer-motto {
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  .topbar {
    padding: 8px;
    gap: 6px;
  }

  .top-brand {
    gap: 5px;
  }

  .top-brand img {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .top-brand b {
    font-size: 10px;
  }

  .top-brand small {
    font-size: 7px;
  }

  .user-chip {
    max-width: 40vw;
    padding-left: 6px;
    gap: 4px;
  }

  .user-avatar {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    font-size: 14px;
  }

  .user-chip b {
    font-size: 9px;
  }

  .user-chip small {
    font-size: 7px;
  }

  .side-nav a {
    font-size: 11px;
    padding: 8px 6px;
  }

  .stat-card {
    padding: 11px;
  }
}


/* Mobile header fix: prevent the live clock and account name from overlapping the company brand. */
@media (max-width: 760px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 0;
    height: auto;
    padding: 10px 12px;
  }
  .topbar-spacer,
  .top-date,
  .top-clock,
  .top-notice {
    display: none !important;
  }
  .top-brand {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    gap: 9px;
    overflow: hidden;
  }
  .top-brand img {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  .top-brand > span {
    min-width: 0;
  }
  .top-brand b {
    display: block;
    font-size: clamp(13px, 4vw, 16px);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .top-brand small {
    font-size: 9px;
    line-height: 1.3;
    white-space: normal;
  }
  .user-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    padding: 5px 0 0;
    border-left: 0;
    gap: 8px;
  }
  .user-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 16px;
  }
  .user-chip > span:last-child {
    min-width: 0;
  }
  .user-chip b {
    display: block;
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .user-chip small {
    font-size: 9px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
}


/* FINAL OVERRIDE: mobile dashboard header must not overlap */
@media screen and (max-width: 760px) {
  .app-shell { display:flex !important; flex-direction:column !important; width:100% !important; overflow-x:hidden !important; }
  .topbar {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:10px 12px !important;
    gap:8px !important;
  }
  .topbar .top-brand {
    display:flex !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    align-items:center !important;
    gap:9px !important;
    overflow:visible !important;
  }
  .topbar .top-brand img { width:40px !important; height:40px !important; flex:0 0 40px !important; }
  .topbar .top-brand > span { display:block !important; flex:1 1 auto !important; min-width:0 !important; }
  .topbar .top-brand b { display:block !important; font-size:clamp(13px,4vw,16px) !important; line-height:1.25 !important; white-space:normal !important; overflow-wrap:anywhere !important; }
  .topbar .top-brand small { display:block !important; font-size:9px !important; line-height:1.3 !important; white-space:normal !important; }
  .topbar .topbar-spacer,
  .topbar .top-date,
  .topbar .top-clock,
  .topbar .top-notice { display:none !important; }
  .topbar .user-chip {
    display:flex !important;
    flex:0 0 auto !important;
    align-self:flex-end !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:7px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.25) !important;
    gap:8px !important;
  }
  .topbar .user-avatar { width:30px !important; height:30px !important; flex:0 0 30px !important; font-size:16px !important; }
  .topbar .user-chip > span:last-child { display:block !important; min-width:0 !important; }
  .topbar .user-chip b { display:block !important; font-size:11px !important; line-height:1.25 !important; overflow-wrap:anywhere !important; }
  .topbar .user-chip small { display:block !important; font-size:9px !important; line-height:1.25 !important; overflow-wrap:anywhere !important; }
  .app-body { display:flex !important; flex-direction:column !important; width:100% !important; min-width:0 !important; }
  .sidebar { width:100% !important; flex:0 0 auto !important; min-height:0 !important; }
  .app-main, .app-main main { width:100% !important; min-width:0 !important; }
}