/* Тема RepresSale поверх Unfold по токенам amoCRM (цвета, шрифт, размеры панели,
   плотность таблиц). Всё своё — с префиксом rs-; остальное — точечные переопределения
   разметки Unfold 0.110 (вне слоёв Tailwind, поэтому побеждают без лишней специфичности). */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

:root {
    --amo-bg: #f5f5f5;
    --amo-surface: #ffffff;
    --amo-text: #363b44;
    --amo-text-2: #92989b;
    --amo-border: #e8eaeb;
    --amo-border-2: #c5c5c5;
    --amo-blue: #4c8bf7;
    --amo-blue-dark: #4077d6;
    --amo-link: #0057a9;
    --amo-green: #24bc8c;
    --amo-red: #f37575;
    --amo-yellow: #e4b248;
    --amo-purple: #7259eb;
    --amo-nav: #1b3446;
    --amo-nav-2: #162b3a;
    --amo-nav-text: #9da8ae;
    --amo-nav-border: #224357;
    --amo-badge: #ce3942;
    --radius-default: 4px;
}

body { font-family: "PT Sans", Arial, sans-serif; color: var(--amo-text); }
#main { background: var(--amo-bg) !important; }
#main > div:first-child { background: #fff !important; border-bottom: 1px solid var(--amo-border) !important; }
html.dark #main { background: #0f172a !important; }
html.dark #main > div:first-child { background: #111827 !important; }

/* таблицы: плотнее, шапка серая, как списки amo */
table.border-spacing-none td { height: 40px !important; line-height: 1.3; }
table.border-spacing-none th { font-size: 12px; color: var(--amo-text-2); font-weight: 700; }
a.rounded-default.shadow-xs:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }
code[style*="user-select"] { font-size: 12px; padding: 2px 6px; border-radius: 4px; background: rgba(148, 163, 184, 0.15); }

/* компактный аудиоплеер (списки и карточки) */
.rs-audio { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; vertical-align: middle; }
.rs-audio-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--amo-blue); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: 0 0 30px; }
.rs-audio-btn:hover { background: var(--amo-blue-dark); }
.rs-audio-btn .material-symbols-outlined { font-size: 20px; }
.rs-audio .pause { display: none; }
.rs-audio.playing .play { display: none; }
.rs-audio.playing .pause { display: inline; }
.rs-audio-bar { width: 110px; height: 6px; border-radius: 999px; background: rgba(148, 163, 184, .3); overflow: hidden; cursor: pointer; }
.rs-audio-bar i { display: block; height: 100%; width: 0; background: var(--amo-blue); transition: width .25s linear; }
.rs-audio-time { font-variant-numeric: tabular-nums; font-size: 12px; opacity: .75; min-width: 80px; }
.rs-audio-dl { opacity: .55; display: inline-flex; }
.rs-audio-dl:hover { opacity: 1; }
.rs-audio-dl .material-symbols-outlined { font-size: 18px; }

/* ---------- рабочий стол ---------- */
.rs-hero {
    background: radial-gradient(900px 380px at 20% -10%, rgba(255,255,255,.14), transparent 60%),
                linear-gradient(135deg, #162b3a 0%, #1b4361 48%, #2f80ed 100%);
    border-radius: 6px; padding: 22px 24px 18px; color: #fff; margin-bottom: 16px;
}
.rs-hero-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.rs-hero-title { font-size: 22px; font-weight: 700; }
.rs-hero-sub { font-size: 13px; opacity: .8; margin-top: 2px; }
.rs-period { display: inline-flex; gap: 2px; background: rgba(255,255,255,.14); border-radius: 4px; padding: 3px; }
.rs-period a { color: #dbeafe; text-decoration: none; padding: 7px 15px; border-radius: 3px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.rs-period a:hover { background: rgba(255,255,255,.12); }
.rs-period a.active { background: #fff; color: #162b3a; }

.rs-funnel-row { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; flex-wrap: wrap; }
.rs-funnel-row:last-child { margin-bottom: 0; }
.rs-side { min-width: 190px; display: flex; flex-direction: column; justify-content: center; padding: 8px 18px 8px 4px; border-right: 1px solid rgba(255,255,255,.25); }
.rs-side-big { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.rs-side-cap { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-top: 6px; font-weight: 700; }
.rs-side-delta { font-size: 12px; margin-top: 6px; }
.rs-side-lost { font-size: 12px; opacity: .85; margin-top: 10px; }
.rs-stages { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; min-width: 0; }
.rs-stage {
    flex: 1 1 140px; min-width: 140px; background: rgba(6, 20, 50, .55); border-radius: 4px; padding: 12px 14px 10px;
    position: relative; border-top: 3px solid var(--c, #60a5fa); color: #fff; text-decoration: none;
    transition: background .12s ease;
}
.rs-stage:hover { background: rgba(6, 20, 50, .72); }
.rs-stage:not(:last-child)::after {
    content: ""; position: absolute; right: -8px; top: 42%;
    border-left: 8px solid rgba(255,255,255,.35); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.rs-stage-name { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.rs-stage-num { font-size: 30px; font-weight: 700; margin-top: 6px; line-height: 1.1; }
.rs-stage-sub { font-size: 12px; opacity: .65; margin-top: 2px; }
.rs-funnel-row--visits .rs-stage { flex-basis: 160px; }

.rs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-bottom: 16px; }
.rs-tile {
    background: #fff; border-radius: 4px; padding: 14px 16px 12px; border-top: 4px solid var(--c, #4c8bf7);
    border-left: 1px solid var(--amo-border); border-right: 1px solid var(--amo-border); border-bottom: 1px solid var(--amo-border);
    text-decoration: none; color: inherit; display: block; transition: box-shadow .12s ease;
}
.rs-tile:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .1); }
.rs-tile-cap { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--amo-text-2); font-weight: 700; }
.rs-tile-num { font-size: 34px; font-weight: 400; line-height: 1.1; margin-top: 8px; letter-spacing: -.5px; }
.rs-tile-delta { font-size: 12px; margin-top: 6px; }
.rs-up { color: #1aa876; }
.rs-down { color: #e0505f; }
.rs-flat { opacity: .6; }
.rs-side .rs-up { color: #86efac; }
.rs-side .rs-down { color: #fca5a5; }

.rs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; }
.rs-card { background: #fff; border-radius: 4px; padding: 16px 18px; border: 1px solid var(--amo-border); min-width: 0; }
.rs-card--wide { grid-column: span 2; }
@media (max-width: 760px) { .rs-card--wide { grid-column: span 1; } }
.rs-card h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--amo-text-2); display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.rs-card h3 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rs-chart { height: 220px; position: relative; }
.rs-empty { margin: 24px 0; text-align: center; font-size: 13px; color: var(--amo-text-2); }
.rs-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

html.dark .rs-tile, html.dark .rs-card { background: #1f2937; color: #e5e7eb; border-color: rgba(148, 163, 184, .15); }

/* ======================================================================
   Боковая панель как в amoCRM: 72px, тёмная, иконка в круге + подпись.
   Только на широких экранах (xl у Unfold = 1280px); на планшете/телефоне
   остаётся обычная выезжающая панель Unfold.
   ====================================================================== */
@media (min-width: 1280px) {
    [x-show="sidebarOpen"], #nav-sidebar, #nav-sidebar-inner { width: 72px !important; min-width: 72px !important; }
    #nav-sidebar .cursor-col-resize { display: none; }
    #nav-sidebar, #nav-sidebar-inner, #nav-sidebar > div { background: var(--amo-nav) !important; border-color: transparent !important; color: var(--amo-nav-text); }

    /* верхний блок с логотипом */
    #nav-sidebar-inner > div:first-child { background: var(--amo-nav-2) !important; height: 65px !important; padding: 0 !important; margin-bottom: 4px !important; justify-content: center; border-bottom: 0 !important; }
    #nav-sidebar-inner > div:first-child > div { padding: 0 !important; margin: 0 !important; justify-content: center; background: transparent !important; }
    #nav-sidebar-inner > div:first-child img { content: url("/static/brand/icon.svg"); height: 34px; width: 34px; margin: 0 !important; }
    #nav-sidebar-inner > div:first-child .material-symbols-outlined { display: none; }
    #nav-sidebar-inner > div:first-child [x-show="siteDropdownOpen"] { left: 6px; right: auto; width: 280px; }

    /* группы и пункты */
    #nav-sidebar-apps h2 { display: none; }
    #nav-sidebar-apps > div { margin-bottom: 0 !important; }
    #nav-sidebar-apps ol { padding: 6px 2px !important; gap: 0; }
    #nav-sidebar-apps > div + div ol { border-top: 1px solid rgba(255,255,255,.07); margin-top: 4px; padding-top: 10px !important; }
    #nav-sidebar-apps ol > li > a {
        flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px;
        height: auto !important; min-height: 60px; margin: 0 0 6px !important; padding: 4px 2px !important;
        border-radius: 0; color: var(--amo-nav-text); text-align: center; position: relative; background: transparent !important;
        transition: color .12s ease;
    }
    #nav-sidebar-apps ol > li > a:hover { color: #fff; }
    #nav-sidebar-apps ol > li > a.active { color: #fff; font-weight: 700; }
    #nav-sidebar-apps ol > li > a .material-symbols-outlined {
        margin: 0 !important; width: 32px !important; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1;
        display: inline-flex; align-items: center; justify-content: center; border: 1.2px solid transparent;
        transition: background .12s ease, border-color .12s ease;
    }
    #nav-sidebar-apps ol > li > a:hover .material-symbols-outlined { background: rgba(161, 213, 246, .15); }
    #nav-sidebar-apps ol > li > a.active .material-symbols-outlined { background: rgba(161, 213, 246, .3); border-color: rgba(255,255,255,.25); }
    #nav-sidebar-apps ol > li > a > span:nth-child(2) { font-size: 11px; line-height: 13px; max-width: 66px; white-space: normal; }
    #nav-sidebar-apps ol > li > a > *:nth-child(3) {
        position: absolute; top: 0; right: 8px; margin: 0 !important; min-width: 16px; height: 16px; padding: 0 4px;
        border-radius: 20px; background: var(--amo-badge) !important; color: #fff !important; font-size: 10px; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* нижний блок пользователя */
    #nav-sidebar-inner > div:last-child { background: var(--amo-nav-2) !important; padding: 0 !important; border-top: 1px solid var(--amo-nav-border) !important; }
    #nav-sidebar-inner > div:last-child > div.cursor-pointer { margin: 0 !important; padding: 0 !important; justify-content: center; height: 65px !important; min-height: 65px !important; border-radius: 0; }
    #nav-sidebar-inner > div:last-child > div.cursor-pointer:hover { background: rgba(255,255,255,.06) !important; }
    #nav-sidebar-inner > div:last-child > div.cursor-pointer > div.flex-col,
    #nav-sidebar-inner > div:last-child > div.cursor-pointer > span.material-symbols-outlined { display: none; }
    #nav-sidebar-inner > div:last-child > div.cursor-pointer > div:first-child { background: var(--amo-blue) !important; color: #fff !important; border-radius: 50% !important; }
    #nav-sidebar-inner > div:last-child nav[x-show="openUserLinks"] { left: 6px; right: auto; width: 250px; }
}