/*
=================================================================
  Base Styles & Scrollbar
=================================================================
*/
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* gray-50 */
    color: #1f2937; /* gray-800 */
    overscroll-behavior: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; /* gray-100 */
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* gray-300 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* gray-400 */
}

/*
=================================================================
  New, Elegant Sidebar Styles
=================================================================
*/
.nav-section-title {
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-semibold */
  text-transform: uppercase;
  color: #6b7280; /* text-gray-500 */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
  margin-top: 1rem; /* mt-4 */
  margin-bottom: 0.5rem; /* mb-2 */
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 1rem; /* py-2.5 px-4 */
  margin: 0 0.5rem; /* mx-2 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: #9ca3af; /* text-gray-400 */
  transition: all 0.15s ease-in-out;
  text-decoration: none;
}

.nav-link:hover {
  background-color: #1f2937; /* bg-gray-800 */
  color: #ffffff; /* text-white */
}

.nav-link.active {
  background-color: #2563eb; /* bg-blue-600 */
  color: #ffffff; /* text-white */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

.nav-link i {
  color: #6b7280; /* text-gray-500 */
  transition: all 0.15s ease-in-out;
  width: 1.5rem; /* w-6 */
  text-align: center;
  margin-right: 0.75rem; /* Corresponds to space between icon and text */
}

.nav-link:hover i {
  color: #d1d5db; /* text-gray-300 */
}

.nav-link.active i {
  color: #ffffff; /* text-white */
}

/*
=================================================================
  Table Styles
=================================================================
*/
.table {
    min-width: 100%;
    border-collapse: collapse; /* Ensure borders are clean */
}
.table thead th {
    padding: 0.75rem 1rem; /* px-4 py-3 */
    background-color: #f9fafb; /* bg-gray-50 */
    text-align: left;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    color: #6b7280; /* text-gray-500 */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #e5e7eb; /* divide-y divide-gray-200 */
}
.table tbody td {
    padding: 0.75rem 1rem; /* px-4 py-3 */
    white-space: nowrap;
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* text-gray-700 */
    border-bottom: 1px solid #e5e7eb; /* border-b border-gray-200 */
    vertical-align: middle;
}
.table tbody tr:hover {
    background-color: #eff6ff; /* bg-blue-50 */
}
.table tbody tr:last-child td {
    border-bottom: 0;
}

/*
=================================================================
  Status Badges
=================================================================
*/
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem; /* px-2.5 py-0.5 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    border-width: 1px;
}
.status-confirmed { background-color: #dcfce7; color: #166534; border-color: #bbf7d0; }
.status-pending-admin, .status-pending-operator { background-color: #fef3c7; color: #92400e; border-color: #fde68a; }
.status-pending-payment, .status-pending-bnpl { background-color: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.status-cancelled, .status-rejected { background-color: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.status-noshow { background-color: #e5e7eb; color: #4b5563; border-color: #d1d5db; text-decoration: line-through;}
.status-amended { background-color: #dbeafe; color: #1e40af; border-color: #bfdbfe;}
.status-link-sent { background-color: #cffafe; color: #0891b2; border-color: #a5f3fc;}
.status-revoked { background-color: #fef9c3; color: #854d0e; border-color: #fde047; }

/*
=================================================================
  Modal Styles
=================================================================
*/
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.6); /* gray-900/60 */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease-out;
}
.modal-overlay.visible {
    display: flex;
}
.modal-content {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* shadow-2xl */
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalFadeIn 0.2s ease-out;
    max-width: 700px; /* Default max-width */
}
.modal-close {
    position: absolute;
    top: 0.75rem; /* top-3 */
    right: 1rem; /* right-4 */
    background: transparent;
    border: 0;
    color: #9ca3af; /* text-gray-400 */
    font-size: 1.5rem; /* text-2xl */
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}
.modal-close:hover {
    color: #1f2937; /* text-gray-800 */
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/*
=================================================================
  Button Styles
=================================================================
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border: 1px solid transparent;
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    transition: all 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4); /* ring-2 ring-offset-2 */
}
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn i, .btn svg {
    margin-left: -0.25rem; /* -ml-1 */
    margin-right: 0.5rem; /* mr-2 */
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
}
.btn-primary { background-color: #4f46e5; color: white; border-color: #4f46e5; }
.btn-primary:hover:not(:disabled) { background-color: #4338ca; border-color: #4338ca; }
.btn-secondary { background-color: #4b5563; color: white; border-color: #4b5563; }
.btn-secondary:hover:not(:disabled) { background-color: #374151; border-color: #374151; }
.btn-danger { background-color: #dc2626; color: white; border-color: #dc2626; }
.btn-danger:hover:not(:disabled) { background-color: #b91c1c; border-color: #b91c1c; }
.btn-success { background-color: #16a34a; color: white; border-color: #16a34a; }
.btn-success:hover:not(:disabled) { background-color: #15803d; border-color: #15803d; }
.btn-outline { background-color: white; color: #374151; border-color: #d1d5db; }
.btn-outline:hover:not(:disabled) { background-color: #f9fafb; border-color: #9ca3af; }
.btn-outline.btn-danger { color: #dc2626; border-color: #fca5a5; }
.btn-outline.btn-danger:hover:not(:disabled) { background-color: #fef2f2; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.btn-icon { background: none; border: none; padding: 0.25rem; color: #6b7280; box-shadow: none; }
.btn-icon:hover:not(:disabled) { color: #111827; }

/*
=================================================================
  Forms & Misc Components
=================================================================
*/
.input-field {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}
.input-field:focus {
    outline: none;
    border-color: #4f46e5; /* focus:border-blue-500 */
    box-shadow: 0 0 0 1px #4f46e5; /* focus:ring-blue-500 */
}

.card {
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow-md */
    border: 1px solid #e5e7eb; /* border-gray-200 */
}

.feature-section {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid #e5e7eb;
}
.feature-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 1rem; /* mb-4 */
}

.bulk-action-toolbar {
    background-color: #eef2ff; /* bg-blue-50 */
    border: 1px solid #c7d2fe; /* border-blue-200 */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    margin-top: 1rem;
    margin-bottom: 1rem; /* my-4 */
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    display: none; /* Toggled by .visible */
    animation: fadeIn 0.3s ease-out;
}
.bulk-action-toolbar.visible {
    display: flex;
}

 .editable-field span {
    cursor: pointer;
    border-bottom: 1px dashed #9ca3af;
    padding-bottom: 1px;
    transition: all 0.2s;
 }
 .editable-field span:hover {
    border-color: #4f46e5;
    color: #4f46e5;
 }
 .editable-field input {
    display: none;
    border: 1px solid #4f46e5;
    padding: 1px 3px;
    font-size: inherit;
    width: auto;
    min-width: 100px;
 }

.page-fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* Fix for Availability Manager Calendar */
.flatpickr-day.date-blocked-in-picker {
    background-color: #e5e7eb; /* gray-200 */
    color: #9ca3af; /* gray-400 */
    border-color: #d1d5db; /* gray-300 */
    text-decoration: line-through;
}
.flatpickr-day.date-blocked-in-picker:hover {
    background-color: #d1d5db; /* gray-300 */
}
.flatpickr-day.date-blocked-in-picker.selected {
    background-color: #ef4444; /* red-500 */
    color: #ffffff;
    border-color: #ef4444;
}
/* --- NEW: Booking Table Sorting --- */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

th.sortable:hover {
    background-color: #f9fafb; /* gray-50 */
}

th.sortable .sort-icon {
    color: #9ca3af; /* gray-400 */
    font-size: 0.75em;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

th.sortable.sort-asc .sort-icon,
th.sortable.sort-desc .sort-icon {
    color: #374151; /* gray-700 */
}