/* ==============================
   TRAC_NEW - Tema Dark Blue
   ============================== */

:root {
    --trac-bg:        #0d1b2a;
    --trac-bg-2:      #112a46;
    --trac-panel:     #152b47;
    --trac-panel-2:   #1a3353;
    --trac-border:    #234467;
    --trac-text:      #ffffff;
    --trac-text-dim:  #c9d6e5;
    --trac-primary:   #3b82f6;
    --trac-primary-2: #2563eb;
    --trac-success:   #16a34a;
    --trac-warning:   #f59e0b;
    --trac-danger:    #dc2626;
    --trac-info:      #06b6d4;
}

html, body {
    background: var(--trac-bg) !important;
    color: #ffffff !important;
    font-size: 14px;
    min-height: 100vh;
}

body.trac-app {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.15), transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, rgba(6,182,212,.10), transparent 60%),
        var(--trac-bg) !important;
    color: #ffffff !important;
}

/* Forca branco em textos comuns */
body.trac-app,
body.trac-app p,
body.trac-app span,
body.trac-app div,
body.trac-app label,
body.trac-app td,
body.trac-app th,
body.trac-app li,
body.trac-app h1,
body.trac-app h2,
body.trac-app h3,
body.trac-app h4,
body.trac-app h5,
body.trac-app h6,
body.trac-app small,
body.trac-app strong,
body.trac-app b,
body.trac-app em,
body.trac-app a:not(.btn):not(.nav-link):not(.navbar-brand):not(.trac-protocol) {
    color: #ffffff;
}

/* Títulos Principais */
body.trac-app h3 {
    font-size: 1.8rem;
    font-weight: 700;
}

body.trac-app .trac-protocol { color: #7eb6ff !important; }

/* Textos secundários / legendas (Aumentados) */
body.trac-app .trac-muted    { 
    color: var(--trac-text-dim) !important; 
    font-size: 1rem; 
}

body.trac-app .text-muted    { color: var(--trac-text-dim) !important; }
body.trac-app .text-dark     { color: #ffffff !important; }

/* Título do ticket (subtítulo do cabeçalho da página de detalhes) */
body.trac-app .trac-ticket-titulo {
    color: #ffffff !important;
    font-size: 1.35rem;   /* ~19px; ajuste a gosto: 1.2rem a 1.6rem */
    font-weight: 500;
    line-height: 1.3;
    margin-top: .25rem;
}

/* ---------- NAVBAR ---------- */
.trac-navbar {
    background: linear-gradient(90deg, #0b1626 0%, #122a47 100%);
    border-bottom: 1px solid var(--trac-border);
    padding: .75rem 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.trac-navbar .navbar-brand { color: #fff !important; font-weight: 700; letter-spacing: 1.5px; }
.trac-navbar .nav-link { color: #ffffff !important; font-weight: 500; transition: color .15s; }
.trac-navbar .nav-link:hover { color: #7eb6ff !important; }
.trac-user { display: flex; align-items: center; gap: .5rem; color: #fff; font-size: .9rem; }
.trac-perfil {
    background: var(--trac-primary); color: #fff; border-radius: 999px;
    padding: .1rem .6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
}

/* ---------- LAYOUT ---------- */
.trac-main { max-width: 1400px; margin: 0 auto; }
.trac-page-title { color: #fff !important; font-weight: 700; letter-spacing: .3px; }
.trac-page-sub   { color: var(--trac-text-dim) !important; }

/* ---------- CARDS DE ESTATISTICA ---------- */
.trac-stat {
    display: flex; align-items: center; gap: 1rem;
    background: var(--trac-panel); border: 1px solid var(--trac-border);
    border-left: 4px solid var(--trac-primary); border-radius: .6rem;
    padding: 1rem 1.1rem; box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .15s, box-shadow .15s;
}
.trac-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.trac-stat-icon {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: .5rem; font-size: 1.4rem; color: #fff; background: var(--trac-primary);
}
.trac-stat-label { color: var(--trac-text-dim) !important; font-size: .85rem; }
.trac-stat-value { font-size: 1.8rem; font-weight: 700; color: #fff !important; line-height: 1; }
.trac-stat-primary { border-left-color: var(--trac-primary); }
.trac-stat-primary .trac-stat-icon { background: var(--trac-primary); }
.trac-stat-success { border-left-color: var(--trac-success); }
.trac-stat-success .trac-stat-icon { background: var(--trac-success); }

/* ---------- PAINEIS ---------- */
.trac-panel {
    background: var(--trac-panel); border: 1px solid var(--trac-border);
    border-radius: .6rem; padding: 1rem 1.1rem; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* ---------- INPUTS E CARDS ---------- */
.trac-label { 
    color: var(--trac-text-dim) !important; 
    font-size: .78rem; 
    text-transform: uppercase; 
    letter-spacing: .5px; 
    margin-bottom: .35rem; 
    font-weight: 600;
}

.trac-input, .form-control.trac-input, .form-select.trac-input {
    background: var(--trac-bg-2) !important;
    border: 2px solid var(--trac-border) !important;
    color: #ffffff !important;
    border-radius: .6rem !important;
    padding: .6rem .8rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* No foco: mantém fundo e cor do texto iguais, só destaca a borda */
.trac-input:focus, .form-control.trac-input:focus, .form-select.trac-input:focus {
    background: var(--trac-bg-2) !important;
    border-color: var(--trac-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 .25rem rgba(59, 130, 246, 0.25) !important;
    outline: none;
}

/* Autofill do Chrome/Edge (evita fundo branco/amarelo) */
.trac-input:-webkit-autofill,
.trac-input:-webkit-autofill:hover,
.trac-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--trac-bg-2) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
}

.trac-input { caret-color: #ffffff; }

.trac-input::placeholder { 
    color: #6d85a1 !important; 
    font-weight: 400;
}

/* ---------- BOTOES ---------- */
.btn-trac-primary { background: var(--trac-primary); border: 1px solid var(--trac-primary); color: #fff !important; font-weight: 500; }
.btn-trac-primary:hover { background: var(--trac-primary-2); border-color: var(--trac-primary-2); color: #fff !important; }
.btn-trac-ghost { background: transparent; border: 1px solid var(--trac-border); color: #fff !important; }
.btn-trac-ghost:hover { background: var(--trac-panel-2); color: #fff !important; border-color: var(--trac-primary); }

.btn-add-more {
    background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px; padding: 0.2rem 0.8rem; font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s ease;
    display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none;
}
.btn-add-more:hover { background: #3b82f6; color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); transform: translateY(-1px); }

.btn-icon-only {
    width: 32px; height: 32px; padding: 0; border-radius: .45rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Ajuste do botão dentro do input-group para ficar colado */
.input-group .btn-icon-only {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
    min-height: 31px; 
    margin-left: -2px;
    border: 2px solid var(--trac-border) !important;
    border-left: none !important;
}

/* ---------- TABELA ESTILO EXCEL (COMPACTA) ---------- */
.trac-table { 
    color: #fff !important; 
    --bs-table-bg: transparent; 
    --bs-table-color: #fff; 
    --bs-table-border-color: var(--trac-border);
    border-collapse: collapse !important;
    width: 100%;
    font-size: 0.85rem;
}

/* Cabeçalho da Tabela */
.trac-table thead th { 
    background: var(--trac-bg-2) !important; 
    color: #fff !important; 
    text-transform: uppercase; 
    letter-spacing: .5px; 
    font-size: .7rem; 
    font-weight: 600; 
    padding: .45rem .6rem !important;
    border: 1px solid var(--trac-border) !important;
    vertical-align: middle;
}

/* Células (Linhas e Colunas) */
.trac-table tbody td { 
    background: transparent !important; 
    border: 1px solid var(--trac-border) !important; 
    padding: .45rem .6rem !important;
    color: #fff !important; 
    vertical-align: middle;
}

/* Efeito Hover nas linhas */
.trac-table tbody tr:hover td { 
    background: rgba(59,130,246,.10) !important; 
}

/* Ajustes de Cores e Tags */
.trac-titulo { font-weight: 500; color: #fff !important; }
.trac-empty  { color: var(--trac-text-dim) !important; }
.trac-tag { 
    display: inline-block; padding: .15rem .55rem; border-radius: 999px; 
    background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.35); 
    color: #8ec1ff !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; 
}
.trac-badge { 
    font-weight: 600; letter-spacing: .4px; text-transform: uppercase; 
    font-size: .7rem; padding: .3rem .55rem; color: #fff !important; 
}

/* ---------- TIMELINE ---------- */
.timeline-item { border-left: 3px solid var(--trac-border); padding: 0 0 .9rem 1rem; position: relative; }
.timeline-item::before { content: ""; width: 10px; height: 10px; background: var(--trac-primary); border-radius: 50%; position: absolute; left: -6.5px; top: 4px; }
.timeline-item:last-child { border-left-color: transparent; }

/* ---------- CARDS GENERICOS ---------- */
.card { background: var(--trac-panel) !important; border: 1px solid var(--trac-border) !important; color: #fff !important; border-radius: .6rem; }
.card-header { background: var(--trac-bg-2) !important; border-bottom: 1px solid var(--trac-border) !important; color: #fff !important; font-weight: 600; }
.card-body, .card-footer { color: #fff !important; }

/* ---------- ALERTAS ---------- */
.alert { border-radius: .5rem; border-width: 1px; border-style: solid; box-shadow: 0 4px 12px rgba(0,0,0,.2); background-color: rgba(22, 163, 74, 0.2); color: #fff !important; }
.alert-success { border-color: var(--trac-success) !important; }
.alert-danger { border-color: var(--trac-danger) !important; background-color: rgba(220, 38, 38, 0.2) !important; }
.alert-warning { border-color: var(--trac-warning) !important; background-color: rgba(245, 158, 11, 0.2) !important; }
.alert-info { border-color: var(--trac-info) !important; background-color: rgba(6, 182, 212, 0.2) !important; }
.alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.8; }
.alert .btn-close:hover { opacity: 1; }

a { color: #7eb6ff; }
a:hover { color: #a9ccff; }
.form-check-label { color: #fff !important; }
.table-responsive { border-radius: .6rem; }

/* ---------- AVATAR (perfil) ---------- */
.trac-avatar { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #06b6d4); color: #fff; font-size: 1.6rem; box-shadow: 0 6px 18px rgba(59,130,246,.35); }

/* ---------- PAGINACAO ---------- */
.trac-pagination .page-link { background: var(--trac-bg-2); border-color: var(--trac-border); color: var(--trac-text); border-radius: .35rem; margin: 0 .1rem; }
.trac-pagination .page-link:hover { background: var(--trac-panel-2); color: #fff; border-color: var(--trac-primary); }
.trac-pagination .page-item.active .page-link { background: var(--trac-primary); border-color: var(--trac-primary); color: #fff; }
.trac-pagination .page-item.disabled .page-link { background: var(--trac-bg-2); color: #4a5f79; border-color: var(--trac-border); }

/* ---------- ANIMACAO PISCAR ---------- */
@keyframes piscarTrac {
    0%   { background-color: rgba(59, 130, 246, 0.0); }
    50%  { background-color: rgba(59, 130, 246, 0.35); }
    100% { background-color: rgba(59, 130, 246, 0.0); }
}
.trac-table tbody tr.piscar-aberto { animation: piscarTrac 1.5s infinite ease-in-out !important; }
.trac-table tbody tr.piscar-aberto td:first-child { border-left: 4px solid #3b82f6 !important; }

/* =========================================
   DROPDOWN DO USUÁRIO (NAVBAR) TEMA ESCURO
   ========================================= */
.dropdown-menu.trac-dropdown {
    background-color: var(--trac-panel) !important;
    border: 1px solid var(--trac-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    border-radius: .5rem;
    padding: .5rem 0;
}

.dropdown-menu.trac-dropdown .dropdown-item {
    color: #ffffff !important;
    padding: .5rem 1rem;
    transition: background .15s;
}

.dropdown-menu.trac-dropdown .dropdown-item:hover, 
.dropdown-menu.trac-dropdown .dropdown-item:focus {
    background-color: var(--trac-panel-2) !important;
    color: #ffffff !important;
}

.dropdown-menu.trac-dropdown .dropdown-item i {
    color: var(--trac-text-dim) !important;
}

.dropdown-menu.trac-dropdown .dropdown-item:hover i {
    color: #7eb6ff !important;
}

.dropdown-menu.trac-dropdown .dropdown-item.text-danger {
    color: #ff6b6b !important;
}

.dropdown-menu.trac-dropdown .dropdown-item.text-danger i {
    color: #ff6b6b !important;
}

.dropdown-menu.trac-dropdown .dropdown-item.text-danger:hover {
    background-color: rgba(220, 38, 38, 0.15) !important;
}

.dropdown-menu.trac-dropdown .dropdown-divider {
    border-top-color: var(--trac-border) !important;
    opacity: 1;
    margin: .5rem 0;
}
/* Ajuste do Botão Hamburger (Menu Mobile) */
.trac-navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: .4rem;
    padding: .25rem .5rem;
}

.trac-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
    outline: none;
}

/* Força o ícone (hamburger) a ser branco */
.trac-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}