@import '../../libraries/fonts/inter/inter.css';
@import './brand-colors.css';

:root {
  /* Interstellar colors */
  --static-neutral-500: var(--neutral-500);
  --static-black: var(--neutral-800);
  --static-white: var(--neutral-100);
  --static-neutral-200: var(--neutral-200);
  --static-blue-100: var(--blue-100);
  --static-blue-200: var(--blue-200);
  --static-blue-300: var(--blue-300);
  --static-blue-400: var(--blue-400);
  --static-blue-500: var(--blue-500);
  --static-blue-600: var(--blue-600);
  --static-purple-500: var(--purple-500);
  --static-orange-200: var(--orange-200);
  --static-red-300: var(--red-300);
  --static-red-600: var(--red-600);
  --static-green-600: var(--green-600);
  --static-green-gradient-400: var(--green-gradient-400);


  --accents-blue-600: var(--blue-600);
  --accents-blue-500: var(--blue-500);
  --accents-blue-400: var(--blue-400);
  --accents-blue-300: var(--blue-300);
  --accents-blue-200: var(--blue-200);
  --accents-blue-100: var(--blue-100);

  --accents-orange-600: var(--orange-600);
  --accents-orange-500: var(--orange-500);
  --accents-orange-400: var(--orange-400);
  --accents-orange-300: var(--orange-300);
  --accents-orange-200: var(--orange-200);
  --accents-orange-100: var(--orange-100);

  --accents-purple-600: var(--purple-600);
  --accents-purple-500: var(--purple-500);
  --accents-purple-400: var(--purple-400);
  --accents-purple-300: var(--purple-300);
  --accents-purple-200: var(--purple-200);
  --accents-purple-100: var(--purple-100);

  --backgrounds-100: var(--neutral-100);
  --backgrounds-150: var(--blue-100);
  --backgrounds-200: var(--neutral-200);
  --backgrounds-250: var(--neutral-200);
  --backgrounds-300: var(--neutral-300);
  --backgrounds-350: var(--blue-200);
  --backgrounds-400: var(--neutral-400);
  --backgrounds-500: var(--neutral-500);
  --backgrounds-overlay: var(--neutral-overlay-800);

  --status-error-300: var(--red-600);
  --status-error-200: var(--red-300);
  --status-error-100: var(--red-100);

  --status-success-300: var(--green-600);
  --status-success-200: var(--green-300);
  --status-success-100: var(--green-100);

  --status-warning-300: var(--yellow-600);
  --status-warning-200: var(--yellow-300);
  --status-warning-100: var(--yellow-100);

  --text-800: var(--neutral-800);
  --text-600: var(--neutral-600);
  --text-500: var(--neutral-500);
  --text-placeholder: var(--neutral-400);
  --text-100: var(--neutral-100);

  --exceptions-table-2: var(--neutral-100);
  --exceptions-surface-1: var(--neutral-200);
  --exceptions-surface-2: var(--neutral-100);
  --exceptions-popup-background-1: var(--neutral-300);
  --exceptions-popup-background-2: var(--neutral-100);
  --exceptions-background-profile: var(--neutral-100);
  --exceptions-orange-black: var(--orange-600);
  --gradient-color-500: var(--white-gradient-500);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accents-blue-600: var(--blue-100);
    --accents-blue-500: var(--blue-200);
    --accents-blue-400: var(--blue-300);
    --accents-blue-300: var(--blue-400);
    --accents-blue-200: var(--blue-500);
    --accents-blue-100: var(--blue-600);

    --accents-orange-600: var(--orange-600);
    --accents-orange-500: var(--orange-500);
    --accents-orange-400: var(--orange-400);
    --accents-orange-300: var(--orange-500);
    --accents-orange-200: var(--orange-500);
    --accents-orange-100: var(--orange-600);

    --accents-purple-600: var(--purple-100);
    --accents-purple-500: var(--purple-200);
    --accents-purple-400: var(--purple-300);
    --accents-purple-300: var(--purple-400);
    --accents-purple-200: var(--purple-500);
    --accents-purple-100: var(--purple-600);

    --backgrounds-100: var(--neutral-800);
    --backgrounds-150: var(--neutral-700);
    --backgrounds-200: var(--neutral-700);
    --backgrounds-250: var(--neutral-800);
    --backgrounds-300: var(--neutral-600);
    --backgrounds-350: var(--neutral-600);
    --backgrounds-400: var(--neutral-500);
    --backgrounds-500: var(--neutral-800);
    --backgrounds-overlay: var(--neutral-overlay-600);

    --status-error-300: var(--red-100);
    --status-error-200: var(--red-300);
    --status-error-100: var(--red-600);

    --status-success-300: var(--green-100);
    --status-success-200: var(--green-300);
    --status-success-100: var(--green-600);

    --status-warning-300: var(--yellow-100);
    --status-warning-200: var(--yellow-300);
    --status-warning-100: var(--yellow-600);

    --text-800: var(--neutral-100);
    --text-600: var(--neutral-200);
    --text-500: var(--neutral-300);
    --text-placeholder: var(--neutral-400);
    --text-100: var(--neutral-800);

    --exceptions-table-2: var(--neutral-700);
    --exceptions-surface-1: var(--neutral-600);
    --exceptions-surface-2: var(--neutral-700);
    --exceptions-popup-background-1: var(--neutral-800);
    --exceptions-popup-background-2: var(--neutral-700);
    --exceptions-background-profile: var(--neutral-600);
    --exceptions-orange-black: var(--neutral-800);
    --gradient-color-500: var(--black-gradient-500);

  }
}

.force-light {
  /* Interstellar colors */
  --accents-blue-600: var(--blue-600);
  --accents-blue-500: var(--blue-500);
  --accents-blue-400: var(--blue-400);
  --accents-blue-300: var(--blue-300);
  --accents-blue-200: var(--blue-200);
  --accents-blue-100: var(--blue-100);

  --accents-orange-600: var(--orange-600);
  --accents-orange-500: var(--orange-500);
  --accents-orange-400: var(--orange-400);
  --accents-orange-300: var(--orange-300);
  --accents-orange-200: var(--orange-200);
  --accents-orange-100: var(--orange-100);

  --accents-purple-600: var(--purple-600);
  --accents-purple-500: var(--purple-500);
  --accents-purple-400: var(--purple-400);
  --accents-purple-300: var(--purple-300);
  --accents-purple-200: var(--purple-200);
  --accents-purple-100: var(--purple-100);

  --backgrounds-100: var(--neutral-100);
  --backgrounds-150: var(--blue-100);
  --backgrounds-200: var(--neutral-200);
  --backgrounds-250: var(--neutral-200);
  --backgrounds-300: var(--neutral-300);
  --backgrounds-350: var(--blue-200);
  --backgrounds-400: var(--neutral-400);
  --backgrounds-500: var(--neutral-500);
  --backgrounds-overlay: var(--neutral-overlay-800);

  --status-error-300: var(--red-600);
  --status-error-200: var(--red-300);
  --status-error-100: var(--red-100);

  --status-success-300: var(--green-600);
  --status-success-200: var(--green-300);
  --status-success-100: var(--green-100);

  --status-warning-300: var(--yellow-600);
  --status-warning-200: var(--yellow-300);
  --status-warning-100: var(--yellow-100);

  --text-800: var(--neutral-800);
  --text-600: var(--neutral-600);
  --text-500: var(--neutral-500);
  --text-placeholder: var(--neutral-400);
  --text-100: var(--neutral-100);

  --exceptions-table-2: var(--neutral-100);
  --exceptions-surface-1: var(--neutral-200);
  --exceptions-surface-2: var(--neutral-100);
  --exceptions-popup-background-1: var(--neutral-300);
  --exceptions-popup-background-2: var(--neutral-100);
  --exceptions-background-profile: var(--neutral-100);
  --exceptions-orange-black: var(--orange-600);
  --gradient-color-500: var(--white-gradient-500);
}

.force-dark {
  --accents-blue-600: var(--blue-100);
  --accents-blue-500: var(--blue-200);
  --accents-blue-400: var(--blue-300);
  --accents-blue-300: var(--blue-400);
  --accents-blue-200: var(--blue-500);
  --accents-blue-100: var(--blue-600);

  --accents-orange-600: var(--orange-600);
  --accents-orange-500: var(--orange-500);
  --accents-orange-400: var(--orange-400);
  --accents-orange-300: var(--orange-500);
  --accents-orange-200: var(--orange-500);
  --accents-orange-100: var(--orange-600);

  --accents-purple-600: var(--purple-100);
  --accents-purple-500: var(--purple-200);
  --accents-purple-400: var(--purple-300);
  --accents-purple-300: var(--purple-400);
  --accents-purple-200: var(--purple-500);
  --accents-purple-100: var(--purple-600);

  --backgrounds-100: var(--neutral-800);
  --backgrounds-150: var(--neutral-700);
  --backgrounds-200: var(--neutral-700);
  --backgrounds-250: var(--neutral-800);
  --backgrounds-300: var(--neutral-600);
  --backgrounds-350: var(--neutral-600);
  --backgrounds-400: var(--neutral-500);
  --backgrounds-500: var(--neutral-800);
  --backgrounds-overlay: var(--neutral-overlay-600);

  --status-error-300: var(--red-100);
  --status-error-200: var(--red-300);
  --status-error-100: var(--red-600);

  --status-success-300: var(--green-100);
  --status-success-200: var(--green-300);
  --status-success-100: var(--green-600);

  --status-warning-300: var(--yellow-100);
  --status-warning-200: var(--yellow-300);
  --status-warning-100: var(--yellow-600);

  --text-800: var(--neutral-100);
  --text-600: var(--neutral-200);
  --text-500: var(--neutral-300);
  --text-placeholder: var(--neutral-400);
  --text-100: var(--neutral-800);

  --exceptions-table-2: var(--neutral-700);
  --exceptions-surface-1: var(--neutral-600);
  --exceptions-surface-2: var(--neutral-700);
  --exceptions-popup-background-1: var(--neutral-800);
  --exceptions-popup-background-2: var(--neutral-700);
  --exceptions-background-profile: var(--neutral-600);
  --exceptions-orange-black: var(--neutral-800);
  --gradient-color-500: var(--black-gradient-500);
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--text-800);
  font-variant-numeric: tabular-nums;
}
TH, TD, H1, H2, H3, H4, H5, p, span {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-style: var(--font-style);
  font-size: calc(14px * var(--font-size, 1));
}

H3 {
  font-size: 1.3em;
}
TH, H1, H2, H3, H4, H5 {
  font-weight: var(--font-weight-bold);
}

/* * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-style: var(--font-style);
  font-size: var(--font-size);
  font-variant-numeric: tabular-nums;
} */
:root {
  --cw-orange: #FFC555;

  --border-radius: 4px;

  --box-shadow: 0 4px 10px 0 #D6D6D6;

  --button-width: 148px;
  --button-padding: 4px;
  --button-shadow: none;
  --button-radius: 2px;
  --button-border: none;

  --input-border-color: rgba(148, 166, 180, 1);
  --input-border: 1px solid var(--input-border-color);
  --input-font-color: var(--text-600);
  --input-arrow-color: #1F1D17;
  --input-background-color-disabled: rgba(0, 0, 0, .05);
  --input-border-color-focus: #000000;
  --input-border-color-hover: #707070;
  --input-border-color-disabled: transparent;
  --input-border-radius: 3px;
  --input-shadow: none;
  --input-height: 30px;

  --font-family: "Inter", sans-serif;
  --font-weight: normal;
  --font-weight-bold: bold;
  --font-style: normal;
  --font-style-italic: italic;
  --font-size: .95;

  --submitted-background-solid: rgba(238,245,255,1);
  --submitted: #4562D3;
  --submitted-light: #EFF5FE;

  --rejected-background-solid:rgba(255,238,238,1);
  --rejected: #B12727;
  --rejected-light: #FCEFEE;

  --approved-background-solid: rgba(245,255,238,1);
  --approved: #277C2E;
  --approved-light: #F7FFEF;

  --open-background-solid: lightyellow;
  --open: orange;

  --empty-background-solid: white;
  --empty: #949494;

  --zindex-default: 0;
  --zindex-sticky: 100; /**sticky element */
  --zindex-sticky-dropdown: 102; /** sticky element with dropdown (over first colum but below header of table) */
  --zindex-uitgebreidopm-important: 103; /* Edgecase for uitgebreide opm*/
  --zindex-stickyimportant: 105; /* overlapping sticky element overrule */
  --zindex-sticky-veryimportant: 110; /* project selection in table */
  --zindex-checks: 149;
  --zindex-importheader: 160;
  --zindex-header: 200;
  --zindex-widget: 225; /* widget */
  --zindex-widgetimportant: 226; /* widget header */
  --zindex-dropdown: 250; /* component with dropdown expanded */
  --zindex-dropdown-parent: 251; /* parent of dropdown */
  --zindex-toast: 300; /* toasts */
  --zindex-tooltip: 400; /* tooltips */
  --zindex-loader: 500; /* circleloader */

  /* Spacing names are based on 4px. */
  --space-05: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
}
@supports (font-variation-settings: normal) {
  :root { font-family: "Inter", sans-serif; font-optical-sizing: auto; }
}
/* Typography */
.text-h1{
  font-weight: 900;
  font-size: calc(53px * var(--font-size));
  line-height: normal;
  letter-spacing: 0;
}
.text-h2{
  font-weight: 800;
  font-size: calc(32px * var(--font-size));
  line-height: normal;
  letter-spacing: 0;
}
.text-h3{
  font-weight: 700;
  font-size: calc(20px * var(--font-size));
  line-height: normal;
  letter-spacing: 0;
}
.text-body-bold{
  font-weight: 700;
  font-size: calc(14px * var(--font-size));
  line-height: normal;
  letter-spacing: 0;
}
.text-body-medium{
  font-weight: 500;
  font-size: calc(14px * var(--font-size));
  line-height: normal;
  letter-spacing: 0;
}
.text-body-regular{
  font-weight: 400;
  font-size: calc(14px * var(--font-size));
  line-height: normal;
  letter-spacing: 0;
}
.text-body-small{
  font-weight: 400;
  font-size: calc(12px * var(--font-size));
  line-height: normal;
  letter-spacing: 0;
}
.text-label{
  font-weight: 600;
  font-size: calc(14px * var(--font-size));
  line-height: 16px;
  letter-spacing: 0;
}
.text-input{
  font-weight: 400;
  font-size: calc(14px * var(--font-size));
  line-height: 16px;
  letter-spacing: 0;
}
.text-placeholder{
  font-weight: 400;
  font-size: calc(14px * var(--font-size));
  line-height: 16px;
  letter-spacing: 0;
}
.text-button-large{
  font-weight: 600;
  font-size: calc(16px * var(--font-size));
  line-height: 24px;
  letter-spacing: 0;
}
.text-button-small{
  font-weight: 600;
  font-size: calc(14px * var(--font-size));
  line-height: 16px;
  letter-spacing: 0;
}
.text-breadcrumb{
  font-weight: 700;
  font-size: calc(12px * var(--font-size));
  line-height: 16px;
  letter-spacing: 0;
}
.text-weeknr{
  font-weight: 700;
  font-size: calc(12px * var(--font-size));
  line-height: 16px;
  letter-spacing: 2px;
}
.text-days{
  font-weight: 700;
  font-size: calc(10px * var(--font-size));
  line-height: 16px;
  letter-spacing: 2px;
}
.text-hours{
  font-weight: 400;
  font-size: calc(14px * var(--font-size));
  line-height: 16px;
  letter-spacing: 0;
}
/* Typography */

b, strong {
  font-weight: var(--font-weight-bold, bold)
}

i, em {
  font-style: var(--font-style-italic, italic)
}

a {
  color: rgb(0,100,200);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: rgb(0,80,160);
}

label {
  display: block;
  font-weight: var(--font-weight, normal);
}

.cursor:hover {
  cursor: pointer;
}

input:disabled, ._selectbox.disabled, textarea:disabled, textarea:read-only {
  background-color: var(--input-background-color-disabled);
  border-color: var(--input-border-color-disabled);
}

input:read-only:focus, textarea:read-only:focus {
  outline: none;
}

input:not(:read-only):not(:disabled):focus, textarea:not(:read-only):not(:disabled):focus {
  border-color: var(--input-border-color-focus);
}

input:not(:read-only):not(:disabled):hover, textarea:not(:read-only):not(:disabled):hover {
  border-color: var(--input-border-color-hover);
}

select:disabled {
  opacity: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input, textarea {
  border: none;
  padding: var(--button-padding);
  color: var(--input-font-color);
  background-color: var(--backgrounds-100);
}

button {
  color: var(--text-800);
  background-color: var(--backgrounds-100);
  border-radius: var(--button-radius);
  border: var(--button-border);
  box-shadow: var(--button-shadow);
}

button:disabled {
  color: var(--text-500);;
}

button:not(:disabled):active {
  background-color: var(--backgrounds-150);
}

button.cw-button {
  background-color: var(--cw-blue);
  color: var(--text-100);
}

button.cw-button:disabled {
  background-color: var(--cw-blue-disabled);
  color: #DADADA;
}

button.cw-button:hover:not(:disabled) {
  cursor: pointer;
}

button.cw-button:active {
  background-color: var(--cw-blue-active);
}

button:focus {
  border-color: var(--text-500);
}

.tooltip {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
  background: var(--text-600);
  color: var(--backgrounds-100);
  border-radius: 4px;
  padding: 8px;
  position: fixed;
  font-size: .9em;
  font-family: inherit;
  white-space: break-spaces;
  max-width: 250px;
  z-index: 5;
  width: max-content;
  overflow-wrap: break-word;
  /* margin: 10px 10px 0 0; */
}
.floating {
  width: max-content;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--zindex-tooltip);
}

/** JSON HIGHLIGHT */
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px;}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

:global(.bold) {
  font-weight: var(--font-weight-bold)
}