/* SNet Gestão Webservices · Core UI v1.0
   Padrão único de layout/header/avatar/menu/footer para o Portal de Gestão Webservices.
   Não incluir segredos, tokens ou valores sensíveis neste arquivo. */

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#e9eef5;
  color:#0f172a;
}

/* Shell */
.snet-page{
  min-height:100vh;
  max-width:1420px;
  margin:0 auto;
  padding:0 10px 10px;
  display:flex;
  flex-direction:column;
}
.wrap{
  flex:1 0 auto;
  margin-top:6px;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Header */
.snet-banner-card{
  height:64px;
  min-height:64px;
  background:#f8fafc;
  border:1px solid #dbe3ec;
  border-top:0;
  border-radius:0 0 14px 14px;
  display:grid;
  grid-template-columns:90px minmax(0,1fr) 70px;
  align-items:center;
  gap:8px;
  padding:5px 12px;
  flex:0 0 auto;
  overflow:visible;
}
.snet-logo-top{
  grid-column:1;
  position:static;
  width:58px;
  max-width:58px;
  max-height:42px;
  height:auto;
  object-fit:contain;
  display:block;
  justify-self:start;
}
.snet-suite-banner{
  grid-column:2;
  width:310px;
  max-width:100%;
  max-height:50px;
  height:auto;
  object-fit:contain;
  display:block;
  justify-self:center;
  margin:0 auto;
}
.snet-user-menu,
.user-menu{
  grid-column:3;
  justify-self:end;
  align-self:center;
  position:relative;
  flex-shrink:0;
  z-index:30;
}

/* Avatar padrão */
.snet-user-avatar,
.snet-user-avatar img,
.snet-user-avatar-img,
.snet-user-avatar-fallback{
  width:46px;
  height:46px;
  min-width:46px;
  max-width:46px;
  min-height:46px;
  max-height:46px;
  border-radius:999px;
}
.snet-user-avatar{
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#07395c;
  border:2px solid #fff;
  box-shadow:0 5px 12px rgba(15,23,42,.18);
  cursor:pointer;
}
.snet-user-avatar-img{
  object-fit:cover;
  display:block;
}
.snet-user-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#07395c;
  font-weight:800;
  font-size:15px;
  letter-spacing:.02em;
}
.user-badge{display:none}
.user-pop,
.snet-user-pop{
  display:none;
  position:absolute;
  top:52px;
  right:0;
  width:280px;
  background:#fff;
  border:1px solid #dbe3ec;
  border-radius:14px;
  box-shadow:0 14px 30px rgba(15,23,42,.16);
  padding:12px;
  z-index:9999;
}
.user-pop::before,
.snet-user-pop::before{
  content:"";
  position:absolute;
  top:-14px;
  right:0;
  width:100%;
  height:18px;
}
.user-menu:hover .user-pop,
.user-pop:hover,
.snet-user-menu:hover .snet-user-pop,
.snet-user-pop:hover{display:block}
.user-pop h3,
.snet-user-pop h3{
  margin:0 0 7px;
  color:#0f172a;
  font-size:15px;
}
.user-pop p,
.snet-user-pop p{
  margin:5px 0;
  color:#475569;
  font-size:12px;
  line-height:1.3;
}
.logout-btn,
.snet-logout-btn{
  display:inline-flex;
  margin-top:9px;
  background:#07395c;
  color:#fff;
  text-decoration:none;
  padding:8px 11px;
  border-radius:9px;
  font-weight:700;
  font-size:12px;
}

/* Menu */
.snet-menu{
  margin-top:6px;
  background:#f8fafc;
  border:1px solid #dbe3ec;
  border-radius:13px;
  padding:5px;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  flex:0 0 auto;
}
.snet-menu a{
  text-decoration:none;
  color:#0b3552;
  font-weight:700;
  font-size:13px;
  padding:7px 10px;
  border-radius:9px;
}
.snet-menu a:hover,
.snet-menu a.active{
  background:#07395c;
  color:#fff;
}

/* Conteúdo */
.panel{
  background:#f8fafc;
  border:1px solid #dbe3ec;
  border-radius:15px;
  padding:13px;
}
.panel + .panel{margin-top:8px!important}
.section-title{
  margin:0 0 11px;
  color:#0b3552;
  font-size:19px;
  line-height:1.2;
  font-weight:700;
}
.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.card{
  background:#fff;
  border:1px solid #dbe3ec;
  border-radius:13px;
  padding:10px 12px;
}
.card h3{
  margin:0 0 6px;
  font-size:13px;
  color:#64748b;
  font-weight:700;
}
.card strong{
  display:block;
  color:#0b3552;
  font-size:22px;
  line-height:1.08;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 10px;
}
.btn{
  border:0;
  border-radius:9px;
  padding:9px 12px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.btn.primary{background:#087a5d;color:#fff}
.btn.secondary{background:#e5e7eb;color:#334155}
.btn.dark{background:#07395c;color:#fff}
.btn.disabled,.btn:disabled{background:#94a3b8;color:#fff;cursor:not-allowed}

/* Ações compactas em tabelas */
.table-actions{
  width:132px;
  min-width:132px;
  white-space:nowrap;
}
.action-stack{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.action-stack form{
  display:inline-flex;
  margin:0;
}
.btn.btn-xs{
  min-height:28px;
  padding:5px 8px;
  border-radius:8px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.small-note,
.muted{
  color:#64748b;
  font-size:12px;
}

/* Forms */
.filters{
  display:grid;
  grid-template-columns:1.5fr auto auto;
  gap:10px;
  align-items:end;
  margin:10px 0 12px;
}
.field label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:5px;
  color:#0b3552;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:10px 11px;
  border:1px solid #cfd8e3;
  border-radius:9px;
  background:#eef4fb;
  font-size:14px;
}

/* Tabelas */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #dbe3ec;
  border-radius:12px;
  overflow:hidden;
}
th,td{
  padding:8px 10px;
  border-bottom:1px solid #e5e7eb;
  font-size:13px;
  text-align:left;
  vertical-align:top;
}
th{
  background:#eef2f6;
  color:#0b3552;
  font-weight:700;
}
tr:last-child td{border-bottom:0}
tr.row-anchor:target,
tr.row-item:target{
  outline:3px solid #93c5fd;
  background:#eff6ff;
}
.api-table-wrap{width:100%;overflow-x:auto}

/* Tags/status */
.tag{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.igual{background:#dcfce7;color:#166534}
.diferente{background:#fef3c7;color:#92400e}
.somente_dev{background:#dbeafe;color:#1d4ed8}
.somente_prod{background:#fee2e2;color:#991b1b}
.alert{
  padding:10px 12px;
  border-radius:9px;
  margin-bottom:10px;
  font-size:13px;
  border:1px solid transparent;
}
.alert.error{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.alert.ok{background:#dcfce7;color:#166534;border-color:#bbf7d0}

/* Login compacto */
.login-wrap{
  width:100%;
  max-width:440px;
  margin:22px auto 0;
}
.login-panel{
  background:#f8fafc;
  border:1px solid #dbe3ec;
  border-radius:15px;
  padding:18px 22px 22px;
}
.login-title{
  margin:0 0 14px;
  color:#0b3552;
  font-size:19px;
  letter-spacing:.03em;
  font-weight:700;
}
.login-form .field{margin-bottom:11px}
.login-form label{
  display:block;
  margin-bottom:5px;
  font-size:13px;
  font-weight:700;
  color:#0f172a;
}
.login-form input{
  width:100%;
  padding:10px 11px;
  border:1px solid #cfd8e3;
  border-radius:9px;
  background:#eef4fb;
  font-size:14px;
}
.login-btn{
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:9px;
  background:#087a5d;
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  margin-top:3px;
}

/* Modais e blocos específicos migrados das páginas */
.api-modal-backdrop,
.diff-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.56);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}
.api-modal-backdrop.open,
.diff-modal-backdrop.open{display:flex}
.api-modal,
.diff-modal{
  width:min(1080px,96vw);
  max-height:88vh;
  background:#fff;
  border-radius:18px;
  border:1px solid #dbe3ec;
  box-shadow:0 22px 60px rgba(15,23,42,.30);
  overflow:hidden;
}
.diff-modal{width:min(1180px,96vw);display:flex;flex-direction:column}
.api-modal{overflow:auto}
.api-modal-header,
.diff-modal-header{
  position:sticky;
  top:0;
  background:#f7f8fa;
  border-bottom:1px solid #dbe3ec;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  z-index:1;
}
.api-modal-header h2,
.diff-modal-header h2{
  margin:0;
  color:#0b3552;
  font-size:18px;
}
.api-modal-body{padding:16px 18px 18px}
.diff-modal-body{padding:0;overflow:auto}
.api-modal-close,
.diff-copy,
.diff-close{
  border:0;
  background:#07395c;
  color:#fff;
  border-radius:10px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
.diff-copy{background:#087a5d}
.diff-modal-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.diff-copy-feedback{font-size:12px;color:#166534;font-weight:700;display:none}
.diff-pre,
.validation-box,
.log-lines{
  background:#0f172a;
  color:#e5e7eb;
  border-radius:12px;
  padding:12px;
  font-size:12px;
  line-height:1.45;
  overflow:auto;
}
.diff-pre{margin:0;border-radius:0;white-space:pre;min-height:360px}
.validation-box{max-height:220px;white-space:pre-wrap}
.log-lines{max-height:260px}
.log-line-item{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
.log-line-item:last-child{border-bottom:0;margin-bottom:0}
.log-file-path{display:block;color:#93c5fd;margin-bottom:4px;font-size:11px}
.log-command-box{
  background:#f8fafc;
  border:1px solid #dbe3ec;
  border-radius:12px;
  padding:10px;
  margin-top:8px;
}
.log-command-box code{display:block;margin:4px 0}
.api-kv{width:100%;border-collapse:separate;border-spacing:0}
.api-kv th{width:230px;background:#eef2f6;color:#0b3552}
.api-kv td,.api-kv th{padding:10px 12px;border-bottom:1px solid #e5e7eb;vertical-align:top}
.api-kv code{white-space:pre-wrap;word-break:break-word}
.diff-help{
  background:#f8fafc;
  border:1px solid #dbe3ec;
  border-radius:13px;
  padding:10px 12px;
  margin-bottom:12px;
  color:#475569;
  font-size:13px;
}
.file-note{display:block;margin-top:5px;color:#64748b;font-size:12px;line-height:1.35;max-width:420px}

/* Rodapé */
.footer-box{
  margin-top:6px;
  background:#f8fafc;
  border:1px solid #dbe3ec;
  border-radius:15px;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  color:#64748b;
  font-size:12px;
  flex:0 0 auto;
}
.footer-left{font-weight:700}

@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{grid-template-columns:1fr}
  .footer-box{flex-direction:column;align-items:flex-start}
}
@media (max-width:700px){
  .snet-banner-card{grid-template-columns:60px 1fr 52px;height:62px;min-height:62px;padding:5px 8px}
  .snet-logo-top{width:46px;max-width:46px}
  .snet-suite-banner{width:220px;max-height:44px}
  .snet-user-avatar,.snet-user-avatar img,.snet-user-avatar-img,.snet-user-avatar-fallback{
    width:42px;height:42px;min-width:42px;max-width:42px;min-height:42px;max-height:42px;
  }
  .grid{grid-template-columns:1fr}
  .snet-menu a{font-size:12px;padding:7px 9px}
  th,td{font-size:12px}
  .card strong{font-size:20px}
}

/* Provider secrets */
.actions-cell{white-space:nowrap;min-width:120px}
.actions-cell .btn{margin:2px 2px 2px 0}
.provider-secret-selector{grid-template-columns:minmax(260px,420px) 1fr;align-items:end}
.provider-secret-note{color:#64748b;font-size:12px;line-height:1.35;padding-bottom:9px}
.provider-secret-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.provider-secret-card,.provider-secret-form-card{background:#fff;border:1px solid #dbe3ec;border-radius:14px;padding:12px}
.provider-secret-card h3,.provider-secret-form-card h3{margin:0 0 10px;color:#0b3552;font-size:16px}
.provider-secret-status-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.provider-secret-status-table th,.provider-secret-status-table td{padding:8px 9px;font-size:12px;border-bottom:1px solid #e5e7eb;vertical-align:top}
.provider-secret-status-table th{background:#f1f5f9;color:#0b3552}
.provider-secret-status-table tr:last-child td{border-bottom:0}
.provider-secret-error{color:#991b1b;display:inline-block;max-width:260px;word-break:break-word}
.provider-secret-form-grid{display:grid;grid-template-columns:180px repeat(2,minmax(220px,1fr));gap:10px;align-items:end;margin-bottom:10px}
.provider-secret-form-grid .field input[type=password]{font-family:Arial,Helvetica,sans-serif}
@media (max-width:900px){.provider-secret-grid,.provider-secret-selector,.provider-secret-form-grid{grid-template-columns:1fr}}

/* Provider secrets v1.3 - tela compacta */
.provider-secret-page .section-title{margin-bottom:4px!important}
.provider-secret-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:10px}
.provider-secret-selector-inline{display:flex;align-items:end;gap:8px;min-width:320px}
.provider-secret-selector-inline label{font-size:12px;font-weight:700;color:#0b3552;display:block}
.provider-secret-selector-inline select{width:240px;padding:8px 10px;border:1px solid #cfd8e3;border-radius:10px;background:#eef4fb;font-size:13px}
.provider-secret-form-card-compact{padding:10px 12px!important;margin:8px 0 10px!important}
.provider-secret-form-card-compact h3,.provider-secret-status-card h3{margin:0 0 8px!important;color:#0b3552;font-size:15px!important}
.provider-secret-form-grid{display:grid!important;grid-template-columns:120px repeat(3,minmax(180px,1fr)) 80px!important;gap:8px!important;align-items:end!important;margin-bottom:0!important}
.provider-secret-form-grid .field label{font-size:11px!important;margin-bottom:4px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.provider-secret-form-grid .field input,.provider-secret-form-grid .field select{padding:8px 9px!important;font-size:12px!important;border-radius:9px!important}
.provider-secret-submit-field{display:flex;align-items:end;justify-content:flex-end}
.provider-secret-submit-field .btn{height:34px!important;min-height:34px!important;padding:7px 12px!important;font-size:12px!important;border-radius:9px!important}
.provider-secret-status-card{background:#fff;border:1px solid #dbe3ec;border-radius:14px;padding:10px 12px;margin-top:8px}
.provider-secret-table-wrap{width:100%;overflow:auto}
.provider-secret-status-table-compact{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.provider-secret-status-table-compact th,.provider-secret-status-table-compact td{padding:7px 8px!important;font-size:12px!important;border-bottom:1px solid #e5e7eb!important;vertical-align:middle!important}
.provider-secret-status-table-compact th{background:#f1f5f9;color:#0b3552;font-weight:700}
.provider-secret-status-table-compact tr:last-child td{border-bottom:0!important}
.provider-secret-status-table-compact code{font-size:12px!important;background:transparent!important;padding:0!important}
.provider-secret-status-table-compact .tag{padding:4px 8px!important;font-size:11px!important}
.provider-secret-error-dot{display:inline-flex;margin-left:6px;width:16px;height:16px;border-radius:999px;background:#fee2e2;color:#991b1b;align-items:center;justify-content:center;font-size:11px;font-weight:800;cursor:help}
.provider-secret-note{display:none!important}
@media (max-width:1100px){.provider-secret-head{display:block}.provider-secret-selector-inline{margin-top:8px;min-width:0}.provider-secret-selector-inline select{width:100%}.provider-secret-form-grid{grid-template-columns:1fr!important}}


/* Provider secrets v1.4 - sem texto explicativo na tela */
.provider-secret-head{align-items:center!important;margin-bottom:8px!important}
.provider-secret-page .section-title{margin:0!important;font-size:20px!important}
.provider-secret-head > div{display:flex;align-items:center;gap:10px}
.provider-secret-selector-inline{align-items:center!important}
.provider-secret-selector-inline label{margin:0!important}
.provider-secret-form-card-compact{margin-top:6px!important}
.provider-secret-status-card{margin-top:7px!important}
.provider-secret-status-table-compact th:nth-child(4),
.provider-secret-status-table-compact td:nth-child(4){width:170px}
.provider-secret-status-table-compact th:nth-child(5),
.provider-secret-status-table-compact td:nth-child(5){width:210px}

/* Provider Secrets v1.5 */
.provider-secret-head-clean{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}
.provider-secret-head-clean .section-title{margin:0}
.provider-secret-selector-inline{display:flex;align-items:end;gap:8px;margin:0}
.provider-secret-selector-inline label{font-size:12px;font-weight:700;color:#0b3552}
.provider-secret-selector-inline select{min-width:280px;padding:9px 11px;border:1px solid #cfd8e3;border-radius:10px;background:#eef4fb;font-size:14px}
.provider-secret-form-card-clean{background:#fff;border:1px solid #dbe3ec;border-radius:14px;padding:12px;margin-bottom:12px}
.provider-secret-form-grid-clean{display:grid;grid-template-columns:1.1fr 1.5fr .7fr .55fr 1.5fr 1.5fr auto;gap:10px;align-items:end}
.provider-secret-form-grid-clean .field label{font-size:12px;margin-bottom:5px}
.provider-secret-form-grid-clean .field input,.provider-secret-form-grid-clean .field select{padding:9px 10px;font-size:13px;border-radius:9px}
.provider-secret-submit-field{display:flex;align-items:end}
.provider-secret-submit-field .btn{height:38px;padding:0 14px}
.provider-secret-status-card-clean{background:#fff;border:1px solid #dbe3ec;border-radius:14px;padding:12px}
.provider-secret-table-wrap{width:100%;overflow:auto}
.provider-secret-status-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #dbe3ec;border-radius:12px;overflow:hidden;background:#fff}
.provider-secret-status-table th,.provider-secret-status-table td{padding:8px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;text-align:left;vertical-align:middle}
.provider-secret-status-table th{background:#eef2f6;color:#0b3552;font-weight:700}
.provider-secret-status-table tr:last-child td{border-bottom:0}
.provider-secret-status-table code{font-size:12px}
.provider-secret-status-table small{font-size:12px;color:#64748b;margin-left:6px}
@media(max-width:1100px){.provider-secret-form-grid-clean{grid-template-columns:1fr 1fr}.provider-secret-submit-field{grid-column:auto}.provider-secret-selector-inline select{min-width:220px}}

/* provider secrets v1.6 - ambiente antes da API, API sem default */
.provider-secret-selector-env-api{
  display:grid;
  grid-template-columns:160px minmax(320px, 1fr);
  gap:10px;
  align-items:end;
  margin-left:auto;
  max-width:760px;
}

.provider-secret-selector-env-api .field{margin:0}
.provider-secret-selector-env-api label{display:block;font-weight:700;margin-bottom:4px}
.provider-secret-selector-env-api select{width:100%}

.provider-secret-empty-card{
  background:#fff;
  border:1px solid #dbe3ec;
  border-radius:14px;
  padding:14px 16px;
  color:#64748b;
  font-size:14px;
}

.provider-secret-form-grid-env-one{
  display:grid;
  grid-template-columns:1fr 1.6fr 120px 100px 1.4fr 88px;
  gap:10px;
  align-items:end;
}

.provider-secret-value-field input{width:100%}

@media (max-width: 1100px){
  .provider-secret-selector-env-api,
  .provider-secret-form-grid-env-one{
    grid-template-columns:1fr 1fr;
    max-width:100%;
  }
}