/* =====================================================================
   PromptShop AI — responsive.css
   Breakpoints centralizados. Mobile-first não aplicado ao layout base
   (é uma aplicação interna usada majoritariamente em desktop), mas o
   shell se adapta corretamente até celular.
   ===================================================================== */

/* Tablets grandes / notebooks pequenos */
@media (max-width: 1024px) {
    .stat-hero {
        grid-template-columns: 1fr;
    }

    .stat-hero__main {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 20px;
    }

    .panel-grid {
        grid-template-columns: 1fr;
    }

    .model-layout {
        grid-template-columns: 1fr;
    }

    .generator-layout {
        grid-template-columns: 1fr;
    }
}

/* Tablets */
@media (max-width: 860px) {
    :root {
        --sidebar-width: 76px;
    }

    .sidebar__brand-name,
    .sidebar__link span:last-child,
    .sidebar__footer {
        display: none;
    }

    .sidebar__link {
        justify-content: center;
    }

    .sidebar__link-indicator {
        display: none;
    }

    .content {
        padding: 24px 20px 40px;
    }
}

/* Celulares */
@media (max-width: 560px) {
    .shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 12px 16px;
        overflow-x: auto;
    }

    .sidebar__brand {
        padding: 0 12px 0 0;
    }

    .sidebar__nav {
        flex-direction: row;
        flex: none;
    }

    .sidebar__link {
        padding: 8px 10px;
    }

    .sidebar__footer {
        display: none;
    }

    .stat-hero__grid {
        grid-template-columns: 1fr;
    }

    .view__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .toolbar {
        flex-direction: column;
    }

    .input--select {
        max-width: none;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal__body,
    .modal__header {
        padding: 16px;
    }
}