/* =========================================================================
   doklik.cz — site-wide styles
   Brand: monochromatic blue (#2563EB primary, #1D4ED8 hover).
   Typography: Inter (loaded in _Layout.cshtml).
   Radii: 8–10px. Soft layered shadows.
   ========================================================================= */

:root {
    --doklik-primary: #2563EB;
    --doklik-primary-hover: #1D4ED8;
    --doklik-bg: #f5f7fb;
    --doklik-card: #ffffff;
    --doklik-border: #e5e7eb;
    --doklik-text: #1f2937;
    --doklik-muted: #586474;           /* darkened from #6b7280 for AA contrast (~6:1 on white) */
    --doklik-danger: #dc2626;          /* red-600: harmonizes with primary blue */
    --doklik-danger-soft: #fef2f2;
    --doklik-success-bg: #dcfce7;
    --doklik-success-text: #166534;

    --doklik-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
    --doklik-shadow-overlay: 0 2px 6px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.08);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

.footer a.footer-link {
    color: #9ca3af;
    text-decoration: none;
}

.footer a.footer-link:hover {
    color: #d1d5db;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background: var(--doklik-bg);
    color: var(--doklik-text);
}

/* Bootstrap focus ring tweak (kept from prior site.css). */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================================================
   Header — logo + credit pill + user dropdown
   ========================================================================= */

.doklik-header {
    background: #fff;
    border-bottom: 1px solid var(--doklik-border);
    box-shadow: none;
    z-index: 1030;
}

.doklik-header-inner {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.doklik-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

    .doklik-brand:hover,
    .doklik-brand:focus {
        text-decoration: none;
        opacity: 0.85;
    }

.doklik-header-user {
    /* `gap` is in the Razor view (Bootstrap utility). Nothing else needed here. */
}

/* --- Workspace nav -------------------------------------------------------- */

.doklik-header-start {
    display: flex;
    /* Full header height, so the current-view indicator can reach the header's bottom rule. */
    align-self: stretch;
    align-items: stretch;
    gap: 28px;
    min-width: 0;
}

.doklik-nav {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.doklik-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: var(--doklik-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    /* The indicator sits on the header's own 1px rule rather than above it, so the
       current view reads as a tab of the page below and not as an underlined word. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .doklik-nav-link:hover,
    .doklik-nav-link:focus {
        color: var(--doklik-text);
        text-decoration: none;
    }

    .doklik-nav-link:focus-visible {
        outline: 2px solid var(--doklik-primary);
        outline-offset: -4px;
        border-radius: 4px;
    }

.doklik-nav-link-current {
    color: var(--doklik-text);
    font-weight: 600;
    border-bottom-color: var(--doklik-primary);
}

/* Fit only — the badge's looks stay in `.sp-badge-beta` so the nav and the page title
   never drift apart. Its 2px lift is measured against a 20px card title; against a 14px
   nav label the same 2px reads as floating. */
.doklik-nav-badge {
    vertical-align: 0;
}

/* --- Inline-SVG Phosphor icons -------------------------------------------- */

.doklik-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -2px;
    fill: currentColor;
}

.doklik-icon-xs { width: 12px; height: 12px; }
.doklik-icon-sm { width: 16px; height: 16px; }
.doklik-icon-md { width: 20px; height: 20px; }
.doklik-icon-lg { width: 24px; height: 24px; }
.doklik-icon-xl { width: 40px; height: 40px; }

/* --- Credit pill ---------------------------------------------------------- */

.doklik-credit-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--doklik-success-bg);
    color: var(--doklik-success-text);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

    .doklik-credit-pill:hover,
    .doklik-credit-pill:focus {
        background: #bbf7d0;
        color: var(--doklik-success-text);
        text-decoration: none;
    }

    .doklik-credit-pill:focus-visible {
        outline: 2px solid var(--doklik-primary);
        outline-offset: 2px;
    }

.doklik-credit-count {
    white-space: nowrap;
}

/* --- User name button + dropdown ----------------------------------------- */

.doklik-user-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--doklik-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .doklik-user-button:hover,
    .doklik-user-button:focus {
        background: #f3f4f6;
        border-color: var(--doklik-border);
    }

    .doklik-user-button:focus-visible {
        outline: 2px solid var(--doklik-primary);
        outline-offset: 2px;
    }

.doklik-user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doklik-user-caret {
    color: var(--doklik-muted);
    transition: transform 0.15s ease;
}

.doklik-user-button[aria-expanded="true"] .doklik-user-caret {
    transform: rotate(180deg);
}

.doklik-user-menu.dropdown-menu {
    min-width: 240px;
    margin-top: 8px;
    padding: 8px 0;
    border: 1px solid var(--doklik-border);
    border-radius: 10px;
    box-shadow: var(--doklik-shadow-overlay);
    background: var(--doklik-card);
}

.doklik-user-menu-header {
    padding: 8px 16px 10px;
}

.doklik-user-menu-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--doklik-text);
    line-height: 1.3;
    word-break: break-word;
}

.doklik-user-menu-email {
    font-size: 12px;
    color: var(--doklik-muted);
    margin-top: 2px;
    line-height: 1.3;
    word-break: break-all;
}

.doklik-user-menu .dropdown-divider {
    margin: 6px 0;
    border-top-color: var(--doklik-border);
}

.doklik-user-menu-item.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--doklik-text);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .doklik-user-menu-item.dropdown-item:hover,
    .doklik-user-menu-item.dropdown-item:focus {
        background: #f3f4f6;
        color: var(--doklik-text);
    }

    .doklik-user-menu-item.dropdown-item:active {
        background: #e5e7eb;
        color: var(--doklik-text);
    }

    .doklik-user-menu-item.dropdown-item .doklik-icon {
        color: var(--doklik-muted);
    }

.doklik-user-menu-item--danger.dropdown-item {
    color: var(--doklik-danger);
}

    .doklik-user-menu-item--danger.dropdown-item:hover,
    .doklik-user-menu-item--danger.dropdown-item:focus {
        background: var(--doklik-danger-soft);
        color: var(--doklik-danger);
    }

    .doklik-user-menu-item--danger.dropdown-item .doklik-icon {
        color: var(--doklik-danger);
    }

/* --- Header responsive (mobile) ------------------------------------------ */

/* The brand, nav and credit pill need ~610px; the container is 540px wide from 576px up
   to 767px, so the pill would cover the nav. Stack the nav under the logo until the
   768px container (720px) fits them again. */
@media (max-width: 767.98px) {
    /* `flex-end` keeps the nav on the header's bottom rule, where its
       current-view indicator still means what it means on desktop. */
    .doklik-header-start {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0;
    }

    .doklik-brand {
        padding-bottom: 6px;
    }

    .doklik-nav {
        gap: 0;
    }

    .doklik-nav-link {
        /* Stacked, the link no longer stretches to the header's height and has to stand it up itself. */
        padding: 6px;
        font-size: 13px;
    }
}

/* The chat link (allowlisted users only) pushes the nav past the 720px container of the
   768px breakpoint into the credit pill, so for them the nav stays stacked up to 992px. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .doklik-header-start:has(.doklik-nav-link-chat) {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0;
    }

        .doklik-header-start:has(.doklik-nav-link-chat) .doklik-brand {
            padding-bottom: 6px;
        }

        .doklik-header-start:has(.doklik-nav-link-chat) .doklik-nav {
            gap: 0;
        }

        .doklik-header-start:has(.doklik-nav-link-chat) .doklik-nav-link {
            padding: 6px;
            font-size: 13px;
        }
}

/* Below 768px the stacked nav with the chat link is still wider than what the credit pill
   leaves on 360–767px screens, so it wraps instead of running under the pill. */
@media (max-width: 767.98px) {
    .doklik-header-start:has(.doklik-nav-link-chat) .doklik-nav {
        flex-wrap: wrap;
    }
}

/* --- Agent chat ---------------------------------------------------------- */

/* User and agent text: long unbroken strings wrap instead of widening the page, and bidi
   controls stay inside the element instead of reordering what follows. */
.chat-wrap {
    overflow-wrap: anywhere;
    unicode-bidi: isolate;
}

.chat-answer > :last-child {
    margin-bottom: 0;
}

.chat-answer pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A wide table scrolls inside its box instead of widening the page. */
.chat-table {
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.chat-table table {
    border-collapse: collapse;
}

/* `anywhere` would let columns shrink to one letter; long words scroll the box instead. */
.chat-table th,
.chat-table td {
    border: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0.25rem 0.5rem;
    overflow-wrap: normal;
    vertical-align: top;
}

.chat-table th {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Below 576px the footer wraps to ~120px, twice the body's bottom margin it is absolutely
   placed in, and would cover the end of the chat. */
.chat-page {
    padding-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
    .chat-page {
        padding-bottom: 80px;
    }
}

@media (max-width: 575.98px) {
    .doklik-header-inner {
        gap: 8px;
    }

    .doklik-user-name {
        /* Drop the name on the smallest screens; the menu still opens via the caret. */
        display: none;
    }

    .doklik-user-button {
        padding: 6px 8px;
    }

    .doklik-credit-pill {
        padding: 5px 10px;
        font-size: 12px;
    }

    .doklik-user-menu.dropdown-menu {
        /* Bootstrap's dropdown-menu-end already right-aligns; cap width so it
           never blows past the viewport on 360px screens. */
        max-width: calc(100vw - 16px);
    }

    .sp-label-menu {
        /* Same overflow risk as .doklik-user-menu above: min-width: 300px alone
           can push past the edge on a 320-375px viewport. */
        max-width: calc(100vw - 16px);
    }
}

/* =========================================================================
   Shared "sp-*" tokens — moved out of overview.cshtml inline <style>.
   These are still used by overview.cshtml; billing/preferences keep their
   own copies for now (out of scope for PDF-417).
   ========================================================================= */

.sp-container {
    max-width: 1250px;
    margin: 40px auto;
    padding: 0 20px;
}

.sp-card {
    background: var(--doklik-card);
    border: 1px solid var(--doklik-border);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--doklik-shadow-card);
}

.sp-card-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 14px;
}

/* Muted caption. .sp-help stacks under its control so it keeps the gap below;
   the pager's captions sit inline on a flex row and must not. */
.sp-help,
.sp-pager-size,
.sp-pager-readout {
    color: var(--doklik-muted);
    font-size: 13px;
}

.sp-help {
    margin-top: 10px;
}

/* Callout block used on overview (e.g. "no credits" banner, batch-export errors).
   Distinct from <span asp-validation-for=""> which inline pages style as .sp-error
   with just color+font-size. Don't collapse these back into .sp-error. */
.sp-callout-error {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: var(--doklik-danger-soft);
    color: #991b1b;
    font-size: 13px;
}

.sp-callout-error-text {
    display: block;
}

.sp-callout-error-link {
    display: inline-block;
    margin-top: 8px;
    color: #991b1b;
    font-weight: 600;
    text-decoration: underline;
}

    .sp-callout-error-link:hover {
        text-decoration: none;
    }

/* Deliberately quieter than .sp-callout-error — a left-rule accent, not a filled
   panel, so this always-visible hint doesn't read as an alert. */
.sp-callout-tip {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--doklik-primary);
    background: #f0f5ff;
    color: var(--doklik-muted);
    font-size: 13px;
    line-height: 1.5;
}

.sp-callout-tip-label {
    margin-right: 2px;
    color: var(--doklik-primary-hover);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.sp-callout-tip strong {
    color: var(--doklik-primary-hover);
}

/* --- Buttons ------------------------------------------------------------- */

.sp-btn {
    border: 1px solid var(--doklik-border);
    background: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.1;
    text-decoration: none;
    font-weight: 500;
    color: var(--doklik-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .sp-btn:hover {
        background: #f8fafc;
        border-color: #d1d5db;
        color: var(--doklik-text);
    }

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

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

.sp-btn-danger {
    background: #fee2e2;
    color: #991b1b;
    border-color: transparent;
}

    .sp-btn-danger:hover {
        background: #fecaca;
        color: #991b1b;
    }

/* An unavailable link is a <span>, which :disabled does not match. */
.sp-btn:disabled,
.sp-btn.is-disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* A <span> still fires :hover, so pin the inert one back to the base look. */
.sp-btn.is-disabled:hover {
    background: #fff;
    border-color: var(--doklik-border);
}

.sp-poll-link:focus-visible,
.sp-pager a:focus-visible,
.sp-pager select:focus-visible,
.sp-pager button:focus-visible {
    outline: 2px solid var(--doklik-primary);
    outline-offset: 2px;
}

/* --- Upload card --------------------------------------------------------- */

.sp-upload {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.sp-file {
    font-size: 13px;
}

.sp-upload-box {
    border: 2px dashed #c7d2fe;
    background: #f8faff;
    padding: 35px 20px;
    text-align: center;
    border-radius: 10px;
    margin-top: 10px;
    transition: border-color 0.15s, background-color 0.15s;
}

    .sp-upload-box.sp-upload-box--drag {
        border-color: var(--doklik-primary);
        background: #dbeafe;
    }

.sp-upload-icon {
    color: var(--doklik-primary);
    margin-bottom: 12px;
}

.sp-upload-headline {
    font-size: 16px;
    font-weight: 600;
    color: var(--doklik-text);
    margin-bottom: 4px;
}

.sp-upload-caption {
    color: var(--doklik-muted);
    font-size: 13px;
    margin-bottom: 16px;
}

.sp-upload-actions {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sp-upload-filename {
    font-size: 13px;
    color: var(--doklik-muted);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hide the native file input — we trigger it from a styled button.
   Keep it focusable for keyboard users (clip rather than display:none). */
.sp-upload-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Full-viewport drag overlay ------------------------------------------ */

.sp-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--doklik-primary) 5%, rgba(255, 255, 255, 0.88));
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease-out, visibility 0s linear 120ms;
    /* The document-level drag handlers do the work; the overlay must never hit-test. */
    pointer-events: none;
}

    .sp-drop-overlay.sp-drop-overlay--active {
        opacity: 1;
        visibility: visible;
        transition: opacity 120ms ease-out;
    }

.sp-drop-overlay-frame {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 2px dashed var(--doklik-primary);
    border-radius: 10px;
    text-align: center;
}

.sp-drop-overlay-icon {
    color: var(--doklik-primary);
}

.sp-drop-overlay-headline {
    font-size: 18px;
    font-weight: 600;
    color: var(--doklik-text);
}

.sp-drop-overlay-caption {
    font-size: 13px;
    color: var(--doklik-muted);
}

@media (prefers-reduced-motion: reduce) {
    .sp-drop-overlay {
        transition: none;
    }
}

/* --- Documents table ----------------------------------------------------- */

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

.sp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 840px;
    margin-top: 15px;
    table-layout: fixed;
}

    .sp-table th {
        text-align: left;
        font-weight: 600;
        color: var(--doklik-muted);
        font-size: 12px;
        padding: 12px 10px;
        border-bottom: 0;
        white-space: nowrap;
    }

    .sp-table td {
        padding: 8px 10px;
        border-top: 1px solid #f0f2f5;
        vertical-align: middle;
        font-size: 14px;
    }

.sp-row {
    user-select: none;
}

    .sp-row:hover {
        background: #f9fafb;
    }

    .sp-row.is-selected {
        background: #eef2ff;
    }

        .sp-row.is-selected:hover {
            background: #e0e7ff;
        }

.sp-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.sp-date {
    color: var(--doklik-muted);
    font-size: 13px;
    white-space: nowrap;
}

/* --- Status / reconciliation / GPC badges -------------------------------- */

.sp-badge {
    display: inline-block;
    background: var(--doklik-success-bg);
    color: var(--doklik-success-text);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.sp-badge-muted {
    background: #f3f4f6;
    color: #374151;
}

.sp-badge-failed {
    background: var(--doklik-danger-soft);
    color: #991b1b;
}

.sp-badge-recon-ok {
    background: var(--doklik-success-bg);
    color: var(--doklik-success-text);
}

.sp-badge-recon-bad {
    background: var(--doklik-danger-soft);
    color: #991b1b;
}

.sp-badge-recon-na {
    background: #fef3c7;
    color: #92400e;
}

.sp-badge-processed {
    background: #eff6ff;
    color: var(--doklik-primary-hover);
    margin-right: 6px;
}

.progress-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:104px;height:26px;padding:0 10px;overflow:hidden;border-radius:999px;background:#f3f4f6;color:#182945;font:inherit;font-size:12px;font-weight:500;white-space:nowrap}
.progress-pill__fill{position:absolute;inset:0 auto 0 0;width:clamp(0%,var(--progress,0%),100%);background:#93c5fd;transition:width 250ms ease}
.progress-pill__label{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.progress-pill__fill{transition:none}}
@keyframes sp-badge-enter{from{opacity:.35}to{opacity:1}}
.sp-status{min-width:104px}
.sp-badge-enter{animation:sp-badge-enter 200ms ease-out}
@media (prefers-reduced-motion:reduce){.sp-badge-enter{animation:none}}

/* Not a status: a lifecycle marker on the heading, so it stays rectangular
   while every .sp-badge above is a pill. */
.sp-badge-beta {
    display: inline-block;
    vertical-align: 2px;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 5px;
    background: #eff6ff;
    color: var(--doklik-primary-hover);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

.sp-recon-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sp-recon-cell--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.sp-recon-cta {
    color: var(--doklik-primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
    line-height: 1.2;
}

    .sp-recon-cta:hover,
    .sp-recon-cta:focus {
        color: var(--doklik-primary-hover);
    }

.sp-recon-info {
    color: var(--doklik-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

    .sp-recon-info:hover {
        color: var(--doklik-primary);
    }

/* --- Row actions --------------------------------------------------------- */

.sp-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.sp-icon {
    display: inline-block;
    text-decoration: none;
    color: var(--doklik-primary);
    font-size: 14px;
    padding: 0;
    border-radius: 0;
    border: 0;
    white-space: nowrap;
    background: transparent;
    line-height: 1.2;
}

    .sp-icon:hover {
        color: var(--doklik-primary-hover);
        text-decoration: underline;
        background: transparent;
        border-color: transparent;
    }

    .sp-icon[aria-disabled="true"] {
        opacity: .45;
        pointer-events: none;
        color: var(--doklik-muted);
        text-decoration: none;
    }

/* --- Header row (above the documents table) ----------------------------- */

.sp-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Reserved band under the header row, not a flex sibling of the export buttons —
   the count going from empty to "Vybráno: N ze M" can never change the toolbar's
   width, and the fixed min-height keeps the table from shifting down either. */
.sp-selection-status {
    min-height: 18px;
    margin-top: 6px;
    text-align: right;
    color: var(--doklik-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sp-toolbar-info {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--doklik-muted);
    cursor: help;
}

.sp-toolbar-info-link {
    cursor: pointer;
    padding: 6px;
    margin: -6px;
}

.sp-toolbar-info-link:hover,
.sp-toolbar-info-link:focus-visible {
    color: var(--bs-link-color);
}

.sp-dropdown-hint {
    display: block;
    color: var(--doklik-muted);
    font-size: 12px;
}

.sp-col-name { width: 30%; }
.sp-col-date { width: 120px; }
.sp-col-badge { width: 110px; }
.sp-col-actions { width: 260px; }
.sp-cell-actions { width: 260px; }

.sp-col-select { width: 24px; padding-right: 4px; }
.sp-select-cb { transform: translateY(1px); }

/* The fixed-width columns sum to 844px; at the 840px floor the name column is left with 0px.
   1024px is the table width at desktop, where the name column gets 180px. */
@media (max-width: 1199.98px) {
    .sp-table {
        min-width: 1024px;
    }
}

/* Phones: a 1024px table behind a scroll wrapper hides everything but the name, so each row
   becomes a card (same idea as draft-detail). The header keeps only select-all and the sortable
   headings, as a chip row. */
@media (max-width: 767.98px) {
    .sp-header-row .sp-upload {
        /* Beats the inline flex-end: a ragged right edge reads as clipping on a narrow card. */
        justify-content: flex-start !important;
    }

    .sp-header-row .sp-toolbar-divider {
        display: none;
    }

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

    .sp-table,
    .sp-table tbody,
    .sp-table td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .sp-table thead tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        padding: 0 13px;
    }

    .sp-table thead th {
        width: auto;
        padding: 8px 0;
    }

    .sp-table thead th:not(.sp-col-select):not([aria-sort]) {
        display: none;
    }

    .sp-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
        margin-top: 10px;
        padding: 12px;
        border: 1px solid var(--doklik-border);
        border-radius: 10px;
    }

    .sp-table tbody td {
        padding: 0;
        border-top: 0;
        width: auto;
    }

    .sp-table tbody td.sp-col-select {
        padding: 0;
    }

    .sp-table tbody td.sp-name {
        /* Fills the line beside the checkbox, so date and status wrap below it. */
        flex: 1 0 calc(100% - 32px);
        min-width: 0;
        width: auto;
    }

    .sp-table tbody td.sp-cell-actions {
        flex: 1 0 100%;
        width: auto;
    }

    .sp-table td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--doklik-muted);
        font-size: 12px;
    }

    .sp-table td[data-label] {
        display: inline-block;
        width: auto;
    }

    .sp-table .sp-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px 16px;
    }

    .sp-table .sp-icon {
        padding: 6px 0;
    }
}

/* --- NProgress overrides ------------------------------------------------- */
/* Sits under the sticky header (z-index 1030, 70px tall). */
#nprogress .bar {
    background: oklch(27% 0.014 258);
    height: 4px;
    top: 70px;
    z-index: 1029;
    animation: doklik-nprogress-fade-in 200ms ease both;
}

#nprogress .peg {
    display: none;
}

@keyframes doklik-nprogress-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =========================================================================
   Completeness poll — toolbar entry link + survey modal (PDF-562)
   ========================================================================= */

.sp-poll-link {
    border: 0;
    background: transparent;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--doklik-primary);
    cursor: pointer;
    border-radius: 6px;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.15s ease;
}

    .sp-poll-link:hover {
        color: var(--doklik-primary-hover);
        text-decoration: underline;
    }

    .sp-poll-link:focus-visible {
        color: var(--doklik-primary);
    }

.sp-toolbar-divider {
    width: 1px;
    height: 22px;
    flex: 0 0 auto;
    background: var(--doklik-border);
}

/* --- "Označit jako" tri-state label menu ---------------------------------- */

/* Bootstrap's default dropdown-menu min-width (10rem) leaves the create-label
   input too narrow for a realistic label name once the "Vytvořit" button and
   item padding are subtracted. */
.sp-label-menu {
    min-width: 300px;
}

.sp-label-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .sp-label-checkbox-item input {
        margin: 0;
        accent-color: var(--doklik-primary);
        cursor: pointer;
    }

.sp-label-create-item {
    padding: 6px 16px;
}

.sp-label-create-form {
    display: flex;
    gap: 6px;
}

    .sp-label-create-form input[type="text"] {
        flex: 1 1 auto;
        min-width: 0;
    }

.sp-label-create-msg {
    margin-top: 6px;
    font-size: 12px;
    color: var(--doklik-muted);
}

.sp-poll-dialog {
    max-width: 460px;
}

.sp-poll-modal.modal-content {
    border: 1px solid var(--doklik-border);
    border-radius: 12px;
    box-shadow: var(--doklik-shadow-overlay);
}

.sp-poll-modal .modal-header {
    border-bottom: 0;
    padding: 20px 22px 4px;
}

.sp-poll-modal .modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--doklik-text);
}

.sp-poll-modal .modal-body {
    padding: 8px 22px 4px;
}

.sp-poll-modal .modal-footer {
    border-top: 0;
    padding: 14px 22px 20px;
}

.sp-poll-intro {
    color: var(--doklik-muted);
    font-size: 13px;
    margin: 0 0 14px;
}

.sp-poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.sp-poll-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--doklik-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--doklik-text);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .sp-poll-option:hover {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .sp-poll-option:has(input:checked) {
        background: #eef2ff;
        border-color: var(--doklik-primary);
    }

    .sp-poll-option:has(input:focus-visible) {
        outline: 2px solid var(--doklik-primary);
        outline-offset: 2px;
    }

    .sp-poll-option input {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--doklik-primary);
        cursor: pointer;
    }

    .sp-poll-option span {
        line-height: 1.3;
    }

.sp-poll-comment-label {
    display: block;
    color: var(--doklik-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.sp-poll-comment {
    width: 100%;
    min-height: 64px;
    padding: 9px 12px;
    border: 1px solid var(--doklik-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--doklik-text);
    resize: vertical;
    transition: border-color 0.15s ease;
}

    .sp-poll-comment:focus {
        outline: none;
        border-color: var(--doklik-primary);
    }

.sp-poll-thanks p {
    margin: 0;
    font-size: 14px;
    color: var(--doklik-text);
}

.sp-poll-thanks-sub {
    margin-top: 6px !important;
    color: var(--doklik-muted) !important;
    font-size: 13px !important;
}

#btnPollSubmit:focus-visible,
#btnFeedbackSubmit:focus-visible {
    outline: 2px solid var(--doklik-primary);
    outline-offset: 2px;
}

.modal.fade .sp-poll-dialog {
    transform: translateY(8px) scale(0.985);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.modal.show .sp-poll-dialog {
    transform: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .sp-poll-dialog {
        transition: none;
        transform: none;
    }
}

/* --- Pager (overview) ---------------------------------------------------- */

.sp-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.sp-pager-size {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.sp-pager-size-select {
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--doklik-border);
    border-radius: 8px;
    background: #fff;
    color: var(--doklik-text);
    font-size: 14px;
    line-height: 1.1;
}

.sp-pager-size-submit {
    padding: 0 14px;
    height: 40px;
}

/* margin-left:auto pins the nav to the right edge, so no sibling ahead of it can push it
   sideways as its own width changes. Everything page-width-dependent must stay ahead. */
.sp-pager-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.sp-pager-btn {
    padding: 0 12px;
    height: 40px;
    white-space: nowrap;
}

/* The reserved width is a function of the total alone, so the truncation can reshape
   around the current page without `Další ›` shifting under the pointer. */
.sp-pager-track {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: calc(var(--sp-pager-slots) * 40px + (var(--sp-pager-slots) - 1) * 4px);
    font-variant-numeric: tabular-nums;
}

.sp-pager-chip {
    justify-content: center;
    padding: 0 6px;
    min-width: 40px;
    height: 40px;
}

.sp-pager-chip.is-current,
.sp-pager-chip.is-current:hover {
    background: #eef2ff;
    border-color: var(--doklik-primary);
    color: var(--doklik-primary);
    cursor: default;
}

.sp-pager-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--doklik-muted);
}

/* Proportional digits change width as the numbers change; the readout must not reflow. */
.sp-pager-readout {
    font-variant-numeric: tabular-nums;
}

/* The nav has no overflow-x parent, so what it cannot fit scrolls the whole document sideways.
   A full 9-slot nav is ~590px against a content box of viewport - 92px, so it stops fitting
   below a 682px viewport — release the reserved width from the next breakpoint up and wrap. */
@media (max-width: 767.98px) {
    .sp-pager {
        justify-content: center;
    }

    .sp-pager-nav {
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
    }

    .sp-pager-track {
        flex-wrap: wrap;
        min-width: 0;
    }
}

/* --- Sortable column headings -------------------------------------------- */

.sp-sort-head {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sp-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    /* The label is a control, and a shift-click that highlights half a word reads as a misfire. */
    user-select: none;
}

    .sp-sort:hover,
    .sp-sort:focus-visible {
        color: var(--doklik-primary);
    }

    .sp-sort.is-sorted {
        color: var(--doklik-text);
    }

.sp-sort-caret {
    display: inline-flex;
    /* Held open on every heading so that sorting never reflows the row it is in. */
    opacity: 0;
    transition: opacity .12s ease;
}

    /* Ascending is the same caret turned over: one icon, and the two states cannot drift apart. */
    .sp-sort-caret.is-ascending {
        transform: rotate(180deg);
    }

.sp-sort:hover .sp-sort-caret,
.sp-sort:focus-visible .sp-sort-caret {
    opacity: .45;
}

.sp-sort.is-sorted .sp-sort-caret {
    opacity: 1;
}

.sp-sort-rank {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--doklik-primary);
}

.sp-sort-reset {
    margin: 10px 0 0;
    font-size: 12px;
}

    .sp-sort-reset a {
        color: var(--doklik-muted);
    }

@media (prefers-reduced-motion: reduce) {
    .sp-sort-caret {
        transition: none;
    }
}