/* Shared card chrome. Individual screens own only their width and content layout. */
dialog:is(#schedule-dialog, #settings-role-dialog, #settings-schedule-dialog, #role-dialog, #card-dialog, #bonus-create-dialog, #bonus-details-dialog, #register-details-dialog, #payment-request-dialog, #fact-details-dialog, .delete-confirm-dialog, .payout-policy-dialog) {
  color: #1d1d1f;
  background: #f5f5f7;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgb(0 0 0 / 24%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  &::backdrop { background: rgb(23 38 46 / 42%); backdrop-filter: none; }
  & .dialog-header, & .dialog-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 58px; padding: 10px 18px;
    background: #fff; border-bottom: 1px solid rgb(0 0 0 / 8%);
    backdrop-filter: none;
  }
  & .dialog-header h2, & .dialog-head h2 {
    margin: 0; font-size: 18px; line-height: 24px; letter-spacing: -.01em;
  }
  & .dialog-footer, & .dialog-actions {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 8px; min-height: 52px; padding: 8px 18px;
    background: #fff; border-top: 1px solid rgb(0 0 0 / 8%);
    backdrop-filter: none; flex-wrap: wrap;
  }
  & .dialog-footer__spacer, & .dialog-spacer { flex: 1; }
  & .btn, & .button { min-height: 36px; border-radius: 9px; font-size: 13px; }
  & .dialog-header .btn--icon, & .dialog-head .icon-button {
    flex: 0 0 32px; display: grid; place-items: center;
    width: 32px; min-width: 32px; height: 32px; min-height: 32px;
    position: relative; padding: 0; border: 0; border-radius: 0; color: #808080;
    background: transparent; font-size: 0; box-shadow: none;
    &::before, &::after {
      content: ""; position: absolute; width: 20px; height: 2px;
      background: currentColor; transform: rotate(45deg);
    }
    &::after { transform: rotate(-45deg); }
    &:hover { color: #4d4d4d; background: transparent; }
    &:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
  }
}
/* Admin forms have no separate body wrapper. Keep their chrome edge-to-edge. */
/* Stable card sizes: content and active tab never determine the outer size. */
dialog:is(#schedule-dialog, #settings-role-dialog, #settings-schedule-dialog, #role-dialog, #card-dialog, #bonus-create-dialog, #bonus-details-dialog, #register-details-dialog, #payment-request-dialog, #fact-details-dialog) {
  box-sizing: border-box;
  width: min(1380px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(790px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0; overflow: hidden;
  &[open] { display: flex; flex-direction: column; }
  & > .dialog-header, & > .dialog-footer { flex: 0 0 auto; }
  & > .dialog-body { flex: 1 1 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  & > form { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; height: 100%; box-sizing: border-box; overflow: hidden; }
  & > form > .dialog-body, & .activity-card-content { flex: 1 1 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  & > form > .dialog-header, & > form > .dialog-head, & > form > .dialog-footer, & > form > .dialog-actions { flex: 0 0 auto; }
  & > form > .activity-feed { flex: 1 1 0; min-height: 0; max-height: none; }
}
@media (max-width: 600px) {
  dialog:is(#schedule-dialog, #settings-role-dialog, #settings-schedule-dialog, #role-dialog, #card-dialog, #bonus-create-dialog, #bonus-details-dialog, #register-details-dialog, #payment-request-dialog, #fact-details-dialog) {
    width: calc(100vw - 16px); max-width: calc(100vw - 16px);
    height: calc(100dvh - 16px); max-height: calc(100dvh - 16px);
  }
}
dialog:is(#role-dialog, #card-dialog) form { padding: 18px; }
dialog:is(#role-dialog, #card-dialog) .dialog-head { margin: -18px -18px 18px; }
dialog:is(#role-dialog, #card-dialog) .dialog-actions { margin: 18px -18px -18px; }
.activity-surface, .activity-feed {
  padding: 14px; background: #fff; border-radius: 14px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 3%);
}

/* Shared visual state for deleted records in Web and iframe lists. */
.payment-lines-table tfoot th, .payment-lines-table tfoot td {
  border-top: 1px solid #dce3e8;
  font-weight: 600;
  background: #fff;
  text-transform: none;
  letter-spacing: normal;
}
.payment-lines-table th:last-child, .payment-lines-table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.deleted-card, .archived-card { background: #fff1f2; color: #7f3540; }
.deleted-card:hover, .archived-card:hover { background: #ffe4e6; }

#quarter-grid tbody tr, #director-settings tbody tr { cursor: pointer; }
#quarter-grid tbody tr:focus-visible, #director-settings tbody tr:focus-visible { outline: 2px solid #075b72; outline-offset: -2px; }
#schedule-dialog .dialog-body > section { display: grid; align-content: start; gap: 18px; padding: 18px; }
#schedule-dialog label { display: grid; gap: 6px; max-width: 520px; }

dialog.margin-warning-dialog {
  background: #fff3bf;
  border: 2px solid #e0a000;
  & .dialog-head, & .dialog-header { background: #ffe082; border-bottom-color: #e0a000; }
  & .dialog-body { background: #fff3bf; color: #513b00; }
  & .dialog-actions, & .dialog-footer { background: #fff3bf; border-top-color: #e5c45b; }
  & h2 { color: #513b00; }
  & h2::before { content: "⚠"; color: #8a5700; margin-right: 8px; }
}

/* Compact settings popup requested by the user; shared card chrome above. */
dialog.payout-policy-dialog {
  box-sizing: border-box; width: min(720px, calc(100vw - 32px));
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 24px);
  padding: 0; overflow: hidden;
  &[open] { display: flex; flex-direction: column; }
  & > .dialog-header, & > .dialog-footer { flex: 0 0 auto; }
  & > .dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
}
@media (max-width: 600px) {
  dialog.payout-policy-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
}