/* ====== Design System ====== */
:root{
  --indigo:#6366f1;
  --indigo-600:#4f46e5;
  --indigo-700:#4338ca;
  --mint:#22d3ee;
  --rose:#f43f5e;
  --amber:#f59e0b;
  --emerald:#10b981;

  --bg:#f7f9fc;
  --surface:#ffffff;
  --surface-2:#fafcff;
  --ink-900:#0f172a;
  --ink-800:#1f2937;
  --ink-700:#334155;
  --ink-600:#475569;
  --muted:#6b7280;

  --brd:#e5e7eb;
  --ring: 0 0 0 3px rgba(99,102,241,.2);

  --radius:14px;
  --radius-lg:18px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 6px 20px rgba(2,6,23,.08);
  --shadow-lg: 0 18px 40px rgba(17,24,39,.10);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --surface:#0f172a;
    --surface-2:#0b1326;
    --ink-900:#e5e7eb;
    --ink-800:#cbd5e1;
    --ink-700:#94a3b8;
    --ink-600:#94a3b8;
    --muted:#9aa4b2;

    --brd:#1f2a44;
    --ring: 0 0 0 3px rgba(99,102,241,.35);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.45);
  }
}

/* ====== Base ====== */
html,body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink-800);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(125,211,252,.25) 0%, transparent 55%),
    radial-gradient(1000px 500px at -10% 10%, rgba(216,180,254,.22) 0%, transparent 60%),
    var(--bg);
}

.app-bg{ background: transparent; }

*{ box-sizing: border-box; }
::selection{ background: rgba(99,102,241,.2); }

/* ====== Cards / Sections ====== */
.card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  border: 1px solid var(--brd);
}
@media (min-width: 640px){ .card{ padding: 2rem; } }

.section{
  margin-top: 1.25rem;
  border-top: 1px dashed var(--brd);
  padding-top: 1.25rem;
}
.section-header h2{
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--ink-800);
  display:flex; align-items:center; gap:.5rem;
}
.section-header h2::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background: linear-gradient(90deg, var(--indigo), var(--mint));
}

/* ====== Labels / Inputs ====== */
.label{
  display:block; font-size:.875rem; font-weight:600; color:var(--ink-700); margin-bottom:.35rem;
}

.input{
  width:100%; background: var(--surface-2);
  border:1px solid var(--brd);
  color: var(--ink-800);
  border-radius: var(--radius);
  padding:.7rem .9rem;
  outline:none; box-shadow: var(--shadow-sm) inset;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input::placeholder{ color: var(--muted); }
.input:focus{ border-color: var(--indigo); box-shadow: var(--ring); background: var(--surface); }
.input[readonly]{ opacity:.8; }

/* KBD / hints */
.kbd{
  background: var(--surface-2); border:1px solid var(--brd);
  border-radius:.5rem; padding:.25rem .5rem; font-weight:700; font-size:.75rem; color:var(--ink-700);
}
.hint{ font-size:.8rem; color:var(--muted); }
.sep-dot{ width:6px;height:6px;border-radius:50%; background: var(--brd); display:inline-block;margin:0 .5rem;}

/* ====== Panels & Toggles ====== */
.panel{
  border:1px solid var(--brd);
  border-radius: var(--radius);
  padding:1rem;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-sm);
}
.panel-title{ font-size:1rem; font-weight:800; color:var(--ink-800); margin-bottom:.75rem; }

.toggle{ display:flex; align-items:center; gap:.5rem; cursor:pointer; color:var(--ink-700); user-select:none; }
.toggle-input{ width:18px; height:18px; accent-color: var(--indigo); }

/* ====== Table styles (visualização) ====== */
.h2{ font-weight:800; font-size:1.125rem; color:var(--ink-800); margin-bottom:.75rem; }
.th-left,.th-right{
  padding:.9rem .75rem; font-size:.9rem; font-weight:800; color:var(--ink-900);
  border-bottom:1px solid var(--brd);
}
.th-left{ text-align:left; }
.th-right{ text-align:right; }
.td-total-left,.td-total-right{
  padding-top:1rem; font-size:1rem; font-weight:900; color:var(--ink-900);
}
.td-total-left{ text-align:left; padding-left:.75rem; }
.td-total-right{ text-align:right; padding-right:.75rem; }

/* ====== Buttons ====== */
.btn{
  background: var(--surface-2);
  border:1px solid var(--brd);
  color: var(--ink-800);
  font-weight:800;
  padding:.78rem 1rem;
  border-radius: var(--radius);
  transition: transform .08s ease, filter .12s ease, background-color .12s ease;
  text-align:center; user-select:none;
}
.btn:hover{ filter: brightness(.98); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow: var(--ring); }
.btn--ghost{ background: var(--surface-2); }

.btn--primary{
  background: linear-gradient(90deg, var(--indigo) 0%, #7c3aed 60%, #14b8a6 100%);
  color:#fff; border-color: transparent;
}
.btn--primary:hover{ filter: brightness(.98); }

.btn--success{
  background: linear-gradient(90deg, var(--emerald), #34d399);
  color:#fff; border-color:transparent;
}
.btn--danger{
  background: linear-gradient(90deg, var(--rose), #fb7185);
  color:#fff; border-color:transparent;
}
.btn--xl{ padding: 1rem 1.25rem; border-radius: 16px; font-size:1rem; }

/* Link add */
.link-add{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--indigo); font-weight:800;
  padding:.55rem .8rem; border-radius:.8rem;
  background: rgba(99,102,241,.09);
  border:1px solid rgba(99,102,241,.12);
  transition: background-color .15s ease, transform .08s ease;
}
.link-add:hover{ background: rgba(99,102,241,.14); }
.link-add:active{ transform: translateY(1px); }

/* Copy chip */
.copy-btn{
  border:1px solid var(--brd);
  background: var(--surface-2);
  border-radius:10px;
  padding:.4rem .6rem;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.copy-btn:hover{ background: var(--surface); }
.copy-btn:focus-visible{ outline:none; box-shadow: var(--ring); }

/* ====== Saved list hover ====== */
.hover-effect{
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  border:1px solid var(--brd);
}
.hover-effect:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: var(--surface-2);
}

/* ====== Toast ====== */
#toast{
  z-index: 60;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}

/* ====== Suggest Popover (Top20 + Histórico) ====== */
.suggest-popover{
  position: fixed; z-index: 70;
  max-width: 520px; max-height: 320px; overflow:auto;
  background: var(--surface);
  border:1px solid var(--brd);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding:.5rem;
}
.suggest-group{ margin-bottom:.25rem; }
.suggest-title{
  font-size:.75rem; font-weight:800; color:var(--ink-600);
  padding:.25rem .5rem; text-transform:uppercase; letter-spacing:.02em;
}
.suggest-list{ list-style:none; margin:0; padding:0; }
.suggest-item{
  font-size:.9rem; color:var(--ink-900);
  padding:.48rem .6rem; border-radius:.55rem; cursor:pointer; user-select:none;
}
.suggest-item:hover, .suggest-item.is-active{
  background: rgba(99,102,241,.12);
  color:#1e1b4b;
}

/* ====== Ambientes / Itens ====== */
.ambiente-block{
  border:1px solid var(--brd);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 1rem;
  transition: box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.ambiente-block:hover{ box-shadow: var(--shadow-sm); background: var(--surface); }

.item-row{
  background: transparent;
  border-radius: 12px;
  padding: .25rem;
}
.item-row.dragging{
  opacity:.8;
  box-shadow: var(--shadow-md);
  background: rgba(99,102,241,.06);
}
.drop-zone-highlight{
  outline: 2px dashed rgba(99,102,241,.35);
  outline-offset: 6px;
  border-radius: 12px;
}
.drop-insert-marker{
  height: 10px;
  margin: 6px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--indigo), var(--mint));
  box-shadow: 0 4px 12px rgba(99,102,241,.25);
}

/* Botões de ação nos ambientes */
.ambiente-block .text-gray-400{ color: var(--muted); }
.ambiente-block .text-gray-400:hover{ color: var(--ink-700); }

/* Select "serviços rápidos" */
.servicos-predefinidos{
  background: var(--surface);
}

/* ====== Visualizador / Proposta ====== */
#proposta-content .border-b{ border-color: var(--brd); }
#proposta-content .text-slate-900{ color: var(--ink-900); }
#proposta-content .text-slate-800{ color: var(--ink-800); }
#proposta-content .text-slate-700{ color: var(--ink-700); }
#proposta-content .text-slate-600{ color: var(--ink-600); }
#shareLinkContainer a{
  font-weight:700; text-decoration: underline;
}

/* Mensagem de proposta expirada */
#mensagem-expirada .bg-white{ background: var(--surface); }
#mensagem-expirada .text-gray-800{ color: var(--ink-800); }
#mensagem-expirada .text-gray-600{ color: var(--muted); }

/* ====== Acessibilidade / Motion ====== */
:focus-visible{ outline:none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ====== Impressão (limpo para PDF) ====== */
@media print{
  body{ background: #fff; }
  .card{ box-shadow:none; border:0; padding:0; }
  .panel, .ambiente-block{ border-color:#ddd; }
  .btn, .link-add, .copy-btn, .hover-effect, #shareBtn, #gerarPropostaBtn{ display:none !important; }
  #mensagem-expirada{ display:none !important; }
}