/* =====================================================
   FIRE EARTH THEME — Kshatriya Connect Admin Panel
   Chestnut   #963F2E  |  Aztec Gold  #CD9B59
   Khaki X11  #EDE490
   ===================================================== */

/* ── CSS Custom Properties ──────────────────────────── */
:root {
  /* Primary — Chestnut (Deep Brick Red) */
  --sp-saffron:        #963F2E;
  --sp-saffron-dark:   #7A3225;
  --sp-saffron-light:  #B85C44;
  --sp-saffron-xlight: #F5E8E4;

  /* Secondary — Aztec Gold */
  --sp-purple:         #CD9B59;
  --sp-purple-dark:    #A87C3A;
  --sp-purple-light:   #DAAC72;
  --sp-purple-xlight:  #FDF3E0;

  /* Accent — Khaki X11 (light) */
  --sp-gold:           #EDE490;
  --sp-gold-light:     #F3ECA0;
  --sp-gold-xlight:    #FAF8D8;

  /* Sidebar — Deep Mahogany → Chestnut */
  --sp-sidebar:        #3D1810;
  --sp-sidebar2:       #5C2419;
  --sp-sidebar3:       #7A3225;

  /* Backgrounds */
  --sp-cream:          #FDFCE6;
  --sp-cream2:         #F5EEC5;

  /* Text */
  --sp-text-dark:      #2A1208;
  --sp-text-mid:       #6B3C28;

  /* Borders & Shadows */
  --sp-border-gold:    rgba(205, 155, 89, 0.28);
  --sp-border-soft:    rgba(205, 155, 89, 0.15);
  --sp-shadow:         rgba(61, 24, 16, 0.14);
  --sp-transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1) all;
}

/* ── Body & Global ───────────────────────────────────── */
body {
  background: var(--sp-cream) !important;
  color: var(--sp-text-dark) !important;
  font-family: "Nunito", "Segoe UI", sans-serif !important;
  overflow-x: hidden !important;
}

#content {
  overflow-x: hidden !important;
}

.layout-px-spacing {
  overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sp-text-dark) !important;
}

p { color: var(--sp-text-mid) !important; }

a { color: var(--sp-saffron); }
a:hover { color: var(--sp-saffron-dark); }

hr { border-top-color: var(--sp-border-gold) !important; }

/* ── Loader / Spinner ────────────────────────────────── */
#load_screen {
  background: var(--sp-sidebar) !important;
}
#load_screen .loader .loader-content .spinner-grow {
  background-color: var(--sp-purple) !important;
  color: var(--sp-purple) !important;
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar-wrapper,
.sidebar-theme {
  background: linear-gradient(180deg, var(--sp-sidebar) 0%, var(--sp-sidebar2) 55%, var(--sp-sidebar3) 100%) !important;
  border-right: 1px solid rgba(205, 155, 89, 0.18);
  box-shadow: 4px 0 24px rgba(61, 24, 16, 0.4) !important;
}

#sidebar .theme-brand {
  background-color: var(--sp-sidebar) !important;
  border-bottom: 1px solid rgba(205, 155, 89, 0.22) !important;
  padding: 12px 12px 10px 16px !important;
}

#sidebar .theme-brand div.theme-text a {
  color: var(--sp-gold) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.sidebar-wrapper.sidebar-theme .theme-brand .sidebar-toggle .btn-toggle svg {
  color: var(--sp-gold) !important;
}
.sidebar-wrapper.sidebar-theme .theme-brand .sidebar-toggle .btn-toggle svg:hover {
  color: var(--sp-gold-light) !important;
}

/* Menu items */
#sidebar ul.menu-categories li.menu > .dropdown-toggle {
  color: rgba(253, 240, 210, 0.82) !important;
  border-radius: 8px !important;
  margin: 2px 12px !important;
  transition: var(--sp-transition) !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle > div span {
  color: rgba(253, 240, 210, 0.82) !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle svg:not(.badge-icon) {
  color: rgba(205, 155, 89, 0.8) !important;
  fill: rgba(205, 155, 89, 0.06) !important;
}

/* Hover state */
#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover {
  background: rgba(205, 155, 89, 0.18) !important;
}
#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover svg:not(.badge-icon) {
  color: var(--sp-gold-light) !important;
  fill: rgba(237, 228, 144, 0.15) !important;
}
#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover > div span {
  color: var(--sp-gold-light) !important;
}

/* Active / expanded state */
#sidebar ul.menu-categories li.menu.active > .dropdown-toggle,
#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded=true] {
  background: linear-gradient(135deg, var(--sp-saffron) 0%, var(--sp-saffron-dark) 100%) !important;
  box-shadow: 0 4px 15px rgba(150, 63, 46, 0.5) !important;
}
#sidebar ul.menu-categories li.menu.active > .dropdown-toggle svg,
#sidebar ul.menu-categories li.menu.active > .dropdown-toggle span,
#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded=true] svg,
#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded=true] span,
#sidebar ul.menu-categories li.menu.active > .dropdown-toggle > div span,
#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded=true] > div span {
  color: #fff !important;
  fill: rgba(255, 255, 255, 0.15) !important;
}

/* Submenu */
#sidebar ul.menu-categories ul.submenu > li a {
  color: rgba(237, 228, 144, 0.75) !important;
  font-size: 13.5px !important;
  transition: var(--sp-transition) !important;
}
#sidebar ul.menu-categories li.menu ul.submenu > li a:before {
  background-color: rgba(205, 155, 89, 0.5) !important;
}
#sidebar ul.menu-categories li.menu ul.submenu > li a:hover {
  color: var(--sp-gold-light) !important;
}
#sidebar ul.menu-categories li.menu ul.submenu > li a:hover:before {
  background: var(--sp-gold) !important;
  box-shadow: 0 0 0 2px rgba(237, 228, 144, 0.4) !important;
  border-color: var(--sp-sidebar) !important;
}
#sidebar ul.menu-categories li.menu ul.submenu > li.active a {
  color: var(--sp-gold) !important;
  font-weight: 600 !important;
}
#sidebar ul.menu-categories li.menu ul.submenu > li.active a:before {
  background-color: var(--sp-gold) !important;
}

.shadow-bottom {
  background: linear-gradient(var(--sp-sidebar2) 41%, rgba(92, 36, 25, 0.84) 95%, rgba(92, 36, 25, 0.22)) !important;
}

/* ── Header / Navbar ─────────────────────────────────── */
.header-container {
  background: linear-gradient(135deg, rgba(253, 252, 230, 0.98) 0%, rgba(245, 238, 197, 0.97) 100%) !important;
  border: 1px solid var(--sp-border-gold) !important;
  box-shadow: 0 4px 20px var(--sp-shadow) !important;
}

.navbar .toggle-sidebar,
.navbar .sidebarCollapse {
  color: var(--sp-saffron) !important;
}
.navbar .sidebarCollapse:hover svg {
  color: var(--sp-purple) !important;
}

.header-container .fw-bold {
  color: var(--sp-saffron-dark) !important;
  letter-spacing: 0.6px !important;
}

/* User profile dropdown */
.navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu {
  border: 1px solid var(--sp-border-gold) !important;
  box-shadow: 0 8px 30px var(--sp-shadow) !important;
  background: var(--sp-cream) !important;
}
.navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .user-profile-section {
  background: linear-gradient(135deg, var(--sp-sidebar) 0%, var(--sp-sidebar2) 100%) !important;
  border-bottom: 1px solid var(--sp-border-gold) !important;
}
.navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .user-profile-section .media-body h5 {
  color: #fff !important;
}
.navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .user-profile-section .media-body p {
  color: var(--sp-gold) !important;
}
.navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item a {
  color: var(--sp-text-dark) !important;
}
.navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:hover a {
  color: var(--sp-saffron-dark) !important;
  background: var(--sp-saffron-xlight) !important;
}

/* ── Content Area ────────────────────────────────────── */
#content {
  background: var(--sp-cream) !important;
}
.layout-px-spacing {
  background: var(--sp-cream) !important;
}
.page-title h3 {
  color: var(--sp-text-dark) !important;
}

/* ═══════════════════════════════════════════════════════
   MODERN CARD TABLE DESIGN — All List Pages
   ═══════════════════════════════════════════════════════ */

/* Card wrapper for all list pages */
.widget-content-area {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1px solid rgba(205, 155, 89, 0.2) !important;
  box-shadow: 0 2px 20px rgba(61, 24, 16, 0.07), 0 0 0 1px rgba(205, 155, 89, 0.05) !important;
  padding: 24px !important;
  overflow: visible !important;
}

/* DataTable top controls (length + search) */
.dt--top-section {
  background: linear-gradient(135deg, #FAF8D8 0%, var(--sp-gold-xlight) 100%) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 18px !important;
  border: 1px solid rgba(205, 155, 89, 0.18) !important;
}

/* Table thead */
table.dataTable thead tr th,
table.dataTable thead tr td,
.table thead th,
.table > thead > tr > th {
  background: linear-gradient(135deg, var(--sp-sidebar) 0%, var(--sp-sidebar3) 100%) !important;
  color: var(--sp-gold) !important;
  border-bottom: none !important;
  padding: 13px 16px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  border-color: rgba(205, 155, 89, 0.2) !important;
}

/* Rounded corners on first/last header cell */
table.dataTable thead tr th:first-child,
.table thead th:first-child { border-radius: 8px 0 0 8px !important; }
table.dataTable thead tr th:last-child,
.table thead th:last-child  { border-radius: 0 8px 8px 0 !important; }

/* Sort icons in thead */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  opacity: 0.6 !important;
  color: var(--sp-purple) !important;
}

/* Table body rows */
table.dataTable tbody tr,
.table tbody tr {
  background: #fff !important;
  border-bottom: 1px solid rgba(205, 155, 89, 0.1) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}
table.dataTable tbody tr:last-child { border-bottom: none !important; }

/* Row hover — warm Khaki tint + left Chestnut accent bar */
table.dataTable tbody tr:hover,
.table tbody tr:hover {
  box-shadow: inset 4px 0 0 var(--sp-saffron) !important;
}
table.dataTable tbody tr:hover > td,
.table tbody tr:hover > td,
.table tbody tr:hover > * {
  background: rgba(237, 228, 144, 0.28) !important;
}

/* Alternating stripe rows */
table.dataTable.stripe tbody tr.odd > td,
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(237, 228, 144, 0.12) !important;
  color: var(--sp-text-dark) !important;
}

/* Table cells */
table.dataTable tbody td,
.table tbody td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  color: var(--sp-text-dark) !important;
  font-size: 14px !important;
  border-color: rgba(205, 155, 89, 0.08) !important;
}

/* Profile images in tables */
table.dataTable tbody td img.rounded-circle,
.table tbody td img.rounded-circle {
  border: 2px solid var(--sp-purple) !important;
  padding: 1px !important;
}

/* Action icon links */
table.dataTable tbody td a i.fa-edit,
table.dataTable tbody td a i.fa-pen,
.table tbody td a i.fa-edit    { color: var(--sp-purple-dark) !important; }
table.dataTable tbody td a i.fa-trash,
.table tbody td a i.fa-trash   { color: #c62828 !important; }
table.dataTable tbody td a i.fa-eye,
.table tbody td a i.fa-eye     { color: var(--sp-saffron) !important; }
table.dataTable tbody td a i,
.table tbody td a i            { transition: transform 0.18s ease !important; }
table.dataTable tbody td a:hover i,
.table tbody td a:hover i      { transform: scale(1.22) !important; }

/* DataTable bottom section (info + pagination) */
.dt--bottom-section {
  background: rgba(253, 248, 216, 0.5) !important;
  border-radius: 0 0 10px 10px !important;
  padding: 12px 16px !important;
  border-top: 1px solid rgba(205, 155, 89, 0.15) !important;
  margin-top: 4px !important;
}

/* ── Summary Stat Cards (member_list style) ──────────── */
.summary-card {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(205, 155, 89, 0.2) !important;
  box-shadow: 0 2px 12px rgba(61, 24, 16, 0.07) !important;
  transition: all 0.25s ease !important;
  padding: 20px !important;
}
.summary-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(205, 155, 89, 0.22) !important;
}
.summary-card h6 { color: var(--sp-text-mid) !important; }
.summary-card h4 { color: var(--sp-text-dark) !important; }
.count-total    { border-bottom: 3px solid var(--sp-saffron) !important; }
.count-male     { border-bottom: 3px solid var(--sp-purple) !important; }
.count-female   { border-bottom: 3px solid #e91e8c !important; }
.count-verified { border-bottom: 3px solid #43a047 !important; }

/* Member grid card overrides */
#membersTable tbody tr {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(205, 155, 89, 0.15) !important;
  box-shadow: 0 2px 10px rgba(61, 24, 16, 0.05) !important;
}
#membersTable tbody tr:hover {
  box-shadow: 0 8px 24px rgba(205, 155, 89, 0.25) !important;
  border-color: var(--sp-purple) !important;
}
#membersTable td:nth-child(2) img {
  border: 2px solid var(--sp-purple) !important;
}
#membersTable td:nth-child(4) { color: var(--sp-saffron) !important; }
#membersTable td:nth-child(1) { border-top: 1px solid rgba(205, 155, 89, 0.12) !important; }

/* ── Cards & Widgets ─────────────────────────────────── */
.card,
.widget {
  border: 1px solid var(--sp-border-gold) !important;
  box-shadow: 0 2px 16px rgba(61, 24, 16, 0.07) !important;
  background: #fff !important;
}

.card-header,
.widget .widget-header,
.widget.box .widget-header {
  background: linear-gradient(135deg, var(--sp-sidebar) 0%, var(--sp-sidebar2) 100%) !important;
  border-bottom: 2px solid var(--sp-purple) !important;
  color: #fff !important;
}
.card-header h4,
.card-header h5,
.card-header h6,
.widget .widget-header h4,
.widget .widget-header h5,
.widget .widget-header h6 {
  color: #fff !important;
}

.card-body { background: #fff !important; }

.seperator-header h4 {
  background: rgba(205, 155, 89, 0.12) !important;
  color: var(--sp-saffron-dark) !important;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary,
.btn-info {
  background: linear-gradient(135deg, var(--sp-saffron) 0%, var(--sp-saffron-dark) 100%) !important;
  border-color: var(--sp-saffron-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(150, 63, 46, 0.38) !important;
  font-weight: 600 !important;
}
.btn-primary:hover,
.btn-info:hover {
  background: linear-gradient(135deg, var(--sp-saffron-dark) 0%, #3D1810 100%) !important;
  border-color: #3D1810 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(150, 63, 46, 0.5) !important;
}

.btn-secondary {
  background: linear-gradient(135deg, var(--sp-purple) 0%, var(--sp-purple-dark) 100%) !important;
  border-color: var(--sp-purple-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(205, 155, 89, 0.4) !important;
  font-weight: 600 !important;
}
.btn-secondary:hover {
  background: linear-gradient(135deg, var(--sp-purple-dark) 0%, #8A6428 100%) !important;
  border-color: #8A6428 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(205, 155, 89, 0.55) !important;
}

.btn-success {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
  border-color: #1b5e20 !important;
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35) !important;
}
.btn-danger {
  background: linear-gradient(135deg, #c62828 0%, #8b1a1a 100%) !important;
  border-color: #8b1a1a !important;
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.35) !important;
}
.btn-warning {
  background: linear-gradient(135deg, var(--sp-purple) 0%, var(--sp-purple-dark) 100%) !important;
  border-color: var(--sp-purple-dark) !important;
  color: #fff !important;
}

/* ── Forms ───────────────────────────────────────────── */
.form-control,
.form-select {
  border: 1px solid rgba(205, 155, 89, 0.35) !important;
  background: #FEFDF5 !important;
  color: var(--sp-text-dark) !important;
  border-radius: 8px !important;
  transition: var(--sp-transition) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--sp-saffron) !important;
  box-shadow: 0 0 0 3px rgba(150, 63, 46, 0.18) !important;
  background: #fff !important;
}
.form-label {
  color: var(--sp-text-dark) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
.input-group-text {
  background: var(--sp-cream2) !important;
  border-color: rgba(205, 155, 89, 0.35) !important;
  color: var(--sp-saffron) !important;
}

/* ── Tables (general) ────────────────────────────────── */
.table { color: var(--sp-text-dark) !important; }
.table-bordered { border-color: var(--sp-border-gold) !important; }

/* ── DataTables Controls ─────────────────────────────── */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid rgba(205, 155, 89, 0.35) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  color: var(--sp-text-dark) !important;
  background: #FEFDF5 !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--sp-saffron) !important;
  box-shadow: 0 0 0 3px rgba(150, 63, 46, 0.16) !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid rgba(205, 155, 89, 0.35) !important;
  border-radius: 8px !important;
  color: var(--sp-text-dark) !important;
  background: #FEFDF5 !important;
}
.dataTables_wrapper .dataTables_info {
  color: var(--sp-text-mid) !important;
  font-size: 13px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  color: var(--sp-saffron) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--sp-saffron) !important;
  border-color: var(--sp-saffron-dark) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--sp-saffron-xlight) !important;
  border-color: var(--sp-saffron) !important;
  color: var(--sp-saffron-dark) !important;
}

/* ── Badges ──────────────────────────────────────────── */
.badge.badge-light-primary,
.badge-light-primary,
.badge.badge-primary,
.badge-primary {
  background: var(--sp-saffron-xlight) !important;
  color: var(--sp-saffron-dark) !important;
}
.badge.badge-light-info,
.badge-light-info,
.badge.badge-info,
.badge-info {
  background: var(--sp-purple-xlight) !important;
  color: var(--sp-purple-dark) !important;
}
.badge.badge-light-success,
.badge-light-success,
.badge.badge-success,
.badge-success {
  background: rgba(46, 125, 50, 0.12) !important;
  color: #2e7d32 !important;
}
.badge.badge-light-warning {
  background: rgba(237, 228, 144, 0.55) !important;
  color: #7A5A00 !important;
}
.badge.badge-secondary,
.badge-secondary {
  background: var(--sp-purple-xlight) !important;
  color: var(--sp-purple-dark) !important;
}

/* ── Breadcrumbs ─────────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--sp-purple) !important;
}
.breadcrumb-item a {
  color: var(--sp-saffron) !important;
}
.breadcrumb-item.active {
  color: var(--sp-purple-dark) !important;
}

/* ── Pagination ──────────────────────────────────────── */
.page-link {
  color: var(--sp-saffron) !important;
  border-color: var(--sp-border-gold) !important;
  background: #fff !important;
}
.page-link:hover {
  background: var(--sp-saffron-xlight) !important;
  border-color: var(--sp-saffron) !important;
  color: var(--sp-saffron-dark) !important;
}
.page-item.active .page-link {
  background: var(--sp-saffron) !important;
  border-color: var(--sp-saffron-dark) !important;
  color: #fff !important;
}

/* ── Alerts ──────────────────────────────────────────── */
.alert-primary {
  background: var(--sp-saffron-xlight) !important;
  border-color: var(--sp-saffron) !important;
  color: var(--sp-saffron-dark) !important;
}
.alert-info {
  background: var(--sp-purple-xlight) !important;
  border-color: var(--sp-purple) !important;
  color: var(--sp-purple-dark) !important;
}

/* ── Dropdowns ───────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--sp-border-gold) !important;
  box-shadow: 0 8px 30px var(--sp-shadow) !important;
  background: var(--sp-cream) !important;
  border-radius: 10px !important;
}
.dropdown-item {
  color: var(--sp-text-dark) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--sp-saffron-xlight) !important;
  color: var(--sp-saffron-dark) !important;
}

/* ── Modal ───────────────────────────────────────────── */
.modal-header {
  background: linear-gradient(135deg, var(--sp-sidebar) 0%, var(--sp-sidebar2) 100%) !important;
  border-bottom: 2px solid var(--sp-purple) !important;
}
.modal-title { color: #fff !important; }
.modal-header .btn-close { filter: brightness(10) !important; }
.modal-content {
  border: 1px solid var(--sp-border-gold) !important;
  box-shadow: 0 20px 60px rgba(61, 24, 16, 0.28) !important;
}

/* ── Footer ──────────────────────────────────────────── */
.footer-wrapper {
  background: linear-gradient(135deg, var(--sp-sidebar) 0%, var(--sp-sidebar2) 100%) !important;
  border-top: 2px solid var(--sp-purple) !important;
  padding: 14px 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.footer-wrapper .footer-section p,
.footer-wrapper .footer-section p a {
  color: rgba(237, 228, 144, 0.8) !important;
  font-size: 13px !important;
  margin: 0 !important;
}
.footer-wrapper .footer-section p a:hover {
  color: var(--sp-gold-light) !important;
}

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(61, 24, 16, 0.05); }
::-webkit-scrollbar-thumb {
  background: rgba(205, 155, 89, 0.5);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sp-saffron); }

/* ── Overlay ─────────────────────────────────────────── */
.overlay { background: rgba(61, 24, 16, 0.72) !important; }

/* ── Avatar ──────────────────────────────────────────── */
.navbar .navbar-item .nav-item.user-profile-dropdown .nav-link svg {
  color: var(--sp-saffron) !important;
}
.avatar .avatar-indicators.avatar-online:before {
  background: #4CAF50 !important;
  border: 2px solid var(--sp-cream) !important;
}

/* ── Page Header Card ────────────────────────────────── */
.page-header-card {
  background: linear-gradient(135deg, var(--sp-sidebar) 0%, var(--sp-sidebar3) 100%) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  margin-bottom: 4px !important;
  margin-top: 10px !important;
  box-shadow: 0 4px 22px rgba(61, 24, 16, 0.28) !important;
  border: 1px solid rgba(205, 155, 89, 0.2) !important;
}
.page-header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.page-header-info {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.page-header-icon {
  width: 52px !important;
  height: 52px !important;
  background: rgba(237, 228, 144, 0.15) !important;
  border: 1px solid rgba(237, 228, 144, 0.3) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  color: var(--sp-gold) !important;
  flex-shrink: 0 !important;
}
.page-header-title {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.page-header-subtitle {
  color: rgba(237, 228, 144, 0.72) !important;
  font-size: 13px !important;
  margin: 3px 0 0 0 !important;
}
.page-header-actions .btn {
  border-radius: 10px !important;
}
@media (max-width: 575px) {
  .page-header-card { padding: 14px 16px !important; border-radius: 12px !important; }
  .page-header-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .page-header-title { font-size: 15px !important; }
  .page-header-content { flex-direction: column !important; align-items: flex-start !important; }
}

/* ── Login Page ──────────────────────────────────────── */
body.form {
  background: linear-gradient(135deg, var(--sp-sidebar) 0%, #7A3225 50%, var(--sp-sidebar2) 100%) !important;
  min-height: 100vh;
  position: relative;
}
body.form::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(150, 63, 46, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(237, 228, 144, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(205, 155, 89, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body.form .auth-container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
body.form .card {
  background: rgba(253, 252, 240, 0.97) !important;
  border: 1px solid var(--sp-border-gold) !important;
  box-shadow: 0 24px 64px rgba(61, 24, 16, 0.48), 0 0 0 1px rgba(205, 155, 89, 0.22) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px);
}
body.form .card h2 {
  color: var(--sp-text-dark) !important;
  font-weight: 700 !important;
}
body.form .card p { color: var(--sp-saffron) !important; }
body.form .btn-secondary {
  background: linear-gradient(135deg, var(--sp-saffron) 0%, var(--sp-saffron-dark) 100%) !important;
  border-color: var(--sp-saffron-dark) !important;
  box-shadow: 0 6px 20px rgba(150, 63, 46, 0.48) !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  padding: 10px !important;
  border-radius: 10px !important;
}
body.form .form-check-input:checked {
  background-color: var(--sp-saffron) !important;
  border-color: var(--sp-saffron-dark) !important;
}

/* ── Responsive: Mobile (≤ 575px) ───────────────────── */
@media (max-width: 575px) {

  .sidebar-wrapper {
    width: 255px !important;
    left: -255px !important;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1050 !important;
  }

  #content {
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 64px !important;
  }

  .header-container,
  .header-container.container-xxl {
    left: 0 !important;
    width: calc(100% - 16px) !important;
    margin: 6px 8px 0 8px !important;
    padding: 8px 12px !important;
    min-height: 54px !important;
  }

  .layout-px-spacing { padding: 0 10px !important; }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .card,
  .widget { margin-bottom: 14px !important; }

  .header-container .fw-bold { display: none !important; }

  .footer-wrapper {
    flex-direction: column !important;
    text-align: center !important;
    padding: 12px 16px !important;
  }

  body.form .card .card-body { padding: 24px 18px !important; }

  .modal-dialog { margin: 0.5rem !important; }

  .widget-content-area {
    padding: 14px !important;
    border-radius: 12px !important;
  }
}

/* ── Responsive: Tablet (576px – 767px) ─────────────── */
@media (min-width: 576px) and (max-width: 767px) {

  .sidebar-wrapper {
    width: 255px !important;
    left: -255px !important;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1050 !important;
  }

  #content {
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 70px !important;
  }

  .header-container,
  .header-container.container-xxl {
    left: 0 !important;
    width: calc(100% - 20px) !important;
    margin: 8px 10px 0 10px !important;
  }

  .layout-px-spacing { padding: 0 16px !important; }

  .table-responsive { overflow-x: auto; }

  .footer-wrapper {
    flex-direction: column !important;
    text-align: center !important;
  }

  .widget-content-area { padding: 18px !important; }
}

/* ── Responsive: Tablet Landscape (768px – 991px) ───── */
@media (min-width: 768px) and (max-width: 991px) {

  .sidebar-wrapper {
    width: 255px !important;
    left: -255px !important;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1050 !important;
  }

  #content {
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 72px !important;
  }

  .header-container,
  .header-container.container-xxl {
    left: 0 !important;
    width: calc(100% - 24px) !important;
    margin: 8px 12px 0 12px !important;
  }

  .layout-px-spacing { padding: 0 18px !important; }

  .table-responsive { overflow-x: auto; }
}

/* ── Responsive: Laptop (992px – 1199px) ────────────── */
@media (min-width: 992px) and (max-width: 1199px) {

  .header-container,
  .header-container.container-xxl {
    left: 255px !important;
    width: calc(100% - 255px - 32px) !important;
  }

  #content { margin-left: 255px !important; }

  .layout-px-spacing { padding: 0 18px !important; }
}

/* ── Responsive: Desktop (≥ 1200px) ─────────────────── */
@media (min-width: 1200px) {
  .header-container.container-xxl {
    left: 255px !important;
    width: calc(100% - 255px - 48px) !important;
  }
  #content { margin-left: 255px !important; }
}

/* ── Sidebar open on mobile (toggle class) ───────────── */
@media (max-width: 991px) {
  .sidebar-wrapper.show-sidebar,
  .sidebar-noneoverflow .sidebar-wrapper {
    left: 0 !important;
  }
  .overlay.show {
    display: block !important;
    opacity: 1 !important;
    z-index: 1040 !important;
  }
  .sidebar-closed .sidebar-wrapper { left: -255px !important; }
}

/* ── Sidebar collapsed state (desktop) ──────────────── */
@media (min-width: 992px) {
  .sidebar-closed .sidebar-wrapper { width: 84px !important; }
  .sidebar-closed .sidebar-wrapper:hover { width: 255px !important; }
  .sidebar-closed #content { margin-left: 84px !important; }
  .sidebar-closed .header-container.container-xxl {
    left: 84px !important;
    width: calc(100% - 84px - 32px) !important;
  }
}

/* ── Smooth transitions ──────────────────────────────── */
#content,
.header-container,
.sidebar-wrapper {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Entity Card Grid — Shared Components ────────────── */
.ent-card-header {
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(205, 155, 89, 0.18);
  padding-bottom: 12px;
}
.dark .ent-card-header { border-color: #1b2e4b; }

.ent-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sp-saffron);
  line-height: 1.3;
  margin: 0;
  word-break: break-word;
}
.ent-card-subtitle {
  font-size: 0.86rem;
  color: #888ea8;
  font-weight: 500;
  margin-top: 4px;
}
.ent-type-badge {
  background: var(--sp-saffron-xlight);
  color: var(--sp-saffron);
  border: 1px solid rgba(150, 63, 46, 0.2);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.ent-avatar img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 2px solid rgba(205, 155, 89, 0.35) !important;
  flex-shrink: 0 !important;
}
.ent-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.ent-meta-grid .meta-item {
  display: flex;
  align-items: flex-start;
  font-size: 0.80rem;
  color: #515365;
  gap: 6px;
  word-break: break-word;
  overflow: hidden;
}
.dark .ent-meta-grid .meta-item { color: #bfc9d4; }
.ent-meta-grid .meta-item i {
  width: 16px;
  color: var(--sp-purple);
  font-size: 0.80rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.ent-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(205, 155, 89, 0.15);
}
.dark .ent-card-footer { border-top: 1px solid #1b2e4b; }
.ent-id-label {
  font-size: 11px;
  color: #acb0c3;
  font-family: monospace;
}
.ent-card-actions .btn {
  padding: 4px 10px;
  font-size: 12px;
}

/* ── Card-Grid Pages: No Horizontal Scroll ───────────── */

/* Ensure card-grid table wrappers never cause overflow */
.table-responsive:has(> table[style*="display: block"]),
.table-responsive:has(> table.dataTable[style*="display: block"]) {
  overflow-x: hidden !important;
}

/* DataTable top controls — full-width on mobile */
@media (max-width: 575px) {
  .dt--top-section { padding: 10px 12px !important; }
  .dt--top-section .row > div { margin-bottom: 8px; }
  .dataTables_length,
  .dataTables_filter { width: 100%; }
  .dataTables_filter input { width: 100% !important; box-sizing: border-box; }
  .dataTables_length select { width: auto; }
  .dt--bottom-section { flex-direction: column !important; gap: 8px; }
}

/* Card-grid responsive improvements: very small screens (≤ 480px) */
@media (max-width: 480px) {
  .ent-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .ent-card-header .d-flex.align-items-center {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .ent-card-title { font-size: 0.95rem !important; }
  .ent-card-footer { flex-wrap: wrap !important; gap: 8px !important; }
  .ent-card-actions { display: flex; gap: 4px; flex-wrap: wrap; }
  .ent-card-actions .btn { padding: 3px 8px !important; font-size: 11px !important; }
}

/* Card-grid: stat counters on member page, small screens */
@media (max-width: 575px) {
  .stat-card { padding: 12px 14px !important; }
  .stat-card .stat-value { font-size: 1.5rem !important; }
}

/* Widget content area: no overflow clipping cards on mobile */
@media (max-width: 991px) {
  .widget-content-area {
    padding: 14px !important;
    overflow: hidden !important;
  }
}

/* Prevent any nested container from causing horizontal overflow */
.middle-content,
.container-xxl {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ── Settings Pages ──────────────────────────────────── */

/* Settings sidebar column — full width on mobile, stacks above content */
@media (max-width: 767px) {
  .settings-sidebar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: var(--bs-gutter-x, 0.75rem) !important;
    margin-bottom: 0 !important;
  }
  /* Content column takes full width too */
  .row > .col-xl-9.col-lg-9.col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Settings forms: single column on very small screens */
@media (max-width: 575px) {
  .widget-content.widget-content-area,
  .widget-content-area {
    padding: 16px !important;
  }
  .logo-upload-box {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ── Print ───────────────────────────────────────────── */
@media print {
  .sidebar-wrapper,
  .header-container,
  .footer-wrapper { display: none !important; }
  #content { margin-left: 0 !important; }
}