/*--------------------------------------------------------------
# SyncSeller Admin - overrides sobre style.css + theme.css (syncseller)
--------------------------------------------------------------*/

/* ---------- Header / logo ---------- */
.logo .logo-icon { font-size: 28px; color: var(--ss-accent, #00A88B); margin-right: 6px; }
.logo .logo-sub { font-size: 14px; font-weight: 600; color: var(--ss-text-muted, #899bbd); }
.header .theme-toggle-btn { background: none; border: 0; font-size: 20px; color: var(--ss-text-title, #0D1829); padding: 0 12px; }

/* ---------- Sidebar mobile: backdrop + fechar ao tocar fora ---------- */
.sidebar-backdrop { display: none; }
@media (max-width: 1199px) {
  .sidebar { z-index: 1001; top: 60px; }
  .toggle-sidebar .sidebar-backdrop {
    display: block; position: fixed; inset: 60px 0 0 0; z-index: 1000;
    background: rgba(1, 41, 112, .35);
  }
}
@media (max-width: 575.98px) {
  .sidebar { width: 85vw; max-width: 300px; }
}

/* ---------- Página ---------- */
@media (max-width: 575.98px) {
  #main { padding: 16px 12px 90px; }
  .pagetitle h1 { font-size: 20px; }
}
.card-title .badge { vertical-align: middle; }
/* theme.css pinta todo span de .card-title com cor "muted" (subtítulo "| 30 dias"); o badge de contagem é span e ficava ilegível */
.card-title span.badge, html.dark-mode .card-title span.badge { color: #fff !important; font-size: 13px; font-weight: 600; }
.card-title span.badge.text-dark, .card-title span.badge.bg-warning, .card-title span.badge.bg-light { color: #212529 !important; }

/* Bootstrap 5.2 não tem bg-*-subtle (5.3): usados nos ícones de KPI */
.bg-primary-subtle   { background-color: rgba(var(--ss-accent-rgb), .12) !important; }
.bg-success-subtle   { background-color: rgba(25, 135, 84, .12) !important; }
.bg-danger-subtle    { background-color: rgba(220, 53, 69, .12) !important; }
.bg-warning-subtle   { background-color: rgba(255, 193, 7, .16) !important; }
.bg-info-subtle      { background-color: rgba(13, 202, 240, .14) !important; }
.bg-secondary-subtle { background-color: rgba(108, 117, 125, .12) !important; }
.bg-purple-subtle    { background-color: rgba(124, 58, 237, .12) !important; }
.text-purple         { color: #7c3aed !important; }

/* ---------- KPI cards (dashboard + topo das listas) ---------- */
.kpi-card { border: 0; box-shadow: 0 0 20px var(--ss-shadow-card); margin-bottom: 0; height: 100%; }
.kpi-card .card-body { padding: 14px 16px; }
.kpi-card .kpi-icon {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 10px;
}
.kpi-card .kpi-label { font-size: 13px; color: var(--ss-text-muted, #6c757d); line-height: 1.2; }
.kpi-card .kpi-valor { white-space: nowrap; font-family: var(--ss-ff-display); font-weight: 700; font-size: 24px; margin: 8px 0 0; line-height: 1.1; }
.kpi-card .kpi-sub { font-size: 12px; color: var(--ss-text-muted, #6c757d); }
a.kpi-link { text-decoration: none; color: inherit; display: block; height: 100%; }
a.kpi-link:hover .kpi-card { box-shadow: 0 0 24px rgba(var(--ss-accent-rgb), .22); }
@media (max-width: 575.98px) {
  .kpi-card .kpi-valor { font-size: 20px; }
}

.chart-box { position: relative; height: 260px; }
@media (max-width: 575.98px) { .chart-box { height: 220px; } }

/* ---------- Barra de filtros: botão "Filtros" no mobile ---------- */
.filtros-toggle { display: none; }
@media (max-width: 767.98px) {
  .filtros-toggle { display: inline-flex; align-items: center; gap: 4px; }
  .filtros-toggle .bi-chevron-down { transition: transform .2s; }
  .filtros-toggle.aberto .bi-chevron-down { transform: rotate(180deg); }
}
@media (min-width: 768px) {
  .filtros-campos.collapse:not(.show) { display: flex !important; }
}

/* ---------- Grid ---------- */
.admin-grid .table { margin-bottom: 0; }
.admin-grid .table > thead th { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ss-text-title, #0D1829); }
.admin-grid .table > tbody td { vertical-align: middle; font-size: 14px; }
.admin-grid .table td.acoes { width: 1%; white-space: nowrap; text-align: right; }
.admin-grid .btn-acoes { border: 0; background: none; padding: 2px 8px; font-size: 18px; color: var(--ss-text-sub, #51678f); }
.admin-grid .btn-acoes:hover { color: var(--ss-accent, #00A88B); }
.admin-grid .dropdown-menu .dropdown-item i { width: 18px; margin-right: 6px; }
.admin-grid .sub { display: block; font-size: 12px; color: var(--ss-text-muted, #6c757d); }

/* Mobile: cada linha vira um card (td com data-label) */
@media (max-width: 767.98px) {
  .admin-grid.mobile-cards .table-responsive { overflow: visible; }
  .admin-grid.mobile-cards .table thead { display: none; }
  .admin-grid.mobile-cards .table,
  .admin-grid.mobile-cards .table tbody,
  .admin-grid.mobile-cards .table tr,
  .admin-grid.mobile-cards .table td { display: block; width: 100%; }
  .admin-grid.mobile-cards .table tr {
    position: relative; border: 1px solid var(--ss-surface-3, #ebeef4); border-radius: 8px;
    padding: 8px 12px; margin-bottom: 10px; background: var(--ss-surface, #fff);
  }
  .admin-grid.mobile-cards .table td {
    border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right !important;
    box-shadow: none; /* table-hover pinta cada célula (inset) e no toque o :hover fica preso — no card não faz sentido */
  }
  .admin-grid.mobile-cards .table td::before {
    content: attr(data-label); font-weight: 600; font-size: 12px; color: var(--ss-text-muted, #6c757d); text-align: left;
  }
  .admin-grid.mobile-cards .table td[data-label=""]::before,
  .admin-grid.mobile-cards .table td:not([data-label])::before { content: none; }
  .admin-grid.mobile-cards .table td.td-titulo {
    font-weight: 700; font-size: 15px; text-align: left !important; padding-right: 36px; display: block;
  }
  .admin-grid.mobile-cards .table td.acoes { position: absolute; top: 6px; right: 4px; width: auto; padding: 0; }
  .admin-grid.mobile-cards .table td.d-none.d-md-table-cell { display: none !important; }
  .admin-grid.mobile-cards .table tr.linha-vazia td { display: block; text-align: center !important; }
}

/* ---------- Offcanvas (padrão de edição/detalhe do admin, como no syncseller) ----------
   Estrutura: .offcanvas.offcanvas-end[style="width: 560px; max-width: 100%;"]
     > .offcanvas-header.border-bottom (h5.offcanvas-title + .btn-close[data-bs-dismiss=offcanvas])
     > form.offcanvas-form > .offcanvas-body + .offcanvas-footer   (ou .offcanvas-body + .offcanvas-footer sem form)
   Sub-painel aberto por cima de outro: classe .offcanvas-stack (z-index tratado em admin.js). */
.offcanvas .offcanvas-title { font-family: var(--ss-ff-display); font-weight: 700; color: var(--ss-text-title, #0D1829); }
.offcanvas .offcanvas-title i { margin-right: 6px; }
.offcanvas form.offcanvas-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.offcanvas form.offcanvas-form > .offcanvas-body { flex: 1 1 auto; overflow-y: auto; }
.offcanvas .offcanvas-footer { flex-shrink: 0; background: var(--ss-surface, #fff); }
.offcanvas.offcanvas-stack { --bs-offcanvas-zindex: 1058; }
body .swal2-container { z-index: 1085; }

/* Identificador da linha clicável (abre a edição) */
.link-editar { color: var(--ss-text-title, #0D1829); font-weight: 600; text-decoration: none; cursor: pointer; }
.link-editar:hover { color: var(--ss-accent, #00A88B); text-decoration: underline; }

/* ---------- Modais ---------- */
.modal-header .modal-title { font-family: var(--ss-ff-display); font-weight: 700; color: var(--ss-text-title, #0D1829); }
.modal-header .modal-title i { margin-right: 6px; }

/* ---------- Abas ---------- */
.nav-tabs-bordered .nav-link { font-weight: 600; }
@media (max-width: 767.98px) {
  .nav-tabs.nav-tabs-scroll { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  .nav-tabs.nav-tabs-scroll .nav-link { white-space: nowrap; }
}

/* ---------- FAB: alinhado à linha do título (não cobre os cards ao carregar) ---------- */
.fab-container-fixed { top: 76px; }
.pagetitle { padding-right: 140px; min-height: 56px; }
@media (max-width: 768px) {
  .fab-container-fixed { top: 70px; }
  .pagetitle { padding-right: 110px; }
}
@media (max-width: 575.98px) {
  .pagetitle .breadcrumb { display: none; }
  .pagetitle { min-height: 48px; display: flex; align-items: center; }
}

/* ---------- Dark mode ---------- */
html.dark-mode .sidebar-backdrop { background: rgba(0, 0, 0, .55); }
html.dark-mode .admin-grid.mobile-cards .table tr { border-color: var(--ss-surface-3); background: var(--ss-surface); }
html.dark-mode .kpi-card { box-shadow: none; }