/* ===========================================================
   Hub de Soluções - Grupo DL
   Tema: SB Admin 2 adaptado à paleta do Grupo DL
   =========================================================== */
:root {
    --dl-navy:      #04162E; /* cor principal */
    --dl-royal:     #0B3E86;
    --dl-blue:      #1470E8;
    --dl-blue-light:#8DB9F5;
    --dl-gold:      #D89400; /* cor secundária */
    --dl-yellow:    #F9D54F;
    --dl-bg:        #f4f6fb;
}

body {
    font-family: 'Nunito', -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--dl-bg);
    color: #4a5568;
}

/* ---------- Layout wrapper ---------- */
#wrapper { display: flex; }
#content-wrapper { background-color: var(--dl-bg); width: 100%; overflow-x: hidden; min-height: 100vh; }
#content { flex: 1 0 auto; }

/* ---------- Sidebar (gradiente da paleta) ---------- */
.sidebar {
    width: 224px;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--dl-royal) 0%, var(--dl-navy) 100%);
    box-shadow: 2px 0 10px rgba(4,22,46,.15);
}
.sidebar .sidebar-brand {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    padding: 1rem .75rem;
    font-weight: 800;
    letter-spacing: .05rem;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    text-align: center;
    line-height: 1.2;
}
.sidebar .sidebar-brand .brand-logo { max-width: 170px; width: 100%; height: auto; }
.sidebar .sidebar-brand .brand-sub-hub { font-size: .72rem; font-weight: 700; color: var(--dl-yellow); margin-top: .5rem; text-transform: uppercase; letter-spacing: .06rem; }
.sidebar .sidebar-brand .brand-sub { font-size: .72rem; font-weight: 600; color: var(--dl-blue-light); display:block; }
.sidebar hr.sidebar-divider { border-top: 1px solid rgba(255,255,255,.12); margin: .5rem 1rem; }
.sidebar .sidebar-heading {
    color: var(--dl-blue-light);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07rem;
    padding: .75rem 1rem .25rem;
}
.sidebar .nav-item .nav-link {
    color: rgba(255,255,255,.82);
    padding: .8rem 1rem;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
}
.sidebar .nav-item .nav-link i { margin-right: .6rem; width: 18px; text-align: center; color: rgba(255,255,255,.5); }
.sidebar .nav-item .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar .nav-item .nav-link:hover i { color: var(--dl-yellow); }
.sidebar .nav-item.active .nav-link { color: #fff; background: rgba(255,255,255,.12); }
.sidebar .nav-item.active .nav-link i { color: var(--dl-yellow); }

/* ---------- Topbar ---------- */
.topbar {
    height: 70px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(4,22,46,.08);
}
.topbar .topbar-divider { width: 0; border-right: 1px solid #e3e6f0; height: 2.5rem; margin: auto 1rem; }
.topbar .nav-item .nav-link { color: var(--dl-navy); font-weight: 700; }
.topbar .user-name { color: var(--dl-navy); font-weight: 700; font-size: .9rem; }
.topbar .user-badge {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--dl-royal); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800;
    transition: background .15s ease;
}
.topbar .user-link { text-decoration: none; padding: .25rem .5rem; border-radius: .4rem; transition: background .15s ease; }
.topbar .user-link:hover { background: #eef2f9; text-decoration: none; }
.topbar .user-link:hover .user-badge { background: var(--dl-blue); }

/* ---------- Page heading ---------- */
.page-heading { color: var(--dl-navy); font-weight: 800; }

/* ---------- Cards ---------- */
.card { border: 0; box-shadow: 0 .15rem 1rem rgba(4,22,46,.08); border-radius: .5rem; }
.card .card-header {
    background: #fff;
    border-bottom: 1px solid #eef1f6;
    font-weight: 800;
    color: var(--dl-royal);
    padding: .9rem 1.1rem;
}
.card.card-accent { border-left: .28rem solid var(--dl-gold); }

/* ---------- Botões ---------- */
.btn-primary { background: var(--dl-royal); border-color: var(--dl-royal); }
.btn-primary:hover { background: var(--dl-blue); border-color: var(--dl-blue); }
.btn-secondary { background: var(--dl-gold); border-color: var(--dl-gold); color:#fff; }
.btn-secondary:hover { background: #b87c00; border-color: #b87c00; color:#fff; }
.btn-outline-primary { color: var(--dl-royal); border-color: var(--dl-royal); }
.btn-outline-primary:hover { background: var(--dl-royal); border-color: var(--dl-royal); }
.btn-xs { padding: .15rem .5rem; font-size: .75rem; line-height: 1.4; border-radius: .25rem; }

/* ---------- Tabelas (padrão do projeto) ---------- */
.table thead th { background: #f8f9fc; color: var(--dl-navy); border-bottom: 2px solid #e3e6f0; font-size: .78rem; text-transform: uppercase; letter-spacing: .03rem; }
.table td { vertical-align: middle; }

/* ---------- Login ---------- */
.login-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dl-royal) 0%, var(--dl-navy) 100%);
    display: flex; align-items: center; justify-content: center;
}
.login-card { width: 100%; max-width: 400px; border-radius: .75rem; overflow: hidden; }
.login-card .login-head { background: var(--dl-navy); color: #fff; text-align: center; padding: 1.8rem 1.25rem; }
.login-card .login-head h1 { font-size: 1.3rem; font-weight: 800; margin: 0; }
.login-card .login-head span { color: var(--dl-yellow); font-weight: 700; font-size: .8rem; letter-spacing: .05rem; }
.login-card .login-head .login-logo { max-width: 220px; width: 100%; height: auto; margin-bottom: .75rem; }
.login-card .login-head .login-hub { font-size: .95rem; font-weight: 700; color: var(--dl-yellow); letter-spacing: .05rem; margin: 0; }

/* ---------- HUB: grid de soluções ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.solucao-card-wrap { position: relative; display: flex; }
.cred-key {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: #eef2f9; color: var(--dl-royal);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .9rem;
    box-shadow: 0 1px 4px rgba(4,22,46,.12);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cred-key:hover { background: var(--dl-gold); color: #fff; transform: scale(1.08); }
.cred-key:focus { outline: none; box-shadow: 0 0 0 3px rgba(216,148,0,.35); }
.cred-key-empty { color: #b7becb; background: #f1f3f7; }
.cred-key-empty:hover { background: #e2e6ee; color: #8a93a3; }
.solucao-card {
    background: #fff; border-radius: .6rem; text-decoration: none;
    box-shadow: 0 .15rem 1rem rgba(4,22,46,.08);
    padding: 1.5rem 1.25rem; display: flex; flex-direction: column; align-items: center;
    text-align: center; transition: transform .15s ease, box-shadow .15s ease;
    border-top: .28rem solid var(--dl-royal);
    flex: 1 1 auto; width: 100%;
}
.solucao-card:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1.6rem rgba(4,22,46,.18); text-decoration: none; }
.solucao-logo {
    width: 104px; height: 104px; border-radius: 18px; margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--dl-royal); color: #fff; font-size: 2.2rem; font-weight: 800;
    overflow: hidden;
}
.solucao-logo img { padding: 6px; }
.solucao-logo img { width: 100%; height: 100%; object-fit: contain; background:#fff; }
.solucao-card .solucao-nome { color: var(--dl-navy); font-weight: 800; font-size: 1rem; margin-bottom: .25rem; }
.solucao-card .solucao-desc { color: #858796; font-size: .82rem; margin-bottom: .75rem; min-height: 2.1rem; }
.solucao-card .abrir { color: var(--dl-gold); font-weight: 700; font-size: .8rem; }

/* ---------- Utilidades ---------- */
.badge-master { background: var(--dl-gold); color: #fff; }
.badge-func { background: var(--dl-royal); color: #fff; }
.badge-on { background: #1cc88a; color:#fff; }
.badge-off { background: #adb5bd; color:#fff; }
.text-navy { color: var(--dl-navy) !important; }
.reveal-toggle { cursor: pointer; }

@media (max-width: 768px) {
    .sidebar { width: 70px; }
    .sidebar .sidebar-brand .brand-txt, .sidebar .nav-link span, .sidebar .sidebar-heading,
    .sidebar .sidebar-brand .brand-sub-hub { display: none; }
    .sidebar .sidebar-brand .brand-logo { max-width: 46px; }
    .sidebar .sidebar-brand { padding: .75rem .25rem; }
    .sidebar .nav-item .nav-link i { margin-right: 0; }
}