Briven/apps/studio/styles/globals.css

@import 'config/tailwind.config.css';
@import './../../../packages/studio/ui/build/css/themes/classic-dark.css';
@import 'config/typography.css';

@source '../pages/**/*.{js,ts,jsx,tsx}';
@source '../components/**/*.{js,ts,jsx,tsx}';
@source './../../../packages/studio/ui/src/**/*.{tsx,ts,js}';
@source './../../../packages/studio/ui-patterns/src/**/*.{tsx,ts,js}';

@theme {
  --text-grid: 13px;

  --color-typography-body-light: hsl(var(--foreground-light));
  --color-typography-body-dark: hsl(var(--foreground-light));
  --color-typography-body-secondary-light: hsl(var(--foreground-lighter));
  --color-typography-body-secondary-dark: hsl(var(--foreground-lighter));
  --color-typography-body-strong-light: hsl(var(--foreground-default));
  --color-typography-body-strong-dark: hsl(var(--foreground-default));
  --color-typography-body-faded-light: hsl(var(--foreground-muted));
  --color-typography-body-faded-dark: hsl(var(--foreground-muted));

  --color-table-body-light: hsl(var(--background-default));
  --color-table-body-dark: hsl(var(--background-default));
  --color-table-header-light: hsl(var(--background-surface-100));
  --color-table-header-dark: hsl(var(--background-surface-100));
  --color-table-footer-light: hsl(var(--background-surface-100));
  --color-table-footer-dark: hsl(var(--background-surface-100));
  --color-table-border-light: hsl(var(--border-default));
  --color-table-border-dark: hsl(var(--border-default));

  --color-panel-body-light: hsl(var(--background-surface-100));
  --color-panel-body-dark: hsl(var(--background-surface-100));
  --color-panel-header-light: hsl(var(--background-surface-100));
  --color-panel-header-dark: hsl(var(--background-surface-100));
  --color-panel-footer-light: hsl(var(--background-surface-100));
  --color-panel-footer-dark: hsl(var(--background-surface-100));
  --color-panel-border-light: hsl(var(--border-default));
  --color-panel-border-dark: hsl(var(--border-default));
  --color-panel-border-interior-light: hsl(var(--border-muted));
  --color-panel-border-interior-dark: hsl(var(--border-muted));
  --color-panel-border-hover-light: hsl(var(--border-muted));
  --color-panel-border-hover-dark: hsl(var(--border-muted));

  --animate-shimmer: shimmer 2s infinite linear;
  --animate-badge-shimmer: badge-shimmer 3s ease-in-out infinite;
  --animate-badge-pulse: badge-pulse 3s ease-in-out infinite;
  --animate-chevron-up: chevron-up 2s ease-in-out infinite;
  --animate-sway: sway 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-marketplace-featured-progress: marketplace-featured-progress linear forwards;
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes badge-shimmer {
  0% {
    transform: rotate(-45deg) translateX(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    transform: rotate(-45deg) translateX(100%);
    opacity: 0;
  }
  100% {
    transform: rotate(-45deg) translateX(100%);
    opacity: 0;
  }
}

@keyframes badge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes chevron-up {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

@keyframes sway {
  0%,
  100% {
    transform: rotate(-10deg) scale(1.5) translateY(4rem);
  }
  50% {
    transform: rotate(10deg) scale(1.5) translateY(2rem);
  }
}

@keyframes marketplace-featured-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

:root {
  --chart-1: var(--brand-default);
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --chart-blue: 217 91% 60%;
  --chart-warning: hsl(var(--warning-default));
  --chart-destructive: hsl(var(--destructive-default));
  --sidebar-background: var(--background-dash-sidebar);
  --sidebar-foreground: var(--foreground-default);
  --sidebar-primary: var(--foreground-default);
  --sidebar-primary-foreground: var(--warning-default);
  --sidebar-accent: var(--background-selection);
  --sidebar-accent-foreground: var(--foreground-default);
  --sidebar-border: var(--border-default);
  --sidebar-ring: 217.2 91.2% 59.8%;
  --header-height: 3rem;
}

[data-theme='dark'],
.dark {
  --chart-1: var(--brand-default);
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --chart-blue: 217 91% 65%;
  --chart-warning: hsl(var(--warning-default));
  --chart-destructive: hsl(var(--destructive-default));
  --sidebar-background: var(--background-dash-sidebar);
  --sidebar-foreground: var(--foreground-default);
  --sidebar-primary: var(--foreground-default);
  --sidebar-primary-foreground: var(--warning-default);
  --sidebar-accent: var(--background-selection);
  --sidebar-accent-foreground: var(--foreground-default);
  --sidebar-border: var(--border-default);
  --sidebar-ring: 217.2 91.2% 59.8%;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: hsl(var(--border-default, currentColor));
  }

  /* Global affordance: every interactive element shows pointer on hover.
     Tailwind v4 no longer ships default cursor: pointer on buttons. */
  button:not(:disabled),
  a[href],
  [role='button']:not([aria-disabled='true']),
  summary,
  label[for],
  select:not(:disabled),
  input[type='submit']:not(:disabled),
  input[type='button']:not(:disabled),
  input[type='reset']:not(:disabled),
  input[type='checkbox']:not(:disabled),
  input[type='radio']:not(:disabled) {
    cursor: pointer;
  }

  button:disabled,
  [role='button'][aria-disabled='true'] {
    cursor: not-allowed;
  }
}

html,
body,
#__next,
.main {
  @apply bg-dash-sidebar relative;
  @apply text-foreground;
  @apply overflow-x-clip;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

* {
  box-sizing: border-box;
}

.form-group .form-text,
.Form .form-text {
  @apply text-foreground-lighter;
}

.form-group input,
.form-group input[type='text'],
.form-group input[type='email'],
.form-group input[type='url'],
.form-group input[type='password'],
.form-group input[type='number'],
.form-group input[type='date'],
.form-group input[type='datetime-local'],
.form-group input[type='month'],
.form-group input[type='search'],
.form-group input[type='tel'],
.form-group input[type='time'],
.form-group input[type='week'],
.form-group input[multiple],
.form-group textarea,
.form-group select,
input.form-control,
.form-control input,
.form-control textarea {
  @apply block;
  @apply box-border;
  /* @apply  w-full ; */
  @apply rounded-md;
  @apply shadow-xs;
  @apply transition-all;
  @apply text-foreground;
  @apply border;
  @apply focus:shadow-md;

  @apply focus:border-stronger;
  @apply focus:ring-border-overlay;

  @apply bg-studio;
  @apply border-strong border;

  @apply outline-hidden;
  @apply focus:ring-2 focus:ring-current;
}

.form-group input,
.form-group select,
.form-group textarea {
  @apply px-4 py-2;
}

.form-group input:focus,
.form-group input[type='text']:focus,
.form-group input[type='email']:focus,
.form-group input[type='url']:focus,
.form-group input[type='password']:focus,
.form-group input[type='number']:focus,
.form-group input[type='date']:focus,
.form-group input[type='datetime-local']:focus,
.form-group input[type='month']:focus,
.form-group input[type='search']:focus,
.form-group input[type='tel']:focus,
.form-group input[type='time']:focus,
.form-group input[type='week']:focus,
.form-group input[multiple]:focus,
.form-group textarea:focus,
.form-group select:focus,
.form-group input:focus .form-control:focus {
  box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.1);
}

/* icons in date / time inputs */
.dark input[type='date']::-webkit-calendar-picker-indicator,
.dark input[type='datetime-local']::-webkit-calendar-picker-indicator,
.dark input[type='time']::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

input.is-invalid {
  @apply bg-red-100;
  @apply border border-red-700;
  @apply focus:ring-red-500;
  @apply placeholder:text-red-600;
}

input::placeholder {
  @apply text-foreground-lighter;
}

.form-group input::placeholder {
  @apply text-foreground-lighter;
}

.billing-input-fixed {
  @apply w-full appearance-none rounded-sm border bg-gray-700 py-2 px-3 leading-tight text-gray-300 shadow-sm;
}

.input-mono {
  input,
  textarea {
    @apply font-mono;
  }
}

.input-sm {
  input,
  textarea {
    @apply text-sm;
  }
}

.input-xs {
  input,
  textarea {
    @apply text-xs;
  }
}

input[type='radio'] {
  @apply p-0;
}

input[type='number'] {
  -moz-appearance: textfield; /* Firefox, Not included in tailwind styles reset */
}

/* TODO: It doesnt' work, need to check */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

div[data-radix-portal]:not(.portal--toast) {
  z-index: 2147483646 !important;
}

.billing-compute-radio {
  label {
    @apply items-center justify-between;
    &:last-child {
      opacity: 100 !important;
    }
  }
}

.recharts-tooltip-cursor {
  @apply fill-transparent;
}

.expandable-tr {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.expanded-row-content {
  display: grid;
  grid-column: 1/-1;
  justify-content: flex-start;
}

.multi-select {
  button {
    display: block;
    width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

.text-area-resize-none {
  textarea {
    @apply resize-none;
  }
}

.capitalize-sentence:first-letter {
  text-transform: capitalize;
}

.input-clear {
  input {
    @apply pr-7;
  }
}

/* to do: remove this CSS and do the same thing in a reusable tooltip component */
[data-radix-popper-content-wrapper] {
  @apply z-50!;
}

.settings-container {
  @apply mx-auto max-w-4xl xl:max-w-6xl;
}

.react-grid-item.react-grid-placeholder {
  @apply bg-brand-500!;
}

.react-grid-item > .react-resizable-handle::after {
  content: '';
  position: absolute;
  right: 3px !important;
  bottom: 3px !important;
  width: 6px !important;
  height: 6px !important;
  @apply border-strong! dark:border-r-2! dark:border-b-2! dark:border-overlay!;
}

@keyframes typewriter {
  from {
    width: 0;
  }
}

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

/*
 * Briven brand override — Phase 4 of BACKEND_FORK_BRIEF.md
 * Replaces Supabase's green (--brand-default 153 60 53) with briven's
 * brand green (#00e87a = 151.7 100 46). Source of truth lives in
 * packages/config/tailwind/theme.css (--color-primary). HSL form is
 * used here to integrate with Studio's existing theme variable shape.
 */
[data-theme='classic-dark'],
.classic-dark,
[data-theme='dark'],
.dark,
:root {
  --brand-default: 151.7deg 100% 45.5%;
  --brand-link: 151.7deg 100% 45.5%;
  --brand-600: 151.7deg 90% 60%;
  --brand-500: 151.7deg 80% 35%;
  --brand-400: 151.7deg 70% 22%;
  --brand-300: 151.7deg 60% 13%;
  --brand-200: 151.7deg 50% 8%;

  /* Phase 5 screen 3 — extend brand override to absolute scale tokens
   * (--color-brand-700..1000) so Tailwind utilities like bg-brand-900
   * resolve to briven green rather than upstream's supabase HSL. */
  --color-brand-700: hsla(151.7, 70%, 38%, 1);
  --color-brand-800: hsla(151.7, 85%, 42%, 1);
  --color-brand-900: hsla(151.7, 100%, 45.5%, 1);
  --color-brand-1000: hsla(151.7, 90%, 50%, 1);
}

/*
 * Briven typography override — Phase 5 (screen 2: project home, applies
 * chrome-wide because the layout components are shared). Force mono
 * across the app to match the terminal aesthetic of the control plane
 * (apps/web). Headings render lowercase per BRAND.md §3.
 *
 * `var(--font-mono)` resolves to Studio's existing fallback stack
 * (Source Code Pro -> Office Code Pro -> Menlo -> monospace). When the
 * Geist Mono webfont lands in Phase 6+, it slots into --font-custom-mono
 * and propagates through this override.
 */
:root {
  --font-sans: var(
    --font-geist-mono,
    'Geist Mono',
    'JetBrains Mono',
    'Source Code Pro',
    Menlo,
    monospace
  );
  --font-mono: var(
    --font-geist-mono,
    'Geist Mono',
    'JetBrains Mono',
    'Source Code Pro',
    Menlo,
    monospace
  );
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-mono);
}

/* Lowercase all chrome headings — matches lowercase brand voice. Decorative
 * <h*> inside marketing strings can opt out with .normal-case if needed. */
h1:not(.normal-case),
h2:not(.normal-case),
h3:not(.normal-case),
h4:not(.normal-case),
h5:not(.normal-case),
h6:not(.normal-case) {
  text-transform: lowercase;
}