/* Loaded last in each document. Layouts remain local; visual roles are shared. */
html:has(body.brand-ui) { height:auto; min-height:100%; overflow-x:clip; }
body.brand-ui {
  --terracotta:var(--brand-green);
  height:auto;
  min-height:100dvh;
  overflow-x:clip;
  --shadow-sm: var(--brand-shadow);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--brand-green);
}
.brand-ui :is(h1,h2,h3) { color:var(--text); line-height:1.25; letter-spacing:-.035em; }
.brand-ui :is(.daily-head,.home-head,.section-hero,.page-header) h1 { font-size:clamp(28px,3vw,38px); font-weight:750; }
.brand-ui :is(.daily,.owner-home) { max-width:1440px; }
.brand-ui .content { padding:32px clamp(20px,3vw,48px) 64px; }
.brand-ui :is(.daily-head,.home-head) { margin-bottom:32px; gap:24px; }
.brand-ui :is(.stats-grid,.home-kpis,.home-grid,.daily-layout,.roi-property-grid) { gap:24px; }
.brand-ui :is(.card,.stat-card,.daily-panel,.home-panel,.home-kpi,.owner-property-card,.property-panel,.roi-panel,.timeline-panel,.profile-panel,.compare-card,.section-hero,.dashboard-hero,.property-command-center,.recurring-billing-card,.roi-property-card,.cost-property-card,.welcome-card,.entry-card,.offer-card,.product-preview,.success-card,.notification-popover,.modal-content,.modal-card,.dialog-panel) {
  background:var(--card)!important;
  color:var(--text)!important;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--brand-shadow)!important;
}
.brand-ui :is(.card,.daily-panel,.home-panel,.section-hero,.dashboard-hero,.profile-panel,.property-panel) { padding:28px; margin-bottom:24px; }
.brand-ui :is(.stat-card,.home-kpi,.roi-property-card,.cost-property-card) { padding:24px; }
.brand-ui :is(.stat-label,.home-kpi span) { font-size:12px; font-weight:600; text-transform:none; letter-spacing:.01em; }
.brand-ui :is(.stat-value,.home-kpi strong) { font-size:clamp(26px,2.4vw,34px); letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1.25; }
.brand-ui :is(.stat-sub,.home-kpi small,.home-meta,.daily-small) { font-size:13px; }
.brand-ui :is(.card-title,.daily h2,.home-panel-head h2) { font-size:20px; font-weight:650; }
.brand-ui :is(.daily-section-head,.home-panel-head) { margin-bottom:24px; gap:16px; }
.brand-ui .home-primary { min-width:0; }
.brand-ui .home-attention .attention-link { min-width:0; }
.brand-ui .home-attention .attention-link>div { min-width:0; overflow-wrap:anywhere; }
.brand-ui :is(.btn,.button,.btn-submit,.nav-login,.entry-theme,.theme-toggle,.logout-btn,.session-logout,.tab,.tab-btn,.filter-btn,.segment-btn) {
  border-radius:var(--radius-pill);
  min-height:44px;
  padding:11px 20px;
  font-weight:600;
  font-family:inherit;
  line-height:1.4;
}
.brand-ui :is(.btn,.button) { justify-content:center; white-space:normal; text-align:center; gap:8px; }
.brand-ui :is(.btn-danger,.btn-soft-danger) { background:var(--danger-bg)!important; color:var(--danger)!important; border-color:var(--danger)!important; }
.brand-ui :is(button,input,select,textarea):disabled { opacity:.6; cursor:not-allowed; }
.brand-ui :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--brand-focus)!important; outline-offset:4px; }
.brand-ui .sidebar { width:264px; border-right:1px solid var(--border); }
.brand-ui .sidebar .logo { padding:28px 24px; border-color:var(--border); }
.brand-ui .nav { padding:16px 14px; }
.brand-ui .nav-link { min-height:48px; padding:12px 16px; border-radius:var(--radius-pill); margin-bottom:6px; }
.brand-ui .nav-link.active { box-shadow:none; background:var(--tint)!important; color:var(--green)!important; font-weight:700; }

.brand-ui .nav-badge { box-shadow:none; }
.brand-ui .topbar { min-height:88px; padding:18px clamp(20px,3vw,48px); gap:16px; }
.brand-ui .topbar .page-title { font-size:20px; }
.brand-ui .notification-menu>summary { border-radius:50%; background:var(--tint); border-color:transparent; }

.brand-ui :is(.profile-name,.topbar-profile strong) { color:var(--text)!important; }
.brand-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]),select,textarea) {
  border-radius:var(--radius-control); min-height:48px; padding:12px 16px;
  background:var(--card)!important; color:var(--text)!important; border-color:var(--input-line)!important;
}
.brand-ui input[type=checkbox],.brand-ui input[type=radio] { width:18px; height:18px; flex-shrink:0; }
.brand-ui label { font-size:13px; color:var(--text-light); line-height:1.5; }
.brand-ui .form-group { margin-block:20px; }
.brand-ui :is(.table-wrap,.table-container) { border-radius:var(--radius-small); }
.brand-ui table { font-size:14px; font-variant-numeric:tabular-nums; }
.brand-ui thead th { padding:16px; font-size:12px; text-transform:none; letter-spacing:0; font-weight:600; }
.brand-ui tbody td { padding:18px 16px; line-height:1.55; }
.brand-ui :is(.badge,.daily-status,.home-status,.command-pill) { border-radius:var(--radius-pill); padding:5px 11px; font-size:12px; text-transform:none; letter-spacing:0; }
.brand-ui :is(.badge,.daily-status,.home-status,.command-pill) { white-space:nowrap; }
.brand-ui :is(.home-month-item,.daily-total,.soft-tile,.media-tile,.drawer-kpi,.roi-kpi,.setup-list li,.home-shortcut,.tenant-shortcuts a,.description-panel,.meter-card,.result) { border-radius:var(--radius-small); padding:20px; background:var(--card-soft); border-color:var(--border); }
.brand-ui .home-month { grid-template-columns:1fr; gap:12px; }
.brand-ui :is(.pu-sheet,.bw-card,.portfolio-kpi,.portfolio-tools,.portfolio-table-wrap,.pay-kpi,.fee-property) {
  border-radius:var(--radius-card); background:var(--card); border-color:var(--border); box-shadow:var(--brand-shadow);
}
.brand-ui :is(.pu-button,.bw-button) { border-radius:var(--radius-pill); min-height:44px; padding:11px 20px; white-space:normal; }
.brand-ui .pu-button-primary { background:var(--primary); color:var(--on-primary); }
.brand-ui :is(.portfolio-summary,.pay-kpis) { gap:20px; margin-bottom:24px; }
.brand-ui :is(.portfolio-kpi,.portfolio-tools,.pay-kpi,.bw-card) { padding:24px; }
.brand-ui :is(.pu-sheet-top,.pu-filters,.pu-fee-toolbar,.pay-toolbar) { padding:20px 24px; gap:16px; }
.brand-ui .payments-ui .pay-pick input { padding-inline:38px; }
.brand-ui .payments-ui .pay-pick-toggle { top:8px; }
.brand-ui .payments-ui .pu-search-icon { top:8px; }
.brand-ui .home-month-item { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.brand-ui .home-month-item strong { margin:0; font-size:22px; }
.brand-ui .home-month-item span { font-size:13px; }
.brand-ui .daily-row,.brand-ui .attention-link { padding-block:20px; }
.brand-ui :is(.daily-balance,.alert,.feedback-message,.conversation-message) { border-radius:var(--radius-small); }
.brand-ui .side-drawer { border-radius:24px 0 0 24px; padding:32px; box-shadow:var(--brand-shadow-raised); }
.brand-ui :is(.modal-content,.modal-card,.dialog-panel,dialog) { padding:32px; border-radius:var(--radius-card); background:var(--card); color:var(--text); }
.brand-ui :is(.drawer-backdrop,.modal-overlay,.mobile-overlay) { background:var(--brand-overlay); }







.brand-ui .entry-card{ padding:36px; }


.brand-ui :is(.home-status.danger,.home-kind-payment) { color:var(--danger); background:var(--danger-bg); }
.brand-ui :is(.home-status.warn,.home-kind-issue) { color:var(--warning-text); background:var(--warning-bg); }
.brand-ui.reading-ui :is(.header,.body) { background:var(--card); box-shadow:var(--brand-shadow); padding:32px; }
.brand-ui.reading-ui .intro { background:var(--tint); color:var(--green); }
.brand-ui.reading-ui .btn-submit { background:var(--primary); color:var(--on-primary); }
.brand-ui.reading-ui .total { background:var(--primary); color:var(--on-primary); }



.occupancy-chart { display:flex; align-items:center; flex-wrap:wrap; gap:28px; }
.occupancy-ring { width:156px; height:156px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--chart-income) var(--occupancy,0%),var(--border) 0); }
.occupancy-ring-inner { width:126px; height:126px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--card); }
.occupancy-ring strong { font-size:32px; line-height:1.2; letter-spacing:-.04em; }
.occupancy-ring span { font-size:13px; color:var(--text-light); }
.occupancy-legend { display:grid; gap:12px; padding:0; list-style:none; }
.occupancy-legend li { display:flex; align-items:center; gap:10px; color:var(--text-light); }
.occupancy-dot { width:10px; height:10px; border-radius:50%; background:var(--chart-income); }
.occupancy-dot.is-free { background:var(--border); border:1px solid var(--text-light); }
@media(min-width:1200px) { .brand-ui .home-grid { grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr); } }
@media(max-width:900px) { .brand-ui .home-grid { grid-template-columns:1fr; }  }
@media(max-width:640px) {
  
  
  .brand-ui .content { padding:24px 16px 40px; }
  .brand-ui .topbar { min-height:72px; padding:14px 16px; gap:8px; }
  .brand-ui .topbar-heading { flex-wrap:nowrap; min-width:0; }
  .brand-ui .topbar-heading .page-title { max-width:100%; }
  .brand-ui .topbar-right { display:grid; grid-template-columns:repeat(3,44px); gap:6px; justify-items:center; }
  
  
  
  .brand-ui .home-attention .attention-link { flex-direction:column; align-items:flex-start; }
  .brand-ui .home-panel-head { flex-wrap:wrap; }
  .brand-ui :is(.card,.daily-panel,.home-panel,.section-hero,.dashboard-hero,.profile-panel,.property-panel,.entry-card,.welcome-card) { padding:20px; border-radius:20px; }
  .brand-ui :is(.home-kpi,.stat-card) { padding:18px; }
  .brand-ui :is(.stats-grid,.home-kpis,.home-grid,.daily-layout) { gap:16px; }
  .brand-ui :is(.home-head,.daily-head) { flex-direction:column; align-items:flex-start; margin-bottom:24px; }
  .brand-ui :is(.home-actions,.daily-buttons) { width:100%; gap:8px; }
  .brand-ui :is(.home-actions,.daily-buttons) .btn { flex:1; }
  .brand-ui :is(input,select,textarea) { font-size:16px!important; }
  .brand-ui tbody td,.brand-ui thead th { padding:14px 12px; }
  .brand-ui .side-drawer { padding:24px; }
  
  .brand-ui .entry-header { flex-wrap:wrap; padding-block:16px; }
  .brand-ui .entry-header nav { flex-wrap:wrap; gap:10px; }
  .brand-ui .entry-theme { padding:10px 14px; }
}

/* Layout primitives. They are responsive by construction and configured with custom properties,
   so templates never need inline grid-template-columns (which used to require global mobile overrides). */
.layout-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--card-min,280px)),1fr)); gap:var(--layout-gap,20px); }
.layout-split { display:grid; grid-template-columns:var(--split,minmax(0,1fr) minmax(0,1fr)); gap:var(--layout-gap,20px); }
@media(max-width:900px) { .layout-split { grid-template-columns:minmax(0,1fr); } }
/* Native file inputs get a button that matches the app instead of the browser default. */
.brand-ui input[type=file]::file-selector-button {
  margin-right:12px; padding:8px 14px; border:1px solid var(--brand-line); border-radius:var(--radius-pill);
  background:var(--brand-tint); color:var(--brand-green); font:inherit; font-weight:650; cursor:pointer;
}
.brand-ui input[type=file]::file-selector-button:hover { border-color:var(--brand-input); }
/* Row actions in tables: buttons keep their labels on one line and wrap as a group. */
.table-actions { display:flex; flex-wrap:wrap; gap:6px; }
.table-actions form { margin:0; }
.table-actions .btn { white-space:nowrap; }
/* A clickable list row: title with a secondary line on the left, a value on the right. */
.link-rows { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.link-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid var(--brand-line); border-radius:var(--radius-control); background:var(--brand-surface); color:var(--brand-ink); text-decoration:none; }
.link-row:hover { border-color:var(--brand-input); color:var(--brand-ink); }
.link-row:focus-visible { outline:2px solid var(--brand-focus); outline-offset:2px; }
.link-row-main { display:grid; gap:2px; min-width:0; }
.link-row-main small { color:var(--brand-muted); font-size:13px; }
.link-row-value { white-space:nowrap; }
/* A label/value or title/action row that stacks on phones. */
.split-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.align-end { text-align:right; }
@media(max-width:640px) {
  .split-row { flex-direction:column; align-items:stretch; }
  .align-end { text-align:left; }
}
/* Period switchers stay a compact row of choices; generic mobile rules stack ordinary action groups. */
.brand-ui .section-actions.period-switch { flex-direction:row; flex-wrap:wrap; align-items:center; }
.brand-ui .section-actions.period-switch .btn { width:auto; flex:1 0 auto; }
.brand-ui .daily-buttons .btn { white-space:nowrap; flex:0 0 auto; }
.brand-ui .resident-cards .daily-buttons { margin-top:14px; }
@media(max-width:600px) {
  .brand-ui .core-flow-note { flex-direction:column; gap:4px; }
}
@media(max-width:480px) {
  /* Small enough for amounts like "10 200,00 zł" to fit a two-column card; text values still wrap. */
  /* Same selector as the desktop size rule above, so this one wins on phones. */
  .brand-ui :is(.stat-value,.home-kpi strong) { font-size:clamp(18px,5vw,22px); overflow-wrap:anywhere; }
}
/* Tables that become labelled cards on phones. Cells need data-label for their column name. */
@media(max-width:760px) {
  .table-stack { min-width:0 !important; }
  .table-stack thead { display:none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display:block; width:100%; }
  .table-stack tr { padding:14px 16px; border-bottom:1px solid var(--brand-line); }
  .table-stack tr:last-child { border-bottom:0; }
  .table-stack td { padding:5px 0 !important; border:0 !important; }
  .table-stack td[data-label]::before { content:attr(data-label); display:block; margin-bottom:2px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-muted); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }