/*
 * Globalhome Finance ISP - Brand Theme v4
 * Warna utama diambil dari logo Globalhome:
 * Biru utama #0E6CE2, biru korporat #123C80,
 * hijau utama #21DB6B, hijau korporat #128C4B.
 */
:root{
  --gh-blue-950:#071f46;
  --gh-blue-900:#0a2d63;
  --gh-blue-800:#123c80;
  --gh-blue-700:#0b55b6;
  --gh-blue-600:#0e6ce2;
  --gh-blue-500:#2181eb;
  --gh-blue-100:#e9f3ff;
  --gh-blue-50:#f4f9ff;
  --gh-green-800:#0e713d;
  --gh-green-700:#128c4b;
  --gh-green-600:#18b85c;
  --gh-green-500:#21db6b;
  --gh-green-100:#dcf9e8;
  --gh-green-50:#f0fcf5;
  --gh-bg:#f4f8fc;
  --gh-surface:#ffffff;
  --gh-surface-soft:#f8fbff;
  --gh-border:#d9e5f2;
  --gh-border-strong:#c8d8e9;
  --gh-text:#102a4d;
  --gh-heading:#082652;
  --gh-muted:#6f849f;
  --gh-muted-2:#91a2b7;
  --gh-danger:#dc3545;
  --gh-danger-soft:#fff0f2;
  --gh-warning:#d99000;
  --gh-warning-soft:#fff8e6;
  --gh-info:#1989d8;
  --gh-shadow:0 8px 28px rgba(18,60,128,.08);
  --gh-shadow-soft:0 3px 12px rgba(18,60,128,.055);
  --gh-radius:14px;
  --gh-gradient:linear-gradient(135deg,var(--gh-blue-600) 0%,var(--gh-blue-700) 52%,var(--gh-green-700) 100%);
  --gh-gradient-soft:linear-gradient(135deg,#eef6ff 0%,#f7fffa 100%);

  /* Bootstrap brand alignment */
  --bs-primary:var(--gh-blue-600);
  --bs-primary-rgb:14,108,226;
  --bs-success:var(--gh-green-700);
  --bs-success-rgb:18,140,75;
  --bs-link-color:var(--gh-blue-600);
  --bs-link-hover-color:var(--gh-blue-800);
  --bs-body-color:var(--gh-text);
  --bs-body-bg:var(--gh-bg);
  --bs-border-color:var(--gh-border);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--gh-bg);
  color:var(--gh-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--gh-blue-600)}
a:hover{color:var(--gh-blue-800)}
::selection{background:rgba(33,219,107,.25);color:var(--gh-heading)}

/* ---------- Application shell ---------- */
.app-shell{min-height:100vh}
.sidebar{
  width:250px;
  background:linear-gradient(180deg,var(--gh-blue-950) 0%,var(--gh-blue-900) 62%,#092751 100%);
  color:#fff;
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  z-index:1030;
  overflow:auto;
  border-right:1px solid rgba(33,219,107,.12);
  box-shadow:7px 0 28px rgba(7,31,70,.08);
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--gh-blue-600),var(--gh-green-500));
  z-index:1;
}
.sidebar-brand{
  position:relative;
  padding:18px 16px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand img{
  width:100%;
  height:76px;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
  padding:7px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.sidebar-label{
  font-size:.66rem;
  letter-spacing:.20em;
  color:#8ff0b4;
  font-weight:800;
  text-align:center;
  margin-top:11px;
  text-transform:uppercase;
}
.sidebar .nav{padding-left:0;padding-right:0}
.sidebar .nav-link{
  color:#dce9f8;
  border-radius:10px;
  margin:4px 10px;
  padding:11px 14px;
  font-weight:650;
  font-size:.91rem;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.sidebar .nav-link i{width:20px;text-align:center;font-size:1rem;color:#a9c6e8}
.sidebar .nav-link:hover{
  background:rgba(14,108,226,.16);
  color:#fff;
  border-color:rgba(74,161,255,.12);
  transform:translateX(2px);
}
.sidebar .nav-link:hover i{color:#63e797}
.sidebar .nav-link.active{
  background:linear-gradient(100deg,var(--gh-blue-600) 0%,#1572d7 64%,var(--gh-green-700) 135%);
  color:#fff;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 8px 22px rgba(14,108,226,.22),inset 3px 0 0 var(--gh-green-500);
}
.sidebar .nav-link.active i{color:#c5ffda}
.sidebar-footer{font-size:.69rem;color:#86a3c4;padding:18px 20px}
.main-area{margin-left:250px;min-height:100vh}
.topbar{
  height:60px;
  background:linear-gradient(90deg,var(--gh-blue-950) 0%,var(--gh-blue-900) 72%,#0a3567 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  position:sticky;
  top:0;
  z-index:1020;
  box-shadow:0 3px 14px rgba(7,31,70,.16);
  border-bottom:1px solid rgba(33,219,107,.28);
}
.topbar-title{font-weight:800;letter-spacing:-.01em}
.content{padding:28px 26px 34px}
.content-wrap{max-width:1240px;margin:0 auto}

/* ---------- Typography / page heading ---------- */
.eyebrow{
  font-size:.70rem;
  letter-spacing:.20em;
  font-weight:850;
  color:var(--gh-green-700);
  text-transform:uppercase;
}
.page-title{
  font-size:1.85rem;
  font-weight:850;
  letter-spacing:-.035em;
  color:var(--gh-heading);
}
.page-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:22px;
}
.page-head::after{content:"";display:none}
.action-row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Cards / surfaces ---------- */
.card-soft,.budget-row,.loan-card,.transaction-group{
  border:1px solid var(--gh-border);
  background:var(--gh-surface);
  box-shadow:var(--gh-shadow-soft);
}
.card-soft{border-radius:var(--gh-radius)}
.card-soft:hover{border-color:#ccdaea}
.metric-card{
  padding:18px;
  position:relative;
  overflow:hidden;
}
.metric-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--gh-blue-600),rgba(33,219,107,.7));
  opacity:.78;
}
.metric-label{
  font-size:.71rem;
  letter-spacing:.09em;
  color:#637b98;
  text-transform:uppercase;
  font-weight:850;
}
.metric-value{
  font-size:1.43rem;
  font-weight:850;
  color:#071f46;
  margin-top:8px;
  letter-spacing:-.02em;
}
.metric-note{font-size:.78rem;color:var(--gh-muted-2)}
.bg-soft-success{background:linear-gradient(135deg,var(--gh-green-50),#e8fbf0)}
.bg-soft-danger{background:var(--gh-danger-soft)}
.bg-soft-primary{background:linear-gradient(135deg,var(--gh-blue-50),#ebf5ff)}
.bg-soft-warning{background:var(--gh-warning-soft)}

/* ---------- Bootstrap button brand overrides ---------- */
.btn{border-radius:9px;font-weight:650}
.btn-brand,.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--gh-blue-600);
  --bs-btn-border-color:var(--gh-blue-600);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--gh-blue-700);
  --bs-btn-hover-border-color:var(--gh-blue-700);
  --bs-btn-active-bg:var(--gh-blue-800);
  --bs-btn-active-border-color:var(--gh-blue-800);
  background:linear-gradient(135deg,var(--gh-blue-600),#0c61ca);
  border-color:var(--gh-blue-600);
  color:#fff;
  box-shadow:0 5px 14px rgba(14,108,226,.16);
}
.btn-brand:hover,.btn-brand:focus,.btn-primary:hover,.btn-primary:focus{
  background:linear-gradient(135deg,var(--gh-blue-700),var(--gh-blue-800));
  border-color:var(--gh-blue-700);
  color:#fff;
  box-shadow:0 7px 18px rgba(14,108,226,.22);
}
.btn-brand:focus-visible,.btn-primary:focus-visible{box-shadow:0 0 0 .22rem rgba(33,219,107,.22),0 5px 14px rgba(14,108,226,.15)}
.btn-outline-primary{
  --bs-btn-color:var(--gh-blue-600);
  --bs-btn-border-color:#94bce9;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--gh-blue-600);
  --bs-btn-hover-border-color:var(--gh-blue-600);
  --bs-btn-active-bg:var(--gh-blue-700);
  --bs-btn-active-border-color:var(--gh-blue-700);
}
.btn-success{
  --bs-btn-bg:var(--gh-green-700);
  --bs-btn-border-color:var(--gh-green-700);
  --bs-btn-hover-bg:var(--gh-green-800);
  --bs-btn-hover-border-color:var(--gh-green-800);
}
.btn-orange{
  background:var(--gh-green-700);
  border-color:var(--gh-green-700);
  color:#fff;
  font-weight:700;
}
.btn-orange:hover{background:var(--gh-green-800);border-color:var(--gh-green-800);color:#fff}
.btn-light{--bs-btn-bg:#f7f9fc;--bs-btn-border-color:#dce5ef;--bs-btn-hover-bg:#eef4fa;--bs-btn-hover-border-color:#cbd9e7}
.btn-outline-secondary{--bs-btn-color:#506985;--bs-btn-border-color:#c8d6e5;--bs-btn-hover-bg:#eef5fb;--bs-btn-hover-color:var(--gh-heading);--bs-btn-hover-border-color:#b8cbe0}

/* ---------- Forms ---------- */
.form-label{color:#36526f;font-weight:650}
.form-control,.form-select{
  border-color:#d4e0ed;
  min-height:42px;
  border-radius:9px;
  color:var(--gh-text);
  background-color:#fff;
}
.form-control::placeholder{color:#a0afc0}
.form-control:hover,.form-select:hover{border-color:#bcd0e5}
.form-control:focus,.form-select:focus{
  border-color:var(--gh-blue-500);
  box-shadow:0 0 0 .20rem rgba(14,108,226,.12),0 0 0 1px rgba(33,219,107,.08);
}
.form-check-input:checked{background-color:var(--gh-blue-600);border-color:var(--gh-blue-600)}
.form-check-input:focus{border-color:var(--gh-blue-500);box-shadow:0 0 0 .2rem rgba(14,108,226,.12)}
.input-group-text{background:#f7faff;border-color:#d4e0ed;color:#5e7490}

/* ---------- Tables ---------- */
.table{--bs-table-color:var(--gh-text);--bs-table-hover-bg:#f6faff}
.table thead th{
  font-size:.73rem;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:#627894;
  background:linear-gradient(180deg,#f9fbfe,#f4f8fc);
  border-bottom:1px solid var(--gh-border);
  font-weight:800;
  white-space:nowrap;
}
.table td{vertical-align:middle;border-color:#edf2f7}
.table-hover tbody tr:hover>*{background-color:#f7fbff}

/* ---------- Badges / states ---------- */
.badge-soft-success{background:var(--gh-green-100);color:#0a7b3e;border:1px solid rgba(18,140,75,.09)}
.badge-soft-primary{background:var(--gh-blue-100);color:#0b5dc6;border:1px solid rgba(14,108,226,.08)}
.badge-soft-warning{background:#fff1c7;color:#925600;border:1px solid rgba(217,144,0,.10)}
.badge-soft-danger{background:#fee5e8;color:#b42332;border:1px solid rgba(220,53,69,.08)}
.text-primary{color:var(--gh-blue-600)!important}
.text-success{color:var(--gh-green-700)!important}
.bg-primary{background-color:var(--gh-blue-600)!important}
.bg-success{background-color:var(--gh-green-700)!important}
.link-primary{color:var(--gh-blue-600)!important}

/* ---------- Budget / progress ---------- */
.budget-row{padding:16px;border-radius:12px}
.progress{height:7px;background:#e7eef6;border-radius:999px}
.progress-bar-brand,.progress-bar.bg-primary{background:linear-gradient(90deg,var(--gh-blue-600),var(--gh-green-600))}
.progress-bar-warning{background:var(--gh-warning)}
.progress-bar-danger{background:var(--gh-danger)}
.alert-budget{
  border:1px solid #f0c665;
  border-left:4px solid var(--gh-warning);
  background:linear-gradient(90deg,#fffaf0,#fffdfa);
  color:#89510a;
  border-radius:11px;
  padding:12px 14px;
}
.alert-budget i{color:var(--gh-warning)}

/* ---------- Finance components ---------- */
.loan-card{border-radius:12px;padding:16px}
.loan-card .title{font-size:1.02rem;font-weight:800;color:var(--gh-heading)}
.amount-mono{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.015em}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.summary-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.loan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.list-clean{list-style:none;padding:0;margin:0}
.category-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:9px;
  background:linear-gradient(135deg,#eef6ff,#f2fff7);
  color:#31516f;
  border:1px solid #dbe8f4;
  padding:7px 10px;
  font-size:.84rem;
}
.transaction-group{border-radius:12px;overflow:hidden}
.transaction-group-header{
  background:linear-gradient(90deg,#f7fbff,#f6fdf9);
  border-bottom:1px solid #e3ebf4;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  font-weight:800;
}
.transaction-row{padding:12px 14px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid #edf2f7}
.transaction-row:first-of-type{border-top:0}
.empty-state{padding:40px 20px;text-align:center;color:#879ab1}
.small-muted{font-size:.8rem;color:#8799ae}

/* ---------- Topbar controls ---------- */
.month-nav{display:flex;align-items:center;gap:8px}
.month-nav .btn{border-color:rgba(255,255,255,.17);color:#fff;background:rgba(255,255,255,.035)}
.month-nav .btn:hover{background:rgba(14,108,226,.28);border-color:rgba(89,178,255,.30)}
.month-nav .month-chip{
  background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  padding:7px 10px;
  font-size:.84rem;
  font-weight:700;
}
.language-pill{display:inline-flex;gap:4px;padding:3px;background:rgba(255,255,255,.08);border-radius:8px}
.language-pill a{color:#d8e5f4;text-decoration:none;padding:4px 8px;border-radius:6px;font-size:.8rem;font-weight:700}
.language-pill a:hover{color:#fff;background:rgba(255,255,255,.08)}
.language-pill a.active{background:#fff;color:var(--gh-blue-800);box-shadow:inset 0 -2px 0 var(--gh-green-500)}
.user-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gh-blue-600),var(--gh-green-700));
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  border:1px solid rgba(255,255,255,.24);
}
.dropdown-menu{border-color:#d7e3ef;box-shadow:0 12px 32px rgba(14,35,61,.14);border-radius:11px}
.dropdown-item:active,.dropdown-item.active{background-color:var(--gh-blue-600)}

/* ---------- Navigation tabs / pagination ---------- */
.section-tabs .nav-link{color:#637b98;font-weight:700;border-radius:8px}
.section-tabs .nav-link.active{color:#fff;background:var(--gh-blue-600)}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background-color:var(--gh-blue-600)}
.pagination-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pagination .page-link{color:var(--gh-blue-700);border-color:#d7e3ef;min-width:34px;text-align:center;background:#fff}
.pagination .page-link:hover{background:var(--gh-blue-50);color:var(--gh-blue-800);border-color:#bcd3ec}
.pagination .page-item.active .page-link{background:var(--gh-blue-600);border-color:var(--gh-blue-600);color:#fff;box-shadow:0 4px 12px rgba(14,108,226,.16)}
.pagination .page-item.disabled .page-link{color:#a5b1c0;background:#f7f9fb}

/* ---------- Modal / sticky actions ---------- */
.modal-content{border:1px solid #d9e5f2;border-radius:14px;box-shadow:0 18px 55px rgba(7,31,70,.17)}
.modal-header{border-bottom-color:#e8eef5;background:linear-gradient(90deg,#f9fcff,#f8fffb)}
.modal-footer{border-top-color:#e8eef5;background:#fbfdff}
.sticky-actions{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(7px);padding:10px 0}

/* ---------- Reports / invoice ---------- */
.report-total{background:linear-gradient(90deg,var(--gh-blue-950),var(--gh-blue-800));color:#fff}
.report-total td{color:#fff;font-weight:800;border-color:rgba(255,255,255,.10)}
.report-kpi{border-left:4px solid var(--gh-blue-600)}
.aging-bar{height:8px;border-radius:99px;background:#e9eef5;overflow:hidden}
.aging-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--gh-blue-600),var(--gh-green-600))}
.invoice-sheet{
  max-width:920px;
  margin:24px auto;
  background:#fff;
  border:1px solid #d4e1ee;
  border-top:5px solid var(--gh-blue-600);
  border-radius:14px;
  box-shadow:0 12px 38px rgba(7,29,59,.10);
  padding:34px;
}
.invoice-logo{max-width:230px;max-height:82px;object-fit:contain}
.invoice-meta{min-width:260px}
.invoice-table th{background:linear-gradient(90deg,#f1f7ff,#f4fff8)}
.invoice-total-box{max-width:390px;margin-left:auto}
.report-section-title{font-size:1rem;font-weight:800;color:var(--gh-blue-800)}

/* ---------- Login ---------- */
.login-page{
  background:
    radial-gradient(circle at 83% 17%,rgba(33,219,107,.13),transparent 26%),
    radial-gradient(circle at 15% 88%,rgba(14,108,226,.18),transparent 28%),
    linear-gradient(135deg,#eef7ff 0%,#f7fbff 48%,#effcf5 100%);
}
.login-shell{
  max-width:980px;
  width:100%;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(18,60,128,.10);
}
.login-brand{
  background:
    radial-gradient(circle at 92% 8%,rgba(33,219,107,.26),transparent 34%),
    linear-gradient(150deg,var(--gh-blue-950),var(--gh-blue-800) 72%,#0b4d5c);
  min-height:540px;
  position:relative;
  overflow:hidden;
}
.login-brand::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-120px;
  bottom:-110px;
  border:30px solid rgba(33,219,107,.11);
  border-radius:50%;
  pointer-events:none;
}
.login-logo{max-width:330px;width:100%;box-shadow:0 12px 32px rgba(0,0,0,.15)}
.login-brand .eyebrow{color:#93f0b8}

/* ---------- Installer ---------- */
.install-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 10%,rgba(14,108,226,.10),transparent 30%),
    radial-gradient(circle at 90% 90%,rgba(33,219,107,.12),transparent 32%),
    var(--gh-bg);
}
.install-card{max-width:840px;margin:3rem auto;border-radius:18px!important;border:1px solid var(--gh-border)!important;box-shadow:var(--gh-shadow)!important;overflow:hidden}
.install-card::before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--gh-blue-600),var(--gh-green-500))}
.install-brand{max-width:330px}
.install-title{color:var(--gh-blue-800)}

/* ---------- Mobile offcanvas ---------- */
.offcanvas{--bs-offcanvas-width:290px}
.offcanvas-header{border-bottom:1px solid var(--gh-border);background:linear-gradient(90deg,#f5faff,#f4fff8)}
.offcanvas-brand img{height:55px;max-width:100%;object-fit:contain}
#mobileNav .nav-link{color:#415c78;font-weight:700;border:1px solid transparent}
#mobileNav .nav-link:hover{background:var(--gh-blue-50);color:var(--gh-blue-800)}
#mobileNav .nav-link.active{
  background:linear-gradient(100deg,var(--gh-blue-600),var(--gh-green-700));
  color:#fff;
  border-color:rgba(14,108,226,.08);
  box-shadow:0 6px 16px rgba(14,108,226,.16);
}

.mobile-menu-btn{display:none}

/* ---------- Responsive ---------- */
@media(max-width:991.98px){
  .sidebar{display:none}
  .main-area{margin-left:0}
  .mobile-menu-btn{display:inline-flex}
  .content{padding:18px}
  .summary-grid,.summary-grid.six,.loan-grid,.settings-grid{grid-template-columns:1fr}
  .page-head{flex-direction:column}
  .topbar{padding:0 14px}
  .topbar-title{font-size:.95rem}
  .desktop-only{display:none!important}
}
@media(max-width:575.98px){
  .content{padding:14px}
  .page-title{font-size:1.45rem}
  .metric-value{font-size:1.2rem}
  .loan-card{padding:14px}
  .action-row{width:100%}
  .action-row .btn{flex:1}
  .transaction-row{flex-direction:column}
  .login-shell{border-radius:14px}
  .login-brand{min-height:320px}
  .login-page{background:linear-gradient(180deg,#eef7ff,#f4fff8)}
  .invoice-sheet{margin:0;border-radius:0;padding:20px}
}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.no-print,.modal,.btn,.offcanvas{display:none!important}
  .main-area{margin:0!important}
  .content{padding:0!important}
  .card-soft,.budget-row{box-shadow:none!important}
  .content-wrap{max-width:none!important}
  .invoice-sheet{box-shadow:none;border:0;border-top:4px solid var(--gh-blue-600);margin:0;max-width:none}
}

/* ---------- Dashboard ISP v4 ---------- */
.dashboard-page-head{margin-bottom:18px}
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dashboard-kpi{min-height:128px;border:1px solid var(--gh-border);border-radius:14px;background:#fff;box-shadow:var(--gh-shadow-soft);padding:16px;display:flex;gap:13px;align-items:flex-start;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;color:inherit}
.dashboard-kpi:hover{transform:translateY(-1px);border-color:#bfd4ea;box-shadow:0 8px 22px rgba(18,60,128,.09);color:inherit}
.kpi-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.18rem}
.kpi-blue{background:#e9f3ff;color:var(--gh-blue-600)}.kpi-green{background:#e4faed;color:var(--gh-green-700)}.kpi-red{background:#fff0f2;color:#d83b4b}.kpi-orange{background:#fff5df;color:#c87900}.kpi-purple{background:#f1edff;color:#7256cc}.kpi-navy{background:#eaf0f7;color:var(--gh-blue-800)}
.kpi-body{min-width:0;flex:1}.dashboard-kpi .metric-value{font-size:1.25rem;margin-top:5px;white-space:nowrap}.kpi-sub{font-size:.75rem;color:#8395aa;margin-top:6px;line-height:1.35}
.dashboard-panel{padding:17px}.dashboard-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:15px}.dashboard-panel-head strong{color:var(--gh-heading)}
.score-ring{width:55px;height:55px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:850;font-size:.88rem;border:5px solid #dfe9f3;background:#fff;color:var(--gh-heading)}.score-ring.good{border-color:#99e6b7}.score-ring.warn{border-color:#ffd77d}.score-ring.bad{border-color:#ffb7c0}
.dashboard-trend-wrap{display:grid;gap:11px}.trend-month-row{display:grid;grid-template-columns:68px 1fr 118px;gap:12px;align-items:center}.trend-label{font-size:.78rem;font-weight:800;color:#617995}.trend-bars{display:grid;gap:3px}.trend-track{height:6px;background:#edf2f7;border-radius:99px;overflow:hidden}.trend-bar{display:block;height:100%;border-radius:99px;min-width:1px}.trend-income{background:var(--gh-blue-600)}.trend-expense{background:#df5360}.trend-billing{background:var(--gh-green-600)}.trend-value{text-align:right;font-size:.78rem;font-weight:800;color:#294663;font-variant-numeric:tabular-nums}.trend-legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:15px;padding-top:12px;border-top:1px solid #edf2f7;font-size:.75rem;color:#72879f}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.collection-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.collection-summary-grid>div{background:linear-gradient(135deg,#f7fbff,#f8fffb);border:1px solid #e1ebf5;border-radius:10px;padding:10px}.collection-summary-grid span{display:block;font-size:.7rem;color:#7a8fa6}.collection-summary-grid strong{display:block;font-size:.94rem;margin-top:3px;color:var(--gh-heading);font-variant-numeric:tabular-nums}.dashboard-progress{height:9px}
.customer-status-hero{text-align:center;padding:7px 0 14px}.status-total{font-size:2.1rem;font-weight:900;color:var(--gh-heading);line-height:1}.status-list{display:grid;gap:8px}.status-list>div{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;background:#f8fbfe;border:1px solid #e7eef5;border-radius:9px}.status-list span{font-size:.82rem}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.dot-green{background:var(--gh-green-600)}.dot-orange{background:var(--gh-warning)}.dot-gray{background:#9aa8b8}
.aging-dashboard-row{margin-bottom:13px}.aging-dashboard-row:last-child{margin-bottom:0}.aging-dashboard-row .d-flex{font-size:.76rem}.aging-dashboard-row .progress{height:7px}.aging-primary{background:var(--gh-blue-600)}.aging-warning{background:#e9ad28}.aging-orange{background:#e27c2a}.aging-danger{background:#dc3545}
.cash-flow-mini{display:grid;grid-template-columns:1fr 1fr;gap:9px}.cash-flow-mini>div{padding:10px;border:1px solid #e4edf5;border-radius:10px;background:#fbfdff}.cash-flow-mini span{display:block;font-size:.7rem;color:#7c90a7}.cash-flow-mini strong{display:block;font-size:.88rem;margin-top:3px}.account-balance-list{display:grid;gap:0}.account-balance-list>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid #edf2f6;font-size:.8rem}.account-balance-list>div:first-child{border-top:0}.account-balance-list strong{font-variant-numeric:tabular-nums;color:var(--gh-heading)}
.composition-row{margin-bottom:12px}.composition-row:last-child{margin-bottom:0}.composition-line{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;margin-bottom:5px}.composition-line strong{font-variant-numeric:tabular-nums}.composition-row small{display:block;text-align:right;color:#8b9caf;margin-top:3px}.composition-expense{background:linear-gradient(90deg,#df5360,#f0a24a)}.composition-income{background:linear-gradient(90deg,var(--gh-blue-600),var(--gh-green-600))}
.dashboard-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#72879f;background:#f7faff;border-bottom-color:#e4edf5;white-space:nowrap}.dashboard-table td{font-size:.79rem;vertical-align:middle;border-bottom-color:#edf2f6}.dashboard-bill-list .list-group-item{padding:12px 15px;border-color:#edf2f6}.dashboard-bill-list strong{font-size:.8rem}
.health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.health-item{display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid #e1eaf4;border-radius:11px;text-decoration:none;background:linear-gradient(135deg,#f9fcff,#fbfffd);color:inherit}.health-item:hover{border-color:#bcd4ed;color:inherit}.health-item span{font-size:.72rem;color:#6f849f}.health-item span i{color:var(--gh-blue-600);margin-right:6px}.health-item strong{font-size:.98rem;color:var(--gh-heading)}.health-item small{font-size:.68rem;color:#8a9aae}
.dashboard-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.dashboard-action{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid #dce8f4;border-radius:12px;text-decoration:none;background:linear-gradient(145deg,#f8fbff,#f8fff9);font-size:.78rem;font-weight:750;text-align:center;color:#31516f;padding:10px}.dashboard-action i{font-size:1.35rem;color:var(--gh-blue-600)}.dashboard-action:hover{background:#eef7ff;border-color:#bdd4ec;color:var(--gh-blue-800)}.dashboard-action:hover i{color:var(--gh-green-700)}
.setup-list{display:grid;gap:8px}.setup-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e1eaf4;border-radius:10px;text-decoration:none;color:#536c87;font-size:.79rem;font-weight:700}.setup-item:hover{background:#f7fbff;color:var(--gh-blue-800)}.setup-icon{width:28px;height:28px;border-radius:8px;background:#eaf3fd;color:var(--gh-blue-600);display:flex;align-items:center;justify-content:center}.setup-item.done .setup-icon{background:#dcf8e7;color:var(--gh-green-700)}.setup-item.done{color:#46647c}
.dashboard-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#8a9cb1;text-align:center;padding:18px}.dashboard-empty i{font-size:1.5rem}.dashboard-empty.compact{min-height:72px;flex-direction:row;padding:14px;font-size:.78rem}.dashboard-empty.compact i{font-size:1rem}
.badge-soft-primary{background:#e8f3ff;color:var(--gh-blue-700);border:1px solid #d1e7ff}.badge-soft-success{background:#e2f8eb;color:var(--gh-green-800);border:1px solid #c8efd7}.badge-soft-warning{background:#fff4d9;color:#9a6500}.badge-soft-danger{background:#fff0f2;color:#b92c3a}.badge-soft-secondary{background:#eef2f6;color:#647589}
@media(max-width:1199.98px){.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.dashboard-kpi-grid{grid-template-columns:1fr}.dashboard-kpi{min-height:auto}.trend-month-row{grid-template-columns:52px 1fr}.trend-value{display:none}.dashboard-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.health-grid{grid-template-columns:1fr}.collection-summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.collection-summary-grid,.cash-flow-mini{grid-template-columns:1fr}.dashboard-action-grid{grid-template-columns:1fr 1fr}.dashboard-panel{padding:14px}}


/* ---------- Globalhome v5: dominant white application theme ---------- */
:root{
  --gh-bg:#f7f9fc;
  --gh-surface:#ffffff;
  --gh-surface-soft:#fbfdff;
  --gh-border:#dfe7f0;
  --gh-text:#1c334d;
  --gh-heading:#0b2f5f;
  --gh-muted:#667c94;
  --gh-shadow-soft:0 2px 10px rgba(15,55,100,.045);
}
body{background:var(--gh-bg);color:var(--gh-text)}
.sidebar{
  background:#fff;
  color:var(--gh-text);
  border-right:1px solid var(--gh-border);
  box-shadow:4px 0 18px rgba(15,55,100,.045);
}
.sidebar::before{height:3px;background:linear-gradient(90deg,var(--gh-blue-600),var(--gh-green-500))}
.sidebar-brand{background:#fff;border-bottom:1px solid #edf2f7}
.sidebar-brand img{height:70px;background:#fff;box-shadow:none;border:1px solid #edf2f7}
.sidebar-label{color:var(--gh-green-700);letter-spacing:.14em}
.sidebar .nav-link{color:#405b77;background:transparent;border-color:transparent}
.sidebar .nav-link i{color:#7290ae}
.sidebar .nav-link:hover{background:#f4f8fd;color:var(--gh-blue-800);border-color:#e5edf6;transform:none}
.sidebar .nav-link:hover i{color:var(--gh-blue-600)}
.sidebar .nav-link.active{
  background:linear-gradient(90deg,#eef6ff 0%,#f3fff8 100%);
  color:var(--gh-blue-800);
  border-color:#d7e7f7;
  box-shadow:inset 3px 0 0 var(--gh-blue-600);
}
.sidebar .nav-link.active i{color:var(--gh-green-700)}
.sidebar-footer{color:#8497aa;border-top:1px solid #edf2f7}
.topbar{
  background:#fff;
  color:var(--gh-heading);
  border-bottom:1px solid var(--gh-border);
  box-shadow:0 2px 10px rgba(15,55,100,.045);
}
.topbar-title{color:var(--gh-heading)}
.topbar .btn-outline-light{color:#47637f!important;border-color:#d8e3ee!important;background:#fff!important}
.topbar .btn-outline-light:hover{color:var(--gh-blue-800)!important;background:#f4f8fd!important;border-color:#bfd2e6!important}
.content{background:var(--gh-bg)}
.card-soft,.budget-row,.loan-card,.transaction-group,.dashboard-kpi{background:#fff;border-color:var(--gh-border);box-shadow:var(--gh-shadow-soft)}
.month-nav{gap:7px}
.month-nav .btn{border:1px solid #d6e2ee;color:var(--gh-blue-800);background:#fff;min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.month-nav .btn:hover{background:#f0f6fd;border-color:#b9cfe5;color:var(--gh-blue-700)}
.month-nav .month-chip{
  appearance:none;
  border:1px solid #d6e2ee;
  background:#fff;
  color:var(--gh-heading);
  min-height:34px;
  border-radius:9px;
  padding:6px 11px;
  font-size:.83rem;
  font-weight:750;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  cursor:pointer;
}
.month-nav .month-chip:hover,.month-nav .month-chip:focus{background:#f4f8fd;border-color:#b9cfe5;outline:0;box-shadow:0 0 0 .18rem rgba(14,108,226,.10)}
.month-nav .month-chip .bi-calendar3{color:var(--gh-green-700)}
.period-chevron{font-size:.68rem;color:#7790a8}
.language-pill{background:#f1f5f9;border:1px solid #e1e9f1}
.language-pill a{color:#637a91}
.language-pill a:hover{color:var(--gh-blue-800);background:#fff}
.language-pill a.active{background:#fff;color:var(--gh-blue-800);box-shadow:0 1px 4px rgba(15,55,100,.08),inset 0 -2px 0 var(--gh-green-500)}
.user-avatar{border-color:#d8e3ee}
#mobileNav{background:#fff;color:var(--gh-text)}
#mobileNav .nav-link{color:#405b77}
#mobileNav .nav-link.active{background:linear-gradient(90deg,#eef6ff,#f3fff8);color:var(--gh-blue-800);border:1px solid #d7e7f7;box-shadow:inset 3px 0 0 var(--gh-blue-600)}
.table thead th{background:#f8fafc;color:#5f748b}
.transaction-group-header,.modal-header{background:#fbfdff}
.report-total{background:#f0f6fd;color:var(--gh-heading);border-top:2px solid var(--gh-blue-600)}
.report-total td{color:var(--gh-heading);border-color:#dce7f1}
.dashboard-kpi:hover{border-color:#c8d9e9;box-shadow:0 5px 16px rgba(15,55,100,.07)}
.collection-summary-grid>div,.status-list>div,.cash-flow-mini>div,.health-item,.dashboard-action{background:#fff}
.dashboard-action:hover,.health-item:hover,.setup-item:hover{background:#f6faff}
.dashboard-repair-alert{background:#fffaf0;color:#725019;border-color:#f1d38c;box-shadow:none}

/* Month/year picker */
.period-picker-dialog{max-width:520px}
.period-picker-modal{background:#fff;border-color:#dce6f0;overflow:hidden}
.period-picker-modal .modal-header,.period-picker-modal .modal-footer{background:#fff}
.period-year-control{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:end}
.period-year-control .btn{height:42px;padding:0;display:flex;align-items:center;justify-content:center}
.period-month-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.period-month-btn{
  border:1px solid #dbe5ef;
  background:#fff;
  color:#3b5875;
  border-radius:10px;
  min-height:46px;
  padding:8px;
  font-weight:700;
  transition:.15s ease;
}
.period-month-btn:hover{background:#f2f7fd;border-color:#bcd1e6;color:var(--gh-blue-800)}
.period-month-btn.active{background:#edf6ff;border-color:#93bee9;color:var(--gh-blue-800);box-shadow:inset 0 -3px 0 var(--gh-green-500)}

/* Keep text readable when cards get narrow. */
.dashboard-kpi .metric-value,.composition-line strong,.account-balance-list strong,.collection-summary-grid strong{overflow-wrap:anywhere;white-space:normal}
.dashboard-panel-head{min-width:0}.dashboard-panel-head>*{min-width:0}
.table-responsive{border-radius:0 0 var(--gh-radius) var(--gh-radius)}

@media(max-width:991.98px){
  .topbar{height:58px}.topbar .month-nav{margin-left:auto}.period-label{max-width:130px;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:575.98px){
  .topbar{gap:8px}.topbar-title{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .month-nav .month-chip{padding:6px 8px}.period-label{max-width:96px}.period-chevron{display:none}
  .period-month-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.period-picker-dialog{margin:10px}
}


/* v5 white surfaces for authentication and installer */
.login-page,.install-page{background:#f7f9fc}
.login-shell{background:#fff;border-color:#dfe7f0;box-shadow:0 16px 48px rgba(15,55,100,.08)!important}
.login-brand{background:#fff;border-right:1px solid #e6edf4;color:var(--gh-heading)}
.login-brand::after{border-color:rgba(14,108,226,.06)}
.login-logo{box-shadow:none;border:1px solid #edf2f7;border-radius:14px;background:#fff}
.login-brand .eyebrow{color:var(--gh-green-700)}
.install-card{background:#fff!important}
@media(max-width:575.98px){
  .topbar-title{display:none}
  .topbar{padding:0 10px}
  .month-nav{gap:5px}
  .month-nav .btn{min-width:30px;width:30px;padding:0}
  .period-label{max-width:84px}
}