/* ============================================================
   auth.css — Auth screens for Family Finance Tracker
   Matches existing design language:
     Primary:   #218089  (--color-teal-500)
     Secondary: #5E5240  (--color-brown-600)
     BG light:  #FCFCF9  (--color-cream-50)
   Mobile-first, dark-mode aware.
   ============================================================ */

/* ----------------------------------------------------------
   Header auth status slot
   ---------------------------------------------------------- */
.header__auth-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Auth screen wrapper
   ---------------------------------------------------------- */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-background, #fcfcf9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  transition: opacity 0.2s ease;
}

.auth-screen--hidden {
  display: none;
}

/* ----------------------------------------------------------
   Container
   ---------------------------------------------------------- */
.auth-container {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ----------------------------------------------------------
   Logo / header
   ---------------------------------------------------------- */
.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary, #218089);
  margin-bottom: 4px;
}

.auth-logo i {
  font-size: 22px;
}

/* ----------------------------------------------------------
   Heading & subheading
   ---------------------------------------------------------- */
.auth-heading {
  font-size: 22px;
  font-weight: 650;
  color: var(--color-text, #13343b);
  margin: 0 0 4px;
  line-height: 1.25;
}

.auth-subheading {
  font-size: 14px;
  color: var(--color-text-secondary, #626c71);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* ----------------------------------------------------------
   Mode selector cards
   ---------------------------------------------------------- */
.auth-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  background: var(--color-surface, #fffffe);
  border: 1.5px solid var(--color-card-border, rgba(94,82,64,0.12));
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  font-family: inherit;
}

.auth-mode-card:hover {
  border-color: var(--color-primary, #218089);
  box-shadow: 0 0 0 3px rgba(33,128,141,0.12);
}

.auth-mode-card:focus-visible {
  outline: 2px solid var(--color-primary, #218089);
  outline-offset: 2px;
}

.auth-mode-card__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(33,128,141,0.1);
  color: var(--color-primary, #218089);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.auth-mode-card__icon--secondary {
  background: rgba(94,82,64,0.1);
  color: var(--color-brown-600, #5e5240);
}

.auth-mode-card--secondary {
  border-style: dashed;
}

.auth-mode-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.auth-mode-card__body strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #13343b);
}

.auth-mode-card__body span {
  font-size: 12px;
  color: var(--color-text-secondary, #626c71);
}

.auth-mode-card__arrow {
  color: var(--color-text-secondary, #626c71);
  font-size: 12px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Form panels (login / signup)
   ---------------------------------------------------------- */
.auth-form-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form-panel--hidden {
  display: none;
}

/* ----------------------------------------------------------
   Back button
   ---------------------------------------------------------- */
.auth-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-secondary, #626c71);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  width: fit-content;
  transition: color 0.15s;
}

.auth-back-btn:hover {
  color: var(--color-primary, #218089);
}

/* ----------------------------------------------------------
   Google sign-in button
   ---------------------------------------------------------- */
.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: var(--color-surface, #fffffe);
  border: 1.5px solid var(--color-border, rgba(94,82,64,0.2));
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text, #13343b);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-google-btn:hover {
  border-color: var(--color-primary, #218089);
  box-shadow: 0 0 0 3px rgba(33,128,141,0.10);
}

.auth-google-btn:focus-visible {
  outline: 2px solid var(--color-primary, #218089);
  outline-offset: 2px;
}

.auth-google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Divider
   ---------------------------------------------------------- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-secondary, #626c71);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border, rgba(94,82,64,0.15));
}

/* ----------------------------------------------------------
   Form fields
   ---------------------------------------------------------- */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #13343b);
}

.auth-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-surface, #fffffe);
  border: 1.5px solid var(--color-border, rgba(94,82,64,0.2));
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text, #13343b);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.auth-input::placeholder {
  color: var(--color-text-secondary, #626c71);
  opacity: 0.7;
}

.auth-input:focus {
  border-color: var(--color-primary, #218089);
  box-shadow: 0 0 0 3px rgba(33,128,141,0.15);
}

.auth-input:invalid:not(:placeholder-shown) {
  border-color: var(--color-error, #c0152f);
}

/* ----------------------------------------------------------
   Error / success messages
   ---------------------------------------------------------- */
.auth-error {
  display: none;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.auth-error--visible {
  display: block;
  background: rgba(192,21,47,0.08);
  border-color: rgba(192,21,47,0.25);
  color: var(--color-error, #c0152f);
}

.auth-error--success {
  background: rgba(33,128,141,0.08);
  border-color: rgba(33,128,141,0.25);
  color: var(--color-primary, #218089);
}

/* ----------------------------------------------------------
   Submit button
   ---------------------------------------------------------- */
.auth-submit-btn {
  width: 100%;
  padding: 11px 16px;
  background: var(--color-primary, #218089);
  color: var(--color-cream-50, #fcfcf9);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.auth-submit-btn:hover {
  background: var(--color-primary-hover, #1d7480);
}

.auth-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-submit-btn:focus-visible {
  outline: 2px solid var(--color-primary, #218089);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   Switch text (login ↔ signup)
   ---------------------------------------------------------- */
.auth-switch-text {
  font-size: 13px;
  color: var(--color-text-secondary, #626c71);
  text-align: center;
  margin: 0;
}

.auth-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--color-primary, #218089);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}

.auth-link-btn:hover {
  text-decoration-color: currentColor;
}

/* ----------------------------------------------------------
   Auth status bar (in header)
   ---------------------------------------------------------- */
.auth-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-status__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary, #218089);
  flex-shrink: 0;
}

.auth-status__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #13343b);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   Migration modal
   ---------------------------------------------------------- */
.auth-migration-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-migration-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.auth-migration-modal__content {
  position: relative;
  background: var(--color-surface, #fffffe);
  border-radius: 12px;
  padding: 28px 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.auth-migration-modal__title {
  font-size: 18px;
  font-weight: 650;
  color: var(--color-text, #13343b);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-migration-modal__title i {
  color: var(--color-primary, #218089);
}

.auth-migration-modal__body {
  font-size: 14px;
  color: var(--color-text-secondary, #626c71);
  margin: 0 0 20px;
  line-height: 1.6;
}

.auth-migration-modal__actions {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

@media (min-width: 380px) {
  .auth-migration-modal__actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* ----------------------------------------------------------
   Dark mode overrides
   ---------------------------------------------------------- */
[data-theme="dark"] .auth-screen,
.dark .auth-screen {
  background: var(--color-background);
}

[data-theme="dark"] .auth-mode-card,
.dark .auth-mode-card {
  background: var(--color-surface);
}

[data-theme="dark"] .auth-google-btn,
.dark .auth-google-btn {
  background: var(--color-surface);
  color: var(--color-text);
}

[data-theme="dark"] .auth-input,
.dark .auth-input {
  background: var(--color-surface);
  color: var(--color-text);
}

[data-theme="dark"] .auth-migration-modal__content,
.dark .auth-migration-modal__content {
  background: var(--color-surface);
}

/* ----------------------------------------------------------
   Responsive — very small screens
   ---------------------------------------------------------- */
@media (max-width: 360px) {
  .auth-container {
    gap: 16px;
  }

  .auth-heading {
    font-size: 20px;
  }

  .auth-mode-card {
    padding: 12px;
  }

  .auth-mode-card__icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-screen,
  .auth-mode-card,
  .auth-google-btn,
  .auth-input,
  .auth-submit-btn {
    transition: none;
  }
}

/* ===========================================================
   Offline Queue Badge
   Small pill that appears near the auth-status area when
   there are pending writes in the offline queue.
   =========================================================== */
.offline-queue-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--color-warning, #d97706);
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  flex-shrink: 0;
}

.offline-queue-badge i {
  font-size: 11px;
}

/* ===========================================================
   Family Settings Tab Panel
   =========================================================== */

.family-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
  padding: 4px 0 32px;
}

.family-settings__section .card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.family-settings__section .card__header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.family-settings__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Family name display row */
.family-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.family-name-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text, #13343b);
}

.family-name-edit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.family-name-edit .form-control {
  flex: 1;
  min-width: 180px;
}

.family-name-edit__actions {
  display: flex;
  gap: 8px;
}

/* Invite form */
.family-invite-form {
  background: var(--color-background, #fcfcf9);
  border: 1px solid var(--color-card-border, rgba(94,82,64,0.12));
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.family-invite-form__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #13343b);
  margin: 0 0 16px;
}

.family-invite-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 540px) {
  .family-invite-form__fields {
    grid-template-columns: 1fr;
  }
}

.family-invite-form__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.family-invite-error {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(192,21,47,0.08);
  border: 1px solid rgba(192,21,47,0.25);
  color: var(--color-error, #c0152f);
  font-size: 13px;
}

/* Role badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge--role {
  background: rgba(33,128,141,0.1);
  color: var(--color-primary, #218089);
}

.badge--success {
  background: rgba(16,185,129,0.1);
  color: #059669;
}

.badge--warning {
  background: rgba(217,119,6,0.1);
  color: #d97706;
}

/* Extra-small button variant */
.btn--xs {
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.4;
}

/* Danger zone (leave family) */
.family-danger-zone {
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(192,21,47,0.2);
  background: rgba(192,21,47,0.04);
}

.family-danger-zone__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-error, #c0152f);
  margin: 0 0 6px;
}

.family-danger-zone__text {
  font-size: 13px;
  color: var(--color-text-secondary, #626c71);
  margin: 0 0 12px;
}

/* Sync status */
.sync-status-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.sync-status-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sync-status-label {
  font-size: 12px;
  color: var(--color-text-secondary, #626c71);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sync-status-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text, #13343b);
}

.text-success { color: #059669; }
.text-error   { color: var(--color-error, #c0152f); }
.text-muted   { color: var(--color-text-secondary, #626c71); font-size: 12px; }

/* Table empty state */
.table-empty {
  text-align: center;
  color: var(--color-text-secondary, #626c71);
  font-size: 14px;
  padding: 24px;
}

/* Dark mode family settings */
[data-theme="dark"] .family-invite-form,
.dark .family-invite-form {
  background: var(--color-card-bg, #1e2a2c);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .family-danger-zone,
.dark .family-danger-zone {
  background: rgba(192,21,47,0.06);
  border-color: rgba(192,21,47,0.25);
}