/* Final corrective layer. It intentionally changes only readability, responsive chrome,
   owner status highlighting, and water-edit density. */

/* Readable text on light surfaces. */
.content .title p,
.content .field > label,
.content .panel p,
.content .panel .feature-form-note,
.content .panel .entity-meta,
.content .panel .owner-subline,
.content .panel .empty,
.modal-card .field > label,
.modal-card .feature-form-note,
.modal-card .entity-meta,
.modal-card p,
.modal-card small,
.monthly-card p,
.monthly-card small,
.monthly-summary span,
.monthly-association-stats span,
.monthly-import-log span {
  color:#111 !important;
  opacity:1 !important;
}

/* T5 responsive and interaction gate. Screen UI only; print/PDF templates are untouched. */
@media screen {
  #appShell .associations-overview {
    align-items:stretch !important;
  }

  #appShell .association-overview-card {
    display:flex !important;
    min-width:0 !important;
    height:312px !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  #appShell .association-overview-card h3 {
    display:-webkit-box !important;
    min-height:2.8em !important;
    max-height:2.8em !important;
    margin:0 0 5px !important;
    line-height:1.4 !important;
    white-space:normal !important;
    overflow:hidden !important;
    overflow-wrap:anywhere !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
  }

  #appShell .association-overview-card .association-overview-grid {
    flex:1 1 auto !important;
  }

  #appShell :is(.btn,.icon-btn,.login-submit,.top-tool,.close,.nav button,
    .association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip) {
    min-height:44px;
    transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,
      border-color .18s ease,color .18s ease,opacity .18s ease !important;
  }

  #appShell .nav > button {
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }

  #appShell .dashboard-subnav > button {
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
  }

  #appShell :is(.btn,.icon-btn,.login-submit,.top-tool,.close,.nav button,
    .association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip):focus-visible {
    outline:3px solid color-mix(in srgb,var(--gold,#d5a83f) 82%,white 18%) !important;
    outline-offset:2px !important;
  }

  #appShell :is(button,.btn,[role="button"]):disabled,
  #appShell :is(button,.btn,[role="button"])[aria-disabled="true"] {
    cursor:not-allowed !important;
    opacity:.55 !important;
    transform:none !important;
    box-shadow:none !important;
  }
}

@media screen and (min-width:700px) and (max-width:1180px) {
  html body #appShell .associations-overview {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Tablet keeps desktop-like tables inside their own scroll region instead of turning rows into phone cards. */
@media screen and (min-width:700px) and (max-width:900px) {
  #appShell #ownersView .table-wrap,
  #appShell #waterHistoryView .table-wrap,
  #appShell #independentInvoiceFollowView .table-wrap,
  #appShell #dashboardView .table-wrap {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    max-height:600px !important;
    overflow:auto !important;
    border:1px solid #d8e4e0 !important;
    border-radius:14px !important;
    background:#fff !important;
    scrollbar-gutter:stable !important;
  }

  #ownersView .table-wrap > table,
  #waterHistoryView .table-wrap > table.water-follow-table,
  #independentInvoiceFollowView .table-wrap > table.independent-follow-table,
  #dashboardView .dashboard-owner-status-table {
    display:table !important;
    width:100% !important;
    max-width:none !important;
    table-layout:fixed !important;
    background:#fff !important;
  }

  #ownersView .table-wrap > table { min-width:1240px !important; }
  #waterHistoryView .table-wrap > table.water-follow-table { min-width:1180px !important; }
  #independentInvoiceFollowView .table-wrap > table.independent-follow-table { min-width:1200px !important; }
  #dashboardView .dashboard-owner-status-table { min-width:700px !important; }

  #ownersView .table-wrap > table thead,
  #waterHistoryView .water-follow-table thead,
  #independentInvoiceFollowView .independent-follow-table thead,
  #dashboardView .dashboard-owner-status-table thead {
    position:static !important;
    display:table-header-group !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
    white-space:normal !important;
  }

  #ownersView .table-wrap > table tbody,
  #waterHistoryView .water-follow-table tbody,
  #independentInvoiceFollowView .independent-follow-table tbody,
  #dashboardView .dashboard-owner-status-table tbody {
    display:table-row-group !important;
  }

  #ownersView .table-wrap > table tbody tr,
  #waterHistoryView .water-follow-table tbody tr,
  #independentInvoiceFollowView .independent-follow-table tbody tr,
  #dashboardView .dashboard-owner-status-table tbody tr {
    display:table-row !important;
    width:auto !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  #ownersView .table-wrap > table tbody td,
  #waterHistoryView .water-follow-table tbody td,
  #independentInvoiceFollowView .independent-follow-table tbody td,
  #dashboardView .dashboard-owner-status-table tbody td {
    display:table-cell !important;
    width:auto !important;
    min-height:48px !important;
    padding:9px 8px !important;
    border-bottom:1px solid #e3ebe8 !important;
    background:#fff !important;
    vertical-align:middle !important;
    white-space:normal !important;
    overflow:hidden !important;
  }

  #ownersView .table-wrap > table tbody td[data-label]::before,
  #waterHistoryView .water-follow-table tbody td[data-label]::before,
  #independentInvoiceFollowView .independent-follow-table tbody td[data-label]::before,
  #dashboardView .dashboard-owner-status-table tbody td[data-label]::before {
    display:none !important;
    content:none !important;
  }

  #ownersView .table-wrap > table tbody td.owner,
  #ownersView .table-wrap > table tbody td[data-label="اسم المالك"],
  #waterHistoryView .water-follow-table tbody td.owner-display-name,
  #waterHistoryView .water-follow-table tbody td[data-label="المالك"],
  #independentInvoiceFollowView .independent-follow-table tbody td.owner-display-name,
  #independentInvoiceFollowView .independent-follow-table tbody td[data-label="اسم المالك"],
  #dashboardView .dashboard-owner-status-table tbody td:first-child,
  #dashboardView .dashboard-owner-status-table tbody td:last-child {
    grid-column:auto !important;
  }
}

@media screen and (max-width:699px) {
  html body #appShell .associations-overview {
    grid-template-columns:1fr !important;
  }

  #appShell .association-overview-card {
    height:300px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  #appShell :is(.btn,.icon-btn,.login-submit,.top-tool,.close,.nav button,
    .association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip,
    .association-overview-card) {
    transition:none !important;
    transform:none !important;
  }
}

input,
select,
textarea {
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  opacity:1 !important;
}

input::placeholder,
textarea::placeholder {
  color:#242424 !important;
  -webkit-text-fill-color:#242424 !important;
  opacity:1 !important;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  opacity:1 !important;
}

/* Preserve intended light text on genuinely dark controls and hero surfaces. */
.sidebar,
.sidebar button,
.sidebar .association-picker-button,
.sidebar .association-picker-menu button,
.lux-select-btn,
.monthly-lux-button,
.btn.primary,
.btn.danger,
.danger-link,
.login-submit,
.royal-home-hero,
.royal-home-hero small,
.royal-home-hero p,
.search-hero,
.search-hero small,
.lux-option:hover,
.lux-option.selected,
.monthly-lux-option:hover,
.monthly-lux-option.active {
  -webkit-text-fill-color:currentColor !important;
}

/* Owner table: no status-tinted row or cell backgrounds. Only the owner name changes color. */
#ownersView tbody tr,
#ownersView tbody tr td,
#ownersView tbody tr:hover,
#ownersView tbody tr:hover td,
#ownersView tbody tr.status-paid td,
#ownersView tbody tr.status-late1 td,
#ownersView tbody tr.status-late2 td,
#ownersView tbody tr.status-regular td {
  background:#fff !important;
  color:#111 !important;
}

#ownersView .owner-name-btn {
  color:#111 !important;
  -webkit-text-fill-color:currentColor !important;
  font-weight:900 !important;
}

#ownersView tr.status-paid .owner-name-btn { color:#08763c !important; }
#ownersView tr.status-late1 .owner-name-btn { color:#c25a00 !important; }
#ownersView tr.status-late2 .owner-name-btn { color:#b4232f !important; }
#ownersView tr.status-regular .owner-name-btn { color:#111 !important; }

#ownersView .pill,
#ownersView .pill.paid,
#ownersView .pill.warn,
#ownersView .pill.late,
#ownersView .pill.ok {
  background:transparent !important;
  color:#111 !important;
  border:1px solid #b8c5c2 !important;
  box-shadow:none !important;
}

.owner-credit {
  display:block;
  margin-top:3px;
  color:#6b4f00 !important;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}

/* Full association names remain visible in monthly cards and selectors. */
.monthly-association-card .entity-name,
.monthly-association-card h4,
.assoc-pick-name,
.lux-option-primary,
.monthly-lux-button,
.monthly-lux-option {
  display:block !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
}

.monthly-association-title { min-width:0; }
.monthly-association-title h4 { flex:1 1 auto; min-width:0; }
.monthly-association-board { grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); }

/* Compact water-invoice editing without a native owner dropdown. */
#waterInvoiceEditModal .water-edit-card {
  width:min(900px,100%) !important;
}

#waterInvoiceEditModal .table-wrap {
  max-height:min(48vh,430px) !important;
  overflow:auto !important;
}

#waterInvoiceEditModal .water-edit-readings-table {
  width:100% !important;
  min-width:720px !important;
  table-layout:fixed !important;
}

#waterInvoiceEditModal .water-edit-readings-table th,
#waterInvoiceEditModal .water-edit-readings-table td {
  height:auto !important;
  padding:5px 6px !important;
  color:#111 !important;
}

#waterInvoiceEditModal .water-edit-readings-table th:nth-child(1) { width:39%; }
#waterInvoiceEditModal .water-edit-readings-table th:nth-child(2) { width:13%; }
#waterInvoiceEditModal .water-edit-readings-table th:nth-child(3),
#waterInvoiceEditModal .water-edit-readings-table th:nth-child(4) { width:15%; }
#waterInvoiceEditModal .water-edit-readings-table th:nth-child(5) { width:18%; }

#waterInvoiceEditModal .water-edit-owner,
#waterInvoiceEditModal .water-edit-unit,
#waterInvoiceEditModal .water-edit-reading {
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:36px !important;
  height:36px !important;
  padding:5px 8px !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#111 !important;
  font-size:13px !important;
  line-height:1.2 !important;
}

.mobile-sidebar-toggle { display:none; }

/* Tablet and phone navigation: compact header, expandable menu, full-width content. */
@media screen and (max-width:1024px) {
  html,
  body,
  html body #appShell.app {
    width:100% !important;
    max-width:100% !important;
    overflow-x:clip !important;
  }

  html body #appShell.app {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
  }

  html body #appShell > .sidebar {
    grid-row:1 !important;
    position:sticky !important;
    top:0 !important;
    z-index:45 !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:auto minmax(220px,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 14px !important;
    border-left:0 !important;
    border-bottom:1px solid rgba(255,255,255,.14) !important;
    box-shadow:0 8px 24px rgba(4,35,31,.18) !important;
  }

  html body #appShell > .sidebar .logo {
    grid-column:1 !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:0 !important;
    border:0 !important;
    min-width:0 !important;
  }

  html body #appShell > .sidebar .logo-ring { width:48px !important; height:48px !important; flex:0 0 48px !important; }
  html body #appShell > .sidebar .logo-text b { font-size:14px !important; white-space:nowrap; }
  html body #appShell > .sidebar .logo-text small { display:none !important; }

  html body #appShell > .sidebar .association-box {
    grid-column:2 !important;
    min-width:0 !important;
    margin:0 !important;
    padding:7px 9px !important;
  }

  html body #appShell > .sidebar .association-box > label { margin-bottom:4px !important; }
  html body #appShell > .sidebar .association-picker-button { min-height:46px !important; padding:7px 11px !important; }

  .mobile-sidebar-toggle {
    grid-column:3 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    min-width:92px !important;
    min-height:46px !important;
    padding:8px 12px !important;
    border:1px solid rgba(255,255,255,.3) !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
    font-weight:900 !important;
  }

  html body #appShell > .sidebar .nav {
    grid-column:1 / -1 !important;
    display:none !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    max-height:calc(100vh - 150px) !important;
    overflow:auto !important;
    padding-top:4px !important;
  }

  html body #appShell > .sidebar.mobile-nav-open .nav { display:grid !important; }
  html body #appShell > .sidebar .nav > button { width:100% !important; min-width:0 !important; min-height:46px !important; text-align:center !important; }
  html body #appShell > .sidebar .dashboard-subnav { grid-column:1 / -1 !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  html body #appShell > .sidebar .sidebar-foot { display:none !important; }

  html body #appShell > .content {
    grid-row:2 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:18px 14px !important;
  }

  html body #appShell .panel,
  html body #appShell .panel-body,
  html body #appShell .view { min-width:0 !important; max-width:100% !important; }
  html body #appShell .table-wrap { max-width:100% !important; overflow:auto !important; }
}

@media screen and (max-width:600px) {
  html body #appShell > .sidebar {
    grid-template-columns:minmax(0,1fr) auto !important;
    padding:9px 10px !important;
  }

  html body #appShell > .sidebar .logo { grid-column:1 !important; }
  html body #appShell > .sidebar .logo-text b { white-space:normal !important; line-height:1.25 !important; }
  html body #appShell > .sidebar .association-box { grid-column:1 / -1 !important; grid-row:2 !important; }
  .mobile-sidebar-toggle { grid-column:2 !important; grid-row:1 !important; min-width:84px !important; }
  html body #appShell > .sidebar .nav { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body #appShell > .sidebar .dashboard-subnav { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html body #appShell > .content { padding:13px 9px !important; }
  html body #appShell .top { margin-bottom:13px !important; }
  html body #appShell .title h1 { font-size:25px !important; }
  .modal { padding:8px !important; }
  .modal-card { width:100% !important; max-width:100% !important; }
  .monthly-association-board { grid-template-columns:minmax(0,1fr) !important; }
}

/* Glass application surfaces. Screen-only so every printable statement stays untouched. */
@media screen {
  #appShell::before {
    background:rgba(238,243,241,.18) !important;
  }

  html[data-platform-theme="blackGold"] #appShell::before,
  html[data-platform-theme="nightGold"] #appShell::before {
    background:rgba(10,14,12,.24) !important;
  }

  #appShell > .content,
  #appShell .view,
  #appShell .panel-body,
  #appShell .feature-panel-stack,
  #appShell .monthly-layout {
    background:transparent !important;
  }

  #appShell > .sidebar {
    background:linear-gradient(165deg,
      color-mix(in srgb,var(--theme-side1,#0d4c3c) 94%,black 6%),
      color-mix(in srgb,var(--theme-side2,#082c25) 96%,black 4%)) !important;
    -webkit-backdrop-filter:blur(10px) saturate(125%);
    backdrop-filter:blur(10px) saturate(125%);
  }

  #appShell :is(
    .panel,.stat,.home-stat,.association-overview-card,.report-card,.task-card,
    .feature-card,.feature-kpi,.feature-mini-item,.monthly-card,.control-hub-card,
    .platform-card,.water-history-card,.archive-card,.owner-detail-tile,.account-card,
    .history-item,.feature-period-panel,.invoice-record-card,.monthly-association-card,
    .monthly-summary article,.monthly-import-panel,.pay-card,.import-box,.document-tools,
    .bank-settings-card,.feature-review-item,.statement-head
  ),
  .modal-card {
    background:rgba(255,255,255,.56) !important;
    border-color:rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter:blur(6px) saturate(125%);
    backdrop-filter:blur(6px) saturate(125%);
  }

  #appShell .top {
    padding:14px 16px !important;
    border:1px solid rgba(255,255,255,.72) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.66) !important;
    -webkit-backdrop-filter:blur(7px) saturate(125%);
    backdrop-filter:blur(7px) saturate(125%);
  }

  #appShell .royal-home-hero {
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--theme-side1,#0d4c3c) 88%,var(--theme-accent,#0d4c3c)),
      color-mix(in srgb,var(--theme-side2,#082c25) 94%,black 6%)) !important;
    -webkit-backdrop-filter:blur(5px) saturate(130%);
    backdrop-filter:blur(5px) saturate(130%);
  }

  #appShell :is(.panel-head,.toolbar,.association-overview-grid div,.mini div,.feature-file-pill),
  .modal-head,
  .modal-body {
    background:rgba(255,255,255,.38) !important;
  }

  .modal {
    background:rgba(4,31,27,.38) !important;
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
  }

  #appShell :is(.table-wrap,table,tbody) {
    background:transparent !important;
  }

  #appShell th {
    background:color-mix(in srgb,var(--theme-side1,#0d4c3c) 88%,black 12%) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }

  #appShell tbody tr,
  #appShell tbody tr:hover,
  #appShell tbody td,
  #ownersView tbody tr,
  #ownersView tbody tr:hover,
  #ownersView tbody tr td,
  #ownersView tbody tr:hover td,
  #ownersView tbody tr.status-paid td,
  #ownersView tbody tr.status-late1 td,
  #ownersView tbody tr.status-late2 td,
  #ownersView tbody tr.status-regular td {
    background:rgba(255,255,255,.66) !important;
  }

  #appShell :is(input,select,textarea),
  .modal-card :is(input,select,textarea) {
    background:rgba(255,255,255,.86) !important;
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
    opacity:1 !important;
  }

  #appShell .content :is(
    p,small,label,span,time,.title p,.field > label,.entity-meta,.owner-subline,.empty,
    .feature-form-note,.feature-mini-note,.monthly-note,.monthly-row-sub,
    .monthly-summary span,.monthly-association-stats span,.monthly-import-log span
  ),
  .modal-card :is(p,small,label,.field > label,.entity-meta,.feature-form-note) {
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
    opacity:1 !important;
  }

  #appShell :is(
    .sidebar,.nav button,.association-picker-button,.association-picker-menu button,
    .lux-select-btn,.monthly-lux-button,.btn,.icon-btn,.top-tool,.close,
    .search-hero,.royal-home-hero,.danger-link
  ),
  #appShell :is(
    .sidebar,.nav button,.association-picker-button,.association-picker-menu button,
    .lux-select-btn,.monthly-lux-button,.btn,.icon-btn,.top-tool,.close,
    .search-hero,.royal-home-hero,.danger-link
  ) :is(span,small,b,strong,p,label) {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }

  #appShell .association-picker-button :is(.assoc-pick-name,.assoc-pick-code,.assoc-pick-current),
  #appShell .association-picker-menu button :is(.assoc-pick-name,.assoc-pick-code,.assoc-pick-current),
  #appShell .lux-select-btn :is(.lux-option-primary,.lux-option-secondary,.lux-option-status,.lux-option-check),
  #appShell .monthly-lux-button * {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }

  #appShell .content :is(.royal-home-hero,.search-hero) :is(h1,h2,h3,p,small,label,span,time,b,strong),
  #appShell .content :is(.btn,.icon-btn,.top-tool,.close,.lux-select-btn,.monthly-lux-button,.danger-link) :is(p,small,label,span,time,b,strong) {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }

  #appShell .top :is(h1,p,span,time,b,strong) {
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
    opacity:1 !important;
  }

  #appShell .top :is(.top-tool,.top-tool *) {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  body > .lux-select-menu .lux-option,
  body > .lux-select-menu .lux-option :is(.lux-option-primary,.lux-option-secondary,.lux-option-status) {
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
    opacity:1 !important;
  }

  body > .lux-select-menu .lux-option:is(:hover,.selected),
  body > .lux-select-menu .lux-option:is(:hover,.selected) :is(.lux-option-primary,.lux-option-secondary,.lux-option-status) {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  #ownersView .owner-name-btn {
    background:transparent !important;
    border-bottom-color:currentColor !important;
  }

  #ownersView tr.status-paid .owner-name-btn,
  #ownersView tr.status-paid .pill { color:#066b37 !important; }
  #ownersView tr.status-late1 .owner-name-btn,
  #ownersView tr.status-late1 .pill { color:#984100 !important; }
  #ownersView tr.status-late2 .owner-name-btn,
  #ownersView tr.status-late2 .pill { color:#a51525 !important; }
  #ownersView tr.status-regular .owner-name-btn,
  #ownersView tr.status-regular .pill { color:#111 !important; }

  #ownersView .pill,
  #ownersView .pill.paid,
  #ownersView .pill.warn,
  #ownersView .pill.late,
  #ownersView .pill.ok {
    background:transparent !important;
    border-color:currentColor !important;
    -webkit-text-fill-color:currentColor !important;
  }

  #appShell .theme-quick-btn[data-theme-quick="desertGold"],
  #appShell .theme-quick-btn[data-theme-quick="desertGold"] * {
    color:#2d2100 !important;
    -webkit-text-fill-color:#2d2100 !important;
  }
}

/* T4 resume gate: stable controls, financial reconciliation, and compact system tables.
   Screen-only by design; print layouts and printable statements are intentionally untouched. */
@media screen {
  :root {
    --t4-control-height:52px;
    --t4-action-height:46px;
  }

  #appShell .field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #appShell .field > select,
  #appShell .field > .lux-select > .lux-select-btn,
  #appShell .monthly-lux-button {
    width:100% !important;
    min-width:0 !important;
    height:var(--t4-control-height) !important;
    min-height:var(--t4-control-height) !important;
    max-height:var(--t4-control-height) !important;
    line-height:1.3 !important;
    padding-block:0 !important;
    box-sizing:border-box !important;
  }

  #appShell :is(.form-actions,.feature-action-strip) > .btn,
  #appShell .annual-preview-button {
    min-height:var(--t4-action-height) !important;
    line-height:1.35 !important;
  }

  #appShell :is(.assoc-pick-name,.lux-option-primary,.entity-name,.monthly-lux-button) {
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #appShell :is(.assoc-pick-name,.lux-option-primary,.entity-name) {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    white-space:normal !important;
  }

  #balanceReconciliationCard {
    margin-top:28px;
    border-color:color-mix(in srgb,var(--brand) 28%,#dbe7e3);
    background:linear-gradient(145deg,#fff,#f3faf7);
    overflow:hidden;
  }
  .balance-reconciliation-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
  }
  .balance-reconciliation-head p {
    margin:6px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
  }
  .balance-reconciliation-head > strong {
    flex:0 0 auto;
    direction:ltr;
    unicode-bidi:isolate;
    padding:10px 14px;
    border-radius:12px;
    background:var(--brand);
    color:#fff;
    font-size:18px;
    font-variant-numeric:tabular-nums;
  }
  .balance-reconciliation-summary {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:16px 0 12px;
  }
  .balance-reconciliation-summary > div {
    min-width:0;
    border:1px solid #dbe7e3;
    border-radius:12px;
    background:#fff;
    padding:11px 12px;
  }
  .balance-reconciliation-summary small,
  .balance-reconciliation-last {
    display:block;
    color:var(--muted);
    font-size:11px;
    line-height:1.6;
  }
  .balance-reconciliation-summary b {
    display:block;
    direction:ltr;
    unicode-bidi:isolate;
    margin-top:5px;
    font-variant-numeric:tabular-nums;
  }
  #balanceDifferenceValue.is-negative { color:var(--danger); }
  .balance-reconciliation-fields { margin-top:4px; }
  .balance-reconciliation-last {
    margin-top:8px;
    min-height:18px;
  }

  .owner-import-field {
    display:grid;
    grid-template-columns:minmax(90px,1fr) auto auto;
    align-items:center;
    gap:8px;
  }
  .owner-import-field small { color:#6a7c77; }
  .owner-import-field strong { color:var(--brand); }

  #ownersView .table-wrap > table :is(th,td):first-child { width:16% !important; }
  #ownersView .table-wrap > table :is(th,td):last-child { width:11% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(1) { width:16% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(12) { width:10% !important; }
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(1) { width:20% !important; }
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(9) { width:11% !important; }

  #monthlyFeesView .table-wrap > table {
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }
  #monthlyFeesView .table-wrap > table :is(th,td):nth-child(1) { width:18% !important; }
  #monthlyFeesView .table-wrap > table :is(th,td):nth-child(2) { width:12% !important; }
  #monthlyFeesView .table-wrap > table :is(th,td):nth-child(3) { width:22% !important; }
  #monthlyFeesView .table-wrap > table :is(th,td):nth-child(4) { width:12% !important; }
  #monthlyFeesView .table-wrap > table :is(th,td):nth-child(5) { width:36% !important; }
  #monthlyFeesView .monthly-row-actions {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
  }
  #monthlyFeesView .monthly-row-actions .btn {
    min-height:34px !important;
    padding:5px 8px !important;
    line-height:1.25 !important;
  }
}

@media screen and (max-width:900px) {
  .balance-reconciliation-head { display:grid;grid-template-columns:1fr; }
  .balance-reconciliation-head > strong { justify-self:stretch;text-align:center; }
  .balance-reconciliation-summary { grid-template-columns:1fr; }
  .owner-import-field { grid-template-columns:1fr;gap:3px; }

  #monthlyFeesView .table-wrap {
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
  }
  #monthlyFeesView .table-wrap > table,
  #monthlyFeesView .table-wrap > table tbody {
    display:grid !important;
    width:100% !important;
    min-width:0 !important;
    gap:12px !important;
  }
  #monthlyFeesView .table-wrap > table thead {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip-path:inset(50%) !important;
  }
  #monthlyFeesView .table-wrap > table tbody tr {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:hidden !important;
    border:1px solid #bfd1cd !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 8px 20px rgba(4,39,33,.08) !important;
  }
  #monthlyFeesView .table-wrap > table tbody td {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    width:auto !important;
    min-width:0 !important;
    min-height:58px !important;
    padding:10px 11px !important;
    border:0 !important;
    border-bottom:1px solid #e3ebe8 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  #monthlyFeesView .table-wrap > table tbody td::before {
    content:attr(data-label);
    display:block;
    width:100%;
    color:#49645e;
    font-size:10px;
    font-weight:900;
  }
  #monthlyFeesView .table-wrap > table tbody td:first-child,
  #monthlyFeesView .table-wrap > table tbody td:last-child {
    grid-column:1 / -1 !important;
  }
  #monthlyFeesView .monthly-row-actions { width:100%; }
}

/* T3 continuation: preserve readable glass surfaces while limiting
   payment/status colours to the owner name itself. */
@media screen {
  #appShell :is(.panel,.stat,.home-stat,.association-overview-card,.report-card,
    .task-card,.feature-card,.feature-kpi,.feature-mini-item,.monthly-card,
    .control-hub-card,.platform-card,.water-history-card,.archive-card,
    .owner-detail-tile,.account-card,.history-item,.feature-period-panel,
    .invoice-record-card,.monthly-association-card,.monthly-summary article,
    .monthly-import-panel,.pay-card,.import-box,.document-tools,
    .bank-settings-card,.feature-review-item,.statement-head),
  .modal-card {
    background:rgba(255,255,255,.34) !important;
    -webkit-backdrop-filter:blur(4px) saturate(120%);
    backdrop-filter:blur(4px) saturate(120%);
  }

  #appShell :is(.panel-head,.toolbar,.association-overview-grid div,
    .mini div,.feature-file-pill), .modal-head, .modal-body {
    background:rgba(255,255,255,.24) !important;
  }

  #appShell tbody tr,
  #appShell tbody tr:hover,
  #appShell tbody td,
  #ownersView tbody tr,
  #ownersView tbody tr:hover,
  #ownersView tbody tr td,
  #ownersView tbody tr:hover td,
  #ownersView tbody tr.status-paid td,
  #ownersView tbody tr.status-late1 td,
  #ownersView tbody tr.status-late2 td,
  #ownersView tbody tr.status-regular td {
    background:transparent !important;
    color:var(--ink) !important;
  }

  #ownersView tr.status-paid .owner-name-btn { color:#08763c !important; }
  #ownersView tr.status-late1 .owner-name-btn { color:#c25a00 !important; }
  #ownersView tr.status-late2 .owner-name-btn { color:#b4232f !important; }
  #ownersView tr.status-regular .owner-name-btn { color:#111 !important; }
  #ownersView tr .owner-name-btn {
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    font-weight:900 !important;
  }

  #appShell .lux-select-menu,
  body > .lux-select-menu {
    pointer-events:auto !important;
    z-index:100000 !important;
  }
  #appShell .lux-select-menu .lux-option,
  body > .lux-select-menu .lux-option { pointer-events:auto !important; }

  #appShell :is(p,small,label,span,time,.entity-meta,.owner-subline,
    .empty,.feature-form-note,.feature-mini-note,.monthly-note,
    .monthly-row-sub,.monthly-summary span,.monthly-association-stats span,
    .monthly-import-log span),
  .modal-card :is(p,small,label,.entity-meta,.feature-form-note) {
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
    opacity:1 !important;
  }
}

/* T2 final screen-only corrections. Printable statements are intentionally excluded. */
@media screen and (max-width:1024px) {
  #appShell > .sidebar .logo-ring > .logo-img {
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:cover !important;
  }
}

@media screen {
  /* Credit/excess values use red text only, never a coloured background. */
  #appShell .owner-credit,
  #appShell .water-excess-note {
    color:#b4232f !important;
    -webkit-text-fill-color:#b4232f !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:1 !important;
    font-weight:900 !important;
  }

  /* Status colour belongs to the label text; rows and cells keep their neutral surface. */
  #appShell .pill {
    background:transparent !important;
    box-shadow:none !important;
    border-color:currentColor !important;
    -webkit-text-fill-color:currentColor !important;
  }
  #appShell .pill.paid,
  #appShell .pill.ok,
  #appShell .status.paid,
  #appShell .monthly-status.paid,
  #appShell .status-badge.active {
    color:#08763c !important;
    -webkit-text-fill-color:#08763c !important;
  }
  #appShell .pill.warn,
  #appShell .status.partial,
  #appShell .status.late1,
  #appShell .monthly-status.pending {
    color:#a84f00 !important;
    -webkit-text-fill-color:#a84f00 !important;
  }
  #appShell .pill.late,
  #appShell .pill.over,
  #appShell .status.late2,
  #appShell .monthly-status.unpaid {
    color:#b4232f !important;
    -webkit-text-fill-color:#b4232f !important;
  }
  #appShell .status.regular,
  #appShell .monthly-status.inactive {
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
  }
  #ownersView tr.status-regular .pill {
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
  }
}

@media screen and (max-width:600px) {
  /* Modals stay readable after removing the animated backdrop. */
  .modal-card,
  .modal-head,
  .modal-body {
    background:rgba(255,255,255,.96) !important;
  }
}

/* T3: association-aware colour, login contrast, and compact water fields. */
@media screen {
  #loginScreen .login-card input {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    caret-color:#fff !important;
  }

  #loginScreen .login-card input::placeholder {
    color:#dbe9e6 !important;
    -webkit-text-fill-color:#dbe9e6 !important;
    opacity:1 !important;
  }

  #loginScreen .login-card input:-webkit-autofill,
  #loginScreen .login-card input:-webkit-autofill:hover,
  #loginScreen .login-card input:-webkit-autofill:focus {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    caret-color:#fff !important;
  }

  #waterHistoryView .water-follow-table thead th.invoice-number-col,
  #waterHistoryView .water-follow-table thead th.invoice-number-col .invoice-number-heading,
  #waterInvoiceEditModal .water-edit-readings-table thead th {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }

  #waterHistoryView .water-follow-table :is(th,td):last-child {
    min-width:92px !important;
    text-align:center !important;
  }

  #waterInvoiceEditModal :is(#waterEditMonth,#waterEditAmount,.water-edit-unit,.water-edit-reading),
  #waterHistoryView [data-water-amount],
  #waterUnitsView [data-water-unit-owner],
  #waterBillsView :is(#waterMonth,#waterTotalAmount,[data-water-row]) {
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    font-family:Arial,Tahoma,sans-serif !important;
    font-variant-numeric:tabular-nums !important;
  }
}

/* Credit balance: the value is red text only, with no status-tinted cell. */
#appShell #ownersView small.owner-credit,
#appShell #ownersView small.owner-credit.owner-credit-alert {
  color:#b4232f !important;
  -webkit-text-fill-color:#b4232f !important;
  background:transparent !important;
  opacity:1 !important;
  font-weight:900 !important;
}

/* T4 performance and contrast pass. Screen-only: printed statements are deliberately excluded. */
@media screen {
  /* Keep application surfaces inexpensive to render. */
  #appShell > .sidebar,
  #appShell .top,
  #appShell .royal-home-hero,
  #appShell :is(.royal-date-card,.royal-clock-card,.panel,.stat,.home-stat,
    .association-overview-card,.report-card,.task-card,.feature-card,.feature-kpi,
    .feature-mini-item,.monthly-card,.control-hub-card,.platform-card,
    .water-history-card,.archive-card,.owner-detail-tile,.account-card,.history-item,
    .feature-period-panel,.invoice-record-card,.monthly-association-card,
    .monthly-summary article,.monthly-import-panel,.pay-card,.import-box,.document-tools,
    .bank-settings-card,.feature-review-item,.statement-head,.lux-select-menu),
  body > .lux-select-menu,
  body.lux-select-mobile-open::before,
  .modal,
  .modal-card,
  .modal-head,
  .modal-body,
  .monthly-reminder-modal,
  #d1Welcome {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Blue/green controls always use crisp white labels and indicators. */
  #appShell :is(.nav button,.association-picker-button,.lux-select-btn,
    .monthly-lux-button,.btn,.icon-btn,.top-tool,.danger-link),
  #appShell :is(.nav button,.association-picker-button,.lux-select-btn,
    .monthly-lux-button,.btn,.icon-btn,.top-tool,.danger-link) :is(span,small,b,strong,p,label) {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }

  #appShell .association-picker-button::after {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  #appShell .lux-select-btn::before {
    border-color:#fff !important;
  }

  /* The small current-status badge has a pale background, so it needs dark text even when
     its parent trigger is blue. */
  #appShell .content .lux-select-btn .lux-option-status {
    color:#074d40 !important;
    -webkit-text-fill-color:#074d40 !important;
    background:#edf7f4 !important;
    border-color:#b9d8cf !important;
  }

  /* The selected association is gold rather than blue/green; dark text is the accessible
     contrast pairing for that one row and its badge. */
  #appShell .association-picker-menu .assoc-pick-item.selected,
  #appShell .association-picker-menu .assoc-pick-item.selected :is(
    .assoc-pick-name,.assoc-pick-code,.assoc-pick-current,.assoc-pick-check
  ) {
    color:#172d29 !important;
    -webkit-text-fill-color:#172d29 !important;
    opacity:1 !important;
  }

  #appShell .association-picker-menu .assoc-pick-item.selected .assoc-pick-current {
    background:rgba(255,255,255,.78) !important;
    border-color:rgba(23,45,41,.22) !important;
  }

  #appShell .monthly-lux-select.open,
  #appShell .monthly-lux-select.open .monthly-lux-menu,
  #appShell .monthly-lux-select.open .monthly-lux-option {
    pointer-events:auto !important;
  }

  /* Every owner row uses the same background; only the owner name carries status colour. */
  #appShell tbody tr,
  #appShell tbody tr:hover,
  #appShell tbody td,
  #ownersView tbody tr,
  #ownersView tbody tr:hover,
  #ownersView tbody tr td,
  #ownersView tbody tr:hover td,
  #ownersView tbody tr.status-paid td,
  #ownersView tbody tr.status-late1 td,
  #ownersView tbody tr.status-late2 td,
  #ownersView tbody tr.status-regular td {
    background:rgba(255,255,255,.42) !important;
  }
}

/* Keep semantic status text colours stronger than the global readability rule. */
@media screen {
  #appShell .content .monthly-status.paid,
  #appShell .content .status.paid,
  #appShell .content .pill.paid,
  #appShell .content .pill.ok,
  #appShell .content .status-badge.active {
    color:#08763c !important;
    -webkit-text-fill-color:#08763c !important;
  }

  #appShell .content .monthly-status.pending,
  #appShell .content .status.partial,
  #appShell .content .status.late1,
  #appShell .content .pill.warn {
    color:#a84f00 !important;
    -webkit-text-fill-color:#a84f00 !important;
  }

  #appShell .content .monthly-status.unpaid,
  #appShell .content .status.late2,
  #appShell .content .pill.late,
  #appShell .content .pill.over {
    color:#b4232f !important;
    -webkit-text-fill-color:#b4232f !important;
  }

  #appShell .content .monthly-status.inactive,
  #appShell .content .status.regular,
  #appShell .content .status-badge.archived,
  #appShell .content tr.status-regular .pill {
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
  }
}

/* Round 2: readable application dialogs and screen tables only.
   Printed statements and their print media rules are intentionally untouched. */
@media screen {
  .modal-card,
  .modal-card .modal-head,
  .modal-card .modal-body,
  .modal-card .modal-actions-footer {
    background:#fff !important;
    background-color:#fff !important;
    color:#111 !important;
    opacity:1 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .modal-card {
    border:1px solid #bfd1cd !important;
    box-shadow:0 24px 70px rgba(4,39,33,.28) !important;
  }

  .modal-card :is(h1,h2,h3,h4,p,small,label,span,b,strong,td,th) {
    opacity:1 !important;
  }

  .modal-card :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    background:#fff !important;
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
    border-color:#a9c3bd !important;
    opacity:1 !important;
  }

  #appShell .invoice-excess-note,
  #appShell .water-excess-note {
    display:block !important;
    margin-top:3px !important;
    color:#b4232f !important;
    -webkit-text-fill-color:#b4232f !important;
    background:transparent !important;
    font-weight:900 !important;
    opacity:1 !important;
  }

  #waterHistoryView .table-wrap,
  #independentInvoiceFollowView .table-wrap {
    max-width:100% !important;
    overflow:auto !important;
    background:#fff !important;
    border:1px solid #b9cec9 !important;
    border-radius:14px !important;
    isolation:isolate !important;
  }

  #waterHistoryView .water-follow-table {
    min-width:1180px !important;
    width:100% !important;
    table-layout:auto !important;
  }

  #independentInvoiceFollowView .independent-follow-table {
    min-width:900px !important;
    width:100% !important;
    table-layout:auto !important;
  }

  #waterHistoryView .water-follow-table thead th,
  #independentInvoiceFollowView .independent-follow-table thead th {
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    padding:11px 8px !important;
    background:#0b584a !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
    white-space:nowrap !important;
  }

  #waterHistoryView .water-follow-table tbody td,
  #independentInvoiceFollowView .independent-follow-table tbody td {
    padding:10px 8px !important;
    background:#fff !important;
    color:#111 !important;
    -webkit-text-fill-color:#111 !important;
    opacity:1 !important;
    vertical-align:middle !important;
  }

  /* Keep every association action visible on desktop instead of clipping the delete button. */
  @media (min-width:1200px) {
    #associationsView .table-wrap > table {
      width:100% !important;
      min-width:0 !important;
      max-width:100% !important;
      table-layout:fixed !important;
    }

    #associationsView :is(th,td):nth-child(1) { width:24% !important; }
    #associationsView :is(th,td):nth-child(2) { width:8% !important; }
    #associationsView :is(th,td):nth-child(3) { width:8% !important; }
    #associationsView :is(th,td):nth-child(4) { width:14% !important; }
    #associationsView :is(th,td):nth-child(5) { width:18% !important; }
    #associationsView :is(th,td):nth-child(6) { width:28% !important; }
    #associationsView td.owner {
      min-width:0 !important;
      white-space:normal !important;
      overflow-wrap:anywhere !important;
    }
    #associationsView td:last-child .row-actions {
      display:grid !important;
      grid-template-columns:repeat(3,minmax(0,1fr)) !important;
      width:100% !important;
    }
    #associationsView td:last-child .icon-btn {
      min-width:0 !important;
      padding-inline:5px !important;
      font-size:11px !important;
      white-space:nowrap !important;
    }
  }
}

@media screen and (max-width:600px) {
  .modal-card {
    width:min(calc(100vw - 18px), 100%) !important;
    max-height:calc(100dvh - 18px) !important;
  }

  .modal-card .modal-head,
  .modal-card .modal-body,
  .modal-card .modal-actions-footer {
    padding-inline:14px !important;
  }
}

/* T4 preview gate: application tables only. Printed statements/PDFs are excluded. */
@media screen and (min-width:901px) {
  #appShell #ownersView .table-wrap,
  #appShell #waterHistoryView .table-wrap,
  #appShell #independentInvoiceFollowView .table-wrap {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    scrollbar-gutter:auto !important;
  }

  #ownersView .table-wrap > table,
  #waterHistoryView .table-wrap > table.water-follow-table,
  #independentInvoiceFollowView .table-wrap > table.independent-follow-table {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  #ownersView .table-wrap > table thead th,
  #waterHistoryView .water-follow-table thead th,
  #independentInvoiceFollowView .independent-follow-table thead th {
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    height:48px !important;
    padding:7px 4px !important;
    background:#0b584a !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:clamp(9px,.72vw,11px) !important;
    line-height:1.25 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    vertical-align:middle !important;
  }

  #ownersView .table-wrap > table tbody td,
  #waterHistoryView .water-follow-table tbody td,
  #independentInvoiceFollowView .independent-follow-table tbody td {
    min-width:0 !important;
    max-width:none !important;
    height:52px !important;
    padding:7px 4px !important;
    font-size:clamp(9px,.72vw,11px) !important;
    line-height:1.35 !important;
    vertical-align:middle !important;
    overflow-wrap:anywhere !important;
  }

  #ownersView .table-wrap > table :is(th,td) + :is(th,td),
  #waterHistoryView .water-follow-table :is(th,td) + :is(th,td),
  #independentInvoiceFollowView .independent-follow-table :is(th,td) + :is(th,td) {
    border-inline-start:1px solid #c9d9d5 !important;
  }

  #ownersView .table-wrap > table td.num,
  #waterHistoryView .water-follow-table td.num,
  #independentInvoiceFollowView .independent-follow-table td.num {
    direction:ltr !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-variant-numeric:tabular-nums !important;
  }

  #ownersView .table-wrap > table :is(th,td):first-child {
    width:18% !important;
  }

  #ownersView .table-wrap > table :is(th,td):last-child {
    width:9% !important;
  }

  #ownersView .table-wrap > table td.owner,
  #waterHistoryView .water-follow-table td.owner-display-name,
  #independentInvoiceFollowView .independent-follow-table td.owner-display-name {
    min-width:0 !important;
    max-width:none !important;
    white-space:normal !important;
    line-height:1.35 !important;
    overflow:hidden !important;
    word-break:break-word !important;
  }

  #ownersView .owner-name-btn,
  #waterHistoryView .owner-name-text,
  #independentInvoiceFollowView .owner-name-text {
    display:-webkit-box !important;
    width:100% !important;
    max-width:100% !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    overflow:hidden !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  #waterHistoryView .water-follow-table :is(th,td):nth-child(1) { width:18% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(2) { width:5% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(3),
  #waterHistoryView .water-follow-table :is(th,td):nth-child(4) { width:8% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(5) { width:6% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(6),
  #waterHistoryView .water-follow-table :is(th,td):nth-child(7) { width:8% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(8) {
    width:7% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(9) { width:9% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(10) { width:7% !important; }
  #waterHistoryView .water-follow-table :is(th,td):nth-child(11),
  #waterHistoryView .water-follow-table :is(th,td):nth-child(12) { width:8% !important; }

  #waterHistoryView .water-follow-table td.owner-display-name {
    width:auto !important;
  }

  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(1) { width:22% !important; }
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(2) { width:7% !important; }
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(3),
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(4) { width:11% !important; }
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(5) {
    width:8% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(6) { width:12% !important; }
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(7),
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(8) { width:10% !important; }
  #independentInvoiceFollowView .independent-follow-table :is(th,td):nth-child(9) { width:9% !important; }

  #independentInvoiceFollowView .independent-follow-table td.owner-display-name {
    width:auto !important;
  }
}

@media screen and (max-width:900px) {
  #appShell #ownersView .table-wrap,
  #appShell #waterHistoryView .table-wrap,
  #appShell #independentInvoiceFollowView .table-wrap {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    max-height:none !important;
    overflow:visible !important;
    contain:none !important;
    scrollbar-gutter:auto !important;
    border:0 !important;
    background:transparent !important;
  }

  #ownersView .table-wrap > table,
  #waterHistoryView .table-wrap > table.water-follow-table,
  #independentInvoiceFollowView .table-wrap > table.independent-follow-table {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
    background:transparent !important;
  }

  #ownersView .table-wrap > table thead,
  #waterHistoryView .water-follow-table thead,
  #independentInvoiceFollowView .independent-follow-table thead {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  #ownersView .table-wrap > table tbody,
  #waterHistoryView .water-follow-table tbody,
  #independentInvoiceFollowView .independent-follow-table tbody {
    display:grid !important;
    width:100% !important;
    gap:12px !important;
  }

  #ownersView .table-wrap > table tbody tr,
  #waterHistoryView .water-follow-table tbody tr,
  #independentInvoiceFollowView .independent-follow-table tbody tr {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    border:1px solid #bfd1cd !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 8px 20px rgba(4,39,33,.08) !important;
  }

  #ownersView .table-wrap > table tbody td,
  #waterHistoryView .water-follow-table tbody td,
  #independentInvoiceFollowView .independent-follow-table tbody td {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:4px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:58px !important;
    padding:10px 11px !important;
    border:0 !important;
    border-bottom:1px solid #e3ebe8 !important;
    background:#fff !important;
    color:#172d29 !important;
    -webkit-text-fill-color:currentColor !important;
    font-size:12px !important;
    line-height:1.45 !important;
    text-align:start !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  #ownersView .table-wrap > table tbody td[data-label]::before,
  #waterHistoryView .water-follow-table tbody td[data-label]::before,
  #independentInvoiceFollowView .independent-follow-table tbody td[data-label]::before {
    content:attr(data-label);
    display:block;
    width:100%;
    color:#49645e;
    -webkit-text-fill-color:#49645e;
    font-size:10px;
    font-weight:900;
    line-height:1.3;
    direction:rtl;
    text-align:right;
  }

  #ownersView .table-wrap > table tbody td.num,
  #waterHistoryView .water-follow-table tbody td.num,
  #independentInvoiceFollowView .independent-follow-table tbody td.num {
    direction:ltr !important;
    text-align:left !important;
    font-variant-numeric:tabular-nums !important;
  }

  #ownersView .table-wrap > table tbody td.num[data-label]::before,
  #waterHistoryView .water-follow-table tbody td.num[data-label]::before,
  #independentInvoiceFollowView .independent-follow-table tbody td.num[data-label]::before {
    direction:rtl !important;
    text-align:right !important;
  }

  #ownersView .table-wrap > table tbody td.owner,
  #ownersView .table-wrap > table tbody td[data-label="اسم المالك"],
  #waterHistoryView .water-follow-table tbody td.owner-display-name,
  #waterHistoryView .water-follow-table tbody td[data-label="المالك"],
  #independentInvoiceFollowView .independent-follow-table tbody td.owner-display-name,
  #independentInvoiceFollowView .independent-follow-table tbody td[data-label="اسم المالك"],
  #ownersView .table-wrap > table tbody td[data-label="الحالة"],
  #waterHistoryView .water-follow-table tbody td[data-label="الحالة"],
  #independentInvoiceFollowView .independent-follow-table tbody td[data-label="الحالة"] {
    grid-column:1 / -1 !important;
  }

  #ownersView .owner-name-btn,
  #waterHistoryView .owner-name-text,
  #independentInvoiceFollowView .owner-name-text {
    display:-webkit-box !important;
    width:100% !important;
    max-width:100% !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    overflow:hidden !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  #ownersView .table-wrap > table tbody td.empty,
  #waterHistoryView .water-follow-table tbody td.empty,
  #independentInvoiceFollowView .independent-follow-table tbody td.empty {
    grid-column:1 / -1 !important;
    align-items:center !important;
    min-height:76px !important;
    text-align:center !important;
  }

  #ownersView .table-wrap > table tbody td .row-actions,
  #waterHistoryView .water-follow-table tbody td .row-actions,
  #independentInvoiceFollowView .independent-follow-table tbody td .row-actions {
    width:100% !important;
    min-width:0 !important;
    flex-wrap:wrap !important;
  }
}

/* T4 visual-gate polish: screen UI only; printed statements remain unchanged. */
@media screen {
  #waterHistoryView .water-follow-table thead th,
  #waterHistoryView .water-follow-table thead th .invoice-number-heading,
  #independentInvoiceFollowView .independent-follow-table thead th,
  #independentInvoiceFollowView .independent-follow-table thead th .invoice-number-heading {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }

  #dashboardView .stat strong {
    direction:ltr !important;
    unicode-bidi:isolate !important;
    text-align:right !important;
  }

  #appShell #waterHistoryView .water-follow-table .water-excess-note,
  #appShell #independentInvoiceFollowView .independent-follow-table .invoice-excess-note {
    color:#b4232f !important;
    -webkit-text-fill-color:#b4232f !important;
    background:transparent !important;
    font-weight:900 !important;
    opacity:1 !important;
  }
}

/* T4 final gate: association labels stay inside fixed controls at every breakpoint.
   This is screen-only and does not alter any printable statement or PDF layout. */
@media screen {
  #appShell .field > .lux-select.association-select > .lux-select-btn {
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    padding:6px 44px 6px 13px !important;
    align-items:center !important;
    overflow:hidden !important;
    font-size:15px !important;
  }

  #appShell .field > .lux-select.association-select > .lux-select-btn .lux-option-copy {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "name name"
      "code status" !important;
    align-content:center !important;
    align-items:center !important;
    column-gap:7px !important;
    row-gap:2px !important;
    width:100% !important;
    min-width:0 !important;
    max-height:60px !important;
    overflow:hidden !important;
  }

  #appShell .field > .lux-select.association-select > .lux-select-btn .lux-option-primary {
    grid-area:name !important;
    width:100% !important;
    max-height:36px !important;
    font-size:15px !important;
    line-height:18px !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    overflow-wrap:anywhere !important;
  }

  #appShell .field > .lux-select.association-select > .lux-select-btn .lux-option-secondary {
    grid-area:code !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:10px !important;
    line-height:13px !important;
  }

  #appShell .field > .lux-select.association-select > .lux-select-btn .lux-option-status {
    grid-area:status !important;
    margin:0 !important;
    padding:1px 7px !important;
    font-size:9px !important;
    line-height:12px !important;
  }

  #appShell > .sidebar .association-picker-button {
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    padding:7px 11px !important;
    overflow:hidden !important;
  }

  #appShell > .sidebar .association-picker-button .assoc-pick-text {
    justify-content:center !important;
    gap:2px !important;
    max-height:58px !important;
  }

  #appShell > .sidebar .association-picker-button .assoc-pick-name,
  #appShell > .sidebar .association-picker-menu .assoc-pick-name {
    width:100% !important;
    max-height:36px !important;
    font-size:13.5px !important;
    line-height:18px !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    overflow-wrap:anywhere !important;
  }

  #appShell > .sidebar .association-picker-button .assoc-pick-code,
  #appShell > .sidebar .association-picker-menu .assoc-pick-code {
    font-size:10px !important;
    line-height:13px !important;
  }

  #appShell > .sidebar .association-picker-menu .assoc-pick-item {
    height:84px !important;
    min-height:84px !important;
    max-height:84px !important;
    padding:7px 10px !important;
    overflow:hidden !important;
  }

  #appShell > .sidebar .association-picker-menu .assoc-pick-copy {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:2px !important;
    min-width:0 !important;
    max-height:70px !important;
    overflow:hidden !important;
  }

  #waterInvoiceEditModal .water-edit-readings-table th:nth-child(1) { width:43% !important; }
  #waterInvoiceEditModal .water-edit-readings-table th:nth-child(2) { width:13% !important; }
  #waterInvoiceEditModal .water-edit-readings-table th:nth-child(3),
  #waterInvoiceEditModal .water-edit-readings-table th:nth-child(4) { width:14% !important; }
  #waterInvoiceEditModal .water-edit-readings-table th:nth-child(5) { width:16% !important; }
}

@media screen and (max-width:1024px) {
  html body #appShell > .sidebar .association-picker-button {
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
  }
}

/* Tablet controls intentionally use a roomier intermediate scale than phones.
   Screen-only: printed statements and PDF layouts remain untouched. */
@media screen and (min-width:600px) and (max-width:1100px) {
  #appShell > .content .btn:not(.icon-btn),
  #appShell > .content button.btn:not(.icon-btn) {
    min-height:46px;
    padding:10px 18px;
    font-size:17px;
    line-height:1.4;
  }
}

/* T4 final delivery gate: owner status table, fixed payment controls and
   genuinely distinct phone/tablet table layouts. Screen UI only. */
@media screen {
  #liveHijriDate,
  .hijri-date-value {
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:nowrap !important;
    font-variant-numeric:tabular-nums !important;
  }

  #dashboardView .dashboard-owner-status-table {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  #dashboardView .dashboard-owner-status-table :is(th,td) {
    min-width:0 !important;
    max-width:none !important;
    padding-inline:9px !important;
    vertical-align:middle !important;
  }

  #dashboardView .dashboard-owner-status-table :is(th,td):nth-child(1) { width:34% !important; }
  #dashboardView .dashboard-owner-status-table :is(th,td):nth-child(2) { width:17% !important; }
  #dashboardView .dashboard-owner-status-table :is(th,td):nth-child(3) { width:18% !important; }
  #dashboardView .dashboard-owner-status-table :is(th,td):nth-child(4) { width:11% !important; }
  #dashboardView .dashboard-owner-status-table :is(th,td):nth-child(5) { width:20% !important; }

  #dashboardView .dashboard-owner-status-table td.owner {
    min-width:0 !important;
    white-space:normal !important;
    overflow:hidden !important;
  }

  #dashboardView .dashboard-owner-status-table .owner-name-btn {
    display:-webkit-box !important;
    width:100% !important;
    max-width:100% !important;
    max-height:2.8em !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:inherit !important;
    font:inherit !important;
    line-height:1.4 !important;
    text-align:right !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    white-space:normal !important;
    overflow:hidden !important;
    overflow-wrap:anywhere !important;
  }

  #dashboardView .dashboard-owner-status-table td:last-child .pill {
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    min-height:32px !important;
    align-items:center !important;
    justify-content:center !important;
    padding:5px 7px !important;
    line-height:1.25 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  #waterHistoryView .water-history-actions {
    align-items:stretch !important;
  }

  #waterHistoryView .water-history-actions > .lux-select.name-select {
    flex:0 0 320px !important;
    width:320px !important;
    min-width:320px !important;
    max-width:320px !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }

  #waterHistoryView .water-history-actions > .lux-select.name-select > .lux-select-btn,
  #independentInvoiceFollowView #indInvoiceOwner + .lux-select.name-select > .lux-select-btn {
    width:100% !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
    padding-block:0 !important;
    overflow:hidden !important;
  }

  #waterHistoryView .water-history-actions > .lux-select.name-select .lux-option-primary,
  #independentInvoiceFollowView #indInvoiceOwner + .lux-select.name-select .lux-option-primary {
    display:block !important;
    width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #waterHistoryView .water-history-actions > input[data-water-amount] {
    flex:0 0 140px !important;
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }

  #waterHistoryView .water-history-actions > .btn {
    flex:0 0 142px !important;
    width:142px !important;
    min-width:142px !important;
    max-width:142px !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
    padding:7px 9px !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }

  #independentInvoiceFollowView .grid2 {
    align-items:start !important;
  }

  #independentInvoiceFollowView #indInvoiceOwner + .lux-select.name-select,
  #independentInvoiceFollowView #indInvoicePaymentAmount {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }
}

@media screen and (max-width:900px) {
  #dashboardView .dashboard-owner-status-table {
    display:block !important;
    background:transparent !important;
  }

  #dashboardView .dashboard-owner-status-table thead {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip-path:inset(50%) !important;
  }

  #dashboardView .dashboard-owner-status-table tbody {
    display:grid !important;
    width:100% !important;
    gap:12px !important;
  }

  #dashboardView .dashboard-owner-status-table tbody tr {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    border:1px solid #bfd1cd !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 8px 20px rgba(4,39,33,.08) !important;
  }

  #dashboardView .dashboard-owner-status-table tbody td {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:4px !important;
    width:auto !important;
    min-width:0 !important;
    min-height:58px !important;
    padding:10px 11px !important;
    border:0 !important;
    border-bottom:1px solid #e3ebe8 !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
  }

  #dashboardView .dashboard-owner-status-table tbody td[data-label]::before {
    content:attr(data-label);
    display:block;
    width:100%;
    color:#49645e;
    font-size:10px;
    font-weight:900;
    line-height:1.3;
    direction:rtl;
    text-align:right;
  }

  #dashboardView .dashboard-owner-status-table tbody td:first-child,
  #dashboardView .dashboard-owner-status-table tbody td:last-child {
    grid-column:1 / -1 !important;
  }

  #dashboardView .dashboard-owner-status-table tbody td.num {
    direction:ltr !important;
    text-align:left !important;
    font-variant-numeric:tabular-nums !important;
  }

  #dashboardView .dashboard-owner-status-table tbody td.num[data-label]::before {
    direction:rtl !important;
    text-align:right !important;
  }
}

@media screen and (max-width:599px) {
  #ownersView .table-wrap > table tbody tr,
  #waterHistoryView .water-follow-table tbody tr,
  #independentInvoiceFollowView .independent-follow-table tbody tr,
  #dashboardView .dashboard-owner-status-table tbody tr {
    grid-template-columns:1fr !important;
  }

  #ownersView .table-wrap > table tbody td,
  #waterHistoryView .water-follow-table tbody td,
  #independentInvoiceFollowView .independent-follow-table tbody td,
  #dashboardView .dashboard-owner-status-table tbody td {
    grid-column:1 !important;
  }

  #waterHistoryView .water-history-actions > .lux-select.name-select,
  #waterHistoryView .water-history-actions > input[data-water-amount],
  #waterHistoryView .water-history-actions > .btn {
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* T5 final cascade authority — application screen only. */
@media screen {
  #appShell .association-overview-card {
    display:flex !important;
    height:312px !important;
    min-width:0 !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  #appShell .association-overview-card h3 {
    display:-webkit-box !important;
    min-height:2.8em !important;
    max-height:2.8em !important;
    line-height:1.4 !important;
    white-space:normal !important;
    overflow:hidden !important;
    overflow-wrap:anywhere !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
  }
  #appShell .association-overview-card .association-overview-grid { flex:1 1 auto !important; }
  #appShell .nav > button { height:46px !important; min-height:46px !important; max-height:46px !important; }
  #appShell .dashboard-subnav > button { height:40px !important; min-height:40px !important; max-height:40px !important; }
  #appShell :is(.btn,.icon-btn,.login-submit,.top-tool,.close,.nav button,
    .association-picker-button,.lux-select-btn,.monthly-lux-button,.month-chip):focus-visible {
    outline:3px solid color-mix(in srgb,var(--gold,#d5a83f) 82%,white 18%) !important;
    outline-offset:2px !important;
  }
  #appShell :is(button,.btn,[role="button"]):disabled,
  #appShell :is(button,.btn,[role="button"])[aria-disabled="true"] {
    cursor:not-allowed !important;
    opacity:.55 !important;
    transform:none !important;
    box-shadow:none !important;
  }
}

@media screen and (min-width:700px) and (max-width:1180px) {
  html body #appShell .associations-overview { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}

@media screen and (min-width:700px) and (max-width:900px) {
  #appShell #ownersView .table-wrap,
  #appShell #waterHistoryView .table-wrap,
  #appShell #independentInvoiceFollowView .table-wrap,
  #appShell #dashboardView .table-wrap {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    max-height:600px !important;
    overflow:auto !important;
    border:1px solid #d8e4e0 !important;
    border-radius:14px !important;
    background:#fff !important;
    scrollbar-gutter:stable !important;
  }
  #ownersView .table-wrap > table,
  #waterHistoryView .table-wrap > table.water-follow-table,
  #independentInvoiceFollowView .table-wrap > table.independent-follow-table,
  #dashboardView .dashboard-owner-status-table {
    display:table !important;
    width:100% !important;
    max-width:none !important;
    table-layout:fixed !important;
    background:#fff !important;
  }
  #ownersView .table-wrap > table { min-width:1240px !important; }
  #waterHistoryView .table-wrap > table.water-follow-table { min-width:1180px !important; }
  #independentInvoiceFollowView .table-wrap > table.independent-follow-table { min-width:1200px !important; }
  #dashboardView .dashboard-owner-status-table { min-width:700px !important; }
  #ownersView .table-wrap > table thead,
  #waterHistoryView .water-follow-table thead,
  #independentInvoiceFollowView .independent-follow-table thead,
  #dashboardView .dashboard-owner-status-table thead {
    position:static !important;
    display:table-header-group !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
  }
  #ownersView .table-wrap > table tbody,
  #waterHistoryView .water-follow-table tbody,
  #independentInvoiceFollowView .independent-follow-table tbody,
  #dashboardView .dashboard-owner-status-table tbody { display:table-row-group !important; }
  #ownersView .table-wrap > table tbody tr,
  #waterHistoryView .water-follow-table tbody tr,
  #independentInvoiceFollowView .independent-follow-table tbody tr,
  #dashboardView .dashboard-owner-status-table tbody tr {
    display:table-row !important;
    width:auto !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  #ownersView .table-wrap > table tbody td,
  #waterHistoryView .water-follow-table tbody td,
  #independentInvoiceFollowView .independent-follow-table tbody td,
  #dashboardView .dashboard-owner-status-table tbody td {
    display:table-cell !important;
    width:auto !important;
    min-height:48px !important;
    padding:9px 8px !important;
    border-bottom:1px solid #e3ebe8 !important;
    background:#fff !important;
    vertical-align:middle !important;
    white-space:normal !important;
    overflow:hidden !important;
  }
  #ownersView .table-wrap > table tbody td[data-label]::before,
  #waterHistoryView .water-follow-table tbody td[data-label]::before,
  #independentInvoiceFollowView .independent-follow-table tbody td[data-label]::before,
  #dashboardView .dashboard-owner-status-table tbody td[data-label]::before {
    display:none !important;
    content:none !important;
  }
  #ownersView .table-wrap > table tbody td.owner,
  #ownersView .table-wrap > table tbody td[data-label="اسم المالك"],
  #waterHistoryView .water-follow-table tbody td.owner-display-name,
  #waterHistoryView .water-follow-table tbody td[data-label="المالك"],
  #independentInvoiceFollowView .independent-follow-table tbody td.owner-display-name,
  #independentInvoiceFollowView .independent-follow-table tbody td[data-label="اسم المالك"],
  #dashboardView .dashboard-owner-status-table tbody td:first-child,
  #dashboardView .dashboard-owner-status-table tbody td:last-child { grid-column:auto !important; }
}

@media screen and (max-width:699px) {
  html body #appShell .associations-overview { grid-template-columns:1fr !important; }
  #appShell .association-overview-card { height:300px !important; }

  /* Dashboard owner status stays compact and readable on phones. */
  #dashboardView .dashboard-owner-status-table tbody tr {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #dashboardView .dashboard-owner-status-table tbody td {
    width:100% !important;
    max-width:none !important;
    min-height:52px !important;
    grid-column:auto !important;
    padding:8px 9px !important;
  }
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(1),
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(2),
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(3),
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(4),
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(5) {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #dashboardView .dashboard-owner-status-table tbody td:first-child,
  #dashboardView .dashboard-owner-status-table tbody td:last-child {
    grid-column:1 / -1 !important;
  }
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(2),
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(3),
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(4) {
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
  }
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(2)::before,
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(3)::before,
  #dashboardView .dashboard-owner-status-table tbody td:nth-child(4)::before {
    text-align:center !important;
  }
  #dashboardView .dashboard-owner-status-table .owner-name-btn {
    min-height:2.6em !important;
    text-align:right !important;
  }
  #dashboardView .dashboard-owner-status-table tbody td:last-child {
    min-height:48px !important;
    align-items:stretch !important;
  }
}
/* T6: لا تظهر علامة النجاح إلا في حالة ACK السحابي المكتمل. */
.sync-indicator.is-completed .sync-indicator-icon::before{
  content:"✓";
  font-size:15px;
  font-weight:900;
  filter:none;
}

/* T6: blend the root scrollbar gutter into the dark authentication surface. */
html:has(body.auth-locked),
html:has(body.auth-checking) {
  background:#07120f;
  scrollbar-color:#168276 #07120f;
}
html:has(body.auth-locked)::-webkit-scrollbar-track,
html:has(body.auth-checking)::-webkit-scrollbar-track {
  background:#07120f;
}