:root{    
    --menu-bar-height: 64px;
    --view-port-padding:24px;
    
    --btn-blue: #1976d2;       /* base blue */
    --btn-blue-hover: #1565c0; /* hover */
    --btn-blue-active: #0d47a1;/* active/focus */
    --btn-blue-text: #ffffff;  /* text & ripple */

    --btn-yellow: #F9A825;       /* base yellow */
    --btn-yellow-hover: #F57F17; /* darker yellow for hover */
    --btn-yellow-active: #E65100;/* even darker for active/focus */
    --btn-yellow-text: #ffffff;  /* text & ripple color */

    --btn-gray: #757575;       /* base gray */
    --btn-gray-hover: #616161; /* darker gray for hover */
    --btn-gray-active: #424242;/* even darker for active/focus */
    --btn-gray-text: #ffffff;  /* text & ripple color */

    --btn-red: #D32F2F;       /* base red */
    --btn-red-hover: #C62828; /* darker red for hover */
    --btn-red-active: #B71C1C;/* even darker for active/focus */
    --btn-red-text: #ffffff;  /* text & ripple color */
    
    /* status colours */
    --status-white: #ffffff;
    --status-black: #000000;
    --status-blue: #1e3a8a;
    --status-blue-text: #eff6ff;
    --status-blue-dark: #1f2937;
    --status-blue-dark-text: #f9fafb;
    --status-blue-medium: #1c5db3; /*#4D83CB*/
    --status-blue-light: #007AFF;    
    --status-red: #dc2626;
    --status-red-text: #fef2f2;
    --status-orange: #dd8445; /*#CA4F4E*/  
    --status-orange-light: #f0ad4e;
    --status-grey: #9BA0A6;
    --status-brown: #ca914f;
    --status-purple: #AB4FCB;
    --status-green: #69CA4E;
    --status-green-medium: #14532d;
    --status-green-medium-text: #f0fdf4;
    --map-info-panel-background-gray: #f5f5f5;
}

.zeta-dark {
    --map-info-panel-background-gray: #27272f;
}
html, body {
    height: 100%;
}
body {
    overflow: hidden; /* prevent dialog scrolling page*/
}

.zeta-dark .mud-appbar {
    filter: saturate(80%);
}

.vh-100 {
    height:calc(100vh - (var(--menu-bar-height) + 2*(var(--view-port-padding))));
}

.mud-primary-hover {
    background-color: rgba(154, 169, 178, 0.6) !important;
}
.mud-list-item-clickable:hover {
    background-color: rgba(154, 169, 178, 0.3) !important;
}

@font-face {
    font-family: 'Funnel Display';
    src: url('fonts/funnel_display/FunnelDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Funnel Sans';
    src: url('fonts/funnel_sans/FunnelSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* buttons */

@media (hover: hover) and (pointer: fine) {
    .mud-button-filled.button-filled-blue:hover {
        background-color: var(--btn-blue-hover);
    }
}

.mud-button-filled.button-filled-blue:focus-visible,
.mud-button-filled.button-filled-blue:active {
    background-color: var(--btn-blue-active);
}

.mud-button-filled.button-filled-yellow {
    color: var(--btn-yellow-text);
    --mud-ripple-color: var(--btn-yellow-text);
    background-color: var(--btn-yellow);
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-filled.button-filled-yellow:hover {
        background-color: var(--btn-yellow-hover);
    }
}

.mud-button-filled.button-filled-yellow:focus-visible,
.mud-button-filled.button-filled-yellow:active {
    background-color: var(--btn-yellow-active);
}

.mud-button-filled.button-filled-gray {
    color: var(--btn-gray-text);
    --mud-ripple-color: var(--btn-gray-text);
    background-color: var(--btn-gray);
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-filled.button-filled-gray:hover {
        background-color: var(--btn-gray-hover);
    }
}

.mud-button-filled.button-filled-gray:focus-visible,
.mud-button-filled.button-filled-gray:active {
    background-color: var(--btn-gray-active);
}

.mud-button-filled.button-filled-red {
    color: var(--btn-red-text);
    --mud-ripple-color: var(--btn-red-text);
    background-color: var(--btn-red);
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-filled.button-filled-red:hover {
        background-color: var(--btn-red-hover);
    }
}

.mud-button-filled.button-filled-red:focus-visible,
.mud-button-filled.button-filled-red:active {
    background-color: var(--btn-red-active);
}

/* grids */
.mud-table.full-height{
    display: flex;
    flex-grow: 1;
    overflow:auto;
    flex-direction: column;
}
.mud-table.full-height > .mud-table-container {
    min-height: 0px;
    flex-grow: 1;
}
.mud-table-toolbar {
    left: 0;
    position: sticky;
    padding-left: 16px;
    padding-right: 8px;
    padding-inline-start: 16px;
    padding-inline-end: 8px;
    padding-bottom: 16px;
    padding-top: 16px;
}

.sticky-left {
    /*background-color: transparent !important;*/
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {   
    font-weight: bold;
    border-top: 1px solid #ddd;
}
.zeta-dark .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    border-top: 1px solid #4f4f4f;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child,
.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:last-child {
    border-radius: 0;
}

.mud-table-toolbar {
    left: 0;
    position: sticky;
    padding-left: 8px;
    padding-right: 8px;
    padding-inline-start: 12px;
    padding-inline-end: 8px;
}

/* navs */
.mud-navmenu .mud-tooltip-root.mud-tooltip-inline {
    width: 100%;
}

.mud-tooltip-root.mud-tooltip-inline {
    display: block; /* safari fix for TooltipNavGroup collapse gap*/
}

.mud-nav-group {
    border-top: 1px solid #cccccc25;
}

/* chips */
.chip-blue {
    background-color: var(--status-blue);
    color: var(--status-blue-text);
}
.chip-blue-medium {
    background-color: var(--status-blue-medium);
    color: var(--status-white);
}
.chip-blue-light {
    background-color: var(--status-blue-light);
    color: var(--status-white);
}
.chip-blue-dark {
    background-color: var(--status-blue-dark);
    color: var(--status-blue-dark-text);
}
.chip-red {
     background-color: var(--status-red);
     color: var(--status-red-text);
}
.chip-orange {
    background-color: var(--status-orange);
    color: var(--status-white);
}
.chip-orange-light {
    background-color: var(--status-orange-light);
    color: var(--status-black);
}
.chip-grey {
    background-color: var(--status-grey);
    color: var(--status-black);
}
.chip-brown {
    background-color: var(--status-brown);
    color: var(--status-black);
}
.chip-purple {
    background-color: var(--status-purple);
    color: var(--status-white);
}
.chip-green {
    background-color: var(--status-green);
    color: var(--status-black);
}
.chip-green-medium {
    background-color: var(--status-green-medium);
    color: var(--status-green-medium-text)
}

/* icons */
.icon-green {
    color: var(--status-green);
}
.icon-green-medium {
    color: var(--status-green-medium);
}
.icon-red {
    color: var(--status-red);
}
.icon-blue-light {
    color: var(--status-blue-light);
}
.icon-blue-medium {
    color: var(--status-blue-medium);
}
.icon-orange {
    color: var(--status-orange);
}
.icon-grey {
    color: var(--status-grey);
}

.map-info-panel {
    background-color: var(--map-info-panel-background-gray);  
    
}