/* =============================================
   Design system CSS variables (dark palette)
   ============================================= */
:root {
    --bg:      #0a0a0a;
    --bg1:     #111111;
    --bg2:     #1a1a1a;
    --border:  #262626;
    --border2: #333333;
    --text:    #E2E4F0;
    --muted:   #9CA3C0;
    --sub:     #B4B9CC;
    --purple:  #A855F7;
    --purple2: #7C3AED;
    --gold:    #F59E0B;
    --green:   #10B981;
    --red:     #EF4444;
    --blue:    #3B82F6;
    --teal:    #14B8A6;
}

html, body {
    background: var(--bg) !important;
    color: var(--text);
}

/* =============================================
   Clickable rows — MudDataGrid + MudSimpleTable
   ============================================= */

/* MudDataGrid adds .mud-table-row to each <tr> */
.mud-table-row.clickable-row,
tr.clickable-row {
    cursor: pointer;
}

/* =============================================
   Clickable cards / panels
   ============================================= */

.clickable-card {
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out, transform 0.15s ease-in-out;
}

.clickable-card:hover {
    box-shadow: var(--mud-elevation-8) !important;
    transform: translateY(-2px);
}

/* =============================================
   Sales Dashboard Table
   ============================================= */
.sales-dashboard-wrap {
    overflow-x: auto;
    background: var(--bg1);
}

.sales-dashboard-table {
    width: 100%;
    min-width: 1500px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.82rem;
    color: #111;
}

.sales-dashboard-table col.col-category { width: 360px; }
.sales-dashboard-table col.col-count { width: 120px; }
.sales-dashboard-table col.col-amount { width: 170px; }
.sales-dashboard-table col.col-metric { width: 150px; }

.sales-dashboard-table th,
.sales-dashboard-table td {
    padding: 10px 12px;
    text-align: right;
    white-space: nowrap;
    border: 1px solid #ebebeb;
    vertical-align: middle;
}

.sales-dashboard-table th:first-child,
.sales-dashboard-table td:first-child {
    text-align: left;
    border-right: 5px solid #d8d8d8;
}

.sales-dashboard-table thead th {
    font-weight: 700;
}

.sales-dashboard-table .row-title th {
    background: #050505;
    color: #fff;
    text-align: center;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    padding: 18px 16px;
    border-color: #050505;
    text-transform: uppercase;
}

.sales-dashboard-table .row-title .row-title-spacer {
    color: transparent;
}

.sales-dashboard-table .row-col-groups th {
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 12px;
    color: #666;
}

.sales-dashboard-table .row-col-groups .col-category-head {
    background: #050505;
    color: #fff;
    font-size: 0.98rem;
    text-align: left;
    vertical-align: middle;
}

.sales-dashboard-table .col-sold {
    background: #f6d7d7;
}

.sales-dashboard-table .col-booked {
    background: #faefc7;
}

.sales-dashboard-table .col-available {
    background: #dbead6;
}

.sales-dashboard-table .col-meta {
    background: #f4f4f4;
    color: #222;
}

.sales-dashboard-table .row-col-subs th {
    background: #fafafa;
    color: #222;
    font-size: 0.74rem;
    font-weight: 500;
    text-align: center;
    padding: 12px 8px;
    border-bottom: 6px solid #dedede;
}

.sales-dashboard-table .row-col-subs .col-sold {
    background: #fff6f6;
}

.sales-dashboard-table .row-col-subs .col-booked {
    background: #fffaf0;
}

.sales-dashboard-table .row-col-subs .col-available {
    background: #f5fbf4;
}

.sales-dashboard-table .row-group-header td {
    background: #f3f3f3;
    color: #8d8d8d;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 10px;
}

.sales-dashboard-table .row-data td {
    background: #fff;
    font-size: 0.85rem;
}

.sales-dashboard-table .row-data td:first-child {
    font-size: 0.95rem;
}

.sales-dashboard-table .row-data:hover td {
    background: #fbfbfb;
}

.sales-dashboard-table .row-subtotal td {
    background: #050505;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 10px;
    border-color: #050505;
}

.sales-dashboard-table .row-grand-total td {
    background: #050505;
    color: #fff;
    font-weight: 700;
    font-size: 0.94rem;
    padding: 14px 10px;
    border-color: #050505;
}

@media (max-width: 900px) {
    .sales-dashboard-table {
        min-width: 1320px;
        font-size: 0.76rem;
    }

    .sales-dashboard-table col.col-category { width: 280px; }
    .sales-dashboard-table col.col-count { width: 90px; }
    .sales-dashboard-table col.col-amount { width: 145px; }
    .sales-dashboard-table col.col-metric { width: 130px; }
}

/* =============================================
   Dashboard — SalesDashboard + SalesDeepDashboard
   ============================================= */

/* Гриды */
.g5  { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:12px; }
.g2  { display:grid; grid-template-columns:1fr 1fr;       gap:10px; margin-bottom:12px; }
.g3a { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:10px; margin-bottom:12px; }
.g2a { display:grid; grid-template-columns:1.9fr 1fr;     gap:10px; margin-bottom:12px; }
.g2b { display:grid; grid-template-columns:1fr 1.5fr;     gap:10px; margin-bottom:12px; }

/* KPI-карточка */
.card {
    background: var(--dash-glass-bg, rgba(255, 255, 255, 0.07));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--dash-glass-border, rgba(255, 255, 255, 0.16));
    border-radius: 18px;
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--dash-glass-shadow, 0 10px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14));
}
.card-label {
    font-size:10px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.card-value { font-size:22px; font-weight:700; letter-spacing:-.4px; line-height:1; }
.card-sub   { font-size:11px; color:var(--sub); margin-top:5px; }
.gspot {
    position:absolute; border-radius:50%; pointer-events:none;
    opacity:.12; width:100px; height:100px; right:-20px; top:-20px; filter:blur(30px);
}

/* Акценты и цвета */
.acc-purple { border-left:3px solid #A855F7; }
.acc-gold   { border-left:3px solid #F59E0B; }
.acc-green  { border-left:3px solid #10B981; }
.acc-red    { border-left:3px solid #EF4444; }
.cv-purple  { color:#A855F7; }
.cv-gold    { color:#F59E0B; }
.cv-green   { color:#10B981; }
.cv-red     { color:#EF4444; }

/* Мини-прогресс-бары */
.bar-track { height:5px; background:var(--bg2); border-radius:3px; overflow:hidden; margin-top:8px; }
.bar-fill  { height:100%; border-radius:3px; transition:width .4s ease; }
.bp { background:linear-gradient(90deg,#7C3AED,#A855F7,#C026D3); }
.bg { background:linear-gradient(90deg,#059669,#10B981); }
.bo { background:linear-gradient(90deg,#D97706,#F59E0B); }
.br { background:linear-gradient(90deg,#DC2626,#EF4444); }
.gp { background:linear-gradient(90deg,#7C3AED,#A855F7,#C026D3); }
.go { background:linear-gradient(90deg,#D97706,#F59E0B); }
.gg { background:linear-gradient(90deg,#059669,#10B981); }
.gr { background:linear-gradient(90deg,#DC2626,#EF4444); }

/* Секция */
.sect {
    background: var(--dash-glass-bg, rgba(255, 255, 255, 0.07));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--dash-glass-border, rgba(255, 255, 255, 0.16));
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--dash-glass-shadow, 0 10px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14));
}
.sect-title {
    font-size:10px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}

/* Таблица */
.dtbl { width:100%; border-collapse:collapse; font-size:12px; }
.dtbl th {
    font-size:10px; color:var(--muted); text-transform:uppercase;
    letter-spacing:.06em; font-weight:600; padding:0 8px 8px 0;
    border-bottom:1px solid var(--border); text-align:right; white-space:nowrap;
}
.dtbl th:first-child  { text-align:left; padding-left:0; }
.dtbl td {
    padding:6px 8px 6px 0; border-bottom:1px solid var(--border);
    text-align:right; vertical-align:middle; font-size:12px; white-space:nowrap;
}
.dtbl td:first-child       { text-align:left; padding-left:0; }
.dtbl .proj-row td         { font-weight:700; color:#fff; }
.dtbl .sub-row  td         { color:var(--sub); font-size:11px; }
.dtbl .sub-row  td:first-child { padding-left:12px; }
.dtbl .total-row td        { font-weight:700; border-top:1px solid var(--border2); border-bottom:none; }
.dtbl tbody tr:last-child td { border-bottom:none; }
.pct-pill {
    display:inline-block; font-size:10px; font-weight:700;
    font-family:'DM Mono',monospace; padding:2px 6px;
    border-radius:4px; background:rgba(255,255,255,.05);
}

/* Типы юнитов */
.utype-row  { margin-bottom:10px; }
.utype-head { display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
.utype-name { color:#E2E4F0; font-weight:500; }
.utype-stat { color:var(--sub); font-family:'DM Mono',monospace; font-size:11px; }

/* KPI-тайлы рассрочки */
.kpi4      { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:8px 0 14px; }
.kpi4-item { background:var(--bg2); border-radius:8px; padding:10px 12px; }
.kpi4-lbl  { font-size:10px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
.kpi4-val  { font-size:18px; font-weight:700; }

/* Строки прогресса проектов */
.proj-row {
    display:grid; grid-template-columns:100px 1fr 120px 54px;
    gap:10px; align-items:center; padding:9px 0;
    border-bottom:1px solid var(--border);
}
.proj-row:last-child { border-bottom:none; }
.proj-name { font-weight:700; font-size:13px; color:#E2E4F0; }
.stk       { height:20px; background:var(--bg2); border-radius:4px; overflow:hidden; }
.stk-seg   {
    height:100%; display:flex; align-items:center; padding-left:6px;
    font-size:10px; color:rgba(255,255,255,.9); font-weight:700;
    white-space:nowrap; overflow:hidden; border-radius:4px; transition:width .4s;
}
.proj-stat { font-family:'DM Mono',monospace; font-size:11px; color:var(--sub); text-align:right; }
.proj-pct  {
    font-size:11px; font-weight:700; padding:3px 7px;
    border-radius:20px; text-align:center; font-family:'DM Mono',monospace;
}
.total-bar-row { border-top:1px solid var(--border2) !important; margin-top:4px; padding-top:4px; }

/* Строки рассрочки по проектам */
.inst-proj-row  { margin-bottom:9px; }
.inst-proj-head { display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }

/* Alias-классы прototипа */
.lbl     { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.val     { font-size:22px; font-weight:700; letter-spacing:-.4px; line-height:1; }
.sub-txt { font-size:11px; color:var(--sub); margin-top:5px; }
.bar-t   { height:5px; background:var(--bg2); border-radius:3px; overflow:hidden; margin-top:8px; }
.bar-f   { height:100%; border-radius:3px; transition:width .4s ease; }

/* Акценты (прototипные имена) */
.acc-p  { border-left:3px solid #A855F7; }
.acc-go { border-left:3px solid #F59E0B; }
.acc-g  { border-left:3px solid #10B981; }
.acc-r  { border-left:3px solid #EF4444; }

/* Утилиты цветов */
.c-p  { color:#A855F7; }
.c-g  { color:#10B981; }
.c-r  { color:#EF4444; }
.c-go { color:#F59E0B; }
.c-b  { color:#3B82F6; }
.c-s  { color:#A0A6BE; }
.c-pk { color:#EC4899; }

/* Таблица (прototипное имя) */
.tbl { width:100%; border-collapse:collapse; font-size:12px; }
.tbl th {
    font-size:10px; color:var(--muted); text-transform:uppercase;
    letter-spacing:.06em; font-weight:600; padding:0 8px 8px 0;
    border-bottom:1px solid var(--border); text-align:right; white-space:nowrap;
}
.tbl th:first-child { text-align:left; padding-left:0; }
.tbl td {
    padding:6px 8px 6px 0; border-bottom:1px solid var(--border);
    text-align:right; vertical-align:middle; font-size:12px; white-space:nowrap;
}
.tbl td:first-child { text-align:left; padding-left:0; }
.tbl tbody tr:last-child td { border-bottom:none; }
.pn { font-weight:700; color:#fff; font-size:12px; }
.sn { color:#A0A6BE; font-size:11px; }

/* Pill-бейдж */
.pill {
    display:inline-block; font-size:10px; font-weight:700;
    font-family:'DM Mono',monospace; padding:2px 6px;
    border-radius:4px; background:rgba(255,255,255,.05);
}

/* Mini-тайлы */
.mini4     { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; }
.mini-tile { background:var(--bg2); border-radius:8px; padding:10px 12px; }
.mini-lbl  { font-size:10px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
.mini-val  { font-size:16px; font-weight:700; }

/* Легенда чарта */
.dleg     { display:flex; gap:12px; font-size:11px; color:var(--sub); }
.dleg-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }

/* Легенда чарта (прототипные имена 1:1) */
.leg      { display:flex; gap:10px; font-size:10px; color:#A0A6BE; flex-wrap:wrap; }
.leg span { display:flex; align-items:center; gap:5px; }
.leg-dot  { width:8px; height:8px; border-radius:2px; flex-shrink:0; display:inline-block; }

/* Доп. градиент (розовый) */
.gpk { background:linear-gradient(90deg,#BE185D,#EC4899); }

/* Контейнеры графиков */
.chart-wrap    { position:relative; width:100%; height:190px; }
.chart-wrap-lg { position:relative; width:100%; height:250px; }
.chart-wrap-sm { position:relative; width:100%; height:145px; }

/* ─── Дашборд "Продажи" (v4): donut, вертикальная легенда, рассрочка ─── */
.cv-sub { color:var(--sub); }

.tbl tr.proj > td            { font-weight:700; color:#fff; }
.tbl tr.sub-row > td         { color:var(--sub); font-size:11px; }
.tbl tr.sub-row > td:first-child { padding-left:12px; }

.donut-inner  { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:12px; padding-top:6px; }
.donut-box    { position:relative; overflow:hidden; }
.donut-box canvas { position:relative; z-index:1; display:block; }
.donut-center { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.dc-label     { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.dc-val       { font-size:16px; font-weight:700; letter-spacing:-.3px; margin-top:3px; }
.dc-sub       { font-size:9px; color:var(--muted); margin-top:2px; }

.leg-col   { display:flex; flex-direction:column; gap:7px; width:100%; }
.leg-item  { display:flex; align-items:center; gap:8px; font-size:11px; }
.leg-item .leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.leg-name  { color:var(--sub); flex:1; }
.leg-val   { font-family:'DM Mono',monospace; font-size:11px; color:#E2E4F0; font-weight:500; }
.leg-pct   { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); min-width:30px; text-align:right; }

.inst-kpi  { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:10px 0 12px; }
.inst-tile { background:var(--bg2); border-radius:8px; padding:8px 10px; }
.inst-lbl  { font-size:9px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.inst-val  { font-size:15px; font-weight:700; margin-top:3px; }

/* Чипы периода в шапке */
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip  { font-size:11px; font-weight:500; padding:5px 10px; border-radius:20px; background:var(--bg2); border:1px solid #2e2e2e; color:#A0A6BE; cursor:pointer; white-space:nowrap; }
.chip.on { background:#7C3AED; border-color:#A855F7; color:#fff; }

/* Заголовок дашборда */
.deep-head    { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.deep-head h1 { font-size:18px; font-weight:700; color:#fff; letter-spacing:-.3px; }
.deep-head h1 span { color:#949AB5; font-weight:300; }
.deep-head p  { font-size:11px; color:#949AB5; margin-top:2px; font-family:'DM Mono',monospace; }

/* AI-стрип */
.ai-strip {
    display:flex; gap:12px; align-items:flex-start;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding:14px 16px; margin-bottom:12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.ai-icon {
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#7C3AED,#A855F7);
    display:flex; align-items:center; justify-content:center; font-size:13px;
}
.ai-text   { font-size:12px; line-height:1.65; color:var(--sub); }
.ai-text b { color:#E2E4F0; font-weight:600; }

/* Responsive */
@media (max-width:900px) {
    .g5   { grid-template-columns:1fr 1fr; }
    .g3a  { grid-template-columns:1fr; }
    .g2a  { grid-template-columns:1fr; }
    .g2b  { grid-template-columns:1fr; }
    .kpi4 { grid-template-columns:1fr 1fr; }
    .mini4 { grid-template-columns:1fr 1fr; }
    .proj-row { grid-template-columns:80px 1fr 90px 44px; }
}
@media (max-width:600px) {
    .g5   { grid-template-columns:1fr; }
    .g2   { grid-template-columns:1fr; }
    .g2b  { grid-template-columns:1fr; }
    .kpi4 { grid-template-columns:1fr 1fr; }
    .mini4 { grid-template-columns:1fr 1fr; }
    .proj-row { grid-template-columns:70px 1fr 80px; }
}

/* ── Иерархические таблицы юнитов (проекты, рассрочки) ── */
.pu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.pu-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-table-lines) 60%, transparent);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pu-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-table-lines) 65%, transparent);
    transition: background 0.12s ease;
}

.pu-group.pu-level-0 {
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, #fff);
    font-size: 0.9375rem;
}

.pu-group.pu-level-1 {
    background: color-mix(in srgb, var(--mud-palette-surface) 93%, #fff);
}

.pu-group.pu-level-2 {
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, #fff);
}

.pu-row {
    cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-table-lines) 50%, transparent);
    font-size: 0.875rem;
    background: var(--mud-palette-surface);
    transition: background 0.12s ease;
}

.pu-row.pu-row-alt {
    background: color-mix(in srgb, var(--mud-palette-surface) 98%, #fff);
}

.pu-group:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-surface)) !important;
}

.pu-row:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface)) !important;
}

.pu-chev {
    display: inline-block;
    font-size: 10px;
    width: 16px;
    flex-shrink: 0;
    transition: transform 0.15s;
    color: var(--mud-palette-text-primary);
}

.pu-chev.open {
    transform: rotate(90deg);
}

.pu-act {
    display: flex;
    justify-content: center;
}

/* Нейтральная подсветка строк MudTable / MudDataGrid (без фиолетового оттенка) */
.mud-table-root .mud-table-body .mud-table-row:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface)) !important;
}

.mud-table-root .mud-table-body .mud-table-row.mud-selected-item {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-surface)) !important;
}

/* Мягкое чередование строк для Striped="true" (MudTable/MudSimpleTable) — по умолчанию у MudBlazor
   слишком контрастная полоса, из-за чего переход между строками выглядит резко/"полосато".
   Держим ту же тональность, что и в pu-row-alt/pu-group. */
.mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd),
.mud-simple-table.mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd) {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 96%, #fff) !important;
    transition: background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .mud-table-hover.mud-table-striped .mud-table-container table tbody tr:nth-of-type(odd):hover {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface)) !important;
    }
}