/**
 * Quinyx SGA — camada de tema sobre o Bootstrap 4.1.2.
 *
 * Carregar DEPOIS do bootstrap.min.css. Não altera markup: reescreve os
 * componentes que os templates já usam. Para reverter o visual antigo,
 * basta remover o <link> do base.html.twig.
 *
 * O Bootstrap 4 não usa CSS vars nos componentes, então cada override é
 * uma regra explícita — os tokens abaixo servem ao CSS deste arquivo.
 */
:root {
    --brand: #0b63ce;
    --brand-hover: #0a55b0;
    --bg: #e9eff7;
    --card: #fff;
    --text: #1b2733;
    --muted: #64748b;
    --border: #ccd8e8;
    --field: #fff;
    --subtle: #f1f5fa;
    --hover: #e8f0fb;
    --ring: rgba(11, 99, 206, .18);
    --shadow-sm: 0 1px 2px rgba(16, 42, 76, .06), 0 4px 12px -6px rgba(16, 42, 76, .12);
    --shadow-md: 0 8px 24px -12px rgba(16, 42, 76, .28);
    --shadow-lg: 0 24px 60px -20px rgba(16, 42, 76, .35);
    /* raio menor que o do login: tela de 3 campos aguenta 20px, tabela de 12 colunas não */
    --radius: 10px;
    --radius-sm: 8px;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- navbar ---------- */
.navbar.bg-light {
    background-color: var(--card) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: .5rem 1rem;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--muted);
    border-radius: var(--radius-sm);
    padding: .4rem .7rem;
    transition: background-color .15s, color .15s;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show > .nav-link {
    color: var(--brand);
    background-color: var(--hover);
}

.navbar-brand img {
    max-height: 34px;
    width: auto;
}

/* ---------- botões ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background-color .15s, border-color .15s, box-shadow .2s, filter .15s;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--ring);
}

.btn-primary {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}

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

.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #084a9e;
    border-color: #084a9e;
}

.btn-secondary {
    color: var(--text);
    background-color: var(--card);
    border-color: var(--border);
}

.btn-secondary:hover {
    color: var(--text);
    background-color: var(--subtle);
    border-color: #b7c6da;
}

.btn-lg {
    border-radius: var(--radius);
    padding: .75rem 1.25rem;
    font-size: 1rem;
}

.btn-sm {
    border-radius: 6px;
}

/* ---------- campos ---------- */
.form-control,
.custom-select {
    color: var(--text);
    background-color: var(--field);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

.form-control:focus,
.custom-select:focus {
    color: var(--text);
    background-color: var(--card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--ring);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--subtle);
}

/* o Chrome pinta o autofill de amarelo/branco e ignora background-color */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--field) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}

.input-group-text {
    background-color: var(--subtle);
    border-color: var(--border);
    color: var(--muted);
}

label {
    font-weight: 500;
    font-size: .9rem;
}

/* ---------- cards ---------- */
.card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    padding: .85rem 1.25rem;
}

.card-header:first-child {
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.card-footer {
    background-color: var(--card);
    border-top: 1px solid var(--border);
}

/* ---------- tabelas ---------- */
/* padding intencionalmente intocado: telas de operação vivem de densidade */
.table {
    color: var(--text);
    background-color: var(--card);
}

.table thead th,
.table .thead-light th {
    background-color: var(--subtle);
    border-bottom: 1px solid var(--border);
    border-top: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td,
.table th {
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--subtle);
}

.table-hover tbody tr:hover {
    background-color: var(--hover);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--border);
}

/* Tabela filha direta do card não tem card-body para dar respiro lateral: as
   células encostam na borda e desalinham do card-header (1.25rem). */
.card > .table th:first-child,
.card > .table td:first-child,
.card > .table-responsive > .table th:first-child,
.card > .table-responsive > .table td:first-child {
    padding-left: 1.25rem;
}

.card > .table th:last-child,
.card > .table td:last-child,
.card > .table-responsive > .table th:last-child,
.card > .table-responsive > .table td:last-child {
    padding-right: 1.25rem;
}

.card > .table:last-child,
.card > .table-responsive:last-child > .table {
    margin-bottom: 0;
}

/* ---------- modais ---------- */
.modal-content {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
    padding: 1rem 1.25rem;
}

.modal-header .modal-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.modal-backdrop.show {
    opacity: .45;
}

/* ---------- listas, dropdowns, abas ---------- */
.list-group-item {
    border-color: var(--border);
}

.list-group-item:first-child {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.list-group-item.active {
    background-color: var(--brand);
    border-color: var(--brand);
}

/* sem o :not(.active) o hover ganha do .active (mesma especificidade, vem
   depois) e o item selecionado fica com texto branco sobre fundo claro */
.list-group-item-action:not(.active):hover {
    background-color: var(--hover);
}

.list-group-item.active:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
}

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .35rem;
}

.dropdown-item {
    border-radius: 6px;
    padding: .5rem .75rem;
}

.dropdown-item:not(.active):hover,
.dropdown-item:not(.active):focus {
    background-color: var(--hover);
    color: var(--brand);
}

.dropdown-header {
    font-size: .8rem;
    color: var(--muted);
}

.nav-tabs {
    border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--border);
    color: var(--text);
}

.nav-tabs .nav-link.active {
    background: none;
    border-bottom-color: var(--brand);
    color: var(--brand);
}

.pagination {
    border-radius: var(--radius-sm);
}

.page-link {
    border-color: var(--border);
    color: var(--brand);
}

.page-item.active .page-link {
    background-color: var(--brand);
    border-color: var(--brand);
}

/* ---------- alertas e badges ---------- */
.alert {
    border: 0;
    border-radius: var(--radius);
    font-size: .925rem;
}

.badge {
    border-radius: 6px;
    font-weight: 600;
    padding: .35em .6em;
}

.badge-pill {
    border-radius: 10rem;
}

/* ---------- links ---------- */
a {
    color: var(--brand);
}

a:hover {
    color: #084a9e;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .navbar-light .navbar-nav .nav-link {
        transition: none;
    }
}