
.products-table-wrapper { overflow-x: hidden; }
.products-table { min-width: 0; table-layout: fixed; }
.products-table th, .products-table td { white-space: normal; }

.profile-content { max-width: 1750px; }
.profile-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.profile-header h1 { margin-bottom:6px; font-size:29px; letter-spacing:-.7px; }
.profile-header p { color:var(--muted); font-size:12px; }

.profile-statistics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:18px; }
.profile-stat-card { min-height:112px; display:flex; align-items:center; gap:15px; padding:19px; background:#fff; border:1px solid var(--border); border-radius:17px; box-shadow:0 9px 28px rgba(38,34,77,.04); }
.profile-stat-icon { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:12px; }
.profile-stat-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.profile-stat-icon.purple { color:#7158ff; background:#f0edff; }
.profile-stat-icon.green { color:#25a873; background:#eaf8f2; }
.profile-stat-icon.blue { color:#5570f1; background:#eef1ff; }
.profile-stat-icon.orange { color:#e58a28; background:#fff3e5; }
.profile-stat-card p { margin-bottom:5px; color:var(--muted); font-size:10px; }
.profile-stat-card strong { display:block; margin-bottom:5px; color:var(--text); font-size:19px; }
.profile-stat-card span { color:#9a9daf; font-size:10px; }

.profile-main-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.85fr); gap:18px; margin-bottom:18px; }
.profile-bottom-grid { display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:18px; }
.profile-panel { min-width:0; padding:20px; background:#fff; border:1px solid var(--border); border-radius:17px; box-shadow:0 9px 28px rgba(38,34,77,.04); }
.profile-panel-header { margin-bottom:18px; }
.profile-panel-header h2 { margin-bottom:4px; font-size:14px; }
.profile-panel-header p { color:var(--muted); font-size:10px; }

.profile-chart-wrap { position:relative; width:100%; height:330px; }
#profile-revenue-chart { width:100%; height:100%; display:block; }
.profile-chart-empty { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--muted); text-align:center; }
.profile-chart-empty.visible { display:flex; }
.profile-chart-empty strong { color:var(--text); font-size:15px; }
.profile-chart-empty span { font-size:11px; }

.profile-ranking-row { min-height:57px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; border-bottom:1px solid #f0f0f5; }
.profile-ranking-row:last-child { border-bottom:none; }
.ranking-number { width:23px; height:23px; display:flex; align-items:center; justify-content:center; color:#7158ff; background:#f0edff; border-radius:7px; font-size:10px; font-weight:700; }
.profile-ranking-row:nth-child(2) .ranking-number { color:#6f7487; background:#f0f1f5; }
.profile-ranking-row:nth-child(3) .ranking-number { color:#d98228; background:#fff1df; }
.ranking-information { min-width:0; }
.ranking-information strong,.ranking-information span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranking-information strong { margin-bottom:4px; color:#35394d; font-size:11px; }
.ranking-information span,.ranking-values span { color:var(--muted); font-size:9px; }
.ranking-values { text-align:right; }
.ranking-values strong { display:block; margin-bottom:4px; color:#484c60; font-size:10px; }

.category-bars { display:flex; flex-direction:column; gap:16px; }
.category-bar-row { display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:7px 12px; align-items:center; }
.category-bar-label { grid-column:1/-1; display:flex; justify-content:space-between; gap:12px; }
.category-bar-label strong { color:#414559; font-size:10px; }
.category-bar-label span,.category-bar-row small { color:var(--muted); font-size:9px; }
.category-bar-track { height:8px; overflow:hidden; background:#f0eff7; border-radius:999px; }
.category-bar-track span { height:100%; display:block; background:linear-gradient(90deg,#9a86ff,#7158ff); border-radius:inherit; }
.category-bar-row small { text-align:right; }

.general-information-list p { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid #f0f0f5; }
.general-information-list p:last-child { border-bottom:none; }
.general-information-list span { color:var(--muted); font-size:10px; }
.general-information-list strong { color:#3c4054; font-size:10px; text-align:right; }

.profile-empty-state { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--muted); text-align:center; }
.profile-empty-state strong { color:var(--text); font-size:13px; }
.profile-empty-state span { font-size:10px; }

@media (max-width:1250px) {
    .profile-statistics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .profile-bottom-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .general-information-panel { grid-column:1/-1; }
}
@media (max-width:900px) {
    .profile-main-grid,.profile-bottom-grid { grid-template-columns:1fr; }
    .general-information-panel { grid-column:auto; }
    .profile-header { align-items:flex-start; flex-direction:column; }
    .profile-filters { width:100%; }
    .profile-filters select { flex:1; min-width:0; }
}
@media (max-width:620px) {
    .profile-statistics-grid { grid-template-columns:1fr; }
    .profile-filters { flex-direction:column; }
    .profile-chart-wrap { height:280px; }
}


/* ================= Красивые фильтры профиля ================= */

.profile-filters {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-filter-control {
    position: relative;
    min-width: 205px;
    min-height: 58px;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;

    padding: 8px 12px;

    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #ebe8ff, #f4f3fa) border-box;
    border: 1px solid transparent;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(41, 35, 83, 0.055);

    cursor: pointer;
    transition: 0.2s ease;
}

.profile-filter-control:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(41, 35, 83, 0.09);
}

.profile-filter-control:focus-within {
    border-color: #bcb2ff;
    box-shadow:
        0 0 0 4px rgba(113, 88, 255, 0.08),
        0 12px 28px rgba(41, 35, 83, 0.08);
}

.profile-filter-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #7158ff;
    background: #f0edff;
    border-radius: 11px;
}

.profile-filter-icon.category {
    color: #288e69;
    background: #eaf8f2;
}

.profile-filter-icon svg,
.profile-filter-chevron {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-filter-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-filter-text small {
    color: #9a9daf;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.profile-filter-text select {
    width: 100%;
    padding: 0;

    color: #34384c;
    background: transparent;
    border: none;
    outline: none;

    font-size: 12px;
    font-weight: 650;

    appearance: none;
    cursor: pointer;
}

.profile-filter-chevron {
    color: #8e92a5;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.profile-filter-control:focus-within .profile-filter-chevron {
    color: #7158ff;
    transform: rotate(180deg);
}

/* ================= Интерактивный график ================= */

.profile-chart-wrap {
    cursor: crosshair;
}

#profile-revenue-chart {
    touch-action: pan-y;
}

.profile-chart-tooltip {
    position: absolute;
    z-index: 15;

    width: 210px;
    padding: 15px;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(45, 40, 71, 0.97), rgba(30, 27, 51, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 15px;
    box-shadow: 0 18px 42px rgba(25, 22, 45, 0.28);

    transform: translateY(5px) scale(0.98);
    transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        visibility 0.14s ease;
}

.profile-chart-tooltip.visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.profile-chart-tooltip-date {
    display: block;
    margin-bottom: 6px;

    color: rgba(255, 255, 255, 0.64);
    font-size: 9px;
    font-weight: 600;
    text-transform: capitalize;
}

.profile-chart-tooltip > strong {
    display: block;
    margin-bottom: 13px;

    color: #ffffff;
    font-size: 18px;
    letter-spacing: -0.3px;
}

.profile-chart-tooltip-details {
    min-height: 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.profile-chart-tooltip-details span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: rgba(255, 255, 255, 0.68);
    font-size: 9px;
}

.profile-chart-tooltip-details b {
    color: #ffffff;
    font-size: 9px;
    font-weight: 650;
}

.tooltip-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
}

.tooltip-dot.revenue {
    background: #9c88ff;
    box-shadow: 0 0 0 3px rgba(156, 136, 255, 0.16);
}

.tooltip-dot.quantity {
    background: #50d7a2;
    box-shadow: 0 0 0 3px rgba(80, 215, 162, 0.14);
}

@media (max-width: 900px) {
    .profile-filter-control {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .profile-filters {
        width: 100%;
        flex-direction: column;
    }

    .profile-filter-control {
        width: 100%;
    }

    .profile-chart-tooltip {
        width: 185px;
    }
}


/* ================= Полностью кастомные выпадающие списки ================= */

.profile-custom-select {
    position: relative;
    min-width: 215px;
}

.profile-custom-select-button {
    width: 100%;
    min-height: 58px;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;

    padding: 8px 12px;

    color: inherit;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #ebe8ff, #f4f3fa) border-box;
    border: 1px solid transparent;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(41, 35, 83, 0.055);

    text-align: left;
    cursor: pointer;
    transition: 0.2s ease;
}

.profile-custom-select-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(41, 35, 83, 0.09);
}

.profile-custom-select.open .profile-custom-select-button {
    border-color: #bcb2ff;
    box-shadow:
        0 0 0 4px rgba(113, 88, 255, 0.08),
        0 12px 28px rgba(41, 35, 83, 0.08);
}

.profile-custom-select .profile-filter-text strong {
    display: block;
    overflow: hidden;

    color: #34384c;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-custom-select.open .profile-filter-chevron {
    color: #7158ff;
    transform: rotate(180deg);
}

.profile-custom-select-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 200;

    width: 100%;
    min-width: 215px;
    max-height: 290px;
    overflow-y: auto;

    display: none;
    padding: 7px;

    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #ececf3;
    border-radius: 14px;
    box-shadow: 0 20px 55px rgba(35, 30, 70, 0.18);
    backdrop-filter: blur(12px);
}

.profile-custom-select.open .profile-custom-select-menu {
    display: block;
    animation: profileSelectAppear 0.17s ease;
}

@keyframes profileSelectAppear {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profile-custom-select-menu button {
    position: relative;

    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 0 34px 0 12px;

    color: #555a70;
    background: transparent;
    border: none;
    border-radius: 9px;

    font-size: 11px;
    font-weight: 550;
    text-align: left;

    cursor: pointer;
    transition: 0.16s ease;
}

.profile-custom-select-menu button:hover {
    color: #5f47ed;
    background: #f5f2ff;
}

.profile-custom-select-menu button.selected {
    color: #5f47ed;
    background: #eeeaff;
    font-weight: 650;
}

.profile-custom-select-menu button.selected::after {
    content: "✓";

    position: absolute;
    right: 12px;

    color: #7158ff;
    font-size: 13px;
    font-weight: 700;
}

.profile-custom-select-menu::-webkit-scrollbar {
    width: 6px;
}

.profile-custom-select-menu::-webkit-scrollbar-thumb {
    background: #d8d3f5;
    border-radius: 999px;
}

.profile-custom-select-menu::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 900px) {
    .profile-custom-select {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .profile-custom-select {
        width: 100%;
    }
}


/* ================= Управление категориями ================= */

.category-manager-panel {
    margin-top: 18px;
}

.category-manager-header {
    margin-bottom: 15px;
}

.category-count-badge {
    padding: 7px 10px;
    color: #654fee;
    background: #f0edff;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 700;
}

.category-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 10px;
}

.category-create-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.category-create-form label > span {
    color: #45495d;
    font-size: 10px;
    font-weight: 650;
}

.category-create-form input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;
    font-size: 11px;
    transition: 0.18s ease;
}

.category-create-form input:focus {
    border-color: #bcb2ff;
    box-shadow: 0 0 0 3px rgba(113, 88, 255, 0.08);
}

.category-create-form button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    color: #ffffff;
    background: var(--primary);
    border: none;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
    transition: 0.18s ease;
}

.category-create-form button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.category-create-form button span {
    font-size: 17px;
}

.category-manager-note {
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 9px;
}

.category-manager-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.category-manager-item {
    min-width: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 31px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fdfdff;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: 0.18s ease;
}

.category-manager-item:hover {
    background: #faf9ff;
    border-color: #ded9ff;
}

.category-manager-color {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 750;
}

.category-manager-item > div {
    min-width: 0;
}

.category-manager-item strong,
.category-manager-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-manager-item strong {
    margin-bottom: 4px;
    color: #3d4155;
    font-size: 10px;
}

.category-manager-item small {
    color: var(--muted);
    font-size: 8.5px;
}

.category-manager-delete {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc5059;
    background: #fff1f2;
    border: 1px solid #ffe0e2;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.16s ease;
}

.category-manager-delete svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.category-manager-delete:hover:not(:disabled) {
    color: #ffffff;
    background: #dc5059;
    border-color: #dc5059;
}

.category-manager-delete:disabled {
    color: #b8bac5;
    background: #f3f3f6;
    border-color: #ebebf0;
    cursor: not-allowed;
}

@media (max-width: 1250px) {
    .category-manager-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .category-manager-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .category-create-form {
        grid-template-columns: 1fr;
    }

    .category-manager-list {
        grid-template-columns: 1fr;
    }
}
