/* /www/wwwroot/Test.System.GURU.Markets/frontend/css/header.css */
/* Styles for the main header component of the application.
*/
.main-header {
    /* Use flexbox to stack header rows vertically. */
    display: flex;
flex-direction: column;
    padding-top: 12px;
}
.header-row {
    /* Each row within the header is a flex container.
*/
    display: flex;
    /* Aligns items horizontally, pushing left and right items to the edges.
*/
    justify-content: space-between;
    /* Aligns items vertically to the center. */
    align-items: center;
padding: 3px 0;
    /* Allows items to wrap to the next line on smaller screens.
*/
    flex-wrap: wrap;
    /* Provides consistent spacing between items, especially when they wrap.
*/
    gap: 10px;
}
.header-row .info-item {
    /* Each group of controls within a row is also a flex container.
*/
    display: flex;
    align-items: center;
    gap: 5px;
}
.header-row .info-item.center {
    /* Allows the center item to grow and fill available space, pushing right items to the edge.
*/
    flex-grow: 1;
    /* Centers the content within the growing item. */
    justify-content: center;
}
.header-row .info-item.right {
    /* Pushes the right-aligned items to the far right edge of the header row.
*/
    margin-left: auto;
}
#user-authenticated {
    display: block;
}
/* General styling for header links. */
.header-link {
    color: white;
text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    line-height: 1;
}
/* Styling for the user-specific client link (populated with email/avatar).
*/
.client-link {
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 21px;
}
/* Reset default button styles to make it look like plain text. */
button.client-link {
    background: none;
border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    /* Ensure the button inherits the body's font.
*/
    cursor: pointer;
    text-align: left;
}
/* A placeholder style for the client link before it's populated by JS.
*/
/* Creates a "skeleton" loader effect. */
.client-link:empty {
    width: 250px;
    height: 28px;
    border-radius: 5px;
background-color: rgba(255, 255, 255, 0.1);
}
.request-count {
    font-weight: normal;
    font-size: 21px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
color: #fff;
    padding: 5px;
}
/* Prevent the number itself from triggering a tooltip hover state.
*/
#requests-left {
    pointer-events: none;
}
/* Styling for the logout button. */
.exit-btn {
    background: none;
border: none;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    text-decoration: none;
    gap: 5px;
}
/* Styling for the theme switcher component.
*/
.theme-switch {
    background-color: #000000;
    width: 60px;
    height: 30px;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    display: flex;
align-items: center;
    border: 1px solid #888;
}
.theme-switch .switch-track {
    display: flex;
    justify-content: flex-end;
/* Sun icon is on the right by default (light mode). */
    width: 100%;
    padding: 0 5px;
box-sizing: border-box;
}
.theme-switch .icon-sun {
    font-size: 16px;
    line-height: 1;
    display: none;
    /* Hidden in light mode.
*/
}
.theme-switch .icon-moon {
    font-size: 16px;
    line-height: 1;
    /* Visible in light mode.
*/
}
.theme-switch .switch-thumb {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
/* The thumb's movement is handled by a transform in the theme.css file.
*/
    transition: transform 0.2s ease, background-color 0.2s ease;
}
/* Base styles for the "Buy" button */
.buy-link {
    background-color: #28a745;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
text-decoration: none;
    border: none;
    font-family: inherit;
}
/* Base styles for the "Ask" button */
.ask-btn {
    color: white;
font-size: 21px;
    font-weight: bold;
    text-decoration: none;
    background: none;
    border: none;
    font-family: inherit;
    display: inline-flex;
/* --- CHANGE: Now visible by default within the authenticated user block --- */
}
/* General styling for other action links like Share, Download, etc. */
#share-link,
#download-data-btn,
#download-db-btn,
#download-screen-btn {
    color: white;
font-size: 21px;
    font-weight: bold;
    text-decoration: none;
}
/* A shared class to apply common properties to ALL header links and buttons.
*/
.header-link,
.client-link,
#share-link,
#download-data-btn,
#download-db-btn,
#download-screen-btn,
.buy-link,
.ask-btn,
.exit-btn {
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease, padding 0.2s ease;
display: inline-flex;
    align-items: center;
    cursor: pointer;
}
/* Shared hover effect for transparent buttons. */
.header-link:hover,
.client-link:hover,
#share-link:hover,
#download-data-btn:hover,
#download-db-btn:hover,
#download-screen-btn:hover,
.ask-btn:hover,
.exit-btn:hover {
    background-color: #fff;
color: #000;
    text-decoration: none;
    padding: 5px 10px;
}
/* Specific hover effect for the "Buy" button.
*/
.buy-link:hover {
    background-color: #218838;
    /* Darker green on hover */
    padding: 5px 10px;
/* Expands on hover */
}
/* Styling for the dropdown menu container (e.g., for "Download Database").
*/
.dropdown-container {
    position: relative;
    display: inline-flex;
}
.dropdown-menu {
    display: none;
    /* Hidden by default.
*/
    position: absolute;
    top: 100%;
    /* Positioned directly below the button. */
    left: 0;
background-color: #f9f9f9;
    min-width: 120px;
    border: 1px solid #ccc;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1010;
/* High z-index to appear above other content. */
    border-radius: 4px;
    padding: 5px 0;
}
.dropdown-menu a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
font-size: 16px;
    font-weight: normal;
    white-space: nowrap;
    /* Prevents menu items from wrapping. */
}
.dropdown-menu a:hover {
    background-color: #f1f1f1;
color: black;
}
/* The dropdown menu is shown on hover of its parent container.
*/
.dropdown-container:hover .dropdown-menu {
    display: block;
}
/* --- UNIVERSAL LANGUAGE SWITCHER STYLES --- */
.lang-switcher-component {
    position: relative;
width: 240px;
    flex-shrink: 0;
}
.lang-switcher-component .lang-btn {
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #444;
border-radius: 0;
    color: black;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    font-size: 21px;
    user-select: none;
}
.lang-switcher-component span[id*="-current-lang-content"],
#current-lang-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.lang-text {
    position: relative;
top: -3px;
    /* Minor vertical alignment adjustment. */
}
.lang-switcher-component .lang-btn .arrow-down {
    width: 0;
    height: 0;
border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #333;
}
/* --- THE FIX: This selector now correctly targets ALL language dropdowns --- */
.lang-switcher-component div[id*="-lang-list"],
.lang-switcher-component #lang-list {
    display: none;
position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 2010;
/* High z-index for modals */
    max-height: 300px;
    overflow-y: auto;
}
.lang-switcher-component .lang-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    cursor: pointer;
    color: black;
    font-size: 21px;
white-space: nowrap;
    gap: 10px;
}
.lang-switcher-component .lang-item img {
    position: relative;
    top: 3px;
}
.lang-switcher-component .lang-item:hover {
    background-color: #f0f0f0;
}