/* ==================================================================
 * REMIS — User Management (module 12)
 * Loaded only by the user-management screens, so the generic helper
 * names below (.panel-head, .field-row, .table-wrap, .badge-green …)
 * cannot collide with anything on the rest of the system.
 *
 * Everything is expressed through the existing design tokens, so one
 * palette works in both the light and dark themes.
 * ================================================================== */

/* ---------------- shared building blocks ---------------- */
.panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid var(--border);
}
.panel-head h3{
  margin:0;font-size:15px;color:var(--text-strong);
  display:inline-flex;align-items:center;gap:8px;
}
.panel-head h3 svg{width:17px;height:17px;color:var(--brand-500);}
.panel-head .um-note{margin:4px 0 0;flex-basis:100%;}
.panel-body{display:block;}

.field-row{display:flex;gap:14px;flex-wrap:wrap;}
.field-row > .field-group{flex:1 1 200px;min-width:0;}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

.badge-green{background:#dcf5e4;color:#1a7a3f;}
.badge-blue {background:#e4edfb;color:#175CC7;}
.badge-amber{background:#fff3d6;color:#8a6300;}
.badge-red  {background:#fbe3e1;color:#a3291d;}
.badge-grey {background:var(--surface-2);color:var(--text-muted);}
[data-theme="dark"] .badge-green{background:rgba(30,158,91,.20);color:#8ee0ac;}
[data-theme="dark"] .badge-blue {background:rgba(47,123,234,.20);color:#9cc4f8;}
[data-theme="dark"] .badge-amber{background:rgba(200,150,20,.20);color:#f0cd7c;}
[data-theme="dark"] .badge-red  {background:rgba(219,75,63,.20);color:#f0a49c;}
[data-theme="dark"] .badge-grey {background:rgba(255,255,255,.07);color:var(--text-muted);}

.btn-danger{background:var(--red);color:#fff;border:1px solid transparent;}
.btn-danger:hover{filter:brightness(.94);}

.alert-info{
  background:var(--sky-light);border:1px solid var(--brand-300);
  color:var(--text-strong);padding:11px 14px;border-radius:11px;
  font-size:13.5px;margin-bottom:14px;
}

.um-sub{color:var(--text-muted);font-size:12.2px;line-height:1.45;}
.um-note{color:var(--text-muted);font-size:12.6px;line-height:1.55;margin:10px 0 0;}
.um-hr{border:none;border-top:1px solid var(--border);margin:16px 0;}
.um-you{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;
  background:var(--sky-light);color:var(--brand-600);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
}

/* ---------------- headline counters ---------------- */
.um-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin-bottom:18px;
}
.um-stat{
  display:block;text-decoration:none;padding:12px 14px;border-radius:13px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);transition:.15s;
}
.um-stat:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.um-stat strong{display:block;font-size:21px;color:var(--text-strong);line-height:1.15;}
.um-stat span{display:block;font-size:12px;color:var(--text-muted);margin-top:2px;}
.um-stat.is-on{border-color:var(--brand-500);box-shadow:0 0 0 1px var(--brand-500) inset;}
.um-stat.s-green strong{color:#1a7a3f;}
.um-stat.s-amber strong{color:#8a6300;}
.um-stat.s-red   strong{color:#a3291d;}
.um-stat.s-grey  strong{color:var(--text-muted);}
[data-theme="dark"] .um-stat.s-green strong{color:#8ee0ac;}
[data-theme="dark"] .um-stat.s-amber strong{color:#f0cd7c;}
[data-theme="dark"] .um-stat.s-red   strong{color:#f0a49c;}

/* ---------------- filter toolbar ---------------- */
.um-filters{align-items:center;}
.um-daterange{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--text-muted);white-space:nowrap;
}
.um-daterange input{width:140px;}

/* ---------------- export menu ---------------- */
.um-export{position:relative;display:inline-block;}
.um-export > .btn{cursor:default;}
.um-export-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:170px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-pop);padding:6px;display:none;
}
.um-export:hover .um-export-menu,
.um-export:focus-within .um-export-menu{display:block;}
.um-export-menu a{
  display:block;padding:8px 11px;border-radius:8px;text-decoration:none;
  font-size:13px;color:var(--text);
}
.um-export-menu a:hover{background:var(--surface-2);color:var(--text-strong);}

/* ---------------- user table ---------------- */
.um-table th a{color:inherit;text-decoration:none;}
.um-table th a:hover{text-decoration:underline;}
.um-table .um-tick{width:34px;text-align:center;}
.um-table td{vertical-align:middle;}
.um-table tr.um-self{background:linear-gradient(0deg,var(--sky-light),var(--sky-light));}
.um-person{display:flex;align-items:center;gap:10px;}
.um-person a{color:var(--text-strong);text-decoration:none;}
.um-person a:hover{text-decoration:underline;}
.um-person .badge{margin-left:4px;font-size:10.5px;}
.um-contact div{font-size:12.8px;}
.um-actions{white-space:nowrap;}
.um-actions .btn{padding:5px 8px;}
.um-actions .btn svg{width:15px;height:15px;}

/* ---------------- bulk bar ---------------- */
.um-bulkbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  position:sticky;bottom:12px;
  border-color:var(--border-strong);
}
.um-bulkbar.is-live{border-color:var(--brand-500);box-shadow:0 0 0 1px var(--brand-500) inset, var(--shadow-md);}
.um-bulk-count{font-weight:700;color:var(--text-strong);font-size:13.5px;}
.um-bulk-note{flex-basis:100%;margin:0;color:var(--text-muted);font-size:12.2px;}

/* ---------------- forms ---------------- */
.um-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:0 20px;align-items:start;
}
.um-grid > .um-wide{grid-column:1 / -1;}
.um-formbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  position:sticky;bottom:0;padding:14px 0;
  background:linear-gradient(180deg,transparent,var(--bg) 40%);
}
.um-checks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px;}
.um-check{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:var(--text);cursor:pointer;
}
.um-check input{margin:0;}
.um-indent{margin-left:24px;}
.um-radios{display:flex;flex-direction:column;gap:6px;}
.um-username{display:flex;gap:8px;align-items:center;}
.um-username input{flex:1;min-width:0;}
.um-photo-now{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.um-photo-now img{width:52px;height:52px;border-radius:12px;object-fit:cover;border:1px solid var(--border);}
.um-photo-now span{font-size:12.4px;color:var(--text-muted);}
.um-actionrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.um-actionform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.um-actionform input[type=text],
.um-actionform input[type=password]{max-width:220px;}

/* ---------------- profile header ---------------- */
.um-profilehead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.um-ph-main{flex:1;min-width:220px;}
.um-ph-main h2{margin:0 0 6px;font-size:20px;color:var(--text-strong);}
.um-ph-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--text-muted);}
.um-ph-meta span{display:inline-flex;align-items:center;gap:5px;}
.um-ph-meta svg{width:14px;height:14px;}
.um-ph-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.um-ph-actions{display:flex;gap:8px;flex-wrap:wrap;}
.avatar.large{width:64px;height:64px;font-size:24px;border-radius:18px;}
.avatar.large img{width:100%;height:100%;object-fit:cover;border-radius:18px;}
.um-subtabs{margin-top:-6px;}

/* ---------------- definition lists ---------------- */
.um-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:13.4px;}
.um-dl dt{color:var(--text-muted);white-space:nowrap;}
.um-dl dd{margin:0;color:var(--text-strong);}
.um-list{margin:0;padding-left:18px;font-size:13.4px;line-height:1.9;}
.um-linkline{margin:0 0 4px;font-size:14px;color:var(--text-strong);}

.um-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.um-kpi{
  flex:1 1 110px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;
}
.um-kpi strong{display:block;font-size:20px;color:var(--text-strong);}
.um-kpi span{display:block;font-size:11.6px;color:var(--text-muted);margin-top:2px;}

/* ---------------- credentials / codes ---------------- */
.um-creds{border-color:var(--brand-500);box-shadow:0 0 0 1px var(--brand-500) inset;}
.um-creds h3{display:inline-flex;align-items:center;gap:8px;margin:0 0 4px;font-size:15px;}
.um-creds h3 svg{width:18px;height:18px;color:var(--green);}
.um-creds p{margin:0 0 12px;color:var(--text-muted);font-size:13px;}
.um-cred-pair{display:flex;gap:26px;flex-wrap:wrap;}
.um-cred-pair > div{display:flex;flex-direction:column;gap:3px;}
.um-cred-pair span{font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}
.um-cred-pair code,
.um-longcode{
  font-size:15px;font-weight:700;letter-spacing:.5px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:7px 12px;color:var(--text-strong);
  display:inline-block;word-break:break-all;
}
.um-longcode{font-size:12.5px;font-weight:600;max-width:100%;}
.um-codes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.um-codes code{
  font-size:14px;font-weight:700;letter-spacing:1px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:6px 11px;color:var(--text-strong);
}

/* ---------------- permission matrix ---------------- */
.um-permtable td{vertical-align:top;font-size:13px;}
.um-permtable select{min-width:110px;}
.um-permgroup td{
  background:var(--surface-2);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);
  padding-top:9px;padding-bottom:9px;
}

/* ---------------- two-factor setup ---------------- */
.um-2fa-setup{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;}
.um-2fa-qr{
  background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:12px;width:190px;height:190px;display:flex;
  align-items:center;justify-content:center;
}
.um-2fa-qr svg{width:100%;height:100%;}
.um-2fa-steps{flex:1;min-width:260px;}
.um-2fa-steps ol{margin:0 0 14px;padding-left:20px;font-size:13.4px;line-height:1.85;}
.um-2fa-steps .um-longcode{margin-top:5px;}

/* ---------------- my-account portal shell ---------------- */
.um-portalwrap{max-width:1000px;margin:0 auto;padding:22px 16px 60px;}
.um-portaltop{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.um-portaltop strong{display:block;font-size:18px;color:var(--text-strong);}
.um-portaltop span{display:block;font-size:13px;color:var(--text-muted);}
.um-me{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.um-me strong{font-size:15px;color:var(--text-strong);}

/* ---------------- standalone pages (change / reset password) ------- */
.um-standalone{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:32px 16px;gap:14px;
}
.um-standalone .login-box{width:100%;max-width:430px;}

/* ---------------- import preview ---------------- */
.um-imp-row-bad{background:rgba(219,75,63,.07);}
.um-imp-row-new{background:rgba(30,158,91,.06);}
.um-imp-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.4px;color:var(--text-muted);margin-bottom:12px;}
.um-imp-legend span{display:inline-flex;align-items:center;gap:6px;}
.um-imp-swatch{width:13px;height:13px;border-radius:4px;border:1px solid var(--border);display:inline-block;}
.um-imp-swatch.ok {background:rgba(30,158,91,.25);}
.um-imp-swatch.bad{background:rgba(219,75,63,.25);}

/* ---------------- reports ---------------- */
.um-bars{display:flex;flex-direction:column;gap:9px;}
.um-bar{display:grid;grid-template-columns:170px 1fr 60px;gap:10px;align-items:center;font-size:13px;}
.um-bar-label{color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.um-bar-track{background:var(--surface-2);border-radius:20px;height:12px;overflow:hidden;}
.um-bar-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--brand-500),var(--brand-600));}
.um-bar-val{text-align:right;color:var(--text-muted);font-variant-numeric:tabular-nums;}

/* ---------------- print ---------------- */
@media print{
  .sidebar,.topheader,.site-footer,.ss-tabs,.ss-toolbar,.um-stats,
  .um-bulkbar,.um-ph-actions,.ss-pagehead .ss-ph-actions,.um-export{display:none !important;}
  .panel{border:none;box-shadow:none;padding:0;}
  .main-wrap,.container{margin:0 !important;padding:0 !important;}
  .table{font-size:10.5pt;}
  .badge{border:1px solid #999;}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ---------------- narrow screens ---------------- */
@media (max-width:720px){
  .um-grid{grid-template-columns:1fr;}
  .um-bar{grid-template-columns:110px 1fr 50px;}
  .um-dl{grid-template-columns:1fr;gap:2px 0;}
  .um-dl dt{margin-top:8px;}
  .um-daterange{width:100%;}
  .um-daterange input{flex:1;width:auto;}
}

/* ==================================================================
 * Password screens (first sign-in, change, reset)
 * ------------------------------------------------------------------
 * These are the first thing a brand-new user ever sees, and often the
 * only screen a parent or student meets before their portal — so it
 * gets a proper welcome card rather than a bare form: brand mark,
 * an explanation of WHY they are here, and a live checklist so the
 * rules are visible before the form is submitted, not after.
 * ================================================================== */
.pw-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 18px;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(47,123,234,.20), transparent 60%),
    radial-gradient(900px 560px at 108% 108%, rgba(79,195,247,.18), transparent 58%),
    var(--bg);
}
.pw-card{
  width:100%;max-width:520px;background:var(--surface);
  border:1px solid var(--border);border-radius:22px;
  box-shadow:var(--shadow-md);padding:38px 40px 30px;
}

/* ---- header ---- */
.pw-head{text-align:center;margin-bottom:26px;}
.pw-logo{
  width:66px;height:66px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);
  box-shadow:0 0 0 6px rgba(47,123,234,.08);overflow:hidden;
}
.pw-logo img{width:100%;height:100%;object-fit:cover;}
.pw-head h1{
  margin:0 0 7px;font-size:24px;line-height:1.25;
  font-weight:800;letter-spacing:-.3px;color:var(--text-strong);
}
.pw-head p{margin:0;color:var(--text-muted);font-size:14.2px;line-height:1.6;}
.pw-head p strong{color:var(--text-strong);}

/* ---- the "why am I here" panel ---- */
.pw-why{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--sky-light);border:1px solid var(--brand-300);
  border-radius:14px;padding:13px 15px;margin-bottom:22px;
  font-size:13.3px;line-height:1.6;color:var(--text-strong);
}
.pw-why svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--brand-600);}
.pw-why b{display:block;margin-bottom:2px;}

.pw-alert{
  display:flex;gap:10px;align-items:flex-start;
  border-radius:12px;padding:11px 14px;margin-bottom:14px;
  font-size:13.3px;line-height:1.55;
}
.pw-alert.is-bad{background:rgba(219,75,63,.10);border:1px solid rgba(219,75,63,.35);color:#8c2318;}
.pw-alert.is-ok {background:rgba(30,158,91,.10);border:1px solid rgba(30,158,91,.35);color:#14663c;}
[data-theme="dark"] .pw-alert.is-bad{color:#f3aaa2;}
[data-theme="dark"] .pw-alert.is-ok {color:#96e3b3;}

/* ---- fields ---- */
.pw-field{margin-bottom:16px;}
.pw-field > label{
  display:block;margin-bottom:7px;font-size:12.6px;font-weight:700;
  letter-spacing:.2px;color:var(--text-strong);
}
.pw-input{position:relative;display:flex;align-items:center;}
.pw-input input{
  width:100%;padding:13px 46px 13px 15px;font-size:15px;
  background:var(--surface-input);color:var(--text);
  border:1.5px solid var(--border);border-radius:12px;
  transition:border-color .15s, box-shadow .15s;
}
.pw-input input:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--focus-ring);}
.pw-input input::placeholder{color:var(--text-faint);}
.pw-eye{
  position:absolute;right:6px;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:none;background:transparent;cursor:pointer;
  color:var(--text-muted);border-radius:9px;
}
.pw-eye:hover{background:var(--surface-2);color:var(--text-strong);}
.pw-eye svg{width:19px;height:19px;}
.pw-eye .pw-eye-off{display:none;}
.pw-eye.is-shown .pw-eye-on{display:none;}
.pw-eye.is-shown .pw-eye-off{display:block;}

/* ---- strength bar ---- */
.pw-meter{display:flex;gap:5px;margin:10px 0 7px;}
.pw-meter i{flex:1;height:5px;border-radius:20px;background:var(--surface-2);transition:background .2s;}
.pw-meter.s1 i:nth-child(1){background:#DB4B3F;}
.pw-meter.s2 i:nth-child(-n+2){background:#E8A33D;}
.pw-meter.s3 i:nth-child(-n+3){background:#3DA5E8;}
.pw-meter.s4 i{background:#1E9E5B;}
.pw-strength{font-size:12.2px;color:var(--text-muted);min-height:16px;}

/* ---- requirement checklist ---- */
.pw-rules{
  list-style:none;margin:4px 0 22px;padding:14px 16px;
  background:var(--surface-2);border-radius:13px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
}
.pw-rules li{
  display:flex;align-items:center;gap:8px;
  font-size:12.8px;color:var(--text-muted);transition:color .15s;
}
.pw-rules li .pw-tick{
  width:17px;height:17px;flex:none;border-radius:50%;
  border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.pw-rules li .pw-tick svg{width:10px;height:10px;color:#fff;opacity:0;transition:opacity .15s;}
.pw-rules li.is-met{color:#14663c;}
.pw-rules li.is-met .pw-tick{background:#1E9E5B;border-color:#1E9E5B;}
.pw-rules li.is-met .pw-tick svg{opacity:1;}
[data-theme="dark"] .pw-rules li.is-met{color:#96e3b3;}

/* ---- submit + footer ---- */
.pw-submit{
  width:100%;padding:14px;font-size:15px;font-weight:700;border-radius:12px;
  border:none;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-600));
  box-shadow:0 6px 18px rgba(47,123,234,.30);transition:.15s;
}
.pw-submit:hover{filter:brightness(1.05);transform:translateY(-1px);}
.pw-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.pw-foot{
  margin:20px 0 0;text-align:center;font-size:13px;color:var(--text-muted);
  padding-top:16px;border-top:1px solid var(--border);
}
.pw-foot a{color:var(--brand-600);text-decoration:none;font-weight:600;}
.pw-foot a:hover{text-decoration:underline;}
.pw-copy{margin-top:18px;text-align:center;font-size:12px;color:var(--text-faint);}

@media (max-width:520px){
  .pw-card{padding:28px 22px 24px;border-radius:18px;}
  .pw-head h1{font-size:21px;}
  .pw-rules{grid-template-columns:1fr;}
}