:root {
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-blue: #eef4ff;
    --border: #dfe5ee;
    --border-strong: #c6d0dd;
    --text: #101828;
    --muted: #667085;
    --muted-strong: #344054;
    --brand: #530086;
    --brand-dark: #3d0066;
    --brand-soft: #f4ecff;
    --primary: #2857d9;
    --primary-dark: #1f45b5;
    --success: #16803c;
    --success-dark: #116331;
    --warning: #b45309;
    --danger: #b42318;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 30px rgba(16, 24, 40, 0.07);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    letter-spacing: 0;
}

/* Feedback is intentionally quiet in the header: it is available everywhere
   without competing with the current page's primary actions. */
.topbar-feedback {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.topbar-feedback:hover {
    background: var(--brand-soft);
    border-color: #dcc7f5;
    color: var(--brand-dark);
}

.topbar-feedback-short { display: none; }

.feedback-panel { max-width: 820px; }

.feedback-list {
    display: grid;
    gap: 10px;
}

.feedback-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.feedback-item-main { min-width: 0; }
.feedback-item-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.feedback-item h2 { margin: 10px 0 6px; font-size: 17px; line-height: 1.35; }
.feedback-item p { margin: 0 0 10px; color: var(--muted-strong); line-height: 1.5; }
.feedback-item small { color: var(--muted); }
.feedback-item-actions { display: grid; gap: 8px; min-width: 184px; }
.feedback-status-form { display: grid; gap: 8px; }
.feedback-status-form .input { min-height: 36px; }

.news-body { margin: 0 0 12px; color: var(--muted-strong); line-height: 1.6; }
.news-body p { margin: 0 0 10px; }
.news-body ul, .news-body ol { margin: 0 0 10px; padding-left: 22px; }
.news-body a { color: var(--primary); }
.news-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 12px; }
.news-gallery-item { display: block; width: min(100%, 480px); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.news-gallery-item img { width: 100%; height: auto; display: block; }
.news-attachments { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.news-attachments a { color: var(--primary); font-size: 14px; }
.news-media-existing { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.news-media-existing-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.news-media-existing-item img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.news-media-existing-item-file { flex-direction: row; align-items: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; }

.news-reactions { margin: 4px 0 14px; }
.news-comments { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.news-comment { display: grid; gap: 2px; }
.news-comment-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.news-comment-author { font-weight: 600; color: var(--muted-strong); }
.news-comment-body { margin: 0; color: var(--muted-strong); line-height: 1.5; white-space: pre-line; }
.news-comment-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.news-comment-form .input { flex: 1; min-height: 38px; resize: vertical; }

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}
.link-button:hover { color: var(--primary); }

@media (max-width: 720px) {
    .news-comment-form { flex-direction: column; }
    .topbar-feedback { padding: 7px 9px; font-size: 12px; }
    .feedback-item { display: grid; }
    .feedback-item-actions { min-width: 0; }
    .feedback-status-form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover { color: var(--primary-dark); }

.topbar {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand,
.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}

.brand small,
.login-brand small,
.userbox small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.userbox {
    text-align: right;
    font-size: 14px;
}

.shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: calc(100vh - 64px);
}

.sidebar {
    background: #fbfcfe;
    border-right: 1px solid var(--border);
    padding: 16px 12px;
}

.nav {
    min-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nav-section {
    display: grid;
    gap: 5px;
}

.nav-account { margin-top: auto; }

.nav-label {
    margin: 0 10px 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.nav-link {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted-strong);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.nav-link:hover {
    background: var(--surface-blue);
    border-color: #dbeafe;
    color: var(--primary-dark);
}

.nav-link.disabled,
.nav-link.disabled:hover {
    background: transparent;
    border-color: transparent;
    color: #98a2b3;
    cursor: default;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.nav-link > .nav-badge,
.nav-accordion > summary.nav-link > .nav-badge {
    margin-left: auto;
}

.nav-badge-info {
    color: #1d4ed8;
    background: #dbeafe;
}

.nav-badge-warning {
    color: #b45309;
    background: #ffedd5;
}

.nav-badge-danger {
    color: #b91c1c;
    background: #fee2e2;
}

.nav-accordion {
    display: grid;
    gap: 4px;
}

.nav-accordion > summary {
    list-style: none;
}

.nav-accordion > summary::-webkit-details-marker {
    display: none;
}

.nav-accordion > summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.16s ease;
}

.nav-accordion[open] > summary::after {
    transform: rotate(180deg);
}

.nav-submenu {
    display: grid;
    gap: 3px;
    margin-left: 34px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.nav-sublink {
    display: block;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--muted-strong);
    font-size: 14px;
}

.nav-sublink:hover {
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.nav-sublink.active {
    background: var(--surface-blue);
    color: var(--primary-dark);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primary);
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eef2f6;
    color: var(--muted-strong);
    font-size: 14px;
    flex: 0 0 auto;
}

/* The sprite itself is markup, not a picture: it must occupy no space and be
   invisible, while its <symbol>s stay referencable by <use>. */
.nav-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Drawn from the link's own colour, so hover and active states need no
   separate icon rules. */
.nav-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.button-link { appearance: none; }

.main {
    width: 100%;
    max-width: none;
    padding: 28px;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.page-head h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 750;
}

.page-head p {
    margin: 6px 0 0;
    color: var(--muted);
}

.split { align-items: center; }

.back-link {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 14px;
}

.button-row,
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.summary-row div,
.panel,
.stats a,
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.accent-blue { border-top-color: var(--primary); }
.accent-orange { border-top-color: var(--warning); }
.accent-green { border-top-color: var(--success); }

.summary-row {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.summary-row div { padding: 16px; }
.summary-row span { color: var(--muted); }
.summary-row strong {
    display: block;
    margin-top: 4px;
    font-size: 28px;
}

/* Learning module */
.learning-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.learning-stats div {
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.learning-stats span,
.muted-text {
    color: var(--muted);
    font-size: 13px;
}

.learning-stats strong {
    display: block;
    margin-top: 4px;
    font-size: 28px;
}

.learning-toolbar-panel {
    margin-bottom: 16px;
}

.learning-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1.2fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.learning-toolbar.materials-toolbar {
    grid-template-columns: minmax(140px, 0.7fr) minmax(170px, 1fr) minmax(140px, 0.7fr) minmax(160px, 0.8fr) minmax(220px, 1.2fr) auto;
}

.learning-toolbar.my-learning-toolbar {
    grid-template-columns: minmax(180px, 240px) minmax(260px, 1fr) auto;
}

.learning-toolbar label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.scope-note {
    margin: 12px 0 0;
    color: var(--muted);
}

.stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.stats a {
    padding: 12px;
    color: var(--text);
    box-shadow: none;
}

/* Filter tiles are tinted with their status color at rest, not plain white -
   so what each button means is visible before you click, not only after
   ("Все" has no status of its own, so it gets a neutral tint instead).
   Selecting one switches to a solid, more saturated version of the same
   color so the active tile is unmistakable at a glance. */
.stats a {
    background: var(--surface-soft);
}

.stats a.active {
    border-color: var(--brand);
    background: var(--brand);
}

.stats a.status-new {
    border-color: #bfdbfe;
    background: var(--surface-blue);
}

.stats a.status-progress {
    border-color: #fde68a;
    background: #fefce8;
}

.stats a.status-done {
    border-color: #bbf7d0;
    background: #ecfdf3;
}

.stats a.status-rejected {
    border-color: #fecaca;
    background: #fef2f2;
}

.stats a.status-new.active {
    border-color: var(--primary);
    background: var(--primary);
}

.stats a.status-progress.active {
    /* Not var(--warning) (#b45309, brownish) and not orange either (too
       close to the "Отказ" tile's red) - a plain, unambiguous yellow.
       White text has poor contrast on yellow, so this tile keeps dark
       text instead of the white every other active tile uses. */
    border-color: #eab308;
    background: #eab308;
}

.stats a.status-progress.active strong,
.stats a.status-progress.active span {
    color: #422006;
}

.stats a.status-done.active {
    border-color: var(--success);
    background: var(--success);
}

.stats a.status-rejected.active {
    border-color: var(--danger);
    background: var(--danger);
}

.stats a.active strong,
.stats a.active span {
    color: #fff;
}

/* «Ждут вашего ответа» - the dealer's backlog on the CRM list, same amber as
   its sidebar badge (apps/portal/services/crm_notifications.py). */
.stats a.status-awaiting {
    border-color: #fdba74;
    background: #fff7ed;
}

.stats a.status-awaiting.active {
    border-color: var(--warning);
    background: var(--warning);
}

/* A row that is new or changed since the previous visit, or waits for the
   reader's answer: a thin stripe and a small mark, not a repainted row -
   a list where half the rows shout reads as none. */
.data-table tr.row-fresh > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}

.row-mark {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-blue);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

.row-mark-warning {
    background: #fff7ed;
    color: var(--warning);
}

/* A lead the dealer has left unanswered too long (crm_notifications.LEAD_RESPONSE_OVERDUE_DAYS). */
.row-mark.row-mark-danger {
    background: #fdecec;
    color: #b42318;
}

.stats strong {
    display: block;
    font-size: 22px;
}

.stats span {
    color: var(--muted);
    font-size: 13px;
}

.toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 240px) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

textarea {
    min-height: 92px;
    resize: vertical;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(37, 99, 235, 0.14);
    border-color: var(--primary);
}

.btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.btn:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.btn.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.btn.success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.btn.success:hover {
    background: var(--success-dark);
    border-color: var(--success-dark);
    color: #fff;
}

.btn.secondary {
    background: var(--surface-blue);
    border-color: #bfdbfe;
    color: var(--primary-dark);
}

.btn.ghost {
    background: #fff;
    border-color: var(--border);
    color: var(--muted-strong);
}

.btn.ghost:hover {
    border-color: #bfdbfe;
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.btn.danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn.danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.btn.small {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 13px;
}

.btn.disabled {
    opacity: 0.55;
    cursor: default;
}

.btn:disabled,
.action-menu-item:disabled,
button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn:disabled:hover {
    background: inherit;
}

.icon-button {
    width: 40px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
}

.actions-menu {
    position: relative;
}

.actions-menu summary {
    list-style: none;
}

.actions-menu summary::-webkit-details-marker {
    display: none;
}

.actions-menu-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.actions-menu-list a {
    display: block;
    padding: 10px 11px;
    border-radius: 6px;
    color: var(--text);
    font-weight: 650;
    text-decoration: none;
}

.actions-menu-list a:hover {
    background: var(--surface-soft);
}

.actions-menu-list .danger-link {
    color: #b91c1c;
}

.actions-menu-list .danger-link:hover {
    background: #fef2f2;
}

.export-menu {
    display: inline-flex;
}

.export-menu-trigger {
    min-width: 122px;
}

.menu-chevron {
    font-size: 12px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.export-menu[open] .menu-chevron {
    transform: rotate(180deg);
}

.export-menu-list {
    min-width: 122px;
}

.export-menu-list a {
    text-align: center;
}

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

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.data-table tr:hover td { background: #fbfdff; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.program-table-title {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 260px;
}

.program-table-cover {
    width: 88px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.program-table-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.status-new {
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.status-progress {
    background: #fff7ed;
    color: var(--warning);
}

.status-done {
    background: #ecfdf3;
    color: var(--success);
}

.status-rejected {
    background: #fef3f2;
    color: var(--danger);
}

.status-neutral {
    background: var(--surface-soft);
    color: var(--muted);
}

.status-thinking {
    background: #f3ecfd;
    color: #6d28d9;
}

.status-website {
    background: #e6fbf8;
    color: #0f766e;
}

.server-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.server-status-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.server-status-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
}

.server-status-card strong {
    display: block;
    font-size: 28px;
    font-weight: 850;
    color: var(--text);
}

.server-status-card .note {
    margin-top: 4px;
}

.invitation-status-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
}

.invitation-status-tile {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.invitation-status-tile:hover {
    border-color: var(--primary);
}

.invitation-status-tile.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(91, 33, 182, .12);
}

.invitation-status-tile strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
}

.invitation-status-tile span {
    font-size: 12px;
    color: var(--muted);
}

.invitation-status-tile.status-tile-activated strong { color: var(--success); }
.invitation-status-tile.status-tile-failed strong,
.invitation-status-tile.status-tile-expired strong { color: var(--danger); }
.invitation-status-tile.status-tile-pending strong { color: var(--primary-dark); }

/* The reason in words (learning_mail.delivery_reason, 22.10.2026) - short enough to wrap. */
.invitation-delivery-error {
    margin-top: 3px;
    max-width: 260px;
    color: #9b1c1c;
}
/* A likely slip in an address (learning_mail.email_hint) - a question, not an error. */
.email-typo-hint {
    margin-top: 3px;
    max-width: 320px;
    color: #8a5a00;
}

.publication-draft {
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.publication-ready {
    background: #f5f3ff;
    color: #6d28d9;
}

.publication-published {
    background: #ecfdf3;
    color: var(--success);
}

.publication-hidden {
    background: #fff7ed;
    color: var(--warning);
}

.publication-archived {
    background: #f1f5f9;
    color: var(--muted-strong);
}

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.panel { padding: 18px; }

.panel h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-head h2 { margin: 0; }
.panel-head p {
    margin: 4px 0 0;
    color: var(--muted);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.record-list {
    display: grid;
    gap: 10px;
}

.record-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.record-item small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.record-item.compact {
    padding: 10px;
}

/* Passive list records are full-size links; embedded controls keep their own behavior. */
[data-row-link] {
    cursor: pointer;
}

[data-row-link]:focus-visible {
    outline: 3px solid rgb(83 0 134 / 0.35);
    outline-offset: 3px;
}

.data-table tbody tr[data-row-link]:hover td {
    background: #f7f4fc;
}

.data-table tbody tr[data-row-link]:focus-visible td {
    background: #f5f1fb;
}

.record-item[data-row-link]:hover,
.attention-item[data-row-link]:hover {
    border-color: #cfc0eb;
    box-shadow: 0 8px 18px rgb(41 22 79 / 0.08);
}

.bulk-actions {
    display: grid;
    grid-template-columns: minmax(220px, 320px) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
}

.bulk-actions label {
    display: grid;
    gap: 6px;
    margin: 0;
}

/* Learning cards */
.learning-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.learning-card-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.learning-card {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.learning-card-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background: #eef2f6;
}

.learning-card h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
}

.learning-card p {
    margin: 0;
    color: var(--muted);
}

.learning-card-top,
.learning-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.learning-card-top {
    justify-content: space-between;
}

.learning-card-meta {
    margin-top: auto;
    color: var(--muted);
    font-size: 13px;
}

.assignment-line {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-blue);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 750;
}

.assignment-line.required {
    background: #fff7ed;
    color: #c2410c;
}

.assignment-line.overdue {
    background: #fef2f2;
    color: #b91c1c;
}

.program-category-list {
    display: grid;
    gap: 26px;
}

.program-category-section {
    display: grid;
    gap: 12px;
}

.program-category-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.program-category-head h3 {
    margin: 0;
    font-size: 17px;
}

.program-category-head span {
    min-width: 28px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2f6;
    color: var(--muted-strong);
    font-weight: 800;
    font-size: 13px;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #eef2f6;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 750;
}

.course-hero {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin-bottom: 24px;
}

.course-cover {
    width: 320px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #eef2f6;
}

.course-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-cover-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 28px;
    font-weight: 800;
}

.course-hero h1 {
    margin: 4px 0 8px;
}

.preview-ribbon {
    width: fit-content;
    margin: 8px 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f5f3ff;
    color: #6d28d9;
    font-weight: 700;
}

.readiness-panel {
    margin-bottom: 24px;
}

.readiness-list {
    display: grid;
    gap: 8px;
}

.readiness-item {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.readiness-item span {
    color: var(--muted);
}

.readiness-blocker {
    border-color: #fecaca;
    background: #fff7f7;
}

.readiness-warning {
    border-color: #fed7aa;
    background: #fffbeb;
}

.readiness-ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.action-menu {
    position: relative;
    justify-self: end;
}

.action-menu > summary {
    list-style: none;
}

.action-menu > summary::after {
    content: "▾";
    margin-left: 2px;
    font-size: 13px;
    transition: transform 0.16s ease;
}

.action-menu[open] > summary::after {
    transform: rotate(180deg);
}

.action-menu > summary::-webkit-details-marker {
    display: none;
}

.action-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    width: min(280px, 90vw);
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.action-menu-item {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.action-menu-item:hover {
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.action-menu-item.success-action {
    color: var(--success);
}

.action-menu-item.danger-action {
    color: var(--danger);
}

.action-menu-hint {
    margin: 4px 4px 0;
    color: var(--muted);
    font-size: 13px;
}

.field-title {
    margin-bottom: 6px;
    color: var(--muted-strong);
    font-weight: 800;
}

.combo-field {
    position: relative;
}

.combo-field .input {
    padding-right: 42px;
}

.combo-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid var(--border-strong);
    border-radius: 0 8px 8px 0;
    background: #fff;
    color: var(--muted-strong);
    font: inherit;
    cursor: pointer;
}

.combo-toggle:hover {
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.combo-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    display: none;
    max-height: 240px;
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.combo-field.open .combo-menu {
    display: grid;
    gap: 3px;
}

.combo-menu button,
.combo-empty {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 650;
    text-align: left;
}

.combo-menu button {
    cursor: pointer;
}

.combo-menu button:hover {
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.combo-empty {
    color: var(--muted);
}

.program-group-picker {
    display: grid;
    gap: 10px;
}

.course-layout {
    align-items: start;
}

.course-step-list {
    display: grid;
    gap: 10px;
}

.course-step {
    position: relative;
    min-height: 92px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.course-step-hit-area {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.course-step:not(.locked):hover {
    border-color: #93c5fd;
    box-shadow: 0 6px 18px rgb(37 99 235 / 0.09);
}

.course-step-hit-area:focus-visible {
    outline: 3px solid rgb(37 99 235 / 0.38);
    outline-offset: 2px;
}

.course-step-index,
.course-step-main,
.course-step-actions {
    position: relative;
    z-index: 2;
}

.course-step-index,
.course-step-main,
.course-step-actions {
    pointer-events: none;
}

.course-step-actions form,
.course-step-actions a,
.course-step-actions button {
    pointer-events: auto;
}

.course-step.done {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.course-step.failed {
    border-color: #fecaca;
    background: #fff7f7;
}

.course-step:target {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}

.course-step.locked {
    opacity: 0.58;
    background: var(--surface-soft);
}

.course-step-index {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-blue);
    color: var(--primary-dark);
    font-weight: 800;
}

.course-step.failed .course-step-index {
    background: #fee2e2;
    color: var(--danger);
}

.course-step-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.course-step-cover {
    width: 82px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.course-step-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-step h3,
.course-step p {
    margin: 4px 0 0;
}

.course-step-body {
    min-width: 0;
}

.course-step-body h3 {
    overflow-wrap: anywhere;
}

/* Learning content authoring: rich text and consistent 16:9 cover selection. */
.cover-picker { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border: 1px dashed #bba2ec; border-radius: 8px; background: #fbf9ff; }
.cover-picker.drag-over { border-color: var(--primary); background: #f5efff; }
.cover-picker-preview { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; border-radius: 6px; background: #efe8fb; color: var(--muted-strong); cursor: grab; }
.cover-picker-preview:active { cursor: grabbing; }
.cover-picker-preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-picker-actions { display: grid; gap: 8px; align-content: center; }
.cover-picker-actions > small { color: var(--muted); }
.cover-picker-actions input[type="file"] { max-width: 100%; }
.cover-crop-controls { display: grid; gap: 6px; padding-top: 4px; }
.cover-crop-controls label { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; }
.cover-crop-controls small { color: var(--muted); }
.rich-text-editor { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.rich-text-editor-head { display: grid; gap: 4px; }
.rich-text-editor-head > div:first-child { display: grid; gap: 4px; }
.rich-text-editor-head small { color: var(--muted); }
.rich-text-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px; border: 1px solid #d7c8f2; border-radius: 7px; background: #f8f5ff; }
.rich-text-toolbar-group { display: flex; align-items: center; gap: 4px; padding-right: 8px; border-right: 1px solid #d7c8f2; }
.rich-text-toolbar-group--media { padding-right: 0; border-right: 0; }
.rich-text-toolbar button { width: 36px; height: 34px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: var(--text); cursor: pointer; font-size: 14px; }
.rich-text-toolbar button:hover, .rich-text-toolbar button:focus-visible { border-color: var(--primary); color: var(--primary); background: #eee8fb; }
.rich-text-toolbar button.is-active,
.rich-text-toolbar button[aria-pressed="true"],
.rich-text-toolbar-field.is-active,
.rich-text-color-control.is-active {
    border-color: #7c3fc1;
    background: #ece1fb;
    color: #4d148c;
    box-shadow: inset 0 0 0 1px rgba(124, 63, 193, .12);
}
.rich-text-toolbar button.is-active strong,
.rich-text-toolbar button.is-active em,
.rich-text-toolbar button.is-active u { color: inherit; }
.rich-text-toolbar-field,
.rich-text-color-control { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 7px 0 9px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: var(--muted); font-size: 12px; cursor: pointer; }
.rich-text-toolbar-field:focus-within,
.rich-text-color-control:hover,
.rich-text-color-control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 33, 182, .12); }
.rich-text-toolbar-select { height: 32px; min-width: 116px; padding: 0 24px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.rich-text-toolbar-select:focus-visible { outline: none; }
.rich-text-color-control input { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.rich-text-editor-surface { min-height: 230px; padding: 16px; border: 1px solid #bfcae0; border-radius: 6px; background: #fff; line-height: 1.6; outline: none; }
.rich-text-editor-surface:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 33, 182, .12); }
.rich-text-editor-surface:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.rich-text-editor-surface h2, .rich-text-editor-surface h3, .rich-text-editor-surface h4 { margin: 18px 0 8px; }
.rich-text-editor-surface p { margin: 0 0 12px; }
.rich-text-editor-surface .lesson-inline-image,
.rich-text-editor-surface .lesson-inline-video { display: block; margin: 16px auto; }
.rich-text-editor-surface .lesson-inline-image { width: min(100%, 760px); height: auto; max-height: none; cursor: pointer; background: transparent; outline: 2px solid transparent; outline-offset: 3px; }
.rich-text-editor-surface .lesson-inline-image.is-selected { outline-color: var(--primary); }
.rich-text-editor-surface .lesson-inline-image[data-size="small"] { width: min(100%, 320px); }
.rich-text-editor-surface .lesson-inline-image[data-size="medium"] { width: min(100%, 540px); }
.rich-text-editor-surface .lesson-inline-image[data-size="large"],
.rich-text-editor-surface .lesson-inline-image:not([data-size]) { width: min(100%, 760px); }
.rich-text-editor-surface .lesson-inline-image[data-size="full"] { width: 100%; }
.rich-text-editor-surface .lesson-inline-video { width: min(100%, 760px); max-height: 520px; background: #0f172a; object-fit: contain; }
.rich-text-image-size { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid #d7c8f2; border-radius: 6px; background: #f8f5ff; font-size: 13px; }
.rich-text-image-size > span { color: var(--muted); }
.rich-text-image-size-options { display: flex; flex-wrap: wrap; gap: 6px; }
.rich-text-image-size button { min-height: 30px; padding: 4px 9px; border: 1px solid #c8b6ed; border-radius: 5px; background: #fff; color: var(--primary); font: inherit; cursor: pointer; }
.rich-text-image-size button:hover, .rich-text-image-size button:focus-visible, .rich-text-image-size button[aria-pressed="true"] { border-color: var(--primary); background: #ece5fb; color: #43118f; }
.rich-text-hidden-fields { display: none; }
.bulk-user-manager-field { max-width: 480px; }
.bulk-user-manager-search { margin-bottom: 6px; }
.bulk-user-table th, .bulk-user-table td { vertical-align: top; }
.bulk-user-table input { width: 100%; min-width: 110px; }
.bulk-user-groups-cell { min-width: 260px; }
.bulk-user-groups-search { margin-bottom: 6px; }
.bulk-user-groups-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    background: var(--surface-soft);
}
.bulk-user-table .bulk-user-groups-list label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 2px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}
.bulk-user-groups-list label:hover { background: var(--surface-blue); border-radius: 4px; }
.bulk-user-groups-list input[type="checkbox"] { margin-top: 2px; width: auto; min-width: 0; }
.bulk-user-row-hidden { display: none; }
.bulk-user-row-active { text-align: center; }
.bulk-user-row-remove { text-align: center; }
.bulk-user-row-remove .btn { padding: 4px 10px; line-height: 1; }
.rich-text-assets { display: grid; gap: 6px; }
.rich-text-asset-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; background: #f0f4fa; font-size: 13px; }
.existing-step-documents { display: grid; gap: 5px; margin-top: 8px; }
.existing-step-documents a { width: fit-content; max-width: 100%; overflow: hidden; color: var(--primary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-text { line-height: 1.65; }
.lesson-text > :first-child { margin-top: 0; }
.lesson-text > :last-child { margin-bottom: 0; }
.lesson-text h2, .lesson-text h3, .lesson-text h4 { margin: 24px 0 10px; }
.lesson-text p, .lesson-text ul, .lesson-text ol, .lesson-text blockquote { margin: 0 0 14px; }
.lesson-text blockquote { padding: 10px 14px; border-left: 3px solid var(--primary); background: #f7f4ff; }
.lesson-text a { color: var(--primary); }
.lesson-media { margin: 20px 0; }
.lesson-media img, .lesson-media video { display: block; width: 100%; margin: 0 auto; border-radius: 6px; }
.lesson-image { max-width: min(100%, 760px); }
.lesson-image--small { max-width: min(100%, 320px); }
.lesson-image--medium { max-width: min(100%, 540px); }
.lesson-image--large { max-width: min(100%, 760px); }
.lesson-image--full { max-width: 100%; }
.lesson-image--align-center { margin-left: auto; margin-right: auto; }
.lesson-image--align-right { margin-left: auto; margin-right: 0; }
.lesson-image img { height: auto; max-height: none; background: transparent; object-fit: initial; }
.lesson-video { max-width: min(100%, 900px); }
.lesson-video video { max-height: 680px; background: #0f172a; object-fit: contain; }

@media (max-width: 700px) {
    .cover-picker { grid-template-columns: 1fr; }
    .cover-picker-preview { max-width: 420px; width: 100%; }
    .rich-text-editor-head { display: grid; }
    .rich-text-toolbar { gap: 7px; padding: 8px; }
    .rich-text-toolbar-group { padding-right: 7px; }
    .rich-text-toolbar-group--media { padding-right: 0; }
    .rich-text-toolbar button { width: 38px; height: 36px; }
    .rich-text-toolbar-field,
    .rich-text-color-control { min-height: 36px; }
    .rich-text-toolbar-select { height: 34px; min-width: 104px; }
    .rich-text-image-size { align-items: flex-start; flex-direction: column; }
}

.step-publication {
    margin-left: 6px;
}

.program-about-collapse {
    display: flex;
    flex-direction: column;
}

.program-about-collapse summary {
    order: 2;
    width: fit-content;
    margin-top: 10px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.program-about-collapse summary::-webkit-details-marker {
    display: none;
}

.program-about-collapse summary::marker {
    content: "";
}

.program-about-collapse .summary-open {
    display: inline;
}

.program-about-collapse .summary-closed {
    display: none;
}

.program-about-collapse:not([open]) .summary-open {
    display: none;
}

.program-about-collapse:not([open]) .summary-closed {
    display: inline;
}

.program-about-text {
    order: 1;
    position: relative;
    line-height: 1.55;
}

.program-about-collapse:not([open]) .program-about-text {
    max-height: 15.5em;
    overflow: hidden;
}

.program-about-collapse:not([open]) .program-about-text::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3.5em;
    background: linear-gradient(180deg, rgb(255 255 255 / 0), var(--surface) 82%);
}

.course-step-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.step-order-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.step-order-control > span {
    padding: 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.step-order-form {
    display: inline-flex;
    gap: 4px;
}

.course-side-nav {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.course-side-nav a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--muted-strong);
}

.course-side-nav a.active,
.course-side-nav a:hover {
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.course-access-summary {
    max-width: 760px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.course-access-summary summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}

.course-access-summary summary::-webkit-details-marker {
    display: none;
}

.course-access-summary summary strong {
    color: var(--text);
}

.course-access-summary summary span {
    color: var(--muted);
    font-size: 13px;
}

.course-access-summary .scope-note {
    margin: 8px 0 0;
}

.course-access-summary .group-chip-list {
    max-height: 150px;
    margin-top: 8px;
    overflow: auto;
}

.course-assignment-summary {
    max-width: 760px;
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #f8fbff;
    display: grid;
    gap: 8px;
}

.course-assignment-summary > div:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.course-assignment-summary strong {
    color: var(--text);
}

.course-assignment-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.course-assignment-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 78px;
    overflow: hidden;
}

.muted-chip {
    color: var(--muted-strong);
}

.locked-step-note {
    display: inline-flex;
    max-width: 100%;
    margin-top: 8px !important;
    padding: 7px 9px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 13px;
    font-weight: 700;
}

.learning-step-hero {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.learning-step-cover {
    width: 170px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-weight: 800;
}

.learning-step-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.learning-step-hero-body h1 {
    margin: 6px 0;
}

.learning-step-layout {
    align-items: start;
}

.learning-step-content,
.learning-step-actions-panel,
.learning-step-side {
    border-radius: 8px;
}

.learning-step-section-head {
    margin-bottom: 14px;
}

.learning-step-section-head h2 {
    margin: 0 0 4px;
}

.learning-step-section-head p {
    margin: 0;
    color: var(--muted);
}

.learning-video,
.pdf-frame iframe {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: #111827;
}

.learning-video {
    aspect-ratio: 16 / 9;
}

.pdf-frame iframe {
    min-height: 720px;
    background: #fff;
}

.pdf-document-list {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
}

.pdf-document-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
    font-weight: 650;
    text-decoration: none;
}

.pdf-document-item:hover,
.pdf-document-item:focus-visible {
    border-color: #a78bfa;
    background: #faf7ff;
}

.pdf-document-item.is-current {
    border-color: #8b5cf6;
}

.pdf-document-badge {
    padding: 3px 7px;
    border-radius: 5px;
    color: #fff;
    background: #b91c1c;
    font-size: 12px;
    font-weight: 800;
}

.pdf-document-open {
    color: var(--primary);
    font-size: 14px;
}

.lesson-text {
    font-size: 16px;
    line-height: 1.65;
}

.lesson-text [data-text-size="small"] { font-size: 0.86em; }
.lesson-text [data-text-size="normal"] { font-size: 1em; }
.lesson-text [data-text-size="large"] { font-size: 1.22em; }
.lesson-text [data-text-size="xlarge"] { font-size: 1.5em; }

.learning-test-form {
    margin-top: 10px;
}

.wide-action {
    width: 100%;
}

.step-nav-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.step-mini-list {
    display: grid;
    gap: 8px;
}

.step-mini-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    background: #fff;
}

.step-mini-item span {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-blue);
    color: var(--primary-dark);
    font-weight: 800;
}

.step-mini-item strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.step-mini-item.active {
    border-color: #bfdbfe;
    background: var(--surface-blue);
}

.step-mini-item.done {
    border-color: #bbf7d0;
}

.step-mini-item.done span {
    background: #dcfce7;
    color: var(--success);
}

.step-mini-item.failed span {
    background: #fee2e2;
    color: var(--danger);
}

.step-mini-item.locked {
    opacity: 0.62;
    cursor: not-allowed;
    background: var(--surface-soft);
}

.step-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 920px) minmax(280px, 360px);
    gap: 18px;
    align-items: start;
}

.step-edit-panel {
    min-width: 0;
}

.file-dropzone {
    display: grid;
    gap: 10px;
    min-height: 92px;
    padding: 16px;
    border: 1px dashed #9fc5ff;
    border-radius: 8px;
    background: #f8fbff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.file-dropzone.large {
    min-height: 118px;
}

.file-dropzone:hover,
.file-dropzone.drag-over {
    border-color: var(--primary);
    background: #eef6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.file-dropzone.has-file {
    border-style: solid;
    border-color: #86efac;
    background: #f0fdf4;
}

.file-dropzone input[type="file"] {
    width: 100%;
}

.file-dropzone-name {
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.upload-progress-panel {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 12px;
}

.upload-progress-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f6;
}

.upload-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width 0.2s ease;
}

.upload-progress-panel.active {
    border-color: #bfdbfe;
    background: #fbfdff;
}

.strong-note {
    padding: 10px 12px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
}

.test-form {
    display: grid;
    gap: 16px;
}

.step-type-fields[hidden] {
    display: none;
}

.test-builder {
    display: grid;
    gap: 12px;
}

.test-builder-head,
.test-question-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.test-builder-head small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    line-height: 1.35;
}

.test-builder-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    background: #f5f7ff;
}

.test-builder-shortcut strong,
.test-builder-shortcut small {
    display: block;
}

.test-builder-shortcut small {
    margin-top: 3px;
    color: var(--muted);
    line-height: 1.35;
}

.test-question-builder-list {
    display: grid;
    gap: 12px;
}

.test-question-builder {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.answer-builder-list {
    display: grid;
    gap: 8px;
}

.answer-builder-row {
    display: grid;
    grid-template-columns: 18px 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.test-question {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.test-question legend {
    padding: 0 6px;
    font-weight: 750;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.correct-answer-row {
    padding: 8px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
}

.answer-key-badge {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.answer-selected-badge,
.answer-wrong-badge {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.answer-selected-badge {
    background: #e0f2fe;
    color: #075985;
}

.answer-wrong-badge {
    background: #fee2e2;
    color: #991b1b;
}

.wrong-answer-row,
.selected-answer-row {
    padding: 8px 10px;
    border-radius: 8px;
}

.wrong-answer-row {
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.selected-answer-row {
    border: 1px solid #bae6fd;
    background: #f0f9ff;
}

.test-result-panel {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.test-result-list,
.test-result-question,
.test-result-answers {
    display: grid;
    gap: 10px;
}

.test-result-question {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.test-result-question.correct {
    border-color: #bbf7d0;
}

.test-result-question.wrong {
    border-color: #fecaca;
}

.test-result-answer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attempt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.attempt-result-list {
    margin-top: 4px;
}

.attempt-question-head {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: flex-start;
}

.attempt-status-text {
    font-size: 22px !important;
}

.compact-stat-value {
    font-size: 20px !important;
}

.success-text {
    color: #047857;
}

.danger-text {
    color: #b91c1c;
}

.warning-note {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

/* Test authoring: keep the question list, editor and settings visible together. */
.test-builder-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.65fr) minmax(220px, 0.68fr);
    gap: 16px;
    align-items: start;
}

.test-builder-nav,
.test-builder-editor,
.test-builder-settings {
    padding: 18px;
}

.test-builder-nav {
    position: sticky;
    top: 16px;
}

.test-builder-question-nav {
    display: grid;
    gap: 6px;
    max-height: min(62vh, 620px);
    margin-top: 12px;
    overflow-y: auto;
    padding-right: 3px;
}

.test-builder-question-link {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
}

.test-builder-question-link:hover {
    border-color: #bca6e6;
    background: #faf8ff;
}

.test-builder-question-link.active {
    border-color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.test-builder-editor-head,
.test-builder-answer-head,
.test-builder-savebar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.test-builder-editor-head {
    min-height: 42px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
}

.test-builder-editor-head h2,
.test-builder-answer-head h3,
.test-builder-settings h2 {
    margin: 0;
}

.test-builder-question-form,
.test-builder-answer-list {
    display: grid;
    gap: 12px;
}

.test-builder-answer-head {
    align-items: flex-start;
    margin: 22px 0 10px;
}

.test-builder-answer-head p { margin: 2px 0 0; }

.test-builder-answer-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.test-builder-answer-row.is-correct {
    border-color: #86d8aa;
    background: #f0fdf4;
}

.test-builder-correct-toggle {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.test-builder-correct-toggle input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #15803d;
}

.test-builder-savebar {
    position: sticky;
    bottom: 10px;
    z-index: 2;
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.96);
    padding: 11px;
    box-shadow: 0 8px 20px rgba(31, 41, 55, 0.08);
}

.test-builder-savebar .is-dirty { color: #b45309; font-weight: 650; }

.test-builder-error {
    margin-bottom: 14px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fff1f2;
    color: #b91c1c;
    padding: 10px 12px;
}

@media (max-width: 1100px) {
    .test-builder-layout { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.5fr); }
    .test-builder-settings { grid-column: 1 / -1; }
    .test-builder-settings .detail-list.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .test-builder-layout { grid-template-columns: 1fr; }
    .test-builder-nav { position: static; }
    .test-builder-question-nav { max-height: 240px; }
    .test-builder-shortcut { align-items: stretch; flex-direction: column; }
    .test-builder-shortcut .btn { width: 100%; }
    .test-builder-editor-head,
    .test-builder-answer-head,
    .test-builder-savebar { align-items: stretch; flex-direction: column; }
    .test-builder-editor-head .button-row { width: 100%; }
    .test-builder-editor-head .btn { flex: 1 1 auto; }
    .test-builder-answer-row { grid-template-columns: 1fr auto; }
    .test-builder-correct-toggle { grid-column: 1 / -1; }
    .test-builder-savebar .btn { width: 100%; }
    .test-builder-settings .detail-list.compact { grid-template-columns: 1fr; }
}

/* Learning analytics */
.learning-toolbar.analytics-toolbar {
    grid-template-columns:
        minmax(280px, 1.25fr)
        minmax(220px, 1.2fr)
        minmax(200px, 1fr)
        minmax(160px, 0.8fr)
        minmax(280px, 1.3fr)
        auto;
}

.learning-toolbar.user-analytics-toolbar {
    grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 0.8fr) minmax(260px, 1.3fr) auto;
}

.learning-toolbar.team-toolbar {
    grid-template-columns:
        minmax(240px, 1.2fr)
        minmax(220px, 1.1fr)
        minmax(180px, 0.8fr)
        minmax(260px, 1.3fr)
        auto;
}

/* With the sidebar open the one-row filters above need ~1600px; below that they wrap instead of scrolling the page sideways. */
@media (max-width: 1599px) {
    .learning-toolbar.materials-toolbar,
    .learning-toolbar.analytics-toolbar,
    .learning-toolbar.user-analytics-toolbar,
    .learning-toolbar.team-toolbar {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

.analytics-table {
    width: 100%;
    table-layout: fixed;
    min-width: 0;
}

.analytics-table th,
.analytics-table td {
    min-width: 0;
    padding: 10px 12px;
    overflow-wrap: normal;
    word-break: normal;
}

.analytics-table small {
    line-height: 1.35;
}

.analytics-table .status {
    white-space: normal;
    text-align: center;
}

.analytics-table-wrap {
    overflow-x: visible;
}

.userbox-copy {
    display: grid;
    justify-items: end;
    gap: 1px;
    min-width: 0;
}

.userbox-copy strong {
    line-height: 1.2;
}

.userbox-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.userbox-copy .user-role {
    color: var(--brand-dark);
    font-weight: 700;
}

/* "Продавец ФТТ · Салон на Ленина · Пермь" can be long: one line, cut with an
   ellipsis; the whole of it is in the title. */
.userbox-copy strong,
.userbox-copy .user-role,
.userbox-copy .user-email {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-user-table .analytics-col-person { width: 25%; }
.analytics-user-table .analytics-col-manager { width: 16%; }
.analytics-user-table .analytics-col-status { width: 14%; }
.analytics-user-table .analytics-col-programs { width: 11%; }
.analytics-user-table .analytics-col-tests { width: 7%; }
.analytics-user-table .analytics-col-progress { width: 12%; }
.analytics-user-table .analytics-col-activity { width: 15%; }

.analytics-program-table .analytics-col-program { width: 26%; }
.analytics-program-table .analytics-col-status { width: 13%; }
.analytics-program-table .analytics-col-progress { width: 12%; }
.analytics-program-table .analytics-col-stop { width: 25%; }
.analytics-program-table .analytics-col-failed { width: 14%; }
.analytics-program-table .analytics-col-activity { width: 10%; }

.program-analytics-stats {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.program-detail-analytics-table .program-detail-col-user { width: 25%; }
.program-detail-analytics-table .program-detail-col-status { width: 14%; }
.program-detail-analytics-table .program-detail-col-progress { width: 11%; }
.program-detail-analytics-table .program-detail-col-stop { width: 25%; }
.program-detail-analytics-table .program-detail-col-failed { width: 13%; }
.program-detail-analytics-table .program-detail-col-activity { width: 12%; }

.program-analytics-panel .panel-head {
    gap: 16px;
}

.program-analytics-panel .button-row {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.analytics-row-danger td {
    background: #fff7f7;
}

.analytics-row-danger:hover td {
    background: #fff1f1;
}

@media (max-width: 1180px) {
    .analytics-table-wrap {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .analytics-table,
    .analytics-table thead,
    .analytics-table tbody,
    .analytics-table tr,
    .analytics-table th,
    .analytics-table td {
        display: block;
        width: 100%;
    }

    .analytics-table colgroup,
    .analytics-table thead {
        display: none;
    }

    .analytics-table tbody {
        display: grid;
        gap: 10px;
    }

    .analytics-table tr {
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .analytics-table td {
        display: grid;
        grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        border-bottom: 1px solid var(--border);
    }

    .analytics-table tr:last-child td {
        border-bottom: 1px solid var(--border);
    }

    .analytics-table td:last-child {
        border-bottom: 0;
    }

    .analytics-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .analytics-table .status {
        justify-self: start;
        text-align: left;
    }
}

.progress-meter {
    width: 120px;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f6;
}

.progress-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.failed-test-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: 0 4px 4px 0;
    padding: 4px 8px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

a.failed-test-chip:hover {
    border-color: #f87171;
    background: #fee2e2;
}

.compact-actions {
    justify-content: flex-start;
}

.learning-tree-panel {
    overflow-x: auto;
}

.tree-list {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.root-tree {
    min-width: 620px;
}

.tree-list .tree-list {
    margin-top: 8px;
    padding-left: 28px;
    border-left: 1px solid var(--border);
}

.tree-item details {
    display: grid;
    gap: 8px;
}

.tree-row {
    min-height: 48px;
    display: grid;
    grid-template-columns: 24px minmax(220px, 1fr) 44px auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    cursor: pointer;
}

.tree-row::-webkit-details-marker {
    display: none;
}

.tree-row:hover {
    border-color: #bfdbfe;
    background: var(--surface-blue);
}

.tree-row.context-manager {
    background: #fff7ed;
    border-color: #fed7aa;
}

.tree-row.group-match {
    border-color: #abefc6;
    background: #ecfdf3;
}

/* A sales-network partner (dealer, wholesaler, their managers) in the FTT tree,
   in their type's own colour - the same palette as .cat-* badges. */
.tree-row.partner-neutral { border-color: var(--border-strong); background: #f8fafc; }
.tree-row.partner-violet { border-color: #e0c7f7; background: var(--brand-soft); }
.tree-row.partner-blue { border-color: #c7d7fe; background: #eef4ff; }
.tree-row.partner-green { border-color: #a7f3d0; background: #ecfdf5; }
.tree-row.partner-amber { border-color: #fde68a; background: #fffbeb; }
.tree-row.partner-rose { border-color: #fecdd3; background: #fff1f2; }
.tree-row.partner-teal { border-color: #99f6e4; background: #f0fdfa; }

.ftt-partner-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
}

.tree-toggle {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eef2f6;
    color: var(--muted-strong);
}

.tree-toggle::before {
    content: "+";
    font-weight: 800;
}

details[open] > .tree-row .tree-toggle::before,
details[open] > .group-tree-row .tree-toggle::before {
    content: "-";
}

.tree-toggle.leaf::before {
    content: "-";
}

.tree-person {
    min-width: 0;
}

.tree-person-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tree-person-name strong {
    min-width: 0;
}

.tree-activation-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--border-strong);
}

.tree-activation-dot.is-activated {
    background: var(--success);
}

.tree-person strong,
.tree-person small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-person small {
    margin-top: 3px;
    color: var(--muted);
}

/* All seven columns remain visible side by side. Their card stacks, not the
   whole page, own the vertical overflow: a seller can read a long queue
   without losing the filters and the other stages above it. */
/* Two groups, not one flat row of seven: the five aging columns are the
   working queue, Продано/Отказ are closed history - a visible gap + divider
   keeps them from reading as "just two more of the same seven columns".
   Each group is its own grid (still minmax(0, 1fr) - see the comment
   further up history for why), sized 5:2 to match column counts, so a
   column in either group stays the same width as its neighbours. */
.kanban-board {
    display: flex;
    align-items: stretch;
    gap: 22px;
    height: clamp(420px, calc(100dvh - 360px), 680px);
    min-height: 0;
}

.kanban-scroll-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 10px;
    color: var(--muted);
    font-size: 12px;
}

.kanban-scroll-hint span {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 800;
}

/* An operational layer above the detailed columns: start the shift by
   seeing what needs attention, then filter the same loaded cards with one
   click. These are buttons, not decorative KPIs, so the summary is useful
   on a busy outlet rather than merely pretty. */
.kanban-focus {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}

.kanban-focus-card {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.kanban-focus-card:hover,
.kanban-focus-card:focus-visible {
    border-color: var(--brand);
    outline: none;
    transform: translateY(-1px);
}

.kanban-focus-card span,
.kanban-focus-card small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.kanban-focus-card strong {
    display: block;
    margin: 3px 0;
    font-size: 24px;
    line-height: 1.05;
}

.kanban-focus-card.is-overdue { border-top: 4px solid var(--danger); }
.kanban-focus-card.is-overdue strong { color: var(--danger); }
.kanban-focus-card.is-today { border-top: 4px solid var(--warning); }
.kanban-focus-card.is-today strong { color: var(--warning); }
.kanban-focus-card.is-new { border-top: 4px solid var(--primary); }
.kanban-focus-card.is-new strong { color: var(--primary); }
.kanban-focus-card.is-open { border-top: 4px solid var(--success); }
.kanban-focus-card.is-open strong { color: var(--success); }

.kanban-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 14px;
    padding: 12px;
}

.kanban-search { flex: 1 1 260px; }
.kanban-search .input { width: 100%; }
.kanban-filter-empty { width: 100%; margin: 0; color: var(--muted); font-size: 13px; }

.kanban-preview-dialog {
    width: min(480px, 94vw);
    height: 100dvh;
    max-height: none;
    margin: 0 0 0 auto;
    padding: 0;
    border: none;
    color: var(--text);
    box-shadow: -16px 0 44px rgba(16, 24, 40, 0.2);
}

.kanban-preview-dialog::backdrop { background: rgba(16, 24, 40, 0.36); }
.kanban-preview-content { height: 100%; overflow-y: auto; }
.kanban-preview-sheet { min-height: 100%; padding: 24px; background: var(--surface); }
.kanban-preview-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.kanban-preview-head p { margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.kanban-preview-head h2 { margin: 0; }
.kanban-preview-sheet h3 { margin: 24px 0 8px; font-size: 16px; }
.kanban-preview-comment { padding: 10px 12px; border-radius: 8px; background: var(--surface-soft); color: var(--muted-strong); }
.kanban-preview-items { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

/* Quick view: who, how to reach them, what to do next - then the numbers,
   the goods and the latest history, and the actions at the bottom. */
.kanban-preview-sheet { display: flex; flex-direction: column; gap: 14px; }
.kanban-preview-sheet h3 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.kanban-preview-kicker { font-weight: 600; }
.kanban-preview-head h2 { font-size: 24px; line-height: 1.2; }
.kanban-preview-phone {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--brand-soft, #f3eef7); color: var(--brand, #461e64); text-decoration: none;
}
.kanban-preview-phone strong { font-size: 18px; letter-spacing: 0.01em; }
.kanban-preview-phone small { margin-left: auto; font-weight: 600; }
.kanban-preview-phone.is-missing { background: #fff7ed; color: var(--warning); font-size: 13px; margin: 0; }
.kanban-preview-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted-strong); font-size: 14px; }
.kanban-preview-dialog:not([data-outcome="open"]) [data-preview-open-only] { display: none; }
.kanban-preview-dialog:not([data-outcome="won"]) [data-preview-won-only] { display: none; }
.kanban-preview-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0; }
.kanban-preview-facts div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.kanban-preview-facts dt { color: var(--muted); font-size: 12px; }
.kanban-preview-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; white-space: nowrap; }
.kanban-preview-people { margin: 0; color: var(--muted); font-size: 13px; }
.kanban-preview-people:empty { display: none; }
.kanban-preview-comment { margin: 0; }
.kanban-preview-items li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.kanban-preview-items li > span { display: grid; gap: 2px; min-width: 0; }
.kanban-preview-items small { color: var(--muted); font-size: 12px; }
.kanban-preview-items b { white-space: nowrap; font-weight: 650; }
.kanban-preview-history { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.kanban-preview-history li { padding: 8px 10px; border-radius: 8px; background: var(--surface-soft); }
.kanban-preview-history small { display: block; color: var(--muted); font-size: 12px; }
.kanban-preview-actions {
    position: sticky; bottom: 0; margin: auto -24px -24px; padding: 14px 24px 20px;
    display: flex; flex-wrap: wrap; gap: 8px; background: var(--surface); border-top: 1px solid var(--border);
}
.kanban-preview-actions form { margin: 0; }

/* The sold card's contract button - also on a card dragged into Продано. */
.kanban-card-contract { display: inline-block; margin: 6px 6px 0 0; }
.kanban-card-contract:not(.is-issued) { display: none; }
.kanban-card[data-kanban-outcome="won"] .kanban-card-contract { display: inline-block; }
.kanban-card-outcome-form:has(.kanban-card-actions:empty) + .kanban-card-contract { margin-top: 8px; }

/* display: flex below would otherwise beat the hidden attribute and leave
   an empty dark pill on screen until the first toast. */
.kanban-toast[hidden] { display: none !important; }
.kanban-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(420px, calc(100vw - 40px));
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--text);
    color: #fff;
    box-shadow: var(--shadow);
}

.kanban-toast .btn.secondary { border-color: #fff; background: #fff; color: var(--text); }

.kanban-board-group {
    display: grid;
    align-items: stretch;
    gap: 12px;
    height: 100%;
    min-width: 0;
}

.kanban-board-open {
    flex: 5 1 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.kanban-board-closed {
    flex: 2 1 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 22px;
    border-left: 2px solid var(--border-strong);
}

.kanban-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* A solid color per column instead of a uniform gray card, so a seller can
   tell columns apart at a glance instead of reading every label. The five
   open columns run cool-to-warm as a quote ages (fresh blue -> rust, the
   most-overdue color short of red - see below for why not red). Продано is
   success green; Отказ is the actual danger red, reserved for it alone so
   "this column means rejection" stays unambiguous - it would have clashed
   with month_plus if that end of the aging scale used red too. */
.kanban-column-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 10px 12px;
    color: #fff;
    background: var(--muted);
}

.kanban-column-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}

.kanban-column-total {
    font-size: 11px;
    font-weight: 650;
    opacity: 0.92;
}

[data-kanban-key="first_touch"] .kanban-column-head { background: var(--primary); }
[data-kanban-key="week_1"] .kanban-column-head { background: #0e7490; }
[data-kanban-key="week_2"] .kanban-column-head { background: var(--warning); }
[data-kanban-key="week_3"] .kanban-column-head { background: #c2410c; }
[data-kanban-key="month_plus"] .kanban-column-head { background: #9a3412; }
[data-kanban-key="won"] .kanban-column-head { background: var(--success); }
[data-kanban-key="lost"] .kanban-column-head { background: var(--danger); }

.kanban-column-count {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.kanban-column-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #b7c3dc transparent;
}

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

.kanban-column-body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #b7c3dc;
    background-clip: padding-box;
}

.kanban-column-body:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -3px;
}

.kanban-dropzone-active {
    outline: 2px dashed var(--brand);
    outline-offset: -2px;
    border-radius: 8px;
}

.kanban-card {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kanban-card[hidden] { display: none; }

.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.08), 0 18px 38px rgba(16, 24, 40, 0.1);
}

.kanban-card-dragging {
    opacity: 0.4;
}

.kanban-card-title {
    display: block;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.kanban-card-meta span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-card-meta span:last-child {
    flex: 0 0 auto;
    font-weight: 650;
    color: var(--text);
}

.kanban-card-date {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.kanban-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* --- FTT analytics -------------------------------------------------- */
/* Bars are plain CSS, not a charting library: the CSP forbids CDN scripts,
   the project ships no chart lib, and everything here is a single-series
   comparison that a div with a width reads just as clearly. */

/* The overview is the seller's control panel, not a passive report.  Its
   hierarchy intentionally follows the workday: period → current next step
   → quick actions → deeper charts. */
.ftt-analytics-head {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
}

.ftt-analytics-head > div:first-child { flex: 1 1 320px; }

/* One line: where it does not fit beside the title, the whole period goes under it. */
.ftt-period-switcher {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid #d7e2f2;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 22px rgba(23, 43, 77, 0.06);
}

.ftt-period-switcher .btn {
    min-width: 64px;
    border-color: transparent;
}

.ftt-period-presets { display: flex; gap: 4px; }
.ftt-period-day { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted-strong); font-size: 13px; font-weight: 600; }
.ftt-period-day input[type="date"] { width: auto; min-height: 34px; padding: 4px 8px; }

.ftt-analytics-tabs {
    display: flex;
    grid-template-columns: none;
    margin-bottom: 16px;
    padding: 4px;
    border: 1px solid #d7e2f2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(23, 43, 77, 0.05);
}

.ftt-analytics-kpis .ftt-analytics-kpi {
    min-height: 130px;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 13px 28px rgba(23, 43, 77, 0.08);
}

.ftt-analytics-kpi strong {
    letter-spacing: -0.035em;
}

.ftt-seller-focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 20px 0;
    padding: 22px 24px;
    border: 1px solid #dce5f2;
    border-radius: 18px;
    background: linear-gradient(108deg, #ffffff 0%, #f6f8ff 100%);
    box-shadow: 0 14px 30px rgba(23, 43, 77, 0.08);
    overflow: hidden;
}

.ftt-seller-focus::before {
    content: "";
    align-self: stretch;
    width: 5px;
    margin: -22px 0 -22px -24px;
    border-radius: 18px 0 0 18px;
    background: var(--brand);
}

.ftt-seller-focus-copy { min-width: 0; }

.ftt-seller-focus-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ftt-seller-focus h2 { margin: 0; font-size: 21px; }
.ftt-seller-focus p { margin: 6px 0 0; color: var(--muted); }
.ftt-seller-focus-danger::before { background: var(--danger); }
.ftt-seller-focus-warning::before { background: var(--warning); }
.ftt-seller-focus-success::before { background: var(--success); }
.ftt-seller-focus-purple::before { background: #6d28d9; }

.ftt-analytics-funnel-panel {
    border-top: 3px solid var(--brand);
}

@media (max-width: 760px) {
    .ftt-analytics-head { align-items: stretch; }
    .ftt-period-switcher { width: 100%; flex-wrap: wrap; }
    .ftt-period-switcher .btn { flex: 1 1 auto; min-width: 0; }
    .ftt-period-presets { flex: 1 1 100%; }
    .ftt-period-day { flex: 1 1 0; min-width: 0; }
    .ftt-period-day input[type="date"] { flex: 1 1 auto; min-width: 0; }
    .ftt-seller-focus { align-items: flex-start; flex-direction: column; gap: 14px; padding: 18px; }
    .ftt-seller-focus::before { width: auto; height: 4px; align-self: auto; margin: -18px -18px 0; border-radius: 18px 18px 0 0; }
    .ftt-seller-focus .btn { width: 100%; text-align: center; }
}

/* "Visits per day", "top products" and the two donuts are real Chart.js
   canvases (vendored, static/js/vendor/chart.umd.min.js - see
   analytics.html's extra_js block). Chart.js needs an ancestor with an
   explicit height when maintainAspectRatio is off, or the canvas collapses
   to 0. The funnel below is NOT Chart.js - see .ftt-funnel-* further down. */
.ftt-chart-wrap {
    position: relative;
    height: 260px;
}

.ftt-chart-wrap-donut {
    height: 220px;
}

/* Summary chart sitting above a wide day-by-day matrix table - shorter than
   the usual .ftt-chart-wrap since it's a quick "shape of the month" glance,
   not the main content of its panel. Margin-bottom separates it from the
   exact table right below, which is what people actually read the numbers
   off of. */
.ftt-chart-wrap-matrix-summary {
    height: 180px;
    margin-bottom: 16px;
}

.ftt-category-plan-summary {
    margin: 18px 0 16px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.ftt-category-plan-summary h3 {
    margin: 0;
    font-size: 16px;
}

.ftt-category-plan-summary p,
.ftt-matrix-heatmap-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.ftt-chart-wrap-category-plan {
    height: 270px;
    margin-top: 12px;
}

.ftt-ranking {
    display: grid;
    gap: 14px;
}

.ftt-ranking-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.ftt-ranking-head span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftt-ranking-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-soft);
    overflow: hidden;
}

.ftt-ranking-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--brand);
}

.ftt-ranking-row {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
}

.ftt-ranking-row:hover {
    border-color: #c9d3e2;
    background: #fbfcff;
    color: var(--text);
}

.ftt-ranking-row small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

.text-danger { color: var(--danger); }

/* A real tapering funnel, hand-built as SVG by JS (analytics.html's
   extra_js) rather than Chart.js - Chart.js has no funnel chart type, and
   a horizontal bar chart doesn't read as a funnel at all (the first
   attempt at this screen). width/next_width driving the trapezoid taper
   are already percent-of-first-stage math from services/analytics.py's
   _funnel() - the JS only turns those two numbers per stage into a shape,
   the same way the old CSS clip-path version did, just with real hover
   detail and an entrance animation on top. */
.ftt-funnel-wrap {
    position: relative;
    max-width: 620px;
    margin: 0 auto;
}

/* Seller-facing customer journey. The old tapered SVG looked decorative but
   made the actual loss between stages hard to scan. These cards preserve the
   funnel's quantitative meaning and turn each transition into a readable
   decision point. JS replaces the compact server-rendered fallback below. */
.ftt-funnel-wrap {
    max-width: none;
    margin: 2px 0 0;
}

.ftt-funnel-fallback {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ftt-funnel-fallback-step {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}

.ftt-funnel-fallback-step span,
.ftt-funnel-fallback-step small { color: var(--muted); font-size: 12px; }
.ftt-funnel-fallback-step strong { font-size: 24px; }

.ftt-journey {
    position: relative;
    padding: 22px;
    border: 1px solid #dce6f4;
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 4%, rgba(59, 130, 246, 0.12), transparent 30%),
        radial-gradient(circle at 95% 100%, rgba(22, 128, 60, 0.12), transparent 33%),
        linear-gradient(135deg, #fbfdff, #f7f8ff);
    overflow: hidden;
}

.ftt-journey-rail {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(64px, 0.38fr) minmax(150px, 1fr) minmax(64px, 0.38fr) minmax(150px, 1fr);
    align-items: center;
    gap: 10px;
}

.ftt-journey-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 11px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d5e0ef;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text);
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(36, 62, 104, 0.07);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ftt-journey-step:hover,
.ftt-journey-step:focus-visible,
.ftt-journey-step.is-selected {
    border-color: #8eaefa;
    box-shadow: 0 13px 26px rgba(41, 88, 201, 0.16);
    color: var(--text);
    outline: 0;
    transform: translateY(-3px);
}

.ftt-journey-step-top { display: contents; }

.ftt-journey-number {
    display: grid;
    width: 28px;
    height: 28px;
    grid-row: span 2;
    place-items: center;
    border-radius: 50%;
    background: #e7edff;
    color: #2555c6;
    font-size: 13px;
    font-weight: 850;
}

.ftt-journey-step[data-tone="2"] .ftt-journey-number { background: #ede9fe; color: #6d28d9; }
.ftt-journey-step[data-tone="3"] .ftt-journey-number { background: #dcfce7; color: #15803d; }
.ftt-journey-label { align-self: center; overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ftt-journey-value { grid-column: 2; margin-top: -5px; font-size: 32px; letter-spacing: -0.045em; line-height: 1; }
.ftt-journey-percent { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 700; }
.ftt-journey-step-track { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: #e8edf5; overflow: hidden; }
.ftt-journey-step-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d82ef, #2858d3); transition: width 0.8s cubic-bezier(.22, 1, .36, 1); }
.ftt-journey-step[data-tone="2"] .ftt-journey-step-fill { background: linear-gradient(90deg, #a78bfa, #6d28d9); }
.ftt-journey-step[data-tone="3"] .ftt-journey-step-fill { background: linear-gradient(90deg, #4ade80, #15803d); }
.ftt-journey.is-ready .ftt-journey-step-fill { width: var(--stage-share); }

.ftt-journey-link {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1px;
    min-width: 0;
    padding-top: 3px;
    color: var(--muted);
    text-align: center;
}

.ftt-journey-link::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    left: -4px;
    z-index: 0;
    height: 2px;
    background: linear-gradient(90deg, #9eb7f5, #d5c8f8);
}

.ftt-journey-link::after {
    content: "›";
    position: relative;
    z-index: 1;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #d6e0f1;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    font-size: 23px;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(36, 62, 104, 0.08);
}

.ftt-journey-link strong,
.ftt-journey-link span { position: relative; z-index: 2; background: #f8faff; }
.ftt-journey-link strong { margin-top: -2px; padding: 0 5px; color: var(--text); font-size: 13px; }
.ftt-journey-link span { padding: 0 5px; font-size: 11px; font-weight: 700; }

.ftt-journey-detail {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 10px 16px;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(117, 142, 188, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.ftt-journey-detail strong { color: var(--text); font-size: 14px; }
.ftt-journey-detail span { color: var(--muted); font-size: 13px; line-height: 1.4; }

@media (max-width: 860px) {
    .ftt-journey-rail { grid-template-columns: 1fr; gap: 8px; }
    .ftt-journey-link { grid-template-columns: auto auto; justify-content: start; justify-items: start; min-height: 34px; padding-left: 15px; text-align: left; }
    .ftt-journey-link::before { top: -6px; bottom: -6px; left: 28px; width: 2px; height: auto; background: linear-gradient(#9eb7f5, #d5c8f8); }
    .ftt-journey-link::after { grid-row: span 2; transform: rotate(90deg); }
    .ftt-journey-link strong { align-self: end; margin: 0; }
    .ftt-journey-link span { align-self: start; }
}

@media (max-width: 560px) {
    .ftt-journey { padding: 14px; border-radius: 14px; }
    .ftt-funnel-fallback { grid-template-columns: 1fr; }
    .ftt-journey-step { padding: 14px; }
    .ftt-journey-value { font-size: 29px; }
    .ftt-journey-detail { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .ftt-journey-step,
    .ftt-journey-step-fill { transition: none; }
}

/* Coloured like the factory's own "Отчёт Розница" spreadsheet, on request -
   store staff already read sales figures in that cyan/yellow/green layout
   daily, so matching it beats the app's usual muted table for THIS one
   report. Selectors are two classes deep (not one) specifically to outrank
   the later, equal-or-higher-specificity ".data-table th { background:
   #f8fafc }" reset further down this file - a plain single-class selector
   would lose to it regardless of which one comes first in the file (this
   exact trap already bit .quote-panel-client once this session; see
   CLAUDE.md §13.15). */
.ftt-report-table th.ftt-report-head-category,
.ftt-report-table th.ftt-report-head-total {
    background: #67e8f9;
    color: #0e7490;
}

.ftt-report-table th.ftt-report-head-sales {
    background: #fde047;
    color: #854d0e;
}

.ftt-report-table tr.ftt-report-row-total td {
    background: #86efac;
    color: #14532d;
    font-weight: 800;
    border-top: 2px solid #4ade80;
    border-bottom: none;
}

.ftt-report-table tr.ftt-report-row-total:hover td {
    background: #86efac;
}

/* Frozen header + frozen first column, for the day x category sales matrix
   (services/sales_matrix.py) - first table in this codebase wide enough to
   need it (a month's worth of day columns). Every sticky cell needs an
   explicit opaque background or scrolled-under content shows through; the
   corner cell is sticky on both axes and needs the highest z-index so it
   wins over both the sticky header row and the sticky first column.
   Horizontal scroll only, on purpose - the row count is a fixed, small set
   of categories (8 plus "Без категории"), never a growing list, so there's
   nothing to gain from capping the height and adding a second, vertical
   scrollbar; the table just renders at its natural height. */
.ftt-matrix-wrap {
    overflow-x: auto;
}

.ftt-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Plain fallback background for sticky header cells that carry none of the
   spreadsheet colour classes (the traffic/conversion table below has no
   ftt-report-head-* on its headers). Where a coloured class IS present, the
   existing two-classes-deep .ftt-report-table th.ftt-report-head-* rules
   win regardless of source order - their specificity (2 classes) beats this
   rule's (1 class), same trap/fix as documented above for that palette. */
.ftt-matrix-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    /* Chrome/Firefox can visibly repaint sticky table cells a frame or two
       late while a scrollbar is actively being dragged, showing row content
       briefly on top of the header before it catches up and hides again.
       Promoting the sticky cell to its own compositing layer avoids that
       repaint lag - the standard fix for this exact "overlaps while
       dragging, settles once still" symptom. */
    will-change: transform;
}

.ftt-matrix-table td.ftt-matrix-rowhead,
.ftt-matrix-table th.ftt-matrix-corner {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    text-align: left;
    white-space: nowrap;
    will-change: transform;
}

.ftt-matrix-table th.ftt-matrix-corner {
    /* The corner is sticky on both axes. It needs a layer of its own above
       the scrolling day headers as well as an opaque foreground backdrop:
       without it Chromium may composite the newly-scrolled header text over
       the corner for a frame (or persistently while dragging the scrollbar).
       The label sits above that backdrop, so neither a day number nor a
       table cell can bleed through it. */
    z-index: 4;
    min-width: 120px;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
    box-shadow: 2px 0 0 var(--surface);
}

.ftt-matrix-table th.ftt-matrix-corner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--surface);
    pointer-events: none;
}

.ftt-report-table th.ftt-matrix-corner::before {
    background: #67e8f9;
}

.ftt-matrix-corner-label {
    position: relative;
    z-index: 1;
    display: block;
}

.ftt-matrix-table tr.ftt-report-row-total td.ftt-matrix-rowhead {
    background: #86efac;
}

.ftt-matrix-table td.ftt-matrix-sticky-total,
.ftt-matrix-table th.ftt-matrix-sticky-total {
    white-space: nowrap;
}

.ftt-matrix-table small {
    color: var(--muted);
    font-weight: 400;
}

.ftt-matrix-table tr.ftt-report-row-total td small {
    color: #14532d;
}

.ftt-matrix-empty {
    color: var(--muted);
}

/* Applied by the categories tab's small progressive JS enhancement. The
   numbers stay visible, so colour helps scanning but never becomes the only
   way to read a sale. */
.ftt-matrix-sales-cell.is-heatmapped {
    transition: background-color 0.18s ease;
}

.ftt-matrix-heatmap-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0;
}

.ftt-matrix-heatmap-swatch {
    width: 28px;
    height: 10px;
    border: 1px solid rgba(83, 0, 134, 0.16);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(83, 0, 134, 0.05), rgba(83, 0, 134, 0.21));
}

@media (prefers-reduced-motion: reduce) {
    .ftt-matrix-sales-cell.is-heatmapped { transition: none; }
}

.ftt-matrix-month-label {
    align-self: center;
    font-weight: 700;
    text-transform: capitalize;
}

/* The seller's outlet "Главная" (outlet_detail.html) keeps the standard
   .dashboard-kpi/.panel look used everywhere else, plus one small addition:
   a tiny icon next to each KPI tile's label. It inherits the label's own
   muted text colour via currentColor, so no extra palette is needed. */
.ftt-kpi-icon-inline {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 6px;
}

.ftt-kpi-icon-inline svg { width: 16px; height: 16px; }

/* Reminder state on a funnel card. Colour is the message - a seller
   scanning the board should spot "this one needs a call" without reading
   any text. Matches the .status-* palette used everywhere else. */
.kanban-card-tasks {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.kanban-card-tasks.tasks-overdue { background: #fef3f2; color: var(--danger); }
.kanban-card-tasks.tasks-open { background: #fff7ed; color: var(--warning); }
.kanban-card-tasks.tasks-clear { background: #ecfdf3; color: var(--success); }

/* Task cards read like the dashboard's "requires attention" notices
   (.dashboard-attention-item): a coloured left edge carrying the state, the
   what on the left, the when plus its action on the right. */
.ftt-task-list {
    display: grid;
    gap: 10px;
}

.ftt-task-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--surface);
}

.ftt-task-card.task-overdue { border-left-color: var(--danger); background: #fffafa; }
.ftt-task-card.task-today { border-left-color: var(--warning); background: #fffdf8; }
.ftt-task-card.task-planned { border-left-color: var(--primary); }
.ftt-task-card.task-done { border-left-color: var(--success); background: var(--surface-soft); }

/* Done is context, not the working list - mute it so open work stands out. */
.ftt-task-card.task-done .ftt-task-body strong {
    color: var(--muted);
    text-decoration: line-through;
}

.ftt-task-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ftt-task-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ftt-task-auto {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.ftt-task-body small { color: var(--muted); }

.ftt-task-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ftt-task-due {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.ftt-task-card.task-overdue .ftt-task-due { color: var(--danger); font-weight: 700; }
.ftt-task-card.task-today .ftt-task-due { color: var(--warning); font-weight: 700; }

@media (max-width: 720px) {
    .ftt-task-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .ftt-task-side {
        width: 100%;
        justify-content: space-between;
    }
}

.kanban-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* Columns keep shrinking rather than scrolling (see .kanban-board above) -
   at phone widths, tighten padding/font size too so seven columns still fit
   without every card collapsing to a sliver of unreadable whitespace. */
@media (max-width: 980px) {
    .kanban-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .kanban-board {
        gap: 10px;
    }

    .kanban-board-group {
        gap: 6px;
    }

    .kanban-board-closed {
        padding-left: 10px;
    }

    .kanban-column-head {
        padding: 8px 6px;
        gap: 2px;
    }

    .kanban-column-head-top {
        font-size: 11px;
    }

    .kanban-column-total {
        font-size: 10px;
    }

    .kanban-column-count {
        padding: 1px 6px;
        font-size: 11px;
    }

    .kanban-column-body {
        padding: 6px;
        gap: 6px;
    }

    .kanban-card {
        padding: 6px;
    }

    .kanban-card-meta,
    .kanban-card-date {
        font-size: 11px;
    }

    .kanban-card-actions .btn {
        padding: 5px 6px;
        font-size: 11px;
        min-height: 30px;
    }
}

@media (max-width: 640px) {
    .kanban-controls { align-items: stretch; }
    .kanban-search { flex-basis: 100%; }
}

.tree-group-line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.tree-group-chip {
    max-width: 220px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border: 1px solid #b8c5d6;
    border-radius: 7px;
    background: #f8fafc;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-group-chip.muted {
    background: #f8fafc;
    color: var(--muted);
    font-weight: 500;
}

.tree-count {
    min-width: 32px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef2f6;
    color: var(--muted-strong);
    font-weight: 750;
}

.tree-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.group-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-chip-list.vertical {
    display: grid;
    gap: 8px;
}

.group-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 13px;
}

.group-chip:hover {
    border-color: #bfdbfe;
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.multi-select {
    min-height: 160px;
}

.user-group-select {
    min-height: 260px;
    padding: 6px;
    background: var(--surface-soft);
}

.user-group-select option {
    min-height: 32px;
    padding: 7px 10px;
}

.selectable-user-list {
    min-height: 216px;
    padding: 6px;
    background: var(--surface-soft);
}

.selectable-user-list option {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 6px;
}

.user-picker,
.user-group-picker {
    display: grid;
    gap: 10px;
}

.user-picker-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.user-picker-list {
    max-height: 290px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.user-picker-list > div {
    border-bottom: 1px solid var(--border);
}

.user-picker-list > div:last-child {
    border-bottom: 0;
}

.user-picker-list label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px;
    cursor: pointer;
    color: var(--text);
}

.user-picker-list label:hover {
    border-radius: 6px;
    background: var(--surface-blue);
}

.user-picker-list input[type="radio"] {
    width: auto;
    min-height: auto;
    margin: 3px 0 0 !important;
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .user-picker-search {
        grid-template-columns: 1fr;
    }

    .user-picker-search .btn {
        width: 100%;
    }
}

.hierarchy-secondary-action {
    max-width: 760px;
}

.hierarchy-secondary-action > summary {
    cursor: pointer;
    list-style: none;
}

.hierarchy-secondary-action > summary::-webkit-details-marker {
    display: none;
}

.hierarchy-secondary-action > summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--primary-dark);
    font-size: 20px;
    font-weight: 500;
}

.hierarchy-secondary-action[open] > summary::after {
    content: "−";
}

.hierarchy-secondary-action > summary,
.hierarchy-secondary-action .form-panel-body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hierarchy-secondary-action > summary span {
    display: grid;
    gap: 4px;
}

.hierarchy-secondary-action > summary small {
    color: var(--muted);
}

.hierarchy-secondary-action .form-panel-body {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.group-chip-more {
    color: var(--primary-dark);
    font-weight: 700;
}

.detail-main-column,
.group-management-side {
    display: grid;
    gap: 22px;
}

.detail-card-block {
    margin-top: 0;
}

.group-management-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.group-management-main {
    min-width: 0;
}

.compact-panel {
    max-width: none;
}

.group-tree-picker {
    max-height: 620px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.group-tree-list {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.group-tree-list.nested {
    margin: 8px 0 0 28px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
}

.group-tree-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.group-tree-row.compact {
    grid-template-columns: 22px minmax(0, 1fr) auto;
}

.group-tree-picker.compact {
    max-height: 360px;
}

.group-tree-row:hover {
    border-color: #bfdbfe;
    background: var(--surface-blue);
}

.group-tree-row::-webkit-details-marker {
    display: none;
}

.group-tree-check {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px !important;
    align-items: start;
    margin: 0 !important;
}

.group-tree-check input {
    width: auto;
    min-height: auto;
    margin-top: 3px;
}

.group-tree-check strong,
.group-tree-check small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-tree-check small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.group-user-count {
    min-width: 34px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef2f6;
    color: var(--muted-strong);
    font-weight: 750;
}

.selected-parent-note,
.field-help {
    color: var(--muted);
    font-size: 13px;
}

.selected-parent-note {
    margin: -4px 0 12px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

/* Django renders every field/non-field validation error as <ul class="errorlist">
   with no styling of its own. Unstyled, it reads as plain body text and is easy
   to miss entirely on a form with several fields - this makes it read as an
   alert regardless of which template it's rendered in. */
.errorlist {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.errorlist li {
    padding: 6px 10px;
    border: 1px solid #fecdca;
    border-left: 3px solid var(--danger);
    border-radius: 6px;
    background: #fef3f2;
    color: var(--danger);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
}

label:has(.errorlist) input,
label:has(.errorlist) select,
label:has(.errorlist) textarea {
    border-color: var(--danger);
}

.form-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.assignment-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.assignment-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.assignment-item.required {
    border-color: #fed7aa;
    background: #fff7ed;
}

.assignment-item strong,
.assignment-item small,
.assignment-item p {
    display: block;
}

.assignment-item small,
.assignment-item p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.assignment-form {
    margin-top: 12px;
}

.program-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 18px;
    align-items: start;
}

.assignment-editor-panel {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 16px;
}

.assignment-editor-panel .assignment-list {
    max-height: 360px;
    overflow: auto;
}

.assignment-editor-panel .assignment-form {
    display: grid;
    gap: 12px;
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.assignment-editor-panel .assignment-form label {
    display: grid;
    gap: 6px;
}

.assignment-editor-panel .assignment-form .btn {
    width: 100%;
}

.assignment-intro h2 {
    margin: 0 0 8px;
}

.assignment-intro p {
    margin: 0;
    color: var(--muted);
}

.panel-head.compact {
    margin-bottom: 10px;
}

.panel-head.compact h2 {
    font-size: 16px;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.detail-layout.wide-left {
    grid-template-columns: minmax(0, 1fr) 420px;
}

.detail-layout.single-column {
    grid-template-columns: minmax(0, 1fr);
}

.course-side {
    display: grid;
    gap: 16px;
}

.course-side .form-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.detail-list {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 8px 14px;
    margin: 0 0 18px;
}

.detail-list dt {
    color: var(--muted);
    font-size: 13px;
}

.detail-list dd { margin: 0; }

.detail-list.compact {
    margin: 0;
}

.note {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

/* Reclamation card: the factory's answer above the details (02.10.2026). */
.rec-state {
    margin-bottom: 16px;
}

.rec-state-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 12px;
}

.rec-state-head h2 {
    margin: 0;
}

.rec-state-head small {
    color: var(--muted);
}

.rec-state-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rec-state-body h3 {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.rec-state-body p {
    margin: 0;
}

@media (max-width: 720px) {
    .rec-state-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.compact-note {
    margin: 10px 0 0;
    font-size: 14px;
}

.dealer-response-summary small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.dealer-response-form form {
    display: grid;
    gap: 12px;
}

.dealer-response-form label {
    margin-bottom: 0;
}

.dealer-response-form .btn {
    width: 100%;
}

.danger-note {
    border-color: #fecaca;
    background: #fef2f2;
    color: #7f1d1d;
}

.danger-panel {
    border-color: #fecaca;
}

.danger-note p {
    margin: 6px 0 0;
}

.danger-text {
    color: #b91c1c !important;
}

.card-subsection {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.card-subsection .group-chip-list {
    margin-top: 0;
}

.access-actions {
    display: grid;
    gap: 10px;
}

.access-action .btn {
    width: 100%;
}

/* A control and the sentence explaining it, kept together as one row. The
   pairing used to rely on children landing in the right grid cell in source
   order, which broke the moment a conditional block did not render. */
.access-actions {
    margin-top: 14px;
}

.access-action {
    display: grid;
    grid-template-columns: minmax(190px, 240px) 1fr;
    align-items: center;
    gap: 14px;
}

.access-action.is-note-only { grid-template-columns: 1fr; }

.access-action-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .access-action { grid-template-columns: 1fr; gap: 6px; }
}

.access-secret {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
}

.card-subsection .access-secret {
    grid-template-columns: 1fr;
}

.access-secret p {
    margin: 5px 0 0;
    color: var(--muted);
}

code {
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--surface-soft);
    color: var(--text);
    font-family: "Consolas", "Monaco", monospace;
}

.action-panel label,
.login-panel label,
.form-grid label,
.form-panel label,
.form-field {
    display: grid;
    align-content: start;
    gap: 6px;
    margin-bottom: 12px;
}

label span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-grid .wide { grid-column: 1 / -1; }

.form-panel {
    max-width: 720px;
}

.form-panel.compact-panel {
    max-width: none;
}

/* Numeric columns (price, totals) read as a clean receipt right-aligned,
   not left-aligned like the surrounding text columns - used on both the
   read-only quote detail table and anywhere else a table mixes text and
   money columns. */
.align-right {
    text-align: right;
    white-space: nowrap;
}

.amount-cell {
    font-weight: 700;
    color: var(--text);
}

#quote-item-grand-total {
    font-weight: 800;
    color: var(--brand);
    white-space: nowrap;
}

.new-group-panel-collapse {
    overflow: hidden;
    padding: 0;
}

.new-group-panel-collapse > summary {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.new-group-panel-collapse > summary::-webkit-details-marker { display: none; }

.new-group-panel-collapse > summary::after {
    content: "+";
    display: grid;
    width: 28px;
    height: 28px;
    margin-left: auto;
    place-items: center;
    border: 1px solid #d7c3f7;
    border-radius: 7px;
    color: var(--brand);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

.new-group-panel-collapse[open] > summary {
    border-bottom: 1px solid #e5dbfa;
    background: #f7f2ff;
}

.new-group-panel-collapse[open] > summary::after { content: "−"; }

.new-group-panel-collapse > summary span { display: grid; gap: 3px; }
.new-group-panel-collapse > summary strong { color: var(--text); }
.new-group-panel-collapse > summary small { color: var(--muted); }

/* Compact creation of a missing group from the user form. */
.group-quick-create {
    width: min(100%, 720px);
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #dfd3f5;
    border-radius: 8px;
    background: #fbfaff;
    box-shadow: var(--shadow);
}

.group-quick-create > summary {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}

.group-quick-create > summary::-webkit-details-marker { display: none; }

.group-quick-create > summary::after {
    content: "+";
    display: grid;
    width: 26px;
    height: 26px;
    margin-left: auto;
    place-items: center;
    border: 1px solid #d7c3f7;
    border-radius: 7px;
    color: var(--brand);
    font-size: 19px;
    line-height: 1;
}

.group-quick-create[open] > summary {
    border-bottom: 1px solid #e5dbfa;
    background: #f7f2ff;
}

.group-quick-create[open] > summary::after { content: "−"; }
.group-quick-create > summary span { display: grid; gap: 3px; }
.group-quick-create > summary strong { color: var(--text); }
.group-quick-create > summary small { color: var(--muted); }

.group-quick-create-body {
    padding: 18px;
}

.transfer-reports {
    margin: 4px 0 12px;
    padding: 15px;
    border: 1px solid #dbe4f2;
    border-radius: 8px;
    background: #f8faff;
}

.transfer-reports legend {
    padding: 0 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
}

.transfer-reports .field-help { margin: 0 0 12px; }

.transfer-reports-list > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.transfer-reports-list label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid #e1e7f0;
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
}

.transfer-reports-list input { width: auto; min-height: auto; }

.form-panel small {
    color: var(--muted);
}

.check-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.check-row span { order: 2; }
.check-row input {
    order: 1;
    width: auto;
    min-height: auto;
}

.check-row-with-help {
    align-items: start;
}

.check-row-with-help .field-help {
    grid-column: 2;
    margin-top: -2px;
}

.invite-recipient-list {
    display: grid;
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.invite-recipient {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.invite-recipient:last-child { border-bottom: 0; }
.invite-recipient:hover { background: var(--surface-soft); }
.invite-recipient input { width: auto; min-height: auto; }
.invite-recipient span { display: grid; gap: 2px; }
.invite-recipient small { color: var(--muted); overflow-wrap: anywhere; }
[data-invite-recipient-results][aria-busy="true"] { opacity: .58; pointer-events: none; }
.invite-selection-summary {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.invite-selection-summary > .note { margin: 0; }
.invite-selection-heading { color: var(--text); font-size: 14px; font-weight: 800; }
.invite-selection-list { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 8px 7px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}
.invite-selection-chip span { display: grid; min-width: 0; gap: 1px; }
.invite-selection-chip strong, .invite-selection-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-selection-chip small { color: var(--muted); }
.invite-selection-remove {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--accent-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.invite-selection-remove:hover { border-color: var(--accent); background: var(--accent-soft); }
.invite-sign-ins-panel { margin: 0 0 16px; }
.invite-sign-ins-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; }
.invite-sign-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.invite-sign-in > div { display: grid; gap: 2px; min-width: 0; }
.invite-sign-in small, .invite-sign-in time { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.invite-sign-in time { flex: 0 0 auto; white-space: nowrap; }
.invite-email-preview { align-self: start; }

.file-list {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.record-list.spaced {
    margin-top: 14px;
}

.file-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.file-list span {
    color: var(--muted);
    font-size: 13px;
}

.training-section {
    margin-bottom: 16px;
}

.empty-state {
    text-align: center;
}

.empty-state p { color: var(--muted); }

.messages {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.message {
    border: 1px solid var(--border);
    border-left-width: 5px;
    border-radius: 8px;
    padding: 13px 16px;
    background: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.45;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}

.message-success {
    background: #ecfdf3;
    border-color: #abefc6;
    border-left-color: var(--success);
    color: var(--success);
}

.message-warning {
    background: #fff7ed;
    border-color: #fed7aa;
    border-left-color: var(--warning);
    color: var(--warning);
}

.message-error {
    background: #fef3f2;
    border-color: #fecdca;
    border-left-color: var(--danger);
    color: var(--danger);
}

.message-info {
    background: var(--surface-blue);
    border-color: #bfdbfe;
    border-left-color: var(--primary-dark);
    color: var(--primary-dark);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.pagination-size,
.pagination-navigation {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pagination-size {
    color: var(--muted);
    font-size: 13px;
}

.pagination-size-option {
    min-width: 34px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted-strong);
    text-align: center;
    font-weight: 700;
}

.pagination-size-option:hover,
.pagination-size-option.active {
    border-color: #cdb1ea;
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.page-indicator {
    color: var(--muted);
    font-size: 14px;
}

.empty {
    color: var(--muted);
    text-align: center;
}

.login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg);
}

.login-panel {
    width: min(410px, 100%);
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.login-brand { margin-bottom: 22px; }
.login-panel .btn { width: 100%; }

.activation-consents {
    display: grid;
    gap: 10px;
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.activation-consents .muted,
.activation-consents p { margin: 0; }

.legal-document-links a,
.consent-field a,
.legal-contact a { color: var(--primary); font-weight: 600; }

.consent-field {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.45;
}

.consent-field input { flex: 0 0 auto; margin-top: 4px; }

.legal-page-shell {
    min-height: 100vh;
    padding: 48px 20px;
    background: var(--bg);
}

.legal-document-card {
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.legal-document-card h1 { margin: 14px 0 24px; }
.legal-document-content { color: var(--text); line-height: 1.65; }
.legal-document-content p { margin: 0 0 18px; }
.legal-contact { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); }

@media (max-width: 640px) {
    .legal-page-shell { padding: 20px 12px; }
    .legal-document-card { padding: 24px 18px; }
}

.login-help-link {
    color: var(--primary);
    font-size: 14px;
    text-align: center;
}

.login-help-link:hover { text-decoration: underline; }

.login-legal-link {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.login-legal-link a { color: inherit; text-decoration: underline; }
.login-legal-link a:hover { color: var(--primary); }

.attention-panel {
    margin-top: 16px;
    margin-bottom: 16px;
}

.attention-panel-collapsible {
    padding: 0;
}

.attention-summary {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px;
    cursor: pointer;
    list-style: none;
}

.attention-summary::-webkit-details-marker {
    display: none;
}

.attention-summary h2 {
    margin: 0;
}

.attention-summary p {
    margin: 4px 0 0;
    color: var(--muted);
}

.attention-summary-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
}

.attention-toggle-label {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--primary);
    font-weight: 800;
    font-size: 13px;
}

.attention-panel-collapsible[open] .attention-toggle-label {
    background: var(--surface-blue);
}

.attention-panel-collapsible[open] .attention-toggle-label::before {
    content: "Скрыть";
}

.attention-panel-collapsible[open] .attention-toggle-label {
    font-size: 0;
}

.attention-panel-collapsible[open] .attention-toggle-label::before {
    font-size: 13px;
}

.attention-panel-collapsible .attention-list,
.attention-panel-collapsible .attention-empty {
    margin: 0 18px 18px;
}

.attention-count {
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: var(--primary);
    font-weight: 800;
}

.attention-list {
    display: grid;
    gap: 10px;
}

.attention-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.attention-item.danger {
    border-color: #fecaca;
    background: #fff7f7;
}

.attention-item.warning {
    border-color: #fed7aa;
    background: #fff8ed;
}

.attention-item.info {
    border-color: #bfdbfe;
    background: #f7fbff;
}

.attention-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.attention-line span,
.attention-line small {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 8px;
    background: #eef2f7;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
}

.attention-item.danger .attention-line span { color: #b91c1c; background: #fee2e2; }
.attention-item.warning .attention-line span { color: #b45309; background: #ffedd5; }
.attention-item.info .attention-line span { color: #1d4ed8; background: #dbeafe; }

.attention-item strong {
    display: block;
    margin-bottom: 4px;
}

.attention-item p {
    margin: 0;
    color: var(--muted);
}

.attention-empty {
    margin: 0;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

/* Global visual refresh */
body {
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.topbar {
    height: 72px;
    padding: 0 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06);
    backdrop-filter: blur(10px);
    justify-content: flex-end;
}

.topbar-spacer {
    flex: 1 1 auto;
}

.brand,
.login-brand {
    color: var(--text);
}

.login-brand strong {
    color: var(--text);
    font-size: 16px;
    letter-spacing: 0;
}

.login-logo {
    width: 204px;
    height: 52px;
    object-fit: contain;
    object-position: left center;
}

.userbox {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-align: right;
}

.user-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 800;
}

.shell {
    grid-template-columns: 256px minmax(0, 1fr);
    min-height: calc(100vh - 72px);
}

.sidebar {
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c7ccd6 transparent;
    padding: 18px 14px 22px;
    background: #ffffff;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #c7ccd6;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #9aa4b2;
}

.nav {
    min-height: calc(100vh - 108px);
    gap: 22px;
}

.nav-section {
    gap: 6px;
}

.nav-label {
    margin: 0 12px 8px;
    color: #667085;
    letter-spacing: 0.04em;
}

.nav-link {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--muted-strong);
    font-weight: 500;
}

.nav-link:hover,
.nav-link.active,
.nav-accordion[open] > summary.nav-link {
    background: var(--brand-soft);
    border-color: #e7d5ff;
    color: var(--brand);
}

.nav-link.active {
    font-weight: 750;
    box-shadow: inset 3px 0 0 var(--brand);
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon,
.nav-accordion[open] > summary .nav-icon {
    background: #ffffff;
    color: var(--brand);
}

.nav-accordion > summary::after {
    color: currentColor;
}

.nav-submenu {
    margin: 4px 0 0 22px;
    padding: 4px 0 4px 14px;
    border-left-color: #eadcff;
}

.nav-sublink {
    padding: 8px 10px;
    border: 1px solid transparent;
}

.nav-sublink:hover,
.nav-sublink.active {
    background: var(--brand-soft);
    border-color: #e3d1ff;
    color: var(--brand);
}

.nav-sublink.active {
    box-shadow: inset 3px 0 0 var(--brand);
}

.nav-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #f0f3f8;
    color: #667085;
    font-size: 13px;
    font-weight: 750;
}

.main {
    padding: 32px;
}

.page-head {
    margin-bottom: 22px;
}

.page-head h1 {
    color: var(--text);
    font-size: 30px;
    line-height: 1.15;
}

.page-head p {
    max-width: 920px;
    line-height: 1.5;
}

.summary-row div,
.panel,
.stats a,
.table-wrap,
.learning-stats div,
.login-panel {
    border-color: var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.summary-row,
.learning-stats,
.learning-card-grid {
    gap: 14px;
}

.panel {
    padding: 20px;
}

.learning-stats div,
.stats a {
    min-height: 92px;
    padding: 16px;
}

.learning-stats strong,
.stats strong,
.summary-row strong {
    color: var(--text);
    font-weight: 800;
}

.input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
textarea {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(40, 87, 217, 0.14);
}

.btn {
    min-height: 42px;
    border-radius: 10px;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn.primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn.secondary {
    background: var(--surface-blue);
    border-color: #c8d8ff;
}

.btn.ghost {
    color: var(--muted-strong);
}

.data-table th,
.data-table td {
    padding: 13px 14px;
}

.data-table th {
    background: #f8fafc;
    color: #667085;
}

.data-table tr:hover td {
    background: #fbfcff;
}

.learning-card {
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.learning-card:hover {
    transform: translateY(-2px);
    border-color: #cfd8e7;
    box-shadow: var(--shadow);
}

.learning-card-link {
    color: inherit;
    text-decoration: none;
}

.learning-card-link:focus-visible {
    outline: 3px solid rgb(83 0 134 / 0.35);
    outline-offset: 3px;
}

.learning-card-cover,
.program-table-cover,
.course-cover,
.learning-step-cover,
.course-step-cover {
    background: linear-gradient(135deg, var(--brand), #7c3aed);
}

.status {
    border-radius: 999px;
}

.messages {
    position: sticky;
    top: 84px;
    z-index: 15;
}

.message {
    border-radius: 12px;
}

.login-screen {
    background: #f4f6fa;
}

.login-panel {
    width: min(440px, 100%);
    padding: 28px;
}

.login-brand {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.login-brand div {
    display: grid;
    gap: 2px;
}

/* Dashboard */
.dashboard-head {
    align-items: center;
}

.dashboard-kpi-grid {
    display: grid;
    /* auto-fit (not a fixed 4-column repeat) so fewer tiles - e.g. a learning-only
       account with no CRM/reclamation access - don't leave a wide empty gutter. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.dashboard-kpi-grid:has(> :only-child) {
    grid-template-columns: minmax(220px, 320px);
}

.dashboard-kpi {
    position: relative;
    overflow: hidden;
    min-height: 124px;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow);
    color: var(--text);
}

.dashboard-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: var(--primary);
}

.dashboard-kpi.accent-orange::before { background: var(--warning); }
.dashboard-kpi.accent-purple::before { background: var(--brand); }
.dashboard-kpi.accent-green::before { background: var(--success); }

.dashboard-kpi span,
.dashboard-kpi small {
    color: var(--muted);
}

.dashboard-kpi strong {
    color: var(--text);
    font-size: 32px;
    line-height: 1.05;
    font-weight: 850;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

/* No side column: only the principal administrator has anything to put there. */
.dashboard-layout.is-single { grid-template-columns: minmax(0, 1fr); }

.ftt-dealer-manager-form { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ftt-dealer-manager-options { display: grid; gap: 4px; }
.ftt-dealer-manager-options [hidden] { display: none; }

.dashboard-main,
.dashboard-side {
    display: grid;
    gap: 18px;
}

.dashboard-attention-head {
    padding: 4px 2px 0;
}

.dashboard-attention-head h2 {
    margin: 0 0 5px;
}

.dashboard-attention-head p {
    margin: 0;
    color: var(--muted);
}

.attention-domain {
    margin: 0;
}

.attention-domain-learning { border-top: 3px solid #7c3aed; }
.attention-domain-crm { border-top: 3px solid #2563eb; }
.attention-domain-reclamations { border-top: 3px solid #d97706; }
.attention-domain-ftt { border-top: 3px solid var(--success); }

.dashboard-attention-list {
    display: grid;
    gap: 10px;
}

.dashboard-attention-item {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--text);
}

.dashboard-attention-item {
    border-left-width: 4px;
}

.dashboard-attention-item:hover {
    border-color: #c9d3e2;
    background: #fbfcff;
    color: var(--text);
}

.dashboard-attention-item span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-attention-item small {
    color: var(--muted);
}

.severity-danger { border-left-color: var(--danger); background: #fffafa; }
.severity-warning { border-left-color: var(--warning); background: #fffdf8; }
.severity-info { border-left-color: var(--primary); }

.sync-health-panel {
    display: grid;
    gap: 12px;
}

.sync-health-panel h2,
.sync-health-panel p {
    margin: 0;
}

.sync-health-ok,
.sync-health-failed {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 750;
}

.sync-health-ok {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.sync-health-failed {
    color: #b42318;
    background: #fff7f5;
    border: 1px solid #fed7d2;
}

.sync-health-details {
    display: grid;
    grid-template-columns: minmax(0, 90px) minmax(0, 1fr);
    gap: 7px 10px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.sync-health-details dt { font-weight: 750; }
.sync-health-details dd { margin: 0; color: var(--text); }

.sync-health-errors {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    color: var(--muted-strong);
    font-size: 13px;
}

.sync-health-errors summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 750;
}

.sync-health-errors ul {
    display: grid;
    gap: 7px;
    margin: 10px 0 0;
    padding-left: 18px;
}

.empty-state {
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--muted);
}

@media (max-width: 980px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: static;
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .nav {
        min-height: auto;
        display: grid;
        gap: 10px;
    }
    .nav-section { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nav-account { margin-top: 0; }
    .nav-label,
    .nav-link.disabled { display: none; }
    .main { padding: 18px; }
    .summary-row,
    .dashboard-kpi-grid,
    .dashboard-layout,
    .learning-stats,
    .detail-layout,
    .detail-layout.wide-left,
    .program-edit-layout,
    .group-management-layout,
    .access-secret,
    .access-actions.inline,
    .form-grid,
    .learning-toolbar,
    .learning-toolbar.materials-toolbar,
    .learning-toolbar.analytics-toolbar,
    .learning-toolbar.user-analytics-toolbar,
    .learning-toolbar.team-toolbar,
    .learning-toolbar.my-learning-toolbar,
    .learning-card-grid,
    .learning-card-grid.compact,
    .attempt-layout,
    .step-form-layout,
    .bulk-actions { grid-template-columns: 1fr; }
    .form-grid .wide { grid-column: auto; }
    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .learning-step-hero {
        grid-template-columns: 140px minmax(0, 1fr);
    }
    .course-hero {
        grid-template-columns: 240px minmax(0, 1fr);
    }
    .course-cover {
        width: 240px;
    }
    .course-hero .action-menu {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .assignment-editor-panel {
        position: static;
    }
    .learning-step-hero .button-row {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .topbar {
        height: auto;
        min-height: 72px;
        padding: 10px 14px;
    }

    .userbox { display: none; }
    .nav-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-head,
    .toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .button-row,
    .form-actions {
        justify-content: stretch;
    }
    .button-row .btn,
    .form-actions .btn,
    .attention-item .btn {
        width: 100%;
    }
    .attention-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .page-head h1 { font-size: 24px; }
    .course-hero {
        grid-template-columns: 1fr;
    }
    .course-cover {
        width: 100%;
    }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-list { grid-template-columns: 1fr; }
    .learning-step-hero {
        grid-template-columns: 1fr;
    }
    .learning-step-cover {
        width: 100%;
        max-width: 360px;
    }
    .step-nav-buttons {
        align-items: stretch;
    }
    .step-nav-buttons .btn,
    .step-nav-buttons .inline-form,
    .step-nav-buttons .inline-form .btn {
        width: 100%;
    }
    .course-step {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: start;
    }
    .course-step-main {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .course-step-cover {
        width: 72px;
    }
    .course-step-actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
    .tree-row {
        grid-template-columns: 24px minmax(0, 1fr);
    }
    .tree-count,
    .tree-actions {
        grid-column: 2;
        justify-content: flex-start;
    }
    .pagination {
        justify-content: stretch;
        flex-wrap: wrap;
    }
}

/* Portal workspace: shared hierarchy for navigation, operational lists and forms. */
.topbar {
    justify-content: flex-start;
    gap: 18px;
    padding: 0 28px;
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--text);
}

.topbar-brand:hover { color: var(--text); }

.topbar-logo {
    width: 154px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
}

.topbar-brand-copy {
    display: grid;
    gap: 2px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    font-weight: 800;
    line-height: 1.15;
}

.topbar-brand-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.sidebar { padding-top: 18px; }
.nav { min-height: calc(100vh - 90px); }

.nav-link.active,
.nav-accordion > summary.active {
    border-color: #ddd0ff;
    background: #f4f0ff;
    color: #5726b7;
}

.nav-sublink.active {
    border-left-color: #6d38d4;
    background: #f7f4ff;
    color: #5726b7;
}

.page-head,
.panel-head {
    position: relative;
}

.page-head > div:first-child > h1 + p,
.panel-head p {
    max-width: 900px;
}

.work-table-wrap {
    overflow: visible;
    padding: 2px 0;
}

.work-table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.work-table thead th {
    border-top: 1px solid rgba(83, 0, 134, 0.22);
    border-bottom: 1px solid rgba(83, 0, 134, 0.22);
    background: rgba(83, 0, 134, 0.10);
    color: #4d1677;
    font-weight: 850;
}

.work-table thead th:first-child {
    border-left: 1px solid var(--border);
    border-radius: 8px 0 0 8px;
}

.work-table thead th:last-child {
    border-right: 1px solid var(--border);
    border-radius: 0 8px 8px 0;
}

.work-table tbody td {
    border-top: 1px solid #dbe3ee;
    border-bottom: 1px solid #dbe3ee;
    background: #f5f7fb;
    vertical-align: middle;
}

.work-table tbody td:first-child {
    border-left: 1px solid #dbe3ee;
    border-radius: 9px 0 0 9px;
    box-shadow: inset 3px 0 0 rgba(83, 0, 134, 0.14);
}

.work-table tbody td:last-child {
    border-right: 1px solid #dbe3ee;
    border-radius: 0 9px 9px 0;
    text-align: right;
    white-space: nowrap;
}

/* :last-child right-align assumes a trailing action link/arrow, which is
   the common case - but some tables end on a real content column (a
   status plus a comment, a free-text note) that reads badly pushed to
   the far right of an otherwise-empty column. Opt out per-cell. */
.work-table tbody td.value-cell {
    text-align: left;
    white-space: normal;
}

.work-table tbody tr:hover td {
    background: #f0ebf8;
    border-color: #cdb7e5;
}

/* Non-operational data tables use the same row-card hierarchy as CRM and analytics. */
.data-table:not(.work-table) {
    border-collapse: separate;
    border-spacing: 0 6px;
}

.data-table:not(.work-table) thead th {
    border-top: 1px solid rgba(83, 0, 134, 0.22);
    border-bottom: 1px solid rgba(83, 0, 134, 0.22);
    background: rgba(83, 0, 134, 0.10);
    color: #4d1677;
    font-weight: 850;
}

.data-table:not(.work-table) thead th:first-child {
    border-left: 1px solid var(--border);
    border-radius: 8px 0 0 8px;
}

.data-table:not(.work-table) thead th:last-child {
    border-right: 1px solid var(--border);
    border-radius: 0 8px 8px 0;
}

.data-table:not(.work-table) tbody td {
    border-top: 1px solid #dbe3ee;
    border-bottom: 1px solid #dbe3ee;
    background: #f5f7fb;
}

.data-table:not(.work-table) tbody td:first-child {
    border-left: 1px solid #dbe3ee;
    border-radius: 9px 0 0 9px;
    box-shadow: inset 3px 0 0 rgba(83, 0, 134, 0.14);
}

.data-table:not(.work-table) tbody td:last-child {
    border-right: 1px solid #dbe3ee;
    border-radius: 0 9px 9px 0;
}

.data-table:not(.work-table) tbody tr:hover td {
    background: #f0ebf8;
    border-color: #cdb7e5;
}

.work-table .status { white-space: normal; }

/* FTT outlet control centre: an admin needs the next action before the
   directory fields, so risk signals lead the page and the rows sort by them. */
.ftt-outlet-head .eyebrow {
    margin: 0 0 4px;
    color: #6d38d4;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ftt-outlet-signals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.ftt-outlet-signal {
    display: grid;
    gap: 3px;
    min-height: 122px;
    padding: 16px;
    border: 1px solid #d6dded;
    border-top: 4px solid #2e5bdd;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(31, 47, 79, .06);
    color: #33415c;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ftt-outlet-signal:hover,
.ftt-outlet-signal:focus-visible,
.ftt-outlet-signal.active {
    border-color: #7750d1;
    box-shadow: 0 12px 28px rgba(71, 44, 132, .14);
    color: #2f1764;
    transform: translateY(-2px);
}

.ftt-outlet-signal.danger { border-top-color: #c43329; }
.ftt-outlet-signal.warning { border-top-color: #bf6200; }
.ftt-outlet-signal.muted { border-top-color: #697894; }
.ftt-outlet-signal span { font-size: 13px; font-weight: 750; }
.ftt-outlet-signal strong { color: #172238; font-size: 30px; line-height: 1.05; }
.ftt-outlet-signal small { color: #6d7a90; font-size: 12px; }

.ftt-outlet-directory { overflow: visible; }
.ftt-outlet-filter { align-items: center; margin-bottom: 12px; }
.ftt-outlet-filter > .input[type="search"] { flex: 1 1 340px; }
.ftt-outlet-filter select { flex: 0 1 200px; }

.ftt-outlet-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.filter-chip {
    border: 1px solid #cbd8fa;
    border-radius: 999px;
    background: #f3f6ff;
    color: #2750b4;
    font-size: 13px;
    font-weight: 750;
    padding: 7px 11px;
    text-decoration: none;
}

.filter-chip:hover,
.filter-chip:focus-visible,
.filter-chip.active { background: #2e5bdd; border-color: #2e5bdd; color: #fff; }

.ftt-outlet-table td { min-width: 125px; }
.ftt-outlet-table td:first-child { min-width: 235px; }
.ftt-outlet-table small,
.ftt-outlet-table strong { display: block; }
.ftt-outlet-table small { margin-top: 4px; color: #68768e; font-size: 12px; }

.ftt-next-action,
.ftt-inline-alert {
    display: inline-flex;
    margin-top: 8px;
    border-radius: 999px;
    background: #ecf7ef;
    color: #14743b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    padding: 4px 7px;
}

.ftt-next-action.attention,
.ftt-inline-alert { background: #fff0ee; color: #ad2b24; }

/* Team workload sits next to the organisational tree, but answers a
   different operational question: where a manager should help today. */
.ftt-workload-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.ftt-workload-summary > div {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid #d8e1ee;
    border-radius: 10px;
    background: #f6f8fc;
}

.ftt-workload-summary span { color: #65748d; font-size: 12px; font-weight: 750; }
.ftt-workload-summary strong { color: #1f2f4d; font-size: 24px; line-height: 1; }
.ftt-workload-table small { display: block; margin-top: 4px; color: #6c7990; font-size: 12px; }
.ftt-workload-table td:first-child { min-width: 240px; }
.ftt-workload-signal { display: inline-flex; margin: 2px 4px 2px 0; border-radius: 999px; padding: 4px 7px; font-size: 12px; font-weight: 750; }
.ftt-workload-signal.warning { background: #fff5e6; color: #a95300; }
.ftt-workload-signal.danger { background: #fff0ee; color: #ad2b24; }

.ftt-unassigned-outlets {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #dce4ef;
}

/* Outlets without a seller, by region (templates/ftt/hierarchy.html, 30.09.2026):
   a folding block per region with a count, one line per outlet inside - city,
   name, address and a small «+ Продавец». Cards in a grid broke a hundred
   names into a word per line. */
.ftt-unassigned-total {
    display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px;
    background: #fff5e6; color: #a95300; font-size: 14px; vertical-align: middle;
}
.ftt-unassigned-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px; align-items: start; }
.ftt-unassigned-region { border: 1px solid #ecdcc2; border-radius: 12px; background: #fffbf4; overflow: hidden; }
.ftt-unassigned-region[hidden] { display: none; }
.ftt-unassigned-region > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px;
    list-style: none; cursor: pointer; font-weight: 700;
}
.ftt-unassigned-region > summary::-webkit-details-marker { display: none; }
.ftt-unassigned-region > summary::before {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 2px;
    border-right: 2px solid #a95300; border-bottom: 2px solid #a95300; transform: rotate(-45deg); transition: transform 0.15s ease;
}
.ftt-unassigned-region[open] > summary::before { transform: rotate(45deg); }
.ftt-unassigned-region-name { flex: 1 1 auto; min-width: 0; }
.ftt-unassigned-region-count {
    flex: 0 0 auto; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: #fff; color: #a95300;
    font-size: 12px; text-align: center; border: 1px solid #ecdcc2;
}
.ftt-unassigned-outlet-list { display: grid; margin: 0; padding: 0 6px 6px; list-style: none; }
.ftt-unassigned-outlet-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 8px; border-top: 1px solid #f1e6d4; background: #fff;
}
.ftt-unassigned-outlet-list li:first-child { border-radius: 8px 8px 0 0; }
.ftt-unassigned-outlet-list li:last-child { border-radius: 0 0 8px 8px; }
.ftt-unassigned-outlet-list li[hidden] { display: none; }
.ftt-unassigned-outlet-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; color: var(--text); text-decoration: none; }
.ftt-unassigned-outlet-name:hover strong { color: var(--brand); }
.ftt-unassigned-outlet-name strong { font-size: 14px; }
.ftt-unassigned-outlet-name small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.ftt-unassigned-outlet-list .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 720px) {
    .ftt-unassigned-regions { grid-template-columns: minmax(0, 1fr); }
    .ftt-unassigned-outlet-list .btn { width: auto; min-height: 36px; }
}

@media (max-width: 1000px) {
    .ftt-outlet-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ftt-workload-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .ftt-outlet-head .button-group { width: 100%; }
    .ftt-outlet-head .button-group .btn { flex: 1; }
    .ftt-outlet-signals { grid-template-columns: 1fr; }
    .ftt-outlet-signal { min-height: 100px; }
    .ftt-workload-summary { grid-template-columns: 1fr 1fr; }
}

.pagination {
    justify-content: space-between;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.initial-assignment-panel {
    border: 1px solid #ded4f6;
    border-radius: 10px;
    background: #fcfbff;
}

.initial-assignment-panel > summary {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.initial-assignment-panel > summary::-webkit-details-marker { display: none; }

.initial-assignment-panel > summary::after {
    content: "⌄";
    margin-left: auto;
    color: #6d38d4;
    font-size: 18px;
}

.initial-assignment-panel[open] > summary::after { transform: rotate(180deg); }

.initial-assignment-panel summary span { display: grid; gap: 3px; }
.initial-assignment-panel summary small { color: var(--muted); }

.initial-assignment-body {
    display: grid;
    gap: 14px;
    padding: 0 16px 16px;
    border-top: 1px solid #e9e2f8;
}

.assignment-enable {
    margin-top: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ece7f7;
}

.assignment-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.assignment-fields label:last-child { grid-column: 1 / -1; }

/* Reclamation editor: long forms remain scannable without nested cards. */
.reclamation-editor {
    max-width: 1180px;
    margin: 0 auto;
    border: 1px solid #e4d9f3;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.reclamation-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px 24px;
    border-bottom: 1px solid #ece5f5;
}

.reclamation-editor-head h1 {
    margin: 10px 0 6px;
    color: var(--brand);
    font-size: 24px;
}

.reclamation-editor-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.editor-close {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #7c7390;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

.editor-close:hover { background: var(--brand-soft); color: var(--brand); }

.reclamation-editor-form { padding: 0 32px; }

.reclamation-editor-form > .message { margin-top: 24px; }

.reclamation-form-section {
    margin: 20px 0;
    padding: 24px;
    border: 1px solid #e6deef;
    border-radius: 8px;
    background: #fdfcff;
}

.reclamation-form-section:nth-of-type(even) { background: #fbfdff; border-color: #dfe8f4; }

.reclamation-form-section h2 {
    margin: 0 0 20px;
    padding-left: 12px;
    border-left: 3px solid var(--brand);
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.reclamation-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.reclamation-fields-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.reclamation-field,
.reclamation-conditional.reclamation-field,
.reclamation-conditional.reclamation-field > label {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.reclamation-field > span,
.reclamation-field-label,
.reclamation-conditional.reclamation-field > label > span {
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 700;
}

.reclamation-conditional[hidden] { display: none !important; }
.reclamation-rule[hidden],
.reclamation-field[data-product-field][hidden] { display: none !important; }

.required-mark { color: var(--danger); }

.reclamation-fields .field-wide { grid-column: 1 / -1; }

.reclamation-section-note {
    margin: -10px 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.reclamation-rule {
    display: grid;
    gap: 18px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #e4d8f0;
    border-radius: 8px;
    background: #fbf9fe;
}

.reclamation-rule-inner {
    border-left: 3px solid #b78ae4;
    background: #fdfcff;
}

.reclamation-rule h3 {
    margin: 0;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.reclamation-contact-fields input[disabled] {
    border-color: #ddd5e7;
    background: #f5f3f8;
    color: #5e5770;
    cursor: not-allowed;
}

.choice-group { min-width: 0; }

.choice-group-label {
    margin: 0 0 8px;
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 750;
}

.choice-group-label span {
    color: var(--muted);
    font-weight: 500;
}

.choice-option-list {
    display: grid;
    gap: 2px;
    padding: 10px;
}

.choice-option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 20px;
    padding: 0;
}

.choice-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 38px;
    padding: 9px 10px;
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.42;
}

.choice-option:hover { background: #f0e7fb; }

.choice-option input[type="checkbox"] {
    width: 17px !important;
    min-width: 17px;
    height: 17px;
    min-height: 17px !important;
    flex: 0 0 17px;
    margin: 2px 0 0 !important;
    padding: 0;
    accent-color: var(--brand);
}

.choice-option span { min-width: 0; }

.choice-group-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.choice-group-columns .choice-option-grid {
    grid-template-columns: 1fr;
}

.reclamation-file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.reclamation-file-field { display: grid; gap: 8px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.reclamation-dropzone {
    display: grid;
    min-height: 148px;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 20px;
    border: 2px dashed #b78ae4;
    border-radius: 8px;
    background: #fcfaff;
    color: var(--brand-dark);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.reclamation-dropzone:hover,
.reclamation-dropzone.is-dragging {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: 0 0 0 3px rgba(83, 0, 134, 0.12);
}

.reclamation-dropzone.has-files {
    border-style: solid;
    border-color: #70ba8d;
    background: #f0fdf4;
    color: var(--success-dark);
}

.reclamation-dropzone-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #eee2ff;
    color: var(--brand);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.reclamation-dropzone small { color: var(--muted); }

.reclamation-editor-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px -32px 0;
    padding: 16px 32px;
    border-top: 1px solid #e8e0f1;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 18px rgba(16, 24, 40, 0.04);
}

.reclamation-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 520px;
    color: var(--muted-strong);
    font-size: 13px;
    line-height: 1.4;
}

.reclamation-consent input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 1px 0 0;
    accent-color: var(--brand);
}

.reclamation-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 900px) {
    .work-table-wrap { overflow-x: auto; }
    .work-table { min-width: 760px; }

    .reclamation-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reclamation-file-grid { grid-template-columns: 1fr; }
    .choice-option-grid,
    .choice-group-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .topbar { padding: 10px 14px; }
    .topbar-logo { width: 132px; height: 36px; }
    .topbar-brand-copy { display: none; }
    .assignment-fields { grid-template-columns: 1fr; }

    .reclamation-editor { margin: -8px; border-radius: 0; border-left: 0; border-right: 0; }
    .reclamation-editor-head { padding: 22px 18px 18px; }
    .reclamation-editor-form { padding: 0 18px; }
    .reclamation-fields,
    .reclamation-fields-two { grid-template-columns: 1fr; }
    .reclamation-fields .field-wide { grid-column: auto; }
    .reclamation-form-section { margin: 14px 0; padding: 20px 16px; }

    .choice-option-grid,
    .choice-group-columns { grid-template-columns: 1fr; }

    .transfer-reports-list > div { grid-template-columns: 1fr; }
    .reclamation-editor-actions { margin: 0 -18px; padding: 14px 18px; }
    .reclamation-editor-actions { align-items: stretch; flex-direction: column; }
    .reclamation-actions-buttons { width: 100%; }
    .reclamation-actions-buttons .btn { flex: 1; }
}

/* Mobile workspace: touch-first navigation, forms and operational lists. */
.mobile-nav-toggle,
.mobile-nav-close,
.mobile-nav-brand,
.mobile-nav-backdrop {
    display: none;
}

@media (max-width: 980px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 60;
        height: 64px;
        min-height: 64px;
        padding: 0 16px;
        gap: 12px;
    }

    .mobile-nav-toggle {
        display: inline-grid;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        place-content: center;
        gap: 5px;
        padding: 0;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background: var(--surface);
        cursor: pointer;
    }

    .mobile-nav-toggle:hover,
    .mobile-nav-toggle:focus-visible {
        border-color: #cdb7ed;
        background: var(--brand-soft);
        outline: 0;
    }

    .mobile-nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--brand);
    }

    .shell {
        display: block;
        min-height: calc(100vh - 64px);
    }

    .sidebar {
        position: fixed;
        z-index: 70;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(332px, calc(100vw - 32px));
        height: 100dvh;
        padding: 16px 14px 28px;
        overflow-y: auto;
        border: 0;
        box-shadow: 18px 0 38px rgba(16, 24, 40, 0.18);
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        scrollbar-width: thin;
    }

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

    .mobile-nav-brand {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        gap: 10px;
        max-width: calc(100% - 58px);
        margin: 0 0 26px 4px;
        color: var(--text);
    }

    .mobile-nav-brand img {
        width: 132px;
        height: 40px;
        object-fit: contain;
        object-position: left center;
    }

    .mobile-nav-brand span {
        display: grid;
        gap: 2px;
        min-width: 0;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.1;
    }

    .mobile-nav-brand small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 500;
    }

    .mobile-nav-close {
        position: absolute;
        top: 16px;
        right: 14px;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        padding: 0;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background: var(--surface);
        color: var(--muted-strong);
        cursor: pointer;
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
    }

    .mobile-nav-close:hover,
    .mobile-nav-close:focus-visible {
        border-color: #cdb7ed;
        background: var(--brand-soft);
        color: var(--brand);
        outline: 0;
    }

    .mobile-nav-backdrop {
        position: fixed;
        z-index: 65;
        inset: 0;
        width: 100%;
        border: 0;
        background: rgba(16, 24, 40, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body.navigation-open { overflow: hidden; }
    body.navigation-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }

    .nav,
    .nav-section {
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .nav { gap: 26px; }
    .nav-section { gap: 7px; }
    .nav-label { display: block; margin: 0 10px 8px; }
    .nav-link.disabled { display: flex; }
    .nav-account { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--border); }
    .nav-submenu { margin-left: 20px; padding-left: 13px; }

    .main { padding: 24px; }
}

@media (max-width: 720px) {
    html { font-size: 16px; }

    .main { padding: 18px 14px 28px; }
    .messages { top: 76px; }

    .page-head,
    .page-head.split,
    .panel-head.split {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 16px;
    }

    .page-head h1 { font-size: 25px; }
    .page-head p { font-size: 15px; }
    .page-head .button-row,
    .page-head > .btn { justify-self: stretch; }
    .page-head > .btn { width: 100%; text-align: center; }

    .panel,
    .table-wrap,
    .learning-card,
    .dashboard-kpi,
    .learning-stats div,
    .stats a { border-radius: 10px; }

    .panel { padding: 16px; }
    .stats,
    .dashboard-kpi-grid,
    .learning-stats,
    .summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .stats a,
    .learning-stats div,
    .dashboard-kpi { min-height: 94px; padding: 14px; }
    .stats strong,
    .learning-stats strong,
    .dashboard-kpi strong { font-size: 27px; }

    .toolbar,
    .learning-toolbar,
    .learning-toolbar.analytics-toolbar,
    .learning-toolbar.team-toolbar,
    .learning-toolbar.my-learning-toolbar,
    .learning-toolbar.materials-toolbar,
    .learning-toolbar.user-analytics-toolbar,
    .form-grid,
    .detail-layout,
    .detail-layout.wide-left,
    .program-edit-layout,
    .group-management-layout,
    .attempt-layout,
    .step-form-layout,
    .dashboard-layout,
    .assignment-fields,
    .reclamation-fields,
    .reclamation-fields-two,
    .reclamation-file-grid,
    .choice-option-grid,
    .choice-group-columns { grid-template-columns: 1fr; }

    .toolbar > *,
    .learning-toolbar > *,
    .form-grid > *,
    .button-row > *,
    .form-actions > * { min-width: 0; }

    .toolbar .btn,
    .learning-toolbar .btn,
    .button-row .btn,
    .form-actions .btn,
    .bulk-actions .btn { width: 100%; }

    .button-row,
    .form-actions,
    .bulk-actions { display: grid; grid-template-columns: 1fr; }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td { display: block; width: 100%; }

    .responsive-table colgroup,
    .responsive-table thead { display: none; }

    .table-wrap,
    .work-table-wrap,
    .analytics-table-wrap { overflow: visible; padding: 0; border: 0; background: transparent; box-shadow: none; }

    .responsive-table { border-collapse: separate; border-spacing: 0 10px; min-width: 0; }

    .responsive-table tbody { display: grid; gap: 10px; }
    .responsive-table tbody tr {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    }

    .responsive-table tbody td,
    .work-table tbody td,
    .analytics-table tbody td {
        display: grid;
        grid-template-columns: minmax(105px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        min-height: 0;
        padding: 11px 12px;
        border: 0 !important;
        border-bottom: 1px solid #edf0f4 !important;
        border-radius: 0 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .responsive-table tbody td:last-child,
    .work-table tbody td:last-child,
    .analytics-table tbody td:last-child { border-bottom: 0 !important; }

    .responsive-table tbody td[data-label]::before,
    .work-table tbody td[data-label]::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 750;
        line-height: 1.4;
    }

    .responsive-table tbody td[data-label=""] { display: block; padding-top: 4px; }
    .responsive-table tbody td[data-label=""]::before { display: none; }
    .responsive-table .btn { width: 100%; }
    .responsive-table td small { margin-top: 3px; }
    .responsive-table .progress-meter { width: 100%; }

    .course-hero,
    .learning-step-hero { grid-template-columns: 1fr; padding: 16px; }
    .course-cover,
    .learning-step-cover { width: 100%; max-width: none; }
    .course-hero h1,
    .learning-step-hero h1 { font-size: 26px; }
    .course-step { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
    .course-step-main { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
    .course-step-cover { width: 66px; height: 48px; }
    .course-step-actions { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr; }
    .course-step-actions .btn { width: 100%; }

    .learning-video,
    .pdf-frame,
    .pdf-frame iframe { max-width: 100%; }
    .learning-video { border-radius: 8px; }
    .pdf-frame { min-height: min(68dvh, 560px); }

    .pagination { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; }
    .pagination-size,
    .pagination-navigation { justify-content: center; }
    .pagination .btn { width: 100%; text-align: center; }

    .reclamation-editor { margin: -18px -14px; }
    .reclamation-editor-head { padding: 20px 18px 16px; }
    .reclamation-editor-form { padding: 0 14px; }
    .reclamation-form-section { padding: 18px 14px; }
    .reclamation-editor-actions { margin: 0 -14px; padding: 12px 14px; }
    .reclamation-editor-actions .btn { min-width: 0; }
}

/* Final mobile pass: keep the work surface readable and touch-friendly on phones. */
@media (max-width: 720px) {
    html,
    body { overflow-x: clip; }

    .main,
    .panel,
    .detail-main-column,
    .course-hero-body,
    .learning-step-hero-body { min-width: 0; }

    input,
    select,
    textarea { font-size: 16px; }

    .topbar {
        gap: 8px;
        padding-inline: 12px;
    }

    .topbar-spacer { min-width: 0; }

    .topbar-feedback {
        min-height: 40px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .topbar-feedback-long { display: none; }
    .topbar-feedback-short { display: inline; }

    .panel-head {
        align-items: flex-start;
    }

    .panel-head > .button-row,
    .panel-head > .btn {
        width: 100%;
    }

    .learning-step-content,
    .learning-step-actions-panel,
    .learning-step-side { padding: 16px 14px; }

    .learning-step-section-head h2 { font-size: 19px; }

    .learning-video {
        display: block;
        width: 100%;
        max-height: 62dvh;
        background: #111827;
        object-fit: contain;
    }

    .learning-video::-webkit-media-controls-picture-in-picture-button { display: none; }

    .learning-step-side {
        width: 100%;
    }

    .step-mini-list {
        max-height: min(44dvh, 360px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 3px;
        scrollbar-width: thin;
    }

    .step-mini-item {
        min-height: 48px;
        padding: 10px;
    }

    .step-mini-item strong,
    .course-step-body h3,
    .learning-card h3 {
        overflow-wrap: anywhere;
    }

    .course-step-actions,
    .step-order-control,
    .step-order-form { width: 100%; }

    .step-order-control { display: grid; grid-template-columns: 1fr; }
    .step-order-form { display: grid; grid-template-columns: 1fr 1fr; }

    .course-step-actions form,
    .course-step-actions .btn { width: 100%; }

    .test-question { padding: 14px; }
    .radio-row { min-height: 46px; padding: 10px; }

    .file-dropzone { min-height: 132px; padding: 16px; }
}

@media (max-width: 420px) {
    .topbar-logo { width: 112px; }
    .mobile-nav-toggle { width: 40px; height: 40px; flex-basis: 40px; }
    .topbar-feedback { padding-inline: 8px; }
    .learning-step-hero h1,
    .course-hero h1 { font-size: 24px; }
    .step-mini-list { max-height: min(40dvh, 300px); }
}

@media (max-width: 420px) {
    .topbar { padding: 0 12px; }
    .topbar-logo { width: 126px; height: 34px; }
    .main { padding-inline: 12px; }
    .stats,
    .dashboard-kpi-grid,
    .learning-stats,
    .summary-row { grid-template-columns: 1fr; }
    .responsive-table tbody td,
    .work-table tbody td,
    .analytics-table tbody td { grid-template-columns: 1fr; gap: 4px; }
    .responsive-table tbody td[data-label]::before,
    .work-table tbody td[data-label]::before { font-size: 11px; }
    .reclamation-editor { margin-inline: -12px; }
    .reclamation-editor-actions { margin-inline: -14px; }
}

/* The compact sign-in card expands only while the onboarding panel is open. */
.login-flow {
    --login-onboarding-width: min(1040px, calc(100vw - 64px));
    width: min(410px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.08);
    transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1), height 300ms ease;
}

.login-flow-track {
    position: relative;
    width: 100%;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.login-flow.is-onboarding-open { width: var(--login-onboarding-width); }
.login-flow.is-onboarding-open .login-flow-track {
    transform: translateX(calc(-1 * var(--login-onboarding-width)));
}

.login-flow .login-panel {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.login-flow-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 14px;
}

.login-flow-actions .login-help-link { margin: 0; }

.login-onboarding-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 8px 10px 8px 14px;
    border: 0;
    border-radius: 8px;
    color: var(--primary);
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.login-onboarding-trigger:hover,
.login-onboarding-trigger:focus-visible { background: #f4effc; }

.login-onboarding-arrow {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-size: 0;
}

.login-onboarding-arrow::before {
    position: absolute;
    top: 13px;
    left: 8px;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.login-onboarding-arrow::after {
    position: absolute;
    top: 10px;
    left: 13px;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

.login-onboarding {
    position: absolute;
    top: 0;
    left: 100%;
    width: var(--login-onboarding-width);
    padding: 36px clamp(28px, 5vw, 64px) 44px !important;
}

.login-onboarding-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    margin: -4px 0 16px;
    padding: 0;
    border: 0;
    color: var(--primary);
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.login-onboarding-back:hover,
.login-onboarding-back:focus-visible { text-decoration: underline; }

.login-onboarding-brand { margin-bottom: 22px; }
.login-onboarding h1 { margin: 0; font-size: 30px; }
.login-onboarding-intro { max-width: 680px; margin: 8px 0 24px; color: var(--muted); font-size: 16px; line-height: 1.5; }

.login-onboarding-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: login-step;
}

.login-onboarding-steps li {
    position: relative;
    min-height: 48px;
    padding: 10px 12px 10px 52px;
    border: 1px solid #e3ddf0;
    border-radius: 9px;
    background: #fbfaff;
    counter-increment: login-step;
}

.login-onboarding-steps li::before {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: #eee6fa;
    content: counter(login-step);
    font-size: 13px;
    font-weight: 800;
}

.login-onboarding-steps strong,
.login-onboarding-steps span { display: block; }
.login-onboarding-steps span { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.login-onboarding-note { max-width: 760px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.test-builder-nav .panel-head.compact {
    align-items: flex-start;
    gap: 12px;
}

.test-builder-add-question {
    display: inline-flex;
    width: auto;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
    white-space: nowrap;
}

.test-builder-add-question-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

@media (max-width: 640px) {
    .login-flow,
    .login-flow.is-onboarding-open {
        --login-onboarding-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
    }
    .login-flow .login-panel { min-height: 0; padding: 24px 20px; }
    .login-flow .login-onboarding { padding: 28px 22px 32px !important; }
    .login-flow-actions { align-items: flex-start; flex-direction: column; }
    .login-onboarding-trigger { align-self: flex-end; }
    .login-onboarding h1 { font-size: 25px; }
    .login-onboarding-steps { grid-template-columns: 1fr; }
    .test-builder-nav .panel-head.compact { display: grid; grid-template-columns: 1fr; }
    .test-builder-add-question { width: 100%; justify-content: center; }
}

/* FTT quote builder: an assisted sales workspace, not a spreadsheet-shaped
   form. The product search and the proposal card are intentionally separate:
   once the public catalogue API is connected, only the results area changes. */
.quote-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.quote-builder-head h1 { margin: 5px 0 7px; }
.quote-builder-head .button-group { flex: 0 0 auto; }
.quote-eyebrow,
.quote-section-kicker {
    margin: 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.quote-builder-lead { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.5; }

.quote-builder { display: grid; gap: 18px; }
.quote-customer-card,
.quote-proposal-card {
    border: 1px solid #dfd9ec;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(37, 14, 71, 0.055);
}

.quote-customer-card { padding: 20px 22px; }
.quote-section-title,
.quote-proposal-head,
.quote-items-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.quote-section-title h2,
.quote-proposal-head h2,
.quote-items-heading h3 { margin: 2px 0 0; font-size: 20px; }
.quote-section-title > div > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.quote-section-note,
.quote-draft-dot {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f2eff8;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.quote-customer-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 0.8fr) minmax(240px, 1.4fr);
    gap: 14px;
    margin-top: 16px;
}
.quote-customer-grid .field { margin: 0; }
.quote-customer-grid textarea.input { min-height: 42px; height: 42px; resize: vertical; }

.quote-items-heading { align-items: end; margin-top: 28px; }
.quote-items-heading > span { color: var(--muted); font-size: 13px; font-weight: 700; }

.quote-proposal-card { position: sticky; top: 16px; padding: 21px; border-top: 4px solid var(--primary); }
.quote-proposal-lead { min-height: 42px; margin: 12px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.quote-proposal-lines { display: grid; gap: 8px; max-height: 320px; overflow: auto; padding: 4px 0 14px; border-bottom: 1px solid #e4deed; }
.quote-proposal-empty { margin: 18px 0; color: var(--muted); font-size: 13px; text-align: center; }
.quote-proposal-line strong,
.quote-proposal-line span { display: block; }
.quote-proposal-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.quote-proposal-line { min-width: 0; }
.quote-proposal-line span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.quote-proposal-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.quote-proposal-total span { color: var(--muted-strong); font-weight: 700; }
.quote-proposal-total strong { color: var(--primary); font-size: 25px; }

.quote-proposal-footnote { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }

@media (max-width: 980px) {
    .quote-proposal-card { position: static; }
    .quote-customer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quote-customer-comment { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .quote-builder-head { display: grid; gap: 14px; }
    .quote-builder-head .button-group { width: 100%; }
    .quote-builder-head .button-group > * { flex: 1 1 0; text-align: center; }
    .quote-customer-card,
    .quote-proposal-card { padding: 16px; border-radius: 14px; }
    .quote-customer-grid { grid-template-columns: 1fr 1fr; }
    .quote-customer-comment { grid-column: 1 / -1; }
}

/* Read-only quote detail shares the configurator's visual language, but keeps
   every chosen value legible without returning to a wide spreadsheet table. */
.quote-detail-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.34fr);
    align-items: start;
    gap: 18px;
}
.quote-detail-main { display: grid; gap: 18px; }
.quote-detail-customer-card,
.quote-detail-items-card {
    padding: 22px;
    border: 1px solid #dfd9ec;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(37, 14, 71, 0.055);
}
.quote-detail-customer-card { border-top: 4px solid #5b2e9d; }
.quote-detail-customer-card h2 { margin: 2px 0 0; font-size: 20px; }
.quote-contact-link { padding: 7px 10px; border-radius: 9px; background: #f2ebff; color: var(--primary); font-size: 13px; font-weight: 800; text-decoration: none; }
.quote-detail-comment { margin: 16px 0 0; padding: 11px 13px; border-radius: 10px; background: #f8f7fb; color: var(--muted-strong); line-height: 1.5; }
.quote-detail-items-card { border-top: 4px solid #2e5bd7; }
.quote-detail-items-card .quote-items-heading { margin: 0; }
.quote-detail-items-card .quote-items-heading h2 { margin: 2px 0 0; font-size: 20px; }
.quote-detail-product-list { display: grid; gap: 10px; margin-top: 15px; }
.quote-detail-summary .quote-proposal-lines { max-height: 360px; }

@media (max-width: 980px) {
    .quote-detail-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .quote-detail-actions { width: 100%; }
    .quote-detail-actions > * { flex: 1 1 0; text-align: center; }
    .quote-detail-customer-card,
    .quote-detail-items-card { padding: 16px; border-radius: 14px; }
}
.ftt-network-category-eyebrow,
.ftt-network-category-detail-kicker {
    display: block;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ftt-network-category-hero h2 { margin: 5px 0 7px; font-size: 24px; }
.ftt-network-category-hero p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* The network screen temporarily drills into one outlet without becoming the
   seller's separate analytics page.  The stronger frame makes that scope
   obvious, while the main network tabs remain immediately above it. */
.ftt-outlet-matrix-context {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr);
    gap: 18px;
    align-items: center;
    margin: 18px 0 16px;
    padding: 22px 24px;
    border: 2px solid #7c3aed;
    border-radius: 18px;
    background:
        radial-gradient(circle at 87% 12%, rgba(196, 181, 253, .82), transparent 34%),
        linear-gradient(118deg, #2b0759, #4c168d 58%, #2854b7);
    box-shadow: 0 16px 32px rgba(66, 20, 123, .22);
}
.ftt-outlet-matrix-context-copy { min-width: 0; }
.ftt-outlet-matrix-context-kicker,
.ftt-outlet-matrix-result-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ftt-outlet-matrix-context-kicker { color: #ddd6fe; }
.ftt-outlet-matrix-context h2 { margin: 6px 0 5px; color: #fff; font-size: clamp(22px, 2.2vw, 30px); }
.ftt-outlet-matrix-context p { margin: 0; color: #ede9fe; font-size: 13px; line-height: 1.5; }
.ftt-outlet-matrix-picker {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    gap: 8px 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
}
.ftt-outlet-matrix-picker label { color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ftt-outlet-matrix-picker .input { min-width: 0; border-color: rgba(255, 255, 255, .58); background: rgba(255, 255, 255, .97); }
.ftt-outlet-matrix-picker .btn.primary { background: #fff; color: #4c168d; border-color: #fff; }
.ftt-outlet-matrix-picker .btn.secondary { border-color: rgba(255, 255, 255, .62); color: #fff; background: transparent; }
.ftt-outlet-matrix-picker small { grid-column: 2 / -1; color: #e9ddff; font-size: 11px; line-height: 1.35; }
.ftt-outlet-matrix-results { border-top: 4px solid #7c3aed; }
.ftt-outlet-matrix-result-label { margin-bottom: 4px; color: #5b21b6; }

.ftt-network-category-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 20px 0 14px;
    padding: 25px 27px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 86% 5%, rgba(168, 132, 255, .58), transparent 31%),
        linear-gradient(125deg, #26004c, #530086 59%, #2f3ba5);
    box-shadow: 0 16px 32px rgba(57, 4, 102, .23);
}
.ftt-network-category-hero .ftt-network-category-eyebrow { color: #dfccff; }
.ftt-network-category-hero h2 { color: #fff; }
.ftt-network-category-hero p { max-width: 720px; color: #eee7ff; }
.ftt-network-category-hero .button-group { flex: 0 0 auto; }
.ftt-network-category-hero .btn.secondary { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.12); }
.ftt-network-category-hero .ftt-matrix-month-label { min-width: 112px; color: #fff; text-align: center; font-weight: 800; }

.ftt-network-category-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}
.ftt-network-category-kpis article {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e1ddec;
    border-radius: 15px;
    background: var(--surface);
    box-shadow: 0 5px 14px rgba(36, 21, 67, .035);
}
.ftt-network-category-kpis span,
.ftt-network-category-kpis small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ftt-network-category-kpis strong { display: block; overflow: hidden; margin: 5px 0; color: var(--primary); font-size: clamp(19px, 2vw, 26px); text-overflow: ellipsis; white-space: nowrap; }
.ftt-network-category-kpis .is-warning { border-color: #edcb8d; background: #fffaf0; }
.ftt-network-category-kpis .is-warning strong { color: #b85b00; }

.ftt-network-category-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .65fr);
    gap: 16px;
    margin-bottom: 16px;
}
.ftt-network-category-chart-panel,
.ftt-network-category-detail { min-height: 354px; }
.ftt-network-category-chart-wrap { height: 280px; }
.ftt-network-category-detail { display: flex; flex-direction: column; }
.ftt-network-category-detail h2 { margin: 7px 0 6px; font-size: 21px; }
.ftt-network-category-detail > p { min-height: 40px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ftt-network-category-outlets { display: grid; gap: 7px; margin-top: auto; padding-top: 15px; }
.ftt-network-category-outlet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1px 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f8f7fb;
}
.ftt-network-category-outlet span { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.ftt-network-category-outlet small { color: var(--muted); font-size: 11px; }
.ftt-network-category-outlet strong { grid-column: 2; grid-row: 1 / span 2; color: var(--primary); font-size: 13px; white-space: nowrap; }
.ftt-network-category-table-panel { margin-top: 16px; }
.ftt-network-category-table tr[data-network-category-key] { cursor: pointer; }
.ftt-network-category-table tr[data-network-category-key]:hover td,
.ftt-network-category-table tr[data-network-category-key].is-selected td { background: #f2ecff; }
.ftt-network-category-table tr[data-network-category-key]:focus { outline: 2px solid #9b6ed0; outline-offset: -2px; }
.ftt-network-category-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

@media (max-width: 1080px) {
    .ftt-network-category-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .ftt-network-category-layout { grid-template-columns: 1fr; }
    .ftt-network-category-chart-panel { min-height: 330px; }
    .ftt-outlet-matrix-context { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ftt-network-category-hero { padding: 18px; border-radius: 15px; }
    .ftt-network-category-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ftt-network-category-hero { display: grid; }
    .ftt-network-category-hero .button-group { width: 100%; }
    .ftt-network-category-hero .button-group > * { flex: 1 1 0; }
    .ftt-network-category-chart-wrap { height: 240px; }
    .ftt-outlet-matrix-context { padding: 18px; border-radius: 15px; }
    .ftt-outlet-matrix-picker { grid-template-columns: 1fr; }
    .ftt-outlet-matrix-picker small { grid-column: auto; }
    .ftt-outlet-matrix-picker .btn { width: 100%; text-align: center; }
}

.field-note {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.field-hint-link {
    margin-left: 6px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}

.field-hint-link:hover { text-decoration: underline; }

/* Granting screens: a list of who holds a role, then a clearly separated
   place to grant it. Previously the grant form sat straight under the table
   inside the same panel, so the two ran together and the screen read as one
   undifferentiated block. A data-table was also heavy machinery for the two or
   three rows these lists actually hold. */
.role-panel { display: grid; gap: 16px; }

.role-holders { display: grid; gap: 8px; }

.role-holder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.role-holder-person {
    display: flex;
    flex-direction: column;
    flex: 1 1 240px;
    min-width: 0;
}

.role-holder-person small { color: var(--muted); font-size: 12px; }

.role-holder-meta {
    display: flex;
    flex-direction: column;
    color: var(--muted);
    font-size: 12px;
}

.role-holder-action { margin-left: auto; }

.role-grant {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-strong);
}

.role-grant-title { color: var(--muted-strong); font-size: 13px; font-weight: 650; }

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

.role-grant-form select { flex: 1 1 320px; min-width: 0; }

@media (max-width: 720px) {
    .role-holder-action { margin-left: 0; }
    .role-grant-form > * { flex: 1 1 100%; }
}

/* Access roles. Shown on everybody, but quiet for the ordinary one: if the
   common case shouted as loudly as the rare one, nothing would stand out and
   the badge would be decoration. Deliberately shaped unlike the type chip
   beside it, so two badges on one row are not read as the same kind of thing. */
.role-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.role-learner { border-style: dashed; }
.role-manager { border-color: #c7d7fe; background: #eef4ff; color: #1e40af; }
.role-admin { border-color: #fecdca; background: #fef3f2; color: var(--danger); }

.access-role-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.access-role-person { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }

.access-role-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.access-role-form .input { min-width: 190px; }

/* Person categories. Descriptive labels, so they read as quiet chips rather
   than as status warnings - the palette is fixed in the model so a category
   cannot be given a colour that disappears against the tree. */
.cat-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-soft);
    color: var(--muted-strong);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.cat-neutral { border-color: var(--border-strong); background: #f1f5f9; color: #475569; }
.cat-violet { border-color: #e0c7f7; background: var(--brand-soft); color: var(--brand-dark); }
.cat-blue { border-color: #c7d7fe; background: #eef4ff; color: #1e40af; }
.cat-green { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.cat-amber { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.cat-rose { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
.cat-teal { border-color: #99f6e4; background: #f0fdfa; color: #0f766e; }
.cat-none { border-style: dashed; color: var(--muted); }

.cat-editable { cursor: pointer; }
.cat-editable:hover { border-color: var(--primary); color: var(--primary-dark); }
.cat-editable:disabled { opacity: 0.5; cursor: progress; }

.cat-menu {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 4px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.cat-menu-item {
    padding: 6px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.cat-menu-item:hover { background: var(--surface-blue); color: var(--primary-dark); }
.cat-menu-item.is-current { background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; }

/* The tree row is the positioning context the absolutely placed menu needs. */
.tree-person { position: relative; }

/* Hierarchy view tabs: the list tree and the React Flow canvas are two
   renderings of the same scope, so the switch between them stays a plain
   link pair rather than anything stateful. */
.learning-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.learning-tab {
    padding: 8px 16px;
    border-radius: 7px;
    color: var(--muted-strong);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

a.learning-tab:hover {
    background: var(--surface-blue);
    color: var(--primary-dark);
}

.learning-tab.is-active {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.learning-flow-panel { padding: 16px; }

.hf-shell { display: grid; gap: 12px; }

.hf-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hf-search { flex: 1 1 260px; min-width: 200px; }

.hf-hint {
    color: var(--muted);
    font-size: 13px;
}

.hf-hint { margin-left: auto; }

.hf-status {
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.hf-status-success { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.hf-status-error { border-color: #fecdca; background: #fef3f2; color: var(--danger); }
.hf-status-info { border-color: #c6d0dd; background: var(--surface-blue); color: var(--muted-strong); }

.hf-canvas {
    height: min(72vh, 760px);
    min-height: 480px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    overflow: hidden;
}

.hf-loading {
    margin: 0;
    padding: 40px;
    color: var(--muted);
    text-align: center;
}

/* Keep this width in sync with NODE_WIDTH in learning-hierarchy-flow.js, and
   the chip metrics below in sync with CHIP_ROW_HEIGHT/CHIP_COLUMNS: Dagre
   reserves each card's box from those constants, so a card that paints taller
   or wider than the layout was told starts overlapping its neighbours. */
.hf-node {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 300px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    font-family: inherit;
    text-align: left;
}

/* Orange, as in the list tree: violet belongs to Korona's own people (.is-korona). */
.hf-node.is-context-manager { border-color: #fdba74; background: #fff7ed; }
.hf-node.is-search-hit { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(40, 87, 217, 0.18); }
.hf-node.is-dimmed { opacity: 0.35; }
/* A valid drop target during a drag, and a member of the dragged branch that
   would create a cycle - the same two rules the server enforces, shown while
   the pointer is still down. */
.hf-node.is-drop-target { border-color: var(--success); box-shadow: 0 0 0 3px rgba(22, 128, 60, 0.22); }
.hf-node.is-blocked { opacity: 0.4; border-style: dashed; }
.hf-node.is-readonly { background: var(--surface-soft); }

.hf-node-head { display: flex; align-items: center; gap: 6px; }

.hf-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
}

.hf-dot.is-activated { background: var(--success); }

.hf-name {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-meta {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.hf-badge {
    overflow: hidden;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-node-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 2px;
}

/* "Открыть" is pushed to the trailing edge whether or not the branch buttons
   before it are present. */
.hf-node-foot .hf-open { margin-left: auto; }

.hf-toggle {
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--muted-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.hf-toggle:hover { background: var(--surface-blue); color: var(--primary-dark); }

.hf-focus {
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--muted-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.hf-focus:hover { background: var(--brand-soft); border-color: #dcc7f5; color: var(--brand-dark); }

.hf-node.is-focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(83, 0, 134, 0.14); }

.hf-open { color: var(--primary); font-size: 12px; font-weight: 650; text-decoration: none; }
.hf-open:hover { text-decoration: underline; }

/* Undo stays visible with nothing to undo, so the control does not appear and
   disappear as transfers are made; disabled is the honest state for it. */
.hf-undo:disabled {
    opacity: 0.45;
    cursor: default;
}

/* People with no subordinates live inside their manager's card instead of
   taking a box of their own - the single biggest compaction on a hierarchy
   this wide. They stay individually draggable via the grip. */
.hf-chip-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}

.hf-chip-title { color: var(--muted); font-size: 11px; font-weight: 650; }

.hf-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 5px;
}

.hf-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    height: 22px;
    padding: 0 5px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-soft);
    font-size: 11px;
}

.hf-chip.is-dragging { opacity: 0.4; border-style: dashed; }
.hf-chip.is-readonly { opacity: 0.7; }
.hf-chip.is-search-hit { border-color: var(--primary); background: var(--surface-blue); }

.hf-chip-grip {
    flex: none;
    color: var(--muted);
    cursor: grab;
    font-size: 10px;
    line-height: 1;
    touch-action: none;
}

.hf-chip-grip:active { cursor: grabbing; }

.hf-chip-name {
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-chip-name:hover { color: var(--primary); text-decoration: underline; }

.hf-chip-cat {
    flex: none;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
}

.hf-chip-mark-dealer { color: #b45309 !important; }

.hf-chip-mark {
    flex: none;
    color: var(--success);
    font-size: 10px;
    font-weight: 700;
}

/* Stacked, not side by side: cardHeight() reserves a fixed row per control,
   and a wrapped row would push the card past the box Dagre was given. */
.hf-chip-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.hf-more {
    align-self: flex-start;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.hf-more:hover { background: var(--surface-blue); }

/* Breadcrumb doubles as a drop zone: in focus mode the rest of the structure
   is hidden, so dropping on an ancestor is the way to move someone out. */
.hf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.hf-crumb {
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-strong);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.hf-crumb:hover { background: var(--surface-blue); color: var(--primary-dark); }
.hf-crumb.is-drop-target { border-color: var(--success); background: #ecfdf5; color: #047857; }
.hf-crumb-sep { color: var(--muted); }

.hf-ghost {
    position: fixed;
    z-index: 70;
    padding: 4px 9px;
    border: 1px solid var(--brand);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 650;
    pointer-events: none;
}

/* Positioned in screen coordinates: a menu drawn inside a card would be
   panned and zoomed along with the diagram. */
.hf-type-menu {
    position: fixed;
    z-index: 55;
}

.hf-chip-cat.cat-editable {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
}

.hf-badge.cat-editable { cursor: pointer; font: inherit; font-size: 11px; font-weight: 650; }
.hf-badge.cat-editable:hover { border-color: var(--primary); color: var(--primary-dark); }

.hf-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
}

.hf-modal {
    width: min(460px, 100%);
    padding: 20px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.hf-modal h3 { margin: 0 0 10px; font-size: 18px; }
.hf-modal p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }

.hf-modal-error { color: var(--danger); font-weight: 650; }

.hf-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* The confirmation dialog is where the transfer is decided, so it carries the
   options rather than just an OK button. */
.hf-outcome {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.hf-modal-modes {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}

.hf-modal-modes legend {
    padding: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.hf-modal-mode,
.hf-modal-report {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    font-size: 14px;
}

.hf-modal-report small { color: var(--muted); font-size: 11px; }

.hf-modal-reports {
    max-height: 190px;
    margin-top: 8px;
    padding: 8px 10px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.hf-modal-inheritor {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 650;
}

/* Slotting the arriving person in above part of the destination's team - a
   separate question from what happens to their own reports, so it gets its own
   block rather than another radio option. */
.hf-modal-adopt { margin-top: 14px; }

.hf-modal-adopt-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
}

.hf-modal-warning {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: var(--warning);
    font-size: 13px;
}

/* Browser fullscreen: the canvas stops being a fixed box and takes whatever
   height is going. .hf-canvas keeps its own height rule for the normal panel,
   so it is overridden here rather than made conditional there. */

/* The panel shell is a grid, where a growing child is meaningless; in
   fullscreen the canvas has to absorb the leftover height, so it becomes a
   column flexbox. */
.hf-shell:fullscreen {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    /* Without an explicit background a fullscreen element is painted black by
       the browser, which would show through around the canvas. */
    padding: 12px;
    background: var(--bg);
}

.hf-shell:fullscreen .hf-canvas {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 720px) {
    .hf-hint { display: none; }
    .hf-canvas { height: 66vh; min-height: 380px; }
}

/* Error log. A traceback is the one place in the portal where monospace and a
   scrollbar beat wrapping: a wrapped stack frame is harder to read than one
   that runs off the edge. */
.error-traceback {
    margin: 0;
    padding: 16px;
    background: #1e1b26;
    color: #e6e1ef;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
}

/* Error log rows. The kind and its message lead; the counter and the time sit
   on the trailing edge, like every other operational list in the portal. */
.error-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.error-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.error-row-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
}
.error-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    text-align: right;
}
@media (max-width: 720px) {
    .error-row { flex-direction: column; gap: 8px; }
    .error-row-meta { align-items: flex-start; text-align: left; }
}

/* FTT outlet rows lead with the city. It is the attribute an administrator
   navigates by - "which shop in Orenburg" - so it reads before the name
   instead of hiding in the grey line with the address. */
.ftt-outlet-place {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.ftt-city {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .01em;
    /* Warm ochre rather than the brand violet, which every other badge in the
       portal already uses. Deep enough to read as a label and not as the amber
       the risk tiles use for a warning. */
    color: #7a5300;
    background: #fdf1cf;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}
/* The region is context, not a way in: quiet, and after the address. */
.ftt-region { color: #8b8397; }
.ftt-outlet-filter select { min-width: 150px; }
@media (max-width: 720px) {
    .ftt-outlet-filter select { min-width: 0; flex: 1 1 45%; }
}

/* On the outlet card the city sits beside the heading, so the chip grows with
   it rather than staying list-sized. */
.page-head .ftt-outlet-place h1 { margin: 0; }
.page-head .ftt-city { font-size: 15px; padding: 4px 12px; }

/* Directory panel heading: the count belongs next to the title, because the
   export button right beside it takes exactly this many rows. */
.count-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #efeaf6;
    color: #4b4358;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

/* What the directory says about this outlet, restated on the outlet's own
   page. Reads as a row of verdicts, not as decoration: the levels are the same
   three the list uses, so a red chip means the same thing in both places. */
.ftt-outlet-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.ftt-alert {
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    border-left: 3px solid transparent;
}
.ftt-alert.level-danger  { background: #fdecea; color: #96261d; border-left-color: #c0392b; }
.ftt-alert.level-warning { background: #fdf3e2; color: #7a5300; border-left-color: #d68910; }
.ftt-alert.level-muted   { background: #f1f0f4; color: #5c5566; border-left-color: #b3adbf; }

/* Missing reference fields, named once instead of a column of dashes. */
.ftt-profile-gaps {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line, #e7e2ee);
}

/* One field that opens, takes typing and narrows as you go.
   Progressive enhancement: with no JS there is no .combo at all and the native
   select below is visible and works on its own. */
.combo { position: relative; }

.combo-input { width: 100%; cursor: text; }

/* The real form field, kept for submission and hidden once the combobox is
   up. Not display:none - a hidden-but-focusable field keeps native validation
   messages positionable if the form ever grows one. */
.combo-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

.combo-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #d6cfe2;
    border-radius: 8px;
    box-shadow: 0 12px 32px -12px rgba(26, 20, 32, .35);
}

.combo-option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}
/* Keyboard and mouse land on the same highlight, so arrow keys and hovering
   never disagree about what Enter would pick. */
.combo-option:hover,
.combo-option.is-active { background: #f1e7fb; }
.combo-option.is-selected { font-weight: 600; }

.combo-empty {
    padding: 10px;
    font-size: 13px;
    color: #8b8397;
}

/* Every section of one outlet, on every one of its pages. A strip rather than
   a menu: there are six, they are always the same six, and seeing which one
   you are on matters more than saving the space. */
.ftt-outlet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -6px 0 18px;
    padding: 4px;
    background: #f2eef7;
    border-radius: 10px;
}
.ftt-outlet-tab {
    padding: 8px 16px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #5b5368;
    text-decoration: none;
    white-space: nowrap;
}
.ftt-outlet-tab:hover { background: #e7dff3; color: #3d3448; }
/* The current section is a filled tab, not just bold: with six of them the
   difference has to survive a glance. */
.ftt-outlet-tab.active {
    background: #fff;
    color: #530086;
    box-shadow: 0 1px 3px rgba(26, 20, 32, .12);
}
@media (max-width: 720px) {
    .ftt-outlet-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .ftt-outlet-tab { padding: 8px 12px; font-size: 13px; }
}

/* Monthly sales plan. A typing screen, not a reading one - the fields lead and
   everything derived stays quiet beside them. */
.plan-month-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.plan-month-nav { display: flex; align-items: center; gap: 8px; }
.plan-month-name { font-size: 18px; text-transform: capitalize; min-width: 168px; text-align: center; }
.plan-month-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.plan-month-state small { color: #8b8397; }

.plan-fill-actions { flex-wrap: wrap; }

.plan-table th.numeric,
.plan-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.plan-table td.numeric input { text-align: right; max-width: 150px; }
.plan-category small { display: block; color: #8b8397; font-size: 12px; margin-top: 2px; }

/* Derived columns are the answer to arithmetic, not data to act on, so they
   read one step quieter than the fields that produce them. */
.plan-derived { color: #6d6579; }
.plan-derived small { display: block; font-size: 11.5px; color: #918aa0; }
.plan-derived.is-up { color: #2f6b52; font-weight: 600; }
.plan-derived.is-down { color: #8a5a00; font-weight: 600; }

/* An untouched row is the thing this screen exists to fix, so it is marked -
   quietly, because eight of them on a fresh month should not look like eight
   errors. */
.plan-row.is-empty td:first-child { box-shadow: inset 3px 0 0 #e4dced; }

.plan-table tfoot th {
    border-top: 2px solid #d6cfe2;
    font-size: 15px;
}

/* The running total and the save button follow you down a long form, because
   the number you are aiming at is at the bottom of the table. */
.plan-savebar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #e7e2ee;
    border-radius: 12px;
    box-shadow: 0 -6px 24px -14px rgba(26, 20, 32, .4);
}
.plan-savebar-summary { display: flex; flex-direction: column; gap: 2px; }
.plan-savebar-summary span { font-size: 12px; color: #8b8397; text-transform: uppercase; letter-spacing: .06em; }
.plan-savebar-summary strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.plan-savebar-summary small { color: #6d6579; }
.plan-savebar-actions { display: flex; align-items: center; gap: 14px; }
.plan-dirty-hint { color: #8a5a00; font-size: 13px; font-weight: 600; }

@media (max-width: 720px) {
    .plan-month-state { align-items: flex-start; }
    .plan-savebar { flex-direction: column; align-items: stretch; }
    .plan-savebar-actions { justify-content: space-between; }
}

/* ---------- Планы продаж: экран массового задания ---------- */

/* The rule is what is actually being edited here - the table below is a
   selection, not a form - so it is boxed and sits above the outlets. */
.plan-rule {
    border: 1px solid #e2dcec;
    border-radius: 14px;
    padding: 18px 20px;
    background: #fbf9fd;
    margin-bottom: 18px;
}
.plan-rule-head h3 { margin: 0 0 4px; font-size: 16px; }
.plan-rule-head p { margin: 0 0 16px; color: #6d6579; font-size: 13px; max-width: 74ch; }
.plan-rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    align-items: start;
}
.plan-rule-grid .field { display: flex; flex-direction: column; gap: 6px; }
.plan-rule-grid .field > span { font-size: 12px; color: #8b8397; text-transform: uppercase; letter-spacing: .06em; }
.plan-rule-grid .field small { color: #8b8397; font-size: 12px; }
.plan-rule-radios { display: flex; flex-direction: column; gap: 4px; }
.plan-rule-radios label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.plan-rule-radios ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.plan-rule-extra { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #ded7ea; }
.plan-rule-extra .field { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.plan-rule-extra .field > span { font-size: 12px; color: #8b8397; text-transform: uppercase; letter-spacing: .06em; }
.plan-rule-extra .field small { color: #8b8397; font-size: 12px; }
.plan-rule-hint { margin: 0 0 12px; color: #6d6579; font-size: 13px; }
.plan-manual-table td.numeric input { text-align: right; max-width: 140px; }

.plan-board-table th.numeric,
.plan-board-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.plan-board-table td small { display: block; color: #8b8397; font-size: 12px; margin-top: 2px; }
.plan-board-check { width: 36px; text-align: center; }
.plan-board-check input { width: 17px; height: 17px; cursor: pointer; }
.plan-board-table td.numeric.is-up { color: #2f6b52; font-weight: 600; }
.plan-board-table td.numeric.is-down { color: #8a5a00; font-weight: 600; }

/* The preview is the one thing on the page that has not happened yet, so it
   is the one thing outlined rather than merely panelled. */
.plan-preview { border: 2px solid #cbb8e6; }
.plan-preview-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.plan-preview-summary article {
    border: 1px solid #e6e0ef;
    border-radius: 12px;
    padding: 12px 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.plan-preview-summary span { font-size: 11.5px; color: #8b8397; text-transform: uppercase; letter-spacing: .06em; }
.plan-preview-summary strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.plan-preview-summary small { color: #8b8397; font-size: 12px; }
.plan-preview-summary article.is-down strong { color: #8a5a00; }
.plan-preview-note { margin: 0 0 16px; color: #6d6579; font-size: 13px; }

.plan-preview-table th.numeric,
.plan-preview-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.plan-preview-table td.numeric.is-up { color: #2f6b52; font-weight: 600; }
.plan-preview-table td.numeric.is-down { color: #8a5a00; font-weight: 600; }

.plan-preview-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #ece7f3;
}

@media (max-width: 720px) {
    .plan-preview-actions { flex-direction: column-reverse; align-items: stretch; }
    .plan-rule { padding: 14px; }
}

/* ---------- Сетевые списки работы: подборы и задачи ---------- */

/* Five states, not the four the directory has, so the row is allowed to fit
   what it holds instead of dropping a lone tile onto a second line. */
.ftt-outlet-signals.wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.ftt-work-table td small { display: block; color: #8b8397; font-size: 12px; margin-top: 2px; }
.ftt-work-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A quote nobody has touched past the first funnel week, or a task whose date
   has passed. Marked on the left edge rather than by tinting the whole row:
   on a list filtered to exactly these, a full-width tint would make every row
   shout and none of them stand out. */
.ftt-work-table tr.is-stale td:first-child { box-shadow: inset 3px 0 0 #d98b3a; }

/* ---------- Иерархия ФТТ: поиск поверх готового дерева ---------- */

.ftt-hierarchy-toolbar { flex-wrap: wrap; gap: 12px; align-items: center; }
.ftt-hierarchy-filter { flex: 1 1 260px; min-width: 200px; margin: 0; }
.ftt-hierarchy-filter input { width: 100%; }
.ftt-hierarchy-filter-count { color: #6d6579; font-size: 13px; white-space: nowrap; }

/* ---------- ФТТ: предупреждения перед сохранением точки ---------- */

/* Loud enough to stop the hand already reaching for "Сохранить", quiet enough
   not to read as a refusal - both of these are warnings, and pressing save
   again is a legitimate answer. */
.ftt-duplicate-warning {
    grid-column: 1 / -1;
    border: 1px solid #f1cb81;
    border-left: 4px solid #d98b3a;
    border-radius: 12px;
    background: #fffaf0;
    padding: 16px 18px;
}
.ftt-duplicate-warning.is-staff { border-color: #f0b8b3; border-left-color: #b42318; background: #fff7f6; }
.ftt-duplicate-warning h2 { margin: 0 0 6px; font-size: 16px; }
.ftt-duplicate-warning p { margin: 0 0 10px; color: #6d6579; font-size: 13.5px; }
.ftt-duplicate-warning ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ftt-duplicate-warning li { display: flex; align-items: center; gap: 10px; }
.ftt-duplicate-warning li a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.ftt-duplicate-warning li a:hover strong { text-decoration: underline; }
.ftt-duplicate-warning li span { color: #8b8397; font-size: 12.5px; }
.ftt-duplicate-confirm { margin: 0 !important; font-weight: 600; color: #7a4a12 !important; }
.ftt-duplicate-warning.is-staff .ftt-duplicate-confirm { color: #8f2a20 !important; }
.ftt-closed-with-staff { color: #8f2a20; }

/* ---------- Воронка КП на телефоне ---------- */

/* Seven columns sharing a phone's width gave each about 45px: a board where
   nothing can be read is not a board. Below the tablet breakpoint they stop
   shrinking and the row scrolls instead, at a width where a card is legible
   and its buttons are worth tapping. The scroll hint above the board was
   already there for exactly this. */
@media (max-width: 720px) {
    .kanban-board {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .kanban-board-group { flex: 0 0 auto; }

    .kanban-column {
        flex: 0 0 78vw;
        max-width: 300px;
        scroll-snap-align: start;
    }

    /* Big enough to hit with a thumb without zooming. */
    .kanban-card-outcome-form .btn { min-height: 38px; padding-inline: 14px; }
}

/* While a long press is dragging a card, the board must not also scroll under
   the finger. */
.kanban-board.is-touch-dragging { touch-action: none; overflow: hidden; }
.kanban-card-touch-dragging { opacity: .55; transform: scale(.97); }

/* ------------------------------------------------------------------
   Assortment proposals: the public form (as-public) and review screens.
   The public page is standalone, opened mostly on phones by shop staff:
   one column first, each part of the form with its own colour so a long
   form reads as seven short steps rather than one wall of fields.
   ------------------------------------------------------------------ */
.as-public {
    background:
        radial-gradient(1200px 400px at 50% -120px, #f1ebf6 0%, transparent 70%),
        var(--bg);
}

.as-accent-about { --accent: #5e2e80; --accent-soft: #f4eff8; }
.as-accent-mattress { --accent: #3d5fb8; --accent-soft: #eef2fa; }
.as-accent-bed { --accent: #7457b8; --accent-soft: #f3f0f9; }
.as-accent-accessory { --accent: #2f8279; --accent-soft: #ebf4f2; }
.as-accent-fabric { --accent: #b2582f; --accent-soft: #faf1eb; }
.as-accent-competitor { --accent: #aa4258; --accent-soft: #f9eef1; }
.as-accent-final { --accent: #357a4c; --accent-soft: #ecf4ef; }

.as-public-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--muted-strong);
    font-weight: 600;
    font-size: 14px;
}

.as-public-logo { height: 30px; width: auto; }

.as-public-main {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 16px 72px;
}

/* Hero */
.as-hero {
    padding: 26px 24px 22px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #4d1f6e 0%, #653487 55%, #7f509e 100%);
    box-shadow: 0 14px 32px rgba(77, 31, 110, .16);
}

.as-hero-kicker {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.as-hero h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.18; }
.as-hero-lead { margin: 0 0 18px; line-height: 1.55; color: rgba(255, 255, 255, .88); }

.as-howto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.as-howto li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
}

.as-howto b {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #4d1f6e;
    font-size: 14px;
}

.as-howto span { font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .85); }
.as-howto strong { display: block; color: #fff; font-size: 14px; }

/* Sticky section switcher */
.as-steps {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    gap: 6px;
    margin: 16px -16px 0;
    padding: 10px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(244, 246, 250, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.as-steps::-webkit-scrollbar { display: none; }

.as-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted-strong);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

.as-step b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
}

.as-step i {
    font-style: normal;
    font-size: 12px;
    color: var(--accent);
}

.as-step i:empty { display: none; }
.as-step:hover { border-color: var(--accent); color: var(--accent); }

.as-step.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.as-step.is-active b { background: #fff; }
.as-step.is-active i { color: #fff; }

.as-form-error { margin: 16px 0 0; }

/* Parts */
.as-part {
    scroll-margin-top: 64px;
    margin-top: 16px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.as-part-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.as-part-num {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
    font-size: 17px;
}

.as-part-head h2 { margin: 0 0 3px; font-size: 20px; }
.as-part-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* minmax(0, …): a long one-line card title must not widen the column. */
.as-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.as-cards:not(:empty) { margin-bottom: 12px; }

.as-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    background: var(--surface-soft);
    animation: as-card-in .2s ease-out;
}

@keyframes as-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.as-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.as-card-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.as-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-card-caption { color: var(--muted); font-weight: 500; }
.as-card-caption:not(:empty)::before { content: " · "; }

.as-card-remove {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    cursor: pointer;
}

.as-card-remove:hover { background: #fde8e8; color: var(--danger); }

.as-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.as-field { display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; }
.as-field-wide { grid-column: 1 / -1; }
.as-field textarea { resize: vertical; min-height: 64px; }
.as-field-help { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

.as-label,
.as-public label span.as-label {
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 650;
}

.as-required {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fdecec;
    color: var(--danger);
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}

.as-public .input:focus {
    border-color: var(--accent, var(--primary));
    box-shadow: 0 0 0 3px var(--accent-soft, var(--surface-blue));
}

/* Pills (radio) */
.as-pills-field { border: 0; padding: 0; }
.as-pills-field legend { padding: 0; margin-bottom: 6px; color: var(--muted-strong); font-size: 13px; font-weight: 650; }
.as-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.as-pill { position: relative; cursor: pointer; }

.as-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.as-public .as-pill span {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted-strong);
    font-size: 13.5px;
    font-weight: 600;
    transition: all .12s;
}

.as-pill:hover span { border-color: var(--accent); }

.as-public .as-pill input:checked + span {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.as-pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

/* "Подробнее" */
.as-more { margin-top: 12px; }

.as-more summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--accent);
    font-size: 13.5px;
    font-weight: 600;
    list-style: none;
}

.as-more summary::-webkit-details-marker { display: none; }
.as-more summary::before { content: "▸"; transition: transform .15s; }
.as-more[open] summary::before { transform: rotate(90deg); }
.as-more[open] summary { margin-bottom: 12px; }

/* Add buttons */
.as-add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 2px dashed var(--accent);
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: filter .12s, transform .12s;
}

.as-add span { font-size: 20px; line-height: 1; }
.as-add:hover { filter: brightness(.97); }
.as-add:active { transform: scale(.99); }

/* Salon suggestions */
.as-salon-box {
    position: relative;
    display: block;
    color: var(--text);
    font-size: 15px;
    font-weight: 400;
}

.as-suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.as-suggestions li {
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 14px;
    cursor: pointer;
}

.as-suggestions li.active,
.as-suggestions li:hover { background: var(--brand-soft); }

/* Photos */
.as-photos { margin-top: 12px; }
.as-photos-standalone { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.as-photos-standalone .as-label { margin: 0 0 8px; }
.as-photo-list { display: flex; flex-wrap: wrap; gap: 8px; }

.as-photo,
.as-photo-tile {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
}

.as-photo { background: var(--surface); border: 1px solid var(--border); }
.as-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.as-photo-tile {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2px;
    margin: 0;
    border: 2px dashed var(--accent);
    background: var(--surface);
    color: var(--accent);
    cursor: pointer;
}

.as-photo-tile:hover { background: var(--accent-soft); }
.as-photo-tile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.as-photo-tile svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.as-public .as-photo-tile span { color: var(--accent); font-size: 12px; font-weight: 700; }

.as-photo-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--muted);
    font-size: 13px;
}

.as-photo-state {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.3;
    color: #fff;
    background: rgba(16, 24, 40, .6);
}

.as-photo-state:empty { display: none; }
.as-photo.is-loading img { opacity: .5; }
.as-photo.is-failed { border-color: var(--danger); }
.as-photo.is-failed .as-photo-state { background: var(--danger); }

.as-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(16, 24, 40, .65);
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    cursor: pointer;
    padding: 0;
}

.as-photo-hint { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }

/* ТОП-3 */
.as-top3 {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: top;
}

.as-top3 li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    counter-increment: top;
}

.as-top3 li::before {
    content: counter(top);
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
}

.as-top3 .input { flex: 1 1 0; min-width: 0; }

/* Send box */
.as-send-box {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 20px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.as-summary {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--muted-strong);
    font-size: 14px;
    line-height: 1.5;
}

.as-summary.is-ready { background: #e6f6ec; color: #115c2e; }

.as-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    cursor: pointer;
}

.as-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: #5e2e80; }
.as-public .as-consent span { color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.45; }
.as-consent a { color: var(--primary); font-weight: 600; }

.as-consent-text { font-size: 13px; color: var(--muted-strong); }
.as-consent-text summary { cursor: pointer; color: var(--primary); }
.as-consent-text p { margin: 8px 0 0; line-height: 1.5; }
.as-upload-wait { margin: 0; color: var(--warning); font-weight: 600; }

.as-send {
    justify-self: start;
    padding: 15px 28px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #5a2a7c, #7a4a9c);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(77, 31, 110, .18);
    transition: transform .12s, box-shadow .12s;
}

.as-send:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(77, 31, 110, .22); }
.as-send:disabled { opacity: .7; cursor: progress; transform: none; }

/* Thanks / closed */
.as-done {
    margin-top: 24px;
    padding: 36px 24px;
    text-align: center;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.as-done-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e6f6ec;
    color: var(--success);
    font-size: 32px;
    font-weight: 800;
}

.as-done-icon.is-muted { background: var(--surface-soft); color: var(--muted); }
.as-done h1 { margin: 0 0 10px; font-size: 24px; }
.as-done p { margin: 0 auto 12px; max-width: 520px; color: var(--muted-strong); line-height: 1.55; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.as-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 720px) {
    .as-public-main { padding: 12px 12px 56px; }
    .as-hero { padding: 20px 16px 16px; border-radius: 14px; }
    .as-hero h1 { font-size: 23px; }
    .as-howto { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .as-howto li { padding: 9px 10px; align-items: center; }
    .as-steps { margin: 12px -12px 0; padding: 8px 12px; }
    .as-part { padding: 16px 14px; border-radius: 14px; }
    .as-card { padding: 12px; }
    .as-card-fields { grid-template-columns: minmax(0, 1fr); }
    .as-send { justify-self: stretch; }
    /* 16px keeps iOS Safari from zooming into a field on focus. */
    .as-public .input { font-size: 16px; }
}

/* Review screens */
.as-review-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.as-review-photos a { display: block; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.as-review-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-review-card { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); margin-bottom: 10px; }
.as-review-card h3 { margin: 0 0 8px; font-size: 15px; }
.as-review-card .detail-list { margin: 0; }
.as-link-copy { display: flex; gap: 8px; align-items: center; }
.as-link-copy .input { flex: 1 1 auto; min-width: 0; font-family: "Consolas", "Monaco", monospace; font-size: 13px; }
.as-cell-text { white-space: pre-line; max-width: 420px; }
.as-top-list { margin: 0; padding-left: 18px; }
@media (max-width: 720px) {
    .as-link-copy { flex-wrap: wrap; }
}
.as-nav-hint { margin: -6px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.as-nav-hint strong { color: var(--muted-strong); }
/* CRM and reclamation filters (02.10.2026): search takes the room, the selects
   and the button keep their own width instead of wrapping into a giant button. */
.toolbar.crm-toolbar { display: flex; flex-wrap: wrap; align-items: center; }
.crm-toolbar > .input[type="search"] { flex: 1 1 260px; width: auto; min-width: 0; }
.crm-toolbar > select { flex: 0 1 230px; width: auto; min-width: 0; }
.crm-toolbar > .btn { flex: 0 0 auto; }
@media (max-width: 720px) {
    .toolbar.crm-toolbar { flex-direction: row; }
    .crm-toolbar > .input[type="search"] { flex: 1 1 100%; }
    .crm-toolbar > select { flex: 1 1 40%; }
    .crm-toolbar > .btn { flex: 1 1 auto; width: auto; }
}

/* On a phone the CRM and reclamation tiles are two compact columns, number and
   name on one line - not six screen-wide cards before the first row of the list. */
@media (max-width: 720px) {
    .stats.crm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .stats.crm-stats a { display: flex; align-items: baseline; gap: 8px; min-height: 0; padding: 10px 12px; }
    .stats.crm-stats strong { display: inline; font-size: 20px; }
    .stats.crm-stats span { min-width: 0; line-height: 1.2; }
}

/* «История» on the lead and reclamation cards: a thin timeline, the latest step marked. */
.deal-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.deal-history-list li {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 0 0 12px 18px;
    border-left: 2px solid var(--border);
    margin-left: 5px;
}

.deal-history-list li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.deal-history-list li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border-strong);
}

.deal-history-list li.is-dealer::before { border-color: var(--warning); }
.deal-history-list li.is-portal::before { border-color: var(--muted); }
.deal-history-list li.is-current::before { background: var(--primary); border-color: var(--primary); }

.deal-history-list time {
    color: var(--muted);
    font-size: 12px;
}

.deal-history-list small {
    color: var(--muted);
}

/* CRM lists (05.10.2026): tiles named as the stages in Bitrix, their number varies by role. */
@media (min-width: 981px) {
    /* As many tiles as the list has (4 to 7), one row. */
    .stats.crm-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
.order-lines { margin: 0 0 18px; padding-left: 18px; }
.order-lines li { margin-bottom: 4px; }
.order-actions { display: grid; gap: 8px; margin: 12px 0 4px; }
.order-actions .btn { width: 100%; }

/* Dealers' comments on a lead or an online order (portal/services/deal_comments.py). */
.deal-comment-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
.deal-comment-list li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
.deal-comment-list p { margin: 4px 0; overflow-wrap: anywhere; }
.deal-comment-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 13px; }
.deal-comment-head time, .deal-comment-state { color: var(--muted); font-size: 12px; }
.deal-comment-state.is-failed { color: var(--danger); }
.deal-comment-form { display: grid; gap: 8px; }

/* A table's «ничего не найдено» row is its own first and last cell: keep it centred. */
.work-table tbody td.empty {
    padding: 28px 16px;
    text-align: center;
}
@media (max-width: 720px) {
    .work-table.responsive-table tbody td.empty { display: block; padding: 22px 16px; text-align: center !important; }
}

/* Four filters on one row: the shared .toolbar grid is sized for three. */
.toolbar.as-toolbar { display: flex; flex-wrap: wrap; align-items: center; }
.as-toolbar input[type="search"] { flex: 1 1 260px; }
.as-toolbar select { flex: 0 1 220px; }
.as-close { position: relative; display: inline-block; text-align: left; }
.as-close summary { list-style: none; cursor: pointer; }
.as-close summary::-webkit-details-marker { display: none; }
.as-close-form {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 10;
    width: 280px;
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.as-close-form p { margin: 0; font-size: 13px; color: var(--muted-strong); white-space: normal; }
.as-close-form .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Outlet tab strip with the one primary action beside it (apps/ftt/navigation.py). */
.ftt-outlet-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: -6px 0 18px;
}
.ftt-outlet-tabs-bar .ftt-outlet-tabs { flex: 1 1 auto; margin: 0; }
.ftt-outlet-new { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 720px) {
    .ftt-outlet-new, .ftt-outlet-help { flex: 1 1 100%; justify-content: center; }
}

/* Daily visitors on the outlet's home (apps/ftt/services/footfall.py). */
.ftt-footfall-missing {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff4e5;
    color: #92400e;
    font-weight: 600;
}
.ftt-footfall-table td small { display: block; color: var(--muted); font-size: 12px; }
.ftt-footfall-table tr.is-today td { background: #f6f1fb; }
.ftt-footfall-table tr.is-missing td:first-child strong { color: #b45309; }
.ftt-footfall-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.ftt-footfall-input { width: 96px; }
.ftt-footfall-warn { color: #b45309; cursor: help; }

/* Sales funnel: board/list switch, the "Позвонил" menu, quote history. */
.funnel-view-switch {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    border-radius: 10px;
    background: #f2eef7;
}
.funnel-view-switch a {
    padding: 7px 18px;
    border-radius: 7px;
    color: #5b5368;
    font-weight: 600;
    text-decoration: none;
}
.funnel-view-switch a.is-active { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.funnel-list-table td small { display: block; color: var(--muted); font-size: 12px; }

.kanban-focus-card[aria-pressed="true"] { outline: 2px solid var(--brand); outline-offset: 2px; }

.call-menu { position: relative; display: inline-block; }
.call-menu > summary { list-style: none; cursor: pointer; }
.call-menu > summary::-webkit-details-marker { display: none; }
.call-menu-form {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    width: min(300px, 86vw);
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: left;
}
.call-menu-title { margin: 0; font-weight: 700; color: var(--text); }
.call-menu-results { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.call-menu-results .btn { justify-content: center; }
/* A column scrolls on its own, so a pop-up would be clipped by it: on the
   board the menu opens inside the card instead. */
.kanban-card .call-menu { display: block; margin-top: 8px; }
.kanban-card .call-menu > summary { display: flex; justify-content: center; }
.kanban-card .call-menu-form { position: static; width: auto; margin-top: 8px; padding: 10px; box-shadow: none; }
.kanban-card .call-menu-results { grid-template-columns: 1fr; }
.kanban-card-actions:empty { display: none; }
.kanban-card[data-kanban-outcome="won"] .call-menu,
.kanban-card[data-kanban-outcome="lost"] .call-menu { display: none; }

.quote-detail-calls { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.quote-detail-calls li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff7e6;
    font-size: 14px;
}
.quote-detail-calls li.is-overdue { background: #fdecec; color: var(--danger); }

.quote-history {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.quote-history-form { display: grid; gap: 8px; margin: 10px 0 14px; }
.quote-history-form .btn { justify-self: start; }
.quote-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quote-history-item { display: flex; gap: 10px; align-items: flex-start; }
.quote-history-item p { margin: 0; line-height: 1.45; }
.quote-history-item small { color: var(--muted); font-size: 12px; }
.quote-history-mark {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-soft);
    color: var(--muted-strong);
    font-size: 14px;
}
.quote-history-item.kind-call .quote-history-mark { background: #e6f6ec; color: var(--success); }
.quote-history-item.kind-comment .quote-history-mark { background: var(--brand-soft); color: var(--brand); }
.quote-history-empty { color: var(--muted); }
.call-menu-form .input { width: 100%; min-width: 0; }
.call-menu-results .btn { white-space: normal; min-width: 0; }
.kanban-card .call-menu-form { min-width: 0; overflow-wrap: anywhere; }

/* Month plan bar with each seller's part (apps/ftt/services/sellers.py). */
.ftt-plan-bar-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ftt-plan-bar-head h2 { margin: 0 0 4px; }
.ftt-plan-bar-head p { margin: 0; color: var(--muted); font-size: 14px; }
.ftt-plan-bar-total { text-align: right; }
.ftt-plan-bar-total strong { display: block; font-size: 24px; }
.ftt-plan-bar-total small { color: var(--muted); }
.ftt-plan-track {
    position: relative;
    display: flex;
    height: 26px;
    /* Room for the "сегодня" label above the pace mark. */
    margin: 30px 0 12px;
    border-radius: 13px;
    background: #eceff4;
    overflow: visible;
}
.ftt-plan-segment { height: 100%; min-width: 3px; }
.ftt-plan-segment:first-child { border-radius: 13px 0 0 13px; }
.ftt-plan-segment:last-of-type { border-radius: 0 13px 13px 0; }
.ftt-plan-segment:only-of-type { border-radius: 13px; }
.ftt-plan-pace {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 3px;
    margin-left: -1px;
    border-radius: 2px;
    background: #101828;
}
.ftt-plan-pace::after {
    content: "сегодня";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--muted-strong);
    white-space: nowrap;
}
.ftt-plan-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ftt-plan-legend li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ftt-plan-legend small { color: var(--muted); }
.ftt-plan-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }
.ftt-plan-hint { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-soft); color: var(--muted-strong); }
.ftt-plan-hint.is-ahead { background: #e6f6ec; color: #115c2e; }
.ftt-plan-hint.is-behind { background: #fff4e5; color: #92400e; }
.ftt-month-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.quote-credit-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.quote-credit-form label { font-weight: 600; font-size: 14px; }
.quote-credit-form .input { width: auto; min-width: 200px; }

/* --- FTT help: "?" hints and the first-visit tour (static/js/ftt-help.js) --- */
.ftt-hint { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.ftt-hint-toggle {
    width: 22px; height: 22px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted-strong);
    font: 700 13px/1 inherit; cursor: help;
}
.ftt-hint-toggle:hover, .ftt-hint.is-open .ftt-hint-toggle { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ftt-hint-bubble {
    display: none; position: absolute; z-index: 40; top: calc(100% + 8px); left: -10px;
    width: max-content; max-width: min(320px, 80vw);
    padding: 10px 12px; border-radius: 10px; background: #1f1a24; color: #fff;
    font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: 0;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.24); white-space: normal;
}
.ftt-hint-bubble::before { content: ""; position: absolute; top: -5px; left: 21px; width: 10px; height: 10px; background: #1f1a24; transform: translateX(-50%) rotate(45deg); }
.ftt-hint:hover .ftt-hint-bubble, .ftt-hint:focus-within .ftt-hint-bubble, .ftt-hint.is-open .ftt-hint-bubble { display: block; }
@media (max-width: 720px) {
    .ftt-hint-bubble { position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; width: auto; transform: none; }
    .ftt-hint-bubble::before { display: none; }
}

.ftt-outlet-help { white-space: nowrap; }
.ftt-tour-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.ftt-tour-ring {
    position: fixed; z-index: 1001; pointer-events: none; border-radius: 12px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--brand), 0 0 0 9999px rgba(16, 12, 24, 0.55);
    transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.ftt-tour-bubble {
    position: fixed; z-index: 1002; width: min(360px, calc(100vw - 24px));
    padding: 18px 18px 14px; border-radius: 14px; background: var(--surface); color: var(--text);
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.3);
}
.ftt-tour-bubble::before {
    content: ""; position: absolute; top: -7px; left: var(--arrow-x, 50%); width: 14px; height: 14px;
    background: var(--surface); transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.ftt-tour-bubble.is-above::before { top: auto; bottom: -7px; }
.ftt-tour-bubble h2 { margin: 2px 0 6px; font-size: 18px; line-height: 1.25; }
.ftt-tour-bubble p { margin: 0; color: var(--muted-strong); font-size: 14px; line-height: 1.5; }
.ftt-tour-bubble .ftt-tour-count { color: var(--brand); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ftt-tour-dots { display: flex; gap: 6px; margin: 14px 0 12px; }
.ftt-tour-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.ftt-tour-dots span.is-current { width: 22px; border-radius: 4px; background: var(--brand); }
.ftt-tour-actions { display: flex; align-items: center; gap: 8px; }
.ftt-tour-actions [hidden] { display: none; }
.ftt-tour-skip { margin-right: auto; padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ftt-tour-ring { transition: none; } }

/* Empty funnel columns say what will land there, not just "Пусто". */
.kanban-empty-hint { margin: 6px 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; text-align: center; }

/* --- FTT: promotions printed on quotes (/ftt/promotions/) --- */
.ftt-promo-regions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ftt-promo-region {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600;
}
.ftt-promo-region small { color: var(--muted); font-weight: 400; }
.ftt-promo-region.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.ftt-promo-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .ftt-promo-layout { grid-template-columns: minmax(0, 1fr); } }
.ftt-promo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftt-promo-list label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ftt-promo-list label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ftt-promo-list input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); }
.ftt-promo-list span { display: grid; gap: 3px; }
.ftt-promo-list small { color: var(--muted-strong); }
.ftt-promo-list em { color: var(--muted); font-style: normal; font-size: 13px; }
.ftt-promo-list li.is-locked label { opacity: 0.55; cursor: not-allowed; }
.ftt-promo-list li.is-ended label { border-style: dashed; background: #fff7ed; }
.ftt-promo-printed { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 10px; }
.ftt-promo-printed small { display: block; color: var(--muted); }
.ftt-promo-printed .status { margin-left: 6px; }

/* --- FTT on a phone (seller pages, <= 720px) --------------------------------
   An outlet is run from a phone behind the counter, so under 720px its pages
   behave like an app: a bottom tab bar with "+ Подбор" under the thumb
   (templates/ftt/_outlet_bottom_nav.html), finger-sized buttons, compact
   tiles, and nothing wider than the screen. Scoped to pages that carry the
   bar or the configurator, so the rest of the portal is untouched. */
.ftt-bottom-nav { display: none; }

.kanban-column-nav, .kanban-swipe-hint { display: none; }

@media (max-width: 720px) {
    .ftt-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        display: flex; align-items: stretch; justify-content: space-around; gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.08);
    }
    .ftt-bottom-nav a {
        flex: 1 1 0; min-width: 0; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border-radius: 12px; color: var(--muted); font-size: 11px; font-weight: 650; text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .ftt-bottom-nav a > svg { width: 23px; height: 23px; }
    .ftt-bottom-nav a > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ftt-bottom-nav a.is-active { color: var(--brand); background: var(--brand-soft); }
    .ftt-bottom-nav-new { color: var(--brand) !important; }
    .ftt-bottom-nav-plus {
        display: grid; place-items: center; width: 46px; height: 46px; margin-top: -20px; border-radius: 50%;
        background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(83, 0, 134, 0.35); border: 3px solid var(--surface);
    }
    .ftt-bottom-nav-plus svg { width: 22px; height: 22px; }
    /* Room under the last block so nothing ends flush against the bar. */
    body:has(.ftt-bottom-nav) .main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
    body:has(.ftt-bottom-nav) .kanban-toast { bottom: calc(84px + env(safe-area-inset-bottom)); left: 12px; right: 12px; }

    /* The top strip repeats the bar; only "Как это работает" stays, small. */
    .ftt-outlet-tabs-bar { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
    .ftt-outlet-tabs-bar .ftt-outlet-tabs,
    .ftt-outlet-tabs-bar .ftt-outlet-new { display: none; }
    .ftt-outlet-tabs-bar .ftt-outlet-help { flex: 0 0 auto; min-height: 34px; padding: 4px 12px; font-size: 13px; }

    body:has(.ftt-bottom-nav) .page-head h1,
    body:has(.ftt-bottom-nav) .quote-builder-head h1 { font-size: 24px; line-height: 1.2; }
    body:has(.ftt-bottom-nav) .page-head p { font-size: 14px; }

    /* Finger-sized controls: 32px buttons and a 22px "?" were built for a mouse. */
    body:has(.ftt-bottom-nav) .btn.small,
    body:has(.ftt-bottom-nav) .call-menu > summary,
    .quote-builder .btn.small { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
    .ftt-hint-toggle { width: 28px; height: 28px; font-size: 14px; }
    .call-menu-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .call-menu-results .btn { width: 100%; }

    /* Home: three tiles side by side as small counters, not three screens. */
    body:has(.ftt-bottom-nav) .dashboard-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    body:has(.ftt-bottom-nav) .dashboard-kpi { padding: 10px; min-height: 0; }
    body:has(.ftt-bottom-nav) .dashboard-kpi > span { font-size: 11.5px; line-height: 1.25; }
    body:has(.ftt-bottom-nav) .dashboard-kpi .ftt-kpi-icon-inline { display: none; }
    body:has(.ftt-bottom-nav) .dashboard-kpi strong { font-size: 24px; }
    body:has(.ftt-bottom-nav) .dashboard-kpi small { font-size: 11px; }

    /* Footfall: one line per day - day, the number, and what came of it. */
    .ftt-footfall-table thead { display: none; }
    .ftt-footfall-table, .ftt-footfall-table tbody { display: block; }
    .ftt-footfall-table tbody tr {
        display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; grid-template-areas: "day input input" "day withq plain";
        column-gap: 10px; row-gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px;
        box-shadow: none; background: var(--surface);
    }
    .ftt-footfall-table tr.is-today { background: #f6f1fb; }
    .ftt-footfall-table tbody td { display: block; padding: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; }
    .ftt-footfall-table tbody td::before { display: none !important; }
    .ftt-footfall-table td:nth-child(1) { grid-area: day; align-self: center; }
    .ftt-footfall-table td:nth-child(2) { grid-area: input; }
    .ftt-footfall-table td:nth-child(3) { grid-area: withq; font-size: 12.5px; color: var(--muted); }
    .ftt-footfall-table td:nth-child(4) { grid-area: plain; font-size: 12.5px; color: var(--muted); text-align: right; }
    .ftt-footfall-table td:nth-child(3)::after { content: " с КП"; }
    .ftt-footfall-table td:nth-child(4)::after { content: " без КП"; }
    .ftt-footfall-form .ftt-footfall-input { flex: 1 1 auto; width: auto; min-width: 0; }

    body:has(.ftt-bottom-nav) .ftt-analytics-tabs .button-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; width: 100%; }
    body:has(.ftt-bottom-nav) .ftt-analytics-tabs .button-group .btn { min-height: 40px; padding-left: 6px; padding-right: 6px; }
    body:has(.ftt-bottom-nav) .dashboard-kpi strong { white-space: nowrap; }
    body:has(.ftt-bottom-nav) .ftt-analytics-kpis .dashboard-kpi strong { font-size: 19px; }

    /* Task filters: one row of chips, not five screen-wide tiles. */
    body:has(.ftt-bottom-nav) .stats {
        display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; scrollbar-width: none;
    }
    body:has(.ftt-bottom-nav) .stats > a {
        flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: 999px;
    }
    body:has(.ftt-bottom-nav) .stats > a strong { font-size: 17px; }
    body:has(.ftt-bottom-nav) .stats > a span { font-size: 13px; }

    /* Funnel: the cards within one screen of the top. */
    .kanban-scroll-hint { display: none; }
    /* The day-by-category matrix stays a table that scrolls sideways: as
       cards it was 31 days x 8 categories of them, some 30 screens. */
    .ftt-matrix-table { display: table !important; min-width: 640px; }
    .ftt-matrix-table thead { display: table-header-group !important; }
    .ftt-matrix-table tbody { display: table-row-group !important; }
    .ftt-matrix-table tr { display: table-row !important; }
    .ftt-matrix-table th, .ftt-matrix-table td { display: table-cell !important; padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
    .ftt-matrix-table td::before { display: none !important; }
    body:has(.ftt-bottom-nav) .kanban-focus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    body:has(.ftt-bottom-nav) .kanban-focus-card { min-height: 0; padding: 8px 6px; text-align: center; }
    body:has(.ftt-bottom-nav) .kanban-focus-card span { font-size: 10.5px; line-height: 1.2; }
    body:has(.ftt-bottom-nav) .kanban-focus-card strong { font-size: 20px; margin: 2px 0 0; }
    body:has(.ftt-bottom-nav) .kanban-focus-card small { display: none; }
    .kanban-card-phone { color: var(--primary); font-weight: 650; text-decoration: none; }

    /* Which column you are in: chips above the board, the current one filled. */
    .kanban-column-nav {
        position: relative; display: flex; gap: 6px; overflow-x: auto; margin: 0 -4px 6px; padding: 2px 4px 4px;
        scrollbar-width: none;
    }
    .kanban-column-nav::-webkit-scrollbar { display: none; }
    .kanban-column-chip {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px;
        border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted-strong);
        font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer;
    }
    .kanban-column-chip span { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-soft); font-size: 12px; text-align: center; }
    .kanban-column-chip.is-current { border-color: var(--primary); background: var(--primary); color: #fff; }
    .kanban-column-chip.is-current span { background: rgba(255, 255, 255, 0.22); }
    .kanban-column-chip.is-won:not(.is-current) span { background: #ecfdf3; color: var(--success); }
    .kanban-column-chip.is-lost:not(.is-current) span { background: #fef3f2; color: var(--danger); }
    .kanban-swipe-hint { display: block; margin: 0 0 8px; color: var(--muted); font-size: 12px; text-align: center; }
    /* A sliver of the next column shows there is more to the right. */
    .kanban-board { scroll-padding-left: 8px; }

    /* Funnel list: one compact card per deal instead of a labelled table. */
    .funnel-list-table thead { display: none; }
    .funnel-list-table, .funnel-list-table tbody { display: block; }
    .funnel-list-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "client sum" "client num" "goods goods" "stage action" "calls action";
        gap: 4px 8px; align-items: center; margin: 0 0 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px;
        background: var(--surface); box-shadow: none;
    }
    .funnel-list-table tbody td { display: block; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; }
    .funnel-list-table tbody td::before { display: none !important; }
    .funnel-list-table td:nth-child(1) { grid-area: num; justify-self: end; font-size: 12px; color: var(--muted); white-space: nowrap; }
    .funnel-list-table td:nth-child(1) small { display: inline; margin-left: 4px; }
    .funnel-list-table td:nth-child(2) { grid-area: client; }
    .funnel-list-table td:nth-child(2) strong { display: block; font-size: 16px; line-height: 1.25; }
    .funnel-list-table td:nth-child(2) small { display: block; margin-top: 2px; }
    .funnel-list-table td:nth-child(3) { grid-area: stage; }
    .funnel-list-table td:nth-child(4) { grid-area: goods; color: var(--muted-strong); font-size: 13px; overflow: hidden; }
    .funnel-list-table td:nth-child(4) div { display: inline; }
    .funnel-list-table td:nth-child(4) div + div::before { content: " · "; }
    .funnel-list-table td:nth-child(5) { grid-area: sum; justify-self: end; font-weight: 700; font-size: 16px; white-space: nowrap; }
    .funnel-list-table td:nth-child(6) { grid-area: calls; }
    .funnel-list-table td:nth-child(7) { grid-area: action; justify-self: end; }
    .funnel-list-table td:nth-child(7) { align-self: end; }
    .funnel-list-table td:nth-child(7):has(.call-menu[open]) { grid-column: 1 / -1; grid-row: 6; justify-self: stretch; }
    .funnel-list-table td:nth-child(6):not(:has(.kanban-card-tasks)) { display: none; }
    .funnel-list-table td:nth-child(3) .status, .funnel-list-table td:nth-child(6) .kanban-card-tasks { font-size: 11.5px; white-space: nowrap; }
    .funnel-list-table tbody tr td[colspan] { grid-column: 1 / -1; }

    /* Quote screens: nothing wider than the screen. */
    .quote-builder { grid-template-columns: minmax(0, 1fr); }
    .quote-section-note { display: none; }  /* the step's "?" says the same */
    .quote-builder-head h1 { font-size: 22px; line-height: 1.2; }
    .quote-builder-lead { display: none; }
    .quote-customer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
    .quote-section-title h2 { display: flex; align-items: center; gap: 4px; }
}
/* "№ " before the number only where the column header is gone (phone list). */
.funnel-list-num { display: none; }
@media (max-width: 720px) { .funnel-list-num { display: inline; } }
@media (max-width: 720px) {
    .ftt-bottom-nav-new.is-active { background: transparent; }
    .ftt-bottom-nav-new.is-active .ftt-bottom-nav-plus { box-shadow: 0 0 0 3px var(--brand-soft), 0 6px 16px rgba(83, 0, 134, 0.35); }
}

/* --- FTT network navigation (templates/ftt/_network_tabs.html) --- */
.ftt-network-nav { display: grid; gap: 10px; margin: 0 0 18px; }
/* «Что нового» (templates/ftt/_whats_new.html, 08.10.2026): quiet cards, closed by «Понятно». */
.ftt-news { display: grid; gap: 10px; margin: 0 0 18px; }
.ftt-news-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 18px;
    padding: 14px 16px; border-radius: 14px; background: #f5f0fa; border: 1px solid #e4d9ef; border-left: 4px solid #6b3d93;
}
.ftt-news-item h3 { margin: 2px 0 4px; font-size: 15px; }
.ftt-news-item p { margin: 0; }
.ftt-news-kicker { color: #6b3d93; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.ftt-news-item form { flex: 0 0 auto; }
@media (max-width: 720px) {
    .ftt-news-item { flex-direction: column; }
    .ftt-news-item form, .ftt-news-item .btn { width: 100%; }
}
/* The section strip with «Как это работает» beside it (the network tour, 08.10.2026). */
.ftt-network-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.ftt-network-bar .ftt-network-tabs { flex: 1 1 auto; min-width: 0; }
.ftt-network-nav .ftt-network-tabs { margin: 0; }
.ftt-network-subtabs { margin: 0; justify-self: start; }
/* Grid items default to the width of their content: without this the section
   strip grew past the screen instead of scrolling inside it. */
.ftt-network-nav > * { min-width: 0; max-width: 100%; }

/* --- FTT network on a phone (<= 720px, 29.09.2026) ----------------------------
   What the seller's outlet pages already had, for whoever runs several outlets
   - an FTT administrator, a dealer and their managers: the sections move to a
   bottom bar (templates/ftt/_network_bottom_nav.html, same list as the strip),
   a section's own tabs stay on top as one scrolling row, and nothing is wider
   than the screen. The seller's phone rules scoped to body:has(.ftt-bottom-nav)
   (finger-sized buttons, chip filters, compact tiles) apply here as well. */
@media (max-width: 720px) {
    body:has(.ftt-network-bottom-nav) .ftt-network-tabs { display: none; }
    /* The strip went to the bottom bar; only «Как это работает» stays, small. */
    .ftt-network-bar { justify-content: flex-end; }
    .ftt-network-bar .ftt-outlet-help { flex: 0 0 auto; min-height: 34px; padding: 4px 12px; font-size: 13px; }
    body:has(.ftt-network-bottom-nav) .ftt-network-nav { margin-bottom: 12px; }
    .ftt-network-bottom-nav a { font-size: 10.5px; }  /* six sections, not four */
    .ftt-network-subtabs {
        display: flex; justify-self: stretch; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    }
    .ftt-network-subtabs::-webkit-scrollbar { display: none; }
    .ftt-network-subtabs a { flex: 0 0 auto; padding: 8px 14px; white-space: nowrap; }

    /* The page's own actions: full width, not a floating button on the right. */
    body:has(.ftt-network-bottom-nav) .page-head .btn { width: 100%; }

    /* Period: the shortcuts as chips, then «с» and «по» side by side. */
    body:has(.ftt-network-bottom-nav) .ftt-period-switcher { gap: 6px; }
    body:has(.ftt-network-bottom-nav) .ftt-period-switcher .btn { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 6px 4px; font-size: 13px; white-space: nowrap; }

    /* The summary's four numbers two by two - three in a row left the fourth alone. */
    body:has(.ftt-network-bottom-nav) .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Filters. The portal's toolbars turn into a column under 600px, and in a
       column a child's flex-basis is its height: "flex: 1 1 340px", meant for
       a row, made a 340px-tall search field. A wrapping row instead: search
       across, the selects two by two, the button across. */
    .toolbar.ftt-outlet-filter,
    .toolbar.ftt-hierarchy-toolbar,
    body:has(.ftt-network-bottom-nav) form.toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .ftt-outlet-filter > .input[type="search"],
    .ftt-outlet-filter > .btn,
    .ftt-hierarchy-filter,
    body:has(.ftt-network-bottom-nav) form.toolbar > .input[type="search"],
    body:has(.ftt-network-bottom-nav) form.toolbar > .btn { flex: 1 1 100%; min-width: 0; }
    body:has(.ftt-network-bottom-nav) form.toolbar > select { flex: 1 1 40%; min-width: 0; }

    /* Quotes and tasks across the network: a compact card each. First line -
       the client and the sum (a quote) or the task and its deadline; then the
       stage or the client; the outlet small at the bottom. The card opens the
       quote by itself, so the "Воронка точки" / "Задачи точки" button goes. */
    body:has(.ftt-network-bottom-nav) .ftt-work-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main side" "detail detail" "outlet outlet";
        gap: 4px 10px; padding: 12px;
    }
    body:has(.ftt-network-bottom-nav) .ftt-work-table tbody td { display: block; padding: 0; border-bottom: 0 !important; box-shadow: none !important; min-width: 0; }
    body:has(.ftt-network-bottom-nav) .ftt-work-table tbody td::before { display: none !important; }
    body:has(.ftt-network-bottom-nav) .ftt-work-table td:nth-child(1) { grid-area: outlet; padding-top: 6px; border-top: 1px solid #edf0f4 !important; font-size: 12.5px; color: var(--muted); }
    body:has(.ftt-network-bottom-nav) .ftt-work-table td:nth-child(1) .ftt-outlet-place strong { font-size: 13px; }
    body:has(.ftt-network-bottom-nav) .ftt-work-table td:nth-child(2) { grid-area: main; }
    body:has(.ftt-network-bottom-nav) .ftt-work-table td:nth-child(2) strong { font-size: 15.5px; }
    body:has(.ftt-network-bottom-nav) .ftt-work-table td:nth-child(3) { grid-area: side; justify-self: end; text-align: right !important; }
    body:has(.ftt-network-bottom-nav) .ftt-work-table td:nth-child(4) { grid-area: detail; }
    body:has(.ftt-network-bottom-nav) .ftt-work-table td:nth-child(5) { display: none; }
    body:has(.ftt-network-bottom-nav) .ftt-work-table td[colspan] {
        grid-column: 1 / -1; grid-row: 1; display: block; padding: 0; border-top: 0 !important; color: inherit; font-size: 14px;
    }

    /* Chips: one row that scrolls sideways, not five rows of them. */
    body:has(.ftt-network-bottom-nav) .ftt-outlet-filter-chips {
        flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
    }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-filter-chips .filter-chip { flex: 0 0 auto; white-space: nowrap; }

    /* Outlets: a compact card - the outlet and its next step across, four
       facts two by two under it. A whole screen per outlet made a network of
       131 a few hundred screens. The card opens the outlet by itself
       (data-row-link), so the buttons column goes. */
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table tbody td {
        display: block; padding: 8px 12px; border-bottom: 0 !important; font-size: 13px;
    }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table tbody td[data-label]::before { display: block; margin-bottom: 2px; font-size: 11px; }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table tbody td:first-child {
        grid-column: 1 / -1; padding: 12px 12px 10px; border-bottom: 1px solid #edf0f4 !important;
    }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table tbody td:first-child::before { display: none; }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table tbody td:last-child { display: none; }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table tbody td[colspan] { grid-column: 1 / -1; display: block; }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table .status,
    body:has(.ftt-network-bottom-nav) .ftt-outlet-table .ftt-inline-alert { font-size: 11.5px; }

    /* Categories across the network: the category across, its five numbers
       three and two under it - 9 x 400px of labelled lines before. */
    body:has(.ftt-network-bottom-nav) .ftt-network-category-table tbody tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px;
    }
    body:has(.ftt-network-bottom-nav) .ftt-network-category-table tbody td {
        display: block; padding: 0; border-bottom: 0 !important; box-shadow: none !important; min-width: 0; text-align: left !important; font-size: 13.5px;
    }
    body:has(.ftt-network-bottom-nav) .ftt-network-category-table tbody td[data-label]::before { display: block; font-size: 10.5px; line-height: 1.3; }
    body:has(.ftt-network-bottom-nav) .ftt-network-category-table td:first-child { grid-column: 1 / -1; }
    body:has(.ftt-network-bottom-nav) .ftt-network-category-table td:first-child::before { display: none !important; }
    body:has(.ftt-network-bottom-nav) .ftt-network-category-table td small { display: inline; margin-left: 4px; }

    /* "Привязать человека": the person and the status, then the outlet and
       the position on one line, the two buttons side by side. */
    body:has(.ftt-network-bottom-nav) .ftt-link-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas: "who who status" "outlet position position" "act act act"; gap: 4px 10px; padding: 12px;
    }
    body:has(.ftt-network-bottom-nav) .ftt-link-table tbody td { display: block; padding: 0; border-bottom: 0 !important; box-shadow: none !important; min-width: 0; font-size: 13px; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table tbody td[data-label]::before { display: block; font-size: 10.5px; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table td:nth-child(1) { grid-area: who; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table td:nth-child(2) { grid-area: outlet; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table td:nth-child(3) { grid-area: position; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table td:nth-child(4) { grid-area: status; justify-self: end; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table td:nth-child(5) { grid-area: act; display: flex; gap: 6px; padding-top: 6px; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table td:is(:nth-child(1), :nth-child(4), :nth-child(5))::before { display: none !important; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table td:nth-child(5) .btn { flex: 1 1 0; width: auto; }
    body:has(.ftt-network-bottom-nav) .ftt-link-table td[colspan] { grid-column: 1 / -1; grid-row: 1; }

    /* People: the tree fits the screen - a narrower indent instead of a
       620px minimum that pushed every card off the right edge. */
    body:has(.ftt-network-bottom-nav) .root-tree { min-width: 0; }
    body:has(.ftt-network-bottom-nav) .tree-list .tree-list { padding-left: 12px; }

    /* Plans. The four totals two by two, small. */
    body:has(.ftt-network-bottom-nav) .ftt-outlet-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-signal { padding: 10px 12px; min-height: 0; }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-signal strong { font-size: 20px; }
    body:has(.ftt-network-bottom-nav) .ftt-outlet-signal small { font-size: 11px; }

    /* An outlet's plan row: the check and the outlet across, the plan's
       state, sum and fulfillment under it, the previous month and "Настроить"
       last - one card instead of eight labelled lines. */
    body:has(.ftt-network-bottom-nav) .plan-board-table tbody tr {
        display: grid; grid-template-columns: 30px repeat(3, minmax(0, 1fr));
        grid-template-areas: "chk out out out" ". st plan done" ". prev vs act"; gap: 6px 8px; padding: 12px;
    }
    body:has(.ftt-network-bottom-nav) .plan-board-table tbody td {
        display: block; padding: 0; border-bottom: 0 !important; box-shadow: none !important; min-width: 0; text-align: left !important; font-size: 13px;
    }
    body:has(.ftt-network-bottom-nav) .plan-board-table tbody td[data-label]::before { display: block; font-size: 10.5px; line-height: 1.3; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(1) { grid-area: chk; align-self: center; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(2) { grid-area: out; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(3) { grid-area: st; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(4) { grid-area: plan; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(5) { grid-area: prev; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(6) { grid-area: vs; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(7) { grid-area: done; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(8) { grid-area: act; align-self: end; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(8))::before { display: none !important; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td:nth-child(8) .btn { min-height: 34px; padding: 6px 8px; font-size: 12.5px; }
    body:has(.ftt-network-bottom-nav) .plan-board-table td[colspan] { grid-column: 1 / -1; grid-row: 1; }

    /* The save bar follows down the list - so on a phone it is one line of
       count and three small buttons plus the main one, not a third of the
       screen. It sits above the bottom bar. */
    body:has(.ftt-network-bottom-nav) .plan-savebar { bottom: calc(68px + env(safe-area-inset-bottom)); padding: 10px 12px; gap: 8px; }
    body:has(.ftt-network-bottom-nav) .plan-savebar-summary { flex-direction: row; align-items: baseline; gap: 8px; }
    body:has(.ftt-network-bottom-nav) .plan-savebar-summary strong { font-size: 18px; }
    body:has(.ftt-network-bottom-nav) .plan-savebar-summary small { display: none; }
    body:has(.ftt-network-bottom-nav) .plan-savebar-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    body:has(.ftt-network-bottom-nav) .plan-savebar-actions > .btn:not(.primary) { min-height: 36px; padding: 4px 6px; font-size: 12px; line-height: 1.2; white-space: normal; }

    /* The outlet's own plan page has the same bar: its buttons two by two. */
    .plan-savebar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .plan-savebar-actions > * { min-width: 0; width: 100%; }
    .plan-savebar-actions > .btn.primary { grid-column: 1 / -1; }
}
/* A heading inside an opened menu group («Доступы», «Журналы», «Инструменты»):
   indented past the items' text edge and in the brand colour with a rule after
   it, so it reads as a heading and not as one more, greyed-out item. */
.nav-subgroup-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    padding: 0 10px 0 18px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nav-subgroup-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e3d1ff;
}
.nav-submenu > .nav-subgroup-label:first-child { margin-top: 4px; }

/* --- FTT network summary: "Что сделать" (services/summary.py) --- */
.ftt-todo { margin-bottom: 18px; }
.ftt-todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftt-todo-item {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 10px; background: var(--surface);
}
.ftt-todo-item strong { display: block; }
.ftt-todo-item p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.ftt-todo-item .btn { flex: 0 0 auto; }
.ftt-todo-item.level-danger { border-left-color: var(--danger); }
.ftt-todo-item.level-warning { border-left-color: var(--warning); }
.ftt-todo-item.level-info { border-left-color: var(--primary); }
.ftt-todo-empty { padding: 14px; border-radius: 10px; background: #ecfdf3; color: var(--success); font-weight: 600; }
@media (max-width: 720px) {
    .ftt-todo-item { display: grid; }
    .ftt-todo-item .btn { justify-self: start; }
}
.filter-chip-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--surface-soft); font-size: 12px; text-align: center; }
.filter-chip.has-count .filter-chip-count { background: #fef3f2; color: var(--danger); font-weight: 700; }
.filter-chip.active .filter-chip-count { background: rgba(255, 255, 255, 0.25); color: inherit; }

/* Подключение CRM → Дилеры и точки (templates/learning/portal_link_outlets.html) */
.dealer-outlet-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dealer-outlet-list > li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.dealer-outlet-list > li > a:first-child {
    flex: 1;
    min-width: 0;
}

.dealer-outlet-list form {
    margin: 0;
}

.dealer-move-confirm {
    border-color: #f5d08a;
    background: #fffbeb;
}

@media (max-width: 720px) {
    .dealer-outlet-form {
        grid-template-columns: 1fr;
    }

    .dealer-outlet-list > li {
        flex-wrap: wrap;
    }
}

/* Org chart list (templates/learning/index.html) */
.org-result .org-result-person {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.org-result .org-result-person:hover strong {
    color: var(--primary-dark);
}

.tree-item.is-found > details > summary {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.18);
}

.tree-count small {
    margin-left: 1px;
    color: var(--muted);
    font-weight: 500;
}

@media (max-width: 720px) {
    .org-result {
        flex-wrap: wrap;
    }
}

.learning-toolbar-more {
    grid-column: 1 / -1;
}

.learning-toolbar-more > summary {
    width: fit-content;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.learning-toolbar-more > label {
    max-width: 420px;
    margin-top: 10px;
}

/* News feed (templates/portal/_news_post.html) */
.news-post.is-pinned {
    border-left: 3px solid var(--brand);
}

.news-flag {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.news-flag-pinned { background: var(--brand-soft); color: var(--brand-dark); }
.news-flag-ack { background: #fffbeb; color: #b45309; }

.news-title-link {
    color: inherit;
    text-decoration: none;
}

.news-title-link:hover {
    color: var(--primary-dark);
}

.news-body.is-folded {
    max-height: 11.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.news-read-more {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
}

.news-ack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
}

.news-ack form { margin: 0; }
.news-ack-done { color: #15803d; font-weight: 700; }
.news-ack-report { margin-left: auto; font-size: 13px; font-weight: 600; }

.news-comments > summary {
    width: fit-content;
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.news-ack-waiting {
    border-color: #fde68a;
    background: #fffbeb;
}

.news-ack-waiting h2 { margin: 0 0 6px; font-size: 16px; }
.news-ack-waiting ul { margin: 0; padding-left: 18px; }
.news-ack-waiting small { color: var(--muted); }

.news-options {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.news-options legend { margin-bottom: 6px; font-weight: 650; }

.form-panel .news-option,
.news-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.news-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 0;
    margin: 2px 0 0;
}

.news-option span { display: grid; gap: 2px; }
.news-option small { color: var(--muted); }

.feedback-item.is-awaiting {
    border-left: 3px solid #d97706;
}

.feedback-thread {
    display: grid;
    gap: 12px;
}

.feedback-message {
    max-width: 760px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.feedback-message.is-staff {
    justify-self: end;
    border-color: #c7d7fe;
    background: #eef4ff;
}

.feedback-message header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}

.feedback-message header span { color: var(--muted); }
.feedback-message p { margin: 0; line-height: 1.55; }

.feedback-message-links {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 13px;
}

.feedback-thread-note { margin: 0; }

.feedback-reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    justify-content: space-between;
}

.feedback-reply-status {
    display: grid;
    gap: 4px;
    min-width: 200px;
}

.feedback-status-only {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Обращения: rows that are links, the compose form (templates/portal/feedback_*.html) */
.fb-list {
    display: grid;
    gap: 8px;
}

.fb-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.fb-row:hover,
.fb-row:focus-visible {
    border-color: #cfc0eb;
    box-shadow: 0 8px 18px rgb(41 22 79 / 0.08);
}

.fb-row.is-awaiting { border-left: 4px solid #d97706; }
.fb-row.is-unread { border-left: 4px solid var(--primary); background: #f7faff; }

.fb-row-icon,
.feedback-kind-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
}

.fb-kind-problem .fb-row-icon,
.feedback-kind-problem .feedback-kind-icon { background: #fff1f2; color: #be123c; }
.fb-kind-question .fb-row-icon,
.feedback-kind-question .feedback-kind-icon { background: #eef4ff; color: #1d4ed8; }
.fb-kind-improvement .fb-row-icon,
.feedback-kind-improvement .feedback-kind-icon { background: #ecfdf5; color: #047857; }

.fb-row.is-resolved .fb-row-icon { background: #ecfdf5; color: #15803d; }
.fb-row.is-resolved { background: var(--surface-soft); }
.fb-row.is-resolved .fb-row-title strong,
.fb-row.is-resolved .fb-row-excerpt { color: var(--muted); }

.fb-row-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fb-row-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.fb-row-title strong { font-size: 15px; }

.fb-row-excerpt {
    overflow: hidden;
    color: var(--muted-strong);
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-row-meta { color: var(--muted); font-size: 12px; }

.fb-row-side {
    display: grid;
    gap: 6px;
    justify-items: end;
    text-align: right;
}

.fb-row-date { display: grid; color: var(--muted); font-size: 12px; }

.fb-chip {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.fb-chip-awaiting { background: #fffbeb; color: #b45309; }
.fb-chip-unread { background: #eef4ff; color: #1d4ed8; }

.feedback-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
}

.feedback-compose .feedback-panel { max-width: none; }

.feedback-kinds {
    margin: 0;
    padding: 0;
    border: 0;
}

.feedback-kinds legend {
    margin-bottom: 8px;
    padding: 0;
    font-weight: 650;
}

.feedback-kind-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.feedback-form .feedback-kind {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.feedback-form .feedback-kind:hover { border-color: #cfc0eb; }

.feedback-form .feedback-kind.is-checked,
.feedback-form .feedback-kind:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: 0 0 0 3px rgb(83 0 134 / 0.1);
}

.feedback-kind input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.feedback-kind:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.feedback-kind .feedback-kind-icon {
    flex: none;
    width: 30px;
    height: 30px;
    font-size: 15px;
}

.feedback-kind-text { display: grid; gap: 2px; }
.feedback-kind-text small { color: var(--muted); font-size: 12px; line-height: 1.35; }

.feedback-dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.feedback-dropzone { position: relative; }

.feedback-dropzone-empty { display: grid; gap: 4px; }
.feedback-dropzone-empty small { color: var(--muted); }

.feedback-dropzone-preview {
    display: flex;
    gap: 12px;
    align-items: center;
}

.feedback-dropzone-preview[hidden],
.feedback-dropzone-empty[hidden] { display: none; }

.feedback-dropzone-preview img {
    max-width: 140px;
    max-height: 90px;
    border: 1px solid var(--border);
    border-radius: 8px;
    object-fit: cover;
}

.feedback-dropzone-preview span { display: grid; gap: 4px; }

.feedback-aside h2 { margin: 0 0 10px; font-size: 16px; }

.feedback-steps {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--muted-strong);
    font-size: 14px;
    line-height: 1.45;
}

.feedback-context {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    word-break: break-all;
}

.feedback-aside-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.feedback-shot {
    display: inline-block;
    margin-top: 10px;
}

.feedback-shot img {
    max-width: min(100%, 420px);
    max-height: 260px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

@media (max-width: 980px) {
    .feedback-compose { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .feedback-kind-grid { grid-template-columns: 1fr; }
    .fb-row { grid-template-columns: 30px minmax(0, 1fr); }
    .fb-row-side {
        grid-column: 2;
        grid-auto-flow: column;
        justify-content: start;
        justify-items: start;
        text-align: left;
    }
    .fb-row-date { display: flex; gap: 4px; }
    .fb-row-excerpt { white-space: normal; }
}

/* Learning step: the one way forward (templates/learning/program_step_detail.html) */
.step-done-mark {
    color: #15803d;
    font-weight: 700;
}

.step-next-hint {
    color: var(--muted);
    font-size: 13px;
}

/* "Моё обучение" program card: progress and "Продолжить" (components/program_card.html) */
.learning-card-link[data-row-link] { cursor: pointer; }

.learning-card-title {
    color: inherit;
    text-decoration: none;
}

.learning-card-progress {
    display: grid;
    gap: 4px;
}

.learning-card-progress-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef1f6;
}

.learning-card-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
}

.learning-card-progress small { color: var(--muted); font-size: 12px; }

.learning-card-meta .learning-card-resume { margin-left: auto; }

/* «Моя команда» (templates/learning/team.html) */
.team-overdue {
    display: block;
    margin-top: 3px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
}

.team-flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 600;
}

.team-flag-inactive { background: #fff7ed; color: #c2410c; }

/* Тип пользователя влияет на права: подсказка под полем и громкое предупреждение
   для «сильных» типов (static/js/learning-type-warning.js). */
.field-note-warning,
.form-panel small.field-note-warning {
    color: var(--warning);
}

.type-strong-warning,
.form-panel small.type-strong-warning {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #fed7aa;
    border-left: 3px solid var(--warning);
    border-radius: 8px;
    background: #fff7ed;
    color: var(--warning);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.type-strong-warning[hidden] {
    display: none;
}

/* Org chart tags (tree and canvas): one shape for every fact on a row - a
   small key and the value, coloured by the cat-* palette. Роль · Тип · CRM ·
   ФТТ · Группа read alike, so no badge looks more important for its shape. */
.org-tag,
.cat-badge.org-tag,
.hf-badge.org-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 2px 7px 2px 3px;
    border-width: 1px;
    border-style: solid;
    border-radius: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-tag[data-key]::before {
    content: attr(data-key);
    flex: none;
    padding: 0 5px;
    border: 1px solid currentColor;
    border-radius: 5px;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.org-tag:not([data-key]) { padding-left: 7px; }

/* A dealer's manager: whose manager, right in the type. */
.org-tag[data-dealer-of]::after {
    content: "· " attr(data-dealer-of);
    font-weight: 500;
    opacity: 0.85;
}

.hf-badges .org-tag { margin-top: 0; font-size: 11px; }
.tree-group-chip.org-tag { min-height: 0; max-width: 260px; }

/* «Посмотреть как пользователь» (apps/portal/services/impersonation.py): a frame round
   the whole window that clicks pass through, and a bar that stays on top.
   Amber - only looking; red - full mode, everything is real. */
.imp-frame {
    position: fixed;
    inset: 0;
    z-index: 9999;
    border: 5px solid #f59e0b;
    pointer-events: none;
}
.imp-frame.is-full { border-color: #dc2626; }

.imp-bar {
    position: sticky;
    top: 0;
    z-index: 9998;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 16px;
    background: #fffbeb;
    border-bottom: 2px solid #f59e0b;
    color: #7c2d12;
    font-size: 13px;
}
.imp-bar.is-full { background: #fef2f2; border-bottom-color: #dc2626; color: #7f1d1d; }
.imp-bar-who { display: flex; flex-direction: column; gap: 2px; }
.imp-bar-who span { opacity: 0.85; }
.imp-bar-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.imp-bar-mode > span { max-width: 560px; }
.imp-bar form { margin: 0; }

.impersonate-menu .actions-menu-list { width: min(360px, 90vw); padding: 12px; gap: 8px; }
.impersonate-form p { margin: 0; color: var(--muted-strong); font-size: 13px; }
.impersonate-form label { display: grid; gap: 4px; }
.imp-bar-short { display: none; }
@media (max-width: 720px) {
    .imp-bar { padding: 6px 10px; gap: 6px; font-size: 12px; }
    .imp-bar-long { display: none; }
    .imp-bar-short { display: inline; flex-basis: 100%; }
    .imp-bar-mode { gap: 6px; }
}

/* Korona's own people - managers and learning administrators - marked quietly
   in the brand violet (a thin tint and a bar on the left) in the org tree and
   on the canvas, so the company's staff stand
   apart from the sales network they look after. */
.tree-row.is-korona {
    border-color: #e0c7f7;
    box-shadow: inset 3px 0 0 var(--brand);
}
.tree-row.is-korona:hover { border-color: #d3b0f2; background: var(--brand-soft); }
.hf-node.is-korona {
    border-color: #e0c7f7;
    box-shadow: inset 3px 0 0 var(--brand), 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* Приглашения (29.09.2026): two ways to invite side by side, the letter folded away. */
.invite-section-title { margin: 20px 0 4px; font-size: 18px; }
.invite-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
    margin-top: 10px;
}
.invite-choice { display: grid; gap: 10px; }
.invite-choice h3 { margin: 0; font-size: 16px; }
.invite-choice-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.invite-choice-form { display: grid; gap: 10px; }
.invite-email-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}
.invite-email-summary::-webkit-details-marker { display: none; }
.invite-email-summary::before { content: "▸"; color: var(--muted); }
details[open] > .invite-email-summary::before { content: "▾"; }
details.invite-email-preview, details.invite-sign-ins-panel { margin-top: 16px; }
details[open] > .invite-email-summary { margin-bottom: 12px; }
.invite-hint { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.invite-recommended {
    padding: 2px 8px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-weight: 700;
}
.invite-queue {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}
.invite-queue div { display: grid; gap: 2px; }
.invite-queue span { color: var(--muted); font-size: 11px; }
.invite-queue strong { font-size: 15px; }
@media (max-width: 720px) { .invite-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Подключение CRM → Дилеры и точки (29.09.2026): one table, everything done in place. */
.dealer-unassigned { border-color: #fed7aa; background: #fffbf5; }
.dealer-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.dealer-inline-form .input { min-width: 240px; flex: 1; }
.dealer-unassigned .dealer-outlet-list > li { flex-wrap: wrap; }
.dealer-table td { vertical-align: top; }
.dealer-managers { display: block; margin-top: 4px; color: var(--muted-strong); }
.dealer-outlet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dealer-outlet-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border: 1px solid #e0c7f7;
    border-radius: 7px;
    background: var(--brand-soft);
    font-size: 12px;
}
.dealer-outlet-chip.is-off { opacity: 0.65; }
.dealer-outlet-chip form { margin: 0; }
.dealer-outlet-unlink {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.dealer-outlet-unlink:hover { background: #fee2e2; color: var(--danger); }
.dealer-add > summary { list-style: none; }
.dealer-add > summary::-webkit-details-marker { display: none; }
.dealer-add { margin-top: 8px; }
.dealer-add[open] > form { margin-top: 8px; max-width: 520px; }
.dealer-table th:first-child { width: 22%; }
.dealer-table th:nth-child(2) { width: 18%; }
.dealer-unassigned-note {
    display: block;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    text-decoration: none;
}
.dealer-unassigned-note span { font-weight: 700; white-space: nowrap; }
.dealer-unassigned-note:hover { border-color: #fdba74; }
.dealer-table .dealer-add { display: block; width: fit-content; }

/* --- «К какому магазину относится продавец?» (static/js/ftt-outlet-chooser.js, 30.09.2026) --- */
.outlet-chooser-backdrop {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
    background: rgba(16, 24, 40, 0.45);
}
.outlet-chooser {
    display: flex; flex-direction: column; gap: 10px; width: min(560px, 100%); max-height: min(720px, calc(100vh - 32px));
    padding: 18px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow);
}
.outlet-chooser h3 { margin: 0; font-size: 18px; }
.outlet-chooser-hint { margin: 0; color: var(--muted); font-size: 13px; }
.outlet-chooser-search { width: 100%; }
.outlet-chooser-list {
    flex: 1 1 auto; min-height: 120px; overflow-y: auto; display: grid; align-content: start; gap: 4px;
    margin: 0 -6px; padding: 0 6px;
}
.outlet-chooser-item {
    display: grid; gap: 2px; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.outlet-chooser-item:hover, .outlet-chooser-item:focus-visible { border-color: var(--brand); background: var(--brand-soft); outline: 0; }
.outlet-chooser-item small { color: var(--muted); font-size: 12.5px; }
.outlet-chooser-empty { margin: 12px 0; color: var(--muted); text-align: center; }
.outlet-chooser-footer { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 720px) {
    /* Pinned to the screen's edges: in the backdrop's grid "height: 100%" grew
       with the list (131 outlets, nine thousand pixels) instead of scrolling it. */
    .outlet-chooser-backdrop { padding: 0; }
    .outlet-chooser { position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0; }
    .outlet-chooser-list { min-height: 0; }
    .outlet-chooser-item { min-height: 48px; }
    .outlet-chooser-footer .btn { flex: 1 1 0; min-height: 44px; }
}

/* The form field: a button in place of the long select, which stays for submitting. */
.outlet-field { display: grid; gap: 6px; }
.outlet-field[hidden] { display: none; }
.outlet-field-button { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outlet-field-confirm { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--warning); }

/* The administrators' queue (templates/ftt/outlet_proposals.html). */
.proposal-list { display: grid; gap: 10px; }
.proposal-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.proposal-card.has-warnings { border-left: 3px solid var(--warning); }
.proposal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.proposal-head small { display: block; color: var(--muted); font-size: 12.5px; }
.proposal-meta { margin: 0; color: var(--muted); font-size: 13px; }
.proposal-warnings { margin: 0; padding: 8px 12px 8px 28px; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: 13px; }
.proposal-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.proposal-approve, .proposal-reject { display: flex; gap: 8px; min-width: 0; }
.proposal-approve label { flex: 1 1 auto; min-width: 0; margin: 0; }
.proposal-approve select, .proposal-reject .input { width: 100%; min-width: 0; }
@media (max-width: 720px) {
    .proposal-actions { grid-template-columns: minmax(0, 1fr); }
    .proposal-approve, .proposal-reject { flex-direction: column; }
    .proposal-approve .btn, .proposal-reject .btn { width: 100%; }
}

/* ФТТ → Люди: the person's type under the name, changed right there (learning-category-picker.js). */
.ftt-link-type { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.ftt-link-type .cat-menu { top: 100%; left: 0; margin-top: 4px; }

/* «Нагрузка» by outlet (templates/ftt/hierarchy.html, 30.09.2026): the outlet's
   own numbers once in its head, its sellers' own numbers in the table under it. */
.ftt-workload-list { display: grid; gap: 14px; margin-bottom: 18px; }
.ftt-workload-outlet { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.ftt-workload-outlet.needs-attention { border-left: 3px solid var(--warning); }
.ftt-workload-outlet-head {
    display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: 12px 18px;
    padding: 12px 16px; background: var(--surface-soft); border-bottom: 1px solid var(--border);
}
.ftt-workload-outlet-name a { color: var(--text); text-decoration: none; }
.ftt-workload-outlet-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.ftt-workload-outlet-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.ftt-workload-outlet-facts dt { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.ftt-workload-outlet-facts dd { margin: 2px 0 0; font-size: 13px; }
.ftt-workload-outlet-signals { justify-self: end; }
.ftt-workload-outlet .table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 900px) {
    .ftt-workload-outlet-head { grid-template-columns: minmax(0, 1fr); }
    .ftt-workload-outlet-signals { justify-self: start; }
}
@media (max-width: 720px) {
    /* A seller under their outlet: name across, their three numbers side by
       side, the signal and the buttons last - one card, not six lines. */
    body:has(.ftt-network-bottom-nav) .ftt-workload-table tbody tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "who who who" "quotes sales conv" "signal signal signal" "act act act"; gap: 6px 10px; padding: 12px;
    }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table tbody td { display: block; padding: 0; border-bottom: 0 !important; box-shadow: none !important; min-width: 0; font-size: 13px; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table tbody td[data-label]::before { display: block; font-size: 10.5px; line-height: 1.3; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:nth-child(1) { grid-area: who; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:nth-child(2) { grid-area: quotes; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:nth-child(3) { grid-area: sales; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:nth-child(4) { grid-area: conv; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:nth-child(5) { grid-area: signal; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:nth-child(6) { grid-area: act; display: flex; gap: 6px; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:is(:nth-child(1), :nth-child(5), :nth-child(6))::before { display: none !important; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:nth-child(6) .btn { flex: 1 1 0; width: auto; }
    body:has(.ftt-network-bottom-nav) .ftt-workload-table td:first-child { min-width: 0; }
}

/* «Магазин ФТТ» in the bulk-add table (01.10.2026): the chooser button stays one line. */
.bulk-user-outlet-cell { min-width: 180px; }
.bulk-user-outlet-cell .outlet-field-button { max-width: 240px; }

/* The quote's card leads with the one next step (01.10.2026). An empty quote
   shows only «Подобрать на сайте» as a card of its own, and no total yet. */
.quote-detail-workspace.is-empty { grid-template-columns: minmax(0, 1fr); }
.quote-site-step {
    display: grid;
    gap: 8px;
    justify-items: start;
    padding: 22px 24px;
    border: 1px solid #dfd9ec;
    border-top: 4px solid #2e5bd7;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--surface-blue), var(--surface) 60%);
    box-shadow: 0 10px 24px rgba(37, 14, 71, 0.055);
}
.quote-site-step h2 { margin: 0; font-size: 22px; }
.quote-site-step p { margin: 0; max-width: 62ch; color: var(--muted-strong); line-height: 1.5; }
.quote-site-step-button { margin-top: 6px; padding: 12px 22px; font-size: 16px; }
.quote-customer-edit { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none; }
.quote-customer-edit:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .quote-site-step { padding: 18px 16px; }
    .quote-site-step h2 { font-size: 19px; }
    .quote-site-step-button { width: 100%; justify-content: center; text-align: center; }
}

/* «Состав предложения» (01.10.2026): one card per product with its photo, the
   options chosen for it on the site listed inside with their own photos, and the
   sum of the set. Photos are whole products on white, so contain, not cover. */
.quote-detail-product-card { padding: 16px; border: 1px solid #e1dbe9; border-radius: 16px; background: #fff; }
.quote-detail-product-head { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.quote-detail-photo { display: grid; width: 96px; height: 96px; place-items: center; overflow: hidden; border: 1px solid #ece7f3; border-radius: 12px; background: #f6f2fb; color: var(--primary); font-size: 28px; font-weight: 800; }
.quote-detail-photo.has-photo { background: #fff; }
.quote-detail-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.quote-detail-photo.is-small { width: 48px; height: 48px; border-radius: 9px; font-size: 17px; }
.quote-detail-product-main { min-width: 0; }
.quote-detail-product-main h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.35; }
.quote-detail-product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.quote-detail-product-tags span { padding: 3px 8px; border-radius: 999px; background: #f3eff8; color: var(--muted-strong); font-size: 12px; font-weight: 700; }
.quote-detail-product-tags span:first-child { background: #eee5fa; color: var(--primary); }
.quote-detail-product-tags span.is-strong { background: #fff3d6; color: #8a5a00; }
.quote-detail-product-props { margin: 9px 0 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.quote-detail-product-main .quote-item-promotion { margin: 6px 0 0; font-size: 13px; }
.quote-detail-product-link { display: inline-block; margin-top: 9px; color: var(--primary); font-size: 12px; font-weight: 800; text-decoration: none; }
.quote-detail-product-link:hover { text-decoration: underline; }
.quote-detail-line-total { display: grid; justify-items: end; gap: 2px; min-width: 110px; text-align: right; }
.quote-detail-line-total strong { color: var(--text); font-size: 19px; white-space: nowrap; }
.quote-detail-line-total strong.is-unknown { color: var(--muted); font-size: 13px; }
.quote-detail-line-total span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.quote-item-old-price { color: var(--muted); font-size: 12px; font-weight: 400; }
.quote-item-promotion { color: var(--brand); font-weight: 600; }
.quote-proposal-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
.quote-proposal-line b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; white-space: nowrap; }
/* The card follows its column, not the screen: beside the sidebar and «Ваше КП»
   a laptop leaves the list narrow long before the phone breakpoint. */
.quote-detail-product-list { container-type: inline-size; }
@container (max-width: 600px) {
    .quote-detail-product-card { padding: 12px; }
    .quote-detail-product-head { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
    .quote-detail-photo { width: 72px; height: 72px; }
    .quote-detail-line-total { grid-column: 2; justify-items: start; text-align: left; }
    .quote-detail-photo.is-small { width: 40px; height: 40px; }
}
/* A basket the seller should look at again (services/site_basket.mark_basket_warnings),
   «Подарок» instead of 0 ₽, and the note that prices may have moved since. */
.quote-detail-warning { margin: 8px 0 0; padding: 5px 9px; border-radius: 8px; background: #fff3d6; color: #7a4f00; font-size: 12px; font-weight: 700; }
small.quote-detail-warning { display: inline-block; margin: 3px 0 0; }
.quote-detail-line-total strong.is-gift { color: var(--brand); }
.quote-detail-prices-note { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: #f6f2fb; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
/* A phone field's "ещё N цифр" (static/js/phone-input.js). */
.phone-input-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.phone-input-hint.is-complete { color: #1f7a3d; font-weight: 700; }
/* The quote's contract line and «КП изменилось после договора» (01.10.2026). */
.quote-contract-line { margin: 6px 0 0; font-size: 14px; font-weight: 700; }
.quote-contract-line a { color: var(--primary); text-decoration: none; }
.quote-contract-line a:hover { text-decoration: underline; }
.quote-contract-stale { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: #fff3d6; color: #6b4600; font-size: 13px; line-height: 1.45; }
.quote-contract-stale span { flex: 1 1 320px; }
/* «Договоры» (templates/ftt/contract_list.html). */
.contract-list-date { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.contract-list-date .input { width: auto; }
.ftt-work-table tr.is-muted td { opacity: .65; }
/* «Что чаще всего просят»: one row per model, with its photo (services/analytics.py::_top_products). */
.ftt-top-models { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: top; }
.ftt-top-models li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #f0ecf5; }
.ftt-top-models li:last-child { border-bottom: 0; }
.ftt-top-models-photo { display: grid; width: 44px; height: 44px; place-items: center; overflow: hidden; border: 1px solid #ece7f3; border-radius: 9px; background: #f6f2fb; color: var(--primary); font-weight: 800; }
.ftt-top-models-photo.has-photo { background: #fff; }
.ftt-top-models-photo img { width: 100%; height: 100%; object-fit: contain; }
.ftt-top-models-name { min-width: 0; }
.ftt-top-models-name strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ftt-top-models-name small { color: var(--muted); font-size: 12px; }
.ftt-top-models-amount { font-size: 13px; font-weight: 700; white-space: nowrap; }
/* The board card names the customer's main product (01.10.2026). */
.kanban-card-product { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; margin: 6px 0 2px; }
.kanban-card-product .quote-detail-photo.is-small { width: 32px; height: 32px; border-radius: 7px; font-size: 13px; }
.kanban-card-product span { overflow: hidden; color: var(--muted-strong); font-size: 12px; line-height: 1.3; }
.kanban-card-product b { color: var(--primary); font-weight: 700; white-space: nowrap; }
.kanban-card-product small { color: var(--muted); white-space: nowrap; }
/* The board card's «КП № …» link beside the customer's name. */
.kanban-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-bottom: 4px; }
.kanban-card-head .kanban-card-title { flex: 1 1 90px; min-width: 0; margin-bottom: 0; }
.kanban-card-kp { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: #eef2fd; color: #2e5bd7; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.kanban-card-kp:hover { background: #dfe7fb; }

/* «Данные клиента» (templates/ftt/quote_edit.html, the site's mode). */
.quote-client-edit { display: grid; gap: 16px; max-width: 760px; }
.quote-client-edit-card { padding: 22px; border-top: 4px solid #5b2e9d; }
.quote-client-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.quote-client-edit-grid .field { display: grid; align-content: start; gap: 6px; margin: 0; }
.quote-client-edit-grid label { font-weight: 700; font-size: 13px; }
.quote-client-edit-grid label small { color: var(--muted); font-weight: 400; }
.quote-client-edit-wide { grid-column: 1 / -1; }
.quote-client-edit-grid textarea { min-height: 96px; resize: vertical; }
.quote-client-edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #efeaf5; }
.quote-client-edit-hint { display: grid; gap: 6px; justify-items: start; padding: 14px 16px; border: 1px solid #dfe7fb; border-radius: 14px; background: #f3f6fe; }
.quote-client-edit-hint p { margin: 0; color: var(--muted-strong); font-size: 13px; line-height: 1.45; }
.quote-client-edit-delete { padding: 12px 16px; border: 1px solid #f1d3d3; border-radius: 14px; background: #fff; }
.quote-client-edit-delete summary { color: #b42318; font-weight: 700; cursor: pointer; }
.quote-client-edit-delete p { margin: 10px 0; color: var(--muted-strong); font-size: 13px; }
.quote-detail-delete { margin-top: 16px; }
@media (max-width: 720px) {
    .quote-client-edit-grid { grid-template-columns: 1fr; }
    .quote-client-edit-card { padding: 16px; }
    .quote-client-edit-actions .btn { flex: 1 1 0; text-align: center; }
}
/* The board's quick view lists the products with photos (01.10.2026). */
.kanban-preview-items li.kanban-preview-product { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.kanban-preview-items .quote-detail-photo.is-small { width: 40px; height: 40px; border-radius: 8px; font-size: 15px; }
/* «Акции в КП» per outlet (templates/ftt/promotions.html, 02.10.2026). */
.ftt-promo-modes { margin: 0 0 14px; }
.ftt-promo-outlets-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ftt-promo-outlets ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 70vh; overflow: auto; }
.ftt-promo-outlets a { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.ftt-promo-outlets a:hover { background: #f6f2fb; }
.ftt-promo-outlets a.is-active { background: #eee5fa; box-shadow: inset 3px 0 0 var(--primary); }
.ftt-promo-outlets small { color: var(--muted); font-size: 12px; }
.ftt-promo-outlet-state { color: var(--muted); font-size: 11px; font-weight: 700; }
.ftt-promo-outlet-state.is-own { color: var(--primary); }
.ftt-promo-outlet-main { display: grid; gap: 12px; min-width: 0; container-type: inline-size; }
/* Beside the outlet list the form and «Сейчас в КП» stack until there is room for both. */
@container (max-width: 820px) { .ftt-promo-outlet-main .ftt-promo-layout { grid-template-columns: minmax(0, 1fr); } }
.ftt-promo-same-region { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 13px; }
@media (max-width: 980px) { .ftt-promo-outlets-layout { grid-template-columns: minmax(0, 1fr); } .ftt-promo-outlets ul { max-height: 260px; } }
/* The outlet's site region and its Moscow warning (templates/ftt/outlet_form.html, 02.10.2026). */
.ftt-price-region-field { grid-column: 1 / -1; }
.ftt-price-region-warning { margin: 6px 0 0; padding: 7px 10px; border-radius: 8px; background: #fff3d6; color: #6b4600; font-size: 13px; line-height: 1.4; }
/* The site's poster beside a promotion on «Акции в КП» (02.10.2026). */
.ftt-promo-list label { align-items: flex-start; }
.ftt-promo-poster { flex: 0 0 auto; width: 44px; aspect-ratio: 707 / 1000; object-fit: cover; border-radius: 5px; border: 1px solid #ece7f3; }
.ftt-promo-poster.is-small { float: left; width: 30px; margin: 0 8px 4px 0; }
.ftt-promo-printed li { overflow: hidden; }

/* «CRM дилера»: the dealer's other Bitrix companies as a list of boxes (10.11.2026). */
.portal-link-extra { margin: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; }
.portal-link-extra legend { padding: 0 6px; font-weight: 700; }
.portal-link-extra .field-help { display: block; margin-bottom: 8px; }
.portal-link-extra label { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-weight: 400; }
.portal-link-extra input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }

/* «Дилеры и точки»: which of the dealer's managers run each outlet, under the chips (10.11.2026). */
.dealer-run-form { display: grid; gap: 6px; margin: 10px 0 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.dealer-run-title { margin: 0; font-size: 13px; font-weight: 700; }
.dealer-run-title small { font-weight: 400; }
.dealer-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; }
.dealer-run-outlet { flex: 1 1 100%; color: var(--muted-strong); font-size: 12px; }
.dealer-run-row .check-row { margin: 0; }
.dealer-run-form .btn { justify-self: start; }

/* Outlet home: an administrator enters visitors for any past day (10.11.2026). */
.ftt-footfall-any-day { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ftt-footfall-any-day-title { font-weight: 700; font-size: 13px; }
.ftt-footfall-any-day label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.ftt-footfall-any-day input[type="date"] { width: auto; }
.ftt-footfall-any-day small { flex: 1 1 100%; }