:root{--ink:#15251f;--muted:#65746d;--line:#dce5df;--cream:#f5f7f2;--paper:#fffefa;--green:#0d7445;--green-dark:#075a35;--green-soft:#e1f1e8;--amber:#e7a52d;--red:#b74b43;--blue:#2374ab}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}
.public-shell{min-height:100vh;overflow:hidden;background:radial-gradient(circle at 80% 10%,rgba(217,234,223,.9),transparent 34%),var(--cream)}
.public-nav,.public-hero,.how-section,.public-footer{width:min(1180px,calc(100% - 40px));margin-inline:auto}.public-nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(21,37,31,.12)}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.4px}.brand b{color:var(--green)}.brand-mark{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:11px;background:var(--green);color:#fff;box-shadow:0 7px 20px rgba(13,116,69,.24)}.brand-light b{color:#90d2ae}.brand-light .brand-mark{background:#8dd2aa;color:#123d29;box-shadow:none}.staff-link{font-size:14px;font-weight:700;display:flex;gap:8px;align-items:center}.staff-link span{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%}
.public-hero{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;padding:68px 0 86px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.eyebrow:before{content:"";width:26px;height:2px;background:var(--green)}.hero-copy h1{margin:22px 0;max-width:600px;font:400 clamp(54px,6vw,88px)/.98 Georgia,serif;letter-spacing:-.055em}.hero-copy h1 em{color:var(--green);font-weight:400}.hero-copy>p{max-width:570px;color:var(--muted);font-size:18px;line-height:1.7}.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:35px}.trust-pill{display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(255,255,255,.68);border:1px solid var(--line);border-radius:999px;color:#53615b;font-size:12px;font-weight:700}.dot{width:7px;height:7px;border-radius:50%;background:currentColor}.dot.green{color:var(--green)}.dot.blue{color:var(--blue)}.dot.amber{color:var(--amber)}
.payment-card-wrap{position:relative}.payment-card-glow{position:absolute;inset:12% -16%;background:radial-gradient(circle,rgba(13,116,69,.2),transparent 62%);filter:blur(24px)}.payment-card{position:relative;max-width:480px;margin-left:auto;background:var(--paper);padding:34px;border:1px solid rgba(21,37,31,.12);border-radius:28px;box-shadow:0 32px 80px rgba(36,62,48,.14)}.card-kicker{margin:0 0 8px;color:var(--green);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.payment-card h2{margin:0;font:400 34px Georgia,serif;letter-spacing:-.035em}.payment-card>p{color:var(--muted);font-size:14px;line-height:1.6}.field-label{display:block;margin:24px 0 9px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.input-wrap{position:relative}.input-wrap input{width:100%;height:54px;padding:0 48px 0 16px;border:1px solid #cfdad3;border-radius:14px;background:#fff;color:var(--ink);outline:none}.input-wrap input:focus,.login-label input:focus,.form-grid input:focus,.form-grid select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(13,116,69,.1)}.input-wrap span{position:absolute;right:15px;top:14px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--green);background:var(--green-soft);font-weight:900}.primary-btn{display:grid;place-items:center;width:100%;min-height:52px;margin-top:14px;border:0;border-radius:14px;background:var(--green);color:#fff;font-weight:800;box-shadow:0 10px 22px rgba(13,116,69,.2)}.primary-btn:hover{background:var(--green-dark);transform:translateY(-1px)}button:disabled{opacity:.55;cursor:wait}.secure-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px!important;color:#7a8781!important;font-size:11px!important}.form-message{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5}.form-message.error{background:#fff0ed;color:#91382f}.form-message.success{background:var(--green-soft);color:var(--green-dark)}.invoice-preview{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fbfcf9}.invoice-top{display:flex;justify-content:space-between;align-items:start;gap:16px}.invoice-preview strong,.invoice-preview small{display:block}.invoice-preview small{margin-top:4px;color:var(--muted)}.amount{color:var(--green);font-size:23px;font-weight:900;letter-spacing:-.04em}
.how-section{margin-bottom:76px;padding:70px 0 38px;border-top:1px solid rgba(21,37,31,.12);display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}.how-section h2{margin:15px 0 0;font:400 42px/1 Georgia,serif;letter-spacing:-.04em}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{padding:8px 10px}.step>span{color:var(--green);font:italic 22px Georgia,serif}.step h3{margin:30px 0 9px;font-size:16px}.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.public-footer{padding:28px 0 40px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.public-footer p{margin:0;color:var(--muted);font-size:12px}
.signin-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:radial-gradient(circle at 50% 0,#dceee4,transparent 45%),var(--cream)}.signin-card{width:min(450px,100%);padding:38px;border:1px solid var(--line);border-radius:22px;background:#fff;text-align:center;box-shadow:0 24px 70px rgba(36,62,48,.12)}.signin-card .brand{margin-bottom:30px}.signin-card h1{margin:0;font:400 35px Georgia,serif}.signin-card>p{color:var(--muted);line-height:1.65}.login-label{display:grid;gap:7px;margin-top:16px;color:var(--muted);font-size:11px;font-weight:800;text-align:left;text-transform:uppercase;letter-spacing:.05em}.login-label input{height:46px;padding:0 12px;border:1px solid var(--line);border-radius:10px;outline:none}.back-link{display:inline-block;margin-top:18px;color:var(--muted);font-size:12px}.link-button{margin-top:22px}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:235px minmax(0,1fr);background:#f4f6f3}.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:28px 20px 20px;background:#103d2b;color:#eff8f2}.sidebar-nav{display:grid;gap:7px;margin-top:46px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:11px;color:#c7d8cf;font-size:13px;font-weight:700}.nav-item span{width:24px;text-align:center}.nav-item.active,.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}.sidebar-bottom{margin-top:auto}.router-card{padding:15px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.055)}.router-card p{margin:0;color:#9fb6aa;font-size:11px}.router-card strong{display:flex;gap:8px;align-items:center;margin-top:7px;font-size:12px}.pulse{width:7px;height:7px;border-radius:50%;background:#72d69d;box-shadow:0 0 0 4px rgba(114,214,157,.12)}.logout-btn{width:100%;margin-top:10px;padding:10px;border:0;border-radius:10px;background:transparent;color:#b8cbc1;font-size:11px;font-weight:800}.logout-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-main{min-width:0}.admin-header{min-height:82px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.8);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.admin-header p,.admin-header h1{margin:0}.admin-header p{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.admin-header h1{margin-top:5px;font:400 25px Georgia,serif}.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:900}.content{padding:28px 34px 44px}.setup-banner{margin-bottom:14px;padding:13px 16px;border:1px solid #efdda9;border-radius:12px;background:#fff7df;color:#6f571f;font-size:11px}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:14px}.toolbar h2{margin:0;font:400 29px Georgia,serif}.toolbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.toolbar-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}.btn{min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:12px;font-weight:800}.btn:hover{border-color:#b9c9bf;background:#fbfcfa}.btn.green{color:#fff;background:var(--green);border-color:var(--green)}.btn.green:hover{background:var(--green-dark)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat-card{min-width:0;padding:19px;border:1px solid var(--line);border-radius:15px;background:#fff}.stat-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.stat-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:var(--green-soft);color:var(--green)}.stat-value{margin:16px 0 5px;font-size:27px;font-weight:900;letter-spacing:-.045em;white-space:nowrap}.stat-foot{color:var(--muted);font-size:11px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.75fr);gap:14px;margin-top:14px}.panel{min-width:0;border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 19px;border-bottom:1px solid #edf1ee}.panel-head h3{margin:0;font-size:14px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.count-pill{padding:6px 9px;border-radius:999px;background:#f0f4f1;color:var(--muted);font-size:9px;font-weight:800}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{padding:11px 15px;text-align:left;color:#87928c;background:#fafbf9;font-size:9px;text-transform:uppercase;letter-spacing:.08em}td{padding:13px 15px;border-top:1px solid #eef1ef;font-size:11px;white-space:nowrap}.person{display:flex;align-items:center;gap:9px}.person-avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;color:var(--green);background:var(--green-soft);font-weight:900}.person strong,.person small,td>small{display:block}.person small,td>small{margin-top:3px;color:var(--muted);font-size:9px}.status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase}.status:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.status.active,.status.paid{color:var(--green);background:#e7f5ed}.status.past_due,.status.overdue{color:#a8453d;background:#ffefed}.status.suspended{color:#8b6a24;background:#fff4d9}.status.pending{color:var(--blue);background:#eaf4fb}.small-action{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:9px;font-weight:800}.small-action:hover{border-color:var(--green);color:var(--green)}.activity{padding:5px 18px 15px}.activity-item{display:grid;grid-template-columns:31px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #eef1ef}.activity-item:last-child{border-bottom:0}.activity-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#f1f5f2;color:var(--green)}.activity-item strong,.activity-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.activity-item small{margin-top:4px;color:var(--muted);font-size:9px}.activity-amount{text-align:right;font-size:10px;font-weight:900}.activity-amount small{color:var(--green);font-size:8px}.empty{padding:25px!important;color:var(--muted);text-align:center;font-size:11px}.new-subscriber{margin:14px 0}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;padding:18px}.form-grid label{display:grid;gap:7px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.form-grid input,.form-grid select{height:42px;padding:0 11px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fff;outline:none}.form-actions{display:flex;align-items:end}.close-btn{border:0;background:#f2f5f2;border-radius:50%;width:32px;height:32px;font-size:18px}.settings-panel{margin-top:14px}.password-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.security-note{margin:0;padding:0 18px 18px;color:var(--muted);font-size:10px}.toast{position:fixed;z-index:50;right:24px;bottom:24px;max-width:380px;padding:13px 16px;border-radius:12px;background:#153b2b;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.2);font-size:12px}.toast.error{background:#8d342e}
@media(max-width:1080px){.stats{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.public-hero{grid-template-columns:1fr;gap:45px;padding-top:55px}.payment-card{margin:0;max-width:600px}.how-section{grid-template-columns:1fr;gap:35px}.admin-shell{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:25px 12px;align-items:center}.sidebar .brand span:last-child,.nav-item:not(.active),.nav-item.active{font-size:0}.nav-item span{font-size:16px}.router-card{display:none}.content{padding:24px 18px}.admin-header{padding:0 18px}.toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{justify-content:flex-start}}
@media(max-width:620px){.public-nav,.public-hero,.how-section,.public-footer{width:min(100% - 28px,1180px)}.public-hero{padding:44px 0 65px}.hero-copy h1{font-size:52px}.payment-card{padding:25px 20px;border-radius:22px}.steps{grid-template-columns:1fr}.step h3{margin-top:12px}.public-footer{align-items:flex-start;flex-direction:column}.admin-shell{display:block}.sidebar{position:static;width:100%;height:auto;padding:14px 18px;flex-direction:row;justify-content:space-between}.sidebar-nav,.sidebar-bottom{margin:0}.sidebar-nav{display:none}.admin-header h1{font-size:20px}.stats{grid-template-columns:1fr 1fr}.stat-card{padding:14px}.stat-value{font-size:20px}.form-grid{grid-template-columns:1fr}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1}.dashboard-grid{display:block}.dashboard-grid .panel{margin-top:14px}}

/* ISP operations modules */
.sidebar-nav{gap:3px;margin-top:28px;overflow-y:auto;padding-right:3px}.nav-item{padding:9px 13px;border-radius:10px;font-size:12px}.router-card{padding:12px 15px}.logout-btn{margin-top:7px;padding:8px}.admin-section{display:none}.admin-section.active{display:block}.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.section-title h2{margin:0;font:400 30px Georgia,serif}.section-title p{margin:6px 0 0;color:var(--muted);font-size:13px}.setup-banner a{text-decoration:underline;font-weight:800}.stats-six{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-icon.warn{background:#fff0e1;color:#b26822}.overview-grid{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)}.form-panel,.list-panel{margin-top:14px}.button-link{display:inline-flex;align-items:center}.table-tools{padding:12px 15px;border-bottom:1px solid var(--line);background:#fafbf9}.table-search{width:min(420px,100%);height:38px;padding:0 12px;border:1px solid var(--line);border-radius:9px;outline:none}.finance-stats{grid-template-columns:repeat(3,1fr);margin-bottom:14px}.eyebrow-text{color:var(--green)!important;font-size:10px!important;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.form-grid .wide-field{grid-column:span 2}.form-grid input[readonly]{background:#f5f7f5;color:#6f7d76}.form-grid textarea{min-height:86px;padding:11px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fff;outline:none;resize:vertical;font:inherit;text-transform:none;letter-spacing:normal}.form-grid textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(13,116,69,.1)}.form-grid .check-label{display:flex;align-items:center;gap:9px;height:42px;margin-top:18px}.check-label input{width:16px;height:16px}.row-actions{display:flex;gap:6px}.small-action.danger:hover{border-color:var(--red);color:var(--red)}.status.void{color:#8b6a24;background:#fff4d9}.activity{max-height:480px;overflow:auto}.report-links{display:flex;flex-wrap:wrap;gap:10px;padding:18px}.mini-chart{height:290px;padding:25px 20px 18px;display:flex;align-items:flex-end;justify-content:space-around;gap:9px;overflow-x:auto}.bar-column{height:100%;min-width:48px;display:grid;grid-template-rows:22px 1fr 18px;gap:6px;text-align:center}.bar-value{font-size:8px;color:var(--muted)}.bar-track{height:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:8px;background:#f1f5f2;overflow:hidden}.bar-track i{display:block;width:100%;min-height:2px;border-radius:7px 7px 0 0;background:linear-gradient(#39b779,var(--green))}.bar-column small{font-size:8px;color:var(--muted)}
.status.open,.status.unpaid{color:#a8453d;background:#ffefed}.status.partial{color:#8b6a24;background:#fff4d9}.bill-register{overflow:visible}.bill-filters{display:grid;grid-template-columns:minmax(150px,1fr) minmax(145px,.75fr) minmax(130px,.7fr) 90px minmax(240px,1.5fr) auto;gap:11px;align-items:end;padding:16px;border-bottom:1px solid var(--line);background:#fafbf9}.bill-filters label,.payment-form-grid label{display:grid;gap:7px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.bill-filters input,.bill-filters select,.payment-form-grid input,.payment-form-grid select{width:100%;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);outline:none}.bill-filters input:focus,.bill-filters select:focus,.payment-form-grid input:focus,.payment-form-grid select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(13,116,69,.1)}.bill-register-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:10px}.bill-register-summary span{color:var(--muted)}.bill-table{min-width:1510px}.bill-table td{vertical-align:top}.bill-table td:nth-child(9){max-width:260px;white-space:normal}.bill-pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:13px 16px;border-top:1px solid var(--line)}.bill-pagination span{min-width:100px;color:var(--muted);font-size:10px;text-align:center}.modal-open{overflow:hidden}.modal-overlay{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:24px;background:rgba(15,27,22,.62);backdrop-filter:blur(3px)}.modal-overlay[hidden]{display:none}.payment-dialog{width:min(650px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:17px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.28)}.payment-dialog-head{position:sticky;z-index:1;top:0;display:flex;align-items:center;justify-content:space-between;padding:19px 21px;border-bottom:1px solid var(--line);background:#fff}.payment-dialog-head p,.payment-dialog-head h2{margin:0}.payment-dialog-head h2{margin-top:4px;font:400 24px Georgia,serif}.modal-close{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#f2f5f2;color:var(--muted);font-size:20px}.payment-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:20px 21px 12px}.payment-form-grid .wide-field{grid-column:1/-1}.payment-form-grid input[readonly]{background:#f5f7f5;color:#6f7d76}.payment-dialog-note{margin:0;padding:0 21px 18px;color:var(--muted);font-size:10px;line-height:1.6}.payment-dialog-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:9px;padding:15px 21px;border-top:1px solid var(--line);background:#fff}
.admin-header-actions{display:flex;align-items:center;gap:12px}.shortcut-trigger{display:flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:11px;font-weight:800}.shortcut-trigger:hover{border-color:var(--green);color:var(--green)}.shortcut-trigger span{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:var(--green-soft);color:var(--green)}.shortcut-dialog{width:min(1180px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:17px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.3)}.shortcut-controls{display:grid;grid-template-columns:145px minmax(180px,.8fr) minmax(260px,1.25fr) 120px;gap:11px;padding:16px 20px;border-bottom:1px solid var(--line);background:#fafbf9}.shortcut-controls label{display:grid;gap:6px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.shortcut-controls input,.shortcut-controls select{width:100%;height:41px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);outline:none}.shortcut-controls input:focus,.shortcut-controls select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(13,116,69,.1)}.shortcut-status{padding:28px;color:var(--muted);font-size:11px;text-align:center}.shortcut-status.success{padding:10px 20px;border-bottom:1px solid var(--line);background:#eef7f2;color:var(--green);text-align:left}.shortcut-status.error{padding:10px 20px;border-bottom:1px solid #f1cac5;background:#fff0ed;color:#943a33;text-align:left}.shortcut-workspace{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:520px}.shortcut-profile{padding:21px;border-right:1px solid var(--line);background:#fbfcfa}.shortcut-profile-avatar{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--green-soft);color:var(--green);font:700 24px Georgia,serif}.shortcut-profile h3{margin:15px 0 3px;font-size:16px}.shortcut-profile>p{margin:0;color:var(--muted);font-size:10px}.shortcut-profile dl{display:grid;grid-template-columns:1fr;gap:4px;margin:20px 0 0}.shortcut-profile dt{margin-top:8px;color:#8a958f;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.shortcut-profile dd{margin:0;font-size:10px;font-weight:700;overflow-wrap:anywhere}.shortcut-mode-panel{min-width:0}.shortcut-customer-detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px}.shortcut-detail-card{padding:15px;border:1px solid var(--line);border-radius:11px;background:#fff}.shortcut-detail-card small,.shortcut-detail-card strong{display:block}.shortcut-detail-card small{color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.shortcut-detail-card strong{margin-top:8px;font-size:12px}.shortcut-panel-actions{display:flex;gap:9px;padding:0 20px 20px}.shortcut-bill-panel{display:grid;grid-template-columns:minmax(330px,.8fr) minmax(430px,1.2fr)}.shortcut-unpaid-column,.shortcut-history-column{min-width:0;padding:20px}.shortcut-unpaid-column{border-right:1px solid var(--line)}.shortcut-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:14px}.shortcut-panel-heading h3,.shortcut-panel-heading p{margin:0}.shortcut-panel-heading h3{font-size:13px}.shortcut-panel-heading p{margin-top:4px;color:var(--muted);font-size:9px}.shortcut-bill-card{padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px}.shortcut-bill-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shortcut-bill-card h4,.shortcut-bill-card p{margin:0}.shortcut-bill-card h4{font-size:12px}.shortcut-bill-card p{margin-top:4px;color:var(--muted);font-size:9px}.shortcut-bill-card .bill-balance{color:var(--red);font-size:15px;font-weight:900}.shortcut-bill-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px 15px;margin:14px 0}.shortcut-bill-meta span{color:var(--muted);font-size:9px}.shortcut-bill-meta strong{color:var(--ink)}.shortcut-bill-actions{display:flex;flex-wrap:wrap;gap:7px}.shortcut-history{min-width:560px}.shortcut-history td,.shortcut-history th{padding:10px}.shortcut-history .row-actions{gap:4px}.shortcut-history .small-action{padding:5px 7px}.ping-card{max-width:620px;margin:55px auto;padding:30px;border:1px solid var(--line);border-radius:16px;text-align:center}.ping-icon{display:grid;place-items:center;width:55px;height:55px;margin:0 auto 16px;border-radius:17px;background:var(--green-soft);color:var(--green);font-size:25px}.ping-card h3{margin:0;font-size:17px}.ping-card p{max-width:480px;margin:10px auto 18px;color:var(--muted);font-size:11px;line-height:1.6}.ping-card pre{margin-top:18px;padding:15px;border-radius:10px;background:#10271d;color:#d8f0e2;font:10px/1.55 monospace;text-align:left;white-space:pre-wrap;overflow:auto}
.finance-period-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}.finance-ledger-panel{overflow:visible}.finance-tabs{display:flex;align-items:center;gap:5px;padding:11px 16px;border-bottom:1px solid var(--line)}.finance-tabs span{flex:1}.finance-type-tab,.finance-view-tab{padding:8px 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:10px;font-weight:800}.finance-type-tab.active,.finance-view-tab.active{background:var(--green-soft);color:var(--green)}.finance-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;padding:16px;background:#fafbf9;border-bottom:1px solid var(--line)}.finance-filters label{display:grid;gap:6px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.finance-filters input,.finance-filters select,.finance-table-meta select{width:100%;height:39px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);outline:none}.finance-search-label{grid-column:span 3}.finance-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}.finance-actions>div{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.finance-actions strong{margin-right:8px;color:var(--green);font-size:14px}.btn.danger-outline{border-color:#e4a9a4;color:var(--red)}.btn.danger-outline:hover{border-color:var(--red);background:#fff2f0}.finance-table-meta{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;color:var(--muted);font-size:10px}.finance-table-meta label{display:flex;align-items:center;gap:7px}.finance-table-meta select{width:72px;height:34px}.finance-table{min-width:1250px}.finance-table th:first-child,.finance-table td:first-child{min-width:180px;width:auto;text-align:left}.finance-table input[type=checkbox]{width:14px;height:14px}.finance-table td:nth-child(7){min-width:310px;white-space:normal;line-height:1.45}.finance-table .protected-entry{color:#9aa49f;font-size:8px}.finance-statistics{min-height:380px}.finance-category-stat{display:grid;grid-template-columns:minmax(140px,.6fr) minmax(220px,1.4fr) 100px 70px;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid #edf1ee;font-size:10px}.finance-category-stat strong{text-align:right}.finance-stat-track{height:10px;border-radius:10px;background:#edf2ef;overflow:hidden}.finance-stat-track i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#32b878,var(--green))}.finance-entry-dialog{width:min(720px,100%)}.finance-move-dialog{width:min(500px,100%)}.finance-category-list{max-height:300px;overflow:auto;border-top:1px solid var(--line)}.finance-category-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:11px 20px;border-bottom:1px solid #edf1ee}.finance-category-item strong,.finance-category-item small{display:block}.finance-category-item small{margin-top:3px;color:var(--muted);font-size:8px}
@media(max-width:1080px){.stats-six{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}}
@media(max-width:1200px){.bill-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.bill-search-label{grid-column:span 2}.shortcut-dialog{width:min(1000px,100%)}.shortcut-bill-panel{grid-template-columns:1fr}.shortcut-unpaid-column{border-right:0;border-bottom:1px solid var(--line)}.finance-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.finance-search-label{grid-column:span 2}}
@media(max-width:820px){.sidebar-nav{margin-top:20px}.nav-item{padding:8px}.section-title{align-items:flex-start;flex-direction:column}.form-grid .wide-field{grid-column:span 2}.bill-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.bill-search-label{grid-column:span 2}.bill-register-summary{align-items:flex-start;flex-direction:column;gap:4px}.finance-actions{align-items:flex-start;flex-direction:column}.finance-period-stats{grid-template-columns:1fr 1fr 1fr}.finance-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-search-label{grid-column:span 2}}
@media(max-width:620px){.admin-shell{display:block}.sidebar{display:block;height:auto;padding:14px 14px 8px}.sidebar>.brand{margin-left:5px}.sidebar-nav{display:flex;margin-top:12px;overflow-x:auto;padding-bottom:7px}.nav-item,.nav-item:not(.active),.nav-item.active{flex:0 0 auto;font-size:10px}.nav-item span{font-size:13px}.sidebar-bottom{display:none}.form-grid .wide-field{grid-column:span 1}.section-title h2{font-size:26px}.finance-stats,.finance-period-stats{grid-template-columns:1fr}.stats-six{grid-template-columns:1fr 1fr}.bill-filters,.payment-form-grid,.shortcut-controls,.finance-filters{grid-template-columns:1fr}.bill-search-label,.payment-form-grid .wide-field,.finance-search-label{grid-column:span 1}.modal-overlay{padding:10px}.payment-dialog,.shortcut-dialog{max-height:calc(100vh - 20px)}.shortcut-workspace{grid-template-columns:1fr}.shortcut-profile{border-right:0;border-bottom:1px solid var(--line)}.shortcut-customer-detail{grid-template-columns:1fr 1fr}.admin-header-actions .shortcut-trigger{width:38px;padding:0;justify-content:center;font-size:0}.admin-header-actions .shortcut-trigger span{font-size:13px}.finance-tabs{overflow-x:auto}.finance-actions>div:first-child{display:none}.finance-category-stat{grid-template-columns:1fr 1fr}.finance-stat-track{grid-column:1/-1}}
.shortcut-customer-actions{flex-wrap:wrap}.shortcut-customer-actions .btn{min-width:104px}

/* v4.5 typography refresh: one clean, rounded Windows-first UI family everywhere. */
:root{--font-sans:"Aptos","Segoe UI Variable","Segoe UI","Trebuchet MS",Arial,sans-serif}
html,body,button,input,select,textarea{font-family:var(--font-sans)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hero-copy h1,.payment-card h2,.how-section h2,.step>span,.signin-card h1,.admin-header h1,.toolbar h2,.section-title h2,.payment-dialog-head h2,.shortcut-profile-avatar{font-family:var(--font-sans);font-weight:700}
.hero-copy h1 em{font-weight:700}
.step>span{font-style:italic}
table,.stat-value,.amount,.activity-amount,.bill-balance{font-variant-numeric:tabular-nums}
.bill-row-actions{min-width:250px;flex-wrap:wrap}
.router-form-actions{gap:8px;flex-wrap:wrap}.router-diagnostic{margin:0 18px 18px;padding:17px;border:1px solid #bcd8c8;border-radius:12px;background:#f4fbf7}.router-diagnostic.failed{border-color:#e6bbb6;background:#fff7f5}.router-diagnostic-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.router-diagnostic-head small,.router-diagnostic-head strong{display:block}.router-diagnostic-head small{color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.1em}.router-diagnostic-head strong{margin-top:5px;font-size:13px}.router-diagnostic-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.router-diagnostic-stage{position:relative;min-height:105px;padding:13px 13px 13px 43px;border:1px solid var(--line);border-radius:10px;background:#fff}.router-diagnostic-stage.success{border-color:#b9ddca}.router-diagnostic-stage.failed{border-color:#ecc3bf}.router-stage-number{position:absolute;top:12px;left:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#edf2ef;color:var(--muted);font-size:9px;font-weight:900}.router-diagnostic-stage.success .router-stage-number{background:var(--green-soft);color:var(--green)}.router-diagnostic-stage.failed .router-stage-number{background:#ffefed;color:var(--red)}.router-diagnostic-stage strong{font-size:10px}.router-diagnostic-stage p,.router-diagnostic-loading{margin:7px 0 0;color:var(--muted);font-size:9px;line-height:1.5}.router-diagnostic-loading{grid-column:1/-1;padding:15px;text-align:center}.router-diagnostic>p{margin:13px 0 0;color:var(--muted);font-size:10px;line-height:1.5}@media(max-width:820px){.router-diagnostic-stages{grid-template-columns:1fr}}

/* v4.8 consolidated Integration center. */
.integration-tabs{display:flex;gap:7px;margin:0 0 14px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow-x:auto}.integration-tab{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:10px;font-weight:800}.integration-tab:hover{border-color:var(--line);color:var(--ink)}.integration-tab.active{border-color:#b9ddca;background:var(--green-soft);color:var(--green);box-shadow:0 6px 16px rgba(13,116,69,.1)}.integration-tab span{font-size:13px}.integration-pane{display:none}.integration-pane.active{display:block}.integration-pane>.panel:first-child{margin-top:0}.integration-form .form-actions{gap:8px;flex-wrap:wrap}.integration-form input[type="password"]::placeholder{color:#9aa59f}.integration-form .check-label{align-self:end}.integration-form .btn{min-height:42px}@media(max-width:820px){.integration-tabs{margin-inline:-2px}.integration-form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.integration-form{grid-template-columns:1fr}.integration-form .wide-field{grid-column:span 1}}


/* RM-CJJ compact checkbox-radio fix */

/* Normal-size checkboxes and radio buttons in admin forms */
.form-grid input[type="checkbox"],
.form-grid input[type="radio"],
.payment-form-grid input[type="checkbox"],
.payment-form-grid input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 16px !important;
  box-shadow: none !important;
  accent-color: var(--green);
}

/* Put checkbox and its text on the same line */
.form-grid .check-label,
.payment-form-grid .check-label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 40px;
  margin: 0 !important;
}

/* Compact Pull-out Status */
#account-pullout-status {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 10px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  min-width: 0;
}

#account-pullout-status legend {
  padding: 0 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#account-pullout-status .pullout-choice-row {
  display: flex !important;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

#account-pullout-status .check-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 28px !important;
  font-size: 11px;
  font-weight: 800;
}


/* RM-CJJ global PPPoE password */
.pppoe-shared-password-field {
  grid-column: 4;
  display: grid;
  gap: 7px;
  align-self: start;
}

.pppoe-shared-password-field > label {
  display: grid;
  gap: 7px;
}

.pppoe-shared-password-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
}

.pppoe-shared-password-actions .btn {
  min-height: 34px;
  padding: 0 11px;
  font-size: 10px;
}

.pppoe-shared-password-actions small {
  color: var(--muted);
  font-size: 9px;
  text-transform: none;
  letter-spacing: normal;
}

@media(max-width:820px) {
  .pppoe-shared-password-field {
    grid-column: span 1;
  }
}


/* RM-CJJ customer header actions */
.customer-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-header-actions #sync-all-mikrotik {
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  margin: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}

.customer-header-actions .count-pill {
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .customer-header-actions {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    justify-content: flex-start;
  }
}


/* RM-CJJ selected MikroTik sync */
.sync-mikrotik-router {
  width: auto !important;
  min-width: 180px;
  max-width: 260px;
  height: 36px;
  margin: 0;
  padding: 0 30px 0 10px;
  font-size: 11px;
  font-weight: 600;
}

.customer-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .sync-mikrotik-router {
    width: 100% !important;
    max-width: none;
  }
}

/* RMCJJ_LOGO_PALETTE_START */

/*
 * Public billing portal palette matched to the official logo:
 * Black  #000000
 * Orange #E56A24
 * Gray   #5E5E5E
 */

.public-body {
  --rm-black: #000000;
  --rm-orange: #E56A24;
  --rm-orange-dark: #C9571C;
  --rm-gray: #5E5E5E;
  --rm-light-gray: #DEDAD6;
  --rm-soft: #F8F6F3;
  --rm-white: #FFFFFF;

  color: var(--rm-black);
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(229, 106, 36, 0.09),
      transparent 34%
    ),
    var(--rm-soft);
}

/* Navigation / compact logo */
.public-body .public-nav {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.public-body .brand {
  color: var(--rm-black);
}

.public-body .brand b {
  color: var(--rm-orange);
}

.public-body .brand-mark {
  background: var(--rm-black);
  color: var(--rm-white);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.15);
}

.public-body .staff-link {
  color: var(--rm-black);
}

/* Main hero */
.public-body .eyebrow {
  color: var(--rm-orange);
}

.public-body .eyebrow::before {
  background: var(--rm-orange);
}

.public-body h1,
.public-body h2,
.public-body h3 {
  color: var(--rm-black);
}

.public-body h1 em {
  color: var(--rm-orange);
}

.public-body .hero-copy > p,
.public-body .payment-card > p,
.public-body .step p,
.public-body .secure-note {
  color: var(--rm-gray);
}

/* Trust badges */
.public-body .trust-pill {
  background: var(--rm-white);
  border-color: rgba(0, 0, 0, 0.13);
  color: var(--rm-black);
}

/* Make all branding dots uniform with logo orange */
.public-body .trust-pill .dot,
.public-body .dot.green,
.public-body .dot.blue,
.public-body .dot.amber {
  background: var(--rm-orange) !important;
}

/* Payment card */
.public-body .payment-card {
  background: var(--rm-white);
  border: 1px solid var(--rm-light-gray);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.10);
}

.public-body .payment-card-glow {
  background: radial-gradient(
    circle,
    rgba(229, 106, 36, 0.17),
    rgba(229, 106, 36, 0) 70%
  );
}

.public-body .card-kicker {
  color: var(--rm-gray);
}

.public-body .field-label {
  color: var(--rm-black);
}

/* Account input */
.public-body .input-wrap input {
  border-color: #CBC7C3;
}

.public-body .input-wrap input:focus {
  border-color: var(--rm-orange);
  box-shadow: 0 0 0 3px rgba(229, 106, 36, 0.14);
  outline: none;
}

.public-body .input-wrap span {
  background: rgba(229, 106, 36, 0.11);
  color: var(--rm-orange);
}

/* Main CTA */
.public-body .primary-btn {
  background: var(--rm-orange);
  color: var(--rm-white);
  box-shadow: 0 10px 25px rgba(229, 106, 36, 0.22);
}

.public-body .primary-btn:hover {
  background: var(--rm-orange-dark);
}

/* Three quick steps */
.public-body .how-section {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.public-body .step > span {
  color: var(--rm-orange);
}

/* Footer */
.public-body .public-footer {
  border-top-color: rgba(0, 0, 0, 0.12);
  color: var(--rm-gray);
}

.public-body .footer-signature {
  color: var(--rm-gray);
}

/* RMCJJ_LOGO_PALETTE_END */


/* Public logo: text-only official brand */
.public-body .brand {
  gap: 0;
}

.public-body .brand > span {
  font-weight: 800;
}

.public-body .brand b {
  color: #E56A24;
}


/* RMCJJ_ADVANCE_BILLING_V1_CSS */

.advance-billing-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 14px;
}

.advance-billing-modal[hidden] {
  display: none !important;
}

.advance-billing-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.advance-billing-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 24, .56);
}

.advance-billing-dialog {
  position: relative;
  z-index: 1;
  width: min(820px, 96vw);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border: 1px solid #dbe3df;
  border-radius: 14px;
  box-shadow:
    0 24px 70px rgba(15, 40, 31, .24);
}

.advance-billing-head {
  min-height: 74px;
  padding: 18px 22px;
  border-bottom: 1px solid #e4e9e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.advance-billing-kicker {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #0d7f4f;
}

.advance-billing-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.advance-billing-x {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f3f6f4;
  font-size: 23px;
  cursor: pointer;
}

#advance-billing-form {
  padding: 20px 22px 22px;
}

.advance-billing-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}

.advance-billing-grid label,
.advance-details-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #4e625b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.advance-billing-grid input,
.advance-billing-grid select,
.advance-details-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d5dfda;
  border-radius: 8px;
  background: #fff;
  color: #102a22;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.advance-billing-grid input[readonly] {
  background: #f6f8f7;
  color: #6d7d77;
}

.advance-wide-field {
  grid-column: 1 / -1;
}

.advance-billing-preview {
  margin: 20px 0;
  border: 1px solid #dce6e1;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fbf9;
}

.advance-preview-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #dde7e2;
}

.advance-preview-top > div {
  padding: 13px 15px;
  background: #fff;
}

.advance-preview-top span {
  display: block;
  margin-bottom: 4px;
  color: #687b74;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.advance-preview-top strong {
  color: #102a22;
  font-size: 16px;
}

.advance-period-list {
  padding: 10px 15px;
}

.advance-period-row {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #e4ece8;
  color: #314942;
  font-size: 13px;
  font-weight: 600;
}

.advance-period-row:last-child {
  border-bottom: 0;
}

.advance-period-row > span:first-child {
  color: #0b8a52;
  font-weight: 900;
}

.advance-details-field textarea {
  min-height: 76px;
  padding: 10px 12px;
  resize: vertical;
}

.advance-billing-note {
  margin: 13px 0 0;
  color: #667972;
  font-size: 12px;
  line-height: 1.5;
}

.advance-billing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e4e9e6;
}

html.advance-modal-open {
  overflow: hidden;
}

@media (max-width: 680px) {
  .advance-billing-modal {
    padding: 10px;
  }

  .advance-billing-grid {
    grid-template-columns: 1fr;
  }

  .advance-wide-field {
    grid-column: auto;
  }

  .advance-preview-top {
    grid-template-columns: 1fr;
  }
}


/* RMCJJ_ADVANCE_EXISTING_PERIODS_V1_CSS */

.advance-period-row.advance-period-conflict {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  background: #fff3f1;
  color: #9c3028;
  font-weight: 700;
}

.advance-period-row.advance-period-conflict
> span:first-child {
  color: #c63f34;
}

#advance-month option:disabled {
  color: #999;
}


/* RMCJJ_PC_AUTO_FIT_V1
   Responsive desktop layout.
   Intended for PC/laptop screens >= 1024px.
*/

@media (min-width: 1024px) {

  :root {
    --pc-sidebar-width:
      clamp(190px, 12.5vw, 240px);

    --pc-page-padding:
      clamp(14px, 1.6vw, 30px);

    --pc-section-gap:
      clamp(12px, 1.1vw, 20px);
  }


  /* ========================================
     MAIN ADMIN LAYOUT
     ======================================== */

  html,
  body {
    width: 100%;
    min-width: 0;
  }

  body.admin-body {
    margin: 0;
    overflow-x: hidden;
  }

  .admin-shell {
    display: grid !important;

    grid-template-columns:
      var(--pc-sidebar-width)
      minmax(0, 1fr);

    width: 100%;
    max-width: none;
    min-width: 0;

    min-height: 100vh;
    min-height: 100dvh;
  }


  /* ========================================
     SIDEBAR
     ======================================== */

  .admin-shell > .sidebar {
    width: auto !important;
    min-width: 0;

    height: 100vh;
    height: 100dvh;

    position: sticky;
    top: 0;

    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar .brand {
    max-width: 100%;
  }

  .sidebar-nav {
    min-width: 0;
  }

  .nav-item {
    min-width: 0;
  }


  /* ========================================
     MAIN AREA
     ======================================== */

  .admin-main {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .admin-header {
    width: 100%;
    box-sizing: border-box;

    padding-left:
      var(--pc-page-padding);

    padding-right:
      var(--pc-page-padding);
  }

  .admin-main > .content {
    width: 100%;
    max-width: none;
    min-width: 0;

    box-sizing: border-box;

    padding-left:
      var(--pc-page-padding);

    padding-right:
      var(--pc-page-padding);
  }

  .admin-section {
    width: 100%;
    min-width: 0;
  }

  .panel,
  .section-title,
  .form-panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }


  /* ========================================
     RESPONSIVE CARD / GRID AREAS
     ======================================== */

  .stats-grid,
  .metric-grid,
  .cards-grid,
  .dashboard-cards {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(
          min(220px, 100%),
          1fr
        )
      ) !important;

    gap: var(--pc-section-gap);
  }


  /* ========================================
     FORMS
     ======================================== */

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    box-sizing: border-box;
  }

  .form-grid {
    min-width: 0;
  }

  .form-grid > * {
    min-width: 0;
  }


  /* ========================================
     TABLES
     Keep columns readable.
     On smaller PC monitors use horizontal
     scroll instead of crushing text.
     ======================================== */

  .table-wrap,
  .table-scroll,
  .data-table-wrap,
  .invoice-table-wrap,
  .finance-table-wrap,
  .staff-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;

    -webkit-overflow-scrolling: touch;
  }

  table {
    max-width: none;
  }


  /* ========================================
     ALL DIALOGS / MODALS
     ======================================== */

  [role="dialog"] {
    max-width:
      calc(100vw - 32px);

    max-height:
      calc(100dvh - 24px);

    box-sizing: border-box;
  }


  /* ========================================
     ADVANCE BILLING
     ======================================== */

  .advance-billing-modal {
    padding:
      clamp(8px, 1.2vw, 24px);
  }

  .advance-billing-dialog {
    width:
      clamp(
        720px,
        58vw,
        980px
      );

    max-width:
      calc(100vw - 24px);

    max-height:
      calc(100dvh - 20px);

    overflow-y: auto;
    overflow-x: hidden;
  }

  #advance-billing-form {
    padding:
      clamp(14px, 1.4vw, 22px);
  }

  .advance-billing-grid {
    gap:
      clamp(10px, 1vw, 18px)
      clamp(14px, 1.4vw, 24px);
  }


  /* ========================================
     LONG TEXT / CELLS
     ======================================== */

  td,
  th {
    overflow-wrap: anywhere;
  }

}


/* ==========================================
   SMALLER PC / LAPTOP
   Example: 1366 x 768
   ========================================== */

@media
  (min-width: 1024px)
  and (max-height: 820px) {

  .admin-header {
    min-height: 56px;
  }

  .admin-main > .content {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .advance-billing-head {
    min-height: 58px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #advance-billing-form {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .advance-billing-grid {
    gap: 10px 18px;
  }

  .advance-billing-preview {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .advance-billing-actions {
    margin-top: 12px;
    padding-top: 12px;
  }

}


/* ==========================================
   LARGE / ULTRAWIDE MONITORS
   Prevent content from becoming oversized.
   ========================================== */

@media (min-width: 2200px) {

  .admin-main > .content {
    padding-left: 36px;
    padding-right: 36px;
  }

  .advance-billing-dialog {
    width: 980px;
  }

}



/* RMCJJ_BILLS_SCREEN_FIT_V2
   Make Bills fit normal PC/laptop monitors without
   cutting off the Action column.
*/

@media (min-width: 1024px) {

  /* --------------------------------------
     Bills section must never enlarge page
     -------------------------------------- */

  [data-section="bills"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  [data-section="bills"] .panel,
  [data-section="bills"] .list-panel,
  [data-section="bills"] .table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  [data-section="bills"] .table-wrap {
    overflow-x: hidden !important;
  }


  /* --------------------------------------
     FORCE BILL TABLE TO AVAILABLE WIDTH
     -------------------------------------- */

  [data-section="bills"] table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    table-layout: fixed !important;

    border-collapse: collapse;
  }


  /* --------------------------------------
     COLUMN WIDTHS
     Total = 100%
     -------------------------------------- */

  [data-section="bills"] th:nth-child(1),
  [data-section="bills"] td:nth-child(1) {
    width: 12.5%;
  }

  [data-section="bills"] th:nth-child(2),
  [data-section="bills"] td:nth-child(2) {
    width: 7%;
  }

  [data-section="bills"] th:nth-child(3),
  [data-section="bills"] td:nth-child(3) {
    width: 9%;
  }

  [data-section="bills"] th:nth-child(4),
  [data-section="bills"] td:nth-child(4) {
    width: 9%;
  }

  [data-section="bills"] th:nth-child(5),
  [data-section="bills"] td:nth-child(5) {
    width: 10%;
  }

  [data-section="bills"] th:nth-child(6),
  [data-section="bills"] td:nth-child(6) {
    width: 7%;
  }

  [data-section="bills"] th:nth-child(7),
  [data-section="bills"] td:nth-child(7) {
    width: 9%;
  }

  [data-section="bills"] th:nth-child(8),
  [data-section="bills"] td:nth-child(8) {
    width: 9.5%;
  }

  [data-section="bills"] th:nth-child(9),
  [data-section="bills"] td:nth-child(9) {
    width: 15%;
  }

  [data-section="bills"] th:nth-child(10),
  [data-section="bills"] td:nth-child(10) {
    width: 12%;
  }


  /* --------------------------------------
     CELLS
     -------------------------------------- */

  [data-section="bills"] th,
  [data-section="bills"] td {
    box-sizing: border-box;

    padding:
      clamp(5px, .45vw, 9px)
      clamp(4px, .4vw, 8px) !important;

    font-size:
      clamp(9px, .72vw, 12px);

    line-height: 1.25;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;

    vertical-align: top;
  }

  [data-section="bills"] th {
    font-size:
      clamp(8px, .65vw, 10px);

    line-height: 1.15;
  }


  /* Main values stay clear */
  [data-section="bills"] td strong {
    font-size: inherit;
    line-height: 1.2;
  }


  /* Secondary text */
  [data-section="bills"] td small {
    display: block;

    margin-top: 2px;

    font-size:
      clamp(7.5px, .59vw, 9px);

    line-height: 1.2;
  }


  /* Status badge should stay on one line */
  [data-section="bills"] .status {
    display: inline-flex;
    max-width: 100%;

    padding: 4px 7px;

    font-size:
      clamp(7px, .58vw, 9px);

    white-space: nowrap !important;
  }


  /* --------------------------------------
     ACTION COLUMN
     Buttons can wrap to next line.
     -------------------------------------- */

  [data-section="bills"] th:last-child,
  [data-section="bills"] td:last-child {
    padding-left: 4px !important;
    padding-right: 3px !important;

    white-space: normal !important;
  }

  [data-section="bills"] td:last-child button,
  [data-section="bills"] td:last-child a,
  [data-section="bills"] td:last-child .small-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 0 !important;
    max-width: 100%;

    min-height: 24px;

    margin:
      1px 2px
      2px 0;

    padding:
      4px
      clamp(5px, .35vw, 7px) !important;

    font-size:
      clamp(8px, .62vw, 10px) !important;

    line-height: 1;

    white-space: nowrap !important;
  }

}


/* ==================================================
   1366 / 1440 LAPTOP AND SMALL DESKTOP
   ================================================== */

@media
  (min-width: 1024px)
  and (max-width: 1500px) {

  /* Gain more horizontal room */
  .admin-shell {
    grid-template-columns:
      155px minmax(0, 1fr) !important;
  }

  .sidebar {
    width: 155px !important;
    min-width: 155px !important;
  }

  .sidebar .brand {
    padding-left: 16px;
    padding-right: 10px;
  }

  .sidebar .nav-item {
    padding-left: 16px;
    padding-right: 8px;

    font-size: 11px;
  }

  .admin-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .admin-main > .content {
    width: 100%;

    padding-left: 10px !important;
    padding-right: 10px !important;

    box-sizing: border-box;
  }


  /* More compact Bills rows */
  [data-section="bills"] th,
  [data-section="bills"] td {
    padding: 6px 4px !important;
  }

}


/* ==================================================
   1024-1200 PC
   Still keep every column visible.
   ================================================== */

@media
  (min-width: 1024px)
  and (max-width: 1200px) {

  .admin-shell {
    grid-template-columns:
      140px minmax(0, 1fr) !important;
  }

  .sidebar {
    width: 140px !important;
    min-width: 140px !important;
  }

  [data-section="bills"] th,
  [data-section="bills"] td {
    font-size: 8.5px;
    padding: 5px 3px !important;
  }

  [data-section="bills"] td small {
    font-size: 7px;
  }

  [data-section="bills"] td:last-child button,
  [data-section="bills"] td:last-child a,
  [data-section="bills"] td:last-child .small-action {
    font-size: 7.5px !important;
    padding: 3px 4px !important;
  }

}



/* RMCJJ_DESKTOP_AUTO_FIT_V3
   Values are calculated automatically by app.js
   from the ACTUAL usable browser viewport.

   This responds automatically to:
   - monitor resolution
   - Windows display scaling
   - browser zoom
   - maximized/windowed browser
   - moving browser between monitors
*/

@media (min-width: 900px) {

  :root {
    --fit-sidebar: 180px;
    --fit-content-pad: 16px;

    --fit-table-font: 11px;
    --fit-table-small: 9px;
    --fit-table-head: 9px;

    --fit-cell-x: 7px;
    --fit-cell-y: 7px;

    --fit-button-font: 9px;
    --fit-button-x: 7px;
    --fit-button-y: 5px;

    --fit-nav-font: 11px;

    --fit-form-font: 12px;
    --fit-control-height: 38px;

    --fit-density: 1;
  }


  /* ==========================================
     ENTIRE ADMIN SHELL
     ========================================== */

  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.admin-body {
    overflow-x: hidden;
  }

  .admin-shell {
    display: grid !important;

    grid-template-columns:
      var(--fit-sidebar)
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    box-sizing: border-box;
  }


  /* ==========================================
     SIDEBAR
     ========================================== */

  .admin-shell > .sidebar {
    width:
      var(--fit-sidebar) !important;

    min-width:
      var(--fit-sidebar) !important;

    max-width:
      var(--fit-sidebar) !important;

    box-sizing: border-box;

    overflow-x: hidden;
  }

  .sidebar .brand {
    max-width: 100%;
    box-sizing: border-box;
  }

  .sidebar-nav,
  .nav-item {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .nav-item {
    font-size:
      var(--fit-nav-font);
  }


  /* ==========================================
     MAIN CONTENT
     ========================================== */

  .admin-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: hidden;

    box-sizing: border-box;
  }

  .admin-header {
    width: 100%;
    min-width: 0;

    padding-left:
      var(--fit-content-pad) !important;

    padding-right:
      var(--fit-content-pad) !important;

    box-sizing: border-box;
  }

  .admin-main > .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding-left:
      var(--fit-content-pad) !important;

    padding-right:
      var(--fit-content-pad) !important;

    box-sizing: border-box;
  }

  .admin-section,
  .panel,
  .list-panel,
  .form-panel,
  .section-title {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
  }


  /* ==========================================
     INPUTS / FORMS
     ========================================== */

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    box-sizing: border-box;
  }

  input,
  select {
    font-size:
      var(--fit-form-font);
  }


  /* ==========================================
     NORMAL TABLES
     ========================================== */

  .table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
  }


  /* ==========================================
     BILLS TABLE
     Force complete table inside available
     main-content width.
     ========================================== */

  [data-section="bills"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
  }

  [data-section="bills"] .panel,
  [data-section="bills"] .list-panel,
  [data-section="bills"] .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box;
  }

  [data-section="bills"] .table-wrap {
    overflow-x: hidden !important;
  }

  [data-section="bills"] table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    table-layout: fixed !important;

    border-collapse: collapse;
  }


  /* CUSTOMER */
  [data-section="bills"]
  th:nth-child(1),
  [data-section="bills"]
  td:nth-child(1) {
    width: 12%;
  }

  /* CONTACT */
  [data-section="bills"]
  th:nth-child(2),
  [data-section="bills"]
  td:nth-child(2) {
    width: 7%;
  }

  /* ACCOUNT / UID */
  [data-section="bills"]
  th:nth-child(3),
  [data-section="bills"]
  td:nth-child(3) {
    width: 9%;
  }

  /* INVOICE / PERIOD */
  [data-section="bills"]
  th:nth-child(4),
  [data-section="bills"]
  td:nth-child(4) {
    width: 8.5%;
  }

  /* AMOUNT / PAID */
  [data-section="bills"]
  th:nth-child(5),
  [data-section="bills"]
  td:nth-child(5) {
    width: 10%;
  }

  /* STATUS */
  [data-section="bills"]
  th:nth-child(6),
  [data-section="bills"]
  td:nth-child(6) {
    width: 7%;
  }

  /* DUE / PAID */
  [data-section="bills"]
  th:nth-child(7),
  [data-section="bills"]
  td:nth-child(7) {
    width: 9%;
  }

  /* REFERENCE */
  [data-section="bills"]
  th:nth-child(8),
  [data-section="bills"]
  td:nth-child(8) {
    width: 9%;
  }

  /* ADDRESS */
  [data-section="bills"]
  th:nth-child(9),
  [data-section="bills"]
  td:nth-child(9) {
    width: 15.5%;
  }

  /* ACTION */
  [data-section="bills"]
  th:nth-child(10),
  [data-section="bills"]
  td:nth-child(10) {
    width: 13%;
  }


  /* ==========================================
     BILL TABLE TEXT
     ========================================== */

  [data-section="bills"] th {
    font-size:
      var(--fit-table-head) !important;

    padding:
      var(--fit-cell-y)
      var(--fit-cell-x) !important;

    line-height: 1.15;

    white-space: normal !important;

    overflow-wrap: anywhere;
  }

  [data-section="bills"] td {
    font-size:
      var(--fit-table-font) !important;

    padding:
      var(--fit-cell-y)
      var(--fit-cell-x) !important;

    line-height: 1.2;

    vertical-align: top;

    white-space: normal !important;

    overflow-wrap: anywhere;
    word-break: normal;

    box-sizing: border-box;
  }

  [data-section="bills"] td strong {
    font-size: inherit;
  }

  [data-section="bills"] td small {
    display: block;

    margin-top: 2px;

    font-size:
      var(--fit-table-small) !important;

    line-height: 1.15;
  }


  /* ==========================================
     STATUS
     ========================================== */

  [data-section="bills"] .status {
    display: inline-flex;

    max-width: 100%;

    font-size:
      var(--fit-table-small) !important;

    white-space: nowrap !important;
  }


  /* ==========================================
     ACTION BUTTONS
     Automatically wrap in their cell.
     ========================================== */

  [data-section="bills"]
  td:last-child {
    white-space: normal !important;

    padding-left:
      calc(
        var(--fit-cell-x) / 2
      ) !important;

    padding-right:
      2px !important;
  }

  [data-section="bills"]
  td:last-child button,

  [data-section="bills"]
  td:last-child a,

  [data-section="bills"]
  td:last-child .small-action {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-width: 0 !important;

    min-height: 22px;

    margin:
      1px 1px
      2px 0;

    padding:
      var(--fit-button-y)
      var(--fit-button-x) !important;

    font-size:
      var(--fit-button-font) !important;

    line-height: 1;

    white-space: nowrap !important;

    box-sizing: border-box;
  }


  /* ==========================================
     DIALOG / MODAL AUTO HEIGHT
     ========================================== */

  [role="dialog"],
  .modal-card,
  .advance-billing-dialog {
    max-width:
      calc(100vw - 20px) !important;

    max-height:
      calc(100dvh - 20px) !important;

    box-sizing: border-box;
  }

  .advance-billing-dialog {
    overflow-y: auto;
    overflow-x: hidden;
  }

}


/* ==============================================
   TIGHT DESKTOP MODE
   Automatically applied by JavaScript.
   ============================================== */

html[data-desktop-fit="tight"]
.admin-header h1 {
  font-size: 20px;
}

html[data-desktop-fit="tight"]
.section-title h2 {
  font-size: 20px;
}

html[data-desktop-fit="tight"]
.panel {
  border-radius: 10px;
}


/* ==============================================
   COMPACT DESKTOP MODE
   ============================================== */

html[data-desktop-fit="compact"]
.admin-header h1 {
  font-size: 22px;
}


/* ==============================================
   LARGE MONITOR MODE
   ============================================== */

html[data-desktop-fit="wide"]
.admin-main > .content {
  padding-left:
    var(--fit-content-pad) !important;

  padding-right:
    var(--fit-content-pad) !important;
}



/* RMCJJ_SMART_DISPLAY_FIT_V4

   Values below are controlled dynamically by JavaScript.

   Detection includes:
   - browser viewport
   - available monitor area
   - screen dimensions
   - devicePixelRatio / display scaling
   - actual admin-main width
   - browser resize
   - moving to another monitor
*/

@media (min-width: 900px) {

  :root {
    --fit-sidebar: 180px;
    --fit-content-pad: 16px;

    --fit-table-font: 11.5px;
    --fit-table-small: 9px;
    --fit-table-head: 9px;

    --fit-cell-x: 7px;
    --fit-cell-y: 7px;

    --fit-button-font: 9.5px;
    --fit-button-x: 7px;
    --fit-button-y: 5px;

    --fit-nav-font: 11.5px;
    --fit-form-font: 12px;

    --fit-density: 1;
  }


  /* ==========================================
     ADMIN SHELL
     ========================================== */

  .admin-shell {
    display: grid !important;

    grid-template-columns:
      var(--fit-sidebar)
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    box-sizing: border-box;
  }


  .admin-shell > .sidebar {
    width:
      var(--fit-sidebar) !important;

    min-width:
      var(--fit-sidebar) !important;

    max-width:
      var(--fit-sidebar) !important;

    box-sizing: border-box;

    overflow-x: hidden;
  }


  .sidebar .nav-item {
    font-size:
      var(--fit-nav-font) !important;
  }


  /* ==========================================
     MAIN CONTENT
     ========================================== */

  .admin-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box;

    overflow-x: hidden;
  }


  .admin-header {
    box-sizing: border-box;

    padding-left:
      var(--fit-content-pad) !important;

    padding-right:
      var(--fit-content-pad) !important;
  }


  .admin-main > .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box;

    padding-left:
      var(--fit-content-pad) !important;

    padding-right:
      var(--fit-content-pad) !important;
  }


  .admin-section,
  .panel,
  .list-panel,
  .form-panel,
  .table-wrap {
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
  }


  /* ==========================================
     BILLS TABLE
     ========================================== */

  [data-section="bills"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow: hidden;
  }


  [data-section="bills"] .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: hidden !important;
  }


  [data-section="bills"] table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    table-layout: fixed !important;

    border-collapse: collapse;
  }


  /* CUSTOMER */
  [data-section="bills"]
  th:nth-child(1),
  [data-section="bills"]
  td:nth-child(1) {
    width: 12%;
  }


  /* CONTACT */
  [data-section="bills"]
  th:nth-child(2),
  [data-section="bills"]
  td:nth-child(2) {
    width: 7%;
  }


  /* ACCOUNT */
  [data-section="bills"]
  th:nth-child(3),
  [data-section="bills"]
  td:nth-child(3) {
    width: 9%;
  }


  /* INVOICE */
  [data-section="bills"]
  th:nth-child(4),
  [data-section="bills"]
  td:nth-child(4) {
    width: 8.5%;
  }


  /* AMOUNT */
  [data-section="bills"]
  th:nth-child(5),
  [data-section="bills"]
  td:nth-child(5) {
    width: 10%;
  }


  /* STATUS */
  [data-section="bills"]
  th:nth-child(6),
  [data-section="bills"]
  td:nth-child(6) {
    width: 7%;
  }


  /* DUE */
  [data-section="bills"]
  th:nth-child(7),
  [data-section="bills"]
  td:nth-child(7) {
    width: 9%;
  }


  /* REFERENCE */
  [data-section="bills"]
  th:nth-child(8),
  [data-section="bills"]
  td:nth-child(8) {
    width: 9%;
  }


  /* ADDRESS */
  [data-section="bills"]
  th:nth-child(9),
  [data-section="bills"]
  td:nth-child(9) {
    width: 15%;
  }


  /* ACTION */
  [data-section="bills"]
  th:nth-child(10),
  [data-section="bills"]
  td:nth-child(10) {
    width: 13.5%;
  }


  /* ==========================================
     TABLE TYPOGRAPHY
     ========================================== */

  [data-section="bills"] th {
    font-size:
      var(--fit-table-head) !important;

    padding:
      var(--fit-cell-y)
      var(--fit-cell-x) !important;

    line-height: 1.15;

    white-space: normal !important;
  }


  [data-section="bills"] td {
    font-size:
      var(--fit-table-font) !important;

    padding:
      var(--fit-cell-y)
      var(--fit-cell-x) !important;

    line-height: 1.2;

    vertical-align: top;

    white-space: normal !important;

    overflow-wrap: anywhere;

    box-sizing: border-box;
  }


  [data-section="bills"] td small {
    display: block;

    margin-top: 2px;

    font-size:
      var(--fit-table-small) !important;

    line-height: 1.15;
  }


  [data-section="bills"] .status {
    font-size:
      var(--fit-table-small) !important;

    white-space: nowrap !important;
  }


  /* ==========================================
     ACTION BUTTONS
     ========================================== */

  [data-section="bills"]
  td:last-child {
    white-space: normal !important;

    padding-left: 3px !important;
    padding-right: 2px !important;
  }


  [data-section="bills"]
  td:last-child button,

  [data-section="bills"]
  td:last-child a,

  [data-section="bills"]
  td:last-child .small-action {

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-width: 0 !important;

    margin:
      1px 1px
      2px 0;

    padding:
      var(--fit-button-y)
      var(--fit-button-x) !important;

    font-size:
      var(--fit-button-font) !important;

    line-height: 1;

    white-space: nowrap !important;

    box-sizing: border-box;
  }


  /* ==========================================
     FORMS
     ========================================== */

  input,
  select,
  textarea {
    font-size:
      var(--fit-form-font);
  }


  /* ==========================================
     MODALS
     ========================================== */

  [role="dialog"],
  .modal-card,
  .advance-billing-dialog {

    max-width:
      calc(100vw - 20px) !important;

    max-height:
      calc(100dvh - 20px) !important;

    box-sizing: border-box;
  }


  .advance-billing-dialog {
    overflow-y: auto;
    overflow-x: hidden;
  }

}



/* RMCJJ_NATIVE_RESPONSIVE_V5

   Native browser-responsive sizing.

   The browser itself supplies the usable CSS viewport.
   Therefore this automatically responds to:

   - monitor resolution
   - maximized/windowed browser
   - Windows display scaling
   - browser zoom
   - moving between monitors
   - taskbar/browser chrome
*/


/* ==========================================================
   DESKTOP SHELL
   ========================================================== */

@media (min-width: 900px) {

  html,
  body {
    width: 100%;
    max-width: 100%;

    margin: 0;

    overflow-x: hidden;
  }


  .admin-shell {
    display: grid !important;

    /*
     * Sidebar automatically grows/shrinks according
     * to the ACTUAL browser viewport.
     */
    grid-template-columns:
      clamp(
        150px,
        11vw,
        205px
      )
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100vw !important;

    min-width: 0 !important;

    box-sizing: border-box;
  }


  .admin-shell > .sidebar {
    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box;

    overflow-x: hidden;
  }


  .admin-main {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box;

    overflow-x: hidden;
  }


  .admin-header {
    width: 100%;

    box-sizing: border-box;

    padding-left:
      clamp(
        10px,
        1.1vw,
        22px
      ) !important;

    padding-right:
      clamp(
        10px,
        1.1vw,
        22px
      ) !important;
  }


  .admin-main > .content {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box;

    padding-left:
      clamp(
        8px,
        1vw,
        20px
      ) !important;

    padding-right:
      clamp(
        8px,
        1vw,
        20px
      ) !important;
  }


  .admin-section,
  .panel,
  .list-panel,
  .form-panel,
  .section-title {
    width: 100%;

    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
  }


  /* ========================================================
     SIDEBAR
     ======================================================== */

  .sidebar .brand {
    max-width: 100%;

    box-sizing: border-box;
  }


  .sidebar-nav,
  .nav-item {
    width: 100%;

    min-width: 0;

    box-sizing: border-box;
  }


  .nav-item {
    font-size:
      clamp(
        9.5px,
        .72vw,
        12px
      ) !important;

    padding-left:
      clamp(
        12px,
        1vw,
        20px
      ) !important;

    padding-right:
      clamp(
        7px,
        .7vw,
        14px
      ) !important;
  }


  /* ========================================================
     BILLS SECTION
     ======================================================== */

  [data-section="bills"] {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;

    box-sizing: border-box;
  }


  [data-section="bills"] .panel,
  [data-section="bills"] .list-panel {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box;
  }


  /*
   * This is the important part.
   *
   * The table measures its ACTUAL parent width,
   * not screen resolution.
   */
  [data-section="bills"] .table-wrap {
    container-name: bills-table;
    container-type: inline-size;

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: hidden !important;

    box-sizing: border-box;
  }


  [data-section="bills"] table {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    table-layout: fixed !important;

    border-collapse: collapse;

    box-sizing: border-box;
  }


  /* ========================================================
     COLUMN WIDTHS
     Total = 100%
     ======================================================== */

  [data-section="bills"]
  th:nth-child(1),
  [data-section="bills"]
  td:nth-child(1) {
    width: 12%;
  }


  [data-section="bills"]
  th:nth-child(2),
  [data-section="bills"]
  td:nth-child(2) {
    width: 7%;
  }


  [data-section="bills"]
  th:nth-child(3),
  [data-section="bills"]
  td:nth-child(3) {
    width: 9%;
  }


  [data-section="bills"]
  th:nth-child(4),
  [data-section="bills"]
  td:nth-child(4) {
    width: 9%;
  }


  [data-section="bills"]
  th:nth-child(5),
  [data-section="bills"]
  td:nth-child(5) {
    width: 10%;
  }


  [data-section="bills"]
  th:nth-child(6),
  [data-section="bills"]
  td:nth-child(6) {
    width: 7%;
  }


  [data-section="bills"]
  th:nth-child(7),
  [data-section="bills"]
  td:nth-child(7) {
    width: 9%;
  }


  [data-section="bills"]
  th:nth-child(8),
  [data-section="bills"]
  td:nth-child(8) {
    width: 9%;
  }


  [data-section="bills"]
  th:nth-child(9),
  [data-section="bills"]
  td:nth-child(9) {
    width: 14%;
  }


  [data-section="bills"]
  th:nth-child(10),
  [data-section="bills"]
  td:nth-child(10) {
    width: 14%;
  }


  /* ========================================================
     TABLE TEXT

     cqw = percentage of the REAL table-container width.

     This is genuine automatic sizing.
     ======================================================== */

  [data-section="bills"] th {
    box-sizing: border-box;

    font-size:
      clamp(
        7.5px,
        .67cqw,
        10px
      ) !important;

    line-height: 1.15;

    padding:
      clamp(
        4px,
        .4cqw,
        8px
      )
      clamp(
        3px,
        .35cqw,
        7px
      ) !important;

    white-space: normal !important;

    overflow-wrap: anywhere;
  }


  [data-section="bills"] td {
    box-sizing: border-box;

    font-size:
      clamp(
        8.8px,
        .78cqw,
        12px
      ) !important;

    line-height: 1.2;

    padding:
      clamp(
        4px,
        .45cqw,
        8px
      )
      clamp(
        3px,
        .4cqw,
        8px
      ) !important;

    vertical-align: top;

    white-space: normal !important;

    overflow-wrap: anywhere;

    word-break: normal;
  }


  [data-section="bills"] td strong {
    font-size: inherit;
  }


  [data-section="bills"] td small {
    display: block;

    margin-top: 2px;

    font-size:
      clamp(
        7px,
        .57cqw,
        9px
      ) !important;

    line-height: 1.15;
  }


  /* ========================================================
     STATUS
     ======================================================== */

  [data-section="bills"] .status {
    display: inline-flex;

    max-width: 100%;

    font-size:
      clamp(
        7px,
        .57cqw,
        9px
      ) !important;

    white-space: nowrap !important;
  }


  /* ========================================================
     ACTION COLUMN

     Buttons automatically wrap according to available
     space instead of overflowing outside the monitor.
     ======================================================== */

  [data-section="bills"]
  td:last-child {

    white-space: normal !important;

    overflow: hidden;

    padding-left: 3px !important;
    padding-right: 2px !important;
  }


  [data-section="bills"]
  td:last-child button,

  [data-section="bills"]
  td:last-child a,

  [data-section="bills"]
  td:last-child .small-action {

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-width: 0 !important;

    max-width: 100%;

    min-height:
      clamp(
        20px,
        1.55cqw,
        26px
      );

    margin:
      1px 1px
      2px 0;

    padding:
      clamp(
        3px,
        .28cqw,
        5px
      )
      clamp(
        4px,
        .38cqw,
        7px
      ) !important;

    font-size:
      clamp(
        7.3px,
        .61cqw,
        9.5px
      ) !important;

    line-height: 1;

    white-space: nowrap !important;

    box-sizing: border-box;
  }


  /* ========================================================
     FORMS / FILTERS
     ======================================================== */

  input,
  select,
  textarea,
  button {
    box-sizing: border-box;

    max-width: 100%;
  }


  /* ========================================================
     MODALS
     ======================================================== */

  [role="dialog"],
  .modal-card,
  .advance-billing-dialog {

    max-width:
      calc(
        100vw - 20px
      ) !important;

    max-height:
      calc(
        100dvh - 20px
      ) !important;

    box-sizing: border-box;
  }


  .advance-billing-dialog {
    overflow-y: auto;
    overflow-x: hidden;
  }

}


/* ==========================================================
   IF THE ACTUAL BILL TABLE BECOMES NARROW
   ========================================================== */

@container bills-table
  (max-width: 1150px) {

  [data-section="bills"] th {
    font-size: 7.5px !important;
  }

  [data-section="bills"] td {
    font-size: 8.5px !important;
  }

  [data-section="bills"]
  td:last-child button,

  [data-section="bills"]
  td:last-child a,

  [data-section="bills"]
  td:last-child .small-action {

    padding:
      3px 4px !important;

    font-size:
      7.3px !important;
  }

}


/* ==========================================================
   LARGE ACTUAL CONTENT AREA

   No tiny text on big monitors.
   ========================================================== */

@container bills-table
  (min-width: 1500px) {

  [data-section="bills"] th {
    font-size:
      10px !important;
  }

  [data-section="bills"] td {
    font-size:
      11.5px !important;
  }

  [data-section="bills"] td small {
    font-size:
      9px !important;
  }

  [data-section="bills"]
  td:last-child button,

  [data-section="bills"]
  td:last-child a,

  [data-section="bills"]
  td:last-child .small-action {

    font-size:
      9.5px !important;

    padding:
      5px 7px !important;
  }

}



/* RMCJJ_BILLS_FULL_VIEW_V6

   Full Bills table on smaller desktop monitors.

   Automatically applies according to ACTUAL browser
   viewport, including a 1366x768 display.

   Large monitors remain unchanged.
*/


/* ==========================================================
   1366 / 1440 DESKTOP FULL VIEW
   ========================================================== */

@media
  (min-width: 900px)
  and (max-width: 1440px) {

  /* --------------------------------------------------------
     Give the table more horizontal space.
     -------------------------------------------------------- */

  .admin-shell {
    grid-template-columns:
      118px minmax(0, 1fr) !important;
  }


  .admin-shell > .sidebar {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }


  .sidebar .brand {
    padding-left: 10px !important;
    padding-right: 6px !important;

    font-size: 11px !important;
  }


  .sidebar .nav-item {
    padding-left: 10px !important;
    padding-right: 5px !important;

    gap: 6px !important;

    font-size: 9px !important;
  }


  .sidebar .nav-item > span:first-child {
    flex: 0 0 auto;
  }


  .sidebar-bottom {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  .router-card {
    padding: 8px !important;
  }


  /* --------------------------------------------------------
     Remove unnecessary page margins.
     -------------------------------------------------------- */

  .admin-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  .admin-main > .content {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }


  section[data-section="bills"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: hidden !important;
  }


  section[data-section="bills"]
  .table-wrap {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: hidden !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* --------------------------------------------------------
     Full-width fixed table.
     -------------------------------------------------------- */

  section[data-section="bills"]
  table {

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    table-layout: fixed !important;

    border-collapse: collapse !important;

    margin: 0 !important;
  }


  /* ========================================================
     COLUMN DISTRIBUTION
     ======================================================== */

  /* Customer */
  section[data-section="bills"]
  th:nth-child(1),
  section[data-section="bills"]
  td:nth-child(1) {
    width: 11% !important;
  }


  /* Contact */
  section[data-section="bills"]
  th:nth-child(2),
  section[data-section="bills"]
  td:nth-child(2) {
    width: 7% !important;
  }


  /* Account / UID */
  section[data-section="bills"]
  th:nth-child(3),
  section[data-section="bills"]
  td:nth-child(3) {
    width: 8% !important;
  }


  /* Invoice / Period */
  section[data-section="bills"]
  th:nth-child(4),
  section[data-section="bills"]
  td:nth-child(4) {
    width: 8% !important;
  }


  /* Amount / Paid */
  section[data-section="bills"]
  th:nth-child(5),
  section[data-section="bills"]
  td:nth-child(5) {
    width: 9% !important;
  }


  /* Status */
  section[data-section="bills"]
  th:nth-child(6),
  section[data-section="bills"]
  td:nth-child(6) {
    width: 6% !important;
  }


  /* Due / Paid */
  section[data-section="bills"]
  th:nth-child(7),
  section[data-section="bills"]
  td:nth-child(7) {
    width: 8% !important;
  }


  /* Reference / Method */
  section[data-section="bills"]
  th:nth-child(8),
  section[data-section="bills"]
  td:nth-child(8) {
    width: 8% !important;
  }


  /* Service address */
  section[data-section="bills"]
  th:nth-child(9),
  section[data-section="bills"]
  td:nth-child(9) {
    width: 17% !important;
  }


  /*
   * Action gets MORE space on the smaller monitor.
   */
  section[data-section="bills"]
  th:nth-child(10),
  section[data-section="bills"]
  td:nth-child(10) {
    width: 18% !important;
  }


  /* ========================================================
     COMPACT BUT READABLE CELLS
     ======================================================== */

  section[data-section="bills"] th {

    padding:
      4px 3px !important;

    font-size:
      7.2px !important;

    line-height: 1.1 !important;

    white-space: normal !important;

    overflow-wrap: anywhere;
  }


  section[data-section="bills"] td {

    padding:
      5px 3px !important;

    font-size:
      8.5px !important;

    line-height: 1.15 !important;

    vertical-align: top;

    white-space: normal !important;

    overflow-wrap: anywhere;

    word-break: normal;

    box-sizing: border-box;
  }


  section[data-section="bills"]
  td strong {

    font-size: 8.5px !important;
  }


  section[data-section="bills"]
  td small {

    display: block;

    margin-top: 1px;

    font-size: 6.8px !important;

    line-height: 1.1 !important;
  }


  /* ========================================================
     STATUS
     ======================================================== */

  section[data-section="bills"]
  .status {

    padding:
      3px 5px !important;

    font-size:
      6.8px !important;

    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /* ========================================================
     ACTION COLUMN
     ======================================================== */

  section[data-section="bills"]
  td:last-child {

    padding:
      4px 2px !important;

    white-space: normal !important;

    overflow: hidden !important;
  }


  /*
   * Support any existing action-button wrapper.
   */
  section[data-section="bills"]
  td:last-child > div,

  section[data-section="bills"]
  td:last-child .actions,

  section[data-section="bills"]
  td:last-child .row-actions,

  section[data-section="bills"]
  td:last-child .button-row {

    display: flex !important;

    flex-wrap: wrap !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    gap: 2px !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
  }


  section[data-section="bills"]
  td:last-child button,

  section[data-section="bills"]
  td:last-child a,

  section[data-section="bills"]
  td:last-child .small-action {

    display: inline-flex !important;

    flex: 0 1 auto !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;

    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 20px !important;

    margin:
      1px 1px 1px 0 !important;

    padding:
      3px 5px !important;

    border-radius:
      7px !important;

    font-size:
      7.3px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    box-sizing:
      border-box !important;
  }


  /* ========================================================
     FILTER AREA
     ======================================================== */

  section[data-section="bills"]
  input,

  section[data-section="bills"]
  select {

    min-width: 0 !important;

    font-size:
      9px !important;
  }


  section[data-section="bills"]
  .btn {

    font-size:
      8px !important;

    padding:
      7px 9px !important;
  }

}


/* ==========================================================
   VERY SHORT 1366 x 768 DESKTOP
   ========================================================== */

@media
  (min-width: 900px)
  and (max-width: 1440px)
  and (max-height: 820px) {

  .admin-header {
    min-height:
      52px !important;
  }


  .admin-main > .content {
    padding-top:
      8px !important;
  }


  section[data-section="bills"]
  .section-title {

    margin-bottom:
      8px !important;
  }


  section[data-section="bills"]
  .section-title h2 {

    font-size:
      21px !important;
  }


  section[data-section="bills"] td {

    padding-top:
      4px !important;

    padding-bottom:
      4px !important;
  }

}


/* ==========================================================
   LARGE DESKTOP
   27-inch / higher-resolution viewport remains comfortable.
   ========================================================== */

@media (min-width: 1600px) {

  .admin-shell {
    grid-template-columns:
      clamp(
        180px,
        11vw,
        215px
      )
      minmax(
        0,
        1fr
      ) !important;
  }


  section[data-section="bills"] td {

    font-size:
      11px !important;
  }


  section[data-section="bills"] td small {

    font-size:
      8.5px !important;
  }


  section[data-section="bills"] th {

    font-size:
      9px !important;
  }


  section[data-section="bills"]
  td:last-child button,

  section[data-section="bills"]
  td:last-child a,

  section[data-section="bills"]
  td:last-child .small-action {

    font-size:
      9px !important;

    padding:
      5px 7px !important;
  }

}



/* RMCJJ_BILLS_ACTION_GRID_V7

   On smaller desktop screens:
   - Keep every Bills column visible
   - Keep every action visible
   - Arrange actions vertically/grid instead of overflowing
*/


@media
  (min-width: 900px)
  and (max-width: 1440px) {

  /* ------------------------------------------
     Make absolutely sure the page itself
     cannot extend past the browser.
     ------------------------------------------ */

  html,
  body,
  .admin-shell,
  .admin-main,
  .admin-main > .content,
  section[data-section="bills"] {

    max-width: 100vw !important;

    box-sizing: border-box !important;
  }


  .admin-main {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }


  section[data-section="bills"] {
    min-width: 0 !important;
    width: 100% !important;

    overflow-x: hidden !important;
  }


  section[data-section="bills"]
  .table-wrap {

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    /*
     * Auto is only a safety fallback.
     * Normally V7 fits without scrolling.
     */
    overflow-x: auto !important;

    overflow-y: visible !important;

    box-sizing: border-box !important;
  }


  section[data-section="bills"]
  table {

    width: calc(100% - 2px) !important;

    min-width: 0 !important;
    max-width: calc(100% - 2px) !important;

    table-layout: fixed !important;

    box-sizing: border-box !important;
  }


  /* ==========================================
     ACTION CELL
     ========================================== */

  section[data-section="bills"]
  td:last-child {

    width: 18% !important;

    padding:
      3px 4px 3px 3px !important;

    overflow: hidden !important;

    white-space: normal !important;

    vertical-align: top !important;

    box-sizing: border-box !important;
  }


  /* ==========================================
     V7 ACTION GRID

     Example:

     Payment    Coupon
     Void       A4
     A5         80 mm

     Nothing extends outside the screen.
     ========================================== */

  .bill-action-grid-v7 {

    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 3px !important;

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;
  }


  .bill-action-grid-v7
  > button,

  .bill-action-grid-v7
  > a {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    height: 21px !important;
    min-height: 21px !important;

    margin: 0 !important;

    padding:
      2px 3px !important;

    font-size:
      7px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    text-overflow:
      clip !important;

    box-sizing:
      border-box !important;

    border-radius:
      6px !important;
  }


  /* ------------------------------------------
     Remove width rules from old action styles.
     ------------------------------------------ */

  section[data-section="bills"]
  td:last-child
  .small-action {

    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
  }


  /* ==========================================
     Slightly redistribute columns.
     ========================================== */

  section[data-section="bills"]
  th:nth-child(1),
  section[data-section="bills"]
  td:nth-child(1) {
    width: 11% !important;
  }


  section[data-section="bills"]
  th:nth-child(2),
  section[data-section="bills"]
  td:nth-child(2) {
    width: 7% !important;
  }


  section[data-section="bills"]
  th:nth-child(3),
  section[data-section="bills"]
  td:nth-child(3) {
    width: 8% !important;
  }


  section[data-section="bills"]
  th:nth-child(4),
  section[data-section="bills"]
  td:nth-child(4) {
    width: 8% !important;
  }


  section[data-section="bills"]
  th:nth-child(5),
  section[data-section="bills"]
  td:nth-child(5) {
    width: 9% !important;
  }


  section[data-section="bills"]
  th:nth-child(6),
  section[data-section="bills"]
  td:nth-child(6) {
    width: 6% !important;
  }


  section[data-section="bills"]
  th:nth-child(7),
  section[data-section="bills"]
  td:nth-child(7) {
    width: 8% !important;
  }


  section[data-section="bills"]
  th:nth-child(8),
  section[data-section="bills"]
  td:nth-child(8) {
    width: 8% !important;
  }


  section[data-section="bills"]
  th:nth-child(9),
  section[data-section="bills"]
  td:nth-child(9) {
    width: 17% !important;
  }


  section[data-section="bills"]
  th:nth-child(10),
  section[data-section="bills"]
  td:nth-child(10) {
    width: 18% !important;
  }

}


/* ==========================================================
   LARGE SCREEN

   Restore ordinary inline buttons.
   ========================================================== */

@media (min-width: 1441px) {

  .bill-action-grid-v7 {

    display: flex !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 5px !important;

    width: 100% !important;
  }


  .bill-action-grid-v7
  > button,

  .bill-action-grid-v7
  > a {

    width: auto !important;

    flex:
      0 0 auto !important;
  }

}



/* RMCJJ_BILLS_CONTACT_ADDRESS_V8

   Merge:
       CONTACT
       SERVICE ADDRESS

   Into:
       CONTACT / SERVICE ADDRESS

       9959344601
       Purok 2 Simbahan, Qualipure

   This removes one complete table column and gives
   the Action column more room.
*/


section[data-section="bills"] table {
  width: 100% !important;
  table-layout: fixed !important;
}


/* ==========================================================
   CONTACT + ADDRESS
   ========================================================== */

section[data-section="bills"]
.bill-service-address-v8 {

  display: block !important;

  margin-top: 3px !important;

  font-size: 0.82em !important;
  font-weight: 400 !important;

  line-height: 1.18 !important;

  opacity: 0.78;

  white-space: normal !important;

  overflow-wrap: anywhere;
}


/* ==========================================================
   9-COLUMN DESKTOP LAYOUT
   ========================================================== */

@media (min-width: 1441px) {

  /* Customer */
  section[data-section="bills"]
  th:nth-child(1),
  section[data-section="bills"]
  td:nth-child(1) {
    width: 12% !important;
  }


  /* Contact / Service Address */
  section[data-section="bills"]
  th:nth-child(2),
  section[data-section="bills"]
  td:nth-child(2) {
    width: 18% !important;
  }


  /* Account / UID */
  section[data-section="bills"]
  th:nth-child(3),
  section[data-section="bills"]
  td:nth-child(3) {
    width: 9% !important;
  }


  /* Invoice / Period */
  section[data-section="bills"]
  th:nth-child(4),
  section[data-section="bills"]
  td:nth-child(4) {
    width: 9% !important;
  }


  /* Amount / Paid */
  section[data-section="bills"]
  th:nth-child(5),
  section[data-section="bills"]
  td:nth-child(5) {
    width: 10% !important;
  }


  /* Status */
  section[data-section="bills"]
  th:nth-child(6),
  section[data-section="bills"]
  td:nth-child(6) {
    width: 7% !important;
  }


  /* Due / Paid */
  section[data-section="bills"]
  th:nth-child(7),
  section[data-section="bills"]
  td:nth-child(7) {
    width: 9% !important;
  }


  /* Reference / Method */
  section[data-section="bills"]
  th:nth-child(8),
  section[data-section="bills"]
  td:nth-child(8) {
    width: 10% !important;
  }


  /* Action */
  section[data-section="bills"]
  th:nth-child(9),
  section[data-section="bills"]
  td:nth-child(9) {
    width: 16% !important;
  }

}


/* ==========================================================
   SMALL DESKTOP / 1366 SCREEN
   ========================================================== */

@media
  (min-width: 900px)
  and (max-width: 1440px) {

  /* Customer */
  section[data-section="bills"]
  th:nth-child(1),
  section[data-section="bills"]
  td:nth-child(1) {
    width: 11% !important;
  }


  /* Contact + address gets much more space */
  section[data-section="bills"]
  th:nth-child(2),
  section[data-section="bills"]
  td:nth-child(2) {
    width: 18% !important;
  }


  /* Account / UID */
  section[data-section="bills"]
  th:nth-child(3),
  section[data-section="bills"]
  td:nth-child(3) {
    width: 8% !important;
  }


  /* Invoice / Period */
  section[data-section="bills"]
  th:nth-child(4),
  section[data-section="bills"]
  td:nth-child(4) {
    width: 8% !important;
  }


  /* Amount / Paid */
  section[data-section="bills"]
  th:nth-child(5),
  section[data-section="bills"]
  td:nth-child(5) {
    width: 9% !important;
  }


  /* Status */
  section[data-section="bills"]
  th:nth-child(6),
  section[data-section="bills"]
  td:nth-child(6) {
    width: 6% !important;
  }


  /* Due / Paid */
  section[data-section="bills"]
  th:nth-child(7),
  section[data-section="bills"]
  td:nth-child(7) {
    width: 8% !important;
  }


  /* Reference / Method */
  section[data-section="bills"]
  th:nth-child(8),
  section[data-section="bills"]
  td:nth-child(8) {
    width: 8% !important;
  }


  /*
   * ACTION gets 24%.
   * This is the main benefit of removing Service Address.
   */
  section[data-section="bills"]
  th:nth-child(9),
  section[data-section="bills"]
  td:nth-child(9) {
    width: 24% !important;
  }


  section[data-section="bills"]
  td:nth-child(2) {

    white-space: normal !important;

    overflow-wrap: anywhere;
  }


  section[data-section="bills"]
  td:nth-child(9) {

    overflow: hidden !important;

    white-space: normal !important;
  }


  /* Existing V7 action wrapper */

  section[data-section="bills"]
  td:nth-child(9)
  .bill-action-grid-v7 {

    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 3px !important;

    width: 100% !important;
  }


  /*
   * Safety for action wrappers even without V7.
   */

  section[data-section="bills"]
  td:nth-child(9) > div {

    max-width: 100%;

    box-sizing: border-box;
  }


  section[data-section="bills"]
  td:nth-child(9)
  button,

  section[data-section="bills"]
  td:nth-child(9)
  a {

    max-width: 100%;

    box-sizing: border-box;
  }

}



/* RMCJJ_BILLS_SUMMARY_BAR_V9 */

.bill-summary-bar-v9 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  width: 100% !important;

  min-height: 34px !important;

  padding: 6px 12px !important;

  box-sizing: border-box !important;

  border-bottom: 1px solid #e4ebe6;
}

.bill-summary-count-v9 {
  display: inline-flex !important;
  align-items: center !important;

  flex: 0 0 auto;

  padding: 5px 9px !important;

  border-radius: 999px;

  background: #eef7f1;

  color: #0a6640;

  font-size: 11px !important;
  font-weight: 800 !important;

  line-height: 1 !important;

  white-space: nowrap !important;
}

.bill-summary-note-v9 {
  margin-left: auto !important;

  color: #66756d !important;

  font-size: 10px !important;
  font-weight: 500 !important;

  line-height: 1.25 !important;

  text-align: right;

  white-space: normal !important;
}


/* Smaller PC / 1366 */
@media
  (min-width: 900px)
  and (max-width: 1440px) {

  .bill-summary-bar-v9 {
    min-height: 32px !important;

    padding: 5px 8px !important;

    gap: 8px !important;
  }

  .bill-summary-count-v9 {
    padding: 4px 7px !important;

    font-size: 9px !important;
  }

  .bill-summary-note-v9 {
    font-size: 8px !important;
  }
}


/* If browser gets very narrow */
@media (max-width: 1050px) {

  .bill-summary-bar-v9 {
    align-items: flex-start !important;
    flex-direction: column !important;

    gap: 4px !important;
  }

  .bill-summary-note-v9 {
    margin-left: 0 !important;

    text-align: left !important;
  }
}



/* RMCJJ_FIXED_SIDEBAR_V10
   Sidebar always stays on screen.
   Main content scrolls independently.
*/

@media (min-width: 900px) {

  :root {
    --rm-sidebar-width:
      clamp(160px, 11vw, 205px);
  }


  /* Main 2-column shell */
  .admin-shell {
    display: grid !important;

    grid-template-columns:
      var(--rm-sidebar-width)
      minmax(0, 1fr) !important;

    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;

    align-items: start !important;
  }


  /* =====================================
     FIXED SIDEBAR
     ===================================== */

  .admin-shell > .sidebar,
  .sidebar {
    position: fixed !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width:
      var(--rm-sidebar-width) !important;

    min-width:
      var(--rm-sidebar-width) !important;

    max-width:
      var(--rm-sidebar-width) !important;

    height: 100vh !important;
    height: 100dvh !important;

    min-height: 100vh !important;
    min-height: 100dvh !important;

    z-index: 100 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  /* Navigation uses remaining space */
  .sidebar-nav {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: thin;
  }


  /* MikroTik card + Sign out stay at bottom */
  .sidebar-bottom {
    flex: 0 0 auto !important;

    margin-top: auto !important;

    position: relative !important;

    bottom: auto !important;
  }


  /* =====================================
     MAIN CONTENT
     ===================================== */

  .admin-main {
    grid-column: 2 !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 100vh !important;
    min-height: 100dvh !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }

}


/* =========================================
   SMALL DESKTOP: 1366 x 768
   Keep narrow sidebar from previous layout.
   ========================================= */

@media
  (min-width: 900px)
  and (max-width: 1440px) {

  :root {
    --rm-sidebar-width: 118px;
  }

}


/* =========================================
   MOBILE/TABLET
   Do not force desktop fixed sidebar.
   ========================================= */

@media (max-width: 899px) {

  .sidebar {
    position: relative !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
  }

}



/* RMCJJ_NIGHT_MODE_V11 */


/* ==========================================================
   THEME TOGGLE
   ========================================================== */

.theme-toggle-v11 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 36px;

  padding: 7px 11px;

  border: 1px solid #d6e1da;
  border-radius: 10px;

  background: #ffffff;

  color: #10291f;

  font: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  box-sizing: border-box;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}


.theme-toggle-v11:hover {
  background: #f1f7f3;
}


.theme-toggle-v11-icon {
  font-size: 15px;
  line-height: 1;
}


/* ==========================================================
   DARK COLOR SYSTEM
   ========================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  --night-page: #0b1210;
  --night-page-soft: #0e1713;

  --night-panel: #121d18;
  --night-panel-soft: #16231d;
  --night-panel-hover: #192a22;

  --night-input: #0d1813;
  --night-input-disabled: #18231e;

  --night-line: #293d34;
  --night-line-soft: #213229;

  --night-text: #e8f1ec;
  --night-muted: #9fb2a8;
  --night-faint: #7f958a;

  --night-green: #19a568;
  --night-green-soft: #133e2d;
}


/* ==========================================================
   PAGE / MAIN AREA
   ========================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.admin-body {
  background: var(--night-page) !important;
  color: var(--night-text) !important;
}


html[data-theme="dark"] .admin-shell,
html[data-theme="dark"] .admin-main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .admin-section {
  background: var(--night-page) !important;
  color: var(--night-text) !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

html[data-theme="dark"] .admin-header {
  background: #101a16 !important;

  border-color:
    var(--night-line) !important;

  color:
    var(--night-text) !important;
}


html[data-theme="dark"]
.admin-header h1,

html[data-theme="dark"]
.admin-header p {
  color:
    var(--night-text) !important;
}


html[data-theme="dark"]
.admin-header p {
  color:
    var(--night-muted) !important;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

html[data-theme="dark"] .sidebar {
  background: #071f17 !important;

  border-color: #173a2c !important;
}


html[data-theme="dark"] .nav-item {
  color: #c6dbd0 !important;
}


html[data-theme="dark"]
.nav-item:hover {
  background: #0e3829 !important;
  color: #ffffff !important;
}


html[data-theme="dark"]
.nav-item.active {
  background: #124b37 !important;
  color: #ffffff !important;
}


html[data-theme="dark"]
.router-card {
  background: #0c3024 !important;

  border-color: #286048 !important;

  color: #dceae3 !important;
}


html[data-theme="dark"]
.logout-btn {
  color: #d9e9e1 !important;
}


/* ==========================================================
   HEADINGS / LABELS / SUPPORT TEXT
   ========================================================== */

html[data-theme="dark"]
:is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  label,
  legend,
  strong
) {
  color:
    var(--night-text) !important;
}


html[data-theme="dark"]
:is(
  p,
  small,
  .security-note,
  .field-help,
  .role-help,
  .empty,
  .hint,
  .muted
) {
  color:
    var(--night-muted) !important;
}


/* ==========================================================
   PANELS / CARDS
   ========================================================== */

html[data-theme="dark"]
:is(
  .panel,
  .list-panel,
  .form-panel,
  .role-manager-panel,
  .staff-create-panel,
  .staff-list-panel,
  .section-title,
  .metric-card,
  .stat-card,
  .dashboard-card
) {
  background:
    var(--night-panel) !important;

  border-color:
    var(--night-line) !important;

  color:
    var(--night-text) !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .18);
}


html[data-theme="dark"]
.panel-head {
  border-color:
    var(--night-line) !important;
}


/* ==========================================================
   FORMS
   ========================================================== */

html[data-theme="dark"]
:is(
  input,
  select,
  textarea
) {
  background:
    var(--night-input) !important;

  color:
    var(--night-text) !important;

  border-color:
    #385247 !important;

  caret-color:
    #8fe1b8;
}


html[data-theme="dark"]
:is(
  input,
  textarea
)::placeholder {
  color:
    #71877c !important;
}


html[data-theme="dark"]
:is(
  input,
  select,
  textarea
):focus {
  border-color:
    #25a36b !important;

  outline-color:
    rgba(37, 163, 107, .22) !important;

  box-shadow:
    0 0 0 3px rgba(37, 163, 107, .13) !important;
}


html[data-theme="dark"]
:is(
  input,
  select,
  textarea
):disabled,

html[data-theme="dark"]
:is(
  input,
  select,
  textarea
)[readonly] {
  background:
    var(--night-input-disabled) !important;

  color:
    #afc1b7 !important;

  opacity: 1 !important;
}


html[data-theme="dark"] option {
  background: #101a16;
  color: var(--night-text);
}


/* ==========================================================
   TABLES
   ========================================================== */

html[data-theme="dark"]
.table-wrap {
  background:
    var(--night-panel) !important;

  border-color:
    var(--night-line) !important;
}


html[data-theme="dark"]
table {
  background:
    var(--night-panel) !important;

  color:
    var(--night-text) !important;
}


html[data-theme="dark"]
thead,

html[data-theme="dark"]
thead tr,

html[data-theme="dark"]
th {
  background:
    #16231d !important;

  color:
    #9fb8ab !important;

  border-color:
    var(--night-line) !important;
}


html[data-theme="dark"]
tbody tr {
  background:
    var(--night-panel) !important;

  color:
    var(--night-text) !important;
}


html[data-theme="dark"]
tbody tr:nth-child(even) {
  background:
    #101b16 !important;
}


html[data-theme="dark"]
tbody tr:hover {
  background:
    var(--night-panel-hover) !important;
}


html[data-theme="dark"]
td {
  color:
    var(--night-text) !important;

  border-color:
    var(--night-line-soft) !important;
}


html[data-theme="dark"]
td small {
  color:
    var(--night-muted) !important;
}


/* ==========================================================
   NORMAL / SMALL BUTTONS
   ========================================================== */

html[data-theme="dark"]
:is(
  .btn,
  .small-action,
  .shortcut-trigger,
  .theme-toggle-v11
):not(.green):not(.danger) {
  background:
    #17241e !important;

  color:
    #e4eee9 !important;

  border-color:
    #385045 !important;
}


html[data-theme="dark"]
:is(
  .btn,
  .small-action,
  .shortcut-trigger,
  .theme-toggle-v11
):not(.green):not(.danger):hover {
  background:
    #203229 !important;

  border-color:
    #4b695c !important;
}


/* Keep important green actions green */

html[data-theme="dark"]
.btn.green,

html[data-theme="dark"]
button.green {
  background:
    #0c7f4d !important;

  color:
    #ffffff !important;
}


/* ==========================================================
   AVATAR
   ========================================================== */

html[data-theme="dark"]
.avatar {
  background:
    #173b2c !important;

  color:
    #7ee3ad !important;

  border-color:
    #2a6048 !important;
}


/* ==========================================================
   FILTER / SUMMARY AREAS
   ========================================================== */

html[data-theme="dark"]
.bill-summary-bar-v9 {
  background:
    #101b16 !important;

  border-color:
    var(--night-line) !important;
}


html[data-theme="dark"]
.bill-summary-count-v9 {
  background:
    #123827 !important;

  color:
    #74dca3 !important;
}


html[data-theme="dark"]
.bill-summary-note-v9 {
  color:
    var(--night-muted) !important;
}


html[data-theme="dark"]
.count-pill {
  background:
    #163a2b !important;

  color:
    #83dfac !important;
}


/* ==========================================================
   MODALS
   ========================================================== */

html[data-theme="dark"]
:is(
  .modal-card,
  .advance-billing-dialog,
  .shortcut-dialog,
  [role="dialog"]
) {
  background:
    #111d17 !important;

  color:
    var(--night-text) !important;

  border-color:
    var(--night-line) !important;
}


html[data-theme="dark"]
:is(
  .modal-backdrop,
  .advance-billing-modal
) {
  background:
    rgba(0, 0, 0, .72) !important;
}


html[data-theme="dark"]
:is(
  .modal-head,
  .advance-billing-head
) {
  background:
    #111d17 !important;

  border-color:
    var(--night-line) !important;
}


/* ==========================================================
   SETUP / INFORMATION BANNERS
   ========================================================== */

html[data-theme="dark"]
.setup-banner {
  background:
    #183127 !important;

  border-color:
    #315c48 !important;

  color:
    #cfe4d8 !important;
}


html[data-theme="dark"]
.setup-banner a {
  color:
    #74dca3 !important;
}


/* ==========================================================
   STATUS BADGES
   ========================================================== */

/* Paid / Active */
html[data-theme="dark"]
.status.paid,

html[data-theme="dark"]
.status.active {
  background:
    #123d2a !important;

  color:
    #72dda1 !important;
}


/* Pending */
html[data-theme="dark"]
.status.pending {
  background:
    #12354a !important;

  color:
    #71c9f4 !important;
}


/* Open / Overdue */
html[data-theme="dark"]
.status.open,

html[data-theme="dark"]
.status.overdue {
  background:
    #4a2421 !important;

  color:
    #ff9c91 !important;
}


/* ==========================================================
   SCROLLBARS
   ========================================================== */

html[data-theme="dark"] {
  scrollbar-color:
    #3a5548 #101914;
}


html[data-theme="dark"]
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}


html[data-theme="dark"]
::-webkit-scrollbar-track {
  background:
    #101914;
}


html[data-theme="dark"]
::-webkit-scrollbar-thumb {
  background:
    #385247;

  border-radius:
    999px;

  border:
    2px solid #101914;
}


/* ==========================================================
   SMOOTH CHANGE
   ========================================================== */

body,
.admin-main,
.admin-header,
.panel,
table,
th,
td,
input,
select,
textarea {
  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}



/* RMCJJ_NIGHT_VOID_V12
   Make destructive actions clearly visible in Night Mode.
*/

html[data-theme="dark"]
.night-void-v12,

html[data-theme="dark"]
button.danger,

html[data-theme="dark"]
a.danger,

html[data-theme="dark"]
.small-action.danger,

html[data-theme="dark"]
.btn.danger {

  background: #4a2421 !important;

  color: #ffb2a8 !important;

  border-color: #7a4039 !important;

  box-shadow: none !important;

  opacity: 1 !important;

  -webkit-text-fill-color:
    #ffb2a8 !important;
}


html[data-theme="dark"]
.night-void-v12:hover,

html[data-theme="dark"]
button.danger:hover,

html[data-theme="dark"]
a.danger:hover,

html[data-theme="dark"]
.small-action.danger:hover,

html[data-theme="dark"]
.btn.danger:hover {

  background: #663029 !important;

  color: #ffffff !important;

  border-color: #a2544a !important;

  -webkit-text-fill-color:
    #ffffff !important;
}


html[data-theme="dark"]
.night-void-v12:focus-visible {

  outline:
    2px solid #e8786b !important;

  outline-offset: 2px;
}



/* RMCJJ_NIGHT_COMPLETE_V13
   Complete admin-console night mode.
*/


/* ==========================================================
   CORE DARK SURFACES
   ========================================================== */

html[data-theme="dark"] {

  --v13-bg: #09110e;
  --v13-panel: #101b16;
  --v13-panel-2: #14231c;
  --v13-panel-3: #182a21;

  --v13-border: #29463a;
  --v13-border-soft: #20372e;

  --v13-text: #edf5f0;
  --v13-muted: #9db3a7;

  --v13-green: #15945d;
  --v13-green-soft: #123a29;
}


/*
 * Automatic class added by V13 JavaScript
 * to old white panels.
 */

html[data-theme="dark"]
.night-surface-v13 {

  background:
    var(--v13-panel) !important;

  color:
    var(--v13-text) !important;

  border-color:
    var(--v13-border) !important;

  box-shadow:
    none !important;
}


/* ==========================================================
   ADMIN SECTIONS
   ========================================================== */

html[data-theme="dark"]
.admin-section {

  background:
    transparent !important;

  color:
    var(--v13-text) !important;
}


html[data-theme="dark"]
.section-title {

  background:
    var(--v13-panel) !important;

  color:
    var(--v13-text) !important;

  border-color:
    var(--v13-border) !important;
}


html[data-theme="dark"]
.section-title h2 {

  color:
    var(--v13-text) !important;
}


html[data-theme="dark"]
.section-title p {

  color:
    var(--v13-muted) !important;
}


/* ==========================================================
   DASHBOARD
   ========================================================== */

html[data-theme="dark"]
[data-section="overview"]
:is(
  article,
  .card,
  .stat-card,
  .metric-card,
  .dashboard-card,
  .chart-card,
  .overview-card,
  .report-card,
  .summary-card
) {

  background:
    var(--v13-panel) !important;

  color:
    var(--v13-text) !important;

  border-color:
    var(--v13-border) !important;
}


html[data-theme="dark"]
[data-section="overview"]
:is(
  article,
  .card,
  .stat-card,
  .metric-card,
  .dashboard-card,
  .chart-card,
  .overview-card,
  .report-card,
  .summary-card
)
:is(
  h2,
  h3,
  h4,
  strong
) {

  color:
    var(--v13-text) !important;
}


html[data-theme="dark"]
[data-section="overview"]
:is(
  article,
  .card,
  .stat-card,
  .metric-card,
  .dashboard-card,
  .chart-card,
  .overview-card,
  .report-card,
  .summary-card
)
:is(
  p,
  small,
  span
) {

  color:
    var(--v13-muted);
}


/*
 * Keep status / numbers readable.
 */

html[data-theme="dark"]
[data-section="overview"]
:is(
  .stat-value,
  .metric-value,
  .dashboard-number,
  .summary-value
) {

  color:
    #f4faf6 !important;
}


/* ==========================================================
   TAB BARS
   Dashboard / Packages / Integrations / Finance etc.
   ========================================================== */

html[data-theme="dark"]
:is(
  .dashboard-tabs,
  .tabs,
  .tab-bar,
  .tab-list,
  .section-tabs,
  .integration-tabs,
  .integration-nav,
  .package-tabs,
  [role="tablist"]
) {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border) !important;
}


html[data-theme="dark"]
:is(
  .dashboard-tabs,
  .tabs,
  .tab-bar,
  .tab-list,
  .section-tabs,
  .integration-tabs,
  .integration-nav,
  .package-tabs,
  [role="tablist"]
)
:is(
  button,
  a,
  [role="tab"]
) {

  background:
    var(--v13-panel) !important;

  color:
    #c7d9cf !important;

  border-color:
    transparent !important;
}


html[data-theme="dark"]
:is(
  .dashboard-tabs,
  .tabs,
  .tab-bar,
  .tab-list,
  .section-tabs,
  .integration-tabs,
  .integration-nav,
  .package-tabs,
  [role="tablist"]
)
:is(
  button.active,
  a.active,
  [aria-selected="true"],
  [role="tab"].active
) {

  background:
    var(--v13-green-soft) !important;

  color:
    #80e2ae !important;

  border-color:
    #2d6a4d !important;
}


/* ==========================================================
   PANELS
   ========================================================== */

html[data-theme="dark"]
:is(
  .panel,
  .form-panel,
  .list-panel,
  .role-manager-panel,
  .staff-create-panel,
  .staff-list-panel
) {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border) !important;

  color:
    var(--v13-text) !important;
}


html[data-theme="dark"]
.panel-head {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border) !important;
}


html[data-theme="dark"]
.panel-head h3 {

  color:
    var(--v13-text) !important;
}


html[data-theme="dark"]
.panel-head p {

  color:
    var(--v13-muted) !important;
}


/* ==========================================================
   TABLE AREA / SEARCH HEADERS
   ========================================================== */

html[data-theme="dark"]
.table-wrap,

html[data-theme="dark"]
.table-toolbar,

html[data-theme="dark"]
.table-controls,

html[data-theme="dark"]
.table-search,

html[data-theme="dark"]
.list-toolbar {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border) !important;
}


/*
 * Catch white table header/tool rows.
 */

html[data-theme="dark"]
.admin-main table {

  background:
    var(--v13-panel) !important;
}


html[data-theme="dark"]
.admin-main thead,

html[data-theme="dark"]
.admin-main thead tr,

html[data-theme="dark"]
.admin-main th {

  background:
    #14231c !important;

  color:
    #a9beb3 !important;

  border-color:
    var(--v13-border) !important;
}


html[data-theme="dark"]
.admin-main tbody tr {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border-soft) !important;
}


html[data-theme="dark"]
.admin-main tbody tr:nth-child(even) {

  background:
    #0d1813 !important;
}


html[data-theme="dark"]
.admin-main tbody tr:hover {

  background:
    #17291f !important;
}


/* ==========================================================
   INPUTS
   ========================================================== */

html[data-theme="dark"]
.admin-main
:is(
  input,
  select,
  textarea
) {

  background:
    #0b1712 !important;

  color:
    var(--v13-text) !important;

  border-color:
    #355748 !important;

  -webkit-text-fill-color:
    var(--v13-text);
}


html[data-theme="dark"]
.admin-main
:is(
  input,
  select,
  textarea
)::placeholder {

  color:
    #71897d !important;

  opacity:
    1 !important;
}


html[data-theme="dark"]
.admin-main
:is(
  input,
  select,
  textarea
):disabled,

html[data-theme="dark"]
.admin-main
:is(
  input,
  select,
  textarea
)[readonly] {

  background:
    #17241e !important;

  color:
    #a4b8ad !important;

  border-color:
    #324c40 !important;

  -webkit-text-fill-color:
    #a4b8ad !important;

  opacity:
    1 !important;
}


/* ==========================================================
   PACKAGE PAGE
   ========================================================== */

html[data-theme="dark"]
[data-section="packages"]
:is(
  .toolbar,
  .package-toolbar,
  .package-header,
  .package-controls,
  .catalog-toolbar
) {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border) !important;
}


/*
 * "No image" boxes.
 */

html[data-theme="dark"]
[data-section="packages"]
:is(
  .image-placeholder,
  .package-image-placeholder,
  .no-image,
  .package-image
) {

  background:
    #16241e !important;

  color:
    #899f94 !important;

  border-color:
    #355044 !important;
}


/* ==========================================================
   SUPPORT / NETWORK
   ========================================================== */

html[data-theme="dark"]
[data-section="support"]
:is(
  .toolbar,
  .search-bar,
  .search-row,
  .list-head
),

html[data-theme="dark"]
[data-section="network"]
:is(
  .toolbar,
  .search-bar,
  .search-row,
  .list-head
) {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border) !important;
}


/* ==========================================================
   INTEGRATIONS
   ========================================================== */

html[data-theme="dark"]
[data-section="integrations"]
:is(
  .tabs,
  .tab-bar,
  .provider-tabs,
  .integration-tabs,
  nav
) {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border) !important;
}


html[data-theme="dark"]
[data-section="integrations"]
:is(
  .integration-card,
  .provider-card,
  .integration-panel
) {

  background:
    var(--v13-panel) !important;

  border-color:
    var(--v13-border) !important;
}


/* ==========================================================
   STAFF & ROLE ACCESS
   ========================================================== */

html[data-theme="dark"]
.role-active-toggle,

html[data-theme="dark"]
.role-check,

html[data-theme="dark"]
.role-special {

  background:
    #16241e !important;

  color:
    var(--v13-text) !important;

  border-color:
    #355044 !important;
}


html[data-theme="dark"]
.role-check span,

html[data-theme="dark"]
.role-special span,

html[data-theme="dark"]
.role-active-toggle {

  color:
    #dce9e2 !important;
}


html[data-theme="dark"]
.role-check:has(input:disabled),

html[data-theme="dark"]
.role-special:has(input:disabled),

html[data-theme="dark"]
.role-active-toggle:has(input:disabled) {

  background:
    #17211d !important;

  color:
    #8ea298 !important;

  border-color:
    #30453b !important;

  opacity:
    .82 !important;
}


html[data-theme="dark"]
.role-check input:disabled + span,

html[data-theme="dark"]
.role-special input:disabled + span {

  color:
    #8ea298 !important;
}


/*
 * Administrator locked notice.
 */

html[data-theme="dark"]
:is(
  .role-lock-note,
  #role-lock-note
) {

  background:
    #14241d !important;

  color:
    #c8d9d0 !important;

  border-color:
    #355044 !important;
}


/* ==========================================================
   BUTTONS THAT ARE NOT GREEN OR DANGER
   ========================================================== */

html[data-theme="dark"]
.admin-main
:is(
  button,
  .btn,
  .small-action
):not(.green):not(.danger):not(.night-void-v12) {

  background:
    #15241d !important;

  color:
    #e5efe9 !important;

  border-color:
    #355448 !important;

  -webkit-text-fill-color:
    #e5efe9 !important;
}


html[data-theme="dark"]
.admin-main
:is(
  button,
  .btn,
  .small-action
):not(.green):not(.danger):not(.night-void-v12):hover {

  background:
    #20352a !important;

  border-color:
    #4c725f !important;
}


/* Keep green buttons */

html[data-theme="dark"]
.admin-main
:is(
  button.green,
  .btn.green
) {

  background:
    #07834d !important;

  color:
    #ffffff !important;

  border-color:
    #0b9458 !important;

  -webkit-text-fill-color:
    #ffffff !important;
}


/* Keep destructive buttons red */

html[data-theme="dark"]
.admin-main
:is(
  button.danger,
  .btn.danger,
  .night-void-v12
) {

  background:
    #512521 !important;

  color:
    #ffb4aa !important;

  border-color:
    #84443c !important;

  -webkit-text-fill-color:
    #ffb4aa !important;
}


/* ==========================================================
   CHECKBOXES
   ========================================================== */

html[data-theme="dark"]
.admin-main
input[type="checkbox"] {

  accent-color:
    #15945d;
}


/* ==========================================================
   IMAGE PLACEHOLDERS / EMPTY CARDS
   ========================================================== */

html[data-theme="dark"]
.admin-main
:is(
  .empty-card,
  .placeholder,
  .image-placeholder
) {

  background:
    #16231d !important;

  color:
    #8da398 !important;

  border-color:
    #365145 !important;
}


/* ==========================================================
   GENERIC TEXT INSIDE DARK PANELS
   ========================================================== */

html[data-theme="dark"]
.admin-main
.night-surface-v13
:is(
  h1,
  h2,
  h3,
  h4,
  h5,
  strong
) {

  color:
    var(--v13-text) !important;
}


html[data-theme="dark"]
.admin-main
.night-surface-v13
:is(
  p,
  small
) {

  color:
    var(--v13-muted) !important;
}



/* RMCJJ_SUPPORT_LAYOUT_V14
   Clean and responsive Support ticket form layout.
*/

#support-form.support-grid-v14 {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  grid-template-areas:
    "customer type priority assigned"
    "subject subject description description"
    "visit visit actions actions" !important;

  column-gap: 14px !important;
  row-gap: 18px !important;

  align-items: start !important;

  width: 100% !important;
}


/* Grid positions */

#support-form .support-customer-v14 {
  grid-area: customer !important;
}

#support-form .support-type-v14 {
  grid-area: type !important;
}

#support-form .support-priority-v14 {
  grid-area: priority !important;
}

#support-form .support-assigned-v14 {
  grid-area: assigned !important;
}

#support-form .support-subject-v14 {
  grid-area: subject !important;
}

#support-form .support-description-v14 {
  grid-area: description !important;
}

#support-form .support-visit-v14 {
  grid-area: visit !important;
}

#support-form .support-actions-v14 {
  grid-area: actions !important;
}


/* Every field uses available grid width */

#support-form.support-grid-v14
:is(
  label,
  .support-customer-v14,
  .support-type-v14,
  .support-priority-v14,
  .support-assigned-v14,
  .support-subject-v14,
  .support-description-v14,
  .support-visit-v14
) {
  min-width: 0 !important;
  width: 100% !important;
}


/* Consistent controls */

#support-form.support-grid-v14
:is(
  input,
  select,
  textarea
) {
  width: 100% !important;
  max-width: none !important;

  box-sizing: border-box !important;
}


/*
 * Customer contains Search + Customer selection.
 * Keep them properly stacked.
 */

#support-form .support-customer-v14
:is(
  input,
  select
) {
  display: block !important;

  width: 100% !important;
}


#support-form .support-customer-v14
select {
  margin-top: 7px !important;
}


/* Subject */

#support-form .support-subject-v14 input {
  min-height: 40px !important;
}


/* Description */

#support-form .support-description-v14 textarea {
  min-height: 76px !important;

  resize: vertical !important;
}


/* Estimated visit */

#support-form .support-visit-v14 {
  align-self: end !important;
}


/* Create ticket alignment */

#support-form .support-actions-v14 {
  display: flex !important;

  align-items: flex-end !important;
  justify-content: flex-start !important;

  min-height: 100% !important;

  padding: 0 !important;
}


#support-form .support-actions-v14
button {
  min-height: 40px !important;

  padding-left: 18px !important;
  padding-right: 18px !important;

  white-space: nowrap !important;
}


/* ==========================================================
   STANDARD DESKTOP / SMALLER MONITOR
   1366 width etc.
   ========================================================== */

@media
  (min-width: 901px)
  and (max-width: 1450px) {

  #support-form.support-grid-v14 {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-areas:
      "customer type"
      "priority assigned"
      "subject subject"
      "description description"
      "visit actions" !important;

    column-gap: 12px !important;
    row-gap: 14px !important;
  }


  #support-form
  .support-description-v14
  textarea {
    min-height: 72px !important;
  }

}


/* ==========================================================
   TABLET / NARROW WINDOW
   ========================================================== */

@media (max-width: 900px) {

  #support-form.support-grid-v14 {

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-areas:
      "customer"
      "type"
      "priority"
      "assigned"
      "subject"
      "description"
      "visit"
      "actions" !important;

    gap: 12px !important;
  }


  #support-form
  .support-actions-v14 {

    min-height: 0 !important;
  }


  #support-form
  .support-actions-v14
  button {

    width: 100% !important;
  }

}



/* RMCJJ_NIGHT_SHORTCUT_V15
   Fix Shortcut button/icon colors in Night Mode.
*/


/* Main shortcut button */

html[data-theme="dark"]
.admin-header-actions
.shortcut-trigger {

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  min-height: 36px !important;

  padding:
    6px 11px !important;

  background:
    #13231c !important;

  color:
    #edf5f0 !important;

  border:
    1px solid #355448 !important;

  border-radius:
    10px !important;

  box-shadow:
    none !important;

  -webkit-text-fill-color:
    #edf5f0 !important;
}


/* Shortcut icon */

html[data-theme="dark"]
.admin-header-actions
.shortcut-trigger > span {

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;

  flex:
    0 0 22px !important;

  margin: 0 !important;

  padding: 0 !important;

  background:
    #0c7f4d !important;

  color:
    #ffffff !important;

  border:
    1px solid #169761 !important;

  border-radius:
    6px !important;

  font-family:
    "Segoe UI Symbol",
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size:
    14px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  -webkit-text-fill-color:
    #ffffff !important;

  opacity:
    1 !important;
}


/* Hover */

html[data-theme="dark"]
.admin-header-actions
.shortcut-trigger:hover {

  background:
    #193027 !important;

  border-color:
    #47705d !important;

  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;
}


html[data-theme="dark"]
.admin-header-actions
.shortcut-trigger:hover > span {

  background:
    #11955c !important;

  border-color:
    #23b674 !important;

  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;
}


/* Keyboard focus */

html[data-theme="dark"]
.admin-header-actions
.shortcut-trigger:focus-visible {

  outline:
    2px solid #39bd7e !important;

  outline-offset:
    2px !important;
}



/* RMCJJ_PUBLIC_PLANS_V17 */


/* ==========================================================
   SHARED PUBLIC SECTIONS
   ========================================================== */

.public-plans-section,
.public-promo-section,
.public-benefits-section {

  width: 100%;
  max-width: 1180px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


.public-plans-section {

  padding:
    76px 0 70px;

  border-top:
    1px solid #d9dfda;
}


.public-section-heading {

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 30px;
}


.public-section-heading h2 {

  margin:
    8px 0 8px;

  max-width: 720px;

  color: #0d2119;

  font-size:
    clamp(32px, 4vw, 52px);

  line-height: .98;

  letter-spacing: -.045em;
}


.public-section-heading p {

  max-width: 650px;

  margin: 0;

  color: #617069;

  font-size: 15px;

  line-height: 1.55;
}


.plans-benefit-badge {

  flex: 0 0 auto;

  display: flex;
  flex-direction: column;

  gap: 2px;

  padding:
    12px 16px;

  border:
    1px solid #dce5df;

  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 12px 30px
    rgba(20, 55, 39, .05);
}


.plans-benefit-badge strong {

  color: #0a7b48;

  font-size: 13px;
}


.plans-benefit-badge span {

  color: #78857e;

  font-size: 11px;
}


/* ==========================================================
   PLAN GRID
   ========================================================== */

.public-plan-grid {

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(235px, 1fr)
    );

  gap: 16px;
}


.public-plan-card {

  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 360px;

  padding: 22px;

  overflow: hidden;

  border:
    1px solid #dbe3de;

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdfb 100%
    );

  box-shadow:
    0 18px 45px
    rgba(21, 58, 41, .06);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.public-plan-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 5px;

  background:
    linear-gradient(
      90deg,
      #ef641d,
      #ffaf24
    );
}


.public-plan-card:hover {

  transform:
    translateY(-4px);

  border-color:
    #c6d8cd;

  box-shadow:
    0 24px 55px
    rgba(21, 58, 41, .11);
}


.public-plan-category {

  display: inline-flex;

  width: fit-content;

  margin-bottom: 15px;

  padding:
    5px 8px;

  border-radius: 999px;

  background: #edf7f1;

  color: #087445;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .09em;

  text-transform: uppercase;
}


.public-plan-card h3 {

  margin: 0;

  color: #10241b;

  font-size: 21px;

  line-height: 1.1;
}


.public-plan-speed {

  margin-top: 7px;

  color: #ec641e;

  font-size: 16px;
  font-weight: 800;
}


.public-plan-price {

  display: flex;
  align-items: baseline;

  gap: 2px;

  margin:
    24px 0 10px;

  color: #091a13;
}


.public-plan-price .peso {

  font-size: 18px;
  font-weight: 800;
}


.public-plan-price strong {

  font-size:
    clamp(34px, 4vw, 46px);

  line-height: 1;

  letter-spacing: -.045em;
}


.public-plan-price > span:last-child {

  margin-left: 3px;

  color: #77857e;

  font-size: 11px;
  font-weight: 600;
}


.public-plan-remark {

  min-height: 42px;

  margin:
    0 0 14px;

  color: #64736b;

  font-size: 12px;

  line-height: 1.45;
}


.public-plan-features {

  display: grid;

  gap: 6px;

  margin-bottom: 20px;

  color: #385348;

  font-size: 11px;
}


.public-plan-button {

  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 40px;

  margin-top: auto;

  padding: 8px 12px;

  border:
    1px solid #d8e4dc;

  border-radius: 11px;

  background: #f4f8f5;

  color: #153c2b;

  font-size: 11px;
  font-weight: 800;

  text-decoration: none;
}


.public-plan-button:hover {

  background: #0c7f4d;

  border-color: #0c7f4d;

  color: #ffffff;
}


.public-plan-footnote {

  margin:
    20px 0 0;

  color: #7c8982;

  font-size: 10px;

  text-align: center;
}


.public-plan-empty {

  padding: 30px;

  border:
    1px dashed #ccd9d1;

  border-radius: 16px;

  color: #66756d;

  text-align: center;
}


/* ==========================================================
   PROMO
   ========================================================== */

.public-promo-section {

  display: grid;

  grid-template-columns:
    minmax(280px, .85fr)
    minmax(360px, 1.15fr);

  gap: 42px;

  align-items: center;

  padding:
    70px 0;

  border-top:
    1px solid #d9dfda;
}


.promo-media {

  position: relative;

  overflow: hidden;

  border-radius: 24px;

  background: #082c64;

  box-shadow:
    0 24px 55px
    rgba(11, 34, 67, .16);
}


.promo-media img {

  display: block;

  width: 100%;
  height: auto;

  max-height: 650px;

  object-fit: cover;

  object-position: top center;
}


.promo-ended-badge {

  position: absolute;

  top: 16px;
  right: 16px;

  padding:
    7px 11px;

  border-radius: 999px;

  background:
    rgba(9, 17, 14, .88);

  color: #ffffff;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;

  backdrop-filter:
    blur(10px);
}


.promo-content h2 {

  margin:
    10px 0 14px;

  color: #10241b;

  font-size:
    clamp(34px, 4vw, 52px);

  line-height: 1;

  letter-spacing: -.045em;
}


.promo-content > p {

  color: #64736b;

  line-height: 1.55;
}


.promo-status-ended {

  display: inline-flex;

  margin:
    18px 0 16px;

  padding:
    6px 10px;

  border:
    1px solid #efc2b0;

  border-radius: 999px;

  background: #fff1eb;

  color: #b94818;

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
}


.promo-content h3 {

  margin:
    0 0 6px;

  color: #192c23;

  font-size: 20px;
}


.promo-highlights {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 22px;
}


.promo-highlights > div {

  display: flex;
  flex-direction: column;

  gap: 2px;

  padding: 14px;

  border:
    1px solid #dce5df;

  border-radius: 13px;

  background: #ffffff;
}


.promo-highlights strong {

  color: #0a7b48;

  font-size: 13px;
}


.promo-highlights span {

  color: #7d8b83;

  font-size: 10px;
}


.promo-disclaimer {

  margin-top: 16px !important;

  color: #89948e !important;

  font-size: 9px !important;
}


/* ==========================================================
   BENEFITS
   ========================================================== */

.public-benefits-section {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  padding:
    0 0 70px;
}


.public-benefits-section > div {

  padding: 18px;

  border:
    1px solid #dce5df;

  border-radius: 16px;

  background: #ffffff;
}


.benefit-icon {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  margin-bottom: 12px;

  border-radius: 11px;

  background: #edf8f1;

  color: #088450;

  font-size: 20px;
  font-weight: 900;
}


.public-benefits-section strong {

  display: block;

  color: #173126;

  font-size: 13px;
}


.public-benefits-section p {

  margin:
    5px 0 0;

  color: #75837c;

  font-size: 10px;

  line-height: 1.45;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

  .public-plans-section,
  .public-promo-section,
  .public-benefits-section {

    padding-left: 20px;
    padding-right: 20px;
  }


  .public-section-heading {

    align-items: flex-start;

    flex-direction: column;
  }


  .public-promo-section {

    grid-template-columns:
      minmax(0, 1fr);

    gap: 28px;
  }


  .promo-media {

    max-width: 540px;

    margin:
      0 auto;
  }


  .public-benefits-section {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 560px) {

  .public-plan-grid {

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


  .public-benefits-section {

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


  .promo-highlights {

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

}


/* RMCJJ_REMOVE_PROMO_PICTURE_V1 */
.public-promo-section {
  grid-template-columns: minmax(0, 1fr) !important;
}

.public-promo-section .promo-media {
  display: none !important;
}

.public-promo-section .promo-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}


/* PROMO TEXT ONLY */
.public-promo-section {
  grid-template-columns: minmax(0, 1fr) !important;
}

.public-promo-section .promo-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* RMCJJ NIGHT MODE DASHBOARD HIGHLIGHTS */
body.dark-mode .analytics-highlights > span {
  background: #12352b !important;
  border: 1px solid #285749;
  color: #a9c6bc !important;
}

body.dark-mode .analytics-highlights > span:nth-child(2) {
  background: #27213a !important;
  border-color: #4b4268;
  color: #c9c1df !important;
}

body.dark-mode .analytics-highlights > span strong {
  color: #5ee0b5 !important;
}

body.dark-mode .analytics-highlights > span:nth-child(2) strong {
  color: #c4a7ff !important;
}

/* RMCJJ_ROLE_EDITOR_FOOTER_V3 */
.role-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 14px;
}

.role-editor-footer .role-help {
  flex: 1;
  margin: 0;
}

.role-editor-footer .role-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.role-editor-footer .role-editor-actions .btn {
  min-width: 120px;
  margin: 0;
}

@media (max-width: 800px) {
  .role-editor-footer {
    flex-wrap: wrap;
  }
}


/* RMCJJ_ROLE_FOOTER_CLEAR_BORDER_V5 */
.role-editor-footer {
  padding-bottom: 18px;
}

.role-editor-footer .role-editor-actions {
  margin: 0;
  padding: 0;
}

.role-editor-footer .role-editor-actions .btn {
  position: relative;
  top: 0;
  margin: 0;
}


/* RMCJJ_ROLE_FOOTER_SAFE_EDGES_V6 */
.role-editor-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 20px 18px;
  margin: 0;
  gap: 18px;
}

.role-editor-footer .role-help {
  min-width: 0;
  margin: 0;
}

.role-editor-footer .role-editor-actions {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}


/* RMCJJ_NIGHT_DASHBOARD_HIGHLIGHTS_V1 */
html[data-theme="dark"] body.admin-body .analytics-highlights span {
  background: #132820 !important;
  border: 1px solid #2c5948 !important;
  color: #b8d8ca !important;
}

html[data-theme="dark"] body.admin-body .analytics-highlights span strong {
  color: #ffffff !important;
  opacity: 1 !important;
}


/* RMCJJ_NIGHT_SHORTCUT_MODAL_V16 */

/* Main Shortcut modal */
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-dialog {
  background: #0d2018 !important;
  color: #f3f8f5 !important;
  border: 1px solid #29483b !important;
}

/* Shortcut header */
html[data-theme="dark"] body.admin-body #shortcut-modal .payment-dialog-head {
  background: #10271d !important;
  border-bottom: 1px solid #29483b !important;
  color: #f3f8f5 !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .payment-dialog-head h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .eyebrow-text {
  color: #8eb3a2 !important;
}

/* Close button */
html[data-theme="dark"] body.admin-body #shortcut-modal .modal-close {
  background: #173329 !important;
  color: #dcebe4 !important;
  border-color: #29483b !important;
}

/* Top controls area */
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-controls {
  background: #10271d !important;
  border-bottom-color: #29483b !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-controls label {
  color: #9db5aa !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-controls input,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-controls select {
  background: #0a1c15 !important;
  color: #f3f8f5 !important;
  border-color: #315344 !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-controls input::placeholder {
  color: #789386 !important;
}

/* Status message */
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-status {
  background: #0d2018 !important;
  color: #829d90 !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-status.success {
  background: #123326 !important;
  color: #7fe0ae !important;
  border-bottom-color: #29483b !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-status.error {
  background: #361a19 !important;
  color: #ffaaa3 !important;
  border-bottom-color: #63302d !important;
}

/* LEFT PROFILE COLUMN - removes the large white block */
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-profile {
  background: #10271d !important;
  color: #f3f8f5 !important;
  border-right-color: #29483b !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-profile h3,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-profile dd {
  color: #ffffff !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-profile > p,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-profile dt {
  color: #8fa99d !important;
}

/* Main workspace */
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-workspace,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-mode-panel,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-unpaid-column,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-history-column {
  background: #0d2018 !important;
  color: #f3f8f5 !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-unpaid-column {
  border-right-color: #29483b !important;
}

/* Headings */
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-panel-heading h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-panel-heading p {
  color: #8fa99d !important;
}

/* Customer/detail cards */
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-detail-card,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-bill-card {
  background: #11291f !important;
  color: #f3f8f5 !important;
  border-color: #315344 !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-detail-card strong,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-bill-card h4,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-bill-meta strong {
  color: #ffffff !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-detail-card small,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-bill-card p,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-bill-meta span {
  color: #91aa9e !important;
}

/* History table */
html[data-theme="dark"] body.admin-body #shortcut-modal .table-wrap,
html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-history {
  background: #0f241b !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-history th {
  background: #122a20 !important;
  color: #8fd1b2 !important;
  border-color: #29483b !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .shortcut-history td {
  background: #0d2018 !important;
  color: #eef7f2 !important;
  border-color: #29483b !important;
}

/* Ping panel */
html[data-theme="dark"] body.admin-body #shortcut-modal .ping-card {
  background: #11291f !important;
  color: #f3f8f5 !important;
  border-color: #315344 !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .ping-card h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] body.admin-body #shortcut-modal .ping-card p {
  color: #91aa9e !important;
}


/* RMCJJ_NIGHT_PAYMENT_PACKAGE_MODAL_V1 */

/* Main modal */
html[data-theme="dark"] body.admin-body .payment-dialog {
  background: #0d2018 !important;
  color: #f3f8f5 !important;
  border: 1px solid #29483b !important;
}

/* TOP HEADER - remove white area */
html[data-theme="dark"] body.admin-body .payment-dialog-head {
  background: #10271d !important;
  color: #f3f8f5 !important;
  border-bottom: 1px solid #29483b !important;
}

html[data-theme="dark"] body.admin-body .payment-dialog-head h2,
html[data-theme="dark"] body.admin-body .payment-dialog-head h3 {
  color: #ffffff !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body.admin-body .payment-dialog-head .eyebrow-text {
  color: #8eb3a2 !important;
}

/* Close X */
html[data-theme="dark"] body.admin-body .payment-dialog-head .modal-close {
  background: #173329 !important;
  color: #dcebe4 !important;
  border-color: #315344 !important;
}

/* Modal body labels/text */
html[data-theme="dark"] body.admin-body .payment-dialog label {
  color: #d9e8e1 !important;
}

html[data-theme="dark"] body.admin-body .payment-dialog small,
html[data-theme="dark"] body.admin-body .payment-dialog .payment-dialog-note {
  color: #91aa9e !important;
}

/* Inputs */
html[data-theme="dark"] body.admin-body .payment-dialog input,
html[data-theme="dark"] body.admin-body .payment-dialog select,
html[data-theme="dark"] body.admin-body .payment-dialog textarea {
  background: #0a1c15 !important;
  color: #f3f8f5 !important;
  border-color: #315344 !important;
}

html[data-theme="dark"] body.admin-body .payment-dialog input::placeholder,
html[data-theme="dark"] body.admin-body .payment-dialog textarea::placeholder {
  color: #748d81 !important;
}

/* BOTTOM FOOTER - remove white area */
html[data-theme="dark"] body.admin-body .payment-dialog-actions {
  background: #10271d !important;
  border-top: 1px solid #29483b !important;
}

/* Some modal layouts put buttons in a footer/form-actions container */
html[data-theme="dark"] body.admin-body .payment-dialog > .form-actions,
html[data-theme="dark"] body.admin-body .payment-dialog form > .form-actions {
  background: #10271d !important;
  border-top-color: #29483b !important;
}

/* Keep Cancel readable */
html[data-theme="dark"] body.admin-body .payment-dialog-actions .btn:not(.green),
html[data-theme="dark"] body.admin-body .payment-dialog .form-actions .btn:not(.green) {
  background: #173329 !important;
  color: #ffffff !important;
  border-color: #315344 !important;
}


/* RMCJJ_SIDEBAR_BOTTOM_SPACING_V1 */
.sidebar-bottom {
  margin-top: 10px;
}


/* RMCJJ_SIDEBAR_LOGS_GATEWAY_GAP_V2 */
body.admin-body .sidebar-nav {
  margin-bottom: 12px !important;
}

body.admin-body .sidebar-bottom {
  margin-top: 0 !important;
}


/* RMCJJ_PUBLIC_READABILITY_V1
   Restore strong readable colors on customer payment portal only.
*/

body.public-body .hero-copy,
body.public-body .payment-card,
body.public-body .how-section,
body.public-body .public-footer {
  opacity: 1 !important;
  filter: none !important;
}

/* Main headings */
body.public-body .hero-copy h1,
body.public-body .payment-card h2,
body.public-body .how-section h2,
body.public-body .step h3 {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Orange RM-CJJ accents */
body.public-body .hero-copy h1 em,
body.public-body .eyebrow,
body.public-body .step > span {
  color: #E56A24 !important;
  -webkit-text-fill-color: #E56A24 !important;
  opacity: 1 !important;
}

/* Normal descriptive text */
body.public-body .hero-copy > p,
body.public-body .payment-card > p,
body.public-body .step p,
body.public-body .secure-note,
body.public-body .card-kicker {
  color: #5E5E5E !important;
  -webkit-text-fill-color: #5E5E5E !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Form labels */
body.public-body .field-label {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
}

/* Keep payment card itself fully visible */
body.public-body .payment-card {
  background: #FFFFFF !important;
  opacity: 1 !important;
}


/* RMCJJ_COMPACT_ROLE_SIDEBAR_V1
   Keep permitted menu items compact even when a role sees only a few menus.
*/
@media (min-width: 621px) {
  body.admin-body .sidebar-nav {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    justify-content: stretch !important;
    flex: 0 1 auto !important;
    gap: 3px !important;
    margin-top: 28px !important;
  }

  body.admin-body .sidebar .nav-item {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 9px 13px !important;
  }

  body.admin-body .sidebar-bottom {
    margin-top: auto !important;
  }
}


/* RMCJJ_NEW_CUSTOMER_BILLING_ALIGN_V1 */

/* Keep all New Customer grid fields aligned from the top */
#new-subscriber-form{
  align-items:start !important;
}

#new-subscriber-form > label{
  align-self:start !important;
  width:100%;
}

/* Same control height for inputs and selects */
#new-subscriber-form input,
#new-subscriber-form select{
  min-height:42px !important;
}

/* Billing due-day note stays below without moving other fields */
#new-subscriber-form label:has(input[name="dueDay"]) small{
  display:block;
  margin-top:6px;
  line-height:1.2;
}

/* RMCJJ_NEW_CUSTOMER_BILLING_ALIGN_V1_END */

/* RMCJJ_SIDEBAR_TOGGLE_V1 */

@media (min-width: 621px) {

  .admin-shell.sidebar-hidden-v1 {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }

  .admin-shell.sidebar-hidden-v1 > .sidebar {
    display: none !important;
  }

  .sidebar-toggle-v1 {
    white-space: nowrap;
  }
}

/* Keep existing mobile navigation behavior unchanged. */
@media (max-width: 620px) {
  .sidebar-toggle-v1 {
    display: none !important;
  }
}


/* RMCJJ_SIDEBAR_TOGGLE_BUTTON_FIX_V2 */

.sidebar-toggle-v1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 38px;
  padding: 0 13px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: transparent;
  color: var(--ink);

  font: inherit;
  font-size: 11px;
  font-weight: 800;

  white-space: nowrap;
  cursor: pointer;
}

.sidebar-toggle-v1:hover {
  background: var(--green-soft);
  color: var(--green);
}

.sidebar-toggle-icon-v1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;

  font-size: 15px;
  line-height: 1;
}

.sidebar-toggle-label-v1 {
  display: inline !important;

  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;

  font-size: 11px !important;
  line-height: 1 !important;
}

.admin-header-actions {
  gap: 8px;
}



/* RMCJJ_FINANCE_METHOD_SUMMARY_UI_V1 */
.finance-method-breakdown {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.finance-method-breakdown span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: var(--muted);
}

.finance-method-breakdown strong {
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
}


/* RMCJJ_CLIENT_LIVE_CSS_V1 */

.shortcut-live-network {
  margin: 0 20px 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.shortcut-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.shortcut-live-head h3,
.shortcut-live-head p {
  margin: 0;
}

.shortcut-live-head h3 {
  margin-top: 4px;
  font-size: 14px;
}

.shortcut-live-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--line);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.shortcut-live-state.online {
  background: var(--green-soft);
  color: var(--green);
}

.shortcut-live-state.offline {
  background: rgba(190, 56, 45, .12);
  color: #b5443a;
}

.shortcut-live-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.shortcut-live-info > div,
.shortcut-live-rates article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.shortcut-live-info small,
.shortcut-live-rates small {
  display: block;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.shortcut-live-info strong {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.shortcut-live-info strong.mismatch {
  color: #b5443a;
}

.shortcut-live-rates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.shortcut-live-rates strong {
  display: block;
  margin-top: 7px;
  font-size: 17px;
}

.shortcut-live-chart-wrap {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}

.shortcut-live-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 8px;
}

.shortcut-live-chart-head strong {
  font-size: 10px;
}

.shortcut-live-chart-head span {
  color: var(--muted);
  font-size: 8px;
}

.shortcut-live-chart {
  display: block;
  width: 100%;
  height: 230px;
  overflow: visible;
}

.shortcut-live-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.shortcut-live-axis-label {
  fill: var(--muted);
  font-size: 10px;
}

.shortcut-live-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shortcut-live-line.download {
  stroke: var(--green);
}

.shortcut-live-line.upload {
  stroke: #3b82f6;
}

.shortcut-live-legend {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 7px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.shortcut-live-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shortcut-live-legend i {
  width: 15px;
  height: 3px;
  border-radius: 4px;
}

.shortcut-live-legend .download i {
  background: var(--green);
}

.shortcut-live-legend .upload i {
  background: #3b82f6;
}

.shortcut-live-message {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.shortcut-live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .shortcut-live-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .shortcut-live-network {
    margin: 0 10px 12px;
    padding: 12px;
  }

  .shortcut-live-info,
  .shortcut-live-rates {
    grid-template-columns: 1fr;
  }

  .shortcut-live-chart {
    height: 190px;
  }

  .shortcut-live-chart-head {
    display: block;
  }

  .shortcut-live-chart-head span {
    display: block;
    margin-top: 4px;
  }
}


/* RMCJJ_CUSTOMER_LOCATION_MAP_CSS_V1 */

.customer-location-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    color-mix(
      in srgb,
      var(--panel) 94%,
      transparent
    );
}

.customer-location-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.customer-location-heading strong {
  display: block;
  font-size: 11px;
}

.customer-location-heading small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.customer-location-fields {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.customer-location-fields label {
  margin: 0;
}

.customer-location-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.customer-location-status {
  flex: 1 1 220px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}

.customer-location-status.error {
  color: #c75b50;
}

.customer-location-map {
  width: 100%;
  height: 280px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

.customer-location-map
.maplibregl-canvas {
  outline: none;
}

.customer-location-map
.maplibregl-ctrl-attrib {
  font-size: 8px;
}

.customer-location-map
.maplibregl-ctrl-group {
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 620px) {
  .customer-location-fields {
    grid-template-columns: 1fr;
  }

  .customer-location-map {
    height: 240px;
  }
}


/* RMCJJ_CUSTOMER_MAP_LAYOUT_V2
   Clean New Customer desktop arrangement.
   Layout only - no map/data behavior changes.
*/

/* Due day 1 + Router 2 + PPPoE password 1 */
#new-subscriber-form > label:has(select[name="routerId"]) {
  grid-column: span 2;
}

/* Coverage 1 + Service address 3 */
#new-subscriber-form > label:has(input[name="address"]) {
  grid-column: span 3;
}

/* Notes gets its own clean full row */
#new-subscriber-form > label:has(input[name="notes"]) {
  grid-column: 1 / -1;
}

/* Location uses the complete form width */
#new-subscriber-form > .customer-location-card {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns:
    minmax(300px, 390px)
    minmax(0, 1fr);

  grid-template-areas:
    "heading map"
    "fields map"
    "actions map";

  column-gap: 18px;
  row-gap: 12px;

  align-items: start;

  padding: 16px;
}

/* Left-side title */
#new-subscriber-form
.customer-location-heading {
  grid-area: heading;
  margin: 0;
}

/* Latitude + longitude */
#new-subscriber-form
.customer-location-fields {
  grid-area: fields;

  grid-template-columns: 1fr 1fr;

  margin: 0;
}

/* Buttons/status */
#new-subscriber-form
.customer-location-actions {
  grid-area: actions;
  align-self: start;
  margin: 0;
}

/* Large map on right */
#new-subscriber-form
.customer-location-map {
  grid-area: map;

  width: 100%;
  height: 300px;
  min-height: 300px;
}

/* Create button on its own final row */
#new-subscriber-form > .form-actions {
  grid-column: 1 / -1;

  display: flex;
  justify-content: flex-end;

  padding-top: 2px;
}

/* Tablet */
@media (max-width: 1050px) {
  #new-subscriber-form
  > .customer-location-card {
    grid-template-columns: 1fr;

    grid-template-areas:
      "heading"
      "fields"
      "actions"
      "map";
  }

  #new-subscriber-form
  .customer-location-map {
    height: 280px;
    min-height: 280px;
  }

  #new-subscriber-form
  > label:has(select[name="routerId"]),
  #new-subscriber-form
  > label:has(input[name="address"]) {
    grid-column: span 2;
  }
}

/* Phone */
@media (max-width: 620px) {
  #new-subscriber-form
  > label:has(select[name="routerId"]),
  #new-subscriber-form
  > label:has(input[name="address"]),
  #new-subscriber-form
  > label:has(input[name="notes"]) {
    grid-column: span 1;
  }

  #new-subscriber-form
  .customer-location-fields {
    grid-template-columns: 1fr;
  }

  #new-subscriber-form
  .customer-location-map {
    height: 240px;
    min-height: 240px;
  }

  #new-subscriber-form
  > .form-actions {
    grid-column: span 1;
  }
}


/* RMCJJ_CUSTOMER_FORM_GAP_FIX_V3
   Remove oversized vertical gaps in New Customer.
   Layout only.
*/

#new-subscriber-form {
  row-gap: 12px !important;
}

/*
  Payment Type has a long explanation under the select.
  It was making the whole grid row unnecessarily tall.
*/
#new-subscriber-form
> label:has(select[name="paymentType"])
> small {
  display: none !important;
}

/* Keep Due Day helper compact */
#new-subscriber-form
> label:has(input[name="dueDay"])
> small {
  display: block;
  margin-top: 5px;
  line-height: 1.2;
}

/* Reduce unnecessary vertical margins */
#new-subscriber-form > label {
  margin-bottom: 0 !important;
}

#new-subscriber-form
.pppoe-shared-password-field {
  margin-bottom: 0 !important;
}

/* Keep coverage/service-address row close to billing row */
#new-subscriber-form
> label:has(select[name="coverageId"]),
#new-subscriber-form
> label:has(input[name="address"]) {
  margin-top: 0 !important;
}



/* RMCJJ_SETTINGS_ALIGNMENT_V1
   Align System Settings fields and buttons.
   Layout only.
*/

#settings-form {
  display: grid;
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(320px, 1fr)
    190px;
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
  max-width: 990px;
}

/* Keep both setting fields identical */
#settings-form > label {
  margin: 0 !important;
  align-self: start;
}

#settings-form > label > input {
  width: 100%;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
}

/* Keep helper text neatly below its own field */
#settings-form > label > small {
  display: block;
  min-height: 14px;
  margin-top: 6px;
  line-height: 1.3;
}

/* Align SAVE button with the top of the input boxes */
#settings-form > .form-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: start;
  margin: 0 !important;
  padding: 22px 0 0 !important;
}

#settings-form > .form-actions .btn {
  width: 190px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  white-space: nowrap;
}

/* Run Check button follows same sizing */
#run-disconnection-check {
  width: 190px;
  min-width: 190px;
  height: 42px;
  min-height: 42px;
  margin: 0;
}

/* The action row below starts exactly on the left */
#settings-form + .form-actions {
  justify-content: flex-start;
  margin-top: 10px !important;
}

/* Tablet */
@media (max-width: 1000px) {
  #settings-form {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  #settings-form > .form-actions {
    grid-column: 1 / -1;
    padding-top: 0 !important;
  }
}

/* Phone */
@media (max-width: 620px) {
  #settings-form {
    grid-template-columns: 1fr;
  }

  #settings-form > .form-actions {
    grid-column: auto;
  }

  #settings-form > .form-actions .btn,
  #run-disconnection-check {
    width: 100%;
  }
}



/* RMCJJ_DISCONNECT_BUTTON_SPACING_V2
   Clean spacing below Run disconnection check.
*/

#settings-form + .form-actions {
  margin-top: 12px !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}

#settings-form
+ .form-actions
+ .security-note {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  line-height: 1.55;
}

#run-disconnection-check {
  margin-bottom: 0 !important;
}



/* RMCJJ_DISCONNECT_LEFT_ALIGN_V3
   Keep Run disconnection check aligned inside panel.
*/

#settings-form + .form-actions {
  box-sizing: border-box;
  width: 100%;
  padding-left: 18px !important;
  padding-right: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#settings-form
+ .form-actions
+ .security-note {
  margin-left: 18px !important;
  margin-right: 18px !important;
}



/* RMCJJ_NEW_CUSTOMER_COLLAPSE_V1 */

.new-customer-collapse-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.new-customer-collapse-toggle {
  min-width: 155px;
  height: 38px;
  white-space: nowrap;
}

.new-customer-form-collapsed {
  padding-bottom: 0;
}

.new-customer-form-collapsed
#new-subscriber-form {
  display: none !important;
}

/*
 * Keep only the New Customer heading visible
 * while the form is collapsed.
 */
.new-customer-form-collapsed
.panel-head {
  margin-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 620px) {
  .new-customer-collapse-actions {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
  }

  .new-customer-collapse-toggle {
    width: 100%;
  }
}


/* RMCJJ_SETTINGS_ALIGNMENT_V2
   Three equal billing-setting columns.
   Layout only.
*/

#settings-form {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  max-width: none;
}

#settings-form > label {
  min-width: 0;
}

#settings-form > .form-actions {
  grid-column: 1 / -1;
  padding-top: 8px !important;
}

@media (max-width: 1000px) {
  #settings-form {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #settings-form {
    grid-template-columns: 1fr;
  }
}



/* RMCJJ_PUBLIC_ALL_UNPAID_UI_V1 */
.public-bill-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--green-soft);
}

.public-bill-summary strong,
.public-bill-summary small,
.public-bill-total strong,
.public-bill-total small {
  display: block;
}

.public-bill-summary small {
  margin-top: 4px;
  color: var(--muted);
}

.public-bill-total {
  text-align: right;
}

.public-bill-total strong {
  margin-top: 3px;
  color: var(--green);
  font-size: 20px;
  font-weight: 900;
}

.public-invoice-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.public-invoice-item {
  margin-top: 0;
}

.public-invoice-details .status {
  margin-top: 9px;
}

.public-invoice-item .primary-btn {
  min-height: 44px;
  margin-top: 14px;
}

@media (max-width: 620px) {
  .public-bill-summary,
  .invoice-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-bill-total {
    text-align: left;
  }
}

/* RMCJJ_COUPON_FORM_ALIGN_V1 */
#coupon-form{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:end;
}

#coupon-form > label{
  min-width:0;
}

#coupon-form > label:not(.check-label) input{
  width:100%;
  height:42px;
  box-sizing:border-box;
}

#coupon-form > .check-label{
  height:42px;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}

#coupon-form > .form-actions{
  min-height:42px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

#coupon-form > .form-actions .btn{
  height:42px;
}

/* RMCJJ_FINANCE_COUPON_BALANCE_ALIGN_V1 */
.admin-section[data-section="finance"] > .dashboard-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start;
  gap:16px;
}

.admin-section[data-section="finance"] > .dashboard-grid > .panel{
  width:100%;
  min-width:0;
  margin:0;
}


/* RMCJJ_COUPON_SELECT_ALIGN_V2 */
#coupon-form select{
  width:100%;
  height:42px;
  box-sizing:border-box;
}


/* RMCJJ_COUPON_VIEW_DETAILS_V1 */
.coupon-detail-item{
  align-items:flex-start;
}

.coupon-summary{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.coupon-more{
  margin-top:6px;
}

.coupon-more > summary{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border:1px solid var(--border, #315b4d);
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  list-style:none;
}

.coupon-more > summary::-webkit-details-marker{
  display:none;
}

.coupon-more-body{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--border, #315b4d);
  border-radius:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(150px,1fr));
  gap:8px 18px;
}

.coupon-more-body > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.coupon-more-body strong{
  font-size:11px;
  text-transform:uppercase;
}

.coupon-more-body span{
  font-size:12px;
}

@media (max-width:700px){
  .coupon-more-body{
    grid-template-columns:1fr;
  }
}


/* RMCJJ_COUPON_THEME_MODAL_V1 */

.rmcjj-dialog-overlay {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15,27,22,.55);
  backdrop-filter: blur(4px);
}

.rmcjj-dialog {
  width: min(540px,100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

.rmcjj-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.rmcjj-dialog-eyebrow {
  margin-bottom: 5px;
  color: var(--green);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rmcjj-dialog-head h2 {
  margin: 0;
  color: var(--ink);
  font: 400 25px Georgia,serif;
}

.rmcjj-dialog-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f5f2;
  color: var(--muted);
  font-size: 20px;
}

.rmcjj-dialog-body {
  padding: 21px 22px;
}

.rmcjj-dialog-message {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.rmcjj-dialog-label {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.rmcjj-dialog-input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
}

.rmcjj-dialog-input:focus {
  border-color: var(--green);
  box-shadow:
    0 0 0 4px rgba(13,116,69,.10);
}

.rmcjj-dialog-input.invalid {
  border-color: var(--red);
  box-shadow:
    0 0 0 4px rgba(168,69,61,.10);
}

.rmcjj-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 15px 22px;
  border-top: 1px solid var(--line);
  background: #fafbf9;
}

.rmcjj-dialog-actions .btn {
  min-width: 110px;
}

.rmcjj-dialog-confirm.danger {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}


/* NM - NIGHT MODE */

html[data-theme="dark"] .rmcjj-dialog {
  border-color: #28513d;
  background: #0d1d16;
  color: #edf5f0;
  box-shadow: 0 30px 90px rgba(0,0,0,.58);
}

html[data-theme="dark"] .rmcjj-dialog-head {
  border-bottom-color: #234635;
  background: #10241b;
}

html[data-theme="dark"] .rmcjj-dialog-head h2 {
  color: #edf5f0;
}

html[data-theme="dark"] .rmcjj-dialog-eyebrow {
  color: #70d39e;
}

html[data-theme="dark"] .rmcjj-dialog-message,
html[data-theme="dark"] .rmcjj-dialog-label {
  color: #a8bdb1;
}

html[data-theme="dark"] .rmcjj-dialog-close {
  background: #193328;
  color: #b5c9bd;
}

html[data-theme="dark"] .rmcjj-dialog-input {
  border-color: #315b46;
  background: #091710;
  color: #f2f8f4;
}

html[data-theme="dark"] .rmcjj-dialog-input::placeholder {
  color: #718b7d;
}

html[data-theme="dark"] .rmcjj-dialog-input:focus {
  border-color: #55c889;
  box-shadow:
    0 0 0 4px rgba(85,200,137,.13);
}

html[data-theme="dark"] .rmcjj-dialog-actions {
  border-top-color: #234635;
  background: #10241b;
}

html[data-theme="dark"] .rmcjj-dialog-cancel {
  border-color: #315b46;
  background: #132a20;
  color: #dce9e1;
}

html[data-theme="dark"] .rmcjj-dialog-cancel:hover {
  border-color: #4c8063;
  background: #193629;
  color: #fff;
}

@media (max-width:620px) {
  .rmcjj-dialog-overlay {
    padding: 14px;
  }

  .rmcjj-dialog-head,
  .rmcjj-dialog-body,
  .rmcjj-dialog-actions {
    padding-left: 17px;
    padding-right: 17px;
  }

  .rmcjj-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .rmcjj-dialog-actions .btn {
    width: 100%;
    min-width: 0;
  }
}



/* RMCJJ_PUBLIC_COUPON_DETAILS_V1 */
.public-coupon-breakdown{
  margin-top:12px;
  padding:11px 12px;
  border:1px solid #bfe2cd;
  border-radius:11px;
  background:#f1faf5;
}

.public-coupon-badge{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  background:#dff4e8;
  color:var(--green);
  font-size:9px;
  font-weight:900;
}

.public-coupon-rows{
  display:grid;
  gap:6px;
  margin-top:9px;
}

.public-coupon-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:10px;
}

.public-coupon-line strong{
  color:var(--ink);
}

.public-coupon-line.discount strong{
  color:var(--green);
}

.public-coupon-line.amount-due{
  margin-top:2px;
  padding-top:7px;
  border-top:1px solid #cfe6d7;
  font-weight:800;
}

.public-coupon-line.amount-due strong{
  color:var(--green);
  font-size:14px;
  font-weight:900;
}


/* RMCJJ_PUBLIC_POINTS_ADVANCE_TEMP_V1 */
.public-rewards-card,
.public-advance-card,
.public-advance-offer {
  margin-top: 12px;
  border: 1px solid rgba(14, 93, 65, .14);
  border-radius: 14px;
  background: rgba(240, 250, 245, .92);
  padding: 14px;
}
.public-rewards-head,
.public-advance-heading,
.public-advance-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.public-rewards-head > div,
.public-advance-heading > div,
.public-advance-offer > div {
  display: grid;
  gap: 3px;
}
.public-rewards-card small,
.public-advance-card small,
.public-advance-offer small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  color: #507065;
}
.public-rewards-card strong,
.public-advance-card strong,
.public-advance-offer strong {
  font-size: 17px;
}
.public-rewards-value,
.public-advance-amount {
  text-align: right;
}
.public-rewards-rule,
.public-advance-note {
  margin: 10px 0 0;
  color: #53665f;
  font-size: 11px;
  line-height: 1.5;
}
.public-advance-timer {
  margin: 12px 0;
  border-radius: 10px;
  background: #fff3e8;
  padding: 9px 11px;
  color: #b64a12;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.public-advance-card .primary-btn,
.public-advance-offer .primary-btn {
  margin-top: 10px;
  width: 100%;
}
@media (max-width: 620px) {
  .public-rewards-head,
  .public-advance-heading,
  .public-advance-offer {
    align-items: stretch;
    flex-direction: column;
  }
  .public-rewards-value,
  .public-advance-amount {
    text-align: left;
  }
}


/* RMCJJ_PUBLIC_POINTS_REDEEM_CHECKBOX_V3 */
.public-points-checkbox {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  gap: 6px 10px;
  align-items: center;
  margin: 12px 0 2px;
  padding: 11px 12px;
  border: 1px solid rgba(236,104,28,.22);
  border-radius: 10px;
  background: rgba(255,247,240,.96);
  cursor: pointer;
}

.public-points-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #ee681c;
}

.public-points-checkbox span {
  color: #3e514a;
  font-size: 11px;
  font-weight: 800;
}

.public-points-payment-preview {
  grid-column: 2;
  color: #b64a12;
  font-size: 12px;
}

/* RMCJJ_PUBLIC_ADVANCE_LAYOUT_V1 */

/* Advance offer: use a clean vertical layout */
.public-advance-offer {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 10px !important;
}

/* Billing-period information */
.public-advance-offer > div:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  min-width: 0;
}

.public-advance-offer > div:first-child small {
  display: block;
  margin-bottom: 1px;
}

.public-advance-offer > div:first-child strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
}

.public-advance-offer > div:first-child span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

/* Points redemption gets the full card width */
.public-advance-offer .public-points-checkbox {
  width: 100%;
  box-sizing: border-box;
  margin: 2px 0 0;
  padding: 12px 14px;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px 10px;
}

.public-advance-offer .public-points-checkbox input {
  align-self: start;
  margin-top: 2px;
}

.public-advance-offer .public-points-checkbox span {
  font-size: 12px;
  line-height: 1.4;
}

.public-advance-offer .public-points-payment-preview {
  grid-column: 2;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.25;
}

/* Main action button full width below points */
.public-advance-offer .primary-btn {
  width: 100% !important;
  margin: 2px 0 0 !important;
  min-height: 48px;
}

/* Same clean spacing after temporary bill is created */
.public-advance-card .public-points-checkbox {
  width: 100%;
  box-sizing: border-box;
}


/* RMCJJ_SERVER_HEALTH_TAB_V1 */
.server-health-pane {
  padding-top: 8px;
}

.server-health-card {
  border: 1px solid rgba(129, 179, 159, 0.24);
  border-radius: 16px;
  background: rgba(6, 22, 17, 0.54);
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.server-health-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.server-health-heading p {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #4dd7b2;
}

.server-health-heading h2 {
  margin: 0 0 5px;
  font-size: 20px;
}

.server-health-heading small,
.server-health-metric small,
.server-health-footer {
  color: #94a9a1;
}

.server-health-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(31, 196, 129, 0.14);
  color: #55dfa8;
  font-size: 12px;
  font-weight: 800;
}

.server-health-live.server-health-offline {
  background: rgba(234, 24, 71, 0.14);
  color: #ff6b8b;
}

.server-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.server-health-metric {
  min-height: 145px;
  border: 1px solid rgba(129, 179, 159, 0.22);
  border-radius: 14px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.018);
}

.server-health-metric > span {
  display: block;
  margin-bottom: 14px;
  color: #9eb2aa;
  font-size: 13px;
}

.server-health-metric strong {
  display: block;
  margin-bottom: 12px;
  font-size: 29px;
  line-height: 1;
  color: #f4fbf8;
}

.server-health-metric strong.server-health-online {
  color: #55dfa8;
  font-size: 23px;
}

.server-health-metric small {
  display: block;
  line-height: 1.5;
}

.server-health-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 18px;
  font-size: 12px;
}

.server-health-footer strong {
  color: #dbe9e4;
}

@media (max-width: 1100px) {
  .server-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .server-health-heading {
    flex-direction: column;
  }

  .server-health-grid {
    grid-template-columns: 1fr;
  }
}

/* RMCJJ_SERVER_SECURITY_PANEL_V1 */
.server-security-panel {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid #dfe5ec;
  border-radius: 16px;
  background: #ffffff;
}

.server-security-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.server-security-heading p {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.server-security-heading h3 {
  margin: 0 0 4px;
}

.server-security-heading small {
  color: #667085;
}

.server-security-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.server-security-metric {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e6e9ee;
  border-radius: 12px;
  background: #f8fafc;
}

.server-security-metric > span,
.server-security-metric > small {
  display: block;
  color: #667085;
}

.server-security-metric > span {
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
}

.server-security-metric > strong {
  display: block;
  margin-bottom: 5px;
  font-size: 19px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.server-security-metric > small {
  font-size: 11px;
}

.server-security-threat {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.security-status-ok,
.security-threat-low {
  color: #067647;
}

.security-status-warning,
.security-threat-medium {
  color: #b54708;
}

.security-status-danger,
.security-threat-high {
  color: #b42318;
}

.security-threat-low {
  background: #ecfdf3;
}

.security-threat-medium {
  background: #fffaeb;
}

.security-threat-high {
  background: #fef3f2;
}

.server-security-footer {
  margin-top: 14px;
  color: #667085;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .server-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .server-security-grid {
    grid-template-columns: 1fr;
  }

  .server-security-heading {
    flex-direction: column;
  }
}



/* RMCJJ_FORCE_STAFF_PASSWORD_CHANGE_V1_CSS */
.staff-password-change-body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f3f6f8;
}

.staff-password-change-shell {
  width: min(520px, 100%);
}

.staff-password-change-card {
  padding: 32px;
  border: 1px solid #dfe5ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.staff-password-change-card h1 {
  margin: 10px 0 8px;
}

.staff-password-change-card > p {
  color: #667085;
  line-height: 1.6;
}

.staff-password-change-card form:not(.staff-password-logout) {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}

.staff-password-change-card label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.staff-password-change-card input {
  min-height: 46px;
}

.staff-password-change-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff4e5;
  color: #b54708;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.staff-password-change-error {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fef3f2;
  color: #b42318;
  font-weight: 700;
}

.staff-password-rules {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 10px;
  background: #f8fafc;
  color: #667085;
  font-size: 13px;
}

.staff-password-rules strong {
  color: #101828;
  margin-bottom: 3px;
}

.staff-password-logout {
  margin-top: 12px;
}


/* RMCJJ_BILL_DELETE_SELECTION_V1_CSS */
.bill-delete-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin: 10px 0 12px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 12px;
}

.bill-delete-toolbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bill-delete-toolbar span {
  font-size: 12px;
  opacity: .75;
}

.bill-delete-select-column,
.bill-delete-select-cell {
  width: 58px;
  text-align: center;
}

.bill-delete-select-cell input {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.bill-delete-select-cell input:disabled {
  cursor: not-allowed;
  opacity: .35;
}

@media (max-width: 700px) {
  .bill-delete-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}


/* RMCJJ_FINANCE_MONTH_CARD_V2 */
.finance-period-stats {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 12px;
}

.finance-period-stats .stat-card {
  min-width: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.finance-period-stats .stat-value {
  white-space: nowrap;
}

.finance-period-stats
.finance-method-breakdown > span {
  min-width: 0;
}

.finance-period-stats
.finance-method-breakdown strong {
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .finance-period-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .finance-period-stats {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}


/* RMCJJ_ADVANCE_BILLING_NIGHT_V1 */

/* =========================================================
   ADVANCE BILLING - NIGHT MODE
   ========================================================= */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
.advance-billing-dialog {
  background: #0d1b14 !important;
  color: #e8f1ec !important;
  border-color: #294638 !important;
}


/* ---------------------------------------------------------
   FORM LABELS
   --------------------------------------------------------- */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal label,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal .eyebrow-text,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal h2 {
  color: #edf5f0 !important;
}


/* ---------------------------------------------------------
   INPUT / SELECT / TEXTAREA
   --------------------------------------------------------- */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal input,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal select,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal textarea {
  background: #0b1812 !important;
  color: #edf5f0 !important;
  border-color: #315342 !important;
}

html[data-theme="dark"]
body.admin-body
#advance-billing-modal input[readonly] {
  background: #14251d !important;
  color: #b9cbc1 !important;
}

html[data-theme="dark"]
body.admin-body
#advance-billing-modal input::placeholder,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal textarea::placeholder {
  color: #83998d !important;
  opacity: 1 !important;
}

html[data-theme="dark"]
body.admin-body
#advance-billing-modal option {
  background: #102018 !important;
  color: #edf5f0 !important;
}


/* =========================================================
   FIX WHITE ADVANCE PERIOD / TOTAL BILLING CARD
   ========================================================= */

/*
 Chrome supports :has().
 These rules deliberately target the containers holding
 advance-period-count, advance-total and advance-period-list.
*/

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
div:has(> #advance-period-count),

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
div:has(> #advance-total),

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
div:has(> #advance-period-list) {
  background: #102219 !important;
  color: #e8f1ec !important;
  border-color: #2d4b3b !important;
}


/* Direct elements */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
#advance-period-count,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
#advance-total,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
#advance-period-list {
  background: #102219 !important;
  color: #edf5f0 !important;
  border-color: #2d4b3b !important;
}


/* Period rows */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
#advance-period-list > * {
  background: #13271d !important;
  color: #e8f1ec !important;
  border-color: #2d4b3b !important;
}


/* Headers / muted text */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
#advance-period-count,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
#advance-total {
  color: #f2f7f4 !important;
}

html[data-theme="dark"]
body.admin-body
#advance-billing-modal small,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal .muted,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal .payment-dialog-note {
  color: #9eb2a7 !important;
}


/* Green check remains visible */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
#advance-period-list
strong:first-child,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
#advance-period-list
span:first-child {
  color: #4fd18b;
}


/* ---------------------------------------------------------
   MODAL DIVIDERS
   --------------------------------------------------------- */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal hr,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
.advance-billing-dialog * {
  border-color: #294638;
}


/* Re-assert controls after generic border rule */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal input,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal select,

html[data-theme="dark"]
body.admin-body
#advance-billing-modal textarea {
  border-color: #315342 !important;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
   --------------------------------------------------------- */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
.modal-close {
  background: #1a3025 !important;
  color: #edf5f0 !important;
  border: 1px solid #365746 !important;
}

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
.modal-close:hover {
  background: #244233 !important;
}


/* ---------------------------------------------------------
   CANCEL BUTTON
   --------------------------------------------------------- */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
.btn:not(.green) {
  background: #15281f !important;
  color: #e8f1ec !important;
  border-color: #385747 !important;
}


/* RMCJJ_ADVANCE_CLOSE_DARK_V1 */

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
[data-advance-close] {
  background: #173126 !important;
  color: #e8f1ec !important;
  border: 1px solid #315342 !important;
  box-shadow: none !important;
}

html[data-theme="dark"]
body.admin-body
#advance-billing-modal
[data-advance-close]:hover {
  background: #244536 !important;
  color: #ffffff !important;
}



/* RMCJJ_BILLS_FILTER_AMOUNT_V1 */
#rmcjj-bills-filter-amount{
  display:inline-block;
  margin-left:12px;
  font-size:12px;
  font-weight:700;
  color:#8fd9b1;
  vertical-align:middle;
}

/* RMCJJ_EMAIL_FONT_WEIGHT_V1 */
/* Lighter typography only for Integrations > Email */

.integration-pane[data-integration-pane="email"] .panel-head h3{
    font-weight:600;
}

.integration-pane[data-integration-pane="email"] h4{
    font-weight:600;
}

.integration-pane[data-integration-pane="email"] label{
    font-weight:500;
}

.integration-pane[data-integration-pane="email"] label.check-label{
    font-weight:500;
}

.integration-pane[data-integration-pane="email"] input,
.integration-pane[data-integration-pane="email"] select,
.integration-pane[data-integration-pane="email"] textarea{
    font-weight:400;
}

.integration-pane[data-integration-pane="email"] input::placeholder,
.integration-pane[data-integration-pane="email"] textarea::placeholder{
    font-weight:400;
}

.integration-pane[data-integration-pane="email"] p{
    font-weight:400;
}

.integration-pane[data-integration-pane="email"] .status{
    font-weight:600;
}

.integration-pane[data-integration-pane="email"] .btn{
    font-weight:600;
}



/* RMCJJ_PUBLIC_CLIENT_PORTAL_LINK_V1 */
body.public-body .public-nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

body.public-body .public-client-portal-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 16px;
  border:1px solid var(--green);
  border-radius:10px;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}

body.public-body .public-client-portal-link:hover{
  background:var(--green-dark);
}

@media(max-width:620px){
  body.public-body .public-nav-actions{
    gap:7px;
  }

  body.public-body .public-client-portal-link{
    min-height:35px;
    padding:0 10px;
    font-size:11px;
  }
}


/* RMCJJ_DYNAMIC_MANUAL_PAYMENTS_QR_V1 */
.manual-payment-methods-head{align-items:center;gap:14px}.manual-payment-method-list{display:grid;gap:10px}.manual-payment-method-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.manual-payment-method-card.inactive{opacity:.66}.manual-payment-method-card-body{min-width:0}.manual-payment-method-card-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.manual-payment-method-card-heading strong{font-size:14px}.manual-payment-method-card p{margin:6px 0 2px;color:var(--muted)}.manual-payment-method-card small{color:var(--muted)}.manual-payment-method-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}.manual-payment-method-qr{width:86px;height:86px;object-fit:contain;padding:5px;border:1px solid var(--line);border-radius:10px;background:#fff}.manual-payment-method-dialog{max-width:640px}.manual-payment-qr-editor{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px}.manual-payment-qr-editor img{width:110px;height:110px;object-fit:contain;padding:5px;border-radius:8px;background:#fff}.selected-manual-payment-details{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}.selected-manual-payment-details>div{display:grid;gap:3px}.selected-manual-payment-details span{color:var(--muted);font-size:12px}.selected-manual-payment-details img{width:82px;height:82px;object-fit:contain;padding:4px;border-radius:8px;background:#fff}@media(max-width:620px){.manual-payment-methods-head{align-items:stretch;flex-direction:column}.manual-payment-method-card{grid-template-columns:1fr}.manual-payment-method-qr{width:100px;height:100px}.selected-manual-payment-details{align-items:flex-start;flex-direction:column}}

/* RMCJJ_FINANCE_SELECTED_MONTH_V1 */
.finance-summary-month-filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 8px 0 10px;
}

.finance-summary-month-filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.finance-summary-month-filter input[type="month"] {
  min-width: 142px;
  height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .finance-summary-month-filter,
  .finance-summary-month-filter label {
    width: 100%;
  }

  .finance-summary-month-filter input[type="month"] {
    flex: 1;
    min-width: 0;
  }
}

/* RMCJJ_FINANCE_DASHBOARD_GROSS_COUPON_NET_V1_1 */
.finance-gross-coupon-net {
  display: grid;
  gap: 6px;
  margin: 12px 0 8px;
  padding: 10px 0 9px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.finance-gross-coupon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
}
.finance-gross-coupon-row span {
  opacity: .72;
}
.finance-gross-coupon-row strong {
  font-size: 13px;
  white-space: nowrap;
}
.finance-gross-coupon-row.coupon strong {
  font-weight: 800;
}
.finance-net-income-label {
  margin: 10px 0 2px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}
[data-dashboard-pane="finance"] .finance-gross-coupon-dashboard {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1180px) {
  [data-dashboard-pane="finance"] .finance-gross-coupon-dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  [data-dashboard-pane="finance"] .finance-gross-coupon-dashboard {
    grid-template-columns: 1fr;
  }
}

/* RMCJJ_LICENSE_AGREEMENT_V1 */
.license-location-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(80, 110, 100, .22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .7);
}
.license-agreement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.license-agreement-card {
  min-width: 0;
  overflow: hidden;
}
.license-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 15px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(100, 120, 120, .16);
}
.license-kicker {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .62;
}
.license-card-head h3 {
  margin: 0;
  font-size: 20px;
}
.license-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(31, 157, 92, .12);
  color: #187a4a;
  border: 1px solid rgba(31, 157, 92, .22);
}
.license-status-pill[data-status="trial"],
.license-status-pill[data-status="expiring_soon"] {
  background: rgba(215, 145, 20, .12);
  color: #8d5a00;
  border-color: rgba(215, 145, 20, .24);
}
.license-status-pill[data-status="expired"],
.license-status-pill[data-status="suspended"],
.license-status-pill[data-status="past_due"] {
  background: rgba(200, 58, 58, .11);
  color: #a02626;
  border-color: rgba(200, 58, 58, .23);
}
.license-detail-grid {
  display: grid;
  gap: 10px;
}
.license-detail-item {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(100, 120, 120, .13);
}
.license-detail-item:last-child {
  border-bottom: 0;
}
.license-detail-item span {
  font-size: 12px;
  opacity: .65;
}
.license-detail-item strong {
  min-width: 0;
  font-size: 13px;
  text-align: right;
  overflow-wrap: anywhere;
}
.license-remaining-item {
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(36, 119, 85, .18);
  border-radius: 12px;
  background: rgba(36, 119, 85, .06);
}
.license-countdown {
  font-size: 17px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}
.license-agreement-note {
  margin: 14px 2px 0;
  font-size: 12px;
  line-height: 1.6;
  opacity: .68;
}
@media (max-width: 980px) {
  .license-agreement-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .license-card-head {
    flex-direction: column;
  }
  .license-detail-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .license-detail-item strong {
    text-align: left;
  }
  .license-remaining-item {
    display: block;
  }
  .license-countdown {
    display: block;
    margin-top: 6px;
  }
}

/* RMCJJ_LICENSE_AGREEMENT_LAYOUT_V1_1 */
[data-section="license"] {
  max-width: 1500px;
}
.license-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(100, 120, 120, .16);
}
.license-page-title h2 {
  margin: 0 0 5px;
}
.license-page-title p {
  margin: 0;
  max-width: 780px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .72;
}
.license-location-chip {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 11px;
}
.license-agreement-grid {
  gap: 14px;
  align-items: stretch;
}
.license-agreement-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px !important;
  border-radius: 14px;
}
.license-card-head {
  align-items: center;
  gap: 12px;
  padding-bottom: 11px;
  margin-bottom: 8px;
}
.license-kicker {
  margin-bottom: 3px;
  font-size: 10px;
}
.license-card-head h3 {
  font-size: 18px;
  line-height: 1.25;
}
.license-status-pill {
  min-width: 86px;
  padding: 6px 10px;
}
.license-detail-grid {
  gap: 0;
}
.license-detail-item {
  grid-template-columns: minmax(130px, .75fr) minmax(220px, 1.25fr);
  gap: 12px;
  padding: 10px 0;
}
.license-detail-item span {
  font-size: 11px;
}
.license-detail-item strong {
  font-size: 12px;
}
.license-remaining-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(36, 119, 85, .24);
  border-radius: 11px;
  background: rgba(36, 119, 85, .07);
}
.license-remaining-item span {
  font-size: 11px;
  font-weight: 700;
  opacity: .72;
}
.license-countdown {
  font-size: 16px !important;
  line-height: 1.2;
  text-align: right;
}
.license-terms-card {
  margin-top: 14px;
  padding: 16px 18px !important;
  border-radius: 14px;
}
.license-terms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
}
.license-terms-head h3 {
  margin: 0;
  font-size: 17px;
}
.license-agreement-version-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(80, 110, 100, .22);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
}
.license-terms-intro {
  margin: 0 0 12px;
  max-width: 1200px;
  font-size: 12px;
  line-height: 1.5;
  opacity: .78;
}
.license-terms-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.license-term-item {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(100, 120, 120, .14);
  border-radius: 10px;
  background: rgba(100, 120, 120, .035);
}
.license-term-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
}
.license-term-item span {
  display: block;
  font-size: 11px;
  line-height: 1.42;
  opacity: .7;
}
.license-agreement-note {
  margin: 10px 2px 0;
  font-size: 10.5px;
  line-height: 1.45;
}
@media (max-width: 1180px) {
  .license-terms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .license-agreement-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .license-page-header,
  .license-terms-head {
    flex-direction: column;
    align-items: stretch;
  }
  .license-location-chip,
  .license-agreement-version-badge {
    align-self: flex-start;
  }
  .license-card-head {
    flex-direction: row;
    align-items: flex-start;
  }
  .license-detail-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .license-detail-item strong {
    text-align: left;
  }
  .license-remaining-item {
    display: block;
  }
  .license-countdown {
    display: block;
    margin-top: 5px;
    text-align: left;
  }
  .license-terms-grid {
    grid-template-columns: 1fr;
  }
}

/* RMCJJ_BILLS_SHORTCUT_PAYMENT_V1_1
   Bills -> Shortcut payment review target. */
#shortcut-modal .shortcut-target-bill {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 10px;
}

#shortcut-modal .shortcut-target-bill
button[data-shortcut-action="payment"] {
  font-weight: 800;
}

/* RMCJJ_BILLS_PREV_BALANCE_STATUS_V1
   Secondary debt warning in Bills status column. */
.bill-status-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.status.prev-balance {
  border: 1px solid rgba(245, 158, 11, 0.44);
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
}

.bill-previous-unpaid {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  line-height: 1.25;
}

.bill-previous-unpaid-label {
  font-size: 10px;
  opacity: 0.76;
}

.bill-previous-unpaid-value {
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  white-space: nowrap;
}

html[data-theme="light"] .status.prev-balance,
html[data-theme="light"] .bill-previous-unpaid-value {
  color: #9a5b00;
}

/* RMCJJ_BILLS_CUSTOMER_CONTACT_ADDRESS_MERGED_V1 */
#invoice-table .rmcjj-bill-contact-merged-source {
  display: none !important;
}
#invoice-table .rmcjj-bill-customer-merged-head {
  min-width: 250px;
  white-space: normal;
}
#invoice-table .rmcjj-bill-customer-merged-cell {
  min-width: 250px;
  vertical-align: top;
}
#invoice-table .rmcjj-bill-customer-merged-cell > strong,
#invoice-table .rmcjj-bill-customer-merged-cell > small,
#invoice-table .rmcjj-bill-customer-merged-cell .rmcjj-bill-merged-contact,
#invoice-table .rmcjj-bill-customer-merged-cell .rmcjj-bill-merged-service-address {
  display: block;
}
#invoice-table .rmcjj-bill-merged-contact {
  margin-top: 2px;
  font-weight: 700;
  opacity: .95;
}
#invoice-table .rmcjj-bill-merged-service-address {
  margin-top: 2px;
  opacity: .78;
  line-height: 1.25;
  white-space: normal;
}
@media (max-width: 1100px) {
  #invoice-table .rmcjj-bill-customer-merged-head,
  #invoice-table .rmcjj-bill-customer-merged-cell {
    min-width: 220px;
  }
}

/* RMCJJ_BILLS_CUSTOMER_CONTACT_ADDRESS_CORE_V1_1 */
/* The previous merge used hide/show rules. V1.1 has the correct physical
   cell count, so every cell that exists in the new table must display. */
#invoice-table th,
#invoice-table td {
  display: table-cell !important;
}
#invoice-table th:nth-child(2),
#invoice-table td.bill-customer-contact-address {
  min-width: 250px;
}
#invoice-table td.bill-customer-contact-address {
  vertical-align: top;
}
#invoice-table td.bill-customer-contact-address > strong,
#invoice-table td.bill-customer-contact-address > small {
  display: block;
}
#invoice-table td.bill-customer-contact-address .bill-customer-name {
  margin-bottom: 3px;
  line-height: 1.25;
}
#invoice-table td.bill-customer-contact-address .bill-customer-phone {
  font-weight: 700;
  color: var(--text, #fff);
  margin-bottom: 2px;
}
#invoice-table td.bill-customer-contact-address .bill-customer-coverage,
#invoice-table td.bill-customer-contact-address .bill-customer-address {
  line-height: 1.3;
}
#invoice-table td.bill-customer-contact-address .bill-customer-address {
  opacity: .78;
  margin-top: 1px;
}
@media (max-width: 900px) {
  #invoice-table th:nth-child(2),
  #invoice-table td.bill-customer-contact-address {
    min-width: 220px;
  }
}

/* RMCJJ_BILLS_PREV_BALANCE_FILTER_BORDER_V2 */

#invoice-table td.rmcjj-prev-balance-cell-v2{
  min-width:0;
  max-width:150px;
  overflow:hidden;
  box-sizing:border-box;
  vertical-align:top;
}

#invoice-table
.rmcjj-prev-balance-badges-v2{
  width:100%;
  max-width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin:0 0 5px;
  overflow:hidden;
  box-sizing:border-box;
}

#invoice-table
.rmcjj-prev-balance-badges-v2
.status,
#invoice-table
.rmcjj-prev-balance-badge-v2{
  flex:0 0 auto;
  max-width:100%;
  box-sizing:border-box;
  margin:0;
}

#invoice-table
.rmcjj-prev-balance-detail-v2{
  width:100%;
  max-width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:3px;
  margin:0;
  box-sizing:border-box;
  white-space:normal;
  overflow:hidden;
  overflow-wrap:anywhere;
  line-height:1.2;
  font-size:.76rem;
}

#invoice-table
.rmcjj-prev-balance-detail-v2
span{
  opacity:.72;
}

#invoice-table
.rmcjj-prev-balance-detail-v2
strong{
  max-width:100%;
  font-size:.80rem;
  line-height:1.2;
  overflow-wrap:anywhere;
}

@media (max-width:900px){

  #invoice-table
  td.rmcjj-prev-balance-cell-v2{
    max-width:135px;
  }
}

/* RMCJJ_PULLOUT_LIFECYCLE_V1 */
#invoice-table td.rmcjj-prev-balance-cell-v2,
#invoice-table td.rmcjj-pullout-status-cell{
  width:205px !important;
  min-width:205px !important;
  max-width:205px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  vertical-align:top !important;
}

#invoice-table .rmcjj-prev-balance-badges-v2{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  margin:0 0 4px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

#invoice-table .rmcjj-prev-balance-badges-v2 .status,
#invoice-table .rmcjj-prev-balance-badge-v2{
  flex:0 0 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:4px 6px !important;
  font-size:.59rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

#invoice-table .rmcjj-prev-balance-detail-v2{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  align-items:baseline !important;
  flex-wrap:nowrap !important;
  gap:3px !important;
  margin:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:.70rem !important;
  line-height:1.15 !important;
  box-sizing:border-box !important;
}

#invoice-table .rmcjj-prev-balance-detail-v2 strong{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:.75rem !important;
}

#invoice-table .rmcjj-pullout-state-row{
  width:100%;
  max-width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin:4px 0;
  overflow:hidden;
  box-sizing:border-box;
}

#invoice-table .rmcjj-pullout-lifecycle-badge{
  flex:0 0 auto;
  max-width:100%;
  margin:0;
  padding:4px 6px;
  font-size:.59rem;
  line-height:1;
  white-space:nowrap;
  box-sizing:border-box;
}

#invoice-table .rmcjj-pullout-lifecycle-badge.for_pullout{
  border-color:#d58b00;
  color:#ffc94d;
  background:rgba(213,139,0,.13);
}

#invoice-table .rmcjj-pullout-lifecycle-badge.pulled_out{
  border-color:#8b4545;
  color:#ffb4aa;
  background:rgba(139,69,69,.16);
}

#invoice-table .rmcjj-mark-pulled-out{
  flex:0 1 auto;
  max-width:100%;
  padding:4px 6px;
  font-size:.57rem;
  line-height:1.05;
  white-space:normal;
}

.rmcjj-pullout-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(3px);
}

.rmcjj-pullout-dialog{
  width:min(720px,96vw);
  max-height:90vh;
  overflow:auto;
  border:1px solid var(--line,rgba(255,255,255,.16));
  border-radius:16px;
  background:var(--panel,#0b2118);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}

.rmcjj-pullout-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px 16px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.14));
}

.rmcjj-pullout-head small{
  display:block;
  margin-bottom:5px;
  opacity:.7;
  letter-spacing:.12em;
}

.rmcjj-pullout-head h3,
.rmcjj-pullout-head p{
  margin:0;
}

.rmcjj-pullout-close{
  width:38px;
  height:38px;
  border:1px solid var(--line,rgba(255,255,255,.14));
  border-radius:50%;
  background:transparent;
  color:inherit;
  font-size:24px;
  cursor:pointer;
}

.rmcjj-pullout-info{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:16px 22px;
}

.rmcjj-pullout-info-row{
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--line,rgba(255,255,255,.12));
  border-radius:10px;
}

.rmcjj-pullout-info-row span,
.rmcjj-pullout-info-row strong{
  display:block;
  overflow-wrap:anywhere;
}

.rmcjj-pullout-info-row span{
  margin-bottom:4px;
  opacity:.7;
  font-size:.75rem;
}

.rmcjj-pullout-dialog section,
.rmcjj-pullout-form{
  padding:0 22px 18px;
}

.rmcjj-pullout-dialog h4{
  margin:0 0 10px;
}

.rmcjj-pullout-devices{
  display:grid;
  gap:8px;
}

.rmcjj-pullout-device{
  display:grid;
  gap:4px;
  padding:11px 12px;
  border:1px solid var(--line,rgba(255,255,255,.12));
  border-radius:10px;
}

.rmcjj-pullout-device span,
.rmcjj-pullout-device small{
  opacity:.78;
}

.rmcjj-pullout-empty,
.rmcjj-pullout-rule{
  opacity:.78;
  line-height:1.45;
}

.rmcjj-pullout-form{
  display:grid;
  gap:14px;
}

.rmcjj-pullout-confirm{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid rgba(213,139,0,.45);
  border-radius:10px;
  background:rgba(213,139,0,.08);
}

.rmcjj-pullout-confirm input{
  margin-top:3px;
}

.rmcjj-pullout-form textarea{
  width:100%;
  margin-top:6px;
  box-sizing:border-box;
}

.rmcjj-pullout-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

@media (max-width:760px){
  #invoice-table td.rmcjj-prev-balance-cell-v2,
  #invoice-table td.rmcjj-pullout-status-cell{
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
  }

  .rmcjj-pullout-modal{
    padding:10px;
    align-items:flex-start;
  }

  .rmcjj-pullout-dialog{
    margin-top:12px;
    max-height:94vh;
  }

  .rmcjj-pullout-info{
    grid-template-columns:1fr;
  }
}

/* RMCJJ_BILLS_FAST_PULLOUT_PREVBILL_V1 */
#invoice-table td.rmcjj-fast-status-cell-v1{
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  overflow:hidden !important;
  vertical-align:top !important;
  box-sizing:border-box !important;
}

#invoice-table .rmcjj-fast-status-stack-v1{
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:5px;
  overflow:hidden;
  box-sizing:border-box;
}

#invoice-table .rmcjj-fast-status-badges-v1{
  width:100%;
  max-width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  overflow:hidden;
  box-sizing:border-box;
}

#invoice-table .rmcjj-fast-status-badges-v1 .status{
  flex:0 0 auto;
  margin:0 !important;
  padding:4px 6px !important;
  font-size:.59rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

#invoice-table .rmcjj-fast-prev-balance-badge-v1{
  border-color:#c58d00 !important;
  color:#ffd44d !important;
  background:rgba(197,141,0,.13) !important;
}

#invoice-table .rmcjj-fast-for-pullout-badge-v1{
  border-color:#d58b00 !important;
  color:#ffc94d !important;
  background:rgba(213,139,0,.13) !important;
}

#invoice-table .rmcjj-fast-pulled-out-badge-v1{
  border-color:#8b4545 !important;
  color:#ffb4aa !important;
  background:rgba(139,69,69,.16) !important;
}

#invoice-table .rmcjj-fast-prev-details-v1{
  width:100%;
  max-width:100%;
  display:grid;
  gap:2px;
  overflow:hidden;
  box-sizing:border-box;
}

#invoice-table .rmcjj-fast-prev-detail-row-v1{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:5px;
  overflow:hidden;
  font-size:.70rem;
  line-height:1.15;
  box-sizing:border-box;
}

#invoice-table .rmcjj-fast-prev-detail-row-v1 span{
  white-space:nowrap;
  opacity:.78;
}

#invoice-table .rmcjj-fast-prev-detail-row-v1 strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.74rem;
}

#invoice-table .rmcjj-fast-pullout-actions-v1{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

#invoice-table .rmcjj-fast-pullout-actions-v1 .rmcjj-mark-pulled-out{
  margin:0;
  padding:4px 7px;
  font-size:.58rem;
}

@media (max-width:1000px){
  #invoice-table td.rmcjj-fast-status-cell-v1{
    width:230px !important;
    min-width:230px !important;
    max-width:230px !important;
  }
}

/* RMCJJ_PULLOUT_ACTION_COLUMN_V1 */
#invoice-table .rmcjj-pullout-action-slot-v1{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:4px;
  box-sizing:border-box;
}

#invoice-table .rmcjj-mark-as-pulled-action-v1{
  margin:0 !important;
  padding:5px 8px !important;
  font-size:.64rem !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}

#invoice-table td.rmcjj-fast-status-cell-v1 .rmcjj-fast-pullout-actions-v1:empty{
  display:none !important;
}

/* RMCJJ_PREV_BALANCE_FIT_V1 */

/*
 * Keep the full PREV BALANCE wording readable
 * without changing the business/status logic.
 */

#invoice-table td.rmcjj-fast-status-cell-v1{
  width:132px !important;
  min-width:132px !important;
  max-width:132px !important;
  box-sizing:border-box !important;
}

#invoice-table .rmcjj-fast-status-badges-v1{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

#invoice-table .rmcjj-fast-prev-balance-badge-v1{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;

  margin:0 !important;
  padding:4px 5px !important;

  font-size:.54rem !important;
  line-height:1 !important;
  letter-spacing:0 !important;

  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;

  box-sizing:border-box !important;
}

#invoice-table .rmcjj-fast-status-badges-v1
.status:not(.rmcjj-fast-prev-balance-badge-v1){
  max-width:100% !important;
}

#invoice-table .rmcjj-fast-prev-details-v1{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

#invoice-table .rmcjj-fast-prev-detail-row-v1{
  font-size:.67rem !important;
  gap:3px !important;
}

@media (max-width:1000px){
  #invoice-table td.rmcjj-fast-status-cell-v1{
    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;
  }
}

/* RMCJJ_PREV_BALANCE_AMOUNT_FIT_V1 */

/* Give the status column a little more space */
#invoice-table td.rmcjj-fast-status-cell-v1{
  width:156px !important;
  min-width:156px !important;
  max-width:156px !important;
  vertical-align:top !important;
  box-sizing:border-box !important;
}

/* Keep badge/details inside the cell */
#invoice-table .rmcjj-fast-status-badges-v1{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:5px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* Keep previous details readable */
#invoice-table .rmcjj-fast-prev-details-v1{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* Let the label/value wrap instead of clipping */
#invoice-table .rmcjj-fast-prev-detail-row-v1{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:baseline !important;
  gap:2px 4px !important;
  font-size:.67rem !important;
  line-height:1.1 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* label part */
#invoice-table .rmcjj-fast-prev-detail-row-v1 .rmcjj-fast-prev-label-v1{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}

/* value part */
#invoice-table .rmcjj-fast-prev-detail-row-v1 .rmcjj-fast-prev-value-v1{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  font-weight:700 !important;
}

/* If old markup does not use value class, still protect strong/span text */
#invoice-table .rmcjj-fast-prev-detail-row-v1 strong,
#invoice-table .rmcjj-fast-prev-detail-row-v1 b,
#invoice-table .rmcjj-fast-prev-detail-row-v1 span{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* Keep prev balance badge fitting well */
#invoice-table .rmcjj-fast-prev-balance-badge-v1{
  max-width:100% !important;
  padding:4px 6px !important;
  font-size:.54rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

@media (max-width:1000px){
  #invoice-table td.rmcjj-fast-status-cell-v1{
    width:156px !important;
    min-width:156px !important;
    max-width:156px !important;
  }
}

/* RMCJJ_PREV_BALANCE_FULL_AMOUNT_V2 */

#invoice-table td.rmcjj-fast-status-cell-v1{
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  box-sizing:border-box !important;
}

/* Actual JS markup uses:
   <span>BALANCE:</span><strong>₱...</strong>
*/
#invoice-table .rmcjj-fast-prev-detail-row-v1{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:baseline !important;
  column-gap:4px !important;
  overflow:visible !important;
}

#invoice-table .rmcjj-fast-prev-detail-row-v1 span{
  white-space:nowrap !important;
  overflow:visible !important;
}

#invoice-table .rmcjj-fast-prev-detail-row-v1 strong{
  min-width:0 !important;
  max-width:100% !important;

  overflow:visible !important;
  text-overflow:clip !important;

  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;

  font-size:.74rem !important;
  line-height:1.15 !important;
}

/* Keep full PREV BALANCE text too */
#invoice-table .rmcjj-fast-prev-balance-badge-v1{
  width:auto !important;
  max-width:100% !important;
  padding:4px 6px !important;
  font-size:.56rem !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

@media (max-width:1000px){
  #invoice-table td.rmcjj-fast-status-cell-v1{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
  }
}

/* RMCJJ_STATUS_FULL_BALANCE_V3 */

/*
 * Original fast PREV BALANCE layout was
 * designed around a 260px Status column.
 */

#invoice-table th.rmcjj-status-full-balance-v3,
#invoice-table td.rmcjj-status-full-balance-v3,
#invoice-table td.rmcjj-fast-status-cell-v1{
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  box-sizing:border-box !important;
  vertical-align:top !important;
}

/* Never cut the status contents */
#invoice-table
.rmcjj-fast-status-stack-v1{
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

/* Status badges */
#invoice-table
.rmcjj-fast-status-badges-v1{
  width:100% !important;
  max-width:100% !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;

  gap:5px !important;

  overflow:visible !important;
}

/* Full PREV BALANCE text */
#invoice-table
.rmcjj-fast-prev-balance-badge-v1{
  width:auto !important;
  max-width:none !important;

  padding:4px 7px !important;

  font-size:.59rem !important;
  line-height:1 !important;

  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Previous balance details */
#invoice-table
.rmcjj-fast-prev-details-v1{
  width:100% !important;
  max-width:100% !important;

  display:flex !important;
  flex-direction:column !important;

  gap:3px !important;

  overflow:visible !important;
}

/*
 * Keep:
 * PREV BILL: 1
 * BALANCE: ₱1,000.00
 * on complete readable lines.
 */
#invoice-table
.rmcjj-fast-prev-detail-row-v1{
  width:100% !important;
  max-width:100% !important;

  display:flex !important;
  align-items:baseline !important;

  gap:4px !important;

  overflow:visible !important;

  font-size:.72rem !important;
  line-height:1.2 !important;
}

#invoice-table
.rmcjj-fast-prev-detail-row-v1
span{
  flex:0 0 auto !important;

  white-space:nowrap !important;
  overflow:visible !important;
}

#invoice-table
.rmcjj-fast-prev-detail-row-v1
strong{
  flex:0 0 auto !important;

  min-width:auto !important;
  max-width:none !important;

  white-space:nowrap !important;

  overflow:visible !important;
  text-overflow:clip !important;

  font-size:.76rem !important;
  line-height:1.2 !important;
}

/* Keep pullout badge readable too */
#invoice-table
.rmcjj-fast-for-pullout-badge-v1,
#invoice-table
.rmcjj-fast-pulled-out-badge-v1{
  width:auto !important;
  max-width:none !important;
  white-space:nowrap !important;
  overflow:visible !important;
}

/*
 * Allow horizontal table scrolling rather
 * than squeezing the Status column.
 */
#invoice-table{
  table-layout:auto !important;
}

#invoice-table
.rmcjj-fast-status-cell-v1{
  overflow:visible !important;
}

@media (max-width:1000px){
  #invoice-table
  th.rmcjj-status-full-balance-v3,
  #invoice-table
  td.rmcjj-status-full-balance-v3,
  #invoice-table
  td.rmcjj-fast-status-cell-v1{
    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;
  }
}

/* RMCJJ_BILLS_CONTENT_BASED_SPACING_V1
   Bills columns size from their content instead of old fixed percentages.
   The customer/contact/address column receives the remaining free space. */

body.admin-body
section[data-section="bills"]
.table-wrap {
  overflow-x: auto !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

/* Reset every historical fixed percentage width. */
body.admin-body
section[data-section="bills"]
#invoice-table th,
body.admin-body
section[data-section="bills"]
#invoice-table td {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Selection checkbox: only the space the control needs. */
body.admin-body
section[data-section="bills"]
#invoice-table th.bill-delete-select-column,
body.admin-body
section[data-section="bills"]
#invoice-table td:has(input[data-bill-delete-id]) {
  width: 1% !important;
  min-width: 46px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/*
  The nine business columns are addressed from the right so this works
  whether the optional Select column is present or not.

  nth-last-child(9) = Customer / Contact / Service Address
  nth-last-child(8) = Account / UID
  nth-last-child(7) = Invoice / Period
  nth-last-child(6) = Amount / Paid
  nth-last-child(5) = Status
  nth-last-child(4) = Billing Notice
  nth-last-child(3) = Due / Paid
  nth-last-child(2) = Reference / Method
  last-child        = Action
*/

/* Main flexible column: use whatever space is left. */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-last-child(9),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(9) {
  width: auto !important;
  min-width: 230px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Compact identity/value columns: fit their written content. */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-last-child(8),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(8),
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-last-child(7),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(7),
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-last-child(6),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(6),
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-last-child(5),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(5),
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-last-child(4),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(4),
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-last-child(3),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(3) {
  width: 1% !important;
  white-space: nowrap !important;
}

/* Reference may be short or long. Keep short values compact, wrap long ones. */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-last-child(2),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(2) {
  width: 1% !important;
  min-width: 112px !important;
  max-width: 190px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Action uses only enough space for its controls, never a fixed percentage. */
body.admin-body
section[data-section="bills"]
#invoice-table th:last-child,
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child {
  width: 1% !important;
  min-width: 108px !important;
  max-width: 150px !important;
  white-space: normal !important;
}

/* Slightly tighter horizontal padding keeps the register professional. */
body.admin-body
section[data-section="bills"]
#invoice-table th {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table td {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Preserve readable service-address wrapping inside the flexible column. */
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-last-child(9) small,
body.admin-body
section[data-section="bills"]
#invoice-table .bill-service-address-v8 {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Smaller screens retain natural sizing and can scroll only when needed. */
@media (max-width: 900px) {
  body.admin-body
  section[data-section="bills"]
  #invoice-table {
    min-width: 900px !important;
  }
}

/* RMCJJ_BILLS_REFERENCE_SPACING_V1_1
   Final Bills register spacing based on the supplied reference screenshot.
   This intentionally overrides the earlier content-auto layout. */

body.admin-body
section[data-section="bills"]
.table-wrap {
  overflow-x: auto !important;
}

/* Use the full register width, but distribute it in balanced columns. */
body.admin-body
section[data-section="bills"]
#invoice-table {
  display: table !important;
  width: 100% !important;
  min-width: 1180px !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  margin: 0 !important;
  border-collapse: collapse !important;
}

/* Clear older auto/content-width constraints. */
body.admin-body
section[data-section="bills"]
#invoice-table th,
body.admin-body
section[data-section="bills"]
#invoice-table td {
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

/*
  Current table with Select permission:
    1 Select
    2 Customer / Contact / Service Address
    3 Account / UID
    4 Invoice / Period
    5 Amount / Paid
    6 Status
    7 Billing Notice
    8 Due / Paid
    9 Reference / Method
   10 Action

  Distribution totals 100%.
*/

/* Select */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(1),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(1) {
  width: 4% !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Customer / Contact / Service Address */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(2),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(2) {
  width: 27% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Account / UID */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(3),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(3) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Invoice / Period */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(4),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(4) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Amount / Paid */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(5),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(5) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Status */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(6),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(6) {
  width: 7% !important;
  white-space: nowrap !important;
}

/* Billing Notice */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(7),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(7) {
  width: 8% !important;
  white-space: normal !important;
}

/* Due / Paid */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(8),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(8) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Reference / Method */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(9),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(9) {
  width: 8% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Action */
body.admin-body
section[data-section="bills"]
#invoice-table th:nth-child(10),
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(10) {
  width: 10% !important;
  min-width: 118px !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* Compact professional cell padding like the reference. */
body.admin-body
section[data-section="bills"]
#invoice-table th {
  padding: 10px 9px !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table td {
  padding: 11px 9px !important;
}

/* Keep the merged contact/service-address information readable. */
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(2) small,
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(2) .bill-service-address-v8 {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/*
  ACTION LAYOUT
  Payment            -> own row
  Assign Coupon       -> own row
  A4 + A5             -> same row when space permits
  80 mm               -> wraps naturally below
*/
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child {
  line-height: 1.2 !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .small-action {
  min-height: 28px !important;
  padding: 4px 7px !important;
  margin: 0 4px 5px 0 !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .manual-payment,
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .invoice-coupon-assign,
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .invoice-coupon-remove {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .invoice-print {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* If a legacy row-actions wrapper is present, keep it compact. */
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .row-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* Narrow screens can scroll without crushing the action controls. */
@media (max-width: 1180px) {
  body.admin-body
  section[data-section="bills"]
  #invoice-table {
    min-width: 1180px !important;
  }
}

/* RMCJJ_BILLS_HIDE_REDUNDANT_PULLED_OUT_BADGE_V1
   PULLED OUT remains a real backend lifecycle/filter state.
   Only the redundant Bills Status-cell badge is hidden. */
body.admin-body
section[data-section="bills"]
#invoice-table .rmcjj-fast-pulled-out-badge-v1,
body.admin-body
section[data-section="bills"]
#invoice-table .rmcjj-pullout-lifecycle-badge.pulled_out {
  display: none !important;
}

/* RMCJJ_BILLS_SINGLE_PULLED_OUT_BADGE_BALANCED_SPACING_V1
   Keep exactly ONE completed PULLED OUT badge.
   The previous correction hid both the primary fast badge and the legacy
   lifecycle badge. Restore the primary badge only and continue hiding the
   legacy duplicate.

   Bills width target with Select:
     Select                                  4%
     Customer / Contact / Service Address   20%
     Account / UID                          10%
     Invoice / Period                        9%
     Amount / Paid                           9%
     Status                                  8%
     Billing Notice                          8%
     Due / Paid                              9%
     Reference / Method                      8%
     Action                                 15%
                                            ----
                                            100%
*/

/* Restore the ONE primary PULLED OUT badge. */
body.admin-body
section[data-section="bills"]
#invoice-table .rmcjj-fast-pulled-out-badge-v1 {
  display: inline-flex !important;
  align-items: center !important;
}

/* Keep only the old/legacy duplicate hidden. */
body.admin-body
section[data-section="bills"]
#invoice-table
.rmcjj-pullout-state-row
.rmcjj-pullout-lifecycle-badge.pulled_out {
  display: none !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table
.rmcjj-pullout-state-row:has(.rmcjj-pullout-lifecycle-badge.pulled_out) {
  display: none !important;
}

/* Stable full-width table. */
body.admin-body
section[data-section="bills"]
#invoice-table {
  width: 100% !important;
  min-width: 1260px !important;
  table-layout: fixed !important;
}

/* -------------------------------------------------
   ADMIN / USERS WITH THE SELECT COLUMN (10 columns)
   ------------------------------------------------- */

/* Select */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(1),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(1) {
  width: 4% !important;
}

/* Customer / Contact / Service Address */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(2),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(2) {
  width: 20% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Account / UID */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(3),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(3) {
  width: 10% !important;
  white-space: nowrap !important;
}

/* Invoice / Period */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(4),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(4) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Amount / Paid */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(5),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(5) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Status */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(6),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(6) {
  width: 8% !important;
  white-space: normal !important;
}

/* Billing Notice */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(7),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(7) {
  width: 8% !important;
  white-space: normal !important;
}

/* Due / Paid */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(8),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(8) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Reference / Method */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(9),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(9) {
  width: 8% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Action */
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) th:nth-child(10),
body.admin-body
section[data-section="bills"]
#invoice-table:has(th.bill-delete-select-column) td:nth-child(10) {
  width: 15% !important;
  min-width: 185px !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* -------------------------------------------------
   USERS WITHOUT THE SELECT COLUMN (9 columns)
   ------------------------------------------------- */

/* Customer / Contact / Service Address */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(1),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(1) {
  width: 22% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Account / UID */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(2),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(2) {
  width: 10% !important;
  white-space: nowrap !important;
}

/* Invoice / Period */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(3),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(3) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Amount / Paid */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(4),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(4) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Status */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(5),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(5) {
  width: 8% !important;
  white-space: normal !important;
}

/* Billing Notice */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(6),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(6) {
  width: 8% !important;
  white-space: normal !important;
}

/* Due / Paid */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(7),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(7) {
  width: 9% !important;
  white-space: nowrap !important;
}

/* Reference / Method */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(8),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(8) {
  width: 9% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Action */
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) th:nth-child(9),
body.admin-body
section[data-section="bills"]
#invoice-table:not(:has(th.bill-delete-select-column)) td:nth-child(9) {
  width: 16% !important;
  min-width: 185px !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* Slightly tighter table padding keeps information close without crowding. */
body.admin-body
section[data-section="bills"]
#invoice-table th {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table td {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

/* Customer details may wrap naturally; do not reserve empty horizontal space. */
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(2) small,
body.admin-body
section[data-section="bills"]
#invoice-table td:nth-child(2) .bill-service-address-v8 {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* More usable Action area. */
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child {
  line-height: 1.15 !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .row-actions,
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .rmcjj-pullout-action-slot-v1 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
}

body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .small-action,
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .manual-payment,
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .invoice-coupon-assign,
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .invoice-coupon-remove,
body.admin-body
section[data-section="bills"]
#invoice-table td:last-child .invoice-print {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 5px 5px 0 !important;
  padding: 4px 7px !important;
  white-space: nowrap !important;
}

/* Horizontal scroll only when the viewport is genuinely too narrow. */
@media (max-width: 1260px) {
  body.admin-body
  section[data-section="bills"]
  #invoice-table {
    min-width: 1260px !important;
  }
}

/* RMCJJ_BILLS_HIDE_BOTTOM_FOR_PULLOUT_V1
   Bills Status has two FOR PULLOUT renderers:
   1) rmcjj-fast-for-pullout-badge-v1 = primary TOP badge (keep)
   2) rmcjj-pullout-state-row + rmcjj-pullout-lifecycle-badge.for_pullout
      = legacy BOTTOM duplicate (hide)

   Mark as Pulled is moved separately to the Action column and remains active.
*/

/* Keep the primary/top FOR PULLOUT badge visible. */
body.admin-body
section[data-section="bills"]
#invoice-table .rmcjj-fast-for-pullout-badge-v1 {
  display: inline-flex !important;
  align-items: center !important;
}

/* Hide the old bottom FOR PULLOUT badge. */
body.admin-body
section[data-section="bills"]
#invoice-table
.rmcjj-pullout-state-row
.rmcjj-pullout-lifecycle-badge.for_pullout {
  display: none !important;
}

/* Remove the now-redundant bottom row so it leaves no blank vertical space. */
body.admin-body
section[data-section="bills"]
#invoice-table
.rmcjj-pullout-state-row:has(.rmcjj-pullout-lifecycle-badge.for_pullout) {
  display: none !important;
}

/* RMCJJ_CUSTOMER_EXTENSIONS_MEGA_V1_3 */
.rmcjj-customer-extension-card{grid-column:1/-1;border:1px solid var(--line,#29483c);border-radius:12px;padding:14px;background:rgba(255,255,255,.025)}
.rmcjj-ext-title{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}.rmcjj-ext-title small{opacity:.72}.rmcjj-mode-options{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px}.rmcjj-mode-options label{display:flex;align-items:center;gap:7px}.rmcjj-tenant-shared-password{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-top:12px}.rmcjj-tenant-shared-password label{flex:1;min-width:260px}.rmcjj-main-protected-note{font-size:12px;opacity:.75}.rmcjj-inline-input{display:flex;gap:7px}.rmcjj-inline-input input{flex:1}
.rmcjj-cutoff-dialog{width:min(720px,calc(100vw - 30px))}.rmcjj-cutoff-create{display:grid;grid-template-columns:1fr 140px auto;gap:8px;padding:16px}.rmcjj-cutoff-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line,#29483c)}.rmcjj-cutoff-row small{display:block;opacity:.7;margin-top:3px}.rmcjj-cutoff-row>div:last-child{display:flex;gap:7px}
.rmcjj-import-shell{width:min(1500px,calc(100% - 34px));margin:0 auto;padding:28px 0 50px}.rmcjj-import-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.rmcjj-import-head p{margin:0 0 5px;text-transform:uppercase;font-size:11px;letter-spacing:.12em;opacity:.7}.rmcjj-import-head h1{margin:0}.rmcjj-import-head span{display:block;margin-top:8px;opacity:.72}.rmcjj-import-panel{padding:18px;margin-bottom:16px}.rmcjj-import-panel h2{margin-top:0}#rmcjj-import-upload-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#rmcjj-import-map-grid{display:grid;gap:8px;margin:14px 0}.rmcjj-map-row{display:grid;grid-template-columns:minmax(220px,1fr) 34px minmax(240px,1fr);gap:8px;align-items:center;padding:9px;border:1px solid var(--line,#29483c);border-radius:9px}.rmcjj-map-row small{display:block;opacity:.65}.rmcjj-map-row>span{text-align:center;font-weight:900}.rmcjj-import-options{margin:14px 0}.rmcjj-import-table{width:100%;border-collapse:collapse}.rmcjj-import-table th,.rmcjj-import-table td{padding:9px;border-bottom:1px solid var(--line,#29483c);text-align:left}.rmcjj-import-error-list{margin:14px 0;padding:12px;border:1px solid #a44;border-radius:9px;background:rgba(180,50,50,.08)}.rmcjj-import-error-list>div{margin-top:5px}.rmcjj-import-ok{margin:14px 0;padding:12px;border:1px solid #2c8b5c;border-radius:9px;background:rgba(34,139,94,.08)}.rmcjj-generated-passwords{margin-top:14px;overflow:auto}.rmcjj-generated-passwords table{width:100%;border-collapse:collapse}.rmcjj-generated-passwords th,.rmcjj-generated-passwords td{padding:8px;border-bottom:1px solid var(--line,#29483c)}
@media(max-width:760px){.rmcjj-cutoff-create{grid-template-columns:1fr}.rmcjj-cutoff-row{align-items:flex-start;flex-direction:column}.rmcjj-map-row{grid-template-columns:1fr}.rmcjj-import-head{flex-direction:column}}

/* ==========================================================
   RMCJJ_CUSTOMER_HEADER_ARRANGE_V1
   Customer toolbar professional arrangement
   UI ONLY - no billing, PPPoE, cutoff, import, or DB logic
   ========================================================== */

[data-section="customers"] .section-title{
  align-items:flex-start;
}

[data-section="customers"] .customer-header-actions{
  margin-left:auto;
  display:grid;
  grid-template-columns:
    minmax(190px,260px)
    auto
    auto
    auto;
  grid-template-areas:
    "router sync migrate count"
    "import cutoff . .";
  align-items:center;
  justify-content:end;
  gap:10px;
  width:min(100%,760px);
}

[data-section="customers"] .customer-header-actions #sync-mikrotik-router{
  grid-area:router;
  width:100% !important;
  min-width:190px;
  max-width:none;
}

[data-section="customers"] .customer-header-actions #sync-all-mikrotik{
  grid-area:sync;
}

[data-section="customers"] .customer-header-actions #mikrotik-migrate-open{
  grid-area:migrate;
}

[data-section="customers"] .customer-header-actions .count-pill{
  grid-area:count;
  justify-self:end;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
}

[data-section="customers"] .customer-header-actions #rmcjj-import-customers-button{
  grid-area:import;
}

[data-section="customers"] .customer-header-actions #rmcjj-cutoff-manager-open{
  grid-area:cutoff;
}

[data-section="customers"] .customer-header-actions .btn,
[data-section="customers"] .customer-header-actions .sync-mikrotik-router{
  min-height:38px;
  height:38px;
  margin:0;
  white-space:nowrap;
}

[data-section="customers"] .customer-header-actions #rmcjj-import-customers-button,
[data-section="customers"] .customer-header-actions #rmcjj-cutoff-manager-open{
  justify-self:start;
}

/* Keep New Customer / Hide New Customer as a separate primary action. */
[data-section="customers"] .new-customer-collapse-actions{
  margin-left:auto;
}

[data-section="customers"] .new-customer-collapse-toggle{
  min-width:170px;
  min-height:42px;
}

@media (max-width:1200px){
  [data-section="customers"] .customer-header-actions{
    grid-template-columns:minmax(180px,1fr) auto auto;
    grid-template-areas:
      "router sync migrate"
      "import cutoff count";
    width:min(100%,690px);
  }
}

@media (max-width:900px){
  [data-section="customers"] .section-title{
    flex-direction:column;
  }

  [data-section="customers"] .customer-header-actions{
    width:100%;
    margin-left:0;
    grid-template-columns:minmax(180px,1fr) 1fr 1fr;
    grid-template-areas:
      "router router router"
      "sync migrate count"
      "import cutoff .";
    justify-content:stretch;
  }

  [data-section="customers"] .customer-header-actions .btn{
    width:100%;
  }

  [data-section="customers"] .customer-header-actions .count-pill{
    justify-self:stretch;
    justify-content:center;
  }
}

@media (max-width:620px){
  [data-section="customers"] .customer-header-actions{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "router router"
      "sync sync"
      "migrate migrate"
      "import cutoff"
      "count count";
  }

  [data-section="customers"] .new-customer-collapse-actions,
  [data-section="customers"] .new-customer-collapse-toggle{
    width:100%;
  }
}

/* ==========================================================
   RMCJJ_CUSTOMER_HEADER_ARRANGE_V1_1
   Fix toolbar overflow, title clipping, and Import Clients
   button alignment.
   UI ONLY.
   ========================================================== */

/* The title and the action toolbar must share the available width.
   Never allow the action block to push outside the section border. */
[data-section="customers"] > .section-title{
  display:grid !important;
  grid-template-columns:minmax(280px,1fr) minmax(0,720px) !important;
  align-items:start !important;
  gap:22px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

[data-section="customers"] > .section-title > div:first-child{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere;
}

[data-section="customers"] > .section-title > div:first-child h2,
[data-section="customers"] > .section-title > div:first-child p{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Keep all customer action controls inside their allocated column. */
[data-section="customers"] .customer-header-actions{
  margin-left:0 !important;
  width:100% !important;
  max-width:720px !important;
  min-width:0 !important;
  box-sizing:border-box !important;

  display:grid !important;
  grid-template-columns:
    minmax(190px,1fr)
    max-content
    max-content
    max-content !important;
  grid-template-areas:
    "router sync migrate count"
    "import cutoff . ." !important;

  align-items:center !important;
  justify-content:stretch !important;
  column-gap:10px !important;
  row-gap:10px !important;
}

/* MikroTik select can shrink instead of causing horizontal overflow. */
[data-section="customers"] .customer-header-actions #sync-mikrotik-router{
  grid-area:router !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:40px !important;
}

/* Equal, professional action height. */
[data-section="customers"] .customer-header-actions .btn{
  min-height:40px !important;
  height:40px !important;
  margin:0 !important;
  padding-left:14px !important;
  padding-right:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

[data-section="customers"] .customer-header-actions #sync-all-mikrotik{
  grid-area:sync !important;
}

[data-section="customers"] .customer-header-actions #mikrotik-migrate-open{
  grid-area:migrate !important;
}

/* Customer count stays inside the same toolbar boundary. */
[data-section="customers"] .customer-header-actions .count-pill{
  grid-area:count !important;
  justify-self:end !important;
  min-height:36px !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

/* IMPORT CLIENTS: explicitly style the anchor like a real toolbar button.
   The prior version relied on generic .btn rules and could look undersized
   or uneven because it is an <a>, not a <button>. */
[data-section="customers"] .customer-header-actions #rmcjj-import-customers-button{
  grid-area:import !important;
  justify-self:start !important;
  min-width:128px !important;
  text-decoration:none !important;
  line-height:1 !important;
}

[data-section="customers"] .customer-header-actions #rmcjj-cutoff-manager-open{
  grid-area:cutoff !important;
  justify-self:start !important;
  min-width:132px !important;
}

/* New Customer stays within its own panel header. */
[data-section="customers"] .new-customer-collapse-actions{
  margin-left:auto !important;
  max-width:100% !important;
}

[data-section="customers"] .new-customer-collapse-toggle{
  min-width:170px;
  max-width:100%;
}

/* At narrower desktop widths, place actions below the title rather than
   squeezing or overflowing outside the section. */
@media (max-width:1280px){
  [data-section="customers"] > .section-title{
    grid-template-columns:1fr !important;
  }

  [data-section="customers"] .customer-header-actions{
    max-width:100% !important;
    grid-template-columns:
      minmax(190px,1fr)
      max-content
      max-content
      max-content !important;
  }
}

@media (max-width:900px){
  [data-section="customers"] .customer-header-actions{
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "router router"
      "sync migrate"
      "import cutoff"
      "count count" !important;
  }

  [data-section="customers"] .customer-header-actions .btn,
  [data-section="customers"] .customer-header-actions #rmcjj-import-customers-button,
  [data-section="customers"] .customer-header-actions #rmcjj-cutoff-manager-open{
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }

  [data-section="customers"] .customer-header-actions .count-pill{
    justify-self:stretch !important;
  }
}

@media (max-width:620px){
  [data-section="customers"] .customer-header-actions{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "router"
      "sync"
      "migrate"
      "import"
      "cutoff"
      "count" !important;
  }
}

/* RMCJJ_CUTOFF_IMPORT_FIX_V1_4 - customer import visual repair */
.rmcjj-import-shell{
  width:min(1480px,calc(100% - 40px)) !important;
  margin:0 auto !important;
  padding:28px 0 54px !important;
}
.rmcjj-import-head{
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:20px !important;
  margin:0 0 16px !important;
  padding:20px 22px !important;
  border:1px solid var(--line) !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(15,39,29,.05);
}
.rmcjj-import-head h1{font-size:28px !important;line-height:1.15;margin:2px 0 0 !important;}
.rmcjj-import-head span{max-width:780px;line-height:1.55;}
.rmcjj-import-head > .btn{
  min-height:42px !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  border-color:var(--green) !important;
  color:var(--green) !important;
}
.rmcjj-import-head > .btn:hover{background:var(--green-soft) !important;}
.rmcjj-import-panel{
  padding:22px !important;
  margin-bottom:16px !important;
  border-radius:15px !important;
}
#rmcjj-import-upload-form{
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) auto !important;
  gap:12px !important;
  align-items:center !important;
  max-width:760px;
  margin-top:16px;
}
#rmcjj-import-file{
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
#rmcjj-import-upload-form .btn{min-height:44px !important;}
#rmcjj-import-map-panel[hidden],
#rmcjj-import-preview-panel[hidden],
#rmcjj-import-result-panel[hidden]{display:none !important;}
@media(max-width:760px){
  .rmcjj-import-shell{width:min(100% - 20px,1480px) !important;padding-top:14px !important;}
  .rmcjj-import-head{grid-template-columns:1fr !important;align-items:start !important;}
  .rmcjj-import-head > .btn{width:100% !important;}
  #rmcjj-import-upload-form{grid-template-columns:1fr !important;}
}


/* ==========================================================
   RMCJJ_DUE_DAY_AS_CUTOFF_DROPDOWN_V1_1
   ========================================================== */

/*
 * Never show a second Billing Cutoff field.
 */
#new-subscriber-form
#rmcjj-customer-cutoff-field {
  display: none !important;
}


/*
 * When cutoff is ON, the REAL billingCutoffId
 * selector occupies the normal Due Day position.
 */
#new-subscriber-form
#rmcjj-due-day-cutoff-select {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
}


/*
 * Respect hidden state.
 */
#new-subscriber-form
#rmcjj-due-day-cutoff-select[hidden],
#new-subscriber-form
[name="dueDay"][hidden] {
  display: none !important;
}


/* ==========================================================
   RMCJJ_PPPOE_PASSWORD_BOX_MODE_V1
   ========================================================== */

/* Hide old extra visible individual field in New Customer. */
#new-subscriber-form
#rmcjj-individual-password-field {
  display: none !important;
}

/* Shared / Individual box uses the same visible area. */
.rmcjj-pppoe-individual-mode .rmcjj-pppoe-title,
.rmcjj-pppoe-shared-mode .rmcjj-pppoe-title {
  font-weight: 800;
  margin-bottom: 6px;
}

/* RMCJJ_PPPOE_MODE_NEAR_PASSWORD_V2_1 */

#new-subscriber-form
.rmcjj-customer-extension-card.rmcjj-mode-card-hidden {
  display: none !important;
}

#new-subscriber-form
#rmcjj-password-mode-inline {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px 14px !important;

  margin: 0 0 7px !important;
  padding: 0 !important;
}

#new-subscriber-form
#rmcjj-password-mode-inline > strong {
  font-size: 11px !important;
  white-space: nowrap;
}

#new-subscriber-form
#rmcjj-password-mode-inline
.rmcjj-mode-options {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;

  margin: 0 !important;
  padding: 0 !important;
}

#new-subscriber-form
#rmcjj-password-mode-inline
.rmcjj-mode-options label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 11px !important;
  white-space: nowrap;
}

#new-subscriber-form
#rmcjj-password-mode-inline
input[type="radio"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
}

@media (max-width:620px) {
  #new-subscriber-form
  #rmcjj-password-mode-inline {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}


/* RMCJJ_IMPORT_INSTALLED_DATE_TEMPLATE_V1 */

.rmcjj-import-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.rmcjj-import-field-guide {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border, #315b4a);
  border-radius: 10px;
}

.rmcjj-import-field-guide > div {
  margin-top: 8px;
  line-height: 1.45;
}

.rmcjj-import-field-guide p {
  margin: 8px 0 0;
}

.rmcjj-field-required,
.rmcjj-field-optional {
  display: inline-block;
  min-width: 92px;
  margin-right: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.rmcjj-field-required {
  border: 1px solid currentColor;
}

.rmcjj-field-optional {
  opacity: .78;
  border: 1px solid currentColor;
}

@media (max-width: 700px) {
  .rmcjj-import-head-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   RMCJJ_IMPORT_BUTTON_TEXT_ALIGN_V1
   Import page button text alignment
   UI ONLY
   ========================================================= */

.rmcjj-import-head-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    height: 44px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    line-height: 1.15 !important;
    text-align: center !important;
    vertical-align: middle !important;

    box-sizing: border-box !important;
    white-space: nowrap !important;
}


/* =========================================================
   RMCJJ_CUSTOMER_PULLOUT_STATUS_ACTION_V1
   ========================================================= */

/*
 * Customers page lifecycle badges.
 */

#customer-table
.rmcjj-customer-pullout-badge.for_pullout {
    display:inline-flex;
    align-items:center;
    border:1px solid #b77b11;
    color:#ffd060;
    background:rgba(183,123,17,.16);
    font-weight:800;
    white-space:nowrap;
}

#customer-table
.rmcjj-customer-pullout-badge.pulled_out {
    display:inline-flex;
    align-items:center;
    border:1px solid #945353;
    color:#ffbbb1;
    background:rgba(148,83,83,.17);
    font-weight:800;
    white-space:nowrap;
}

#customer-table
.rmcjj-customer-mark-pulled-out {
    white-space:nowrap;
}


/*
 * Mark as Pulled is now a CUSTOMER lifecycle action.
 *
 * Keep the Bills FOR PULLOUT status/badge for billing
 * information, but do not show the lifecycle-completion
 * action inside Bills anymore.
 */

#invoice-table
.rmcjj-mark-pulled-out,

#invoice-table
.rmcjj-pullout-action-slot-v1 {
    display:none !important;
}


/* =========================================================
   RMCJJ_CUSTOMER_STATUS_FILTER_V1
   ========================================================= */

body.admin-body
section[data-section="customers"]
.rmcjj-customer-filter-tools-v1 {
    display:grid;
    grid-template-columns:minmax(180px,240px) minmax(320px,1fr);
    gap:12px;
    align-items:end;
}

body.admin-body
section[data-section="customers"]
.rmcjj-customer-status-filter-label-v1,

body.admin-body
section[data-section="customers"]
.rmcjj-customer-search-label-v1 {
    display:grid;
    gap:6px;
    min-width:0;
}

body.admin-body
section[data-section="customers"]
.rmcjj-customer-status-filter-label-v1 > span,

body.admin-body
section[data-section="customers"]
.rmcjj-customer-search-label-v1 > span {
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--muted);
}

body.admin-body
section[data-section="customers"]
#customer-status-filter,

body.admin-body
section[data-section="customers"]
#customer-search {
    width:100%;
    min-width:0;
    margin:0;
}

@media (max-width:760px) {

    body.admin-body
    section[data-section="customers"]
    .rmcjj-customer-filter-tools-v1 {
        grid-template-columns:1fr;
    }

}


/* =========================================================
   RMCJJ_CUSTOMER_STATUS_FILTER_PROFESSIONAL_SIZE_V2
   Professional-sized Customer Status + Search controls.
   ========================================================= */

body.admin-body
section[data-section="customers"]
.rmcjj-customer-filter-tools-v1 {
    padding:14px 16px !important;
    gap:14px !important;
    align-items:end !important;
}


body.admin-body
section[data-section="customers"]
.rmcjj-customer-status-filter-label-v1 > span,

body.admin-body
section[data-section="customers"]
.rmcjj-customer-search-label-v1 > span {
    display:block !important;
    margin:0 0 3px !important;
    font-size:.72rem !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:.075em !important;
}


body.admin-body
section[data-section="customers"]
#customer-status-filter,

body.admin-body
section[data-section="customers"]
#customer-search {
    display:block !important;

    width:100% !important;

    height:42px !important;
    min-height:42px !important;

    padding:9px 12px !important;

    border-radius:9px !important;

    font-size:.82rem !important;
    line-height:1.2 !important;

    box-sizing:border-box !important;
}


body.admin-body
section[data-section="customers"]
#customer-status-filter {
    padding-right:34px !important;
}


body.admin-body
section[data-section="customers"]
#customer-search::placeholder {
    font-size:.78rem !important;
    opacity:.8;
}


@media (max-width:760px) {

    body.admin-body
    section[data-section="customers"]
    .rmcjj-customer-filter-tools-v1 {
        padding:12px !important;
        gap:10px !important;
    }


    body.admin-body
    section[data-section="customers"]
    #customer-status-filter,

    body.admin-body
    section[data-section="customers"]
    #customer-search {
        height:44px !important;
        min-height:44px !important;
        font-size:.86rem !important;
    }

}


/* =========================================================
   RMCJJ_CUSTOMER_FILTER_COUNT_BETWEEN_V3
   STATUS | COUNT | SEARCH
   ========================================================= */

body.admin-body
section[data-section="customers"]
.rmcjj-customer-filter-tools-v1 {
    grid-template-columns:
        minmax(190px,240px)
        minmax(145px,175px)
        minmax(320px,1fr)
        !important;
}


body.admin-body
section[data-section="customers"]
.rmcjj-customer-filter-count-v3 {
    display:grid;
    gap:6px;
    min-width:0;
}


body.admin-body
section[data-section="customers"]
.rmcjj-customer-filter-count-v3 > span {
    display:block;
    margin:0 0 3px;
    font-size:.72rem;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
    color:var(--muted);
}


body.admin-body
section[data-section="customers"]
.rmcjj-customer-filter-count-value-v3 {
    width:100%;
    height:42px;
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    padding:9px 12px;

    border:1px solid var(--line);
    border-radius:9px;

    background:var(--panel);
    color:var(--text);

    font-size:.82rem;
    line-height:1.2;
    font-weight:800;

    white-space:nowrap;
}


@media (max-width:900px) {

    body.admin-body
    section[data-section="customers"]
    .rmcjj-customer-filter-tools-v1 {
        grid-template-columns:
            minmax(180px,220px)
            minmax(135px,160px)
            minmax(240px,1fr)
            !important;
    }

}


@media (max-width:760px) {

    body.admin-body
    section[data-section="customers"]
    .rmcjj-customer-filter-tools-v1 {
        grid-template-columns:1fr !important;
    }


    body.admin-body
    section[data-section="customers"]
    .rmcjj-customer-filter-count-value-v3 {
        height:44px;
        min-height:44px;
        justify-content:flex-start;
    }

}


/* =========================================================
   RMCJJ_SHORTCUT_CLEAN_LAYOUT_V3

   ONE authoritative Shortcut layout.
   No V1.1 / V1.2 / V1.3 / V1.4 / V1.5 / V2 stacking.
   ========================================================= */


/* ---------------------------------------------------------
   GENERAL
   --------------------------------------------------------- */

#shortcut-workspace {
    min-height:
        0 !important;
}


#shortcut-bill-panel,
#shortcut-bill-panel *,
#shortcut-bill-panel *::before,
#shortcut-bill-panel *::after {
    box-sizing:
        border-box;
}


/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 901px) {

    /*
     * Parent Shortcut remains its original:
     *
     *   PROFILE 240px | CUSTOMER remaining
     */
    #shortcut-workspace {
        display:
            grid !important;

        grid-template-columns:
            240px
            minmax(0, 1fr) !important;

        width:
            100% !important;
    }


    /*
     * When Customer panel is visible, Bill is the next
     * sibling. Put Bill on the complete second row.
     */
    #shortcut-workspace >
    #shortcut-customer-panel:not([hidden])
    +
    #shortcut-bill-panel {
        grid-column:
            1 / -1 !important;

        grid-row:
            2 !important;
    }


    /*
     * Bill-only mode:
     *
     * If Customer is hidden, the browser can retain the
     * original profile-left / bill-right behavior.
     */
    #shortcut-bill-panel {
        display:
            grid !important;

        grid-template-columns:
            320px
            minmax(0, 1fr) !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        align-items:
            start !important;
    }


    /*
     * UNPAID BILLS
     */
    #shortcut-bill-panel
    .shortcut-unpaid-column {
        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        border-right:
            1px solid var(--line) !important;

        border-bottom:
            0 !important;
    }


    /*
     * HISTORY gets every remaining pixel.
     */
    #shortcut-bill-panel
    .shortcut-history-column {
        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        overflow:
            visible !important;
    }


    #shortcut-bill-panel
    .shortcut-history-column
    .table-wrap {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        overflow:
            visible !important;
    }


    /*
     * Override original min-width:560px.
     *
     * On desktop the table must FIT its available History
     * column instead of creating a horizontal slider.
     */
    #shortcut-bill-panel
    table.shortcut-history {
        display:
            table !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        table-layout:
            fixed !important;
    }


    /*
     * Professional History column allocation.
     */

    #shortcut-bill-panel
    table.shortcut-history
    th:nth-child(1),

    #shortcut-bill-panel
    table.shortcut-history
    td:nth-child(1) {
        width:
            19% !important;
    }


    #shortcut-bill-panel
    table.shortcut-history
    th:nth-child(2),

    #shortcut-bill-panel
    table.shortcut-history
    td:nth-child(2) {
        width:
            23% !important;
    }


    #shortcut-bill-panel
    table.shortcut-history
    th:nth-child(3),

    #shortcut-bill-panel
    table.shortcut-history
    td:nth-child(3) {
        width:
            18% !important;
    }


    #shortcut-bill-panel
    table.shortcut-history
    th:nth-child(4),

    #shortcut-bill-panel
    table.shortcut-history
    td:nth-child(4) {
        width:
            16% !important;
    }


    #shortcut-bill-panel
    table.shortcut-history
    th:nth-child(5),

    #shortcut-bill-panel
    table.shortcut-history
    td:nth-child(5) {
        width:
            24% !important;
    }


    #shortcut-bill-panel
    table.shortcut-history
    th,

    #shortcut-bill-panel
    table.shortcut-history
    td {
        min-width:
            0 !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;
    }


    /*
     * Action buttons stay visible and can wrap.
     */
    #shortcut-bill-panel
    table.shortcut-history
    td:last-child {
        overflow:
            visible !important;

        text-overflow:
            clip !important;
    }


    #shortcut-bill-panel
    table.shortcut-history
    .row-actions {
        display:
            flex !important;

        flex-wrap:
            wrap !important;

        align-items:
            center !important;

        gap:
            4px !important;
    }

}


/* =========================================================
   TABLET
   Stack Unpaid and History cleanly.
   ========================================================= */

@media (min-width: 621px) and (max-width: 900px) {

    #shortcut-workspace {
        grid-template-columns:
            200px
            minmax(0, 1fr) !important;

        min-height:
            0 !important;
    }


    #shortcut-workspace >
    #shortcut-customer-panel:not([hidden])
    +
    #shortcut-bill-panel {
        grid-column:
            1 / -1 !important;
    }


    #shortcut-bill-panel {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        width:
            100% !important;
    }


    #shortcut-bill-panel
    .shortcut-unpaid-column {
        border-right:
            0 !important;

        border-bottom:
            1px solid var(--line) !important;
    }


    #shortcut-bill-panel
    .shortcut-history-column
    .table-wrap {
        overflow-x:
            auto !important;
    }


    #shortcut-bill-panel
    table.shortcut-history {
        width:
            100% !important;

        min-width:
            560px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    #shortcut-workspace {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        min-height:
            0 !important;
    }


    #shortcut-workspace >
    #shortcut-profile,

    #shortcut-workspace >
    #shortcut-customer-panel:not([hidden]),

    #shortcut-workspace >
    #shortcut-bill-panel,

    #shortcut-workspace >
    #shortcut-ping-panel:not([hidden]) {
        grid-column:
            1 !important;

        grid-row:
            auto !important;
    }


    #shortcut-bill-panel {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        width:
            100% !important;
    }


    #shortcut-bill-panel
    .shortcut-unpaid-column {
        border-right:
            0 !important;

        border-bottom:
            1px solid var(--line) !important;
    }


    #shortcut-bill-panel
    .shortcut-history-column
    .table-wrap {
        width:
            100% !important;

        overflow-x:
            auto !important;
    }


    #shortcut-bill-panel
    table.shortcut-history {
        width:
            100% !important;

        min-width:
            560px !important;

        table-layout:
            auto !important;
    }

}


/* =========================================================
   RMCJJ_CUSTOMER_TABLE_RESPONSIVE_V1_1

   Customers & accounts table only.
   ========================================================= */


/* ---------- GENERAL ---------- */

#customer-table {
    width:
        100% !important;

    max-width:
        100% !important;

    box-sizing:
        border-box !important;
}


#customer-table th,
#customer-table td {
    min-width:
        0 !important;

    box-sizing:
        border-box !important;

    vertical-align:
        middle !important;
}


/*
 * Override the global TD nowrap only where wrapping
 * improves the Customers table.
 */
#customer-table td:nth-child(1),
#customer-table td:nth-child(2),
#customer-table td:nth-child(3),
#customer-table td:nth-child(4),
#customer-table td:nth-child(7) {
    white-space:
        normal !important;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1201px) {

    #customer-table {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        table-layout:
            fixed !important;
    }


    /*
     * CUSTOMER            16%
     * CONTACT             12%
     * PACKAGE             10%
     * ADDRESS/COVERAGE    25%
     * SERVICE UNTIL        8%
     * STATUS               8%
     * ACTION              21%
     */

    #customer-table th:nth-child(1) {
        width:
            16% !important;
    }

    #customer-table th:nth-child(2) {
        width:
            12% !important;
    }

    #customer-table th:nth-child(3) {
        width:
            10% !important;
    }

    #customer-table th:nth-child(4) {
        width:
            25% !important;
    }

    #customer-table th:nth-child(5) {
        width:
            8% !important;
    }

    #customer-table th:nth-child(6) {
        width:
            8% !important;
    }

    #customer-table th:nth-child(7) {
        width:
            21% !important;
    }


    /*
     * Address + coverage can wrap cleanly.
     */
    #customer-table td:nth-child(4) {
        white-space:
            normal !important;

        overflow-wrap:
            anywhere !important;

        line-height:
            1.35 !important;
    }


    /*
     * Date + status remain one line.
     */
    #customer-table th:nth-child(5),
    #customer-table td:nth-child(5),
    #customer-table th:nth-child(6),
    #customer-table td:nth-child(6) {
        white-space:
            nowrap !important;
    }


    /*
     * Keep complete Action content visible.
     */
    #customer-table th:nth-child(7),
    #customer-table td:nth-child(7) {
        overflow:
            visible !important;
    }

}


/* ---------- TEXT WRAPPING ---------- */

#customer-table .person {
    align-items:
        flex-start !important;

    min-width:
        0 !important;
}


#customer-table .person > span:last-child {
    min-width:
        0 !important;

    max-width:
        100% !important;
}


#customer-table .person strong,
#customer-table .person small,
#customer-table td:nth-child(2),
#customer-table td:nth-child(2) small,
#customer-table td:nth-child(3),
#customer-table td:nth-child(3) small,
#customer-table td:nth-child(4),
#customer-table td:nth-child(4) small {
    overflow-wrap:
        anywhere !important;

    word-break:
        normal !important;
}


/* ---------- ACTION BUTTONS ---------- */

#customer-table td:nth-child(7)
.row-actions {
    display:
        flex !important;

    flex-wrap:
        wrap !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        5px !important;

    width:
        100% !important;

    min-width:
        0 !important;
}


#customer-table td:nth-child(7)
.small-action {
    flex:
        0 0 auto !important;

    min-height:
        27px !important;

    padding:
        5px 7px !important;

    font-size:
        8px !important;

    line-height:
        1.1 !important;

    white-space:
        nowrap !important;
}


/* =========================================================
   MEDIUM DESKTOP / TABLET
   ========================================================= */

@media (min-width: 901px) and (max-width: 1200px) {

    #customer-table {
        width:
            100% !important;

        min-width:
            1050px !important;

        table-layout:
            auto !important;
    }


    #customer-table th:nth-child(1),
    #customer-table td:nth-child(1) {
        min-width:
            155px !important;
    }


    #customer-table th:nth-child(2),
    #customer-table td:nth-child(2) {
        min-width:
            130px !important;
    }


    #customer-table th:nth-child(3),
    #customer-table td:nth-child(3) {
        min-width:
            120px !important;
    }


    #customer-table th:nth-child(4),
    #customer-table td:nth-child(4) {
        min-width:
            240px !important;
    }


    #customer-table th:nth-child(5),
    #customer-table td:nth-child(5) {
        min-width:
            105px !important;

        white-space:
            nowrap !important;
    }


    #customer-table th:nth-child(6),
    #customer-table td:nth-child(6) {
        min-width:
            95px !important;

        white-space:
            nowrap !important;
    }


    #customer-table th:nth-child(7),
    #customer-table td:nth-child(7) {
        min-width:
            225px !important;
    }

}


/* =========================================================
   SMALL TABLET / PHONE
   ========================================================= */

@media (max-width: 900px) {

    #customer-table {
        width:
            100% !important;

        min-width:
            980px !important;

        table-layout:
            auto !important;
    }


    #customer-table th:nth-child(4),
    #customer-table td:nth-child(4) {
        min-width:
            220px !important;
    }


    #customer-table th:nth-child(7),
    #customer-table td:nth-child(7) {
        min-width:
            215px !important;
    }

}


/* =========================================================
   RMCJJ_SCHEDULED_PULLOUT_COMPACT_FONT_V1
   Compact typography for Scheduled Pending Pullout only.
   Does not change other Billing dialogs.
   ========================================================= */

#rmcjj-sp-modal .payment-dialog {
  font-size: 13px;
}

#rmcjj-sp-modal .payment-dialog-head {
  padding: 18px 22px 14px;
}

#rmcjj-sp-modal .payment-dialog-head .eyebrow-text {
  font-size: 10px;
  letter-spacing: .12em;
  margin-bottom: 5px;
}

#rmcjj-sp-modal .payment-dialog-head h2 {
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 3px;
}

#rmcjj-sp-modal #rmcjj-sp-customer {
  font-size: 13px;
  margin: 0;
}

#rmcjj-sp-modal .form-grid {
  gap: 14px;
}

#rmcjj-sp-modal label {
  font-size: 10px;
  line-height: 1.3;
}

#rmcjj-sp-modal input,
#rmcjj-sp-modal textarea {
  font-size: 12px;
}

#rmcjj-sp-modal textarea::placeholder {
  font-size: 11px;
}

#rmcjj-sp-modal .wide-field > strong {
  font-size: 14px;
}

#rmcjj-sp-modal .wide-field > div {
  font-size: 12px;
  line-height: 1.55;
}

#rmcjj-sp-modal .payment-dialog-actions .btn {
  font-size: 11px;
  line-height: 1.2;
  padding: 9px 13px;
  min-height: 36px;
}

#rmcjj-sp-modal .modal-close {
  width: 34px;
  height: 34px;
  font-size: 15px;
}

@media (max-width: 620px) {
  #rmcjj-sp-modal .payment-dialog-head h2 {
    font-size: 19px;
  }

  #rmcjj-sp-modal .payment-dialog {
    font-size: 12px;
  }

  #rmcjj-sp-modal .payment-dialog-actions .btn {
    font-size: 11px;
    padding: 8px 11px;
  }
}


/* RMCJJ_FOLLOWUP_V1: daily manual overdue follow-up indicators */
.status.rmcjj-followup { background:#F97316!important; color:#fff!important; border:1px solid #EA580C!important; font-weight:800; }
.status.rmcjj-followup-sent { background:#2563EB!important; color:#fff!important; border:1px solid #1D4ED8!important; font-weight:800; }