/* Meu XML — componentes compartilhados: botões, cartões, selos, tabelas,
   barras de ferramentas, diálogos e avisos. */

/* ---------- Botões ---------- */
.primary,.logout,.secondary,.batch-download,.signup-button,.download,.xml-download,
.certificate-history-button,.manifestation-button,.xml-request,.history-delete{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--control-h);padding:10px 16px;border:1px solid transparent;border-radius:var(--r-md);
  font-size:var(--fs-base);font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;
  transition:background-color .15s,border-color .15s,color .15s}
.primary svg,.logout svg,.secondary svg,.download svg,.xml-download svg,.certificate-history-button svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Principal: laranja */
.primary{background:var(--accent);color:var(--accent-ink);font-weight:700}
.primary:hover:not(:disabled){background:var(--accent-hover)}
.primary:disabled{opacity:.5}

/* Secundário: contorno */
.logout,.secondary,.batch-download,.signup-button,.certificate-history-button{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.logout:hover:not(:disabled),.secondary:hover:not(:disabled),.batch-download:hover:not(:disabled),.signup-button:hover,.certificate-history-button:hover:not(:disabled){background:var(--surface-2);border-color:var(--subtle)}
.batch-download:disabled,.logout:disabled,.secondary:disabled,.certificate-history-button:disabled{opacity:.5}

/* Suave: ações de linha (baixar, manifestar) */
.download,.xml-download{background:var(--surface-3);color:var(--text)}
.download:hover:not(:disabled),.xml-download:hover:not(:disabled){background:var(--line)}
.manifestation-button{background:transparent;color:var(--text);border-color:var(--line-strong)}
.manifestation-button:hover{background:var(--surface-2)}

/* Perigo */
.history-delete,.danger-text{background:var(--red-bg);color:var(--red)}
.history-delete:hover,.danger-text:hover{border-color:var(--red-line)}

/* Tamanho compacto */
.primary.small,.logout.small{min-height:40px;padding:8px 14px;font-size:var(--fs-md)}

/* Texto */
.text-button{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;color:var(--accent-text);font-weight:700;text-align:left}
.text-button:hover{text-decoration:underline;text-underline-offset:3px}

/* Botão redondo de fechar */
.dialog-close,.dialog-title>button[data-close],.account-dialog-close,.billing-center-close,.integration-help-close,#closeCost{
  display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--text);
  font-size:22px;line-height:1;font-weight:500}
.dialog-close:hover,.dialog-title>button[data-close]:hover,.account-dialog-close:hover,.billing-center-close:hover,.integration-help-close:hover,#closeCost:hover{background:var(--surface-3);border-color:var(--line-strong)}

/* Troca de tema: ícone sol/lua desenhado em CSS */
.theme-toggle{display:inline-grid;place-items:center;width:var(--control-h);height:var(--control-h);padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-size:0}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ---------- Cartões ---------- */
.panel,.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}
.panel{padding:var(--sp-6);min-width:0}
.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.panel-title h2{font-size:var(--fs-3xl);margin:var(--sp-1) 0}
.panel-title h3{font-size:var(--fs-2xl);margin:var(--sp-1) 0}
.panel-title p{margin:var(--sp-1) 0 0}
.table-panel{padding:0;overflow:hidden}
.table-panel>.panel-title{padding:var(--sp-6) var(--sp-6) 0;margin-bottom:var(--sp-5)}

/* Indicadores */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin:var(--sp-5) 0}
.stat{padding:var(--sp-5)}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);color:var(--muted);font-size:var(--fs-sm)}
.stat strong{display:block;margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-3xl);line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.stat small{color:var(--muted)}
.type-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.type-dot.tone-1{background:var(--green)}.type-dot.tone-2{background:var(--blue)}.type-dot.tone-3{background:var(--amber)}

/* Barras horizontais (largura definida pelo JS via CSSOM) */
.bar{height:8px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .4s ease}

/* ---------- Selos ---------- */
.pill,.sync-pill,.doc-type,.mapping-pill,.plan-usage{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:24px;padding:3px 10px;
  border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;line-height:1.3;white-space:nowrap;
  background:var(--neutral-bg);color:var(--neutral)}
.pill.ok,.sync-pill.ok,.mapping-pill.ok{background:var(--green-bg);color:var(--green)}
.pill.wait,.sync-pill.wait,.mapping-pill.pending{background:var(--amber-bg);color:var(--amber)}
.pill.error,.sync-pill.error{background:var(--red-bg);color:var(--red)}
.sync-pill i,.doc-type i,.mapping-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.doc-type{border-radius:var(--r-sm);padding:3px 8px}
.doc-nfe{background:var(--doc-nfe-bg);color:var(--doc-nfe)}
.doc-nfce{background:var(--doc-nfce-bg);color:var(--doc-nfce)}
.doc-cte{background:var(--doc-cte-bg);color:var(--doc-cte)}
.doc-mdfe{background:var(--doc-mdfe-bg);color:var(--doc-mdfe)}
.doc-nfse{background:var(--doc-nfse-bg);color:var(--doc-nfse)}
.plan-usage{margin-top:var(--sp-2)}

.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:800;line-height:1}

/* ---------- Barra de ferramentas e busca ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.toolbar>*{min-width:0}
.search{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-height:var(--control-h);padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--subtle)}
.search:focus-within{border-color:var(--accent);box-shadow:var(--focus)}
.search input{flex:1;min-height:0;padding:10px 0;border:0;background:transparent;box-shadow:none}
.search input:focus{box-shadow:none}
.result-count{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}

/* ---------- Tabelas ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap>table,.parc-scroll>table{width:100%;min-width:760px}
th,td{padding:14px var(--sp-5);border-top:1px solid var(--line);text-align:left;vertical-align:middle;font-size:var(--fs-md)}
th{background:var(--surface-2);color:var(--muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
tbody tr:hover>td{background:var(--surface-2)}
td .sub{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-sm)}
td strong{font-weight:700}

/* Paginação */
.admin-pagination,#documentPagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line)}
.admin-pagination>span,#documentPagination>span{margin-right:auto;color:var(--muted);font-size:var(--fs-sm)}
.admin-pagination button,#documentPagination button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-md);font-weight:600}
.admin-pagination button:hover:not(:disabled),#documentPagination button:hover:not(:disabled){background:var(--surface-2)}
.admin-pagination button:disabled,#documentPagination button:disabled{opacity:.4;cursor:default}
#documentPagination button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#documentPagination>label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
#documentPagination select{width:auto;min-height:36px;padding:6px 32px 6px 10px;font-size:var(--fs-md)}
#documentPagination .document-page-actions{display:flex;gap:var(--sp-2)}

.admin-list-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-4);padding:0 var(--sp-6) var(--sp-5)}
.admin-list-toolbar label{flex:0 1 200px;color:var(--muted);font-weight:500}
.admin-list-toolbar label:first-child{flex:1 1 260px}

/* ---------- Diálogos ---------- */
/* Altura máxima das janelas: tela menos as áreas seguras do iPhone e uma folga */
:root{--dialog-max-h:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px)}
dialog{padding:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
/* Janela modal sempre no meio da tela, também no iPhone, longe da barra de status e do menu de baixo */
/* Com uma janela aberta, a página de trás não rola (nem no iPhone); só o conteúdo da janela */
html:has(dialog:modal),html:has(dialog:modal) body{overflow:hidden}
dialog{overscroll-behavior:contain}
dialog:modal{position:fixed;top:50%;left:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);max-height:var(--dialog-max-h)}
dialog.form-dialog{width:min(720px,calc(100vw - 32px));max-height:var(--dialog-max-h);overflow:auto}
.form-dialog>form{display:grid;gap:var(--sp-5);padding:var(--sp-6) var(--sp-8) var(--sp-8)}
.compact-dialog{width:min(560px,calc(100vw - 32px))}
.dialog-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.dialog-title h2{margin:var(--sp-1) 0;font-size:var(--fs-2xl)}
.dialog-title p{margin:var(--sp-1) 0 0}
.dialog-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-3)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.form-grid .wide{grid-column:1/-1}
.form-grid label small{color:var(--muted);font-weight:400;line-height:1.4}
.checks{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5)}
.checks label,.show-password{display:flex;align-items:center;gap:var(--sp-2);font-weight:500;cursor:pointer}

/* Diálogo com cabeçalho, conteúdo rolável e rodapé fixos */
.history-dialog{width:min(760px,calc(100vw - 32px));overflow:hidden}
.history-dialog[open]{display:flex;flex-direction:column;max-height:var(--dialog-max-h)}
.history-dialog-header{flex:none;padding:var(--sp-6) var(--sp-8);border-bottom:1px solid var(--line)}
.history-dialog-content{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--sp-6) var(--sp-8)}
.history-dialog-footer{flex:none;padding:var(--sp-4) var(--sp-8);border-top:1px solid var(--line)}

/* Linhas de histórico (certificados e certidões) */
.certificate-history{display:grid;gap:var(--sp-3)}
.history-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:start;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.history-status-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:var(--green-bg);color:var(--green)}
.history-status-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.history-information{min-width:0}
.history-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.history-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-6)}
.history-details div{min-width:0}
.history-details small{display:block;margin-bottom:2px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.history-details b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}
.history-reason{grid-column:1/-1}
.history-row.clearance-history-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.clearance-history-information{display:grid;justify-items:start;gap:var(--sp-2);min-width:0}
.clearance-history-information h3{margin:var(--sp-2) 0 0;font-size:var(--fs-lg)}
.clearance-history-information small{color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.clearance-history-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.history-report-download{white-space:normal;text-align:center}

/* ---------- Avisos ---------- */
.toast{position:fixed;right:var(--sp-6);bottom:var(--sp-6);z-index:90;max-width:min(420px,calc(100vw - 32px));padding:12px 18px;border-radius:var(--r-md);background:var(--chrome);color:var(--chrome-text);font-size:var(--fs-base);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
:root[data-theme="dark"] .toast{background:var(--surface-3);border:1px solid var(--line-strong)}
.toast.show{opacity:1;transform:none}

.notice,.clearance-notice,.cost-notice{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);color:var(--text);font-size:var(--fs-md);line-height:1.5}
.clearance-notice strong{display:block;margin-bottom:2px}
.cost-notice{color:var(--muted)}

/* Saúde e alertas do painel */
.health-cards{display:grid;gap:var(--sp-3)}
.health{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.health i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-bg)}
.health.warning i{background:var(--amber);box-shadow:0 0 0 4px var(--amber-bg)}
.health.error i{background:var(--red);box-shadow:0 0 0 4px var(--red-bg)}
.health strong,.health small{display:block}
.health small{margin-top:2px;color:var(--muted)}
.health-alert-link{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-sm);color:var(--accent-text);font-size:var(--fs-md);font-weight:700;white-space:nowrap}
.health-alert-link:hover{background:var(--accent-soft)}

/* Regras de senha */
.password-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-5);padding:var(--sp-4);border-radius:var(--r-lg);background:var(--surface-2);color:var(--muted);font-size:var(--fs-sm)}
.password-rules span,.password-match{display:flex;align-items:center;gap:var(--sp-2)}
.password-rules span::before,.password-match::before{content:"✓";display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--surface-3);color:var(--subtle);font-size:11px;font-weight:800}
.password-rules span.valid{color:var(--green)}
.password-rules span.valid::before,.password-match.valid::before{background:var(--green-bg);color:var(--green)}
.password-match{color:var(--red);font-size:var(--fs-sm);font-weight:600}
.password-match:not(.valid)::before{content:"×";background:var(--red-bg);color:var(--red)}
.password-match.valid{color:var(--green)}

/* Campo com botão ao lado (CNPJ + consultar) */
.input-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2)}
.input-action button{padding:0 var(--sp-5);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface-2);font-weight:700}
.input-action button:hover{background:var(--surface-3)}
.lookup-status,.registry-status{display:block;min-height:17px;color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.lookup-status.loading,.registry-status.loading{color:var(--blue)}
.lookup-status.success,.registry-status.success{color:var(--green)}
.lookup-status.error,.registry-status.error{color:var(--red)}
.registry-status{grid-column:1/-1;margin-top:calc(var(--sp-2) * -1)}

/* ---------- Responsivo ---------- */
@media (max-width:1000px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .panel{padding:var(--sp-4);border-radius:var(--r-lg)}
  .table-panel{padding:0}
  .table-panel>.panel-title{padding:var(--sp-4) var(--sp-4) 0;margin-bottom:var(--sp-4)}
  .panel-title{flex-wrap:wrap}
  .panel-title h3{font-size:var(--fs-xl)}
  .stats{gap:var(--sp-3)}
  .stat{padding:var(--sp-4)}
  .stat strong{font-size:var(--fs-xl)}
  .form-dialog>form{padding:var(--sp-5)}
  .form-grid{grid-template-columns:1fr}
  .history-dialog-header,.history-dialog-content,.history-dialog-footer{padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .history-row{grid-template-columns:36px minmax(0,1fr)}
  .history-row>button{grid-column:1/-1}
  .history-row.clearance-history-row{grid-template-columns:1fr}
  .history-details{grid-template-columns:1fr}
  .history-report-download{width:100%}
  .password-rules{grid-template-columns:1fr}
  .admin-list-toolbar{padding:0 var(--sp-4) var(--sp-4)}
  .admin-pagination,#documentPagination{padding:var(--sp-4)}
  input:where(:not([type=checkbox],[type=radio])),select,textarea{font-size:16px}
  .toast{left:var(--sp-4);right:var(--sp-4);bottom:calc(84px + env(safe-area-inset-bottom));max-width:none}
}