@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #f8fafc;
  --panel: #FFFFFF;
  --graphite: #0f172a;
  --steel: #334155;
  --steel-light: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --amber: #15803d; /* Replaced with Industrial Blue/Green from site */
  --amber-dark: #064e3b;
  --red: #ef4444;
  --red-bg: #fee2e2;
  --green: #10b981;
  --green-bg: #ecfdf5;
  --blue: #3b82f6;
  --blue-bg: #eff6ff;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 8px; /* Slightly more rounded for modern look */
  --shadow-panel: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--font-ui);
  background: var(--bg);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  color: var(--graphite);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

a{color:inherit;}

/* ===== Topbar ===== */
.topbar{
  background: var(--graphite);
  color: #F2F3F4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 24px;
  height: 56px;
  border-bottom: 3px solid var(--amber);
}
.topbar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  letter-spacing:.02em;
  font-size:15px;
}
.topbar .brand .mark{
  width:20px;height:20px;
  background: var(--amber);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  flex-shrink:0;
}
.topbar nav{display:flex; gap:4px;}
.topbar nav a{
  padding:8px 14px;
  font-size:13.5px;
  font-weight:500;
  border-radius: var(--radius);
  text-decoration:none;
  color:#C6CBCF;
  border:1px solid transparent;
}
.topbar nav a:hover{ color:#fff; }
.topbar nav a.active{
  color:#fff;
  background: rgba(232,163,36,0.14);
  border-color: rgba(232,163,36,0.4);
}
.topbar .user{
  display:flex; align-items:center; gap:12px;
  font-size:13px; color:#C6CBCF;
}
.topbar .user .who{ text-align:right; line-height:1.3; }
.topbar .user .who .name{ color:#fff; font-weight:500; display:block; }
.topbar .user .who .role{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.topbar .user button{
  background:none; border:1px solid #454B50; color:#C6CBCF;
  padding:6px 10px; border-radius: var(--radius); font-size:12px; cursor:pointer;
  font-family: var(--font-ui);
}
.topbar .user button:hover{ border-color:var(--amber); color:#fff; }

/* ===== Layout ===== */
.page{ max-width:1240px; margin:0 auto; padding: 28px 24px 64px; }
.page-header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
.page-header h1{ font-size:21px; margin:0 0 4px; font-weight:600; letter-spacing:-.01em; }
.page-header .eyebrow{
  font-family: var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; color: var(--steel-light); display:block; margin-bottom:6px;
}
.page-header p{ margin:0; color:var(--steel); font-size:13.5px; }

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.panel-header{
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.panel-header h2{ font-size:14.5px; margin:0; font-weight:600; }
.panel-body{ padding:18px; }

/* ===== Grid / cols ===== */
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media(max-width:900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ===== Form ===== */
.field{ margin-bottom:14px; }
.field label{
  display:block; font-size:12px; font-weight:600; color:var(--steel);
  margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em;
}
.field .hint{ font-size:11.5px; color:var(--steel-light); margin-top:4px; }
input[type=text], input[type=number], input[type=date], input[type=datetime-local],
input[type=password], input[type=email], select, textarea{
  width:100%; padding:9px 11px; font-family:var(--font-ui); font-size:13.5px;
  border:1px solid var(--border-strong); border-radius:var(--radius); background:#fff;
  color:var(--graphite);
}
textarea{ resize:vertical; min-height:80px; font-family:var(--font-ui); }
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);
}
.field-row{ display:flex; gap:12px; }
.field-row > .field{ flex:1; }

fieldset{ border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin:0 0 16px; }
legend{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); padding:0 6px; }

/* ===== Buttons ===== */
.btn{
  font-family:var(--font-ui); font-size:13.5px; font-weight:600; cursor:pointer;
  padding:10px 16px; border-radius:var(--radius); border:1px solid var(--border-strong);
  background:#fff; color:var(--graphite); display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{ border-color: var(--steel); }
.btn-primary{ background:var(--graphite); border-color:var(--graphite); color:#fff; }
.btn-primary:hover{ background:#000; border-color:#000; }
.btn-amber{ background:var(--amber); border-color:var(--amber-dark); color:#fff; }
.btn-amber:hover{ background:var(--amber-dark); color:#fff; }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--steel); }
.btn-ghost:hover{ color:var(--graphite); }
.btn-sm{ padding:6px 10px; font-size:12px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-block{ width:100%; justify-content:center; }

/* ===== Table ===== */
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--steel); padding:9px 12px; border-bottom:2px solid var(--border-strong);
  background:#F7F8F9;
}
tbody td{ padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:hover{ background:#FAFBFB; cursor:pointer; }
tbody tr:last-child td{ border-bottom:none; }

/* ===== RA code tag (signature element) ===== */
.ra-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-weight:600; font-size:13px;
  letter-spacing:.03em; padding:5px 10px 5px 9px;
  border:1px solid var(--graphite); border-left:4px solid var(--amber);
  border-radius:2px; background:#fff;
}
.ra-tag .plate-label{
  font-size:8.5px; color:var(--steel-light); letter-spacing:.1em; font-family:var(--font-mono);
}

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:4px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-neutral{ background:#EEF0F2; color:var(--steel); }
.badge-blue{ background:var(--blue-bg); color:var(--blue); }
.badge-amber{ background:#FBF1DC; color:var(--amber-dark); }
.badge-green{ background:var(--green-bg); color:var(--green); }
.badge-red{ background:var(--red-bg); color:var(--red); }

.tipo-tag{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; border-radius:2px; border:1px solid var(--border-strong); color:var(--steel);
}

/* ===== Stat cards ===== */
.stat-card{ padding:16px 18px; }
.stat-card .stat-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--steel-light);
  font-family:var(--font-mono); margin-bottom:8px; display:block;
}
.stat-card .stat-value{ font-size:28px; font-weight:700; line-height:1; }
.stat-card .stat-sub{ font-size:12px; color:var(--steel); margin-top:6px; }

/* ===== Login ===== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-box{ width:100%; max-width:380px; }
.login-box .mark-lg{
  width:44px;height:44px; background:var(--amber);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin:0 auto 18px;
}
.login-box h1{ text-align:center; font-size:18px; margin:0 0 2px; }
.login-box .sub{ text-align:center; color:var(--steel); font-size:12.5px; margin:0 0 24px; }
.login-box .panel-body{ padding:24px; }
.login-error{
  background:var(--red-bg); color:var(--red); font-size:12.5px; padding:9px 12px;
  border-radius:var(--radius); margin-bottom:14px; display:none;
}
.demo-users{ margin-top:18px; font-size:11.5px; color:var(--steel-light); text-align:center; line-height:1.7; }
.demo-users code{ background:#F0F1F2; padding:1px 5px; border-radius:2px; font-family:var(--font-mono); }

/* ===== Drawer (detail panel) ===== */
.overlay{
  position:fixed; inset:0; background:rgba(35,39,43,0.4); display:none; z-index:40;
}
.overlay.open{ display:block; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(880px, 94vw);
  background:var(--bg); z-index:41; transform:translateX(100%); transition:transform .22s ease;
  overflow-y:auto; box-shadow:-8px 0 24px rgba(0,0,0,0.15);
}
.drawer.open{ transform:translateX(0); }
.drawer-header{
  position:sticky; top:0; background:var(--graphite); color:#fff; padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between; z-index:2;
  border-bottom:3px solid var(--amber);
}
.drawer-header h2{ margin:0; font-size:15px; font-weight:600; }
.drawer-close{ background:none; border:none; color:#C6CBCF; font-size:20px; cursor:pointer; line-height:1; padding:4px; }
.drawer-close:hover{ color:#fff; }
.drawer-body{ padding:20px 22px 60px; }

.readonly-block{ background:#F7F8F9; border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.readonly-block .kv{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--border); font-size:13px; }
.readonly-block .kv:last-child{ border-bottom:none; }
.readonly-block .kv .k{ color:var(--steel); }
.readonly-block .kv .v{ font-weight:500; text-align:right; }
.readonly-block .relato{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:13px; line-height:1.55; white-space:pre-wrap; }

/* ===== Destaque de modo de falha / local no drawer da Gestão ===== */
.destaque-falha-grid{ display:flex; gap:10px; margin:10px 0; }
.destaque-falha{
  flex:1; border:2px solid var(--border-strong); border-radius:var(--radius);
  padding:8px 12px; background:#fff;
}
.destaque-falha .k{ display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin-bottom:3px; }
.destaque-falha .v{ display:block; font-weight:700; font-size:14px; color:var(--graphite); }

/* ===== Motivo informado pelo cliente, em destaque ===== */
.relato-cliente-box{
  margin-top:10px; border:2px solid var(--border-strong); border-radius:var(--radius);
  padding:12px 14px; background:#fff;
}
.relato-cliente-box .titulo{
  display:block; font-weight:700; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--graphite); margin-bottom:6px;
}
.relato-cliente-box .texto{ font-size:13px; line-height:1.55; white-space:pre-wrap; }

/* ===== Dropzone ===== */
.dropzone{
  border:2px dashed var(--border-strong); border-radius:var(--radius); padding:22px;
  text-align:center; color:var(--steel); font-size:13px; cursor:pointer; background:#FAFBFB;
}
.dropzone:hover{ border-color:var(--amber); color:var(--graphite); }
.dropzone input{ display:none; }
.file-chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.file-chip{
  font-family:var(--font-mono); font-size:11.5px; background:#F0F1F2; border:1px solid var(--border);
  padding:5px 9px; border-radius:2px; display:flex; align-items:center; gap:7px;
}
.file-chip button{ background:none; border:none; color:var(--red); cursor:pointer; font-size:13px; padding:0; }
.file-chip{ text-decoration:none; color:var(--graphite); }
.file-chip-thumb{ padding:3px 9px 3px 3px; }
.file-chip-thumb img{ width:26px; height:26px; object-fit:cover; border-radius:2px; border:1px solid var(--border); }

/* ===== Badge de tipo em destaque (etiqueta) ===== */
.tipo-badge-lg{
  display:inline-block; font-family:var(--font-heading); font-weight:700; font-size:15px;
  letter-spacing:.04em; padding:6px 16px; border-radius:3px; text-transform:uppercase;
  border:2px solid var(--border-strong); color:var(--steel);
}
.tipo-badge-lg.tb-garantia{ background:var(--green-bg); color:var(--amber-dark); border-color:var(--green); }
.tipo-badge-lg.tb-devolucao{ background:var(--blue-bg); color:#1d4ed8; border-color:var(--blue); }
.tipo-badge-lg.tb-conserto{ background:#FBF1DC; color:#92400e; border-color:#d97706; }

/* ===== Código de RA editável (hero da nova entrada) ===== */
.codigo-editavel{
  font-family:var(--font-mono); font-size:30px; font-weight:700; letter-spacing:.03em;
  background:transparent; border:none; border-bottom:2px dashed rgba(255,255,255,0.4);
  color:#fff; text-align:center; width:100%; padding:2px 4px;
}
.codigo-editavel:focus{ outline:none; border-bottom-color:var(--amber); }

/* ===== Alerta de campo pendente ===== */
.alerta-pendente{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:#92400e; background:#FBF1DC; padding:5px 10px; border-radius:3px; margin-top:6px;
}

/* ===== Leitor de código de barras ===== */
.scanner-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,0.9); z-index:80;
  display:none; align-items:center; justify-content:center; flex-direction:column; padding:20px;
}
.scanner-overlay.open{ display:flex; }
.scanner-box{ width:min(420px, 92vw); background:#000; border-radius:var(--radius); overflow:hidden; }
.scanner-hint{ color:#fff; font-size:13px; margin-top:14px; text-align:center; }
.scanner-close{
  margin-top:16px; background:none; border:1px solid #454B50; color:#fff;
  padding:8px 16px; border-radius:var(--radius); cursor:pointer; font-family:var(--font-ui);
}

/* ===== Etiqueta impressa ===== */
.etiqueta-barcode{ display:flex; justify-content:center; margin:10px 0 4px; }
.etiqueta-barcode svg{ max-width:100%; }

/* ===== Radio group (veredito) ===== */
.veredito-group{ display:flex; gap:10px; flex-wrap:wrap; }
.veredito-option{
  flex:1; min-width:150px; border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:12px 14px; cursor:pointer; position:relative;
}
.veredito-option input{ position:absolute; opacity:0; }
.veredito-option .lbl{ font-weight:600; font-size:13px; display:block; margin-bottom:3px; }
.veredito-option .desc{ font-size:11.5px; color:var(--steel); }
.veredito-option.checked{ border-color:var(--graphite); background:#F7F8F9; }
.veredito-option.checked.v-procedente{ border-color:var(--green); background:var(--green-bg); }
.veredito-option.checked.v-nao-procedente{ border-color:var(--red); background:var(--red-bg); }
.veredito-option.checked.v-orcamento{ border-color:var(--blue); background:var(--blue-bg); }

/* ===== Empty state ===== */
.empty-state{ padding:48px 20px; text-align:center; color:var(--steel); }
.empty-state .glyph{ font-family:var(--font-mono); font-size:28px; color:var(--border-strong); margin-bottom:10px; }
.empty-state p{ margin:0; font-size:13px; }

/* ===== Toast ===== */
#toast{
  position:fixed; bottom:22px; right:22px; background:var(--graphite); color:#fff;
  padding:12px 18px; border-radius:var(--radius); font-size:13px; border-left:4px solid var(--amber);
  box-shadow:0 6px 20px rgba(0,0,0,.2); transform:translateY(120%); transition:transform .2s ease; z-index:60;
}
#toast.show{ transform:translateY(0); }

/* ===== Utility ===== */
.text-steel{ color:var(--steel); }
.mono{ font-family:var(--font-mono); }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{gap:8px;} .gap-12{gap:12px;}
.justify-between{ justify-content:space-between; }
.required::after{ content:' *'; color:var(--red); }

.filters-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:flex-end; }
.filters-bar .field{ margin-bottom:0; min-width:160px; }

/* ===== Combobox (busca-e-seleciona de catálogo fixo) ===== */
.combobox-wrap{ position:relative; }
.combobox-dropdown{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:30;
  background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius);
  max-height:220px; overflow-y:auto; box-shadow:var(--shadow-panel); margin-top:2px;
}
.combobox-item{ padding:8px 12px; font-size:13px; cursor:pointer; }
.combobox-item:hover, .combobox-item.active{ background:#F0F1F2; }

/* ===== Tabs (navegação dentro da página de Entrada) ===== */
.tabs{
  display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px;
}
.tab-btn{
  font-family:var(--font-ui); font-size:13.5px; font-weight:600; cursor:pointer;
  padding:10px 18px; background:none; border:none; color:var(--steel);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn:hover{ color:var(--graphite); }
.tab-btn.active{ color:var(--graphite); border-bottom-color:var(--amber); }

/* ===== Fluxo centralizado (Entrada) ===== */
.center-flow{ max-width:680px; margin:0 auto; }
.center-flow .panel-body{ padding:26px; }

/* ===== Selo de RA gerado (destaque, estilo etiqueta) ===== */
.ra-hero{
  text-align:center; padding:22px; margin-bottom:22px;
  background:var(--graphite); border-radius:var(--radius); color:#fff;
  border-left:6px solid var(--amber);
}
.ra-hero .plate-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:#9AA3AA;
  text-transform:uppercase; display:block; margin-bottom:8px;
}
.ra-hero .codigo{
  font-family:var(--font-mono); font-size:30px; font-weight:700; letter-spacing:.03em;
}
.ra-hero .sub{ font-size:12px; color:#C6CBCF; margin-top:8px; }

/* ===== Upload de foto única (NF / estado de entrada) com preview ===== */
.upload-photo{
  border:2px dashed var(--border-strong); border-radius:var(--radius); cursor:pointer;
  background:#FAFBFB; text-align:center; overflow:hidden; position:relative; min-height:110px;
  display:flex; align-items:center; justify-content:center;
}
.upload-photo:hover{ border-color:var(--amber); }
.upload-photo input{ display:none; }
.upload-photo .placeholder{ padding:20px; color:var(--steel); font-size:12.5px; }
.upload-photo img{ width:100%; max-height:220px; object-fit:cover; display:block; }
.upload-photo .retake{
  position:absolute; top:8px; right:8px; background:rgba(35,39,43,0.75); color:#fff;
  font-size:11px; padding:4px 9px; border-radius:20px;
}

/* ===== Impressão da etiqueta (somente o conteúdo do modal, no topo da folha) ===== */
@media print{
  @page{ margin:0; }
  body *{ visibility:hidden; }
  #overlay-etiqueta, #overlay-etiqueta *{ visibility:visible; }
  #overlay-etiqueta{
    position:absolute; inset:0; display:block; background:#fff; z-index:auto;
  }
  #overlay-etiqueta .drawer{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:80mm; box-shadow:none; border:none;
  }
  #overlay-etiqueta .drawer-header,
  #overlay-etiqueta .drawer-close,
  #overlay-etiqueta button,
  #overlay-etiqueta .hint{ display:none; }
  #overlay-etiqueta .drawer-body{ padding:10mm 0 0; }
}