/**
 * CardTable Mobile Cards CSS
 * FILE: assets/css/cardtable.css
 *
 * Responsive styling for table-to-card conversion with customizable breakpoints and card layouts.
 *
 * @package CardTable
 * @since   1.0.0
 */

/* ==========================================================================
   CSS Custom Properties & Variables
   ========================================================================== */

:root {
	/* Breakpoint (set dynamically via PHP) */
	--crdtbl-breakpoint: 768px;

	/* Card Spacing */
	--crdtbl-card-gap: 1rem;
	--crdtbl-card-padding: 1rem;
	--crdtbl-field-gap: 0.5rem;

	/* Colors */
	--crdtbl-border-color: #e1e5e9;
	--crdtbl-bg-primary: #ffffff;
	--crdtbl-bg-secondary: #f8f9fa;
	--crdtbl-text-primary: #2c3e50;
	--crdtbl-text-secondary: #6c757d;
	--crdtbl-accent-color: #3498db;

	/* Typography */
	--crdtbl-font-size-base: 1rem;
	--crdtbl-font-size-small: 0.875rem;
	--crdtbl-font-size-large: 1.125rem;
	--crdtbl-font-weight-normal: 400;
	--crdtbl-font-weight-medium: 500;
	--crdtbl-font-weight-bold: 600;

	/* Borders & Shadows */
	--crdtbl-border-radius: 0.375rem;
	--crdtbl-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--crdtbl-box-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* Animations */
	--crdtbl-transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   Container & Layout Structure
   ========================================================================== */

.crdtbl-container {
	position: relative;
	width: 100%;
	margin-bottom: var(--crdtbl-card-gap);
}

/* Default: Show table, hide cards on larger screens */
.crdtbl-table-wrapper {
	display: block;
}

.crdtbl-cards-wrapper {
	display: none;
}

/* Mobile: Hide table, show cards */
@media (max-width: 768px) {
	.crdtbl-table-wrapper {
		display: none;
	}

	.crdtbl-cards-wrapper {
		display: block;
	}
}

/* ==========================================================================
   Cards Container & Layout
   ========================================================================== */

.crdtbl-cards {
	display: flex;
	flex-direction: column;
	gap: var(--crdtbl-card-gap);
	width: 100%;
}

.crdtbl-cards-rows {
	/* Row-based cards (default) */
}

.crdtbl-cards-columns {
	/* Column-based cards */
	/* Future implementation */
}

/* ==========================================================================
   Individual Card Styling
   ========================================================================== */

.crdtbl-card {
	background-color: var(--crdtbl-bg-primary);
	border: 1px solid var(--crdtbl-border-color);
	border-radius: var(--crdtbl-border-radius);
	padding: var(--crdtbl-card-padding);
	box-shadow: var(--crdtbl-box-shadow);
	transition: var(--crdtbl-transition);
	overflow: hidden;
}

.crdtbl-card:hover {
	box-shadow: var(--crdtbl-box-shadow-hover);
	transform: translateY(-1px);
}

/* ==========================================================================
   Card Header (Featured Style)
   ========================================================================== */

.crdtbl-card-header {
	font-size: var(--crdtbl-font-size-large);
	font-weight: var(--crdtbl-font-weight-bold);
	color: var(--crdtbl-text-primary);
	margin-bottom: var(--crdtbl-card-gap);
	padding-bottom: calc(var(--crdtbl-field-gap) * 1.5);
	border-bottom: 2px solid var(--crdtbl-accent-color);
}

/* ==========================================================================
   Card Content Area
   ========================================================================== */

.crdtbl-card-content {
	display: flex;
	flex-direction: column;
	gap: var(--crdtbl-field-gap);
}

/* ==========================================================================
   Card Fields
   ========================================================================== */

.crdtbl-card-field {
	display: flex;
	align-items: flex-start;
	gap: var(--crdtbl-field-gap);
	line-height: 1.5;
}

.crdtbl-field-label {
	font-weight: var(--crdtbl-font-weight-medium);
	color: var(--crdtbl-text-secondary);
	font-size: var(--crdtbl-font-size-small);
	text-transform: uppercase;
	letter-spacing: 0.025em;
	flex-shrink: 0;
	min-width: 80px;
}

.crdtbl-field-content {
	color: var(--crdtbl-text-primary);
	font-size: var(--crdtbl-font-size-base);
	font-weight: var(--crdtbl-font-weight-normal);
	flex: 1;
	word-wrap: break-word;
}

.crdtbl-field-content a {
	color: var(--crdtbl-accent-color);
	text-decoration: none;
	transition: var(--crdtbl-transition);
}

.crdtbl-field-content a:hover {
	text-decoration: underline;
}

.crdtbl-field-content strong {
	font-weight: var(--crdtbl-font-weight-bold);
}

.crdtbl-field-content em {
	font-style: italic;
}

/* ==========================================================================
   Card Style Variants
   ========================================================================== */

/* Compact Style - Inline labels (default) */
.crdtbl-style-compact .crdtbl-card-field {
	flex-direction: row;
	align-items: center;
}

.crdtbl-style-compact .crdtbl-field-label::after {
	content: ":";
	margin-left: 2px;
}

/* Featured Style - Prominent header */
.crdtbl-style-featured .crdtbl-card {
	padding: calc(var(--crdtbl-card-padding) * 1.25);
}

.crdtbl-style-featured .crdtbl-card-field {
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--crdtbl-field-gap) * 0.5);
}

.crdtbl-style-featured .crdtbl-field-label {
	font-size: var(--crdtbl-font-size-small);
	margin-bottom: 2px;
}

.crdtbl-style-featured .crdtbl-field-content {
	font-size: var(--crdtbl-font-size-base);
	padding-left: 0;
}

/* List Style - No labels, simple layout */
.crdtbl-style-list .crdtbl-card {
	padding: calc(var(--crdtbl-card-padding) * 0.75);
	background-color: var(--crdtbl-bg-secondary);
}

.crdtbl-style-list .crdtbl-card-field {
	flex-direction: column;
}

.crdtbl-style-list .crdtbl-field-label {
	display: none;
}

.crdtbl-style-list .crdtbl-field-content {
	font-size: var(--crdtbl-font-size-base);
	text-align: center;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
	:root {
		--crdtbl-card-padding: 0.75rem;
		--crdtbl-card-gap: 0.75rem;
		--crdtbl-field-gap: 0.375rem;
	}

	.crdtbl-style-compact .crdtbl-card-field {
		flex-direction: column;
		align-items: flex-start;
	}

	.crdtbl-style-compact .crdtbl-field-label {
		min-width: auto;
		margin-bottom: 2px;
	}
}

/* ==========================================================================
   Accessibility & Focus States
   ========================================================================== */

.crdtbl-card:focus-within {
	outline: 2px solid var(--crdtbl-accent-color);
	outline-offset: 2px;
}

.crdtbl-field-content a:focus {
	outline: 2px solid var(--crdtbl-accent-color);
	outline-offset: 1px;
	border-radius: 2px;
}

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

@media print {
	.crdtbl-container {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.crdtbl-card {
		border: 1px solid #000;
		box-shadow: none;
		margin-bottom: 1rem;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.crdtbl-card:hover {
		transform: none;
		box-shadow: none;
	}

	.crdtbl-field-content a {
		color: inherit;
		text-decoration: underline;
	}
}

/* ==========================================================================
   Dark Mode Support (Respects prefers-color-scheme)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--crdtbl-border-color: #374151;
		--crdtbl-bg-primary: #1f2937;
		--crdtbl-bg-secondary: #111827;
		--crdtbl-text-primary: #f9fafb;
		--crdtbl-text-secondary: #d1d5db;
		--crdtbl-accent-color: #60a5fa;
	}

	.crdtbl-style-list .crdtbl-card {
		background-color: var(--crdtbl-bg-secondary);
	}
}

/* ==========================================================================
   Animation Preferences (Respects prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	:root {
		--crdtbl-transition: none;
	}

	.crdtbl-card:hover {
		transform: none;
	}
}

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

@media (prefers-contrast: high) {
	:root {
		--crdtbl-border-color: #000000;
		--crdtbl-bg-primary: #ffffff;
		--crdtbl-bg-secondary: #f0f0f0;
		--crdtbl-text-primary: #000000;
		--crdtbl-text-secondary: #333333;
		--crdtbl-accent-color: #0000ee;
	}

	.crdtbl-card {
		border-width: 2px;
	}
}

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

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