:root{
  --color-bg:#f7f8fc;
  --color-surface:#ffffff;
  --color-primary:#0d6efd;
  --color-primary-700:#0b5ed7;
  --color-text:#23262f;
  --color-muted:#6b7280;
  --radius:12px;
  --shadow:0 6px 20px rgba(0,0,0,.08);
  --shadow-strong:0 10px 24px rgba(0,0,0,.12);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --ease:cubic-bezier(0.4, 0, 0.2, 1);
  --transition:all .24s var(--ease);
  --topbar-h:56px;
}
html,body{height:100%}
body{background:var(--color-bg);color:var(--color-text);font-smooth:always;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.table{background:var(--color-surface)}
.page-title{display:flex;align-items:center;gap:.75rem;margin-bottom:var(--space-2)}
.page-title h1{font-size:1.5rem;margin:0}
.card{border:none;border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .24s var(--ease);will-change:box-shadow}
.card:hover{box-shadow:var(--shadow-strong)}
.btn{transition:var(--transition)}
.btn:focus,.btn:hover{filter:brightness(.96)}
.btn-primary{background:var(--color-primary);border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-700);border-color:var(--color-primary-700)}
.navbar-brand{font-weight:600}

/* Drawer navigation */
.drawer{position:fixed;top:0;left:0;height:100%;width:280px;background:var(--color-surface);box-shadow:var(--shadow);transform:translateX(-100%);transition:transform .24s var(--ease);z-index:1040;overflow:auto}
.drawer.open{transform:translateX(0)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .24s var(--ease);z-index:1030}
.drawer-overlay.visible{opacity:1;pointer-events:auto}
.topbar-toggle{border:none;background:transparent;color:#0d6efd;font-size:22px;line-height:1;padding:6px 10px;border-radius:8px}
.topbar-toggle:hover{background:#e9f2ff}
.drawer-link{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--color-text);text-decoration:none;border-radius:12px;margin:4px 8px}
.drawer-link:hover{background:#f1f5f9}
.drawer-link.active{background:#e9f2ff;color:var(--color-primary);font-weight:600}
.drawer-icon{margin-right:10px;opacity:.9}
.drawer-profile{padding:12px 16px}
.drawer-sep{margin:8px 16px}
.table-sticky thead th{position:sticky;top:0;background:#f8fafc;z-index:1}
.drawer-section-title{margin:8px 16px;font-weight:700;color:#0d6efd}
.btn-warning#loanAlertBell{font-weight:700; animation:pulse 1.2s infinite alternate}
.btn-warning#loanAlertBell.silent{animation:none}
@keyframes pulse{from{filter:brightness(1)} to{filter:brightness(1.3)}}
.alert-panel{position:fixed;top:60px;right:16px;width:340px;max-width:92vw;background:#fff;border-radius:12px;box-shadow:var(--shadow);z-index:1050;display:none}
.alert-panel.show{display:block}
.alert-item{border-bottom:1px solid #eee;padding:12px}
.alert-item:last-child{border-bottom:none}
.alert-title{font-weight:600}
.alert-meta{font-size:12px;color:#666}
.drawer{scrollbar-width:thin;scrollbar-color:#0d6efd #f1f5f9}
.drawer::-webkit-scrollbar{width:10px}
.drawer::-webkit-scrollbar-track{background:#f1f5f9;border-radius:12px}
.drawer::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0d6efd,#0b5ed7);border-radius:12px;border:2px solid #f1f5f9}
.drawer::-webkit-scrollbar-thumb:hover{background:#0b5ed7}

/* Sidebar layout */
.topbar{position:sticky;top:0;z-index:1050;background:linear-gradient(90deg,var(--color-primary-700),var(--color-primary));color:#fff;box-shadow:var(--shadow-strong)}
.topbar-inner{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);min-height:var(--topbar-h);max-width:1280px;margin:0 auto}
.topbar-brand{display:flex;align-items:center;gap:10px}
.brand-icon{width:32px;height:32px;border-radius:8px;background:#fff;color:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.brand-text{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.3px}
.topbar-toggle{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff}
.topbar-toggle:hover{background:rgba(255,255,255,.18)}
.topbar-user{margin-left:auto}
.user-chip{display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.12)}

/* Call notification banner */
.call-banner{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:2000;background:#fffae6;border:2px solid #f59e0b;color:#111;padding:10px 16px;border-radius:12px;box-shadow:var(--shadow-strong);display:none;align-items:center;gap:12px}
.call-banner .call-title{font-weight:700}
.call-banner .call-desc{font-size:14px}
.call-banner.show{display:flex;animation:blinkBg .8s ease-in-out 4}
@keyframes blinkBg{0%,100%{background:#fffae6}50%{background:#fff3cd}}

@media (min-width:992px){
  .drawer{transform:none}
  .drawer-overlay{display:none}
  .content{margin-left:280px;width:calc(100% - 280px);padding-top:var(--space-3);box-sizing:border-box}
  .topbar-inner{max-width:none;margin:0;padding-left:var(--space-3);padding-right:var(--space-3)}
  body.drawer-collapsed .drawer{transform:translateX(-100%)}
  body.drawer-collapsed .content{margin-left:0;width:100%}
  .topbar-toggle{display:inline-flex;align-items:center;justify-content:center}
}

/* Drawer spacing and aesthetics */
.drawer-header{border-bottom:1px solid var(--doc-border,#e5e7eb)}
.drawer-body{padding-top:var(--space-2)}
.drawer-link{padding:12px 16px;border-radius:8px;margin:2px 8px}
.drawer-link:hover{background:#eef2f7}

/* Content alignment fixes */
.content{padding-bottom:var(--space-3)}
.page-title{margin-top:var(--space-2)}

/* Table action alignment */
.table-actions{display:flex;gap:var(--space-1);justify-content:flex-end;align-items:center;flex-wrap:wrap}
.table-actions .btn{min-width:auto}
@media (max-width:480px){
  .table-actions{flex-direction:column;align-items:stretch}
  .table-actions .btn{width:100%}
}

/* Responsive helpers */
@media (max-width:480px){
  .container{padding-left:var(--space-2);padding-right:var(--space-2)}
  .btn{min-height:48px}
}
@media (max-width:768px){
  .table-responsive{overflow-x:auto}
}

/* Microinteractions */
.hover-raise{transition:var(--transition)}
.hover-raise:hover{transform:translateY(-1px)}

/* Accessible focus */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* Lazy images */
img[loading="lazy"]{opacity:.0;transition:opacity .3s var(--ease)}
img[data-loaded="true"]{opacity:1}
.img-fluid{max-width:100%;height:auto;display:block}
.img-cover{width:100%;height:100%;object-fit:cover}
.img-contain{width:100%;height:auto;object-fit:contain}
.img-frame{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px;box-shadow:var(--shadow)}
.brand-logo{height:40px;width:auto}
@media (max-width:480px){
  .img-frame{padding:6px;border-radius:10px}
}

/* Mobile refinements */
@media (max-width:576px){
  .topbar-inner{gap:12px}
  .topbar-user{display:block}
  .brand-text{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drawer{width:86vw;border-top-right-radius:16px;border-bottom-right-radius:16px}
  .drawer-header{position:sticky;top:0;background:#fff;z-index:1}
  .drawer-link{min-height:48px;font-size:16px}
  .topbar{border-bottom-left-radius:16px;border-bottom-right-radius:16px}
}