/*
 * Dashboard - Pager dashboard (#3b)
 * QR sign card and notification channel management
 */

body:has(.pager-dashboard) > main.container {
  max-width: 100%;
  padding: 0;
}

.pager-dashboard {
  max-width: 480px;
  margin: 0 auto;
  padding: 36px 24px 44px;
}

/* --- Pager Title (inline edit) --- */

.pager-title {
  text-align: center;
  margin-bottom: 28px;
}

.title-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin: 0;
}

/* Reset Pico's input styling completely */
.title-input[type="text"] {
  --pico-border-color: transparent;
  --pico-background-color: transparent;
  width: 276px;
  max-width: min(276px, 70vw);
  margin: 0;
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  height: auto;
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px dashed var(--hairline);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.title-input[type="text"]::placeholder {
  font-weight: 400;
  color: var(--faint);
  opacity: 0.7;
}

.title-input[type="text"]:hover {
  border-bottom-color: var(--faint);
}

.title-input[type="text"]:focus {
  --pico-border-color: transparent;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px dashed var(--ink);
  outline: none;
  box-shadow: none;
}

/* Save button - compact amber circle with checkmark */
.title-save[type="submit"] {
  --pico-background-color: var(--amber);
  --pico-border-color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  margin: 0;
  background: var(--amber);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.title-save svg {
  width: 13px;
  height: 13px;
  color: var(--ink);
}

.title-save[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pico-primary-focus);
}

/* Show save button when editing */
.title-form:focus-within .title-save[type="submit"] {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 480px) {
  .title-input[type="text"] {
    font-size: 19px;
  }
}

/* --- QR Code Hero --- */

.qr-hero {
  text-align: center;
  margin-bottom: 40px;
}

.qr-card {
  display: inline-block;
  padding: 20px;
  margin: 0;
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 5px 6px 0 rgba(42, 36, 25, 0.12);
}

.qr-card svg,
.qr-card canvas {
  display: block;
  width: 190px;
  height: 190px;
}

.qr-hint {
  margin: 18px 0 16px;
  color: var(--muted);
  font-size: 14.5px;
}

.qr-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

/* --- Channels Section --- */

.channels-section {
  text-align: left;
}

.channels-header {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 11.5px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 14px;
}

.channels-header::before,
.channels-header::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--hairline);
}

.channels-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Channel Card --- */

.channel-card {
  position: relative;
  padding: 18px 20px;
  margin: 0;
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 rgba(42, 36, 25, 0.1);
}

/* Empty state: dashed outline, fills in on hover */
.channel-card--empty {
  background: transparent;
  border: 2px dashed #c9bfa9;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.channel-card--empty:hover,
.channel-card--empty:has(details[open]) {
  border-color: var(--ink);
  border-style: solid;
  background: #ffffff;
}

/* Native details accordion support */
.channel-card details {
  margin: 0;
  padding: 0;
  border: none;
}

.channel-card summary {
  list-style: none;
  cursor: pointer;
}

.channel-card summary::-webkit-details-marker {
  display: none;
}

.channel-card summary::marker {
  display: none;
  content: "";
}

/* Hide Pico CSS chevron (uses ::after pseudo-element) */
.channel-card summary::after {
  display: none !important;
}

/* --- Channel Header (icon tile + info + action) --- */

.channel-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.channel-icon {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  background: var(--highlight-bg);
  border: 1.5px solid var(--ink);
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--ink);
}

.channel-icon svg {
  width: 20px;
  height: 20px;
}

.channel-icon svg[fill="currentColor"] {
  width: 22px;
  height: 22px;
}

.channel-icon--empty {
  background: #ffffff;
  border-color: #c9bfa9;
  color: var(--faint);
}

.channel-info {
  flex: 1;
  min-width: 0;
}

.channel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-title-row h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.status-chip--connected {
  color: var(--connected-text);
  background: var(--connected-bg);
}

.status-chip--pending {
  color: #8a6a00;
  background: var(--highlight-bg);
}

.channel-identifier {
  display: block;
  font: 400 13px var(--font-mono);
  color: var(--muted);
  margin-top: 3px;
  word-break: break-all;
}

/* Empty state text */
.channel-add-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}

.channel-add-sub {
  font-size: 13px;
  color: var(--faint);
  margin-top: 3px;
}

.channel-plus {
  font-size: 20px;
  color: var(--faint);
  font-weight: 500;
}

/* --- Channel Form (expandable area) --- */

.channel-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1.5px solid var(--hairline);
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inline-form {
  margin: 0;
}

.channel-form .form-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.channel-form .form-row input[type="email"] {
  flex: 1 1 100% !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: none;
}

.channel-form .form-row input[type="email"]:focus {
  --pico-box-shadow: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--pico-primary-focus);
}

.channel-form .form-row input[type="submit"] {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .channel-form .form-row {
    flex-direction: column;
    gap: 8px;
  }

  .channel-form .form-row input[type="email"],
  .channel-form .form-row input[type="submit"] {
    flex: none !important;
    width: 100% !important;
  }
}

.setup-hint {
  font-size: 13px;
  color: var(--faint);
  margin: 0 0 12px 0;
}

.setup-hint strong {
  color: var(--ink);
  font-weight: 500;
}

/* Form error message */
.form-error {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--danger-bg);
  border: 1.5px solid var(--danger);
  border-radius: 11px;
  color: var(--danger);
  font-size: 13px;
}

.form-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Telegram --- */

.telegram-help {
  font-size: 13px;
  color: var(--faint);
  margin: 0 0 12px 0;
}

/* --- Status note --- */

.status-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--highlight-bg);
  border: 1.5px solid var(--highlight-border);
  border-radius: 12px;
}

.status-note-pager {
  width: 38px;
  height: 30px;
  flex-shrink: 0;
  background: var(--ink);
  border-radius: 6px;
  padding: 3px;
}

.status-note-lcd {
  background: var(--lcd);
  border-radius: 3px;
  height: 100%;
  display: grid;
  place-items: center;
  font: 700 8px var(--font-mono);
  color: var(--lcd-text);
}

.status-note p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}