/* ============================================================
   BBMS custom theme  —  modern card UI on AdminLTE 3 + Bootstrap 5
   ============================================================ */
:root{
    --bbms-red:#e4172b;
    --bbms-red-2:#ff5b6e;
    --bbms-bg:#f4f6fb;
    --bbms-card-radius:16px;
    --bbms-shadow:0 6px 22px rgba(45,45,90,.07);
    --bbms-ink:#2d2d5a;
}

/* ---- Bootstrap 4 -> 5 utility shim ----
   AdminLTE 3 markup uses BS4 utility names that no longer exist in BS5. */
.ml-auto{margin-left:auto!important}.mr-auto{margin-right:auto!important}
.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}
.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}
.pl-2{padding-left:.5rem!important}.pl-3{padding-left:1rem!important}
.pr-2{padding-right:.5rem!important}.pr-3{padding-right:1rem!important}
.float-right{float:right!important}.float-left{float:left!important}
@media(min-width:576px){.float-sm-right{float:right!important}.float-sm-left{float:left!important}}
.text-right{text-align:right!important}.text-left{text-align:left!important}
.font-weight-bold{font-weight:700!important}.font-weight-light{font-weight:300!important}
.font-weight-normal{font-weight:400!important}

/* ---- Page background ---- */
body.hold-transition,.content-wrapper{background:var(--bbms-bg)!important;}
/* AdminLTE JS used to set this; we do it in CSS now */
.content-wrapper{min-height:calc(100vh - 114px);}

/* ---- Cards: rounded, soft shadow, no harsh borders ---- */
.content-wrapper .card{border:0;border-radius:var(--bbms-card-radius);box-shadow:var(--bbms-shadow);margin-bottom:1rem;}
.content-wrapper .card-header{background:transparent;border-bottom:1px solid #eef0f5;
    border-radius:var(--bbms-card-radius) var(--bbms-card-radius) 0 0;padding:.9rem 1.25rem;}
.card-title{font-weight:600;color:var(--bbms-ink);}
.card-outline{border-top:0!important;}
.card-primary.card-outline,.card-danger.card-outline{border-top:3px solid var(--bbms-red)!important;}
.card-warning.card-outline{border-top:3px solid #f0ad4e!important;}
.card-success.card-outline{border-top:3px solid #28a745!important;}

/* ---- Buttons ---- */
.btn{border-radius:10px;font-weight:500;}
.btn-danger,.btn-primary{background:var(--bbms-red);border-color:var(--bbms-red);}
.btn-danger:hover,.btn-primary:hover,.btn-danger:focus,.btn-primary:focus{background:#c8101f;border-color:#c8101f;}
.btn-outline-danger{color:var(--bbms-red);border-color:var(--bbms-red);}
.btn-outline-danger:hover{background:var(--bbms-red);border-color:var(--bbms-red);}
.btn-xs{padding:.15rem .45rem;font-size:.75rem;border-radius:8px;line-height:1.4;}

/* ---- Tables ---- */
.table thead th{border-bottom:2px solid #eef0f5;color:#6b7280;font-weight:600;
    font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;}
.table td,.table th{vertical-align:middle;}
.table-hover tbody tr:hover{background:#fafbff;}
.thead-light th{background:#f8f9fc;}

/* ---- Badges ---- */
.badge{border-radius:8px;padding:.4em .6em;font-weight:600;font-size:.78em;}

/* ---- Forms ---- */
.form-control,.custom-select,select.form-control,textarea.form-control{border-radius:10px;}
.form-control:focus,select.form-control:focus{border-color:var(--bbms-red-2);
    box-shadow:0 0 0 .2rem rgba(228,23,43,.12);}
.required:after{content:" *";color:var(--bbms-red);}
label{font-weight:500;color:#4b5563;}

/* ---- Sidebar polish (Image-3 style rounded pill highlight) ---- */
.main-sidebar{box-shadow:2px 0 14px rgba(0,0,0,.07);}

/* Sidebar menu scrolls on its own (AdminLTE's JS scrollbar isn't loaded).
   The brand/logo stays fixed at the top; the nav below it fills the rest and scrolls.
   (sidebar.php also sets these with !important to override AdminLTE.) */
.main-sidebar{height:100vh;display:flex;flex-direction:column;overflow:hidden;}
.main-sidebar .brand-link{flex:0 0 auto;}
.main-sidebar .sidebar{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;}
.main-sidebar .sidebar::-webkit-scrollbar{width:6px;}
.main-sidebar .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px;}
.main-sidebar .sidebar::-webkit-scrollbar-track{background:transparent;}
.main-sidebar .sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;}
.brand-link{border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;}
.brand-link .brand-image{float:none;}
.brand-link .brand-logo-box{display:inline-flex;align-items:center;justify-content:center;
    background:#fff;border-radius:9px;padding:3px 7px;height:42px;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.brand-link .brand-logo-box img{max-height:34px;max-width:120px;object-fit:contain;display:block;}
.nav-sidebar>.nav-item>.nav-link{border-radius:10px;margin:2px 10px;}
.nav-sidebar .nav-link.active{background:var(--bbms-red)!important;color:#fff!important;
    box-shadow:0 3px 12px rgba(228,23,43,.45);}
.nav-sidebar .nav-treeview .nav-link.active{box-shadow:none;}
.nav-sidebar .nav-treeview{display:none;}
.nav-sidebar .menu-open>.nav-treeview{display:block;}
.nav-sidebar .menu-open>.nav-link .right{transform:rotate(-90deg);}

/* ---- Top navbar ---- */
.main-header.navbar{border-radius:0;box-shadow:0 2px 10px rgba(45,45,90,.05);border-bottom:0;}

/* ---- Content header (page title + breadcrumb) ---- */
.content-header h1{font-size:1.6rem;font-weight:700;color:var(--bbms-ink);}
.breadcrumb{background:transparent;margin-bottom:0;}
.breadcrumb-item a{color:var(--bbms-red);text-decoration:none;}

/* ---- Small-boxes (legacy) ---- */
.small-box{border-radius:var(--bbms-card-radius);box-shadow:var(--bbms-shadow);}
.small-box .icon i{opacity:.85;}

/* ---- DataTables controls ---- */
.dataTables_wrapper .row:first-child{padding:.4rem .25rem;}
.dataTables_wrapper .dataTables_filter input{border-radius:10px;border:1px solid #e2e6ef;}
.dataTables_wrapper .dataTables_length select{border-radius:8px;}
.page-item.active .page-link{background:var(--bbms-red);border-color:var(--bbms-red);}
.page-link{color:var(--bbms-red);}

/* ---- Modals ---- */
.modal-content{border:0;border-radius:14px;box-shadow:0 18px 50px rgba(45,45,90,.25);}
.modal-header{border-bottom:1px solid #eef0f5;}
.modal-header .close{background:transparent;border:0;font-size:1.4rem;line-height:1;opacity:.6;cursor:pointer;}
.modal-header .close:hover{opacity:1;}

/* ---- Login / register ---- */
.login-page,.register-page{background:linear-gradient(135deg,#ffe3e6,#eef1f8);}
.login-logo i,.register-logo i{color:var(--bbms-red);}
.login-box .card,.register-box .card{border-radius:var(--bbms-card-radius);box-shadow:0 12px 40px rgba(45,45,90,.15);}

/* ---- Alerts / callouts ---- */
.alert{border:0;border-radius:12px;}
.callout{border-radius:12px;box-shadow:none;}