/* ============================================================
   ADMIN PANEL STYLES
   ============================================================ */

/* Body overrides for admin */
.admin-body {
  overflow: hidden;
  height: 100vh;
}

/* ============================================================
   PASSWORD GATE
   ============================================================ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(100% 100% at 80% 0%, rgba(25,199,133,.07), transparent 50%),
    repeating-linear-gradient(0deg,   rgba(255,255,255,.014) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.014) 0 1px, transparent 1px 52px),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate__card {
  width: 100%;
  max-width: 380px;
  padding: 44px 40px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

.gate__logo { margin-bottom: var(--space-2); }

.gate__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.025em;
}
.gate__sub { font-size: 14px; color: var(--muted); margin-top: -var(--space-2); }

.gate__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.gate__input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 12px 16px;
  text-align: center;
  letter-spacing: 0.1em;
  outline: none;
  transition: border-color var(--timing-base) var(--ease-out),
              box-shadow var(--timing-base) var(--ease-out);
}
.gate__input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-tint);
}
.gate__input.error {
  border-color: var(--red);
  animation: shake 0.35s var(--ease-out);
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

.gate__btn { width: 100%; justify-content: center; }
.gate__error { font-size: 13px; color: var(--red); }

/* ============================================================
   ADMIN LAYOUT
   ============================================================ */
.admin {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ---- SIDEBAR ---- */
.admin__sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  overflow-y: auto;
}

.admin__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.admin__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.admin__nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: var(--r-control);
  transition: background var(--timing-base), color var(--timing-base);
}
.admin__nav-link:hover { background: var(--elevated); color: var(--text); }
.admin__nav-link.active {
  background: var(--emerald-tint);
  color: var(--emerald-bright);
  font-weight: 600;
}
.admin__nav-link svg { flex-shrink: 0; }

.admin__logout {
  font-size: 12px;
  color: var(--slate);
  padding: 8px 12px;
  border-radius: var(--r-control);
  text-align: left;
  transition: color var(--timing-base);
  margin-top: var(--space-4);
}
.admin__logout:hover { color: var(--red); }

/* ---- MAIN ---- */
.admin__main {
  overflow-y: auto;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}

.admin__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.admin__page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.admin__status {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--r-control);
  font-weight: 500;
  transition: opacity var(--timing-base);
}
.admin__status--ok    { background: var(--emerald-tint); color: var(--emerald-bright); }
.admin__status--error { background: rgba(216,81,78,.14); color: #eb7b78; }

/* ============================================================
   ADMIN CARDS + FIELDS
   ============================================================ */
.admin__card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.admin__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}
.admin__card-sub { font-size: 14px; color: var(--muted); margin-bottom: var(--space-6); line-height: 1.6; }

.admin__fields { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }

.field__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.field__input {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 13px;
  outline: none;
  width: 100%;
  transition: border-color var(--timing-base), box-shadow var(--timing-base);
  appearance: none;
}
.field__input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-tint);
}
.field__input.mono { font-family: var(--font-mono); font-size: 13px; }

select.field__input { cursor: pointer; }

.field__hint {
  font-size: 12px;
  color: var(--slate);
  line-height: 1.55;
  margin-top: 2px;
}

/* ============================================================
   PATCH LOG — ADD FORM
   ============================================================ */
.change-inputs { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }

.change-input-row {
  display: grid;
  grid-template-columns: 120px 1fr 32px;
  gap: var(--space-2);
  align-items: center;
}

.change-remove {
  width: 32px;
  height: 32px;
  border-radius: var(--r-control);
  color: var(--slate);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--timing-base), color var(--timing-base);
  flex-shrink: 0;
}
.change-remove:hover { background: rgba(216,81,78,.14); color: var(--red); }

/* ============================================================
   PATCH LOG — ENTRY LIST
   ============================================================ */
.patch-log-list { display: flex; flex-direction: column; gap: var(--space-4); }
.patch-log-empty { font-size: 14px; color: var(--muted); padding: var(--space-6) 0; }

.admin__patch-entry {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
  padding: var(--space-4) var(--space-6);
}

.admin__patch-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.admin__patch-entry-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}
.admin__patch-entry-meta strong { color: var(--text); font-weight: 600; }

.admin__change-list { display: flex; flex-direction: column; gap: 5px; }
.admin__change-list .change { font-size: 13px; }
.change__type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-right: 4px;
}

/* ============================================================
   EXPORT SECTION
   ============================================================ */
.export-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.export-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 14px;
  color: var(--muted);
}
.export-step code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: var(--elevated);
  padding: 2px 7px;
  border-radius: 5px;
}

.export-preview {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: var(--space-4);
  max-height: 280px;
  overflow-y: auto;
  white-space: pre;
  margin-bottom: var(--space-6);
  line-height: 1.55;
}

.export-actions { display: flex; gap: var(--space-3); }

/* ============================================================
   BOT CONSOLE
   ============================================================ */

/* Status bar — above the terminal card */
.console-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.console-status-bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.console-dot-lg {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--slate);
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.console-dot-lg.online  {
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(25,199,133,.18), 0 0 10px rgba(25,199,133,.4);
}
.console-dot-lg.offline { background: var(--red); box-shadow: 0 0 0 3px rgba(216,81,78,.15); }

.console-status-bar__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.console-status-bar__tag {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.console-status-bar__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1;
}

.console-status-bar__right {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Terminal card */
.console-card {
  padding: 0;
  overflow: hidden;
  margin-bottom: 0;
}

.console-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--space-4);
  background: var(--elevated);
  border-bottom: 1px solid var(--line);
}
.console-chrome__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}
.console-chrome__dot:first-child { background: rgba(216,81,78,.55);  }
.console-chrome__dot:nth-child(2){ background: rgba(224,169,46,.55); }
.console-chrome__dot:nth-child(3){ background: rgba(25,199,133,.55); }
.console-chrome__label {
  margin-left: var(--space-2);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.02em;
}

.console-terminal {
  background: #04070a;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  padding: var(--space-4) var(--space-6);
  height: 440px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.console-placeholder {
  color: var(--slate);
  font-size: 12px;
  font-style: italic;
}

.console-line {
  display: grid;
  grid-template-columns: 76px 48px 1fr;
  gap: 0 10px;
  padding: 1.5px 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.console-line--warn  .console-msg { color: #dba846; }
.console-line--error .console-msg { color: #e07070; }
.console-line--info  .console-msg { color: #8fa8a2; }

.console-ts  { color: #263a42; user-select: none; }
.console-lvl { color: #3d5259; user-select: none; }
.console-msg { color: #8fa8a2; }
.console-line--error .console-lvl { color: #7a3535; }
.console-line--warn  .console-lvl { color: #6b5520; }

/* Nav dot (sidebar) */
.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate);
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.nav-dot--online  { background: var(--emerald); box-shadow: 0 0 5px rgba(25,199,133,.5); }
.nav-dot--offline { background: var(--red); }

/* ============================================================
   RESPONSIVE (admin)
   ============================================================ */
@media (max-width: 700px) {
  .admin { grid-template-columns: 1fr; }
  .admin__sidebar {
    display: none; /* TODO: mobile admin nav */
  }
  .admin__main { padding: var(--space-4); }
  .field-row { grid-template-columns: 1fr; }
  .change-input-row { grid-template-columns: 100px 1fr 32px; }
}