/* Global responsive foundation shared by app pages */
/*
 * Device-specific @media rules were extracted to:
 *   responsive/responsive-mobile.css
 *   responsive/responsive-iphone.css
 *   responsive/responsive-ipad.css
 *   responsive/responsive-notebook.css
 *   responsive/responsive-fullhd.css
 *   responsive/responsive-ultrawide.css
 */

:root {
	--app-fluid-padding: clamp(0.65rem, 1.2vw, 1rem);
	--app-fluid-gap: clamp(0.5rem, 1vw, 0.9rem);
	--app-density-font: 1;
}

.app-viewport-fit {
	width: 100%;
	min-height: 100dvh;
	overflow-x: hidden;
}

.sales-index-page,
.publications-page,
.products-index-page,
.publication-show-page,
.sale-show-page {
	width: 100%;
	min-height: 100dvh;
	padding-inline: var(--app-fluid-padding);
}

.sales-index-page *,
.publications-page *,
.products-index-page *,
.publication-show-page *,
.sale-show-page * {
	box-sizing: border-box;
}

/* Device-specific rules → see responsive/ folder */

/* ══════════════════════════════════════════════════════════════
   LOADING STATES GLOBAIS — FlowManager
   IMPORTANTE: NÃO aplicar estilos via atributo wire:loading/*
   pois o CSS estático se aplica SEMPRE, não apenas durante loading.
   O Livewire usa JS para mostrar/ocultar via display:none.
   Usar SOMENTE classes via wire:loading.class nos templates.
   ══════════════════════════════════════════════════════════════ */

/* Botão desabilitado pelo wire:loading.attr="disabled" */
button[disabled] {
    opacity: .55;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Skeleton shimmer global (reutilizável em qualquer página) */
.fm-skeleton {
    background: linear-gradient(90deg,
        rgb(241 245 249) 25%,
        rgb(226 232 240) 50%,
        rgb(241 245 249) 75%);
    background-size: 250% 100%;
    animation: fm-skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: .5rem;
}
.dark .fm-skeleton {
    background: linear-gradient(90deg,
        rgb(30 41 59) 25%,
        rgb(51 65 85) 50%,
        rgb(30 41 59) 75%);
    background-size: 250% 100%;
    animation: fm-skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes fm-skeleton-shimmer {
    0%   { background-position: 250% 0; }
    100% { background-position: -250% 0; }
}

/* Utilitário: overlay de loading sobre qualquer container */
.fm-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(3px);
}
.dark .fm-loading-overlay {
    background: rgba(15,23,42,.88);
}

/* Spinner reutilizável */
.fm-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f59e0b;
    border-right-color: #f97316;
    animation: fm-spin .75s linear infinite;
}
.fm-spinner-sm {
    width: 18px;
    height: 18px;
    border-width: 2.5px;
}
.fm-spinner-lg {
    width: 44px;
    height: 44px;
    border-width: 4px;
}