@import 'tailwindcss';
@import './app.css';

@import './layouts/container.css' layer(utilities);
@import './layouts/sidebar.css' layer(utilities);
@import './layouts/header.css' layer(utilities);
@import './theme/default-colors.css' layer(utilities);
@import './theme/dark-colors.css' layer(utilities);
@import './override/reboot.css' layer(utilities);
@import "tw-animate-css";


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

html,
main {
  scroll-behavior: smooth;
}

@theme {
  
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-btn-shadow: rgba(0, 0, 0, 0.05) 0 9px 17.5px;
  --shadow-boxShadow: 7px 7px 10px rgba(0,0,0,.03);

  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 7px;
  --radius-tw: 12px;

  --leading-21: 21px;

  --gap-30: 30px;

  --padding-15: 15px;
  --padding-30: 30px;

  --margin-30: 30px;

  --color-cyan-500: var(--color-primary);
  --color-cyan-600: var(--color-primary);
  --color-cyan-700: var(--color-primary);

  --color-primary: var(--color-primary);
  --color-secondary: var(--color-secondary);
  --color-info: var(--color-info);
  --color-success: var(--color-success);
  --color-warning: var(--color-warning);
  --color-error: var(--color-error);
  --color-lightprimary: var(--color-lightprimary);
  --color-lightsecondary: var(--color-lightsecondary);
  --color-lightsuccess: var(--color-lightsuccess);
  --color-lighterror: var(--color-lighterror);
  --color-lightinfo: var(--color-lightinfo);
  --color-lightwarning: var(--color-lightwarning);
  --color-border: var(--color-border);
  --color-graymuted: var(--color-graymuted);
  --color-darkgray: var(--color-darkgray);
  --color-bordergray: var(--color-bordergray);
  --color-lightgray: var(--color-lightgray);
  --color-muted: var(--color-muted);
  --color-darkmuted: var(--color-darkmuted);
  --color-bodytext: var(--color-bodytext);
  --color-dark: var(--color-dark);
  --color-link: var(--color-link);
  --color-darklink: var(--color-darklink);
  --color-darkborder: var(--color-darkborder);
  --color-primaryemphasis: var(--color-primary-emphasis);
  --color-secondaryemphasis: var(--color-secondary-emphasis);
  --color-warningemphasis: var(--color-warning-emphasis);
  --color-erroremphasis: var(--color-error-emphasis);
  --color-successemphasis: var(--color-success-emphasis);
  --color-infoemphasis: var(--color-info-emphasis);
  --color-charcoal: var(--color-charcoal);
  --color-defaultBorder: var(--color-defaultBorder);
  --color-slateGray: var(--color-slateGray);
  --color-breadcrumbColor: var(--color-breadcrumbColor);
}

@layer base {

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

@utility form-control {
  & input {
    @apply border rounded-md border-defaultBorder bg-transparent ring-transparent dark:ring-transparent dark:bg-transparent w-full text-sm;
  }

  & input:focus {
    @apply shadow-none dark:shadow-none ring-transparent dark:ring-transparent;
  }

  & input:focus {
    @apply border-primary dark:border-primary outline-hidden shadow-none ring-offset-0 ring-transparent;
  }
}

@utility form-control-textarea {
  @apply rounded-md border border-defaultBorder bg-transparent dark:bg-transparent w-full text-sm p-4;

  &:focus {
    @apply border-primary dark:border-primary outline-hidden shadow-none ring-offset-0 ring-transparent;
  }
}

@utility card-title {
  @apply text-lg font-semibold text-dark dark:text-white;
}

@utility border-ld {
  @apply border-defaultBorder;
}

@utility bg-hover {
  @apply hover:bg-lightprimary dark:hover:bg-lightprimary;
}

@layer utilities {
  .left-part {
    @apply p-6 border-e border-defaultBorder;
  }
}

@layer components {
  .container {
    @apply !max-w-[1400px];
  }

  body {
    @apply text-sm overflow-x-hidden dark:bg-background;
  }

  body {
    @apply text-link dark:text-darklink;
  }

  /*heading text color*/
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-dark dark:text-white font-semibold;
  }

  input::placeholder {
    @apply text-darklink dark:text-darklink
  }

  button {
    @apply !cursor-pointer;
  }

  #fileUpload input {
    @apply flex items-center gap-4 p-3;
  }

  .sales-overview select{
    @apply pr-9!;
  }

}

/*---break---*/

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --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);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}


/*---break---*/

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

input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* Hide in Firefox */
input[type="time"] {
  -moz-appearance: textfield;
}
