@import url("tema.css");

/* ============================================================
   GIROCONTROL - ESTILOS GERAIS
   ============================================================

   TEMAS (claro e escuro)

   O tema é escolhido pelo atributo data-tema no <html>, aplicado
   pelo head.html ANTES de a página aparecer (sem "piscar"):
       <html data-tema="claro">   (padrão: adequado à loja)
       <html data-tema="escuro">

   REGRA DO PROJETO: cores sempre por variável (var(--...)).
   Nada de cor fixa (#fff, #11111A...) em regras novas, nem no
   style="" das telas, senão o elemento não acompanha o tema.

   Variáveis principais:
     --bg-main / --bg-sidebar / --bg-card / --bg-input   fundos
     --bg-hover                                          destaque ao passar o mouse
     --text-primary / --text-secondary / --text-muted    textos
     --text-on-accent                                    texto sobre botão verde
     --accent-green / --accent-purple / --accent-red     cores da marca (fundos, botões, bordas)
     --accent-*-text                                     as mesmas cores usadas COMO TEXTO
                                                         (no claro, mais escuras, para leitura)
     --border / --border-accent                          bordas
   ============================================================ */


/* ============================================================
   BARRAS DE ROLAGEM INVISÍVEIS
   ============================================================ */

* {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* ============================================================
   HTML E BODY
   ============================================================ */

html,
body {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: var(--bg-main) !important;
    color: var(--text-primary) !important;
    /* Inter: carregada no head.html; tem pesos intermediários (500, 600) */
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    display: flex !important;
}

/*
 * HIERARQUIA DE PESOS (padrão do projeto):
 *   500 (médio)        texto comum, conteúdo das tabelas
 *   600 (semi-negrito) rótulos de campos, menu, informações de apoio
 *   700-800 (negrito)  títulos, totais, valores e destaques
 * Negrito em tudo tira o destaque do que importa e cansa a leitura.
 */
label {
    font-weight: 600;
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-weight: 500;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.gc-sidebar {
    width: 230px !important;
    min-width: 230px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: var(--bg-sidebar) !important;
    border-right: var(--borda-destaque) solid var(--border) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 10px 10px 8px 10px !important;
    overflow: hidden !important;
    position: relative !important;
}

.gc-sidebar::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 3px !important;
    height: 100% !important;
    background: linear-gradient(180deg, var(--accent-green) 0%, var(--accent-purple) 100%) !important;
    opacity: .7 !important;
}


/* ============================================================
   MARCA
   ============================================================ */

.gc-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0 6px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
}

.gc-brand-icon-inner img {
    width: 140px !important;
    height: auto !important;
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.15)) !important;
}

/* No tema claro, a logo usada é a versão de texto grafite
   (LogoGiroControlClaro.png), trocada pelo tema.css. */
html[data-tema="claro"] .gc-brand-icon-inner img {
    filter: none !important;
}


/* ============================================================
   NAVEGAÇÃO
   ============================================================ */

.gc-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 10px !important;
}

.gc-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 14px !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    transition: all 0.25s ease !important;
}

.gc-nav-link:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    transform: translateX(4px) !important;
}

/*
 * TELA ATUAL NO MENU (item ativo)
 * Destaque forte e sempre visível, nos dois temas: fundo verde em
 * degradê, borda verde de 2px, ícone verde e texto em negrito.
 * (O menu marca o item pelo nome da tela principal:
 *  #execInfo.processedTemplateName, no navbar.html.)
 */
.gc-nav-link.active {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.20) 0%, rgba(0, 255, 136, 0.05) 100%) !important;
    border: 2px solid var(--accent-green) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.25), inset 0 0 10px rgba(0, 255, 136, 0.08) !important;
    transform: none !important;
}

.gc-nav-link.active i {
    color: var(--accent-green-text) !important;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.6)) !important;
}

html[data-tema="claro"] .gc-nav-link.active {
    background: linear-gradient(90deg, rgba(0, 212, 122, 0.24) 0%, rgba(0, 212, 122, 0.08) 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 212, 122, 0.25) !important;
}

html[data-tema="claro"] .gc-nav-link.active i {
    filter: none !important;
}

.gc-nav-link i {
    font-size: 16px !important;
    width: 18px !important;
    text-align: center !important;
}


/* ============================================================
   RODAPÉ DO MENU
   ============================================================ */

.gc-sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border) !important;
    margin-top: auto !important;
}

.gc-profile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    background: var(--bg-card) !important;
    border: var(--borda-destaque) solid var(--border) !important;
    border-radius: 10px !important;
}

.gc-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: rgba(0, 255, 136, .15) !important;
    border: 1px solid var(--accent-green) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--accent-green-text) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

.gc-profile-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--accent-green-text) !important;
}

.gc-profile-email {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Botão de alternar tema (rodapé do menu) */
.gc-btn-tema {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 13px !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: var(--borda-destaque) solid var(--border) !important;
    background: var(--bg-sutil) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.gc-btn-tema:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.gc-btn-sair {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 13px !important;
    color: var(--accent-red-text) !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 45, 85, 0.20) !important;
    background: rgba(255, 45, 85, 0.08) !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.gc-btn-sair:hover {
    background: rgba(255, 45, 85, 0.15) !important;
    border-color: rgba(255, 45, 85, 0.35) !important;
    color: var(--accent-red-text) !important;
}


/* ============================================================
   BOTÕES GERAIS
   ============================================================ */

.gc-btn-cancelar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    color: var(--accent-red-text) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 45, 85, 0.20) !important;
    background: rgba(255, 45, 85, 0.08) !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.gc-btn-cancelar:hover {
    background: rgba(255, 45, 85, 0.15) !important;
    border-color: rgba(255, 45, 85, 0.35) !important;
}

.btn-success,
.gc-btn-cadastro,
button[type="submit"].btn-primary,
.btn-cadastrar {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: var(--text-on-accent) !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

.btn-success:hover,
.gc-btn-cadastro:hover,
button[type="submit"].btn-primary:hover,
.btn-cadastrar:hover {
    background-color: var(--accent-green-hover) !important;
    border-color: var(--accent-green-hover) !important;
    color: var(--text-on-accent) !important;
    box-shadow: 0 0 15px var(--brilho-verde) !important;
}

/* Ícones dentro do botão verde acompanham o texto */
.btn-success i,
.gc-btn-cadastro i {
    color: var(--text-on-accent) !important;
}


/* ============================================================
   INPUTS E SELECTS
   ============================================================ */

.gc-select,
.gc-input {
    background: var(--bg-input) !important;
    border: var(--borda-destaque) solid var(--border-campo) !important;
    color: var(--text-primary) !important;
    padding: 10px !important;
    border-radius: 8px !important;
    width: 100% !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

.gc-input::placeholder {
    color: var(--text-muted) !important;
}

.gc-select option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.gc-select:focus,
.gc-input:focus {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 12px var(--brilho-verde), inset 0 0 6px rgba(0, 255, 136, 0.1) !important;
    background: var(--bg-input) !important;
}

.gc-input:disabled,
.gc-input[readonly] {
    opacity: 0.75;
}


/* ============================================================
   MAIN E CONTAINERS
   ============================================================ */

.gc-main {
    flex: 1 !important;
    width: calc(100vw - 230px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 10px 14px 0 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-main) !important;
}

.gc-container {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden !important;
}


/* ============================================================
   HEADER SUPERIOR
   ============================================================ */

.gc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 6px 0 12px 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.gc-welcome h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.5px !important;
}

.gc-welcome h1 span {
    color: var(--accent-green-text) !important;
}

.gc-welcome p {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
}

.gc-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.gc-date-picker {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--bg-input) !important;
    border: var(--borda-destaque) solid var(--border-campo) !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    height: 32px !important;
    transition: all 0.3s ease !important;
}

.gc-date-picker:focus {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 12px var(--brilho-verde) !important;
    outline: none !important;
}


/* ============================================================
   CARDS
   ============================================================ */

.gc-card {
    background: var(--bg-card) !important;
    border: var(--borda-destaque) solid var(--border-accent) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
    box-shadow: var(--sombra) !important;
}

.gc-card.purple { border-color: rgba(157, 78, 221, .25) !important; }
.gc-card.green { border-color: var(--border-accent) !important; }
.gc-card.red { border-color: rgba(255, 45, 85, .25) !important; }


/* ============================================================
   MÉTRICAS
   ============================================================ */

.gc-grid-metrics {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    height: 106px !important;
    min-height: 106px !important;
    max-height: 106px !important;
    flex-shrink: 0 !important;
}

.gc-metric-header {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 4px !important;
}

.gc-metric-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
}

.gc-metric-icon.purple {
    background: rgba(157, 78, 221, .12) !important;
    border: 1px solid rgba(157, 78, 221, .25) !important;
    color: var(--accent-purple-text) !important;
}

.gc-metric-icon.green {
    background: rgba(0, 255, 136, .10) !important;
    border: 1px solid rgba(0, 255, 136, .22) !important;
    color: var(--accent-green-text) !important;
}

.gc-metric-icon.red {
    background: rgba(255, 45, 85, .10) !important;
    border: 1px solid rgba(255, 45, 85, .22) !important;
    color: var(--accent-red-text) !important;
}

.gc-metric-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}

.gc-metric-value {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    line-height: 1.1 !important;
}

.gc-metric-sub {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
    display: flex !important;
    gap: 3px !important;
}

.gc-metric-sub.green {
    color: var(--accent-green-text) !important;
    font-weight: 600 !important;
}

.gc-metric-sub.muted {
    color: var(--text-muted) !important;
}


/* ============================================================
   CHARTS
   ============================================================ */

.gc-grid-dashboard.charts {
    display: grid !important;
    grid-template-columns: 1.55fr 1fr !important;
    gap: 8px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    flex-shrink: 0 !important;
}

.gc-grid-dashboard.bottom {
    display: grid !important;
    grid-template-columns: 1.55fr 1fr !important;
    gap: 8px !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.gc-chart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
}

.gc-chart-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.gc-chart-area {
    flex: 1 !important;
    height: 140px !important;
    min-height: 0 !important;
}

.gc-chart-donut-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.gc-donut-canvas {
    flex: 1 !important;
    height: 130px !important;
}


/* ============================================================
   DASHBOARD: GRÁFICOS (classes próprias do painel)

   Classes só do Dashboard, para não mexer nas genéricas acima
   (gc-grid-dashboard, gc-chart-donut-area, gc-donut-canvas),
   que outras telas podem usar.

   - "Vendas dos Últimos 7 Dias" estreito (280px é o mínimo em que
     a linha continua legível); "Categorias Mais Vendidas" com mais
     que o dobro do espaço, porque o lojista pode ter muitas.
   - A rosca fica à esquerda, em tamanho fixo (110 x 110).
   - A legenda mostra TODAS as categorias: 7 por coluna, de cima
     para baixo; a 8ª começa uma coluna nova ao lado. Se não couber,
     só a lista rola para o lado (com barra visível).
   ============================================================ */

.gc-dashboard-graficos {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr);
    gap: 8px;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    flex-shrink: 0;
}

.gc-categorias-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* Rosca FIXA: o tamanho vem do próprio <canvas> (110 x 110, no index.html) */
.gc-categorias-rosca {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
}

/*
 * Lista das categorias: 7 por coluna; a 8ª abre uma coluna nova ao lado.
 * Cada coluna tem a largura do próprio conteúdo (porcentagem colada no
 * nome), então cabem mais colunas. Se não couberem, SÓ a lista rola
 * para o lado; a rosca fica parada.
 */
.gc-legenda-categorias {
    list-style: none;
    margin: 0;
    padding: 0 0 6px 0;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
    grid-auto-columns: max-content;
    gap: 3px 28px;
    align-content: center;
}

.gc-legenda-categorias li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    line-height: 1.25;
}

.gc-legenda-categorias .bolinha {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Nome comprido termina em "…" (o nome completo aparece ao passar o mouse) */
.gc-legenda-categorias .nome {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
}

.gc-legenda-categorias .percentual {
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
}

/*
 * Barra de rolagem VISÍVEL só nesta lista. O início deste arquivo esconde
 * as barras do sistema inteiro; aqui ela volta, fina e na cor do tema,
 * para o lojista perceber que há mais categorias ao lado.
 */
.gc-legenda-categorias {
    scrollbar-width: thin !important;
    scrollbar-color: var(--border-accent) transparent !important;
}

.gc-legenda-categorias::-webkit-scrollbar {
    display: block !important;
    height: 6px !important;
}

.gc-legenda-categorias::-webkit-scrollbar-thumb {
    background: var(--border-accent);
    border-radius: 99px;
}

.gc-legenda-categorias::-webkit-scrollbar-track {
    background: transparent;
}

.gc-legenda-categorias .vazio {
    color: var(--text-muted);
    font-size: 12px;
}


/* ============================================================
   TABELAS
   ============================================================ */

.gc-table-wrapper {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: var(--borda-destaque) solid var(--border-accent) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.05) !important;
}

html[data-tema="claro"] .gc-table-wrapper {
    box-shadow: none !important;
}

.gc-table-wrapper.no-border {
    border: none !important;
    box-shadow: none !important;
}

.gc-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

/*
 * ATUALIZADO: títulos das colunas maiores, em negrito forte e com
 * mais contraste; conteúdo maior. Antes: 9,5px apagado e 11px,
 * pequeno para quem passa o dia no caixa.
 */
.gc-table th {
    padding: 10px 12px !important;
    color: var(--th-texto) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    border-bottom: 2px solid var(--border-accent) !important;
    background: var(--th-fundo) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}

.gc-table td {
    padding: 10px 12px !important;
    color: var(--text-secondary) !important;
    font-weight: 500;
    border-bottom: 1px solid var(--border) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

.gc-table tbody tr:hover td {
    background: var(--bg-sutil);
}

.gc-table th,
.gc-table td {
    border-right: 1px solid var(--border) !important;
}

.gc-table th:last-child,
.gc-table td:last-child {
    border-right: none !important;
}


/* ============================================================
   BOTÕES PEQUENOS
   ============================================================ */

.gc-btn-ver-todas {
    padding: 4px 11px !important;
    border-radius: 16px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid !important;
    flex-shrink: 0 !important;
}

.gc-btn-ver-todas.purple {
    background: rgba(139, 92, 246, .12) !important;
    border-color: rgba(139, 92, 246, .25) !important;
    color: var(--accent-purple-text) !important;
}

.gc-btn-ver-todas.red {
    background: rgba(255, 45, 85, .10) !important;
    border-color: rgba(255, 45, 85, .25) !important;
    color: var(--accent-red-text) !important;
}

.gc-btn-ver-todas.green {
    background: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: var(--text-on-accent) !important;
}


/* ============================================================
   ALERTAS DE ESTOQUE
   ============================================================ */

.gc-alerts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    justify-content: flex-start !important;
}

.gc-alert-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

.gc-alert-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.gc-alert-icon.red {
    background: rgba(255, 45, 85, .10) !important;
    border: 1px solid rgba(255, 45, 85, .20) !important;
    color: var(--accent-red-text) !important;
}

.gc-alert-icon.green {
    background: rgba(0, 255, 136, .08) !important;
    border: 1px solid rgba(0, 255, 136, .18) !important;
    color: var(--accent-green-text) !important;
}

.gc-alert-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.gc-alert-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
    margin-top: auto !important;
    padding: 10px 0 8px 0 !important;
    text-align: center !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    height: 36px !important;
}


/* ============================================================
   COMPATIBILIDADE COM MENSAGENS
   ============================================================ */

.gc-messages {
    width: 100% !important;
    flex-shrink: 0 !important;
}


/* ============================================================
   SWEETALERT2 — PADRÃO GIROCONTROL
   ============================================================ */

.gc-swal-popup {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: var(--borda-destaque) solid var(--border-accent) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35) !important;
    width: 420px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 28px 28px 24px !important;
}

.gc-swal-title {
    color: var(--text-primary) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.gc-swal-text {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.gc-swal-popup .swal2-icon {
    margin: 0 auto 16px !important;
}

.gc-swal-confirm,
.gc-swal-cancel {
    min-width: 120px !important;
    height: 38px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
}

.gc-swal-confirm {
    color: var(--text-on-accent) !important;
}

.gc-swal-cancel {
    color: #FFFFFF !important;
    background: #475569 !important;
}

.swal2-container {
    z-index: 99999 !important;
    padding: 16px !important;
}

@keyframes gcSwalEntrada {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.swal2-show {
    animation: gcSwalEntrada .18s ease-out !important;
}


/* ============================================================
   ALERTAS (SweetAlert) ABERTOS DIRETO PELAS TELAS
   Garante as cores do tema mesmo em alertas montados à mão.
   ============================================================ */

.swal2-popup {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.swal2-title {
    color: var(--text-primary) !important;
}

.swal2-html-container,
.swal2-input-label {
    color: var(--text-secondary) !important;
}

.swal2-input {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-campo) !important;
}


/* ============================================================
   ÍCONES DOS PRODUTOS E DAS CATEGORIAS (emojis)
   O ícone do produto vem de Produto.getIconeExibido: o escolhido
   para o produto ou, se ele não tiver um, o da categoria.
   O emoji vem do catálogo (util/IconesDeCategoria).
   ============================================================ */

.gc-icone-produto,
.gc-icone-alerta,
.gc-icone-categoria,
.gc-seletor-icone button {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 400;
}

/*
 * QUADRADO DO ÍCONE
 *
 * Todo ícone de produto e de categoria fica dentro de um quadrado de
 * cantos arredondados, com um tamanho fixo por lugar (igual em todo o
 * sistema). Isso dá o mesmo peso visual a todos os ícones, qualquer
 * que seja o desenho do emoji, e cria hierarquia na lista.
 *
 * O quadrado centraliza o que houver dentro dele: hoje o emoji; depois,
 * a imagem 3D (Fluent Emoji), com o emoji como reserva.
 *
 * Tema escuro: fundo um pouco mais claro que o cartão e brilho verde
 * discreto. Tema claro: sem brilho (viraria mancha no fundo branco);
 * degradê branco para cinza-claro e sombra suave.
 */
:root,
html[data-tema="escuro"] {
    --icone-fundo: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    --icone-borda: rgba(255, 255, 255, 0.09);
    --icone-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 12px rgba(0, 255, 136, 0.07);
}

html[data-tema="claro"] {
    --icone-fundo: linear-gradient(145deg, #FFFFFF, #EEF2F7);
    --icone-borda: #E2E8F0;
    --icone-sombra: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.gc-icone-produto,
.gc-icone-categoria,
.gc-icone-alerta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--icone-fundo);
    border: 1px solid var(--icone-borda);
    box-shadow: var(--icone-sombra);
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

/* Ao lado do nome do produto: listas, painel, estoque */
.gc-icone-produto {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    font-size: 17px;
}

/* No carrinho (PDV, pedido, compra): um pouco menor, linhas mais justas */
.gc-carrinho .gc-icone-produto {
    width: 26px;
    height: 26px;
    margin-right: 6px;
    font-size: 15px;
    border-radius: 8px;
}

/* Na lista da busca de produtos (BuscaDeProduto, utilitarios.js) */
.gc-busca-nome .gc-icone-produto {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    font-size: 14px;
    border-radius: 7px;
}

/* Na lista de categorias */
.gc-icone-categoria {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    font-size: 19px;
    border-radius: 10px;
}

/* Nos alertas de estoque do painel (e na prévia do cadastro de categoria) */
.gc-icone-alerta {
    display: flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 21px;
    border-radius: 11px;
}

/*
 * ÍCONES 3D (Fluent Emoji, Microsoft, MIT): imagem dentro do quadrado.
 * O script do utilitarios.js (o ÚNICO que cuida dos ícones 3D) põe a
 * imagem e a classe gc-icone-3d. O emoji continua no elemento, só
 * ESCONDIDO por esta regra: se a imagem não carregar, a classe sai e
 * o emoji volta a aparecer (reserva). Imagens em /images/icones3d/.
 */
.gc-icone-3d {
    font-size: 0 !important;
    color: transparent !important;
}

/* Botões dos seletores de ícone: centralizam a imagem */
.gc-seletor-icone button.gc-icone-3d,
.gp-opcao.gc-icone-3d,
.gp-icone-preview.gc-icone-3d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* A imagem ocupa a maior parte do quadrado e não atrapalha o clique */
.gc-icone-img {
    display: block;
    width: 78%;
    height: 78%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* Nos seletores de ícone (cadastros de categoria e de produto) */
.gc-seletor-icone button .gc-icone-img,
.gp-opcao .gc-icone-img {
    width: 28px;
    height: 28px;
    margin: auto;
}

/* Barra de progresso do estoque (disponível em relação ao mínimo) */
.gc-barra-estoque {
    flex: 1;
    min-width: 60px;
    height: 7px;
    border-radius: 99px;
    background: var(--border);
    overflow: hidden;
}

.gc-barra-estoque > div {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}


/* ============================================================
   SELETOR DE ÍCONE (cadastro de categoria)
   ============================================================ */

.gc-seletor-icone {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 340px;
    overflow-y: auto;
    padding: 4px 2px;
}

.gc-seletor-icone h4 {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gc-seletor-icone .gc-grade-icones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
}

.gc-seletor-icone button {
    height: 46px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-sutil);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gc-seletor-icone button:hover {
    border-color: var(--accent-green);
    transform: translateY(-1px);
}

.gc-seletor-icone button.selecionado {
    border-color: var(--accent-green);
    background: rgba(0, 212, 122, 0.18);
    box-shadow: 0 0 0 3px rgba(0, 212, 122, 0.20);
}


/* ============================================================
   BOTÃO DE TEMA NAS TELAS DE ACESSO (login, senha, confirmação)
   Ícone discreto no canto superior direito (fragments/botaoTema).
   ============================================================ */

.gc-botao-tema-flutuante {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 50;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--border-campo);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    box-shadow: var(--sombra);
    transition: all 0.2s ease;
}

.gc-botao-tema-flutuante:hover {
    color: var(--accent-green-text);
    border-color: var(--accent-green);
    transform: rotate(-12deg);
}

.gc-botao-tema-flutuante:focus-visible {
    outline: 3px solid var(--brilho-verde);
    outline-offset: 2px;
}


/* ============================================================
   OLHO DA SENHA (mostrar/esconder) — criado pelo fragments/tema.html
   em todo input type="password".
   ============================================================ */

.gc-campo-senha {
    position: relative;
    display: block;
    width: 100%;
}

.gc-campo-senha input {
    padding-right: 44px !important;
}

.gc-olho-senha {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.gc-olho-senha:hover {
    color: var(--accent-green-text);
    background: var(--bg-hover);
}

.gc-olho-senha:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 1px;
}


/* ============================================================
   ÍCONE COM INICIAL AO LADO DO NOME (ex.: lista de usuários)
   As telas já usavam estas classes, mas elas não existiam aqui:
   a inicial aparecia solta, numa linha acima do nome.
   ============================================================ */

.gc-flex-center {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gc-prod-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.gc-prod-icon.purple {
    background: rgba(157, 78, 221, 0.12);
    border: 1px solid rgba(157, 78, 221, 0.30);
    color: var(--accent-purple-text);
}

.gc-prod-icon.green {
    background: rgba(0, 255, 136, 0.10);
    border: 1px solid rgba(0, 255, 136, 0.25);
    color: var(--accent-green-text);
}


/* ============================================================
   PADRÃO DE TABELAS (tipos de coluna)

   Cada coluna recebe a classe do seu tipo, na <th> e na <td>:
     col-codigo        #ID                  estreita, negrito
     col-numero        quantidade, estoque  à direita, algarismos alinhados
     col-moeda         preço, total         à direita, algarismos alinhados
     col-data          data / hora          largura do conteúdo
     col-documento     telefone, CNPJ, CPF  largura do conteúdo, sem quebrar,
                                            à esquerda, algarismos alinhados
     col-situacao      ATIVO, PAGO...       centralizada
     col-texto         produto, cliente     fica com o espaço que sobra
     col-texto-longo   motivo, observação   até 2 linhas (texto completo
                                            no "title", ao passar o mouse)
     col-acoes         Selecione a Ação     do tamanho dos botões

   width: 1% = "só a largura do conteúdo": o espaço que sobra
   vai para as colunas de texto.

   Celular: a classe gc-table-cartoes na <table> transforma cada
   linha em um cartão (ver o fim do arquivo). Cada <td> precisa do
   atributo data-rotulo com o nome da informação ("Quantidade").
   ============================================================ */

.gc-table .col-codigo,
.gc-table .col-numero,
.gc-table .col-moeda,
.gc-table .col-data,
.gc-table .col-documento,
.gc-table .col-situacao,
.gc-table .col-acoes {
    width: 1%;
    white-space: nowrap;
}

.gc-table .col-codigo {
    font-weight: 700;
}

.gc-table .col-numero,
.gc-table .col-moeda {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.gc-table .col-data,
.gc-table .col-documento {
    font-variant-numeric: tabular-nums;
}

.gc-table .col-situacao,
.gc-table .col-acoes {
    text-align: center !important;
}

/* Título comprido em coluna de números pode quebrar ("ESTOQUE / ANTERIOR") */
.gc-table th.col-numero,
.gc-table th.col-moeda {
    white-space: normal !important;
    min-width: 64px;
}

.gc-table .col-texto {
    min-width: 140px;
}

.gc-table .col-texto-longo {
    min-width: 180px;
    max-width: 340px;
}

/* Data em duas linhas: o dia em cima, a hora menor embaixo */
.gc-table .gc-data-hora {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Texto curto que não pode quebrar (ex.: e-mail): uma linha, com "…";
   o texto completo vai no "title" da célula */
.gc-table .gc-truncar {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Texto longo: no máximo 2 linhas na tabela */
.gc-table .gc-texto-longo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============================================================
   PADRÃO DE FORMULÁRIOS

   Estrutura de um cadastro:

     <section class="gc-card gc-card-form">
       <form class="gc-form">
         <div class="gc-form-corpo">            campos (rolam por dentro)
           <div class="gc-form-grade">          linha de campos
             <div class="gc-campo">
               <label class="gc-rotulo">NOME *</label>
               <input class="gc-input">
               <span class="gc-ajuda">texto de ajuda</span>
             </div>
           </div>
         </div>
         <div class="gc-form-botoes">           Cancelar / Salvar (sempre visíveis)
       </form>
     </section>

   Grade de campos (gc-form-grade):
     padrão            4 colunas iguais
     cols-1/2/3        1, 2 ou 3 colunas iguais
     proporção própria style="--gc-grade: 1.5fr 2.5fr 100px 2fr"
   Campo que ocupa mais espaço: gc-campo ocupa-2 / ocupa-tudo.

   Em QUALQUER grade: 2 colunas até 1024px (tela dividida, tablet)
   e 1 coluna até 600px (celular). Nenhuma tela precisa de regra própria.
   ============================================================ */

.gc-card-form {
    flex: 1;
    min-height: 0;
    padding: 24px !important;
}

.gc-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Campos: rolam por dentro do cartão quando não cabem */
.gc-form-corpo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.gc-form-grade {
    display: grid;
    grid-template-columns: var(--gc-grade, repeat(4, minmax(0, 1fr)));
    gap: 16px;
    align-items: start;
}

.gc-form-grade.cols-1 { --gc-grade: minmax(0, 1fr); }
.gc-form-grade.cols-2 { --gc-grade: repeat(2, minmax(0, 1fr)); }
.gc-form-grade.cols-3 { --gc-grade: repeat(3, minmax(0, 1fr)); }

.gc-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.gc-campo.ocupa-2 { grid-column: span 2; }
.gc-campo.ocupa-tudo { grid-column: 1 / -1; }

.gc-rotulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Rótulo em destaque (ex.: o código de barras, campo do leitor) */
.gc-rotulo.destaque {
    color: var(--accent-green-text);
}

.gc-ajuda {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

.gc-ajuda strong {
    color: var(--text-secondary);
}

.gc-ajuda a {
    color: var(--accent-green-text);
}

/* Campo em destaque (ex.: código de barras: o leitor escreve aqui) */
.gc-input.gc-input-destaque {
    background: rgba(0, 255, 136, 0.05) !important;
    border-color: rgba(0, 255, 136, 0.30) !important;
    color: var(--accent-green-text) !important;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Campo que não pode ser alterado nesta tela */
.gc-input.gc-input-bloqueado {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Valor calculado pela tela (ex.: margem de lucro), na altura de um campo */
.gc-form-indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 136, 0.30);
    background: rgba(0, 255, 136, 0.10);
    color: var(--accent-green-text);
    font-size: 13px;
    font-weight: 800;
}

/* Quadro de informação dentro do formulário (ex.: situação do estoque) */
.gc-form-quadro {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-sutil);
    font-size: 12px;
    color: var(--text-secondary);
}

.gc-form-quadro strong {
    color: var(--text-primary);
}

/* Total mostrado na barra de botões (ex.: total do pedido), à esquerda */
.gc-form-total {
    margin-right: auto;
}

.gc-form-total .gc-rotulo {
    display: block;
}

.gc-form-total strong {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--accent-green-text);
}

/* Barra de botões: sempre visível no rodapé do cartão (não rola) */
.gc-form-botoes {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.gc-form-botoes .gc-btn-cadastro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .gc-card-form {
        padding: 16px !important;
    }

    /* Tela dividida / tablet: toda grade vira 2 colunas */
    .gc-form-grade:not(.cols-1) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gc-campo.ocupa-2 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    /* Celular: uma coluna, campos um embaixo do outro */
    .gc-form-grade,
    .gc-form-grade:not(.cols-1) {
        grid-template-columns: minmax(0, 1fr);
    }

    .gc-campo.ocupa-2,
    .gc-campo.ocupa-tudo {
        grid-column: auto;
    }

    /* Botões em largura total, com o principal (Salvar) em cima */
    .gc-form-botoes {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .gc-form-botoes > * {
        width: 100%;
        justify-content: center;
    }

    /* O total aparece ACIMA dos botões (a barra está em ordem invertida) */
    .gc-form-botoes .gc-form-total {
        order: 99;
        margin-right: 0;
        text-align: center;
    }
}


/* ============================================================
   TELAS DE OPERAÇÃO (PDV, Novo Pedido, Registrar Compra)

   Duas partes que se repetem nas três telas:

   1) Linha de adicionar produto (gc-linha-adicionar):
        leitor/busca, quantidade (gc-campo-qtd) e o botão de adicionar.
        Proporção própria: style="--gc-linha: 1fr 2fr 90px auto".
        Celular: cada campo na linha inteira; a quantidade, os campos
        curtos (gc-campo-curto, ex.: valor unitário) e o botão lado a
        lado. Colunas no celular: --gc-linha-celular (padrão "1fr auto").

   2) Tabela de itens (gc-table gc-carrinho):
        compacta, sem a largura mínima das listas; usa os tipos de
        coluna do padrão de tabelas. Colunas com gc-carrinho-opcional
        (ex.: Unitário) somem no celular.
   ============================================================ */

.gc-linha-adicionar {
    display: grid;
    grid-template-columns: var(--gc-linha, 1fr 2fr 90px auto);
    gap: 10px;
    align-items: end;
}

.gc-linha-adicionar > .gc-btn-cadastro,
.gc-linha-adicionar > button {
    height: 44px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.gc-campo-qtd input {
    text-align: center;
}

.gc-table.gc-carrinho {
    min-width: 0 !important;
}

@media (max-width: 600px) {
    .gc-linha-adicionar {
        grid-template-columns: var(--gc-linha-celular, minmax(0, 1fr) auto);
    }

    .gc-linha-adicionar > .gc-campo:not(.gc-campo-qtd):not(.gc-campo-curto) {
        grid-column: 1 / -1;
    }

    .gc-carrinho .gc-carrinho-opcional {
        display: none;
    }

    .gc-table.gc-carrinho th,
    .gc-table.gc-carrinho td {
        padding: 8px 6px !important;
    }
}


/* ============================================================
   RESPONSIVIDADE (tela dividida, tablet e celular)

   No computador (acima de 1024px) nada muda: tudo acima vale.
   Estas regras vêm no FIM do arquivo de propósito: com o mesmo
   peso (!important), a regra que vem depois vence.

   Pontos de corte:
     até 1024px  tela dividida, tablet, notebook pequeno:
                 menu vira gaveta (botão ☰), a página rola,
                 métricas em 3 colunas, painel em uma coluna,
                 tabelas rolam para o lado (com barra visível)
     até 768px   celular deitado / tablet pequeno:
                 formulários em uma coluna
     até 600px   celular em pé: métricas em 2 colunas
   ============================================================ */

/* Barra do topo (com o botão ☰) e fundo escuro: só em telas menores */
.gc-barra-topo,
.gc-menu-fundo {
    display: none;
}

@media (max-width: 1024px) {

    /* ---------- A página volta a rolar ---------- */
    html,
    body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* ---------- Barra fixa no topo, com o botão ☰ e o logo ----------
     * O conteúdo começa abaixo dela (padding do .gc-main), então nada
     * fica coberto ao rolar a página.
     */
    .gc-barra-topo {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        z-index: 1100;
        align-items: center;
        gap: 12px;
        padding: 0 12px;
        background: var(--bg-sidebar);
        border-bottom: var(--borda-destaque) solid var(--border);
        box-shadow: var(--sombra);
    }

    .gc-barra-topo img {
        height: 28px;
        width: auto;
    }

    /* ---------- Menu lateral vira gaveta (abre abaixo da barra) ---------- */
    .gc-sidebar {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        width: 260px !important;
        min-width: 260px !important;
        height: calc(100vh - 56px) !important;
        max-height: calc(100vh - 56px) !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease !important;
        box-shadow: none !important;
    }

    html.gc-menu-aberto .gc-sidebar {
        transform: translateX(0) !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35) !important;
    }

    .gc-botao-menu {
        display: flex;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: var(--borda-destaque) solid var(--border-accent);
        background: var(--bg-card);
        color: var(--text-primary);
        font-size: 22px;
        cursor: pointer;
        box-shadow: var(--sombra);
    }

    .gc-menu-fundo {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        background: rgba(0, 0, 0, 0.45);
    }

    html.gc-menu-aberto .gc-menu-fundo {
        display: block;
    }

    /* ---------- Conteúdo ocupa a largura toda ---------- */
    .gc-main {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 68px 12px 0 12px !important;
    }

    .gc-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .gc-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* ---------- Painel (Dashboard) ---------- */
    .gc-grid-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .gc-grid-dashboard.charts,
    .gc-grid-dashboard.bottom {
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .gc-dashboard-graficos {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .gc-dashboard-graficos > .gc-card {
        height: 200px;
    }

    .gc-grid-dashboard.bottom > .gc-card {
        min-height: 320px;
    }

    /* ---------- Tabelas (listas de vendas, produtos, usuários...) ----------
     * Mantêm uma largura mínima legível e ROLAM PARA O LADO dentro do
     * próprio quadro. Antes, as colunas da direita (ex.: "Selecione a
     * Ação") eram cortadas, porque o quadro escondia o que sobrava.
     */
    .gc-table-wrapper {
        overflow-x: auto !important;
    }

    .gc-table {
        min-width: 760px !important;
    }

    /* Barra horizontal VISÍVEL nas tabelas (o início do arquivo esconde
       todas): fina, na cor do tema, para o usuário perceber que há mais
       colunas ao lado. A vertical continua escondida. */
    .gc-table-wrapper {
        scrollbar-width: thin !important;
        scrollbar-color: var(--border-accent) transparent !important;
    }

    .gc-table-wrapper::-webkit-scrollbar {
        display: block !important;
        width: 0 !important;
        height: 8px !important;
    }

    .gc-table-wrapper::-webkit-scrollbar-thumb {
        background: var(--border-accent);
        border-radius: 99px;
    }

    .gc-table-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    /*
     * Coluna de AÇÕES (a última de cada lista) do tamanho do botão.
     * Colunas de texto marcadas com o padrão (col-texto, col-texto-longo)
     * ficam de fora, mesmo sendo a última (ex.: Motivo, em Movimentações).
     * Nas telas ela vem com largura fixa no HTML (ex.: 190px) e o botão
     * com largura mínima (165px); aqui isso é desfeito, e o espaço que
     * sobra vai para as colunas de informação.
     */
    .gc-table:not(.gc-table-cartoes) th:last-child:not(.col-texto):not(.col-texto-longo),
    .gc-table:not(.gc-table-cartoes) td:last-child:not(.col-texto):not(.col-texto-longo) {
        width: 1% !important;
        white-space: nowrap !important;
    }

    .gc-btn-selecionar-acao {
        min-width: 0 !important;
        padding: 6px 10px !important;
        gap: 6px !important;
        font-size: 12px !important;
    }

    /* E-mails e textos longos quebram de linha em vez de empurrar a tabela */
    .gc-table td {
        overflow-wrap: anywhere;
    }

    /* ---------- Rodapé ---------- */
    footer {
        height: auto !important;
        margin-top: 16px !important;
    }
}

@media (max-width: 768px) {

    /*
     * Formulários de várias colunas viram UMA coluna.
     * Muitas telas montam as colunas direto no HTML
     * (style="grid-template-columns: ..."); esta regra vale
     * para todas elas de uma vez, sem mexer tela por tela.
     */
    [style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Botão de ações só com os ícones (☰ e a setinha); o menu continua igual */
    .gc-btn-selecionar-acao span {
        display: none !important;
    }

    .gc-welcome h1 {
        font-size: 19px !important;
    }

    .gc-welcome p {
        font-size: 12.5px !important;
    }
}

@media (max-width: 600px) {

    .gc-main {
        padding: 66px 8px 0 8px !important;
    }

    /*
     * Barras de busca das listas (formulários GET): no celular, cada
     * parte ocupa a linha inteira (campo de busca, filtro, botão), em
     * vez de espremer o campo de busca até sumir.
     */
    form[method="get"] {
        flex-wrap: wrap !important;
    }

    form[method="get"] > div,
    form[method="get"] > button {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    form[method="get"] select {
        min-width: 0 !important;
        width: 100% !important;
    }

    .gc-grid-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gc-card {
        padding: 10px !important;
    }
}


/* ============================================================
   TABELA EM CARTÕES (até 1024px: tela dividida, tablet, celular)

   Só nas tabelas com a classe gc-table-cartoes. Cada linha vira
   um cartão; cada informação aparece com o nome ao lado (vindo do
   atributo data-rotulo da <td>). A coluna com "col-destaque" vira
   o título do cartão, e as ações ficam no rodapé.
   Os cartões ficam lado a lado enquanto couberem (2 ou 3 na tela
   dividida) e um por linha no celular. No computador, é tabela.
   ============================================================ */

@media (max-width: 1024px) {

    .gc-table-wrapper:has(.gc-table-cartoes) {
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .gc-table.gc-table-cartoes {
        min-width: 0 !important;
        border-collapse: separate !important;
    }

    .gc-table.gc-table-cartoes thead {
        display: none;
    }

    .gc-table.gc-table-cartoes {
        display: block;
        width: 100%;
    }

    .gc-table.gc-table-cartoes tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
        gap: 10px;
        width: 100%;
    }

    /* flex em coluna: permite levar o título (col-destaque) para o topo */
    .gc-table.gc-table-cartoes tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 6px 12px;
        border: var(--borda-destaque) solid var(--border);
        border-radius: 10px;
        background: var(--bg-card);
    }

    /*
     * Nome da informação à esquerda e os valores JUNTOS à direita
     * (ex.: "ESTOQUE ...... 0 UN  mín. 2"), em vez de espalhados na linha.
     */
    .gc-table.gc-table-cartoes td {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px 12px;
        width: 100% !important;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        text-align: right !important;
        white-space: normal !important;
        font-size: 13px !important;
    }

    .gc-table.gc-table-cartoes td:last-child {
        border-bottom: none !important;
    }

    .gc-table.gc-table-cartoes td::before {
        content: attr(data-rotulo);
        margin-right: auto;
        flex-shrink: 0;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--text-muted);
    }

    /* Título do cartão (ex.: o nome do produto): sempre no topo */
    .gc-table.gc-table-cartoes td.col-destaque {
        order: -1;
        justify-content: flex-start;
        text-align: left !important;
        font-size: 15px !important;
        font-weight: 700;
        color: var(--text-primary) !important;
    }

    .gc-table.gc-table-cartoes td.col-destaque::before {
        display: none;
    }

    /* Ações no rodapé do cartão, à direita */
    .gc-table.gc-table-cartoes td.col-acoes {
        justify-content: flex-end;
    }

    .gc-table.gc-table-cartoes td.col-acoes::before {
        display: none;
    }

    /* No cartão, a data e a hora ficam na mesma linha */
    .gc-table.gc-table-cartoes .gc-data-hora {
        display: inline;
        margin-left: 6px;
        font-size: inherit;
    }

    /* No cartão, o texto truncado usa o espaço da linha */
    .gc-table.gc-table-cartoes .gc-truncar {
        max-width: 100%;
        min-width: 0;
    }

    /*
     * No cartão, o texto longo (endereço, motivo...) aparece inteiro,
     * EMBAIXO do nome da informação, na largura toda e alinhado à
     * esquerda. Sem o limite de largura que ele tem na tabela.
     */
    .gc-table.gc-table-cartoes td.col-texto-longo {
        justify-content: flex-start;
        min-width: 0;
        max-width: none;
        text-align: left !important;
    }

    .gc-table.gc-table-cartoes td.col-texto-longo::before {
        flex-basis: 100%;
    }

    .gc-table.gc-table-cartoes .gc-texto-longo {
        display: block;
        width: 100%;
        -webkit-line-clamp: unset;
        overflow: visible;
        text-align: left;
    }
}


/* ============================================================
   MENU LATERAL: BARRA DE ROLAGEM VISÍVEL
   O resto do sistema esconde as barras de rolagem (topo do arquivo).
   No menu ela aparece, fina e sem setinhas, para quem usa touchpad
   perceber que há mais itens embaixo e conseguir arrastar.
   ============================================================ */

/* Chrome, Edge, Safari: precisa do "auto" para aceitar o desenho abaixo */
.gc-sidebar .gc-nav {
    scrollbar-width: auto !important;
    padding-right: 8px !important;
}

.gc-sidebar .gc-nav::-webkit-scrollbar {
    display: block !important;
    width: 5px !important;
}

.gc-sidebar .gc-nav::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
}

.gc-sidebar .gc-nav::-webkit-scrollbar-track {
    background: transparent !important;
}

.gc-sidebar .gc-nav::-webkit-scrollbar-thumb {
    background: var(--border-accent) !important;
    border-radius: 999px !important;
}

.gc-sidebar .gc-nav::-webkit-scrollbar-thumb:hover {
    background: var(--accent-green) !important;
}

/* Firefox: não tem as regras acima, usa a barra fina dele */
@supports (-moz-appearance: none) {
    .gc-sidebar .gc-nav {
        scrollbar-width: thin !important;
        scrollbar-color: var(--border-accent) transparent !important;
    }
}


/* ============================================================
   MENU LATERAL: NOME E E-MAIL DO USUÁRIO DENTRO DO CARTÃO
   Sem "min-width: 0", o texto longo empurra o cartão para fora
   e o "..." no fim do e-mail não aparece.
   ============================================================ */

.gc-profile {
    min-width: 0 !important;
    overflow: hidden !important;
}

.gc-profile-info {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.gc-profile-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}