/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-color) 100%);
    color: #ffffff;
    border: 1px solid var(--primary-dark);
    padding: 8px 18px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(79,70,229,.15), inset 0 1px 0 rgba(255,255,255,.2);
    cursor: pointer;
    transition: all .28s cubic-bezier(.4,0,.2,1);
}

.btn-primary:hover {
    background: linear-gradient(180deg, var(--primary-light) -20%, var(--primary-color) 80%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(79,70,229,.35), 0 4px 8px -2px rgba(79,70,229,.2), inset 0 1px 0 rgba(255,255,255,.3);
}

.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(79,70,229,.2), inset 0 2px 4px rgba(0,0,0,.1); }

.btn-secondary {
    background: var(--dark-secondary);
    color: #ffffff;
    border: 1px solid black;
    padding: 8px 18px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    cursor: pointer;
    transition: all .28s cubic-bezier(.4,0,.2,1);
}

.btn-secondary:hover {
    background: rgba(0,0,0,.1);
    color: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(15,23,42,.08), 0 3px 6px -1px rgba(15,23,42,.04);
}

.btn-secondary:active { transform: translateY(0); background: #e2e8f0; box-shadow: inset 0 2px 4px rgba(15,23,42,.06); }

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transition: all .3s ease;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(79,70,229,.2);
}

.btn-action { padding: .4rem 1.2rem; border-radius: 8px; font-weight: 500; transition: all .3s ease; font-size: .8rem; }

/* ============================================================
   TABLE ACTION ICON BUTTONS (toolbar: excel / pdf / print)
   ============================================================ */
.table-actions-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0.8rem;
    padding: .4rem 0;
}

.table-actions-buttons { display: flex; gap: 8px; align-items: center; }

.table-action-icon-btn {
    position: relative;
    width: 38px; height: 38px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    overflow: hidden;
}

.table-action-icon-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity .3s ease;
}

.table-action-icon-btn svg {
    position: relative; z-index: 1;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.table-action-icon-btn:hover svg { transform: scale(1.1); }

/* Variants */
.table-action-icon-btn.excel  { color: #10b981; border-color: #d1fae5; }
.table-action-icon-btn.excel:hover  { background: linear-gradient(135deg,#10b981,#059669); border-color: #10b981; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16,185,129,.35), 0 0 0 4px rgba(16,185,129,.1); }

.table-action-icon-btn.pdf   { color: #ef4444; border-color: #fee2e2; }
.table-action-icon-btn.pdf:hover   { background: linear-gradient(135deg,#ef4444,#dc2626); border-color: #ef4444; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(239,68,68,.35), 0 0 0 4px rgba(239,68,68,.1); }

.table-action-icon-btn.print { color: #64748b; border-color: #e2e8f0; }
.table-action-icon-btn.print:hover { background: linear-gradient(135deg,#64748b,#475569); border-color: #64748b; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(100,116,139,.35), 0 0 0 4px rgba(100,116,139,.1); }

.table-action-icon-btn.details { color: #0ea5e9; border-color: #bae6fd; }
.table-action-icon-btn.details:hover { background: linear-gradient(135deg,#0ea5e9,#0284c7); border-color: #0ea5e9; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(14,165,233,.35), 0 0 0 4px rgba(14,165,233,.1); }

.table-action-icon-btn.cupom { color: #6366f1; border-color: #c7d2fe; }
.table-action-icon-btn.cupom:hover { background: linear-gradient(135deg,#6366f1,#4f46e5); border-color: #6366f1; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(99,102,241,.35), 0 0 0 4px rgba(99,102,241,.1); }

.table-action-icon-btn.a4 { color: #10b981; border-color: #bbf7d0; }
.table-action-icon-btn.a4:hover { background: linear-gradient(135deg,#10b981,#059669); border-color: #10b981; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16,185,129,.35), 0 0 0 4px rgba(16,185,129,.1); }

.table-action-icon-btn.edit  { color: #f59e0b; border-color: #fde68a; }
.table-action-icon-btn.edit:hover  { background: linear-gradient(135deg,#f59e0b,#d97706); border-color: #f59e0b; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(245,158,11,.35), 0 0 0 4px rgba(245,158,11,.1); }

.table-action-icon-btn.delete { color: #ef4444; border-color: #fecaca; }
.table-action-icon-btn.delete:hover { background: linear-gradient(135deg,#ef4444,#dc2626); border-color: #ef4444; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(239,68,68,.35), 0 0 0 4px rgba(239,68,68,.1); }

/* Tooltip via ::after */
.table-action-icon-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) scale(.8);
    padding: 5px 10px;
    background: #1e293b; color: #fff;
    font-size: 11px; font-weight: 500;
    border-radius: 5px; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 1000;
}

.table-action-icon-btn:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
.table-action-icon-btn:active { transform: translateY(-1px); }

/* Vendas action buttons row */
.venda-action-buttons { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 576px) { .venda-action-buttons { gap: 6px; } }

/* ============================================================
   SMALL ICON ACTION BUTTONS (table row: edit / delete / etc.)
   ============================================================ */
.action-icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    padding: 0; margin: 0 2px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    text-decoration: none;
}

.action-icon-btn svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.action-icon-btn:hover svg { transform: scale(1.15); }
.action-icon-btn:active { transform: translateY(0); }

.action-icon-btn.edit   { color: #3b82f6; border-color: #dbeafe; }
.action-icon-btn.edit:hover   { background: linear-gradient(135deg,#3b82f6,#2563eb); border-color: #3b82f6; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59,130,246,.35), 0 0 0 3px rgba(59,130,246,.1); }

.action-icon-btn.delete { color: #ef4444; border-color: #fee2e2; }
.action-icon-btn.delete:hover { background: linear-gradient(135deg,#ef4444,#dc2626); border-color: #ef4444; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(239,68,68,.35), 0 0 0 3px rgba(239,68,68,.1); }

.action-icon-btn.view   { color: #0ea5e9; border-color: #bae6fd; }
.action-icon-btn.view:hover   { background: linear-gradient(135deg,#0ea5e9,#0284c7); border-color: #0ea5e9; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(14,165,233,.35), 0 0 0 3px rgba(14,165,233,.1); }

.action-icon-btn.success { color: #10b981; border-color: #d1fae5; }
.action-icon-btn.success:hover { background: linear-gradient(135deg,#10b981,#059669); border-color: #10b981; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,185,129,.35), 0 0 0 3px rgba(16,185,129,.1); }

.action-icon-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) scale(.8);
    padding: 4px 10px;
    background: #1e293b; color: #fff;
    font-size: 11px; font-weight: 500;
    border-radius: 4px; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    z-index: 1000;
}

.action-icon-btn:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.whatsapp-floating-btn {
    position: fixed;
    bottom: 16px;
    left: auto;
    right: 16px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #25d366 0%, #20c55f 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    z-index: 1200;
    border: none;
    animation: slideInUp 0.5s ease-out;
}

.app-body .whatsapp-floating-btn {
    left: auto;
    right: 16px;
}

.app-body .app-sidebar.sb-collapsed ~ .whatsapp-floating-btn {
    left: auto;
    right: 16px;
}

.whatsapp-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    background: linear-gradient(135deg, #20c55f 0%, #1ab350 100%);
    text-decoration: none;
    color: white;
}

.whatsapp-floating-btn:active {
    transform: scale(0.95);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991px) {
    .app-body .whatsapp-floating-btn {
        left: auto;
        right: 14px;
    }
}

@media (max-width: 480px) {
    .whatsapp-floating-btn {
        bottom: 12px;
        left: auto;
        right: 12px;
        width: 48px;
        height: 48px;
    }

    .whatsapp-floating-btn img {
        width: 20px;
        height: 20px;
    }
}