:root{--ink:#18342e;--green:#176e58;--mint:#e9f4ee;--gold:#d7a95c;--bg:#f6f7f4;--line:#e2e9e3;--muted:#708078;--red:#ac4d49}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:15px/1.55 system-ui,Arial,sans-serif;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}.layout{display:flex;min-height:100vh}.side{width:250px;flex-shrink:0;background:#183a32;color:white;padding:25px 15px}.logo{display:flex;align-items:center;gap:12px;padding:5px 10px 18px;border-bottom:1px solid #ffffff22}.mark{width:46px;height:46px;border:2px solid #d7a95c;border-radius:13px;display:grid;place-items:center;font-weight:900;color:#f3d69f}.logo b{font-size:19px}.logo small{display:block;font-size:11px;color:#b7cfc4}.nav{display:grid;gap:5px;margin-top:25px}.nav button{border:0;border-radius:10px;padding:12px 14px;background:none;color:#c5d9d1;text-align:start}.nav button.active,.nav button:hover{background:#2c5949;color:white}.main{width:100%;min-width:0;padding:30px clamp(15px,3vw,42px);max-width:1500px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:25px;flex-wrap:wrap}h1{font-size:28px;margin:0}h2{font-size:19px;margin:0 0 15px}h3{font-size:16px;margin:0 0 12px}.muted{color:var(--muted)}.small{font-size:12px}.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.tag{border:1px solid var(--line);background:white;border-radius:25px;padding:7px 11px;font-size:12px}.btn{border:0;border-radius:10px;padding:11px 16px;background:var(--green);color:white;font-weight:650}.btn.alt{background:white;border:1px solid #cbdcd3;color:var(--green)}.btn:disabled{opacity:.5}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card,.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:21px;box-shadow:0 6px 24px #173d2b08}.card strong{display:block;font-size:32px;margin:10px 0 3px}.card .icon{font-size:22px;color:var(--green)}.panel{margin-top:18px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{padding:13px;background:#f3f8f4;border-radius:12px}.metric b{display:block;font-size:21px}.table{overflow:auto}table{width:100%;border-collapse:collapse;text-align:start;min-width:630px}th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:start}th{background:#f8faf8;color:var(--muted);font-size:12px}td{font-size:14px}.badge{display:inline-block;border-radius:20px;padding:5px 10px;font-size:12px;font-weight:650;background:#e5f4eb;color:#176e58}.badge.warn{background:#fff3d8;color:#956018}.badge.bad{background:#fbeae8;color:#a94745}.field{display:grid;gap:5px;font-size:13px;color:#5d7065;margin:11px 0}.field input,.field select,.field textarea{padding:11px;border:1px solid #d7e1da;border-radius:9px;background:white;color:var(--ink);width:100%;min-width:0}.field input:focus,.field select:focus{outline:2px solid #a2c9b7}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.between{justify-content:space-between}.notice{background:#eff7f1;border:1px solid #dbece0;padding:13px;border-radius:11px;margin:12px 0}.warning{background:#fff7e8;border:1px solid #f2dfb6;padding:12px;border-radius:10px}.page{display:none}.page.active{display:block}.check{display:flex;align-items:flex-start;gap:10px;margin:14px 0}.check input{accent-color:var(--green);width:18px;height:18px;margin-top:4px;flex-shrink:0}.steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.step{padding:8px 12px;border-radius:20px;background:#e8f2eb;color:#27664f;font-size:12px}.preview{border:1px dashed #b4c8bb;background:#fff;border-radius:12px;padding:22px;max-width:720px;margin-top:15px}.hide{display:none!important}.link{background:none;border:0;color:var(--green);font-weight:700;padding:5px}.role{background:#e9f4ee;color:#165944;padding:7px 12px;border-radius:12px}.foot{margin-top:35px;color:#829087;font-size:12px}.mobile-menu{display:none}body[dir=ltr] .side{order:0}body[dir=ltr] .main{order:1}@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.layout{display:block}.side{width:100%;padding:12px}.logo{padding:3px 5px 9px}.nav{display:flex;overflow-x:auto;margin-top:9px;gap:4px;scrollbar-width:thin}.nav button{white-space:nowrap;padding:9px;font-size:12px}.main{padding:17px 12px}.top{align-items:flex-start}h1{font-size:23px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card{padding:14px}.card strong{font-size:25px}.grid2,.grid3{grid-template-columns:1fr}.panel{padding:15px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric b{font-size:18px}.tag{font-size:11px}}
 .health-form{max-width:960px}.health-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding:18px;border:1px solid var(--line);border-radius:15px;background:#fff}.health-head h2{margin:0;font-size:clamp(20px,3vw,29px)}.health-head p{margin:4px 0 0;color:var(--muted)}.health-symbol{font-size:32px;font-weight:850;color:var(--green)}.medical-question{border:1px solid var(--line);border-radius:12px;margin:12px 0;padding:15px;background:white;min-width:0}.medical-question legend{font-weight:650;padding:0 8px;max-width:100%}.radio-row{display:flex;gap:30px;flex-wrap:wrap}.radio-row label{display:flex;gap:7px;align-items:center;cursor:pointer}.health-print p{padding-bottom:10px;border-bottom:1px solid #ddd}@media(max-width:480px){.health-head{padding:12px}.medical-question{padding:11px}.health-symbol{font-size:25px}} 


.health-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.health-choice button{border:2px solid #d9e4df;border-radius:14px;padding:22px 14px;background:#fff;color:#174b3c;font:inherit;font-weight:700;cursor:pointer;text-align:center}.health-choice button.chosen{border-color:#20795b;background:#eef8f2}.pdf-mode{background:#fff;border:1px solid #d9e4df;border-radius:14px;padding:20px;margin:14px 0}.pdf-mode input{width:100%;max-width:100%;padding:12px;border:1px solid #c9d6d0;border-radius:9px}.pdf-mode .hint{color:#66756e;font-size:13px;line-height:1.7}.pdf-mode a{display:inline-block;margin:10px 0;color:#146c54;text-decoration:underline}@media(max-width:500px){.health-choice{grid-template-columns:1fr}}



.health-form{max-width:1050px}.health-form .section-h{margin:25px 0 12px;padding:12px 15px;border-radius:10px;background:#edf4f0;border-inline-start:4px solid #20795b}.medical-question{padding:14px 18px}.medical-question legend{line-height:1.6}.health-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.signature-pad{display:block;width:100%;height:210px;background:#fafbf9;border:2px dashed #aabcb2;border-radius:12px;touch-action:none;cursor:crosshair}.sign-help{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0}.health-file{background:#f6f8f6;padding:14px;border:1px solid #dce7e0;border-radius:12px}.health-file input{width:100%}.health-print{background:#fff;color:#1a2924}.health-print .print-sign{max-width:340px;width:100%;height:110px;object-fit:contain;border-bottom:1px solid #888}.health-print .print-qa{margin:8px 0;padding:5px 0;border-bottom:1px solid #e4e4e4}.health-form textarea{width:100%;min-height:85px;padding:12px;border:1px solid #cbd8cf;border-radius:9px}.health-form .health-age{padding:10px 0;font-weight:650}.health-form .section-h small{font-weight:400}.health-form input[type=radio],.health-form input[type=checkbox]{accent-color:#176e58}.medical-question .radio-row{padding:7px 0}.health-print .print-muted{color:#56685e;font-size:13px}@media(max-width:650px){.health-meta{grid-template-columns:1fr}.signature-pad{height:170px}.health-form .section-h{margin-top:18px}}@media print{body *{visibility:hidden!important}#health-print,#health-print *{visibility:visible!important}#health-print{position:absolute;inset:0;width:100%;max-width:none;border:0;box-shadow:none;padding:20px;direction:rtl}#health-print .print-qa{break-inside:avoid}.side,.top{display:none!important}}



/* V1.1: mobile-first dashboard, persistent owner action and clear status */
.top{position:sticky;top:0;z-index:20;background:rgba(246,247,244,.97);backdrop-filter:blur(12px);padding:12px 0;border-bottom:1px solid var(--line)}
.owner-primary{background:#176e58;color:#fff;border:0;border-radius:12px;padding:12px 17px;font-weight:750;box-shadow:0 4px 14px #176e5829;white-space:nowrap}
.owner-primary:hover{background:#115642}.owner-primary:focus-visible,.link:focus-visible{outline:3px solid #d7a95c;outline-offset:2px}
.badge{font-weight:800;border:1px solid #b8decb}.badge.warn{border-color:#edc66b}.badge.bad{border-color:#e8b5b0}
.status-medical-missing{background:#fbeae8;color:#a94745;border:1px solid #e8b5b0}.status-medical-ok{background:#e5f4eb;color:#176e58;border:1px solid #b8decb}
.member-shortcut{border:0;background:none;padding:2px 0;color:#176e58;font-weight:750;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:start}
.quick-access{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.quick-access button{background:#f0f7f2;color:#176e58;border:1px solid #cee4d6;border-radius:9px;padding:9px 12px;font-weight:650}
.dashboard-title{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.dashboard-title h2{margin:0}
@media(max-width:720px){.top{top:0;padding:9px 0;margin-bottom:14px}.top h1{font-size:19px}.top .toolbar{gap:6px;width:100%}.top .toolbar select{max-width:calc(50% - 8px);min-width:0;font-size:12px}.owner-primary{width:100%;padding:13px}.main{padding:12px}.cards{gap:9px}.card{padding:13px}.card strong{font-size:28px}.card .icon{font-size:17px}.card .muted{font-size:12px}.dashboard-title h2{font-size:17px}
/* On phones, transform the member table into readable full-width cards. */
.member-table{overflow:visible}.member-table table{min-width:0}.member-table thead{display:none}.member-table tbody{display:grid;gap:10px}.member-table tr{display:grid;grid-template-columns:1fr auto;gap:8px;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff}.member-table td{border:0;padding:0;min-width:0}.member-table td:first-child{grid-column:1/-1;font-size:16px}.member-table td:nth-child(2),.member-table td:nth-child(3),.member-table td:nth-child(4){display:flex;align-items:center;gap:7px;flex-wrap:wrap}.member-table td:nth-child(2),.member-table td:nth-child(3),.member-table td:nth-child(4),.member-table td:last-child{grid-column:1/-1}.member-table td:nth-child(n+2)::before{content:attr(data-label);color:#708078;font-size:12px;min-width:95px}.member-table td:last-child::before{display:none}.member-table td:last-child{border-top:1px solid var(--line);padding-top:8px}.member-table td:last-child .link{padding:8px 0}
}
@media(max-width:390px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card strong{font-size:25px}.card{padding:11px}}



.wizard-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:18px}.wizard-progress div{border-top:5px solid #dce6e3;padding-top:10px;font-size:12px;color:#64748b}.wizard-progress .current{border-color:#16856a;color:#12654f;font-weight:800}.wizard-progress .done{border-color:#79baa8}.wizard-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wizard-choice{border:1px solid #d8e3df;border-radius:12px;padding:17px;background:#fff;text-align:start;cursor:pointer}.wizard-choice.selected{border:2px solid #16856a;background:#f1faf6}.wizard-actions{display:flex;gap:10px;justify-content:space-between;margin-top:24px;flex-wrap:wrap}.wizard-warning{background:#fff5df;border:1px solid #efc77c;border-radius:12px;padding:15px;margin:12px 0}.wizard-ok{background:#edf9f1;border:1px solid #a8d9b9;border-radius:12px;padding:15px;margin:12px 0}.wizard-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.wizard-summary>div{background:#f6f8f7;border-radius:10px;padding:12px}@media(max-width:600px){.wizard-progress div{font-size:10px}.wizard-choices,.wizard-summary{grid-template-columns:1fr}.wizard-actions .btn{flex:1}}

/* V1.3: clean, accessible toolbar dropdowns */
.top-select-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;direction:inherit}
.top-select{display:inline-flex;align-items:center;gap:9px;min-height:44px;max-width:100%;padding:0 12px;background:#fff;border:1px solid #d4e3da;border-radius:13px;box-shadow:0 2px 8px #153d2b0b;transition:border-color .18s,box-shadow .18s,background .18s;cursor:pointer;position:relative}
.top-select:hover{border-color:#91bba7;background:#f9fcfa;box-shadow:0 4px 12px #153d2b14}
.top-select:focus-within{outline:3px solid #b4ddca;outline-offset:2px;border-color:#176e58}
.top-select-icon{font-size:18px;line-height:1;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;color:#176e58}
.top-select-role .top-select-icon{background:#e9f4ee;border-radius:8px;font-size:19px}
.top-select select,.top .toolbar .top-select select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:#183a32;font-weight:700;font-size:14px;line-height:1.4;min-width:0;width:auto;max-width:none;padding:0;margin:0;cursor:pointer;box-shadow:none;direction:inherit}
.top-select select option{background:#fff;color:#183a32}
.top-chevron{width:8px;height:8px;flex:none;border-inline-end:2px solid #59756a;border-bottom:2px solid #59756a;transform:rotate(45deg) translateY(-2px);margin-inline-start:4px}
.top-select-role{min-width:148px}.top-select-language{min-width:132px}
@media(max-width:720px){.top-select-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%}.top-select{min-width:0;width:100%;padding:0 10px;gap:6px}.top .toolbar .top-select select{font-size:13px;max-width:100%;flex:1}.top-chevron{margin-inline-start:auto}.top-select-icon{font-size:16px;width:20px}.top-select-role .top-select-icon{font-size:17px}}
@media(max-width:360px){.top-select{padding:0 7px;gap:4px}.top .toolbar .top-select select{font-size:12px}}

/* V1.4: dropdowns cohérents et lisibles sur mobile et desktop */
.native-hidden{display:none!important}
.top-select-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.custom-control{position:relative;min-width:0}
.custom-trigger{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 13px;background:white;border:1px solid #cddfd5;border-radius:12px;color:#183a32;box-shadow:0 2px 9px #163b2c0b;font-size:14px;font-weight:700;white-space:nowrap;text-align:start}
.custom-trigger:hover{border-color:#8bb7a2;background:#f7fbf8}
.custom-trigger:focus-visible{outline:2px solid #176e58;outline-offset:3px}
.custom-trigger[aria-expanded=true]{border-color:#176e58;background:#f4faf6;box-shadow:0 0 0 2px #d4e9dc}
.control-symbol{display:grid;place-items:center;width:27px;height:27px;flex:none;background:#e9f4ee;border-radius:8px;font-size:17px}
.control-value{overflow:hidden;text-overflow:ellipsis;min-width:0}
.control-arrow{margin-inline-start:auto;color:#5b756a;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;transition:transform .15s;transform-origin:center}.control-arrow svg{display:block}
.custom-trigger[aria-expanded=true] .control-arrow{transform:rotate(180deg)}
.custom-menu{position:absolute;z-index:200;top:calc(100% + 7px);inset-inline-start:0;min-width:max(100%,190px);max-width:min(320px,90vw);padding:5px;background:#fff;border:1px solid #d8e6dc;border-radius:12px;box-shadow:0 12px 30px #102d2230}
.custom-menu[hidden]{display:none!important}
.custom-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;background:transparent;border:0;border-radius:8px;color:#183a32;font-size:14px;text-align:start;white-space:nowrap}
.custom-menu button:hover,.custom-menu button:focus-visible{background:#edf7f0;outline:none}
.custom-menu button[aria-checked=true]{background:#e8f4ec;color:#135b46;font-weight:750}
.menu-check{margin-inline-start:auto;visibility:hidden;color:#176e58}
.custom-menu button[aria-checked=true] .menu-check{visibility:visible}
@media(max-width:720px){.top-select-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:8px}.custom-trigger{padding:8px 9px;gap:6px;font-size:13px}.control-symbol{width:24px;height:24px;font-size:15px}.custom-menu{min-width:100%;max-width:min(280px,90vw)}.custom-control:last-child .custom-menu{inset-inline-start:auto;inset-inline-end:0}}
@media(max-width:380px){.custom-trigger{font-size:12px;padding:8px 7px}.control-symbol{width:22px;height:22px}}


.logo{padding:7px 4px 20px}.brand-logo{display:block;width:100%;max-width:225px;height:auto;object-fit:contain;border-radius:5px}

/* High-contrast branding in the dark sidebar */
.side .brand-logo{width:100%;max-width:225px;height:auto;display:block;object-fit:contain;filter:none}

/* Logo: icon and live text remain legible at 250px sidebar width */
.side .logo{display:flex;flex-direction:row;direction:ltr;align-items:center;justify-content:center;gap:12px;padding:8px 3px 20px;min-height:100px}
.side .brand-symbol{width:72px;height:72px;flex:0 0 72px;object-fit:contain;display:block}
.side .brand-wordmark{direction:rtl;text-align:right;min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.side .brand-wordmark b{font-size:19px;line-height:1.25;font-weight:800;color:#fff;white-space:nowrap;letter-spacing:0}
.side .brand-wordmark span{font-size:10px;line-height:1.35;font-weight:700;color:#fff;letter-spacing:1.7px;white-space:nowrap}
@media(max-width:850px){.side .logo{gap:8px}.side .brand-symbol{width:62px;height:62px;flex-basis:62px}.side .brand-wordmark b{font-size:17px}.side .brand-wordmark span{font-size:9px;letter-spacing:1px}}

/* Option C preview: original horizontal logo in a light brand panel. */
.side .logo.logo-option-c{display:block;direction:rtl;padding:0 0 20px;min-height:0;border-bottom:1px solid #ffffff25;margin:0 0 3px}
.side .logo-option-c .brand-light-panel{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e4ece6;border-radius:13px;min-height:95px;padding:12px 9px;box-shadow:0 5px 15px #071e161a;overflow:hidden}
.side .logo-option-c .brand-original{display:block;width:100%;height:auto;max-width:220px;object-fit:contain;object-position:center}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:850px){.side .logo.logo-option-c{padding-bottom:15px}.side .logo-option-c .brand-light-panel{min-height:75px;padding:9px 7px;border-radius:11px}}

/* Light panel final: brand symbol and accessible live wordmark, no missing PNG. */
.side .logo-option-c .brand-light-panel{flex-direction:row;gap:10px;min-height:82px;padding:10px 11px;justify-content:center}
.side .logo-option-c .brand-original-symbol{display:block;flex:0 0 54px;width:54px;height:54px;object-fit:contain}
.side .logo-option-c .brand-light-wordmark{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0;direction:rtl;line-height:1.25}
.side .logo-option-c .brand-light-wordmark b{color:#173e33;font-size:17px;font-weight:800;white-space:nowrap}
.side .logo-option-c .brand-light-wordmark span{color:#526d60;font-size:10px;font-weight:700;letter-spacing:.09em;white-space:nowrap}
@media(max-width:850px){.side .logo-option-c .brand-light-panel{min-height:72px;padding:8px;gap:7px}.side .logo-option-c .brand-original-symbol{flex-basis:42px;width:42px;height:42px}.side .logo-option-c .brand-light-wordmark b{font-size:15px}.side .logo-option-c .brand-light-wordmark span{font-size:9px}}

/* Point 1 only: mobile compact header and fully visible navigation; desktop unchanged. */
.mobile-nav-toggle{display:none}
@media(max-width:720px){
 .side{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;position:relative;z-index:10;flex-wrap:wrap}
 .side .logo.logo-option-c{border:0;padding:0;margin:0;flex:1;max-width:220px}
 .side .logo-option-c .brand-light-panel{min-height:48px;padding:4px 8px;border-radius:9px;gap:7px}
 .side .logo-option-c .brand-original-symbol{width:34px;height:34px;flex-basis:34px}
 .side .logo-option-c .brand-light-wordmark b{font-size:13px}
 .side .logo-option-c .brand-light-wordmark span{font-size:8px;letter-spacing:.04em}
 .mobile-nav-toggle{display:block;border:1px solid #ffffff60;background:#2c5949;color:#fff;border-radius:9px;font-size:23px;width:44px;height:42px;line-height:1}
 .side .nav{display:none;flex:0 0 100%;width:100%;overflow:visible;margin:2px 0 5px;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 body.mobile-nav-open .side .nav{display:grid}
 .side .nav button{white-space:normal;text-align:center;padding:9px 5px;min-height:38px;font-size:12px}
 .main{padding:10px 12px}
 .top{margin-bottom:11px;gap:7px;align-items:center}
 .top>div:first-child{width:100%}
 .top h1{font-size:20px;line-height:1.2}
 .top .muted.small{font-size:10px}
 .top .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%;align-items:center}
 .top .owner-primary{grid-column:1;grid-row:1;width:100%;min-height:38px;padding:7px 5px;font-size:12px}
 .top .toolbar>.tag{grid-column:2;grid-row:1;text-align:center;padding:7px 3px;font-size:11px}
 .top .top-select-group{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}
 .top .custom-trigger{min-height:35px;padding:5px 7px;font-size:12px}
 .top .control-symbol{width:19px;height:19px;font-size:13px}
 .top .control-arrow svg{width:12px;height:12px}
 .cards{gap:8px}.card{padding:11px}.card strong{margin:4px 0;font-size:25px}
}

/* Point 2: responsive table for demo monthly bills only. */
.monthly-bills-table{overflow-x:auto}
.monthly-bills-table table{min-width:540px}
.monthly-bills-table .btn{white-space:nowrap}
@media(max-width:720px){
 .monthly-bills-table{overflow:visible}
 .monthly-bills-table table,.monthly-bills-table tbody,.monthly-bills-table tr,.monthly-bills-table td{display:block;min-width:0;width:100%}
 .monthly-bills-table thead{display:none}
 .monthly-bills-table tr{padding:11px 0;border-bottom:1px solid var(--line)}
 .monthly-bills-table td{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px;text-align:start;border:0;white-space:normal}
 .monthly-bills-table td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:12px}
 .monthly-bills-table td .btn{margin-inline-start:auto}
}