*{box-sizing:border-box}body{margin:0;background:#f6f8f7;color:#20352b;font:17px system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:24px}header,section,article{padding:20px;background:white;border:1px solid #d5dfd9;border-radius:12px;margin-bottom:18px}form{display:grid;gap:16px;max-width:680px}label{display:block}input:not([type=checkbox]):not([type=hidden]){display:block;width:100%;padding:12px;border:1px solid #84998c;border-radius:6px;margin-top:6px}fieldset{border:1px solid #84998c;border-radius:8px}button{padding:12px 20px;background:#176441;color:white;border:0;border-radius:8px;cursor:pointer}a{color:#125437}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #d78813;outline-offset:3px}
select{display:block;width:100%;padding:12px;background:white;border:1px solid #84998c;border-radius:6px;margin-top:6px}article form{margin-bottom:16px}p[role=status]{padding:16px;border:1px solid #176441;border-radius:8px;background:#eaf5ee}

p[role=status]:empty{display:none}button:disabled{background:#69756f;cursor:not-allowed}
textarea{display:block;width:100%;padding:12px;font:inherit}article.vacant{background:#e5e7eb;color:#202a30}article.occupied{background:#b91c3d;color:white}article.occupied a{color:white}input[readonly]{background:#edf0ee}
.wide-form{max-width:none}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #ccd5cf}td input:not([type=checkbox]){min-width:140px}.tabs{display:flex;gap:12px;margin:24px 0}.tabs a{padding:12px;border:1px solid #176441;border-radius:8px}.tabs a[aria-current]{background:#176441;color:white}
.bill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.bill-card{padding:20px;border-radius:14px}.bill-unsent{background:#e7e9eb;color:#263238}.bill-sent{background:#bf2851;color:white}.bill-paid{background:#147d42;color:white}.bill-card a{color:inherit}.bill-card label{color:inherit}
:root{--accent:#176441}.app-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.app-shell.no-sidebar{grid-template-columns:minmax(0,1fr)}main{width:100%;max-width:none;min-width:0;margin:0;padding:28px}#app-sidebar{padding:20px 12px;background:white;border-right:1px solid #d5dfd9}#side-links{display:grid;gap:12px;margin-top:22px}#side-links a{display:flex;gap:14px;align-items:center;padding:14px;text-decoration:none;border-radius:10px}#side-links a:hover{background:#f0f2f2}.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}.sidebar-collapsed .nav-label{display:none}button,.tabs a[aria-current]{background:var(--accent)}a{color:var(--accent)}.bill-card a,article.occupied a{color:inherit}.connection-badge{display:inline-block;padding:6px 10px;border:1px solid currentColor;border-radius:8px;font-size:.85em}input[type=color]{height:48px;max-width:130px}input[type=range]{padding:0!important}form{margin-bottom:18px}#side-links a:focus-visible{outline:3px solid #d78813}@media(max-width:650px){.app-shell{grid-template-columns:68px minmax(0,1fr)}#app-sidebar{padding:16px 6px}.nav-label{display:none}main{padding:12px}header,section,article{padding:14px}h1{font-size:1.6rem}h2{font-size:1.3rem}.bill-grid{grid-template-columns:minmax(0,1fr)}#side-links a{padding:12px}button{padding:12px}.sidebar-collapsed{grid-template-columns:68px minmax(0,1fr)}}
form,fieldset{min-width:0}main{overflow-wrap:anywhere}@media(max-width:650px){.app-shell:not(.sidebar-collapsed) #app-sidebar{width:220px;position:relative;z-index:2;box-shadow:5px 0 15px #0002}.app-shell:not(.sidebar-collapsed) .nav-label{display:inline}}

/* Clear delivery state independently of payment status. */
.bill-delivery-status{margin:18px 0}.bill-envelope{display:block;width:100px;height:80px;max-width:100%;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;color:#ffe078}.bill-unsent .bill-envelope{color:#596571}.bill-envelope-paper{fill:#fff;stroke:#d5dfd9;stroke-width:3}.bill-delivery-label{font-size:1rem;font-weight:700;margin:10px 0}.bill-slip-badge{display:inline-block;border:2px solid currentColor;border-radius:8px;padding:6px 10px;font-weight:700}

/* Payment state is distinct from delivery/read state. */
.bill-payment-status{margin:22px 0;padding-top:18px;border-top:1px solid currentColor}.bill-money-icon{display:block;width:100px;height:80px;max-width:100%;fill:none;stroke:#ffe078;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.bill-money-note{fill:#fff}.bill-money-icon circle,.bill-money-icon rect,.bill-money-icon>path:not(.bill-money-marker){stroke:#176441}.bill-money-icon text{fill:#176441;stroke:none;font:bold 22px system-ui,sans-serif}.bill-payment-label{font-size:1rem;font-weight:700;margin:10px 0}.bill-payment-note{font-size:.9rem;margin:6px 0}

.slip-preview{margin:20px 0;max-width:680px}.slip-preview figcaption{font-weight:700;margin-bottom:12px}.slip-preview-image{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain;border:1px solid #84998c;border-radius:8px;background:white}

/* Tenant review feedback uses text and icons as well as color. */
.tenant-payment-alert{padding:18px;border:1px solid;border-left-width:6px;border-radius:10px;margin-bottom:24px}
.tenant-payment-alert h3{margin:0 0 10px;color:inherit}.tenant-payment-alert p{margin:0}
.tenant-payment-alert--rejected{background:#fff1f2;border-color:#be123c;color:#881337}
.tenant-payment-alert--pending{background:#fffbeb;border-color:#b45309;color:#78350f}
.tenant-payment-history{background:#fff;padding:12px 0;border-top:1px solid #d5dfd9}
.tenant-payment-badge{display:inline-block;padding:4px 10px;border:1px solid currentColor;border-radius:6px}
.tenant-payment-badge--rejected{color:#881337;background:#fff1f2}
.tenant-payment-badge--pending{color:#78350f;background:#fffbeb}
.tenant-payment-badge--confirmed{color:#14532d;background:#f0fdf4}

/* Clear room navigation remains available after a tenant moves out. */
.room-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 10px}
a.room-action,article.occupied a.room-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #176441;border-radius:8px;background:#fff;color:#125437;font-weight:600;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
a.room-action:hover,article.occupied a.room-action:hover{background:#eaf5ee}
.room-action-help{font-size:.9em;margin-top:12px}
@media(max-width:650px){.room-actions .room-action{width:100%}}

/* Expandable grouped navigation, with usable labels on desktop and mobile. */
.app-shell{grid-template-columns:280px minmax(0,1fr)}
#app-sidebar{position:sticky;top:0;height:100vh;overflow-y:auto}
#side-links{display:block}#side-links .nav-group{margin:8px 0;border-bottom:1px solid #d5dfd9;padding-bottom:8px}
#side-links summary{cursor:pointer;padding:12px 8px;font-weight:700;min-height:44px}
#side-links summary:focus-visible{outline:3px solid #d78813}
#side-links .nav-group a{padding:10px 12px 10px 24px;min-height:44px;font-size:.95em}
#side-links a[aria-current=page]{background:#eaf5ee;color:#125437;border-left:4px solid #176441;font-weight:700}
.nav-logout{margin:20px 0}.nav-logout button{width:100%}
.app-shell.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}
.sidebar-collapsed #side-links{display:none}
@media(max-width:650px){.app-shell:not(.no-sidebar){grid-template-columns:minmax(0,1fr)}#app-sidebar{position:static;height:auto;max-height:65vh;border-bottom:1px solid #d5dfd9}.sidebar-collapsed #side-links{display:none}#sidebar-toggle .nav-label{display:inline}#side-links a{padding:12px}.app-shell.no-sidebar{grid-template-columns:minmax(0,1fr)}}