/*
 * Star town Medical System v1.3.4
 * Custom Stylesheet - Orange Theme
 */

/* --- Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

/* --- Theme Color Definitions (Light Mode Default) --- */
:root {
    --color-primary: #F57927;      /* Vibrant Orange */
    --color-primary-hover: #E46A1A; /* Darker Orange for Hover */
    --color-secondary: #FFF3E0;  /* Light Orange for accents */
    --color-warning: #FFCA28;    /* Amber */
    --color-danger: #EF5350;      /* Red */
    --color-danger-soft: #FF8A65; /* Lighter Red for dark mode hover */
    --color-text: #1F2937;        /* Gray 800 */
    --color-text-muted: #6B7280;  /* Gray 500 */
    --color-border: #D1D5DB;      /* Gray 300 */
    --color-bg-base: #F9FAFB;      /* Gray-50 */
    --color-bg-surface: #FFFFFF;  /* White */
}

/* --- Dark Mode Color Definitions --- */
html.dark {
    --color-primary: #F57927;
    --color-primary-hover: #FB8C00;
    --color-secondary: #422C1A;
    --color-text: #E2E8F0;        /* Slate-200 */
    --color-text-muted: #94A3B8;  /* Slate-400 */
    --color-border: #334155;      /* Slate-700 */
    --color-bg-base: #0F172A; /* Slate-900 */
    --color-bg-surface: #1E293B; /* Slate-800 */
}

/* --- Custom Scrollbar Styles --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}
html.dark ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* --- Base Styles --- */
body {
    font-family: 'Kanit', sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Component Styles with Dark Mode Support --- */

/* Button Styles */
.btn {
    font-weight: 500;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    border: 1px solid transparent;
    user-select: none;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.btn-danger {
    background-color: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}
.btn-danger:hover {
    background-color: #d32f2f;
    border-color: #d32f2f;
}
.btn-danger-outline {
    background-color: transparent;
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger-outline:hover {
    background-color: var(--color-danger);
    color: white;
}
html.dark .btn-danger-outline {
    color: var(--color-danger-soft);
    border-color: var(--color-danger-soft);
}
html.dark .btn-danger-outline:hover {
    background-color: var(--color-danger-soft);
    color: var(--color-text);
}
.btn-secondary {
    background-color: #F3F4F6;
    color: #1F2937;
    border-color: #E5E7EB;
}
html.dark .btn-secondary {
    background-color: #334155;
    color: #E2E8F0;
    border-color: #4B5563;
}
.btn-secondary:hover {
    background-color: #E5E7EB;
}
html.dark .btn-secondary:hover {
    background-color: #4B5563;
}

/* Form input styles */
.form-input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-bg-surface);
    color: var(--color-text);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(245, 121, 39, 0.25);
}
html.dark .form-input:focus {
    box-shadow: 0 0 0 3px rgba(245, 121, 39, 0.35);
}
.form-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Navigation */
#main-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    color: var(--color-text-muted);
}
#main-nav .nav-link:hover {
    color: var(--color-primary);
    background-color: #F9FAFB;
    border-color: #F3F4F6;
}
html.dark #main-nav .nav-link:hover {
    background-color: #334155;
    border-color: #4B5563;
}
#main-nav .nav-link.active {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-weight: 600;
    border-color: #FDBA74; /* Orange-300 */
}
html.dark #main-nav .nav-link.active {
    border-color: #7C2D12; /* Orange-900 */
}
#main-nav .nav-link.active i {
    color: var(--color-primary);
}

/* Tab Button Styles */
.tab-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.25rem 0.75rem 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}

/* Badges */
.badge { @apply px-2.5 py-0.5 text-xs font-semibold rounded-full inline-block; }
.badge-pending { @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300; }
.badge-approved { @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300; }
.badge-rejected { @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300; }

/* Loading Spinner */
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--color-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Toastify JS Customization */
.toastify {
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    font-family: 'Kanit', sans-serif !important;
    padding: 12px 20px;
}