@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Form Fields */
.form-group {
  @apply space-y-2;
}

.form-label {
  @apply text-sm font-medium text-gray-700;
}

.form-field {
  @apply block p-2 text-sm border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.form-field-full {
  @apply form-field w-full;
}

/* Required field indicator */
label.field-required::after {
  content: "(*)";
  color: #ef4444;
  font-weight: bold;
  margin-left: 2px;
}

.form-checkbox {
  @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer;
}

.form-field[disabled],
.form-field[readonly] {
  @apply bg-gray-200 text-gray-500 cursor-not-allowed;
}

/* Custom Buttons */
.btn {
  /* @apply rounded-md border-2 border-transparent py-2 px-5 text-white font-medium cursor-pointer; */
  @apply flex items-center justify-center gap-2 text-sm sm:text-base rounded-lg py-2 px-4 font-medium cursor-pointer;
}

.btn-primary {
  @apply btn text-white bg-blue-600 hover:bg-blue-700;
}

.btn-secondary {
  @apply btn text-white bg-gray-600 hover:bg-gray-700;
}

.btn-danger {
  @apply btn text-white bg-red-600 hover:bg-red-700;
}

.btn-success {
  @apply btn text-white bg-green-600 hover:bg-green-700;
}

.btn-warning {
  @apply btn text-white bg-yellow-400 hover:bg-yellow-500;
}

.btn-info {
  @apply btn text-white bg-sky-600 hover:bg-sky-700;
}

.btn-indigo {
  @apply btn text-white bg-indigo-600 hover:bg-indigo-700;
}

.btn-white {
  @apply btn bg-white hover:bg-gray-50 border-2;
}

.btn-link {
  @apply btn p-0 text-blue-600 hover:text-blue-700 hover:underline !important;
}

/* Custom Text Colors */

/* Custom Tables */
.tr {
  @apply hover:bg-slate-50;
}

.th {
  @apply px-4 py-3 text-xs font-medium uppercase tracking-wider border-b;
}

.td {
  @apply whitespace-nowrap px-4 py-3 text-sm;
}

/* Custom Style Pagination */
.pagination {
  @apply relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium;
}

.pagination:hover {
  @apply bg-gray-50;
}

.pagination.current {
  @apply z-10 bg-indigo-50 border-indigo-500 text-indigo-600;
}

.first,
.prev,
.next,
.last {
  @apply relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500;
}

.first:hover,
.prev:hover,
.next:hover,
.last:hover {
  @apply bg-gray-50;
}

/* Custom Cards */
.card {
  @apply p-4 border shadow rounded-lg bg-white;
}

.card-2 {
  @apply p-4 border-2 shadow-md rounded-lg bg-white;
}

/* Custom Components Tabs */
.tab-btn {
  @apply py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 transition duration-300;
}

.tab-btn.tab-active {
  @apply border-blue-500 text-blue-600;
}

/* Custom Tom Select */
.ts-control input::placeholder {
  @apply text-black;
}

.custom-tom-select {
  @apply border border-gray-500 rounded;
}

/* Custom Calendar Appointment Hover Effect */
.appointment-calendar-hover {
  @apply hover:shadow-lg hover:scale-105 hover:z-10 transition-all duration-300;
}

/* Sidebar Styles */
.sidebar-backdrop {
  @apply opacity-0 transition-opacity duration-300 ease-in-out;
}

.sidebar-backdrop.show {
  @apply opacity-100;
}

.sidebar-panel {
  @apply transform translate-x-full transition-transform duration-300 ease-in-out;
}

.sidebar-panel.show {
  @apply translate-x-0;
}

/* Sidebar content scroll */
.sidebar-content {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.sidebar-content::-webkit-scrollbar {
  width: 2px;
}

.sidebar-content::-webkit-scrollbar-track {
  @apply bg-gray-100 rounded-lg;
}

.sidebar-content::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-lg;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

/* Custom Actions Menu */
.actions-menu-trigger {
  @apply p-2 rounded-full transition-colors;
}

.actions-menu-dropdown {
  @apply absolute right-0 w-max bg-white shadow-lg border border-gray-200 z-10 flex flex-col;
}

.actions-menu-item {
  @apply px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors;
}

.actions-menu-button {
  @apply w-full flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors;
}

.actions-menu-submenu {
  @apply absolute top-0 w-48 bg-white rounded-lg shadow-lg border border-gray-200;
}

/* Custom Scrollbar */
@layer utilities {
  .custom-scrollbar::-webkit-scrollbar {
    width: .4rem;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 1rem;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  .custom-scrollbar {
    padding-right: .5rem;
  }
}