/* =============================================================================
   JES CRM · pages/accounts.css — the look that only these pages have: accounts, account_contacts.
   Owner: the page builder "accounts" of the vtiger-look wave (docs/vtiger-look/02-ui-contract.md §a.5, §j.2).
   Every class starts with pg-accounts- ; every value comes from tokens.css (var(--…)).
   ============================================================================= */

/* ---------- the person cells of "Organization Details" (pages/accounts/contact-cells.js) ---------- */

/* "Contact 1 of 3 ›" under the name of the contact shown */
.pg-accounts-switch { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2);
  font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
.pg-accounts-switch__step { min-height: 0; padding: 0 var(--space-1); font-size: var(--font-size-btn); line-height: 1; }
.pg-accounts-contact__title { color: var(--color-text-muted); }
.pg-accounts-contact__edit { margin-left: var(--space-2); padding: 0; min-height: 0; }
.pg-accounts-channel { color: var(--color-text-muted); }

/* "2 more contacts (hidden)" under the block */
.pg-accounts-hidden { margin: 0; padding: var(--space-2) 0; font-size: var(--font-size-md); color: var(--color-text-muted); }

/* create form: the contact's inputs inside a cell (Salutation in front of the name, as vtiger's Contacts) */
.pg-accounts-inputs { display: flex; gap: var(--space-2); align-items: flex-start; }
/* the Salutation select keeps the width of its longest text ("Select an Option"): the form's rule lets a select
   shrink to nothing (flex 0 1 18rem, min-width 0) */
.pg-accounts-salutation { flex: 0 0 auto; }
.block--edit .block__grid .pg-accounts-salutation .field__control > select { flex: 0 0 auto; width: auto; min-width: max-content; }
.pg-accounts-name { flex: 1 1 auto; min-width: 0; }

/* forms: CPF Submission No, one input per number with its Note beside it (pages/accounts/form.js) */
.pg-accounts-cpf__row { display: flex; gap: var(--space-2); align-items: flex-start; }
.pg-accounts-cpf__row + .pg-accounts-cpf__row { margin-top: var(--space-1); }
.pg-accounts-cpf__number { flex: 1 1 auto; min-width: 0; }
.pg-accounts-cpf__note { flex: 0 1 8rem; min-width: 0; }
.block--edit .block__grid .pg-accounts-cpf__note .field__control > input:not([type="checkbox"]) { flex: 1 1 auto; }
.pg-accounts-cpf__add { padding: 0; min-height: 0; margin-top: var(--space-1); }
.pg-accounts-none { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1);
  font-size: var(--font-size-md); color: var(--color-text-muted); }
.pg-accounts-input > .field { display: block; padding: 0; }

/* ---------- Organization Hierarchy (dialog) ---------- */
.pg-accounts-hierarchy ul { margin: 0; padding-left: var(--space-4); }

@media (max-width: 480px) {
  .pg-accounts-inputs { flex-direction: column; }
  .pg-accounts-salutation { flex-basis: auto; width: 100%; }
  .pg-accounts-cpf__row { flex-direction: column; }
  .pg-accounts-cpf__note { flex-basis: auto; width: 100%; }
}