/* The class layout rules must never override semantic hidden state. */
[hidden] { display: none !important; }
.health-dot.vacant { background: #aab5b2; }
.health-dot.good { background: #4a8b62; }
.health-dot.due { background: #d8872f; }
.health-dot.overdue { background: #c95b4b; }
.status.good { color: #286440; }
.status.due { color: #9a5616; }
.status.overdue { color: #9c372b; }
.stall-button { color: inherit; cursor: pointer; font: inherit; text-align: left; width: 100%; }
.stall-button:hover { border-color: #b6d9d7; box-shadow: 0 8px 24px rgba(24,52,58,.07); transform: none; }
.stall-grid { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 15px; }
.stall-grid.showing-detail { display: block; }
.stall-card .health-dot, .stall-detail-heading .health-dot { margin-right: .45rem; }
.stall-card .status { align-items: center; display: inline-flex; text-align: right; }
.stall-arrears { border-top: 1px solid var(--line); display: grid; gap: .2rem; margin-top: 1rem; padding-top: .8rem; }
.stall-arrears small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.stall-arrears strong { font-size: .9rem; }
.vacant-status { color: var(--muted); }
.stall-detail { display: grid; gap: 1.5rem; margin: 0 auto; max-width: 1120px; }
.stall-detail > .text-button { justify-self: start; }
.stall-detail-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding-bottom: 1.25rem; }
.stall-detail-heading h2 { font: clamp(2rem, 3.4vw, 3rem)/1.05 Georgia, serif; letter-spacing: -.045em; margin: .2rem 0 0; max-width: 24ch; overflow-wrap: anywhere; }
.stall-detail-heading .status { align-items: center; display: inline-flex; flex: 0 0 auto; }
.stall-detail-summary { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stall-detail-summary span { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; color: var(--muted); display: grid; font-size: .78rem; gap: .35rem; padding: 1.1rem 1.2rem; }
.stall-detail-summary strong { color: var(--ink); font-size: 1rem; }
.stall-history { padding: 1.5rem; }
.stall-history h2 { margin-top: .3rem; }
.history-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: .8rem; }
.history-heading > span { color: var(--muted); font-size: .78rem; }
.stall-payment { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding: .9rem 0; }
.stall-payment b, .stall-payment small { display: block; }
.stall-payment small { color: var(--muted); margin-top: .25rem; overflow-wrap: anywhere; }
.vacant-card { background: #f1f3ef; border-style: dashed; cursor: default; }
.vacant-note { color: var(--muted); font-size: .78rem; line-height: 1.5; margin: 0; }
.stall-bottom { display: grid; grid-template-columns: 1fr; gap: .55rem; }
.stall-bottom span { align-items: baseline; display: flex; justify-content: space-between; gap: 1rem; min-width: 0; overflow-wrap: anywhere; }
.stall-bottom strong { display: inline; text-align: right; }
.payment-table-row { grid-template-columns: minmax(180px, 1.5fr) minmax(80px, .7fr) minmax(145px, 1fr) minmax(90px, .7fr); }
.payment-table-row > span:first-child { min-width: 0; }
.payment-table-row > span:first-child b, .receipt { display: block; overflow-wrap: anywhere; }
.receipt { margin-top: .3rem; }
@media (max-width: 780px) {
  .payment-table-row { grid-template-columns: minmax(0, 1fr) auto; }
  .payment-table-row span:nth-child(2) { display: none; }
  .payment-table-row span:nth-child(3), .payment-table-row span:nth-child(4) { display: block; }
  .payment-table-row span:nth-child(3) { grid-column: 2; grid-row: 1; }
  .payment-table-row span:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
}
.admin-page { margin: 0 auto; max-width: 1180px; padding: 2rem; }
.admin-header { align-items: center; display: flex; justify-content: space-between; }
.admin-nav { align-items: center; display: flex; gap: .75rem; }
.admin-header > .menu-button { display: none; }
.admin-brand { color: var(--ink); text-decoration: none; }
.admin-intro { margin: 5rem 0 2rem; max-width: 650px; }
.admin-intro h1 { font: 3.2rem/1 Georgia, serif; letter-spacing: -.055em; margin: 0; }
.admin-intro p:last-child { color: var(--muted); line-height: 1.6; }
.admin-grid { display: grid; gap: 1.2rem; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); }
.admin-panel { padding: 1.7rem; }
.admin-form { display: grid; gap: 1rem; margin-top: 1.4rem; }
.admin-form label, .reconciliation-row label { color: var(--muted); display: grid; font-size: .77rem; gap: .4rem; }
.admin-form input, .admin-form select, .reconciliation-row input, .reconciliation-row select { background: white; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; padding: .7rem; }
.switch-line { align-items: center; display: flex !important; gap: .6rem !important; }
.reconciliation-list { display: grid; gap: .8rem; margin-top: 1.25rem; }
.reconciliation-row { border-top: 1px solid var(--line); display: grid; gap: .7rem; padding-top: 1rem; }
.reconciliation-row b, .reconciliation-row small { display: block; }
.reconciliation-row small { color: var(--muted); margin-top: .25rem; }
@media (max-width: 780px) { .dashboard-grid .health-panel { order: -1; } .stall-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stall-detail-heading { align-items: start; flex-direction: column; } .stall-payment { align-items: start; } .stall-payment strong { white-space: nowrap; } .history-heading { align-items: start; gap: .7rem; } .admin-page { padding: 1.2rem; } .admin-header > .menu-button { display: block; } .admin-nav { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(24,52,58,.14); display: none; flex-direction: column; padding: .8rem; position: absolute; right: 1.2rem; top: 4.8rem; z-index: 4; } .admin-nav.open { display: flex; } .admin-intro { margin-top: 3rem; } .admin-intro h1 { font-size: 2.5rem; } .admin-grid { grid-template-columns: 1fr; } }