/* UPRNTLS v5.13.0 — final polish layer
   One small last-loaded layer for spacing, semantic states, accessibility and theme parity. */
:root{
  --success:var(--green,#198754);
  --warning:#a66b00;
  --danger-ui:var(--red,#d9534f);
  --info:#2f7fd1;
  --success-soft:color-mix(in srgb,var(--success) 9%,var(--panel,#fff));
  --warning-soft:color-mix(in srgb,var(--warning) 9%,var(--panel,#fff));
  --danger-soft:color-mix(in srgb,var(--danger-ui) 8%,var(--panel,#fff));
  --info-soft:color-mix(in srgb,var(--info) 8%,var(--panel,#fff));
  --focus-ring:color-mix(in srgb,var(--orange,var(--green,#198754)) 22%,transparent);
}
html[data-theme="dark"]{
  --warning:#e2b85c;
  --info:#88bff0;
  --success-soft:color-mix(in srgb,var(--success) 13%,var(--panel,#1c211d));
  --warning-soft:color-mix(in srgb,var(--warning) 12%,var(--panel,#1c211d));
  --danger-soft:color-mix(in srgb,var(--danger-ui) 11%,var(--panel,#1c211d));
  --info-soft:color-mix(in srgb,var(--info) 11%,var(--panel,#1c211d));
}

/* Predictable focus behavior everywhere. */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--orange,var(--green,#198754));
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--focus-ring);
}
:where(button,input,select,textarea){transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,opacity .16s ease}

/* Consistent card breathing room. */
.crm-content>.crm-view.active>*:first-child{margin-top:0}
.panel,.kpi-card,.unit-controlbar,.ops-dashboard-head,.ops-lane-card,.ops-attention-panel{scroll-margin-top:138px}
.panel-head{padding-inline:2px}
.panel-head>div{min-width:0}
.panel-note,.toolbar-copy,.field-help{line-height:1.5}

/* Forms should never feel glued to their borders. */
.form-grid{column-gap:14px;row-gap:14px}
.form-grid label,.settings-main-panel label,.settings-communications-panel label{min-width:0}
.form-grid label>span,.settings-main-panel label>span,.settings-communications-panel label>span{line-height:1.35}
.form-grid input,.form-grid select,.form-grid textarea,
.settings-main-panel input,.settings-main-panel select,.settings-main-panel textarea,
.settings-communications-panel input,.settings-communications-panel select,.settings-communications-panel textarea{
  min-width:0;
  padding-left:12px;
  padding-right:12px;
}
.form-actions{padding-top:8px;margin-top:6px;border-top:1px solid var(--line,rgba(0,0,0,.1));gap:9px}
.form-actions .btn{min-width:96px}

/* Compact status language: keep pills readable without crowding the value. */
.status-pill-stack{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.status-pill-stack .badge,.status-pill-stack .reliability-pill{margin:0!important}
.payment-lifecycle,.unit-health,.reliability-pill,.badge{line-height:1.1}
.payment-lifecycle,.unit-health{margin-left:8px!important;padding:4px 9px!important;vertical-align:middle}
.payment-paid,.payment-settled,.health-ready,.badge.available,.badge.completed{color:var(--success)!important;background:var(--success-soft)!important}
.payment-partial,.payment-refund-due,.health-reserved,.health-service-due,.health-needs-inspection,.health-inspect,.badge.pending{color:var(--warning)!important;background:var(--warning-soft)!important}
.payment-unpaid,.health-missing-accessory,.health-needs-service,.badge.danger,.badge.overdue{color:var(--danger-ui)!important;background:var(--danger-soft)!important}
.payment-refunded,.health-on-rent,.badge.returned{color:var(--info)!important;background:var(--info-soft)!important}

/* Theme-correct task rows — no light-only beige strip in dark mode. */
.ops-booking-row{background:var(--panel-2)!important}
.ops-booking-row.late,.ops-booking-row.overdue{background:var(--warning-soft)!important}
.attention-row{background:var(--panel-2)!important}
.attention-dot{background:var(--warning)!important}
.attention-dot.rank-0{background:var(--danger-ui)!important}
.attention-dot.rank-1{background:var(--info)!important}
.attention-dot.rank-4{background:var(--success)!important}

/* Tables and empty states keep edge spacing and readable actions. */
.table-wrap{padding-bottom:6px}
.table-wrap th:first-child,.table-wrap td:first-child{padding-left:18px}
.table-wrap th:last-child,.table-wrap td:last-child{padding-right:18px}
.row-actions{gap:6px;flex-wrap:wrap}
.empty{background:var(--panel-2);border:1px dashed var(--line);border-radius:13px}
.online-more-menu>div{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important;z-index:140}

/* Theme-correct toast instead of a permanent black island. */
.toast{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important;box-shadow:0 18px 48px rgba(0,0,0,.22)!important}

/* Buyer settings: consistent first/last card margins and internal gutters. */
body.buyer-ui [data-view-panel="settings"] .settings-grid{padding-inline:8px!important}
body.buyer-ui [data-view-panel="settings"] .settings-main-panel #settingsForm,
body.buyer-ui [data-view-panel="settings"] .settings-communications-panel .notify-module-form{padding-inline:6px}
body.buyer-ui [data-view-panel="settings"] .settings-main-panel #settingsForm>*:first-child,
body.buyer-ui [data-view-panel="settings"] .notify-module-form>*:first-child{margin-top:4px}
body.buyer-ui [data-view-panel="settings"] .settings-main-panel #settingsForm>*:last-child,
body.buyer-ui [data-view-panel="settings"] .notify-module-form>*:last-child{margin-bottom:8px}
.settings-communications-panel .notify-grid{padding-inline:6px}
.settings-communications-panel .notify-grid label,
.settings-communications-panel .notify-block-label{padding-inline:3px;gap:7px}
.settings-communications-panel .notify-grid input,
.settings-communications-panel .notify-grid select,
.settings-communications-panel .notify-block-label textarea{padding:9px 12px!important}

/* Read-only accounts look intentionally restricted, not broken. */
body.role-readonly [data-open],body.role-readonly .danger,body.role-readonly .danger-outline{opacity:.5}
body.role-readonly [data-open]{cursor:not-allowed}

/* Public/renter pages — only generic polish; preserve each page's existing design. */
body[data-page="book"] :where(.input,.select,textarea),
body[data-page="status"] :where(.input,.select,textarea){padding-left:12px;padding-right:12px}
body[data-page="book"] .panel,body[data-page="status"] .panel{scroll-margin-top:88px}
body[data-page="book"] .submit-row{gap:18px}
body[data-page="book"] .consent{line-height:1.5}

@media(max-width:760px){
  .form-grid{row-gap:11px}
  .form-actions .btn{min-width:0;flex:1 1 130px}
  .table-wrap th:first-child,.table-wrap td:first-child{padding-left:14px}
  .table-wrap th:last-child,.table-wrap td:last-child{padding-right:14px}
  body.buyer-ui [data-view-panel="settings"] .settings-grid{padding-inline:3px!important}
  .settings-communications-panel .notify-grid{padding-inline:2px}
}
