/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

/* Iconify alignment fix — ทำให้ icon ตรงกลางเสมอเมื่ออยู่ใน flex container */
iconify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
}

[v-cloak] { 
    display: none; 
}

/* Custom Scrollbar */
::-webkit-scrollbar { 
    width: 6px; 
}
::-webkit-scrollbar-track { 
    background: transparent; 
}
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}

/* Thin scrollbar for horizontal scrolling */
.scrollbar-thin::-webkit-scrollbar {
    height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.scrollbar-thin {
    scrollbar-width: thin;
}

/* Hide scrollbar entirely but keep scrolling */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Utilities */
.glass-panel { 
    background: white; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); 
}

/* Breadcrumbs */
.breadcrumb-item:last-child { 
    color: #0f172a; 
    font-weight: 700; 
    pointer-events: none; 
}
.breadcrumb-item:not(:last-child) { 
    color: #64748b; 
    cursor: pointer; 
}
.breadcrumb-item:not(:last-child):hover { 
    color: #6366f1; 
    text-decoration: underline; 
}

/* Modal Transitions (Global) */
.modal-enter-active, .modal-leave-active {
    transition: opacity 0.3s ease;
}
.modal-enter-from, .modal-leave-to {
    opacity: 0;
}
.modal-enter-active .modal-container, .modal-leave-active .modal-container {
    transition: transform 0.3s ease;
}
.modal-enter-from .modal-container, .modal-leave-to .modal-container {
    transform: scale(0.95);
}

/* Mobile Modal: slide up from bottom, near full-screen */
@media (max-width: 639px) {
    .modal-enter-from .modal-container, .modal-leave-to .modal-container {
        transform: translateY(60px) scale(0.98);
    }
    .modal-enter-active .modal-container, .modal-leave-active .modal-container {
        transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* Session Warning Banner */
.session-warn-enter-active, .session-warn-leave-active { transition: all 0.3s ease; }
.session-warn-enter-from, .session-warn-leave-to { opacity: 0; transform: translateY(-100%); max-height: 0; }
.session-warn-enter-to, .session-warn-leave-from { opacity: 1; max-height: 60px; }

/* Confirm Dialog Animation */
@keyframes confirmPop {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.confirm-fade-enter-active { transition: opacity 0.15s ease; }
.confirm-fade-leave-active { transition: opacity 0.1s ease; }
.confirm-fade-enter-from,
.confirm-fade-leave-to { opacity: 0; }

/* Toast Animation */
.toast-enter-active, .toast-leave-active {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-enter-from, .toast-leave-to {
    opacity: 0;
    transform: translateX(110%) scale(0.95);
}
.toast-move {
    transition: transform 0.3s ease;
}

/* Toast Progress Bar */
@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}
.toast-progress {
    animation: toastProgress linear forwards;
}

/* ============================================ */
/* DARK MODE OVERRIDES                          */
/* ============================================ */

/* Base surfaces */
.dark .bg-white { background-color: #1e293b !important; }
.dark .bg-slate-50, .dark .bg-slate-50\/50, .dark .bg-slate-50\/80, .dark .bg-slate-50\/95 { background-color: #0f172a !important; }
.dark .bg-slate-100 { background-color: #1e293b !important; }

/* Borders */
.dark .border-slate-200, .dark .border-slate-100, .dark .border-slate-200\/60 { border-color: #334155 !important; }
.dark .border-slate-300 { border-color: #475569 !important; }

/* Text */
.dark .text-slate-900, .dark .text-slate-800 { color: #f1f5f9 !important; }
.dark .text-slate-700 { color: #e2e8f0 !important; }
.dark .text-slate-600 { color: #cbd5e1 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }
.dark .text-slate-400 { color: #64748b !important; }

/* Shadows */
.dark .shadow-sm, .dark .shadow-md, .dark .shadow-xl, .dark .shadow-2xl {
    --tw-shadow-color: rgba(0, 0, 0, 0.3) !important;
}

/* Header/Footer */
.dark .bg-white\/95 { background-color: rgba(30, 41, 59, 0.95) !important; }

/* Cards */
.dark .glass-panel {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Inputs */
.dark input, .dark select, .dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.dark input::placeholder { color: #475569 !important; }

/* Modals */
.dark .bg-black\/40 { background-color: rgba(0, 0, 0, 0.6) !important; }

/* Scrollbar */
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Tables */
.dark table thead { background-color: #1e293b !important; }
.dark table tr { border-color: #1e293b !important; }
.dark table tr:hover { background-color: rgba(51, 65, 85, 0.4) !important; }

/* Hover states */
.dark .hover\:bg-slate-50:hover, .dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
.dark .hover\:bg-white:hover { background-color: #1e293b !important; }

/* ============================================ */
/* MOBILE RESPONSIVE ENHANCEMENTS               */
/* ============================================ */

/* Bottom nav spacer — prevent content from being hidden behind mobile nav */
.mobile-nav-spacer {
    display: none;
}
@media (max-width: 639px) {
    .mobile-nav-spacer {
        display: block;
        height: 64px; /* matches bottom nav height */
    }
}

/* Mobile modal sizing — make modals nearly full screen on phones */
@media (max-width: 639px) {
    [class*="fixed inset-0"][class*="flex items-center justify-center"] {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    [class*="fixed inset-0"] > .modal-container,
    [class*="fixed inset-0"] > [class*="max-w-"] {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 95vh !important;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        margin: 0 !important;
    }
}

/* Improve touch targets on mobile */
@media (max-width: 639px) {
    button, a, [role="button"] {
        min-height: 36px;
    }
}

/* Mobile-friendly main content — no extra rule needed, handled via Tailwind classes */

/* Hide footer on mobile — bottom nav replaces it */
@media (max-width: 639px) {
    footer.shrink-0 {
        display: none;
    }
}

/* Bottom nav dark mode */
.dark .safe-area-bottom {
    background-color: rgba(30, 41, 59, 0.95) !important;
    border-color: #334155 !important;
}

/* iOS safe area support for bottom nav */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Prevent body scroll bounce on iOS */
@media (max-width: 639px) {
    html, body {
        overscroll-behavior: none;
    }
}