/**
 * LR Platform — shared UI components (vendor dashboard + admin).
 */

.lr-dashboard,
.lr-platform-admin,
body.lr-platform-admin-screen .wrap {
  color: var(--lr-text);
  font-family: var(--lr-font);
  font-size: var(--lr-font-size-base);
  line-height: var(--lr-line-height);
}

/* —— Tabs (Dokan-style underline) —— */
.lr-dashboard__tabs,
.lr-store-settings__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-bottom: 2px solid var(--lr-border);
  padding-bottom: 0;
  margin-bottom: var(--lr-space-lg);
}

.lr-dashboard__tab,
.lr-store-settings__tabs button {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: var(--lr-radius-sm) var(--lr-radius-sm) 0 0;
  background: transparent;
  color: var(--lr-text-muted);
  padding: 0.65rem 1rem;
  margin-bottom: -2px;
  cursor: pointer;
  font: inherit;
  font-size: var(--lr-font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.lr-dashboard__tab:hover,
.lr-store-settings__tabs button:hover {
  color: var(--lr-secondary);
  background: var(--lr-surface-muted);
}

.lr-dashboard__tab.is-active,
.lr-store-settings__tabs button.is-active {
  color: var(--lr-primary);
  border-bottom-color: var(--lr-primary);
  background: var(--lr-primary-muted);
  font-weight: 600;
}

/* —— Panels / cards —— */
.lr-dashboard__panel.is-active {
  background: var(--lr-surface);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-lg);
  padding: var(--lr-space-lg);
  box-shadow: var(--lr-shadow-sm);
}

.lr-item,
.lr-listing-form-ui,
.lr-listing-modules,
.lr-store-settings,
.lr-sales-summary,
.lr-dashboard__notice,
.lr-dashboard__onboarding {
  background: var(--lr-surface);
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-md);
  box-shadow: var(--lr-shadow-sm);
}

.lr-item {
  padding: var(--lr-space-md) var(--lr-space-lg);
  border-bottom: none;
}

.lr-list {
  gap: var(--lr-space-md);
}

/* —— Buttons —— */
.lr-btn,
body.lr-platform-admin-screen .button.lr-platform-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lr-space-xs);
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--lr-primary);
  border-radius: var(--lr-radius-md);
  background: var(--lr-primary);
  color: var(--lr-on-primary);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: var(--lr-font-size-sm);
  font-weight: 600;
  width: fit-content;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.lr-btn:hover,
body.lr-platform-admin-screen .button.lr-platform-button-primary:hover {
  background: var(--lr-primary-hover);
  border-color: var(--lr-primary-hover);
  color: var(--lr-on-primary);
}

.lr-btn--ghost,
body.lr-platform-admin-screen .button.lr-platform-button-secondary {
  background: var(--lr-surface);
  color: var(--lr-secondary);
  border-color: var(--lr-border-strong);
  font-weight: 500;
}

.lr-btn--ghost:hover,
body.lr-platform-admin-screen .button.lr-platform-button-secondary:hover {
  background: var(--lr-surface-muted);
  color: var(--lr-secondary);
  border-color: var(--lr-border-strong);
}

/* —— Forms —— */
.lr-form {
  max-width: 40rem;
}

.lr-form label {
  font-size: var(--lr-font-size-sm);
  font-weight: 500;
  color: var(--lr-secondary);
}

.lr-form input[type='text'],
.lr-form input[type='email'],
.lr-form input[type='number'],
.lr-form input[type='password'],
.lr-form input[type='url'],
.lr-form select,
.lr-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--lr-border-strong);
  border-radius: var(--lr-radius-md);
  background: var(--lr-surface);
  color: var(--lr-text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lr-form input:focus,
.lr-form select:focus,
.lr-form textarea:focus {
  outline: none;
  border-color: var(--lr-primary);
  box-shadow: 0 0 0 3px var(--lr-primary-muted);
}

.lr-form__status {
  padding: var(--lr-space-md);
  border-radius: var(--lr-radius-md);
  border: 1px solid var(--lr-border);
  background: var(--lr-surface-muted);
}

.lr-form__status--error {
  border-color: var(--lr-danger);
  background: var(--lr-danger-muted);
  color: var(--lr-danger);
}

/* —— Tables —— */
.lr-table {
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-md);
  overflow: hidden;
  background: var(--lr-surface);
}

.lr-table th {
  background: var(--lr-surface-muted);
  font-size: var(--lr-font-size-sm);
  font-weight: 600;
  color: var(--lr-secondary-muted);
}

.lr-table th,
.lr-table td {
  border-bottom: 1px solid var(--lr-border);
  padding: 0.65rem 0.85rem;
}

/* —— Badges —— */
.lr-badge {
  border-radius: 999px;
  background: var(--lr-surface-muted);
  color: var(--lr-secondary);
  border: 1px solid var(--lr-border);
  font-weight: 500;
}

.lr-badge--warn {
  background: var(--lr-warning-muted);
  border-color: color-mix(in srgb, var(--lr-warning) 35%, var(--lr-border));
  color: var(--lr-warning);
}

/* —— Meta / empty —— */
.lr-meta {
  color: var(--lr-text-muted);
}

.lr-empty {
  color: var(--lr-text-muted);
  padding: var(--lr-space-lg);
  text-align: center;
  background: var(--lr-surface-muted);
  border-radius: var(--lr-radius-md);
  border: 1px dashed var(--lr-border);
}

.lr-item.is-highlighted,
.lr-sales-detail.is-highlighted {
  border-left: 4px solid var(--lr-primary);
  background: var(--lr-primary-muted);
}

.lr-dashboard__notice--success {
  border-left: 4px solid var(--lr-success);
  background: var(--lr-success-muted);
}

.lr-quota__alert {
  border-left-color: var(--lr-danger);
  background: var(--lr-danger-muted);
}

/* —— Mobile —— */
@media (max-width: 767px) {
  .lr-dashboard__panel.is-active {
    padding: var(--lr-space-md);
    border-radius: var(--lr-radius-md);
  }

  .lr-dashboard__tabs {
    margin-left: calc(-1 * var(--lr-space-sm));
    margin-right: calc(-1 * var(--lr-space-sm));
    padding-left: var(--lr-space-sm);
    padding-right: var(--lr-space-sm);
  }

  .lr-btn,
  .lr-form button[type='submit'],
  .lr-dashboard__notice-actions .lr-btn {
    width: 100%;
    justify-content: center;
  }

  .lr-form {
    max-width: none;
  }

  .lr-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .lr-bookings-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .lr-bookings-filters select {
    width: 100%;
    min-width: 0;
  }

  .lr-store-settings__tabs button {
    padding: 0.55rem 0.75rem;
    font-size: 0.8125rem;
  }
}