/* layers specify which styles take precedence, from lowest to highest priority */
@layer base, cdk-overlay, kendo-theme, theme, components, utilities;
@import "tailwindcss";

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

/* Applies the rule on hover for PC, and always for mobile */
@custom-variant hover-always {
  @media (hover: hover) {
    &:hover {
      @slot;
    }
  }
  @media not all and (hover: hover) {
    & {
      @slot;
    }
  }
}

/* Kendo theme overrides */
/* https://www.telerik.com/design-system/docs/themes/integrations/tailwind/ */
/* https://www.telerik.com/design-system/docs/themes/kendo-themes/bootstrap/theme-variables/ */
@layer kendo-theme {
  @import "@progress/kendo-theme-bootstrap/dist/all.css";

  :root {
    --kendo-font-size: 14px;
    --kendo-font-family: var(--font-base);

    .dark {
      --kendo-color-app-surface: var(--color-alt-gray-1000);
      --kendo-color-on-app-surface: var(--color-base-white-1000);
      --kendo-color-surface-alt: var(--color-alt-gray-1000);
      --kendo-color-surface: var(--color-alt-gray-500);
      --kendo-color-border: var(--color-alt-blue-250);
      --kendo-color-border-alt: var(--color-alt-blue-250);
      --kendo-color-on-success: var(--color-alt-gray-1000);
      --kendo-color-primary: var(--color-alt-blue-500);
      --kendo-color-base-subtle-hover: var(--color-alt-blue-500);
    }
  }

  /*this is for context menus and dropdown selections*/
  kendo-popup.k-animation-container {
    z-index: 99998 !important;
  }

  /*this is for animated notification popups*/
  .k-notification-group {
    z-index: 99999;
  }
}

@layer components {
  /* the first sibling of router-outlet */
    router-outlet + * {
      @apply flex flex-col grow h-full;
    }

    /*this is for SPECIFICALLY the fast-tooltip pop-up*/
    /* 99998 since we stil want notifications with 99999 to appear above overlays*/
    .cdk-overlay-container {
      @apply z-99998;
    }

    .cdk-drag-preview::-webkit-scrollbar {
      display: none;
    }
}

@layer utilities {
  /* all elements inside the first sibling of router-outlet */
  * {
    @apply disabled:opacity-50 disabled:cursor-default  ;
  }
}

@theme {
  --font-base: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";

  --color-global-bar-light: #6464ff;
  --color-global-bar-dark: #0202a1;

  --color-highlight: #ffa500;

  /* bigger number = darker color */
  /* light theme colors */
  --color-base-blue-250: #aadbff;
  --color-base-blue-500: #93d2ff;
  --color-base-blue-750: #75c5ff;
  --color-base-blue-1000: #57b8ff;

  --color-base-gray-250: #e2e2e2;
  --color-base-gray-500: #cbcbcb;
  --color-base-gray-750: #b4b4b4;
  --color-base-gray-1000: #a0a0a0;

  --color-base-white-250: #f7f7f7;
  --color-base-white-500: #f4f4f4;
  --color-base-white-750: #eaeaea;
  --color-base-white-1000: #dbdbdb;

  --color-base-orange-250: #ff9d00;
  --color-base-orange-500: #ea9000;
  --color-base-orange-750: #db8700;
  --color-base-orange-1000: #cc7d00;

  --color-base-blurple-250: #2e2fa4;
  --color-base-blurple-500: #292b8e;
  --color-base-blurple-750: #222477;
  --color-base-blurple-1000: #1c1d60;

  --color-base-yellow-250: #ffd800;
  --color-base-yellow-500: #edc500;
  --color-base-yellow-750: #d1ae00;
  --color-base-yellow-1000: #ba9b00;

  --color-base-black-250: #474747;
  --color-base-black-500: #3d3d3d;
  --color-base-black-750: #353535;
  --color-base-black-1000: #262626;

  /* specifically should be used for errors / delete buttons */
  --color-base-red-250: #ffa197;
  --color-base-red-500: #ff7566;
  --color-base-red-750: #e54b40;
  --color-base-red-1000: #d8473c;

  /* dark theme colors */
  --color-alt-blue-250: #3c5372;
  --color-alt-blue-500: #374b68;
  --color-alt-blue-750: #2d3e56;
  --color-alt-blue-1000: #273549;

  --color-alt-gray-250: #20304c;
  --color-alt-gray-500: #1a273d;
  --color-alt-gray-750: #152033;
  --color-alt-gray-1000: #131d2d;

  /* specifically should be used for errors / delete buttons */
  --color-alt-red-250: #c61000;
  --color-alt-red-500: #ad0b00;
  --color-alt-red-750: #960a00;
  --color-alt-red-1000: #7a0800;

  --color-inverse: #1f2937;
  --color-inverse-foreground: white;

  --color-dark-inverse: white;
  --color-dark-inverse-foreground: #030712;
}
