/* ----------------------------------------------
   FIX: Vuexy Template Customizer Dark Mode
   ---------------------------------------------- */
[data-bs-theme="dark"] #template-customizer {
  background-color: #2b2c40 !important;
  color: #e4e6f1 !important;
}

/* Text color inside */
[data-bs-theme="dark"] #template-customizer h5,
[data-bs-theme="dark"] #template-customizer label,
[data-bs-theme="dark"] #template-customizer .form-label,
[data-bs-theme="dark"] #template-customizer .text-body {
  color: #e4e6f1 !important;
}

/* Option cards */
[data-bs-theme="dark"] #template-customizer .custom-option {
  background-color: #3a3b51 !important;
  border-color: #444 !important;
}

[data-bs-theme="dark"] #template-customizer .custom-option.checked {
  border-color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
}

/* Scroll + divider */
[data-bs-theme="dark"] #template-customizer hr {
  border-color: rgba(255,255,255,0.15) !important;
}

[data-bs-theme="dark"] #template-customizer .template-customizer-inner {
  scrollbar-color: #555 #2b2c40;
}

/* Tooltip + buttons contrast fix */
[data-bs-theme="dark"] #template-customizer .template-customizer-reset-btn,
[data-bs-theme="dark"] #template-customizer .template-customizer-close-btn {
  color: #e4e6f1 !important;
}

[data-bs-theme="dark"] #template-customizer .template-customizer-open-btn {
  background: var(--bs-primary) !important;
  color: #fff !important;
}
/* ----------------------------------------------
   FIX: Vuexy Dark Mode - Tables & Cards
   ---------------------------------------------- */

/* Cards background + spacing */
[data-bs-theme="dark"] .card {
  background-color: #2f3045 !important;
  color: #e4e6f1 !important;
  border-color: #3a3b51 !important;
  margin-bottom: 1rem !important;
  padding: 0.5rem !important;
}

/* Reduce excess padding in inner elements */
[data-bs-theme="dark"] .card .card-header {
  background: transparent !important;
  color: #e4e6f1 !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #3a3b51 !important;
}

/* Table dark background fix */
[data-bs-theme="dark"] table,
[data-bs-theme="dark"] .table {
  background-color: #2b2c40 !important;
  color: #e4e6f1 !important;
  border-color: #3a3b51 !important;
}

/* Table headers and borders */
[data-bs-theme="dark"] .table thead th {
  background-color: #34354d !important;
  color: #e4e6f1 !important;
  border-color: #3a3b51 !important;
}

/* Table rows */
[data-bs-theme="dark"] .table tbody tr {
  background-color: #2f3045 !important;
}

[data-bs-theme="dark"] .table tbody tr:nth-child(even) {
  background-color: #32334a !important;
}

/* Hover effect for rows */
[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: #3a3b51 !important;
}

/* Fix datatable select backgrounds */
[data-bs-theme="dark"] .dataTables_wrapper select,
[data-bs-theme="dark"] .dataTables_wrapper input {
  background-color: #3a3b51 !important;
  color: #e4e6f1 !important;
  border-color: #444 !important;
}

/* Fix scrollbars inside table containers */
[data-bs-theme="dark"] .dataTables_scrollBody {
  scrollbar-color: #555 #2b2c40;
}

/* Make form buttons fit tighter */
[data-bs-theme="dark"] .dt_adv_search .btn {
  margin: 0.2rem !important;
  padding: 0.35rem 0.75rem !important;
}


/* -------------------------------------------------------
   FIX: Vuexy Dark Mode — Card Borders, Spacing, Table Fit
   ------------------------------------------------------- */

/* 1️⃣ Remove the line under card headers */
[data-bs-theme="dark"] .card .card-header {
  border-bottom: none !important;
  box-shadow: none !important;
  padding-bottom: 0.5rem !important;
}

/* 2️⃣ Normalize all card spacing — remove outer gaps */
[data-bs-theme="dark"] .card {
  background-color: #2f3045 !important;
  border: 1px solid #3a3b51 !important;
  color: #e4e6f1 !important;
  margin: 0.6rem auto !important;
  padding: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0.75rem !important;
}

/* 3️⃣ Make inner datatable stretch full width */
[data-bs-theme="dark"] .card-datatable,
[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] .dataTables_scroll,
[data-bs-theme="dark"] .dataTables_scrollBody {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* 4️⃣ Table cells and rows look balanced */
[data-bs-theme="dark"] .table {
  width: 100% !important;
  border-collapse: collapse !important;
}

[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
  padding: 0.6rem 0.8rem !important;
  border-color: #3a3b51 !important;
}

/* 5️⃣ Fix weird empty space around table card */
[data-bs-theme="dark"] .dataTables_wrapper .row,
[data-bs-theme="dark"] .dataTables_wrapper .col-sm-12,
[data-bs-theme="dark"] .dataTables_wrapper .col-md-6 {
  margin: 0 !important;
  padding: 0 !important;
}

/* 6️⃣ Make all cards (like stats blocks) closer together */
[data-bs-theme="dark"] .card + .card {
  margin-top: 0.8rem !important;
}

/* --------------------------------------------------
   FINAL FIX: Remove Unwanted Line Under Card Titles
   -------------------------------------------------- */
[data-bs-theme="dark"] .card-header {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-bottom: 0.5rem !important;
}

/* Remove any pseudo-element or gradient line Vuexy adds */
[data-bs-theme="dark"] .card-header::before,
[data-bs-theme="dark"] .card-header::after {
  content: none !important;
  display: none !important;
}

/* Fix for card itself sometimes drawing faint divider */
[data-bs-theme="dark"] .card {
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

/* Keep your <hr> natural and subtle */
[data-bs-theme="dark"] hr {
  border: none !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  margin: 0.5rem 1rem !important;
}


/* --------------------------------------------------
   FIX: Card Header vs Table Overlap + Column Widths
   -------------------------------------------------- */

/* 1️⃣ Add safe spacing between card header/title and table */
[data-bs-theme="dark"] .card .card-datatable,
[data-bs-theme="dark"] .card .table {
  margin-top: 0.75rem !important; /* small gap under title */
}

/* 2️⃣ Keep card header firmly attached but not overlapping */
[data-bs-theme="dark"] .card-header {
  padding-bottom: 0.75rem !important;
  position: relative;
  z-index: 2;
}

/* 3️⃣ Make the table fill the card neatly */
[data-bs-theme="dark"] .card .table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
}

/* 4️⃣ Better column spacing — especially PASSWORD column */
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
  padding: 0.65rem 1rem !important;
  vertical-align: middle !important;
}

/* 5️⃣ Give PASSWORD-like column a bit more width */
[data-bs-theme="dark"] .table th:nth-child(5),
[data-bs-theme="dark"] .table td:nth-child(5) {
  min-width: 9ch !important;   /* ≈3 chars wider than default */
  max-width: 12ch !important;
}

/* Optional: smooth row hover to highlight readability */
[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: rgba(255,255,255,0.05) !important;
  transition: background-color 0.2s ease;
}

/* ===============================================
   FINAL FIX: Make top button card visible again
   =============================================== */

/* Force show the buttons container */
.card.mb-4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.8rem 1rem !important;
  margin-bottom: 0.8rem !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 5 !important;
}

/* Make sure the form inside shows up */
.card.mb-4 form.dt_adv_search {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force the buttons to appear */
.card.mb-4 form.dt_adv_search button {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: transparent !important;
  border: 1px solid var(--bs-danger) !important;
  color: var(--bs-danger) !important;
  padding: 0.45rem 0.9rem !important;
  font-size: 0.875rem !important;
  border-radius: 0.375rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* Hover style */
.card.mb-4 form.dt_adv_search button:hover {
  background-color: var(--bs-danger) !important;
  color: #fff !important;
}

/* Fix spacing with table card below */
.card.mb-4 + .card {
  margin-top: -0.2rem !important;
}

/* Add gap between <hr> and content/titles */
.card hr {
  margin-top: 0.7rem !important;
  margin-bottom: 0.9rem !important;
  border: none !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Optional: fix if buttons are behind something */
.card.mb-4 * {
  z-index: 10 !important;
  position: relative !important;
}

/* =====================================================
   ULTIMATE FIX: Restore visibility of action buttons
   ===================================================== */

/* Force button card to always be visible */
.card.mb-4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.8rem 1rem !important;
  margin-bottom: 1rem !important;
  height: auto !important;
  min-height: 50px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 999 !important;
}

/* Form inside (make sure it's flexed) */
.card.mb-4 form.dt_adv_search {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

/* Buttons */
.card.mb-4 form.dt_adv_search button {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: transparent !important;
  border: 1px solid #dc3545 !important;
  color: #dc3545 !important;
  padding: 0.45rem 0.9rem !important;
  font-size: 0.875rem !important;
  border-radius: 0.4rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  z-index: 1000 !important;
}

.card.mb-4 form.dt_adv_search button:hover {
  background-color: #dc3545 !important;
  color: #fff !important;
}

/* If Vuexy applies .d-none or .hidden, override it */
.card.mb-4.d-none,
.card.mb-4.hidden,
.card.mb-4[style*="display:none"],
.card.mb-4[hidden] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure no overlap with following card */
.card.mb-4 + .card {
  margin-top: -0.3rem !important;
}

/* Fix <hr> spacing */
.card hr {
  border: none !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important;
}

/* Make sure content inside card never collapses */
.card.mb-4 * {
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 100 !important;
}


/* END HERE */

/* Load Font Awesome from CDN dynamically */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");

/* Safety: if Vuexy overrides 'fas', re-enable font family */
.fas, .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

/* Optional tweak: make icons align nicely */
i.fas, i.fa, i.fa-solid {
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}



@font-face {
  font-family: 'Agency FB';
  src: url('../fonts/AgencyFB-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* override Vuexy font */
:root {
  --bs-font-sans-serif: 'Agency FB', sans-serif !important;
}

body, html {
  font-family: var(--bs-font-sans-serif) !important;
  font-weight: 700 !important;
}
/* Make Agency FB breathe a bit */
body, html {
  letter-spacing: 0.3px !important;
}

/* Optional – give headers extra spacing for style */
h1, h2, h3, h4, h5, h6,
.navbar, .menu-inner, .card-header {
  letter-spacing: 0.5px !important;
}

/* --------------------------------------------------
   FIX: Manage Users Buttons + HR Alignment (No HTML Change)
   -------------------------------------------------- */

/* 1️⃣ Ensure "Delete All" div is visible and not collapsed */
[data-bs-theme="dark"] .card.mb-4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0.5rem 0.5rem 0 !important;
}

/* 2️⃣ Merge that div visually with Manage Users card below */
[data-bs-theme="dark"] .card.mb-4 + .card {
  margin-top: -0.5rem !important; /* pulls them together */
}

/* 3️⃣ Adjust <hr> so it never conflicts with titles */
[data-bs-theme="dark"] .card hr {
  border: none !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  margin: 0.5rem 0.75rem !important;
}

/* Push down any <hr> touching the title */
[data-bs-theme="dark"] .card-header + hr {
  margin-top: 1rem !important;
}

/* 4️⃣ Fix button layout inside the .dt_adv_search form */
[data-bs-theme="dark"] .dt_adv_search {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin-bottom: 0.6rem !important;
  justify-content: flex-start !important;
}

/* Make buttons consistent */
[data-bs-theme="dark"] .dt_adv_search .btn {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
}

/* 5️⃣ Table alignment under Manage Users card */
[data-bs-theme="dark"] .card-datatable {
  margin-top: 0.25rem !important;
  width: 100% !important;
  padding: 0 !important;
}

/* 6️⃣ Make sure both cards align with others in the grid */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card.mb-4 {
  border-radius: 0.75rem !important;
}
/* --------------------------------------------------
   FIX: Hidden Buttons + HR Gaps (No HTML edits)
   -------------------------------------------------- */

/* 1️⃣ Ensure the button card (.card.mb-4) is visible */
.card.mb-4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0.5rem !important;
  height: auto !important;
  overflow: visible !important;
}

/* 2️⃣ Make the form and its buttons appear correctly */
.card.mb-4 form.dt_adv_search {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0.3rem 0 !important;
}

/* Buttons themselves */
.card.mb-4 .btn {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-color: transparent !important;
  color: #dc3545 !important; /* red outline text */
  border: 1px solid #dc3545 !important;
  padding: 0.45rem 0.9rem !important;
  font-size: 0.875rem !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s ease !important;
}

.card.mb-4 .btn:hover {
  background-color: #dc3545 !important;
  color: #fff !important;
}

/* 3️⃣ Add clean gap between <hr> and titles/content */
.card-header,
.card h5 {
  margin-bottom: 0.4rem !important;
}

.card hr {
  border: none !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0.8rem !important;
}

/* Push down HR that touches a title */
.card-header + hr {
  margin-top: 0.9rem !important;
}

/* 4️⃣ Small space between the buttons and the table */
.card.mb-4 + .card {
  margin-top: -0.3rem !important;
}

.card-datatable {
  margin-top: 0.5rem !important;
}

/* ==============================
   SPLASH SCREEN (No flicker)
   ============================== */
#splash-screen {
  position: fixed;
  inset: 0;
  background: var(--bs-body-bg, #111322);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.splash-inner {
  text-align: center;
  font-family: 'Agency FB', sans-serif;
}

.splash-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  animation: popIn 0.8s ease forwards;
}

.splash-loader {
  margin: 18px auto 0;
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--bs-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Animations */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
/* ==============================
   DATATABLE SORTING ARROW UI (No flicker)
   ============================== */
   
.card { padding:20px; margin:20px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05); background:#fff; }
th { cursor:pointer; position: relative; user-select:none; padding-right: 25px; }

/* Sneat SVG arrows */
th.sorted-asc::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="currentColor" d="M7 14l5-5 5 5z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
th.sorted-desc::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
th:last-child::after { content: none !important; }

/* Search input */
.table-search { margin-bottom: 10px; padding: 6px 10px; width: 100%; max-width: 300px; border:1px solid #ccc; border-radius:6px; }