/* Custom styles goes here */

/* Hide the Vuexy Template Customizer demo tool (panel + floating gear button).
   The customizer JS stays loaded because the navbar light/dark theme toggle
   depends on it, but the customizer UI itself is not needed in the CMS. */
.template-customizer,
.template-customizer-open-btn,
.template-customizer-t-panel {
  display: none !important;
}

/* Prevent Flash of Unstyled Content (FOUC) before DataTables initialization */
table[data-generic-table]:not(.dt-initialized) {
  opacity: 0;
  visibility: hidden;
}

table[data-generic-table].dt-initialized {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out;
}

/* Skeleton placeholder shown in the table area until the DataTable finishes
   initializing. Pure CSS via :has() so it reacts to the child table's state
   with no markup changes in the views, and it paints immediately (before the
   DataTables JS bundle loads), replacing the blank white box. */
.card-datatable:has(> table[data-generic-table]:not(.dt-initialized)) {
  position: relative;
  min-height: 300px;
}

.card-datatable:has(> table[data-generic-table]:not(.dt-initialized))::after {
  content: "";
  position: absolute;
  inset: 1rem 1.25rem;
  border-radius: 0.375rem;
  /* Layer 1: a moving shimmer highlight. Layer 2: faint horizontal row bands. */
  background-image:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%),
    repeating-linear-gradient(to bottom, #e9eaf0 0, #e9eaf0 18px, #f6f7fb 18px, #f6f7fb 48px);
  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0, 0 0;
  animation: cms-skeleton-shimmer 1.3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cms-skeleton-shimmer {
  to { background-position: 150% 0, 0 0; }
}

/* Dark theme variant */
[data-bs-theme="dark"] .card-datatable:has(> table[data-generic-table]:not(.dt-initialized))::after {
  background-image:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%),
    repeating-linear-gradient(to bottom, #3a3b52 0, #3a3b52 18px, #2f3048 18px, #2f3048 48px);
}

/* Respect users who prefer reduced motion: keep the skeleton, drop the sweep. */
@media (prefers-reduced-motion: reduce) {
  .card-datatable:has(> table[data-generic-table]:not(.dt-initialized))::after {
    animation: none;
    background-position: 0 0, 0 0;
  }
}

/* DataTables 2.0 Toolbar & Buttons Spacing Fix — Tight, Clean Layout */
div.dt-container .dt-layout-end {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}

div.dt-container .dt-search {
  display: flex !important;
  align-items: center !important;
  margin-right: 0 !important;
}

div.dt-container .dt-search input {
  margin-left: 0.5rem !important;
}

div.dt-container .dt-buttons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  margin-left: 0.25rem !important;
}

/* Force DataTables Create-New (+ Add) buttons to render with Primary Blue color without purple hover tints */
.dt-buttons .create-new,
.dt-buttons .btn-primary,
div.dt-buttons button.create-new,
div.dt-buttons button.btn-primary,
div.dt-buttons a.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dt-buttons .create-new:hover,
.dt-buttons .btn-primary:hover,
div.dt-buttons button.create-new:hover,
div.dt-buttons button.btn-primary:hover,
div.dt-buttons a.btn-primary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  filter: brightness(0.92) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/* Generic DataTable polish — consistent card padding & spacing so the */
/* toolbar / footer are not flush against the card edges (eye-catching).*/
/* DataTables v2 lays each section out as `.dt-container > div.row`.     */
/* ------------------------------------------------------------------ */

/* Inner breathing room; Bootstrap .row negative gutters align to this. */
.card > .card-datatable {
  padding: 0.25rem 1.25rem 1rem;
}

/* Toolbar row (length + search + export + add): divider + spacing */
div.dt-container > div.row:first-child {
  padding-bottom: 1rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--bs-border-color);
  row-gap: 0.75rem;
}

/* Footer row (info + pagination) */
div.dt-container > div.row:last-child {
  padding-top: 0.5rem;
  row-gap: 0.75rem;
}

/* Full-width table, subtle uppercase header, roomier cells */
div.dt-container table.dataTable {
  width: 100% !important;
}
div.dt-container table.dataTable > thead > tr > th {
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.4px;
}
div.dt-container table.dataTable > tbody > tr > td {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Custom Table Action Icon Buttons — Rich Soft Background Fill in    */
/* Default State + Micro-Lift & Richer Tint on Hover.                 */
/* ------------------------------------------------------------------ */
.table .btn-action-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  transition: all 0.18s ease-in-out !important;
}

.table .btn-action-icon i {
  font-size: 1.125rem !important;
}

/* Default State: Soft Colored Background Fill + Vibrant Icon Color */
.table .btn-action-icon.btn-action-primary,
.table .btn-action-icon.btn-action-edit {
  background-color: rgba(115, 103, 240, 0.12) !important;
  color: #7367f0 !important;
}

.table .btn-action-icon.btn-action-info,
.table .btn-action-icon.btn-action-view {
  background-color: rgba(0, 207, 232, 0.12) !important;
  color: #00cfe8 !important;
}

.table .btn-action-icon.btn-action-warning {
  background-color: rgba(255, 159, 67, 0.12) !important;
  color: #ff9f43 !important;
}

.table .btn-action-icon.btn-action-success {
  background-color: rgba(40, 199, 111, 0.12) !important;
  color: #28c76f !important;
}

.table .btn-action-icon.btn-action-danger {
  background-color: rgba(234, 84, 85, 0.12) !important;
  color: #ea5455 !important;
}

.table .btn-action-icon.btn-action-secondary {
  background-color: rgba(133, 146, 163, 0.12) !important;
  color: #8592a3 !important;
}

/* Dark Theme Default Fill Adjustments */
[data-bs-theme="dark"] .table .btn-action-icon.btn-action-primary,
[data-bs-theme="dark"] .table .btn-action-icon.btn-action-edit {
  background-color: rgba(115, 103, 240, 0.18) !important;
  color: #7367f0 !important;
}

[data-bs-theme="dark"] .table .btn-action-icon.btn-action-info,
[data-bs-theme="dark"] .table .btn-action-icon.btn-action-view {
  background-color: rgba(0, 207, 232, 0.18) !important;
  color: #00cfe8 !important;
}

[data-bs-theme="dark"] .table .btn-action-icon.btn-action-warning {
  background-color: rgba(255, 159, 67, 0.18) !important;
  color: #ff9f43 !important;
}

[data-bs-theme="dark"] .table .btn-action-icon.btn-action-success {
  background-color: rgba(40, 199, 111, 0.18) !important;
  color: #28c76f !important;
}

[data-bs-theme="dark"] .table .btn-action-icon.btn-action-danger {
  background-color: rgba(234, 84, 85, 0.18) !important;
  color: #ea5455 !important;
}

[data-bs-theme="dark"] .table .btn-action-icon.btn-action-secondary {
  background-color: rgba(133, 146, 163, 0.18) !important;
  color: #8592a3 !important;
}

/* Hover State: Richer Tint Fill + Micro Lift */
.table .btn-action-icon:hover {
  transform: translateY(-1px) !important;
}

.table .btn-action-icon.btn-action-primary:hover,
.table .btn-action-icon.btn-action-edit:hover {
  background-color: rgba(115, 103, 240, 0.24) !important;
  color: #7367f0 !important;
}

.table .btn-action-icon.btn-action-info:hover,
.table .btn-action-icon.btn-action-view:hover {
  background-color: rgba(0, 207, 232, 0.24) !important;
  color: #00cfe8 !important;
}

.table .btn-action-icon.btn-action-warning:hover {
  background-color: rgba(255, 159, 67, 0.24) !important;
  color: #ff9f43 !important;
}

.table .btn-action-icon.btn-action-success:hover {
  background-color: rgba(40, 199, 111, 0.24) !important;
  color: #28c76f !important;
}

.table .btn-action-icon.btn-action-danger:hover {
  background-color: rgba(234, 84, 85, 0.24) !important;
  color: #ea5455 !important;
}

.table .btn-action-icon.btn-action-secondary:hover {
  background-color: rgba(133, 146, 163, 0.24) !important;
  color: #8592a3 !important;
}

/* ------------------------------------------------------------------ */
/* Global Modal & Validation Standardization:                         */
/* 1. Borderless Modal Header & Footer (no divider lines).             */
/* 2. Red borders for invalid input fields (.input-validation-error / */
/*    .is-invalid), persistent red focus ring.                        */
/* 3. Remove green valid borders (.is-valid) to prevent green inputs. */
/* 4. Align close button inside modal header.                         */
/* ------------------------------------------------------------------ */
.modal-header {
  border-bottom: none !important;
}

.modal-footer {
  border-top: none !important;
}

/* Validation Styling: Clean Red Border for Invalid Inputs */
.form-control.input-validation-error,
.form-select.input-validation-error,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #ea5455 !important;
}

.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: #ea5455 !important;
  box-shadow: 0 0 0 0.25rem rgba(234, 84, 85, 0.2) !important;
}

.field-validation-error {
  color: #ea5455 !important;
  font-size: 0.8125rem;
  margin-top: 0.35rem;
  display: block;
}

/* Suppress green borders on valid fields so only invalid fields highlight in red */
.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--bs-border-color) !important;
  background-image: none !important;
}

/* Global Scroll-To-Top Button */
.btn-scroll-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background-color: var(--bs-primary, #7367f0);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-scroll-top.show {
  display: inline-flex;
  opacity: 1;
}

.btn-scroll-top:hover {
  transform: translateY(-2px);
  color: #ffffff;
}

/* ── Website / Workspace Switcher Dropdown ────────────────────────── */
.website-switcher .dropdown-menu {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 340px !important;
  inset-block-start: calc(100% + 8px) !important;
  top: calc(100% + 8px) !important;
  margin-top: 0 !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem !important;
}

[data-bs-theme="dark"] .website-switcher .dropdown-menu {
  box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.website-switcher-search-wrap {
  position: relative;
  width: 100%;
}

.website-switcher-search {
  background-color: var(--bs-tertiary-bg, rgba(100, 116, 139, 0.06)) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.5rem !important;
  padding-left: 2rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  font-size: 0.8125rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.website-switcher-search:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

.website-switcher-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.9rem;
  color: var(--bs-secondary-color, #94a3b8);
}

.website-switcher-list {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
  padding-right: 2px;
}

.website-switcher-list::-webkit-scrollbar {
  width: 4px;
}

.website-switcher-list::-webkit-scrollbar-track {
  background: transparent;
}

.website-switcher-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 4px;
}

.website-switcher-list::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.6);
}

.website-switcher .dropdown-item {
  border-radius: 0.5rem !important;
  padding: 0.45rem 0.65rem !important;
  font-size: 0.84rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.website-switcher .dropdown-item:hover,
.website-switcher .dropdown-item:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
}

.website-switcher-footer {
  border-top: 1px solid var(--bs-border-color);
  margin: 0.5rem -0.5rem -0.5rem -0.5rem;
  padding: 0.5rem;
  background-color: transparent !important;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.website-switcher .dropdown-toggle {
  transition: all 0.2s ease;
}

.website-switcher .dropdown-toggle.show,
.website-switcher .dropdown-toggle[aria-expanded="true"] {
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.35) !important;
}

.website-switcher .dropdown-toggle .ti-chevron-down,
.website-switcher .dropdown-toggle .tabler-chevron-down {
  transition: transform 0.25s ease;
}

.website-switcher .dropdown-toggle.show .ti-chevron-down,
.website-switcher .dropdown-toggle.show .tabler-chevron-down,
.website-switcher .dropdown-toggle[aria-expanded="true"] .ti-chevron-down,
.website-switcher .dropdown-toggle[aria-expanded="true"] .tabler-chevron-down {
  transform: rotate(180deg);
}

/* Browse All Websites button with high contrast & crisp visibility */
.website-switcher-browse-btn {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  transition: all 0.2s ease !important;
  background-color: #eff6ff !important;
  color: #1e40af !important; /* High-contrast deep navy blue */
  border: 1px solid #bfdbfe !important;
}

.website-switcher-browse-btn .icon-base {
  color: #1e40af !important;
  transition: color 0.2s ease !important;
}

.website-switcher-browse-btn:hover,
.website-switcher-browse-btn:focus {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.website-switcher-browse-btn:hover .icon-base,
.website-switcher-browse-btn:focus .icon-base {
  color: #ffffff !important;
}

/* Dark Mode High Contrast */
[data-bs-theme="dark"] .website-switcher-browse-btn {
  background-color: rgba(99, 102, 241, 0.16) !important;
  color: #c7d2fe !important; /* Bright high-contrast lavender */
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
}

[data-bs-theme="dark"] .website-switcher-browse-btn .icon-base {
  color: #c7d2fe !important;
}

[data-bs-theme="dark"] .website-switcher-browse-btn:hover,
[data-bs-theme="dark"] .website-switcher-browse-btn:focus {
  background-color: #6366f1 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

[data-bs-theme="dark"] .website-switcher-browse-btn:hover .icon-base,
[data-bs-theme="dark"] .website-switcher-browse-btn:focus .icon-base {
  color: #ffffff !important;
}