/* custom.css — estilos base + componentes do PZ Dashboard.
 * Complementa o Tailwind (vendorizado). Tokens herdados da identidade do painel.
 * Comentarios em PT-BR; classes/identificadores em ingles.
 */

/* Esconde elementos com x-cloak ate o Alpine inicializar. */
[x-cloak] { display: none !important; }

html, body { height: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Fonte monoespacada (ids, coords, logs). */
.mono { font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace; }

/* Scrollbar escura. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f1216; }
::-webkit-scrollbar-thumb { background: #242c35; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2f3a45; }
* { scrollbar-color: #242c35 #0f1216; }

/* Item de navegacao da sidebar. */
.nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.875rem; color: #9aa7b4;
  transition: background-color .15s ease, color .15s ease;
}
.nav-item:hover { background: #1c222a; color: #e6edf3; }
.nav-item.nav-active { background: #0f1216; color: #e8a33d; box-shadow: inset 2px 0 0 #e8a33d; }

/* Transicao de pagina (fade curto). */
#page-root { animation: fadein .15s ease-in; }
@keyframes fadein { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadein .2s ease-in; }

/* ============================ Cards ============================ */
.card { background: #171c22; border: 1px solid #242c35; border-radius: 0.75rem; }
.card-2 { background: #1c232b; border: 1px solid #242c35; border-radius: 0.75rem; }
.card-hover { transition: border-color .15s ease; }
.card-hover:hover { border-color: #2f3a45; }

/* ============================ Botoes ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem; font-size: 0.875rem; font-weight: 500; line-height: 1;
  border-radius: 0.6rem; border: 1px solid #2f3a45; color: #e6edf3;
  background: #1c232b; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { background: #232c35; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.35rem 0.6rem; font-size: 0.8rem; border-radius: 0.5rem; }
.btn-icon { padding: 0.45rem; border-radius: 0.5rem; }
.btn-primary { background: #e8a33d; border-color: #e8a33d; color: #1a1205; font-weight: 600; }
.btn-primary:hover { background: #f0b354; }
.btn-ok { background: #3fb950; border-color: #3fb950; color: #06210c; font-weight: 600; }
.btn-ok:hover { background: #4fce61; }
.btn-danger { background: transparent; border-color: rgba(248,81,73,.5); color: #f85149; }
.btn-danger:hover { background: rgba(248,81,73,.12); border-color: #f85149; }
.btn-danger-solid { background: #f85149; border-color: #f85149; color: #2a0806; font-weight: 600; }
.btn-danger-solid:hover { background: #ff6259; }
.btn-ghost { background: transparent; border-color: transparent; color: #9aa7b4; }
.btn-ghost:hover { background: rgba(255,255,255,.05); color: #e6edf3; }

/* ============================ Badges / pills ============================ */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.55rem; font-size: 0.72rem; font-weight: 600;
  border-radius: 999px; border: 1px solid #2f3a45; color: #9aa7b4;
  background: rgba(255,255,255,.03); white-space: nowrap;
}
.badge-ok { color: #3fb950; border-color: rgba(63,185,80,.4); background: rgba(63,185,80,.1); }
.badge-warn { color: #d29922; border-color: rgba(210,153,34,.4); background: rgba(210,153,34,.1); }
.badge-danger { color: #f85149; border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.1); }
.badge-info { color: #58a6ff; border-color: rgba(88,166,255,.4); background: rgba(88,166,255,.1); }
.badge-accent { color: #e8a33d; border-color: rgba(232,163,61,.4); background: rgba(232,163,61,.1); }

/* ============================ Formularios ============================ */
.label { display: block; font-size: 0.8rem; font-weight: 600; color: #e6edf3; margin-bottom: 0.35rem; }
.help { font-size: 0.75rem; color: #9aa7b4; line-height: 1.35; }
.input, .select, .textarea {
  width: 100%; padding: 0.55rem 0.7rem; font-size: 0.875rem; color: #e6edf3;
  background: #0f1216; border: 1px solid #2f3a45; border-radius: 0.6rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: #6b7885; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,.15);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa7b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 2rem;
}
.textarea { resize: vertical; min-height: 4.5rem; }
.field-dirty .input, .field-dirty .select, .field-dirty .textarea { border-color: #e8a33d; box-shadow: 0 0 0 2px rgba(232,163,61,.12); }

/* Toggle (switch). */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: #3a444e; border-radius: 999px; transition: background .2s ease; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #cdd6df; border-radius: 50%; transition: transform .2s ease; }
.switch input:checked + .slider { background: #3fb950; }
.switch input:checked + .slider::before { transform: translateX(18px); background: #06210c; }
.switch input:focus-visible + .slider { outline: 2px solid #58a6ff; outline-offset: 2px; }

/* Range / slider. */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: #2a333d; outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #e8a33d; cursor: pointer; border: 2px solid #1a1205; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #e8a33d; cursor: pointer; border: 2px solid #1a1205; }

/* ============================ Tabelas ============================ */
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table thead th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em;
  color: #9aa7b4; font-weight: 600; padding: 0.6rem 0.75rem; border-bottom: 1px solid #242c35;
  position: sticky; top: 0; background: #171c22; z-index: 1;
}
.table tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #242c35; vertical-align: middle; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: rgba(255,255,255,.025); }
.table tbody tr.row-click { cursor: pointer; }

/* ============================ Tabs ============================ */
.tab { padding: 0.5rem 0.9rem; font-size: 0.85rem; font-weight: 500; color: #9aa7b4; border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s ease, border-color .15s ease; white-space: nowrap; }
.tab:hover { color: #e6edf3; }
.tab.active { color: #e8a33d; border-color: #e8a33d; }

/* ============================ Modal ============================ */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index: 80; }
.modal-panel { background: #171c22; border: 1px solid #2f3a45; border-radius: 1rem; box-shadow: 0 24px 60px rgba(0,0,0,.5); }

/* ============================ Skeleton / spinner ============================ */
.skel { background: linear-gradient(90deg, #1b222a 25%, #232c35 50%, #1b222a 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 0.5rem; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.spinner { width: 1.25rem; height: 1.25rem; border: 2px solid #242c35; border-top-color: #e8a33d; border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; }
.spinner-sm { width: 0.9rem; height: 0.9rem; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ Viewer de logs ============================ */
.log-viewer { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; font-size: 0.8125rem; line-height: 1.4; background: #0a0d10; border: 1px solid #242c35; border-radius: 0.6rem; overflow-y: auto; }
.log-line { padding: 0 0.75rem; }
.log-line:hover { background: rgba(255,255,255,.03); }
.log-error { color: #ff8983; background: rgba(248,81,73,.06); }
.log-warn { color: #e3b341; }
.log-info { color: #9aa7b4; }

/* ============================ Diff (config antes -> depois) ============================ */
.diff-old { color: #f85149; text-decoration: line-through; opacity: .75; }
.diff-new { color: #3fb950; font-weight: 600; }

/* Rodape sticky (mudancas pendentes). */
.sticky-footer { position: sticky; bottom: 0; z-index: 10; backdrop-filter: blur(6px); }

/* Barra de progresso simples (meter). */
.meter { height: 0.375rem; border-radius: 999px; background: rgba(0,0,0,.3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; }

/* Passo de progresso de acao. */
.step-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.7rem; }