@import "tailwindcss";

/* Custom gradients that are not easy to build using tailwind */
@import "./gradients.css" layer(base);
@import "../modules/common/blocknote/styles.css" layer(base);

@config '../../tailwind.config.ts';

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

  @font-face {
    font-family: "Open Sans";
    src:
      local("Open Sans Light"),
      local("OpenSans-Light"),
      url(/static/fonts/OpenSans-Light.woff2) format("woff2"),
      url(/static/fonts/OpenSans-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Open Sans";
    src:
      local("Open Sans"),
      local("OpenSans"),
      url(/static/fonts/OpenSans-Regular.woff2) format("woff2"),
      url(/static/fonts/OpenSans-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Open Sans";
    src:
      local("Open Sans Semibold"),
      local("OpenSans-Semibold"),
      url(/static/fonts/OpenSans-SemiBold.woff2) format("woff2"),
      url(/static/fonts/OpenSans-SemiBold.woff) format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Open Sans";
    src:
      local("Open Sans Bold"),
      local("OpenSans-Bold"),
      url(/static/fonts/OpenSans-Bold.woff2) format("woff2"),
      url(/static/fonts/OpenSans-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
}

@utility submenu-section {
  &:before {
    border-left: 2px dotted hsl(var(--foreground));
    content: "";
    display: block;
    position: absolute;
    margin-top: 0.5rem;
    margin-left: 1.7rem;
    opacity: 0.5;
    z-index: 0;
    width: 0.05rem;
    height: calc(100% - 1.5rem);
  }
}

@layer components {
  .focus-effect {
    @apply focus-visible:outline-none sm:focus-visible:ring-2 focus-visible:ring-ring focus-visible:shadow-none focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }
}

@layer base {
  .bn-container.bn-shadcn,
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 10%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 0%;
    --primary: 240 6% 10%;
    --primary-foreground: 0 0% 95%;
    --secondary: 240 5% 94%;
    --secondary-foreground: 240 6% 20%;
    --muted: 240 5% 77.2%;
    --muted-foreground: 240 4% 40%;
    --accent: 240 10% 92%;
    --accent-foreground: 240 10% 10%;
    --destructive: 0 85% 40%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 10% 92%;
    --input: 240 10% 92%;
    --ring: 240 10% 10%;
    --radius: 0.5rem;
    --success: 120 100% 30%;
  }

  .bn-container.bn-shadcn.dark,
  .dark {
    --background: 240 10% 9%;
    --foreground: 0 0% 95%;
    --card: 240 8% 12%;
    --card-foreground: 0 0% 95%;
    --popover: 240 10% 9%;
    --popover-foreground: 0 0% 95%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 8% 15%;
    --secondary: 240 8% 15%;
    --secondary-foreground: 0 0% 95%;
    --muted: 240 8% 25%;
    --muted-foreground: 240 8% 74.9%;
    --accent: 240 8% 25%;
    --accent-foreground: 0 0% 95%;
    --destructive: 0 62.8% 50%;
    --destructive-foreground: 0 0% 95%;
    --border: 240 8% 20%;
    --input: 240 8% 25%;
    --ring: 240 8% 83.9%;
    --success: 120 100% 40%;
  }

  .theme-base.light {
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --accent: 240 8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
  }

  .theme-base.dark {
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 8% 15%;
    --secondary-foreground: 0 0% 98%;
    --accent: 12 8% 15.1%;
    --accent-foreground: 0 0% 98%;
    --muted-foreground: 240, 8%, 52.45%;
  }
}

@layer base {
  html {
    @apply font-sans overscroll-none;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground min-h-full overscroll-none;
  }

  /* For small screens we enlarge all elements by using rem everywhere, and then simply increase font-size */
  @media (max-width: 639px) {
    html {
      font-size: 18px;
    }
  }

  /* Disable clicking scrolbar tracks to change position */
  .scrollbar-track {
    pointer-events: none;
  }

  .scrollbar-track .scrollbar-thumb {
    pointer-events: auto;
  }

  /* Overwrite elements for focus view when table is present in it  */
  body.focus-view-table,
  .focus-view-table .focus-view-container {
    overflow: hidden;
    height: 100vh !important;
  }

  .focus-view-table .focus-view-scroll {
    overflow-y: auto;
    margin-bottom: 0 !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    width: 100vw !important;
  }

  /* Hide elements when focus view is active */
  .focus-view #app-content-inner *:not(.focus-view-container, .focus-view-container *) {
    display: none !important;
  }

  /* Hide devtools */
  .tsqd-open-btn-container,
  .TanStackRouterDevtools > button {
    display: none !important;
  }

  /* Read-only mode styles */
  .read-only-mode .read-only-restrict-hide {
    display: none !important;
  }

  .read-only-mode .read-only-restrict-disabled {
    opacity: 0.6 !important;
    pointer-events: none !important;
  }
}
