/* Flowbite locks page scroll with `overflow-hidden` on <body> while a modal is
   open. Without this the scrollbar vanishes, the viewport gets ~15px wider and
   the whole layout (plus the fixed navbar and progress bar) nudges sideways on
   open and snaps back on close. Keeping the gutter reserved makes the width
   identical in both states. */
html {
    scrollbar-gutter: stable;
}

#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 120px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.report-wrapper {
    display: none;
}

.work-duty td,
.work-duty th {
    padding: 3px;
}

.report-section {
    margin: 40px 90px;
}

.report-graph {
    width: 100% !important;
    max-width: 900px !important;
    margin: 20px auto 0 auto !important;
}

.transition-opacity {
    transition: opacity 0.9s ease-in-out;
}

.hidden-opacity {
    opacity: 0;
}

.shown-opacity {
    opacity: 1;
}


/* Toast entrance/exit now lives in css/motion.css (.toast-slide-in /
   .toast-slide-out), together with the auto-dismiss countdown bar. */


@media print {
    @page {
        size: A4;
        margin: 0;
    }

    .report-graph div {
        transform: scale(0.97);
        transform-origin: top left;
    }

    .navbar,
    #monthly-report-form,
    #toggle-button,
    #save-btn,
    .modebar-container {
        display: none;
    }

    #content_wrapper {
        display: none;
    }

    .no-print {
        display: none;
    }

    .report-wrapper {
        display: block;
    }

    .report-wrapper {
        display: flex;
        flex-direction: column;
        min-height: calc(288mm);
        padding: 15mm 10mm;
        box-sizing: border-box;
    }

    .report-signature,
    .report-footer {
        margin-top: auto;
    }

    .next-page {
        page-break-before: always !important;
    }

    #report-cover {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        page-break-after: always;
    }
}


/* Small screens (up to 600px) */
@media only screen and (max-width: 600px) {
    #loader {
        height: 40px;
    }
}

/* Small screens (up to 768px) */
@media only screen and (max-width: 768px) {}

/* Medium screens (up to 992px) */
@media only screen and (max-width: 992px) {
    #loader {
        height: 60px;
    }
}

/* Medium to large devices (between 576px and 1200px) */
@media (min-width: 576px) and (max-width: 1200px) {}

/* Large screens (992px and above) */
@media only screen and (min-width: 992px) {}

/* Extra large screens (1200px and above) */
@media (min-width: 1200px) {}



@media (min-width: 600px) {}

@media (min-width: 992px) {}


/* ===== #defaultModal (Flowbite) entrance + exit animation =====
   Moved to css/motion.css — see section 9. The exit still hinges on
   .cc-modal-closing being added by initialize-modal.js just before the
   real hide, so the out-animation gets a chance to play. */
@keyframes cc-modal-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .cc-modal-backdrop.cc-modal-closing {
        animation: cc-modal-fade-out 280ms ease-in forwards;
    }
}

/* ==== Speech-to-text mic on textareas (speech.js) ==== */
.cc-speech-wrap {
    position: relative;
}

.cc-speech-wrap textarea {
    padding-right: 2.5rem;
}

.cc-mic-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.3rem;
    border: 0;
    border-radius: 9999px;
    color: #9ca3af;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cc-mic-btn:hover {
    transform: scale(1.3);
}

.cc-mic-btn:active {
    transform: scale(0.9);
}

.cc-mic-btn svg {
    width: 100%;
    height: 100%;
}

.cc-mic-btn:hover {
    color: var(--color-primary-600, #0d9488);
    background: rgba(13, 148, 136, 0.08);
}

.dark .cc-mic-btn {
    color: #6b7280;
}

.cc-mic-btn.recording,
.dark .cc-mic-btn.recording {
    color: #fff;
    background: #ef4444;
    animation: cc-mic-pulse 1.1s ease-in-out infinite, cc-mic-beat 1.1s ease-in-out infinite;
}

@keyframes cc-mic-beat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes cc-mic-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(239, 68, 68, 0);
    }
}