:root {
    --bbb-dark: #161616;         /* preto */
    --bbb-panel: #2a2a2a;        /* cinza escuro */
    --bbb-accent: #ffc107;       /* amarelo (acao principal) */
    --bbb-accent-hover: #e0a800; /* amarelo escuro (hover) */
    --bbb-ink: #161616;          /* texto sobre o amarelo */
    --bbb-yellow: #ffc107;
}

body {
    background: #f2f4f8;
    color: #23272f;
}

.app-navbar {
    background: linear-gradient(90deg, var(--bbb-dark), var(--bbb-panel));
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.app-navbar .navbar-brand { letter-spacing: .3px; }
.app-navbar .nav-link {
    color: rgba(255,255,255,.78);
    font-weight: 500;
    border-radius: 8px;
    padding: .5rem .85rem;
    margin: 0 .1rem;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.app-navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.app-navbar .nav-link.active {
    color: var(--bbb-ink);
    background: var(--bbb-accent);
    font-weight: 700;
}
.app-navbar .nav-link.active .bi { color: var(--bbb-ink); }
.app-navbar .navbar-user .nav-link { color: var(--bbb-yellow); }

/* ---- Menu no mobile: overlay em tela cheia (offcanvas), nao empurra o conteudo ---- */
.app-offcanvas {
    background: linear-gradient(160deg, var(--bbb-dark), var(--bbb-panel));
    color: #fff;
}
.app-offcanvas .offcanvas-title { color: #fff; }
@media (max-width: 991.98px) {
    .app-offcanvas { width: 100% !important; }     /* ocupa toda a tela */
    .app-offcanvas .nav-link {
        padding: .85rem 1rem;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .app-offcanvas .navbar-user {
        margin-top: 1rem;
        border-top: 1px solid rgba(255,255,255,.12);
        padding-top: .5rem;
    }
}

/* ---- Botao flutuante de venda rapida (mobile) ---- */
.fab-venda {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bbb-accent);
    color: var(--bbb-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 6px 18px rgba(255,193,7,.55);
    z-index: 1045;
    text-decoration: none;
}
.fab-venda:hover, .fab-venda:focus { background: var(--bbb-accent-hover); color: var(--bbb-ink); }
.fab-venda:active { transform: scale(.94); }

.app-footer {
    background: var(--bbb-dark);
    color: rgba(255,255,255,.55);
}

.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(20,30,60,.06);
}

.stat-card {
    color: #fff;
    border-radius: 14px;
    overflow: hidden;
}
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { font-size: .8rem; opacity: .85; text-transform: uppercase; letter-spacing: .5px; }
.stat-card .stat-icon { font-size: 2.2rem; opacity: .3; color: var(--bbb-yellow); }

/* Cards do dashboard - todos escuros (coeso), com detalhe amarelo */
.stat-card { border-left: 4px solid var(--bbb-yellow); }
.bg-grad-1 { background: linear-gradient(135deg, #2b2b2b, #454545); }
.bg-grad-2 { background: linear-gradient(135deg, #202020, #3a3a3a); }
.bg-grad-3 { background: linear-gradient(135deg, #333333, #4d4d4d); }
.bg-grad-4 { background: linear-gradient(135deg, #000000, #2e2e2e); }
.bg-grad-5 { background: linear-gradient(135deg, #262626, #414141); }

.table-vcenter td, .table-vcenter th { vertical-align: middle; }

/* Alerta de estoque baixo continua em vermelho (aviso) */
.badge-estoque-baixo { background: #dc3545; }

.btn-bbb {
    background: var(--bbb-accent);
    border-color: var(--bbb-accent);
    color: var(--bbb-ink);
    font-weight: 600;
}
.btn-bbb:hover { background: var(--bbb-accent-hover); border-color: var(--bbb-accent-hover); color: var(--bbb-ink); }

.section-title {
    font-weight: 700;
    color: var(--bbb-dark);
}

.item-venda-row { background: #fafbfd; border-radius: 10px; }

/* ============================================================
   Tabelas viram CARTOES no mobile (sem rolagem horizontal)
   Basta a tabela ter a classe .table-cards
   ============================================================ */
@media (max-width: 767.98px) {
    .table-responsive { overflow-x: visible; }   /* nao gera barra lateral */

    table.table-cards { border: 0; }
    table.table-cards thead { display: none; }   /* cabecalho vira rotulo em cada celula */
    table.table-cards tbody,
    table.table-cards tfoot,
    table.table-cards tr,
    table.table-cards td { display: block; width: 100%; }

    table.table-cards td:empty { display: none; }              /* esconde celulas vazias */
    table.table-cards tfoot td::before { content: none; }
    table.table-cards tfoot td { justify-content: space-between; font-weight: 700; }

    table.table-cards tr {
        background: #fff;
        border: 1px solid #e6e8ef;
        border-radius: 12px;
        padding: .35rem .85rem;
        margin-bottom: .75rem;
        box-shadow: 0 1px 6px rgba(20,30,60,.05);
    }

    table.table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        padding: .55rem 0 !important;
        border: 0;
        border-bottom: 1px solid #f2f3f7;
        min-height: 44px;                        /* alvo de toque confortavel */
        white-space: normal;
    }
    table.table-cards td:last-child { border-bottom: 0; }

    /* rotulo (vem do cabecalho, via JS data-label) */
    table.table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        text-align: left;
        flex: 0 0 42%;
        white-space: nowrap;
    }

    /* celula de acoes: rotulo "Acoes" fixo a esquerda, botoes a direita */
    table.table-cards td.cel-acoes {
        position: relative;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: .4rem;
        padding-left: 42% !important;
    }
    table.table-cards td.cel-acoes::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        flex: none;
    }
    table.table-cards td.cel-acoes .btn { padding: .45rem .7rem; }

    /* linha de "nenhum registro" (colspan) ocupa tudo, centralizada */
    table.table-cards td[colspan] { justify-content: center; text-align: center; }
    table.table-cards td[colspan]::before { content: none; }
}