@tailwind base;
@tailwind components;
@tailwind utilities;
/* @use "typography" as *; */



@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 4%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 4%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 4%;
    --primary: 0 0% 4%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 4%;
    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 40%;
    --accent: 42 100% 55%;
    --accent-foreground: 0 0% 4%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --success: 145 63% 42%;
    --success-foreground: 0 0% 100%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 42 100% 55%;
    --radius: 0.75rem;

    /* Brand Shades Scale */
    --brand-50: #FAFAFA;
    --brand-100: #F2F2F2;
    --brand-200: #E0E0E0;
    --brand-300: #B3B3B3;
    --brand-400: #404040;
    --brand-500: #0A0A0A;
    --primary-brand: var(--brand-500);

    /* Legacy Color Map Compat */
    --orange-50: #FAFAFA;
    --orange-100: #F2F2F2;
    --orange-200: #E0E0E0;
    --orange-300: #FFB81C;
    --orange-400: #404040;
    --orange-500: #0A0A0A;

    --chart-1: 0 0% 4%;
    --chart-2: 42 100% 55%;
    --chart-3: 0 0% 40%;
    --chart-4: 0 0% 60%;
    --chart-5: 145 63% 42%;

    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 0 0% 4%;
    --sidebar-primary: 0 0% 4%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 96%;
    --sidebar-accent-foreground: 0 0% 4%;
    --sidebar-border: 0 0% 90%;
    --sidebar-ring: 42 100% 55%;
    --hover: 0 0% 96%;
  }

  .dark {
    --background: 253 43% 3%;
    --foreground: 253 31% 98%;
    --muted: 253 7% 13%;
    --muted-foreground: 253 13% 63%;
    --popover: 253 43% 3%;
    --popover-foreground: 253 31% 98%;
    --card: 253 43% 4%;
    --card-foreground: 253 31% 99%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --primary: 27 100% 50%;
    /* Updated */
    --primary-foreground: 0 0% 100%;
    /* Adjusted for dark mode */
    --secondary: 27 50% 20%;
    /* Adjusted for dark mode */
    --secondary-foreground: 35 100% 90%;
    /* Adjusted for contrast */
    --accent: 27 100% 50%;
    /* Updated */
    --accent-foreground: 0 0% 100%;
    /* Adjusted for dark mode */
    --destructive: 339.2 90.36% 51.18%;
    --destructive-foreground: 0 0% 100%;
    --ring: 27 100% 50%;
    /* Updated */
    --chart-1: 27 100% 50%;
    /* Updated */
    --chart-2: 27 20% 70%;
    /* Adjusted for dark mode */
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 27 100% 50%;
    /* Updated */
    --sidebar-primary-foreground: 0 0% 100%;
    /* Adjusted for dark mode */
    --sidebar-accent: 27 100% 50%;
    /* Updated */
    --sidebar-accent-foreground: 0 0% 100%;
    /* Adjusted for contrast */
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 27 100% 50%;
    /* Updated */
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply box-border bg-background text-foreground;
  }

  input:focus,
  input:focus-visible,
  textarea:focus,
  textarea:focus-visible,
  select:focus,
  select:focus-visible {
    outline: none !important;
    border-color: var(--primary-brand) !important;
    box-shadow: none !important;
  }
}

@layer utilities {
  .min-h-screen {
    min-height: 100vh;
    /* Fallback */
    min-height: 100dvh;
  }

  .h-screen {
    height: 100vh;
    /* Fallback */
    height: 100dvh;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@import 'react-quill/dist/quill.snow.css';


/* ...............typography................ */
.header {
  background-color: #FFFEFA;
}

.bg-card {
  border-color: hsla(217, 54%, 92%, 1);
}

.fs-10 {
  font-size: 10px;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-40 {
  font-size: 40px !important;
}

.h-60 {
  height: 60px;
}

.gray {
  color: #BBBBBB;
}

.yellow {
  color: var(--orange-300);
}

.yellow-border {
  border-color: #FFB836;
}

.text-warning {
  color: #FFB836;
}

.bg-primary {
  background-color: #F1F6FF;
}

.common-bg {
  background-color: var(--orange-300);
}

.border-primary {
  border-color: var(--primary-brand)
}

.border-common {
  border-color: #E1E9F6;
}

.medium-black {
  color: #2A2A2A;
}

.bg-gray {
  background-color: #BBBBBB;
}

.bg-light {
  background-color: #eceaea;

}

.text-primary {
  color: var(--orange-300) !important;
}

.text-gray {
  color: #808080;
}

.light-black {
  color: #333333;
}

.text-yellow {
  color: #e9c31d;
  ;
}

.border-yellow {
  border-color: #e9c31d;
}

.border-light {
  border-color: #F1F6FF;
}

.light-green {
  color: #56CDAD;
}

.light-green-border {
  border-color: #56CDAD;
}

.bg-yellow {
  background-color: var(--orange-300);
}

.text-danger {
  color: #FF4545;
}

.border-danger {
  border-color: #FF4545;
}

.error-border {
  border-color: #DC2626;
}

.error-text {
  color: #DC2626;
}

.bg-danger {
  background-color: #FF4545;
}

.heading {
  font-size: 24px;
  font-weight: 600;
  color: #1C1D22;
}

.fs-10 {
  font-size: 10px;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ....................sidebar-layout................... */




/* profile card */
.profile-card {
  background-color: #fff;
  padding: 7px;
  border-radius: 34px;
}

.profile-card-1 {
  background-color: #fff;
  border-radius: 34px;
}

.status-blue {
  border: 1px solid var(--orange-300);
  color: var(--orange-300);
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 400;
  font-size: 12px;
  display: inline-block;
}

.status-pill {
  border: 1px solid green;
  color: green;
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 500;
  display: inline-block;
}

.auth-page {
  background-image: url("../assets/images/background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

main {
  height: 100%;
}

.theme-color {
  color: var(--primary-brand);
}

.text-black {
  color: #000 !important;
}

.theme-border {
  border-color: var(--primary-brand);
}

.theme-background {
  background-color: var(--primary-brand);
  color: #000 !important;
}

.theme-background:hover {
  background-color: var(--primary-brand);
  color: #000 !important;
}


/* hover card */
.credit-hover:hover {
  background-color: var(--primary-brand);


}

.credit-hover:hover .credit-amount {
  color: #fff !important;
}

.credit-hover:hover .credit-title {
  color: #fff;
}

.credit-hover:hover .credit-button {
  background-color: var(--orange-300);
}

.subscription:hover {
  .card {
    background-color: var(--primary-brand);
  }

  .card-title {
    color: #fff;
  }

  .card-amount {
    color: #fff;
  }

  .card-button {
    background-color: var(--orange-300);
  }

}


/* phone input */
.react-tel-input .form-control {
  position: relative;
  font-size: 14px;
  margin-left: 0;
  background: #fff;
  border: 1px solid #E1E9F6;
  border-radius: 6px !important;
  line-height: 25px;
  height: 48px !important;
  width: 100% !important;
  outline: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.react-tel-input .flag-dropdown {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  background-color: #fff !important;
  border: 1px solid #E1E9F6 !important;
  border-radius: 6px 0 0 6px !important;
}

html,
body,
div,
main,
section,
aside {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
  width: 0px;
  height: 0px;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.custom-scrollbar {
  scrollbar-width: thin !important;
}

.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

thead tr {
  /* background: var(--primary-brand) !important; */

}

thead th {
  /* color: #fff !important; */
}

[aria-expanded]::after {
  display: none !important;
}


/* hide timer icon from input tag */
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}

input[type="time"]::-moz-calendar-picker-indicator {
  opacity: 0;
}




.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.progress-ring {
  width: 80px;
  height: 80px;
  position: relative;
}

.progress-svg {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.progress-circle {
  stroke: #4285F4;
  stroke-dasharray: 282.6, 282.6;
  stroke-dashoffset: 282.6;
  animation: loading-indicator 1s linear infinite;
}

@keyframes loading-indicator {
  0% {
    stroke-dashoffset: 282.6;
  }

  100% {
    stroke-dashoffset: 0;
  }
}


.select-trigger>svg:last-child {
  display: none;
}




.active {
  background-color: var(--primary-brand);
  color: #fff;
}


/* ...............quill-editor................ */
.ql-container {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6 !important;
  font-family: inherit;
}

.ql-toolbar {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6 !important;
  border-bottom: none !important;
}

.ql-editor {
  min-height: 150px;
  font-size: 0.875rem;
  color: #4b5563;
}

.ql-editor.ql-blank::before {
  color: #9ca3af;
  font-style: normal;
}

.h-12__input {
  outline: none !important;
  min-height: 48px !important;
  border: 0px !important
}

.description {
  div:first-of-type {
    overflow-x: hidden;
  }
}

/* NewCss */

.auth-image-bg {
  background-color: var(--orange-200) !important;
}

.btn-text-color {
  color: #FFF !important;
}

.steps-divider {
  height: 70%;

  margin-top: 10px;
  margin-bottom: 10px;
  position: absolute;
  top: 2.5rem;
  /* Same as top-10 in Tailwind */
  left: auto;
  transform: translateX(-50%);
  border-left-width: 2px;
  border-color: #d1d5db;
  /* Same as border-gray-300 */
}

.steps-proceed-btn {
  background-color: var(--orange-100) !important;
  border-radius: 7.06px !important;
  color: var(--primary-brand);
  box-shadow: none !important;
}

.map-styled-wrapper {
  height: 73vh;
  margin: 0px !important;

  @media all and (min-width:320px) and (max-width:991px) {
    height: 500px;
  }
}

.res-add {
  height: 48px !important;
  border: 0 !important;
}

.map-wrapper {
  height: 90%;
  width: 100%;

  iframe {
    height: 90%;
    width: 100%;
  }
}

.menu-avatar {
  height: 57px !important;
  width: 57px !important;
}

.add-category-btn {
  border-radius: 2000px !important;
}

.custom-tooltip,
.custom-tooltip * {
  color: #ffffff !important;
}