/* Live panel overrides on AdminLTE skin-blue: black chrome, orange menu */
.skin-blue .main-header .logo, .skin-blue .main-header .logo:hover { background: #000; }
.skin-blue .main-header .navbar { background: #000; }
.skin-blue .main-header .navbar .sidebar-toggle:hover { background: #222; }
.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side { background: #000; }
/* menu items are dark; the orange (#f39909) shows on hover and on the page you are on (and its group) */
.skin-blue .sidebar-menu > li > a { background: #111; color: #e6e6e6; border-bottom: 1px solid #000; border-left: 3px solid transparent; transition: background .15s, color .15s; }
.skin-blue .sidebar-menu > li > a > .fa { color: #f39909; transition: color .15s; }
.skin-blue .sidebar-menu > li.menu-open:not(.active) > a { background: #111; color: #e6e6e6; border-left-color: transparent; }
.skin-blue .sidebar-menu > li.menu-open:not(.active) > a > .fa { color: #f39909; }
.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a { background: #f39909; color: #fff; border-left-color: #fff; }
.skin-blue .sidebar-menu > li:hover > a > .fa, .skin-blue .sidebar-menu > li.active > a > .fa { color: #fff; }
.skin-blue .sidebar-menu .treeview-menu > li.active > a { color: #f39909; }
.skin-blue .sidebar-menu > li > .treeview-menu { background: #1a1a1a; }
.skin-blue .sidebar-menu .treeview-menu > li > a { color: #ddd; }
.skin-blue .sidebar-menu .treeview-menu > li > a:hover { color: #f39909; }
.skin-blue .user-panel > .info, .skin-blue .user-panel > .info > a { color: #fff; }
.bg-orange { border: 5px solid black; border-radius: 10px; background: #f9a91d !important; }
.small-box h3 { white-space: normal; }
.act-ico { height: 28px; }
.filter-row .form-group { margin-right: 6px; }
.table > thead > tr > th { white-space: nowrap; }

/* logo: the artwork is dark text on transparent, so it sits on white to stay readable on the black theme.
   Full logo = white card at the top of the sidebar; header = emblem + name; collapsed sidebar = emblem only. */
.skin-blue .main-header .logo { padding: 0 8px; }
.main-header .logo .logo-lg { height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 15px; letter-spacing: .5px; }
.main-header .logo .logo-mini { height: 50px; align-items: center; justify-content: center; } /* AdminLTE shows it only when collapsed */
.main-header .logo img { height: 36px; width: 36px; background: #fff; border-radius: 6px; padding: 3px; }
.sidebar-logo { background: #fff; margin: 10px 12px 4px; border-radius: 8px; padding: 8px; text-align: center; }
.sidebar-logo img { width: 100%; max-width: 190px; height: auto; display: inline-block; }
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini { display: flex; }
  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg { display: none; }
  .sidebar-mini.sidebar-collapse .sidebar-logo { display: none; }
}
.main-header .logo .logo-lg b { white-space: nowrap; line-height: 1; font-size: 14px; }
/* the Name/Agent/Customer/Scheme search box is exactly as wide as its label (the group shrink-wraps the label, the box fills it) */
@media (min-width: 768px) {
  .filter-row .form-group:has(> input[placeholder="Name/Agent/Customer/Scheme"]) { display: inline-block; }
  .filter-row input.form-control[placeholder="Name/Agent/Customer/Scheme"] { width: 100%; min-width: 0; }
}