/* modals, the customer modal, Manage Users, the View-as banner. Part of the stylesheet split by page; public/css/README.md says why. */
/* ── Modals ───────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.modal-box {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
  padding: 32px;
  width: 420px;
  max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-box h2 { font-size: 18px; font-weight: 700; }
.modal-box h3 { font-size: 14px; font-weight: 700; margin-top: 4px; }

.modal-box form { display: flex; flex-direction: column; gap: 12px; }

.modal-box label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.modal-box input[type=text],
.modal-box input[type=password],
.modal-box select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}

.modal-box input:focus,
.modal-box select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,79,137,.15);
}

.modal-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; }
.checkbox-label input { width: auto; }

/* Multi-select attribute group (e.g. Product Line) in the customer modal. */
/* Customer modal: logo upload. The picker is a <label> wrapping a hidden file
   input, so undo .modal-box label's column layout and caps. */
.cust-logo-field { display: flex; align-items: center; gap: 8px; }
.cust-logo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: 4px;
}
.cust-logo-preview {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px;
  background: var(--logo-bg);
}
.modal-box label.cust-logo-pick {
  display: inline-block;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
}

.checkbox-group {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px 10px;
}
.checkbox-group legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 4px;
}
.checkbox-group > div { display: flex; flex-direction: column; gap: 6px; }
/* Product names keep their own casing — don't uppercase them like field labels. */
.checkbox-group .checkbox-label {
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Manage Users: a row per person, a column per page. One column template is
   shared by the heading row, the add form and every user row, so a page's
   checkboxes sit in one column all the way down. The page cells are a grid
   of their own, sized by --users-pages (set from the page catalogue). */
.modal-box--users {
  width: min(1060px, calc(100vw - 32px));
  max-width: none;
  --users-col: 66px;
}
.users-head h2 { margin: 0; }
.users-summary { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.users-filter {
  width: 200px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px;
  background: var(--surface); color: var(--text);
}
.users-body { padding-top: 0; gap: 0; }
.users-grid { --users-pages: 9; font-size: 13px; }
.users-grid-row,
.users-grid-head {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) calc(var(--users-pages) * var(--users-col)) 140px;
  align-items: center;
  column-gap: 12px;
}
.user-cell-pages {
  display: grid;
  grid-template-columns: repeat(var(--users-pages), var(--users-col));
  align-items: center;
  justify-items: center;
}
.user-cell-name { min-width: 0; }
.user-cell-actions { display: flex; gap: 6px; justify-content: flex-end; }
.user-cell-actions .btn-ghost { padding: 4px 10px; font-size: 12px; }

/* The headings stay at the top of the scrolling body. */
.users-grid-head {
  position: sticky; top: 0; z-index: 2;
  align-items: end;
  padding: 12px 10px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.users-col-head { text-align: center; line-height: 1.25; padding: 0 2px; }

.users-grid-row { padding: 8px 10px; border-bottom: 1px solid var(--border-light); }
/* The filter hides rows with the hidden attribute; display: grid above would
   otherwise win over the browser's own [hidden] rule and show them anyway. */
.users-grid-row[hidden] { display: none; }
#users-list .user-row:hover { background: var(--bg); }
.user-row .user-name {
  max-width: none; font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 2px; font-size: 11px; color: var(--text-muted);
}
.user-all-pages {
  grid-column: 1 / -1; justify-self: stretch; text-align: center;
  padding: 3px 0; border-radius: 6px;
  font-size: 12px; color: var(--text-muted);
  background: var(--bg); border: 1px dashed var(--border);
}
#users-list .user-row--admin:hover .user-all-pages { background: var(--surface); }
.user-remove { color: var(--red-fg); }
.user-remove:hover { background: var(--red-bg); border-color: var(--red-border); }
.users-empty { padding: 16px 10px; color: var(--text-muted); font-size: 13px; }

/* .modal-box label stacks and upper-cases a form label; these are inline
   checkboxes, so undo that. The page's name shows only on a narrow screen,
   where there are no column headings. */
.modal-box .user-page {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 400; color: var(--text);
  text-transform: none; letter-spacing: normal; cursor: pointer;
  padding: 4px;
}
.modal-box .user-page input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.user-page input:disabled { cursor: default; }
.user-page-label { display: none; }

/* The add form is the grid's first row, set apart by a tint. */
.modal-box form.user-add {
  display: grid; gap: 0 12px;
  margin: 8px 0 4px;
  border: 1px dashed var(--border); border-radius: 6px;
  background: var(--bg);
  align-items: start;
}
.user-add .user-cell-pages, .user-add .user-cell-actions { padding-top: 2px; }
.user-add-who { display: contents; }
.user-add-who textarea { grid-column: 1; grid-row: 1; }
.user-add .user-add-skipped { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
.modal-box .user-add textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  resize: vertical;
  max-height: 160px;
  background: var(--surface);
  color: var(--text);
}
.modal-box .user-add textarea:focus { border-color: var(--accent); }
.user-add .btn-primary { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

.users-actions { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.users-help { font-size: 12px; color: var(--text-muted); max-width: 760px; }
.users-help summary { cursor: pointer; color: var(--accent-text); padding: 6px 0; }
.users-help ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }

/* Narrow: no columns to line up with, so each row stacks and its pages are a
   labelled two-column list. */
@media (max-width: 1100px) {
  .users-grid-head { display: none; }
  .users-grid-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .users-grid-row .user-cell-pages {
    grid-column: 1 / -1; grid-row: 2;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    justify-items: start;
  }
  .user-page-label { display: inline; }
  .user-add .user-add-skipped { grid-row: 3; }
  .users-filter { width: 150px; }
  .users-actions { flex-direction: column; align-items: stretch; }
  .users-actions #users-cancel { align-self: flex-end; }
}

.no-access {
  max-width: 520px; margin: 80px auto; padding: 0 16px; text-align: center;
  color: var(--text-muted);
}
.no-access h2 { color: var(--text); margin-bottom: 8px; }

/* Viewing the app as another user. Sits under the sticky header and stays
   with it, so however far the page scrolls the strip that says "this is not
   your access" is in view. */
.impersonation-banner {
  position: sticky;
  top: var(--header-h);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 20px;
  background: var(--amber-bg);
  color: var(--amber-fg);
  border-bottom: 1px solid var(--amber-border);
  font-size: 13px;
}
.impersonation-banner strong { color: var(--amber-fg); }
.impersonation-stop {
  padding: 4px 12px;
  background: var(--surface);
  color: var(--amber-fg);
  border: 1px solid var(--amber-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.impersonation-stop:hover { background: var(--amber-bg-strong); }

.user-add-skipped {
  font-size: 12px;
  color: var(--amber-fg);
  background: var(--amber-bg);
  border-radius: 6px;
  padding: 6px 10px;
}
.user-add-skipped ul { margin: 4px 0 0; padding-left: 18px; }

/* Phone: a tighter modal. Before the three-band modal below, whose
   .contract-box padding must still win. */
@media (max-width: 600px) {
  .modal-box { padding: 20px; gap: 12px; }
}

/* ── Wide modal ──────────────────────────────────────────── */
.modal-box--wide { width: 980px; max-height: 92vh; overflow-y: auto; }

/* ── Modal head ──────────────────────────────────────────── */
.contract-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

/* ── Contract modal: fixed head, scrolling body, pinned actions ──────────
   The form was one long scroll with Save at the far end, so saving meant
   scrolling past every field to reach the button — and there was no way to
   dismiss the modal from the top at all. Three bands now: the title and the
   close control stay put, the middle scrolls, and the actions sit on the
   bottom edge where they can always be reached.

   Padding moves off .modal-box and onto the bands, so the divider above the
   actions runs the full width of the panel rather than stopping short. */
.contract-box {
  padding: 0;
  gap: 0;
  overflow: hidden;           /* .modal-box--wide scrolls; here the body does */
  max-height: 92vh;
}
.contract-box .contract-modal-head {
  flex: none;
  align-items: flex-start;
  padding: 26px 32px 14px;
}
.contract-modal-head-actions { display: flex; align-items: center; gap: 10px; }
.contract-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 32px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contract-box .contract-modal-actions {
  flex: none;
  margin: 0;
  padding: 14px 32px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* The close control. A real button, not a glyph in a span: it takes focus,
   answers Enter and Space, and tells a screen reader what it does. */
.modal-x {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.modal-x:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
.modal-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .contract-box .contract-modal-head { padding: 18px 18px 10px; }
  .contract-modal-body { padding: 0 18px 14px; }
  .contract-box .contract-modal-actions { padding: 12px 18px; }
}