/* Appointment Components Styles */

/* Appointment Item Component (converted to neutral palette; prefer Tailwind utilities inline if possible) */
.appointment-item {
	transition: all 0.2s ease-in-out;
	border-left: 4px solid transparent;
}

.appointment-item:hover {
	background-color: #f1f5f9; /* slate-100 */
	border-left-color: #2563eb; /* primary-600 */
	transform: translateX(2px);
}

.appointment-item[data-status="completed"] { border-left-color: #16a34a; /* success-600 */ }
.appointment-item[data-status="canceled"] { border-left-color: #dc2626; /* danger-600 */ opacity: 0.75; }
.appointment-item[data-status="no-show"] { border-left-color: #d97706; /* warning-600 */ }

.appointment-time {
	font-family: "Courier New", monospace;
	font-weight: 600;
}

/* Appointment action icon buttons now Tailwind classes in markup; keep only icon sizing */
.appointment-actions .action-icon-btn i { font-size: 0.75rem; }

/* Appointments Calendar Component */
.appointments-calendar .fc {
	font-size: 0.875rem;
}

.appointments-calendar .fc-event {
	font-size: 0.75rem;
	padding: 2px 4px;
	border-radius: 3px;
}

.appointments-calendar .fc-daygrid-event {
	margin: 1px 0;
}

.appointments-list {
	max-height: 500px;
	overflow-y: auto;
}

.appointments-list .list-group-item:hover {
	background-color: #f8f9fa;
}

.calendar-container {
	min-height: 500px;
}

/* Responsive Styles */
@media (max-width: 768px) {
	/* Responsive list height tweak */
	.appointments-list { max-height: 300px; }
}

/* (Removed legacy breakpoint overrides) */

/* Brand-styled checkboxes and radio buttons for recurrence form */
/* Override @tailwindcss/forms plugin styles */
input[type="checkbox"].brand-checkbox,
input[type="radio"].brand-radio {
	accent-color: var(--brand-primary, #0d9488);
	color: var(--brand-primary, #0d9488);
}

input[type="checkbox"].brand-checkbox:checked {
	background-color: var(--brand-primary, #0d9488) !important;
	border-color: var(--brand-primary, #0d9488) !important;
}

input[type="radio"].brand-radio:checked {
	background-color: var(--brand-primary, #0d9488) !important;
	border-color: var(--brand-primary, #0d9488) !important;
}

input[type="checkbox"].brand-checkbox:focus,
input[type="radio"].brand-radio:focus {
	--tw-ring-color: var(--brand-primary, #0d9488);
	border-color: var(--brand-primary, #0d9488);
	outline: none;
	box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}

/* Preview text with brand color */
.brand-text {
	color: var(--brand-primary, #0d9488);
}