/* =========================================================================
   Painel de Cotações — Dashboard de Eventos
   Sistema visual: canvas frio + acento petróleo (teal) + dados em mono.
   Assinatura: chip de prazo (status) e gaveta de itens tipo "ficha técnica".
   Substitui integralmente public/styles/style.css
   ========================================================================= */

:root{
    /* tinta / neutros */
    --ink:        #101b2d;
    --ink-2:      #26334a;
    --muted:      #616b7c;
    --canvas:     #eceff4;
    --surface:    #ffffff;
    --line:       #e3e7ee;
    --line-strong:#cdd4de;

    /* marca (petróleo — amarra com o cabeçalho do PDF) */
    --brand:      #0a7d84;
    --brand-ink:  #075b61;
    --brand-tint: #e6f3f4;
    --brand-edge: #bfe0e2;

    /* status de prazo */
    --crit:#c81e3a; --crit-tint:#fdecef; --crit-edge:#f3c9d0;
    --warn:#9a5b00; --warn-tint:#fbf1df; --warn-edge:#efd9ad;
    --ok:  #0a7d5a; --ok-tint:  #e5f4ec; --ok-edge:  #bfe3ce;

    /* forma */
    --radius:14px; --radius-sm:9px;
    --shadow-sm:0 1px 2px rgba(16,27,45,.06);
    --shadow:0 1px 2px rgba(16,27,45,.05), 0 16px 34px -20px rgba(16,27,45,.28);

    /* tipografia */
    --font-ui:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --font-display:'Space Grotesk',var(--font-ui);
    --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- base ---------- */
body{
    min-height:100vh;
    background:var(--canvas);
    color:var(--ink);
    font-family:var(--font-ui);
    font-size:14px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.container-fluid{ max-width:1320px; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--brand-tint); }

/* ---------- navbar (clara — resolve contraste da logo) ---------- */
.navbar{
    background:var(--surface)!important;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    padding:.55rem 0;
}
.navbar .navbar-brand{
    display:flex; align-items:center; gap:.6rem;
    font-family:var(--font-display);
    font-weight:600; letter-spacing:-.01em;
    color:var(--ink)!important;
}
.navbar .navbar-brand img{ height:30px; width:auto; display:block; }
.navbar .nav-link{
    color:var(--muted)!important;
    font-weight:500; font-size:.9rem;
    padding:.4rem .8rem!important;
    border-radius:8px;
    transition:background .14s ease,color .14s ease;
}
.navbar .nav-link:hover{ color:var(--brand-ink)!important; background:var(--brand-tint); }
.navbar .nav-link.active{ color:var(--brand-ink)!important; background:var(--brand-tint); }

/* ---------- cabeçalho da página ---------- */
.page-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:1rem; margin:.5rem 0 1.25rem;
}
.page-eyebrow{
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--brand); margin-bottom:.3rem;
}
.page-title{
    display:flex; align-items:center; gap:.6rem;
    font-family:var(--font-display);
    font-weight:600; font-size:1.6rem; letter-spacing:-.02em;
    margin:0; color:var(--ink);
}
.page-title .bi{ color:var(--brand); font-size:1.25rem; }
.count-chip{
    font-family:var(--font-mono); font-size:.82rem; font-weight:500;
    color:var(--brand-ink); background:var(--brand-tint);
    border:1px solid var(--brand-edge); border-radius:999px;
    padding:.12rem .6rem; line-height:1.5;
}

/* ---------- cards ---------- */
.card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.card .card-body{ padding:1.05rem 1.2rem; }

/* ---------- formulário / toolbar de filtro ---------- */
.form-label{
    font-size:.7rem; font-weight:600; letter-spacing:.03em;
    text-transform:uppercase; color:var(--muted); margin-bottom:.3rem;
}
.form-control,.form-select{
    border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);
    font-size:.9rem; padding:.5rem .7rem;
    color:var(--ink); background:var(--surface);
    transition:border-color .14s ease, box-shadow .14s ease;
}
.form-control::placeholder{ color:#9aa3b0; }
.form-control:focus,.form-select:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(10,125,132,.16);
}

/* ---------- botões ---------- */
.btn{
    border-radius:var(--radius-sm);
    font-weight:500; font-size:.88rem; padding:.5rem .9rem;
    transition:background .14s ease,border-color .14s ease,color .14s ease,transform .06s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:.34rem .62rem; font-size:.8rem; }

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

.btn-outline-secondary{ color:var(--ink-2); border-color:var(--line-strong); }
.btn-outline-secondary:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

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

.btn-outline-danger{ color:#b3202f; border-color:#f0c4ca; }
.btn-outline-danger:hover{ background:var(--crit); border-color:var(--crit); color:#fff; }

.btn-link{ text-decoration:none; }

/* ---------- tabela de eventos ---------- */
.table{ margin:0; color:var(--ink); border-color:var(--line); }
.table>thead th{
    background:#f6f8fb; color:var(--muted);
    font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
    border-bottom:1px solid var(--line);
    padding:.72rem 1rem; position:sticky; top:0; z-index:2;
}
.table>tbody>tr{ border-bottom:1px solid var(--line); }
.table>tbody>tr:last-child{ border-bottom:0; }
.table td,.table th{ vertical-align:middle; }
.table td{ padding:.8rem 1rem; }

/* hover só na linha do evento (não na gaveta) */
tr[c-id="row-evento"]{ transition:background .12s ease; }
tr[c-id="row-evento"]:hover{ background:#f5f9fa; }

/* dados de máquina em mono */
td[c-id="event_id"],td[c-id="req_number"],td[c-id="customer_id"],
td[c-id="created_at"]{
    font-family:var(--font-mono); font-size:.84rem; color:var(--ink-2);
}
td[c-id="event_id"]{ font-weight:600; color:var(--ink); }

/* botão de expandir + chevron */
[c-id="toggle-itens"] .bi{ transition:transform .18s ease; }
[c-id="toggle-itens"].is-open .bi{ transform:rotate(180deg); }

/* ---------- gaveta de itens (ficha técnica) ---------- */
tr[c-id="itens-row"]>td{
    padding:0; background:var(--canvas);
    box-shadow:inset 3px 0 0 var(--brand);
}
tr[c-id="itens-row"] .p-2{ padding:1rem 1.15rem!important; overflow-x:auto; }
tr[c-id="itens-row"] table{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px; margin:0; min-width:960px;   /* rola em telas estreitas, sem cortar */
}
tr[c-id="itens-row"] thead th{
    background:#fbfcfe; color:var(--muted);
    font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
    padding:.55rem .75rem; white-space:nowrap;
}
tr[c-id="itens-row"] tbody td{ padding:.6rem .75rem; font-size:.85rem; }
td[c-id="capacity"],td[c-id="unidade_medida"],
td[c-id="termina_em"],td[c-id="coletado_em"]{
    font-family:var(--font-mono); font-size:.8rem; color:var(--ink-2);
    white-space:nowrap;
}

/* ---------- chip de prazo (assinatura) ---------- */
.chip-prazo{
    display:inline-flex; align-items:center; gap:.4rem;
    font-family:var(--font-mono); font-size:.78rem; font-weight:500;
    padding:.2rem .55rem; border-radius:999px;
    border:1px solid transparent; white-space:nowrap;
}
.chip-prazo .chip-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.chip-prazo.is-crit{ color:var(--crit); background:var(--crit-tint); border-color:var(--crit-edge); }
.chip-prazo.is-crit .chip-dot{ background:var(--crit); }
.chip-prazo.is-warn{ color:var(--warn); background:var(--warn-tint); border-color:var(--warn-edge); }
.chip-prazo.is-warn .chip-dot{ background:#c6820a; }
.chip-prazo.is-ok{ color:var(--ok); background:var(--ok-tint); border-color:var(--ok-edge); }
.chip-prazo.is-ok .chip-dot{ background:var(--ok); }

@media (prefers-reduced-motion:no-preference){
    .chip-prazo.is-crit .chip-dot{ animation:pulse-crit 1.6s ease-in-out infinite; }
    @keyframes pulse-crit{
        0%,100%{ box-shadow:0 0 0 0 rgba(200,30,58,.35); }
        50%    { box-shadow:0 0 0 4px rgba(200,30,58,0); }
    }
}

/* ---------- "ver mais" ---------- */
[c-id="ver-mais"]{
    font-family:var(--font-ui); font-size:.75rem; font-weight:500;
    color:var(--brand-ink); text-decoration:none;
}
[c-id="ver-mais"]:hover{ text-decoration:underline; }

/* ---------- estado vazio ---------- */
tr[c-id="empty-row"] td{ color:var(--muted); padding:2.75rem 1rem; text-align:center; }

/* ---------- modal ---------- */
.modal-content{ border:0; border-radius:var(--radius); box-shadow:var(--shadow); }
.modal-header{ border-bottom:1px solid var(--line); padding:1rem 1.2rem; }
.modal-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.modal-body{ padding:1.2rem; color:var(--ink-2); line-height:1.55; }

/* ---------- rodapé ---------- */
footer{ color:var(--muted); }
footer small{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; }

/* ---------- paginação ---------- */
.table-footer{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.7rem 1.1rem; border-top:1px solid var(--line);
    background:var(--surface); flex-wrap:wrap;
}
.table-footer .meta{
    font-family:var(--font-mono); font-size:.76rem; color:var(--muted);
}
.pagination{ margin:0; }
.pagination .page-link{
    color:var(--brand-ink); border-color:var(--line);
    font-size:.85rem; padding:.35rem .65rem; margin:0 1px; border-radius:8px;
}
.pagination .page-link:hover{ background:var(--brand-tint); color:var(--brand-ink); border-color:var(--brand-edge); }
.pagination .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pagination .page-item.disabled .page-link{ color:#aab2bd; background:var(--surface); }
.pagination .page-link:focus{ box-shadow:0 0 0 3px rgba(10,125,132,.16); }

/* ---------- responsivo ---------- */
@media (max-width:767.98px){
    .table td,.table th{ white-space:nowrap; }
    .page-title{ font-size:1.3rem; }
    .page-head{ flex-direction:column; align-items:flex-start; }
}


/* estabilidade de largura: abrir a gaveta NÃO empurra a tabela de eventos.
   A tabela externa fica travada na largura do container (layout fixo); a gaveta
   de itens rola dentro dela mesma. */
.table-responsive > table.table{ table-layout:fixed; width:100%; }
.table-responsive > table.table > thead th:nth-child(1){ width:13%; }  /* Requisição */
.table-responsive > table.table > thead th:nth-child(2){ width:13%; }  /* Event ID   */
.table-responsive > table.table > thead th:nth-child(3){ width:12%; }  /* Cliente    */
.table-responsive > table.table > thead th:nth-child(4){ width:19%; }  /* Coletado em*/
.table-responsive > table.table > thead th:nth-child(5){ width:18%; }  /* Status     */
.table-responsive > table.table > thead th:nth-child(6){ width:25%; }  /* Ações      */
tr[c-id="row-evento"] > td{ white-space:nowrap; }
tr[c-id="row-evento"] > td:not(:last-child){ overflow:hidden; text-overflow:ellipsis; }



/* ---------- botão atualizar ---------- */
[c-id="atualizar"]{ flex:0 0 auto; }
[c-id="atualizar"] .bi{ transition:transform .25s ease; }
[c-id="atualizar"]:hover .bi{ transform:rotate(-90deg); }
@media (prefers-reduced-motion:no-preference){
    [c-id="atualizar"].is-spinning .bi{ animation:spin-refresh .7s linear infinite; }
    @keyframes spin-refresh{ to{ transform:rotate(360deg); } }
}

.chip-prazo.is-fim{ color:#5b6472; background:#eceff3; border-color:#d7dce3; }
.chip-prazo.is-fim .chip-dot{ background:#9aa3b0; }


/* ---------- status do evento (situação) ---------- */
.situacao-select{
    font-family:var(--font-ui); font-size:.78rem; font-weight:500;
    width:auto; min-width:118px;
    padding:.28rem 1.7rem .28rem .7rem;
    border-radius:999px; border:1px solid var(--line-strong);
    cursor:pointer; transition:background-color .14s ease,color .14s ease,border-color .14s ease;
}
.situacao-select:focus{ box-shadow:0 0 0 3px rgba(10,125,132,.16); }
.situacao-select.is-pendente { color:var(--warn); background-color:var(--warn-tint); border-color:var(--warn-edge); }
.situacao-select.is-orcado   { color:var(--ok);   background-color:var(--ok-tint);   border-color:var(--ok-edge); }
.situacao-select.is-declinado{ color:var(--crit); background-color:var(--crit-tint); border-color:var(--crit-edge); }


/* ---------- autenticação (login / cadastro) ---------- */
.auth-wrap{ min-height:calc(100vh - 220px); }
.auth-card{ width:100%; max-width:420px; }
.auth-card .card-body{ padding:2rem 2rem 1.6rem; }

/* ---------- minha empresa ---------- */
.preview-logo{
    max-height:90px; max-width:100%;
    border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:.4rem; background:var(--surface);
}

/* ---------- navbar: menu da conta ---------- */
.navbar .dropdown .btn-outline-secondary{
    border-color:var(--line-strong); color:var(--ink-2);
}
.navbar .dropdown-menu{
    border:1px solid var(--line); border-radius:var(--radius-sm);
    box-shadow:var(--shadow); font-size:.88rem;
}