html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: #f5f7fb;
}
:root { --bs-primary: #102a52; --bs-primary-rgb: 16,42,82; }
.table thead th { background: #102a52; color: #fff; border-color: #243f67; white-space: nowrap; }
.status-total { border-radius: .55rem; padding: .55rem .85rem; font-size: .85rem; font-weight: 600; }
.status-total strong { margin-left: .5rem; font-size: 1rem; }.status-total.active { color:#137333;background:#e9f8ee; }.status-total.soon { color:#a85a00;background:#fff3df; }.status-total.expired { color:#b42318;background:#ffeded; }

.balance-card { background: linear-gradient(120deg, #effaf3, #fff); border-left: 5px solid #198754 !important; }
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.login-page { min-height: 100vh; margin: 0; background: linear-gradient(135deg, #eef4ff, #f8fafc); display: grid; place-items: center; }
.login-shell { width: min(100% - 2rem, 430px); }
.login-card { background: #fff; padding: 2.75rem 2.25rem; border-radius: 1rem; box-shadow: 0 18px 50px rgba(30, 64, 175, .12); text-align: center; }
.login-card h1 { font-size: 1.55rem; font-weight: 700; margin: 1rem 0 .35rem; }
.login-card form { text-align: left; }
.brand-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: auto; border-radius: 50%; color: #fff; background: #2563eb; font-size: 2rem; font-weight: 700; }
.app-shell { display:flex; min-height:100vh; }.app-sidebar { width:245px; background:#102a52; color:#dce7f6; display:flex; flex-direction:column; padding:1.25rem .9rem; position:sticky; top:0; height:100vh; }.sidebar-brand { display:flex; gap:.65rem; align-items:center; color:#fff; font-weight:700; font-size:1.05rem; line-height:1.1; text-decoration:none; padding:.4rem .6rem 1.5rem; }.sidebar-nav { display:flex; flex-direction:column; gap:.25rem; }.sidebar-nav a { color:#c8d6ea; text-decoration:none; border-radius:.45rem; padding:.7rem .75rem; font-size:.93rem; }.sidebar-nav a:hover,.sidebar-nav a:focus { color:#fff; background:#214575; }.sidebar-label { color:#7f9ac1; text-transform:uppercase; font-size:.68rem; font-weight:700; letter-spacing:.08em; padding:1.2rem .75rem .35rem; }.sidebar-footer { margin-top:auto; border-top:1px solid #31567f; padding:.9rem .3rem 0; }.sidebar-footer .navbar-nav { display:block; }.sidebar-footer .nav-link { color:#dce7f6; padding:.3rem; }.app-content { flex:1; min-width:0; }.app-topbar { height:62px; background:#fff; border-bottom:1px solid #e5eaf1; display:flex; justify-content:space-between; align-items:center; padding:0 2rem; font-weight:600; }.recharge-row[data-status="Active"] { border-left:4px solid #198754; }.recharge-row[data-status="Expiring Soon"] { border-left:4px solid #fd7e14; }.recharge-row[data-status="Expired"] { border-left:4px solid #dc3545; }@media(max-width:768px){.app-sidebar{width:58px;padding:.8rem .35rem}.sidebar-brand span,.sidebar-nav a{font-size:0}.sidebar-nav a:first-letter{font-size:1.1rem}.sidebar-label{display:none}.app-topbar{padding:0 1rem}}