/* ==========================================================
   static/css/layout.css — Painel de Alterações Orçamentárias
   (estilos próprios + widgets)

   Padronizado sobre o DS Gov / govbr-ds core v3.7 (core.css já
   carregado antes deste arquivo). O painel é fixo no TEMA CLARO
   do DS Gov — sem tema escuro nem botão de tema, igual aos
   painéis de Limites (LME/LMF) e ao portal.

   Todas as variáveis abaixo referenciam os tokens DS Gov para
   manter coesão visual; os nomes são os mesmos usados pelos
   demais arquivos CSS deste painel (filtros, cards, tabela,
   alteracoes, jornal).
   ========================================================== */

:root {

    /* ---- Tipografia (fonte oficial do DS: Rawline) ---- */
    --sans: var(--font-family-base);
    --mono: var(--font-family-base);

    /* ---- Escala de espaçamento ---- */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* ---- Raios (tokens --surface-rounder-*) ---- */
    --radius: var(--surface-rounder-sm);        /* 4px  */
    --radius-lg: var(--surface-rounder-md);     /* 8px  */
    --radius-pill: 100em;                       /* botões DS */
    --input-radius: var(--surface-rounder-sm);  /* 4px  */

    /* ---- Sombras (token --surface-shadow-*) ---- */
    --shadow: var(--surface-shadow-sm);
    --shadow-lg: 0 6px 6px rgba(0, 0, 0, 0.16);

    /* ---- Superfícies (tema claro — tokens oficiais do DS) ---- */
    --bg: var(--background-alternative);        /* gray-5  #f0f0f0 */
    --bg-elevated: var(--background);           /* branco */
    --card-bg: var(--background);
    --card-bg-hover: var(--gray-5);

    --border: var(--border-color);              /* gray-20 #ccc */
    --border-soft: var(--gray-10);              /* #e6e6e6 */

    --text: var(--color);                       /* gray-80 #333 */
    --text-dim: var(--gray-60);                 /* #636363 */
    --text-faint: var(--gray-40);               /* #888 */
    --text-muted: var(--gray-40);

    --title: var(--blue-warm-vivid-80);         /* #0c326f */

    /* ---- Cores acadêmicas (tokens DS Gov) ---- */
    --primary: var(--interactive);              /* blue-warm-vivid-70 #1351b4 */
    --primary-hover: var(--blue-warm-vivid-80); /* #0c326f */
    --primary-dim: var(--blue-warm-vivid-40);   /* #5992ed */
    --primary-rgb: 19, 81, 180;
    --primary-soft: rgba(19, 81, 180, 0.08);

    --success: var(--green-cool-vivid-50);      /* #168821 */
    --warning: var(--yellow-vivid-20);          /* #ffcd07 */
    --danger: var(--red-vivid-50);              /* #e52207 */

    /* ---- Superfícies derivadas ---- */
    --thead-bg: var(--gray-5);                  /* #f0f0f0 */
    --row-hover: rgba(19, 81, 180, 0.06);
    --bg-soft: rgba(0, 0, 0, 0.04);

    /* ---- Foco (padrão de acessibilidade do DS) ---- */
    --focus-color: #c2850c;                    /* gold-vivid-40 */
    --focus-width: 4px;                        /* surface-width-lg */

    /* ---- Header ---- */
    --header-overlay: rgba(255, 255, 255, 0.92);
}

/* ==========================================================
   RESET
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================
   ESTADO DE FOCO — PADRÃO DE ACESSIBILIDADE DO DS GOV.BR
   Contorno tracejado dourado (token --focus-color), 4px de
   largura e 4px de offset, visível em todos os elementos
   interativos ao navegar por teclado.
   ========================================================== */

:focus-visible {
    outline: var(--focus-width) dashed var(--focus-color);
    outline-offset: 4px;
}

/* ==========================================================
   TRANSIÇÃO DE TEMA — suaviza trocas de cor nas superfícies
   principais (mantida para estados hover/focus).
   ========================================================== */

body,
.card,
.filter-panel,
.chart-card,
.data-table-wrap,
.ms-btn,
.ms-dropdown,
.ms-option,
.ms-selected,
.pill,
.gs-wrap,
.gs-result,
.gs-chip,
.construtor-panel,
.construtor-options,
.btn-ghost,
.btn-primary,
.btn-limpar,
.page-header-info h2,
.page-header-info p,
.data-table thead th,
.row-mes,
.detalhe-cell,
.dou-link,
input,
select {
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* ==========================================================
   BODY
   ========================================================== */

html {
    scroll-behavior: smooth;
}

body {

    background: var(--bg);

    color: var(--text);

    font-family: var(--sans);

    font-size: 13px;

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

::selection {
    background: var(--primary);
    color: #fff;
}

/* ==========================================================
   LINKS
   ========================================================== */

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-dim);
    text-decoration: underline;
}

/* ==========================================================
   FAIXA DE CORES DO TOPO (DS Gov: azul/amarelo/verde/vermelho)
   ========================================================== */

.tile {
    height: 5px;
    display: flex;
}

.tile i {
    flex: 1;
}

.tile i:nth-child(1) { background: var(--primary); }
.tile i:nth-child(2) { background: var(--warning); }
.tile i:nth-child(3) { background: var(--success); }
.tile i:nth-child(4) { background: var(--danger); }

/* ==========================================================
   HEADER — br-header sticky (padrão dos painéis de Limites)
   ========================================================== */

.br-header.sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--background);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Link de volta ao portal no wordmark */
.br-header a.header-sign {
    color: inherit;
    text-decoration: none;
}

.br-header a.header-sign:hover {
    color: var(--primary);
    text-decoration: none;
}

.srcline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    font-size: 10.5px;
    color: var(--text-faint);
}

.srcline .fonte {
    font-weight: 600;
    color: var(--success);
}

.srcline .fonte .d {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    margin-right: 2px;
    vertical-align: 1px;
}

/* ==========================================================
   BOTÕES — padrão DS Gov.br (pílula, altura 40px)
   ========================================================== */

.btn-ghost {
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-dim);
    border-radius: 100em;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 12px;
    transition: all .15s ease;
    font-family: inherit;
}

.btn-ghost:hover {
    color: var(--text);
    border-color: var(--primary);
}

.btn-primary {
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 100em;
    height: 40px;
    min-height: 40px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s, box-shadow .2s;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-primary:active {
    background: var(--primary-hover);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.15);
}

/* ==========================================================
   LOADING
   ========================================================== */

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.loading::after {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==========================================================
   RODAPÉ
   ========================================================== */

.br-footer {
    margin-top: auto;
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dim);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 900px) {

    .container-xl {
        padding-left: 16px;
        padding-right: 16px;
    }
}