/*

    This file defines global CSS styling, such as colors and fonts that will be
    relevant for the entire app. Especially a central color definition with
    variables will make it easy to switch themes (light and dark) or other app
    wide changes.

    FONTS:
    
    - Libre Franklin: which is the open source version of Hempel's brand font Franklin Gothic
    - Nunito Sans: which provides monospaced numbers closely resembling Franklin's
    
    Nunito Sans numbers are only used where we need tabular layout, i.e. where it is important
    that numbers of same magnitude have the same width. To achieve a similar font height though,
    Nunito Sans must be rendered one pixel taller than the equivalent text using Libre Franklin.

    Solitary numbers and inline numerics can be displayed using Libre Franklin, emphasizing the
    brand appearance.

    COLORS:

    First of all, the entire Hempel color palette. 

*/

body {
    min-width: 800px;
}

/**********************************************************************************************
    
    ROOT DIMENSIONS 
    
*/
:root {

    --gap: 10px;
    --grid-gap: 12px;
    --page-padding: 16px;

    --fleet-title-panel-height: 114px;
    --fleet-title-panel-height-details: 216px;
    --vessel-title-panel-height: 138px;
    --vessel-title-panel-height-details: 232px;

    --kpi-panel-height-large: 320px;
    --kpi-panel-height: 240px;
    --kpi-panel-height-small: 210px;
}

/* ROOT COLORS */
:root {

    --color-white: #FFFFFF;
    --color-white-05: rgba(255, 255, 255, 0.05);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-90: rgba(255, 255, 255, 0.9);
    --color-white-95: rgba(255, 255, 255, 0.95);
    --color-anthracit: #202020;
    --color-black: #000000;
    --color-black-05: rgba(0, 0, 0, 0.05);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-15: rgba(0, 0, 0, 0.15);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-30: rgba(0, 0, 0, 0.3);
    --color-black-40: rgba(0, 0, 0, 0.4);
    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-black-70: rgba(0, 0, 0, 0.7);
    --color-black-80: rgba(0, 0, 0, 0.8);
    --color-black-90: rgba(0, 0, 0, 0.9);
    --color-black-95: rgba(0, 0, 0, 0.95);

    --color-grey-100: #f9f8f8;
    --color-grey-150: #f5f4f3;
    --color-grey-200: #F1EFEF;
    --color-grey-300: #D9D6D3;
    --color-grey-400: #cdcac6;

    --color-grey-dark: #968C83;
    --color-grey-medium: #ACA39A;
    --color-grey-light: #C4BCB7;
    --color-grey-neutral: #f9f8f8;
    --color-grey-pale: #F1EFEF;

    --color-blue-dark-05:rgba(0, 51, 160, 0.05);
    --color-blue-dark-05-opaque: #F2F4FA;
    --color-blue-dark-10:rgba(0, 51, 160, 0.10);
    --color-blue-dark-10-opaque: #E6EBF6;
    --color-blue-dark-15:rgba(0, 51, 160, 0.15);
    --color-blue-dark-15-opaque: #D9E1F1;
    --color-blue-dark-20:rgba(0, 51, 160, 0.20);
    --color-blue-dark-20-opaque: #BFCCE7;
    --color-blue-dark-25: rgba(0, 51, 160, 0.25);
    --color-blue-dark-33: rgba(0, 51, 160, 0.33);
    --color-blue-dark-50: rgba(0, 51, 160, 0.5);
    --color-blue-dark-90: rgba(0, 51, 160, 0.9);
    --color-blue-dark: #0033A0;
    --color-blue-dark-darkened: hsl(221, 100%, 15%);
    --color-blue-dark-hsl: hsl(221, 100%, 31%);
    --color-blue-medium: #0076d1;
    --color-blue-medium-20: hsla(206, 100%, 41%, 0.20);
    --color-blue-medium-25: hsla(206, 100%, 41%, 0.25);
    --color-blue-medium-50: hsla(206, 100%, 41%, 0.5);
    --color-blue-medium-darkened: hsl(206, 100%, 33%);
    --color-blue-light: #009FDF;
    --color-blue-light-10: rgba(0, 161, 224, 0.1);
    --color-blue-light-20: rgba(0, 161, 224, 0.2);
    --color-blue-light-30: rgba(0, 161, 224, 0.3);
    --color-blue-light-50: rgba(0, 161, 224, 0.5);
    --color-blue-light-pale: hsl(197, 100%, 66%);
    --color-blue-pale: #0033A040;
    
    --color-blue-light-inverted: hsl(197, 75%, 66%);

    --color-green-dark: rgb(45, 83, 53);
    --color-green-medium: rgb(48, 122, 31);
    --color-green-light: rgb(100, 168, 11);
    --color-green-pale: #64A70B40;

    --color-green-light-inverted: hsl(86, 32%, 40%);

    --color-yellow-dark: rgb(237, 139, 0);
    --color-yellow-medium: #ebcb00;
    --color-yellow-pale: rgba(235, 203, 0, 0.251);
    --color-yellow-light: rgb(254, 221, 13);
    
    --color-yellow-dark-inverted: hsl(35, 75%, 69%);

    --color-orange-dark: rgb(207, 69, 32);
    --color-orange-medium: rgb(194, 94, 0);
    --color-orange-light: rgb(237, 155, 51);
    --color-orange-pale: #ED9B3340;

    --color-red-dark: rgb(138, 42, 43);
    --color-red-light: rgb(227, 6, 19);
    --color-red-pale: #CF452040;

    --color-pink-dark: rgb(131, 49, 119);
    --color-pink-medium: rgb(174, 41, 129);
    --color-pink-light: rgb(227, 28, 121);
    --color-pink-pale: #E31C7940;

    --color-purple-dark: rgb(88, 44, 131);
    --color-purple-medium: rgb(143, 40, 154);
    --color-purple-light: rgb(199, 36, 177);
    --color-purple-pale: #C724B140;

    --color-brown-dark: rgb(75, 54, 41);
    --color-brown-light: #CDA788;

    --color-gold: rgb(132, 117, 78);
    --color-silver: rgb(138, 141, 143);

    --color-dark-grey-000: #D3D4D6;
    --color-dark-grey-100: #A7A9AD;
    --color-dark-grey-200: #666871;
    --color-dark-grey-300: #43454F;
    --color-dark-grey-400: #393C47;
    --color-dark-grey-500: #3C3F4B;
    --color-dark-grey-600: #2A2D3B;
    --color-dark-grey-700: #242733;
    --color-dark-grey-800: #191924;
    --color-dark-grey-900: #15151E;

}



/**********************************************************************************************

    LIGHT MODE

*/

/* Main, swirls, panel backgrounds */
html[data-theme="light"]:root {

    color-scheme: only light;

    --main-background: rgb(245, 243, 243);
    --main-watermark-fill: var(--color-grey-300);
    --background-menu-icon: var(--color-blue-dark-10); 
    --background-separator: var(--color-blue-dark-10); 
    --attention-color: var(--color-orange-dark);

    --footer-background: var(--main-background);
    --footer-border: var(--color-grey-300);
    --footer-color: var(--color-grey-dark);

    --select: var(--color-blue-dark);


    /* Panels */

    --panel-background: var(--color-white);
    --panel-title-background: rgba(255, 255, 255, 0.9);
    --panel-blueprint-background: hsl(206, 50%, 35%);
    --panel-shadow: 0 0 4px 0 rgba(150, 140, 131, 0.16);
    --panel-shadow-strong: 0 0 4px 0 rgba(150, 140, 131, 0.33);

    --blueprint-border-color: var(--color-blue-dark-15-opaque); 
    --blueprint-gridlines-color: var(--color-white-15);
    --blueprint-title-color: var(--color-white-50); 
    --hull-area-fill: var(--color-grey-200); 

    --loadingbar-background: rgba(196, 188, 183, 0.25);
    --loadingbar-fill: var(--color-grey-light);

    --filter-shadow-bottom: 0 2px 8px rgba(20, 20, 20, 0.15);
    --filter-shadow-top: 0 2px 4px rgba(20, 20, 20, 0.15);
                       
    --focus-outline: 2px solid hsla(206, 100%, 41%, 0.5);
    --focus-shadow: 0 0 0 2px hsla(206, 100%, 41%, 0.5);

    --modal-overlay: rgba(0, 0, 0, 0.33);
    --tour-overlay: rgba(0, 0, 0, 0.50);
    --tour-border-color: var(--color-purple-medium);

    /* Scrollbars */
    --scrollbar-track-background: var(--color-white);
    --scrollbar-thumb-background: var(--color-blue-dark-10);
    --scrollbar-thumb-background-firefox: var(--color-blue-dark-50);
    --scrollbar-thumb-background-hover: var(--color-blue-dark);

}

/* Text & icons */
html[data-theme="light"]:root {
    
    --text-color: var(--color-anthracit);
    --text-color-disabled: var(--color-grey-medium);
    --text-color-highlighted: var(--color-orange-dark);
    --text-color-subdued: var(--color-grey-dark);
    --text-color-status: var(--color-grey-dark);
    --text-color-toneddown: var(--color-grey-dark);
    --text-color-footnote: var(--color-grey-dark);
    --text-color-inverted: var(--color-white);
    --text-color-placeholder: var(--color-grey-dark);
    --text-color-hover: var(--color-white);
    --text-color-error: #AC3825;
    --text-color-warning: var(--color-yellow-dark);
    --text-color-success: var(--color-green-light);
    --text-color-invalid: var(--color-anthracit);

    --text-color-link: var(--color-blue-medium);
    --text-color-link-hover: var(--color-orange-dark);
    --text-color-link-visited: var(--color-blue-medium-darkened);
    --text-color-link-inverted: var(--color-blue-dark-15-opaque);
    --text-color-link-inverted-hover: var(--color-white);

    --icon-fill: var(--color-blue-dark);
    --icon-fill-disabled: var(--color-grey-dark);
    --icon-fill-subdued: var(--color-grey-dark);
    --icon-fill-inverted: var(--color-white);
    --icon-fill-hover: var(--color-white);
    --icon-fill-error: var(--color-orange-dark);
    --icon-fill-error-inverted: var(--color-white);
    --icon-fill-bw: var(--color-anthracit);
    --icon-fill-bw-disabled: var(--color-grey-neutral);
    --icon-fill-bw-inverted: var(--color-white);

}

/* Control, buttons, checkboxes: backgrounds for default, transparent, outlined, hover and selected */
html[data-theme="light"]:root {

    --control-background-default: var(--color-grey-150);
    --control-background-primary: var(--color-blue-dark);
    --control-background-primary-disabled: var(--color-blue-dark-33);
    --control-background-action: var(--color-green-medium);
    --control-background-error: #AC3825;
    --control-background-transparent: transparent;
    --control-background-outlined: var(--color-white);
    --control-background-hover: var(--color-blue-medium);
    --control-background-pressed: var(--color-blue-dark-darkened);
    --control-background-selected: var(--color-blue-dark);
    --control-background-action-hover: var(--color-green-light);
    --control-background-action-pressed: var(--color-green-dark);
    --control-background-error-hover: var(--color-orange-dark);
    --control-background-error-pressed: var(--color-red-dark);
    --control-background-input: var(--color-white);
    --control-background-invalid: rgba(207, 69, 32, 0.25);

    --control-border-outlined: var(--color-grey-400);
    --control-border-hover: var(--color-blue-medium);
    --control-border-pressed: var(--color-blue-dark-darkened);
    --control-border-checked: var(--color-blue-dark);
    --control-border-error: var(--color-orange-dark);
    --control-border-error-hover: var(--color-orange-dark);
    --control-border-error-pressed: var(--color-red-dark);
    --control-border-focused: var(--color-blue-medium-50);
    --control-border-focused-dimmed: var(--color-blue-dark-50);

    --control-group-separator: var(--color-blue-dark-10); 

    --control-shadow: 0 0 4px 0 rgba(150, 140, 131, 0.33);
    --control-shadow-strong: 0 0 4px 0 rgba(0, 51, 160, 0.33);

    --button-action-background: var(--color-green-light);
    --button-action-background-hover: var(--color-green-light);
    --button-action-background-pressed: var(--color-green-dark);
    
    --checkbox-background-default: hsla(221, 100%, 31%, 0.10);
    --checkbox-background-disabled: var(--color-grey-200);
    --checkbox-background-inverted: var(--color-white-30);
    --checkbox-background-selected: var(--color-blue-dark);
    --checkbox-background-selected-inverted: var(--color-white);
    --checkbox-background-selected-disabled: var(--color-grey-medium);
    --checkbox-background-mixed: hsla(221, 100%, 31%, 1);
    --checkbox-tickmark: var(--color-white);
    --checkbox-tickmark-inverted: var(--color-blue-dark);
    --checkbox-tickmark-disabled: var(--color-white);

}

/* Header, menus, popups */
html[data-theme="light"]:root {

    --header-shadow: 0 4px 4px 0 rgba(20, 20, 20, 0.1);
    --header-toolbar-separator-color: var(--color-blue-dark);

    --tab-border-color: transparent;
    --tab-border-color-hover: var(--color-blue-dark-20);
    --tab-border-color-selected: var(--color-blue-dark);

    --menu-separator: var(--color-grey-200);
    --menu-background-hover: var(--color-blue-dark-05);
    --menu-text-color: var(--color-anthracit);
    --menu-text-color-hover: var(--color-blue-dark);
    --menu-icon-background: var(--color-blue-dark-10);


    --dropdown-background: var(--color-blue-dark-10-opaque);
    --dropdown-background-hover: var(--color-blue-dark-15-opaque);
    --dropdown-background-pressed: var(--color-blue-medium-darkened);
    --dropdown-button-background-hover: var(--color-blue-dark-05);
    --dropdown-background-selected: var(--color-blue-dark);
    --dropdown-button-background-selected-hover: var(--color-white-10);

    --dropdown-table-background: transparent;
    --dropdown-table-background-hover: var(--color-blue-dark-10);
    --dropdown-table-background-selected: var(--color-blue-dark-20);
    --dropdown-table-background-selected-hover: var(--color-blue-dark-10);

    --dropdown-toolbar-background: var(--color-blue-dark-05-opaque);
    --dropdown-toolbar-background-hover: var(--color-blue-medium);
    --dropdown-toolbar-background-pressed: var(--color-blue-medium-darkened);
    --dropdown-toolbar-background-selected: var(--color-blue-dark);
    --dropdown-toolbar-background-selected-hover: var(--color-blue-dark-90);

    --dropdown-separator-color: var(--color-blue-dark-10);
    --dropdown-separator-color-selected: var(--color-white-30);

    --dropdown-popup-background: var(--color-white);
    --dropdown-popup-background-hover: var(--color-blue-dark-05);
    --dropdown-popup-background-selected: var(--color-blue-medium);
    --dropdown-popup-border: var(--color-grey-100);

    --dropdown-popup-shadow: 0 4px 8px 0 rgba(20, 20, 20, 0.1);


    --popup-background: var(--color-white);
    --popup-border: var(--color-blue-dark);
    --popup-instructions-background: var(--color-blue-medium);
    --popup-tour-background: var(--color-purple-dark);

    /* Needs reversed naming */
    --border-popup: var(--color-blue-dark);

    --popup-instructions-shadow: 0px 8px 24px 4px rgba(51, 51, 51, 0.25), 
                                 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
    --popup-latched-shadow: 0px 8px 24px 4px rgba(51, 51, 51, 0.33), 
                            0px 4px 12px 0px rgba(0, 0, 0, 0.33);
    --popup-calendar-shadow: 0px 8px 48px 4px rgba(51, 51, 51, 0.5), 
                            0px 4px 24px 0px rgba(0, 0, 0, 0.5);

}

/* Calendar */
html[data-theme="light"]:root {
    
    --calendar-background-selected: var(--color-blue-dark);
    --calendar-background-selected-dimmed: var(--color-grey-dark);
    --calendar-background-hover: hsla(206, 100%, 41%);
    --calendar-background-hover-dimmed: var(--color-grey-200);
    --calendar-background-pressed: var(--color-blue-medium-dark);
    --calendar-background-pressed-dimmed: var(--color-grey-300);
    --calendar-background-today: var(--color-orange-dark);
    --calendar-background-today-dimmed: rgba(207, 69, 32, 0.5);

    --calendar-dot-selected: var(--color-white-50);
    --calendar-dot-selected-dimmed: var(--color-white-50);
    --calendar-dot-hover: var(--color-white-50);
    --calendar-dot-hover-dimmed: var(--color-grey-light);
    --calendar-dot-pressed: var(--color-white-50);
    --calendar-dot-pressed-dimmed: var(--color-grey-medium);

    --calendar-color-today: var(--color-orange-dark);
    --calendar-color-dimmed: var(--color-grey-medium);
    --calendar-color-disabled: var(--color-grey-light);
    --calendar-color-weekend: var(--color-orange-dark);
    --calendar-color-weekend-dimmed: rgba(207, 69, 32, 0.5);
    --calendar-color-weekend-disabled: rgba(207, 69, 32, 0.35);
    --calendar-color-selected: var(--color-white);
    --calendar-color-hover: var(--color-white);
    --calendar-color-hover-dimmed: var(--color-grey-medium);
    --calendar-color-pressed: var(--color-white);
    --calendar-color-pressed-dimmed: var(--color-grey-dark);

}

/* Table */
html[data-theme="light"]:root {
    
    --table-background: var(--color-white);

    --table-header-background-hover: var(--color-blue-dark-05-opaque);
    --table-header-background-pressed: var(--color-blue-dark-20-opaque);
    --table-header-background-sorted: var(--color-blue-dark-10-opaque);

    --table-row-background-alt: var(--color-blue-dark-05-opaque);
    --table-row-background-hover: var(--color-blue-dark-10-opaque);
    --table-row-background-selected: var(--color-blue-dark);

    --table-header-border-color: var(--color-blue-dark);
    --table-gridlines-color: var(--color-blue-dark-05-opaque);
    --table-gridlines-color-zebra: var(--color-blue-dark-10-opaque);
    --table-gridlines-color-selected: var(--color-white-30);
    --table-freezeline-color: var(--color-blue-dark-20-opaque);

}

/* Segments, progress, sliders */
html[data-theme="light"]:root {

    --segment-background-default: var(--color-grey-150);
    --segment-background-transparent: var(--color-white-10);
    --segment-background-hover: #d9d6d380;
    --segment-background-transparent-hover: var(--color-white-10);

    --progress-background: var(--color-grey-150);
    --progress-default: var(--color-blue-dark);
    --progress-error: var(--color-orange-dark);
    --progress-warning: var(--color-yellow-medium);
    --progress-success: var(--color-green-light);

}

/* Graphs, plots, histograms */
html[data-theme="light"]:root {

    --zoom-background: #0076d120;
    --zoom-border-color: #0076d180;
    --zoom-shadow: 0 0 8px 0 #0076d120,
                   0 0 4px 0 #0076d120;

    --plot-axis-color: var(--color-blue-dark);
    --plot-gridlines-color: var(--color-blue-dark-10);
    --plot-gridlines-color-emphasized: var(--color-blue-dark-33);
    --plot-cursor-color: var(--color-blue-dark-50);

    --plot-bar-color-faded: var(--color-blue-dark-10-opaque);
    --plot-bar-color-default: var(--color-blue-dark);
    --plot-dot-color-default: var(--color-blue-dark);
    --plot-dot-color-history: var(--color-grey-medium);
    --plot-line-color-default: var(--color-orange-dark);

    --plot-scatter-dot-highlight: var(--color-blue-dark-10);

    --plot-inplot-text: var(--color-blue-dark-90);
    --plot-inplot-text-inverted: var(--color-white);

    --plot-legend-background: var(--color-white);
    --plot-legend-background-hover: var(--color-blue-dark-05);
    --plot-legend-background-pressed: var(--color-blue-dark-15);

    --histogram-label: var(--color-anthracit);
    --histogram-label-selected: var(--color-black);
    --histogram-bar-color: var(--color-blue-dark-10-opaque);
    --histogram-bar-color-hover: var(--color-blue-dark-15-opaque);
    --histogram-bar-color-selected: var(--color-blue-dark);

}


/* Map visualization */
html[data-theme="light"]:root {

    --map-background-sea: hsl(197, 50%, 75%);
    --map-background-sea: #AAD3DF;
    --map-background-land: hsl(30, 10%, 95%);
    
    --map-border-land: hsl(30, 10%, 80%);
    --map-text: var(--color-grey-medium);
    --map-path: var(--color-blue-medium);
    --map-path-default: var(--color-blue-dark);
    --map-path-cold: var(--color-blue-light);
    --map-path-warm: var(--color-orange-dark);

}


/**********************************************************************************************

    DARK MODE

    Should we ever want to adapt user brwoser / system preferences:

    https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
    https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints#user-agent_client_hints
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
    
*/

/* Main, swirls, panel backgrounds */
html[data-theme="dark"]:root {

    color-scheme: only dark;

    --main-background: #15151E;
    --main-watermark-fill: var(--color-grey-300);
    --background-menu-icon: var(--color-blue-dark-10); 
    --background-separator: var(--color-white-10); 
    --attention-color: var(--color-orange-dark);

    --footer-background: var(--main-background);
    --footer-border: var(--color-white-20);
    --footer-color: var(--color-white-80);

    --select: var(--color-blue-medium);


    /* PANELS */

    --panel-background: #242733;
    --panel-title-background: #242733c0;
    --panel-blueprint-background: hsl(206, 50%, 17%);
    --panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
    --panel-shadow-strong: 0 0 8px 0 rgba(0, 0, 0, 0.5);

    --blueprint-border-color: var(--color-white-15); 
    --blueprint-gridlines-color: var(--color-white-15);
    --blueprint-title-color: var(--color-white-50);
    --hull-area-fill: var(--color-blue-dark-50-opaque); 

    --loadingbar-background: rgba(196, 188, 183, 0.25);
    --loadingbar-fill: var(--color-grey-light);

    --filter-shadow-bottom: 0 2px 8px rgba(20, 20, 20, 0.5);
    --filter-shadow-top: 0 2px 4px rgba(20, 20, 20, 0.5);

    --focus-outline: 2px solid hsla(206, 100%, 41%, 0.75);
    --focus-shadow: 0 0 0 2px hsla(206, 100%, 41%, 0.75);

    --modal-overlay: rgba(0, 0, 0, 0.50);
    --tour-overlay: rgba(0, 0, 0, 0.50);
    --tour-border-color: var(--color-purple-medium);

    /* Scrollbars */
    --scrollbar-track-background: #242733;
    --scrollbar-thumb-background: var(--color-white-10);
    --scrollbar-thumb-background-firefox: var(--color-white-50);
    --scrollbar-thumb-background-hover: var(--color-white);

}

/* Text & icons */
html[data-theme="dark"]:root {
    
    --text-color: var(--color-white);
    --text-color-disabled: hsl(240, 11%, 60%);
    --text-color-highlighted: var(--color-yellow-dark);
    --text-color-subdued: #9f9fb2;
    --text-color-status: #9f9fb2;
    --text-color-toneddown: var(--color-white-90);
    --text-color-footnote: var(--color-grey-dark);
    --text-color-inverted: var(--color-white);
    --text-color-placeholder: var(--color-white-50);
    --text-color-hover: var(--color-white);
    --text-color-error: var(--color-orange-dark);
    --text-color-warning: var(--color-yellow-dark);
    --text-color-success: var(--color-green-light);
    --text-color-invalid: var(--color-white);

    --text-color-link: var(--color-blue-light-pale);
    --text-color-link-hover: var(--color-orange-light);
    --text-color-link-visited: var(--color-blue-light-pale);
    --text-color-link-inverted: var(--color-blue-dark-15-opaque);
    --text-color-link-inverted-hover: var(--color-white);

    --icon-fill: var(--color-white);
    --icon-fill-disabled: var(--color-white-30);
    --icon-fill-subdued: #9f9fb2;
    --icon-fill-inverted: var(--color-white);
    --icon-fill-hover: var(--color-white);
    --icon-fill-error: var(--color-orange-dark);
    --icon-fill-error-inverted: var(--color-white);
    --icon-fill-bw: var(--color-white);
    --icon-fill-bw-disabled: var(--color-grey-neutral);
    --icon-fill-bw-inverted: var(--color-white);

}

/* Control, buttons, checkboxes: backgrounds for default, transparent, outlined, hover and selected */
html[data-theme="dark"]:root {
    
    --control-background-default: #191924;
    --control-background-primary: var(--color-blue-medium);
    --control-background-primary-disabled: var(--color-blue-medium-50);
    --control-background-action: var(--color-green-medium);
    --control-background-error: #AC3825;
    --control-background-transparent: transparent;
    --control-background-outlined: #242733;
    --control-background-hover: var(--color-blue-light);
    --control-background-pressed: var(--color-blue-dark-darkened);
    --control-background-selected: var(--color-blue-medium);
    --control-background-action-hover: var(--color-green-light);
    --control-background-action-pressed: var(--color-green-dark);
    --control-background-error-hover: var(--color-orange-dark);
    --control-background-error-pressed: var(--color-red-dark);
    --control-background-input: #191924;
    --control-background-invalid: rgba(207, 69, 32, 0.25);

    --control-border-outlined: #66667F;
    --control-border-hover: var(--color-blue-medium);
    --control-border-pressed: var(--color-blue-dark-darkened);
    --control-border-checked: var(--color-blue-medium);
    --control-border-error: var(--color-orange-dark);
    --control-border-error-hover: var(--color-red-light);
    --control-border-error-pressed: var(--color-red-dark);
    --control-border-focused: var(--color-blue-light-50);
    --control-border-focused-dimmed: var(--color-blue-medium-50);

    --control-group-separator: var(--color-white-05); 

    --control-shadow: 0 0 4px 0 rgba(150, 140, 131, 0.33);
    --control-shadow-strong: 0 0 4px 0 rgba(0, 51, 160, 0.33);

    --button-action-background: var(--color-green-medium);
    --button-action-background-hover: var(--color-green-light);
    --button-action-background-pressed: var(--color-green-dark);

    --checkbox-background-default: #191924;
    --checkbox-background-disabled: #191924;
    --checkbox-background-inverted: var(--color-white-30);
    --checkbox-background-selected: var(--color-blue-medium);
    --checkbox-background-selected-inverted: var(--color-white);
    --checkbox-background-selected-disabled: #3C3F4B;
    --checkbox-background-mixed: var(--color-blue-medium);
    --checkbox-tickmark: var(--color-white);
    --checkbox-tickmark-inverted: var(--color-blue-medium);
    --checkbox-tickmark-disabled: var(--color-white-50);

}

/* Header, menus, popups */
html[data-theme="dark"]:root {

    --header-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.33);
    --header-toolbar-separator-color: var(--color-white-30);

    --tab-border-color: transparent;
    --tab-border-color-hover: var(--color-white-20);
    --tab-border-color-selected: var(--color-blue-medium);

    --menu-separator: #484A56;
    --menu-background-hover: var(--color-white-05);
    --menu-text-color: var(--color-white-90);
    --menu-text-color-hover: var(--color-white);
    --menu-icon-background: var(--color-white-10);


    --dropdown-background: var(--color-blue-dark-10-opaque);
    --dropdown-background-hover: var(--color-blue-dark-15-opaque);
    --dropdown-background-pressed: var(--color-blue-medium-darkened);
    --dropdown-button-background-hover: var(--color-blue-dark-05);
    --dropdown-background-selected: var(--color-blue-medium);
    --dropdown-button-background-selected-hover: var(--color-white-10);

    --dropdown-table-background: transparent;
    --dropdown-table-background-hover: var(--color-blue-dark-10);
    --dropdown-table-background-selected: var(--color-blue-dark-20);
    --dropdown-table-background-selected-hover: var(--color-blue-dark-10);

    --dropdown-toolbar-background: var(--color-blue-dark-05-opaque);
    --dropdown-toolbar-background-hover: var(--color-blue-medium);
    --dropdown-toolbar-background-pressed: var(--color-blue-medium-darkened);
    --dropdown-toolbar-background-selected: var(--color-blue-medium);
    --dropdown-toolbar-background-selected-hover: var(--color-blue-dark-90);

    --dropdown-separator-color: var(--color-white-10);
    --dropdown-separator-color-selected: var(--color-white-30);

    --dropdown-popup-background: var(--color-white);
    --dropdown-popup-background-hover: var(--color-blue-dark-05);
    --dropdown-popup-background-selected: var(--color-blue-medium);
    --dropdown-popup-border: var(--color-grey-100);

    --dropdown-popup-shadow: 0 4px 8px 0 rgba(20, 20, 20, 0.1);


    --popup-background: var(--color-white);
    --popup-border: var(--color-blue-dark);
    --popup-instructions-background: var(--color-blue-medium);
    --popup-tour-background: var(--color-purple-dark);

    /* Needs reversed naming */
    --border-popup: var(--color-blue-medium);

    --popup-instructions-shadow: 0px 8px 24px 4px rgba(20, 20, 20, 0.33), 
                                 0px 4px 12px 0px rgba(0, 0, 0, 0.33);
    --popup-latched-shadow: 0px 8px 24px 4px rgba(20, 20, 20, 0.5), 
                            0px 4px 12px 0px rgba(0, 0, 0, 0.5);
    --popup-calendar-shadow: 0px 24px 48px 8px rgba(20, 20, 20, 0.5), 
                             0px 16px 24px 8px rgba(0, 0, 0, 0.5), 
                             0px 8px 24px 4px rgba(20, 20, 20, 0.5),
                             0px 4px 12px 4px rgba(0, 0, 0, 0.5);

}

/* Calendar */
html[data-theme="dark"]:root {
    
    --calendar-background-selected: var(--color-blue-medium);
    --calendar-background-selected-dimmed: #66667F;
    --calendar-background-hover: hsla(206, 100%, 41%, 0.66);
    --calendar-background-hover-dimmed: #393947;
    --calendar-background-pressed: var(--color-blue-medium-dark);
    --calendar-background-pressed-dimmed: #191924;
    --calendar-background-today: var(--color-orange-dark);
    --calendar-background-today-dimmed: rgba(207, 69, 32, 0.5);

    --calendar-dot-selected: var(--color-white-50);
    --calendar-dot-selected-dimmed: var(--color-white-50);
    --calendar-dot-hover: var(--color-white-50);
    --calendar-dot-hover-dimmed: #66667F;
    --calendar-dot-pressed: var(--color-white-50);
    --calendar-dot-pressed-dimmed: #66667F;

    --calendar-color-today: var(--color-yellow-dark);
    --calendar-color-dimmed: #66667F;
    --calendar-color-disabled: #505062;
    --calendar-color-weekend: var(--color-yellow-dark);
    --calendar-color-weekend-dimmed: hsla(35, 50%, 46%, 0.5);
    --calendar-color-weekend-disabled: hsla(35, 50%, 46%, 0.35);
    --calendar-color-selected: var(--color-white);
    --calendar-color-hover: var(--color-white);
    --calendar-color-hover-dimmed: #66667F;
    --calendar-color-pressed: var(--color-white);
    --calendar-color-pressed-dimmed: #66667F;

}

/* Table */
html[data-theme="dark"]:root {

    --table-background: var(--color-dark-grey-700);

    --table-header-background-hover: var(--color-dark-grey-500);
    --table-header-background-pressed: var(--color-dark-grey-600);
    --table-header-background-sorted: var(--color-dark-grey-400);
    --table-header-border-color: var(--color-dark-grey-100);

    --table-row-background-alt: var(--color-dark-grey-600);
    --table-row-background-hover: var(--color-dark-grey-500);
    --table-row-background-selected: var(--color-blue-medium-darkened);

    --table-gridlines-color: var(--color-dark-grey-400);
    --table-gridlines-color-zebra: var(--color-dark-grey-300);
    --table-gridlines-color-selected: #3775a4;
    --table-freezeline-color: var(--color-white-40);
    /* --table-freezeline-color: var(--color-dark-grey-200); */

}

/* Segments, progress, sliders */
html[data-theme="dark"]:root {

    --segment-background-default: var(--color-grey-150);
    --segment-background-transparent: var(--color-blue-medium-20);
    --segment-background-hover: #00000040;
    --segment-background-transparent-hover: var(--color-blue-medium-20);

    --progress-background: #191924;
    --progress-default: var(--color-blue-medium);
    --progress-error: #AC3825;
    --progress-warning: var(--color-yellow-dark);
    --progress-success: var(--color-green-light);

}

/* Graphs, plots, histograms */
html[data-theme="dark"]:root {

    --zoom-background: #0076d120;
    --zoom-border-color: #0076d180;
    --zoom-shadow: 0 0 8px 0 #0076d120,
                   0 0 4px 0 #0076d120;

    --plot-axis-color: var(--color-dark-grey-000);
    --plot-gridlines-color: var(--color-white-10);
    --plot-gridlines-color-emphasized: var(--color-white-30);
    --plot-cursor-color: var(--color-grey-dark);

    --plot-bar-color-faded: var(--color-white-10);
    --plot-bar-color-default: var(--color-blue-medium);
    --plot-dot-color-default: var(--color-blue-medium);
    --plot-dot-color-history: var(--color-grey-medium);
    --plot-line-color-default: var(--color-orange-dark);

    --plot-scatter-dot-highlight: var(--color-white-10);

    --plot-inplot-text: var(--color-white);
    --plot-inplot-text-inverted: var(--color-white);

    --plot-legend-background: var(--color-white);
    --plot-legend-background-hover: var(--color-blue-dark-05);
    --plot-legend-background-pressed: var(--color-blue-dark-15);

    --histogram-label: var(--color-white-80);
    --histogram-label-selected: var(--color-white);
    --histogram-bar-color: var(--color-white-10);
    --histogram-bar-color-hover: var(--color-white-30);
    --histogram-bar-color-selected: var(--color-blue-medium);

}

/* Map visualization */
html[data-theme="dark"]:root {

    --map-background-sea: hsl(221, 25%, 25%);
    --map-background-sea: #AAD3DF;
    --map-background-land: var(--color-white-20);

    --map-border-land: var(--color-white-10);
    --map-text: var(--color-grey-light);
    --map-path: var(--color-blue-light);
    --map-path-default: var(--color-blue-dark);
    --map-path-cold: var(--color-blue-light);
    --map-path-warm: var(--color-orange-dark);

}


/**********************************************************************************************

    GLOBAL CSS
    
*/

body {
    background-color: var(--main-background);
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

button {
    outline: none; 
}

button:focus-visible {
    outline: var(--focus-outline); 
}

svg {
    fill: var(--icon-fill);
}

svg.size20 {
    height: 20px;
    min-width: 20px;
    width: 20px;
}

svg.size80 {
    height: 80px;
    width: 80px;
}

svg.swirl {
    /* animation: swirlit 2000ms linear infinite; */
    display: block;
    fill: var(--color-grey-dark);
    height: 64px;
    margin: 48px auto;
    transform-origin: 31px 32.5px;
    width: 64px;
}

svg.logotop {
    height: 30px;
    margin-top: 12px;
    width: 201px;
}


/**************************************************************************************

    Scrollbar styling
    
    Scrollbar styling has changed a bit since the beginning of the project. ::webkit
    styling is out and both Firefox and Chrome now support the straight forward scrollbar
    color and width rules. This removes a few options, but is more consistent. 

    https://developer.chrome.com/docs/css-ui/scrollbar-styling

    Google's example only tries to limit the styling to a div with class
    "scroller". I would make it project wide "*"

    However, for scrollbars inside elements that have a different background than panel
    I should apply a different track background

*/

@supports selector(scrollbar-width: auto) {

    * {
        scrollbar-color: var(--scrollbar-thumb-background-firefox) var(--scrollbar-track-background);
        scrollbar-width: thin;
    }

}

@supports selector(::-webkit-scrollbar) {

    ::-webkit-scrollbar {
        height: 12px;
        width: 12px;
    }
    
    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--scrollbar-track-background);
        padding: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        -webkit-background-clip: padding-box;
        background: var(--scrollbar-thumb-background);
        background-clip: padding-box;
        border: 5px solid var(--scrollbar-track-background);
        border-radius: 100vw;
        transition: all 250ms;
        width: 2px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-background-hover);
        border-width: 3px;
        opacity: 1;
        width: 6px;
    }
    
}