/* ==========================================================================
   AI Sales
   --------------------------------------------------------------------------
   Vizuál je záměrně shodný se superadministrací StartupJobs, protože tam se
   tool má časem přestěhovat. Levý sloupec s navigací, obsah v kartách,
   modré odznaky s počty.

   Fellix existuje jen ve 400 a 700 — žádná 500 ani 600. Kdyby se tu objevily,
   prohlížeč je dopočítá sám a písmo bude vypadat jinak než ve zbytku adminu.
   ========================================================================== */

:root {
    /* Modrá je vzatá z jejich logo.svg, ne odečtená z obrázku. */
    --sj-blue: #003dff;
    --sj-blue-dark: #0031cc;
    --sj-blue-soft: #e8efff;

    --sj-ink: #141a2b;
    --sj-body: #3c4457;
    --sj-muted: #6e7891;
    --sj-faint: #9aa2b6;

    --sj-line: #e8eaee;
    --sj-line-soft: #f1f3f6;
    --sj-hover: #f5f7fa;
    --sj-surface: #ffffff;

    --sj-danger: #dc2626;
    --sj-danger-soft: #fee2e2;
    --sj-warn: #b45309;
    --sj-warn-soft: #fff7ed;
    --sj-ok: #15803d;
    --sj-ok-soft: #dcfce7;

    --sj-radius: 12px;
    --sj-sidebar: 250px;

    --sj-font: 'Fellix', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Fellix hostujeme sami. Dřív se tahal z admin.startupjobs.cz, což je host,
   který má zmizet — a s ním by se rozpadla typografie. Existuje jen ve 400
   a 700; nikde v tomhle souboru proto není 500 ani 600, jinak by si prohlížeč
   řez dopočítal a písmo by se rozešlo se zbytkem adminu. */
@font-face {
    font-family: 'Fellix';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Fellix-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Fellix';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Fellix-Bold.woff2') format('woff2');
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sj-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--sj-body);
    background: var(--sj-surface);
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    color: var(--sj-blue-dark);
    text-decoration: underline;
}

h1, h2, h3 {
    color: var(--sj-ink);
    font-weight: 700;
    margin: 0;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
    background: var(--sj-line-soft);
    border-radius: 4px;
    padding: 1px 5px;
}

/* ==========================================================================
   Rozvržení: levý sloupec + obsah
   ========================================================================== */

.app {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar {
    width: var(--sj-sidebar);
    flex: 0 0 var(--sj-sidebar);
    border-right: 1px solid var(--sj-line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 22px 20px 18px;
}

/* Skutečné logo ze superadministrace — samé cesty, takže na fontu nezávisí. */
.sidebar-brand-logo {
    display: block;
    height: 20px;
    width: auto;
}

.sidebar-brand-tool {
    font-size: 11px;
    font-weight: 400;
    color: var(--sj-muted);
    border: 1px solid var(--sj-line);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: 0.02em;
}

/* Popisek pole je jen pro čtečky — v adminu ho hledací pole taky nemá,
   význam nese ikona. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sidebar-scope {
    padding: 0 12px 16px;
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 12px 16px;
}

.nav-group + .nav-group {
    margin-top: 6px;
}

/* Navigace v adminu je celá v základním řezu — bold nemá ani skupina, ani
   aktivní položka. Aktivní se pozná jen šedým podkladem. */
.nav-group-head {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px 9px 8px;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    color: var(--sj-ink);
    background: none;
    border: 0;
    text-align: left;
}

.nav-group-icon {
    width: 17px;
    height: 17px;
    color: var(--sj-body);
    flex: 0 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-group-label { flex: 1 1 auto; }

.nav-group-chevron {
    flex: 0 0 auto;
    color: var(--sj-faint);
    display: inline-flex;
}

/* Svislá linka spojující položky skupiny — v adminu vede pod ikonou. */
.nav-list {
    list-style: none;
    margin: 0 0 0 20px;
    padding: 0;
    border-left: 1px solid var(--sj-line);
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px 8px 16px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    color: var(--sj-ink);
    text-align: left;
    cursor: pointer;
}

.nav-item:hover {
    background: var(--sj-hover);
    color: var(--sj-ink);
    text-decoration: none;
}

.nav-item.is-active {
    background: var(--sj-line-soft);
}

.nav-badge {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    background: var(--sj-blue);
    color: #fff;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.nav-badge.is-alert {
    background: var(--sj-danger);
    color: #fff;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--sj-line);
}

.sidebar-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sj-blue-soft);
    color: var(--sj-blue);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-user-name {
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-user-name strong {
    display: block;
    color: var(--sj-ink);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-name span {
    display: block;
    color: var(--sj-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout {
    flex: 0 0 auto;
    color: var(--sj-faint);
    font-size: 16px;
    line-height: 1;
    padding: 4px;
}

.sidebar-logout:hover {
    color: var(--sj-ink);
    text-decoration: none;
}

/* -- obsah --------------------------------------------------------------- */

.main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 26px 28px 60px;
}

.main-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.main-head h1 {
    font-size: 21px;
    letter-spacing: -0.01em;
}

.main-head-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--sj-muted);
}

.main-refresh {
    appearance: none;
    background: none;
    border: 1px solid var(--sj-line);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    color: var(--sj-muted);
    cursor: pointer;
    line-height: 1;
}

.main-refresh:hover {
    color: var(--sj-ink);
    border-color: var(--sj-muted);
}

.main-back {
    font-size: 12px;
    color: var(--sj-muted);
    display: inline-block;
    margin-bottom: 6px;
}

/* ==========================================================================
   Karty a mřížka
   ========================================================================== */

.card,
.section-card,
.hero-card {
    background: var(--sj-surface);
    border: 1px solid var(--sj-line);
    border-radius: var(--sj-radius);
    padding: 18px 20px;
}

.card {
    padding: 0;
    overflow: hidden;
}

.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--sj-line);
}

.card-head h2 {
    font-size: 15px;
}

.card-head-meta {
    font-size: 12px;
    color: var(--sj-muted);
}

.card-body {
    padding: 16px 18px;
}

.section-card + .section-card,
.card + .card {
    margin-top: 18px;
}

.section-card h2,
.hero-card h2 {
    font-size: 15px;
    margin-bottom: 10px;
}

/* Obsah detailní stránky je v jednom sloupci — dva sloupce jsou vzor dashboardu
   a v užším obsahu vedle pravého pruhu mačkají tabulky tak, že se lámou datumy
   i názvy kanálů. */
.content-grid,
.top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.content-grid > .talk-card-wide,
.content-grid > .compare-card {
    grid-column: 1 / -1;
}

/* ==========================================================================
   Tabulky
   ========================================================================== */

.simple-table,
.portfolio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.simple-table th,
.portfolio-table th {
    text-align: left;
    font-weight: 400;
    font-size: 12px;
    color: var(--sj-muted);
    padding: 11px 18px;
    background: #fafbfc;
    border-bottom: 1px solid var(--sj-line);
    white-space: nowrap;
}

/* V sekcích briefu tabulka nemá vlastní rámeček, takže by podbarvená hlavička
   plavala v prázdnu. */
.section-card .simple-table th {
    background: none;
}

.simple-table td,
.portfolio-table td {
    padding: 11px 18px;
    border-bottom: 1px solid var(--sj-line-soft);
    color: var(--sj-body);
    vertical-align: middle;
}

.simple-table tbody tr:last-child td,
.portfolio-table tbody tr:last-child td {
    border-bottom: 0;
}

.simple-table tbody tr:hover,
.portfolio-table tbody tr:hover {
    background: var(--sj-hover);
}

/* Sekce briefu nejsou v .card, takže tam tabulka nemá odsazení od okraje. */
.section-card .simple-table th,
.section-card .simple-table td {
    padding-left: 0;
    padding-right: 12px;
}

.portfolio-table th.is-sortable {
    cursor: pointer;
    user-select: none;
}

.portfolio-table th.is-sortable:hover {
    color: var(--sj-ink);
}

.portfolio-table th[data-direction]::after {
    content: '↑';
    margin-left: 5px;
    font-size: 10px;
    color: var(--sj-blue);
}

.portfolio-table th[data-direction="desc"]::after {
    content: '↓';
}

/* Firma, která nabírá mimo nás — nejzajímavější řádek v tabulce. */
.portfolio-row-signal {
    background: var(--sj-warn-soft);
}

.portfolio-row-signal:hover {
    background: #fdf0dd;
}

.simple-table-detail {
    margin-top: 8px;
}

/* ==========================================================================
   Odznaky, stavy, drobnosti
   ========================================================================== */

.portfolio-badge,
.talk-source-badge,
.type-badge {
    display: inline-block;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    background: var(--sj-line-soft);
    color: var(--sj-muted);
    white-space: nowrap;
}

.type-badge {
    background: var(--sj-blue-soft);
    color: var(--sj-blue);
    font-size: 12px;
    padding: 4px 10px;
}

.portfolio-badge-hot { background: var(--sj-danger-soft); color: #b91c1c; }
.portfolio-badge-segment { background: var(--sj-blue-soft); color: var(--sj-blue); }
.portfolio-badge-approval { background: #fef3c7; color: #92400e; }
.portfolio-badge-payment { background: #e0f2fe; color: #075985; }
.portfolio-badge-purchase { background: var(--sj-ok-soft); color: var(--sj-ok); }
.portfolio-badge-prepaid { background: #ede9fe; color: #5b21b6; }
.portfolio-badge-expired { background: var(--sj-line-soft); color: var(--sj-muted); }
.portfolio-badge-inactive { background: var(--sj-danger-soft); color: #b91c1c; }

.portfolio-muted { color: var(--sj-faint); }
.portfolio-warning { color: var(--sj-warn); font-weight: 700; }

.portfolio-goal { font-weight: 700; }
.portfolio-goal.is-met { color: var(--sj-ok); }
.portfolio-goal.is-missed { color: var(--sj-warn); }

.portfolio-signal {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    font-weight: 700;
    color: var(--sj-warn);
    border-bottom: 1px dotted currentColor;
}

.portfolio-signal:hover {
    text-decoration: none;
    color: var(--sj-ink);
}

.portfolio-links { white-space: nowrap; }
.portfolio-link-small,
.portfolio-brief-link { font-size: 12px; }
.portfolio-link-small + .portfolio-link-small { margin-left: 8px; }

.portfolio-empty,
.portfolio-loading {
    color: var(--sj-muted);
    padding: 22px 18px;
    margin: 0;
}

.status-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 13px;
}

.status-line strong {
    color: var(--sj-ink);
    font-weight: 700;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sj-faint);
    flex: 0 0 8px;
}

.status-dot.yes { background: var(--sj-ok); }
.status-dot.no { background: var(--sj-danger); }

.detail-box {
    margin-top: 10px;
    font-size: 13px;
}

.detail-box summary {
    cursor: pointer;
    color: var(--sj-blue);
}

.simple-list {
    margin: 0;
    padding-left: 18px;
}

.simple-list li { margin-bottom: 5px; }

/* ==========================================================================
   Panely portfolia
   ========================================================================== */

.portfolio-panel { display: none; }
.portfolio-panel.is-active { display: block; }

/* -- formulář výběru obchodníka ------------------------------------------ */

/* Tvarem odpovídá hledacímu poli v adminu: ikona vlevo, šipka vpravo. */
.portfolio-select {
    width: 100%;
    appearance: none;
    font: inherit;
    font-size: 15px;
    color: var(--sj-ink);
    background-color: var(--sj-surface);
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    padding: 8px 30px 8px 34px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='6' r='3' stroke='%23141a2b' stroke-width='1.4' fill='none'/%3E%3Cpath d='M3.5 15c0-2.8 2.5-4.4 5.5-4.4s5.5 1.6 5.5 4.4' stroke='%23141a2b' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236e7891' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: left 10px center, right 10px center;
    background-size: 17px, 12px;
}

.portfolio-select:focus {
    outline: 0;
    border-color: var(--sj-blue);
    box-shadow: 0 0 0 3px var(--sj-blue-soft);
}

/* ==========================================================================
   Pozice mimo StartupJobs
   ========================================================================== */

.portfolio-external-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    padding-right: 28px;
}

.portfolio-external-source + .portfolio-external-source {
    margin-top: 18px;
    border-top: 1px solid var(--sj-line-soft);
    padding-top: 16px;
}

.portfolio-external-source h3 {
    font-size: 13px;
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.portfolio-external-freshness {
    font-size: 12px;
    margin: 0 0 8px;
}

.portfolio-external-jobs {
    margin: 0;
    padding-left: 18px;
}

.portfolio-external-jobs li {
    margin-bottom: 5px;
    font-size: 13px;
}

.portfolio-external-jobs .portfolio-muted {
    font-size: 12px;
    margin-left: 6px;
}

/* ==========================================================================
   Modál
   ========================================================================== */

.portfolio-dialog {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 26, 43, 0.45);
    z-index: 50;
    padding: 32px 24px;
    overflow-y: auto;
}

.portfolio-dialog.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.portfolio-dialog-inner {
    background: var(--sj-surface);
    border-radius: var(--sj-radius);
    padding: 22px 24px;
    max-width: 620px;
    width: 100%;
    position: relative;
    box-shadow: 0 18px 40px rgba(20, 26, 43, 0.18);
}

.portfolio-dialog-close {
    position: absolute;
    top: 10px;
    right: 12px;
    appearance: none;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--sj-faint);
    cursor: pointer;
}

.portfolio-dialog-close:hover { color: var(--sj-ink); }

/* ==========================================================================
   Přihlášení — bez levého sloupce, karta na střed
   ========================================================================== */

.auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #fafbfc;
}

.login-card {
    max-width: 380px;
    width: 100%;
    padding: 28px;
}

.login-card .sidebar-brand {
    padding: 0 0 16px;
}

.login-card h1 {
    font-size: 19px;
    margin-bottom: 8px;
}

.login-copy {
    color: var(--sj-muted);
    font-size: 13px;
    margin: 0 0 18px;
}

.login-error {
    background: var(--sj-danger-soft);
    color: #991b1b;
    border-radius: 7px;
    padding: 10px 12px;
    font-size: 13px;
    margin: 0 0 14px;
}

.login-form { margin: 0; }

.login-label {
    display: block;
    font-size: 12px;
    color: var(--sj-ink);
    font-weight: 700;
    margin-bottom: 5px;
}

.login-input {
    width: 100%;
    font: inherit;
    font-size: 14px;
    color: var(--sj-ink);
    border: 1px solid var(--sj-line);
    border-radius: 7px;
    padding: 9px 11px;
    margin-bottom: 14px;
}

.login-input:focus {
    outline: 0;
    border-color: var(--sj-blue);
    box-shadow: 0 0 0 3px var(--sj-blue-soft);
}

.login-btn {
    width: 100%;
    appearance: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--sj-blue);
    border: 0;
    border-radius: 7px;
    padding: 10px 14px;
    cursor: pointer;
}

.login-btn:hover { background: var(--sj-blue-dark); }

/* ==========================================================================
   Call brief
   ========================================================================== */

.hero-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.hero-card h1 {
    font-size: 19px;
    margin-bottom: 6px;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 13px;
    color: var(--sj-muted);
}

.hero-meta strong {
    color: var(--sj-body);
    font-weight: 700;
}

.why-now {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--sj-blue-soft);
    border-left: 3px solid var(--sj-blue);
    border-radius: 0 7px 7px 0;
    color: var(--sj-ink);
    font-size: 13px;
}

.fact-card { min-width: 0; }

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

.fact-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 10px;
    font-size: 13px;
    align-items: baseline;
}

.fact-label { color: var(--sj-muted); }

.opportunity-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.opportunity-type {
    background: var(--sj-blue);
    color: #fff;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

.opportunity-confidence {
    color: var(--sj-ok);
    font-size: 12px;
    font-weight: 700;
}

.opportunity-card p {
    margin: 0;
    font-size: 13px;
}

.talk-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.talk-card {
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    padding: 14px;
}

.talk-title {
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--sj-ink);
    font-size: 13px;
}

.talk-say {
    margin: 8px 0;
    font-size: 13px;
    color: var(--sj-ink);
}

.talk-why,
.talk-call-reference {
    margin: 0;
    font-size: 12px;
    color: var(--sj-muted);
}

.talk-why strong { color: var(--sj-body); font-weight: 700; }

.talk-call-reference { margin-top: 8px; }

.talk-call-reference-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sj-faint);
}

.call-summary-kicker {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sj-faint);
    margin-bottom: 8px;
}

.call-summary-list { font-size: 13px; }

.compare-table td:not(:first-child),
.compare-table th:not(:first-child) {
    text-align: right;
}

/* -- načítací stav ------------------------------------------------------- */

.profile-loader {
    text-align: center;
    padding: 48px 24px;
}

.up-mark {
    display: inline-block;
    background: var(--sj-blue-soft);
    color: var(--sj-blue);
    font-weight: 700;
    font-size: 20px;
    border-radius: 8px;
    padding: 10px 18px;
    margin-bottom: 14px;
}

.profile-loader h2 { margin-bottom: 6px; }

.profile-loader p {
    color: var(--sj-muted);
    font-size: 13px;
    margin: 0;
}

.fetch-error h2 { margin-bottom: 6px; }
.fetch-error p { color: var(--sj-muted); margin: 0; font-size: 13px; }

/* ==========================================================================
   Menší obrazovky
   ========================================================================== */

@media (max-width: 1100px) {
    .content-grid,
    .top-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .app { flex-direction: column; }

    .sidebar {
        width: auto;
        flex: 0 0 auto;
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--sj-line);
    }

    .sidebar-nav { max-height: 320px; }

    .main { padding: 20px 16px 40px; }

    /* Tabulky se na mobilu posouvají vodorovně, stránka ne. */
    .card,
    .portfolio-panel { overflow-x: auto; }

    .portfolio-table { min-width: 620px; }
}


/* ==========================================================================
   Detailní stránka: obsah + pravý pruh
   --------------------------------------------------------------------------
   Stejné rozvržení jako detail nabídky v superadministraci — vlevo obsah,
   vpravo úzký pruh s akcemi a metadaty.
   ========================================================================== */

.detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--sj-muted);
    font-size: 17px;
    line-height: 1;
    flex: 0 0 28px;
}

.detail-back:hover {
    background: var(--sj-hover);
    color: var(--sj-ink);
    text-decoration: none;
}

.detail-head h1 {
    font-size: 17px;
    margin: 0;
}

.detail-head-link {
    font-size: 13px;
    color: var(--sj-faint);
}

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

.detail-rail {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 26px;
}

/* -- seznam metadat ------------------------------------------------------ */

.meta-list {
    display: grid;
    gap: 14px;
}

.meta-item {
    display: grid;
    gap: 2px;
}

.meta-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--sj-ink);
}

.meta-value {
    font-size: 13px;
    color: var(--sj-body);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* -- tlačítka ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    appearance: none;
    font: inherit;
    font-size: 13px;
    color: var(--sj-ink);
    background: var(--sj-surface);
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    padding: 9px 12px;
    cursor: pointer;
    text-align: center;
}

.btn:hover {
    background: var(--sj-hover);
    border-color: #d8dce4;
    color: var(--sj-ink);
    text-decoration: none;
}

.btn-primary {
    background: var(--sj-blue);
    border-color: var(--sj-blue);
    color: #fff;
    font-weight: 700;
}

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

.btn-stack {
    display: grid;
    gap: 9px;
}

.btn-icon {
    color: var(--sj-faint);
    flex: 0 0 auto;
    font-size: 14px;
}

.btn-primary .btn-icon { color: rgba(255, 255, 255, 0.85); }

/* -- oznámení ------------------------------------------------------------ */

.notice {
    display: flex;
    gap: 10px;
    background: #eff6ff;
    border-radius: 8px;
    padding: 13px 15px;
    font-size: 13px;
    color: #1e40af;
    margin: 0 0 16px;
}

.notice-icon { flex: 0 0 auto; }
.notice strong { display: block; font-weight: 700; margin-bottom: 2px; }
.notice p { margin: 0; color: #1d4ed8; }

.notice-warning { background: var(--sj-warn-soft); color: #92400e; }
.notice-warning p { color: #b45309; }

/* -- stavové pilulky ----------------------------------------------------- */

.pill {
    display: inline-block;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 700;
    background: var(--sj-line-soft);
    color: var(--sj-muted);
    white-space: nowrap;
}

.pill-pending { background: #fef3c7; color: #92400e; }
.pill-ok { background: var(--sj-ok-soft); color: var(--sj-ok); }
.pill-info { background: var(--sj-blue-soft); color: var(--sj-blue); }
.pill-danger { background: var(--sj-danger-soft); color: #b91c1c; }

@media (max-width: 1100px) {
    .detail-layout { grid-template-columns: minmax(0, 1fr); }
    .detail-rail { position: static; }
}


/* ==========================================================================
   Načítání
   --------------------------------------------------------------------------
   Stránka se posílá jako kostra a data dotahuje z prohlížeče. Bez zástupného
   obsahu by přepnutí obchodníka vypadalo jako prázdná appka.
   ========================================================================== */

.skeleton {
    padding: 14px 18px 18px;
}

.skeleton-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sj-line-soft);
}

.skeleton-row:last-child { border-bottom: 0; }

.skeleton-bar {
    display: block;
    height: 10px;
    border-radius: 4px;
    background: var(--sj-line-soft);
    animation: sj-pulse 1.4s ease-in-out infinite;
}

/* Sloupce se rozsvěcují s malým odstupem, ať to působí jako postupné plnění
   a ne jako blikající blok. */
.skeleton-row:nth-child(2) .skeleton-bar { animation-delay: 0.08s; }
.skeleton-row:nth-child(3) .skeleton-bar { animation-delay: 0.16s; }
.skeleton-row:nth-child(4) .skeleton-bar { animation-delay: 0.24s; }
.skeleton-row:nth-child(5) .skeleton-bar { animation-delay: 0.32s; }

/* Zástupce odznaku — drží místo, dokud nedorazí počty. */
.nav-badge.is-loading {
    background: var(--sj-line-soft);
    color: var(--sj-faint);
    animation: sj-pulse 1.4s ease-in-out infinite;
}

@keyframes sj-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Kdo si vypnul animace, dostane statické zástupce. */
@media (prefers-reduced-motion: reduce) {
    .skeleton-bar,
    .nav-badge.is-loading {
        animation: none;
    }
}


/* ==========================================================================
   Tooltip
   --------------------------------------------------------------------------
   Nativní title má prodlevu okolo sekundy a nejde ovlivnit. V tabulkách je
   přitom v tooltipu schované celé datum nebo důvod stavu, takže se na informaci
   čekalo. Tenhle se objeví hned.
   ========================================================================== */

.tooltip {
    position: fixed;
    z-index: 200;
    max-width: 260px;
    padding: 6px 9px;
    border-radius: 6px;
    background: var(--sj-ink);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 18px rgba(20, 26, 43, 0.22);
}

.tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Špička ukazuje na prvek; při překlopení pod něj se obrátí. */
.tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: var(--sj-ink);
    top: 100%;
}

.tooltip.is-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--sj-ink);
}

[data-tooltip] { cursor: help; }
a[data-tooltip],
button[data-tooltip] { cursor: pointer; }


/* ==========================================================================
   Filtr v panelu
   ========================================================================== */

.panel-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--sj-line);
}

.filter-input {
    flex: 0 1 280px;
    font: inherit;
    font-size: 14px;
    color: var(--sj-ink);
    background-color: var(--sj-surface);
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    padding: 7px 11px 7px 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='8' cy='8' r='5' stroke='%236e7891' stroke-width='1.5' fill='none'/%3E%3Cpath d='M12 12l3.5 3.5' stroke='%236e7891' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 9px center;
    background-size: 16px;
}

.filter-input:focus {
    outline: 0;
    border-color: var(--sj-blue);
    box-shadow: 0 0 0 3px var(--sj-blue-soft);
}

.filter-count {
    font-size: 12px;
    color: var(--sj-muted);
}

.portfolio-badge-extended { background: #fef3c7; color: #92400e; }


/* Platnost prepaidu: rozsah na prvním řádku, délka pod ním. Dokud se ladí,
   ze které hodnoty se prodloužení odvozuje, je potřeba vidět obojí. */
.portfolio-validity {
    display: block;
    white-space: nowrap;
}

.portfolio-validity-span {
    display: block;
    font-size: 11px;
    color: var(--sj-muted);
    margin-top: 2px;
}


/* Souhrn nad tabulkou panelu. Hlavička karty nese počet řádků, tady je to,
   co z nich plyne — u končících produktů počet kusů, ne dávek. */
.panel-summary {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-bottom: 1px solid var(--sj-line);
    font-size: 13px;
    color: var(--sj-muted);
}

.panel-summary strong {
    color: var(--sj-ink);
    font-weight: 700;
}

.simple-table tfoot td,
.portfolio-table tfoot td {
    padding: 11px 18px;
    border-top: 1px solid var(--sj-line);
    color: var(--sj-muted);
    font-size: 13px;
}

.portfolio-table tfoot strong { color: var(--sj-ink); }

.panel-summary-sep { color: var(--sj-faint); }

/* Třída .muted se v šablonách briefu používala od začátku, ale pravidlo k ní
   nikdy nevzniklo, takže se vykreslovala jako běžný text. */
.muted {
    color: var(--sj-muted);
}

.section-foot {
    margin: 14px 0 0;
    font-size: 13px;
}

/* Seznam firemních uživatelů dorazí dřív než brief. Než přijde obsah, stojí
   sám — drží šířku hlavního sloupce, aby po přestěhování nepřeskočil. */
#brief-users:empty {
    display: none;
}

#brief-users {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
}

#brief-users > * {
    grid-column: 1;
}

@media (max-width: 1100px) {
    #brief-users { grid-template-columns: minmax(0, 1fr); }
}

/* Záloha pro odstup nad kartou uživatelů. Normálně ji JS vloží do
   .content-grid, kde platí stejná pravidla jako na sousedy. Kdyby grid
   v obsahu nebyl, skončí karta za obalovým divem — tam .section-card +
   .section-card nesedne (předchozí sourozenec není karta) a bez tohohle by
   sedla nalepená na předchozí. */
#brief-users-card {
    margin-top: 18px;
}

/* Počet vedle nadpisu karty — bez dělicí linky, kterou by přinesl .card-head. */
.section-card h2 .section-card-count {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sj-muted);
}

/* ==========================================================================
   Denní leady
   --------------------------------------------------------------------------
   Jediná část appky postavená na kartách, ne na tabulce: obchodníci leady
   odbavují z telefonu při hovoru. Zbytek portfolia zůstává tabulkový.
   ========================================================================== */

.pill-muted { background: var(--sj-line-soft); color: var(--sj-muted); }

.lead-badge-ok { background: var(--sj-ok-soft); color: var(--sj-ok); }
.lead-badge-updated { background: var(--sj-blue-soft); color: var(--sj-blue); }
.lead-badge-unverified { background: var(--sj-line-soft); color: var(--sj-muted); }

.lead-list-reaktivace { background: #ede9fe; color: #5b21b6; }
.lead-list-akvizice-sj { background: var(--sj-blue-soft); color: var(--sj-blue); }
.lead-list-akvizice-up { background: #dcfce7; color: #166534; }
.lead-list-jiny { background: var(--sj-line-soft); color: var(--sj-muted); }

.lead-cards {
    display: grid;
    /* Na širokém okně se karty vejdou vedle sebe — deset leadů pod sebou
       znamenalo scrollovat přes celou obrazovku na každý další. */
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 12px;
    padding: 14px 18px 18px;
}

.lead-card {
    border: 1px solid var(--sj-line);
    border-radius: var(--sj-radius);
    padding: 12px 14px;
    background: var(--sj-surface);
}

.lead-card-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Zpracovaný lead už nemá tahat pozornost, ale musí zůstat čitelný. */
.lead-card.is-done { background: var(--sj-line-soft); }
.lead-card.is-done .lead-card-title a { color: var(--sj-body); }

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

.lead-card-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    min-width: 0;
}

.lead-card-tags { margin-top: 8px; }

.lead-card-reason {
    margin: 8px 0 6px;
    color: var(--sj-body);
    font-size: 13px;
}

.lead-card-meta {
    font-size: 12px;
    color: var(--sj-muted);
}

.lead-card-hints { color: var(--sj-body); }

.lead-card-rank {
    flex: 0 0 auto;
    color: var(--sj-faint);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* -- Detail ------------------------------------------------------------- */

.lead-subhead {
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sj-ink);
}

.lead-inline-head {
    display: inline;
    font-size: 15px;
}

.lead-list-plain {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--sj-body);
}

.lead-list-plain li { margin-bottom: 6px; }

.lead-links a { margin-right: 12px; }

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

.lead-contacts > li {
    border: 1px solid var(--sj-line);
    border-radius: 10px;
    padding: 10px 12px;
}

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

.lead-contact-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 13px;
}

.lead-contact-note { margin-top: 6px; font-size: 12px; }

.lead-copy {
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px solid var(--sj-line);
    border-radius: 5px;
    background: var(--sj-surface);
    color: var(--sj-muted);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.lead-copy:hover { border-color: var(--sj-blue); color: var(--sj-blue); }

.lead-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.lead-timeline > li {
    padding: 8px 0;
    border-bottom: 1px solid var(--sj-line-soft);
}

.lead-timeline > li:last-child { border-bottom: 0; }

.lead-timeline-when {
    display: inline-block;
    min-width: 130px;
    color: var(--sj-muted);
    font-variant-numeric: tabular-nums;
}

.lead-disclaimer {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--sj-faint);
}

/* -- Akční lišta --------------------------------------------------------- */

/* Lišta je panel, ne řádek tlačítek na bílém. Bez vlastní plochy splývala
   s obsahem natolik, že si jí šlo nevšimnout. */
.lead-actions {
    position: sticky;
    bottom: 14px;
    z-index: 40;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 12px;
    border: 1px solid var(--sj-line);
    border-radius: var(--sj-radius);
    background: var(--sj-surface);
    box-shadow: 0 6px 20px rgba(20, 26, 43, 0.10);
}

.lead-actions-label {
    font-size: 12px;
    color: var(--sj-muted);
}

/* Stavy čte oko jako jeden ovladač, ne jako šest tlačítek. */
.lead-status-group {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--sj-line);
    border-radius: 9px;
    overflow: hidden;
}

.lead-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 0;
    border-right: 1px solid var(--sj-line);
    background: var(--sj-surface);
    font: inherit;
    font-size: 13px;
    color: var(--sj-body);
    cursor: pointer;
    white-space: nowrap;
}

.lead-status:last-child { border-right: 0; }

.lead-status:hover { background: var(--sj-hover); color: var(--sj-ink); }

/* Tečka v barvě stavu — stejná řeč jako štítek nahoře na stránce. */
.lead-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sj-faint);
    flex: 0 0 auto;
}

.lead-status[data-stav="zajem"]::before { background: var(--sj-ok); }
.lead-status[data-stav="odlozeno"]::before { background: #d97706; }
.lead-status[data-stav="nedovolano"]::before { background: var(--sj-blue); }
.lead-status[data-stav="spatny_kontakt"]::before { background: #d97706; }

/* Nastavený stav je vidět i v liště, ať je jasné, co už padlo. */
.lead-status.is-active {
    background: var(--sj-blue-soft);
    color: var(--sj-blue);
    font-weight: 700;
}

.lead-actions-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* .btn je v appce celošířkové tlačítko do pravého pruhu (display:flex,
   width:100%). V liště musí být vedle sebe, takže se šířka vrací na obsah. */
.lead-actions .btn,
.lead-more > summary {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
}

/* Plné tlačítko pro ten jeden krok, který je zrovna na řadě. */
.btn-primary {
    background: var(--sj-blue);
    border-color: var(--sj-blue);
    color: #fff;
}

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

.btn-ghost {
    background: var(--sj-surface);
    color: var(--sj-body);
    border: 1px solid var(--sj-line);
}

.btn-ghost:hover { border-color: var(--sj-blue); color: var(--sj-blue); }

.lead-action.is-busy { opacity: 0.6; cursor: progress; }

/* -- Dialog a hlášky ----------------------------------------------------- */

.lead-dialog {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(20, 26, 43, 0.45);
    z-index: 60;
}

.lead-dialog[hidden] { display: none; }

.lead-dialog-box {
    width: 100%;
    max-width: 420px;
    background: var(--sj-surface);
    border-radius: var(--sj-radius);
    padding: 18px 20px;
}

.lead-dialog-box h2 { margin: 0 0 14px; font-size: 15px; }

.lead-field {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
}

.lead-field[hidden] { display: none; }

.lead-field > span {
    display: block;
    margin-bottom: 4px;
    color: var(--sj-muted);
    font-size: 12px;
}

.lead-field input,
.lead-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: var(--sj-ink);
}

.lead-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.lead-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: calc(100vw - 36px);
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--sj-ink);
    color: #fff;
    font-size: 13px;
    z-index: 70;
}

@media (max-width: 860px) {
    .lead-cards { padding: 12px; }

    .lead-timeline-when { display: block; min-width: 0; }
}

@media (max-width: 640px) {
    /* Lišta drží u spodní hrany, aby byla při hovoru po ruce. Nahoře hlavní
       akce přes celou šířku, pod ní stavy posuvné do strany — sedm tlačítek
       vedle sebe se na displej nevejde a na výšku by zabralo půl obrazovky. */
    .lead-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0;
        padding: 10px 12px;
        border: 0;
        border-top: 1px solid var(--sj-line);
        border-radius: 0;
        box-shadow: 0 -4px 16px rgba(20, 26, 43, 0.10);
    }

    .lead-actions-label { display: none; }

    .lead-actions-primary {
        order: -1;
        margin-left: 0;
        /* Bez min-width: 0 se řádek roztáhne podle obsahu a vyteče z lišty
           místo toho, aby se tlačítka o místo podělila. */
        min-width: 0;
    }

    .lead-actions-primary .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .lead-status-group {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lead-status { flex: 0 0 auto; }

    /* Místo pod obsahem, ať poslední karta nezmizí pod lištou. */
    #lead-detail { padding-bottom: 130px; }
}

/* Sbalené menu na telefonu. Na širokém okně se nesbaluje — tam je sloupec
   vedle obsahu a skrývat ho nemá smysl. */
.nav-group.is-collapsed .nav-list { display: none; }

.nav-group-head { cursor: pointer; }

.nav-group-chevron { transition: transform 0.15s ease; }

.nav-group.is-collapsed .nav-group-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .nav-group-chevron { transition: none; }
}

/* Dialog Do Pipedrive: výběr osoby a follow-up. */
.lead-radio,
.lead-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    cursor: pointer;
}

.lead-check { margin-bottom: 12px; }

.lead-radio input,
.lead-check input {
    margin-top: 2px;
    flex: 0 0 auto;
}

.lead-field fieldset,
fieldset.lead-field {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
}

fieldset.lead-field legend {
    padding: 0;
    margin-bottom: 6px;
    color: var(--sj-muted);
    font-size: 12px;
}

.lead-field-row {
    display: flex;
    gap: 10px;
}

.lead-field-row .lead-field { flex: 1 1 0; }

.lead-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: var(--sj-ink);
    background: var(--sj-surface);
}

/* Dialog musí jít prorolovat — na telefonu se s follow-upem nevejde. */
.lead-dialog-box {
    max-height: calc(100vh - 36px);
    overflow-y: auto;
}

/* -- Detail leadu: hustota ----------------------------------------------- */

/* Popisek a hodnota na jednom řádku. Přes meta-list, kde je popisek nad
   hodnotou, bral jeden fakt šedesát pixelů — „Vztah s námi" sám 485. */
.lead-facts {
    margin: 0;
    font-size: 12.5px;
}

.lead-facts > div {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--sj-line-soft);
}

.lead-facts > div:last-child { border-bottom: 0; }

.lead-facts dt {
    color: var(--sj-muted);
    white-space: nowrap;
}

.lead-facts dd {
    margin: 0;
    color: var(--sj-ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.lead-facts-wide dd { text-align: left; }

/* Štítky nad obsahem místo vlastní karty. */
.lead-tagstrip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.lead-tagstrip-meta {
    font-size: 12px;
    color: var(--sj-muted);
}

.lead-firm-note {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--sj-body);
}

.lead-signals,
.lead-links { margin: 10px 0 0; }

.lead-links a { margin-right: 10px; font-size: 12.5px; }

.lead-arguments { margin-top: 8px; }

.lead-tight { margin: 0 0 10px; font-size: 12.5px; }

/* Seznamy inzerátů vedle sebe, dokud je na ně místo. */
.lead-joblists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px 18px;
}

.lead-joblists .lead-subhead { margin-top: 6px; }

/* Historie na jeden řádek na událost. */
.lead-timeline > li { padding: 5px 0; }

.detail-rail .section-card { padding: 14px 16px; }

.detail-rail .section-card h2 { margin-bottom: 8px; }

.detail-rail summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--sj-ink);
}

/* Dlouhé texty na tři řádky, zbytek po kliknutí. Komentář modelu i popis firmy
   můžou mít několik vět a v kartě by rozhodily celou mřížku. */
.lead-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

.lead-clamp.is-open {
    display: block;
    cursor: auto;
}

/* Přepínač dne nad seznamem. */
.lead-daybar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--sj-line);
    font-size: 13px;
}

.lead-dayjump,
.lead-daytoday {
    color: var(--sj-muted);
    text-decoration: none;
}

.lead-dayjump:hover,
.lead-daytoday:hover { color: var(--sj-blue); }

.lead-daytoday { margin-left: auto; }

.lead-refresh { padding: 0 18px 18px; }

.lead-refresh .btn { width: auto; }

/* Skryté menu u akční lišty. */
.lead-more {
    position: relative;
    flex: 0 0 auto;
}

.lead-more > summary {
    list-style: none;
    padding: 9px 14px;
}

.lead-more > summary::-webkit-details-marker { display: none; }

.lead-more-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--sj-line);
    border-radius: 10px;
    background: var(--sj-surface);
    box-shadow: 0 8px 24px rgba(20, 26, 43, 0.12);
    z-index: 55;
}

.lead-more-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--sj-ink);
    text-align: left;
    cursor: pointer;
}

.lead-more-item:hover { background: var(--sj-hover); }