/* Hallmark · genre: modern-minimal · macrostructure: Workbench · design-system: DESIGN.md · designed-as-app
 * Pre-emit critique: Philosophy 4 · Hierarchy 4 · Execution 4 · Specificity 4 · Restraint 5 · Variety 4 */
html, body { overflow-x: clip; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; font-style: normal; }
.ui-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--surface); color: var(--ink); box-shadow: var(--ui-shadow); }
dialog::backdrop { background: var(--ui-overlay); }
.ui-dialog h2 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; margin: 8px 0 12px; }
.ui-dialog p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.ui-dialog-eyebrow { color: var(--muted); font-size: 12px; font-weight: 600; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.ui-dialog .ui-destructive { background: var(--error); border-color: var(--error); color: var(--surface); }
.ui-dialog .ui-destructive:hover { background: var(--ui-danger-hover); }
.ui-dialog button { white-space: nowrap; }
.ui-toaster { position: fixed; bottom: 24px; right: 24px; z-index: 1100; display: grid; gap: 10px; width: min(390px, calc(100vw - 32px)); pointer-events: none; }
.ui-toast { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; background: var(--surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); font-size: 14px; line-height: 1.5; pointer-events: auto; animation: ui-appear var(--ui-duration) var(--ui-ease); }
.ui-toast > span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }
.ui-toast-icon { background: var(--ui-success-surface); color: var(--ui-success); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; }
.ui-icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; }
.ui-icon-button:hover { background: var(--subtle); color: var(--ink); }
.ui-command-trigger { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; padding: 8px; min-height: 44px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--subtle); color: var(--muted); font-size: 13px; white-space: nowrap; }
.ui-command-trigger:hover { border-color: var(--muted); color: var(--ink); }
.ui-command { width: min(560px, calc(100vw - 32px)); padding: 20px; }
.ui-command-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ui-command-heading h2 { font-size: 18px; }
.ui-command input { margin: 12px 0; }
.ui-command-results { max-height: 45dvh; overflow-y: auto; display: grid; gap: 4px; }
.ui-command-results a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.ui-command-results a span:last-child { margin-left: auto; color: var(--muted); }
.ui-command-results a:hover, .ui-command-results a:focus-visible { background: var(--subtle); }
.ui-command .ui-command-hint { border-top: 1px solid var(--ui-border); padding-top: 12px; margin: 12px 0 0; font-size: 12px; }
.ui-command-empty { padding: 24px 12px; }
.ui-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-ui-busy], [data-ui-loading] { display: inline-flex; align-items: center; gap: 8px; }
[data-ui-busy]::before, [data-ui-loading]::before { content: ""; display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .8s linear infinite; }
.ui-button-group { display: inline-flex; align-items: stretch; gap: 0; vertical-align: middle; }
.ui-button-group > .secondary { border-radius: 0; margin: 0; min-width: 42px; white-space: nowrap; }
.ui-button-group > .secondary:first-child { border-radius: 10px 0 0 10px; }
.ui-button-group > .secondary:last-child { border-radius: 0 10px 10px 0; }
.ui-button-group > .secondary + .secondary { margin-left: -1px; }
.ui-button-group > :focus-visible { position: relative; z-index: 1; }
.ui-tooltip { position: fixed; z-index: 1200; margin: 0; max-width: min(260px, calc(100vw - 24px)); width: max-content; padding: 8px 10px; border: 0; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: var(--ui-shadow); }
.ui-help-button { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 1px solid var(--ui-border); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 12px; vertical-align: middle; }
.ui-help-button:hover { border-color: var(--accent); color: var(--accent); }
body .table-action-options, body .profile-dropdown-menu { border: 1px solid var(--ui-border); border-radius: 12px; padding: 6px; box-shadow: var(--ui-shadow); }
body .table-action-options :is(a, button), body .profile-dropdown-menu :is(a, button) { border-radius: 6px; }
body .table-action-options :is(a, button):hover, body .profile-dropdown-menu :is(a, button):hover { background: var(--subtle); }
body :is(.error, .form-error, .payroll-workflow-errors, .schedule-error, .taxes-error, .employee-profile-error):not(:empty) { border: 1px solid var(--ui-error-border); border-left: 3px solid var(--error); border-radius: 10px; padding: 16px 18px; background: var(--ui-error-surface); color: var(--error); font-size: 14px; }
body .payroll-review-breakdown { border: 1px solid var(--ui-border); border-radius: 12px; background: var(--surface); }
body .payroll-review-breakdown > summary { min-height: 48px; padding: 14px 16px; cursor: pointer; }
body .payroll-review-breakdown > summary:hover { background: var(--subtle); border-radius: 12px; }
body :is(.team-table, .payroll-review-table) tbody tr:hover { background: var(--subtle); }
body .empty-state { padding: 28px 20px; border: 1px dashed var(--ui-border); border-radius: 12px; background: var(--subtle); }
button:disabled { cursor: not-allowed; }
button[data-ui-loading] { cursor: wait; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .ui-toaster { right: 16px; bottom: 16px; }
  .ui-dialog { padding: 20px; }
  .ui-command-trigger { padding: 8px; }
  .ui-dialog-actions { flex-wrap: wrap; }
  .bill-pagination { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-toast { animation: none; }
  [data-ui-busy]::before, [data-ui-loading]::before { animation: none; }
}

body dialog:not(.ui-dialog) { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }

/* Shared feedback and collection surfaces across account and workspace pages. */
.ui-global-alert { max-width: 1100px; margin: 16px auto; }
.ui-global-alert p { margin: 6px 0 0; }
body .ui-inline-error:not(:empty) {
  display: block;
  border: 1px solid var(--ui-error-border);
  border-left: 3px solid var(--error);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--ui-error-surface);
  color: var(--error);
  font-size: 14px;
}
body :is(.ui-empty, .workspace-empty, .payroll-workflow-empty, .employee-payslips-empty, .taxes-empty) {
  padding: 24px;
  border: 1px dashed var(--ui-border);
  border-radius: 12px;
  background: var(--subtle);
  color: var(--muted);
  font-size: 14px;
}
body :is(.ui-empty, .workspace-empty, .payroll-workflow-empty, .employee-payslips-empty, .taxes-empty) :is(h2,h3) { color: var(--ink); }
body :is(.ui-table-empty, .team-table-empty) { padding: 28px 20px; text-align: center; color: var(--muted); background: var(--subtle); }
.ui-button-group > .secondary:only-child { border-radius: 10px; }
.ui-button-group > a.secondary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
body .ui-button-group { max-width: 100%; }
body :is(.payroll-pagination, .employee-payslips-pagination, .roe-actions[aria-label$="pages"]) { flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) {
  .ui-global-alert { margin: 12px 16px; }
  .ui-button-group > .secondary { padding-inline: 10px; font-size: 13px; }
}

body :is(p, section)[role="alert"]:not(:empty) { border: 1px solid var(--ui-error-border); border-left: 3px solid var(--error); border-radius: 10px; padding: 14px 16px; background: var(--ui-error-surface); color: var(--error); }
@media (max-width: 600px) {
  :is(.account-topbar, .centered-topbar):has(.ui-command-trigger) { gap: 10px; padding-inline: 16px; }
  :is(.account-topbar, .centered-topbar):has(.ui-command-trigger) .profile-dropdown summary span { display: none; }
  :is(.account-topbar, .centered-topbar):has(.ui-command-trigger) .profile-dropdown { flex-shrink: 0; }
}

/* Floating action menus must not participate in table-row layout. The native
   popover top layer also escapes the table's horizontal-scroll clipping. */
.table-action-menu { display: inline-block; }
body .table-action-options {
  position: fixed;
  inset: auto;
  z-index: 1300;
  margin: 0;
  width: 180px;
  min-width: 0;
  max-width: calc(100vw - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 2px;
  background: var(--surface);
  color: var(--ink);
}
.table-action-menu:not([open]) > .table-action-options { display: none; }
@supports selector(:popover-open) {
  .table-action-options[popover]:not(:popover-open) { display: none; }
}
body .table-action-options :is(a, button) {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  font: inherit;
  font-size: 14px;
}