/* Feminine, modern palette - Mobile First Design */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;600&display=swap');

:root {
	--accent: #667eea;
	--accent-dark: #764ba2;
	--muted: #e9e4f7;
	--card-bg: #ffffff;
	--spacing-xs: 0.5rem;
	--spacing-sm: 0.75rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
}

/* Base styles - Mobile First */
* {
	box-sizing: border-box;
}

body {
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: linear-gradient(180deg, #f3f0ff 0%, #fff 100%);
	color: #3b3b3b;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Navigation - Mobile Optimized */
.navbar {
	background: linear-gradient(90deg, var(--accent), var(--accent-dark));
	padding: var(--spacing-sm) 0;
}

.navbar .navbar-brand {
	font-family: 'Playfair Display', serif;
	color: white;
	font-weight: 700;
	font-size: 1.5rem;
}

.navbar-nav .nav-link {
	color: white !important;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: 1rem;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.navbar-toggler {
	border-color: rgba(255, 255, 255, 0.5);
	padding: 0.5rem;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Cards - Mobile Optimized */
.card {
	border: none;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(102, 126, 234, 0.08);
	margin-bottom: var(--spacing-md);
}

.card-body {
	padding: var(--spacing-md);
}

.card-title {
	font-size: 1.1rem;
	margin-bottom: var(--spacing-sm);
}

/* Buttons - Touch Friendly */
.btn {
	min-height: 44px;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: 1rem;
	border-radius: 8px;
	font-weight: 500;
	touch-action: manipulation;
}

.btn-primary {
	background: var(--accent-dark);
	border: none;
}

.btn-primary:hover,
.btn-primary:focus {
	background: #c94567;
}

.btn-outline-secondary {
	border-color: var(--accent-dark);
	color: var(--accent-dark);
}

.btn-sm {
	min-height: 36px;
	padding: 0.375rem 0.75rem;
	font-size: 0.9rem;
}

/* Badges */
.badge-success,
.bg-success {
	background: #a6e6b8 !important;
	color: #1e5631;
}

.badge-danger,
.bg-danger {
	background: #f5b7c1 !important;
	color: #8b1e3f;
}

/* List Groups */
.list-group-item {
	border-radius: 8px;
	margin-bottom: var(--spacing-sm);
	padding: var(--spacing-md);
	font-size: 0.95rem;
}

/* Tables - Mobile Responsive */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table {
	font-size: 0.9rem;
	margin-bottom: var(--spacing-lg);
}

.table th {
	font-weight: 600;
	white-space: nowrap;
	padding: var(--spacing-sm);
}

.table td {
	padding: var(--spacing-sm);
	vertical-align: middle;
}

/* Mobile Table Cards - Hide table on small screens */
@media (max-width: 767px) {
	.table-mobile-cards {
		display: none;
	}

	.mobile-card-view {
		display: block;
	}

	.mobile-card {
		background: white;
		border-radius: 12px;
		padding: var(--spacing-md);
		margin-bottom: var(--spacing-md);
		box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
	}

	.mobile-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--spacing-sm);
		padding-bottom: var(--spacing-sm);
		border-bottom: 1px solid var(--muted);
	}

	.mobile-card-title {
		font-weight: 600;
		font-size: 1.1rem;
		color: var(--accent-dark);
	}

	.mobile-card-body {
		margin-bottom: var(--spacing-sm);
	}

	.mobile-card-row {
		display: flex;
		justify-content: space-between;
		padding: 0.4rem 0;
		font-size: 0.95rem;
	}

	.mobile-card-label {
		font-weight: 500;
		color: #666;
	}

	.mobile-card-value {
		text-align: right;
		font-weight: 400;
	}

	.mobile-card-actions {
		display: flex;
		gap: var(--spacing-sm);
		flex-wrap: wrap;
		margin-top: var(--spacing-sm);
		padding-top: var(--spacing-sm);
		border-top: 1px solid var(--muted);
	}

	.mobile-card-actions .btn {
		flex: 1;
		min-width: 100px;
	}
}

@media (min-width: 768px) {
	.mobile-card-view {
		display: none;
	}

	.table-mobile-cards {
		display: table;
	}
}

/* Forms - Mobile Optimized */
.form-control,
.form-select {
	min-height: 44px;
	font-size: 1rem;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: 8px;
	border: 1px solid #ddd;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 0.2rem rgba(244, 159, 177, 0.25);
}

.form-label {
	font-weight: 500;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

textarea.form-control {
	min-height: 100px;
}

.business-card-file-input {
	padding: 0.35rem 0.5rem;
	min-height: 44px;
	line-height: 1.3;
}

.business-card-file-input::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.6rem 1rem;
	border: none;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--accent), var(--accent-dark));
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.business-card-file-input::-webkit-file-upload-button {
	margin-right: 0.75rem;
	padding: 0.6rem 1rem;
	border: none;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--accent), var(--accent-dark));
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

/* Container spacing */
.container {
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

/* Alerts */
.alert {
	border-radius: 8px;
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

/* Headings */
h3,
h4,
h5 {
	margin-bottom: var(--spacing-md);
	font-weight: 600;
}

h3 {
	font-size: 1.5rem;
}

/* Action buttons container */
.d-flex.justify-content-between {
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

/* Dashboard specific */
.dashboard-stats {
	margin-bottom: var(--spacing-lg);
}

/* Responsive utilities */
@media (max-width: 575px) {
	.btn-group-mobile {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.btn-group-mobile .btn {
		width: 100%;
	}

	h3 {
		font-size: 1.3rem;
	}

	.card-body {
		padding: var(--spacing-sm);
	}
}

/* Tablet and up */
@media (min-width: 768px) {
	.container {
		padding-left: var(--spacing-lg);
		padding-right: var(--spacing-lg);
	}

	.card-body {
		padding: var(--spacing-lg);
	}

	h3 {
		font-size: 1.75rem;
	}
}

/* Desktop */
@media (min-width: 992px) {
	body {
		font-size: 16px;
	}

	.navbar-nav .nav-link {
		padding: 0.5rem 1rem;
	}
}

/* Accessibility improvements */
a:focus,
button:focus,
.btn:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Loading states */
.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* WhatsApp link styling */
a[href^="https://wa.me"] {
	color: #25D366;
	text-decoration: none;
	font-weight: 500;
}

a[href^="https://wa.me"]:hover {
	text-decoration: underline;
}