html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
  .dark ::-webkit-scrollbar-thumb { background: #334155; }

  .kpi-card { transition: transform .15s ease, box-shadow .15s ease; }
  .kpi-card:hover { transform: translateY(-2px); }

  .chip { display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .7rem; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.02em; }
  .chip-sep { opacity:.4; font-weight:400; }
  .chip-qty { font-family:'JetBrains Mono',monospace; font-weight:600; opacity:.72; font-size:.72rem; }
  .chip-clickable { cursor:pointer; transition:.12s; border:1px solid transparent; }
  .chip-clickable:hover { filter:brightness(1.15); }
  .chip-clickable.chip-selected { border-color:currentColor; box-shadow:0 0 0 1px currentColor inset; }
  .partner-detail { padding-top:6px; margin-top:2px; border-top:1px dashed rgba(148,163,184,.25); }

  .drop-zone { border: 2px dashed #cbd5e1; transition: all .15s ease; }
  .drop-zone.dragover { border-color: #3357f5; background: #eef3ff; }
  .dark .drop-zone { border-color: #334155; }
  .dark .drop-zone.dragover { border-color: #5c81ff; background: rgba(51,87,245,0.08); }

  .table-wrap { max-height: 560px; overflow: auto; }
  th.sortable { cursor: pointer; user-select: none; }
  th.sortable:hover { background: rgba(51,87,245,0.06); }
  .dark th.sortable:hover { background: rgba(92,129,255,0.1); }
  .sort-arrow { opacity: .35; font-size: .65rem; margin-left: 3px; }
  .sort-arrow.active { opacity: 1; color: #3357f5; }

  .modal-backdrop { background: rgba(15,23,42,0.5); backdrop-filter: blur(2px); }

  .skeleton { background: linear-gradient(90deg, rgba(148,163,184,.15) 25%, rgba(148,163,184,.3) 37%, rgba(148,163,184,.15) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; }
  @keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

  input[type="checkbox"].filter-check { accent-color: #3357f5; }

  .swatch { width: 12px; height: 12px; border-radius: 3px; display:inline-block; border: 1px solid rgba(0,0,0,.08); }

  .tab-btn { padding: .6rem 1rem; font-size: .8125rem; font-weight: 600; border-bottom: 2px solid transparent; color: #64748b; transition: color .15s, border-color .15s; white-space: nowrap; }
  .tab-btn:hover { color: #1e293b; }
  .dark .tab-btn { color: #94a3b8; }
  .dark .tab-btn:hover { color: #e2e8f0; }
  .tab-btn.active { color: #3357f5; border-color: #3357f5; }
  .dark .tab-btn.active { color: #5c81ff; border-color: #5c81ff; }
  .tab-panel.hidden-panel { display: none; }

  .swap-row { display:grid; grid-template-columns:150px 1fr 24px 1.3fr; align-items:center; gap:14px; padding:12px 14px; }
  .swap-row:not(:last-child) { border-bottom: 1px solid rgba(148,163,184,.15); }
  @media (max-width: 700px) {
    .swap-row { grid-template-columns: 1fr; gap: 8px; }
    .swap-row .swap-arrow { transform: rotate(90deg); justify-content: flex-start; margin-left: 6px; }
  }
  .model-flag { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:9px; font-weight:700; font-size:13px; font-family:'Lexend',sans-serif; letter-spacing:.02em; cursor:pointer; border:1px solid #e2e8f0; background:#f8fafc; color:#64748b; transition:.15s; }
  .dark .model-flag { border-color:#334155; background:#1e293b; color:#94a3b8; }
  .model-flag:hover { background:#eef3ff; color:#1e293b; }
  .dark .model-flag:hover { background:#1a2d87; color:#e2e8f0; }
  .model-flag.active { background:#eef3ff; color:#3357f5; border-color:#3357f5; }
  .dark .model-flag.active { background:rgba(51,87,245,.15); color:#5c81ff; border-color:#5c81ff; }
  .model-flag .count { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:11px; opacity:.75; }
  .status-count-line { grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
  @media (max-width: 900px){ .status-count-line { grid-column:1 / -1; } }
  .status-count-line-vertical { grid-column:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:6px; }
  .status-count-chip { display:inline-flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:11px; letter-spacing:.02em; padding:2px 9px 2px 7px; border-radius:999px; }
  .status-count-chip .dot { width:6px; height:6px; border-radius:999px; flex-shrink:0; }

  .day-chip { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; padding: 4px 0; width: 32px; border-radius: 6px; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; cursor: pointer; transition: .15s; text-align: center; }
  .dark .day-chip { border-color: #334155; background: #1e293b; color: #94a3b8; }
  .day-chip:hover { background: #eef3ff; color: #1e293b; }
  .dark .day-chip:hover { background: #1a2d87; color: #e2e8f0; }
  .day-chip.active-day { background: #3357f5; border-color: #3357f5; color: #fff; }

  @media print {
    body * { visibility: hidden; }
  }

  /* --- ID's Livres --- */
  .ids-summary-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap:6px; }
  .ids-letter-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 6px; border-radius:10px; border:1px solid #e2e8f0; background:#f8fafc; cursor:pointer; transition:.12s; min-width:0; overflow:hidden; }
  .dark .ids-letter-card { border-color:#334155; background:#1e293b; }
  .ids-letter-card:hover { border-color:#3357f5; transform:translateY(-1px); }
  .ids-letter-card.active { border-color:#3357f5; background:#eef3ff; }
  .dark .ids-letter-card.active { background:rgba(51,87,245,.15); border-color:#5c81ff; }
  .ids-letter-card .desc { display:block; width:100%; max-width:100%; font-family:'Lexend',sans-serif; font-weight:800; font-size:11px; letter-spacing:.01em; color:#1e293b; text-align:center; line-height:1.2; text-transform:uppercase; overflow-wrap:break-word; word-break:break-word; hyphens:none; }
  .dark .ids-letter-card .desc { color:#e2e8f0; }
  .ids-letter-card .letra { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:#3357f5; }
  .dark .ids-letter-card .letra { color:#8aa9ff; }
  .ids-letter-card .qtd { font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; color:#94a3b8; }
  .dark .ids-letter-card .qtd { color:#64748b; }

  .ids-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap:2px; }
  .ids-cell { display:flex; align-items:center; justify-content:center; padding:3px 1px; font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:700; border-radius:3px; border:1px solid #e2e8f0; color:#94a3b8; background:#fff; letter-spacing:0; }
  .dark .ids-cell { border-color:#334155; background:#0f172a; color:#64748b; }
  .ids-cell.ocupado { background:#dc2626; color:#fff; border-color:#dc2626; }
  .dark .ids-cell.ocupado { background:#ef4444; color:#fff; border-color:#ef4444; }

  /* --- Gestão do Trato --- */
  .trato-oficina-card { border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:2px; border:1px solid #e2e8f0; background:#f8fafc; }
  .dark .trato-oficina-card { border-color:#334155; background:#1e293b; }
  .trato-oficina-card .nome { font-family:'Lexend',sans-serif; font-weight:700; font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:#64748b; }
  .dark .trato-oficina-card .nome { color:#94a3b8; }
  .trato-oficina-card .valor { font-family:'Lexend',sans-serif; font-weight:800; font-size:28px; color:#1e293b; line-height:1.2; }
  .dark .trato-oficina-card .valor { color:#f1f5f9; }
  .trato-oficina-card .pct { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#94a3b8; }
  .dark .trato-oficina-card .pct { color:#64748b; }

/* ============================================================
   PWA — MODAL DE ALERTA (substitui alert() nativo)
   ============================================================ */
#appModalBackdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
#appModalBox { transition: transform .15s ease, opacity .15s ease; max-width: 26rem; width: 100%; }

/* ============================================================
   PWA — OVERLAY DE CARREGAMENTO (upload/processamento de Excel)
   ============================================================ */
#loadingOverlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); }
.pwa-spinner { width: 44px; height: 44px; border-radius: 999px; border: 3px solid rgba(51,87,245,0.18); border-top-color: #3357f5; animation: pwa-spin .8s linear infinite; }
@keyframes pwa-spin { to { transform: rotate(360deg); } }
.pwa-progress-track { width: 220px; height: 6px; border-radius: 999px; background: rgba(148,163,184,0.35); overflow: hidden; }
.pwa-progress-bar { height: 100%; width: 40%; background: #3357f5; border-radius: 999px; animation: pwa-indeterminate 1.1s ease-in-out infinite; }
@keyframes pwa-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } }

/* ============================================================
   PWA — BANNER DE ATUALIZAÇÃO DISPONÍVEL
   ============================================================ */
#updateBanner { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%) translateY(0); z-index: 95; transition: transform .2s ease, opacity .2s ease; }
#updateBanner.hidden-banner { transform: translateX(-50%) translateY(120%); opacity: 0; pointer-events: none; }

/* ============================================================
   PWA — ALVOS DE TOQUE MÍNIMOS (48x48) EM TELAS PEQUENAS
   ============================================================ */
@media (max-width: 1024px) {
  button, .tab-btn, input[type="checkbox"], select {
    min-height: 44px;
  }
  #btnSidebarToggle, #btnDarkMode, #btnUploadTop, #btnUploadEmpty {
    min-height: 48px; min-width: 48px;
  }
}

/* ============================================================
   PWA — RESPONSIVIDADE (Android / iPhone / iPad / Tablets)
   Desktop (>=1024px) permanece inalterado.
   ============================================================ */
@media (max-width: 1023.98px) {
  #sidebar { width: min(85vw, 300px); }

  main { padding: 0.75rem !important; }

  h1 { font-size: 0.95rem !important; }

  .kpi-card { padding: 0.85rem !important; }

  table { font-size: 0.78rem; }
}

@media (max-width: 639.98px) {
  .tab-btn { padding: .55rem .75rem; font-size: .74rem; }

  #dropZone { padding: 1.5rem !important; }
}

/* Tabelas roláveis horizontalmente com cabeçalho fixo, sem alterar
   a estrutura/markup original das tabelas do dashboard */
.table-responsive-wrap,
[class*="overflow-x-auto"] {
  -webkit-overflow-scrolling: touch;
}
[class*="overflow-x-auto"] table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Gráficos (Chart.js) sempre acompanham o container em telas pequenas */
canvas { max-width: 100%; }

/* Fontes ligeiramente escaláveis em telas muito pequenas */
@media (max-width: 380px) {
  html { font-size: 15px; }
}