/* =====================================================================
   BICS ADMIN THEME  v2  (one file for the whole dashboard)
   Save as  public/css/admin-theme.css  and load ONCE in the master
   layout <head>, AFTER the theme's own CSS:

   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ asset('css/admin-theme.css') }}">

   Contains: base, sidebar, header, user menu, page title, cards,
   buttons, badges, COMPACT tables + DataTables, forms, alerts, footer.
   (Dashboard cards keep their own .bd-* styles inside dashboard.blade.php)
   ===================================================================== */

:root{
  --navy:#00386e; --navy-2:#002b57; --blue:#0a5aa8;
  --orange:#faa635; --orange-2:#ff7a2f;
  --ink:#14284b; --muted:#6b7a99; --line:#e6ecf5; --soft:#f3f7fc;
  --radius:16px; --shadow:0 8px 26px rgba(20,40,75,.08);
}

/* ============ BASE ============ */
body,.page-container,.main-content{font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.main-content{background:var(--soft) !important}
.main-content-inner{padding:6px 26px 30px !important}
a{transition:color .15s}

/* ============ SIDEBAR ============ */
.sidebar-menu{
  background:linear-gradient(180deg,#00386e 0%,#002b57 55%,#001f40 100%) !important;
  box-shadow:6px 0 28px rgba(0,25,60,.28);
}
.sidebar-menu .sidebar-header{
  background:#fff !important;padding:14px 18px !important;text-align:center;
  border-bottom:4px solid var(--orange);box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.sidebar-menu .sidebar-header .logo{padding:0 !important}
.sidebar-menu .sidebar-header .logo h2{margin:0;line-height:1}
.sidebar-menu .sidebar-header .logo img{width:auto !important;height:42px;max-width:100%;transition:transform .25s}
.sidebar-menu .sidebar-header .logo a:hover img{transform:scale(1.05)}
.sidebar-menu .main-menu{padding:18px 14px 30px !important}
.sidebar-menu .menu-inner{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar-menu .menu-inner nav::before{
  content:"MAIN MENU";display:block;padding:0 10px 12px;
  font-size:12px;font-weight:600;letter-spacing:.2em;color:#7f9cc4;
}
.sidebar-menu .metismenu{margin:0;padding:0}
.sidebar-menu .metismenu > li{margin:0 0 6px;padding:0;border:0 !important;background:transparent !important}
.sidebar-menu .metismenu > li > a{
  position:relative;display:flex !important;align-items:center;gap:12px;
  padding:9px 40px 9px 10px !important;border-radius:14px;
  font-size:15px;font-weight:500;color:#d6e3f5 !important;background:transparent !important;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.sidebar-menu .metismenu > li > a > i{
  flex:none;width:36px;height:36px;margin:0 !important;display:grid;place-items:center;
  border-radius:11px;font-size:16px;color:var(--orange);background:rgba(255,255,255,.08);
  transition:background .2s,color .2s;
}
.sidebar-menu .metismenu > li > a > span{flex:1;line-height:1.25}
.sidebar-menu .metismenu > li > a::after{color:#9fb7da !important}
.sidebar-menu .metismenu > li > a:hover{background:rgba(255,255,255,.09) !important;color:#fff !important;transform:translateX(3px)}
.sidebar-menu .metismenu > li > a:hover > i{background:rgba(250,166,53,.22)}
.sidebar-menu .metismenu > li.active > a,
.sidebar-menu .metismenu > li:has(> ul > li.active) > a{
  background:linear-gradient(135deg,var(--orange),var(--orange-2)) !important;color:#fff !important;
  box-shadow:0 10px 22px rgba(255,122,47,.38);
}
.sidebar-menu .metismenu > li.active > a > i,
.sidebar-menu .metismenu > li:has(> ul > li.active) > a > i{background:rgba(255,255,255,.24);color:#fff}
.sidebar-menu .metismenu > li.active > a::after,
.sidebar-menu .metismenu > li:has(> ul > li.active) > a::after{color:#fff !important}
.sidebar-menu .metismenu li ul{
  margin:4px 0 6px 28px !important;padding:2px 0 2px 12px !important;
  border-left:2px solid rgba(250,166,53,.35);background:transparent !important;
}
.sidebar-menu .metismenu li ul li{margin:1px 0;padding:0;background:transparent !important}
.sidebar-menu .metismenu li ul li a{
  display:flex !important;align-items:center;gap:10px;padding:8px 12px !important;border-radius:10px;
  font-size:14px;font-weight:400;color:#b8cbe6 !important;background:transparent !important;
  transition:background .2s,color .2s,padding .2s;
}
.sidebar-menu .metismenu li ul li a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.sidebar-menu .metismenu li ul li a:hover{background:rgba(255,255,255,.08) !important;color:#fff !important;padding-left:15px !important}
.sidebar-menu .metismenu li ul li a:hover::before{background:var(--orange)}
.sidebar-menu .metismenu li ul li.active > a{background:rgba(250,166,53,.18) !important;color:#fff !important;font-weight:500}
.sidebar-menu .metismenu li ul li.active > a::before{background:var(--orange);box-shadow:0 0 0 4px rgba(250,166,53,.28)}
.sidebar-menu .metismenu a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ============ HEADER (balance + fullscreen) ============ */
.header-area{
  position:relative;padding:10px 26px !important;background:#fff !important;border-bottom:0 !important;
  box-shadow:0 6px 22px rgba(0,56,110,.08);
}
.header-area::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#00386e 0%,#0a5aa8 45%,#faa635 80%,#ff7a2f 100%);
}
.header-area .hd-balance{
  display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;
  font-size:15px;font-weight:600;color:var(--navy);
  background:linear-gradient(135deg,#fff8ee,#fff);border:1px solid #ffd9ac;border-radius:999px;
  box-shadow:0 6px 16px rgba(250,166,53,.18);
}
.header-area .hd-balance > i{
  flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  font-size:14px;color:#fff;background:linear-gradient(135deg,var(--orange-2),var(--orange));
  box-shadow:0 6px 14px rgba(255,122,47,.4);
}
.header-area .notification-area{margin:0;padding:0;display:flex;align-items:center;gap:10px;justify-content:flex-end;list-style:none}
.header-area .notification-area > li{
  float:none !important;margin:0 !important;padding:0 !important;width:40px;height:40px;
  display:grid;place-items:center;border-radius:12px;color:var(--navy);
  background:#f1f6fc;border:1px solid #e1eaf6;cursor:pointer;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.header-area .notification-area > li > i{font-size:17px;line-height:1;color:inherit}
.header-area .notification-area > li:hover{
  background:linear-gradient(135deg,var(--orange-2),var(--orange));border-color:transparent;color:#fff;
  transform:translateY(-2px);box-shadow:0 8px 18px rgba(255,122,47,.38);
}

/* ============ PAGE TITLE + BREADCRUMBS ============ */
.page-title-area{
  background:#fff !important;border-bottom:0 !important;
  box-shadow:0 6px 20px rgba(0,56,110,.06);padding:4px 26px !important;
}
.page-title-area .row{align-items:center}
.page-title-area .page-title{margin:0;font-size:24px;font-weight:600;color:var(--ink);letter-spacing:.2px}
.breadcrumbs-area{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.breadcrumbs-area .page-title{float:none !important}
.breadcrumbs{margin:0 !important;padding:0 !important;list-style:none;display:flex !important;align-items:center;gap:8px;float:none !important}
.breadcrumbs li{margin:0 !important;padding:0 !important;font-size:14px;color:var(--muted);line-height:1.2}
.breadcrumbs li::after{content:none !important}           /* remove theme's own slash */

.breadcrumbs li a{color:var(--orange-2);font-weight:500;text-decoration:none}
.breadcrumbs li a:hover{color:var(--navy);text-decoration:underline}

/* ============ USER MENU ("Super Admin") ============ */
.user-profile{
  float:right;position:relative;display:inline-flex !important;align-items:center;
  height:auto !important;margin:8px 0 8px auto !important;padding:0 !important;
  background:transparent !important;
}
.user-profile .user-name,
.user-profile h4.user-name{
  display:inline-flex !important;align-items:center;gap:10px;margin:0 !important;
  padding:6px 16px 6px 6px !important;
  font-size:15px !important;font-weight:500;letter-spacing:.2px;line-height:1.2;color:#fff !important;
  background:linear-gradient(135deg,var(--navy),var(--blue)) !important;
  border-radius:999px;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,56,110,.3);
  transition:transform .15s,box-shadow .15s;
}
.user-profile .user-name:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,56,110,.4)}
.user-profile .user-name::before{                          /* round avatar */
  content:"\f007";font-family:FontAwesome,"Font Awesome 5 Free","Font Awesome 6 Free";font-weight:900;
  flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  font-size:15px;color:#fff;background:linear-gradient(135deg,var(--orange-2),var(--orange));
}
.user-profile .user-name i{margin:0 0 0 2px !important;font-size:14px;color:rgba(255,255,255,.85)}
.user-profile .avatar,.user-profile .user-thumb{display:none}
.user-profile .dropdown-menu{
  margin-top:10px;padding:8px;min-width:190px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(0,30,70,.18);
}
.user-profile .dropdown-item{
  padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink);
  transition:background .15s,color .15s;
}
.user-profile .dropdown-item:hover{background:#fff3e3;color:var(--orange-2)}

/* ============ CARDS ============ */
.card{
  border:1px solid var(--line) !important;border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;background:#fff;overflow:hidden;
}
.card-body{padding:22px !important}
.header-title{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-size:19px;font-weight:700;color:var(--ink);
}
.header-title::before{content:"";width:5px;height:24px;border-radius:4px;background:linear-gradient(180deg,var(--orange),var(--orange-2))}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;font-size:14px;font-weight:500;line-height:1.3;
  border:0 !important;border-radius:10px !important;
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);text-decoration:none}
.btn:focus-visible{outline:3px solid rgba(250,166,53,.55);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,var(--orange-2),var(--orange)) !important;color:#fff !important;box-shadow:0 8px 18px rgba(255,122,47,.32)}
.btn-success{background:linear-gradient(135deg,#0f9f66,#27c485) !important;color:#fff !important;box-shadow:0 6px 14px rgba(15,159,102,.3)}
.btn-danger{background:linear-gradient(135deg,#d93a3a,#f06262) !important;color:#fff !important;box-shadow:0 6px 14px rgba(217,58,58,.3)}
.btn-info{background:linear-gradient(135deg,var(--navy),var(--blue)) !important;color:#fff !important;box-shadow:0 6px 14px rgba(0,56,110,.3)}
.btn-warning{background:linear-gradient(135deg,#f0a500,#ffc447) !important;color:#fff !important}
.btn-secondary{background:#e8eef7 !important;color:var(--navy) !important}
.btn-sm{padding:6px 12px;font-size:13px}

/* ============ BADGES + STATUS PILLS ============ */
.badge{display:inline-block;margin:2px 3px 2px 0;padding:5px 11px;font-size:12px;font-weight:500;border-radius:999px}
.badge-info{color:var(--blue) !important;background:#e4f0fc !important}
.badge-success,.st-active{color:#0f8a4b !important;background:#e3f6ec !important}
.badge-warning{color:#c27300 !important;background:#fff2dc !important}
.badge-danger,.st-inactive{color:#c43030 !important;background:#fde8e8 !important}
.badge-primary{color:#fff !important;background:var(--navy) !important}
/* use on status cells:  <span class="st-pill st-active">Activated</span> */
.st-pill{display:inline-block;padding:4px 12px;font-size:12px;font-weight:600;border-radius:999px;white-space:nowrap}

/* ============ TABLES (compact + aligned) ============ */
.data-tables{margin-top:4px}
.data-tables table,table.dataTable{
  width:100% !important;border-collapse:separate !important;border-spacing:0 !important;border:0 !important;
}
.data-tables table thead th,table.dataTable thead th{
  padding:11px 22px 11px 10px !important;          /* right space = sort arrow, no overlap */
  font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy) !important;background:#eef4fb !important;
  border:0 !important;border-bottom:2px solid var(--line) !important;
  white-space:nowrap;vertical-align:middle;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{background-position:right 6px center !important}
.data-tables table thead th:first-child{border-radius:10px 0 0 10px}
.data-tables table thead th:last-child{border-radius:0 10px 10px 0}
.data-tables table tbody td,table.dataTable tbody td{
  padding:9px 10px !important;
  font-size:14px;line-height:1.35;color:var(--ink);
  vertical-align:middle !important;               /* fixes mixed-height / unaligned cells */
  border:0 !important;border-bottom:1px solid var(--line) !important;background:#fff;
  font-variant-numeric:tabular-nums;
}
table.dataTable tbody td p,table.dataTable tbody td a,table.dataTable tbody td span{margin:0;vertical-align:middle}
table.dataTable tbody td a:not(.btn){color:var(--blue);font-weight:500;text-decoration:none}
table.dataTable tbody td a:not(.btn):hover{color:var(--orange-2);text-decoration:underline}
table.dataTable tbody tr:hover td{background:#fffaf2 !important}
table.dataTable tbody tr:last-child td{border-bottom:0 !important}
table.dataTable.no-footer{border-bottom:0 !important}
table.dataTable td:first-child,table.dataTable th:first-child{width:52px}
table.dataTable td.role-actions,.data-tables td .btn{white-space:nowrap}
.data-tables td .btn{padding:6px 12px;font-size:13px;margin:1px}

/* responsive "+" control: neat circle, centred, no overlap with the number */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child{position:relative;padding-left:38px !important}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before{
  content:"+" !important;
  position:absolute;left:10px;top:50%;margin-top:-9px;
  width:18px;height:18px;line-height:16px;text-align:center;
  font:700 14px/16px 'Outfit',Arial,sans-serif;color:#fff;
  background:var(--orange) !important;border:0 !important;border-radius:50%;box-shadow:0 3px 8px rgba(250,166,53,.45);
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before{content:"–" !important;background:var(--navy) !important}

/* expanded child row */
table.dataTable > tbody > tr.child ul.dtr-details{width:100%}
table.dataTable > tbody > tr.child span.dtr-title{font-weight:600;color:var(--navy);min-width:110px}

/* ============ DATATABLES CONTROLS ============ */
.dataTables_wrapper{font-size:14px;color:var(--muted)}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:400}
.dataTables_wrapper .dataTables_filter{float:right}
.dataTables_wrapper .dataTables_filter label{justify-content:flex-end}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  height:36px;padding:0 12px;margin:0 !important;color:var(--ink);background:#f7faff;
  border:1px solid #d6e1f0 !important;border-radius:10px;outline:0;
  transition:border-color .2s,box-shadow .2s;
}
.dataTables_wrapper .dataTables_length select{width:auto !important;padding-right:26px}
.dataTables_wrapper .dataTables_filter input{min-width:210px}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{border-color:var(--orange) !important;box-shadow:0 0 0 3px rgba(250,166,53,.2)}
.dataTables_wrapper .dataTables_info{padding-top:14px;font-size:13px}
.dataTables_wrapper .dataTables_paginate{padding-top:10px}

/* pagination: one clean button, not a box inside a box */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item,
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item:hover{
  padding:0 !important;margin:0 2px !important;border:0 !important;background:transparent !important;box-shadow:none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item){
  margin:0 2px;padding:6px 13px !important;color:var(--navy) !important;background:#fff !important;
  border:1px solid var(--line) !important;border-radius:10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  color:#fff !important;border-color:transparent !important;
  background:linear-gradient(135deg,var(--orange-2),var(--orange)) !important;
}
.page-link{
  padding:6px 13px;font-size:14px;color:var(--navy);background:#fff;
  border:1px solid var(--line) !important;border-radius:10px !important;box-shadow:none !important;
}
.page-link:hover{color:#fff;background:linear-gradient(135deg,var(--navy),var(--blue));border-color:transparent !important}
.page-item.active .page-link{color:#fff;background:linear-gradient(135deg,var(--orange-2),var(--orange)) !important;border-color:transparent !important;box-shadow:0 6px 14px rgba(255,122,47,.35) !important}
.page-item.disabled .page-link{color:#a9b6cc;background:#f5f8fc}

/* ============ FORMS ============ */
.form-control,.custom-select,select.form-control{
  min-height:44px;color:var(--ink);background:#f7faff;border:1px solid #d6e1f0;border-radius:12px;box-shadow:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-control:focus,.custom-select:focus{background:#fff;border-color:var(--orange);box-shadow:0 0 0 4px rgba(250,166,53,.2)}
label{font-weight:500;color:var(--ink)}
.custom-control-input:checked ~ .custom-control-label::before{background:var(--orange-2);border-color:var(--orange-2)}

/* ============ ALERTS ============ */
.alert{border:0 !important;border-left:5px solid var(--blue) !important;border-radius:12px !important;padding:12px 16px;font-size:14px;box-shadow:0 4px 14px rgba(20,40,75,.06)}
.alert-success{background:#e8f7ef;color:#0b6b3b;border-left-color:#27c485 !important}
.alert-danger{background:#fdecec;color:#a52a2a;border-left-color:#f06262 !important}
.alert-warning{background:#fff5e0;color:#8a5a00;border-left-color:var(--orange) !important}
.alert-info{background:#e8f2fc;color:var(--navy)}

/* ============ FOOTER ============ */
footer,.footer-area{background:#fff !important;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer p,.footer-area p{margin:0;padding:14px 0}

/* ============ SMALL SCREENS ============ */
@media (max-width:767px){
  .main-content-inner{padding:6px 12px 24px !important}
  .page-title-area{padding:4px 12px !important}
  .page-title-area .page-title{font-size:20px}
  .breadcrumbs-area{flex-wrap:wrap;gap:4px}
  .card-body{padding:14px !important}
  .header-area{padding:8px 12px !important}
  .dataTables_wrapper .dataTables_filter{float:none}
  .dataTables_wrapper .dataTables_filter input{min-width:0;width:100%}
  .user-profile{margin:6px 0 !important}
}