/* ============================================================
   VaporWave StockManager — Identidade Visual
   ============================================================ */

:root {
    --sidebar-width: 260px;

    /* Cores VaporWave da logo */
    --pink:        #e91e8c;
    --pink-light:  #f06292;
    --cyan:        #29b6f6;
    --cyan-light:  #81d4fa;
    --purple:      #ab47bc;
    --gradient:    linear-gradient(135deg, #e91e8c 0%, #ab47bc 50%, #29b6f6 100%);
    --gradient-h:  linear-gradient(135deg, #f06292 0%, #ce93d8 50%, #81d4fa 100%);

    /* Layout */
    --sidebar-bg:   #070712;
    --sidebar-dark: #0d0d1f;
    --topbar-h:     60px;
    --body-bg:      #0a0a18;
    --card-bg:      #0f0f24;
    --card-border:  #1e1e3a;
    --text-main:    #e8e8f8;
    --text-muted:   #6b6b9a;
    --border:       #1e1e3a;

    /* Status */
    --success: #00e676;
    --warning: #ffab40;
    --danger:  #ff5252;
}

* { box-sizing: border-box; }

body {
    background: var(--body-bg);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    min-height: 100vh;
}

/* ======================================================
   SIDEBAR
   ====================================================== */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--card-border);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transition: width .25s ease;
    overflow: hidden;
}

#sidebar.collapsed { width: 76px; }
#sidebar.collapsed .nav-link-text,
#sidebar.collapsed .user-info,
#sidebar.collapsed .sidebar-label { display: none; }
#sidebar.collapsed .nav-link { justify-content: center; padding: .75rem; }
#sidebar.collapsed .sidebar-brand { justify-content: center; padding: 1rem .5rem; }
#sidebar.collapsed .sidebar-brand img { height: 34px; padding: 4px 6px; }
#sidebar.collapsed .sidebar-footer { justify-content: center; padding: 1rem .5rem; }
#sidebar.collapsed .btn-logout { margin-left: 0; }

/* Logo / Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--card-border);
    text-decoration: none;
    white-space: nowrap;
    min-height: 72px;
}

.sidebar-brand img {
    height: 38px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border-radius: 10px;
    padding: 4px 8px;
    box-shadow: 0 0 16px rgba(233, 30, 140, 0.35), 0 2px 8px rgba(0,0,0,.4);
}

/* Sidebar colapsado: esconde o texto mas mantém a logo */
.sidebar-brand span {
    display: none;
}

/* Nav links */
#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .72rem 1.5rem;
    color: var(--text-muted);
    transition: all .2s;
    white-space: nowrap;
    font-weight: 500;
    position: relative;
    border-left: 3px solid transparent;
}
#sidebar .nav-link i { font-size: 1.1rem; flex-shrink: 0; }
#sidebar .nav-link:hover {
    background: rgba(233, 30, 140, 0.07);
    color: var(--pink-light);
    border-left-color: var(--pink);
}
#sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(233,30,140,.12) 0%, transparent 100%);
    color: var(--pink-light);
    border-left-color: var(--pink);
}
#sidebar .nav-link.active i { color: var(--pink); }

/* Sidebar section labels */
.sidebar-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    padding: 1.25rem 1.5rem .4rem;
    opacity: .6;
}

/* Footer do sidebar */
.sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--card-border);
    gap: .5rem;
    background: rgba(233, 30, 140, 0.03);
}

.sidebar-user { display: flex; align-items: center; gap: .75rem; min-width: 0; }

.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(233,30,140,.4);
}

.user-info { display: flex; flex-direction: column; min-width: 0; }
.user-name  { color: var(--text-main); font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role  { color: var(--text-muted); font-size: .72rem; white-space: nowrap; }

.btn-logout {
    color: var(--text-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
    text-decoration: none;
    transition: color .2s;
    margin-left: auto;
}
.btn-logout:hover { color: var(--danger); }

/* ======================================================
   TOPBAR
   ====================================================== */
.topbar {
    height: var(--topbar-h);
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0; z-index: 900;
    gap: 1rem;
}

.sidebar-toggle {
    color: var(--text-muted);
    font-size: 1.4rem;
    padding: 0;
    border: none;
    background: none;
    transition: color .2s;
}
.sidebar-toggle:hover { color: var(--pink); }

.topbar-title { font-weight: 600; font-size: .95rem; color: var(--text-main); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }

/* ======================================================
   CONTEÚDO PRINCIPAL
   ====================================================== */
#content { margin-left: var(--sidebar-width); transition: margin-left .25s ease; }
#content.expanded { margin-left: 68px; }

.main-content { padding: 1.75rem; }

/* ======================================================
   CARDS
   ====================================================== */
.card {
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--card-border);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--text-main);
}

/* ======================================================
   STAT CARDS
   ====================================================== */
.stat-card {
    border-radius: 14px;
    padding: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(233,30,140,.15); }

.stat-icon {
    width: 54px; height: 54px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-icon.purple { background: rgba(171,71,188,.15); color: #ce93d8; border: 1px solid rgba(171,71,188,.3); }
.stat-icon.blue   { background: rgba(41,182,246,.15); color: #81d4fa; border: 1px solid rgba(41,182,246,.3); }
.stat-icon.green  { background: rgba(0,230,118,.15);  color: #69f0ae; border: 1px solid rgba(0,230,118,.3); }
.stat-icon.orange { background: rgba(255,171,64,.15); color: #ffcc80; border: 1px solid rgba(255,171,64,.3); }
.stat-icon.pink   { background: rgba(233,30,140,.15); color: #f48fb1; border: 1px solid rgba(233,30,140,.3); }

.stat-label { color: var(--text-muted); font-size: .78rem; font-weight: 500; margin-bottom: .25rem; }
.stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1; color: var(--text-main); }
.stat-sub   { font-size: .73rem; color: var(--text-muted); margin-top: .3rem; }

/* ======================================================
   PRODUCT GRID
   ====================================================== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }

.product-card {
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--card-bg);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(233,30,140,.2);
    border-color: rgba(233,30,140,.4);
}

.product-card .img-wrapper {
    width: 100%; height: 160px;
    overflow: hidden;
    background: var(--sidebar-dark);
    display: flex; align-items: center; justify-content: center;
}
.product-card .img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.product-card .img-wrapper .no-img { font-size: 3rem; color: var(--text-muted); opacity: .3; }

.product-card .card-body { padding: 1rem; }
.product-card .product-name { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; color: var(--text-main); }
.product-card .product-price {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700; font-size: 1rem;
}
.product-card .product-qty   { font-size: .8rem; color: var(--text-muted); }
.product-card .product-qty.low { color: var(--warning); font-weight: 600; }

.product-actions { display: flex; gap: .4rem; margin-top: .75rem; }
.product-actions .btn { flex: 1; font-size: .78rem; padding: .35rem .5rem; }

/* ======================================================
   TABELAS
   ====================================================== */
.table {
    font-size: .86rem;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.02);
    --bs-table-hover-bg: rgba(233,30,140,.05);
    color: #ffffff;
}
.table th {
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--card-border) !important;
    border-top: none;
}
.table td { vertical-align: middle; border-color: var(--card-border); color: #ffffff; }
.table tbody tr:hover { background: rgba(233,30,140,.04); }

/* ======================================================
   FORMS
   ====================================================== */
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .35rem; color: var(--text-main); }

.form-control, .form-select {
    background: var(--sidebar-dark);
    border: 1px solid var(--card-border);
    color: var(--text-main);
    border-radius: 8px;
    font-size: .9rem;
}
.form-control:focus, .form-select:focus {
    background: var(--sidebar-dark);
    color: var(--text-main);
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(233,30,140,.15);
}
.form-control::placeholder { color: var(--text-muted); }
.form-select option { background: #0f0f24; color: var(--text-main); }

.input-group-text {
    background: var(--sidebar-dark);
    border-color: var(--card-border);
    color: var(--text-muted);
}

/* ======================================================
   BOTÕES
   ====================================================== */
.btn { border-radius: 8px; font-weight: 500; }

.btn-primary {
    background: var(--gradient);
    border: none;
    color: #fff;
}
.btn-primary:hover {
    background: var(--gradient-h);
    border: none;
    color: #fff;
    box-shadow: 0 4px 15px rgba(233,30,140,.4);
    transform: translateY(-1px);
}

.btn-success { background: rgba(0,230,118,.15); border: 1px solid rgba(0,230,118,.4); color: #69f0ae; }
.btn-success:hover { background: rgba(0,230,118,.25); color: #69f0ae; border-color: #00e676; }

.btn-outline-primary { border-color: var(--pink); color: var(--pink); }
.btn-outline-primary:hover { background: rgba(233,30,140,.12); border-color: var(--pink); color: var(--pink-light); }

.btn-outline-secondary { border-color: var(--card-border); color: var(--text-muted); }
.btn-outline-secondary:hover { background: rgba(255,255,255,.05); color: var(--text-main); border-color: var(--text-muted); }

.btn-outline-danger { border-color: rgba(255,82,82,.4); color: var(--danger); }
.btn-outline-danger:hover { background: rgba(255,82,82,.1); color: var(--danger); }

.btn-outline-warning { border-color: rgba(255,171,64,.4); color: var(--warning); }
.btn-outline-warning:hover { background: rgba(255,171,64,.1); color: var(--warning); }

.btn-secondary { background: #1e1e3a; border-color: var(--card-border); color: var(--text-muted); }
.btn-secondary:hover { background: #252545; color: var(--text-main); }

/* ======================================================
   MODAIS
   ====================================================== */
.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    color: var(--text-main);
}
.modal-header {
    border-bottom: 1px solid var(--card-border);
    padding: 1.25rem 1.5rem;
}
.modal-footer {
    border-top: 1px solid var(--card-border);
    padding: 1rem 1.5rem;
}
.modal-title { font-weight: 700; color: var(--text-main); }
.btn-close { filter: invert(1) opacity(.5); }
.btn-close:hover { filter: invert(1) opacity(1); }

.modal-backdrop { background: rgba(7,7,18,.8); }

/* ======================================================
   QR CODE MODAL
   ====================================================== */
.qr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
}
.qr-wrapper img {
    width: 220px; height: 220px;
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
}
#pixQrCanvas { width: 220px; height: 220px; }

.copia-cola-box {
    background: var(--sidebar-dark);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .72rem;
    word-break: break-all;
    font-family: monospace;
    max-height: 80px;
    overflow-y: auto;
    width: 100%;
    color: var(--cyan);
}

.status-badge-pay {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .9rem;
    width: 100%;
}
.status-badge-pay.pending {
    background: rgba(255,171,64,.08);
    color: var(--warning);
    border: 1px solid rgba(255,171,64,.3);
}
.status-badge-pay.paid {
    background: rgba(0,230,118,.08);
    color: var(--success);
    border: 1px solid rgba(0,230,118,.3);
}

/* ======================================================
   ALERTS
   ====================================================== */
.alert { border-radius: 10px; font-size: .875rem; }
.alert-success {
    background: rgba(0,230,118,.08);
    border-color: rgba(0,230,118,.3);
    color: #69f0ae;
}
.alert-danger {
    background: rgba(255,82,82,.08);
    border-color: rgba(255,82,82,.3);
    color: #ff8a80;
}
.alert-warning {
    background: rgba(255,171,64,.08);
    border-color: rgba(255,171,64,.3);
    color: var(--warning);
}

/* ======================================================
   BADGES
   ====================================================== */
.badge.bg-success  { background: rgba(0,230,118,.2) !important;  color: #69f0ae !important; }
.badge.bg-danger   { background: rgba(255,82,82,.2) !important;  color: #ff8a80 !important; }
.badge.bg-warning  { background: rgba(255,171,64,.2) !important; color: var(--warning) !important; }
.badge.bg-primary  { background: rgba(233,30,140,.2) !important; color: var(--pink-light) !important; }
.badge.bg-secondary{ background: rgba(107,107,154,.2) !important;color: var(--text-muted) !important; }

/* ======================================================
   STOCK INDICATORS
   ====================================================== */
.stock-ok   { color: var(--success); }
.stock-low  { color: var(--warning); }
.stock-zero { color: var(--danger); }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-warning { color: var(--warning) !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-primary { color: var(--pink) !important; }

/* ======================================================
   IMAGE PREVIEW
   ====================================================== */
#imgPreview {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: none;
    border-radius: 8px;
    margin-top: .5rem;
    border: 1px solid var(--card-border);
    padding: 4px;
    background: var(--sidebar-dark);
}

/* ======================================================
   LIST GROUP
   ====================================================== */
.list-group-item {
    background: transparent;
    border-color: var(--card-border);
    color: var(--text-main);
}
.list-group-item:hover { background: rgba(255,255,255,.02); }

/* ======================================================
   LOGIN PAGE
   ====================================================== */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--body-bg);
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho no background do login */
.login-wrapper::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(233,30,140,.12) 0%, transparent 70%);
    top: -100px; left: -100px;
    pointer-events: none;
}
.login-wrapper::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(41,182,246,.1) 0%, transparent 70%);
    bottom: -100px; right: -100px;
    pointer-events: none;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(233,30,140,.08);
    position: relative;
    z-index: 1;
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}
.login-logo img {
    height: 80px;
    width: auto;
    background: #fff;
    border-radius: 16px;
    padding: 8px 20px;
    box-shadow: 0 0 30px rgba(233,30,140,.3), 0 0 60px rgba(41,182,246,.15), 0 4px 20px rgba(0,0,0,.5);
    margin-bottom: 1rem;
}
.login-logo p {
    color: var(--text-muted);
    font-size: .82rem;
    margin: 0;
}

/* ======================================================
   MOVIMENTAÇÃO — linha colorida
   ====================================================== */
.mov-entrada td:first-child { border-left: 3px solid var(--success) !important; }
.mov-saida   td:first-child { border-left: 3px solid var(--danger)  !important; }

/* ======================================================
   SCROLLBAR
   ====================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pink); }

/* ======================================================
   GRADIENT TEXT UTILITY
   ====================================================== */
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ======================================================
   GLOW EFFECTS
   ====================================================== */
.glow-pink { box-shadow: 0 0 15px rgba(233,30,140,.3); }
.glow-cyan { box-shadow: 0 0 15px rgba(41,182,246,.3); }

/* ======================================================
   CHART CONTAINER
   ====================================================== */
canvas { max-height: 280px; }

/* ======================================================
   DATATABLES DARK
   ====================================================== */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--sidebar-dark);
    border: 1px solid var(--card-border);
    color: var(--text-main);
    border-radius: 6px;
    padding: .25rem .5rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--text-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-muted) !important;
    border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(233,30,140,.1) !important;
    border-color: transparent !important;
    color: var(--pink) !important;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 768px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.5); }
    #content { margin-left: 0 !important; }
    .main-content { padding: 1rem; }
}

/* ======================================================
   UTILITIES
   ====================================================== */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.text-sm { font-size: .82rem; }
.bg-card  { background: var(--card-bg) !important; }
.border-card { border-color: var(--card-border) !important; }