: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; }
.feedback-legacy-file { color: var(--muted); font-size: 12px; line-height: 1.35; }

.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-mark {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
}

.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;
}

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

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

.module-card {
    min-height: 132px;
    padding: 18px;
    color: var(--text);
    border-top: 4px solid var(--primary);
}

.module-card:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    color: var(--text);
}

.module-card strong {
    display: block;
    margin: 14px 0 5px;
    font-size: 18px;
}

.module-card small { color: var(--muted); }

.module-count {
    min-width: 38px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--surface-blue);
    color: var(--primary);
    font-weight: 800;
}

.accent-blue { border-top-color: var(--primary); }
.accent-orange { border-top-color: var(--warning); }
.accent-green { border-top-color: var(--success); }
.accent-orange .module-count { background: #fff7ed; color: var(--warning); }
.accent-green .module-count { background: #ecfdf3; 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;
}

.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;
}

.toolbar.compact {
    grid-template-columns: minmax(220px, 1fr) auto;
}

.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(140px, 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); }

.invitation-delivery-error {
    margin-top: 3px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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;
}

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

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

.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,
.learning-card-actions {
    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;
}

.learning-card-actions {
    justify-content: flex-start;
}

.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,
.question-editor-list {
    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;
}

.question-editor-card {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.question-editor-card summary {
    cursor: pointer;
    font-weight: 750;
}

/* 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;
}

.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;
}

.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;
}

.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);
}

.tree-portal-access {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 7px;
    border: 1px solid #a7f3d0;
    border-radius: 7px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.tree-portal-access > span {
    font-size: 14px;
    line-height: 1;
}

.tree-ftt-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 7px;
    border: 1px solid #e0c7f7;
    border-radius: 7px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.tree-ftt-badge > strong {
    padding: 1px 5px;
    border: 1px solid var(--brand);
    border-radius: 5px;
    background: #fff;
    color: var(--brand);
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* 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-group { display: flex; flex-wrap: wrap; gap: 6px; }
.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: 7px; margin: 0 0 22px; padding-left: 20px; }

.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 {
    align-items: flex-end;
    gap: 18px;
}

.ftt-period-switcher {
    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-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-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

.ftt-analytics-action {
    display: grid;
    gap: 3px;
    min-height: 78px;
    padding: 15px 17px;
    border: 1px solid #dce5f2;
    border-radius: 14px;
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 8px 20px rgba(23, 43, 77, 0.05);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ftt-analytics-action:hover {
    border-color: #9cb8f9;
    color: var(--text);
    box-shadow: 0 12px 24px rgba(40, 90, 210, 0.12);
    transform: translateY(-2px);
}

.ftt-analytics-action strong { color: var(--brand); }
.ftt-analytics-action span { color: var(--muted); font-size: 13px; line-height: 1.35; }

.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%; }
    .ftt-period-switcher .btn { 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; }
    .ftt-analytics-actions { grid-template-columns: 1fr; }
}

/* "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-products {
    height: 220px;
}

.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;
}

.ftt-funnel-svg {
    width: 100%;
    height: auto;
    display: block;
}

.ftt-funnel-shape {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 2;
    transition: filter 0.15s ease;
}

.ftt-funnel-shape:hover {
    filter: brightness(1.1) saturate(1.15);
}

/* White text sits inside the (fairly dark/saturated) gradient bands - the
   narrowest stage's text is allowed to run wider than its own trapezoid,
   spilling into the empty background beside it rather than being clipped.
   That background is the plain white panel, though, so plain white text
   silently vanished the moment it spilled past its shape (this bit a real
   screenshot: "Продажи" on the narrowest stage was invisible where it
   overran the shape). A dark halo (paint-order+stroke) keeps it legible
   over both the coloured shape AND the white panel behind it. */
.ftt-funnel-label,
.ftt-funnel-value {
    fill: #ffffff;
    paint-order: stroke fill;
    stroke: rgba(16, 24, 40, 0.55);
    stroke-linejoin: round;
    pointer-events: none;
}

.ftt-funnel-label {
    font-size: 17px;
    font-weight: 700;
    opacity: 0.9;
    stroke-width: 3px;
}

.ftt-funnel-value {
    font-size: 32px;
    font-weight: 800;
    stroke-width: 4px;
}

.ftt-funnel-drop-pill {
    fill: #ffffff;
    stroke: var(--border);
    stroke-width: 1;
}

.ftt-funnel-drop-text {
    font-size: 15px;
    font-weight: 800;
    fill: var(--success);
    pointer-events: none;
}

.ftt-funnel-drop.is-weak .ftt-funnel-drop-text {
    fill: var(--warning);
}

/* white-space: normal (not nowrap) on purpose - the full message ("Подборы
   (КП): 10 · 67% от предыдущего шага") is wider than a comfortable tooltip,
   and nowrap either overflowed past its own rounded background or ran
   under whatever sat to the right of it, cutting the text off with no
   ellipsis. Wrapping onto a second line keeps every word visible instead.
   The JS also clamps the tooltip's horizontal position so it can't run
   past the funnel's own right edge in the first place. */
.ftt-funnel-tooltip {
    position: absolute;
    z-index: 5;
    width: max-content;
    max-width: 200px;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--text);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    pointer-events: none;
    box-shadow: var(--shadow);
}

/* 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%; }
    .kanban-filter-group { width: 100%; }
    .kanban-filter-group .btn { flex: 1 1 auto; }
    .quote-flow { grid-template-columns: 1fr; }
    .quote-summary-bar { bottom: 0; border-radius: 12px 12px 0 0; }
}

.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-picker {
    display: grid;
    gap: 8px;
    max-height: 520px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.group-option {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px !important;
    align-items: start;
    margin: 0 !important;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

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

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

.group-option strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
}

.group-option small {
    color: var(--muted);
}

.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-program-panel {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 24px;
}

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

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

.assignment-collapse {
    display: flex;
    flex-direction: column;
}

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

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

.assignment-collapse summary::marker {
    content: "";
}

.assignment-collapse .summary-open {
    display: inline;
}

.assignment-collapse .summary-closed {
    display: none;
}

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

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

.assignment-collapse-body {
    order: 1;
    display: grid;
    gap: 12px;
}

.assignment-current {
    display: grid;
    gap: 8px;
}

.assignment-message {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
}

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

.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);
}

.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%;
}

.choice-details {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.choice-details summary {
    cursor: pointer;
    color: var(--text);
    font-weight: 700;
}

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

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

.choice-list > div,
.choice-list li {
    margin: 0;
    list-style: none;
}

.choice-list label,
.choice-list li label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}

.choice-list input[type="checkbox"] {
    width: 16px !important;
    min-width: 16px;
    height: 16px;
    min-height: 16px !important;
    flex: 0 0 16px;
    margin: 2px 0 0 !important;
    padding: 0;
}

.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;
}

.access-panel {
    margin-top: 16px;
}

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

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

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

.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; }
}

.role-form {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.role-form.inline {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.role-form.inline label {
    margin-bottom: 0;
}

.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;
    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;
}

/* For a <form> whose fields naturally split into distinct topics (client
   info vs. an items table): wrap each topic in its own .panel card instead
   of one undifferentiated .form-panel block, and stack the cards with a
   gap - same idea as .dashboard-main, just not dashboard-specific. */
.panel-stack {
    display: grid;
    gap: 18px;
}

/* Even on a full-width card, a single-line text input has no business
   stretching to fill half the page - cap it, let the grid cell's leftover
   space stay empty instead of the box itself growing absurdly wide.
   Textarea excluded on purpose: a comment box benefits from width. */
.quote-panel-client .form-grid input.input {
    max-width: 360px;
}

/* Клиент and Товары get their own accent color (top border + heading) so
   the two blocks read as distinct at a glance, not just "two white cards". */
/* The client block only ever has two short fields + a comment box - full
   card width (matching the wide items table below) just spreads them out
   with empty space between. Same cap as .form-panel for a plain form card. */
.quote-panel-client {
    max-width: 720px;
}

/* A compact visual route through the configurator. It deliberately does not
   turn this fast one-page form into a blocking multi-step wizard: sellers
   can still jump straight to products, but always know where they are. */
.quote-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quote-flow li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
}

.quote-flow li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-soft);
    font-size: 13px;
    font-weight: 800;
}

.quote-flow strong,
.quote-flow small { display: block; }
.quote-flow strong { color: var(--text); font-size: 13px; }
.quote-flow small { margin-top: 1px; font-size: 11px; }
.quote-flow .is-current { border-color: var(--brand); background: var(--brand-soft); }
.quote-flow .is-current > span { background: var(--brand); color: #fff; }

/* margin-bottom reserves room for the sticky summary bar below - see the
   comment by .quote-summary-bar for why. */
.quote-panel-items {
    margin-bottom: 80px;
}

/* "Просто визит" opens a native <dialog> instead of exposing the reason
   field inline in the page-head - the button that opens it stays in the
   page-head (top of the page, as asked for), the reason picker itself only
   appears once the seller actually commits to that path. The dialog's
   confirm button submits the real <form> via the HTML `form` attribute,
   same trick as before, just now living inside the dialog markup. */
.quote-visit-dialog {
    width: min(580px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: auto;
    border: 1px solid #d9dff0;
    border-top: 4px solid var(--brand);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(27, 40, 82, 0.24);
    background: #fff;
    color: var(--text);
}

.quote-visit-dialog::backdrop {
    background: rgba(22, 31, 58, 0.54);
    backdrop-filter: blur(3px);
}

.quote-visit-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 26px 18px;
    background: linear-gradient(135deg, #faf8ff 0%, #f4f7ff 100%);
    border-bottom: 1px solid #e7eaf4;
}

.quote-visit-hero-icon,
.quote-visit-client-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand) 0%, #7b22be 100%);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(74, 0, 125, 0.2);
}

.quote-visit-eyebrow {
    margin: 0 0 3px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quote-visit-hero h2 {
    margin: 0;
    font-size: 23px;
}

.quote-visit-hero p:not(.quote-visit-eyebrow) {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.quote-visit-client-preview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 18px 26px 0;
    padding: 12px;
    border: 1px solid #dfe5f3;
    border-radius: 12px;
    background: #f8faff;
}

.quote-visit-client-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #e8efff;
    box-shadow: none;
    color: #2e5bd7;
    font-size: 12px;
}

.quote-visit-client-preview small,
.quote-visit-client-preview strong {
    display: block;
}

.quote-visit-client-preview small {
    margin-bottom: 1px;
    color: var(--muted);
    font-size: 11px;
}

.quote-visit-client-preview strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.quote-visit-preview-phone {
    color: var(--muted-strong);
    font-size: 13px;
    text-align: right;
}

.quote-visit-section {
    padding: 20px 26px 0;
}

.quote-visit-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.quote-visit-section h3 {
    margin: 0;
    font-size: 15px;
}

.quote-visit-section-head span {
    color: var(--muted);
    font-size: 12px;
}

.quote-visit-reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

.reason-chip {
    padding: 7px 11px;
    border: 1px solid #d3daeb;
    border-radius: 999px;
    background: #f9faff;
    color: var(--muted-strong);
    font-size: 13px;
    cursor: pointer;
    transition: 0.16s ease;
}

.reason-chip:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.reason-chip.is-selected {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 10px rgba(74, 0, 125, 0.18);
}

.quote-visit-reason-field .input {
    background: #fbfcff;
}

.quote-visit-followup {
    margin: 20px 26px 0;
    padding: 14px;
    border: 1px solid #dbe3f2;
    border-radius: 13px;
    background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
}

.quote-visit-followup-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.quote-visit-followup-label input {
    accent-color: var(--brand);
    width: 18px;
    height: 18px;
    margin: 0;
}

.quote-visit-followup-label strong,
.quote-visit-followup-label small {
    display: block;
}

.quote-visit-followup-label strong {
    font-size: 14px;
}

.quote-visit-followup-label small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.quote-visit-followup-fields {
    display: grid;
    grid-template-columns: minmax(160px, 0.85fr) minmax(0, 1.45fr);
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5e9f2;
}

.quote-visit-followup-fields[hidden] {
    display: none;
}

.quote-visit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding: 16px 26px;
    border-top: 1px solid #e6eaf3;
    background: #fbfcff;
}

@media (max-width: 560px) {
    .quote-visit-hero,
    .quote-visit-section { padding-left: 18px; padding-right: 18px; }
    .quote-visit-client-preview,
    .quote-visit-followup { margin-left: 18px; margin-right: 18px; }
    .quote-visit-actions { padding-left: 18px; padding-right: 18px; }
    .quote-visit-client-preview { grid-template-columns: auto minmax(0, 1fr); }
    .quote-visit-preview-phone { grid-column: 2; text-align: left; }
    .quote-visit-followup-fields { grid-template-columns: 1fr; }
    .quote-visit-actions .btn { flex: 1; }
}

/* Real toggle-switch look instead of a bare checkbox - the previous plain
   checkbox sitting right before a "Найти" button read as "check this, then
   press that", even though it already auto-submits on change. A switch
   reads as one self-contained action. */
.quote-list-visits-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--muted-strong);
    cursor: pointer;
}

.quote-list-visits-toggle input {
    appearance: none;
    width: 36px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    border-radius: 999px;
    background: var(--border-strong);
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s ease;
}

.quote-list-visits-toggle input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.15s ease;
}

.quote-list-visits-toggle input:checked {
    background: var(--brand);
}

.quote-list-visits-toggle input:checked::after {
    left: 18px;
}

.quote-list-visit-row td {
    color: var(--muted-strong);
}

/* Bright and unmissable on purpose - this tag is the whole point of the
   toggle that reveals these rows, it must not blend in the way a muted
   status-neutral badge would. */
.status-visit {
    background: var(--brand);
    color: #fff;
}

@media (max-width: 860px) {
    .quote-client-size-grid {
        grid-template-columns: 1fr;
    }

    .quote-size-group {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 20px;
    }
}

/* A bold, full-width call-to-action bar - style borrowed from an early
   product mockup's "Собрано в предложении ... [Сформировать КП]" bar.
   Used both as the live running total while filling out a quote
   (quote_form.html) and as the finished total on its read-only page
   (quote_detail.html). */
/* Sticky so the running total and submit stay reachable while scrolling a
   long items table, instead of only appearing once you reach the very
   bottom of the page. */
/* The sticky bar's own space in the flow sits right after the items panel
   with only the .panel-stack gap between them - not enough room for the
   panel's last row (Итого / "+ Ещё товар") to clear the pinned bar while
   scrolling, so it visibly sat on top of them (fixed via .quote-panel-items
   margin-bottom above). */
.quote-summary-bar {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--brand-dark);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.quote-summary-bar strong {
    color: #fff;
}

.quote-summary-bar small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}

.quote-summary-bar .btn.primary {
    background: #fff;
    border-color: #fff;
    color: var(--brand-dark);
}

.quote-summary-bar .btn.primary:hover {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: var(--brand-dark);
}

.quote-item-table td {
    vertical-align: middle;
}

.quote-category-field,
.quote-price-field { display: grid; gap: 3px; }

.quote-category-field small,
.quote-price-field small {
    color: var(--warning);
    font-size: 11px;
    font-weight: 700;
}

.quote-item-category-missing .quote-category-field select {
    border-color: #facc15;
    background: #fffbeb;
}

.quote-item-price-missing .quote-price-field input {
    border-color: #facc15;
    background: #fffbeb;
}

.quote-item-line-total {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.quote-item-total-label {
    text-align: right;
    font-weight: 700;
    color: var(--muted);
}

/* 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-table tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--border-strong);
}

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

.row-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
}

.row-remove-btn:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--danger);
}

.new-group-panel {
    background: #fbfaff;
    border-color: #e5dbfa;
}

.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); }

.new-group-panel-body {
    padding: 18px;
}

/* 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,
.learning-user-active-field {
    align-items: start;
}

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

.learning-user-active-field .field-help {
    grid-column: 2;
    margin-top: -2px;
}

.invite-mode-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.invite-mode-panel h2 {
    margin: 0;
    font-size: 16px;
}

.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-search-panel { margin: 0 0 16px; }
.invite-sign-ins-panel { margin: 0 0 16px; }
.invite-reissue-panel { margin: 0 0 16px; }
.invite-reissue-details > summary { list-style: none; width: fit-content; }
.invite-reissue-details > summary::-webkit-details-marker { display: none; }
.invite-reissue-details > summary::after { content: "▾"; margin-left: 6px; font-size: 13px; }
.invite-reissue-details[open] > summary::after { content: "▴"; }
.invite-reissue-details .details-content { display: grid; gap: 14px; margin-top: 16px; }
.invite-reissue-form { display: grid; gap: 14px; }
.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; }
.invite-email-subject { margin: 0 0 12px; color: var(--muted); }
.invite-email-body { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--text); }
.invite-email-body p { margin: 0 0 12px; }
.invite-email-body p:last-child { margin-bottom: 0; }

.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;
}

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

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

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

.lead-text {
    margin-top: 0;
    color: var(--muted);
    font-size: 17px;
}

.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;
}

.module-card,
.summary-row div,
.panel,
.stats a,
.table-wrap,
.learning-stats div,
.login-panel {
    border-color: var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.module-grid,
.summary-row,
.learning-stats,
.learning-card-grid {
    gap: 14px;
}

.module-card {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 20px;
    border-top: 0;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.module-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--primary);
}

.module-card.accent-orange::before { background: var(--warning); }
.module-card.accent-green::before { background: var(--success); }
.module-card.accent-purple::before { background: var(--brand); }

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

.module-count {
    border-radius: 10px;
}

.accent-purple .module-count {
    background: var(--brand-soft);
    color: var(--brand);
}

.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;
}

.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; }

/* Клиент/Товары accent borders live here, not next to the rest of the
   .quote-panel-* rules above - the generic ".panel { border-color: ... }"
   reset (further up the file, same specificity) comes after that block and
   was winning the cascade, leaving both top borders plain gray. Same fix as
   the .attention-domain-* accents just above: declare the color after the
   reset, not before it. */
.quote-panel-client { border-top: 4px solid var(--brand); }
.quote-panel-client h2 { color: var(--brand); }
.quote-panel-items { border-top: 4px solid var(--primary); }
.quote-panel-items h2 { color: var(--primary); }

.dashboard-attention-list,
.compact-list,
.activity-list,
.quick-actions {
    display: grid;
    gap: 10px;
}

.dashboard-attention-item,
.compact-list-item,
.quick-action {
    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,
.compact-list-item:hover,
.quick-action: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,
.compact-list-item small,
.activity-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); }

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

.dashboard-columns h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.quick-action {
    font-weight: 750;
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
    color: var(--brand-dark);
}

.quick-action:hover {
    background: color-mix(in srgb, var(--brand) 12%, var(--brand-soft));
    border-color: var(--brand);
    color: var(--brand-dark);
}

.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;
}

.activity-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    border-bottom: 0;
}

.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; }
    .module-grid,
    .summary-row,
    .dashboard-kpi-grid,
    .dashboard-layout,
    .dashboard-columns,
    .learning-stats,
    .management-grid,
    .lesson-grid,
    .detail-layout,
    .detail-layout.wide-left,
    .program-edit-layout,
    .group-management-layout,
    .access-grid,
    .access-secret,
    .access-actions.inline,
    .role-form.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; }
    .management-grid .wide,
    .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;
    }
    .brand-logo {
        width: 132px;
        height: 34px;
    }
    .brand-copy {
        display: none;
    }
    .userbox { display: none; }
    .nav-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-head,
    .toolbar,
    .toolbar.compact {
        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;
}

.ftt-unassigned-outlet-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ftt-unassigned-outlet-list article {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 10px;
    align-items: center;
    padding: 13px;
    border: 1px solid #e2d5bf;
    border-radius: 10px;
    background: #fffbf4;
}
.ftt-unassigned-outlet-list article small { color: #6c7990; font-size: 12px; }
.ftt-unassigned-outlet-list article .btn { grid-row: 1 / span 2; grid-column: 2; }

@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; }

.disk-launch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 34px;
    align-items: center;
    min-height: 310px;
    padding: 42px;
    border-color: #dcd0fb;
    background: #fcfbff;
}

.disk-launch-copy { display: grid; gap: 14px; max-width: 660px; }
.disk-launch-copy h2 { margin: 0; font-size: 28px; }
.disk-launch-copy p { margin: 0; color: var(--muted-strong); font-size: 16px; line-height: 1.6; }
.disk-launch-copy small { color: var(--muted); }

.section-kicker {
    color: #6530c9;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.disk-launch-note {
    display: grid;
    gap: 8px;
    padding: 20px;
    border: 1px solid #e3dafa;
    border-radius: 10px;
    background: #f5f1ff;
    color: #4a3a73;
    line-height: 1.55;
}

.disk-launch-note strong { color: #34225c; }

/* 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-defect-groups {
    display: grid;
    gap: 12px;
}

.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;
}

.reclamation-defect-groups .reclamation-conditional {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid #e4d8f0;
    border-radius: 8px;
    background: #fbf9fe;
}

.reclamation-description-fields { margin-top: 16px; }

.product-defect-title {
    margin: 0;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.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;
}

.reclamation-editor .choice-details {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-color: #d8c8ec;
    background: #fbf8ff;
}

.reclamation-editor .choice-details summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 15px;
    color: var(--brand-dark);
    font-size: 14px;
    list-style: none;
}

.reclamation-editor .choice-details summary::-webkit-details-marker { display: none; }

.reclamation-editor .choice-details summary::before {
    content: "+";
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border: 1px solid #bea2dc;
    border-radius: 5px;
    color: var(--brand);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.reclamation-editor .choice-details[open] summary {
    border-bottom: 1px solid #e2d6f0;
    background: #f4edff;
}

.reclamation-editor .choice-details[open] summary::before { content: "−"; }

.choice-details-rich summary span { font-weight: 750; }

.choice-details-rich summary small {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    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; }
    .disk-launch { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
    .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; }
    .disk-launch { min-height: auto; padding: 22px; }
    .disk-launch-copy h2 { font-size: 22px; }
    .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-details-rich summary small { display: none; }
    .reclamation-defect-groups .reclamation-conditional { padding: 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,
    .module-card,
    .learning-card,
    .dashboard-kpi,
    .learning-stats div,
    .stats a { border-radius: 10px; }

    .panel { padding: 16px; }
    .stats,
    .dashboard-kpi-grid,
    .learning-stats,
    .summary-row,
    .module-grid { 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,
    .toolbar.compact,
    .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,
    .management-grid,
    .lesson-grid,
    .detail-layout,
    .detail-layout.wide-left,
    .program-edit-layout,
    .group-management-layout,
    .access-grid,
    .attempt-layout,
    .step-form-layout,
    .dashboard-layout,
    .dashboard-columns,
    .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; }

    .disk-launch { padding: 22px; }
    .disk-launch-copy h2 { font-size: 22px; }

    .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,
    .module-grid { 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-catalog-panel,
.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,
.quote-catalog-status {
    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-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.34fr);
    align-items: start;
    gap: 18px;
}
.quote-catalog-panel { padding: 24px; border-top: 4px solid #5b2e9d; }
.quote-catalog-title { align-items: center; }
.quote-catalog-title .btn { flex: 0 0 auto; }
.quote-catalog-search-wrap { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.quote-catalog-search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #cbbce3;
    border-radius: 12px;
    background: #fbfaff;
    color: var(--primary);
    font-size: 22px;
}
.quote-catalog-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px #eee6fa; }
.quote-catalog-search .input { min-width: 0; height: 48px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.quote-catalog-search .input:focus { box-shadow: none; }
.quote-catalog-status { background: #eef7f4; color: #17715c; }

.quote-category-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.quote-category-filter {
    padding: 6px 10px;
    border: 1px solid #ddd6eb;
    border-radius: 999px;
    background: #fff;
    color: var(--muted-strong);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}
.quote-category-filter:hover,
.quote-category-filter.is-active { border-color: var(--primary); background: #f2ebff; color: var(--primary); }

.quote-catalog-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 114px;
    margin-top: 14px;
}
.quote-catalog-empty {
    display: grid;
    grid-column: 1 / -1;
    place-items: center;
    align-content: center;
    min-height: 114px;
    padding: 14px 22px;
    border: 1px dashed #cfc4e0;
    border-radius: 14px;
    background: linear-gradient(135deg, #fcfbff, #f7f2ff);
    text-align: center;
}
.quote-catalog-empty-icon { color: var(--primary); font-size: 21px; }
.quote-catalog-empty strong { margin-top: 2px; color: var(--text); }
.quote-catalog-empty p { max-width: 580px; margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.quote-catalog-product {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #e2ddec;
    border-radius: 13px;
    background: #fff;
}
.quote-catalog-product-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; background: #eee5fa; color: var(--primary); font-size: 18px; font-weight: 800; }
.quote-catalog-product-image { width: 42px; height: 42px; border-radius: 10px; background: #eee5fa; object-fit: cover; }
.quote-catalog-product strong,
.quote-catalog-product span,
.quote-catalog-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-catalog-product span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.quote-catalog-product small { margin-top: 4px; color: #17715c; font-weight: 800; }

.quote-items-heading { align-items: end; margin-top: 28px; }
.quote-items-heading > span { color: var(--muted); font-size: 13px; font-weight: 700; }
.quote-item-list { display: grid; gap: 10px; margin-top: 12px; }
.quote-item-card { padding: 15px; border: 1px solid #e1dbe9; border-radius: 14px; background: #fff; }
.quote-item-card:focus-within { border-color: #9c77ce; box-shadow: 0 0 0 3px #f4effb; }
.quote-item-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: end; gap: 12px; }
.quote-item-product-field { margin: 0; }
.quote-item-product-field small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.quote-item-total { min-width: 86px; padding-bottom: 8px; text-align: right; }
.quote-item-total span,
.quote-item-total strong { display: block; }
.quote-item-total span { color: var(--muted); font-size: 11px; }
.quote-item-total strong { margin-top: 2px; color: var(--primary); font-size: 16px; }
.quote-item-card .row-remove-btn { width: 32px; height: 32px; margin-bottom: 3px; border-radius: 9px; }
.quote-item-fields { display: grid; grid-template-columns: 1.1fr 0.85fr 0.65fr 0.9fr 1.45fr; gap: 10px; margin-top: 12px; }
.quote-item-fields .field { margin: 0; }
.quote-item-fields label { font-size: 12px; }
.quote-item-fields .input { min-width: 0; }
.quote-item-validation { margin: 10px 0 0; color: #b45309; font-size: 12px; font-weight: 700; }
.quote-item-card.has-validation-note { border-color: #f2c55c; background: #fffdf7; }
.quote-add-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 5px 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; font-weight: 800; }
.quote-add-more span { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #eee5fa; font-size: 18px; }

.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 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-count { margin: 2px 0 16px; color: var(--muted); font-size: 12px; }
.quote-proposal-submit { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 46px; }
.quote-proposal-footnote { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }

@media (max-width: 980px) {
    .quote-workspace { grid-template-columns: 1fr; }
    .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-catalog-panel,
    .quote-proposal-card { padding: 16px; border-radius: 14px; }
    .quote-customer-grid,
    .quote-item-fields { grid-template-columns: 1fr 1fr; }
    .quote-customer-comment,
    .quote-item-comment { grid-column: 1 / -1; }
    .quote-catalog-title { display: grid; }
    .quote-catalog-title .btn { width: 100%; }
    .quote-catalog-search-wrap { display: grid; }
    .quote-catalog-status { justify-self: start; }
    .quote-catalog-results { grid-template-columns: 1fr; }
    .quote-item-card-head { grid-template-columns: minmax(0, 1fr) 32px; }
    .quote-item-total { grid-column: 1; grid-row: 2; padding: 0; text-align: left; }
    .quote-item-card .row-remove-btn { grid-column: 2; grid-row: 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-empty-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.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-product-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e1dbe9;
    border-radius: 14px;
    background: #fff;
}
.quote-detail-product-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: #eee5fa; color: var(--primary); font-size: 20px; font-weight: 800; }
.quote-detail-product-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.quote-detail-product-title h3 { margin: 0; font-size: 16px; }
.quote-detail-product-title small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.quote-detail-product-title a { flex: 0 0 auto; color: var(--primary); font-size: 12px; font-weight: 800; }
.quote-detail-product-main > p { margin: 7px 0 0; color: var(--muted-strong); font-size: 13px; }
.quote-detail-product-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.quote-detail-product-meta div { min-width: 0; }
.quote-detail-product-meta dt { color: var(--muted); font-size: 11px; }
.quote-detail-product-meta dd { margin: 2px 0 0; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.quote-detail-line-total { min-width: 110px; padding: 4px 0 0; text-align: right; }
.quote-detail-line-total span,
.quote-detail-line-total strong { display: block; }
.quote-detail-line-total span { color: var(--muted); font-size: 11px; }
.quote-detail-line-total strong { margin-top: 3px; color: var(--primary); font-size: 17px; white-space: nowrap; }
.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; }
    .quote-detail-product-card { grid-template-columns: 42px minmax(0, 1fr); }
    .quote-detail-product-mark { width: 42px; height: 42px; }
    .quote-detail-line-total { grid-column: 2; padding: 0; text-align: left; }
    .quote-detail-product-meta { grid-template-columns: 1fr 1fr; }
    .quote-detail-product-title { display: block; }
    .quote-detail-product-title a { display: inline-block; margin-top: 6px; }
}

/* FTT administrator: a network cockpit with its own visual language. Seller
   pages stay task-oriented; these blocks answer where the network needs a
   management decision without turning the screen into another spreadsheet. */
.ftt-network-pulse {
    display: grid;
    grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.55fr);
    gap: 18px;
    align-items: stretch;
    margin: 18px 0;
    padding: 22px;
    border: 1px solid #ded6ef;
    border-radius: 20px;
    background:
        radial-gradient(circle at 4% 4%, rgba(132, 74, 197, 0.16), transparent 37%),
        linear-gradient(135deg, #fff 0%, #faf8ff 100%);
    box-shadow: 0 12px 28px rgba(46, 25, 77, 0.07);
}
.ftt-network-pulse-lead > span,
.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-pulse h2,
.ftt-network-category-hero h2 { margin: 5px 0 7px; font-size: 24px; }
.ftt-network-pulse p,
.ftt-network-category-hero p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ftt-network-signal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(116px, 1fr));
    gap: 10px;
}
.ftt-network-signal {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e5e0ed;
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
}
.ftt-network-signal > span,
.ftt-network-signal small { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; }
.ftt-network-signal strong { display: block; margin: 5px 0 4px; color: #25324d; font-size: 26px; line-height: 1; }
.ftt-network-signal.is-warning { border-color: #f1cb81; background: #fffaf0; }
.ftt-network-signal.is-warning strong { color: #b85b00; }
.ftt-network-signal.is-danger { border-color: #f0b8b3; background: #fff7f6; }
.ftt-network-signal.is-danger strong { color: #b42318; }

/* 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-pulse { grid-template-columns: 1fr; }
    .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-pulse,
    .ftt-network-category-hero { padding: 18px; border-radius: 15px; }
    .ftt-network-signal-grid,
    .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,
.access-role-locked {
    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-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-search-count,
.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;
}

.hf-node.is-context-manager { border-color: var(--brand); background: var(--brand-soft); }
.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-badge-portal { border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; }
.hf-badge-ftt { border: 1px solid #e0c7f7; background: var(--brand-soft); color: var(--brand-dark); }

.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 {
    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-note { color: var(--muted); }
.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)); }

/* The pulse tiles became links to the lists behind them. */
a.ftt-network-signal { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.ftt-network-signal:hover { border-color: #b9a7dd; box-shadow: 0 6px 16px rgba(31, 47, 79, .08); }
a.ftt-network-signal:focus-visible { outline: 2px solid #530086; outline-offset: 2px; }

.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); }