/* ==========================================================================
   Passaporte Universitário — identidade visual e estrutura de layout
   --------------------------------------------------------------------------
   A paleta sai do próprio símbolo do programa: o "P" que abre em vinho, fecha
   em azul-marinho e guarda um miolo terracota. Vinho e azul carregam a marca
   (faixa dos cartões, item ativo do menu); azul-marinho é a cor de ação; o
   terracota aparece raro, só onde um dado precisa ser lido antes dos outros.

   Este arquivo define os tokens e a estrutura (barra lateral, área principal,
   comportamento em telas pequenas). Os componentes ficam em resources/css/app.css.
   ========================================================================== */

:root {
    /* Marca */
    --pu-vinho: #7A1B39;
    --pu-vinho-escuro: #5E1129;
    --pu-azul: #1E3E77;
    --pu-azul-escuro: #16305C;
    --pu-azul-claro: #EAF0FA;
    --pu-terracota: #A8431B;

    /* Superfícies e traços */
    --pu-papel: #F4F6F9;
    --pu-superficie: #FFFFFF;
    --pu-superficie-2: #FAFBFD;
    --pu-linha: #E2E6EC;
    --pu-linha-forte: #CBD3DE;

    /* Texto */
    --pu-tinta: #1B1D21;
    --pu-tinta-media: #4C5666;
    --pu-tinta-fraca: #667080;

    /* Semânticas (tons fechados, legíveis sobre branco) */
    --pu-sucesso: #12563C;
    --pu-sucesso-claro: #E6F2ED;
    --pu-alerta: #8A5A00;
    --pu-alerta-claro: #FBF1DC;
    --pu-perigo: #A32A2A;
    --pu-perigo-claro: #FBEAEA;
    --pu-info: #1E3E77;
    --pu-info-claro: #EAF0FA;

    /* Ritmo */
    --pu-raio: 12px;
    --pu-raio-sm: 8px;
    --pu-sombra: 0 1px 2px rgba(27, 29, 33, .04), 0 4px 16px rgba(27, 29, 33, .05);
    --pu-sombra-forte: 0 6px 24px rgba(27, 29, 33, .10);
    --pu-faixa: linear-gradient(90deg, var(--pu-vinho) 0%, #8E3352 38%, #2C4E88 68%, var(--pu-azul) 100%);

    /* Medidas de layout */
    --pu-sidebar: 264px;
    --pu-header: 64px;

    /* Ponte com o Bootstrap: os utilitários de cor passam a falar a paleta. */
    --bs-primary: var(--pu-azul);
    --bs-primary-rgb: 30, 62, 119;
    --bs-body-color: var(--pu-tinta);
    --bs-body-bg: var(--pu-papel);
    --bs-border-color: var(--pu-linha);
    --bs-link-color: var(--pu-azul);
    --bs-link-hover-color: var(--pu-azul-escuro);
}

/* ====== ESTRUTURA ====== */

html { background-color: var(--pu-papel); }

body {
    background-color: var(--pu-papel);
    color: var(--pu-tinta);
}

/* Barra lateral fixa no desktop. */
#sidebar {
    width: var(--pu-sidebar);
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    background-color: var(--pu-superficie);
    border-right: 1px solid var(--pu-linha);
    scrollbar-width: thin;
    scrollbar-color: var(--pu-linha-forte) transparent;
}

#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background-color: var(--pu-linha-forte); border-radius: 3px; }

/* Área principal compensa a barra lateral fixa. */
.main-content {
    flex-grow: 1;
    position: relative;
    margin-left: var(--pu-sidebar);
    /* Item flex tem min-width: auto por padrão, o que o impede de encolher abaixo
       do próprio conteúdo — uma tabela larga empurraria a página inteira e criaria
       rolagem horizontal no celular. Com min-width: 0, o container respeita a tela
       e a tabela rola dentro do próprio .table-responsive. */
    min-width: 0;
}

/* ====== RESPONSIVIDADE MOBILE ====== */
@media (max-width: 767px) {
    /* Sidebar não fixo em mobile (usa offcanvas) */
    #sidebar {
        position: relative;
        width: 100%;
        min-height: auto;
    }

    /* Main content sem margem em mobile */
    .main-content {
        margin-left: 0;
    }
}

/* ====== TABLET E DESKTOP ====== */
@media (min-width: 768px) {
    /* Garantir que sidebar seja fixo apenas em telas maiores */
    #sidebar {
        display: block !important;
    }
}