/* Configurações (regras, destinatários, perfis, critérios, pedidos, aprovações).
   Page-scoped rules only; shared components live in ../app.css. Everything
   hangs off .cfg (the page's [data-swap-content] root). */

/* ---- page frame ---- */
.cfg .panel{margin-bottom:20px}
.cfg .panel-head{flex-wrap:wrap;row-gap:4px}
.cfg .panel-head h2.ttl{margin:0;font-size:14px}
/* The sticky top bar would cover a row reached by #anchor (after a save). */
.cfg [id]{scroll-margin-top:96px}
.cfg-lead{margin:0 0 16px;max-width:88ch;font-size:14px;line-height:1.55;color:var(--sec)}
.cfg-lead strong{color:var(--ink)}
.cfg-help{margin:0 0 16px;max-width:88ch;font-size:14px;line-height:1.55;color:var(--ink)}
.cfg-pad{padding:18px 22px 22px}
.cfg-summary{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--sec)}
.cfg-summary strong{color:var(--ink)}
.cfg .hint a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px}
.cfg .mono,.cfg textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cfg .cfg-unit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pending-approvals count on the Aprovações tab: a number to act on. */
.cfg-tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;
  border-radius:6px;background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:700;line-height:1}

/* ---- filter row (Regras, Perfis) ---- */
.cfg-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin:0 0 12px}
.cfg-filter .field{flex:0 1 220px}
.cfg-filter .cfg-filter-q{flex:1 1 280px;max-width:440px}
.cfg-filter .form-actions{margin-top:0}
@media (max-width:560px){
  .cfg-filter .field,.cfg-filter .cfg-filter-q{flex:1 1 100%;max-width:none}
  .cfg-filter .form-actions{width:100%}
}

/* Family shortcuts above a long list. */
.cfg-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.cfg-jump a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none}
.cfg-jump a:hover{border-color:var(--accent);color:var(--accent-strong)}
.cfg-jump-n{color:var(--sec);font-weight:500;font-variant-numeric:tabular-nums}

/* ---- Regras: one <details> per rule ---- */
.cfg-rule-cols,.cfg-rule-sum{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(120px,190px) 84px 16px;
  column-gap:16px;align-items:center}
.cfg-rule-cols{padding:10px 22px;font-size:12.5px;font-weight:600;color:var(--sec);border-bottom:1px solid var(--line)}
.cfg-rule-cols .num{text-align:right}
.cfg-rule+.cfg-rule{border-top:1px solid var(--line-2)}
.cfg-rule-sum{min-height:56px;padding:12px 22px;cursor:pointer;list-style:none;transition:background-color .15s ease}
.cfg-rule-sum::-webkit-details-marker{display:none}
.cfg-rule-sum:hover{background:var(--row-hover)}
.cfg-rule-sum:focus-visible{outline-offset:-3px}
.cfg-rule-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.cfg-rule-main .fname{overflow-wrap:anywhere}
.cfg-rule-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:12.5px;color:var(--sec)}
.cfg-rule-meta .mono{font-size:12px;color:var(--ink)}
.cfg-state.st{padding:2px 8px;font-size:11.5px;gap:5px}
.cfg-rule-why{font-size:13px;line-height:1.45;color:var(--ink)}
.cfg-rule-area{min-width:0;font-size:13px;color:var(--sec);overflow-wrap:anywhere}
.cfg-rule-count{text-align:right;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.cfg-rule-count.is-zero{font-weight:500;color:var(--sec)}
.cfg-chev{color:var(--sec);transition:transform .15s ease}
.cfg-rule[open]>.cfg-rule-sum{background:var(--expanded)}
.cfg-rule[open]>.cfg-rule-sum .cfg-chev{transform:rotate(180deg)}
/* Painted on the children: their backgrounds would cover it on the <details>. */
.cfg-rule[open]>.cfg-rule-sum,.cfg-rule[open]>.cfg-rule-body{box-shadow:inset 3px 0 0 var(--accent)}
.cfg-rule.is-off .cfg-rule-main .fname{color:var(--sec)}
.cfg-rule-body{padding:6px 22px 22px;background:var(--expanded);border-top:1px solid var(--line-2)}
.cfg-about{max-width:88ch;margin:14px 0 12px;font-size:14px;line-height:1.55;color:var(--ink)}
.cfg-dl{display:flex;flex-wrap:wrap;gap:10px 32px;margin:0 0 16px;font-size:13px}
.cfg-dl div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cfg-dl dt{color:var(--sec);font-weight:500}
.cfg-dl dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.cfg-rule-body .notice{max-width:880px}
@media (prefers-reduced-motion:reduce){.cfg-chev,.cfg-rule-sum{transition:none}}

/* ---- forms inside rows ---- */
.cfg-form{max-width:880px}
.cfg-form .form-actions{margin-top:18px}
.cfg-field-label{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.cfg-form textarea[name=reason],.cfg-form textarea[name=decision_note],.cfg-form textarea[name=answer]{min-height:64px}
.cfg-counter{margin-left:4px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cfg-counter.done{color:var(--ok)}
.cfg-adv>summary{display:list-item;width:max-content;max-width:100%;padding:6px 0;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--accent-strong)}
.cfg-adv[open]>summary{margin-bottom:10px}
.cfg-adv textarea{font-size:12.5px;min-height:160px}

/* "O que muda" box, filled by the page script. */
.cfg-diff{margin-top:16px;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);background:var(--surface)}
.cfg-diff.is-empty{border-left-color:var(--bad)}
.cfg-diff-ttl{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--ink)}
.cfg-diff ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6}
.cfg-diff ul:empty{display:none}
.cfg-diff-name{font-weight:600}
.cfg-diff-name::after{content:":"}
.cfg-diff-from{color:var(--sec)}
.cfg-diff-to{font-weight:700;color:var(--ink)}
.cfg-diff-empty{margin:0;font-size:13.5px;font-weight:600;color:var(--bad-ink)}

/* Inline outcome of the last POST, beside the row it touched. */
.cfg-feedback{margin:14px 0}

/* ---- list items: destinatários, pedidos, aprovações ---- */
.cfg-item{padding:18px 22px 22px}
.cfg-item+.cfg-item{border-top:1px solid var(--line)}
.cfg-item:target,.cfg-crit:target{box-shadow:inset 3px 0 0 var(--accent)}
.cfg-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
.cfg-item-head h3{margin:0;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.cfg-sentence{margin:0 0 16px;max-width:88ch;font-size:14px;line-height:1.55;color:var(--ink)}
.cfg-emails{font-weight:600;overflow-wrap:anywhere}
.cfg-meta{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--sec)}
.cfg-meta a{color:var(--accent-strong)}
.cfg-quote{margin:0 0 14px;max-width:880px;padding:10px 14px;border-radius:var(--r-sm);background:var(--neu-bg);
  font-size:14px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.cfg-quote-lbl{font-weight:700}

/* Before → after table of a pending proposal. */
.cfg-item .table-wrap{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r-sm);max-width:880px}
.cfg-change{--table-min:0;font-size:13.5px}
.cfg-change thead th{padding:9px 14px}
.cfg-change tbody th,.cfg-change tbody td{padding:9px 14px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;overflow-wrap:break-word}
.cfg-change td.cfg-change-to{overflow-wrap:anywhere}
.cfg-change tbody tr:last-child>*{border-bottom:0}
.cfg-change tbody th{font-weight:600;width:30%}
.cfg-change td{color:var(--sec)}
.cfg-change td.cfg-change-to{color:var(--ink);font-weight:700}
/* A phone stacks each changed field: name, then "Hoje:" and "Proposto:". */
@media (max-width:560px){
  .cfg-change thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cfg-change tbody tr{display:block;padding:10px 14px;border-bottom:1px solid var(--line-2)}
  .cfg-change tbody tr:last-child{border-bottom:0}
  .cfg-change tbody th,.cfg-change tbody td{display:block;width:auto;padding:2px 0;border:0}
  .cfg-change tbody td::before{content:attr(data-th) ": ";font-weight:600;color:var(--sec)}
}

/* History tables (criteria changes, closed requests, decided proposals). */
.cfg-hist{font-size:13.5px}
.cfg-hist td{vertical-align:top;line-height:1.5}
.cfg-hist .sub-cnpj{display:block}

/* ---- Critérios gerais ---- */
.cfg-sevmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;padding:12px 16px 16px;max-width:880px}
.cfg-sevmap legend{font-size:13.5px;font-weight:600;color:var(--ink)}
/* One line per criticality: the pill names it, the select says what it does. */
.cfg-sevrow{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px;min-width:0}
.cfg-sevrow select{width:100%}
.cfg-crit .cfg-form>.hint{margin:10px 0 18px;max-width:88ch;font-size:13px;line-height:1.45;color:var(--sec)}
.cfg-crit .cfg-form>.field{max-width:880px}
@media (max-width:900px){.cfg-sevmap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.cfg-sevrow{grid-template-columns:84px minmax(0,1fr);gap:10px}}

/* ---- Perfis: a table on desktop, one card per customer on a phone ---- */
.cfg-profiles{--table-min:760px}
.cfg-profiles:not(.is-editable){--table-min:0}
.cfg-profiles tbody th{padding:12px 20px;border-bottom:1px solid var(--line-2);text-align:left;font-weight:400;vertical-align:middle}
.cfg-profiles tbody tr:last-child>*{border-bottom:0}
.cfg-profiles tbody td{padding-top:10px;padding-bottom:10px}
.cfg-prof-name .fname,.cfg-prof-name .sub-cnpj{display:block}
.cfg-prof-flag{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--ink)}
.cfg-profiles select{min-width:130px}
.cfg-profiles .cfg-prof-reason{width:36%}
.cfg-profiles input[type=text]{width:100%;min-width:220px}
.cfg-profiles tr.is-target>*,.cfg-profiles tr:target>*{background:var(--expanded)}
.cfg-prof-feedback td{padding:4px 20px 12px}
.cfg-prof-feedback .cfg-feedback{margin:0}
.cfg-mlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:720px){
  .cfg-rule-cols{display:none}
  .cfg-rule-sum{grid-template-columns:auto minmax(0,1fr) auto 16px;
    grid-template-areas:"main main main chev" "sev area count count";row-gap:8px;padding:12px 16px}
  .cfg-rule-sev{grid-area:sev}
  .cfg-rule-main{grid-area:main}
  .cfg-rule-area{grid-area:area}
  .cfg-rule-count{grid-area:count;font-size:13px}
  .cfg-chev{grid-area:chev;align-self:start;margin-top:2px}
  .cfg .cfg-unit{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-weight:500}
  .cfg-rule-body{padding:4px 16px 18px}
  .cfg-item{padding:16px}
  .cfg-pad{padding:16px}

  .cfg-profiles.is-editable{--table-min:0}
  .cfg-profiles.is-editable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cfg-profiles.is-editable tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;
    padding:14px 16px;border-bottom:1px solid var(--line-2)}
  .cfg-profiles.is-editable tbody tr>*{display:block;padding:0;border:0}
  .cfg-profiles.is-editable .cfg-prof-avg{align-self:start;text-align:right;font-weight:600}
  .cfg-profiles.is-editable .cfg-prof-avg .cfg-mlabel{display:none}
  .cfg-profiles.is-editable .cfg-prof-tier{grid-column:1/-1}
  .cfg-profiles.is-editable .cfg-prof-reason{grid-column:1;width:auto}
  .cfg-profiles.is-editable .cfg-prof-act{grid-column:2;align-self:end}
  .cfg-profiles.is-editable .cfg-mlabel{position:static;width:auto;height:auto;overflow:visible;clip:auto;
    display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ink);white-space:normal}
  .cfg-profiles.is-editable select,.cfg-profiles.is-editable input[type=text]{width:100%;min-width:0}
  .cfg-profiles.is-editable .cfg-prof-act .btn{min-height:var(--control-h)}
  .cfg-prof-feedback{display:block}
}