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

/* Custom Form Fields */
.form-label {
  @apply block text-gray-700 font-medium mb-1;
}

.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 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 */
.stat-card {
  @apply bg-gray-50 p-4 rounded-lg border shadow;
}

.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 border shadow rounded-lg;
}

.card-2 {
  @apply border-2 shadow-md rounded-lg;
}

/* Calendar styles */
.simple-calendar table {
  width: 100%;
  border-collapse: collapse;
}

.simple-calendar th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.simple-calendar td {
  border: 1px solid #e5e7eb;
  padding: 0.25rem;
  height: 6rem;
  vertical-align: top;
}

.simple-calendar .calendar-heading {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
}

.simple-calendar .calendar-heading a {
  color: #4f46e5;
  text-decoration: none;
}

.simple-calendar .calendar-heading a:hover {
  color: #4338ca;
}

.simple-calendar .today {
  background-color: #eef2ff;
}

.simple-calendar .prev-month,
.simple-calendar .next-month {
  background-color: #f9fafb;
  color: #9ca3af;
}

.simple-calendar .calendar-title {
  display: none;
}