/* Admin styles — reuses the canonical design tokens from the site stylesheet.
 * Two @imports so it works both locally (repo path) and when deployed (styles.css
 * copied next to admin.css by deploy_admin.sh); the missing one is ignored. */
@import url("./styles.css");
@import url("../../site/css/styles.css");

:root { color-scheme: dark; }
body {
  margin: 0;
  background: var(--background, #030811);
  color: var(--foreground, #f4f7f8);
  font-family: "Inter", system-ui, sans-serif;
}

.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border, #16323f);
  position: sticky; top: 0; background: var(--background, #030811); z-index: 5;
}
.admin-brand { font-size: 1.1rem; letter-spacing: -0.01em; }
.admin-actions { display: flex; gap: 0.5rem; }
.admin-brand b { color: var(--primary, #14d9d4); }
.admin-main { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

/* Login card */
.login-card { max-width: 420px; margin: 4rem auto; padding: 1.5rem;
  background: var(--card, #071523); border: 1px solid var(--border, #16323f);
  border-radius: 16px; }
.login-card h2 { margin: 0 0 0.5rem; }
.login-card p { color: var(--muted-foreground, #95a6ae); margin: 0 0 1rem; }
.login-card input { width: 100%; box-sizing: border-box; padding: 0.7rem 0.85rem;
  border-radius: 10px; border: 1px solid var(--border, #16323f);
  background: var(--background, #030811); color: inherit; margin-bottom: 0.75rem; }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.tab { padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, #16323f); background: transparent; color: inherit; font: inherit; }
.tab.active { background: var(--primary, #14d9d4); color: #030811; border-color: transparent; }
.toolbar input[type="date"] { padding: 0.35rem 0.5rem; border-radius: 8px;
  border: 1px solid var(--border, #16323f); background: var(--background, #030811); color: inherit; }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.65rem;
  border-bottom: 1px solid var(--border, #16323f); }
.table th { color: var(--muted-foreground, #95a6ae); font-weight: 600; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: color-mix(in oklab, var(--primary, #14d9d4) 8%, transparent); }
.badge { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.78rem; }
.badge.lead { background: #1d3b4a; }
.badge.pending { background: #3a3416; color: #f0d27a; }
.badge.paid { background: #163a25; color: #7adf9c; }
.badge.failed { background: #4a1d22; color: #f0a0a8; }
.badge.abandoned { background: #2a2f37; color: #c2cdd3; }
.badge.refunded, .badge.disputed { background: #3a2316; color: #e0a06a; }
.badge.inquiry { background: #2c2150; color: #c4b3f5; }
.muted { color: var(--muted-foreground, #95a6ae); }
.row-actions { margin-top: 1rem; display: flex; gap: 0.5rem; }

.btn { padding: 0.55rem 1rem; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; font: inherit; }
.btn--primary { background: var(--primary, #14d9d4); color: #030811; }
.btn--secondary { background: transparent; border-color: var(--border, #16323f); color: inherit; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 10; }
.modal-overlay.open { display: flex; }
.modal { background: var(--card, #071523); border: 1px solid var(--border, #16323f);
  border-radius: 16px; padding: 1.25rem; max-width: 620px; width: 100%; max-height: 85vh; overflow: auto; }
.modal pre { white-space: pre-wrap; word-break: break-word; background: var(--background, #030811);
  padding: 0.75rem; border-radius: 10px; font-size: 0.82rem; }
.notice { padding: 0.75rem 1rem; border-radius: 10px; background: #3a3416; color: #f0d27a; margin-bottom: 1rem; }

/* Toolbar rows (status pills / range pills) */
.toolbar--status { margin-bottom: 0.6rem; }
.tab--range.active { background: var(--primary, #14d9d4); color: #030811; border-color: transparent; }
details > summary { cursor: pointer; }

/* Custom-dates disclosure inside the range row */
.custom-dates > summary {
  padding: 0.4rem 0.8rem; border: 1px solid var(--border, #16323f); border-radius: 999px;
  display: inline-block; list-style: none; color: var(--muted-foreground, #95a6ae);
}
.custom-dates > summary::-webkit-details-marker { display: none; }
.custom-dates__row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }

/* Inline add-forms (admins / subscribers) */
.inline-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.inline-form input { flex: 1; padding: 0.6rem 0.8rem; border-radius: 10px;
  border: 1px solid var(--border, #16323f); background: var(--background, #030811); color: inherit; }

/* Status legend (bottom of the list) */
.legend { margin-top: 1.5rem; border-top: 1px solid var(--border, #16323f); padding-top: 1rem; }
.legend > summary { font-weight: 600; color: var(--muted-foreground, #95a6ae); list-style: none; }
.legend > summary::-webkit-details-marker { display: none; }
.legend ul { list-style: none; padding: 0; margin: 0.85rem 0 0; display: flex; flex-direction: column; gap: 0.65rem; }
.legend li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9rem; }
.legend li .badge { flex: 0 0 auto; margin-top: 0.1rem; }

/* Raw JSON in the detail modal — collapsed by default */
.tech { margin: 0.5rem 0 1rem; }
.tech > summary { color: var(--muted-foreground, #95a6ae); }

/* Funnel (admin analytics) */
.funnel { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0.25rem 0; }
.funnel-step { flex: 1 1 130px; background: var(--card, #071523);
  border: 1px solid var(--border, #16323f); border-radius: 12px; padding: 0.9rem 1rem; }
.funnel-num { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.funnel-label { color: var(--muted-foreground, #95a6ae); font-size: 0.85rem; margin-top: 0.15rem; }
.funnel-conv { color: var(--primary, #14d9d4); font-size: 0.78rem; margin-top: 0.35rem; }
.funnel-note { font-size: 0.8rem; margin-top: 1rem; }

/* ----------------------------- mobile (primary surface) ----------------------------- */
@media (max-width: 640px) {
  .admin-header { padding: 0.7rem 0.9rem; flex-wrap: wrap; gap: 0.4rem; }
  .admin-brand { font-size: 1rem; }
  .admin-actions { gap: 0.4rem; }
  .admin-actions .btn { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
  .admin-main { padding: 0.9rem; }

  /* status & range pills: horizontal-scroll strips, no wrap, full-bleed */
  .toolbar--status, .toolbar--range {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-left: -0.9rem; margin-right: -0.9rem; padding: 0 0.9rem 0.25rem; scrollbar-width: none;
  }
  .toolbar--status::-webkit-scrollbar, .toolbar--range::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 0.55rem 0.95rem; }       /* ≥40px touch target */
  .custom-dates { flex: 0 0 auto; }
  .custom-dates__row { flex-wrap: nowrap; }
  .custom-dates__row input[type="date"] { flex: 1 1 auto; min-width: 0; }

  /* table -> stacked cards via data-label (one rowHtml, no separate mobile render) */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tbody tr {
    border: 1px solid var(--border, #16323f); border-radius: 12px;
    padding: 0.55rem 0.8rem; margin-bottom: 0.6rem; background: var(--card, #071523);
  }
  .table td {
    border: none; padding: 0.32rem 0; display: flex; justify-content: space-between;
    gap: 1rem; align-items: baseline; text-align: right;
  }
  .table td::before {
    content: attr(data-label); color: var(--muted-foreground, #95a6ae);
    font-size: 0.78rem; text-align: left; flex: 0 0 auto;
  }
  .table td.cell-empty { display: none; }                  /* hide empty "Причина" on cards */
  .table td[colspan] { text-align: center; }
  .table td[colspan]::before { content: none; }            /* empty-filter message: no label */

  /* detail modal -> bottom sheet */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; }

  .legend li { flex-direction: column; gap: 0.25rem; }
}