@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@import "tailwindcss";
@plugin "tailwindcss-animate";

@theme {
  --color-primary: var(--md-sys-color-primary);
  --color-surfaceTint: var(--md-sys-color-surface-tint);
  --color-onPrimary: var(--md-sys-color-on-primary);
  --color-primaryContainer: var(--md-sys-color-primary-container);
  --color-onPrimaryContainer: var(--md-sys-color-on-primary-container);
  --color-secondary: var(--md-sys-color-secondary);
  --color-onSecondary: var(--md-sys-color-on-secondary);
  --color-secondaryContainer: var(--md-sys-color-secondary-container);
  --color-onSecondaryContainer: var(--md-sys-color-on-secondary-container);
  --color-tertiary: var(--md-sys-color-tertiary);
  --color-onTertiary: var(--md-sys-color-on-tertiary);
  --color-tertiaryContainer: var(--md-sys-color-tertiary-container);
  --color-onTertiaryContainer: var(--md-sys-color-on-tertiary-container);
  --color-error: var(--md-sys-color-error);
  --color-onError: var(--md-sys-color-on-error);
  --color-errorContainer: var(--md-sys-color-error-container);
  --color-onErrorContainer: var(--md-sys-color-on-error-container);
  --color-background: var(--md-sys-color-background);
  --color-onBackground: var(--md-sys-color-on-background);
  --color-surface: var(--md-sys-color-surface);
  --color-onSurface: var(--md-sys-color-on-surface);
  --color-surfaceVariant: var(--md-sys-color-surface-variant);
  --color-onSurfaceVariant: var(--md-sys-color-on-surface-variant);
  --color-outline: var(--md-sys-color-outline);
  --color-outlineVariant: var(--md-sys-color-outline-variant);
  --color-shadow: var(--md-sys-color-shadow);
  --color-scrim: var(--md-sys-color-scrim);
  --color-inverseSurface: var(--md-sys-color-inverse-surface);
  --color-inverseOnSurface: var(--md-sys-color-inverse-on-surface);
  --color-inversePrimary: var(--md-sys-color-inverse-primary);
  --color-primaryFixed: var(--md-sys-color-primary-fixed);
  --color-onPrimaryFixed: var(--md-sys-color-on-primary-fixed);
  --color-primaryFixedDim: var(--md-sys-color-primary-fixed-dim);
  --color-onPrimaryFixedVariant: var(--md-sys-color-on-primary-fixed-variant);
  --color-secondaryFixed: var(--md-sys-color-secondary-fixed);
  --color-onSecondaryFixed: var(--md-sys-color-on-secondary-fixed);
  --color-secondaryFixedDim: var(--md-sys-color-secondary-fixed-dim);
  --color-onSecondaryFixedVariant: var(--md-sys-color-on-secondary-fixed-variant);
  --color-tertiaryFixed: var(--md-sys-color-tertiary-fixed);
  --color-onTertiaryFixed: var(--md-sys-color-on-tertiary-fixed);
  --color-tertiaryFixedDim: var(--md-sys-color-tertiary-fixed-dim);
  --color-onTertiaryFixedVariant: var(--md-sys-color-on-tertiary-fixed-variant);
  --color-surfaceDim: var(--md-sys-color-surface-dim);
  --color-surfaceBright: var(--md-sys-color-surface-bright);
  --color-surfaceContainerLowest: var(--md-sys-color-surface-container-lowest);
  --color-surfaceContainerLow: var(--md-sys-color-surface-container-low);
  --color-surfaceContainer: var(--md-sys-color-surface-container);
  --color-surfaceContainerHigh: var(--md-sys-color-surface-container-high);
  --color-surfaceContainerHighest: var(--md-sys-color-surface-container-highest);
  --color-pending-primary: var(--pending-status-primary);
  --color-pending-primaryContainer: var(--pending-status-primaryContainer);
  --color-pending-onPrimaryContainer: var(--pending-status-onPrimaryContainer);


  --shadow-one: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-two: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --shadow-three: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --shadow-four: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
  --shadow-five: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

  --inset-shadow-md: inset 0 1px var(--md-sys-color-outline-variant);


}

@theme inline {
  --font-sans: var(--font-manrope);
  --font-display: var(--font-playfair-display);
  --font-zalando: var(--font-zalando);
}

:root {
  --md-sys-color-primary: rgb(144 213 173);
  --md-sys-color-surface-tint: rgb(144 213 173);
  --md-sys-color-on-primary: rgb(0 56 34);
  --md-sys-color-primary-container: rgb(2 82 51);
  --md-sys-color-on-primary-container: rgb(172 242 200);
  --md-sys-color-secondary: rgb(180 204 187);
  --md-sys-color-on-secondary: rgb(32 53 41);
  --md-sys-color-secondary-container: rgb(54 75 63);
  --md-sys-color-on-secondary-container: rgb(208 232 215);
  --md-sys-color-tertiary: rgb(164 205 221);
  --md-sys-color-on-tertiary: rgb(5 53 66);
  --md-sys-color-tertiary-container: rgb(35 76 89);
  --md-sys-color-on-tertiary-container: rgb(191 233 249);
  --md-sys-color-error: rgb(255 180 171);
  --md-sys-color-on-error: rgb(105 0 5);
  --md-sys-color-error-container: rgb(147 0 10);
  --md-sys-color-on-error-container: rgb(255 218 214);
  --md-sys-color-background: rgb(15 21 17);
  --md-sys-color-on-background: rgb(223 228 221);
  --md-sys-color-surface: rgb(15 21 17);
  --md-sys-color-on-surface: rgb(223 228 221);
  --md-sys-color-surface-variant: rgb(64 73 67);
  --md-sys-color-on-surface-variant: rgb(192 201 193);
  --md-sys-color-outline: rgb(138 147 139);
  --md-sys-color-outline-variant: rgb(64 73 67);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(223 228 221);
  --md-sys-color-inverse-on-surface: rgb(44 50 46);
  --md-sys-color-inverse-primary: rgb(38 106 74);
  --md-sys-color-primary-fixed: rgb(172 242 200);
  --md-sys-color-on-primary-fixed: rgb(0 33 18);
  --md-sys-color-primary-fixed-dim: rgb(144 213 173);
  --md-sys-color-on-primary-fixed-variant: rgb(2 82 51);
  --md-sys-color-secondary-fixed: rgb(208 232 215);
  --md-sys-color-on-secondary-fixed: rgb(11 31 21);
  --md-sys-color-secondary-fixed-dim: rgb(180 204 187);
  --md-sys-color-on-secondary-fixed-variant: rgb(54 75 63);
  --md-sys-color-tertiary-fixed: rgb(191 233 249);
  --md-sys-color-on-tertiary-fixed: rgb(0 31 40);
  --md-sys-color-tertiary-fixed-dim: rgb(164 205 221);
  --md-sys-color-on-tertiary-fixed-variant: rgb(35 76 89);
  --md-sys-color-surface-dim: rgb(15 21 17);
  --md-sys-color-surface-bright: rgb(53 59 54);
  --md-sys-color-surface-container-lowest: rgb(10 15 12);
  --md-sys-color-surface-container-low: rgb(23 29 25);
  --md-sys-color-surface-container: rgb(27 33 29);
  --md-sys-color-surface-container-high: rgb(38 43 39);
  --md-sys-color-surface-container-highest: rgb(48 54 50);

  --pending-status-primaryContainer: #534600;
  --pending-status-onPrimaryContainer: #f8e287;
  --pending-status-primary: #dbc66e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: rgb(38 106 74);
    --md-sys-color-surface-tint: rgb(38 106 74);
    --md-sys-color-on-primary: rgb(255 255 255);
    --md-sys-color-primary-container: rgb(172 242 200);
    --md-sys-color-on-primary-container: rgb(2 82 51);
    --md-sys-color-secondary: rgb(78 99 86);
    --md-sys-color-on-secondary: rgb(255 255 255);
    --md-sys-color-secondary-container: rgb(208 232 215);
    --md-sys-color-on-secondary-container: rgb(54 75 63);
    --md-sys-color-tertiary: rgb(60 100 114);
    --md-sys-color-on-tertiary: rgb(255 255 255);
    --md-sys-color-tertiary-container: rgb(191 233 249);
    --md-sys-color-on-tertiary-container: rgb(35 76 89);
    --md-sys-color-error: rgb(186 26 26);
    --md-sys-color-on-error: rgb(255 255 255);
    --md-sys-color-error-container: rgb(255 218 214);
    --md-sys-color-on-error-container: rgb(147 0 10);
    --md-sys-color-background: rgb(246 251 244);
    --md-sys-color-on-background: rgb(23 29 25);
    --md-sys-color-surface: rgb(246 251 244);
    --md-sys-color-on-surface: rgb(23 29 25);
    --md-sys-color-surface-variant: rgb(220 229 220);
    --md-sys-color-on-surface-variant: rgb(64 73 67);
    --md-sys-color-outline: rgb(112 121 114);
    --md-sys-color-outline-variant: rgb(192 201 193);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(44 50 46);
    --md-sys-color-inverse-on-surface: rgb(237 242 236);
    --md-sys-color-inverse-primary: rgb(144 213 173);
    --md-sys-color-primary-fixed: rgb(172 242 200);
    --md-sys-color-on-primary-fixed: rgb(0 33 18);
    --md-sys-color-primary-fixed-dim: rgb(144 213 173);
    --md-sys-color-on-primary-fixed-variant: rgb(2 82 51);
    --md-sys-color-secondary-fixed: rgb(208 232 215);
    --md-sys-color-on-secondary-fixed: rgb(11 31 21);
    --md-sys-color-secondary-fixed-dim: rgb(180 204 187);
    --md-sys-color-on-secondary-fixed-variant: rgb(54 75 63);
    --md-sys-color-tertiary-fixed: rgb(191 233 249);
    --md-sys-color-on-tertiary-fixed: rgb(0 31 40);
    --md-sys-color-tertiary-fixed-dim: rgb(164 205 221);
    --md-sys-color-on-tertiary-fixed-variant: rgb(35 76 89);
    --md-sys-color-surface-dim: rgb(214 219 213);
    --md-sys-color-surface-bright: rgb(246 251 244);
    --md-sys-color-surface-container-lowest: rgb(255 255 255);
    --md-sys-color-surface-container-low: rgb(240 245 238);
    --md-sys-color-surface-container: rgb(234 239 233);
    --md-sys-color-surface-container-high: rgb(228 234 227);
    --md-sys-color-surface-container-highest: rgb(223 228 221);

    --pending-status-primaryContainer: #f8e287;
    --pending-status-onPrimaryContainer: #534600;
    --pending-status-primary: #6d5e0f;
  }


}


/* @media (prefers-color-scheme: dark) {

  .root {
    --md-sys-color-primary: rgb(177 209 138);
    --md-sys-color-surface-tint: rgb(177 209 138);
    --md-sys-color-on-primary: rgb(31 55 1);
    --md-sys-color-primary-container: rgb(53 78 22);
    --md-sys-color-on-primary-container: rgb(205 237 163);
    --md-sys-color-secondary: rgb(191 203 173);
    --md-sys-color-on-secondary: rgb(42 51 30);
    --md-sys-color-secondary-container: rgb(64 74 51);
    --md-sys-color-on-secondary-container: rgb(220 231 200);
    --md-sys-color-tertiary: rgb(160 208 203);
    --md-sys-color-on-tertiary: rgb(0 55 53);
    --md-sys-color-tertiary-container: rgb(31 78 75);
    --md-sys-color-on-tertiary-container: rgb(188 236 231);
    --md-sys-color-error: rgb(255 180 171);
    --md-sys-color-on-error: rgb(105 0 5);
    --md-sys-color-error-container: rgb(147 0 10);
    --md-sys-color-on-error-container: rgb(255 218 214);
    --md-sys-color-background: rgb(18 20 14);
    --md-sys-color-on-background: rgb(226 227 216);
    --md-sys-color-surface: rgb(18 20 14);
    --md-sys-color-on-surface: rgb(226 227 216);
    --md-sys-color-surface-variant: rgb(68 72 61);
    --md-sys-color-on-surface-variant: rgb(197 200 186);
    --md-sys-color-outline: rgb(143 146 133);
    --md-sys-color-outline-variant: rgb(68 72 61);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(226 227 216);
    --md-sys-color-inverse-on-surface: rgb(47 49 42);
    --md-sys-color-inverse-primary: rgb(76 102 43);
    --md-sys-color-primary-fixed: rgb(205 237 163);
    --md-sys-color-on-primary-fixed: rgb(16 32 0);
    --md-sys-color-primary-fixed-dim: rgb(177 209 138);
    --md-sys-color-on-primary-fixed-variant: rgb(53 78 22);
    --md-sys-color-secondary-fixed: rgb(220 231 200);
    --md-sys-color-on-secondary-fixed: rgb(21 30 11);
    --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
    --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51);
    --md-sys-color-tertiary-fixed: rgb(188 236 231);
    --md-sys-color-on-tertiary-fixed: rgb(0 32 30);
    --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
    --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75);
    --md-sys-color-surface-dim: rgb(18 20 14);
    --md-sys-color-surface-bright: rgb(56 58 50);
    --md-sys-color-surface-container-lowest: rgb(12 15 9);
    --md-sys-color-surface-container-low: rgb(26 28 22);
    --md-sys-color-surface-container: rgb(30 32 26);
    --md-sys-color-surface-container-high: rgb(40 43 36);
    --md-sys-color-surface-container-highest: rgb(51 54 46);
  }
} */
* {
  box-sizing: border-box !important;
  interpolate-size: allow-keywords;
}

html {
  height: 100%;
  width: 100%;
}

body {
  @apply bg-background text-onBackground size-full;
  /* margin-inline: auto; */
}

svg {
  max-width: 100%;
}


button {
  cursor: pointer;
}



@utility action-hover {
  padding: 4px 8px;
  border-radius: 9999px;

  &:hover {
    background-color: var(--md-sys-color-secondary-container);
  }
}

@utility icon-hover-handle {
  &::before {
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: rgba(0, 0, 0);
    opacity: 1;
    scale: 1.4;
    border-radius: 9999px;
    opacity: 0;
  }

  &:hover::before {
    opacity: 0.1;
  }
}

.wrapper {
  max-inline-size: 1440px;
  margin-inline: auto;
  @apply sm:px-4;
  /* background-color: pink; */
}


@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

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

  .dropdown-content-width-full {
    width: var(--radix-dropdown-menu-trigger-width);
    max-height: var(--radix-dropdown-menu-content-available-height);
  }

  .popover-content-width-full {
    width: var(--radix-popover-trigger-width);
    /* max-height: var(--radix-dropdown-menu-content-available-height); */
  }

}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes progressPath {
  from {
    /* stroke-dasharray: 0 400; */
    stroke-dashoffset: -70;
  }

  to {
    /* stroke-dasharray: 400 400; */
    stroke-dashoffset: -287;
  }
}

@keyframes progressWave {
  0% {
    stroke-dasharray: 40 338;
    /* d: path("M50.1459 10.4218C54.0805 5.20091 61.9195 5.20091 65.8541 10.4218V10.4218C68.4667 13.8886 73.0433 15.2324 77.1154 13.7285V13.7285C83.2481 11.4635 89.8426 15.7016 90.33 22.221V22.221C90.6536 26.5499 93.7771 30.1546 98.0159 31.091V31.091C104.4 32.5012 107.656 39.6318 104.541 45.3796V45.3796C102.473 49.1963 103.152 53.9175 106.212 56.9969V56.9969C110.819 61.6345 109.704 69.3937 103.976 72.5452V72.5452C100.173 74.6379 98.1914 78.9766 99.1005 83.2213V83.2213C100.47 89.6139 95.3362 95.5382 88.8138 95.0928V95.0928C84.4829 94.797 80.4703 97.3757 78.9403 101.438V101.438C76.6359 107.556 69.1145 109.765 63.8684 105.864V105.864C60.3849 103.273 55.6151 103.273 52.1316 105.864V105.864C46.8855 109.765 39.364 107.556 37.0597 101.438V101.438C35.5297 97.3757 31.5171 94.797 27.1862 95.0928V95.0928C20.6638 95.5382 15.5304 89.6139 16.8995 83.2213V83.2213C17.8086 78.9766 15.8272 74.6379 12.0239 72.5452V72.5452C6.29613 69.3937 5.18053 61.6345 9.78837 56.9969V56.9969C12.848 53.9175 13.5269 49.1963 11.4587 45.3796V45.3796C8.34404 39.6318 11.6005 32.5012 17.9841 31.091V31.091C22.2229 30.1546 25.3464 26.5499 25.67 22.221V22.221C26.1574 15.7016 32.7519 11.4635 38.8846 13.7285V13.7285C42.9567 15.2324 47.5333 13.8886 50.1459 10.4218V10.4218Z"); */
  }

  100% {
    stroke-dasharray: 280 338;
    /* d: path("M51.0976 9.99242C55.6756 9.33419 60.3244 9.33419 64.9024 9.99242V9.99242C69.4805 10.6507 73.9409 11.9603 78.1481 13.8817V13.8817C82.3554 15.8031 86.2661 18.3164 89.7616 21.3452V21.3452C93.257 24.374 96.3013 27.8873 98.8019 31.7782V31.7782C101.302 35.6692 103.234 39.8978 104.537 44.3356V44.3356C105.84 48.7734 106.501 53.3748 106.501 58V58C106.501 62.6252 105.84 67.2266 104.537 71.6644V71.6644C103.234 76.1022 101.302 80.3308 98.8019 84.2217V84.2217C96.3013 88.1127 93.257 91.626 89.7616 94.6548V94.6548C86.2661 97.6836 82.3553 100.197 78.1481 102.118V102.118C73.941 104.04 69.4805 105.349 64.9025 106.008V106.008C60.3244 106.666 55.6756 106.666 51.0975 106.008V106.008C46.5195 105.349 42.059 104.04 37.8519 102.118V102.118C33.6447 100.197 29.7339 97.6836 26.2384 94.6548V94.6548C22.743 91.626 19.6987 88.1127 17.1981 84.2217V84.2217C14.6976 80.3308 12.7665 76.1022 11.4634 71.6644V71.6644C10.1603 67.2266 9.49875 62.6252 9.49875 58V58C9.49875 53.3748 10.1603 48.7734 11.4634 44.3356V44.3356C12.7665 39.8978 14.6976 35.6692 17.1981 31.7782V31.7782C19.6987 27.8873 22.743 24.374 26.2384 21.3452V21.3452C29.7339 18.3164 33.6447 15.8031 37.8519 13.8817V13.8817C42.0591 11.9603 46.5195 10.6507 51.0976 9.99242V9.99242Z"); */
  }
}

@utility material-icon-active {
  font-variation-settings: 'FILL' 1;
}

@utility font-hover {
  font-variation-settings: 'wght' 600, 'opsz' 40, 'GRAD' 200;
  transition: font-variation-settings 400ms cubic-bezier(0.2, 0, 0, 1);
}

@utility font-hover-active {
  font-variation-settings: 'wght' 600, 'opsz' 40, 'GRAD' 200, 'FILL' 1;
  transition: font-variation-settings 400ms cubic-bezier(0.2, 0, 0, 1);
}

@utility error {
  color: var(--md-sys-color-error)
}

@utility display-large {
  font-size: 3.5625rem;
  line-height: 1.22;
  letter-spacing: -0.25px;
}

@utility display-medium {
  font-size: 2.8125rem;
  line-height: 1.15;
}

@utility display-small {
  font-size: 2.5rem;
  line-height: 1.22;
}

/* Headline */
@utility headline-large {
  font-size: 2rem;
  line-height: 1.25;
}

@utility headline-medium {
  font-size: 1.75rem;
  line-height: 1.285;
}

@utility headline-small {
  font-size: 1.5rem;
  line-height: 1.33;
}

/* Title */
@utility title-large {
  font-size: 1.375rem;
  line-height: 1.27;
}

@utility title-medium {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.15px;
}

@utility title-small {
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.1px;
}

/* Label */
@utility label-large {
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.1px;
}

@utility label-medium {
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.5px;
}

@utility label-small {
  font-size: 0.6875rem;
  line-height: 1.45;
  letter-spacing: 0.5px;
}

/* Body */
@utility body-large {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

@utility body-medium {
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.25px;
}

@utility body-small {
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.4px;
}

@utility a4 {
  height: 297mm;
  width: 210mm;
}

.draft {
  @apply bg-surfaceContainerHighest outline-primary/50 text-onSurface;

}

.invoice-prev {
  height: fit;
  width: 210mm;
}


@page {
  padding: 0 !important;
  margin: 5mm;
  margin-top: 5mm;
  margin-bottom: 5mm;
}

@media print {
  header {
    display: none
  }

  .invoice-prev {
    padding: 0
  }
}

.completed {
  @apply bg-primaryContainer outline-primary/50 text-onPrimaryContainer;

}

.cancelled {
  @apply bg-errorContainer outline-error/50 text-onErrorContainer;

}

.pending {
  @apply bg-pending-primaryContainer outline-pending-primary/50 text-pending-onPrimaryContainer;
}



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* tbody tr:nth-child(2n) {
  @apply bg-primaryContainer/50;
}

tbody tr:nth-child(2n+1) {
  @apply bg-primaryContainer/25;
} */


/* *:focus-visible:not(input) {
  @apply ring-[3px] ring-offset-0 ring-offset-onSurface ring-onSurface outline-hidden;
} */

input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--md-sys-color-primary);
}

td[data-header="select"] {
  text-align: center;
}


.roboto-flex-heading {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 1000;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "opsz" 57 "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}