/* Interna administracija (R3). Tokens only: no hex here. */

/* The company list is a full-height column, so the internal main has no
   padding of its own on this screen; the flash keeps one. */
.page-admin .int-main { padding: 0; }
.page-admin .alert { margin: var(--space-3) var(--space-5) 0; }
.page-admin-page .int-main { padding: 28px 40px; }

/* ---- company list ---- */
.admin-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.admin-search .input { min-width: 0; }
.admin-count { font: var(--text-label); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.02em; padding: 0 14px var(--space-2); }
.admin-companies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.company-meta { font: var(--text-caption); color: var(--ink-muted); }
.admin-none { font: var(--text-body-small); color: var(--ink-muted); padding: var(--space-2) 0; }

/* ---- detail ---- */
/* A card is a flex item: without this it grows to its widest table and pushes
   the whole page sideways on a phone. The table scrolls, the card does not. */
.admin-cards > .card { min-width: 0; }
.admin-cards > .admin-wide { flex: 1 1 100%; }
.admin-subtitle { margin-top: var(--space-4); }
.admin-form { margin-top: var(--space-3); }
.admin-form + .admin-form { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.admin-form .field { margin-bottom: var(--space-2); }
.admin-inline { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 var(--space-2) 4px 0; }
.admin-inline .select { width: auto; }
.select-sm { padding: 4px 26px 4px 8px; font-size: 13px; }
/* The staff twin of .firm-cat: a 13x13 box whose label was the only other
   target for the same action, and that label was 18 px tall. */
.admin-check { display: inline-flex; align-items: center; min-height: 24px; gap: 6px; margin: 0 var(--space-3) var(--space-2) 0; font: var(--text-body-small); }
.admin-check label { display: inline-flex; align-items: center; min-height: 24px; }
/* Opening a company: folded away by default, because the list beside it is
   what this column is for and a form nobody is filling in should not push
   every company below the fold. */
.admin-new { margin-bottom: var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-200); }
.admin-new > summary { padding: var(--space-2) var(--space-3); cursor: pointer;
  font: var(--text-body-small); font-weight: 600; }
.admin-new-form { padding: 0 var(--space-3) var(--space-3); }
.admin-new-form .field { margin-bottom: var(--space-2); }
.admin-row { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.admin-row .field { flex: 1 1 150px; }
.admin-two { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.admin-two > .admin-form { flex: 1 1 260px; border-top: 0; padding-top: 0; }
.admin-sub { display: block; font: var(--text-caption); color: var(--ink-muted); margin-top: 2px; }

/* The shared data table, tightened for a card and freed of the 640 px
   minimum components.css gives list tables under 1024 px. */
table.admin-table { min-width: 0; font-size: 13px; margin-top: var(--space-2); }
table.admin-table th { padding: 0 var(--space-3) 6px 0; }
table.admin-table td { padding: 8px var(--space-3) 8px 0; vertical-align: top; }
table.admin-table th:last-child, table.admin-table td:last-child { padding-right: 0; }
table.admin-table tbody tr:hover { background: transparent; }
table.admin-table form { display: inline-block; margin: 0 0 4px 0; }
/* The first cell is .c-title so the phone card has a heading; the 220 px
   floor components.css gives that class on a list table would push these
   narrow admin tables into a sideways scroll. */
table.admin-table td.c-title { min-width: 0; }

@media (max-width: 1023px) {
  .page-admin .alert { margin: var(--space-3) var(--space-4) 0; }
  table.admin-table { min-width: 0; }
  /* One column: the list of firms sits above the firm that was clicked.
     At 16 accounts that was 1.491 px, 1,8 phone screens of scrolling
     between the click and its answer, and the list does not page. The
     search and the count stay where they are; only the list itself gets a
     window of its own. */
  .admin-companies { max-height: 40vh; overflow-y: auto; }
}
@media (max-width: 719px) {
  /* Card mode: the row is the card, so the scroller has nothing left to
     scroll and its clip would only cut the cards off. Every table on these
     screens used to stay a table on a phone and hide up to 47 % of itself
     behind a scrollbar macOS does not draw. */
  .admin-wrap { overflow: visible; }
  .page-admin-page .int-main { padding: var(--space-4) var(--space-3); }
  .page-admin .alert { margin: var(--space-3) var(--space-3) 0; }
  .admin-detail { padding: var(--space-3); }
  .admin-cards { gap: var(--space-3); }
  .admin-two { gap: var(--space-3); }
}

/* Every table on this screen sits in its own scroller, so a long company
   name or a wide invoice row never widens the page itself. The scroller is
   positioned on purpose: the absolutely placed .sr-only labels inside the
   table would otherwise escape it and stretch the page on a phone. */
.admin-wrap { position: relative; overflow-x: auto; max-width: 100%; }
.admin-wrap > table.admin-table { min-width: 100%; }

/* ---- people on one company ------------------------------------------------
   One card per person: who they are, when they were last here, what can be
   done to them, and their sign-ins underneath. The seat count sits in the
   same heading, because "how many may there be" and "who are they" are one
   question asked twice. */
.people-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.people-seats { font: var(--text-caption); color: var(--ink-muted); white-space: nowrap; }
.people-max { flex-wrap: wrap; margin-bottom: var(--space-3); }
.people-max-label { font: var(--text-body-small); color: var(--ink-muted); }
.people-max-input { width: 5.5em; }
.people-max-help { flex: 1 1 220px; margin: 0; }

.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.person { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-100); }
.person-top { display: flex; align-items: flex-start; gap: var(--space-3); }
.person-who { flex: 1 1 auto; min-width: 0; }
.person-name { margin: 0; font: var(--text-body); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.person-mail { margin: 2px 0 0; font: var(--text-body-small); color: var(--ink-muted); word-break: break-word; }
.person-menu { flex: 0 0 auto; }
.person-seen { margin: var(--space-2) 0 0; padding: 6px var(--space-2); border-radius: var(--radius-md); background: var(--surface-sunk); font: var(--text-body-small); color: var(--ink-muted); }
.person-share { margin: 6px 0 0; font: var(--text-caption); color: var(--ink-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.person-switch { display: inline-flex; align-items: center; gap: 8px; font: var(--text-body-small); }
.person-log { margin-top: var(--space-2); }
.person-log > summary { cursor: pointer; font: var(--text-body-small); color: var(--brand); }
.person-log > summary::-webkit-details-marker { display: none; }
.person-log .admin-wrap { margin-top: var(--space-2); }