/* ============================================================
   YELLOWSHOP — Loja física de motos elétricas
   Estilo isolado (acento VERDE) que convive com o tema v3.
   Carregar DEPOIS de theme-override.css.
   ============================================================ */

/* acento da YellowShop em AMARELO (mantém os nomes de variável por compatibilidade) */
:root{ --ys-green:#f5b400; --ys-green-2:#d99a00; --ys-green-dim:rgba(245,180,0,.14); }

/* ---------- SELETOR DE EMPRESA (topo da sidebar) ---------- */
.ys-company-switch{ display:flex; gap:5px; padding:6px 4px; margin:2px 2px 8px; }
.ys-company-btn{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 5px; border-radius:9px; font-size:10px; font-weight:800; cursor:pointer;
  border:1px solid rgba(0,0,0,.28); background:rgba(0,0,0,.08); color:#2a2a2a;
  transition:.15s; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.1px; }
.ys-company-btn:hover{ color:#000; background:rgba(0,0,0,.15); }
.ys-company-btn .dot{ width:11px; height:11px; border-radius:4px; display:inline-block; flex:0 0 11px; }
.ys-company-btn.box .dot{ background:linear-gradient(135deg,#ffd24a,#f5b400); }
.ys-company-btn.shop .dot{ background:linear-gradient(135deg,#f5b400,#d99a00); }
.ys-company-btn.active.box{ border-color:#161616; color:#ffd24a; background:#161616; }
.ys-company-btn.active.shop{ border-color:#161616; color:#ffd24a; background:#161616; }
/* sidebar recolhida: esconde texto, deixa só os pontinhos */
.sidebar.collapsed .ys-company-switch{ flex-direction:column; gap:6px; padding:6px 4px; }
.sidebar.collapsed .ys-company-btn{ font-size:0; padding:7px; }
.sidebar.collapsed .ys-company-btn .dot{ margin:0; }

/* ---------- MOSTRAR/ESCONDER grupos de menu por empresa ----------
   No modo YellowShop escondemos TUDO que não for do YellowShop (.ys-nav),
   inclusive itens que a YellowBox injeta dinamicamente depois (Insumos,
   Contas a pagar/receber, Estoque FULL, etc.). */
body.company-shop .sidebar-nav .nav-item:not(.ys-nav),
body.company-shop .sidebar-nav .nav-section-label:not(.ys-nav){ display:none !important; }
body:not(.company-shop) .sidebar-nav .ys-nav{ display:none !important; }
/* botões do topo específicos da YellowBox (ML) somem na YellowShop */
body.company-shop .yb-topbar-only{ display:none !important; }
body:not(.company-shop) .ys-topbar-only{ display:none !important; }
body.company-shop .topbar .badge-live,
body.company-shop .topbar .btn-add-vendor,
body.company-shop .topbar .yb-topbar-add-vendor,
body.company-shop .topbar .ys-ml-hide{ display:none !important; }

/* ---------- NAV da YellowShop (acento verde) ---------- */
.sidebar-nav .nav-item.ys-nav.active{
  background:linear-gradient(135deg,#ffd24a,var(--ys-green)) !important;
  color:#111 !important; box-shadow:0 4px 14px rgba(245,180,0,.35) !important; }
.sidebar-nav .nav-item.ys-nav.active .nav-icon{ color:#111 !important; }

/* ---------- PÁGINAS YELLOWSHOP ---------- */
.ys-page .yb-card-icon{ color:var(--ys-green) !important; border-color:rgba(52,211,153,.3) !important; background:var(--ys-green-dim) !important; }
.ys-page .metric-card{ border-left:2px solid var(--ys-green) !important; }
.ys-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-size:11px; font-weight:800; background:var(--ys-green-dim); color:var(--ys-green); border:1px solid rgba(52,211,153,.3); }

/* KPIs compactos (grid próprio) */
#ysMetricsGrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:12px; }
#ysMetricsGrid .metric-card{ min-height:0; padding:12px 14px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left;
  background:linear-gradient(160deg,var(--yb-panel-2),var(--yb-panel)); border:1px solid var(--yb-line); border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.28); }
#ysMetricsGrid .metric-label{ display:flex; flex-direction:row; align-items:center; gap:8px; margin:0 0 6px; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:800; color:var(--yb-mut); }
#ysMetricsGrid .metric-value{ font-size:21px; font-weight:800; color:#fff; line-height:1.1; }
#ysMetricsGrid .metric-value.metric-lg{ font-size:22px; }
#ysMetricsGrid .metric-sub{ font-size:10.5px; color:var(--yb-mut); margin-top:5px; }
#ysMetricsGrid .yb-card-icon{ width:24px; height:24px; flex:0 0 24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; }
#ysMetricsGrid .yb-card-icon svg{ width:14px; height:14px; }
#ysMetricsGrid .snapshot-badge{ margin-top:7px; align-self:flex-start; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800;
  background:var(--ys-green-dim); color:var(--ys-green); border:1px solid rgba(52,211,153,.3); }

/* linha de custos da empresa */
.ys-cost-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:14px; }
.ys-cost{ background:linear-gradient(160deg,var(--yb-panel-2),var(--yb-panel)); border:1px solid var(--yb-line);
  border-left:2px solid var(--ys-green); padding:11px 13px; border-radius:10px; }
.ys-cost .lbl{ font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--yb-mut); }
.ys-cost .val{ font-size:17px; font-weight:800; color:#fff; margin-top:3px; }
.ys-cost .sub{ font-size:9.5px; color:var(--yb-mut); margin-top:2px; }
.ys-cost.total{ border-left-color:var(--ys-green); } .ys-cost.total .val{ color:var(--ys-green); }

/* ---------- BARRA DE AÇÕES / TOOLBAR ---------- */
.ys-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.ys-toolbar .ys-search{ flex:1; min-width:180px; }
.ys-btn{ border:none; border-radius:8px; font-weight:800; font-size:12.5px; padding:9px 15px; cursor:pointer; transition:.15s; }
.ys-btn-green{ background:linear-gradient(135deg,#ffd24a,var(--ys-green)); color:#111; box-shadow:0 4px 12px rgba(245,180,0,.3); }
.ys-btn-green:hover{ filter:brightness(1.07); }
.ys-btn-ghost{ background:var(--yb-elev); color:var(--yb-dim); border:1px solid var(--yb-line); }
.ys-btn-ghost:hover{ border-color:var(--ys-green); color:var(--ys-green); }
.ys-btn-sm{ padding:5px 12px; font-size:11.5px; border-radius:7px; }
.ys-btn-danger{ background:rgba(248,113,113,.14); color:var(--yb-red); border:1px solid rgba(248,113,113,.3); }

/* ---------- TABELAS ---------- */
.ys-table-wrap{ border:1px solid var(--yb-line); border-radius:10px; overflow:hidden; }
.ys-table{ width:100%; border-collapse:collapse; }
.ys-table th{ background:var(--yb-panel-2); text-transform:uppercase; font-size:10px; color:var(--ys-green);
  letter-spacing:.05em; padding:9px 12px; font-weight:800; text-align:left; }
.ys-table td{ padding:8px 12px; font-size:12.5px; border-bottom:1px solid var(--yb-line); color:var(--yb-tx); }
.ys-table tbody tr:hover td{ background:rgba(52,211,153,.045); }
.ys-table .num{ text-align:right; }
.ys-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800; }
.ys-badge.g{ background:rgba(52,211,153,.14); color:#34d399; }
.ys-badge.y{ background:rgba(245,180,0,.15); color:var(--yb-y2); border:1px solid rgba(245,180,0,.3); }
.ys-badge.gray{ background:rgba(255,255,255,.07); color:var(--yb-dim); }
.ys-badge.r{ background:rgba(248,113,113,.14); color:var(--yb-red); }

/* estado vazio */
.ys-empty{ text-align:center; padding:48px 20px; color:var(--yb-mut); }
.ys-empty svg{ width:46px; height:46px; opacity:.4; margin-bottom:10px; }
.ys-empty h3{ color:var(--yb-tx); font-size:15px; margin:0 0 4px; }
.ys-empty p{ font-size:12.5px; margin:0 0 16px; }

/* ---------- MODAL ---------- */
.ys-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; z-index:9999; padding:40px 16px; overflow-y:auto; }
.ys-modal-overlay.open{ display:flex; }
.ys-modal{ width:100%; max-width:520px; background:linear-gradient(160deg,var(--yb-panel-2),var(--yb-panel));
  border:1px solid var(--yb-line-2); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.ys-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--yb-line); }
.ys-modal-head h3{ margin:0; font-size:15px; font-weight:800; color:#fff; }
.ys-modal-close{ background:none; border:none; color:var(--yb-mut); font-size:22px; cursor:pointer; line-height:1; }
.ys-modal-close:hover{ color:#fff; }
.ys-modal-body{ padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ys-modal-body .full{ grid-column:1 / -1; }
.ys-field label{ display:block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--yb-mut); margin-bottom:5px; }
.ys-field input, .ys-field select, .ys-field textarea{ width:100%; background:#111; border:1px solid var(--yb-line);
  border-radius:8px; color:var(--yb-tx); font-size:13px; padding:9px 11px; }
.ys-field input:focus, .ys-field select:focus, .ys-field textarea:focus{ outline:none; border-color:var(--ys-green); box-shadow:0 0 0 3px rgba(52,211,153,.14); }
.ys-modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 18px; border-top:1px solid var(--yb-line); }

@media (max-width:1180px){
  #ysMetricsGrid{ grid-template-columns:repeat(3,1fr); }
  .ys-cost-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  #ysMetricsGrid{ grid-template-columns:repeat(2,1fr); }
  .ys-cost-grid{ grid-template-columns:repeat(2,1fr); }
  .ys-modal-body{ grid-template-columns:1fr; }
}

/* ---------- INSUMOS — resumo + filtros (estilo YellowBox) ---------- */
.ys-ins-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:4px 0 14px; }
.ys-ins-card{ background:linear-gradient(160deg,var(--yb-panel-2),var(--yb-panel)); border:1px solid var(--yb-line); border-radius:12px; padding:14px 16px; }
.ys-ins-card.accent{ border-color:rgba(245,180,0,.3); background:radial-gradient(circle at top right,rgba(245,180,0,.12),transparent 55%),var(--yb-panel-2); }
.ys-ins-label{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--yb-mut); }
.ys-ins-value{ font-size:21px; font-weight:800; color:#fff; margin-top:6px; }
.ys-ins-sub{ font-size:10.5px; color:var(--yb-mut); margin-top:4px; }
.ys-ins-filter{ display:grid; grid-template-columns:repeat(5,1fr) auto; gap:10px; align-items:end; background:var(--yb-panel); border:1px solid var(--yb-line); border-radius:12px; padding:14px; margin-bottom:14px; }
.ys-ins-field{ display:flex; flex-direction:column; gap:5px; }
.ys-ins-field label{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--yb-mut); }
.ys-ins-field input, .ys-ins-field select{ background:#111; border:1px solid var(--yb-line); border-radius:8px; color:var(--yb-tx); font-size:12.5px; padding:8px 10px; width:100%; }
.ys-ins-field input:focus, .ys-ins-field select:focus{ outline:none; border-color:var(--yb-y); box-shadow:0 0 0 3px rgba(245,180,0,.14); }
@media(max-width:1100px){ .ys-ins-cards{ grid-template-columns:repeat(2,1fr); } .ys-ins-filter{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .ys-ins-cards{ grid-template-columns:1fr; } .ys-ins-filter{ grid-template-columns:1fr; } }