/* =========================
   ACTIVE / INACTIVE STEPS
========================= */

.form-step {
    transition: all 0.25s ease;
    cursor: pointer;
}

.active-step {
    @apply bg-white border-l-4 border-primary shadow-[0_12px_32px_rgba(0, 26, 72, 0.08)];
    opacity: 1;
    transform: translateX(4px);
}

.active-step .step-number {
    @apply bg-primary text-white;
}

.active-step .step-title {
    @apply text-primary font-bold;
}

.inactive-step {
    @apply bg-surface-container;
    opacity: 0.7;
}

.inactive-step .step-number {
    @apply bg-surface-container-high text-outline;
}

.inactive-step .step-title {
    @apply text-on-surface-variant font-medium;
}


/* =========================
   FORM SECTIONS
========================= */

.form-section {
    min-height: 55vh;
    transition: all 0.2s ease;
}

/* helps browser scroll alignment */
html {
    scroll-behavior: smooth;
}


/* =========================
   MOBILE HORIZONTAL STEPPER
========================= */

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* Mode transitions */
.mode-transition {
    transition: all 0.3s ease;
}

/* Online mode styles */
.online-mode .online-only {
    display: flex !important;
}

.online-mode .offline-only {
    display: none !important;
}

/* Offline mode styles */
.offline-mode .online-only {
    display: none !important;
}

.offline-mode .offline-only {
    display: flex !important;
}

/* Draft button styling based on mode */
.online-mode #save-draft-btn {
    background-color: transparent;
    color: #001a48;
    border: 1px solid #e0e3e5;
}

.offline-mode #save-draft-btn {
    background-color: #e8f0fe;
    color: #001a48;
    border: 1px solid #001a48;
}

/* Animation for sync indicator */
@keyframes pulse {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.sync-pending {
    animation: pulse 1s infinite;
}