:root {
    --primary-blue: #2563EB; /* blue-600 */
    --primary-blue-light: #EFF6FF; /* blue-50 */
    --primary-green: #16A34A; /* green-600 */
    --primary-green-light: #F0FDF4; /* green-50 */
    --primary-orange: #EA580C; /* orange-600 */
    --primary-orange-light: #FFF7ED; /* orange-50 */
    --primary-red: #DC2626; /* red-600 */
    --primary-red-light: #FEF2F2; /* red-50 */
    --text-dark: #1F2937; /* gray-800 */
    --text-medium: #4B5563; /* gray-600 */
    --text-light: #6B7280; /* gray-500 */
    --border-color: #E5E7EB; /* gray-200 */
    --bg-light: #F9FAFB; /* gray-50 */
    --bg-white: #FFFFFF;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--bg-light);
}

#app-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#app-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Screen Transitions */
.screen-enter {
    animation: fadeIn 0.3s ease-in-out forwards;
}

.screen-exit {
    animation: fadeOut 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* Tab Styles */
.tab-item {
    @apply w-1/3 py-4 px-1 text-center border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors;
}

.tab-item.active-tab {
    @apply border-blue-600 text-blue-600;
}

/* Timeline Styles */
.timeline-item {
    position: relative;
    padding-left: 2.5rem; /* space for icon and line */
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    transform: translateX(-50%);
    left: 1.25rem;
}

.timeline-line {
    position: absolute;
    left: 1.25rem;
    top: 2.5rem; /* start below the icon */
    width: 2px;
    height: calc(100% - 1.5rem);
    background-color: var(--border-color);
}

/* Record Modal animation (slide up) */
.modal-enter .rounded-t-2xl {
    animation: slideUp 0.3s ease-out forwards;
}

.modal-exit .rounded-t-2xl {
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* Patient Modal animation (scale/fade in) */
.center-modal-enter .modal-content {
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.center-modal-exit .modal-content {
    animation: scaleOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}


/* FAB animation */
.fab-enter {
    animation: fabIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.fab-exit {
    animation: fabOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes fabIn {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fabOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }
}