/* =========================================================
   UpSoftware Design System — Colors & Type
   Copiado de admin/src/styles/colors-and-type.css (painel Next.js
   abandonado — ver README, decisão do usuário 2026-09-21: tudo em
   backend/public, servido direto pelo mesmo processo/porta do bot).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --up-teal-900: #14403D;
  --up-teal-800: #1F5F5B;
  --up-teal-700: #266E65;
  --up-teal-600: #2E8B7E;
  --up-teal-500: #3BA893;
  --up-teal-400: #55C29F;
  --up-teal-300: #7ED6A5;
  --up-teal-200: #A5E4BF;
  --up-teal-100: #CFF0D9;

  --up-blue-900: #14192E;
  --up-blue-800: #1F2A44;
  --up-blue-700: #2C2F6B;
  --up-blue-600: #3A4580;
  --up-blue-500: #4C5A99;
  --up-blue-400: #6E7BB8;
  --up-blue-300: #9BA5D3;

  --up-navy:       #0B2545;
  --up-navy-soft:  #14294A;

  --up-white:     #FFFFFF;
  --up-gray-050:  #FAFAFA;
  --up-gray-100:  #F5F5F5;
  --up-gray-200:  #EBEBEB;
  --up-gray-300:  #DCDCDC;
  --up-gray-400:  #CCCCCC;
  --up-gray-500:  #9A9A9A;
  --up-gray-600:  #6A6A6A;
  --up-gray-700:  #4A4A4A;
  --up-gray-800:  #333333;
  --up-gray-900:  #1A1A1A;
  --up-black:     #0A0A0A;

  --color-bg:              var(--up-white);
  --color-bg-muted:        var(--up-gray-100);
  --color-bg-inverse:      var(--up-blue-800);
  --color-bg-deep:         var(--up-blue-900);

  --color-surface:         var(--up-white);
  --color-surface-raised:  var(--up-white);
  --color-surface-muted:   var(--up-gray-100);
  --color-surface-inverse: var(--up-navy);

  --color-fg:              var(--up-gray-900);
  --color-fg-muted:        var(--up-gray-700);
  --color-fg-subtle:       var(--up-gray-500);
  --color-fg-inverse:      var(--up-white);

  --color-border:          var(--up-gray-200);
  --color-border-strong:   var(--up-gray-300);
  --color-border-inverse:  rgba(255,255,255,0.12);

  --color-accent:          var(--up-teal-600);
  --color-accent-hover:    var(--up-teal-700);
  --color-accent-press:    var(--up-teal-800);
  --color-accent-fg:       var(--up-white);

  --color-link:            var(--up-teal-700);
  --color-link-hover:      var(--up-teal-800);

  --color-success:         var(--up-teal-600);
  --color-warning:         #D9A400;
  --color-danger:          #D14343;
  --color-info:            var(--up-blue-600);

  --gradient-brand:      linear-gradient(135deg, #14192E 0%, #1F2A44 28%, #266E65 66%, #7ED6A5 100%);
  --gradient-brand-soft: linear-gradient(135deg, #1F2A44 0%, #2E8B7E 60%, #7ED6A5 100%);
  --gradient-teal:       linear-gradient(135deg, #1F5F5B 0%, #2E8B7E 55%, #7ED6A5 100%);
  --gradient-navy:       linear-gradient(160deg, #14192E 0%, #1F2A44 60%, #2C2F6B 100%);
  --gradient-surface:    linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(11,37,69,0.0) 0%, rgba(11,37,69,0.7) 100%);

  --font-display: "Saira", "Saira Condensed", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   1.875rem;
  --fs-3xl:   2.25rem;
  --fs-4xl:   3rem;
  --fs-5xl:   3.75rem;
  --fs-6xl:   4.5rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-wider:   0.08em;
  --tr-widest:  0.14em;

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-plate: 18px;

  --shadow-xs:  0 1px 2px rgba(10,20,40,0.06);
  --shadow-sm:  0 2px 6px rgba(10,20,40,0.08);
  --shadow-md:  0 6px 18px rgba(10,20,40,0.10);
  --shadow-lg:  0 14px 36px rgba(10,20,40,0.14);
  --shadow-xl:  0 24px 60px rgba(10,20,40,0.20);
  --shadow-brand: 0 18px 40px rgba(46,139,126,0.28);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  --erp-accent: var(--up-teal-600);
  --erp-accent-hover: color-mix(in srgb, var(--erp-accent) 82%, black);
  --erp-accent-soft: color-mix(in srgb, var(--erp-accent) 11%, transparent);
  --erp-sidebar-bg: #33476E;
  --erp-topbar: #33476E;
  --erp-field-border: var(--up-gray-400);
  --erp-row-h: 32px;
  --erp-field-pad: 8px 10px;
  --erp-fs: 13px;
  --sidebar-w: 256px;
}

/* ---- tema escuro — mesmo mecanismo do afv_analyses (data-theme no <html>,
   token trocado só no :root, JS em theme.js) — decisão do usuário
   (2026-09-22): "opção claro e escuro, estilo do AFV Analyses". Só as
   variáveis "neutras" (fundo/borda/texto) trocam — cores de marca (teal,
   navy) ficam fixas, é só o --up-blue-900 (usado só como cor de texto de
   título) que precisa clarear pra continuar legível no fundo escuro. ---- */
:root[data-theme="dark"] {
  --up-gray-050: #1c1f28;
  --up-gray-100: #20232c;
  --up-gray-200: #2c303c;
  --up-gray-300: #3a3f4e;

  --color-bg:              #12141b;
  --color-bg-muted:        #1a1d26;
  --color-surface:         #1a1d26;
  --color-surface-raised:  #20232c;
  --color-surface-muted:   #20232c;

  --color-fg:              #e9eaed;
  --color-fg-muted:        #a3a8b5;
  --color-fg-subtle:       #7d8290;

  --color-border:          #2c303c;
  --color-border-strong:   #3a3f4e;

  --up-blue-900: #e9eaed;
}

*{ box-sizing:border-box; }
html { font-size: 16px; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal);
  color:var(--color-fg); background:var(--up-gray-100);
  -webkit-font-smoothing:antialiased; text-rendering: optimizeLegibility;
}
button,input,select,textarea{ font-family:inherit; }
button{ cursor:pointer; }

.up-display, h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--color-fg); }
h1 { font-size: var(--fs-5xl); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
p  { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--color-fg-muted); }

.up-flag { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-black); letter-spacing: var(--tr-tight); }
.up-industrial { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-extrabold); text-transform: lowercase; letter-spacing: 0.01em; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.text-muted { color: var(--color-fg-muted); }
.text-subtle { color: var(--color-fg-subtle); }

/* ---- topbar ---- */
.topbar{ background:var(--erp-topbar); display:flex; align-items:center; gap:18px; padding:0 16px 0 14px; color:#fff; border-bottom:1px solid rgba(255,255,255,.06); position:relative; z-index:30; height:54px; }
.topbar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gradient-teal); opacity:.9; }
.tb-brand{ display:flex; align-items:center; gap:11px; font-size:28px; }
.tb-spacer{ flex:1; }
.tb-action{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:rgba(255,255,255,.92); font-size:12.5px; font-weight:600; cursor:pointer; transition:all var(--dur-fast); }
.tb-action:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); color:#fff; }
.tb-action svg{ color:inherit; }

.screen{ padding:18px 22px 26px; min-height:100%; }
.screen-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.screen-title{ font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.01em; color:var(--up-blue-900); margin:4px 0 0; }
.screen-sub{ font-size:12.5px; color:var(--color-fg-subtle); margin-top:2px; }

/* ---- shell layout (sidebar + abas) ---- */
.app-shell{ display:flex; min-height:calc(100vh - 54px); }
.sidebar{ width:216px; flex-shrink:0; background:var(--color-surface); border-right:1px solid var(--color-border); padding:14px 8px; display:flex; flex-direction:column; gap:2px; }
.sidebar-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; border:none; background:transparent; color:var(--color-fg-muted); text-align:left; cursor:pointer; font-size:13px; font-weight:600; width:100%; }
.sidebar-item.active{ background:var(--erp-accent-soft); color:var(--up-teal-800); }
.sidebar-item .badge{ margin-left:auto; }
.main-col{ flex:1; display:flex; flex-direction:column; min-width:0; }
.tabs-strip{ display:flex; gap:4px; border-bottom:1px solid var(--color-border); padding:10px 22px 0; overflow-x:auto; }
.tab-chip{ display:flex; align-items:center; gap:8px; padding:8px 10px 10px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--color-fg-subtle); border-bottom:2px solid transparent; white-space:nowrap; }
.tab-chip.active{ color:var(--up-teal-700); border-bottom-color:var(--up-teal-600); }
.tab-chip .tab-close{ display:flex; color:var(--color-fg-subtle); margin-left:2px; }
.content-area{ flex:1; overflow:auto; }

/* ---- toolbar/cards/table/badge (screens.css) ---- */
.toolbar{ display:flex; align-items:center; gap:4px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:6px; box-shadow:var(--shadow-xs); flex-wrap:wrap; margin-top:14px; }
.tbtn{ display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; font-size:12.5px; font-weight:600; color:var(--color-fg-muted); padding:8px 12px; border-radius:8px; transition:all var(--dur-fast); cursor:pointer; }
.tbtn svg{ color:var(--color-fg-subtle); }
.tbtn:hover{ background:var(--up-gray-100); color:var(--up-blue-900); }
.tbtn:hover svg{ color:var(--erp-accent); }
.tbtn.primary{ background:var(--erp-accent); color:#fff; }
.tbtn.primary svg{ color:#fff; }
.tbtn.primary:hover{ background:var(--erp-accent-hover); color:#fff; }
.tbtn.danger:hover{ background:#FCE9E9; color:var(--color-danger); }
.tbtn.danger:hover svg{ color:var(--color-danger); }
.tbtn:disabled{ opacity:.4; cursor:not-allowed; }
.tbtn-outline{ border:1px solid var(--color-border); background:var(--color-surface); }
.tbtn-outline:hover{ border-color:var(--up-gray-300); }
.tbtn-outline:disabled{ background:var(--up-gray-050); }

.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); }
.card-head{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--color-border); justify-content:space-between; }
.card-head-left{ display:flex; align-items:center; gap:10px; }
.card-head h3{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--up-blue-900); margin:0; }
.card-note{ margin:10px 16px 0; font-size:12.5px; color:var(--color-fg-muted); }

.field{ display:flex; flex-direction:column; gap:3px; }
.field > label{ font-size:11px; font-weight:600; color:var(--color-fg-muted); letter-spacing:.01em; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea{
  width:100%; font-family:inherit; font-size:var(--erp-fs); color:var(--color-fg);
  border:1.5px solid var(--up-gray-300); border-radius:9px; padding:6px 10px; background:var(--color-surface); transition:all var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--up-teal-500); box-shadow:0 0 0 3px var(--erp-accent-soft); }

.badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.badge.pos{ background:var(--up-teal-100); color:var(--up-teal-900); }
.badge.neg{ background:#FCE9E9; color:#B02A2A; }
.badge.warn{ background:#FBF1D6; color:#946A00; }
.badge.info{ background:#E5EDFA; color:#2C4D8A; }
.badge.neutral{ background:var(--up-gray-100); color:var(--color-fg-muted); }

.tbl-scroll{ overflow:auto; flex:1; min-height:0; }
.dtable{ width:100%; border-collapse:collapse; }
.dtable thead th{ position:sticky; top:0; z-index:2; background:var(--up-gray-050); text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--color-fg-subtle); font-weight:700; padding:9px 10px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.dtable tbody td{ padding:9px 10px; border-bottom:1px solid var(--color-border-strong); font-size:var(--erp-fs); color:var(--color-fg); vertical-align:middle; }
.dtable tbody tr{ transition:background var(--dur-fast); }
.dtable svg{ vertical-align:middle; flex-shrink:0; }
.dtable tbody tr.clickable{ cursor:pointer; }
.dtable tbody tr:nth-child(even){ background:var(--up-gray-050); }
.dtable tbody tr:hover{ background:var(--erp-accent-soft); }
.dtable tr.expand-row td{ background:var(--up-gray-050); }
.mono, .dtable .mono{ font-family:var(--font-mono); font-size:12px; font-variant-numeric:tabular-nums; }

.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:50px 24px; color:var(--color-fg-subtle); text-align:center; }
.empty-state b{ color:var(--color-fg-muted); font-size:14px; }
.empty-state p{ margin:0; font-size:12.5px; max-width:260px; line-height:1.55; }

@keyframes scrIn{ from{ transform:translateY(7px); } to{ transform:none; } }
.screen-anim{ animation:scrIn var(--dur-base) var(--ease-out) both; }

.hold-overlay{ position:fixed; inset:0; background:rgba(20,25,46,.55); display:flex; align-items:center; justify-content:center; z-index:2000; animation:alertFadeIn var(--dur-fast) var(--ease-out) both; }
.hold-card{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 36px; background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:0 20px 50px rgba(10,20,40,.25); font-size:13.5px; font-weight:600; color:var(--up-blue-900); }
.hold-spin{ color:var(--erp-accent); animation:holdSpin 0.9s linear infinite; }
@keyframes holdSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.alert-overlay{ position:fixed; inset:0; background:rgba(20,25,46,.45); display:flex; align-items:center; justify-content:center; z-index:1000; animation:alertFadeIn var(--dur-fast) var(--ease-out) both; }
.alert-card{ background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:0 20px 50px rgba(10,20,40,.25); padding:26px 28px 20px; width:min(420px,92vw); display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; animation:alertPopIn var(--dur-base) var(--ease-out) both; }
.alert-card.wide{ width:min(600px,94vw); text-align:left; align-items:stretch; }
.alert-card.narrow{ width:min(380px,92vw); text-align:left; align-items:stretch; }
.alert-icon{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.alert-icon.erro{ background:#FCE9E9; color:var(--color-danger); }
.alert-icon.aviso{ background:#FBF1D6; color:#946A00; }
.alert-icon.sucesso{ background:var(--up-teal-100); color:var(--up-teal-800); }
.alert-msg{ font-size:13.5px; line-height:1.55; color:var(--color-fg); margin:0; white-space:pre-wrap; }
.alert-title{ margin:0; font-family:var(--font-display); font-size:16px; color:var(--up-blue-900); }
.alert-ok{ min-width:96px; justify-content:center; }
@keyframes alertFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes alertPopIn{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }

.stat-chip{ border-radius:10px; padding:8px 14px; min-width:84px; text-align:center; }
.stat-chip .val{ font-size:20px; font-weight:800; font-family:var(--font-display); line-height:1; }
.stat-chip .lbl{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
.stat-chip.pos{ background:var(--up-teal-100); color:var(--up-teal-900); }
.stat-chip.warn{ background:#FBF1D6; color:#946A00; }
.stat-chip.neutral{ background:var(--up-gray-100); color:var(--color-fg-muted); }

/* ---- login ---- */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--gradient-surface); padding:24px; }
.auth-card{ width:100%; max-width:360px; background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:0 20px 50px rgba(10,20,40,.16); padding:38px 32px 30px; }
.auth-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:28px; text-align:center; }
.auth-plate{ width:52px; height:52px; border-radius:var(--radius-plate); background:var(--gradient-teal); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-brand); }
.auth-wordmark{ display:flex; align-items:center; font-size:24px; gap:0; }
.auth-empresa{ font-size:12.5px; color:var(--color-fg-subtle); }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-error{ background:#FCE9E9; color:#B02A2A; font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:8px; }

.input-simple{ width:100%; font-family:inherit; font-size:var(--erp-fs); color:var(--color-fg); border:1.5px solid var(--up-gray-300); border-radius:9px; padding:6px 10px; background:var(--color-surface); transition:all var(--dur-fast); }
.input-simple:focus{ outline:none; border-color:var(--up-teal-500); box-shadow:0 0 0 3px var(--erp-accent-soft); }

/* ---- menu lateral agrupado (Pedidos / Job / Config) ---- */
.sidebar-group{ margin-bottom:6px; }
.sidebar-group-head{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:none; background:transparent; color:var(--color-fg-subtle); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; border-radius:6px; }
.sidebar-group-head:hover{ background:var(--up-gray-100); }
.sidebar-group-chevron{ margin-left:auto; display:flex; }
.sidebar-group-body{ display:flex; flex-direction:column; gap:2px; }

/* ---- controles de tema/zoom no topbar (estilo do afv_analyses) ---- */
.theme-zoom{ display:flex; align-items:center; gap:2px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:3px; }
.tz-btn{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border:none; background:transparent; color:rgba(255,255,255,.85); border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; transition:all var(--dur-fast); }
.tz-btn:hover{ background:rgba(255,255,255,.16); color:#fff; }
.tz-level{ font-size:10.5px; font-weight:700; color:rgba(255,255,255,.7); min-width:30px; text-align:center; }

/* ---- toggle de tema, versão solta (tela de login, sem topbar) ---- */
.theme-toggle-float{ position:fixed; top:16px; right:16px; z-index:10; }
.theme-toggle-float .tz-btn{ width:36px; height:36px; font-size:16px; color:var(--color-fg-muted); background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-xs); }
.theme-toggle-float .tz-btn:hover{ background:var(--up-gray-100); color:var(--color-fg); }

/* zoom aplicado só no conteúdo (sidebar/topbar ficam no tamanho normal) */
.main-col{ zoom:var(--zoom-pct, 100%); }

/* ---- checklist de vínculos (aba Demo) ---- */
.demo-vinc-list{ border:1px solid var(--color-border); border-radius:10px; margin:12px 16px 0; }
.demo-vinc-item{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--color-border); font-size:12.5px; cursor:pointer; }
.demo-vinc-item:last-child{ border-bottom:none; }
.demo-vinc-item:hover{ background:var(--up-gray-050); }
.demo-vinc-item .num{ font-family:var(--font-mono); font-size:12px; }
.demo-vinc-empty{ padding:16px; font-size:12.5px; color:var(--color-fg-subtle); }