/* Default Style */

/*
    This file can be used as a template for styling the WebEDI Application to a customer branding.

    Steps to install this file:

    1. Adjust the values of the variables in this file and save. Recommended filename: variables-[customer name].css
    2. Upload the CSS file in it.XIA Cockpit under Global Settings -> Tenant Files of the correspondig tenant (Path: /cockpit/branding/custom)
    3. In it.XIA Cockpit, go to Global Settings -> Customization. Under 'Theme', select the file as source file and set the status to 'Activated'

    Further information is provided in the WebEDI documentation.

    Note:
    it.XIA Cockpit and the WebEDI Application use the same branding mechanism. However, most of the variables in this file only change the style
    of the WebEDI Application and do not have an effect on the it.XIA Cockpit.
*/

/*========================================================================================================================
IMPORT FONTS
========================================================================================================================*/
/* Import custom font (e.g. NDBS fonts 'Noto Sans' & 'Noto Sans Serif') */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Serif&display=swap');

/*========================================================================================================================
BRANDING VARIABLES
========================================================================================================================*/
:root {
  /* General colors */
  --primary-color: #0072bc;
  --primary-color-text: #f1f1f4;
  --primary-color-hover: #005b96;
  --primary-outlined-hover: rgba(51, 169, 199, 0.1);
  --primary-color-active: var(--primary-color-hover);
  --text-color: #2e404d;
  --text-color-secondary: var(--text-color);

  /* Font to be used (ordered by priority, first available font will be used)*/
  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  /* Border radius for various elements */
  --button__border-radius: 5px;
  --input__border-radius: 5px;
  --status-tag__border-radius: 20px;
  --table__border-radius: 8px;
  --card__border-radius: 8px;

  /*---------------------------
  Header (top)
  -----------------------------*/
  /* General */
  --header__background-color: #070f26;
  --header__border-width: 0;
  --header__border-color: unset;
  --header__height: 48px;
  --header__text-color: white;

  /* Logo */
  --header__logo__width: auto;
  --header__logo__height: 40px;

  /* Supplier selection */
  --header__mircro-app-selection__text-color: var(--header__text-color);
  --header__mircro-app-selection__text-color--hover: var(--primary-color);

  /* Language selection */
  --header__language-selection__text-color: var(--header__text-color);
  --header__language-selection__text-color--hover: var(--primary-color);

  /* User menu */
  --header__user-menu__avatar__background-color: #ffc400;
  --header__user-menu__avatar__text-color: var(--header__background-color);
  --header__user-menu__avatar__border-radius: 50%;

  /*---------------------------
  Side Menu (left-side)
  -----------------------------*/
  /* General */
  --navigation__background-color: white;
  --navigation__divider-color: #cccccc;
  --navigation__border-color: #edebe9;

  /* Hamburger icon */
  --navigation__hamburger-icon__text-color: var(--text-color-secondary);
  --navigation__hamburger-icon__text-color--hover: var(--text-color-secondary);
  --navigation__hamburger-icon__text-color__mobile: var(--primary-color);
  --navigation__hamburger-icon__text-color__mobile--hover: var(--primary-color);

  /* Header */
  --navigation__header__text-color: var(--text-color);

  /* Item */
  --navigation__item__background-color: var(--navigation__background-color);
  --navigation__item__background-color--hover: #f3f3f3;
  --navigation__item__background-color--active: var(--navigation__item__background-color--hover);
  --navigation__item__text-color: var(--text-color);
  --navigation__item__text-color--hover: var(--primary-color);
  --navigation__item__text-color--active: var(--primary-color);

  /* Mask */
  --navigation__mask_background-color: rgba(0, 0, 0, 0);
  --navigation__mask_background-color--active: rgba(0, 0, 0, 0.6);

  /*---------------------------
  Content Area (right-side)
  -----------------------------*/
  /* Background color */
  --body-bg: #f3f3f3;

  /* Search field */
  --search-field__border-radius: 12px;
  --search-field__border-width: 0;
  --search-field__border-color: white;
  --search-field__background-color: var(--input-bg);
  --search-field__text-color: var(--text-color);
  --search-field__text-color--placeholder: var(--input-color-placeholder);

  /* Panel */
  --panel__border-color: #cccccc;

  /* Divider */
  --divider-color: var(--panel__border-color);

  /* Input field */
  --input-bg: white;
  --input-color: var(--text-color);
  --input-color-placeholder: #b4b4b4;
  --input-border: var(--text-color);
  --input-bg-disabled: #e8e8e8;
  --input-color-disabled: var(--text-color);
  --input-border-disabled: var(--input-bg-disabled);

  /* Table */
  --table__background-color--hover: #e3eff9;
}