/**
 * B3 Swatches – Custom Freemius Account Page Styles
 *
 * Mirrors the admin settings UI: slate neutrals, dynamic admin color,
 * 10px button radius, subtle shadows, smooth transitions.
 */

/* ─── Design tokens ─── */
#fs_account {
  --b3-wvs-admin-color: var(--wp-admin-theme-color, #46b3e5);
}

/* ─── Page wrapper ─── */
#fs_account {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Fade-in entrance ─── */
@keyframes b3-account-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#fs_account .metabox-holder {
  animation: b3-account-fade-up 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  #fs_account .metabox-holder {
    animation: none !important;
  }
}

/* ─── Postbox cards ─── */
#fs_account .postbox {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

#fs_account .postbox:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* ─── Section headers ─── */
#fs_account h3 {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 14px 20px;
}

#fs_account h3 .dashicons {
  color: var(--b3-wvs-admin-color);
  font-size: 1.15em;
  height: 1.15em;
  width: 1.15em;
  vertical-align: middle;
  margin-right: 6px;
}

#fs_account i.dashicons {
  color: var(--b3-wvs-admin-color);
}

/* ─── Header actions (top-right links) ─── */
#fs_account .fs-header-actions {
  top: 12px;
  right: 20px;
  font-size: 0.8125rem;
}

#fs_account .fs-header-actions li a,
#fs_account .fs-header-actions li .button {
  color: var(--b3-wvs-admin-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

#fs_account .fs-header-actions li a:hover,
#fs_account .fs-header-actions li .button:hover {
  color: color-mix(in srgb, var(--b3-wvs-admin-color) 80%, #0f172a);
}

.rtl #fs_account .fs-header-actions {
  left: 20px;
  right: auto;
}

/* ─── Key-value table (account details) ─── */
.fs-key-value-table {
  border-collapse: separate;
  border-spacing: 0;
}

.fs-key-value-table tr td {
  padding: 11px 20px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.5;
  vertical-align: middle;
}

.fs-key-value-table tr:last-child td {
  border-bottom: none;
}

.fs-key-value-table tr td:first-child {
  color: #64748b;
  font-weight: 600;
  font-size: 0.8125rem;
}

.fs-key-value-table tr td:first-child nobr {
  font-weight: 600;
}

/* Alternating rows */
#fs_account .fs-odd {
  background: #f8fafc;
}

/* Code elements (license keys, secret keys) */
#fs_account code,
.fs-key-value-table code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  color: #334155;
  font-size: 0.8125rem;
  padding: 2px 8px;
}

/* ─── Tags / badges ─── */
#fs_account label.fs-tag,
#fs_account span.fs-tag {
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  text-transform: uppercase;
  vertical-align: middle;
}

#fs_account label.fs-tag.fs-success,
#fs_account span.fs-tag.fs-success {
  background: color-mix(in srgb, #22c55e 14%, #ffffff);
  border: 1px solid color-mix(in srgb, #22c55e 25%, transparent);
  color: #15803d;
}

#fs_account label.fs-tag.fs-warn,
#fs_account span.fs-tag.fs-warn {
  background: color-mix(in srgb, #f59e0b 14%, #ffffff);
  border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
  color: #b45309;
}

#fs_account label.fs-tag.fs-error,
#fs_account span.fs-tag.fs-error {
  background: color-mix(in srgb, #ef4444 12%, #ffffff);
  border: 1px solid color-mix(in srgb, #ef4444 25%, transparent);
  color: #dc2626;
}

#fs_account label.fs-tag.fs-info,
#fs_account span.fs-tag.fs-info {
  background: color-mix(in srgb, var(--b3-wvs-admin-color) 12%, #ffffff);
  border: 1px solid
    color-mix(in srgb, var(--b3-wvs-admin-color) 25%, transparent);
  color: var(--b3-wvs-admin-color);
}

/* ─── Buttons ─── */
#fs_account .button,
#fs_account .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
  text-decoration: none;
  height: auto;
}

#fs_account .button:hover,
#fs_account .button-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

#fs_account .button:focus,
#fs_account .button-secondary:focus {
  border-color: var(--b3-wvs-admin-color);
  box-shadow: 0 0 0 1px var(--b3-wvs-admin-color);
  outline: none;
}

#fs_account .button-primary {
  background: var(--b3-wvs-admin-color);
  border-color: var(--b3-wvs-admin-color);
  color: #ffffff;
  box-shadow: 0 1px 3px
    color-mix(in srgb, var(--b3-wvs-admin-color) 30%, transparent);
}

#fs_account .button-primary:hover {
  filter: brightness(0.95);
  box-shadow: 0 4px 14px
    color-mix(in srgb, var(--b3-wvs-admin-color) 35%, transparent);
}

#fs_account .button-primary:focus {
  box-shadow:
    0 0 0 1px #ffffff,
    0 0 0 3px var(--b3-wvs-admin-color);
}

/* Small buttons */
#fs_account .button-small,
#fs_account .button.button-small {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}

/* Upgrade button */
#fs_account .button-upgrade,
#fs_account .fs-upgrade {
  background: var(--b3-wvs-admin-color);
  border-color: var(--b3-wvs-admin-color);
  color: #ffffff;
}

#fs_account .button-upgrade:hover,
#fs_account .fs-upgrade:hover {
  filter: brightness(0.95);
  color: #ffffff;
}

#fs_account .button-upgrade .dashicons,
#fs_account .fs-upgrade .dashicons {
  color: #ffffff;
  font-size: 0.9em;
  margin-right: 4px;
}

/* Button groups */
#fs_account_details .button-group,
#fs_account .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ─── Nav tabs (Sites / Account / Billing) ─── */
#fs_account .nav-tab-wrapper {
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
  padding: 0;
}

#fs_account .nav-tab-wrapper .nav-tab {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 10px 16px;
  margin-bottom: -1px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

#fs_account .nav-tab-wrapper .nav-tab:hover {
  color: #0f172a;
  background: transparent;
}

#fs_account .nav-tab-wrapper .nav-tab-active {
  color: var(--b3-wvs-admin-color);
  border-bottom-color: var(--b3-wvs-admin-color);
  background: transparent;
}

/* ─── Addons table ─── */
#fs_account #fs_addons {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  overflow: hidden;
}

#fs_account #fs_addons thead tr {
  background: #f8fafc;
}

#fs_account #fs_addons thead th {
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-transform: uppercase;
}

#fs_account #fs_addons thead th h3 {
  background: transparent;
  border: none;
  color: #0f172a;
  font-size: 0.875rem;
  margin: 0;
  padding: 0;
}

#fs_account #fs_addons tbody tr {
  transition: background 0.15s ease;
}

#fs_account #fs_addons tbody tr:hover {
  background: #f8fafc;
}

#fs_account #fs_addons tbody td {
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 0.8125rem;
  padding: 12px 16px;
  vertical-align: middle;
}

#fs_account #fs_addons tbody tr:last-child td {
  border-bottom: none;
}

/* ─── Sites table (multisite) ─── */
#fs_account #fs_sites .fs-scrollable-table {
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  overflow: hidden;
}

#fs_account #fs_sites .fs-table-head table {
  margin: 0;
}

#fs_account #fs_sites .fs-table-head thead td {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-transform: uppercase;
}

#fs_account #fs_sites .fs-search {
  border: 1px solid #e2e8f0;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  padding: 6px 12px 6px 30px;
  transition: border-color 0.15s ease;
}

#fs_account #fs_sites .fs-search:focus {
  border-color: var(--b3-wvs-admin-color);
  box-shadow: 0 0 0 1px var(--b3-wvs-admin-color);
  outline: none;
}

/* ─── Billing & payments tables ─── */
#fs_account #fs_billing .widefat,
#fs_account .fs-payments-table {
  border: 1px solid #e2e8f0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.875rem;
  overflow: hidden;
}

#fs_account #fs_billing .widefat thead th,
#fs_account .fs-payments-table thead th {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-transform: uppercase;
}

#fs_account #fs_billing .widefat tbody td,
#fs_account .fs-payments-table tbody td {
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 0.8125rem;
  padding: 12px 16px;
}

#fs_account #fs_billing .widefat tbody tr:last-child td,
#fs_account .fs-payments-table tbody tr:last-child td {
  border-bottom: none;
}

/* ─── WP notices in account context ─── */
#fs_account .fs-notice {
  border-radius: 0.625rem;
  border-left-width: 4px;
  padding: 12px 16px;
  font-size: 0.8125rem;
}

/* ─── Toggle visibility buttons ─── */
#fs_account .fs-toggle-visibility {
  font-size: 0.75rem;
  font-weight: 600;
}

/* ─── Deactivation / opt-out links ─── */
#fs_account .fs-action a {
  color: #64748b;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

#fs_account .fs-action a:hover {
  color: var(--b3-wvs-admin-color);
}

/* ─── Inside padding ─── */
#fs_account .postbox .inside {
  padding: 0;
}

/* ─── Form inputs ─── */
#fs_account input[type="text"],
#fs_account input[type="email"],
#fs_account input[type="url"],
#fs_account select {
  border: 1px solid #e2e8f0;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  padding: 8px 12px;
  transition: border-color 0.15s ease;
}

#fs_account input[type="text"]:focus,
#fs_account input[type="email"]:focus,
#fs_account input[type="url"]:focus,
#fs_account select:focus {
  border-color: var(--b3-wvs-admin-color);
  box-shadow: 0 0 0 1px var(--b3-wvs-admin-color);
  outline: none;
}

/* ─── Responsive refinements ─── */
@media (max-width: 782px) {
  #fs_account h3 {
    font-size: 0.875rem;
    padding: 12px 14px;
  }

  .fs-key-value-table tr td {
    padding: 10px 14px;
    font-size: 0.8125rem;
  }

  #fs_account .fs-header-actions {
    position: static;
    padding: 8px 14px;
  }

  #fs_account #fs_addons thead th,
  #fs_account #fs_addons tbody td {
    padding: 10px 12px;
  }
}