.users-page-heading { align-items: flex-end; }
.user-page-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.users-total-pill { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid #d8e5ef; border-radius: 9px; background: #f3f9fd; color: #176a9f; }
.users-total-pill strong { font-size: 18px; line-height: 1; }
.users-total-pill small { font-size: 11px; color: #64788a; }

.users-workspace-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.72fr); gap: 20px; align-items: start; }
.user-list-card { min-width: 0; padding: 0; overflow: hidden; }
.user-list-heading { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 16px; border-bottom: 1px solid #e7edf3; }
.user-list-heading > div,.side-card-heading { display: flex; align-items: center; gap: 11px; }
.user-list-heading h2,.side-card-heading h2 { margin: 0; color: #172b40; }
.user-list-heading small,.side-card-heading small { display: block; margin-top: 1px; }
.user-section-icon,.side-card-icon { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 10px; background: #eaf6ff; color: #0878bd; }
.user-section-icon svg,.side-card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.side-card-icon.csv { background: #edf8f5; color: #168064; }

.user-filter-bar { display: grid; grid-template-columns: minmax(190px,1fr) 112px 125px auto; gap: 10px; align-items: end; padding: 15px 22px; border-bottom: 1px solid #e7edf3; background: #f8fafc; }
.user-filter-bar label { margin: 0; color: #627184; font-size: 11px; font-weight: 700; }
.user-filter-bar input,.user-filter-bar select { min-height: 39px; margin-top: 5px; padding: 7px 10px; border-color: #d8e1ea; font-size: 13px; }
.filter-input-wrap { position: relative; display: block; }
.filter-input-wrap svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-36%); fill: none; stroke: #8290a1; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.filter-input-wrap input { padding-left: 34px; }
.user-filter-actions { display: flex; gap: 7px; }
.user-filter-actions .button { min-height: 39px; padding: 7px 12px; font-size: 13px; }

.accounts-list { padding: 0 22px; }
.account-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 0; border-bottom: 1px solid #e8edf2; }
.account-row:last-child { border-bottom: 0; }
.account-row.is-inactive { opacity: .76; }
.avatar { display: flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 11px; font-size: 14px; font-weight: 800; }
.avatar-admin { background: #fff0f1; color: #b50e1b; }
.avatar-user { background: #eaf6ff; color: #126aa3; }
.account-row.is-inactive .avatar { background: #eef1f4; color: #7b8491; }
.account-info { min-width: 0; flex: 1; line-height: 1.4; }
.account-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.account-name-line strong { max-width: 100%; overflow: hidden; color: #172033; text-overflow: ellipsis; white-space: nowrap; }
.role-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.role-chip.admin { background: #fff0f1; color: #a80e1c; }
.role-chip.user { background: #eaf6ff; color: #0873b9; }
.account-username { display: block; overflow: hidden; color: #738093; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-info .status { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; }
.account-info .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.account-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 5px; }
.account-actions form { display: inline-flex; margin: 0; }
.icon-action-btn { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--action-border,#dbe2ea); border-radius: 8px; background: var(--action-bg,#f7f9fb); color: var(--action-color,#536274); box-shadow: none; cursor: pointer; transition: all .15s ease; }
.icon-action-btn svg { display: block; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-action-btn:hover { transform: translateY(-1px); background: var(--action-hover-bg,var(--action-bg)); border-color: var(--action-hover-border,var(--action-border)); color: var(--action-hover-color,var(--action-color)); box-shadow: 0 3px 7px rgba(15,23,42,.09); }
.icon-action-btn:focus-visible { outline: 3px solid #bfdbfe; outline-offset: 2px; }
.icon-action-btn.edit { --action-bg:#eaf6ff;--action-border:#bfddf3;--action-color:#0873b9;--action-hover-bg:#dcefff;--action-hover-border:#7fc0ea; }
.icon-action-btn.password { --action-bg:#f3efff;--action-border:#d9cefa;--action-color:#6d4bd1;--action-hover-bg:#e9e1ff;--action-hover-border:#bba7f2; }
.icon-action-btn.toggle-suspend { --action-bg:#fff7e8;--action-border:#f3d49d;--action-color:#b76400;--action-hover-bg:#ffedcc;--action-hover-border:#eab75f; }
.icon-action-btn.toggle-activate { --action-bg:#eaf9f3;--action-border:#bde5d5;--action-color:#167c5d;--action-hover-bg:#d8f2e7;--action-hover-border:#83cbb1; }
.icon-action-btn.danger { --action-bg:#fff0f1;--action-border:#f3c5ca;--action-color:#c52b3a;--action-hover-bg:#ffe1e4;--action-hover-border:#e99aa3; }
.current-user-badge { display: inline-flex; align-items: center; padding: 5px 8px; border: 1px solid #d4e3f0; border-radius: 6px; background: #edf5fc; color: #4f6578; font-size: 10px; font-weight: 700; white-space: nowrap; }

.users-pagination { margin: 0; padding: 15px 22px; border-top: 1px solid #e7edf3; background: #fbfcfd; }
.users-empty { display: flex; min-height: 280px; flex-direction: column; align-items: center; justify-content: center; color: #7a8796; text-align: center; }
.users-empty svg { width: 42px; height: 42px; margin-bottom: 10px; fill: none; stroke: #a8b5c2; stroke-width: 1.5; stroke-linecap: round; }
.users-empty strong { color: #405064; }
.users-empty span { font-size: 13px; }

.users-side-panel { display: grid; gap: 16px; position: sticky; top: 92px; }
.users-side-panel .card { margin: 0; padding: 20px; }
.side-card-heading { margin-bottom: 18px; }
.users-side-panel label { margin-bottom: 14px; font-size: 13px; }
.users-side-panel input,.users-side-panel select { min-height: 41px; }
.users-side-panel .notice { padding: 10px 12px; font-size: 12px; }
.csv-import-card { display: block; }
.csv-import-card form { display: block; }
.csv-help { margin: -5px 0 13px; }
.csv-file-field { margin: 0 0 10px !important; }
.csv-file-field input { margin: 0; padding: 6px; font-size: 12px; }
.import-errors ul { margin: 8px 0 0; padding-left: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1180px) {
  .users-workspace-grid { grid-template-columns: minmax(0,1.4fr) minmax(280px,.72fr); }
  .user-filter-bar { grid-template-columns: 1fr 1fr; }
  .user-filter-search,.user-filter-actions { grid-column: span 2; }
}

@media (max-width: 900px) {
  .users-workspace-grid { grid-template-columns: 1fr; }
  .users-side-panel { grid-template-columns: repeat(2,minmax(0,1fr)); position: static; }
}

@media (max-width: 650px) {
  .users-page-heading { align-items: stretch; }
  .user-page-actions { width: 100%; justify-content: stretch; }
  .user-page-actions .button { flex: 1 1 150px; }
  .users-total-pill { flex: 1 1 100%; justify-content: center; }
  .user-filter-bar { grid-template-columns: 1fr; padding: 14px 16px; }
  .user-filter-search,.user-filter-actions { grid-column: auto; }
  .user-filter-actions .button { flex: 1; }
  .user-list-heading,.accounts-list { padding-left: 16px; padding-right: 16px; }
  .account-row { align-items: flex-start; flex-wrap: wrap; }
  .account-info { width: calc(100% - 52px); }
  .account-actions { width: 100%; padding-left: 52px; justify-content: flex-start; }
  .users-side-panel { grid-template-columns: 1fr; }
  .users-pagination { align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .pagination-controls { flex-wrap: wrap; }
}