/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

@config "../tailwind.config.js";
@import "tailwindcss";
@import "react18-json-view/src/style.css";

html,
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
    sans-serif;
  box-sizing: border-box;
}

*::before {
  box-sizing: border-box;
}

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

@utility auto-min-h {
  height: var(--auto-min-height);
  min-height: 0;
}

/* The `@theme inline` block exposes CSS custom properties that Tailwind resolves
 * through `var(--color-*)` tokens. Runtime updates from `office-theme.ts` rewrite
 * the `--background`, `--foreground`, and neutral scale values as Outlook themes
 * change. To add a new semantic token (for example `--color-info`), define it here
 * and mirror its underlying `--foo` source in both the `:root` and `.dark` blocks.
 */
@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --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-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-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-slide-from-left: slide-from-left 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895);
  --animate-slide-to-left: slide-to-left 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895);
  --animate-move: move 2s infinite cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Container */
  --container-center: true;
  --container-padding: 2rem;
  --container-screen-2xl: 1400px;

  /* Custom breakpoints */
  --breakpoint-3xl: 1792px;
  --breakpoint-4xl: 2048px;


  /* Shadows */
  --shadow-menu: 0px 4px 8px 0px #0000003D;
  --shadow-modal: 0px 4px 8px 0px #0000003D, 0px 0px 1px 0px #00000052;

  /* Modal background shadow color */
  --color-modal-background-shadow: hsl(0 0% 22% / 0.6);
  --color-modal-overlay: var(--color-modal-background-shadow);

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

  
  /* UI Library colors */
  --color-black: #000;
  --color-white: #fff;
  --color-transparent-overlay: hsla(0, 0%, 0%, 0.4);
  --color-segmented-control-background: hsl(223, 14%, 90%);

  --color-gray-100: #f2f2f2;
  --color-gray-200: #e6e6e6;
  --color-gray-300: #dadada;
  --color-gray-400: #c4c4c4;
  --color-gray-500: #999999;
  --color-gray-600: #666666;
  --color-gray-700: #4d4d4d;
  --color-gray-800: #333333;

  /* Primary */
  --color-orange-50: hsl(22 91% 95%);
  --color-orange-100: hsl(22 91% 90%);
  --color-orange-200: hsl(22 91% 80%);
  --color-orange-400: hsl(22 91% 60%);
  --color-orange-500: hsl(22 91% 50%);
  --color-orange-600: hsl(22 91% 40%);

  --color-cyan-40: hsl(189 72% 96%);
  --color-cyan-140: hsl(189 72% 86%);
  --color-cyan-240: hsl(189 72% 76%);
  --color-cyan-340: hsl(189, 72%, 66%);
  --color-cyan-540: hsl(189 72% 46%);

  --color-blue-60: hsl(213 98% 94%);
  --color-blue-160: hsl(213 98% 84%);
  --color-blue-360: hsl(213 98% 64%);
  --color-blue-460: hsl(213 98% 54%);
  --color-blue-560: hsl(213 98% 44%);
  --color-blue-660: hsl(213 98% 34%);

  /* Neutral */
  --color-neutral-20: hsl(var(--neutral-20));
  --color-neutral-50: hsl(var(--neutral-50));
  --color-neutral-100: hsl(var(--neutral-100));
  --color-neutral-150: hsl(var(--neutral-150));
  --color-neutral-200: hsl(var(--neutral-200));
  --color-neutral-250: hsl(var(--neutral-250));
  --color-neutral-300: hsl(var(--neutral-300));
  --color-neutral-400: hsl(var(--neutral-400));
  --color-neutral-500: hsl(var(--neutral-500));
  --color-neutral-600: hsl(var(--neutral-600));
  --color-neutral-700: hsl(var(--neutral-700));
  --color-neutral-750: hsl(var(--neutral-750));
  --color-neutral-850: hsl(var(--neutral-850));
  --color-neutral-950: hsl(var(--neutral-950));

  /* Descriptive */
  --color-green-100: hsl(155 78% 90%);
  --color-green-200: hsl(155 78% 80%);
  --color-green-400: hsl(155 78% 60%);
  --color-green-600: hsl(155 78% 40%);
  --color-green-700: hsl(155 78% 30%);
  --color-green-800: hsl(155 78% 20%);

  --color-yellow-150: hsl(53 89% 85%);
  --color-yellow-250: hsl(53 89% 75%);
  --color-yellow-350: hsl(53 89% 65%);
  --color-yellow-450: hsl(53 89% 55%);
  --color-yellow-550: hsl(53 89% 45%);
  --color-yellow-850: hsl(53 89% 15%);

  --color-red-50: hsl(2 86% 95%);
  --color-red-150: hsl(2 86% 85%);
  --color-red-450: hsl(2 86% 55%);
  --color-red-550: hsl(2 86% 45%);
  --color-red-650: hsl(2 86% 35%);

  --color-black-5: rgba(0, 0, 0, 0.05);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-15: rgba(0, 0, 0, 0.15);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-70: rgba(0, 0, 0, 0.7);
  --color-black-90: rgba(0, 0, 0, 0.9);

  /* Additional */
  --color-pink-150: hsl(340 82% 85%);
  --color-pink-450: hsl(340 82% 55%);

  --color-purple-200: hsl(291 47% 80%);
  --color-purple-400: hsl(291 47% 60%);
}

@layer base {
  /* Base light-theme defaults. These values represent our fallback palette when
   * Outlook has not yet provided theme colors. If you want to tweak the static
   * light appearance, adjust the tokens here and leave the runtime logic in
   * `office-theme.ts` unchanged so Outlook can still override them.
   */
  :root {
    color-scheme: light;
    --background: 223 28% 95%;
    --foreground: 222 26% 15%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 26% 15%;

    --card: 0 0% 100%;
    --card-foreground: 222 26% 15%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;

    --primary: 213 98% 44%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 100%;
    --secondary-foreground: 213 98% 44%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 222 26% 15%;

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

    --ring: 213 98% 84%; /* blue-160 */

    --neutral-20: 240 20% 98%;
    --neutral-50: 223 28% 95%;
    --neutral-100: 222 26% 90%;
    --neutral-150: 222 26% 85%;
    --neutral-200: 222 26% 80%;
    --neutral-250: 222 26% 75%;
    --neutral-300: 222 26% 70%;
    --neutral-400: 222 26% 60%;
    --neutral-500: 222 26% 50%;
    --neutral-600: 222 26% 40%;
    --neutral-700: 222 26% 30%;
    --neutral-750: 222 26% 25%;
    --neutral-850: 222 26% 15%;
    --neutral-950: 222 26% 5%;

    --radius: 0.5rem;
  }

  /* Dark theme overrides. When `office-theme.ts` detects a dark Outlook theme it
   * toggles the `dark` class on `document.documentElement`, which tells Tailwind
   * to apply this block. Only update these defaults if you need to change the
   * fallback experience; the dynamic neutral range and background still come from
   * the host theme at runtime.
   */
  .dark {
    color-scheme: dark;
    --background: 222 26% 10%;
    --foreground: 210 40% 96%;

    --muted: 220 18% 18%;
    --muted-foreground: 220 12% 73%;

    --popover: 222 26% 12%;
    --popover-foreground: 210 32% 95%;

    --card: 220 24% 14%;
    --card-foreground: 210 38% 96%;

    --border: 222 16% 24%;
    --input: 222 16% 24%;

    --primary: 213 98% 44%;
    --primary-foreground: 0 0% 98%;

    --secondary: 220 20% 18%;
    --secondary-foreground: 210 36% 95%;

    --accent: 220 28% 26%;
    --accent-foreground: 210 38% 95%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --ring: 213 98% 64%;

    --neutral-20: 222 22% 14%;
    --neutral-50: 222 22% 18%;
    --neutral-100: 222 22% 22%;
    --neutral-150: 222 22% 26%;
    --neutral-200: 222 22% 30%;
    --neutral-250: 222 22% 34%;
    --neutral-300: 222 22% 38%;
    --neutral-400: 222 22% 44%;
    --neutral-500: 222 22% 50%;
    --neutral-600: 222 22% 58%;
    --neutral-700: 222 22% 64%;
    --neutral-750: 222 22% 70%;
    --neutral-850: 222 22% 78%;
    --neutral-950: 222 22% 86%;

    --color-black-5: hsla(0 0% 100% / 0.06);
    --color-black-10: hsla(0 0% 100% / 0.1);
    --color-black-15: hsla(0 0% 100% / 0.15);
    --color-black-30: hsla(0 0% 100% / 0.3);
    --color-black-50: hsla(0 0% 100% / 0.5);
    --color-black-70: hsla(0 0% 100% / 0.7);
    --color-black-90: hsla(0 0% 100% / 0.9);
  }

  /* Keyframes for animations */
  @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; }
  }

  @keyframes slide-from-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }

  @keyframes slide-to-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }

  @keyframes move {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
}

.ProseMirror {
  outline: none;
}

.suggestion-highlight, .unfocused-selection-highlight {
  @apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;
}

/* Custom scrollbar styles to replace tailwind-scrollbar plugin */
.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, #afb9d0) var(--scrollbar-track, transparent);
}

.scrollbar::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track, transparent);
  border-radius: var(--scrollbar-track-radius, 0);
}

.scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #afb9d0);
  border-radius: var(--scrollbar-thumb-radius, 0);
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, var(--scrollbar-thumb, #384461));
}

.scrollbar::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb, #5e72a1)));
}

/* Scrollbar utility classes */
.scrollbar-track-transparent {
  --scrollbar-track: transparent;
}

.scrollbar-thumb-neutral-250 {
  --scrollbar-thumb: #afb9d0;
}

.scrollbar-thumb-neutral-700 {
  --scrollbar-thumb-hover: #384461;
}

.scrollbar-thumb-neutral-500 {
  --scrollbar-thumb-active: #5e72a1;
}

.scrollbar-thumb-rounded-full {
  --scrollbar-thumb-radius: 9999px;
  --scrollbar-track-radius: 9999px;
}