:root {
    --bg: #f3f4f6;
    --bg-soft: #fafafa;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --text: #151719;
    --muted: #68717d;
    --line: #d9dee5;
    --line-strong: #c8ced7;
    --primary: #b21f2d;
    --primary-dark: #8d1823;
    --primary-soft: #f7e8ea;
    --secondary: #20252b;
    --success: #176b43;
    --error: #a4262c;
    --warning: #9b5b00;
    --radius: 8px;
    --shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.intervention-attachment-picker,.intervention-attachment-list{display:grid;gap:12px}.intervention-attachment-row{align-items:end;display:grid;gap:12px;grid-template-columns:minmax(180px,.55fr) minmax(260px,1fr) auto}.intervention-attachment-row label{margin:0}.intervention-attachment-list .readonly-field{align-items:center;display:grid;gap:6px;grid-template-columns:minmax(140px,.35fr) minmax(220px,1fr) auto}.intervention-attachment-list .button-row{justify-content:flex-end}.intervention-attachment-list form{margin:0}@media(max-width:720px){.intervention-attachment-row,.intervention-attachment-list .readonly-field{grid-template-columns:1fr}.intervention-attachment-list .button-row{justify-content:flex-start}}

/* Membership fees: task-focused cashier workspace */
.membership-page{max-width:1380px}.membership-heading{align-items:flex-end;margin-bottom:20px}.membership-heading h1{letter-spacing:-.04em}.membership-workspace{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 55px rgba(15,23,42,.06);overflow:hidden}.membership-toolbar{align-items:end;background:#f8fafc;border-bottom:1px solid var(--line);display:grid;gap:10px;grid-template-columns:130px minmax(260px,1fr) auto auto;padding:16px 18px}.membership-toolbar label>span:not(.sr-only){color:var(--muted);display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;margin-bottom:6px;text-transform:uppercase}.membership-toolbar select,.membership-toolbar input{background:#fff}.membership-search{align-items:center;display:flex;position:relative}.membership-search svg{color:var(--muted);height:18px;left:14px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:18px}.membership-search input{padding-left:42px;width:100%}.membership-notice{align-items:center;background:#fff8e8;border-bottom:1px solid #f3dfad;color:#8a5a00;display:flex;font-size:.86rem;gap:7px;padding:10px 18px}.membership-overview{background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:2fr repeat(3,minmax(130px,1fr));padding:0 18px}.membership-overview article{border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;min-height:112px;padding:18px 22px}.membership-overview article:first-child{border-left:0;padding-left:0}.membership-overview article>span,.membership-progress-card span{color:var(--muted);font-size:.73rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.membership-overview article>strong,.membership-progress-card strong{color:var(--text);font-size:1.65rem;letter-spacing:-.035em;line-height:1.15;margin-top:7px}.membership-overview article>small,.membership-progress-card small{color:var(--muted);font-size:.78rem;margin-top:4px}.membership-progress-card{gap:14px}.membership-progress-card>div:first-child{display:grid;gap:3px}.membership-progress{background:#e8edf3;border-radius:999px;height:8px;overflow:hidden;width:100%}.membership-progress i{background:linear-gradient(90deg,#ef1b2d,#b90818);border-radius:inherit;display:block;height:100%;min-width:2px}.membership-tabs{align-items:center;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:2px;overflow-x:auto;padding:0 18px}.membership-tabs a{align-items:center;border-bottom:3px solid transparent;color:var(--muted);display:flex;font-size:.86rem;font-weight:800;gap:7px;padding:16px 14px 13px;text-decoration:none;white-space:nowrap}.membership-tabs a:hover{color:var(--text)}.membership-tabs a.is-active{border-bottom-color:var(--primary);color:var(--text)}.membership-tabs a span{background:#edf1f5;border-radius:999px;color:inherit;font-size:.7rem;min-width:22px;padding:3px 7px;text-align:center}.membership-tabs a.is-active span{background:#ffe9eb;color:#b50919}.membership-list-heading{align-items:center;display:flex;gap:18px;justify-content:space-between;padding:20px 20px 14px}.membership-list-heading h2,.membership-list-heading p{margin:0}.membership-list-heading h2{font-size:1.05rem}.membership-list-heading p{color:var(--muted);font-size:.82rem;margin-top:4px}.membership-hint{background:#f4f6f8;border-radius:999px;color:var(--muted);font-size:.76rem;font-weight:700;padding:7px 11px}.membership-table-wrap{overflow-x:auto}.membership-table{border-collapse:collapse;width:100%}.membership-table th{background:#f8fafc;border-bottom:1px solid var(--line);color:var(--muted);font-size:.67rem;font-weight:800;letter-spacing:.07em;padding:10px 16px;text-align:left;text-transform:uppercase;white-space:nowrap}.membership-table td{border-bottom:1px solid #edf0f3;padding:12px 16px;vertical-align:middle}.membership-table tbody tr:hover{background:#fbfcfd}.membership-table td>small,.membership-table td>span+small{color:var(--muted);display:block;font-size:.74rem;margin-top:4px}.membership-table td:last-child{text-align:right;width:1%}.membership-member{align-items:center;display:flex;gap:11px;min-width:220px}.membership-member>span:last-child{display:flex;flex-direction:column;gap:2px}.membership-member strong{font-size:.88rem}.membership-member a,.membership-member small{color:var(--muted);font-size:.74rem;text-decoration:none}.membership-member a:hover{color:var(--primary)}.membership-avatar{align-items:center;background:#f0f2f5;border:1px solid #e4e7eb;border-radius:10px;color:#475569;display:flex;flex:0 0 36px;font-size:.72rem;font-weight:900;height:36px;justify-content:center}.membership-status{border-radius:999px;display:inline-flex;font-size:.68rem;font-weight:900;letter-spacing:.04em;padding:5px 8px;text-transform:uppercase}.membership-status.is-open{background:#fff0f1;color:#c00d20}.membership-status.is-partial{background:#fff6dd;color:#986200}.membership-status.is-paid{background:#eaf8ef;color:#14783b}.membership-debt{color:#bd1021}.membership-credit{color:#16723b}.membership-empty{padding:60px 20px;text-align:center}.membership-empty h2,.membership-empty p{margin:0}.membership-empty p{color:var(--muted);margin-top:7px}.membership-pagination{align-items:center;background:#f8fafc;display:flex;gap:16px;justify-content:flex-end;padding:14px 18px}.membership-pagination a{background:#fff;border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:.8rem;font-weight:800;padding:8px 12px;text-decoration:none}.membership-pagination span{color:var(--muted);font-size:.78rem}.membership-modal-open{overflow:hidden}.membership-payment-modal{align-items:center;background:rgba(15,23,42,.62);display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:1000}.membership-payment-modal[hidden]{display:none}.membership-payment-dialog{background:var(--panel);border-radius:20px;box-shadow:0 28px 80px rgba(0,0,0,.3);max-height:calc(100vh - 40px);max-width:520px;overflow:auto;padding:26px;position:relative;width:100%}.membership-payment-dialog h2{font-size:1.55rem;margin:5px 0 0}.membership-payment-member{color:var(--muted);font-size:1rem;font-weight:800;margin:5px 0 18px}.membership-modal-close{align-items:center;background:#f1f3f6;border:0;border-radius:999px;color:#475569;cursor:pointer;display:flex;font-size:1.35rem;height:34px;justify-content:center;position:absolute;right:18px;top:18px;width:34px}.membership-payment-due{align-items:center;background:#fff5f6;border:1px solid #ffd9dd;border-radius:12px;display:flex;justify-content:space-between;margin-bottom:18px;padding:12px 14px}.membership-payment-due span{color:#7f1d2d;font-size:.78rem;font-weight:800}.membership-payment-due strong{color:#b50919}.membership-payment-form{display:grid;gap:14px}.membership-payment-form label>span{display:block;font-size:.78rem;font-weight:800;margin-bottom:6px}.membership-payment-form label>span small{color:var(--muted);font-weight:600}.membership-payment-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}.membership-amount-input{position:relative}.membership-amount-input input{font-size:1.1rem;font-weight:800;padding-right:38px;width:100%}.membership-amount-input b{color:var(--muted);position:absolute;right:14px;top:50%;transform:translateY(-50%)}.membership-allocation-note{background:#f6f8fa;border-radius:10px;color:var(--muted);font-size:.78rem;line-height:1.5;margin:0;padding:11px 12px}.membership-payment-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
@media(max-width:900px){.membership-toolbar{grid-template-columns:110px 1fr auto}.membership-toolbar .button.quiet{display:none}.membership-overview{grid-template-columns:1fr 1fr;padding:0}.membership-overview article,.membership-overview article:first-child{border-bottom:1px solid var(--line);border-left:1px solid var(--line);min-height:96px;padding:15px}.membership-progress-card{grid-column:1/-1}.membership-tabs{padding:0 8px}.membership-list-heading{align-items:flex-start;flex-direction:column;gap:8px}.membership-hint{border-radius:8px}.membership-table thead{display:none}.membership-table,.membership-table tbody,.membership-table tr,.membership-table td{display:block;width:100%}.membership-table tr{border-bottom:8px solid #f3f5f7;display:grid;grid-template-columns:1fr 1fr;padding:12px 14px}.membership-table td{border:0;padding:7px 4px;text-align:left}.membership-table td:before{color:var(--muted);content:attr(data-label);display:block;font-size:.64rem;font-weight:800;letter-spacing:.06em;margin-bottom:4px;text-transform:uppercase}.membership-table td:first-child{grid-column:1/-1}.membership-table td:last-child{grid-column:1/-1;text-align:left;width:100%}.membership-table td:last-child .button{width:100%}.membership-receipts-table td:last-child form{width:100%}}
@media(max-width:600px){.membership-heading{align-items:flex-start}.membership-toolbar{grid-template-columns:90px 1fr;padding:12px}.membership-toolbar>button{grid-column:1/-1;width:100%}.membership-search input{min-width:0}.membership-overview article>strong,.membership-progress-card strong{font-size:1.35rem}.membership-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:0 12px}.membership-tabs a{justify-content:center;padding:12px 6px 9px}.membership-table tr{grid-template-columns:1fr}.membership-table td,.membership-table td:first-child,.membership-table td:last-child{grid-column:1}.membership-payment-modal{align-items:flex-end;padding:0}.membership-payment-dialog{border-radius:20px 20px 0 0;max-height:92vh;padding:22px 18px}.membership-payment-row{grid-template-columns:1fr}.membership-payment-actions{flex-direction:column-reverse}.membership-payment-actions .button{width:100%}}

.water-vehicle-inputs{display:flex;gap:12px;flex-wrap:wrap}.water-vehicle-inputs label{min-width:180px}.table-wrap{overflow:auto}.table-wrap table{min-width:1000px;width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{border-bottom:1px solid var(--line);padding:12px;text-align:right;white-space:nowrap}.table-wrap th:first-child,.table-wrap td:first-child{text-align:left}
.water-status-groups{display:grid;gap:24px}.water-status-group{border-left:4px solid var(--line);padding-left:14px}.water-status-group>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.water-status-group>header strong{color:var(--muted);font-size:13px}.status-group-submitted{border-left-color:#f59e0b}.status-group-approved{border-left-color:#7c3aed}.status-group-invoiced{border-left-color:#2563eb}.status-group-cancelled{border-left-color:#94a3b8}.status-card-submitted{box-shadow:inset 4px 0 #f59e0b}.status-card-approved{box-shadow:inset 4px 0 #7c3aed}.status-card-invoiced{box-shadow:inset 4px 0 #2563eb}.status-card-cancelled{box-shadow:inset 4px 0 #94a3b8;opacity:.75}.water-pagination{align-items:center;display:flex;gap:12px;justify-content:center;margin-top:24px}.water-pagination>div{display:flex;gap:6px}.water-pagination>div a{align-items:center;border:1px solid var(--line);border-radius:9px;color:var(--text);display:flex;height:38px;justify-content:center;text-decoration:none;width:38px}.water-pagination>div a.is-current{background:var(--primary);border-color:var(--primary);color:#fff}.water-pagination .is-disabled{opacity:.45;pointer-events:none}

/* Drinking water deliveries */
.water-heading { align-items:center; }
.water-heading > .actions { align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-self:end;width:auto; }
.water-heading > .actions .button { flex:none;min-height:42px;padding:10px 16px;white-space:nowrap;width:auto; }
.water-dev-delete{align-items:center;border:1px dashed #dc2626;display:flex;justify-content:space-between;margin-top:16px}.water-dev-delete h2,.water-dev-delete p{margin:0}.water-dev-delete p{color:var(--muted);margin-top:4px}.water-dev-delete form{margin:0}
.water-handover-form{align-items:center;border:1px solid var(--primary);display:flex;justify-content:space-between;margin-bottom:18px}.water-handover-form p{color:var(--muted);margin:4px 0 0}.water-handover-form .button{white-space:nowrap}
.status-group-handed_over{border-left-color:#16a34a}.status-card-handed_over{box-shadow:inset 4px 0 #16a34a}
.water-quick-customer{align-items:center;background:#f8fafc;border:1px dashed var(--line);border-radius:12px;display:grid;gap:12px;grid-template-columns:auto 1fr;padding:12px}.water-quick-customer>span{align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:50%;color:var(--muted);display:flex;font-size:12px;font-weight:800;height:36px;justify-content:center;text-transform:uppercase;width:36px}.water-quick-customer label{margin:0}
.water-quick-customer[hidden]{display:none!important}
.user-simple-form{display:grid;gap:18px}.user-form-section{border-bottom:1px solid var(--line);padding-bottom:20px}.user-form-section:last-of-type{border-bottom:0}.user-form-section>header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.user-form-section>header>span{align-items:center;background:var(--primary-soft);border-radius:50%;color:var(--primary);display:flex;font-size:17px;font-weight:900;height:40px;justify-content:center;width:40px}.user-form-section header h2,.user-form-section header p{margin:0}.user-form-section header p{color:var(--muted);margin-top:3px}.access-profile-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}.access-profile-card{align-items:start;background:#f8fafc;border:2px solid transparent;border-radius:14px;cursor:pointer;display:grid;gap:11px;grid-template-columns:42px minmax(0,1fr);padding:16px;position:relative}.access-profile-card:hover{border-color:var(--line)}.access-profile-card:has(input:checked){background:#fff5f5;border-color:var(--primary);box-shadow:0 8px 22px rgba(220,38,38,.1)}.access-profile-card input{opacity:0;position:absolute}.access-profile-icon{align-items:center;background:var(--panel);border-radius:11px;color:var(--primary);display:flex;height:42px;justify-content:center;width:42px}.access-profile-icon svg{height:23px;width:23px}.access-profile-card>span:nth-of-type(2){display:grid;gap:5px}.access-profile-card strong{font-size:15px}.access-profile-card small{color:var(--muted);line-height:1.4}.access-profile-card b{background:var(--panel);border-radius:999px;color:var(--muted);font-size:11px;grid-column:2;justify-self:start;padding:5px 8px;text-transform:uppercase}.access-profile-card:has(input:checked) b{background:var(--primary);color:#fff}.access-profile-card.is-advanced{border-style:dashed}.advanced-permissions{background:#f8fafc;border:1px solid var(--line);border-radius:12px;margin-top:14px;padding:13px}.advanced-permissions[hidden]{display:none}.advanced-permissions summary{cursor:pointer;font-weight:800}.user-form-submit{align-items:center;background:#f8fafc;border-radius:14px;display:flex;justify-content:space-between;padding:14px}.user-form-submit>div{display:grid;gap:3px}.user-form-submit small{color:var(--muted)}@media(max-width:900px){.access-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.access-profile-grid{grid-template-columns:1fr}.user-form-submit{align-items:stretch;flex-direction:column;gap:12px}.user-form-submit .button{width:100%}}
.water-onboarding-callout{align-items:center;background:linear-gradient(135deg,#fff7ed,#fff);border:1px solid #fdba74;border-radius:16px;display:flex;gap:18px;justify-content:space-between;margin-bottom:18px;padding:16px 18px}.water-onboarding-callout>div{align-items:center;display:flex;gap:12px}.water-onboarding-callout svg{color:var(--primary);height:28px;width:28px}.water-onboarding-callout span{display:grid;gap:3px}.water-onboarding-callout small{color:var(--muted)}
.water-onboarding-progress{align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:grid;gap:14px;grid-template-columns:1fr minmax(220px,38%);margin-bottom:18px;padding:18px}.water-onboarding-progress div{display:grid;gap:4px}.water-onboarding-progress span{color:var(--muted)}.water-onboarding-progress progress{accent-color:var(--primary);height:14px;width:100%}.water-onboarding-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.water-onboarding-step{align-content:start;margin:0}.water-onboarding-step>header{align-items:center;display:grid;gap:12px;grid-template-columns:42px minmax(0,1fr) auto;margin-bottom:16px}.water-onboarding-step>header>span{align-items:center;background:var(--primary-soft);border-radius:50%;color:var(--primary);display:flex;font-size:18px;font-weight:900;height:42px;justify-content:center}.water-onboarding-step header h2,.water-onboarding-step header p{margin:0}.water-onboarding-step header p{color:var(--muted);font-size:13px;margin-top:3px}.water-onboarding-step header b{background:#fff3cd;border-radius:999px;color:#8a6100;font-size:11px;padding:6px 9px;text-transform:uppercase}.water-onboarding-step header b.is-ready{background:#dcfce7;color:#166534}.water-onboarding-step fieldset{border:1px solid var(--line);border-radius:12px;display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:0 0 10px;padding:12px}.water-onboarding-step legend{font-weight:800;padding:0 5px}.water-onboarding-summary,.water-access-checks{display:grid;gap:7px;list-style:none;margin:0 0 14px;padding:0}.water-onboarding-summary li,.water-access-checks li{align-items:center;background:#f7f8fa;border-radius:9px;display:flex;justify-content:space-between;padding:9px 11px}.water-onboarding-summary span{color:var(--muted);font-size:13px}.water-access-checks li:before{color:#dc2626;content:'●';margin-right:8px}.water-access-checks li.is-ready:before{color:#16a34a}.water-access-checks li strong{margin-left:auto}.water-onboarding-finish{align-items:center;border:2px solid var(--primary);display:flex;justify-content:space-between;margin-top:18px}.water-onboarding-finish h2,.water-onboarding-finish p{margin:0}.water-onboarding-finish p{color:var(--muted);margin-top:4px}.water-onboarding-finish button:disabled{cursor:not-allowed;opacity:.45}@media(max-width:900px){.water-onboarding-grid{grid-template-columns:1fr}.water-onboarding-progress{grid-template-columns:1fr}}@media(max-width:600px){.water-onboarding-step>header{grid-template-columns:42px 1fr}.water-onboarding-step>header b{grid-column:2;justify-self:start}.water-onboarding-step fieldset{grid-template-columns:1fr}.water-onboarding-finish{align-items:stretch;flex-direction:column;gap:14px}.water-onboarding-finish .button{width:100%}}
.water-vehicle-choice legend label{align-items:center;cursor:pointer;display:flex;gap:8px}.water-vehicle-choice legend input{accent-color:var(--primary);height:17px;width:17px}.water-onboarding-optional{margin-top:18px}.water-onboarding-optional summary{cursor:pointer;font-size:16px;font-weight:900}.water-onboarding-optional-grid{display:grid;gap:22px;grid-template-columns:1fr 1fr;margin-top:20px}.water-onboarding-optional-grid h3{margin-top:0}@media(max-width:700px){.water-onboarding-optional-grid{grid-template-columns:1fr}}
@media (max-width:760px){.water-heading>.actions{display:grid;grid-template-columns:1fr;width:100%}.water-heading>.actions .button{width:100%}}
.water-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 18px; }
.water-kpis article { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(15,23,42,.05); display: grid; gap: 8px; padding: 18px; }
.water-kpis span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.water-kpis strong { color: var(--text); font-size: 28px; line-height: 1; }
.water-kpis small { color: var(--muted); font-size: 14px; }
.water-dashboard-section { margin-top: 26px; }
.water-dashboard-section-heading { align-items: end; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 14px; }
.water-dashboard-section-heading h2,.water-dashboard-section-heading p { margin: 0; }
.water-dashboard-section-heading h2 { font-size: 24px; margin-top: 4px; }
.water-dashboard-section-heading p { color: var(--muted); margin-top: 5px; }
.water-dashboard-charts { margin-bottom: 0; }
.water-dashboard-charts .water-column-chart { height: 220px; }
.water-dashboard-trip-chart .water-column-track span { background: linear-gradient(180deg,#2563eb,#1e40af); }
.water-dashboard-deliveries .water-delivery-card { box-shadow: 0 5px 18px rgba(15,23,42,.04); }
.water-filters { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(240px,1fr) 210px auto auto; margin-bottom: 14px; padding: 14px; }
.water-mine { align-items: center; display: flex !important; flex-direction: row !important; gap: 8px; min-height: 44px; white-space: nowrap; }
.water-mine input { height: 18px; width: 18px; }
.water-delivery-list { display: grid; gap: 10px; }
.water-delivery-card { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 28px rgba(15,23,42,.05); display: grid; gap: 18px; grid-template-columns: 170px minmax(250px,1fr) minmax(280px,.75fr) auto; padding: 16px 18px; }
.water-card-number { align-items: flex-start; display: flex; flex-direction: column; gap: 9px; }
.water-card-number > span:first-child { color: var(--primary-dark); font-size: 17px; font-weight: 900; overflow-wrap: anywhere; }
.water-status,.water-payment { border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 900; padding: 5px 9px; text-transform: uppercase; width: fit-content; }
.status-submitted { background:#fff2cc;color:#855c00; }.status-approved { background:#ede9fe;color:#6d28d9; }.status-handed_over { background:#e6f8ed;color:#14713b; }.status-invoiced { background:#e9f2ff;color:#135fba; }.status-cancelled { background:#fbe9eb;color:#9d2530; }
.water-card-customer { min-width: 0; }.water-card-customer h2 { font-size: 18px; margin: 0 0 4px; }.water-card-customer p { color: var(--muted); margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.water-card-customer div { display:flex;flex-wrap:wrap;gap:8px; }.water-card-customer div span { background:#f5f7fa;border-radius:6px;font-size:12px;font-weight:800;padding:4px 7px; }
.water-card-assignment { display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0; }.water-card-assignment dt { color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase; }.water-card-assignment dd { font-size:13px;font-weight:800;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.water-delivery-form h2 { border-bottom:1px solid var(--line); font-size:18px; margin:10px 0 0; padding-bottom:10px; }
.water-calculation-preview { display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr)); }.water-calculation-preview > div,.water-price-result { background:#edf6ff;border:1px solid #d5e6f7;border-radius:10px;display:grid;gap:5px;padding:13px; }.water-calculation-preview span,.water-price-result span { color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase; }.water-calculation-preview strong,.water-price-result strong { font-size:20px; }.water-price-result { align-items:center;background:linear-gradient(135deg,#eff7ff 0%,#f7fbff 100%);border-color:#c9def4;display:flex;justify-content:space-between;min-height:64px;padding:14px 16px; }.water-price-result strong { color:var(--primary-dark);font-size:26px;line-height:1;white-space:nowrap; }
.water-free-option { align-items:center;background:#fff;border:1px solid #d8e0ea;border-left:4px solid #cbd5e1;border-radius:10px;box-shadow:0 5px 16px rgba(15,23,42,.04);cursor:pointer;display:grid;gap:14px;grid-template-columns:28px minmax(0,1fr);min-height:68px;padding:14px 16px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease; }
.water-free-option:hover { border-color:#b8c4d3;box-shadow:0 8px 22px rgba(15,23,42,.07); }
.water-free-option input[type="checkbox"] { appearance:none;background:#fff;border:2px solid #9aa5b1;border-radius:7px;box-shadow:none;display:grid;height:24px;margin:0;min-height:24px;padding:0;place-content:center;width:24px; }
.water-free-option input[type="checkbox"]::before { border-bottom:3px solid #fff;border-right:3px solid #fff;content:"";height:10px;opacity:0;transform:rotate(45deg) scale(.7);transition:opacity .12s ease,transform .12s ease;width:5px; }
.water-free-option input[type="checkbox"]:checked { background:var(--primary);border-color:var(--primary); }
.water-free-option input[type="checkbox"]:checked::before { opacity:1;transform:rotate(45deg) scale(1); }
.water-free-option input[type="checkbox"]:focus-visible { outline:0;box-shadow:0 0 0 3px rgba(178,31,45,.16); }
.water-free-option:has(input:checked) { background:#fff7f7;border-color:#f0b6bd;border-left-color:var(--primary);box-shadow:0 8px 22px rgba(178,31,45,.08); }
.water-free-option span { display:grid;gap:3px;min-width:0; }
.water-free-option strong { color:var(--text);font-size:15px;line-height:1.25; }
.water-free-option small { color:var(--muted);font-size:12px;font-weight:700;line-height:1.45; }
.water-payment-editor { background:#fafbfc;border:1px solid var(--line);border-radius:10px;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));padding:14px; }
.water-payment-editor [data-prepaid-wrap][hidden] { display:none!important; }
.water-temporary-price { background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 180px;padding:14px; }
.water-temporary-price[hidden] { display:none!important; }
.water-temporary-price > small { color:#9a3412;font-size:12px;font-weight:800;grid-column:1/-1;line-height:1.4; }
.water-additional-work-option { align-items:center;background:#f8fafc;border:1px solid #d8e0ea;border-radius:10px;cursor:pointer;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 24px auto;min-height:68px;padding:14px 16px; }
.water-additional-work-option:hover { background:#f1f5f9;border-color:#b8c4d3; }
.water-additional-work-option > span { display:grid;gap:3px;min-width:0; }
.water-additional-work-option strong { color:var(--text);font-size:15px;line-height:1.25; }
.water-additional-work-option small { color:var(--muted);font-size:12px;font-weight:700;line-height:1.4; }
.water-additional-work-option em { color:var(--text);font-size:13px;font-style:normal;font-weight:800; }
.water-additional-work-option input[type="checkbox"] { appearance:none;background:#fff;border:2px solid #9aa5b1;border-radius:7px;box-shadow:none;display:grid;height:24px;margin:0;min-height:24px;padding:0;place-content:center;width:24px; }
.water-additional-work-option input[type="checkbox"]::before { border-bottom:3px solid #fff;border-right:3px solid #fff;content:"";height:10px;opacity:0;transform:rotate(45deg) scale(.7);width:5px; }
.water-additional-work-option input[type="checkbox"]:checked { background:var(--primary);border-color:var(--primary); }
.water-additional-work-option input[type="checkbox"]:checked::before { opacity:1;transform:rotate(45deg) scale(1); }
.water-additional-work-option:has(input:checked) { background:#fff7f7;border-color:#f0b6bd; }
.water-additional-work-fields { background:#fffaf3;border:1px solid #fed7aa;border-radius:10px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);padding:14px; }
.water-additional-work-fields[hidden] { display:none!important; }
.water-additional-work-fields > small { color:#9a3412;font-size:12px;font-weight:800;grid-column:1/-1;line-height:1.4; }
.water-settings-sections { display:grid;gap:18px; }.water-settings-section { background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 26px rgba(15,23,42,.05);display:grid;gap:16px;padding:20px; }.water-settings-section-primary { border-left:5px solid var(--primary); }.water-settings-section-muted { background:#f8fafc; }.water-settings-section .section-heading { margin:0; }.water-settings-section .section-heading h2 { font-size:20px;margin-bottom:4px; }.water-settings-grid { display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr)); }.water-settings-grid-single { grid-template-columns:minmax(0,1fr); }.water-settings-card { align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--text);display:grid;gap:14px;grid-template-columns:48px minmax(0,1fr);min-height:138px;padding:18px;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }.water-settings-card:hover { border-color:var(--primary);box-shadow:0 12px 30px rgba(15,23,42,.08);transform:translateY(-2px); }.water-settings-card h2,.water-settings-card p { margin:0; }.water-settings-card h2 { font-size:18px;margin-bottom:5px; }.water-settings-card p { color:var(--muted);line-height:1.45; }.water-settings-card > strong { align-self:end;color:var(--primary);grid-column:2; }.water-settings-icon { align-items:center;background:var(--primary-soft);border-radius:12px;color:var(--primary);display:flex;height:48px;justify-content:center;width:48px; }.water-settings-icon svg { height:24px;width:24px; }.water-capacity-list { display:grid;gap:10px; }.water-capacity-list > label { align-items:center;background:#f7f8fa;border:1px solid var(--line);border-radius:10px;display:flex;justify-content:space-between;padding:12px; }.water-capacity-list label > span:first-child { display:grid;gap:3px; }.water-capacity-list small { color:var(--muted); }.water-capacity-input { align-items:center;display:flex;gap:8px; }.water-capacity-input input { max-width:160px; }.water-capacity-input em { color:var(--muted);font-style:normal; }
.water-trip-form { display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 auto;max-width:820px; }.water-trip-form .button { min-height:50px; }.water-workflow-status { align-items:center;display:flex;gap:10px;margin-bottom:14px; }.water-workflow-status small { color:var(--muted); }.water-admin-actions { align-items:center;display:flex;justify-content:space-between; }.water-admin-actions h2,.water-admin-actions p { margin:0; }.water-admin-actions p { color:var(--muted);margin-top:4px; }.water-admin-actions .actions { align-items:center;display:flex;gap:10px; }.water-admin-actions .actions form { margin:0; }
.water-payer-editor { background:#f7f9fc;border:1px solid var(--line);border-radius:12px;display:grid;gap:10px;padding:14px; }.water-payer-editor h3,.water-payer-editor p { margin:0; }.water-payer-editor p { color:var(--muted);font-size:13px;margin-top:3px; }.water-payer-editor [data-payer-rows] { display:grid;gap:10px; }.water-payer-row { align-items:end;display:grid;gap:10px;grid-template-columns:minmax(220px,1fr) 150px auto; }.water-payer-remove { font-size:20px;min-width:42px;padding:8px; }.water-payer-footer { align-items:center;display:flex;justify-content:space-between; }.water-payer-total { color:var(--error); }.water-payer-total.is-valid { color:var(--success); }
.water-payer-summary { border-top:1px solid var(--line);display:grid;gap:8px;margin-top:4px;padding-top:14px;width:100%; }.water-payer-summary h3 { font-size:14px;margin:0; }.water-payer-summary > div { align-items:center;background:#f7f8fa;border-radius:8px;display:flex;justify-content:space-between;padding:9px 11px; }.water-payer-summary span { display:grid;gap:2px; }.water-payer-summary span:last-child { gap:2px;text-align:right; }.water-payer-summary small { color:var(--muted); }.water-customer-search { align-items:end;display:grid;gap:10px;grid-template-columns:minmax(250px,1fr) auto;margin-bottom:16px; }
.water-driver-hero { align-items:center;background:linear-gradient(135deg,#fff 0%,#edf6ff 100%);border:1px solid #dce8f4;border-radius:18px;display:flex;justify-content:space-between;margin-bottom:18px;padding:22px; }.water-driver-hero h2 { font-size:28px;margin:10px 0 4px; }.water-driver-hero p { color:var(--muted);font-size:16px;margin:0; }.water-driver-actions { display:flex;gap:10px; }
.water-detail-grid { display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px; }.water-detail-panel { margin:0; }.water-detail-panel h2 { margin-top:0; }.water-detail-panel h3 { font-size:14px;margin:20px 0 5px; }.water-notes { background:#f7f8fa;border-radius:10px;line-height:1.5;margin:0;padding:12px; }
.water-detail-actions { align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end; }
.water-detail-actions .button { gap:8px;min-height:42px;padding:10px 16px;white-space:nowrap;width:auto; }
.water-detail-actions .button svg { flex:0 0 auto;height:18px;width:18px; }
.water-action-form { align-items:end;display:grid;gap:14px;grid-template-columns:minmax(240px,1fr) 220px auto;margin-bottom:16px; }.water-action-form h2 { margin:0 0 4px; }.water-action-form p { color:var(--muted);margin:0; }.water-complete-form { grid-template-columns:minmax(200px,1fr) repeat(3,170px) auto; }
.water-billing { align-items:center;display:flex;gap:18px;justify-content:space-between;margin-bottom:16px; }.water-billing h2,.water-billing p { margin:0; }.water-billing form { align-items:center;display:flex;gap:8px; }.payment-not_ready { background:#f2f4f7;color:#596579; }.payment-unpaid { background:#fff2cc;color:#855c00; }.payment-paid { background:#e6f8ed;color:#14713b; }.water-cancel { display:flex;justify-content:flex-end; }
@media (max-width:760px) { .water-trip-form { grid-template-columns:1fr; }.water-trip-form .span-2 { grid-column:auto; }.water-admin-actions { align-items:stretch;flex-direction:column;gap:14px; }.mobile-tabbar.mobile-tabs-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }.water-calculation-preview,.water-settings-grid,.water-payment-editor,.water-temporary-price,.water-additional-work-fields { grid-template-columns:1fr; }.water-settings-section { border-radius:var(--radius);padding:16px; }.water-settings-section-primary { border-left:0;border-top:4px solid var(--primary); }.water-price-result { align-items:flex-start;flex-direction:column;gap:8px; }.water-free-option { align-items:start;grid-template-columns:26px minmax(0,1fr);padding:13px; }.water-free-option input[type="checkbox"] { height:23px;min-height:23px;width:23px; }.water-additional-work-option { grid-template-columns:minmax(0,1fr) 24px auto;padding:13px; }.water-additional-work-fields > small { grid-column:auto; }.water-capacity-list > label { align-items:stretch;flex-direction:column;gap:10px; }.water-capacity-input input { max-width:none;width:100%; } }

@media (max-width:1100px) { .water-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.water-delivery-card { grid-template-columns:140px minmax(0,1fr) auto; }.water-card-assignment { grid-column:1 / -1; }.water-complete-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.water-complete-form > div { grid-column:1 / -1; } }
@media (max-width:760px) { .water-kpis { gap:8px; }.water-kpis article { padding:14px; }.water-kpis strong { font-size:23px; }.water-filters { grid-template-columns:1fr; }.water-filters .button { width:100%; }.water-delivery-card { align-items:stretch;gap:12px;grid-template-columns:1fr;padding:14px; }.water-card-number { align-items:center;flex-direction:row;justify-content:space-between; }.water-card-customer p { white-space:normal; }.water-card-assignment { grid-column:auto; }.water-delivery-card > .button { width:100%; }.water-driver-hero { align-items:stretch;flex-direction:column;gap:18px;padding:16px; }.water-driver-hero h2 { font-size:23px; }.water-driver-actions { display:grid;grid-template-columns:1fr 1fr; }.water-detail-grid { grid-template-columns:1fr; }.water-action-form,.water-complete-form { grid-template-columns:1fr; }.water-complete-form > div { grid-column:auto; }.water-action-form .button { width:100%; }.water-billing { align-items:stretch;flex-direction:column; }.water-billing form { display:grid;grid-template-columns:1fr auto; }.water-detail-heading { align-items:flex-start; }.water-detail-heading .actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%; }.water-detail-heading .actions .button { min-width:0;width:100%; }.water-payer-row { grid-template-columns:minmax(0,1fr) 100px auto; }.water-customer-search { grid-template-columns:1fr; }.water-payer-footer { align-items:stretch;flex-direction:column;gap:10px; } }
@media (max-width:430px) { .water-detail-heading .actions { grid-template-columns:1fr; } }

/* Cashier module */
.cashier-delivery-source{background:#fff;border:1px solid var(--line);border-radius:10px;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));padding:11px 13px}.cashier-delivery-source span{display:grid;gap:3px}.cashier-delivery-source small,.cashier-payer-split>small{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.cashier-payer-split{background:#fff8e8;border:1px solid #f2d99b;border-radius:10px;display:grid;gap:8px;padding:11px 13px}.cashier-payer-split>div{display:flex;flex-wrap:wrap;gap:7px}.cashier-payer-split>div>span{align-items:center;background:#fff;border:1px solid #ead9ac;border-radius:999px;display:flex;font-size:12px;gap:8px;padding:6px 9px}.cashier-payer-split>div>span.is-current{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark)}@media(max-width:600px){.cashier-delivery-source{grid-template-columns:1fr 1fr}.cashier-delivery-source span:first-child{grid-column:1/-1}.cashier-payer-split>div{display:grid}.cashier-payer-split>div>span{justify-content:space-between}}
.cashier-module { max-width: 1240px; }
.inline-payment-form{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.inline-payment-form input{max-width:105px;min-height:36px;padding:7px 9px}
.statistics-tabs{align-items:center;background:#eef1f5;border-radius:12px;display:flex;gap:5px;margin:0 0 24px;padding:5px;width:max-content}.statistics-tabs a{align-items:center;border-radius:9px;color:var(--muted);display:flex;font-size:13px;font-weight:900;gap:8px;min-height:40px;padding:9px 14px;text-decoration:none}.statistics-tabs a:hover{color:var(--primary)}.statistics-tabs a.is-active{background:var(--panel);box-shadow:0 2px 8px rgba(15,23,42,.08);color:var(--primary)}.statistics-tabs svg{height:17px;width:17px}@media(max-width:520px){.statistics-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.statistics-tabs a{justify-content:center;padding:8px}}
.sidebar-nav-group{position:relative}.sidebar-nav-group>a{grid-template-columns:22px minmax(0,1fr) 16px}.sidebar-nav-group>a>svg:last-child{height:15px;transform:rotate(-90deg);width:15px}.sidebar-nav-group.is-active>a{background:var(--primary);color:#fff}.sidebar-submenu{background:#160000;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:16px 18px 35px rgba(0,0,0,.28);display:grid;gap:5px;left:calc(100% + 10px);min-width:210px;opacity:0;padding:8px;pointer-events:none;position:absolute;top:0;transform:translateX(-7px);transition:opacity .15s ease,transform .15s ease;visibility:hidden;z-index:90}.sidebar-nav-group:hover>.sidebar-submenu,.sidebar-nav-group:focus-within>.sidebar-submenu{opacity:1;pointer-events:auto;transform:translateX(0);visibility:visible}.sidebar-submenu a{font-size:13px;min-height:40px}.mobile-menu-panel .mobile-submenu-link{font-size:13px;margin-left:22px;min-height:38px;opacity:.9}
.cashier-dashboard-heading{margin-bottom:20px}.cashier-dashboard-summary{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px}.cashier-dashboard-summary article{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);display:grid;gap:6px;padding:18px}.cashier-dashboard-summary article>span{color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}.cashier-dashboard-summary article>strong{font-size:25px}.cashier-dashboard-summary article>strong small{font-size:14px}.cashier-dashboard-summary article>small{color:var(--muted);font-size:12px}.cashier-dashboard-section>header{margin-bottom:16px}.cashier-dashboard-section>header h2,.cashier-dashboard-section>header p{margin:0}.cashier-dashboard-section>header h2{margin-top:5px}.cashier-dashboard-section>header p{color:var(--muted);margin-top:5px}.cashier-module-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.cashier-module-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);color:var(--text);display:grid;gap:18px;grid-template-columns:54px 1fr;min-height:230px;padding:22px;position:relative;text-decoration:none}.cashier-module-card.is-available{border-color:#e8b4bb;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.cashier-module-card.is-available:hover{border-color:var(--primary);box-shadow:0 14px 30px rgba(15,23,42,.09);transform:translateY(-2px)}.cashier-module-icon{align-items:center;background:var(--primary-soft);border-radius:14px;color:var(--primary);display:flex;height:50px;justify-content:center;width:50px}.cashier-module-icon svg{height:25px;width:25px}.cashier-module-copy{display:block;padding-right:72px}.cashier-module-copy small{color:var(--muted);display:block;font-size:10px;font-weight:900;letter-spacing:.05em;margin-bottom:7px;text-transform:uppercase}.cashier-module-copy strong{display:block;font-size:21px}.cashier-module-copy p{color:var(--muted);line-height:1.55;margin:9px 0 0}.cashier-module-action{align-items:center;color:var(--primary);display:flex;font-size:13px;font-weight:900;gap:7px;grid-column:2}.cashier-module-action svg{height:16px;width:16px}.cashier-module-badge{background:#eef1f5;border-radius:999px;color:#667085;font-size:10px;font-weight:900;padding:6px 9px;position:absolute;right:18px;text-transform:uppercase;top:18px}.cashier-module-card.is-coming{background:#fbfcfd}.cashier-back-link{margin-bottom:12px}.cashier-back-link a{align-items:center;color:var(--muted);display:inline-flex;font-size:13px;font-weight:800;gap:7px;text-decoration:none}.cashier-back-link a:hover{color:var(--primary)}.cashier-back-link svg{height:15px;transform:rotate(180deg);width:15px}@media(max-width:850px){.cashier-dashboard-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.cashier-module-grid{grid-template-columns:1fr}}@media(max-width:520px){.cashier-dashboard-summary{grid-template-columns:1fr 1fr;gap:8px}.cashier-dashboard-summary article{padding:14px}.cashier-module-card{grid-template-columns:44px 1fr;min-height:0;padding:17px}.cashier-module-icon{height:42px;width:42px}.cashier-module-icon svg{height:21px;width:21px}.cashier-module-copy{padding-right:0}.cashier-module-badge{position:static;width:max-content}.cashier-module-action{grid-column:1/-1}}
.cashier-period-picker { align-items:end;display:grid;gap:12px;grid-template-columns:180px minmax(240px,1fr) auto;margin-bottom:16px; }
.cashier-readiness-grid { display:grid;gap:14px;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:16px; }
.cashier-readiness-grid article { background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);display:grid;gap:7px;min-height:116px;padding:18px; }
.cashier-readiness-grid article span { color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase; }
.cashier-readiness-grid article strong { font-size:25px; }
.cashier-readiness-grid article small { color:var(--muted);line-height:1.4; }
.cashier-readiness-grid article.is-warning { background:#fff8e8;border-color:#edc96b; }
.cashier-readiness-grid article.is-ready { background:#effaf4;border-color:#addac2; }
.cashier-lock-card { align-items:center;display:flex;gap:20px;justify-content:space-between; }
.cashier-lock-card > div { align-items:center;display:flex;gap:14px; }
.cashier-lock-card > div > svg { background:var(--primary-soft);border-radius:12px;color:var(--primary);height:48px;padding:11px;width:48px; }
.cashier-lock-card span { display:grid;gap:4px; }
.cashier-lock-card small { color:var(--muted); }
.cashier-lock-card.is-locked { border-left:5px solid var(--success); }
.cashier-lock-card.is-warning { border-left:5px solid #e3a008; }
.cashier-blockers-card{align-items:stretch;display:grid;gap:14px}.cashier-blockers-heading{align-items:center;display:flex;gap:14px}.cashier-blocker-list{display:grid;gap:8px}.cashier-blocker-link{align-items:center;background:#fff;border:1px solid #edc96b;border-radius:11px;color:inherit;display:flex;gap:14px;justify-content:space-between;padding:12px 14px;text-decoration:none}.cashier-blocker-link:hover{border-color:var(--primary);box-shadow:var(--shadow-soft)}.cashier-blocker-link span{display:grid;gap:3px}.cashier-blocker-link strong{color:var(--text)}.cashier-blocker-link small{color:var(--muted);line-height:1.45}.cashier-blocker-link b{color:var(--primary);font-size:13px;white-space:nowrap}
.cashier-layout { align-items:start;display:grid;gap:18px;grid-template-columns:285px minmax(0,1fr); }
.cashier-batch-list { background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);display:grid;gap:8px;padding:14px;position:sticky;top:96px; }
.cashier-batch-list h2 { font-size:17px;margin:3px 5px 8px; }
.cashier-batch-list a { align-items:center;border:1px solid transparent;border-radius:10px;color:var(--text);display:flex;gap:10px;justify-content:space-between;padding:12px;text-decoration:none; }
.cashier-batch-list a:hover,.cashier-batch-list a.is-active { background:var(--primary-soft);border-color:#edc4c9; }
.cashier-batch-list a span { display:grid;gap:4px; }
.cashier-batch-list a small { color:var(--muted);font-size:11px; }
.cashier-batch-list a b { background:var(--panel);border-radius:999px;font-size:11px;padding:5px 8px; }
.cashier-batch-content { display:grid;gap:14px;min-width:0; }
.cashier-batch-content > header { align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);display:flex;justify-content:space-between;padding:20px; }
.cashier-batch-content > header h2,.cashier-batch-content > header p { margin:0; }
.cashier-batch-content > header p { color:var(--muted);margin-top:5px; }
.cashier-batch-content > header > strong { color:var(--primary-dark);font-size:25px; }
.cashier-summary { display:grid;gap:10px;grid-template-columns:repeat(3,1fr); }
.cashier-summary div { background:#f7f9fc;border:1px solid var(--line);border-radius:10px;display:flex;justify-content:space-between;padding:12px 14px; }
.cashier-summary span { color:var(--muted); }
.cashier-summary-financial div{background:#fff}.cashier-summary-financial .is-paid{background:#f2fbf6;border-color:#bfe3cd}.cashier-summary-financial .is-paid strong{color:#16724a}.cashier-summary-financial .is-due{background:#fff4f4;border-color:#efcaca}.cashier-summary-financial strong{font-variant-numeric:tabular-nums}.cashier-header-amount{display:grid;text-align:right}.cashier-header-amount small,.cashier-draft-total>small,.cashier-draft-total>span{color:var(--muted)}.cashier-header-amount strong{color:var(--primary-dark);font-size:25px;font-variant-numeric:tabular-nums}.cashier-payment-breakdown{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.cashier-payment-breakdown .is-prepaid{color:#16724a}.cashier-payment-breakdown [data-cashier-amount-due]{color:var(--primary-dark);border-top:1px solid var(--line);padding-top:7px}.cashier-payment-breakdown span:last-of-type{border-top:1px solid var(--line);padding-top:7px}
.cashier-draft-list { display:grid;gap:10px; }
.cashier-draft-list article { align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.04);display:flex;gap:18px;justify-content:space-between;padding:17px 18px; }
.cashier-draft-list h3,.cashier-draft-list p { margin:0; }
.cashier-draft-list h3 { margin-top:8px; }
.cashier-draft-list p,.cashier-draft-list small { color:var(--muted); }
.cashier-draft-total { align-items:flex-end;display:grid;gap:10px;text-align:right; }
.cashier-draft-total > strong { font-size:20px; }
.cashier-status { border-radius:999px;font-size:10px;font-weight:900;padding:5px 8px;text-transform:uppercase; }
.cashier-status.status-new { background:#eef1f5;color:#53606f; }
.cashier-status.status-in_review { background:#fff2cc;color:#855c00; }
.cashier-status.status-ready { background:#e6f8ed;color:#14713b; }
.cashier-invoice-badges { align-items:center;display:flex;flex-wrap:wrap;gap:6px; }
.cashier-status.status-source-water { background:#eef2f7;color:#4b5b70; }
.cashier-draft-form { display:grid;gap:16px; }
.cashier-invoice-actions{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.cashier-invoice-actions form{display:flex;margin:0}.cashier-invoice-actions .button{align-items:center;display:inline-flex;flex:none;gap:8px;justify-content:center;line-height:1.15;min-height:42px;padding:10px 16px;white-space:nowrap;width:auto}.cashier-invoice-actions .button svg{flex:0 0 auto;height:18px;width:18px}
.cashier-draft-form > .form { margin:0; }
.cashier-item-list { display:grid;gap:12px; }
.cashier-item-list article { background:#f8fafc;border:1px solid var(--line);border-radius:12px;display:grid;gap:12px;padding:14px; }
.cashier-item-list article header { align-items:center;display:flex;justify-content:space-between; }
.cashier-item-list article header div { display:grid;gap:3px; }
.cashier-item-list article header span { color:var(--muted);font-size:12px; }
.cashier-item-list article header a { color:var(--primary);font-weight:800; }
.cashier-item-actions { align-items:center;display:flex;gap:10px; }
.cashier-item-actions .button { min-height:34px;padding:6px 10px; }
.cashier-item-list article > div { align-items:end;display:grid;gap:12px;grid-template-columns:160px 180px 1fr; }
.cashier-item-list article > div > span { display:grid;gap:4px;justify-self:end;text-align:right; }
.cashier-item-list article > div small { color:var(--muted); }
.cashier-item-list article > div strong { font-size:18px; }
.cashier-total { align-items:center;border-top:2px solid var(--line);display:flex;justify-content:flex-end;gap:18px;margin-top:16px;padding-top:16px; }
.cashier-total span { color:var(--muted);font-weight:800; }
.cashier-total strong { color:var(--primary-dark);font-size:26px; }
.cashier-dev-tools { align-items:center;border:1px dashed #dc2626;display:flex;gap:20px;justify-content:space-between;margin-top:18px; }
.cashier-dev-tools h2,.cashier-dev-tools p { margin:0; }
.cashier-dev-tools p { color:var(--muted);margin-top:5px; }
.cashier-dev-tools form { flex:0 0 auto;margin:0; }
@media(max-width:950px){.cashier-readiness-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cashier-layout{grid-template-columns:1fr}.cashier-batch-list{position:static}.cashier-batch-list{grid-template-columns:repeat(2,minmax(0,1fr))}.cashier-batch-list h2{grid-column:1/-1}}
@media(max-width:700px){.cashier-period-picker{grid-template-columns:1fr}.cashier-period-picker .button{width:100%}.cashier-readiness-grid{grid-template-columns:1fr 1fr;gap:8px}.cashier-readiness-grid article{min-height:100px;padding:14px}.cashier-lock-card{align-items:stretch;flex-direction:column}.cashier-lock-card .button{width:100%}.cashier-batch-list{grid-template-columns:1fr}.cashier-batch-content>header{align-items:flex-start;flex-direction:column;gap:10px}.cashier-summary{grid-template-columns:1fr}.cashier-draft-list article{align-items:stretch;flex-direction:column}.cashier-draft-total{align-items:stretch;text-align:left}.cashier-draft-total .button{width:100%}.cashier-item-list article>div{grid-template-columns:1fr 1fr}.cashier-item-list article>div>span{grid-column:1/-1;justify-self:stretch;text-align:right}.cashier-item-list article header{align-items:flex-start;gap:10px}.cashier-total{justify-content:space-between}.cashier-dev-tools{align-items:stretch;flex-direction:column}.cashier-dev-tools form,.cashier-dev-tools .button{width:100%}}
@media(max-width:700px){.cashier-invoice-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.cashier-invoice-actions form{display:contents}.cashier-invoice-actions .button{width:100%}}
@media(max-width:430px){.cashier-readiness-grid{grid-template-columns:1fr}.cashier-item-list article>div{grid-template-columns:1fr}}

/* Poravnava vsebine postavke računa */
.cashier-item-list article header > div:first-child{display:grid;gap:4px;min-width:0}
.cashier-item-list article header .cashier-item-actions{align-items:center;display:flex;flex:0 0 auto;gap:8px}
.cashier-item-list article>.cashier-delivery-source{align-items:center;background:#fff;border:1px solid var(--line);display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
.cashier-item-list article>.cashier-delivery-source>span{border-right:1px solid var(--line);display:grid;gap:4px;justify-self:stretch;padding:12px 16px;text-align:left}
.cashier-item-list article>.cashier-delivery-source>span:last-child{border-right:0;text-align:right}
.cashier-item-list article>.cashier-delivery-source>span:nth-child(2){text-align:center}
.cashier-item-list article>.cashier-delivery-source strong{font-size:15px}
.cashier-item-list article>.cashier-payer-split{align-items:stretch;background:#fffaf0;border:1px solid #efd79d;display:grid;gap:10px;grid-template-columns:150px minmax(0,1fr);padding:12px 14px}
.cashier-item-list article>.cashier-payer-split>small{align-self:center}
.cashier-item-list article>.cashier-payer-split>div{display:grid;gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cashier-item-list article>.cashier-payer-split>div>span{align-items:center;border-radius:8px;display:flex;gap:10px;justify-content:space-between;min-width:0;padding:8px 10px}
.cashier-item-list article>.cashier-payer-split>div>span b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cashier-item-list article>.cashier-payer-split>div>span strong{font-size:13px;white-space:nowrap}
@media(max-width:700px){.cashier-item-list article header .cashier-item-actions{align-items:flex-end;flex-direction:column}.cashier-item-list article>.cashier-payer-split{grid-template-columns:1fr}.cashier-item-list article>.cashier-payer-split>div{grid-template-columns:1fr}}
@media(max-width:480px){.cashier-item-list article>.cashier-delivery-source{grid-template-columns:1fr}.cashier-item-list article>.cashier-delivery-source>span,.cashier-item-list article>.cashier-delivery-source>span:nth-child(2),.cashier-item-list article>.cashier-delivery-source>span:last-child{border-bottom:1px solid var(--line);border-right:0;text-align:left}.cashier-item-list article>.cashier-delivery-source>span:last-child{border-bottom:0}.cashier-item-list article header{display:grid}.cashier-item-list article header .cashier-item-actions{align-items:stretch;display:grid;grid-template-columns:1fr 1fr}.cashier-item-list article header .cashier-item-actions a,.cashier-item-list article header .cashier-item-actions button{text-align:center;width:100%}}
.cashier-module .page-heading>.actions{align-items:center;display:flex;gap:10px}.cashier-module .page-heading>.actions .button{align-items:center;display:inline-flex;gap:8px;justify-content:center;min-height:44px;padding:10px 15px}.cashier-module .page-heading>.actions .button svg,.cashier-customer-heading .button svg{height:17px;flex:0 0 17px;width:17px}.cashier-customer-heading{align-items:center}.cashier-customer-heading>div{display:grid;gap:3px}.cashier-customer-heading>div h2,.cashier-customer-heading>div p{margin:0}.cashier-customer-saved{background:#e8f7ee;border-radius:999px;color:#16713b;font-size:12px;font-weight:900;padding:7px 10px}.cashier-item-actions a{align-items:center;display:inline-flex;min-height:34px;padding:6px 4px}.cashier-item-actions .button{border-radius:8px;box-shadow:none;font-size:12px}.cashier-item-actions{white-space:nowrap}@media(max-width:700px){.cashier-module .page-heading>.actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.cashier-module .page-heading>.actions .button{width:100%}.cashier-customer-heading{align-items:stretch;display:grid;gap:12px}.cashier-customer-heading .button{width:100%}}
.cashier-customer-heading .button:disabled{cursor:not-allowed;opacity:.45}
.cashier-module-card.is-available:focus-visible,.cashier-batch-list a:focus-visible,.cashier-back-link a:focus-visible{outline:3px solid rgba(178,31,45,.22);outline-offset:3px}
.cashier-module-card.is-coming{box-shadow:none;color:#4b5563}.cashier-module-card.is-coming .cashier-module-icon{background:#f3f4f6;color:#7a8491}.cashier-module-card.is-coming .cashier-module-copy p{color:#7a8491}
.cashier-status.status-issued{background:#e9f2ff;color:#135fba}.cashier-status.status-cancelled{background:#fbe9eb;color:#9d2530}
.cashier-batch-content>header>.actions{align-items:flex-end;display:flex;flex-direction:column;gap:10px}.cashier-batch-content>header>.actions form{margin:0}.cashier-batch-content>header>.actions .button{align-items:center;display:inline-flex;gap:7px;white-space:nowrap}
.cashier-draft-form fieldset:disabled input,.cashier-draft-form fieldset:disabled textarea{background:#f7f8fa;color:var(--text);opacity:1}.cashier-draft-form fieldset:disabled label{color:#596273}
.cashier-invoice-actions .button:disabled{cursor:wait;opacity:.62}.cashier-total strong{font-variant-numeric:tabular-nums}.cashier-draft-total strong{font-variant-numeric:tabular-nums}
@media(max-width:700px){.cashier-batch-content>header>.actions{align-items:stretch;width:100%}.cashier-batch-content>header>.actions .button{justify-content:center;width:100%}.cashier-module-card{min-height:0}.cashier-invoice-actions{grid-template-columns:1fr}.cashier-customer-heading{align-items:stretch}.cashier-customer-heading>div{min-width:0}}
.sales-items{display:grid;gap:10px}.sales-item{align-items:end;background:#f8fafc;border:1px solid var(--line);border-radius:12px;display:grid;gap:10px;grid-template-columns:minmax(240px,1fr) 110px 100px 140px 42px;padding:13px}.sales-item label{margin:0}.sales-remove{font-size:20px;min-width:42px;padding:8px}.sales-save-customer{align-items:center;display:flex!important;flex-direction:row!important;gap:8px;margin-top:12px}.sales-save-customer input{height:18px;width:18px}.cashier-draft-form fieldset{border:0;margin:0;min-width:0;padding:0}@media(max-width:800px){.sales-item{grid-template-columns:1fr 1fr}.sales-item label:first-child{grid-column:1/-1}.sales-remove{width:100%}}@media(max-width:480px){.sales-item{grid-template-columns:1fr}.sales-item label:first-child{grid-column:auto}}

/* Enotna geometrija akcijskih gumbov. Prepreči prelom kratkih oznak in optične zamike v skupinah. */
.button{appearance:none;box-sizing:border-box;flex-shrink:0;gap:8px;line-height:1.2;max-width:100%;text-align:center;vertical-align:middle;white-space:nowrap}
.button svg{display:block;flex:0 0 auto;height:17px;width:17px}
.page-heading>.button,.page-heading-actions .button,.page-heading>.actions .button,.water-dashboard-section>header>.button{min-height:44px;padding:10px 16px;width:auto}
.page-heading-actions,.page-heading>.actions{align-items:center}
@media(max-width:900px){.page-heading-actions .button,.page-heading>.button{width:100%}}
#prepare-reimbursement:disabled{background:#c7ccd3;border-color:#c7ccd3;box-shadow:none;color:#707782;cursor:not-allowed;opacity:1}
@media (max-width:760px) { .water-dashboard-section-heading { align-items:stretch; flex-direction:column; }.water-dashboard-section-heading .button { width:100%; }.water-dashboard-charts .water-column-chart { height:200px; } }

/* Application version below the sidebar logo */
.app-sidebar .sidebar-logo {
    flex-direction: column;
    gap: 7px;
}

.sidebar-version {
    align-items: center;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    font-size: 10px;
    font-weight: 800;
    gap: 7px;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    transform: translateY(-30px);
}

.sidebar-version strong {
    background: rgba(227, 6, 19, 0.18);
    border: 1px solid rgba(255, 71, 82, 0.46);
    border-radius: 999px;
    color: #ff8990;
    font-size: 9px;
    padding: 4px 7px;
}

.sidebar-version span {
    white-space: nowrap;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #f5f6f8;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

a {
    color: var(--primary-dark);
    text-underline-offset: 3px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    align-items: center;
    gap: 28px;
    grid-template-columns: minmax(320px, auto) minmax(0, 1fr);
    height: 96px;
    padding: 10px 36px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0;
    min-width: 0;
    text-decoration: none;
}

.brand img {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.brand-logo-placeholder {
    align-items: center;
    background: #fff;
    border: 2px dashed var(--line-strong);
    border-radius: 6px;
    color: var(--muted);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 76px;
    justify-content: center;
    line-height: 1.15;
    padding: 8px;
    text-align: center;
    text-transform: uppercase;
    width: 76px;
}

.brand-text {
    display: grid;
    gap: 2px;
}

.brand-text strong {
    color: var(--text);
    font-size: 20px;
    line-height: 1;
}

.brand-text small {
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.nav a {
    border-radius: 6px;
    color: var(--secondary);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 10px;
    text-decoration: none;
}

.nav a:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.nav a.is-active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.mobile-menu,
.mobile-tabbar {
    display: none;
}

.mobile-menu-button svg,
.mobile-menu-panel svg,
.mobile-tabbar svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.container {
    width: min(1160px, calc(100% - 40px));
    margin: 26px auto 32px;
}

.container-wide {
    width: min(1360px, calc(100% - 48px));
}

.page-heading {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    min-height: 58px;
}

.page-heading-text {
    min-width: 0;
}

.page-heading > .button,
.page-heading > .button-row,
.page-heading-actions {
    justify-self: end;
}

.page-heading-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 6px;
    font-size: 34px;
    line-height: 1.15;
}

h2 {
    font-size: 19px;
    line-height: 1.2;
}

.page-heading p {
    color: var(--muted);
    margin-bottom: 0;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 12px;
}

.section-heading h2 {
    margin-bottom: 0;
}

.section-heading p {
    color: var(--muted);
    margin-bottom: 0;
}

.section-heading-actions {
    margin-top: 26px;
}

.auth-panel,
.form,
.details,
.stat-card,
.table-wrap,
.dashboard-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.auth-panel {
    max-width: 420px;
    margin: 72px auto;
    padding: 26px;
}

.form {
    padding: 22px;
}

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

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    min-width: 0;
}

input,
select,
textarea {
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
    max-width: 100%;
    min-width: 0;
    padding: 10px 11px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

input[type="date"],
input[type="datetime-local"] {
    appearance: none;
    -webkit-appearance: none;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
    max-width: 100%;
    min-width: 0;
    text-align: left;
}

/* Časi intervencije uporabljajo brskalnikov izbirnik datuma in ure. Splošno pravilo
   zgoraj ohranja enoten videz drugih obrazcev, tu pa mora ostati viden gumb koledarja. */
input.intervention-native-datetime {
    appearance: auto;
    -webkit-appearance: auto;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(178, 31, 45, 0.12);
}

textarea {
    resize: vertical;
}

.auto-uppercase {
    text-transform: uppercase;
}

.customer-field-caption {
    align-items: baseline;
    display: inline-flex;
    gap: 4px;
}

.customer-field-caption [data-company-required] {
    color: var(--primary);
    font-size: inherit;
}

.span-2 {
    grid-column: span 2;
}

.form-section {
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 18px;
}

.form-section:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.form-section h2 {
    margin-bottom: 0;
}

.document-numbering-overview,
.supervisor-numbering-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
    display: grid;
    gap: 20px;
    padding: 22px;
}

.document-numbering-toolbar,
.supervisor-numbering-actions {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.document-numbering-lock,
.supervisor-access-badge {
    align-items: center;
    display: flex;
    gap: 12px;
}

.document-numbering-lock > span,
.supervisor-access-badge {
    background: #eef2f7;
    border-radius: 12px;
    color: #475569;
}

.document-numbering-lock > span {
    display: grid;
    flex: 0 0 44px;
    height: 44px;
    place-items: center;
    width: 44px;
}

.document-numbering-lock svg,
.supervisor-access-badge svg {
    height: 20px;
    width: 20px;
}

.document-numbering-lock div {
    display: grid;
    gap: 3px;
}

.document-numbering-lock small,
.document-numbering-card p,
.document-numbering-card footer,
.supervisor-numbering-card small,
.supervisor-numbering-actions p {
    color: var(--muted);
}

.document-numbering-year-form {
    align-items: end;
    display: flex;
    gap: 9px;
    margin: 0;
}

.document-numbering-year-form label {
    margin: 0;
    min-width: 145px;
}

.document-numbering-grid,
.supervisor-numbering-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-numbering-card,
.supervisor-numbering-card {
    background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--line);
    border-radius: 15px;
    display: grid;
    gap: 16px;
    margin: 0;
    min-width: 0;
    padding: 18px;
}

.document-numbering-card header {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr);
}

.document-numbering-card h2,
.document-numbering-card p {
    margin: 0;
}

.document-numbering-card h2 {
    font-size: 17px;
    margin-bottom: 4px;
}

.document-numbering-card p {
    font-size: 12px;
    line-height: 1.45;
}

.document-numbering-next {
    background: var(--primary-soft);
    border-radius: 12px;
    display: grid;
    gap: 4px;
    padding: 13px 15px;
}

.document-numbering-next small,
.document-numbering-flow small,
.supervisor-numbering-preview small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.document-numbering-next strong {
    color: var(--primary-dark);
    font-size: clamp(17px, 2vw, 23px);
    overflow-wrap: anywhere;
}

.document-numbering-flow {
    align-items: stretch;
    display: grid;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, .7fr) auto minmax(0, .8fr);
}

.document-numbering-flow span {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
}

.document-numbering-flow b {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.document-numbering-flow i {
    align-self: center;
    color: #94a3b8;
    font-style: normal;
}

.document-numbering-flow .is-next {
    border-color: rgba(227, 6, 19, .28);
}

.document-numbering-card footer {
    border-top: 1px solid var(--line);
    font-size: 11px;
    padding-top: 12px;
}

.document-numbering-card code {
    color: var(--text);
}

.supervisor-numbering-panel {
    border-top: 4px solid var(--primary);
    margin: 20px 0;
}

.supervisor-access-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    padding: 9px 11px;
    text-transform: uppercase;
}

.supervisor-numbering-year {
    justify-self: start;
}

.supervisor-numbering-card > span:first-child,
.supervisor-numbering-preview {
    display: grid;
    gap: 4px;
}

.supervisor-numbering-card > span:first-child b {
    font-size: 16px;
}

.supervisor-numbering-preview {
    background: var(--primary-soft);
    border-radius: 10px;
    padding: 10px 12px;
}

.supervisor-numbering-preview strong {
    color: var(--primary-dark);
    overflow-wrap: anywhere;
}

.supervisor-numbering-input {
    display: grid;
    font-size: 12px;
    font-weight: 800;
    gap: 5px;
}

.supervisor-numbering-actions {
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.supervisor-numbering-actions p {
    margin: 0;
}

@media (max-width: 820px) {
    .document-numbering-grid,
    .supervisor-numbering-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .document-numbering-overview,
    .supervisor-numbering-panel {
        border-radius: 14px;
        padding: 15px;
    }

    .document-numbering-toolbar,
    .supervisor-numbering-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .document-numbering-year-form,
    .document-numbering-year-form label,
    .document-numbering-year-form .button,
    .supervisor-numbering-actions .button {
        width: 100%;
    }

    .document-numbering-flow {
        grid-template-columns: 1fr;
    }

    .document-numbering-flow i {
        display: none;
    }
}

.grid-form > *,
.checkbox-group,
.form-section {
    min-width: 0;
}

.form-section-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.field-label {
    display: block;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.field-label-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.field-label-row .field-label {
    margin-bottom: 0;
}

.compact-button {
    min-height: 36px;
    padding: 8px 12px;
}

.member-search {
    margin-bottom: 8px;
}

.member-selector-tools {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) auto;
    margin-bottom: 8px;
}

.member-selector-tools .member-search {
    align-items: stretch;
    display: grid;
    margin: 0;
}

.member-scope-toggle {
    white-space: nowrap;
}

.operational-members .member-selector-tools,
.operational-members .members-grid {
    grid-column: 1 / -1;
}

.operational-members .member-search input {
    height: auto;
    width: 100%;
}

@media (max-width: 700px) {
    .member-selector-tools {
        grid-template-columns: 1fr;
    }

    .member-scope-toggle {
        width: 100%;
    }
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

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

.check-option {
    align-items: center;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    display: flex;
    font-weight: 400;
    gap: 9px;
    min-height: 44px;
    padding: 9px 10px;
}

.check-option input {
    width: auto;
}

.readonly-form {
    align-items: start;
}

.readonly-field {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 6px;
    min-height: 66px;
    padding: 10px 11px;
}

.readonly-field span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.readonly-field strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 400;
    white-space: normal;
}

.readonly-field.full {
    min-height: 92px;
}

.settings-logo-preview {
    display: block;
    height: 96px;
    max-width: 220px;
    object-fit: contain;
}

.brand-logo-setting { align-items: center; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 20px; grid-template-columns: minmax(220px, .7fr) minmax(280px, 1.3fr); padding: 16px; }
.brand-logo-primary { background: var(--panel); min-height: 132px; }
.logo-overrides { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.logo-overrides summary { cursor: pointer; font-weight: 800; }
.logo-overrides summary span { color: var(--muted); font-size: 12px; font-weight: 700; margin-left: 6px; text-transform: uppercase; }
.logo-overrides-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.logo-override-card { background: var(--panel-soft); border-radius: 8px; padding: 14px; }
.logo-override-card h3 { margin-top: 0; }
.logo-override-preview { align-items: center; display: flex; min-height: 112px; margin-bottom: 12px; }
.logo-override-preview.settings-watermark-field { border-radius: 8px; padding: 8px; }
.logo-override-preview .settings-logo-preview { max-width: 100%; }

.document-logo-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.document-logo-card {
    align-content: start;
    min-height: 142px;
}

.document-logo-card .settings-logo-preview {
    height: 90px;
    max-width: 100%;
}

.document-logo-toggle {
    align-self: center;
}

.upload-status {
    color: var(--muted);
    line-height: 1.45;
}

.upload-status.is-pending {
    color: #9a6700;
    font-weight: 800;
}

.upload-preview-pending {
    background: #fff9e8;
    border: 2px solid #e3a008;
    border-radius: 8px;
    padding: 6px;
}

@media (max-width: 700px) {
    .document-logo-settings,
    .brand-logo-setting,
    .logo-overrides-grid {
        grid-template-columns: 1fr;
    }
}

.settings-watermark-field {
    background:
        linear-gradient(45deg, rgba(148, 163, 184, 0.16) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, 0.16) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.16) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.16) 75%),
        var(--panel-soft);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.settings-watermark-preview {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px;
}

.readonly-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.readonly-pill {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    font-size: 14px;
    min-height: 34px;
    padding: 6px 12px;
}

.actions {
    display: flex;
    justify-content: flex-end;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.ppo-report-actions {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ppo-report-actions form {
    display: flex;
    margin: 0;
}

.ppo-status-flow {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ppo-status-flow span {
    align-items: center;
    background: #f4f6f8;
    border: 1px solid #e1e5ea;
    border-radius: 9px;
    color: #667085;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
}

.ppo-status-flow b {
    align-items: center;
    background: #dfe4ea;
    border-radius: 999px;
    color: #536173;
    display: inline-flex;
    flex: 0 0 24px;
    height: 24px;
    justify-content: center;
}

.ppo-status-flow .is-complete {
    background: #edf7ef;
    border-color: #c7e8d0;
    color: #26733a;
}

.ppo-status-flow .is-complete b {
    background: #26733a;
    color: #fff;
}

.ppo-status-flow .is-current {
    background: #fff1f2;
    border-color: #f3b8bd;
    color: #a41320;
}

.ppo-status-flow .is-current b {
    background: #e30613;
    color: #fff;
}

.ppo-report-locked {
    align-items: center;
    background: #eaf8ef;
    border: 1px solid #b9e4c7;
    border-radius: 8px;
    color: #176b36;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    min-height: 42px;
    padding: 9px 13px;
}

.ppo-report-locked svg,
.ppo-report-page .page-heading .button svg,
.ppo-report-actions .button svg {
    height: 17px;
    width: 17px;
}

.status-pill.ppo-status-draft,
.status-pill.ppo-status-open {
    background: #eef2f6;
    color: #52606d;
}

.status-pill.ppo-status-submitted {
    background: #fff3df;
    color: #9a5a00;
}

.status-pill.ppo-status-approved {
    background: #edf3ff;
    color: #245aa6;
}

.status-pill.ppo-status-sent {
    background: #e8f7ed;
    color: #18753a;
}

@media (max-width: 700px) {
    .ppo-report-actions,
    .ppo-report-actions form,
    .ppo-report-actions .button,
    .ppo-report-locked {
        width: 100%;
    }

    .ppo-status-flow {
        grid-template-columns: 1fr 1fr;
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 10px 16px;
    pointer-events: auto;
    position: relative;
    touch-action: manipulation;
    z-index: 2;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.water-delivery-card {
    isolation: isolate;
    position: relative;
}

.water-delivery-card > .button {
    justify-self: end;
    min-width: 76px;
    position: relative;
    z-index: 5;
}

.button:hover {
    transform: translateY(-1px);
}

.button.primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(178, 31, 45, 0.18);
}

.button.primary:hover {
    background: var(--primary-dark);
}

.button.secondary {
    background: #e9eef4;
    color: var(--text);
}

.button.secondary:hover {
    background: #dce4ee;
}

.button.quiet {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--secondary);
}

.button.quiet:hover {
    background: #f0f3f6;
}

.button.danger {
    background: var(--error);
    color: #ffffff;
}

.button.danger:hover {
    background: #7d1d22;
}

.copy-field {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
}

.icon-button {
    background: #e9eef4;
    color: var(--text);
    min-height: 42px;
    padding: 0;
    width: 44px;
}

.icon-button:hover {
    background: #dce4ee;
}

.alert {
    border-radius: 6px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid transparent;
}

.alert-success {
    background: #e4f4ec;
    border-color: #b9dfca;
    color: var(--success);
}

.alert-error {
    background: #fde8e9;
    border-color: #f4b9be;
    color: var(--error);
}

.upload-progress {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 8px;
    padding: 12px;
}

.upload-progress[hidden] {
    display: none;
}

.upload-progress-info {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 12px;
    justify-content: space-between;
}

.upload-progress-info strong {
    color: var(--primary-dark);
    font-size: 14px;
}

.upload-progress-track {
    background: #e6ebf1;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.upload-progress-track span {
    background: linear-gradient(90deg, var(--primary), #20252b);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width 0.18s ease;
}

.upload-progress.is-indeterminate .upload-progress-track span {
    animation: upload-indeterminate 1.1s ease-in-out infinite;
    width: 42% !important;
}

@keyframes upload-indeterminate {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(250%);
    }
}

.filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 190px 130px auto;
    gap: 10px;
    margin-bottom: 16px;
}

.members-filters {
    grid-template-columns: minmax(220px, 1fr) auto auto;
}

.interventions-filters {
    align-items: end;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    grid-template-columns: minmax(440px, 1fr) minmax(180px, 220px) minmax(130px, 160px) auto;
    padding: 14px;
}

.interventions-filters.is-auto-filter:not(.has-filter-reset) {
    grid-template-columns: minmax(440px, 1fr) minmax(180px, 220px) minmax(130px, 160px);
}

.interventions-filters.has-ppo-filter {
    grid-template-columns: minmax(280px, 1fr) minmax(155px, 200px) minmax(110px, 140px) minmax(155px, 190px) auto;
}

.interventions-filters.has-ppo-filter.is-auto-filter:not(.has-filter-reset) {
    grid-template-columns: minmax(280px, 1fr) minmax(155px, 200px) minmax(110px, 140px) minmax(155px, 190px);
}

@media (max-width: 900px) {
    .interventions-filters.has-ppo-filter,
    .interventions-filters.has-ppo-filter.is-auto-filter:not(.has-filter-reset) {
        grid-template-columns: 1fr;
    }
}

.interventions-filters label {
    gap: 7px;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.interventions-filters.is-auto-filter .filter-actions:not(.has-reset) {
    display: none;
}

.results-bar {
    align-items: baseline;
    color: var(--muted);
    display: flex;
    gap: 7px;
    margin: 6px 0 12px;
}

.results-bar strong {
    color: var(--primary-dark);
    font-size: 22px;
}

.interventions-results {
    transition: opacity 0.16s ease;
}

.interventions-results.is-loading {
    opacity: 0.48;
    pointer-events: none;
}

.interventions-list {
    display: grid;
    gap: 10px;
}

.intervention-card {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(520px, 1.7fr) minmax(320px, 0.9fr) 145px 100px;
    padding: 16px 18px;
}

.intervention-card.is-first-responders {
    grid-template-columns: minmax(520px, 1.7fr) minmax(220px, 0.65fr) 100px;
}

.intervention-card.is-first-responders .intervention-leaders {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .intervention-card.is-first-responders {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 760px) {
    .intervention-card.is-first-responders {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .intervention-card.is-first-responders {
        grid-template-columns: 1fr auto;
    }
}

.intervention-card-main {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 150px minmax(0, 1fr);
    min-width: 0;
}

.intervention-number {
    align-content: center;
    background: linear-gradient(90deg, rgba(227, 6, 19, 0.08), #fbfcfd 55%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    min-height: 68px;
    min-width: 0;
    padding: 10px 12px;
}

.intervention-number span,
.intervention-leaders dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.intervention-number strong {
    color: var(--primary-dark);
    font-size: 18px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.intervention-summary {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.intervention-location-row {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.intervention-summary h2 {
    font-size: 18px;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intervention-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.intervention-meta span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.intervention-type {
    background: #f2f5f9;
    border: 1px solid #e1e7ef;
    border-radius: 6px;
    color: #5f6b7a;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    padding: 5px 9px;
    text-transform: uppercase;
}

.intervention-leaders {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.intervention-leaders div {
    min-width: 0;
}

.intervention-leaders dd {
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intervention-open {
    min-width: 92px;
}

.checkbox-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.checkbox-row input[type="checkbox"] {
    height: 18px;
    margin: 0;
    width: 18px;
}

.legal-document-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.legal-document { display: block; line-height: 1.65; max-width: 980px; }
.legal-document h2 { margin: 28px 0 8px; }
.legal-document h2:first-child { margin-top: 0; }
.legal-document li { margin-bottom: 8px; }
.legal-acceptance-card { display: block; max-width: 920px; }
.legal-document-links { display: grid; gap: 12px; margin: 22px 0; }
.legal-document-links a { border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--text); display: grid; gap: 3px; padding: 16px; text-decoration: none; }
.legal-document-links a:hover { border-color: var(--primary); }
.legal-document-links span { color: var(--muted); }
.legal-confirmation { align-items: flex-start; margin: 22px 0; }
.legal-admin-list { background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius-small); margin: 18px 0 0; padding: 14px 16px; }
.legal-admin-list strong { display: block; margin-bottom: 8px; }
.legal-admin-list ul { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.legal-admin-list li { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.legal-admin-list span { font-weight: 800; }
.legal-admin-list a { overflow-wrap: anywhere; }
@media (max-width: 560px) { .legal-admin-list li { align-items: flex-start; flex-direction: column; gap: 2px; } }
.legal-onboarding-confirmation span { align-items: flex-start; display: flex; gap: 10px; }
.legal-onboarding-confirmation input { flex: 0 0 auto; height: 18px; margin-top: 3px; width: 18px; }
.app-footer a { color: inherit; }

.empty-state {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 28px;
    text-align: center;
}

.empty-state h2 {
    margin-bottom: 6px;
}

.empty-state p {
    color: var(--muted);
    margin-bottom: 0;
}

.compact-empty {
    padding: 18px;
    text-align: left;
}

.intervention-photo-section {
    display: grid;
    gap: 14px;
}

.photo-grid,
.gallery-photo-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.photo-tile,
.gallery-photo-card,
.gallery-group {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.photo-tile {
    color: var(--text);
    display: grid;
    gap: 8px;
    overflow: hidden;
    padding: 8px;
    text-decoration: none;
}

.photo-tile img,
.gallery-photo-link img {
    aspect-ratio: 4 / 3;
    background: #eef1f4;
    border-radius: 6px;
    display: block;
    object-fit: cover;
    width: 100%;
}

.photo-tile span {
    color: var(--muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-upload-form {
    align-items: end;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
}

.gallery-filter-actions {
    margin-bottom: 16px;
}

.gallery-year-filter {
    align-items: end;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(160px, 220px) auto;
    justify-content: start;
    margin-bottom: 16px;
    padding: 14px;
}

.gallery-intervention-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery-intervention-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--text);
    display: grid;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.gallery-intervention-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.gallery-cover {
    display: block;
    position: relative;
}

.gallery-cover img {
    aspect-ratio: 4 / 3;
    background: #eef1f4;
    display: block;
    object-fit: cover;
    width: 100%;
}

.gallery-cover-count {
    background: rgba(21, 23, 25, 0.78);
    border-radius: 999px;
    bottom: 9px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 8px;
    position: absolute;
    right: 9px;
}

.gallery-card-body {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px;
}

.gallery-card-body strong,
.gallery-card-body em,
.gallery-card-body span,
.gallery-card-body small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-card-body em {
    color: var(--primary-dark);
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.gallery-card-body strong {
    color: var(--text);
    font-size: 15px;
}

.gallery-card-body span {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.gallery-card-body small {
    color: var(--muted);
    font-size: 12px;
}

.gallery-groups {
    display: grid;
    gap: 18px;
}

.gallery-group {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.gallery-detail {
    margin-bottom: 18px;
}

.gallery-group-header {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding-bottom: 13px;
}

.gallery-group-header h2 {
    margin-bottom: 4px;
}

.gallery-group-header p {
    color: var(--muted);
    margin-bottom: 0;
}

.gallery-count {
    background: var(--primary-soft);
    border-radius: 999px;
    color: var(--primary-dark);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 10px;
}

.gallery-photo-card {
    display: grid;
    gap: 10px;
    overflow: hidden;
    padding: 10px;
}

.gallery-photo-media {
    position: relative;
}

.gallery-photo-link {
    display: block;
}

.watermark-badge {
    background: rgba(23, 107, 67, 0.92);
    border-radius: 999px;
    bottom: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    left: 8px;
    padding: 4px 8px;
    position: absolute;
}

.gallery-delete-button {
    align-items: center;
    background: rgba(164, 38, 44, 0.94);
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 36px;
}

.gallery-delete-button:hover {
    background: #7d1d22;
}

.gallery-delete-button svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 19px;
}

.gallery-original-link {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.gallery-original-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.gallery-photo-meta {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.gallery-photo-meta strong,
.gallery-photo-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-photo-meta strong {
    font-size: 14px;
}

.gallery-photo-meta span {
    color: var(--muted);
    font-size: 12px;
}

.watermark-status {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
    margin-top: 5px;
}

.watermark-status input {
    accent-color: var(--primary);
    height: 15px;
    margin: 0;
    width: 15px;
}

.gallery-photo-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
}

.gallery-photo-actions form,
.gallery-photo-actions .button {
    width: 100%;
}

.gallery-photo-actions [data-download-photo] {
    font-size: 0;
}

.gallery-photo-actions [data-download-photo]::after {
    content: "Prenesi";
    font-size: 14px;
}

.gallery-detail-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.gallery-detail-actions form {
    display: inline-flex;
}

.watermark-modal {
    align-items: center;
    background: rgba(17, 20, 24, 0.72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 100;
}

.intervention-cost-entry{align-items:center;background:#f7fafc;border:1px solid var(--line);border-radius:var(--radius);display:flex;gap:18px;justify-content:space-between;padding:16px}
.intervention-cost-entry small{color:var(--muted);display:block;margin-top:4px}
.intervention-cost-entry-actions{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.intervention-cost-modal{align-items:center;background:rgba(17,20,24,.72);display:flex;inset:0;justify-content:center;padding:22px;position:fixed;z-index:120}
.intervention-cost-modal[hidden]{display:none}
.intervention-cost-dialog{background:var(--panel);border-radius:var(--radius);box-shadow:0 24px 70px rgba(0,0,0,.28);max-height:calc(100vh - 44px);overflow:auto;padding:20px;width:min(880px,100%)}
.intervention-cost-dialog>header,.intervention-cost-dialog>footer{align-items:center;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.intervention-cost-dialog h2,.intervention-cost-dialog h3,.intervention-cost-dialog p{margin:0}
.intervention-cost-dialog section{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.intervention-cost-notice{background:#fff7ed;border-radius:8px;margin-top:14px;padding:10px 12px}
.intervention-cost-rows{display:grid;gap:8px;margin:12px 0}
.intervention-cost-row{align-items:center;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) 110px 120px}
.intervention-cost-row span small{color:var(--muted);display:block}
.intervention-cost-row>strong{text-align:right}.intervention-cost-row input{margin:0}
.intervention-cost-subtotal{display:block;text-align:right}
.intervention-cost-dialog>footer{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.mail-preference-modal{align-items:center;background:rgba(17,20,24,.62);display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:140}
.mail-preference-dialog{background:var(--panel);border-radius:var(--radius);box-shadow:0 24px 70px rgba(0,0,0,.28);max-width:420px;padding:22px;width:100%}
.mail-preference-dialog h2,.mail-preference-dialog p{margin:0}
.mail-preference-dialog p{color:var(--muted);margin-top:8px}
.mail-preference-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.app-dialog-open{overflow:hidden}
.app-dialog-modal{align-items:center;background:rgba(17,20,24,.62);display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:1000}
.app-dialog-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 70px rgba(0,0,0,.28);max-width:460px;padding:22px;width:100%}
.app-dialog-card h2,.app-dialog-card p{margin:0}
.app-dialog-card p{color:var(--muted);margin-top:8px;white-space:pre-line}
.app-dialog-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:20px}
@media(max-width:520px){.app-dialog-modal{padding:14px}.app-dialog-card{padding:18px}.app-dialog-actions{flex-direction:column-reverse}.app-dialog-actions .button{width:100%}}
.intervention-cost-summary{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.intervention-cost-summary>div{align-items:center;display:flex;gap:16px;justify-content:space-between;padding:10px 12px}
.intervention-cost-summary>div+div{border-top:1px solid var(--line)}
.intervention-cost-totals{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:680px){.intervention-cost-totals{grid-template-columns:1fr}}
.intervention-card-cost{align-items:flex-end;display:flex;flex-direction:column;min-width:145px}
.intervention-card-cost span{color:var(--muted);font-size:.78rem}
.intervention-card-cost strong{font-size:1rem;white-space:nowrap}
@media(max-width:680px){.intervention-cost-entry{align-items:stretch;flex-direction:column}.intervention-cost-entry-actions{align-items:stretch;flex-direction:column}.intervention-cost-row{grid-template-columns:minmax(0,1fr) 86px}.intervention-cost-row>strong{grid-column:1/-1}}

.watermark-modal[hidden] {
    display: none;
}

.watermark-dialog {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    max-height: calc(100vh - 44px);
    overflow: auto;
    width: min(1120px, 100%);
}

.watermark-dialog form {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.watermark-header {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding-bottom: 12px;
}

.watermark-header h2 {
    margin-bottom: 3px;
}

.watermark-header p {
    color: var(--muted);
    margin-bottom: 0;
}

.watermark-stage-wrap {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.watermark-stage {
    background: #111418;
    border-radius: var(--radius);
    display: block;
    justify-self: center;
    max-height: 68vh;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: fit-content;
}

.watermark-stage > img:first-child {
    display: block;
    max-height: 68vh;
    max-width: 100%;
    object-fit: contain;
    user-select: none;
}

#watermark-mark {
    cursor: grab;
    left: 0;
    max-width: 45%;
    position: absolute;
    top: 0;
    touch-action: none;
    transform: translate3d(0, 0, 0);
    user-select: none;
    will-change: transform;
    width: 18%;
    z-index: 3;
}

#watermark-mark:active,
#watermark-mark.is-dragging {
    cursor: grabbing;
}

#watermark-redaction-canvas {
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: absolute;
    touch-action: none;
    width: 100%;
    z-index: 2;
}

.watermark-stage.is-redacting #watermark-redaction-canvas {
    cursor: crosshair;
    pointer-events: auto;
}

.watermark-stage.is-redacting #watermark-mark {
    pointer-events: none;
}

.watermark-arrow {
    align-items: center;
    background: #e9eef4;
    border: 0;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font-size: 32px;
    height: 44px;
    justify-content: center;
    line-height: 1;
    padding: 0 0 4px;
    width: 44px;
}

.watermark-arrow:hover {
    background: #dce4ee;
}

.watermark-controls {
    align-items: end;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    padding-top: 12px;
}

.gallery-lightbox {
    align-items: center;
    background: rgba(17, 20, 24, 0.82);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 110;
}

.gallery-lightbox[hidden] {
    display: none;
}

.gallery-lightbox-dialog {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 44px);
    padding: 16px;
    width: min(1180px, 100%);
}

.gallery-lightbox-header {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding-bottom: 12px;
}

.gallery-lightbox-header h2 {
    margin-bottom: 3px;
}

.gallery-lightbox-header p {
    color: var(--muted);
    margin-bottom: 0;
}

.gallery-lightbox-stage {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.gallery-lightbox-stage figure {
    background: #111418;
    border-radius: var(--radius);
    display: grid;
    gap: 10px;
    justify-items: center;
    margin: 0;
    overflow: hidden;
    padding: 12px;
}

.gallery-lightbox-stage img {
    display: block;
    max-height: 70vh;
    max-width: 100%;
    object-fit: contain;
}

.gallery-lightbox-stage figcaption {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.table-wrap {
    overflow-x: auto;
}

.no-scroll-table {
    overflow-x: visible;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 13px 14px;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

tbody tr:hover {
    background: #fbfcfd;
}

.compact-cell {
    max-width: 260px;
}

.interventions-table {
    table-layout: fixed;
    min-width: 0;
}

.interventions-table th,
.interventions-table td {
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}

.interventions-table th:nth-child(1),
.interventions-table td:nth-child(1) {
    width: 7%;
}

.interventions-table th:nth-child(2),
.interventions-table td:nth-child(2) {
    width: 13%;
}

.interventions-table th:nth-child(3),
.interventions-table td:nth-child(3) {
    width: 13%;
}

.interventions-table th:nth-child(4),
.interventions-table td:nth-child(4) {
    width: 29%;
}

.interventions-table th:nth-child(5),
.interventions-table td:nth-child(5),
.interventions-table th:nth-child(6),
.interventions-table td:nth-child(6) {
    width: 15%;
}

.interventions-table th:nth-child(7),
.interventions-table td:nth-child(7) {
    width: 8%;
    text-align: right;
}

.truncate-cell,
.interventions-table td:nth-child(3),
.interventions-table td:nth-child(4),
.interventions-table td:nth-child(5),
.interventions-table td:nth-child(6) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.details {
    padding: 22px;
}

.details dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

.details dt {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.details dd {
    margin: 3px 0 0;
}

.details article {
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card {
    position: relative;
    display: grid;
    gap: 12px;
    min-height: 118px;
    padding: 18px 18px 17px;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    height: auto;
    background: var(--primary);
}

.stat-card span {
    color: var(--muted);
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.stat-card strong {
    display: block;
    font-size: 32px;
    line-height: 1.05;
}

.stat-card small {
    color: var(--muted);
}

.dashboard-kpis .stat-card {
    align-content: stretch;
    gap: 14px;
    grid-template-areas:
        "label icon"
        "value value";
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: minmax(40px, auto) 1fr;
    min-height: 126px;
    padding: 18px 18px 16px 20px;
}

.dashboard-kpis .stat-card strong {
    align-self: end;
    font-size: 30px;
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f7f8fa;
    border: 1px solid var(--line);
    color: var(--primary-dark);
}

.stat-icon svg,
.dashboard-icon svg {
    display: block;
    flex: 0 0 auto;
    margin: auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.stat-content {
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 66px;
}

.stat-content span {
    align-items: end;
    display: flex;
    min-height: 34px;
}

.dashboard-kpis .stat-icon {
    grid-area: icon;
    justify-self: end;
}

.dashboard-kpis .stat-icon svg {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dashboard-kpis .stat-content {
    display: contents;
}

.dashboard-kpis .stat-content span {
    align-items: start;
    align-self: start;
    display: flex;
    grid-area: label;
    line-height: 1.25;
    min-height: 40px;
    padding-right: 8px;
}

.dashboard-kpis .stat-content strong {
    grid-area: value;
}

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

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.analytics-grid-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analytics-grid-wide .analytics-panel {
    min-height: 100%;
}

.analytics-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 18px;
}

.analytics-panel h2 {
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
    padding-bottom: 10px;
}
.member-stat-picker{display:grid;gap:7px;margin:0 0 16px}.member-stat-picker label{color:var(--muted);font-size:12px;font-weight:800;margin:0}.member-stat-picker select{background:#fff;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:700;min-height:46px;padding:10px 12px;width:100%}.member-stat-summary{align-items:baseline;background:#f6f7f9;border-radius:12px;display:flex;gap:8px;margin-bottom:10px;padding:12px 14px}.member-stat-summary strong{color:var(--primary);font-size:28px;line-height:1}.member-stat-summary span{color:var(--muted);font-size:13px;font-weight:800}.member-intervention-list{display:grid;max-height:310px;overflow:auto}.member-intervention-list>a{align-items:center;border-bottom:1px solid var(--line);color:inherit;display:grid;gap:10px;grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);padding:10px 3px;text-decoration:none}.member-intervention-list>a:hover{color:var(--primary)}.member-intervention-list>a>span:first-child{display:grid;gap:2px}.member-intervention-list small,.member-intervention-list>a>span:last-child{color:var(--muted);font-size:12px;overflow-wrap:anywhere}.member-stat-empty{margin-top:18px}@media(max-width:520px){.member-intervention-list>a{grid-template-columns:1fr}.member-intervention-list>a>span:last-child{margin-top:-5px}}

.ranking-list {
    display: grid;
    gap: 12px;
}

.ranking-row {
    display: grid;
    gap: 7px;
}

.ranking-row-main {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.ranking-row-main span {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-row-main strong {
    color: var(--primary-dark);
    font-size: 15px;
}

.ranking-bar {
    background: #eef1f4;
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.ranking-bar span {
    background: linear-gradient(90deg, var(--primary), #22272e);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.analytics-summary {
    display: grid;
    align-content: center;
    gap: 8px;
}

.analytics-summary strong {
    color: var(--primary-dark);
    font-size: 46px;
    line-height: 1;
}

.analytics-summary p,
.muted-text {
    color: var(--muted);
    margin-bottom: 0;
}

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

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

.dashboard-card {
    display: grid;
    gap: 11px;
    min-height: 158px;
    padding: 20px;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.dashboard-card strong {
    font-size: 20px;
    line-height: 1.15;
}

.dashboard-card small {
    color: var(--muted);
    font-size: 14px;
}

.dashboard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #f7f8fa;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary-dark);
}

.muted-card {
    opacity: 0.78;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
}

.status-pill.active {
    background: #e4f4ec;
    color: var(--success);
}

.status-pill.inactive {
    background: #eef1f4;
    color: var(--muted);
}

.status-pill.water-driver {
    background: #e8efff;
    color: #2452a3;
}

.water-terminal-list {
    display: grid;
    gap: 20px;
}

.water-terminal-list .water-terminal-admin {
    grid-template-columns: minmax(220px, 1fr) minmax(240px, auto);
}

@media (max-width: 760px) {
    .water-terminal-list .water-terminal-admin {
        grid-template-columns: 1fr;
    }

    .water-terminal-list .water-terminal-admin img {
        height: auto;
        max-width: 100%;
    }
}

.command-room-body {
    background: #111418;
    color: #f6f7f9;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.command-room {
    background:
        linear-gradient(135deg, rgba(178, 31, 45, 0.18), transparent 42%),
        linear-gradient(180deg, #191e24 0%, #111418 100%);
    box-sizing: border-box;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    padding: 18px;
}

.command-room-header {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 1fr) auto minmax(320px, 1fr);
    padding-bottom: 14px;
}

.command-room-brand {
    align-items: center;
    color: #ffffff;
    display: inline-flex;
    gap: 18px;
    text-decoration: none;
}

.command-room-brand img {
    background: #ffffff;
    border-radius: 8px;
    height: 64px;
    object-fit: contain;
    padding: 4px;
    width: 64px;
}

.command-room-brand span {
    display: grid;
    gap: 3px;
}

.command-room-brand strong {
    font-size: 22px;
    line-height: 1;
}

.command-room-brand small,
.command-room-clock span,
.command-eyebrow,
.command-kpis span,
.command-metric-grid span {
    color: #b7c0ca;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.command-room-clock {
    display: grid;
    justify-items: center;
    line-height: 1;
}

.command-room-clock strong {
    color: #ffffff;
    font-size: 56px;
}

.command-room-clock span {
    font-size: 15px;
    margin-top: 8px;
}

.command-room-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.command-primary {
    background: var(--primary);
    color: #ffffff;
}

.command-primary:hover {
    background: #d52b3b;
}

.command-water-action {
    background: #0f766e;
}

.command-water-action:hover {
    background: #0d665f;
}

.command-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.command-secondary:hover {
    background: rgba(255, 255, 255, 0.17);
}

.command-hero {
    align-items: stretch;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    padding: 18px 0 14px;
}

.command-hero h1 {
    color: #ffffff;
    font-size: 38px;
    line-height: 1.08;
    max-width: 980px;
}

.command-hero p {
    color: #c9d1da;
    font-size: 16px;
    margin-bottom: 0;
    max-width: 780px;
}

.command-hero-actions {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.command-big-action {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #ffffff;
    display: grid;
    gap: 14px;
    justify-items: center;
    min-height: 190px;
    padding: 26px;
    text-align: center;
    text-decoration: none;
}

.command-big-action span {
    align-items: center;
    background: var(--primary);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    height: 72px;
    justify-content: center;
    width: 72px;
}

.command-water-big-action span {
    background: #0f766e;
}

.command-big-action svg {
    fill: none;
    height: 38px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 38px;
}

.command-big-action strong {
    font-size: 28px;
    line-height: 1.05;
}

.command-hero-actions .command-big-action {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    min-height: 76px;
    padding: 16px 20px;
    text-align: left;
}

.command-hero-actions .command-big-action span {
    height: 50px;
    width: 50px;
}

.command-hero-actions .command-big-action svg {
    height: 31px;
    width: 31px;
}

.command-hero-actions .command-big-action strong {
    font-size: 22px;
}

.command-kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
}

.command-recent-ticker {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 14px;
    overflow: hidden;
    padding: 10px 14px;
}

.command-ticker-label {
    color: #f0c4c9;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.command-ticker-window {
    overflow: hidden;
}

.command-ticker-track {
    align-items: center;
    animation: command-ticker 42s linear infinite;
    display: flex;
    gap: 12px;
    width: max-content;
}

.command-ticker-item {
    align-items: baseline;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    gap: 9px;
    min-height: 38px;
    padding: 8px 13px;
    text-decoration: none;
    white-space: nowrap;
}

.command-ticker-item strong {
    color: #f0c4c9;
}

.command-ticker-item span {
    font-weight: 900;
}

.command-ticker-item small {
    color: #c9d1da;
    font-weight: 700;
}

@keyframes command-ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.command-kpis article,
.command-panel,
.command-slides {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.command-kpis article {
    display: grid;
    gap: 8px;
    min-height: 122px;
    padding: 18px;
}

.command-kpis strong {
    color: #ffffff;
    font-size: 42px;
    line-height: 1;
}

.command-room-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.5fr) minmax(440px, 0.8fr);
    transition: grid-template-columns 0.35s ease;
}

.command-room.command-photo-portrait .command-room-grid {
    grid-template-columns: minmax(420px, 0.82fr) minmax(0, 1.18fr);
}

.command-room.command-photo-wide .command-room-grid {
    grid-template-columns: minmax(0, 1.72fr) minmax(400px, 0.68fr);
}

.command-panel,
.command-slides {
    min-height: 396px;
    padding: 16px;
}

.command-recent {
    display: none;
}

.command-panel-heading {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.command-panel-heading h2 {
    color: #ffffff;
    font-size: 22px;
    margin: 0;
}

.command-panel-heading a,
.command-panel-heading span {
    color: #f0c4c9;
    font-weight: 800;
    text-decoration: none;
}

.command-recent-list {
    display: grid;
    gap: 10px;
}

.command-recent-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    display: grid;
    gap: 18px;
    grid-template-columns: 124px minmax(240px, 1fr) minmax(170px, auto);
    min-height: 76px;
    padding: 12px 14px;
    text-decoration: none;
}

.command-recent-number {
    color: #f0c4c9;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
}

.command-recent-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.command-recent-main strong,
.command-recent-main small,
.command-recent-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-recent-main strong {
    font-size: 17px;
}

.command-recent-main small,
.command-recent-meta {
    color: #c9d1da;
}

.command-recent-meta {
    font-size: 13px;
    line-height: 1.35;
    text-align: right;
}

.command-slides {
    position: relative;
}

.command-slide {
    display: none;
    min-height: 300px;
}

.command-slide.is-active {
    display: block;
}

.command-photo-rotator {
    border-radius: 8px;
    height: 330px;
    overflow: hidden;
    position: relative;
}

.command-photo-rotator-large {
    height: 460px;
}

.command-photo {
    display: none;
    inset: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
}

.command-photo.is-active {
    display: block;
}

.command-photo img {
    display: block;
    height: 100%;
    object-fit: contain;
    position: relative;
    width: 100%;
    z-index: 1;
}

.command-photo-bg {
    background-position: center;
    background-size: cover;
    filter: blur(22px) saturate(1.05);
    inset: -34px;
    opacity: 0.48;
    position: absolute;
    transform: scale(1.04);
}

.command-photo::after {
    background: rgba(13, 16, 20, 0.32);
    content: "";
    inset: 0;
    position: absolute;
}

.command-photo figcaption {
    align-items: center;
    background: linear-gradient(180deg, rgba(17, 20, 24, 0), rgba(17, 20, 24, 0.86));
    bottom: 0;
    color: #ffffff;
    display: grid;
    gap: 4px;
    left: 0;
    padding: 60px 18px 18px;
    position: absolute;
    right: 0;
    z-index: 2;
}

.command-photo figcaption strong {
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
}

.command-photo figcaption span {
    color: #f0c4c9;
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-metric-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 260px;
}

.command-metric-grid article {
    align-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: grid;
    gap: 16px;
    justify-items: center;
    padding: 20px;
    text-align: center;
}

.command-metric-grid strong {
    color: #ffffff;
    font-size: 56px;
    line-height: 1;
}

.command-ranking {
    display: grid;
    gap: 13px;
}

.command-ranking-row {
    display: grid;
    gap: 7px;
}

.command-ranking-row > div {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.command-ranking-row span {
    color: #ffffff;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-ranking-row strong {
    color: #f0c4c9;
    font-size: 18px;
}

.command-ranking-bar {
    background: rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    display: block;
    height: 9px;
    overflow: hidden;
}

.command-ranking-bar i {
    background: linear-gradient(90deg, #d52b3b, #ffffff);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.command-two-rankings {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.command-two-rankings h3 {
    color: #c9d1da;
    font-size: 15px;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.command-slide-controls {
    align-items: center;
    bottom: 16px;
    display: flex;
    gap: 14px;
    justify-content: center;
    left: 18px;
    position: absolute;
    right: 18px;
}

.command-slide-controls > button {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 28px;
    height: 38px;
    justify-content: center;
    line-height: 1;
    width: 38px;
}

.command-slide-dots {
    display: flex;
    gap: 8px;
}

.command-slide-dots button {
    background: rgba(255, 255, 255, 0.28);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    height: 9px;
    padding: 0;
    width: 28px;
}

.command-slide-dots button.is-active {
    background: #ffffff;
}

.command-empty {
    color: #c9d1da;
    margin: 0;
}

@media (max-width: 1100px) {
    .topbar {
        gap: 18px;
        grid-template-columns: minmax(270px, auto) minmax(0, 1fr);
        padding-left: 24px;
        padding-right: 24px;
    }

    .brand {
        gap: 13px;
    }

    .brand img,
    .brand-logo-placeholder {
        height: 68px;
        width: 68px;
    }

    .brand-text strong {
        font-size: 18px;
    }

    .brand-text small {
        font-size: 12px;
    }

    .nav {
        gap: 3px;
    }

    .nav a {
        font-size: 13px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .command-room-header,
    .command-hero,
    .command-room-grid {
        grid-template-columns: 1fr;
    }

    .command-room-clock {
        justify-items: start;
    }

    .command-room-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .page-heading {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .page-heading > .button,
    .page-heading > .button-row,
    .page-heading-actions {
        justify-self: stretch;
    }

    .page-heading-actions {
        justify-content: stretch;
    }

    .nav {
        gap: 4px;
        justify-content: flex-start;
    }

    .grid-form,
    .filters,
    .checkbox-grid,
    .members-grid,
    .details dl,
    .stats-grid,
    .split,
    .analytics-grid,
    .analytics-grid-wide,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: auto;
    }

    .dashboard-kpis .stat-card {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

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

    .intervention-leaders {
        grid-column: 1 / -1;
    }

    .photo-grid,
    .gallery-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-intervention-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .photo-upload-form {
        align-items: stretch;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body {
        background: #f7f8fa;
        font-size: 15px;
        padding-bottom: 82px;
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .topbar {
        align-items: center;
        display: grid;
        gap: 8px;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        height: 82px;
        padding: 8px 14px;
        position: sticky;
        overflow: visible;
    }

    .brand {
        gap: 9px;
        justify-self: center;
        min-width: 0;
        width: 100%;
    }

    .topbar-public .brand {
        grid-column: 2;
    }

    .brand img,
    .brand-logo-placeholder {
        height: 52px;
        width: 52px;
    }

    .brand-logo-placeholder {
        font-size: 9px;
        padding: 5px;
    }

    .brand-text strong {
        font-size: 16px;
    }

    .brand-text small {
        font-size: 12px;
    }

    .mobile-menu {
        display: block;
        justify-self: start;
        position: relative;
    }

    .mobile-menu-button {
        align-items: center;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--secondary);
        cursor: pointer;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        list-style: none;
        width: 42px;
    }

    .mobile-menu-button::-webkit-details-marker {
        display: none;
    }

    .mobile-menu-button svg {
        height: 24px;
        width: 24px;
    }

    .mobile-menu-panel {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
        display: grid;
        gap: 6px;
        left: 0;
        max-width: calc(100vw - 28px);
        width: 280px;
        padding: 10px;
        position: absolute;
        top: calc(100% + 10px);
        z-index: 40;
    }

    .mobile-menu-title {
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 2px;
        margin-bottom: 4px;
        padding: 4px 6px 10px;
    }

    .mobile-menu-title strong {
        font-size: 13px;
        line-height: 1.1;
    }

    .mobile-menu-title span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mobile-menu-panel a {
        align-items: center;
        border-radius: 7px;
        color: var(--secondary);
        display: grid;
        font-weight: 800;
        gap: 10px;
        grid-template-columns: 24px minmax(0, 1fr);
        min-height: 42px;
        padding: 9px 10px;
        text-decoration: none;
    }

    .mobile-menu-panel a.is-active {
        background: var(--primary-soft);
        color: var(--primary-dark);
    }

    .mobile-menu-panel a.danger {
        color: var(--error);
    }

    .mobile-menu-panel svg {
        height: 21px;
        width: 21px;
    }

    .nav {
        display: none;
    }

    .container {
        max-width: 1120px;
        width: calc(100% - 24px);
        margin-bottom: 24px;
        margin-top: 18px;
    }

    h1 {
        font-size: 24px;
        line-height: 1.12;
    }

    h2 {
        font-size: 18px;
    }

    .page-heading {
        gap: 10px;
        margin-bottom: 12px;
        min-height: 0;
    }

    .page-heading p,
    .section-heading p {
        font-size: 14px;
    }

    .page-heading .button,
    .page-heading .button-row,
    .page-heading-actions .button,
    .page-heading-actions form,
    .page-heading-actions form .button,
    .actions .button,
    .button-row .button,
    .button-row form,
    .button-row form .button {
        width: 100%;
    }

    .button-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        margin-top: 18px;
    }

    .auth-panel,
    .form,
    .details,
    .stat-card,
    .table-wrap,
    .dashboard-card,
    .analytics-panel {
        border-radius: 7px;
    }

    .auth-panel {
        margin: 24px auto;
        padding: 18px;
    }

    .form,
    .details {
        padding: 12px;
    }

    .grid-form {
        gap: 11px;
    }

    .intervention-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .intervention-form > label,
    .intervention-form .span-2 {
        grid-column: 1 / -1;
    }

    .intervention-form > .mobile-half-field {
        grid-column: auto;
    }

    .grid-form > label {
        gap: 5px;
    }

    input,
    select,
    textarea {
        min-height: 44px;
        padding: 10px 11px;
    }

    textarea {
        min-height: 112px;
    }

    .copy-field {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .form-section {
        margin-top: 3px;
        padding-top: 12px;
    }

    .form-section h2 {
        font-size: 16px;
    }

    .form-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .form-section-heading .button {
        width: 100%;
    }

    .field-label-row {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .field-label-row .button {
        width: 100%;
    }

    .checkbox-grid,
    .members-grid {
        gap: 6px;
    }

    .members-grid {
        background: var(--panel-soft);
        border: 1px solid var(--line);
        border-radius: 6px;
        max-height: 330px;
        overflow-y: auto;
        padding: 6px;
    }

    .check-option {
        background: #ffffff;
        border-radius: 5px;
        gap: 8px;
        min-height: 36px;
        padding: 6px 8px;
    }

    .check-option input {
        flex: 0 0 auto;
        height: 17px;
        width: 17px;
    }

    .check-option span {
        font-size: 14px;
        line-height: 1.25;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .actions {
        justify-content: stretch;
    }

    .stats-grid {
        gap: 9px;
    }

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

    .dashboard-kpis .stat-card {
        align-items: start;
        grid-template-areas:
            "label icon"
            "value value";
        grid-template-columns: minmax(0, 1fr) 34px;
        grid-template-rows: minmax(46px, auto) 1fr;
        min-height: 132px;
        padding: 14px;
    }

    .stat-card strong,
    .dashboard-kpis .stat-card strong {
        font-size: 25px;
    }

    .stat-card span {
        font-size: 13px;
    }

    .stat-content {
        gap: 4px;
        min-height: 0;
    }

    .stat-content span {
        min-height: 0;
    }

    .dashboard-kpis .stat-content {
        display: contents;
    }

    .dashboard-kpis .stat-content span {
        align-items: start;
        min-height: 46px;
        padding-right: 4px;
    }

    .dashboard-kpis .stat-content strong {
        align-self: end;
    }

    .stat-icon {
        height: 34px;
        width: 34px;
    }

    .stat-icon svg,
    .dashboard-icon svg {
        height: 20px;
        width: 20px;
    }

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

    .dashboard-card {
        align-content: start;
        gap: 9px;
        min-height: 142px;
        padding: 14px;
    }

    .dashboard-card strong {
        font-size: 16px;
    }

    .dashboard-card small {
        font-size: 12px;
        line-height: 1.35;
    }

    .dashboard-icon {
        height: 36px;
        width: 36px;
    }

    .mobile-tabbar {
        align-items: end;
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--line);
        bottom: 0;
        box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.1);
        display: grid;
        gap: 2px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        height: 80px;
        height: calc(80px + env(safe-area-inset-bottom));
        left: 0;
        padding: 7px 8px 8px;
        padding: 7px 8px calc(8px + env(safe-area-inset-bottom));
        position: fixed;
        right: 0;
        z-index: 50;
    }

    .mobile-tabbar a {
        align-items: center;
        color: var(--muted);
        display: grid;
        font-size: 11px;
        font-weight: 800;
        gap: 3px;
        justify-items: center;
        line-height: 1.1;
        min-width: 0;
        text-decoration: none;
    }

    .mobile-tab-icon {
        align-items: center;
        display: inline-flex;
        height: 26px;
        justify-content: center;
        width: 26px;
    }

    .mobile-tab-icon svg {
        height: 22px;
        width: 22px;
    }

    .mobile-tabbar a.is-active {
        color: var(--primary-dark);
    }

    .mobile-tab-center {
        margin-top: -32px;
    }

    .mobile-tab-center .mobile-tab-icon {
        background: var(--primary);
        border: 4px solid #ffffff;
        border-radius: 50%;
        box-shadow: 0 9px 22px rgba(178, 31, 45, 0.28);
        color: #ffffff;
        height: 62px;
        width: 62px;
    }

    .mobile-tab-center .mobile-tab-icon svg {
        height: 27px;
        width: 27px;
    }

    .mobile-tab-center.is-active .mobile-tab-icon {
        background: var(--primary-dark);
    }

    .analytics-grid {
        gap: 10px;
    }

    .analytics-panel {
        padding: 14px;
    }

    .ranking-row-main {
        align-items: flex-start;
        gap: 10px;
    }

    .ranking-row-main span {
        white-space: normal;
    }

    .readonly-field {
        min-height: 58px;
        padding: 9px 10px;
    }

    .readonly-field strong {
        font-size: 15px;
    }

    .readonly-pill {
        font-size: 13px;
        min-height: 31px;
        padding: 5px 10px;
    }

    .filters,
    .members-filters {
        gap: 8px;
    }

    .interventions-filters {
        padding: 12px;
    }

    .filter-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .filters .button,
    .members-filters .button {
        width: 100%;
    }

    .filter-actions .button {
        width: 100%;
    }

    .results-bar {
        margin-top: 8px;
    }

    .interventions-list {
        gap: 9px;
    }

    .intervention-card {
        align-items: stretch;
        gap: 12px;
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .intervention-card-main {
        align-items: stretch;
        gap: 12px;
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .intervention-number {
        min-height: 62px;
        padding: 8px 10px;
    }

    .intervention-number strong {
        font-size: 16px;
    }

    .intervention-summary h2 {
        font-size: 16px;
        white-space: normal;
    }

    .intervention-location-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .intervention-meta {
        gap: 7px;
    }

    .intervention-meta span {
        font-size: 11px;
    }

    .intervention-type {
        padding: 4px 7px;
    }

    .intervention-leaders {
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .intervention-leaders dd {
        white-space: normal;
    }

    .intervention-open {
        width: 100%;
    }

    .photo-grid,
    .gallery-photo-grid {
        grid-template-columns: 1fr;
    }

    .gallery-intervention-grid {
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .gallery-year-filter {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .gallery-group {
        padding: 12px;
    }

    .gallery-group-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .gallery-detail-actions,
    .gallery-detail-actions form,
    .gallery-detail-actions .button {
        width: 100%;
    }

    .gallery-detail-actions {
        align-items: stretch;
        justify-content: stretch;
    }

    .gallery-photo-actions {
        grid-template-columns: 1fr;
    }

    .watermark-modal {
        align-items: stretch;
        padding: 8px;
    }

    .watermark-dialog {
        max-height: calc(100vh - 16px);
    }

    .watermark-dialog form {
        padding: 12px;
    }

    .watermark-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .watermark-stage-wrap {
        gap: 8px;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }

    .watermark-arrow {
        height: 36px;
        width: 36px;
    }

    .watermark-controls {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .gallery-lightbox {
        align-items: stretch;
        padding: 8px;
    }

    .gallery-lightbox-dialog {
        max-height: calc(100vh - 16px);
        overflow: auto;
        padding: 12px;
    }

    .gallery-lightbox-header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .gallery-lightbox-stage {
        gap: 8px;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }

    .gallery-lightbox-stage figure {
        padding: 8px;
    }

    .gallery-lightbox-stage img {
        max-height: 62vh;
    }

    .empty-state {
        padding: 20px 14px;
    }

    .empty-state h2 {
        font-size: 17px;
    }

    .table-wrap,
    .no-scroll-table {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow-x: visible;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
    }

    thead {
        display: none;
    }

    tbody {
        display: grid;
        gap: 10px;
    }

    tr {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        overflow: hidden;
    }

    tbody tr:hover {
        background: var(--panel);
    }

    td {
        align-items: flex-start;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(98px, 36%) minmax(0, 1fr);
        padding: 10px 12px;
        text-align: left;
        white-space: normal;
        word-break: break-word;
    }

    td:last-child {
        border-bottom: 0;
    }

    td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    td[data-label=""] {
        display: block;
    }

    td[data-label=""]::before {
        content: none;
    }

    td[colspan] {
        display: block;
    }

    td[colspan]::before {
        content: none;
    }

    td[data-label=""] a,
    td[data-label=""] .button,
    td[data-label="Uredi"] .button {
        width: 100%;
    }

    td[data-label=""] a {
        align-items: center;
        background: #e9eef4;
        border-radius: 6px;
        color: var(--text);
        display: inline-flex;
        font-weight: 800;
        justify-content: center;
        min-height: 40px;
        padding: 9px 12px;
        text-decoration: none;
    }

    .interventions-table {
        table-layout: auto;
    }

    .interventions-table th,
    .interventions-table td,
    .interventions-table th:nth-child(7),
    .interventions-table td:nth-child(7) {
        font-size: 14px;
        text-align: left;
        width: auto;
    }

    .truncate-cell,
    .interventions-table td:nth-child(3),
    .interventions-table td:nth-child(4),
    .interventions-table td:nth-child(5),
    .interventions-table td:nth-child(6) {
        overflow: visible;
        text-overflow: initial;
        white-space: normal;
    }

    .interventions-table td:first-child {
        background: #fbfcfd;
        font-weight: 800;
    }

    .interventions-table td[data-label=""] a {
        align-items: center;
        background: var(--primary);
        border-radius: 6px;
        color: #ffffff;
        display: inline-flex;
        font-weight: 800;
        justify-content: center;
        min-height: 40px;
        padding: 9px 12px;
        text-decoration: none;
    }

    .status-pill {
        justify-content: center;
        width: fit-content;
    }

    .command-room {
        padding: 14px;
    }

    .command-room-header,
    .command-hero,
    .command-room-grid,
    .command-two-rankings {
        grid-template-columns: 1fr;
    }

    .command-room-actions {
        justify-content: stretch;
    }

    .command-room-actions .button,
    .command-big-action {
        width: 100%;
    }

    .command-room-clock {
        justify-items: start;
    }

    .command-hero h1 {
        font-size: 30px;
    }

    .command-kpis,
    .command-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .command-room-grid {
        gap: 12px;
    }

    .command-recent-row {
        grid-template-columns: 1fr;
    }

    .command-recent-meta {
        text-align: left;
    }

    .command-slides,
    .command-panel {
        min-height: 0;
    }

    .command-slide {
        min-height: 420px;
        padding-bottom: 58px;
    }

    .command-photo-rotator {
        height: 300px;
    }

    .command-photo figcaption strong {
        font-size: 22px;
    }

    .command-photo figcaption span {
        white-space: normal;
    }
}

/* Premium SaaS polish */
:root {
    --radius: 16px;
    --shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 10px 35px rgba(0, 0, 0, 0.05);
}

body {
    background:
        radial-gradient(circle at 18% 8%, rgba(227, 6, 19, 0.055), transparent 28rem),
        radial-gradient(circle at 82% 0%, rgba(17, 24, 39, 0.050), transparent 26rem),
        linear-gradient(180deg, #f8fafc 0%, #f5f6f8 44%, #f3f4f6 100%);
}

.app-sidebar {
    background:
        radial-gradient(circle at 45% 92%, rgba(227, 6, 19, 0.32), transparent 46%),
        linear-gradient(180deg, #050505 0%, #0a0707 47%, #180001 100%);
    box-shadow: 20px 0 70px rgba(0, 0, 0, 0.22), inset -1px 0 0 rgba(255, 255, 255, 0.08);
    gap: 16px;
    padding: 16px 16px 20px;
    width: 320px;
}

.app-shell {
    padding-left: 320px;
}

.app-sidebar::before {
    background: radial-gradient(circle, rgba(227, 6, 19, 0.20), transparent 58%);
    content: "";
    height: 190px;
    left: -60px;
    pointer-events: none;
    position: absolute;
    top: 54px;
    width: 210px;
}

.app-sidebar::after {
    background:
        radial-gradient(circle at 50% 100%, rgba(227, 6, 19, 0.34), transparent 60%),
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025));
}

.sidebar-logo {
    min-height: 80px;
    padding: 0 4px 6px;
}

.sidebar-logo img {
    max-height: 94px;
    width: 284px;
}

.sidebar-nav {
    gap: 8px;
}

.sidebar-nav a {
    border: 1px solid transparent;
    border-radius: 12px;
    min-height: 46px;
    padding: 11px 13px;
}

.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.085);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.sidebar-nav a.is-active {
    background: linear-gradient(135deg, #e30613, #ba000a);
    box-shadow: 0 14px 34px rgba(227, 6, 19, 0.30);
}

input,
select,
textarea {
    border-radius: 12px;
    min-height: 48px;
    padding: 12px 14px;
}

textarea {
    min-height: 132px;
}

.button,
.icon-button,
.notification-button,
.mobile-menu-button {
    border-radius: 12px;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.button {
    min-height: 46px;
    padding: 12px 18px;
}

.button:hover,
.icon-button:hover,
.notification-button:hover,
.mobile-menu-button:hover {
    transform: translateY(-2px);
}

.button.primary:hover,
.dashboard-cta:hover {
    background: #bf000a;
    box-shadow: 0 18px 38px rgba(227, 6, 19, 0.28);
}

.auth-panel,
.form,
.details,
.stat-card,
.table-wrap,
.dashboard-card,
.analytics-panel,
.activity-panel,
.photo-tile,
.gallery-photo-card,
.gallery-group,
.intervention-card,
.empty-state {
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
}

.form,
.details,
.analytics-panel,
.activity-panel,
.gallery-group {
    padding: 28px;
}

.dashboard-kpis {
    gap: 20px;
    margin-bottom: 28px;
}

.dashboard-kpis .stat-card {
    min-height: 154px;
    padding: 28px 28px 26px 30px;
}

.quick-links-grid {
    gap: 20px;
}

.quick-links-grid .dashboard-card,
.dashboard-card {
    border-radius: 16px;
    padding: 30px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.dashboard-card:hover,
.stat-card:hover,
.activity-panel:hover {
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.dashboard-heading {
    margin-bottom: 34px;
}

.dashboard-heading h1,
.page-heading h1 {
    font-size: clamp(42px, 4vw, 48px);
    font-weight: 850;
    letter-spacing: -0.015em;
}

.dashboard-heading p,
.page-heading p,
.section-heading p {
    color: #8a93a3;
}

.section-heading {
    margin: 28px 0 18px;
}

.dashboard-main-grid {
    gap: 28px;
    margin-top: 30px;
}

.activity-list {
    gap: 18px;
}

.table-wrap {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(229, 231, 235, 0.82);
    overflow: hidden;
    padding: 8px;
}

table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

thead th {
    border-bottom: 0;
    color: #8a93a3;
    font-size: 11px;
    letter-spacing: 0.075em;
    padding: 12px 20px 8px;
}

tbody tr {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

tbody tr:hover {
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.055);
    transform: translateY(-2px);
}

th,
td {
    border-bottom: 0;
    padding: 19px 22px;
    vertical-align: middle;
}

tbody td:first-child {
    border-bottom-left-radius: 14px;
    border-top-left-radius: 14px;
}

tbody td:last-child {
    border-bottom-right-radius: 14px;
    border-top-right-radius: 14px;
}

td[data-label=""] a,
td[data-label="Uredi"] a {
    align-items: center;
    background: #f3f4f6;
    border-radius: 10px;
    color: #111827;
    display: inline-flex;
    font-weight: 850;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

td[data-label=""] a:hover,
td[data-label="Uredi"] a:hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
}

.license-badge,
.status-pill {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 850;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    padding: 7px 11px;
}

.license-badge-trial {
    background: rgba(227, 6, 19, 0.09);
    border-color: rgba(227, 6, 19, 0.18);
    color: #c2000b;
}

.license-badge-paid {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.20);
    color: #047857;
}

.license-badge-suspended,
.license-badge-brez {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

.interventions-table th,
.interventions-table td {
    font-size: 14px;
    padding-left: 18px;
    padding-right: 18px;
}

@media (max-width: 1180px) {
    .app-shell {
        padding-left: 280px;
    }

    .app-sidebar {
        width: 280px;
    }

    .sidebar-logo img {
        max-height: 84px;
        width: 244px;
    }
}

@media (max-width: 760px) {
    .dashboard-heading h1,
    .page-heading h1 {
        font-size: 32px;
    }

    .app-shell {
        padding-left: 0;
    }

    .form,
    .details,
    .analytics-panel,
    .activity-panel {
        padding: 18px;
    }

    table {
        border-spacing: 0;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
    }

    thead {
        display: none;
    }

    tbody {
        display: grid;
        gap: 10px;
    }

    tbody td:first-child,
    tbody td:last-child {
        border-radius: 0;
    }

    tbody td:first-child {
        border-radius: 14px 14px 0 0;
    }

    tbody td:last-child {
        border-radius: 0 0 14px 14px;
    }

    td {
        border-bottom: 1px solid var(--line);
        min-height: 48px;
        padding: 12px 14px;
    }

    td:last-child {
        border-bottom: 0;
    }

    tbody tr,
    tbody tr:hover {
        transform: none;
    }
}

@media (max-width: 430px) {
    .intervention-form {
        grid-template-columns: 1fr;
    }

    .intervention-form > .mobile-half-field {
        grid-column: 1;
    }
}

@media print {
    .topbar,
    .app-sidebar,
    .app-footer,
    .button {
        display: none;
    }

    body {
        background: #ffffff;
    }

    .container {
        width: 100%;
        margin: 0;
    }
}

/* Intervencije.si brand refresh */
:root {
    --bg: #f5f6f8;
    --bg-soft: #f8fafc;
    --panel: #ffffff;
    --panel-soft: #f9fafb;
    --text: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
    --line-strong: #d1d5db;
    --primary: #e30613;
    --primary-dark: #b8000a;
    --primary-soft: rgba(227, 6, 19, 0.10);
    --secondary: #111111;
    --radius: 12px;
    --shadow: 0 18px 42px rgba(17, 24, 39, 0.10);
    --shadow-soft: 0 10px 26px rgba(17, 24, 39, 0.08);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.app-sidebar svg,
.topbar-actions svg,
.dashboard-cta svg,
.dashboard-card em svg,
.activity-item svg,
.app-footer svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.app-shell {
    display: grid;
    min-height: 100vh;
    padding-left: 292px;
}

.public-shell {
    min-height: 100vh;
}

.app-sidebar {
    background: linear-gradient(180deg, #050505 0%, #160000 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    bottom: 0;
    box-shadow: 24px 0 70px rgba(17, 24, 39, 0.16);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 22px;
    left: 0;
    padding: 24px 18px;
    position: fixed;
    top: 0;
    width: 292px;
    z-index: 60;
}

.app-sidebar::after {
    background: radial-gradient(circle at 50% 100%, rgba(227, 6, 19, 0.30), transparent 62%);
    bottom: 0;
    content: "";
    height: 260px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.sidebar-logo,
.sidebar-nav,
.backup-card {
    position: relative;
    z-index: 1;
}

.sidebar-logo {
    align-items: center;
    display: flex;
    min-height: 74px;
    padding: 4px 6px 14px;
}

.sidebar-logo img {
    display: block;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    width: 210px;
}

.sidebar-nav {
    align-content: start;
    display: grid;
    gap: 7px;
}

.sidebar-nav a,
.sidebar-nav-item,
.mobile-menu-panel a,
.mobile-menu-panel .sidebar-nav-item {
    align-items: center;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.74);
    display: grid;
    font-size: 14px;
    font-weight: 800;
    gap: 12px;
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 44px;
    padding: 10px 12px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.sidebar-nav a.is-active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(227, 6, 19, 0.26);
}

.sidebar-nav svg {
    color: currentColor;
    height: 21px;
    width: 21px;
}

.backup-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ffffff;
    display: grid;
    gap: 5px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 14px;
}

.backup-card .backup-icon {
    align-items: center;
    background: rgba(227, 6, 19, 0.16);
    border-radius: 10px;
    color: #ff4450;
    display: inline-flex;
    grid-row: span 2;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.backup-card svg {
    height: 21px;
    width: 21px;
}

.backup-card strong {
    font-size: 14px;
    line-height: 1.1;
}

.backup-card small {
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    line-height: 1.35;
}

.topbar.app-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) auto;
    height: 82px;
    overflow: visible;
    padding: 12px 34px;
    position: sticky;
    top: 0;
    z-index: 45;
}

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

.app-topbar .brand img {
    height: 50px;
    width: 50px;
}

.app-topbar .brand-text strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.app-topbar .brand-text small {
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.topbar-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.year-select {
    display: block;
}

.year-select select {
    background: #ffffff;
    border-radius: 10px;
    font-weight: 800;
    min-height: 42px;
    min-width: 104px;
}

.notification-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    list-style: none;
    position: relative;
    width: 42px;
}

.notification-button::-webkit-details-marker {
    display: none;
}

.notification-button svg {
    height: 20px;
    width: 20px;
}

.notification-menu {
    position: relative;
}

.notification-menu:not(.has-unread) .notification-dot {
    display: none;
}

.notification-dot {
    background: var(--primary);
    border: 2px solid #ffffff;
    border-radius: 50%;
    height: 10px;
    position: absolute;
    right: 9px;
    top: 8px;
    width: 10px;
}

.notification-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.16);
    display: grid;
    gap: 16px;
    padding: 18px;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: min(420px, calc(100vw - 32px));
    z-index: 80;
}

.user-chip {
    align-items: center;
    display: flex;
    gap: 10px;
}

.user-avatar {
    align-items: center;
    background: #111111;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: 15px;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    text-transform: uppercase;
    width: 42px;
}

.user-chip strong,
.user-chip small {
    display: block;
    line-height: 1.15;
}

.user-chip strong {
    font-size: 14px;
    font-weight: 900;
}

.user-chip small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.container {
    margin-bottom: 30px;
    margin-top: 28px;
}

.app-shell .container-wide {
    width: min(1420px, calc(100% - 64px));
}

.dashboard-heading {
    margin-bottom: 22px;
}

.dashboard-heading .eyebrow {
    color: var(--primary);
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.dashboard-heading h1 {
    color: var(--text);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.dashboard-heading p {
    color: var(--muted);
    font-size: 16px;
}

.dashboard-cta {
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(227, 6, 19, 0.22);
    gap: 8px;
    min-height: 48px;
    padding: 12px 18px;
}

.dashboard-cta svg {
    height: 20px;
    width: 20px;
}

.auth-panel,
.form,
.details,
.stat-card,
.table-wrap,
.dashboard-card,
.analytics-panel,
.activity-panel {
    border-color: var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 30px rgba(17, 24, 39, 0.04);
}

.dashboard-kpis {
    gap: 16px;
    margin-bottom: 8px;
}

.dashboard-kpis .stat-card {
    border-left: 0;
    min-height: 138px;
    padding: 20px 20px 18px 22px;
}

.dashboard-kpis .stat-card::before {
    background: var(--primary);
    border-radius: 12px 0 0 12px;
    width: 5px;
}

.dashboard-kpis .stat-icon,
.dashboard-icon {
    background: var(--primary-soft);
    border: 0;
    border-radius: 12px;
    color: var(--primary);
}

.dashboard-kpis .stat-content span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.dashboard-kpis .stat-content strong {
    color: var(--primary);
    font-size: 34px;
    font-weight: 900;
}

.dashboard-main-grid {
    align-items: start;
    display: block;
    gap: 22px;
    margin-top: 18px;
}

.quick-links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.quick-links-grid .dashboard-card {
    border-radius: 12px;
    min-height: 176px;
    padding: 20px;
    position: relative;
}

.quick-links-empty {
    grid-column: 1 / -1;
}

.quick-links-grid .dashboard-card:hover {
    border-color: rgba(227, 6, 19, 0.55);
    box-shadow: var(--shadow-soft);
    transform: translateY(-3px);
}

.quick-links-settings {
    justify-self: end;
    position: relative;
}

.quick-links-settings summary {
    cursor: pointer;
    list-style: none;
}

.quick-links-settings summary::-webkit-details-marker {
    display: none;
}

.quick-links-settings-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.16);
    display: grid;
    gap: 14px;
    padding: 16px;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(420px, calc(100vw - 32px));
    z-index: 60;
}

.quick-links-options {
    display: grid;
    gap: 8px;
}

.quick-links-options label {
    align-items: start;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 18px minmax(0, 1fr);
    padding: 10px;
}

.quick-links-options input {
    height: 18px;
    margin-top: 2px;
    padding: 0;
    width: 18px;
}

.quick-links-options strong,
.quick-links-options small {
    display: block;
    line-height: 1.3;
}

.quick-links-options strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.quick-links-options small {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.settings-hub {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
    margin-top: 28px;
}

.settings-hub-sections {
    grid-template-columns: 1fr;
}

.settings-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    display: grid;
    gap: 16px;
    padding: 22px;
}

.settings-panel-primary {
    border-left: 5px solid var(--primary);
    min-height: 100%;
}

.settings-panel-muted {
    background: #f8fafc;
}

.settings-panel .section-heading {
    margin: 0;
}

.settings-panel .section-heading h2 {
    margin-bottom: 4px;
}

.settings-side {
    display: grid;
    gap: 18px;
}

.settings-list {
    display: grid;
    gap: 12px;
}

.settings-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-list.compact {
    gap: 10px;
}

.settings-list.compact .settings-link-card,
.settings-side > .settings-panel > .settings-link-card {
    min-height: 82px;
}

.settings-link-card {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    display: grid;
    gap: 14px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    min-height: 92px;
    padding: 16px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.settings-link-button {
    appearance: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
}

.settings-link-card:hover {
    border-color: rgba(227, 6, 19, 0.45);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.settings-link-card strong,
.settings-link-card small {
    display: block;
}

.settings-link-card strong {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
}

.settings-link-card small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    margin-top: 3px;
}

.settings-link-card em {
    color: var(--primary);
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.settings-modal {
    align-items: center;
    background: rgba(17, 20, 24, 0.72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 130;
}

.settings-modal[hidden] {
    display: none;
}

.settings-modal-dialog {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    display: grid;
    gap: 18px;
    max-height: calc(100vh - 44px);
    overflow: auto;
    padding: 22px;
    width: min(640px, 100%);
}

.settings-modal-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding-bottom: 16px;
}

.settings-modal-header h2,
.settings-modal-header p {
    margin: 0;
}

.settings-modal-header p {
    color: var(--muted);
    margin-top: 4px;
}

.settings-modal-header .icon-button {
    flex: 0 0 auto;
    transform: rotate(45deg);
}

.license-modal-status {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.license-modal-status > div {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 8px;
    min-height: 96px;
    padding: 14px;
}

.license-modal-status span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.license-modal-status strong:not(.license-badge) {
    font-size: 20px;
    font-weight: 900;
}

.license-modal-form {
    margin: 0;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .license-modal-status {
        grid-template-columns: 1fr;
    }
}

.dashboard-card strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.dashboard-card small {
    line-height: 1.45;
}

.dashboard-card em {
    align-items: center;
    align-self: end;
    color: var(--primary);
    display: inline-flex;
    font-style: normal;
    height: 22px;
    justify-content: flex-start;
}

.dashboard-card em svg {
    height: 20px;
    width: 20px;
}

.section-heading h2,
.activity-panel-heading h2 {
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.dashboard-main-grid .section-heading-actions {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.activity-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    display: grid;
    gap: 16px;
    padding: 20px;
}

.activity-panel-heading {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding-bottom: 13px;
}

.activity-panel-heading h2 {
    margin: 0;
}

.activity-panel-heading span {
    background: var(--primary-soft);
    border-radius: 999px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    padding: 5px 10px;
}

.activity-list {
    display: grid;
    gap: 12px;
}

.activity-item {
    align-items: start;
    display: grid;
    gap: 11px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
}

.activity-item > span {
    align-items: center;
    background: #f3f4f6;
    border-radius: 10px;
    color: var(--primary);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.activity-item svg {
    height: 18px;
    width: 18px;
}

.activity-item strong,
.activity-item small {
    display: block;
    line-height: 1.25;
}

.activity-item strong {
    font-size: 14px;
    font-weight: 900;
}

.activity-item small,
.activity-item time {
    color: var(--muted);
    font-size: 12px;
}

.activity-item time {
    white-space: nowrap;
}

.app-footer {
    align-items: center;
    background: #070707;
    border-top: 3px solid var(--primary);
    color: #ffffff;
    display: grid;
    font-size: 13px;
    font-weight: 800;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: auto;
    min-height: 58px;
    padding: 16px 34px;
    position: relative;
}

.app-footer::before {
    background: linear-gradient(90deg, transparent, rgba(227, 6, 19, 0.95), transparent);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: -4px;
}

.app-footer span:nth-child(2) {
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.app-footer span:last-child {
    color: rgba(255, 255, 255, 0.72);
    text-align: right;
}

@media (max-width: 1180px) {
    .app-shell {
        padding-left: 248px;
    }

    .app-sidebar {
        width: 248px;
    }

    .sidebar-logo img {
        width: 190px;
    }

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

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: 82px;
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .app-sidebar {
        display: none;
    }

    .app-shell {
        padding-left: 0;
    }

    .topbar.app-topbar {
        grid-template-columns: 44px minmax(0, 1fr);
        height: 76px;
        padding: 9px 14px;
    }

    .app-topbar .brand {
        justify-self: start;
    }

    .app-topbar .brand img {
        height: 46px;
        width: 46px;
    }

    .topbar-actions {
        display: none;
    }

    .mobile-menu-panel {
        background: #090909;
        border-color: rgba(255, 255, 255, 0.10);
        border-radius: 12px;
        box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
    }

    .mobile-menu-panel a {
        color: rgba(255, 255, 255, 0.78);
    }

    .mobile-menu-panel a.is-active {
        background: var(--primary);
        color: #ffffff;
    }

    .mobile-menu-title {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .mobile-menu-title strong {
        color: #ffffff;
    }

    .mobile-menu-title span {
        color: rgba(255, 255, 255, 0.62);
    }

    .app-shell .container,
    .app-shell .container-wide {
        width: calc(100% - 24px);
    }

    .dashboard-heading {
        gap: 14px;
    }

    .dashboard-heading h1 {
        font-size: 28px;
    }

    .dashboard-cta {
        width: 100%;
    }

    .dashboard-kpis,
    .quick-links-grid,
    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .quick-links-grid .dashboard-card {
        min-height: 152px;
    }

    .activity-item {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .activity-item time {
        grid-column: 2;
    }

    .app-footer {
        display: none;
    }
}

@media print {
    .app-sidebar,
    .topbar,
    .app-footer,
    .mobile-tabbar {
        display: none !important;
    }

    .app-shell {
        display: block;
        padding-left: 0;
    }
}

@media (min-width: 981px) {
    .topbar.app-topbar {
        grid-template-columns: minmax(360px, 1fr) auto;
        height: 126px;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .tenant-brand {
        gap: 18px;
    }

    .tenant-brand-logo {
        border-radius: 18px;
        height: 96px;
        padding: 8px;
        width: 96px;
    }

    .tenant-brand .brand-text strong {
        font-size: 20px;
    }

    .app-topbar .tenant-brand img.tenant-brand-logo,
    .app-topbar .tenant-brand .tenant-brand-placeholder {
        height: 112px;
        width: 112px;
    }

    .app-topbar .tenant-brand img.tenant-brand-logo {
        padding: 9px;
    }

    .app-topbar .tenant-brand .brand-text strong {
        font-size: 24px;
        line-height: 1.05;
    }
}

@media (min-width: 981px) {
    .topbar.app-topbar {
        height: 104px;
        padding-bottom: 13px;
        padding-top: 13px;
    }

    .tenant-brand {
        gap: 16px;
    }

    .tenant-brand-logo {
        border-radius: 16px;
        height: 78px;
        padding: 7px;
        width: 78px;
    }
}

/* Laptop-first responsive override */
:root {
    --sidebar-width: 288px;
}

.app-sidebar {
    padding: 14px 14px 18px;
    width: var(--sidebar-width);
}

.app-shell {
    padding-left: var(--sidebar-width);
}

.sidebar-logo {
    align-items: flex-start;
    min-height: 78px;
    padding: 0 2px 10px;
}

.sidebar-logo img {
    max-height: 92px;
    width: min(258px, 100%);
}

.topbar.app-topbar {
    grid-template-columns: minmax(250px, 1fr) auto;
    height: 76px;
    padding: 10px 28px;
}

.tenant-brand {
    gap: 12px;
    min-width: 0;
}

.tenant-brand .brand-text {
    min-width: 0;
}

.tenant-brand .brand-text strong {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-brand .brand-text small {
    display: none;
}

.tenant-brand-logo {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045);
    display: block;
    height: 52px;
    object-fit: contain;
    padding: 5px;
    width: 52px;
}

.tenant-brand-placeholder {
    align-items: center;
    background: #111111;
    color: #ffffff;
    display: inline-flex;
    font-size: 18px;
    font-weight: 900;
    justify-content: center;
    padding: 0;
}

.app-shell .container,
.app-shell .container-wide {
    width: min(1320px, calc(100% - 48px));
}

@media (max-width: 1500px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1366px) {
    :root {
        --sidebar-width: 260px;
    }

    .app-sidebar {
        padding: 12px 12px 16px;
    }

    .sidebar-logo {
        min-height: 70px;
        padding-bottom: 8px;
    }

    .sidebar-logo img {
        max-height: 82px;
        width: min(232px, 100%);
    }

    .sidebar-nav {
        gap: 5px;
    }

    .sidebar-nav a {
        font-size: 13px;
        min-height: 40px;
        padding: 9px 10px;
    }

    .backup-card {
        padding: 12px;
    }

    .topbar.app-topbar {
        padding-left: 22px;
        padding-right: 22px;
    }

    .app-shell .container,
    .app-shell .container-wide {
        width: min(1180px, calc(100% - 36px));
    }

    .dashboard-heading h1,
    .page-heading h1 {
        font-size: clamp(34px, 3.4vw, 42px);
    }

    .dashboard-kpis .stat-card,
    .quick-links-grid .dashboard-card,
    .dashboard-card {
        padding: 24px;
    }
}

@media (max-width: 1180px) {
    :root {
        --sidebar-width: 236px;
    }

    .sidebar-logo img {
        max-height: 74px;
        width: min(212px, 100%);
    }

    .topbar-actions {
        gap: 8px;
    }

    .user-chip > span:last-child {
        display: none;
    }
}

@media (max-width: 980px) {
    .topbar.app-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .year-select {
        display: none;
    }

    .quick-links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .app-sidebar {
        display: none;
    }

    .app-shell {
        padding-left: 0;
    }

    .topbar.app-topbar {
        grid-template-columns: 44px minmax(0, 1fr);
        height: 72px;
        padding: 9px 14px;
    }

    .tenant-brand {
        justify-self: stretch;
    }

    .tenant-brand-logo {
        height: 46px;
        width: 46px;
    }

    .tenant-brand .brand-text strong {
        font-size: 15px;
    }

    .app-shell .container,
    .app-shell .container-wide {
        width: calc(100% - 24px);
    }

    .dashboard-kpis {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 20px;
    }

    .dashboard-kpis .stat-card {
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        gap: 8px;
        grid-template-areas:
            "label icon"
            "value value";
        grid-template-columns: minmax(0, 1fr) 34px;
        grid-template-rows: minmax(0, 1fr) auto;
        min-height: 0;
        padding: 13px;
    }

    .dashboard-kpis .stat-card::before {
        bottom: auto;
        height: 4px;
        inset: 0 0 auto;
        width: auto;
    }

    .dashboard-kpis .stat-icon {
        border-radius: 10px;
        height: 34px;
        width: 34px;
    }

    .dashboard-kpis .stat-icon svg {
        height: 19px;
        width: 19px;
    }

    .dashboard-kpis .stat-content span {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        font-size: 12px;
        line-height: 1.22;
        min-height: 0;
        overflow: hidden;
        padding-right: 4px;
    }

    .dashboard-kpis .stat-content strong {
        align-self: end;
        font-size: 25px;
        line-height: 1;
        overflow-wrap: anywhere;
    }
}

/* Responsive identity correction */
:root {
    --sidebar-width: 288px;
}

.app-sidebar {
    padding: 14px 14px 18px;
    width: var(--sidebar-width);
}

.app-shell {
    padding-left: var(--sidebar-width);
}

.sidebar-logo {
    align-items: flex-start;
    min-height: 78px;
    padding: 0 2px 10px;
}

.sidebar-logo img {
    max-height: 92px;
    width: min(258px, 100%);
}

.topbar.app-topbar {
    grid-template-columns: minmax(250px, 1fr) auto;
    height: 76px;
    padding: 10px 28px;
}

.tenant-brand {
    gap: 12px;
}

.tenant-brand .brand-text {
    gap: 0;
    min-width: 0;
}

.tenant-brand .brand-text strong {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-brand .brand-text small {
    display: none;
}

.tenant-brand-logo {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045);
    display: block;
    height: 52px;
    object-fit: contain;
    padding: 5px;
    width: 52px;
}

.tenant-brand-placeholder {
    align-items: center;
    background: #111111;
    color: #ffffff;
    display: inline-flex;
    font-size: 18px;
    font-weight: 900;
    justify-content: center;
    padding: 0;
}

.app-shell .container,
.app-shell .container-wide {
    width: min(1320px, calc(100% - 48px));
}

@media (max-width: 1500px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1366px) {
    :root {
        --sidebar-width: 260px;
    }

    .app-sidebar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .sidebar-logo {
        min-height: 70px;
        padding-bottom: 8px;
    }

    .sidebar-logo img {
        max-height: 82px;
        width: min(232px, 100%);
    }

    .sidebar-nav {
        gap: 5px;
    }

    .sidebar-nav a {
        font-size: 13px;
        min-height: 40px;
        padding: 9px 10px;
    }

    .backup-card {
        padding: 12px;
    }

    .topbar.app-topbar {
        padding-left: 22px;
        padding-right: 22px;
    }

    .app-shell .container,
    .app-shell .container-wide {
        width: min(1180px, calc(100% - 36px));
    }

    .dashboard-heading h1,
    .page-heading h1 {
        font-size: clamp(34px, 3.4vw, 42px);
    }

    .dashboard-kpis .stat-card,
    .quick-links-grid .dashboard-card,
    .dashboard-card {
        padding: 24px;
    }
}

@media (max-width: 1180px) {
    :root {
        --sidebar-width: 236px;
    }

    .sidebar-logo img {
        max-height: 74px;
        width: min(212px, 100%);
    }

    .topbar-actions {
        gap: 8px;
    }

    .user-chip > span:last-child {
        display: none;
    }
}

@media (max-width: 980px) {
    .topbar.app-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .year-select {
        display: none;
    }

    .quick-links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .app-sidebar {
        display: none;
    }

    .app-shell {
        padding-left: 0;
    }

    .topbar.app-topbar {
        grid-template-columns: 44px minmax(0, 1fr);
        height: 72px;
        padding: 9px 14px;
    }

    .tenant-brand {
        justify-self: stretch;
        min-width: 0;
    }

    .tenant-brand-logo {
        height: 46px;
        width: 46px;
    }

    .tenant-brand .brand-text strong {
        font-size: 15px;
    }

    .app-shell .container,
    .app-shell .container-wide {
        width: calc(100% - 24px);
    }

    .dashboard-kpis {
        grid-template-columns: 1fr;
    }
}

/* Final premium cascade layer */
:root {
    --radius: 16px;
    --shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 10px 35px rgba(0, 0, 0, 0.05);
    --sidebar-width: 288px;
}

body {
    background:
        radial-gradient(circle at 18% 8%, rgba(227, 6, 19, 0.055), transparent 28rem),
        radial-gradient(circle at 82% 0%, rgba(17, 24, 39, 0.050), transparent 26rem),
        linear-gradient(180deg, #f8fafc 0%, #f5f6f8 44%, #f3f4f6 100%);
}

.app-sidebar {
    background:
        radial-gradient(circle at 45% 92%, rgba(227, 6, 19, 0.32), transparent 46%),
        linear-gradient(180deg, #050505 0%, #0a0707 47%, #180001 100%);
    box-shadow: 20px 0 70px rgba(0, 0, 0, 0.22), inset -1px 0 0 rgba(255, 255, 255, 0.08);
    gap: 16px;
    padding: 14px 14px 18px;
    width: var(--sidebar-width);
}

.app-shell {
    padding-left: var(--sidebar-width);
}

.app-sidebar::before {
    background: radial-gradient(circle, rgba(227, 6, 19, 0.20), transparent 58%);
    content: "";
    height: 190px;
    left: -60px;
    pointer-events: none;
    position: absolute;
    top: 54px;
    width: 210px;
}

.sidebar-logo {
    min-height: 80px;
    padding: 0 2px 10px;
}

.sidebar-logo img {
    max-height: 92px;
    width: min(258px, 100%);
}

.topbar.app-topbar {
    grid-template-columns: minmax(250px, 1fr) auto;
    height: 76px;
    padding: 10px 28px;
}

.tenant-brand {
    gap: 12px;
    min-width: 0;
}

.tenant-brand .brand-text {
    min-width: 0;
}

.tenant-brand .brand-text strong {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-brand .brand-text small {
    display: none;
}

.tenant-brand-logo {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045);
    display: block;
    height: 52px;
    object-fit: contain;
    padding: 5px;
    width: 52px;
}

.tenant-brand-placeholder {
    align-items: center;
    background: #111111;
    color: #ffffff;
    display: inline-flex;
    font-size: 18px;
    font-weight: 900;
    justify-content: center;
    padding: 0;
}

.app-shell .container,
.app-shell .container-wide {
    width: min(1320px, calc(100% - 48px));
}

input,
select,
textarea {
    border-radius: 12px;
    min-height: 48px;
    padding: 12px 14px;
}

.button,
.icon-button,
.notification-button,
.mobile-menu-button,
.dashboard-card,
.stat-card,
tbody tr {
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.button:hover,
.icon-button:hover,
.notification-button:hover,
.mobile-menu-button:hover,
.dashboard-card:hover,
.stat-card:hover,
tbody tr:hover {
    transform: translateY(-2px);
}

.button.primary:hover,
.dashboard-cta:hover {
    background: #bf000a;
    box-shadow: 0 18px 38px rgba(227, 6, 19, 0.28);
}

.auth-panel,
.form,
.details,
.stat-card,
.table-wrap,
.dashboard-card,
.analytics-panel,
.activity-panel,
.photo-tile,
.gallery-photo-card,
.gallery-group,
.intervention-card,
.empty-state {
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
}

.form,
.details,
.analytics-panel,
.activity-panel,
.gallery-group {
    padding: 28px;
}

.dashboard-heading {
    margin-bottom: 34px;
}

.dashboard-heading h1,
.page-heading h1 {
    font-size: clamp(42px, 4vw, 48px);
    font-weight: 850;
    letter-spacing: -0.015em;
}

.dashboard-heading p,
.page-heading p,
.section-heading p {
    color: #8a93a3;
}

.section-heading {
    margin: 28px 0 18px;
}

.dashboard-kpis {
    gap: 20px;
    margin-bottom: 28px;
}

.dashboard-kpis .stat-card {
    min-height: 154px;
    padding: 28px 28px 26px 30px;
}

.dashboard-main-grid {
    gap: 28px;
    margin-top: 30px;
}

.quick-links-grid {
    gap: 20px;
}

.quick-links-grid .dashboard-card,
.dashboard-card {
    border-radius: 16px;
    padding: 30px;
}

.table-wrap {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(229, 231, 235, 0.82);
    overflow: hidden;
    padding: 8px;
}

table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

thead th {
    border-bottom: 0;
    color: #8a93a3;
    font-size: 11px;
    letter-spacing: 0.075em;
    padding: 12px 20px 8px;
}

tbody tr {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

tbody tr:hover {
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.055);
}

th,
td {
    border-bottom: 0;
    padding: 19px 22px;
    vertical-align: middle;
}

tbody td:first-child {
    border-bottom-left-radius: 14px;
    border-top-left-radius: 14px;
}

tbody td:last-child {
    border-bottom-right-radius: 14px;
    border-top-right-radius: 14px;
}

.license-badge,
.status-pill {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 850;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    padding: 7px 11px;
}

.license-badge-trial {
    background: rgba(227, 6, 19, 0.09);
    border-color: rgba(227, 6, 19, 0.18);
    color: #c2000b;
}

.license-badge-paid {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.20);
    color: #047857;
}

.license-badge-suspended,
.license-badge-brez {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

@media (max-width: 1180px) {
    :root {
        --sidebar-width: 236px;
    }

    .sidebar-logo img {
        max-height: 74px;
        width: min(212px, 100%);
    }

    .user-chip > span:last-child {
        display: none;
    }
}

@media (max-width: 1500px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1366px) {
    :root {
        --sidebar-width: 260px;
    }

    .app-sidebar {
        padding: 12px 12px 16px;
    }

    .sidebar-logo {
        min-height: 70px;
        padding-bottom: 8px;
    }

    .sidebar-logo img {
        max-height: 82px;
        width: min(232px, 100%);
    }

    .sidebar-nav {
        gap: 5px;
    }

    .sidebar-nav a {
        font-size: 13px;
        min-height: 40px;
        padding: 9px 10px;
    }

    .topbar.app-topbar {
        padding-left: 22px;
        padding-right: 22px;
    }

    .app-shell .container,
    .app-shell .container-wide {
        width: min(1180px, calc(100% - 36px));
    }

    .dashboard-heading h1,
    .page-heading h1 {
        font-size: clamp(34px, 3.4vw, 42px);
    }

    .dashboard-kpis .stat-card,
    .quick-links-grid .dashboard-card,
    .dashboard-card {
        padding: 24px;
    }
}

@media (max-width: 1180px) {
    :root {
        --sidebar-width: 236px;
    }

    .sidebar-logo img {
        max-height: 74px;
        width: min(212px, 100%);
    }

    .user-chip > span:last-child {
        display: none;
    }
}

@media (max-width: 980px) {
    .topbar.app-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .year-select {
        display: none;
    }

    .quick-links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-heading h1,
    .page-heading h1 {
        font-size: 32px;
    }

    .form,
    .details,
    .analytics-panel,
    .activity-panel {
        padding: 18px;
    }

    .app-sidebar {
        display: none;
    }

    .app-shell {
        padding-left: 0;
    }

    .topbar.app-topbar {
        grid-template-columns: 44px minmax(0, 1fr);
        height: 72px;
        padding: 9px 14px;
    }

    .tenant-brand {
        justify-self: stretch;
    }

    .tenant-brand-logo {
        height: 46px;
        width: 46px;
    }

    .tenant-brand .brand-text strong {
        font-size: 15px;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
    }

    thead {
        display: none;
    }

    tbody {
        display: grid;
        gap: 10px;
    }

    table {
        border-spacing: 0;
    }

    tbody td:first-child {
        border-radius: 14px 14px 0 0;
    }

    tbody td:last-child {
        border-radius: 0 0 14px 14px;
    }

    td {
        border-bottom: 1px solid var(--line);
        min-height: 48px;
        padding: 12px 14px;
    }

    td:last-child {
        border-bottom: 0;
    }

    tbody tr,
    tbody tr:hover {
        transform: none;
    }
}

/* Stabilized responsive layout pass */
:root {
    --stable-sidebar-width: 332px;
    --stable-sidebar-gutter: 18px;
}

.app-sidebar {
    width: var(--stable-sidebar-width);
    padding: 18px var(--stable-sidebar-gutter) 20px;
}

.app-shell {
    padding-left: var(--stable-sidebar-width);
}

.sidebar-logo {
    min-height: 146px;
    padding: 0 0 14px;
}

.sidebar-logo img {
    max-height: 146px;
    width: min(296px, 100%);
}

.sidebar-nav {
    gap: 7px;
}

.sidebar-nav a {
    min-height: 43px;
}

.topbar.app-topbar {
    grid-template-columns: minmax(280px, 1fr) auto;
    min-width: 0;
}

.topbar-actions {
    min-width: 0;
}

.user-menu {
    position: relative;
}

.user-menu summary {
    list-style: none;
}

.user-menu summary::-webkit-details-marker {
    display: none;
}

.user-chip {
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    padding: 5px 8px 5px 5px;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.user-chip:hover,
.user-menu[open] .user-chip {
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
}

.user-chip-text {
    min-width: 0;
}

.user-menu-chevron {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 17px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    line-height: 1;
    padding-left: 2px;
    width: 20px;
}

.user-menu-chevron svg {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 18px;
}

.user-menu-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
    display: grid;
    gap: 6px;
    min-width: 230px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 90;
}

.user-menu-header {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 3px;
    margin-bottom: 3px;
    padding: 9px 10px 11px;
}

.user-menu-header strong {
    color: var(--text);
    font-size: 14px;
}

.user-menu-header small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.user-menu-panel a {
    align-items: center;
    border-radius: 11px;
    color: var(--text);
    display: grid;
    font-size: 14px;
    font-weight: 850;
    gap: 10px;
    grid-template-columns: 20px minmax(0, 1fr);
    min-height: 42px;
    padding: 9px 10px;
    text-decoration: none;
}

.user-menu-panel a:hover {
    background: #f6f7f9;
}

.user-menu-panel a.danger {
    color: var(--primary);
}

.user-menu-panel svg {
    fill: none;
    height: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 19px;
}

.dashboard-kpis {
    grid-template-columns: repeat(4, minmax(190px, 1fr));
}

.quick-links-grid {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
}

@media (max-width: 1540px) {
    :root {
        --stable-sidebar-width: 304px;
        --stable-sidebar-gutter: 16px;
    }

    .sidebar-logo {
        min-height: 135px;
    }

    .sidebar-logo img {
        max-height: 135px;
        width: min(272px, 100%);
    }

    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .quick-links-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .settings-hub {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1366px) {
    :root {
        --stable-sidebar-width: 286px;
        --stable-sidebar-gutter: 14px;
    }

    .sidebar-logo {
        min-height: 127px;
        padding-bottom: 12px;
    }

    .sidebar-logo img {
        max-height: 127px;
        width: min(258px, 100%);
    }

    .sidebar-nav a {
        font-size: 13px;
        min-height: 39px;
        padding: 8px 10px;
    }

    .backup-card {
        padding: 11px;
    }

    .topbar.app-topbar {
        height: 72px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .app-shell .container,
    .app-shell .container-wide {
        width: min(1120px, calc(100% - 32px));
    }

    .dashboard-heading h1,
    .page-heading h1 {
        font-size: clamp(32px, 3.1vw, 40px);
    }
}

@media (max-width: 1180px) {
    :root {
        --stable-sidebar-width: 252px;
        --stable-sidebar-gutter: 12px;
    }

    .sidebar-logo {
        min-height: 114px;
    }

    .sidebar-logo img {
        max-height: 114px;
        width: min(228px, 100%);
    }

    .year-select {
        display: none;
    }

    .user-chip-text {
        display: none;
    }
}

@media (max-width: 980px) {
    .app-sidebar {
        display: none;
    }

    .app-shell {
        padding-left: 0;
    }

    .topbar.app-topbar {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        height: 72px;
        padding: 8px 14px;
    }

    .mobile-menu {
        display: block;
    }

    .tenant-brand {
        justify-self: stretch;
        min-width: 0;
    }

    .tenant-brand-logo {
        height: 46px;
        width: 46px;
    }

    .topbar-actions {
        display: flex;
    }

    .notification-button {
        display: none;
    }

    .dashboard-kpis,
    .quick-links-grid {
        grid-template-columns: 1fr;
    }

    .settings-panel {
        padding: 16px;
    }

    .settings-list-grid {
        grid-template-columns: 1fr;
    }

    .settings-link-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .settings-link-card em {
        grid-column: 2;
    }

    .dashboard-main-grid .section-heading-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-links-settings {
        justify-self: stretch;
    }

    .quick-links-settings summary {
        width: 100%;
    }

    .quick-links-settings-panel {
        position: static;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .topbar.app-topbar {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .topbar-actions {
        display: none;
    }

    .dashboard-heading h1,
    .page-heading h1 {
        font-size: 29px;
    }
}

@media print {
    .app-sidebar,
    .topbar,
    .app-footer,
    .mobile-tabbar {
        display: none !important;
    }

    .app-shell {
        display: block;
        padding-left: 0;
    }
}

/* Final desktop brand sizing override. Keep this after the repeated responsive blocks. */
@media (min-width: 981px) {
    .topbar.app-topbar {
        grid-template-columns: minmax(360px, 1fr) auto;
        height: 126px;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .tenant-brand {
        gap: 18px;
    }

    .tenant-brand-logo {
        border-radius: 18px;
        height: 96px;
        padding: 8px;
        width: 96px;
    }

    .tenant-brand .brand-text strong {
        font-size: 20px;
    }
}

/* Topbar tenant identity final override */
@media (min-width: 981px) {
    .topbar.app-topbar {
        grid-template-columns: minmax(430px, 1fr) auto;
        height: 148px;
        padding-bottom: 18px;
        padding-top: 18px;
    }

    .app-topbar .tenant-brand {
        gap: 22px;
    }

    .app-topbar .tenant-brand img.tenant-brand-logo,
    .app-topbar .tenant-brand .tenant-brand-placeholder {
        border-radius: 20px;
        height: 112px;
        width: 112px;
    }

    .app-topbar .tenant-brand img.tenant-brand-logo {
        padding: 9px;
    }

    .app-topbar .tenant-brand .brand-text strong {
        font-size: 24px;
        line-height: 1.05;
    }
}

/* Sidebar product mark final override */
.sidebar-logo {
    align-items: center;
    display: grid;
    justify-content: center;
    justify-items: center;
    min-height: 220px;
    padding: 0 0 4px;
    text-align: center;
}

.sidebar-logo img {
    height: 214px;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    transform: translate(8px, -34px);
    width: 214px;
}

.app-sidebar .sidebar-nav {
    margin-top: -16px;
}

/* Directory and settings list modernization */
.directory-search {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    margin-bottom: 18px;
    padding: 14px;
}

.directory-grid {
    display: grid;
    gap: 12px;
}

.directory-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.member-type-sections {
    display: grid;
    gap: 12px;
}

.member-type-section {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.member-type-section > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 18px 20px;
    user-select: none;
}

.member-type-section > summary::-webkit-details-marker {
    display: none;
}

.member-type-section > summary::after {
    color: var(--muted);
    content: "+";
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.member-type-section[open] > summary::after {
    content: "−";
}

.member-type-section-title {
    font-size: 17px;
    font-weight: 900;
}

.member-type-section-count {
    align-items: center;
    background: #fff0f1;
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    margin-left: auto;
    min-height: 28px;
    min-width: 28px;
    padding: 4px 9px;
}

.member-type-section-content {
    border-top: 1px solid var(--line);
    padding: 16px;
}

.member-type-empty {
    color: var(--muted);
    margin: 0;
    padding: 12px 4px;
}

.directory-card {
    align-items: center;
    background:
        linear-gradient(90deg, rgba(239, 0, 18, 0.08), transparent 32%),
        #ffffff;
    border: 1px solid rgba(217, 222, 229, 0.9);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.065);
    color: var(--text);
    display: grid;
    gap: 16px;
    grid-template-columns: 54px minmax(0, 1fr) minmax(190px, 280px);
    min-height: 94px;
    padding: 18px 20px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.directory-card:hover {
    border-color: rgba(239, 0, 18, 0.22);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
}

.directory-card-icon {
    align-items: center;
    background: #fff0f1;
    border-radius: 12px;
    color: #ef0012;
    display: inline-flex;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.directory-card-icon svg {
    fill: none;
    height: 24px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 24px;
}

.directory-card-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.directory-card-main h2 {
    font-size: 18px;
    line-height: 1.15;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-eyebrow {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.directory-card-side {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
}

.directory-card-side .button {
    min-height: 40px;
    padding: 9px 14px;
}

.directory-card-side .status-pill {
    white-space: nowrap;
}

.directory-meta-link,
.directory-muted {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.directory-meta-link {
    text-decoration: none;
}

.directory-meta-link:hover {
    color: var(--primary-dark);
}

@media (max-width: 1180px) {
    .directory-grid-compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .directory-card {
        align-items: start;
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 16px;
    }

    .directory-card-icon {
        height: 46px;
        width: 46px;
    }

    .directory-card-side {
        grid-column: 2;
        justify-content: flex-start;
    }
}

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

.reports-card {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.065);
    display: grid;
    gap: 16px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    min-height: 132px;
    padding: 22px;
}

.reports-card h2 {
    font-size: 19px;
    margin-bottom: 5px;
}

.reports-card-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.reports-card-title h2 {
    margin: 0;
}

.status-badge-progress {
    background: #fff3cd;
    border: 1px solid #f0cf70;
    border-radius: 999px;
    color: #805b00;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    padding: 6px 9px;
    text-transform: uppercase;
}

.reports-card p {
    color: var(--muted);
    margin: 0;
}

.reports-card-meta {
    background: #f2f5f9;
    border-radius: 999px;
    color: var(--text);
    font-weight: 900;
    padding: 8px 12px;
}

@media (max-width: 980px) {
    .reports-grid {
        grid-template-columns: 1fr;
    }
}

/* Public login screen */
.public-shell {
    background:
        radial-gradient(circle at 18% 0%, rgba(239, 0, 18, 0.08), transparent 26%),
        radial-gradient(circle at 82% 8%, rgba(17, 24, 39, 0.08), transparent 24%),
        #f6f7f9;
}

.topbar-public {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    height: 112px;
    padding: 18px 38px;
}

.topbar-public .tenant-brand {
    gap: 18px;
}

.topbar-public .public-brand-logo {
    border-radius: 16px;
    height: 76px;
    object-fit: contain;
    width: 76px;
}

.topbar-public .brand-text strong {
    font-size: 20px;
    letter-spacing: 0.01em;
}

.login-shell {
    align-items: center;
    display: grid;
    gap: 42px;
    grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 520px);
    margin: 0 auto;
    min-height: calc(100vh - 112px);
    padding: 56px 48px 74px;
    width: min(1180px, 100%);
}

.login-brand-panel {
    align-items: center;
    display: grid;
    gap: 26px;
    justify-items: start;
}

.login-brand-panel img {
    height: 260px;
    object-fit: contain;
    width: 260px;
}

.login-brand-panel span,
.login-card-heading span {
    color: #ef0012;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-brand-panel h1 {
    color: var(--text);
    font-size: clamp(42px, 5vw, 64px);
    letter-spacing: -0.025em;
    line-height: 0.98;
    margin: 8px 0 14px;
    max-width: 620px;
}

.login-brand-panel p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
    margin: 0;
    max-width: 520px;
}

.login-card {
    background: #ffffff;
    border: 1px solid rgba(217, 222, 229, 0.95);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
    margin: 0;
    max-width: none;
    padding: 34px;
}

.login-card-heading {
    margin-bottom: 24px;
}

.login-card-heading h2 {
    font-size: 38px;
    line-height: 1;
    margin: 8px 0 8px;
}

.login-card-heading p {
    color: var(--muted);
    margin: 0;
}

.login-form {
    border: 0;
    box-shadow: none;
    padding: 0;
}

.login-form label {
    font-size: 14px;
}

.login-form input {
    font-size: 17px;
    min-height: 54px;
}

.login-form .button {
    font-size: 16px;
    min-height: 54px;
    width: 100%;
}

.auth-back-link {
    color: #c80010;
    display: block;
    font-weight: 800;
    margin-top: 18px;
    text-align: center;
    text-decoration: none;
}

.auth-back-link:hover {
    text-decoration: underline;
}

.password-reset-card {
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
    margin: 80px auto;
    max-width: 520px;
    padding: 34px;
}

.password-reset-card .login-card-heading h1 {
    font-size: 34px;
    line-height: 1.08;
    margin: 8px 0;
}

@media (max-width: 980px) {
    .login-shell {
        grid-template-columns: 1fr;
        padding: 38px 24px 58px;
    }

    .login-brand-panel {
        justify-items: center;
        text-align: center;
    }

    .login-brand-panel img {
        height: 180px;
        width: 180px;
    }
}

@media (max-width: 620px) {
    .topbar-public {
        height: 88px;
        padding: 12px 18px;
    }

    .topbar-public .public-brand-logo {
        height: 58px;
        width: 58px;
    }

    .login-shell {
        min-height: calc(100vh - 88px);
        padding: 26px 16px 42px;
    }

    .login-card {
        padding: 24px;
    }
}

/* Login final override */
.public-shell .login-shell {
    align-items: center;
    display: grid;
    gap: 46px;
    grid-template-columns: minmax(380px, 0.95fr) minmax(440px, 540px);
    margin: 0 auto;
    min-height: calc(100vh - 112px);
    padding: 56px 48px 74px;
    width: min(1200px, 100%);
}

.public-shell .login-card.auth-panel {
    margin: 0;
    max-width: none;
    padding: 36px;
    width: 100%;
}

.public-shell .login-form.form {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: grid;
    gap: 20px;
    padding: 0;
}

.public-shell .login-form input {
    min-height: 56px;
}

.public-shell .login-form .button {
    margin-top: 4px;
    min-height: 56px;
    width: 100%;
}

.public-shell .login-brand-panel img,
.topbar-public .public-brand-logo {
    background: #050505;
}

@media (max-width: 980px) {
    .public-shell .login-shell {
        grid-template-columns: 1fr;
        padding: 38px 24px 58px;
    }
}

@media (max-width: 620px) {
    .public-shell .login-shell {
        min-height: calc(100vh - 88px);
        padding: 26px 16px 42px;
    }
}

@media (max-width: 680px) {
    .reports-card {
        align-items: start;
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .reports-card > .button,
    .reports-card-meta {
        grid-column: 2;
        justify-self: start;
    }
}

/* Mobile stability pass */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

@media (max-width: 980px) {
    .app-shell {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .topbar.app-topbar {
        overflow: visible;
    }

    .app-topbar .tenant-brand {
        gap: 10px;
        overflow: hidden;
    }

    .app-topbar .brand-text {
        min-width: 0;
    }

    .app-topbar .brand-text strong,
    .app-topbar .brand-text small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-menu-panel {
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .container,
    .container-wide {
        margin: 16px auto 24px;
        width: calc(100% - 24px);
    }

    .page-heading,
    .dashboard-heading,
    .section-heading {
        min-width: 0;
    }

    .page-heading {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .page-heading > .button,
    .page-heading > .button-row,
    .page-heading-actions {
        justify-self: stretch;
    }

    .page-heading-actions,
    .button-row,
    .actions,
    .filter-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .button,
    button,
    input,
    select,
    textarea {
        max-width: 100%;
    }

    .grid-form,
    .form.grid-form {
        grid-template-columns: 1fr;
    }

    .span-2,
    .form-section.span-2 {
        grid-column: auto;
    }

    .filters,
    .members-filters,
    .interventions-filters,
    .interventions-filters.is-auto-filter:not(.has-filter-reset) {
        grid-template-columns: 1fr;
    }

    .filter-actions .button,
    .page-heading-actions .button,
    .actions .button,
    .button-row .button {
        width: 100%;
    }

    .settings-hub {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }

    .settings-panel {
        border-radius: var(--radius);
        padding: 16px;
    }

    .settings-panel-primary {
        border-left: 0;
        border-top: 4px solid var(--primary);
    }

    .settings-link-card {
        border-radius: var(--radius);
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 76px;
        padding: 14px;
    }

    .settings-link-card em {
        grid-column: 2;
        justify-self: start;
    }

    .reports-grid,
    .dashboard-main-grid,
    .command-room-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .photo-upload-form,
    .gallery-detail-actions,
    .gallery-photo-actions {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .mobile-tabbar {
        transform: translateZ(0);
    }
}

@media (max-width: 760px) {
    table,
    thead,
    tbody,
    tr,
    th,
    td {
        max-width: 100%;
    }

    td {
        grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
    }

    td > *,
    td a,
    td .button {
        min-width: 0;
    }

    td[data-label=""] a,
    td[data-label=""] .button,
    td[data-label="Uredi"] .button {
        min-height: 44px;
        white-space: normal;
    }
}

@media (max-width: 620px) {
    .public-shell .container {
        margin: 0;
        max-width: none;
        width: 100%;
    }

    .topbar-public {
        height: 72px;
        padding: 10px 16px;
    }

    .topbar-public .tenant-brand {
        gap: 12px;
        min-width: 0;
    }

    .topbar-public .public-brand-logo {
        border-radius: 12px;
        height: 48px;
        width: 48px;
    }

    .topbar-public .brand-text {
        min-width: 0;
    }

    .topbar-public .brand-text strong {
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .public-shell .login-shell {
        align-content: start;
        align-items: start;
        gap: 16px;
        min-height: auto;
        padding: 18px 14px 28px;
    }

    .login-brand-panel {
        display: none;
    }

    .public-shell .login-card.auth-panel {
        border-radius: 14px;
        box-shadow: 0 16px 42px rgba(15, 23, 42, 0.1);
        padding: 22px;
    }

    .login-card-heading {
        margin-bottom: 18px;
    }

    .login-card-heading h2 {
        font-size: 32px;
    }

    .login-card-heading p {
        font-size: 15px;
    }

    .public-shell .login-form.form {
        gap: 16px;
    }

    .public-shell .login-form input,
    .public-shell .login-form .button {
        min-height: 52px;
    }

    .dashboard-heading h1,
    .page-heading h1 {
        font-size: 26px;
        line-height: 1.12;
    }

    .dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .mobile-tabbar {
        height: calc(76px + env(safe-area-inset-bottom));
        padding-left: 4px;
        padding-right: 4px;
    }

    .mobile-tabbar a {
        font-size: 10px;
    }

    .mobile-tab-center {
        margin-top: -24px;
    }

    .mobile-tab-center .mobile-tab-icon {
        height: 54px;
        width: 54px;
    }
}

@media (max-width: 420px) {
    .container,
    .container-wide {
        width: calc(100% - 18px);
    }

    .topbar.app-topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .app-topbar .brand-text strong {
        font-size: 13px;
    }

    .mobile-menu-panel {
        max-width: calc(100vw - 20px);
        width: 300px;
    }

    td {
        gap: 6px;
        grid-template-columns: 1fr;
    }

    td::before {
        margin-bottom: -2px;
    }

    .dashboard-kpis {
        gap: 8px;
    }

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

    .dashboard-kpis .stat-content span {
        font-size: 11px;
    }

    .dashboard-kpis .stat-content strong {
        font-size: 22px;
    }

    .dashboard-kpis .stat-icon {
        height: 30px;
        width: 30px;
    }

    .dashboard-kpis .stat-icon svg {
        height: 17px;
        width: 17px;
    }
}

/* First-screen mobile KPI tiles */
@media (max-width: 620px) {
    .dashboard-container .dashboard-kpis {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 20px;
    }

    .dashboard-container .dashboard-kpis .stat-card {
        aspect-ratio: auto;
        border-radius: 14px;
        gap: 8px;
        grid-template-areas:
            "label icon"
            "value value";
        grid-template-columns: minmax(0, 1fr) 28px;
        grid-template-rows: auto minmax(0, 1fr);
        height: 104px;
        min-height: 0;
        padding: 12px;
    }

    .dashboard-container .dashboard-kpis .stat-card::before {
        bottom: auto;
        height: 4px;
        inset: 0 0 auto;
        width: auto;
    }

    .dashboard-container .dashboard-kpis .stat-icon {
        align-self: start;
        border-radius: 9px;
        grid-area: icon;
        height: 28px;
        justify-self: end;
        width: 28px;
    }

    .dashboard-container .dashboard-kpis .stat-icon svg {
        height: 16px;
        width: 16px;
    }

    .dashboard-container .dashboard-kpis .stat-content span {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        align-self: start;
        display: -webkit-box;
        font-size: 12px;
        grid-area: label;
        line-height: 1.2;
        min-height: 0;
        overflow: hidden;
        padding-right: 4px;
    }

    .dashboard-container .dashboard-kpis .stat-content strong {
        align-self: end;
        font-size: 26px;
        grid-area: value;
        justify-self: start;
        line-height: 1;
        overflow-wrap: anywhere;
        text-align: left;
        white-space: nowrap;
    }

    .dashboard-container .quick-links-grid {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-container .quick-links-grid .dashboard-card {
        align-content: start;
        border-radius: 14px;
        gap: 9px;
        min-height: 116px;
        padding: 13px;
    }

    .dashboard-container .quick-links-grid .dashboard-icon {
        height: 32px;
        width: 32px;
    }

    .dashboard-container .quick-links-grid .dashboard-icon svg {
        height: 18px;
        width: 18px;
    }

    .dashboard-container .quick-links-grid .dashboard-card strong {
        font-size: 13px;
        line-height: 1.15;
    }

    .dashboard-container .quick-links-grid .dashboard-card small {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        font-size: 11px;
        line-height: 1.25;
        overflow: hidden;
    }

    .dashboard-container .quick-links-grid .dashboard-card em {
        display: none;
    }
}

@media (max-width: 420px) {
    .dashboard-container .dashboard-kpis {
        gap: 8px;
    }

    .dashboard-container .dashboard-kpis .stat-card {
        grid-template-columns: minmax(0, 1fr) 26px;
        height: 96px;
        padding: 11px 10px 10px;
    }

    .dashboard-container .dashboard-kpis .stat-content span {
        font-size: 10px;
    }

    .dashboard-container .dashboard-kpis .stat-content strong {
        font-size: 22px;
    }

    .dashboard-container .dashboard-kpis .stat-icon {
        height: 28px;
        width: 28px;
    }

    .dashboard-container .dashboard-kpis .stat-icon svg {
        height: 17px;
        width: 17px;
    }

    .dashboard-container .quick-links-grid {
        gap: 8px;
    }

    .dashboard-container .quick-links-grid .dashboard-card {
        min-height: 106px;
        padding: 11px;
    }

    .dashboard-container .quick-links-grid .dashboard-card strong {
        font-size: 12px;
    }

    .dashboard-container .quick-links-grid .dashboard-card small {
        display: none;
    }
}

/* Mobile dashboard bottom spacing */
@media (max-width: 620px) {
    .app-shell {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .dashboard-container {
        margin-bottom: 8px;
    }

    .dashboard-container .dashboard-main-grid {
        margin-bottom: 0;
        margin-top: 18px;
        padding-bottom: 0;
    }

    .dashboard-container .quick-links-grid {
        margin-bottom: 0;
    }
}

/* Mobile gallery polish */
@media (max-width: 620px) {
    .gallery-year-filter {
        align-items: end;
        background: transparent;
        border: 0;
        box-shadow: none;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        margin-bottom: 14px;
        padding: 0;
    }

    .gallery-year-filter .button {
        min-height: 44px;
        width: auto;
    }

    .gallery-intervention-grid {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-intervention-card {
        border-radius: 16px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }

    .gallery-cover img {
        aspect-ratio: 1 / 1;
    }

    .gallery-cover::after {
        background: linear-gradient(180deg, transparent 42%, rgba(10, 12, 15, 0.76));
        bottom: 0;
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
    }

    .gallery-cover-count {
        bottom: 8px;
        font-size: 11px;
        right: 8px;
        z-index: 1;
    }

    .gallery-card-body {
        gap: 3px;
        padding: 10px;
    }

    .gallery-card-body em {
        font-size: 12px;
    }

    .gallery-card-body strong {
        font-size: 12px;
        line-height: 1.2;
    }

    .gallery-card-body span {
        background: #f2f5f9;
        border: 1px solid #e1e7ef;
        border-radius: 999px;
        color: #5f6b7a;
        display: inline-block;
        font-size: 10px;
        justify-self: start;
        margin-top: 2px;
        max-width: 100%;
        padding: 3px 7px;
        text-transform: uppercase;
    }

    .gallery-card-body small {
        display: none;
    }

    .gallery-group {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .gallery-group-header {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
        padding: 14px;
    }

    .gallery-group-header h2 {
        font-size: 19px;
    }

    .gallery-group-header p {
        font-size: 13px;
        line-height: 1.35;
    }

    .gallery-detail-actions {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .gallery-detail-actions .gallery-count {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 42px;
    }

    .gallery-detail-actions .button {
        min-height: 42px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .gallery-photo-grid {
        gap: 12px;
        grid-template-columns: 1fr;
    }

    .gallery-photo-card {
        border-radius: 18px;
        box-shadow: 0 12px 34px rgba(15, 23, 42, 0.1);
        gap: 0;
        overflow: hidden;
        padding: 0;
    }

    .gallery-photo-link img {
        aspect-ratio: 4 / 3;
        border-radius: 0;
    }

    .gallery-photo-media::after {
        background: linear-gradient(180deg, transparent 48%, rgba(8, 10, 14, 0.68));
        bottom: 0;
        content: "";
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
    }

    .watermark-badge {
        bottom: 10px;
        left: 10px;
        z-index: 1;
    }

    .gallery-delete-button {
        backdrop-filter: blur(8px);
        background: rgba(164, 38, 44, 0.86);
        right: 10px;
        top: 10px;
        z-index: 1;
    }

    .gallery-original-link {
        margin: 10px 14px 0;
    }

    .gallery-photo-meta {
        padding: 12px 14px 4px;
    }

    .gallery-photo-meta strong {
        font-size: 15px;
    }

    .gallery-photo-actions {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr;
        padding: 10px 14px 14px;
    }
}

@media (max-width: 420px) {
    .gallery-intervention-grid {
        gap: 8px;
    }

    .gallery-card-body {
        padding: 9px;
    }

    .gallery-card-body strong {
        font-size: 11px;
    }

    .gallery-detail-actions {
        grid-template-columns: 1fr;
    }
}

/* Mobile intervention detail photo strip */
@media (max-width: 620px) {
    .intervention-photo-section {
        gap: 10px;
    }

    .intervention-photo-section .photo-grid {
        counter-reset: intervention-photo;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .intervention-photo-section .photo-tile {
        border-radius: 12px;
        gap: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
    }

    .intervention-photo-section .photo-tile img {
        aspect-ratio: 1 / 1;
        border-radius: 0;
    }

    .intervention-photo-section .photo-tile span {
        display: none;
    }

    .intervention-photo-section .photo-tile::after {
        align-items: center;
        background: rgba(21, 23, 25, 0.72);
        border-radius: 999px;
        bottom: 6px;
        color: #ffffff;
        content: counter(intervention-photo);
        counter-increment: intervention-photo;
        display: inline-flex;
        font-size: 11px;
        font-weight: 900;
        height: 22px;
        justify-content: center;
        position: absolute;
        right: 6px;
        width: 22px;
    }

    .intervention-photo-section .empty-state {
        padding: 14px;
    }

    .intervention-photo-section .photo-upload-form {
        align-items: stretch;
        gap: 8px;
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .intervention-photo-section .photo-upload-form .button {
        min-height: 42px;
    }
}

@media (max-width: 360px) {
    .intervention-photo-section .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile intervention journal cards */
@media (max-width: 620px) {
    .interventions-results .results-bar {
        align-items: baseline;
        margin: 12px 0 14px;
    }

    .interventions-results .results-bar strong {
        font-size: 30px;
        line-height: 1;
    }

    .interventions-list {
        gap: 10px;
    }

    .intervention-card {
        align-items: stretch;
        border-radius: 16px;
        gap: 12px;
        grid-template-columns: 1fr auto;
        padding: 14px;
    }

    .intervention-card-main {
        display: grid;
        gap: 9px;
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }

    .intervention-number {
        align-items: center;
        background: #fff5f6;
        border: 1px solid rgba(227, 6, 19, 0.16);
        border-left: 4px solid var(--primary);
        border-radius: 999px;
        display: inline-flex;
        gap: 6px;
        justify-self: start;
        min-height: 0;
        padding: 6px 10px 6px 9px;
    }

    .intervention-number span {
        font-size: 0;
    }

    .intervention-number span::after {
        color: var(--muted);
        content: "#";
        font-size: 12px;
        font-weight: 900;
    }

    .intervention-number strong {
        font-size: 14px;
        line-height: 1;
    }

    .intervention-summary {
        gap: 8px;
    }

    .intervention-summary h2 {
        font-size: 19px;
        line-height: 1.16;
        white-space: normal;
    }

    .intervention-location-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .intervention-meta {
        gap: 8px;
        order: -1;
    }

    .intervention-date {
        background: #f7f8fa;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 5px 8px;
    }

    .intervention-type {
        border-radius: 999px;
        max-width: 100%;
        overflow: hidden;
        padding: 5px 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .intervention-leaders {
        border-top: 1px solid var(--line);
        display: grid;
        gap: 8px;
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        padding-top: 10px;
    }

    .intervention-leaders div {
        display: grid;
        gap: 2px;
        grid-template-columns: minmax(104px, 36%) minmax(0, 1fr);
    }

    .intervention-leaders dt {
        font-size: 11px;
        line-height: 1.25;
    }

    .intervention-leaders dd {
        font-size: 13px;
        font-weight: 900;
        line-height: 1.25;
        margin: 0;
        overflow: hidden;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .intervention-open {
        align-self: end;
        border-radius: 999px;
        grid-column: 1 / -1;
        justify-self: end;
        min-height: 36px;
        min-width: 0;
        padding: 8px 18px;
        width: auto;
    }
}

@media (max-width: 420px) {
    .intervention-card {
        padding: 12px;
    }

    .intervention-summary h2 {
        font-size: 18px;
    }

    .intervention-leaders div {
        grid-template-columns: minmax(92px, 35%) minmax(0, 1fr);
    }

    .intervention-leaders dd {
        text-align: right;
    }
}
/* Setup wizard */
.setup-wizard-heading {
    align-items: flex-end;
}

.setup-wizard-stats {
    margin-bottom: 0;
}

.setup-wizard-stats .dashboard-card {
    min-height: 120px;
    border-top: 4px solid rgba(178, 31, 45, 0.18);
}

.setup-wizard-form {
    display: grid;
    gap: 18px;
    margin-top: 0;
    padding: 26px;
}

.setup-wizard-intro {
    background: linear-gradient(180deg, rgba(178, 31, 45, 0.06), rgba(255, 255, 255, 0));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}

.setup-wizard-step {
    color: var(--primary-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.setup-wizard-intro p {
    margin: 8px 0 6px;
    max-width: 760px;
}

.setup-wizard-intro small {
    color: var(--muted);
    display: block;
    font-weight: 700;
    line-height: 1.45;
}

.setup-wizard-import {
    display: flex;
    margin-top: 14px;
}

.import-instructions .table-wrap {
    margin: 12px 0;
}

.setup-wizard-form label {
    gap: 10px;
}

.setup-wizard-form textarea {
    min-height: 250px;
    resize: vertical;
}

.setup-wizard-actions {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 4px;
}

.setup-wizard-actions .button {
    white-space: nowrap;
}

.wizard-vehicle-builder {
    display: grid;
    gap: 14px;
}

.wizard-member-builder {
    display: grid;
    gap: 14px;
}

.wizard-vehicle-labels,
.wizard-vehicle-row {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: 1.15fr 1fr .75fr auto;
}

.wizard-member-labels,
.wizard-member-row {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr auto;
}

.wizard-vehicle-labels {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 0 2px;
}

.wizard-member-labels {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 0 2px;
}

.wizard-member-labels small {
    font-weight: 600;
}

.wizard-vehicle-rows {
    display: grid;
    gap: 10px;
}

.wizard-member-rows {
    display: grid;
    gap: 10px;
}

.wizard-vehicle-row {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.wizard-member-row {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.wizard-vehicle-row label {
    min-width: 0;
}

.wizard-member-row label {
    min-width: 0;
}

.wizard-vehicle-row select,
.wizard-vehicle-row input {
    width: 100%;
}

.wizard-member-row input {
    width: 100%;
}

.wizard-vehicle-remove {
    min-height: 44px;
}

.wizard-member-remove {
    min-height: 44px;
}

.wizard-vehicle-remove:disabled {
    opacity: .38;
}

.wizard-member-remove:disabled {
    opacity: .38;
}

.wizard-add-vehicle {
    justify-self: start;
}

.wizard-add-member {
    justify-self: start;
}

.wizard-add-vehicle svg {
    height: 18px;
    width: 18px;
}

.wizard-add-member svg {
    height: 18px;
    width: 18px;
}

.mobile-field-label {
    display: none;
}

@media (max-width: 850px) {
    .wizard-vehicle-labels {
        display: none;
    }

    .wizard-member-labels {
        display: none;
    }

    .wizard-vehicle-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .wizard-member-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .mobile-field-label {
        display: block;
    }

    .wizard-vehicle-remove,
    .wizard-add-vehicle,
    .wizard-member-remove,
    .wizard-add-member {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .setup-wizard-heading {
        align-items: stretch;
    }

    .setup-wizard-actions {
        justify-content: stretch;
    }

    .setup-wizard-actions .button {
        width: 100%;
    }
}

/* Usage analytics */
.usage-heading {
    align-items: end;
}

.usage-period-filter {
    align-items: center;
    display: flex;
    gap: 9px;
    margin: 0;
}

.usage-period-filter label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.usage-period-filter select {
    min-height: 44px;
    min-width: 120px;
}

.usage-kpis {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 20px;
}

.usage-kpis article,
.usage-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .045);
}

.usage-kpis article {
    border-top: 3px solid rgba(227, 6, 19, .72);
    display: grid;
    gap: 5px;
    padding: 20px;
}

.usage-kpis span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.usage-kpis strong {
    font-size: 31px;
    letter-spacing: -.035em;
}

.usage-kpis small {
    color: var(--muted);
}

.usage-overview-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    margin-bottom: 28px;
}

.usage-panel {
    padding: 24px;
}

.usage-panel-heading h2 {
    font-size: 20px;
    margin: 0 0 4px;
}

.usage-panel-heading p {
    color: var(--muted);
    margin: 0 0 20px;
}

.usage-ranking {
    display: grid;
    gap: 13px;
}

.usage-rank-row {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(145px, .8fr) minmax(120px, 1fr) 44px;
}

.usage-rank-row div {
    display: grid;
}

.usage-rank-row small {
    color: var(--muted);
    font-size: 11px;
}

.usage-rank-row b {
    text-align: right;
}

.usage-bar {
    background: #eef1f4;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.usage-bar i {
    background: linear-gradient(90deg, var(--primary), #ff5862);
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 3px;
}

.usage-device-list {
    display: grid;
    gap: 10px;
}

.usage-device-list > div {
    align-items: center;
    background: var(--panel-soft);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 13px 14px;
}

.usage-tenants-wrap {
    margin-top: 4px;
}

.usage-tenants-table {
    min-width: 1280px;
}

.usage-status {
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 850;
    padding: 5px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.usage-status-active {
    background: #e5f7ed;
    color: #17633a;
}

.usage-status-occasional {
    background: #fff3cd;
    color: #805b00;
}

.usage-status-inactive {
    background: #eef1f4;
    color: #667085;
}

@media (max-width: 1050px) {
    .usage-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .usage-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .usage-heading,
    .usage-period-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .usage-period-filter,
    .usage-period-filter select {
        width: 100%;
    }

    .usage-kpis {
        grid-template-columns: 1fr;
    }

    .usage-rank-row {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) 40px;
    }

    .usage-rank-row .usage-bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Mobile intervention entry */
.mobile-form-stepper,
.mobile-form-actions,
.mobile-only-control,
.mobile-member-picker,
.mobile-draft-banner,
.mobile-draft-status {
    display: none;
}

.mobile-form-step,
.mobile-deferred-fields,
.mobile-additional-times,
.mobile-additional-times-grid {
    display: contents;
}

.mobile-additional-times > summary,
.mobile-time-now,
.mobile-camera-field {
    display: none;
}

.mobile-photo-options {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.mobile-photo-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.photo-selection-preview{display:grid;gap:10px;grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));margin-top:2px}.photo-selection-item,.photo-tile-wrap{position:relative}.photo-selection-item img{aspect-ratio:1/1;border-radius:12px;display:block;object-fit:cover;width:100%}.photo-selection-remove,.photo-delete-form button{align-items:center;background:rgba(21,23,25,.82);border:2px solid #fff;border-radius:999px;color:#fff;cursor:pointer;display:inline-flex;font-size:20px;height:32px;justify-content:center;line-height:1;position:absolute;right:7px;top:7px;width:32px;z-index:3}.photo-delete-form{margin:0}.photo-tile-wrap .photo-tile{height:100%}.unified-photo-upload{align-items:stretch;grid-template-columns:1fr}.unified-photo-upload .mobile-photo-options{width:100%}

/* definitive mobile alignment for water deliveries and statistics */
@media(max-width:650px){
.water-module{min-width:0}.water-module .page-heading{align-items:stretch;gap:14px}.water-module .page-heading>div,.water-module .page-heading>form{min-width:0;width:100%}.water-module .page-heading h1{overflow-wrap:anywhere}
.water-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.water-kpis article{align-content:space-between;grid-template-rows:minmax(34px,auto) auto;min-height:106px}.water-kpis span{font-size:10px;line-height:1.3}.water-kpis strong{font-size:clamp(19px,6vw,24px);min-width:0;overflow-wrap:anywhere}
.water-filters{margin-left:0;margin-right:0;padding:12px}.water-filters label,.water-filters input{min-width:0;width:100%}.results-bar{align-items:flex-start;gap:4px}.water-status-groups{gap:18px}.water-status-group{border-left-width:3px;padding-left:9px}.water-status-group>header{align-items:flex-start;gap:8px}.water-status-group>header strong{font-size:11px;padding-top:5px;text-align:right}
.water-delivery-card{min-width:0}.water-card-number{align-items:flex-start;gap:8px}.water-card-number>span:first-child{font-size:15px;min-width:0}.water-status{flex:0 0 auto;font-size:9px;padding:5px 7px}.water-card-customer h2{font-size:17px;overflow-wrap:anywhere}.water-card-customer div{display:grid;grid-template-columns:1fr 1fr}.water-card-customer div span{text-align:center}.water-card-assignment{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}.water-card-assignment>div{background:#f7f8fa;border-radius:8px;min-width:0;padding:8px 5px;text-align:center}.water-card-assignment dt{font-size:9px}.water-card-assignment dd{font-size:12px}
.water-pagination{display:grid;grid-template-columns:1fr 1fr}.water-pagination>div{grid-column:1/-1;grid-row:1;justify-content:center}.water-pagination>.button{width:100%}
.water-stat-kpis{gap:10px;grid-auto-rows:auto;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.water-stat-kpis .stat-card{aspect-ratio:auto;gap:8px;grid-template-areas:"label icon" "value value";grid-template-columns:minmax(0,1fr) 28px;grid-template-rows:auto minmax(0,1fr);height:104px;min-height:0;padding:12px;width:100%}.water-stat-kpis .stat-content span{-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:start;display:-webkit-box;font-size:12px;line-height:1.2;min-height:0;overflow:hidden;padding-right:4px}.water-stat-kpis .stat-content strong{align-self:end;font-size:clamp(20px,5.2vw,26px);line-height:1;min-width:0;overflow:visible;overflow-wrap:normal;white-space:nowrap}.water-stat-kpis .stat-icon{align-self:start;height:28px;width:28px}.water-stat-kpis .stat-icon svg{height:16px;width:16px}
.water-stat-kpis .stat-card:last-child:nth-child(odd){grid-column:1/-1}
.water-chart-grid,.water-rankings{grid-template-columns:1fr}.water-chart-panel{overflow:hidden;padding:14px 12px}.water-chart-panel>header{gap:8px}.water-chart-panel>header>strong,.water-chart-legend{white-space:normal}.water-column-chart,.water-finance-chart{grid-template-columns:repeat(12,34px);overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.water-column b,.water-finance-month b{font-size:10px}.water-rankings .analytics-panel{min-width:0}.water-rankings .ranking-row-main{display:grid;grid-template-columns:minmax(0,1fr) auto}.water-rankings .ranking-row-main span{min-width:0;overflow-wrap:anywhere}.water-rankings .ranking-row-main strong{font-size:13px;text-align:right;white-space:normal}.water-summary-panel dl>div{align-items:flex-start;gap:12px}.water-summary-panel dt{min-width:0}.water-summary-panel dd{flex:0 0 auto;font-size:14px;text-align:right}.gzs-reference-values strong{font-size:21px;overflow-wrap:anywhere}
}
@media(max-width:370px){.water-kpis article{padding:12px 10px}.water-card-assignment{grid-template-columns:1fr}.water-card-assignment>div{display:grid;grid-template-columns:1fr 1fr;text-align:left}.water-card-assignment dd{text-align:right}}

.mail-preference {
    align-items: center;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    padding: 13px 14px;
}

.mail-preference input {
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

.mail-preference span,
.mail-preference small {
    display: block;
}

.mail-preference small {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

@media (max-width: 700px) {
    body.mobile-picker-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    form[data-mobile-intervention-form] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    form[data-mobile-intervention-form] select,
    form[data-mobile-intervention-form] textarea {
        font-size: 16px;
    }

    form[data-mobile-intervention-form] {
        display: block;
        margin-bottom: 98px;
        padding: 14px;
    }

    .mobile-form-stepper {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 14px;
        padding: 5px;
        position: sticky;
        top: 74px;
        z-index: 20;
    }

    .mobile-form-step-button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--muted);
        display: flex;
        gap: 6px;
        justify-content: center;
        min-height: 42px;
        padding: 6px;
    }

    .mobile-form-step-button span {
        align-items: center;
        background: #eef1f4;
        border-radius: 50%;
        display: inline-flex;
        flex: 0 0 24px;
        font-size: 11px;
        height: 24px;
        justify-content: center;
        width: 24px;
    }

    .mobile-form-step-button strong {
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-form-step-button.is-active {
        background: var(--primary-soft);
        color: var(--primary-dark);
    }

    .mobile-form-step-button.is-active span,
    .mobile-form-step-button.is-complete span {
        background: var(--primary);
        color: #fff;
    }

    .mobile-form-step-button:disabled {
        cursor: default;
        opacity: .58;
    }

    .mobile-form-step {
        display: grid;
        gap: 13px;
        grid-template-columns: 1fr;
    }

    .mobile-form-step[hidden] {
        display: none !important;
    }

    .mobile-deferred-fields {
        display: none !important;
    }

    .mobile-form-step > *,
    .mobile-form-step .span-2 {
        grid-column: 1;
        min-width: 0;
    }

    .mobile-form-step .form-section {
        border-top: 0;
        margin: 3px 0 0;
        padding: 0;
    }

    .mobile-form-step .form-section:not(:first-child) {
        border-top: 1px solid var(--line);
        margin-top: 5px;
        padding-top: 14px;
    }

    .mobile-form-step .form-section h2 {
        font-size: 17px;
    }

    .mobile-form-step .form-section-heading {
        align-items: center;
        flex-direction: row;
    }

    #fill-current-times {
        display: none;
    }

    .mobile-additional-times {
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 10px;
        display: block;
        overflow: hidden;
    }

    .mobile-additional-times > summary {
        align-items: center;
        cursor: pointer;
        display: grid;
        font-size: 14px;
        font-weight: 850;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto 20px;
        list-style: none;
        min-height: 48px;
        padding: 11px 13px;
    }

    .mobile-additional-times > summary::-webkit-details-marker {
        display: none;
    }

    .mobile-additional-times > summary::after {
        content: '+';
        font-size: 17px;
        line-height: 1;
        text-align: center;
    }

    .mobile-additional-times[open] > summary {
        border-bottom: 1px solid var(--line);
    }

    .mobile-additional-times[open] > summary::after {
        content: '\2212';
    }

    .mobile-additional-times > summary small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        margin: 0;
        white-space: nowrap;
    }

    .mobile-additional-times-grid {
        display: grid;
        gap: 10px;
        padding: 12px;
    }

    .mobile-time-field {
        position: relative;
    }

    .mobile-form-step input[type="datetime-local"] {
        padding-right: 62px;
    }

    .mobile-time-now {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 7px;
        bottom: 5px;
        color: var(--primary-dark);
        display: block;
        font-size: 11px;
        font-weight: 850;
        min-height: 34px;
        padding: 6px 8px;
        position: absolute;
        right: 5px;
    }

    .participating-units-group .checkbox-grid,
    .mobile-form-step[data-mobile-step="2"] > .checkbox-group:last-of-type .checkbox-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-only-control {
        display: flex;
    }

    .mobile-picker-trigger {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--text);
        gap: 12px;
        justify-content: space-between;
        min-height: 58px;
        padding: 11px 12px;
        text-align: left;
        width: 100%;
        touch-action: manipulation;
    }

    .mobile-picker-trigger span,
    .mobile-picker-trigger strong,
    .mobile-picker-trigger small {
        display: block;
    }

    .mobile-picker-trigger small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        margin-top: 2px;
    }

    .mobile-picker-trigger b {
        background: var(--primary-soft);
        border-radius: 999px;
        color: var(--primary-dark);
        flex: 0 0 auto;
        font-size: 11px;
        padding: 6px 8px;
    }

    .mobile-leader-trigger {
        margin-top: 0;
    }

    .mobile-picker-native-select {
        display: none;
    }

    .intervention-member-selector > .field-label-row,
    .intervention-member-selector > .member-selector-tools,
    .intervention-member-selector > .members-grid {
        display: none;
    }

    .mobile-member-chips {
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }

    .mobile-member-chip,
    .mobile-picker-selection span {
        background: #f1f5f9;
        border: 1px solid #dbe2ea;
        border-radius: 999px;
        color: var(--text);
        font-size: 11px;
        font-weight: 750;
        min-height: 30px;
        padding: 5px 9px;
        touch-action: manipulation;
    }

    .mobile-selection-empty {
        color: var(--muted);
    }

    .mobile-member-picker {
        background: #fff;
        display: grid;
        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
        height: 100dvh;
        inset: 0;
        max-height: 100dvh;
        padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
        position: fixed;
        z-index: 200;
    }

    .mobile-member-picker[hidden] {
        display: none !important;
    }

    .mobile-member-picker-head {
        align-items: center;
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 10px;
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 66px;
        padding: 10px 14px;
    }

    .mobile-member-picker-head strong,
    .mobile-member-picker-head small {
        display: block;
    }

    .mobile-member-picker-head small {
        color: var(--muted);
        font-size: 11px;
        margin-top: 2px;
    }

    .mobile-picker-close {
        background: #f1f5f9;
        border: 0;
        border-radius: 9px;
        font-size: 25px;
        height: 40px;
        padding: 0;
        width: 40px;
        touch-action: manipulation;
    }

    .mobile-picker-search {
        background: #fff;
        padding: 10px 14px 6px;
        position: relative;
        z-index: 2;
    }

    .mobile-picker-search span {
        font-size: 11px;
    }

    .mobile-picker-search input {
        font-size: 16px;
        min-height: 48px;
        padding-right: 46px;
    }

    .mobile-picker-clear {
        align-items: center;
        background: #eef1f4;
        border: 0;
        border-radius: 50%;
        bottom: 15px;
        color: var(--text);
        display: flex;
        font-size: 18px;
        height: 30px;
        justify-content: center;
        min-height: 30px;
        padding: 0;
        position: absolute;
        right: 24px;
        width: 30px;
    }

    .mobile-picker-clear[hidden] {
        display: none !important;
    }

    .mobile-picker-selection {
        display: flex;
        gap: 5px;
        max-height: 74px;
        overflow-x: auto;
        padding: 6px 14px 10px;
    }

    .mobile-picker-selection:empty {
        display: none;
    }

    .mobile-picker-results {
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        padding: 2px 14px 7px;
    }

    .mobile-picker-scope {
        margin: 0 14px 7px;
        width: calc(100% - 28px);
    }

    .mobile-picker-empty {
        background: #f8fafc;
        border: 1px dashed var(--line);
        border-radius: 10px;
        color: var(--muted);
        margin: 8px 14px;
        padding: 18px 14px;
        text-align: center;
    }

    .mobile-picker-empty[hidden] {
        display: none !important;
    }

    .mobile-picker-selection span {
        flex: 0 0 auto;
        min-height: 0;
    }

    .mobile-picker-list,
    .mobile-leader-list {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px 12px 18px;
    }

    .mobile-picker-list .members-grid {
        background: transparent;
        border: 0;
        display: grid;
        gap: 7px;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .mobile-picker-list .check-option {
        border-radius: 9px;
        min-height: 50px;
        padding: 10px 12px;
    }

    .mobile-picker-list .check-option:has(input:checked) {
        background: var(--primary-soft);
        border-color: rgba(227, 6, 19, .38);
    }

    .mobile-leader-list {
        display: grid;
        gap: 7px;
    }

    .mobile-leader-list[hidden] {
        display: none;
    }

    .mobile-leader-option {
        align-items: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 9px;
        color: var(--text);
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        min-height: 50px;
        padding: 10px 12px;
        text-align: left;
        touch-action: manipulation;
    }

    .mobile-leader-option b {
        color: var(--primary-dark);
        font-size: 11px;
    }

    .mobile-member-picker-footer {
        background: #fff;
        border-top: 1px solid var(--line);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    }

    .mobile-member-picker-footer .button {
        touch-action: manipulation;
        width: 100%;
    }

    .mobile-photo-options {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-camera-field {
        display: grid;
    }

    .mail-preference {
        align-items: flex-start;
    }

    .mobile-draft-banner {
        align-items: stretch;
        background: #fff8e6;
        border: 1px solid #f3d389;
        border-radius: 10px;
        display: grid;
        gap: 10px;
        margin-bottom: 13px;
        padding: 12px;
    }

    .mobile-draft-status {
        color: var(--muted);
        display: block;
        font-size: 12px;
        margin: -5px 2px 12px;
        text-align: right;
    }

    .mobile-draft-status[data-state="saved"] {
        color: #237447;
    }

    .mobile-draft-status[data-state="offline"] {
        color: #9a5b00;
    }

    .mobile-draft-banner strong,
    .mobile-draft-banner small {
        display: block;
    }

    .mobile-draft-banner small {
        color: #725a21;
        font-size: 11px;
        margin-top: 2px;
    }

    .mobile-draft-banner > div {
        display: flex;
        gap: 7px;
    }

    .mobile-form-actions {
        align-items: center;
        background: rgba(255, 255, 255, .98);
        border: 1px solid var(--line);
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
        bottom: calc(72px + env(safe-area-inset-bottom));
        box-shadow: 0 -12px 28px rgba(15, 23, 42, .12);
        display: grid;
        gap: 8px;
        grid-template-columns: auto 52px minmax(120px, 1fr);
        left: 50%;
        max-width: 620px;
        padding: 9px 12px;
        position: fixed;
        transform: translateX(-50%);
        width: min(100%, 620px);
        z-index: 60;
    }

    .mobile-form-actions .button {
        min-height: 44px;
        padding: 9px 12px;
    }

    .mobile-form-actions [data-step-progress] {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        text-align: center;
    }

    .mobile-form-actions [data-step-back] { grid-column: 1; }
    .mobile-form-actions [data-step-progress] { grid-column: 2; }
    .mobile-form-actions [data-step-next],
    .mobile-form-actions [data-step-submit] { grid-column: 3; }

    .mobile-form-actions [hidden] {
        display: none !important;
    }

    form[data-mobile-intervention-form] .actions {
        display: none;
    }
}

/* Unified application KPI cards
   The dashboard is the visual source of truth for every module. */
:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) {
    --app-kpi-columns: 4;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(var(--app-kpi-columns), minmax(0, 1fr));
    margin-bottom: 18px;
}

:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) {
    align-content: stretch;
    background: var(--panel, #fff);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
    display: grid;
    gap: 7px 12px;
    grid-template-areas:
        "label icon"
        "value value"
        "hint hint";
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-rows: minmax(36px, auto) auto minmax(0, auto);
    min-height: 126px;
    overflow: hidden;
    padding: 17px 18px 15px 20px;
    position: relative;
}

:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article)::before {
    background: var(--primary);
    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    width: 4px;
}

:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > span:not(.app-kpi-icon):not(.stat-icon),
:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > span {
    align-self: start;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    grid-area: label;
    letter-spacing: 0;
    line-height: 1.25;
    padding-right: 4px;
    text-transform: none;
}

:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > strong,
:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > strong {
    align-self: end;
    color: var(--primary);
    font-size: clamp(25px, 2vw, 31px);
    font-weight: 800;
    grid-area: value;
    letter-spacing: -.035em;
    line-height: 1.05;
    min-width: 0;
}

:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > strong small,
:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > strong small {
    color: currentColor;
    display: inline;
    font-size: .48em;
    font-weight: 800;
    letter-spacing: 0;
}

:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > small {
    color: var(--muted);
    font-size: 11px;
    grid-area: hint;
    line-height: 1.3;
}

:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content {
    display: contents;
}

.app-kpi-icon,
:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-icon {
    align-items: center;
    align-self: start;
    background: var(--primary-soft, #fff0f1);
    border: 0;
    border-radius: 10px;
    color: var(--primary);
    display: inline-flex;
    grid-area: icon;
    height: 38px;
    justify-content: center;
    justify-self: end;
    width: 38px;
}

.app-kpi-icon svg,
:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-icon svg {
    fill: none;
    height: 20px;
    position: static;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transform: none;
    width: 20px;
}

:is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > article:not(:has(.app-kpi-icon)):not(:has(.stat-icon))::after {
    background-color: var(--primary-soft, #fff0f1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e52329' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5M4 19h16M8 16v-5M12 16V8M16 16v-3'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    border-radius: 10px;
    content: "";
    grid-area: icon;
    height: 38px;
    justify-self: end;
    width: 38px;
}

@media (max-width: 980px) {
    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) {
        --app-kpi-columns: 2;
    }
}

@media (max-width: 620px) {
    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) {
        gap: 9px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 18px;
    }

    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) {
        border-radius: 13px;
        gap: 5px 7px;
        grid-template-columns: minmax(0, 1fr) 28px;
        grid-template-rows: minmax(30px, auto) auto minmax(0, auto);
        min-height: 108px;
        padding: 12px 11px 10px;
    }

    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article)::before {
        height: 4px;
        inset: 0 0 auto;
        width: auto;
    }

    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > span:not(.app-kpi-icon):not(.stat-icon),
    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > span {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        font-size: 10px;
        min-height: 0;
        overflow: hidden;
    }

    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > strong,
    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > strong {
        font-size: clamp(20px, 6vw, 25px);
        overflow-wrap: anywhere;
    }

    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > small {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        font-size: 9px;
        overflow: hidden;
    }

    .app-kpi-icon,
    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-icon {
        border-radius: 8px;
        height: 28px;
        width: 28px;
    }

    .app-kpi-icon svg,
    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-icon svg {
        height: 16px;
        width: 16px;
    }

    :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > article:not(:has(.app-kpi-icon)):not(:has(.stat-icon))::after {
        background-size: 16px;
        border-radius: 8px;
        height: 28px;
        width: 28px;
    }
}

@media (max-width: 430px) {
    .mobile-form-step-button {
        display: grid;
        gap: 2px;
        justify-items: center;
    }

    .mobile-form-step-button strong {
        font-size: 10px;
    }

    .mobile-photo-options,
    .participating-units-group .checkbox-grid,
    .mobile-form-step[data-mobile-step="2"] > .checkbox-group:last-of-type .checkbox-grid {
        grid-template-columns: 1fr;
    }
}
.permission-editor {
    display: grid;
    gap: 16px;
}

/* Development roadmap */
.trial-extension-notice{background:linear-gradient(125deg,#fff8e8,#fff 60%);border:1px solid #efd49a;border-radius:18px;display:grid;gap:16px;grid-template-columns:minmax(280px,1fr) minmax(420px,1.1fr);margin:0 0 18px;padding:22px 24px;position:relative}
.trial-extension-copy h2{font-size:22px;margin:4px 0 7px}.trial-extension-copy p{color:var(--muted);line-height:1.5;margin:0}
.trial-presentation-form{align-items:end;display:grid;gap:10px;grid-template-columns:minmax(130px,.65fr) minmax(190px,1fr) auto}
.trial-presentation-form label{font-size:12px;font-weight:800}.trial-presentation-form input{margin-top:5px;width:100%}
.trial-notice-dismiss{grid-column:1/-1;text-align:right}.trial-notice-dismiss .button{min-height:34px;padding:6px 10px}
@media(max-width:1050px){.trial-extension-notice{grid-template-columns:1fr}.trial-presentation-form{grid-template-columns:1fr 1fr}.trial-presentation-form .button{grid-column:1/-1}}
@media(max-width:620px){.trial-extension-notice{padding:17px}.trial-extension-copy h2{font-size:18px}.trial-presentation-form{grid-template-columns:1fr}.trial-presentation-form .button{grid-column:auto}.trial-notice-dismiss{text-align:stretch}.trial-notice-dismiss .button{width:100%}}

.roadmap-banner {
    align-items: center;
    background: linear-gradient(120deg, #fff5f5 0%, #fff 58%, #f8fafc 100%);
    border: 1px solid rgba(227, 6, 19, .2);
    border-radius: 18px;
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: 0 0 24px;
    padding: 22px 24px;
}

.roadmap-banner-icon,
.roadmap-card-icon,
.module-hero-icon {
    align-items: center;
    background: var(--primary-soft);
    border-radius: 14px;
    color: var(--primary);
    display: inline-flex;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.roadmap-banner-icon svg,
.roadmap-card-icon svg,
.module-hero-icon svg,
.roadmap-card-link svg,
.roadmap-banner .button svg { height: 22px; width: 22px; }
.roadmap-banner h2 { font-size: 20px; margin: 2px 0 4px; }
.roadmap-banner p { color: var(--muted); margin: 0; }
.roadmap-banner .button { white-space: nowrap; }

/* Roadmap overview: scoped so module detail pages retain their styling. */
.roadmap-container .roadmap-overview{max-width:1200px;margin:0 auto}
.roadmap-container .roadmap-hero{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0 30px;border-bottom:1px solid var(--line)}
.roadmap-container .roadmap-hero h1{font-size:clamp(28px,3vw,40px);margin:8px 0 10px}
.roadmap-container .roadmap-hero p{font-size:15px;line-height:1.65}
.roadmap-container .roadmap-hero .button{flex-shrink:0;gap:8px}
.roadmap-container .roadmap-section{margin-top:30px}
.roadmap-container .roadmap-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.roadmap-container .roadmap-section-kicker{display:block;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.roadmap-container .roadmap-section-heading h2{font-size:24px;letter-spacing:-.025em;margin:0}
.roadmap-container .roadmap-section-count{color:var(--muted);font-size:12px;border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap}
.roadmap-container .roadmap-section-description{color:var(--muted);font-size:14px;line-height:1.65;margin:10px 0 18px}
.roadmap-container .roadmap-ready-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.roadmap-container .roadmap-ready-card{display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:12px;padding:24px;color:var(--text);text-decoration:none;box-shadow:var(--shadow-soft);transition:border-color .18s,box-shadow .18s}
.roadmap-container .roadmap-ready-card-top,.roadmap-container .roadmap-planned-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.roadmap-container .roadmap-developed-badge{display:inline-flex;align-items:center;gap:7px;background:var(--secondary);color:#fff;font-size:12px;font-weight:800;padding:7px 11px;border-radius:999px;margin:0}
.roadmap-container .roadmap-developed-badge>span{color:#fff}
.roadmap-container .roadmap-card-icon{width:42px;height:42px;border-radius:10px;flex-shrink:0}
.roadmap-container svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.roadmap-container .roadmap-card-icon svg{width:23px;height:23px}
.roadmap-container .roadmap-ready-card h3{font-size:23px;line-height:1.3;letter-spacing:-.02em;margin:18px 0 10px}
.roadmap-container .roadmap-ready-card p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 22px}
.roadmap-container .roadmap-ready-card-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);padding-top:18px;margin-top:auto}
.roadmap-container .roadmap-ready-card-bottom>span:first-child{font-size:12px;color:var(--muted)}
.roadmap-container .roadmap-ready-cta{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border-radius:7px;padding:10px 12px;font-size:12px;font-weight:800}
.roadmap-container .roadmap-ready-cta svg,.roadmap-container .button svg{width:17px;height:17px}
.roadmap-container .roadmap-planned{padding-top:26px;border-top:1px solid var(--line)}
.roadmap-container .roadmap-planned-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.roadmap-container .roadmap-planned-card{display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;color:var(--text);text-decoration:none;transition:border-color .18s,box-shadow .18s}
.roadmap-container .roadmap-planned-card .roadmap-card-icon{background:var(--bg-soft);color:var(--muted);width:34px;height:34px;border:1px solid var(--line)}
.roadmap-container .roadmap-planned-card .roadmap-card-icon svg{width:19px;height:19px}
.roadmap-container .roadmap-planned-status{font-size:11px;color:var(--muted)}
.roadmap-container .roadmap-planned-card h3{font-size:17px;line-height:1.4;margin:14px 0 8px}
.roadmap-container .roadmap-planned-card p{font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 18px}
.roadmap-container .roadmap-planned-card .roadmap-card-link{font-size:12px;gap:6px;margin-top:auto}
.roadmap-container .roadmap-card-link svg{width:15px;height:15px}
.roadmap-container .roadmap-ready-card:hover,.roadmap-container .roadmap-planned-card:hover{border-color:var(--primary);box-shadow:var(--shadow-soft)}
.roadmap-container .roadmap-ready-card:focus-visible,.roadmap-container .roadmap-planned-card:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
.roadmap-container .roadmap-invite{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:start;background:var(--panel);color:var(--text);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px;padding:28px;margin-top:30px;scroll-margin-top:24px}
.roadmap-container .roadmap-invite h2{font-size:23px;line-height:1.35;margin:0 0 10px}
.roadmap-container .roadmap-invite p{color:var(--muted);font-size:14px;line-height:1.7}
.roadmap-container .roadmap-proposal-form{gap:10px;min-width:0}
.roadmap-container .roadmap-proposal-form label{color:var(--text)}
.roadmap-container .roadmap-proposal-form textarea{min-height:100px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.roadmap-container .roadmap-invite .form-error{color:var(--error)}
.roadmap-container .roadmap-proposal-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.roadmap-container .roadmap-proposal-actions small{font-size:11px;color:var(--muted)}
.roadmap-container .roadmap-proposal-actions .button{gap:8px;width:auto;font-size:13px}
@media(max-width:1100px){.roadmap-container .roadmap-planned-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.roadmap-container .roadmap-hero{align-items:flex-start;flex-direction:column;gap:16px}.roadmap-container .roadmap-ready-grid,.roadmap-container .roadmap-invite{grid-template-columns:1fr}.roadmap-container .roadmap-invite{gap:22px;padding:22px}.roadmap-container .roadmap-ready-card{padding:22px}}
@media(max-width:520px){.roadmap-container .roadmap-planned-grid{grid-template-columns:1fr}.roadmap-container .roadmap-section-heading h2{font-size:21px}.roadmap-container .roadmap-ready-card-bottom{align-items:flex-start;flex-direction:column}.roadmap-container .roadmap-ready-cta{justify-content:center;width:100%}.roadmap-container .roadmap-proposal-actions{align-items:stretch;flex-direction:column}.roadmap-container .roadmap-proposal-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.roadmap-container .roadmap-ready-card,.roadmap-container .roadmap-planned-card{transition:none}}
.roadmap-container { max-width: 1320px; }
.topbar-command-room{align-items:center;background:var(--primary-soft);border:1px solid rgba(178,31,45,.18);border-radius:8px;color:var(--primary);display:inline-flex;flex-shrink:0;font-size:12px;font-weight:800;gap:8px;justify-content:center;min-height:38px;padding:8px 12px;text-decoration:none;white-space:nowrap}
.topbar-command-room svg{fill:none;height:18px;stroke:currentColor;stroke-width:1.8;width:18px}
.topbar-command-room:hover{background:var(--primary);color:#fff}
.topbar-command-room:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:980px){.topbar-command-room{height:36px;min-height:36px;padding:8px;width:36px}.topbar-command-room span{display:none}}
.roadmap-hero { max-width: 850px; padding: 24px 0 34px; }
.roadmap-hero h1, .module-hero h1 { font-size: clamp(32px, 4vw, 50px); letter-spacing: -.035em; margin: 7px 0 12px; }
.roadmap-hero p, .module-hero p { color: var(--muted); font-size: 18px; line-height: 1.7; margin: 0; }
.roadmap-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roadmap-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; color: var(--text); display: grid; gap: 18px; grid-template-columns: auto 1fr; min-height: 220px; padding: 26px; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.roadmap-card:hover { border-color: rgba(227, 6, 19, .35); box-shadow: 0 16px 35px rgba(15, 23, 42, .09); transform: translateY(-2px); }
.roadmap-card h2 { font-size: 23px; margin: 2px 0 9px; }
.roadmap-developed-badge { display: inline-block; margin-bottom: 8px; padding: 5px 9px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 800; }
.roadmap-card p { color: var(--muted); line-height: 1.6; margin: 0; }
.roadmap-card-link { align-items: center; color: var(--primary); display: flex; font-weight: 800; gap: 8px; grid-column: 2; margin-top: auto; }
.roadmap-invite, .module-interest { align-items: center; background: #161b22; border-radius: 20px; color: #fff; display: flex; gap: 30px; justify-content: space-between; margin-top: 28px; padding: 30px 34px; }
.roadmap-invite h2, .module-interest h2 { margin: 0 0 7px; }
.roadmap-invite p, .module-interest p { color: #c7ced8; margin: 0; }
.roadmap-invite > div, .module-interest > div { flex: 1 1 42%; }
.roadmap-proposal-form, .module-interest-form { display: grid; flex: 1 1 52%; gap: 10px; width: 100%; }
.roadmap-proposal-form label, .module-interest-form label { color: #fff; font-size: 13px; font-weight: 800; }
.module-interest-form label span { color: #aeb7c4; font-weight: 600; }
.roadmap-proposal-form textarea, .module-interest-form textarea { background: #fff; border: 1px solid #404956; border-radius: 10px; color: var(--text); font: inherit; line-height: 1.5; min-height: 92px; padding: 12px 14px; resize: vertical; width: 100%; }
.roadmap-proposal-form textarea:focus, .module-interest-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(227, 6, 19, .18); outline: 0; }
.roadmap-proposal-form .button, .module-interest-form .button { justify-self: start; }
.roadmap-invite .form-error, .module-interest .form-error { color: #ffb8bd; font-size: 13px; font-weight: 700; margin: 0; }
.roadmap-back { color: var(--muted); display: inline-block; font-weight: 700; margin: 14px 0 22px; text-decoration: none; }
.module-landing { display: grid; gap: 28px; }
.module-hero { align-items: center; background: linear-gradient(130deg, #fff5f5, #fff 62%); border: 1px solid rgba(227, 6, 19, .16); border-radius: 22px; display: flex; gap: 26px; padding: clamp(28px, 5vw, 55px); }
.module-hero-icon { flex: 0 0 auto; height: 76px; width: 76px; }
.module-hero-icon svg { height: 34px; width: 34px; }
.module-content { display: grid; gap: 22px; grid-template-columns: 1.1fr .9fr; }
.module-content > section { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; }
.module-content h2 { font-size: 23px; margin: 0 0 15px; }
.module-intro { color: var(--muted); font-size: 17px; line-height: 1.75; }
.module-content blockquote { border-left: 4px solid var(--primary); color: var(--text); font-size: 20px; font-weight: 800; margin: 25px 0 0; padding: 8px 0 8px 20px; }
.module-features ul { display: grid; gap: 13px; list-style: none; margin: 0; padding: 0; }
.module-features li { align-items: flex-start; display: flex; gap: 11px; line-height: 1.45; }
.module-features li span { align-items: center; background: var(--primary-soft); border-radius: 50%; color: var(--primary); display: inline-flex; flex: 0 0 24px; font-weight: 900; height: 24px; justify-content: center; }

@media (max-width: 850px) {
    .roadmap-banner { grid-template-columns: auto 1fr; }
    .roadmap-banner .button { grid-column: 1 / -1; width: 100%; }
    .roadmap-grid, .module-content { grid-template-columns: 1fr; }
    .roadmap-card-link { grid-column: 2; }
    .roadmap-invite, .module-interest { align-items: stretch; flex-direction: column; }
    .roadmap-proposal-form .button, .module-interest-form .button { justify-self: stretch; width: 100%; }
}

@media (max-width: 560px) {
    .roadmap-banner { align-items: start; padding: 17px; }
    .roadmap-banner-icon { height: 42px; width: 42px; }
    .roadmap-banner h2 { font-size: 17px; }
    .roadmap-card { grid-template-columns: 1fr; min-height: 0; padding: 21px; }
    .roadmap-card-link { grid-column: 1; }
    .module-hero { align-items: flex-start; flex-direction: column; }
    .module-content > section, .roadmap-invite, .module-interest { padding: 22px; }
}

.permission-group {
    border: 1px solid #dfe4ea;
    border-radius: 14px;
    margin: 0;
    padding: 16px;
}

.permission-group legend {
    font-weight: 800;
    padding: 0 8px;
}

.permission-group [hidden] {
    display: none !important;
}

.tenant-switcher {
    align-items: center;
    display: flex;
    margin: 0;
    position: relative;
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.shared-admin-badge {
    background: #e8f1ff;
    border: 1px solid #bfd6fb;
    border-radius: 999px;
    color: #245a9b;
    display: inline-flex;
    font-size: 10px;
    font-weight: 850;
    margin-left: 6px;
    padding: 4px 7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.onboarding-badge {
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 850;
    padding: 5px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.onboarding-badge-pending {
    background: #fff3cd;
    border-color: #f0cf70;
    color: #805b00;
}

.onboarding-badge-complete {
    background: #e5f7ed;
    border-color: #a8dfbd;
    color: #17633a;
}
.supervisor-reminder-form{margin:8px 0 0}.supervisor-reminder-form .button{min-height:32px;padding:6px 10px;white-space:nowrap}
.supervisor-reminder-check{margin:8px 0 0}.supervisor-reminder-check label{align-items:center;color:var(--muted);cursor:pointer;display:flex;font-size:11px;font-weight:800;gap:6px}.supervisor-reminder-check input{accent-color:var(--success);height:15px;margin:0;width:15px}
.supervisor-tenants-table th:nth-child(8),.supervisor-tenants-table td:nth-child(8){min-width:96px;overflow-wrap:normal;white-space:nowrap}

.tenant-switcher label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.tenant-switcher select {
    background: #fff linear-gradient(180deg, #fff, #fafbfc);
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    font-size: 14px;
    font-weight: 800;
    height: 44px;
    max-width: 190px;
    min-width: 150px;
    padding: 8px 36px 8px 13px;
}

.tenant-switcher select:hover,
.tenant-switcher select:focus {
    border-color: rgba(227, 6, 19, .42);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, .08);
    outline: 0;
}

.mobile-tenant-switcher {
    display: grid;
    gap: 6px;
    padding: 10px 12px 12px;
}

.mobile-tenant-switcher label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.mobile-tenant-switcher select {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    font: inherit;
    font-weight: 750;
    min-height: 44px;
    padding: 8px 10px;
    width: 100%;
}

@media (max-width: 700px) {
    .tenant-switcher label {
        display: none;
    }

    .tenant-switcher select {
        max-width: 150px;
    }
}

/* Supervisor interface */
.supervisor-container {
    max-width: 1540px;
}

.supervisor-container > .page-heading {
    margin-bottom: 22px;
}

.supervisor-create-form {
    border-top: 4px solid var(--primary);
    margin-bottom: 26px;
}

.supervisor-table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow-x: auto;
    padding: 0;
}

.supervisor-section-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 2px;
}

.supervisor-section-heading h2 {
    font-size: 22px;
    margin: 0 0 3px;
}

.supervisor-section-heading p {
    color: var(--muted);
    margin: 0;
}

.supervisor-count {
    align-items: center;
    background: var(--text);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 850;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 10px;
}

.supervisor-tenants-table,
.supervisor-users-table {
    border-collapse: separate;
    border-spacing: 0 10px;
    min-width: 1120px;
    width: 100%;
}

.supervisor-users-table {
    min-width: 760px;
}

.supervisor-tenants-table thead th,
.supervisor-users-table thead th {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .035em;
    padding: 8px 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

.supervisor-tenants-table tbody td,
.supervisor-users-table tbody td {
    padding: 15px 14px;
}

.supervisor-tenants-table td small {
    color: var(--muted);
    display: block;
    font-size: 11px;
    line-height: 1.35;
    margin-top: 6px;
}

.supervisor-actions-cell {
    width: 1%;
    white-space: nowrap;
}

.supervisor-row-actions {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: flex-end;
}

.supervisor-row-actions form {
    display: inline-flex;
    margin: 0;
    width: auto;
}

.supervisor-row-actions .button,
.supervisor-actions-cell > .button {
    min-height: 36px;
    padding: 8px 11px;
    width: auto;
}

@media (max-width: 700px) {
    .supervisor-section-heading {
        align-items: flex-start;
    }

    .supervisor-table-wrap {
        margin-left: -14px;
        margin-right: -14px;
        padding: 0 14px 8px;
    }
}

/* DEV-only: association and reimbursement modules */
.association-management-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 24px;
}

.association-tabs {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 24px;
    padding: 6px;
}

.association-tabs a {
    border-radius: 10px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 15px;
    text-decoration: none;
}

.association-tabs a:hover { background: #f8fafc; color: var(--text); }
.association-tabs a.is-active { background: var(--primary); color: #fff; }
.association-tabs span { font-size: 14px; font-weight: 850; }
.association-tabs small { color: inherit; font-size: 11px; opacity: .8; }

.association-management-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 22px;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.association-management-card:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

.association-management-number,
.section-kicker {
    color: var(--primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.association-management-card strong { font-size: 19px; margin-top: 18px; }
.association-management-card p { color: var(--muted); line-height: 1.5; }
.association-management-card small { color: var(--muted); font-weight: 750; margin-top: auto; }

.association-base-settings > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    list-style: none;
}

.association-base-settings > summary::-webkit-details-marker { display: none; }
.association-base-settings > summary span { color: var(--muted); font-size: 13px; }
.association-base-settings[open] > summary { margin-bottom: 18px; }

.association-status-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 0;
}

.association-status-row > div {
    background: var(--surface-soft, #f8fafc);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 15px;
}

.association-status-row span { color: var(--muted); display: block; font-size: 12px; margin-bottom: 5px; }
.association-status-row strong { font-size: 18px; }

.billing-settings-split {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.billing-settings-split > section {
    border-top: 1px solid var(--line);
    padding-top: 24px;
}

.billing-settings-split td small {
    color: var(--muted);
    display: block;
    margin-top: 3px;
}

.billing-rules-form {
    display: grid;
    gap: 20px;
}

.billing-method-form.form {
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.billing-rules-heading {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.billing-rules-table-wrap {
    box-shadow: none;
}

.billing-rules-table td strong,
.billing-rules-table td small {
    display: block;
}

.billing-rules-table td small {
    color: var(--muted);
    margin-top: 3px;
}

.billing-rules-table input[type="number"] {
    min-height: 42px;
    min-width: 92px;
    padding: 8px 10px;
}

.billing-rule-toggle {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}

.billing-rule-toggle input {
    height: 18px;
    margin: 0;
    min-height: 0;
    width: 18px;
}

.association-tenant-settings {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.association-tenant-settings label {
    margin: 0;
}

.association-tenant-settings input[type="number"] {
    min-height: 38px;
    width: 92px;
}

.association-tenant-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.association-tenant-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr);
    margin-top: 16px;
}

.association-tenant-layout .association-tenant-grid {
    align-content: start;
    margin-top: 0;
}

.association-tenant-card {
    align-items: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(190px, .75fr) minmax(320px, 1.6fr) auto;
    padding: 18px;
}

.association-tenant-layout .association-tenant-card {
    gap: 10px;
    grid-template-columns: 1fr;
}

.association-tenant-card.is-active {
    border-color: var(--primary);
    box-shadow: 0 12px 30px rgba(237, 28, 36, .1);
}

.association-tenant-layout .association-tenant-card .association-tenant-vehicles,
.association-tenant-layout .association-tenant-card .association-tenant-actions {
    display: none;
}

.association-tenant-main {
    display: grid;
    gap: 5px;
}

.association-tenant-main a {
    color: inherit;
    text-decoration: none;
}

.association-tenant-main a:hover {
    color: var(--primary);
}

.association-tenant-main strong {
    font-size: 16px;
}

.association-tenant-main span {
    color: var(--muted);
}

.association-tenant-vehicles {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.association-vehicle-chip {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    gap: 7px;
    min-height: 34px;
    padding: 6px 11px;
}

.association-vehicle-chip strong {
    color: var(--primary-dark);
}

.association-vehicle-chip.is-inactive {
    opacity: .55;
}

.association-tenant-actions {
    align-items: end;
    display: grid;
    gap: 9px;
    justify-items: end;
}

.association-tenant-actions form {
    margin: 0;
}

.association-tenant-detail {
    align-self: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 16px;
    padding: 20px;
}

.association-vehicle-priority-form {
    display: grid;
    gap: 16px;
}

.association-vehicle-priority-list {
    display: grid;
    gap: 10px;
}

.association-vehicle-priority-row {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 110px;
    margin: 0;
    padding: 12px;
}

.association-vehicle-priority-row span {
    color: var(--text);
    display: grid;
    gap: 3px;
}

.association-vehicle-priority-row span strong {
    color: var(--primary-dark);
}

.association-vehicle-priority-row small {
    color: var(--muted);
}

.association-vehicle-priority-row input {
    min-height: 42px;
    width: 100%;
}

@media (max-width: 850px) {
    .association-management-grid,
    .association-status-row,
    .association-tenant-layout { grid-template-columns: 1fr; }
    .association-management-card { min-height: 0; }
    .association-tabs { grid-template-columns: 1fr 1fr; }
    .association-tenant-card {
        grid-template-columns: 1fr;
    }
    .association-tenant-actions {
        justify-items: stretch;
    }
    .association-tenant-actions .button,
    .association-tenant-actions form {
        width: 100%;
    }
}

.dashboard-grid > a.dashboard-card {
    color: inherit;
    text-decoration: none;
}

.dashboard-grid > a.dashboard-card:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

.dashboard-grid > a.dashboard-card p {
    color: var(--muted);
    line-height: 1.55;
}

.reimbursement-groups {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.reimbursement-group {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .045);
    overflow: hidden;
}

.reimbursement-group-header {
    align-items: center;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    min-height: 56px;
    padding: 10px 14px;
}

.reimbursement-group-header::-webkit-details-marker { display: none; }

.reimbursement-group[open] .reimbursement-group-header {
    background: linear-gradient(90deg, rgba(232, 0, 24, 0.045), #fff 58%);
    border-bottom: 1px solid var(--line);
}

.reimbursement-group-identity {
    align-items: baseline;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.reimbursement-group-identity > strong { font-size: 16px; }

.reimbursement-group-identity span,
.reimbursement-toggle {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.reimbursement-meta-primary {
    background: #f1f5f9;
    border-radius: 999px;
    color: #334155 !important;
    padding: 3px 8px;
}

.reimbursement-location {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reimbursement-attachment-status {
    border-radius: 999px;
    display: inline-flex;
    padding: 4px 9px;
    white-space: nowrap;
}

.reimbursement-attachment-status.has-attachments {
    background: #dcfce7;
    color: #166534 !important;
}

.reimbursement-attachment-status.no-attachments {
    background: #fee2e2;
    color: #b91c1c !important;
}

.reimbursement-group-total {
    align-items: center;
    display: flex;
    flex: 0 0 170px;
    gap: 14px;
    justify-content: flex-end;
    text-align: right;
    white-space: nowrap;
}
.reimbursement-group-total strong { font-size: 17px; }
.reimbursement-toggle::after { content: ' \25BE'; }
.reimbursement-group[open] .reimbursement-toggle::after { content: ' \25B4'; }

.reimbursement-vehicles.table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.reimbursement-vehicles th,
.reimbursement-vehicles td { padding: 10px 12px; }

.reimbursement-group-actions {
    border-top: 1px solid var(--line);
    font-size: 12px;
    padding: 8px 12px;
    text-align: right;
}

.reimbursement-attachments {
    align-items: center;
    background: #f8fafc;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 10px 12px;
}

.reimbursement-attachment-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.reimbursement-attachment-list > strong { font-size: 12px; }

.reimbursement-attachment-item {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 7px;
    display: flex;
    gap: 7px;
    padding: 4px 7px;
}

.reimbursement-attachment-item a { font-size: 12px; font-weight: 750; }
.reimbursement-attachment-item small { color: var(--muted); }
.reimbursement-attachment-delete { font-size: 10px; padding: 4px 6px; }

.reimbursement-upload-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.reimbursement-upload-form input[type="file"] { font-size: 12px; max-width: 230px; }
.reimbursement-upload-form .button { padding: 7px 10px; white-space: nowrap; }

.reimbursement-warning { display: block; margin-top: 5px; }
.reimbursement-warning-alert { display: grid; gap: 5px; }
.reimbursement-warning-alert > span { display: block; }
.reimbursement-warning-alert ul { margin: 2px 0 0; padding-left: 20px; }
.reimbursement-warning-alert li + li { margin-top: 4px; }
.reimbursement-warning-alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.reimbursement-item-has-warning { background: #fff5f5; scroll-margin-top: 110px; }
.reimbursement-item-has-warning:target { outline: 2px solid #dc2626; outline-offset: -2px; }
.reimbursement-remove { font-size: 12px; padding: 6px 9px; }

.reimbursement-grand-total {
    align-items: center;
    background: #111827;
    border-radius: 12px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin: 18px 0;
    padding: 18px 22px;
}

.reimbursement-grand-total strong { font-size: 24px; }

.submission-timing-banner {
    align-items: center;
    border: 1px solid;
    border-radius: 11px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0 0 16px;
    padding: 13px 16px;
}

.submission-timing-banner div { display: grid; gap: 3px; }
.submission-timing-banner strong { font-size: 14px; }
.submission-timing-banner span { font-size: 12px; }
.submission-timing-banner b { border-radius: 999px; flex: 0 0 auto; font-size: 12px; padding: 6px 10px; }
.submission-timing-banner.is-late { background: #fff1f2; border-color: #fda4af; color: #9f1239; }
.submission-timing-banner.is-late b { background: #be123c; color: #fff; }
.submission-timing-banner.is-on-time { background: #f0fdf4; border-color: #86efac; color: #166534; }
.submission-timing-banner.is-on-time b { background: #15803d; color: #fff; }

.reimbursement-action-panel {
    align-items: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr auto;
    margin: 16px 0;
    padding: 18px;
}

.reimbursement-action-panel > a {
    justify-self: start;
}

.reimbursement-action-panel > form {
    margin: 0;
}

.reimbursement-action-panel > form:not(.association-reject-form) {
    grid-column: 2;
    justify-self: end;
}

.association-decision-actions,
.association-reject-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reimbursement-action-panel .association-reject-form {
    align-items: end;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    padding: 14px;
    width: 100%;
}

.association-reject-form input[type="text"] {
    min-height: 44px;
    width: 100%;
}

.association-reject-reason {
    display: grid;
    gap: 6px;
    margin: 0;
}

.association-reject-reason > span {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.association-correction-toggle {
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    min-height: 44px;
    padding: 0 12px;
}

.reimbursement-action-panel .button {
    min-height: 44px;
    white-space: nowrap;
}

.association-crm-hero {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(320px, .95fr) minmax(420px, 1.25fr);
    margin-bottom: 18px;
}

.association-crm-period,
.association-crm-snapshot,
.association-review-strip,
.association-crm-column {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.association-crm-period {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.association-crm-period .association-period-selector {
    border: 0;
    margin: 0;
    padding: 0;
}

.association-crm-period h2 {
    font-size: 30px;
    margin: 0;
}

.association-crm-period p {
    color: var(--muted);
    margin: 0;
}

.association-crm-progress {
    background: #e5e7eb;
    border-radius: 999px;
    height: 9px;
    overflow: hidden;
}

.association-crm-progress span {
    background: var(--primary);
    display: block;
    height: 100%;
}

.association-crm-time {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.association-crm-time span {
    color: var(--muted);
    text-align: right;
}

.association-crm-snapshot {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

.association-crm-snapshot article {
    background: #f8fafc;
    display: grid;
    gap: 6px;
    min-height: 92px;
    padding: 16px;
}

.association-crm-snapshot span,
.association-review-strip span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.association-crm-snapshot strong {
    font-size: 24px;
}

.association-review-strip {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 16px 18px;
}

.association-review-strip strong {
    display: block;
    font-size: 20px;
}

.association-review-strip p {
    color: var(--muted);
    margin: 0;
}

.association-workqueue {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 12px;
    padding: 16px;
}

.association-workqueue-head {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.association-workqueue-head h2 {
    font-size: 20px;
    margin: 3px 0 0;
}

.association-workqueue-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.association-workqueue-legend span {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
    padding: 7px 10px;
}

.association-workqueue-legend i {
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.association-workqueue-legend i.is-review { background: #2563eb; }
.association-workqueue-legend i.is-todo { background: #dc2626; }
.association-workqueue-legend i.is-ready { background: #64748b; }
.association-workqueue-legend i.is-approved { background: #16a34a; }

.association-workqueue-table {
    display: grid;
    gap: 8px;
}

.association-workqueue-row {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid #cbd5e1;
    border-radius: 10px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(170px, 1.2fr) minmax(120px, .8fr) minmax(170px, 1.1fr) minmax(110px, .7fr) minmax(100px, .7fr) minmax(220px, 1.4fr);
    min-height: 76px;
    padding: 12px 14px;
}

.association-workqueue-row-header {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    min-height: 0;
    padding-bottom: 2px;
    text-transform: uppercase;
}

.association-workqueue-row.is-review { border-left-color: #2563eb; }
.association-workqueue-row.is-approved { border-left-color: #16a34a; }
.association-workqueue-row.is-rejected { border-left-color: #f97316; }
.association-workqueue-row.is-ready { border-left-color: #64748b; }
.association-workqueue-row.is-todo { border-left-color: #dc2626; }
.association-workqueue-row.is-late { background: #fffafa; }

.association-workqueue-tenant {
    display: grid;
    gap: 3px;
}

.association-workqueue-tenant strong,
.association-workqueue-amount {
    font-size: 15px;
    font-weight: 900;
}

.association-workqueue-tenant span,
.association-workqueue-muted,
.association-workqueue-muted small {
    color: var(--muted);
}

.association-workqueue-muted {
    display: grid;
    gap: 3px;
    font-size: 13px;
}

.association-workqueue-warning {
    color: #b91c1c;
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-top: 5px;
}

.association-workqueue-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.association-crm-board {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.association-crm-column {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.association-crm-column > header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 2px 4px;
}

.association-crm-column h3 {
    font-size: 15px;
    margin: 0;
}

.association-crm-column > header span {
    align-items: center;
    background: #f1f5f9;
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    height: 26px;
    justify-content: center;
    min-width: 26px;
}

.association-crm-cards {
    display: grid;
    gap: 10px;
}

.association-crm-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid #cbd5e1;
    border-radius: 10px;
    display: grid;
    gap: 12px;
    padding: 13px;
}

.association-crm-card.is-review { border-left-color: #2563eb; }
.association-crm-card.is-approved { border-left-color: #16a34a; }
.association-crm-card.is-rejected { border-left-color: #f97316; }
.association-crm-card.is-ready { border-left-color: #64748b; }
.association-crm-card.is-todo { border-left-color: #dc2626; }

.association-crm-card-head {
    align-items: start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.association-crm-card-head strong {
    display: block;
    font-size: 15px;
}

.association-crm-card-head div span,
.association-crm-card-meta span {
    color: var(--muted);
    font-size: 12px;
}

.association-crm-card-meta {
    display: grid;
    gap: 4px;
}

.association-crm-card-meta strong {
    font-size: 18px;
}

.association-crm-actions,
.association-crm-decision {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.association-crm-decision {
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.association-crm-note {
    background: #fff7ed;
    border-radius: 8px;
    color: #9a3412;
    margin: 0;
    padding: 9px 10px;
}

.association-crm-empty {
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--muted);
    padding: 18px;
    text-align: center;
}

.association-state-ready,
.association-state-todo { background: #f1f5f9; color: #475569; }
.association-state-review { background: #dbeafe; color: #1d4ed8; }

.association-period-selector {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 12px 16px;
}
.association-period-selector label { align-items: center; display: flex; gap: 14px; font-weight: 800; }
.association-period-selector select { max-width: 520px; }

.page-heading + .muted .actions {
    display: none;
}

.association-deadline-banner {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 12px 16px;
}
.association-deadline-banner span { color: var(--muted); display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.association-deadline-banner p { margin: 0; }
.association-deadline-banner.is-late { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }

.association-dashboard-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 10px; }
.association-dashboard-filters a { background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; padding: 7px 11px; text-decoration: none; }
.association-dashboard-filters a.is-active { background: #111827; border-color: #111827; color: #fff; }

.association-state { border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 800; padding: 5px 9px; }
.association-state-missing,.association-state-draft,.association-state-completed { background: #f1f5f9; color: #475569; }
.association-state-late { background: #fee2e2; color: #b91c1c; }
.association-state-submitted { background: #dbeafe; color: #1d4ed8; }
.association-state-approved { background: #dcfce7; color: #15803d; }
.association-state-rejected { background: #ffedd5; color: #c2410c; }
.association-overview-kpis { display: grid; gap: 12px; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 16px 0; }
.association-overview-kpis article { background: #fff; border: 1px solid var(--line); border-radius: 11px; display: grid; gap: 4px; padding: 15px; }
.association-overview-kpis span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.association-overview-kpis strong { color: #111827; font-size: 25px; }
.association-overview-kpis small { color: #64748b; font-size: 11px; }
.association-dashboard-insights { display: grid; gap: 14px; grid-template-columns: 1.4fr 1fr; margin: 16px 0 20px; }
.association-insight-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-width: 0; padding: 17px; }
.association-monthly-card { grid-row: span 2; }
.association-insight-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }
.association-insight-heading h2 { font-size: 18px; margin: 2px 0 0; }
.association-insight-heading a { color: var(--primary); font-size: 12px; font-weight: 800; text-decoration: none; }
.association-monthly-chart { align-items: end; display: grid; gap: 7px; grid-template-columns: repeat(12,minmax(0,1fr)); height: 210px; }
.association-month-column { align-items: center; display: grid; gap: 5px; grid-template-rows: 18px 1fr 16px; height: 100%; text-align: center; }
.association-month-column > strong { font-size: 10px; }
.association-month-column > i { align-items: end; background: #f1f5f9; border-radius: 6px 6px 3px 3px; display: flex; height: 100%; overflow: hidden; }
.association-month-column > i span { background: linear-gradient(180deg,#ef4444,#b91c1c); border-radius: 6px 6px 3px 3px; display: block; width: 100%; }
.association-month-column small { color: #64748b; font-size: 9px; font-weight: 800; }
.association-type-list { display: grid; gap: 10px; }
.association-type-list > div { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(90px,1fr) minmax(80px,1.3fr) 28px; }
.association-type-list span { font-size: 11px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.association-type-list i { background: #e2e8f0; border-radius: 999px; height: 7px; overflow: hidden; }
.association-type-list i b { background: #ef4444; display: block; height: 100%; }
.association-type-list strong { font-size: 12px; text-align: right; }
.association-tenant-ranking { display: grid; gap: 7px; }
.association-tenant-ranking > div { align-items: center; border-bottom: 1px solid #f1f5f9; display: grid; gap: 9px; grid-template-columns: 22px 1fr auto; padding: 5px 0 8px; }
.association-tenant-ranking span { align-items: center; background: #f1f5f9; border-radius: 50%; color: #64748b; display: flex; font-size: 10px; height: 22px; justify-content: center; }
.association-tenant-ranking strong,.association-tenant-ranking b { font-size: 12px; }
.association-operational-filters{align-items:end;background:#fff;border:1px solid var(--line);border-radius:12px;display:grid;gap:10px;grid-template-columns:minmax(220px,1.4fr) minmax(130px,.55fr) auto auto;margin:16px 0 12px;padding:12px}.association-operational-filters label{display:grid;gap:5px;margin:0}.association-operational-filters label>span{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.association-operational-filters select,.association-operational-filters .button{min-height:40px}.association-operational-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0}.association-operational-grid .association-monthly-card{grid-column:1/-1;grid-row:auto}.association-operational-grid .association-insight-card{max-height:430px;overflow:auto}.association-operational-grid .association-monthly-card{max-height:none;overflow:visible}.operational-vehicle-list>div,.operational-unit-list>div{grid-template-columns:minmax(150px,1.35fr) minmax(90px,1fr) 32px}.operational-unit-list i b{background:#2563eb}.operational-data-note{border-top:1px solid #eef2f7;color:var(--muted);font-size:10px;line-height:1.45;margin:14px 0 0;padding-top:11px}.operational-society-card{margin:0 0 16px}.association-tenant-ranking>a{align-items:center;border-bottom:1px solid #f1f5f9;color:inherit;display:grid;gap:9px;grid-template-columns:22px 1fr auto;padding:7px 0 10px;text-decoration:none}.association-tenant-ranking>a:hover strong{color:var(--primary)}.association-tenant-ranking>a span{align-items:center;background:#f1f5f9;border-radius:50%;color:#64748b;display:flex;font-size:10px;height:22px;justify-content:center}.association-tenant-ranking>a strong,.association-tenant-ranking>a b{font-size:12px}.operational-privacy-note{align-items:center;background:#f8fafc;border:1px solid #dbe4ee;border-left:4px solid #2563eb;border-radius:10px;display:grid;gap:4px;margin:16px 0;padding:13px 16px}.operational-privacy-note strong{font-size:12px}.operational-privacy-note span,.operational-privacy-note small{color:var(--muted);font-size:11px}
.association-workqueue-footer { border-top: 1px solid var(--line); display: flex; justify-content: flex-end; padding-top: 13px; }
.association-dashboard-quarter-tabs { display: grid; gap: 8px; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 4px 0 14px; }
.association-dashboard-quarter-tabs a { background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; color: #475569; display: grid; gap: 3px; padding: 10px 12px; text-decoration: none; }
.association-dashboard-quarter-tabs strong { font-size: 12px; }
.association-dashboard-quarter-tabs span { color: #94a3b8; font-size: 10px; font-weight: 700; }
.association-dashboard-quarter-tabs a.is-active { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.association-dashboard-quarter-tabs a.is-active span { color: #b91c1c; }
.association-workqueue{transition:opacity .16s ease}.association-workqueue.is-loading{opacity:.55;pointer-events:none}.association-workqueue.is-loading .association-dashboard-quarter-tabs{cursor:progress}
.association-financial-snapshot { background:#fff; border:1px solid var(--line); border-radius:12px; margin:16px 0 20px; padding:18px; }
.association-financial-head { align-items:center; display:flex; gap:20px; justify-content:space-between; margin-bottom:16px; }
.association-financial-head h2 { font-size:19px; margin:2px 0 3px; }
.association-financial-head p { color:#64748b; font-size:11px; margin:0; }
.association-financial-body { display:grid; gap:18px; grid-template-columns:minmax(300px,.8fr) minmax(380px,1.2fr); }
.association-financial-kpis { display:grid; gap:9px; }
.association-financial-kpis article { background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; display:grid; gap:3px; padding:11px 13px; }
.association-financial-kpis span { color:#64748b; font-size:10px; font-weight:800; text-transform:uppercase; }
.association-financial-kpis strong { font-size:18px; }
.association-financial-kpis small { color:#9a3412; font-size:11px; font-weight:800; }
.association-financial-ranking { display:grid; gap:10px; }
.association-financial-ranking>div { align-items:center; display:grid; gap:9px; grid-template-columns:minmax(100px,1fr) minmax(130px,1.5fr) auto; }
.association-financial-ranking span,.association-financial-ranking strong { font-size:11px; }
.association-financial-ranking span { font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.association-financial-ranking i { background:#e2e8f0; border-radius:999px; height:8px; overflow:hidden; }
.association-financial-ranking i b { background:linear-gradient(90deg,#ef4444,#b91c1c); display:block; height:100%; }
.financial-year-tabs { display:flex; gap:8px; margin-bottom:14px; }
.financial-year-tabs a { background:#fff; border:1px solid var(--line); border-radius:9px; color:#475569; font-size:13px; font-weight:850; padding:9px 15px; text-decoration:none; }
.financial-year-tabs a.is-active { background:#111827; border-color:#111827; color:#fff; }
.financial-kpis { display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:14px; }
.financial-kpis article { background:#fff; border:1px solid var(--line); border-radius:11px; display:grid; gap:4px; padding:16px; }
.financial-kpis span,.financial-extremes span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.financial-kpis strong { font-size:24px; }
.financial-kpis small { color:#64748b; font-size:11px; }
.financial-extremes { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:14px; }
.financial-extremes article { border:1px solid; border-radius:11px; display:grid; gap:4px; grid-template-columns:1fr auto; padding:14px 16px; }
.financial-extremes article span { grid-column:1/-1; }
.financial-extremes article b { font-size:16px; }
.financial-extremes .is-largest { background:#fff7ed; border-color:#fdba74; color:#9a3412; }
.financial-extremes .is-smallest { background:#f0fdf4; border-color:#86efac; color:#166534; }
.financial-analysis-grid { display:grid; gap:14px; grid-template-columns:1.35fr 1fr; margin-bottom:16px; }
.financial-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:17px; }
.financial-card-heading { align-items:center; display:flex; justify-content:space-between; margin-bottom:16px; }
.financial-card-heading h2 { font-size:18px; margin:2px 0 0; }
.financial-card-heading small { color:var(--muted); }
.financial-tenant-bars { display:grid; gap:13px; }
.financial-tenant-row { align-items:center; display:grid; gap:10px; grid-template-columns:26px 1fr auto; }
.financial-rank { align-items:center; background:#f1f5f9; border-radius:50%; color:#64748b; display:flex; font-size:10px; font-weight:800; height:26px; justify-content:center; }
.financial-tenant-row>div { display:grid; gap:4px; }
.financial-tenant-row>div>strong,.financial-tenant-row>strong { font-size:12px; }
.financial-tenant-row i { background:#e2e8f0; border-radius:999px; height:8px; overflow:hidden; }
.financial-tenant-row i b { background:linear-gradient(90deg,#ef4444,#b91c1c); display:block; height:100%; }
.financial-tenant-row small { color:#64748b; font-size:10px; }
.financial-quarter-chart { align-items:end; display:grid; gap:14px; grid-template-columns:repeat(4,1fr); height:260px; }
.financial-quarter-chart>div { display:grid; gap:6px; grid-template-rows:20px 1fr 18px 18px; height:100%; text-align:center; }
.financial-quarter-chart>div>strong,.financial-quarter-chart b { font-size:10px; }
.financial-quarter-chart>div>i { align-items:end; background:#f1f5f9; border-radius:7px 7px 3px 3px; display:flex; gap:2px; justify-content:center; overflow:hidden; }
.financial-quarter-chart i span { display:block; width:42%; }
.financial-quarter-chart i .approved { background:#16a34a; }
.financial-quarter-chart i .pending { background:#f59e0b; }
.financial-quarter-chart small { color:#64748b; font-size:9px; }
.financial-detail-table { margin-top:16px; }
.society-claims-table { margin-top:16px; }
.society-claims-table td { vertical-align:middle; }
.society-claims-table td:first-child { border-left:3px solid transparent; }
.society-claim-row.status-draft td:first-child { border-left-color:#94a3b8; }
.society-claim-row.status-completed td:first-child { border-left-color:#f59e0b; }
.society-claim-row.status-submitted td:first-child { border-left-color:#2563eb; }
.society-claim-row.status-approved td:first-child { border-left-color:#16a34a; }
.society-claim-row.status-rejected td:first-child { border-left-color:#ea580c; }
.society-claims-table td:first-child small { color:#64748b; display:block; font-size:10px; margin-top:5px; }
.society-claim-hint { color:#64748b; display:block; font-size:10px; line-height:1.35; margin-top:6px; max-width:210px; }
.society-claim-late { background:#fee2e2; border-radius:999px; color:#b91c1c; display:inline-flex; font-size:10px; font-weight:800; margin-left:5px; padding:5px 8px; }
.society-open-claim { min-height:40px; white-space:nowrap; }
.association-state-completed { background:#fef3c7; color:#92400e; }
.sidebar-nav a.has-notification,.sidebar-nav-item.has-notification,.mobile-menu-panel a.has-notification,.mobile-menu-panel .sidebar-nav-item.has-notification { grid-template-columns:22px minmax(0,1fr) auto; }
.sidebar-nav .sidebar-nav-group > a {
    align-items: center;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 16px;
    grid-template-rows: 1fr;
}
.sidebar-nav .sidebar-nav-group > a > svg:first-child { grid-column: 1; grid-row: 1; }
.sidebar-nav .sidebar-nav-group > a > span { grid-column: 2; grid-row: 1; min-width: 0; }
.sidebar-nav .sidebar-nav-group > a > svg:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
.sidebar-notification-badge { align-items:center; align-self:center; background:#ef4444; border:2px solid #140507; border-radius:999px; color:#fff; display:inline-flex; font-size:10px; font-weight:900; grid-column:3; height:21px; justify-content:center; justify-self:end; margin:0; min-width:21px; padding:0 5px; }
.sidebar-nav a.is-active .sidebar-notification-badge { border-color:#ef0015; background:#fff; color:#dc2626; }
.sidebar-nav-item.is-disabled{border:1px dashed rgba(255,255,255,.12);color:rgba(255,255,255,.42);cursor:not-allowed;user-select:none}
.sidebar-nav-item.is-disabled svg{opacity:.62}
.sidebar-coming-badge{align-items:center;align-self:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:999px;color:rgba(255,255,255,.76);display:inline-flex;font-size:9px;font-weight:900;grid-column:3;justify-content:center;justify-self:end;line-height:1;min-height:21px;padding:0 7px;text-transform:uppercase;white-space:nowrap}
.cashier-module-card.has-pending-work{border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.12),var(--shadow-soft)}
.cashier-module-badge.is-alert{background:#dc2626;color:#fff}
.water-quick-customer-fields{display:grid;gap:12px;grid-template-columns:1fr 1fr;width:100%}.water-quick-customer-fields .span-2{grid-column:1/-1}.quick-vat-option{align-items:center;align-self:end;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;font-weight:800;gap:10px;min-height:50px;padding:12px 14px}.quick-vat-option input[type="checkbox"]{accent-color:var(--primary);flex:0 0 auto;height:20px!important;margin:0;min-height:0!important;width:20px!important}.quick-vat-option span{line-height:1.25}@media(max-width:700px){.water-quick-customer-fields{grid-template-columns:1fr}.water-quick-customer-fields .span-2{grid-column:auto}.quick-vat-option{align-self:stretch;justify-content:flex-start;min-height:48px}}
.association-quarter-tabs > a { position:relative; }
.association-period-badge { align-items:center;background:var(--primary);border:2px solid #fff;border-radius:999px;box-shadow:0 3px 10px rgba(227,6,19,.24);color:#fff;display:inline-flex;font-size:10px;font-style:normal;font-weight:900;height:22px;justify-content:center;min-width:22px;padding:0 5px;position:absolute;right:8px;top:8px; }
.association-quarter-tabs > a.is-active .association-period-badge { background:#fff;border-color:var(--primary);color:var(--primary); }
.society-billing-actions{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:14px;box-shadow:var(--shadow-soft);display:grid;gap:14px;margin-bottom:16px;padding:18px}.society-billing-actions .section-heading{margin:0}.society-billing-action-grid{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.society-billing-action{align-items:center;background:#f8fafc;border:1px solid var(--line);border-radius:11px;color:var(--text);display:grid;gap:10px;grid-template-columns:38px minmax(0,1fr) auto;padding:12px;text-decoration:none}.society-billing-action:hover{border-color:var(--primary)}.society-billing-action>span:nth-child(2){display:grid;gap:3px}.society-billing-action small{color:var(--muted);line-height:1.35}.society-billing-action>b{align-items:center;background:var(--primary);border-radius:999px;color:#fff;display:flex;font-size:11px;height:23px;justify-content:center;min-width:23px;padding:0 6px}.society-billing-action>em{color:var(--primary);font-size:12px;font-style:normal;font-weight:900;grid-column:2}.society-billing-action.is-rejected{background:#fff5f5;border-color:#fecaca}.society-billing-action.is-rejected strong,.society-billing-action.is-rejected>em{color:#b91c1c}.society-billing-action .dashboard-icon{height:36px;width:36px}.society-billing-create{margin-bottom:22px}.society-claims-heading{margin:0 0 10px}.society-claims-table{margin-top:0}@media(max-width:900px){.society-billing-action-grid{grid-template-columns:1fr}}
.association-notification-button { align-items:center; display:inline-flex; gap:8px; }
.association-notification-button span,.section-notification-badge { align-items:center; background:#ef4444; border-radius:999px; color:#fff; display:inline-flex; font-size:10px; font-weight:900; justify-content:center; min-height:20px; min-width:20px; padding:3px 7px; }
.section-notification-badge { margin-left:7px; vertical-align:middle; }
.notification-dot { background:#ef4444; border:2px solid #fff; border-radius:50%; display:inline-block; height:10px; margin-left:6px; width:10px; }
.claim-action-alert { align-items:center; border:1px solid; border-radius:11px; display:flex; gap:16px; justify-content:space-between; margin:10px 0; padding:13px 15px; }
.claim-action-alert>div { display:grid; gap:3px; }
.claim-action-alert strong { font-size:13px; }
.claim-action-alert span { font-size:11px; }
.claim-action-alert .button { flex:0 0 auto; }
.claim-action-alert.is-submit { background:#fff7ed; border-color:#fdba74; color:#9a3412; }
.claim-action-alert.is-draft { background:#f8fafc; border-color:#cbd5e1; color:#475569; }
.claim-action-alert.is-rejected { background:#fff1f2; border-color:#fda4af; color:#9f1239; }
.notification-settings-page > .page-heading,.billing-notification-settings { margin-left:auto;margin-right:auto;max-width:1120px;width:100%; }
.billing-notification-settings { gap:20px;padding:24px; }
.notification-external-section { margin-top:20px; }
.notification-section-heading { align-items:flex-start;border-bottom:1px solid var(--line);display:flex;gap:20px;justify-content:space-between;padding-bottom:18px; }
.notification-section-heading h2,.notification-section-heading p { margin:0; }
.notification-section-heading h2 { font-size:22px;margin-top:5px; }
.notification-section-heading p { color:var(--muted);line-height:1.5;margin-top:6px; }
.notification-scope-badge { background:#fff3cd;border-radius:999px;color:#855c00;font-size:11px;font-weight:900;padding:7px 10px;white-space:nowrap; }
.notification-auto-note { align-items:flex-start;background:#f8fafc;border:1px solid var(--line);border-radius:12px;display:grid;gap:4px;padding:13px 14px; }
.notification-auto-note strong { font-size:13px;font-weight:900; }
.notification-auto-note span { color:var(--muted);font-size:13px;line-height:1.45; }
.notification-user-list { border:1px solid var(--line);border-radius:13px;overflow:hidden; }
.notification-user-list-head,.notification-user-row { display:grid;grid-template-columns:minmax(260px,1.35fr) minmax(190px,.75fr) minmax(190px,.75fr); }
.notification-user-list-head.has-water-column,.notification-user-row.has-water-column { grid-template-columns:minmax(220px,1.25fr) repeat(4,minmax(135px,.65fr)); }
.notification-user-list-head { background:#f7f8fa;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.04em;padding:10px 14px;text-transform:uppercase; }
.notification-user-list-head span:not(:first-child) { text-align:center; }
.notification-user-row { align-items:center;background:#fff;border-top:1px solid var(--line);padding:12px 14px; }
.notification-user-identity { display:grid;gap:3px;min-width:0;padding-right:14px; }
.notification-user-identity strong { font-size:14px; }
.notification-user-identity small { color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.notification-choice { align-items:center;border-left:1px solid #edf0f3;display:flex;gap:10px;justify-content:center;margin:0;min-height:44px;padding:5px 12px; }
.notification-choice input { height:22px;margin:0;min-height:0;width:22px; }
.notification-choice span { display:none; }
.notification-user-row.is-inactive { background:#f8fafc;opacity:.55; }
.notification-save-bar { align-items:center;background:#f7f8fa;border-radius:11px;display:flex;gap:16px;justify-content:space-between;padding:12px 14px; }
.notification-save-bar span { color:var(--muted);font-size:13px; }
.danger-text { color:var(--error); }
.notification-empty { background:#f7f8fa;border-radius:10px;color:var(--muted);padding:18px;text-align:center; }
.supervisor-inactivity-panel{display:grid;gap:20px;margin-bottom:22px}.supervisor-inactivity-panel h2,.supervisor-inactivity-panel p{margin:0}.supervisor-inactivity-panel h2{margin-top:5px}.supervisor-inactivity-panel p{color:var(--muted);line-height:1.5;margin-top:6px;max-width:920px}.supervisor-inactivity-form{display:grid;gap:12px;margin:0}.supervisor-inactivity-list-actions{align-items:center;display:flex;justify-content:space-between}.supervisor-inactivity-list-actions label{align-items:center;display:flex;font-size:13px;font-weight:800;gap:8px;margin:0}.supervisor-inactivity-list-actions input,.supervisor-inactivity-candidate>input{height:20px;margin:0;min-height:0;width:20px}.supervisor-inactivity-list{border:1px solid var(--line);border-radius:12px;display:grid;max-height:360px;overflow:auto}.supervisor-inactivity-candidate{align-items:center;border-top:1px solid var(--line);display:grid;gap:12px;grid-template-columns:auto minmax(220px,1fr) minmax(190px,.8fr) minmax(150px,.55fr);margin:0;padding:11px 13px}.supervisor-inactivity-candidate:first-child{border-top:0}.supervisor-inactivity-candidate>span{display:grid;gap:2px}.supervisor-inactivity-candidate small{color:var(--muted);font-size:11px}.supervisor-inactivity-candidate em{color:var(--primary);font-size:11px;font-style:normal;font-weight:800}.supervisor-inactivity-form>.button{justify-self:end}
.tenant-directory-meta{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){
    .billing-notification-settings{border-radius:14px;gap:16px;padding:16px}
    .notification-section-heading{display:grid;gap:10px}.notification-section-heading h2{font-size:19px}.notification-scope-badge{justify-self:start}
    .notification-user-list{border:0;display:grid;gap:10px;overflow:visible}.notification-user-list-head{display:none}
    .notification-user-row{border:1px solid var(--line);border-radius:12px;display:grid;gap:9px;grid-template-columns:1fr 1fr;padding:13px}
    .notification-user-row.has-water-column{grid-template-columns:1fr 1fr}.notification-user-row.has-water-column .notification-choice:last-child{grid-column:auto}
    .notification-user-identity{grid-column:1/-1;padding:0 0 8px}.notification-user-identity small{white-space:normal}
    .notification-choice{background:#f7f8fa;border:1px solid #e4e8ed;border-radius:9px;justify-content:flex-start;min-width:0;padding:10px}
    .notification-choice span{display:grid;gap:2px;min-width:0}.notification-choice b{font-size:12px}.notification-choice small{color:var(--muted);font-size:9px;line-height:1.25}
    .notification-save-bar{align-items:stretch;flex-direction:column}.notification-save-bar .button{width:100%}
}
@media(max-width:420px){.notification-user-row,.notification-user-row.has-water-column{grid-template-columns:1fr}.notification-user-identity{grid-column:auto}.notification-choice{width:100%}}
@media(max-width:760px){.supervisor-inactivity-candidate{grid-template-columns:auto 1fr}.supervisor-inactivity-candidate em,.supervisor-inactivity-candidate>small{grid-column:2}.supervisor-inactivity-form>.button{justify-self:stretch;width:100%}}
.billing-notification-users { display:grid; gap:9px; }
.billing-notification-user { align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; cursor:pointer; display:grid; gap:12px; grid-template-columns:auto 1fr auto; margin:0; padding:12px 14px; }
.billing-notification-user:has(input:checked) { background:#f0fdf4; border-color:#86efac; }
.billing-notification-user input { height:20px; margin:0; min-height:0; width:20px; }
.billing-notification-user>span { display:grid; gap:3px; }
.billing-notification-user small { color:#64748b; font-size:11px; }
.billing-notification-user>b { background:#f1f5f9; border-radius:999px; color:#475569; font-size:10px; padding:5px 8px; }
.billing-notification-user.is-inactive { cursor:not-allowed; opacity:.55; }
@media(max-width:700px){.claim-action-alert{align-items:stretch;flex-direction:column}.claim-action-alert .button{width:100%}}
@media(max-width:700px){.financial-kpis{grid-template-columns:repeat(2,1fr)}.financial-extremes,.financial-analysis-grid{grid-template-columns:1fr}.financial-quarter-chart{height:210px}.financial-detail-table{overflow-x:auto}}
.association-row-late td:first-child { border-left: 3px solid #dc2626; }

.association-claims-table table { table-layout: fixed; }
.association-period-tabs { display: grid; gap: 10px; margin: 0 0 14px; }
.association-year-tabs,
.association-quarter-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.association-year-tabs a,
.association-quarter-tabs a { border: 1px solid var(--line); color: #475569; display: grid; flex: 1 0 auto; gap: 2px; min-width: 130px; text-decoration: none; }
.association-year-tabs a { background: #fff; border-radius: 10px; padding: 11px 14px; }
.association-quarter-tabs a { background: #f8fafc; border-radius: 9px; padding: 9px 13px; }
.association-year-tabs strong { font-size: 16px; }
.association-quarter-tabs strong { font-size: 13px; }
.association-quarter-tabs em { color: #64748b; font-size: 10px; font-style: normal; font-weight: 700; }
.association-year-tabs span,
.association-quarter-tabs span { color: #94a3b8; font-size: 11px; font-weight: 700; }
.association-year-tabs a.is-active { background: #111827; border-color: #111827; color: #fff; }
.association-year-tabs a.is-active span { color: #cbd5e1; }
.association-quarter-tabs a.is-active { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.association-quarter-tabs a.is-active span { color: #b91c1c; }
.association-quarter-tabs a.is-active em { color: #991b1b; }
.association-period-empty { align-items: center; color: #475569; display: flex; flex-direction: column; gap: 4px; padding: 28px; text-align: center; }
.association-period-empty span { color: var(--muted); font-size: 12px; }
.association-claims-table th:nth-child(1) { width: 18%; }
.association-claims-table th:nth-child(2) { width: 18%; }
.association-claims-table th:nth-child(3) { width: 12%; }
.association-claims-table th:nth-child(4) { width: 12%; }
.association-claims-table th:nth-child(5) { width: 14%; }
.association-claims-table th:nth-child(6) { width: 26%; }
.association-claims-table td { vertical-align: top; }
.association-claim-row.status-submitted td:first-child { border-left: 3px solid #2563eb; }
.association-claim-row.status-approved td:first-child { border-left: 3px solid #16a34a; }
.association-claim-row.status-rejected td:first-child { border-left: 3px solid #ea580c; }
.association-claim-row.status-missing td:first-child { border-left: 3px solid #cbd5e1; }
.association-claim-row.status-draft td:first-child,
.association-claim-row.status-completed td:first-child { border-left: 3px solid #94a3b8; }

/* Water trip entry: touch-first layout */
.water-cost-page > .page-heading,.water-cost-layout { margin-left:auto;margin-right:auto;max-width:1120px;width:100%; }
.water-cost-layout { display:grid;gap:18px; }
.water-cost-section { gap:20px;padding:24px; }
.water-cost-section-heading { align-items:flex-start;border-bottom:1px solid var(--line);display:flex;gap:20px;justify-content:space-between;padding-bottom:17px; }
.water-cost-section-heading h2,.water-cost-section-heading p { margin:0; }
.water-cost-section-heading h2 { font-size:22px;margin-top:5px; }
.water-cost-section-heading p { color:var(--muted);line-height:1.5;margin-top:5px; }
.water-cost-section-heading form { flex:0 0 auto;margin:0; }
.water-cost-price-card { display:grid;gap:10px;grid-template-columns:1.15fr 1fr 1fr .75fr; }
.water-cost-price-card > div { background:#edf6ff;border:1px solid #d5e6f7;border-radius:11px;display:grid;gap:6px;padding:15px; }
.water-cost-price-card span { color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase; }
.water-cost-price-card strong { font-size:16px; }
.water-cost-price-card > div:first-child strong { color:var(--primary-dark);font-size:27px; }
.water-cost-price-card strong small { font-size:15px; }
.water-cost-cron-note { align-items:center;background:#f7f8fa;border:1px solid var(--line);border-radius:11px;display:flex;gap:12px;padding:13px 15px; }
.water-cost-cron-note svg { color:var(--success);height:24px;width:24px; }
.water-cost-cron-note span { display:grid;gap:3px; }
.water-cost-cron-note small { color:var(--muted); }
.water-cost-settings-form { display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr)); }
.water-cost-settings-form label { display:grid;gap:7px; }
.water-cost-settings-form input { font-size:16px;min-height:50px; }
.water-cost-settings-form label small { color:var(--muted);line-height:1.4; }
@media(max-width:760px){
    .water-cost-section{border-radius:14px;gap:16px;padding:16px}.water-cost-section-heading{align-items:stretch;display:grid;gap:13px}.water-cost-section-heading form,.water-cost-section-heading .button{width:100%}
    .water-cost-price-card{grid-template-columns:1fr 1fr}.water-cost-settings-form{grid-template-columns:1fr}.water-cost-settings-form .span-2{grid-column:auto}
    .water-cost-cron-note{align-items:flex-start}.water-cost-settings-form input{min-height:54px}
}
@media(max-width:430px){.water-cost-price-card{grid-template-columns:1fr}.water-cost-price-card > div:first-child strong{font-size:25px}}
.water-location-transfer { align-items:end;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr); }
.water-location-transfer label { min-width:0; }
.water-location-transfer input[readonly] { background:#f3f5f7;color:var(--text);cursor:default;font-weight:700; }
.water-location-arrow { align-items:center;background:var(--primary-soft);border:1px solid #edc8cd;border-radius:10px;color:var(--primary);cursor:pointer;display:flex;height:48px;justify-content:center;padding:0;transition:background .15s ease,border-color .15s ease,transform .15s ease;width:38px; }
.water-location-arrow:hover { background:var(--primary);border-color:var(--primary);color:#fff;transform:translateX(2px); }
.water-location-arrow:focus-visible { outline:3px solid rgba(178,31,45,.22);outline-offset:2px; }
.water-location-arrow svg { height:24px;width:24px; }
.water-driver-page > .page-heading,
.water-driver-page > .alert,
.water-driver-page .water-trip-form { margin-left:auto;margin-right:auto;max-width:980px;width:100%; }
.water-driver-page > .page-heading { margin-bottom:18px; }
.water-driver-page .water-trip-form { gap:18px 20px;padding:26px; }
.water-driver-page .water-trip-form label { align-content:start;gap:7px;min-width:0; }
.water-driver-page .water-trip-form input,
.water-driver-page .water-trip-form select,
.water-driver-page .water-trip-form textarea { font-size:16px;min-height:50px;min-width:0;padding:12px 14px;width:100%; }
.water-driver-page .water-trip-form input[type="date"] { display:block;max-width:100%;min-width:0; }
.water-driver-page .water-trip-form textarea { min-height:82px;resize:vertical; }
.water-driver-page .water-trip-form label > small { line-height:1.4;margin-top:-1px; }
.water-driver-page .water-trip-form > .button[type="submit"],
.water-driver-page .water-trip-form > .actions .button[type="submit"] { font-size:16px;margin-top:2px;min-height:54px; }

@media (max-width:760px) {
    .water-location-transfer { align-items:stretch;gap:9px;grid-template-columns:1fr; }
    .water-location-arrow { height:38px;justify-self:center;transform:rotate(90deg);width:48px; }
    .water-location-arrow:hover { transform:rotate(90deg) translateX(2px); }
    .water-driver-page > .page-heading { align-items:flex-start;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto;margin-bottom:14px; }
    .water-driver-page > .page-heading h1 { font-size:clamp(27px,8vw,34px);line-height:1.06; }
    .water-driver-page > .page-heading p { font-size:14px;line-height:1.45;margin-top:7px; }
    .water-driver-page > .page-heading > .button { min-height:42px;padding:9px 13px;width:auto; }
    .water-driver-page .water-trip-form { border-radius:16px;gap:16px;padding:16px; }
    .water-driver-page .water-trip-form input,
    .water-driver-page .water-trip-form select,
    .water-driver-page .water-trip-form textarea { max-width:100%;min-height:54px;width:100%; }
    .water-driver-page .water-trip-form textarea { min-height:96px; }
    .water-driver-page .water-trip-form > .button[type="submit"],
    .water-driver-page .water-trip-form > .actions .button[type="submit"] { min-height:58px;width:100%; }
}

@media (max-width:420px) {
    .water-driver-page > .page-heading { grid-template-columns:1fr; }
    .water-driver-page > .page-heading > .button { grid-row:1;justify-self:start; }
    .water-driver-page .water-trip-form { border-left:0;border-radius:14px;border-right:0;padding:15px 13px; }
}
.water-manager-flow > .page-heading,
.water-manager-flow > .alert,
.water-manager-flow .water-driver-summary,
.water-manager-flow .water-test-delete-panel,
.water-manager-flow .water-delivery-form { margin-left:auto;margin-right:auto;max-width:980px;width:100%; }
.water-manager-flow .water-delivery-form { gap:18px 20px;padding:24px; }
.water-manager-flow .water-delivery-form input,
.water-manager-flow .water-delivery-form select,
.water-manager-flow .water-delivery-form textarea { font-size:16px;min-height:50px;width:100%; }
.water-manager-flow .water-delivery-form .water-free-option input[type="checkbox"] { height:24px;min-height:24px;width:24px; }
.water-manager-flow .water-delivery-form .water-additional-work-option input[type="checkbox"] { height:24px;min-height:24px;width:24px; }
.water-payment-editor[hidden] { display:none!important; }
.water-manager-flow .water-delivery-form textarea { min-height:92px;resize:vertical; }
.water-manager-flow .water-delivery-form label > small { line-height:1.4; }
.water-form-actions { align-items:center;background:#f7f8fa;border-radius:12px;justify-content:flex-end;padding:13px; }
.water-form-actions .button { min-height:54px; }
.water-driver-summary { background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 18px rgba(15,23,42,.05);display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px;padding:14px; }
.water-driver-summary div { background:#f7f8fa;border-radius:10px;display:grid;gap:4px;min-width:0;padding:11px 12px; }
.water-driver-summary span { color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase; }
.water-driver-summary strong { color:var(--text);font-size:15px;line-height:1.25;overflow-wrap:anywhere; }
.water-mobile-table td small { color:var(--muted);display:block;font-size:11px;line-height:1.35;margin-top:4px;white-space:normal; }
.water-mobile-table .button { min-height:40px; }
@media (max-width:760px) {
    .water-module.water-driver-page,
    .water-module.water-manager-flow { padding-bottom:calc(132px + env(safe-area-inset-bottom)); }
    body:has(.water-trip-form input:focus) .mobile-tabbar,
    body:has(.water-trip-form select:focus) .mobile-tabbar,
    body:has(.water-trip-form textarea:focus) .mobile-tabbar,
    body:has(.water-delivery-form input:focus) .mobile-tabbar,
    body:has(.water-delivery-form select:focus) .mobile-tabbar,
    body:has(.water-delivery-form textarea:focus) .mobile-tabbar {
        opacity:0;
        pointer-events:none;
        transform:translateY(calc(110% + env(safe-area-inset-bottom)));
    }
    .water-manager-flow > .page-heading { align-items:stretch;display:grid;gap:14px;margin-bottom:14px; }
    .water-manager-flow > .page-heading h1 { font-size:clamp(27px,8vw,34px);line-height:1.06; }
    .water-manager-flow > .page-heading p { font-size:14px;line-height:1.45;margin-top:7px; }
    .water-manager-flow > .page-heading > .button { justify-self:start;min-height:42px;padding:9px 13px;width:auto; }
    .water-manager-flow .water-delivery-form { border-radius:16px;gap:16px;padding:16px; }
    .water-manager-flow .water-delivery-form h2 { font-size:17px;line-height:1.25;margin-top:4px; }
    .water-manager-flow .water-delivery-form input,
    .water-manager-flow .water-delivery-form select,
    .water-manager-flow .water-delivery-form textarea { min-height:54px; }
    .water-driver-summary { border-radius:14px;grid-template-columns:1fr 1fr;margin-bottom:12px;padding:12px; }
    .water-driver-summary div { padding:10px; }
    .water-quick-customer { align-items:stretch;grid-template-columns:1fr;padding:13px; }
    .water-quick-customer > span { display:none; }
    .water-payer-editor { border-radius:14px;padding:13px; }
    .water-payer-row { background:#fff;border:1px solid var(--line);border-radius:12px;grid-template-columns:1fr;padding:12px; }
    .water-payer-remove { font-size:14px;min-height:44px;width:100%; }
    .water-payer-footer .button,
    .water-payer-footer a { align-items:center;display:flex;justify-content:center;min-height:44px;width:100%; }
    .water-payer-footer a { background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--primary);font-weight:800;text-decoration:none; }
    .water-form-actions { align-items:stretch;flex-direction:column;margin-top:2px; }
    .water-form-actions .button { width:100%; }
    .water-card-assignment { gap:8px;grid-template-columns:1fr 1fr; }
    .water-card-assignment dd { white-space:normal; }
    .water-pagination { gap:8px;grid-template-columns:1fr 1fr; }
    .water-pagination > div { grid-column:1/-1;grid-row:1;justify-content:center;overflow-x:auto;padding-bottom:2px; }
    .water-pagination > .button { width:100%; }
    .water-mobile-table { overflow:visible; }
    .water-mobile-table table,
    .water-mobile-table thead,
    .water-mobile-table tbody,
    .water-mobile-table tr,
    .water-mobile-table th,
    .water-mobile-table td { display:block;min-width:0;width:100%; }
    .water-mobile-table table { border-collapse:separate;min-width:0; }
    .water-mobile-table thead { display:none; }
    .water-mobile-table tbody { display:grid;gap:10px; }
    .water-mobile-table tr { background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 5px 18px rgba(15,23,42,.04);overflow:hidden;padding:10px 12px; }
    .water-mobile-table td { align-items:start;border-bottom:1px solid #edf0f3;display:grid;gap:4px;grid-template-columns:minmax(112px,.4fr) minmax(0,1fr);padding:10px 0;text-align:left;white-space:normal; }
    .water-mobile-table td:last-child { border-bottom:0;display:block;padding-top:12px; }
    .water-mobile-table td::before { color:var(--muted);content:attr(data-label);font-size:10px;font-weight:900;text-transform:uppercase; }
    .water-mobile-table td[data-label=""]::before { display:none; }
    .water-mobile-table td:last-child .button { width:100%; }
}
@media (max-width:430px) {
    .water-manager-flow .water-delivery-form { border-left:0;border-radius:14px;border-right:0;padding:15px 13px; }
    .water-driver-summary { grid-template-columns:1fr; }
    .water-card-assignment,
    .water-mobile-table td { grid-template-columns:1fr; }
    .water-card-number { align-items:flex-start;flex-direction:column; }
}
.association-claim-reason { color: #9a3412; display: block; font-size: 11px; line-height: 1.45; margin-top: 7px; }
.association-claim-links { display: flex; flex-wrap: wrap; gap: 7px; }
.association-claim-links .button { min-height: 38px; padding: 8px 11px; }
.association-open-claim { min-height: 40px; white-space: nowrap; }
.association-not-submitted { background: #f1f5f9; border-radius: 999px; color: #64748b; display: inline-flex; font-size: 11px; font-weight: 800; padding: 7px 10px; white-space: nowrap; }
.association-claims-table .association-decision-actions { align-items: stretch; display: grid; gap: 10px; margin-top: 10px; }
.association-list-approve-form { margin: 0; }
.association-list-approve-form .button { width: 100%; }
.association-claims-table .association-reject-form { align-items: end; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; display: grid; gap: 9px; grid-template-columns: minmax(190px, 1fr) auto; margin: 0; padding: 11px; }
.association-claims-table .association-reject-reason { grid-column: 1 / -1; }
.association-claims-table .association-correction-toggle { min-height: 40px; }
.association-claims-table .association-reject-form .button { min-height: 40px; }
.association-decision-date { align-items: baseline; display: flex; gap: 6px; margin-top: 9px; }
.association-decision-date span { color: var(--muted); font-size: 11px; }
.association-decision-date strong { color: #334155; font-size: 12px; }

@media (max-width:700px) {
    .association-overview-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .association-dashboard-insights { grid-template-columns: 1fr; }
    .association-monthly-card { grid-row: auto; }
    .association-monthly-chart { gap: 3px; height: 170px; }
    .association-operational-filters{grid-template-columns:1fr 1fr}.association-operational-grid{grid-template-columns:1fr}.association-operational-grid .association-monthly-card{grid-column:auto}
    .association-dashboard-quarter-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .association-financial-head { align-items:stretch; flex-direction:column; }
    .association-financial-body { grid-template-columns:1fr; }
    .association-crm-hero,
    .association-crm-board,
    .association-crm-snapshot { grid-template-columns: 1fr; }
    .association-crm-time,
    .association-workqueue-head,
    .association-review-strip,
    .association-period-selector label,.association-deadline-banner { align-items: stretch; flex-direction: column; }
    .association-crm-time span { text-align: left; }
    .association-workqueue-row,
    .association-workqueue-row-header { grid-template-columns: 1fr; }
    .association-workqueue-row-header { display: none; }
    .association-workqueue-actions { justify-content: flex-start; }
    .association-claims-table { background:transparent;border:0;overflow:visible;padding:0; }
    .association-claims-table table,
    .association-claims-table tbody,
    .association-claims-table tr,
    .association-claims-table td { display:block;min-width:0;width:100%; }
    .association-claims-table table { border-spacing:0;table-layout:auto; }
    .association-claims-table thead { display:none; }
    .association-claims-table tbody { display:grid;gap:11px; }
    .association-claims-table tbody tr { background:#fff;border:1px solid var(--line);border-left:4px solid #94a3b8;border-radius:13px;box-shadow:0 4px 14px rgba(15,23,42,.05);overflow:hidden;padding:13px 14px; }
    .association-claims-table tbody td { border:0;padding:6px 0;text-align:left;white-space:normal; }
    .association-claims-table tbody td:first-child { border-left:0;border-bottom:1px solid var(--line);padding-top:0;padding-bottom:11px; }
    .association-claims-table tbody td::before { color:var(--muted);content:attr(data-label);display:block;font-size:9px;font-weight:900;letter-spacing:.04em;margin-bottom:4px;text-transform:uppercase; }
    .association-claims-table tbody td:last-child { border-top:1px solid var(--line);margin-top:5px;padding-top:11px; }
    .association-claims-table .association-open-claim { width:100%; }
    .association-claims-table tbody tr.status-submitted { border-left-color:#2563eb; }
    .association-claims-table tbody tr.status-approved { border-left-color:#16a34a; }
    .association-claims-table tbody tr.status-rejected { border-left-color:#ea580c; }
    .association-claims-table tbody tr.status-missing { border-left-color:#cbd5e1; }
    .association-claims-table tbody tr > td[colspan] { border:0;margin:0;padding:0; }
    .association-claims-table tbody tr > td[colspan]::before { display:none; }
    .association-claims-table .association-reject-form { grid-template-columns: 1fr; }
    .association-claims-table .association-reject-reason { grid-column: 1; }
    .association-claim-links .button { flex: 1; }
}

@media (max-width: 700px) {
    .submission-timing-banner { align-items: flex-start; flex-direction: column; gap: 9px; }
    .reimbursement-group-header { align-items: center; gap: 10px; }
    .reimbursement-group-identity { align-items: flex-start; flex-direction: column; gap: 2px; }
    .reimbursement-group-total { flex-basis: auto; }
    .reimbursement-toggle { display: none; }
    .reimbursement-location { max-width: 180px; }
    .reimbursement-attachments { align-items: stretch; flex-direction: column; }
    .reimbursement-upload-form { align-items: stretch; flex-direction: column; }
    .reimbursement-action-panel { grid-template-columns: 1fr; }
    .reimbursement-action-panel > form:not(.association-reject-form),
    .reimbursement-action-panel .association-reject-form { grid-column: 1; justify-self: stretch; }
    .reimbursement-action-panel .association-reject-form { grid-template-columns: 1fr; }
    .reimbursement-action-panel > a,
    .reimbursement-action-panel > form:not(.association-reject-form) { justify-self: stretch; }
    .reimbursement-action-panel > a,
    .reimbursement-action-panel > form:not(.association-reject-form) .button,
    .association-reject-form .button { width: 100%; }
}

/* User form: aligned advanced permission editor */
.water-year-filter{margin:0}.water-year-filter label{align-items:center;display:flex;gap:9px;margin:0}.water-year-filter select{min-width:110px}.water-stat-kpis{margin-bottom:18px}.water-stat-kpis .stat-content strong{font-size:clamp(22px,2vw,30px)}.water-chart-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:24px}.water-chart-panel{min-width:0}.water-chart-panel>header{align-items:flex-start;border-bottom:1px solid var(--line);display:flex;gap:14px;justify-content:space-between;margin-bottom:18px;padding-bottom:13px}.water-chart-panel header h2,.water-chart-panel header p{border:0;margin:0;padding:0}.water-chart-panel header p{color:var(--muted);font-size:13px;margin-top:4px}.water-chart-panel>header>strong{color:var(--primary);font-size:18px;white-space:nowrap}.water-column-chart,.water-finance-chart{align-items:end;display:grid;gap:7px;grid-template-columns:repeat(12,minmax(24px,1fr));height:270px;padding-top:24px}.water-column{align-items:center;display:grid;grid-template-rows:18px minmax(0,1fr) 20px 18px;height:100%;min-width:0;text-align:center}.water-column-value{color:var(--muted);font-size:10px;overflow:hidden}.water-column-track{align-items:end;background:#f1f3f6;border-radius:7px 7px 3px 3px;display:flex;height:100%;overflow:hidden;width:100%}.water-column-track span{background:linear-gradient(180deg,#ef0012,#9f0712);border-radius:7px 7px 3px 3px;display:block;min-height:0;transition:height .25s;width:100%}.water-column b,.water-finance-month b{font-size:11px;margin-top:5px}.water-column small,.water-finance-month small{color:var(--muted);font-size:9px;white-space:nowrap}.water-finance-month{align-items:center;display:grid;grid-template-rows:minmax(0,1fr) 20px 18px;height:100%;min-width:0;text-align:center}.water-finance-bars{align-items:end;display:flex;gap:2px;height:100%;justify-content:center;width:100%}.water-finance-bars span{border-radius:5px 5px 2px 2px;display:block;max-width:14px;width:42%}.water-finance-bars .is-revenue{background:#16a34a}.water-finance-bars .is-cost{background:#f59e0b}.water-chart-legend{align-items:center;color:var(--muted);display:flex;font-size:11px;gap:5px;white-space:nowrap}.water-chart-legend i{background:#16a34a;border-radius:50%;height:8px;width:8px}.water-chart-legend i:nth-of-type(2){background:#f59e0b;margin-left:5px}.water-rankings .analytics-panel{min-width:0}.water-rankings .ranking-row-main strong{white-space:nowrap}.water-summary-panel dl{display:grid;gap:4px;margin:0}.water-summary-panel dl>div{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:11px 0}.water-summary-panel dt{color:var(--muted)}.water-summary-panel dd{font-size:16px;font-weight:900;margin:0}@media(max-width:980px){.water-chart-grid{grid-template-columns:1fr}}@media(max-width:650px){.water-column-chart,.water-finance-chart{gap:3px;height:220px;overflow-x:auto}.water-column b,.water-finance-month b{font-size:9px}.water-column small,.water-finance-month small{display:none}.water-chart-panel>header{align-items:stretch;flex-direction:column}.water-year-filter,.water-year-filter label,.water-year-filter select{width:100%}}

.gzs-reference-panel{background:linear-gradient(135deg,#fff 0%,#fff8f1 100%);border:1px solid #fed7aa;border-left:5px solid #ea580c;border-radius:13px;display:grid;gap:16px;margin:0 0 20px;padding:18px 20px}.gzs-reference-panel h2{font-size:20px;margin:3px 0 5px}.gzs-reference-panel p{color:var(--muted);font-size:13px;margin:0;max-width:850px}.gzs-reference-values{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.gzs-reference-values article{background:#fff;border:1px solid #ffedd5;border-radius:10px;display:grid;gap:3px;padding:13px 15px}.gzs-reference-values span{color:#7c2d12;font-size:10px;font-weight:900;text-transform:uppercase}.gzs-reference-values strong{font-size:23px}.gzs-reference-values small,.gzs-reference-panel footer{color:#78716c;font-size:11px}.gzs-reference-values .is-negative strong{color:#b91c1c}.gzs-reference-values .is-positive strong{color:#15803d}.gzs-reference-panel footer{border-top:1px solid #fed7aa;padding-top:10px}.gzs-reference-panel footer a{font-weight:800}@media(max-width:760px){.gzs-reference-values{grid-template-columns:1fr}.gzs-reference-panel{padding:15px}}
.password-change-page{align-items:center;display:flex;justify-content:center;min-height:calc(100vh - 260px);padding:28px 0}.password-change-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 65px rgba(15,23,42,.11);margin:0;max-width:720px;padding:34px;width:100%}.password-change-icon{align-items:center;background:var(--primary-soft);border-radius:15px;color:var(--primary);display:flex;height:56px;justify-content:center;margin-bottom:18px;width:56px}.password-change-icon svg{height:28px;width:28px}.password-change-card .login-card-heading h1{font-size:36px}.password-change-form{border:0;box-shadow:none;display:grid;gap:16px;margin:0;padding:0}.password-change-form label{margin:0}.password-change-form input{font-size:16px;min-height:52px}.password-new-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}.password-guidance{align-items:center;background:#f8fafc;border:1px solid var(--line);border-radius:12px;display:flex;gap:11px;padding:12px 14px}.password-guidance svg{color:var(--primary);height:22px;width:22px}.password-guidance span{display:grid;gap:2px}.password-guidance small{color:var(--muted)}.password-change-actions{display:flex;gap:10px;justify-content:flex-end}.password-change-card .alert ul{margin:8px 0 0;padding-left:20px}@media(max-width:650px){.password-change-page{align-items:flex-start;padding:12px 0}.password-change-card{padding:22px}.password-new-grid{grid-template-columns:1fr}.password-change-actions{flex-direction:column-reverse}.password-change-actions .button{width:100%}}
.advanced-permissions{display:grid;gap:16px;padding:18px}
.advanced-permissions[hidden]{display:none!important}
.advanced-permissions>summary{align-items:center;display:flex;min-height:28px}
.advanced-permissions>p{color:var(--muted);margin:0}
.advanced-permissions>label{align-items:center;display:grid;gap:12px;grid-template-columns:minmax(150px,220px) minmax(220px,360px);margin:0}
.advanced-permissions>label select{margin:0;width:100%}
.advanced-permissions .permission-group{background:var(--panel);display:grid;gap:12px;margin:0;padding:16px 18px 18px}
.advanced-permissions .permission-group legend{line-height:1.2}
.advanced-permissions .checkbox-grid{align-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr))}
.advanced-permissions .check-option{align-items:center;height:100%;margin:0;min-height:48px}
.advanced-permissions .check-option input{flex:0 0 auto;margin:0}
.advanced-permissions .check-option span{line-height:1.35}
@media(max-width:700px){.advanced-permissions>label{grid-template-columns:1fr}.advanced-permissions .checkbox-grid{grid-template-columns:1fr}}

.water-fuel-chart .water-column-track span{background:linear-gradient(180deg,#f59e0b,#b45309)}
.water-diesel-price-chart .water-column-track span{background:linear-gradient(180deg,#2563eb,#1e3a8a)}

.gzs-billing-summary{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}.gzs-billing-summary article{background:#fff;border:1px solid var(--line);border-radius:11px;display:grid;gap:4px;padding:16px}.gzs-billing-summary span{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.gzs-billing-summary strong{font-size:24px}.gzs-billing-summary small{color:#64748b;font-size:11px}.gzs-billing-summary .is-negative strong{color:#b91c1c}.gzs-billing-summary .is-positive strong{color:#15803d}.gzs-billing-grid{display:grid;gap:14px;grid-template-columns:minmax(300px,.8fr) minmax(480px,1.2fr);margin:16px 0}.gzs-chart-legend{align-items:center;color:var(--muted);display:flex;font-size:11px;gap:5px;white-space:nowrap}.gzs-chart-legend i{background:#2563eb;border-radius:50%;height:8px;width:8px}.gzs-chart-legend i:nth-of-type(2){background:#ea580c;margin-left:6px}.gzs-quarter-comparison{align-items:end;display:grid;gap:14px;grid-template-columns:repeat(4,1fr);height:290px;padding-top:20px}.gzs-quarter-comparison>div{align-items:center;display:grid;grid-template-rows:22px minmax(0,1fr) 24px 18px;height:100%;text-align:center}.gzs-quarter-comparison>div>strong{font-size:11px}.gzs-quarter-comparison>div>i{align-items:end;display:flex;gap:5px;height:100%;justify-content:center}.gzs-quarter-comparison>div>i span{border-radius:6px 6px 2px 2px;display:block;max-width:28px;width:40%}.gzs-quarter-comparison .is-actual{background:#2563eb}.gzs-quarter-comparison .is-gzs{background:#ea580c}.gzs-quarter-comparison b{font-size:12px;margin-top:6px}.gzs-quarter-comparison small{color:var(--muted);font-size:10px}.gzs-intervention-ranking{display:grid;gap:11px}.gzs-intervention-row{align-items:center;display:grid;gap:10px;grid-template-columns:25px minmax(0,1fr) auto}.gzs-intervention-main{display:grid;gap:6px;min-width:0}.gzs-intervention-main>div{display:grid}.gzs-intervention-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gzs-intervention-main small{color:var(--muted);font-size:10px}.gzs-intervention-main>i{background:#eef2f7;border-radius:4px;display:grid;gap:2px;height:10px;overflow:hidden}.gzs-intervention-main>i span{display:block;min-width:2px}.gzs-intervention-main .is-actual{background:#2563eb}.gzs-intervention-main .is-gzs{background:#ea580c}.gzs-intervention-values{display:grid;font-size:11px;gap:2px;text-align:right;white-space:nowrap}.gzs-intervention-values span{color:#2563eb}.gzs-intervention-values strong{color:#c2410c}.gzs-intervention-ranking-card footer{border-top:1px solid var(--line);color:var(--muted);font-size:10px;margin-top:14px;padding-top:10px}@media(max-width:980px){.gzs-billing-grid{grid-template-columns:1fr}}@media(max-width:700px){.gzs-billing-summary{grid-template-columns:1fr}.gzs-intervention-row{grid-template-columns:22px minmax(0,1fr)}.gzs-intervention-values{grid-column:2;grid-template-columns:1fr 1fr;text-align:left}.gzs-quarter-comparison{height:230px}}

.crew-allocation{display:grid;gap:8px;margin-top:4px}.allocation-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-bottom:1px solid #e3e7ed}.allocation-heading h2{font-size:1rem;margin:0}.allocation-heading p{font-size:.82rem;margin:2px 0 0;color:#667085}.allocation-summary{display:flex;align-items:center;gap:8px;font-size:.82rem}.allocation-summary strong{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:4px 7px;border-radius:999px;background:#fff4e8;color:#9a4d00}.allocation-summary .allocation-ok{color:#157347}.allocation-bulk{display:flex;align-items:end;gap:8px;padding:4px 12px}.allocation-bulk label{display:flex;align-items:center;gap:8px;flex:1;font-size:.82rem}.allocation-bulk select{min-height:34px;padding:5px 9px}.allocation-bulk .button{min-height:34px;padding:6px 10px}.single-vehicle-allocation .allocation-bulk{display:none}.allocation-list{display:grid;gap:0;border:1px solid #e3e7ed;border-radius:8px;overflow:hidden}.allocation-row{display:grid;grid-template-columns:220px minmax(0,1fr) 112px;align-items:center;gap:10px;min-height:54px;padding:7px 10px;background:#fff}.allocation-row+.allocation-row{border-top:1px solid #edf0f4}.allocation-row select{min-height:36px;padding:5px 9px;width:100%}.allocation-pick{align-items:center;display:flex;gap:8px;justify-content:flex-start;margin:0;min-width:0;text-align:left;font-size:.88rem;font-weight:700}.allocation-pick span{overflow:hidden;text-overflow:ellipsis}.allocation-role-slot{align-items:center;display:flex;gap:5px;justify-content:flex-end;min-height:25px}.allocation-role-slot .status-pill{white-space:nowrap}.allocation-leader-badge{background:#e8efff;color:#2452a3}.allocation-row[hidden]{display:none}.single-vehicle-allocation .allocation-bulk-check{display:none}.vehicle-selector-group{margin-top:8px}@media(max-width:720px){.allocation-heading{align-items:flex-start;flex-direction:column}.allocation-bulk{align-items:stretch;flex-direction:column}.allocation-bulk label{align-items:stretch;flex-direction:column}.allocation-row{grid-template-columns:minmax(0,1fr) auto;padding:8px 10px}.allocation-row select{grid-column:1/-1;grid-row:2}.allocation-role-slot{grid-column:2;grid-row:1}.allocation-summary{align-items:center}}
.regular-only[hidden],.intervention-only[hidden],#fuel-liters-field[hidden]{display:none!important}
.location-distance-fields{align-items:end;display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr) 120px auto;gap:8px 12px}.location-distance-fields label{min-width:0}.billable-distance-field input{text-align:right}.distance-calculate-button{align-self:end;min-height:42px;padding-inline:16px;white-space:nowrap}.location-distance-hint{color:var(--muted);font-size:.78rem;font-weight:700;grid-column:2/4;line-height:1.35;margin-top:-2px}.compact-readonly-field{min-height:42px;padding:7px 10px}.compact-readonly-field span{font-size:.72rem}.compact-readonly-field strong{font-size:.92rem;white-space:nowrap}.location-distance-fields .compact-readonly-field{grid-column:2/4}@media(max-width:900px){.location-distance-fields{grid-template-columns:minmax(0,1fr) 120px}.distance-calculate-button{grid-column:2}.location-distance-hint,.location-distance-fields .compact-readonly-field{grid-column:1/-1}}@media(max-width:640px){.location-distance-fields{grid-template-columns:1fr 118px}.distance-calculate-button{grid-column:1/-1;width:100%}.compact-readonly-field{align-items:center;display:flex;justify-content:space-between}}@media(max-width:430px){.location-distance-fields{grid-template-columns:1fr}.billable-distance-field input{text-align:left}.distance-calculate-button{grid-column:1}.location-distance-hint{grid-column:1}}
.custom-units{display:grid;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #e3e7ed}.custom-unit-list{display:grid;gap:6px}.custom-unit-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:6px}.custom-unit-row input{min-width:0}.custom-unit-remove{min-width:38px;padding:5px;font-size:1.1rem}
.crew-allocation-view{display:grid;gap:8px}.crew-allocation-view-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.crew-allocation-view-card{background:#fff;border:1px solid #e3e7ed;border-radius:10px;min-width:0;overflow:hidden}.crew-allocation-view-card h3{background:#f7f8fa;border-bottom:1px solid #e3e7ed;font-size:.95rem;margin:0;padding:10px 13px;white-space:normal}.crew-allocation-view-members{display:flex;flex-wrap:wrap;gap:7px;padding:11px 13px}.crew-allocation-view-member{align-items:center;background:#f7f8fa;border:1px solid #e6e9ee;border-radius:999px;display:inline-flex;font-size:.83rem;gap:6px;line-height:1.2;padding:6px 9px;white-space:normal}.crew-allocation-view-member b{background:#dff3e8;border-radius:999px;color:#137247;font-size:.68rem;padding:3px 6px;text-transform:uppercase}@media(max-width:720px){.crew-allocation-view-grid{grid-template-columns:1fr}}
.requests-heading{margin-bottom:16px}.requests-summary{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.requests-summary article{background:#fff;border:1px solid var(--line);border-radius:12px;display:grid;gap:4px;padding:14px 16px}.requests-summary span{color:var(--muted);font-size:.7rem;font-weight:900;text-transform:uppercase}.requests-summary strong{font-size:1.65rem}.requests-summary small{color:var(--muted);font-size:.75rem}.requests-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.request-type-card{background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--text);display:grid;gap:14px;grid-template-columns:48px minmax(0,1fr);min-height:190px;padding:18px;position:relative;text-decoration:none}.request-type-card.is-active{border-left:5px solid var(--primary);box-shadow:var(--shadow-soft);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.request-type-card.is-active:hover{border-color:var(--primary);box-shadow:0 14px 30px rgba(15,23,42,.09);transform:translateY(-2px)}.request-type-card.is-coming{background:#fafbfc;color:#667085}.request-type-icon{align-items:center;background:var(--primary-soft);border-radius:12px;color:var(--primary);display:flex;height:46px;justify-content:center;width:46px}.request-type-icon svg{height:23px;width:23px}.request-type-copy{display:block;padding-right:68px}.request-type-copy small{color:var(--muted);display:block;font-size:.66rem;font-weight:900;letter-spacing:.05em;margin-bottom:6px}.request-type-copy strong{display:block;font-size:1.05rem}.request-type-copy p{color:var(--muted);font-size:.82rem;line-height:1.5;margin:8px 0 0}.request-type-meta{align-items:center;display:flex;gap:10px;grid-column:2;justify-content:space-between}.request-type-meta b{background:#fff0df;border-radius:999px;color:#9a4d00;font-size:.7rem;padding:5px 8px}.request-type-meta em{color:var(--primary);font-size:.76rem;font-style:normal;font-weight:900;margin-left:auto}.request-type-status{background:#eef1f5;border-radius:999px;color:#667085;font-size:.67rem;font-weight:900;padding:6px 9px;position:absolute;right:16px;text-transform:uppercase;top:16px}@media(max-width:850px){.requests-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.requests-grid{grid-template-columns:1fr}}@media(max-width:520px){.requests-summary{grid-template-columns:1fr 1fr;gap:7px}.requests-summary article{padding:12px}.request-type-card{grid-template-columns:42px minmax(0,1fr);min-height:0;padding:15px}.request-type-icon{height:40px;width:40px}.request-type-copy{padding-right:0}.request-type-status{position:static;width:max-content}.request-type-meta{grid-column:1/-1}}
.request-access-locked{align-items:start;background:#fff;border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:14px;box-shadow:var(--shadow-soft);display:grid;gap:18px;grid-template-columns:48px minmax(0,1fr);padding:22px}.request-access-locked small{color:var(--primary);font-size:.7rem;font-weight:900;letter-spacing:.05em}.request-access-locked h2{margin:5px 0 8px}.request-access-locked p{color:var(--muted);margin:0;max-width:760px}.request-access-locked form{border-top:1px solid var(--line);display:grid;gap:12px;grid-column:1/-1;padding-top:18px}.request-access-locked textarea{resize:vertical}@media(max-width:520px){.request-access-locked{grid-template-columns:42px minmax(0,1fr);padding:16px}}
.nav-badge{align-items:center;background:#ef0012;border-radius:999px;color:#fff;display:inline-flex;font-size:10px;height:19px;justify-content:center;margin-left:auto;min-width:19px;padding:0 5px}.is-active .nav-badge{background:#fff;color:#b0000d}
.request-trip-filters{align-items:end;display:grid;gap:10px;grid-template-columns:150px 150px minmax(220px,1fr) auto;margin-bottom:14px}.travel-request-builder{display:grid;gap:14px}.travel-request-title-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}.travel-selection-summary{align-items:center;background:#f7f8fa;border:1px solid var(--line);border-radius:11px;display:flex;gap:22px;padding:11px 14px;position:sticky;top:74px;z-index:5}.travel-selection-summary strong{color:var(--primary)}.travel-selection-summary span{font-size:.86rem}.travel-selection-amount{color:var(--primary);font-size:1rem!important;font-weight:900;margin-left:auto}.travel-vehicle-groups{display:grid;gap:14px}.travel-vehicle-group{border:1px solid var(--line);border-radius:12px;overflow:hidden}.travel-vehicle-group>header{align-items:center;background:#f7f8fa;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:11px 14px}.travel-vehicle-group h2,.travel-vehicle-group header small{margin:0}.travel-vehicle-group h2{font-size:1rem}.travel-vehicle-group header small{color:var(--muted)}.travel-trip-list{display:grid}.travel-trip-row{align-items:center;background:#fff;cursor:pointer;display:grid;gap:10px;grid-template-columns:22px 120px minmax(220px,1fr) 135px 120px;margin:0;padding:10px 13px}.travel-trip-row+.travel-trip-row{border-top:1px solid #edf0f4}.travel-trip-row:has(input:checked){background:#fff7f7}.travel-trip-date,.travel-trip-purpose,.travel-trip-km{display:grid;gap:2px}.travel-trip-row small{color:var(--muted);font-size:.72rem}.travel-trip-fuel{text-align:right}.travel-rate-missing{color:#b42318;font-size:.72rem}.travel-rate-input{align-items:center;display:flex;gap:7px}.travel-rate-input input{max-width:130px}.travel-rate-input b{font-size:.78rem;white-space:nowrap}.travel-request-hero{display:grid;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:15px}.travel-request-hero article{background:#fff;border:1px solid var(--line);border-radius:11px;display:grid;gap:4px;padding:13px}.travel-request-hero article.is-total{background:#fff7f7;border-color:#efc7cb}.travel-request-hero span{color:var(--muted);font-size:.68rem;font-weight:900;text-transform:uppercase}.travel-request-hero strong{font-size:1.05rem}.travel-request-detail-groups{display:grid;gap:14px;margin-top:15px}.travel-request-detail-group{border:1px solid var(--line);border-radius:12px;overflow:hidden}.travel-request-detail-group>header{align-items:center;background:#f7f8fa;display:flex;justify-content:space-between;padding:11px 14px}.travel-request-detail-group h2{font-size:1rem;margin:0}.travel-request-detail-group header span{color:var(--muted);font-size:.8rem}@media(max-width:850px){.request-trip-filters{grid-template-columns:1fr 1fr}.travel-request-title-row{grid-template-columns:1fr}.travel-request-hero{grid-template-columns:repeat(2,minmax(0,1fr))}.travel-trip-row{grid-template-columns:22px 105px minmax(150px,1fr) 120px}.travel-trip-fuel{display:none}}@media(max-width:580px){.request-trip-filters{grid-template-columns:1fr}.travel-selection-summary{align-items:flex-start;flex-direction:column;gap:5px;position:static}.travel-selection-amount{margin-left:0}.travel-trip-row{grid-template-columns:22px minmax(0,1fr)}.travel-trip-date{grid-column:2}.travel-trip-purpose,.travel-trip-km{grid-column:2}.travel-request-hero{grid-template-columns:1fr 1fr}}
.travel-missing-rate-alert{align-items:center;display:flex;justify-content:space-between}.travel-missing-rate-alert form{margin:0}
.association-claims-summary{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0 12px}.association-claims-summary article{background:#fff;border:1px solid var(--line);border-left:4px solid #94a3b8;border-radius:12px;display:grid;gap:4px;padding:14px 16px}.association-claims-summary article.is-review{border-left-color:#2563eb}.association-claims-summary article.is-missing{border-left-color:#ef4444}.association-claims-summary article.is-approved{border-left-color:#16a34a}.association-claims-summary article.is-amount{border-left-color:var(--primary)}.association-claims-summary span{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.035em;text-transform:uppercase}.association-claims-summary strong{font-size:22px;line-height:1.15}.association-claims-summary small{color:var(--muted);font-size:11px}.association-claims-filters{align-items:end;background:#fff;border:1px solid var(--line);border-radius:12px;display:grid;gap:10px;grid-template-columns:minmax(150px,.75fr) minmax(190px,1fr) minmax(210px,1.25fr) auto auto;margin:0 0 12px;padding:12px}.association-claims-filters label{display:grid;gap:5px;margin:0}.association-claims-filters label>span{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.association-claims-filters input,.association-claims-filters select{min-height:40px}.association-claims-filters .button{min-height:40px;white-space:nowrap}@media(max-width:900px){.association-claims-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.association-claims-filters{grid-template-columns:1fr 1fr}.association-claims-search{grid-column:1/-1}}@media(max-width:520px){.association-claims-summary,.association-claims-filters{grid-template-columns:1fr}.association-claims-search{grid-column:1}.association-claims-filters .button{width:100%}}
.association-quarter-export{align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px;display:flex;gap:18px;justify-content:space-between;margin:0 0 12px;padding:13px 16px}.association-quarter-export>div{display:grid;gap:3px}.association-quarter-export strong{font-size:15px}.association-quarter-export span:not(.button){color:var(--muted);font-size:12px}.association-quarter-export .button{flex:0 0 auto;white-space:nowrap}.association-quarter-export .button.is-disabled{cursor:not-allowed;opacity:.58;pointer-events:none}@media(max-width:700px){.association-quarter-export{align-items:stretch;display:grid}.association-quarter-export .button{width:100%}}
.association-mileage-kpis article{border-top:3px solid #2563eb}.association-mileage-card{margin:0 0 16px}.association-mileage-ranking{display:grid;gap:12px}.association-mileage-ranking>div{align-items:center;display:grid;gap:10px;grid-template-columns:26px minmax(0,1fr) auto}.association-mileage-ranking>div>div{display:grid;gap:4px;min-width:0}.association-mileage-ranking strong{font-size:12px}.association-mileage-ranking>div>strong{white-space:nowrap}.association-mileage-ranking i{background:#e2e8f0;border-radius:999px;height:9px;overflow:hidden}.association-mileage-ranking i b{background:linear-gradient(90deg,#2563eb,#0ea5e9);display:block;height:100%}.association-mileage-ranking small{color:var(--muted);font-size:10px}@media(max-width:700px){.association-mileage-ranking>div{grid-template-columns:24px minmax(0,1fr)}.association-mileage-ranking>div>strong{grid-column:2}.association-mileage-card .financial-card-heading{align-items:flex-start;gap:6px}.association-mileage-card .financial-card-heading>small{text-align:right}}
.association-request-overview{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.association-request-overview article{background:#fff;border:1px solid var(--line);border-left:4px solid #16a34a;border-radius:12px;display:grid;gap:5px;padding:16px}.association-request-overview article.is-new{border-left-color:#2563eb}.association-request-overview article.is-rejected{border-left-color:#ea580c}.association-request-overview article.is-amount{border-left-color:var(--primary)}.association-request-overview span{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.association-request-overview strong{font-size:23px}.association-request-overview small{color:var(--muted);font-size:11px}.association-request-types{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.association-request-type{background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--text);display:grid;gap:14px;grid-template-columns:50px minmax(0,1fr) auto;min-height:190px;padding:20px;text-decoration:none}.association-request-type.is-active{border-left:5px solid var(--primary);box-shadow:var(--shadow-soft);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.association-request-type.is-active:hover{border-color:var(--primary);box-shadow:0 14px 30px rgba(15,23,42,.09);transform:translateY(-2px)}.association-request-type.is-coming{background:#fafbfc;color:#667085}.association-request-type.has-data{border-left:5px solid #f59e0b}.association-request-type>span:nth-child(2){display:block}.association-request-type>span:nth-child(2)>small{color:var(--primary);display:block;font-size:10px;font-weight:900;letter-spacing:.05em;margin-bottom:6px}.association-request-type>span:nth-child(2)>strong{display:block;font-size:17px}.association-request-type p{color:var(--muted);font-size:13px;line-height:1.5;margin:8px 0 0}.association-request-type>b{align-self:start;background:#eef2f7;border-radius:999px;color:#475569;font-size:10px;padding:6px 9px;white-space:nowrap}.association-request-type.is-active>b{background:#fee2e2;color:#b91c1c}.association-request-type.has-data>b{background:#fef3c7;color:#92400e}.association-request-type>em{color:var(--primary);font-size:12px;font-style:normal;font-weight:900;grid-column:2}@media(max-width:850px){.association-request-overview,.association-request-types{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){.association-request-overview,.association-request-types{grid-template-columns:1fr}.association-request-type{grid-template-columns:44px minmax(0,1fr);min-height:0;padding:16px}.association-request-type>b{grid-column:2;justify-self:start}.association-request-type>em{grid-column:2}}
.association-reject-reason textarea{min-height:105px;resize:vertical;width:100%}.reimbursement-history-panel{background:#fff;border:1px solid var(--line);border-radius:14px;margin:16px 0;padding:18px}.reimbursement-history-panel>.section-heading{margin-bottom:14px}.reimbursement-history-summary{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}.reimbursement-history-summary article{background:#f8fafc;border:1px solid #e5e9ef;border-radius:10px;display:grid;gap:4px;padding:12px 14px}.reimbursement-history-summary span{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.reimbursement-history-summary strong{font-size:13px}.reimbursement-history-summary small{color:var(--muted);font-size:10px}.reimbursement-history-timeline{display:grid;gap:0;list-style:none;margin:0;padding:0}.reimbursement-history-timeline li{display:grid;gap:12px;grid-template-columns:18px minmax(0,1fr);min-height:64px;position:relative}.reimbursement-history-timeline li:before{background:#dce2e9;content:"";height:100%;left:7px;position:absolute;top:8px;width:2px}.reimbursement-history-timeline li:last-child:before{display:none}.reimbursement-history-timeline li>i{background:#64748b;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #cbd5e1;height:15px;margin-top:3px;position:relative;width:15px;z-index:1}.reimbursement-history-timeline .event-submitted>i{background:#2563eb}.reimbursement-history-timeline .event-approved>i{background:#16a34a}.reimbursement-history-timeline .event-rejected>i{background:#dc2626}.reimbursement-history-timeline li>div{padding-bottom:15px}.reimbursement-history-timeline header{align-items:center;display:flex;gap:12px;justify-content:space-between}.reimbursement-history-timeline header strong{font-size:13px}.reimbursement-history-timeline time{color:var(--muted);font-size:10px;white-space:nowrap}.reimbursement-history-timeline p{color:var(--muted);font-size:11px;margin:4px 0}.reimbursement-history-timeline blockquote{background:#fff7ed;border-left:3px solid #f97316;border-radius:0 8px 8px 0;color:#7c2d12;font-size:12px;line-height:1.45;margin:8px 0 0;padding:8px 10px}.history-amount-change{border-radius:999px;font-size:10px;margin-left:6px;padding:3px 6px}.history-amount-change.is-up{background:#dcfce7;color:#166534}.history-amount-change.is-down{background:#fee2e2;color:#991b1b}.reimbursement-history-empty{background:#f8fafc;border-radius:9px;color:var(--muted);font-size:12px;margin:0;padding:12px}@media(max-width:650px){.reimbursement-history-summary{grid-template-columns:1fr}.reimbursement-history-timeline header{align-items:flex-start;flex-direction:column;gap:2px}}
/* Platform announcements */
.announcement-recipient-picker input[type="checkbox"]{accent-color:var(--primary);appearance:auto;flex:0 0 18px;height:18px;margin:0;min-height:18px;min-width:18px;padding:0;width:18px}.announcement-recipient-groups legend label,.announcement-recipient{grid-template-columns:auto minmax(0,1fr)}.announcement-recipient-groups legend label input,.announcement-recipient>input{align-self:center}.announcement-recipient{min-height:54px}.announcement-recipient>span{min-width:0}.announcement-recipient strong,.announcement-recipient small{overflow-wrap:anywhere}
.announcement-recipient-picker{border:1px solid var(--line);border-radius:14px;padding:16px}.announcement-recipient-picker>header{align-items:center;display:flex;gap:14px;justify-content:space-between;margin-bottom:10px}.announcement-recipient-picker h2,.announcement-recipient-picker p{margin:0}.announcement-recipient-picker p{color:var(--muted);margin-top:3px}.announcement-recipient-picker>header>div:last-child{display:flex;gap:8px}.announcement-recipient-summary{background:#f8fafc;border-radius:9px;margin-bottom:12px;padding:10px 12px}.announcement-recipient-groups{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));max-height:520px;overflow:auto}.announcement-recipient-groups fieldset{border:1px solid var(--line);border-radius:12px;margin:0;padding:12px}.announcement-recipient-groups legend{align-items:center;display:flex;gap:12px;justify-content:space-between;padding:0 5px;width:calc(100% - 10px)}.announcement-recipient-groups legend label{align-items:center;display:flex;gap:7px;margin:0}.announcement-recipient-groups legend span{color:var(--muted);font-size:11px}.announcement-recipient-groups fieldset>div{display:grid;gap:6px}.announcement-recipient{align-items:center;background:#f8fafc;border-radius:9px;cursor:pointer;display:flex;gap:9px;margin:0;padding:9px}.announcement-recipient:hover{background:var(--primary-soft)}.announcement-recipient>span{display:grid;gap:2px}.announcement-recipient small{color:var(--muted)}
.platform-announcement{align-items:flex-start;background:linear-gradient(135deg,#fff7ed,#fff);border:1px solid #fdba74;border-left:5px solid #f97316;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.06);display:grid;gap:14px;grid-template-columns:42px minmax(0,1fr) auto;margin-bottom:22px;padding:17px 18px}.platform-announcement-icon{align-items:center;background:#ffedd5;border-radius:12px;color:#c2410c;display:flex;height:42px;justify-content:center;width:42px}.platform-announcement-icon svg{height:23px;width:23px}.platform-announcement small{color:#9a3412;font-size:10px;font-weight:900;letter-spacing:.05em}.platform-announcement h2{font-size:19px;margin:4px 0 6px}.platform-announcement p{color:var(--text);line-height:1.55;margin:0;max-width:900px}.platform-announcement a{align-items:center;color:var(--primary);display:inline-flex;font-weight:900;gap:6px;margin-top:10px;text-decoration:none}.platform-announcement a svg{height:16px;width:16px}.platform-announcement form{margin:0}.platform-announcement-admin-list{display:grid;gap:14px}.platform-announcement-admin-list>article{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);padding:20px}.platform-announcement-admin-list article>header,.platform-announcement-admin-list article>footer{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.platform-announcement-admin-list h2{font-size:21px;margin:8px 0 0}.platform-announcement-admin-list article>p{color:var(--muted);line-height:1.55}.platform-announcement-admin-list dl{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));margin:16px 0}.platform-announcement-admin-list dl>div{background:#f7f8fa;border-radius:10px;display:grid;gap:3px;padding:12px}.platform-announcement-admin-list dt{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.platform-announcement-admin-list dd{font-size:20px;font-weight:900;margin:0}.platform-announcement-admin-list footer{border-top:1px solid var(--line);padding-top:14px}.platform-announcement-admin-list footer .actions{gap:8px}.platform-announcement-admin-list form{margin:0}.platform-announcement-actions{gap:10px}.platform-announcement-form textarea{min-height:180px}
.water-module .water-heading>.actions{align-items:center;display:flex;flex-wrap:nowrap;gap:10px;justify-content:flex-end;width:auto}.water-module .water-heading>.actions .button{flex:0 0 auto;min-height:44px;padding:10px 16px;white-space:nowrap;width:auto}.water-module .water-heading>.actions .button svg{flex:0 0 auto;height:17px;width:17px}
.water-delete-panel{align-items:center;background:#fff7f7;border:1px solid #fecaca;display:flex;justify-content:space-between;margin-top:18px}.water-delete-panel h2,.water-delete-panel p{margin:0}.water-delete-panel h2{color:#991b1b;font-size:18px}.water-delete-panel p{color:var(--muted);margin-top:4px}.water-delete-panel form{margin:0}.water-delete-panel .button{gap:8px;white-space:nowrap}
@media(max-width:760px){.platform-announcement{grid-template-columns:38px 1fr}.platform-announcement form{grid-column:1/-1}.platform-announcement form .button{width:100%}.platform-announcement-admin-list dl{grid-template-columns:repeat(2,minmax(0,1fr))}.platform-announcement-admin-list article>footer{align-items:stretch;flex-direction:column}.platform-announcement-admin-list footer .actions{display:grid}.platform-announcement-actions{display:grid}.announcement-recipient-picker>header{align-items:stretch;flex-direction:column}.announcement-recipient-picker>header>div:last-child{display:grid;grid-template-columns:1fr 1fr}.announcement-recipient-groups{grid-template-columns:1fr;max-height:none}.water-module .water-heading>.actions{align-items:stretch;display:grid;grid-template-columns:1fr;width:100%}.water-module .water-heading>.actions .button{width:100%}}
@media(max-width:700px){.water-delete-panel{align-items:stretch;flex-direction:column;gap:14px}.water-delete-panel .button{width:100%}}
.announcement-recipient-groups legend label,.announcement-recipient{display:grid;grid-template-columns:auto minmax(0,1fr)}
.announcement-tenant-list{display:grid;gap:9px;grid-template-columns:repeat(3,minmax(0,1fr));max-height:480px;overflow:auto}.announcement-tenant{align-items:center;background:#f8fafc;border:1px solid transparent;border-radius:10px;cursor:pointer;display:grid;gap:10px;grid-template-columns:auto minmax(0,1fr);margin:0;min-height:52px;padding:11px 13px}.announcement-tenant:hover{background:var(--primary-soft);border-color:var(--line)}.announcement-tenant:has(input:checked){background:#fff5f5;border-color:var(--primary)}.announcement-tenant input[type="checkbox"]{accent-color:var(--primary);appearance:auto;height:18px;margin:0;min-height:18px;min-width:18px;padding:0;width:18px}@media(max-width:900px){.announcement-tenant-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.announcement-tenant-list{grid-template-columns:1fr;max-height:none}}
.app-shell main.container-wide.supervisor-container{max-width:1540px;width:min(1540px,calc(100% - 48px))}.supervisor-container .supervisor-create-form,.supervisor-container .supervisor-table-wrap{max-width:none;width:100%}@media(max-width:700px){.app-shell main.container-wide.supervisor-container{width:calc(100% - 24px)}}
/* Supervisor tenant list: related values share a column so long names and e-mails never collide. */
.supervisor-tenants-table{min-width:900px;table-layout:fixed}.supervisor-tenants-table th,.supervisor-tenants-table td{overflow-wrap:anywhere;white-space:normal}.supervisor-tenants-table th:nth-child(1){width:23%}.supervisor-tenants-table th:nth-child(2){width:24%}.supervisor-tenants-table th:nth-child(3){width:25%}.supervisor-tenants-table th:nth-child(4){width:11%}.supervisor-tenants-table th:nth-child(5){width:17%}.supervisor-tenant-identity strong,.supervisor-tenant-identity small{display:block}.supervisor-tenant-identity small{color:var(--muted);margin-top:6px}.supervisor-status-cell{vertical-align:middle}.supervisor-plan{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.supervisor-usage-cell{display:grid;gap:8px;grid-template-columns:1fr 1fr}.supervisor-usage-cell span{background:#f6f7f9;border-radius:9px;padding:8px;text-align:center}.supervisor-usage-cell strong,.supervisor-usage-cell small{display:block}.supervisor-actions-cell time{color:var(--muted);display:block;font-size:12px;margin-bottom:9px;text-align:right}.supervisor-row-actions{align-items:stretch;display:grid;grid-template-columns:1fr;justify-content:stretch}.supervisor-row-actions .button,.supervisor-actions-cell>.button,.supervisor-row-actions form,.supervisor-row-actions form .button{justify-content:center;width:100%}

/* Compact, scannable supervisor list. */
.supervisor-tenants-table{border-spacing:0 6px;min-width:0}.supervisor-tenants-table tbody td{padding:10px 12px;text-align:left;vertical-align:middle}.supervisor-tenants-table th:nth-child(1){width:22%}.supervisor-tenants-table th:nth-child(2){width:25%}.supervisor-tenants-table th:nth-child(3){width:25%}.supervisor-tenants-table th:nth-child(4){width:10%}.supervisor-tenants-table th:nth-child(5){width:18%}.supervisor-tenant-identity small{margin-top:3px}.supervisor-status-cell{display:grid;gap:7px;grid-template-columns:minmax(0,1fr) auto}.supervisor-status-cell>.onboarding-badge{justify-self:start}.supervisor-status-cell>.supervisor-reminder-check,.supervisor-status-cell>.supervisor-reminder-form{grid-column:1/-1;margin:0}.supervisor-plan{border:0;margin:0;padding:0;text-align:right}.supervisor-plan small{margin-top:3px!important}.supervisor-usage-cell{gap:4px}.supervisor-usage-cell span{background:transparent;border-left:1px solid var(--line);border-radius:0;padding:2px 5px}.supervisor-usage-cell span:first-child{border-left:0}.supervisor-usage-cell small{font-size:9px;margin-top:1px}.supervisor-actions-cell{width:auto!important}.supervisor-actions-cell time{font-size:10px;margin:0 0 5px;text-align:right}.supervisor-row-actions{display:flex;gap:5px}.supervisor-row-actions form{display:flex}.supervisor-row-actions .button,.supervisor-row-actions form .button{min-height:31px;padding:5px 8px}.supervisor-reminder-check label{font-size:10px}

@media(max-width:760px){.supervisor-table-wrap{margin-left:0;margin-right:0;overflow:visible;padding:0}.supervisor-section-heading{gap:12px}.supervisor-section-heading h2{font-size:20px}.supervisor-section-heading p{font-size:12px}.supervisor-tenants-table,.supervisor-tenants-table tbody,.supervisor-tenants-table tr,.supervisor-tenants-table td{display:block;min-width:0;width:100%}.supervisor-tenants-table{border-spacing:0}.supervisor-tenants-table thead{display:none}.supervisor-tenants-table tbody{display:grid;gap:10px}.supervisor-tenants-table tbody tr{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 4px 14px rgba(15,23,42,.05);overflow:hidden;padding:12px}.supervisor-tenants-table tbody td{border:0;padding:7px 0;text-align:left}.supervisor-tenants-table tbody td:before{color:var(--muted);content:attr(data-label);display:block;font-size:9px;font-weight:850;letter-spacing:.04em;margin-bottom:4px;text-transform:uppercase}.supervisor-tenants-table .supervisor-tenant-identity{border-bottom:1px solid var(--line);padding-top:0}.supervisor-tenant-identity strong{font-size:15px}.supervisor-tenants-table td:nth-child(2) strong{font-size:12px}.supervisor-status-cell{border-bottom:1px solid var(--line)!important;border-top:1px solid var(--line)!important;grid-template-columns:1fr auto;margin-top:4px}.supervisor-status-cell:before{grid-column:1/-1}.supervisor-status-cell>.supervisor-reminder-check,.supervisor-status-cell>.supervisor-reminder-form{grid-column:1/-1}.supervisor-usage-cell{display:grid!important;gap:3px 16px;grid-template-columns:auto auto;justify-content:start}.supervisor-usage-cell:before{grid-column:1/-1}.supervisor-usage-cell span{border:0;padding:0;text-align:left}.supervisor-usage-cell strong,.supervisor-usage-cell small{display:inline}.supervisor-usage-cell small{margin-left:3px}.supervisor-actions-cell{border-top:1px solid var(--line)!important;display:grid!important;gap:7px;grid-template-columns:auto minmax(0,1fr);margin-top:2px}.supervisor-actions-cell:before{display:none!important}.supervisor-actions-cell time{align-self:center;margin:0;text-align:left}.supervisor-row-actions{justify-self:end;width:min(100%,220px)}.supervisor-row-actions .button,.supervisor-row-actions form .button{min-height:34px}.supervisor-tenants-table tbody tr>td[colspan]{padding:20px;text-align:center}.supervisor-tenants-table tbody tr>td[colspan]:before{display:none}}
/* Tenant directory cards */
.tenant-directory{display:grid;gap:8px}.tenant-directory-card{align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid #d8dde5;border-radius:12px;box-shadow:0 3px 12px rgba(15,23,42,.04);display:grid;gap:16px;grid-template-columns:minmax(230px,1.45fr) minmax(220px,1fr) minmax(235px,.85fr) 150px;padding:13px 14px}.tenant-directory-card:hover{border-left-color:var(--primary);box-shadow:0 7px 18px rgba(15,23,42,.07)}.tenant-directory-main{display:grid;gap:7px;min-width:0}.tenant-directory-title,.tenant-directory-admin{min-width:0}.tenant-directory-title strong,.tenant-directory-title small,.tenant-directory-admin>small,.tenant-directory-admin>strong{display:block}.tenant-directory-title strong{font-size:14px;line-height:1.3}.tenant-directory-title small,.tenant-directory-admin>small,.tenant-directory-trial,.tenant-directory-meta small{color:var(--muted);font-size:10px}.tenant-directory-title small{margin-top:2px}.tenant-directory-admin{border-top:1px solid #eef0f3;padding-top:7px}.tenant-directory-admin>strong{font-size:12px;margin-top:2px;overflow-wrap:anywhere}.tenant-directory-admin .shared-admin-badge{margin-top:4px}.tenant-directory-status{align-content:center;display:grid;gap:6px;min-width:0}.tenant-directory-badges{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.tenant-directory-trial{display:block}.tenant-directory-reminders{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.tenant-directory-reminders form{margin:0}.tenant-directory-reminders .button{min-height:29px;padding:5px 8px}.tenant-directory-reminders .supervisor-reminder-check label{font-size:10px}.tenant-directory-meta{display:grid;grid-template-columns:repeat(3,1fr)}.tenant-directory-meta span{border-left:1px solid var(--line);padding:2px 8px;text-align:center}.tenant-directory-meta span:first-child{border-left:0}.tenant-directory-meta strong,.tenant-directory-meta small{display:block}.tenant-directory-meta strong{font-size:13px}.tenant-directory-actions{display:grid;gap:6px;grid-template-columns:1fr 1fr}.tenant-directory-actions form{margin:0}.tenant-directory-actions .button,.tenant-directory-actions form,.tenant-directory-actions form .button{justify-content:center;width:100%}.tenant-directory-actions .button{min-height:34px;padding:6px 9px}.tenant-directory-empty{background:#fff;border:1px dashed var(--line);border-radius:12px;color:var(--muted);margin:0;padding:28px;text-align:center}
@media(max-width:1050px){.tenant-directory-card{grid-template-columns:minmax(220px,1.2fr) minmax(210px,1fr) 140px}.tenant-directory-meta{grid-column:1/3;grid-row:2}.tenant-directory-actions{grid-column:3;grid-row:1/3}}
@media(max-width:700px){.supervisor-table-wrap{margin-left:0;margin-right:0;overflow:visible;padding:0}.tenant-directory{gap:10px}.tenant-directory-card{align-items:stretch;border-left:1px solid var(--line);border-top:4px solid #d8dde5;gap:12px;grid-template-columns:1fr;padding:14px}.tenant-directory-card:hover{border-left-color:var(--line);border-top-color:var(--primary)}.tenant-directory-main,.tenant-directory-status,.tenant-directory-meta,.tenant-directory-actions{grid-column:auto;grid-row:auto}.tenant-directory-title strong{font-size:16px}.tenant-directory-admin{padding-top:9px}.tenant-directory-status{border-top:1px solid var(--line);padding-top:10px}.tenant-directory-meta{background:#f7f8fa;border-radius:9px;padding:9px 4px}.tenant-directory-actions{grid-template-columns:1fr 1fr}.tenant-directory-actions .button{min-height:42px}.tenant-directory-reminders{align-items:stretch;display:grid}.tenant-directory-reminders .button{width:100%}}

/* Keep the supervisor directory columns visually aligned at desktop widths. */
.app-shell main.container-wide.supervisor-container {
    max-width: 1760px;
}

.tenant-directory-card {
    column-gap: 22px;
    grid-template-columns:
        minmax(280px, 1.35fr)
        minmax(300px, 1.15fr)
        minmax(400px, 1.25fr)
        150px;
}

.tenant-directory-main,
.tenant-directory-status,
.tenant-directory-meta,
.tenant-directory-actions {
    align-self: center;
}

.tenant-directory-status {
    align-content: initial;
}

.tenant-directory-meta {
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
}

.tenant-directory-meta span {
    align-content: center;
    display: grid;
    min-height: 42px;
    padding-inline: 10px;
}

.tenant-directory-meta strong {
    line-height: 1.25;
    white-space: nowrap;
}

.tenant-directory-actions {
    align-items: center;
}

@media (max-width: 1280px) {
    .tenant-directory-card {
        grid-template-columns: minmax(250px, 1.2fr) minmax(280px, 1fr) 150px;
        row-gap: 12px;
    }

    .tenant-directory-meta {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .tenant-directory-actions {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

@media (max-width: 700px) {
    .tenant-directory-card {
        gap: 12px;
        grid-template-columns: 1fr;
    }

    .tenant-directory-main,
    .tenant-directory-status,
    .tenant-directory-meta,
    .tenant-directory-actions {
        align-self: stretch;
        grid-column: auto;
        grid-row: auto;
    }

    .tenant-directory-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tenant-directory-meta span:nth-child(3) {
        border-left: 0;
    }
}
/* Responsive usage analytics refresh */
.usage-container{max-width:1480px}.usage-heading{align-items:flex-end;gap:18px}.usage-heading>div{min-width:0}.usage-heading p{max-width:760px}.usage-period-filter{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}.usage-period-filter select{border:0;min-height:36px;padding-bottom:6px;padding-top:6px}.usage-kpis{gap:10px;margin-bottom:14px}.usage-kpis article{border-top:0;border-left:4px solid var(--primary);gap:2px;min-height:108px;padding:15px 16px}.usage-kpis strong{font-size:27px}.usage-kpis small{font-size:11px}.usage-overview-grid{gap:14px;margin-bottom:22px}.usage-panel{padding:18px}.usage-panel-heading h2{font-size:18px}.usage-panel-heading p{font-size:12px;margin-bottom:15px}.usage-ranking{gap:10px}.usage-rank-row{gap:10px}.usage-device-list>div{padding:10px 12px}.usage-tenants-wrap{margin-top:0}.usage-directory{display:grid;gap:8px}.usage-directory-card{align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 12px rgba(15,23,42,.04);display:grid;gap:18px;grid-template-columns:minmax(210px,1fr) minmax(220px,.9fr) minmax(390px,1.45fr);padding:13px 15px}.usage-directory-card:hover{border-color:#cbd2dc;box-shadow:0 7px 18px rgba(15,23,42,.07)}.usage-directory-identity,.usage-directory-activity{display:grid;gap:5px;min-width:0}.usage-directory-identity>strong{font-size:14px;overflow-wrap:anywhere}.usage-directory-identity>div{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.usage-directory-activity{border-left:1px solid var(--line);padding-left:18px}.usage-directory-activity small,.usage-directory-activity span,.usage-directory-metrics small{color:var(--muted);font-size:10px}.usage-directory-activity>strong{font-size:12px}.usage-directory-activity span b{color:var(--text)}.usage-directory-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.usage-directory-metrics span{border-left:1px solid var(--line);padding:3px 8px;text-align:center}.usage-directory-metrics strong,.usage-directory-metrics small{display:block}.usage-directory-metrics strong{font-size:15px}.usage-status{padding:4px 7px}
@media(max-width:1050px){.usage-directory-card{grid-template-columns:minmax(210px,.8fr) minmax(240px,1fr)}.usage-directory-metrics{grid-column:1/-1}.usage-directory-metrics span:first-child{border-left:0}}
@media(max-width:700px){.usage-heading{align-items:stretch}.usage-heading .eyebrow{font-size:9px}.usage-heading h1{font-size:28px}.usage-period-filter{align-items:stretch;display:grid;gap:4px;padding:9px 11px}.usage-period-filter select{width:100%}.usage-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.usage-kpis article{min-height:104px;padding:13px}.usage-kpis strong{font-size:24px}.usage-kpis small{font-size:10px}.usage-overview-grid{gap:10px}.usage-panel{padding:15px}.usage-rank-row{grid-template-columns:minmax(0,1fr) 38px}.usage-rank-row .usage-bar{grid-column:1/-1}.usage-directory{gap:10px}.usage-directory-card{align-items:stretch;gap:11px;grid-template-columns:1fr;padding:14px}.usage-directory-activity,.usage-directory-metrics{grid-column:auto}.usage-directory-activity{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:10px}.usage-directory-metrics{background:#f7f8fa;border-radius:9px;grid-template-columns:repeat(2,minmax(0,1fr));padding:6px}.usage-directory-metrics span{border-left:0;padding:7px}.usage-directory-metrics span:nth-child(even){border-left:1px solid var(--line)}.usage-directory-metrics span:nth-child(n+3){border-top:1px solid var(--line)}}
.water-official-price{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;display:grid;gap:5px;margin-bottom:14px;padding:15px}.water-official-price>span{color:#1d4ed8;font-size:11px;font-weight:900;text-transform:uppercase}.water-official-price>strong{color:#172033;font-size:25px}.water-official-price>small{color:#64748b;line-height:1.5}
.water-overview-kpis{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:24px}.water-overview-kpis article{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 7px 22px rgba(15,23,42,.05);display:grid;gap:9px;padding:18px}.water-overview-kpis span{color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}.water-overview-kpis strong{font-size:28px}.water-overview-kpis small{color:var(--muted);font-size:14px}.water-dashboard-section{margin-top:26px}.water-dashboard-section>header{align-items:end;display:flex;gap:18px;justify-content:space-between;margin-bottom:14px}.water-dashboard-section>header h2,.water-dashboard-section>header p{margin:0}.water-dashboard-section>header h2{font-size:24px;margin-top:4px}.water-dashboard-section>header p{color:var(--muted);margin-top:5px}.water-dashboard-charts{display:grid;gap:15px;grid-template-columns:repeat(2,minmax(0,1fr))}.water-dashboard-chart{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 7px 22px rgba(15,23,42,.05);padding:18px}.water-dashboard-chart>header{align-items:start;display:flex;justify-content:space-between}.water-dashboard-chart h3,.water-dashboard-chart p{margin:0}.water-dashboard-chart p{color:var(--muted);font-size:12px;margin-top:4px}.water-dashboard-chart>header>strong{color:var(--primary);font-size:18px}.water-mini-chart{align-items:end;display:grid;gap:6px;grid-template-columns:repeat(12,minmax(22px,1fr));height:220px;margin-top:20px}.water-mini-chart>div{align-items:center;display:grid;grid-template-rows:18px minmax(0,1fr) 20px 17px;height:100%;min-width:0;text-align:center}.water-mini-chart .value,.water-mini-chart small{color:var(--muted);font-size:9px;overflow:hidden}.water-mini-chart i{align-items:end;background:#f1f3f6;border-radius:6px 6px 2px 2px;display:flex;height:100%;overflow:hidden;width:100%}.water-mini-chart i span{background:linear-gradient(180deg,#2563eb,#1e40af);display:block;width:100%}.water-mini-chart.is-trips i span{background:linear-gradient(180deg,#ef0012,#9f0712)}.water-mini-chart b{font-size:10px;margin-top:4px}.water-activity-list{display:grid;gap:10px}.water-activity-list>article{align-items:center;background:#fff;border:1px solid var(--line);border-radius:13px;display:grid;gap:16px;grid-template-columns:180px minmax(220px,1fr) minmax(260px,.7fr) 100px;padding:15px 17px}.water-activity-number,.water-activity-list>article>div:nth-child(2){display:grid;gap:5px}.water-activity-list>article>div:nth-child(2)>span,.water-activity-list small{color:var(--muted)}.water-activity-list dl{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:0}.water-activity-list dt,.water-activity-label{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.water-activity-list dd{font-weight:800;margin:3px 0 0}.water-dashboard-welcome{align-items:center;background:linear-gradient(135deg,#fff 20%,#fff5f5);border:1px solid #fecaca;border-left:5px solid var(--primary);border-radius:18px;box-shadow:0 12px 34px rgba(15,23,42,.07);display:grid;gap:22px;grid-template-columns:68px minmax(0,1fr) auto;padding:28px}.water-dashboard-welcome-icon{align-items:center;background:var(--primary);border-radius:17px;color:#fff;display:flex;height:64px;justify-content:center;width:64px}.water-dashboard-welcome-icon svg{height:31px;width:31px}.water-dashboard-welcome h2{font-size:27px;margin:6px 0}.water-dashboard-welcome p{color:var(--muted);line-height:1.55;margin:0;max-width:760px}.water-dashboard-welcome .actions{align-items:stretch;display:grid;gap:8px}.water-dashboard-first-steps{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}.water-dashboard-first-steps article{align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;display:grid;gap:12px;grid-template-columns:38px 1fr;padding:16px}.water-dashboard-first-steps b{align-items:center;background:var(--primary-soft);border-radius:50%;color:var(--primary);display:flex;height:38px;justify-content:center}.water-dashboard-first-steps div{display:grid;gap:4px}.water-dashboard-first-steps span{color:var(--muted);font-size:12px}@media(max-width:1000px){.water-overview-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.water-dashboard-charts{grid-template-columns:1fr}.water-dashboard-welcome{grid-template-columns:56px 1fr}.water-dashboard-welcome .actions{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.water-activity-list>article{grid-template-columns:150px 1fr}.water-activity-list dl{grid-column:1/-1}}@media(max-width:650px){.water-overview-kpis,.water-dashboard-first-steps{grid-template-columns:1fr}.water-dashboard-welcome{grid-template-columns:1fr;padding:20px}.water-dashboard-welcome .actions{grid-template-columns:1fr}.water-mini-chart{gap:3px;overflow-x:auto}.water-mini-chart small{display:none}.water-activity-list>article{grid-template-columns:1fr}.water-activity-list dl{grid-column:auto}.water-dashboard-section>header{align-items:stretch;flex-direction:column}}
.help-container{max-width:1500px}.help-hero{align-items:center;background:linear-gradient(135deg,#15171b,#262b33);border-radius:24px;color:#fff;display:flex;justify-content:space-between;margin-bottom:28px;min-height:250px;overflow:hidden;padding:38px 44px;position:relative}.help-hero:after{background:var(--primary);border-radius:50%;content:"";height:260px;opacity:.92;position:absolute;right:-95px;top:-105px;width:260px}.help-hero-copy{max-width:720px;position:relative;z-index:2}.help-version{color:#ff9ca4;display:block;font-size:12px;font-weight:900;letter-spacing:.09em;margin-bottom:10px;text-transform:uppercase}.help-hero h1{color:#fff;font-size:clamp(30px,4vw,48px);letter-spacing:-.035em;margin:0 0 8px}.help-hero p{color:#cbd0d8;font-size:17px;margin:0 0 22px}.help-hero-icon{color:#fff;opacity:.96;position:relative;right:28px;z-index:2}.help-hero-icon svg{height:90px;stroke-width:1.3;width:90px}.help-search{align-items:center;background:#fff;border-radius:13px;display:flex;max-width:620px;padding:0 15px}.help-search>span:first-child{color:#697386;display:inline-flex}.help-search svg{height:22px;width:22px}.help-search input{background:transparent;border:0;box-shadow:none;color:var(--text);font:inherit;min-height:54px;outline:0;padding:10px 12px;width:100%}.help-search-status{font-size:13px!important;margin:8px 2px 0!important;min-height:18px}.help-layout{align-items:start;display:grid;gap:28px;grid-template-columns:250px minmax(0,1fr)}.help-toc{background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px;position:sticky;top:92px}.help-toc>strong{display:block;font-size:12px;letter-spacing:.08em;margin:2px 10px 10px;text-transform:uppercase}.help-toc nav{display:grid;gap:3px}.help-toc a{align-items:center;border-radius:9px;color:var(--text);display:flex;font-size:14px;font-weight:750;gap:9px;padding:9px 10px;text-decoration:none}.help-toc a:hover{background:#f4f5f7;color:var(--primary)}.help-toc a span{color:var(--muted);font-size:10px;font-weight:900}.help-content{display:grid;gap:22px;min-width:0}.help-section{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;scroll-margin-top:90px}.help-section[hidden]{display:none}.help-section-heading{align-items:center;display:flex;gap:14px;margin-bottom:24px}.help-section-heading>span{align-items:center;background:#fff0f1;border-radius:11px;color:var(--primary);display:inline-flex;font-size:12px;font-weight:900;height:42px;justify-content:center;min-width:42px}.help-section-heading>div{flex:1}.help-section-heading h2{font-size:25px;margin:0 0 3px}.help-section-heading p{color:var(--muted);margin:0}.help-section-heading .button{margin-left:auto;white-space:nowrap}.help-card-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}.help-card-grid-two{grid-template-columns:repeat(2,1fr)}.help-card{background:#f8f9fa;border:1px solid #e8eaee;border-radius:14px;display:flex;flex-direction:column;min-height:190px;padding:20px}.help-card h3{font-size:17px;margin:13px 0 7px}.help-card p{color:var(--muted);line-height:1.55;margin:0}.help-card a{align-items:center;color:var(--primary);display:inline-flex;font-size:13px;font-weight:850;gap:5px;margin-top:auto;padding-top:14px;text-decoration:none}.help-card a svg{height:16px;width:16px}.help-card-icon{align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--primary);display:inline-flex;height:40px;justify-content:center;width:40px}.help-card-icon svg{height:21px;width:21px}.help-tip,.help-warning{align-items:flex-start;border-radius:13px;display:flex;gap:12px;margin-top:18px;padding:15px 17px}.help-tip{background:#edf6ff;color:#1f4f7d}.help-tip svg{flex:0 0 auto;height:22px;width:22px}.help-tip p,.help-warning p{margin:0}.help-warning{background:#fff7df;color:#715412;display:block}.help-warning strong{display:block;margin-bottom:4px}.help-steps{display:grid;gap:2px;list-style:none;margin:0;padding:0}.help-steps li{display:grid;gap:15px;grid-template-columns:38px 1fr;padding:15px 4px;position:relative}.help-steps li>span{align-items:center;background:var(--text);border-radius:50%;color:#fff;display:flex;font-size:13px;font-weight:900;height:34px;justify-content:center;width:34px}.help-steps h3{font-size:17px;margin:0 0 5px}.help-steps p,.help-prose p{color:var(--muted);line-height:1.65;margin:0}.help-prose{display:grid;gap:12px}.help-accordion{display:grid;gap:9px}.help-accordion details{border:1px solid var(--line);border-radius:12px;overflow:hidden}.help-accordion summary{cursor:pointer;font-weight:850;list-style:none;padding:16px 18px;position:relative}.help-accordion summary:after{content:"+";font-size:21px;position:absolute;right:18px;top:12px}.help-accordion details[open] summary:after{content:"−"}.help-accordion details>div{border-top:1px solid var(--line);color:var(--muted);line-height:1.6;padding:15px 18px}.help-accordion details p{margin:0}.help-accordion details a{color:var(--primary);display:inline-block;font-weight:800;margin-top:10px}.help-role-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}.help-role-grid article{background:#f8f9fa;border-left:4px solid var(--primary);border-radius:0 10px 10px 0;padding:17px}.help-role-grid p{color:var(--muted);line-height:1.5;margin:7px 0 0}.help-note{background:#f2f4f7;border-radius:10px;color:var(--muted);margin:14px 0 0;padding:14px 16px}.help-empty{background:#fff;border:1px dashed var(--line);border-radius:20px;padding:55px 20px;text-align:center}.help-empty svg{color:var(--muted);height:40px;width:40px}.help-empty h2{margin:12px 0 4px}.help-empty p{color:var(--muted);margin:0}@media(max-width:980px){.help-layout{grid-template-columns:1fr}.help-toc{position:static}.help-toc nav{grid-template-columns:repeat(3,1fr)}.help-card-grid{grid-template-columns:1fr}.help-card{min-height:0}}@media(max-width:700px){.help-hero{border-radius:17px;min-height:0;padding:26px 20px}.help-hero-icon{display:none}.help-hero p{font-size:15px}.help-toc nav{grid-template-columns:1fr 1fr}.help-section{border-radius:15px;padding:20px 16px}.help-section-heading{align-items:flex-start;flex-wrap:wrap}.help-section-heading .button{margin-left:56px}.help-role-grid,.help-card-grid-two{grid-template-columns:1fr}}
.crew-allocation .allocation-heading{display:grid;grid-template-columns:minmax(0,1fr) auto auto}.crew-allocation .allocation-bulk{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}.crew-allocation .allocation-bulk label{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center}.crew-allocation .allocation-row{grid-template-columns:minmax(230px,280px) minmax(0,1fr) 80px}.crew-allocation .allocation-pick{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px}.crew-allocation .allocation-bulk-check{appearance:auto;accent-color:var(--primary);border:0;box-shadow:none;height:18px;min-height:18px;min-width:18px;padding:0;width:18px}.crew-allocation .allocation-pick span{overflow:visible;text-overflow:clip;white-space:normal}.crew-allocation .allocation-role-slot{min-width:0}@media(max-width:720px){.crew-allocation .allocation-heading{grid-template-columns:1fr}.crew-allocation .allocation-bulk{grid-template-columns:1fr}.crew-allocation .allocation-bulk label{grid-template-columns:1fr}.crew-allocation .allocation-row{grid-template-columns:minmax(0,1fr) auto}}
.custom-units[hidden]{display:none!important}.custom-unit-toggle-option input[type="checkbox"]{appearance:auto;accent-color:var(--primary)}
.crew-allocation .allocation-bulk{grid-template-columns:minmax(0,1fr) auto auto}@media(max-width:720px){.crew-allocation .allocation-bulk{grid-template-columns:1fr}.crew-allocation .allocation-bulk .button{width:100%}}
.location-distance-fields .location-municipality-field,.location-distance-fields .location-settlement-field{grid-column:auto}.location-distance-fields .location-field{grid-column:1/-1}@media(max-width:900px){.location-distance-fields .location-municipality-field,.location-distance-fields .location-settlement-field{grid-column:auto}}@media(max-width:430px){.location-distance-fields .location-municipality-field,.location-distance-fields .location-settlement-field{grid-column:1}}
.location-municipality-notice{grid-column:1/-1;margin:0}.location-municipality-notice p{margin:4px 0 10px}
.municipality-setup-notice{align-items:center;background:linear-gradient(135deg,#fff 0%,#fff7f7 100%);border:1px solid #f4b9be;border-left:5px solid var(--primary);border-radius:16px;box-shadow:0 12px 30px rgba(15,23,42,.07);display:grid;gap:18px;grid-template-columns:54px minmax(0,1fr) auto;margin:0 0 22px;padding:20px 22px}.municipality-setup-icon{align-items:center;background:var(--primary-soft);border-radius:14px;color:var(--primary);display:flex;height:52px;justify-content:center;width:52px}.municipality-setup-icon svg{height:27px;width:27px}.municipality-setup-copy{display:grid;gap:4px}.municipality-setup-copy .eyebrow{color:var(--primary);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.municipality-setup-copy h2{font-size:19px;line-height:1.2;margin:0}.municipality-setup-copy p{color:var(--muted);line-height:1.45;margin:0}.municipality-setup-actions{align-items:center;display:flex;gap:9px}.municipality-setup-actions form{margin:0}.municipality-setup-actions .button{min-height:42px;white-space:nowrap}.municipality-setup-notice-compact{box-shadow:none;margin:0;padding:16px 18px}.municipality-setup-notice-compact .municipality-setup-icon{height:46px;width:46px}.municipality-setup-notice-compact .municipality-setup-copy h2{font-size:16px}@media(max-width:900px){.municipality-setup-notice{align-items:start;grid-template-columns:48px 1fr}.municipality-setup-actions{grid-column:2;flex-wrap:wrap}}@media(max-width:600px){.municipality-setup-notice{grid-template-columns:42px 1fr;padding:16px}.municipality-setup-icon{border-radius:11px;height:42px;width:42px}.municipality-setup-icon svg{height:22px;width:22px}.municipality-setup-actions{grid-column:1/-1;display:grid}.municipality-setup-actions .button{width:100%}.municipality-setup-actions form,.municipality-setup-actions form .button{width:100%}}
.location-distance-fields{align-items:end;gap:6px 10px;grid-template-columns:minmax(170px,.8fr) minmax(240px,1.4fr) 96px auto}.location-distance-fields .location-field{grid-column:1/-1;margin-top:2px}.location-distance-fields .location-field>small{color:var(--muted);font-size:.7rem;font-weight:600;margin-left:5px}.location-distance-fields .billable-distance-field input{text-align:right}.location-distance-fields .distance-calculate-button{min-height:42px;padding-inline:14px}.location-distance-fields .location-distance-hint{grid-column:1/-1;margin:0;text-align:right}.location-distance-fields .compact-readonly-field{grid-column:3/5}@media(max-width:850px){.location-distance-fields{grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr) 90px}.location-distance-fields .distance-calculate-button{grid-column:3}.location-distance-fields .compact-readonly-field{grid-column:2/4}}@media(max-width:650px){.location-distance-fields{grid-template-columns:1fr 110px}.location-distance-fields .location-municipality-field,.location-distance-fields .location-settlement-field{grid-column:auto}.location-distance-fields .location-settlement-field{grid-column:1/-1}.location-distance-fields .distance-calculate-button{grid-column:2}.location-distance-fields .compact-readonly-field{grid-column:1/-1}}@media(max-width:430px){.location-distance-fields{grid-template-columns:1fr}.location-distance-fields .location-municipality-field,.location-distance-fields .location-settlement-field,.location-distance-fields .distance-calculate-button{grid-column:1}.location-distance-fields .billable-distance-field input{text-align:left}}

/* Navigation must remain usable on short desktop and mobile viewports. */
.app-sidebar .sidebar-nav {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-color: rgba(255,255,255,.32) transparent;
    scrollbar-width: thin;
}
.app-sidebar .sidebar-nav::-webkit-scrollbar { width: 6px; }
.app-sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }
@media (min-width:981px) and (max-height:900px) {
    .sidebar-logo { min-height: 132px; }
    .sidebar-logo img { height: 150px; width: 150px; transform: translate(6px,-24px); }
    .app-sidebar .sidebar-nav { margin-top: -10px; }
    .sidebar-nav a { min-height: 38px; padding-block: 7px; }
}
@media (min-width:981px) and (max-height:720px) {
    .sidebar-logo { min-height: 88px; }
    .sidebar-logo img { height: 112px; width: 112px; transform: translate(4px,-20px); }
    .app-sidebar { padding-block: 10px; }
    .app-sidebar .sidebar-nav { margin-top: -6px; }
    .sidebar-nav a { min-height: 35px; padding-block: 5px; }
}
@media (max-width:980px) {
    .mobile-menu-panel {
        max-height: calc(100dvh - 84px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* Requests hub: clearer ownership, status and next actions. */
.requests-heading{margin-bottom:22px}.requests-heading>div{max-width:940px}.requests-heading .eyebrow{color:var(--primary);display:block;margin-bottom:8px}.requests-heading h1{line-height:1.08;margin-bottom:9px}.requests-heading h1 span{color:#64748b;display:inline;font-size:.55em;font-weight:800;white-space:nowrap}.requests-heading p{font-size:15px;max-width:720px}.requests-summary{gap:12px;margin-bottom:32px}.requests-summary article{border:0;border-top:4px solid #94a3b8;box-shadow:0 9px 24px rgba(15,23,42,.06);min-height:112px;padding:17px 18px}.requests-summary article.is-attention{border-top-color:#f59e0b}.requests-summary article.is-submitted{border-top-color:#2563eb}.requests-summary article.is-approved{border-top-color:#16a34a}.requests-summary article.is-attention strong{color:#b45309}.requests-summary article.is-submitted strong{color:#1d4ed8}.requests-summary article.is-approved strong{color:#15803d}.requests-summary strong{font-size:2rem;line-height:1}.requests-summary small{line-height:1.35}.requests-section-heading{align-items:end;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;margin-bottom:16px;padding-bottom:13px}.requests-section-heading h2{font-size:22px;margin:3px 0}.requests-section-heading p{color:var(--muted);font-size:13px;margin:0}.requests-grid{gap:16px}.request-type-card{align-content:start;min-height:210px;padding:21px}.request-type-card.is-active{background:linear-gradient(135deg,#fff 0%,#fffafa 100%);border-left-width:6px}.request-type-card.is-active .request-type-copy strong{font-size:18px}.request-type-card.is-coming{border-style:dashed;box-shadow:none;opacity:.78}.request-type-card.is-coming .request-type-icon{background:#eef1f5;color:#64748b}.request-type-copy p{max-width:520px}.request-type-meta{align-self:end;border-top:1px solid var(--line);padding-top:13px}.request-type-meta em{align-items:center;color:var(--muted);display:flex;gap:12px}.request-type-meta em>span{align-items:center;background:var(--primary);border-radius:9px;color:#fff;display:inline-flex;gap:7px;min-height:36px;padding:8px 11px}.request-type-meta em svg{height:15px;width:15px}.request-type-status{background:#eef1f5;border:1px solid #dfe3e8}.request-type-card.is-coming:after{bottom:18px;color:#94a3b8;content:'Še ni na voljo';font-size:11px;font-weight:800;position:absolute;right:18px}@media(max-width:850px){.requests-heading h1 span{display:block;font-size:.58em;margin-top:6px;white-space:normal}.requests-summary{margin-bottom:24px}}@media(max-width:520px){.requests-heading h1{font-size:28px}.requests-summary{grid-template-columns:1fr}.requests-summary article{min-height:0}.requests-section-heading h2{font-size:20px}.request-type-card{min-height:0}.request-type-meta{align-items:stretch;flex-direction:column}.request-type-meta em{justify-content:space-between;margin-left:0;width:100%}.request-type-card.is-coming:after{display:none}}

/* Dashboard municipality reminder: compact, readable and action-oriented. */
.dashboard-municipality-notice{align-items:center;background:linear-gradient(110deg,#fff 0%,#fff 64%,#fff5f5 100%);border:1px solid #f3c4c8;border-left:6px solid var(--primary);border-radius:16px;box-shadow:0 10px 28px rgba(15,23,42,.07);display:grid;gap:18px;grid-template-columns:54px minmax(280px,1fr) auto;margin:0 0 24px;padding:18px 20px}.dashboard-municipality-notice .municipality-setup-icon{align-items:center;background:var(--primary);border-radius:13px;color:#fff;display:flex;height:50px;justify-content:center;width:50px}.dashboard-municipality-notice .municipality-setup-icon svg{height:25px;width:25px}.dashboard-municipality-notice .municipality-setup-copy{display:grid;gap:4px;min-width:0}.dashboard-municipality-notice .municipality-setup-copy .eyebrow{color:var(--primary);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dashboard-municipality-notice .municipality-setup-copy h2{font-size:18px;line-height:1.25;margin:0}.dashboard-municipality-notice .municipality-setup-copy p{color:var(--muted);font-size:13px;line-height:1.45;margin:0;max-width:720px}.dashboard-municipality-notice .municipality-setup-actions{align-items:center;display:flex;gap:8px}.dashboard-municipality-notice .municipality-setup-actions form{margin:0}.dashboard-municipality-notice .municipality-setup-actions .button{align-items:center;display:inline-flex;gap:7px;justify-content:center;min-height:42px;white-space:nowrap}.dashboard-municipality-notice .municipality-setup-actions .button svg{height:17px;width:17px}@media(max-width:1050px){.dashboard-municipality-notice{align-items:start;grid-template-columns:50px minmax(0,1fr)}.dashboard-municipality-notice .municipality-setup-actions{grid-column:2;flex-wrap:wrap}}@media(max-width:620px){.dashboard-municipality-notice{gap:12px;grid-template-columns:42px minmax(0,1fr);padding:15px}.dashboard-municipality-notice .municipality-setup-icon{height:40px;width:40px}.dashboard-municipality-notice .municipality-setup-copy h2{font-size:16px}.dashboard-municipality-notice .municipality-setup-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr}.dashboard-municipality-notice .municipality-setup-actions form,.dashboard-municipality-notice .municipality-setup-actions .button{width:100%}}

/* Končna poravnava naslovnih gumbov: fiksna višina brez vpliva osnovnice pisave. */
.water-module .water-heading>.actions .button,.cashier-module .page-heading-actions .button{align-items:center;display:inline-flex;height:44px;justify-content:center;line-height:1;margin:0;min-height:44px;padding:0 16px}
.button>.button-label{align-items:center;align-self:stretch;display:inline-flex;height:100%;justify-content:center;line-height:1;margin:0;padding:0}

/* Prosti besedilni vnosi se v aplikaciji vodijo z velikimi črkami. */
.is-uppercase-input,[data-uppercase]{text-transform:uppercase}

.cashier-invoice-bottom-actions{align-items:center;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:22px;padding:22px 0 6px}
@media(max-width:620px){.cashier-invoice-bottom-actions{align-items:stretch;flex-direction:column}.cashier-invoice-bottom-actions .button{width:100%}}
.test-delete-button{border-style:dashed}
.expense-type-official{background:#e8f1ff;color:#245da8}.expense-type-unofficial{background:#fff1d6;color:#8a5a00}.status-received{background:#e8f7ed;color:#18753a}.receipt-total strong{color:#1f7a4b}
.document-mail-form{margin-bottom:24px}.document-mail-attachment{align-items:center;background:#f6f7f9;border:1px solid var(--line);border-radius:12px;display:flex;gap:12px;padding:14px 16px}.document-mail-attachment svg{height:24px;width:24px}.document-mail-attachment span{display:grid;gap:3px}.document-mail-attachment small{color:var(--muted)}.document-mail-history article{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:13px 0}.document-mail-history article:last-child{border-bottom:0}.document-mail-history article>div{display:grid;gap:4px}.document-mail-history small{color:var(--muted)}
.cashier-analytics-tabs{align-items:center;background:#edf0f4;border-radius:12px;display:flex;gap:4px;margin:0 0 22px;padding:5px;width:max-content}.cashier-analytics-tabs a{border-radius:9px;color:#536071;font-size:13px;font-weight:800;padding:10px 15px}.cashier-analytics-tabs a.is-active{background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.08);color:#b21f2d}.cashier-analytics-flags{align-items:center;display:flex;gap:10px;margin:0 0 22px}.cashier-analytics-flags>span{background:#eef1f5;border-radius:9px;color:#536071;font-size:12px;padding:9px 12px}.cashier-analytics-flags>a{align-items:center;color:#b21f2d;display:flex;font-size:13px;font-weight:800;gap:6px;margin-left:auto}.cashier-analytics-flags svg{height:15px;width:15px}.cashier-analytics-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:16px}.analytics-source-row{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:13px 0}.analytics-source-row:last-child{border-bottom:0}.analytics-source-row>span{display:grid;gap:3px}.analytics-source-row small{color:var(--muted)}@media(max-width:760px){.cashier-analytics-tabs{overflow-x:auto;width:100%}.cashier-analytics-tabs a{white-space:nowrap}.cashier-analytics-flags{align-items:flex-start;flex-wrap:wrap}.cashier-analytics-flags>a{margin-left:0;width:100%}.cashier-analytics-grid{grid-template-columns:1fr}}
.payout-filter{display:flex;align-items:end;gap:12px;margin-bottom:28px}.payout-filter label{min-width:180px}.payout-section{margin-top:28px}.payout-section>header{margin-bottom:14px}.payout-section>header h2{margin-bottom:4px}.payout-section>header p{margin:0;color:var(--muted)}.payout-driver-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.payout-driver-grid article{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:20px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.payout-driver-grid article small{color:#b21f2d;font-weight:800}.payout-driver-grid article h3{margin:4px 0}.payout-driver-grid article p{margin:0;color:var(--muted)}.payout-driver-grid article>strong{font-size:24px}.payout-driver-grid article form{grid-column:1/-1}.status-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase}.status-prepared{background:#eef2f6;color:#52606d}.status-paid{background:#e8f7ed;color:#18753a}.status-cancelled{background:#fdebec;color:#a51d2c}.payout-total{display:flex;align-items:baseline;gap:14px;padding:18px 0 24px}.payout-total span{font-weight:700}.payout-total strong{font-size:30px;color:#b21f2d}.payout-total small{color:var(--muted)}.danger-zone{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}@media(max-width:800px){.payout-driver-grid{grid-template-columns:1fr}.payout-filter{align-items:stretch;flex-direction:column}.payout-filter label{min-width:0}}
.membership-filters{grid-template-columns:minmax(130px,160px) minmax(260px,1fr) auto}.membership-filters.is-auto-filter:not(.has-filter-reset){grid-template-columns:minmax(130px,160px) minmax(260px,1fr)}.membership-filters .filter-search{grid-column:auto}.membership-results{margin-top:0}.membership-kpis article{border-top:4px solid #94a3b8}.membership-kpis article.is-members{border-top-color:#64748b}.membership-kpis article.is-paid{border-top-color:#16a34a}.membership-kpis article.is-debt{border-top-color:#ef4444}.membership-kpis article.is-amount{border-top-color:var(--primary)}.membership-kpis article.is-paid strong{color:#15803d}.membership-kpis article.is-debt strong{color:#b91c1c}.membership-kpis article.is-amount strong{color:var(--primary)}@media(max-width:760px){.membership-filters,.membership-filters.is-auto-filter:not(.has-filter-reset){grid-template-columns:1fr}.membership-filters .filter-actions{width:100%}}
.payout-driver-grid article{border-color:var(--line)}.danger-zone{border-top-color:var(--line)}
.cashier-water-tabs{align-items:center;background:#edf0f4;border-radius:14px;display:flex;gap:5px;margin:0 0 26px;padding:5px;width:max-content}.cashier-water-tabs a{align-items:center;border-radius:10px;color:#52606d;display:flex;font-size:13px;font-weight:800;gap:8px;padding:11px 16px}.cashier-water-tabs a svg{height:17px;width:17px}.cashier-water-tabs a.is-active{background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.09);color:#b21f2d}.cashier-subheading{margin:0 0 18px}.cashier-subheading h2{font-size:25px;margin:4px 0}.cashier-subheading p{color:var(--muted);margin:0}@media(max-width:620px){.cashier-water-tabs{align-items:stretch;flex-direction:column;width:100%}.cashier-water-tabs a{justify-content:center}}
.danger-zone{align-items:center;display:flex;flex-wrap:wrap;gap:10px}

/* Enotna končna poravnava vseh standardnih gumbov. */
.button{align-items:center!important;justify-content:center!important;line-height:1!important;text-align:center!important}
.button>span{position:relative;top:-1px}
.button>svg+span{display:inline-block}
.cashier-module-icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}

/* Water-driver QR terminal */
.water-terminal-admin {
    align-items: start;
    display: grid;
    gap: 18px 28px;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    margin: 0;
    padding: 26px;
}
.water-terminal-admin > div:first-child {
    grid-column: 1 / -1;
}
.water-terminal-admin > div:first-child h2 {
    margin: 0 0 6px;
}
.water-terminal-admin > div:first-child p {
    color: var(--muted);
    margin: 0;
}
.water-terminal-admin > img {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    grid-column: 1;
    grid-row: 2 / span 3;
    height: auto;
    max-width: 100%;
    padding: 12px;
    width: 360px;
}
.water-terminal-admin > .button {
    align-self: end;
    grid-column: 2;
    justify-self: start;
}
.water-terminal-admin > small {
    background: #f7f8fa;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    display: block;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    grid-column: 2;
    line-height: 1.5;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 12px 14px;
}
.water-terminal-admin > .actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    grid-column: 2;
    justify-content: flex-start;
}
.water-terminal-admin > .actions form {
    margin: 0;
}
.water-terminal-admin > .actions .button {
    min-height: 42px;
    white-space: nowrap;
}
.water-terminal-admin > .alert,
.water-terminal-admin > form {
    grid-column: 1 / -1;
    margin: 0;
}
@media (max-width: 760px) {
    .water-terminal-admin {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px;
    }
    .water-terminal-admin > div:first-child,
    .water-terminal-admin > img,
    .water-terminal-admin > .button,
    .water-terminal-admin > small,
    .water-terminal-admin > .actions,
    .water-terminal-admin > .alert,
    .water-terminal-admin > form {
        grid-column: 1;
        grid-row: auto;
    }
    .water-terminal-admin > img {
        justify-self: center;
    }
    .water-terminal-admin > .button,
    .water-terminal-admin > .actions,
    .water-terminal-admin > .actions form,
    .water-terminal-admin > .actions .button,
    .water-terminal-admin > form .button {
        width: 100%;
    }
    .water-terminal-admin > .actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media print {
    .water-terminal-admin {
        border: 0;
        box-shadow: none;
        display: block;
        padding: 0;
        text-align: center;
    }
    .water-terminal-admin > img {
        border: 0;
        margin: 20px auto;
        padding: 0;
    }
    .water-terminal-admin > .button,
    .water-terminal-admin > small,
    .water-terminal-admin > .actions {
        display: none !important;
    }
}
/* Mobile field capture: intentionally large controls for stressful outdoor use. */
.field-capture{max-width:720px;margin:0 auto 5rem}.field-capture-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.field-capture-head small{color:var(--muted, #64748b);font-weight:700;text-transform:uppercase}.field-capture-head h1{margin:.15rem 0}.field-save-state{font-size:.82rem;font-weight:700;padding:.45rem .65rem;border-radius:999px;background:#e2e8f0}.field-capture-note{padding:.85rem 1rem;border-radius:12px;background:#fff7ed;color:#9a3412}.field-card{margin:1rem 0;padding:1rem;border:1px solid #dbe3ea;border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.05)}.field-card h2{margin:0 0 .85rem;font-size:1.08rem}.field-time-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:end;margin:.75rem 0}.field-time-row label,.field-card>label{display:grid;gap:.35rem;font-weight:700}.field-time-row input,.field-card>label input{min-height:48px;font-size:16px}.field-time-actions{display:flex;gap:.3rem}.field-time-actions button,.field-location-button{min-height:48px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;font-weight:800;padding:0 .72rem}.field-location-button{width:100%;margin-bottom:.8rem;background:#eff6ff;color:#1d4ed8}.field-members{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.field-member input{position:absolute;opacity:0;pointer-events:none}.field-member span{display:flex;min-height:52px;align-items:center;justify-content:center;text-align:center;border:2px solid #dbe3ea;border-radius:12px;padding:.45rem;font-weight:700}.field-member input:checked+span{border-color:#2563eb;background:#dbeafe;color:#1e3a8a}.field-capture-actions{position:sticky;bottom:.5rem;display:grid;gap:.55rem;padding:.7rem;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 5px 25px rgba(15,23,42,.18);backdrop-filter:blur(8px)}.field-capture-actions .button{min-height:54px;font-size:1rem}@media(max-width:390px){.field-time-row{grid-template-columns:1fr}.field-time-actions button{flex:1}.field-members{grid-template-columns:1fr}}
/* Clearer intervention detail summary. */
.intervention-basic-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr);gap:12px}.intervention-basic-grid .readonly-field{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);border-color:#dce3eb;border-radius:11px;min-height:78px;padding:13px 15px;box-shadow:0 1px 2px rgba(15,23,42,.03)}.intervention-basic-grid .readonly-field span{font-size:.72rem;letter-spacing:.015em}.intervention-basic-grid .readonly-field strong{font-size:1rem;line-height:1.35}.intervention-basic-grid .readonly-field small{color:var(--muted);font-size:.78rem}.intervention-basic-grid .basic-location{grid-column:span 2}.intervention-basic-grid .basic-distance strong{font-size:1.12rem;font-weight:700}.intervention-basic-grid .basic-leader strong{font-weight:650}@media(max-width:850px){.intervention-basic-grid{grid-template-columns:1fr 1fr}.intervention-basic-grid .basic-location{grid-column:span 1}}@media(max-width:580px){.intervention-basic-grid{grid-template-columns:1fr}.intervention-basic-grid .readonly-field{min-height:68px}.intervention-basic-grid .basic-location{grid-column:1}}
@media(max-width:700px){.field-time-row{grid-template-columns:minmax(0,1fr) auto;gap:.35rem}.field-time-row input{font-size:14px!important;font-weight:650;letter-spacing:-.025em;padding:8px 9px}.field-time-actions{gap:.2rem}.field-time-actions button{font-size:.78rem;min-height:46px;min-width:42px;padding:0 .48rem}.field-time-actions button[data-time-now]{min-width:54px}}
@media(max-width:700px){.field-action-status{color:#166534;display:block;font-size:.8rem;font-weight:800;min-height:1.1rem;text-align:center}.field-capture-actions .button:disabled{cursor:wait;opacity:.72}}
.field-draft-inbox{background:#fff;border:1px solid var(--line);border-radius:14px;margin:0 0 18px;padding:16px}.field-draft-inbox-heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.field-draft-inbox-heading small{color:var(--primary);font-size:.68rem;font-weight:900;text-transform:uppercase}.field-draft-inbox-heading h2{font-size:1.15rem;margin:2px 0 0}.field-draft-inbox-heading>span{align-items:center;background:var(--primary-soft);border-radius:999px;color:var(--primary);display:flex;font-weight:900;height:30px;justify-content:center;min-width:30px}.field-draft-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.field-draft-card{background:#f8fafc;border:1px solid #dce3eb;border-radius:11px;display:grid;gap:8px;padding:13px}.field-draft-card>div{align-items:center;display:flex;gap:10px;justify-content:space-between}.field-draft-card p,.field-draft-card small{margin:0}.field-draft-card small{color:var(--muted)}.field-draft-card .button{justify-self:start}.field-draft-empty{color:var(--muted);margin:0}@media(max-width:700px){.field-draft-inbox{display:none}}@media(max-width:850px){.field-draft-grid{grid-template-columns:1fr}}
.field-card textarea{font-size:16px;min-height:88px;resize:vertical}.field-draft-notes{background:#fff;border-left:3px solid #f59e0b;border-radius:6px;padding:8px 10px}.field-draft-actions{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.field-draft-actions form{margin:0}.field-draft-actions .button{min-height:38px}
.member-intervention-list{scrollbar-color:#aeb5bf #eef1f4;scrollbar-width:thin}.member-intervention-list>a{grid-template-columns:minmax(110px,.75fr) minmax(0,1.25fr) auto}.member-assignment-badge{background:#edf3ff;border-radius:999px;color:#245aa6!important;font-size:11px!important;font-weight:800;padding:5px 8px;white-space:nowrap}.member-assignment-badge.is-standby{background:#fff3df;color:#9a5a00!important}.member-assignment-badge.is-direct{background:#edf7ef;color:#26733a!important}@media(max-width:520px){.member-intervention-list>a{grid-template-columns:1fr auto}.member-intervention-list>a>span:first-child{grid-column:1}.member-intervention-place{grid-column:1}.member-assignment-badge{grid-column:2;grid-row:1 / span 2}}
.member-stat-panel{transition:opacity .15s ease}.member-stat-panel.is-loading{opacity:.55;pointer-events:none}
.member-assignment-badges{align-items:flex-end;display:flex;flex-direction:column;gap:5px}.member-assignment-badge.is-leader{background:#fdebed;color:#a41320!important}@media(max-width:520px){.member-assignment-badges{grid-column:2;grid-row:1 / span 2}.member-assignment-badges .member-assignment-badge{grid-column:auto;grid-row:auto}}
.operational-heading .button-row form{margin:0}.operational-heading select{background:#fff;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:800;min-height:44px;padding:9px 34px 9px 12px}.operational-kpis{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}.operational-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.operational-ranking,.operational-activity-list{display:grid}.operational-rank-head,.operational-rank-row{align-items:center;border-bottom:1px solid var(--line);display:grid;gap:10px;grid-template-columns:minmax(0,1fr) 70px 70px 80px;padding:10px 3px}.operational-rank-head{color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}.operational-rank-row span,.operational-rank-row b{text-align:right}.operational-rank-row b{color:var(--primary)}.operational-activity-list{max-height:520px;overflow:auto}.operational-activity-list>a{align-items:center;border-bottom:1px solid var(--line);color:inherit;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) 60px 70px;padding:11px 3px;text-decoration:none}.operational-activity-list>a:hover{color:var(--primary)}.operational-activity-list>a>span:first-child{display:grid;gap:3px}.operational-activity-list small{color:var(--muted)}.operational-members{border:1px solid var(--line);border-radius:12px;display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));padding:14px}.operational-members legend{font-weight:900;padding:0 6px}.operational-members label{align-items:center;display:flex;gap:8px;margin:0}.operational-members input{height:18px;width:18px}.operational-weight-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}.operational-weight-head,.operational-weight-row{align-items:center;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) 130px 100px;padding:11px 14px}.operational-weight-head{background:#f4f6f8;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}.operational-weight-row{border-top:1px solid var(--line)}.operational-weight-row input[type=text],.operational-weight-row>input:not([type]){width:100%}.operational-weight-row label{align-items:center;display:flex;gap:7px;margin:0}.operational-new-category{background:#f7f8fa;border-radius:14px;margin-top:18px;padding:16px}.operational-new-category h2,.operational-new-category p{margin:0}.operational-new-category p{color:var(--muted);margin-top:4px}.operational-new-category>div{display:grid;gap:12px;grid-template-columns:1fr 180px;margin-top:13px}@media(max-width:900px){.operational-layout{grid-template-columns:1fr}.operational-members{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.operational-kpis{grid-template-columns:1fr 1fr}.operational-rank-head,.operational-rank-row{grid-template-columns:minmax(0,1fr) 52px 55px}.operational-rank-head span:nth-child(3),.operational-rank-row span:nth-child(3){display:none}.operational-activity-list>a{grid-template-columns:1fr auto}.operational-activity-list>a>b{grid-column:1/-1}.operational-members{grid-template-columns:1fr}.operational-weight-head{display:none}.operational-weight-row{grid-template-columns:1fr 100px}.operational-weight-row label{grid-column:1/-1}.operational-new-category>div{grid-template-columns:1fr}}
.operational-stat-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.operational-category-stats{display:grid}.operational-category-stats>div{align-items:center;border-bottom:1px solid var(--line);display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;padding:12px 2px}.operational-category-stats>div span{color:var(--muted);font-size:12px;grid-column:1}.operational-category-stats>div b{color:var(--primary);grid-column:2;grid-row:1 / span 2}.operational-log-kpis{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}.operational-log{display:grid;gap:10px}.operational-log-card{align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);display:grid;gap:16px;grid-template-columns:64px minmax(0,1fr) auto auto;padding:15px}.operational-log-date{align-items:center;background:#f5f6f8;border-radius:11px;display:flex;flex-direction:column;padding:9px}.operational-log-date strong{font-size:22px}.operational-log-date span{color:var(--muted);font-size:11px}.operational-log-main h2,.operational-log-main p{margin:0}.operational-log-main h2{font-size:17px;margin:3px 0 5px}.operational-log-main p{color:var(--muted);font-size:13px}.operational-log-meta{display:grid;gap:3px;min-width:105px;text-align:right}.operational-log-meta span,.operational-log-meta small{color:var(--muted);font-size:11px}@media(max-width:760px){.operational-stat-kpis{grid-template-columns:1fr 1fr}.operational-log-card{align-items:start;grid-template-columns:54px minmax(0,1fr)}.operational-log-meta{grid-column:2;text-align:left}.operational-log-card>.button{grid-column:1/-1;width:100%}.statistics-tabs{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));width:100%}}

.operational-recap-panel{margin-bottom:18px;min-width:0}.operational-recap-heading{align-items:end;border-bottom:1px solid var(--line);display:flex;gap:20px;justify-content:space-between;margin-bottom:0;padding-bottom:15px}.operational-recap-heading h2,.operational-recap-heading p{margin:0}.operational-recap-heading p{color:var(--muted);font-size:13px;margin-top:4px}.operational-member-search{font-size:11px;font-weight:900;margin:0;min-width:230px;text-transform:uppercase}.operational-member-search input{display:block;margin-top:5px;min-width:230px;text-transform:none}.operational-recap-scroll{overflow-x:auto}.operational-recap-table{min-width:960px}.operational-recap-head,.operational-member-recap>summary{align-items:center;display:grid;gap:10px;grid-template-columns:minmax(190px,1.5fr) repeat(5,minmax(90px,1fr)) 90px}.operational-recap-head{color:var(--muted);font-size:10px;font-weight:900;padding:12px 10px;text-transform:uppercase}.operational-recap-head span:not(:first-child),.operational-member-recap>summary span,.operational-member-recap>summary b{text-align:right}.operational-member-recap{border-top:1px solid var(--line)}.operational-member-recap>summary{cursor:pointer;list-style:none;padding:13px 10px}.operational-member-recap>summary::-webkit-details-marker{display:none}.operational-member-recap>summary strong:before{color:var(--primary);content:'›';display:inline-block;font-size:20px;margin-right:9px;transition:transform .2s}.operational-member-recap[open]>summary strong:before{transform:rotate(90deg)}.operational-member-recap>summary:hover{background:#fafafa}.operational-member-recap>summary b{color:var(--primary);font-size:15px}.operational-member-details{background:#f7f8fa;border-radius:10px;margin:0 10px 12px;padding:6px 12px 10px}.operational-detail-head,.operational-detail-row{align-items:center;display:grid;gap:12px;grid-template-columns:minmax(240px,1.5fr) minmax(180px,1fr) 80px 65px 70px;padding:9px 4px}.operational-detail-head{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.operational-detail-row{border-top:1px solid var(--line);font-size:12px}.operational-detail-row>span:first-child{display:grid;gap:2px}.operational-detail-row small{color:var(--muted)}.operational-detail-row>span:not(:first-child),.operational-detail-row>b{text-align:right}.operational-detail-row>b{color:var(--primary)}.operational-category-summary{margin-bottom:18px}.operational-category-summary .operational-category-stats{column-gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}.operational-recap-empty{padding:20px;text-align:center}@media(max-width:760px){.operational-recap-heading{align-items:stretch;flex-direction:column}.operational-member-search,.operational-member-search input{min-width:0;width:100%}.operational-category-summary .operational-category-stats{grid-template-columns:1fr}.operational-recap-scroll{overflow:visible}.operational-recap-table{min-width:0}.operational-recap-head{display:none}.operational-member-recap{border:1px solid var(--line);border-radius:12px;margin-top:10px;overflow:hidden}.operational-member-recap>summary{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));padding:13px}.operational-member-recap>summary strong{font-size:15px;grid-column:1}.operational-member-recap>summary b{grid-column:2;grid-row:1;font-size:18px}.operational-member-recap>summary b:after{color:var(--muted);content:' točk';font-size:10px;font-weight:700}.operational-member-recap>summary span{align-items:center;background:#f7f8fa;border-radius:7px;color:var(--text);display:flex;font-size:12px;justify-content:space-between;padding:7px 8px;text-align:right}.operational-member-recap>summary span:before{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.operational-member-recap>summary span:nth-of-type(1):before{content:'Na kraju'}.operational-member-recap>summary span:nth-of-type(2):before{content:'Gasilski dom'}.operational-member-recap>summary span:nth-of-type(3):before{content:'Vaje'}.operational-member-recap>summary span:nth-of-type(4):before{content:'Prevozi vode'}.operational-member-recap>summary span:nth-of-type(5):before{content:'Ostalo'}.operational-member-recap>summary span:nth-of-type(5){grid-column:1/-1}.operational-member-details{margin:0 8px 9px;padding:4px 9px 8px}.operational-detail-head{display:none}.operational-detail-row{gap:7px;grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 2px}.operational-detail-row>span:first-child{grid-column:1/-1}.operational-detail-row>span:nth-child(2){color:var(--muted);font-size:10px;grid-column:1/-1;text-align:left}.operational-detail-row>span:nth-child(3):before{content:'Obseg: ';color:var(--muted)}.operational-detail-row>span:nth-child(4):before{content:'Utež: ';color:var(--muted)}.operational-detail-row>b:before{content:'Točke: ';color:var(--muted);font-weight:400}}

/* Field/mobile usability fixes. */
@media (max-width: 980px) {
    .topbar.app-topbar {
        position: sticky;
        top: 0;
        z-index: 80;
    }
    .mobile-tabbar {
        position: fixed;
        z-index: 85;
    }
    .mobile-menu-panel {
        z-index: 90;
    }
}

.mobile-photo-options {
    grid-template-columns: 1fr;
}

.mobile-photo-options label {
    width: 100%;
}

@media (max-width: 700px) {
    .mobile-photo-options {
        padding: 14px;
    }
}

@media (max-width: 760px) {
    .water-dashboard-page .water-dashboard-section > header {
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    .water-dashboard-page .water-dashboard-section > header h2 {
        font-size: 25px;
        line-height: 1.08;
    }
    .water-dashboard-page .water-dashboard-section > header p {
        font-size: 14px;
        line-height: 1.4;
    }
    .water-dashboard-page .water-dashboard-section > header .button {
        min-height: 42px;
        width: 100%;
    }
    .water-dashboard-page .water-delivery-list {
        gap: 10px;
    }
    .water-dashboard-page .water-delivery-card {
        border-radius: 13px;
        gap: 10px;
        padding: 12px 14px;
    }
    .water-dashboard-page .water-card-number {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        justify-content: space-between;
    }
    .water-dashboard-page .water-card-number > span:first-child {
        font-size: 16px;
    }
    .water-dashboard-page .water-card-customer h2 {
        font-size: 20px;
        line-height: 1.12;
        margin-bottom: 2px;
    }
    .water-dashboard-page .water-card-customer p {
        font-size: 13px;
        margin-bottom: 7px;
    }
    .water-dashboard-page .water-card-customer div {
        grid-template-columns: 1fr 1fr;
    }
    .water-dashboard-page .water-card-assignment {
        border-top: 1px solid #e6e9ee;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 10px;
    }
    .water-dashboard-page .water-card-assignment > div {
        padding: 7px 5px;
    }
    .water-dashboard-page .water-card-assignment dd {
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
    }
    .water-dashboard-page .water-delivery-card > .button {
        min-height: 46px;
    }
}

@media (max-width: 520px) {
    .statistics-tabs {
        display: flex;
        gap: 6px;
        margin-left: -2px;
        margin-right: -2px;
        overflow-x: auto;
        padding: 5px;
        scroll-snap-type: x proximity;
        width: calc(100% + 4px);
    }
    .statistics-tabs a {
        flex: 0 0 auto;
        font-size: 13px;
        justify-content: center;
        min-height: 44px;
        min-width: 148px;
        scroll-snap-align: start;
        white-space: nowrap;
    }
    .statistics-tabs a svg {
        flex: 0 0 auto;
    }
}

.operational-weight-form {
    max-width: 980px;
}

.operational-weight-list {
    background: #fff;
}

.operational-weight-row input[readonly] {
    background: #f8fafc;
    color: #172033;
}

@media (max-width: 700px) {
    .operational-weight-form {
        gap: 12px;
    }
    .operational-weight-list {
        border-radius: 13px;
    }
    .operational-weight-row {
        align-items: stretch;
        gap: 9px;
        grid-template-columns: minmax(0, 1fr) 92px;
        padding: 12px;
    }
    .operational-weight-row input {
        min-height: 52px;
        min-width: 0;
    }
    .operational-weight-row label {
        align-items: center;
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 10px;
        display: flex;
        grid-column: 1 / -1;
        justify-content: space-between;
        min-height: 48px;
        padding: 8px 12px;
    }
    .operational-weight-row label input {
        height: 24px;
        width: 24px;
    }
    .operational-new-category {
        padding: 14px;
    }
    .operational-new-category > div {
        grid-template-columns: 1fr;
    }
}

/* Strong mobile layout correction for app chrome and statistics. */
.mobile-label {
    display: none;
}

@media (max-width: 980px) {
    body:not(.focused-auth-body) .app-shell {
        padding-top: calc(76px + env(safe-area-inset-top)) !important;
    }
    .topbar.app-topbar {
        background: rgba(255,255,255,.98) !important;
        border-bottom: 1px solid var(--line) !important;
        box-shadow: 0 6px 18px rgba(15,23,42,.08) !important;
        height: calc(76px + env(safe-area-inset-top)) !important;
        left: 0 !important;
        overflow: visible !important;
        padding: calc(10px + env(safe-area-inset-top)) 16px 10px !important;
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }
    .topbar.app-topbar .mobile-menu {
        display: block !important;
        z-index: 1002;
    }
    .topbar.app-topbar .mobile-menu-button {
        background: #fff !important;
        border: 1px solid var(--line) !important;
        box-shadow: 0 2px 10px rgba(15,23,42,.06) !important;
    }
    .topbar.app-topbar .mobile-menu-panel {
        max-height: calc(100dvh - 86px - env(safe-area-inset-top)) !important;
        top: calc(100% + 8px) !important;
        z-index: 1003 !important;
    }
    .mobile-tabbar {
        z-index: 990 !important;
    }
}

@media (max-width: 700px) {
    .dashboard-container .dashboard-heading,
    .water-module > .page-heading {
        margin-bottom: 14px !important;
    }
    .dashboard-container .dashboard-heading h1,
    .water-module > .page-heading h1 {
        font-size: 34px !important;
        line-height: 1.02 !important;
    }
    .dashboard-container .dashboard-heading p,
    .water-module > .page-heading p {
        font-size: 15px !important;
        line-height: 1.38 !important;
        margin-top: 7px !important;
    }
    .statistics-tabs {
        align-items: stretch !important;
        background: #e9eef5 !important;
        border-radius: 14px !important;
        display: grid !important;
        gap: 5px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        margin: 0 0 18px !important;
        overflow: visible !important;
        padding: 5px !important;
        width: 100% !important;
    }
    .statistics-tabs a {
        align-items: center !important;
        border-radius: 10px !important;
        display: flex !important;
        flex: initial !important;
        flex-direction: column !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        gap: 4px !important;
        justify-content: center !important;
        line-height: 1.05 !important;
        min-height: 56px !important;
        min-width: 0 !important;
        padding: 7px 4px !important;
        text-align: center !important;
        white-space: normal !important;
    }
    .statistics-tabs a.is-active {
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(15,23,42,.1) !important;
    }
    .statistics-tabs svg {
        height: 17px !important;
        width: 17px !important;
    }
    .statistics-tabs .desktop-label {
        display: none !important;
    }
    .statistics-tabs .mobile-label {
        display: inline !important;
    }
    .dashboard-container .section-heading {
        margin-bottom: 10px !important;
    }
    .dashboard-container .section-heading h2 {
        font-size: 24px !important;
        line-height: 1.1 !important;
    }
    .dashboard-container .section-heading p {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
    .dashboard-container .dashboard-kpis,
    .water-module .water-stat-kpis,
    .operational-stat-kpis {
        gap: 10px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-bottom: 18px !important;
    }
    .dashboard-container .dashboard-kpis .stat-card,
    .water-module .water-stat-kpis .stat-card,
    .operational-stat-kpis .stat-card {
        border-radius: 12px !important;
        gap: 8px !important;
        grid-template-areas: "label icon" "value value" !important;
        grid-template-columns: minmax(0, 1fr) 30px !important;
        grid-template-rows: auto 1fr !important;
        min-height: 104px !important;
        padding: 12px !important;
    }
    .dashboard-container .dashboard-kpis .stat-content span,
    .water-module .water-stat-kpis .stat-content span,
    .operational-stat-kpis .stat-content span {
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
    }
    .dashboard-container .dashboard-kpis .stat-content strong,
    .water-module .water-stat-kpis .stat-content strong,
    .operational-stat-kpis .stat-content strong {
        font-size: clamp(17px, 5vw, 24px) !important;
        font-variant-numeric: tabular-nums !important;
        letter-spacing: -.025em !important;
        line-height: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
    .dashboard-container .dashboard-kpis .stat-icon,
    .water-module .water-stat-kpis .stat-icon {
        height: 30px !important;
        width: 30px !important;
    }
    .dashboard-container .analytics-grid,
    .water-rankings,
    .water-chart-grid,
    .operational-layout {
        gap: 12px !important;
        grid-template-columns: 1fr !important;
    }
    .dashboard-container .analytics-panel,
    .water-module .analytics-panel {
        border-radius: 13px !important;
        padding: 14px !important;
    }
    .dashboard-container .analytics-panel h2,
    .water-module .analytics-panel h2 {
        font-size: 18px !important;
        line-height: 1.18 !important;
    }
}

@media (max-width: 380px) {
    .statistics-tabs a {
        font-size: 10px !important;
        min-height: 52px !important;
    }
    .statistics-tabs svg {
        height: 15px !important;
        width: 15px !important;
    }
}

.water-price-table{overflow-x:auto}.water-price-table table{min-width:880px;table-layout:fixed}.water-price-table th:nth-child(1){width:25%}.water-price-table th:nth-child(2){width:14%}.water-price-table th:nth-child(3){width:25%}.water-price-table th:nth-child(4){width:11%}.water-price-table th:nth-child(5){width:10%}.water-price-table th:nth-child(6){width:8%}.water-price-table th:nth-child(7){width:90px}.water-price-table td:nth-child(1),.water-price-table td:nth-child(3){overflow-wrap:anywhere;white-space:normal}.water-price-table td:last-child{text-align:right}.water-price-vehicle-picker{border:1px solid var(--line);border-radius:12px;margin:0;padding:16px}.water-price-vehicle-picker legend{font-weight:800;padding:0 6px}.water-price-vehicle-picker>p{color:var(--muted);margin:0 0 12px}.water-price-vehicle-picker .checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:700px){.water-price-vehicle-picker .checkbox-grid{grid-template-columns:1fr}}

/* Water workflow colors: approved is purple, handed over is green. */
.water-module .water-status-group { border-left:0 !important; padding-left:0; }
.water-module .water-delivery-card.status-card-submitted { border-left:3px solid #f59e0b !important; box-shadow:0 8px 28px rgba(15,23,42,.05) !important; }
.water-module .water-delivery-card.status-card-approved { border-left:3px solid #7c3aed !important; box-shadow:0 8px 28px rgba(15,23,42,.05) !important; }
.water-module .water-delivery-card.status-card-handed_over { border-left:3px solid #16a34a !important; box-shadow:0 8px 28px rgba(15,23,42,.05) !important; }
.water-module .water-delivery-card.status-card-invoiced { border-left:3px solid #2563eb !important; box-shadow:0 8px 28px rgba(15,23,42,.05) !important; }
.water-module .water-delivery-card.status-card-cancelled { border-left:3px solid #9d2530 !important; box-shadow:0 8px 28px rgba(15,23,42,.05) !important; }

/* Operational activity settings: align table styling with e-mail notification tables. */
.operational-weight-form {
    gap: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1120px !important;
    padding: 24px !important;
    width: 100% !important;
}

.operational-weight-list {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 13px !important;
    overflow: hidden !important;
}

.operational-weight-head,
.operational-weight-row {
    display: grid !important;
    gap: 0 !important;
    grid-template-columns: minmax(280px, 1fr) 150px 120px !important;
}

.operational-weight-head {
    background: #f7f8fa !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    padding: 10px 14px !important;
    text-transform: uppercase !important;
}

.operational-weight-head span:not(:first-child) {
    text-align: center !important;
}

.operational-weight-row {
    align-items: center !important;
    background: #fff !important;
    border-top: 1px solid var(--line) !important;
    padding: 12px 14px !important;
}

.operational-weight-row > input {
    background: #fff !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 9px !important;
    color: var(--text) !important;
    font-size: 14px !important;
    min-height: 44px !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
}

.operational-weight-row > input[readonly] {
    background: #f8fafc !important;
}

.operational-weight-row > input[type="number"] {
    justify-self: center !important;
    max-width: 104px !important;
    text-align: center !important;
    width: 100% !important;
}

.operational-weight-row label {
    align-items: center !important;
    border-left: 1px solid #edf0f3 !important;
    display: flex !important;
    gap: 9px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 44px !important;
    padding: 5px 12px !important;
}

.operational-weight-row label input[type="checkbox"] {
    accent-color: #2563eb !important;
    appearance: auto !important;
    flex: 0 0 22px !important;
    height: 22px !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 22px !important;
}

.operational-weight-row label span {
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.operational-new-category {
    background: #f7f8fa !important;
    border-radius: 12px !important;
    margin-top: 0 !important;
    padding: 16px !important;
}

.operational-new-category > div {
    grid-template-columns: minmax(0, 1fr) 150px !important;
}

.operational-weight-form > .actions {
    background: #f7f8fa !important;
    border-radius: 11px !important;
    justify-content: flex-end !important;
    padding: 12px 14px !important;
}

@media (max-width: 760px) {
    .operational-weight-form {
        border-radius: 14px !important;
        gap: 16px !important;
        padding: 16px !important;
    }
    .operational-weight-list {
        border: 0 !important;
        display: grid !important;
        gap: 10px !important;
        overflow: visible !important;
    }
    .operational-weight-head {
        display: none !important;
    }
    .operational-weight-row {
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        display: grid !important;
        gap: 9px !important;
        grid-template-columns: minmax(0, 1fr) 92px !important;
        padding: 13px !important;
    }
    .operational-weight-row > input {
        min-height: 48px !important;
    }
    .operational-weight-row > input[type="number"] {
        max-width: none !important;
    }
    .operational-weight-row label {
        background: #f7f8fa !important;
        border: 1px solid #e4e8ed !important;
        border-radius: 9px !important;
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
        padding: 10px !important;
    }
    .operational-weight-row label span {
        color: var(--text) !important;
        font-size: 13px !important;
    }
    .operational-new-category > div {
        grid-template-columns: 1fr !important;
    }
    .operational-weight-form > .actions,
    .operational-weight-form > .actions .button {
        width: 100% !important;
    }
}

/* PWA app shell */
:root {
    --app-height: 100vh;
    --visual-height: 100vh;
    --keyboard-inset: 0px;
}

html {
    min-height: var(--app-height);
    overscroll-behavior-x: none;
}

body.is-touch-device button,
body.is-touch-device .button,
body.is-touch-device a,
body.is-touch-device summary,
body.is-touch-device input,
body.is-touch-device select,
body.is-touch-device textarea {
    -webkit-tap-highlight-color: rgba(178, 31, 45, .16);
}

body.is-pwa-standalone {
    min-height: var(--app-height);
    overscroll-behavior-y: none;
}

body.is-pwa-standalone .public-shell,
body.is-pwa-standalone .app-shell {
    min-height: var(--visual-height);
}

@media (max-width: 980px) {
    body.is-pwa-standalone:not(.focused-auth-body) .app-shell {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    body.is-pwa-standalone .topbar.app-topbar {
        -webkit-backdrop-filter: saturate(1.2) blur(18px);
        backdrop-filter: saturate(1.2) blur(18px);
    }

    body.is-pwa-standalone .mobile-menu-panel {
        max-height: calc(var(--visual-height) - 94px - env(safe-area-inset-top)) !important;
    }

    body.is-pwa-standalone .mobile-tabbar {
        -webkit-backdrop-filter: saturate(1.2) blur(18px);
        backdrop-filter: saturate(1.2) blur(18px);
        bottom: 0;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    body.keyboard-open .mobile-tabbar {
        transform: translateY(calc(100% + env(safe-area-inset-bottom)));
        transition: transform .16s ease;
    }
}

@media (max-width: 700px) {
    body.is-pwa-standalone .mobile-form-stepper {
        top: calc(76px + env(safe-area-inset-top));
    }

    body.is-pwa-standalone .mobile-form-actions {
        bottom: calc(72px + env(safe-area-inset-bottom) + var(--keyboard-inset));
    }

    body.keyboard-open .mobile-form-actions {
        bottom: max(8px, calc(var(--keyboard-inset) + 8px));
    }

    body.is-pwa-standalone .field-capture {
        margin-bottom: calc(6rem + env(safe-area-inset-bottom));
    }

    body.is-pwa-standalone .field-capture-actions {
        bottom: calc(.6rem + env(safe-area-inset-bottom) + var(--keyboard-inset));
    }

body.keyboard-open .field-capture-actions {
        bottom: max(.5rem, calc(var(--keyboard-inset) + .5rem));
    }
}

/* Society reimbursements: keep the complete workflow inside the mobile viewport. */
.society-reimbursements-page,
.society-reimbursements-page > *,
.society-billing-create .grid-form,
.society-billing-create .grid-form > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 900px) {
    .society-reimbursements-page { overflow: hidden; width: 100%; }
    .society-reimbursements-page > .page-heading h1,
    .society-reimbursements-page .section-heading h2,
    .society-reimbursements-page .section-heading p { overflow-wrap: anywhere; }
    .society-reimbursements-page > .page-heading .button { width: 100%; }
    .society-billing-create { border-radius: 14px; padding: 16px; }
    .society-billing-create .grid-form { grid-template-columns: minmax(0, 1fr); }
    .society-billing-create .grid-form .span-2 { grid-column: 1; }
    .society-billing-create select,
    .society-billing-create input,
    .society-billing-create .actions,
    .society-billing-create .button { width: 100%; }
    .society-claims-table { background: transparent; border: 0; overflow: visible; padding: 0; }
    .society-claims-table table,
    .society-claims-table tbody,
    .society-claims-table tr,
    .society-claims-table td { display: block; min-width: 0; width: 100%; }
    .society-claims-table table { border-spacing: 0; table-layout: auto; }
    .society-claims-table thead { display: none; }
    .society-claims-table tbody { display: grid; gap: 11px; }
    .society-claims-table tbody tr { background: #fff; border: 1px solid var(--line); border-left: 4px solid #94a3b8; border-radius: 13px; box-shadow: 0 4px 14px rgba(15,23,42,.05); overflow: hidden; padding: 13px 14px; }
    .society-claims-table tbody td { border: 0; padding: 6px 0; text-align: left; white-space: normal; }
    .society-claims-table tbody td::before { color: var(--muted); content: attr(data-label); display: block; font-size: 9px; font-weight: 900; letter-spacing: .04em; margin-bottom: 4px; text-transform: uppercase; }
    .society-claims-table tbody td:first-child { border-bottom: 1px solid var(--line); border-left: 0; padding-bottom: 11px; padding-top: 0; }
    .society-claims-table tbody td:last-child { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 11px; }
    .society-claims-table .society-open-claim { width: 100%; }
    .society-claims-table tbody tr.status-completed { border-left-color: #f59e0b; }
    .society-claims-table tbody tr.status-submitted { border-left-color: #2563eb; }
    .society-claims-table tbody tr.status-approved { border-left-color: #16a34a; }
    .society-claims-table tbody tr.status-rejected { border-left-color: #ea580c; }
    .society-claims-table tbody tr > td[colspan] { border: 0; margin: 0; padding: 18px 4px; }
    .society-claims-table tbody tr > td[colspan]::before { display: none; }

    body.is-ios:not(.keyboard-open) .mobile-tabbar {
        bottom: 0 !important;
        position: fixed !important;
        transform: translate3d(0, 0, 0) !important;
        transition: none !important;
        width: 100% !important;
        will-change: transform;
    }
}

/* Touch gallery: true full-screen viewer above the app chrome. */
@media (max-width: 700px) {
    body.gallery-lightbox-open { overflow: hidden !important; }
    body.gallery-lightbox-open .mobile-tabbar { display: none !important; }
    .gallery-lightbox {
        align-items: stretch !important;
        background: #111418 !important;
        height: 100dvh !important;
        inset: 0 !important;
        padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
        width: 100vw !important;
        z-index: 2200 !important;
    }
    .gallery-lightbox-dialog {
        background: #111418 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        gap: 0 !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        height: 100% !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .gallery-lightbox-header {
        align-items: center !important;
        background: rgba(17,20,24,.96) !important;
        border-bottom: 1px solid rgba(255,255,255,.14) !important;
        color: #fff !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        min-height: 64px !important;
        padding: 8px 12px !important;
    }
    .gallery-lightbox-header h2 { color: #fff !important; font-size: 17px !important; margin: 0 0 2px !important; }
    .gallery-lightbox-header p { color: #cbd5e1 !important; font-size: 12px !important; margin: 0 !important; }
    .gallery-lightbox-header .button { background: #fff !important; color: #111827 !important; margin-left: auto !important; min-height: 42px !important; padding: 8px 16px !important; width: auto !important; }
    .gallery-lightbox-stage {
        align-items: center !important;
        display: grid !important;
        gap: 6px !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 8px 5px 10px !important;
    }
    .gallery-lightbox-stage figure {
        align-content: center !important;
        background: transparent !important;
        border-radius: 0 !important;
        display: grid !important;
        gap: 8px !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    .gallery-lightbox-stage img {
        align-self: center !important;
        height: auto !important;
        max-height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        width: auto !important;
    }
    .gallery-lightbox-stage figcaption { font-size: 12px !important; line-height: 1.35 !important; padding: 0 4px !important; }
    .gallery-lightbox-stage .watermark-arrow { background: rgba(255,255,255,.92) !important; height: 40px !important; width: 40px !important; }
}

/* Compact 30-second field capture. */
@media(max-width:700px){
    .field-capture{margin:0 auto 4rem;max-width:620px;padding:4px 2px}.field-capture-head h1{font-size:27px;line-height:1.05}.field-capture-head small{font-size:10px}.field-save-state{font-size:11px;padding:6px 9px}.field-capture-note{font-size:12px;margin:10px 0;padding:8px 10px}.field-card{border-radius:13px;margin:9px 0;padding:12px}.field-card-title{align-items:center;display:flex;gap:10px;margin-bottom:10px}.field-card-title>span{align-items:center;background:var(--primary);border-radius:50%;color:#fff;display:flex;flex:0 0 28px;font-size:12px;font-weight:900;height:28px;justify-content:center}.field-card-title h2{font-size:16px;margin:0}.field-card-title small{color:var(--muted);font-size:11px}.field-primary-time .field-time-row{margin:0}.field-time-row{gap:7px;margin:9px 0}.field-time-row input,.field-card>label input{min-height:43px}.field-time-actions button,.field-location-button{min-height:43px;padding:0 10px}.field-location-button{margin-bottom:8px}.field-location-manual{font-size:12px}.field-optional-section{border-top:1px solid var(--line);margin-top:11px;padding-top:9px}.field-optional-section>summary,.field-notes-card>summary{align-items:center;cursor:pointer;display:flex;font-size:13px;font-weight:900;justify-content:space-between;list-style:none}.field-optional-section>summary::-webkit-details-marker,.field-notes-card>summary::-webkit-details-marker{display:none}.field-optional-section>summary:after,.field-notes-card>summary:after{color:var(--primary);content:'+';font-size:20px}.field-optional-section[open]>summary:after,.field-notes-card[open]>summary:after{content:'−'}.field-optional-section>summary small,.field-notes-card>summary small{color:var(--muted);font-size:10px;font-weight:700;margin-left:auto;margin-right:9px;text-transform:uppercase}.field-notes-card>div{margin-top:10px}.field-notes-card label{display:grid;font-size:12px;gap:5px}.field-notes-card textarea{min-height:76px}.field-member span{border-width:1px;border-radius:10px;font-size:12px;min-height:42px;padding:5px}.field-member input:checked+span{border-width:2px}.field-members{gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}.field-capture-actions{bottom:4px;gap:4px;padding:7px}.field-capture-actions>div{display:grid;gap:7px;grid-template-columns:1.35fr 1fr}.field-capture-actions .button{font-size:13px;min-height:47px;padding:8px 10px}.field-reset-link{appearance:none;background:transparent;border:0;color:var(--muted);font-size:11px;min-height:24px;text-decoration:underline}.field-action-status:empty{display:none}
}
.members-organization-settings {
    align-items: center;
    background: linear-gradient(135deg, rgba(227, 6, 19, 0.1), #fff 62%);
    border: 1px solid rgba(227, 6, 19, 0.24);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 16px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    margin: 0 0 20px;
    padding: 18px;
}

.members-organization-settings h2,
.members-organization-settings p {
    margin: 0;
}

.members-organization-settings h2 {
    font-size: 19px;
    margin-top: 2px;
}

.members-organization-settings p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
    margin-top: 5px;
}

@media (max-width: 720px) {
    .members-organization-settings {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .members-organization-settings .button {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }
}

.signature-settings-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 22px;
    padding: 22px;
}

.signature-current {
    background: #f8fafc;
    border: 1px solid #dce3eb;
    border-radius: 12px;
    display: grid;
    gap: 10px;
    padding: 16px;
}

.signature-current span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.signature-current img {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    height: 120px;
    object-fit: contain;
    padding: 10px;
    width: 100%;
}

.signature-current small {
    color: var(--muted);
}

.signature-pad {
    display: grid;
    gap: 12px;
}

.signature-pad-head {
    align-items: end;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.signature-pad-head h2 {
    font-size: 18px;
    margin: 0;
}

.signature-pad-head p {
    color: var(--muted);
    font-size: 13px;
    margin: 4px 0 0;
}

.signature-canvas-wrap {
    background: #fff;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    height: 220px;
    overflow: hidden;
    position: relative;
    touch-action: none;
}

.signature-canvas-wrap canvas {
    display: block;
    height: 100%;
    outline: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
}

.signature-canvas-wrap span {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 800;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.signature-pad.has-signature .signature-canvas-wrap span {
    display: none;
}

.signature-pad-attention .signature-canvas-wrap {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(178, 31, 45, .1);
}

.remote-signature-box {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
}

.remote-signature-box strong,
.remote-signature-box small,
.remote-signature-qr span {
    display: block;
}

.remote-signature-box small,
.remote-signature-qr span {
    color: var(--muted);
    font-size: 13px;
}

.remote-signature-qr {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    justify-items: center;
}

.remote-signature-qr[hidden] {
    display: none;
}

.remote-signature-qr img {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    height: 190px;
    object-fit: contain;
    padding: 10px;
    width: 190px;
}

.remote-signature-qr a {
    color: var(--primary);
    font-weight: 800;
}

.signature-actions {
    justify-content: flex-end;
}

.signature-modal-open,
.signature-modal-open body {
    overflow: hidden;
}

.signature-modal {
    align-items: center;
    background: rgba(15, 23, 42, .62);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 1000;
}

.signature-modal[hidden] {
    display: none;
}

.signature-dialog {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .3);
    display: grid;
    gap: 16px;
    max-height: calc(100vh - 36px);
    max-width: 820px;
    overflow: auto;
    padding: 22px;
    width: min(100%, 820px);
}

.signature-dialog-header {
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.signature-dialog-header h2 {
    font-size: 22px;
    margin: 0;
}

.signature-dialog-header p {
    color: var(--muted);
    margin: 5px 0 0;
}

.signature-dialog .signature-canvas-wrap {
    height: min(46vh, 320px);
}

.signature-dialog-footer {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.signature-document-status {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
}

.signature-document-status strong {
    font-size: 13px;
}

.signature-document-status small {
    color: var(--muted);
}

.document-signed-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.document-signed-actions span {
    flex: 1 1 260px;
}

@media (max-width: 700px) {
    .signature-settings-card {
        padding: 16px;
    }

    .signature-pad-head {
        align-items: stretch;
        flex-direction: column;
    }

    .signature-canvas-wrap {
        height: 190px;
    }

    .remote-signature-box {
        grid-template-columns: 1fr;
    }

    .remote-signature-box .button {
        width: 100%;
    }

    .signature-dialog {
        border-radius: 0;
        gap: 10px;
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: 100dvh;
        max-height: none;
        max-width: none;
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        width: 100dvw;
    }

    .signature-modal {
        align-items: stretch;
        padding: 0;
    }

    .signature-dialog-header h2 {
        font-size: 18px;
    }

    .signature-dialog-header p,
    .signature-pad-head p {
        font-size: 12px;
        line-height: 1.35;
    }

    .signature-dialog .signature-canvas-wrap {
        height: auto;
        min-height: 0;
    }

    .signature-dialog-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .signature-dialog-footer .button {
        width: 100%;
    }

    .document-signed-actions {
        align-items: stretch;
        display: grid;
    }

    .document-signed-actions .button {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .signature-dialog {
        gap: 8px;
        grid-template-columns: minmax(170px, 28vw) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        height: 100dvh;
        width: 100dvw;
    }

    .signature-dialog-header {
        align-content: start;
        display: grid;
    }

    .signature-dialog .signature-pad {
        min-height: 0;
    }

    .signature-dialog .signature-canvas-wrap {
        height: 100%;
    }

    .signature-dialog-footer {
        grid-column: 1 / -1;
    }
}

/* Mobile cashier pass: keep every cashier submodule usable on phone-width screens. */
.cashier-module * {
    min-width: 0;
}

.cashier-module .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cashier-module .table-wrap table {
    width: 100%;
}

@media (min-width: 761px) {
    .cashier-module .cashier-journal-table-wrap {
        overflow-x: visible;
    }

    .cashier-module .cashier-journal-table {
        min-width: 0;
        table-layout: fixed;
    }

    .cashier-module .cashier-journal-table th,
    .cashier-module .cashier-journal-table td {
        font-size: 13px;
        line-height: 1.25;
        overflow: hidden;
        padding: 9px 8px;
        text-align: left;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }

    .cashier-module .cashier-journal-table th {
        font-size: 10px;
        letter-spacing: .04em;
    }

    .cashier-module .cashier-journal-table th:first-child,
    .cashier-module .cashier-journal-table td:first-child {
        width: 150px;
    }

    .cashier-module .cashier-journal-expenses th:nth-child(2),
    .cashier-module .cashier-journal-expenses td:nth-child(2) {
        width: 150px;
    }

    .cashier-module .cashier-journal-expenses th:nth-child(3),
    .cashier-module .cashier-journal-expenses td:nth-child(3) {
        width: 145px;
    }

    .cashier-module .cashier-journal-expenses th:nth-child(4),
    .cashier-module .cashier-journal-expenses td:nth-child(4) {
        width: 160px;
    }

    .cashier-module .cashier-journal-table th:last-child,
    .cashier-module .cashier-journal-table td:last-child {
        text-align: right;
        width: 64px;
    }

    .cashier-module .cashier-journal-table td:last-child .button {
        min-width: 0;
        padding: 8px 10px;
        width: auto;
    }

    .cashier-module .cashier-journal-table th:nth-last-child(2),
    .cashier-module .cashier-journal-table td:nth-last-child(2) {
        text-align: center;
        width: 100px;
    }

    .cashier-module .cashier-journal-table th:nth-last-child(3),
    .cashier-module .cashier-journal-table td:nth-last-child(3) {
        text-align: right;
        width: 80px;
    }

    .cashier-module .cashier-journal-table .status-badge {
        font-size: 9px;
        padding: 4px 6px;
    }
}

.cashier-journal-document {
    display: grid;
    gap: 2px;
    justify-items: start;
}

.cashier-journal-type {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.cashier-journal-document b {
    white-space: nowrap;
}

.cashier-journal-document small {
    color: var(--muted);
    font-size: 10px;
}

.cashier-module .inline-payment-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.cashier-module .inline-payment-form input {
    max-width: 110px;
}

.cashier-module .inline-payment-form input[type="date"] {
    max-width: 145px;
}

.cashier-module .inline-payment-form select {
    min-height: 36px;
    width: auto;
}

@media (max-width: 760px) {
    .cashier-module {
        max-width: 100%;
    }

    .cashier-module .page-heading {
        align-items: stretch;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 18px;
    }

    .cashier-module .page-heading h1 {
        font-size: 29px;
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .cashier-module .page-heading p {
        font-size: 14px;
        line-height: 1.42;
    }

    .cashier-module .page-heading > .actions,
    .cashier-module .page-heading-actions,
    .cashier-module .cashier-invoice-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-self: stretch;
        width: 100%;
    }

    .cashier-module .page-heading > .actions form,
    .cashier-module .cashier-invoice-actions form {
        display: contents;
    }

    .cashier-module .page-heading .button,
    .cashier-module .page-heading-actions .button,
    .cashier-module .cashier-invoice-actions .button,
    .cashier-module .cashier-invoice-bottom-actions .button,
    .cashier-module .cashier-invoice-bottom-actions a.button {
        justify-content: center;
        min-height: 46px;
        white-space: normal;
        width: 100%;
    }

    .cashier-dashboard-summary,
    .cashier-dashboard-summary.membership-kpis {
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin-bottom: 18px;
    }

    .cashier-dashboard-summary article {
        border-radius: 12px;
        padding: 13px;
    }

    .cashier-dashboard-summary article > strong {
        font-size: 21px;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .cashier-module-grid {
        gap: 10px;
    }

    .cashier-module-card {
        border-radius: 13px;
        gap: 12px;
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 15px;
    }

    .cashier-module-icon {
        border-radius: 11px;
        height: 40px;
        width: 40px;
    }

    .cashier-module-copy {
        padding-right: 0;
    }

    .cashier-module-copy strong {
        font-size: 18px;
        line-height: 1.18;
    }

    .cashier-module-copy p {
        font-size: 13px;
        line-height: 1.42;
        margin-top: 6px;
    }

    .cashier-module-badge {
        grid-column: 2;
        justify-self: start;
        position: static;
        width: auto;
    }

    .cashier-module-action {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .cashier-water-tabs {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .cashier-water-tabs a {
        flex-direction: column;
        font-size: 12px;
        justify-content: center;
        line-height: 1.25;
        min-height: 64px;
        padding: 8px 4px;
        text-align: center;
        text-decoration: none;
        white-space: normal;
    }

    .cashier-subheading h2 {
        font-size: 22px;
        line-height: 1.12;
    }

    .cashier-layout {
        gap: 12px;
        grid-template-columns: minmax(0, 1fr);
    }

    .cashier-batch-list {
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        margin: 0;
        max-height: 230px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px;
        position: static;
    }

    .cashier-batch-list h2 {
        display: none;
    }

    .cashier-batch-list a {
        min-width: 0;
        padding: 9px 10px;
    }

    .cashier-batch-list a strong {
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .cashier-batch-content > header {
        align-items: stretch;
        border-radius: 13px;
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr);
        padding: 15px;
    }

    .cashier-batch-content > header > .actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .cashier-batch-content > header p {
        font-size: 13px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .cashier-batch-content > header > .actions form,
    .cashier-batch-content > header > .actions .button {
        width: 100%;
    }

    .cashier-header-amount {
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
        text-align: left;
    }

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

    .cashier-summary div {
        align-items: center;
        gap: 10px;
    }

    .cashier-draft-list article {
        align-items: stretch;
        border-radius: 13px;
        display: grid;
        gap: 12px;
        padding: 14px;
    }

    .cashier-draft-list h3 {
        font-size: 17px;
        line-height: 1.22;
        overflow-wrap: anywhere;
    }

    .cashier-draft-total {
        align-items: stretch;
        border-top: 1px solid var(--line);
        gap: 6px;
        padding-top: 10px;
        text-align: left;
    }

    .cashier-draft-total > strong {
        font-size: 22px;
    }

    .cashier-draft-total .button {
        justify-content: center;
        width: 100%;
    }

    .cashier-form-card,
    .cashier-draft-form > .form,
    .cashier-draft-form .form,
    .payout-section,
    .document-mail-history {
        border-radius: 13px;
    }

    .cashier-draft-form .grid-form,
    .cashier-form-card .grid-form,
    .cashier-module .grid-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .cashier-draft-form .grid-form .span-2,
    .cashier-form-card .grid-form .span-2,
    .cashier-module .grid-form .span-2 {
        grid-column: 1;
    }

    .cashier-item-list article {
        padding: 12px;
    }

    .cashier-item-list article header {
        display: grid;
        gap: 10px;
    }

    .cashier-item-list article header .cashier-item-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        white-space: normal;
    }

    .cashier-item-list article header .cashier-item-actions a,
    .cashier-item-list article header .cashier-item-actions button {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .cashier-item-list article > div:not(.cashier-delivery-source):not(.cashier-payer-split) {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    .cashier-item-list article > div > span {
        justify-self: stretch;
        text-align: left;
    }

    .cashier-payment-breakdown,
    .cashier-total {
        align-items: stretch;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cashier-total strong {
        font-size: 22px;
        text-align: right;
    }

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

    .sales-item label:first-child {
        grid-column: auto;
    }

    .sales-remove {
        justify-content: center;
        min-height: 42px;
        width: 100%;
    }

    .cashier-invoice-bottom-actions {
        bottom: 0;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        margin: 18px -10px 0;
        padding: 10px;
        position: sticky;
        z-index: 20;
    }

    .payout-total {
        align-items: stretch;
        display: grid;
        gap: 8px;
        padding: 12px 0 18px;
    }

    .payout-total strong {
        font-size: 26px;
    }

    .payout-filter,
    .membership-filters,
    .filters.membership-filters {
        align-items: stretch;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
    }

    .payout-filter label,
    .membership-filters label,
    .membership-filters .filter-actions,
    .membership-filters .button {
        min-width: 0;
        width: 100%;
    }

    .cashier-module .table-wrap {
        overflow: visible;
    }

    .cashier-module .table-wrap table,
    .cashier-module .table-wrap thead,
    .cashier-module .table-wrap tbody,
    .cashier-module .table-wrap tr,
    .cashier-module .table-wrap th,
    .cashier-module .table-wrap td {
        display: block;
        min-width: 0 !important;
        width: 100%;
    }

    .cashier-module .table-wrap thead {
        display: none;
    }

    .cashier-module .table-wrap tbody {
        display: grid;
        gap: 10px;
    }

    .cashier-module .table-wrap tr {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        box-shadow: var(--shadow-soft);
        padding: 12px;
    }

    .cashier-module .table-wrap td {
        align-items: baseline;
        border: 0;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        padding: 7px 0;
        text-align: right;
    }

    .cashier-module .table-wrap td + td {
        border-top: 1px solid #edf0f4;
    }

    .cashier-module .table-wrap td::before {
        color: var(--muted);
        content: attr(data-label);
        flex: 0 0 42%;
        font-size: 11px;
        font-weight: 900;
        text-align: left;
        text-transform: uppercase;
    }

    .cashier-module .table-wrap td:empty {
        display: none;
    }

    .cashier-module .table-wrap td .button {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .cashier-module .table-wrap td form {
        width: 100%;
    }

    .cashier-module .table-wrap td[data-label=""] {
        justify-content: stretch;
    }

    .cashier-module .table-wrap td[data-label=""]::before {
        display: none;
    }

    .cashier-module .table-wrap td[data-label=""] .button {
        width: 100%;
    }

    .cashier-module .inline-payment-form {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .cashier-module .inline-payment-form input,
    .cashier-module .inline-payment-form select {
        max-width: none;
        width: 100%;
    }

    .document-mail-history article,
    .document-mail-history article > div {
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .cashier-dashboard-summary,
    .cashier-dashboard-summary.membership-kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 430px) {
    .cashier-module .page-heading h1 {
        font-size: 26px;
    }

    .cashier-batch-list a {
        flex-basis: 88%;
    }

    .cashier-payment-breakdown,
    .cashier-total {
        grid-template-columns: minmax(0, 1fr);
    }

    .cashier-total strong {
        text-align: left;
    }
}

.module-setup-module-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-setup-module-option {
    align-content: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 14px;
}

.module-setup-module-option input {
    width: auto;
}

.module-setup-module-option span {
    font-weight: 900;
}

.module-setup-module-option small {
    color: var(--muted);
    font-weight: 500;
}

.module-setup-table details {
    min-width: min(520px, 70vw);
}

.module-setup-table textarea {
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    min-height: 260px;
    white-space: pre;
}

@media (max-width: 860px) {
    .module-setup-module-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Keep the shared KPI component authoritative over legacy module overrides. */
body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(var(--app-kpi-columns, 4), minmax(0, 1fr));
    margin-bottom: 18px;
}

body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) {
    background: var(--panel, #fff);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
    gap: 7px 12px;
    grid-template-areas: "label icon" "value value" "hint hint";
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-rows: minmax(36px, auto) auto minmax(0, auto);
    min-height: 126px;
    padding: 17px 18px 15px 20px;
}

body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article)::before {
    background: var(--primary);
    border: 0;
    height: auto;
    inset: 0 auto 0 0;
    width: 4px;
}

body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > span:not(.app-kpi-icon):not(.stat-icon),
body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > strong,
body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > strong {
    color: var(--primary);
    font-size: clamp(25px, 2vw, 31px);
    line-height: 1.05;
}

body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
}

body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) .app-kpi-icon,
body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-icon {
    background: var(--primary-soft, #fff0f1);
    border: 0;
    color: var(--primary);
}

@media (max-width: 980px) {
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) {
        gap: 9px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) {
        border-radius: 13px;
        gap: 5px 7px;
        grid-template-columns: minmax(0, 1fr) 28px;
        grid-template-rows: minmax(30px, auto) auto minmax(0, auto);
        min-height: 108px;
        padding: 12px 11px 10px;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article)::before {
        height: 4px;
        inset: 0 0 auto;
        width: auto;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > strong,
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > strong {
        font-size: clamp(20px, 6vw, 25px);
    }
}

/* Mobile polish for the newer finance and water workflows. */
@media (max-width: 760px) {
    .cashier-module,
    .water-module {
        width: min(100% - 24px, 1360px);
    }

    .cashier-module .page-heading,
    .water-module .page-heading {
        gap: 14px;
        margin-bottom: 18px;
    }

    .cashier-module .page-heading h1,
    .water-module .page-heading h1 {
        font-size: 28px;
        line-height: 1.08;
    }

    .cashier-module .page-heading p,
    .water-module .page-heading p {
        font-size: 13px;
        line-height: 1.45;
    }

    .cashier-dashboard-summary,
    .water-overview-kpis {
        margin-inline: -2px;
    }

    .cashier-module-card {
        box-shadow: 0 5px 18px rgba(15, 23, 42, .055);
    }

    .cashier-module-card.has-pending-work {
        border-left: 4px solid #f59e0b;
    }

    .cashier-water-tabs {
        background: #f1f4f7;
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 5px;
    }

    .cashier-water-tabs a {
        border-radius: 9px;
        color: #45515f;
        gap: 7px;
    }

    .cashier-water-tabs a.is-active {
        color: var(--primary);
    }

    .cashier-batch-list {
        border-radius: 13px;
        box-shadow: none;
        margin-bottom: 2px;
        scrollbar-width: thin;
    }

    .cashier-batch-list a {
        background: #fff;
        border-color: var(--line);
        box-shadow: 0 4px 13px rgba(15, 23, 42, .045);
        min-height: 58px;
    }

    .cashier-batch-list a.is-active {
        border-color: #e7b8bd;
        box-shadow: inset 0 0 0 1px #e7b8bd, 0 6px 15px rgba(178, 31, 45, .08);
    }

    .cashier-batch-list a span {
        min-width: 0;
    }

    .cashier-batch-list a small {
        line-height: 1.35;
        white-space: normal;
    }

    .cashier-batch-list a b {
        align-self: center;
        white-space: nowrap;
    }

    .cashier-batch-content > header h2,
    .cashier-draft-list h3 {
        overflow-wrap: anywhere;
    }

    .cashier-summary div {
        border-radius: 12px;
        min-height: 50px;
    }

    .cashier-summary div span {
        font-size: 12px;
        line-height: 1.25;
    }

    .cashier-draft-list {
        gap: 12px;
    }

    .cashier-draft-list article {
        border-left: 4px solid #cbd5e1;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .055);
    }

    .cashier-draft-list article:has(.status-ready),
    .cashier-draft-list article:has(.status-issued) {
        border-left-color: #16a34a;
    }

    .cashier-draft-list article:has(.status-in_review) {
        border-left-color: #f59e0b;
    }

    .cashier-draft-list article:has(.status-cancelled) {
        border-left-color: #94a3b8;
    }

    .cashier-draft-list p,
    .cashier-draft-list small {
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .cashier-draft-total {
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 11px;
        padding: 12px;
    }

    .cashier-draft-total > strong {
        color: var(--primary-dark);
        line-height: 1;
    }

    .cashier-invoice-actions {
        gap: 8px;
    }

    .cashier-invoice-actions .button {
        min-width: 0;
        white-space: normal;
    }

    .cashier-draft-form > .form,
    .cashier-draft-form .form {
        padding: 16px;
    }

    .cashier-customer-heading,
    .cashier-draft-form .section-heading {
        align-items: stretch;
        display: grid;
        gap: 9px;
    }

    .cashier-draft-form .section-heading h2 {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .cashier-draft-form .section-heading p {
        font-size: 12px;
        line-height: 1.45;
    }

    .cashier-item-list article {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
        gap: 11px;
    }

    .cashier-item-list article header > div:first-child strong {
        font-size: 16px;
    }

    .cashier-item-list article header > div:first-child span {
        line-height: 1.4;
    }

    .cashier-item-list article > .cashier-delivery-source {
        border-radius: 11px;
        overflow: hidden;
    }

    .cashier-item-list article > .cashier-payer-split {
        border-radius: 11px;
    }

    .cashier-item-list article > .cashier-payer-split > div > span {
        background: rgba(255, 255, 255, .75);
        border: 1px solid rgba(239, 215, 157, .75);
    }

    .cashier-item-list article > .cashier-payer-split > div > span.is-current {
        background: #fff;
        border-color: #e7b8bd;
        box-shadow: inset 4px 0 var(--primary);
    }

    .cashier-item-list article > div:not(.cashier-delivery-source):not(.cashier-payer-split) label {
        margin: 0;
    }

    .cashier-total.cashier-payment-breakdown {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 14px;
    }

    .cashier-total.cashier-payment-breakdown span,
    .cashier-total.cashier-payment-breakdown strong {
        align-self: center;
    }
}

@media (max-width: 520px) {
    .cashier-dashboard-summary,
    .water-overview-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .cashier-dashboard-summary > article,
    .water-overview-kpis > article {
        min-height: 0;
    }

    .cashier-batch-list a {
        flex-basis: 86%;
    }

    .cashier-item-list article > .cashier-delivery-source > span {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 12px;
    }

    .cashier-item-list article > .cashier-delivery-source small,
    .cashier-item-list article > .cashier-delivery-source strong {
        align-self: center;
    }

    .cashier-item-list article > .cashier-delivery-source strong {
        text-align: right;
    }

    .cashier-item-list article > .cashier-payer-split > div > span {
        align-items: flex-start;
        display: grid;
        gap: 4px;
    }

    .cashier-item-list article > .cashier-payer-split > div > span b {
        white-space: normal;
    }

    .cashier-total.cashier-payment-breakdown {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cashier-total.cashier-payment-breakdown strong {
        font-size: 20px;
    }
}

/* Cashier water entry and compact mobile document lists. */
.cashier-batch-entry {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 18px;
    padding: 22px;
}

.cashier-batch-entry header h2,
.cashier-batch-entry header p {
    margin: 0;
}

.cashier-batch-entry header h2 {
    font-size: 24px;
    margin-top: 4px;
}

.cashier-batch-entry header p {
    color: var(--muted);
    margin-top: 5px;
}

.cashier-batch-entry-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.cashier-batch-entry-list a {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 70px;
    padding: 13px 14px;
    text-decoration: none;
}

.cashier-batch-entry-list a:hover {
    background: #fff;
    border-color: #e7b8bd;
    box-shadow: 0 6px 16px rgba(178, 31, 45, .08);
}

.cashier-batch-entry-list span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cashier-batch-entry-list strong {
    font-size: 16px;
}

.cashier-batch-entry-list small {
    color: var(--muted);
    font-size: 12px;
}

.cashier-batch-entry-list b {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--primary);
    font-size: 12px;
    padding: 6px 9px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .cashier-batch-entry {
        border-radius: 13px;
        gap: 14px;
        padding: 15px;
    }

    .cashier-batch-entry header h2 {
        font-size: 20px;
    }

    .cashier-batch-entry header p {
        font-size: 13px;
        line-height: 1.45;
    }

    .cashier-batch-entry-list {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
    }

    .cashier-batch-entry-list a {
        border-radius: 11px;
        min-height: 58px;
        padding: 11px 12px;
    }

    .cashier-document-list {
        gap: 7px;
    }

    .cashier-document-list article {
        align-items: center;
        border-left: 0;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
        display: grid;
        gap: 8px 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 11px;
    }

    .cashier-document-list article > div:first-child {
        min-width: 0;
    }

    .cashier-document-list .cashier-invoice-badges {
        gap: 4px;
        margin-bottom: 4px;
    }

    .cashier-document-list .cashier-status {
        font-size: 9px;
        padding: 4px 7px;
    }

    .cashier-document-list h3 {
        font-size: 15px;
        line-height: 1.16;
        margin: 0 0 2px;
    }

    .cashier-document-list p,
    .cashier-document-list small {
        font-size: 11px;
        line-height: 1.25;
    }

    .cashier-document-list .cashier-draft-total {
        background: transparent;
        border: 0;
        border-radius: 0;
        display: grid;
        gap: 5px;
        justify-items: end;
        min-width: 108px;
        padding: 0;
        text-align: right;
    }

    .cashier-document-list .cashier-draft-total small,
    .cashier-document-list .cashier-draft-total span {
        display: none;
    }

    .cashier-document-list .cashier-draft-total > strong {
        color: var(--primary-dark);
        font-size: 16px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .cashier-document-list .button-row {
        display: flex;
        gap: 5px;
        justify-content: flex-end;
    }

    .cashier-document-list .button,
    .cashier-document-list .button-row .button {
        border-radius: 8px;
        font-size: 11px;
        min-height: 32px;
        padding: 7px 9px;
        width: auto;
    }

    .cashier-document-list .button-row .button:first-child:nth-last-child(2) {
        display: none;
    }

    .cashier-issued-list article {
        grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
    }

    .cashier-module .payout-section {
        margin-top: 16px;
        padding: 13px;
    }

    .cashier-module .payout-section > header {
        margin-bottom: 8px;
    }

    .cashier-module .payout-section > header h2 {
        font-size: 18px;
    }

    .cashier-module .payout-section .table-wrap {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .cashier-module .payout-section .table-wrap tbody {
        gap: 7px;
    }

    .cashier-module .payout-section .table-wrap tr {
        align-items: start;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
        display: grid;
        gap: 3px 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 11px;
    }

    .cashier-module .payout-section .table-wrap td {
        border: 0;
        display: block;
        min-height: 0;
        min-width: 0;
        padding: 0;
        text-align: left;
        width: auto;
    }

    .cashier-module .payout-section .table-wrap td + td {
        border-top: 0;
    }

    .cashier-module .payout-section .table-wrap td::before {
        display: none;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Številka"] {
        grid-column: 1;
        grid-row: 1;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Številka"] b {
        font-size: 15px;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Voznik"] {
        color: var(--muted);
        font-size: 12px;
        grid-column: 1;
        grid-row: 2;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Obdobje"],
    .cashier-module .payout-section .table-wrap td[data-label="Prevozi"] {
        color: var(--muted);
        font-size: 11px;
        grid-column: 1;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Obdobje"] {
        grid-column: 1 / -1;
        grid-row: 3;
        overflow-wrap: anywhere;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Prevozi"] {
        align-self: center;
        grid-row: 4;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Prevozi"]::before {
        content: attr(data-label) ': ';
        display: inline;
        font-size: inherit;
        text-transform: none;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Znesek"] {
        align-self: start;
        color: var(--primary-dark);
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        white-space: nowrap;
    }

    .cashier-module .payout-section .table-wrap td[data-label="Status"] {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .cashier-module .payout-section .table-wrap td[data-label=""] {
        grid-column: 2;
        grid-row: 4;
        justify-self: end;
    }

    .cashier-module .payout-section .table-wrap td[data-label=""] .button {
        border-radius: 8px;
        font-size: 11px;
        min-height: 32px;
        padding: 7px 10px;
        width: auto;
    }
}

@media (max-width: 430px) {
    .cashier-document-list article {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cashier-document-list .cashier-draft-total {
        min-width: 88px;
    }

    .cashier-document-list .cashier-draft-total > strong {
        font-size: 15px;
    }

    .cashier-document-list .button,
    .cashier-document-list .button-row .button {
        min-height: 30px;
        padding: 6px 8px;
    }
}

/* Keep dashboard KPI cards compact in narrow desktop and phone widths. */
@media (max-width: 760px) {
    .dashboard-container .dashboard-kpis.app-kpi-grid {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 16px;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid > .stat-card.app-kpi-card {
        align-content: stretch;
        border-radius: 12px;
        gap: 6px 8px;
        grid-template-areas:
            "label icon"
            "value value";
        grid-template-columns: minmax(0, 1fr) 28px;
        grid-template-rows: minmax(34px, auto) 1fr;
        height: 104px;
        min-height: 0;
        padding: 11px 10px 10px;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid > .stat-card.app-kpi-card::before {
        height: 4px;
        inset: 0 0 auto;
        width: auto;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid .stat-icon {
        align-self: start;
        border-radius: 8px;
        height: 28px;
        justify-self: end;
        width: 28px;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid .stat-icon svg {
        height: 16px;
        width: 16px;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid .stat-content {
        display: contents;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid .stat-content span {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        align-self: start;
        display: -webkit-box;
        font-size: 10px;
        line-height: 1.18;
        min-height: 0;
        overflow: hidden;
        padding-right: 2px;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid .stat-content strong {
        align-self: end;
        font-size: 22px;
        line-height: 1;
        overflow-wrap: anywhere;
        white-space: nowrap;
    }
}

@media (min-width: 621px) and (max-width: 760px) {
    .dashboard-container .dashboard-kpis.app-kpi-grid > .stat-card.app-kpi-card {
        height: 96px;
    }
}

@media (max-width: 390px) {
    .dashboard-container .dashboard-kpis.app-kpi-grid {
        gap: 7px;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid > .stat-card.app-kpi-card {
        grid-template-columns: minmax(0, 1fr) 26px;
        height: 92px;
        padding: 10px 9px 9px;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid .stat-icon {
        height: 26px;
        width: 26px;
    }

    .dashboard-container .dashboard-kpis.app-kpi-grid .stat-content strong {
        font-size: 20px;
    }
}

/* Shared compact KPI treatment for all modules in narrow widths. */
@media (max-width: 760px) {
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) {
        align-content: start;
        border-radius: 12px;
        gap: 5px 8px;
        grid-template-areas:
            "label icon"
            "value value"
            "hint hint";
        grid-template-columns: minmax(0, 1fr) 28px;
        grid-template-rows: auto auto auto;
        height: auto;
        min-height: 92px;
        padding: 11px 10px 10px;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article)::before {
        height: 4px;
        inset: 0 0 auto;
        width: auto;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content {
        display: contents;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > span:not(.app-kpi-icon):not(.stat-icon),
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > span {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        align-self: start;
        display: -webkit-box;
        font-size: 10px;
        line-height: 1.18;
        min-height: 0;
        overflow: hidden;
        padding-right: 2px;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > strong,
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > strong {
        align-self: end;
        font-size: 21px;
        line-height: 1;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > small {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        font-size: 10px;
        line-height: 1.2;
        min-width: 0;
        overflow: hidden;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) .app-kpi-icon,
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-icon {
        align-self: start;
        border-radius: 8px;
        height: 28px;
        justify-self: end;
        width: 28px;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) .app-kpi-icon svg,
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-icon svg {
        height: 16px;
        width: 16px;
    }
}

@media (max-width: 390px) {
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) {
        gap: 7px;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) {
        grid-template-columns: minmax(0, 1fr) 26px;
        min-height: 88px;
        padding: 10px 9px 9px;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) .app-kpi-icon,
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-icon {
        height: 26px;
        width: 26px;
    }

    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > strong,
    body :is(.app-kpi-grid, .cashier-dashboard-summary, .command-kpis, .water-stat-kpis) > :is(.app-kpi-card, .stat-card, article) > .stat-content > strong {
        font-size: 20px;
    }
}

/* Command room keeps its dark fullscreen dashboard treatment. */
html body.command-room-body .command-kpis {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 12px;
}

html body.command-room-body .command-kpis > article {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    gap: 9px;
    justify-content: center;
    min-height: 86px;
    overflow: hidden;
    padding: 14px 16px;
    position: relative;
}

html body.command-room-body .command-kpis > article::before,
html body.command-room-body .command-kpis > article::after {
    content: none !important;
    display: none !important;
}

html body.command-room-body .command-kpis > article > span {
    color: #b7c0ca;
    display: block;
    font-size: 11px;
    font-weight: 800;
    grid-area: auto;
    letter-spacing: 0.06em;
    line-height: 1.15;
    order: 1;
    padding-right: 0;
    text-transform: uppercase;
}

html body.command-room-body .command-kpis > article > strong {
    color: #ffffff;
    display: block;
    font-size: 34px;
    font-weight: 800;
    grid-area: auto;
    letter-spacing: 0;
    line-height: 1;
    order: 2;
    overflow-wrap: normal;
}

html body.command-room-body .command-kpis > article > small {
    color: #b7c0ca;
    display: block;
    font-size: 13px;
    grid-area: auto;
    line-height: 1.35;
    overflow: visible;
}

@media (max-width: 980px) {
    html body.command-room-body .command-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    html body.command-room-body .command-kpis {
        gap: 9px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 14px;
    }

    html body.command-room-body .command-kpis > article {
        min-height: 78px;
        padding: 12px 11px 10px;
    }

    html body.command-room-body .command-kpis > article > span {
        font-size: 10px;
        line-height: 1.18;
        overflow: hidden;
    }

    html body.command-room-body .command-kpis > article > strong {
        font-size: clamp(20px, 6vw, 25px);
        overflow-wrap: anywhere;
    }

    html body.command-room-body .command-kpis > article > small {
        font-size: 9px;
        overflow: hidden;
    }
}

html body.command-room-body .command-metric-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 184px;
}

html body.command-room-body .command-metric-grid > article {
    align-content: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid rgba(229, 43, 59, 0.82);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 30px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-areas: none;
    grid-template-columns: none;
    grid-template-rows: none;
    justify-content: center;
    justify-items: start;
    min-height: 136px;
    overflow: hidden;
    padding: 20px 24px;
    position: relative;
    text-align: left;
}

html body.command-room-body .command-metric-grid > article::before,
html body.command-room-body .command-metric-grid > article::after {
    content: none !important;
    display: none !important;
}

html body.command-room-body .command-metric-grid > article > span {
    color: #b7c0ca;
    font-size: 11px;
    font-weight: 800;
    grid-area: auto;
    letter-spacing: 0.06em;
    line-height: 1.25;
    padding: 0;
    text-transform: uppercase;
}

html body.command-room-body .command-metric-grid > article > strong {
    color: #ffffff;
    font-size: 38px;
    font-weight: 900;
    grid-area: auto;
    letter-spacing: 0;
    line-height: 1;
    overflow-wrap: normal;
}

/* Urejevalnik vodnega žiga na telefonu: celozaslonsko okno nad spodnjo vrstico menija.
   Prej je bil pod vrstico (z-index 100 proti 990), zato gumba za shranjevanje ni bilo mogoče doseči. */
@media (max-width: 760px) {
    body.watermark-editor-open {
        overflow: hidden !important;
    }

    body.watermark-editor-open .mobile-tabbar {
        display: none !important;
    }

    .watermark-modal {
        align-items: stretch !important;
        height: 100vh;
        height: 100dvh !important;
        inset: 0 !important;
        padding: env(safe-area-inset-top) 0 0 !important;
        z-index: 2200 !important;
    }

    .watermark-dialog {
        border-radius: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .watermark-dialog form {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .watermark-stage,
    .watermark-stage > img:first-child {
        max-height: 46vh !important;
        max-height: 46dvh !important;
    }

    .watermark-controls .button.primary {
        bottom: calc(8px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.18);
        position: sticky;
        z-index: 5;
    }
}

/* Izbirnik članov in vodje na telefonu je celozaslonski in mora biti nad glavo aplikacije (z-index 1000)
   in spodnjo vrstico (990). Prej je bil pod njima (200), zato gumba »Potrdi izbor« in puščice za zapiranje
   ni bilo mogoče doseči.
   Postavitev je stolpec: seznam članov zapolni preostali prostor in se pomika, glava, iskanje, izbrani člani
   in gumb za potrditev ostanejo vidni ne glede na to, koliko vrstic je prikazanih. */
@media (max-width: 700px) {
    .mobile-member-picker {
        display: flex;
        flex-direction: column;
        z-index: 2200 !important;
    }

    .mobile-member-picker > * {
        flex: 0 0 auto;
    }

    .mobile-member-picker > .mobile-picker-list,
    .mobile-member-picker > .mobile-leader-list {
        flex: 1 1 0;
        min-height: 0;
    }

    .mobile-leader-list {
        align-content: start;
    }

    .mobile-picker-scope[hidden],
    .mobile-picker-list[hidden] {
        display: none !important;
    }

    body.mobile-picker-open .mobile-tabbar {
        display: none !important;
    }
}

/*
 * Lupina strani: ves prosti prostor dobi vsebina, glava in noga ostaneta svoje višine.
 * Brez tega so se vrstice mreže raztegnile enakomerno in je kratka stran (malo vsebine)
 * dobila prazen pas med glavo in naslovom. Elementi so razvrščeni po vrsti izrecno,
 * ker glava na telefonu ni v toku strani (position: fixed).
 */
.app-shell {
    grid-template-rows: auto 1fr auto;
}

.app-shell > .topbar {
    grid-row: 1;
}

.app-shell > main {
    grid-row: 2;
}

.app-shell > .app-footer {
    grid-row: 3;
}

/* Opozorilo: razred se uporablja na več straneh, sloga pa ni imel in se je izpisal kot golo besedilo. */
.alert-warning {
    background: #fff4dc;
    border-color: #f0cf70;
    color: #805b00;
}

/* Pojasnilo: razred je bil v uporabi brez sloga. */
.alert-info {
    background: #eef3fb;
    border-color: #cbd8ee;
    color: #24406b;
}

.alert-info p {
    margin: 0;
}

.alert-info p + p {
    margin-top: 6px;
}

/* Zahtevek nekdanjega člana zveze: gumb za izbris pod stanjem. */
.association-former-claim-delete {
    display: block;
    margin: 6px 0 0;
}

.association-former-claim-delete .button {
    min-height: 34px;
    padding: 6px 12px;
}

/* Prejemniki obvestil pri zvezi: en sam stolpec z izbiro. */
.notification-user-list-head.is-association,
.notification-user-row.is-association {
    grid-template-columns: minmax(260px, 1.6fr) minmax(220px, 1fr);
}

/* Obračunska obdobja zveze: izbira leta in roki oddaje. */
.billing-period-years {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.billing-period-years .button {
    min-height: 38px;
    padding: 6px 16px;
}

.billing-periods-form input[type="date"] {
    max-width: 190px;
}

.billing-period-default {
    color: var(--muted);
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.billing-periods-actions {
    display: flex;
    justify-content: flex-end;
    margin: 14px 0;
}

.status-pill.pending {
    background: #fff3cd;
    border-color: #f0cf70;
    color: #805b00;
}

@media (max-width: 760px) {
    .notification-user-row.is-association {
        grid-template-columns: 1fr;
    }
}

.billing-periods-form table th,
.billing-periods-form table td {
    text-align: left;
    vertical-align: middle;
}

.billing-periods-form table th:last-child,
.billing-periods-form table td:last-child {
    text-align: right;
}

@media (max-width: 760px) {
    .billing-periods-form table {
        min-width: 0;
        width: 100%;
    }

    .billing-periods-form table td,
    .billing-periods-form table td:last-child {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
        text-align: left;
    }

    .billing-periods-form table td::before {
        flex: 0 0 112px;
    }

    .billing-periods-form input[type="date"] {
        flex: 1 1 150px;
        max-width: none;
    }

    .billing-period-default {
        flex: 0 0 100%;
    }

    .billing-periods-actions .button {
        width: 100%;
    }
}

/* Značka funkcije v vodstvu zveze pri uporabniku. */
.status-pill.leadership {
    background: #e8eefc;
    border-color: #c5d3f5;
    color: #23408e;
}

/* Ko je stikalo testnega brisanja izklopljeno, kontrole TESTNIH dejanj niso prikazane.
   Redna brisanja (fotografija, priponka, osnutek, uporabnik ...) ureja vsaka stran s pravicami. */
.destructive-actions-disabled form:has(input[type="hidden"][name="action"][value$="_test"]),
.destructive-actions-disabled form:has(input[type="hidden"][name="action"][value^="test_"]),
.destructive-actions-disabled form:has(input[type="hidden"][name="action"][value="purge"]),
.destructive-actions-disabled form:has(input[type="hidden"][name="action"][value="reset_batch"]),
.destructive-actions-disabled [name="action"][value$="_test"],
.destructive-actions-disabled [name="action"][value^="test_"],
.destructive-actions-disabled [name="action"][value="purge"],
.destructive-actions-disabled [name="action"][value="reset_batch"] {
    display: none !important;
}

/* Release 2.0 layout safety: hidden state, shrinkable shell tracks and usable controls. */
[hidden] {
    display: none !important;
}

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

.app-shell > .topbar,
.app-shell > main,
.app-shell > .app-footer {
    min-width: 0;
}

.membership-modal-close {
    height: 42px;
    width: 42px;
}

.compact-button,
#bulk-allocation-select-all,
#bulk-allocation-apply {
    min-height: 40px;
}

.photo-selection-remove,
.photo-delete-form button {
    height: 40px;
    width: 40px;
}

.trial-notice-dismiss .button {
    min-height: 40px;
}

.button:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary.button:focus-visible {
    outline: 3px solid rgba(178, 31, 45, .3);
    outline-offset: 3px;
}

.button:disabled,
button:disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
}

.command-slide-controls {
    gap: 6px;
}

.command-slide-controls > button {
    flex: 0 0 40px;
    height: 40px;
    width: 40px;
}

.command-slide-dots {
    gap: 0;
}

.command-slide-dots button {
    align-items: center;
    background: transparent;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
}

.command-slide-dots button::after {
    background: rgba(255, 255, 255, .28);
    border-radius: 999px;
    content: "";
    height: 9px;
    width: 24px;
}

.command-slide-dots button.is-active {
    background: transparent;
}

.command-slide-dots button.is-active::after {
    background: #fff;
}

@media (min-width: 901px) {
    .intervention-card:not(.is-first-responders) {
        gap: 16px;
        grid-template-columns: minmax(360px, 1.7fr) minmax(200px, .9fr) minmax(125px, 145px) minmax(88px, 100px);
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .button {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .directory-card-side {
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .directory-card-side {
        grid-column: 1 / -1;
    }
}

.membership-member-row {
    cursor: pointer;
}

.membership-member-row:focus-visible {
    outline: 2px solid rgba(239, 27, 45, .45);
    outline-offset: -2px;
}

.membership-row-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.membership-detail-row[hidden] {
    display: none;
}

.membership-detail-row td {
    background: #fbfcfd;
    padding: 0 16px 14px;
}

.membership-detail-panel {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(150px, .35fr) 1fr;
    padding: 12px;
}

.membership-detail-title {
    display: grid;
    gap: 3px;
}

.membership-detail-title strong {
    font-size: .82rem;
}

.membership-detail-title span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 700;
}

.membership-year-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.membership-year-chip {
    background: #f8fafc;
    border: 1px solid #e6ebf1;
    border-left: 4px solid #94a3b8;
    border-radius: 10px;
    display: grid;
    gap: 2px;
    min-width: 132px;
    padding: 8px 10px;
}

.membership-year-chip span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.membership-year-chip strong {
    font-size: .78rem;
    text-transform: uppercase;
}

.membership-year-chip small,
.membership-year-chip b {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}

.membership-year-chip.is-open {
    border-left-color: #ef1b2d;
}

.membership-year-chip.is-open strong,
.membership-year-chip.is-open b {
    color: #bd1021;
}

.membership-year-chip.is-partial {
    border-left-color: #eab308;
}

.membership-year-chip.is-partial strong,
.membership-year-chip.is-partial b {
    color: #986200;
}

.membership-year-chip.is-paid {
    border-left-color: #22c55e;
}

.membership-year-chip.is-paid strong {
    color: #14783b;
}

@media (max-width: 900px) {
    .membership-row-actions {
        justify-content: stretch;
    }

    .membership-row-actions .button {
        flex: 1;
    }

    .membership-detail-row {
        display: block;
    }

    .membership-detail-row td {
        display: block;
        padding: 0 14px 12px;
    }

    .membership-detail-row td::before {
        content: none;
    }

    .membership-detail-panel {
        grid-template-columns: 1fr;
    }

    .membership-year-chip {
        flex: 1 1 128px;
    }
}