/* Windmill ID identity pages (/signin, /signup, /profile) — the Windmill
   green shell (var(--brand-color) from style.css), plain Bootstrap 5 forms
   underneath. Works down to phone width. */
.idn { max-width: 720px; margin: 0 auto 2rem; }
/* Night B1 C3 (Paul, 5 Oct): /profile and /account use the page's full container, as the admin does; the sign-in
   family keeps the narrow column. */
.idn.idn--wide { max-width: none; }
.idn-card { background: #fff; border: 1px solid #e4ebda; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(30,42,23,.05), 0 8px 24px rgba(30,42,23,.07); }
.idn h1 { font-size: 1.6rem; margin: 0 0 .75rem; }
.idn h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; padding-top: 1rem; border-top: 1px solid #eef3e5; }
.idn h2:first-of-type { border-top: 0; padding-top: 0; }
.idn-lead { color: #3c4a30; }
.idn-help { display: block; color: #6f7a63; font-size: .85rem; font-weight: 400; }
.idn-field { margin-bottom: 1rem; }
.idn-field label { font-weight: 600; display: block; margin-bottom: .25rem; }
.idn-input { position: relative; display: flex; align-items: center; }
.idn-input input, .idn-input select { flex: 1; width: 100%; border: 1px solid #d4dec4; border-radius: 8px; padding: .55rem 4.6rem .55rem .75rem; font-size: 1rem; min-height: 42px; }
.idn-input select { padding-right: 2.6rem; }
.idn-input input:focus, .idn-input select:focus { outline: 2.5px solid #557f16; outline-offset: 1px; border-color: #84c02a; }
.idn-clear, .idn-eye { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #6f7a63; font-size: 1.15rem; line-height: 1; padding: .35rem; border-radius: 6px; cursor: pointer; }
.idn-clear { right: .35rem; }
.idn-eye { right: 2.2rem; }
.idn-eye.is-on { color: #557f16; }
.idn-clear:hover, .idn-eye:hover { color: #1e2a17; background: #eef3e5; }
.idn-clear:focus-visible, .idn-eye:focus-visible { outline: 2.5px solid #557f16; }
.idn-input input:placeholder-shown + .idn-eye + .idn-clear, .idn-input input[value=""] + .idn-clear { opacity: .6; }
.idn-check { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.idn-check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; }
.idn-error { color: #b23a4b; background: #fbe4e6; border-radius: 8px; padding: .5rem .75rem; margin: .5rem 0; }
.idn-ok { color: #4f7a16; background: #e8f4d6; border-radius: 8px; padding: .5rem .75rem; margin: .5rem 0; }
.idn-links { margin-top: 1rem; font-size: .95rem; }
.idn-panel { background: #f5f8f0; border-radius: 8px; padding: .75rem 1rem; margin-top: .75rem; }
.idn-submit { min-width: 10rem; }
.idn .btn-primary { color: #173300; font-weight: 600; }
.idn-big { font-size: 2rem; font-weight: 700; letter-spacing: 2px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.idn-match.is-ok { color: #4f7a16; }
.idn-match.is-bad { color: #b23a4b; }
/* nav */
.navbar .idn-nav-name { font-weight: 700; }
/* profile */
.idn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .idn-grid { grid-template-columns: 1fr; } .idn-card { padding: 1rem; } }
.idn-saved { font-size: .8rem; color: #4f7a16; margin-left: .5rem; }
.idn-saved.is-err { color: #b23a4b; }
.idn-badge { display: inline-block; background: #e8f4d6; color: #4f7a16; border-radius: 20px; padding: .15rem .6rem; font-size: .8rem; font-weight: 700; }
.idn-badge.test { background: #fff5e0; color: #8a6100; }
.idn-list { list-style: none; padding: 0; margin: 0 0 .75rem; }
.idn-list li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #eef3e5; flex-wrap: wrap; }
.idn-list .btn-link { padding: 0; }
.idn table.idn-log { width: 100%; font-size: .85rem; border-collapse: collapse; }
.idn table.idn-log th, .idn table.idn-log td { padding: .35rem .5rem; border-bottom: 1px solid #eef3e5; text-align: left; vertical-align: top; }
.idn table.idn-log td { user-select: text; }
/* The timestamp stays on ONE line — the date and time were wrapping onto ~3 rows
   and stretching every row. The .idn-scroll wrapper still scrolls horizontally. */
.idn table.idn-log th:first-child, .idn table.idn-log td:first-child { white-space: nowrap; }
.idn .idn-extra.is-bypassed { color: #8a6100; font-weight: 600; }
/* password requirements checklist (WP-Password-Policy) */
.idn-pw-rules { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .75rem; }
@media (max-width: 640px) { .idn-pw-rules { grid-template-columns: 1fr; } }
.idn-pw-rule { display: flex; align-items: baseline; gap: .4rem; font-size: .85rem; color: #6f7a63; }
.idn-pw-rule.is-met { color: #4f7a16; }
.idn-pw-rule.is-missing { color: #8a6100; }
.idn-pw-mark { font-weight: 700; width: 1em; flex: 0 0 1em; text-align: center; }
/* notification groups (Part C) */
.idn-pref-group { margin: .75rem 0 1rem; }
.idn-pref-group h3 { font-size: 1rem; margin: 0 0 .35rem; color: #3c4a30; }
.idn-pref-group .idn-list li { padding: .45rem 0; }
/* access-log filters + pager (Part B) */
.idn-log-filters { display: flex; gap: .5rem .75rem; align-items: flex-end; flex-wrap: wrap; margin: .5rem 0 .75rem; }
.idn-log-q { flex: 1 1 220px; }
.idn-log-q input { padding-right: 2.2rem; }
.idn-log-filter { display: flex; flex-direction: column; font-size: .8rem; font-weight: 600; color: #3c4a30; gap: .15rem; }
.idn-log-filter select, .idn-log-filter input { border: 1px solid #d4dec4; border-radius: 8px; padding: .35rem .5rem; font-size: .9rem; min-height: 38px; background: #fff; }
.idn-log-filter select:focus, .idn-log-filter input:focus { outline: 2.5px solid #557f16; outline-offset: 1px; border-color: #84c02a; }
.idn-pager { display: flex; gap: .35rem; align-items: center; margin: .5rem 0; flex-wrap: wrap; }
.idn-pager .btn { min-width: 2.4rem; }
.idn-pager .idn-log-status { display: inline; margin: 0 .5rem; }
.idn-scroll { overflow-x: auto; }
.idn-inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.idn-danger { border-top: 1px solid #f0c9ce; margin-top: 1.5rem; padding-top: 1rem; }
.idn-danger .btn-outline-danger { border-color: #b23a4b; color: #b23a4b; }
.idn-dialog { position: fixed; inset: 0; background: rgba(30,42,23,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.idn-dialog[hidden] { display: none; }
.idn-dialog .idn-card { max-width: 480px; width: 100%; }
.idn-copy { border: 1px solid #d4dec4; background: #fff; border-radius: 6px; padding: .1rem .5rem; font-size: .8rem; cursor: pointer; }
.idn-check-inline { display: inline-flex; align-items: center; gap: .3rem; margin-right: .5rem; font-size: .9rem; }
/* contact tables (WP-Profile-Refinements Part A — the Trainio reference in the Windmill green) */
.idn-contact-block { margin-bottom: 1.5rem; }
.idn-primary-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .25rem; }
.idn-primary-line strong { min-width: 9rem; }
.idn-primary-line .mono { font-size: .95rem; }
.idn table.idn-contacts { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e4ebda; border-radius: 12px; overflow: hidden; margin: .5rem 0 .75rem; font-size: .95rem; }
.idn table.idn-contacts th { text-align: left; font-weight: 700; padding: .6rem .75rem; background: #f5f8f0; border-bottom: 1px solid #e4ebda; white-space: nowrap; }
.idn table.idn-contacts td { padding: .6rem .75rem; border-bottom: 1px solid #eef3e5; vertical-align: middle; }
.idn table.idn-contacts tr:last-child td { border-bottom: 0; }
.idn table.idn-contacts .idn-cell-email, .idn table.idn-contacts .idn-cell-phone { word-break: break-all; }
.idn-pill { display: inline-block; border: 1px solid #d4dec4; background: #fff; color: #3c4a30; border-radius: 20px; padding: .1rem .6rem; font-size: .8rem; font-weight: 700; }
.idn-primary-badge { border: 1px solid #b9d98a; }
.idn-dash { display: inline-block; color: #6f7a63; padding: 0 .4rem; cursor: help; border-radius: 4px; }
.idn-dash:focus-visible { outline: 2.5px solid #557f16; }
.idn-make-primary { white-space: nowrap; }
/* WhatsApp / Text toggle buttons: outline when off, filled brand green when on (decision §3: green, not the reference's red) */
.idn-toggle { border: 1px solid #d4dec4; background: #fff; color: #3c4a30; border-radius: 20px; padding: .3rem .9rem; font-size: .85rem; font-weight: 700; cursor: pointer; line-height: 1.2; min-width: 5.5rem; transition: background .15s, border-color .15s, color .15s; }
.idn-toggle:hover { border-color: #84c02a; color: #557f16; }
.idn-toggle.is-on, .idn-toggle[aria-pressed="true"] { background: #84c02a; border-color: #6ea31f; color: #173300; }
.idn-toggle:focus-visible { outline: 2.5px solid #557f16; outline-offset: 2px; }
.idn-toggle:disabled { opacity: .6; cursor: default; }
/* add rows: input(s) + optional label + a gated Add button that says why it is disabled */
.idn-add label { font-weight: 600; display: block; margin-bottom: .25rem; }
.idn-add-row { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.idn-add-main { flex: 1 1 220px; }
.idn-add-cc { flex: 0 0 6rem; }
.idn-add-cc input { padding-right: .75rem; }
.idn-add-label { flex: 0 1 160px; }
.idn-add-btn { white-space: normal; text-align: center; flex: 1 1 260px; border-radius: 8px; min-height: 42px; }
.idn-add-btn:disabled { color: #6f7a63; background: #fff; border-color: #d4dec4; opacity: 1; cursor: not-allowed; }
.idn-add-btn:not(:disabled) { border-color: #84c02a; color: #557f16; font-weight: 700; }
@media (max-width: 640px) { .idn-add-btn { flex-basis: 100%; } .idn-primary-line strong { min-width: 0; } }

/* B1.5 (UAT C1): the private / shared choice — two required options, no default. */
.idn-device { border: 1px solid var(--wid-border, #e4ebda); border-radius: 10px; padding: .6rem .8rem .7rem; margin: 0 0 1rem; }
.idn-device legend { font-size: .95rem; font-weight: 600; padding: 0 .3rem; margin: 0; width: auto; float: none; }
.idn-device .idn-req { font-weight: 400; color: var(--wid-muted, #6f7a63); font-size: .85rem; }
.idn-device__opt { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; padding: .35rem 0; cursor: pointer; }
.idn-device__opt input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; }
.idn-device__opt .idn-help { display: block; }