/* Administration of users and access: shared look of the tabbed sections, the access screens and the
   user form. Colours follow the portal: dark header, Circet orange accent, soft cards. */
:root {
  --ax-accent: #f26522;
  --ax-accent-soft: #fff1e8;
  --ax-ink: #1f2937;
  --ax-muted: #6b7280;
  --ax-line: #e5e7eb;
  --ax-bg: #f6f7f9;
  --ax-partner: #b45309;
  --ax-partner-soft: #fff4e5;
  --ax-r: #0f766e;
  --ax-e: #1d4ed8;
  --ax-a: #b91c1c;
}

/* ---- Section header and tabs ---- */
.ax-page { max-width: 1480px; margin: 0 auto; }
.ax-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ax-title { display: flex; align-items: center; gap: .85rem; }
.ax-title-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem;
  color: #fff; background: linear-gradient(135deg, #f26522, #f59e0b); box-shadow: 0 6px 18px rgba(242, 101, 34, .28); }
.ax-title h1 { font-size: 1.55rem; font-weight: 700; color: var(--ax-ink); margin: 0; }
.ax-title p { margin: 0; color: var(--ax-muted); font-size: .9rem; }
.ax-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.ax-stat { background: #fff; border: 1px solid var(--ax-line); border-radius: 12px; padding: .35rem .8rem; min-width: 92px; }
.ax-stat strong { display: block; font-size: 1.15rem; color: var(--ax-ink); line-height: 1.2; }
.ax-stat span { font-size: .72rem; color: var(--ax-muted); text-transform: uppercase; letter-spacing: .03em; }
.ax-stat.ax-stat-partner strong { color: var(--ax-partner); }
.ax-tabs { display: flex; flex-wrap: wrap; gap: .35rem; background: #fff; border: 1px solid var(--ax-line); border-radius: 14px;
  padding: .35rem; margin-bottom: 1.1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.ax-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 10px; color: var(--ax-muted);
  font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .15s, color .15s; }
.ax-tab:hover { background: var(--ax-bg); color: var(--ax-ink); }
.ax-tab.active { background: var(--ax-ink); color: #fff; }
.ax-tab .ax-tab-count { background: rgba(0, 0, 0, .08); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; }
.ax-tab.active .ax-tab-count { background: rgba(255, 255, 255, .2); }
.ax-tab-sep { flex: 1; }
.ax-card { background: #fff; border: 1px solid var(--ax-line); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.ax-card-head { padding: .85rem 1.1rem; border-bottom: 1px solid var(--ax-line); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ax-card-head h2, .ax-card-head h3 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--ax-ink); }
.ax-card-body { padding: 1rem 1.1rem; }
.ax-muted { color: var(--ax-muted); }
.ax-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ax-muted); }

/* ---- Level chips and segmented control ---- */
.ax-lv { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 6px;
  font-size: .72rem; font-weight: 700; }
.ax-lv-reader { background: #ccfbf1; color: var(--ax-r); }
.ax-lv-editor { background: #dbeafe; color: var(--ax-e); }
.ax-lv-manager { background: #fee2e2; color: var(--ax-a); }
.ax-seg { display: inline-flex; border: 1px solid var(--ax-line); border-radius: 10px; overflow: hidden; background: #fff; }
.ax-seg button { border: 0; background: transparent; min-width: 34px; height: 30px; font-weight: 700; font-size: .8rem; color: var(--ax-muted);
  border-left: 1px solid var(--ax-line); cursor: pointer; }
.ax-seg button:first-child { border-left: 0; }
.ax-seg button:hover:not(:disabled) { background: var(--ax-bg); color: var(--ax-ink); }
.ax-seg button.active[data-level="none"] { background: #f3f4f6; color: var(--ax-ink); }
.ax-seg button.active[data-level="reader"] { background: var(--ax-r); color: #fff; }
.ax-seg button.active[data-level="editor"] { background: var(--ax-e); color: #fff; }
.ax-seg button.active[data-level="manager"] { background: var(--ax-a); color: #fff; }
.ax-seg button.active[data-level="keep"] { background: #f3f4f6; color: var(--ax-ink); }
.ax-seg button:disabled { opacity: .3; cursor: not-allowed; }

/* ---- Badges ---- */
.ax-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; font-weight: 700; }
.ax-badge-partner { background: var(--ax-partner-soft); color: var(--ax-partner); border: 1px solid #fcd34d; }
.ax-badge-internal { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.ax-badge-admin { background: #1f2937; color: #fff; }
.ax-badge-finance { background: #eef2ff; color: #4338ca; }
.ax-badge-lock { background: #f3f4f6; color: #6b7280; }

/* ---- Access by module ---- */
.ax-split { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 991px) { .ax-split { grid-template-columns: 1fr; } }
.ax-side { position: sticky; top: calc(var(--cx-shell-header-height, 64px) + 12px); max-height: calc(100vh - 110px); display: flex; flex-direction: column; }
.ax-side-search { padding: .7rem; border-bottom: 1px solid var(--ax-line); }
.ax-side-list { overflow: auto; padding: .4rem; }
.ax-side-group { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ax-muted); padding: .6rem .6rem .3rem; }
.ax-mod { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; background: transparent; text-align: left; padding: .45rem .55rem;
  border-radius: 10px; cursor: pointer; color: var(--ax-ink); }
.ax-mod:hover { background: var(--ax-bg); }
.ax-mod.active { background: var(--ax-accent-soft); box-shadow: inset 3px 0 0 var(--ax-accent); }
.ax-mod img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex: none; }
.ax-mod-name { flex: 1; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-mod-meta { display: flex; gap: .2rem; flex: none; }
.ax-mod-meta .ax-lv { min-width: 18px; height: 18px; font-size: .64rem; padding: 0 .3rem; }
.ax-mod .ax-mod-dirty { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-accent); flex: none; }
.ax-modhead { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.ax-modhead img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.ax-modhead h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.ax-counts { display: flex; gap: .5rem; flex-wrap: wrap; }
.ax-count { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ax-muted); }
.ax-rights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; margin-top: .9rem; }
.ax-right { border: 1px solid var(--ax-line); border-radius: 12px; padding: .6rem .75rem; font-size: .82rem; color: var(--ax-muted); background: #fcfcfd; }
.ax-right strong { display: flex; align-items: center; gap: .4rem; color: var(--ax-ink); margin-bottom: .2rem; }
.ax-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ax-toolbar .form-control, .ax-toolbar .form-select { max-width: 260px; }
.ax-filter { position: relative; }
.ax-filter-btn { border: 1px solid var(--ax-line); background: #fff; border-radius: 10px; padding: .3rem .7rem; font-size: .84rem; color: var(--ax-ink); }
.ax-filter-btn.on { border-color: var(--ax-accent); color: var(--ax-accent); background: var(--ax-accent-soft); }
.ax-filter-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--ax-line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12); min-width: 240px; max-height: 320px; overflow: auto; padding: .4rem; }
.ax-filter-menu label { display: flex; gap: .5rem; align-items: center; padding: .25rem .4rem; border-radius: 8px; font-size: .85rem; cursor: pointer; }
.ax-filter-menu label:hover { background: var(--ax-bg); }
.ax-filter-menu .ax-n { margin-left: auto; color: var(--ax-muted); font-size: .75rem; }
.ax-users { width: 100%; border-collapse: separate; border-spacing: 0; }
.ax-users th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ax-muted); font-weight: 700; padding: .55rem .8rem;
  border-bottom: 1px solid var(--ax-line); background: #fafafa; position: sticky; top: 0; z-index: 2; }
.ax-users td { padding: .55rem .8rem; border-bottom: 1px solid #f1f2f4; vertical-align: middle; }
.ax-users tr:hover td { background: #fcfcfd; }
.ax-users tr.ax-dirty td:first-child { box-shadow: inset 3px 0 0 var(--ax-accent); }
.ax-users tr.ax-closed { opacity: .5; }
.ax-user { display: flex; align-items: center; gap: .65rem; }
.ax-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex: none; }
.ax-user-name { font-weight: 600; color: var(--ax-ink); line-height: 1.2; }
.ax-user-sub { font-size: .78rem; color: var(--ax-muted); }
.ax-savebar { position: sticky; bottom: 12px; z-index: 20; display: none; align-items: center; gap: .8rem; justify-content: space-between;
  background: var(--ax-ink); color: #fff; border-radius: 14px; padding: .65rem .9rem; margin-top: 1rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.ax-savebar.show { display: flex; }
.ax-empty { text-align: center; color: var(--ax-muted); padding: 2.2rem 1rem; }
.ax-empty i { font-size: 1.8rem; display: block; margin-bottom: .4rem; opacity: .5; }

/* ---- Batch ---- */
.ax-steps { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ax-step { display: flex; align-items: center; gap: .55rem; padding: .5rem .85rem; border-radius: 12px; background: #fff; border: 1px solid var(--ax-line);
  color: var(--ax-muted); font-weight: 600; font-size: .88rem; }
.ax-step b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ax-bg); font-size: .78rem; }
.ax-step.active { border-color: var(--ax-accent); color: var(--ax-ink); }
.ax-step.active b { background: var(--ax-accent); color: #fff; }
.ax-step.done b { background: #10b981; color: #fff; }
.ax-pick { display: flex; align-items: center; gap: .6rem; padding: .4rem .55rem; border-radius: 10px; cursor: pointer; }
.ax-pick:hover { background: var(--ax-bg); }
.ax-pick.on { background: var(--ax-accent-soft); }
.ax-pick-list { max-height: 460px; overflow: auto; }
.ax-modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .5rem; }
.ax-modrow { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--ax-line); border-radius: 12px; padding: .45rem .6rem; }
.ax-modrow.set { border-color: var(--ax-accent); background: #fffaf6; }
.ax-modrow img { width: 24px; height: 24px; border-radius: 6px; }
.ax-modrow .ax-mod-name { font-size: .85rem; }
.ax-preview td { font-size: .85rem; }
.ax-diff { display: inline-flex; align-items: center; gap: .3rem; margin: .1rem .25rem .1rem 0; padding: .15rem .45rem; border-radius: 8px;
  background: #f3f4f6; font-size: .78rem; }
.ax-diff.refused { background: var(--ax-partner-soft); color: var(--ax-partner); }

/* ---- Privileges, partners ---- */
.ax-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.ax-person { display: inline-flex; align-items: center; gap: .35rem; background: var(--ax-bg); border-radius: 999px; padding: .15rem .6rem .15rem .2rem;
  margin: .15rem .2rem .15rem 0; font-size: .8rem; }
.ax-person .ax-avatar { width: 22px; height: 22px; font-size: .62rem; }
.ax-check { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid #f1f2f4; }
.ax-check:last-child { border-bottom: 0; }
.ax-check-n { font-size: 1.2rem; font-weight: 700; min-width: 2.2rem; text-align: center; }
.ax-ok { color: #059669; }
.ax-warn { color: #d97706; }

/* ---- User form ---- */
.uf-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; }
@media (max-width: 1199px) { .uf-grid { grid-template-columns: 1fr; } }
.uf-staff { display: inline-flex; background: var(--ax-bg); border-radius: 12px; padding: .25rem; gap: .25rem; }
.uf-staff button { border: 0; background: transparent; border-radius: 9px; padding: .45rem .9rem; font-weight: 700; font-size: .88rem; color: var(--ax-muted); }
.uf-staff button.active[data-staff="internal"] { background: #fff; color: #047857; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.uf-staff button.active[data-staff="external"] { background: var(--ax-partner); color: #fff; }
.uf-section { margin-bottom: 1rem; }
.uf-section .ax-card-head i { color: var(--ax-accent); }
.uf-roles-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.uf-summary { font-size: .82rem; color: var(--ax-muted); }
.uf-group { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ax-muted); padding: .7rem .2rem .3rem; }
.uf-role { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem; border-radius: 10px; }
.uf-role:hover { background: #fafafa; }
.uf-role img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.uf-role .uf-role-name { flex: 1; font-size: .87rem; font-weight: 600; color: var(--ax-ink); }
.uf-role.um-role-on .uf-role-name { color: #000; }
.uf-role.um-role-closed { opacity: .4; }
.uf-role .um-seg-btn { min-width: 32px; }
.uf-roles { max-height: 560px; overflow: auto; padding-right: .2rem; }
.uf-base { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.uf-base label { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--ax-line); border-radius: 10px; padding: .35rem .7rem; font-size: .85rem; cursor: pointer; }
.uf-footer { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .5rem; }
#umEditModal .uf-roles { max-height: 48vh; }

/* ---- Fixes over the portal defaults ---- */
.btn-orange { background: #E8792B; border-color: #E8792B; color: #fff; font-weight: 600; }
.btn-orange:hover, .btn-orange:focus { background: #d16a20; border-color: #d16a20; color: #fff; }
.btn-orange:disabled { background: #f3b98f; border-color: #f3b98f; color: #fff; }
.ax-tabs a.ax-tab { color: var(--ax-muted) !important; }
.ax-tabs a.ax-tab:hover { color: var(--ax-ink) !important; }
.ax-tabs a.ax-tab.active { color: #fff !important; }
.uf-role .um-role-app::after { content: none !important; }
.uf-staff button:disabled { opacity: .35; cursor: not-allowed; }

/* ---- Modules reserved to internal staff, test accounts ---- */
:root { --ax-int: #4338ca; --ax-int-soft: #eef2ff; }
.ax-internal-icon { color: var(--ax-int); font-size: .85em; }
.ax-internal-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--ax-int-soft); color: var(--ax-int); border-radius: 999px;
  padding: .05rem .5rem; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.ax-badge-internal-only { background: var(--ax-int-soft); color: var(--ax-int); border: 1px solid #c7d2fe; }
.ax-badge-test { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.uf-role.uf-internal-only { box-shadow: inset 3px 0 0 #c7d2fe; }
.uf-role.uf-internal-only.um-role-on { background: #f8f9ff; box-shadow: inset 3px 0 0 var(--ax-int); }
.uf-role.um-role-closed .ax-internal-chip { background: #f3f4f6; color: #9ca3af; }
.uf-role.um-role-closed .ax-internal-chip i::before { content: "\f023"; }

/* ---- Recap dialogs ---- */
.ax-rc-head { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; background: #f9fafb; border-radius: 12px; margin-bottom: .6rem; }
.ax-rc { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .6rem; border-radius: 10px; margin: .2rem 0;
  border: 1px solid #eef0f3; font-size: .88rem; }
.ax-rc-mod { font-weight: 600; color: #111827; }
.ax-rc-lv { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; color: #6b7280; }
.ax-rc-added { border-left: 4px solid #10b981; }
.ax-rc-changed { border-left: 4px solid #3b82f6; }
.ax-rc-removed { border-left: 4px solid #9ca3af; background: #fafafa; }
.ax-rc-internal { background: #f5f7ff; border-color: #c7d2fe; border-left-color: #4338ca; }
.ax-rc-group + .ax-rc-group { margin-top: .7rem; }
.ax-rc-list { margin: .4rem 0; padding-left: 1.1rem; font-size: .88rem; }
.ax-rc-note { margin-top: .6rem; font-size: .8rem; padding: .45rem .6rem; border-radius: 10px; display: flex; gap: .45rem; align-items: center; }
.ax-rc-note-int { background: #eef2ff; color: #3730a3; }
.ax-rc-note-adm { background: #fef2f2; color: #991b1b; }

/* ---- Users list ---- */
.ax-search { position: relative; }
.ax-search i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--ax-muted); font-size: .8rem; }
.ax-search input { padding-left: 1.8rem; min-width: 240px; }
.ax-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: var(--ax-ink); color: #fff; padding: .55rem 1rem; }
.ax-bulkbar[hidden] { display: none; }
.ax-userlist th.ax-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ax-userlist th.ax-sort i { opacity: .45; font-size: .75em; }
.ax-userlist tr.ax-inactive td { opacity: .55; }
.ax-userlist tr.ax-selected td { background: #fff7ed !important; }
.ax-tag { display: inline-block; background: #f3f4f6; border-radius: 6px; padding: .05rem .4rem; margin: .1rem .15rem .1rem 0; font-size: .74rem; color: #374151; }
.ax-count-pill { display: inline-flex; min-width: 26px; height: 22px; align-items: center; justify-content: center; border-radius: 999px; background: #f3f4f6;
  font-weight: 700; font-size: .78rem; color: #374151; padding: 0 .4rem; cursor: help; }
.ax-state { display: inline-block; border-radius: 999px; padding: .08rem .55rem; font-size: .74rem; font-weight: 700; }
.ax-state-on { background: #ecfdf5; color: #047857; }
.ax-state-wait { background: #fff7ed; color: #c2410c; }
.ax-state-off { background: #f3f4f6; color: #6b7280; }
.ax-2fa { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; margin-left: .3rem; }
.ax-2fa.ok { color: #059669; }
.ax-2fa.no { color: #b91c1c; }
.ax-userlist .action-buttons .btn { padding: .2rem .45rem; }

/* ---- System admins ---- */
.ax-badge-sysadmin { background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; }
.ax-card-sysadmin { border-color: #fbcfe8; }
.ax-card-sysadmin .ax-card-head i { color: #be185d; }
.ax-person-sysadmin { background: #fdf2f8; border-color: #fbcfe8; }
.ax-person-x { border: 0; background: transparent; color: #9d174d; padding: 0 .2rem 0 .35rem; }

/* ---- Access journal: info behind a line ---- */
.ax-log-i { border: 0; background: transparent; color: #9ca3af; padding: 0 .15rem; line-height: 1; }
.ax-log-i:hover, .ax-log-i:focus { color: #6b7280; }
.ax-log-more { color: #6b7280; margin-top: .2rem; }