/* =============================================
   Design system CSS variables (dark palette)
   ============================================= */
:root {
    --bg:      #07091A;
    --bg1:     #0C0F22;
    --bg2:     #10142C;
    --border:  #1A1E38;
    --border2: #252A46;
    --text:    #E2E4F0;
    --muted:   #4A5070;
    --sub:     #7A82A0;
    --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:#0C0F22; border:1px solid #1A1E38; border-radius:12px;
    padding:14px 16px; position:relative; overflow:hidden;
}
.card-label {
    font-size:10px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:#4A5070; margin-bottom:8px;
}
.card-value { font-size:22px; font-weight:700; letter-spacing:-.4px; line-height:1; }
.card-sub   { font-size:11px; color:#7A82A0; 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:#10142C; 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:#0C0F22; border:1px solid #1A1E38; border-radius:12px;
    padding:14px 16px; margin-bottom:12px;
}
.sect-title {
    font-size:10px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:#4A5070; margin-bottom:12px;
}

/* Таблица */
.dtbl { width:100%; border-collapse:collapse; font-size:12px; }
.dtbl th {
    font-size:10px; color:#4A5070; text-transform:uppercase;
    letter-spacing:.06em; font-weight:600; padding:0 8px 8px 0;
    border-bottom:1px solid #1A1E38; 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 #1A1E38;
    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:#7A82A0; font-size:11px; }
.dtbl .sub-row  td:first-child { padding-left:12px; }
.dtbl .total-row td        { font-weight:700; border-top:1px solid #252A46; 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:#7A82A0; 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:#10142C; border-radius:8px; padding:10px 12px; }
.kpi4-lbl  { font-size:10px; color:#4A5070; 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 #1A1E38;
}
.proj-row:last-child { border-bottom:none; }
.proj-name { font-weight:700; font-size:13px; color:#E2E4F0; }
.stk       { height:20px; background:#10142C; 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:#7A82A0; 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 #252A46 !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:#4A5070; margin-bottom:8px; }
.val     { font-size:22px; font-weight:700; letter-spacing:-.4px; line-height:1; }
.sub-txt { font-size:11px; color:#7A82A0; margin-top:5px; }
.bar-t   { height:5px; background:#10142C; 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:#6B7290; }
.c-pk { color:#EC4899; }

/* Таблица (прototипное имя) */
.tbl { width:100%; border-collapse:collapse; font-size:12px; }
.tbl th {
    font-size:10px; color:#4A5070; text-transform:uppercase;
    letter-spacing:.06em; font-weight:600; padding:0 8px 8px 0;
    border-bottom:1px solid #1A1E38; 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 #1A1E38;
    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:#6B7290; 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:#10142C; border-radius:8px; padding:10px 12px; }
.mini-lbl  { font-size:10px; color:#4A5070; 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:#7A82A0; }
.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:#6B7290; 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:#7A82A0; }

.tbl tr.proj > td            { font-weight:700; color:#fff; }
.tbl tr.sub-row > td         { color:#7A82A0; 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; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.dc-label     { font-size:9px; color:#4A5070; 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:#4A5070; 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:#7A82A0; 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:#4A5070; 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:#10142C; border-radius:8px; padding:8px 10px; }
.inst-lbl  { font-size:9px; color:#4A5070; 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:#10142C; border:1px solid #22273D; color:#6B7290; 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:#3A3F5C; font-weight:300; }
.deep-head p  { font-size:11px; color:#3A3F5C; margin-top:2px; font-family:'DM Mono',monospace; }

/* AI-стрип */
.ai-strip {
    display:flex; gap:12px; align-items:flex-start;
    background:linear-gradient(135deg,#0F0C1F,#0D101C);
    border:1px solid #2A2040; border-radius:12px;
    padding:14px 16px; margin-bottom:12px;
}
.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:#7A82A0; }
.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; }
}