/* Layouts da interface — ativados por data-layout no html/body (Configuração → Marca) */

/* ── Clássico: padrão atual do sistema (sem overrides) ── */

/* ── SaaS Orçamento — cards claros, resumo destacado, estilo app moderno ── */
html[data-layout="saas"] body,
body[data-layout="saas"]{
  background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
}
body[data-layout="saas"] .top{
  background:#fff;
  border-bottom:2px solid #e2e8f0;
  box-shadow:0 4px 24px #0f172a08;
}
body[data-layout="saas"] .nav-actions .nav-active{
  background:var(--blue);
  color:#fff;
  box-shadow:0 4px 14px #2563eb33;
}
body[data-layout="saas"] .card{
  border:1px solid #e2e8f0;
  border-radius:18px;
  box-shadow:0 8px 30px #0f172a0a;
}
body[data-layout="saas"] .head{
  border-bottom:1px solid #e2e8f0;
  background:linear-gradient(180deg,#fff,#f8fafc);
}
body[data-layout="saas"] .grid{
  grid-template-columns:minmax(0,1fr) 420px;
  gap:22px;
}
body[data-layout="saas"] .sticky>.card{
  border-color:#bfdbfe;
}
body[data-layout="saas"] .sticky .total-box{
  background:linear-gradient(135deg,#fef9c3,#fde68a);
  color:#1e293b;
  border-radius:16px;
  padding:22px 20px;
  border:1px solid #facc15;
}
body[data-layout="saas"] .sticky .total-box small{color:#64748b}
body[data-layout="saas"] .sticky .total-box strong{color:#0f172a}
body[data-layout="saas"] .item-card{
  border-left:4px solid var(--blue);
  border-radius:14px;
}
body[data-layout="saas"] .field input:focus,
body[data-layout="saas"] .field select:focus,
body[data-layout="saas"] .field textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px #2563eb22;
}
body[data-layout="saas"] .management-dashboard .mgmt-card{
  border-radius:16px;
  box-shadow:0 10px 28px #0f172a0c;
}

/* ── Executivo — topo escuro, painéis tipo dashboard/relatório ── */
body[data-layout="executivo"]{
  background:#e5e7eb;
}
body[data-layout="executivo"] .top{
  background:var(--navy);
  border-bottom:3px solid var(--yellow);
  color:#fff;
  margin-bottom:22px;
  padding:14px 24px;
}
body[data-layout="executivo"] .brand h1,
body[data-layout="executivo"] .brand h1 span{color:#fff}
body[data-layout="executivo"] .nav-actions{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
body[data-layout="executivo"] .nav-actions .btn{color:#e2e8f0}
body[data-layout="executivo"] .nav-actions .nav-active{
  background:var(--yellow);
  color:var(--text-on-destaque,#111);
}
body[data-layout="executivo"] .top-tools .btn-light{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:#fff;
}
body[data-layout="executivo"] .card .head{
  background:var(--navy);
  color:var(--text-on-escura,#fff);
  border-bottom:0;
  padding:14px 22px;
}
body[data-layout="executivo"] .card .head .title,
body[data-layout="executivo"] .card .head .muted{color:inherit}
body[data-layout="executivo"] .card .head .muted{opacity:.75}
body[data-layout="executivo"] .management-dashboard{
  background:var(--navy);
  border-radius:18px;
  padding:16px;
  color:#fff;
}
body[data-layout="executivo"] .management-dashboard .mgmt-card{
  background:rgba(255,255,255,.06);
  border:1px solid var(--yellow);
  border-radius:14px;
}
body[data-layout="executivo"] .management-dashboard .mgmt-card b{color:#fff}
body[data-layout="executivo"] .quote-items-table th,
body[data-layout="executivo"] .admin-table th{
  background:var(--navy);
}
body[data-layout="executivo"] #quotesList .quote-management-row:nth-child(odd){
  background:#fffbeb;
  border-radius:12px;
  padding-left:8px;
  padding-right:8px;
}

/* ── Agenda CRM — lista de clientes com destaque e ficha lateral ── */
body[data-layout="agenda"]{
  background:#f0f4f8;
}
body[data-layout="agenda"] .card{
  border-radius:20px;
  border:1px solid #e2e8f0;
  box-shadow:0 12px 40px #0f172a0c;
}
body[data-layout="agenda"] #agendaTab .agenda-layout{
  gap:20px;
}
body[data-layout="agenda"] .agenda-list-item{
  border-radius:16px;
  border:1px solid #e2e8f0;
  border-left:4px solid var(--blue);
  box-shadow:0 4px 16px #0f172a06;
  transition:transform .15s ease,box-shadow .15s ease;
}
body[data-layout="agenda"] .agenda-list-item:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px #0f172a10;
}
body[data-layout="agenda"] .agenda-list-item.is-active,
body[data-layout="agenda"] .agenda-list-item.active{
  background:#eff6ff;
  border-left-color:var(--yellow);
}
body[data-layout="agenda"] .agenda-side-card{
  box-shadow:0 20px 50px #0f172a14;
  border-radius:22px;
}
body[data-layout="agenda"] .client-lookup-item{
  border-radius:14px;
  border-left:3px solid var(--green);
}
body[data-layout="agenda"] .field input,
body[data-layout="agenda"] .field textarea{
  border-radius:14px;
  background:#fafbfc;
}

/* ── Premium — espaçamento generoso, cantos suaves, visual refinado ── */
body[data-layout="premium"]{
  background:linear-gradient(145deg,#fafbfc,#f1f5f9);
  letter-spacing:.01em;
}
body[data-layout="premium"] .card{
  border-radius:24px;
  border:1px solid #e8edf2;
  box-shadow:0 20px 50px #0f172a0a;
}
body[data-layout="premium"] .head{padding:24px 28px 16px}
body[data-layout="premium"] .body{padding:24px 28px 30px}
body[data-layout="premium"] .btn{
  border-radius:999px;
  padding:12px 20px;
  letter-spacing:.02em;
}
body[data-layout="premium"] .top{
  background:linear-gradient(90deg,#fff,#f8fafc);
  border-bottom:1px solid #e5eaf0;
  box-shadow:0 8px 32px #0f172a06;
}
body[data-layout="premium"] .total-box strong{
  font-size:42px;
  font-weight:300;
  letter-spacing:-.02em;
}
body[data-layout="premium"] .item-card{
  border-radius:20px;
  padding:18px 20px;
}

/* ── Compacto — balcão: mais informação na tela ── */
body[data-layout="compacto"] .wrap{padding:6px 10px 16px}
body[data-layout="compacto"] .top{
  margin-bottom:14px;
  padding:8px 14px;
}
body[data-layout="compacto"] .btn{
  padding:8px 14px;
  min-height:34px;
  font-size:13px;
}
body[data-layout="compacto"] .card .head{padding:12px 16px 8px}
body[data-layout="compacto"] .card .body{padding:12px 16px 16px}
body[data-layout="compacto"] .title{font-size:16px}
body[data-layout="compacto"] .form-grid{gap:10px}
body[data-layout="compacto"] .field label{font-size:10px;margin-bottom:4px}
body[data-layout="compacto"] .field input,
body[data-layout="compacto"] .field select,
body[data-layout="compacto"] .field textarea{
  min-height:38px;
  padding:8px 12px;
  font-size:13px;
}
body[data-layout="compacto"] .grid{
  grid-template-columns:minmax(0,1fr) 340px;
  gap:14px;
  padding:0 12px;
}
body[data-layout="compacto"] .nav-actions .btn{padding:8px 14px;font-size:13px}

/* Cards de escolha na configuração */
.brand-layout-section{margin-top:18px;padding-top:16px;border-top:1px dashed #dbe3ee}
.brand-layout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.brand-layout-card{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding:12px;border:2px solid #e5e7eb;border-radius:16px;background:#fff;cursor:pointer;text-align:left;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.brand-layout-card:hover{border-color:#facc15;box-shadow:0 8px 24px #0f172a10;transform:translateY(-1px)}
.brand-layout-card.is-active{border-color:var(--navy);box-shadow:0 0 0 3px var(--focus-ring,#facc1533)}
.brand-layout-card b{font-size:13px;color:#0f172a}
.brand-layout-card small{font-size:11px;color:#64748b;line-height:1.35}
.brand-layout-card .brand-layout-thumb{
  height:56px;border-radius:10px;border:1px solid #e5e7eb;overflow:hidden;position:relative;
}
.brand-layout-card[data-layout="classico"] .brand-layout-thumb{background:linear-gradient(135deg,#f3f6f9,#fff)}
.brand-layout-card[data-layout="saas"] .brand-layout-thumb{background:linear-gradient(180deg,#fff 40%,#fef9c3 100%)}
.brand-layout-card[data-layout="executivo"] .brand-layout-thumb{background:linear-gradient(180deg,#0f172a 55%,#facc15 55%)}
.brand-layout-card[data-layout="agenda"] .brand-layout-thumb{background:linear-gradient(90deg,#eff6ff 45%,#fff 45%);border-left:4px solid #2563eb}
.brand-layout-card[data-layout="premium"] .brand-layout-thumb{background:linear-gradient(145deg,#fafbfc,#e2e8f0);border-radius:14px}
.brand-layout-card[data-layout="compacto"] .brand-layout-thumb{background:repeating-linear-gradient(0deg,#f8fafc,#f8fafc 6px,#e5e7eb 6px,#e5e7eb 7px)}
.brand-layout-default{display:block;font-size:10px;font-weight:800;color:var(--accent-dark,var(--yellow));text-transform:uppercase}