/* Shared building blocks for the head-table pages (0.36): the ⋯ menu, the ? help pop-up, switch rows, tables that
   turn into cards on a phone, the Save bar's "Unsaved changes", quiet risky links, and the phone tab strip. */

/* ---- ⋯ More menu (ui.js moreMenu) */
.more { position: relative; display: inline-block; vertical-align: middle; }
.more-btn { min-width: 36px; padding-left: 8px; padding-right: 8px; font-weight: 800; letter-spacing: .06em; line-height: 1; }
.more-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 190px; background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 6px; text-align: left; }
.more-pop.up { top: auto; bottom: calc(100% + 4px); }
.more-pop.left { right: auto; left: 0; }
.more-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; white-space: nowrap; text-decoration: none; }
.more-item:hover, .more-item:focus-visible { background: #f2f4f7; outline: none; }
.more-item svg.ic { width: 16px; height: 16px; flex: none; color: #667085; }
.more-item.danger, .more-item.danger svg.ic { color: #b42318; }
.more-item[disabled] { opacity: .45; cursor: default; }
.more-sep { height: 1px; background: #eaecf0; margin: 6px 4px; }
.more-note { padding: 6px 12px; font-size: 12px; color: var(--muted); white-space: normal; }

/* ---- ? help (ui.js helpTip): one line under the title, the rest in a pop-up */
.help-wrap { position: relative; display: inline-block; vertical-align: middle; margin-left: 8px; }
.help-q { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--muted, #5b6477); background: #fff; color: #475467; font: 700 13px/1 system-ui, sans-serif; cursor: pointer; padding: 0; display: inline-grid; place-items: center; vertical-align: middle; }
.help-q:hover, .help-q[aria-expanded="true"] { border-color: var(--brand, #2563eb); color: var(--brand, #2563eb); }
.help-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: min(460px, calc(100vw - 32px)); background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 12px 14px; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--ink); letter-spacing: 0; text-transform: none; white-space: normal; }
.help-pop p { margin: 0 0 8px; }
.help-pop p:last-child { margin-bottom: 0; }
.page-sub { margin: -4px 0 14px; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .help-wrap { position: static; } .help-pop { left: 16px; right: 16px; width: auto; } }

/* ---- switch rows (ui.js switchRow): label and a one-line note on the left, the switch on the right */
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line2, #eef0f3); cursor: pointer; }
.sw-row:first-child { border-top: 0; }
.sw-row > span:first-child { min-width: 0; }
.sw-row b { display: block; font-size: 14px; }
.sw-row small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ---- the Save bar: "Unsaved changes" once something is typed (ui.js trackDirty) */
.save-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.save-dirty { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #b54708; margin-right: 4px; }
.save-dirty::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f79009; }
.save-bar.dirty .save-dirty, form.dirty .save-dirty { display: inline-flex; }
.save-bar { padding-bottom: 10px; }

/* ---- quiet risky action: red text, no fill, set apart from Save (confirms stay) */
.btn-quiet-danger { background: none; border: 0; padding: 6px 4px; color: #b42318; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-quiet-danger:hover { text-decoration: underline; }
.btn-quiet-danger:disabled { opacity: .5; cursor: default; text-decoration: none; }
.modal-foot .btn-quiet-danger, .modal-actions .btn-quiet-danger { margin-right: auto; }

/* ---- "Saves as you change it" on sections that save instantly */
.saves-live { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #067647; font-weight: 600; }
.saves-live::before { content: '✓'; font-weight: 800; }

/* ---- tables that become cards on a phone: add class "m-cards" to the table. Cells: data-label="…" shows the label
   before the value; "m-title" is the card's first line (bold); "m-sub" joins the muted second line; "m-hide" is
   left out on a phone; "actions" goes at the bottom. Rows keep their click (tap the card to open it). */
@media (max-width: 640px) {
  .card.flush .table.m-cards td.actions { position: static; box-shadow: none; background: none; }
  .table.m-cards, .table.m-cards tbody { display: block; width: 100%; }
  .table.m-cards thead { display: none; }
  .table.m-cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); position: relative; }
  .table.m-cards tr:last-child { border-bottom: 0; }
  .table.m-cards td { display: block; border: 0 !important; padding: 0 !important; background: none !important; text-align: left !important; min-width: 0; }
  .table.m-cards td.m-title { flex: 1 1 100%; font-size: 16px; font-weight: 700; order: -2; }
  .table.m-cards td.m-sub { color: var(--muted); font-size: 13px; order: -1; }
  .table.m-cards td.m-sub + td.m-sub::before { content: '· '; }
  .table.m-cards td[data-label]:not(.m-title):not(.m-sub)::before { content: attr(data-label) ' '; color: var(--muted); font-size: 12px; font-weight: 600; }
  .table.m-cards td.m-hide, .table.m-cards td:empty { display: none !important; }
  .table.m-cards td.actions { flex: 1 1 100%; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; margin-top: 8px; white-space: normal; }
  .table.m-cards td.actions .btn { margin-left: 0; }
  .table.m-cards tr.clickable td.m-title::after { content: '›'; position: absolute; right: 14px; top: 12px; color: #98a2b3; font-size: 22px; font-weight: 400; }
  .card.flush:has(.table.m-cards) { overflow: visible; }
}

/* ---- phone tab strip: one row that scrolls sideways, fading at the right edge */
@media (max-width: 760px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: none; white-space: nowrap; }
}

/* ---- page header actions wrap neatly on a phone */
@media (max-width: 640px) {
  .page-head .head-actions { flex-wrap: wrap; }
}

/* 0.51: Quick find has its own close: no second × inside the search box */
.qf-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }