/* Protouch Expert Billing — single source of truth for screen layout. */
:root{--ink:#14263b;--blue:#1769c2;--line:#dce4ef;--soft:#f2f6fb}
*,*::before,*::after{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:#f3f6fa;color:var(--ink);font:15px/1.48 Arial,Helvetica,sans-serif}
body>main.panel.billing-app{display:block;width:calc(100% - 32px)!important;max-width:1024px!important;min-width:0!important;margin:16px auto 32px!important;padding:22px 24px 28px!important;background:#fff;border-radius:10px;box-shadow:0 2px 12px #14263b10}
.billing-site-header{position:relative;border-bottom:1px solid var(--line);padding:0 0 16px;margin-bottom:24px}
.billing-heading{min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 100px}
.billing-site-title{color:var(--ink);font-size:23px;font-weight:700;line-height:1.25;text-decoration:none}
.billing-site-title:hover{text-decoration:none;color:#174d8b}
.billing-logout{position:absolute;right:0;top:6px;margin:0!important;padding:0!important;display:block!important;width:auto!important}
.billing-logout button{margin:0!important;padding:8px 15px!important;background:#334155;color:white;border:0;border-radius:6px;font-size:13px;cursor:pointer}
.billing-menu{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px}
.billing-menu a{display:inline-block;white-space:nowrap;color:#204d7e;background:#f2f5fa;text-decoration:none;border:1px solid #e4eaf2;border-radius:6px;padding:7px 10px;font-size:13px;line-height:1.3}
.billing-menu a:hover,.billing-menu a:focus-visible{background:#e5effb;border-color:#b6d2f0}
.billing-menu a.active{background:#dcecff;color:#153e6a;border-color:#bad8fa;font-weight:700}
.billing-footer{margin-top:36px;padding-top:14px;border-top:1px solid var(--line);color:#64748b;font-size:12px;text-align:center}
.billing-app h1{margin:12px 0 20px}.billing-app h2,.billing-app h3{color:var(--ink)}
.billing-app table{border-collapse:collapse;max-width:100%}
.billing-app th,.billing-app td{vertical-align:top}
.billing-app .report-table{width:100%}
.billing-app .report-table th:last-child,.billing-app .report-table td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.billing-app .db-links{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.billing-app .stats{display:flex;flex-wrap:wrap;gap:12px}
.billing-app .stat{min-width:140px}
@media(max-width:760px){body>main.panel.billing-app{width:calc(100% - 16px)!important;margin:8px auto!important;padding:14px!important}.billing-heading{padding:4px 65px 4px 8px;justify-content:flex-start;text-align:left}.billing-site-title{font-size:18px}.billing-menu{justify-content:flex-start}.billing-menu a{font-size:12px;padding:6px 8px}.billing-logout button{padding:7px 10px!important}}
@media print{body{background:#fff}body>main.panel.billing-app{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;box-shadow:none!important;border-radius:0}.billing-site-header,.billing-footer{display:none!important}}

/* Fixed 1024px desktop standard, scoped to billing management pages. */
@media screen{body>main.panel.billing-app{max-width:1024px!important;width:calc(100% - 24px)!important;margin:12px auto 28px!important} .billing-app .db-links{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .billing-app table{font-size:13px} .billing-app th,.billing-app td{padding:6px 8px} .billing-app .billing-menu{gap:5px} .billing-app .billing-menu a{font-size:12px;padding:6px 8px}}
@media screen and (max-width:700px){body>main.panel.billing-app{width:calc(100% - 12px)!important;margin:6px auto!important;padding:12px!important}}


/* Shared screen geometry — same on Dashboard and every management module. */
@media screen {
  html { scrollbar-gutter: stable; }
  body > main.panel.billing-app {
    display: block !important;
    width: calc(100% - 24px) !important;
    max-width: 1024px !important;
    min-width: 0 !important;
    margin: 12px auto 28px !important;
    padding: 22px 24px 28px !important;
    box-sizing: border-box !important;
  }
  .billing-app > h1 { text-align: center; }
}
@media screen and (max-width: 700px) {
  body > main.panel.billing-app {
    width: calc(100% - 12px) !important;
    margin: 6px auto !important;
    padding: 12px !important;
  }
}


/* Dashboard-only refinements: scoped so other forms and reports stay intact. */
.billing-app .stats{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:12px;max-width:510px;margin:16px 0 20px;
}
.billing-app .stats .stat{
 display:flex;flex-direction:column;justify-content:center;
 min-width:0;min-height:88px;padding:14px 18px;
 background:#f0f5fb;border:1px solid #e4ebf4;border-radius:10px;
}
.billing-app .stats .stat small{
 display:block;color:#526780;font-size:13px;line-height:1.4;
}
.billing-app .stats .stat strong{
 display:block;margin-top:4px;font-size:27px;line-height:1.2;
 color:#14263b;font-weight:700;font-variant-numeric:tabular-nums;
}
.billing-app .db-section-heading{margin:20px 0 12px!important}
.billing-app .db-links{gap:12px;margin-top:10px}
.billing-app .db-links a{min-height:91px}
.billing-app .db-section{margin-top:20px}
.billing-app .db-section h2{margin-bottom:10px}
@media(max-width:540px){
 .billing-app .stats{gap:8px}
 .billing-app .stats .stat{padding:12px 10px;min-height:75px}
 .billing-app .stats .stat strong{font-size:23px}
}

/* UI v1: common navigation treatment for every authenticated management page. */
.billing-site-header .billing-menu a,
.billing-site-header .billing-menu .billing-menu-unavailable {
 display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:35px;
 padding:7px 9px;white-space:nowrap;font-size:12px;font-weight:600;
 border-radius:7px;transition:background-color .15s,border-color .15s;
}
.billing-site-header .billing-nav-icon{display:inline-block;width:16px;height:16px;flex:none;vertical-align:middle;}
.billing-site-header .billing-menu a:focus-visible{outline:2px solid var(--blue,#1769c2);outline-offset:2px;}
.billing-site-header .billing-menu a.active{box-shadow:inset 0 -2px 0 var(--blue,#1769c2);}
.billing-site-header .billing-menu-secondary{border-top:1px solid #dce4ef;padding-top:11px;margin-top:11px;}
@media(max-width:760px){.billing-site-header .billing-menu a,.billing-site-header .billing-menu .billing-menu-unavailable{font-size:11px;min-height:34px;padding:6px 8px}.billing-site-header .billing-nav-icon{width:15px;height:15px;}}
@media print{.billing-svg-defs{display:none!important}}

/* Compact navigation: force SVG size regardless of global SVG/layout rules. */
.billing-app .billing-site-header .billing-nav-groups {display:block!important;width:100%!important;}
.billing-app .billing-site-header nav.billing-menu {display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:100%!important;}
.billing-app .billing-site-header nav.billing-menu > a,
.billing-app .billing-site-header nav.billing-menu > .billing-menu-unavailable {display:inline-flex!important;flex-direction:row!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:auto!important;max-width:none!important;height:34px!important;min-height:34px!important;margin:0!important;padding:6px 9px!important;font-size:12px!important;line-height:1.2!important;white-space:nowrap!important;}
.billing-app .billing-site-header nav.billing-menu svg.billing-nav-icon {display:inline-block!important;flex:0 0 16px!important;width:16px!important;min-width:16px!important;max-width:16px!important;height:16px!important;min-height:16px!important;max-height:16px!important;vertical-align:middle!important;}
.billing-app .billing-site-header nav.billing-menu .billing-nav-label {display:inline!important;flex:0 0 auto!important;font-size:inherit!important;line-height:inherit!important;white-space:nowrap!important;}
@media(max-width:760px){.billing-app .billing-site-header nav.billing-menu{justify-content:center!important;}.billing-app .billing-site-header nav.billing-menu > a,.billing-app .billing-site-header nav.billing-menu > .billing-menu-unavailable{height:32px!important;min-height:32px!important;padding:5px 7px!important;font-size:11px!important;}.billing-app .billing-site-header nav.billing-menu svg.billing-nav-icon{width:14px!important;min-width:14px!important;max-width:14px!important;height:14px!important;min-height:14px!important;max-height:14px!important;flex-basis:14px!important;}}