:root {
  color-scheme: dark;
  --bg: #0c0d0f;
  --sidebar: #111214;
  --panel: #121417;
  --panel-2: #15171a;
  --border: #25282d;
  --border-soft: #202328;
  --text: #eceef1;
  --muted: #8b929d;
  --muted-2: #aab0b9;
  --accent: #a8b0bd;
  --green: #5dba8a;
  --red: #c77a80;
  --yellow: #b9a36d;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 13px; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }
.sidebar { width: 244px; position: fixed; inset: 0 auto 0 0; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 1040; padding: 16px 12px 12px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 24px; }
.brand-mark { width: 32px; height: 32px; border: 1px solid #454a53; border-radius: 9px; display: grid; place-items: center; font-size: 17px; }
.brand strong, .brand small, .property-name strong, .property-name small, .sidebar-user strong, .sidebar-user small { display: block; }
.brand strong { font-size: 14px; letter-spacing: -.3px; }
.brand small, .property-name small, .sidebar-user small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.property-switch { display: flex; align-items: center; gap: 9px; padding: 10px 8px 18px; color: var(--muted-2); }
.property-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: #202328; color: #d8dce2; font-size: 16px; }
.property-name { min-width: 0; }
.property-name strong { font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-nav { gap: 4px; }
.app-nav .nav-link { display: flex; align-items: center; gap: 12px; min-height: 37px; border-radius: 8px; padding: 9px 10px; color: #b9bec6; font-size: 12px; transition: background .15s, color .15s; }
.app-nav .nav-link i { font-size: 16px; width: 17px; text-align: center; color: #a6adb7; }
.app-nav .nav-link:hover { background: #1a1c20; color: #fff; }
.app-nav .nav-link.active { background: #24272c; color: #fff; }
.app-nav .nav-link.active i { color: #fff; }
.nav-count { margin-left: auto; font-size: 10px; background: #292d33; color: #d9dde3; padding: 2px 6px; border-radius: 5px; }
.sidebar-user { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 14px 6px 3px; border-top: 1px solid var(--border-soft); }
.sidebar-user strong { font-size: 11px; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #292d33; border: 1px solid #3a3f47; color: #e7e9ed; font-size: 11px; font-weight: 600; }
.avatar-sm { width: 29px; height: 29px; font-size: 10px; }
.main-content { margin-left: 244px; min-height: 100vh; }
.topbar { height: 58px; display: flex; align-items: center; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--border); background: rgba(13,14,16,.92); position: sticky; top: 0; z-index: 1020; }
.search-box { height: 34px; width: min(380px, 42vw); display: flex; align-items: center; gap: 10px; padding: 0 11px; border: 1px solid #2b2e34; border-radius: 8px; background: #15171a; color: var(--muted); }
.search-box input { border: 0; outline: 0; background: transparent; color: var(--text); width: 100%; font: inherit; }
.search-box input::placeholder { color: #858c97; }
kbd { color: #aeb4bd; background: #202328; border: 1px solid #30343b; border-radius: 4px; padding: 2px 5px; font-size: 9px; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.online-pill { display: flex; align-items: center; gap: 7px; padding: 7px 11px; color: #9ac7ad; border: 1px solid #26372e; background: #141d18; border-radius: 20px; font-size: 11px; white-space: nowrap; }
.online-pill span { width: 6px; height: 6px; border-radius: 50%; background: #68bd8d; }
.icon-button { border: 0; color: #cbd0d7; background: transparent; font-size: 17px; display: inline-grid; place-items: center; padding: 5px; }
.notification-dot { position: absolute; width: 5px; height: 5px; background: #d0d5dd; border-radius: 50%; right: 4px; top: 4px; }
.user-menu { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: #dce0e5; font-size: 11px; }
.user-menu .bi-chevron-down { color: var(--muted); margin-left: 2px; }
.mobile-menu { display: none; }
.page-content { padding: 26px 28px 18px; max-width: 1700px; margin: 0 auto; }
.welcome-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 20px; }
.eyebrow { color: #7f8792; font-size: 9px; letter-spacing: 1.15px; margin-bottom: 7px; }
h1 { font-size: 23px; letter-spacing: -.7px; font-weight: 600; margin: 0 0 5px; }
.muted { color: var(--muted); }
.date-label { text-align: right; color: var(--muted); font-size: 11px; }
.date-label small { display: block; margin-top: 5px; color: #b4bac3; }
.panel { background: linear-gradient(145deg, #141619, #111316); border: 1px solid var(--border); border-radius: 11px; }
.cashflow-panel { display: grid; grid-template-columns: minmax(0, 1fr) 270px; margin-bottom: 16px; }
.cashflow-main { min-width: 0; padding: 18px 20px 13px; position: relative; }
.section-heading, .panel-heading > div { display: flex; align-items: center; gap: 11px; }
.heading-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #30343b; border-radius: 9px; color: #d1d6de; background: #1c1f24; font-size: 16px; }
h2 { font-size: 13px; font-weight: 600; margin: 0; letter-spacing: -.15px; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.chart-legend { display: flex; gap: 15px; position: absolute; right: 22px; top: 27px; color: #aeb4bd; font-size: 10px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.legend-dot.revenue { background: #8b9c91; }
.legend-dot.expense { background: #747d89; }
.chart-wrap { height: 190px; margin-top: 12px; }
.cashflow-summary { padding: 20px 18px; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.summary-label { color: var(--muted); font-size: 11px; }
.summary-total { font-size: 23px; letter-spacing: -.5px; margin-top: 5px; font-weight: 600; }
.trend { color: #85b89a; font-size: 10px; margin: 5px 0 16px; }
.summary-line { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid #22252a; color: var(--muted-2); font-size: 11px; }
.summary-line strong { color: #e1e4e9; font-weight: 500; white-space: nowrap; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 15px 13px; border-radius: 10px; background: linear-gradient(145deg, #15171a, #121417); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.stat-card:hover { border-color: #41464f; transform: translateY(-1px); }
.stat-icon { width: 37px; height: 37px; flex: 0 0 37px; border-radius: 50%; background: #202328; color: #d2d7df; display: grid; place-items: center; font-size: 16px; }
.stat-content { min-width: 0; flex: 1; }
.stat-content > span { color: #c0c5cd; font-size: 10px; display: block; margin: 2px 0 8px; }
.stat-content > strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; }
.stat-content > strong small { font-size: 10px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 3px; }
.stat-content p { color: var(--muted); font-size: 10px; margin: 5px 0 0; }
.stat-arrow { color: #777f8a; margin: 11px 0 0 auto; font-size: 12px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .95fr); gap: 14px; align-items: start; }
.activities-panel, .quick-panel, .notices-panel, .expense-panel, .billing-panel, .updates-panel { padding: 15px 16px; min-width: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.panel-heading > div > i { color: #b8bec8; font-size: 15px; }
.panel-heading a { font-size: 10px; color: #aeb7c3; white-space: nowrap; }
.panel-heading a i { margin-left: 4px; }
.activity-row { min-height: 54px; display: flex; align-items: center; gap: 11px; border-top: 1px solid #22252a; padding: 8px 0; }
.activity-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: #202328; color: #c3cad3; font-size: 13px; }
.activity-description { min-width: 0; flex: 1; }
.activity-description strong { display: block; font-size: 11px; font-weight: 500; margin-bottom: 4px; }
.activity-description span { display: block; font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-row time, .notice-row time, .update-row time { font-size: 9px; color: var(--muted); white-space: nowrap; }
.status-tag { font-size: 9px; color: #aeb5bf; border: 1px solid #343941; background: #1b1e22; padding: 4px 8px; border-radius: 20px; white-space: nowrap; min-width: 57px; text-align: center; }
.status-open { color: #d19a9e; border-color: #4a3034; background: #24191b; }
.right-column { display: grid; gap: 14px; }
.quick-panel { padding-bottom: 7px; }
.quick-link { display: flex; align-items: center; gap: 11px; padding: 12px 1px; border-top: 1px solid #22252a; color: #d1d5dc; font-size: 11px; }
.quick-link > i:first-child { width: 17px; font-size: 14px; color: #b5bdc8; }
.quick-link span { flex: 1; }
.quick-link > i:last-child { color: #818994; font-size: 11px; }
.quick-link:hover, .notice-row:hover { color: white; }
.notices-panel { padding-bottom: 4px; }
.notice-row { display: flex; align-items: center; gap: 9px; padding: 12px 0; border-top: 1px solid #22252a; font-size: 10px; color: #d0d4db; }
.notice-row > span:nth-child(2) { flex: 1; }
.notice-dot { width: 7px; height: 7px; border-radius: 50%; background: #858d99; flex: 0 0 7px; }
.notice-row i { color: #7f8792; font-size: 10px; }
.bottom-grid { display: grid; grid-template-columns: 1fr 1.1fr 1.4fr; gap: 14px; margin-top: 14px; }
.expense-content { display: flex; align-items: center; justify-content: space-around; gap: 15px; padding: 7px 0 3px; }
.donut-chart { width: 94px; height: 94px; flex: 0 0 94px; border-radius: 50%; background: conic-gradient(#929ba7 0 38%, #6f7885 38% 60%, #aeb5bf 60% 74%, #555d68 74% 86%, #343a43 86% 100%); display: grid; place-items: center; }
.donut-chart > div { width: 61px; height: 61px; border-radius: 50%; background: #131518; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-chart strong { font-size: 14px; }
.donut-chart span { font-size: 8px; color: var(--muted); }
.expense-legend { flex: 1; min-width: 0; display: grid; gap: 8px; }
.expense-legend span { display: flex; align-items: center; gap: 6px; color: #aeb5bf; font-size: 9px; white-space: nowrap; }
.expense-legend i { width: 6px; height: 6px; border-radius: 50%; background: #8e98a5; }
.expense-legend span:nth-child(2) i { background: #707987; }.expense-legend span:nth-child(3) i { background: #adb5c0; }.expense-legend span:nth-child(4) i { background: #555e6a; }.expense-legend span:nth-child(5) i { background: #343a43; }
.expense-legend b { margin-left: auto; font-weight: 500; color: #d0d4db; }
.billing-panel .panel-heading { margin-bottom: 13px; }
.billing-panel .panel-heading > strong { font-size: 11px; font-weight: 500; }
.slim-progress { height: 5px; background: #292d33; border-radius: 8px; }
.slim-progress .progress-bar { background: #8f9caa; border-radius: 8px; }
.billing-status { display: flex; justify-content: space-between; padding: 12px 9px; border: 1px solid #24282d; border-radius: 8px; }
.billing-status > div { display: grid; grid-template-columns: 8px auto; column-gap: 6px; align-items: center; }
.billing-status strong { font-size: 13px; font-weight: 600; }
.billing-status small { grid-column: 2; color: var(--muted); font-size: 9px; margin-top: 3px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-dot.overdue { background: #c77a80; }.status-dot.negotiation { background: #b9a36d; }.status-dot.paid { background: #5dba8a; }
.updates-panel .panel-heading { margin-bottom: 4px; }
.update-row { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-top: 1px solid #22252a; font-size: 10px; color: #c4cad2; }
.update-row > i { color: #9da6b2; font-size: 13px; }
.update-row span { flex: 1; min-width: 0; }
.page-footer { display: flex; justify-content: space-between; color: #606873; font-size: 9px; padding: 20px 2px 2px; }
@media (min-width: 1500px) { .page-content { padding-left: 34px; padding-right: 34px; } .chart-wrap { height: 215px; } }
@media (max-width: 1200px) {
  .sidebar { width: 220px; }.main-content { margin-left: 220px; }
  .page-content { padding: 22px 20px; }.cashflow-panel { grid-template-columns: minmax(0,1fr) 225px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bottom-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.updates-panel { grid-column: 1 / -1; }
}
@media (max-width: 850px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 15px 0 35px #0008; }.sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }.mobile-menu { display: inline-grid; }.topbar { padding: 0 15px; gap: 12px; }
  .search-box { width: min(380px, 45vw); }.user-menu > span:not(.avatar) { display: none; }
  .page-content { padding: 20px 15px; }.cashflow-panel { grid-template-columns: 1fr; }.cashflow-summary { border-left: 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .cashflow-summary .summary-label, .cashflow-summary .summary-total, .cashflow-summary .trend { grid-column: 1 / -1; }
  .summary-line { margin-top: 3px; }.content-grid { grid-template-columns: 1fr; }.right-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .topbar { height: 54px; }.topbar-actions { gap: 8px; }.online-pill { padding: 6px 8px; font-size: 0; gap: 0; }.online-pill span { width: 7px; height: 7px; }
  .search-box { width: auto; flex: 1; }.search-box kbd { display: none; }.date-label { display: none; }
  h1 { font-size: 21px; }.welcome-row { margin-bottom: 16px; }
  .cashflow-main { padding: 15px 12px 10px; }.chart-legend { position: static; margin: 12px 0 -4px 44px; }.chart-wrap { height: 190px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.stat-card { padding: 12px 9px; gap: 8px; }.stat-icon { width: 31px; height: 31px; flex-basis: 31px; font-size: 14px; }.stat-content > strong { font-size: 16px; }.stat-content > span { font-size: 9px; }.stat-content p { font-size: 9px; }
  .stat-arrow { display: none; }.right-column, .bottom-grid { grid-template-columns: 1fr; }.updates-panel { grid-column: auto; }
  .activity-row { flex-wrap: wrap; }.activity-description { width: calc(100% - 45px); flex: initial; }.activity-row time { margin-left: 41px; }.status-tag { margin-left: auto; }
  .page-footer { gap: 10px; flex-wrap: wrap; }.expense-content { justify-content: flex-start; padding-left: 12px; }.user-menu .bi-chevron-down { display: none; }
}

/* ==========================================================================
   CONDOMANAGER DESIGN SYSTEM — GLOBAL COMPONENT OVERRIDES & UNIFICATION
   ========================================================================== */

/* Typography & Base */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Card and Panel Unification */
.card, .bg-dark-card {
  background: linear-gradient(145deg, #15171a, #121417) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 11px !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-soft) !important;
  color: var(--text) !important;
  font-weight: 600;
  padding: 14px 18px !important;
}

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--border-soft) !important;
  color: var(--muted) !important;
}

/* Forms & Inputs */
.form-control, .form-select {
  background-color: #15171a !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  padding: 8px 12px !important;
}

.form-control:focus, .form-select:focus {
  background-color: #171a1e !important;
  border-color: #434954 !important;
  box-shadow: 0 0 0 2px rgba(168, 176, 189, 0.15) !important;
  color: #ffffff !important;
}

.form-control::placeholder {
  color: #727a86 !important;
}

.input-group-text {
  background-color: #1a1d22 !important;
  border: 1px solid var(--border) !important;
  color: var(--muted-2) !important;
  border-radius: 8px !important;
}

.form-check-input {
  background-color: #15171a !important;
  border: 1px solid var(--border) !important;
}

.form-check-input:checked {
  background-color: #5dba8a !important;
  border-color: #5dba8a !important;
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.015);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.035);
  --bs-table-border-color: var(--border-soft);
  color: var(--text) !important;
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--border-soft) !important;
  padding: 11px 14px !important;
}

.table thead th {
  background-color: #15171a !important;
  color: var(--muted-2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Modals */
.modal-content {
  background: linear-gradient(145deg, #14161a, #111316) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 14px 20px !important;
}

/* Dropdowns */
.dropdown-menu, .dropdown-menu-dark {
  background-color: #14171b !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
  padding: 6px !important;
}

.dropdown-item {
  color: var(--muted-2) !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 7px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: #20242a !important;
  color: #ffffff !important;
}

.dropdown-item.active {
  background-color: #2b323d !important;
  color: #ffffff !important;
}

.dropdown-divider {
  border-color: var(--border-soft) !important;
  margin: 4px 0 !important;
}

/* Badges */
.badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}

/* Nav Tabs */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
  gap: 4px;
}

.nav-tabs .nav-link {
  color: var(--muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 9px 16px !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.nav-tabs .nav-link:hover {
  color: var(--text) !important;
}

.nav-tabs .nav-link.active {
  color: #ffffff !important;
  background: transparent !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 600 !important;
}

/* Buttons */
.btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
}

.btn-primary {
  background-color: #242930 !important;
  border-color: #383f4a !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: #313843 !important;
  border-color: #4a5463 !important;
  color: #ffffff !important;
}

.btn-outline-primary {
  border-color: #383f4a !important;
  color: #cdd3dc !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: #20242a !important;
  color: #ffffff !important;
  border-color: #505967 !important;
}

.btn-outline-secondary {
  border-color: var(--border) !important;
  color: var(--muted-2) !important;
}

.btn-outline-secondary:hover {
  background-color: #1a1d22 !important;
  color: #ffffff !important;
}

/* Alerts */
.alert {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  font-size: 12px !important;
}

.alert-success {
  background-color: rgba(93, 186, 138, 0.12) !important;
  border-color: rgba(93, 186, 138, 0.3) !important;
  color: #a4ddbe !important;
}

.alert-danger {
  background-color: rgba(199, 122, 128, 0.12) !important;
  border-color: rgba(199, 122, 128, 0.3) !important;
  color: #e5a4a8 !important;
}

.alert-warning {
  background-color: rgba(185, 163, 109, 0.12) !important;
  border-color: rgba(185, 163, 109, 0.3) !important;
  color: #ded1a7 !important;
}

.alert-info {
  background-color: rgba(168, 176, 189, 0.12) !important;
  border-color: rgba(168, 176, 189, 0.3) !important;
  color: #d1d7e0 !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #25282d;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #393e46;
}