/* ==========================================================================
   Market Rent Management — "Souq" theme
   Deep teal + brass gold + warm sand, Marcellus display / Plus Jakarta body
   ========================================================================== */
:root {
  --deep: #0e3a3d;
  --deep-2: #0a2b2e;
  --teal: #17565b;
  --gold: #c9a24b;
  --gold-soft: #f3d491;
  --sand: #f5f2ea;
  --card-line: #e6dfcf;
  --ink: #22302f;
  --muted: #6d7b76;
  --paid: #1e7f4f;
  --unpaid: #b3362c;
}

body {
  background: var(--sand);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .925rem;
}
h1, h2, h3, h4, h5, .display-font, .brand-name {
  font-family: "Marcellus", Georgia, serif;
  letter-spacing: .01em;
}

/* ---------------- Sidebar ---------------- */
.sidebar {
  width: 252px;
  background: linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%);
  color: #dbe6e2;
  min-height: 100vh;
}
@media (min-width: 992px) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; overflow-y: auto; }
  .main { margin-left: 252px; }
}
.sidebar .brand {
  padding: 1.15rem 1.2rem 1rem;
  border-bottom: 1px solid rgba(201, 162, 75, .28);
}
.sidebar .brand .star { color: var(--gold); }
.sidebar .brand-logo { width: 100%; max-width: 170px; height: auto; display: block; border-radius: .3rem; }
.sidebar .brand-name { color: #fff; font-size: 1.12rem; line-height: 1.25; }
.sidebar .brand-sub { color: var(--gold-soft); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }

.sidebar .nav-section {
  padding: .95rem 1.2rem .3rem;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(219, 230, 226, .5);
}
.sidebar .nav-link {
  color: #b9cdc8;
  padding: .5rem 1.2rem;
  font-size: .875rem;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.sidebar .nav-link i { width: 1.1rem; text-align: center; color: rgba(201, 162, 75, .8); }
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.sidebar .nav-link.active {
  color: var(--gold-soft);
  background: rgba(201, 162, 75, .14);
  border-left-color: var(--gold);
}
.sidebar .badge { font-size: .62rem; }

/* ---------------- Topbar ---------------- */
.topbar {
  background: #fffdf8;
  border-bottom: 1px solid var(--card-line);
  padding: .7rem 1.4rem;
}
.role-chip {
  background: rgba(201, 162, 75, .16);
  color: #7c6320;
  border: 1px solid rgba(201, 162, 75, .45);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .18rem .6rem;
}

/* ---------------- Content ---------------- */
.main { min-height: 100vh; display: flex; flex-direction: column; }
.content { padding: 1.4rem 1.6rem 2.2rem; flex: 1; }
.page-title { font-size: 1.45rem; margin-bottom: 0; }
.page-sub { color: var(--muted); font-size: .85rem; }

.card {
  border: 1px solid var(--card-line);
  border-radius: .8rem;
  box-shadow: 0 1px 2px rgba(34, 48, 47, .04);
}
.card-header {
  background: #fbf8f1;
  border-bottom: 1px solid var(--card-line);
  font-family: "Marcellus", Georgia, serif;
  font-size: 1rem;
}

/* Stat cards: thin gold top rule = the theme signature */
.stat-card { border-top: 3px solid var(--gold); background: #fffdf8; }
.stat-card .stat-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat-card .stat-value { font-family: "Marcellus", Georgia, serif; font-size: 1.6rem; color: var(--deep); line-height: 1.15; }
.stat-card .stat-icon {
  width: 42px; height: 42px; border-radius: .65rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 86, 91, .1); color: var(--teal); font-size: 1.05rem;
}
.stat-card.alert-tone { border-top-color: var(--unpaid); }
.stat-card.alert-tone .stat-icon { background: rgba(179, 54, 44, .1); color: var(--unpaid); }

/* Alert widgets */
.widget-card { border-radius: .8rem; }
.widget-card .card-header { display: flex; justify-content: space-between; align-items: center; }
.widget-card .list-group-item { border-color: #f0ead9; font-size: .85rem; }

/* Tables */
.table { --bs-table-striped-bg: #faf7ef; font-size: .875rem; }
.table thead th {
  background: var(--deep); color: #f2ede0; font-weight: 600;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  border-color: var(--deep);
}
.table > :not(caption) > * > * { padding: .6rem .75rem; vertical-align: middle; }
.row-paid { background: rgba(30, 127, 79, .08) !important; }
.row-unpaid { background: rgba(179, 54, 44, .07) !important; }

/* Status badges */
.badge-status { font-weight: 600; font-size: .72rem; padding: .38em .65em; border-radius: .5rem; }
.badge-vacant { background: #e7f0ec; color: #2c6e51; border: 1px solid #bcd9cb; }
.badge-occupied { background: #123f43; color: #f5efe0; }
.badge-maintenance { background: #f4e3c2; color: #7c5a12; border: 1px solid #e2c98f; }
.badge-notice { background: #fbe9e7; color: #a03d33; border: 1px solid #efc4bf; }
.badge-paid { background: #1e7f4f; color: #fff; }
.badge-unpaid { background: #b3362c; color: #fff; }
.badge-partial { background: #fff3cd; color: #7c5a12; border: 1px solid #e2c98f; }

/* Buttons */
.btn-brand { background: var(--deep); border-color: var(--deep); color: #f5efe0; }
.btn-brand:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #2e230a; font-weight: 600; }
.btn-gold:hover { background: #b98a2f; border-color: #b98a2f; color: #fff; }
.btn-outline-brand { border-color: var(--deep); color: var(--deep); }
.btn-outline-brand:hover { background: var(--deep); color: #fff; }

/* Forms */
.form-label { font-weight: 600; font-size: .82rem; color: #3c4a46; }
.form-control:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(201, 162, 75, .2);
}
.required::after { content: " *"; color: var(--unpaid); }

/* Tenant document thumbnails */
.doc-thumb { width: 100%; max-height: 150px; object-fit: cover; border-radius: .55rem; border: 1px solid var(--card-line); }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--card-line); }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.avatar-fallback {
  background: rgba(23, 86, 91, .12); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}

/* Activity feed */
.activity-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.activity-dot.payment { background: rgba(30, 127, 79, .12); color: var(--paid); }
.activity-dot.fine { background: rgba(179, 54, 44, .12); color: var(--unpaid); }

/* Login page */
.login-wrap {
  min-height: 100vh;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(201, 162, 75, .25), transparent 60%),
    linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 70%);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.login-card { max-width: 420px; width: 100%; border: 1px solid rgba(201, 162, 75, .4); border-radius: 1rem; overflow: hidden; }

.footer-note { color: var(--muted); font-size: .75rem; padding: .8rem 1.6rem; border-top: 1px solid var(--card-line); background: #fbf8f1; }

@media print {
  .sidebar, .topbar, .no-print, .footer-note { display: none !important; }
  .main { margin-left: 0 !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}