/* dashboard.css — LittleWidgetCo dashboard styles */

/* ── Settings view ── */
    .ds-back-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: none; border: none; cursor: pointer;
      font-family: var(--font-body); font-size: 0.8125rem;
      color: var(--color-ink-muted); padding: 0; margin-bottom: 12px;
      transition: color 150ms;
    }
    .ds-back-btn:hover { color: var(--color-ink); }
    .ds-back-btn svg { width: 14px; height: 14px; }

    .ds-settings-block {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: 24px 28px;
      margin-bottom: 16px;
    }
    .ds-settings-block__title {
      font-family: var(--font-display); font-size: 1rem;
      font-weight: 400; color: var(--color-ink); margin-bottom: 6px;
    }
    .ds-settings-block__desc {
      font-size: 0.8125rem; color: var(--color-ink-muted);
      margin-bottom: 20px; line-height: 1.5;
    }
    .ds-settings-block__desc--error { color: #C0392B; }

    .ds-settings-row {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-top: 1px solid rgba(244,244,241,0.06);
    }
    .ds-settings-label {
      font-size: 0.875rem; color: var(--color-ink);
    }
    .ds-settings-input {
      background: var(--color-bg); border: 1px solid var(--color-border);
      border-radius: var(--radius-sm); color: var(--color-ink);
      font-family: var(--font-body); font-size: 0.875rem;
      padding: 6px 10px; width: 100px; text-align: right;
    }
    .ds-settings-input:focus { outline: none; border-color: rgba(244,244,241,0.4); }

    /* Toggle switch */
    .ds-toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
    .ds-toggle input { opacity: 0; width: 0; height: 0; }
    .ds-toggle__track {
      position: absolute; inset: 0;
      background: rgba(244,244,241,0.12); border-radius: 100px;
      transition: background 200ms;
    }
    .ds-toggle__track::before {
      content: ''; position: absolute;
      width: 16px; height: 16px; border-radius: 50%;
      left: 3px; top: 3px;
      background: var(--color-ink-muted);
      transition: transform 200ms, background 200ms;
    }
    .ds-toggle input:checked + .ds-toggle__track { background: rgba(181,115,74,0.6); }
    .ds-toggle input:checked + .ds-toggle__track::before {
      transform: translateX(18px); background: var(--color-ink);
    }

    /* Reward mapping rows */
    .ds-reward-row {
      display: grid;
      grid-template-columns: 1fr 1fr auto auto;
      gap: 8px; align-items: center;
      padding: 10px 0;
      border-top: 1px solid rgba(244,244,241,0.06);
    }
    @media (max-width: 600px) {
      .ds-reward-row { grid-template-columns: 1fr 1fr auto; }
      .ds-reward-row .ds-reward-value { display: none; }
    }
    .ds-reward-select, .ds-reward-action-select, .ds-reward-value-input {
      background: var(--color-bg); border: 1px solid var(--color-border);
      border-radius: var(--radius-sm); color: var(--color-ink);
      font-family: var(--font-body); font-size: 0.8125rem;
      padding: 6px 10px; width: 100%;
    }
    .ds-reward-select:focus, .ds-reward-action-select:focus, .ds-reward-value-input:focus {
      outline: none; border-color: rgba(244,244,241,0.4);
    }
    .ds-reward-remove-btn {
      background: none; border: none; cursor: pointer;
      color: var(--color-ink-muted); padding: 4px;
      border-radius: var(--radius-sm); transition: color 150ms;
      display: flex; align-items: center; justify-content: center;
    }
    .ds-reward-remove-btn:hover { color: #C0392B; }
    .ds-reward-remove-btn svg { width: 14px; height: 14px; }

    .ds-settings-add-btn {
      display: flex; align-items: center; gap: 6px;
      background: none; border: 1px dashed rgba(244,244,241,0.15);
      border-radius: var(--radius-sm); color: var(--color-ink-muted);
      font-family: var(--font-body); font-size: 0.8125rem;
      padding: 8px 14px; cursor: pointer; margin-top: 12px;
      transition: color 150ms, border-color 150ms; width: 100%;
      justify-content: center;
    }
    .ds-settings-add-btn:hover { color: var(--color-ink); border-color: rgba(244,244,241,0.3); }
    .ds-settings-add-btn svg { width: 14px; height: 14px; }

    .ds-settings-save-row {
      display: flex; align-items: center; gap: 16px; margin-top: 8px;
    }
    .ds-settings-save-note {
      font-size: 0.8125rem; color: var(--color-ink-muted);
    }
    .ds-settings-save-note--ok { color: #2D6A4F; }
    .ds-settings-save-note--err { color: #C0392B; }

/* ── Plan badge ── */
    .ds-plan-badge {
      display: inline-block; padding: 4px 12px;
      border-radius: 100px; font-size: 0.75rem; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      background: rgba(244,244,241,0.08); color: var(--color-ink-muted);
    }
    .ds-plan-badge--pro { background: rgba(158,168,159,0.15); color: #9EA89F; }

    /* ── Upgrade card ── */
    .ds-upgrade-card { border-color: rgba(158,168,159,0.2) !important; }
    .ds-upgrade-card__header {
      display: flex; align-items: baseline;
      justify-content: space-between; margin-bottom: 20px;
    }
    .ds-upgrade-card__badge {
      font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: #9EA89F;
      background: rgba(158,168,159,0.12); padding: 3px 10px; border-radius: 100px;
    }
    .ds-upgrade-card__price {
      font-family: var(--font-display); font-size: 1.75rem; color: var(--color-ink);
    }
    .ds-upgrade-card__price span {
      font-family: var(--font-body); font-size: 0.875rem; color: var(--color-ink-muted);
    }
    .ds-upgrade-card__features {
      list-style: none; display: flex; flex-direction: column;
      gap: 10px; margin-bottom: 24px;
    }
    .ds-upgrade-card__features li {
      display: flex; align-items: center; gap: 10px;
      font-size: 0.875rem; color: var(--color-ink);
    }
    .ds-upgrade-card__features svg { width: 14px; height: 14px; flex-shrink: 0; color: #2D6A4F; }

    /* ── Modal ── */
    .ds-modal-overlay {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center; padding: 16px;
    }
    .ds-modal {
      background: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: var(--radius-lg); padding: 24px;
      width: 100%; max-width: 420px;
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 16px;
    }
    .ds-modal__header {
      display: flex; align-items: center; justify-content: space-between;
    }
    .ds-modal__title {
      font-family: var(--font-display); font-size: 1rem;
      font-weight: 400; color: var(--color-ink);
    }
    .ds-modal__close {
      background: none; border: none; cursor: pointer;
      color: var(--color-ink-muted); padding: 4px; transition: color 150ms;
      flex-shrink: 0;
    }
    .ds-modal__close:hover { color: var(--color-ink); }
    .ds-modal__close svg { width: 14px; height: 14px; }
    .ds-modal__sub { font-size: 0.8125rem; color: var(--color-ink-muted); margin: 0; }

    /* ── Pro billing state ── */
    .ds-billing-pro-hero {
      background: var(--color-surface);
      border: 1px solid rgba(158,168,159,0.25);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      margin-bottom: 16px;
    }
    .ds-billing-pro-hero__title {
      font-family: var(--font-display); font-size: 1.5rem;
      font-weight: 400; color: var(--color-ink);
      margin: 8px 0 6px;
    }
    .ds-billing-pro-hero__sub {
      font-size: 0.875rem; color: var(--color-ink-muted);
      max-width: 480px; line-height: 1.5; margin: 0;
    }
    .ds-billing-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 640px) { .ds-billing-cards { grid-template-columns: 1fr; } }
    .ds-cancel-link {
      background: none; border: none; cursor: pointer;
      font-family: var(--font-body); font-size: 0.8125rem;
      color: var(--color-ink-muted); padding: 0;
      text-decoration: underline;
      text-decoration-color: rgba(244,244,241,0.2);
      transition: color 150ms;
    }
    .ds-cancel-link:hover { color: #C0392B; text-decoration-color: #C0392B; }