/* Podešavanja and Tim (R2). Tokens only: no hex here.
   The shared shapes (.settings-cols, .settings-main, .settings-side,
   .subscription-card, .team-grid) live in screens.css; this file adds what
   only these two screens need and, loaded after it, widens the column of the
   Pretplata tab, which carries a table rather than a form. */

/* ---- cards stacked in one column ---- */
.settings-main > .card + .card,
.team-main > .card + .card { margin-top: var(--space-4); }
/* Historija računa sits under both columns: six columns do not fit the 480 px
   form column, and the reader should not scroll a table sideways to reach the
   PDF link. Same width as the package strip of the Profil tab. */
.invoices-card { max-width: 856px; margin-top: var(--space-4); }
table.invoice-table th, table.invoice-table td { padding-left: 12px; padding-right: 12px; }
table.invoice-table td.c-title { min-width: 0; }
/* A date is never broken in the middle. */
table.data td.c-period span { white-space: nowrap; }
.tone-ink { color: var(--ink); }

/* The sentence that says what a button will do, right under it. */
.consequence { font: var(--text-body-small); color: var(--ink-muted); margin-top: var(--space-2); }
.consequence:first-child { margin-top: 0; }
.plan-line { margin-top: var(--space-2); }

/* ---- the link or password shown once ---- */
.invite-box { min-width: 0; width: 100%; }
.invite-box p + p { margin-top: var(--space-1); }
.invite-link { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.invite-link .input { flex: 1 1 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.invite-link .btn { flex: 0 0 auto; }

/* ---- team table ----
   Six columns share one 616 px column at 1280 px, so the widths are fixed and
   the cells wrap: an auto table would push the last columns out of the card,
   and the reader would have to scroll sideways to reach the buttons. */
/* The selectors carry the element too: components.css styles `table.data th`,
   and a bare class would lose to it. */
table.team-table { table-layout: fixed; width: 100%; }
table.team-table th, table.team-table td { padding-left: 12px; padding-right: 12px; }
table.team-table th { white-space: normal; vertical-align: bottom; }
table.team-table th.c-name { width: 22%; }
table.team-table th.c-email { width: 23%; }
table.team-table th.c-role { width: 12%; }
table.team-table th.c-state { width: 14%; }
table.team-table th.c-seen { width: 14%; }
table.team-table th.c-act { width: 15%; }
table.team-table td.c-email, table.team-table td.c-name { overflow-wrap: anywhere; }
/* The row menu leaves the card, so the wrapper must not clip it. The fixed
   layout above guarantees the table itself never needs the scrollbar. */
.team-wrap { overflow: visible; }
/* Nothing clips that cell, so a button wider than its 15 % column would push
   the page sideways (720-1023 px) or slide under the side column (1024 px).
   Every action now sits in the row menu, where the panel gives it 280 px;
   this stays as the backstop for the card mode under 720 px. */
table.team-table td.c-act .btn { max-width: 100%; white-space: normal; }
.team-wrap + .card { margin-top: var(--space-4); }

/* ---- team table: the per-member actions ---- */
.row-actions > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-200); font: 600 13px/18px var(--font-sans); color: var(--brand);
}
.row-actions > summary::-webkit-details-marker { display: none; }
.row-actions > summary::after {
  content: ""; width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid var(--ink-muted);
}
.row-actions[open] > summary::after { border-top: 0; border-bottom: 5px solid var(--ink-muted); }
.actions-panel {
  margin-top: var(--space-2); padding: var(--space-3); text-align: left;
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md);
}
/* As a table it is a menu of the row: opening it may not move the columns. */
@media (min-width: 720px) {
  table.team-table td.c-act { text-align: right; }
  .row-actions { position: relative; }
  .actions-panel {
    position: absolute; z-index: 5; right: 0; top: calc(100% + 4px); width: 280px;
    background: var(--surface-200); box-shadow: 0 12px 30px var(--shadow);
  }
}
.actions-panel > .action-form + .action-form,
.actions-panel > .action-form + .consequence,
.actions-panel > .consequence + .action-form,
.actions-panel > .consequence + .consequence {
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border);
}
.action-form .field { margin-bottom: var(--space-2); }
.action-form .select { width: 100%; }

/* ---- invite form ---- */
.invite-form { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-start; }
.invite-form .field { flex: 1 1 200px; margin-bottom: 0; }
.invite-form .field:nth-of-type(2) { flex: 0 1 160px; }
.invite-submit { flex: 1 1 100%; }
.invite-submit .btn { margin-top: var(--space-1); }

/* ---- recent changes ---- */
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-row { font: var(--text-body-small); padding: 10px 0; border-bottom: 1px solid var(--border); }
.audit-row:first-child { padding-top: 0; }
.audit-row:last-child { border-bottom: 0; padding-bottom: 0; }
.audit-row .caption { display: block; }

/* Below 1200 px the side column costs the table more than it gives: six
   columns in the 360 px left at 1024 px do not fit, and the reader would
   have to scroll sideways to reach the buttons. The explainer and the log
   read just as well under the table. */
@media (max-width: 1199px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---- narrow screens ---- */
@media (max-width: 719px) {
  .settings-cols, .team-grid { display: block; }
  .settings-side, .team-side { margin-top: var(--space-4); }
  .settings-main { max-width: none; }
  .subscription-card { align-items: flex-start; }
  .subscription-card .page-actions .btn { flex: 1 1 100%; }
  /* In card mode the actions cell is the last line of the card, so the
     panel may use the full width. */
  .actions-panel { min-width: 0; }
  .invite-form .field, .invite-form .field:nth-of-type(2) { flex: 1 1 100%; }
  .invite-form .btn { width: 100%; }
}