platform/src/apps/officer-web/styles/globals.css

@import 'tailwindcss';
@plugin 'tailwindcss-animate';

@custom-variant dark (&:is(.dark *));

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

@theme {
  /* Duck Landing Page Colors */
  --color-duck-yellow: var(--duck-yellow);
  --color-duck-orange: var(--duck-orange);
  --color-duck-teal: var(--duck-teal);
  --color-duck-forest: var(--duck-forest);
  --color-duck-dark: var(--duck-dark);
  --color-duck-beige: var(--duck-beige);

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-brand: hsl(var(--brand));
  --color-brand-foreground: hsl(var(--brand-foreground));
  --color-brand-muted: hsl(var(--brand-muted));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));

  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));

  --color-info: hsl(var(--info));
  --color-info-foreground: hsl(var(--info-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-cta: hsl(var(--cta));
  --color-cta-foreground: hsl(var(--cta-foreground));

  --color-ctahover: hsl(var(--ctahover));

  --color-naturegreen: hsl(var(--naturegreen));
  --color-naturegreen-foreground: hsl(var(--naturegreen-foreground));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --animate-accordion-down: accordion-down 0.2s ease-out forwards;
  --animate-accordion-up: accordion-up 0.2s ease-out forwards;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer base {
  :root {
    /* Duck brand hex colors */
    --duck-yellow: #f4c430;
    --duck-orange: #ea580c;
    --duck-teal: #0891b2;
    --duck-forest: #166534;
    --duck-dark: #14532d;
    --duck-beige: #e7d4b5;

    /* Page background */
    --pixel-grid-color: rgba(20, 83, 45, 0.1);

    /* Glass surfaces */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --dock-bg: rgba(0, 0, 0, 0.15);
    --dock-border: rgba(255, 255, 255, 0.1);
    --dock-tooltip-bg: rgba(0, 0, 0, 0.75);

    /* Card component */
    --card-bg: rgba(237, 231, 222, 0.9);
    --card-grid-color: rgba(20, 83, 45, 0.08);

    --cta: 211 74.77% 45.58%;
    --cta-foreground: 0 0% 100%;

    --naturegreen: 145 79% 38%;
    --naturegreen-foreground: 0 0% 100%;

    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 211 74.77% 45.58%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --success: 142.1 76.2% 36.3%;
    --success-foreground: 355.7 100% 97.3%;

    --brand: 145 79% 38%;
    --brand-foreground: 0 0% 100%;
    --brand-muted: 145 40% 90%;

    --warning: 43 96% 56%;
    --warning-foreground: 0 0% 0%;

    /* The fifth state tone. "In progress" and "merged" are neither good news nor bad, and painting
       them with --success makes a merged PR and an open one look like the same thing. Violet because
       it has to stay legible next to success green and destructive red at pill size. */
    --info: 263 70% 50%;
    --info-foreground: 0 0% 100%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    /* Chart gradients */
    --chart-primary: 211 82% 64%;
    --chart-secondary: 211 82% 84%;

    /* Status colors */
    --status-success: 142 76% 36%;
    --status-warning: 43 96% 56%;
    --status-in-progress: 211 82% 64%;

    /* Hover Effect */
    --ctahover: 211 91.53% 34.82%;
  }

  .dark {
    /* Duck brand — lightened for dark-mode contrast */
    --duck-teal: #22d3ee;
    --duck-dark: #f1f5f9;
    --duck-forest: #4ade80;
    --duck-beige: #292524;

    /* Page background */
    --pixel-grid-color: rgba(200, 230, 210, 0.08);

    /* Glass surfaces */
    --glass-bg: rgba(0, 0, 0, 0.2);
    --glass-border: rgba(255, 255, 255, 0.1);
    --dock-bg: rgba(0, 0, 0, 0.3);
    --dock-border: rgba(255, 255, 255, 0.08);
    --dock-tooltip-bg: rgba(0, 0, 0, 0.85);

    /* Card component */
    --card-bg: rgba(10, 20, 15, 0.9);
    --card-grid-color: rgba(200, 230, 210, 0.06);

    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 211 82% 64%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --success: 142.1 76.2% 36.3%;
    --success-foreground: 355.7 100% 97.3%;

    --brand: 145 60% 45%;
    --brand-foreground: 0 0% 100%;
    --brand-muted: 145 30% 25%;

    --warning: 43 96% 56%;
    --warning-foreground: 0 0% 0%;

    /* Lifted well above the light value — 50% lightness violet on a near-black background reads as
       muddy grey at 12px, which is exactly the size it is used at. */
    --info: 263 90% 70%;
    --info-foreground: 0 0% 100%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;

    /* Chart gradients */
    --chart-primary: 211 82% 64%;
    --chart-secondary: 211 82% 84%;

    /* Status colors */
    --status-success: 142 76% 36%;
    --status-warning: 43 96% 56%;
    --status-in-progress: 211 82% 64%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

[data-sonner-toaster] {
  z-index: 700 !important;
}

/* File Browser — Context menu hover behavior */
/* Code Editor — thin dark scrollbars */
.code-editor-scrollable {
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
}

.code-editor-scrollable::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.code-editor-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.code-editor-scrollable::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

.code-editor-scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Chat — the background-task strip. A default horizontal scrollbar is ~15px tall and is laid out INSIDE
   the row, so it stole most of the chips' breathing room and made the tray read as squeezed. Thin, and
   neutral enough to sit on either theme. */
.task-strip {
  scrollbar-width: thin;
  scrollbar-color: rgb(128 128 128 / 0.3) transparent;
}

.task-strip::-webkit-scrollbar {
  height: 4px;
}

.task-strip::-webkit-scrollbar-track {
  background: transparent;
}

.task-strip::-webkit-scrollbar-thumb {
  background: rgb(128 128 128 / 0.3);
  border-radius: 2px;
}

.task-strip:hover::-webkit-scrollbar-thumb {
  background: rgb(128 128 128 / 0.5);
}

.file-grid:has([data-state='open']) [data-file-item]:not([data-state='open']) {
  pointer-events: none;
}

.file-grid:has([data-state='open']) [data-file-item]:not([data-state='open']) .file-item-ellipsis {
  opacity: 0 !important;
}

.file-grid [data-file-item][data-state='open'] .file-item-ellipsis {
  opacity: 1 !important;
}