/**
 * Responsive Design Improvements
 *
 * Additional responsive fixes and improvements for consultation system.
 * Ensures consistent mobile/tablet/desktop experience.
 *
 * Sprint 40 - Phase 40.2.1
 *
 * @package     UltimateLearning
 * @subpackage  Assets\CSS
 * @since       1.19.0
 */

/* ==========================================================================
   Breakpoints Strategy
   ========================================================================== */
/*
 * Mobile:  320px - 767px
 * Tablet:  768px - 1023px
 * Desktop: 1024px+
 */

/* ==========================================================================
   Global Typography Adjustments
   ========================================================================== */

@media (max-width: 767px) {
	/* Reduce heading sizes on mobile */
	h1, .vl-page-title {
		font-size: 1.75rem !important;
		line-height: 1.3;
	}

	h2 {
		font-size: 1.5rem !important;
		line-height: 1.3;
	}

	h3 {
		font-size: 1.25rem !important;
		line-height: 1.4;
	}

	/* Adjust body text */
	body, p {
		font-size: 0.95rem;
		line-height: 1.6;
	}
}

/* ==========================================================================
   Consultation Wizard Improvements
   ========================================================================== */

@media (max-width: 767px) {
	/* Wizard header */
	.vl-wizard-header {
		padding: 12px 16px;
	}

	.vl-wizard-steps {
		flex-wrap: wrap;
		justify-content: center;
	}

	.vl-wizard-step {
		min-width: 60px;
		padding: 8px 4px;
	}

	.vl-wizard-step-label {
		font-size: 0.75rem;
		display: none; /* Hide labels on very small screens */
	}

	.vl-wizard-step-number {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	/* Wizard content */
	.vl-wizard-content {
		padding: 16px 12px;
	}

	.vl-wizard-step-header h2 {
		font-size: 1.25rem;
		margin-bottom: 8px;
	}

	.vl-wizard-step-header p {
		font-size: 0.9rem;
	}

	/* Form fields */
	.vl-form-field {
		margin-bottom: 20px;
	}

	.vl-form-label {
		font-size: 0.9rem;
		margin-bottom: 6px;
	}

	.vl-input,
	.vl-textarea,
	.vl-select {
		font-size: 16px; /* Prevent iOS zoom on focus */
	}

	/* Radio cards */
	.vl-radio-cards {
		gap: 12px;
	}

	.vl-radio-card {
		padding: 12px 16px;
	}

	.vl-radio-card-content strong {
		font-size: 0.95rem;
	}

	.vl-radio-card-content p {
		font-size: 0.85rem;
	}

	/* Wizard footer */
	.vl-wizard-footer {
		flex-direction: column;
		gap: 12px;
		padding: 16px;
	}

	.vl-wizard-footer-actions {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}

	.vl-wizard-footer button {
		width: 100%;
		justify-content: center;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet: Show abbreviated labels */
	.vl-wizard-step-label {
		font-size: 0.8rem;
	}
}

/* ==========================================================================
   Slot Picker Improvements
   ========================================================================== */

@media (max-width: 767px) {
	.vl-consultation-slot-selection {
		padding: 16px;
		margin: 16px 0;
	}

	.vl-consultation-slot-selection h3 {
		font-size: 1.1rem;
	}

	.vl-slot-description {
		font-size: 0.9rem;
	}

	/* Already has grid-template-columns: 1fr in slot-picker.css */
	.vl-slot-picker-container {
		gap: 16px;
	}

	/* Calendar dates */
	.vl-date-btn {
		padding: 10px 12px;
		font-size: 0.9rem;
	}

	/* Time slots */
	.vl-time-slots-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 6px;
	}

	.vl-time-slot {
		padding: 8px 10px;
		font-size: 0.85rem;
	}

	/* Selected display */
	.vl-selected-slot-display {
		padding: 12px;
	}

	.vl-selected-slot-text {
		font-size: 1rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet: Slightly reduce */
	.vl-time-slots-grid {
		grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	}
}

/* ==========================================================================
   Dashboard Improvements
   ========================================================================== */

@media (max-width: 767px) {
	/* Dashboard header */
	.vl-dashboard-header {
		padding: 16px;
	}

	.vl-dashboard-title {
		font-size: 1.5rem;
	}

	/* Stats cards */
	.vl-stats-grid {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}

	.vl-stat-card,
	.vl-stat-card-vertical {
		padding: 16px;
	}

	.vl-stat-value {
		font-size: 1.75rem;
	}

	.vl-stat-label {
		font-size: 0.85rem;
	}

	/* Tabs */
	.vl-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.vl-tabs-nav {
		flex-wrap: nowrap;
		min-width: min-content;
	}

	.vl-tab-button {
		white-space: nowrap;
		padding: 10px 16px;
		font-size: 0.9rem;
	}

	/* Tables */
	.vl-table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.vl-table {
		min-width: 600px; /* Force horizontal scroll */
	}

	.vl-table th,
	.vl-table td {
		padding: 8px 12px;
		font-size: 0.85rem;
	}
}

/* ==========================================================================
   Analytics Charts Improvements
   ========================================================================== */

@media (max-width: 767px) {
	.vl-chart-container {
		height: 250px !important; /* Reduce height on mobile */
	}

	.vl-charts-grid {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}

	.vl-chart-card {
		padding: 16px;
	}

	.vl-chart-title {
		font-size: 1rem;
	}

	/* Export buttons */
	.vl-export-buttons {
		flex-direction: column;
		gap: 8px;
	}

	.vl-export-buttons button {
		width: 100%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.vl-chart-container {
		height: 300px !important;
	}
}

/* ==========================================================================
   Modal/Dialog Improvements
   Sprint 64: Modal responsive styles moved to components/modals.css
   ========================================================================== */

/* ==========================================================================
   Form Improvements
   ========================================================================== */

@media (max-width: 767px) {
	/* Form sections */
	.vl-form-section {
		padding: 16px;
	}

	/* Form groups */
	.vl-form-group {
		margin-bottom: 16px;
	}

	/* Checkboxes/Radio labels */
	.vl-checkbox-label,
	.vl-radio-label {
		font-size: 0.9rem;
		line-height: 1.5;
	}

	/* Form help text */
	.vl-form-help {
		font-size: 0.85rem;
	}

	/* Form buttons */
	.vl-form-actions {
		flex-direction: column;
		gap: 12px;
	}

	.vl-form-actions button {
		width: 100%;
	}
}

/* ==========================================================================
   Buttons & Actions
   ========================================================================== */

@media (max-width: 767px) {
	/* Primary actions */
	.vl-btn-primary,
	.vl-btn-secondary {
		padding: 12px 20px;
		font-size: 0.95rem;
	}

	/* Icon buttons */
	.vl-btn-icon {
		padding: 8px;
	}

	/* Button groups */
	.vl-button-group {
		flex-direction: column;
		gap: 8px;
	}

	.vl-button-group button {
		width: 100%;
	}
}

/* ==========================================================================
   Navigation Improvements
   ========================================================================== */

@media (max-width: 767px) {
	/* Breadcrumbs */
	.vl-breadcrumbs {
		font-size: 0.85rem;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* Pagination */
	.vl-pagination {
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	.vl-pagination button {
		min-width: 36px;
		height: 36px;
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Cards & Lists
   ========================================================================== */

@media (max-width: 767px) {
	/* Cards */
	.vl-card {
		padding: 16px;
		margin-bottom: 12px;
	}

	.vl-card-header {
		padding: 12px;
	}

	.vl-card-body {
		padding: 12px;
	}

	.vl-card-footer {
		padding: 12px;
		flex-direction: column;
		gap: 8px;
	}

	/* List items */
	.vl-list-item {
		padding: 12px;
	}

	.vl-list-item-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.vl-list-item-actions {
		width: 100%;
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

@media (max-width: 767px) {
	/* Hide on mobile */
	.vl-hide-mobile {
		display: none !important;
	}

	/* Show only on mobile */
	.vl-show-mobile {
		display: block !important;
	}

	/* Text alignment */
	.vl-text-center-mobile {
		text-align: center !important;
	}

	/* Spacing */
	.vl-mt-mobile-0 {
		margin-top: 0 !important;
	}

	.vl-mb-mobile-2 {
		margin-bottom: 8px !important;
	}

	.vl-p-mobile-2 {
		padding: 8px !important;
	}
}

@media (min-width: 768px) {
	/* Hide on tablet/desktop */
	.vl-hide-desktop {
		display: none !important;
	}

	/* Show only on desktop */
	.vl-show-desktop {
		display: block !important;
	}
}

/* ==========================================================================
   Touch-Friendly Improvements
   ========================================================================== */

@media (max-width: 767px) {
	/* Increase tap targets to minimum 44x44px (iOS guideline) */
	.vl-btn,
	.vl-tab-button,
	.vl-date-btn,
	.vl-time-slot,
	button,
	a.vl-link {
		min-height: 44px;
		min-width: 44px;
	}

	/* Increase spacing between interactive elements */
	button + button,
	a + a {
		margin-left: 8px;
	}

	/* Better touch scrolling */
	.vl-scroll-container {
		-webkit-overflow-scrolling: touch;
		overflow-y: auto;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	/* Hide navigation and actions */
	.vl-wizard-header,
	.vl-wizard-footer,
	.vl-tabs-nav,
	.vl-btn,
	.vl-button-group {
		display: none !important;
	}

	/* Adjust layout */
	.vl-wizard-content,
	.vl-dashboard-content {
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Ensure readability */
	body {
		font-size: 12pt;
		line-height: 1.5;
		color: var(--vl-text-heading);
	}

	/* Page breaks */
	.vl-page-break {
		page-break-after: always;
	}

	.vl-no-break {
		page-break-inside: avoid;
	}
}

/* ============================================
 * ACCESSIBILITY IMPROVEMENTS
 * Merged from accessibility-improvements.css
 * ============================================ */
/* ==========================================================================
   Focus States - Enhanced Visibility
   ========================================================================== */

/**
 * Clear focus indicators for keyboard navigation.
 * WCAG 2.1 SC 2.4.7 (Focus Visible) - Level AA
 */

/* Default focus style for all interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[tabindex]:focus {
	outline: 3px solid var(--vl-primary) !important; /* Gold - Primary brand color */
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(81, 173, 190, 0.2) !important;
}

/* Focus-visible for modern browsers (only shows on keyboard focus) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--vl-primary) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(81, 173, 190, 0.2) !important;
}

/* Remove outline on mouse click (only for supporting browsers) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* Enhanced focus for buttons */
.vl-btn:focus,
.vl-btn-primary:focus,
.vl-btn-secondary:focus {
	outline: 3px solid var(--vl-primary) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(81, 173, 190, 0.3) !important;
}

/* Focus states for wizard steps */
.vl-wizard-step:focus {
	outline: 3px solid var(--vl-primary) !important;
	outline-offset: 2px !important;
	z-index: 10;
}

/* Focus states for slot picker */
.vl-date-btn:focus,
.vl-time-slot:focus {
	outline: 3px solid var(--vl-primary) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(81, 173, 190, 0.3) !important;
}

/* Focus states for tabs */
.vl-tab-button:focus {
	outline: 3px solid var(--vl-primary) !important;
	outline-offset: -2px !important; /* Inside outline for tabs */
	z-index: 10;
}

/* Focus states for radio cards */
.vl-radio-card:focus-within {
	outline: 3px solid var(--vl-primary) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(81, 173, 190, 0.2) !important;
}

/* Focus states for modal close buttons - Sprint 64: in components/modals.css */

/* ==========================================================================
   Skip Links - Keyboard Navigation
   ========================================================================== */

/**
 * Skip to main content link for keyboard users.
 * WCAG 2.1 SC 2.4.1 (Bypass Blocks) - Level A
 */

.vl-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 999999;
	padding: 12px 20px;
	background: var(--vl-primary);
	color: var(--vl-text-heading);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 4px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: top 0.2s ease;
}

.vl-skip-link:focus {
	top: 0;
	outline: 3px solid var(--vl-text-heading) !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   Screen Reader Only Content
   ========================================================================== */

/**
 * Visually hidden but accessible to screen readers.
 * WCAG 2.1 SC 1.3.1 (Info and Relationships) - Level A
 */

.vl-sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Allow screen reader text to be focusable when navigated to via keyboard */
.vl-sr-only:focus,
.screen-reader-text:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: inherit !important;
	margin: inherit !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}

/* ==========================================================================
   Contrast Improvements
   ========================================================================== */

/**
 * Enhanced contrast for better readability.
 * WCAG 2.1 SC 1.4.3 (Contrast Minimum) - Level AA
 * Normal text: 4.5:1 minimum
 * Large text (18pt+ or 14pt bold+): 3:1 minimum
 */

/* Ensure sufficient contrast for placeholder text */
input::placeholder,
textarea::placeholder {
	color: var(--vl-text-muted) !important; /* 4.5:1 contrast on white */
	opacity: 1 !important;
}

/* Enhanced contrast for disabled elements */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled,
.vl-btn:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	color: var(--vl-text-muted) !important; /* Maintain readable contrast */
}

/* Ensure links have sufficient contrast */
a {
	color: var(--vl-primary-hover); /* Terracotta - 4.63:1 contrast on white */
}

a:hover {
	color: var(--vl-text-heading); /* Dark brown - 13.59:1 contrast on white */
}

/* Enhanced contrast for secondary text */
.vl-text-secondary,
.vl-meta-info {
	color: var(--vl-text-muted) !important; /* 5.74:1 contrast on white */
}

/* Enhanced contrast for error messages */
.vl-error,
.vl-error-message {
	color: var(--vl-error) !important; /* Burgundy - 8.59:1 contrast on white */
}

/* Enhanced contrast for success messages */
.vl-success,
.vl-success-message {
	color: var(--vl-text-heading) !important; /* Dark brown for better readability */
}

/* Enhanced contrast for warning messages */
.vl-warning,
.vl-warning-message {
	color: var(--vl-primary-hover) !important; /* Terracotta - 4.63:1 contrast on white */
}

/* ==========================================================================
   Motion Preferences
   ========================================================================== */

/**
 * Respect user's motion preferences.
 * WCAG 2.1 SC 2.3.3 (Animation from Interactions) - Level AAA
 */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Touch Target Size
   ========================================================================== */

/**
 * Minimum touch target size for mobile devices.
 * WCAG 2.1 SC 2.5.5 (Target Size) - Level AAA (44x44px minimum)
 */

@media (max-width: 767px) {
	button,
	.vl-btn,
	.vl-tab-button,
	.vl-date-btn,
	.vl-time-slot,
	a.vl-link {
		min-width: 44px !important;
		min-height: 44px !important;
	}
}

/* ==========================================================================
   Keyboard Navigation Improvements
   ========================================================================== */

/**
 * Enhanced keyboard navigation support.
 * WCAG 2.1 SC 2.1.1 (Keyboard) - Level A
 */

/* Ensure all interactive elements are keyboard accessible */
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"] {
	cursor: pointer;
}

/* Add keyboard interaction hints */
/* Exclude Elementor video play buttons which need absolute positioning for centering */
[role="button"]:not([disabled]):not(.elementor-custom-embed-play):not(.elementor-video__play-button),
[role="tab"]:not([disabled]),
[role="menuitem"]:not([disabled]) {
	position: relative;
}

/* Focus trap for modals - Sprint 64: moved to components/modals.css */

/* ==========================================================================
   Form Label Association
   ========================================================================== */

/**
 * Ensure form labels are properly associated.
 * WCAG 2.1 SC 1.3.1 (Info and Relationships) - Level A
 * WCAG 2.1 SC 3.3.2 (Labels or Instructions) - Level A
 */

/* Required field indicator */
.vl-required::after {
	content: "*";
	color: var(--vl-error); /* Burgundy */
	margin-left: 4px;
	font-weight: 700;
}

/* Enhanced label visibility */
label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--vl-text-heading);
}

/* Ensure labels are visible even when floating */
.vl-form-floating label {
	z-index: 2;
}

/* ==========================================================================
   Error Identification
   ========================================================================== */

/**
 * Clear error identification and description.
 * WCAG 2.1 SC 3.3.1 (Error Identification) - Level A
 * WCAG 2.1 SC 3.3.3 (Error Suggestion) - Level AA
 */

/* Error states for inputs */
input.vl-error,
textarea.vl-error,
select.vl-error {
	border-color: var(--vl-error) !important; /* Burgundy */
	border-width: 2px !important;
	background-color: rgba(182, 0, 7, 0.05) !important;
}

input.vl-error:focus,
textarea.vl-error:focus,
select.vl-error:focus {
	outline: 3px solid var(--vl-error) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(182, 0, 7, 0.2) !important;
}

/* Error message styling */
.vl-field-error {
	display: block;
	margin-top: 6px;
	color: var(--vl-error) !important; /* Burgundy - 8.59:1 contrast */
	font-size: 0.9rem;
	font-weight: 500;
}

/* Error icon for screen readers */
.vl-field-error::before {
	content: "⚠ ";
	font-weight: 700;
	margin-right: 4px;
}

/* ==========================================================================
   Status Messages
   ========================================================================== */

/**
 * ARIA live regions for dynamic status updates.
 * WCAG 2.1 SC 4.1.3 (Status Messages) - Level AA
 */

.vl-status-message {
	position: relative;
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 16px;
}

.vl-status-message[role="status"],
.vl-status-message[role="alert"] {
	/* Announced by screen readers automatically */
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

/**
 * Support for Windows High Contrast Mode.
 * Ensures UI remains visible and functional.
 */

@media (prefers-contrast: high) {
	/* Ensure borders are visible */
	button,
	input,
	select,
	textarea {
		border: 2px solid currentColor !important;
	}

	/* Ensure focus states are visible */
	*:focus {
		outline: 3px solid currentColor !important;
		outline-offset: 3px !important;
	}
}

/* ==========================================================================
   Text Spacing
   ========================================================================== */

/**
 * Support user text spacing preferences.
 * WCAG 2.1 SC 1.4.12 (Text Spacing) - Level AA
 */

/* Allow text spacing adjustments without breaking layout */
.vl-wizard-content,
.vl-modal-body,
.vl-form-field,
.vl-card-body {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ==========================================================================
   Focus Order
   ========================================================================== */

/**
 * Logical focus order for complex components.
 * WCAG 2.1 SC 2.4.3 (Focus Order) - Level A
 */

/* Ensure wizard steps follow logical tab order */
.vl-wizard-steps {
	display: flex;
	flex-wrap: wrap;
}

.vl-wizard-step {
	order: var(--step-order, 0);
}

/* Modal focus order - Sprint 64: moved to components/modals.css */

/* ==========================================================================
   Reflow Support
   ========================================================================== */

/**
 * Support content reflow at 320px viewport.
 * WCAG 2.1 SC 1.4.10 (Reflow) - Level AA
 */

@media (max-width: 320px) {
	/* Prevent horizontal scrolling */
	.vl-wizard-content,
	.vl-slot-picker-container,
	.vl-dashboard-content {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Stack all content vertically */
	.vl-flex-row {
		flex-direction: column;
	}

	/* Reduce padding to fit content */
	.vl-card,
	.vl-modal-content {
		padding: 12px;
	}
}

/* ==========================================================================
   Pointer Gestures
   ========================================================================== */

/**
 * Support alternatives to complex gestures.
 * WCAG 2.1 SC 2.5.1 (Pointer Gestures) - Level A
 */

/* Drag-and-drop alternative: provide buttons */
.vl-sortable-item {
	position: relative;
}

.vl-move-up-btn,
.vl-move-down-btn {
	position: absolute;
	right: 8px;
	background: var(--vl-primary);
	border: none;
	padding: 6px 12px;
	cursor: pointer;
	border-radius: 4px;
	font-weight: 600;
	color: var(--vl-text-heading);
}

.vl-move-up-btn {
	top: 8px;
}

.vl-move-down-btn {
	bottom: 8px;
}

/* ==========================================================================
   Language Support
   ========================================================================== */

/**
 * Support for RTL languages and text direction.
 * WCAG 2.1 SC 1.3.2 (Meaningful Sequence) - Level A
 */

[dir="rtl"] .vl-wizard-steps {
	flex-direction: row-reverse;
}

[dir="rtl"] .vl-breadcrumbs {
	direction: rtl;
}

/* RTL modal close - Sprint 64: moved to components/modals.css */