/* ============================================================
   02-LAYOUT — шапка, навигация, контейнер, подвал, адаптив
   ============================================================ */

/* ─────────── ШАПКА ───────────
   Название, поиск, часы, пользователь и меню — одна липкая полоса.
   Раньше это были два блока: крупная шапка (заголовок 24px +
   подзаголовок + часы 33px) и отдельное меню, причём липло только меню.
   Теперь один компактный блок, и липнет он целиком.
*/

.app-bar{
    position:sticky;
    top:0;
    z-index:100;
    background:linear-gradient(120deg, var(--c-brand-900) 0%, var(--c-brand-700) 100%);
    color:var(--c-on-dark);
    box-shadow:var(--sh-header);
}

.app-bar-inner{
    max-width:var(--w-page);
    margin:0 auto;
    padding:0 var(--s-5);
    display:flex;
    align-items:center;
    gap:var(--s-3) var(--s-4);
}

/* Верхний ряд: бренд — поиск — часы/пользователь */
.app-bar-main{
    padding:var(--s-2) 0;
}

.app-bar-nav{
    border-top:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.12);
}

.brand{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    color:var(--c-on-dark);
    text-decoration:none;
}

.brand-name{
    font-size:var(--fs-lg);
    font-weight:600;
    white-space:nowrap;
    letter-spacing:0.01em;
}

.brand:hover{
    text-decoration:none;
    opacity:0.9;
}

.app-bar-right{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    margin-left:auto;
    flex:0 0 auto;
}

/* Часы — вспомогательная информация, а не главный акцент.
   Раньше 33px: крупнее любой цифры на дашборде. */
.local-clock{
    display:flex;
    align-items:baseline;
    gap:var(--s-2);
    color:var(--c-on-dark-soft);
    font-size:var(--fs-sm);
    white-space:nowrap;
}

.local-clock-date{
    font-weight:400;
}

.local-clock-time{
    font-size:15px;
    font-weight:600;
    letter-spacing:0.02em;
    font-variant-numeric:tabular-nums;
}

/* ─────────── НАВИГАЦИЯ ─────────── */

.top-nav-links{
    display:flex;
    align-items:center;
    gap:var(--s-1);
    flex-wrap:wrap;
    flex:1 1 auto;
    min-width:0;
    padding:var(--s-1) 0;
}

.mobile-nav-toggle{
    display:none;
}

.app-bar a{
    color:var(--c-on-dark);
    text-decoration:none;
}

.top-nav-links > a,
.nav-more-btn{
    color:var(--c-on-dark);
    text-decoration:none;
    font-size:var(--fs-md);
    white-space:nowrap;
    padding:7px 11px;
    border-radius:var(--r-md);
    transition:background .15s ease;
    background:transparent;
    border:none;
    cursor:pointer;
    font-family:inherit;
}

.top-nav-links > a:hover,
.nav-more-btn:hover{
    text-decoration:none;
    background:rgba(255,255,255,0.14);
}

/* Текущий раздел */
.top-nav-links a[aria-current="page"]{
    background:rgba(255,255,255,0.22);
    font-weight:500;
}

/* Выпадающее меню «Ещё» — второстепенные разделы */
.nav-more{
    position:relative;
}

.nav-more-arrow{
    font-size:10px;
    margin-left:var(--s-1);
    opacity:0.8;
}

.nav-more.open .nav-more-btn{
    background:rgba(255,255,255,0.22);
}

.nav-more-panel{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    min-width:230px;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-md);
    box-shadow:var(--sh-pop);
    padding:var(--s-1);
    z-index:300;
}

.nav-more.open .nav-more-panel{
    display:block;
}

.nav-more-panel a{
    display:block;
    padding:8px 10px;
    border-radius:var(--r-sm);
    color:var(--c-ink);
    font-size:var(--fs-md);
    white-space:nowrap;
    text-decoration:none;
}

.nav-more-panel a:hover{
    background:var(--c-primary-soft);
    color:var(--c-primary);
    text-decoration:none;
}

.nav-more-panel a[aria-current="page"]{
    background:var(--c-primary-soft);
    color:var(--c-primary);
    font-weight:600;
}

/* ─────────── ПАНЕЛЬ ФИЛЬТРОВ В ШАПКЕ ───────────
   Заменяет блок «Расширенный поиск», который дублировался
   на реестре и дашборде. Показывается только на этих экранах.
*/

.nav-filters{
    position:relative;
    flex:0 0 auto;
}

.nav-filters-btn{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:34px;
    padding:0 var(--s-3);
    background:rgba(255,255,255,0.14);
    color:var(--c-on-dark);
    border:1px solid rgba(255,255,255,0.35);
    border-radius:var(--r-md);
    font-size:var(--fs-md);
    font-family:inherit;
    white-space:nowrap;
    cursor:pointer;
    transition:background .15s ease;
}

.nav-filters-btn:hover{
    background:rgba(255,255,255,0.24);
}

.nav-filters.open .nav-filters-btn{
    background:rgba(255,255,255,0.28);
}

/* Счётчик применённых фильтров — иначе при свёрнутой панели
   не видно, что выборка ограничена */
.nav-filters-count{
    background:var(--c-on-dark);
    color:var(--c-brand-900);
    border-radius:var(--r-pill);
    font-size:11px;
    font-weight:700;
    min-width:18px;
    height:18px;
    line-height:18px;
    text-align:center;
    padding:0 5px;
}

.nav-filters-panel{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    width:320px;
    max-width:calc(100vw - 32px);
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--r-md);
    box-shadow:var(--sh-pop);
    padding:var(--s-4);
    z-index:300;
    color:var(--c-ink);
}

.nav-filters.open .nav-filters-panel{
    display:block;
}

.nav-filters-panel .form-group{
    margin-bottom:var(--s-3);
}

.nav-filters-panel .filters-actions{
    margin-top:var(--s-4);
}

/* Кнопка «Новый контракт» — действие, а не раздел */
.nav-action{
    margin-left:auto;
    flex:0 0 auto;
}

.top-nav-user{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--c-on-dark);
    flex:0 0 auto;
    white-space:nowrap;
}

.top-nav-user-text{
    font-size:var(--fs-sm);
    color:var(--c-on-dark-soft);
}

.top-nav-user-link{
    color:var(--c-on-dark);
    text-decoration:none;
    font-weight:600;
}

.top-nav-user-link:hover{
    text-decoration:underline;
}

/* Колокольчик уведомлений о новых контрактах */
.nav-bell{
    position:relative;
    display:flex;
    align-items:center;
    color:var(--c-on-dark);
    text-decoration:none;
    font-size:var(--fs-xl);
    padding:0 var(--s-1);
}

.nav-bell-badge{
    position:absolute;
    top:-4px;
    right:-8px;
    background:var(--c-danger);
    color:var(--c-on-dark);
    font-size:10px;
    font-weight:700;
    border-radius:50%;
    min-width:16px;
    height:16px;
    line-height:16px;
    text-align:center;
    padding:0 3px;
}

/* ─────────── КОНТЕЙНЕР И ЗАГОЛОВОК СТРАНИЦЫ ─────────── */

.container{
    padding:var(--s-5);
    max-width:var(--w-page);
    margin:0 auto;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--s-4);
    margin-bottom:18px;
    flex-wrap:wrap;
}

.page-subtitle{
    margin:6px 0 0 0;
    color:var(--c-ink-3);
    font-size:var(--fs-md);
}

.page-header-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* ─────────── ПОДВАЛ ─────────── */

.site-footer-brand{
    text-align:center;
    padding:var(--s-4);
    margin-top:40px;
    border-top:1px solid var(--c-line);
}

.footer-logo{
    height:32px;
    opacity:0.7;
    transition:opacity 0.2s;
}

.footer-logo:hover{
    opacity:1;
}

/* ─────────── АДАПТИВ ─────────── */

@media (max-width: 1200px){
    .dashboard-cards{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .filters-grid,
    .admin-log-filters,
    .reports-filters-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .grid-form{
        grid-template-columns:1fr;
    }

    .columns-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .contract-summary-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .summary-item-wide{
        grid-column:span 2;
    }

    .deadlines-filters-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 1100px){
    /* Часы уступают место поиску */
    .local-clock-date{
        display:none;
    }
}

@media (max-width: 1000px){
    .app-bar-main .app-bar-inner{
        flex-wrap:wrap;
    }

    .top-nav-search{
        order:3;
        max-width:none;
        min-width:100%;
    }
}

@media (max-width: 700px){
    /* Меню на узких экранах переносится — липкий заголовок
       таблицы отключаем, иначе он занимает пол-экрана */
    :root{
        --nav-h:0px;
    }

    .container{
        padding:var(--s-3);
    }

    /* На узком экране шапка не перекрывает содержимое страницы. */
    .app-bar{
        position:static;
    }

    .app-bar-inner{
        padding:0 var(--s-3);
        flex-wrap:wrap;
    }

    .local-clock{
        display:none;
    }

    .brand{
        order:1;
    }

    .app-bar-right{
        order:2;
    }

    .top-nav-search{
        order:3;
    }

    .nav-filters{
        order:4;
        width:100%;
    }

    .nav-filters-btn{
        width:100%;
        justify-content:center;
    }

    .app-bar-nav .app-bar-inner{
        display:block;
        padding-top:var(--s-1);
        padding-bottom:var(--s-1);
    }

    .mobile-nav-toggle{
        width:100%;
        min-height:40px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:var(--s-2);
        padding:7px 11px;
        color:var(--c-on-dark);
        background:transparent;
        border:1px solid rgba(255,255,255,0.28);
        border-radius:var(--r-md);
        font:600 var(--fs-md)/1.35 inherit;
        cursor:pointer;
    }

    .mobile-nav-toggle[aria-expanded="true"]{
        background:rgba(255,255,255,0.16);
    }

    .mobile-nav-toggle-icon{
        font-size:17px;
        line-height:1;
    }

    .top-nav-links{
        display:none;
        padding:var(--s-2) 0 var(--s-1);
    }

    .top-nav-links.mobile-open{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:var(--s-1);
    }

    .top-nav-links > a,
    .top-nav-links .nav-more-btn{
        display:block;
        width:100%;
        box-sizing:border-box;
        text-align:left;
        min-height:40px;
    }

    .nav-more-panel{
        position:static;
        width:auto;
        min-width:0;
        margin-top:var(--s-1);
        box-shadow:none;
    }

    .nav-action,
    .nav-action .btn{
        display:block;
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

    .nav-action{
        margin-left:0;
    }

    .dashboard-cards{
        grid-template-columns:1fr;
    }

    .filters-grid,
    .admin-log-filters,
    .deadlines-filters-grid,
    .reports-filters-grid{
        grid-template-columns:1fr;
    }

    .form-group-wide{
        grid-column:span 1;
    }

    .columns-grid{
        grid-template-columns:1fr;
    }

    .contract-summary-grid{
        grid-template-columns:1fr;
    }

    .summary-item-wide{
        grid-column:span 1;
    }

    .filters-actions{
        flex-direction:column;
    }

    .filters-actions .btn{
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }

    .card-actions-wrap{
        flex-direction:column;
    }

    .card-actions-wrap .btn{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }
}

@media (max-width: 520px){
    .brand-name{
        font-size:var(--fs-md);
        white-space:normal;
    }

    .top-nav-user-text{
        display:none;
    }

    .app-bar-right,
    .top-nav-user{
        min-width:0;
    }

    .top-nav-user-link{
        display:block;
        max-width:130px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}