/* ======================================================
   ALVEEON – PUBLIC / PANEL CSS
   Estilo SaaS Premium | Whitelabel
====================================================== */

/* ------------------------
   ROOT VARIABLES
------------------------- */
:root {
    --alveeon-primary: #1e40af;     /* Azul principal */
    --alveeon-secondary: #0f172a;   /* Azul escuro */
    --alveeon-accent: #2563eb;      /* Azul destaque */
    --alveeon-bg: #f8fafc;          /* Fundo claro */
    --alveeon-card: #ffffff;        /* Cards */
    --alveeon-border: #e5e7eb;      /* Bordas */
    --alveeon-text: #0f172a;        /* Texto */
    --alveeon-muted: #64748b;       /* Texto fraco */
}

/* ------------------------
   GLOBAL
------------------------- */
html, body {
    background-color: var(--alveeon-bg);
    color: var(--alveeon-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    height: 100%;
}

a {
    color: var(--alveeon-primary);
    text-decoration: none;
}

a:hover {
    color: var(--alveeon-accent);
}

/* ------------------------
   TOPBAR (HEADER)
------------------------- */
.sb-topnav {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--alveeon-border);
    height: 64px;
    z-index: 1039;
}

.sb-topnav .navbar-brand {
    color: var(--alveeon-primary) !important;
    font-weight: 700;
    font-size: 1.1rem;
}

.sb-topnav .nav-link {
    color: var(--alveeon-text) !important;
    font-weight: 500;
}

/* Botão sanduíche */
#sidebarToggle {
    color: var(--alveeon-primary) !important;
}

#sidebarToggle i {
    color: var(--alveeon-primary) !important;
}

/* ------------------------
   LAYOUT
------------------------- */
#layoutSidenav {
    display: flex;
}

#layoutSidenav_nav {
    width: 260px;
    min-width: 260px;
    transition: transform .3s ease;
}

#layoutSidenav_content {
    flex-grow: 1;
    padding-left: 260px;
    transition: padding .3s ease;
}

/* Quando sidebar fechada */
.sb-sidenav-toggled #layoutSidenav_nav {
    transform: translateX(-260px);
}

.sb-sidenav-toggled #layoutSidenav_content {
    padding-left: 0;
}

/* ------------------------
   SIDEBAR
------------------------- */
.sb-sidenav {
    background: linear-gradient(180deg, #0b1f4b, #081733);
    color: #e5e7eb;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding-top: 64px;
}

.sb-sidenav .sb-sidenav-menu-heading {
    padding: 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #93c5fd;
}

.sb-sidenav .nav-link {
    color: #e5e7eb;
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    font-weight: 500;
    border-radius: 6px;
    margin: 0 .5rem;
}

.sb-sidenav .nav-link i {
    color: #60a5fa;
    margin-right: .75rem;
}

.sb-sidenav .nav-link:hover {
    background: rgba(255,255,255,.08);
    color: #ffffff;
}

.sb-sidenav .nav-link.active {
    background: rgba(255,255,255,.15);
    color: #ffffff;
}

/* Footer da sidebar */
.sb-sidenav-footer {
    padding: 1rem;
    font-size: .85rem;
    background: rgba(0,0,0,.2);
    color: #cbd5f5;
}

/* ------------------------
   CONTEÚDO
------------------------- */
.container-fluid {
    padding-top: 1.5rem;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb a {
    font-weight: 500;
}

/* ------------------------
   CARDS
------------------------- */
.card {
    background-color: var(--alveeon-card);
    border-radius: 12px;
    border: 1px solid var(--alveeon-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.03);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--alveeon-border);
    font-weight: 600;
}

/* ------------------------
   TABLES
------------------------- */
.table {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    background: #f1f5f9;
    color: var(--alveeon-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--alveeon-border);
}

.table tbody tr:hover {
    background: #f8fafc;
}

/* ------------------------
   BADGES
------------------------- */
.badge {
    padding: .45em .75em;
    font-weight: 600;
    border-radius: 6px;
}

.badge-success {
    background-color: #16a34a;
}

.badge-dark {
    background-color: #020617;
}

/* ------------------------
   BOTÕES
------------------------- */
.btn-primary {
    background-color: var(--alveeon-primary);
    border-color: var(--alveeon-primary);
}

.btn-primary:hover {
    background-color: var(--alveeon-accent);
    border-color: var(--alveeon-accent);
}

/* ------------------------
   MOBILE
------------------------- */
@media (max-width: 991px) {
    #layoutSidenav_nav {
        position: fixed;
        z-index: 1040;
    }

    #layoutSidenav_content {
        padding-left: 0;
    }

    .sb-sidenav {
        box-shadow: 4px 0 30px rgba(0,0,0,.3);
    }
}
/** 
/* ======================================================
   RESPONSIVO – TICKETS & USUÁRIOS (MOBILE FIX)
====================================================== */

/* Wrapper para evitar quebra de layout */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 768px) {
    /* Aplicamos apenas às tabelas com esta classe específica */
    .table-mobile-responsive {
        border: 0 !important;
    }

    .table-mobile-responsive thead {
        display: none !important; /* Esconde o cabeçalho original */
    }

    .table-mobile-responsive tbody tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        padding: 1rem;
    }

    .table-mobile-responsive tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0.5rem;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        font-size: 0.875rem;
        text-align: right !important;
    }

    .table-mobile-responsive tbody td:last-child {
        border-bottom: 0 !important;
        margin-top: 0.5rem;
        justify-content: center; /* Centraliza botões de ação */
    }

    /* Gera o rótulo lateral usando o atributo data-label */
    .table-mobile-responsive tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        font-size: 0.75rem;
        text-align: left;
        flex: 1;
    }

    /* Ajuste para botões não quebrarem o flex */
    .table-mobile-responsive .btn-group, 
    .table-mobile-responsive .d-inline {
        justify-content: flex-end;
    }
}