@import "primeicons/primeicons.css";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./primevue/tailwind.css";
@import "tailwindcss/utilities";

.font-mono {
  font-size: 0.95rem;
}

/* Tabs */

.p-tablist-tab-list {
  @apply bg-transparent;
}

.p-tab {
  @apply font-normal;
}

.p-tab-active {
  @apply dark:text-primary-100;
}

.p-tablist-active-bar {
  @apply hidden;
}

/* MenuBar */

.p-menubar {
  @apply z-20 bg-transparent dark:bg-transparent;
}

/* DataTabel */

.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
  @apply bg-surface-50 dark:bg-surface-950;
}

.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
  @apply cursor-pointer bg-surface-100 text-surface-800 transition-none dark:bg-surface-800 dark:text-surface-0;
}

.p-datatable-tbody > tr {
  @apply transition-none;
}

.p-datatable-tbody > tr > td {
  @apply px-4 py-1.5;
}

.rq-grid.p-datatable-gridlines {
  .p-datatable-thead > tr > th {
    @apply border-t-0;

    &:first-child {
      @apply border-s-0;
    }

    &:last-child {
      @apply border-e-0;
    }
  }
}

.rq-grid.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) {
  .p-datatable-tbody > tr > td {
    &:first-child {
      border-inline-start-width: 0px;
    }
    &:last-child {
      border-inline-end-width: 0px;
    }
  }
}

/* Preset */

html {
  font-size: 0.875rem; /* 14px */
}

:root {
  --p-primary-50: #ecfdf5;
  --p-primary-100: #d1fae5;
  --p-primary-200: #a7f3d0;
  --p-primary-300: #6ee7b7;
  --p-primary-400: #34d399;
  --p-primary-500: #10b981;
  --p-primary-600: #059669;
  --p-primary-700: #047857;
  --p-primary-800: #065f46;
  --p-primary-900: #064e3b;
  --p-primary-950: #022c22;
  --p-surface-0: #ffffff;
  --p-surface-50: #fafafa;
  --p-surface-100: #f4f4f5;
  --p-surface-200: #e4e4e7;
  --p-surface-300: #d4d4d8;
  --p-surface-400: #a1a1aa;
  --p-surface-500: #71717a;
  --p-surface-600: #52525b;
  --p-surface-700: #3f3f46;
  --p-surface-800: #27272a;
  --p-surface-900: #18181b;
  --p-surface-950: #09090b;
  --p-content-border-radius: 6px;
}

:root.noir {
  --p-primary-0: #ffffff;
  --p-primary-50: #fafafa;
  --p-primary-100: #f4f4f5;
  --p-primary-200: #e4e4e7;
  --p-primary-300: #d4d4d8;
  --p-primary-400: #a1a1aa;
  --p-primary-500: #71717a;
  --p-primary-600: #52525b;
  --p-primary-700: #3f3f46;
  --p-primary-800: #27272a;
  --p-primary-900: #18181b;
  --p-primary-950: #09090b;
}

/* Light */
:root {
  --p-primary-color: var(--p-primary-500);
  --p-primary-contrast-color: var(--p-surface-0);
  --p-primary-hover-color: var(--p-primary-600);
  --p-primary-active-color: var(--p-primary-700);
  --p-content-border-color: var(--p-surface-200);
  --p-content-hover-background: var(--p-surface-100);
  --p-content-hover-color: var(--p-surface-800);
  --p-highlight-background: var(--p-primary-50);
  --p-highlight-color: var(--p-primary-700);
  --p-highlight-focus-background: var(--p-primary-100);
  --p-highlight-focus-color: var(--p-primary-800);
  --p-text-color: var(--p-surface-700);
  --p-text-hover-color: var(--p-surface-800);
  --p-text-muted-color: var(--p-surface-500);
  --p-text-hover-muted-color: var(--p-surface-600);
}

:root.noir {
  --p-primary-color: var(--p-primary-950);
  --p-primary-contrast-color: #fff;
  --p-primary-hover-color: var(--p-primary-800);
  --p-primary-active-color: var(--p-primary-700);
  --p-highlight-background: var(--p-surface-950);
  --p-highlight-color: #fff;
  --p-highlight-focus-background: var(--p-surface-700);
  --p-highlight-focus-color: #fff;
}

:root.dark {
  --p-primary-color: var(--p-primary-400);
  --p-primary-contrast-color: var(--p-surface-900);
  --p-primary-hover-color: var(--p-primary-300);
  --p-primary-active-color: var(--p-primary-200);
  --p-content-border-color: var(--p-surface-700);
  --p-content-hover-background: var(--p-surface-800);
  --p-content-hover-color: var(--p-surface-0);
  --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
  --p-highlight-color: rgba(255, 255, 255, 0.87);
  --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
  --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
  --p-text-color: var(--p-surface-0);
  --p-text-hover-color: var(--p-surface-0);
  --p-text-muted-color: var(--p-surface-400);
  --p-text-hover-muted-color: var(--p-surface-300);
}

:root.dark.noir {
  --p-primary-color: var(--p-primary-50);
  --p-primary-contrast-color: var(--p-surface-950);
  --p-primary-hover-color: var(--p-primary-200);
  --p-primary-active-color: var(--p-primary-300);
  --p-highlight-background: var(--p-surface-50);
  --p-highlight-color: var(--p-surface-950);
  --p-highlight-focus-background: var(--p-surface-300);
  --p-highlight-focus-color: var(--p-surface-950);
}
