/* ============ SETTINGS TABS (underline style — matches site pattern) ============ */
.settings-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  margin-bottom: -1px;
}

.settings-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.settings-tab:hover {
  color: var(--color-text-primary);
}

.settings-tab.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
  font-weight: 600;
}

.settings-tab.active svg {
  stroke: var(--color-text-primary);
}

/* Tab panels */
.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
}

/* ============ SETTINGS CARDS ============ */
.settings-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 32px;
  margin-bottom: 24px;
}

/* ── Neutral buttons — kill pink except billing CTA ── */
.settings-panel .btn-primary {
  background: #3b4857;
  border-color: #3b4857;
  color: #fff;
}
.settings-panel .btn-primary:hover {
  background: #2f3d4a;
  border-color: #2f3d4a;
  color: #fff;
}

.settings-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}

/* ============ SETTINGS GROUPS (flat sections with labels) ============ */
.settings-group {
  margin-bottom: 56px;
}
.settings-group:first-child {
  margin-top: 32px;
}
.settings-group:last-child {
  margin-bottom: 0;
}
.settings-group-header {
  margin-bottom: 16px;
  padding: 0 4px;
}
.settings-group-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}
.settings-group-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 4px 0 0 0;
  line-height: 1.5;
  opacity: 0.85;
}
.settings-group--danger .settings-group-label {
  color: var(--color-error);
}
/* Subsection — same chrome as .settings-card, stacked with small gap */
.settings-subsection {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 32px;
  margin-bottom: 12px;
}
.settings-subsection:last-child {
  margin-bottom: 0;
}
.settings-subsection-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}
/* Cards inside groups — no bottom margin (group handles spacing) */
.settings-group .settings-card {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .settings-group {
    margin-bottom: 40px;
  }
  .settings-subsection {
    padding: 20px 20px;
  }
}

/* ============ AVATAR SECTION (Sneat-style) ============ */
.avatar-upload-section {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
}

.avatar-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  font-weight: 700;
  color: #475569;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.avatar-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avatar-upload-actions .btn-row {
  display: flex;
  gap: 12px;
}

.avatar-upload-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* ============ FORM GRID (Sneat 2-column) ============ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

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

.form-input {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-card);
  transition: border-color var(--transition);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #94a3b8;
  box-shadow: none;
}

.form-input:disabled,
.form-input[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23646e78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* ============ SETTINGS ROW (for toggle rows) ============ */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.settings-row-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ============ TOGGLE SWITCH ============ */
.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.toggle input { display: none; }

.toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--color-border);
  border-radius: 11px;
  transition: background var(--transition);
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle input:checked ~ .toggle-track {
  background: #475569;
}

.toggle input:checked ~ .toggle-track::after {
  transform: translateX(18px);
}

/* ============ PASSWORD CHANGE FORM ============ */

/* Field wrapper — positions toggle button inside input */
.pw-field-wrap {
  position: relative;
}

.pw-field-wrap .form-input {
  padding-right: 44px;
}

/* Show/hide toggle */
.pw-toggle {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition);
  padding: 0;
}

.pw-toggle:hover { color: var(--color-text-primary); }

.pw-toggle:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.pw-toggle svg { pointer-events: none; }

/* Icon swap: default shows eye, .is-visible shows eye-off */
.pw-toggle .pw-icon-hide { display: none; }
.pw-toggle.is-visible .pw-icon-show { display: none; }
.pw-toggle.is-visible .pw-icon-hide { display: block; }

/* Requirements checklist */
.pw-checklist {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pw-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  transition: color 0.25s ease;
}

.pw-check-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  transition: border-color 0.25s ease, background 0.25s ease;
}

/* Met state */
.pw-check.met { color: #16a34a; }

.pw-check.met .pw-check-icon {
  border-color: #22c55e;
  background: #22c55e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

/* Field-level error */
.pw-field-error {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin-top: 6px;
}

.pw-field-error[hidden] { display: none; }

/* Input error border */
.form-input.pw-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.form-input.pw-invalid:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

/* Error banner (top of form) */
.pw-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: var(--color-error-light);
  color: var(--color-error);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.pw-error-banner svg { flex-shrink: 0; }
.pw-error-banner[hidden] { display: none; }

/* Submit spinner */
.pw-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pw-spin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

.pw-spinner[hidden] { display: none; }

@keyframes pw-spin { to { transform: rotate(360deg); } }

/* Disabled submit */
#pw-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark mode */
[data-theme="dark"] .pw-toggle { color: var(--color-text-secondary); }
[data-theme="dark"] .pw-toggle:hover { color: var(--color-text-primary); }

[data-theme="dark"] .pw-check.met { color: #4ade80; }
[data-theme="dark"] .pw-check.met .pw-check-icon {
  border-color: #4ade80;
  background: #4ade80;
}

[data-theme="dark"] .form-input.pw-invalid {
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

[data-theme="dark"] .pw-error-banner {
  background: rgba(220, 38, 38, 0.12);
}

/* Mobile */
@media (max-width: 767px) {
  .pw-toggle { width: 44px; min-height: 44px; }
}

/* ============ TWO-FACTOR AUTHENTICATION ============ */

.mfa-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 540px;
}

#mfa-setup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#mfa-setup-btn svg { flex-shrink: 0; }

/* Steps */
.mfa-steps {
  max-width: 420px;
}

.mfa-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 14px;
}

.mfa-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3b4857;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* QR code */
.mfa-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 20px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.mfa-qr-wrap svg,
.mfa-qr-wrap img {
  width: 200px;
  height: 200px;
  max-width: 100%;
  height: auto;
}

/* Manual secret code toggle */
.mfa-secret-toggle {
  margin-bottom: 20px;
}

.mfa-secret-toggle summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-weight: 500;
  padding: 4px 0;
}

.mfa-secret-toggle summary:hover { color: var(--color-text-primary); text-decoration: underline; }

.mfa-secret-code {
  display: block;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--color-bg, #FAFAF8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--color-text-primary);
  word-break: break-all;
  user-select: all;
}

/* Verify row */
.mfa-verify-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.mfa-code-input {
  max-width: 160px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 6px;
  font-family: 'Courier New', monospace;
  padding: 10px 14px;
}

.mfa-code-input::placeholder {
  letter-spacing: 6px;
  opacity: 0.3;
}

/* Error */
.mfa-error {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin-bottom: 8px;
}
.mfa-error[hidden] { display: none; }

/* Link-style button (used for cancel links) */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { color: var(--color-text-primary); }

/* Cancel link */
.mfa-cancel-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
}
.mfa-cancel-link:hover { color: var(--color-text-primary); text-decoration: underline; }

/* Active state */
.mfa-active-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mfa-active-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mfa-active-info p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.mfa-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.mfa-active-badge svg { flex-shrink: 0; }

/* Dark mode — MFA */
[data-theme="dark"] .mfa-qr-wrap {
  background: #fff;
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .mfa-secret-code {
  background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .mfa-active-badge {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

/* Mobile — MFA */
@media (max-width: 767px) {
  .mfa-active-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .mfa-verify-row {
    flex-direction: column;
  }
  .mfa-code-input {
    max-width: 100%;
  }
}

/* ============ DEVICES / ACTIVE SESSIONS ============ */
.devices-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}

.devices-loading,
.devices-empty {
  padding: 12px 0;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.devices-error {
  padding: 12px 16px;
  background: var(--color-error-light);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.devices-error p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-error);
}
.devices-error .link-btn {
  color: var(--color-error);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.devices-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Devices rows — mirror the .connection-item pattern from the Connections tab
   so this card feels native to the settings panel. Neutral palette only:
   no coral, no pink, no primary-color pull (see comment at line 66). */
.devices-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--color-bg, #f8f8fa);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.devices-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Current device — distinction via a thicker slate border + the green
   "Denne enhed" pill. No background tint, no coral. */
.devices-item--current,
.devices-item--current:hover {
  border-color: #3b4857;
  border-width: 2px;
  padding: 17px 19px; /* compensate for the extra 1px of border */
}

.devices-item-info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

/* Icon — matches .connection-icon: white pill, thin border, subtle shadow */
.devices-item-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.devices-item-text {
  min-width: 0;
  flex: 1;
}

.devices-item-title {
  font-size: var(--font-size-base, 15px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.devices-current-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.devices-item-meta {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
  margin: 0;
  word-break: break-word;
}

.devices-item-action {
  flex-shrink: 0;
}

/* Per-device "Log ud" — mirrors .connection-disconnect-btn: transparent,
   neutral at rest, red hover for the destructive per-item action. */
.devices-signout-btn {
  padding: 10px 18px;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  min-height: 44px;
  transition: all 0.15s ease;
}

.devices-signout-btn:hover:not(:disabled) {
  border-color: #ff3e1d;
  color: #ff3e1d;
  background: rgba(255, 62, 29, 0.04);
}

.devices-signout-btn:focus-visible {
  outline: 2px solid var(--color-border);
  outline-offset: 2px;
}

.devices-signout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.devices-bulk {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.devices-bulk .btn {
  min-height: 44px;
}

/* The bulk button uses the global .btn-secondary class, whose :hover rule
   in components.css pulls var(--color-primary) for both border and text.
   In voksen mode that primary resolves to coral (#e24668), which is the
   red hover the user objected to. Override it here with a neutral slate
   hover so this button matches the rest of the settings panel. */
#devices-signout-others-btn:hover:not(:disabled),
#devices-signout-others-btn:focus-visible:not(:disabled) {
  background: #f8fafc;
  border-color: #3b4857;
  color: #3b4857;
}

/* Dark mode — devices */
[data-theme="dark"] .devices-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .devices-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .devices-item--current,
[data-theme="dark"] .devices-item--current:hover {
  border-color: #a3a19b;
}

[data-theme="dark"] .devices-item-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #a3a19b;
}

[data-theme="dark"] .devices-current-badge {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

[data-theme="dark"] #devices-signout-others-btn:hover:not(:disabled),
[data-theme="dark"] #devices-signout-others-btn:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: #a3a19b;
  color: #e2e8f0;
}

/* Mobile — devices */
@media (max-width: 767px) {
  .devices-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .devices-item-action {
    width: 100%;
  }
  .devices-signout-btn {
    width: 100%;
  }
}

/* ============ DELETE ACCOUNT ============ */
.danger-card {
  border: 1px solid var(--color-error);
}

.danger-card .settings-card-title {
  color: var(--color-error);
}

.danger-alert {
  background: var(--color-error-light);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.danger-alert h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-error);
  margin-bottom: 4px;
}

.danger-alert p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* What gets deleted — bullet list */
.delete-data-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.delete-data-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.delete-data-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-error);
  opacity: 0.5;
  flex-shrink: 0;
}


/* Danger button */
.danger-card .btn-danger {
  background: transparent;
  color: var(--color-text-primary, #384551);
  border: 1px solid var(--color-text-primary, #384551);
  min-height: 44px;
}

.danger-card .btn-danger:hover:not(:disabled) {
  background: var(--color-text-primary, #384551);
  color: white;
}

.danger-card .btn-danger:disabled,
.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Delete confirmation modal */
.delete-modal {
  max-width: 440px;
  text-align: center;
  padding: 28px 24px;
}

.delete-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-error-light);
  color: var(--color-error);
  margin: 0 auto 16px;
}

.delete-modal .modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.delete-modal-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.delete-modal-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: left;
  margin-bottom: 6px;
}

.delete-modal .form-input {
  width: 100%;
  margin-bottom: 4px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
}

.delete-modal-error {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  text-align: left;
  margin-bottom: 16px;
  min-height: 18px;
}

.delete-modal-error[hidden] { display: none; }

.delete-modal .modal-actions {
  margin-top: 8px;
}

/* Dark mode — danger elements */
[data-theme="dark"] .danger-card {
  border-color: rgba(220, 38, 38, 0.5);
}

[data-theme="dark"] .danger-alert {
  background: rgba(220, 38, 38, 0.1);
}

[data-theme="dark"] .delete-data-list li::before {
  opacity: 0.7;
}


[data-theme="dark"] .danger-card .btn-danger {
  border-color: rgba(220, 38, 38, 0.6);
}

[data-theme="dark"] .danger-card .btn-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.9);
}

[data-theme="dark"] .delete-modal-icon {
  background: rgba(220, 38, 38, 0.15);
}

/* ============ PLAN CARD (Billing tab) ============ */
.plan-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.plan-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.plan-highlight {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.plan-highlight .plan-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  margin-left: 8px;
}

.plan-progress {
  margin-top: 8px;
}

.plan-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.plan-progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.plan-progress-fill {
  height: 100%;
  background: #475569;
  border-radius: 3px;
  transition: width var(--transition-slow);
}

.plan-progress-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 6px;
}

/* ============ NOTIFICATIONS TABLE ============ */
.notif-table {
  width: 100%;
  border-collapse: collapse;
}

.notif-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.notif-table th:not(:first-child) {
  text-align: center;
}

.notif-table td {
  padding: 14px 16px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.notif-table td:not(:first-child) {
  text-align: center;
}

.notif-table tr:last-child td {
  border-bottom: none;
}

.notif-schedule {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.notif-schedule h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

/* Old connections block removed — see Connections Tab section below */

/* ============ INLINE SAVE CHECKMARK ============ */
.input-saved {
  border-color: var(--color-success) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  transition: border-color 0.3s ease;
}

/* ============ COUNTDOWN BUTTON ============ */
.btn-countdown {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============ EXPORT BUTTON SPINNER ============ */
#export-data-btn .spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ============ NO-SCHOOL INFO ============ */
.no-school-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  padding: 8px 0;
}

/* ============ SKELETON LOADING ============ */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-card) 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  min-width: 60px;
}

.skeleton-badge {
  height: 22px;
  width: 48px;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.data-loaded .skeleton { display: none; }

/* ============ TRUST FOOTER (legal links below cards) ============ */
.settings-trust-footer {
  margin-top: 32px;
  padding: 20px 4px 8px;
  text-align: center;
}
.settings-trust-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.settings-trust-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.settings-trust-links a:hover,
.settings-trust-links a:focus-visible {
  color: var(--color-text-primary);
  text-decoration: underline;
}
.settings-trust-sep {
  color: var(--color-text-secondary);
  opacity: 0.5;
}
@media (max-width: 767px) {
  .settings-trust-footer {
    margin-top: 24px;
    padding: 16px 4px 8px;
  }
  .settings-trust-links {
    font-size: 12px;
    gap: 6px 10px;
  }
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 767px) {
  /* Breathing room above fixed mobile bottom nav (~82px) */
  .settings-panel {
    padding-bottom: 48px;
  }

  .settings-tabs {
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .settings-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .settings-tab {
    padding: 10px 12px;
    font-size: var(--font-size-xs);
  }

  .settings-tab span.tab-label {
    display: none;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .avatar-upload-section {
    flex-direction: column;
    text-align: center;
  }

  .connections-grid {
    grid-template-columns: 1fr;
  }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .settings-row .toggle {
    align-self: flex-start;
  }

  .settings-row .btn,
  .settings-row select.form-input {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }

  .notif-table th,
  .notif-table td {
    padding: 10px 8px;
    font-size: var(--font-size-xs);
  }

  .avatar-large {
    width: 80px;
    height: 80px;
    font-size: 1.75rem;
  }
}


/* ============================================================
   BILLING REDESIGN — Premium-grade SaaS billing section
   Replaces lines 1100–1384 in indstillinger.css

   Design references: Stripe Dashboard, Linear Settings, Vercel

   HTML ADDITIONS NEEDED (see comments marked "HTML:" below)
   ============================================================ */


/* ── 1. PLAN STATUS CARD — The hero of the billing page ────── */

/*
 * For premium users: a confident, celebratory card with a tinted
 * surface that says "you're in good hands." Not a loading bar,
 * not debug text — a premium membership status.
 *
 * For free users: a clean, neutral card that shows usage and
 * naturally leads the eye to the pricing section below.
 */

.billing-plan-layout {
  display: flex;
  gap: var(--space-8);
  align-items: stretch;
}

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

/* ── Plan header: name + badge on one line ── */
.billing-plan-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.billing-plan-name {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

/*
 * Plan badge — solid pill, not a faint tag.
 * JS sets `.billing-badge-premium` for paid users
 * and `.billing-badge-free` for free users.
 */
.billing-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.4;
}

.billing-badge-premium {
  background: #3b4857;
  color: #fff;
}

.billing-badge-free {
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Plan description — the benefit statement */
.billing-plan-desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

/* Premium benefit callout — replaces generic desc for paid users */
/* HTML: <p class="billing-benefit-statement" id="plan-desc">Du har ubegrænset adgang til alle værktøjer</p> */
.billing-benefit-statement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: #16a34a;
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.billing-benefit-statement svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ── 2. USAGE SECTION — Confident for premium, clear for free ── */

.billing-progress {
  margin-top: var(--space-4);
}

.billing-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.billing-progress-header strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Track — slim, neutral */
.billing-progress-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

/* Fill — dark slate, professional */
.billing-progress-fill {
  height: 100%;
  border-radius: 8px;
  background: #475569;
  position: relative;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Traveling shine — liquid light moving across */
.billing-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  background-size: 30% 100%;
  background-repeat: no-repeat;
  animation: billing-shine 2.5s ease-in-out infinite;
}

/* Glass highlight — 3D liquid depth */
.billing-progress-fill::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  z-index: 1;
}

@keyframes billing-shine {
  0%   { background-position: -30% 0; }
  100% { background-position: 130% 0; }
}

/* Premium — calm muted slate */
.billing-progress-premium .billing-progress-bar {
  background: #f1f5f9;
}
.billing-progress-premium .billing-progress-fill {
  background: linear-gradient(90deg, #94a3b8, #475569);
  opacity: 0.8;
}

.billing-progress-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  line-height: 1.4;
}


/* ── 3. LICENSE DETAILS — Clean key-value, not a debug table ── */

.billing-plan-details {
  margin: var(--space-5) 0 var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-border);
}

.billing-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  font-size: var(--font-size-sm);
}

/* Subtle separator — only between rows, not at top/bottom */
.billing-detail-row + .billing-detail-row {
  border-top: 1px solid var(--color-border);
}

.billing-detail-label {
  color: var(--color-text-secondary);
  font-weight: 400;
}

.billing-detail-value {
  color: var(--color-text-primary);
  font-weight: 600;
}


/* ── 4. MANAGE BUTTONS — Clear hierarchy ── */

/*
 * "Administrer abonnement" = primary CTA.
 * "Opsig abonnement" = subtle text link, NOT a big red button.
 */
.billing-plan-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Cancel link — deliberately minimal, no button border */
.billing-cancel-link {
  background: none;
  border: none;
  padding: var(--space-2) 0;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.billing-cancel-link:hover {
  color: var(--color-error);
  text-decoration: underline;
}

/* Remove the old red-border danger button style for cancel */
.btn-danger-outline {
  color: var(--color-text-primary, #384551);
  border: 1px solid var(--color-text-primary, #384551);
  background: transparent;
}
.btn-danger-outline:hover {
  background: rgba(56, 69, 81, 0.08);
}


/* ── Section divider between status and pricing ── */
.billing-section-divider {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: 28px 0 28px;
}

/* ── 5. PRICE BOX (right column — hidden when empty) ── */

.billing-plan-price-card {
  display: none; /* No longer used — code boxes moved inline */
}

/* ── 5b. INLINE CODE REDEMPTION (under usage bar) ── */

.billing-code-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding: 10px 16px;
  background: var(--color-surface, #f8f9fa);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 8px);
  transition: border-color 0.2s, background 0.2s;
}
.billing-code-inline:hover {
  border-color: #bbb;
}

.billing-code-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.billing-code-prompt svg {
  color: var(--color-text-tertiary, #999);
  flex-shrink: 0;
}
.billing-code-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.billing-code-link {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  transition: color 0.15s;
}
.billing-code-link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}
.billing-code-link--cancel {
  color: var(--color-text-tertiary, #999);
  font-weight: 500;
}
.billing-code-link--cancel:hover {
  color: var(--color-text-secondary);
}

.billing-code-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.billing-code-field {
  width: 180px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: #fff;
}
.billing-code-field:focus {
  border-color: #999;
  outline: none;
  box-shadow: none;
}
.billing-code-submit {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  background: var(--color-text-primary, #333);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.billing-code-submit:hover {
  opacity: 0.85;
}

/* Dark mode */
[data-theme="dark"] .billing-code-inline {
  background: var(--color-card);
  border-color: var(--color-border);
}
[data-theme="dark"] .billing-code-inline:hover {
  border-color: #666;
}
[data-theme="dark"] .billing-code-submit {
  background: #e5e7eb;
  color: #1a1a1a;
}
[data-theme="dark"] .billing-code-field {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.billing-price-box {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  text-align: center;
  transition: border-color var(--transition);
}

.billing-price-box:hover {
  border-color: #cbd5e1;
}

.billing-price-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.billing-price-currency {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 600;
}

.billing-price-number {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
}

.billing-price-period {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}


/* ── 6. FEATURE LIST (inside plan card) ── */

.billing-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.billing-plan-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.billing-plan-features li svg {
  width: 16px;
  height: 16px;
  color: #16a34a;
  flex-shrink: 0;
}


/* ============================================================
   7. PAYMENT METHODS — Card on file display
   ============================================================

   HTML NEEDED (add after #section-abonnement closing </div>):

   <div class="settings-card" id="section-payment-methods">
     <div class="billing-section-header">
       <h3 class="settings-card-title">Betalingsmetoder</h3>
       <button class="btn btn-secondary btn-sm" id="add-payment-btn">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
         Tilføj kort
       </button>
     </div>
     <div class="billing-cards-list" id="payment-methods-list">
       <!-- JS renders cards here. Example card: -->
       <div class="billing-saved-card">
         <div class="billing-card-brand">
           <img src="/assets/img/visa.svg" alt="Visa" width="40" height="26">
         </div>
         <div class="billing-card-info">
           <span class="billing-card-name">Visa •••• 4242</span>
           <span class="billing-card-expiry">Udløber 12/2027</span>
         </div>
         <span class="badge billing-badge-premium" style="font-size:11px; text-transform:none; letter-spacing:0">Standard</span>
         <div class="billing-card-actions">
           <button class="btn btn-ghost btn-sm">Rediger</button>
         </div>
       </div>
     </div>
     <p class="billing-empty-state" id="no-payment-methods" style="display:none">
       Ingen betalingsmetoder tilføjet endnu.
     </p>
   </div>
*/

.billing-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.billing-section-header .settings-card-title {
  margin-bottom: 0;
}

.billing-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.billing-saved-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.billing-saved-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.billing-card-brand {
  flex-shrink: 0;
  width: 48px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.billing-card-brand img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.billing-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.billing-card-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.billing-card-expiry {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.billing-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.billing-empty-state {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  line-height: 1.5;
}


/* ============================================================
   8. INVOICE HISTORY TABLE
   ============================================================

   HTML NEEDED (add after payment methods card):

   <div class="settings-card" id="section-invoices">
     <div class="billing-section-header">
       <h3 class="settings-card-title">Faktureringshistorik</h3>
       <button class="btn btn-ghost btn-sm" id="download-all-invoices">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
         Hent alle
       </button>
     </div>
     <div class="billing-history-table-wrap">
       <table class="billing-history-table" id="invoice-table">
         <thead>
           <tr>
             <th>Dato</th>
             <th>Beskrivelse</th>
             <th>Beløb</th>
             <th>Status</th>
             <th></th>
           </tr>
         </thead>
         <tbody id="invoice-table-body">
           <!-- JS renders rows. Example: -->
           <tr>
             <td>24. mar 2026</td>
             <td>Premium — Årligt abonnement</td>
             <td>1.260,00 kr</td>
             <td><span class="badge badge-success billing-invoice-badge">Betalt</span></td>
             <td class="billing-invoice-action"><a href="#" class="billing-download-link" title="Hent PDF"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></a></td>
           </tr>
         </tbody>
       </table>
     </div>
     <p class="billing-empty-state" id="no-invoices" style="display:none">
       Ingen fakturaer endnu.
     </p>
   </div>
*/

.billing-history-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.billing-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.billing-history-table thead {
  position: sticky;
  top: 0;
}

.billing-history-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  background: var(--color-card);
}

.billing-history-table th:last-child {
  text-align: right;
  width: 48px;
}

.billing-history-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  vertical-align: middle;
}

.billing-history-table tbody tr:last-child td {
  border-bottom: none;
}

.billing-history-table tbody tr {
  transition: background var(--transition);
}

.billing-history-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Invoice status badges */
.billing-invoice-badge {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* Invoice download link */
.billing-invoice-action {
  text-align: right;
}

.billing-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: background var(--transition), color var(--transition);
}

.billing-download-link:hover {
  background: #f1f5f9;
  color: var(--color-text-primary);
}

.billing-download-link svg {
  width: 16px;
  height: 16px;
}


/* ============================================================
   9. PRICING CARDS — Keep existing, small refinements
   ============================================================ */

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

.pricing-card {
  position: relative;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  background: var(--color-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pricing-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pricing-card-popular {
  border-color: #475569;
  border-width: 2px;
  border-style: solid;
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.03) 0%, var(--color-card) 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transform: scale(1.03);
}
.pricing-card-popular:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  transform: scale(1.04);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #475569;
  color: #fff;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pricing-card-header h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--space-1);
}

.pricing-amount {
  font-size: 48px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
}

.pricing-period {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.pricing-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1) 0;
}

.pricing-save {
  font-size: var(--font-size-xs);
  color: #16a34a;
  font-weight: 700;
  margin: 0 0 var(--space-4) 0;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-5) 0;
  text-align: left;
}

.pricing-features li {
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pricing-features li::before {
  content: '';
  width: 16px;
  height: 16px;
  background: #16a34a;
  mask: url(data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E) center/contain no-repeat;
  -webkit-mask: url(data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E) center/contain no-repeat;
  flex-shrink: 0;
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-btn {
  width: 100%;
  margin-top: var(--space-2);
}


/* Pricing upgrade banner */
.pricing-upgrade-section {
  margin: var(--space-6) 0 var(--space-4) 0;
  padding: var(--space-5);
  background: #f8fafc;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
}

.pricing-upgrade-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.pricing-upgrade-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
}

.pricing-upgrade-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.pricing-upgrade-feature {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}


/* ============================================================
   10. SCHOOL / WORKPLACE CODE BOXES — Unchanged
   ============================================================ */

.school-code-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: 14px 18px;
  transition: border-color 0.2s;
}
.school-code-input-row { width: 100%; }
.school-code-box:hover {
  border-color: #cbd5e1;
}

.school-code-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #f5f5f5;
  border-radius: var(--radius-md, 10px);
}
.school-code-icon svg {
  width: 22px;
  height: 22px;
}

.school-code-text {
  flex: 1;
  min-width: 0;
}

.school-code-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}

.school-code-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 2px 0 0 0;
  line-height: 1.3;
}

.school-code-toggle {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-md, 8px);
  white-space: nowrap;
}

.school-code-input-row {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.school-code-field {
  width: 160px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  border-radius: var(--radius-md, 8px);
}

.school-code-submit {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  white-space: nowrap;
}

.school-code-trust {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 8px;
  margin-left: 60px;
}
.school-code-trust strong {
  color: var(--color-text-primary);
}

/* Workplace variant (voksen) — neutral, same as base */


/* ============================================================
   11. DARK MODE — All billing sections
   ============================================================ */

/* Plan card dark mode */
[data-theme="dark"] .billing-badge-free {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .billing-progress-bar {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .billing-progress-premium .billing-progress-bar {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .billing-progress-premium .billing-progress-fill {
  background: linear-gradient(90deg, #64748b, #94a3b8);
}

[data-theme="dark"] .billing-price-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .billing-price-box:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .billing-plan-details {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Payment methods dark mode */
[data-theme="dark"] .billing-saved-card {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .billing-saved-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .billing-card-brand {
  background: rgba(255, 255, 255, 0.06);
}

/* Invoice table dark mode */
[data-theme="dark"] .billing-history-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .billing-download-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* School/workplace code box dark mode (legacy — kept for safety) */
[data-theme="dark"] .school-code-box {
  background: var(--color-card);
  border-color: var(--color-border);
}
[data-theme="dark"] .school-code-box:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Pricing cards dark mode — subtle gradient */
[data-theme="dark"] .pricing-card-popular {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, var(--color-card) 100%);
  border-color: #64748b;
}

[data-theme="dark"] .pricing-upgrade-section {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   12. RESPONSIVE — Mobile (375px min)
   ============================================================ */

@media (max-width: 767px) {
  /* Plan layout stacks */
  .billing-plan-layout {
    flex-direction: column;
    gap: var(--space-5);
  }

  .billing-plan-price-card {
    width: 100%;
    min-width: 0;
  }

  .billing-price-box {
    padding: var(--space-4);
  }

  .billing-plan-name {
    font-size: var(--font-size-xl);
  }

  /* Actions stack */
  .billing-plan-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .billing-plan-actions .btn {
    width: 100%;
  }

  .billing-cancel-link {
    text-align: center;
    justify-content: center;
  }

  /* Section header stacks on small screens */
  .billing-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Payment card wraps */
  .billing-saved-card {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .billing-card-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Invoice table: horizontal scroll */
  .billing-history-table th,
  .billing-history-table td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }

  /* Inline code redemption — mobile */
  .billing-code-inline {
    flex-wrap: wrap;
  }
  .billing-code-input-row {
    width: 100%;
    margin-top: 8px;
  }
  .billing-code-field {
    flex: 1;
    width: auto;
  }
  .billing-code-submit {
    flex-shrink: 0;
  }

  /* Pricing cards stack */
  .pricing-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Popular card: no scale on mobile (breaks layout) */
  .pricing-card-popular {
    transform: none;
  }
  .pricing-card-popular:hover {
    transform: none;
  }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .pricing-cards {
    grid-template-columns: 1fr 1fr;
  }

  .billing-plan-layout {
    flex-direction: column;
  }

  .billing-plan-price-card {
    display: none;
  }
}


/* ============================================================
   13. UTILITY CLASSES for billing (used by JS)
   ============================================================ */

/* Hide elements conditionally */
.billing-hidden {
  display: none;
}

/* Smooth reveal for sections loaded by JS */
.billing-fade-in {
  animation: billingFadeIn 0.3s ease forwards;
}

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

/* Keep existing badge helpers (unchanged from original) */
.badge-primary-light {
  background: #f1f5f9;
  color: #475569;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge-success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge-primary {
  background: #3b4857;
  color: #fff;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

[data-theme="dark"] .badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

/* .btn-sm — kept for payment/invoice actions */
.btn-sm {
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  min-height: 28px;
}

/* ============ EDITION CARD — Sneat plan/tier style ============ */
#edition-card.edition-card {
  padding: 0;
  overflow: hidden;
  position: relative;
}

#edition-card .edition-accent {
  height: 2px;
  background: #e2e8f0;
  opacity: 1;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#edition-card .edition-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6);
}

#edition-card .edition-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

/* Sneat icon-badge pattern */
#edition-card .edition-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#edition-card .edition-details {
  flex: 1;
  min-width: 0;
}

#edition-card .edition-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

#edition-card .edition-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

#edition-card .edition-name-row #edition-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

#edition-card .edition-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  max-width: 380px;
}

/* Switch button — subtle outline, follows edition color system */
#edition-card .edition-action {
  flex-shrink: 0;
}

#edition-card .edition-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 var(--space-5);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

#edition-card .edition-switch-btn:hover {
  border-color: #94a3b8;
  color: var(--color-text-primary);
  background: #f8fafc;
}

#edition-card .edition-switch-btn:active {
  transform: scale(0.98);
}

#edition-card .edition-switch-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

#edition-card .edition-switch-btn svg {
  transition: transform 0.2s;
}

#edition-card .edition-switch-btn:hover svg {
  transform: rotate(180deg);
}

/* ============ DARK MODE — Neutral overrides ============ */
[data-theme="dark"] .avatar-large {
  background: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}
[data-theme="dark"] .settings-panel .btn-primary {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #1c1b18;
}
[data-theme="dark"] .settings-panel .btn-primary:hover {
  background: #f1f5f9;
  border-color: #f1f5f9;
  color: #1c1b18;
}
[data-theme="dark"] .toggle input:checked ~ .toggle-track {
  background: #94a3b8;
}
[data-theme="dark"] #edition-card .edition-accent {
  background: var(--color-border);
}
[data-theme="dark"] #edition-card .edition-icon-badge {
  background: #1c1b18;
  color: #94a3b8;
}
[data-theme="dark"] #edition-card .edition-switch-btn:hover {
  border-color: #64748b;
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .billing-progress-fill {
  background: #94a3b8;
}

/* Mobile: stack vertically */
@media (max-width: 575px) {
  #edition-card .edition-inner {
    flex-direction: column;
    align-items: stretch;
  }

  #edition-card .edition-desc {
    max-width: none;
  }

  #edition-card .edition-switch-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Connections Tab ── */
.connection-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--color-border, rgba(0,0,0,0.08));
  border-radius: 12px;
  background: var(--color-bg, #f8f8fa);
  margin-top: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.connection-item:first-of-type {
  margin-top: 0;
}

.connection-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.connection-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .connection-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

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

.connection-name {
  font-size: var(--font-size-base, 15px);
  font-weight: 600;
  color: var(--color-text-primary);
}

.connection-desc {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
  margin-top: 3px;
}

.connection-action {
  flex-shrink: 0;
}

.connection-status-loading {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
}

.connection-connected {
  display: flex;
  align-items: center;
  gap: 12px;
}

.connection-email {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #71dd37;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(113, 221, 55, 0.15);
}

.connection-disconnect-btn {
  padding: 7px 16px;
  border: 1px solid var(--color-border, rgba(0,0,0,0.1));
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs, 12px);
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.15s ease;
}

.connection-disconnect-btn:hover {
  border-color: #ff3e1d;
  color: #ff3e1d;
  background: rgba(255, 62, 29, 0.04);
}

.connection-connect-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: #3b4857;
  color: #fff;
  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 38px;
}

.connection-connect-btn:hover {
  background: #2f3d4a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Dark mode connection items */
[data-theme="dark"] .connection-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .connection-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .connection-connect-btn {
  background: #e2e8f0;
  color: #1c1b18;
}
[data-theme="dark"] .connection-connect-btn:hover {
  background: #f1f5f9;
}


/* ════════════════════════════════════════════════════════
   MEMORY TAB — AI Hukommelse (Voksen only)
   ════════════════════════════════════════════════════════ */

/* Toggle row */
.memory-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--border-color, #e2e8f0);
  margin-top: 12px;
}

.memory-toggle-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary, #1e293b);
}

.memory-toggle-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.memory-toggle-status {
  font-size: 13px;
  font-weight: 500;
}

.memory-status-on {
  color: #22c55e;
}

.memory-status-off {
  color: var(--text-secondary, #64748b);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 24px;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-switch input:checked + .toggle-slider {
  background: #22c55e;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Memory list header */
.memory-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.memory-actions {
  display: flex;
  gap: 8px;
}

/* Memory list */
.memory-list {
  margin-top: 16px;
}

/* Category group */
.memory-category-group {
  margin-bottom: 20px;
}

.memory-category-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.memory-cat-icon {
  font-size: 16px;
  line-height: 1;
}

.memory-cat-count {
  font-weight: 400;
  color: var(--text-secondary, #64748b);
  font-size: 13px;
}

/* Memory item */
.memory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  transition: border-color 0.15s;
}

.memory-item:hover {
  border-color: var(--text-secondary, #94a3b8);
}

.memory-item-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary, #1e293b);
  min-width: 0;
  word-break: break-word;
}

.memory-item-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  color: var(--text-secondary, #94a3b8);
  transition: color 0.15s, background 0.15s;
}

.memory-item-delete:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* Empty state */
.memory-empty-state {
  text-align: center;
  padding: 40px 20px;
}

.memory-empty-icon {
  display: flex;
  justify-content: center;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 12px;
}

.memory-empty-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin-bottom: 4px;
}

.memory-empty-sub {
  font-size: 14px;
  color: var(--text-secondary, #64748b);
}

/* Disabled message */
.memory-disabled-msg {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary, #64748b);
  background: var(--surface-alt, #f8fafc);
  border-radius: 10px;
  border: 1px solid var(--border-color, #e2e8f0);
}


/* ── Memory tab: Dark mode ────────────────────────── */

[data-theme="dark"] .memory-toggle-label {
  color: #e2e8f0;
}

[data-theme="dark"] .toggle-slider {
  background: #475569;
}

[data-theme="dark"] .toggle-slider::before {
  background: #e2e8f0;
}

[data-theme="dark"] .memory-category-header {
  color: #e2e8f0;
}

[data-theme="dark"] .memory-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .memory-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .memory-item-content {
  color: #e2e8f0;
}

[data-theme="dark"] .memory-item-delete {
  color: #94a3b8;
}

[data-theme="dark"] .memory-item-delete:hover {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
}

[data-theme="dark"] .memory-empty-text {
  color: #e2e8f0;
}

[data-theme="dark"] .memory-empty-sub {
  color: #94a3b8;
}

[data-theme="dark"] .memory-empty-icon {
  display: flex;
  justify-content: center;
  color: #64748b;
}

[data-theme="dark"] .memory-disabled-msg {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}


/* ── Memory tab: Mobile ───────────────────────────── */

@media (max-width: 767px) {
  .memory-list-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .memory-actions {
    width: 100%;
  }

  .memory-actions .btn {
    flex: 1;
  }

  .memory-item {
    padding: 10px 12px;
  }
}