/* root variables are declared below */
:root {
    --header-height: 56px;
    --footer-height: 44px;
    --right-col-width: 48px;
    --panel-header-height: 48px;
}
header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 0 ;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-secondary);
    box-sizing: border-box;
    transition: background-color 240ms ease, color 240ms ease;
}
.logo { margin-left: 12px;font-weight:700; font-size:18px; display:flex; align-items:center; gap:8px; }
.logo .bcf-logo {  width: 34px; height: 34px; color: var(--text-accent); display:inline-block; vertical-align:middle; }
.logo .site-logo { display:inline-flex; align-items:center; }
.controls { display:flex; gap:8px; align-items:center }
.right-controls { display:flex; align-items:center; gap:8px }

.styled-select { background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.styled-select option { background: var(--bg-tertiary); color: var(--text-primary); }

.hamburger-btn { cursor: pointer; background: var(--gradient-hamburger); color: var(--text-primary); padding: 6px 10px; border-radius: 6px; text-decoration: none; border: 1px solid var(--border-hover); font-size: 13px; }
.hamburger-btn:hover { background: var(--bg-secondary); border-color: var(--border-primary); }

.hamburger-menu { position: absolute; top: var(--header-height); right: 0; display: none; z-index: 9999; }
.hamburger-menu[aria-hidden="false"] { display: block }
.hamburger-menu > ul { list-style: none; margin: 0; padding: 8px 10px; background: var(--bg-hamburger); border-radius: 8px; min-width: 200px; box-shadow: var(--shadow-hamburger); border: 1px solid var(--border-primary); }
.hamburger-menu > ul li a { color: var(--text-primary); text-decoration: none; display: block; padding: 6px 10px; border-radius: 6px; }
.hamburger-menu > ul li a:hover { background: var(--bg-secondary); }

/* Pro badge placement */
.controls #pro-badge { margin-left: 6px; display: inline-block }

/* Responsive design for mobile */
@media (max-width: 768px) {
    header {
        padding: 0 8px;
    }
    .logo {
        margin-left: 8px;
        font-size: 16px;
    }
    .right-controls .dashboards-btn {
        display: none;
    }
    .hamburger-menu {
        position: fixed;
        top: var(--header-height);
        right: 8px;
        left: auto;
        width: auto;
        display: none;
        z-index: 9999;
    }
    .hamburger-menu[aria-hidden="false"] {
        display: block;
    }
    .hamburger-menu > ul {
        list-style: none;
        margin: 8px 0 0 0;
        padding: 10px;
        background: var(--bg-hamburger);
        border-radius: 6px;
        min-width: auto;
        box-shadow: var(--shadow-hamburger);
        border: 1px solid var(--border-primary);
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .hamburger-menu > ul li a {
        color: var(--text-primary);
        text-decoration: none;
        display: block;
        padding: 10px 15px;
        border-radius: 6px;
        font-size: 16px;
    }
    .hamburger-menu > ul li a:hover {
        background: var(--bg-secondary);
    }
}