/* ==========================================================================
   Layout de página

   Cabeçalho, trilha, barra de ferramentas e grade de 12 colunas.
   Ordem canônica dentro de .content:
   demo-notice → breadcrumb → page-head → tabs → stats → toolbar → grid
   ========================================================================== */

/* ==========================================================================
   Trilha de navegação

   Só aparece a partir do terceiro nível (Projetos › Projeto › Documentos).
   Em dois níveis o botão voltar do .page-head já basta.
   ========================================================================== */

.breadcrumb { padding: var(--space-3) var(--gutter) 0; font-size: var(--fs-xs); color: var(--color-text-secondary); }

.breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }

.breadcrumb__link {
    color: var(--color-text-secondary);
    border-radius: var(--radius-control);
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover { color: var(--color-text-link); text-decoration: underline; }

.breadcrumb__current { color: var(--color-title); font-weight: var(--fw-medium); }

.breadcrumb__sep { color: var(--color-text-tertiary); }

.breadcrumb__sep .ui-icon { width: 14px; height: 14px; }

/* ==========================================================================
   Cabeçalho de página
   ========================================================================== */

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    min-height: 64px;
    padding: var(--space-3) var(--gutter);
    border-bottom: var(--border-width) solid var(--color-border);
}

.page-head__left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

.page-head__block { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.page-head__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.page-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-title);
    color: var(--color-title);
}

.page-count { font-size: var(--fs-md); color: var(--color-text-tertiary); }

.page-sub { font-size: var(--fs-sm); color: var(--color-text-secondary); }

.page-head__actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* ==========================================================================
   Barra de ferramentas — busca, filtros e ações da listagem
   ========================================================================== */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--gutter);
    flex-wrap: wrap;
}

.toolbar__group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.toolbar__title {
    margin: 0;
    color: var(--color-title);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

/* Contagem de resultados. Numerais tabulares para o número não dançar
   enquanto se digita na busca — filtrar 5 → 12 → 1 mexia a linha toda. */
.toolbar__meta {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.toolbar__meta strong { font-weight: var(--fw-semibold); color: var(--color-title); }

/* ==========================================================================
   Grade de 12 colunas

   Só existem as classes abaixo. Precisa de 9? Componha .col-6 + .col-3.
   ========================================================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-5) var(--gutter) var(--space-8);
}

/* Quando já existe toolbar acima entregando o respiro superior. */
.grid--flush { padding-top: 0; }

.col-3  { grid-column: span 3;  min-width: 0; }
.col-4  { grid-column: span 4;  min-width: 0; }
.col-5  { grid-column: span 5;  min-width: 0; }
.col-6  { grid-column: span 6;  min-width: 0; }
.col-7  { grid-column: span 7;  min-width: 0; }
.col-8  { grid-column: span 8;  min-width: 0; }
.col-12 { grid-column: span 12; min-width: 0; }

/* ==========================================================================
   Autenticação
   ========================================================================== */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--color-body);
}

.auth__aside {
    background: var(--color-side-bg);
    color: var(--color-text-inverse);
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
}

.auth__brand { display: flex; align-items: center; gap: var(--space-3); }

.auth__brand-mark {
    width: 44px; height: 44px;
    border-radius: var(--radius-box);
    background: var(--color-side-fill-strong);
    display: grid;
    place-items: center;
}

.auth__brand-mark img { width: var(--space-6); height: var(--space-6); object-fit: contain; }

/* A tela de login não carrega navigation.css — a marca precisa das próprias
   classes, e não das .side-brand__* da sidebar. */
.auth__brand-name {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-inverse);
    letter-spacing: var(--tracking-card);
}

.auth__brand-sub { display: block; font-size: var(--fs-xs); color: var(--color-side-muted); margin-top: 1px; }

.auth__pitch {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-number);
    line-height: var(--lh-tight);
    max-width: 18ch;
}

.auth__note {
    font-size: var(--fs-sm);
    color: var(--color-side-text);
    line-height: var(--lh-relaxed);
    max-width: 44ch;
}

.auth__panel { display: grid; place-items: center; padding: var(--space-12) var(--gutter); }

.auth__card {
    width: min(var(--container-auth-card), 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Cartão largo — a abertura pública de chamado tem nove campos e não cabe na
   coluna de 400px do login sem quebrar rótulo em duas linhas. É a mesma caixa,
   só mais larga: nenhum outro valor muda. */
.auth__card--wide { width: min(var(--container-modal-sm), 100%); }

.auth__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-title);
    color: var(--color-title);
}

.auth__sub {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    line-height: var(--lh-base);
}

.auth__form { display: flex; flex-direction: column; gap: var(--space-3); }

.auth__foot { font-size: var(--fs-sm); color: var(--color-text-secondary); text-align: center; }

.auth__foot a { color: var(--color-text-link); font-weight: var(--fw-medium); }

.auth__foot a:hover { text-decoration: underline; }

/* ==========================================================================
   Página de erro
   ========================================================================== */

.page-error {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-8);
    background: var(--color-body-secondary);
    text-align: center;
}

.page-error__panel {
    width: min(620px, 100%);
    padding: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-box);
    background: var(--color-body);
    box-shadow: var(--shadow-xs);
}

.page-error__visual {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-box);
    background: var(--color-error-50);
    color: var(--color-error-500);
}

.page-error__visual .ui-icon { width: 24px; height: 24px; }

.page-error__code {
    margin-top: var(--space-4);
    font-size: var(--fs-5xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-hero);
    color: var(--color-dark-500);
    line-height: 1;
}

.page-error__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-title);
    margin-top: var(--space-3);
}

.page-error__text {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    line-height: var(--lh-relaxed);
    max-width: 46ch;
    margin-inline: auto;
}

.page-error__reference {
    width: fit-content;
    max-width: 100%;
    display: grid;
    gap: 4px;
    margin: var(--space-4) auto 0;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-body-secondary);
}

.page-error__reference span {
    color: var(--color-text-secondary);
    font-size: var(--fs-xs);
}

.page-error__reference strong {
    overflow-wrap: anywhere;
    color: var(--color-title);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.page-error__diagnostic {
    margin-top: var(--space-4);
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-body-secondary);
    text-align: left;
}

.page-error__diagnostic summary {
    color: var(--color-text);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
}

.page-error__diagnostic p {
    margin-top: 8px;
    overflow-wrap: anywhere;
    color: var(--color-text-secondary);
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
}

.page-error__actions {
    margin-top: var(--space-5);
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .page-error { padding: var(--space-4); }
    .page-error__panel { padding: 28px 20px; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1180px) {
    .col-3, .col-4, .col-5 { grid-column: span 6; }
    .col-7, .col-8 { grid-column: span 12; }
}

@media (max-width: 900px) {
    .page-head { gap: var(--space-3); }
    .page-head__actions { justify-content: flex-end; }

    .toolbar { flex-direction: column; align-items: stretch; }

    .grid { grid-template-columns: minmax(0, 1fr); }
    .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 1; }

    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth__aside { display: none; }
}

@media print {
    .page-head__actions,
    .toolbar,
    .breadcrumb { display: none !important; }
}