/* ===========================
   THEME
   =========================== */
:root{
    --bg-card:#ffffff;
    --bg-soft:#f8fafc;
    --border:rgba(148,163,184,.35);

    --accent: rgba(6, 13, 228, 0.71);         /* indigo */
    --accent-2: #2b0767;       /* purple */
    --accent-soft:rgba(99,102,241,.15);

    --text:#0f172a;           /* slate-900 */
    --muted:#64748b;          /* slate-500 */
    --danger:#fb7185;

    --radius:14px;
    --shadow:0 18px 45px rgba(15,23,42,.22);

    --font-main:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%;
    margin: 0;}

body{
    min-height: 100vh;
    font-family:var(--font-main);
    color:var(--text);
    background:linear-gradient(120deg,#ffffff 0%, rgba(76, 29, 149, 0.58) 45%, rgba(29, 50, 244, 0.62) 100%);
    background-attachment: fixed;
}

/* ===========================
   TYPOGRAPHY / CONTAINERS
   =========================== */
.wrap{
    max-width:2000px;
    margin:16px auto;
    padding:0 16px;
}

.page-title{
    font-size:22px;
    font-weight:700;
    margin:4px 0 14px;
}

h1,h2,h3{
    margin:0 0 12px;
    font-weight:700;
}

h1{ font-size:22px; }
h2{ font-size:18px; }

a{
    color:var(--accent);
    text-decoration:none;
}
a:hover{ text-decoration:underline; }

.info-line{
    font-size:13px;
    color:var(--muted);
    margin-bottom:8px;
}

.back-link{
    margin-bottom:12px;
    font-size:14px;
}
.back-link a{
    color:var(--accent-2);
    text-decoration:none;
}
.back-link a:hover{ text-decoration:underline; }

.back-link-dash{
    margin-bottom: 12px;
    font-size: 14px;
}
.back-link-dash a{
    color: var(--accent-2);
    text-decoration: none;
}
.back-link-dash a:hover{ text-decoration: underline; }

/* mobile: floating back button */


/*  BUTTONS*/
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:8px 14px;
    font-size:13px;
    border:1px solid transparent;
    background:#e5e7eb;
    color:#111827;
    cursor:pointer;
    white-space:nowrap;
    text-decoration:none;
}
.btn:hover{ filter:brightness(.97); }

.btn-primary{
    background:var(--accent);
    color: #000104;
}
.btn-outline{
    background:var(--accent);
    color: #000104;
}
.btn-danger{
    background:var(--danger);
    color:#fff;
}
.btn-sm{
    padding:6px 10px;
    font-size:12px;
    color: #ffffff;
}

/* ===========================
   TOPBAR + NAV (2 rows)
   =========================== */
/* 1) Topbar: logo left / title center / user+logout right */
.topbar{
    position:sticky;
    top:0;
    z-index:50;

    height:56px;
    padding:0 16px;
    margin:0;

    display:flex;
    align-items:center;

    background:#fff;
    border-bottom:1px solid rgba(148,163,184,.35);
}

/* left */
.topbar-left{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}
.logo-img{
    height:150px;             /* IMPORTANT: never huge here */
    max-height:100%;
    width:auto;
    display:block;
    object-fit:contain;
    margin:0;
    padding:0;
}
@media (max-width: 768px){
    .logo-img{
        height:75px;
        max-height:100%;
        width:auto;
        display:block;
        object-fit:contain;
    }
}
/* center title strictly centered */
.topbar-center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}
.topbar-title{
    font-size:18px;
    font-weight:700;
    color: #324c9e;
    margin:0;
    pointer-events:auto;
}

/* right user+logout */
.topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    margin-left:auto;
    font-size:14px;
}
.topbar-user-name{ color:#0b1020; }

/* 2) Navigation row under topbar */
.topbar-nav{
    position:sticky;         /* sticks under topbar */
    top:56px;
    z-index:51;              /* clickable above overlay */

    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 16px;

    background:#fff;
    border-bottom:1px solid rgba(148,163,184,.25);
    font-size:14px;

    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;

    pointer-events:auto;
}
.topbar-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#0b1020;
    text-decoration:none;
    padding:6px 12px;
    border-radius:999px;
    white-space:nowrap;
    transition:background .15s ease,color .15s ease;
}
.topbar-nav a:hover{ background:rgba(99,102,241,.12); }
.topbar-nav a.active{
    background:rgba(99,102,241,.20);
    font-weight:700;
}

/* ===========================
   FORMS (login/admin)
   =========================== */
.form-card{
    max-width:500px;
    margin:8vh auto;
    background:var(--bg-card);
    padding:24px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    color:var(--text);
}

.form-card h1{
    font-size:20px;
    margin-bottom:16px;
    color:var(--text);
}

.field{ margin:12px 0; }

.field label{
    display:block;
    margin:0 0 6px;
    font-size:14px;
    color:var(--muted);
}

.field input,
.field select,
.field textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid rgba(148,163,184,.45);
    border-radius:10px;
    font-size:16px;
    outline:none;
    background:#fff;
    color:var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:rgba(99,102,241,.75);
    box-shadow:0 0 0 3px rgba(99,102,241,.14);
}

.form-error{
    color:#b00020;
    margin:8px 0 0;
    font-size:14px;
    min-height:18px;
}

/* logo inside login card (optional) */
.form-card-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 0 14px;
}
.form-card-logo img{
    max-width:100%;
    height:auto;
    display:block;
}

/* ===========================
   GRID / CARDS
   =========================== */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:16px;
    margin:16px 0;
}

.card{
    background:var(--bg-card);
    border-radius:var(--radius);
    border:1px solid var(--border);
    padding:14px 16px;
    box-shadow:var(--shadow);
}

.card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:8px;
}

.card-title{
    font-size:15px;
    font-weight:700;
    color:var(--text);
}
.card-title a{
    color:var(--text);
    text-decoration:none;
}
.card-title a:hover{
    color:var(--accent);
    text-decoration:none;
}

.card-subtitle{
    font-size:12px;
    color:var(--muted);
    margin-top:6px;
}

.card-body{ font-size:13px; }

/* ===========================
   TAGS
   =========================== */
.tag{
    display:inline-flex;
    margin:2px;
    padding:3px 8px;
    border-radius:999px;
    background:#eef2ff;
    font-size:11px;
    color:#1e293b;
}
.tag.dept{
    background:rgba(99,102,241,.14);
    color:#3730a3;
}
.tag.perm{
    background:rgba(16,185,129,.12);
    color:#047857;
}
.tag.small{ font-size:10px; }
.description.small{ font-size:10px; }
/* ===========================
   DASH / IFRAME
   =========================== */
.dash-frame-wrapper{
    position:relative;
    width:100%;
    padding-top:56.25%;
    border-radius:var(--radius);
    background:radial-gradient(circle at top left,#6366f1 0,#8b5cf6 45%,#0b1020 100%);
    box-shadow:var(--shadow);
    overflow:hidden;
    border:1px solid rgba(99,102,241,.35);
}
.dash-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}
html, body { height: 100%; }

/* ТОЛЬКО на странице просмотра дашборда: iframe на весь экран */
body.dash-view .dash-frame-wrapper{
    position: relative;
    width: 100%;
    height: 100vh;
    padding-top: 0;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

@supports (height: 100dvh) {
    body.dash-view .dash-frame-wrapper{ height: 100dvh; }
}

body.dash-view .dash-frame{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ===========================
   LAYOUT / SIDEBAR
   =========================== */
.layout{
    display:flex;
    min-height:100vh;
    position:relative;
}

/* main content */
.main{
    flex:1;
    padding:16px 24px;
    margin-left:0;
    transition:margin-left .25s ease-out;
}

/* hamburger row under topbar/nav */
.main-toolbar{
    display:flex;
    align-items:center;
    padding:10px 16px 4px;
}

/* burger */
.menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid rgba(99,102,241,.55);
    background:rgba(99,102,241,.14);
    color:#0b1020;
    cursor:pointer;
    font-size:18px;
    line-height:1;
}

/* sidebar (hidden by default) */
/* ===========================
   SIDEBAR (scrollable)
   =========================== */

.sidebar{
    width:260px;
    background:#4c1d95;
    color:#fff;
    padding:16px 12px;
    display:flex;
    flex-direction:column;

    position:fixed;
    left:0;
    top:0;
    bottom:0;

    transform:translateX(-100%);
    transition:transform .25s ease-out;
    box-shadow:24px 0 60px rgba(76,29,149,.55);
    z-index:60; /* above topbar when opened */
}

body.sidebar-open .sidebar{ transform:translateX(0); }

/* overlay (below topbar) */
.sidebar-overlay{
    position:fixed;
    top:56px;              /* below topbar */
    left:0;
    right:0;
    bottom:0;
    background:rgba(15,23,42,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease-out;
    z-index:40;
}
body.sidebar-open .sidebar-overlay{
    opacity:1;
    pointer-events:auto;
}

/* header/user/footer don't scroll */
.sidebar-header,
.sidebar-user,
.sidebar-footer{
    flex: 0 0 auto;
}

.sidebar-header{
    font-size:18px;
    font-weight:800;
    margin-bottom:12px;
    padding:0 8px;
}
.sidebar-user{
    font-size:14px;
    color:rgba(255,255,255,.85);
    margin-bottom:14px;
    padding:0 8px;
}
.sidebar-footer{
    font-size:12px;
    color:rgba(255,255,255,.7);
    padding:10px 8px 0;
    border-top:1px solid rgba(255,255,255,.18);
    margin-top:8px;
}

/* this area scrolls */
.sidebar-scroll{
    flex: 1 1 auto;
    min-height: 0;              /* важно для корректного overflow в flex */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: auto;
    padding-right: 4px;         /* чтобы текст не прятался под скроллом */
}

/* optional: красивый скролл */
.sidebar-scroll::-webkit-scrollbar{ width: 8px; }
.sidebar-scroll::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.22);
    border-radius: 999px;
}
.sidebar-scroll::-webkit-scrollbar-track{
    background: rgba(255,255,255,.06);
}

/* ===========================
   SIDEBAR NAV + ACCORDION
   =========================== */

.nav{
    list-style:none;
    margin:0;
    padding:0;
}

.nav a{
    display:flex;

    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
}
.nav a:hover{ background:rgba(255,255,255,.08); }
.nav a.active{ background:rgba(99,102,241,.85); color:#fff; }

.nav-section{ margin-bottom:6px; }

.nav-section-header{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    border-radius:10px;
    background:transparent;
    border:0;
    color:#fff;
    font-size:15px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
}
.nav-section-header:hover{ background:rgba(255,255,255,.08); }

.nav-section-arrow{
    font-size:12px;
    transition:transform .2s ease-out;
}

.nav-section-list{
    list-style:none;
    margin:6px 0 6px 10px;
    padding:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .2s ease-out;
}

.nav-section-list a{
    font-size:14px;
    padding:6px 10px;
    opacity:.95;
}

.nav-section.open .nav-section-list{ max-height:fit-content; }
.nav-section.open .nav-section-arrow{ transform:rotate(180deg); }

/* push main on large screens when sidebar open (optional) */
@media (min-width:1024px){
    body.sidebar-open .main{ margin-left:260px; }

}


/* ===========================
   SEARCH BAR
   =========================== */
.search-bar{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:2000px;
    padding:8px 12px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(99,102,241,.35);
    box-shadow:0 10px 25px rgba(15,23,42,.08);
}

.search-icon{
    font-size:14px;
    opacity:.75;
}

.search-input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font-size:14px;
    color:var(--text);
    padding:4px 2px;
}
.search-input::placeholder{
    color:var(--muted);
    opacity:.85;
}
.search-bar:focus-within{
    border-color:rgba(99,102,241,.75);
    box-shadow:0 0 0 3px rgba(99,102,241,.14);
}

/* ===========================
   FAVORITES BUTTON
   =========================== */
.fav-btn{
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:25px;
    line-height:1;
    color:#94a3b8;
    padding:6px;
    border-radius:999px;
    transition:transform .08s ease, color .15s ease, background .15s ease;
}
.fav-btn:hover{
    color:var(--accent);
    background:rgba(99,102,241,.10);
}
.fav-btn:active{ transform:scale(.96); }
.fav-btn.fav-btn--active{
    color:var(--accent-2);
    background:rgba(139,92,246,.10);
}
@media screen and (max-width:1024px){
    .fav-btn{
        padding:16px 12px;
        font-size:25px;
    }
}
/* ===========================
   TABLES (admin)
   =========================== */
.table-wrap{
    margin-top:8px;
    border-radius:12px;
    border:1px solid var(--border);
    overflow:hidden;
    background:#fff;
}

table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
thead{ background:#f1f5f9; }
th,td{
    padding:10px 12px;
    text-align:center;
    border-bottom:1px solid rgba(148,163,184,.25);
}
th{
    font-weight:700;
    font-size:12px;
    color:#475569;
    text-align:center;

}
tr:last-child td{ border-bottom:none; }

/* ===========================
   RESPONSIVE
   =========================== */
/* ===== Высоты верхних панелей (по умолчанию) ===== */
:root{
    --topbar-h: 56px;     /* .topbar */
    --nav-h: 44px;        /* .topbar-nav */
    --toolbar-h: 44px;    /* .main-toolbar (кнопка бокового меню) */
    --frame-gap: 12px;    /* отступы/зазоры */
}

@media (max-width: 420px){
    :root{
        --topbar-h: 52px;
        --nav-h: 44px;      /* если nav реально выше/ниже — поправьте */
        --toolbar-h: 44px;
    }
}

.dash-frame-wrapper{
    padding-top: 0 !important;

    height: calc(100dvh - (var(--topbar-h) + var(--nav-h) + var(--toolbar-h) + var(--frame-gap)));

    height: calc(100vh - (var(--topbar-h) + var(--nav-h) + var(--toolbar-h) + var(--frame-gap)));

    border-radius: 14px;
    overflow: hidden;
}

.dash-frame{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (min-width: 769px){
    :root{
        --toolbar-h: 44px; /* или 0px если реально отсутствует/не занимает место */
    }
}

/* ===========================
   ADMIN / MANAGEMENT LINK CARDS
   =========================== */

/* контейнер сетки */
.admin-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:16px;
    margin:16px 0;
}

/* карточка-ссылка (кликабельна целиком) */
.admin-card{
    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 16px;
    border-radius:var(--radius);
    background:var(--bg-card);
    border:1px solid var(--border);
    box-shadow:var(--shadow);

    color:var(--text);
    text-decoration:none;

    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.admin-card:hover{
    transform:translateY(-1px);
    border-color:rgba(99,102,241,.45);
    box-shadow:0 18px 45px rgba(15,23,42,.18);
    text-decoration:none;
}

.admin-card__icon{
    width:44px;
    height:44px;
    border-radius:12px;

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

    /* было слишком “приглушено” */
    background:rgba(99,102,241,.22); /* ярче фон */
    color:rgba(99,102,241,1);        /* на всю яркость */
    font-size:18px;
    flex:0 0 auto;

    /* чтобы эмодзи/иконка не выглядели бледно */
    opacity:1;
    filter:none;
}

/* контент */
.admin-card__content{
    min-width:0;
    flex:1;
}

.admin-card__title{
    font-size:15px;
    font-weight:700;
    line-height:1.2;
    margin:0;
    color:var(--text);
}

.admin-card__desc{
    margin-top:6px;
    font-size:12px;
    color:var(--muted);
    line-height:1.35;
}

/* правая часть (бейдж/стрелка) */
.admin-card__meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.admin-chip{
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(139,92,246,.10);
    color:var(--accent-2);
    border:1px solid rgba(139,92,246,.28);
    white-space:nowrap;
}

.admin-arrow{
    font-size:16px;
    color:rgba(100,116,139,.9);
}

@media (max-width: 520px){
    .admin-card{
        padding:12px 12px;
    }
    .admin-card__icon{
        width:40px;
        height:40px;
    }
}

.form-success{
    margin:10px 0 0;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(16,185,129,.12);
    border:1px solid rgba(16,185,129,.25);
    color:#065f46;
    font-size:14px;
}
/* ===== Поля формы ===== */

/* Заголовок поля (например "Роли, которым выдать доступ") */
.field > label,
.field-label{
    display:block;
    margin:0 0 6px;
    font-size:14px;
    color:var(--text);
}

/* Обычные инпуты (ВАЖНО: исключаем checkbox/radio) */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid #dcdcdc;
    border-radius:8px;
    font-size:16px;
    background:#fff;
    color:var(--text);
}

/* ===== Чекбоксы ролей ===== */

.role-checklist{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 12px;
    border:1px solid rgba(148,163,184,.35);
    border-radius:12px;
    background:#fff;
}

/* одна строка: чекбокс + текст */
.role-item{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0;
    line-height:1.2;
}

/* Переопределяем общий стиль input, чтобы чекбокс НЕ был width:100% */
.role-item input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    padding:0 !important;
    margin:0 !important;
    border:0;
    border-radius:4px;
    background:transparent;
    display:inline-block;
    flex:0 0 auto;
    vertical-align:middle;
    accent-color: var(--accent);
}

.role-text{
    display:inline-block;
    margin:0;
    padding:0;
    vertical-align:middle;
    color:var(--text);
}

/* Подсказка под блоком */
.hint{
    margin-top:6px;
    font-size:12px;
    color:#6b7280;
}
/* ===========================
   ADMIN: Управление дашбордами
   =========================== */

.admin-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:12px 0;
}

.mini{
    font-size:12px;
    color:#6b7280;
}
.mini-m{
    font-size:12px;
    color: #090909;
}
details{
    margin-top:10px;
}

summary{
    cursor:pointer;
}

/* чек-лист ролей */
.role-checklist{
    display:grid;
    gap:8px;
    padding:10px 12px;
    border:1px solid rgba(148,163,184,.35);
    border-radius:12px;
    background:#fff;
}

.role-item{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    line-height:1.2;
}

/* важно: перебиваем глобальное .field input{width:100%...} */
.role-item input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 auto;
    accent-color: var(--accent);
}

.role-item span{
    display:inline-block;
    margin:0;
}

/* кнопки в строку */
.row-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

/* бейджи и моно-строки */
.badge{
    display:inline-flex;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(99,102,241,.12);
    font-size:12px;
}

.mono{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size:12px;
}

/* кнопка удаления */
.btn-danger-solid{
    background: var(--danger);
    color:#fff;
    border:0;
}

@media (max-width: 768px){
    .back-link-dash{
        margin: 12px 0 16px;
    }

    .back-link-dash a{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        height: 44px;
        padding: 0 14px;

        font-size: 18px;
        font-weight: 700;
        line-height: 1;

        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.22);

        background: rgba(43, 7, 103, .72); /* ближе к --accent-2 */
        color: #fff;

        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .back-link-dash a:hover{
        text-decoration: none;
    }

    .back-link-dash a:active{
        background: rgba(43, 7, 103, .86);
        transform: translateY(1px);
    }

    .back-link-dash a:focus-visible{
        outline: 3px solid rgba(99,102,241,.35);
        outline-offset: 2px;
    }
}

.calendar-page{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* ===== Верхняя панель фильтров ===== */
/* ===== Filters bar centered 80% ===== */
.filters-bar{
    position: static;
    top: calc(56px + 44px);
    z-index: 30;

    width: 80%;
    max-width: 1200px;
    margin: 0 auto 14px auto;   /* ✅ центр */

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(148,163,184,.30);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(15,23,42,.10);

    padding: 10px 12px;
}

/* строки фильтров */
.filters-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-end;
}

/* один фильтр */
.filter{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex: 1 1 220px;
    min-width: 220px;
}

.filter--sm{ flex: 0 1 140px; min-width: 140px; }
.filter--md{ flex: 1 1 220px; min-width: 220px; }
.filter--grow{ flex: 1 1 260px; min-width: 260px; }

.filter label{
    font-size:12px;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .2px;
}

.filter input,
.filter select{
    height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(148,163,184,.45);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.filter input::placeholder{ color: var(--muted); opacity: .85; }

.filter input:focus,
.filter select:focus{
    border-color: rgba(99,102,241,.75);
    box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}

/* кнопки справа */
.filter-actions{
    display:flex;
    gap:10px;
    align-items:center;
    margin-left:auto;
}

.filter-actions .btn{
    height: 40px;
    padding: 0 14px;
}

/* чипы активных фильтров */
.active-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top: 10px;
}

/* ===== Mobile ===== */
@media (max-width: 720px){
    /* ===== Mobile filters: компактная "шапка" + раскрытие ===== */
    @media (max-width: 720px){
        .filters-bar{
            width: 96%;
            margin: 0 auto;

            position: sticky;
            top: calc(56px + 44px); /* topbar + nav, подстройте если надо */
            z-index: 40;

            /* ключевое: фиксируем маленькую высоту шапки */
            padding: 10px 12px;
        }

        /* Заголовок+кнопка (новый ряд) */
        .filters-mobile-head{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .filters-mobile-title{
            font-weight: 800;
            font-size: 14px;
            margin: 0;
        }

        .filters-toggle{
            height: 38px;
            padding: 0 12px;
            border-radius: 12px;
            border: 1px solid rgba(148,163,184,.45);
            background: #fff;
            cursor: pointer;
            font-weight: 700;
        }

        /* Контейнер с полями фильтров — скрыт по умолчанию */
        .filters-mobile-body{
            display: none;
            margin-top: 10px;

            /* чтобы не вылезало и не накрывало весь экран */
            max-height: 52vh;
            overflow: auto;

            padding-right: 2px;
        }

        /* когда открыт */
        .filters-bar.is-open .filters-mobile-body{
            display: block;
        }

        /* сами строки — в колонку */
        .filters-row{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            flex-wrap: nowrap;
        }

        .filter{
            width: 100%;
            min-width: 0;
        }

        .filter--grow{
            flex: 1 1 auto;
            min-width: 0;
        }

        /* chips — в прокрутку по горизонтали, чтобы не раздували высоту */
        .active-filters{
            display: flex;
            gap: 8px;
            margin-top: 10px;
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .active-filters::-webkit-scrollbar{ height: 6px; }
    }

}


.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;

    height: 30px;
    padding: 0 10px;

    border-radius: 999px;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.25);

    color: #1e293b;
    font-size: 12px;
    white-space: nowrap;
}

.chip button{
    border:0;
    background: transparent;
    cursor: pointer;
    color: rgba(100,116,139,.95);
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.chip button:hover{ color: var(--accent); }

/* ===== MIN TABLE CSS ===== */
.table-card{
    align-content: center;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    padding:12px;
    width: 85%;
    max-width: 100%;
    margin:0 auto;
}

.table-wrap{
    overflow:auto;            /* горизонтальный скролл на узких экранах */
    border-radius:12px;
}

.table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:14px;
    line-height:1.35;
    min-width:520px;          /* чтобы заголовки не ломались */
}

.table thead th{
    position:sticky;          /* липкий заголовок */
    top:0;
    background:#f6f7fb;
    color:#111;
    text-align:center;
    font-weight:600;
    padding:12px 14px;
    border-bottom:1px solid rgba(0,0,0,.08);
    white-space:nowrap;
    z-index:1;
}

.table tbody td{
    padding:12px 14px;
    border-bottom:1px solid rgba(0,0,0,.06);
    vertical-align:top;
}

.table tbody tr:last-child td{
    border-bottom:none;
}

.table tbody tr:hover td{
    background:rgba(0,0,0,.03);
}

/* скругления у первой/последней ячейки заголовка */
.table thead th:first-child{ border-top-left-radius:12px; }
.table thead th:last-child{ border-top-right-radius:12px; }

/* “пусто” строка */
.table tbody tr td[colspan]{
    text-align:center;
    color:rgba(0,0,0,.6);
    padding:16px;
}
h3{
    max-width: 1100px;
    margin: 0 auto 12px auto;
}
.table th{
    text-align: center;
}
.table td{
    text-align: center;
}
/* немного компактнее на маленьких экранах */
@media (max-width: 720px){
    .table{ min-width:420px; font-size:13px; }
    .table thead th, .table tbody td{ padding:10px 12px; }
}

/* ===== Optional: numeric alignment ===== */
.table .num{
    text-align:right;
    font-variant-numeric: tabular-nums;
}

/* то, что вы выводите через _customContent (cnt/cost) */
.ev-meta{
    font-size: 18px;      /* увеличьте как нужно: 16/18/20/24 */
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 6px;
    border-radius: 8px;
}

/* если переносов много — пусть строки не слипнутся */
.ev-meta br { content: ""; }

/* сделать сами события чуть выше */
.sx__event {
    min-height: 42px;   /* подберите значение */
}
/* контейнер всей зоны календаря + таблиц */
/* фиксируем высоту видимой области календаря */
.calendar-layout{
    width: 80%;
    margin: 18px auto 0 auto; /* центрируем */
    height: fit-content;
}
.calendar-layout .calendar{
    height: 720px;
}

/* делаем сетку месяца на всю высоту контейнера */
.calendar-layout .sx__month-grid{
    height: 100%;
}

/* 6 недель в месяце -> 6 строк одинаковой высоты */
.calendar-layout .sx__month-grid .sx__month-grid-week{
    height: calc(100% / 6);
}

/* каждая ячейка фиксированной высоты (на всякий) */
.calendar-layout .sx__month-grid .sx__month-grid-day{
   max-height: none;
    overflow: hidden;
}

/* ✅ события могут увеличивать высоту ячейки */
.calendar-layout .sx__month-grid .sx__month-grid-day-events{
    max-height: none;
    overflow: visible;
}


.calendar-section .calendar{
    width: 100%;
}

.tables-section{
    margin-top: 26px;
    align-items: center;
    text-align:center;


}

/* =========================
   MOBILE ONLY (<= 720px)
   календарь + фильтры + таблицы
   ========================= */
@media (max-width: 720px){

    /* контейнер календарь+таблицы */
    .calendar-layout{
        width: 90%;
        margin: 12px auto 0 auto;
    }


    /* ===== Calendar ===== */
    .calendar-section .calendar{
        width: 100%;
    }

    /* события (cnt/cost) компактнее */
    .ev-meta{
        font-size: 14px;
        font-weight: 600;
        line-height: 1.15;
        padding: 2px 4px;
        border-radius: 6px;
    }

    /* немного ниже высота события */
    .sx__event{
        min-height: 34px;
    }

    /* ===== Tables ===== */
    .tables-section{
        margin-top: 18px;
    }

    .table-card{
        width: 100%;
        padding: 10px;
        margin: 0 auto;
    }

    .table{
        min-width: 0;   /* важно для мобилы */
        font-size: 12px;
    }

    .table thead th,
    .table tbody td{
        padding: 8px 10px;
    }

    /* заголовки поменьше */
    h2{ font-size: 18px; }
    h3{ font-size: 16px; }
}

@media (max-width: 420px){
    .calendar-layout,
    .filters-bar{
        width: 98%;
    }

    .filters-bar{
        max-height: 110px;
    }

    .ev-meta{
        font-size: 13px;
    }

    .table{
        font-size: 11px;
    }

    .table thead th,
    .table tbody td{
        padding: 7px 8px;
    }
}

/* ===== Modal popup ===== */
.modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 12px;
}

.modal-backdrop.is-open{ display: flex; }

.modal-window{
    width: min(1100px, 96vw);
    height: min(85vh, 900px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.95);
}

.modal-title{
    font-weight: 700;
    font-size: 14px;
    color: #111;
}

.modal-close{
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 10px;
}
.modal-close:hover{ background: rgba(0,0,0,.06); }

.modal-body{
    flex: 1 1 auto;
}

.modal-iframe{
    width: 100%;
    height: 100%;
    border: 0;
}

/* mobile */
@media (max-width: 720px){
    .modal-window{
        width: 98vw;
        height: 90vh;
        border-radius: 12px;
    }
}
/* ссылки в меню */
.sidebar .nav a.nav-link{
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}

/* активный дашборд */
.sidebar .nav a.nav-link.is-active{
    background: rgba(99,102,241,.14);
    border: 1px solid rgba(99,102,241,.35);
    color: #1e293b;
    font-weight: 700;
}
@media (max-width: 720px){

    /* общий блок-аккордеон */
    .m-acc{
        width: 96%;
        margin: 12px auto 0 auto;

        background: rgba(255,255,255,.92);
        border: 1px solid rgba(148,163,184,.30);
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(15,23,42,.10);
        overflow: hidden;
    }

    /* шапка */
    .m-acc__head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        padding: 10px 12px;
    }

    .m-acc__title{
        margin: 0;
        font-size: 14px;
        font-weight: 800;
    }

    .m-acc__btn{
        height: 36px;
        padding: 0 12px;
        border-radius: 12px;
        border: 1px solid rgba(148,163,184,.45);
        background: #fff;
        cursor: pointer;
        font-weight: 700;
        white-space: nowrap;
    }

    /* тело (таблица) */
    .m-acc__body{
        display: none;
        padding: 0 12px 12px 12px;
    }

    .m-acc.is-open .m-acc__body{
        display: block;
    }

    /* чтобы таблица не делала страницу огромной */
    .m-acc__body .table-wrap{
        max-height: 45vh;   /* важно: таблица внутри скроллится */
        overflow: auto;
        border-radius: 12px;
    }

    /* на мобиле убираем лишние внешние отступы у table-card внутри аккордеона */
    .m-acc__body .table-card{
        width: 100%;
        margin: 0;
        padding: 0;        /* чтобы не было двойной “карточки” */
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    /* делаем заголовки h3 не обязательными (если вы их оставите — будет дублирование) */
    .tables-section > h3{
        display: none;
    }
}
/* По умолчанию (десктоп) — скрываем все мобильные кнопки */
.filters-toggle-btn,
.table-toggle-btn{
    display: none !important;
}

/* На мобилке — показываем */
@media (max-width: 720px){
    .filters-toggle-btn,
    .table-toggle-btn{
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;

        height: 40px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid rgba(148,163,184,.45);
        background: #fff;
        cursor: pointer;
    }
    /* сворачиваем контент */
    .filters-bar.is-collapsed .filters-row { display: none; }

    .table-card.is-collapsed { display: none; }

}

.vmodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.vmodal--hidden { display: none; }

.vmodal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }

.vmodal__dialog {
    position: relative;
    width: min(900px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.vmodal__close {
    position: absolute; top: 10px; right: 12px;
    width: 36px; height: 36px; border-radius: 10px;
    border: 0; cursor: pointer; font-size: 24px; line-height: 36px;
    background: rgba(0,0,0,.06);
}
.vmodal-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.95);
}
.vmodal-title{
    font-weight: 700;
    font-size: 14px;
    color: #111;
}
.vmodal__content { padding: 48px 14px 14px; }

.vmodal__content video,
.vmodal__content iframe {
    width: 100%;
    height: min(70vh, 520px);
    border: 0;
    border-radius: 10px;
    background: #000;
}
.activity-filter{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;         /* теперь ровно по центру инпута */
    margin:0 0 12px 0;
}

.activity-field{
    position:relative;
    flex:0 0 260px;
    min-width:220px;
}

.activity-field label{
    position:absolute;          /* label не увеличивает высоту строки */
    top:-18px;                  /* подними/опусти по вкусу */
    left:2px;
    margin:0;
    font-size:12px;
    opacity:.75;
    font-weight:700;
}

.activity-field input{
    width:100%;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.15);
    padding:8px 12px;
}

.activity-actions{
    display:flex;
    gap:10px;
    align-items:center;
    margin-left:auto;           /* кнопки вправо */
}

/* Мобилка */
@media (max-width: 720px){
    .activity-actions{ margin-left:0; width:100%; }
    .activity-actions .btn{ width:100%; }
    .activity-field{ flex:1 1 100%; }
}

/* прозрачная кнопка-иконка (для 🎬) */
.btn-icon{
    width:36px;
    height:36px;
    padding:0;
    border-radius:10px;

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

    background:transparent;
    border:1px solid rgba(0,0,0,.14);
    color:inherit;

    cursor:pointer;
    line-height:1;
    font-size:18px;

    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.btn-icon:hover{
    background: rgba(99,102,241,.10);
    border-color: rgba(99,102,241,.35);
}

.btn-icon:active{
    background: rgba(99,102,241,.16);
    border-color: rgba(99,102,241,.55);
    transform: translateY(1px);
}

.btn-icon:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}

/* компактнее на мобилке */
@media (max-width: 720px){
    .btn-icon{ width:34px; height:34px; border-radius:9px; font-size:17px; }
}

.month-picker-form{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* содержимое по центру */
    gap: 12px;
    margin: 10px 0 0;        /* без auto, иначе не нужно */
}



.month-picker-label{
    font-size:16px;
    opacity:.85;
    font-weight:600;
}

.month-picker-input{
    height:40px;
    padding:6px 14px;
    border:1px solid #cfcfcf;
    border-radius:12px;
    background:#fff;
    font-size:16px;          /* крупнее текст */
}


/* Контейнер под таблицу */
.plan-wrap{
    overflow:auto;
    background:#fff;
    border:1px solid #d9d9d9;
    border-radius:10px;
    width:90%;
    margin: 16px auto;     /* центрирование + вертикальные отступы */
    padding: 12px;         /* внутренний отступ, чтобы таблица не прилипала к рамке */
    box-sizing: border-box;
    font-size: 16px;
}
.plan-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
}
.plan-wrap.is-xscroll{
    font-size: 11px;
}

/* чуть компактнее инпуты, чтобы выглядело ровно */
.plan-wrap.is-xscroll .plan-grid input{
    height: 28px;
    font-size: 11px;
}
/* таблица обычная, но не уже min-width */
.plan-scroll > table{
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

/* чтобы колонки не ломались */
.plan-scroll th,
.plan-scroll td{

}
@media (max-width: 768px){
    .plan-scroll{
        margin: 0 -12px;         /* “на всю ширину” экрана внутри паддингов */
        padding: 0 12px;
    }

    .plan-scroll > table{
        min-width: 640px;        /* обычно хватает, можно увеличить/уменьшить */
    }
}
.plan-grid th:first-child,
.plan-grid td:first-child,
.total-grid th:first-child,
.total-grid td:first-child{
    width:120px;
}

/* 3) обрезаем текст только в первом столбце */
.plan-grid th:first-child,
.plan-grid td:first-child,
.total-grid th:first-child,
.total-grid td:first-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* Таблица: четкая сетка */
.plan-grid{
    width:100%;
    border-collapse:collapse;   /* ВАЖНО: четкие линии */
    background:#fff;
    table-layout:fixed;         /* одинаковые колонки */
    font-size:13px;
}

/* Ячейки */
.plan-grid th,
.plan-grid td{
    text-align:center;
    border:1px solid rgba(15, 23, 42, 0.54);
}



/* Заголовки */
.plan-grid thead th{
    position:sticky;
    top:0;
    z-index:5;
    font-weight:700;
    text-align:center;
    background:#fff;
    height:40px;
}

/* Первый столбец (канал) — фикс слева */
.plan-grid th:first-child,
.plan-grid td:first-child{
    position:sticky;
    left:0;
    z-index:6;
    min-width:220px;
    background:#fff;
}

/* Верхний левый угол поверх всех */
.plan-grid thead th:first-child{
    z-index:10;
}

/* Текст в первом столбце */
.plan-grid td:first-child{
    padding:0 10px;        /* тут оставим норм отступ для названия */
    font-weight:600;
    text-align:left;
    white-space:nowrap;
}

/* Числа по правому краю */
.plan-grid td{
    text-align:right;
}

/* Инпут занимает всю ячейку */
.plan-grid input[type="text"],
.plan-grid input[type="number"]{
    width:100%;
    height:100%;
    box-sizing:border-box;
    border:0;
    margin:0;
    padding:0 10px;
    background:transparent;
    text-align:right;
    outline:none;
}

/* Фокус — подсветка всей ячейки */
.plan-grid td:focus-within{
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}

/* Hover строк */
.plan-grid tbody tr:hover td{
    background:#fbfbfb;
}

/* Итоги */
.plan-total{
    font-weight:800;
    background:#fff;
}

/* Нижняя строка итогов липкая */
.plan-grid tfoot td{
    position:sticky;
    bottom:0;
    z-index:4;
    background:#fff;
    font-weight:800;
}

/* Узкие экраны */
@media (max-width: 768px){
    .plan-grid th:first-child,
    .plan-grid td:first-child{
        min-width:160px;
    }
}

.add-good-bar{
    display:flex;
    justify-content:flex-start;
    margin:12px 0 18px;
}

.add-good-form{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

/* селектор в том же духе, что кнопки */
.add-good-select{
    height:32px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid #d1d5db;
    background:#fff;
    color:#111827;
    font-size:13px;
    outline:none;
}

.add-good-select:focus{
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
    border-color:#9ca3af;
}

/* чтобы btn-sm у вас не делал текст белым на primary */
.add-good-btn{
    color:#000104; /* как в .btn-primary */
}
.plan-grid input.is-saving{
    background: rgba(122, 232, 65, 0.28);
}

.plan-grid input.is-error{
    background: rgba(255, 0, 0, 0.23);
}

/* контейнер тотала */
.total-wrap{
    overflow:auto;

    border:2px solid #111827;   /* более заметная рамка */
    border-radius:12px;
    width:90%;
    margin: 20px auto;
    padding: 12px;
    box-sizing:border-box;
    background: #ffffff;
}

/* таблица тотала */
.total-grid{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    background:#fff;
}

/* явная сетка */
.total-grid th,
.total-grid td{
    background:#fff;
    text-align:center;         /* в тотале по центру */
    vertical-align:middle;

}

/* шапка */
.total-grid thead th{
    position:sticky;
    top:0;
    z-index:5;
    font-weight:800;
    background:#fff;
}

/* первый столбец (Канал) — липкий и чуть шире */
.total-grid th:first-child,
.total-grid td:first-child{
    position:sticky;
    left:0;
    z-index:6;
    min-width:220px;
    font-weight:700;
    background:#fff;
}

/* верхний левый угол */
.total-grid thead th:first-child{
    z-index:10;
}

/* hover строк */
.total-grid tbody tr:hover td{
    background:#f8fafc;
}

/* строка итогов */
.total-grid tfoot td{
    position:sticky;
    bottom:0;
    z-index:4;
    font-weight:900;
    background:#fff;
}

/* выделение итоговых ячеек */
.total-grid .total-total{
    font-weight:900;
}

.btn-copy-prev{
    border:1px solid rgba(0,0,0,.15);
}
/*управление таблицы маркетинга*/
.dict-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:12px 0 16px;
}

.dict-section{
    background:#fff;
    border:1px solid #d9d9d9;
    border-radius:12px;
    padding:14px;
}

.dict-head{
    font-weight:800;
    font-size:16px;
    margin-bottom:10px;
}

.dict-add{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.dict-input{
    height:36px;
    padding:0 12px;
    border:1px solid #d1d5db;
    border-radius:10px;
    min-width:280px;
    box-sizing:border-box;
}

.dict-table-wrap{ overflow:auto; }

.dict-grid{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    background:#fff;
    font-size:13px;
}

.dict-grid th, .dict-grid td{
    border:1px solid #d9d9d9;
    height:36px;
    padding:8px 10px;
    text-align:center;
    background:#fff;
}

.dict-grid thead th{
    font-weight:800;
    background:#f7f7f8;
}

.dict-input-edit{
    width:100%;
    box-sizing:border-box;
    height:34px;
    padding:0 10px;
    border:1px solid #d1d5db;
    border-radius:10px;
}

.headers_manager{
    margin:18px 0 10px;
    font-weight:800;
    font-size:16px;
    text-align: center;
}

/* Верхний блок управления (месяц + кнопки + сообщения) */
.plan-controls{
    width: 90%;
    margin: 14px auto 18px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* строка: выбор месяца */
.plan-controls-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* сообщения внутри блока */
.plan-controls .alert{
    margin: 0;
}

/* строка: заголовок "План" + кнопка копирования */
.plan-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.plan-actions-title{
    font-weight: 800;
}

/* блок "+ добавить товар" */
.add-good-bar{
    width: 90%;
    margin: 0 auto 18px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    padding: 12px 16px;
}

.add-good-form{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.add-good-select{
    min-width: 260px;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
}

/* адаптив */
@media (max-width: 560px){
    .plan-actions{
        justify-content: center;
    }
    .add-good-select{
        width: 100%;
        min-width: 0;
    }
}


.plan-toolbar{
    width: 90%;
    margin: 16px auto 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 10px 22px rgba(0,0,0,.07);
}

.plan-toolbar-top{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.plan-toolbar-left{ justify-self: start; }
.plan-toolbar-center{ justify-self: center; }
.plan-toolbar-right{ justify-self: end; }

.plan-toolbar-title{
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    letter-spacing: .2px;
}

.plan-inline{ display:inline; }

.plan-toolbar-alert{
    margin-top: 12px;
}

.plan-toolbar-bottom{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
    justify-content: center;
}

.plan-add-good{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.plan-add-select{
    min-width: 280px;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    background: #fff;
}

/* адаптив */
@media (max-width: 720px){
    .plan-toolbar-top{
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .plan-toolbar-left,
    .plan-toolbar-right{
        justify-self: center;
    }
    .plan-add-select{
        width: 100%;
        min-width: 0;
    }
}
.plan-title{
    margin: 0 0 12px 0;
    text-align: center;
    font-weight: 800;
    justify-content: center;
}

.back-link-m{
    margin-bottom:12px;
    font-size:16px;
}
.back-link-m a{
    color:var(--accent-2);
    text-decoration:none;
}
.back-link-m a:hover{ text-decoration:underline; }

.modal-backdrop-m{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:16px;
}
.modal-backdrop-m[hidden]{
    display:none !important;
}

.modal-m{
    width:min(460px, 100%);
    background:#fff;
    border-radius:14px;
    border:1px solid #e5e7eb;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    padding:16px;
}
.modal-title-m{
    font-weight:800;
    font-size:16px;
    margin-bottom:8px;
}
.modal-text-m{
    font-size:14px;
    opacity:.9;
    margin-bottom:14px;
    line-height:1.4;
}
.modal-actions-m{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.good-toggle{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid #e6e6e6;
    background:#fff;
    border-radius:10px;
    cursor:pointer;
    justify-content: center;        /* центрируем содержимое */
    position: relative;
    text-align: center;
}

.good-toggle-title{
    flex: 1;
    text-align: center;
    font-size: 16px;
   font-weight:800;
    margin: 0 0 12px 0;
}

.good-toggle-arrow{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.good-block.is-collapsed .good-toggle-arrow{
    transform: translateY(-50%) rotate(-90deg);
}
/* контейнер, который сворачиваем */
.good-content{
    overflow:hidden;
    transition:max-height .22s ease, opacity .22s ease;
    max-height:2000px; /* достаточно большое */
    opacity:1;
}

.good-block.is-collapsed .good-content{
    max-height:0;
    opacity:0;
}
.plan-collapse-actions{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    /* скролл */
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    /* чтобы не переносились */
    flex-wrap:nowrap;
    white-space:nowrap;
    /* небольшой отступ чтобы скролл не “лип” */
    padding:6px 0;
}
.plan-collapse-actions > *{
    flex:0 0 auto;
}
.plan-collapse-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:30px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid #d1d5db;
    background: rgb(255, 255, 255);
    color:#111827;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
}

.plan-collapse-btn:hover{ filter:brightness(.98); }
.plan-collapse-btn:active{ transform: translateY(1px); }
.plan-collapse-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.plan-collapse-btn--collapse{
    border-color:#e5e7eb;
}

.plan-collapse-btn--expand{
    border-color:#e5e7eb;
}
@media (min-width: 769px){
    .plan-collapse-actions{
        overflow: visible;
        white-space: normal;
        flex-wrap: wrap;
    }
}

/* Один скролл-контейнер */
.plan-scroll{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Внутренняя обёртка */
.plan-scroll-inner{
    display: inline-block;
    min-width: 100%;
    vertical-align: top;
}

/* Таблица НЕ должна быть 100% (иначе будет ужиматься) */
.plan-scroll-inner > table{
    width: auto !important;      /* перебьёт любые width:100% из style.css */
    table-layout: auto;
    border-collapse: collapse;
}

/* Главное: запрещаем переносы во всех ячейках, кроме первого столбца */
.plan-scroll-inner > table th,
.plan-scroll-inner > table td{
    white-space: nowrap;
}

/* Первый столбец: можно обрезать */
.plan-scroll-inner > table th:first-child,
.plan-scroll-inner > table td:first-child{
    white-space: nowrap;         /* не переносим */
    max-width: 220px;            /* подбери */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* На всякий случай: не даём контейнерам выше создавать второй скролл */
.plan-wrap, .main, #goods-container, #totals-container{
    overflow-x: visible;
}
/* 1) Фикс: в первом столбце включаем обрезку */
.plan-grid th:first-child,
.plan-grid td:first-child,
.total-grid th:first-child,
.total-grid td:first-child{
    max-width: 120px;       /* подберите ширину */
    width: 120px;           /* чтобы колонка держала размер */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2) Чтобы таблица не сжималась и работал горизонтальный скролл */
.plan-grid th:not(:first-child),
.plan-grid td:not(:first-child),
.total-grid th:not(:first-child),
.total-grid td:not(:first-child){
    white-space: nowrap;
}
@media (max-width: 768px){
    .plan-grid{
        width: auto;
        min-width: max-content;   /* чтобы не сжималась, а уходила в скролл */
        table-layout: auto;       /* чтобы колонки считались по содержимому */
    }
}
/* центрируем сам блок */
.plan-export-toolbar{
    width: min(900px, calc(100% - 12px)); /* не на всю ширину */
    margin: 12px auto 14px;              /* центр по горизонтали */
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:14px 14px;
}

/* заголовок по центру */
.plan-export-title{
    font-weight:900;
    font-size:16px;
    text-align:center;
    margin-bottom:12px;
    color:#111827;
}

/* кнопки по центру */
.plan-export-actions{
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:12px;
    flex-wrap:wrap;
}

/* кнопки */
.plan-export-btn{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:280px;
    max-width:420px;
    padding:14px 16px;
    border-radius:16px;
    text-decoration:none;
    border:1px solid #d1d5db;
    background:#fff;
    color:#111827;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;
}

.plan-export-btn:hover{
    filter:brightness(.99);
    box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.plan-export-btn:active{ transform:translateY(1px); }

.plan-export-icon{
    font-size:22px;
    line-height:1;
    width:36px;
    height:36px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
}

.plan-export-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    font-weight:900;
    font-size:15px;
    color:#ffffff;
}

.plan-export-sub{
    display:block;
    font-weight:600;
    font-size:12px;
    color: #ffffff;
}

.plan-export-btn--primary{
    border-color:#c7d2fe;
    background:#eef2ff;
}

.plan-export-btn--outline{
    border-color:#e5e7eb;
    background:#fff;
}

@media (max-width: 520px){
    .plan-export-toolbar{
        width: calc(100% - 16px);
    }
    .plan-export-btn{
        min-width:100%;
        max-width:100%;
    }
}

.lock{font-size:16px;margin-left:6px}
.lock.open{opacity:.8}
.lock.closed{opacity:1}

/* ===== Центр + крупные цветные кнопки WB / OZON ===== */

.marketSwitch{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;

    width:100%;
    max-width:720px;
    margin: 18px auto;
    padding: 10px;

    border-radius:20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

/* общие */
.mBtn{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;

    padding:18px 22px;
    font-size:20px;
    font-weight:900;
    letter-spacing:.2px;

    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);

    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06);
    cursor:pointer;
    user-select:none;

    transition: transform .12s ease, filter .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.mBtn:hover{
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 14px 28px rgba(0,0,0,.25);
}

.mBtn:active{
    transform: translateY(1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.mBtn:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px rgba(140,160,255,.28), 0 14px 28px rgba(0,0,0,.25);
}

/* ===== Цвета платформ ===== */

/* WB (фиолетовый) */
.mBtn[data-market="wb"]{
    background: linear-gradient(180deg, rgba(170,90,255,.22), rgba(110,60,210,.14));
    border-color: rgba(190,130,255,.22);
}
.mBtn[data-market="wb"].is-active{
    background: linear-gradient(180deg, rgba(190, 110, 255, 0.99), rgb(97, 53, 186));
    border-color: rgba(210,160,255,.35);
    box-shadow: 0 16px 34px rgba(120,70,220,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* OZON (синий) */
.mBtn[data-market="ozon"]{
    background: linear-gradient(180deg, rgba(70,120,255,.22), rgba(40,70,210,.14));
    border-color: rgba(120,170,255,.22);
}
.mBtn[data-market="ozon"].is-active{
    background: linear-gradient(180deg, rgba(90, 150, 255, 0.92), rgba(40, 90, 220, 0.99));
    border-color: rgba(160,200,255,.35);
    box-shadow: 0 16px 34px rgba(40,90,220,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* disabled */
.mBtn:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
    filter:none;
    box-shadow:none;
}

/* адаптив: на телефоне чуть меньше */
@media (max-width: 520px){
    .marketSwitch{ gap:10px; padding:8px; }
    .mBtn{ font-size:18px; padding:16px 16px; border-radius:16px; }
}

/* =========================
   🧾 TABLE: белый фон + черный текст
   input занимает всю ячейку
   ========================= */

.tableCard{
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    border:1px solid #E6E6E6;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.tableScroll{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
}

.vTable{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width: 900px;
}

/* шапка */
.vTable thead th{
    position: sticky;
    top: 0;
    z-index: 2;

    text-align:left;
    padding: 12px 12px;

    font-weight: 800;
    color:#111;

    background:#F7F7F7;
    border-bottom:1px solid #E6E6E6;
    cursor: pointer;
    user-select: none;
}
.vTable thead th.sort-asc::after{ content:"▲"; font-weight:900; }
.vTable thead th.sort-desc::after{ content:" ▼"; font-weight:900; }
/* строки */
.vTable tbody td{
    padding: 10px 12px;
    border-bottom:1px solid #EFEFEF;
    color:#111;
    vertical-align: middle;
}

.vTable tbody tr:nth-child(odd) td{
    background:#FCFCFC;
}

.vTable tbody tr:hover td{
    background:#F2F6FF;
}

.vTable tbody tr:last-child td{
    border-bottom:0;
}

/* колонки */
.vTable .num{
    width:140px;
    white-space: nowrap;
    font-weight: 800;
    color:#111;
}

.vTable .name{
    width:auto;
    color:#111;
}

.vTable .vol{
    width:220px;
    padding:0 !important;     /* важно: убрали padding, чтобы input занял всё */
}

.vTable .when{
    width:190px;
    white-space: nowrap;
    color:#333;
    font-size: 13px;
}

.vTable .whom{
    width:190px;
    white-space: nowrap;
    color:#111;
    font-size: 13px;
    font-weight: 700;
}

/* input: на всю ячейку */
.vTable .vol .in{
    display:block;
    width:100%;
    height:100%;
    min-height: 44px;
    box-sizing:border-box;

    margin:0;
    padding: 12px 14px;

    border:0;
    border-radius:0;
    outline:none;

    background:#FFFFFF;
    color:#111;
    font-weight: 800;

    box-shadow: inset 0 0 0 1px #DADADA;
    transition: box-shadow .15s ease, background .15s ease;
}

.vTable .vol .in::placeholder{
    color:#9A9A9A;
    font-weight: 700;
}

.vTable .vol .in:focus{
    background:#FFFFFF;
    box-shadow:
            inset 0 0 0 2px #4C7DFF,
            0 0 0 3px rgba(76,125,255,.18);
}

/* optional: убрать стрелки number */
.vTable .vol .in[type="number"]{
    -moz-appearance:textfield;
}
.vTable .vol .in[type="number"]::-webkit-outer-spin-button,
.vTable .vol .in[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

/* адаптив */
@media (max-width: 780px){
    .vTable{ min-width: 640px; }
    .vTable .when,
    .vTable .whom{ display:none; }
    .vTable .vol{ width: 180px; }
}

.tableTools{
    display:flex;
    gap:10px;
    margin: 12px 0;
    align-items:flex-end;
}

.searchIn{
    flex:1;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #DADADA;
    background:#fff;
    color:#111;
    font-weight: 700;
    outline:none;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.searchIn:focus{
    border-color:#4C7DFF;
    box-shadow: 0 0 0 3px rgba(76,125,255,.18), 0 6px 18px rgba(0,0,0,.06);
}

.clearBtn{
    width:44px;
    height:44px;
    border-radius: 12px;
    border: 1px solid #DADADA;
    background:#fff;
    cursor:pointer;
    font-weight: 900;
}

.clearBtn:hover{ background:#F3F6FF; }
.actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top: 14px;
}

/* основная */
.saveBtn{
    appearance:none;
    border: 1px solid #D7D7D7;
    background: linear-gradient(180deg, #FFFFFF, #F3F6FF);
    color: #111;

    padding: 12px 18px;
    border-radius: 14px;

    font-weight: 900;
    letter-spacing: .2px;

    cursor: pointer;
    user-select: none;

    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}

.saveBtn:hover{
    border-color: #AFC2FF;
    filter: brightness(1.02);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

.saveBtn:active{
    transform: translateY(1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

.saveBtn:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px rgba(76,125,255,.22), 0 14px 28px rgba(0,0,0,.12);
}

/* вариант: disabled */
.saveBtn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    filter:none;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* если хочешь компактнее на мобилке */
@media (max-width: 520px){
    .saveBtn{
        width:100%;
        justify-content:center;
    }
    .actions{ justify-content:stretch; }
}
/* подсветка состояния инпута */
.volCell.is-saving{
    box-shadow: inset 0 0 0 2px #F2B705 !important;
    background: #FFF8E1 !important;
}

.volCell.is-saved{
    box-shadow: inset 0 0 0 2px #22C55E !important;
    background: #F0FDF4 !important;
}

.volCell.is-error{
    box-shadow: inset 0 0 0 2px #EF4444 !important;
    background: #FEF2F2 !important;
}
.topActions{
    max-width:1100px;
    margin: 6px auto 12px;
    padding: 0 14px;
    display:flex;
    justify-content:center;
}

.histTopBtn{
    appearance:none;
    border: 1px solid #D7D7D7;
    background: linear-gradient(180deg, #FFFFFF, #F3F6FF);
    color:#111;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 900;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.histTopBtn:hover{ transform: translateY(-1px); filter: brightness(1.02); box-shadow:0 14px 28px rgba(0,0,0,.12); }
.histTopBtn:active{ transform: translateY(1px); box-shadow:0 8px 18px rgba(0,0,0,.10); }
.modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    padding: 16px;               /* ✅ отступ от краёв окна */
    box-sizing: border-box;
}
.modal.is-open{ display:block; }

.modal__backdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.45);
}

/* диалог */
.modal__dialog{
    margin: 0 auto;              /* ✅ без 7vh */
    position: relative;
    top: 6vh;                    /* ✅ лёгкий сдвиг вниз */
    width: 100%;
    max-width: 1100px;
    max-height: calc(100vh - 32px); /* ✅ учитываем padding:16px сверху/снизу */
    background:#fff;
    border-radius: 18px;
    overflow: hidden;
    display:flex;
    flex-direction: column;
}

/* верх фиксированный */
.modal__head{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #EAEAEA;
}
.modal__title{ font-weight: 950; color:#111; }
.modal__close{
    width:40px; height:40px;
    border-radius: 12px;
    border:1px solid #DADADA;
    background:#fff;
    cursor:pointer;
    font-weight:900;
}

.modal__tabs{
    flex: 0 0 auto;
    display:flex;
    gap:10px;
    padding: 10px 16px;
    border-bottom: 1px solid #EAEAEA;
}
.tabBtn{
    padding:10px 14px;
    border-radius: 12px;
    border:1px solid #DADADA;
    background:#fff;
    font-weight:900;
    cursor:pointer;
}
.tabBtn.is-active{
    border-color: #4c1d95;
    box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.13);
    background:#F3F6FF;
}

.modal__filters{
    padding: 14px 16px;          /* ✅ отступы внутри блока */
    margin: 0;                   /* на всякий */
    display:flex;
    flex-wrap:wrap;

    gap: 12px 12px;              /* ✅ расстояние между полями (row/col) */
    align-items:flex-end;        /* ✅ кнопки на одном уровне с инпутами */

    border-bottom: 1px solid #EAEAEA;
    background: #fff;
}
.modal__body{
    flex: 1 1 auto;                   /* ✅ занимает остаток */
    display:flex;
    flex-direction: column;
    gap:10px;
    padding: 12px 16px;
    min-height: 0;                    /* ✅ критично для скролла в flex */
}
.histStatus{
    flex: 0 0 auto;
    font-weight: 800;
    color:#333;
}

/* ✅ скролл только у таблицы */
.histTableWrap{
    flex: 1 1 auto;
    min-height: 0;                    /* ✅ критично */
    overflow: auto;                   /* ✅ вертикальная прокрутка */
    -webkit-overflow-scrolling: touch;
    border: 1px solid #EFEFEF;
    border-radius: 14px;
}

/* table */
.histTable{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.histTable thead th{
    position: sticky;                 /* ✅ липкая шапка */
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid #EAEAEA;
    padding: 10px 10px;
    text-align: left;
    font-weight: 900;
}

.histTable td{
    border-bottom: 1px solid #F2F2F2;
    padding: 10px 10px;
    vertical-align: top;
}

.histTable tr:hover td{
    background:#FAFAFF;
}

/* optional: если таблица шире, включится горизонтальный скролл */
.histTableWrap{ overflow: auto; }
.fItem{ display:flex; flex-direction:column; gap:6px;min-width: 140px; }
.fItem span{ font-size:12px; color:#333; font-weight:800; }
.fItem input, .fItem select{
    height:42px;
    padding: 0 12px;
    border-radius: 12px;
    border:1px solid #DADADA;
    background:#fff;
    color:#111;
    font-weight:700;
    outline:none;
}
.fQuery{ min-width: 260px; flex:1; }
.fUser{ min-width: 220px; }
.fItem > span{
    font-size:12px;
    font-weight:800;
    color:#333;
    line-height:1;
}

/* инпуты/селекты одинаковой высоты */
.fItem input,
.fItem select{
    height:42px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid #DADADA;
    background:#fff;
    color:#111;
    font-weight:700;
    outline:none;
}
.fBtn{
    height:42px;
    padding: 0 12px;
    border-radius: 12px;
    border:1px solid #DADADA;
    background: #4c1d95;
    color:#fff;
    font-weight:900;
    cursor:pointer;
    margin-left: 4px;
    align-self:flex-end;           /* ✅ на одном уровне с инпутами */
}

.fBtn--ghost{
    background:#fff;
    color:#111;
}

.modal__body{ padding: 12px 16px 16px; }
.histStatus{ color:#333; font-weight:800; margin-bottom:10px; }

.histTableWrap{ overflow:auto; border:1px solid #E6E6E6; border-radius: 14px; }
.histTable{ width:100%; border-collapse:separate; border-spacing:0; min-width: 900px; }
.histTable thead th{
    position: sticky; top:0; z-index:2;
    background:#F7F7F7;
    padding: 12px 12px;
    text-align:left;
    border-bottom:1px solid #E6E6E6;
    color:#111; font-weight:900;
}
.histTable tbody td{
    padding: 10px 12px;
    border-bottom:1px solid #EFEFEF;
    color:#111;
}
.histTable tbody tr:hover td{ background:#F2F6FF; }
.histTable tbody tr:last-child td{ border-bottom:0; }

@media (max-width: 560px){
    .modal__dialog{ margin: 16px auto; }
}
.vTable .apiVol{
    width: 140px;
    white-space: nowrap;
    font-weight: 800;
    color:#111;
}

.vTable .delta{
    width: 110px;
    white-space: nowrap;
    font-weight: 900;
    justify-content: center;
    color:#111;
}
.vTable .deltaApi{
    width: 110px;
    white-space: nowrap;
    font-weight: 900;
    justify-content: center;
    color:#111;
}
.vTable .delta.is-neg{
    color:#B42318;           /* красный для отрицательной */
}
.vTable .deltaApi.is-neg-val{
    color:#B42318;           /* красный для отрицательной */
}

.vTable .apiVol{
    width: 140px;
    white-space: nowrap;
    font-weight: 800;
    color:#111;
}
.apiDateLbl{ display:flex; flex-direction:column; gap:6px; }
.apiDateLbl span{ font-size:12px; font-weight:800; color:#333; }
#apiDate{
    height:44px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid #DADADA;
    background:#fff;
    color: rgb(9, 9, 9);
    font-weight:700;
}
.vTable tbody tr.is-neg td{ background:#FFF1F1 !important; }
.vTable tbody tr.is-neg:hover td{ background:#FFE5E5 !important; }
.vTable tbody tr.is-neg td.delta{ color:#B42318; font-weight:900; }
.vTable tbody tr.is-neg-val td.deltaApi{ color:#B42318; font-weight:900; }

/* Красная кнопка фильтра */
#toggleNegRows{
    height:42px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid rgba(180, 35, 24, .35);
    background: linear-gradient(180deg, #ff4d4d, #d92d20);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(217,45,32,.18);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
    white-space: nowrap;
}

#toggleNegRows:hover{
    filter: brightness(1.03);
    box-shadow: 0 14px 26px rgba(217,45,32,.24);
    transform: translateY(-1px);
}

#toggleNegRows:active{
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(217,45,32,.18);
}
/* отрицательная ячейка (значение < 0) */
.vTable td.is-neg-val{
    color:#b00020;
    font-weight:700;
}

/* отрицательная строка целиком */
.vTable tbody tr.is-neg > td{
    background:#ffe5e5;
}

/* подсветить ещё сильнее конкретные "дельты" */
.vTable tbody tr.is-neg td.delta,
.vTable tbody tr.is-neg td.deltaApi{
    background:#ffd6d6;
}

/* кнопка фильтра */
#toggleNegRows.is-on{
    background:#b00020;
    color:#fff;
    border-color:#b00020;
}

/* Включено: “Показать все” */
#toggleNegRows.is-on{
    background: rgba(101, 4, 241, 0.53);
    border-color: rgba(101, 4, 241, 0.53);
    box-shadow: 0 10px 22px rgba(101, 4, 241, 0.14);
}
/* =========================
   USER MODAL (unique classes)
   ========================= */

.umodal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.50);
    display: none;               /* открывается через .umodal-overlay--open */
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 99999;
}

.umodal-overlay.umodal-overlay--open{
    display: flex !important;    /* защита от чужих !important */
}

.umodal{
    background: #fff;
    width: min(720px, 100%);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    overflow: hidden;
    transform: translateY(8px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}

.umodal-overlay.umodal-overlay--open .umodal{
    transform: translateY(0);
    opacity: 1;
}

.umodal__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: #fafbfe;
}

.umodal__title{
    font-weight: 700;
}

.umodal__close{
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
}

.umodal__close:hover{
    background: rgba(0,0,0,0.06);
}

.umodal__body{
    padding: 14px 16px 16px;
}

.uform-grid{
    display:grid;
    gap:10px;
}

.uform-grid label{
    display:grid;
    gap:5px;
}

.uform-grid label span{
    font-size:12px;
    opacity:.8;
}

.uform-grid input,
.uform-grid select{
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 10px;
    outline: none;
}

.uform-grid input:focus,
.uform-grid select:focus{
    border-color: rgba(79, 98, 255, .9);
    box-shadow: 0 0 0 3px rgba(79, 98, 255, .18);
}

.umodal__footer{
    display:flex;
    gap:10px;
    flex-wrap: wrap;
    padding: 12px 0 0;
}

.udanger-zone{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,0.20);
    display:flex;
    gap:10px;
    flex-wrap: wrap;
    align-items: center;
}

.udanger-zone form{
    margin: 0;
}

.plan-toolbar-top{
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.plan-toolbar-left{ flex: 1; }
.plan-toolbar-right{ flex: 1; }

/* сам переключатель в центре */
.plan-view-switch{
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 10px;
}
/* На очень узких экранах — в две строки */
@media (max-width: 520px){
    .plan-view-switch{
        width: 100%;
        justify-content: stretch;
    }
    .plan-view-switch .btn{
        flex: 1 1 0;
        text-align: center;
        white-space: nowrap;
    }
}

/* Лёгкая "плашка" (опционально) */
.plan-view-switch--pill{
    padding: 6px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    background: rgba(0,0,0,.02);
}


.plan-view-switch .btn.btn-primary{
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.plan-view-btn{
    font-size: 14px;      /* было меньше из-за btn-sm */
    padding: 10px 16px;   /* крупнее кнопка */
    border-radius: 12px;
    line-height: 1.1;
    min-height: 40px;
    justify-content: center;
    align-items: center;
}

/* на очень маленьких экранах чуть компактнее */
@media (max-width: 520px){
    .plan-view-btn{
        font-size: 13px;
        padding: 10px 12px;
        min-height: 38px;
    }
}

.diff-bad { font-weight: 700; }
.diff-ok  { opacity: 0.75; }
/* ===== Filter button: Only diff (Δ ≠ 0) ===== */
#onlyDiffBtn.btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .12s ease, opacity .12s ease;
}

/* состояние "обычное" (фильтр выключен) */
#onlyDiffBtn.btn[data-mode="all"]{
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    color: #222;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* состояние "включено" (показываем только Δ≠0) */
#onlyDiffBtn.btn[data-mode="diff"]{
    background: rgba(76, 29, 149, 0.18);   /* мягкий "warning" */
    border: 1px solid rgba(76, 29, 149, 0.55);
    color: #4c1d95;
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.15);
}

/* hover/focus */
#onlyDiffBtn.btn:hover{
    opacity: .95;
    box-shadow: 0 3px 14px rgba(0,0,0,.10);
}

#onlyDiffBtn.btn:active{
    transform: translateY(1px);
}

/* доступность */
#onlyDiffBtn.btn:focus{
    outline: none;
}
#onlyDiffBtn.btn:focus-visible{
    outline: 2px solid rgba(0, 123, 255, .55);
    outline-offset: 2px;
}

/* подпись справа (опционально) */
#onlyDiffInfo{
    font-size: 12px;
    opacity: .75;
    white-space: nowrap;
}

/* ===== Event content (только события) ===== */
.ev-metafbw{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    padding: 6px 8px;          /* чуть больше зона event */
    border-radius: 8px;
    background: rgba(0,0,0,.04);
}

/* если переносов много — пусть строки не слипнутся */
.ev-meta > div{ margin: 2px 0; }

/* чуть выше карточка события */
.sx__event{
    min-height: 60px;          /* было 42 */
}

/* ===== Calendar layout ===== */
.calendar-fbw-layout{
    width: 90%;
    margin: 18px auto 0 auto;
    height: fit-content;
}

.calendar-fbw-layout .calendarfbw{
    height: 720px;             /* оставляем фикс */
}

/* сетка месяца в высоту контейнера */
.calendar-fbw-layout .sx__month-grid{
    height: 100%;
}

/* ✅ немного увеличиваем "ячейку" за счёт высоты строки недели
   вместо ровно 100%/6 — даём сетке чуть больше места */
.calendar-fbw-layout .sx__month-grid .sx__month-grid-week{
    height: calc(100% / 6);
}

/* ✅ саму day-ячейку не даём резать контент события */
.calendar-fbw-layout .sx__month-grid .sx__month-grid-day{
    overflow: hidden;          /* оставляем, чтобы не вылезало за границы */
}

/* ✅ КЛЮЧЕВОЕ: зона событий больше и со скроллом (шапку дня не трогаем) */
.calendar-fbw-layout .sx__month-grid .sx__month-grid-day-events{
    max-height: 96px;          /* 👈 увеличивает ТОЛЬКО event-zone */
    overflow-y: auto;          /* 👈 если много событий — скролл */
    overflow-x: hidden;
    padding-right: 2px;
}

/* аккуратный скролл (необязательно) */
.calendar-fbw-layout .sx__month-grid .sx__month-grid-day-events::-webkit-scrollbar{
    width: 8px;
}
.calendar-fbw-layout .sx__month-grid .sx__month-grid-day-events::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.18);
    border-radius: 10px;
}

/* ширина календаря */
.calendar-fbw-section .calendar-fbw{ width: 100%; }

/*начало стилей таблицы перфоманс маркетинга*/
.tables-section{
    margin-top: 26px;
    align-items: center;
    text-align:center;
}
.table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:visible;
    position:relative;
    z-index:0;
    isolation:isolate;
    border:1px solid #d8ccf0;
    border-radius:14px;
    background:#fcfaff;
    box-shadow:0 6px 20px rgba(76,29,149,.10);
}
.table-floating-header{
    position:sticky;
    top:0;
    left:0;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:12px 16px;
    box-sizing:border-box;
    background:#2e1065;
    color:#fff;
    font-size:18px;
    font-weight:800;
    letter-spacing:.4px;
    text-align:center;
}
.report-table{
    width:100%;
    min-width:1100px;
    border-collapse:separate;
    border-spacing:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size:14px;
    color:#2e1065;
    background:#fff;
}

.report-table th,
.report-table td{
    padding:12px 14px;
    border-bottom:1px solid #ede7f6;
    border-right:1px solid #f3effa;
    vertical-align:middle;
    background:#fff;
    overflow-wrap: break-word;
    white-space: normal;
}

.report-table tr > *:last-child{
    border-right:none;
}


/* верхняя шапка */
.report-table thead th{
    position:sticky;
    top:0;
    z-index:3;
    background:#4c1d95;
    color: #ffffff;
    font-weight:700;
    text-align:left;
    border-bottom:1px solid #3b1674;
}

/* обычные строки */
.report-table tbody tr.data-row:nth-child(even) td{
    background:#fcfaff;
}

.report-table tbody tr.data-row:hover td{
    background:#f3ecff;
}

/* первая колонка */
.report-table tbody tr .sticky-col{
    position:sticky;
    left:0;
    z-index:1;
    background:#fff;
    background-clip:padding-box;
}

.report-table tbody tr.data-row:nth-child(even) .sticky-col{
    background:#fcfaff;
}

.report-table tbody tr.data-row:hover .sticky-col{
    background:#f3ecff;
}

.report-table .section-row .sticky-col{
    left:0;
    z-index:2;
    background:#ede7f6;
}

.report-table .subtotal-row .sticky-col{
    background:#f6f1ff;
}

.report-table .grand-total-row .sticky-col{
    background:#4c1d95;
    color:#fff;
}

/* section-row закреплен под thead */
.report-table .section-row td{
    position:sticky;
    top:45px;
    z-index:2;
    background:#ede7f6;
    background-clip:padding-box;
    color:#4c1d95;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    border-top:2px solid #cbb7ee;
    border-bottom:2px solid #cbb7ee;
}
.report-table .section-row .section-title{
    position:sticky;
    left:0;
    top:45px;
    z-index:6;
    min-width:220px;
    max-width:220px;
    background:#ede7f6;
    color:#4c1d95;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.3px;
}

/* чтобы sticky-col в section-row тоже не терял фон */
.report-table .section-row .sticky-col{
    left:0;
    z-index:2;
    background:#ede7f6;
}

/* подитоги */
.report-table .subtotal-row td{
    background:#f6f1ff;
    color:#4c1d95;
    font-weight:700;
    border-top:2px solid #d8ccf0;
    border-bottom:2px solid #d8ccf0;
}

.report-table .subtotal-row .sticky-col{
    background:#f6f1ff;
}

/* общий итог */
.report-table .grand-total-row td{
    background:#4c1d95;
    color:#fff;
    font-weight:800;
    font-size:15px;
    border-top:2px solid #3b1674;
    border-bottom:none;
}

.report-table .grand-total-row .sticky-col{
    background:#4c1d95;
}

/* числа */
.report-table .num{
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.report-table .center{
    text-align:center;
}
.report-table thead .column-header-row .sticky-col{
    position:sticky;
    left:0;
    z-index:7;          /* выше обычных th */
    background:#4c1d95; /* непрозрачный фон */
    color:#fff;
}
/* скролл */
.table-wrap::-webkit-scrollbar{
    height:10px;
}

.table-wrap::-webkit-scrollbar-track{
    background:#f3effa;
    border-radius:999px;
}

.table-wrap::-webkit-scrollbar-thumb{
    background:#c4b5e3;
    border-radius:999px;
}

.table-wrap::-webkit-scrollbar-thumb:hover{
    background:#a78bcb;
}

/* базовый th с tooltip */
.report-table thead th.has-tooltip{
    position:relative;
    cursor: grab;
    overflow:visible;
    max-width: 120px;
}

/* выделенный заголовок */
.report-table thead th.th-special{
    position:relative;
    background:#f59e0b;
    color:#fff;
    font-weight:800;
    border-bottom:1px solid #d97706;
    box-shadow:inset 0 -2px 0 #fde68a;
}

.report-table thead th.th-special::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:#fef3c7;
    z-index:1;
}

/* текст и содержимое заголовка */
.report-table thead th.has-tooltip > *{
    position:relative;
    z-index:2;
}

/* tooltip */
.report-table thead th.has-tooltip .tooltip-text{
    position:absolute;
    left:50%;
    top:100%;
    transform:translateX(-50%);
    margin-top:8px;
    padding:8px 10px;
    min-width:180px;
    max-width:260px;
    white-space:normal;
    background:#2e1065;
    color:#fff;
    font-size:12px;
    line-height:1.4;
    font-weight:500;
    text-transform:none;
    letter-spacing:normal;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
    z-index:30;
    pointer-events:none;
}

/* стрелка tooltip */
.report-table thead th.has-tooltip .tooltip-text::before{
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #2e1065;
}

/* показ tooltip */
.report-table thead th.has-tooltip:hover .tooltip-text{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(2px);
}
.report-table thead th.th-special-light{
    position:relative;
    background:#ede7f6;
    color:#4c1d95;
    font-weight:800;
    border-bottom:2px solid #6d28d9;
}
/* общий заголовок */
.report-table thead .super-header-row th{
    position:sticky;
    top:0;
    z-index:6;
    padding:0;
    background:#2e1065;
    border-bottom:1px solid #4c1d95;
}

/* подзаголовки */
.report-table thead .group-header-row th{
    position:sticky;
    top:52px;
    z-index:5;
    padding:0;
    background:#ede7f6;
    border-bottom:1px solid #d8ccf0;
    border-right:1px solid #ddd2f3;
}

.report-table thead .group-header-row th:last-child{
    border-right:none;
}

/* внутренний блок, центрированный по видимой части */
.report-table thead .header-center{
    position:sticky;
    left:0;
    width:100%;
    min-width:max-content;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
    padding:12px 16px;
}


/* стиль подзаголовков */
.report-table thead .group-header-row .header-center{
    background:#ede7f6;
    color:#4c1d95;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    min-height:42px;
}
.report-table thead .group-header-row .header-left{
    background:#ede7f6;
    color:#4c1d95;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    padding:10px 14px;
    box-sizing:border-box;
}
/* строка имен столбцов */
.report-table thead .column-header-row th{
    position:sticky;
    top:94px;
    z-index:4;
    background:#4c1d95;
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-align:left;
    padding:12px 14px;
    border-bottom:1px solid #3b1674;
    border-right:1px solid #5d2aa8;
}
/* последние ячейки без правой границы */
.report-table thead tr > *:last-child{
    border-right:none;
}
.report-table thead .header-center{
    position:sticky;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px 16px;
    text-align:center;
}
.report-controls-wrap{
    width:100%;
    margin:0 0 16px;
    padding:14px 16px;
    border:1px solid #d8ccf0;
    border-radius:14px;
    background: rgba(252, 250, 255, 0.53);
    box-shadow:0 6px 20px rgba(76,29,149,.08);
}

.report-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:14px 16px;
}

.control-group{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:180px;
}

.control-group label{
    font-size:12px;
    font-weight:700;
    color:#4c1d95;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.control-group select,
.control-group input{
    height:42px;
    padding:0 12px;
    border:1px solid #d8ccf0;
    border-radius:10px;
    background:#fff;
    color:#2e1065;
    font-size:14px;
    outline:none;
    box-sizing:border-box;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.control-group select:hover,
.control-group input:hover{
    border-color:#b9a7e6;
}

.control-group select:focus,
.control-group input:focus{
    border-color:#8b5cf6;
    box-shadow:0 0 0 3px rgba(139,92,246,.14);
    background:#fff;
}

.control-search{
    flex:1 1 260px;
    min-width:240px;
}

.control-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-left:auto;
}

.control-actions button{
    height:42px;
    padding:0 16px;
    border:none;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:all .18s ease;
}

.btn-filter{
    background:#4c1d95;
    color:#fff;
    box-shadow:0 6px 16px rgba(76,29,149,.18);
}

.btn-filter:hover{
    background:#5b21b6;
}

.btn-reset{
    background:#ede7f6;
    color:#4c1d95;
    border:1px solid #d8ccf0;
}

.btn-reset:hover{
    background:#e4daf5;
}

@media (max-width: 900px){
    .control-group,
    .control-search{
        flex:1 1 100%;
        min-width:100%;
    }

    .control-actions{
        width:100%;
        margin-left:0;
    }

    .control-actions button{
        flex:1 1 auto;
    }
}
.column-picker-wrap{
    width:90vw;
    max-width:90vw;
    margin:0 auto 16px;
    padding:12px 14px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background: rgba(255, 255, 255, 0.53);
    box-shadow:0 4px 14px rgba(15,23,42,.06);
    position:relative;
}

.column-picker-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 10px;
    flex-wrap:wrap;
}

.column-picker-title{
    font-size:12px;
    font-weight:800;
    color:#4c1d95;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.column-picker-all{
    height:32px;
    padding:0 12px;
    border:1px solid #d8ccf0;
    border-radius:8px;
    background:#fff;
    color:#4c1d95;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:.18s ease;
}

.column-picker-all:hover{
    background:#f8f5ff;
    border-color:#c4b5fd;
}

.column-picker{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:8px 12px;
    max-height:220px;
    overflow:auto;
    padding-right:4px;
}

.column-picker label{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:7px 9px;
    border:1px solid #ececec;
    border-radius:10px;
    background:#fff;
    color:#374151;
    font-size:13px;
    line-height:1.3;
    cursor:pointer;
    transition:.18s ease;
}

.column-picker label:hover{
    background:#fafafa;
    border-color:#d8ccf0;
}

.column-picker input[type="checkbox"]{
    margin-top:2px;
    flex:0 0 auto;
    accent-color:#6d28d9;
}

.column-picker-text{
    display:block;
    word-break:break-word;
}

.column-picker::-webkit-scrollbar{
    width:8px;
}

.column-picker::-webkit-scrollbar-track{
    background:#f3f4f6;
    border-radius:999px;
}

.column-picker::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:999px;
}

.column-picker::-webkit-scrollbar-thumb:hover{
    background:#9ca3af;
}
.column-header-row th[draggable="true"] {
    user-select: none;
    cursor: grab;
}

.column-header-row th.dragging {
    opacity: 0.5;
}

.column-header-row th.drag-over {
    outline: 2px dashed #2c0a60;
    outline-offset: -2px;
}
/*конец стилей  перфоманс маркетинга*/
/*перфоманс по рекламным каналам*/
.tables-section{
    margin-top:26px;
    align-items:center;
    text-align:center;
}

.table-wrap{
    width:90vw;
    max-width:90vw;
    overflow-x:auto;
    overflow-y:visible;
    position:relative;
    z-index:0;
    isolation:isolate;
    border:1px solid rgb(59, 22, 116);
    border-radius:14px;
    background:#fcfaff;
    box-shadow:0 6px 20px rgba(76,29,149,.10);
    margin: 0 auto 28px;
}

.table-floating-header{
    position:sticky;
    top:0;
    left:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:12px 16px;
    box-sizing:border-box;
    background:#2e1065;
    color:#fff;
    font-size:18px;
    font-weight:800;
    text-align:center;
}

.performance-table{
    width:100%;
    min-width:1100px;
    border-collapse:separate;
    border-spacing:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size:14px;
    color:#2e1065;
    background:#fff;
}
.performance-table .num{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.performance-table th,
.performance-table td{
    padding:12px 14px;
    border-bottom:1px solid #ede7f6;
    border-right:1px solid #f3effa;
    vertical-align:middle;
    background:#fff;
    overflow-wrap:break-word;
    white-space:normal;
}

.performance-table tr > *:last-child{
    border-right:none;
}

/* базовая sticky-шапка */
.performance-table thead th{
    position:sticky;
    z-index:3;
    background:#4c1d95;
    color:#fff;
    font-weight:700;
    text-align:left;
    border-bottom:1px solid #3b1674;
}

/* верхняя общая строка */
.performance-table thead .super-header-row th{
    position:sticky;
    top:0;
    z-index:8;
    padding:0;
    background:#2e1065;
    border-bottom:1px solid #4c1d95;
}

/* групповой заголовок */
.performance-table thead .group-header-row{
    position:relative;
}

.performance-table thead .group-header-row th{
    position:sticky;
    top:52px;
    z-index:7;
    padding:0;
    background: #ffffff;
    border-bottom:1px solid #d8ccf0;
    border-right:1px solid #ddd2f3;
    box-shadow:inset 0 4px 0 #6d28d9;
}

.performance-table thead .group-header-row th:last-child{
    border-right:none;
}

/* явная полоса под group-header-row */
.performance-table thead .group-header-row::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    height:4px;
    background:#6d28d9;
    z-index:9;
}

/* содержимое групповой строки */
.performance-table thead .header-center{
    position:sticky;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    min-width:max-content;
    padding:12px 16px;
    text-align:center;
    box-sizing:border-box;
}

.performance-table thead .group-header-row .header-center{
    background:#ede7f6;
    color:#4c1d95;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    min-height:42px;
}

.performance-table thead .group-header-row .header-left{
    background:#ede7f6;
    color:#4c1d95;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    padding:10px 14px;
    box-sizing:border-box;
}

/* строка названий колонок */
.performance-table thead .column-header-row th{
    position:sticky;
    top:94px;
    z-index:6;
    background:#4c1d95;
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-align:left;
    padding:12px 14px;
    border-bottom:1px solid #3b1674;
    border-right:1px solid #5d2aa8;
}

.performance-table thead tr > *:last-child{
    border-right:none;
}

/* sticky первая колонка в шапке */
.performance-table thead .column-header-row .sticky-col{
    position:sticky;
    left:0;
    z-index:11;
    background:#4c1d95;
    color:#fff;
}

/* обычные строки */
.performance-table tbody tr.data-row:nth-child(even) td{
    background:#fcfaff;
}

.performance-table tbody tr.data-row:hover td{
    background:#f3ecff;
}

/* первая колонка */
.performance-table tbody tr .sticky-col{
    position:sticky;
    left:0;
    z-index:2;
    background:#fff;
    background-clip:padding-box;
}

.performance-table tbody tr.data-row:nth-child(even) .sticky-col{
    background:#fcfaff;
}

.performance-table tbody tr.data-row:hover .sticky-col{
    background:#f3ecff;
}

/* section-row */
.performance-table .section-row td{
    position:sticky;
    top:138px;
    z-index:5;
    background:#ede7f6;
    background-clip:padding-box;
    color:#4c1d95;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    border-top:2px solid #cbb7ee;
    border-bottom:2px solid #cbb7ee;
}

.performance-table .section-row .section-title{
    position:sticky;
    left:0;
    top:138px;
    z-index:12;
    min-width:220px;
    max-width:220px;
    background:#ede7f6;
    color:#4c1d95;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.performance-table .section-row .sticky-col{
    left:0;
    z-index:6;
    background:#ede7f6;
}

/* подитоги — сплошная полоса на всю ширину */
.performance-table .subtotal-row{
    position: relative;
}

.performance-table .subtotal-row td{
    background:#f6f1ff;
    color:#4c1d95;
    font-weight:700;
    border-top:2px solid #d8ccf0;
    border-bottom:2px solid #d8ccf0;

    /* убираем вертикальные разрывы внутри строки */
    border-right:none;
    box-shadow:none;
}

.performance-table .subtotal-row td:last-child{
    border-right:none;
}

.performance-table .subtotal-row .sticky-col{
    background:#f6f1ff;
}

/* общий итог */
.performance-table .grand-total-row td{
    background:#4c1d95;
    color:#fff;
    font-weight:800;
    font-size:15px;
    border-top:2px solid #3b1674;
    border-bottom:none;
}

.performance-table .grand-total-row .sticky-col{
    background:#4c1d95;
}

/* числа */
.performance-table .num{
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.performance-table .center{
    text-align:center;
}

/* drag and drop */
.performance-table .column-header-row th[draggable="true"]{
    user-select:none;
    cursor:grab;
}

.performance-table .column-header-row th.dragging{
    opacity:.5;
}

.performance-table .column-header-row th.drag-over{
    outline:2px dashed #93c5fd;
    outline-offset:-2px;
    background:#5b21b6;
}
.performance-table.th{
    max-width: 160px;
}
.performance-table.tr{
    min-width: fit-content;
}
/* скролл */
.table-wrap::-webkit-scrollbar{
    height:10px;
}

.table-wrap::-webkit-scrollbar-track{
    background:#f3effa;
    border-radius:999px;
}

.table-wrap::-webkit-scrollbar-thumb{
    background:#c4b5e3;
    border-radius:999px;
}

.table-wrap::-webkit-scrollbar-thumb:hover{
    background:#a78bcb;
}

/* блок фильтров */
.report-controls-wrap{
    width:90vw;
    max-width:90vw;
    margin:0 auto 16px;
    padding:14px 16px;
    border:1px solid #d8ccf0;
    border-radius:14px;
    background: rgba(252, 250, 255, 0.53);
    box-shadow:0 6px 20px rgba(76,29,149,.08);
}

.report-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:14px 16px;
}

/* адаптив */
@media (max-width:1200px){
    .table-wrap{
        width:95vw;
        max-width:95vw;
    }

    .report-controls-wrap{
        width:95vw;
        max-width:95vw;
    }
}

@media (max-width:768px){
    .table-floating-header{
        font-size:16px;
        min-height:48px;
        padding:10px 12px;
    }

    .performance-table{
        font-size:13px;
    }

    .performance-table th,
    .performance-table td{
        padding:10px 12px;
    }

    .performance-table thead .group-header-row th{
        top:48px;
    }

    .performance-table thead .column-header-row th{
        top:90px;
    }

    .performance-table .section-row td,
    .performance-table .section-row .section-title{
        top:134px;
    }
}
.performance-table thead .group-header-row th{
    position: sticky;
    top: 52px;
    z-index: 7;
    padding: 0;
    background: #ede7f6;
    border-bottom: 1px solid #d8ccf0;
    border-right: 3px solid #5b21b6; /* явное разделение блоков */
}

.performance-table thead .group-header-row th:last-child{
    border-right: 3px solid #5b21b6; /* последний блок тоже закрываем */
}
.performance-table thead .column-header-row th:nth-child(1),
.performance-table thead .column-header-row th:nth-child(6),
.performance-table thead .column-header-row th:nth-child(10),
.performance-table thead .column-header-row th:nth-child(14),
.performance-table thead .column-header-row th:nth-child(18),
.performance-table thead .column-header-row th:nth-child(22),
.performance-table thead .column-header-row th:nth-child(26){
    border-right: 3px solid #5b21b6 !important;
}
.performance-table tbody td:nth-child(1),
.performance-table tbody td:nth-child(6),
.performance-table tbody td:nth-child(10),
.performance-table tbody td:nth-child(14),
.performance-table tbody td:nth-child(18),
.performance-table tbody td:nth-child(22),
.performance-table tbody td:nth-child(26){
    border-right: 3px solid #5b21b6 !important;
}

.table-legend{
    width:90vw;
    max-width:100vw;
    margin:0 auto 16px;
    padding:16px 18px;
    border:1px solid #d8ccf0;
    border-radius:14px;
    background: rgba(252, 250, 255, 0.53);
    box-shadow:0 6px 20px rgba(76,29,149,.08);
}

.table-legend-title{
    margin-bottom:12px;
    color:#2e1065;
    font-size:15px;
    font-weight:800;
    letter-spacing:.2px;
}

.table-legend-items{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    align-items:center;
}

.table-legend-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:32px;
    padding:6px 10px;
    border:1px solid #ede7f6;
    border-radius:10px;
    background:#fff;
}

.legend-color{
    display:inline-block;
    width:18px;
    height:18px;
    border-radius:6px;
    border:1px solid rgba(46,16,101,.14);
    flex:0 0 18px;
}

.legend-text{
    color:#4c1d95;
    font-size:13px;
    font-weight:600;
    line-height:1.3;
}

/* цвета по вашей таблице */
.legend-color-low{
    background: #fbe764;
}

.legend-color-mid{
    background: #fb7d7d;
}

.legend-color-high{
    background: #90f479;
}


@media (max-width:1200px){
    .table-legend{
        width:95vw;
        max-width:95vw;
    }
}

@media (max-width:768px){
    .table-legend{
        padding:14px;
    }

    .table-legend-items{
        gap:8px 10px;
    }

    .table-legend-item{
        width:100%;
    }

    .legend-text{
        font-size:12px;
    }
}

.performance-table tbody tr.data-row:nth-child(even) td.cell-green,
.performance-table td.cell-green{
    background: rgba(144, 244, 121, 0.35);
}
.performance-table tbody tr.data-row:nth-child(even) td.cell-yellow,
.performance-table td.cell-yellow{
    background: rgba(251, 231, 100, 0.35);
}

.performance-table tbody tr.data-row:nth-child(even) td.cell-red,
.performance-table td.cell-red{
    background: rgba(251, 125, 125, 0.35);
}
.table-wrap + .table-wrap{
    margin-top: 28px;
}

.performance-table td.cell-green-strong{
    background: rgba(144, 244, 121, 0.6);
    color: #000000;
    font-weight: 600;
}
.performance-table td.cell-red-strong{
    background: rgba(251, 125, 125, 0.6);
    color: #000000;
    font-weight: 600;
}
.performance-table td.cell-yellow-strong{
    background: rgba(251, 231, 100, 0.6);
    color: #000000;
    font-weight: 600;
}
.table-category-block{
    width:100%;
}

.table-category-title{
    width:90vw;
    max-width:90vw;
    margin:34px auto 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    border:none;
    background:transparent;
    cursor:pointer;

    color:#4c1d95;
    font-size:20px;
    font-weight:800;
    text-align:left;
}

.table-category-title::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background:#6d28d9;
    flex:0 0 10px;
}

.table-category-title span:first-child{
    flex:0 1 auto;
}

.table-category-title::after{
    content:"";
    height:2px;
    flex:1;
    background:linear-gradient(90deg,#c4b5fd 0%, transparent 100%);
    border-radius:999px;
}

.table-category-arrow{
    flex:0 0 auto;
    font-size:18px;
    color:#6d28d9;
    transition:transform .2s ease;
}

.table-category-block.is-collapsed .table-category-arrow{
    transform:rotate(-90deg);
}

.table-category-content{
    overflow:hidden;
    transition:max-height .25s ease, opacity .2s ease;
    opacity:1;
}

.table-category-block.is-collapsed .table-category-content{
    opacity:0;
}