/* ==========================================================================
   AGENT SETTINGS  (#tab-agentsettings)
   --------------------------------------------------------------------------
   Every rule is scoped under `.agset`, the same containment approach as
   dashboard.css / `.nvx`: nothing here can reach the admin panel, the login
   form, or any other tab. The page reuses the CRM's existing handlers
   (uploadAgentSelfProfileImage, pushSettings*, submitAgentPasswordChange) and
   the shared `.force-pwd-eye` component, so this file is presentation only.

   Layout: identity on the left (who you are — read-only, admin-managed),
   actions on the right (what you can actually change).
   ========================================================================== */

.agset {
  --ag-ink:      #111216;
  --ag-ink-2:    #1f3a5f;
  --ag-dim:      #5b6675;
  --ag-faint:    #8b93a1;
  --ag-line:     #e9edf3;
  --ag-shell:    #f4f6fa;
  --ag-card:     #fff;
  --ag-accent:   #3170e8;
  --ag-accent-d: #2563eb;
  --ag-good:     #1c6b40;
  --ag-good-bg:  #e6f4ec;
  --ag-warn:     #8a5a00;
  --ag-warn-bg:  #fdf3e2;
  --ag-danger:   #b4232a;
  --ag-danger-bg:#fdecec;

  max-width: 1120px;
  /* inherit, not a named family: admin.css sets body.crm-app font-family with
     !important, so a variable here would be overridden and the page would
     silently drift off the CRM's font. */
  font-family: inherit;
  color: var(--ag-ink);
}

.agset *,
.agset *::before,
.agset *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- layout */
.agset-grid {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.agset-right { display: grid; gap: 16px; }

.agset-card {
  background: var(--ag-card);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(17, 18, 22, .05), 0 8px 24px -18px rgba(17, 18, 22, .30);
}

.agset-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .75px;
  text-transform: uppercase;
  color: var(--ag-faint);
  margin: 0;
}
.agset-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 3px 0 0;
  letter-spacing: -.2px;
  color: var(--ag-ink);
}
.agset-hint {
  font-size: 12.5px;
  color: var(--ag-dim);
  line-height: 1.6;
  margin: 10px 0 0;
}
.agset-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.agset-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* -------------------------------------------------------------- identity */
.agset-id { text-align: center; padding: 26px 22px 20px; }

.agset-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 13px;
  background: var(--ag-shell) center / cover no-repeat;
  border: 1px solid var(--ag-line);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--ag-faint);
  overflow: hidden;
}
.agset-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.agset-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin: 0;
  color: var(--ag-ink);
}
.agset-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--ag-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}
.agset-role svg { width: 12px; height: 12px; }

.agset-mail {
  font-size: 12.5px;
  color: var(--ag-dim);
  margin: 13px 0 0;
  word-break: break-all;
}
.agset-managed {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--ag-line);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ag-faint);
}
.agset-upload-status { font-size: 11.5px; color: var(--ag-dim); margin-top: 8px; }

/* --------------------------------------------------------------- buttons */
.agset-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* blue = safe and repeatable */
.agset-btn-blue { background: var(--ag-accent); color: #fff; }
.agset-btn-blue:hover { background: var(--ag-accent-d); }
/* black = the committing action */
.agset-btn-dark { background: var(--ag-ink); color: #fff; }
.agset-btn-dark:hover { background: #2a2c34; }
/* destructive but quiet: a solid red block shouted louder than switching off
   notifications on one device warrants. Tinted ground keeps it identifiable
   without letting it dominate the card. */
.agset-btn-softred { background: var(--ag-danger-bg); color: var(--ag-danger); }
.agset-btn-softred:hover { background: #fadada; }
.agset-btn-quiet { background: #fff; border-color: #d9e0ea; color: var(--ag-ink-2); }
.agset-btn-quiet:hover { background: var(--ag-shell); border-color: #c8d2e0; }
.agset-btn:disabled { opacity: .5; cursor: default; }
.agset-btn:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; }

/* ------------------------------------------------------------ state pill */
.agset-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--ag-warn-bg);
  color: var(--ag-warn);
}
.agset-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.agset-pill.is-on { background: var(--ag-good-bg); color: var(--ag-good); }

/* ---------------------------------------------------------------- fields */
.agset-field { display: block; margin-bottom: 12px; }
.agset-field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ag-ink-2);
  margin-bottom: 5px;
}
/* The eye button is the CRM's shared .force-pwd-eye, kept as-is so the login
   form's component is untouched; only its position inside this card is set. */
.agset .force-pwd-input-wrap { position: relative; }
.agset .force-pwd-input-wrap .force-pwd-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.agset-input {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 10px 40px 10px 13px;
  border: 1px solid #d9e0ea;
  border-radius: 9px;
  background: #fff;
  color: var(--ag-ink);
}
.agset-input:focus {
  outline: none;
  border-color: var(--ag-accent);
  box-shadow: 0 0 0 3px rgba(49, 112, 232, .14);
}

/* --------------------------------------------- password requirement list
   The four rules mirror forcePwdRules() in admin.js — the real server
   requirement, shown as it is met rather than as a strength guess. */
.agset-reqs {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.agset-reqs li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ag-faint);
  transition: color .18s ease;
}
.agset-reqs li svg { width: 13px; height: 13px; flex: 0 0 13px; }
.agset-reqs li .agset-req-no { display: block; }
.agset-reqs li .agset-req-yes { display: none; }
.agset-reqs li.is-ok { color: var(--ag-good); }
.agset-reqs li.is-ok .agset-req-no { display: none; }
.agset-reqs li.is-ok .agset-req-yes { display: block; }

/* ------------------------------------------------- collapsed / expanded */
.agset-pw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.agset-pw-form {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ag-line);
}
.agset-pw-open .agset-pw-form { display: block; }
.agset-pw-open .agset-pw-top .agset-btn-dark { display: none; }

.agset-err {
  display: none;
  font-size: 12px;
  color: var(--ag-danger);
  background: var(--ag-danger-bg);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0 0 12px;
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 820px) {
  .agset-grid { grid-template-columns: 1fr; }
  .agset-reqs { grid-template-columns: 1fr; }
}
@media (pointer: coarse), (max-width: 720px) {
  /* same thumb-sized targets as the dashboard's mobile pass */
  .agset-btn { min-height: 44px; padding: 12px 20px; }
  .agset-input { min-height: 44px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .agset-pw-top { align-items: flex-start; }
  .agset-pw-top .agset-btn { width: 100%; }
}