/*
  The company's Admins page and its drawers (class.company_admins_page.php,
  company_admins_page.js). The list rows are the site's settings_row format; what is here is the
  person's header, the pills, the tool checklist with its three-way control, and the locked page
  a tool outside an admin's access shows (class.tools.php locked_page).
*/

.company_admins_page { padding-bottom: 30px; }

.cad_note { color: #55676a; font-size: 13px; line-height: 1.5; margin: 14px 4px 0; }

.cad_mark { background: #e6f1f1 !important; color: #0f7777 !important; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }

.cad_row_access { color: #0f7777 !important; font-weight: 600; }

.cad_pill { background: #eef3f3; color: #55676a; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; align-self: center; }
.cad_pill_pending { background: #fff4e5; color: #9a5b00; }

/* ---------------------------------------------------------------- one admin */

.cad_person { padding-bottom: 20px; }

.cad_top { background: white; border: 1px solid #d3e2e3; border-radius: 12px; padding: 22px 18px; text-align: center; }
.cad_avatar { width: 54px; height: 54px; border-radius: 50%; background: #e6f1f1; color: #0f7777; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.cad_top_name { font-size: 18px; font-weight: 800; color: #0F2044; }
.cad_top_email { color: #55676a; font-size: 13.5px; margin-top: 2px; word-break: break-all; }
.cad_state { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #1f7a45; }
.cad_state_pending { color: #9a5b00; }

/* ---------------------------------------------------------------- the checklist */

.cad_tool_group { background: white; border: 1px solid #d3e2e3; border-radius: 12px; overflow: hidden; }

.cad_tool_row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid #eef3f3; }
.cad_tool_row:first-child { border-top: 0; }

.cad_tool_text { flex: 1; min-width: 0; }
.cad_tool_name { font-size: 14.5px; font-weight: 700; color: #16211f; }
.cad_tool_sub { font-size: 12px; color: #6b7280; line-height: 1.35; margin-top: 1px; }

.cad_seg { display: flex; flex: none; background: #eef3f3; border-radius: 8px; padding: 2px; }
.cad_seg_btn { border: 0; background: transparent; color: #55676a; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 6px; line-height: 1.2; }
.cad_seg_btn:hover { color: #0f7777; }
.cad_seg_btn.cad_seg_on { background: white; color: #0f7777; box-shadow: 0 1px 2px rgba(15, 32, 68, .12); }

@media (max-width: 400px)
{
  .cad_tool_row { flex-wrap: wrap; }
  .cad_seg { width: 100%; }
  .cad_seg_btn { flex: 1; }
}

/* ---------------------------------------------------------------- a tool they do not have */

.tls_locked { background: white; border: 1px solid #d3e2e3; border-radius: 12px; padding: 40px 22px; text-align: center; margin-top: 14px; }
.tls_locked_icon { font-size: 30px; color: #0f7777; }
.tls_locked_title { font-size: 18px; font-weight: 800; color: #0F2044; margin-top: 8px; }
.tls_locked_text { color: #55676a; font-size: 14px; max-width: 420px; margin: 8px auto 0; line-height: 1.45; }