/* Pibu Admin — минималистичный mobile-first layout, единый бренд с Storefront */

:root {
    --sidebar-width: 264px;

    /* Deep navy — same as brand-primary в frontend-v1 (единый визуальный язык Pibu) */
    --sidebar-bg: #0F172A;

    /* Text — контраст ~10:1 на тёмном фоне (WCAG AAA). Легче читается, чем прошлый #b6c2d0. */
    --sidebar-fg: #CBD5E1;         /* slate-300, основной текст меню */
    --sidebar-fg-active: #FFFFFF;
    --sidebar-fg-section: #64748B; /* slate-500, section-заголовки (читаемо, не «зашумлено») */

    /* States */
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: rgba(59, 130, 246, 0.14);   /* blue-500 @ 14% */
    --sidebar-active-accent: #60A5FA;                /* blue-400 — тонкая полоска слева у активного */

    --sidebar-border: rgba(255, 255, 255, 0.08);

    --topbar-height: 60px;
    --content-bg: #F8FAFC;   /* slate-50 — очень мягкий фон, глаза не устают */
}

body.admin-body {
    background-color: var(--content-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
    /* На мобильном — колонка: top-navbar сверху (full width), main снизу.
       На десктопе (>=992px) переключаемся на row — aside sidebar слева, main справа. */
    flex-direction: column;
}

@media (min-width: 992px) {
    .admin-shell {
        flex-direction: row;
    }
}

/* ============ Sidebar ============ */

/*
  ВАЖНО: Bootstrap 5's .offcanvas-lg на >= 992px ставит
    background-color: transparent !important
  что делает наш sidebar прозрачным, показывая белый body-фон.
  Плюс он же ставит display: flex на .offcanvas-body без flex-direction
  → brand и nav ложатся ГОРИЗОНТАЛЬНО.
  Оба лечим с высокой специфичностью (селектор с двумя классами).
*/

aside.admin-sidebar.offcanvas-lg {
    background-color: var(--sidebar-bg) !important; /* побеждает Bootstrap */
    color: var(--sidebar-fg);
}

@media (min-width: 992px) {
    aside.admin-sidebar.offcanvas-lg {
        /* width + flex-shrink ТОЛЬКО на десктопе. На мобильном Bootstrap offcanvas
           делает position:fixed + transform:translateX(-100%) чтобы спрятать sidebar —
           width в flex-контейнере задвинет main-content за правый край viewport'а. */
        width: var(--sidebar-width);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        height: 100vh;
    }

    aside.admin-sidebar.offcanvas-lg .offcanvas-body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        background-color: transparent; /* прозрачный body — фон приходит от родителя */
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--sidebar-border);
    color: #fff;
    flex-shrink: 0; /* brand никогда не сжимается */
}

.sidebar-brand .brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 10px;
}

.sidebar-nav {
    padding: 0.75rem 0.75rem 1.5rem;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* никакого горизонтального скролла — гарантия */
}

/* Красивый scrollbar только на sidebar (Webkit) */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-section {
    padding: 1rem 0.9rem 0.4rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidebar-fg-section);
    font-weight: 600;
}

.sidebar-nav .nav-link {
    color: var(--sidebar-fg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    margin: 2px 0;
    font-size: 0.925rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
}

.sidebar-nav .nav-link:hover {
    background-color: var(--sidebar-hover);
    color: #fff;
    text-decoration: none;
}

.sidebar-nav .nav-link.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-fg-active);
    font-weight: 500;
}

/* Синяя полоска слева у активного пункта — «вы здесь» */
.sidebar-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--sidebar-active-accent);
    border-radius: 0 3px 3px 0;
}

.sidebar-nav .nav-link i {
    font-size: 1.05rem;
    min-width: 22px;
    text-align: center;
}

.sidebar-nav .nav-link span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--sidebar-border);
    margin-top: auto; /* footer прижимается вниз (внутри offcanvas mobile) */
    flex-shrink: 0;
}

/* ============ Main content ============ */

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    height: var(--topbar-height);
    background: #fff;
    padding: 0 1.5rem;
    border-bottom: 1px solid #E5E9EF;
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-content {
    padding: 1.25rem;
    flex: 1;
}

@media (min-width: 992px) {
    .admin-content { padding: 1.75rem; }
}

/* ============ Avatar / user chip ============ */

.avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ============ Tab-pane visibility fix ============
   Bootstrap использует прямой дочерний селектор:
     .tab-content > .tab-pane { display: none; }
   На страницах где .tab-pane обёрнут в <form> (например Products/Edit),
   селектор ломается — неактивные вкладки рендерятся block'ами и занимают место,
   создавая пустое пространство и «плавающие» кнопки внизу.
   Наш вариант — глобальный (без >) — работает независимо от вложенности. */

.tab-pane { display: none; }
.tab-pane.show.active,
.tab-pane.active.show { display: block; }

/* ============ Stat-карточки для dashboard ============ */

.stat-card {
    background: #fff;
    border: 1px solid #E5E9EF;
    border-radius: 0.75rem;
    padding: 1.25rem;
    height: 100%;
    transition: transform 0.15s, box-shadow 0.15s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-card .stat-label {
    color: #6C757D;
    font-size: 0.875rem;
}

/* ============ Login page ============ */

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    padding: 1rem;
}

.login-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.login-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-brand .brand-text {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
}

/* ============ Формы ============ */

.form-card {
    background: #fff;
    border: 1px solid #E5E9EF;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.form-card h5 {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #E5E9EF;
    margin-bottom: 1.25rem;
}

/* ============ Таблицы ============ */

.table-card {
    background: #fff;
    border: 1px solid #E5E9EF;
    border-radius: 0.75rem;
    overflow: hidden;
}

.table-card > .table {
    margin-bottom: 0;
}

.table-card > .table thead th {
    background-color: #F8F9FB;
    border-bottom: 2px solid #E5E9EF;
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    padding: 0.85rem 1rem;
}

.table-card > .table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
}

/* ============ Badges для статусов заказов ============ */

.badge-status { padding: 0.4em 0.7em; font-size: 0.75em; font-weight: 500; }
.badge-status.awaiting { background-color: #FFF3CD; color: #664D03; }
.badge-status.confirmed { background-color: #CFF4FC; color: #055160; }
.badge-status.processing { background-color: #D1E7DD; color: #0F5132; }
.badge-status.completed { background-color: #D4EDDA; color: #155724; }
.badge-status.cancelled { background-color: #F8D7DA; color: #58151C; }
.badge-status.review { background-color: #FCE8E6; color: #A71D2A; }