/* tailwind css */
@import 'tailwindcss';

/* @custom-variant YDM_Theme (&:where([data-color-theme="YDM_Theme"], [data-color-theme="YDM_Theme"] *)); */
@custom-variant dark (&:where(.dark, .dark *));

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@import '../../node_modules/preline/variants.css';
@import './utilities/header.css';
@import './utilities/reboot.css';
@import './utilities/sidebar.css';
@import './utilities/horizontal.css';
@import './utilities/layout.css';
@import './utilities/rtl-layout.css';

@import './components/app.css';
@import './components/calendar.css';
@import './components/simplebar.css';
@import './components/button.css';
@import './components/form.css';
@import './components/table.css';
@import './components/badge.css';
@import './components/kanban.css';
@import './components/notification.css';
@import './components/notification-box.css';
@import './components/card.css';
@import './components/keyword-sorting.css';
@import './components/modal-overlay.css';
@import './components/template-builder.css';
@import './components/chat-message.css';
@import './components/sweet-alert.css';
@import './components/pagination.css';
@import './components/skeleton.css';
@import './components/dashboard-widget.css';
@import './layout.css';

@theme {
  --font-sans: 'Prompt', Plus Jakarta Sans, sans-serif;
  /* Light Colors Variables */
  --color-primary: #000000; /* ดำ */
  --color-primaryemphasis: #222222; /* ดำอ่อนขึ้นนิด */
  --color-secondary: #ffff00; /* เหลืองสด */
  --color-secondaryemphasis: #cccc00; /* เหลืองเข้มขึ้น */
  --color-lightprimary: #00000020; /* ดำโปร่งใส */
  --color-lightsecondary: #ffff0040; /* เหลืองโปร่งใส */
  --color-darkprimary: #444444; /* ดำเทาเข้ม */
  --color-darksecondary: #999900; /* เหลืองหม่นเข้ม */

  --color-info: #539bff;
  --color-success: #13deb9;
  --color-danger: #fa896b;
  --color-warning: #ffae1f;
  --color-error: #fa896b;
  --color-lightsuccess: #e6fffa;
  --color-lighterror: #fdede8;
  --color-lightinfo: #ebf3fe;
  --color-lightwarning: #fef5e5;
  --color-darkinfo: #223662;
  --color-darksuccess: #1b3c48;
  --color-darkwarning: #4d3a2a;
  --color-darkerror: #4b313d;
  --color-white: #fff;
  --color-dark: #202936;
  --color-border: #ebf1f6;
  --color-bordergray: #dfe5ef;
  --color-darkborder: #333f55;
  --color-link: #2a3547;
  --color-bodytext: #5a6a85;
  --color-darklink: #7c8fac;
  --color-lightgray: #f6f9fc;
  --color-darkgray: #465670;
  --color-erroremphasis: #d5745b;
  --color-warningemphasis: #d9941a;
  --color-successemphasis: #10bd9d;
  --color-infoemphasis: #2196f3;

  /* --shadow-md: "0px 0px 2px 0px rgba(145, 158, 171, 0.2), 0px 12px 24px -4px rgba(145, 158, 171, 0.12)"; */
  /* --shadow-md: "0 4px 6px -1px rgba(145, 158, 171, 0.2), 0 2px 4px -2px rgba(145, 158, 171, 0.12)"; */
  --shadow-dark-md: 'rgba(145, 158, 171, 0.3) 0px 0px 2px 0px, rgba(145, 158, 171, 0.02) 0px 12px 24px -4px';
  --shadow-sm: '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)';

  --radius-sm: 4px;
  --radius-md: 7px;

  --text-fs-10: 10px;
  --text-fs-12: 12px;
  --text-fs-13: 13px;
  --text-fs-21: 21px;
  --text-fs-28: 28px;
}

@layer components {
  #sidebarnav .hs-accordion-content {
    @apply hidden w-full overflow-hidden transition-[height] duration-300;
  }

  body {
    @apply text-sm text-bodytext dark:text-darklink;
  }
  .container {
    @apply max-w-[1200px];
  }
  .container-xl {
    @apply max-w-[1320px];
  }
  .frontend-page .container {
    @apply max-w-[1410px];
  }
  .frontend-page .container-md {
    @apply mr-auto ml-auto max-w-[1218px];
  }
  .frontend-page img {
    @apply w-full;
  }

  html[data-card='border'] .card {
    @apply border border-border shadow-none dark:border dark:border-darkborder;
  }
  .card-body {
    @apply p-[30px];
  }
  .hs-dropdown-menu {
    @apply relative rounded-md bg-white shadow-md dark:bg-dark dark:shadow-dark-md;
  }
  .form-control {
    @apply w-full rounded-md border border-bordergray bg-transparent px-3 py-2 text-sm dark:border-darkborder;
  }
  input::placeholder {
    @apply text-bodytext dark:text-darklink;
  }

  /* For Checkbox */
  .form-check-input[type='checkbox'] {
    @apply h-5 w-5 border border-bordergray bg-transparent checked:border-primary focus:ring-0 focus:ring-offset-0 dark:border-darkborder;
  }
  .form-check-input[type='checkbox']:checked {
    @apply bg-primary;
  }
  /* For Radio */
  .form-check-input[type='radio'] {
    @apply border border-bordergray bg-transparent checked:border-primary focus:ring-0 focus:ring-offset-0 dark:border-darkborder;
  }
  .form-check-input[type='radio']:checked {
    @apply bg-primary;
  }
  select {
    @apply rounded-md border border-border bg-white text-sm text-link dark:border-darkborder dark:bg-dark dark:text-darklink;
  }

  /*Badge css*/
  .badge-md {
    @apply rounded-md px-3 py-1 text-sm font-semibold text-primary;
  }

  /* Sidebar css */
  .sidebar-link {
    @apply flex w-full items-center rounded-md text-sm text-link hover:bg-lightprimary hover:text-primary;
  }
  .dark-sidebar-link {
    @apply dark:text-darklink hover:dark:bg-darkprimary;
  }
  .activemenu {
    @apply bg-primary text-white hover:bg-primary hover:text-white dark:hover:bg-primary dark:hover:text-white;
  }
  .dropdown-menu-link {
    @apply flex w-full cursor-pointer items-center text-sm text-link hover:bg-lightprimary hover:text-primary dark:text-darklink hover:dark:bg-darkprimary;
  }
  .dropdown-menu-active {
    @apply bg-primary text-white hover:bg-primary hover:text-white dark:bg-primary dark:hover:bg-primary dark:hover:text-white;
  }
  .dropdown-submenu-link {
    @apply flex w-full items-center gap-2 py-2 text-sm text-link hover:text-primary dark:text-darklink dark:hover:text-primary;
  }
  #sidebarnav .hs-accordion-content {
    @apply hidden w-full overflow-hidden transition-[height] duration-300;
  }
  .caption {
    @apply pb-4 text-xs font-bold text-link uppercase dark:text-darklink;
  }
  .horizontal-menu {
    @apply flex items-center gap-2 rounded-md px-3 py-1 text-sm text-link hover:bg-lightprimary hover:text-primary dark:text-darklink;
  }
  .horizontal-items {
    @apply start-0 top-full z-10 min-w-64 bg-transparent shadow-none sm:mt-4 lg:bg-white lg:shadow-md dark:bg-dark;
  }
  .horizontal-link {
    @apply flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-link hover:text-primary dark:text-darklink dark:hover:text-primary;
  }
  .horizontal-link-active {
    @apply text-primary hover:text-primary dark:text-primary;
  }
  .nav-small-cap-icon {
    @apply hidden text-center text-lg leading-[16px];
  }

  /* Top header menu css */
  .apps-icons {
    @apply flex h-11 w-11 items-center justify-center rounded-md bg-lightgray dark:bg-darkgray;
  }
  .header-link-btn {
    @apply flex w-full items-center gap-2 rounded-md px-3 py-2 text-link hover:bg-lightprimary hover:text-primary lg:w-auto lg:px-3 lg:py-1 lg:text-sm dark:text-darklink dark:hover:bg-darkprimary;
  }

  /* Other css*/
  .bg-overlay {
    @apply invisible absolute top-0 bottom-0 left-0 h-full w-full bg-lightprimary mix-blend-multiply group-hover:visible;
  }

  .border-light-dark {
    @apply border-border dark:border-darkborder;
  }
  .light-dark-hoverbg {
    @apply hover:bg-lightgray dark:hover:bg-darkprimary;
  }
  .tooltip {
    @apply invisible absolute z-10 rounded-md bg-dark px-2 py-1 text-[12px] text-white opacity-0 dark:bg-darkgray dark:text-gray-300;
  }

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

  .animate-card {
    @apply relative translate-y-0 transform transition-all duration-300 ease-in-out hover:-translate-y-1.5;
  }

  /*Datatable*/
  .datatable .dt-search {
    @apply mt-3 flex items-center gap-2 sm:mt-0;
  }

  /* simple step indicator */
  .step-item {
    .step-indicator-container {
      @apply flex h-full flex-col items-center;
    }

    .step-indicator {
      @apply flex size-7 flex-shrink-0 items-center justify-center rounded-full border border-primary text-primary;

      &.current-step {
        @apply bg-primary text-secondary;
      }
    }

    .connecting-line {
      @apply h-full max-h-0 w-px bg-primary transition-all duration-300 group-last:hidden group-has-[.completed-step]:block group-has-[.completed-step]:max-h-full;
    }

    .step-label {
      @apply pt-[2px] text-sm font-medium text-gray-800;
    }
  }
}

@utility container {
  @apply mx-auto max-w-[1200px] px-5;
}

@utility card {
  @apply relative w-full rounded-md bg-white break-words shadow-md dark:bg-dark dark:shadow-dark-md;
}

@utility card-body {
  @apply p-6;
}

@utility hs-dropdown-menu {
  @apply relative rounded-md bg-white shadow-md;
}

@utility activemenu {
  @apply bg-primary text-secondary hover:bg-primary hover:text-secondary dark:hover:bg-primary dark:hover:text-secondary;
}

@utility dropdown-menu-link {
  @apply flex w-full cursor-pointer items-center text-sm hover:bg-primary/10 hover:text-primary;
}

@utility dropdown-menu-active {
  @apply bg-primary text-white hover:bg-primary hover:text-white dark:bg-primary dark:hover:bg-primary dark:hover:text-white;
}

@utility dropdown-submenu-link {
  @apply flex w-full items-center gap-2 py-2 text-sm hover:text-primary dark:hover:text-primary;
}

@utility text-fs-* {
  @apply text-[var(--text-fs-*)];
}

/* .card {
	@apply rounded-md dark:shadow-dark-md shadow-md bg-white dark:bg-dark relative w-full break-words;
} */
.card-title {
  @apply text-lg font-semibold text-dark dark:text-white;
}
.card-subtitle {
  @apply text-sm text-bodytext dark:text-darklink;
}