/*
 * Cato theme for the Martis back office. Generated from packages/ui/tokens.css by
 * packages/ui/scripts/martis-theme.mjs; do not edit: run pnpm --filter @cato/ui martis-theme.
 */

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Big Shoulders Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/big-shoulders-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --martis-bg: #0f0f0f;
  --martis-surface: #161616;
  --martis-surface-alt: #1c1c1c;
  --martis-sidebar: #0b0b0b;
  --martis-topbar: #0f0f0f;
  --martis-card: #161616;
  --martis-input-bg: #0f0f0f;
  --martis-text: #efeae0;
  --martis-text-muted: #8d8a82;
  --martis-border: #34332f;
  --martis-accent: #d9342b;
  --martis-accent-hover: #e5463d;
  --martis-accent-active: #e5463d;
  --martis-accent-contrast: #ffffff;
  --martis-accent-bg-light: #2a1412;
  --martis-accent-bg: color-mix(in srgb, #d9342b 24%, transparent);
  --martis-focus-ring: color-mix(in srgb, #d9342b 45%, transparent);
  --martis-success: #3fbf7f;
  --martis-success-hover: #3fbf7f;
  --martis-success-bg: #14261d;
  --martis-success-text: #3fbf7f;
  --martis-warning: #e8b030;
  --martis-warning-hover: #e8b030;
  --martis-warning-bg: #2a2312;
  --martis-warning-text: #e8b030;
  --martis-danger: #d9342b;
  --martis-danger-hover: #e5463d;
  --martis-danger-bg: #2a1412;
  --martis-danger-text: #d9342b;
  --martis-info: #8d8a82;
  --martis-info-hover: #efeae0;
  --martis-info-bg: #1c1c1c;
  --martis-info-text: #efeae0;
  --martis-search-bg: #1c1c1c;
  --martis-search-border: #34332f;
  --martis-overlay: color-mix(in srgb, #0f0f0f 80%, transparent);
  --martis-row-even: #161616;
  --martis-row-hover: #1c1c1c;
  --martis-table-header-bg: #161616;
  --martis-table-header-text: #8d8a82;
  --martis-table-header-border: #34332f;
  --martis-chart-1: #d9342b;
  --martis-chart-2: #3fbf7f;
  --martis-chart-3: #e8b030;
  --martis-avatar-1: #1c1c1c;
  --martis-avatar-2: #1c1c1c;
  --martis-avatar-3: #1c1c1c;
  --martis-avatar-4: #1c1c1c;
  --martis-avatar-5: #1c1c1c;
  --martis-avatar-6: #1c1c1c;
  --martis-avatar-7: #1c1c1c;
  --martis-avatar-8: #1c1c1c;
  --martis-avatar-9: #1c1c1c;
  --martis-avatar-10: #1c1c1c;
  --martis-avatar-11: #1c1c1c;
  --martis-avatar-12: #1c1c1c;
  --martis-avatar-13: #1c1c1c;
  --martis-avatar-14: #1c1c1c;
  --martis-avatar-15: #1c1c1c;
  --martis-avatar-16: #1c1c1c;
  --martis-brand-gradient: linear-gradient(135deg, #0f0f0f 0%, #161616 55%, #2a1412 100%);
  --martis-brand-aurora-cyan: color-mix(in srgb, #d9342b 30%, transparent);
  --martis-brand-aurora-pink: color-mix(in srgb, #e5463d 35%, transparent);
  --martis-brand-pointer-glow: color-mix(in srgb, #d9342b 25%, transparent);
  --martis-brand-shadow: 0 20px 50px -20px color-mix(in srgb, #d9342b 45%, transparent);
  --martis-brand-text: #efeae0;
  --martis-radius-sm: 0.375rem;
  --martis-radius-md: 0.625rem;
  --martis-radius-lg: 0.625rem;
  --martis-radius-xl: 0.875rem;
  --martis-font-sans: 'Instrument Sans Variable', system-ui, sans-serif;
  --martis-font-mono: 'Geist Mono Variable', ui-monospace, monospace;
  --martis-font-heading: 'Big Shoulders Variable', 'Arial Narrow', sans-serif;
  --martis-font-feature-settings: normal;
}

html:not(.dark) {
  --martis-bg: #f2eee6;
  --martis-surface: #faf8f3;
  --martis-surface-alt: #ffffff;
  --martis-sidebar: #ebe6dc;
  --martis-topbar: #f2eee6;
  --martis-card: #faf8f3;
  --martis-input-bg: #f2eee6;
  --martis-text: #151413;
  --martis-text-muted: #5c5850;
  --martis-border: #d6cfc1;
  --martis-accent: #c0281f;
  --martis-accent-hover: #a8221a;
  --martis-accent-active: #a8221a;
  --martis-accent-contrast: #ffffff;
  --martis-accent-bg-light: #f8e1dd;
  --martis-accent-bg: color-mix(in srgb, #c0281f 24%, transparent);
  --martis-focus-ring: color-mix(in srgb, #c0281f 45%, transparent);
  --martis-success: #18744a;
  --martis-success-hover: #18744a;
  --martis-success-bg: #dcefe3;
  --martis-success-text: #18744a;
  --martis-warning: #8a5d00;
  --martis-warning-hover: #8a5d00;
  --martis-warning-bg: #f6ead0;
  --martis-warning-text: #8a5d00;
  --martis-danger: #c0281f;
  --martis-danger-hover: #a8221a;
  --martis-danger-bg: #f8e1dd;
  --martis-danger-text: #c0281f;
  --martis-info: #5c5850;
  --martis-info-hover: #151413;
  --martis-info-bg: #ffffff;
  --martis-info-text: #151413;
  --martis-search-bg: #ffffff;
  --martis-search-border: #d6cfc1;
  --martis-overlay: color-mix(in srgb, #f2eee6 80%, transparent);
  --martis-row-even: #faf8f3;
  --martis-row-hover: #ffffff;
  --martis-table-header-bg: #faf8f3;
  --martis-table-header-text: #5c5850;
  --martis-table-header-border: #d6cfc1;
  --martis-chart-1: #c0281f;
  --martis-chart-2: #18744a;
  --martis-chart-3: #8a5d00;
  --martis-avatar-1: #ffffff;
  --martis-avatar-2: #ffffff;
  --martis-avatar-3: #ffffff;
  --martis-avatar-4: #ffffff;
  --martis-avatar-5: #ffffff;
  --martis-avatar-6: #ffffff;
  --martis-avatar-7: #ffffff;
  --martis-avatar-8: #ffffff;
  --martis-avatar-9: #ffffff;
  --martis-avatar-10: #ffffff;
  --martis-avatar-11: #ffffff;
  --martis-avatar-12: #ffffff;
  --martis-avatar-13: #ffffff;
  --martis-avatar-14: #ffffff;
  --martis-avatar-15: #ffffff;
  --martis-avatar-16: #ffffff;
  --martis-brand-gradient: linear-gradient(135deg, #0f0f0f 0%, #161616 55%, #2a1412 100%);
  --martis-brand-aurora-cyan: color-mix(in srgb, #d9342b 30%, transparent);
  --martis-brand-aurora-pink: color-mix(in srgb, #e5463d 35%, transparent);
  --martis-brand-pointer-glow: color-mix(in srgb, #d9342b 25%, transparent);
  --martis-brand-shadow: 0 20px 50px -20px color-mix(in srgb, #d9342b 45%, transparent);
  --martis-brand-text: #efeae0;
}

h1,
h2,
.martis-auth-title {
  font-family: var(--martis-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.martis-datatable tbody td {
  font-family: var(--martis-font-sans);
}

a:has(> .martis-resource-card) {
  min-width: 0;
}

form div[class~='rounded-b-xl'][class~='justify-end'] {
  flex-wrap: wrap;
}

.p-toast {
  --toast-tone: var(--martis-success);
  width: min(25.5rem, calc(100vw - 2rem)) !important;
}

.p-toast .p-toast-message {
  --tone: var(--martis-success);
  position: relative;
  overflow: hidden;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 0 1rem !important;
  border: 1.5px solid color-mix(in srgb, var(--tone) 80%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--tone) 5%, var(--martis-surface-alt, var(--martis-surface))) !important;
  box-shadow: 0 10px 32px -10px color-mix(in srgb, var(--tone) 55%, transparent) !important;
  backdrop-filter: none;
}

/* Martis gives each tone a 4px left border with the same weight as this rule: the html prefix wins it. */
html .p-toast .p-toast-message[class*='p-toast-message-'] {
  border-left: 1.5px solid color-mix(in srgb, var(--tone) 80%, transparent) !important;
}

.p-toast .p-toast-message.p-toast-message-info {
  --tone: var(--martis-info);
}

.p-toast .p-toast-message.p-toast-message-warn {
  --tone: var(--martis-warning);
}

.p-toast .p-toast-message.p-toast-message-error {
  --tone: var(--martis-danger);
}

.p-toast .p-toast-message-content {
  padding: 12px 16px 16px !important;
}

.p-toast .martis-toast-body {
  gap: 12px !important;
  padding-right: 24px;
}

.p-toast .martis-toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  background: color-mix(in srgb, var(--tone) 16%, var(--martis-bg)) !important;
  color: var(--tone);
}

.p-toast .martis-toast-icon svg {
  width: 28px;
  height: 28px;
}

.p-toast .p-toast-message-success .martis-toast-icon svg,
.p-toast .p-toast-message-error .martis-toast-icon svg {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 6px;
  background: var(--tone);
  color: #fff;
}

.p-toast .martis-toast-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--martis-text);
}

.p-toast .martis-toast-message {
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--martis-text) 90%, transparent);
}

.p-toast .martis-toast-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  color: var(--martis-text);
}

.p-toast .martis-toast-close svg {
  width: 16px;
  height: 16px;
}

.p-toast .p-toast-message::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--tone);
  transform-origin: left;
  animation: cato-toast-bar 5s linear forwards;
}

.p-toast .p-toast-message:hover::after {
  animation-play-state: paused;
}

@keyframes cato-toast-bar {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* The row actions sit in the last column, which a wide table pushes out of sight: keep it in view (not on a
   phone, where the column would cover most of the row). */
@media (min-width: 768px) {
  .p-datatable-wrapper thead th:last-child,
  .p-datatable-wrapper tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: inherit;
    box-shadow: -8px 0 8px -8px rgb(0 0 0 / 0.6);
  }

  .p-datatable-wrapper thead th:last-child {
    background-color: var(--martis-table-header-bg);
  }
}

/* "Create <resource>" keeps one line beside a long subtitle; on a phone the header wraps instead. */
@media (min-width: 768px) {
  .flex.items-center.gap-2 > button.rounded-lg.text-martis-accent-contrast {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .space-y-4 > .flex.items-center.justify-between {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  .space-y-4 > .flex.items-center.justify-between > :first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
}