/* Booremit Modern UI layer - loaded LAST on user + admin pages.
   Pure CSS: no markup/logic changes. Remove the <link> to roll back. */
:root{
  --bm-bg:#05130f; --bm-surface:#0a1f1b; --bm-card:#0d2723;
  --bm-text:#f2f8f6; --bm-muted:rgba(242,248,246,.62);
  --bm-border:rgba(255,255,255,.09); --bm-radius:20px;
  --bm-gold:#e0963a; --bm-gold-2:#f2b660; --bm-teal:#2fb7a4;
  --bm-glass:rgba(255,255,255,.045); --bm-glass-2:rgba(255,255,255,.07);
  --bm-shadow:0 10px 30px -12px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.04) inset;
  --bm-ring:0 0 0 4px rgba(224,150,58,.22);
  --bm-ease:cubic-bezier(.2,.8,.2,1);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em;line-height:1.55;
  background:
    radial-gradient(900px 520px at 12% -8%,rgba(224,150,58,.16),transparent 60%),
    radial-gradient(800px 520px at 108% 8%,rgba(47,183,164,.14),transparent 60%),
    radial-gradient(700px 600px at 50% 120%,rgba(23,77,81,.35),transparent 60%),
    var(--bm-bg) fixed !important;
  color:var(--bm-text);
  animation:bm-in .35s var(--bm-ease) both;
}
@keyframes bm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
::selection{background:rgba(224,150,58,.35)}
h1,h2,h3,h4,.header-title,.bm-page-title{letter-spacing:-.02em;font-weight:700;color:var(--bm-text)}
.amount,.balance,.bm-mono,td.num,.kv b,.bm-v{font-variant-numeric:tabular-nums}
a{transition:color .15s}
:focus-visible{outline:2px solid var(--bm-gold-2);outline-offset:2px;border-radius:8px}

/* ---------- Surfaces ---------- */
.card,.bm-card,.bm-panel,.panel,.box,.content-box{
  background:linear-gradient(180deg,var(--bm-glass-2),var(--bm-glass)) !important;
  border:1px solid var(--bm-border) !important;border-radius:var(--bm-radius) !important;
  box-shadow:var(--bm-shadow) !important;color:var(--bm-text);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .25s var(--bm-ease),border-color .25s,box-shadow .25s;
}
a.card:hover,.card.clickable:hover,.pay-bill-content:hover{transform:translateY(-2px);border-color:rgba(224,150,58,.35) !important}
.card-header,.bm-panel-head{background:transparent !important;border-bottom:1px solid var(--bm-border) !important}
.bm-panel-title{font-weight:700}.bm-panel-sub,.bm-muted,.text-muted,.small{color:var(--bm-muted) !important}
.detail-row,.kv,.bm-kv{border-color:var(--bm-border) !important}
hr{border-color:var(--bm-border);opacity:1}

/* ---------- Buttons ---------- */
.btn,button.primary,.primary,.bm-btn-ghost{
  border-radius:14px !important;font-weight:600;letter-spacing:0;
  transition:transform .18s var(--bm-ease),box-shadow .2s,background .2s,border-color .2s,filter .2s;
}
.btn-primary,button.primary,.primary,.btn-success{
  background:linear-gradient(135deg,var(--bm-gold-2),var(--bm-gold)) !important;
  border:0 !important;color:#1a1105 !important;
  box-shadow:0 8px 22px -8px rgba(224,150,58,.65),0 1px 0 rgba(255,255,255,.35) inset !important;
}
.btn-primary:hover,button.primary:hover,.primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:active,.primary:active{transform:translateY(0) scale(.985)}
.btn-outline-secondary,.btn-outline-primary,.btn-secondary,.bm-btn-ghost,.btn-light{
  background:var(--bm-glass) !important;border:1px solid var(--bm-border) !important;color:var(--bm-text) !important}
.btn-outline-secondary:hover,.btn-outline-primary:hover,.bm-btn-ghost:hover,.btn-secondary:hover{
  background:var(--bm-glass-2) !important;border-color:rgba(224,150,58,.45) !important}
.btn-danger{border-radius:14px !important}
.btn:disabled,.btn.disabled{opacity:.5;filter:saturate(.6)}

/* ---------- Forms ---------- */
.form-control,.form-select,.bm-input,input.input,.control,.field input,.field select,.field textarea,
.pin-input,input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
  background:rgba(255,255,255,.05) !important;color:var(--bm-text) !important;
  border:1px solid var(--bm-border) !important;border-radius:14px !important;
  min-height:46px;padding-inline:14px;transition:border-color .2s,box-shadow .2s,background .2s;
}
textarea{padding-block:12px}
.form-control:focus,.form-select:focus,.bm-input:focus,.control:focus,.pin-input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--bm-gold) !important;box-shadow:var(--bm-ring) !important;background:rgba(255,255,255,.08) !important;outline:0}
::placeholder{color:rgba(242,248,246,.38) !important}
option{background:#0a1f1b;color:var(--bm-text)}
.form-label,.bm-label,.label,.pin-label{font-weight:600;font-size:.82rem;color:var(--bm-muted);letter-spacing:.01em}
.inline-error{color:#ff8d8d}
input[type=checkbox],input[type=radio]{accent-color:var(--bm-gold)}

/* ---------- Tables & badges ---------- */
.table,.bm-table{--bs-table-bg:transparent;--bs-table-color:var(--bm-text);--bs-table-border-color:var(--bm-border);
  --bs-table-hover-bg:rgba(255,255,255,.04);--bs-table-striped-bg:rgba(255,255,255,.02);color:var(--bm-text);margin:0}
.table thead th,.bm-table thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:var(--bm-muted) !important;background:rgba(255,255,255,.03) !important;border-bottom:1px solid var(--bm-border) !important;white-space:nowrap}
.table td,.table th,.bm-table td{vertical-align:middle;border-color:var(--bm-border) !important}
.table tbody tr{transition:background .15s}.table tbody tr:hover{background:rgba(255,255,255,.04)}
.table-responsive{border-radius:16px;scrollbar-width:thin}
.badge,.bm-badge,.pill{border-radius:999px !important;font-weight:600;font-size:.72rem;padding:.38em .8em;letter-spacing:.02em}
.bg-success,.badge-success{background:rgba(47,183,164,.18) !important;color:#5ee0cc !important}
.bg-danger,.badge-danger{background:rgba(255,99,99,.16) !important;color:#ff9a9a !important}
.bg-warning,.badge-warning{background:rgba(242,182,96,.18) !important;color:var(--bm-gold-2) !important}
.alert{border-radius:16px;border:1px solid var(--bm-border);background:var(--bm-glass)}
.modal-content,.dropdown-menu,.offcanvas{background:var(--bm-card) !important;border:1px solid var(--bm-border) !important;
  border-radius:20px;color:var(--bm-text);box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.dropdown-item{border-radius:10px;color:var(--bm-text)}.dropdown-item:hover{background:var(--bm-glass-2)}

/* ---------- User app shell ---------- */
.container,.site-content{max-width:560px}
.header-title{font-size:1.15rem}
.back-btn{background:var(--bm-glass) !important;border:1px solid var(--bm-border) !important;border-radius:14px !important;
  transition:background .2s,transform .2s}.back-btn:hover{background:var(--bm-glass-2) !important;transform:translateX(-2px)}
.pay-bill-content,.pay-bill-name{transition:transform .2s var(--bm-ease)}
.pay-bill-img{border-radius:16px}
.navwrap{background:transparent !important}
.bottomnav{background:rgba(8,26,22,.78) !important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--bm-border) !important;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px -16px rgba(0,0,0,.7)}
.bottomnav a,.bottomnav .item{transition:color .2s,transform .2s}.bottomnav a:hover{transform:translateY(-2px)}
.pin-input{text-align:center;font-weight:700;letter-spacing:.35em;font-size:1.25rem}
.loader-mask{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- Admin shell ---------- */
.bm-admin-body{background-attachment:fixed}
.bm-sidebar{background:linear-gradient(180deg,rgba(10,31,27,.97),rgba(5,19,15,.97)) !important;
  border-right:1px solid var(--bm-border) !important;box-shadow:12px 0 40px -24px rgba(0,0,0,.8)}
.bm-sidebar-brand{border-bottom:1px solid var(--bm-border);padding-bottom:14px}
.bm-brand-title{font-weight:800;letter-spacing:-.02em}.bm-brand-tag{color:var(--bm-gold-2);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.bm-nav a{position:relative;border-radius:12px !important;color:var(--bm-muted);font-weight:500;transition:background .18s,color .18s,padding .18s}
.bm-nav a:hover{background:var(--bm-glass-2) !important;color:var(--bm-text) !important}
.bm-nav a.active,.bm-nav li.active>a{background:linear-gradient(90deg,rgba(224,150,58,.2),rgba(224,150,58,.04)) !important;color:var(--bm-gold-2) !important}
.bm-nav a.active::before,.bm-nav li.active>a::before{content:"";position:absolute;left:-2px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--bm-gold)}
.bm-nav-sub a{font-size:.9rem}
.bm-topbar{position:sticky;top:0;z-index:50;background:rgba(5,19,15,.72) !important;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--bm-border) !important}
.bm-top-search{border-radius:999px !important;background:var(--bm-glass) !important;border:1px solid var(--bm-border) !important}
.bm-top-search-kbd{border-radius:8px;background:var(--bm-glass-2);border:1px solid var(--bm-border);color:var(--bm-muted)}
.bm-icon-btn{border-radius:12px !important;background:var(--bm-glass) !important;border:1px solid var(--bm-border) !important;transition:background .2s}
.bm-icon-btn:hover{background:var(--bm-glass-2) !important}
.bm-user-avatar{border-radius:14px !important;box-shadow:0 0 0 2px rgba(224,150,58,.4)}
.bm-page-title{font-size:1.65rem;font-weight:800}.bm-page-sub{color:var(--bm-muted)}
.bm-k{color:var(--bm-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}.bm-v{font-weight:600}

/* ---------- Polish ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
@media (max-width:576px){.card,.bm-card,.bm-panel{border-radius:18px !important}.bm-page-title{font-size:1.35rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}