/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); */

::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

:root{
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --app-radius: 0.5rem;
  --app-shadow: 0 1px 2px rgba(58,59,69,.06), 0 4px 12px rgba(58,59,69,.08);
}
body{
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,.h1{font-size:1.75rem}  h2,.h2{font-size:1.5rem}
h3,.h3{font-size:1.25rem} h4,.h4{font-size:1.125rem}
h5,.h5{font-size:1rem}    h6,.h6{font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5{font-weight:600;line-height:1.25;letter-spacing:-0.015em}
table, .table, .stats, [class*="amount"], td, th{font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1;}
.card{border-radius: var(--app-radius); box-shadow: var(--app-shadow) !important;}
.btn{font-weight:500; letter-spacing:0;}
.form-control, .form-select{border-radius:.4rem;}
.card-body{padding:1.25rem 1.5rem;}
.card-header{padding:.9rem 1.5rem;}

/* ---- Rounded theme (radius only, no color) ---- */
:root{ --app-radius-lg: 1rem; }
/* Sidebar: round the right edge (left stays flush for the slide animation) */
.sidebar, aside.sidebar, #accordionSidebar{
  border-top-right-radius: var(--app-radius-lg);
  border-bottom-right-radius: var(--app-radius-lg);
}
/* Topbar/header: float with rounded corners */
.navbar.topbar, nav.topbar{
  border-radius: var(--app-radius);
  margin: .6rem .75rem 9px .75rem;
}
/* Everything else rounded */
.card, .modal-content{ border-radius: var(--app-radius-lg); }
/* Modal sizing: compiled style.min.css shrinks modal-dialog; restore proper widths */
@media (min-width: 576px){
  .modal-dialog{ margin:1.75rem auto; }
  .modal-dialog.modal-lg,.modal-lg{ max-width:900px; }
  .modal-dialog.modal-xl,.modal-xl{ max-width:1140px; }
}
.dropdown-menu, .alert, .list-group, .input-group, .toast{ border-radius: var(--app-radius); overflow: hidden; }
/* table wrapper: round corners WITHOUT clipping horizontal scroll */
.table-responsive{ border-radius: var(--app-radius); }
.list-group-item:first-child{ border-top-left-radius: var(--app-radius); border-top-right-radius: var(--app-radius); }
.list-group-item:last-child{ border-bottom-left-radius: var(--app-radius); border-bottom-right-radius: var(--app-radius); }
.btn, .btn-sm, .badge, .page-link, .form-control, .form-select, .custom-select, .custom-file-label, .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{ border-radius: .5rem; }
.badge{ border-radius: .4rem; }
.pagination .page-item:first-child .page-link{ border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.pagination .page-item:last-child .page-link{ border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
.img-profile, .sidebar-profile__pict, .rounded-avatar{ border-radius: 50%; }
.nav-pills .nav-link, .nav-tabs .nav-link{ border-radius: .5rem; }

/* ---- Distinct identity: minimal, no color ---- */
/* Sidebar pill navigation: floating rounded items instead of full-width bars */
.sidebar a.sidebar-link{ margin:.15rem .6rem; border-radius:.65rem; transition: background-color .15s ease; }
.sidebar a.sidebar-link:hover{ border-left-color:transparent; }
.sidebar .sidebar-item.active, .sidebar a.sidebar-link.active, .sidebar .sidebar-item > .active{ border-radius:.65rem; margin:.15rem .6rem; }
/* Card hover lift: subtle motion, neutral shadow only */
.card{ transition: box-shadow .2s ease, transform .2s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(58,59,69,.10), 0 14px 28px rgba(58,59,69,.09) !important; }

.wrapper {
    display: flex;
}

.main {
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    background-color: #fafbfe;
}

#sidebar {
    width: 70px;
    min-width: 70px;
    z-index: 1000;
    transition: all .25s ease-in-out;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

#sidebar.expand {
    width: 18rem;
    min-width: 18rem;
}

.toggle-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    padding: 1rem 1.5rem;
}

.toggle-btn i {
    font-size: 1.5rem;
    color: #FFF;
}

.sidebar-logo {
    margin: auto 0;
}

.sidebar-logo a {
    color: #FFF;
    font-size: 1.15rem;
    font-weight: 600;
}

#sidebar:not(.expand) .sidebar-logo,
#sidebar:not(.expand) a.sidebar-link span {
    display: none;
}

.sidebar-nav {
    padding: 2rem 0;
    flex: 1 1 auto;
}

a.sidebar-link {
    padding: .625rem 1.625rem;
    color: #FFF;
    display: block;
    font-size: 0.9rem;
    white-space: nowrap;
    border-left: 1px solid transparent;
}

.sidebar-link i {
    font-size: 1.1rem;
    margin-right: .75rem;
}

a.sidebar-link:hover {
    background-color: rgba(255, 255, 255, .075);
    color: white;
    border-left: 3px solid #3b7ddd;
}

.sidebar-item {
    position: relative;
}

.active {
    background-color: #2563eb;
}

#sidebar:not(.expand) .sidebar-item .sidebar-dropdown {
    position: absolute;
    top: 0;
    left: 70px;
    background-color: #0e2238;
    padding: 0;
    min-width: 15rem;
    display: none;
}

#sidebar:not(.expand) .sidebar-item:hover .has-dropdown+.sidebar-dropdown {
    display: block;
    max-height: 15em;
    width: 100%;
    opacity: 1;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

/* ============================================================
   "airtimee" design-language quick-wins
   Muted page bg, white flat hairline-bordered cards, WHITE
   sidebar with red-tint active pills. custom.css loads last,
   so these override the compiled theme. Extends the blocks
   above (Inter typography, rounded theme, pill nav, hover-lift).
   ============================================================ */
:root{
  --bg-page:#F8F9FB; --bg-card:#FFFFFF; --border-hairline:#E5E7EB; --border-strong:#D1D5DB;
  --text-strong:#0F172A; --text-muted:#64748B; --text-faint:#94A3B8; --fill-subtle:#F8FAFC;
  --radius-input:8px; --radius-card:12px; --radius-lg:14px; --radius-pill:999px;
  --primary:#2563eb; --primary-hover:#1d4ed8; --primary-active:#1E40AF; --primary-tint:#EFF6FF;
  /* Reconciled design tokens (Part C) */
  --text-heading:#1A1F2B; --text-body:#344054;
  --border-card:#EAECF0; --border-divider:#F2F4F7; --border-input:#D0D5DD;
  --success:#16A34A; --warn:#D97706; --danger:#DC2626;
  --bg-hover:#F2F4F7;
  --shadow-rest:0 1px 2px rgba(16,24,40,.05); --shadow-hover:0 4px 12px rgba(16,24,40,.08);
}

/* Page background */
body{ background:var(--bg-page); }

/* Cards: flat + hairline border (border replaces heavy shadow) */
.card{
  background:var(--bg-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-card);
  box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 4px 16px rgba(15,23,42,.08)!important; }
.card-header{ background:transparent; border-bottom:1px solid var(--border-hairline); padding:1rem 1.5rem; font-weight:600; }
.card-body{ padding:1.5rem; }

/* ---- Dashboard .ah-card: kill AdminLTE accent bars, flat hairline card ---- */
.border-bottom-primary,.border-bottom-warning,.border-bottom-success,.border-bottom-orange{ border-bottom:0!important; }
.ah-card{
  background:#fff;
  border:1px solid var(--border-card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-rest)!important;
  transition:box-shadow .15s,border-color .15s;
}
.ah-card:hover{ border-color:var(--border-input); box-shadow:var(--shadow-hover)!important; }
/* Drop decorative bubbles that read as noise on a white surface */
.bubble-shadow:before,.bubble-shadow:after{ display:none; }

/* Inputs */
.form-control,.form-select{
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-input);
  padding:.625rem .875rem;
  min-height:2.5rem;
  font-size:.875rem;
  line-height:1.5;
  background:#fff;
  box-shadow:none;
}
.form-control,.form-select{ border-color:var(--border-input); }
.form-control:focus,.form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }
.form-control::placeholder{ color:var(--text-faint); }
.form-label{ font-size:.8125rem; font-weight:500; color:var(--text-body); margin-bottom:.375rem; }
/* DataTables length/filter controls: fix clipped text + room for the select arrow */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
select.custom-select, select.custom-select-sm{
  height:auto;
  min-height:2.25rem;
  line-height:1.5;
  padding:.35rem .75rem;
}
.dataTables_wrapper .dataTables_length select,
select.custom-select, select.custom-select-sm{ padding-right:1.9rem; }

/* Buttons — blue primary accent, white secondary, focus ring */
.btn{ border-radius:var(--radius-input); font-weight:500; padding:.5rem 1rem; font-size:.8125rem; line-height:1.4; transition:background-color .15s,border-color .15s,box-shadow .15s; }
.btn:active{ transform:scale(.98); }
.btn:focus,.btn:focus-visible{ box-shadow:0 0 0 3px var(--primary-tint); outline:0; }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.btn-primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }
.btn-primary:active,.btn-primary.active{ background:var(--primary-active)!important; border-color:var(--primary-active)!important; }
.btn-secondary,.btn-outline-secondary{ background:#fff; border-color:var(--border-input); color:var(--text-body); }
.btn-secondary:hover,.btn-outline-secondary:hover{ background:var(--bg-hover); border-color:var(--border-input); color:var(--text-body); }
/* Secondary btn is now white — force any white icon/text inside to dark so it stays visible */
.btn-secondary .text-white,.btn-secondary .text-white-50,
.btn-outline-secondary .text-white,.btn-outline-secondary .text-white-50{ color:var(--text-body)!important; }

/* ---- WHITE SIDEBAR ---- */
.sidebar,.sidebar.bg-gradient-primary,aside.sidebar{
  background:#fff!important;
  background-image:none!important;
  border-right:1px solid var(--border-hairline);
}
/* Nav links: dark-on-white, floating pill */
.sidebar a.sidebar-link{
  color:var(--text-muted);
  margin:.15rem .6rem;
  border-radius:.65rem;
  padding:.6rem .85rem;
  font-weight:500;
}
.sidebar a.sidebar-link:hover{
  background:var(--fill-subtle);
  color:var(--text-strong);
  border-left-color:transparent;
}
/* Chrome: toggle icon + logo */
.sidebar .toggle-btn i,.sidebar-logo a{ color:var(--text-strong)!important; }
/* Profile block (name / description / balance) — was white on dark */
.sidebar-profile,.sidebar-profile *{ color:var(--text-strong); }
.sidebar-profile__meta p,.sidebar-profile__balance{ color:var(--bg-card); }
/* Show sidebar profile on mobile too (compiled theme hides it below 768px) */
.sidebar .sidebar-profile{ display:block !important; }
/* Active pill: `active` lands on the .sidebar-item LI for leaf/child items,
   and on the a.sidebar-link anchor for parent dropdowns. Cover both. */
.sidebar .sidebar-item.active,
.sidebar .sidebar-item.active>.sidebar-link,
.sidebar a.sidebar-link.active{
  background:var(--primary-tint)!important;
  color:var(--primary)!important;
  border-radius:.65rem;
}
/* 3px primary left-bar on the active item (inset shadow avoids clipping) */
.sidebar .sidebar-item.active>.sidebar-link,
.sidebar a.sidebar-link.active{
  box-shadow:inset 3px 0 0 var(--primary);
}
/* Sidebar section labels: 11px uppercase, faint */
.sidebar .sidebar-heading{
  font-size:.6875rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:600;
  color:var(--text-faint);
}
.sidebar .sidebar-item.active>.sidebar-link,
.sidebar a.sidebar-link.active{ border-left-color:transparent!important; }
/* Ensure the icon + label inside an active item inherit red */
.sidebar .sidebar-item.active>.sidebar-link i,
.sidebar .sidebar-item.active>.sidebar-link span,
.sidebar a.sidebar-link.active i,
.sidebar a.sidebar-link.active span{ color:var(--primary)!important; }

/* Topbar: slim white bar, hairline bottom, no heavy shadow */
.navbar.topbar,nav.topbar{
  background:#fff;
  border:1px solid var(--border-hairline);
  box-shadow:none!important;
}

/* Tables */
.table thead th{
  border:0;
  border-bottom:1px solid var(--border-card);
  color:var(--text-faint);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
}
.table td{ border-top:1px solid var(--border-divider); padding:.85rem 1rem; color:var(--text-body); }
.table tbody tr:hover{ background:var(--fill-subtle); }

/* Badges — soft tint pills */
.badge{ border-radius:.4rem; font-weight:600; padding:.35em .6em; }
.badge.bg-success,.badge-success{ background:#ECFDF3!important; color:var(--success)!important; }
.badge.bg-warning,.badge-warning{ background:#FFFAEB!important; color:var(--warn)!important; }
.badge.bg-danger,.badge-danger{ background:#FEF3F2!important; color:var(--danger)!important; }
.badge.bg-primary,.badge-primary{ background:var(--primary-tint)!important; color:var(--primary)!important; }

/* Sidebar open/close: ease width + left + content padding together */
#accordionSidebar{ transition: width .28s ease, left .28s ease, transform .3s ease-in-out; }
#content-wrapper{ transition: padding-left .28s ease; }

/* ============================================================
   (F) DASHBOARD COMPONENTS — used by Phase-2 markup
   KPI chips, trend chips, dashboard header, chart card,
   empty states. Primary Blue + White + Light Gray only.
   ============================================================ */
.kpi-icon{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-input); background:var(--primary-tint); color:var(--primary); font-size:1rem; }
.kpi-label{ font-size:.8125rem; font-weight:500; color:var(--text-muted); }
.kpi-value{ font-size:1.625rem; font-weight:700; color:var(--text-heading); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

.trend-chip{ display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; font-weight:600; padding:2px .5rem; border-radius:var(--radius-pill); }
.trend-chip.up{ background:#ECFDF3; color:var(--success); }
.trend-chip.down{ background:#FEF3F2; color:var(--danger); }
.trend-chip.flat{ background:var(--bg-hover); color:var(--text-muted); }

.dash-header h1,.dash-title{ font-size:1.375rem; font-weight:700; color:var(--text-heading); letter-spacing:-.01em; }
.dash-subtitle{ font-size:.8125rem; color:var(--text-muted); }

.chart-card .title-card,.chart-card__header{ display:flex; align-items:center; justify-content:space-between; }

.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:160px; padding:2rem 1.5rem; }
.empty-state .empty-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); background:var(--bg-hover); color:var(--text-faint); font-size:1.25rem; margin-bottom:.75rem; }
.empty-state .empty-title{ font-size:.9375rem; font-weight:600; color:var(--text-body); }
.empty-state .empty-desc{ font-size:.8125rem; color:var(--text-faint); margin-top:.25rem; }

/* ---- Breadcrumb: subtle, spacious, sits above the page title ---- */
.ah-breadcrumb{ margin:.25rem 0 1rem; }
.ah-breadcrumb .breadcrumb{ margin:0; padding:0; background:transparent; font-size:.8125rem; display:flex; align-items:center; }
.ah-breadcrumb .breadcrumb-item{ display:inline-flex; align-items:center; color:var(--text-muted); }
.ah-breadcrumb .breadcrumb-item a{ display:inline-flex; align-items:center; gap:.4rem; color:var(--text-muted); text-decoration:none; padding:.2rem .45rem; border-radius:6px; transition:color .15s ease, background-color .15s ease; }
.ah-breadcrumb .breadcrumb-item a:hover{ color:var(--primary); background:var(--primary-tint); }
.ah-breadcrumb .breadcrumb-item a i{ font-size:.8rem; opacity:.85; }
.ah-breadcrumb .breadcrumb-item.active{ background:transparent; color:var(--text-heading); font-weight:600; padding:.2rem .45rem; }
.ah-breadcrumb .breadcrumb-item + .breadcrumb-item{ padding-left:0; }
.ah-breadcrumb .breadcrumb-item + .breadcrumb-item::before{ content:"\203A"; color:var(--text-faint); padding:0 .3rem; font-size:1rem; line-height:1; }

/* Gradient table headers: white text so it is readable over the gradient */
.gradient-blue, .gradient-green{ color:#fff !important; }

/* ============================================================
   (G) AUTH — split-shell reskin (overrides compiled .login__*)
   [A] overrides existing hooks (zero markup change)
   [B] additive .auth-* for optional partials
   Reuses tokens from :root above. custom.css loads last.
   ============================================================ */

/* [A] ---- Shell + branding panel ---- */
.login{ min-height:100vh; background:var(--bg-page); }
.login__pict{
  background-image:
    linear-gradient(135deg, rgba(29,78,216,.88), rgba(37,99,235,.72), rgba(59,130,246,.62)),
    url('/assets/hero-bg-person.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:#2563eb!important;
  min-height:100vh; display:flex; flex-direction:column;
  padding:2.5rem 3rem!important; color:#fff; overflow:hidden; position:relative;
}
.login__pict::before{
  content:""!important; position:absolute; inset:0;
  background-image:none!important;
  background:
    radial-gradient(60% 60% at 18% 22%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(50% 50% at 85% 80%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.login__pict::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:22px 22px;
}
.login__logo{ mix-blend-mode:normal!important; height:auto; margin:0 0 auto; position:relative; z-index:2; }
.login__logo img{ height:38px; width:auto; object-fit:contain; object-position:left center; filter:brightness(0) invert(1); }
.login__copy{ position:relative; z-index:2; left:auto; bottom:auto; margin:auto 0 0; color:rgba(255,255,255,.78); font-size:.8125rem; }

/* Split ratio: blue panel 55% / form 45% on tablet+ */
@media (min-width:768px){
  .login .login__pict{ flex:0 0 55%!important; max-width:55%!important; }
  .login > .row > .col-lg-6:not(.login__pict){ flex:0 0 45%!important; max-width:45%!important; }
}

/* [A] ---- Auth card (form column) ---- */
.login .col-lg-6 .container-fluid{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem 1rem; }
.login__box{
  width:100%; max-width:28rem; margin:0 auto;
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-hover);
  padding:2.5rem; min-height:0;
}
.login__title{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:1.5rem!important; font-weight:700!important;
  color:var(--text-heading)!important; margin-bottom:.375rem;
}
.login__field{ margin-bottom:1rem; }
.login__box .form-control{
  height:44px; border:1px solid var(--border-input); border-radius:var(--radius-input);
  font-size:.9375rem; background:#fff;
}
.login__box .form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }
.login__box .form-label{ font-size:.8125rem; font-weight:500; color:var(--text-body); margin-bottom:.375rem; }

/* [A] ---- Errors / links / submit inside card ---- */
.login__box ul.text-danger{
  list-style:none; margin:.5rem 0 0; padding:.625rem .75rem;
  background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.24);
  border-radius:var(--radius-input); color:var(--danger); font-size:.8125rem;
}
.login__box ul.text-danger li{ display:flex; gap:.4rem; }
.login__box ul.text-danger li::before{ content:"\f06a"; font-family:"Font Awesome 5 Free"; font-weight:900; }
.login__box .link{ color:var(--primary); text-decoration:none; font-weight:500; }
.login__box .link:hover{ color:var(--primary-hover); text-decoration:underline; }
.login__box .btn-primary.w-100{ height:44px; display:inline-flex; align-items:center; justify-content:center; }

/* [B] ---- Additive: subtitle, icon-chip, alert, brand, 2-col ---- */
.auth-subtitle{ font-size:.8125rem; color:var(--text-muted); margin-bottom:1.5rem; }
.auth-chip{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); background:var(--primary-tint); color:var(--primary); font-size:1.125rem; margin-bottom:1rem; }
.auth-alert{ display:flex; gap:.5rem; padding:.75rem .875rem; border-radius:var(--radius-input); font-size:.8125rem; margin-bottom:1rem; }
.auth-alert.is-success{ background:rgba(22,163,74,.08); border:1px solid rgba(22,163,74,.24); color:var(--success); }
.auth-brand__headline{ font-family:'Inter',sans-serif; font-size:1.75rem; font-weight:700; margin:auto 0 .5rem; position:relative; z-index:2; }
.auth-brand__tagline{ font-size:.9375rem; color:rgba(255,255,255,.82); position:relative; z-index:2; }
.auth-brand__features{ list-style:none; padding:0; margin:1.25rem 0 auto; position:relative; z-index:2; }
.auth-brand__features li{ display:flex; gap:.625rem; align-items:center; margin-bottom:.625rem; font-size:.875rem; color:rgba(255,255,255,.9); }
.auth-brand__features li i{ color:#fff; opacity:.9; }
.auth-row-2col > [class*="col-"]{ margin-bottom:0; }

/* [B] ---- Submit loading spinner ---- */
.btn.is-loading{ position:relative; pointer-events:none; opacity:.85; }
.btn.is-loading .btn-spinner{ display:inline-block; width:1em; height:1em; margin-right:.5em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:auth-spin .6s linear infinite; vertical-align:-.15em; }
@keyframes auth-spin{ to{ transform:rotate(360deg); } }

/* ---- Responsive + a11y ---- */
@media (max-width:767.98px){
  /* Mobile: panel becomes a compact blue header (logo + headline + tagline), card below */
  .login{ background:var(--bg-page)!important; }
  .login .row.no-gutters{ min-height:auto; }
  .login__pict{
    display:flex!important;
    min-height:auto!important;
    padding:2rem 1.5rem 2.5rem!important;
  }
  .login__pict .auth-brand__features,
  .login__pict .login__copy{ display:none!important; }
  .login__logo{ margin:0 0 1rem!important; }
  .login__logo img{ height:34px; }
  .auth-brand__headline{ margin:0 0 .25rem!important; font-size:1.375rem; }
  .auth-brand__tagline{ font-size:.875rem; margin:0; }
  .login .col-lg-6 .container-fluid{ min-height:auto!important; padding:0 1rem 2.5rem; }
  .login__box{ box-shadow:0 10px 30px rgba(16,24,40,.12); margin-top:-1.5rem; }
}
@media (prefers-reduced-motion:reduce){
  .btn.is-loading .btn-spinner{ animation:none; }
  .login__box{ transition:none; }
}

/* Fix: style.min.css (SB Admin 2, loads last) has an inverted cascade where
   `.tab-content > .tab-pane{display:none}` is declared AFTER
   `.tab-content > .active{display:block}` at equal specificity, so it wins and
   hides even the active pane. Force the active pane visible (e.g. the
   transaction-history table lives inside a .tab-pane.active). */
.tab-content > .tab-pane.active,
.tab-content > .active,
.tab-pane.active {
  display: block !important;
}