/* app/static/css/header.css */

/* ------------------- HEADER ------------------- */

.header{
    display:flex;
    align-items:center;
    height:50px;
    padding:0 20px;
    background:#e9e9ec;
    border-bottom:1px solid #e2e2e2;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
    position:relative;
    z-index:3000;
}

/* ------------------- MENU ------------------- */

.menu {
    display:flex;
    gap:25px;
    align-items:center;
}

.menu-item {
    position:relative;
    cursor:pointer;
    padding:6px 12px;
    border-radius:6px;
    font-size:14px;
    color:inherit;
    text-decoration:none;
    transition:background .25s ease;
}

.menu-item:hover {
    background:#c8c8ca;
}

/* стрелка */
.menu-item:has(.dropdown)::after {
    content:"";
    display:inline-block;
    margin-left:6px;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid #888;
    vertical-align:middle;
}

.menu-item:not(:has(.dropdown))::after {
    display:none;
}

/* ------------------- LEFT MENU ------------------- */

.left-menu{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img {
    height:32px;
}

/* ------------------- MIDDLE MENU ------------------- */

.middle-menu {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
}

.header-datetime {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* ------------------- RIGHT MENU ------------------- */

.right-menu {
    display:flex;
    align-items:center;
    margin-left:auto;
    gap:0;
}

.right-menu a {
    padding:6px 16px;
    font-size:14px;
    color:black;
    text-decoration:none;
    border-radius:6px;
}

.right-menu a:hover {
    background:#c8c8ca;
}

/* ------------------- USER PROFILE ------------------- */

.user-profile{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:6px;
    color:#444;
    text-decoration:none;
}

.user-profile:hover{
    background:#c8c8ca;
}

.user-profile svg{
    width:22px;
    height:22px;
}

/* ------------------- DROPDOWN ------------------- */

.dropdown {
    position:absolute;
    top:100%;
    left:0;              /* по умолчанию — открываем вправо */
    right:auto;

    background:white;
    border:1px solid #c8c8ca;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    border-radius:4px;

    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:opacity .2s ease, transform .2s ease;

    width:max-content;
    min-width:140px;
    overflow:hidden;
    z-index:2000;
}

.menu-item:hover .dropdown {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown a {
    display:flex;
    align-items:center;
    height:34px;
    padding:0 12px;
    font-size:14px;
    color:#333;
    text-decoration:none;
    white-space:nowrap;
}

.dropdown a:hover {
    background:#c8c8ca;
}


/* ------------------- RIGHT-ALIGNED DROPDOWNS ------------------- */
/* язык + logout */

.right-menu .menu-item .dropdown {
    right:0;
    left:auto;
}

/* ------------------- LOGOUT ------------------- */

.logout-btn:hover {
    background:#e81123;
    color:white;
}

.logout-btn::after {
    display:none;
}

.lang-menu .dropdown {
    overflow:visible !important;
}

/* ------------------- SETTINGS ------------------- */
.settings-btn {
    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    margin-right:0px;

    text-decoration:none;
    color:#444;
    font-size:16px;

    border-radius:6px;

    transition: background .2s ease, color .2s ease;
}



.right-menu a.settings-btn {
    display: flex;
    padding: 0;        /* убираем padding от общего правила */
}

.settings-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;

    transition: transform .2s ease;
}

.settings-btn:hover img {
    transform: rotate(45deg);
}