/* ==========================================================================
   Bagja Motor — Admin Redesign
   Custom overrides loaded after adminlte.min.css + lib.min.css.
   See /docs/md/design.md for the full design system spec.
   ========================================================================== */

/* --- legacy rules (kept) -------------------------------------------------- */
.flexigrid div.form-div input[type=text],.flexigrid div.form-div input[type=password]{height:auto!important}
.checkbox,.radio{display:inline;margin-bottom:0;margin-top:5px}
.ajax_list .fa{font-size:18px;color:inherit;text-decoration:none}

/* --- self-hosted Mukta (latin subset, static weights) ----------------------- */
@font-face{
  font-family:"Mukta";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/mukta-v17-latin-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Mukta";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/mukta-v17-latin-500.woff2") format("woff2");
}
@font-face{
  font-family:"Mukta";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/mukta-v17-latin-600.woff2") format("woff2");
}
@font-face{
  font-family:"Mukta";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/mukta-v17-latin-700.woff2") format("woff2");
}

/* --- design tokens --------------------------------------------------------- */
:root{
  --c-primary-50:#fff7ed;
  --c-primary-100:#ffedd5;
  --c-primary-300:#fdba74;
  --c-primary-500:#f97316;
  --c-primary-600:#ea580c;
  --c-primary-700:#c2410c;

  --c-ink-900:#1a1d23;
  --c-ink-800:#23262e;
  --c-ink-700:#2f333d;
  --c-ink-600:#3d4250;
  --c-ink-500:#6b7280;
  --c-ink-300:#d1d5db;
  --c-ink-200:#e5e7eb;
  --c-ink-100:#f3f4f6;
  --c-ink-0:#ffffff;

  --c-blue-500:#3b82f6;
  --c-blue-600:#2563eb;

  --c-success-500:#16a34a;
  --c-success-100:#dcfce7;
  --c-warning-500:#d97706;
  --c-warning-100:#fef9c3;
  --c-danger-500:#dc2626;
  --c-danger-100:#fee2e2;
  --c-info-500:#0ea5e9;
  --c-info-100:#e0f2fe;

  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;

  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 2px 10px rgba(16,24,40,.10);
  --shadow-lg:0 12px 32px rgba(16,24,40,.16);

  --font-ui:"Mukta","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}

/* --- base ------------------------------------------------------------------ */
html,body{
  background:var(--c-ink-100);
}
body{
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--c-ink-800);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-ui);
  font-weight:600;
  color:var(--c-ink-900);
}
a{color:var(--c-blue-600)}
a:hover,a:focus{color:var(--c-blue-600)}
::selection{background:var(--c-primary-300);color:var(--c-ink-900)}
:focus-visible{outline:2px solid var(--c-primary-500);outline-offset:2px}

/* thin scrollbars for tables/sidebar */
.table-responsive::-webkit-scrollbar,.sidebar::-webkit-scrollbar{height:8px;width:8px}
.table-responsive::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:8px}

/* --- content shell ----------------------------------------------------------- */
.content-wrapper,.right-side{background:var(--c-ink-100)!important}
.content-wrapper{min-height:100vh}
.content-header{padding:18px 15px 6px}
.content-header>h1{
  font-size:21px;
  font-weight:700;
  color:var(--c-ink-900);
  margin:0 0 4px;
}
.content-header>h1>small{color:var(--c-ink-500);font-size:13px}
.content{padding:0 15px 30px}

/* breadcrumb */
.content-header .breadcrumb{
  background:var(--c-ink-0);
  border:1px solid var(--c-ink-200);
  border-radius:var(--radius-sm);
  padding:6px 12px;
  box-shadow:none;
  float:none;
  display:inline-flex;
  flex-wrap:wrap;
}
.breadcrumb>li+li:before{color:var(--c-ink-300);content:"/\00a0"}
.breadcrumb>li{font-size:13px;color:var(--c-ink-500)}
.breadcrumb>li>a{color:var(--c-ink-600)}
.breadcrumb>.active{color:var(--c-primary-600);font-weight:600}

/* --- top header / navbar ---------------------------------------------------- */
.main-header,.skin-green .main-header{
  box-shadow:var(--shadow-sm);
}
.main-header .navbar,.skin-green .main-header .navbar{
  background:var(--c-ink-0)!important;
  min-height:60px;
  /* AdminLTE hardcodes this to the stock 230px logo width; ours is 260px,
     so without this the white navbar bar starts 30px before the dark logo
     box actually ends, overlapping its top-right corner. */
  margin-left:260px;
}
@media (max-width:767px){
  /* AdminLTE's own mobile rule sets both .logo and .navbar to width:100% +
     float:none, intending them to stack as two full-width rows. Our logo's
     fixed width:260px (below) beats that 100% at equal specificity since this
     file loads last — but float:none still applies unopposed, so the two end
     up as separate block-level rows instead of one row, which is the
     "double dark bar" stacking. Making .main-header a flex row sidesteps the
     float/width tug-of-war entirely: logo keeps its natural width, navbar
     fills whatever space is left, both on one line. */
  .main-header{display:flex;align-items:stretch;flex-wrap:nowrap;position:relative}
  .main-header .logo,.skin-green .main-header .logo{
    flex:0 0 auto;
    width:auto;
    float:none;
  }
  .main-header .navbar,.skin-green .main-header .navbar{
    flex:1 1 0%;
    min-width:0;
    width:auto;
    float:none;
    margin-left:0;
  }
}
.main-header .logo,.skin-green .main-header .logo{
  background:var(--c-ink-900)!important;
  color:#fff!important;
  height:60px;
  line-height:normal;
  font-weight:700;
  letter-spacing:.02em;
  border-bottom:none;
  width:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 14px;
}
.main-header .logo:hover,.skin-green .main-header .logo:hover{background:var(--c-ink-800)!important}
.main-header .logo .logo-mark{
  flex:0 0 auto;
  width:32px;height:32px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--c-primary-500),var(--c-primary-700));
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:15px;
}
.main-header .logo .logo-text{
  font-size:17px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.main-header .navbar .sidebar-toggle,.skin-green .main-header .navbar .sidebar-toggle{
  color:var(--c-ink-600);
  height:60px;
  padding:20px 15px;
}
.main-header .navbar .sidebar-toggle:hover,.skin-green .main-header .navbar .sidebar-toggle:hover{
  background:var(--c-ink-100);
  color:var(--c-ink-900);
}
.main-header .navbar-custom-menu .navbar-nav>li>a,.skin-green .main-header .navbar-custom-menu .navbar-nav>li>a{
  color:var(--c-ink-700);
  height:60px;
  padding:18px 16px;
}
.main-header .navbar-custom-menu .navbar-nav>li>a:hover,
.main-header .navbar-custom-menu .navbar-nav>.open>a{
  background:var(--c-ink-100)!important;
  color:var(--c-ink-900)!important;
}
.navbar-nav>.user-menu .dropdown-menu{
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--c-ink-200);
  overflow:hidden;
}
.navbar-nav>.user-menu .dropdown-menu li.user-header{
  background:var(--c-ink-900)!important;
}

/* --- sidebar ----------------------------------------------------------------- */
.main-sidebar,.skin-green .main-sidebar,.skin-green .left-side{
  background:var(--c-ink-900)!important;
  width:260px;
  /* header is 60px tall now (was AdminLTE's stock 50px) — the sidebar is
     absolutely positioned so it needs matching top clearance or its first
     menu items sit partly behind the header. */
  padding-top:60px;
  box-shadow:none;
}
/* AdminLTE hardcodes the stock 230px sidebar width into these dependent rules
   (content offset, mobile off-canvas slide distance, desktop collapse-hide
   distance) — since the sidebar is now 260px, they need to follow or content
   ends up partially hidden under the sidebar / off-canvas doesn't fully clear it.
   NOTE: scoped to min-width:768px on purpose — AdminLTE resets this to 0 below
   768px (sidebar becomes off-canvas), and since this file loads after
   adminlte.min.css, an unscoped rule here would beat that mobile reset at
   every width, permanently squeezing the content column on phones. */
@media (min-width:768px){
  .content-wrapper,.main-footer,.right-side{margin-left:260px}
}
@media (max-width:767px){
  .sidebar-open .content-wrapper,.sidebar-open .main-footer,.sidebar-open .right-side{
    -webkit-transform:translate(260px,0);
    -ms-transform:translate(260px,0);
    -o-transform:translate(260px,0);
    transform:translate(260px,0);
  }
  /* default off-screen resting position for the mobile off-canvas sidebar */
  .left-side,.main-sidebar{
    -webkit-transform:translate(-260px,0);
    -ms-transform:translate(-260px,0);
    -o-transform:translate(-260px,0);
    transform:translate(-260px,0);
  }
}
@media (min-width:768px){
  .sidebar-collapse .left-side,.sidebar-collapse .main-sidebar{
    -webkit-transform:translate(-260px,0);
    -ms-transform:translate(-260px,0);
    -o-transform:translate(-260px,0);
    transform:translate(-260px,0);
  }
}
.sidebar{padding-bottom:20px}
.user-panel{
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  height:auto!important;
  display:flex;
  align-items:center;
}
.user-panel .info{
  position:static;
  left:auto;
  padding:0;
  line-height:1.4;
}
.user-panel .info,.user-panel .info p{color:#fff}
.user-panel .info p{font-size:14px;font-weight:600;margin:0 0 3px}
.user-panel .info a{color:var(--c-ink-300);font-size:12px;margin-top:0}
.user-panel .info .fa-circle.text-success{color:var(--c-success-500)}

.sidebar-menu>li.header{
  background:transparent;
  color:rgba(255,255,255,.4);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:16px 20px 8px;
}
.sidebar-menu>li>a,
.skin-green .sidebar-menu>li>a{
  color:rgba(255,255,255,.75);
  font-size:14px;
  padding:10px 18px;
  margin:2px 10px;
  border-radius:var(--radius-sm);
  border-left:none;
}
.sidebar-menu>li>a>.fa,.sidebar-menu>li>a>i{
  width:22px;
  color:rgba(255,255,255,.5);
}
.sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a,
.skin-green .sidebar-menu>li.active>a,
.skin-green .sidebar-menu>li:hover>a{
  background:rgba(249,115,22,.14)!important;
  color:#fff!important;
  border-left:none!important;
}
.sidebar-menu>li.active>a{position:relative}
.sidebar-menu>li.active>a:before{
  content:"";
  position:absolute;
  left:-10px;top:6px;bottom:6px;
  width:3px;
  border-radius:3px;
  background:var(--c-primary-500);
}
.sidebar-menu>li.active>a>.fa,.sidebar-menu>li:hover>a>.fa,
.sidebar-menu>li.active>a>i,.sidebar-menu>li:hover>a>i{color:var(--c-primary-500)}
.sidebar-menu li.treeview-menu>li>a{
  color:rgba(255,255,255,.6);
  padding:8px 16px 8px 44px;
  font-size:13.5px;
}
.sidebar-menu li.treeview-menu>li>a:hover,
.sidebar-menu li.treeview-menu>li.active>a{
  color:#fff;
  background:transparent;
}
.sidebar-menu li.treeview-menu>li>a .fa-circle-o{font-size:6px;margin-right:6px;vertical-align:middle}
.sidebar-menu>li.treeview.active>a{background:transparent!important}
.sidebar-menu .treeview-menu{background:rgba(0,0,0,.15);margin:0 10px;border-radius:var(--radius-sm)}

.sidebar-form{border-color:rgba(255,255,255,.1)}

/* collapsed rail */
.sidebar-collapse .main-sidebar{width:60px}
.sidebar-collapse .sidebar-menu>li>a>span{display:none}
.sidebar-collapse .user-panel .info{display:none}

/* --- footer ------------------------------------------------------------------ */
.main-footer{
  background:var(--c-ink-0);
  border-top:1px solid var(--c-ink-200);
  color:var(--c-ink-500);
  font-size:13px;
  padding:12px 15px;
}

/* --- cards / boxes ------------------------------------------------------------ */
.box{
  background:var(--c-ink-0);
  border:1px solid var(--c-ink-200);
  border-top:1px solid var(--c-ink-200);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  margin-bottom:20px;
}
.box.box-solid{border:1px solid var(--c-ink-200)}
.box-header{padding:16px 18px;background:transparent}
.box-header.with-border{border-bottom:1px solid var(--c-ink-100)}
.box-title{
  font-size:16px;
  font-weight:600;
  color:var(--c-ink-900);
}
.box-body{padding:18px}
.box-footer{
  background:var(--c-ink-0);
  border-top:1px solid var(--c-ink-100);
  padding:14px 18px;
  border-radius:0 0 var(--radius-md) var(--radius-md);
}
.box-primary,.box-primary>.box-header{border-top-color:var(--c-primary-500)}
.box-danger,.box-danger>.box-header{border-top-color:var(--c-danger-500)}
.box-warning,.box-warning>.box-header{border-top-color:var(--c-warning-500)}
.box-success,.box-success>.box-header{border-top-color:var(--c-success-500)}
.box-info,.box-info>.box-header{border-top-color:var(--c-info-500)}
.nav-tabs-custom{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.nav-tabs-custom>.nav-tabs>li.active{border-top-color:var(--c-primary-500)}

/* --- KPI / info-box & small-box widgets ---------------------------------------- */
.info-box{
  background:var(--c-ink-0);
  border:1px solid var(--c-ink-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  min-height:88px;
  padding:4px;
}
.info-box-icon{
  border-radius:var(--radius-md);
  width:64px;
  height:auto;
  align-self:stretch;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}
.info-box-content{padding:12px 14px}
.info-box-text{
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--c-ink-500);
}
.info-box-number{
  font-size:28px;
  font-weight:700;
  color:var(--c-ink-900);
  font-variant-numeric:tabular-nums;
}
.info-box-more,.progress-description{color:var(--c-ink-500);font-size:12px}

.small-box{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.small-box>.inner{padding:16px}
.small-box h3{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.small-box p{font-size:13.5px}
.small-box .icon{opacity:.2}
.small-box>.small-box-footer{background:rgba(0,0,0,.08);color:rgba(255,255,255,.9)}

/* semantic recolor of AdminLTE bg-* utility classes used across dashboard/report widgets */
.bg-red,.bg-red-active,.callout.callout-danger,.label-danger,.alert-danger{
  background-color:var(--c-danger-500)!important;
}
.bg-yellow,.bg-yellow-active,.callout.callout-warning,.label-warning,.alert-warning{
  background-color:var(--c-warning-500)!important;color:#fff!important;
}
.bg-green,.bg-green-active,.bg-olive,.callout.callout-success,.label-success,.alert-success{
  background-color:var(--c-success-500)!important;
}
.bg-blue,.bg-blue-active,.bg-light-blue,.bg-navy,.label-primary{
  background-color:var(--c-blue-500)!important;
}
.bg-aqua,.bg-aqua-active,.callout.callout-info,.label-info,.alert-info{
  background-color:var(--c-info-500)!important;
}
.bg-purple,.bg-purple-active,.bg-maroon{background-color:var(--c-ink-700)!important}
.bg-black,.bg-black-active{background-color:var(--c-ink-900)!important}
.label-default{background-color:var(--c-ink-500)!important}
.label{border-radius:var(--radius-sm);font-weight:600;font-size:12px;padding:.3em .6em}
.text-red{color:var(--c-danger-500)!important}
.text-green{color:var(--c-success-500)!important}
.text-yellow{color:var(--c-warning-500)!important}
.text-blue,.text-aqua{color:var(--c-blue-600)!important}
.text-orange{color:var(--c-primary-600)!important}

/* --- buttons -------------------------------------------------------------------- */
.btn{
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:13.5px;
  padding:7px 14px;
  box-shadow:none;
  text-shadow:none;
  border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.btn-flat{border-radius:var(--radius-sm)}
.btn-primary,.btn-primary.btn-flat,.bg-olive.btn{
  background:var(--c-primary-500)!important;
  border-color:var(--c-primary-500)!important;
  color:#fff!important;
}
.btn-primary:hover,.btn-primary:focus{background:var(--c-primary-600)!important;border-color:var(--c-primary-600)!important}
.btn-default,.btn-default.btn-flat{
  background:var(--c-ink-0);
  border-color:var(--c-ink-300)!important;
  color:var(--c-ink-700);
}
.btn-default:hover{background:var(--c-ink-100)}
.btn-success{background:var(--c-success-500)!important;border-color:var(--c-success-500)!important}
.btn-danger{background:var(--c-danger-500)!important;border-color:var(--c-danger-500)!important}
.btn-warning{background:var(--c-warning-500)!important;border-color:var(--c-warning-500)!important;color:#fff!important}
.btn-info{background:var(--c-info-500)!important;border-color:var(--c-info-500)!important}
.btn-purple{background:var(--c-ink-700)!important;border-color:var(--c-ink-700)!important;color:#fff!important}
.btn.disabled,.btn[disabled]{opacity:.55}
.btn-xs,.btn-group-xs>.btn{padding:3px 8px;font-size:12px;border-radius:4px}
.btn-sm{padding:5px 10px;font-size:12px}
/* icon-only row action buttons: bigger hit area on touch */
.table .btn-xs{min-width:30px;min-height:30px}

/* --- alerts / callouts (form->messages()) --------------------------------------- */
.alert{border:none;border-radius:var(--radius-md);padding:12px 16px;font-size:14px}
.callout{border-radius:var(--radius-sm);border-left-width:4px}

/* --- tables ------------------------------------------------------------------- */
.table{font-size:13.5px;color:var(--c-ink-800)}
.table>thead>tr>th{
  background:var(--c-ink-100);
  color:var(--c-ink-500);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-bottom:1px solid var(--c-ink-200);
  white-space:nowrap;
}
.table>tbody>tr>td{border-top:1px solid var(--c-ink-100);vertical-align:middle}
.table-bordered{border:1px solid var(--c-ink-200)}
.table-bordered>thead>tr>th,.table-bordered>tbody>tr>td{border:1px solid var(--c-ink-100)}
.table-hover>tbody>tr:hover{background:var(--c-primary-50)}
.table-striped>tbody>tr:nth-of-type(odd){background:var(--c-ink-100)}
.box .table{margin-bottom:0}
.box > .table-responsive,.table-responsive{border:none}

/* grocery_crud wrapper table lives inside a .box already, tidy the chrome */
.ajax_list_container .list-header,.ajax_list_container .list-footer{
  background:transparent;
  border:none;
  padding:10px 0;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border-radius:var(--radius-sm);
  border:1px solid var(--c-ink-300);
  padding:5px 8px;
}
.pagination>li>a,.pagination>li>span{
  color:var(--c-ink-700);
  border-color:var(--c-ink-200);
}
.pagination>.active>a,.pagination>.active>span{
  background:var(--c-primary-500)!important;
  border-color:var(--c-primary-500)!important;
}

/* --- forms ---------------------------------------------------------------------- */
label{font-weight:600;color:var(--c-ink-700);font-size:14px}
.form-control{
  border:1px solid var(--c-ink-300);
  border-radius:var(--radius-sm);
  box-shadow:none;
  font-size:15px;
  height:36px;
  color:var(--c-ink-900);
}
textarea.form-control{height:auto}
.form-control:focus{
  border-color:var(--c-primary-500);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
.input-group-addon{
  background:var(--c-ink-100);
  border:1px solid var(--c-ink-300);
  border-radius:var(--radius-sm);
  color:var(--c-ink-600);
}

/* select2 (assets/dist/admin/select2.css default theme): match .form-control
   sizing/tokens — the shipped theme hardcodes its own 28px height/#aaa border/
   0 radius, so a select2-enhanced dropdown looks visibly shorter than every
   plain input/select next to it unless overridden here. */
.select2-container .select2-selection--single{height:36px}
.select2-container--default .select2-selection--single{
  display:flex;
  align-items:center;
  border:1px solid var(--c-ink-300);
  border-radius:var(--radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--c-ink-900);
  font-size:15px;
  line-height:normal;
  margin-top:0;
  padding-left:12px;
  padding-right:28px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--c-ink-500)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:34px;top:0;right:4px;display:flex;align-items:center;justify-content:center}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--c-ink-500) transparent transparent transparent}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent var(--c-ink-500) transparent}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--c-primary-500);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
.select2-dropdown{
  border-color:var(--c-ink-300);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--c-primary-500)}
.select2-search--dropdown .select2-search__field{
  border:1px solid var(--c-ink-300);
  border-radius:var(--radius-sm);
  padding:5px 8px;
}
.help-block{color:var(--c-ink-500);font-size:12.5px}
.has-error .form-control{border-color:var(--c-danger-500)}
.has-error .help-block,.has-error .control-label{color:var(--c-danger-500)}
.checkbox label,.radio label{font-weight:400}

/* --- forms (custom hand-built pages, e.g. panel/admin_user_create) --------------- */
.form-card-subtitle{color:var(--c-ink-500);font-size:13px;margin:2px 0 0}

.form-section{padding:20px 0;border-bottom:1px solid var(--c-ink-100)}
.form-section:first-of-type{padding-top:2px}
.form-section:last-of-type{border-bottom:none;padding-bottom:4px}
.form-section-title{font-size:16px;font-weight:600;color:var(--c-ink-900);margin:0 0 14px}
.required-mark{color:var(--c-danger-500);margin-left:2px}

.form-actions-sticky{
  position:sticky;
  bottom:0;
  display:flex;
  gap:10px;
  padding:14px 0 2px;
  margin-top:2px;
  background:var(--c-ink-0);
  border-top:1px solid var(--c-ink-100);
}
@media (max-width:768px){
  .form-actions-sticky{flex-direction:column-reverse}
  .form-actions-sticky .btn{width:100%}
}

/* password visibility toggle: generic, reused from login page (see .password-toggle below) */
.password-input-wrap .form-control{padding-right:40px}

/* touch-friendly checkbox chips (e.g. "Hak Akses" group) */
.check-chip-group{display:flex;flex-wrap:wrap;gap:10px}
.check-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 16px 8px 12px;
  border:1px solid var(--c-ink-300);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:13.5px;
  font-weight:500;
  color:var(--c-ink-700);
  background:var(--c-ink-0);
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.check-chip:hover{border-color:var(--c-ink-500)}
.check-chip-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.check-chip-box{
  flex:0 0 auto;
  width:18px;height:18px;
  border:1.5px solid var(--c-ink-300);
  border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  color:transparent;
  transition:inherit;
}
.check-chip-box i{font-size:11px}
.check-chip-input:checked~.check-chip-box{background:var(--c-primary-500);border-color:var(--c-primary-500);color:#fff}
.check-chip:has(.check-chip-input:checked){border-color:var(--c-primary-500);background:var(--c-primary-50);color:var(--c-primary-700)}
.check-chip-input:focus-visible~.check-chip-box{outline:2px solid var(--c-primary-500);outline-offset:2px}

/* --- modals ----------------------------------------------------------------------- */
.modal-content{
  border:none;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.modal-header{border-bottom:1px solid var(--c-ink-100);padding:16px 20px}
.modal-title{font-weight:600;font-size:17px}
.modal-body{padding:20px}
.modal-footer{border-top:1px solid var(--c-ink-100);padding:14px 20px}

/* SweetAlert (used across grocery_crud confirmations) */
.sweet-alert{border-radius:var(--radius-md)!important;box-shadow:var(--shadow-lg)!important}
.sweet-alert h2{font-family:var(--font-ui)!important}
.sweet-alert button{border-radius:var(--radius-sm)!important;font-family:var(--font-ui)!important}
.sweet-alert button.confirm{background-color:var(--c-primary-500)!important}

/* --- login page -------------------------------------------------------------------- */
/* NOTE: Login controller sets body class to "login-page-1" (not AdminLTE's default
   "login-page"), so this is the selector that actually reaches the page. */
body.login-page,body.login-page-1{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(249,115,22,.35), transparent 60%),
    linear-gradient(160deg,var(--c-ink-900) 0%,var(--c-ink-800) 55%,#3a1d0f 130%);
}

.login-box{width:380px;max-width:100%;margin:0}

.login-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:26px;
}
.login-brand-mark{
  flex:0 0 auto;
  width:52px;height:52px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--c-primary-500),var(--c-primary-700));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;
  box-shadow:0 8px 20px rgba(234,88,12,.4);
}
.login-brand-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.login-brand-name{
  color:#fff;
  font-weight:700;
  font-size:20px;
  letter-spacing:.01em;
  line-height:1.2;
}
.login-brand-tagline{color:rgba(255,255,255,.62);font-size:12.5px}

/* legacy: if a raw logo image is ever reintroduced, keep it from looking stray */
.login-logo{color:#fff;margin-bottom:18px;text-align:center}
.login-logo img{max-height:40px;width:auto}

.login-box-body{
  background:var(--c-ink-0);
  border:none!important;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:32px 28px 26px;
}
.login-box-msg{color:var(--c-ink-500);font-size:14px;padding:0 0 20px;text-align:center}

.login-box .form-group{margin-bottom:16px}
.login-box label{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--c-ink-500);
  margin-bottom:6px;
}
.login-box .form-control{
  height:44px;
  padding-left:40px;
  background-repeat:no-repeat;
  background-position:12px center;
  background-size:16px;
}
.login-box input[name="username"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.login-box input[name="password"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  padding-right:40px;
}

.password-input-wrap{position:relative}
.password-toggle{
  position:absolute;
  top:0;bottom:0;right:2px;
  width:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-ink-500);
  cursor:pointer;
  border-radius:var(--radius-sm);
}
.password-toggle:hover,.password-toggle:focus{
  color:var(--c-ink-800);
  background:var(--c-ink-100);
  outline:none;
}
.password-toggle i{font-size:15px}

.login-box .row{display:flex;align-items:center;margin:4px 0 0}
.login-box .row .checkbox{margin:0}
.login-box .row label{
  text-transform:none;
  letter-spacing:normal;
  font-size:13.5px;
  color:var(--c-ink-600);
  font-weight:400;
  display:flex;
  align-items:center;
  gap:6px;
}
.login-box .btn-primary{
  height:44px;
  width:100%;
  font-size:14px;
  letter-spacing:.02em;
}

.login-box-footer-note{
  margin-top:18px;
  text-align:center;
  font-size:12.5px;
  color:rgba(255,255,255,.5);
}

/* --- responsive: tablet / mobile ------------------------------------------------- */
@media (max-width:991px){
  .info-box,.small-box{margin-bottom:12px}
}

@media (max-width:768px){
  .content-header>h1{font-size:19px}
  .box-body{padding:14px}
  body.login-page,body.login-page-1{padding:20px 14px}
  .login-box-body{padding:26px 20px 20px}

  /* off-canvas sidebar gets a dim backdrop behind it.
     NOTE: attached to body, not .content-wrapper — .content-wrapper gets a
     "transform:translate(260px,0)" when the sidebar is open (see above), and
     a transformed element becomes the containing block for its own
     position:fixed descendants, which would confine the backdrop to that
     shifted box instead of covering the full screen. body isn't transformed,
     so a pseudo-element on body stays truly viewport-fixed. */
  body.sidebar-open:before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1001;
  }
  .main-sidebar{z-index:1002;box-shadow:var(--shadow-lg)}

  /* keep wide tables from breaking layout: scroll inside their card */
  .box .table-responsive,.ajax_list_container{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* larger touch targets */
  .btn,.pagination>li>a{min-height:38px}
  .sidebar-menu>li>a{padding:12px 18px}
}

@media (max-width:480px){
  .content{padding:0 10px 24px}
  .info-box-number{font-size:22px}
}

/* --- grocery_crud (flexigrid theme): responsive tables & forms ------------------- */
/* grocery_crud_default_theme is 'flexigrid' (application/modules/admin/config/grocery_crud.php),
   not a Bootstrap/DataTables theme, so the .table/.dataTables_wrapper rules above never actually
   reach this markup. This section targets the real output of
   assets/grocery_crud/themes/flexigrid/views/{list,list_template,add,edit,read}.php. */

.flexigrid{
  background:var(--c-ink-0);
  border:1px solid var(--c-ink-200);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  font-family:var(--font-ui);
}

/* toolbar: add / export / print */
.flexigrid div.tDiv{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  height:auto;
  padding:12px 16px;
  background:var(--c-ink-0);
  border-bottom:1px solid var(--c-ink-100);
}
.flexigrid div.tDiv2,.flexigrid div.tDiv3{
  float:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.flexigrid div.tDiv3{margin-left:auto}
.flexigrid div.tDiv2 a.btn{
  border-radius:var(--radius-sm);
  padding:8px 16px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
}
.flexigrid div.btnseparator{display:none}
.flexigrid div.fbutton{
  border:1px solid var(--c-ink-300);
  border-radius:var(--radius-sm);
  background:var(--c-ink-0);
  min-height:36px;
  display:flex;
  align-items:center;
  padding:0 12px;
}
.flexigrid div.fbutton:hover{background:var(--c-ink-100)}

/* table wrapper: bounded horizontal scroll, never blow out the page layout */
.flexigrid div.bDiv{overflow-x:auto;-webkit-overflow-scrolling:touch}
.flexigrid div.bDiv table{width:100%;min-width:640px;border-collapse:collapse}

/* header row */
.flexigrid table tr.hDiv th{
  background:var(--c-ink-100);
  color:var(--c-ink-500);
  text-transform:uppercase;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  padding:12px;
  border-bottom:1px solid var(--c-ink-200);
  white-space:nowrap;
}
.flexigrid table tr.hDiv th .field-sorting{cursor:pointer}
.flexigrid table tr.hDiv th .field-sorting:hover{color:var(--c-ink-700)}
.flexigrid table tr.hDiv th .field-sorting.asc:after{content:" \25B2";font-size:9px}
.flexigrid table tr.hDiv th .field-sorting.desc:after{content:" \25BC";font-size:9px}

/* body rows: hairline separators, no heavy grid lines */
.flexigrid div.bDiv td{
  padding:12px;
  border-bottom:1px solid var(--c-ink-100);
  font-size:14px;
  vertical-align:middle;
}
.flexigrid div.bDiv tr td,.flexigrid div.bDiv tr.erow td{background:var(--c-ink-0)}
.flexigrid div.bDiv tr:hover td{background:var(--c-primary-50)}

/* row actions: inline icon buttons on desktop/tablet; a checkbox+label "⋮"
   overflow menu takes over on mobile (see @media below) — no JS needed.
   NOTE: deliberately NOT <details>/<summary> — Chromium hides collapsed
   <details> content via an internal content-visibility that plain CSS
   cannot override, so forcing it open with !important silently fails. A
   checkbox's :checked state has no such restriction. */
.flexigrid td.actions-cell{width:96px;text-align:left;position:relative}
.flexigrid .row-actions-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.flexigrid .row-actions-summary{display:none}
.flexigrid .row-actions-list{display:flex;align-items:center;gap:4px}
.flexigrid .tools .btn,.flexigrid .tools a.crud-action{
  min-width:32px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
}

/* search box */
.flexigrid div.sDiv{height:auto;padding:12px 16px;border-top:1px solid var(--c-ink-100)}
.flexigrid div.sDiv2{width:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.flexigrid div.sDiv2 input.search_text,.flexigrid div.sDiv2 select{
  height:36px;
  border:1px solid var(--c-ink-300);
  border-radius:var(--radius-sm);
  padding:0 8px;
}

/* pagination */
.flexigrid div.pDiv{height:auto;padding:12px 16px}
.flexigrid div.pDiv div.pDiv2{width:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.flexigrid div.pDiv .pGroup{display:flex;align-items:center;gap:4px}
.flexigrid div.pDiv input,.flexigrid div.pDiv select{height:32px}

/* tablet/mobile (<=768px): table rows become stacked cards */
@media (max-width:768px){
  .flexigrid div.bDiv{overflow-x:visible}
  .flexigrid div.bDiv table,.flexigrid div.bDiv tbody,.flexigrid div.bDiv tr,.flexigrid div.bDiv td{
    display:block;
    width:100%!important;
    min-width:0!important;
  }
  .flexigrid div.bDiv thead{display:none}
  .flexigrid div.bDiv tr{
    margin-bottom:12px;
    border:1px solid var(--c-ink-100);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:8px 12px;
  }
  .flexigrid div.bDiv td{
    border-bottom:none;
    padding:6px 0;
    white-space:normal;
    overflow:visible;
    text-align:left;
  }
  .flexigrid div.bDiv td .text-left,.flexigrid div.bDiv td .text-center{text-align:left}
  .flexigrid div.bDiv td:before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--c-ink-500);
    font-weight:600;
    margin-bottom:2px;
  }
  .flexigrid td.actions-cell{
    width:100%!important;
    display:flex;
    justify-content:flex-end;
    padding:6px 0 0;
  }
  .flexigrid td.actions-cell:before{content:none}

  .flexigrid .row-actions-summary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    min-height:36px;
    border:1px solid var(--c-ink-300);
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:18px;
    line-height:1;
  }
  .flexigrid .row-actions-list{display:none}
  .flexigrid .row-actions-toggle:checked ~ .row-actions-list{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:absolute;
    right:0;
    top:calc(100% + 4px);
    background:var(--c-ink-0);
    border:1px solid var(--c-ink-300);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md);
    padding:8px;
    z-index:10;
    min-width:140px;
  }
  .flexigrid div.tDiv,.flexigrid div.sDiv2,.flexigrid div.pDiv div.pDiv2{
    flex-direction:column;
    align-items:stretch;
  }
  .flexigrid div.tDiv3{margin-left:0}
}

/* forms (add/edit/read): labels above inputs at all breakpoints, full-width
   touch-friendly fields, sticky save/cancel action bar */
.flexigrid.crud-form{overflow:visible}
.flexigrid div.mDiv{
  background:var(--c-ink-900);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  height:auto;
  padding:12px 16px;
}
.flexigrid .ftitle-left{color:var(--c-ink-0);font-size:17px;font-weight:600}
.flexigrid div.form-div{border:none;padding:16px}
.form-field-box{padding:8px 0;margin:0;border-bottom:1px solid var(--c-ink-100)}
.form-field-box.odd,.form-field-box.even{background:none}
.form-display-as-box{
  float:none;
  display:block;
  width:100%;
  padding-top:0;
  margin-bottom:4px;
  color:var(--c-ink-500);
  text-transform:uppercase;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
}
.form-input-box{float:none;display:block;width:100%}
.flexigrid div.form-div input[type=text],
.flexigrid div.form-div input[type=password],
.flexigrid div.form-div select,
.flexigrid div.form-div textarea{
  width:100%;
  box-sizing:border-box;
  padding:8px 10px;
  border:1px solid var(--c-ink-300);
  border-radius:var(--radius-sm);
  font-size:15px;
}
.flexigrid div.form-div textarea{min-height:96px}
.flexigrid div.form-div input[type=text]:focus,
.flexigrid div.form-div textarea:focus,
.flexigrid div.form-div select:focus{
  border-color:var(--c-primary-500);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
div.form-div input.datepicker-input,div.form-div input.datetime-input{width:100%!important}
.flexigrid textarea{width:100%}
.flexigrid.crud-form div.pDiv,#crudForm .pDiv{
  position:sticky;
  bottom:0;
  background:var(--c-ink-0);
  border-top:1px solid var(--c-ink-100);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:auto;
  padding:12px 16px;
}
.flexigrid .form-button-box{float:none;margin:0}

@media (max-width:768px){
  .flexigrid.crud-form div.pDiv,#crudForm .pDiv{flex-direction:column;align-items:stretch}
  .flexigrid .form-button-box .btn{width:100%}
}

/* --- panel/akses_menu: permission matrix (rows = menu items, columns = admin groups) --- */
.akses-menu-matrix-wrap{max-height:70vh;overflow-y:auto}
.akses-menu-matrix thead th{position:sticky;top:0;z-index:1}
.matrix-group-row td{
  background:var(--c-primary-50);
  color:var(--c-primary-700);
  font-weight:700;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
/* compact variant of .check-chip for dense table cells: keep the checked-state
   visuals (.check-chip-box/.check-chip-input) but drop the pill chrome, since
   a bordered 44px-min-height pill in every one of ~300 cells is too heavy. */
.check-chip--cell{
  min-height:auto;
  padding:4px;
  border:none;
  border-radius:0;
  background:none;
  display:inline-flex;
}
.check-chip--cell:hover{border-color:transparent}