/* The account page (2026-10-19): every detail, edit them all at once, the order history, Order again.
   Uses the app's own tokens, so both themes and both languages follow. */
.ac-title { font-size: 22px; margin: 2px 0 8px; overflow-wrap: anywhere; }
.ac-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tag--vip { background: rgba(247, 161, 26, .16); color: var(--accent-ink, #F7A11A); border: 1px solid rgba(247, 161, 26, .45); }
.ac-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ac-acts .btn { flex: 1 1 130px; min-height: 46px; text-align: center; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ac-acts .btn--primary { flex: 2 1 190px; }

.pset__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ac-editbar { display: inline-flex; gap: 8px; }
.ac-mini { min-height: 38px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
@media (max-width: 460px) { .ac-grid .ac-f { padding: 8px 12px; } .ac-f dd { font-size: 14.5px; } }

/* the details, read: label over value, two columns on a roomy screen, one on a phone */
.ac-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ac-f { background: var(--wash); border-radius: var(--r-sm, 10px); padding: 10px 12px; min-width: 0; }
.ac-f dt { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--steel); margin: 0 0 3px; }
.ac-f dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.ac-f dd .muted { font-size: 13px; }
@media (max-width: 460px) { .ac-grid { grid-template-columns: minmax(0, 1fr); } }

/* the details, edited: one field per row, big enough to hit */
.ac-form { display: flex; flex-direction: column; gap: 12px; }
.ac-fld .label { display: block; margin-bottom: 4px; }
.ac-fld .input { width: 100%; }
.ac-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.ac-check input { width: 22px; height: 22px; accent-color: var(--accent, #F7A11A); }
#acErr:not([hidden]) { color: var(--danger, #E5645A); font-weight: 700; }

/* the history: a row opens the order or quotation, its own button orders it again */
.ach-list { display: flex; flex-direction: column; gap: 8px; }
.ach { display: flex; align-items: stretch; gap: 8px; }
.ach__main {
  flex: 1 1 auto; min-width: 0; text-align: start; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); padding: 10px 12px; color: var(--ink);
}
.ach__main:hover { border-color: var(--hairline-strong, var(--line)); }
.ach__k { grid-column: 1; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--accent-ink, var(--steel)); }
.ach__d { grid-column: 2; font-size: 11.5px; color: var(--steel); text-align: end; }
.ach__t { grid-column: 1; font-size: 13.5px; overflow-wrap: anywhere; }
.ach__v { grid-column: 2; font-size: 13.5px; font-weight: 800; text-align: end; white-space: nowrap; }
.ach__s { grid-column: 1 / -1; font-size: 12px; color: var(--steel); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ach__s.is-off { color: var(--danger, #E5645A); }
.ach__re {
  flex: 0 0 auto; width: 76px; cursor: pointer; border-radius: var(--r-sm, 10px); border: 1px solid var(--accent, #F7A11A);
  background: transparent; color: var(--accent-ink, var(--accent, #F7A11A)); font-size: 12.5px; font-weight: 800; line-height: 1.2; padding: 6px;
}
.ach__re:hover { background: rgba(247, 161, 26, .12); }

/* the quotation builder, when it was started from an account */
.qw-from { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: rgba(247, 161, 26, .12); border: 1px solid rgba(247, 161, 26, .4); font-size: 13px; line-height: 1.45; }

/* Log a call (calls teams) */
.cl-out { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-out .chip { min-height: 40px; }

/* A delete button on every row of the Accounts list (it asks before it deletes) */
.row-w { position: relative; }
.row-w > .row { padding-inline-end: 56px; }
.row-del { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--danger, #E5645A); cursor: pointer; }
.row-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-del:hover, .row-del:focus-visible { background: rgba(229, 100, 90, .14); border-color: rgba(229, 100, 90, .4); }

/* Select several accounts: a bar with the count, Select all and Delete; each row shows a tick box */
.acsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border-radius: var(--r-sm, 10px);
  background: var(--wash); border: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.acsel__n { flex: 1 1 auto; font-weight: 800; }
.acsel__b { min-height: 40px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
.acsel__b[disabled] { opacity: .45; cursor: not-allowed; }
.acsel__list { margin: 0 0 8px; padding-inline-start: 18px; max-height: 40vh; overflow: auto; }
.rows.is-selecting .row-w > .row { padding-inline-start: 52px; }
.row-chk { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid var(--steel, #8F98A2); pointer-events: none; z-index: 1; display: grid; place-items: center; }
.row-w.is-picked .row-chk { background: var(--accent, #F7A11A); border-color: var(--accent, #F7A11A); }
.row-w.is-picked .row-chk::after { content: ""; width: 6px; height: 11px; border: solid var(--ink-on-accent, #1A1205); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); }
.row-w.is-picked > .row { border-color: var(--accent, #F7A11A); }
.acsel__b { width: auto; flex: 0 0 auto; margin: 0; }
.acsel__n { min-width: 7ch; }
/* with Select beside Import and Add, the search box takes its own row on a phone */
@media (max-width: 560px) {
  .acct-bar { flex-wrap: wrap; }
  .acct-bar .search { flex: 1 1 100%; }
  .acct-bar .acct-add { flex: 1 1 0; }
}