/* Users & Logins page */
.users-main{width:min(1100px,92%);margin:34px auto 48px}
.users-head{margin-bottom:24px}
.users-head .eyebrow{margin-bottom:8px}
.users-head h1{font-size:28px;line-height:1.2;margin:0 0 8px}
.users-head .muted{font-size:13px;max-width:640px}

.users-card{margin-bottom:22px;overflow:visible;box-shadow:var(--shadow)}
.users-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--border)}
.users-card-head h2{font-size:16px;margin:0}
.users-count{background:var(--primary-soft);color:var(--primary-dark);font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}

.users-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 20px;padding:24px;align-items:start}
.users-form .form-field{margin:0;gap:7px;font-size:12px;font-weight:700;color:var(--text)}
.users-form .form-field input,.users-form .form-field select{
  min-height:44px;border:1px solid #dbe1ec;border-radius:10px;padding:0 13px;background:#fff;font-weight:400;font-size:14px;
  transition:border-color .15s,box-shadow .15s
}
.users-form .form-field input::placeholder{color:#a3adbd}
.users-form .form-field input:hover,.users-form .form-field select:hover{border-color:#b9c4da}
.users-form .form-field input:focus,.users-form .form-field select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(49,87,213,.15)}
.users-form select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237c8799' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center
}
.users-form .form-actions-row{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:4px}
.users-form .form-note{font-size:12px;color:var(--muted)}
.users-form .primary-button{min-height:44px;padding:0 24px;border-radius:10px;font-size:13px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.users-form .primary-button:disabled{opacity:.6;cursor:wait}

/* table */
.users-table{min-width:0;width:100%;margin:0;border-collapse:separate;border-spacing:0;white-space:nowrap}
.users-table th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  background:#fafbfe;padding:13px 20px;border-bottom:1px solid var(--border)
}
.users-table td{padding:14px 20px;border-bottom:1px solid #f0f3f8;vertical-align:middle;font-size:13px}
.users-table tbody tr:last-child td{border-bottom:0}
.users-table tbody tr:hover{background:#fafbff}
.users-table .col-actions{text-align:right}
.u-person{display:flex;align-items:center;gap:12px;min-width:0}
.u-avatar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--primary-soft);color:var(--primary-dark)}
.u-name{font-weight:700;color:var(--text)}
.u-you{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:999px;background:#eef1f7;color:var(--muted);vertical-align:middle}
.u-username{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.u-never{color:#a3adbd}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;text-transform:capitalize}
.pill.role-admin{background:#efe9ff;color:#5b3fd0}
.pill.role-teacher{background:#e8f0ff;color:#2443b0}
.pill.role-accountant{background:#fff3dc;color:#9a5a00}
.pill.role-developer{background:#e0f7f4;color:#0b6b62}
.u-locked{font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 4px}
.pill.st-active{background:#e4f6ee;color:#0f7a53}
.pill.st-disabled{background:#fdecea;color:#b42318}
.pill.st-active::before,.pill.st-disabled::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

.u-actions{display:inline-flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.act-btn{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border-radius:9px;
  border:1px solid #d3dbf2;background:#fff;color:var(--primary-dark);font-size:12px;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s
}
.act-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act-btn:hover{background:var(--primary-soft);border-color:#b7c5f3}
.act-btn.danger{border-color:#f1c9c4;color:#b42318}
.act-btn.danger:hover{background:#fdecea;border-color:#e8aaa2}
.act-btn.ok{border-color:#bfe5d3;color:#0f7a53}
.act-btn.ok:hover{background:#e4f6ee;border-color:#9fd6bd}
.act-btn:focus-visible,.users-form .primary-button:focus-visible{outline:3px solid rgba(49,87,213,.35);outline-offset:2px}
.users-empty{padding:34px;text-align:center;color:var(--muted)}

/* reset-password dialog */
.u-dialog{border:0;border-radius:16px;padding:0;width:min(420px,92vw);box-shadow:0 24px 70px rgba(23,35,62,.35);color:var(--text)}
.u-dialog::backdrop{background:rgba(23,35,62,.5)}
.u-dialog form{padding:24px;display:grid;gap:14px}
.u-dialog h3{margin:0;font-size:18px}
.u-dialog p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.u-dialog label{display:grid;gap:7px;font-size:12px;font-weight:700}
.u-dialog input{min-height:44px;border:1px solid #dbe1ec;border-radius:10px;padding:0 13px;font-size:14px;font-weight:400}
.u-dialog input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(49,87,213,.15)}
.u-dialog .u-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.u-dialog .primary-button,.u-dialog .secondary-button{min-height:40px;padding:0 18px;border-radius:10px;cursor:pointer}

@media (max-width:760px){
  .users-main{width:94%;margin:22px auto 36px}
  .users-head h1{font-size:23px}
  .users-card-head{padding:16px 18px}
  .users-form{padding:18px;grid-template-columns:1fr}
  .users-form .primary-button{width:100%;justify-content:center}
  .users-table thead{display:none}
  .users-table,.users-table tbody,.users-table tr,.users-table td{display:block;width:100%}
  .users-table tr{padding:14px 16px;border-bottom:1px solid var(--border)}
  .users-table tbody tr:last-child{border-bottom:0}
  .users-table td{border:0;padding:6px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;white-space:normal}
  .users-table td::before{content:attr(data-label);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
  .users-table td.cell-person{display:block;padding-bottom:8px}
  .users-table td.cell-person::before{display:none}
  .users-table td.col-actions{display:block;padding-top:10px}
  .users-table td.col-actions::before{display:none}
  .u-actions{justify-content:flex-start;width:100%}
  .act-btn{flex:1 1 auto;justify-content:center;min-height:40px}
}

/* ===== Password generator ===== */
.users-form .form-field > label { font-size: 12px; font-weight: 700; color: var(--text); }
.pw-row { display: flex; gap: 8px; align-items: stretch; }
.pw-row input { flex: 1 1 auto; min-width: 0; }
.pw-gen {
    flex: none; min-height: 44px; padding: 0 14px; border: 1px solid #d3dbf2; border-radius: 10px;
    background: var(--primary-soft); color: var(--primary-dark); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.pw-gen:hover { background: #e0e8ff; border-color: #b7c5f3; }
.pw-gen:focus-visible { outline: 3px solid rgba(49, 87, 213, .35); outline-offset: 2px; }

/* ===== Search + filters ===== */
.users-toolbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.users-toolbar input, .users-toolbar select {
    min-height: 40px; border: 1px solid #dbe1ec; border-radius: 10px; padding: 0 12px; background: #fff; font: inherit; font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}
.users-toolbar input { flex: 1 1 220px; min-width: 0; }
.users-toolbar select { flex: 0 1 160px; cursor: pointer; }
.users-toolbar input:focus, .users-toolbar select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(49, 87, 213, .15); }

/* ===== Share-login box + confirm box ===== */
.u-dialog-body { padding: 24px; display: grid; gap: 14px; }
.u-dialog .primary-button.danger-btn { background: #b42318; border-color: #b42318; }
.u-dialog .primary-button.danger-btn:hover { background: #8f1a11; }
.cred-box { margin: 0; display: grid; gap: 1px; border: 1px solid var(--border); border-radius: 12px; background: var(--border); overflow: hidden; }
.cred-box > div { display: grid; gap: 3px; padding: 11px 14px; background: #fafbfe; }
.cred-box dt { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.cred-box dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); word-break: break-all; }
#credPass { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; letter-spacing: .5px; color: var(--primary-dark); }
.u-dialog .cred-note { font-size: 12px; }
.cred-actions { flex-wrap: wrap; }
.wa-btn { background: #1f9d55; border-color: #1f9d55; }
.wa-btn:hover { background: #167a42; border-color: #167a42; }

@media (max-width: 760px) {
    .users-toolbar { padding: 12px 14px; }
    .users-toolbar select { flex: 1 1 calc(50% - 5px); }
    .cred-actions .primary-button, .cred-actions .secondary-button { flex: 1 1 100%; }
}