/* ===== SIDEBAR BACKGROUND ===== */
aside#menu {
  background: #293A56 !important; /* Solid dark slate/blue */
  border-right: none !important;
}

/* ===== FIX PROFILE CARD PERFECTLY ===== */
aside#menu .sidebar-user-profile {
  padding: 10px !important;
}

aside#menu .sidebar-user-profile a {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;

  display: flex;
  align-items: center;

  width: auto !important;   /* 🔥 FIX */
  margin: 0 !important;     /* 🔥 FIX */
}

aside#menu .sidebar-user-profile {
  margin-top: 70px !important;
}

/* NAME */
aside#menu .sidebar-user-profile strong,
aside#menu .sidebar-user-profile span {
  color: #1E293B !important; /* Dark text for contrast */
  font-weight: 600 !important;
}

/* EMAIL */
aside#menu .sidebar-user-profile small {
  color: #64748B !important; /* Muted slate gray */
}

/* ===== MENU ITEMS (INACTIVE) ===== */
aside#menu .nav > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF !important; /* Crisp white text */
  border-radius: 8px !important;
  margin: 4px 12px !important;
  padding: 10px 14px !important;
  font-size: 14px;
  transition: all 0.2s ease !important;
}

/* INACTIVE ICONS */
aside#menu .menu-icon {
  color: #FFFFFF !important; /* Crisp white icons */
  font-size: 18px;
}

/* ===== MENU ITEMS (ACTIVE) ===== */
/* In the image, "Dashboard" is solid white with dark text */
aside#menu .nav > li.active > a {
  background: #FFFFFF !important;
  color: #293A56 !important; 
  font-weight: 600 !important;
}

/* ACTIVE ICONS */
aside#menu .nav > li.active .menu-icon {
  color: #293A56 !important; 
}

/* ===== HOVER STATE ===== */
aside#menu .nav > li > a:hover:not(.active) {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  transform: none !important; /* Keeps it strictly in place */
}

/* ===== SUBMENU ===== */
aside#menu .nav-second-level {
  background: rgba(0, 0, 0, 0.15) !important; /* Slightly darker indent */
  border-radius: 8px;
}


/* Override tw-mx-1.5 specifically */
aside#menu .sidebar-user-profile.tw-mx-1\.5 {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* Fix card width */
aside#menu .sidebar-user-profile a {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Prevent sidebar overflow */
aside#menu {
  overflow-x: hidden !important;
}
/* ===== ADD SIDEBAR INNER SPACING ===== */
aside#menu {
  padding: 12px 10px !important;
  box-sizing: border-box;
}

aside#menu .sidebar-user-profile a {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ===== FIX SIDEBAR COLLAPSE OVERFLOW ===== */

/* Ensure sidebar handles internal content */
aside#menu {
  overflow: hidden !important;
}

/* Fix profile container */
aside#menu .sidebar-user-profile {
  width: 100%;
  padding: 8px !important;
  box-sizing: border-box;
}

/* Fix profile card */
aside#menu .sidebar-user-profile a {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden; /* 🔥 prevents spill */
}

/* Prevent image/text pushing out */
aside#menu .sidebar-user-profile img {
  flex-shrink: 0;
}

aside#menu .sidebar-user-profile span {
  min-width: 0; /* 🔥 prevents text overflow */
}

/* WHEN SIDEBAR COLLAPSED */
body.hide-sidebar aside#menu .sidebar-user-profile a {
  padding: 6px !important;
}



/* ===== NAVBAR PREMIUM ===== */
.navbar, .navbar-default {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E5E7EB !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* SEARCH BAR */
.navbar input[type="search"],
.navbar .search-input {
  background: #F1F5F9 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  transition: all 0.2s ease;
}

/* FOCUS */
.navbar input[type="search"]:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px #3B82F6;
}

/* NAV ICONS */
.navbar .icon,
.navbar i {
  color: #64748B;
  transition: all 0.2s ease;
  font-size: 18px;
}

/* HOVER */
.navbar i:hover {
  color: #2563EB;
  transform: scale(1.1);
}

/* NOTIFICATION BADGE */
.navbar .badge {
  background: #2563EB !important;
  border-radius: 50%;
  padding: 4px 6px;
  font-size: 10px;
}

/* NAV RIGHT ITEMS */
.navbar .navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar {
  margin: 8px 12px !important;
  border-radius: 12px !important;
}

/* =================================================================
   GLOBAL BRAND REFRESH — aligned to #293A56 sidebar colour scheme
   ================================================================= */

/* --- Cards / Panels ------------------------------------------- */
.panel_s {
  border: 1px solid rgba(41,58,86,.09) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(41,58,86,.06), 0 6px 20px rgba(41,58,86,.05) !important;
  overflow: visible !important;
  transition: box-shadow .2s ease, transform .15s ease !important;
}
/* Rounded corners on children — NO overflow:hidden anywhere so selectpicker can escape */
.panel_s > .panel-heading:first-child {
  border-radius: 14px 14px 0 0 !important;
}
.panel_s > .panel-body:last-child,
.panel_s > .panel-footer:last-child {
  border-radius: 0 0 14px 14px !important;
}
/* Only clip table/image containers explicitly, not generic panel-body */
.panel_s > .panel-body.fu-table-body {
  overflow: hidden !important;
}
.panel_s:hover {
  box-shadow: 0 2px 8px rgba(41,58,86,.1), 0 10px 28px rgba(41,58,86,.08) !important;
}
.panel_s > .panel-heading,
.panel_s .panel-heading {
  background: #fff !important;
  border-bottom: 1px solid rgba(41,58,86,.09) !important;
  padding: 16px 20px !important;
  color: #293A56 !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
}
.panel_s > .panel-body {
  padding: 18px 20px !important;
}

/* --- Tables ---------------------------------------------------- */
.table thead > tr > th {
  background: #293A56 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: .3px !important;
  padding: 12px 14px !important;
  border: none !important;
  white-space: nowrap;
}
.table tbody > tr > td {
  padding: 11px 14px !important;
  vertical-align: middle !important;
  border-color: rgba(41,58,86,.07) !important;
  font-size: 13px !important;
  color: #374151 !important;
}
.table-hover tbody > tr:hover {
  background: rgba(37,99,235,.04) !important;
}
.table > thead > tr > th:first-child { border-radius: 0 !important; }

/* --- Form controls --------------------------------------------- */
.form-control {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.form-control:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}

/* Bootstrap-select buttons */
.bootstrap-select > .btn {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}
.bootstrap-select.open > .btn {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

/* --- Labels / Badges ------------------------------------------ */
.label {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
  letter-spacing: .2px !important;
  display: inline-block !important;
}
.label-success { background: #10b981 !important; color: #fff !important; }
.label-warning { background: #f59e0b !important; color: #fff !important; }
.label-danger  { background: #ef4444 !important; color: #fff !important; }
.label-info    { background: #2563eb !important; color: #fff !important; }
.label-primary { background: #293A56 !important; color: #fff !important; }
.label-default { background: #6b7280 !important; color: #fff !important; }

/* --- Primary button ------------------------------------------- */
.btn-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}

/* --- Panel headings h-tags ------------------------------------ */
.panel-heading h4,
.panel-heading h3,
.panel-heading .panel-title {
  color: #293A56 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* --- Pagination (global) -------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  color: #293A56 !important;
  border-color: rgba(41,58,86,.15) !important;
  transition: all .15s ease !important;
}
.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li.active > a:hover,
.pagination > li.active > span:hover {
  background: #293A56 !important;
  border-color: #293A56 !important;
  color: #fff !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  background: rgba(41,58,86,.07) !important;
  border-color: rgba(41,58,86,.2) !important;
  color: #293A56 !important;
}
.pagination > li.disabled > a {
  color: #cbd5e1 !important;
  border-color: rgba(41,58,86,.1) !important;
}

/* --- Page-header section divider ------------------------------ */
.crm-section-header {
  border-left: 4px solid #293A56;
  padding-left: 14px;
  margin-bottom: 20px;
}
.crm-section-header h3,
.crm-section-header h4 {
  color: #293A56 !important;
  font-weight: 700;
  margin: 0 0 4px 0;
}
.crm-section-header p {
  color: #64748b;
  margin: 0;
  font-size: 13px;
}

/* --- Progress / NProgress bar --------------------------------- */
#nprogress .bar        { background: #293A56 !important; }
#nprogress .peg        { box-shadow: 0 0 10px #293A56, 0 0 5px #293A56 !important; }
#nprogress .spinner-icon {
  border-top-color:   #293A56 !important;
  border-left-color:  #293A56 !important;
}

/* ===== SIDEBAR SUBMENU FIXES ===== */

/* Submenu items — white text on dark sidebar */
aside#menu .nav-second-level > li > a {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 13px !important;
  padding: 8px 12px 8px 38px !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
  transition: all 0.2s ease !important;
}
aside#menu .nav-second-level > li > a:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}
aside#menu .nav-second-level > li.active > a {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Setup / customizer menu item — keep same styling as nav items */
#setup-menu-item > a,
.open-customizer {
  color: #fff !important;
}

/* Parent nav item with open submenu — keep white text */
aside#menu .nav > li.active.open > a,
aside#menu .nav > li.open > a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
aside#menu .nav > li.open > a .menu-icon {
  color: #fff !important;
}

/* ===== SIDEBAR PROFILE CARD — text overflow fix ===== */
aside#menu .sidebar-user-profile .tw-truncate {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}
/* Remove fixed width that causes overflow */
aside#menu .sidebar-user-profile .tw-w-\[140px\] {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
}
/* Ensure the flex container doesn't overflow */
aside#menu .sidebar-user-profile a > div {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ===== BOOTSTRAP-SELECT DROPDOWN — ensure visible above panels ===== */
.bootstrap-select .dropdown-menu {
  z-index: 9999 !important;
}
.panel_s .bootstrap-select.open {
  overflow: visible !important;
  position: relative;
  z-index: 1000;
}

/* ===== PAGE BACKGROUND (admin only — login page is outside #wrapper) ===== */
#wrapper { background: #f5f7fa; }

/* ===== THIN SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(41,58,86,.18); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(41,58,86,.32); }
aside#menu::-webkit-scrollbar { width: 4px; }
aside#menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 99px; }

/* ===== TEXT SELECTION ===== */
::selection { background: rgba(37,99,235,.15); color: #1e40af; }

/* ===== INPUT PLACEHOLDER ===== */
.form-control::placeholder { color: #94a3b8 !important; }
.form-control::-webkit-input-placeholder { color: #94a3b8 !important; }

/* ===== BUTTONS — general ===== */
.btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease !important;
}
.btn:active { transform: translateY(1px) !important; box-shadow: none !important; }

.btn-default {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #374151 !important;
}
.btn-default:hover,
.btn-default:focus {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 4px rgba(41,58,86,.08) !important;
}

.btn-success { background: #10b981 !important; border-color: #10b981 !important; color: #fff !important; }
.btn-success:hover { background: #059669 !important; border-color: #059669 !important; }
.btn-danger  { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }
.btn-danger:hover  { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-warning { background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; }
.btn-warning:hover { background: #d97706 !important; border-color: #d97706 !important; }

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu {
  border: 1px solid rgba(41,58,86,.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  color: #374151 !important;
  transition: background .12s ease, color .12s ease !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: rgba(37,99,235,.07) !important;
  color: #1d4ed8 !important;
}
.dropdown-menu > .divider {
  margin: 5px 0 !important;
  background: rgba(41,58,86,.08) !important;
  height: 1px !important;
  border: none !important;
}

/* ===== MODALS ===== */
.modal-content {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
  overflow: hidden;
}
.modal-header {
  background: #fff !important;
  border-bottom: 1px solid rgba(41,58,86,.09) !important;
  padding: 18px 24px !important;
}
.modal-header .modal-title,
.modal-header h4 {
  color: #293A56 !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  margin: 0 !important;
}
.modal-body { padding: 20px 24px !important; }
.modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid rgba(41,58,86,.09) !important;
  padding: 14px 24px !important;
  border-radius: 0 0 16px 16px !important;
}
.modal-backdrop.in { opacity: .3 !important; }
.modal-header .close {
  color: #64748b !important;
  opacity: 1 !important;
  font-size: 20px !important;
  margin-top: 0 !important;
}
.modal-header .close:hover { color: #1e293b !important; }

/* ===== NAV TABS ===== */
.nav-tabs { border-bottom: 2px solid rgba(41,58,86,.1) !important; }
.nav-tabs > li > a {
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  transition: color .15s ease !important;
}
.nav-tabs > li > a:hover {
  background: transparent !important;
  border: none !important;
  color: #293A56 !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #293A56 !important;
  color: #293A56 !important;
  font-weight: 700 !important;
  margin-bottom: -2px !important;
}

/* ===== ALERTS ===== */
.alert {
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}
.alert-success { background: rgba(16,185,129,.1) !important; color: #065f46 !important; }
.alert-warning { background: rgba(245,158,11,.1) !important; color: #92400e !important; }
.alert-danger  { background: rgba(239,68,68,.1)  !important; color: #991b1b !important; }
.alert-info    { background: rgba(37,99,235,.08)  !important; color: #1e40af !important; }

/* ===== TOOLTIPS ===== */
.tooltip-inner {
  background: #1e293b !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  max-width: 220px !important;
}
.tooltip.top    .tooltip-arrow { border-top-color:    #1e293b !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #1e293b !important; }
.tooltip.left   .tooltip-arrow { border-left-color:   #1e293b !important; }
.tooltip.right  .tooltip-arrow { border-right-color:  #1e293b !important; }