/**
 * me.css — Styles specific to the account/me (profile) page.
 * Requires: vars.css, Bootstrap, auth.css
 */

    .page-body { max-width: 800px; margin: 0 auto; padding: 24px 20px 64px; }
    .page-title { font-size: 22px; font-weight: 700; color: #1e3a5f; margin-bottom: 4px; }
    .page-subtitle { font-size: 13px; color: #6b7280; margin-bottom: 32px; }

    .info-card {
      background: #fff; border: 1.5px solid #e8edf5;
      border-radius: 16px; padding: 28px 28px 24px; margin-bottom: 20px;
    }
    .info-card h6 {
      font-size: 14px; font-weight: 700; color: #1e3a5f;
      display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
    }
    .info-card h6 .bi { font-size: 16px; color: #1a56db; }

    /* ── Read-only field rows ─────────────────────────────────────────────── */
    .field-row {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 0; border-bottom: 1px solid #f1f5f9;
    }
    .field-row:last-child { border-bottom: none; padding-bottom: 0; }
    .field-label { width: 90px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: #9ca3af; }
    .field-value { flex: 1; font-size: 14px; color: #1e3a5f; font-weight: 500; }
    .field-value.muted { color: #9ca3af; font-style: italic; }
    .badge-uuid { font-size: 11px; font-family: monospace; color: #6b7280; background: #f1f5f9; padding: 3px 8px; border-radius: 6px; }

    /* ── Editable email row ───────────────────────────────────────────────── */
    .email-row {
      display: flex; align-items: center; gap: 12px;
      padding: 8px 0; border-bottom: 1px solid #f1f5f9;
    }
    .email-row .field-label { width: 90px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: #9ca3af; }
    .email-row .email-view  { flex: 1; display: flex; align-items: center; gap: 8px;flex-wrap: wrap; }
    .email-row .email-edit  { flex-wrap: wrap;flex: 1; display: none; align-items: center; gap: 8px; }

    .email-text { font-size: 14px; color: #1e3a5f; font-weight: 500; }
    .email-text.muted { color: #9ca3af; font-style: italic; }

    .btn-edit-email {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 12px; font-weight: 600; color: #1a56db;
      background: #eff6ff; border: none; border-radius: 6px;
      padding: 3px 10px; cursor: pointer; transition: background .15s; flex-shrink: 0;
    }
    .btn-edit-email:hover { background: #dbeafe; }

    .email-input-wrap { position: relative; flex-grow: 1;width: 100%; }
    .email-input-wrap .bi {
      position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
      color: #9ca3af; font-size: 14px; pointer-events: none;
    }
    .email-input-wrap input {
      width: 100%; padding: 6px 10px 6px 32px;
      border-radius: 8px; border: 1.5px solid #dde4ef;
      font-size: 13px; height: 36px;
      transition: border-color .2s, box-shadow .2s;
    }
    .email-input-wrap input:focus {
      border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.12); outline: none;
    }
    .email-input-wrap input.is-invalid { border-color: #ef4444; }

    .btn-email-save {
      display: inline-flex; align-items: center; gap: 4px;
      height: 36px; padding: 0 14px; border: none; border-radius: 8px;
      background: linear-gradient(135deg, #1a56db 0%, #0ea5e9 100%);
      color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
      flex-shrink: 0; transition: opacity .15s;
    }
    .btn-email-save:hover { opacity: .88; }
    .btn-email-save:disabled { opacity: .5; }
    .btn-email-cancel {
      display: inline-flex; align-items: center;
      height: 36px; padding: 0 12px; border: 1.5px solid #e2e8f0; border-radius: 8px;
      background: #fff; color: #6b7280; font-size: 13px; font-weight: 600;
      cursor: pointer; flex-shrink: 0; transition: background .15s;
    }
    .btn-email-cancel:hover { background: #f8fafc; }

    /* ── Password form ────────────────────────────────────────────────────── */

    .btn-save { background: linear-gradient(135deg, #1a56db 0%, #0ea5e9 100%); border: none; color: #fff; font-weight: 600; font-size: 14px; height: 42px; border-radius: 10px; padding: 0 24px; transition: opacity .18s, transform .12s; }
    .btn-save:hover { opacity: .9; transform: translateY(-1px); }
    .btn-save:disabled { opacity: .55; transform: none; }