:root {
    --cor-primaria: #0d6efd;
    --cor-secundaria: #6c757d;
    --cor-destaque: #198754;
    --admin-accent: #6366f1;
}

* { -webkit-tap-highlight-color: transparent; }

body {
    background-color: #f4f6fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* =========================================================
   Topbar + Sidebar (visual de sistema web, com hamburguer)
   Usado por app/Views/layouts/admin.php e empresa.php
   ========================================================= */
.app-topbar {
    height: 56px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 1040;
}
.app-topbar.app-topbar-dark {
    background: #12141c;
    border-bottom-color: #262a3a;
}
.btn-hamburger {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #333;
    font-size: 1.35rem;
    cursor: pointer;
}
.btn-hamburger:hover { background: #f1f3f5; }
.app-topbar-dark .btn-hamburger { color: #e9ecef; }
.app-topbar-dark .btn-hamburger:hover { background: rgba(255,255,255,.08); }

.app-topbar-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: #111;
    font-weight: 700;
    min-width: 0;
}
.app-topbar-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar-dark .app-topbar-brand { color: #fff; }
.app-topbar-brand img { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }

.app-topbar-spacer { flex: 1 1 auto; }

.app-topbar-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: #333;
    padding: .3rem .5rem;
    border-radius: 999px;
    border: none;
    background: transparent;
}
.app-topbar-user:hover { background: #f1f3f5; }
.app-topbar-dark .app-topbar-user { color: #fff; }
.app-topbar-dark .app-topbar-user:hover { background: rgba(255,255,255,.08); }
.app-topbar-user .avatar-circle {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--cor-primaria);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.app-topbar-dark .app-topbar-user .avatar-circle { background: var(--admin-accent); }
.app-topbar-user .user-text { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-shell { display: flex; align-items: stretch; }

.app-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #e9ecef;
    position: sticky;
    top: 56px;
    align-self: flex-start;
    height: calc(100vh - 56px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem .75rem;
    transition: width .18s ease, transform .18s ease;
    z-index: 1030;
}
.app-topbar-dark ~ .app-shell .app-sidebar,
.app-shell.app-shell-dark .app-sidebar {
    background: #12141c;
    border-right-color: #262a3a;
}

.app-menu-section-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa3b2;
    padding: .9rem .6rem .3rem;
}
.app-menu-section-title:first-child { padding-top: .1rem; }
.app-sidebar-dark .app-menu-section-title { color: #6b7280; }

.app-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.app-menu .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: 8px;
    color: #3a3f4b;
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
}
.app-menu .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; flex-shrink: 0; color: #838a99; }
.app-menu .nav-link:hover { background: #f1f3f5; color: #16181d; }
.app-menu .nav-link.active { background: color-mix(in srgb, var(--cor-primaria) 12%, white); color: var(--cor-primaria); font-weight: 700; }
.app-menu .nav-link.active i { color: var(--cor-primaria); }

.app-sidebar-dark .nav-link { color: #cbd2e1; }
.app-sidebar-dark .nav-link i { color: #7f8698; }
.app-sidebar-dark .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-sidebar-dark .nav-link.active { background: color-mix(in srgb, var(--admin-accent) 22%, transparent); color: #b3b8ff; }
.app-sidebar-dark .nav-link.active i { color: #b3b8ff; }

.app-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem;
}

/* ---------- Sidebar recolhida (desktop, somente icones) ---------- */
.app-sidebar.sidebar-collapsed { width: 68px; }
.app-sidebar.sidebar-collapsed .menu-text,
.app-sidebar.sidebar-collapsed .app-menu-section-title {
    display: none !important;
}
.app-sidebar.sidebar-collapsed .nav-link { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
.app-sidebar.sidebar-collapsed .nav-link i { margin-right: 0; }

/* ---------- Mobile: sidebar vira gaveta (off-canvas) ---------- */
.app-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        left: 0;
        top: 56px;
        height: calc(100vh - 56px);
        width: 260px !important;
        transform: translateX(-100%);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    .app-sidebar.sidebar-mobile-open {
        transform: translateX(0);
        box-shadow: 8px 0 24px rgba(0,0,0,.15);
    }
    .app-sidebar.sidebar-collapsed .menu-text,
    .app-sidebar.sidebar-collapsed .app-menu-section-title {
        display: block !important;
    }
    .app-sidebar.sidebar-collapsed .nav-link { justify-content: flex-start; padding-left: .65rem; padding-right: .65rem; }
    .app-sidebar.sidebar-collapsed .nav-link i { margin-right: .65rem; }
    .app-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(15,17,23,.45);
        z-index: 1025;
    }
    .app-sidebar-backdrop.show { display: block; }
    .app-content { padding: 1rem; }
}

.btn-brand {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}
.btn-brand:hover {
    filter: brightness(0.92);
    color: #fff;
}
.text-brand { color: var(--cor-primaria); }
.bg-brand { background-color: var(--cor-primaria); }
.badge-destaque { background-color: var(--cor-destaque); }

/* ---------- Auth (login) ---------- */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: #101828;
    padding: 1rem;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
}

/* ---------- PDV (layout sem menu lateral) ---------- */
.pdv-topbar {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    color: #16181d;
    padding: .5rem .85rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    flex-wrap: wrap;
    row-gap: .4rem;
}
.pdv-topbar-brand { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pdv-topbar-brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdv-topbar-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pdv-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    border: 1px solid #e2e5ea;
    background: #f8f9fb;
    color: #333;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}
.pdv-topbar-btn:hover { background: #eef1f5; color: #16181d; }
.pdv-topbar-btn.pdv-topbar-btn-brand { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.pdv-topbar-btn.pdv-topbar-btn-brand:hover { filter: brightness(.94); color: #fff; }
.pdv-topbar-btn.pdv-topbar-btn-danger { background: #fff0f0; border-color: #ffd7d7; color: #c0392b; }
.pdv-topbar-btn.pdv-topbar-btn-danger:hover { background: #ffe4e4; color: #c0392b; }
.pdv-page-content {
    min-height: calc(100vh - 60px);
}

.pdv-produto-card {
    cursor: pointer;
    transition: transform .1s;
}
.pdv-produto-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.pdv-carrinho {
    max-height: 55vh;
    overflow-y: auto;
}
.pdv-total {
    font-size: 2rem;
    font-weight: 700;
}

/* ---------- Checkout publico ---------- */
.checkout-wrapper {
    min-height: 100vh;
    background-color: #f4f6f9;
    padding: 2rem 1rem;
}
.checkout-card {
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    overflow: hidden;
}

/* ---------- Etiquetas ---------- */
.etiqueta-preview {
    border: 1px dashed #c9ccd3;
    border-radius: 8px;
    padding: .5rem;
    text-align: center;
    background: #fff;
}

/* ---------- Utilitarios ---------- */
.table-hover-brand tbody tr:hover {
    background-color: rgba(13,110,253,.05);
}
.stat-card {
    border-radius: 14px;
    border: 1px solid #eef0f3;
}
.cursor-pointer { cursor: pointer; }

@media (max-width: 575.98px) {
    .pdv-total { font-size: 1.5rem; }
    .auth-card { padding: 2rem 1.25rem; }
}