/*
 * Hyrer design foundation (audit phase 1).
 *
 * The tokens every stylesheet should draw from, and the few base rules that must
 * apply on every page. Loaded after the other stylesheets.
 *
 * Type     12 13 14 16 20 24 30 px. 13 px is the minimum for anything people need to read;
 *          12 px is for labels, table headers, badges and timestamps.
 * Weights  400 regular, 500 medium, 600 semibold.
 * Text     ink, secondary and tertiary all reach at least 5.2:1 on white and on the page.
 * Status   each colour reaches at least 4.5:1 on its own soft background.
 */
:root {
  --ds-text-12: 12px;
  --ds-text-13: 13px;
  --ds-text-14: 14px;
  --ds-text-16: 16px;
  --ds-text-20: 20px;
  --ds-text-24: 24px;
  --ds-text-30: 30px;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;

  --ds-ink: #23243b;
  --ds-ink-secondary: #4f5266;
  --ds-ink-tertiary: #62657a;
  --ds-page: #f5f6fa;
  --ds-surface: #ffffff;

  --ds-primary: #6450cf;
  --ds-primary-hover: #5a43bd;
  --ds-primary-soft: #f1effc;
  --ds-on-primary: #ffffff;

  --ds-success: #1e7a46;
  --ds-success-soft: #eaf5ee;
  --ds-warning: #8a5a0e;
  --ds-warning-soft: #fbf3e4;
  --ds-danger: #a3392d;
  --ds-danger-soft: #fdeeee;
  --ds-info: #35689f;
  --ds-info-soft: #eaf1f8;
  --ds-violet: #6b4fa0;
  --ds-violet-soft: #f3f0f8;
  --ds-neutral: #62657a;
  --ds-neutral-soft: #f0f1f5;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;

  --ds-radius-control: 6px;
  --ds-radius-card: 10px;
  --ds-radius-modal: 16px;
  --ds-radius-full: 999px;

  --ds-shadow-low: 0 1px 2px rgba(20, 22, 40, .06);
  --ds-shadow-raised: 0 8px 24px rgba(20, 22, 40, .12);
  --ds-shadow-overlay: 0 24px 64px rgba(20, 22, 40, .24);

  --ds-control-sm: 32px;
  --ds-control-md: 40px;
}

[data-theme='dark'] {
  --ds-ink: #eceef5;
  --ds-ink-secondary: #c3c7d6;
  --ds-ink-tertiary: #a3a8bf;
  --ds-page: #0e1016;
  --ds-surface: #151823;
  --ds-primary-soft: rgba(143, 124, 240, .16);
  --ds-success: #7fd3a0;
  --ds-success-soft: rgba(127, 211, 160, .12);
  --ds-warning: #e3b866;
  --ds-warning-soft: rgba(227, 184, 102, .12);
  --ds-danger: #f0968a;
  --ds-danger-soft: rgba(240, 150, 138, .12);
  --ds-info: #8fb8e8;
  --ds-info-soft: rgba(143, 184, 232, .12);
  --ds-violet: #c3aef0;
  --ds-violet-soft: rgba(195, 174, 240, .12);
  --ds-neutral: #b4b7c8;
  --ds-neutral-soft: rgba(180, 183, 200, .12);
}

/* Bold text uses the semibold step rather than 700 or 900. */
@layer base {
  b,
  strong {
    font-weight: 600;
  }
}

/*
 * Status badges get their colour inline from PHP (pipeline stages, record lifecycle,
 * timesheets). Those colours are the light-mode tokens above, so dark mode swaps in
 * the lighter pair.
 */
[data-theme='dark'] [style*="#8a5a0e"] { --record-status-color: #e3b866 !important; color: #e3b866 !important; }
[data-theme='dark'] [style*="#1e7a46"] { --record-status-color: #7fd3a0 !important; color: #7fd3a0 !important; }
[data-theme='dark'] [style*="#a3392d"] { --record-status-color: #f0968a !important; color: #f0968a !important; }
[data-theme='dark'] [style*="#35689f"] { --record-status-color: #8fb8e8 !important; color: #8fb8e8 !important; }
[data-theme='dark'] [style*="#6b4fa0"] { --record-status-color: #c3aef0 !important; color: #c3aef0 !important; }
[data-theme='dark'] [style*="#62657a"] { --record-status-color: #b4b7c8 !important; color: #b4b7c8 !important; }

/*
 * Buttons (#21): primary, secondary, ghost and destructive in two sizes - 40px for
 * page and form actions, 32px inside toolbars, tables and cards. One purple, one
 * hover, no lift on hover. The older button rules use !important, so these do too
 * until those rules are removed.
 */
:root body.z-crm-app :is(.z-btn, .z-btn-primary, .z-btn-ghost, .z-btn-soft, .z-btn-danger, .z-btn-sm, .hv-button, .hap-btn) {
  border-radius: var(--ds-radius-control) !important;
  font-weight: var(--ds-weight-medium) !important;
  letter-spacing: 0 !important;
}
:root body.z-crm-app .hv-button:hover {
  transform: none !important;
}
@media (pointer: fine) {
  :root body.z-crm-app :is(.z-btn, .z-btn-primary, .z-btn-ghost, .z-btn-soft, .z-btn-danger, .hv-button):not(.z-btn-sm):not(.hv-button--icon) {
    min-height: var(--ds-control-md) !important;
    padding-block: 0 !important;
    padding-inline: 16px !important;
  }
  :root body.z-crm-app :is(.z-btn-sm, .hap-btn, .hv-record-tools .hv-button):not(.hap-btn--icon):not(.hv-button--icon) {
    min-height: var(--ds-control-sm) !important;
    height: auto !important;
    padding-block: 0 !important;
    padding-inline: 12px !important;
  }
}
:root:not([data-theme='dark']) body.z-crm-app :is(.z-btn-primary, .hv-button--primary, .hap-btn--primary, .hta-btn-primary) {
  background: var(--ds-primary) !important;
  border-color: var(--ds-primary) !important;
  color: var(--ds-on-primary) !important;
  filter: none !important;
}
:root:not([data-theme='dark']) body.z-crm-app :is(.z-btn-primary, .hv-button--primary, .hap-btn--primary, .hta-btn-primary):hover:not(:disabled) {
  background: var(--ds-primary-hover) !important;
  border-color: var(--ds-primary-hover) !important;
}
:root body.z-crm-app .z-btn-danger {
  background: var(--ds-surface) !important;
  border: 1px solid color-mix(in srgb, var(--ds-danger) 35%, transparent) !important;
  color: var(--ds-danger) !important;
}
:root body.z-crm-app .z-btn-danger:hover:not(:disabled) {
  background: var(--ds-danger-soft) !important;
}
:root body.z-crm-app :is(.z-input, select) {
  border-radius: var(--ds-radius-control) !important;
}

/*
 * Row menus (#24, #29): secondary and destructive row actions sit behind one
 * "More actions" button. The list is a native popover, so a scrolling table never
 * clips it; partials/row-menu.blade.php places it under its button.
 */
.hx-row-menu {
  display: inline-flex;
}
.hx-row-menu__trigger {
  font-size: 16px !important;
  line-height: 1 !important;
}
.hx-row-menu__list[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 184px;
  padding: 4px;
  border: 1px solid rgb(var(--c-line));
  border-radius: var(--ds-radius-card);
  background: rgb(var(--c-panel));
  color: rgb(var(--c-ink));
  box-shadow: var(--ds-shadow-raised);
}
.hx-row-menu__list [role="menuitem"] {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ds-radius-control);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.hx-row-menu__list [role="menuitem"]:hover,
.hx-row-menu__list [role="menuitem"]:focus-visible {
  background: rgb(var(--c-hover));
  outline: none;
}
.hx-row-menu__list [role="menuitem"].is-danger {
  color: var(--ds-danger);
}
.hx-row-menu__list [role="menuitem"].is-danger:hover,
.hx-row-menu__list [role="menuitem"].is-danger:focus-visible {
  background: var(--ds-danger-soft);
}
.hx-row-menu__sep {
  height: 1px;
  margin: 4px 0;
  background: rgb(var(--c-line));
}

/* Email builder (#29): removing a block no longer looks like duplicating it. */
.hx-em__block-tools button.hx-em__tool--danger {
  margin-left: 6px;
  color: var(--ds-danger);
}
.hx-em__block-tools button.hx-em__tool--danger:hover:not(:disabled) {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

/* Billing ledger (#51): a zero margin is neutral, not good news. */
.ledger-total dd.ledger-zero {
  color: rgb(var(--c-ink));
}

/* Dark mode: counts on the light brand colour use dark text, as the primary buttons used to. */
[data-theme='dark'] .hx-section-tab[aria-selected="true"] small {
  color: #171326 !important;
}

/*
 * Dark mode pairs for colours that were only ever set for light backgrounds.
 * The current section in the rail keeps white text on the deeper purple.
 */
:root[data-theme='dark'] body.hx-shell .hx-module-rail button:is([aria-pressed="true"], [aria-current]) {
  background: var(--ds-primary) !important;
  color: #ffffff !important;
}
[data-theme='dark'] .hyrer-language__help {
  color: var(--ds-ink-tertiary);
}
[data-theme='dark'] :is(.hxp-meta--rating, .tb-chip.is-warn b, .tb-pill--amber, .hx-acc__wk, .hx-adm__links a.is-alert span) {
  color: #e3b866 !important;
}
[data-theme='dark'] .tb-pill--green {
  color: #7fd3a0 !important;
}
[data-theme='dark'] :is(.tb-pill--red, .hx-adm__stats .is-alert b) {
  color: #f0968a !important;
}
[data-theme='dark'] :is(.hxa-chipbtn--solid, .hap-btn--primary, .hta-btn-primary, .hcm-filter.is-on b, .za-seg-btn[aria-pressed="true"], .hi-diary .hi-tabs button[aria-pressed="true"], .bg-z-red.text-white, .bg-z-amber.text-white, .bg-z-green.text-white) {
  color: #171326 !important;
}
[data-theme='dark'] .hcv-drop > span:not(.hcv-upload-icon) {
  color: #b8acff !important;
}

/* Dark mode: the support settings cards follow the theme; the agreement preview stays paper-white with its own greys. */
[data-theme='dark'] .hxs-card {
  background: rgb(var(--c-panel));
  border-color: rgb(var(--c-line));
}
[data-theme='dark'] .za-paper {
  --hy-muted: #62657a;
}

/* Inter is the app font (audit batch 4). */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var.woff2) format("woff2")}