/* ============================================================
   design-system.css — padrão visual unificado do StarWMS
   Carregado pelo header compartilhado (theme/header.php).
   Escopo: body.ds (opt-in por página, rollout gradual seguro).
   Funciona por cima do Bootstrap (3 ou 5) que a página já usa.
   ============================================================ */
:root{
  --bg:#f4f5f7; --surface:#ffffff; --line:#e6e8eb; --line-2:#eef0f3;
  --ink:#1d2433; --ink-soft:#5b6472; --ink-mute:#8a93a2;
  --brand:#2563eb; --brand-bg:#eef3ff; --accent:#0f9d8f; --accent-bg:#e8f7f5;
  --ok:#16a34a; --warn:#d97706; --danger:#dc2626; --info:#2563eb;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-lg:0 12px 34px rgba(16,24,40,.18);
  --fontstack:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
body.ds{background:var(--bg);color:var(--ink);font-family:var(--fontstack);font-size:14px;line-height:1.5;margin:0}
body.ds *,body.ds *::before,body.ds *::after{box-sizing:border-box}
body.ds h1,body.ds h2,body.ds h3,body.ds h4,body.ds h5,body.ds h6{color:var(--ink);font-weight:700;letter-spacing:-.01em}
body.ds a{color:var(--brand);text-decoration:none}
body.ds a:hover{text-decoration:underline}

/* ---------- layout / topbar / nav ---------- */
body.ds .ds-topbar{position:sticky;top:0;z-index:1020;display:flex;align-items:center;gap:14px;padding:11px 20px;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);flex-wrap:wrap}
body.ds .ds-brand{display:flex;align-items:center;gap:11px}
body.ds .ds-brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:#fff;box-shadow:var(--shadow)}
body.ds .ds-brand .logo svg{width:20px;height:20px}
body.ds .ds-brand h1{font-size:15px;font-weight:700;margin:0;line-height:1.1}
body.ds .ds-brand p{font-size:11.5px;color:var(--ink-mute);margin:0}
body.ds .ds-pagetitle{font-size:15px;font-weight:600;color:var(--ink-soft);padding-left:14px;margin-left:4px;border-left:1px solid var(--line)}
body.ds .ds-spacer{flex:1}
body.ds .ds-back{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);padding:8px 13px;border-radius:var(--radius-sm);font-weight:500;font-size:13px}
body.ds .ds-back:hover{border-color:#cdd3db;color:var(--ink);text-decoration:none}
body.ds .ds-back svg{width:16px;height:16px}
body.ds .ds-user{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft)}
body.ds .ds-user .av{width:30px;height:30px;border-radius:50%;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:12px}
body.ds .ds-main{max-width:1320px;margin:0 auto;padding:22px 20px}

/* ---------- card ---------- */
body.ds .ds-card,body.ds .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
body.ds .ds-card{padding:18px}
body.ds .card{}
body.ds .card-header{background:var(--surface);border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);border-radius:var(--radius) var(--radius) 0 0}
body.ds .card-body{padding:16px 18px}
body.ds .ds-section-title{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line-2)}

/* ---------- botões (override Bootstrap 3/5) ---------- */
body.ds .btn{display:inline-flex;align-items:center;gap:7px;border-radius:var(--radius-sm);font-weight:500;font-size:13px;padding:8px 14px;border:1px solid transparent;transition:.15s;line-height:1.2}
body.ds .btn svg{width:16px;height:16px}
body.ds .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
body.ds .btn-primary:hover{filter:brightness(.94);color:#fff}
body.ds .btn-secondary,body.ds .btn-default{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}
body.ds .btn-secondary:hover,body.ds .btn-default:hover{border-color:#cdd3db;color:var(--ink)}
body.ds .btn-success{background:var(--ok);border-color:var(--ok);color:#fff}
body.ds .btn-danger{background:#fff;border-color:#f3c0c0;color:var(--danger)}
body.ds .btn-danger:hover{background:#fef2f2;border-color:var(--danger)}
body.ds .btn-info{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}
body.ds .btn-info:hover{border-color:#cdd3db;color:var(--ink)}
body.ds .btn-outline-primary{background:transparent;border-color:var(--brand);color:var(--brand)}
body.ds .btn-outline-primary:hover{background:var(--brand-bg)}
body.ds .btn-sm{padding:6px 11px;font-size:12px}
body.ds .btn-lg{padding:11px 18px;font-size:15px}

/* ---------- forms ---------- */
body.ds label,body.ds .form-label{font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
body.ds .form-control,body.ds .form-select,body.ds input[type=text],body.ds input[type=number],body.ds input[type=date],body.ds input[type=email],body.ds input[type=password],body.ds input[type=search],body.ds select,body.ds textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);outline:0;width:100%;max-width:100%;height:auto;min-height:42px;line-height:1.4}
body.ds textarea{min-height:auto}
body.ds .form-control:focus,body.ds .form-select:focus,body.ds input:focus,body.ds select:focus,body.ds textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
body.ds input:disabled,body.ds select:disabled,body.ds textarea:disabled,body.ds .form-control:disabled{background:#f4f5f7;color:var(--ink-soft);cursor:not-allowed}
body.ds .input-group .btn{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
body.ds .ds-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}

/* ---------- tabelas ---------- */
body.ds .table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);font-size:13.5px}
body.ds .table thead th{background:#f7f8fa;color:var(--ink-mute);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:11px 12px;border-bottom:1px solid var(--line);text-align:left}
body.ds .table tbody td{padding:11px 12px;border-bottom:1px solid var(--line-2);color:var(--ink-soft);vertical-align:middle}
body.ds .table tbody tr:hover td{background:#f9fafb}
body.ds .table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}
/* variante compacta p/ tabelas com MUITAS colunas (ex: separacao, 14 cols) caberem
   no desktop sem scroll horizontal — padding/fonte/inputs reduzidos */
body.ds .table.table-compact thead th{padding:6px 6px;font-size:10px}
body.ds .table.table-compact tbody td{padding:5px 6px;font-size:11.5px}
/* colunas de texto longo (Cliente=6, Representante=7, Observacao=8, Descricao=10)
   ganham largura-teto e quebram, em vez de esticar a tabela toda */
body.ds .table.table-compact tbody td:nth-child(6),
body.ds .table.table-compact tbody td:nth-child(7),
body.ds .table.table-compact tbody td:nth-child(8),
body.ds .table.table-compact tbody td:nth-child(10){max-width:96px;white-space:normal;word-break:break-word}
body.ds .table.table-compact tbody td .form-control,
body.ds .table.table-compact tbody td .form-select,
body.ds .table.table-compact tbody td input,
body.ds .table.table-compact tbody td select{padding:5px 7px;min-height:32px;font-size:12px}
body.ds .table.table-compact tbody td input[type=number]{max-width:78px}
body.ds .table.table-compact tbody td select{max-width:110px}
body.ds .table.table-compact .btn{padding:5px 9px;font-size:12px}

/* ---------- badges / pills ---------- */
body.ds .badge,body.ds .ds-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em}
body.ds .ds-badge.ok{background:#e7f6ec;color:var(--ok)}
body.ds .ds-badge.warn{background:#fdf1e3;color:var(--warn)}
body.ds .ds-badge.danger{background:#fdeaea;color:var(--danger)}
body.ds .ds-badge.info{background:var(--brand-bg);color:var(--brand)}
body.ds .ds-badge.muted{background:#eef0f3;color:var(--ink-soft)}

/* ---------- alerts ---------- */
body.ds .alert{border-radius:10px;border:1px solid var(--line);padding:11px 14px;font-size:13.5px}
body.ds .alert-success{background:#e7f6ec;border-color:#bfe8cd;color:#0a6c33}
body.ds .alert-warning{background:#fdf6e3;border-color:#f5df93;color:#8a6100}
body.ds .alert-danger{background:#fdeaea;border-color:#f3c0c0;color:#a11}
body.ds .alert-info,body.ds .alert-primary{background:var(--brand-bg);border-color:#cfe0fb;color:#1d4ed8}

/* ---------- modais (Bootstrap) ---------- */
body.ds .modal-content{border:0;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
body.ds .modal-header{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 20px}
body.ds .modal-title{font-weight:700;font-size:16px}
body.ds .modal-body{padding:18px 20px}
body.ds .modal-footer{background:#fafbfc;border-top:1px solid var(--line);padding:14px 20px}

/* ---------- footer ---------- */
body.ds .ds-footer{max-width:1320px;margin:0 auto;padding:18px 20px;color:var(--ink-mute);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- menu de módulos (home) ---------- */
body.ds .ds-welcome{margin:4px 0 22px}
body.ds .ds-welcome h2{font-size:24px;margin:0;display:flex;align-items:center;gap:10px}
body.ds .ds-welcome h2 svg{width:24px;height:24px;color:var(--warn)}
body.ds .ds-welcome p{color:var(--ink-mute);margin:4px 0 0}
body.ds .ds-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
body.ds .ds-module{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-decoration:none;color:inherit;transition:.15s}
body.ds .ds-module:hover{border-color:#cdd3db;box-shadow:var(--shadow-lg);transform:translateY(-2px);text-decoration:none;color:inherit}
body.ds .ds-module .ico{width:46px;height:46px;border-radius:12px;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;margin-bottom:8px}
body.ds .ds-module .ico svg{width:24px;height:24px}
body.ds .ds-module h3{font-size:15px;margin:0;color:var(--ink)}
body.ds .ds-module p{font-size:12.5px;color:var(--ink-mute);margin:0}
body.ds .ds-logout{display:inline-flex;align-items:center;gap:7px;margin:24px 0 8px}

/* ---------- auth (login / mfa, sem topbar) ---------- */
body.ds.ds-auth{min-height:100vh;display:grid;place-items:center;padding:20px}
body.ds .ds-auth-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:32px 28px}
body.ds .ds-auth-card .brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px;text-align:center}
body.ds .ds-auth-card .brand .logo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:#fff}
body.ds .ds-auth-card .brand .logo svg{width:28px;height:28px}
body.ds .ds-auth-card .brand h1{font-size:20px;margin:0}
body.ds .ds-auth-card .brand p{font-size:12.5px;color:var(--ink-mute);margin:0}
body.ds .ds-auth-card .btn{width:100%;justify-content:center;margin-top:4px}
body.ds .ds-auth-foot{text-align:center;font-size:11.5px;color:var(--ink-mute);margin-top:18px}

/* ---------- typeahead / autocomplete ---------- */
body.ds .ds-typeahead{position:relative}
body.ds .ds-typeahead-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);max-height:240px;overflow:auto}
body.ds .ds-typeahead-list .item{padding:8px 11px;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
body.ds .ds-typeahead-list .item:hover,body.ds .ds-typeahead-list .item.active{background:var(--brand-bg);color:var(--brand)}

/* ---------- mini-stats (KPIs simples) ---------- */
body.ds .ds-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:18px}
body.ds .ds-stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
body.ds .ds-stat .lbl{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px}
body.ds .ds-stat .val{font-size:22px;font-weight:700;color:var(--ink);line-height:1.1}

/* ---------- utilidades de layout ---------- */
body.ds .ds-narrow{max-width:560px;margin-left:auto;margin-right:auto}
body.ds .ds-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.ds .ds-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
body.ds .ds-stack>*+*{margin-top:14px}
body.ds .ds-check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
body.ds .ds-check input{width:auto;margin:0}
body.ds .ds-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
@media (max-width:576px){ body.ds .ds-grid-2,body.ds .ds-grid-3{grid-template-columns:1fr} }

/* ---------- ícones ---------- */
body.ds .ds-ico{width:1em;height:1em;vertical-align:-.125em;flex:none}
body.ds .ds-ico-lg{width:18px;height:18px}

/* ---------- responsivo ---------- */
@media (max-width:768px){
  body.ds .ds-topbar{padding:10px 14px}
  body.ds .ds-pagetitle{border-left:0;padding-left:0;width:100%;order:3}
  body.ds .ds-main{padding:16px 14px}
}