@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

:root {
    --breakpoint-small: 600px;
    --breakpoint-medium: 900px;
    --breakpoint-large: 1200px;

    --scale-0: 1rem;
    --scale-1: 1.125rem;
    --scale-2: 1.25rem;
    --scale-3: 1.5rem;
    --scale-4: 1.875rem;
    --scale-5: 2.25rem;
    --scale-6: 3rem;
    --scale-7: 3.75rem;
    --scale-8: 4.5rem;
    --scale-9: 6rem;
    --scale-10: 8rem;
    --scale-000: 0.75rem;
    --scale-00: 0.875rem;

    --scale-fluid-0: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    --scale-fluid-1: clamp(1rem, 0.925rem + 0.25vw, 1.125rem);
    --scale-fluid-2: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
    --scale-fluid-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --scale-fluid-4: clamp(1.5rem, 1.275rem + 0.75vw, 1.875rem);
    --scale-fluid-5: clamp(1.875rem, 1.65rem + 0.75vw, 2.25rem);
    --scale-fluid-6: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
    --scale-fluid-7: clamp(3rem, 2.55rem + 1.5vw, 3.75rem);
    --scale-fluid-8: clamp(3.75rem, 3.3rem + 1.5vw, 4.5rem);
    --scale-fluid-9: clamp(4.5rem, 3.6rem + 3vw, 6rem);
    --scale-fluid-10: clamp(6rem, 4.8rem + 4vw, 8rem);
    --scale-fluid-000: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem);
    --scale-fluid-00: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    --line-none: 1;
    --line-xs: 1.125;
    --line-sm: 1.275;
    --line-md: 1.5;
    --line-lg: 1.625;
    --line-xl: 2;

    --letter-xs: -0.05em;
    --letter-sm: -0.025em;
    --letter-none: 0em;
    --letter-lg: 0.025em;
    --letter-xl: 0.05em;

    --prose-xs: 45ch;
    --prose-sm: 55ch;
    --prose-md: 65ch;
    --prose-lg: 75ch;
    --prose-xl: 85ch;

    --size-1: 4px;
    --size-2: 8px;
    --size-3: 12px;
    --size-4: 16px;
    --size-5: 20px;
    --size-6: 24px;
    --size-7: 28px;
    --size-8: 32px;
    --size-9: 36px;
    --size-10: 40px;
    --size-11: 44px;
    --size-12: 48px;
    --size-14: 56px;
    --size-16: 64px;
    --size-20: 80px;
    --size-24: 96px;
    --size-28: 112px;
    --size-32: 128px;
    --size-36: 144px;
    --size-40: 160px;
    --size-44: 176px;
    --size-48: 192px;
    --size-52: 208px;
    --size-56: 224px;
    --size-60: 240px;
    --size-64: 256px;
    --size-72: 288px;
    --size-80: 320px;
    --size-96: 384px;
    --size-px: 1px;
    --size-full: 100%;
    --size-screen: 100vw;
    --size-min: min-content;
    --size-max: max-content;

    --width-xs: 480px;
    --width-sm: 640px;
    --width-md: 768px;
    --width-lg: 1024px;
    --width-xl: 1280px;

    --ratio-square: 1/1;
    --ratio-portrait: 3/4;
    --ratio-landscape: 4/3;
    --ratio-tall: 2/3;
    --ratio-wide: 3/2;
    --ratio-widescreen: 16/9;
    --ratio-golden: 1.618/1;

    --radius-100: 100%;
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --blur-xs: blur(4px);
    --blur-sm: blur(8px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    --blur-xl: blur(40px);

    --layer-1: 10;
    --layer-2: 20;
    --layer-3: 30;
    --layer-4: 40;
    --layer-5: 50;
    --layer-below: -1;
    --layer-top: 2147483647;

    --shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 4px 6px -2px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 24px -4px rgba(0, 0, 0, 0.1),
        0 8px 8px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.25);

    --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
    --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
    --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;
    --primary-950: #1e1b4b;
    --primary: var(--primary-600);

    --secondary-50: #fffbeb;
    --secondary-100: #fef3c7;
    --secondary-200: #fde68a;
    --secondary-300: #fcd34d;
    --secondary-400: #fbbf24;
    --secondary-500: #f59e0b;
    --secondary-600: #d97706;
    --secondary-700: #b45309;
    --secondary-800: #92400e;
    --secondary-900: #78350f;
    --secondary-950: #451a03;
    --secondary: var(--secondary-600);

    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;
    --neutral: var(--neutral-500);

    --success-50: #7DFEBD;
    --success-100: #70F8B1;
    --success-200: #63F2A5;
    --success-300: #56EC99;
    --success-400: #49E68D;
    --success-500: #0CAF60;
    --success-600: #0A8F4C;
    --success-700: #086F38;
    --success-800: #064F24;
    --success-900: #005824;
    --success-950: #00391B;
    --success: var(--success-500);

    --warning-50: #FFF6D5;
    --warning-100: #FFEAB8;
    --warning-200: #FFDE9B;
    --warning-300: #FFD27E;
    --warning-400: #FFC661;
    --warning-500: #ffd023;
    --warning-600: #E6B200;
    --warning-700: #B29400;
    --warning-800: #7E7600;
    --warning-900: #4A5800;
    --warning-950: #292800;
    --warning: var(--warning-500);

    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;
    --danger-950: #450a0a;
    --danger: var(--danger-500);

    --industria: #FE9E32;
    --info: #119EE2;

    --black: #000;
    --white: #fff;
    --grey-50: #f9fafb;
    --grey-100: #f3f4f6;
    --grey-200: #e5e7eb;
    --grey-300: #d1d5db;
    --grey-400: #9ca3af;
    --grey-500: #6b7280;
    --grey-600: #4b5563;
    --grey-700: #374151;
    --grey-800: #1f2937;
    --grey-900: #111827;
    --grey-950: #030712;
    --grey: var(--grey-500);
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
    --slate: var(--slate-500);
    --zinc-50: #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;
    --zinc: var(--zinc-500);
    --stone-50: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;
    --stone: var(--stone-500);
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    --red-950: #450a0a;
    --red: var(--red-500);
    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --orange-900: #7c2d12;
    --orange-950: #431407;
    --orange: var(--orange-500);
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --amber-900: #78350f;
    --amber-950: #451a03;
    --amber: var(--amber-500);
    --yellow-50: #fefce8;
    --yellow-100: #fef9c3;
    --yellow-200: #fef08a;
    --yellow-300: #fde047;
    --yellow-400: #facc15;
    --yellow-500: #eab308;
    --yellow-600: #ca8a04;
    --yellow-700: #a16207;
    --yellow-800: #854d0e;
    --yellow-900: #713f12;
    --yellow-950: #422006;
    --yellow: var(--yellow-500);
    --lime-50: #f7fee7;
    --lime-100: #ecfccb;
    --lime-200: #d9f99d;
    --lime-300: #bef264;
    --lime-400: #a3e635;
    --lime-500: #84cc16;
    --lime-600: #65a30d;
    --lime-700: #4d7c0f;
    --lime-800: #3f6212;
    --lime-900: #365314;
    --lime-950: #1a2e05;
    --lime: var(--lime-500);
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;
    --green-950: #052e16;
    --green: var(--green-500);
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;
    --teal-950: #042f2e;
    --teal: var(--teal-500);
    --cyan-50: #ecfeff;
    --cyan-100: #cffafe;
    --cyan-200: #a5f3fc;
    --cyan-300: #67e8f9;
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;
    --cyan-800: #155e75;
    --cyan-900: #164e63;
    --cyan-950: #083344;
    --cyan: var(--cyan-500);
    --sky-50: #f0f9ff;
    --sky-100: #e0f2fe;
    --sky-200: #bae6fd;
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;
    --sky-600: #0284c7;
    --sky-700: #0369a1;
    --sky-800: #075985;
    --sky-900: #0c4a6e;
    --sky-950: #082f49;
    --sky: var(--sky-500);
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;
    --blue: var(--blue-500);
    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-200: #c7d2fe;
    --indigo-300: #a5b4fc;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --indigo-800: #3730a3;
    --indigo-900: #312e81;
    --indigo-950: #1e1b4b;
    --indigo: var(--indigo-500);
    --violet-50: #f5f3ff;
    --violet-100: #ede9fe;
    --violet-200: #ddd6fe;
    --violet-300: #c4b5fd;
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    --violet-800: #5b21b6;
    --violet-900: #4c1d95;
    --violet-950: #2e1065;
    --violet: var(--violet-500);
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;
    --purple-950: #3b0764;
    --purple: var(--purple-500);
    --fuchsia-50: #fdf4ff;
    --fuchsia-100: #fae8ff;
    --fuchsia-200: #f5d0fe;
    --fuchsia-300: #f0abfc;
    --fuchsia-400: #e879f9;
    --fuchsia-500: #d946ef;
    --fuchsia-600: #c026d3;
    --fuchsia-700: #a21caf;
    --fuchsia-800: #86198f;
    --fuchsia-900: #701a75;
    --fuchsia-950: #4a044e;
    --fuchsia: var(--fuchsia-500);
    --pink-50: #fdf2f8;
    --pink-100: #fce7f3;
    --pink-200: #fbcfe8;
    --pink-300: #f9a8d4;
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-600: #db2777;
    --pink-700: #be185d;
    --pink-800: #9d174d;
    --pink-900: #831843;
    --pink-950: #500724;
    --pink: var(--pink-500);
    --rose-50: #fff1f2;
    --rose-100: #ffe4e6;
    --rose-200: #fecdd3;
    --rose-300: #fda4af;
    --rose-400: #fb7185;
    --rose-500: #f43f5e;
    --rose-600: #e11d48;
    --rose-700: #be123c;
    --rose-800: #9f1239;
    --rose-900: #881337;
    --rose-950: #4c0519;
    --rose: var(--rose-500);
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-7: repeat(7, minmax(0, 1fr));
    --grid-8: repeat(8, minmax(0, 1fr));
    --grid-9: repeat(9, minmax(0, 1fr));
    --grid-10: repeat(10, minmax(0, 1fr));
    --grid-11: repeat(11, minmax(0, 1fr));
    --grid-12: repeat(12, minmax(0, 1fr));
    --grid-page-width: var(--width-xl);
    --grid-page-gutter: 5vw;
    --grid-page-main: 2 / 3;
    --grid-page: minmax(var(--grid-page-gutter), 1fr)
        minmax(0, var(--grid-page-width)) minmax(var(--grid-page-gutter), 1fr);

    --border: solid 2px var(--neutral-700);

    /* Avatar color palette for user initials */
    --avatar-color-0: var(--indigo-600);
    --avatar-color-1: var(--teal-600);
    --avatar-color-2: var(--orange-600);
    --avatar-color-3: var(--pink-600);
    --avatar-color-4: var(--cyan-600);
    --avatar-color-5: var(--purple-600);
    --avatar-color-6: var(--green-600);
    --avatar-color-7: var(--rose-600);
}

.flex {display: flex;}
.flex-column {flex-direction: column;}
.justify-between {justify-content: space-between;}
.justify-center {justify-content: center;}
.justify-end {justify-content: flex-end;}
.items-center {align-items: center;}
.items-end {align-items: flex-end;}
.align-center {align-items: center;}

.gap-1 {gap: var(--size-1);}
.gap-2 {gap: var(--size-2);}
.gap-3 {gap: var(--size-3);}
.gap-4 {gap: var(--size-4);}
.gap-6 {gap: var(--size-6);}
.gap-8 {gap: var(--size-8);}

.my-2 {margin-top: var(--size-2); margin-bottom: var(--size-2);}
.mt-2 {margin-top: var(--size-2);}
.mb-2 {margin-bottom: var(--size-2);}
.mt-4 {margin-top: var(--size-4);}
.mb-4 {margin-bottom: var(--size-4);}
.p-2 {padding: var(--size-2);}
.pl-2 {padding-left: var(--size-2);}

.w-full {width: var(--size-full);}
.h-full {height: var(--size-full);}

/* ========================================
   BUTTONS
   ======================================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-2);
    min-height: var(--size-10);
    padding: 0 var(--size-5);
    border: var(--border);
    border-radius: var(--radius-xs);
    background-color: var(--white);
    color: var(--neutral-700);
    font-size: var(--scale-0);
    font-weight: var(--weight-medium);
    text-decoration: none;
    text-transform: lowercase;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.button:hover {
    background-color: var(--primary-100);
    border-color: var(--primary-600);
    color: var(--primary-700);
    text-decoration: none;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.button.primary {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    color: var(--white);
}

.button.primary:hover {
    background-color: var(--primary-700);
    border-color: var(--primary-700);
}

.button.secondary {
    background-color: var(--secondary-600);
    border-color: var(--secondary-600);
    color: var(--white);
}

.button.secondary:hover {
    background-color: var(--secondary-700);
    border-color: var(--secondary-700);
}

.button.danger {
    background-color: var(--danger-600);
    border-color: var(--danger-600);
    color: var(--white);
}

.button.danger:hover {
    background-color: var(--danger-700);
    border-color: var(--danger-700);
}

.button.small {
    min-height: var(--size-8);
    padding: 0 var(--size-3);
    font-size: var(--scale-00);
}

.button.ghost {
    border-color: transparent;
    background-color: transparent;
}

.button.ghost:hover {
    background-color: var(--neutral-100);
    border-color: transparent;
}

/* ========================================
   TABS
   ======================================== */
.tabs {
    display: flex;
    gap: var(--size-6);
    margin-bottom: var(--size-6);
}

.tab {
    padding: var(--size-2) 0;
    font-weight: var(--weight-medium);
    color: var(--neutral-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.tab:hover {
    color: var(--primary-600);
    text-decoration: none;
}

.tab.active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

/* ========================================
   TABLES
   ======================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--scale-00);
}

.table th,
.table td {
    padding: var(--size-3) var(--size-4);
    text-align: left;
    border-bottom: 1px solid var(--neutral-200);
}

.table th {
    background-color: var(--neutral-50);
    font-weight: var(--weight-semibold);
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-lg);
}

.table tbody tr:hover {
    background-color: var(--neutral-50);
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

/* ========================================
   FORMS
   ======================================== */
input,
select,
textarea {
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    font-size: var(--scale-0);
    font-family: inherit;
    background-color: var(--white);
    color: var(--neutral-900);
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

input::placeholder,
textarea::placeholder {
    color: var(--neutral-400);
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--size-2) center;
    padding-right: var(--size-8);
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--size-6);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    margin-bottom: var(--size-5);
}

.form-group:last-child {
    margin-bottom: 0;
}

form .button,
form button {
    margin-top: var(--size-3);
}

.form-group label {
    font-size: var(--scale-00);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--size-3) var(--size-4);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    font-size: var(--scale-0);
    background-color: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--neutral-400);
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: var(--danger-500);
}

.form-group.error input:focus,
.form-group.error select:focus,
.form-group.error textarea:focus {
    box-shadow: 0 0 0 3px var(--danger-100);
}

.form-group .error-message {
    font-size: var(--scale-000);
    color: var(--danger-600);
}

.form-actions {
    display: flex;
    gap: var(--size-3);
    justify-content: flex-end;
    padding-top: var(--size-4);
}

/* ========================================
   CARDS
   ======================================== */
.card {
    background-color: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: var(--size-6);
    margin-bottom: var(--size-6);
}

.card-header {
    margin-bottom: var(--size-4);
    padding-bottom: var(--size-4);
    border-bottom: 1px solid var(--neutral-200);
}

.card-title {
    font-size: var(--scale-2);
    font-weight: var(--weight-semibold);
}

/* ========================================
   BADGES
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--size-1) var(--size-3);
    border-radius: var(--radius-full);
    font-size: var(--scale-000);
    font-weight: var(--weight-medium);
}

.badge.success {
    background-color: var(--success-100);
    color: var(--success-700);
}

.badge.warning {
    background-color: var(--warning-100);
    color: var(--warning-700);
}

.badge.danger {
    background-color: var(--danger-100);
    color: var(--danger-700);
}

.badge.info {
    background-color: var(--primary-100);
    color: var(--primary-700);
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
    padding: var(--size-4) var(--size-5);
    border-radius: var(--radius-sm);
    border: 1px solid;
}

.alert.info {
    background-color: var(--primary-50);
    border-color: var(--primary-200);
    color: var(--primary-800);
}

.alert.success {
    background-color: var(--success-50);
    border-color: var(--success-200);
    color: var(--success-800);
}

.alert.warning {
    background-color: var(--warning-50);
    border-color: var(--warning-200);
    color: var(--warning-800);
}

.alert.danger {
    background-color: var(--danger-50);
    border-color: var(--danger-200);
    color: var(--danger-800);
}

/* ========================================
   DIALOGS (native <dialog>)
   ======================================== */
dialog {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: 0;
    max-width: 500px;
    width: calc(100% - var(--size-8));
    max-height: 90vh;
    overflow-y: auto;
    margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

dialog .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--size-5);
}

dialog .modal-title {
    font-size: var(--scale-2);
    font-weight: var(--weight-semibold);
    margin: 0;
}

dialog .modal-close {
    background: none;
    border: none;
    font-size: var(--scale-4);
    cursor: pointer;
    color: var(--neutral-400);
    line-height: 1;
    padding: var(--size-1);
}

dialog .modal-close:hover {
    color: var(--neutral-600);
}

dialog .modal-body {
    padding: var(--size-5);
}

dialog .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-3);
    padding: var(--size-4) var(--size-5);
    border-top: 1px solid var(--neutral-200);
    background-color: var(--neutral-50);
}

/* Password Strength Indicator */
.password-strength {
    margin-top: var(--size-2);
    display: flex;
    align-items: center;
    gap: var(--size-2);
}

.strength-bar {
    flex: 1;
    height: 4px;
    background-color: var(--neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.strength-bar .strength-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.strength-bar.weak .strength-fill {
    width: 33%;
    background-color: var(--danger-500);
}

.strength-bar.medium .strength-fill {
    width: 66%;
    background-color: var(--warning-500);
}

.strength-bar.strong .strength-fill {
    width: 100%;
    background-color: var(--success-500);
}

.strength-label {
    font-size: var(--scale-00);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.strength-label.weak {
    color: var(--danger-600);
}

.strength-label.medium {
    color: var(--warning-600);
}

.strength-label.strong {
    color: var(--success-600);
}

/* Form Card */
.form-card {
    max-width: 500px;
}

/* Password Requirements */
.password-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    margin-top: var(--size-2);
    font-size: var(--scale-00);
}

.requirement {
    color: var(--neutral-500);
}

.requirement.met {
    color: var(--success-600);
}

.requirement.unmet {
    color: var(--danger-600);
}

.req-icon {
    margin-right: var(--size-1);
}

/* Password Match */
.password-match {
    margin-top: var(--size-2);
    font-size: var(--scale-00);
}

.match-ok {
    color: var(--success-600);
}

.match-error {
    color: var(--danger-600);
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-2);
    margin-top: var(--size-6);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-10);
    min-height: var(--size-10);
    padding: 0 var(--size-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    background-color: var(--white);
    color: var(--neutral-700);
    font-size: var(--scale-00);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--primary-50);
    border-color: var(--primary-500);
    color: var(--primary-700);
}

.pagination-btn.active {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    color: var(--white);
}

.pagination-btn.active:hover {
    background-color: var(--primary-700);
    border-color: var(--primary-700);
}

.pagination-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: var(--neutral-100);
}

/* ========================================
   SHIPMENT TOGGLE BUTTON
   ======================================== */
@keyframes pulse-success {
    0% {
        box-shadow: 0 0 0 0 rgba(10, 143, 76, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(10, 143, 76, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(10, 143, 76, 0);
    }
}

.button.shipped {
    background-color: var(--success-600);
    border-color: var(--success-600);
    color: var(--white);
}

.button.shipped:hover {
    background-color: var(--success-700);
    border-color: var(--success-700);
}

.button.pending {
    background-color: var(--neutral-200);
    border-color: var(--neutral-200);
    color: var(--neutral-600);
}

.button.pending:hover {
    background-color: var(--neutral-300);
    border-color: var(--neutral-300);
}

.button.loading {
    opacity: 0.7;
    cursor: wait;
}

.button.loading svg {
    animation: spin 1s linear infinite;
}

.button.just-saved {
    animation: pulse-success 0.3s ease-out;
}

.button.error {
    animation: shake 0.3s ease-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}