/* TomSelect Custom Styles - Đồng bộ với theme Vuexy */

/* Override browser default focus styles */
input:focus, select:focus, textarea:focus {
  border: 2px solid var(--bs-primary) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

/* Form Control - Select thông thường */
.form-control, .form-select {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.375rem !important;
}

.form-control:hover, .form-select:hover {
  border-color: var(--bs-border-color-translucent) !important;
}

.form-control:focus, .form-select:focus {
  border: 2px solid var(--bs-primary) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

/* Control (input container) */
.ts-control {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.375rem !important;
  background-color: var(--bs-body-bg) !important;
  min-height: 38px !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.ts-control:hover {
  border-color: var(--bs-border-color-translucent) !important;
}

.ts-control.focus {
  border: 2px solid var(--bs-primary) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Input field */
.ts-control input {
  color: var(--bs-body-color) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: .9375rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ts-control input::placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: 1 !important;
}

/* Dropdown */
.ts-dropdown {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important;
  background-color: var(--bs-body-bg) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  z-index: 1050 !important;
  margin-top: 2px !important;
}

/* Dropdown items */
.ts-dropdown .option {
  padding: 0.5rem 0.75rem !important;
  color: var(--bs-body-color) !important;
  background-color: transparent !important;
  border: none !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease-in-out !important;
}

.ts-dropdown .option:hover {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

.ts-dropdown .option.active {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

.ts-dropdown .option.selected {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

/* Single selection */
.ts-control.single .ts-control-input {
  padding: 0 !important;
}

.ts-control.single .ts-control-input input {
  width: 100% !important;
}

/* Multiple selection */
.ts-control.multi .ts-control-input {
  padding: 0 !important;
}

.ts-control.multi .ts-control-input input {
  width: auto !important;
  min-width: 100px !important;
}

/* Selected items in multiple mode */
.ts-control .item {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
  border: 1px solid var(--bs-primary) !important;
  border-radius: var(--bs-border-radius-sm) !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0.125rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.ts-control .item .remove {
  color: var(--bs-white) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-left: 0.25rem !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  opacity: 0.8 !important;
  transition: opacity 0.15s ease-in-out !important;
}

.ts-control .item .remove:hover {
  opacity: 1 !important;
}

/* Loading state */
.ts-control.loading::after {
  border-color: var(--bs-primary) transparent transparent transparent !important;
}

/* Disabled state */
.ts-control.disabled {
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

.ts-control.disabled input {
  cursor: not-allowed !important;
}

/* Clear button */
.ts-control .ts-control-clear {
  color: var(--bs-secondary-color) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  transition: opacity 0.15s ease-in-out !important;
}

.ts-control .ts-control-clear:hover {
  opacity: 1 !important;
  color: var(--bs-danger) !important;
}

/* Dropdown indicator */
.ts-control .ts-control-dropdown {
  color: var(--bs-secondary-color) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  transition: color 0.15s ease-in-out !important;
}

.ts-control .ts-control-dropdown:hover {
  color: var(--bs-body-color) !important;
}

/* Search input in dropdown */
.ts-dropdown .ts-dropdown-input {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius-sm) !important;
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  margin: 0.5rem !important;
  width: calc(100% - 1rem) !important;
}

.ts-dropdown .ts-dropdown-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

/* No results message */
.ts-dropdown .no-results {
  color: var(--bs-secondary-color) !important;
  padding: 0.75rem !important;
  text-align: center !important;
  font-size: 0.875rem !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ts-control {
    min-height: 36px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
  
  .ts-dropdown .option {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
}

/* DataTable column center alignment */
#dataTable th:first-child,
#dataTable td:first-child {
  text-align: center !important;
}

/* Fix z-index cho dropdown trong modal */
.tom-select.form-select .ts-dropdown {
  z-index: 9999 !important; /* Cao nhất để hiển thị trên modal */
}

/* Fix z-index cho modal backdrop */
.modal-backdrop {
  z-index: 1040 !important;
}

/* Fix z-index cho modal */
.modal {
  z-index: 1050 !important;
}

/* Fix z-index cho livewire modal */
.livewire-modal {
  z-index: 1050 !important;
}

/* Fix z-index cho dropdown wrapper */
.tom-select.form-select .ts-wrapper {
  z-index: 9999 !important;
}

/* Fix z-index cho dropdown content */
.tom-select.form-select .ts-dropdown-content {
  z-index: 9999 !important;
}

/* Fix z-index cho dropdown trong livewire modal */
.livewire-modal .tom-select.form-select .ts-dropdown {
  z-index: 9999 !important; /* Cao hơn livewire modal */
}

/* Fix z-index cho dropdown trong bootstrap modal */
.modal .tom-select.form-select .ts-dropdown {
  z-index: 9999 !important; /* Cao hơn bootstrap modal */
}

/* Fix z-index cho navbar khi có modal mở */
body.modal-open .layout-navbar-full .layout-navbar,
body.modal-open .layout-content-navbar .layout-navbar {
  z-index: 1000 !important; /* Thấp hơn modal (1050) */
}

/* Fix z-index cho navbar khi có livewire modal mở */
.livewire-modal-open .layout-navbar-full .layout-navbar,
.livewire-modal-open .layout-content-navbar .layout-navbar {
  z-index: 1000 !important; /* Thấp hơn livewire modal (1050) */
}

/* Center PHÂN QUYỀN and TRẠNG THÁI columns */
#dataTable th:nth-child(5),
#dataTable td:nth-child(5),
#dataTable th:nth-child(6),
#dataTable td:nth-child(6) {
  /* text-align: center !important; */
}

/* TomSelect dropdown arrow icon - matching number input style */


/* Fix viền đen khi bấm select 2 lần - theo màu theme */
.ts-control:focus,
.ts-control:focus-within,
.ts-control.focus,
.ts-control.dropdown-active {
  border: 2px solid var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

/* Fix màu hover option theo theme */
.ts-dropdown .option:hover {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

.ts-dropdown .option.active {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

.ts-dropdown .option.selected {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

.ts-control {
  border: 1px solid #d9dee3 !important;
  border-radius: 0.375rem !important;
  background-color: #fff !important;
  min-height: 38px !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  position: relative !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.ts-control:hover {
  border-color: #b4bcc8 !important;
}

.ts-control.focus,
.ts-control:focus,
.ts-control:focus-within,
.ts-control.dropdown-active {
  border: 2px solid var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

.ts-control {
  position: relative;
}

.ts-control::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke='gray' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem 1rem;
  pointer-events: none;
  transition: transform 0.2s ease;
  z-index: 1;
}

.ts-control.focus::after,
.ts-control.dropdown-active::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Hide default TomSelect dropdown icon */
.ts-control .ts-dropdown-single .ts-control::after {
  display: none;
}

.form-control, .form-select {
  border: 1px solid #d9dee3 !important;
  border-radius: 0.375rem !important;
}

.form-control:hover, .form-select:hover {
  border-color: #b4bcc8 !important;
}

.form-control:focus, .form-select:focus {
  border: 2px solid var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

/* DataTable ID column center */
#dataTable th:first-child,
#dataTable td:first-child {
  text-align: center !important;
}

/* TomSelect dropdown */
.ts-dropdown {
  border: 1px solid #d9dee3 !important;
  border-radius: 0.375rem !important;
  background-color: #fff !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  z-index: 1050 !important;
  margin-top: 2px !important;
}

.ts-dropdown .option {
  padding: 0.5rem 0.75rem !important;
  color: #697a8d !important;
  background-color: transparent !important;
  border: none !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease-in-out !important;
}

.ts-dropdown .option:hover {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option.selected {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

/* Fix Bootstrap FormValidation errors */
.form-control-validation {
  position: relative;
}

.form-control-validation .form-control {
  position: relative;
}

/* Ensure modal elements exist before FormValidation */
.modal .form-control,
.modal .form-select {
  display: block;
  width: 100%;
}

/* Fix classList errors */
.modal-body * {
  box-sizing: border-box;
}

/* Bootstrap Validation States for Form Controls */
.form-control.is-invalid,
.form-select.is-invalid {
  border: 1px solid #ff4c51 !important;
}

.form-control.is-invalid:hover,
.form-select.is-invalid:hover {
  border: 1px solid #ff4c51 !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border: 1px solid #ff4c51 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 76, 81, 0.25) !important;
}

.form-control.is-valid,
.form-select.is-valid {
  border: 1px solid #198754 !important;
}

.form-control.is-valid:hover,
.form-select.is-valid:hover {
  border: 1px solid #198754 !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border: 1px solid #198754 !important;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

/* Bootstrap Validation States for TomSelect */
.tom-select.is-invalid .ts-wrapper,
.tom-select.is-invalid .ts-control {
  border: 1px solid #ff4c51 !important;
}

.tom-select.is-invalid .ts-wrapper:hover,
.tom-select.is-invalid .ts-control:hover {
  border: 1px solid #ff4c51 !important;
}

.tom-select.is-invalid .ts-wrapper.focus,
.tom-select.is-invalid .ts-control.focus {
  border: 1px solid #ff4c51 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 76, 81, 0.25) !important;
}

.tom-select.is-valid .ts-wrapper,
.tom-select.is-valid .ts-control {
  border: 1px solid #198754 !important;
}

.tom-select.is-valid .ts-wrapper:hover,
.tom-select.is-valid .ts-control:hover {
  border: 1px solid #198754 !important;
}

.tom-select.is-valid .ts-wrapper.focus,
.tom-select.is-valid .ts-control.focus {
  border: 1px solid #198754 !important;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

/* Default border for TomSelect when no validation state */
.tom-select .ts-wrapper,
.tom-select .ts-control {
  border: 2px solid #d9dee3 !important;
}

.tom-select .ts-wrapper:hover,
.tom-select .ts-control:hover {
  border-color: #b4bcc8 !important;
}

.tom-select .ts-wrapper.focus,
.tom-select .ts-control.focus,
.tom-select .ts-wrapper:focus,
.tom-select .ts-control:focus,
.tom-select .ts-wrapper:focus-within,
.tom-select .ts-control:focus-within {
  border: 2px solid var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Ensure TomSelect wrapper has proper styling */
.tom-select .ts-wrapper {
  width: 100% !important;
  border: 1px solid #d9dee3 !important;
  border-radius: 0.375rem !important;
  position: relative !important;
  background-color: #fff !important;
  min-height: 38px !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.tom-select .ts-control {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0.375rem 0.75rem !important;
  min-height: 38px !important;
}

.text-info-custom {
  --bs-text-opacity: 1;
  color: #2092ec !important;
}

/* Modal edit input fields border styling - chỉ cho input, không cho select */
#edit-modal .form-control {
  border: 1px solid #d9d9d9 !important;
  border-radius: 0.375rem;
}

#edit-modal .form-control:focus {
  border: 2px solid var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: none !important;
}

.ts-wrapper {
  width: 100% !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 0.375rem !important;
  position: relative !important;
}

/* Bên trong input cũng full và xóa viền */
.ts-control {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0.375rem 0.75rem !important;
}

.ts-wrapper.form-select {
  display: block;
  width: 100% !important;
}

select.tom-select {
  display: none !important; /* Ẩn hẳn select gốc */
}

.ts-wrapper.form-select {
  border: 1px solid #d9d9d9 !important;
}

.form-select:focus, .form-select:focus-within, .was-validated .form-select:invalid, 
.was-validated .form-select:valid, .form-select.is-invalid, .form-select.is-valid,
.ts-hidden-accessible, .form-select  
{
  padding: 0 !important;
  --bs-form-select-bg-img: none !important;
}

/* Fix width cho badge trong cột Phân quyền và Trạng thái */
#dataTable td:nth-child(5) .badge,
#dataTable td:nth-child(6) .badge {
  display: inline-block !important;
  /* text-align: center !important; */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Đảm bảo icon và text trong badge được căn giữa */
#dataTable td:nth-child(5) .badge .d-inline-flex,
#dataTable td:nth-child(6) .badge .d-inline-flex {
  justify-content: center !important;
  width: 100% !important;
}

/* Sửa màu header trong modal view thành xanh #28c76f */
#view-modal .card-header h6 {
  /* color: #28c76f !important; */
}

#view-modal .card-header h6 i {
  /* color: #28c76f !important; */
}

/* Style cho modal xóa admin - chuyên nghiệp và tối giản */
#delete-modal .modal-content {
  border-radius: 1rem !important;
  overflow: hidden !important;
}

#delete-modal .modal-header {
  padding: 2rem 1.5rem 1rem 1.5rem !important;
  background: #f35f59;
}

#delete-modal .avatar-xl {
  width: 4rem !important;
  height: 4rem !important;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
}

#delete-modal .modal-title {
  font-weight: 600 !important;
  font-size: 1.25rem !important;
}

#delete-modal .modal-body {
  padding: 1.5rem 1.5rem 1.5rem 1.5rem !important;
}

#delete-modal .alert {
  border-radius: 0.75rem !important;
  /* border: 1px solid #d9d9d9 !important; */
  padding: 1rem !important;
  /* box-shadow: inset 0 0px 6px rgba(0, 0, 0, 0.1) !important; */
}


#delete-modal .btn-close {
  background: none !important;
  border: none !important;
  font-size: 1.5rem !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s ease !important;
}

#delete-modal .btn-close:hover {
  opacity: 1 !important;
}

/* Style cho option trong TomSelect modal edit giống badge ngoài view */
 .ts-dropdown .option {
  padding: 8px 12px !important;
  border-radius: 0.375rem !important;
  margin: 2px 4px !important;
  border: 1px solid transparent !important;
  /* background: white !important;
  color: #333 !important; */
  font-size: 14px !important;
  line-height: 1.4 !important;
}

 .ts-dropdown .option:hover {
  /* background: #f8f9fa !important;
  border-color: #dee2e6 !important; */
}

 .ts-dropdown .option.active {
  /* background: #e3f2fd !important;
  border-color: #2196f3 !important;
  color: #1976d2 !important; */
}

/* Style cho option có badge (role options) */
 .ts-dropdown .option[data-value] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Style cho icon trong option */
 .ts-dropdown .option i {
  margin-right: 8px !important;
  font-size: 12px !important;
}

.full .ts-control {
  background-color: #fff !important;
}

.modal .modal-header {
  padding-bottom: 1rem !important;
}

.ts-control {
  background-color: #fff !important;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .btnView, .btnEdit, .btnDelete {
    min-width: 35px;
    min-height: 35px;
    padding: 8px;
    margin: 2px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .d-flex.gap-1.flex-wrap {
    gap: 4px !important;
  }
  
  /* Ẩn phần hiển thị số hàng và thông tin trang */
  .dt-length {
    display: none !important;
  }
  
  .dt-info {
    display: none !important;
  }
}

/* Ẩn phần hiển thị số hàng và thông tin trang trên tất cả màn hình */
.dt-length {
  display: none !important;
}

.dt-info {
  display: none !important;
}

/* Style modal delete giống modal edit */
#delete-modal .modal-content {
  border: 1px solid #d9dee3 !important;
  box-shadow: none !important;
  border-radius: 0.5rem !important;
}

#delete-modal .modal-header {
  border-bottom: none !important;
  padding: 1.5rem 1.5rem 0 1.5rem !important;
  background-color: #fff !important;
}

#delete-modal .modal-title {
  color: #5a6a85 !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
}

#delete-modal .modal-body {
  padding: 1.5rem !important;
  background-color: #fff !important;
}

#delete-modal .modal-footer {
  border-top: none !important;
  padding: 0 1.5rem 1.5rem 1.5rem !important;
  background-color: #fff !important;
  gap: 0.75rem !important;
}

#delete-modal .btn-close {
  background: none !important;
  border: none !important;
  font-size: 1.5rem !important;
  opacity: 0.5 !important;
}

#delete-modal .btn-close:hover {
  opacity: 0.75 !important;
}