@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

/* ============================================
   THEME COLOR SYSTEM
   ============================================
   Primary: Blue
   Secondary: Green
   Primary Accent: Orange
   Secondary Accent: Purple
   Alert/Error: Red
   Warning: Yellow
   Success: Green (distinct from secondary)
   ============================================ */

@theme {
	/* Primary - Blue (muted/professional) */
	--color-primary-50: #f0f6fc;
	--color-primary-100: #dbe8f7;
	--color-primary-200: #bdd4f0;
	--color-primary-300: #8fb8e5;
	--color-primary-400: #5a94d6;
	--color-primary-500: #3b78c4;
	--color-primary-600: #2d5fa6;
	--color-primary-700: #274d87;
	--color-primary-800: #254270;
	--color-primary-900: #23395e;
	--color-primary-950: #18253f;

	/* Secondary - Green (muted/professional) */
	--color-secondary-50: #f2f8f4;
	--color-secondary-100: #e0efe4;
	--color-secondary-200: #c3dfcc;
	--color-secondary-300: #96c7a6;
	--color-secondary-400: #65a97b;
	--color-secondary-500: #458c5e;
	--color-secondary-600: #33714a;
	--color-secondary-700: #2a5b3d;
	--color-secondary-800: #244933;
	--color-secondary-900: #1f3c2b;
	--color-secondary-950: #102118;

	/* Accent Primary - Orange (muted/professional) */
	--color-accent-50: #fdf6f0;
	--color-accent-100: #fbe9db;
	--color-accent-200: #f6d0b6;
	--color-accent-300: #f0b088;
	--color-accent-400: #e88958;
	--color-accent-500: #e16a36;
	--color-accent-600: #d2522b;
	--color-accent-700: #ae3f26;
	--color-accent-800: #8b3425;
	--color-accent-900: #712e22;
	--color-accent-950: #3d1510;

	/* Accent Secondary - Purple (muted/professional) */
	--color-accent2-50: #f6f4fb;
	--color-accent2-100: #ede9f7;
	--color-accent2-200: #ddd5f0;
	--color-accent2-300: #c5b6e4;
	--color-accent2-400: #a78fd4;
	--color-accent2-500: #8b6bc2;
	--color-accent2-600: #7652ab;
	--color-accent2-700: #634391;
	--color-accent2-800: #533978;
	--color-accent2-900: #463162;
	--color-accent2-950: #2c1c42;

	/* Accent Tertiary - Teal (customers) */
	--color-accent3-50: #f0fdfa;
	--color-accent3-100: #ccfbf1;
	--color-accent3-200: #99f6e4;
	--color-accent3-300: #5eead4;
	--color-accent3-400: #2dd4bf;
	--color-accent3-500: #14b8a6;
	--color-accent3-600: #0d9488;
	--color-accent3-700: #0f766e;
	--color-accent3-800: #115e59;
	--color-accent3-900: #134e4a;
	--color-accent3-950: #042f2e;

	/* Accent Quaternary - Rose (profiles) */
	--color-accent4-50: #fff1f2;
	--color-accent4-100: #ffe4e6;
	--color-accent4-200: #fecdd3;
	--color-accent4-300: #fda4af;
	--color-accent4-400: #fb7185;
	--color-accent4-500: #f43f5e;
	--color-accent4-600: #e11d48;
	--color-accent4-700: #be123c;
	--color-accent4-800: #9f1239;
	--color-accent4-900: #881337;
	--color-accent4-950: #4c0519;

	/* Accent Quinary - Amber (specialty) */
	--color-accent5-50: #fffbeb;
	--color-accent5-100: #fef3c7;
	--color-accent5-200: #fde68a;
	--color-accent5-300: #fcd34d;
	--color-accent5-400: #fbbf24;
	--color-accent5-500: #f59e0b;
	--color-accent5-600: #d97706;
	--color-accent5-700: #b45309;
	--color-accent5-800: #92400e;
	--color-accent5-900: #78350f;
	--color-accent5-950: #451a03;

	/* Accent Senary - Indigo (invoices) */
	--color-accent6-50: #eef2ff;
	--color-accent6-100: #e0e7ff;
	--color-accent6-200: #c7d2fe;
	--color-accent6-300: #a5b4fc;
	--color-accent6-400: #818cf8;
	--color-accent6-500: #6366f1;
	--color-accent6-600: #4f46e5;
	--color-accent6-700: #4338ca;
	--color-accent6-800: #3730a3;
	--color-accent6-900: #312e81;
	--color-accent6-950: #1e1b4b;

	/* Accent Septenary - Cyan (calendar) */
	--color-accent7-50: #ecfeff;
	--color-accent7-100: #cffafe;
	--color-accent7-200: #a5f3fc;
	--color-accent7-300: #67e8f9;
	--color-accent7-400: #22d3ee;
	--color-accent7-500: #06b6d4;
	--color-accent7-600: #0891b2;
	--color-accent7-700: #0e7490;
	--color-accent7-800: #155e75;
	--color-accent7-900: #164e63;
	--color-accent7-950: #083344;

	/* Messages - Slate Blue (professional communication) */
	--color-message-50: #f1f5f9;
	--color-message-100: #e2e8f0;
	--color-message-200: #cbd5e1;
	--color-message-300: #94a3b8;
	--color-message-400: #64748b;
	--color-message-500: #475569;
	--color-message-600: #334155;
	--color-message-700: #1e293b;
	--color-message-800: #0f172a;
	--color-message-900: #020617;
	--color-message-950: #010313;

	/* Notifications - Coral/Salmon (attention-grabbing but warm) */
	--color-notification-50: #fff5f5;
	--color-notification-100: #ffe4e4;
	--color-notification-200: #fecaca;
	--color-notification-300: #fca5a5;
	--color-notification-400: #f87171;
	--color-notification-500: #ef5350;
	--color-notification-600: #dc2626;
	--color-notification-700: #b91c1c;
	--color-notification-800: #991b1b;
	--color-notification-900: #7f1d1d;
	--color-notification-950: #450a0a;

	/* Error/Alert - Red (muted/professional) */
	--color-error-50: #fdf3f3;
	--color-error-100: #fce4e4;
	--color-error-200: #fbcdcd;
	--color-error-300: #f6a8a8;
	--color-error-400: #ee7676;
	--color-error-500: #e14a4a;
	--color-error-600: #cd2d2d;
	--color-error-700: #ac2323;
	--color-error-800: #8e2121;
	--color-error-900: #772222;
	--color-error-950: #400d0d;

	/* Warning - Yellow (muted/professional) */
	--color-warning-50: #fdfaeb;
	--color-warning-100: #faf2c9;
	--color-warning-200: #f5e394;
	--color-warning-300: #efd05b;
	--color-warning-400: #e8bb30;
	--color-warning-500: #d8a01d;
	--color-warning-600: #ba7c16;
	--color-warning-700: #955916;
	--color-warning-800: #7b4619;
	--color-warning-900: #693a1a;
	--color-warning-950: #3d1e0a;

	/* Success - Green (distinct from secondary, muted) */
	--color-success-50: #f0fdf2;
	--color-success-100: #dcfce2;
	--color-success-200: #bbf7c6;
	--color-success-300: #86ef9b;
	--color-success-400: #4ade6a;
	--color-success-500: #22c546;
	--color-success-600: #16a336;
	--color-success-700: #16802e;
	--color-success-800: #176528;
	--color-success-900: #155324;
	--color-success-950: #052e10;

	/* Neutral/Surface colors for theming */
	--color-surface-50: #f8fafc;
	--color-surface-100: #f1f5f9;
	--color-surface-200: #e2e8f0;
	--color-surface-300: #cbd5e1;
	--color-surface-400: #94a3b8;
	--color-surface-500: #64748b;
	--color-surface-600: #475569;
	--color-surface-700: #334155;
	--color-surface-800: #1e293b;
	--color-surface-900: #0f172a;
	--color-surface-950: #020617;
}

/* ============================================
   LIGHT THEME (default)
   ============================================ */
:root {
	color-scheme: light;

	/* Background colors - subtle blue tint for softer appearance */
	--theme-bg: var(--color-primary-50);
	--theme-bg-secondary: #e8f0f8;
	--theme-bg-tertiary: var(--color-primary-100);

	/* Text colors */
	--theme-text: var(--color-surface-900);
	--theme-text-secondary: var(--color-surface-600);
	--theme-text-muted: var(--color-surface-400);

	/* Border colors */
	--theme-border: var(--color-surface-200);
	--theme-border-hover: var(--color-surface-300);

	/* Interactive states */
	--theme-hover: var(--color-primary-100);
	--theme-active: var(--color-primary-200);

	/* Shadows */
	--theme-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Card/Panel backgrounds - subtle blue tint to match overall theme */
	--theme-card: #f5f8fc;
	--theme-card-hover: #edf2f9;

	/* Form input backgrounds - white for clear input affordance */
	--theme-input: #ffffff;
}

/* ============================================
   DARK THEME
   ============================================ */
.dark {
	color-scheme: dark;

	/* Background colors */
	--theme-bg: var(--color-surface-900);
	--theme-bg-secondary: var(--color-surface-800);
	--theme-bg-tertiary: var(--color-surface-700);

	/* Text colors */
	--theme-text: var(--color-surface-50);
	--theme-text-secondary: var(--color-surface-300);
	--theme-text-muted: var(--color-surface-500);

	/* Border colors */
	--theme-border: var(--color-surface-700);
	--theme-border-hover: var(--color-surface-600);

	/* Interactive states */
	--theme-hover: var(--color-surface-800);
	--theme-active: var(--color-surface-700);

	/* Shadows (more subtle in dark mode) */
	--theme-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
	--theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
	--theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);

	/* Card/Panel backgrounds */
	--theme-card: var(--color-surface-800);
	--theme-card-hover: var(--color-surface-700);

	/* Form input backgrounds - slightly lighter than card for clear affordance */
	--theme-input: var(--color-surface-700);
}

/* ============================================
   BASE STYLES
   ============================================ */
html {
	background-color: var(--theme-bg);
	color: var(--theme-text);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

body {
	background-color: var(--theme-bg);
	min-height: 100vh;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
@utility bg-theme {
	background-color: var(--theme-bg);
}

@utility bg-theme-secondary {
	background-color: var(--theme-bg-secondary);
}

@utility bg-theme-tertiary {
	background-color: var(--theme-bg-tertiary);
}

@utility bg-theme-card {
	background-color: var(--theme-card);
}

@utility bg-theme-input {
	background-color: var(--theme-input);
}

@utility text-theme {
	color: var(--theme-text);
}

@utility text-theme-secondary {
	color: var(--theme-text-secondary);
}

@utility text-theme-muted {
	color: var(--theme-text-muted);
}

@utility border-theme {
	border-color: var(--theme-border);
}

@utility border-theme-hover {
	border-color: var(--theme-border-hover);
}

@utility shadow-theme {
	box-shadow: var(--theme-shadow);
}

@utility shadow-theme-md {
	box-shadow: var(--theme-shadow-md);
}

@utility shadow-theme-lg {
	box-shadow: var(--theme-shadow-lg);
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Page Titles */
@utility page-title {
	@apply text-2xl font-bold md:text-3xl;
	color: var(--theme-text);
}

@utility page-title-primary {
	@apply text-3xl font-bold text-primary-500 sm:text-4xl;
}

@utility page-subtitle {
	@apply mt-2;
	color: var(--theme-text-secondary);
}

/* Section Headers */
@utility section-title {
	@apply text-xl font-semibold text-primary-500;
}

@utility section-title-accent {
	@apply text-xl font-semibold text-accent-500;
}

/* Cards */
@utility card {
	@apply rounded-lg border;
	border-color: var(--theme-border);
	background-color: var(--theme-card);
}

@utility card-interactive {
	@apply rounded-lg border transition-colors hover:border-primary-500/30 hover:bg-black/5 dark:hover:bg-white/5;
	border-color: var(--theme-border);
	background-color: var(--theme-card);
}

@utility card-padded {
	@apply rounded-lg border p-6;
	border-color: var(--theme-border);
	background-color: var(--theme-card);
}

/* Empty State */
@utility empty-state {
	@apply rounded-lg border p-8 text-center;
	border-color: var(--theme-border);
	background-color: var(--theme-card);
}

@utility empty-state-icon {
	@apply mx-auto mb-4 h-16 w-16;
	color: var(--theme-text-muted);
}

@utility empty-state-title {
	@apply mb-2 text-lg font-semibold;
	color: var(--theme-text);
}

@utility empty-state-text {
	@apply mx-auto max-w-md;
	color: var(--theme-text-muted);
}

/* Badges/Tags */
@utility badge {
	@apply rounded px-2 py-0.5 text-xs font-semibold;
}

@utility badge-primary {
	@apply rounded bg-primary-500/20 px-2 py-0.5 text-xs font-semibold text-primary-500;
}

@utility badge-secondary {
	@apply rounded bg-secondary-500/20 px-2 py-0.5 text-xs font-semibold text-secondary-500;
}

@utility badge-accent {
	@apply rounded bg-accent-500/20 px-2 py-0.5 text-xs font-semibold text-accent-500;
}

@utility badge-warning {
	@apply rounded bg-amber-500/20 px-2 py-0.5 text-xs font-semibold text-amber-600 dark:text-amber-400;
}

@utility badge-success {
	@apply rounded bg-success-500/20 px-2 py-0.5 text-xs font-semibold text-success-600 dark:text-success-400;
}

/* Detail Labels (for info cards) */
@utility detail-label {
	@apply mb-1 text-xs font-medium tracking-wide uppercase;
	color: var(--theme-text-muted);
}

/* Back Links */
@utility back-link {
	@apply inline-flex items-center gap-2 text-primary-500 transition-colors hover:text-primary-600;
}

/* Buttons */
@utility btn {
	@apply inline-block rounded-lg px-4 py-2 font-medium transition-colors;
}

@utility btn-primary {
	@apply inline-block rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 active:bg-primary-700;
}

@utility btn-accent {
	@apply inline-block rounded-lg bg-accent-500 px-4 py-2 font-medium text-white transition-colors hover:bg-accent-600 active:bg-accent-700;
}

@utility btn-secondary {
	@apply inline-block rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 dark:hover:bg-white/10;
}

@utility btn-ghost {
	@apply inline-block rounded-lg px-4 py-2 font-medium transition-colors hover:bg-black/5 dark:hover:bg-white/10;
}

@utility btn-outline {
	@apply inline-block rounded-lg border border-theme bg-transparent px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 dark:hover:bg-white/10;
}

@utility btn-accent7 {
	@apply inline-block rounded-lg bg-accent7-500 px-4 py-2 font-medium text-white transition-colors hover:bg-accent7-600 active:bg-accent7-700;
}

/* Icon Buttons */
@utility btn-icon {
	@apply inline-flex items-center justify-center rounded-lg p-2 transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
}

@utility btn-icon-sm {
	@apply inline-flex items-center justify-center rounded-lg p-1.5 transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
}

@utility btn-icon-xs {
	@apply inline-flex items-center justify-center rounded p-1 transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
}

/* Form Layout */
@utility form-section {
	@apply space-y-6;
}

@utility form-fields {
	@apply space-y-4;
}

/* Expandable Sections (for use with <details>) */
@utility expandable-header {
	@apply flex w-full cursor-pointer list-none items-center justify-between transition-opacity hover:opacity-80;
}

@utility expandable-chevron {
	@apply h-5 w-5 flex-shrink-0 transition-transform group-open:rotate-180;
}

/* Scope/Area Styles */
@utility scope-container {
	@apply rounded-lg border border-accent-500/20 bg-gradient-to-br from-accent-500/5 to-accent-500/10 p-5 text-sm shadow-sm dark:from-accent-500/10 dark:to-accent-500/5;
}

@utility scope-title {
	@apply text-base font-bold text-accent-700 dark:text-accent-300;
}

@utility area-container {
	@apply rounded-r-md border-l-4 border-primary-500 py-2 pr-2 pl-4;
	background-color: color-mix(in srgb, var(--theme-card) 40%, transparent);
}

@utility area-title {
	@apply text-sm font-semibold text-primary-600 dark:text-primary-400;
}

@utility task-container {
	@apply rounded-md border-l-2 border-surface-400/20 bg-black/5 p-3 dark:bg-white/5;
}

/* Schedule Day Badges */
@utility schedule-day {
	@apply rounded bg-primary-500/20 px-2 py-1 text-xs text-primary-500;
}

@utility schedule-day-weekend {
	@apply rounded bg-accent-500/20 px-2 py-1 text-xs text-accent-500;
}

/* Contact Cards */
@utility contact-name {
	@apply font-medium;
	color: var(--theme-text);
}

@utility contact-email {
	@apply text-sm hover:text-primary-500;
	color: var(--theme-text-secondary);
}

/* List Item Divider */
@utility list-divider {
	@apply border-b pb-4;
	border-color: var(--theme-border);
}

/* Subtle Backgrounds */
@utility bg-subtle {
	@apply bg-black/5 dark:bg-white/5;
}

@utility bg-subtle-hover {
	@apply hover:bg-black/5 dark:hover:bg-white/10;
}

@utility bg-subtle-active {
	@apply active:bg-black/10 dark:active:bg-white/15;
}

/* Card Variants by Section */
@utility card-account {
	@apply card-padded card-interactive border-l-4 border-l-primary-500/50;
}

@utility card-service {
	@apply card-padded card-interactive border-l-4 border-l-secondary-500/50;
}

@utility card-project {
	@apply card-padded card-interactive border-l-4 border-l-accent-500/50;
}

@utility card-report {
	@apply card-padded card-interactive border-l-4 border-l-accent2-500/50;
}

@utility card-customer {
	@apply card-padded card-interactive border-l-4 border-l-accent3-500/50;
}

@utility card-profile {
	@apply overflow-hidden card-padded card-interactive border-l-4 border-l-accent4-500/50;
}

@utility card-invoice {
	@apply card-padded card-interactive border-l-4 border-l-accent6-500/50;
}

@utility card-team {
	@apply card-padded card-interactive border-l-4 border-l-accent5-500/50;
}

@utility card-specialty {
	@apply card-padded card-interactive border-l-4 border-l-accent5-500/50;
}

@utility card-calendar {
	@apply card-padded card-interactive border-l-4 border-l-accent7-500/50;
}

@utility card-message {
	@apply card-padded card-interactive border-l-4 border-l-message-400/50;
}

@utility card-notification {
	@apply card-padded card-interactive border-l-4 border-l-notification-500/50;
}

/* Section Header Variants */
@utility section-header-primary {
	@apply border-b border-primary-500/20 bg-primary-500/5;
}

@utility section-header-secondary {
	@apply border-b border-secondary-500/20 bg-secondary-500/5;
}

@utility section-header-accent {
	@apply border-b border-accent-500/20 bg-accent-500/5;
}

@utility section-header-accent2 {
	@apply border-b border-accent2-500/20 bg-accent2-500/5;
}

@utility section-header-accent3 {
	@apply border-b border-accent3-500/20 bg-accent3-500/5;
}

@utility section-header-accent4 {
	@apply border-b border-accent4-500/20 bg-accent4-500/5;
}

@utility section-header-accent5 {
	@apply border-b border-accent5-500/20 bg-accent5-500/5;
}

@utility section-header-accent6 {
	@apply border-b border-accent6-500/20 bg-accent6-500/5;
}

@utility section-header-accent7 {
	@apply border-b border-accent7-500/20 bg-accent7-500/5;
}

@utility section-header-message {
	@apply border-b border-message-400/20 bg-message-400/5;
}

@utility section-header-notification {
	@apply border-b border-notification-500/20 bg-notification-500/5;
}

/* ============================================
   SEMANTIC STATE UTILITIES
   ============================================ */

/* Danger/Error States */
@utility bg-danger {
	@apply bg-error-50 dark:bg-error-900/20;
}

@utility text-danger {
	@apply text-error-700 dark:text-error-400;
}

@utility border-danger {
	@apply border-error-200 dark:border-error-800;
}

@utility danger-zone {
	@apply rounded-lg border border-danger bg-danger p-6;
}

@utility danger-zone-title {
	@apply mb-2 text-lg font-semibold text-danger;
}

@utility danger-zone-text {
	@apply mb-4 text-sm text-error-600 dark:text-error-300;
}

@utility btn-danger {
	@apply inline-block rounded-lg bg-error-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-error-700 active:bg-error-800;
}

/* Warning States */
@utility bg-warning {
	@apply bg-warning-50 dark:bg-warning-900/20;
}

@utility text-warning {
	@apply text-warning-700 dark:text-warning-300;
}

@utility border-warning {
	@apply border-warning-200 dark:border-warning-800;
}

@utility warning-box {
	@apply rounded-xl border border-warning bg-warning p-6;
}

@utility warning-box-title {
	@apply font-medium text-warning-800 dark:text-warning-200;
}

@utility warning-box-text {
	@apply mt-1 text-sm text-warning-700 dark:text-warning-300;
}

@utility warning-box-icon {
	@apply h-6 w-6 flex-shrink-0 text-warning-500;
}

/* Success States */
@utility bg-success {
	@apply bg-success-50 dark:bg-success-900/20;
}

@utility text-success {
	@apply text-success-700 dark:text-success-400;
}

@utility border-success {
	@apply border-success-200 dark:border-success-700;
}

@utility success-box {
	@apply rounded-lg border border-success bg-success p-3;
}

@utility success-box-title {
	@apply flex items-center gap-2 text-sm font-medium text-success-700 dark:text-success-400;
}

@utility success-box-text {
	@apply mt-1 text-sm text-success-600 dark:text-success-300;
}

/* Info States */
@utility bg-info {
	@apply bg-primary-50 dark:bg-primary-900/20;
}

@utility text-info {
	@apply text-primary-700 dark:text-primary-400;
}

@utility border-info {
	@apply border-primary-200 dark:border-primary-800;
}

@utility info-box {
	@apply rounded-lg border border-info bg-info p-3;
}

/* Neutral/Inactive States */
@utility badge-neutral {
	@apply rounded bg-surface-100 px-2 py-0.5 text-xs font-semibold text-surface-600 dark:bg-surface-700 dark:text-surface-300;
}

@utility badge-error {
	@apply rounded bg-error-500/20 px-2 py-0.5 text-xs font-semibold text-error-600 dark:text-error-400;
}

/* Form Input Borders (for checkboxes, radios) */
@utility border-input {
	@apply border-surface-300 dark:border-surface-600;
}

/* Overlay Backgrounds */
@utility bg-overlay {
	@apply bg-black/50 dark:bg-black/70;
}

@utility bg-overlay-heavy {
	@apply bg-black/80;
}

/* ============================================
   FORM UTILITIES
   ============================================ */

/* Form input base - unifies input styling across all forms */
@utility input-base {
	@apply w-full rounded-lg border border-theme bg-theme-input px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50;
}

/* Textarea base - same as input but allows resize */
@utility textarea-base {
	@apply w-full rounded-lg border border-theme bg-theme-input px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50;
}

/* Select base */
@utility select-base {
	@apply w-full rounded-lg border border-theme bg-theme-input px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50;
}

/* Form label */
@utility form-label {
	@apply mb-1.5 block text-sm font-medium text-theme;
}

/* Required indicator */
@utility required-indicator {
	@apply text-red-500;
}

/* Form button row */
@utility form-actions {
	@apply flex items-center gap-3 pt-4;
}

/* Submit button */
@utility btn-submit {
	@apply flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50;
}

/* Cancel button */
@utility btn-cancel {
	@apply rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10;
}

/* ============================================
   ALERT UTILITIES
   ============================================ */

/* Error alert - replaces hardcoded red error boxes */
@utility alert-error {
	@apply rounded-lg border border-red-400 bg-red-50 p-3 text-sm text-red-700 dark:border-red-600 dark:bg-red-900/20 dark:text-red-400;
}

/* ============================================
   INTERACTIVE STATE UTILITIES
   ============================================ */

/* Interactive hover/active - unifies hover states */
@utility interactive {
	@apply transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
}

/* Delete button hover state */
@utility btn-delete-hover {
	@apply transition-colors hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20;
}

/* ============================================
   MOBILE UTILITIES
   ============================================ */

/* Mobile FAB (Floating Action Button) */
@utility fab-primary {
	@apply fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-colors hover:bg-primary-600 sm:hidden;
}

/* ============================================
   SEARCH UTILITIES
   ============================================ */

/* Search container */
@utility search-container {
	@apply relative;
}

/* Search icon positioning */
@utility search-icon {
	@apply pointer-events-none absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted;
}

/* Search input with icon space */
@utility search-input {
	@apply input-base py-2 pr-4 pl-10;
}

/* ============================================
   CHECKBOX/RADIO UTILITIES
   ============================================ */

/* Checkbox base */
@utility checkbox-base {
	@apply h-4 w-4 rounded border-surface-300 text-primary-500 focus:ring-primary-500 dark:border-surface-600;
}

/* Checkbox label */
@utility checkbox-label {
	@apply text-sm text-theme;
}
