:root{
    color-scheme: light dark;
    /* iOS typography: Apple's own San Francisco (SF Pro) on iPhone, iPad and Mac via the system
       font; everywhere else Inter, the closest open font to SF Pro. */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* One typeface for the whole app. Numbers/dates keep aligned digits via tabular-nums below,
       so the old monospace slot now points at the same family. */
    --font-mono: var(--font-sans);
    --bg: #f1f3f0;
    --bg-elevated: #ffffff;
    --border: #dde2db;
    --text: #1c2521;
    --text-dim: #57625b;
    --text-faint: #8a968e;
    --accent: #2e4d6e;
    --accent-bg: #e5ebf0;
    --sidebar-bg: #ffffff;
    --shadow: 0 1px 2px rgba(20,30,25,0.05), 0 1px 3px rgba(20,30,25,0.06);
    --status-paid: #1a9c5b;
    --status-paid-bg: #e5f7ee;
    --status-due: #b9750a;
    --status-due-bg: #fbf0dd;
    --status-overdue: #d8393f;
    --status-overdue-bg: #fbe7e7;
    --status-upcoming: #2f6fd1;
    --status-upcoming-bg: #e8eefd;
    --status-move: #8b3fd1;
    --status-move-bg: #f2e8fc;
  }

  *{box-sizing:border-box;}
  [hidden]{display:none!important;}
  body{
    color:var(--text);
  }
  #app{min-height:100%;}
  .shell{display:flex;min-height:100dvh;}

  /* ---------- Sidebar (desktop) ---------- */
  .sidebar{
    display:none;
    width:248px;flex-shrink:0;
    flex-direction:column;
  }
  .brand{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;}
  .brand-mark{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .brand-name{font-size:14px;font-weight:600;line-height:1.2;}
  .brand-sub{font-size:12px;color:var(--text-faint);}

  /* ---- Logo mark: a little apartment building, since that's what this app runs ----
   * .logo-body is the block itself, .logo-window each unit, .logo-door the entry. The static
   * sidebar copy just has two windows lit for a lived-in look; the loading-screen copy adds the
   * .loading-logo modifier, which sets every window chasing through .winChase in sequence (like
   * dusk falling over the block) and gives the whole building a slow float — one deliberate
   * animated moment, not scattered motion. Tapping a window (tapLogoWindow in index.html, a plain
   * inline script so it works before app.js's module has loaded) flips it with .logo-tap for a
   * quick playful bounce, independent of the automatic chase. */
  .logo-mark .logo-body{fill:var(--accent);}
  .logo-mark .logo-door{fill:var(--bg-elevated);}
  .logo-mark .logo-window{fill:var(--accent-bg);}
  .logo-mark .logo-window.lit{fill:var(--status-paid);}

  .loading-logo{width:104px;height:104px;margin:0 auto 16px;display:block;animation:logoFloat 2.6s ease-in-out infinite;}
  @keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
  .loading-logo .logo-window{cursor:pointer;transform-box:fill-box;transform-origin:center;animation:winChase 2.4s ease-in-out infinite;}
  .loading-logo .logo-window.logo-tap{animation:winTap .5s ease-out;}
  @keyframes winChase{
    0%, 91.6%, 100%{fill:var(--accent-bg);}
    4.2%, 16.6%{fill:var(--status-paid);}
  }
  @keyframes winTap{
    0%{fill:var(--status-upcoming);transform:scale(1.35);}
    100%{fill:var(--status-paid);transform:scale(1);}
  }
  .loading-caption{text-align:center;color:var(--text-dim);font-size:13.5px;}
  .loading-caption .dot{animation:dotFade 1.4s infinite;}
  .loading-caption .dot:nth-child(2){animation-delay:.2s;}
  .loading-caption .dot:nth-child(3){animation-delay:.4s;}
  @keyframes dotFade{0%,80%,100%{opacity:.25;}40%{opacity:1;}}
  .nav{flex:1;padding:4px 12px;display:flex;flex-direction:column;gap:2px;}
  .nav a{
    display:flex;align-items:center;gap:12px;
    padding:9px 12px;border-radius:9px;
    font-size:13.5px;font-weight:500;color:var(--text-dim);text-decoration:none;
  }
  .nav a svg{width:18px;height:18px;flex-shrink:0;}
  .nav a{transition:background-color .15s ease,color .15s ease;}
  .nav a.active{background:var(--accent-bg);color:var(--accent);}
  .nav a:hover:not(.active){background:var(--border);color:var(--text);}
  .nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .nav-section-header{
    padding:14px 12px 4px;
    font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-faint);
  }
  .sidebar-foot{padding:14px 20px;font-size:11.5px;color:var(--text-faint);border-top:1px solid var(--border);}

  /* ---------- Main column ---------- */
  .main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .topbar{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:5;
    display:flex;align-items:center;justify-content:flex-start;gap:8px;
    padding:12px 16px;
  }
  .search{
    display:flex;align-items:center;gap:8px;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:9px;padding:7px 12px;color:var(--text-faint);font-size:13px;
    max-width:420px;flex:1;margin-right:auto;cursor:pointer;font-family:inherit;text-align:left;
    transition:border-color .15s ease,background-color .15s ease;
  }
  .search:hover, .search:focus-visible{background:var(--border);color:var(--text-dim);}
  .search:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .search svg{width:15px;height:15px;flex-shrink:0;}
  .icon-btn{
    width:34px;height:34px;border-radius:999px;border:1px solid var(--border);
    background:var(--bg-elevated);color:var(--text-dim);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    cursor:pointer;transition:background-color .15s ease;
  }
  .icon-btn svg{width:17px;height:17px;}
  .icon-btn:hover{background:var(--border);}
  .icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  /* ---------- Search modal ---------- */
  .search-modal-card{width:100%;max-width:420px;max-height:80vh;display:flex;flex-direction:column;}
  .search-input-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border);
    border-radius:9px;padding:8px 12px;background:var(--bg);margin-top:2px;}
  .search-input-row svg{width:16px;height:16px;color:var(--text-faint);flex-shrink:0;}
  .search-input-row input{flex:1;border:none;background:none;color:var(--text);font-size:14px;
    font-family:inherit;outline:none;min-width:0;}
  .search-results{margin-top:10px;overflow-y:auto;max-height:50vh;}
  .search-result-row{
    display:flex;align-items:center;gap:10px;padding:10px 4px;border-radius:9px;
    text-decoration:none;color:inherit;cursor:pointer;transition:background-color .15s ease;
  }
  .search-result-row:hover, .search-result-row:focus-visible{background:var(--border);}
  .search-result-row .srch-icon{
    width:32px;height:32px;border-radius:50%;background:var(--accent-bg);color:var(--accent);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .search-result-row .srch-icon svg{width:16px;height:16px;}
  .search-result-row .name{font-size:13.5px;font-weight:600;}
  .search-result-row .meta{font-size:12px;color:var(--text-faint);}
  .search-empty{padding:18px 4px;text-align:center;color:var(--text-faint);font-size:13px;}

  main.content{flex:1;padding:16px 16px 96px;}
  @media (min-width:768px){ main.content{padding:28px 32px 44px;} }
  .content-inner{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:22px;}

  h1.page-title{margin:0;}
  p.page-sub{margin:4px 0 0;color:var(--text-dim);font-size:13.5px;}

  .card{
    background:var(--bg-elevated);border:1px solid var(--border);padding:17px;box-shadow:var(--shadow);
  }
  a.card{display:block;transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease;}
  a.card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(20,30,25,.09);}
  a.card:active{transform:scale(0.995);}
  a.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .prop-card{transition:border-color .15s ease;}
  .prop-card:has(.prop-head:hover){border-color:var(--accent);}
  .card h2{margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--text-dim);
    padding-bottom:8px;border-bottom:1px solid var(--border);}

  .stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
  @media (min-width:640px){ .stat-grid{grid-template-columns:repeat(4,1fr);} }
  .stat-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  @media (min-width:420px){ .stat-grid.cols-3{grid-template-columns:repeat(3,1fr);} }
  .stat{background:var(--bg-elevated);border:1px solid var(--border);
    padding:14px 15px;}
  .stat .label{font-size:11.5px;color:var(--text-faint);font-weight:600;}
  .stat .value{margin-top:4px;font-weight:600;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
  .stat .value.warn{color:var(--status-overdue);}
  .stat-clickable{transition:transform .1s ease,box-shadow .1s ease;}
  .stat-clickable:hover,.stat-clickable:focus-visible{box-shadow:0 0 0 2px var(--accent,#4a7dff);outline:none;}
  .stat-clickable:active{transform:scale(0.98);}

  .row{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 0;border-bottom:1px solid var(--border);}
  .row:last-child{border-bottom:none;padding-bottom:0;}
  .row:first-child{padding-top:0;}
  .row .who{min-width:0;}
  .row .who .name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .row .who .meta{font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .row .amount{font-size:13.5px;font-weight:600;font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;}

  .badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:3px 9px;border-radius:999px;font-size:11px;white-space:nowrap;
  }
  .badge .dot{width:6px;height:6px;border-radius:999px;}
  .badge.paid{color:var(--status-paid);background:var(--status-paid-bg);}
  .badge.paid .dot{background:var(--status-paid);}
  .badge.due{color:var(--status-due);background:var(--status-due-bg);}
  .badge.due .dot{background:var(--status-due);}
  .badge.overdue{color:var(--status-overdue);background:var(--status-overdue-bg);}
  .badge.overdue .dot{background:var(--status-overdue);}
  .badge.upcoming{color:var(--status-upcoming);background:var(--status-upcoming-bg);}
  .badge.upcoming .dot{background:var(--status-upcoming);}
  .badge.move{color:var(--status-move);background:var(--status-move-bg);}
  .badge.move .dot{background:var(--status-move);}

  .view-btn{
    flex-shrink:0;background:var(--text);color:var(--bg);border:none;
    font-size:11px;font-weight:700;letter-spacing:.03em;
    padding:7px 11px;border-radius:8px;cursor:pointer;transition:opacity .15s ease;
  }
  .view-btn:hover{opacity:.85;}
  .view-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  .timeline-track{
    background-image:repeating-linear-gradient(45deg, var(--border), var(--border) 3px, transparent 3px, transparent 7px);
    background-color:var(--bg);
  }
  .sortable-th{cursor:pointer;user-select:none;white-space:nowrap;}
  .sortable-th:hover{color:var(--text);}

  .checkbox-group{display:flex;gap:8px;flex-wrap:wrap;}
  .checkbox-group label{
    display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--bg-elevated);
    color:var(--text-dim);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer;
    text-transform:none;letter-spacing:0;
  }
  .checkbox-group input[type="checkbox"]{margin:0;width:14px;height:14px;accent-color:var(--text);}
  .checkbox-group input[type="checkbox"]:checked + span{color:var(--text);}

  .filter-chips{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{
    border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-dim);
    font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;
    min-height:32px;
    transition:background-color .15s ease,color .15s ease,border-color .15s ease;
  }
  .chip:hover:not(.active){background:var(--border);color:var(--text);}
  .chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .chip.active{background:var(--text);color:var(--bg);border-color:var(--text);}

  .po-tabbar{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-bottom:16px;padding-bottom:2px;}
  .po-tab{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-dim);
    font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer;
    white-space:nowrap;flex-shrink:0;min-height:38px;
    transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
  .po-tab:hover:not(.active){background:var(--border);color:var(--text);}
  .po-tab:focus-visible{outline:2px solid var(--accent,#2e4d6e);outline-offset:1px;}
  .po-tab.active{background:var(--text);color:var(--bg);border-color:var(--text);}

  .mini-btn{
    border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);
    font-size:12.5px;font-weight:650;padding:8px 14px;cursor:pointer;
    transition:background-color .15s ease,opacity .15s ease,border-color .15s ease;
  }
  .mini-btn:hover{background:var(--border);}
  .mini-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .mini-btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);}
  .mini-btn.primary:hover{opacity:.88;background:var(--text);}
  :root[data-theme="dark"] .mini-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mini-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);} }

  .text-link{
    display:block;margin-top:9px;border:none;background:none;color:var(--accent);
    font-size:12px;font-weight:600;cursor:pointer;padding:0;transition:opacity .15s ease;
  }
  .text-link:hover{opacity:.75;text-decoration:underline;}
  .text-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  .import-picker{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px;}
  .import-option{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);
    border-radius:10px;background:var(--bg-elevated);color:var(--text);font-size:13.5px;font-weight:600;
    cursor:pointer;text-align:left;width:100%;
  }
  .import-option:hover{background:var(--border);}
  .import-option svg{width:18px;height:18px;flex-shrink:0;color:var(--text-dim);}
  .import-preview-box{
    border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-elevated);
    display:flex;align-items:center;justify-content:center;min-height:130px;margin:10px 0 6px;
  }
  .import-preview-box img{max-width:100%;max-height:220px;display:block;}
  .import-file-chip{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-dim);font-size:12.5px;padding:22px;}
  .import-file-chip svg{width:26px;height:26px;}
  .form-row label{
    display:block;
    margin-bottom:4px;
  }
  .form-row input, .form-row select{
    width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--border);
    background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;
    min-height:38px;transition:border-color .15s ease,box-shadow .15s ease;
  }
  .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  @media (max-width:360px){ .form-row-2{grid-template-columns:1fr;} }
  .form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible,
  .modal-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
  .form-row textarea{
    width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border);
    background:var(--bg);color:var(--text);font-size:13.5px;font-family:inherit;
    resize:vertical;min-height:56px;
  }
  .form-error{color:var(--status-overdue);font-size:12px;margin:6px 0 0;}
  .form-hint{font-size:12px;margin:6px 0 0;color:var(--text-dim);}
  .form-hint.match{color:var(--status-paid);}
  .mini-btn.danger{background:var(--status-overdue);color:#fff;border-color:var(--status-overdue);}
  .mini-btn.danger:hover{opacity:.88;background:var(--status-overdue);}
  .actions-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  .actions-row .mini-btn.danger{margin-left:auto;}

  .alloc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .alloc-row:last-child{border-bottom:none;}
  .alloc-row .meta{font-size:11.5px;color:var(--text-faint);}
  .factor-step{display:inline-flex;align-items:center;gap:6px;margin-top:3px;white-space:nowrap;}
  .factor-step b{min-width:24px;text-align:center;color:var(--text);font-variant-numeric:tabular-nums;}
  .factor-step button{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);
    background:var(--bg);color:var(--text);font-size:15px;line-height:1;padding:0;cursor:pointer;}
  .factor-step button:disabled{opacity:.35;cursor:default;}
  .alloc-amount-input{
    width:96px;padding:6px 8px;border-radius:7px;border:1px solid var(--border);
    background:var(--bg);color:var(--text);font-size:13px;text-align:right;
    font-variant-numeric:tabular-nums;font-family:var(--font-mono);
  }
  .alloc-total-row{display:flex;justify-content:space-between;align-items:center;
    padding:10px 0 2px;font-size:13px;font-weight:650;}
  .alloc-total-row .diff-ok{color:var(--status-paid);}
  .alloc-total-row .diff-bad{color:var(--status-overdue);}
  .alloc-summary-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .alloc-summary-row:last-child{border-bottom:none;}

  /* "Pending bills by tenant" (Bills tab) — each tenant's row expands to show the individual
     bills behind the total, with a marker replacing the default <details> triangle. */
  .pending-bills-tenant summary::-webkit-details-marker{display:none;}
  .pending-bills-tenant summary{position:relative;padding-right:16px;}
  .pending-bills-tenant summary::after{content:'▸';position:absolute;right:0;top:10px;
    color:var(--text-faint);font-size:11px;transition:transform .15s ease;}
  .pending-bills-tenant[open] summary::after{transform:rotate(90deg);}
  .pending-bills-tenant{border-bottom:1px solid var(--border);}
  .pending-bills-tenant:last-child{border-bottom:none;}
  .pending-bills-tenant summary{border-bottom:none;}

  .modal-overlay{
    position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;
  }
  .modal-card{width:100%;max-width:min(360px,92vw);overflow-y:auto;box-shadow:0 12px 40px rgba(10,12,18,.18);}
  .modal-card h2{margin-top:0;}
  /* Bill/invoice preview — sized to fill most of whatever screen it's viewed on (phone or
     desktop), instead of the small fixed-width modal card used for forms. */
  .bill-preview-card{max-width:96vw;width:96vw;height:92vh;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
  .bill-preview-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;
    background:var(--bg);border-radius:8px;}
  @media (min-width:820px){ .bill-preview-card{width:82vw;max-width:820px;} }
  .modal-input{
    width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--border);
    background:var(--bg);color:var(--text);font-size:14px;margin:10px 0;
    font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  }
  .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;}
  .history-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .history-row:last-child{border-bottom:none;}
  .history-row .del{border:none;background:none;color:var(--status-overdue);cursor:pointer;font-size:15px;padding:2px 4px;}

  .upcoming-row{display:flex;align-items:baseline;gap:12px;padding:7px 0;font-size:13.5px;}
  .upcoming-row .date{width:52px;flex-shrink:0;color:var(--text-faint);font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
  .upcoming-row .title{font-weight:550;}

  .cal-toolbar{
    display:flex;align-items:center;gap:8px;margin-bottom:14px;
    background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:6px;
  }
  .cal-toolbar .mini-btn{border-color:transparent;background:transparent;min-height:30px;padding:6px 11px;}
  .cal-toolbar .mini-btn:hover{background:var(--bg-elevated);}
  .cal-month-label{flex:1;text-align:center;font-weight:700;font-size:14.5px;letter-spacing:-.005em;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cal-weekday{text-align:center;font-size:10.5px;font-weight:700;color:var(--text-faint);
    letter-spacing:.04em;text-transform:uppercase;padding-bottom:8px;}
  .cal-days{margin-bottom:14px;}
  .cal-daycell{
    border:1px solid var(--border);border-radius:10px;min-height:52px;padding:4px 4px;
    display:flex;flex-direction:column;gap:2px;overflow:hidden;background:var(--bg-elevated);
    transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
  }
  .cal-daycell.empty{border-color:transparent;background:none;}
  .cal-daycell.today{background:var(--accent-bg);border-color:var(--accent);border-width:1.5px;}
  .cal-daycell:not(.empty):has(button.cal-pill:hover){border-color:var(--accent);box-shadow:0 2px 8px rgba(20,30,25,.08);}
  .cal-daynum{font-size:11px;color:var(--text-faint);font-weight:700;font-family:var(--font-mono);padding:0 1px;}
  .cal-daycell.today .cal-daynum{color:var(--accent);}
  .cal-pill{
    display:block;font-size:10px;line-height:1.6;padding:1px 4px;border-radius:5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-weight:700;
    transition:filter .15s ease,transform .1s ease;
  }
  .cal-pill:hover, .cal-pill:focus-visible{filter:brightness(0.94);}
  .cal-pill:active{transform:scale(0.97);}
  .cal-pill.overdue{background:var(--status-overdue-bg);color:var(--status-overdue);}
  .cal-pill.due{background:var(--status-due-bg);color:var(--status-due);}
  .cal-pill.move{background:var(--status-move-bg);color:var(--status-move);}
  .cal-pill.cleaning{background:var(--status-paid-bg);color:var(--status-paid);}
  .cal-pill.bin{background:var(--status-upcoming-bg);color:var(--status-upcoming);}
  .cal-pill.cleaning.past, .cal-pill.bin.past{cursor:default;opacity:.55;filter:none;}
  button.cal-pill{border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;box-shadow:0 1px 1px rgba(20,30,25,.05);}
  .cal-more{font-size:9px;color:var(--text-faint);padding:0 3px;}
  /* Tenant calendar + turn cards */
  .cal-pill.other{opacity:.45;font-weight:600;}
  .cal-pill.mine{box-shadow:inset 0 0 0 1.5px currentColor;}
  .cal-pill.mine.past, .cal-pill.other.past{opacity:.35;}
  .cal-daycell.has-mine{border-color:var(--accent);}
  .cal-pill .bin-icons{display:inline-flex;gap:1px;margin-right:3px;vertical-align:-2px;}
  .bin-icon{display:inline-block;flex-shrink:0;vertical-align:middle;}
  .cal-legend span .bin-icon{margin-right:2px;}
  .tenant-week{padding-top:12px;}
  .tenant-week.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
  .tenant-week-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text-dim);font-family:var(--font-mono);margin-bottom:6px;}
  .week-chip{font-family:inherit;background:var(--accent);color:#fff;border-radius:999px;padding:2px 8px;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;}
  .duty-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border);}
  .tenant-week-head + .duty-row{border-top:none;}
  .duty-art{flex-shrink:0;min-width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:2px;padding:0 6px;}
  .cleaning-art{background:var(--status-paid-bg);font-size:26px;}
  .bin-art{background:var(--status-upcoming-bg);}
  .duty-body{flex:1;min-width:0;}
  .duty-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;font-weight:700;}
  .duty-date{font-size:12.5px;font-weight:600;color:var(--text-dim);font-family:var(--font-mono);}
  .duty-sub{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
  .cal-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
  .cal-legend span{
    display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:var(--text-dim);
    background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 10px 4px 8px;
  }
  .cal-legend .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;position:relative;top:0;flex-shrink:0;}
  .cal-legend .dot.overdue{background:var(--status-overdue);}
  .cal-legend .dot.due{background:var(--status-due);}
  .cal-legend .dot.move{background:var(--status-move);}

  .bar-row{margin:10px 0;}
  .bar-row .bar-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);margin-bottom:5px;}
  .bar-track{background:var(--border);border-radius:6px;height:9px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:6px;background:var(--status-paid);}
  .report-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .report-table{width:100%;border-collapse:collapse;font-size:13px;min-width:360px;}
  .report-table th{text-align:right;
    font-weight:600;padding:0 0 8px;}
  .report-table th:first-child, .report-table td:first-child{text-align:left;font-family:var(--font-sans);}
  .report-table td{text-align:right;padding:8px 0;border-top:1px solid var(--border);
    font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
  .report-table td.warn{color:var(--status-overdue);font-weight:650;}
  .roster-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .roster-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:300px;}
  .roster-table th{text-align:left;font-size:11.5px;color:var(--text-dim);font-weight:600;
    text-transform:uppercase;letter-spacing:.03em;padding:0 10px 8px;}
  .roster-table th:first-child, .roster-table td:first-child{padding-left:0;}
  .roster-table th:last-child, .roster-table td:last-child{padding-right:0;}
  .roster-table td{padding:12px 10px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums;}
  .roster-row{cursor:pointer;transition:background .12s ease;}
  .roster-row:hover td, .roster-row:focus-visible td{background:var(--border-soft,var(--border));}
  .roster-row:focus-visible{outline:2px solid var(--accent,#2e4d6e);outline-offset:-2px;}
  .roster-row td:last-child{font-weight:600;}
  .roster-row.past{cursor:default;color:var(--text-faint);}
  .roster-row.past td:last-child{font-weight:500;}
  .bin-dot{display:inline-block;margin-right:2px;line-height:0;vertical-align:middle;}
  @media (max-width:640px){
    .roster-table{font-size:13px;}
    .roster-table td{padding:13px 8px;}
  }
  .bills-table{min-width:560px;}
  .bills-table th, .bills-table td{text-align:left;vertical-align:top;padding-right:14px;}
  .report-row-link{cursor:pointer;}
  .report-row-link:hover td{background:var(--border-soft,var(--border));}

  .notif-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);}
  .notif-row:last-child{border-bottom:none;}
  .notif-row.read{opacity:.55;}
  .notif-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .notif-icon svg{width:15px;height:15px;}
  .notif-icon.overdue{background:var(--status-overdue-bg);color:var(--status-overdue);}
  .notif-icon.due{background:var(--status-due-bg);color:var(--status-due);}
  .notif-icon.move{background:var(--status-move-bg);color:var(--status-move);}
  .notif-dot-btn{border:none;background:none;cursor:pointer;padding:6px;flex-shrink:0;border-radius:50%;transition:background-color .15s ease;}
  .notif-dot-btn:hover{background:var(--border);}
  .notif-dot-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .notif-dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--border);}
  .notif-dot.unread{background:var(--accent);}
  .nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:auto;border-radius:999px;background:var(--status-overdue);color:#fff;font-size:10.5px;font-weight:700;line-height:1;}
  .card > a, .card.prop-card > a:first-child{transition:opacity .15s ease;}
  @media (min-width:640px){
    .cal-daycell{min-height:92px;padding:6px 6px;gap:3px;}
    .cal-daynum{font-size:12.5px;}
    .cal-pill{font-size:11.5px;padding:2px 6px;border-radius:6px;}
    .cal-more{font-size:10.5px;}
  }

  .placeholder-box{
    border:1.5px dashed var(--border);border-radius:10px;padding:28px 22px;text-align:center;
  }
  .placeholder-box p{margin:0;font-size:13.5px;font-weight:600;color:var(--text-dim);}
  .placeholder-box p.sub{margin-top:4px;font-weight:400;font-size:12px;color:var(--text-faint);
    max-width:320px;margin-left:auto;margin-right:auto;}
  .placeholder-box .ph-icon{
    width:44px;height:44px;margin:0 auto 12px;color:var(--text-faint);
    background:var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;
  }
  .placeholder-box .ph-icon svg{width:22px;height:22px;}
  .placeholder-box .mini-btn{margin-top:14px;}

  .prop-card .prop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .prop-card .prop-name{font-size:15px;font-weight:650;}
  .prop-card .prop-addr{font-size:12px;color:var(--text-faint);margin-top:1px;}
  .prop-card .prop-meta{font-size:12px;color:var(--text-faint);margin-top:4px;}
  .prop-card .occ{text-align:right;font-size:11.5px;font-weight:600;}
  .prop-card .occ .vacant{color:var(--text-faint);font-weight:500;}
  .room-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;
    border-top:1px solid var(--border);}
  .room-row:first-of-type{border-top:1px solid var(--border);margin-top:10px;}
  .room-row .rname{font-weight:600;}
  .room-row .rtenant{color:var(--text-faint);}
  .room-row.linked{cursor:pointer;text-decoration:none;color:inherit;border-radius:8px;transition:background-color .15s ease;}
  .room-row.linked:hover{background:var(--border);}
  .room-row.linked:hover .rtenant{color:var(--accent);}
  .room-row.linked:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .task-row{display:flex;align-items:center;font-size:13px;padding:7px 0;
    border-top:1px solid var(--border);}
  .task-row:first-of-type{border-top:1px solid var(--border);margin-top:10px;}
  .activity-timeline{display:flex;flex-direction:column;}
  .activity-row{display:flex;align-items:baseline;gap:10px;font-size:13px;padding:7px 0;
    border-top:1px solid var(--border);}
  .activity-row:first-of-type{border-top:1px solid var(--border);margin-top:10px;}
  .activity-date{flex-shrink:0;width:72px;color:var(--text-faint);font-size:12px;}
  .activity-desc{color:var(--text-dim);}
  .icon-mini-btn{
    border:none;background:none;color:var(--text-dim);cursor:pointer;font-size:14px;
    padding:4px 7px;border-radius:6px;flex-shrink:0;line-height:1;
  }
  .icon-mini-btn{transition:background-color .15s ease,color .15s ease;}
  .icon-mini-btn:hover{background:var(--border);color:var(--text);}
  .icon-mini-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .icon-mini-btn.danger{color:var(--status-overdue);}
  .icon-mini-btn:disabled{opacity:.35;cursor:not-allowed;}
  .icon-mini-btn:disabled:hover{background:none;color:var(--text-dim);}

  .back-link{
    display:inline-flex;align-items:center;gap:4px;
    font-size:12.5px;font-weight:600;color:var(--text-dim);text-decoration:none;
    transition:color .15s ease;
  }
  .back-link svg{width:14px;height:14px;}
  .back-link:hover{color:var(--accent);}
  .back-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  .detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:8px;}
  .detail-head h1{margin:0;}

  .field-list{display:flex;flex-direction:column;}
  .field-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
    border-bottom:1px solid var(--border);font-size:13.5px;}
  .field-row:last-child{border-bottom:none;}
  .field-row .k{color:var(--text-faint);}
  .field-row .v{font-weight:600;text-align:right;}
  .field-row a{text-decoration:none;color:var(--accent);}
  .field-row a:hover{text-decoration:underline;}
  .field-row a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  .badge.neutral{color:var(--text-dim);background:var(--border);}
  .badge.neutral .dot{background:var(--text-faint);}

  .more-list a{
    display:flex;align-items:center;gap:12px;padding:13px 14px;
    text-decoration:none;color:var(--text);font-size:13.5px;font-weight:550;
    border-bottom:1px solid var(--border);transition:background-color .15s ease;
  }
  .more-list a:last-child{border-bottom:none;}
  .more-list a:hover{background:var(--border);}
  .more-list a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  .more-list a svg{width:18px;height:18px;color:var(--text-dim);flex-shrink:0;}
  .more-list a .chev{margin-left:auto;width:14px;height:14px;color:var(--text-faint);}
  .more-list{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-elevated);}

  /* ---------- Bottom nav (mobile) ---------- */
  .bottomnav{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:10;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .bottomnav a{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 2px 7px;text-decoration:none;color:var(--text-faint);font-size:10.5px;font-weight:600;
    transition:color .15s ease;
  }
  .bottomnav a svg{width:22px;height:22px;}
  .bottomnav a:hover{color:var(--text-dim);}
  .bottomnav a.active{color:var(--accent);}
  .bottomnav a.active:hover{color:var(--accent);}
  .bottomnav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

  @media (min-width:768px){
    .sidebar{display:flex;}
    .bottomnav{display:none;}
    main.content{padding-bottom:40px;}
  }

  a{color:inherit;}
  ::selection{background:var(--accent-bg);}

  /* Bigger touch targets on phones/small tablets — mouse-sized controls (34–38px) stay dense on
     desktop, but a finger needs closer to 44px, per the platform's own touch-target guidance. */
  @media (max-width:640px){
    .mini-btn, .chip{min-height:40px;}
    .form-row input, .form-row select{min-height:42px;}
    .icon-btn{width:38px;height:38px;}
  }

/* ---------- Toast (loading/success/error feedback for async Supabase actions) ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  max-width:min(90vw,360px);padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;
  box-shadow:var(--shadow);z-index:999;opacity:0;transition:opacity .2s ease,transform .2s ease;
  background:var(--text);color:var(--bg);
  display:flex;align-items:center;gap:12px;justify-content:space-between;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.success{background:var(--status-paid);color:#fff;}
.toast.error{background:var(--status-overdue);color:#fff;}
.toast.info{background:var(--text);color:var(--bg);}
.toast-action{
  flex:none;background:transparent;border:1px solid currentColor;color:inherit;
  border-radius:6px;padding:3px 10px;font-size:12px;font-weight:700;cursor:pointer;
}

/* ============ Image lightbox — a single reusable overlay for every photo gallery in the app
   (maintenance, cleaning, inspection). Opened via openLightboxForThumb()/openLightbox() in app.js. */
.lightbox-overlay{
  position:fixed;inset:0;z-index:500;background:rgba(6,8,10,0.92);
  display:flex;align-items:center;justify-content:center;touch-action:none;
}
.lightbox-content{
  position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:64px 72px;box-sizing:border-box;
}
.lightbox-img{
  max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;
  border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:fixed;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox-close:hover{background:rgba(255,255,255,0.22);}
.lightbox-nav-btn{
  position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox-nav-btn:hover{background:rgba(255,255,255,0.22);}
.lightbox-nav-btn:disabled{opacity:0.3;cursor:default;}
.lightbox-prev{left:14px;}
.lightbox-next{right:14px;}
.lightbox-counter{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;
  font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;font-variant-numeric:tabular-nums;
}
.lightbox-spinner{
  width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,0.25);
  border-top-color:#fff;animation:lightbox-spin 0.8s linear infinite;
}
@keyframes lightbox-spin{ to{ transform:rotate(360deg); } }
.lightbox-error{color:#fff;font-size:13.5px;text-align:center;padding:0 20px;}
@media (max-width:640px){
  .lightbox-content{padding:56px 16px;}
  .lightbox-nav-btn{width:38px;height:38px;font-size:19px;}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}
}

/* ============ PDF viewer — a real toolbar-driven viewer (pdf.js) for every PDF in the app.
   Opened via openPdfViewer(url, fileName) in app.js — never rebuilt by render(). Dark canvas
   backdrop regardless of light/dark theme (same choice as the image lightbox — a document reads
   best against a neutral dark stage), but sized/spaced for a dense toolbar of many controls. */
.pdfv-overlay{
  position:fixed;inset:0;z-index:600;background:#1c1f22;
  display:flex;flex-direction:column;overflow:hidden;
}
.pdfv-toolbar{
  flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px;
  background:#26292d;border-bottom:1px solid rgba(255,255,255,0.08);
  color:#e8eaec;min-height:46px;box-sizing:border-box;flex-wrap:nowrap;overflow-x:auto;
}
.pdfv-toolbar-group{display:flex;align-items:center;gap:3px;flex:none;}
.pdfv-toolbar-left{flex:1 1 auto;min-width:0;overflow:hidden;}
.pdfv-toolbar-center{flex:none;}
.pdfv-toolbar-right{margin-left:auto;}
.pdfv-title{
  font-size:12.5px;color:#c7cbcf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-left:4px;max-width:32vw;
}
.pdfv-icon-btn{
  appearance:none;border:1px solid transparent;background:transparent;color:#e8eaec;
  width:34px;height:34px;min-width:34px;border-radius:7px;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.pdfv-icon-btn:hover{background:rgba(255,255,255,0.12);}
.pdfv-icon-btn:focus-visible{outline:2px solid #6fb8ff;outline-offset:1px;}
.pdfv-icon-btn[aria-pressed="true"]{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.2);}
.pdfv-icon-btn:disabled{opacity:0.35;cursor:default;}
.pdfv-icon-btn.pdfv-close{font-size:20px;}
.pdfv-page-input{
  width:42px;text-align:center;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);
  color:#fff;border-radius:6px;font-size:12.5px;padding:6px 2px;font-variant-numeric:tabular-nums;
}
.pdfv-page-of{font-size:12px;color:#a7acb1;white-space:nowrap;}
.pdfv-zoom-pct{
  appearance:none;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.08);color:#fff;
  font-size:12px;border-radius:6px;padding:0 8px;height:34px;min-width:52px;cursor:pointer;font-variant-numeric:tabular-nums;
}
.pdfv-toolbar-zoom{position:relative;}
.pdfv-zoom-menu{
  position:absolute;top:40px;right:0;background:#2f3338;border:1px solid rgba(255,255,255,0.14);
  border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.4);padding:4px;display:flex;flex-direction:column;
  min-width:150px;z-index:2;
}
.pdfv-zoom-menu button{
  appearance:none;border:0;background:transparent;color:#e8eaec;text-align:left;font-size:12.5px;
  padding:8px 10px;border-radius:5px;cursor:pointer;
}
.pdfv-zoom-menu button:hover{background:rgba(255,255,255,0.1);}

.pdfv-search-bar{
  flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#2b2e32;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.pdfv-search-bar input{
  flex:1 1 auto;min-width:0;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
  color:#fff;border-radius:6px;padding:7px 10px;font-size:13px;
}
.pdfv-search-bar input:focus-visible{outline:2px solid #6fb8ff;}
.pdfv-search-count{font-size:12px;color:#a7acb1;white-space:nowrap;min-width:70px;text-align:right;}

.pdfv-body{flex:1 1 auto;display:flex;min-height:0;position:relative;}
.pdfv-thumbs-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45);z-index:3;display:none;}
.pdfv-thumbs{
  flex:none;width:150px;background:#202327;border-right:1px solid rgba(255,255,255,0.08);
  overflow-y:auto;padding:10px;box-sizing:border-box;display:none;
}
.pdfv-thumbs.open{display:block;}
.pdfv-thumb{
  display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:10px;cursor:pointer;
  border-radius:6px;padding:4px;border:2px solid transparent;background:transparent;appearance:none;width:100%;
}
.pdfv-thumb:hover{background:rgba(255,255,255,0.06);}
.pdfv-thumb.current{border-color:#6fb8ff;background:rgba(111,184,255,0.1);}
.pdfv-thumb canvas, .pdfv-thumb .pdfv-thumb-placeholder{
  width:100%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.4);display:block;
}
.pdfv-thumb .pdfv-thumb-placeholder{aspect-ratio:0.77;background:#3a3e43;}
.pdfv-thumb-num{font-size:11px;color:#a7acb1;font-variant-numeric:tabular-nums;}

.pdfv-pages-scroll{
  flex:1 1 auto;overflow-y:auto;overflow-x:auto;min-width:0;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.pdfv-pages-inner{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 12px 40px;min-height:100%;}
.pdfv-page{
  position:relative;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.35);flex:none;
}
.pdfv-page canvas{display:block;}
.pdfv-page-spinner-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.pdfv-page-num-badge{
  position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.55);color:#fff;font-size:10.5px;
  padding:2px 6px;border-radius:4px;font-variant-numeric:tabular-nums;pointer-events:none;
}
/* pdf.js text layer — invisible, selectable text positioned exactly over the canvas, used both
   for native text selection/copy and as the target for search highlighting. */
.textLayer{
  position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;line-height:1;opacity:1;
}
.textLayer span, .textLayer br{
  color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0;
}
.textLayer mark.pdfv-hit{background:rgba(255,220,0,0.5);color:transparent;}
.textLayer mark.pdfv-hit.pdfv-hit-current{background:rgba(255,140,0,0.85);}

.pdfv-loading{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-size:12.5px;
}
.pdfv-error{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:13.5px;
  text-align:center;padding:0 24px;max-width:420px;
}

@media (max-width:820px){
  .pdfv-title{max-width:18vw;}
  .pdfv-thumbs{
    position:absolute;inset:0 20% 0 0;z-index:4;width:auto;box-shadow:4px 0 20px rgba(0,0,0,0.4);
  }
  .pdfv-thumbs-backdrop.open{display:block;}
  /* Touch targets ~44px on touch-sized viewports (desktop keeps the denser 34px — a mouse doesn't
     need the extra padding, and cramming a dozen 44px controls into a desktop toolbar would be worse).
     Nothing is hidden here — every control (rotate, fullscreen, print, open-in-tab, download) stays
     reachable; the toolbar scrolls horizontally (overflow-x:auto, set above) if it doesn't all fit,
     rather than making any of them disappear or hard to find. */
  .pdfv-icon-btn{width:44px;height:44px;min-width:44px;font-size:19px;}
  .pdfv-icon-btn.pdfv-close{font-size:22px;}
  .pdfv-page-input{padding:10px 2px;}
  .pdfv-zoom-pct{height:44px;}
  .pdfv-thumb{padding:6px;}
}
@media (max-width:520px){
  .pdfv-title{display:none;}
  .pdfv-toolbar{gap:2px;padding:6px 6px;}
  .pdfv-page-of{display:none;}
  .pdfv-thumbs{inset:0 12% 0 0;}
}

/* Date fields open the calendar on click anywhere in the field */
input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"]{cursor:pointer;}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;}

/* Bill edit — review changes modal */
#bill-changes-modal{z-index:1100;}
.chg-row{padding:9px 0;border-top:1px solid var(--border);}
.chg-row:first-child{border-top:none;}
.chg-label{font-size:11.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;}
.chg-vals{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;}
.chg-old{color:var(--text-dim);text-decoration:line-through;}
.chg-arrow{color:var(--text-faint);}
.chg-new{font-weight:700;}
.chg-row.amount .chg-vals{font-size:16px;}
.chg-diff{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;}
.chg-diff.up{background:var(--status-overdue-bg);color:var(--status-overdue);}
.chg-diff.down{background:var(--status-paid-bg);color:var(--status-paid);}
.chg-note{font-size:12.5px;color:var(--text-dim);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-top:10px;line-height:1.45;}
.chg-note.warn{background:var(--status-due-bg);border-color:transparent;color:var(--status-due);}

/* Show/hide password */
.pw-wrap{position:relative;display:block;width:100%;}
.pw-wrap input{width:100%;padding-right:42px;box-sizing:border-box;}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--text-dim);cursor:pointer;border-radius:8px;padding:0;}
.pw-eye:hover{color:var(--text);background:var(--bg);}
.pw-eye .eye-closed{display:none;}
.pw-eye.on .eye-open{display:none;}
.pw-eye.on .eye-closed{display:block;}

/* Confirm dialogs always sit above other open modals (e.g. delete from inside the maintenance modal) */
#confirm-modal{z-index:1200;}
#rent-reject-modal{z-index:1100;}

/* Maintenance change history */
.mt-history{margin-top:12px;}
.mt-history > summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--text-dim);padding:2px 0;}
.mlog-entry{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:12.5px;}
.mt-history > summary + .mlog-entry, #maintenance-history-list .mlog-entry:first-child{border-top:none;}
.mlog-icon{flex-shrink:0;width:22px;text-align:center;}
.mlog-body{flex:1;min-width:0;}
.mlog-who{color:var(--text-faint);font-weight:400;}
.mlog-changes{margin:4px 0 0;padding-left:16px;color:var(--text-dim);}
.mlog-changes s{color:var(--text-faint);}
.mlog-deleted .mlog-head b{color:var(--status-overdue);}

/* Rent payment reports awaiting review (staff) */
.review-card{border-color:var(--status-upcoming);box-shadow:0 0 0 1px var(--status-upcoming) inset;}
.review-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--border);}
.review-card h2 + .review-row{border-top:none;}
.review-main{min-width:0;flex:1 1 220px;}
.review-title{font-size:14px;}
.review-sub{font-size:12px;color:var(--text-dim);margin-top:2px;}
.review-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}

/* House rules */

/* Tenants list: current first, then moved out */
.tenant-section-title{font-size:12.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin:20px 0 6px;display:flex;align-items:center;gap:8px;}
.tenant-section-title span{background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:0 8px;font-size:11px;letter-spacing:0;}
.tenant-card.past{opacity:.7;}
.tenant-card.past:hover{opacity:1;}

/* WhatsApp group sent status on bills */
.wa-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:600;border-radius:8px;padding:6px 10px;margin:8px 0 4px;}
.wa-status.sent{background:var(--status-paid-bg);color:var(--status-paid);}
.wa-status.pending{background:var(--status-due-bg);color:var(--status-due);}
.wa-status .text-link{font-size:12px;margin:0;}
.wa-mini{font-size:10.5px;font-weight:600;color:var(--text-faint);margin-top:3px;white-space:nowrap;}
.wa-mini.sent{color:var(--status-paid);}

/* ===== Section tones (Property Operations) ===== */
:root{--tone-maintenance:#d4731f;--tone-cleaning:#23945f;--tone-inspection:#5566d8;--tone-rules:#2f7fc1;--tone-documents:#7a6a9e;--tone-overview:#5f6b7a;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tone-maintenance:#f0a060;--tone-cleaning:#5cc995;--tone-inspection:#98a4ff;--tone-rules:#7cb8ec;--tone-documents:#b8a8dc;--tone-overview:#a3adbb;}}
:root[data-theme="dark"]{--tone-maintenance:#f0a060;--tone-cleaning:#5cc995;--tone-inspection:#98a4ff;--tone-rules:#7cb8ec;--tone-documents:#b8a8dc;--tone-overview:#a3adbb;}
.tone-maintenance{--tone:var(--tone-maintenance);} .tone-cleaning{--tone:var(--tone-cleaning);} .tone-inspection{--tone:var(--tone-inspection);}
.tone-rules{--tone:var(--tone-rules);} .tone-documents{--tone:var(--tone-documents);} .tone-overview{--tone:var(--tone-overview);}

.page-head-icon{display:flex;align-items:center;gap:14px;}
.page-head-icon .page-title{margin-bottom:2px;}
.ph-badge{flex-shrink:0;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:var(--tone);background:color-mix(in srgb, var(--tone) 14%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent);}
.ph-badge svg{width:24px;height:24px;}

.po-tab{display:inline-flex;align-items:center;gap:7px;}
.po-tab-icon{width:16px;height:16px;color:var(--tone);flex-shrink:0;}
.po-tab.active{box-shadow:inset 0 -2px 0 var(--tone);}
.po-tab.active .po-tab-icon{color:inherit;}

/* ===== House rules ===== */
.rt-tile{--tone:#3b6fb6;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:11px;font-size:19px;
  background:color-mix(in srgb, var(--tone) 16%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent);}
.rt-tile.big{width:52px;height:52px;border-radius:16px;font-size:27px;}
.rl-pill{display:inline-block;flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.01em;padding:2px 8px;border-radius:999px;white-space:nowrap;line-height:1.5;}
.rl-must{background:var(--status-overdue-bg);color:var(--status-overdue);}
.rl-please{background:var(--status-due-bg);color:var(--status-due);}
.rl-tip{background:var(--status-upcoming-bg);color:var(--status-upcoming);}

.rules-hero{padding:18px;}
.rules-hero-top{display:flex;gap:14px;align-items:center;}
.rules-hero-title{font-size:18px;font-weight:750;line-height:1.2;}
.rules-hero-sub{font-size:12.5px;color:var(--text-dim);margin-top:3px;}
.rules-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;}
.rules-level{border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.rules-level b{font-size:22px;line-height:1;}
.rules-level span:last-child{font-size:11.5px;color:var(--text-dim);line-height:1.35;}
.rl-bg-must{background:color-mix(in srgb, var(--status-overdue) 8%, transparent);}
.rl-bg-please{background:color-mix(in srgb, var(--status-due) 8%, transparent);}
.rl-bg-tip{background:color-mix(in srgb, var(--status-upcoming) 8%, transparent);}
@media (max-width:520px){.rules-levels{grid-template-columns:1fr;}.rules-level{flex-direction:row;align-items:center;gap:10px;}.rules-level b{font-size:18px;min-width:22px;}}

.rules-search{margin:12px 0 8px;}
.rules-search input{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font:inherit;font-size:14px;}
.rules-search input:focus{outline:2px solid var(--accent);outline-offset:0;}
.rules-jump{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;}
.rules-jump::-webkit-scrollbar{display:none;}
.rules-chip{--tone:#3b6fb6;flex-shrink:0;border:1px solid color-mix(in srgb, var(--tone) 30%, var(--border));background:color-mix(in srgb, var(--tone) 8%, var(--bg-elevated));
  color:var(--text);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
.rules-chip:hover{background:color-mix(in srgb, var(--tone) 16%, var(--bg-elevated));}
.rules-chip:focus-visible{outline:2px solid var(--tone);outline-offset:1px;}

.rules-section{padding:0;overflow:hidden;border-top:3px solid var(--tone);scroll-margin-top:80px;}
.rules-section-head{display:flex;align-items:center;gap:12px;padding:14px 16px 10px;}
.rules-section-head h2{margin:0;font-size:15.5px;text-transform:none;letter-spacing:0;color:var(--text);flex:1;}
.rules-count{font-size:12px;font-weight:700;color:var(--tone);background:color-mix(in srgb, var(--tone) 12%, transparent);border-radius:999px;padding:1px 9px;}
.rules-items{list-style:none;margin:0;padding:0 16px 8px;}
.rule{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--border);}
.rule:first-child{border-top:none;}
.rule .rl-pill{margin-top:2px;text-align:center;}
.rule-body{flex:1;min-width:0;}
.rule-text{font-size:14.5px;line-height:1.5;}
.rule-note{font-size:12.5px;color:var(--text-dim);margin-top:3px;line-height:1.45;}
.rules-empty{text-align:center;padding:30px 18px;color:var(--text-dim);font-size:13.5px;}
.rules-empty p{margin:6px 0 0;}
.rules-empty-art{font-size:40px;}

/* Admin editor */
.rules-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.rules-toolbar-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rules-toolbar-info span{font-size:12.5px;color:var(--text-dim);}
.rules-unsaved{font-style:normal;font-weight:700;color:var(--status-due);}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;padding:2px;background:var(--bg);}
.seg button{border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;color:var(--text-dim);cursor:pointer;}
.seg button.on{background:var(--bg-elevated);color:var(--text);box-shadow:0 1px 2px rgba(20,30,25,.12);}
.chip-count{font-size:11px;opacity:.7;margin-left:2px;}
.rules-start{text-align:center;padding:28px 18px;}
.rules-start h3{margin:8px 0 6px;font-size:16px;}
.rules-start p{margin:0 auto;max-width:44ch;font-size:13px;color:var(--text-dim);line-height:1.5;}
.rules-start-actions{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap;}

.rules-edit-section{padding:0;overflow:hidden;border-left:4px solid var(--tone);}
.res-head{display:flex;align-items:center;gap:10px;padding:12px 12px 8px;background:color-mix(in srgb, var(--tone) 6%, transparent);}
.res-topic{position:relative;cursor:pointer;display:inline-flex;}
.res-topic select{position:absolute;inset:0;opacity:0;cursor:pointer;}
.res-title{flex:1;min-width:0;border:1px solid transparent;background:transparent;font:inherit;font-size:15.5px;font-weight:700;color:var(--text);padding:6px 8px;border-radius:8px;}
.res-title:hover{border-color:var(--border);}
.res-title:focus{border-color:var(--tone);outline:none;background:var(--bg-elevated);}
.res-tools,.res-rule-tools{display:flex;gap:2px;flex-shrink:0;}
.res-tools .icon-btn,.res-rule-tools .icon-btn{width:30px;height:30px;font-size:14px;color:var(--text-dim);}
.icon-btn.danger:hover{color:var(--status-overdue);}
.icon-btn[disabled]{opacity:.3;cursor:default;}
.res-rules{padding:4px 12px 12px;}
.res-rule{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 0;border-top:1px dashed var(--border);}
.res-rule:first-child{border-top:none;}
.lvl-seg{display:flex;flex-direction:column;gap:3px;}
.lvl{border:1px solid var(--border);background:var(--bg);color:var(--text-faint);font:inherit;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;cursor:pointer;text-align:center;white-space:nowrap;}
.lvl.on.lvl-must{background:var(--status-overdue-bg);color:var(--status-overdue);border-color:transparent;}
.lvl.on.lvl-please{background:var(--status-due-bg);color:var(--status-due);border-color:transparent;}
.lvl.on.lvl-tip{background:var(--status-upcoming-bg);color:var(--status-upcoming);border-color:transparent;}
.res-rule-main{display:flex;flex-direction:column;gap:4px;min-width:0;}
.res-text{width:100%;box-sizing:border-box;resize:none;overflow:hidden;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font:inherit;font-size:14px;line-height:1.45;padding:8px 10px;border-radius:9px;}
.res-rule.rule-must .res-text{font-weight:600;}
.res-note{width:100%;box-sizing:border-box;border:1px solid transparent;background:transparent;color:var(--text-dim);font:inherit;font-size:12.5px;padding:4px 10px;border-radius:8px;}
.res-note:hover{border-color:var(--border);}
.res-text:focus,.res-note:focus{outline:none;border-color:var(--tone);background:var(--bg-elevated);}
.res-add{margin-top:6px;border:1.5px dashed color-mix(in srgb, var(--tone) 45%, var(--border));background:none;color:var(--tone);font:inherit;font-size:13px;font-weight:650;border-radius:10px;padding:8px 12px;width:100%;cursor:pointer;}
.res-add:hover{background:color-mix(in srgb, var(--tone) 7%, transparent);}
@media (max-width:560px){.res-rule{grid-template-columns:1fr auto;}.lvl-seg{grid-column:1 / -1;flex-direction:row;}}
.rules-add-topic .rat-title{font-size:13px;font-weight:700;margin-bottom:8px;}
.rat-chips{display:flex;flex-wrap:wrap;gap:6px;}
.rules-publish{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;bottom:12px;z-index:5;box-shadow:0 6px 20px rgba(20,30,25,.12);}
.rp-file{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:200px;}
.rp-file-name{font-size:12px;color:var(--text-dim);}
.rp-notify{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--text-dim);}
.rules-preview{padding:4px;border-radius:14px;background:repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--border) 45%, transparent) 10px 11px);}
@media (prefers-reduced-motion: reduce){.rules-chip,.seg button{transition:none;}}
.page-head-icon{margin-bottom:14px;}
.rules-section-head h2,.rules-hero h2{border:none;padding:0;}
.rule .rl-pill{width:92px;min-width:0;box-sizing:border-box;}

.rules-intro{font-size:14px;line-height:1.55;color:var(--text);margin:14px 0 0;max-width:68ch;}
.rules-closing{font-size:13px;line-height:1.55;color:var(--text-dim);background:color-mix(in srgb, var(--tone-rules) 6%, var(--bg-elevated));border-left:4px solid var(--tone-rules);}
.rules-textblock label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;}
.rules-textblock label span{font-weight:400;color:var(--text-faint);}

.rp-options{display:flex;flex-direction:column;gap:4px;}
.rule-must .rule-text{font-weight:600;}
@media (max-width:480px){.rule{flex-direction:column;gap:5px;}.rule .rl-pill{width:auto;}}

/* Missing invoices — details */
.mi-account{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 4px;padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--border);}
.mi-account .k{font-size:12px;color:var(--text-dim);}
.mi-acc-num{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.02em;}
.mi-acc-none{font-size:12.5px;color:var(--text-faint);}
.mi-acc-other{flex-basis:100%;font-size:11.5px;color:var(--text-faint);}
.mi-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px;}
.mi-col-title{font-size:12px;font-weight:700;color:var(--text-dim);margin:4px 0 2px;}
.mi-range{font-size:11px;color:var(--text-faint);font-weight:400;}
.mi-open{display:inline-block;margin-top:6px;font-size:12.5px;}
@media (max-width:640px){.mi-grid{grid-template-columns:1fr;gap:6px;}}

/* Real estate inspection banner (pinned on dashboards until the day) */
.rei-banner{display:flex;gap:16px;align-items:stretch;margin:0 0 12px;padding:14px 16px;border-radius:16px;
  background:color-mix(in srgb, var(--tone-inspection) 9%, var(--bg-elevated));border:1px solid color-mix(in srgb, var(--tone-inspection) 35%, var(--border));
  box-shadow:0 2px 10px color-mix(in srgb, var(--tone-inspection) 12%, transparent);}
.rei-banner.urgent{background:color-mix(in srgb, var(--status-overdue) 8%, var(--bg-elevated));border-color:color-mix(in srgb, var(--status-overdue) 45%, var(--border));}
.rei-count{flex-shrink:0;min-width:78px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px;
  background:var(--tone-inspection);color:#fff;text-align:center;}
.rei-banner.urgent .rei-count{background:var(--status-overdue);}
.rei-count b{font-size:28px;line-height:1;font-weight:800;}
.rei-count span{font-size:11px;font-weight:600;opacity:.9;margin-top:3px;}
.rei-main{flex:1;min-width:0;}
.rei-kicker{font-size:12.5px;font-weight:700;color:var(--tone-inspection);}
.rei-banner.urgent .rei-kicker{color:var(--status-overdue);}
.rei-when{font-size:17px;font-weight:750;margin-top:2px;line-height:1.3;}
.rei-agency{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
.rei-notes{font-size:13px;line-height:1.55;color:var(--text);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);}
.rei-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.rei-flag{font:inherit;font-size:12px;font-weight:650;border-radius:999px;padding:4px 10px;border:none;}
.rei-flag.ok{background:var(--status-paid-bg);color:var(--status-paid);}
.rei-flag.warn{background:var(--status-due-bg);color:var(--status-due);cursor:pointer;}
.rei-flag.warn:hover{filter:brightness(.96);}
.rei-empty{font-size:12.5px;color:var(--text-faint);margin:0 0 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.rei-empty .text-link{font-size:12.5px;margin:0;}
@media (max-width:520px){.rei-banner{flex-direction:column;gap:10px;}.rei-count{flex-direction:row;gap:8px;justify-content:flex-start;min-width:0;}.rei-count span{margin-top:0;}}

/* Property page — real estate inspection history */
.rei-hist-group{font-size:12px;font-weight:700;color:var(--text-dim);margin:12px 0 4px;}
.rei-hist-item{display:flex;gap:12px;align-items:flex-start;padding:10px 8px;margin:0 -8px;border-radius:10px;cursor:pointer;}
.rei-hist-item:hover{background:var(--bg);}
.rei-hist-item:focus-visible{outline:2px solid var(--accent);}
.rei-hist-date{flex-shrink:0;width:48px;border-radius:10px;text-align:center;padding:5px 0;background:var(--bg);border:1px solid var(--border);}
.rei-hist-item.up .rei-hist-date{background:var(--tone-inspection);border-color:var(--tone-inspection);color:#fff;}
.rei-hist-date b{display:block;font-size:18px;line-height:1.1;}
.rei-hist-date span{font-size:10.5px;opacity:.8;}
.rei-hist-body{flex:1;min-width:0;}
.rei-hist-top{font-size:13.5px;font-weight:650;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.rei-hist-sub{font-size:12px;color:var(--text-dim);margin-top:2px;}

/* Refresh button */
#refresh-btn.spinning svg{animation:spin-refresh .8s linear infinite;}
#refresh-btn[disabled]{cursor:progress;opacity:.8;}
@keyframes spin-refresh{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){#refresh-btn.spinning svg{animation-duration:2.4s;}}

/* ===== One typeface everywhere =====
   Form controls don't inherit the page font by default — make them, and give every number
   aligned (tabular) digits so amounts and dates still line up in columns. */
button, input, select, textarea, optgroup{font-family:var(--font-sans);}
body{font-variant-numeric:tabular-nums;}
code, kbd, pre, samp{font-family:var(--font-sans);}

.moved-out-owing{font-size:12.5px;color:var(--text-dim);background:var(--status-due-bg);border-radius:10px;padding:8px 12px;margin:0 0 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.moved-out-owing .text-link{margin:0;font-size:12.5px;}

/* =====================================================================================
   Responsive layer — phones, tablets, laptops, desktops.
   Kept at the end so it refines the component rules above instead of scattering media
   queries through the file. Breakpoints: ≤640 phone · 641–899 tablet portrait / small laptop
   (bottom nav) · ≥900 sidebar · ≥1280 wide desktop.
   ===================================================================================== */

/* Never let one long word, number or badge push the page sideways. */
/* Clip sideways overflow WITHOUT turning html/body into their own scroll boxes: overflow-x:hidden
   on both was making the page fail to scroll by finger/trackpad on some phones and browsers. */
body{max-width:100%;overflow-x:clip;}
@supports not (overflow: clip){ body{overflow-x:hidden;} }
.main, main.content, .content-inner{min-width:0;}
.content-inner > *{min-width:0;max-width:100%;}
.card{min-width:0;overflow-wrap:anywhere;}
img, video, canvas, iframe{max-width:100%;}

/* Label/value rows: the label may shrink and wrap instead of shoving the value off-screen. */
.field-row{min-width:0;}
.field-row .k{flex-shrink:1;min-width:0;overflow-wrap:anywhere;}
.field-row .v{min-width:0;overflow-wrap:anywhere;}
.detail-head{flex-wrap:wrap;}
.detail-head > *{min-width:0;}

/* Sidebar only where there's real room for it; tablets in portrait keep the bottom nav. */
@media (min-width:768px) and (max-width:899px){
  .sidebar{display:none;}
  .bottomnav{display:grid;}
}
main.content{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}
@media (min-width:900px){ main.content{padding-bottom:40px;} }

/* Wide desktops: use more of the screen for lists and tables. */
@media (min-width:1280px){ .content-inner{max-width:1040px;} }

/* Tables: scroll inside their card instead of widening the page. */
.card:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Modals: comfortable on tablets/desktop, full-width sheets on phones, never taller than the screen. */
.modal-card{max-height:min(85vh, 85dvh);}
@media (min-width:641px){ .modal-card{max-width:420px;} }
@media (max-width:640px){
  .modal-actions{flex-wrap:wrap;}
  .modal-actions .mini-btn{flex:1 1 auto;}
}

/* Topbar: search shrinks, icons stay put; respects the notch. */
.topbar{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));}
.search{min-width:0;}
.search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}

/* ---------- Touch devices (phones, tablets, touch laptops) ---------- */
@media (pointer:coarse), (max-width:1024px){
  .search{min-height:42px;}
  .view-btn{min-height:40px;padding-left:14px;padding-right:14px;}
  .icon-mini-btn{min-width:40px;min-height:40px;}
  .seg button, .rules-chip{min-height:40px;}
  #content select{min-height:44px;}
  .mini-btn, .chip, .po-tab{min-height:44px;}
  .icon-btn{width:42px;height:42px;}
  .modal-input, select.modal-input, .form-row input, .form-row select, .form-row textarea{min-height:44px;}
  /* Small text links still get a finger-sized hit area without changing how they look. */
  .text-link{padding-top:10px !important;padding-bottom:10px !important;margin-top:0;min-height:44px;display:inline-flex;align-items:center;}
  .mini-btn{min-height:44px !important;}
  .notif-dot-btn{padding:0;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .bottomnav a{min-height:54px;justify-content:center;}
  .more-list a{min-height:52px;}
}

/* iOS zooms the whole page when a focused field is under 16px — keep form text at 16px on phones/tablets. */
@media (max-width:1024px){
  input, select, textarea, .modal-input{font-size:16px !important;}
}

/* ---------- Phones ---------- */
@media (max-width:640px){
  main.content{padding-left:max(14px, env(safe-area-inset-left,0px));padding-right:max(14px, env(safe-area-inset-right,0px));padding-top:14px;}
  .content-inner{gap:16px;}
  .card{padding:15px;border-radius:12px;}
  .stat{padding:12px 13px;}
  .stat .value{font-size:18px;overflow-wrap:anywhere;}
  .stat .label{font-size:11px;}
  .topbar{gap:6px;padding-top:10px;padding-bottom:10px;}
  .search{padding:9px 11px;}

  /* Rows with a label and a cluster of amount/badge/buttons: the cluster drops under the label. */
  .field-row{flex-wrap:wrap;row-gap:6px;}
  .field-row .v{margin-left:auto;}
  .field-row .v[style*="display:flex"]{flex-wrap:wrap;justify-content:flex-end;}
  .row{flex-wrap:wrap;row-gap:8px;}
  .row > .who{flex:1 1 55%;}
  .row > :last-child:not(.who){margin-left:auto;}
  .alloc-summary-row{flex-wrap:wrap;row-gap:8px;}

  /* Button groups wrap and share the width instead of overflowing. */
  .modal-actions, .detail-head > div{flex-wrap:wrap;}
  /* Filter chips wrap onto extra lines so every option is visible (no hidden sideways scroll). */
  .filter-chips{flex-wrap:wrap;overflow:visible;gap:6px;}
  .filter-chips .chip{flex-shrink:0;min-height:40px;padding:6px 13px;font-size:13px;}
  .rules-jump{flex-wrap:wrap;overflow:visible;}
}

/* ---------- Tablets ---------- */
@media (min-width:641px) and (max-width:1024px){
  main.content{padding-top:22px;padding-left:24px;padding-right:24px;}
}

/* Rent history columns (amount · status · action): aligned columns on tablet/desktop; on phones
   the label takes the first line and the cluster sits under it, right-aligned. */
.rh-amt{text-align:right;}
.rh-badge, .rh-act{display:flex;}
@media (min-width:641px){
  .rh-amt{min-width:78px;}
  .rh-badge{min-width:104px;justify-content:flex-start;}
  .rh-act{min-width:74px;justify-content:flex-end;}
}
@media (max-width:640px){
  .field-row:has(.rh-amt) .k{flex-basis:100%;}
  .rh-act:empty{display:none;}
}

/* Tenant payment reference (e.g. NOE105) */
.ref-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:6px;
  background:var(--accent-bg);color:var(--accent);vertical-align:middle;font-variant-numeric:tabular-nums;}
.ref-card{border-color:var(--accent);}
.ref-card-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ref-card-label{font-size:12px;font-weight:600;color:var(--text-dim);}
.ref-card-code{font-size:26px;font-weight:700;letter-spacing:.08em;color:var(--accent);margin:2px 0 4px;}
.ref-card-help{font-size:12.5px;color:var(--text-faint);max-width:520px;}

/* WhatsApp send buttons: just the icon, in WhatsApp green */
.wa-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
  border-radius:999px;border:none;background:#25D366;color:#fff;cursor:pointer;padding:0;
  transition:transform .1s ease,filter .15s ease;vertical-align:middle;}
.wa-btn:hover{filter:brightness(.93);}
.wa-btn:active{transform:scale(.94);}
.wa-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.wa-btn .wa-icon{width:22px;height:22px;}
.wa-btn-sm{width:34px;height:34px;}
.wa-btn-sm .wa-icon{width:19px;height:19px;}
@media (pointer:coarse), (max-width:1024px){ .wa-btn, .wa-btn-sm{width:44px;height:44px;} .wa-btn .wa-icon{width:24px;height:24px;} }

/* Receipt icon buttons (upload / view / remove) */
.rcpt-group{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;}
.rcpt-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;padding:0;
  border-radius:999px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--accent);cursor:pointer;
  vertical-align:middle;transition:background-color .15s ease,transform .1s ease;}
.rcpt-btn svg{width:20px;height:20px;}
.rcpt-btn:hover{background:var(--accent-bg);}
.rcpt-btn:active{transform:scale(.94);}
.rcpt-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.rcpt-btn.has{background:var(--status-paid-bg);color:var(--status-paid);border-color:transparent;}
.rcpt-btn.rm{width:30px;height:30px;color:var(--status-overdue);border-color:transparent;background:transparent;}
.rcpt-btn.rm svg{width:15px;height:15px;}
.rcpt-btn.rm:hover{background:var(--status-overdue-bg);}
@media (pointer:coarse), (max-width:1024px){ .rcpt-btn{width:44px;height:44px;} .rcpt-btn.rm{width:40px;height:40px;} }

/* Close (×) pinned at the top-right of every pop-up window: a slim sticky bar, so rows scroll
   under it instead of being covered by the button */
.modal-x-bar{border-radius:14px 14px 0 0;}
.modal-x{width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elevated);
  color:var(--text-dim);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.modal-x svg{width:18px;height:18px;}
.modal-x:hover{background:var(--border);color:var(--text);}
.modal-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (pointer:coarse), (max-width:1024px){ .modal-x{width:44px;height:44px;} }
@media (max-width:640px){ .modal-x-bar{margin:-15px -15px 0;} }
.history-row .del svg{display:block;}

/* No pull-to-refresh / bounce reload when swiping down at the top (browser's own gesture too) */
html{overscroll-behavior-y:none;}

/* Visible focus ring for keyboard users on anything reachable with Tab */
[data-kb-click]:focus-visible, .card[tabindex]:focus-visible, .row[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;}
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Audit log */
.audit-day{font-size:11.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 4px;}
.audit-day:first-child{margin-top:4px;}
.audit-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;}
.audit-row:last-child{border-bottom:none;}
.audit-time{flex:0 0 64px;color:var(--text-faint);font-variant-numeric:tabular-nums;padding-top:1px;}
.audit-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.audit-who{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.audit-what{color:var(--text-dim);overflow-wrap:anywhere;}
.audit-row.login .audit-what{color:var(--status-paid);}

/* Tenant dashboard: overdue rent alert */
.overdue-banner{border:1.5px solid var(--status-overdue);background:var(--status-overdue-bg);border-radius:14px;padding:16px 18px;}
.overdue-banner-head{font-size:13.5px;font-weight:700;color:var(--status-overdue);}
.overdue-banner-amount{font-size:28px;font-weight:700;color:var(--status-overdue);margin:4px 0 6px;font-variant-numeric:tabular-nums;}
.overdue-banner-detail{font-size:13px;color:var(--text);line-height:1.45;}
.overdue-banner-note{font-size:12.5px;color:var(--text-dim);margin-top:10px;}
.overdue-banner-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.overdue-banner-actions a.mini-btn{text-decoration:none;display:inline-flex;align-items:center;}

/* Top-bar Back button (returns to the previous screen and scroll position) */
#back-btn[hidden]{display:none;}
#back-btn svg{width:18px;height:18px;}

/* Property Operations tabs on phones: a tidy 3×2 grid (icon over label) instead of a row of
   pills that ran off the screen and got cut ("Cleaning &…"). */
@media (max-width: 700px){
  .po-tabbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;padding-bottom:2px;}
  .po-tab{flex-direction:column;justify-content:center;gap:4px;padding:8px 4px;min-height:58px;
    border-radius:12px;font-size:11.5px;line-height:1.15;white-space:normal;text-align:center;min-width:0;}
  .po-tab-icon{width:18px;height:18px;}
}

/* Disabled buttons look disabled (e.g. timeline "Today" when already on the current months). */
.mini-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Payments → tenant → Bills: icon list + overdue summary + action sheet */
.bill-overdue-sum{display:flex;justify-content:space-between;align-items:center;background:var(--status-overdue-bg);color:var(--status-overdue);
  font-weight:700;font-size:13px;border-radius:10px;padding:8px 12px;margin:0 0 4px;}
.bill-owed-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--border);cursor:pointer;border-radius:8px;}
.field-list > .bill-owed-row:first-child{border-top:0;}
.bill-owed-row:hover{background:var(--bg);}
.bill-owed-row:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.bill-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.bill-owed-main{display:flex;flex-direction:column;min-width:0;flex:1;}
.bill-owed-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bill-owed-meta{font-size:12px;color:var(--text-faint);margin-top:1px;}
.bill-owed-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;}
.bill-owed-right b{font-size:14.5px;}
.bill-owed-chev{color:var(--text-faint);font-size:20px;line-height:1;margin-left:2px;}
.bill-sheet-list{display:flex;flex-direction:column;}
.bill-sheet-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--border);
  padding:13px 4px;font:inherit;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;min-height:48px;}
.bill-sheet-btn:first-child{border-top:0;}
.bill-sheet-btn span{width:22px;text-align:center;}
.bill-sheet-btn.wa{color:var(--status-paid);}
.bill-sheet-btn:hover{background:var(--bg);}
@media (max-width:640px){
  .bill-sheet-overlay{align-items:flex-end;}
  .bill-sheet{border-radius:18px 18px 0 0;width:100%;max-width:none;margin:0;padding-bottom:max(16px, env(safe-area-inset-bottom));}
}

/* Bills list: table on wide screens, readable cards on phones */
.bills-cards{display:none;}
@media (max-width:640px){
  .bills-table-card{display:none;}
  .bills-cards{display:block;padding:6px 14px;}
}
.bills-sort{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-faint);padding:6px 0 8px;border-bottom:1px solid var(--border);}
.bills-sort select{flex:1;min-width:0;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg-elevated);color:var(--text);}
.bills-sort .mini-btn{min-height:34px;padding:4px 10px;}
.bill-card{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--border);text-decoration:none;color:inherit;}
.bills-sort + .bill-card{border-top:0;}
.bill-card-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.bill-card-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.bill-card-top b{font-size:15px;flex-shrink:0;}
.bill-card-mid{display:flex;justify-content:space-between;gap:8px;align-items:center;}
.bill-card-mid .bill-owed-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bill-card-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px;}
.bc-chip{font-size:11px;font-weight:600;color:var(--text-dim);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:2px 8px;white-space:nowrap;}
.bc-chip.ok{color:var(--status-paid);background:var(--status-paid-bg);border-color:transparent;}
.bc-chip.warn{color:var(--status-due);background:var(--status-due-bg);border-color:transparent;}

/* Wi-Fi card */
.wifi-card{position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--accent-bg) 0%, var(--bg-elevated) 62%);}
.wifi-card::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);pointer-events:none;}
.pp-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.wifi-kicker{display:block;font-weight:700;text-transform:uppercase;color:var(--accent);}
.wifi-title{display:block;font-size:16px;font-weight:750;color:var(--text);}
.wifi-signal{position:relative;width:42px;height:42px;border-radius:12px;background:var(--bg-elevated);border:1px solid var(--border);flex-shrink:0;}
.wifi-signal i{position:absolute;left:50%;bottom:9px;border:2.5px solid var(--accent);border-color:var(--accent) transparent transparent transparent;
  border-radius:50%;transform:translateX(-50%);animation:wifiPulse 2.4s ease-in-out infinite;}
.wifi-signal i:nth-child(1){width:8px;height:8px;bottom:8px;border:0;background:var(--accent);animation-delay:0s;}
.wifi-signal i:nth-child(2){width:20px;height:20px;bottom:5px;animation-delay:.25s;}
.wifi-signal i:nth-child(3){width:32px;height:32px;bottom:-1px;animation-delay:.5s;}
@keyframes wifiPulse{0%,100%{opacity:.35}40%{opacity:1}}
@media (prefers-reduced-motion: reduce){.wifi-signal i{animation:none;opacity:1;}}
.wifi-field{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-top:8px;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:12px;}
.wifi-label{font-size:11.5px;color:var(--text-faint);width:66px;flex-shrink:0;}
.wifi-value{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:.02em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.wifi-btn{border:0;background:var(--text);color:var(--bg);font:inherit;font-size:12.5px;font-weight:700;border-radius:9px;
  padding:7px 12px;min-height:36px;cursor:pointer;flex-shrink:0;transition:transform .12s ease, background-color .2s ease;}
.wifi-btn:active{transform:scale(.95);}
.wifi-btn.ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border);}
.wifi-btn.done{background:var(--status-paid);color:#fff;}
.wifi-notes{font-size:12.5px;color:var(--text-dim);margin:10px 2px 0;}
.wifi-qr-toggle{margin-top:12px;background:none;border:1px dashed var(--border);color:var(--accent);font:inherit;font-size:13px;font-weight:700;
  border-radius:10px;padding:9px 12px;width:100%;cursor:pointer;min-height:42px;}
.wifi-qr{text-align:center;margin-top:10px;animation:wifiIn .25s ease;}
.wifi-qr-img{display:inline-block;width:190px;max-width:70vw;padding:10px;background:#fff;border-radius:14px;border:1px solid var(--border);}
.wifi-qr-img svg{display:block;width:100%;height:auto;}
.wifi-qr p{font-size:12px;color:var(--text-faint);margin:8px 0 0;}
@keyframes wifiIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Property page — every card in the same style as the Wi-Fi card (header with icon tile,
   soft gradient, fields as rounded tiles) so the page reads as one symmetric set. */
.pp-titles{display:flex;flex-direction:column;min-width:0;flex:1;}
.pp-actions{display:flex;gap:8px;flex-shrink:0;margin-left:auto;}
.pp-ic{width:42px;height:42px;border-radius:12px;background:var(--bg-elevated);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;}
.pp-ic svg{width:21px;height:21px;}
.pp .card{position:relative;overflow:hidden;background:linear-gradient(135deg, var(--accent-bg) 0%, var(--bg-elevated) 62%);}
.pp .card::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%);pointer-events:none;}
.pp .card > *{position:relative;z-index:1;}
.pp .field-list{gap:8px;}
.pp .field-row{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:11px 12px;
  align-items:center;border-bottom:1px solid var(--border);}
.pp .field-row:last-child{border-bottom:1px solid var(--border);}
.pp .field-row .k{font-size:12px;}
.pp .field-row .v{font-size:14px;font-weight:700;}
.pp .card h3{font-size:11px !important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent) !important;margin:16px 0 6px !important;}
.pp .card .row{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:10px 12px !important;margin-top:8px;}
@media (max-width:640px){ .pp-actions{margin-left:54px;} }
.pp{display:flex;flex-direction:column;gap:22px;}
.pp .room-row{background:var(--bg-elevated);border:1px solid var(--border) !important;border-radius:12px;padding:10px 12px;margin-top:8px !important;}

/* Properties list: key numbers + status chips per property */
.ps-tiles{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:8px;margin:12px 0 8px;}
.ps-tile{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;gap:2px;}
.ps-tile span{font-size:11px;color:var(--text-faint);font-weight:600;}
.ps-tile b{font-size:16px;font-variant-numeric:tabular-nums;}
.ps-tile.good b{color:var(--status-paid);}
.ps-tile.bad b{color:var(--status-overdue);}
.ps-chips{margin:0 0 6px;}
.bc-chip.bad{color:var(--status-overdue);background:var(--status-overdue-bg);border-color:transparent;}
button.ps-tile{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease, transform .1s ease;}
button.ps-tile:hover{border-color:var(--accent);}
button.ps-tile:active, button.bc-chip:active{transform:scale(.97);}
button.bc-chip{font-family:inherit;cursor:pointer;}
button.bc-chip:hover{filter:brightness(.96);text-decoration:underline;}
.pp-flash{animation:ppFlash 1.6s ease;}
@keyframes ppFlash{0%,60%{box-shadow:0 0 0 3px var(--accent);}100%{box-shadow:var(--shadow);}}
#pp-lease, #pp-wifi, #dash-moveouts{scroll-margin-top:90px;}

/* =====================================================================================
   "Liquid Glass" look (Apple's design language since iOS 26, continued in iOS 27):
   a soft, slowly drifting colour wallpaper behind everything, and translucent frosted-glass
   surfaces (cards, sidebar, top bar, bottom bar, windows) that let it glow through.
   ===================================================================================== */
:root{
  --wall-base:#f2f4f7;
  --wall-1:rgba(147,197,253,.28);  /* soft sky blue */
  --wall-2:rgba(196,181,253,.22);  /* soft lavender */
  --wall-3:rgba(167,243,208,.20);  /* soft mint */
  --wall-4:rgba(254,215,170,.18);  /* soft peach */
  --glass:rgba(255,255,255,.58);
  --glass-border:rgba(255,255,255,.75);
  --glass-edge:rgba(20,30,60,.08);
  --glass-shadow:0 10px 30px rgba(30,45,90,.10), 0 1px 0 rgba(255,255,255,.9) inset;
  --glass-blur:blur(24px) saturate(180%);
}

/* the wallpaper */
html{background:var(--wall-base);}
body{background:transparent !important;}
.ios-wall{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--wall-base);}
.ios-wall i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;}
.ios-wall i:nth-child(1){width:62vmax;height:62vmax;left:-18vmax;top:-20vmax;background:var(--wall-1);animation:wallDrift1 28s ease-in-out infinite alternate;}
.ios-wall i:nth-child(2){width:55vmax;height:55vmax;right:-20vmax;top:-8vmax;background:var(--wall-2);animation:wallDrift2 34s ease-in-out infinite alternate;}
.ios-wall i:nth-child(3){width:58vmax;height:58vmax;left:10vmax;bottom:-30vmax;background:var(--wall-3);animation:wallDrift3 30s ease-in-out infinite alternate;}
.ios-wall i:nth-child(4){width:40vmax;height:40vmax;right:-6vmax;bottom:-12vmax;background:var(--wall-4);animation:wallDrift2 38s ease-in-out infinite alternate-reverse;}
@keyframes wallDrift1{to{transform:translate(12vmax, 8vmax) scale(1.08);}}
@keyframes wallDrift2{to{transform:translate(-10vmax, 10vmax) scale(1.12);}}
@keyframes wallDrift3{to{transform:translate(8vmax, -10vmax) scale(.94);}}
@media (prefers-reduced-motion: reduce){ .ios-wall i{animation:none;} }

/* glass surfaces */
.card, .stat, .pp .card, .wifi-card, .rei-banner{
  background:var(--glass) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border) !important;
  box-shadow:var(--glass-shadow) !important;
}
.card{border-radius:22px;}
.stat{border-radius:18px;}
.pp .card::after, .wifi-card::after{opacity:.6;}
.sidebar{background:var(--glass) !important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border) !important;}
.topbar{background:transparent !important;border-bottom:0 !important;-webkit-backdrop-filter:none;backdrop-filter:none;}
.topbar .search, .topbar .icon-btn{background:var(--glass) !important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border) !important;box-shadow:var(--glass-shadow);}
.topbar .search{border-radius:999px;}
.bottomnav{background:var(--glass) !important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-top:1px solid var(--glass-border) !important;}
@media (max-width:640px){
  /* floating capsule tab bar, like iOS */
  .bottomnav{left:12px;right:12px;bottom:max(10px, env(safe-area-inset-bottom));border-radius:28px;border:1px solid var(--glass-border) !important;
    box-shadow:0 12px 34px rgba(20,30,60,.18), 0 1px 0 rgba(255,255,255,.6) inset;padding-bottom:0;}
}
.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.modal-card{background:var(--glass-strong) !important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border) !important;border-radius:24px !important;}
.mini-btn, .chip, .view-btn{border-radius:999px;}
/* inner tiles sit on the glass as lighter/darker frosted pills */
.field-row, .pp .field-row, .ps-tile, .wifi-field, .bill-card, .pp .room-row, .pp .card .row{border-color:var(--glass-edge);}
.pp .field-row, .ps-tile, .wifi-field, .pp .room-row, .pp .card .row, .pp-ic, .wifi-signal{background:color-mix(in srgb, var(--bg-elevated) 70%, transparent) !important;}
/* anyone who asked the system for less transparency gets solid surfaces */
@media (prefers-reduced-transparency: reduce){
  .card, .stat, .sidebar, .bottomnav, .modal-card, .topbar .search, .topbar .icon-btn{background:var(--bg-elevated) !important;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
#auth-screen{background:transparent !important;}

/* =====================================================================================
   One field system for the whole app (same family as the glass cards and the Wi-Fi tiles):
   every text box, number, date, dropdown and text area — in forms, windows, filters and
   pages — is the same rounded frosted pill with the same height, border and focus glow.
   Info rows (label → value) everywhere are the same rounded tiles used on the property page.
   ===================================================================================== */
:root{ --field-bg:rgba(255,255,255,.72); --field-bg-focus:rgba(255,255,255,.92); --field-border:rgba(20,30,60,.12); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
select, textarea, .modal-input, .bills-sort select{
  background:var(--field-bg) !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--field-border) !important;
  border-radius:14px !important;
  color:var(--text);font-family:var(--font-sans) !important;font-size:14px;
  padding:10px 14px;min-height:44px;box-sizing:border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 1px 2px rgba(20,30,60,.04);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
textarea{min-height:80px;line-height:1.45;}
select{appearance:none;-webkit-appearance:none;padding-right:36px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a968e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 14px center !important;cursor:pointer;}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus, textarea:focus, .modal-input:focus{
  outline:none !important;background-color:var(--field-bg-focus) !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 1px 0 rgba(255,255,255,.5) inset !important;
}
input::placeholder, textarea::placeholder{color:var(--text-faint);opacity:1;}
input[disabled], select[disabled], textarea[disabled]{opacity:.55;cursor:not-allowed;}
.form-row label{font-size:12px;font-weight:650;color:var(--text-dim);margin:0 0 6px 4px;letter-spacing:.01em;}
.form-row{margin:12px 0;}
/* file pickers: a soft dashed drop zone instead of the browser's bare button */
input[type="file"]:not([hidden]){width:100%;box-sizing:border-box;padding:10px;border:1px dashed var(--field-border);border-radius:14px;
  background:var(--field-bg);font:inherit;font-size:13px;color:var(--text-dim);}
input[type="file"]::file-selector-button{border:0;border-radius:999px;background:var(--text);color:var(--bg);font:inherit;font-size:12.5px;font-weight:700;
  padding:7px 14px;margin-right:10px;cursor:pointer;}
input[type="checkbox"], input[type="radio"]{accent-color:var(--accent);width:18px;height:18px;}
/* search pill in the top bar keeps its own size */
.topbar input{min-height:0 !important;}

/* Info rows (label → value) everywhere: the same rounded tiles as the property page */
.field-list{gap:8px;}
.card .field-list > .field-row{background:color-mix(in srgb, var(--bg-elevated) 70%, transparent);border:1px solid var(--glass-edge) !important;
  border-radius:12px;padding:11px 12px;align-items:center;}
.card .field-list > .field-row .k{font-size:12px;}
.card .field-list > .field-row .v{font-weight:700;}
/* list rows inside cards: rounded hover instead of hard lines */
.card .row{border-bottom-color:var(--glass-edge);}
.card a.row:hover, .card .row[role="button"]:hover, .card .row[role="link"]:hover{background:color-mix(in srgb, var(--accent) 6%, transparent);border-radius:12px;}
/* tables in cards: soft header, rounded corners */
.report-table th{background:color-mix(in srgb, var(--bg-elevated) 60%, transparent);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint);}
.report-table th:first-child{border-top-left-radius:12px;} .report-table th:last-child{border-top-right-radius:12px;}
.report-table td{border-color:var(--glass-edge) !important;}
/* buttons: same capsule family */
.mini-btn{border-radius:999px !important;min-height:40px;padding-left:16px;padding-right:16px;}
.mini-btn:not(.primary):not(.danger){background:var(--field-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--field-border);}
.chip:not(.active){background:var(--field-bg);border:1px solid var(--field-border);}
.modal-x-bar{background:transparent !important;border-bottom:0 !important;}
:root{--glass-strong:rgba(255,255,255,.90);}
.modal-overlay{background:rgba(15,20,35,.28) !important;}

/* ---------- iOS-style type scale ----------
   Large bold titles with tight tracking, 15–17px body, grey footnote/caption text, section
   headers in small caps-style grey — the same rhythm as Settings/Health/Wallet on iOS. */
body{font-family:var(--font-sans);font-size:15px;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01","ss03";}
h1.page-title{font-size:32px !important;font-weight:750;letter-spacing:-0.025em;line-height:1.1;}
@media (max-width:640px){ h1.page-title{font-size:30px !important;} }
.page-sub{font-size:15px;color:var(--text-dim);letter-spacing:-0.01em;}
.card h2, .card > h2{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-faint);border-bottom:0 !important;padding-bottom:2px;}
.wifi-title, .prop-name{font-size:17px !important;font-weight:650;letter-spacing:-0.02em;}
.wifi-kicker{font-size:11px;letter-spacing:.06em;}
.stat .value, .ps-tile b{font-weight:700;letter-spacing:-0.02em;}
.stat .value{font-size:24px;}
.field-row, .row .who .name, .bill-owed-name{letter-spacing:-0.01em;}
.row .who .meta, .bill-owed-meta, .prop-addr, .prop-meta, .field-row .k{color:var(--text-faint);}
.mini-btn, .chip, .view-btn, .wifi-btn{font-weight:600;letter-spacing:-0.01em;font-size:14px;}
.view-btn{text-transform:none !important;}
.badge{font-weight:600;letter-spacing:0;}
.nav a, .sidebar a, .bottomnav a{letter-spacing:-0.01em;}
.bottomnav a span, .bottomnav .label{font-size:10.5px;font-weight:600;}

/* "Add" buttons: pill with a "+" on wide screens, a round "+" next to the title on phones */
.add-btn{display:inline-flex !important;align-items:center;gap:6px;white-space:nowrap;}
.add-btn-plus{font-size:18px;line-height:1;font-weight:500;margin-top:-1px;}
@media (max-width:640px){
  .add-btn{width:44px;height:44px;min-height:44px !important;padding:0 !important;justify-content:center;border-radius:50% !important;flex-shrink:0;
    box-shadow:0 6px 18px color-mix(in srgb, var(--text) 25%, transparent);}
  .add-btn .add-btn-text{display:none;}
  .add-btn .add-btn-plus{font-size:26px;font-weight:400;margin:-2px 0 0;}
  .detail-head.has-add-btn{flex-direction:row !important;flex-wrap:nowrap !important;align-items:flex-start !important;justify-content:space-between;gap:12px;}
  .detail-head.has-add-btn > div:first-child{min-width:0;flex:1;}
  .detail-head.has-add-btn .add-btn{margin-top:4px;}
  .pp-head .pp-actions{margin-left:auto !important;}
  .pp-head{flex-wrap:nowrap !important;}
}

/* ===== Bills page: segmented view switch, property pill, collapsible timeline ===== */
.seg.seg-wide{display:flex;width:100%;max-width:420px;gap:2px;padding:3px;border-radius:12px;margin:0 0 12px;
  background:var(--glass,rgba(120,120,128,.12));border:1px solid var(--glass-border,var(--border));
  -webkit-backdrop-filter:blur(var(--glass-blur,18px));backdrop-filter:blur(var(--glass-blur,18px));}
.seg.seg-wide .seg-btn{flex:1;border:none;background:none;font:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  padding:7px 10px;min-height:34px;border-radius:9px;color:var(--text-dim);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s;}
.seg.seg-wide .seg-btn.active{background:var(--bg-elevated,#fff);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);}
.bills-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;}
.pill-select{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:0 4px 0 12px;min-height:38px;border-radius:999px;
  background:var(--glass-strong,var(--bg-elevated));border:1px solid var(--glass-border,var(--border));box-shadow:var(--glass-shadow,none);}
.pill-select > span{font-size:15px;line-height:1;}
.pill-select select{appearance:none;-webkit-appearance:none;border:none !important;background:transparent !important;box-shadow:none !important;
  font:inherit;font-size:14px;font-weight:600;color:var(--text);padding:8px 26px 8px 2px !important;min-height:0;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%) !important;
  background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52% !important;background-size:5px 5px,5px 5px !important;background-repeat:no-repeat !important;}
.pill-select select:focus{outline:none;}
.pill-select:focus-within{box-shadow:0 0 0 3px rgba(10,132,255,.25);}
.collapsible-card{padding:0 !important;overflow:hidden;}
.collapsible-card > summary{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:16px 44px 16px 18px;
  cursor:pointer;position:relative;font-weight:700;font-size:16px;letter-spacing:-.01em;}
.collapsible-card > summary::-webkit-details-marker{display:none;}
.collapsible-card > summary::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);transform:rotate(45deg);transition:transform .2s;}
.collapsible-card[open] > summary::after{transform:rotate(-135deg);margin-top:-2px;}
.collapsible-card .cc-hint{font-size:12.5px;font-weight:500;color:var(--text-dim);}
.collapsible-card > :not(summary){margin-left:18px;margin-right:18px;}
.collapsible-card > :last-child{margin-bottom:16px;}
@media (max-width:640px){
  .seg.seg-wide{max-width:none;}
  .bills-toolbar .pill-select{flex:1;}
  .bills-toolbar .pill-select select{max-width:none;flex:1;}
}
.pill-select{min-width:0;}
.pill-select select{min-width:0;}
@media (max-width:640px){ .bills-toolbar .pill-select select{width:0;} }
.seg.seg-wide + .bills-toolbar{margin-top:-2px;}
@media (max-width:640px){
  .bills-stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;}
  .bills-stats .stat{min-width:0;}
  .bills-stats .stat .label{font-size:11.5px;}
  .bills-stats .stat .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:640px){ .bills-stats .stat{padding:10px 9px !important;} .bills-stats .stat .value{font-size:15.5px !important;letter-spacing:-.02em;} }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .seg.seg-wide .seg-btn.active{background:rgba(255,255,255,.16);} }
:root[data-theme="dark"] .seg.seg-wide .seg-btn.active{background:rgba(255,255,255,.16);}

/* ===== Organised pages (shared): toolbar of pills, pill buttons, section labels, compact stats ===== */
.page-toolbar .pill-select{flex:1 1 150px;}
.pill-select.is-disabled{opacity:.6;}
.pill-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--text);cursor:pointer;white-space:nowrap;background:var(--glass-strong,var(--bg-elevated));border:1px solid var(--glass-border,var(--border));box-shadow:var(--glass-shadow,none);}
.pill-btn:active{transform:scale(.97);}
.seg .seg-count{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;font-size:11px;line-height:17px;background:rgba(120,120,128,.16);color:var(--text-dim);}
.section-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-faint);margin:4px 2px 8px;}
.section-link{border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent,#0a84ff);cursor:pointer;padding:4px 0;}
.stat-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.count-pill{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-size:11px;line-height:18px;background:var(--status-overdue-bg,rgba(255,59,48,.14));color:var(--status-overdue);vertical-align:middle;letter-spacing:0;}
.show-more-btn{display:block;width:100%;margin-top:10px;padding:10px;border:none;border-radius:12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  background:rgba(120,120,128,.10);color:var(--text);}
@media (max-width:640px){
  .dash-counts .stat .value{font-size:20px !important;}
  .dash-counts .stat .label{font-size:11px;}
}
/* Notifications list */
.nt-list{padding-top:4px;padding-bottom:4px;}
.nt-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border);}
.nt-row:last-child{border-bottom:none;}
.nt-emoji{flex:0 0 36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(120,120,128,.10);}
.nt-main{flex:1;min-width:0;}
.nt-top{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;}
.nt-title{font-weight:650;font-size:14px;line-height:1.3;min-width:0;overflow-wrap:anywhere;}
.nt-top > :last-child:not(.nt-title){flex-shrink:0;}
.nt-meta{font-size:12px;color:var(--text-faint);margin-top:2px;overflow-wrap:anywhere;}
.nt-body{font-size:12.5px;color:var(--text-dim);margin-top:4px;overflow-wrap:anywhere;}
.nt-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.nt-actions .mini-btn{min-height:32px;padding:5px 12px;font-size:12.5px;}
/* Reports: by-tenant list instead of a wide table */
.rt-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.rt-row:last-child{border-bottom:none;}
.rt-main{flex:1;min-width:0;}
.rt-name{font-weight:600;font-size:14px;overflow-wrap:anywhere;}
.rt-sub{font-size:12px;color:var(--text-faint);margin-top:2px;}
.rt-amt{text-align:right;font-weight:700;font-size:14.5px;white-space:nowrap;}
.rt-amt.warn{color:var(--status-overdue);}
.rt-amt small{display:block;font-size:11px;font-weight:500;color:var(--text-faint);}
/* Profits */
.pf-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
.pf-name{font-weight:700;font-size:16px;color:inherit;text-decoration:none;min-width:0;overflow-wrap:anywhere;}
.pf-big{font-weight:800;font-size:20px;color:var(--status-paid);white-space:nowrap;letter-spacing:-.02em;}
.pf-big.neg{color:var(--status-overdue);}
.pf-big small{font-size:12px;font-weight:600;color:var(--text-faint);margin-left:2px;}
.pf-total .k,.pf-total .v{font-weight:700;color:var(--text);}
.pf-h{font-size:12px;text-transform:none;letter-spacing:0;color:var(--text-dim);margin:14px 0 6px;}
.pf-more{margin-top:12px;border-top:1px solid var(--border);padding-top:4px;}
.pf-more > summary{list-style:none;cursor:pointer;padding:10px 24px 6px 0;font-size:13.5px;font-weight:600;color:var(--accent,#0a84ff);position:relative;}
.pf-more > summary::-webkit-details-marker{display:none;}
.pf-more > summary::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;}
.pf-more[open] > summary::after{transform:rotate(-135deg);margin-top:0;}
@media (max-width:640px){
  .bills-stats.cols-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .dash-counts .stat{padding:10px 8px !important;}
}
/* Dashboard "Needs attention": name + amount on one line, actions underneath, side by side */
.needs-card .row{flex-wrap:wrap;align-items:center;gap:6px 12px;}
.needs-card .row > .who{flex:1 1 150px;min-width:0;}
.needs-card .row > div:last-child{gap:10px !important;margin-left:auto;}
.needs-card .row > div:last-child > div:last-child{flex-direction:row !important;align-items:center;}
.needs-card .row .view-btn{min-height:34px;padding:6px 14px;font-size:13px;}
.needs-card .row .amount{text-align:right;}
/* Payments: one foldable card per tenant */
.pay-card > summary{list-style:none;cursor:pointer;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;position:relative;}
.pay-card > summary::-webkit-details-marker{display:none;}
.pay-card > summary::after{content:"";position:absolute;right:4px;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);transform:rotate(45deg);transition:transform .2s;}
.pay-card[open] > summary::after{transform:rotate(-135deg);margin-top:-2px;}
.pay-card[open] > summary{margin-bottom:6px;}
.pay-who{display:flex;flex-direction:column;min-width:0;}
.pay-name{font-weight:700;font-size:15px;}
.pay-prop{font-size:12px;color:var(--text-faint);}
.pay-badges{display:flex;gap:6px;flex-wrap:wrap;}
/* Bills header: round "Recurring" button next to +, missing-invoice alert line, back pill on sub-pages */
.round-icon-btn{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:var(--text);cursor:pointer;background:var(--glass-strong,var(--bg-elevated));border:1px solid var(--glass-border,var(--border));box-shadow:var(--glass-shadow,none);}
.round-icon-btn:active{transform:scale(.95);}
.rib-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;line-height:18px;font-weight:700;
  background:var(--text);color:var(--bg-elevated,#fff);}
.detail-head.has-add-btn .round-icon-btn{margin-top:4px;}
.bills-alert{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 0 14px;padding:12px 14px;border-radius:16px;cursor:pointer;font:inherit;color:var(--text);
  background:rgba(255,159,10,.12);border:1px solid rgba(255,159,10,.35);}
.bills-alert .ba-ic{font-size:20px;}
.bills-alert .ba-txt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px;}
.bills-alert .ba-txt small{font-size:12px;color:var(--text-dim);margin-top:1px;}
.bills-alert .ba-go{font-size:22px;color:var(--text-dim);}
.bills-back{align-self:flex-start;width:auto;margin:0 0 8px;min-height:34px;padding:0 12px;font-size:13px;}
.collapsible-card > p{margin-left:18px !important;margin-right:18px !important;}

/* ===== Filters v2: compact pills that fit their text; switch + pills share one line on wide screens ===== */
.page-toolbar .pill-select,.bills-toolbar .pill-select{flex:0 0 auto;}
.pill-select select{width:auto !important;}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;}
.filter-bar > .seg.seg-wide{margin:0;width:auto;max-width:none;flex:0 0 auto;}
.filter-bar > .seg.seg-wide .seg-btn{flex:0 0 auto;padding:7px 16px;}
.filter-bar > .page-toolbar{display:contents;}
.filter-bar .pill-btn:last-child{margin-left:auto;}
.page-toolbar,.bills-toolbar{gap:10px;}
.section-label{margin-top:8px;}
.section-label + .stat-grid{margin-top:0;}
@media (max-width:640px){
  .filter-bar{gap:8px;}
  .filter-bar > .seg.seg-wide{flex:1 1 100%;}
  .filter-bar > .seg.seg-wide .seg-btn{flex:1;padding:7px 8px;}
  .page-toolbar .pill-select,.bills-toolbar .pill-select{flex:1 1 150px;min-width:0;}
  .pill-select select{width:0 !important;flex:1;max-width:none;}
  .filter-bar .pill-btn:last-child{margin-left:0;}
}
/* Pills size to their CURRENT text (not the longest option) where supported; long names ellipsize */
.pill-select select{field-sizing:content;max-width:220px;text-overflow:ellipsis;}
/* Section labels sit close to the tiles they title (the page column uses a 22px gap) */
.content-inner > .section-label{margin:4px 2px -12px;}
@media (max-width:640px){
  .pill-select select{field-sizing:fixed;}
  .filter-bar .pill-btn,.page-toolbar .pill-btn{flex:1 1 150px;justify-content:center;}
}
.seg.seg-wide + .filter-bar{margin-top:-6px;}
.ps-tile small{font-size:10.5px;color:var(--text-faint);font-weight:500;line-height:1.25;}

/* Dropdown lists must follow the APP theme, not the computer's: with the app in dark mode on a
   light Windows, the native list opened white with light-grey text (unreadable). */
:root[data-theme="dark"]{color-scheme:dark;}
:root[data-theme="light"]{color-scheme:light;}
select option,select optgroup{background-color:var(--bg-elevated);color:var(--text);}
select option:checked{background-color:var(--accent,#0a84ff);color:#fff;}
select option:disabled{color:var(--text-faint);}

/* ===== App-styled dropdown menu for the pill filters (desktop) ===== */
.pill-menu{position:fixed;z-index:3000;overflow:auto;padding:6px;border-radius:16px;min-width:200px;max-width:min(360px, calc(100vw - 24px));border:1px solid var(--glass-border,var(--border));
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 18px 50px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.10);animation:pmIn .14s ease-out;}
@keyframes pmIn{from{opacity:0;transform:translateY(-4px) scale(.98);}to{opacity:1;transform:none;}}
.pm-search{padding:2px 2px 6px;}
.pm-search input{width:100%;min-height:34px;padding:6px 12px;border-radius:10px;font:inherit;font-size:13.5px;color:var(--text);
  background:var(--field-bg,rgba(120,120,128,.10));border:1px solid var(--field-border,var(--border));outline:none;}
.pm-search input:focus{border-color:var(--accent,#0a84ff);}
.pm-list{display:flex;flex-direction:column;gap:1px;}
.pm-item{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 12px 7px 8px;border:none;border-radius:10px;background:none;
  font:inherit;font-size:14px;font-weight:500;color:var(--text);text-align:left;cursor:pointer;white-space:nowrap;}
.pm-item:hover,.pm-item:focus-visible{background:rgba(120,120,128,.14);outline:none;}
.pm-item.on{font-weight:700;}
.pm-item.dis{opacity:.45;cursor:default;}
.pm-check{flex:0 0 18px;text-align:center;font-weight:800;color:var(--accent,#0a84ff);}
.pm-label{overflow:hidden;text-overflow:ellipsis;}
.pill-select.open{box-shadow:0 0 0 3px rgba(10,132,255,.22),var(--glass-shadow,none);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill-menu{box-shadow:0 18px 50px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);} }
:root[data-theme="dark"] .pill-menu{box-shadow:0 18px 50px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);}
.pill-menu{background:rgba(255,255,255,.97);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill-menu{background:rgba(26,33,41,.97);} }
:root[data-theme="dark"] .pill-menu{background:rgba(26,33,41,.97);}

/* ===== App-styled calendar for date fields (desktop) ===== */
@media (hover:hover) and (pointer:fine){
  input[type="date"]{cursor:pointer;padding-right:38px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9.5h18M8 3v3M16 3v3'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:18px 18px !important;}
  input[type="date"]::-webkit-calendar-picker-indicator{display:none;}
}
input[type="date"].dp-open{border-color:var(--accent,#0a84ff) !important;box-shadow:0 0 0 3px rgba(10,132,255,.20) !important;}
.date-pop{position:fixed;z-index:3000;width:296px;padding:12px;border-radius:18px;user-select:none;
  background:rgba(255,255,255,.97);border:1px solid var(--glass-border,var(--border));
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 18px 50px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.10);animation:pmIn .14s ease-out;color:var(--text);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .date-pop{background:rgba(26,33,41,.97);box-shadow:0 18px 50px rgba(0,0,0,.55);} }
:root[data-theme="dark"] .date-pop{background:rgba(26,33,41,.97);box-shadow:0 18px 50px rgba(0,0,0,.55);}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;}
.dp-title{font-weight:700;font-size:15px;letter-spacing:-.01em;}
.dp-nav{width:32px;height:32px;border-radius:50%;border:none;background:rgba(120,120,128,.12);color:var(--text);font-size:18px;line-height:1;cursor:pointer;}
.dp-nav:hover{background:rgba(120,120,128,.22);}
.dp-week,.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
.dp-week span{font-size:11px;font-weight:700;color:var(--text-faint);padding:4px 0;}
.dp-cell{height:36px;border:none;border-radius:50%;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums;}
.dp-cell.empty{cursor:default;}
.dp-cell:hover:not(:disabled):not(.sel){background:rgba(120,120,128,.14);}
.dp-cell.today{color:var(--accent,#0a84ff);font-weight:800;box-shadow:inset 0 0 0 1.5px currentColor;}
.dp-cell.sel{background:var(--text);color:var(--bg-elevated,#fff);font-weight:700;box-shadow:none;}
.dp-cell:disabled{opacity:.3;cursor:default;}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.dp-link{border:none;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-dim);cursor:pointer;padding:6px 8px;border-radius:8px;}
.dp-link.strong{color:var(--accent,#0a84ff);}
.dp-link:hover{background:rgba(120,120,128,.12);}


/* ===== Softer dark mode: charcoal-slate instead of near-black, gentler contrast and colours ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1d222b; --bg-elevated:#262c37; --border:#353d4a; --sidebar-bg:#1a1f27;
    --text:#e4e7ec; --text-dim:#a9b1bd; --text-faint:#808a97;
    --accent:#8fb0d4; --accent-bg:#2a3646;
    --status-paid:#5cc191; --status-paid-bg:#1f3a2e;
    --status-due:#d9ae5c; --status-due-bg:#3a3020;
    --status-overdue:#e8888b; --status-overdue-bg:#3d2528;
    --status-upcoming:#86a9e8; --status-upcoming-bg:#253350;
    --status-move:#b99be6; --status-move-bg:#33284a;
    --wall-base:#1b2029;
    --wall-1:rgba(96,140,210,.13); --wall-2:rgba(150,130,210,.10); --wall-3:rgba(90,170,160,.08); --wall-4:rgba(210,150,170,.05);
    --glass:rgba(40,46,58,.55); --glass-strong:rgba(38,44,56,.93);
    --glass-border:rgba(255,255,255,.08); --glass-edge:rgba(0,0,0,.22);
    --glass-shadow:0 8px 24px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.06) inset;
    --field-bg:rgba(255,255,255,.07); --field-bg-focus:rgba(255,255,255,.11); --field-border:rgba(255,255,255,.11);
    --shadow:0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.2);
  }
}
:root[data-theme="dark"]{
    --bg:#1d222b; --bg-elevated:#262c37; --border:#353d4a; --sidebar-bg:#1a1f27;
    --text:#e4e7ec; --text-dim:#a9b1bd; --text-faint:#808a97;
    --accent:#8fb0d4; --accent-bg:#2a3646;
    --status-paid:#5cc191; --status-paid-bg:#1f3a2e;
    --status-due:#d9ae5c; --status-due-bg:#3a3020;
    --status-overdue:#e8888b; --status-overdue-bg:#3d2528;
    --status-upcoming:#86a9e8; --status-upcoming-bg:#253350;
    --status-move:#b99be6; --status-move-bg:#33284a;
    --wall-base:#1b2029;
    --wall-1:rgba(96,140,210,.13); --wall-2:rgba(150,130,210,.10); --wall-3:rgba(90,170,160,.08); --wall-4:rgba(210,150,170,.05);
    --glass:rgba(40,46,58,.55); --glass-strong:rgba(38,44,56,.93);
    --glass-border:rgba(255,255,255,.08); --glass-edge:rgba(0,0,0,.22);
    --glass-shadow:0 8px 24px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.06) inset;
    --field-bg:rgba(255,255,255,.07); --field-bg-focus:rgba(255,255,255,.11); --field-border:rgba(255,255,255,.11);
    --shadow:0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.2);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill-menu,:root:not([data-theme="light"]) .date-pop{background:rgba(38,44,56,.97);} }
:root[data-theme="dark"] .pill-menu,:root[data-theme="dark"] .date-pop{background:rgba(38,44,56,.97);}

/* ===== New-tenant welcome guide ===== */
#welcome-modal{z-index:1050;}
.welcome-card{max-width:520px;width:100%;}
.wg-dots{display:flex;justify-content:center;gap:6px;margin:-6px 0 14px;}
.wg-dots i{width:7px;height:7px;border-radius:99px;background:rgba(120,120,128,.25);transition:all .25s;}
.wg-dots i.done{background:var(--status-paid);}
.wg-dots i.on{width:22px;background:var(--text);}
.wg-body{animation:pmIn .2s ease-out;}
.wg-hero{font-size:44px;line-height:1;text-align:center;margin:0 0 8px;}
.wg-title{text-align:center;font-size:22px !important;font-weight:800;letter-spacing:-.02em;text-transform:none !important;color:var(--text) !important;margin:0 0 6px !important;}
.wg-lead{text-align:center;font-size:14px;color:var(--text-dim);margin:0 0 16px;line-height:1.45;}
.wg-sub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin:14px 0 6px;}
.wg-facts{display:flex;flex-direction:column;gap:8px;margin:12px 0;}
.wg-fact{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(120,120,128,.08);border:1px solid var(--border);}
.wg-fact > span{font-size:20px;}
.wg-fact small{display:block;font-size:11.5px;color:var(--text-faint);font-weight:600;}
.wg-fact b{font-size:14px;}
.wg-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px;font-size:14px;color:var(--text-dim);}
.wg-rent{text-align:center;margin:4px 0 6px;}
.wg-rent b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;}
.wg-rent span{font-size:13.5px;color:var(--text-dim);}
.wg-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;}
.wg-date{padding:10px 12px;border-radius:14px;background:rgba(120,120,128,.08);border:1px solid var(--border);}
.wg-date b{display:block;font-size:15px;}
.wg-date small{font-size:11.5px;color:var(--text-faint);}
.wg-date.late{border-color:var(--status-overdue);}
.wg-date.late small{color:var(--status-overdue);}
.wg-ref{display:flex;align-items:center;gap:12px;margin:14px 0;padding:12px 14px;border-radius:14px;background:var(--accent-bg,rgba(10,132,255,.08));}
.wg-ref > div{flex:1;min-width:0;}
.wg-ref small{display:block;font-size:11.5px;color:var(--text-faint);font-weight:600;}
.wg-ref b{font-size:20px;letter-spacing:.04em;}
.wg-ref p{margin:4px 0 0;font-size:12.5px;color:var(--text-dim);}
.wg-steps{margin:12px 0;padding-left:22px;display:grid;gap:7px;font-size:14px;line-height:1.4;}
.wg-note{margin:12px 0 0;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;color:var(--text-dim);background:rgba(120,120,128,.08);}
.wg-done{margin:10px 0;padding:10px 12px;border-radius:12px;font-size:13.5px;background:var(--status-paid-bg);color:var(--status-paid);font-weight:600;}
.wg-rules{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.wg-rules li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:rgba(120,120,128,.07);font-size:14px;line-height:1.4;}
.wg-rules li > :first-child{flex-shrink:0;}
.wg-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;min-height:46px;padding:10px 14px;border-radius:14px;
  border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font:inherit;font-weight:700;font-size:14.5px;text-decoration:none;cursor:pointer;}
.wg-cta.primary{background:var(--text);color:var(--bg-elevated);border-color:transparent;}
.wg-cta.wa{background:#25d366;color:#fff;border-color:transparent;}
.wg-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px;}
.wg-actions .mini-btn{min-height:44px;padding:0 20px;font-size:14.5px;}
.wg-actions .mini-btn.primary{flex:1;max-width:260px;margin-left:auto;}
.ghost-btn{background:transparent !important;border-color:transparent !important;color:var(--text-dim) !important;}
.welcome-card .wifi-card{margin:0;box-shadow:none;}
.wg-entry{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;font:inherit;color:var(--text);}
.wg-entry-ic{font-size:26px;}
.wg-entry-txt{flex:1;display:flex;flex-direction:column;}
.wg-entry-txt b{font-size:15px;}
.wg-entry-txt small{font-size:12.5px;color:var(--text-faint);}
.wg-entry-go{font-size:22px;color:var(--text-faint);}
.wg-note.late{background:var(--status-overdue-bg);color:var(--status-overdue);}

/* ===== Tenant My Payments: bills summary ===== */
.tb-head{display:flex;align-items:center;gap:12px;}
.tb-ic{font-size:24px;}
.tb-titles{flex:1;min-width:0;display:flex;flex-direction:column;}
.tb-titles b{font-size:16px;}
.tb-titles small{font-size:12.5px;color:var(--text-faint);}
.tb-red{color:var(--status-overdue);font-weight:700;}
.tb-total{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--status-due);white-space:nowrap;}
.tb-sum.bad .tb-total{color:var(--status-overdue);}
.tb-total.ok{font-size:15px;color:var(--status-paid);}
.tb-list{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--border);}
.tb-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 2px;border:none;border-bottom:1px solid var(--border);background:none;font:inherit;color:var(--text);text-align:left;cursor:pointer;}
.tb-row:hover{background:rgba(120,120,128,.06);}
.tb-type{flex:0 0 36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.tb-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.tb-main b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-main small{font-size:12px;color:var(--text-faint);}
.tb-amt{display:flex;flex-direction:column;align-items:flex-end;font-weight:700;font-size:14.5px;white-space:nowrap;}
.tb-when{font-size:11.5px;font-weight:600;color:var(--text-faint);}
.tb-when.late{color:var(--status-overdue);}
.tb-when.wait{color:var(--status-upcoming);}
.tb-go{font-size:20px;color:var(--text-faint);}
.tb-all{display:block;text-align:center;margin-top:12px;font-weight:700;font-size:14px;color:var(--accent);text-decoration:none;}
.tb-flash{animation:tbFlash 1.8s ease-out;}
@keyframes tbFlash{0%,40%{box-shadow:0 0 0 3px var(--accent),var(--glass-shadow,none);}100%{box-shadow:var(--glass-shadow,none);}}

/* ===== Tenant "Report a problem" quick flow ===== */
.mq-mode #maintenance-modal-title{font-size:20px !important;font-weight:800;color:var(--text) !important;}
.mq-intro{font-size:13.5px;color:var(--text-dim);margin:-2px 0 12px;line-height:1.45;}
.mq-label{font-size:13px;font-weight:700;color:var(--text);margin:14px 0 8px;}
.mq-label em{font-style:normal;font-weight:500;color:var(--text-faint);}
.mq-tiles{display:grid;gap:8px;}
.mq-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:78px;padding:10px 6px;border-radius:16px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--bg-elevated);color:var(--text);font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;text-align:center;transition:transform .12s, border-color .15s, background .15s;}
.mq-tile span{font-size:24px;line-height:1;}
.mq-tile:hover{border-color:var(--text-faint);}
.mq-tile:active{transform:scale(.96);}
.mq-tile.on{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px rgba(10,132,255,.15);}
.mq-chips{display:flex;flex-wrap:wrap;gap:6px;}
.mq-chip{min-height:36px;padding:0 13px;border-radius:999px;border:1.5px solid var(--border);background:var(--bg-elevated);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.mq-chip.on{border-color:var(--accent);background:var(--accent-bg);}
.mq-urg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mq-u{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:16px;border:1.5px solid var(--border);background:var(--bg-elevated);color:var(--text);font:inherit;cursor:pointer;text-align:center;}
.mq-u span{font-size:22px;}
.mq-u b{font-size:13.5px;}
.mq-u small{font-size:11px;color:var(--text-faint);line-height:1.25;}
.mq-u-low.on{border-color:var(--status-paid);background:var(--status-paid-bg);}
.mq-u-medium.on{border-color:var(--status-due);background:var(--status-due-bg);}
.mq-u-urgent.on{border-color:var(--status-overdue);background:var(--status-overdue-bg);}
.mq-photo{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;border:1.5px dashed var(--text-faint);background:rgba(120,120,128,.06);color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.mq-photo:hover{background:rgba(120,120,128,.10);}
.mq-cam{font-size:28px;}
.mq-photo b{display:block;font-size:14.5px;}
.mq-photo small{font-size:12px;color:var(--text-faint);}
.mq-thumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;}
.mq-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--border);}
.mq-clear{border:none;background:none;color:var(--status-overdue);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px;}
.mq-mode #maintenance-description{min-height:84px;}
.mq-mode .modal-actions .mini-btn.primary{min-width:150px;}
@media (max-width:640px){ .mq-tiles{grid-template-columns:repeat(3,1fr);} .mq-urg small{display:none;} }
.mq-tiles{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
@media (max-width:640px){ .mq-tile{min-height:72px;font-size:11.5px;padding:8px 4px;} .mq-tile span{font-size:22px;} }

/* ===== Fields never wider than their container (iPad/iPhone Safari) =====
   Safari gives date/time inputs an intrinsic minimum width and centres their text, so in a
   narrow modal they pushed past the right edge (e.g. "Payment date" in "I paid my rent"). */
input,select,textarea{box-sizing:border-box;max-width:100%;min-width:0;}
.modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal-card select,.modal-card textarea,
.form-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-row select,.form-row textarea,.modal-input{width:100%;}
input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"]{
  -webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;text-align:left;}
input::-webkit-date-and-time-value{text-align:left;margin:0;}
input[type="date"]::-webkit-datetime-edit,input[type="datetime-local"]::-webkit-datetime-edit{padding:0;}
.modal-card{overflow-x:hidden;}
.form-row-2 > *{min-width:0;}
input[type="file"]{max-width:100%;}
input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"]{min-height:2.9em;line-height:1.3;}

/* ---------- Tenant view ("View as tenant") ---------- */
.viewas-bar{
  position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:4;
  display:flex;align-items:center;gap:12px;
  margin:12px auto 0;max-width:1100px;width:calc(100% - 32px);
  padding:10px 12px 10px 14px;border-radius:16px;
  background:color-mix(in srgb, var(--status-move-bg) 85%, var(--bg));
  border:1px solid color-mix(in srgb, var(--status-move) 35%, transparent);
  color:var(--text);box-shadow:var(--shadow);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.viewas-eye{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--status-move);color:#fff;}
.viewas-eye svg{width:18px;height:18px;}
.viewas-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.viewas-txt b{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.viewas-txt small{font-size:12px;color:var(--text-dim);}
.viewas-actions{flex:none;display:flex;gap:6px;}
.viewas-actions .mini-btn{white-space:nowrap;}
body.viewas-on .topbar{box-shadow:inset 0 -2px 0 var(--status-move);}
@media (max-width:600px){
  .viewas-bar{flex-wrap:wrap;width:calc(100% - 24px);}
  .viewas-actions{width:100%;}
  .viewas-actions .mini-btn{flex:1;}
}

.va-search{margin:4px 0 14px;}
.va-search input{width:100%;max-width:420px;box-sizing:border-box;padding:11px 14px;border-radius:12px;
  border:1px solid var(--field-border);background:var(--field-bg);color:var(--text);font:inherit;font-size:14.5px;}
.va-search input:focus{outline:none;background:var(--field-bg-focus);border-color:var(--accent);}
.va-group{margin-bottom:18px;}
.va-group-title{font-size:12px;font-weight:650;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px 2px;display:flex;align-items:center;gap:6px;}
.va-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.va-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;margin:0;
  font:inherit;color:inherit;padding:12px 14px;transition:transform .12s ease, border-color .12s ease;}
.va-row:hover{border-color:var(--accent);transform:translateY(-1px);}
.va-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.va-row.va-last{border-color:color-mix(in srgb, var(--accent) 55%, transparent);}
.va-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:650;font-size:14px;
  background:var(--accent-bg);color:var(--accent);}
.va-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.va-who b{font-size:14.5px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.va-who small{font-size:12.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.va-who small.va-nologin{color:var(--text-faint);font-size:11.5px;white-space:normal;}
.va-go{flex:none;display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--accent);
  padding:6px 10px;border-radius:999px;background:var(--accent-bg);}
.va-go svg{width:15px;height:15px;}
.va-empty{color:var(--text-dim);font-size:13.5px;}

/* ---------- View-only (Viewer role) ---------- */
#view-only-banner{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:900;
  background:var(--status-due-bg, #fbf0dd); color:var(--status-due, #8a5a00);
  border:1px solid var(--status-due, #8a5a00); border-radius:999px;
  padding:7px 14px; font-size:12.5px; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.18);
  max-width:calc(100vw - 32px); text-align:center; pointer-events:none;
}
body:not(.view-only) #view-only-banner{ display:none; }
/* Destructive buttons are never usable by a viewer — hide them outright. */
body.view-only .mini-btn.danger, body.view-only .icon-mini-btn.danger, body.view-only .rcpt-btn.rm{ display:none !important; }

/* Invoice timeline: property / service names are tappable filters */
.timeline-label:hover{text-decoration:underline !important;color:var(--accent) !important;}
.timeline-label:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}

/* ---------- WhatsApp send windows: iOS-style action tiles ---------- */
.send-preview{display:block;width:100%;max-height:44vh;object-fit:contain;border-radius:14px;border:1px solid var(--border, rgba(127,127,127,.22));background:#f4f5f8;}
.send-msg{margin-top:10px;border:1px solid var(--border, rgba(127,127,127,.22));border-radius:12px;padding:0 12px;}
.send-msg > summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text-dim);padding:9px 0;list-style:none;}
.send-msg > summary::-webkit-details-marker{display:none;}
.send-msg > summary::after{content:" ›";color:var(--text-faint);}
.send-msg[open] > summary::after{content:" ⌄";}
.send-msg textarea{width:100%;min-height:110px;margin:0 0 10px;font-size:12px;line-height:1.4;resize:vertical;}
.action-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;margin:16px 0 4px;}
.action-tile{display:flex;flex-direction:column;align-items:center;gap:7px;width:78px;padding:0;border:0;background:none;font:inherit;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.action-tile .at-ic{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--text) 8%, transparent);
  border:0.5px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 1px 3px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  transition:transform .12s ease, background .2s ease;}
.action-tile .at-ic svg{width:25px;height:25px;}
.action-tile.primary .at-ic{background:var(--accent);color:#fff;border-color:transparent;}
.action-tile.done .at-ic{background:var(--status-paid);color:#fff;border-color:transparent;}
.action-tile:active .at-ic{transform:scale(.92);}
.action-tile .at-lb{font-size:11.5px;font-weight:500;line-height:1.2;text-align:center;color:var(--text-dim);}
.action-tile.primary .at-lb{color:var(--text);font-weight:600;}
.send-howto{font-size:12px;line-height:1.45;color:var(--text-dim);margin:12px 2px 0;text-align:center;}
.icon-label-btn{display:inline-flex;align-items:center;gap:6px;}
.icon-label-btn svg{width:16px;height:16px;}

/* Shared by the static modals in index.html (used to be repeated inline on every one). */
h2.modal-title{text-transform:none;letter-spacing:0;font-size:15px;}
label.modal-hint{font-size:11.5px;color:var(--text-faint);display:block;margin:8px 0 2px;}
p.modal-sub{font-size:12.5px;color:var(--text-dim);margin:0;}

/* ===== Calendar page: bigger, tappable days + agenda of the selected day ===== */
.cal-card .cal-toolbar{margin-bottom:12px;}
.cal-card .cal-month-label{font-size:17px;}
.cal-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;}
.cal-filter-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-dim);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:36px;}
.cal-filter-btn b{color:var(--text);font-variant-numeric:tabular-nums;}
.cal-filter-btn.active{background:var(--text);color:var(--bg-elevated);border-color:var(--text);}
.cal-filter-btn.active b{color:inherit;}
.cal-filter-btn .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.cal-filter-btn .dot.overdue, .cal-dots i.overdue{background:var(--status-overdue);}
.cal-filter-btn .dot.due, .cal-dots i.due{background:var(--status-due);}
.cal-filter-btn .dot.move, .cal-dots i.move{background:var(--status-move);}
.cal-card .cal-weekday{font-size:12px;}
button.cal-day-btn{font:inherit;text-align:left;cursor:pointer;color:inherit;width:100%;min-height:64px;padding:6px;align-items:stretch;}
button.cal-day-btn:hover{border-color:var(--accent);}
button.cal-day-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.cal-day-btn .cal-daynum{font-size:15px;color:var(--text);font-family:inherit;}
.cal-day-btn.has-overdue .cal-daynum{color:var(--status-overdue);}
.cal-day-btn.today .cal-daynum{color:var(--accent);}
.cal-day-btn.selected{background:var(--accent);border-color:var(--accent);box-shadow:0 4px 14px rgba(46,77,110,.28);}
.cal-day-btn.selected .cal-daynum{color:var(--bg-elevated);}
.cal-day-btn.selected .cal-dots i{box-shadow:0 0 0 1.5px var(--bg-elevated);}
.cal-day-btn.selected .cal-dots em{color:var(--bg-elevated);}
.cal-dots{display:flex;flex-wrap:wrap;gap:3px;align-items:center;margin-top:auto;}
.cal-dots i{width:9px;height:9px;border-radius:50%;display:block;}
.cal-dots em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--text-dim);}
.cal-pills{display:none;flex-direction:column;gap:3px;min-width:0;}
.cal-day-btn .cal-pill{cursor:inherit;}
@media (min-width:900px){
  button.cal-day-btn{min-height:104px;}
  .cal-day-btn .cal-dots{display:none;}
  .cal-day-btn .cal-pills{display:flex;}
  .cal-day-btn.selected .cal-pill{box-shadow:0 0 0 1px rgba(255,255,255,.7);}
}
.cal-agenda{margin-top:14px;}
.cal-agenda-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}
.cal-agenda-date{font-size:18px;font-weight:750;letter-spacing:-.01em;}
.cal-agenda-rel{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
.cal-agenda-count{font-size:12px;font-weight:700;color:var(--text-dim);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 10px;white-space:nowrap;}
.cal-agenda-row{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;margin:0 0 8px;border-radius:12px;
  background:var(--bg);border:1px solid var(--border);border-left:4px solid var(--border);text-decoration:none;color:var(--text);}
.cal-agenda-row.overdue{border-left-color:var(--status-overdue);}
.cal-agenda-row.due{border-left-color:var(--status-due);}
.cal-agenda-row.move{border-left-color:var(--status-move);}
.cal-agenda-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cal-agenda-main b{font-size:15px;line-height:1.3;}
.cal-agenda-main span{font-size:13px;color:var(--text-dim);line-height:1.35;}
.cal-agenda-kind{flex-shrink:0;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;}
.cal-agenda-kind.overdue{background:var(--status-overdue-bg);color:var(--status-overdue);}
.cal-agenda-kind.due{background:var(--status-due-bg);color:var(--status-due);}
.cal-agenda-kind.move{background:var(--status-move-bg);color:var(--status-move);}
.cal-agenda-empty{font-size:13.5px;color:var(--text-dim);margin:4px 0 6px;}
.cal-agenda-later{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin:16px 0 8px;}
.cal-later-day{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:none;border:none;border-top:1px solid var(--border);padding:10px 2px;}
.cal-later-date{width:42px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--text-dim);text-transform:uppercase;}
.cal-later-date b{font-size:18px;color:var(--text);line-height:1.1;}
.cal-later-items{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px;}
.cal-later-item{font-size:12.5px;font-weight:600;border-radius:7px;padding:3px 8px;}
.cal-later-item.overdue{background:var(--status-overdue-bg);color:var(--status-overdue);}
.cal-later-item.due{background:var(--status-due-bg);color:var(--status-due);}
.cal-later-item.move{background:var(--status-move-bg);color:var(--status-move);}
@media (max-width:480px){
  .cal-filter{flex-wrap:nowrap;overflow-x:auto;gap:5px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .cal-filter::-webkit-scrollbar{display:none;}
  .cal-filter-btn{padding:6px 10px;font-size:12.5px;white-space:nowrap;flex-shrink:0;}
}

/* ===== Properties: real estate payments ===== */
.lease-next{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 4px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.lease-next .ln-ic{font-size:20px;flex-shrink:0;}
.lease-next .ln-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.lease-next .ln-main b{font-size:14px;}
.lease-next .ln-main span{font-size:12.5px;color:var(--text-dim);}
.lease-next .ln-amt{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.lease-next.warn{background:var(--status-due-bg);border-color:var(--status-due);}
.lease-next.warn .ln-main b{color:var(--status-due);}
.lease-next.bad{background:var(--status-overdue-bg);border-color:var(--status-overdue);}
.lease-next.bad .ln-main b, .lease-next.bad .ln-amt{color:var(--status-overdue);}
.lease-next.none .ln-main b{color:var(--text-dim);}

/* Dashboard "to collect" rows: one per tenant, WhatsApp in one tap */
.row .who .meta.collect-parts { white-space: normal; overflow: visible; }
.collect-row.is-sent { opacity: .62; }
.view-btn.wa-btn { background: #25d366; border-color: #25d366; color: #fff; width: auto !important; height: auto !important; min-width: 0; padding: 7px 12px !important; border-radius: 999px !important; white-space: nowrap; font-size: 12.5px; }
.view-btn.wa-btn:hover { background: #1ebe5a; }

/* Bank statement import */
.bank-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; margin: 8px 0; }
.bank-row { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); }
.bank-row.off { opacity: .6; }
.bank-check input { width: 18px; height: 18px; margin-top: 2px; }
.bank-main { flex: 1; min-width: 0; }
.bank-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.bank-top span { color: var(--text-dim); font-size: 12.5px; }
.bank-desc { font-size: 12px; color: var(--text-dim); word-break: break-word; margin: 2px 0 6px; }
.bank-ctrls { display: flex; gap: 6px; flex-wrap: wrap; }
.bank-ctrls select { flex: 1 1 180px; min-width: 0; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.bank-how { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.bank-flag { font-size: 11px; font-weight: 600; color: var(--status-due); background: var(--status-due-bg); padding: 1px 6px; border-radius: 6px; }

#bank-import-modal .modal-actions > .mini-btn { flex: none; width: auto; }
#bank-import-modal .modal-title { color: var(--text); }

/* Rent payments to review — icon buttons */
.review-actions .icon-label-btn svg{width:17px;height:17px;flex:none;}
.review-actions label.mini-btn{cursor:pointer;}
.mini-btn.soft-danger{color:var(--status-overdue);border-color:color-mix(in srgb, var(--status-overdue) 35%, var(--border));}
.mini-btn.soft-danger:hover{background:color-mix(in srgb, var(--status-overdue) 10%, transparent);}
.mini-btn.attn{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 45%, var(--border));border-style:dashed;}

/* App-wide button icons (added by decorateButtons in app.js) */
.mini-btn.has-ic{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.mini-btn.has-ic[hidden]{display:none;}
.mini-btn .btn-ic{width:16px;height:16px;flex:none;}

/* "Who did it" line under payments, receipts, bill shares, bills and documents (staff only) */
.by-line{display:flex;align-items:flex-start;gap:5px;margin-top:3px;font-size:11.5px;font-weight:400;line-height:1.35;color:var(--text-faint);}
.by-line svg{width:12px;height:12px;flex:none;margin-top:2px;}
.by-line b{font-weight:600;color:var(--text-dim);}
.card > .by-line{margin:8px 2px 0;}

/* ── Maintenance request window (mtRender in app.js) ───────────────────────────── */
.mt-summary{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 12px;border-radius:14px;
  background:var(--accent-bg);border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);}
.mt-sum-icon{font-size:24px;line-height:1;flex:none;}
.mt-sum-body{flex:1;min-width:0;}
.mt-sum-where{font-size:13.5px;font-weight:700;color:var(--text);}
.mt-sum-who{font-size:12px;color:var(--text-dim);margin-top:2px;}
.mt-sum-who b{color:var(--text);font-weight:600;}
.mt-chips{display:flex;flex-wrap:wrap;gap:6px;}
.mt-chip{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 12px;border-radius:999px;
  border:1.5px solid var(--border);background:var(--bg-elevated);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, transform .1s ease;}
.mt-chip:active{transform:scale(.96);}
.mt-chip.on{border-color:var(--accent);background:var(--accent-bg);color:var(--text);}
.mt-chip:disabled{cursor:default;opacity:1;}
.mt-chip.mt-pri-urgent.on{border-color:var(--status-overdue);background:color-mix(in srgb, var(--status-overdue) 14%, transparent);}
.mt-chip.mt-pri-high.on{border-color:var(--status-due);background:color-mix(in srgb, var(--status-due) 14%, transparent);}
.mt-chip-sm{min-height:30px;padding:0 10px;font-size:12px;}
.mt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative;margin:2px 0 8px;}
.mt-steps.off{opacity:.55;}
.mt-step{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;border:0;background:none;font:inherit;color:var(--text-faint);cursor:default;position:relative;}
button.mt-step{cursor:pointer;}
.mt-step::before{content:"";position:absolute;top:22px;left:-50%;width:100%;height:3px;background:var(--border);z-index:0;}
.mt-step:first-child::before{display:none;}
.mt-step.done::before,.mt-step.now::before{background:var(--status-paid);}
.mt-dot{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;
  background:var(--bg-elevated);border:2px solid var(--border);}
.mt-step.done .mt-dot{background:var(--status-paid);border-color:var(--status-paid);color:#fff;font-weight:800;}
.mt-step.now .mt-dot{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);}
.mt-step-lb{font-size:11.5px;font-weight:600;text-align:center;line-height:1.2;}
.mt-step.done .mt-step-lb,.mt-step.now .mt-step-lb{color:var(--text);}
.mt-side{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.mt-hint{font-size:11.5px;color:var(--text-faint);margin:4px 0 0;}
.mt-seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--border);margin-bottom:8px;}
.mt-seg[hidden]{display:none;}
.mt-seg-btn{flex:1;min-height:34px;border:0;border-radius:9px;background:transparent;color:var(--text-dim);font:inherit;font-size:13px;font-weight:650;cursor:pointer;}
.mt-seg-btn.on{background:var(--bg-elevated);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12);}
.mt-count{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:var(--accent-bg);color:var(--accent);font-size:11px;line-height:18px;}
.mt-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;}
.mt-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:var(--border);cursor:pointer;display:block;}
.mt-thumb-new{position:relative;}
.mt-thumb-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:12px;cursor:pointer;}
.mt-new-tag{position:absolute;left:4px;bottom:4px;padding:1px 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;}
.mt-add{aspect-ratio:1;border-radius:12px;border:1.5px dashed var(--text-faint);background:transparent;color:var(--text-dim);font:inherit;font-size:12px;font-weight:650;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;}
.mt-add span{font-size:22px;}
.mt-add:active{transform:scale(.96);}
#maintenance-resolution-notes[readonly]{background:transparent;border-style:dashed;}

/* Page stays put behind an open window (see syncPageLock in app.js); swipes scroll the window only. */
body.page-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
.modal-overlay{overscroll-behavior:contain;}
.modal-overlay .modal-card{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;}

/* Close (×) floats at the top-right next to the title instead of taking a blurred bar of its own,
   which covered and blurred each window's title as soon as it scrolled. */
.modal-x-bar{position:sticky;top:0;height:0;margin:0 !important;padding:0 !important;z-index:4;display:flex;justify-content:flex-end;
  overflow:visible;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
.modal-x-bar .modal-x{transform:translate(6px,-4px);box-shadow:0 2px 10px rgba(10,12,18,.12);}
.modal-card > .modal-title, .modal-card > h2:first-of-type{padding-right:52px;}
@media (max-width:640px){ .modal-x-bar{top:0;} }

/* ── Performance: frosted glass only on big surfaces ───────────────────────────────────────
   Every element with backdrop-filter is a separate GPU layer that iPhone Safari re-blurs whenever
   anything under it changes. Payments had ~800 of them (one per button, field and select), so
   opening/closing a window or changing page froze the phone for seconds. Controls sit on cards
   that are already frosted, so their own blur added nothing visible — it's switched off here.
   Cards, bars, menus and windows keep it; nested cards inside a frosted card/window don't. */
.mini-btn, .chip, .mt-chip, .mq-chip, .mq-tile, .seg, .seg.seg-wide,
input, select, textarea, .modal-input, .bills-sort select,
.card .card, .card .stat, .modal-card .card, .modal-card .stat, .card details.card{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* Phones: windows open centred on the screen (not stuck to the bottom like a sheet), so a short
   window doesn't look like it's missing its top half. Tall ones still fit and scroll inside. */
@media (max-width:640px){
  .modal-overlay{align-items:center !important;padding:12px !important;
    padding-top:max(12px, env(safe-area-inset-top,0px)) !important;padding-bottom:max(12px, env(safe-area-inset-bottom,0px)) !important;}
  .modal-card{width:100% !important;max-width:100% !important;border-radius:22px !important;
    max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
    padding-bottom:17px !important;}
}

/* ── Less clutter, app-wide ────────────────────────────────────────────────────────────────
   Buttons inside cards and lists are compact pills that sit side by side (they used to be full
   height and stack one per line). Destructive actions in lists are outlined red, not solid, so
   they don't dominate. Windows (.modal-card) keep their full-size buttons. */
.card .mini-btn:not(.modal-card .mini-btn){min-height:36px;padding:0 13px;font-size:12.5px;gap:5px;}
.card .mini-btn .btn-ic{width:15px;height:15px;}
@media (pointer:coarse){ .card .mini-btn:not(.modal-card .mini-btn){min-height:38px !important;} }
.act-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;width:100%;}
.act-row .mini-btn{flex:0 0 auto;}
.row .mini-btn.danger, .act-row .mini-btn.danger, .card .mini-btn.soft-danger{
  background:transparent !important;color:var(--status-overdue) !important;
  border:1px solid color-mix(in srgb, var(--status-overdue) 40%, var(--border)) !important;}
.row .mini-btn.danger:hover, .act-row .mini-btn.danger:hover{background:color-mix(in srgb, var(--status-overdue) 10%, transparent) !important;}
/* Short facts with icons ("📅 15 Oct · 🔐 $400 · Daniel") instead of a sentence per line. */
.facts{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12px;color:var(--text-dim);}
.facts span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.facts i{font-style:normal;font-size:12px;}
.facts .fact-muted{color:var(--text-faint);}
.mo-row{align-items:flex-start;}
.mo-row .act-row{order:3;}
.mo-money{font-size:13px;font-weight:700;margin-top:6px;color:var(--status-paid);white-space:nowrap;}
.mo-money.owes{color:var(--status-overdue);}
/* Phones: the explanatory sentence under each page title is hidden — the title says enough. */
@media (max-width:640px){ .page-sub{display:none;} }
.mo-row .act-row .mini-btn{padding:0 8px;}

/* Payments: every tenant card has the same layout — name + ref and property on top, the status
   pills always on their own line underneath (left-aligned), chevron centred on the right. Before,
   the pills sat beside the name or dropped below depending on how long the name was. */
.pay-card > summary{display:grid !important;grid-template-columns:minmax(0,1fr);row-gap:8px;align-items:start;padding-right:34px;}
.pay-card > summary .pay-who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pay-card > summary .pay-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;}
.pay-card > summary .pay-badges .badge{margin:0;}
.pay-card > summary::after{top:50%;}

/* Payments: "Send what they owe" by WhatsApp, at the top of an open tenant card. */
.pay-wa-send{display:flex;align-items:center;gap:12px;width:100%;margin:4px 0 12px;padding:10px 14px;border-radius:16px;cursor:pointer;
  border:1px solid color-mix(in srgb, #25d366 45%, transparent);background:color-mix(in srgb, #25d366 12%, var(--bg-elevated));
  color:var(--text);font:inherit;text-align:left;transition:transform .1s ease;}
.pay-wa-send:active{transform:scale(.98);}
.pay-wa-send .wa-icon{width:30px;height:30px;flex:none;color:#fff;background:#25d366;border-radius:50%;padding:5px;}
.pay-wa-send span{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pay-wa-send b{font-size:14px;font-weight:700;}
.pay-wa-send small{font-size:12px;color:var(--text-dim);}

/* Tenant "I made this payment": tick every bill the transfer covers; the total updates live. */
#payment-report-bills{margin:10px 0 4px;}
.prp-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text);margin:0 0 6px;}
.prp-row{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 6px;border-radius:14px;border:1.5px solid var(--border);
  background:var(--bg-elevated);cursor:pointer;}
.prp-row.on{border-color:var(--accent);background:var(--accent-bg);}
.prp-row input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--accent);}
.prp-txt{flex:1;min-width:0;display:flex;flex-direction:column;}
.prp-txt b{font-size:13.5px;font-weight:650;}
.prp-txt small{font-size:11.5px;color:var(--text-faint);}
.prp-amt{font-weight:700;font-size:14px;white-space:nowrap;}
.prp-total{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:14px;background:#fdecea;color:#b42318;font-size:13px;font-weight:600;}
.prp-total b{font-size:17px;font-weight:800;}
:root[data-theme="dark"] .prp-total{background:rgba(180,35,24,.18);color:#ff8a80;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .prp-total{background:rgba(180,35,24,.18);color:#ff8a80;} }

/* Dashboard "Payments reported" */
.rp-row{align-items:flex-start;}
.rp-row .act-row{order:3;}
.rp-amt{font-size:16px;font-weight:800;margin-bottom:4px;white-space:nowrap;}
.rp-card{border-color:color-mix(in srgb, var(--status-paid) 35%, var(--glass-border, var(--border))) !important;}
.rp-row .act-row{flex-wrap:nowrap;}
.rp-row .act-row .mini-btn{flex:1 1 0;min-width:0;padding:0 8px;}
/* Tenant: gentle reminder to attach the transfer screenshot */
.proof-nudge{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;padding:12px;border-radius:16px;
  background:color-mix(in srgb, var(--status-due) 12%, var(--bg-elevated));border:1px solid color-mix(in srgb, var(--status-due) 40%, transparent);}
.proof-nudge .pn-ic{font-size:24px;line-height:1;}
.proof-nudge .pn-body{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-dim);}
.proof-nudge .pn-body b{color:var(--text);}
.proof-nudge .pn-body > b{font-size:13.5px;}
.proof-nudge .mini-btn{align-self:flex-start;}

/* Photo viewer: download button next to close */
.lightbox-download{position:fixed;top:14px;right:64px;z-index:2;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;}
.lightbox-download svg{width:19px;height:19px;}
@media (pointer:coarse){ .lightbox-download{width:44px;height:44px;right:68px;} }
.mt-dl{display:inline-block;margin-top:8px;font-size:12.5px;}
.thumbs-dl{width:56px;height:56px;border-radius:6px;border:1px dashed var(--text-faint);background:transparent;color:var(--text-dim);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;vertical-align:top;}

/* Under a moved-out tenant's bill share in Payments: what the bond already holds for it. */
.bill-owed-meta + .bond-cover, .bond-cover{display:block;font-size:11.5px;color:var(--text-dim);margin-top:2px;line-height:1.35;}
.bond-cover.more b{color:var(--status-overdue);}
.bond-cover.less b{color:var(--status-paid);}
.bond-cover.ok{color:var(--status-paid);}
.bond-cover .text-link{display:inline !important;margin:0 0 0 6px !important;padding:0 !important;width:auto !important;font-size:11.5px;font-weight:600;}

/* ---------- Bond card (tenant page): result on top, lines grouped and collapsible ---------- */
.bond-card .bd-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.bond-card .bd-head h2{margin:0;}
.bond-card .bd-held{font-size:12px;color:var(--text-faint);}
.bd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.bd-tile{border:1px solid var(--border);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;background:var(--surface, transparent);}
.bd-tile span{font-size:11.5px;color:var(--text-faint);}
.bd-tile b{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.bd-tile small{font-size:11px;color:var(--text-dim);}
.bd-tile.ok b{color:var(--status-paid);}
.bd-tile.owes{border-color:var(--status-overdue);}
.bd-tile.owes b{color:var(--status-overdue);}
.bd-groups{display:flex;flex-direction:column;gap:6px;}
.bd-group{border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.bd-group summary,.bd-sum{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;}
.bd-sum{cursor:default;}
.bd-group summary::-webkit-details-marker{display:none;}
.bd-ic{width:22px;text-align:center;flex:none;}
.bd-title{flex:1;min-width:0;font-size:13.5px;font-weight:600;}
.bd-title i{font-style:normal;font-weight:500;color:var(--text-faint);}
.bd-title small{display:block;font-size:11px;font-weight:400;color:var(--text-faint);}
.bd-chev{color:var(--text-faint);transition:transform .15s;}
.bd-group[open] .bd-chev{transform:rotate(90deg);}
.bd-amt{font-weight:650;font-size:13.5px;white-space:nowrap;}
.bd-amt.neg{color:var(--status-overdue);}
.bd-amt.pos{color:var(--status-paid);}
.bd-items{border-top:1px solid var(--border);padding:4px 12px 6px 44px;}
.bd-item{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:6px 0;font-size:12.5px;}
.bd-item + .bd-item{border-top:1px dashed var(--border);}
.bd-item small{display:block;font-size:11px;color:var(--text-faint);line-height:1.45;margin-top:1px;}
.bd-item small b.neg{color:var(--status-overdue);} .bd-item small b.pos{color:var(--status-paid);}
.bd-item-v{display:inline-flex;align-items:center;gap:6px;}
.bd-item-v .bd-amt{font-size:12.5px;font-weight:600;}
.bd-foot{font-size:12px;color:var(--text-dim);margin:12px 0 6px;}
.bd-group.bd-todo{border-color:var(--status-due);}
.bd-btn{padding:4px 10px !important;font-size:11.5px !important;min-height:0 !important;}
.bd-btn{white-space:nowrap;}
.bd-as{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:11.5px;font-weight:600;color:var(--text-dim);background:var(--border);border:0;border-radius:999px;padding:2px 9px;cursor:pointer;}
span.bd-as{cursor:default;}
.bd-x{display:inline !important;margin:0 !important;padding:2px 4px !important;font-size:13px;}
/* Needs attention: what each tenant owes, rent and bills told apart at a glance. */
.owe-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.owe-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:1;padding:4px 8px;border-radius:999px;white-space:nowrap;}
.owe-chip b{font-weight:650;}
.owe-chip.rent{background:var(--accent-bg, rgba(60,120,255,.12));color:var(--accent, #2f6fe4);}
.owe-chip.bill{background:var(--status-due-bg, rgba(255,170,0,.14));color:var(--status-due, #b86e00);}
.collect-row.is-sent .owe-chip{opacity:.7;}
#bill-summary-modal a.mini-btn{text-decoration:none;}
/* "What they owe" to one tenant: a single green button straight to their WhatsApp chat. */
.wa-send-one{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:14px 0 4px;padding:14px 16px;border:0;border-radius:16px;background:#25d366;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;}
.wa-send-one svg{width:22px;height:22px;fill:currentColor;}
.wa-send-one:active{transform:scale(.98);}
.send-link-msg{font-size:12.5px;color:var(--text-dim);background:var(--border);border-radius:12px;padding:8px 10px;margin:10px 0 0;word-break:break-all;}
/* ---------- Bills table (desktop): grouped by what needs doing, fewer, clearer columns ---------- */
.bills-table2{width:100%;border-collapse:separate;border-spacing:0;}
.bills-table2 th{font-size:11px;letter-spacing:.04em;color:var(--text-faint);padding:8px 12px;white-space:nowrap;}
.bills-table2 td{padding:12px;vertical-align:middle;border-top:1px solid var(--border);}
.bills-table2 th.num, .bills-table2 td.num{text-align:right;}
.bills-table2 tr.bt-group td{background:transparent;border-top:0;padding:16px 12px 6px;font-size:12px;font-weight:700;color:var(--text-dim);}
.bills-table2 tr.bt-group td span{display:inline-block;min-width:20px;padding:1px 7px;margin-left:6px;border-radius:999px;background:var(--border);font-size:11px;text-align:center;}
.bills-table2 tr.bt-group + tr td{border-top:0;}
.bt-bill{display:flex;align-items:center;gap:10px;}
.bt-bill .bill-ic{width:34px;height:34px;flex:none;}
.bt-bill b{display:block;font-size:13.5px;}
.bt-sub{display:block;font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.bt-sub.ok{color:var(--status-paid);}
.bt-faint{color:var(--text-faint);font-size:12.5px;}
.bt-date{font-size:13.5px;}
.bt-tenants{min-width:150px;}
.bt-prog{height:6px;border-radius:999px;background:var(--border);overflow:hidden;margin:2px 0 5px;max-width:160px;}
.bt-prog i{display:block;height:100%;background:var(--status-paid);border-radius:999px;}
.bills-table-card .show-more-btn{margin-top:10px;}
/* Room ad modal */
.room-ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
@media (max-width:520px){ .room-ad-grid{grid-template-columns:1fr;} }
.room-ad-out{line-height:1.45;white-space:pre-wrap;background:var(--surface-2, rgba(127,127,127,.06));}
.room-ad-out{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:14px;padding:12px;font:inherit;font-size:13px;resize:vertical;}
.room-ad-edit{margin-top:6px;border-top:1px solid var(--border);padding-top:8px;}
.room-ad-edit summary{cursor:pointer;font-weight:600;font-size:13.5px;padding:6px 0;}

/* ---------- Property page: hero, description, room cards ---------- */
.pp-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.pp-hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pp-facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;}
.pp-facts span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:var(--border);font-size:12.5px;color:var(--text-dim);}
.pp-facts i{font-style:normal;}
.pp-facts b{color:var(--text);}
.pp-jumps{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.pp-jump{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);text-decoration:none;}
.pp-jump:hover{color:var(--text);border-color:var(--text-faint);}
.pn{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.pn-row{display:flex;gap:12px;align-items:flex-start;}
.pn-ic{flex:none;width:36px;height:36px;border-radius:12px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;}
.pn-body{flex:1;min-width:0;font-size:13.5px;line-height:1.5;color:var(--text);padding-top:7px;}
.pn-body b{font-weight:650;}
.pn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.pn-chip{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--accent-bg, rgba(60,120,255,.10));color:var(--text);}
.pn-kv{display:flex;justify-content:space-between;gap:10px;}
.pn-kv span{color:var(--text-dim);}
.prc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:10px;}
.prc{border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--surface, transparent);}
.prc.is-vacant{border-style:dashed;}
.prc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.prc-room{font-weight:700;font-size:14px;}
.prc-mid{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;}
.prc-name{color:var(--text);text-decoration:none;font-weight:600;}
a.prc-name:hover{color:var(--accent);}
.prc-name.vacant{color:var(--text-faint);font-weight:500;}
.prc-rent{color:var(--text-dim);white-space:nowrap;}
.prc-actions{display:flex;gap:6px;border-top:1px solid var(--border);padding-top:8px;}
.prc-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;}
.prc-btn.hot{background:var(--status-due-bg, rgba(255,170,0,.15));border-color:transparent;}
.prc-btn.danger{margin-left:auto;color:var(--status-overdue);}
.prc-btn:disabled{opacity:.35;cursor:default;}
.pp-addr{margin:6px 0 0;color:var(--text-dim);font-size:13.5px;}
.pn-text{display:block;color:var(--text-dim);margin-top:2px;}
.pn-body > b{display:block;}

/* ── Performance on phones/tablets (touch): closing a window froze the screen ──────────────
   The animated wallpaper (4 huge blurred circles drifting all the time) forced iPhone Safari to
   re-blur every frosted card on every frame, and closing a window repainted all of them at once.
   On touch devices: the wallpaper stays still, cards/windows are a near-opaque "glass" without a
   live blur (looks the same on this pale background), and the dimmed backdrop has no blur. The
   top bar and tab bar keep their blur — only two small layers. */
@media (hover: none), (pointer: coarse), (max-width: 1024px){
  .ios-wall i{animation:none !important;will-change:auto !important;}
  .card, .stat, .pp .card, .wifi-card, .rei-banner, .sidebar{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    background:color-mix(in srgb, var(--bg-elevated) 86%, transparent) !important;
  }
  .modal-overlay{-webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(15,20,35,.38) !important;}
  .modal-card{-webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--bg-elevated) !important;}
}
/* Move-out rows have 4 actions now: let them wrap 2×2 instead of squeezing words ("Dat e"). */
.mo-row .act-row{flex-wrap:wrap !important;}
.mo-row .act-row .mini-btn{flex:1 1 calc(50% - 6px) !important;white-space:nowrap;min-width:0;}

/* ── Buttons centred everywhere ─────────────────────────────────────────────────────────────
   Icon + label sit in the middle of every button, and rows of buttons (window footers, card
   actions, move-out / payment rows, room cards) are centred instead of pushed to one side. */
.mini-btn, .view-btn, .wa-btn, .wa-send-one, .show-more-btn, .text-link.btn, .action-tile, .prc-btn, button.chip{
  justify-content:center !important; text-align:center !important;
}
.mini-btn, .view-btn, .wa-btn{display:inline-flex;align-items:center;gap:6px;}
.actions-row, .modal-actions, .act-row, .prc-actions, .action-tiles, .bd-item-v .act-row{justify-content:center !important;}
.actions-row .mini-btn.danger, .prc-btn.danger{margin-left:0 !important;}

/* =====================================================================================
   iOS 27 consistency pass — one set of headings, buttons, labels and info rows on every page.
   Keeps the glass look; only evens out sizes, case and spacing that had drifted page to page.
   Type ladder:  page title 30–32  ·  group heading 20  ·  card title 17  ·  body 15
                 ·  sub-heading / row label 13  ·  footnote 12.
   ===================================================================================== */

/* ---- Card titles: "Contact", "Move-outs (1)", "Leaking kitchen tap", "Bond"… ----
   Were tiny grey CAPITALS on most cards and normal text on others. Now one bold title. */
.card h2, .card > h2, .card .detail-head > h2, .card .bd-head > h2, .card.needs-card > h2,
.card > .detail-head > h2, .detail-head.has-add-btn > h2{
  font-size:17px !important; font-weight:700 !important; letter-spacing:-0.015em !important;
  text-transform:none !important; color:var(--text) !important; line-height:1.3; margin:0 0 10px !important;
}
.card .detail-head{margin-top:0;align-items:center;}
.card .detail-head > h2, .card .bd-head > h2{margin:0 !important;}
.card h2 .count-pill, .card h2 > span{vertical-align:2px;}

/* ---- Sub-headings inside a card: "Due & upcoming (5)", "Today's tasks", "Roster"… ---- */
.card > h3, .card h3, .pp .card h3, .pf-h, .rei-hist-group, .audit-day, .cal-agenda-later{
  font-size:13px !important; font-weight:650 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--text-dim) !important; margin:14px 0 6px !important;
}
.card > h3:first-child{margin-top:0 !important;}

/* ---- Group headings between cards: property names, "Current tenants", "Rent · Oct",
   month names on My Bills. Were 12px grey capitals; now a clear iOS-style section title. ---- */
.content-inner > h2, .content-inner > h3, .tenant-section-title, .section-label{
  font-size:20px !important; font-weight:700 !important; letter-spacing:-0.02em !important;
  text-transform:none !important; color:var(--text) !important; margin:10px 2px -4px !important;
}
.section-label{display:flex;align-items:baseline;}
.section-link{font-size:14px !important;}
.tenant-section-title span, .count-pill{font-size:12px;font-weight:650;letter-spacing:0;}

/* ---- Small "kicker" words above a title (THE PLACE, WI-FI, ROOMS, REAL ESTATE) repeated
   the title right under them — dropped so each card has one heading. ---- */
.pp-titles .wifi-kicker, .pp-head .wifi-kicker{display:none;}

/* ---- Labels ---- */
.stat .label, .ps-tile span, .field-row .k, .wifi-label, .form-row label, .ref-card-label{
  text-transform:none; letter-spacing:0;
}
.stat .label{font-size:12px !important;color:var(--text-dim) !important;font-weight:600;}
.roster-table th, .report-table th, .bills-table2 th{text-transform:none !important;letter-spacing:0 !important;font-size:12.5px !important;color:var(--text-dim) !important;font-weight:650;}
.cal-weekday{font-size:11px;letter-spacing:.02em;}
.week-chip{font-size:11.5px;letter-spacing:0;text-transform:none;}

/* ---- Status tags: one size and shape everywhere ---- */
.badge, .bc-chip, .rl-pill, .rei-flag{font-size:12px !important;font-weight:650 !important;line-height:1.4;padding:3px 10px !important;letter-spacing:0;}
.badge .dot{width:6px;height:6px;}

/* ---- Buttons: one height, one text size, icon + label ----
   Regular 40px / 14px, compact rows inside cards 36px / 13.5px. Inline sizes from the page
   code (11px, 12px…) no longer win. */
.mini-btn, .view-btn, .pill-btn{font-size:14px !important;font-weight:600 !important;min-height:40px !important;
  padding-top:0 !important;padding-bottom:0 !important;border-radius:999px !important;gap:6px;}
.card .mini-btn, .card .view-btn, .modal-card .mini-btn{font-size:13.5px !important;min-height:36px !important;padding-left:14px !important;padding-right:14px !important;}
.mini-btn.add-btn, .round-icon-btn{min-height:44px !important;}
.mini-btn svg, .view-btn svg{width:16px;height:16px;flex-shrink:0;}
.text-link{font-size:14px !important;font-weight:600;color:var(--accent);}
.show-more-btn{font-size:14px;min-height:40px;}
/* destructive actions: tinted red, the same on every page (was solid red in some places,
   red outline in others) */
.mini-btn.danger{background:color-mix(in srgb, var(--status-overdue) 12%, var(--bg-elevated)) !important;
  color:var(--status-overdue) !important;border-color:transparent !important;}
.mini-btn.danger:hover{background:color-mix(in srgb, var(--status-overdue) 20%, var(--bg-elevated)) !important;opacity:1;}
/* rows of actions under a page title (tenant, bill, property): tidy grid on phones */
@media (max-width:640px){
  .content-inner > .actions-row{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;}
  .content-inner > .actions-row .mini-btn{width:100%;margin:0 !important;}
  .content-inner > .actions-row .mini-btn:only-child, .content-inner > .actions-row .mini-btn.danger:nth-child(odd):last-child{grid-column:1 / -1;}
}
@media (min-width:641px){ .content-inner > .actions-row{justify-content:flex-start !important;} }

/* ---- Info rows (label → value) as an iOS grouped list: one rounded group with thin
   separators, instead of a stack of separate outlined tiles ---- */
.card .field-list, .pp .field-list{gap:0 !important;border-radius:14px;overflow:hidden;
  background:color-mix(in srgb, var(--bg-elevated) 72%, transparent);border:1px solid var(--glass-edge);}
.card .field-list > .field-row, .pp .field-list > .field-row{background:transparent !important;border:0 !important;border-radius:0 !important;
  margin:0 !important;padding:12px 14px !important;box-shadow:none !important;position:relative;}
.card .field-list > .field-row + .field-row::before, .pp .field-list > .field-row + .field-row::before{
  content:"";position:absolute;top:0;left:14px;right:0;height:.5px;background:var(--glass-edge);}
.field-row .k{font-size:14px !important;color:var(--text-dim) !important;}
.field-row .v{font-size:15px !important;font-weight:600 !important;}

/* ---- Real estate inspection banner: compact on phones (date tile on the left) instead of
   a full-width blue bar above each one ---- */
@media (max-width:520px){
  .rei-banner{flex-direction:row !important;gap:12px !important;padding:12px !important;}
  .rei-count{align-self:flex-start;min-height:66px;flex-direction:column !important;min-width:58px !important;padding:8px 6px !important;justify-content:center !important;}
  .rei-count b{font-size:24px;}
  .rei-count span{font-size:10.5px;margin-top:2px !important;text-align:center;line-height:1.15;}
  .rei-when{font-size:15.5px;}
}

/* ---- Small fixes ---- */
.wifi-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;}
.nav-section-header{text-transform:none;letter-spacing:0;font-size:12.5px;}

/* ---------- "Needs attention" chips are tappable: they open what's owed behind them ---------- */
button.owe-chip{border:0;font:inherit;font-size:11.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, filter .15s ease;}
button.owe-chip::after{content:"›";margin-left:2px;opacity:.55;font-weight:700;}
button.owe-chip:hover{filter:brightness(.96);}
button.owe-chip:active{transform:scale(.96);}
button.owe-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.owed-card{max-width:min(460px,94vw) !important;}
.owed-list{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px;}
.owed-item{border-radius:14px;padding:12px;background:color-mix(in srgb, var(--bg-elevated) 72%, transparent);border:1px solid var(--glass-edge, var(--border));}
.owed-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.owed-top .who{min-width:0;}
.owed-top .name{font-size:14.5px;font-weight:650;}
.owed-top .meta{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
.owed-top .amount{font-size:15px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.owed-top .amount .badge{margin-top:4px;}
.owed-actions{display:flex;gap:8px;justify-content:flex-end !important;margin-top:10px;}
.owed-total{display:flex;justify-content:space-between;align-items:baseline;padding:10px 4px 2px;font-size:15px;}
.owed-total b{font-size:20px;font-variant-numeric:tabular-nums;}
.owed-card .modal-title{font-size:19px !important;font-weight:750 !important;color:var(--text) !important;text-transform:none !important;letter-spacing:-.01em !important;margin:0 !important;padding-bottom:0 !important;}
.owed-card .modal-sub{margin:4px 0 0;font-size:13.5px;color:var(--text-dim);}
/* Delete a paid rent payment (Payments page) — red, like other destructive icons */
.rcpt-btn.pay-del{color:var(--status-overdue);}
.rcpt-btn.pay-del:hover{background:color-mix(in srgb, var(--status-overdue) 12%, transparent);}
.rcpt-btn.pay-del svg{width:17px;height:17px;}