/* ===========================================================================
   Базовое
   =========================================================================== */
[x-cloak] { display: none !important; }

html, body {
    height: 100%;
}

body {
    background-color: #f5f6f8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===========================================================================
   Дашборд-каркас: фиксированный сайдбар слева + контент справа
   =========================================================================== */
:root {
    --sidebar-width: 260px;
    --sidebar-bg: #1f2533;
    --sidebar-bg-hover: #2a3142;
    --sidebar-bg-active: rgba(251, 161, 0, 0.12);
    --sidebar-text: #c4c9d4;
    --sidebar-text-muted: #9ca3b4;
    --sidebar-border: rgba(255, 255, 255, 0.06);
}

/* Контейнер контента — отступ слева под фикс-сайдбар */
.app-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
}

/* Мобильный топбар (гамбургер) — показывается только на узких экранах */
.app-topbar {
    display: none;
    background: #fff;
    border-bottom: 1px solid #e6e8ee;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-topbar-brand {
    font-weight: 600;
    color: #1f2533;
    text-decoration: none;
}

.app-topbar-brand-accent { color: var(--wolf-orange); }

/* ===========================================================================
   Sidebar
   =========================================================================== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    z-index: 200;
    overflow-y: auto;
}

.sidebar-inner { min-height: 100%; }

.sidebar-brand {
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.sidebar-brand-accent { color: var(--wolf-orange); }

.sidebar-nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.15rem;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-link i {
    width: 1.25rem;
    font-size: 1rem;
    color: var(--sidebar-text-muted);
    transition: color 0.15s;
}

.sidebar-link:hover {
    background: var(--sidebar-bg-hover);
    color: #fff;
}

.sidebar-link:hover i { color: var(--wolf-orange); }

.sidebar-link.active {
    background: var(--sidebar-bg-active);
    color: #fff;
    position: relative;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 3px;
    background: var(--wolf-orange);
    border-radius: 3px;
}

.sidebar-link.active i { color: var(--wolf-orange); }

.sidebar-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 0.75rem 0.5rem;
}

.sidebar-user {
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-user-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.sidebar-user-company {
    color: var(--sidebar-text-muted) !important;
}

/* Пошук у сайдбарі */
.sidebar-search-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 2rem;
    padding-left: 2.2rem;
}
.sidebar-search-input::placeholder { color: var(--sidebar-text-muted); }
.sidebar-search-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--wolf-orange);
    box-shadow: none;
    color: #fff;
}
.sidebar-search {
    position: relative;
}
.sidebar-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sidebar-text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

/* ===========================================================================
   Offcanvas (мобильный сайдбар)
   =========================================================================== */
#sidebarOffcanvas {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    width: var(--sidebar-width) !important;
}

#sidebarOffcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ===========================================================================
   Контейнер основной зоны контента
   =========================================================================== */
.page-container {
    padding: 1.5rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2533;
    margin-bottom: 1.5rem;
}

/* ===========================================================================
   Адаптив: < 992px — скрываем фикс-сайдбар, показываем топбар
   =========================================================================== */
@media (max-width: 991.98px) {
    .sidebar { display: none; }
    .app-content { margin-left: 0; }
    .app-topbar { display: flex; align-items: center; justify-content: space-between; }
    .page-container { padding: 1rem; }
}

/* ===========================================================================
   Список заказов: группы и карточки
   =========================================================================== */
.orders-group {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.orders-group-head {
    background: #2a3142;
    color: #fff;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.orders-group-body {
    padding: 0;
}

/* Карточка одного заказа в группе */
.order-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #eef0f4;
}

.orders-group-body .order-card:first-child {
    border-top: none;
}

.order-card:hover {
    background: #fafbfd;
}

.order-card-preview {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 0.35rem;
    overflow: hidden;
    background: #f0f2f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-card-preview-empty {
    color: #c5cad4;
    font-size: 1.5rem;
}

.order-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.order-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.order-number {
    font-weight: 600;
    color: #1f2533;
}

.order-card-desc {
    color: #3c4254;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-card-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: #6b7280;
    font-size: 0.85rem;
}

.order-card-meta i {
    margin-right: 0.25rem;
}

.order-card-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .order-card {
        flex-wrap: wrap;
    }
    .order-card-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
    }
    .order-card-desc {
        white-space: normal;
    }
}

/* ===========================================================================
   Stat-карточки (сверка, мои счета)
   =========================================================================== */
.stat-card {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.stat-card-icon.bg-orange {
    background: rgba(251, 161, 0, 0.12);
    color: var(--wolf-orange);
}
.stat-card-icon.bg-blue {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}
.stat-card-icon.bg-green {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}
.stat-card-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.stat-card-value {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1f2533;
    font-variant-numeric: tabular-nums;
}

/* Данные сверки — таблица */
.revise-table {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.revise-table table { margin-bottom: 0; }
.revise-table thead th {
    background: #f5f6f8;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    border-bottom: 1px solid #e6e8ee;
    position: sticky;
    top: 0;
    z-index: 1;
}
.revise-table tbody td {
    vertical-align: middle;
    font-size: 0.92rem;
}
.revise-table tbody tr:nth-child(even) td { background: #fafbfd; }
.revise-table tbody tr:hover td { background: #fff7e6; }
.revise-table .money {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
    color: #1f2533;
}
.revise-table .order-id {
    font-weight: 600;
    color: var(--wolf-orange);
}
.bill-type-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.bill-type-badge.ooo { background: rgba(13, 110, 253, 0.1); color: #0d6efd; }
.bill-type-badge.fop { background: rgba(108, 117, 125, 0.12); color: #6c757d; }

/* Статусы счетов */
.bill-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.bill-status-new       { background: rgba(108, 117, 125, 0.12); color: #6c757d; }
.bill-status-confirmed { background: rgba(13, 110, 253, 0.1);  color: #0d6efd; }
.bill-status-pending   { background: rgba(255, 193, 7, 0.15);  color: #b58100; }
.bill-status-partial   { background: rgba(251, 161, 0, 0.12);  color: var(--wolf-orange); }
.bill-status-paid      { background: rgba(25, 135, 84, 0.12);  color: #198754; }

/* ===========================================================================
   Skeleton-loader для списков заказов
   =========================================================================== */
@keyframes skeleton-pulse {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
    background: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 50%, #eef0f4 75%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 0.35rem;
    animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.skeleton-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #eef0f4;
}
.skeleton-card:first-child { border-top: none; }
.skeleton-card .sk-preview { width: 64px; height: 64px; flex-shrink: 0; }
.skeleton-card .sk-main { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.skeleton-card .sk-line { height: 12px; }
.skeleton-card .sk-line.short { width: 30%; }
.skeleton-card .sk-line.long  { width: 75%; }
.skeleton-card .sk-line.mid   { width: 55%; }

/* ===========================================================================
   Toast-контейнер
   =========================================================================== */
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}