/**
 * Darkframe Hub — auth.css
 *
 * Minimal, functional styles for the [dfh_login] shortcode.
 * These are intentionally unopinionated so Mosaic / the active theme can
 * override them freely. CSS custom properties make theming straightforward.
 */

.dfh-login-wrap {
  --dfh-color-primary:       #e95d6b;
  --dfh-color-primary-hover: #d44555;
  --dfh-color-text:          #1a1a1a;
  --dfh-color-muted:         #6b7280;
  --dfh-color-border:        #e5e7eb;
  --dfh-color-bg:            #ffffff;
  --dfh-color-success-bg:    #f0fdf4;
  --dfh-color-success-text:  #166534;
  --dfh-color-error-bg:      #fef2f2;
  --dfh-color-error-text:    #991b1b;
  --dfh-radius:              6px;
  --dfh-font-size:           15px;

  max-width: 420px;
  margin: 0 auto;
  font-size: var(--dfh-font-size);
  color: var(--dfh-color-text);
}

/* ── Notices ──────────────────────────────────────────────────────────────── */

.dfh-notice {
  padding: 12px 16px;
  border-radius: var(--dfh-radius);
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.dfh-notice--success {
  background: var(--dfh-color-success-bg);
  color:      var(--dfh-color-success-text);
}

.dfh-notice--error {
  background: var(--dfh-color-error-bg);
  color:      var(--dfh-color-error-text);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.dfh-tabs {
  display: flex;
  border-bottom: 2px solid var(--dfh-color-border);
  margin-bottom: 28px;
  gap: 4px;
}

.dfh-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px 16px;
  font-size: var(--dfh-font-size);
  font-weight: 500;
  color: var(--dfh-color-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

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

.dfh-tab--active {
  color: var(--dfh-color-primary);
  border-bottom-color: var(--dfh-color-primary);
}

/* ── Panels ───────────────────────────────────────────────────────────────── */

.dfh-panel {
  display: none;
}

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

/* ── Form fields ──────────────────────────────────────────────────────────── */

.dfh-field {
  margin-bottom: 18px;
}

.dfh-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--dfh-color-text);
}

.dfh-field input[type="email"],
.dfh-field input[type="password"],
.dfh-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--dfh-color-border);
  border-radius: var(--dfh-radius);
  font-size: var(--dfh-font-size);
  color: var(--dfh-color-text);
  background: var(--dfh-color-bg);
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.dfh-field input:focus {
  outline: none;
  border-color: var(--dfh-color-primary);
  box-shadow: 0 0 0 3px rgba(233, 93, 107, 0.15);
}

.dfh-field-hint {
  display: block;
  font-size: 12px;
  color: var(--dfh-color-muted);
  margin-top: 5px;
}

.dfh-field--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dfh-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.dfh-field-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.dfh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: var(--dfh-radius);
  font-size: var(--dfh-font-size);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.dfh-btn--primary {
  background: var(--dfh-color-primary);
  color: #ffffff;
  width: 100%;
  margin-top: 8px;
}

.dfh-btn--primary:hover:not(:disabled) {
  background: var(--dfh-color-primary-hover);
}

.dfh-btn--primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.dfh-btn--ghost {
  background: transparent;
  color: var(--dfh-color-muted);
  border-color: var(--dfh-color-border);
}

.dfh-btn--ghost:hover {
  background: var(--dfh-color-border);
}

.dfh-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  color: var(--dfh-color-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dfh-link-btn:hover {
  color: var(--dfh-color-primary-hover);
}

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.dfh-form-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
}

.dfh-subheading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.dfh-form-hint {
  font-size: 14px;
  color: var(--dfh-color-muted);
  margin: 0 0 16px;
}

.dfh-divider {
  border: none;
  border-top: 1px solid var(--dfh-color-border);
  margin: 24px 0;
}

.dfh-already-logged-in {
  text-align: center;
  padding: 24px;
}

.dfh-form-section .dfh-btn--primary {
  margin-top: 16px;
}