@import url('https://fonts.googleapis.com/css2?family=Sora:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');
@import url('sidebar.css');

:root{
  --kpi-blue:linear-gradient(135deg, #2F5BFF, #3FA9F5);
  --kpi-green:linear-gradient(135deg, #12945F, #3DDC8C);
  --kpi-purple:linear-gradient(135deg, #5B32E0, #A65BFF);
  --kpi-orange:linear-gradient(135deg, #E2552E, #F2A83B);
  --chart-1:#3B6CFF; --chart-2:#3DDC8C; --chart-3:#9B4DFF; --chart-4:#F2A83B;
  --chart-5:#4FD3E8; --chart-6:#F25FA8; --chart-7:#C8D04A; --chart-8:#E24B4A;
  --chart-none:#6B7194;
  --chart-ok:#3DDC8C; --chart-warn:#F2A83B; --chart-bad:#E24B4A;
  --chart-line:#4FD3E8; --chart-today:#F3F4FB; --chart-grid:rgba(255,255,255,0.07);
  --chart-pay:#E24B4A; --chart-rec:#3DDC8C;
  --chart-track:rgba(255,255,255,0.06);
}

h1{ font-family:'Sora'; font-weight:800; font-size:22px; margin:0; overflow-wrap:anywhere; }
h2{ font-family:'Sora'; font-size:15px; margin:0 0 12px; }
.top{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.when{ color:var(--muted); font-size:13px; }
/* Loja ativa no cabeçalho de toda tela (sidebar.js): linha própria acima do título. */
.store-tag{ order:-1; flex:1 1 100%; margin-bottom:-6px; font-size:12px; color:var(--cyan); font-weight:600; letter-spacing:.02em; overflow-wrap:anywhere; }
.store-tag::before{ content:'Loja: '; color:var(--muted); font-weight:500; }
.store-list{ display:flex; flex-direction:column; gap:8px; }
.store-option{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--text); font-weight:500; }
.store-option:hover, .store-option:focus-visible{ border-color:var(--purple); }
.store-option.current{ border-color:var(--purple); background:rgba(155,77,255,0.16); }
.store-option-name{ font-weight:600; overflow-wrap:anywhere; }
.store-option-meta{ font-size:11.5px; color:var(--muted); }
.receipt-store{ text-align:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px dashed var(--border); overflow-wrap:anywhere; }
.receipt-store-name{ font-family:'Sora'; font-weight:800; font-size:15px; }
.field{ margin-bottom:10px; flex:1 1 180px; min-width:0; }
.field label{ font-size:11.5px; color:var(--muted); display:block; margin-bottom:4px; }
.field input,.field select{ width:100%; min-height:44px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:7px; padding:9px 11px; color:var(--text); font-size:13.5px; font-family:inherit; }
.field select option{ background:#0C1024; color:var(--text); }
.field-row{ display:flex; gap:10px; flex-wrap:wrap; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:16px; min-width:0; }
.meta{ color:var(--muted); font-size:12px; }
.mono{ font-family:'JetBrains Mono'; color:var(--cyan); }
.err{ color:var(--red); font-size:12px; margin-top:8px; }
.hidden{ display:none !important; }
.table-wrap{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
button{ min-height:44px; padding:9px 16px; border-radius:7px; border:none; background:var(--grad); color:#fff; font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; }
button.ghost{ background:transparent; border:1px solid var(--border); color:var(--text); }
button.danger{ background:var(--red); color:#fff; }
button:disabled{ opacity:.5; cursor:not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.field textarea{ width:100%; min-height:72px; resize:vertical; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:7px; padding:9px 11px; color:var(--text); font-size:13.5px; font-family:inherit; box-sizing:border-box; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--purple); }
.field input:disabled,.field select:disabled,.field textarea:disabled{ opacity:.7; }
.ok-msg{ color:var(--green); font-size:12px; margin-top:8px; }
.warn-msg{ color:var(--amber); font-size:12px; margin-top:8px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:12px; }
img, svg, canvas{ max-width:100%; }

/* ----- Modal único (modal.js): centralizado, fundo escurecido, cabeçalho e rodapé fixos ----- */
.modal-backdrop{
  position:fixed; inset:0; z-index:100; background:rgba(3,4,10,0.66);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
/* Sem zoom de TV: 480/720/960 são pixels reais em qualquer tela. */
.modal{
  width:100%; max-height:90dvh; display:flex; flex-direction:column;
  background:#0C1024; border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.55);
  outline:none;
}
.modal-confirm{ max-width:480px; }
.modal-form{ max-width:720px; }
.modal-detail{ max-width:960px; }
.modal-head{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 12px 22px; border-bottom:1px solid var(--border-soft); }
.modal-title{ font-size:17px; margin:0; overflow-wrap:anywhere; }
.modal-close{ flex:none; width:44px; height:44px; padding:0; background:transparent; border:1px solid transparent; color:var(--muted); font-size:26px; line-height:1; }
.modal-close:hover, .modal-close:focus-visible{ color:var(--text); border-color:var(--border); }
.modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:18px 22px; overscroll-behavior:contain; }
.modal-error{ flex:none; margin:0; padding:8px 22px; }
.modal-foot{ flex:none; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:12px 22px 16px; border-top:1px solid var(--border-soft); }
.modal-text{ margin:0; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; }
.modal-section{ margin-bottom:18px; }
.modal-section h3{ font-family:'Sora'; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px; }
.kv{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:10px 18px; }
.kv div{ min-width:0; overflow-wrap:anywhere; }
.kv span{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:2px; }
@media (max-width:599px){
  .modal-backdrop{ padding:8px; }
  .modal{ max-height:calc(100dvh - 16px); border-radius:12px; }
  .modal-body{ padding:14px; }
  .modal-head{ padding:8px 8px 8px 14px; }
  .modal-foot{ padding:10px 14px 12px; }
  .modal-foot button{ flex:1 1 0; }
  .modal-error{ padding:8px 14px; }
}

/* Telas inteiras de preenchimento (login): cartão no centro da página. */
.center-screen{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:16px; }
.center-card{ zoom:var(--tv); width:100%; max-width:400px; }

/* ----- Formulário de cliente/fornecedor (customer-form.js) ----- */
.cf-section{ margin-bottom:18px; }
.cf-section h3{ font-family:'Sora'; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px; }
.cf-kind{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.cf-kind button{ flex:1 1 120px; background:transparent; border:1px solid var(--border); color:var(--muted); font-weight:500; }
.cf-kind button[aria-pressed="true"]{ background:rgba(155,77,255,0.18); border-color:var(--purple); color:var(--text); font-weight:600; }
.cf-phone{ display:flex; gap:8px; margin-bottom:8px; }
.cf-phone input{ flex:1; min-width:0; min-height:44px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:7px; padding:9px 11px; color:var(--text); font-size:13.5px; font-family:inherit; }
.cf-remove{ background:transparent; border:1px solid var(--border); color:var(--red); padding:0; width:44px; flex-shrink:0; }
.cf-add{ background:transparent; border:1px dashed var(--border); color:var(--muted); width:100%; font-weight:500; }
.cf-add:hover, .cf-add:focus-visible{ color:var(--text); border-color:var(--purple); }
.cf-cep-status{ font-size:11.5px; color:var(--muted); margin:-4px 0 8px; min-height:14px; }
.cf-cep-status.ok{ color:var(--green); }
.cf-cep-status.err{ color:var(--red); }
.cf-lookup{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-2px 0 12px; }
.cf-lookup-status{ flex:1 1 180px; min-width:0; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.cf-lookup-status.ok{ color:var(--green); }
.cf-lookup-status.err{ color:var(--red); }
.cf-banner{ margin:0 0 12px; padding:10px 12px; border:1px solid rgba(242,168,59,.55); background:rgba(242,168,59,.12); color:var(--amber); border-radius:8px; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.cf-src{ display:inline-block; margin-left:6px; padding:0 6px; border:1px solid rgba(79,211,232,.35); border-radius:999px; color:var(--cyan); font-size:10.5px; font-weight:500; vertical-align:middle; white-space:nowrap; }
.cf-phone .cf-src{ align-self:center; margin-left:0; }
.cf-suggest{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 4px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.cf-suggest > span{ flex:1 1 160px; min-width:0; }
.cf-suggest strong{ color:var(--text); font-weight:600; }
input[aria-invalid="true"]{ border-color:var(--red) !important; }
.cf-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.tag-off{ display:inline-block; font-size:11px; color:var(--amber); border:1px solid rgba(242,168,59,.4); border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:middle; }
.tag-sys{ display:inline-block; font-size:11px; color:var(--cyan); border:1px solid rgba(79,211,232,.4); border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:middle; }

/* ----- Quadros com rolagem horizontal própria (kanban de OS, PDV) ----- */
.board-scroll{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:12px; min-width:0; }
@media (min-width:1024px){ .kanban{ grid-auto-columns:minmax(160px, 1fr); } }

/* ----- Tabelas: viram cartões empilhados no celular (rótulos preenchidos pelo sidebar.js) ----- */
table{ max-width:100%; }
@media (max-width:599px){
  table:not(.no-cards), table:not(.no-cards) tbody{ display:block; width:100%; }
  table:not(.no-cards) thead{ display:none; }
  table:not(.no-cards) tr{ display:block; border:1px solid var(--border); border-radius:12px; padding:8px 12px; margin:0 0 10px; background:var(--surface); }
  table:not(.no-cards) td{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0 !important; border:none !important; text-align:right !important; min-width:0; overflow-wrap:anywhere; }
  table:not(.no-cards) td[data-label]::before{ content:attr(data-label); color:var(--muted); font-size:12px; text-align:left; flex:none; max-width:45%; }
  table:not(.no-cards) td[colspan]{ justify-content:center; text-align:center !important; }
  .table-wrap{ border:none; background:transparent; overflow:visible; }
  .field input, .field select, .field textarea, .cf-phone input, input, select, textarea{ font-size:16px; }
}

.sidebar:not(.ready) .sidebar-nav,
.sidebar:not(.ready) .sidebar-user{ visibility:hidden; }

@media print{
  .sidebar, .topbar, .sidebar-scrim, .modal-backdrop{ display:none !important; }
  .page, .modal{ zoom:1; }
}