/*
 * wok - 24.9.26 - Web/Passkey: PASSKEY LOGON - the "Sign in with passkey" button on the logon page and the passkey
 * manager of the user menu (passkeys.ts). Colored by the design tokens (design-tokens.css), so both read in light
 * and dark mode. The manager is a small centered dialog above a backdrop; on phones it fills the width.
 */

/* ================= logon page ================= */

/* wok - 29.9.26 - Web: the panel is also the busy host of the button (modern-ui.css .td-busy-host) - keep its own, smaller top margin */
.login-controls > .passkey-login {
   margin-top: 10px;
}

.passkey-login .control-hiddenfield {
   display: none;
}

.login-controls .passkey-button {
   box-sizing: border-box;
   width: 100%;
   min-height: 46px;
   padding: 11px 18px;
   border: 1px solid var(--td-brand, #d92d32);
   border-radius: var(--td-radius-md, 10px);
   background: var(--td-surface, #fff);
   color: var(--td-brand, #d92d32);
   font: 600 15px/1.4 Inter, "Segoe UI", sans-serif;
   cursor: pointer;
   transition: background .15s, color .15s, transform .08s;
}

.login-controls .passkey-button:hover {
   background: var(--td-brand, #d92d32);
   color: #fff;
   transform: translateY(-1px);
}

.login-controls .passkey-button:active {
   transform: translateY(0);
}

.login-controls .passkey-button:disabled,
.login-controls .passkey-button:disabled:hover {
   background: var(--td-surface, #fff);
   color: var(--td-brand, #d92d32);
   opacity: .6;
   cursor: default;
   transform: none;
}

/* wok - 29.9.26 - Web: the busy spinner (modern-ui.css, td-busy) in the brand color - the passkey button is white */
.login-controls > .passkey-login.td-busy::after {
   border-color: rgba(217, 45, 50, .25);
   border-top-color: var(--td-brand, #d92d32);
}

/* ================= manager (Start.aspx) ================= */

.td-passkeys-backdrop {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 489;
   background: rgba(16, 24, 40, .35);
}

.td-passkeys {
   display: none;
   position: fixed;
   left: 50%;
   top: 50%;
   z-index: 490;
   width: min(520px, calc(100vw - 32px));
   max-height: min(80vh, 720px);
   transform: translate(-50%, -50%);
   box-sizing: border-box;
   overflow: auto;
   padding: 0;
   font-family: var(--td-font, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
   font-size: 14px;
   line-height: 1.4;
   color: var(--td-ink, #172033);
   background: var(--td-surface, #fff);
   border: 1px solid var(--td-line, #dfe3ea);
   border-radius: var(--td-radius-lg, 16px);
   box-shadow: var(--td-shadow-md, 0 12px 32px rgba(16, 24, 40, .12));
}

.td-passkeys-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 18px 10px;
   border-bottom: 1px solid var(--td-line, #dfe3ea);
}

.td-passkeys-title {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
}

.td-passkeys-close {
   width: 32px;
   height: 32px;
   border: none;
   border-radius: var(--td-radius-sm, 6px);
   background: transparent;
   color: var(--td-muted, #667085);
   font-size: 22px;
   line-height: 1;
   cursor: pointer;
}

.td-passkeys-close:hover {
   background: var(--td-hover, #f2f4f7);
   color: var(--td-ink, #172033);
}

.td-passkeys-hint {
   margin: 0;
   padding: 12px 18px 0;
   color: var(--td-muted, #667085);
   font-size: 13px;
}

.td-passkeys-password {
   display: none;
   padding: 12px 18px 0;
}

.td-passkeys-password label {
   display: block;
   margin-bottom: 4px;
   font-size: 13px;
   font-weight: 600;
}

.td-passkeys-password input {
   box-sizing: border-box;
   width: 100%;
   padding: 8px 10px;
   border: 1px solid var(--td-line, #dfe3ea);
   border-radius: var(--td-radius-sm, 6px);
   background: var(--td-surface, #fff);
   color: var(--td-ink, #172033);
   font: inherit;
}

.td-passkeys-list {
   margin: 0;
   padding: 8px 18px;
   list-style: none;
}

.td-passkeys-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid var(--td-line, #dfe3ea);
}

.td-passkeys-item:last-child {
   border-bottom: none;
}

.td-passkeys-item-text {
   flex: 1 1 auto;
   min-width: 0;
}

.td-passkeys-item-name {
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.td-passkeys-item-meta {
   color: var(--td-muted, #667085);
   font-size: 12px;
}

.td-passkeys-empty {
   padding: 14px 0;
   color: var(--td-muted, #667085);
}

.td-passkeys-footer {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 18px 16px;
   border-top: 1px solid var(--td-line, #dfe3ea);
}

.td-passkeys-add,
.td-passkeys-delete {
   flex: 0 0 auto;
   padding: 8px 14px;
   border: 1px solid var(--td-brand, #d92d32);
   border-radius: var(--td-radius-md, 10px);
   background: var(--td-brand, #d92d32);
   color: #fff;
   font: 600 13px/1.3 inherit;
   font-family: inherit;
   cursor: pointer;
}

.td-passkeys-add:hover {
   background: var(--td-brand-dark, #b7262a);
   border-color: var(--td-brand-dark, #b7262a);
}

.td-passkeys-delete {
   background: transparent;
   color: var(--td-brand, #d92d32);
   padding: 6px 10px;
   font-weight: 500;
}

.td-passkeys-delete:hover {
   background: var(--td-err-bg, #fdecec);
}

.td-passkeys-status {
   flex: 1 1 auto;
   min-width: 0;
   color: var(--td-ok, #1a7f37);
   font-size: 13px;
}

.td-passkeys-status-error {
   color: var(--td-err, #d92d32);
}

@media (max-width: 767px) {
   .td-passkeys {
      width: calc(100vw - 16px);
      max-height: calc(100vh - 16px);
   }
}