@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --primary: #CCA572;
    --primary-hover: #B89362;
    --primary-light: rgba(204, 165, 114, 0.1);
    --bg-body: #f8fafc;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --card-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.03), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    --primary-shadow: 0 10px 15px -3px rgba(204, 165, 114, 0.2);
    --sidebar-width: 280px;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.sidebar {
    height: 100vh;
    background: white;
    border-right: 1px solid rgba(204, 165, 114, 0.1);
    position: fixed;
    width: var(--sidebar-width);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 10px 0 30px rgba(0,0,0,0.01);
    overflow-y: auto;
    scrollbar-width: thin;
}

.main-content {
    margin-left: var(--sidebar-width);
    padding: 40px;
}

.nav-link {
    color: var(--text-muted);
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    margin-bottom: 6px;
}

.nav-link:hover, .nav-link.active {
    background-color: var(--primary-light);
    color: var(--primary);
}

.nav-link.active {
    background-color: var(--primary);
    color: white !important;
    box-shadow: var(--primary-shadow);
}

.stat-card, .video-card, .card {
    border: 1px solid rgba(204, 165, 114, 0.05) !important;
    border-radius: 20px !important;
    box-shadow: var(--card-shadow) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 35px -5px rgba(204, 165, 114, 0.1) !important;
}

.btn-primary {
    background-color: var(--primary);
    border: none;
    border-radius: 12px;
    padding: 10px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(204, 165, 114, 0.3);
}

/* Sobrescrita de classes utilitárias do Bootstrap */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); }

/* Elementos Mobile */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 992px) {
    .sidebar { 
        transform: translateX(-100%); 
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        border-radius: 0 24px 24px 0;
    }
    .sidebar.active { 
        transform: translateX(0); 
        box-shadow: 20px 0 60px rgba(0,0,0,0.1);
    }
    .main-content { 
        margin-left: 0; 
        padding: 24px 16px; 
    }
    h1, .h1 { font-size: 1.5rem; }
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
}

/* Super Admin: navegação mais compacta e integrada ao dashboard SaaS. */
.superadmin-shell { --sidebar-width: 248px; background:#f7f7f9; }
.superadmin-shell .sidebar { padding:24px 18px!important; border-right-color:#e8e6ec; box-shadow:none; }
.superadmin-shell .sidebar > div:first-child { margin-bottom:2rem!important; padding:0 .35rem; }
.superadmin-shell .sidebar .nav-link { margin-bottom:.3rem; padding:.68rem .8rem; border-radius:10px; font-size:.86rem; }
.superadmin-shell .sidebar .nav-link svg { width:18px; height:18px; }
.superadmin-shell .sidebar .nav-link.active { box-shadow:0 6px 16px rgba(var(--primary-rgb),.18); }
.superadmin-shell .sidebar > div:last-child { padding-top:1.25rem!important; }
.superadmin-shell .main-content { min-height:100vh; padding:32px clamp(24px,3vw,48px); }

/* Cliente/Admin: mesmo sistema visual, preservando a cor dinâmica da empresa. */
.client-shell { --sidebar-width:248px; background:#f7f7f9; }
.client-shell .sidebar { padding:24px 18px!important; border-right-color:#e8e6ec; box-shadow:none; }
.client-shell .sidebar > div:first-child { margin-bottom:1.75rem!important; padding:0 .35rem; }
.client-shell .sidebar .nav-link { margin-bottom:.25rem; padding:.68rem .8rem; border-radius:10px; font-size:.85rem; }
.client-shell .sidebar .nav-link svg { width:18px; height:18px; }
.client-shell .sidebar .nav-link.active { box-shadow:0 6px 16px rgba(var(--primary-rgb),.18); }
.client-shell .sidebar .nav-link:hover { color:var(--primary-color); background:rgba(var(--primary-rgb),.08); }
.client-shell .sidebar .nav-link.active:hover { color:#fff; background:var(--primary-color); }
.client-shell .nav-section-label { margin:1.5rem .8rem .5rem; color:#a1a1aa; font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.client-shell .sidebar > div:last-child { padding-top:1.15rem!important; }
.client-shell .main-content { min-height:100vh; padding:32px clamp(24px,3vw,48px); }

@media (max-width:992px) {
    .superadmin-shell .sidebar { width:260px; }
    .superadmin-shell .main-content { padding:24px 18px; }
    .client-shell .sidebar { width:260px; }
    .client-shell .main-content { padding:24px 18px; }
}

@media (max-width:576px) {
    .superadmin-shell .main-content { padding:18px 14px 28px; }
    .client-shell .main-content { padding:18px 14px 28px; }
}

/* ─── Responsividade — ajustes gerais de cabeçalho/tipografia ─────────────── */
@media (max-width: 768px) {
    .main-content { padding: 20px 14px; }
    .main-content > header { flex-wrap: wrap; gap: .5rem; }
    .main-content header h2,
    .main-content header .h2 { font-size: 1.3rem; }
    .stat-card h2, .card .h3, .card .display-4 { font-size: 1.5rem; }
    /* Botões em telas pequenas não estouram a largura */
    .main-content header .btn { flex: 0 0 auto; }
    .modal-dialog { margin: .5rem; }
}

/* Tabelas com rolagem suave no toque, sem estourar o layout */
.table-responsive { -webkit-overflow-scrolling: touch; }

.mobile-action-label { display:none; }

/* Padrão reutilizável de responsividade para as páginas do cliente/admin. */
@media (max-width: 768px) {
    .client-shell { overflow-x:hidden; }
    .client-shell .mobile-header { min-height:58px; padding:10px 16px!important; z-index:998; }
    .client-shell .mobile-header > div { min-width:0; overflow:hidden; }
    .client-shell .mobile-header img { flex:0 0 32px; }
    .client-shell .mobile-header span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .client-shell #toggleSidebar { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:10px; }
    .client-shell .main-content { padding:20px 16px 28px; }
    .client-shell .main-content > header,
    .client-shell .page-header { align-items:flex-start!important; flex-direction:column; gap:14px; margin-bottom:24px!important; }
    .client-shell .main-content > header > div:first-child,
    .client-shell .page-header > div:first-child { min-width:0; width:100%; }
    .client-shell .main-content > header h2,
    .client-shell .page-header h2 { margin-bottom:4px!important; font-size:1.35rem; line-height:1.25; }
    .client-shell .main-content > header p,
    .client-shell .page-header p { margin:0; font-size:.82rem; line-height:1.5; }
    .client-shell .main-content > header > div:last-child,
    .client-shell .page-actions { display:flex; width:100%; flex-wrap:wrap; gap:8px!important; }
    .client-shell .main-content > header .btn,
    .client-shell .page-actions .btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; flex:1 1 auto; padding:.55rem .8rem; white-space:nowrap; }
    .client-shell .modal-dialog { width:auto; max-width:calc(100vw - 24px); margin:12px auto; }
    .client-shell .modal-content { max-height:calc(100dvh - 24px); overflow:hidden; }
    .client-shell .modal-content > form,
    .client-shell .modal-body { overflow-y:auto; overscroll-behavior:contain; }
    .client-shell .modal-content > form { padding:20px!important; }
    .client-shell .modal-header { padding:20px 20px 0!important; }
    .client-shell input:not([type="checkbox"]):not([type="radio"]),
    .client-shell select,
    .client-shell textarea { max-width:100%; }
    .client-shell .dropdown-menu { max-width:calc(100vw - 32px); }
}

/* ─── Tabela que vira "cartões" no celular (adicione class="table-stack") ──── */
@media (max-width: 576px) {
    table.table-stack thead { display: none; }
    table.table-stack,
    table.table-stack tbody,
    table.table-stack tr,
    table.table-stack td { display: block; width: 100%; }
    table.table-stack tr {
        border: 1px solid rgba(204, 165, 114, 0.18);
        border-radius: 14px;
        margin-bottom: 12px;
        padding: 14px;
        background: #fff;
    }
    table.table-stack td {
        border: none !important;
        text-align: right;
        padding: .34rem 0 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        min-width: 0 !important;
    }
    table.table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        white-space: nowrap;
    }
    table.table-stack td:empty { display: none; }

    .client-shell table.table-stack tbody { display:grid; gap:12px; }
    .client-shell table.table-stack tr { margin:0; border-color:#e7e5eb; box-shadow:0 2px 10px rgba(24,24,27,.035); }
    .client-shell table.table-stack td { overflow-wrap:anywhere; }
    .client-shell table.table-stack td:last-child { margin-top:8px; padding-top:10px!important; border-top:1px solid #f0eef2!important; }
    .client-shell table.table-stack td:last-child .btn { min-width:44px; min-height:44px; }
    .client-shell table.table-stack td:last-child form { margin:0; }

    /* Trilhas: card sem rótulos de tabela, com título/status e ações no rodapé. */
    .client-shell table.path-table tr.path-record { position:relative; display:grid; grid-template-columns:1fr auto; gap:8px 12px; padding:16px; }
    .client-shell table.path-table td { display:block; width:auto; padding:0!important; text-align:left; }
    .client-shell table.path-table td::before { display:none; }
    .client-shell table.path-table td:nth-child(1) { grid-column:1; padding-right:58px!important; color:#27272a; font-size:.92rem; font-weight:700; }
    .client-shell table.path-table td:nth-child(2) { grid-column:1; color:#62616a; font-size:.78rem; }
    .client-shell table.path-table td:nth-child(2)::after { content:' cursos'; }
    .client-shell table.path-table td:nth-child(3) { grid-column:1; color:#62616a; font-size:.75rem; }
    .client-shell table.path-table td:nth-child(3)::before { display:inline; content:'Certificado: '; color:#8b8992; font-weight:500; }
    .client-shell table.path-table td:nth-child(4) { position:absolute; top:14px; right:14px; }
    .client-shell table.path-table td:nth-child(4) .badge { padding:.38rem .58rem; border-radius:999px; font-size:.65rem; }
    .client-shell table.path-table td:nth-child(5) { display:flex; grid-column:1/-1; justify-content:space-between; gap:10px; margin-top:6px; padding-top:12px!important; border-top:1px solid #f0eef2!important; }
    .client-shell table.path-table td:nth-child(5) > a,
    .client-shell table.path-table td:nth-child(5) > form { flex:1 1 0; }
    .client-shell table.path-table td:nth-child(5) .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:44px; margin:0!important; }
    .client-shell table.path-table .mobile-action-label { display:inline; }

    .client-shell .report-actions .report-back { flex-basis:100%; justify-content:flex-start; border-color:transparent; padding-left:0; }
    .client-shell .report-actions .report-back:hover { background:transparent; color:var(--primary-color); }
    .client-shell .report-actions .report-back ~ .btn { flex:1 1 calc(50% - 4px); }
    .client-shell .report-metrics { --bs-gutter-x:12px; --bs-gutter-y:12px; margin-bottom:24px!important; }
    .client-shell .report-metric { min-height:0; padding:14px!important; border-radius:13px!important; }
    .client-shell .report-metric p { margin-bottom:5px!important; font-size:9px!important; }
    .client-shell .report-metric h2 { font-size:1.35rem; }
}

@media (min-width:390px) and (max-width:576px) {
    .client-shell .report-metrics > * { width:50%; }
}