/* SIFAT Custom CSS - Based on TailAdmin Template */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --color-brand-50: #ecf3ff;
    --color-brand-100: #dde9ff;
    --color-brand-300: #9cb9ff;
    --color-brand-400: #7592ff;
    --color-brand-500: #465fff;
    --color-brand-600: #3641f5;
    --color-brand-800: #252dae;
    --color-brand-950: #161950;
    --color-success-50: #ecfdf5;
    --color-success-300: #6ce9a6;
    --color-success-500: #12b76a;
    --color-success-600: #039855;
    --color-success-700: #027a48;
    --color-error-50: #fef3f2;
    --color-error-300: #fda29b;
    --color-error-500: #f04438;
    --color-error-600: #d92d20;
    --color-error-700: #b42318;
    --color-warning-50: #fffaeb;
    --color-warning-300: #fec84b;
    --color-warning-500: #f79009;
    --color-warning-600: #dc6803;
    --color-warning-700: #b54708;
    --color-orange-50: #fff6ed;
    --color-orange-400: #fd853a;
    --color-orange-500: #fb6514;
}

body { font-family: 'Outfit', sans-serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Custom z-index */
.z-999999 { z-index: 999999; }
.z-99999 { z-index: 99999; }
.z-9999 { z-index: 9999; }
.z-999 { z-index: 999; }
.z-99 { z-index: 99; }
.z-1 { z-index: 1; }

/* Brand Color Utilities */
.bg-brand-50 { background-color: #ecf3ff; }
.bg-brand-100 { background-color: #dde9ff; }
.bg-brand-300 { background-color: #9cb9ff; }
.bg-brand-400 { background-color: #7592ff; }
.bg-brand-500 { background-color: #465fff; }
.bg-brand-600 { background-color: #3641f5; }
.bg-brand-800 { background-color: #252dae; }
.bg-brand-950 { background-color: #161950; }
.text-brand-400 { color: #7592ff; }
.text-brand-500 { color: #465fff; }
.text-brand-600 { color: #3641f5; }
.hover\:bg-brand-600:hover { background-color: #3641f5; }
.hover\:text-brand-600:hover { color: #3641f5; }
.hover\:text-brand-500:hover { color: #465fff; }
.border-brand-300 { border-color: #9cb9ff; }
.border-brand-500 { border-color: #465fff; }
.border-brand-800 { border-color: #252dae; }
.focus\:border-brand-300:focus { border-color: #9cb9ff; }
.focus\:border-brand-800:focus { border-color: #252dae; }
.focus\:ring-brand-500\/10:focus { --tw-ring-color: rgba(70, 95, 255, 0.1); }
.disabled\:bg-brand-300:disabled { background-color: #9cb9ff; }

/* Success Color Utilities */
.bg-success-50 { background-color: #ecfdf5; }
.bg-success-500 { background-color: #12b76a; }
.text-success-500 { color: #12b76a; }
.text-success-600 { color: #039855; }
.text-success-700 { color: #027a48; }
.border-success-500 { border-color: #12b76a; }

/* Error Color Utilities */
.bg-error-50 { background-color: #fef3f2; }
.bg-error-500 { background-color: #f04438; }
.text-error-500 { color: #f04438; }
.text-error-600 { color: #d92d20; }
.text-error-700 { color: #b42318; }
.border-error-500 { border-color: #f04438; }

/* Warning Color Utilities */
.bg-warning-50 { background-color: #fffaeb; }
.bg-warning-500 { background-color: #f79009; }
.text-warning-500 { color: #f79009; }
.text-warning-600 { color: #dc6803; }
.text-warning-700 { color: #b54708; }
.border-warning-500 { border-color: #f79009; }

/* Orange Color Utilities */
.bg-orange-50 { background-color: #fff6ed; }
.bg-orange-400 { background-color: #fd853a; }
.bg-orange-500 { background-color: #fb6514; }
.text-orange-400 { color: #fd853a; }
.text-orange-500 { color: #fb6514; }

/* Custom Text Sizes */
.text-title-sm { font-size: 30px; line-height: 38px; }
.text-title-md { font-size: 36px; line-height: 44px; }
.text-title-2xl { font-size: 72px; line-height: 90px; }
.text-theme-xl { font-size: 20px; line-height: 30px; }
.text-theme-sm { font-size: 14px; line-height: 20px; }
.text-theme-xs { font-size: 12px; line-height: 18px; }

/* Shadow Utilities */
.shadow-theme-xs { box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); }
.shadow-theme-sm { box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10); }
.shadow-theme-md { box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10); }

/* Focus outline hidden */
.focus\:outline-hidden:focus { outline: none; }

/* Ring 3 */
.focus\:ring-3:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* Dark mode */
.dark .dark\:bg-dark-900 { background-color: #1a1c23; }
.dark .dark\:bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.dark .dark\:bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.dark .dark\:text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.dark .dark\:text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.dark .dark\:text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.dark .dark\:text-white\/30 { color: rgba(255, 255, 255, 0.3); }

/* Sidebar transition */
.sidebar-menu-item { transition: all 0.2s ease; }

/* Max width for screen 2xl */
.max-w-screen-2xl { max-width: 1536px; }