/* =============================================================================
   Sarai Brand Theme — uses CSS variables from theme-variables.css
   (editable from Admin → Theme Colors, stored in storage/app/admin/theme-colors.json)
   ============================================================================= */

/* ── Typography & links ─────────────────────────────────────────────────── */

body,
.content-wrapper {
  color: var(--sarai-text);
}

a {
  color: var(--sarai-primary-500);
}

a:hover {
  color: var(--sarai-primary-700);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.text-bold-700 {
  color: var(--sarai-primary-900);
}

/* ── Page background ────────────────────────────────────────────────────── */

.app-content .content-wrapper {
  background-color: var(--sarai-primary-50);
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.main-menu,
body.semi-dark-layout .main-menu,
body.semi-dark-layout .main-menu-content .navigation-main {
  background: linear-gradient(180deg, var(--sarai-primary-700) 0%, var(--sarai-primary-900) 100%) !important;
  border-right: 1px solid var(--sarai-primary-800);
}

body.semi-dark-layout .main-menu-content .navigation-main .nav-item.open a,
body.semi-dark-layout .main-menu:not(.expanded) .navigation .sidebar-group-active a {
  background-color: transparent !important;
}

body.semi-dark-layout .main-menu-content .navigation-main .active .menu-title,
body.semi-dark-layout .main-menu-content .navigation-main .active i {
  color: var(--sarai-secondary-300) !important;
}

.main-menu .shadow-bottom {
  background: linear-gradient(180deg, var(--sarai-primary-700) 44%, rgba(23, 38, 58, 0) 100%) !important;
}

.main-menu .navbar-header {
  background: var(--sarai-primary-700) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 70px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem !important;
}

.main-menu .navbar-header .nav {
  width: 100%;
  margin: 0;
}

.main-menu .navbar-header .nav-item {
  width: 100%;
  margin: 0 !important;
  display: flex;
  justify-content: center;
  float: none !important;
}

.main-menu .navbar-header .navbar-brand {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 180px;
  height: 56px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden;
}

.main-menu .navbar-header .navbar-brand .brand-logo,
.main-menu .navbar-header .navbar-brand img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 52px !important;
  object-fit: contain !important;
  position: static !important;
  z-index: 1 !important;
  display: block;
  margin: 0 auto;
}

.main-menu .navigation-main .nav-item > a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px;
  margin: 2px 12px;
  transition: background 0.2s ease, color 0.2s ease;
}

.main-menu .navigation-main .nav-item > a i,
.main-menu .navigation-main .nav-item > a .menu-title {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Custom maintenance wrench icon (matches Feather sidebar size) */
.main-menu .navigation-main .nav-item > a .menu-icon-maintenance {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-inline-end: 0.7rem;
  vertical-align: middle;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-mask: url('../images/icons/maintenance-tool.png') no-repeat center / contain;
  mask: url('../images/icons/maintenance-tool.png') no-repeat center / contain;
}

.main-menu .navigation-main .nav-item > a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.main-menu .navigation-main .nav-item.active > a,
.main-menu .navigation-main .nav-item.open > a {
  background: transparent !important;
  box-shadow: none !important;
}

.main-menu .navigation-main .nav-item.active > a i,
.main-menu .navigation-main .nav-item.active > a .menu-title,
.main-menu .navigation-main .nav-item.open > a i,
.main-menu .navigation-main .nav-item.open > a .menu-title {
  color: var(--sarai-secondary-300) !important;
}

.main-menu .navigation-main .nav-item.active > a .menu-icon-maintenance,
.main-menu .navigation-main .nav-item.open > a .menu-icon-maintenance {
  background-color: var(--sarai-secondary-300) !important;
}

/* Submenu — same surface as sidebar, subtle indent only */
.main-menu .navigation-main .menu-content,
.main-menu .navigation li.has-sub ul.menu-content,
.main-menu.menu-dark .navigation > li > ul,
.main-menu.menu-dark ul.menu-popout,
body.dark-layout .main-menu-content .navigation-main .nav-item .menu-content,
body.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content,
body.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 0 4px 0 !important;
  margin: 0 !important;
}

.main-menu .navigation-main .menu-content .nav-item > a {
  color: rgba(255, 255, 255, 0.72) !important;
  padding-inline-start: 2.4rem !important;
  font-size: 0.92rem;
  margin: 1px 12px !important;
  border-radius: 6px;
}

.main-menu .navigation-main .menu-content .nav-item.active > a,
.main-menu .navigation-main .menu-content .nav-item > a:hover {
  color: var(--sarai-secondary-300) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Sidebar active — no background, soft sky accent text only */
.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-dark .navigation > li ul .active,
.main-menu.menu-dark .navigation > li.open > a,
.main-menu.menu-dark .navigation > li.sidebar-group-active > a,
.main-menu.menu-dark .navigation > li .active > a,
.main-menu.menu-dark .navigation > li ul .active > a,
body.dark-layout .main-menu-content .navigation-main,
body.dark-layout .main-menu-content .navigation-main .nav-item .menu-content,
body.dark-layout .main-menu-content .navigation-main .nav-item .menu-content li:not(.active) a,
body.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content,
body.dark-layout .main-menu:not(.expanded) .navigation .sidebar-group-active > a {
  background: transparent !important;
  background-color: transparent !important;
}

body.dark-layout .main-menu-content .navigation-main .nav-item.open a,
body.dark-layout .main-menu-content .navigation-main .sidebar-group-active a,
body.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content .active a,
body.dark-layout.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active > a,
body.semi-dark-layout .main-menu-content .navigation-main .nav-item.open a,
body.semi-dark-layout .main-menu:not(.expanded) .navigation .sidebar-group-active a {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-dark .navigation > li.open > a,
.main-menu.menu-dark .navigation > li.sidebar-group-active > a {
  color: #fff !important;
}

.main-menu.menu-dark .navigation > li .active > a,
.main-menu.menu-dark .navigation > li ul .active > a,
.main-menu .navigation-main .nav-item.active > a i,
.main-menu .navigation-main .nav-item.active > a .menu-title {
  color: var(--sarai-secondary-300) !important;
}

/* Sidebar hover only (not selected) — no blue/purple */
.main-menu a:hover,
.main-menu a:focus,
.main-menu.menu-dark .navigation > li ul .hover > a,
.main-menu.menu-dark .navigation > li ul:hover > a,
.main-menu.menu-dark .navigation > li .active .hover > a,
.main-menu.menu-dark .navigation li.hover > a,
.main-menu.menu-dark ul.menu-popout li.hover > a,
.main-menu.menu-dark ul.menu-popout li:hover > a,
.main-menu .navigation-main .nav-item:not(.active) > a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  color: var(--sarai-secondary-300) !important;
  box-shadow: none !important;
}

.main-menu.menu-dark .navigation > li > ul,
.main-menu.menu-dark .navigation > li ul .open > ul,
.main-menu.menu-dark ul.menu-popout,
.main-menu.menu-dark ul.menu-popout li.hover > a,
.main-menu.menu-dark ul.menu-popout li:hover > a,
.main-menu.menu-dark ul.menu-popout li.open > a {
  background: transparent !important;
  background-color: transparent !important;
}

.main-menu.menu-dark .navigation > li .active,
.main-menu.menu-dark .navigation > li ul li {
  background: transparent !important;
}

.main-menu .main-menu-content,
.main-menu .navigation.navigation-main {
  background: transparent !important;
}

/* ── Light mode sidebar — override semi-dark-layout.css conflicts ─────── */
body.light-mode.semi-dark-layout .main-menu,
body.light-mode .main-menu {
  background: linear-gradient(180deg, var(--sarai-primary-700) 0%, var(--sarai-primary-900) 100%) !important;
  border-right: 1px solid var(--sarai-primary-800);
}

body.light-mode.semi-dark-layout .main-menu-content .navigation-main,
body.light-mode .main-menu .main-menu-content,
body.light-mode .main-menu .navigation.navigation-main {
  background: transparent !important;
  background-color: transparent !important;
}

body.light-mode.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content,
body.light-mode.semi-dark-layout .main-menu-content .navigation-main .nav-item .menu-content li:not(.active) a,
body.light-mode.semi-dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content,
body.light-mode.semi-dark-layout .main-menu-content .navigation-main .sidebar-group-active a,
body.light-mode.semi-dark-layout .main-menu-content .navigation-main .nav-item.open a,
body.light-mode.semi-dark-layout .main-menu:not(.expanded) .navigation .sidebar-group-active a,
body.light-mode.semi-dark-layout.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active a,
body.light-mode .main-menu.menu-dark .navigation > li > ul,
body.light-mode .main-menu.menu-dark .navigation > li ul .open > ul,
body.light-mode .main-menu.menu-dark ul.menu-popout {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.light-mode.semi-dark-layout .main-menu-content .navigation-main .nav-item a,
body.light-mode.semi-dark-layout .main-menu-content .navigation-main .nav-item a:after,
body.light-mode.semi-dark-layout .main-menu-content .navigation-main .nav-item i,
body.light-mode .main-menu .navigation-main .nav-item > a,
body.light-mode .main-menu .navigation-main .nav-item > a i,
body.light-mode .main-menu .navigation-main .nav-item > a .menu-title,
body.light-mode .main-menu .navigation-main .menu-content .nav-item > a {
  color: rgba(255, 255, 255, 0.88) !important;
}

body.light-mode.semi-dark-layout .main-menu-content .navigation-main .active .menu-title,
body.light-mode.semi-dark-layout .main-menu-content .navigation-main .active i,
body.light-mode .main-menu .navigation-main .nav-item.active > a i,
body.light-mode .main-menu .navigation-main .nav-item.active > a .menu-title,
body.light-mode .main-menu .navigation-main .nav-item.open > a i,
body.light-mode .main-menu .navigation-main .nav-item.open > a .menu-title,
body.light-mode .main-menu .navigation-main .menu-content .nav-item.active > a,
body.light-mode .main-menu.menu-dark .navigation > li .active > a,
body.light-mode .main-menu.menu-dark .navigation > li ul .active > a {
  color: var(--sarai-secondary-300) !important;
}

body.light-mode .main-menu.menu-dark .navigation > li.active > a,
body.light-mode .main-menu.menu-dark .navigation > li ul .active,
body.light-mode .main-menu.menu-dark .navigation > li.open > a,
body.light-mode .main-menu.menu-dark .navigation > li.sidebar-group-active > a,
body.light-mode .main-menu.menu-dark .navigation > li .active > a,
body.light-mode .main-menu.menu-dark .navigation > li ul .active > a,
body.light-mode .main-menu .navigation-main .nav-item.active > a,
body.light-mode .main-menu .navigation-main .nav-item.open > a {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.light-mode .main-menu .navigation-main .nav-item > a:hover,
body.light-mode .main-menu .navigation-main .menu-content .nav-item > a:hover,
body.light-mode .main-menu.menu-dark .navigation > li ul .hover > a,
body.light-mode .main-menu.menu-dark .navigation > li ul:hover > a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--sarai-secondary-300) !important;
}

body.light-mode .main-menu .navbar-header {
  background: var(--sarai-primary-700) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-mode .main-menu .shadow-bottom {
  background: linear-gradient(180deg, var(--sarai-primary-700) 44%, rgba(23, 38, 58, 0) 100%) !important;
}

/* ── Settings / inner tab lists (nav-pills) ───────────────────────────── */
.nav.nav-pills .nav-link {
  color: var(--sarai-primary-600) !important;
  border-color: var(--sarai-border) !important;
  background-color: var(--sarai-surface) !important;
}

.nav.nav-pills .nav-link i {
  color: inherit !important;
}

.nav.nav-pills .nav-link:hover,
.nav.nav-pills .nav-link.active {
  background: linear-gradient(118deg, var(--sarai-primary-500), var(--sarai-primary-400)) !important;
  border-color: var(--sarai-primary-500) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(78, 135, 197, 0.2);
}

body.dark-layout .nav.nav-pills .nav-link {
  background-color: var(--sarai-primary-800) !important;
  border-color: var(--sarai-primary-600) !important;
  color: var(--sarai-primary-100) !important;
}

body.dark-layout .nav.nav-pills .nav-link:hover,
body.dark-layout .nav.nav-pills .nav-link.active {
  background: linear-gradient(118deg, var(--sarai-primary-500), var(--sarai-primary-400)) !important;
  border-color: var(--sarai-primary-400) !important;
  color: #fff !important;
}

body.dark-layout .nav-pills .nav-item .nav-link.active {
  background-color: var(--sarai-primary-500) !important;
  color: #fff !important;
}

.nav.nav-pills.nav-active-bordered-pill .nav-item a.nav-link.active {
  border-color: var(--sarai-primary-500) !important;
  color: var(--sarai-primary-500) !important;
}

.nav.nav-pills .nav-item.dropdown.show .dropdown-item.active:hover {
  color: var(--sarai-primary-500) !important;
}

/* ── Navbar ───────────────────────────────────────────────────────────── */
/* Navbar stays dark in both modes — keep controls light for contrast */

.header-navbar {
  background: var(--sarai-surface) !important;
  border-bottom: 1px solid var(--sarai-border);
  box-shadow: 0 4px 24px var(--sarai-shadow) !important;
}

.header-navbar .nav-link,
.header-navbar .breadcrumb-text,
.header-navbar .breadcrumb-text a,
.header-navbar .breadcrumb-text span,
.header-navbar .selected-language,
.header-navbar .user-nav .user-name,
.header-navbar .user-name.text-bold-600 {
  color: #EEF3FA !important;
}

.header-navbar .navbar-container ul.nav li i.ficon,
.header-navbar .navbar-container ul.nav li .nav-link i,
.header-navbar .navbar-container ul.nav li .ficon,
.header-navbar .breadcrumb-text i {
  color: #EEF3FA !important;
}

.header-navbar .navbar-container ul.nav li i.ficon:hover,
.header-navbar .navbar-container ul.nav li .nav-link:hover i,
.header-navbar .navbar-container ul.nav li .nav-link:hover .selected-language {
  color: var(--sarai-secondary-300) !important;
}

.header-navbar .user-status {
  color: var(--sarai-text-muted) !important;
}

body.light-mode .header-navbar {
  background: var(--sarai-primary-800) !important;
  border-bottom-color: var(--sarai-primary-700);
}

body.light-mode .header-navbar .nav-link,
body.light-mode .header-navbar .breadcrumb-text,
body.light-mode .header-navbar .breadcrumb-text a,
body.light-mode .header-navbar .breadcrumb-text span,
body.light-mode .header-navbar .selected-language,
body.light-mode .header-navbar .user-nav .user-name,
body.light-mode .header-navbar .user-name.text-bold-600,
body.light-mode .header-navbar .navbar-container ul.nav li i.ficon,
body.light-mode .header-navbar .navbar-container ul.nav li .nav-link i,
body.light-mode .header-navbar .breadcrumb-text i {
  color: #EEF3FA !important;
}

body.light-mode .header-navbar .user-status {
  color: #9AADC4 !important;
}

body.light-mode .header-navbar .navbar-container ul.nav li i.ficon:hover,
body.light-mode .header-navbar .navbar-container ul.nav li .nav-link:hover i,
body.light-mode .header-navbar .navbar-container ul.nav li .nav-link:hover .selected-language {
  color: var(--sarai-secondary-300) !important;
}

.badge-primary,
.badge.badge-primary {
  background: var(--sarai-secondary-500) !important;
  color: var(--sarai-primary-900) !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn-primary,
.btn.btn-primary {
  background: linear-gradient(118deg, var(--sarai-primary-500), var(--sarai-primary-400)) !important;
  border-color: var(--sarai-primary-500) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(78, 135, 197, 0.25);
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background: linear-gradient(118deg, var(--sarai-primary-600), var(--sarai-primary-500)) !important;
  border-color: var(--sarai-primary-600) !important;
  box-shadow: 0 6px 20px rgba(78, 135, 197, 0.35);
}

.btn-outline-primary {
  border-color: var(--sarai-primary-500) !important;
  color: var(--sarai-primary-500) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
  background: var(--sarai-primary-500) !important;
  color: #fff !important;
}

.btn-warning,
.btn.btn-warning {
  background: linear-gradient(118deg, var(--sarai-secondary-500), var(--sarai-secondary-400)) !important;
  border-color: var(--sarai-secondary-600) !important;
  color: var(--sarai-primary-900) !important;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  border: 1px solid var(--sarai-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--sarai-shadow);
}

.card-header {
  background: var(--sarai-primary-50);
  color: var(--sarai-primary-700);
  border-bottom: 1px solid var(--sarai-border);
}

body.dark-layout .card .card-header,
body.dark-layout .card .card-footer {
  background-color: var(--sarai-card-header-bg, var(--sarai-primary-600)) !important;
  color: #fff !important;
  border-bottom-color: var(--sarai-primary-700) !important;
}

body.dark-layout .card .card-header .card-title,
body.dark-layout .card .card-header h4,
body.dark-layout .card .card-header h5 {
  color: #fff !important;
}

.align-center .card:hover {
  border-color: var(--sarai-primary-300);
  box-shadow: 0 8px 28px rgba(78, 135, 197, 0.12);
}

.align-center .card h2 {
  color: var(--sarai-primary-500);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--sarai-primary-400) !important;
  box-shadow: 0 0 0 0.2rem rgba(78, 135, 197, 0.18) !important;
}

.form-control:focus ~ .form-control-position i,
.form-label-group > input:focus:not(:placeholder-shown) ~ label,
.form-label-group > input:not(:active):not(:placeholder-shown) ~ label,
.form-label-group textarea:focus:not(:placeholder-shown) ~ label,
.form-label-group textarea:not(:active):not(:placeholder-shown) ~ label {
  color: var(--sarai-primary-400) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--sarai-primary-500) !important;
  border-color: var(--sarai-primary-500) !important;
}

.vs-checkbox-primary input:checked ~ .vs-checkbox {
  background: var(--sarai-primary-500) !important;
  border-color: var(--sarai-primary-500) !important;
}

.container-checkbox input:checked ~ .checkmark {
  background: linear-gradient(-118deg, var(--sarai-primary-500), rgba(78, 135, 197, 0.7)) !important;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

thead tr {
  background: var(--sarai-table-header-bg, var(--sarai-primary-50)) !important;
}

thead th {
  color: var(--sarai-primary-700) !important;
  font-weight: 600;
}

body.dark-layout thead th {
  color: var(--sarai-primary-50) !important;
}

tbody tr {
  border-bottom-color: var(--sarai-primary-100) !important;
}

.pagination .page-item.active .page-link {
  background: var(--sarai-primary-500) !important;
  border-color: var(--sarai-primary-500) !important;
  color: #fff !important;
}

/* ── Loader ───────────────────────────────────────────────────────────── */

.loader {
  background: rgba(17, 28, 43, 0.92) !important;
}

html .pace .pace-progress {
  background: var(--sarai-primary-500) !important;
}

.sk-chase-dot:before {
  background-color: var(--sarai-secondary-300) !important;
}

.loader .spinner-border {
  color: var(--sarai-primary-400) !important;
  border-color: currentColor;
  border-right-color: transparent !important;
}

/* ── Primary utility overrides (Vuexy template) ───────────────────────── */

.text-primary { color: var(--sarai-primary-500) !important; }
.bg-primary { background-color: var(--sarai-primary-500) !important; }
.border-primary { border-color: var(--sarai-primary-500) !important; }

.bg-rgba-primary { background: rgba(78, 135, 197, 0.12) !important; }
.bg-rgba-warning { background: rgba(91, 160, 235, 0.15) !important; }
.bg-rgba-success { background: rgba(40, 199, 111, 0.12) !important; }
.bg-rgba-info { background: rgba(127, 170, 170, 0.12) !important; }
.bg-rgba-danger { background: rgba(184, 156, 58, 0.1) !important; }

.text-primary { color: var(--sarai-primary-500) !important; }
.text-warning { color: var(--sarai-secondary-600) !important; }
.text-success { color: var(--sarai-primary-400) !important; }
.text-info { color: var(--sarai-primary-300) !important; }
.text-danger { color: var(--sarai-secondary-700) !important; }

/* Vuexy template color class overrides */
.primary { color: var(--sarai-primary-500) !important; }
.bg-primary { background-color: var(--sarai-primary-500) !important; }
.warning { color: var(--sarai-secondary-600) !important; }
.bg-warning { background-color: var(--sarai-secondary-500) !important; }
.success { color: var(--sarai-primary-400) !important; }
.bg-success { background-color: var(--sarai-primary-400) !important; }
.info { color: var(--sarai-primary-300) !important; }
.bg-info { background-color: var(--sarai-primary-300) !important; }

/* Footer */
.footer.footer-light {
  background: var(--sarai-surface) !important;
  border-top: 1px solid var(--sarai-border);
}

body.dark-layout .footer.footer-light {
  background: var(--sarai-primary-800) !important;
  border-top-color: var(--sarai-primary-700);
}

body.dark-layout .footer.footer-light p,
body.dark-layout .footer.footer-light a {
  color: var(--sarai-primary-200) !important;
}

/* Select2 — visible text + vertical centering (match form-control height) */
.select2-container--default .select2-selection--single {
  background-color: var(--sarai-primary-50) !important;
  border-color: var(--sarai-border) !important;
  height: calc(1.75rem + 1.4rem + 1px) !important;
  min-height: calc(1.75rem + 1.4rem + 1px) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sarai-primary-900) !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  height: auto !important;
  min-height: 0 !important;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--sarai-text-muted) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--sarai-primary-500) !important;
  position: static !important;
  margin: 0 !important;
}

.select2-container--default .select2-results__option {
  color: var(--sarai-primary-900);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--sarai-primary-500) !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: var(--sarai-primary-100) !important;
  color: var(--sarai-primary-700) !important;
}

.select2-dropdown {
  border-color: var(--sarai-border) !important;
  background-color: #fff !important;
}

body.dark-layout .select2-container--default .select2-selection--single,
body.dark-layout .select2-container .select2-selection {
  background-color: var(--sarai-primary-700) !important;
  border-color: var(--sarai-primary-600) !important;
}

body.dark-layout .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-layout .select2-container .select2-selection .select2-selection__rendered {
  color: #E8F0F0 !important;
}

body.dark-layout .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--sarai-primary-200) !important;
}

body.dark-layout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--sarai-secondary-400) !important;
}

body.dark-layout .select2-dropdown {
  background-color: var(--sarai-primary-800) !important;
  border-color: var(--sarai-primary-600) !important;
}

body.dark-layout .select2-container--default .select2-results__option {
  color: #E8F0F0 !important;
}

body.dark-layout .select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: var(--sarai-primary-600) !important;
  color: #fff !important;
}

body.dark-layout .searchTable .select2-container--default .select2-selection--single,
body.dark-layout .searchTable .select2-container .select2-selection {
  background-color: var(--sarai-primary-700) !important;
}

body.dark-layout .searchTable .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #E8F0F0 !important;
}

body.dark-layout .searchTable label,
body.dark-layout .searchTable h3 {
  color: #E8F0F0 !important;
}

/* Toastr */
.toast-success {
  background-color: var(--sarai-primary-500) !important;
}

.toast-warning {
  background-color: var(--sarai-secondary-500) !important;
  color: var(--sarai-primary-900) !important;
}

/* ── Dark layout ────────────────────────────────────────────────────────── */

body.dark-layout {
  background-color: var(--sarai-primary-900) !important;
}

body.dark-layout .app-content .content-wrapper {
  background-color: var(--sarai-primary-900) !important;
}

body.dark-layout .header-navbar {
  background: var(--sarai-primary-800) !important;
  border-bottom-color: var(--sarai-primary-700);
}

body.dark-layout .header-navbar .nav-link,
body.dark-layout .header-navbar .breadcrumb-text,
body.dark-layout .header-navbar .breadcrumb-text a,
body.dark-layout .header-navbar .breadcrumb-text span {
  color: var(--sarai-primary-100) !important;
}

body.dark-layout .card {
  background-color: var(--sarai-primary-800) !important;
  border-color: var(--sarai-primary-700);
}

body.dark-layout h1,
body.dark-layout h2,
body.dark-layout h3,
body.dark-layout h4,
body.dark-layout h5,
body.dark-layout h6,
body.dark-layout .card-title {
  color: #fff !important;
}

body.dark-layout .form-control,
body.dark-layout .custom-select {
  background-color: var(--sarai-primary-700) !important;
  border-color: var(--sarai-primary-600) !important;
  color: #fff !important;
}

body.dark-layout thead tr,
body.dark-layout .table thead tr {
  background: var(--sarai-table-header-bg, var(--sarai-primary-700)) !important;
}

body.dark-layout .table thead tr th,
body.dark-layout .table .thead tr:not([class*='table-']) th,
body.dark-layout .dataTables_wrapper .table.dataTable thead th,
body.dark-layout .dataTables_wrapper .table.dataTable thead td,
body.dark-layout table.dataTable thead th,
body.dark-layout table.dataTable thead td {
  background-color: var(--sarai-table-header-bg, var(--sarai-primary-700)) !important;
  color: var(--sarai-primary-50) !important;
  border-color: var(--sarai-primary-600) !important;
}

/* index_page.css loads after brand-theme — reinforce with equal specificity */
body.dark-layout .table thead tr,
body.dark-layout .table thead tr th {
  background: var(--sarai-table-header-bg, var(--sarai-primary-700)) !important;
}

body.dark-layout .table {
  border-color: var(--sarai-primary-700) !important;
}

/* Row action icon buttons */
.product-action > span {
  background: var(--sarai-primary-100) !important;
}

body.dark-layout .product-action > span {
  background: var(--sarai-primary-700) !important;
}

body.dark-layout .product-action > span:hover {
  background: var(--sarai-primary-600) !important;
}

/* Filter button — soft sky accent */
.btn-searchTable {
  background: linear-gradient(118deg, var(--sarai-secondary-500), var(--sarai-secondary-400)) !important;
  color: var(--sarai-primary-900) !important;
  font-weight: 600;
  padding: 4px 16px 4px 4px !important;
  box-shadow: 0 3px 12px rgba(91, 160, 235, 0.4);
  border: 1px solid var(--sarai-secondary-600) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-searchTable:hover {
  box-shadow: 0 5px 16px rgba(91, 160, 235, 0.55);
  transform: translateY(-1px);
  color: var(--sarai-primary-900) !important;
}

.btn-searchTable span {
  color: var(--sarai-primary-900) !important;
  font-weight: 600;
}

.btn-searchTable > i {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid var(--sarai-primary-700) !important;
  outline: none !important;
  color: var(--sarai-primary-800) !important;
}

body.dark-layout .btn-searchTable,
body.dark-layout .btn-searchTable:hover {
  background: linear-gradient(118deg, var(--sarai-secondary-500), var(--sarai-secondary-400)) !important;
  color: var(--sarai-primary-900) !important;
}

body.dark-layout .btn-searchTable span {
  color: var(--sarai-primary-900) !important;
}

body.dark-layout .btn-searchTable > i {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: var(--sarai-primary-800) !important;
  color: var(--sarai-primary-900) !important;
  outline: none !important;
}

body.dark-layout tbody tr {
  border-bottom-color: var(--sarai-primary-700) !important;
}

body.dark-layout a:hover {
  color: var(--sarai-secondary-400) !important;
}

body.dark-layout .title_lable {
  color: var(--sarai-secondary-400) !important;
}

body.dark-layout .btn-outline-primary {
  color: var(--sarai-secondary-400) !important;
  border-color: var(--sarai-secondary-500) !important;
}

body.dark-layout .btn-outline-primary:hover,
body.dark-layout .btn-outline-primary.active {
  background: var(--sarai-secondary-500) !important;
  color: var(--sarai-primary-900) !important;
}

/* ── Login page ─────────────────────────────────────────────────────────── */

.auth-logo {
  width: 78%;
  max-width: 340px;
  height: auto !important;
  max-height: 220px !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.login-brand-panel {
  background: linear-gradient(135deg, var(--sarai-primary-700) 0%, var(--sarai-primary-900) 100%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 2rem !important;
  align-self: stretch;
}

.login-form-logo .auth-logo {
  width: 160px;
  max-height: 120px !important;
}

.login-form-panel {
  background: #ffffff;
  align-self: stretch;
}

.login-form-panel > .card {
  height: 100%;
  background: #ffffff !important;
}

.login-card-wrapper > .row {
  align-items: stretch;
}

.login-card-title {
  color: var(--sarai-primary-700) !important;
}

.login-submit-btn {
  background: linear-gradient(118deg, var(--sarai-primary-500), var(--sarai-primary-400)) !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.login-submit-btn:hover {
  background: linear-gradient(118deg, var(--sarai-primary-600), var(--sarai-primary-500)) !important;
}