/*
 * admin/settings/css/profile.css: «Mitt Konto & Profil» (admin/settings/profile.html), round 47, panel redesign R14.
 * The page's inline <style> moved here, on the page pattern (page.css): the figures, the three views as capsule tabs, the form,
 * the two-step verification and its switch, the sessions and the role. Bigger, calmer type (owner, note 86: «لو كانت النصوص
 * اكبر»): body and table text 15 px and up, labels 13 px and up, the figures far larger than their labels. Every colour is a
 * variable of tokens.css or page.css (the old indigo is gone), so light and dark both follow the theme. Scoped to .pf-page,
 * the page's #pageContent. The shell sets a floor for every page (main p, buttons and fields 15 px, cells, labels and code 14 px,
 * with !important): a size above it here says !important too.
 */
.pf-page [hidden], #twofaCard [hidden], #sessionsCard [hidden] { display: none !important; }

/* ---- the header ---- */
.pf-page .pg-sub { line-height: 1.5; }
.pf-page .pg-head .pg-btn { min-height: 42px; padding: 9px 20px; font-size: 15px; }
.pf-page .pg-more-menu > button { font-size: 15px; padding: 10px 14px; }

/* ---- the figures: each a way into its view ---- */
.pf-page .pg-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-block-end: 22px; }
.pf-page .pg-kpi { container-type: inline-size; gap: 6px; padding: 20px 22px 18px; }
.pf-page .pg-kpi-label { font-size: 14px; }
.pf-page .pg-kpi-value { font-size: 32px; font-size: clamp(24px, 12cqi, 36px); line-height: 1.1; margin-block: 6px 2px; overflow-wrap: anywhere; }
.pf-page .pg-kpi-sub { font-size: 15px; }
.pf-page button.pg-kpi:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 2px; }

/* ---- Profil, Säkerhet, Min roll as capsule tabs ---- */
.pf-tabs { border-radius: var(--radius-full); padding: 5px; gap: 4px; margin-block-end: 20px; }
.pf-tabs .pg-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 22px; border-radius: var(--radius-full); font-size: 15px; }
.pf-tabs .pg-tab:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 2px; }

/* ---- cards and notes ---- */
.pf-page .pg-card-title { font-size: 18px; }
.pf-page .pg-card-sub { font-size: 15px; line-height: 1.5; }
.pf-page .pg-note { font-size: 15px; }
.pf-page .setting-line, .pf-page .setting-default { font-size: 15px; line-height: 1.5; }
.pf-page .pg-chip { font-size: 14px; }
.pg-card-body > h3, .pf-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-muted); margin: 0 0 10px; }
html[dir="rtl"] .pf-h, html[dir="rtl"] .pg-card-body > h3 { letter-spacing: 0; }

/* ---- the form ---- */
.pf-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pf-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.pf-page .form-group { margin-block-end: 16px; min-width: 0; }
.form-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pg-muted); margin-block-end: 6px; }
html[dir="rtl"] .form-label { letter-spacing: 0; }
.pf-page .form-control {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--pg-line-hi);
  background: var(--pg-field); color: var(--pg-text); font: inherit; font-size: 16px !important; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pf-page .form-control:focus { outline: none; border-color: var(--pg-accent); box-shadow: 0 0 0 3px var(--primary-glow); }
.pf-page .form-control[readonly] { opacity: .75; }
.pf-page textarea.form-control { min-height: 96px; resize: vertical; line-height: 1.5; }
.form-group .setting-line { margin-block-start: 6px; }

/* the picture: the initials or one of the marks (a mark is the saved value itself) */
.avatar-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 18px; }
.preset-avatar-btn {
  width: 52px; height: 52px; border-radius: var(--radius-full); border: 2px solid var(--pg-line); background: var(--pg-inner); color: var(--pg-text);
  font: inherit; font-size: 20px !important; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .18s var(--ease-spring), border-color .15s ease, box-shadow .15s ease;
}
.preset-avatar-btn:hover { border-color: var(--glass-border-hi); transform: translateY(-1px); }
.preset-avatar-btn:active { transform: scale(.96); }
.preset-avatar-btn[aria-pressed="true"] { border-color: var(--pg-accent); box-shadow: 0 0 0 3px var(--primary-glow); }
.preset-avatar-btn:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 2px; }
.pf-save { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-start: 4px; }
.pf-save > .pg-btn, .twofa-actions > .pg-btn { min-height: 44px; padding: 10px 22px; font-size: 15px; }

/* ---- two-step verification: the state and its switch (it shows what the server says, profile.js) ---- */
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--pg-inner); border: 1px solid var(--pg-line); }
.toggle-info { min-width: 0; }
.toggle-info h4 { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--pg-text); }
.toggle-info p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--pg-muted); overflow-wrap: anywhere; }
.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--pg-line-hi); border-radius: var(--radius-full); transition: background-color .25s ease; }
.slider:before {
  position: absolute; content: ""; width: 27px; height: 27px; inset-inline-start: 2px; bottom: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .22); transition: transform .25s var(--ease-spring);
}
input:checked + .slider { background: var(--accent); }
input:checked + .slider:before { transform: translateX(20px); }
[dir="rtl"] input:checked + .slider:before { transform: translateX(-20px); }
input:focus-visible + .slider { outline: 2px solid var(--pg-accent); outline-offset: 2px; }
input:disabled + .slider { opacity: .5; cursor: not-allowed; }
.twofa-intro { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--pg-inner); border: 1px solid var(--glass-border-hi); color: var(--pg-text); font-size: 15px; font-weight: 600; line-height: 1.5; }
.twofa-msg { margin: 10px 0 0; color: var(--red); font-size: 15px; font-weight: 600; }
.twofa-msg:empty { display: none; }
.twofa-panel { margin-block-start: 14px; padding: 18px; border-radius: var(--radius-lg); background: var(--pg-inner); border: 1px solid var(--pg-line); }
.twofa-steps { margin: 0 0 16px; padding-inline-start: 22px; color: var(--pg-text); font-size: 15px; line-height: 1.6; }
.twofa-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-end: 12px; }
.twofa-key { font-family: var(--font-mono); font-size: 17px !important; font-weight: 700; letter-spacing: 1px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--pg-field); border: 1px solid var(--glass-border-hi); color: var(--pg-text); word-break: break-all; }
.twofa-link { display: inline-block; margin-block-end: 14px; color: var(--primary); font-size: 15px; font-weight: 700; }
.twofa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 12px; }

/* ---- where one is signed in (GET /api/admin/sessions): built with classes only, its states are rows ---- */
.table-responsive { overflow-x: auto; }
.profile-table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: start; font-variant-numeric: tabular-nums; }
.profile-table th { padding: 10px 14px; border-block-end: 1px solid var(--pg-line); color: var(--pg-muted); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .05em; text-align: start; white-space: nowrap; }
html[dir="rtl"] .profile-table th { letter-spacing: 0; }
.profile-table td { padding: 14px; border-block-end: 1px solid var(--pg-line); color: var(--pg-text); font-size: 15px !important; vertical-align: middle; }
.profile-table tbody tr:last-child td { border-block-end: 0; }
.profile-table td[data-bind="created"], .profile-table td[data-bind="expires"] { white-space: nowrap; }
.sessions-note { margin: 0 0 12px; color: var(--pg-muted); font-size: 15px; font-weight: 600; }
.sessions-note:empty { display: none; }
.sessions-state { text-align: center; color: var(--pg-muted); padding: 28px; font-size: 16px !important; }
#sessionsTbody [data-state="error"] .sessions-state { color: var(--red); }
.sessions-state .pg-btn { margin-inline-start: 8px; }
.session-ip { color: var(--primary); font-family: var(--font-mono); font-size: 15px !important; }
.session-end { white-space: nowrap; }
.session-end[data-armed] { background: rgba(239, 68, 68, 0.22); }

/* ---- my role (GET /api/admin/me/scope and the menu it opens) ---- */
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 12px; }
.pf-line { font-size: 15px; color: var(--pg-muted); line-height: 1.55; margin: 0 0 12px; }
.pf-line a { color: var(--primary); font-weight: 600; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-block-end: 12px; }
.pf-box { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--pg-inner); border: 1px solid var(--pg-line); min-width: 0; }
.pf-box h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-muted); margin: 0 0 8px; }
html[dir="rtl"] .pf-box h3 { letter-spacing: 0; }
.pf-k { display: block; margin-block-start: 10px; font-size: 13px; font-weight: 700; color: var(--pg-muted); }
.pf-box ul { margin: 0; padding-inline-start: 18px; }
.pf-box li { font-size: 15px; line-height: 1.55; color: var(--pg-text); }

/* ---- wider screens: roomier cards ---- */
@media (min-width: 641px) {
  .pf-page .pg-card-head { padding: 18px 24px; }
  .pf-page .pg-card-body { padding: 20px 24px; }
}
@media (max-width: 860px) { .pf-grid2, .pf-grid3 { grid-template-columns: 1fr; } }
/* a phone: the tabs fill the width; each session is a block of its own, the device and its badge or end button on top, then
   each value with its name */
@media (max-width: 640px) {
  .pf-tabs { display: flex; width: 100%; }
  .pf-tabs .pg-tab { flex: 1 1 0; padding-inline: 12px; min-height: 44px; }
  .pf-page .pg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pf-page .pg-kpi { padding: 16px 14px 14px; }
  .pf-page .pg-kpi-value { font-size: 26px; font-size: clamp(22px, 14cqi, 30px); }
  #sessionsCard .profile-table thead { display: none; }
  #sessionsCard .profile-table, #sessionsCard .profile-table tbody { display: block; min-width: 0; }
  #sessionsCard .profile-table tr[data-item] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; border-block-end: 1px solid var(--pg-line); }
  #sessionsCard .profile-table tr[data-item] td, #sessionsCard .profile-table tr[data-item]:hover td { display: block; grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; white-space: normal; padding: 2px 0 !important; border-block-end: 0 !important; background: transparent !important; }
  #sessionsCard .profile-table tr[data-item] td[data-bind="device"] { grid-column: 1; grid-row: 1; align-self: center; }
  #sessionsCard .profile-table tr[data-item] td[data-part="status"] { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  #sessionsCard .profile-table td[data-label]::before { content: attr(data-label) ": "; color: var(--pg-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
  #sessionsCard .profile-table tr[data-state], #sessionsCard .profile-table tr[data-state] td { display: block; }
  .pf-save > .pg-btn, .twofa-actions > .pg-btn { flex: 1 1 auto; }
  .toggle-row { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .slider, .slider:before, .preset-avatar-btn { transition: none; }
  .preset-avatar-btn:hover, .preset-avatar-btn:active { transform: none; }
}