/* ===== ROOT ===== */
:root {
  --gold:#d4af37; --gold-light:#f3e5ab; --gold-dark:#aa8c2c;
  --gold-faint:rgba(212,175,55,0.1); --gold-faint2:rgba(212,175,55,0.2);
  --bg:#000; --bg2:#0c0c0c; --bg3:#161616; --bg4:#1e1e1e;
  --surface:#101010;
  --border:rgba(212,175,55,0.22); --border2:rgba(255,255,255,0.07);
  --text:#e8e8e8; --text2:#b0b0b0; --text3:#6e6e6e;
  --green:#2ecc71; --green-bg:rgba(46,204,113,0.15);
  --red:#e74c3c; --red-bg:rgba(231,76,60,0.15);
  --blue:#3b82f6; --blue-bg:rgba(59,130,246,0.15);
  --sidebar-w:232px; --radius:8px;
  --shadow:0 4px 24px rgba(0,0,0,0.6);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh;overflow-x:hidden;}
input,textarea,select,button{font-family:inherit;font-size:1rem;}
a{text-decoration:none;color:inherit;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:4px;}

/* ===== SIDEBAR ===== */
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:100;transition:transform .25s,width .25s;}
.sidebar.collapsed{width:54px;overflow:hidden;}
.sidebar.collapsed .brand-text,.sidebar.collapsed .nav-item span,.sidebar.collapsed .sidebar-footer{display:none;}
.sidebar.collapsed .sidebar-brand{justify-content:center;padding:14px 0;}
.sidebar.collapsed .brand-icon{margin:0 auto;}
.sidebar.collapsed .nav-item{justify-content:center;padding:12px 0;}
.main-wrapper.full{margin-left:54px;}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);z-index:200;}
  .sidebar.open{transform:translateX(0);}
  .main-wrapper{margin-left:0!important;}
}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:150;}
#sidebar-overlay.active{display:block;}

.sidebar-brand{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--border);}
.brand-icon{width:36px;height:36px;border-radius:8px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:18px;color:#000;flex-shrink:0;}
.brand-name{font-size:1.05rem;font-weight:700;color:var(--gold);line-height:1.2;}
.brand-sub{font-size:0.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;}

.sidebar-nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:var(--radius);color:var(--text2);font-weight:500;font-size:0.95rem;cursor:pointer;border:1px solid transparent;transition:all .15s;}
.nav-item i{width:18px;text-align:center;font-size:0.95rem;flex-shrink:0;}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:var(--gold-faint);color:var(--gold);border-color:var(--border);}
.sidebar-footer{padding:12px 16px;font-size:0.8rem;color:var(--text3);border-top:1px solid var(--border);}

/* ===== MAIN ===== */
#app-screen { display: flex; width: 100%; min-height: 100vh; }
.main-wrapper{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0;transition:margin-left .25s;}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 24px;height:56px;position:sticky;top:0;z-index:50;}
.hamburger{background:none;border:none;color:var(--text2);font-size:1.2rem;cursor:pointer;padding:4px;transition:color .15s;}
.hamburger:hover{color:var(--gold);}
.topbar-title{font-size:1.1rem;font-weight:700;color:var(--gold);flex:1;}
.today-date{font-size:0.85rem;color:var(--text3);white-space:nowrap;}
.content-area{padding:22px;overflow-y:auto;flex:1;}

/* ===== PAGES ===== */
.page{display:none;animation:fadeIn .2s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.page-header{margin-bottom:20px;}
.page-header h1{font-size:1.7rem;font-weight:700;color:var(--text);}
.gold-dot{color:var(--green);}

/* ===== STATS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:14px;margin-bottom:24px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:5px;}
.stat-icon{font-size:1.25rem;color:var(--gold);margin-bottom:2px;}
.stat-label{font-size:0.78rem;color:var(--text3);text-transform:uppercase;font-weight:600;letter-spacing:.04em;}
.stat-value{font-size:1.5rem;font-weight:700;color:var(--text);}
.stat-sub{font-size:0.82rem;color:var(--text3);}

/* ===== DASHBOARD ===== */
.dashboard-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:900px){.dashboard-bottom{grid-template-columns:1fr;}}
.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.dash-card-title{font-size:0.85rem;font-weight:700;color:var(--gold);margin-bottom:14px;text-transform:uppercase;letter-spacing:.05em;}

/* SK summary rows */
.sk-row{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;background:var(--bg3);border-radius:6px;margin-bottom:7px;font-size:0.92rem;}
.sk-row.highlight{background:var(--gold-faint);border:1px solid var(--border);}
.sk-row:last-child{margin-bottom:0;}
.sk-row .label{color:var(--text3);}
.sk-row .val{font-weight:700;}
.sk-row .text-gold{color:var(--gold);}

/* ===== ACTIVITY ===== */
.activity-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border2);font-size:0.92rem;align-items:center;}
.activity-item:last-child{border-bottom:none;}
.activity-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.82rem;flex-shrink:0;}
.activity-icon.loan{background:var(--bg3);color:#3b82f6;}
.activity-icon.topup{background:var(--green-bg);color:var(--green);}
.activity-icon.interest{background:var(--gold-faint2);color:var(--gold);}
.activity-icon.closure{background:var(--red-bg);color:var(--red);}
.activity-icon.sk_payment{background:rgba(155,89,182,0.2);color:#9b59b6;}
.activity-icon.partial_repayment,.activity-icon.part_payment{background:var(--blue-bg);color:var(--blue);}
.activity-text{flex:1;min-width:0;}
.activity-name{font-weight:600;color:var(--text);}
.activity-meta{color:var(--text3);font-size:0.8rem;}
.activity-amount{font-weight:700;color:var(--gold);white-space:nowrap;font-size:0.95rem;}

/* ===== FORMS ===== */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.form-section-title{font-size:0.8rem;font-weight:700;text-transform:uppercase;color:var(--gold);margin:16px 0 12px;border-bottom:1px solid var(--border2);padding-bottom:6px;letter-spacing:.05em;}
.form-section-title:first-child{margin-top:0;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:14px;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group.full-width{grid-column:1/-1;}
.form-group label{font-size:0.82rem;font-weight:600;color:var(--text2);}
.input-field{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:10px 13px;color:var(--text);font-size:0.95rem;outline:none;width:100%;transition:border-color .15s;}
.input-field:focus{border-color:var(--gold);}
.input-field[readonly]{opacity:.6;cursor:default;}
select.input-field{cursor:pointer;}
.form-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.search-existing-row{display:flex;gap:8px;margin-bottom:12px;align-items:flex-end;}
.search-existing-row .input-field{flex:1;}

/* ===== DROPDOWNS & SELECTED LOAN ===== */
.customer-results-dropdown{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);max-height:220px;overflow-y:auto;margin-bottom:14px;box-shadow:var(--shadow);}
/* JS uses both customer-result-item and dropdown-item — support both */
.customer-result-item,.dropdown-item,.result-item{padding:11px 15px;cursor:pointer;border-bottom:1px solid var(--border2);display:flex;flex-direction:column;gap:3px;transition:background .12s;}
.customer-result-item:last-child,.dropdown-item:last-child,.result-item:last-child{border-bottom:none;}
.customer-result-item:hover,.dropdown-item:hover,.result-item:hover{background:var(--gold-faint);}
.customer-result-item strong,.dropdown-item strong,.result-item strong{color:var(--text);font-size:0.95rem;}
.customer-result-item span,.dropdown-item span,.result-item span{color:var(--text3);font-size:0.82rem;}

/* Existing customer hint (shown after picking from search) */
.existing-customer-hint{background:var(--green-bg);border:1px solid var(--green);border-radius:6px;padding:9px 14px;font-size:0.9rem;color:var(--green);margin-bottom:14px;}

/* Selected loan card shown in top-up / interest / repayment forms */
.selected-loan-card{background:var(--gold-faint);border:1px solid var(--gold);border-radius:var(--radius);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;margin:12px 0;flex-wrap:wrap;gap:10px;}
.slc-name{font-weight:700;color:var(--gold);font-size:1.1rem;margin-bottom:3px;}
.slc-meta{font-size:0.82rem;color:var(--text3);}
.slc-amount{font-weight:700;color:var(--gold);font-size:1.5rem;}

/* Info banner */
.info-banner{background:var(--blue-bg);border:1px solid var(--blue);border-radius:6px;padding:11px 15px;font-size:0.92rem;color:var(--text2);margin-bottom:16px;line-height:1.5;}
.info-banner i{color:var(--blue);margin-right:6px;}

/* ===== BUTTONS ===== */
.btn-primary,.btn-ghost,.btn-danger,.btn-gold,.btn-blue{border-radius:6px;padding:9px 18px;font-weight:600;font-size:0.9rem;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:7px;transition:all .15s;white-space:nowrap;}
.btn-primary{background:var(--gold);color:#000;}
.btn-primary:hover{background:var(--gold-light);}
.btn-ghost{background:var(--bg4);color:var(--text2);border:1px solid var(--border2);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red);}
.btn-danger:hover{background:var(--red);color:#fff;}
.btn-gold{background:var(--gold-faint);color:var(--gold);border:1px solid var(--gold);}
.btn-gold:hover{background:var(--gold-faint2);}
.btn-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue);}
.btn-blue:hover{background:var(--blue);color:#fff;}
.btn-sm{padding:5px 10px!important;font-size:0.8rem!important;}

/* ===== TOOLBAR ===== */
.toolbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center;}
.search-bar{flex:1;min-width:160px;}
.filter-select{min-width:150px;}

/* ===== SK STATS ROW ===== */
.sk-stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:14px;margin-bottom:18px;}

/* ===== INTEREST CALC BOX ===== */
.interest-calc-box{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:13px 16px;margin-bottom:14px;font-size:0.92rem;color:var(--text2);}
.calc-summary{display:flex;gap:20px;flex-wrap:wrap;align-items:center;}
.calc-item{display:flex;flex-direction:column;gap:2px;}
.calc-item span{font-size:0.78rem;color:var(--text3);}
.calc-item strong{font-size:1rem;color:var(--text);}
.calc-item.highlight strong{color:var(--gold);font-size:1.15rem;}

/* ===== DISCOUNT WARNING ===== */
.discount-warning{background:var(--red-bg);border:1px solid var(--red);border-radius:6px;padding:10px 14px;font-size:0.9rem;color:var(--red);margin:8px 0;display:flex;align-items:center;gap:8px;}

/* ===== LOANS GRID ===== */
.loans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.loan-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;cursor:pointer;transition:border-color .2s,background .2s;}
.loan-card:hover{border-color:var(--gold);background:var(--bg2);}
.loan-card.via-sk{border-left:3px solid #9b59b6;}
.loan-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:8px;}
.loan-card-name{font-size:1.05rem;font-weight:700;color:var(--text);}
.loan-card-account{font-size:0.8rem;color:var(--text3);margin-top:2px;}
.loan-card-row{display:flex;justify-content:space-between;font-size:0.9rem;margin-bottom:4px;gap:4px;}
.loan-card-row .lbl{color:var(--text3);}
.loan-card-row .val{font-weight:600;color:var(--text);}
.loan-card-row .val.gold,.val-gold{color:var(--gold)!important;}
.loan-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;}

/* ===== BADGES ===== */
.badge{font-size:0.67rem;font-weight:700;padding:3px 9px;border-radius:10px;text-transform:uppercase;white-space:nowrap;}
.badge-active{background:var(--green-bg);color:var(--green);}
.badge-closed{background:var(--red-bg);color:var(--red);}
.badge-sk{background:rgba(155,89,182,0.2);color:#9b59b6;}
.badge-other{background:rgba(243,156,18,0.18);color:#f39c12;}
.loan-card.via-other{border-top:2px solid #f39c12;}
.idx-row-other{border-left:3px solid #f39c12;}
.idx-row-other td:first-child{padding-left:11px;}

/* ===== MODALS ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:22px;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;border-bottom:1px solid var(--border2);padding-bottom:12px;}
.modal-header h2{font-size:1.15rem;color:var(--gold);}
.modal-close{background:none;border:none;color:var(--text3);font-size:1.25rem;cursor:pointer;transition:color .15s;}
.modal-close:hover{color:var(--red);}
.modal-actions{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;}

/* Loan profile block inside modal */
.modal-profile-block{background:var(--bg3);border-radius:8px;padding:18px;margin-bottom:6px;border:1px solid var(--border2);}
.mpb-name{font-size:1.25rem;font-weight:700;color:var(--gold);margin-bottom:5px;}
.mpb-meta{font-size:0.85rem;color:var(--text3);margin-bottom:12px;}
.mpb-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.mpb-stat{background:var(--bg4);border-radius:6px;padding:10px 13px;}
.mpb-stat span{font-size:0.75rem;color:var(--text3);display:block;margin-bottom:3px;}
.mpb-stat strong{font-size:0.98rem;font-weight:700;color:var(--text);}

.modal-section-title{font-size:0.82rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 10px;}

/* ===== TIMELINE ===== */
.timeline{display:flex;flex-direction:column;}
.timeline-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border2);align-items:flex-start;}
.timeline-item:last-child{border-bottom:none;}
.tl-body{flex:1;min-width:0;}
.tl-title{font-weight:600;font-size:0.92rem;color:var(--text);}
.tl-meta{font-size:0.78rem;color:var(--text3);margin-top:2px;}
.tl-amount{font-weight:700;color:var(--gold);font-size:0.92rem;margin-top:3px;}

/* ===== CUSTOMERS ===== */
.customers-list{display:flex;flex-direction:column;gap:10px;}
.customer-row{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;transition:border-color .15s;}
.customer-row:hover{border-color:var(--border);}
.cust-info{flex:1;min-width:150px;}
.cust-name{font-size:1rem;font-weight:700;}
.cust-meta{font-size:0.8rem;color:var(--text3);margin-top:2px;}
.cust-stats{display:flex;gap:18px;flex-wrap:wrap;}
.cust-stat{display:flex;flex-direction:column;align-items:flex-end;}
.clbl{color:var(--text3);font-size:0.7rem;text-transform:uppercase;}
.cval{color:var(--gold);font-weight:700;font-size:0.9rem;}

/* ===== SUCCESS / EMPTY / UTILITY ===== */
.success-msg{margin-top:12px;padding:11px 15px;background:var(--green-bg);color:var(--green);border-radius:6px;font-size:0.92rem;border:1px solid var(--green);display:flex;align-items:center;gap:8px;}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 20px;color:var(--text3);gap:12px;font-size:0.92rem;}
.empty-state i{font-size:2.5rem;opacity:.3;}
.hidden{display:none!important;}
.text-green{color:var(--green)!important;}
.text-red{color:var(--red)!important;}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  html{font-size:14px;}
  .content-area{padding:14px;}
  .form-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .loans-grid{grid-template-columns:1fr;}
  .cust-stats{display:none;}
  .mpb-stats{grid-template-columns:1fr 1fr;}
  .modal-box{padding:16px;}
  .toolbar{gap:8px;}
}
@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr;}
}

/* ===== SK SUMMARY (dashboard) ===== */
.sk-summary-list{display:flex;flex-direction:column;gap:8px;}
.sk-sum-row{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;background:var(--bg3);border-radius:6px;font-size:0.92rem;}
.sk-sum-row span:first-child{color:var(--text3);}
.sk-sum-row.highlight{background:var(--gold-faint);border:1px solid var(--border);}

/* ===== INTEREST BREAKDOWN TABLE (segmented calc) ===== */
.ir-breakdown { font-size: 0.92rem; }
.ir-breakdown-title { font-size: 0.78rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.ir-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.ir-table thead th { font-size: 0.75rem; color: var(--text3); text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border2); font-weight: 600; text-transform: uppercase; }
.ir-table tbody td { padding: 7px 8px; border-bottom: 1px solid var(--border2); font-size: 0.88rem; color: var(--text); }
.ir-table tbody tr:last-child td { border-bottom: none; }
.ir-table tbody tr:hover td { background: var(--bg4); }
.ir-total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px; background: var(--gold-faint); border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; }
.ir-total-row span:first-child { color: var(--text3); font-size: 0.85rem; }
.ir-total-label { font-size: 0.92rem; color: var(--text); }

/* ===== TRACKING DATE FIELD ===== */
.tracking-date-group { background: var(--gold-faint); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
.tracking-date-group label { color: var(--gold); }
.field-hint { color: var(--text3); font-size: 0.78rem; margin-top: 5px; display: block; line-height: 1.5; }

/* ===== RESET BUTTON (sidebar footer) ===== */
.btn-reset-soft { width: 100%; background: none; border: 1px solid var(--red); border-radius: 6px; color: var(--red); padding: 7px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; opacity: 0.7; transition: all .15s; }
.btn-reset-soft:hover { opacity: 1; background: var(--red-bg); }

/* ===== GAP CHOICE PANEL (Pay Later vs Discount) ===== */
.gap-choice-panel { border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin: 10px 0; background: var(--bg3); }
.gap-choice-title { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.gap-choice-title i { color: var(--gold); }
.gap-choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width:560px) { .gap-choice-options { grid-template-columns: 1fr; } }
.gap-option { cursor: pointer; display: block; }
.gap-option input[type="radio"] { display: none; }
.gap-option-box { border: 2px solid var(--border2); border-radius: 8px; padding: 12px 14px; transition: all .15s; background: var(--bg4); }
.gap-option:hover .gap-option-box { border-color: var(--border); }
.gap-option input:checked + .gap-option-box { border-color: var(--gold); background: var(--gold-faint); }
.gap-option-title { font-weight: 700; font-size: 0.92rem; color: var(--text); margin-bottom: 5px; }
.gap-option-title i { margin-right: 5px; }
.gap-option-desc { font-size: 0.8rem; color: var(--text3); line-height: 1.5; }

/* ===== PENDING INTEREST BANNER (carry-forward) ===== */
.ir-pending-banner { background: var(--gold-faint); border: 1px solid var(--border); border-radius: 6px; padding: 9px 14px; font-size: 0.9rem; color: var(--text2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ir-pending-banner i { color: var(--gold); }

/* ===== HISTORY TAGS ===== */
.tl-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.hist-tag { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.hist-tag.disc { background: var(--red-bg); color: var(--red); }
.hist-tag.paylater { background: var(--gold-faint); color: var(--gold); border: 1px solid var(--border); }
.hist-tag.period { background: var(--bg4); color: var(--text3); }

/* ===== SIDEBAR FOOTER ACTIONS ===== */
.sidebar-footer-title { font-size: 0.78rem; color: var(--gold); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.btn-footer { flex: 1; background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; color: var(--text2); padding: 7px 6px; font-size: 0.78rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all .15s; }
.btn-footer:hover { border-color: var(--gold); color: var(--gold); }
/* Hide footer text labels when sidebar is collapsed */
.sidebar.collapsed .sidebar-footer-title,
.sidebar.collapsed .sidebar-footer-actions,
.sidebar.collapsed .btn-reset-soft { display: none; }

/* ===== INDEX PAGE ===== */
.idx-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: 0.82rem; color: var(--text3); }
.idx-leg-item { display: flex; align-items: center; gap: 6px; }
.idx-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.idx-leg-dot.sk { background: #9b59b6; }
.idx-leg-dot.warn { background: #e6a817; }
.idx-leg-dot.normal { background: var(--border); }

.idx-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.idx-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 720px; }
.idx-th { background: var(--bg3); color: var(--text3); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.idx-table tbody tr { border-bottom: 1px solid var(--border2); transition: background .12s; }
.idx-table tbody tr:last-child { border-bottom: none; }
.idx-table tbody tr:hover { background: var(--bg3); }

/* Row colour coding */
.idx-row-sk { border-left: 3px solid #9b59b6; }
.idx-row-sk td:first-child { padding-left: 11px; }
.idx-row-warn { border-left: 3px solid #e6a817; }
.idx-row-warn td:first-child { padding-left: 11px; }

/* Cells */
.idx-table td { padding: 10px 14px; vertical-align: middle; color: var(--text); }
.idx-sr { color: var(--text3); font-size: 0.82rem; width: 36px; text-align: center; }
.idx-acc { font-family: monospace; font-size: 0.88rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
.idx-name-main { font-weight: 700; font-size: 0.95rem; }
.idx-name-sub { font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.idx-date, .idx-dur { white-space: nowrap; font-size: 0.88rem; color: var(--text2); }
.idx-rate { font-weight: 600; white-space: nowrap; }
.idx-amount { font-weight: 700; color: var(--gold); white-space: nowrap; }
.idx-int { font-weight: 700; white-space: nowrap; }
.idx-int-due { color: #e6a817; }
.idx-pending-label { font-size: 0.72rem; color: var(--text3); font-weight: 400; margin-top: 2px; }
.idx-misc { font-size: 0.82rem; }
.idx-misc-row { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; white-space: nowrap; }
.idx-misc-row:last-child { margin-bottom: 0; }
.topup-row { color: var(--green); }
.repaid-row { color: #3498db; }

/* ===== LOGIN SCREEN ===== */
#login-screen {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.login-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 36px 32px; width: 100%; max-width: 380px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.login-logo {
  width: 56px; height: 56px; border-radius: 12px; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #000; margin: 0 auto 16px;
}
.login-title { font-size: 1.4rem; font-weight: 700; color: var(--gold); text-align: center; margin-bottom: 4px; }
.login-sub { font-size: 0.85rem; color: var(--text3); text-align: center; margin-bottom: 28px; }
.login-error {
  background: var(--red-bg); border: 1px solid var(--red); border-radius: 6px;
  padding: 10px 14px; font-size: 0.88rem; color: var(--red); margin-bottom: 16px;
}

/* ===== FAVOURITE STAR BUTTON ===== */
.fav-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text3);
  padding: 2px 4px;
  transition: color .15s, transform .15s;
  line-height: 1;
}
.fav-star:hover { color: var(--gold); transform: scale(1.2); }
.fav-star.active { color: var(--gold); }
.fav-star.active i { text-shadow: 0 0 8px rgba(212,175,55,0.5); }

/* ===== SETTINGS PAGE ===== */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.settings-card.danger-zone { border-color: rgba(231,76,60,0.35); }
.settings-card.danger-zone .settings-card-title { color: var(--red); }

.settings-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold);
  padding: 12px 18px;
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info { flex: 1; min-width: 0; }
.settings-row-label { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.settings-row-sub { font-size: 0.82rem; color: var(--text3); line-height: 1.5; }

/* Sidebar footer simplified - see SIDEBAR FOOTER ACTIONS above */