body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
}
.progress-bar-fill {
    background: linear-gradient(90deg, #a3e635, #5B8723);
    transition: width 0.3s ease-in-out;
}
.tabs-wrapper {
    background: linear-gradient(90deg, #062653, #043a5a);
    box-shadow: 0 12px 36px rgba(6,38,83,0.18);
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative; /* for indicator positioning */
    min-height: 56px; /* keeps tabs vertically centered */
}

.tab-btn {
    color: #ffffff;
    background: transparent;
    border: none;
    padding: 0.65rem 1.25rem;
    transition: background 220ms ease, transform 160ms ease, box-shadow 220ms ease, color 160ms ease;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    cursor: pointer;
}

.tab-btn:hover {
    /* hover intentionally disabled to keep tabs visually stable */
    background: transparent;
    transform: none;
}

.tab-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(5,90,150,0.12);
}

.active-tab {
    color: #062653;
    background-color: #ffffff;
    border: 1px solid rgba(6,38,83,0.08);
    box-shadow: 0 10px 30px rgba(6,38,83,0.12);
    transform: none; /* removed vertical shift */
}

/* Animated indicator that slides under the active tab */
/* indicator removed — styles deleted per user request */

/* Small visual polish for non-active tabs to indicate transition */
.tabs-wrapper .tab-btn:not(.active-tab) {
    opacity: 0.95;
}

/* Ensure responsive wrapping stays centered */
@media (max-width: 640px) {
    .tabs-wrapper { gap: 0.4rem; padding: 0.4rem; min-height: 48px; }
    .tab-btn { padding: 0.5rem 0.85rem; font-size: 0.95rem; }
    .tabs-indicator { bottom: 6px; height: 3px; }
}
.active-category, .active-option {
    border-color: #5B8723 !important;
    background-color: #f7fee7 !important;
}
.procedure-item:hover {
    border-color: #072950;
}
.active-procedure {
    background-color: #eef2ff !important;
    border-color: #072950 !important;
    border-left-width: 4px;
}
.custom-shadow {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* Custom Toggle Switch */
.toggle-checkbox:checked + .toggle-bg {
    background-color: #5B8723;
}
.toggle-checkbox:checked + .toggle-bg .toggle-dot {
    transform: translateX(100%);
}

/* Custom Slider */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.2s;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.2s;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #5B8723;
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
input[type=range]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #5B8723;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
/* Notification Toast */
#notification-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 200%);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}
#notification-toast.show {
    transform: translate(-50%, 0);
}