/* ============================================================================
   account.css — the account panel behind the header icon, and the role grid
   inside it.
   ========================================================================= */

/* --- the icon beside Logout ---------------------------------------------- */

.header-icon-btn {
  padding-inline: 10px;
  line-height: 0;
}

/* --- the dialog ----------------------------------------------------------- */

/* Wide, because the role grid is a table of ticks and a narrow one makes
   every column a guess. Tall, because the user list is as long as the
   company. Both give way to the viewport on a phone. */
.account-dialog {
  width: min(96vw, 900px);
  max-height: 90vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.account-dialog::backdrop {
  background: rgba(16, 32, 58, 0.6);
}

/* The dialog is a flex column whose middle scrolls. Both of these are flex
   items, and a flex item shrinks by default — with a long user list the
   header and the tab strip were being squeezed until their own text was
   clipped. They keep their height; only the body gives. */
.account-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.account-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}

.account-dialog .tab-strip {
  flex: 0 0 auto;
  padding-inline: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* Three tabs in Burmese are wider than a phone; they scroll sideways
     rather than wrapping into a second row that shifts the panel down. */
  overflow-x: auto;
}

/* The one part that scrolls. Header and tabs stay put, so a long user list
   never leaves the reader without a way to close the dialog. */
.account-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 22px;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* --- the role grid -------------------------------------------------------- */

.role-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.role-row {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Admin is shown, not offered. Its row is flat and grey so it reads as a
   statement about how the app works rather than a control someone failed to
   find the checkboxes for. */
.role-row--admin {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-alt);
}

.role-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.role-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.role-count {
  font-size: 12px;
  color: var(--ink-soft);
}

.role-admin-note {
  font-size: 13px;
  color: var(--ink-soft);
}

.role-row-head .btn { margin-left: auto; }

.role-caps {
  display: grid;
  /* As many columns as the box it sits in has room for, not the screen.
     Columns chosen by the window's width put four of them into the account
     panel, which is narrow on a wide screen, and left each label twenty
     pixels — too little for one Burmese letter. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 12px;
}

.role-cap-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.role-cap-page {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A whole-row target rather than a 13px box: this gets used on a phone, and
   a checkbox alone is the smallest thing on the screen. */
.role-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.role-cap:hover { background: var(--surface-alt); }

.role-cap input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* --- an entry past its window --------------------------------------------- */

.fin-locked {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink-faint);
  background: var(--surface-alt);
  border-radius: 999px;
  white-space: nowrap;
}

/* --- role pills grow beyond the original three ---------------------------- */

.role-pill--finance-checker,
.role-pill--purchase-checker {
  color: var(--accent-deep);
  background: var(--accent-soft);
}

/* --- the recorded password in the user list (Admin only) ------------------ */
.user-pw { display: inline-flex; align-items: center; gap: 6px; min-width: 130px; }
.user-pw-value { font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.user-pw--none { font-size: 12px; color: var(--ink-faint); }
.user-pw-toggle {
  position: static;
  min-width: 36px;
  min-height: 36px;
  padding: 2px 4px;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 620px) { .user-pw { min-width: 0; } }

/* The password just set, shown once. Large and spaced so it
   can be read out over the phone without an l being taken for a 1. */
/* A small dialog with a form in it (password reset, Lark report). The
   paper dialog is built for a head and a scrolling body of its own; these
   put their content straight in, so the padding lives here. */
.form-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
  padding: 18px 18px 16px;
}
.form-dialog .field-input { width: 100%; box-sizing: border-box; }
.form-dialog .editor-actions { flex-wrap: wrap; }

.user-temp-pw {
  display: block;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--ink);
  user-select: all;
  overflow-wrap: anywhere;
}

.user-reset-steps { margin: 8px 0 12px; padding-left: 20px; line-height: 1.6; }
.user-reset-steps li + li { margin-top: 8px; }
.user-reset-email { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }


/* And for the role matrix, whose columns are capability names. */
.role-grid > *,
.role-cap { min-width: 0; }

/* A capability is a tick and a label; the label is the part that wraps. */
.role-cap { display: flex; align-items: flex-start; gap: 8px; }
.role-cap > input { flex: 0 0 auto; }
.role-cap > span { min-width: 0; overflow-wrap: anywhere; }
.role-cap-group > * { min-width: 0; }

/* The role matrix is grids inside grids; every level has to be allowed to
   shrink or the widest capability name decides the width of the page. */
.role-card,
.role-card > *,
.role-cap-group,
.role-cap-group > *,
.role-caps,
.role-caps > * { min-width: 0; }