/*
If a new color is needed and doesn't exist add it to the accent section with a new number in the sequence.
The colors are not in order and should not contain the name of the color in case the color is refactored or changed later on
--dark and --light for example allow us to change black and white to shades without renaming variables through the entire application, the colors are relative
*/

/* TODO Remove once we're done integrating the design system. */

@font-face {
  font-family: Roboto-Light;
  src: url(/ttf/Roboto-Light.ttf);
}
@font-face {
  font-family: Roboto-Regular;
  src: url(/ttf/Roboto-Regular.ttf);
}
@font-face {
  font-family: Roboto-Medium;
  src: url(/ttf/Roboto-Medium.ttf);
}
@font-face {
  font-family: Roboto-Bold;
  src: url(/ttf/Roboto-Bold.ttf);
}

:root {
  --dark: #000000;
  --dark-05: rgba(0, 0, 0, 0.05);
  --dark-11: rgba(0, 0, 0, 0.11);
  --dark-15: rgba(0, 0, 0, 0.15);
  --dark-25: rgba(0, 0, 0, 0.25);
  --dark-26: rgba(0, 0, 0, 0.26); /* #00000042 */
  --dark-35: rgba(0, 0, 0, 0.35);
  --dark-40: rgba(0, 0, 0, 0.4);
  --dark-50: rgba(0, 0, 0, 0.5);
  --dark-60: rgba(0, 0, 0, 0.6);
  --dark-70: rgba(0, 0, 0, 0.7);
  --dark-80: rgba(0, 0, 0, 0.8);
  --dark-87: rgba(0, 0, 0, 0.87);

  --light: #ffffff;
  --light-25: rgba(255, 255, 255, 0.25);
  --light-75: rgba(255, 255, 255, 0.75);

  --accent: #1f6acc;

  --success: #0dd688;
  --success2: #4caf50;
  --success2-bg: #e8f5e9;
  --success2-borderColor: #a5d6a7;
  --success2-aColor: #1e8449;
  --success-15: #e7f1db;

  --fail: #d62652;
  --fail-2: #c30707;
  --fail-15: #fbccd4;
  --fail-2-10: rgba(195, 7, 7, 0.1);

  --neutral: rgba(32, 105, 204, 0.2);

  --warn: #ffcc00;
  --warn-2: #c38207;
  --warn-3: #ff8f12;
  --warn-4: #a06800;
  --warn-55: #ffcc0055;

  --accent-1: #f8f9fb;
  --accent-2: #eaecef;
  --accent-3: #eceff0;
  --accent-4: #e4e7e8;
  --accent-5: rgba(178, 178, 178, 0.4);
  --accent-6: #cccccc;
  --accent-7: #999999;
  --accent-8: #888888;
  --accent-9: #7d7d7d;
  --accent-10: #707070;
  --accent-11: #4c4c4c;
  --accent-12: #424242;
  --accent-13: #20272b;
  --accent-14: #263238;
  --accent-15: #b2b2b2;
  --accent-16: #6e6e6e;
  --accent-17: #bdbdbd;
  --accent-18: #dedede;
  --accent-19: #333333;
  --accent-20: #626262;
  --accent-21: #757575;
  --accent-22: #eeeeee;
  --accent-23: #c30707;
  --accent-24: #e9e9e9;
  --accent-25: #969696;
  --accent-26: #363636;
  --accent-27: #f1f1f1;
  --accent-28: #231f20;
  --accent-29: #43425d;
  --accent-30: #8b8b8b;
  --accent-31: #dddddd;
  --accent-32: #f8f2f2;
  --accent-33: #efefef;
  --accent-34: #e8e8e8;
  --accent-35: #f2f2f2;
  --accent-36: #4285f4;
  --accent-37: #fdfdfd;
  --accent-38: #ececec;
  --accent-39: #c5c5c5;
  --accent-40: #6d6d6d;
  --accent-41: #f9fafb;
  --accent-42: #3c3c3c;
  --accent-43: rgba(31, 106, 204, 0.1);
  --accent-44: rgba(31, 106, 204, 0.25);
  --accent-45: #1c5fb8;
  --accent-46: #f7f8fa;
  --accent-47: #b0b1b3;
  --accent-48: #4985d5;
  --accent-49: rgba(247, 248, 250, 0.75);
  --accent-50: rgba(234, 236, 239, 0.1);
  --accent-51: rgba(255, 255, 255, 0.1);
  --accent-52: rgba(255, 255, 255, 0.75);
  --accent-53: #444444;
  --accent-54: #393939;
  --accent-55: #9f9f9f;
  --accent-56: rgba(159, 159, 159, 0.3);
  --accent-57: #c1d9f2;
  --accent-58: #d2d2d2;
  --accent-59: #49576b;
  --accent-60: #0079d2;
  --accent-61: #5d5d5d;
  --accent-62: #2684ff;
  --accent-63: rgba(239, 239, 239, 0.5);
  --accent-64: #7e7e7e;
  --accent-65: #c30a12;
  --accent-66: #e3e3e3;
  --accent-67: rgba(204, 204, 204, 0.5);
  --accent-68: rgba(31, 106, 204, 0.5);
  --accent-69: #6996d0;

  --fontf-light: "Roboto-Light";
  --fontf-regular: "Roboto-Regular";
  --fontf-medium: "Roboto-Medium";
  --fontf-bold: "Roboto-Bold";

  --font-xxl: 48px;
  --font-xml: 38px;
  --font-xl: 24px;
  --font-l: 20px;
  --font-ml: 18px;
  --font-m: 16px;
  --font-s: 14px;
  --font-xs: 12px;

  --button-active: var(--accent-62);
  --button-disabled: var(--accent-25);

  --button-shadow: 0 3px 6px 0 var(--accent);

  --input-fg-default: var(--dark);
  --input-bg-default: var(--light);
  --input-bg-hover: rgba(31, 106, 204, 0.1);
  --input-bg-active: var(--blue);

  --top-bar-height: 87px;
  --nav-bar-height: 114px;
  --side-bar-width: 210px;
  --dashboard-min-width: 1500px;
  --hamburger-pos-top: 67px;
  --hamburger-pos-left: 189px;
  --hamburger-pos-left-narrow: 66px;
}

/* Element/class rules wrapped in @layer base so Tailwind v4 utilities (a later
   layer) win over these legacy globals, matching the v3 cascade where Tailwind
   loaded after this file. @font-face and :root variables above stay unlayered. */
@layer base {
  .shadow {
    box-shadow: 0 3px 6px 0 var(--accent);
  }

  html,
  body {
    overflow: hidden;
  }

  html,
  body,
  button,
  input {
    font-family: var(--fontf-regular), sans-serif;
    font-weight: 400;
  }

  button,
  input {
    outline: none;
  }

  button:focus,
  input:focus {
    outline: none;
  }

  .close {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: #fff url("/img/svg/close-24px.svg") no-repeat center;
    fill: var(--dark);
    opacity: 0.3;
  }

  .hide {
    display: none !important;
  }

  .link {
    text-decoration: none;
  }

  .round {
    border-radius: 30px;
    background-color: var(--accent-7);
    color: var(--light);
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 15px;
    font-family: var(--fontf-regular);
  }

  ::placeholder,
  input:hover::placeholder,
  .placeholder {
    opacity: 0.54;
  }
  ::placeholder {
    color: #000;
  }

  .subheader {
    font-size: var(--font-s);
    color: var(--accent-25);
  }

  button.datepicker {
    margin: auto;
    padding-right: 0;
    width: unset;
    cursor: pointer;
    border: 0px;
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
  }

  /* Set right and top properties in page */
  .datepicker-wrap {
    position: absolute;
    z-index: 200;
  }

  .datepicker-wrap:before {
    content: "";
    position: absolute;
    right: 33px;
    top: -0.5px;
    width: 15px;
    height: 15px;
    background-color: var(--accent-46);
    transform-origin: 0 0;
    transform: rotate(-45deg);
    z-index: 101;
  }

  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}