/* ============================================================
   Tema Expediente OS - mesma identidade da tela de login
   (navy -> teal, cards arredondados, sombras suaves)
   ============================================================ */

:root {
    --brand-1: #17263a;   /* navy mais profundo */
    --brand-2: #21506e;   /* azul-navy medio    */
    --brand-3: #2e7d8f;   /* teal (acento)      */
    --tinta:   #1f2d3d;
    --texto:   #38434f;
    --pagina:  #f1f4f8;
    --linha:   #e3e8ef;

    /* Overrides do Bootstrap */
    --bs-primary: #21506e;
    --bs-primary-rgb: 33, 80, 110;
    --bs-link-color: #21506e;
    --bs-link-hover-color: #17263a;
    --bs-border-color: var(--linha);
    --bs-body-color: var(--texto);
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: .9rem;
}

body {
    background-color: var(--pagina);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

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

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- Sidebar ---------------- */
.sidebar {
    width: 264px !important;
    /* Altura travada na viewport: nao acompanha paginas longas (ex.: Setores),
       rola por dentro se o menu passar da tela. */
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    overflow-y: auto;
    background:
        radial-gradient(140% 45% at 0% 0%, rgba(46, 125, 143, .38), transparent 60%),
        linear-gradient(180deg, #17263a 0%, #1b3a54 55%, #21506e 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
}
.sidebar > a:first-child {
    font-size: 1.15rem;
    letter-spacing: .3px;
    padding-bottom: .25rem;
}
.sidebar hr { border-color: rgba(255,255,255,.14); opacity: 1; }

.sidebar .nav-link {
    color: rgba(255,255,255,.82) !important;
    border-radius: .55rem;
    padding: .5rem .7rem;
    font-size: .93rem;
    display: flex; align-items: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color .12s, color .12s;
}
.sidebar .nav-link i { width: 1.25rem; text-align: center; opacity: .9; }
.sidebar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,.09);
    text-decoration: none;
}
.sidebar .nav-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(46,125,143,.55), rgba(46,125,143,.18));
    box-shadow: inset 3px 0 0 #47b6c7;
}
.sidebar .nav-item > span.text-uppercase {
    color: rgba(255,255,255,.45) !important;
    font-size: .68rem !important;
    letter-spacing: 1.5px;
    margin-top: .9rem !important;
    display: block;
}
.sidebar .dropdown > a {
    border-radius: .55rem; padding: .5rem .6rem;
    background: rgba(255,255,255,.06);
}
.sidebar .dropdown > a:hover { background: rgba(255,255,255,.12); }

/* ---------------- Conteudo / topo ---------------- */
main.flex-grow-1 { min-height: 100vh; }

main form.d-flex[action="/documentos"] .form-control,
main form.d-flex[action="/documentos"] .btn {
    border-radius: .6rem;
}
main form.d-flex[action="/documentos"] .form-control {
    background: #fff; border-color: var(--linha);
    box-shadow: 0 1px 2px rgba(23,38,58,.05);
}

/* ---------------- Cards ---------------- */
.card {
    border: 1px solid var(--linha);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 6px 20px rgba(23, 38, 58, .06);
}
.card > .card-body { padding: 1.25rem 1.35rem; }
.card > .card-header {
    background: #fff;
    border-bottom: 1px solid var(--linha);
    font-weight: 600; color: var(--tinta);
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

.indicador-card {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.indicador-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(23, 38, 58, .12);
}

/* ---------------- Botoes ---------------- */
.btn {
    border-radius: .6rem;
    font-weight: 500;
}
.btn-primary {
    border: none;
    background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #1d4763, #2a7280);
    filter: brightness(1.03);
}
.btn-primary:active { filter: brightness(.96); }
.btn-outline-primary {
    color: var(--brand-2); border-color: var(--brand-2);
}
.btn-outline-primary:hover {
    background: var(--brand-2); border-color: var(--brand-2);
}
.btn-link { color: var(--brand-2); }

/* ---------------- Formularios ---------------- */
.form-control, .form-select {
    border-radius: .55rem;
    border-color: var(--linha);
    background-color: #fdfdfe;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-3);
    box-shadow: 0 0 0 .2rem rgba(46, 125, 143, .16);
    background-color: #fff;
}
.form-label { font-weight: 500; color: #55616d; font-size: .9rem; }

/* ---------------- Tabelas ---------------- */
.table {
    --bs-table-hover-bg: #eef3f7;
    margin-bottom: 0;
}
.table > thead th,
.table-light > thead th,
.table thead.table-light th {
    background: #eef2f6;
    color: #55616d;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--linha);
}
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.card > .card-body.p-0 .table tr:last-child td { border-bottom: 0; }

/* ---------------- Nav tabs (ficha) ---------------- */
.nav-tabs {
    border-bottom: 1px solid var(--linha);
    gap: .15rem;
}
.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: .5rem .5rem 0 0;
    font-weight: 500;
}
.nav-tabs .nav-link:hover { color: var(--brand-2); background: #eef3f7; }
.nav-tabs .nav-link.active {
    color: var(--brand-2);
    background: transparent;
    border-bottom-color: var(--brand-3);
}

/* ---------------- Badges / prioridades ---------------- */
.badge { font-weight: 600; border-radius: .5rem; }
.badge-prioridade-URGENTE { background-color: #dc3545; }
.badge-prioridade-PRIORITARIO { background-color: #fd7e14; }
.badge-prioridade-NORMAL { background-color: #6c757d; }

.prazo-vencido { color: #dc3545; font-weight: 600; }
.prazo-proximo { color: #fd7e14; font-weight: 600; }
.prazo-ok { color: #198754; }

/* ---------------- Alertas / paginacao ---------------- */
.alert { border-radius: .7rem; border: none; }
.alert-success { background: #e7f5ee; color: #1c6b47; }
.alert-danger  { background: #fde8ea; color: #a12633; }
.alert-warning { background: #fff4e2; color: #8a5a12; }
.alert-info    { background: #e6f2f5; color: #1f5a68; }

.page-link { color: var(--brand-2); border-radius: .45rem; margin: 0 .1rem; border-color: var(--linha); }
.page-item.active .page-link {
    background: var(--brand-2); border-color: var(--brand-2);
}

/* ---------------- Timeline ---------------- */
.timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid var(--linha);
}
.timeline-item { position: relative; margin-bottom: 1.4rem; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -2.05rem;
    top: .2rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background-color: var(--brand-3);
    box-shadow: 0 0 0 3px rgba(46,125,143,.18);
}

/* A tela de login tem estilo proprio em app/templates/auth/login.html.
   Estilos do combobox: injetados por app/static/js/combobox.js. */