/* ============================================================
   Telas específicas + login + responsividade
   ============================================================ */

/* ---------- Login: terminal contido, elegante e institucional ---------- */
.login-root {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(62, 130, 102, 0.08), transparent 60%),
    var(--bg-0);
}
.login-frame { width: min(100%, 460px); }
.login-card {
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.login-chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 9px var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.login-chrome .dots { display: flex; gap: 5px; }
.login-chrome .dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  display: block;
}
.login-body { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.login-brand {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}
.login-brand .caret { color: var(--accent); }
.login-brand .path { color: var(--text-1); font-weight: 600; }
.login-body h1 { font-size: var(--fs-xl); margin-bottom: 4px; }
.login-sub { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

.login-form { display: grid; gap: var(--sp-3); }
.field { display: grid; gap: 5px; }
.field > label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.field .input { min-height: 42px; font-family: var(--font-mono); }
.field-hint { font-size: var(--fs-xs); color: var(--text-3); }
.login-form .btn { min-height: 42px; margin-top: var(--sp-1); }

.login-divider { color: var(--text-3); font-size: var(--fs-xs); text-align: center; }

.login-alert {
  border: 1px solid rgba(217, 112, 95, 0.4);
  border-left-width: 3px;
  background: var(--err-dim);
  color: var(--text-1);
  border-radius: var(--radius);
  padding: 10px var(--sp-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}
.login-alert.is-info { border-color: rgba(130, 174, 204, 0.4); background: var(--info-dim); }

.login-foot {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-align: center;
}
.login-foot .caret { color: var(--accent); }


/* ---------- Visão geral ---------- */
.overview-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid rgba(102, 183, 140, 0.35);
  background: var(--ok-dim);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.overview-banner[data-tone="warn"] { border-color: rgba(217, 164, 65, 0.4); background: var(--warn-dim); }
.overview-banner[data-tone="err"] { border-color: rgba(217, 112, 95, 0.4); background: var(--err-dim); }
.overview-banner .headline { font-weight: 650; }
.overview-banner .meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- Detalhe do cadastro ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4);
  align-items: start;
}
.detail-col { display: grid; gap: var(--sp-4); min-width: 0; }
.pii-panel { border-color: rgba(217, 164, 65, 0.35); }

/* ---------- Revelação controlada de PII (V1.4) ---------- */
.pii-list {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}
.pii-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.pii-row-main { min-width: 0; flex: 1 1 auto; }
.pii-row-label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pii-row-value {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pii-row-status {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.pii-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  flex: 0 0 auto;
}
.pii-row[data-pii-state="revealed"] { border-color: rgba(217, 164, 65, 0.55); }
.pii-row[data-pii-state="expiring"] { border-color: var(--err); }
.pii-row[data-pii-state="expiring"] .pii-row-status { color: var(--err); }
.pii-row[data-pii-state="denied"] .pii-row-status,
.pii-row[data-pii-state="rate_limited"] .pii-row-status,
.pii-row[data-pii-state="error"] .pii-row-status { color: var(--err); }
.pii-row[data-pii-state="unavailable"] { opacity: 0.72; }

@media (max-width: 767px) {
  .pii-row { flex-direction: column; align-items: stretch; }
  .pii-row-actions { justify-content: flex-start; }
}

/* ---------- Manutenção ---------- */
.maint-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.maint-item:last-child { border-bottom: 0; }
.maint-item .maint-info { flex: 1 1 320px; min-width: 0; }
.maint-item h3 { margin-bottom: 2px; }
.maint-item p { color: var(--text-2); font-size: var(--fs-sm); }
.maint-item .maint-action { display: grid; gap: 4px; justify-items: end; }

/* ---------- Responsividade ---------- */

/* Notebook: rail compacto */
@media (max-width: 1279px) {
  .app-shell { grid-template-columns: var(--sidebar-rail-w) 1fr; }
  .sidebar .nav-label, .sidebar-foot { display: none; }
  .nav-link { justify-content: center; padding: 11px 0; }
  .nav-icon { width: 20px; height: 20px; }
  .content { padding: var(--sp-5) var(--sp-4) 96px; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* Tablet e mobile: drawer */
@media (max-width: 1023px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    height: 100vh;
    width: min(82vw, 300px);
    z-index: 50;
    transform: translateX(-102%);
    transition: transform 160ms ease;
    border-right: 1px solid var(--line-strong);
    padding-top: var(--sp-4);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar .nav-label, .sidebar-foot { display: revert; }
  .nav-link { justify-content: flex-start; padding: 11px 14px; }
  .breadcrumbs { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 767px) {
  .content { padding: var(--sp-4) var(--sp-3) 120px; }
  h1 { font-size: var(--fs-xl); }
  .brand-env { display: none; }
  .session-user { display: none; }
  .data-table .col-lo { display: none; }       /* colunas de baixa prioridade */
  .data-table th, .data-table td { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .def-list > div { grid-template-columns: 1fr; gap: 2px; }
  .page-header-row { align-items: flex-start; flex-direction: column; }
  .login-body { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
}

/* Estreito: linhas de dependência quebram em duas linhas */
@media (max-width: 479px) {
  .dep-row { flex-wrap: wrap; }
  .dep-name { min-width: 0; }
  .dep-note { flex: 1 1 100%; margin-left: 0; text-align: left; }
}

/* Muito estreito (320px): garantir reflow sem rolagem global */
@media (max-width: 380px) {
  .metric-grid { grid-template-columns: 1fr; }
  .pagination { justify-content: center; }
}