/* ==========================================================================
   ShopNest Admin skin
   Loaded AFTER the theme CSS (style.css, custom.css, m_style.css, responsive.css).
   Brand tokens come from shopnest-colors.css (--sn-*).
   ========================================================================== */

/* The brand token file switches to dark values with prefers-color-scheme.
   The admin has its own light/dark switch (data-bs-theme), so pin the tokens
   to the admin theme instead of the OS setting. */
:root[data-bs-theme="light"],
:root:not([data-bs-theme]) {
  --sn-primary: #FF5722;
  --sn-primary-dark: #E64A19;
  --sn-primary-text: #C2410C;
  --sn-primary-light: #FFE9E2;
  --sn-navy: #1B2A47;
  --sn-navy-deep: #13213A;
  --sn-bg: #F7F8FA;
  --sn-surface: #FFFFFF;
  --sn-border: #E3E6EC;
  --sn-text: #1B2A47;
  --sn-text-secondary: #5B6475;
  --sn-text-muted: #6B7385;
  --sn-success: #16A34A;
  --sn-warning: #F59E0B;
  --sn-error: #DC2626;
  --sn-info: #2563EB;
  --sn-rating: #FFB400;
  --sn-table-head: #EEF1F6;
}

:root[data-bs-theme="dark"] {
  --sn-primary: #FF7A50;
  --sn-primary-dark: #FF5722;
  --sn-primary-text: #FF7A50;
  --sn-primary-light: #4A2014;
  --sn-navy: #1B2A47;
  --sn-navy-deep: #13213A;
  --sn-bg: #0E1728;
  --sn-surface: #13213A;
  --sn-border: #2A3A5C;
  --sn-text: #F5F7FA;
  --sn-text-secondary: #A9B3C4;
  --sn-text-muted: #A9B3C4;
  --sn-error: #F87171;
  --sn-table-head: #1C2B47;
}

:root {
  --sn-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sn-radius: 12px;
  --sn-radius-sm: 8px;
  --sn-shadow: 0 1px 2px rgba(19, 33, 58, 0.04), 0 6px 20px rgba(19, 33, 58, 0.06);
  --sn-shadow-lg: 0 12px 40px rgba(19, 33, 58, 0.14);
  --sn-focus-ring: 0 0 0 0.2rem rgba(255, 87, 34, 0.18);

  /* Bootstrap 5.3 variables -> ShopNest */
  --bs-primary: #FF5722;
  --bs-primary-rgb: 255, 87, 34;
  --bs-primary-text-emphasis: #C2410C;
  --bs-primary-bg-subtle: #FFE9E2;
  --bs-primary-border-subtle: #FFC2AE;
  --bs-link-color: #C2410C;
  --bs-link-color-rgb: 194, 65, 12;
  --bs-link-hover-color: #E64A19;
  --bs-link-hover-color-rgb: 230, 74, 25;
  --bs-success: #16A34A;
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #DC2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-info: #2563EB;
  --bs-info-rgb: 37, 99, 235;
  --bs-body-font-family: var(--sn-font);
}

:root[data-bs-theme="light"] {
  --bs-body-color: #1B2A47;
  --bs-body-color-rgb: 27, 42, 71;
  --bs-border-color: #E3E6EC;
}

:root[data-bs-theme="dark"] {
  --bs-link-color: #FF7A50;
  --bs-link-color-rgb: 255, 122, 80;
  --bs-link-hover-color: #FF9A78;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sn-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The theme hard-codes "Roboto" on many selectors; switch text to Inter while
   leaving icon fonts (Font Awesome, Bootstrap Icons, MDI, Themify...) alone. */
body :is(h1, h2, h3, h4, h5, h6, p, a, span, label, li, td, th, input, select, textarea, button, small, strong, div, legend, option):not([class*="fa-"]):not([class^="fa"]):not([class*=" fa"]):not([class*="mdi"]):not([class^="ti-"]):not([class*=" ti-"]):not([class^="bi"]):not([class*=" bi-"]):not([class*="icon"]):not(.material-icons) {
  font-family: var(--sn-font) !important;
}

:root[data-bs-theme="light"] body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--sn-navy);
}

/* --------------------------------------------------------------------------
   Page / layout
   -------------------------------------------------------------------------- */
:root[data-bs-theme="light"] body,
:root[data-bs-theme="light"] .page-wrapper {
  background: var(--sn-bg) !important;
}

/* Preloader */
.preloader {
  background: var(--sn-surface) !important;
}

.preloader .loading-img {
  animation: sn-pulse 1.2s ease-in-out infinite;
}

@keyframes sn-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.75; }
}

/* --------------------------------------------------------------------------
   Top header
   -------------------------------------------------------------------------- */
:root[data-bs-theme="light"] #main-wrapper .topbar,
:root[data-bs-theme="light"] #main-wrapper .topbar .top-navbar,
:root[data-bs-theme="light"] #main-wrapper .topbar .navbar-collapse,
:root[data-bs-theme="light"] #main-wrapper .topbar .top-navbar .navbar-header {
  background: var(--sn-surface) !important;
}

#main-wrapper .topbar {
  border-bottom: 1px solid var(--sn-border);
  box-shadow: 0 1px 0 rgba(19, 33, 58, 0.02) !important;
}

:root[data-bs-theme="light"] #main-wrapper .topbar .top-navbar .navbar-header {
  border-right: 1px solid var(--sn-border);
}

:root[data-bs-theme="light"] #main-wrapper .topbar .top-navbar .navbar-nav > .nav-item > .nav-link,
:root[data-bs-theme="light"] #main-wrapper .topbar .top-navbar .nav-toggler,
:root[data-bs-theme="light"] #main-wrapper .topbar .top-navbar .topbartoggler {
  color: var(--sn-navy) !important;
}

#main-wrapper .topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--sn-primary) !important;
}

#main-wrapper .topbar .top-search-box .input-group {
  border-radius: 10px;
  background: var(--sn-bg);
  border: 1px solid var(--sn-border);
}

#main-wrapper .topbar .top-search-box .input-group:focus-within {
  border-color: var(--sn-primary);
  box-shadow: var(--sn-focus-ring);
}

#main-wrapper .topbar .notify .point,
#main-wrapper .topbar .notify .heartbit {
  background-color: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
}

/* Brand (logo) in header when no organization logo is configured */
.sn-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.sn-brand .sn-brand-mark,
#main-wrapper .topbar .top-navbar .navbar-header .navbar-brand .logo-text.sn-brand img.sn-brand-mark {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px;
  margin: 0 !important;
  object-fit: contain !important;
  flex: 0 0 auto;
}

.sn-wordmark {
  font-family: var(--sn-font) !important;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--sn-navy);
}

:root[data-bs-theme="dark"] .sn-wordmark {
  color: #fff;
}

.sn-wordmark .sn-wordmark-accent {
  color: var(--sn-primary);
}

/* --------------------------------------------------------------------------
   Sidebar - navy-deep with orange active item
   -------------------------------------------------------------------------- */
#main-wrapper .left-sidebar,
#main-wrapper .left-sidebar[data-sidebarbg],
#main-wrapper .left-sidebar .scroll-sidebar,
#main-wrapper .left-sidebar .sidebar-nav,
#main-wrapper .left-sidebar .sidebar-nav ul,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .first-level,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .second-level {
  background: var(--sn-navy-deep) !important;
}

#main-wrapper .left-sidebar {
  border-right: 0 !important;
  box-shadow: 2px 0 12px rgba(19, 33, 58, 0.08);
}

/* Light (white) icon set on the dark sidebar. The filter also turns the few
   menu icons that only exist in a dark version (e.g. Settings) white. */
#main-wrapper .left-sidebar .sidebar-item .light-img {
  display: inline-block !important;
  opacity: 0.72;
  filter: brightness(0) invert(1);
}

#main-wrapper .left-sidebar .sidebar-item .dark-img {
  display: none !important;
}

#main-wrapper .left-sidebar .settings_ethernet {
  display: none !important;
}

#main-wrapper .left-sidebar .settings_ethernet_dark {
  display: inline-block !important;
  opacity: 0.7;
}

/* Links */
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link .hide-menu,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link i,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link svg {
  color: rgba(226, 232, 244, 0.72) !important;
  opacity: 1;
}

#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link {
  position: relative;
  margin: 2px 12px;
  border-radius: 10px;
  background: transparent !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-link {
  border-radius: 8px;
  margin: 1px 12px 1px 20px;
  background: transparent !important;
}

/* Hover */
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover .hide-menu,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover i,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover svg {
  color: #FFFFFF !important;
}

#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link:hover .light-img {
  opacity: 1;
}

/* Selected / active top-level item: tinted background + orange left indicator */
#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link,
#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.active {
  background: rgba(255, 87, 34, 0.14) !important;
}

#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link::before,
#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--sn-primary);
}

#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link,
#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link .hide-menu,
#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.active,
#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.active .hide-menu {
  color: #FFFFFF !important;
  font-weight: 600;
}

#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link .light-img,
#main-wrapper .left-sidebar .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.active .light-img {
  opacity: 1;
}

/* Active sub-menu link: orange text */
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-link.active,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-link.active .hide-menu,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-link.active i,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-link.active svg,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-item.selected > .sidebar-link .hide-menu {
  color: #FF7A50 !important;
  font-weight: 600;
}

/* Collapse arrows */
#main-wrapper .left-sidebar .sidebar-nav .has-arrow::after {
  border-color: rgba(226, 232, 244, 0.55) !important;
}

#main-wrapper .left-sidebar .sidebar-nav .sidebar-item.selected > .has-arrow::after,
#main-wrapper .left-sidebar .sidebar-nav .has-arrow:hover::after {
  border-color: #FFFFFF !important;
}

/* Organization / user block at the top of the sidebar */
#main-wrapper .left-sidebar .sidebar-user-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}

#main-wrapper .left-sidebar .sidebar-user-nav .user-profile,
#main-wrapper .left-sidebar .sidebar-user-nav .user-profile > .sidebar-link,
#main-wrapper .left-sidebar .sidebar-user-nav .user-profile > .nav-link {
  background: rgba(255, 255, 255, 0.04) !important;
}

#main-wrapper .left-sidebar .user-name h3,
#main-wrapper .left-sidebar .user-name .hide-menu {
  color: #FFFFFF !important;
  font-weight: 600;
}

#main-wrapper .left-sidebar .avatar-circle {
  background: var(--sn-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

/* "Powered by ShopNest" footer item */
#main-wrapper .left-sidebar .powered-by {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#main-wrapper .left-sidebar .powered-by .hide-menu {
  color: rgba(226, 232, 244, 0.55) !important;
  font-size: 12px;
}

.sn-powered-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sn-powered-brand .sn-powered-mark,
#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link .powered-by img.sn-powered-mark {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  object-fit: contain !important;
}

#main-wrapper .left-sidebar .sidebar-nav ul .sidebar-item .sidebar-link .powered-by,
#main-wrapper .left-sidebar .sidebar-nav ul.sidebarnav2,
#main-wrapper .left-sidebar .sidebar-nav ul.sidebarnav2 .sidebar-item {
  background: transparent !important;
}

.sn-powered-brand .sn-powered-name {
  font-weight: 700;
  font-size: 14px;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
}

/* Sidebar scrollbar */
#main-wrapper .left-sidebar ::-webkit-scrollbar {
  width: 6px;
}

#main-wrapper .left-sidebar ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-primary,
.btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sn-primary);
  --bs-btn-border-color: var(--sn-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sn-primary-dark);
  --bs-btn-hover-border-color: var(--sn-primary-dark);
  --bs-btn-focus-shadow-rgb: 255, 87, 34;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sn-primary-dark);
  --bs-btn-active-border-color: var(--sn-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sn-primary);
  --bs-btn-disabled-border-color: var(--sn-primary);
  background-color: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
  color: #fff !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--sn-primary-dark) !important;
  border-color: var(--sn-primary-dark) !important;
  color: #fff !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--sn-primary-text);
  --bs-btn-border-color: var(--sn-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sn-primary);
  --bs-btn-hover-border-color: var(--sn-primary);
  --bs-btn-active-bg: var(--sn-primary-dark);
  --bs-btn-active-border-color: var(--sn-primary-dark);
  color: var(--sn-primary-text) !important;
  border-color: var(--sn-primary) !important;
}

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

.btn-light-primary {
  background-color: var(--sn-primary-light) !important;
  color: var(--sn-primary-text) !important;
  border-color: transparent !important;
}

.btn.submit-btn,
.btn.save-btn,
.save-btn {
  background-color: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255, 87, 34, 0.22) !important;
}

.btn.submit-btn:hover,
.btn.submit-btn:focus,
.btn.submit-btn:active,
.btn.save-btn:hover,
.save-btn:hover {
  background-color: var(--sn-primary-dark) !important;
  border-color: var(--sn-primary-dark) !important;
  color: #fff !important;
}

.btn:focus-visible {
  box-shadow: var(--sn-focus-ring) !important;
}

/* --------------------------------------------------------------------------
   Text, links, badges, backgrounds
   -------------------------------------------------------------------------- */
.text-primary {
  color: var(--sn-primary-text) !important;
}

.bg-primary,
.badge.bg-primary,
.badge-primary,
.label-primary {
  background-color: var(--sn-primary) !important;
  color: #fff !important;
}

.bg-light-primary,
.badge.bg-light-primary {
  background-color: var(--sn-primary-light) !important;
  color: var(--sn-primary-text) !important;
}

.border-primary {
  border-color: var(--sn-primary) !important;
}

.badge {
  font-weight: 600;
  border-radius: 6px;
}

.bg-success, .badge.bg-success { background-color: var(--sn-success) !important; }
.bg-warning, .badge.bg-warning { background-color: var(--sn-warning) !important; }
.bg-danger, .badge.bg-danger { background-color: var(--sn-error) !important; }
.bg-info, .badge.bg-info { background-color: var(--sn-info) !important; }

.page-wrapper :is(p, td, li, .card-body, .breadcrumb-item) > a:not([class]) {
  color: var(--sn-primary-text);
}

.page-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebar-link):not([class*="icon"]):hover {
  color: var(--sn-primary-dark);
}

/* Rating stars */
.star-on-png, .rating-star, .fa-star.checked {
  color: var(--sn-rating) !important;
}

/* --------------------------------------------------------------------------
   Pagination (Bootstrap + bootstrap-table + DataTables)
   -------------------------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--sn-navy);
  --bs-pagination-hover-color: var(--sn-primary-dark);
  --bs-pagination-focus-color: var(--sn-primary-dark);
  --bs-pagination-focus-box-shadow: var(--sn-focus-ring);
  --bs-pagination-active-bg: var(--sn-primary);
  --bs-pagination-active-border-color: var(--sn-primary);
}

.page-item.active .page-link,
.pagination .active > .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
  color: #fff !important;
}

.page-link {
  border-radius: 8px !important;
  margin: 0 2px;
}

.page-link:hover {
  color: var(--sn-primary-dark);
  background-color: var(--sn-primary-light);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: 8px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.bootstrap-tagsinput.focus {
  border-color: var(--sn-primary) !important;
  box-shadow: var(--sn-focus-ring) !important;
  outline: 0;
}

.form-check-input:checked {
  background-color: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFB39C'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb { background-color: var(--sn-primary); }
.form-range::-moz-range-thumb { background-color: var(--sn-primary); }

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

/* Nav tabs / pills */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--sn-primary-text) !important;
  border-bottom-color: var(--sn-primary) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--sn-primary) !important;
  color: #fff !important;
}

/* Dropdowns */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--sn-primary) !important;
  color: #fff !important;
}

.dropdown-menu {
  border-radius: 10px;
  border-color: var(--sn-border);
  box-shadow: var(--sn-shadow-lg);
}

/* Progress */
.progress-bar {
  background-color: var(--sn-primary);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.page-wrapper .card,
.page-wrapper .right-box-content,
.page-wrapper .edit-box-list,
.page-wrapper .widget-card-box,
.page-wrapper .section-top-header,
.page-wrapper .chart-box .card {
  border-radius: var(--sn-radius) !important;
  border: 1px solid var(--sn-border) !important;
  box-shadow: var(--sn-shadow) !important;
}

:root[data-bs-theme="light"] .page-wrapper .card {
  background-color: var(--sn-surface);
}

.page-wrapper .card > .card-header:first-child {
  border-top-left-radius: var(--sn-radius);
  border-top-right-radius: var(--sn-radius);
}

.modal-content {
  border-radius: var(--sn-radius) !important;
  border: 0;
  box-shadow: var(--sn-shadow-lg);
}

/* --------------------------------------------------------------------------
   Tables - navy-tinted header
   -------------------------------------------------------------------------- */
.page-wrapper .table > thead > tr > th,
.page-wrapper .table > thead > tr > td,
.page-wrapper .table thead th,
.page-wrapper table.dataTable thead th,
.page-wrapper .bootstrap-table .fixed-table-container .table thead th,
.page-wrapper .payment-history-list .table .payment-table-head tr th {
  background-color: var(--sn-table-head) !important;
  color: var(--sn-text) !important;
  font-weight: 600 !important;
  font-size: 13px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--sn-border) !important;
}

.page-wrapper .table > thead > tr > th:first-child {
  border-top-left-radius: 8px;
}

.page-wrapper .table > thead > tr > th:last-child {
  border-top-right-radius: 8px;
}

:root[data-bs-theme="light"] .page-wrapper .table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(255, 87, 34, 0.04);
  --bs-table-accent-bg: rgba(255, 87, 34, 0.04);
}

.page-wrapper .table > tbody > tr > td {
  border-color: var(--sn-border);
}

/* --------------------------------------------------------------------------
   Misc third-party widgets
   -------------------------------------------------------------------------- */
.swal2-styled.swal2-confirm {
  background-color: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
}

.swal2-styled.swal2-confirm:focus {
  box-shadow: var(--sn-focus-ring) !important;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active,
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
  background: var(--sn-primary) !important;
  color: #fff !important;
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover {
  background: var(--sn-primary-light) !important;
  color: var(--sn-primary-text) !important;
}

.jstree-default .jstree-clicked {
  background: var(--sn-primary-light) !important;
  box-shadow: inset 0 0 1px var(--sn-primary) !important;
}

footer.footer {
  color: var(--sn-text-secondary);
  font-size: 13px;
}

/* ==========================================================================
   Auth pages (login / forgot password / reset password)
   ========================================================================== */
.sn-auth {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: var(--sn-bg);
  font-family: var(--sn-font);
}

/* Brand panel */
.sn-auth-brand {
  position: relative;
  flex: 0 0 44%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 56px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 87, 34, 0.28) 0, rgba(255, 87, 34, 0) 42%),
    radial-gradient(circle at 8% 92%, rgba(255, 87, 34, 0.16) 0, rgba(255, 87, 34, 0) 38%),
    linear-gradient(160deg, #1B2A47 0%, #13213A 62%);
  overflow: hidden;
}

.sn-auth-brand::after {
  /* large faded bag mark in the corner */
  content: "";
  position: absolute;
  right: -90px;
  bottom: -70px;
  width: 360px;
  height: 360px;
  background: url("shopnest_mark.svg") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}

.sn-auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.sn-auth-logo img {
  width: 44px;
  height: 44px;
}

.sn-auth .sn-auth-logo .sn-wordmark {
  font-size: 28px;
  color: #fff !important;
}

.sn-auth-brand-body {
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.sn-auth-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 87, 34, 0.16);
  color: #FFB39C !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.sn-auth .sn-auth-brand h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff !important;
  margin: 0 0 16px;
}

.sn-auth .sn-auth-brand h1 span {
  color: #FF7A50 !important;
}

.sn-auth .sn-auth-brand p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(226, 232, 244, 0.78) !important;
  margin: 0;
}

.sn-auth-features {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 12px;
}

.sn-auth .sn-auth-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(245, 247, 250, 0.9) !important;
}

.sn-auth-features li::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 87, 34, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7A50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 12px;
}

.sn-auth .sn-auth-brand-foot {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: rgba(226, 232, 244, 0.55) !important;
}

/* Form side */
.sn-auth-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.sn-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: 16px;
  box-shadow: var(--sn-shadow-lg);
  padding: 40px;
}

.sn-auth-card .sn-auth-mobile-logo {
  display: none;
  margin-bottom: 24px;
}

.sn-auth .sn-auth-card h4 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sn-navy) !important;
  margin: 0 0 6px;
}

.sn-auth .sn-auth-card .sn-auth-sub {
  font-size: 15px;
  color: var(--sn-text-secondary) !important;
  margin: 0;
}

.sn-auth .login-form {
  margin-top: 28px;
}

.sn-auth .login-form .form-group {
  margin-bottom: 18px;
}

.sn-auth .login-form .form-group label,
.sn-auth .login-form .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sn-navy) !important;
  margin-bottom: 6px;
}

.sn-auth .login-form .form-group .form-control {
  height: 48px;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--sn-border);
  border-radius: 10px;
  color: var(--sn-navy);
  background: #fff;
}

.sn-auth .login-form .form-group .form-control::placeholder {
  color: #9AA3B2;
}

.sn-auth .login-form .form-group .form-control:focus {
  border-color: var(--sn-primary);
  box-shadow: var(--sn-focus-ring);
}

.sn-auth .btn.submit-btn {
  height: 50px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sn-auth .form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.sn-auth .login-form .form-group .custom-control-label {
  font-size: 14px;
  color: var(--sn-text-secondary) !important;
}

.sn-auth .login-form .form-group .form-links a,
.sn-auth .sn-auth-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--sn-primary-text) !important;
  text-decoration: none;
}

.sn-auth .login-form .form-group .form-links a:hover,
.sn-auth .sn-auth-link:hover {
  color: var(--sn-primary-dark) !important;
  text-decoration: underline;
}

.sn-auth .custom-control-input {
  width: 16px;
  height: 16px;
  accent-color: var(--sn-primary);
}

.sn-auth .error-message {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--sn-error) !important;
  font-size: 14px;
}

.sn-auth .otp-inputs {
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 4px;
}

.sn-auth .otp-inputs input {
  width: 100%;
  max-width: 72px;
  height: 60px;
  font-size: 22px;
  font-weight: 700;
  color: var(--sn-navy);
  border: 1px solid var(--sn-border);
  border-radius: 10px;
}

.sn-auth .otp-inputs input:focus {
  border-color: var(--sn-primary);
  box-shadow: var(--sn-focus-ring);
}

.sn-auth-back {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--sn-text-secondary);
}

@media (max-width: 991.98px) {
  .sn-auth-brand {
    display: none;
  }

  .sn-auth-card .sn-auth-mobile-logo {
    display: inline-flex;
  }

  .sn-auth .sn-auth-mobile-logo .sn-wordmark {
    color: var(--sn-navy) !important;
  }
}

@media (max-width: 575.98px) {
  .sn-auth-main {
    padding: 24px 16px;
  }

  .sn-auth-card {
    padding: 28px 20px;
    border-radius: 14px;
  }
}

/* Bottom "Powered by" block */
#main-wrapper .left-sidebar #sidebarnav2 {
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-width: 1px 0 0 0 !important;
  border-style: solid !important;
}

/* ── Demo login pills (login page) ─────────────────────── */
.sn-demo-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.sn-demo-pills-label {
  font-size: 13px;
  color: var(--sn-text-secondary);
}
.sn-demo-pills-label i { color: var(--sn-primary); margin-right: 2px; }
.sn-demo-pill {
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sn-primary-text);
  background: var(--sn-primary-light);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sn-demo-pill:hover,
.sn-demo-pill:focus-visible {
  border-color: var(--sn-primary);
  outline: none;
}
.sn-demo-pill.is-selected {
  color: #fff;
  background: var(--sn-primary);
}