/* ---- ui/pages/account_company*.py: Company settings (accounts area plan
   AA6 to AA8, AA16) ----

   Every class here is `aucra-acct-co-`, so no rule of another piece reaches
   these elements (the old bugs: `aucra-choice`, Quasar's `bg-primary`).
   The tables and rows are laid out by their own card's width, not the
   window's: the rail and the assistant drawer narrow the column while the
   window stays wide (`docs/handoff/rules.md`). Only the dialogs, which
   cover the window, go full screen by the window's width. */

/* The tiles: four in a row, two, then one. */
.aucra-acct-co-tiles-box {
  container: aucra-acct-co-tiles / inline-size;
  width: 100%;
}
.aucra-acct-co-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@container aucra-acct-co-tiles (max-width: 719px) {
  .aucra-acct-co-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container aucra-acct-co-tiles (max-width: 339px) {
  .aucra-acct-co-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}
.aucra-tile .q-btn.aucra-tile-link {
  align-self: flex-start;
  margin: 2px 0 0 -6px;
}

/* A card's body rows. */
.aucra-acct-co-card {
  container: aucra-acct-co-card / inline-size;
}
.aucra-acct-co-pad {
  padding: 14px 18px;
}
.aucra-acct-co-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.aucra-acct-co-sub {
  font-size: 12px;
  color: var(--muted);
}
.aucra-acct-co-who {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The two-step row: the words left, the switch right. */
.aucra-acct-co-line {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
}
.aucra-acct-co-line-text {
  flex: 1 1 auto;
  min-width: 0;
}
.aucra-acct-co-line-name {
  font-size: 13.5px;
  font-weight: 500;
}
.aucra-acct-co-line-help {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
/* The kit's switch (Quasar's toggle, role="switch"): on is the brand's
   gold deep rather than Quasar's primary, and the keyboard's ring is the
   page's own. */
.aucra-acct-co-line > .aucra-acct-co-switch {
  flex: none;
}
.aucra-acct-co-switch .q-toggle__inner--truthy {
  color: var(--gold-deep);
}
.aucra-acct-co-switch:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 999px;
}
.aucra-acct-co-missing {
  margin: 0 18px 14px;
  padding: 9px 12px;
  border: 1px solid rgba(180, 83, 9, 0.35);
  border-radius: var(--soft-radius-inner);
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 12.5px;
  line-height: 1.45;
}
@container aucra-acct-co-card (max-width: 479px) {
  .aucra-acct-co-line {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* Shared outside: workspace, person, level, then the AI line. */
.aucra-acct-co-outside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 190px) minmax(0, 150px);
  align-items: center;
  gap: 4px 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.aucra-panel-head + .aucra-acct-co-outside {
  border-top: 0;
}
.aucra-acct-co-ai {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--muted);
}
@container aucra-acct-co-card (max-width: 599px) {
  .aucra-acct-co-outside {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Workspaces with no company: the workspace left, the select and Give on
   one line right (AA16). */
.aucra-acct-co-loose {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.aucra-acct-co-loose-rows > .aucra-acct-co-loose:first-child {
  border-top: 0;
}
.aucra-acct-co-loose > .aucra-acct-co-who {
  flex: 1 1 auto;
}
.aucra-acct-co-loose .aucra-form.aucra-acct-co-give {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  /* A fixed share, so the selects line up down the list whether or not a
     workspace's name wraps. */
  flex: 0 0 min(340px, 55%);
}
.aucra-acct-co-give .aucra-field {
  flex: 1 1 auto;
  min-width: 0;
}
@container aucra-acct-co-card (max-width: 559px) {
  .aucra-acct-co-loose {
    flex-direction: column;
    align-items: stretch;
  }
  .aucra-acct-co-loose .aucra-form.aucra-acct-co-give {
    flex: none;
  }
}

/* The tables: the companies, and the two modals' rows. One grid per row,
   on the same columns, so the columns line up down the table. Every track
   is minmax with a floor the content fits in, every cell may shrink to its
   track (min-width: 0) and wraps or ellipsizes inside it, so no cell is
   drawn over its neighbour at any width. The tracks are set on the table;
   the narrow layouts below are set on the rows, because a container query
   styles the container's descendants, never the container itself. */
.aucra-acct-co-table {
  container: aucra-acct-co-table / inline-size;
  max-width: 100%;
  overflow-x: clip;
  font-size: 13px;
}
.aucra-acct-co-companies {
  /* Company, Accounts, Workspaces, Two-step, AI, This month, chevron: the
     floors, gaps and padding add up to 652px, where it turns; a 1024 window
     with the rail open gives the card about 660px. The two count tracks
     hold "12 accounts" and "12 workspaces" on one line. */
  --co-columns: minmax(96px, 1.5fr) minmax(104px, 1fr) minmax(124px, 1.15fr)
    minmax(88px, 1fr) minmax(64px, 0.8fr) minmax(64px, 0.95fr) 16px;
}
.aucra-acct-co-people {
  --co-columns: minmax(120px, 1fr) minmax(0, 96px) minmax(0, 104px) 16px;
}
.aucra-acct-co-spaces {
  --co-columns: minmax(120px, 1fr) minmax(0, 150px) minmax(0, 56px) minmax(0, 128px) 16px;
}
.aucra-acct-co-row {
  display: grid;
  grid-template-columns: var(--co-columns);
  align-items: center;
  gap: 6px 10px;
  padding: 10px 18px;
  color: inherit;
  text-decoration: none;
}
.aucra-acct-co-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The AI kind is one word ("Platform's", "Own"): cut, never broken. */
.aucra-acct-co-row > .aucra-acct-co-kind {
  overflow-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aucra-acct-co-row .aucra-acct-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aucra-acct-co-heads {
  padding-top: 8px;
  padding-bottom: 6px;
}
.aucra-acct-co-th {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.aucra-acct-co-item {
  border-top: 1px solid var(--line);
}
a.aucra-acct-co-item:hover,
.aucra-acct-co-crow:hover {
  background: var(--wash-head);
}
a.aucra-acct-co-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.aucra-acct-co-go {
  font-size: 18px;
  color: var(--muted);
  justify-self: end;
}
/* The company's name is the row's link, stretched over the row; the
   buttons in the row sit above it. The stretch is drawn inside the row
   (inset 0 of the row), so it never makes the page wider. */
.aucra-acct-co-crow {
  position: relative;
}
a.aucra-acct-co-stretch {
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
}
a.aucra-acct-co-stretch::after {
  content: "";
  position: absolute;
  inset: 0;
}
a.aucra-acct-co-stretch:focus-visible {
  outline: none;
}
.aucra-acct-co-crow:has(a.aucra-acct-co-stretch:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.aucra-acct-co-cell {
  position: relative;
  z-index: 1;
}
/* A count button is one line inside its track, which is sized for it; a
   count past two digits is cut with an ellipsis rather than spill. */
.aucra-acct-co-cell .q-btn.aucra-btn {
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
}
.aucra-acct-co-cell .aucra-btn > .q-btn__content {
  flex-wrap: nowrap;
  min-width: 0;
}
.aucra-acct-co-cell .aucra-btn .block {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aucra-acct-co-rows .aucra-pager {
  padding: 8px 18px 10px;
  border-top: 1px solid var(--line);
}
/* Under 652px the companies' columns no longer fit: each company is a
   card, its name on top, then the two buttons and the readings, wrapping. */
@container aucra-acct-co-table (max-width: 651px) {
  .aucra-acct-co-companies .aucra-acct-co-heads {
    display: none;
  }
  .aucra-acct-co-companies .aucra-acct-co-crow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }
  .aucra-acct-co-companies .aucra-acct-co-stretch {
    flex: 1 0 100%;
  }
  .aucra-acct-co-companies .aucra-acct-co-go {
    display: none;
  }
  .aucra-acct-co-companies .aucra-acct-co-crow > [data-head]:not(.aucra-acct-co-cell) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
  }
  .aucra-acct-co-companies .aucra-acct-co-crow > [data-head]:not(.aucra-acct-co-cell)::before {
    content: attr(data-head);
    font-size: 12px;
    color: var(--muted);
  }
}
/* Under 560px a modal's row is a small card: the name on top, then one
   line per column, its name left and its value right of it. */
@container aucra-acct-co-table (max-width: 559px) {
  .aucra-acct-co-people .aucra-acct-co-row,
  .aucra-acct-co-spaces .aucra-acct-co-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  /* After the rule above: the head row is a row too, and each card names
     its own columns, so the head row goes. */
  .aucra-acct-co-people .aucra-acct-co-heads,
  .aucra-acct-co-spaces .aucra-acct-co-heads,
  .aucra-acct-co-people .aucra-acct-co-row > .aucra-acct-co-go,
  .aucra-acct-co-spaces .aucra-acct-co-row > .aucra-acct-co-go {
    display: none;
  }
  .aucra-acct-co-people .aucra-acct-co-row > [data-head],
  .aucra-acct-co-spaces .aucra-acct-co-row > [data-head] {
    display: grid;
    grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 10px;
  }
  .aucra-acct-co-people .aucra-acct-co-row > [data-head]::before,
  .aucra-acct-co-spaces .aucra-acct-co-row > [data-head]::before {
    content: attr(data-head);
    font-size: 12px;
    color: var(--muted);
  }
}

/* The dialogs (kit dialog band, as Share's): full screen on a phone. */
.aucra-acct-co-dialog {
  container: aucra-acct-co-dialog / inline-size;
  width: 520px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
}
.aucra-acct-co-dialog-wide {
  width: 720px;
}
/* Quasar caps a dialog's card at 560px; the modals' tables need more. */
.q-dialog__inner--minimized > .aucra-acct-co-dialog {
  max-width: calc(100vw - 32px);
}
.aucra-acct-co-dialog-title {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.aucra-acct-co-dialog-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1 1 auto;
}
/* Edge to edge, so the row lines meet the dialog's sides; the table's own
   max-width of 100% would hold it 36px short. */
.aucra-acct-co-dialog-body > .aucra-acct-co-table {
  margin: -16px -18px 0;
  width: calc(100% + 36px);
  max-width: none;
}
.aucra-acct-co-dialog-foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.aucra-acct-co-dialog-foot:empty {
  display: none;
}
.aucra-acct-co-form .aucra-acct-co-form-foot {
  margin: 4px -18px -16px;
}
.aucra-acct-co-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aucra-acct-co-para {
  font-size: 13.5px;
  line-height: 1.5;
}
.aucra-acct-co-help {
  margin-top: -6px;
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-acct-co-said {
  font-size: 13px;
  color: var(--warn);
}
@media (max-width: 600px) {
  .q-dialog__inner--minimized:has(> .aucra-acct-co-dialog) {
    padding: 0;
  }
  .q-dialog__inner--minimized > .aucra-acct-co-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}