/*================================================================================

Author: Isend
Author URL: 
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
form .required:after {
  color: #f35958;
  content: "*";
  font-size: 15px;
  position: relative;
  left: 3px;
}

/* Switches */
.form-switch-md .form-check-input {
  width: 4rem !important;
}

.form-switch-lg .form-check-input {
  width: 6rem !important;
}

.form-switch-xl .form-check-input {
  width: 8rem !important;
}

.feather-16 {
  width: 16px;
  height: 16px;
}

.feather-20 {
  width: 20px;
  height: 20px;
}

.feather-24 {
  width: 24px;
  height: 24px;
}

.feather-32 {
  width: 32px;
  height: 32px;
}

/* Hamburger menu - hidden on desktop (1200px+), visible on mobile/tablet */
@media (min-width: 1200px) {
  .header-navbar .bookmark-wrapper {
    display: none !important;
  }
}

/* Mobile navbar - compact layout to fit all items */
@media (max-width: 1199.98px) {
  .header-navbar .navbar-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between !important;
  }

  .header-navbar .navbar-nav > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-navbar .navbar-nav.ms-auto {
    margin-left: 0 !important;
    flex: 1;
    justify-content: space-around !important;
  }

  .header-navbar .dropdown-user {
    margin-left: auto !important;
  }

  /* Breadcrumb - prevent overlap with navbar */
  .content-header-left,
  .content-header {
    margin-top: 1rem !important;
  }

  /* Hide page title on mobile/tablet, keep only breadcrumb */
  .content-header-title,
  .content-header h2,
  .content-header-left h2,
  h2.content-header-title,
  .breadcrumbs-top .content-header-title {
    display: none !important;
  }

  /* Hide Viber balance on mobile/tablet */
  .header-navbar .navbar-nav > li.d-none.d-xl-flex {
    display: none !important;
  }
}

/* Fix: Sidebar background extends to full page height */
.main-menu {
  min-height: 100vh !important;
}

.main-menu.menu-fixed {
  min-height: 100vh !important;
}

/* Fix: Show full menu text (no ellipsis) */
.main-menu .navigation li {
  white-space: normal !important;
}

.main-menu .navigation li a {
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}

.main-menu .navigation li a span.menu-title {
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* Fix: Submenu items */
.main-menu .navigation .menu-content li a {
  white-space: normal !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* =============================================
   MOBILE RESPONSIVENESS FIXES
   ============================================= */

/* Mobile: Ensure menu is scrollable */
@media (max-width: 991.98px) {
  .main-menu {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Better touch targets on mobile */
  .main-menu .navigation li a {
    padding: 12px 15px !important;
    min-height: 44px; /* Apple's recommended touch target */
  }

  /* Ensure overlay covers full screen */
  .vertical-overlay-menu .main-menu {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
  .main-menu .navigation li a span.menu-title {
    font-size: 0.95rem !important;
  }
}

/* Small phones */
@media (max-width: 575.98px) {
  .main-menu .navigation li a {
    font-size: 0.9rem !important;
  }

  .main-menu .navigation .navigation-header {
    font-size: 0.8rem !important;
  }
}

/* =============================================
   FIX: Prevent menu "jump" on page navigation
   ============================================= */

/* Limit content transition to only margin-left, not "all" */
.content {
  transition: margin-left 0.3s ease !important;
}

/* Prevent menu from animating on page load */
.main-menu {
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0s !important;
}

/* Prevent unwanted hover effects during page change */
body.changing-menu .main-menu,
body.changing-menu .content {
  transition: none !important;
}

/* Fix sidenav overlay click area */
.sidenav-overlay {
  pointer-events: none;
  display: none !important;
}
.sidenav-overlay.show {
  pointer-events: auto;
  display: block !important;
}

/* Fix drag-target on desktop - only needed for mobile swipe */
@media (min-width: 992px) {
  .drag-target {
    display: none !important;
  }
}

/* Prevent content-overlay from interfering */
.content-overlay {
  pointer-events: none;
}
.content-overlay.show,
.app-content.show-overlay .content-overlay {
  pointer-events: auto;
}

/* Stop menu width changes on click */
.vertical-layout.vertical-menu-modern .main-menu {
  width: 260px !important;
}
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) {
  width: 80px !important;
}
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded {
  width: 260px !important;
}

/* =============================================
   NAVIGATION HEADER (Section titles) STYLING
   Match breadcrumb font styles for consistency
   ============================================= */

/* Navigation header (section titles) - match breadcrumb style */
.main-menu .navigation .navigation-header {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #7367f0 !important;
  padding: 18px 22px 8px 22px !important;
  margin: 0 !important;
}

.main-menu .navigation .navigation-header span {
  font-weight: 600 !important;
}

/* Menu items font consistency */
.main-menu .navigation li a span.menu-title {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* Active menu item */
.main-menu .navigation li.active > a span.menu-title {
  font-weight: 500 !important;
}

/* Submenu items - slightly smaller */
.main-menu .navigation .menu-content li a span.menu-title {
  font-size: 0.95rem !important;
}

/* =============================================
   GLOBAL FONT CONSISTENCY
   Apply Roboto font across all UI elements
   ============================================= */

/* Base font for the entire application */
body,
html {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

/* Header Navbar */
.header-navbar {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

.header-navbar .navbar-nav .nav-link {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* User dropdown in navbar */
.header-navbar .user-nav .user-name {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.header-navbar .user-nav .user-status {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
}

/* Language and notification dropdowns */
.header-navbar .dropdown-language .selected-language,
.header-navbar .dropdown-notification .notification-title {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
}

/* Balance display in navbar */
.header-navbar .show-balance-text {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

.header-navbar .show-balance-unit {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* Breadcrumb */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
}

.content-header-title {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* Dropdown menus */
.dropdown-menu {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

.dropdown-item {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
}

.dropdown-header {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

/* Cards */
.card-title {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
}

.card-body {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

/* Buttons */
.btn {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* Form elements */
.form-label,
.form-control,
.form-select,
input,
select,
textarea {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

/* Tables */
.table,
.table th,
.table td {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

/* Badges */
.badge {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* Alerts */
.alert {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

/* Modals */
.modal-title {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
}

.modal-body,
.modal-footer {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

/* Toasts */
.toast,
.toast-title,
.toast-message {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

/* Tabs */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* Pagination */
.pagination .page-link {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

/* DataTables */
.dataTables_wrapper {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}

.dataTables_info,
.dataTables_length,
.dataTables_filter {
  font-family: "Roboto", Helvetica, Arial, sans-serif !important;
  font-size: 0.95rem !important;
}

/* =============================================
   BREADCRUMB ALIGNMENT FIX
   Title and breadcrumb on same line, centered
   ============================================= */

/* Main container - flexbox for alignment */
.breadcrumbs-top .col-12 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Page title */
.content-header-title {
  float: none !important;
  margin: 0 !important;
  padding-right: 1rem !important;
  border-right: 1px solid #d8d6de !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Breadcrumb wrapper */
.breadcrumb-wrapper {
  display: flex !important;
  align-items: center !important;
  margin-left: 1rem !important;
}

/* Breadcrumb list */
.breadcrumb-wrapper .breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Breadcrumb items */
.breadcrumb-wrapper .breadcrumb-item {
  font-size: 1rem !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
}

/* Breadcrumb separator */
.breadcrumb-wrapper .breadcrumb-item + .breadcrumb-item::before {
  content: "›" !important;
  font-size: 1.1rem !important;
  color: #6e6b7b !important;
  padding: 0 0.5rem !important;
}

/* Breadcrumb links */
.breadcrumb-wrapper .breadcrumb-item a {
  color: #7367f0 !important;
  text-decoration: none !important;
}

.breadcrumb-wrapper .breadcrumb-item a:hover {
  color: #5e50ee !important;
  text-decoration: underline !important;
}

/* Active breadcrumb item (last) */
.breadcrumb-wrapper .breadcrumb-item:last-child {
  color: #6e6b7b !important;
}

/* Content header spacing */
.content-header {
  padding: 1.5rem 0 0.5rem 0 !important;
}

.content-header-left {
  margin-bottom: 0.5rem !important;
}

/* Mobile responsiveness */
@media (max-width: 767.98px) {
  .breadcrumbs-top .col-12 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .content-header-title {
    border-right: none !important;
    padding-right: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  .breadcrumb-wrapper {
    margin-left: 0 !important;
  }
}

/* =============================================
   GLOBAL STATS CARD STYLES
   Consistent design across all pages (like Viber)
   ============================================= */

/* Stats card with hover effect */
.stats-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  border-radius: 8px;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(115, 103, 240, 0.15);
}

/* Avatar icons in stats cards */
.avatar.bg-light-primary,
.avatar.bg-light-success,
.avatar.bg-light-danger,
.avatar.bg-light-warning,
.avatar.bg-light-info,
.avatar.bg-light-secondary {
  border-radius: 8px !important;
}

/* Progress bars - thinner and modern */
.progress {
  border-radius: 10px;
  overflow: hidden;
  background-color: #f0f0f0;
}

.progress-bar {
  border-radius: 10px;
}

/* Card titles - consistent styling */
.card-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #444 !important;
  margin-bottom: 0 !important;
}

/* Card header - clean borders */
.card .card-header {
  border-bottom: 1px solid #f0f0f0;
  background: transparent;
}

/* Links in stats cards */
.stats-card a {
  color: inherit;
}

.stats-card a:hover {
  text-decoration: none;
}

/* Card text / labels */
.card-text {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Header banner style cards */
.card.bg-primary {
  border: none;
  border-radius: 8px;
}

.card.bg-primary .card-body {
  padding: 1.5rem;
}

/* Dashboard Header Banner */
.dashboard-header-banner {
  background: linear-gradient(118deg, #7367f0, rgba(115, 103, 240, 0.7)) !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(115, 103, 240, 0.3) !important;
}

.dashboard-header-title {
  color: #ffffff !important;
}

.dashboard-header-title svg,
.dashboard-header-title i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.dashboard-btn-primary {
  background-color: #ffffff !important;
  color: #7367f0 !important;
  border: none !important;
}

.dashboard-btn-primary:hover {
  background-color: #f0f0f0 !important;
  color: #5e50ee !important;
}

.dashboard-btn-primary svg,
.dashboard-btn-primary i {
  color: #7367f0 !important;
  stroke: #7367f0 !important;
}

.dashboard-btn-outline {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.dashboard-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.dashboard-btn-outline svg,
.dashboard-btn-outline i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Quick actions button grid */
.d-grid.gap-1 > .btn {
  text-align: left;
  display: flex;
  align-items: center;
}

.d-grid.gap-1 > .btn i,
.d-grid.gap-1 > .btn svg {
  flex-shrink: 0;
}

/* Outline buttons with better hover */
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background-color: #7367f0 !important;
  border-color: #7367f0 !important;
  color: #fff !important;
}

.btn-outline-secondary:hover {
  background-color: #82868b !important;
  border-color: #82868b !important;
}

/* btn-outline-light for header banner */
.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Light background variations - consistent opacity */
.bg-light-primary {
  background: rgba(115, 103, 240, 0.12) !important;
}

.bg-light-success {
  background: rgba(40, 199, 111, 0.12) !important;
}

.bg-light-danger {
  background: rgba(234, 84, 85, 0.12) !important;
}

.bg-light-warning {
  background: rgba(255, 159, 67, 0.12) !important;
}

.bg-light-info {
  background: rgba(0, 207, 232, 0.12) !important;
}

/* Timeline points */
.timeline-point-primary {
  background-color: #7367f0 !important;
}

/* Opacity utility */
.opacity-75 {
  opacity: 0.75;
}

/* Card shadows */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 8px;
}

/* Consistent list styling */
.list-unstyled li {
  padding: 0.25rem 0;
}

/* Font large utility classes */
.font-large-2 {
  font-size: 2rem !important;
}

/* Gap utilities for older browsers */
.gap-1 {
  gap: 0.5rem !important;
}

/* Better button focus states */
.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.25) !important;
}

/* =============================================
   AUTOMATION CARDS - Hover Effects
   ============================================= */

.automation-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.automation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(115, 103, 240, 0.25);
  border-color: #7367f0 !important;
  background-color: rgba(115, 103, 240, 0.05) !important;
}

.automation-card .card-title {
  color: #7367f0 !important;
  transition: color 0.2s ease;
}

.automation-card:hover .card-title {
  color: #5e50ee !important;
}

.automation-card .card-title svg,
.automation-card .card-title i {
  color: #7367f0;
  stroke: #7367f0;
  transition: transform 0.2s ease;
}

.automation-card:hover .card-title svg,
.automation-card:hover .card-title i {
  transform: scale(1.1);
}

.automation-card .card-text {
  color: #6e6b7b;
}

/* =============================================
   DATATABLES ZEBRA STRIPING
   Alternate row colors for better readability
   ============================================= */

/* DataTables - Zebra striping - Multiple selectors for maximum specificity */
.dataTable tbody tr:nth-child(odd),
table.dataTable tbody tr:nth-child(odd),
.dataTables_wrapper table tbody tr:nth-child(odd),
.table-responsive .dataTable tbody tr:nth-child(odd),
div.dataTables_wrapper table.dataTable tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

.dataTable tbody tr:nth-child(odd) td,
table.dataTable tbody tr:nth-child(odd) td,
div.dataTables_wrapper table.dataTable tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}

.dataTable tbody tr:nth-child(even),
table.dataTable tbody tr:nth-child(even),
.dataTables_wrapper table tbody tr:nth-child(even),
.table-responsive .dataTable tbody tr:nth-child(even),
div.dataTables_wrapper table.dataTable tbody tr:nth-child(even) {
  background-color: #e8f5e9 !important;
}

.dataTable tbody tr:nth-child(even) td,
table.dataTable tbody tr:nth-child(even) td,
div.dataTables_wrapper table.dataTable tbody tr:nth-child(even) td {
  background-color: #e8f5e9 !important;
}


/* DataTables uses .odd and .even classes too */
.dataTable tbody tr.odd,
table.dataTable tbody tr.odd {
  background-color: #ffffff !important;
}

.dataTable tbody tr.odd td,
table.dataTable tbody tr.odd td {
  background-color: #ffffff !important;
}

.dataTable tbody tr.even,
table.dataTable tbody tr.even {
  background-color: #e8f5e9 !important;
}

.dataTable tbody tr.even td,
table.dataTable tbody tr.even td {
  background-color: #e8f5e9 !important;
}

/* Disable hover effect completely - including Bootstrap .table-hover */
.table-hover tbody tr:hover,
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th,
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
.table.table-hover tbody tr:hover,
.table.table-hover tbody tr:hover td,
table.table-hover tbody tr:hover,
table.table-hover tbody tr:hover td,
table.table-hover tbody tr:hover > *,
.dataTable.table-hover tbody tr:hover,
.dataTable.table-hover tbody tr:hover td,
table.dataTable.table-hover tbody tr:hover,
table.dataTable.table-hover tbody tr:hover td,
.dataTable tbody tr:hover,
table.dataTable tbody tr:hover,
.dataTable tbody tr:hover td,
table.dataTable tbody tr:hover td,
.dataTable tbody tr.odd:hover,
.dataTable tbody tr.odd:hover td,
.dataTable tbody tr.even:hover,
.dataTable tbody tr.even:hover td,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.odd:hover td,
table.dataTable tbody tr.even:hover,
table.dataTable tbody tr.even:hover td {
  background-color: inherit !important;
  --bs-table-hover-bg: transparent !important;
  --bs-table-accent-bg: transparent !important;
}

/* Force odd rows to stay white on hover */
.table-hover tbody tr:nth-child(odd):hover,
.table-hover tbody tr:nth-child(odd):hover > td,
.table-hover > tbody > tr:nth-child(odd):hover > td,
.dataTable tbody tr:nth-child(odd):hover,
.dataTable tbody tr:nth-child(odd):hover td,
table.dataTable tbody tr:nth-child(odd):hover,
table.dataTable tbody tr:nth-child(odd):hover td,
.dataTable.table-hover tbody tr:nth-child(odd):hover td,
table.dataTable.table-hover tbody tr:nth-child(odd):hover td {
  background-color: #ffffff !important;
  --bs-table-hover-bg: #ffffff !important;
  --bs-table-accent-bg: #ffffff !important;
}

/* Force even rows to stay green on hover */
.table-hover tbody tr:nth-child(even):hover,
.table-hover tbody tr:nth-child(even):hover > td,
.table-hover > tbody > tr:nth-child(even):hover > td,
.dataTable tbody tr:nth-child(even):hover,
.dataTable tbody tr:nth-child(even):hover td,
table.dataTable tbody tr:nth-child(even):hover,
table.dataTable tbody tr:nth-child(even):hover td,
.dataTable.table-hover tbody tr:nth-child(even):hover td,
table.dataTable.table-hover tbody tr:nth-child(even):hover td {
  background-color: #e8f5e9 !important;
  --bs-table-hover-bg: #e8f5e9 !important;
  --bs-table-accent-bg: #e8f5e9 !important;
}

/* Selected row - distinct color */
.dataTable tbody tr.selected,
table.dataTable tbody tr.selected {
  background-color: #7367f0 !important;
  color: #ffffff !important;
}

.dataTable tbody tr.selected td,
table.dataTable tbody tr.selected td {
  background-color: #7367f0 !important;
  color: #ffffff !important;
}

/* DataTables header styling - like permissions table */
.dataTable thead th,
table.dataTable thead th,
.dataTable thead td,
table.dataTable thead td,
.table-responsive .dataTable thead th,
div.dataTables_wrapper table.dataTable thead th,
.dataTables_scrollHead table.dataTable thead th {
  background: #495057 !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px !important;
  padding: 14px 16px !important;
  border-right: 1px solid #6c757d !important;
  border-bottom: 2px solid #dee2e6 !important;
}

/* Remove border from last th */
.dataTable thead th:last-child,
table.dataTable thead th:last-child {
  border-right: none !important;
}

/* Sorting icons - make them white */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  color: #fff !important;
  opacity: 0.5 !important;
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
  opacity: 1 !important;
}

/* =============================================
   CUSTOM COOKIE CONSENT - TIDIO STYLE
   Exact replica of Tidio's cookie consent
   ============================================= */

/* Overlay - Light gray like Tidio */
.cookie-consent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(128, 128, 128, 0.3);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Dialog box */
.cookie-consent-dialog {
  background: #ffffff;
  border-radius: 12px;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  position: relative;
  padding: 28px 32px;
}

/* Cookie icon */
.cookie-consent-icon {
  position: absolute;
  top: 28px;
  left: 32px;
}

.cookie-consent-icon svg {
  width: 40px;
  height: 40px;
}

/* Content area */
.cookie-consent-content {
  margin-left: 56px;
  margin-bottom: 20px;
}

/* Title */
.cookie-consent-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

/* Description text */
.cookie-consent-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #4a5568;
  margin: 0;
}

.cookie-consent-text a {
  color: #2563eb;
  text-decoration: underline;
}

.cookie-consent-text a:hover {
  color: #1d4ed8;
}

/* Buttons container */
.cookie-consent-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Button base */
.cookie-btn {
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 12px 24px;
  min-height: 46px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  flex: 1;
  min-width: 140px;
  font-family: inherit;
}

/* Outlined buttons (Reject, Customize) */
.cookie-btn-outline {
  background-color: #ffffff;
  color: #1a1a2e;
  border: 1px solid #e2e8f0;
}

.cookie-btn-outline:hover {
  background-color: #f7fafc;
  border-color: #cbd5e0;
}

/* Accept button - Green */
.cookie-btn-accept {
  background-color: #22c55e;
  color: #ffffff;
  border: none;
}

.cookie-btn-accept:hover {
  background-color: #16a34a;
}

/* ===========================================
   Cookie Settings Modal
   =========================================== */

.cookie-settings-dialog {
  max-width: 560px;
}

.cookie-settings-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
}

.cookie-settings-header .cookie-consent-icon {
  position: relative;
  top: 0;
  left: 0;
}

.cookie-settings-header .cookie-consent-title {
  margin: 8px 0 0 0;
}

/* Cookie categories */
.cookie-categories {
  margin-bottom: 24px;
  max-height: 320px;
  overflow-y: auto;
}

.cookie-category {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.cookie-category:last-child {
  margin-bottom: 0;
}

.cookie-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cookie-category-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cookie-category-info h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.cookie-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.cookie-badge-required {
  background: #e0f2fe;
  color: #0369a1;
}

.cookie-category-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
}

/* Toggle switch */
.cookie-toggle {
  position: relative;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cookie-toggle-label {
  display: block;
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 24px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
}

.cookie-toggle-label::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cookie-toggle input:checked + .cookie-toggle-label {
  background: #22c55e;
}

.cookie-toggle input:checked + .cookie-toggle-label::after {
  transform: translateX(20px);
}

.cookie-toggle-label.disabled {
  background: #22c55e;
  opacity: 0.7;
  cursor: not-allowed;
}

/* ===========================================
   Mobile Responsive
   =========================================== */

@media (max-width: 640px) {
  .cookie-consent-dialog {
    padding: 24px 20px;
    margin: 12px;
    max-width: calc(100% - 24px);
  }

  .cookie-consent-icon {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 12px;
  }

  .cookie-consent-content {
    margin-left: 0;
  }

  .cookie-consent-title {
    font-size: 1rem;
  }

  .cookie-consent-text {
    font-size: 0.85rem;
  }

  .cookie-consent-buttons {
    flex-direction: column;
  }

  .cookie-btn {
    width: 100%;
    flex: none;
    min-width: auto;
  }

  .cookie-settings-header {
    flex-direction: column;
    gap: 8px;
  }

  .cookie-settings-header .cookie-consent-title {
    margin: 0;
  }

  .cookie-categories {
    max-height: 250px;
  }

  .cookie-category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cookie-toggle {
    align-self: flex-end;
    margin-top: -30px;
  }
}