@charset "UTF-8";
body {
  /*
   Dummys für leere Layouts ;)
   */
  /* primärfarbe - gibt dem theme seinen namen*/
  --color-primary: #FF00FF;
  /* schrift auf primärfarbe - weiß oder schwarz wahrscheinlich */
  --color-primary-contrast: #FFFFFF;
  /* Sekundärfarbe - wofür wissen wir noch nicht genau */
  --color-secondary: #00FF00;
  /* schrift auf primärfarbe - weiß oder schwarz wahrscheinlich */
  --color-secondary-contrast: #FFFFFF;

  /* Entityaction */
  --color-action-primary: var(--color-primary);
  --color-action-secondary: var(--color-secondary);

  /*
    Die Akzentfarbe, hier ist interaktivität möglich.
    Sehr starke, auffällige Farben, die den Nutzer lenken
   */
  --color-accent: #FFCC00;
  --color-accent-contrast: #333;
  /* legacy / deprecated */
  --color-primary-accent: var(--color-accent);

  /*
       Basisfarben - in jedem Layout gleich
   */

  /* Schatten für Karten, boxen, usw */
  --shadow-cards: 0 .5px 2px rgba(0, 0, 0, .2);
  --shadow-sidebar: -1px 0 5px rgba(0, 0, 0, 0.2);

  /* Systemweite Grundfarben */
  --color-status-blue: #0066dd;
  --color-status-green: #569450;
  --color-status-yellow: #e6cc34;
  --color-status-red: #e34a1b;
  --color-status-orange: #f1a129ff;
  --color-status-grey: #999999;
  --color-admin-red: #CC0000;
  --color-input-mandatory: #C33333;
  --color-input-changed: var(--color-accent);

  /*Darkmode*/
  --color-default-hover-dark: rgba(138, 130, 84, 0.98);
  --color-current-item-dark: #a28500;
  --color-selected-item-dark: #749c7d;
  --color-selected-item-hover-dark: #93c69f;
  --color-tint-dark-25: rgba(0,0,0,0.25);
  --color-tint-dark-50: rgba(0,0,0,0.50);
  --color-tint-dark-75: rgba(0,0,0,0.75);
  --color-tint-weekend-dark: rgb(70, 32, 0);
  --color-tint-holiday-dark: rgba(255, 160, 100, 0.33);
  --color-tint-vacation-dark:rgba(200, 170, 0, 0.33);
  --color-tint-sick-dark:    rgba(255, 100, 200, 0.33);
  --color-tint-birthday-dark:rgba(150, 200, 100, 0.33);
  --color-tint-extern-dark:rgba(0, 100, 250, 0.33);
  --color-board-card-dark: #444; /*rgba(240, 227, 0, 0.25);*/
  --color-font-weekend-dark: rgba(141, 141, 141, 0.91);
  --color-worker-cap-free-dark: #8c9a84;
  --color-worker-cap-error-dark: #7f5d66;
  --color-worker-cap-time-dark: #3e639f;

  /*Lightmode*/
  --color-default-hover-light: rgba(255, 245, 157, 0.50);
  --color-current-item-light: #ffdc00;
  --color-selected-item-light: #A7E0B5;
  --color-selected-item-hover-light: #93c69f;
  --color-tint-light-25: rgba(255,255,255,0.25);
  --color-tint-light-50: rgba(255,255,255,0.50);
  --color-tint-light-75: rgba(255,255,255,0.75);
  --color-tint-weekend-light: rgba(200, 100, 0, 0.33);
  --color-tint-holiday-light: rgba(255, 160, 100, 0.33);
  --color-tint-vacation-light: rgba(255, 255, 100, 0.33);
  --color-tint-sick-light:    rgba(255, 100, 200, 0.33);
  --color-tint-birthday-light:rgba(150, 200, 100, 0.33);
  --color-tint-extern-light:rgba(0, 100, 250, 0.33);
  --color-board-card-light: #FFF; /*rgba(240, 227, 0, 0.25);*/
  --color-font-weekend-light: rgba(38, 50, 56, .35);
  --color-worker-cap-free-light: #E8FFDB;
  --color-worker-cap-error-light: #FFE0EE;
  --color-worker-cap-time-light: #d8eefe;

  --color-tr-lodd-dark: transparent;
  --color-tr-lodd-light: transparent;

  --color-shade-dark-none: #000;
  --color-shade-dark-1: #161616;
  --color-shade-dark-2: #323232;
  --color-shade-dark-3: #484848;
  --color-shade-dark-4: #646464;
  --color-shade-dark-9: #CCCCCC;

  --color-shade-light-none: #FFF;
  --color-shade-light-1: #FBFBFB;
  --color-shade-light-2: #F6F6F6;
  --color-shade-light-3: #E9E9E9;
  --color-shade-light-4: #E0E0E0;
  --color-shade-light-9: #666666;

  --backdrop-filter-ui-dark: blur(5px) contrast(70%) brightness(80%);
  --backdrop-filter-ui-light: blur(5px) contrast(50%) brightness(180%);

  /*  Standardschriften */
  --font-family: "Roboto", Myriad, Helvetica, Tahoma, Arial, clean, sans-serif;
  --font-header: 500 28px var(--font-family);
  --font-large: 500 22px var(--font-family);
  --font-medium: 400 15px var(--font-family);
  --font-normal: 13px var(--font-family);
  --font-small: 11px var(--font-family);
  --font-xsmall: 9px var(--font-family);

  --font-input-label: var(--font-small);
  --font-input: var(--font-normal);

  /*  Chart Color */
  --color-chart0: var(--color-primary);
  --color-chart1: rgb(183, 9, 0);
  --color-chart2: rgb(0, 172, 166);
  --color-chart3: rgb(92, 139, 0);
  --color-chart4: #F57C00;
  --color-chart5: rgb(255, 0, 170);
  --color-chart6: #FFEE58;
  --color-chart7: rgb(170, 255, 213);
  --color-chart8: rgb(144, 115, 255);
  --color-chart9: rgb(255, 231, 158);
  --color-chart10: #37474E;
  /*  Maße  */
  --height-topmenu1: 64px;
  --height-topmenu2: 32px;
  --height-footer: 32px;
  --width-leftarea: 300px;
  --width-sidebar: 50px;
  --width-componentspacing: 12px;
  --height-toolbar: 34px;
  --height-input: 24px;
  --padding-input: 2px;
  --height-input-button: 18px;
  --scale-factor: 1;
  --width-tr-border: 1px;
  --icon-size: 24px;

  --border-radius-button: 3px;
  --color-button-border: transparent;
  --color-button-back: var(--color-toolbar-button);
  --color-button-font: var(--color-toolbar-font);
  --color-input-button-back: var(--color-toolbar-button);
  --color-input-button-font: var(--color-toolbar-font);
  --width-button-border: 1px;
  --shadow-button: 0 0 1px rgba(0,0,0,0.125);
  --color-button-raised-back: var(--color-accent);
  --color-button-raised-font: var(--color-accent-contrast);
  --shadow-button-raised: 0 1px 2px rgba(0,0,0,0.125);
  --font-weight-column-captions: bold;
  --width-grid-rowheader: 128px;

  font: var(--font-normal);
  color: var(--color-main-font);

  --user-background-image-xq: none; /* Excellent*/
  --user-background-image-hq: none; /* High Quality */
  --user-background-image-lq: none; /* Low Quality */
  --user-background-image: var(--user-background-image-hq, none);
}

body.connection-4g { /* LTE oder WiFi: Excellent Quality */
  --user-background-image: var(--user-background-image-xq, none);
}

[class*="jml_input_readonly"]:not(.ro-transparent) {--color-input-background: var(--color-shade-4);}

/*
Neues Responsive Menu für pf6
*/

body.debugmode::after {
  display: block;
  position: fixed;
  top: 4px;
  right: 40px;
  height: 10px;
  width:100px;
  content: 'desktop';
  background: #000;
  color: #FFF;
  text-align: center;
  font-size: 10px;
  line-height: 10px;
}

/* small desktop */
@media (max-width: 1300px) {
  body.debugmode::after { content: 'small desktop';}
  body:not(.dialog) {
    --scale-factor: 0.75; /* 75% */
    --height-topmenu1: 64px;
    --height-topmenu2: 32px;
    --width-leftarea: 225px; /* 75% der normalen sidebar */
    --width-sidebar: 32px;
    --height-toolbar: 32px;
    --font-header: 500 26px var(--font-family);
    --font-large: 500 20px var(--font-family);
    --font-medium: 400 14px var(--font-family);
    --font-normal: 12px var(--font-family);
    --font-small: 9px var(--font-family);
    --font-xsmall: 7px var(--font-family);
    --width-grid-rowheader: 96px;
  }
}

/* small tablet */
@media (max-width: 1050px) {
  body.debugmode::after { content: 'tablet';}
  body:not(.dialog) {
    --height-topmenu1: 56px;
    --font-header: 500 22px var(--font-family);
    --font-large: 500 16px var(--font-family);
    --font-medium: 400 12px var(--font-family);
    --font-normal: 11px var(--font-family);
    --font-small: 8px var(--font-family);
    --font-xsmall: 7px var(--font-family);
    --width-grid-rowheader: 64px;
  }
}

/* mobile */
@media (max-width: 799px) {
  body.debugmode::after { content: 'mobile < 799';}
  /* gilt nicht für herausgezogene Dialoge */
  body:not(.dialog) {
    --height-topmenu1: 48px;
    --width-componentspacing: 4px;
  }

  /* ab mobile sind dialoge möglichst fullscreen - wegen ios lassen wir etwas abstand */
  fp-dialog {min-width: 90vw; min-height: 80vh; }
}
/* small mobile iPhone 6,7,8,X portrait */
@media (max-width: 375px) {
  body.debugmode::after { content: 'small mobile';}
  body:not(.dialog) {
    --height-topmenu1: 48px;
    --width-componentspacing: 2px;
    --font-header: 500 18px var(--font-family);
    --font-large: 500 14px var(--font-family);
    /*--font-medium: 400 10px var(--font-family);*/
    /*--font-normal: 9px var(--font-family);*/
    /*--font-small: 8px var(--font-family);*/
    /*--font-xsmall: 7px var(--font-family);*/
    --user-background-image: var(--user-background-image-lq, none);
  }
}