/* =========================================================
   CartoriumConecta — identidade visual
   Cores extraídas da logo.
   ========================================================= */

@font-face {
    font-family: "Montserrat";
    src: url("../vendor/montserrat/montserrat-latin-wght-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --cc-navy: #0a1b4f;
    --cc-royal: #0a3fc0;
    --cc-blue: #0a74f5;
    --cc-cyan: #12d0f2;
    --cc-primary: #0a63e0;          /* azul com contraste AA para texto branco */
    --cc-primary-hover: #0954c2;
    --cc-gradient: linear-gradient(90deg, var(--cc-royal), var(--cc-blue) 55%, var(--cc-cyan));

    --cc-ink: #0f1b3d;
    --cc-muted: #5b6b8c;
    --cc-line: #e3e9f3;
    --cc-bg: #f3f6fb;
    --cc-surface: #ffffff;

    --cc-danger: #d92d20;
    --cc-warning: #b54708;
    --cc-success: #067647;

    --cc-radius: 14px;
    --cc-shadow: 0 1px 2px rgba(10, 27, 79, .06), 0 1px 3px rgba(10, 27, 79, .08);
    --cc-shadow-lg: 0 12px 32px rgba(10, 27, 79, .12);

    /* Bootstrap */
    --bs-primary: var(--cc-primary);
    --bs-primary-rgb: 10, 99, 224;
    --bs-link-color: var(--cc-primary);
    --bs-link-color-rgb: 10, 99, 224;
    --bs-link-hover-color: var(--cc-primary-hover);
    --bs-body-color: var(--cc-ink);
    --bs-body-bg: var(--cc-bg);
    --bs-secondary-color: var(--cc-muted);
    --bs-border-color: var(--cc-line);
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: var(--cc-bg);
    color: var(--cc-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

h1, h2, h3, h4, h5, h6, .font-brand, .navbar-brand, .stat-value {
    font-family: "Montserrat", var(--bs-font-sans-serif);
    letter-spacing: -.01em;
}

.text-muted, .text-secondary { color: var(--cc-muted) !important; }

[hidden] { display: none !important; }

/* ---------- Botões e formulários ---------- */

.btn { border-radius: 10px; font-weight: 600; }

.btn-primary {
    --bs-btn-bg: var(--cc-primary);
    --bs-btn-border-color: var(--cc-primary);
    --bs-btn-hover-bg: var(--cc-primary-hover);
    --bs-btn-hover-border-color: var(--cc-primary-hover);
    --bs-btn-active-bg: var(--cc-royal);
    --bs-btn-active-border-color: var(--cc-royal);
    --bs-btn-disabled-bg: var(--cc-primary);
    --bs-btn-disabled-border-color: var(--cc-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--cc-primary);
    --bs-btn-border-color: #b9cdf3;
    --bs-btn-hover-bg: var(--cc-primary);
    --bs-btn-hover-border-color: var(--cc-primary);
    --bs-btn-active-bg: var(--cc-royal);
}

.form-control, .form-select {
    border-radius: 10px;
    border-color: #d5deec;
    padding: .6rem .85rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cc-blue);
    box-shadow: 0 0 0 .2rem rgba(10, 116, 245, .18);
}

.form-label { font-weight: 600; font-size: .9rem; color: var(--cc-ink); }

.icon { width: 1.1em; height: 1.1em; vertical-align: -.15em; flex: none; }

/* ---------- Navegação ---------- */

.app-navbar {
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-line);
    box-shadow: 0 1px 0 rgba(10, 27, 79, .02);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.app-navbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--cc-gradient);
}

.app-navbar .navbar-brand { display: flex; align-items: center; gap: .55rem; padding: 0; }
.app-navbar .brand-icon { height: 38px; width: 38px; }
.app-navbar .brand-word { height: 21px; width: auto; }

.app-navbar .nav-link {
    color: var(--cc-muted);
    font-weight: 600;
    border-radius: 10px;
    padding: .5rem .8rem !important;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.app-navbar .nav-link:hover { color: var(--cc-navy); background: #eef3fb; }
.app-navbar .nav-link.active { color: var(--cc-primary); background: #e8f0fd; }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cc-gradient);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.user-menu { color: var(--cc-ink); text-decoration: none; display: flex; align-items: center; gap: .6rem; }
.user-menu .user-name { font-weight: 600; line-height: 1.1; }
.user-menu .user-role { font-size: .78rem; color: var(--cc-muted); }

.dropdown-menu { border: 1px solid var(--cc-line); border-radius: 12px; box-shadow: var(--cc-shadow-lg); padding: .4rem; }
.dropdown-item { border-radius: 8px; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; }

/* ---------- Cartões e tabelas ---------- */

.card {
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    background: var(--cc-surface);
}

.card-title-sm {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.topbar h2 { margin: 0; font-weight: 700; }

.table { --bs-table-bg: transparent; }
.table > thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cc-muted);
    font-weight: 700;
    border-bottom-color: var(--cc-line);
}
.table > tbody td { border-color: var(--cc-line); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f5f8fe; }

.badge { font-weight: 600; border-radius: 999px; padding: .38em .7em; }

.alert { border-radius: 12px; }

/* ---------- Painel ---------- */

.dash-hello h2 { font-size: 1.6rem; }
.dash-date { color: var(--cc-muted); font-size: .95rem; }

.quick-search { position: relative; flex: 1 1 280px; min-width: 0; }
.dash-actions { flex: 1 1 auto; justify-content: flex-end; max-width: 560px; }
@media (max-width: 575.98px) { .dash-actions { max-width: none; } .dash-actions .btn { flex: 1 1 auto; justify-content: center; } }
.quick-search .icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--cc-muted); }
.quick-search input { padding-left: 2.4rem; }

.stat-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1.1rem 1.15rem;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

a.stat-card:hover { box-shadow: var(--cc-shadow-lg); transform: translateY(-1px); border-color: #c9d8f2; color: inherit; }

.stat-head { display: flex; align-items: center; justify-content: space-between; }
.stat-label { color: var(--cc-muted); font-size: .85rem; font-weight: 600; }
.stat-value { font-size: 2.1rem; font-weight: 700; line-height: 1.1; color: var(--cc-ink); }
.stat-foot { font-size: .8rem; color: var(--cc-muted); }

.stat-chip {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.stat-chip .icon { width: 20px; height: 20px; }

.chip-blue    { background: #e8f0fd; color: var(--cc-primary); }
.chip-amber   { background: #fef4e6; color: var(--cc-warning); }
.chip-red     { background: #fdecea; color: var(--cc-danger); }
.chip-cyan    { background: #e3f8fd; color: #0b7a95; }
.chip-green   { background: #e6f6ee; color: var(--cc-success); }

.stat-card.is-alert { border-color: #f6c7c2; background: linear-gradient(180deg, #fff, #fff7f6); }
.stat-card.is-alert .stat-value { color: var(--cc-danger); }

/* Listas de prazos */
.due-list { list-style: none; margin: 0; padding: 0; }
.due-list li { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; border-top: 1px solid var(--cc-line); }
.due-list li:first-child { border-top: 0; }
.due-list .due-main { min-width: 0; flex: 1; }
.due-list .due-code { font-weight: 700; text-decoration: none; white-space: nowrap; }
.due-list .due-sub { font-size: .82rem; color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.due-pill {
    flex: none;
    font-size: .78rem;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.due-pill.late  { background: #fdecea; color: var(--cc-danger); }
.due-pill.today { background: #fef4e6; color: var(--cc-warning); }
.due-pill.soon  { background: #eef3fb; color: var(--cc-navy); }

.empty-state { text-align: center; color: var(--cc-muted); padding: 1.5rem .5rem; }
.empty-state .icon { width: 28px; height: 28px; color: #9fb0cf; margin-bottom: .4rem; }

/* Gráfico de barras horizontais (quantidade por status / responsável) */
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: center;
        text-decoration: none; color: inherit; border-radius: 8px; padding: .3rem .4rem; position: relative; }
a.hbar:hover { background: #f3f7fe; color: inherit; }
.hbar-label { font-size: .85rem; color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-value { font-size: .85rem; font-weight: 700; color: var(--cc-ink); font-variant-numeric: tabular-nums; }
.hbar-track { grid-column: 1 / -1; height: 8px; background: #edf1f8; border-radius: 4px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--cc-blue); border-radius: 4px; min-width: 2px; }
a.hbar:hover .hbar-fill { background: var(--cc-royal); }

/* Tooltip simples */
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    right: .4rem;
    top: -1.9rem;
    background: var(--cc-navy);
    color: #fff;
    font-size: .75rem;
    padding: .25rem .5rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.timeline-dot { width: 38px; height: 38px; min-width: 38px; }

/* ---------- Login ---------- */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .auth { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.auth-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 3.5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(18, 208, 242, .35), transparent 60%),
        radial-gradient(700px 500px at -10% 110%, rgba(10, 116, 245, .45), transparent 60%),
        linear-gradient(160deg, #071440 0%, var(--cc-navy) 45%, #0b2f8f 100%);
}

.auth-hero::after {
    /* linhas de "circuito", como na logo */
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image:
        radial-gradient(circle at 1px 1px, #fff 1.4px, transparent 1.6px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
    pointer-events: none;
}

.auth-hero > * { position: relative; z-index: 1; }
.auth-hero .hero-logo { width: min(420px, 100%); height: auto; }
.auth-hero h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; max-width: 30rem; margin: 2.5rem 0 1rem; }
.auth-hero .lead { color: #c6d4f2; max-width: 30rem; font-size: 1.05rem; }

.hero-features { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; max-width: 30rem; }
.hero-features li { display: flex; gap: .9rem; align-items: flex-start; }
.hero-features .feat-icon {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: var(--cc-cyan);
}
.hero-features strong { display: block; font-weight: 600; }
.hero-features span { color: #b8c7e8; font-size: .9rem; }
.hero-foot { color: #93a6cf; font-size: .82rem; }

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    background: var(--cc-surface);
}

.auth-box { width: 100%; max-width: 400px; }
.auth-box .mobile-logo { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto 2rem; }
.auth-box h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: .35rem; }

.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--cc-muted); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.6rem; height: 48px; }
.input-icon > .toggle-password {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--cc-muted); padding: .45rem .55rem; border-radius: 8px;
}
.input-icon > .toggle-password:hover { color: var(--cc-navy); background: #eef3fb; }
.input-icon > .form-control.has-toggle { padding-right: 2.9rem; }

.btn-login { height: 48px; font-size: 1rem; background: var(--cc-primary); border: 0; }
.btn-login:hover { background: var(--cc-primary-hover); }

.auth-help { font-size: .85rem; color: var(--cc-muted); border-top: 1px solid var(--cc-line); padding-top: 1.25rem; margin-top: 1.75rem; }

/* ---------- Página pública ---------- */

.public-logo { width: min(340px, 85%); height: auto; }

/* ---------- Impressão ---------- */

@media print {
    .app-navbar, footer, form, .btn { display: none !important; }
    body { background: #fff; }
}