/*
 * Admin theme on top of Bootstrap 5.
 * Also bridges the legacy class names (.form-group, .hint, .stats,
 * .detail-row, …) used across older views so every page stays styled.
 */

:root {
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-soft: #eef2ff;
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
}

body {
  background: #f6f8fa;
  color: var(--ink);
}

main.container { max-width: 1080px; padding: 24px 16px 80px; }

/* ---------- Navbar ---------- */
.navbar { background: #171732; padding: .55rem 1.25rem; }
.navbar .brand {
  color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none;
  margin-right: 1.5rem; display: inline-flex; align-items: center; gap: .5rem;
}
.navbar .brand .logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
}
.nav-links { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.nav-links a, .nav-adv summary {
  color: #c7c9d9; text-decoration: none; font-size: .875rem;
  padding: .4rem .75rem; border-radius: .5rem;
  transition: background .15s, color .15s;
}
.nav-links a:hover, .nav-adv summary:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-links a.active { color: #fff; background: rgba(255,255,255,.14); }

.nav-adv { position: relative; }
.nav-adv summary { list-style: none; cursor: pointer; user-select: none; }
.nav-adv summary::-webkit-details-marker { display: none; }
.nav-adv summary::after { content: " ▾"; font-size: .7rem; }
.nav-adv-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  background: #fff; border: 1px solid var(--line); border-radius: .6rem;
  box-shadow: 0 10px 30px rgba(16,24,40,.14); padding: .4rem; min-width: 190px;
}
.nav-adv-menu a {
  display: block; color: var(--ink) !important; background: none !important;
  padding: .45rem .7rem; border-radius: .45rem; font-size: .875rem;
}
.nav-adv-menu a:hover { background: var(--brand-soft) !important; color: var(--brand-dark) !important; }

.btn-signout {
  background: none; border: 1px solid rgba(255,255,255,.25); color: #c7c9d9;
  font-size: .8rem; padding: .3rem .8rem; border-radius: .5rem; cursor: pointer;
}
.btn-signout:hover { color: #fff; border-color: rgba(255,255,255,.6); }

/* ---------- Cards ---------- */
.card {
  display: block;                 /* override Bootstrap's flex + zero padding */
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .9rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .9rem; }

/* ---------- Legacy form bridge ---------- */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .82rem; color: #374151; }
.form-group input:not([type=checkbox]):not([type=radio]),
.form-group select,
.form-group textarea {
  display: block; width: 100%; padding: .5rem .75rem;
  border: 1px solid #d1d5db; border-radius: .55rem;
  font-size: .92rem; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.form-group textarea { min-height: 90px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hint { font-size: .78rem; color: var(--muted); margin-top: .25rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: .55rem; font-size: .875rem; font-weight: 500; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-sm { font-size: .8rem; padding: .3rem .7rem; }
.btn-ghost {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------- Badges (legacy status names) ---------- */
.badge { font-size: .7rem; font-weight: 600; padding: .3em .65em; border-radius: 999px; }
.badge-sent, .badge-active { background: var(--ok-soft); color: #166534; }
.badge-queued { background: #dbeafe; color: #1e40af; }
.badge-failed, .badge-revoked { background: var(--danger-soft); color: #991b1b; }
.badge-pending { background: var(--warn-soft); color: #92400e; }
.badge-cancelled { background: #e5e7eb; color: #374151; }

/* ---------- Tables (legacy tables have no .table class) ---------- */
.card table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.card th, .card td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #f1f3f5; }
.card th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
.card tbody tr:hover { background: #fafbfc; }

/* ---------- Legacy dashboard stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { text-align: center; padding: 18px 16px; background: #fff; border: 1px solid var(--line); border-radius: .9rem; }
.stat .number { font-size: 1.8rem; font-weight: 700; }
.stat .label { font-size: .72rem; color: var(--muted); text-transform: uppercase; margin-top: 4px; letter-spacing: .04em; }
.stat.sent .number { color: var(--ok); }
.stat.queued .number { color: #2563eb; }
.stat.failed .number { color: var(--danger); }

/* ---------- Legacy detail rows / filters / pagination ---------- */
.detail-row { display: flex; padding: .55rem 0; border-bottom: 1px solid #f1f3f5; }
.detail-label { width: 160px; font-weight: 600; color: #4b5563; font-size: .82rem; flex-shrink: 0; }
.detail-value { flex: 1; font-size: .9rem; }
.detail-value pre { background: #f8f9fa; padding: 12px; border-radius: .6rem; overflow-x: auto; font-size: .78rem; }
.filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.filters .form-group { margin-bottom: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 16px; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--line); border-radius: .45rem; font-size: .82rem; text-decoration: none; color: var(--ink); background: #fff; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Flash ---------- */
.flash { padding: .8rem 1rem; margin-bottom: 1rem; border-radius: .7rem; font-size: .875rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.flash-notice { background: var(--ok-soft); color: #14532d; border: 1px solid #bbf7d0; }
.flash-alert { background: var(--danger-soft); color: #7f1d1d; border: 1px solid #fecaca; }
.flash-api-key { background: var(--warn-soft); color: #78350f; border: 1px solid #fde68a; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; word-break: break-all; display: block; }
.flash .flash-close { background: none; border: 0; font-size: 1rem; line-height: 1; cursor: pointer; color: inherit; opacity: .5; }
.flash .flash-close:hover { opacity: 1; }

/* ---------- App hub: setup progress ---------- */
.setup-steps { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.setup-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: #fff; border: 1px solid var(--line); color: var(--muted);
}
.setup-chip .n {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: .7rem;
  background: #e5e7eb; color: #4b5563; font-weight: 700;
}
.setup-chip.done { border-color: #bbf7d0; background: var(--ok-soft); color: #166534; }
.setup-chip.done .n { background: var(--ok); color: #fff; }
.setup-chip.todo { border-color: #fde68a; background: var(--warn-soft); color: #92400e; }
.setup-chip.todo .n { background: var(--warn); color: #fff; }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; display: flex; align-items: center; gap: .6rem; }
.section-head .step-n {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); font-size: .8rem; font-weight: 700;
}
.status-line { font-size: .875rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--ok); box-shadow: 0 0 6px rgba(22,163,74,.5); }
.dot-warn { background: var(--warn); box-shadow: 0 0 6px rgba(217,119,6,.5); }

.empty-callout {
  background: var(--warn-soft); border: 1px solid #fde68a; color: #92400e;
  padding: .8rem 1rem; border-radius: .7rem; font-size: .875rem; margin-bottom: .9rem;
}

/* ---------- Collapse panels ---------- */
.collapse-panel { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.collapse-panel.show { display: block; animation: fadeSlide .18s ease; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
[data-toggle] .chev { display: inline-block; transition: transform .18s; font-size: .7rem; }
[data-toggle].open .chev { transform: rotate(180deg); }

/* ---------- Drag & drop board ---------- */
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .board { grid-template-columns: 1fr; } }
.board-col {
  background: #f8fafc; border: 1.5px dashed #d8dee6; border-radius: .8rem;
  padding: .8rem; transition: border-color .15s, background .15s;
}
.board-col.col-attached { background: var(--brand-soft); border-color: #c7d2fe; }
.board-col h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700; margin-bottom: .6rem;
}
.board-col.col-attached h4 { color: var(--brand-dark); }
.board-list {
  list-style: none; margin: 0; padding: 0; min-height: 70px;
  max-height: 320px; overflow-y: auto;   /* scroll container for infinite scroll */
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.board-search {
  display: block; width: 100%; margin-bottom: .55rem;
  padding: .4rem .7rem; font-size: .82rem;
  border: 1px solid #d8dee6; border-radius: .55rem; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.board-search:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.board-sentinel {
  list-style: none; text-align: center; padding: .5rem;
  font-size: .74rem; color: #9aa2ad;
}
.board-item {
  background: #fff; border: 1px solid var(--line); border-radius: .65rem;
  padding: .55rem .75rem; margin-bottom: .5rem; cursor: grab;
  display: flex; align-items: center; gap: .6rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.board-item:hover { box-shadow: 0 4px 12px rgba(16,24,40,.1); border-color: #c7d2fe; }
.board-item:active { cursor: grabbing; }
.board-item .grip { color: #c3c9d1; font-size: .9rem; cursor: inherit; letter-spacing: -1px; }
.board-item .bi-title { font-size: .875rem; font-weight: 600; }
.board-item .bi-sub { font-size: .74rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.board-item .bi-edit { margin-left: auto; font-size: .8rem; text-decoration: none; opacity: .45; }
.board-item .bi-edit:hover { opacity: 1; }
.board-item .bi-test {
  margin-left: auto; flex-shrink: 0; cursor: pointer;
  background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid #c7d2fe; border-radius: .45rem;
  font-size: .7rem; font-weight: 600; padding: .2rem .5rem;
}
.board-item .bi-test:hover { background: var(--brand); color: #fff; }
.board-item .bi-test + .bi-edit { margin-left: 0; }
.sortable-ghost { opacity: .45; background: var(--brand-soft); border-style: dashed; }
.sortable-chosen { transform: rotate(1.2deg) scale(1.02); box-shadow: 0 10px 24px rgba(16,24,40,.18); }
.sortable-drag { opacity: .95; }
.board-empty { font-size: .8rem; color: #9aa2ad; text-align: center; padding: .9rem .5rem; }

/* ---------- Code snippet ---------- */
.snippet-wrap { position: relative; margin-top: .6rem; }
.snippet {
  background: #0f172a; color: #e2e8f0; border-radius: .7rem;
  padding: .9rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; line-height: 1.55; overflow-x: auto; white-space: pre; margin: 0;
}
.copy-btn {
  position: absolute; top: .5rem; right: .5rem;
  background: rgba(255,255,255,.1); color: #cbd5e1; border: 1px solid rgba(255,255,255,.15);
  border-radius: .45rem; font-size: .72rem; padding: .25rem .6rem; cursor: pointer;
}
.copy-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

.key-reveal {
  background: var(--ok-soft); border: 1px solid #bbf7d0; border-radius: .7rem;
  padding: 1rem; margin-bottom: 1rem;
}
.key-reveal .key-value {
  font-family: ui-monospace, Menlo, monospace; font-size: .85rem; font-weight: 600;
  word-break: break-all; color: #14532d;
}
.key-pill { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; background: #f3f4f6; padding: .25rem .6rem; border-radius: .45rem; }

/* ---------- Toasts ---------- */
#toast-box { position: fixed; bottom: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; }
.toast-msg {
  background: #111827; color: #f9fafb; font-size: .84rem;
  padding: .6rem 1rem; border-radius: .6rem; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: fadeSlide .2s ease;
}
.toast-msg.err { background: var(--danger); }

/* ---------- Advanced details ---------- */
details.adv-section { margin-bottom: 1.1rem; }
details.adv-section > summary {
  cursor: pointer; user-select: none; font-size: .875rem; font-weight: 600; color: var(--muted);
  padding: .7rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: .9rem;
  list-style: none;
}
details.adv-section > summary::-webkit-details-marker { display: none; }
details.adv-section > summary::before { content: "▸ "; }
details.adv-section[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.adv-section[open] > summary::before { content: "▾ "; }
details.adv-section .adv-body {
  background: #fff; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 .9rem .9rem; padding: 1.2rem 1.5rem;
}

/* ---------- Turbo progress bar ---------- */
.turbo-progress-bar { background: var(--brand); height: 3px; }

/* ---------- App index cards ---------- */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.app-card { display: block; text-decoration: none; color: inherit; transition: transform .12s, box-shadow .15s; }
.app-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,24,40,.1); color: inherit; }
.app-card .app-name { font-weight: 700; font-size: 1rem; margin-bottom: .2rem; }
.app-card .app-slug { font-family: ui-monospace, Menlo, monospace; font-size: .74rem; color: var(--muted); }
.app-card .app-checks { display: flex; gap: .8rem; margin-top: .8rem; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
.app-card .app-checks .ok { color: #166534; }
.app-card .app-checks .miss { color: #92400e; }