/* ===== STAT CARDS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:24px}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r3);
  padding:22px 22px 20px;
  position:relative;overflow:hidden;
  box-shadow:var(--sh1);
  transition:transform .2s,box-shadow .2s,border-color .2s;
  cursor:default;
  /* Container query target — lets .stat-value scale with the card's actual
     width so big numbers like €201,600.00 never need to be ellipsis-clipped. */
  container-type:inline-size;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transition:opacity .3s;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--border-s)}
.stat-card:hover::before{opacity:1}
/* Value scales with the card's inline width via container query units.
   At 220px card → ~1.32rem; at 320px card → ~1.92rem; at 400px → ~2.4rem.
   No ellipsis truncation — the font shrinks to fit instead.
   Fallback: clamp() with vw units in case the browser ignores cqi. */
.stat-value{
  font-size:clamp(1.1rem, 6cqi, 2.1rem);
  font-weight:700;color:var(--t1);margin-bottom:6px;line-height:1.05;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@supports not (container-type: inline-size) {
  .stat-value{font-size:clamp(1.1rem, 2.2vw, 2.1rem);}
}
.stat-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--t3)}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ===== CHART GRID ===== */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:24px}
.chart-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r3);
  padding:22px;
  box-shadow:var(--sh1);
  transition:var(--transition);
}
.chart-card:hover{border-color:var(--border-s);box-shadow:var(--sh2)}
.chart-card-title{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--gold);margin-bottom:18px}
.chart-canvas-wrap{position:relative;height:210px}
@media(max-width:768px){.chart-grid{grid-template-columns:1fr}}

/* ===== CARDS ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r3);
  padding:22px;margin-bottom:16px;
  box-shadow:var(--sh1);
}
.card-title{
  font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.9px;color:var(--t3);margin-bottom:18px;
  display:flex;align-items:center;gap:8px;
}
@media(max-width:768px){.card{padding:18px;margin-bottom:12px}}

/* ===== CONTENT GRID ===== */
.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
@media(max-width:768px){.content-grid{grid-template-columns:1fr;gap:12px}}

/* ===== SECTION DIVIDER ===== */
.section-divider{display:flex;align-items:center;gap:12px;margin:24px 0 18px}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.section-divider span{font-size:9px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:2px}

/* ===== OWNER PROPERTY CARDS ===== */
.owner-property-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r3);padding:20px;margin-bottom:14px;
  box-shadow:var(--sh1);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.owner-property-card:hover{transform:translateY(-1px);box-shadow:var(--sh2);border-color:var(--border-s)}
.owner-property-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.owner-property-name{font-weight:800;font-size:15px;color:var(--t1)}
.owner-property-status{font-size:10px;font-weight:800;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.8px}
.owner-property-detail{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12.5px;margin-bottom:10px}
.owner-property-detail span{color:var(--t3)}
.owner-property-detail strong{color:var(--t2);font-weight:600}
.income-breakdown{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.income-breakdown-row{display:flex;justify-content:space-between;padding:5px 0;font-size:12.5px;border-bottom:1px solid var(--over)}
.income-breakdown-row:last-child{border-bottom:none;font-weight:800;padding-top:10px;font-size:14px}
.income-breakdown-row .label{color:var(--t3)}
.income-breakdown-row .value{font-weight:600;color:var(--t2)}
.income-breakdown-row .value.positive{color:var(--green)}
.income-breakdown-row .value.negative{color:var(--red)}

/* ===== TENANT RENT CARD ===== */
.tenant-rent-card{
  background:var(--card);
  border:2px solid var(--gold);border-radius:var(--r3);
  padding:34px;text-align:center;margin-bottom:20px;
  max-width:420px;margin-left:auto;margin-right:auto;
  position:relative;overflow:hidden;box-shadow:var(--sh2);
}
.tenant-rent-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rent-amount{font-family:var(--fn);font-size:3.2rem;font-weight:700;color:var(--gold);margin:14px 0;letter-spacing:-.01em}

/* ===== DOCUMENTS ===== */
.document-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.document-item{
  background:var(--surface);border:1px solid var(--border);
  padding:18px 12px;border-radius:var(--r2);
  text-align:center;cursor:pointer;transition:var(--transition);position:relative;
}
.document-item:hover{background:var(--card);border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh2)}
.document-icon{font-size:2rem;margin-bottom:8px}
.document-name{font-weight:700;color:var(--t1);font-size:12px}

/* ===== USER TABLE ===== */
.user-table{width:100%;border-collapse:collapse}
.user-table th{
  background:var(--surface);padding:10px 14px;text-align:left;
  font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:1.1px;color:var(--t3);border-bottom:1px solid var(--border);
}
.user-table td{padding:11px 14px;border-bottom:1px solid var(--over-h);font-size:13px;color:var(--t2)}
.user-table tr:hover td{background:var(--over)}

/* ===== CLIENTS TAB ===== */
.client-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r2);
  padding:16px;transition:var(--transition);
}
.client-card:hover{border-color:var(--border-s);box-shadow:var(--sh1)}

/* ===== USER MANAGEMENT ===== */
.user-filter-bar{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.filter-pill{
  padding:5px 14px;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--t3);cursor:pointer;
  font-size:10px;font-weight:800;font-family:var(--f);
  letter-spacing:.6px;text-transform:uppercase;transition:var(--transition);
}
.filter-pill.active{background:color-mix(in srgb,var(--highlight-text) 12%,transparent);color:var(--highlight-text);border-color:var(--highlight-text)}
.filter-pill:not(.active):hover{border-color:var(--t3);color:var(--t2)}
.user-section{margin-bottom:4px}
.user-section-hdr{display:flex;align-items:center;gap:10px;padding:12px 0 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.user-section-hdr-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;color:var(--t3)}
.user-section-hdr-count{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1px 8px;font-size:10px;color:var(--t3)}
.user-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:var(--r2);transition:background .15s;border:1px solid transparent}
.user-row:hover{background:var(--surface);border-color:var(--border)}
.user-avatar-md{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;letter-spacing:.5px}
.ua-staff{background:rgba(0,85,184,.1);color:var(--blue)}
.ua-owner{background:var(--gold-d);color:var(--gold)}
.ua-tenant{background:var(--green-d);color:var(--green)}
.user-row-info{flex:1;min-width:0}
.user-row-name{font-weight:700;font-size:13px;color:var(--t1);display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.3}
.user-row-sub{font-size:11px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-last-login:hover{color:var(--gold);text-decoration:underline}
.user-row-actions{display:flex;gap:5px;align-items:center;flex-shrink:0}
.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:3px}
.status-dot.active{background:var(--green)}
.status-dot.inactive{background:var(--red)}
.badge-master{background:var(--gold-d);color:var(--gold);border:1px solid var(--gold);font-size:9px;padding:3px 8px;border-radius:8px;font-weight:800;letter-spacing:1px}
.badge-self{font-size:10px;color:var(--t3);font-weight:400}
.badge-role{font-size:10px;padding:3px 10px;border-radius:8px;font-weight:700;flex-shrink:0;letter-spacing:.3px}
.badge-role.staff{background:var(--blue-d);color:var(--blue)}
.badge-role.owner{background:var(--gold-d);color:var(--gold)}
.badge-role.tenant{background:var(--green-d);color:var(--green)}
.btn-icon{
  width:30px;height:30px;border-radius:var(--r1);
  border:1px solid var(--border);background:var(--surface);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:var(--transition);color:var(--t3);line-height:1;
}
.btn-icon:hover{background:var(--surface-alt);color:var(--t1);border-color:var(--border-s)}
.btn-icon.del{color:var(--red)}
.btn-icon.del:hover{background:var(--red-d);border-color:var(--red)}
.btn-icon.warn:hover{background:var(--amber-d);border-color:var(--amber)}
.btn-icon.gold{color:var(--gold)}
.btn-icon.gold:hover{background:var(--gold-d);border-color:var(--gold)}
.user-row.inactive-row{opacity:.38}
.user-row.inactive-row:hover{opacity:.7}
@media(max-width:768px){
  .user-row{flex-wrap:wrap;gap:8px;padding:12px 10px}
  .user-row-info{flex:1 1 calc(100% - 56px);min-width:0}
  .user-row-sub{white-space:normal;word-break:break-all;font-size:10px}
  .user-row-actions{width:100%;justify-content:flex-end;gap:6px;padding-top:4px;border-top:1px solid var(--border)}
  .btn-icon{width:34px;height:34px;font-size:14px}
  .user-filter-bar{gap:5px}
  .filter-pill{font-size:9px;padding:5px 10px}
  .user-section-hdr{padding:10px 0 6px}
}

/* ===== STATUS BADGES ===== */
.status-paid,.status-active,.status-responded{
  background:var(--green-d);color:var(--green);
  border:1px solid var(--green);
  padding:3px 10px;border-radius:20px;display:inline-block;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
}
.status-unpaid,.status-inactive{
  background:var(--red-d);color:var(--red);
  border:1px solid var(--red);
  padding:3px 10px;border-radius:20px;display:inline-block;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
}
.status-new,.status-pending{
  background:var(--amber-d);color:var(--amber);
  border:1px solid var(--amber);
  padding:3px 10px;border-radius:20px;display:inline-block;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
}

/* ===== PROPERTY ITEMS ===== */
.property-item{
  background:var(--surface);padding:14px 16px;border-radius:var(--r2);
  margin-bottom:10px;border-left:2px solid var(--border-s);
  transition:var(--transition);
}
.property-item:hover{background:var(--surface-alt);box-shadow:var(--sh1)}

/* ===== TRANSACTIONS ===== */
.transaction-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--over-h);align-items:center}
.transaction-desc{font-weight:700;font-size:13px;color:var(--t1)}
.transaction-date{color:var(--t3);font-size:11px;margin-top:2px}
.transaction-amount{font-weight:800;font-size:14px}
.amount-positive{color:var(--green)}
.amount-negative{color:var(--red)}
@media(max-width:768px){.transaction-item{flex-direction:column;gap:6px;align-items:flex-start}}