/*!
 * GransoftWeb — Design System v2 (camada web)
 * =============================================================================
 * Traz para o app web a identidade do aplicativo Flutter (navy/teal, Roboto,
 * claro + escuro). Os valores NÃO foram inventados: vêm de
 *   GransoftWeb_App/lib/view_utils/utils/styles.dart      (GsColors / constantes kNavy, kTeal, ...)
 *   GransoftWeb_App/lib/view_utils/utils/gs_widgets.dart  (raios, alturas, paddings, pesos)
 *   GransoftWeb_App/docs/DESIGN_SYSTEM_v2.md              (regras de ouro)
 *
 * COMO USAR
 *   Carregue SEMPRE depois de css/styles.css (SB Admin Pro / Bootstrap 5.0.1).
 *   Este arquivo só reveste as classes que já existem no projeto — não renomeia
 *   nada, não mexe em id/name/data-index/eventos. É seguro para o AJAX atual.
 *
 * REGRA Nº 1 (herdada do app): nenhuma cor escrita "na mão" nas telas.
 *   Use as variáveis --gs-* declaradas aqui.
 * =============================================================================
 */

/* ===========================================================================
   0. Fonte — Roboto, os MESMOS arquivos empacotados no app (assets/fonts).
      Auto-hospedada de propósito: nada de CDN de fonte, que quebra offline.
   =========================================================================== */
@font-face {
    font-family: "GsRoboto";
    src: url("../assets/fonts/roboto/Roboto-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GsRoboto";
    src: url("../assets/fonts/roboto/Roboto-500.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GsRoboto";
    src: url("../assets/fonts/roboto/Roboto-600.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GsRoboto";
    src: url("../assets/fonts/roboto/Roboto-700.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ===========================================================================
   1. Tokens
      --------------------------------------------------------------------
      Tema claro = GsColors.light · tema escuro = GsColors.dark (styles.dart).
      O tema escuro entra por [data-gs-theme="dark"] no <html>, gravado em
      localStorage por js/gransoft-ds.js — igual ao app, que abre no claro e
      deixa o usuário trocar.
   =========================================================================== */
:root {
    /* --- Marca: constantes, iguais nos dois temas (styles.dart) --- */
    --gs-navy: #122d3e; /* kNavy      — headers, topo, botão circular de busca */
    --gs-navy-deep: #060f1e; /* kNavyDeep  — moldura */
    --gs-navy-grad: #16365f; /* topo do gradiente do header (DashBoard.dart) */
    --gs-teal: #3abcaf; /* kTeal      — ação de tela (Buscar/Adicionar/Salvar) */
    --gs-green: #157f73; /* kGreen     — verde escuro p/ texto no tema claro */
    --gs-confirm: #0d6efd; /* kConfirmBlue    — confirmar DENTRO de modal */
    --gs-excluir: #e24c5b; /* kExcluirVermelho — excluir (botão preenchido) */
    --gs-coral: #ff8a80; /* kDangerCoral    — destrutivo suave ("Sair") */
    --gs-support-green: #8fcc29; /* kSupportGreen — WhatsApp */
    --gs-support-cyan: #8ee8fb; /* kSupportCyan  — cyan claro */
    --gs-teal-ink: #ffffff; /* kTealInk — texto sobre botão teal */
    --gs-error: #b23b3b; /* errorColor */
    --gs-warning: #f4a100;

    /* --- Status pills (mesmos tons nos dois temas) --- */
    --gs-status-producao-ink: #0a6b5f;
    --gs-status-producao-bg: rgba(58, 188, 175, 0.22);
    --gs-status-finalizado-ink: #2e7d32;
    --gs-status-finalizado-bg: rgba(46, 125, 50, 0.15);
    --gs-status-atraso-ink: #b23b3b;
    --gs-status-atraso-bg: rgba(226, 76, 91, 0.15);

    /* --- Tema CLARO (GsColors.light) --- */
    --gs-bg: #f7f7fa; /* scaffoldBg */
    --gs-surface: #ffffff; /* surface */
    --gs-surface-border: #e0e9f2; /* surfaceBorder */
    --gs-surface-shadow: rgba(20, 40, 70, 0.05); /* surfaceShadow */
    --gs-data-card: #ffffff; /* dataCard */
    --gs-data-card-border: #e0e9f2; /* dataCardBorder */
    --gs-on-data-card: #122d3e; /* onDataCard */
    --gs-on-data-card-muted: #6c7f95; /* onDataCardMuted */
    --gs-data-divider: #e7eef6; /* dataDivider */
    --gs-panel: #eaf1f8; /* gsPainelListaColor — painel que segura listas */

    --gs-ink: #122d3e; /* textInk */
    --gs-muted: #6c7f95; /* textMuted */
    --gs-label-muted: #9bb4cf; /* labelMuted */
    --gs-divider: #e7eef6; /* divider */

    --gs-field-border: #3abcaf; /* fieldBorder */
    --gs-field-label: #157f73; /* fieldLabel */
    --gs-field-fill: #ffffff; /* fieldFill */
    --gs-field-text: #122d3e; /* fieldText */
    --gs-field-hint: #8094a8; /* fieldHint */
    --gs-field-readonly-fill: #f7f7fa; /* read-only usa a cor do fundo da tela */

    --gs-accent: #157f73; /* accent */
    --gs-accent-soft: rgba(21, 127, 115, 0.1); /* accentSoft */
    --gs-chevron: #9bb4cf; /* chevron */

    --gs-shadow-card: 0 1px 3px rgba(20, 40, 70, 0.06);
    --gs-shadow-card-hover: 0 6px 18px rgba(18, 45, 62, 0.12);
    --gs-shadow-header: 0 1px 0 rgba(255, 255, 255, 0.06);

    /* --- Sidenav / drawer (BaseWidget.dart: drawer branco, header navy) --- */
    --gs-sidenav-bg: #ffffff;
    --gs-sidenav-ink: #122d3e;
    --gs-sidenav-muted: #6c7f95;
    --gs-sidenav-hover: rgba(21, 127, 115, 0.08);
    --gs-sidenav-active-bg: rgba(58, 188, 175, 0.14);

    /* --- Geometria (gs_widgets.dart) --- */
    --gs-r-card: 16px; /* gsDataCard/gsSectionCard radius:16 */
    --gs-r-card-sm: 14px; /* linhas de itens */
    --gs-r-field: 12px; /* gsInputDecoration radius padrão */
    --gs-r-btn: 14px; /* gsPrimaryButton radius:14 */
    --gs-r-chip: 11px; /* gsIconChip radius:11 */
    --gs-r-chip-lg: 14px; /* chip do gsNavTile */
    --gs-r-pill: 20px; /* gsStatusPill */
    --gs-r-modal: 22px; /* gsShowActionSheet top radius:22 */
    --gs-r-panel: 24px; /* kPainelListaRadius */

    --gs-h-btn: 52px; /* gsPrimaryButton height:52 */
    --gs-h-btn-sm: 44px;
    --gs-h-field: 48px; /* GsFieldHeight.chapa — média das telas web */
    --gs-h-field-lg: 54px; /* GsFieldHeight.login */

    --gs-gap: 16px; /* padding lateral da tela */

    color-scheme: light;
}

/* --- Tema ESCURO (GsColors.dark) --- */
[data-gs-theme="dark"] {
    --gs-bg: #122d3e;
    --gs-surface: #16273a;
    --gs-surface-border: rgba(255, 255, 255, 0.16);
    --gs-surface-shadow: rgba(0, 0, 0, 0);
    --gs-data-card: #e0eaf5; /* card claro sobre navy, p/ legibilidade */
    --gs-data-card-border: transparent;
    --gs-on-data-card: #122d3e;
    --gs-on-data-card-muted: rgba(18, 45, 62, 0.75);
    --gs-data-divider: #c4d4e6;
    --gs-panel: #eaf1f8;

    --gs-ink: #ffffff;
    --gs-muted: rgba(142, 232, 251, 0.75);
    --gs-label-muted: rgba(142, 232, 251, 0.5);
    --gs-divider: rgba(255, 255, 255, 0.12);

    --gs-field-border: rgba(142, 232, 251, 0.4);
    --gs-field-label: rgba(142, 232, 251, 0.7);
    --gs-field-fill: rgba(255, 255, 255, 0.08);
    --gs-field-text: #ffffff;
    --gs-field-hint: rgba(142, 232, 251, 0.5);
    --gs-field-readonly-fill: rgba(255, 255, 255, 0.04);

    --gs-accent: #3abcaf;
    --gs-accent-soft: rgba(255, 255, 255, 0.1);
    --gs-chevron: rgba(95, 162, 221, 0.75);

    --gs-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.18);
    --gs-shadow-card-hover: 0 8px 22px rgba(0, 0, 0, 0.32);

    --gs-sidenav-bg: #16273a;
    --gs-sidenav-ink: #ffffff;
    --gs-sidenav-muted: rgba(142, 232, 251, 0.75);
    --gs-sidenav-hover: rgba(255, 255, 255, 0.07);
    --gs-sidenav-active-bg: rgba(58, 188, 175, 0.2);

    color-scheme: dark;
}


/* ===========================================================================
   2. Base — tipografia e fundo
      DESIGN_SYSTEM_v2 §1: "Tamanho mínimo de fonte: 14."
   =========================================================================== */
body {
    font-family: "GsRoboto", Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--gs-bg);
    color: var(--gs-ink);
    font-size: 0.9375rem; /* 15px — corpo do app */
    -webkit-text-size-adjust: 100%;
}

/* Nenhum texto abaixo de 14px (regra do handoff). O SB Admin usa .small e
   .text-xs bem menores; aqui elevamos o piso sem mudar a hierarquia. */
.small,
small,
.text-muted.small,
.dropdown-user-details-email,
.text-xs {
    font-size: 0.875rem !important; /* 14px */
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--gs-ink);
    font-weight: 700;
}

.text-muted {
    color: var(--gs-muted) !important;
}

a {
    color: var(--gs-accent);
}

    a:hover {
        color: var(--gs-green);
    }

hr,
.dropdown-divider {
    border-color: var(--gs-divider);
}

/* Foco visível e consistente — acessibilidade (o template original quase
   apaga o outline). */
:focus-visible {
    outline: 2px solid var(--gs-teal);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sem rolagem horizontal da página em nenhuma largura. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* ===========================================================================
   3. Shell — topnav (AppBar navy do app, nos DOIS temas)
   =========================================================================== */
.topnav.navbar,
.topnav.navbar-light.bg-white {
    background: linear-gradient(160deg, var(--gs-navy-grad) 0%, var(--gs-navy) 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 12px rgba(6, 15, 30, 0.18) !important;
    border-bottom: 0;
    min-height: 3.625rem;
}

    /* Ícones e textos do topo em branco. */
    .topnav .btn-icon,
    .topnav .btn-transparent-dark,
    .topnav .navbar-brand,
    .topnav .nav-link {
        color: #fff !important;
    }

        .topnav .btn-transparent-dark:hover,
        .topnav .btn-transparent-dark:focus {
            background-color: rgba(255, 255, 255, 0.12) !important;
            color: #fff !important;
        }

    .topnav .btn-icon svg,
    .topnav .btn-icon .feather {
        color: #fff;
        stroke: #fff;
    }

    /* Marca: logo oficial em negativo (GransoftWeb-Logo-Branco.svg). */
    .topnav .navbar-brand {
        font-weight: 700;
        letter-spacing: 0.01em;
    }

.gs-brand {
    display: inline-flex;
    align-items: center;
    padding: 0 0.25rem;
}

    .gs-brand img,
    .gs-brand svg {
        height: 26px; /* DashBoard.dart: Image.asset(LOGO_BRAND_BRANCO, height: 26) */
        width: auto;
        max-width: 190px;
        display: block;
    }

@media (max-width: 575.98px) {
    .gs-brand img {
        height: 22px;
        max-width: 140px;
    }
}

/* Avatar do usuário no topo */
.topnav .dropdown-user .btn-icon img,
.topnav .dropdown-user img.img-fluid {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.35);
}

/* Menu suspenso do usuário */
.dropdown-menu {
    border-radius: var(--gs-r-card);
    border: 1px solid var(--gs-surface-border);
    background-color: var(--gs-surface);
    box-shadow: 0 12px 32px rgba(6, 15, 30, 0.16);
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: 10px;
    color: var(--gs-ink);
    padding: 0.6rem 0.75rem;
    min-height: 44px; /* alvo de toque */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--gs-accent-soft);
        color: var(--gs-ink);
    }

.dropdown-header {
    color: var(--gs-muted);
}

.dropdown-user-details-name {
    color: var(--gs-ink);
    font-weight: 600;
}

.dropdown-user-img {
    border-radius: 50%;
    object-fit: cover;
}


/* ===========================================================================
   4. Shell — sidenav (o drawer do app: fundo claro, cabeçalho navy)
   =========================================================================== */
.sidenav,
.sidenav.sidenav-light {
    background-color: var(--gs-sidenav-bg);
    border-right: 1px solid var(--gs-surface-border);
}

.sidenav-menu {
    padding: 0.75rem 0.625rem 1.5rem;
}

.sidenav .sidenav-menu-heading {
    color: var(--gs-label-muted);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1rem 0.75rem 0.375rem;
}

.sidenav .nav .nav-link {
    color: var(--gs-sidenav-ink);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 12px;
    padding: 0.7rem 0.75rem;
    margin-bottom: 0.125rem;
    min-height: 46px;
    display: flex;
    align-items: center;
    transition: background-color 0.12s ease-in-out, color 0.12s ease-in-out;
}

    .sidenav .nav .nav-link .nav-link-icon {
        color: var(--gs-accent);
        margin-right: 0.625rem;
        display: inline-flex;
    }

        .sidenav .nav .nav-link .nav-link-icon svg {
            width: 20px;
            height: 20px;
        }

    .sidenav .nav .nav-link:hover {
        background-color: var(--gs-sidenav-hover);
        color: var(--gs-ink);
    }

    /* Item ativo: faixa teal à esquerda + fundo suave (marcado por JS). */
    .sidenav .nav .nav-link.active,
    .sidenav .nav .nav-link[aria-current="page"] {
        background-color: var(--gs-sidenav-active-bg);
        color: var(--gs-ink);
        font-weight: 700;
        box-shadow: inset 3px 0 0 var(--gs-teal);
    }

/* Cabeçalho de perfil do drawer (gerado em ControllerAppPage.Menu). */
/* Empilhado, como o drawer do app (avatar em cima, nome e empresa abaixo):
   o menu tem 15rem, e lado a lado sobrava largura demais pouca para o nome —
   ele virava reticências já no segundo sobrenome. */
.gs-sidenav-profile {
    background: linear-gradient(160deg, var(--gs-navy-grad) 0%, var(--gs-navy) 100%);
    color: #fff;
    padding: 1.125rem 1rem 1.25rem;
    margin: -0.75rem -0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

    .gs-sidenav-profile .gs-avatar {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        border-radius: 50%;
        background-color: var(--gs-teal);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

        .gs-sidenav-profile .gs-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* display:block é obrigatório: os dois são <span> (a marcação vem do C#) e
       um elemento inline ignora overflow/text-overflow — sem isto o nome
       escapa da largura do menu em vez de virar reticências. */
    .gs-sidenav-profile .gs-sidenav-profile-name {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gs-sidenav-profile .gs-sidenav-profile-org {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.3;
        margin-top: 2px;
        color: rgba(255, 255, 255, 0.7);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.gs-sidenav-profile-text {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Conteúdo */
#layoutSidenav #layoutSidenav_content {
    background-color: var(--gs-bg);
}

/* Véu do drawer no mobile: mais suave que o preto 50% do template. */
.sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
    background: rgba(6, 15, 30, 0.55);
    opacity: 1;
}


/* ===========================================================================
   5. Cabeçalho de página
      No app é a AppBar navy; na web ela vira uma faixa navy compacta com
      título, ações e busca. Mantivemos as classes do template para não
      quebrar as telas que já as usam.
   =========================================================================== */
.page-header.page-header-dark,
.page-header.bg-gradient-primary-to-secondary {
    background: linear-gradient(160deg, var(--gs-navy-grad) 0%, var(--gs-navy) 100%) !important;
    color: #fff;
    border-bottom: 0;
}

.page-header.page-header-light,
.page-header.bg-white {
    background-color: var(--gs-surface) !important;
    border-bottom: 1px solid var(--gs-surface-border) !important;
    color: var(--gs-ink);
}

/* Os seletores abaixo repetem a cadeia de 3 classes do SB Admin
   (`.page-header .page-header-content .page-header-title`) de propósito: com
   apenas duas classes a regra do template (font-size: 2.25rem) ganharia por
   especificidade e o título continuaria gigante no celular. */
.page-header .page-header-content .page-header-title {
    /* Fluido: ~20px a 360px, ~28px a partir de 1200px. O título de 36px do
       template ocupava três linhas no celular. */
    font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0;
    line-height: 1.2;
}

.page-header-dark .page-header-content .page-header-title,
.bg-gradient-primary-to-secondary .page-header-content .page-header-title {
    color: #fff;
}

.page-header-light .page-header-content .page-header-title {
    color: var(--gs-ink);
}

.page-header .page-header-content .page-header-title .page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; /* gsIconChip box:42 radius:11 */
    height: 42px;
    border-radius: var(--gs-r-chip);
    background-color: rgba(58, 188, 175, 0.18);
    color: var(--gs-teal);
    margin-right: 0;
    flex: 0 0 42px;
    align-self: flex-start;
}

.page-header-light .page-header-content .page-header-title .page-header-icon {
    background-color: var(--gs-accent-soft);
    color: var(--gs-accent);
}

.page-header .page-header-content .page-header-title .page-header-icon .feather,
.page-header .page-header-content .page-header-title .page-header-icon svg {
    width: 22px;
    height: 22px;
}

/* Subtítulo do header */
.page-header .page-header-content .page-header-subtitle {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
    margin-top: 0.25rem;
}

.page-header-light .page-header-content .page-header-subtitle {
    color: var(--gs-muted);
}

/* Busca dentro do header navy */
.page-header-search .input-group-joined {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--gs-r-field);
    overflow: hidden;
}

    .page-header-search .input-group-joined .form-control {
        background-color: transparent;
        border: 0;
        color: #fff;
        height: var(--gs-h-field);
        box-shadow: none;
    }

        .page-header-search .input-group-joined .form-control::placeholder {
            color: rgba(255, 255, 255, 0.62);
        }

    .page-header-search .input-group-joined .input-group-text {
        background-color: transparent;
        border: 0;
        color: var(--gs-teal);
        min-width: 48px;
        justify-content: center;
    }

    .page-header-search .input-group-joined:focus-within {
        border-color: var(--gs-teal);
        background-color: rgba(255, 255, 255, 0.14);
    }


/* ===========================================================================
   6. Cards (gsDataCard / gsSectionCard / gsNavTile)
   =========================================================================== */
.card {
    background-color: var(--gs-surface);
    border: 1px solid var(--gs-surface-border);
    border-radius: var(--gs-r-card);
    box-shadow: var(--gs-shadow-card);
    color: var(--gs-ink);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--gs-divider);
    color: var(--gs-ink);
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0.9rem 1rem;
    border-top-left-radius: var(--gs-r-card);
    border-top-right-radius: var(--gs-r-card);
}

.card-body {
    padding: 1rem;
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--gs-divider);
    border-bottom-left-radius: var(--gs-r-card);
    border-bottom-right-radius: var(--gs-r-card);
}

/* `lift` do template: elevação no hover, agora com a sombra da marca. */
.lift {
    transition: transform 0.14s ease-in-out, box-shadow 0.14s ease-in-out;
}

    .lift:hover,
    .lift:focus-within {
        transform: translateY(-2px);
        box-shadow: var(--gs-shadow-card-hover);
    }

/* Cartão clicável (o <a class="card">): sem sublinhado, cor herdada. */
a.card,
a.card:hover {
    text-decoration: none;
    color: inherit;
}

/* Faixa lateral de status usada nas listas (border-start-lg). */
.card.border-start-lg {
    border-left-width: 4px !important;
}

.border-start-secondary {
    border-left-color: var(--gs-teal) !important;
}

.border-start-success {
    border-left-color: var(--gs-status-finalizado-ink) !important;
}

.border-start-primary {
    border-left-color: var(--gs-navy) !important;
}

.border-start-danger {
    border-left-color: var(--gs-excluir) !important;
}

/* O template dá `.shadow` na coluna que envolve o card; neutralizamos a
   sombra dura do Bootstrap para não somar com a nossa. */
.col-xl-12.shadow,
.col-xl-6.shadow,
.col-xl-4.shadow {
    box-shadow: none !important;
}


/* ===========================================================================
   7. Tile de navegação (gsNavTile) — cards de módulo do Main.aspx
   =========================================================================== */
.gs-nav-tile {
    display: flex;
    align-items: center;
    gap: 14px; /* gsNavTile SizedBox(width:14) */
    width: 100%;
    height: 100%;
    padding: 14px; /* EdgeInsets.symmetric(h:14, v:14) */
    background-color: var(--gs-surface);
    border: 1px solid rgba(58, 188, 175, 0.4); /* kTeal.withValues(alpha:.4) */
    border-radius: var(--gs-r-card);
    box-shadow: var(--gs-shadow-card);
    color: var(--gs-ink);
    text-decoration: none;
    transition: transform 0.14s ease-in-out, box-shadow 0.14s ease-in-out, border-color 0.14s ease-in-out;
}

    .gs-nav-tile:hover,
    .gs-nav-tile:focus-visible {
        transform: translateY(-2px);
        box-shadow: var(--gs-shadow-card-hover);
        border-color: var(--gs-teal);
        color: var(--gs-ink);
        text-decoration: none;
    }

.gs-nav-tile-icon {
    flex: 0 0 54px; /* gsNavTile: 54x54, raio 14, teal sólido, ícone branco 27 */
    width: 54px;
    height: 54px;
    border-radius: var(--gs-r-chip-lg);
    background-color: var(--gs-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .gs-nav-tile-icon svg,
    .gs-nav-tile-icon .feather {
        width: 27px;
        height: 27px;
        stroke-width: 2;
    }

.gs-nav-tile-body {
    flex: 1 1 auto;
    min-width: 0;
}

.gs-nav-tile-title {
    font-size: 1.0625rem; /* 17 / w700 */
    font-weight: 700;
    line-height: 1.25;
    color: var(--gs-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-nav-tile-subtitle {
    margin: 3px 0 0;
    font-size: 0.875rem; /* 14 / w400 */
    font-weight: 400;
    line-height: 1.35;
    color: var(--gs-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gs-nav-tile-chevron {
    flex: 0 0 auto;
    color: var(--gs-chevron);
    display: inline-flex;
}

    .gs-nav-tile-chevron svg {
        width: 22px;
        height: 22px;
    }

/* Grade dos módulos: 1 coluna no celular, 2 no tablet, 3 no desktop largo.
   Evita o "card esticado" que o col-xl-4 produzia em telas muito largas. */
.gs-tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .gs-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (min-width: 1400px) {
    .gs-tile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ===========================================================================
   8. Botões
      Cor = intenção (DESIGN_SYSTEM_v2 §5):
      verde = ação de tela · azul = confirmar em modal · vermelho = excluir ·
      cinza = secundário/cancelar · navy = específico.
   =========================================================================== */
.btn {
    border-radius: var(--gs-r-btn);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.65rem 1.15rem;
    min-height: var(--gs-h-btn-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}

.btn-lg {
    min-height: var(--gs-h-btn);
    font-size: 1rem;
    border-radius: var(--gs-r-btn);
}

.btn-sm {
    min-height: 38px;
    font-size: 0.875rem;
    border-radius: 12px;
    padding: 0.4rem 0.85rem;
}

/* --- Primário: teal (ação de tela) --- */
.btn-primary {
    background-color: var(--gs-teal);
    border-color: var(--gs-teal);
    color: var(--gs-teal-ink);
    box-shadow: none;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary:not(:disabled):not(.disabled):active {
        background-color: #2fa89c;
        border-color: #2fa89c;
        color: var(--gs-teal-ink);
    }

    .btn-primary:focus-visible {
        box-shadow: 0 0 0 3px rgba(58, 188, 175, 0.35);
    }

.btn-outline-primary {
    color: var(--gs-accent);
    border-color: var(--gs-accent);
    background-color: transparent;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--gs-accent-soft);
        border-color: var(--gs-accent);
        color: var(--gs-accent);
    }

/* --- Secundário: cinza (era roxo no template) --- */
.btn-secondary {
    background-color: var(--gs-divider);
    border-color: var(--gs-divider);
    color: var(--gs-ink);
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:not(:disabled):not(.disabled):active {
        background-color: #d8e3ef;
        border-color: #d8e3ef;
        color: var(--gs-ink);
    }

[data-gs-theme="dark"] .btn-secondary {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--gs-muted);
    border-color: var(--gs-surface-border);
}

    .btn-outline-secondary:hover {
        background-color: var(--gs-divider);
        color: var(--gs-ink);
        border-color: var(--gs-surface-border);
    }

.btn-light {
    background-color: var(--gs-surface);
    border-color: var(--gs-surface-border);
    color: var(--gs-ink);
}

/* --- Confirmar dentro de modal: azul (kConfirmBlue) ---
   Aplicado automaticamente ao .btn-primary do rodapé de um .modal, que é
   exatamente o papel que ele cumpre nas telas atuais. */
.modal .modal-footer .btn-primary,
.btn-gs-confirm {
    background-color: var(--gs-confirm);
    border-color: var(--gs-confirm);
    color: #fff;
}

    .modal .modal-footer .btn-primary:hover,
    .modal .modal-footer .btn-primary:focus,
    .btn-gs-confirm:hover,
    .btn-gs-confirm:focus {
        background-color: #0b5ed7;
        border-color: #0b5ed7;
        color: #fff;
    }

/* --- Excluir: vermelho preenchido (kExcluirVermelho) --- */
.btn-danger,
.btn-gs-excluir {
    background-color: var(--gs-excluir);
    border-color: var(--gs-excluir);
    color: #fff;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-gs-excluir:hover {
        background-color: #cf3f4e;
        border-color: #cf3f4e;
        color: #fff;
    }

.btn-outline-danger {
    color: var(--gs-excluir);
    border-color: var(--gs-excluir);
}

    .btn-outline-danger:hover {
        background-color: rgba(226, 76, 91, 0.1);
        color: var(--gs-excluir);
    }

/* --- Específico: navy (gsSpecificButton) --- */
.btn-gs-specific,
.btn-dark {
    background-color: var(--gs-navy);
    border-color: var(--gs-navy);
    color: #fff;
}

    .btn-gs-specific:hover,
    .btn-dark:hover {
        background-color: #0d2130;
        border-color: #0d2130;
        color: #fff;
    }

.btn-success {
    background-color: var(--gs-status-finalizado-ink);
    border-color: var(--gs-status-finalizado-ink);
    color: #fff;
}

.btn-warning {
    background-color: var(--gs-warning);
    border-color: var(--gs-warning);
    color: var(--gs-navy);
}

/* Ícone dentro de botão/link nunca recebe o clique.
   Motivo funcional (não estético): Fn.js resolve o destino do POST com
   `Q.GetTarget(event)` → `event.target` e depois lê o `href` DESSE elemento
   (js/Fn.js, sendData). Se o clique cair no <svg> do ícone, o href some e a
   chamada sai sem `service`. Neutralizar o ponteiro nos filhos garante que o
   alvo seja sempre o próprio <a>/<button> — isto também conserta o link
   "Desconectar", que já tinha o ícone dentro do <a onclick="Q.sendData"). */
[onclick*="Q.sendData"] > *,
[onclick*="sendData"] > * {
    pointer-events: none;
}

.btn > svg,
.btn > i,
.btn > .feather,
.btn > .dropdown-item-icon {
    pointer-events: none;
}

/* Botão circular de ícone (busca ao lado de campo: navy 52px, ícone branco). */
.btn-icon {
    width: auto;
    min-width: 44px;
    padding: 0.5rem;
}

.gs-btn-search {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background-color: var(--gs-navy);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
}

    .gs-btn-search:hover,
    .gs-btn-search:focus {
        background-color: #0d2130;
        color: #fff;
    }

/* Botão flutuante (FAB) — filtro/voltar das listas. */
.Iconfloat-right-bottom,
.Iconfloat-right-top {
    width: 56px;
    height: 56px;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(6, 15, 30, 0.24) !important;
    text-decoration: none;
    transition: transform 0.12s ease-in-out;
}

    .Iconfloat-right-bottom:hover,
    .Iconfloat-right-top:hover {
        transform: translateY(-2px);
    }

    /* O FAB primário (filtro) fica teal; o "voltar" fica neutro. */
    .Iconfloat-right-bottom.bg-primary {
        background-color: var(--gs-teal) !important;
        color: #fff !important;
    }

    .Iconfloat-right-bottom.bg-light {
        background-color: var(--gs-surface) !important;
        color: var(--gs-muted) !important;
        border: 1px solid var(--gs-surface-border);
    }

.button-float {
    font-size: 20px;
    line-height: 1;
}

/* Reserva espaço no fim da página para o FAB não cobrir conteúdo/ações. */
main {
    padding-bottom: 5.5rem;
}

@media (min-width: 992px) {
    .Iconfloat-right-bottom,
    .Iconfloat-right-top {
        right: 28px;
        bottom: 28px;
    }
}


/* ===========================================================================
   9. Formulários (gsInputDecoration + gsFieldLabel)
      Handoff: rótulo ACIMA da caixa, nunca floating label.
   =========================================================================== */
.form-label,
label.small,
.gs-field-label {
    display: block;
    color: var(--gs-field-label);
    font-size: 0.875rem; /* 14 / w400 no app; 600 fica melhor em tela grande */
    font-weight: 600;
    margin: 0 0 6px 4px; /* gsFieldLabel: EdgeInsets.only(left:4, bottom:6) */
}

.form-control,
.form-select {
    background-color: var(--gs-field-fill);
    border: 1px solid var(--gs-field-border);
    border-radius: var(--gs-r-field);
    color: var(--gs-field-text);
    min-height: var(--gs-h-field);
    padding: 0.6rem 14px; /* contentPadding horizontal:14 */
    font-size: 0.9375rem; /* 15 */
    box-shadow: none;
    transition: border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}

    .form-control::placeholder {
        color: var(--gs-field-hint);
        opacity: 1;
    }

    .form-control:focus,
    .form-select:focus {
        background-color: var(--gs-field-fill);
        border-color: var(--gs-accent);
        border-width: 1.4px; /* focusedBorder width:1.4 */
        color: var(--gs-field-text);
        box-shadow: 0 0 0 3px rgba(58, 188, 175, 0.18);
        outline: none;
    }

    /* Só-leitura/desabilitado: fundo = cor do fundo da tela (regra do handoff). */
    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled {
        background-color: var(--gs-field-readonly-fill);
        color: var(--gs-muted);
        border-color: var(--gs-surface-border);
        opacity: 1;
        cursor: default;
    }

textarea.form-control {
    min-height: 96px;
    line-height: 1.45;
}

.form-check-input:checked {
    background-color: var(--gs-teal);
    border-color: var(--gs-teal);
}

.form-check-input:focus {
    border-color: var(--gs-teal);
    box-shadow: 0 0 0 3px rgba(58, 188, 175, 0.2);
}

/* Campo + botão colado (busca de CEP/cliente): mantém as classes do template. */
.input-group-joined {
    border: 1px solid var(--gs-field-border);
    border-radius: var(--gs-r-field);
    background-color: var(--gs-field-fill);
    overflow: hidden;
}

    .input-group-joined .form-control {
        border: 0;
        background-color: transparent;
        box-shadow: none;
    }

        .input-group-joined .form-control:focus {
            box-shadow: none;
            border: 0;
        }

    .input-group-joined .input-group-text {
        background-color: transparent;
        border: 0;
        color: var(--gs-accent);
        min-width: 48px; /* alvo de toque */
        justify-content: center;
        cursor: pointer;
    }

    .input-group-joined:focus-within {
        border-color: var(--gs-accent);
        box-shadow: 0 0 0 3px rgba(58, 188, 175, 0.18);
    }

/* Validação */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--gs-excluir);
    background-image: none;
}

.invalid-feedback,
.text-danger {
    color: var(--gs-excluir) !important;
    font-size: 0.875rem;
}

.valid-feedback {
    color: var(--gs-status-finalizado-ink);
    font-size: 0.875rem;
}

/* select2 alinhado ao restante dos campos (o projeto usa select2 4.1). */
.select2-container--default .select2-selection--single {
    height: var(--gs-h-field);
    border: 1px solid var(--gs-field-border);
    border-radius: var(--gs-r-field);
    background-color: var(--gs-field-fill);
    display: flex;
    align-items: center;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--gs-field-text);
        line-height: 1.4;
        padding-left: 14px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: 8px;
    }

.select2-container--default .select2-dropdown {
    border-color: var(--gs-field-border);
    border-radius: var(--gs-r-field);
    background-color: var(--gs-surface);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--gs-accent-soft);
    color: var(--gs-ink);
}

/* ---------------------------------------------------------------------------
   Formulário em DUAS COLUNAS no desktop.
   Decisão web (adendo): no celular tudo em uma coluna; a partir de 992px os
   campos se agrupam em duas. Campos longos (observação, textarea, tabelas)
   ocupam a largura toda via .gs-span-2.
   As telas que já usam `row > col-md-*` continuam valendo — isto é para os
   blocos marcados com .gs-form-grid.
   --------------------------------------------------------------------------- */
.gs-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}

@media (min-width: 992px) {
    .gs-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .gs-form-grid > .gs-span-2 {
            grid-column: 1 / -1;
        }
}

.gs-span-2 textarea.form-control {
    min-height: 110px;
}


/* ===========================================================================
   10. Abas (gsTabsPanel)
   =========================================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--gs-divider);
    gap: 0.25rem;
}

    .nav-tabs .nav-link {
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 10px 10px 0 0;
        color: var(--gs-muted);
        font-weight: 600;
        font-size: 0.9375rem;
        padding: 0.7rem 1rem;
        min-height: 46px;
    }

        .nav-tabs .nav-link:hover {
            color: var(--gs-ink);
            background-color: var(--gs-accent-soft);
            border-bottom-color: transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--gs-accent);
            background-color: transparent;
            border-bottom-color: var(--gs-teal);
        }

.card-header-tabs {
    margin-bottom: -0.9rem;
}

    /* O SB Admin pinta a aba ativa de branco fixo em
       `.card .card-header .card-header-tabs .nav-link.active` (4 classes).
       Repetimos a cadeia para o tema escuro não ficar com um retângulo branco
       atrás da aba selecionada. */
    .card .card-header .card-header-tabs .nav-link.active,
    .card-header-tabs .nav-link.active {
        background-color: transparent;
        border-bottom-color: var(--gs-teal);
        color: var(--gs-accent);
    }

/* Abas roláveis no celular, sem estourar a largura da página. */
@media (max-width: 575.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .nav-tabs::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs .nav-link {
            white-space: nowrap;
        }
}


/* ===========================================================================
   11. Pills de status, badges e chips
   =========================================================================== */
.gs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 10px; /* gsStatusPill */
    border-radius: var(--gs-r-pill);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.gs-pill-producao {
    color: var(--gs-status-producao-ink);
    background-color: var(--gs-status-producao-bg);
}

.gs-pill-finalizado {
    color: var(--gs-status-finalizado-ink);
    background-color: var(--gs-status-finalizado-bg);
}

.gs-pill-atraso {
    color: var(--gs-status-atraso-ink);
    background-color: var(--gs-status-atraso-bg);
}

.gs-pill-neutro {
    color: var(--gs-muted);
    background-color: var(--gs-divider);
}

.badge {
    border-radius: 8px; /* gsBadge radius:8 */
    padding: 3px 7px;
    font-size: 0.875rem;
    font-weight: 600;
}

.badge.bg-primary {
    background-color: var(--gs-accent-soft) !important;
    color: var(--gs-accent) !important;
}

/* Chip de filtro contornado (gsFilterChip). */
.gs-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--gs-teal);
    background-color: rgba(58, 188, 175, 0.1);
    color: var(--gs-accent);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

    .gs-filter-chip:hover {
        background-color: rgba(58, 188, 175, 0.18);
        color: var(--gs-accent);
        text-decoration: none;
    }

/* Chip de ícone (gsIconChip 42x42 raio 11). */
.gs-icon-chip {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--gs-r-chip);
    background-color: var(--gs-accent-soft);
    color: var(--gs-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .gs-icon-chip svg {
        width: 25px;
        height: 25px;
    }

/* Círculo de ícone do topo dos formulários (handoff §4: 96px, accentSoft +
   borda teal, no lugar de ilustração SVG). */
.gs-form-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.gs-form-hero-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--gs-accent-soft);
    border: 1px solid rgba(58, 188, 175, 0.45);
    color: var(--gs-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .gs-form-hero-icon svg {
        width: 44px; /* iconBox * 0.46 */
        height: 44px;
    }


/* ===========================================================================
   12. Listas de dados (card de OS/orçamento/chapa)
   =========================================================================== */
.gs-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 1200px) {
    /* No desktop, duas colunas de cards aproveitam a largura sem esticar o
       card até virar uma faixa vazia. */
    .gs-list.gs-list-2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

.gs-data-card {
    display: block;
    background-color: var(--gs-data-card);
    border: 1px solid var(--gs-data-card-border);
    border-radius: var(--gs-r-card);
    box-shadow: var(--gs-shadow-card);
    color: var(--gs-on-data-card);
    padding: 12px 14px; /* gsDataCard EdgeInsets.fromLTRB(14,12,14,12) */
    text-decoration: none;
    transition: transform 0.14s ease-in-out, box-shadow 0.14s ease-in-out;
}

    .gs-data-card:hover,
    .gs-data-card:focus-visible {
        transform: translateY(-2px);
        box-shadow: var(--gs-shadow-card-hover);
        color: var(--gs-on-data-card);
        text-decoration: none;
    }

.gs-data-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gs-on-data-card);
    margin: 0 0 2px;
    line-height: 1.3;
}

.gs-data-card-sub {
    font-size: 0.875rem;
    color: var(--gs-on-data-card-muted);
}

.gs-data-divider {
    height: 1px;
    background-color: var(--gs-data-divider);
    margin: 6px 0; /* gsDataDivider */
    border: 0;
}

/* Par rótulo/valor dentro de um card de dados. */
.gs-kv {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 2px 0;
    font-size: 0.875rem;
}

    .gs-kv dt,
    .gs-kv .gs-kv-k {
        color: var(--gs-on-data-card-muted);
        font-weight: 400;
        margin: 0;
    }

    .gs-kv dd,
    .gs-kv .gs-kv-v {
        color: var(--gs-on-data-card);
        font-weight: 600;
        margin: 0;
        text-align: right;
    }

/* Painel claro que segura a lista (gsPainelListaColor + kPainelListaRadius). */
.gs-list-panel {
    background-color: var(--gs-panel);
    border-radius: var(--gs-r-panel) var(--gs-r-panel) 0 0;
    padding: 16px;
}


/* ===========================================================================
   13. Estado vazio (gsEmptyState)
   =========================================================================== */
.gs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    gap: 18px; /* SizedBox(height:18) */
}

.gs-empty-icon {
    width: 96px; /* iconBox:96 */
    height: 96px;
    border-radius: 50%;
    background-color: var(--gs-accent-soft);
    color: var(--gs-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .gs-empty-icon svg {
        width: 44px;
        height: 44px;
    }

.gs-empty-text {
    font-size: 0.9375rem; /* 15 / w400 */
    font-weight: 400;
    color: var(--gs-muted);
    max-width: 46ch;
    margin: 0;
}

.gs-empty-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gs-ink);
    margin: 0;
}


/* ===========================================================================
   14. Modais — no desktop, diálogo; no celular, folha que sobe de baixo
        (gsShowActionSheet: raio 22 no topo, alça de arrasto).
   =========================================================================== */
.modal-content {
    background-color: var(--gs-surface);
    border: 1px solid var(--gs-surface-border);
    border-radius: var(--gs-r-modal);
    color: var(--gs-ink);
    box-shadow: 0 24px 60px rgba(6, 15, 30, 0.25);
}

.modal-header {
    border-bottom: 1px solid var(--gs-divider);
    padding: 1rem 1.25rem;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gs-ink);
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--gs-divider);
    padding: 0.875rem 1.25rem;
    gap: 0.625rem;
}

    .modal-footer > .btn {
        margin: 0;
        flex: 1 1 auto;
    }

@media (min-width: 576px) {
    .modal-footer > .btn {
        flex: 0 0 auto;
    }
}

.btn-close:focus {
    box-shadow: 0 0 0 3px rgba(58, 188, 175, 0.3);
}

[data-gs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Folha inferior no celular */
@media (max-width: 767.98px) {
    .modal .modal-dialog {
        margin: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        width: 100%;
    }

    .modal .modal-content {
        border-radius: var(--gs-r-modal) var(--gs-r-modal) 0 0;
        border-bottom: 0;
        max-height: 90vh;
    }

    .modal .modal-body {
        overflow-y: auto;
        /* Respeita a barra de gestos do iOS/Android — nada de ação escondida. */
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    /* Alça de arrasto (Container 42x4 da gsShowActionSheet). */
    .modal .modal-content::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 4px;
        background-color: var(--gs-divider);
        margin: 10px auto 0;
        flex: 0 0 auto;
    }

    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.22s ease-out;
    }

    .modal.show .modal-dialog {
        transform: translateY(0);
    }

    .modal .modal-footer {
        padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
    }
}

/* bootbox usa .modal padrão — herda tudo acima. */
.bootbox .modal-footer .btn {
    min-height: var(--gs-h-btn-sm);
}


/* ===========================================================================
   15. Tabelas — preservadas (comparação/produtividade), só revestidas.
        No celular ganham rolagem própria, sem rolar a página inteira.
   =========================================================================== */
.table {
    color: var(--gs-ink);
    border-color: var(--gs-divider);
    margin-bottom: 0;
}

    .table > thead {
        background-color: var(--gs-panel);
    }

        .table > thead th {
            color: var(--gs-muted);
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid var(--gs-divider);
            padding: 0.75rem;
            white-space: nowrap;
        }

    .table > tbody td {
        border-bottom: 1px solid var(--gs-divider);
        padding: 0.75rem;
        vertical-align: middle;
        font-size: 0.9375rem;
    }

    .table > tbody tr:hover {
        background-color: var(--gs-accent-soft);
    }

.table-responsive,
.gs-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--gs-r-card);
}

/* Lista de grupos (usada nos modais de seleção) */
.list-group-item {
    background-color: var(--gs-surface);
    border-color: var(--gs-divider);
    color: var(--gs-ink);
    min-height: 48px;
    display: flex;
    align-items: center;
}

    .list-group-item:hover {
        background-color: var(--gs-accent-soft);
    }

.list-group-flush .list-group-item {
    border-left: 0;
    border-right: 0;
}


/* ===========================================================================
   16. Alertas / toasts
   =========================================================================== */
.alert {
    border-radius: var(--gs-r-card);
    border: 1px solid transparent;
    font-size: 0.9375rem;
}

.alert-success {
    background-color: var(--gs-status-finalizado-bg);
    border-color: rgba(46, 125, 50, 0.35);
    color: var(--gs-status-finalizado-ink);
}

.alert-danger {
    background-color: rgba(226, 76, 91, 0.12);
    border-color: rgba(226, 76, 91, 0.35);
    color: var(--gs-excluir);
}

.alert-warning {
    background-color: rgba(244, 161, 0, 0.14);
    border-color: rgba(244, 161, 0, 0.4);
    color: #8a5b00;
}

.alert-info {
    background-color: var(--gs-accent-soft);
    border-color: rgba(58, 188, 175, 0.4);
    color: var(--gs-accent);
}


/* ===========================================================================
   17. Utilidades de cor do template remapeadas para a marca
        (as telas usam text-primary/bg-primary; sem isto sobraria o azul
        #0061f2 do SB Admin no meio da identidade nova).
   =========================================================================== */
.text-primary {
    color: var(--gs-accent) !important;
}

.text-secondary {
    color: var(--gs-muted) !important;
}

.text-blue {
    color: var(--gs-navy) !important;
}

.text-purple,
.text-indigo {
    color: var(--gs-accent) !important;
}

.text-success {
    color: var(--gs-status-finalizado-ink) !important;
}

.text-danger {
    color: var(--gs-excluir) !important;
}

.text-body {
    color: var(--gs-muted) !important;
}

.bg-primary {
    background-color: var(--gs-teal) !important;
}

.bg-secondary {
    background-color: var(--gs-navy) !important;
}

.bg-purple,
.bg-indigo,
.bg-blue {
    background-color: var(--gs-navy) !important;
}

.bg-success {
    background-color: var(--gs-status-finalizado-ink) !important;
}

.bg-light {
    background-color: var(--gs-surface) !important;
}

.bg-white {
    background-color: var(--gs-surface) !important;
}

.border-bottom {
    border-bottom-color: var(--gs-surface-border) !important;
}

.shadow,
.shadow-sm {
    box-shadow: var(--gs-shadow-card) !important;
}

.shadow-lg {
    box-shadow: var(--gs-shadow-card-hover) !important;
}

/* Ícone grande dos cards de módulo (feather-xl do template). */
.feather-xl {
    width: 2.5rem;
    height: 2.5rem;
}


/* ===========================================================================
   18. Preloader / bloqueio de tela
   =========================================================================== */
#preloader {
    background-color: var(--gs-bg);
}

.spinner .double-bounce1,
.spinner .double-bounce2 {
    background-color: var(--gs-teal);
}

.blockUI.blockMsg,
.blockOverlay {
    border-radius: var(--gs-r-card);
}


/* ===========================================================================
   19. Densidade e respiro por largura
        Celular: 1 coluna, alvos de toque, sem rolagem lateral.
        Desktop: largura útil com limite de leitura.
   =========================================================================== */
.container-xl {
    max-width: 1440px;
}

@media (max-width: 575.98px) {
    .container-xl.px-4 {
        padding-left: var(--gs-gap) !important;
        padding-right: var(--gs-gap) !important;
    }

    .card-body {
        padding: 0.875rem;
    }

    /* Ações de formulário viram bloco no celular: fáceis de acertar com o dedo. */
    .gs-form-actions .btn {
        width: 100%;
        min-height: var(--gs-h-btn);
    }

    /* Nada de coluna de tabela empurrando a página para o lado. */
    .table {
        min-width: 560px;
    }
}

.gs-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 14px; /* handoff: 14px antes do botão final */
}

@media (min-width: 576px) {
    /* Alinhado à esquerda de propósito: a ação principal é a primeira do DOM,
       então ela fica também na primeira posição visual, e a destrutiva nunca
       cai no canto onde o usuário clica por reflexo. Ordem de leitura, de
       tabulação e visual coincidem. */
    .gs-form-actions .btn {
        min-width: 160px;
    }
}

/* Barra de ações fixa no rodapé (telas de edição longas no celular). */
.gs-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background-color: var(--gs-bg);
    border-top: 1px solid var(--gs-divider);
    padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
    margin-top: 1rem;
}


/* ===========================================================================
   20. Alternador de tema (topnav)
   =========================================================================== */
.gs-theme-toggle {
    background: transparent;
    border: 0;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .gs-theme-toggle:hover,
    .gs-theme-toggle:focus {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .gs-theme-toggle svg {
        width: 20px;
        height: 20px;
    }

/* Mostra só o ícone do tema para o qual o clique vai levar. */
[data-gs-theme="dark"] .gs-theme-toggle .gs-icon-light {
    display: inline-flex;
}

[data-gs-theme="dark"] .gs-theme-toggle .gs-icon-dark {
    display: none;
}

.gs-theme-toggle .gs-icon-light {
    display: none;
}

.gs-theme-toggle .gs-icon-dark {
    display: inline-flex;
}


/* ===========================================================================
   20b. Telas de autenticação (Autenticacao / AutenticacaoEmpresa / Sketchup)
        Espelha a LoginView do app: fundo scaffoldBg (não navy), marca no topo,
        rótulo acima do campo e ação teal de largura total.
   =========================================================================== */
body.gs-auth {
    background-color: var(--gs-bg) !important;
    min-height: 100vh;
}

.gs-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
    gap: 1rem;
}

.gs-auth-card {
    width: 100%;
    max-width: 420px;
    background-color: var(--gs-surface);
    border: 1px solid var(--gs-surface-border);
    border-radius: var(--gs-r-card);
    box-shadow: 0 10px 30px rgba(18, 45, 62, 0.08);
    padding: 28px 24px;
}

.gs-auth-brand {
    text-align: center;
    margin-bottom: 20px; /* LoginView: SizedBox(height: 20) */
}

.gs-auth-logo {
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* O logo colorido tem o texto em navy: no tema escuro ele sumiria. */
[data-gs-theme="dark"] .gs-auth-logo {
    filter: brightness(0) invert(1);
}

.gs-auth-tagline {
    margin: 10px 0 0;
    font-size: 0.875rem;
    color: var(--gs-muted);
}

.gs-auth-footer {
    font-size: 0.875rem;
    color: var(--gs-label-muted);
    margin: 0;
    text-align: center;
}

/* O template deixa o card de login com .rounded-lg/.border-0; garantimos o
   raio da marca mesmo onde essas classes continuam no HTML. */
#layoutAuthentication .card {
    border-radius: var(--gs-r-card);
}


/* ===========================================================================
   21. Impressão — relatórios e telas de visualização continuam legíveis.
   =========================================================================== */
@media print {
    .topnav,
    #layoutSidenav_nav,
    .Iconfloat-right-bottom,
    .Iconfloat-right-top,
    .gs-form-actions,
    .page-header-search {
        display: none !important;
    }

    #layoutSidenav #layoutSidenav_content {
        margin-left: 0 !important;
    }

    body,
    .card {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
}


/* ===========================================================================
   22. Movimento reduzido — respeita a preferência do sistema.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .lift:hover,
    .gs-data-card:hover,
    .gs-nav-tile:hover {
        transform: none;
    }
}