/**
 * MIRS Custom Colors - 離線支援
 * 將 Tailwind config 中的自定義色轉為 CSS
 */

:root {
    /* teal-custom */
    --color-teal-custom-50: #e6f2f2;
    --color-teal-custom-500: #205555;
    --color-teal-custom-600: #194444;
    --color-teal-custom-700: #123333;

    /* teal-variant */
    --color-teal-variant-100: #D5EEEE;
    --color-teal-variant-500: #83D4D2;
    --color-teal-variant-600: #286768;
    --color-teal-variant-700: #2C7471;
    --color-teal-variant-800: #205555;
    --color-teal-variant-900: #224D60;

    /* treatment */
    --color-treatment-50: #F3F2F8;
    --color-treatment-500: #4E5488;

    /* blood */
    --color-blood-50: #FDF5F5;
    --color-blood-200: #F6CCCD;
    --color-blood-500: #CC7251;
    --color-blood-600: #B85D42;

    /* claude-red */
    --color-claude-red-500: #D96754;
    --color-claude-red-600: #C4564A;

    /* equipment */
    --color-equipment-100: #E8E3DB;
    --color-equipment-200: #D7C8B0;
    --color-equipment-500: #6C7362;
    --color-equipment-900: #2D3531;

    /* sky-custom */
    --color-sky-custom-500: #5B9BD5;
    --color-sky-custom-600: #245FA7;

    /* dispense-purple */
    --color-dispense-purple-50: #f5f3f9;
    --color-dispense-purple-500: #9cacb5;
    --color-dispense-purple-700: #7e2e83;
    --color-dispense-purple-900: #371e7e;

    /* pharma */
    --color-pharma-50: #f0fdfa;
    --color-pharma-100: #ccfbf1;
    --color-pharma-200: #99f6e4;
    --color-pharma-500: #14b8a6;
    --color-pharma-600: #0d9488;
    --color-pharma-700: #0f766e;
    --color-pharma-900: #115e59;
}

/* =============== teal-custom =============== */
.bg-teal-custom-50 { background-color: var(--color-teal-custom-50) !important; }
.bg-teal-custom-500 { background-color: var(--color-teal-custom-500) !important; }
.bg-teal-custom-600 { background-color: var(--color-teal-custom-600) !important; }
.bg-teal-custom-700 { background-color: var(--color-teal-custom-700) !important; }
.text-teal-custom-50 { color: var(--color-teal-custom-50) !important; }
.text-teal-custom-500 { color: var(--color-teal-custom-500) !important; }
.text-teal-custom-600 { color: var(--color-teal-custom-600) !important; }
.text-teal-custom-700 { color: var(--color-teal-custom-700) !important; }
.border-teal-custom-500 { border-color: var(--color-teal-custom-500) !important; }
.border-teal-custom-600 { border-color: var(--color-teal-custom-600) !important; }
.ring-teal-custom-500 { --tw-ring-color: var(--color-teal-custom-500) !important; }
.focus\:ring-teal-custom-500:focus { --tw-ring-color: var(--color-teal-custom-500) !important; }
.hover\:bg-teal-custom-600:hover { background-color: var(--color-teal-custom-600) !important; }
.hover\:bg-teal-custom-700:hover { background-color: var(--color-teal-custom-700) !important; }
.hover\:text-teal-custom-500:hover { color: var(--color-teal-custom-500) !important; }
.hover\:text-teal-custom-600:hover { color: var(--color-teal-custom-600) !important; }
.hover\:border-teal-custom-500:hover { border-color: var(--color-teal-custom-500) !important; }
.from-teal-custom-500 { --tw-gradient-from: var(--color-teal-custom-500) !important; }
.to-teal-custom-600 { --tw-gradient-to: var(--color-teal-custom-600) !important; }

/* =============== teal-variant =============== */
.bg-teal-variant-100 { background-color: var(--color-teal-variant-100) !important; }
.bg-teal-variant-500 { background-color: var(--color-teal-variant-500) !important; }
.bg-teal-variant-600 { background-color: var(--color-teal-variant-600) !important; }
.bg-teal-variant-700 { background-color: var(--color-teal-variant-700) !important; }
.bg-teal-variant-800 { background-color: var(--color-teal-variant-800) !important; }
.bg-teal-variant-900 { background-color: var(--color-teal-variant-900) !important; }
.text-teal-variant-100 { color: var(--color-teal-variant-100) !important; }
.text-teal-variant-500 { color: var(--color-teal-variant-500) !important; }
.text-teal-variant-600 { color: var(--color-teal-variant-600) !important; }
.text-teal-variant-700 { color: var(--color-teal-variant-700) !important; }
.text-teal-variant-800 { color: var(--color-teal-variant-800) !important; }
.text-teal-variant-900 { color: var(--color-teal-variant-900) !important; }
.border-teal-variant-500 { border-color: var(--color-teal-variant-500) !important; }
.border-teal-variant-600 { border-color: var(--color-teal-variant-600) !important; }
.from-teal-variant-800 { --tw-gradient-from: var(--color-teal-variant-800) !important; }
.to-teal-variant-600 { --tw-gradient-to: var(--color-teal-variant-600) !important; }

/* =============== treatment =============== */
/* 完整色階 - 基於 #4E5488 生成 */
.bg-treatment-50 { background-color: #f3f3f7 !important; }
.bg-treatment-100 { background-color: #e7e8ef !important; }
.bg-treatment-200 { background-color: #c8cad9 !important; }
.bg-treatment-300 { background-color: #a8abc3 !important; }
.bg-treatment-400 { background-color: #7b80a6 !important; }
.bg-treatment-500 { background-color: #4E5488 !important; }
.bg-treatment-600 { background-color: #3d4270 !important; }
.bg-treatment-700 { background-color: #2f3358 !important; }
.text-treatment-50 { color: #f3f3f7 !important; }
.text-treatment-100 { color: #e7e8ef !important; }
.text-treatment-200 { color: #c8cad9 !important; }
.text-treatment-500 { color: #4E5488 !important; }
.text-treatment-600 { color: #3d4270 !important; }
.text-treatment-700 { color: #2f3358 !important; }
.border-treatment-100 { border-color: #e7e8ef !important; }
.border-treatment-200 { border-color: #c8cad9 !important; }
.border-treatment-300 { border-color: #a8abc3 !important; }
.border-treatment-400 { border-color: #7b80a6 !important; }
.border-treatment-500 { border-color: #4E5488 !important; }
.hover\:bg-treatment-100:hover { background-color: #e7e8ef !important; }
.hover\:bg-treatment-600:hover { background-color: #3d4270 !important; }
.hover\:border-treatment-400:hover { border-color: #7b80a6 !important; }
.focus\:ring-treatment-500:focus { --tw-ring-color: #4E5488 !important; }
.ring-treatment-500 { --tw-ring-color: #4E5488 !important; }

/* =============== blood =============== */
.bg-blood-50 { background-color: var(--color-blood-50) !important; }
.bg-blood-200 { background-color: var(--color-blood-200) !important; }
.bg-blood-500 { background-color: var(--color-blood-500) !important; }
.bg-blood-600 { background-color: var(--color-blood-600) !important; }
.text-blood-50 { color: var(--color-blood-50) !important; }
.text-blood-500 { color: var(--color-blood-500) !important; }
.text-blood-600 { color: var(--color-blood-600) !important; }
.border-blood-500 { border-color: var(--color-blood-500) !important; }
.hover\:bg-blood-500:hover { background-color: var(--color-blood-500) !important; }
.hover\:bg-blood-600:hover { background-color: var(--color-blood-600) !important; }

/* =============== claude-red =============== */
.bg-claude-red-500 { background-color: var(--color-claude-red-500) !important; }
.bg-claude-red-600 { background-color: var(--color-claude-red-600) !important; }
.text-claude-red-500 { color: var(--color-claude-red-500) !important; }
.text-claude-red-600 { color: var(--color-claude-red-600) !important; }
.hover\:bg-claude-red-600:hover { background-color: var(--color-claude-red-600) !important; }

/* =============== equipment =============== */
.bg-equipment-100 { background-color: var(--color-equipment-100) !important; }
.bg-equipment-200 { background-color: var(--color-equipment-200) !important; }
.bg-equipment-500 { background-color: var(--color-equipment-500) !important; }
.bg-equipment-900 { background-color: var(--color-equipment-900) !important; }
.text-equipment-500 { color: var(--color-equipment-500) !important; }
.text-equipment-900 { color: var(--color-equipment-900) !important; }
.border-equipment-500 { border-color: var(--color-equipment-500) !important; }

/* =============== sky-custom =============== */
.bg-sky-custom-500 { background-color: var(--color-sky-custom-500) !important; }
.bg-sky-custom-600 { background-color: var(--color-sky-custom-600) !important; }
.text-sky-custom-500 { color: var(--color-sky-custom-500) !important; }
.text-sky-custom-600 { color: var(--color-sky-custom-600) !important; }
.hover\:bg-sky-custom-600:hover { background-color: var(--color-sky-custom-600) !important; }

/* =============== dispense-purple =============== */
.bg-dispense-purple-50 { background-color: var(--color-dispense-purple-50) !important; }
.bg-dispense-purple-500 { background-color: var(--color-dispense-purple-500) !important; }
.bg-dispense-purple-700 { background-color: var(--color-dispense-purple-700) !important; }
.bg-dispense-purple-900 { background-color: var(--color-dispense-purple-900) !important; }
.text-dispense-purple-500 { color: var(--color-dispense-purple-500) !important; }
.text-dispense-purple-700 { color: var(--color-dispense-purple-700) !important; }
.text-dispense-purple-900 { color: var(--color-dispense-purple-900) !important; }
.from-dispense-purple-900 { --tw-gradient-from: var(--color-dispense-purple-900) !important; }
.to-dispense-purple-700 { --tw-gradient-to: var(--color-dispense-purple-700) !important; }

/* =============== pharma =============== */
.bg-pharma-50 { background-color: var(--color-pharma-50) !important; }
.bg-pharma-100 { background-color: var(--color-pharma-100) !important; }
.bg-pharma-200 { background-color: var(--color-pharma-200) !important; }
.bg-pharma-500 { background-color: var(--color-pharma-500) !important; }
.bg-pharma-600 { background-color: var(--color-pharma-600) !important; }
.bg-pharma-700 { background-color: var(--color-pharma-700) !important; }
.bg-pharma-900 { background-color: var(--color-pharma-900) !important; }
.text-pharma-500 { color: var(--color-pharma-500) !important; }
.text-pharma-600 { color: var(--color-pharma-600) !important; }
.text-pharma-700 { color: var(--color-pharma-700) !important; }
.text-pharma-900 { color: var(--color-pharma-900) !important; }
.border-pharma-200 { border-color: var(--color-pharma-200) !important; }
.border-pharma-500 { border-color: var(--color-pharma-500) !important; }
.border-pharma-600 { border-color: var(--color-pharma-600) !important; }
.hover\:bg-pharma-200:hover { background-color: var(--color-pharma-200) !important; }
.hover\:bg-pharma-600:hover { background-color: var(--color-pharma-600) !important; }
.hover\:bg-pharma-700:hover { background-color: var(--color-pharma-700) !important; }
.focus\:ring-pharma-500:focus { --tw-ring-color: var(--color-pharma-500) !important; }
.ring-pharma-500 { --tw-ring-color: var(--color-pharma-500) !important; }

/* =============== primary (alias to teal) =============== */
.bg-primary-50 { background-color: #f0fdfa !important; }
.bg-primary-100 { background-color: #ccfbf1 !important; }
.bg-primary-200 { background-color: #99f6e4 !important; }
.bg-primary-300 { background-color: #5eead4 !important; }
.bg-primary-400 { background-color: #2dd4bf !important; }
.bg-primary-500 { background-color: #14b8a6 !important; }
.bg-primary-600 { background-color: #0d9488 !important; }
.bg-primary-700 { background-color: #0f766e !important; }
.bg-primary-800 { background-color: #115e59 !important; }
.bg-primary-900 { background-color: #134e4a !important; }
.text-primary-50 { color: #f0fdfa !important; }
.text-primary-100 { color: #ccfbf1 !important; }
.text-primary-500 { color: #14b8a6 !important; }
.text-primary-600 { color: #0d9488 !important; }
.text-primary-700 { color: #0f766e !important; }
.text-primary-800 { color: #115e59 !important; }
.text-primary-900 { color: #134e4a !important; }
.border-primary-500 { border-color: #14b8a6 !important; }
.border-primary-600 { border-color: #0d9488 !important; }
.hover\:bg-primary-600:hover { background-color: #0d9488 !important; }
.hover\:bg-primary-700:hover { background-color: #0f766e !important; }
.ring-primary-500 { --tw-ring-color: #14b8a6 !important; }
.focus\:ring-primary-500:focus { --tw-ring-color: #14b8a6 !important; }

/* =============== Standard Tailwind Colors (Missing from tailwind.min.css) =============== */

/* --- Teal (標準 Tailwind) --- */
.bg-teal-50 { background-color: #f0fdfa !important; }
.bg-teal-100 { background-color: #ccfbf1 !important; }
.bg-teal-200 { background-color: #99f6e4 !important; }
.bg-teal-300 { background-color: #5eead4 !important; }
.bg-teal-400 { background-color: #2dd4bf !important; }
.bg-teal-500 { background-color: #14b8a6 !important; }
.bg-teal-600 { background-color: #0d9488 !important; }
.bg-teal-700 { background-color: #0f766e !important; }
.bg-teal-800 { background-color: #115e59 !important; }
.bg-teal-900 { background-color: #134e4a !important; }
.text-teal-50 { color: #f0fdfa !important; }
.text-teal-100 { color: #ccfbf1 !important; }
.text-teal-500 { color: #14b8a6 !important; }
.text-teal-600 { color: #0d9488 !important; }
.text-teal-700 { color: #0f766e !important; }
.text-teal-800 { color: #115e59 !important; }
.border-teal-500 { border-color: #14b8a6 !important; }
.border-teal-600 { border-color: #0d9488 !important; }
.hover\:bg-teal-500:hover { background-color: #14b8a6 !important; }
.hover\:bg-teal-600:hover { background-color: #0d9488 !important; }
.hover\:bg-teal-700:hover { background-color: #0f766e !important; }
.hover\:text-teal-600:hover { color: #0d9488 !important; }
.hover\:text-teal-700:hover { color: #0f766e !important; }
.hover\:text-teal-800:hover { color: #115e59 !important; }
.focus\:ring-teal-300:focus { --tw-ring-color: #5eead4 !important; }
.focus\:ring-teal-500:focus { --tw-ring-color: #14b8a6 !important; }

/* --- Amber (標準 Tailwind) --- */
.bg-amber-50 { background-color: #fffbeb !important; }
.bg-amber-100 { background-color: #fef3c7 !important; }
.bg-amber-200 { background-color: #fde68a !important; }
.bg-amber-300 { background-color: #fcd34d !important; }
.bg-amber-400 { background-color: #fbbf24 !important; }
.bg-amber-500 { background-color: #f59e0b !important; }
.bg-amber-600 { background-color: #d97706 !important; }
.bg-amber-700 { background-color: #b45309 !important; }
.bg-amber-800 { background-color: #92400e !important; }
.bg-amber-900 { background-color: #78350f !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-amber-600 { color: #d97706 !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-800 { color: #92400e !important; }
.border-amber-200 { border-color: #fde68a !important; }
.border-amber-300 { border-color: #fcd34d !important; }
.border-amber-400 { border-color: #fbbf24 !important; }
.hover\:bg-amber-50:hover { background-color: #fffbeb !important; }
.hover\:bg-amber-200:hover { background-color: #fde68a !important; }
.hover\:bg-amber-600:hover { background-color: #d97706 !important; }
.hover\:text-amber-600:hover { color: #d97706 !important; }
.hover\:text-amber-700:hover { color: #b45309 !important; }
.focus\:ring-amber-500:focus { --tw-ring-color: #f59e0b !important; }

/* --- Cyan (標準 Tailwind) --- */
.bg-cyan-50 { background-color: #ecfeff !important; }
.bg-cyan-100 { background-color: #cffafe !important; }
.bg-cyan-500 { background-color: #06b6d4 !important; }
.bg-cyan-600 { background-color: #0891b2 !important; }
.bg-cyan-700 { background-color: #0e7490 !important; }
.bg-cyan-800 { background-color: #155e75 !important; }
.text-cyan-600 { color: #0891b2 !important; }
.text-cyan-700 { color: #0e7490 !important; }
.hover\:bg-cyan-700:hover { background-color: #0e7490 !important; }
.hover\:text-cyan-800:hover { color: #155e75 !important; }
.focus\:ring-cyan-500:focus { --tw-ring-color: #06b6d4 !important; }

/* --- Sky (標準 Tailwind) --- */
.bg-sky-50 { background-color: #f0f9ff !important; }
.bg-sky-100 { background-color: #e0f2fe !important; }
.bg-sky-500 { background-color: #0ea5e9 !important; }
.bg-sky-600 { background-color: #0284c7 !important; }
.bg-sky-700 { background-color: #0369a1 !important; }
.bg-sky-800 { background-color: #075985 !important; }
.text-sky-600 { color: #0284c7 !important; }
.text-sky-700 { color: #0369a1 !important; }
.hover\:bg-sky-100:hover { background-color: #e0f2fe !important; }
.hover\:bg-sky-700:hover { background-color: #0369a1 !important; }

/* --- Orange (標準 Tailwind) --- */
.bg-orange-50 { background-color: #fff7ed !important; }
.bg-orange-100 { background-color: #ffedd5 !important; }
.bg-orange-500 { background-color: #f97316 !important; }
.bg-orange-600 { background-color: #ea580c !important; }
.bg-orange-700 { background-color: #c2410c !important; }
.text-orange-100 { color: #ffedd5 !important; }
.text-orange-600 { color: #ea580c !important; }
.text-orange-700 { color: #c2410c !important; }
.border-orange-200 { border-color: #fed7aa !important; }
.border-orange-400 { border-color: #fb923c !important; }
.hover\:bg-orange-700:hover { background-color: #c2410c !important; }

/* --- Blue (標準 Tailwind) - Toast 通知用 --- */
.bg-blue-50 { background-color: #eff6ff !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.bg-blue-200 { background-color: #bfdbfe !important; }
.bg-blue-300 { background-color: #93c5fd !important; }
.bg-blue-400 { background-color: #60a5fa !important; }
.bg-blue-500 { background-color: #3b82f6 !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-blue-700 { background-color: #1d4ed8 !important; }
.bg-blue-800 { background-color: #1e40af !important; }
.bg-blue-900 { background-color: #1e3a8a !important; }
.text-blue-50 { color: #eff6ff !important; }
.text-blue-100 { color: #dbeafe !important; }
.text-blue-200 { color: #bfdbfe !important; }
.text-blue-500 { color: #3b82f6 !important; }
.text-blue-600 { color: #2563eb !important; }
.text-blue-700 { color: #1d4ed8 !important; }
.text-blue-800 { color: #1e40af !important; }
.border-blue-200 { border-color: #bfdbfe !important; }
.border-blue-300 { border-color: #93c5fd !important; }
.border-blue-500 { border-color: #3b82f6 !important; }
.hover\:bg-blue-600:hover { background-color: #2563eb !important; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }
.hover\:text-blue-800:hover { color: #1e40af !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6 !important; }
.ring-blue-500 { --tw-ring-color: #3b82f6 !important; }

/* --- Indigo (標準 Tailwind) --- */
.bg-indigo-50 { background-color: #eef2ff !important; }
.bg-indigo-100 { background-color: #e0e7ff !important; }
.bg-indigo-500 { background-color: #6366f1 !important; }
.bg-indigo-600 { background-color: #4f46e5 !important; }
.bg-indigo-700 { background-color: #4338ca !important; }
.text-indigo-600 { color: #4f46e5 !important; }
.hover\:bg-indigo-700:hover { background-color: #4338ca !important; }
.hover\:text-indigo-800:hover { color: #3730a3 !important; }

/* --- Violet (標準 Tailwind) - 術式主檔用 --- */
.bg-violet-50 { background-color: #f5f3ff !important; }
.bg-violet-100 { background-color: #ede9fe !important; }
.bg-violet-200 { background-color: #ddd6fe !important; }
.bg-violet-300 { background-color: #c4b5fd !important; }
.bg-violet-400 { background-color: #a78bfa !important; }
.bg-violet-500 { background-color: #8b5cf6 !important; }
.bg-violet-600 { background-color: #7c3aed !important; }
.bg-violet-700 { background-color: #6d28d9 !important; }
.bg-violet-800 { background-color: #5b21b6 !important; }
.bg-violet-900 { background-color: #4c1d95 !important; }
.text-violet-50 { color: #f5f3ff !important; }
.text-violet-100 { color: #ede9fe !important; }
.text-violet-500 { color: #8b5cf6 !important; }
.text-violet-600 { color: #7c3aed !important; }
.text-violet-700 { color: #6d28d9 !important; }
.text-violet-800 { color: #5b21b6 !important; }
.border-violet-200 { border-color: #ddd6fe !important; }
.border-violet-300 { border-color: #c4b5fd !important; }
.border-violet-400 { border-color: #a78bfa !important; }
.border-violet-500 { border-color: #8b5cf6 !important; }
.hover\:bg-violet-100:hover { background-color: #ede9fe !important; }
.hover\:bg-violet-600:hover { background-color: #7c3aed !important; }
.hover\:bg-violet-700:hover { background-color: #6d28d9 !important; }
.hover\:border-violet-400:hover { border-color: #a78bfa !important; }
.focus\:ring-violet-500:focus { --tw-ring-color: #8b5cf6 !important; }
.ring-violet-500 { --tw-ring-color: #8b5cf6 !important; }

/* --- Purple (標準 Tailwind) --- */
.bg-purple-50 { background-color: #faf5ff !important; }
.bg-purple-100 { background-color: #f3e8ff !important; }
.bg-purple-200 { background-color: #e9d5ff !important; }
.bg-purple-500 { background-color: #a855f7 !important; }
.bg-purple-600 { background-color: #9333ea !important; }
.bg-purple-700 { background-color: #7e22ce !important; }
.text-purple-500 { color: #a855f7 !important; }
.text-purple-600 { color: #9333ea !important; }
.text-purple-700 { color: #7e22ce !important; }
.border-purple-300 { border-color: #d8b4fe !important; }
.hover\:bg-purple-200:hover { background-color: #e9d5ff !important; }
.hover\:bg-purple-700:hover { background-color: #7e22ce !important; }

/* --- Red (標準 Tailwind) - 血袋庫存用 --- */
.bg-red-50 { background-color: #fef2f2 !important; }
.bg-red-100 { background-color: #fee2e2 !important; }
.bg-red-200 { background-color: #fecaca !important; }
.bg-red-300 { background-color: #fca5a5 !important; }
.bg-red-400 { background-color: #f87171 !important; }
.bg-red-500 { background-color: #ef4444 !important; }
.bg-red-600 { background-color: #dc2626 !important; }
.bg-red-700 { background-color: #b91c1c !important; }
.bg-red-800 { background-color: #991b1b !important; }
.bg-red-900 { background-color: #7f1d1d !important; }
.bg-red-950 { background-color: #450a0a !important; }
.text-red-50 { color: #fef2f2 !important; }
.text-red-100 { color: #fee2e2 !important; }
.text-red-200 { color: #fecaca !important; }
.text-red-500 { color: #ef4444 !important; }
.text-red-600 { color: #dc2626 !important; }
.text-red-700 { color: #b91c1c !important; }
.text-red-800 { color: #991b1b !important; }
.text-red-900 { color: #7f1d1d !important; }
.border-red-200 { border-color: #fecaca !important; }
.border-red-300 { border-color: #fca5a5 !important; }
.border-red-500 { border-color: #ef4444 !important; }
.border-red-700 { border-color: #b91c1c !important; }
.hover\:bg-red-600:hover { background-color: #dc2626 !important; }
.hover\:bg-red-700:hover { background-color: #b91c1c !important; }
.hover\:bg-red-800:hover { background-color: #991b1b !important; }
.hover\:text-red-600:hover { color: #dc2626 !important; }
.hover\:text-red-800:hover { color: #991b1b !important; }
.hover\:border-red-500:hover { border-color: #ef4444 !important; }
.focus\:ring-red-500:focus { --tw-ring-color: #ef4444 !important; }
.ring-red-500 { --tw-ring-color: #ef4444 !important; }
/* Gradient support for blood inventory */
.from-red-900 { --tw-gradient-from: #7f1d1d !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(127, 29, 29, 0)) !important; }
.to-red-950 { --tw-gradient-to: #450a0a !important; }
.bg-opacity-50 { --tw-bg-opacity: 0.5 !important; }
.backdrop-blur { backdrop-filter: blur(8px) !important; }

/* --- Amber/Orange Gradients (EMT Transfer PWA) --- */
.from-amber-500 { --tw-gradient-from: #f59e0b !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0)) !important; }
.to-amber-600 { --tw-gradient-to: #d97706 !important; }
.to-orange-500 { --tw-gradient-to: #f97316 !important; }
.from-orange-500 { --tw-gradient-from: #f97316 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0)) !important; }
.to-orange-600 { --tw-gradient-to: #ea580c !important; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.bg-white\/30 { background-color: rgba(255, 255, 255, 0.3) !important; }
.opacity-80 { opacity: 0.8 !important; }

/* --- Pink (標準 Tailwind) - Nurse PWA / 交班 Modal 用 --- */
.bg-pink-50 { background-color: #fdf2f8 !important; }
.bg-pink-100 { background-color: #fce7f3 !important; }
.bg-pink-200 { background-color: #fbcfe8 !important; }
.bg-pink-300 { background-color: #f9a8d4 !important; }
.bg-pink-400 { background-color: #f472b6 !important; }
.bg-pink-500 { background-color: #ec4899 !important; }
.bg-pink-600 { background-color: #db2777 !important; }
.bg-pink-700 { background-color: #be185d !important; }
.bg-pink-800 { background-color: #9d174d !important; }
.text-pink-50 { color: #fdf2f8 !important; }
.text-pink-100 { color: #fce7f3 !important; }
.text-pink-200 { color: #fbcfe8 !important; }
.text-pink-500 { color: #ec4899 !important; }
.text-pink-600 { color: #db2777 !important; }
.text-pink-700 { color: #be185d !important; }
.text-pink-800 { color: #9d174d !important; }
.border-pink-200 { border-color: #fbcfe8 !important; }
.border-pink-300 { border-color: #f9a8d4 !important; }
.border-pink-400 { border-color: #f472b6 !important; }
.border-pink-500 { border-color: #ec4899 !important; }
.hover\:bg-pink-600:hover { background-color: #db2777 !important; }
.hover\:bg-pink-700:hover { background-color: #be185d !important; }
.hover\:bg-pink-800:hover { background-color: #9d174d !important; }
.focus\:border-pink-400:focus { border-color: #f472b6 !important; }
.focus\:ring-pink-400:focus { --tw-ring-color: #f472b6 !important; }
.focus\:ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important; --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; }

/* --- Toggle Switch (配對模態窗滑動切換) --- */
/* sr-only: 視覺隱藏但保留給螢幕閱讀器 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* Toggle 開關基礎樣式 */
.toggle-switch {
    position: relative;
    width: 2.75rem;  /* w-11 */
    height: 1.5rem;  /* h-6 */
    background-color: #e5e7eb;  /* bg-gray-200 */
    border-radius: 9999px;
    transition: background-color 0.2s;
    cursor: pointer;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;  /* w-5 */
    height: 1.25rem; /* h-5 */
    background-color: white;
    border: 1px solid #d1d5db;  /* border-gray-300 */
    border-radius: 9999px;
    transition: transform 0.2s;
}

/* Checked 狀態 (支援 input:checked 和 .active 類別) */
input[type="checkbox"]:checked + .toggle-switch,
.toggle-switch.active {
    background-color: #14b8a6;  /* teal-500 */
}

input[type="checkbox"]:checked + .toggle-switch::after,
.toggle-switch.active::after {
    transform: translateX(100%);
    border-color: white;
}

/* 各色系 Toggle (支援 input:checked 和 .active 類別) */
input[type="checkbox"]:checked + .toggle-switch.toggle-teal,
.toggle-switch.toggle-teal.active { background-color: #0d9488 !important; }

input[type="checkbox"]:checked + .toggle-switch.toggle-cyan,
.toggle-switch.toggle-cyan.active { background-color: #06b6d4 !important; }

input[type="checkbox"]:checked + .toggle-switch.toggle-blood,
.toggle-switch.toggle-blood.active { background-color: #D96754 !important; }

input[type="checkbox"]:checked + .toggle-switch.toggle-sky,
.toggle-switch.toggle-sky.active { background-color: #0ea5e9 !important; }

/* Peer-based Toggle (Tailwind peer modifier fallback) */
/* 當 checkbox 被選中時，相鄰的 div 樣式變化 */
input.peer:checked ~ div,
input.peer:checked + div {
    background-color: #0d9488 !important;  /* 預設 teal */
}

input.peer:checked ~ div::after,
input.peer:checked + div::after {
    transform: translateX(100%) !important;
    border-color: white !important;
}

/* Focus ring for peer */
input.peer:focus ~ div,
input.peer:focus + div {
    outline: none;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3);
}

/*
 * Tailwind peer-checked 替代方案
 * 這些選擇器模擬 peer-checked:bg-{color}-600 效果
 */
.peer-toggle {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background-color: #e5e7eb;
    border-radius: 9999px;
    transition: all 0.2s;
}

.peer-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    transition: transform 0.2s;
}

/* 通用 peer-checked 樣式 (用 :has 選擇器支援現代瀏覽器) */
label:has(input[type="checkbox"]:checked) .peer-toggle,
div:has(input.peer:checked) > div:last-child,
.relative:has(input.peer:checked) > div:last-child {
    background-color: #0d9488 !important;
}

label:has(input[type="checkbox"]:checked) .peer-toggle::after,
div:has(input.peer:checked) > div:last-child::after,
.relative:has(input.peer:checked) > div:last-child::after {
    transform: translateX(100%) !important;
    border-color: white !important;
}