:root{
  --sidebar-w: 260px;
  --brand: #2563eb;
  --brand-light: #eaf1ff;
  --bg: #f5f7fb;
  --text-muted: #6b7280;
  --border: #e7eaf0;
}
*{font-family:'Inter',sans-serif;}
body{background:var(--bg); color:#1f2430;}

/* Sidebar */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:#ffffff; border-right:1px solid var(--border);
  overflow-y:auto; z-index:1030; transition: margin-left .2s ease;
}
.sidebar .brand{
  display:flex; align-items:center; gap:.6rem; padding:1.1rem 1.2rem;
  border-bottom:1px solid var(--border);
}
.sidebar .brand-icon{
  width:36px;height:36px;border-radius:8px;background:var(--brand);
  color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;
}
.sidebar .brand-text{font-weight:700; font-size:.95rem; line-height:1.1;}
.sidebar .brand-text small{display:block; color:var(--text-muted); font-weight:400; font-size:.72rem;}

.nav-section-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:#9aa1ad; padding:1rem 1.2rem .3rem; font-weight:600;
}
.sidebar .nav-link{
  color:#3b4252; font-size:.875rem; padding:.55rem 1.2rem; border-radius:0;
  display:flex; align-items:center; gap:.65rem;
}
.sidebar .nav-link i{font-size:1rem; width:18px; text-align:center; color:#8a93a3;}
.sidebar .nav-link:hover{background:#f3f5f9;}
.sidebar .nav-link.active{background:var(--brand-light); color:var(--brand); font-weight:600; border-right:3px solid var(--brand);}
.sidebar .nav-link.active i{color:var(--brand);}
.sidebar .nav-link .badge-soft{margin-left:auto; font-size:.65rem; background:#fef3c7; color:#92400e; font-weight:600; padding:.15rem .45rem; border-radius:6px;}
.sidebar .nav-link.disabled{opacity:.45; cursor:not-allowed;}

/* Topbar */
.topbar{
  margin-left:var(--sidebar-w); height:64px; background:#fff;
  border-bottom:1px solid var(--border); display:flex; align-items:center;
  padding:0 1.25rem; gap:1rem; position:sticky; top:0; z-index:1020;
}
.topbar .search-box{max-width:360px;}
.topbar .icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#f3f5f9; color:#4b5563; position:relative; border:none;
}
.topbar .icon-btn .dot{position:absolute; top:6px; right:8px; width:7px;height:7px;border-radius:50%;background:#ef4444;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand); color:#fff; display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;}

.content{margin-left:var(--sidebar-w); padding:1.5rem;}

/* Cards */
.stat-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.25rem;}
.stat-card .stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.stat-card .stat-value{font-size:1.5rem; font-weight:700;}
.stat-card .stat-label{color:var(--text-muted); font-size:.8rem;}
.stat-trend{font-size:.75rem; font-weight:600;}

.panel{background:#fff; border:1px solid var(--border); border-radius:12px;}
.panel-header{padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;}
.panel-header h6{margin:0; font-weight:700;}

/* Filters */
.filter-bar{background:#fbfcfe; border:1px solid var(--border); border-radius:10px; padding:.9rem 1rem;}
.filter-bar label{font-size:.72rem; color:var(--text-muted); font-weight:600; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.03em;}
.form-control, .form-select{font-size:.85rem;}

/* Table */
table.ajax-table thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);
  background:#fafbfd; border-bottom:1px solid var(--border); font-weight:700; white-space:nowrap;
}
table.ajax-table td{font-size:.85rem; vertical-align:middle;}
table.ajax-table tbody tr:hover{background:#f8faff;}
.badge-status{font-size:.72rem; font-weight:600; padding:.3rem .55rem; border-radius:6px;}
.badge-paid{background:#dcfce7;color:#166534;}
.badge-pending{background:#fef3c7;color:#92400e;}
.badge-hold{background:#fee2e2;color:#991b1b;}
.badge-verified{background:#dbeafe;color:#1e40af;}
.row-actions .btn{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;}

.table-loading{position:relative;}
.table-loading-overlay{
  position:absolute; inset:0; background:rgba(255,255,255,.7); display:flex;
  align-items:center; justify-content:center; backdrop-filter: blur(1px);
}

/* Pagination */
.pagination-bar{display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; flex-wrap:wrap; gap:.75rem;}
.pagination .page-link{font-size:.82rem; color:#374151;}
.pagination .page-item.active .page-link{background:var(--brand); border-color:var(--brand);}
.goto-page{display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-muted);}
.goto-page select{width:auto;}

.delete-confirm-input.is-valid-typed{border-color:#16a34a;}

@media (max-width: 991.98px){
  .sidebar{margin-left:calc(-1 * var(--sidebar-w));}
  .sidebar.show{margin-left:0;}
  .topbar, .content{margin-left:0;}
}

/* Auth pages (login/register/forgot password) */
.auth-wrapper{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:1.5rem;
}
.auth-card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  width:100%; max-width:420px; padding:2rem 2rem 1.75rem; box-shadow:0 1px 3px rgba(16,24,40,.06);
}
.auth-card .brand-icon{
  width:44px;height:44px;border-radius:10px;background:var(--brand);
  color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;
}
.auth-card h5{font-weight:700; margin-top:1rem;}
.auth-card .text-muted{font-size:.85rem;}
.auth-card label{font-size:.82rem; font-weight:600; color:#374151;}
.auth-card .btn-primary{background:var(--brand); border-color:var(--brand);}
.status-message{font-size:.82rem; background:#dcfce7; color:#166534; border-radius:8px; padding:.5rem .75rem;}

/* ===== Searchable Select Widget (.ss-*) ===== */
.ss-wrap{position:relative;}
.ss-btn{
    text-align:left; font-size:.875rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat:no-repeat; background-position:right .75rem center; background-size:16px 12px;
    padding-right:2.25rem; cursor:pointer; width:100%;
}
.ss-btn:focus{outline:none; border-color:#86b7fe; box-shadow:0 0 0 .25rem rgba(13,110,253,.25);}
.ss-panel{position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:9999; background:#fff;}
.ss-opt{cursor:pointer; font-size:.875rem; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ss-opt:hover{background:#f0f4ff;}
.ss-selected{background:#e8f0fe; color:#1a56db;}
.ss-hidden{display:none !important;}