/* =========================================================
   Global Theme Update: Colorful Animated Dashboard
   ========================================================= */
:root {
  --bg: #0c111b;
  --bg-accent: radial-gradient(circle at 25% 15%, #1b2940 0%, #0c111b 70%);
  --panel: #141c27;
  --panel-alt: #192434;
  --text: #e8eef6;
  --text-dim: #9aa9b8;
  --radius: 18px;
  --shadow: 0 12px 28px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --border-glow: 0 0 0 1px rgba(255,255,255,.05), 0 0 0 3px rgba(255,255,255,.02) inset;
  --transition-fast: .25s ease;
  --gradient-speed: 9s;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --gradient-speed: 0s; }
}

/* =========================================================
   Body / Layout
   ========================================================= */
body {
  margin:0;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  min-height:100vh;
  background: var(--bg-accent);
  background-attachment: fixed;
  position:relative;
  overflow-x:hidden;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 75% 80%, rgba(74,0,224,.25), transparent 60%),
    radial-gradient(circle at 10% 50%, rgba(0,160,255,.18), transparent 55%);
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:-1;
}

a { color:#74b8ff; text-decoration:none; }
a:hover { text-decoration:underline; }

.content {
  padding:26px clamp(16px,3vw,40px) 60px;
  max-width:1400px;
  margin:0 auto;
}

/* =========================================================
   Header
   ========================================================= */
.app-header {
  background:#111923b0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  box-shadow: var(--shadow);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.logo-wrap {
  display:flex; align-items:center; gap:16px;
}

/* Replaced animated gradient block with real logo image */
.logo-link { display:inline-flex; align-items:center; justify-content:center; }
.logo-img {
  width:58px; height:58px;
  border-radius:14px;
  background:#0f1822;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);
  padding:6px;
  object-fit:contain;
}
.logo-img:hover {
  box-shadow:0 10px 28px -12px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12);
  transform:translateY(-2px);
  transition:var(--transition-fast);
}

/* Remove old .logo-anim if still present */
.logo-anim { display:none; }

.brand {
  font-size:1.05rem;
  letter-spacing:.7px;
  background: linear-gradient(90deg,#ffce55,#ffa645,#ff7c72,#ff62bd,#8b66ff,#53c2ff,#3dd9c5);
  -webkit-background-clip:text;
  color:transparent;
  animation: fogFlow 18s linear infinite;
  background-size: 400% 100%;
}
@keyframes fogFlow {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

.main-nav a {
  margin:4px 10px;
  padding:8px 15px;
  font-size:.8rem;
  letter-spacing:.5px;
  background:#1d2733;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  position:relative;
  overflow:hidden;
  transition:var(--transition-fast);
}
.main-nav a::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg, rgba(255,255,255,.08), transparent 45%);
  opacity:0;
  transition:var(--transition-fast);
}
.main-nav a:hover::before { opacity:1; }
.main-nav a:hover { background:#253140; }

.main-nav .logout { background:#40202a; border-color:rgba(255,255,255,.1); }
.main-nav .logout:hover { background:#582d3b; }

/* =========================================================
   Cards & Panels
   ========================================================= */
.grid.stats {
  display:grid;
  gap:22px;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  margin-bottom:32px;
}

.card {
  background: var(--panel);
  border-radius: var(--radius);
  padding:18px 20px 22px;
  position:relative;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  isolation:isolate;
  transition:.35s cubic-bezier(.16,.8,.3,1);
}

.card::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(130deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.08), transparent 55%);
  mix-blend-mode:overlay;
  opacity:.55;
  pointer-events:none;
}

.card:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 14px 38px -10px rgba(0,0,0,.75),0 4px 12px rgba(0,0,0,.4);
  border-color:rgba(255,255,255,.12);
}

.stat h3 {
  font-size:.85rem;
  margin:0 0 14px;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--text-dim);
}

.stat .big {
  font-size:2.15rem;
  margin:0;
  font-weight:700;
  line-height:1.05;
  letter-spacing:.5px;
  background:linear-gradient(95deg,#fff,#e8eef6 45%,#c9d4df);
  -webkit-background-clip:text;
  color:transparent;
}

/* =========================================================
   Colorful Stat Variants (Animated Gradients)
   ========================================================= */
.stat-total {
  background: linear-gradient(145deg,#2d2957,#342e75,#442d98,#272d5b);
  background-size:240% 240%;
  animation: gradientShift var(--gradient-speed) ease-in-out infinite;
}
.stat-occupied {
  background: linear-gradient(145deg,#1d4c3b,#1f755b,#2ea784,#1c5d48);
  background-size:240% 240%;
  animation: gradientShift var(--gradient-speed) ease-in-out infinite reverse;
}
.stat-active-tenants {
  background: linear-gradient(145deg,#163d55,#1c5a78,#2988ac,#11486a);
  background-size:240% 240%;
  animation: gradientShift var(--gradient-speed) ease-in-out infinite;
}

/* legacy income card (kept if referenced) */
.stat-income {
  background: linear-gradient(145deg,#523819,#7a541f,#b0711f,#d6972d,#523819);
  background-size:250% 250%;
  animation: gradientPulse 11s linear infinite;
}

/* NEW distinct cards */
.stat-income-total {
  background: linear-gradient(145deg,#262b33,#2f3947,#3e5163,#496b82,#2a3440);
  background-size:240% 240%;
  animation: gradientShift 10s ease-in-out infinite;
}
.stat-deposit {
  background: linear-gradient(145deg,#40263e,#5b2f57,#803d78,#a34a98,#40263e);
  background-size:250% 250%;
  animation: gradientPulse 12s linear infinite;
}
.stat-expenses {
  background: linear-gradient(145deg,#4a1b2c,#7b2340,#a83354,#c74e6c,#4a1b2c);
  background-size:250% 250%;
  animation: gradientPulse 13s linear infinite;
}
.stat-net {
  background: linear-gradient(145deg,#203a4d,#305f7c,#3e81a7,#4ba3d1,#203a4d);
  background-size:250% 250%;
  animation: gradientPulse 12s linear infinite reverse;
}
/* NEW: Extra Income card variant */
.stat-extra-income {
  background: linear-gradient(145deg,#4b2a5f,#6a3b86,#8e4fb0,#b064d4,#4b2a5f);
  background-size:250% 250%;
  animation: gradientPulse 12s linear infinite;
}

@keyframes gradientShift {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes gradientPulse {
  0%,100% { background-position:0% 50%; filter:brightness(1); }
  50% { background-position:100% 50%; filter:brightness(1.15); }
}

/* Mini occupancy progress */
.mini-progress {
  position:relative;
  margin-top:6px;
  background:rgba(255,255,255,.12);
  border-radius:20px;
  height:8px;
  overflow:hidden;
}
.mini-bar {
  height:100%;
  width:var(--pct);
  background:linear-gradient(90deg,#1dd1a1,#10ac84,#0e8d6d);
  transition:width .6s cubic-bezier(.16,.8,.3,1);
}
.mini-label {
  position:absolute;
  top:-20px;
  right:4px;
  font-size:.6rem;
  letter-spacing:.5px;
  color:rgba(255,255,255,.85);
}

/* Panels */
.panel {
  background: var(--panel-alt);
  border-radius: var(--radius);
  padding:20px 22px 30px;
  margin-bottom:34px;
  border:1px solid rgba(255,255,255,.06);
  position:relative;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%);
  opacity:.35;
  pointer-events:none;
}

/* =========================================================
   Tables
   ========================================================= */
table {
  width:100%;
  border-collapse:collapse;
  font-size:.78rem;
  letter-spacing:.3px;
}
thead { background:#223040; }
th, td {
  padding:9px 10px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.05);
}
tbody tr { background:#182430; transition:.25s; }
tbody tr:nth-child(odd) { background:#15202b; }
tbody tr:hover { background:#233142; }

/* Small helper for inline notes under amounts (e.g., extra income desc) */
.subtle-note {
  display:block;
  font-size:.55rem;
  opacity:.75;
  margin-top:2px;
}

/* =========================================================
   Forms / Inputs / Buttons
   ========================================================= */
label {
  display:block;
  margin-bottom:10px;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--text-dim);
}

input, select, textarea {
  width:100%;
  background:#101a24;
  color:#dfe7ef;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:10px 12px;
  font-size:.8rem;
  outline:none;
  transition:var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
  background:#142332;
  border-color:#4aa3ff;
  box-shadow:0 0 0 3px rgba(74,163,255,.25);
}

.inline { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }

button, .btn {
  background:linear-gradient(100deg,#ff8a00,#e52e71,#6a4dff,#00c6ff,#ff8a00);
  background-size:300% 100%;
  animation: fogFlow 10s linear infinite;
  color:#fff;
  font-weight:600;
  border:none;
  padding:10px 18px;
  border-radius:12px;
  cursor:pointer;
  font-size:.8rem;
  letter-spacing:.5px;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7),0 3px 8px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
}
button:hover, .btn:hover {
  filter:brightness(1.12);
  transform:translateY(-2px);
}

.danger { color:#ff98a8; font-weight:600; }

/* Flash messages */
.flash {
  padding:14px 16px;
  border-radius:14px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.4px;
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
}
.flash-success {
  background:linear-gradient(135deg,#103a27,#1d5b3a,#2e7e52);
  border:1px solid #2e7e52;
  color:#78e9b0;
}
.flash-error {
  background:linear-gradient(135deg,#441c21,#66242b,#8c2f37);
  border:1px solid #8c2f37;
  color:#ff8d97;
}

/* Currency formatting */
.currency { font-variant-numeric: tabular-nums; }

/* Trend chart */
.trend-chart {
  display:flex; align-items:flex-end; gap:10px;
  height:170px; padding:14px;
  background:#121d29;
  border-radius:14px;
  overflow-x:auto;
  border:1px solid rgba(255,255,255,.06);
}
.trend-bar {
  width:42px;
  background:linear-gradient(160deg,#ff8a00,#e52e71,#6a4dff,#00c6ff);
  background-size:180% 180%;
  animation: gradientShift 9s ease-in-out infinite;
  border-radius:10px 10px 0 0;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.7);
  position:relative;
}
.trend-bar span {
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:.55rem;
  font-weight:600;
  letter-spacing:.3px;
}

/* Footer */
.footer {
  text-align:center;
  padding:26px 10px 40px;
  font-size:.65rem;
  color:#7e8c99;
}

/* =========================================================
   Login Page
   ========================================================= */
.login-body {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
  background:linear-gradient(140deg,#081118,#0f2030,#152b43,#1d3552);
  color:#fff;
}
.login-container {
  width:360px;
  background:#152131;
  padding:36px 40px 48px;
  border-radius:22px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7), 0 4px 14px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
}
.login-container::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.07), rgba(255,255,255,0) 50%);
  mix-blend-mode:overlay;
  pointer-events:none;
}
.login-logo {
  width:130px; height:130px; margin:0 auto 14px;
  border-radius:50%;
  background:conic-gradient(from 90deg,#ff8a00,#e52e71,#6a4dff,#00c6ff,#ff8a00);
  animation: spinHue 7s linear infinite, pulseGlow 4s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(255,255,255,.07),0 0 38px -8px rgba(255,255,255,.3),0 14px 30px -10px rgba(0,0,0,.7);
}

@keyframes spinHue { 0% { filter:hue-rotate(0deg); } 100% { filter:hue-rotate(360deg); } }
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 0 2px rgba(255,255,255,.08),0 8px 24px -6px rgba(0,0,0,.7),0 0 22px -4px rgba(109,85,255,.3); }
  50% { box-shadow:0 0 0 2px rgba(255,255,255,.1),0 12px 30px -6px rgba(0,0,0,.75),0 0 28px -4px rgba(109,85,255,.7); }
}

/* =========================================================
   Reports (Print Enhancements)
   ========================================================= */
.print-only { display:none; }
.screen-only { display:block; }

.status-paid     { background:#163d55; }
.status-partial  { background:#523819; }
.status-unpaid   { background:#4a1b2c; }
.status-overpaid { background:#1d4c3b; }

@media print {
  body { background:#fff !important; }
  body::before { display:none !important; }
  header.app-header, nav.main-nav, .footer, .content > h2 { display:none !important; }
  .no-print, #controls-single, #controls-all { display:none !important; }
  .panel { box-shadow:none !important; background:#fff !important; border:none !important; padding:0 !important; margin:0 !important; }
  .screen-only { display:none !important; }
  .print-only { display:block !important; }

  .print-header {
    background: linear-gradient(135deg,#2d2957,#1f755b,#163d55,#7b2340);
    color:#fff !important;
    padding:12px 14px;
    border-radius:8px;
    margin:0 0 12px 0;
  }
  .print-header .ph-title {
    font-size:18px;
    font-weight:800;
    letter-spacing:.3px;
    margin:0 0 4px 0;
  }
  .print-header .ph-sub {
    font-size:12px;
    margin:0;
  }

  .flat-print-header {
    background: linear-gradient(135deg,#1c2a3a,#0e5f6a,#0f3f63,#6a1f36);
    color:#fff !important;
    padding:8px 10px;
    border-radius:6px;
    font-weight:800;
    margin:14px 0 8px 0;
  }

  #report-panel table, #report-allflats table,
  #report-panel thead, #report-allflats thead,
  #report-panel tbody, #report-allflats tbody,
  #report-panel tr, #report-allflats tr,
  #report-panel td, #report-allflats td,
  #report-panel th, #report-allflats th {
    color:#000 !important;
    background:#fff !important;
    border-color:#000 !important;
  }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .status-paid     { background:#e8f5e9 !important; }
  .status-partial  { background:#fff8e1 !important; }
  .status-unpaid   { background:#ffebee !important; }
  .status-overpaid { background:#e3f2fd !important; }

  .flat-block { page-break-inside: avoid; }
  .flat-block + .flat-block { page-break-before: always; }

  @page { margin:12mm; }
}

/* =========================================================
   Responsive Tweaks
   ========================================================= */
@media (max-width:880px) {
  .grid.stats { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); }
  .stat .big { font-size:1.8rem; }
  .main-nav a { margin:3px 6px; padding:7px 12px; }
}
@media (max-width:560px) {
  .content { padding:20px 16px 54px; }
  .card { padding:16px 16px 20px; }
  .stat h3 { font-size:.7rem; }
  .stat .big { font-size:1.6rem; }
}