@import "tailwindcss";
@source "../../../Shared/UI";
@source "../../../Modules";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/aspect-ratio";

@theme {
	/* Breakpoints */
	--breakpoint-tablet: 780px;
	/* Primary: Ink (#0f0f0f) - warm black for text and primary actions */
	--color-primary: #0f0f0f;
	--color-primary-50: #faf9f6;
	--color-primary-100: #f5f2ec;
	--color-primary-200: #ede8df;
	--color-primary-300: #d5cfc3;
	--color-primary-400: #7a7568;
	--color-primary-500: #0f0f0f;
	--color-primary-600: #0a0a0a;
	--color-primary-700: #070707;
	--color-primary-800: #050505;
	--color-primary-900: #000000;
	/* Secondary: Accent Gold (#c8a96e) */
	--color-secondary: #c8a96e;
	--color-secondary-50: #fbf8f2;
	--color-secondary-100: #f5eddb;
	--color-secondary-500: #c8a96e;
	--color-secondary-600: #9e7a3f;
	--color-secondary-700: #7d5f2e;
	/* Named Design Tokens */
	--color-ink: #0f0f0f;
	--color-cream: #f5f2ec;
	--color-warm-white: #faf9f6;
	--color-muted: #7a7568;
	--color-accent: #c8a96e;
	--color-accent-dark: #9e7a3f;
	--color-border-subtle: rgba(15, 15, 15, 0.09);
	/* Danger: Red Scale */
	--color-danger-50: #fef2f2;
	--color-danger-100: #fee2e2;
	--color-danger-500: #ef4444;
	--color-danger-600: #dc2626;
	--color-danger-700: #b91c1c;
	--color-danger-800: #991b1b;
	--color-danger: var(--color-danger-600);
	/* Success: Green Scale */
	--color-success-50: #f0fdf4;
	--color-success-500: #22c55e;
	--color-success-600: #16a34a;
	--color-success: var(--color-success-600);
	/* Blue: #003969 based palette (lighter shades for readability) */
	--color-blue-50: #edf4fa;
	--color-blue-100: #d4e5f2;
	--color-blue-200: #a9cbe5;
	--color-blue-300: #7eb1d8;
	--color-blue-400: #5397cb;
	--color-blue-500: #2a7dbe;
	--color-blue-600: #165f96;
	--color-blue-700: #003969;
	--color-blue-800: #002d54;
	--color-blue-900: #001f3a;
	/* Info: Semantic alias for blue */
	--color-info-50: #edf4fa;
	--color-info-100: #d4e5f2;
	--color-info-200: #a9cbe5;
	--color-info-500: #2a7dbe;
	--color-info-600: #165f96;
	--color-info-700: #003969;
	--color-info-800: #002d54;
	/* Fonts: System stacks only (no external CDN) */
	--font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
	--spacing-30: 7.5rem; /* 120px */
	--spacing-40: 10rem; /* 160px */
}

@layer base {
	html {
		@apply scroll-smooth;
	}

	body {
		@apply bg-warm-white text-ink antialiased font-sans leading-relaxed;
	}

	button, [role="button"] {
		@apply cursor-pointer;
	}

	button:disabled {
		@apply cursor-not-allowed;
	}
}

@layer components {
	.btn-base {
		@apply inline-flex items-center justify-center gap-2 font-bold transition-all duration-200 rounded-full cursor-pointer active:scale-[0.98];
	}

	/* Shorthand: base + default medium size (use with color variant: btn btn-primary) */
	.btn {
		@apply inline-flex items-center justify-center gap-2 font-bold transition-all duration-200 rounded-full cursor-pointer active:scale-[0.98] px-5 py-2.5 text-sm;
	}

	/* Sizes */
	.btn-sm {
		@apply px-3 py-1.5 text-xs;
	}

	.btn-md {
		@apply px-5 py-2.5 text-sm;
	}

	.btn-lg {
		@apply px-8 py-4 text-base;
	}

	/* Navy Variant (Primary) */
	.btn-navy {
		@apply bg-primary text-cream shadow-sm hover:bg-primary-600 hover:shadow-md;
	}

	/* Gray Variant (Secondary) */
	.btn-gray {
		@apply bg-cream text-ink border border-border-subtle hover:bg-warm-white;
	}

	/* Accent Variant (Gold CTA) */
	.btn-accent {
		@apply bg-accent text-ink shadow-sm hover:bg-accent-dark hover:shadow-md;
	}

	/* Outline Variant */
	.btn-outline-navy {
		@apply border-2 border-primary text-primary hover:bg-primary/5;
	}

	/* Ghost Variant */
	.btn-ghost-navy {
		@apply text-primary hover:bg-primary/10;
	}

	/* Danger Variant */
	.btn-red {
		@apply bg-red-600 text-white hover:bg-red-700 shadow-sm;
	}

	/* Success Variant */
	.btn-green {
		@apply bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm;
	}

	/* Toolbar Variant (white bg, ring border) */
	.btn-toolbar {
		@apply bg-white text-gray-700 shadow-sm ring-1 ring-gray-200 hover:bg-gray-50;
	}

	.btn-unstyled {
		/* No colors, padding, or decorations — inherits only btn-base layout */
	}

	/* Conventional color aliases (for inline HTML usage) */
	.btn-primary {
		@apply bg-primary text-cream shadow-sm hover:bg-primary-600 hover:shadow-md;
	}

	.btn-outline {
		@apply border-2 border-primary text-primary hover:bg-primary/5;
	}

	.btn-full {
		@apply w-full;
	}

	/* Base utility for your layout container */
	.container-custom {
		@apply w-full max-w-7xl mx-auto px-6 flex items-center h-full;
	}

	/* Header component with height logic and frosted glass */
	.header-sticky {
		@apply sticky top-0 z-30 border-b border-border-subtle shadow-sm transition-all duration-300;
		background: rgba(245, 242, 236, 0.88);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		/* Mobile height */
		@apply h-16;
		/* Tablet/Desktop height (780px+) */
		@variant tablet {
			@apply h-[68px];
		}
		/* Target the container inside the header for specific layout needs */
		.container-custom {
			@apply flex justify-between;
			/* Ensures the container respects the parent height transitions */
			@apply h-full;
		}
	}

	.header-logo {
		@apply h-8 w-auto block object-contain aspect-auto;

		@variant tablet {
			@apply h-10;
		}
	}

	/* --- NAVIGATION --- */
	.nav-container {
		@apply hidden items-center gap-6 h-full;

		@variant tablet {
			@apply flex;
		}
	}

	.nav-link {
		@apply flex items-center gap-2 px-3 py-2 text-[14px] font-medium text-gray-600 transition-all duration-200 rounded-lg hover:text-primary hover:bg-gray-50;
	}

	.nav-link-active {
		@apply text-primary bg-primary-50;
	}

	.nav-link i {
		@apply text-base opacity-80;
	}

	.nav-link-mobile {
		@apply flex items-center gap-3 px-4 py-3 text-sm font-medium text-gray-700 hover:bg-primary-50 hover:text-primary rounded-xl transition-all;
	}

	.nav-link-mobile i {
		@apply w-8 text-primary opacity-80 text-base;
	}

	/* Active state for NavLink */
	.nav-link-mobile.active {
		@apply bg-primary-50 text-primary font-semibold;
	}

	.auth-container {
		@apply hidden items-center gap-3;

		@variant tablet {
			@apply flex;
		}
	}

	/* Specific styling for the user initials circle in the header */
	.bg-primary-circle {
		@apply h-8 w-8 rounded-full flex items-center justify-center text-cream text-xs font-bold shadow-sm bg-primary;
	}

	.dropdown-item {
		@apply flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors gap-2;
	}

	.dropdown-item i {
		@apply w-5 text-gray-400 text-center;
	}

	/* MOBILE BUTTON: Styled to match your Sign Up button */
	.mobile-menu-button {
		@apply inline-flex items-center justify-center gap-2 px-5 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-600 transition-all active:scale-95 cursor-pointer;

		@variant tablet {
			@apply hidden; /* Hides at 780px */
		}
	}

	/* Menu Active States - Forces visibility when class is applied to body */
	.mobile-menu-open #mobile-menu {
		@apply translate-x-0 !flex !visible;
	}

	.mobile-menu-open #mobile-menu-backdrop {
		@apply opacity-100 !block !visible;
	}

	/* Full-width Primary Header */
	.page-header-primary {
		@apply bg-cream text-ink py-12 px-6 rounded-2xl;
	}

	/* Light variant for internal dashboards */
	.page-header-light {
		@apply bg-warm-white text-ink py-10 px-6 border-b border-border-subtle;
	}

	/* Card variant for admin list pages */
	.page-header-card {
		@apply bg-white rounded-2xl border border-border-subtle shadow-sm py-5 px-6;
	}

	.page-header-container {
		@apply max-w-7xl mx-auto w-full;
	}

	.heading-xl {
		@apply text-3xl md:text-4xl font-extrabold tracking-tight font-serif;
	}

	.subheading {
		@apply mt-3 text-lg opacity-90 max-w-2xl mx-auto;
	}

	/* Search Input within Header */
	.search-wrapper {
		@apply relative mt-8;
	}

	.search-input {
		@apply w-full py-4 pl-12 pr-4 bg-warm-white border border-border-subtle rounded-2xl text-ink placeholder:text-muted focus:bg-white focus:border-accent focus:ring-1 focus:ring-accent/20 focus:outline-none transition-all;
	}

	.page-header-light .search-input {
		@apply bg-white border-gray-300 text-gray-900 placeholder:text-gray-400;
	}

	.search-icon {
		@apply absolute left-4 top-1/2 -translate-y-1/2 text-xl opacity-60;
	}
	/* Standard Vertical Padding for all sections */
	.section-py {
		@apply py-12 md:py-20 lg:py-24;
	}

	/* Gradient for CTA Sections */
	.bg-navy-gradient {
		@apply bg-linear-to-br from-primary to-primary-600;
	}

	/* Stats Section specific tweaks (if needed) */
	.stats-section {
		@apply border-y border-white/10;
	}
	/* --- CARDS --- */
	.card-base {
		@apply bg-white rounded-2xl overflow-hidden transition-all duration-300;
	}

	.card-standard {
		@apply border border-border-subtle shadow-sm;
		@apply p-6;
	}

	.card-large {
		@apply border border-border-subtle shadow-md;
		@apply p-8 md:p-10;
	}

	.card-spacious {
		@apply border border-border-subtle shadow-lg;
		@apply p-10 md:p-16;
	}

	.card-hover-effect {
		@apply hover:shadow-xl hover:-translate-y-[5px] hover:border-primary-200;
	}

	/* --- SECTION CARD (used by Section.razor) --- */
	.section-card {
		@apply max-w-7xl mx-auto bg-white rounded-2xl shadow-sm overflow-hidden p-8 md:p-12 lg:p-14;
	}

	/* --- RESPONSIVE GRIDS --- */
	.grid-2-col {
		@apply grid grid-cols-1 lg:grid-cols-2;
	}

	.grid-3-col {
		@apply grid grid-cols-1 md:grid-cols-3;
	}

	.grid-4-col {
		@apply grid grid-cols-2 lg:grid-cols-4;
	}

	/* --- SECTION HEADINGS --- */
	.section-heading {
		@apply text-3xl font-bold text-gray-900 font-serif;
	}

	.section-subheading {
		@apply text-gray-500 mt-3 text-lg;
	}

	/* --- FORMS --- */

	/* Form card: wraps an entire form in a card with shadow */
	.form-card {
		@apply bg-white rounded-2xl border border-gray-100 shadow-sm p-8 md:p-10;
	}

	/* Compact form card (sidebar, modals) */
	.form-card-sm {
		@apply bg-white rounded-2xl border border-gray-100 shadow-sm p-6;
	}

	/* Form spacing: vertical gap between form fields */
	.form-body {
		@apply space-y-5;
	}

	/* Individual form field wrapper */
	.form-group {
		@apply space-y-1.5 py-1.5;
	}

	.form-label {
		@apply block text-[0.72rem] font-medium text-muted uppercase tracking-[0.15em];
	}

	/* Base input (text, email, tel, select, textarea) */
	.input {
		@apply w-full px-4 py-3 border-[1.5px] border-border-subtle rounded-lg text-sm bg-warm-white transition-all focus:border-accent focus:ring-2 focus:ring-accent/10 focus:outline-none placeholder:text-muted;
	}

	/* Textarea modifier */
	.input.textarea {
		@apply resize-none;
	}

	/* 2-column form row */
	.form-row-2 {
		@apply grid grid-cols-1 sm:grid-cols-2 gap-4;
	}

	/* 3-column form row */
	.form-row-3 {
		@apply grid grid-cols-1 sm:grid-cols-3 gap-4;
	}

	/* Form section divider (group related fields) */
	.form-section {
		@apply pt-6 mt-6 border-t border-gray-100;
	}

	/* Form section heading */
	.form-section-title {
		@apply text-lg font-semibold text-gray-900 mb-4;
	}

	/* Validation error */
	.form-danger {
		@apply text-xs text-red-600 mt-1;
	}

	/* Form footer (submit button area, aligned right or full-width) */
	.form-footer {
		@apply pt-6 mt-2 border-t border-gray-100 flex items-center justify-end gap-3;
	}

	.form-footer-full {
		@apply pt-6 mt-2;
	}

	/* --- LINKS --- */
	.link {
		@apply text-primary font-medium hover:underline transition-colors;
	}

	/* --- ALERTS --- */
	.alert {
		@apply p-4 rounded-xl text-sm flex items-center gap-3 mb-4;
	}

	.alert-danger {
		@apply bg-red-50 text-red-700 border border-red-100;
	}

	.alert-success {
		@apply bg-green-50 text-green-700 border border-green-100;
	}

	.alert-info {
		@apply bg-blue-50 text-blue-700 border border-blue-100;
	}

	.alert-warning {
		@apply bg-amber-50 text-amber-700 border border-amber-100;
	}

	/* --- BADGES --- */
	.badge {
		@apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold;
	}

	.badge-primary {
		@apply bg-accent/15 text-accent-dark;
	}

	.badge-success {
		@apply bg-green-50 text-green-700;
	}

	.badge-gray {
		@apply bg-gray-200 text-gray-700;
	}

	.badge-pending {
		@apply bg-accent/15 text-accent-dark;
	}

	.badge-inactive {
		@apply bg-gray-200 text-gray-700;
	}

	/* --- AUTH LAYOUT --- */
	.auth-header {
		@apply text-center mb-8;
	}

	.auth-title {
		@apply text-3xl font-extrabold text-gray-900 font-serif tracking-tight;
	}

	.auth-subtitle {
		@apply text-gray-500 mt-3 text-base;
	}

	.auth-footer {
		@apply text-center text-sm text-gray-500 mt-6 pt-6 border-t border-gray-100;
	}

	.auth-remember-row {
		@apply flex items-center justify-between mb-6;
	}

	.auth-remember-label {
		@apply flex items-center gap-2;
	}

	.auth-checkbox {
		@apply w-4 h-4 rounded border-gray-300 accent-primary;
	}

	.auth-checkbox-text {
		@apply text-sm text-gray-600;
	}

	/* --- TOGGLE SWITCH --- */
	.toggle-switch-track {
		@apply w-11 h-6 bg-gray-200 rounded-full relative transition-colors duration-200;
	}
	.toggle-switch-track::after {
		@apply content-[''] absolute top-[2px] left-[2px] w-5 h-5 bg-white border border-gray-300 rounded-full transition-transform duration-200;
	}
	.peer:checked ~ .toggle-switch-track {
		@apply bg-accent;
	}
	.peer:checked ~ .toggle-switch-track::after {
		@apply translate-x-full border-white;
	}
	.peer:focus ~ .toggle-switch-track {
		@apply ring-4 ring-accent/30;
	}
	.peer:disabled ~ .toggle-switch-track {
		@apply opacity-50 cursor-not-allowed;
	}

	/* --- STRUCTURED CARD (with header/body sections) --- */
	.card {
		@apply bg-white rounded-2xl border border-border-subtle shadow-sm overflow-hidden;
	}

	.card-header {
		@apply px-6 py-4 border-b border-border-subtle bg-cream;
	}

	.card-title {
		@apply text-lg font-semibold text-gray-900;
	}

	/* Standalone hoverable card (stats, summaries) */
	.card-hover {
		@apply bg-white rounded-2xl overflow-hidden transition-all duration-300 border border-border-subtle shadow-sm p-6 hover:shadow-lg hover:-translate-y-[5px];
	}

	/* --- FAQ ACCORDION --- */
	.faq-item {
		@apply border border-gray-100 rounded-xl overflow-hidden;
	}

	.faq-summary {
		@apply flex items-center justify-between w-full px-6 py-4 cursor-pointer font-semibold text-gray-900 hover:bg-gray-50 transition-colors list-none;
	}

	.faq-summary-icon {
		@apply text-gray-400 text-sm transition-transform duration-200;
	}

	.faq-item[open] .faq-summary-icon {
		@apply rotate-180;
	}

	.faq-content {
		@apply px-6 pb-6 text-gray-600 text-sm leading-relaxed space-y-3;
	}

	/* --- DATATABLE --- */

	/* Toolbar: row containing search + action buttons */
	.datatable-toolbar {
		@apply flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between;
	}

	/* Toolbar actions: stacks on mobile, row on sm+ */
	.datatable-toolbar-actions {
		@apply flex flex-col gap-3 w-full sm:flex-row sm:items-center sm:gap-4 lg:flex-1 lg:justify-end;
	}

	/* Search wrapper: full width on mobile, flex on sm+ */
	.datatable-toolbar-search {
		@apply relative w-full sm:flex-1 sm:min-w-0 lg:max-w-md;
	}

	/* Action button group: Columns, Export, ToolbarExtra */
	.datatable-toolbar-buttons {
		@apply flex items-center gap-1.5 shrink-0 rounded-xl bg-gray-50 p-1 ring-1 ring-gray-200 sm:gap-2 sm:p-1.5;
	}

	/* Compact toolbar buttons on mobile */
	.datatable-toolbar-buttons .btn-md {
		@apply px-2.5 py-1.5 text-[11px] sm:px-5 sm:py-2.5 sm:text-sm;
	}

	.datatable-toolbar-buttons .btn-sm {
		@apply px-2.5 py-1.5 text-[11px] sm:px-3 sm:py-1.5 sm:text-xs;
	}

	/* Filter input inside column headers */
	.datatable-filter-input {
		@apply w-full rounded-lg border border-border-subtle bg-warm-white py-2 px-3 text-xs text-ink focus:ring-2 focus:ring-accent focus:border-accent transition-all;
	}

	/* Table cell padding */
	.datatable-cell {
		@apply whitespace-nowrap px-6 py-6 text-sm;
	}

	/* Footer with pagination */
	.datatable-footer {
		@apply flex items-center justify-between bg-cream px-8 py-7 border-t border-border-subtle;
	}

	/* Action icon buttons in table rows */
	.datatable-action-btn {
		@apply relative inline-flex items-center justify-center h-8 w-8 rounded-lg text-gray-400 transition-all duration-150 cursor-pointer;
	}

	.datatable-action-btn:hover {
		@apply text-accent bg-accent/10;
	}

	.datatable-action-btn-danger:hover {
		@apply text-danger bg-danger-50;
	}

	/* Popover tooltip for action buttons */
	.datatable-action-btn[title]::after {
		@apply content-[attr(title)] absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded-md whitespace-nowrap opacity-0 invisible pointer-events-none transition-all duration-200 z-50;
	}

	.datatable-action-btn[title]::before {
		@apply content-[''] absolute bottom-full left-1/2 -translate-x-1/2 mb-0.5 border-4 border-transparent border-t-gray-900 opacity-0 invisible pointer-events-none transition-all duration-200 z-50;
	}

	.datatable-action-btn[title]:hover::after,
	.datatable-action-btn[title]:hover::before {
		@apply opacity-100 visible;
	}

	/* Search input with icon */
	.datatable-search-input {
		@apply w-full rounded-xl border-0 bg-cream py-3 pl-11 pr-4 text-sm text-ink ring-1 ring-inset ring-border-subtle focus:ring-2 focus:ring-inset focus:ring-accent transition-all;
	}

	.datatable-search-icon {
		@apply pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5;
	}

	/* --- COLUMN SELECTOR MODAL --- */

	.column-selector-summary {
		@apply flex items-center justify-between rounded-lg bg-cream px-4 py-3;
	}

	.column-selector-group {
		@apply rounded-xl border border-border-subtle overflow-hidden;
	}

	.column-selector-group-header {
		@apply flex items-center justify-between bg-cream px-5 py-3 border-b border-border-subtle;
	}

	.column-selector-item {
		@apply flex items-start gap-4 px-5 py-3.5 cursor-pointer transition-colors;
	}

	.column-selector-item:hover {
		@apply bg-blue-50/50;
	}

	.column-selector-item-required {
		@apply bg-gray-50/50;
	}

	.column-selector-badge-required {
		@apply inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 ring-1 ring-inset ring-blue-600/20;
	}

	/* Custom scrollbar for the table and dropdowns (pseudo-elements require raw CSS) */
	.custom-scrollbar::-webkit-scrollbar {
		@apply w-1.5 h-1.5;
	}

	.custom-scrollbar::-webkit-scrollbar-track {
		@apply bg-transparent;
	}

	.custom-scrollbar::-webkit-scrollbar-thumb {
		@apply bg-gray-200 rounded-[10px];
	}

	.custom-scrollbar::-webkit-scrollbar-thumb:hover {
		@apply bg-gray-300;
	}

	/* Ensure table headers stay on top and look distinct */
	table thead th {
		@apply bg-cream text-ink uppercase tracking-wide text-xs font-semibold whitespace-nowrap;
	}

	/* Responsive fixes for inputs */
	input:focus {
		@apply !outline-none;
	}

	/* Smooth transitions for hover states */
	tr {
		@apply transition-colors duration-150 ease-in-out;
	}

	/* --- SIDEBAR --- */
	.sidebar {
		@apply fixed left-0 top-0 h-screen w-60 bg-cream border-r border-border-subtle flex-col z-20 overflow-y-auto transition-all duration-300;
	}

	/* Collapsed sidebar: icons only */
	.sidebar.sidebar-collapsed {
		@apply w-16;
	}

	.sidebar.sidebar-collapsed .sidebar-nav-label,
	.sidebar.sidebar-collapsed .sidebar-nav-item span,
	.sidebar.sidebar-collapsed .sidebar-nav-sub-item span,
	.sidebar.sidebar-collapsed .sidebar-user-info,
	.sidebar.sidebar-collapsed .sidebar-logo-text,
	.sidebar.sidebar-collapsed .sidebar-logo-full,
	.sidebar.sidebar-collapsed .sidebar-signout-text {
		@apply hidden;
	}

	.sidebar.sidebar-collapsed .sidebar-logo-collapsed {
		@apply flex;
	}

	.sidebar.sidebar-collapsed .sidebar-nav-item {
		@apply justify-center px-0;
	}

	.sidebar.sidebar-collapsed .sidebar-nav-sub-item {
		@apply hidden;
	}

	.sidebar.sidebar-collapsed .sidebar-logo {
		@apply px-3 flex flex-col items-center justify-center gap-2;
	}

	.sidebar.sidebar-collapsed .sidebar-user {
		@apply px-2 flex flex-col items-center;
	}

	.sidebar.sidebar-collapsed .sidebar-signout {
		@apply mt-2 flex justify-center;
	}

	.sidebar.sidebar-collapsed .sidebar-signout button {
		@apply justify-center;
	}

	.sidebar-logo {
		@apply px-6 py-5 border-b border-border-subtle flex items-center justify-between;
	}

	.sidebar-logo-collapsed {
		@apply hidden;
	}

	.sidebar-collapse-btn {
		@apply p-1.5 rounded-lg text-muted hover:text-ink hover:bg-warm-white transition-all cursor-pointer;
	}

	.sidebar-nav-section {
		@apply px-4 py-3 border-b border-border-subtle;
	}

	.sidebar-nav-label {
		@apply text-[0.65rem] font-semibold text-muted uppercase tracking-[0.15em] px-3 mb-1;
	}

	.sidebar-nav-item {
		@apply flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-muted rounded-lg transition-all duration-200 border-l-[3px] border-transparent hover:text-ink hover:bg-warm-white no-underline;
	}

	.sidebar-nav-sub-item {
		@apply flex items-center gap-3 pl-11 pr-3 py-2 text-[13px] font-medium text-muted rounded-lg transition-all duration-200 border-l-[3px] border-transparent hover:text-ink hover:bg-warm-white no-underline;
	}

	.sidebar-nav-item-active {
		@apply border-l-[3px] !border-accent bg-accent/8 !text-ink font-semibold;
	}

	.sidebar-user {
		@apply mt-auto px-5 py-4 border-t border-border-subtle;
	}

	/* Sidebar mobile top bar offset for main content */
	.sidebar-mobile-offset {
		@apply pt-14;
	}

	/* Sidebar open states for mobile */
	.sidebar-open #sidebar-backdrop {
		@apply !opacity-100 !block;
	}

	.sidebar-open #sidebar-mobile {
		@apply !translate-x-0 !flex;
	}

	/* --- FOOTER --- */
	.footer {
		@apply bg-cream text-ink border-t border-border-subtle mt-auto;
	}

	.footer-brand {
		@apply flex flex-col items-start gap-5;
	}

	.footer-logo {
		@apply h-10 w-auto block aspect-auto;
	}

	.footer-container {
		@apply max-w-5xl mx-auto px-3 py-6;
	}

	.footer-grid {
		@apply grid grid-cols-1 gap-16;

		@variant md {
			@apply gap-8 grid-cols-[2.5fr_1fr_1fr_1fr];
		}
	}

	.footer-social-link {
		@apply inline-flex items-center justify-center w-7 h-7 rounded-full bg-ink/10 text-ink transition-all hover:bg-ink/20 hover:text-ink;
	}

		.footer-social-link i {
			@apply text-[12px];
		}

	.footer-link {
		@apply text-sm text-muted no-underline transition-colors hover:text-ink;
	}

	.footer-simple {
		@apply border-t border-border-subtle pt-8 mb-4 w-full;
	}

	/* --- MODAL --- */
	.modal-overlay {
		@apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4;
	}

	.modal-container {
		@apply bg-white rounded-xl shadow-xl max-h-[90vh] overflow-y-auto w-full;
	}

	.modal-sm { @apply max-w-sm; }
	.modal-md { @apply max-w-lg; }
	.modal-lg { @apply max-w-3xl; }

	.modal-header {
		@apply flex items-center justify-between px-6 py-5 border-b border-gray-200;
	}

	.modal-body {
		@apply p-6;
	}

	.modal-footer {
		@apply px-6 py-4 border-t border-gray-200;
	}

	/* --- TOAST --- */
	.toast-container {
		@apply fixed top-4 right-4 z-[60] flex flex-col gap-2 max-w-sm;
	}

	.toast {
		@apply flex items-center justify-between px-4 py-3 rounded-lg shadow-md animate-[toast-slide-in_0.3s_ease-out];
	}

	.toast-success {
		@apply bg-green-50 text-green-800 border border-green-200;
	}

	.toast-error {
		@apply bg-red-50 text-red-800 border border-red-200;
	}

	.toast-warning {
		@apply bg-amber-50 text-amber-800 border border-amber-200;
	}

	.toast-info {
		@apply bg-blue-50 text-blue-800 border border-blue-200;
	}

	@keyframes toast-slide-in {
		from { transform: translateX(100%); opacity: 0; }
		to { transform: translateX(0); opacity: 1; }
	}

}

@layer utilities {

	.text-gradient {
		@apply bg-clip-text text-transparent bg-gradient-to-r from-ink to-accent;
	}

	/* Alternating card colors: even cards get cream bg when parent bg is white */
	.cards-alt > :nth-child(even) {
		@apply !bg-cream;
	}
}