/* ===== Sign-in, users & roles, mail & security screens ===== */

/* login card */
.cp-login{--cp-r:12px;--cp-ring:0 0 0 4px rgba(247,147,30,.18);min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 85% -10%,rgba(247,147,30,.22),transparent 60%),linear-gradient(135deg,#1b2027,#242a33 55%,#1f3b4a);padding:1rem}
.cp-login__card{background:#fff;border-radius:20px;padding:2rem 2rem 1.75rem;width:min(420px,100%);text-align:center;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 60px rgba(8,12,20,.35);border-top:4px solid #f7931e}
.cp-login__logo{height:80px;width:auto;margin:0 auto 1.25rem;display:block}
.cp-login__card h2{margin:0 0 .25rem;font-size:1.45rem;font-weight:900;color:#1b2027;line-height:1.4}
.cp-login__card p{color:#4b5563;margin-bottom:1.5rem;font-size:.95rem;font-weight:500;line-height:1.8}
.cp-login form{text-align:start}
.cp-login form input{display:block;width:100%;height:48px;padding:0 .9rem;margin-bottom:1rem;border:1.5px solid #cbd5e1;border-radius:var(--cp-r);background-color:#fff;font-family:inherit;font-weight:700;font-size:.95rem;color:#1b2027;outline:none;text-align:start;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:border-color .18s,box-shadow .18s}
.cp-login form input::placeholder{color:#6b7280;font-weight:600}
.cp-login form input:hover{border-color:#94a3b8}
.cp-login form input:focus{border-color:#f7931e;box-shadow:var(--cp-ring)}
/* Field icons (the inputs are LTR, so the icon sits at their start = left). */
.cp-login #cp_user,.cp-login #cp_pass{padding-left:2.75rem;background-repeat:no-repeat;background-position:.9rem center;background-size:18px}
.cp-login #cp_user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
.cp-login #cp_pass{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
.cp-login form input + button,.cp-login form input + .cp-ack + button{margin-top:.5rem}
.cp-login form button.btn{height:48px;border-radius:var(--cp-r);font-size:1rem;font-weight:800;box-shadow:0 6px 16px rgba(247,147,30,.28);transition:transform .15s,box-shadow .18s,filter .18s}
.cp-login form button.btn:hover:not(:disabled){filter:brightness(1.04);box-shadow:0 8px 20px rgba(247,147,30,.36)}
.cp-login form button.btn:active:not(:disabled){transform:translateY(1px)}
.cp-login form button.btn:focus-visible,.cp-login .cp-link:focus-visible{outline:none;box-shadow:var(--cp-ring)}
.cp-login .cp-code{height:56px;text-align:center;font-size:1.6rem;letter-spacing:.6rem;font-family:Consolas,Menlo,monospace}
.cp-err{color:#dc2626;font-weight:700;font-size:.85rem;margin-top:.6rem;min-height:1.2em}
.cp-link{display:inline-block;margin-top:1rem;color:#1f8fbf;font-weight:700;font-size:.875rem;border-radius:6px;padding:.1rem .25rem}
.cp-link:hover{text-decoration:underline}
.cp-row{display:flex;justify-content:space-between;gap:1rem}
/* Authenticator-app sign-in (two-step) */
.cp-steps{text-align:start;margin:0 0 .6rem;padding-inline-start:1.2rem;font-size:.88rem;line-height:1.9;color:#344054}
.cp-steps a{color:#1f8fbf;font-weight:700}
.cp-qr{width:200px;height:200px;margin:.2rem auto .6rem;padding:.4rem;border:1px solid #e4e7ec;border-radius:14px;background:#fff}
.cp-qr svg{width:100%;height:100%;display:block}
.cp-key{text-align:start;font-size:.82rem;margin-bottom:.8rem;color:#475467}
.cp-key summary{cursor:pointer;color:#1f8fbf;font-weight:700}
.cp-key code{display:inline-block;margin-top:.3rem;padding:.2rem .45rem;border-radius:6px;background:#f2f4f7;font-size:.86rem;letter-spacing:.06rem;word-break:break-all}
.cp-lbl{display:block;text-align:start;font-size:.85rem;font-weight:700;margin-bottom:.35rem;color:#344054}
.cp-rcodes{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:.4rem 0 .9rem}
.cp-rcodes code{padding:.45rem;border-radius:8px;background:#f2f4f7;font-size:.95rem;letter-spacing:.08rem;font-family:Consolas,Menlo,monospace}
.cp-row--btns{justify-content:center;margin-bottom:.8rem}
.cp-ack{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.88rem;margin-bottom:.8rem;cursor:pointer}
.cp-ack input,.cp-login form .cp-ack input{width:auto;height:auto;display:inline-block;flex:none;margin:0;padding:0;border:0;box-shadow:none}
.cp-login form .cp-ack{margin:.1rem 0 .8rem}
.cp-login button:disabled{opacity:.7;cursor:wait}

/* shared bits */
.us-pill{display:inline-block;font-size:.72rem;font-weight:800;padding:.18rem .6rem;border-radius:20px;white-space:nowrap}
.us-pill--ok{background:#eaf7ee;color:#166534}
.us-pill--wait{background:#fff4e5;color:#92400e}
.us-pill--off{background:#fdeeee;color:#b3261e}
.us-banner{background:#fff8e6;border:1px solid #f5dd9e;color:#6b4e00;border-radius:12px;padding:.75rem 1rem;font-weight:700;font-size:.86rem;margin-bottom:1rem;line-height:1.8}
.us-banner a{color:#1f6f8f;text-decoration:underline;margin-inline-start:.4rem}
.us-banner--err{background:#fdeeee;border-color:#f3c0bd;color:#8a1c14}
.us-row{display:flex;gap:.8rem;flex-wrap:wrap}
.us-row>.fld{flex:1 1 200px}
.us-row>.fld--xs{flex:0 1 130px}
.us-h4{margin:.4rem 0 .6rem;font-size:.95rem}
.us-list{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.us-list li{background:var(--bg);border-radius:10px;padding:.5rem .8rem;font-size:.86rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.us-list small.cmuted{margin-inline-start:auto}

/* users table */
.us-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.us-stats{display:flex;gap:.5rem;flex-wrap:wrap}
.us-stats span{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.35rem .8rem;font-size:.82rem;font-weight:700;color:var(--muted)}
.us-stats b{color:var(--ink);font-size:.95rem;margin-inline-end:.2rem}
.us-search{max-width:320px;margin-inline-start:auto}
.us-tbl td{vertical-align:middle}
.us-tbl td small{display:block}
.us-name{display:flex;align-items:center;gap:.7rem}
.us-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#1f6f8f,#29abe2);color:#fff;display:grid;place-items:center;font-weight:900;flex-shrink:0}
.us-warn{color:#b45309!important}
.us-act{white-space:nowrap;text-align:end}
.us-act .btn{margin-inline-start:.25rem}
.us-menu{position:fixed;z-index:150;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(24,32,54,.18);padding:.35rem;min-width:230px;display:flex;flex-direction:column}
.us-menu button{background:none;border:0;text-align:start;padding:.6rem .8rem;border-radius:8px;font-weight:700;font-size:.86rem;color:var(--ink)}
.us-menu button:hover,.us-menu button:focus-visible{background:var(--bg);outline:none}
.us-menu__d{color:var(--red)!important}
.us-roles{margin-top:1.2rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem}
.us-roles summary{cursor:pointer;font-weight:800}
.us-roles__h{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.us-roles__h h3{margin:0 0 .2rem;font-size:1rem}
.us-role__act{display:flex;gap:.4rem;margin-top:auto;padding-top:.4rem}
.us-roles__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem;margin-top:.9rem}
.us-role{border:1px solid var(--line);border-radius:12px;padding:.8rem;display:flex;flex-direction:column;gap:.25rem}

/* user form */
.us-form .fld small{font-weight:600}
.us-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem;margin-top:.3rem}
.us-grp{border:1px solid var(--line);border-radius:12px;padding:.5rem .8rem .7rem}
.us-grp legend{font-weight:900;font-size:.88rem;padding:0 .3rem;display:flex;align-items:center;gap:.5rem}
.us-all{background:none;border:1px solid var(--line);border-radius:7px;font-size:.7rem;font-weight:800;padding:.05rem .45rem;color:var(--blue-d)}
.us-perm{display:flex;align-items:flex-start;gap:.45rem;font-size:.84rem;font-weight:600;padding:.28rem 0;cursor:pointer;line-height:1.5}
.us-perm input{margin-top:.25rem;accent-color:#1f8fbf;flex-shrink:0}
.us-perm em{font-style:normal;font-size:.66rem;font-weight:800;background:#fff4e5;color:#92400e;border-radius:6px;padding:0 .35rem;margin-inline-start:auto;flex-shrink:0}
.us-perm:has(input:disabled){opacity:.5;cursor:not-allowed}
.us-link{display:flex;gap:.5rem;margin-top:.8rem}
.us-link .in{font-size:.78rem}

/* security screens */
.sec-tabs{margin-bottom:1rem}
.sec-tabs button{border:0;background:none;padding:.5rem 1rem;border-radius:9px;font-weight:800;font-size:.86rem;color:var(--muted)}
.sec-tabs button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(24,32,54,.08)}
.sec-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem;align-items:start}
.sec-form{max-width:860px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.4rem 0 .6rem}
.sec-h b{font-size:.98rem}
.sec-form>.cmuted,.panel>.cmuted{margin-bottom:.8rem;line-height:1.8}
.sec-presets{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:.3rem}
.sec-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.6rem}
.sec-test{display:flex;gap:.5rem;margin-inline-start:auto;flex-wrap:wrap}
.sec-test .in{width:230px}
.sec-sw{display:flex;gap:.7rem;align-items:flex-start;padding:.65rem .2rem;border-bottom:1px solid var(--line);cursor:pointer}
.sec-sw input{width:18px;height:18px;margin-top:.2rem;accent-color:#1f8fbf;flex-shrink:0}
.sec-sw span{display:flex;flex-direction:column;gap:.1rem}
.nt-who{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.2rem 1.9rem .8rem 0;border-bottom:1px solid var(--line);font-size:.86rem}
.nt-chip{display:inline-flex;gap:.3rem;align-items:center;padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:#fff}
.nt-chip--on{background:#eef7fb;border-color:#bfe0ee;cursor:default}
.nt-chip input{accent-color:#1f8fbf}
.sec-sw:has(input:disabled){opacity:.55;cursor:not-allowed}
.sec-num{display:flex;align-items:center;gap:.4rem}
.sec-num .in{width:90px}
.sec-num small{color:var(--muted);font-weight:700;font-size:.78rem;white-space:nowrap}
.sec-facts{margin:1rem 0 .4rem;padding-inline-start:1.2rem;color:#4b5563;font-size:.84rem;line-height:1.9}
.sec-out{list-style:none;display:flex;flex-direction:column}
.sec-out li{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--line)}
.sec-out li>div{flex:1;min-width:0}
.sec-out b{display:block;font-size:.85rem;overflow-wrap:anywhere}
.sec-out small{display:block}
.sec-err{color:var(--red);font-weight:700;font-size:.76rem}
.sec-audit{list-style:none;display:flex;flex-direction:column}
.sec-audit li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:.1rem .8rem;padding:.55rem .3rem;border-bottom:1px solid var(--line);font-size:.86rem}
.sec-audit li small{grid-column:1/-1}
.sec-audit--bad b{color:var(--red)}

@media (max-width:900px){
  .sec-grid{grid-template-columns:1fr}
  .us-search{max-width:none;margin-inline-start:0;flex:1 1 100%}
  .sec-test{margin-inline-start:0}
  .sec-test .in{width:100%}
}
@media (max-width:600px){
  .us-tbl thead{display:none}
  .us-tbl tr{display:grid;grid-template-columns:1fr auto;gap:.3rem .6rem;padding:.8rem;border-bottom:1px solid var(--line)}
  .us-tbl td{border:0;padding:0}
  .us-tbl td:first-child{grid-column:1/-1}
  .us-act{grid-column:1/-1;text-align:start}
  .sec-audit li{grid-template-columns:1fr}
}
.api-line{display:flex;gap:.5rem;align-items:center;margin-top:.4rem}
.api-line .in{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
.api-fresh{display:flex;flex-direction:column;gap:.2rem}
.api-create{align-self:flex-end}

.us-mfa{display:block;margin-top:.2rem;font-size:.72rem;color:#b54708}
.us-mfa--on{color:#067647}
.ai-mt .ai-mi{width:100%;min-width:12rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
.ai-mt .ai-mc{flex:1;min-width:0}
.ai-mt .ai-mc small{display:block;margin-top:.2rem}
.ai-mt .ai-ma{white-space:nowrap}
.ai-mt .ai-ma .btn+.btn{margin-inline-start:.35rem}
.ai-mt .btn[hidden]{display:none}