/* users.css — Admin › Users page + Create / Manage user dialogs.
   Builds on myhome.css + GVS tokens. Polish layer over the live screens. */

/* ---------- Page header + toolbar ---------------------------------------- */
.us-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.us-head h1 { font-family: var(--gvs-font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--gvs-fg-1); margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.us-head .us-sub { color: var(--gvs-fg-3); font-size: 14px; margin-top: 6px; }
.us-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.us-toolbar .mh-search { width: min(320px, 60vw); }

/* native select dressed as a GVS control */
.us-select { position: relative; display: inline-flex; align-items: center; }
.us-select select {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--gvs-fg-1); background: var(--gvs-surface); border: 1px solid var(--gvs-border-strong);
  border-radius: var(--gvs-radius-md); height: 40px; padding: 0 38px 0 14px; cursor: pointer;
  transition: border-color var(--gvs-dur-fast), box-shadow var(--gvs-dur-fast);
}
.us-select select:hover { border-color: var(--gvs-fg-3); }
.us-select select:focus { outline: none; border-color: var(--gvs-primary); box-shadow: var(--gvs-focus-ring); }
.us-select .material-symbols-rounded { position: absolute; right: 10px; pointer-events: none; font-size: 20px; color: var(--gvs-fg-3); }
.us-select.full { display: flex; }
.us-select.full select { width: 100%; }

.us-create .material-symbols-rounded { font-size: 20px; }

/* ---------- Users table --------------------------------------------------- */
.us-card { background: var(--gvs-surface); border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-lg); box-shadow: var(--gvs-elev-1); overflow: hidden; }
.us-table { width: 100%; border-collapse: collapse; }
.us-table thead th {
  text-align: left; padding: 14px 20px; font-size: var(--gvs-overline-size, 11px); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gvs-fg-3);
  border-bottom: 1px solid var(--gvs-divider); background: var(--gvs-surface-alt); white-space: nowrap;
}
.us-table tbody td { padding: 15px 20px; border-bottom: 1px solid var(--gvs-divider); vertical-align: middle; }
.us-table tbody tr:last-child td { border-bottom: none; }
.us-table tbody tr { transition: background var(--gvs-dur-fast); }
.us-table tbody tr:hover { background: var(--gvs-surface-alt); }
.us-table[data-density="compact"] tbody td { padding: 9px 20px; }
.us-table[data-density="compact"] thead th { padding: 10px 20px; }

.us-name { display: flex; align-items: center; gap: 12px; }
.us-name .mh-avatar { width: 36px; height: 36px; font-size: 13px; background: var(--gvs-secondary); }
.us-name .un-text { min-width: 0; }
.us-name .un-name { font-weight: 600; font-size: 14.5px; color: var(--gvs-fg-1); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.us-name .un-id { font-size: 12px; color: var(--gvs-fg-3); margin-top: 1px; }
.us-admin-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px 3px 7px; border-radius: var(--gvs-radius-pill); background: var(--gvs-navy-900); color: #fff; line-height: 1; }
.us-admin-badge .material-symbols-rounded { font-size: 14px; color: var(--gvs-teal-300); }
[data-theme="dark"] .us-admin-badge { background: var(--gvs-navy-500); }
.us-email { font-size: 14px; color: var(--gvs-fg-2); }
.us-email.mono { font-family: var(--gvs-font-mono); font-size: 13px; }
.us-email.empty { color: var(--gvs-fg-3); }

.us-prodchips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 360px; }
.us-prodchips .us-none { font-size: 13px; color: var(--gvs-fg-3); font-style: italic; }

/* status pill — soft, with dot */
.us-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 4px 11px 4px 9px; border-radius: var(--gvs-radius-pill); }
.us-status .us-sdot { width: 7px; height: 7px; border-radius: 50%; }
.us-status.active { color: var(--gvs-success-700); background: var(--gvs-success-50); }
.us-status.active .us-sdot { background: var(--gvs-success-500); }
.us-status.inactive { color: var(--gvs-fg-3); background: var(--gvs-surface-sunken); }
.us-status.inactive .us-sdot { background: var(--gvs-grey-400); }
[data-theme="dark"] .us-status.active { color: var(--gvs-success-500); }

/* manage action — quiet by default, switchable via Tweaks */
.us-actions { text-align: right; white-space: nowrap; }
.us-manage { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--gvs-radius-sm); font-size: 13.5px; font-weight: 600; transition: background var(--gvs-dur-fast), border-color var(--gvs-dur-fast), color var(--gvs-dur-fast); }
.us-manage .material-symbols-rounded { font-size: 18px; }
/* outline (default) */
.us-root[data-manage="outline"] .us-manage { color: var(--gvs-fg-2); border: 1px solid var(--gvs-border-strong); background: var(--gvs-surface); }
.us-root[data-manage="outline"] .us-manage:hover { border-color: var(--gvs-primary); color: var(--gvs-primary); background: var(--gvs-primary-weak); }
/* ghost */
.us-root[data-manage="ghost"] .us-manage { color: var(--gvs-primary); }
.us-root[data-manage="ghost"] .us-manage:hover { background: var(--gvs-primary-weak); }
/* solid */
.us-root[data-manage="solid"] .us-manage { color: var(--gvs-fg-on-primary); background: var(--gvs-primary); }
.us-root[data-manage="solid"] .us-manage:hover { background: var(--gvs-primary-hover); }

/* pagination */
.us-pager { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--gvs-divider); background: var(--gvs-surface-alt); }
.us-pager .us-rpp { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gvs-fg-3); }
.us-pager .us-range { font-size: 13px; color: var(--gvs-fg-2); font-weight: 600; }
.us-pager .us-pnav { display: flex; gap: 2px; }
.us-pager .us-pnav button { width: 34px; height: 34px; border-radius: var(--gvs-radius-sm); display: grid; place-items: center; color: var(--gvs-fg-2); transition: background var(--gvs-dur-fast); }
.us-pager .us-pnav button:hover:not(:disabled) { background: var(--gvs-surface-sunken); }
.us-pager .us-pnav button:disabled { color: var(--gvs-grey-300); cursor: default; }
.us-pager .us-pnav .material-symbols-rounded { font-size: 20px; }
.us-pager .us-select select { height: 34px; padding: 0 32px 0 12px; font-size: 13px; }

/* empty state */
.us-empty { padding: 56px 20px; text-align: center; color: var(--gvs-fg-3); }
.us-empty .material-symbols-rounded { font-size: 40px; color: var(--gvs-grey-300); }
.us-empty .ue-t { font-size: 15px; font-weight: 600; color: var(--gvs-fg-2); margin-top: 10px; }
.us-empty .ue-s { font-size: 13.5px; margin-top: 4px; }

/* ---------- Dialog sizing + grid ----------------------------------------- */
.us-modal { width: min(620px, 100%); }
.us-modal.wide { width: min(680px, 100%); }
.us-modal .mh-modal-body { max-height: min(80vh, 760px); overflow-y: auto; }
/* Manage dialog: wider + fixed body height so switching tabs never resizes it */
.us-manage-modal { width: min(700px, 100%); }
.us-manage-modal .mh-modal-body { height: min(620px, 78vh); max-height: none; }
.us-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .us-grid2 { grid-template-columns: 1fr; } }

.us-block-label { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--gvs-fg-1); margin: 22px 0 4px; }
.us-block-hint { font-size: 12.5px; color: var(--gvs-fg-3); margin-bottom: 12px; }

/* ---------- Access editor (shared by Create + Manage) -------------------- */
.us-access { border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-md); overflow: hidden; }
.us-access-row { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--gvs-divider); }
.us-access-row:last-child { border-bottom: none; }
.us-access-head { background: var(--gvs-surface-alt); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gvs-fg-3); padding: 10px 14px; }
.us-access-prod { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; color: var(--gvs-fg-1); }
.us-access-prod .mh-app-tile { width: 26px; height: 26px; border-radius: 7px; box-shadow: none; }
.us-access-prod .mh-app-tile .mh-mark { width: 15px; height: 15px; }
.us-access-cell { font-size: 13.5px; color: var(--gvs-fg-2); }
.us-remove { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--gvs-danger-500); padding: 6px 10px; border-radius: var(--gvs-radius-sm); transition: background var(--gvs-dur-fast); justify-self: end; }
.us-remove:hover { background: var(--gvs-danger-50); }

.us-access-empty { padding: 22px 14px; text-align: center; font-size: 13.5px; color: var(--gvs-fg-3); }

/* add-access composer */
.us-addrow { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.us-addrow .af-label { font-size: 12px; font-weight: 600; color: var(--gvs-fg-3); margin-bottom: 5px; display: block; }
.us-add-btn { height: 40px; width: 40px; flex: none; border-radius: var(--gvs-radius-md); background: var(--gvs-primary); color: var(--gvs-fg-on-primary); display: grid; place-items: center; transition: background var(--gvs-dur-fast); }
.us-add-btn:hover:not(:disabled) { background: var(--gvs-primary-hover); }
.us-add-btn:disabled { background: var(--gvs-grey-200); color: var(--gvs-grey-400); cursor: default; }
.us-add-btn .material-symbols-rounded { font-size: 22px; }
@media (max-width: 540px) { .us-addrow { grid-template-columns: 1fr 1fr; } .us-addrow .us-add-btn { width: 100%; } }

/* ---------- Status tab ---------------------------------------------------- */
.us-statline { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--gvs-border); border-radius: var(--gvs-radius-md); }
.us-statline .us-sl-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.us-statline.on .us-sl-icon { background: var(--gvs-success-50); color: var(--gvs-success-500); }
.us-statline.off .us-sl-icon { background: var(--gvs-surface-sunken); color: var(--gvs-fg-3); }
.us-statline .us-sl-body { flex: 1; }
.us-statline .us-sl-t { font-weight: 600; font-size: 14.5px; color: var(--gvs-fg-1); }
.us-statline .us-sl-s { font-size: 13px; color: var(--gvs-fg-3); margin-top: 2px; }

.us-btn-warn { color: var(--gvs-warning-700); border: 1px solid var(--gvs-warning-500); background: var(--gvs-warning-50); height: 40px; padding: 0 16px; border-radius: var(--gvs-radius-sm); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: background var(--gvs-dur-fast); white-space: nowrap; }
.us-btn-warn:hover { background: color-mix(in srgb, var(--gvs-warning-500) 18%, transparent); }
.us-btn-warn.go { color: var(--gvs-success-700); border-color: var(--gvs-success-500); background: var(--gvs-success-50); }
.us-btn-warn .material-symbols-rounded { font-size: 19px; }

.us-section-t { font-size: 15px; font-weight: 700; color: var(--gvs-fg-1); margin: 26px 0 4px; }
.us-section-s { font-size: 13px; color: var(--gvs-fg-3); margin-bottom: 12px; }

/* danger zone */
.us-danger { margin-top: 28px; border: 1px solid color-mix(in srgb, var(--gvs-danger-500) 35%, var(--gvs-border)); border-radius: var(--gvs-radius-md); overflow: hidden; }
.us-danger-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; background: var(--gvs-danger-50); border-bottom: 1px solid color-mix(in srgb, var(--gvs-danger-500) 22%, transparent); color: var(--gvs-danger-700); font-weight: 700; font-size: 14px; }
[data-theme="dark"] .us-danger-head { color: var(--gvs-danger-500); }
.us-danger-head .material-symbols-rounded { font-size: 20px; }
.us-danger-body { padding: 16px; }
.us-danger-body p { margin: 0 0 14px; font-size: 13.5px; color: var(--gvs-fg-2); line-height: 1.5; }
.us-danger-actions { display: flex; gap: 10px; align-items: center; }
.us-danger-actions .mh-input { flex: 1; }
/* .mh-btn.danger promoted to GVS.Components gvs-suite-components.css */

/* divider in dialog */
.us-hr { height: 1px; background: var(--gvs-divider); margin: 24px 0; border: none; }

/* location-scope picker (tri-state tree over the Suite location hierarchy) */
.us-section-hint { font-size: 12.5px; color: var(--gvs-fg-3); margin: 2px 0 10px; }
.us-scope-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.us-scope-unrestricted { font-size: 13px; color: var(--gvs-fg-3); }
.us-scope-summary { font-size: 13px; font-weight: 600; color: var(--gvs-fg-1); }

.ls-tree { display: flex; flex-direction: column; gap: 8px; }
.ls-tree-search { margin: 4px 0; }
.ls-tree-body { max-height: 280px; overflow-y: auto; padding: 4px 2px; }
.ls-node { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.ls-caret { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: var(--gvs-radius-sm); color: var(--gvs-fg-3); }
.ls-caret:hover { background: var(--gvs-grey-100); }
.ls-caret .material-symbols-rounded { font-size: 18px; }
.ls-caret-empty { visibility: hidden; }
.ls-check { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 6px; border-radius: var(--gvs-radius-sm); flex: 1; min-width: 0; }
.ls-check:hover { background: var(--gvs-grey-50); }
.ls-check input[type="checkbox"] { accent-color: var(--gvs-primary); width: 16px; height: 16px; flex: none; }
.ls-check input[type="checkbox"]:disabled { cursor: default; }
.ls-node-name { font-size: 13.5px; color: var(--gvs-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-node-name.partial { font-weight: 600; }
.ls-node-name.partial::after { content: "•"; color: var(--gvs-primary); margin-left: 6px; }
.ls-node-type { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--gvs-fg-3); flex: none; }
.ls-inherited { font-size: 11px; font-style: italic; color: var(--gvs-fg-3); flex: none; }

@media (max-width: 600px) {
  .ls-node-type { display: none; }
  .ls-tree-body { max-height: 220px; }
}

/* Field spacing inside the create/manage dialogs. Previously inline style attributes on
   each .mh-field; named here so the dialog markup carries no styling. */
.us-field-flush { margin-bottom: 0; }
.us-field-spaced { margin-top: 14px; margin-bottom: 0; }
.us-suiteadmin-row { margin-top: 18px; }

/* Manage-user dialog head: avatar + name + email. Was four inline style attributes. */
.us-dialog-user { display: flex; align-items: center; gap: 13px; }
.us-dialog-avatar { width: 40px; height: 40px; font-size: 15px; }
.us-dialog-name { margin: 0; font-size: 18px; font-weight: 700; color: var(--gvs-fg-1); }
.us-dialog-mail { font-size: 13px; color: var(--gvs-fg-3); }

/* ---------- Copy access from another user -------------------------------- */
.us-copyfrom { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.us-copyfrom .af-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gvs-fg-3); }
/* What could not be copied. Informational, not an error — the create can still go ahead. */
.us-copy-skipped {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 9px 12px;
  background: var(--gvs-info-50); border: 1px solid var(--gvs-border);
  border-radius: var(--gvs-radius-md); font-size: 12.5px; color: var(--gvs-info-700);
}
.us-copy-skipped .material-symbols-rounded { font-size: 17px; flex: none; }
/* --gvs-info-50 remaps to a translucent fill in dark mode but --gvs-info-700 does NOT — it
   stays dark and goes illegible on navy. The -500 is the readable one there. */
[data-theme="dark"] .us-copy-skipped { color: var(--gvs-info-500); }