:root {
    /* Display units - sizing used for margin, padding, font-size */

    --unit-xxs: 0.5rem;
    --unit-xs: 0.75rem;
    --unit-s: 0.9rem;
    --unit-m: 1.1rem;
    --unit-l: 1.3rem;
    --unit-xl: 1.5rem;
    --unit-xxl: 2rem;
    --unit-q: 1.75rem;

    /* UI colors */

    --primary: 109, 109, 109; /* #6d6d6d */
    --secondary: 176, 176, 176; /* #b0b0b0 */
    
    --darkest: 28, 28, 28; /* #1c1c1c */
    --deepdark: 42, 42, 42; /* #2a2a2a */
    --dark: 60, 60, 60; /* #3c3c3c */
    --middark: 75, 75, 75; /* #4b4b4b */
    --light: 255, 255, 255; /* #ffffff */

    --green: 46, 214, 46; /* #2ed62e */
    --red: 255, 18, 0; /* #f90707 */

    /* Brand colors */

    --orange: 244, 86, 31; /* #f4561f */
    --background: 86, 84, 84; /* #565454 */

    /* Text colors */
    
    --txt-white: 246, 246, 246;
    --txt-offwhite: 231, 231, 231; /* #e7e7e7 */
    --txt-mid: 214 210 210; /* #d6d2d2 */

    /* Radius */

    --r8: 0.6rem; 
    --r10: 0.75rem;
    --r16: 1rem;
    --r20: 1.25rem;
    
    /* Variables for % position */
    --switch-width: 2vw;
    --usage: 100%;
    --scan: 33%;
}

@property --position {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: clamp(10.5px, 0.85vw, 17px);
}

body {
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly; /* There is void centering div() to center app */

    background: radial-gradient(circle at 50% -30%, rgb(var(--primary)), rgb(var(--dark)));
    border-top: 2px solid rgb(var(--orange));
     
    font-family: 'Anek Odia', sans-serif; /* ! Add fallback font */
    font-size: 1rem;
    line-height: 1.1;
}

/* Typography styles */

p {
    font-size: var(--unit-s);
    letter-spacing: 0.02em;
    color: rgb(var(--txt-mid));
    margin: 0;
    
    /* Prevent text selection */
    -webkit-user-select: none;
    user-select: none;
}

h4 { /* Small card p label */
    margin-top: 2px;
    font-size: var(--unit-s);
    line-height: 1.1;
    letter-spacing: 0.02em;
    font-weight: 400;
    color: rgb(var(--txt-offwhite));
}

h5 {
    font-size: var(--unit-xs);
    line-height: 1;
    letter-spacing: 0.03em;
    font-weight: 400;
    color: rgb(var(--secondary));
    text-transform: uppercase;
}

h1 { /* Large quotes/metrics */
    font-size: var(--unit-xl);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgb(var(--orange));
    margin: 0;
}

h2 {
    font-size: var(--unit-m);
    line-height: 1;
    color: rgb(var(--txt-offwhite));
    margin: 0;
    margin-bottom: 4px;
}

h3 {
    font-size: var(--unit-xxl);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgb(var(--secondary));
    margin: 0;
}

/* Hide DOM Bokeh notifications */
/* These notification trigger app layout UI up-side drift per each new Bokeh render */
.bk-Notifications {
    display: none !important;
}

/* Content classes */

.items-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.items-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.outline-mask {
    position: relative;
}

.outline-mask::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; /* Allow click through */
    border: 2px solid var(--mask-color);
    border-radius: inherit;
    z-index: 1;
}

.base_btn {
    flex: 1;
    height: 100%;
    line-height: 0;

    font-size: 1em;
    background-color: transparent;
    border: none;
    color: rgb(var(--txt-offwhite));
}

.base_btn:hover { 
    background: radial-gradient(circle at 50% 55%, rgb(var(--primary), 0.4), transparent 40%);
    scale: 0.95;
}

.base_btn.pushed { /* Toggle class to show active state of menu button */
    background: radial-gradient(circle at 50% 50%, rgb(var(--orange), 0.3), transparent 40%);
    color: rgb(var(--orange));
    scale: 0.95;
}

.base_btn:disabled { /* When selection is active, user is not allowed to change chart state */
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.active_btn {
    flex: 1;
    height: 100%;
    line-height: 0;

    font-size: 1.1em;
    background-color: transparent;
    border: none;
    color: rgb(var(--orange));
}

.active_btn:hover {
    color: rgb(var(--light));
    scale: 1.05;
}

.active_btn.pushed {
    background: rgb(var(--orange), 0.5);
    color: rgb(var(--light));
    scale: 1.05;
}

.active_btn.push {
    color: rgb(var(--light));
}

.set_btn {
    height: var(--unit-xxl);
    line-height: 0;
    
    padding: 0 var(--unit-xs);
    padding-top: 0.35em;

    font-size: var(--unit-s);
    color: rgb(var(--secondary));

    background-color: transparent !important;
    border: 1px solid rgb(var(--secondary), 0.5);
    border-radius: var(--r8);
}

.set_btn:hover {
    color: rgb(var(--txt-offwhite));
    padding-top: 0.4em;
    background-color: rgb(var(--primary), 0.5) !important;
}

.set_btn.pushed {
    color: rgb(var(--txt-offwhite));
    padding-top: 0.4em;
    border: 1px solid rgb(var(--secondary));
}

.appicon {
    /* Organize icon in row */
    display: inline-block;
    /* Icon styles */
    font-size: 2rem;
    font-weight: 400;
    color: #f6f6f6;
    background-color: transparent !important;
    /* Override Bootstrap indentation */
    padding: 0;
    line-height: 0;
    /* Cursor styles */
    cursor: pointer;
    user-select: none;
    border: none;
    transition: all 0.2s ease-in;
}

.appicon:hover {
    color: #F4561F !important;
    scale: 1.05;
}

.appicon:disabled {
    color: rgb(var(--orange));
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.cta_new {
    /* Sizing */
    width: 80%;
    height: 60%;
    /* Text styles */
    line-height: 0.65;
    font-size: 1.1em;
    font-weight: 500;
    color: rgb(var(--orange), 0.9);
    /* Button styles */
    background-color: rgb(var(--deepdark));
    border: 1px solid rgb(var(--orange), 0.5);
    border-radius: 6px;
    /* Anim */
    transition: all 0.25s ease;
}

.cta_new:hover {
    color: rgb(var(--orange)) !important;
    background-color: rgb(var(--deepdark), 0.8) !important;
    border: 1px solid rgb(var(--orange)) !important;
    scale: 0.99;
}

.cta_btn {
    /* Text styles */
    font-size: 1.1em;
    font-weight: 600;
    color: rgb(var(--orange));
    /* Button styles */
    background-color: transparent !important;
    border: 2px solid rgb(var(--orange));
    border-radius: var(--r16);
    /* Override Bootstrap indentation */
    padding: var(--unit-xxs) 0 0 0;
    line-height: 0;
    /* Anim */
    transition: all 0.2s ease;
}

.cta_btn:hover {
    color: rgb(var(--light)) !important;
    background-color: rgb(var(--orange), 0.5) !important;
    border: 2px solid rgb(var(--orange)) !important;
    scale: 0.99;
}

.notclickable {
    opacity: 0.5;
    pointer-events: none;
}

/* Application general layout */

#app {
    width: clamp(1024px, calc(100% - (6.5vmax*(1vmax/1vmin))), 1920px);
    aspect-ratio: 16 / 10;
    max-height: 1080px; /* Delivers 16:9 ratio above width 1728 px (large screens) */
    
    display: grid;
    grid-template-rows: 1fr 0.5rem 5fr 7fr 0.5rem 0.5fr;
    grid-template-columns: 4fr 4fr 2fr;

    overflow: hidden;
} 

#app-frame {
    grid-area: 2 / 1 / 6 / -1;

    background: linear-gradient(285deg, rgb(var(--primary), 0.8) 0%, transparent 40%),
                linear-gradient(105deg, rgb(var(--primary), 0.8) 0%, transparent 33%);
         
    border: 1px solid rgb(var(--primary));
    border-radius: var(--r16);
    margin: 3px var(--unit-xs);
}

#app-loader {
    grid-area: 3 / 1 / 6 / -1;
    height: 18%;  
    width: 32%; 
    place-self: center;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr;
    place-items: center;
}

.loader-error {
    background-color: rgb(var(--middark), 0.5);
    border: 1px solid rgb(var(--primary));
    border-radius: var(--r16);
}

#app-loader i { /* Warning icon */
    font-size: var(--unit-xxl);
    color: rgb(var(--orange));
    align-self: end;
}

/* Application loading animation */

.loader-circle { /* Styling class for divs - circles */
    width: var(--unit-m);
    height: var(--unit-m);

    background-color: rgb(var(--orange));
    box-shadow: 0 0 4px 0px rgba(var(--orange), 0.5);
    border-radius: 50%;

    animation: node 0.6s cubic-bezier(0.19, 0.57, 0.3, 0.98) infinite alternate;
}

.loader-circle:nth-child(2) { /* Second circle animation delay */
    animation-delay: 0.08s;
    opacity: 0.85;
}

.loader-circle:nth-child(3) { /* Third circle animation delay */
    animation-delay: 0.2s;
    opacity: 0.7;
}

@keyframes node {
    from { transform: translateY(0); }
    to { transform: translateY(-250%); }
}

/* Application sections */

#app-header { /* Header is always visible -> out of conditional panel */
    grid-area: 1 / 1 / 2 / 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;

    padding-left: var(--unit-m);
    padding-top: var(--unit-xxs);

}

#app-settings {
    grid-area: 1 / 2 / 2 / 4;

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    column-gap: var(--unit-s);

    padding-bottom: var(--unit-xxs);
}

/* ###### LEFT PANEL GRID & SUBLAYER ATTRIBUTES ###### */
/* 2 data-activestates: chart, qlm */

#app-leftpanel {
    grid-area: 3 / 1 / 5 / 2;

    display: grid;
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 3fr 2fr 3fr;
    
    background-color: rgb(var(--primary));
    background-image: radial-gradient(circle at 27% 150%, rgb(var(--orange), 0.05), transparent 75%);
    border: 2px solid rgb(var(--dark), 0.8);
    border-radius: var(--r10);

}

#app-leftpanel[data-active="chart"] #leftpanel-chart {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

#app-leftpanel[data-active="qlm"] #leftpanel-qlm {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

/* ###### RIGHT TOP-LEFT PANEL GRID & SUBLAYER ATTRIBUTES ###### */
/* 2 data-active states: overview, evidence (JS) */

#app-rightpanelTL { /* Top-left panel*/
   grid-area: 3 / 2 / 4 / 3;
   margin: 2px 0 0 var(--unit-m);

   display: grid;
   grid-template-columns: 4fr repeat(4, 1fr);
   grid-template-rows: 1.25fr 5fr 1fr 2fr;
   position: relative;

   border-radius: var(--r10);

   /* Prevent grid from collapsing -> content overflows */
   min-height: 0;
}

#session_end { /* X close icon */
    grid-area: 1 / -2 / 3 / -1;
    position: absolute;

    /* Positioning - center evidence menu */
    top: 8%;
    justify-self: center;
    
    background-color: rgb(var(--dark)) !important;
    color: rgb(var(--secondary));
    align-self: flex-start;
}

#app-rightpanelTL[data-active="overview"] #rightpanel-overview {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

#app-rightpanelTL[data-active="evidence"] #rightpanel-evidence {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

/* ###### RIGHT TOP-RIGHT PANEL GRID & SUBLAYER ATTRIBUTES ###### */

#app-rightpanelTR { /* Top-right panel*/
  grid-area: 3 / 3 / 4 / 4;
  margin: 2px 0 0 var(--unit-xs);
  z-index: 1;

  display: grid;
  grid-template-columns: 3fr 2fr 1fr 3fr;
  grid-template-rows: 3fr 1fr 2fr 1fr 2fr;
  padding: var(--unit-xxs);
  
  background: linear-gradient(to top, rgb(var(--deepdark)) -50%, rgb(var(--dark)) 22%);
  border: 2px solid rgba(var(--deepdark), 0.65);
  border-radius: var(--r10);

  min-height: 0;
}

/* ! zde sublayer data html attributes */

/* ###### RIGHT BOTTOM-LARGE PANEL GRID & SUBLAYER ATTRIBUTES ###### */

#app-bottompanel {
    grid-area: 4 / 2 / 5 / 4;
    margin: var(--unit-s) 0 0 var(--unit-m);

    display: grid;
    grid-template-rows: 0.66fr 2fr 1fr 2fr 42px;
    grid-template-columns: 7fr 1fr var(--unit-m) 4fr;

    background-color: rgb(var(--primary));
    background-image: radial-gradient(circle at 10% 200%, rgb(var(--orange), 0.05), transparent 70%);
    border: 2px solid rgb(var(--dark), 0.8);
    border-radius: var(--r10);

    /* Prevent grid from collapsing -> content overflows */
    min-height: 0;
}

#app-bottompanel[data-active="fundamentals"] #bottompanel-fundamentals {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

#app-bottompanel[data-active="forecasting"] #bottompanel-forecasting {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}


#app-footer {
    grid-area: 6 / 2 / 7 / 4;
    padding: var(--unit-xs) var(--unit-s) 0 0;

    display: grid;
    grid-template-columns: subgrid;

    gap: var(--unit-xs);
}

#footer-capacity {
    grid-area: 1 / 2 / 2 / 3;
    margin-right: var(--unit-xs);
    height: var(--unit-xxs);

    border: 1px dotted rgb(var(--orange));
    border-radius: var(--r8);
    background: linear-gradient(to right, rgb(var(--orange),0.3) 5%, rgb(var(--orange), 0.8) var(--usage), transparent var(--usage));
}

/* ------------------------------------------------------------ */
/* -------------------- SETTINGS PANEL ------------------------ */

#settings-navigation {
    grid-area: 1 / 1 / 2 / 2;

    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;

    gap: var(--unit-xxs);
}

#settings_logout {
    grid-area: 1 / 2 / 2 / 3;
    /* Button specific centering within grid cell */
    color: rgb(var(--primary));
    align-self: end;
    justify-self: end;
    
    /* Icon holds nuturall right margin from Bootstrap -> calc to compensate for button padding */
    margin-left: var(--unit-xs);
    padding-right: var(--unit-s);
}

/* ------------------------------------------------------------ */
/* -------------------- CHART LAYER --------------------------- */

#leftpanel-chart {
    grid-area: 1 / 1 / -1 / -1;

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;

    border: 1px solid rgb(var(--secondary), 0.5);
    border-radius: inherit;

    padding-top: var(--unit-l);
    
    /* UI has to be hidden by default - data-active attribute manipulate it */
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;

    /* Trasition effect */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#chart-menu {
    grid-area: 1 / 1 / 2 / 4;
   
    display: grid;
    grid-template-columns: subgrid;

    margin: 0 var(--unit-l);
    padding: var(--unit-xxs);

    background: radial-gradient(circle at 50% -300%, rgb(var(--middark)), rgb(var(--dark))); 
    border: 1px solid rgba(var(--deepdark));
    border-radius: var(--r16);

    min-height: 0; 
}

#menu-quotes {
    height: 100%;
    border-radius: var(--r10);
    overflow: hidden;
}

#menu-selectbar {
    height: 100%;
    width: 100%;

    border: 2px solid rgb(var(--orange));
    border-radius: var(--r10);
    font-size: var(--unit-l);
    overflow: hidden;
}

#menu-movebar {
    height: 100%;
    width: calc(100% - (2*var(--unit-l)));

    justify-self: center;
     
    font-size: var(--unit-l);
    overflow: hidden;
}

#chart-ohlc {
    grid-area: 2 / 1 / 4 / 4;

    display: flex;
    align-items: center;
    justify-content: center;
}

#bokeh_plot { /* Bokeh embbeded div */
    position: relative;
    width: 100%;
    height: 100%;
}

#chart-memo { 
    grid-area: 3 / 1 / 4 / 4;

    display: flex;
    align-items: flex-start;
    justify-content: center;

}

/* ------------------------------------------------------------ */
/* ---------------------- QLM LAYER --------------------------- */

#leftpanel-qlm {
    grid-area: 1 / 1 / -1 / -1 ;
    position: relative;

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;

    border: 1px solid rgb(var(--secondary), 0.5);
    border-radius: inherit;
    
    padding-bottom: var(--unit-l);
    min-height: 0; /* Prevent grid from collapsing -> chat overflows */

    /* UI has to be hidden by default - data-active attribute manipulate it */
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;

    /* Trasition effect */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#qlm_chat {
    grid-area: 1 / 1 / 3 / 4; 
}

#qlm_chat_user_input { /* Original Shiny chat input component - text area */
    display: none;
}

#qlm-input {
    grid-area: 3 / 1 / 4 / 4;
    margin: 0 var(--unit-l);

    background: radial-gradient(circle at 50% -300%, rgb(var(--middark)), rgb(var(--dark)));
    border: 1px solid rgb(var(--deepdark));
    border-radius: var(--r16);
    
    /* HTML textarea specific styles */
    padding: var(--unit-xs) 15% var(--unit-xs) var(--unit-m);
    font-family: inherit;
    line-height: 1.5;
    color: rgb(var(--txt-offwhite));
    resize: none;
    min-height: 0; 
}

#qlm-input::placeholder {
    color: rgb(var(--orange), 0.4);
}

#qlm_submit { /* Appicon class added */
    grid-area: 3 / 3 / 4 / 4;
    /* Button specific centering within grid cell */
    align-self: center;
    justify-self: end;
    
    /* Icon holds nuturall right margin from Bootstrap -> calc to compensate for button padding */
    margin-right: 20%;
}


#qlm-badge {
    position: absolute;
    bottom: 13%; 
    right: calc(var(--unit-l) + var(--r16)); /* Padding textarea + border radius */

    display: inline-flex;
    align-items: center;

    z-index: 1;
    visibility: hidden;
}

#qlm-badge.filtering {
    pointer-events: none;
    visibility: visible;
}

/* ------------------------------------------------------------ */
/* ---------------- RIGHT TOP-LEFT PANEL ---------------------- */

#rightpanel-overview {
    grid-area: 1 / 1 / -1 / -1;

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    padding: var(--unit-xxs);

    background: linear-gradient(to right, rgb(var(--deepdark)) -50%, rgb(var(--dark)) 22%);
    border: 2px solid rgba(var(--deepdark), 0.65);
    border-radius: var(--r10);

    /* UI has to be hidden by default - data-active attribute manipulate it */
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    
    clip-path: inset(0 0 0 0);
    transition: all 1s ease-in-out;
}

#rightpanel-overview.locked {
    clip-path: inset(0 53% 0 0);
    transform: translateX(calc(100% + var(--unit-m)));  /* This has to be animated m-unit larger than gap between panels */
}

#rightpanel-overview.locked ~ #overview-area {
    margin: 0; /* enlarge */
    z-index: 2; /* bring to front layer */

    transform: translateX(calc(100% + 0.6rem));
    transition: all 1s ease-in-out;
}


/* HEADER + X (absolute) */
#overview-header {
    grid-area: 1 / 1 / 2 / -1;
    padding: 0 4px 0 0;
    margin: 0 var(--unit-xxl) 0 var(--unit-xxs);

    display: flex;
    align-items: flex-end;    
    border-bottom: 1px solid rgb(var(--middark));
}

/* Guidelines area */

#overview-guidelines {
    grid-area: 2 / 1 / 3 / 2;

    display: grid;
    align-items: center;
}

#overview-guidelines[data-active="step-one"] #guide-one,
#overview-guidelines[data-active="step-two"] #guide-two,
#overview-guidelines[data-active="step-three"] #guide-three {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.guideline {
    grid-area: 1 / 1;
    width: 75%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: var(--unit-xs);
    text-align: center;
    
    /* Data-active requirements */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;

    /* Transition effect between steps*/
    transition: opacity 0.5s ease-out;
}

.guideline .bi { /* Step number icon */
    font-size: var(--unit-q); 
    color: rgb(var(--orange)); 
    align-self: center;
}

/* Overview - 2/2 elements [right] */

#overview-information {
    grid-area: 2 / 2 / 3 / -1;
    padding: var(--unit-q) var(--unit-m) 0 var(--unit-s);

    display: flex;
    flex-direction: column;
}

#overview-information .bi-activity {
    background: linear-gradient(to right, transparent -10%, rgb(var(--orange), 0.8) 50%, transparent 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200%;
    animation: typing 1.1s linear infinite;
}

@keyframes typing { /* LLM is living */
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0%; }
}

#overview-information > * {
    align-items: flex-start;
    gap: var(--unit-s);
    font-size: var(--unit-xl); /* icons */
    color: rgb(var(--txt-offwhite)); /* icons color, p has default color */
}

#overview-statistics {
    grid-area: 3 / 2 / -1 / -1;
    margin-left: var(--unit-xxs); 

    display: flex;
    flex-direction: row;
    gap: var(--unit-xxs);
}

/* Overview - snapshot overlay */

#overview-area {
    grid-area: 1 / 2 / -1 / -1;
    margin: var(--unit-xxs);
    
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    position: relative; /* Relative for scan animation */
    
    background: rgb(var(--deepdark)); 
    border: 1px solid rgb(var(--primary), 0.65);
    border-radius: var(--r8);
    
    /* Hide Bokeh plot snapshot corners */
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: 1; 
}   

#overview-area.swap {
    visibility: hidden;
}

/* ----- SCAN ANIMATION ----- */

#overview-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, transparent 3%, #E6E6E6 50%, transparent 97%);
    opacity: 0;
    z-index: 1;
}

#overview-area.active::before {
    animation: vertical-scan 3s linear 1 forwards;
    opacity: 1;
}

#overview-area::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 0px;
    height: 4px;
    width: 100%;
    background: linear-gradient(to right, transparent 0%, #E6E6E6 50%, transparent 100%);
    opacity: 0;
}

#overview-area.active::after {
    animation: horizontal-scan 3s linear 1 forwards 3s; /* 2s delay */
    opacity: 1;
}

@keyframes vertical-scan {
    0% { left: 5%; opacity: 1; } /* 0% is in matter of time, not position = left */
    99% { left: 95%; opacity: 1; }
    100% { left: 96%; opacity: 0; }
}

@keyframes horizontal-scan {
    0% { top: 5%; opacity: 1;}
    99% { top: 95%; opacity: 1; }
    100% { top: 96%; opacity: 0;}
}

/* Move snapshot container to the left */

#overview-area.scanned {
    transform: translateX(calc(-100% - 2 * var(--unit-xxs)));
}

/* ----- (end) SCAN ANIMATION ----- */


#bokeh_snapshot { /* Bokeh embbeded div */
    grid-area: 1 / 1 / -1 / -1;

    position: relative; /* Relative for absolute outline-mask positioning to cover bokeh active/focus border */
    width: 100%;
    height: 100%;
}

#snapshot_scan { /* SCAN button */
    grid-area: 3 / 1 / 4 / 2;
    width: 50%;
    height: 2rem;

    place-self: center;
    border-radius: 6px;

    transition: background-color 0.35s ease;
}

.scan-load { /* 33% , 66% */
    background: linear-gradient(to right, rgb(var(--orange)) var(--scan), transparent 0%);
    pointer-events: none;
}

.scan-loaded { /* 100% and possibble to transition to default state */
    background-color: rgb(var(--orange));
    pointer-events: none;
}

/* ------------------------------------------------------------ */
/* ---------------- RIGHT TOP-LEFT PANEL ---------------------- */
/* --------------------- 2nd layer ---------------------------- */

#rightpanel-evidence {
    grid-area: 1 / 1 / -1 / -1;

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;

    border: 2px solid rgb(var(--deepdark));
    border-radius: var(--r10);
   
    min-height: 0;
    overflow: hidden;
}

#evidence-menu {
    grid-area: 1 / -2 / -1 / -1;
    padding: var(--unit-xxs);

    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr 6fr 2fr;

    background: linear-gradient(to right, rgb(var(--deepdark)) -50%, rgb(var(--dark)) 22%);
    border-left: 1px solid rgb(var(--deepdark));
}

#menu-filters {
    grid-area: 2 / 1 / 3 / -1;
    margin-top: var(--unit-s);
    padding: 5px 0;
    
    background-color: rgb(var(--primary), 0.2);
    border-radius: var(--r10);
    font-size: var(--unit-m);
}

#menu-swap {
    grid-area: 3 / 1 / 4 / -1;
    margin: var(--unit-xs) 1px 0;

    display: flex;
    background-color: rgb(var(--primary), 0.2);
    border-radius: var(--r10);
    font-size: var(--unit-l); /* Same as main menu icons */
    overflow: hidden;
}

#swap_button {
    width: -webkit-fill-available;
    height: 100%;
}

#evidence-data {
    grid-area: 1 / 1 / -1 / -2;
    padding: var(--unit-xxs);

    display: flex;
    flex-direction: column;
    gap: 2px;

    overflow-y: auto;
    cursor: ns-resize; /* Show aka scrolling option */
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
}

#evidence-check {
   background-color: transparent;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#evidence-data::-webkit-scrollbar { 
    display: none;
}

#evidence-data > * {
    flex-shrink: 0; /* Keep preset height of 16% */
    width: -webkit-fill-available;
    height: 16%;
    
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 3fr 2fr;
    grid-template-rows: 1fr;
    place-items: center;
    padding: 0 var(--unit-xs) 0 var(--unit-xxs);

    background-color: rgb(var(--dark));
    border: 1px solid rgb(115, 97, 91); /* #73615b */
    border-radius: 6px;
    cursor: pointer;
}

#evidence-balance { /* Statistics card */
    height: 20%;
    margin-top: 3px; /* Space between evidence data and long/short balance */
    padding: 0 2px;

    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr;

    background-color: transparent;
    border: none;
    border-top: 1px solid rgb(var(--deepdark));
    border-radius: 0px !important;
}

#balance {
    grid-area: 1 / 1 / 2 / 3;
    margin: var(--unit-s) 0;
    padding: 0 var(--unit-xxs);

    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    align-items: center;

    border: 1px solid rgb(var(--secondary), 0.35);
    border-radius: 5px;
}

#evidence-data > *:hover:not(:last-child) {
    background: linear-gradient(to top, rgb(var(--deepdark)) 0%, rgb(var(--dark)) 50%);
    border: none;
    /* border-top: 2px solid rgb(var(--deepdark)); */
    scale: 1.0075;
}

#evidence-data > *.describe {
    background: rgb(var(--deepdark));
    border: 1px solid rgb(var(--secondary), 0.6);
}

.evidence-risk { /* Styling badge as risk threshold indicator */
    padding: 0.55em var(--unit-xxs) 0.15em;

    border-left: 1px solid rgb(var(--secondary));
    border-right: 1px solid rgb(var(--secondary));
    border-radius: 4px;
}


/* ------------------------------------------------------------ */
/* ---------------- RIGHT TOP-RIGHT PANEL --------------------- */

/* ----- [1.] def NAVIGATION  ----- */

.optionCard { /* Universal container created for cards organization in settings FX, TF selection */
    flex: 1;
    padding: var(--unit-xs);
    padding-bottom: 0;

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;

    border: 1px solid rgb(var(--primary), 0.65);
    border-radius: var(--r8);
    cursor: pointer;
    transition: all 0.3s ease;
}

.optionCard > *:nth-child(3) { /* Allow decription text to span over 2 columns */
    grid-column: 1 / span 2;
    padding-top: var(--unit-s);
    border-top: 2px solid rgb(var(--dark));
}

.optionCard > *:nth-child(4) {
    grid-column: 1 / span 2;
    padding-bottom: var(--unit-xs);
}

.optionCard:hover {
    border: 1px solid rgb(var(--primary));
}

.optionCard.static {
    border: 1px solid rgb(var(--primary));
    background: linear-gradient(to left, rgb(var(--deepdark)) -50%, rgb(var(--dark)) 22%);
    cursor: default;
}

.optionCard.selected {
    background-color: rgb(var(--deepdark));
    border: 1px solid rgb(var(--orange), 0.5);
}

.optionCard.selected > *:nth-child(2) { /* active state of slection -> green text indicator */
    color: rgb(var(--green));
}

.optionCard.not {
    background-color: rgb(var(--red), 0.05);
    pointer-events: none;
}

#rightpanel-settings {
    grid-area: 1 / 1 / -1 / -1;

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

#settings-main { /* Settings title, attribute and description container */
    grid-area: 1 / 1 / 4 / -1; 
    margin-bottom: var(--unit-xxs);
    padding: var(--unit-xs);
    
    background-color: rgb(var(--deepdark));
    border: 1px solid rgb(var(--primary), 0.5);
    border-radius: var(--r8);
}

#main-description { /* This is alternative for optionCard > *:nth-child(3), because dynamics rendering do not stick to css styling rules */
    grid-column: 1 / span 2;
    padding-top: var(--unit-s);
    border-top: 2px solid rgb(var(--dark));
}

#settings-slider { /* Slider container - not slider itself */
    grid-area: 2 / 1 / 4 / -2;
    padding: var(--unit-xs);
    
    display: flex;
    justify-content: center;
    align-items: center;
}

#settings_set { /* SET button */
    grid-area: 2 / 4 / 4 / -1;
    margin: var(--unit-l) var(--unit-xs);
}

#settings-selection { /* RISK, SIZE, GRID cards */
    grid-area: 4 / 1 / 6 / -1; 

    display: flex;
    flex-direction: row;
    gap: var(--unit-xxs);
}

#rightpanel-fx, #rightpanel-tf { /* Universal div to organize content for timeframe, assets selection */
    grid-area: 1 / 1 / -1 / -1;
    
    display: flex;
    flex-direction: column;
    gap: var(--unit-xxs);
}

/* ----- [2.] def INTERACTIVE  ----- */
/* Require z-index to display over base layer on parent => app-rightpanelTR */

.tradeCard {
    grid-area: 1 / 1 / 4 / -1;
    margin-bottom: var(--unit-xxs);
    padding: var(--unit-xs);

    display: grid;
    grid-template-columns: 4fr 2fr;
    grid-template-rows: repeat(4, 1fr);
    align-items: center;

    background: linear-gradient(to bottom, rgb(var(--deepdark)) 50%, transparent 50%);
    border: none;
    outline: 2px solid rgb(var(--deepdark));
    border-radius: var(--r8);
}

.tradeCard > :last-child { /* Right long column */
    grid-column: 2;
    grid-row: 1 / 5;
    margin: var(--unit-xs) 0;
    align-self: stretch;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-left: 1px solid rgb(var(--middark));
}

.tradeCard h3 {
    font-size: var(--unit-xl);
    padding-left: var(--unit-xxs);
}

#prediction_add, #prediction_sub { /* Arrows */
    color: rgb(var(--secondary));
}

/* Managing OOS active attention */

#oos { /* h3 rendering */
    font-size: var(--unit-xxl);
    padding-left: var(--unit-xxs);
}

#oos.changed { /* animation on arrows click - 50ms delayed */
    animation: flashColor 0.75s ease;
}

@keyframes flashColor {
    50% { color: rgb(var(--orange)); 
          transform: scale(1.02); }
}

#is { /* h3 rendering */
    font-size: var(--unit-xxl);
    padding-left: var(--unit-xxs);
    align-self: flex-start;
}

/* -------------------------- */

#rightpanel-prediction { /* Wrapper */
    grid-area: 1 / 1 / -1 / -1;
    
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;

    z-index: 1;
}

#rightpanel-processing {
    grid-area: 1 / 1 / -1 / -1;

    background: linear-gradient(to right, transparent 0%, rgb(var(--orange)) var(--position), transparent 20%);
    border-bottom-left-radius: var(--r10);
    border-bottom-right-radius: var(--r10);
    overflow: hidden;
}

#rightpanel-processing.research {
    animation: streamline 3s linear forwards;
}

@keyframes streamline {
    0%   { --position: 0%;   }
    60%  { --position: 30%;  }
    100% { --position: 100%; }
}

#prediction-deep { /* Deep research container */
    grid-area: 4 / 1 / 5 / -1;
    margin: 0 var(--unit-xs);
    
    display: inline-flex;
    align-items: flex-end;
    justify-content: space-between;

    border-top: 1px solid rgb(var(--middark));
}

#prediction-colorpicker {
    grid-area: 4 / 1 / 5 / -1;
    margin: 0 0.15em;
    padding-top: var(--unit-xs);
    
    cursor: pointer;
    z-index: 0;
}

#prediction_research { /* Research button */
    grid-area: 5 / 1 / 6 / -1;
    margin-top: var(--unit-xxs);

    width: -webkit-fill-available;
    height: 50%;
    
    border-radius: 6px;
    place-self: center;
}

#sequence_add { /* Add button */
    grid-area: 5 / 1 / 6 / -1;
    margin: var(--unit-xxs) 20% 0 0.15em;
    padding-top: 0.9em;

    width: -webkit-fill-available;
    height: 50%;
    
    border-radius: var(--r8);
    place-self: center;
}

#sequence_hide { /* Hide button */
    grid-area: 5 / 3 / 6 / -1;
    margin: var(--unit-xxs) 0.15em 0 var(--unit-xxs);
    padding: 0 var(--unit-xs);

    align-self: center;
    justify-self: flex-end;
    height: 50%;
    
    font-size: var(--unit-m);
    color: rgb(var(--primary));

    border-right: 1px solid rgb(var(--primary));
    border-left: 1px solid rgb(var(--primary));
    border-radius: 6px;
}

/* ------------------------------------------------------------ */
/* ----------------- RIGHT BOTTOM PANEL ----------------------- */


#bottompanel-fundamentals {
    grid-area: 1 / 1 / -1 / -1;

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    padding: var(--unit-xxs);

    border: 1px solid rgb(var(--secondary), 0.5);
    border-radius: var(--r8);
    
    /* UI has to be hidden by default - data-active attribute manipulate it */
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;

    /* Trasition effect between layers - data_active */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#fundamentals-header {
    grid-area: 1 / 1 / 2 / -1;
    padding: 0 4px 0 0;
    margin: 0 var(--unit-xxs);

    display: flex;
    align-items: flex-end;    
    border-bottom: 1px solid rgb(var(--middark));
}

#fundamentals-data {
    grid-area: 2 / 1 / -2 / 4;
    padding: var(--unit-xs) var(--unit-xxs) 0;

    display: flex;
    flex-direction: column;
    gap: 2px;

    overflow-y: auto;
    cursor: ns-resize; /* Show aka scrolling option */
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#fundamentals-data::-webkit-scrollbar { 
    display: none;
}

#fundamentals-data > * {
    flex-shrink: 0; /* Keep preset height of 16% */
    width: -webkit-fill-available;
    height: 16%;
    
    display: grid;
    position: relative; /* Currency label USD,EUR...are absolute positioned */
    grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
    grid-template-rows: 1fr;
    padding-top: 0.55em;
    place-items: center;

    background-color: rgb(var(--middark), 0.1);
    overflow: hidden;
}

#fundamentals-data > *:nth-child(odd) { /* Background color for odd rows */
    background-color: rgb(var(--middark), 0.25);
}

#fundamentals-data > *:hover {
    border: 1px solid rgb(var(--secondary), 0.65);
}

/* Pop-up icon to open question */
#fundamentals-data > *:hover > :last-child {
    color: rgb(var(--secondary)) !important;
    scale: 1.02;
    cursor: pointer;
}

.currency-tag {
    padding: var(--unit-xxs);
    margin-bottom: 10%;
    
    font-weight: 600;
    color: rgb(var(--deepdark));
    border: 1px solid rgb(var(--deepdark));
    border-radius: 6px;
}

/* ----- activity content ----- */

#fundamentals-activity {
    grid-area: 1 / 4 / 3 / -1;
    margin: 0 0 var(--unit-xxs) var(--unit-xxs);

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    
    border: 1px solid rgb(var(--deepdark));
    background-color: rgb(var(--primary));
    border-radius: var(--r8);

    overflow: hidden;
}

#activity-header {
    display: flex;
    flex-direction: row; 
    padding: 0 var(--unit-xs);

    align-items: flex-end;
    justify-content: space-between;
}

#bokeh_activity {
    margin: var(--unit-xxs);
}

#fundamentals-time {
    grid-area: 3 / 4 / 4 / -1;
    margin-left: var(--unit-xxs);
    height: 60%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.3em var(--unit-xs) 0;

    background-color: rgb(var(--middark), 0.25);
    border-radius: var(--r8);
}

#fundamentals-footer {
    grid-area: -2 / 1 / -1 / -1;
    margin: var(--unit-m) var(--unit-xxs) 0;
    border-top: 1px solid rgb(var(--middark));
}

/* ----- data_active layer - forecasting ----- */

#bottompanel-forecasting {
    grid-area: 1 / 1 / -1 / -1;

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;

    position: relative;
    border: 1px solid rgb(var(--secondary), 0.5);
    border-radius: var(--r8);
    
    /* UI has to be hidden by default - data-active attribute manipulate it */
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;

    /* Trasition effect between layers - data_active */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;   
}

#forecasting-header {
    grid-area: 1 / 1 / 2 / -1;
    padding: 0 4px 0 0;
    margin: 0 var(--unit-m);

    display: flex;
    align-items: flex-end;    
    border-bottom: 1px solid rgb(var(--middark));
}

#lock {
    grid-area: 1 / 2 / 2 / 3;
    margin-left: var(--unit-xs);
    font-size: var(--unit-l);
}

#forecasting-futures {
    grid-area: 2 / 1 / -1 / -1;

    width: 100%;
    height: 100%;
}

#forecasting-scatter {
    grid-area: 1 / 2 / -1 / -1;
    margin-left: 0.35em; /* Balancing evidence menu position */

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    
    background: linear-gradient(to bottom, rgb(var(--deepdark)) -50%, rgb(var(--dark)) 22%);
    border-radius: var(--r8);

    overflow: hidden;
}

#scatter-header {
    grid-area: 1 / 1 / 2 / -1;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-right: var(--unit-m);
    padding-bottom: 4px; /* Same padding as h2 section headers */
}

#forecasting-dots {
    grid-area: 2 / 1 / -1 / -1;
    width: 100%;
    height: calc(100% - 1px); /* -1px is offset because container is embedded into parent with 1px border */

    display: flex;
    align-items: center;
    justify-content: center;
}

#forecasting-dots p {
    height: 40%;
}

#forecasting-menu {
    grid-area: 5 / 2 / -1 / -1;
    margin-left: 0.35em;
    position: relative;
    
    background: linear-gradient(to top, rgb(var(--deepdark)) -50%, rgb(var(--dark)) 22%);
    border-bottom-left-radius: var(--r8);
    border-bottom-right-radius: var(--r8);
    
    box-shadow: 0 -5px rgb(var(--dark));
    z-index: 1; 
}

#menu-toolbar {
    position: absolute;
    top: -10px;
    left: var(--unit-xs);
    height: 100%;
    width: calc(100% - var(--unit-xl));

    display: grid;
    grid-template-columns: 4fr 3fr;
    grid-template-rows: 1fr;
}

#toolbar-tools {
    display: flex;
    flex-direction: row;
    margin-right: var(--unit-xs);

    font-size: 1.25rem;
    background-color: rgb(var(--primary), 0.25);
    border-radius: var(--r8);
}

#toolbar-output {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    
    background-color: rgb(var(--deepdark), 0.75);
    border: 2px solid rgb(var(--middark));
    border-radius: var(--r8);
    overflow: hidden;
}

#toolbar-output:has(#saveit:hover) {
    background-color: rgb(var(--deepdark));
    border: 2px solid rgb(var(--orange));
}

#saveit {
    margin-left: var(--unit-xs);
    font-size: 1.25rem;
}

#toolbar-risk {
    padding: 0.45em 0.75em 0;
    
    font-size: var(--unit-l);
    font-weight: 500;
    color: rgb(var(--red));
}

#forecasting-frame {
    grid-area: 2 / 2 / -1 / -1;
    margin-left: 0.35em;
    border: 2px solid rgb(var(--dark));

    /* Only bottom corners are rounded */
    border-bottom-left-radius: var(--r8);
    border-bottom-right-radius: var(--r8);
    z-index: 1; /*! Cannot maniulate chart under */ 
}

#toggle {
    grid-area: 5 / 1 / 6 / 2;
    align-self: flex-start;
    justify-self: center;
    display: none;
}