/* Generated from the canonical design-system source. Do not edit. */
/**
 * Comptableo Design System - opt-in foundations and global primitives
 *
 * Add `ct-ui` to the root of a Comptableo-owned interface. Existing third-party
 * markup remains untouched until it is deliberately migrated.
 */

/* Reset */
.ct-ui,
.ct-ui *,
.ct-ui *::before,
.ct-ui *::after {
  box-sizing: border-box;
}

.ct-ui {
  min-block-size: 100%;
  background: var(--ct-color-surface);
  color: var(--ct-color-text-primary);
  font-family: var(--ct-font-family-sans);
  font-size: var(--ct-font-size-md);
  line-height: var(--ct-line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ct-ui :where(button, input, select, textarea) {
  font: inherit;
}

.ct-ui :where(button, [role='button'], summary) {
  touch-action: manipulation;
}

.ct-ui :where(img, svg, video, canvas) {
  block-size: auto;
  max-inline-size: 100%;
}

/* Base */
.ct-ui ::selection {
  background: var(--ct-color-selection);
}

.ct-ui :where(h1, h2, h3, h4, h5, h6, p) {
  margin-block: 0;
}

.ct-ui :where(h1, h2, h3, h4, h5, h6) {
  color: var(--ct-color-text-primary);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: var(--ct-letter-spacing-tight);
  line-height: var(--ct-line-height-heading);
}

.ct-ui :where(a) {
  color: var(--ct-color-action);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.ct-ui :where(a:hover) {
  color: var(--ct-color-action-hover);
}

.ct-ui
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex='-1'])
  ):focus-visible {
  outline: var(--ct-border-width-strong) solid var(--ct-color-focus);
  outline-offset: 2px;
}

/* Layout */
.ct-container {
  inline-size: min(
    100% - (2 * var(--ct-layout-gutter)),
    var(--ct-layout-content-xl)
  );
  margin-inline: auto;
}

.ct-container--readable {
  max-inline-size: var(--ct-layout-readable);
}

.ct-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-space, var(--ct-space-4));
}

.ct-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-space, var(--ct-space-3));
}

.ct-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--grid-min, var(--ct-grid-min-card))), 1fr)
  );
  gap: var(--grid-space, var(--ct-grid-gap));
}

.ct-sidebar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 100%;
}

/* Utilities */
.u-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-readable {
  max-inline-size: var(--ct-layout-readable);
}

/* Components */
.ct-button {
  display: inline-flex;
  min-block-size: var(--ct-size-control-sm);
  min-inline-size: var(--ct-size-target-min);
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-2);
  padding-inline: var(--ct-space-4);
  border: var(--ct-border-width) solid transparent;
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-action);
  color: var(--ct-color-action-contrast);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ct-motion-duration-fast)
    var(--ct-motion-easing-standard);
}

.ct-button:hover {
  background: var(--ct-color-action-hover);
  color: var(--ct-color-action-contrast);
}

.ct-button:active {
  background: var(--ct-color-action-active);
  transform: translateY(1px);
}

.ct-button--secondary {
  border-color: var(--ct-color-border);
  background: var(--ct-color-surface);
  color: var(--ct-color-text-primary);
  box-shadow: var(--ct-shadow-xs);
}

.ct-button--secondary:hover {
  border-color: var(--ct-color-border-strong);
  background: var(--ct-color-surface-subtle);
  color: var(--ct-color-text-primary);
}

.ct-button--quiet {
  background: transparent;
  color: var(--ct-color-text-secondary);
}

.ct-button--quiet:hover {
  background: var(--ct-color-surface-muted);
  color: var(--ct-color-text-primary);
}

.ct-button--danger {
  background: var(--ct-color-danger);
  color: var(--ct-color-text-inverse);
}

.ct-button--danger:hover {
  background: var(--ct-color-danger-strong);
}

.ct-button--icon {
  inline-size: var(--ct-size-target-min);
  padding-inline: 0;
}

.ct-field {
  display: grid;
  gap: var(--ct-space-2);
}

.ct-field__label {
  color: var(--ct-color-text-primary);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
}

.ct-field__hint,
.ct-field__message {
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
}

.ct-field__control,
.ct-input,
.ct-select,
.ct-textarea {
  inline-size: 100%;
  min-block-size: var(--ct-size-control-sm);
  padding-inline: var(--ct-space-3);
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface);
  color: var(--ct-color-text-primary);
  box-shadow: 0 1px 0 rgb(18 20 24 / 2%);
}

.ct-textarea {
  min-block-size: 7rem;
  padding-block: var(--ct-space-3);
  resize: vertical;
}

.ct-field__control:hover,
.ct-input:hover,
.ct-select:hover,
.ct-textarea:hover {
  border-color: var(--ct-color-text-tertiary);
}

.ct-field__control:focus-visible,
.ct-input:focus-visible,
.ct-select:focus-visible,
.ct-textarea:focus-visible {
  border-color: var(--ct-color-focus);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--ct-color-focus) 20%, transparent);
}

.ct-field--invalid .ct-field__control,
.ct-field--invalid .ct-input,
.ct-field--invalid .ct-select,
.ct-field--invalid .ct-textarea,
.ct-field__control[aria-invalid='true'],
.ct-input[aria-invalid='true'],
.ct-select[aria-invalid='true'],
.ct-textarea[aria-invalid='true'] {
  border-color: var(--ct-color-danger);
}

.ct-field--invalid .ct-field__message {
  color: var(--ct-color-danger);
}

.ct-switch {
  display: inline-flex;
  min-block-size: var(--ct-size-target-min);
  align-items: center;
  gap: var(--ct-space-3);
  color: var(--ct-color-text-primary);
  cursor: pointer;
}

.ct-switch__control {
  position: relative;
  display: inline-flex;
  inline-size: 2.75rem;
  block-size: var(--ct-size-target-min);
  flex: 0 0 auto;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.ct-switch__control::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 1.5rem;
  border: var(--ct-border-width) solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-color-surface-muted);
  content: '';
  transform: translateY(-50%);
}

.ct-switch__control::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.1875rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  background: var(--ct-color-surface-raised);
  box-shadow: var(--ct-shadow-sm);
  content: '';
  transform: translateY(-50%);
  transition: transform var(--ct-motion-duration-fast)
    var(--ct-motion-easing-standard);
}

.ct-switch__control[aria-checked='true']::before {
  border-color: var(--ct-color-action);
  background: var(--ct-color-action);
}

.ct-switch__control[aria-checked='true']::after {
  transform: translate(1.25rem, -50%);
}

.ct-card {
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-color-surface-raised);
  box-shadow: none;
}

.ct-card__header,
.ct-card__body,
.ct-card__footer {
  padding: var(--ct-space-5);
}

.ct-card__header + .ct-card__body,
.ct-card__body + .ct-card__footer {
  border-block-start: var(--ct-border-width) solid var(--ct-color-border);
}

.ct-table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-color-surface);
}

.ct-table {
  inline-size: 100%;
  min-inline-size: 40rem;
  border-collapse: collapse;
  color: var(--ct-color-text-primary);
  font-size: var(--ct-font-size-sm);
}

.ct-table :where(th, td) {
  padding: var(--ct-space-3) var(--ct-space-4);
  border-block-end: var(--ct-border-width) solid var(--ct-color-border);
  text-align: start;
}

.ct-table th {
  background: var(--ct-color-surface-subtle);
  color: var(--ct-color-text-secondary);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-table tbody tr:hover {
  background: var(--ct-color-surface-subtle);
}

.ct-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-1);
}

.ct-navigation__link {
  display: inline-flex;
  min-block-size: var(--ct-size-target-min);
  align-items: center;
  gap: var(--ct-space-2);
  padding-inline: var(--ct-space-3);
  border-radius: var(--ct-radius-md);
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
  text-decoration: none;
}

.ct-navigation__link:hover,
.ct-navigation__link[aria-current='page'] {
  background: var(--ct-color-surface-subtle);
  color: var(--ct-color-text-primary);
}

.ct-sidebar {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--ct-space-4);
  padding: var(--ct-space-4);
  border-inline-end: var(--ct-border-width) solid var(--ct-color-border);
  background: var(--ct-color-surface-subtle);
}

.ct-sidebar__section {
  display: grid;
  gap: var(--ct-space-1);
}

.ct-sidebar__heading {
  padding-inline: var(--ct-space-3);
  color: var(--ct-color-text-tertiary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
  letter-spacing: var(--ct-letter-spacing-wide);
  text-transform: uppercase;
}

.ct-breadcrumbs {
  display: flex;
  min-block-size: var(--ct-size-target-min);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-2);
  padding: 0;
  margin: 0;
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  list-style: none;
}

.ct-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
}

.ct-breadcrumbs__item + .ct-breadcrumbs__item::before {
  color: var(--ct-color-text-tertiary);
  content: '/';
}

.ct-breadcrumbs [aria-current='page'] {
  color: var(--ct-color-text-primary);
  font-weight: var(--ct-font-weight-medium);
}

.ct-breadcrumbs a {
  display: inline-flex;
  min-block-size: var(--ct-size-target-min);
  align-items: center;
}

.ct-tabs {
  display: flex;
  max-inline-size: 100%;
  gap: var(--ct-space-1);
  overflow-x: auto;
  border-block-end: var(--ct-border-width) solid var(--ct-color-border);
}

.ct-tabs__tab {
  position: relative;
  display: inline-flex;
  min-block-size: var(--ct-size-target-min);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding-inline: var(--ct-space-3);
  border: 0;
  background: transparent;
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
  cursor: pointer;
}

.ct-tabs__tab[aria-selected='true'] {
  color: var(--ct-color-text-primary);
}

.ct-tabs__tab[aria-selected='true']::after {
  position: absolute;
  inset-block-end: -1px;
  inset-inline: var(--ct-space-3);
  block-size: var(--ct-border-width-strong);
  background: var(--ct-color-action);
  content: '';
}

.ct-dropdown {
  min-inline-size: 12rem;
  padding: var(--ct-space-1);
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface-raised);
  box-shadow: var(--ct-elevation-overlay);
}

.ct-dropdown__item {
  display: flex;
  min-block-size: var(--ct-size-target-min);
  inline-size: 100%;
  align-items: center;
  gap: var(--ct-space-2);
  padding-inline: var(--ct-space-3);
  border: 0;
  border-radius: var(--ct-radius-sm);
  background: transparent;
  color: var(--ct-color-text-primary);
  font-size: var(--ct-font-size-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.ct-dropdown__item:hover,
.ct-dropdown__item[aria-selected='true'] {
  background: var(--ct-color-surface-muted);
  color: var(--ct-color-text-primary);
}

.ct-badge {
  display: inline-flex;
  min-block-size: 1.5rem;
  align-items: center;
  gap: var(--ct-space-1);
  padding-inline: var(--ct-space-2);
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius: var(--ct-radius-pill);
  background: var(--ct-color-surface-subtle);
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-xs);
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1;
}

.ct-badge--success {
  border-color: var(--ct-color-success-border);
  background: var(--ct-color-success-surface);
  color: var(--ct-color-success-strong);
}

.ct-badge--warning {
  border-color: var(--ct-color-warning-border);
  background: var(--ct-color-warning-surface);
  color: var(--ct-color-warning-strong);
}

.ct-badge--danger {
  border-color: var(--ct-color-danger-border);
  background: var(--ct-color-danger-surface);
  color: var(--ct-color-danger-strong);
}

.ct-badge--info {
  border-color: var(--ct-color-info-border);
  background: var(--ct-color-info-surface);
  color: var(--ct-color-info-strong);
}

.ct-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ct-space-3);
  padding: var(--ct-space-4);
  border: var(--ct-border-width) solid var(--ct-color-info-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-info-surface);
  color: var(--ct-color-info-strong);
}

.ct-alert--success {
  border-color: var(--ct-color-success-border);
  background: var(--ct-color-success-surface);
  color: var(--ct-color-success-strong);
}

.ct-alert--warning {
  border-color: var(--ct-color-warning-border);
  background: var(--ct-color-warning-surface);
  color: var(--ct-color-warning-strong);
}

.ct-alert--danger {
  border-color: var(--ct-color-danger-border);
  background: var(--ct-color-danger-surface);
  color: var(--ct-color-danger-strong);
}

.ct-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-1);
}

.ct-pagination__item {
  display: inline-flex;
  min-block-size: var(--ct-size-target-min);
  min-inline-size: var(--ct-size-target-min);
  align-items: center;
  justify-content: center;
  padding-inline: var(--ct-space-2);
  border: var(--ct-border-width) solid transparent;
  border-radius: var(--ct-radius-md);
  background: transparent;
  color: var(--ct-color-text-secondary);
  font-size: var(--ct-font-size-sm);
  text-decoration: none;
}

.ct-pagination__item:hover {
  background: var(--ct-color-surface-muted);
  color: var(--ct-color-text-primary);
}

.ct-pagination__item[aria-current='page'] {
  border-color: var(--ct-color-border-strong);
  background: var(--ct-color-surface);
  color: var(--ct-color-text-primary);
  font-weight: var(--ct-font-weight-semibold);
  box-shadow: var(--ct-shadow-xs);
}

.ct-dialog {
  inline-size: min(
    calc(100% - (2 * var(--ct-space-4))),
    var(--dialog-width, 36rem)
  );
  max-block-size: min(90dvh, 48rem);
  padding: 0;
  overflow: auto;
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-color-surface-raised);
  color: var(--ct-color-text-primary);
  box-shadow: var(--ct-elevation-modal);
}

.ct-dialog::backdrop {
  background: var(--ct-color-surface-overlay);
}

.ct-dialog__header,
.ct-dialog__body,
.ct-dialog__footer {
  padding: var(--ct-space-5);
}

.ct-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ct-space-4);
  border-block-end: var(--ct-border-width) solid var(--ct-color-border);
}

.ct-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ct-space-3);
  border-block-start: var(--ct-border-width) solid var(--ct-color-border);
}

.ct-drawer {
  position: fixed;
  z-index: var(--ct-z-index-modal);
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(100%, var(--drawer-width, 30rem));
  overflow-y: auto;
  border-inline-start: var(--ct-border-width) solid var(--ct-color-border);
  background: var(--ct-color-surface-raised);
  box-shadow: var(--ct-elevation-modal);
}

.ct-tooltip {
  z-index: var(--ct-z-index-tooltip);
  max-inline-size: 18rem;
  padding: var(--ct-space-2) var(--ct-space-3);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-color-surface-inverse);
  color: var(--ct-color-text-inverse);
  font-size: var(--ct-font-size-xs);
  line-height: var(--ct-line-height-heading);
  box-shadow: var(--ct-shadow-sm);
}

.ct-empty-state {
  display: grid;
  min-block-size: 12rem;
  place-items: center;
  gap: var(--ct-space-3);
  padding: var(--ct-space-8);
  border: var(--ct-border-width) dashed var(--ct-color-border-strong);
  border-radius: var(--ct-radius-lg);
  color: var(--ct-color-text-secondary);
  text-align: center;
}

.ct-skeleton {
  border-radius: var(--ct-radius-sm);
  background: var(--ct-color-surface-muted);
  animation: ct-skeleton-pulse calc(2 * var(--ct-motion-duration-loop))
    var(--ct-motion-easing-standard) infinite;
}

.ct-spinner {
  inline-size: var(--ct-size-icon-md);
  block-size: var(--ct-size-icon-md);
  border: var(--ct-border-width-strong) solid var(--ct-color-border);
  border-block-start-color: var(--ct-color-action);
  border-radius: 50%;
  animation: ct-spinner-rotate var(--ct-motion-duration-loop) linear infinite;
}

.ct-auth {
  display: grid;
  min-block-size: 100dvh;
  place-items: center;
  padding: var(--ct-layout-gutter);
  background: var(--ct-color-surface-subtle);
}

.ct-auth__panel {
  inline-size: min(100%, 28rem);
  padding: var(--ct-space-6);
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-color-surface-raised);
  box-shadow: var(--ct-shadow-sm);
}

@keyframes ct-skeleton-pulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ct-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* States */
.ct-ui
  :where(
    button,
    input,
    select,
    textarea,
    [role='button'],
    [role='tab'],
    [role='menuitem']
  ):disabled,
.ct-ui :where([aria-disabled='true']) {
  cursor: not-allowed;
  opacity: 0.55;
}

.ct-ui .is-loading {
  cursor: wait;
}

.ct-ui .is-loading > :not(.u-visually-hidden) {
  opacity: 0.62;
}

/* Responsive composition */
@media (min-width: 48rem) {
  .ct-sidebar-layout {
    grid-template-columns: var(--ct-layout-sidebar) minmax(0, 1fr);
  }

  .ct-card__header,
  .ct-card__body,
  .ct-card__footer {
    padding: var(--ct-space-6);
  }
}

@media (min-width: 100rem) {
  .ct-container {
    max-inline-size: var(--ct-layout-content-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-ui *,
  .ct-ui *::before,
  .ct-ui *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

@media (forced-colors: active) {
  .ct-ui :where(a, button, input, select, textarea):focus-visible {
    outline-color: Highlight;
  }
}