@import 'tailwindcss';
/*
  ---break---
*/
@plugin 'tailwindcss-animate';
@plugin "@tailwindcss/typography";
@custom-variant dark (&:is(.dark *));


/* C1:My Classes*/


html{
  scroll-behavior: smooth;
}

/*-----------------------------------------------*/


@utility text-dark-900_light-25{
  @apply dark:text-gray-25 text-gray-900
}

@utility text-dark-900_light-200{
  @apply dark:text-gray-200  text-gray-900
}

@utility text-dark-400_light-600{
  @apply text-gray-600 dark:text-gray-400
}

@utility text-dark-400_light-300{
  @apply text-gray-400 dark:text-gray-300
}

@utility text-dark-700_light-300{
  @apply text-gray-700 dark:text-gray-300
}



@utility border-dark800_light200 {
  @apply dark:border-gray-800 border-gray-200;
}



/*-----------------------------------------------*/

@utility c-text-h1{
  @apply text-4xl font-bold tracking-tight text-gray-900 dark:text-white
}

@utility c-text-h2{
  @apply text-3xl font-bold tracking-tight text-gray-900 dark:text-white
}

@utility c-text-h3{
  @apply text-2xl font-bold tracking-tight text-gray-900 dark:text-white
}

@utility c-border{
  @apply border-gray-200 dark:border-gray-800
}


@utility c-card {
  @apply bg-white dark:bg-gray-900 shadow-md dark:shadow-none rounded-lg overflow-hidden
}

@utility c-card-title {
  @apply text-gray-900 dark:text-gray-100 font-medium
}

@utility c-card-description {
  @apply text-gray-600 dark:text-gray-400 text-sm
}

@utility c-card-meta {
  @apply text-gray-800 dark:text-gray-300
}


@utility c-card-animation{
  @apply relative transition-all duration-500 hover:shadow-brand-500/15 hover:-translate-y-2
}

@utility c-stat-card {
  @apply  h-32 rounded-lg flex flex-col justify-center items-center gap-y-1 cursor-pointer
}

@utility c-scale-animation {
  @apply hover:scale-105 transition-transform duration-100 ease-in
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset; /* Change 'white' to your desired background */
  box-shadow: 0 0 0 1000px white inset;
  /*-webkit-text-fill-color: #000 ; !* Optional: to set text color *!*/
  transition: background-color 5000s ease-in-out 0s; /* Prevents quick flash */
}

.dark {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-gray-950) inset; /* Change 'white' to your desired background */
    box-shadow: 0 0  1000px var(--color-gray-950) inset;
    -webkit-text-fill-color: white ; /* Optional: to set text color */
    transition: background-color 5000s ease-in-out 0s; /* Prevents quick flash */
  }
}

html,
body,
:root {
  height: 100%;
}

/*----------------------------*/

@theme {
  --font-dana: var(--font-dana);

  --color-brand-25: #fcfaff;
  --color-brand-50: #edfaff;
  --color-brand-100: #d6f2ff;
  --color-brand-200: #b5eaff;
  --color-brand-300: #83dfff;
  --color-brand-400: #48cbff;
  --color-brand-500: #1eacff;
  --color-brand-600: #068eff;
  --color-brand-700: #007aff;
  --color-brand-800: #085dc5;
  --color-brand-900: #0d519b;
  --color-brand-950: #0e315d;

  --color-action-success: #31d9b3;
  --color-action-warning: #ffae1f;
  --color-action-error: #e57050;
  --color-action-info: #539bff;

  --color-action-light-success: #e3fdf7;
  --color-action-light-warning: #fef5e5;
  --color-action-light-error: #fdede8;
  --color-action-light-info: #ebf3fe;

  --color-gray-25: #fcfcfd;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f2f4f7;
  --color-gray-200: #e4e7ec;
  --color-gray-300: #d0d5dd;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1d2939;
  --color-gray-900: #101828;
  --color-gray-950: #0c111d;

  --color-social-facebook: #1877f2;
  --color-social-twitter: #1da1f2;
  --color-social-you-tube: #ff0000;
  --color-social-linkedin: #0a66c2;
  --color-social-instagram: #c32aa3;
  --color-social-dribbble: #ea4c89;
  --color-social-Git-hub: #333333;
  --color-social-telegram: #0088cc;

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

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

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

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

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

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

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

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

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --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;
  --animate-accordion-up: accordion-up 0.2s ease-out;

}

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

/*
  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);
  }
}

@utility scroll-thin {
  @apply overflow-y-auto; /* Ensure it applies to scrollable elements */

  &::-webkit-scrollbar {
    width: 2px; /* Thin scrollbar */
  }

  &::-webkit-scrollbar-thumb {
    background-color: #a0a0a0; /* Thumb color */
    border-radius: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f0f0f0; /* Track color */
  }
}


@utility text-main-t {
  @apply dark:text-white text-gray-900;
}

@utility text-sub-t {
  @apply dark:text-gray-400 text-gray-600;
}

@utility background-dark950_light50 {
  @apply dark:bg-gray-950 bg-white;
}

@utility background-dark900_light50 {
  @apply dark:bg-gray-900 bg-white;
}








@layer base {
  :root {
    --background: #ffffff;
    --foreground: #0a0a0a;
    --card: var(--color-white);
    --card-foreground: #0a0a0a;
    --popover: #ffffff;
    --popover-foreground: #0a0a0a;
    --primary: #068eff; /* brand-600 */
    --primary-foreground: var(--color-white);
    --secondary: var(--color-gray-800);
    --secondary-foreground: #1a1a1a;
    --muted: #f5f5f5;
    --muted-foreground: var(--color-gray-600);
    --accent: var(--color-gray-100);
    --accent-foreground: #1a1a1a;
    --destructive: var(--color-action-error);
    --destructive-foreground: #fafafa;
    --border: #e5e5e5;
    --input: #e5e5e5;
    --ring: var(--color-brand-700);
    --radius: 0.5rem;
    --chart-1: #e87d28;
    --chart-2: #199e84;
    --chart-3: #16435c;
    --chart-4: #f0c800;
    --chart-5: #fca047;
  }

  .dark {
    --background: var(--color-gray-950);
    --foreground: #fafafa;
    --card: var(--color-gray-900);
    --card-foreground: #fafafa;
    --popover: var(--color-gray-900);
    --popover-foreground: #fafafa;
    --primary: var(--color-brand-400);
    --primary-foreground: var(--color-gray-900);
    --secondary: var(--color-gray-100);
    --secondary-foreground: #fafafa;
    --muted: var(--color-gray-800);
    --muted-foreground: var(--color-gray-400);
    --accent: var(--color-gray-800);
    --accent-foreground: #fafafa;
    --destructive: var(--color-action-error);
    --destructive-foreground: #fafafa;
    --border: var(--color-gray-700);
    --input: var(--color-gray-700);
    --ring: var(--color-brand-400);
    --chart-1: #3366cc;
    --chart-2: #26a69a;
    --chart-3: #ff9900;
    --chart-4: #aa00ff;
    --chart-5: #ff007f;
  }

}



@layer utilities {
  .scroll-container {
    height: 40px;
    overflow-y: scroll;
  }

  .scroll-container::-webkit-scrollbar {
    width: 6px;
  }

  .scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .scroll-container::-webkit-scrollbar-thumb {
    background: #83dfff;
  }

  .scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  .scroll-container::-webkit-scrollbar-button {
    display: none;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@keyframes accordion-down {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px; /* adjust based on your content */
    opacity: 1;
  }
}

@keyframes accordion-up {
  from {
    max-height: 500px;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

.accordion-down {
  animation: accordion-down 0.3s ease-out forwards;
  overflow: hidden;
}

.accordion-up {
  animation: accordion-up 0.3s ease-out forwards;
  overflow: hidden;
}