:root{
  --bg1:#FAF8F5;--bg2:#F5F2ED;--paper:#ffffffcc;--line:#e8dfd2;
  --ink:#2b2420;--muted:#7b6d64;--accent:#C89B7E;--radius:18px;--radius2:22px;
}
*{box-sizing:border-box}html,body{height:100%}
body.bg{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);
  background: radial-gradient(circle at top, #e8dfd2 0, transparent 45%), linear-gradient(135deg,var(--bg1),var(--bg2));
}

.btn{appearance:none;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px);padding:10px 12px;border-radius:14px;cursor:pointer;font-weight:800;color:#4a3f35;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.danger{background:rgba(200,0,0,.08);border-color:rgba(200,0,0,.18);color:#8b0000}
.alert{padding:10px 12px;border-radius:14px;font-size:13px;border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.6)}
.alert.error{border-color:rgba(200,0,0,.18);background:rgba(200,0,0,.06);color:#7a0000}
.hint{color:var(--muted);font-size:13px;line-height:1.5}.tiny{margin-top:16px;color:#b8a396;font-size:12px;text-align:center}

.app{display:flex;min-height:100vh;position:relative}

/* ===== Sidebar desktop ===== */
.sidebar{
  width:270px;padding:22px;position:sticky;top:0;height:100vh;background:var(--paper);
  border-right:1px solid rgba(255,255,255,.55);backdrop-filter:blur(20px);
  z-index:40;
}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.logo{width:44px;height:44px;border-radius:16px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}
.brand-title{font-weight:900}.brand-sub{font-size:12px;color:#9a8b80}
.nav{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.nav-item{width:100%;text-align:left;padding:12px 12px;border-radius:16px;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:900;color:#6f625a;transition:.18s ease}
.nav-item:hover{background:rgba(255,255,255,.55);transform:translateX(2px)}
.nav-item.active{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.7);color:var(--accent)}
.userbox{margin-top:auto;display:flex;flex-direction:column;gap:10px}.useremail{color:#9a8b80;font-size:12px}

.main{flex:1;padding:22px;position:relative;z-index:1}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px;gap:10px}
.top-left{display:flex;gap:10px;align-items:flex-end}
.top-title{font-size:20px;font-weight:900}.top-sub{font-size:13px;color:var(--muted)}
.content{display:flex;flex-direction:column;gap:14px}
.card{background:rgba(255,255,255,.55);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.55);border-radius:var(--radius2);padding:16px;box-shadow:0 10px 28px rgba(0,0,0,.06)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

/* ===== Mobile menu button (só aparece no mobile) ===== */
.menu-btn{display:none}

/* ===== Drawer/backdrop (mobile) ===== */
.nav-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  z-index:35;
}

/* ===== Responsivo ===== */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main{padding:16px}

  /* Mostra o botão menu */
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px}

  /* Sidebar vira drawer (NÃO escondemos com display:none) */
  .sidebar{
    position:fixed;
    left:0;top:0;height:100vh;
    transform:translateX(-110%);
    transition:transform .22s ease;
    z-index:40;
    box-shadow: 18px 0 40px rgba(0,0,0,.12);
  }

  /* Quando aberto */
  .app.nav-open .sidebar{transform:translateX(0)}
  .app.nav-open .nav-backdrop{display:block}

  /* evita scroll por trás quando menu aberto */
  body.nav-lock{overflow:hidden}
}

/* ===== Forms ===== */
.sep{border:0;height:1px;background:var(--line);margin:14px 0}
.form .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:980px){.form .row{grid-template-columns:1fr}}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.85);outline:none}
textarea{min-height:90px;resize:vertical}
.right{display:flex;justify-content:flex-end;margin-top:12px}
.table{width:100%;border-collapse:collapse}
.table th{font-size:12px;color:var(--muted);text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.table td{padding:10px 8px;border-bottom:1px solid rgba(232,223,210,.55);vertical-align:top}
.nowrap{white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(200,155,126,.12);color:var(--accent);font-size:12px;font-weight:900}
.title{font-weight:900}

/* ===== FIX layout Produção (o teu bloco) ===== */
.form .row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 22px;
  margin-bottom: 16px;
}
.form .row > div { min-width: 0; }

.form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form input,.form select { width: 100%; }

/* Produção – layout mobile */
@media (max-width: 900px){
  .form .row{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }
  .form .row > div:last-child{ grid-column: 1 / -1; }
  .form .row .btn{ width:100%; display:block; }
  .form .right .btn{ width:100%; }
  .form input, .form select{ width:100%; min-width:0; }
}
@media (max-width: 520px){
  .form .row{ grid-template-columns: 1fr; }
  .form .row > div:last-child{ grid-column: auto; }
}

/* Safari: garantir clicks */
.card, .card * { box-sizing: border-box; }
.card-head { position: relative; z-index: 1; }
.form { position: relative; z-index: 2; }
.pill { pointer-events: none; }
.form select,.form input,.form textarea,.form button {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* ===== DASHBOARD v2 ===== */
.dashboard-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px){
  .dashboard-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .dashboard-grid{ grid-template-columns: 1fr; }
}

.kpi2{
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.kpi2::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:160px;height:160px;
  background: radial-gradient(circle at 30% 30%, rgba(200,155,126,.22), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
}
.kpi-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.kpi-ico{
  width:38px;height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.65);
  color: var(--accent);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.kpi-label{
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  color: var(--muted);
}
.kpi-value{
  font-size:28px;
  font-weight:950;
  letter-spacing:.2px;
  color:#1f1a17;
}
.kpi-sub{
  margin-top:8px;
  font-size:12px;
  color:#9a8b80;
  line-height:1.35;
}

/* variantes */
.kpi2.accent{
  border-color: rgba(200,155,126,.30);
}
.kpi2.accent .kpi-ico{
  background: rgba(200,155,126,.14);
  color: var(--accent);
}

.kpi2.success{
  border-color: rgba(107,165,111,.28);
}
.kpi2.success .kpi-ico{
  background: rgba(107,165,111,.14);
  color: #3e8b47;
}

.kpi2.danger{
  border-color: rgba(217,107,107,.26);
}
.kpi2.danger .kpi-ico{
  background: rgba(217,107,107,.12);
  color: #b04444;
}

.kpi2.warning{
  border-color: rgba(217,149,107,.26);
}
.kpi2.warning .kpi-ico{
  background: rgba(217,149,107,.12);
  color: #b86a3a;
}

/* ações rápidas */
.dash-actions-row{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.dash-actions-row .btn{
  flex: 1 1 160px;
}

.save-indicator{
  font-size:12px;
  font-weight:800;
  color:#9a8b80;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.save-indicator.typing{ opacity:.85; }
.save-indicator.saving{ color:#b88a6e; }
.save-indicator.ok{ color:#2f7d4c; }
.save-indicator.err{ color:#8b0000; background:rgba(200,0,0,.06); border-color:rgba(200,0,0,.16); }

/* iOS fix: sidebar clicável (evita overlay por cima) — SÓ DESKTOP */
@media (min-width: 981px){
  .sidebar{
    position: sticky;
    top: 0;
    z-index: 50;
    pointer-events: auto;
  }

  .nav, .nav-item{
    position: relative;
    z-index: 51;
    pointer-events: auto;
  }

  .main{
    position: relative;
    z-index: 1;
  }
}

/* ===== STATUS SELECT (cores por estado) ===== */
:root{
  --st-pendente:#C45C5C;
  --st-pausa:#C89B7E;
  --st-aprovacao:#4A78B2;
  --st-aprovado:#C8A74A;
  --st-producao:#3F8A5F;
  --st-concluido:#2F6B48;
}

select.status-select{
  font-weight: 900;
  border-width: 1px;
  transition: .15s ease;
}

/* Estado -> cor do select */
select.status-select.st-pendente{
  border-color: rgba(196,92,92,.35);
  background: rgba(196,92,92,.10);
  color: #7a2f2f;
}
select.status-select.st-pausa{
  border-color: rgba(200,155,126,.40);
  background: rgba(200,155,126,.12);
  color: #5a3e2f;
}
select.status-select.st-aprovacao{
  border-color: rgba(74,120,178,.35);
  background: rgba(74,120,178,.10);
  color: #24456e;
}
select.status-select.st-aprovado{
  border-color: rgba(200,167,74,.40);
  background: rgba(200,167,74,.12);
  color: #5a4a1d;
}
select.status-select.st-producao{
  border-color: rgba(63,138,95,.35);
  background: rgba(63,138,95,.10);
  color: #1f4b33;
}
select.status-select.st-concluido{
  border-color: rgba(47,107,72,.35);
  background: rgba(47,107,72,.10);
  color: #163a27;
}

/* ===== STATUS FIELD (ícone + select) ===== */
.status-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;              /* importante no grid */
}

.status-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  font-size:18px;
  flex:0 0 34px;            /* ícone nunca encolhe */
}

.status-wrap select{
  flex:1 1 auto;            /* select ocupa o resto */
  min-width:0;              /* evita overflow */
}

.field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 6px;
}

.field-head label{
  margin:0;           /* tira o margin do label */
}

.field-mini{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  font-size:18px;
}

/* ===== PRODUÇÃO: cards estilo "tiles" ===== */

.prod-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .prod-grid{ grid-template-columns: 1fr; }
}

.prod-card{
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
}

.prod-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.prod-title{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.5px;
  margin: 0;
  line-height: 1.05;
}
.prod-sub{
  margin-top: 10px;
  color: var(--muted);
  font-size: 18px;
}

/* ===== STATUS CHIP — versão clean/pro ===== */

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing:.2px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  white-space: nowrap;
}

.status-chip .ico{
  width:8px;
  height:8px;
  border-radius:50%;
  background: currentColor;
  font-size:0;   /* esconde emoji */
}


/* cores do chip (puxadas das tuas vars de estado) */
.status-chip.st-pendente{ background: rgba(196,92,92,.14); color:#7a2f2f; border-color: rgba(196,92,92,.18); }
.status-chip.st-pausa{ background: rgba(200,155,126,.16); color:#5a3e2f; border-color: rgba(200,155,126,.22); }
.status-chip.st-aprovacao{ background: rgba(74,120,178,.14); color:#24456e; border-color: rgba(74,120,178,.18); }
.status-chip.st-aprovado{ background: rgba(200,167,74,.18); color:#5a4a1d; border-color: rgba(200,167,74,.22); }
.status-chip.st-producao{ background: rgba(63,138,95,.14); color:#1f4b33; border-color: rgba(63,138,95,.18); }
.status-chip.st-concluido{ background: rgba(47,107,72,.14); color:#163a27; border-color: rgba(47,107,72,.18); }

.prod-rule{
  height: 1px;
  background: rgba(232,223,210,.85);
  margin: 18px 0 18px;
  border: 0;
}

.metrics{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.metric{
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  padding: 16px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.metric .lab{
  font-size: 18px;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 8px;
}
.metric .val{
  font-size: 54px;
  font-weight: 950;
  letter-spacing: -1px;
  line-height: 1;
  color: #1f1a17;
}
.metric input{
  font-size: 36px;
  font-weight: 950;
  padding: 12px 12px;
  border-radius: 18px;
}

.prod-footer{
  margin-top: 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.save-badge{
  font-weight: 900;
  color: var(--muted);
  font-size: 18px;
}
.prod-actions{
  display:flex;
  gap: 10px;
  align-items:center;
}
.prod-actions .btn{
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 18px;
}

.hbadge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  margin-right:8px;
  border:1px solid rgba(0,0,0,.08);
  vertical-align:middle;
  line-height:1;
}

.hbadge.b-quote{
  background: rgba(74,120,178,.12);
  border-color: rgba(74,120,178,.20);
  color:#24456e;
}

.hbadge.b-prod{
  background: rgba(63,138,95,.12);
  border-color: rgba(63,138,95,.20);
  color:#1f4b33;
}

.hbadge.b-pause{
  background: rgba(200,155,126,.16);
  border-color: rgba(200,155,126,.22);
  color:#5a3e2f;
}

.hbadge.b-pay{
  background: rgba(200,167,74,.16);
  border-color: rgba(200,167,74,.22);
  color:#5a4a1d;
}

.hbadge.b-paid{
  background: rgba(47,107,72,.14);
  border-color: rgba(47,107,72,.20);
  color:#163a27;
}

.hbadge.b-reject{
  background: rgba(196,92,92,.14);
  border-color: rgba(196,92,92,.20);
  color:#7a2f2f;
}

.quote-card-price{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.quote-card-price .hbadge{
  font-size:10px;
  padding:3px 8px;
}

.quote-card-price span:last-child{
  font-weight:950;
  font-size:18px;
}
/* select estado a ocupar bem a largura quando usado dentro do card */
.prod-state-row{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.prod-state-row label{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}

/* ===== PRODUÇÃO: versão mais compacta ===== */
.prod-card{ padding:16px; border-radius:22px; }

.prod-title{ font-size:24px; }
.prod-sub{ font-size:14px; margin-top:6px; }

.status-chip{ padding:8px 12px; font-size:14px; gap:8px; }
.status-chip .ico{ font-size:16px; }

.prod-rule{ margin:12px 0; }

.metrics{ gap:10px; }
.metric{ border-radius:18px; padding:12px; }
.metric .lab{ font-size:13px; margin-bottom:6px; }
.metric .val{ font-size:34px; letter-spacing:-0.5px; }

.metric input{
  font-size:22px;
  padding:10px 10px;
  border-radius:14px;
}

.save-badge{ font-size:14px; }
.prod-actions .btn{ padding:10px 14px; font-size:14px; }
.prod-state-row label{ font-size:12px; }

/* ===== PRODUÇÃO (FINAL) — tiles compactos ===== */

.prod-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .prod-grid{ grid-template-columns: 1fr; }
}

.prod-card{
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(0,0,0,.07);
}

.prod-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.prod-title{
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.05;
}

.prod-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
  white-space: nowrap;
}
.status-chip .ico{ font-size: 14px; line-height: 1; }

/* cores do chip (usa as tuas classes st-*) */
.status-chip.st-pendente{ background: rgba(196,92,92,.14); color:#7a2f2f; border-color: rgba(196,92,92,.18); }
.status-chip.st-pausa{ background: rgba(200,155,126,.16); color:#5a3e2f; border-color: rgba(200,155,126,.22); }
.status-chip.st-aprovacao{ background: rgba(74,120,178,.14); color:#24456e; border-color: rgba(74,120,178,.18); }
.status-chip.st-aprovado{ background: rgba(200,167,74,.18); color:#5a4a1d; border-color: rgba(200,167,74,.22); }
.status-chip.st-producao{ background: rgba(63,138,95,.14); color:#1f4b33; border-color: rgba(63,138,95,.18); }
.status-chip.st-concluido{ background: rgba(47,107,72,.14); color:#163a27; border-color: rgba(47,107,72,.18); }

.prod-rule{
  height: 1px;
  background: rgba(232,223,210,.85);
  margin: 10px 0 10px;
  border: 0;
}

.metrics{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metric{
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  padding: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.045);
}

.metric .lab{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
  margin-bottom: 6px;
}

.metric .val{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.4px;
  line-height: 1;
  color: #1f1a17;
}

.metric input{
  width:100%;
  font-size: 20px;
  font-weight: 950;
  padding: 8px 10px;
  border-radius: 14px;
}

.prod-footer{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.save-badge{
  font-weight: 900;
  color: var(--muted);
  font-size: 13px;
}

.prod-actions{
  display:flex;
  gap: 8px;
  align-items:center;
}

.prod-actions .btn{
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
}

.prod-state-row{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.prod-state-row label{
  margin: 0;
  font-size: 12px;
  font-weight: 900;
}
/* =========================
   ORÇAMENTOS — layout pro (igual ao mockup)
========================= */

.quotes-wrapper{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* card de criação */
.quote-create-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 26px;
  padding: 18px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}

.quote-create-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.quote-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.quote-total-value{
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -0.2px;
}

/* grid do formulário */
.quote-create-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px 14px;
}
@media (max-width: 980px){
  .quote-create-grid{ grid-template-columns: 1fr; }
}

/* notas a ocupar a linha toda no desktop */
.quote-create-grid textarea{
  min-height: 88px;
}
@media (min-width: 981px){
  .quote-create-grid > div:last-child{ grid-column: 1 / -1; }
}

/* ✅ nos Orçamentos, esconder o ícone quadrado do statusField (fica como o mockup) */
.quote-create-card .status-icon,
.quote-card .status-icon{
  display:none !important;
}
.quote-create-card .status-wrap,
.quote-card .status-wrap{
  gap:0 !important;
}
.quote-create-card .status-wrap select,
.quote-card .status-wrap select{
  width:100%;
}

/* LISTA */
.quote-list-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.quote-list-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .quote-list-grid{ grid-template-columns: 1fr; }
}

.quote-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 22px;
  padding: 16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 35px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.quote-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.quote-card-title{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -0.2px;
}

.quote-card-client{
  color: var(--muted);
  font-size: 13px;
  margin-top: -4px;
}

.quote-card-price{
  font-weight: 950;
  font-size: 18px;
  white-space: nowrap;
}

.quote-card-actions{
  display:flex;
  gap:10px;
  margin-top: 2px;
}
.quote-card-actions .btn{
  border-radius: 999px;
  padding: 10px 14px;
}

/* ===== RESPONSIVE BASE (colocar no fim do app.css) ===== */
:root{
  --pad: clamp(14px, 2.2vw, 22px);
  --gap: clamp(10px, 1.6vw, 16px);
  --radiusX: clamp(16px, 2.2vw, 22px);
  --cardPad: clamp(14px, 2.2vw, 18px);
}

/* Melhor leitura em mobile */
html { -webkit-text-size-adjust: 100%; }
body { font-size: clamp(14px, 1.2vw, 16px); }

/* Evita “saltos” em iOS */
body.bg { min-height: 100dvh; }
.app { min-height: 100dvh; }

/* Paddings globais mais inteligentes */
.main { padding: var(--pad); }
.content { gap: var(--gap); }
.card { padding: var(--cardPad); border-radius: var(--radiusX); }

/* Grid global mais elástico */
.grid{ gap: var(--gap); }
@media (max-width: 1100px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .grid{ grid-template-columns: 1fr; }
}

/* Quotes: lista em 2 colunas só quando há espaço */
.quote-list-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--gap);
}
@media (max-width: 900px){
  .quote-list-grid{ grid-template-columns: 1fr; }
}

/* Produção */
.prod-grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--gap);
}
@media (max-width: 980px){
  .prod-grid{ grid-template-columns: 1fr; }
}

/* Produção compacta por defeito */
.prod-card{ padding: var(--cardPad); border-radius: var(--radiusX); }

.prod-title{
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.1;
}
.prod-sub{
  font-size: clamp(12px, 1.2vw, 14px);
}

/* Tiles/inputs */
.metric .lab{ font-size: 12px; }
.metric .val{ font-size: clamp(22px, 3vw, 34px); }
.metric input{
  font-size: clamp(16px, 2.6vw, 22px);
  padding: 10px 10px;
}

/* Tabelas sempre usáveis em mobile */
.table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  width:100%;
}
.table th, .table td { white-space: nowrap; }

/* ==========================
   MOBILE OPTIMIZATION
========================== */

@media (max-width: 600px){

  /* reduzir espaçamento geral */
  .main{
    padding: 14px;
  }

  .content{
    gap: 12px;
  }

  /* dashboard cards mais compactos */
  .kpi2{
    padding: 14px;
    border-radius: 18px;
  }

  .kpi-value{
    font-size: 22px;
  }

  .kpi-sub{
    font-size: 12px;
  }

  /* ações rápidas mais compactas */
  .dash-actions{
    padding: 14px;
  }

  .dash-actions-row{
    gap: 8px;
  }

  .dash-actions-row .btn{
    padding: 12px 14px;
    font-size: 14px;
  }

  /* topbar mais alinhada */
  .topbar{
    margin-bottom: 10px;
  }

  .top-title{
    font-size: 18px;
  }

  .top-sub{
    font-size: 13px;
  }

  /* botão atualizar menos pesado */
  #refreshBtn{
    padding: 10px 12px;
    font-size: 13px;
  }

  /* cards gerais */
  .card{
    padding: 14px;
    border-radius: 20px;
  }
}

@media (max-width: 980px){
  .app{ display:block; }          /* mata o flex no mobile (resolve o “vazio” à esquerda) */
  .main{ width:100%; margin:0; }  /* garante full width */
  .sidebar{ position:fixed !important; } /* garante drawer */
}

/* ===== PRODUÇÃO: pill select elegante ===== */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}

.status-pill .dot{
  width:8px;height:8px;border-radius:50%;
  background: currentColor;
  opacity:.9;
}

.status-pill select{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  font: inherit;
  color: inherit;
  cursor:pointer;
  outline:none;
}

.status-pill .chev{
  opacity:.7;
  font-size: 12px;
  margin-left: 2px;
}

/* cores reutilizam as tuas classes st-* */
.status-pill.st-pendente{ background: rgba(196,92,92,.14); color:#7a2f2f; border-color: rgba(196,92,92,.18); }
.status-pill.st-pausa{ background: rgba(200,155,126,.16); color:#5a3e2f; border-color: rgba(200,155,126,.22); }
.status-pill.st-aprovacao{ background: rgba(74,120,178,.14); color:#24456e; border-color: rgba(74,120,178,.18); }
.status-pill.st-aprovado{ background: rgba(200,167,74,.18); color:#5a4a1d; border-color: rgba(200,167,74,.22); }
.status-pill.st-producao{ background: rgba(63,138,95,.14); color:#1f4b33; border-color: rgba(63,138,95,.18); }
.status-pill.st-concluido{ background: rgba(47,107,72,.14); color:#163a27; border-color: rgba(47,107,72,.18); }
/* =======================================
   PRODUÇÃO – ULTRA COMPACTO (FORÇADO)
   ======================================= */

.prod-grid{
  gap:8px !important;
}

.prod-card{
  padding:10px 12px !important;
  border-radius:12px !important;
}

.prod-head{
  margin-bottom:6px !important;
}

.prod-title{
  font-size:15px !important;
  font-weight:600 !important;
  margin:0 !important;
}

.prod-sub{
  font-size:11px !important;
  margin-top:2px !important;
  opacity:.75;
}

.prod-rule{
  margin:6px 0 !important;
}

.metrics{
  gap:6px !important;
}

.metric{
  padding:6px !important;
}

.metric .lab{
  font-size:10px !important;
  margin-bottom:2px !important;
}

.metric .val{
  font-size:16px !important;
}

.metric input{
  font-size:12px !important;
  padding:4px 6px !important;
  height:26px !important;
}

.status-pill{
  font-size:11px !important;
  padding:4px 8px !important;
}

.save-badge{
  font-size:11px !important;
}

.prod-actions .btn{
  font-size:11px !important;
  padding:4px 8px !important;
}

/* =========================
   PRODUÇÃO — SUPER COMPACTO
   (colar NO FIM do CSS)
========================= */

.prod-grid{
  gap: 10px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px){
  .prod-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 820px){
  .prod-grid{ grid-template-columns: 1fr !important; }
}

.prod-card{
  padding: 10px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.06) !important;
  backdrop-filter: blur(12px) !important;
}

.prod-head{ gap: 8px !important; }
.prod-title{
  font-size: 16px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.2px !important;
}
.prod-sub{
  margin-top: 4px !important;
  font-size: 12px !important;
}

.prod-rule{ margin: 8px 0 !important; }

.metrics{
  gap: 8px !important;
}
.metric{
  padding: 8px !important;
  border-radius: 14px !important;
}
.metric .lab{
  font-size: 11px !important;
  margin-bottom: 4px !important;
}
.metric .val{
  font-size: 20px !important;
  line-height: 1 !important;
}
.metric input{
  font-size: 16px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
}

.prod-footer{ margin-top: 10px !important; gap: 8px !important; }
.save-badge{ font-size: 12px !important; }
.prod-actions .btn{
  padding: 7px 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

/* Se estiveres a usar o pill select */
.status-pill{
  padding: 6px 8px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}
.status-pill select{
  font-size: 12px !important;
  padding: 0 !important;
}

/* PRODUÇÃO — deixar os metrics crescer e caber mais campos */
.metrics{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.prod-card{ overflow: visible; }       /* se tinhas overflow hidden */
.metric{ min-width: 0; }               /* evita cortar */
.metric input{
  width: 100%;
  box-sizing: border-box;
}

.hbadge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  margin-right:8px;
  border:1px solid rgba(0,0,0,.08);
  vertical-align:middle;
}

.hbadge.b-quote{
  background: rgba(74,120,178,.12);
  border-color: rgba(74,120,178,.20);
  color:#24456e;
}

.hbadge.b-prod{
  background: rgba(63,138,95,.12);
  border-color: rgba(63,138,95,.20);
  color:#1f4b33;
}

.hbadge.b-pause{
  background: rgba(200,155,126,.16);
  border-color: rgba(200,155,126,.22);
  color:#5a3e2f;
}

.hbadge.b-pay{
  background: rgba(200,167,74,.16);
  border-color: rgba(200,167,74,.22);
  color:#5a4a1d;
}

.hbadge.b-paid{
  background: rgba(47,107,72,.14);
  border-color: rgba(47,107,72,.20);
  color:#163a27;
}

.hbadge.b-reject{
  background: rgba(196,92,92,.14);
  border-color: rgba(196,92,92,.20);
  color:#7a2f2f;
}

.dashboard-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px){
  .dashboard-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .dashboard-grid{
    grid-template-columns: 1fr;
  }
}