/* kayttajat — who can use the CRM. One table whose cells read as text and save on change; phone: two-line cards.
   Tokens and components come from ../crm.css; this file only lays the view out. */

/* the table: one line per person — name, e-mail, three choices, the menu */
.kt-table .table{table-layout:fixed}
.kt-table .kt-c-role{width:176px}
.kt-table .kt-c-firm{width:148px}
.kt-table .kt-c-phone{width:188px}
.kt-table .kt-c-more{width:60px}
.kt-table .table td{height:58px; padding-top:8px; padding-bottom:8px}
.kt-table td.kt-c-more{padding-left:0; padding-right:12px; text-align:right}
.kt-table td.kt-c-more .btn-icon{margin-left:auto}
.kt-table tbody td{transition:background-color .15s ease-out}
.kt-table tbody tr:hover td{background:color-mix(in srgb, var(--surface) 55%, var(--bg))}
.kt-who{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.kt-mail{display:none; max-width:100%; font-size:13px; line-height:1.4; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kt-mail-col{display:block; font-size:14px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* a field that reads as text: no box until a pointer or the keyboard reaches it; the text stays on the column's line */
.kt-edit{height:34px; width:calc(100% + 22px); max-width:calc(100% + 22px); margin:0 -11px; padding:0 10px; border-color:transparent; background-color:transparent; transition:border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out, opacity .15s ease-out}
.kt-edit:hover:not(:disabled):not(:focus){border-color:var(--line-2); background-color:var(--surface)}
.kt-edit::placeholder{color:var(--ink-3)}
.kt-edit.is-saving{opacity:.5}
.kt-edit.is-empty{color:var(--ink-3)}
.kt-name{font-size:15px; font-weight:600; width:min(300px, calc(100% + 22px))}
@supports (field-sizing:content){ .kt-name{field-sizing:content; width:auto; min-width:12ch} }
.kt-phone{font-variant-numeric:tabular-nums}
/* a choice shows its chevron only when its row is pointed at or it has focus: at rest the table is plain text */
select.kt-edit{padding-right:30px; background-position:right 9px center; background-size:0 0}
.kt-table tr:hover select.kt-edit:not(:disabled),select.kt-edit:focus{background-size:14px 14px}
/* one's own role is shown, not offered */
select.kt-edit:disabled{background-image:none; background-color:transparent; border-color:transparent; color:var(--ink); cursor:default; opacity:1}

/* narrower screens: the e-mail goes under the name */
@media (max-width:1099px){
  .kt-table .kt-c-mail{display:none}
  .kt-mail{display:block}
  .kt-table .table td{height:66px}
  .kt-name{height:30px}
}

/* the quiet line about notices, under the people it concerns */
.kt-notice{margin-top:16px; max-width:48em; font-size:13px; line-height:1.45; color:var(--ink-3)}

/* phone: two-line cards (name and team, then e-mail and phone) */
.kt-card{grid-template-columns:minmax(0,1fr); min-height:64px}
.kt-card .row-lines{padding:11px 0}

/* add dialog: role and firm side by side while they fit */
.kt-pair{display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px 24px}
.kt-pair > .field{flex:none; max-width:100%}

/* the one-time password */
.kt-secret-who{font-size:14px; line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.kt-secret{display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 8px 8px 16px; border-radius:var(--r-s); background:var(--sunk)}
.kt-secret-pw{flex:1 1 auto; min-width:0; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:15px; line-height:1.4; letter-spacing:.04em; color:var(--ink); overflow-wrap:anywhere; user-select:all}
.kt-secret-note{font-size:13px; line-height:1.45; color:var(--ink-3)}

/* a test notice: one line per channel; a solid dot = it went out */
.kt-result{display:flex; flex-direction:column; gap:8px}
.kt-result > li{display:flex; align-items:baseline; gap:10px; font-size:14px; line-height:1.45; color:var(--ink)}
.kt-result > li::before{content:''; flex:none; width:6px; height:6px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--ink-4); transform:translateY(-1px)}
.kt-result > li.is-sent::before{background:var(--ink); box-shadow:none}
.kt-result > li.is-wait{align-items:center}
.kt-result > li.is-wait > .skel{flex:none}

/* phone edit dialog: the read-only e-mail and the rare acts as quiet words */
.kt-fact{font-size:14px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.kt-acts{display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:8px 0 0 -12px}

@media (max-width:1023px){
  .kt-table .kt-c-role{width:150px}
  .kt-table .kt-c-firm{width:124px}
  .kt-table .kt-c-phone{width:168px}
}