/* === Input widths === */
/* Extra small inputs: quantity, price, phone fragments */
.gm-input-xs {
    max-width: 16ch;
}

/* Small inputs: first name, last name, small codes */
.gm-input-sm {
    max-width: 28ch;
}

/* Medium input: email, project name, etc. */
.gm-input-md {
    max-width: 44ch;
}

/* Large inputs*/
.gm-input-lg {
    max-width: 56ch;
}

/* Large inputs*/
.gm-input-xl {
    max-width: 90ch;
}

/* Multi-line or text area inputs (description, notes, etc.) */
.gm-textarea-md {
    width: 100%;
    max-width: 72ch;
}

/* Makes sure they don't explode on tiny screens */
@media (max-width: 37.5rem) {
    .gm-input-xs,
    .gm-input-sm,
    .gm-input-md,
    .gm-input-lg,
    .gm-textarea-md {
        max-width: 100%;
    }
}

/* === Loading screen (shown while WASM downloads) === */
#app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
}

#app-loading .loading-logo {
    width: 64px;
    height: 64px;
    animation: loading-pulse 1.8s ease-in-out infinite;
}

#app-loading .loading-logo.dark-logo {
    display: none;
}

#app-loading .loading-error {
    display: none;
    margin-top: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: #666;
}

@media (prefers-color-scheme: dark) {
    #app-loading {
        background: #121212;
    }

    #app-loading .loading-logo.light-logo {
        display: none;
    }

    #app-loading .loading-logo.dark-logo {
        display: inline;
    }

    #app-loading .loading-error {
        color: #aaa;
    }
}

@keyframes loading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* === Dialog widths === */
/* Extra small dialogs: confirm/alert dialogs */
.gm-dialog-xs {
    width: 100%;
    max-width: 22.5rem;
}

/* Small dialogs: rename, simple single-field forms */
.gm-dialog-sm {
    width: 100%;
    max-width: 30rem;
}

/* Medium dialogs */
.gm-dialog-md {
    width: 100%;
    max-width: 40rem;
}

/* Large dialogs: selector/search dialogs, table-in-dialog */
.gm-dialog-lg {
    width: 100%;
    max-width: 62.5rem;
}

/* Extra-large dialogs: layout editors, previews, special tools */
.gm-dialog-xl {
    width: 100%;
    max-width: 75rem;
}

/* Full-width on mobile, but still centered */
@media (max-width: 37.5rem) {
    .gm-dialog-xs,
    .gm-dialog-sm,
    .gm-dialog-md,
    .gm-dialog-lg,
    .gm-dialog-xl {
        max-width: 100%;
        margin: 0 0.5rem;
    }
}