:root {

    /* Enterprise palette */

    --brand-50: #eef2ff;

    --brand-100: #e0e7ff;

    --brand-200: #c7d2fe;

    --brand-500: #6366f1;

    --brand-600: #4f46e5;

    --brand-700: #4338ca;

    --brand-800: #3730a3;

    --brand-900: #312e81;



    --teal-50: #f0fdfa;

    --teal-100: #ccfbf1;

    --teal-500: #14b8a6;

    --teal-600: #0d9488;

    --teal-700: #0f766e;



    --slate-25: #fcfcfd;

    --slate-50: #f8fafc;

    --slate-100: #f1f5f9;

    --slate-200: #e2e8f0;

    --slate-300: #cbd5e1;

    --slate-400: #94a3b8;

    --slate-500: #64748b;

    --slate-600: #475569;

    --slate-700: #334155;

    --slate-800: #1e293b;

    --slate-900: #0f172a;

    --slate-950: #020617;



    --sidebar-bg: #0c1222;

    --sidebar-border: rgba(255, 255, 255, 0.06);

    --sidebar-text: rgba(255, 255, 255, 0.72);

    --sidebar-text-muted: rgba(255, 255, 255, 0.42);

    --sidebar-active: var(--plan-sidebar-active);

    --sidebar-active-border: var(--plan-sidebar-border);

    --sidebar-nav-hover: var(--plan-nav-hover);

    --sidebar-nav-active-border: var(--plan-nav-active-border);

    --sidebar-nav-icon-active: var(--plan-nav-icon-active);

    --sidebar-section-tint: var(--plan-section-tint);



    /* Výchozí = PROFI (modrá) — přepisuje se podle data-plan / .plan-theme--* */

    --plan-accent: #2563eb;

    --plan-accent-soft: #dbeafe;

    --plan-accent-strong: #1e40af;

    --plan-mark-from: #3b82f6;

    --plan-mark-to: #1d4ed8;

    --plan-sidebar-bg: #0a1220;

    --plan-sidebar-active: rgba(37, 99, 235, 0.3);

    --plan-sidebar-border: #60a5fa;

    --plan-nav-hover: rgba(37, 99, 235, 0.14);

    --plan-nav-active-border: rgba(96, 165, 250, 0.45);

    --plan-nav-icon-active: #93c5fd;

    --plan-section-tint: rgba(147, 197, 253, 0.55);

    --plan-topbar-line: #2563eb;

    --plan-badge-bg: #eff6ff;

    --plan-badge-fg: #1e40af;

    --plan-badge-border: #bfdbfe;

    --plan-badge-sidebar-bg: rgba(96, 165, 250, 0.16);

    --plan-badge-sidebar-fg: #bfdbfe;

    --plan-badge-sidebar-border: rgba(96, 165, 250, 0.4);

    --plan-badge-sidebar-hover-bg: rgba(96, 165, 250, 0.28);

    --plan-badge-sidebar-hover-fg: #eff6ff;

    --plan-badge-sidebar-hover-border: rgba(147, 197, 253, 0.6);



    --status-issued: #64748b;

    --status-sent: #2563eb;

    --status-paid: #16a34a;

    --status-overdue: #dc2626;



    --sidebar-width: 232px;

    --topbar-height: 46px;

    --footer-height: 34px;

    --radius: 5px;

    --radius-lg: 7px;

    --text-base: 0.8125rem;

    --text-sm: 0.75rem;

    --text-xs: 0.65rem;

    /* Jednotná výška toolbarů / filtrů / malých ovládacích prvků */

    --control-height: 1.625rem;

    --control-padding-x: 0.4rem;

    --control-line-height: 1.25;

    --space-page: 0.85rem;

    --space-panel: 0.65rem;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);

    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);

    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);

    --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;



    --scrollbar-size: 7px;

    --scrollbar-track: transparent;

    --scrollbar-thumb: rgba(100, 116, 139, 0.35);

    --scrollbar-thumb-hover: rgba(79, 70, 229, 0.55);

    --scrollbar-thumb-active: rgba(79, 70, 229, 0.75);

    --scrollbar-thumb-sidebar: rgba(255, 255, 255, 0.18);

    --scrollbar-thumb-sidebar-hover: rgba(255, 255, 255, 0.32);

}



* {

    box-sizing: border-box;

    scrollbar-width: thin;

    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

}



*::-webkit-scrollbar {

    width: var(--scrollbar-size);

    height: var(--scrollbar-size);

}



*::-webkit-scrollbar-track {

    background: var(--scrollbar-track);

}



*::-webkit-scrollbar-thumb {

    background-color: var(--scrollbar-thumb);

    border-radius: 999px;

    border: 2px solid transparent;

    background-clip: padding-box;

}



*::-webkit-scrollbar-thumb:hover {

    background-color: var(--scrollbar-thumb-hover);

}



*::-webkit-scrollbar-thumb:active {

    background-color: var(--scrollbar-thumb-active);

}



*::-webkit-scrollbar-corner {

    background: transparent;

}



html {

    width: 100%;

    max-width: 100%;

    overflow-x: clip;

}



.sidebar-nav,

.auth-aside {

    scrollbar-color: var(--scrollbar-thumb-sidebar) transparent;

}



.sidebar-nav::-webkit-scrollbar-thumb,

.auth-aside::-webkit-scrollbar-thumb {

    background-color: var(--scrollbar-thumb-sidebar);

}



.sidebar-nav::-webkit-scrollbar-thumb:hover,

.auth-aside::-webkit-scrollbar-thumb:hover {

    background-color: var(--scrollbar-thumb-sidebar-hover);

}



body {

    margin: 0;

    padding: 0;

    width: 100%;

    max-width: 100%;

    font-family: var(--font);

    font-size: var(--text-base);

    line-height: 1.4;

    color: var(--slate-800);

    background: var(--slate-100);

    -webkit-font-smoothing: antialiased;

}



.app-body {

    background: var(--slate-100);

    overflow-x: clip;

}



.app-wrapper {

    display: flex;

    width: 100%;

    min-height: 100vh;

    min-height: 100dvh;

}



/* ——— Sidebar ——— */

.sidebar-overlay {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(2, 6, 23, 0.55);

    z-index: 1035;

    backdrop-filter: blur(2px);

}



.sidebar-overlay.show {

    display: block;

}



.sidebar {

    width: var(--sidebar-width);

    background:

        linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 14%, transparent) 0%, transparent 9rem),

        var(--plan-sidebar-bg, var(--sidebar-bg));

    color: #fff;

    display: flex;

    flex-direction: column;

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    z-index: 1040;

    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;

    border-right: 1px solid var(--sidebar-border);

}



.sidebar-header {

    position: relative;

    flex-shrink: 0;

    overflow: hidden;

    min-height: 4.5rem;

    border-bottom: 1px solid var(--sidebar-border);

    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--plan-accent) 18%, transparent);

}



.sidebar-brand {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0.35rem;

    padding: 0.7rem 3.15rem 0.65rem 0.7rem;

}



.sidebar-brand-link {

    display: block;

    width: 100%;

    min-width: 0;

    line-height: 0;

    text-decoration: none;

}



.sidebar-brand-logo {

    display: block;

    width: 100%;

    height: auto;

    max-height: 3.15rem;

    object-fit: contain;

    object-position: left center;

}



.sidebar-brand-mark {

    width: 1.85rem;

    height: 1.85rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius);

    background: linear-gradient(135deg, var(--plan-mark-from), var(--plan-mark-to));

    box-shadow: 0 4px 12px color-mix(in srgb, var(--plan-accent) 35%, transparent);

    font-size: 0.85rem;

    flex-shrink: 0;

}



.sidebar-brand-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1.25;

    min-width: 0;

    width: 100%;

}



.sidebar-brand-name {

    font-weight: 700;

    font-size: 0.875rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}



.sidebar-org-name {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    overflow: hidden;

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: -0.015em;

    color: color-mix(in srgb, #fff 82%, var(--plan-accent) 18%);

    word-break: break-word;

}



.sidebar .plan-badge-link {

    position: absolute;

    top: 1.2rem;

    right: -1.85rem;

    z-index: 2;

    width: 7.35rem;

    height: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0.12em 0 0;

    overflow: visible;

    text-decoration: none;

    line-height: 1;

    color: #fff;

    background: linear-gradient(

        180deg,

        color-mix(in srgb, var(--plan-mark-from) 70%, #fff) 0%,

        var(--plan-mark-from) 38%,

        var(--plan-mark-to) 100%

    );

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);

    transform: rotate(45deg);

    transform-origin: center;

}



.sidebar .plan-badge-link::before,

.sidebar .plan-badge-link::after {

    content: none;

}



.sidebar .plan-badge-link:hover {

    filter: brightness(1.08);

}



.sidebar .plan-badge-link:focus-visible .plan-badge {

    text-decoration: underline;

    text-underline-offset: 2px;

}



.sidebar .plan-badge {

    position: static;

    display: flex;

    align-items: center;

    justify-content: center;

    width: auto;

    height: auto;

    padding: 0;

    border: 0;

    background: none;

    box-shadow: none;

    color: #fff;

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    line-height: 1;

    transform: none;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);

    pointer-events: none;

}



body[data-plan="osvc_start"] .sidebar .plan-badge,

body[data-plan="osvc_pro"] .sidebar .plan-badge,

body[data-plan="osvc_accounting"] .sidebar .plan-badge {

    background: none;

}



.sidebar-nav {

    flex: 1;

    overflow-y: auto;

    padding: 0.55rem 0.5rem 0.35rem;

}



.sidebar-section {

    margin-bottom: 0.7rem;

}



.sidebar-nav > .sidebar-section:last-child {

    border-top: 1px solid var(--sidebar-border);

    padding-top: 0.45rem;

    margin-top: 0.2rem;

    margin-bottom: 0;

}



.sidebar-section-label {

    display: block;

    padding: 0 0.5rem 0.25rem;

    font-size: 0.58rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--plan-section-tint, var(--sidebar-text-muted));

}



.sidebar-section--more {

    margin-top: 0.15rem;

    padding-top: 0.4rem;

    border-top: 1px solid var(--sidebar-border);

}



.sidebar-section--more > summary {

    list-style: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.35rem;

    padding: 0.28rem 0.5rem;

    margin-bottom: 0.15rem;

    border-radius: var(--radius);

    font-size: 0.58rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--plan-section-tint, var(--sidebar-text-muted));

    user-select: none;

}



.sidebar-section--more > summary::-webkit-details-marker,

.sidebar-section--more > summary::marker {

    display: none;

    content: none;

}



.sidebar-section--more > summary:hover {

    background: var(--plan-nav-hover);

    color: #fff;

}



.sidebar-more-chevron {

    font-size: 0.58rem;

    opacity: 0.65;

    transition: transform 0.15s ease;

}



.sidebar-section--more[open] > summary .sidebar-more-chevron {

    transform: rotate(180deg);

}



body[data-plan="osvc_start"] .sidebar-section-label {

    color: #5eead4;

}



body[data-plan="osvc_pro"] .sidebar-section-label {

    color: #93c5fd;

}



body[data-plan="osvc_accounting"] .sidebar-section-label {

    color: #fbbf24;

}



.sidebar-nav .nav-link {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.4rem 0.55rem;

    margin-bottom: 0.05rem;

    color: var(--sidebar-text);

    text-decoration: none;

    border-radius: var(--radius);

    font-weight: 500;

    font-size: var(--text-sm);

    transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;

    border: 1px solid transparent;

}



.nav-link-icon {

    width: 1.1rem;

    text-align: center;

    font-size: 0.8rem;

    opacity: 0.85;

    transition: color 0.15s, opacity 0.15s;

}



.sidebar-nav .nav-link:hover {

    background: var(--plan-nav-hover);

    color: #fff;

}



.sidebar-nav .nav-link:hover .nav-link-icon {

    color: var(--plan-nav-icon-active);

    opacity: 1;

}



/* Aktivní položka = barva předplatného (ne výchozí Bootstrap/PROFI modrá) */

.sidebar-nav a.nav-link.active,

.sidebar-nav a.nav-link.active:hover,

.sidebar-nav a.nav-link.active:focus,

body[data-plan] .sidebar-nav a.nav-link.active {

    background: var(--plan-sidebar-active) !important;

    color: var(--plan-nav-icon-active) !important;

    border-color: var(--plan-nav-active-border) !important;

    box-shadow: inset 3px 0 0 var(--plan-sidebar-border) !important;

}



.sidebar-nav a.nav-link.active .nav-link-label,

.sidebar-nav a.nav-link.active .nav-link-icon,

body[data-plan] .sidebar-nav a.nav-link.active .nav-link-label,

body[data-plan] .sidebar-nav a.nav-link.active .nav-link-icon {

    color: var(--plan-nav-icon-active) !important;

    opacity: 1;

}



body[data-plan="osvc_start"] .sidebar-nav a.nav-link.active {

    background: rgba(20, 184, 166, 0.32) !important;

    color: #5eead4 !important;

    border-color: rgba(45, 212, 191, 0.5) !important;

    box-shadow: inset 3px 0 0 #2dd4bf !important;

}



body[data-plan="osvc_pro"] .sidebar-nav a.nav-link.active {

    background: rgba(37, 99, 235, 0.32) !important;

    color: #93c5fd !important;

    border-color: rgba(96, 165, 250, 0.5) !important;

    box-shadow: inset 3px 0 0 #60a5fa !important;

}



body[data-plan="osvc_accounting"] .sidebar-nav a.nav-link.active {

    background: rgba(245, 158, 11, 0.32) !important;

    color: #fcd34d !important;

    border-color: rgba(251, 191, 36, 0.55) !important;

    box-shadow: inset 3px 0 0 #fbbf24 !important;

}



body[data-plan="osvc_start"] .sidebar-nav a.nav-link.active .nav-link-icon,

body[data-plan="osvc_start"] .sidebar-nav a.nav-link.active .nav-link-label {

    color: #5eead4 !important;

}



body[data-plan="osvc_pro"] .sidebar-nav a.nav-link.active .nav-link-icon,

body[data-plan="osvc_pro"] .sidebar-nav a.nav-link.active .nav-link-label {

    color: #93c5fd !important;

}



body[data-plan="osvc_accounting"] .sidebar-nav a.nav-link.active .nav-link-icon,

body[data-plan="osvc_accounting"] .sidebar-nav a.nav-link.active .nav-link-label {

    color: #fcd34d !important;

}



/* Spodní lišta nad status barem prohlížeče (~22–28px) */

.sidebar-footer {

    display: flex;

    align-items: center;

    gap: 0.25rem;

    flex-shrink: 0;

    padding: 0.45rem 0.5rem calc(0.55rem + 1.4rem);

    border-top: 1px solid var(--sidebar-border);

    background:

        linear-gradient(0deg, color-mix(in srgb, var(--plan-accent) 10%, transparent), transparent),

        rgba(0, 0, 0, 0.22);

}



.sidebar-user {

    display: flex;

    align-items: center;

    gap: 0.45rem;

    min-width: 0;

    flex: 1;

    padding: 0.3rem 0.35rem;

    border-radius: var(--radius);

    text-decoration: none;

    color: inherit;

    transition: background 0.15s;

}



.sidebar-user:hover {

    background: var(--plan-nav-hover);

}



.sidebar-user-avatar {

    width: 1.7rem;

    height: 1.7rem;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--plan-mark-from), var(--plan-mark-to));

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

    font-weight: 700;

    flex-shrink: 0;

}



.sidebar-user-meta {

    flex: 1;

    min-width: 0;

    line-height: 1.2;

}



.sidebar-user-meta strong {

    display: block;

    font-size: 0.72rem;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.sidebar-user-meta small {

    display: block;

    font-size: 0.62rem;

    color: var(--sidebar-text-muted);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.sidebar-logout {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 1.85rem;

    height: 1.85rem;

    flex-shrink: 0;

    border-radius: var(--radius);

    color: var(--sidebar-text-muted);

    text-decoration: none;

    transition: color 0.15s, background 0.15s;

}



.sidebar-logout:hover {

    color: #fecaca;

    background: rgba(248, 113, 113, 0.12);

}



/* ——— Main layout ——— */

.main-content {

    flex: 1;

    margin-left: var(--sidebar-width);

    width: calc(100% - var(--sidebar-width));

    max-width: calc(100% - var(--sidebar-width));

    min-width: 0;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    min-height: 100dvh;

}



.topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.65rem;

    height: var(--topbar-height);

    padding: 0 0.85rem;

    background: #fff;

    border-bottom: 1px solid var(--slate-200);

    position: sticky;

    top: 0;

    z-index: 1030;

    box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--plan-topbar-line);

}



.topbar-left {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    min-width: 0;

    flex: 1;

}



.btn-icon {

    width: 1.9rem;

    height: 1.9rem;

    padding: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--slate-200);

    border-radius: var(--radius);

    background: #fff;

    color: var(--slate-600);

}



.btn-icon:hover {

    background: var(--slate-50);

    color: var(--slate-800);

}



.topbar-breadcrumb {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    font-size: var(--text-sm);

    color: var(--slate-500);

    min-width: 0;

}



.topbar-breadcrumb a {

    color: var(--slate-500);

    text-decoration: none;

    white-space: nowrap;

}



.topbar-breadcrumb a:hover {

    color: var(--brand-600);

}



.topbar-breadcrumb i {

    font-size: 0.55rem;

    opacity: 0.5;

}



.topbar-breadcrumb span {

    font-weight: 600;

    color: var(--slate-800);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.page-heading {

    font-size: 1.1rem;

    font-weight: 600;

    margin: 0;

    flex: 1;

    color: var(--slate-800);

}



.content-area {

    flex: 1;

    padding: var(--space-page) 0.85rem;

}



.modal-backdrop {

    --bs-backdrop-bg: var(--slate-500);

    --bs-backdrop-opacity: 0.08;

}



.app-body .modal-content {

    border: 0;

    box-shadow: var(--shadow-lg);

}



.app-modal {

    border: none;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    overflow: hidden;

}



.app-modal-header {

    align-items: flex-start;

    gap: 0.75rem;

    border-bottom: 1px solid var(--slate-100);

    padding: 1rem 1rem 0.75rem;

}



.app-modal-footer {

    border-top: 1px solid var(--slate-100);

    padding: 0.75rem 1rem 1rem;

}



.app-modal-icon {

    width: 2.25rem;

    height: 2.25rem;

    border-radius: 999px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 1rem;

}



.app-modal-icon--success { background: #dcfce7; color: #15803d; }

.app-modal-icon--danger { background: #fee2e2; color: #b91c1c; }

.app-modal-icon--warning { background: #fef3c7; color: #b45309; }

.app-modal-icon--info,

.app-modal-icon--light { background: #dbeafe; color: #1d4ed8; }



.app-modal-list {

    margin: 0;

    padding-left: 1.1rem;

}



.app-modal-list li + li {

    margin-top: 0.35rem;

}



.app-modal--success .modal-footer .btn-primary { background: #15803d; border-color: #15803d; }

.app-modal--danger .modal-footer .btn-primary { background: #b91c1c; border-color: #b91c1c; }

.app-modal--warning .modal-footer .btn-primary { background: #b45309; border-color: #b45309; }



.app-alert {

    border-radius: var(--radius);

    border: none;

    box-shadow: var(--shadow-sm);

    position: relative;

    display: flex;

    align-items: center;

    padding: 0.45rem 2rem 0.45rem 0.65rem;

    font-size: var(--text-sm);

    margin-bottom: 0.65rem;

    min-height: 2rem;

}



.app-alert .btn-close {

    position: absolute;

    top: 50%;

    right: 0.45rem;

    transform: translateY(-50%);

    padding: 0.2rem;

    margin: 0;

    width: 0.65rem;

    height: 0.65rem;

    background-size: 0.65rem;

    opacity: 0.55;

}



.app-alert .btn-close:hover {

    opacity: 0.85;

}



/* ——— App footer ——— */

.app-footer {

    border-top: 1px solid var(--slate-200);

    background: #fff;

    padding: 0 0.85rem;

    min-height: var(--footer-height);

}



.app-footer-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.65rem;

    min-height: var(--footer-height);

    flex-wrap: wrap;

    font-size: 0.68rem;

    color: var(--slate-500);

}



.app-footer-left {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

}



.app-footer-links {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.app-footer-links a {

    color: var(--slate-500);

    text-decoration: none;

}



.app-footer-links a:hover {

    color: var(--brand-600);

}



.app-footer-version {

    display: inline-block;

    padding: 0.15rem 0.45rem;

    background: var(--slate-100);

    border-radius: 999px;

    font-weight: 600;

    font-size: 0.68rem;

    color: var(--slate-600);

}



.topbar-actions {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    flex-shrink: 0;

}



.topbar-cta {

    font-weight: 600;

    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);

}



/* ——— Cards & panels ——— */

.stat-card {

    background: #fff;

    border: 0;

    border-radius: var(--radius-lg);

    padding: 0.65rem 0.75rem;

    box-shadow: var(--shadow-sm);

    height: 100%;

    transition: box-shadow 0.2s;

}



a.stat-card {

    display: block;

    text-decoration: none;

    color: inherit;

}



a.stat-card:hover {

    box-shadow: var(--shadow-md);

    color: inherit;

}



.stat-card:hover {

    box-shadow: var(--shadow-md);

}



.stat-card .stat-label {

    font-size: 0.62rem;

    text-transform: uppercase;

    letter-spacing: 0.07em;

    color: var(--slate-500);

    font-weight: 600;

    margin-bottom: 0.15rem;

}



.stat-card .stat-value {

    font-size: 1.15rem;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

    color: var(--slate-900);

    line-height: 1.2;

    letter-spacing: -0.02em;

}



.stat-card .stat-icon {

    float: right;

    width: 1.85rem;

    height: 1.85rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius);

    font-size: 0.75rem;

}



.stat-card.teal .stat-icon { background: var(--brand-50); color: var(--brand-700); }

.stat-card.green .stat-icon { background: #dcfce7; color: #15803d; }

.stat-card.blue .stat-icon { background: #dbeafe; color: #1d4ed8; }

.stat-card.red .stat-icon { background: #fee2e2; color: #b91c1c; }

.stat-card.slate .stat-icon { background: var(--slate-100); color: var(--slate-600); }



.panel {

    background: #fff;

    border: 0;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    margin-bottom: 0.65rem;

    overflow: hidden;

}



.panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.45rem 0.75rem;

    border-bottom: 1px solid var(--slate-200);

    background: var(--slate-25);

}



.panel-header h2 {

    font-size: 0.72rem;

    font-weight: 600;

    margin: 0;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--slate-700);

    display: flex;

    align-items: center;

    gap: 0.4rem;

}



.panel-header h2 i {

    font-size: 0.75rem;

    color: var(--brand-600);

    opacity: 0.9;

}



.btn-help {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 1.15rem;

    height: 1.15rem;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: var(--slate-400);

    line-height: 1;

    vertical-align: middle;

}



.btn-help:hover,

.btn-help:focus-visible {

    color: var(--brand-600);

    outline: none;

}



.btn-help i {

    font-size: 0.78rem;

    opacity: 1;

}



.panel-header .btn-help {

    text-transform: none;

    letter-spacing: 0;

}



.popover {

    --bs-popover-max-width: 22rem;

    font-size: var(--text-sm);

}



.panel-body {

    padding: 0;

}



.panel-body.padded {

    padding: var(--space-panel);

}



.panel--quiet {

    background: var(--slate-25);

    box-shadow: none;

}



.panel--quiet .panel-header {

    background: transparent;

}



.dash-expense-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.85rem 1.25rem;

    font-size: var(--text-sm);

}



.dash-expense-meta strong {

    display: block;

    font-variant-numeric: tabular-nums;

    color: var(--slate-900);

}



.dash-expense-meta span {

    color: var(--slate-500);

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    font-weight: 600;

}



/* ——— Tables ——— */

.table-app {

    margin: 0;

    font-size: var(--text-sm);

}



.table-app thead th {

    background: var(--slate-50);

    border-bottom: 1px solid var(--slate-200);

    color: var(--slate-600);

    font-size: 0.62rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    font-weight: 600;

    padding: 0.35rem 0.55rem;

    white-space: nowrap;

}



.table-app tbody td {

    padding: 0.32rem 0.55rem;

    vertical-align: middle;

    border-color: var(--slate-100);

}



.table-app tbody tr:hover {

    background: var(--brand-50);

}



.table-app .money {

    font-variant-numeric: tabular-nums;

    font-family: "SF Mono", "Consolas", monospace;

    font-weight: 500;

    text-align: right;

    white-space: nowrap;

}



/* ——— Status badges ——— */

.status-badge,

.plan-badge,

.plan-card-badge,

.pricing-compare-tag,

.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

    vertical-align: middle;

    text-box: trim-both cap alphabetic;

}



.status-badge {

    min-height: 1.25rem;

    padding: 0.12em 0.45rem 0;

    border-radius: 999px;

    font-size: 0.62rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    white-space: nowrap;

}



.status-issued { background: #f1f5f9; color: var(--status-issued); }

.status-sent { background: #dbeafe; color: var(--status-sent); }

.status-paid { background: #dcfce7; color: var(--status-paid); }

.status-overdue { background: #fee2e2; color: var(--status-overdue); }



/* ——— Support tickets ——— */

.support-thread {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.support-message {

    border: 0;

    border-radius: var(--radius);

    padding: 0.75rem 0.9rem;

    background: #fff;

    box-shadow: var(--shadow-sm);

}



.support-message--staff {

    border-color: #c7d2fe;

    background: #f5f7ff;

}



.support-message-head {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 0.35rem 1rem;

    margin-bottom: 0.45rem;

    font-size: var(--text-sm);

}



.support-message-body {

    font-size: var(--text-sm);

    line-height: 1.5;

    white-space: pre-wrap;

}



.support-page-head {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-start;

    gap: 0.75rem 1rem;

    margin-bottom: 0.85rem;

}



.support-page-title {

    font-size: 1.15rem;

    font-weight: 700;

    margin: 0 0 0.2rem;

    color: var(--slate-900);

}



.support-page-lead {

    margin: 0;

    font-size: var(--text-sm);

    color: var(--slate-500);

    max-width: 36rem;

}



.support-page-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

}



.support-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

}



.support-filter {

    display: inline-flex;

    align-items: center;

    height: var(--control-height);

    min-height: var(--control-height);

    padding: 0 0.65rem;

    border-radius: var(--radius);

    border: 1px solid var(--slate-200);

    background: #fff;

    color: var(--slate-600);

    text-decoration: none;

    font-size: var(--text-sm);

    line-height: var(--control-line-height);

    font-weight: 600;

    box-sizing: border-box;

}



.support-filter:hover {

    border-color: var(--brand-200);

    color: var(--brand-700);

    background: var(--brand-50);

}



.support-filter.is-active {

    background: var(--brand-600);

    border-color: var(--brand-600);

    color: #fff;

}



.support-ticket-link {

    color: inherit;

    text-decoration: none;

}



.support-ticket-link:hover strong {

    color: var(--brand-700);

}



.support-compose-intro {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-start;

    gap: 0.85rem 1.25rem;

    margin-bottom: 0.85rem;

}



.support-back-link {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    font-size: 0.75rem;

    color: var(--slate-500);

    text-decoration: none;

    margin-bottom: 0.35rem;

}



.support-back-link:hover {

    color: var(--brand-700);

}



.support-compose-title {

    font-size: 1.2rem;

    font-weight: 700;

    margin: 0 0 0.3rem;

    color: var(--slate-900);

}



.support-compose-lead {

    margin: 0;

    font-size: var(--text-sm);

    color: var(--slate-500);

    max-width: 34rem;

}



.support-compose-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

}



.support-meta-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    padding: 0.35rem 0.65rem;

    border-radius: 999px;

    background: #fff;

    border: 1px solid var(--slate-200);

    font-size: 0.72rem;

    font-weight: 600;

    color: var(--slate-600);

}



.support-meta-chip i {

    color: var(--brand-600);

    font-size: 0.7rem;

}



.support-topic-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

}



.support-topic-chip {

    border: 1px solid var(--slate-200);

    background: var(--slate-25);

    color: var(--slate-700);

    border-radius: 999px;

    padding: 0.28rem 0.7rem;

    font-size: 0.72rem;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.15s, border-color 0.15s, color 0.15s;

}



.support-topic-chip:hover {

    border-color: var(--brand-200);

    background: var(--brand-50);

    color: var(--brand-700);

}



.support-topic-chip.is-active {

    border-color: var(--brand-500);

    background: var(--brand-50);

    color: var(--brand-800);

}



.support-char-count {

    font-size: 0.68rem;

    color: var(--slate-400);

    font-variant-numeric: tabular-nums;

}



.support-compose-textarea {

    min-height: 12rem;

    line-height: 1.5;

    resize: vertical;

}



.support-compose-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    padding-top: 0.25rem;

}



.support-tips {

    margin: 0;

    padding-left: 1.05rem;

    font-size: var(--text-sm);

    color: var(--slate-600);

    line-height: 1.45;

}



.support-tips li + li {

    margin-top: 0.45rem;

}



.support-mail-link {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    font-size: var(--text-sm);

    font-weight: 600;

    color: var(--brand-700);

    text-decoration: none;

}



.support-mail-link:hover {

    text-decoration: underline;

}



.support-side-card + .support-side-card {

    margin-top: 0.65rem;

}



.profile-danger-zone {

    border-color: #fecaca;

}



.profile-danger-zone .panel-header {

    background: #fef2f2;

    border-bottom-color: #fecaca;

}



.profile-danger-zone .panel-header h2,

.profile-danger-zone .panel-header h2 i {

    color: #b91c1c;

}



.item-suggest {

    position: relative;

}



.item-suggest-list {

    position: fixed;

    z-index: 1080;

    min-width: 16rem;

    max-height: 14rem;

    overflow: auto;

    background: #fff;

    border: 0;

    border-radius: var(--radius);

    box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));

}



.item-suggest-option {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 0.1rem;

    width: 100%;

    border: 0;

    background: transparent;

    text-align: left;

    padding: 0.45rem 0.65rem;

    cursor: pointer;

}



.item-suggest-option:hover,

.item-suggest-option.is-active {

    background: var(--brand-50);

}



.item-suggest-name {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--slate-800);

}



.item-suggest-meta {

    font-size: 0.68rem;

    color: var(--slate-500);

}



.flatpickr-calendar {

    font-family: inherit;

    border: 1px solid var(--slate-200);

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);

    border-radius: var(--radius-lg);

}



.flatpickr-months .flatpickr-month,

.flatpickr-current-month .flatpickr-monthDropdown-months,

span.flatpickr-weekday {

    color: var(--slate-700);

    fill: var(--slate-700);

}



.flatpickr-day.selected,

.flatpickr-day.startRange,

.flatpickr-day.endRange,

.flatpickr-day.selected:hover {

    background: var(--brand-600);

    border-color: var(--brand-600);

}



.flatpickr-day.today {

    border-color: var(--brand-400);

}



.flatpickr-day:hover {

    background: var(--brand-50);

}



input.js-datepicker[readonly],

.flatpickr-input[readonly] {

    background: #fff;

}



/* Stylovaný výběr souboru */

.file-upload-wrap {

    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    align-items: center;

}



.file-upload-wrap .file-upload {

    flex: 1 1 14rem;

    min-width: 0;

}



.file-upload-camera-input {

    position: absolute;

    width: 1px;

    height: 1px;

    opacity: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    pointer-events: none;

}



.file-upload-camera-btn {

    flex: 0 0 auto;

}



.file-upload {

    position: relative;

    width: 100%;

}



.file-upload-input {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;

    z-index: 2;

    margin: 0;

}



.file-upload-control {

    display: flex;

    align-items: stretch;

    width: 100%;

    height: var(--control-height);

    min-height: var(--control-height);

    border: 1px solid var(--slate-200);

    border-radius: var(--radius);

    background: #fff;

    overflow: hidden;

    margin: 0;

    cursor: pointer;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.file-upload:hover .file-upload-control,

.file-upload:focus-within .file-upload-control {

    border-color: var(--plan-accent, var(--brand-500));

    box-shadow: 0 0 0 2px color-mix(in srgb, var(--plan-accent, var(--brand-500)) 18%, transparent);

}



.file-upload-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    flex-shrink: 0;

    padding: 0 var(--control-padding-x);

    border-right: 1px solid var(--slate-200);

    background: var(--slate-50);

    color: var(--slate-700);

    font-size: var(--text-sm);

    font-weight: 600;

    line-height: var(--control-line-height);

    white-space: nowrap;

}



.file-upload-name {

    display: flex;

    align-items: center;

    flex: 1;

    min-width: 0;

    padding: 0 var(--control-padding-x);

    font-size: var(--text-sm);

    line-height: var(--control-line-height);

    color: var(--slate-400);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.file-upload.has-file .file-upload-name {

    color: var(--slate-700);

}



.file-upload.has-file .file-upload-btn {

    background: color-mix(in srgb, var(--plan-accent-soft, var(--brand-50)) 80%, #fff);

    color: var(--plan-accent-strong, var(--brand-800));

    border-right-color: color-mix(in srgb, var(--plan-accent, var(--brand-200)) 45%, var(--slate-300));

}



.bank-import-upload {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0.75rem;

}



.bank-import-upload-field {

    width: 100%;

}



.bank-import-upload .btn {

    align-self: flex-start;

}



/* ——— Forms & buttons ——— */

.form-label {

    font-size: var(--text-xs);

    font-weight: 600;

    color: var(--slate-600);

    margin-bottom: 0.15rem;

}



.form-control,

.form-control-sm {

    font-size: var(--text-sm);

    line-height: var(--control-line-height);

    border-color: var(--slate-200);

    border-radius: var(--radius);

    padding: 0 var(--control-padding-x);

    height: var(--control-height);

    min-height: var(--control-height);

}



textarea.form-control,

textarea.form-control-sm {

    height: auto;

    min-height: 5rem;

    padding: 0.4rem var(--control-padding-x);

    line-height: 1.45;

}



.form-select,

.form-select-sm {

    font-size: var(--text-sm);

    line-height: var(--control-line-height);

    border-color: var(--slate-200);

    border-radius: var(--radius);

    padding: 0 1.75rem 0 var(--control-padding-x);

    height: var(--control-height);

    min-height: var(--control-height);

    background-position: right 0.45rem center;

}



.form-select-sm {

    padding-right: 1.5rem;

    background-position: right 0.35rem center;

    background-size: 12px 9px;

}



.input-addon-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: var(--control-height);

    min-height: var(--control-height);

    padding: 0 0.6rem;

    border: 1px solid var(--slate-200);

    background: #fff;

    color: var(--slate-500);

    box-shadow: none;

}



.input-addon-btn:hover,

.input-addon-btn:focus {

    background: var(--slate-50);

    color: var(--slate-700);

    border-color: var(--slate-200);

    box-shadow: none;

}



.form-select-fit {

    width: auto;

    min-width: 4.25rem;

}



.form-select-fit--month {

    min-width: 6.75rem;

}



.form-control:focus,

.form-select:focus {

    border-color: var(--brand-500);

    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);

}



.btn-primary {

    background: var(--plan-accent, var(--brand-600));

    border-color: var(--plan-accent, var(--brand-600));

}



.btn-primary:hover,

.btn-primary:focus {

    background: var(--plan-accent-strong, var(--brand-700));

    border-color: var(--plan-accent-strong, var(--brand-700));

}



.btn-outline-primary {

    color: var(--plan-accent-strong, var(--brand-700));

    border-color: color-mix(in srgb, var(--plan-accent, var(--brand-500)) 35%, #fff);

}



.btn-outline-primary:hover {

    background: var(--plan-accent, var(--brand-600));

    border-color: var(--plan-accent, var(--brand-600));

    color: #fff;

}



.app-body .btn-outline-secondary {

    border-color: var(--slate-200);

}



.dropdown-menu {

    border: 0;

    box-shadow: var(--shadow-lg);

    border-radius: var(--radius);

    font-size: var(--text-sm);

    --bs-dropdown-item-padding-y: 0.3rem;

    --bs-dropdown-item-padding-x: 0.65rem;

}



/* ——— Invoice form ——— */

.items-table input {

    font-size: var(--text-sm);

    padding: 0.25rem 0.4rem;

}



.items-table .item-total {

    font-variant-numeric: tabular-nums;

    font-family: "SF Mono", "Consolas", monospace;

    font-weight: 600;

    text-align: right;

    padding-top: 0.3rem;

    font-size: var(--text-sm);

}



.invoice-total-bar {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 0.65rem;

    padding: 0.5rem 0.75rem;

    background: var(--slate-50);

    border-top: 2px solid var(--brand-600);

}



.invoice-total-bar .total-label {

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--slate-500);

    font-weight: 600;

}



.invoice-total-bar .total-value {

    font-size: 1.1rem;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

    color: var(--brand-800);

    font-family: "SF Mono", "Consolas", monospace;

}



/* ——— Detail view ——— */

.detail-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.65rem;

}



.detail-box {

    padding: 0.65rem 0.75rem;

    background: var(--slate-50);

    border: 1px solid var(--slate-200);

    border-radius: var(--radius-lg);

}



.detail-box h3 {

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--slate-500);

    margin: 0 0 0.55rem;

    font-weight: 600;

}



.detail-box p {

    margin: 0 0 0.1rem;

    font-size: var(--text-sm);

}



.detail-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.85rem;

    margin-bottom: 0.65rem;

}



.detail-meta .meta-item label {

    display: block;

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--slate-500);

    font-weight: 600;

    margin-bottom: 0.15rem;

}



.detail-meta .meta-item span {

    font-weight: 600;

    font-size: var(--text-base);

}



.action-bar {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.3rem;

    margin-bottom: 0.65rem;

}



.action-bar .dropdown-menu .dropdown-item {

    display: flex;

    align-items: center;

}



.payment-qr-panel {

    display: flex;

    flex-wrap: wrap;

    gap: 1.25rem;

    align-items: flex-start;

}



.payment-qr-panel-code {

    text-align: center;

    flex: 0 0 auto;

}



.payment-qr-panel .payment-qr-image {

    width: 160px;

    height: 160px;

    object-fit: contain;

    border: 1px solid var(--slate-200);

    border-radius: var(--radius);

    background: #fff;

    padding: 0.35rem;

}



.payment-qr-panel-meta {

    flex: 1 1 14rem;

    min-width: 0;

}



.payment-qr-panel-meta dl {

    display: grid;

    grid-template-columns: 8.5rem 1fr;

    gap: 0.35rem 0.5rem;

    font-size: var(--text-sm);

}



.payment-qr-panel-meta dt {

    color: var(--slate-500);

    font-weight: 600;

    margin: 0;

}



.payment-qr-panel-meta dd {

    margin: 0;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.15rem;

    font-weight: 600;

    color: var(--slate-800);

}



.btn.is-copied {

    color: var(--status-paid);

    border-color: #86efac;

    background: #f0fdf4;

}



.qr-scan-reader {

    width: 100%;

    min-height: 0;

    border-radius: 0;

    overflow: hidden;

    background: transparent;

    position: relative;

    z-index: 1;

}



.qr-scan-reader:empty {

    display: none;

}



.qr-scan-reader video {

    width: 100% !important;

    display: block;

    border-radius: 0;

}



.spd-qr-modal {

    z-index: 1065;

}



.spd-qr-modal.show {

    z-index: 1065;

}



body:has(.spd-qr-modal.show) .modal-backdrop.show {

    z-index: 1060;

}



/* jen jeden viditelný backdrop */

body:has(.spd-qr-modal.show) .modal-backdrop.show ~ .modal-backdrop.show {

    display: none !important;

}



.spd-qr-modal .modal-dialog {

    max-width: 24rem;

}



.spd-qr-sheet {

    border: none;

    border-radius: 1rem;

    overflow: hidden;

    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);

}



.spd-qr-sheet-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 1rem 1rem 0.85rem;

    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);

    border-bottom: 1px solid var(--slate-100);

}



.spd-qr-sheet-title {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    min-width: 0;

}



.spd-qr-sheet-icon {

    width: 2.35rem;

    height: 2.35rem;

    border-radius: 0.7rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #dbeafe;

    color: #1d4ed8;

    font-size: 1.05rem;

}



.spd-qr-sheet-sub {

    margin-top: 0.2rem;

    font-size: 0.78rem;

    line-height: 1.35;

    color: var(--slate-500);

}



.spd-qr-sheet-body {

    padding: 1rem;

}



.spd-qr-stage {

    position: relative;

    min-height: 9.5rem;

    border-radius: 0.85rem;

    border: 1px dashed var(--slate-300);

    background:

        radial-gradient(circle at 50% 40%, rgba(37, 99, 235, 0.08), transparent 55%),

        var(--slate-50);

    overflow: hidden;

    margin-bottom: 0.85rem;

}



.spd-qr-stage.is-live {

    border-style: solid;

    border-color: #3b82f6;

    min-height: 14rem;

}



.spd-qr-stage-empty {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.45rem;

    color: var(--slate-500);

    font-size: 0.82rem;

    text-align: center;

    padding: 1rem;

    pointer-events: none;

}



.spd-qr-stage-empty i {

    font-size: 1.55rem;

    color: #60a5fa;

}



.spd-qr-stage.is-live .spd-qr-stage-empty,

.spd-qr-stage.has-preview .spd-qr-stage-empty {

    display: none;

}



.spd-qr-actions {

    display: flex;

    flex-direction: column;

    gap: 0.45rem;

}



.spd-qr-actions.is-split {

    display: grid;

    grid-template-columns: 1fr 1fr;

}



.spd-qr-action-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.45rem;

    min-height: 2.4rem;

    font-weight: 600;

}



.spd-qr-error {

    margin-top: 0.75rem;

    padding: 0.55rem 0.7rem;

    border-radius: 0.55rem;

    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #b91c1c;

    font-size: 0.8rem;

}



#qrScanReader img,

.qr-scan-reader img {

    max-width: 100%;

    display: block;

}



@media (max-width: 575.98px) {

    .payment-qr-panel {

        flex-direction: column;

        align-items: center;

    }



    .payment-qr-panel-meta {

        width: 100%;

    }



    .payment-qr-panel-meta dl {

        grid-template-columns: 7rem 1fr;

    }



    .file-upload-camera-btn {

        width: 100%;

    }

}



.logo-preview {

    max-width: 160px;

    max-height: 80px;

    border: 1px solid var(--slate-200);

    border-radius: var(--radius);

    padding: 0.35rem;

    background: #fff;

}



/* ——— ARES ——— */

.ares-lookup-bar {

    padding: 0.55rem 0.65rem;

    background: var(--brand-50);

    border: 1px solid var(--brand-200);

    border-radius: var(--radius-lg);

}



.ares-lookup-bar .form-label {

    color: var(--brand-800);

}



.ares-tabs .nav-link {

    font-size: var(--text-xs);

    font-weight: 600;

    padding: 0.2rem 0.5rem;

    color: var(--brand-800);

    border-radius: var(--radius);

}



.ares-tabs .nav-link.active {

    background: var(--brand-600);

    color: #fff;

}



.ares-search-results {

    margin-top: 0.5rem;

    max-height: 220px;

    overflow-y: auto;

    border: 1px solid var(--slate-200);

    border-radius: var(--radius);

    background: #fff;

}



.ares-search-item {

    display: block;

    width: 100%;

    text-align: left;

    border: 0;

    border-bottom: 1px solid var(--slate-100);

    background: #fff;

    padding: 0.38rem 0.55rem;

    cursor: pointer;

}



.ares-search-item:last-child {

    border-bottom: 0;

}



.ares-search-item:hover {

    background: var(--brand-50);

}



.ares-search-item strong {

    display: block;

    font-size: 0.8125rem;

    color: var(--slate-800);

}



.ares-search-item small {

    display: block;

    color: var(--slate-500);

    font-size: 0.75rem;

}



.panel[data-dpfo-settings] {

    /* Dropdown menus need to escape the panel; keep rounded corners manually. */

    overflow: visible;

}



.panel[data-dpfo-settings] .panel-header {

    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

}



.panel[data-dpfo-settings] .panel-body {

    overflow: visible;

    border-radius: 0 0 var(--radius-lg) var(--radius-lg);

}



.panel[data-dpfo-settings] .col-md-6:has(.dpfo-ciselnik-picker.is-open),

.panel[data-dpfo-settings] .dpfo-fit-grow:has(.dpfo-ciselnik-picker.is-open),

.panel[data-dpfo-settings] .dpfo-ciselnik-picker.is-open {

    position: relative;

    z-index: 45;

}



.dpfo-ciselnik-picker {

    position: relative;

}



.dpfo-fit-row {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    align-items: flex-end;

}



.dpfo-fit-grow {

    flex: 1 1 10rem;

    min-width: min(100%, 10rem);

}



.dpfo-fit-auto {

    flex: 0 1 auto;

    max-width: 100%;

}



.dpfo-fit-auto .form-select {

    width: max-content;

    max-width: 100%;

    field-sizing: content;

}



.dpfo-fit-grow .form-control,

.dpfo-fit-grow .dpfo-ciselnik-picker {

    width: 100%;

}



.dpfo-ciselnik-picker.is-open {

    z-index: 40;

}



.dpfo-ciselnik-menu {

    position: absolute;

    z-index: 1050;

    top: calc(100% + 0.25rem);

    left: 0;

    right: 0;

    max-height: 240px;

    overflow-y: auto;

    border: 1px solid var(--slate-200);

    border-radius: 0.5rem;

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);

    background: #fff;

}



.dpfo-ciselnik-item {

    font-size: 0.8125rem;

    padding: 0.5rem 0.75rem;

}



.empty-state {

    text-align: center;

    padding: 1.75rem 0.75rem;

    color: var(--slate-500);

}



/* Only the decorative empty icon — not icons inside CTAs */

.empty-state > i {

    font-size: 1.75rem;

    margin-bottom: 0.5rem;

    color: var(--slate-300);

}



.empty-state .btn i {

    font-size: inherit;

    margin-bottom: 0;

    color: inherit;

}



.report-tabs {

    display: flex;

    gap: 0.45rem;

    flex-wrap: wrap;

}



.report-tab {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    padding: 0.32rem 0.7rem;

    border-radius: var(--radius);

    border: 1px solid var(--slate-200);

    background: #fff;

    color: var(--slate-600);

    text-decoration: none;

    font-size: var(--text-sm);

    font-weight: 500;

    transition: border-color 0.15s, color 0.15s, background 0.15s;

}



.report-tab:hover {

    border-color: var(--brand-400);

    color: var(--brand-700);

}



.report-tab.active {

    background: var(--brand-600);

    border-color: var(--brand-600);

    color: #fff;

}



.app-tabs {

    display: inline-flex;

    flex-wrap: wrap;

    gap: 3px;

    padding: 3px;

    background: var(--slate-100);

    border-radius: calc(var(--radius-lg) + 3px);

}



.app-tab {

    display: inline-flex;

    align-items: center;

    gap: 0.42rem;

    padding: 0.4rem 0.85rem;

    border-radius: var(--radius);

    color: var(--slate-600);

    text-decoration: none;

    font-size: var(--text-sm);

    font-weight: 500;

    line-height: 1.2;

    border: 0;

    background: transparent;

    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

}



.app-tab i {

    font-size: 0.72rem;

    color: var(--slate-400);

}



.app-tab:hover {

    color: var(--slate-800);

    background: rgba(255, 255, 255, 0.7);

}



.app-tab:hover i {

    color: var(--plan-accent, var(--brand-600));

}



.app-tab.active {

    background: #fff;

    color: var(--slate-900);

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07);

}



.app-tab.active i {

    color: var(--plan-accent, var(--brand-600));

}



.app-tab:focus-visible {

    outline: 2px solid var(--plan-accent, var(--brand-500));

    outline-offset: 1px;

}



.app-code-block {

    display: block;

    margin: 0;

    padding: 0.65rem 0.75rem;

    background: var(--slate-50);

    border-radius: var(--radius);

    font-size: var(--text-xs);

    line-height: 1.55;

    color: var(--slate-700);

    white-space: pre-wrap;

    word-break: break-all;

}



/* ——— Export list (accounting) ——— */

.export-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.export-item {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.65rem 0.75rem;

    border-bottom: 1px solid var(--slate-100);

}



.export-item:last-child {

    border-bottom: 0;

}



.export-item-icon {

    width: 2rem;

    height: 2rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius);

    font-size: 0.8rem;

    flex-shrink: 0;

}



.export-item-icon--invoices {

    background: var(--brand-50);

    color: var(--brand-700);

}



.export-item-icon--unpaid {

    background: #fef3c7;

    color: #b45309;

}



.export-item-icon--expenses {

    background: #fee2e2;

    color: #b91c1c;

}



.export-item-body {

    flex: 1;

    min-width: 0;

}



.export-item-title {

    font-weight: 600;

    font-size: var(--text-sm);

    color: var(--slate-800);

    line-height: 1.3;

}



.export-item-desc {

    font-size: 0.68rem;

    color: var(--slate-500);

    line-height: 1.35;

}



.export-item-formats {

    display: flex;

    flex-wrap: wrap;

    gap: 0.3rem;

    flex-shrink: 0;

    justify-content: flex-end;

}



@media (max-width: 575.98px) {

    .export-item {

        flex-wrap: wrap;

    }



    .export-item-formats {

        width: 100%;

        padding-left: calc(2rem + 0.65rem);

        justify-content: flex-start;

    }

}



.export-format {

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

    padding: 0.15rem 0.45rem;

    font-size: 0.68rem;

    font-weight: 600;

    text-decoration: none;

    color: var(--slate-600);

    background: var(--slate-50);

    border: 1px solid var(--slate-200);

    border-radius: 999px;

    transition: background 0.15s, border-color 0.15s, color 0.15s;

}



.export-format:hover {

    background: var(--brand-50);

    border-color: var(--brand-200);

    color: var(--brand-700);

}



.export-format--pdf:hover {

    background: #fef2f2;

    border-color: #fecaca;

    color: #b91c1c;

}



.export-format--html:hover {

    background: #eff6ff;

    border-color: #bfdbfe;

    color: #1d4ed8;

}



.export-format--xml:hover {

    background: var(--slate-100);

    border-color: var(--slate-300);

    color: var(--slate-800);

}



.export-format i {

    font-size: 0.65rem;

    opacity: 0.85;

}



/* ——— Auth (enterprise split) ——— */

.auth-body {

    min-height: 100vh;

    background: var(--slate-100);

}



.auth-layout {

    display: flex;

    min-height: 100vh;

}



.auth-aside {

    display: none;

    width: 42%;

    max-width: 520px;

    flex-direction: column;

    padding: 2rem 2.5rem;

    background: linear-gradient(165deg, var(--slate-950) 0%, #1a1f3a 45%, var(--brand-900) 100%);

    color: #fff;

    position: relative;

    overflow: hidden;

}



.auth-aside::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.25), transparent 45%),

        radial-gradient(circle at 80% 20%, rgba(20, 184, 166, 0.12), transparent 40%);

    pointer-events: none;

}



.auth-aside > * {

    position: relative;

    z-index: 1;

}



.auth-aside-brand {

    display: block;

    text-decoration: none;

    color: #fff;

    margin-bottom: 2.25rem;

    line-height: 0;

}



.auth-aside-logo {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

}



.auth-aside-mark {

    width: 2.75rem;

    height: 2.75rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius-lg);

    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));

    font-size: 1.15rem;

    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4);

}



.auth-aside-brand strong {

    display: block;

    font-size: 1.15rem;

    font-weight: 700;

    letter-spacing: -0.02em;

}



.auth-aside-brand span {

    display: block;

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: rgba(255, 255, 255, 0.5);

    font-weight: 600;

}



.auth-aside-content {

    flex: 1;

}



.auth-aside-content h2 {

    font-size: 1.65rem;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.03em;

    margin-bottom: 1rem;

}



.auth-aside-content p {

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.95rem;

    line-height: 1.6;

    margin-bottom: 2rem;

}



.auth-aside-features {

    list-style: none;

    padding: 0;

    margin: 0;

}



.auth-aside-features li {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.55rem 0;

    font-size: 0.875rem;

    color: rgba(255, 255, 255, 0.85);

}



.auth-aside-features i {

    width: 1.5rem;

    color: #a5b4fc;

}



.auth-aside-footer {

    display: flex;

    justify-content: space-between;

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.45);

    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.auth-aside-footer a {

    color: rgba(255, 255, 255, 0.6);

    text-decoration: none;

}



.auth-aside-footer a:hover {

    color: #fff;

}



.auth-main {

    flex: 1;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}



.auth-main-inner {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    max-width: 440px;

    width: 100%;

    margin: 0 auto;

    padding: 2rem 1.25rem;

}



.auth-mobile-brand {

    text-align: center;

    margin-bottom: 1.5rem;

}



.auth-mobile-brand a {

    display: inline-block;

    line-height: 0;

    background: #0c1222;

    border-radius: 10px;

    padding: 0.15rem 0.45rem;

    text-decoration: none;

}



.auth-mobile-logo {

    display: block;

    height: 2.15rem;

    width: auto;

    max-width: 16rem;

}



.auth-mobile-brand i {

    color: var(--brand-600);

    margin-right: 0.35rem;

}



.auth-main-footer {

    display: flex;

    justify-content: space-between;

    padding: 1rem 1.25rem;

    font-size: 0.75rem;

    color: var(--slate-500);

    border-top: 1px solid var(--slate-200);

    background: #fff;

}



.auth-main-footer a {

    color: var(--brand-600);

    text-decoration: none;

}



.auth-card {

    background: #fff;

    border: 1px solid var(--slate-200);

    border-radius: var(--radius-lg);

    padding: 1.35rem;

    box-shadow: var(--shadow-md);

}



.auth-card-wide {

    max-width: 100%;

}



.auth-main-inner:has(.auth-card-wide) {

    max-width: 520px;

}



.auth-card h1 {

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 0.2rem;

    letter-spacing: -0.02em;

    color: var(--slate-900);

}



.auth-subtitle {

    color: var(--slate-500);

    font-size: 0.8125rem;

    margin-bottom: 1rem;

}



.auth-links {

    margin-top: 1.25rem;

    text-align: center;

    font-size: 0.8125rem;

    color: var(--slate-500);

}



.auth-links a {

    color: var(--brand-600);

    text-decoration: none;

    font-weight: 500;

}



.auth-links a:hover {

    text-decoration: underline;

}



@media (min-width: 992px) {

    .auth-aside {

        display: flex;

    }

}



/* ——— Plan ——— */

.plan-badge {

    height: 1.35rem;

    padding: 0.12em 0.5rem 0;

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    border-radius: 999px;

    background: var(--plan-badge-bg);

    color: var(--plan-badge-fg);

    border: 1px solid var(--plan-badge-border);

    box-sizing: border-box;

}



/* START — teal / svěží start */

body[data-plan="osvc_start"],

.plan-theme--osvc_start,

.plan-badge--osvc_start {

    --plan-accent: #0f766e;

    --plan-accent-soft: #ccfbf1;

    --plan-accent-strong: #115e59;

    --plan-mark-from: #14b8a6;

    --plan-mark-to: #0f766e;

    --plan-sidebar-bg: #071816;

    --plan-sidebar-active: rgba(20, 184, 166, 0.28);

    --plan-sidebar-border: #2dd4bf;

    --plan-nav-hover: rgba(20, 184, 166, 0.14);

    --plan-nav-active-border: rgba(45, 212, 191, 0.45);

    --plan-nav-icon-active: #5eead4;

    --plan-section-tint: rgba(94, 234, 212, 0.58);

    --plan-topbar-line: #14b8a6;

    --plan-badge-bg: #f0fdfa;

    --plan-badge-fg: #115e59;

    --plan-badge-border: #99f6e4;

    --plan-badge-sidebar-bg: rgba(45, 212, 191, 0.14);

    --plan-badge-sidebar-fg: #99f6e4;

    --plan-badge-sidebar-border: rgba(45, 212, 191, 0.4);

    --plan-badge-sidebar-hover-bg: rgba(45, 212, 191, 0.26);

    --plan-badge-sidebar-hover-fg: #ecfdf5;

    --plan-badge-sidebar-hover-border: rgba(94, 234, 212, 0.65);

    --scrollbar-thumb-hover: rgba(15, 118, 110, 0.55);

    --scrollbar-thumb-active: rgba(15, 118, 110, 0.75);

    --scrollbar-thumb-sidebar: rgba(45, 212, 191, 0.28);

    --scrollbar-thumb-sidebar-hover: rgba(45, 212, 191, 0.48);

}



/* PROFI — modrá / profesionální */

body[data-plan="osvc_pro"],

.plan-theme--osvc_pro,

.plan-badge--osvc_pro {

    --plan-accent: #2563eb;

    --plan-accent-soft: #dbeafe;

    --plan-accent-strong: #1e40af;

    --plan-mark-from: #3b82f6;

    --plan-mark-to: #1d4ed8;

    --plan-sidebar-bg: #0a1220;

    --plan-sidebar-active: rgba(37, 99, 235, 0.3);

    --plan-sidebar-border: #60a5fa;

    --plan-nav-hover: rgba(37, 99, 235, 0.14);

    --plan-nav-active-border: rgba(96, 165, 250, 0.45);

    --plan-nav-icon-active: #93c5fd;

    --plan-section-tint: rgba(147, 197, 253, 0.55);

    --plan-topbar-line: #2563eb;

    --plan-badge-bg: #eff6ff;

    --plan-badge-fg: #1e40af;

    --plan-badge-border: #bfdbfe;

    --plan-badge-sidebar-bg: rgba(96, 165, 250, 0.16);

    --plan-badge-sidebar-fg: #bfdbfe;

    --plan-badge-sidebar-border: rgba(96, 165, 250, 0.4);

    --plan-badge-sidebar-hover-bg: rgba(96, 165, 250, 0.28);

    --plan-badge-sidebar-hover-fg: #eff6ff;

    --plan-badge-sidebar-hover-border: rgba(147, 197, 253, 0.6);

    --scrollbar-thumb-hover: rgba(37, 99, 235, 0.55);

    --scrollbar-thumb-active: rgba(37, 99, 235, 0.75);

    --scrollbar-thumb-sidebar: rgba(96, 165, 250, 0.28);

    --scrollbar-thumb-sidebar-hover: rgba(96, 165, 250, 0.48);

}



/* PREMIUM — jantar / prémiové */

body[data-plan="osvc_accounting"],

.plan-theme--osvc_accounting,

.plan-badge--osvc_accounting {

    --plan-accent: #d97706;

    --plan-accent-soft: #fef3c7;

    --plan-accent-strong: #92400e;

    --plan-mark-from: #f59e0b;

    --plan-mark-to: #b45309;

    --plan-sidebar-bg: #16110a;

    --plan-sidebar-active: rgba(245, 158, 11, 0.28);

    --plan-sidebar-border: #fbbf24;

    --plan-nav-hover: rgba(245, 158, 11, 0.14);

    --plan-nav-active-border: rgba(251, 191, 36, 0.48);

    --plan-nav-icon-active: #fcd34d;

    --plan-section-tint: rgba(252, 211, 77, 0.55);

    --plan-topbar-line: #d97706;

    --plan-badge-bg: #fffbeb;

    --plan-badge-fg: #92400e;

    --plan-badge-border: #fde68a;

    --plan-badge-sidebar-bg: rgba(251, 191, 36, 0.14);

    --plan-badge-sidebar-fg: #fde68a;

    --plan-badge-sidebar-border: rgba(251, 191, 36, 0.42);

    --plan-badge-sidebar-hover-bg: rgba(251, 191, 36, 0.26);

    --plan-badge-sidebar-hover-fg: #fffbeb;

    --plan-badge-sidebar-hover-border: rgba(252, 211, 77, 0.7);

    --scrollbar-thumb-hover: rgba(217, 119, 6, 0.55);

    --scrollbar-thumb-active: rgba(217, 119, 6, 0.75);

    --scrollbar-thumb-sidebar: rgba(251, 191, 36, 0.28);

    --scrollbar-thumb-sidebar-hover: rgba(251, 191, 36, 0.48);

}



.plan-badge--osvc_start,

.plan-badge--osvc_pro,

.plan-badge--osvc_accounting {

    background: var(--plan-badge-bg);

    color: var(--plan-badge-fg);

    border-color: var(--plan-badge-border);

}



.pricing-compare thead th.plan-theme--osvc_start .pricing-compare-plan,

.pricing-compare thead th.plan-theme--osvc_pro .pricing-compare-plan,

.pricing-compare thead th.plan-theme--osvc_accounting .pricing-compare-plan {

    color: var(--plan-accent-strong);

}



.pricing-compare thead th.plan-theme--osvc_start,

.pricing-compare thead th.plan-theme--osvc_pro,

.pricing-compare thead th.plan-theme--osvc_accounting {

    box-shadow: inset 0 3px 0 var(--plan-accent);

}



.pricing-compare-active.plan-theme--osvc_start,

.pricing-compare-active.plan-theme--osvc_pro,

.pricing-compare-active.plan-theme--osvc_accounting {

    background: color-mix(in srgb, var(--plan-accent-soft) 70%, #fff);

}



.plan-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 0.65rem;

}



.plan-card {

    position: relative;

    background: #fff;

    border: 1px solid var(--slate-200);

    border-radius: var(--radius-lg);

    padding: 0.85rem;

    transition: box-shadow 0.2s;

}



.plan-card:hover {

    box-shadow: var(--shadow-md);

}



.plan-card-active {

    border-color: var(--plan-accent);

    box-shadow: 0 0 0 1px var(--plan-accent), var(--shadow-md);

}



.plan-card-badge {

    position: absolute;

    top: 0.85rem;

    right: 0.85rem;

    font-size: 0.62rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--plan-badge-fg);

    background: var(--plan-badge-bg);

    min-height: 1.25rem;

    padding: 0.12em 0.5rem 0;

    border-radius: 999px;

}



.plan-card h3 {

    font-size: 0.95rem;

    margin-bottom: 0.15rem;

}



.plan-price {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--slate-900);

    margin-bottom: 0.5rem;

}



.plan-desc {

    font-size: 0.85rem;

    color: var(--slate-500);

    min-height: 2.5rem;

}



.plan-features {

    list-style: none;

    padding: 0;

    margin: 0 0 0.65rem;

    font-size: var(--text-sm);

}



.plan-features li {

    padding: 0.15rem 0;

}



.plan-features .fa-check {

    color: var(--brand-600);

    margin-right: 0.35rem;

}



/* Plan comparison table (stejné jako landing) */

.app-body .pricing-compare-wrap {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    border: 1px solid var(--slate-200);

    border-radius: var(--radius-lg);

    background: #fff;

}



.app-body .pricing-compare {

    width: 100%;

    min-width: 580px;

    border-collapse: collapse;

    font-size: var(--text-sm);

    margin-bottom: 0;

}



.app-body .pricing-compare th,

.app-body .pricing-compare td {

    padding: 0.55rem 0.75rem;

    border-bottom: 1px solid var(--slate-100);

    text-align: center;

    vertical-align: middle;

}



.app-body .pricing-compare tbody th {

    text-align: left;

    font-weight: 500;

    color: var(--slate-700);

    background: var(--slate-50);

    min-width: 10rem;

    border-right: 1px solid var(--slate-100);

}



.app-body .pricing-compare thead th {

    padding: 0.85rem 0.75rem 0.7rem;

    border-bottom: 1px solid var(--slate-200);

    background: #fff;

    vertical-align: bottom;

}



.app-body .pricing-compare-feature-col {

    text-align: left !important;

    font-size: 0.62rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--slate-500);

    background: var(--slate-50);

    border-right: 1px solid var(--slate-100);

}



.app-body .pricing-compare-plan {

    display: block;

    font-size: 0.95rem;

    font-weight: 800;

    color: var(--slate-900);

    margin-bottom: 0.15rem;

}



.app-body .pricing-compare-price {

    display: block;

    font-size: 1.1rem;

    font-weight: 800;

    color: var(--slate-900);

    line-height: 1.2;

}



.app-body .pricing-compare-price small {

    display: block;

    font-size: 0.65rem;

    font-weight: 500;

    color: var(--slate-500);

    margin-top: 0.05rem;

}



.app-body .pricing-compare-tag {

    margin: 0 0.2rem 0.35rem 0;

    background: var(--brand-600);

    color: #fff;

    font-size: 0.55rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    min-height: 1.15rem;

    padding: 0.12em 0.45rem 0;

    border-radius: 999px;

}



.app-body .pricing-compare-tag-active {

    background: var(--plan-accent);

}



.app-body .pricing-compare-featured {

    background: color-mix(in srgb, var(--plan-accent) 6%, transparent);

    border-left: 1px solid color-mix(in srgb, var(--plan-accent) 14%, transparent);

    border-right: 1px solid color-mix(in srgb, var(--plan-accent) 14%, transparent);

}



.app-body .pricing-compare thead .pricing-compare-featured {

    background: color-mix(in srgb, var(--plan-accent) 10%, transparent);

}



.app-body .pricing-compare-active {

    background: color-mix(in srgb, var(--plan-accent-soft) 55%, #fff);

}



.app-body .pricing-compare-active.pricing-compare-featured {

    background: color-mix(in srgb, var(--plan-accent-soft) 75%, #fff);

}



.app-body .pricing-yes {

    color: var(--teal-600);

    font-size: 0.85rem;

}



.app-body .pricing-no {

    color: #dc2626;

    font-size: 0.8rem;

}



.app-body .pricing-val {

    font-weight: 600;

    color: var(--slate-700);

    font-size: 0.78rem;

}



.app-body .pricing-compare tbody tr:last-child th,

.app-body .pricing-compare tbody tr:last-child td {

    border-bottom: none;

}



.app-body .pricing-compare-cta th,

.app-body .pricing-compare-cta td {

    padding: 0.85rem 0.75rem;

    border-bottom: none;

    background: #fff;

}



.app-body .pricing-compare-cta .pricing-compare-featured {

    background: color-mix(in srgb, var(--plan-accent) 6%, transparent);

    border-left: 1px solid color-mix(in srgb, var(--plan-accent) 14%, transparent);

    border-right: 1px solid color-mix(in srgb, var(--plan-accent) 14%, transparent);

}



.app-body .pricing-compare-cta .pricing-compare-active {

    background: color-mix(in srgb, var(--plan-accent-soft) 70%, #fff);

}



.app-body .pricing-compare-current {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    width: 100%;

    min-height: var(--control-height);

    padding: 0.35rem 0.65rem;

    border-radius: var(--radius);

    font-size: var(--text-sm);

    font-weight: 700;

    letter-spacing: 0.02em;

    color: #fff;

    background: linear-gradient(135deg, var(--plan-mark-from), var(--plan-mark-to));

    border: 0;

    box-shadow: 0 2px 8px color-mix(in srgb, var(--plan-accent) 35%, transparent);

}



.app-body .pricing-compare-current i {

    font-size: 0.85rem;

}



.app-body .plan-theme--osvc_start .pricing-compare-current {

    background: linear-gradient(135deg, #14b8a6, #0f766e);

}



.app-body .plan-theme--osvc_pro .pricing-compare-current {

    background: linear-gradient(135deg, #3b82f6, #1d4ed8);

}



.app-body .plan-theme--osvc_accounting .pricing-compare-current {

    background: linear-gradient(135deg, #f59e0b, #b45309);

}



.usage-meter .usage-label {

    font-size: 0.8rem;

    color: var(--slate-500);

}



.usage-meter .usage-value {

    font-weight: 600;

    margin-bottom: 0.35rem;

}



body.sidebar-open {

    overflow: hidden;

}



/* ——— Dense: Bootstrap & utilities ——— */

.app-body .btn,

.app-body .btn-sm {

    --bs-btn-padding-y: 0;

    --bs-btn-padding-x: var(--control-padding-x);

    --bs-btn-font-size: var(--text-sm);

    --bs-btn-line-height: var(--control-line-height);

    height: var(--control-height);

    min-height: var(--control-height);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.3rem;

    box-sizing: border-box;

}



.app-body .btn-lg {

    height: auto;

    min-height: 2.35rem;

    --bs-btn-padding-y: 0.4rem;

    --bs-btn-padding-x: 0.85rem;

    --bs-btn-font-size: var(--text-base);

}



/* Segmented filters — jedno vnější ohraničení, bez dvojitých borderů */

.app-body .btn-group.btn-group-sm {

    border: 0;

    border-radius: var(--radius);

    overflow: hidden;

    background: #fff;

    box-shadow: var(--shadow-sm);

    height: var(--control-height);

    align-items: stretch;

}



.app-body .btn-group.btn-group-sm > .btn,

.app-body .btn-group.btn-group-sm > .btn.btn-outline-secondary {

    border: 0;

    border-radius: 0;

    margin-left: 0 !important;

    box-shadow: none;

    color: var(--slate-600);

    background: transparent;

    height: 100%;

    min-height: 0;

}



.app-body .btn-group.btn-group-sm > .btn + .btn {

    border-left: 1px solid var(--slate-100) !important;

}



.app-body .btn-group.btn-group-sm > .btn:hover,

.app-body .btn-group.btn-group-sm > .btn.btn-outline-secondary:hover {

    background: var(--slate-50);

    color: var(--slate-800);

    z-index: 1;

}



.app-body .btn-group.btn-group-sm > .btn.active,

.app-body .btn-group.btn-group-sm > .btn.btn-outline-secondary.active {

    background: var(--brand-50);

    color: var(--brand-800);

    font-weight: 600;

    z-index: 2;

}



.app-body .btn-group.btn-group-sm > .btn:focus,

.app-body .btn-group.btn-group-sm > .btn:focus-visible {

    box-shadow: none;

    z-index: 2;

}



.app-body .btn-group.btn-group-sm > form {

    display: flex;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    height: 100%;

    align-items: stretch;

}



.app-body .btn-group.btn-group-sm > form .btn,

.app-body .btn-group.btn-group-sm > form .btn.btn-outline-secondary,

.app-body .btn-group.btn-group-sm > form .btn.btn-outline-primary,

.app-body .btn-group.btn-group-sm > form .btn.btn-outline-success {

    border: 0;

    border-radius: 0;

    margin-left: 0 !important;

    box-shadow: none;

    color: var(--slate-600);

    background: transparent;

    height: 100%;

    min-height: 0;

}



.app-body .btn-group.btn-group-sm > form + form .btn {

    border-left: 1px solid var(--slate-300) !important;

}



.app-body .btn-group.btn-group-sm > form .btn:hover {

    background: var(--slate-50);

    color: var(--slate-800);

    z-index: 1;

}



.app-body .btn-group.btn-group-sm > form .btn.active {

    background: var(--brand-50);

    color: var(--brand-800);

    font-weight: 600;

    z-index: 2;

}



.app-body .btn-group.btn-group-sm > form .btn:focus,

.app-body .btn-group.btn-group-sm > form .btn:focus-visible {

    box-shadow: none;

    z-index: 2;

}



.app-body .alert:not(.app-alert) {

    padding: 0.4rem 0.6rem;

    font-size: var(--text-sm);

    margin-bottom: 0.65rem;

}



.app-body .alert.alert-dismissible:not(.app-alert) {

    padding: 0.45rem 2rem 0.45rem 0.65rem;

    position: relative;

}



.app-body .alert-dismissible:not(.app-alert) .btn-close {

    position: absolute;

    top: 50%;

    right: 0.45rem;

    transform: translateY(-50%);

    padding: 0.2rem;

    margin: 0;

    width: 0.65rem;

    height: 0.65rem;

    background-size: 0.65rem;

}



.app-body .row.g-2 {

    --bs-gutter-x: 0.4rem;

    --bs-gutter-y: 0.4rem;

}



.app-body .row.g-3 {

    --bs-gutter-x: 0.55rem;

    --bs-gutter-y: 0.55rem;

}



.app-body .mb-3 {

    margin-bottom: 0.6rem !important;

}



.app-body .mb-2 {

    margin-bottom: 0.35rem !important;

}



.app-body .mt-3 {

    margin-top: 0.6rem !important;

}



.app-body .py-3 {

    padding-top: 0.6rem !important;

    padding-bottom: 0.6rem !important;

}



.app-body .table {

    font-size: var(--text-sm);

    margin-bottom: 0;

}



.app-body .table > :not(caption) > * > * {

    padding: 0.32rem 0.55rem;

}



.app-body .table thead th {

    font-size: 0.62rem;

    padding: 0.35rem 0.55rem;

}



.app-body .form-check {

    min-height: 1.1rem;

    margin-bottom: 0.25rem;

}



.app-body .form-check-input {

    width: 0.9em;

    height: 0.9em;

    margin-top: 0.15em;

}



.app-body .form-check-label {

    font-size: var(--text-sm);

}



.app-body small,

.app-body .small {

    font-size: 0.68rem;

}



.app-body .progress {

    height: 0.35rem;

}



.auth-body .alert.alert-dismissible {

    padding: 0.45rem 2rem 0.45rem 0.65rem;

    position: relative;

    font-size: var(--text-sm);

}



.auth-body .alert-dismissible .btn-close {

    position: absolute;

    top: 50%;

    right: 0.45rem;

    transform: translateY(-50%);

    padding: 0.2rem;

    margin: 0;

    width: 0.65rem;

    height: 0.65rem;

    background-size: 0.65rem;

}



.auth-body .form-control {

    font-size: var(--text-sm);

    padding: 0.28rem 0.5rem;

}



.auth-body .form-select {

    font-size: var(--text-sm);

    padding: 0.28rem 1.75rem 0.28rem 0.5rem;

    background-position: right 0.45rem center;

}



.auth-body .form-label {

    font-size: var(--text-xs);

    margin-bottom: 0.15rem;

}



.auth-body .mb-3 {

    margin-bottom: 0.6rem !important;

}



.auth-body .btn {

    --bs-btn-padding-y: 0.28rem;

    --bs-btn-font-size: var(--text-sm);

}



/* ——— Responsive ——— */

@media (max-width: 991.98px) {

    .sidebar {

        transform: translateX(-100%);

        box-shadow: var(--shadow-lg);

    }



    .sidebar.open {

        transform: translateX(0);

    }



    .main-content {

        margin-left: 0;

        width: 100%;

        max-width: 100%;

    }



    .detail-grid {

        grid-template-columns: 1fr;

    }



    .app-footer-inner {

        justify-content: center;

        text-align: center;

    }



    .app-footer-left,

    .app-footer-links {

        justify-content: center;

    }

}



@media (max-width: 575.98px) {

    .content-area {

        padding: 0.65rem;

    }



    .topbar {

        padding: 0 0.65rem;

    }



    .stat-card .stat-value {

        font-size: 1rem;

    }



    .table-app {

        font-size: 0.7rem;

    }



    .auth-card {

        padding: 1rem;

    }

}



.onboarding-checklist .onboarding-step {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.35rem 0;

}



.onboarding-checklist .onboarding-step i {

    width: 1.1rem;

    text-align: center;

}



.list-search-form {

    min-width: 180px;

    align-items: center;

    height: var(--control-height);

}



.list-search-form .form-control {

    min-width: 140px;

    height: var(--control-height);

    min-height: var(--control-height);

}



.list-search-form .btn {

    height: var(--control-height);

    min-height: var(--control-height);

    flex-shrink: 0;

}



/* Horní lišty seznamů — filtry + akce ve stejné výškové linii */

.content-area > .d-flex.justify-content-between.align-items-center.mb-3 {

    min-height: var(--control-height);

    align-items: center !important;

}



.content-area > .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex {

    align-items: center !important;

    min-height: var(--control-height);

}



.list-pagination .pagination {

    flex-wrap: wrap;

}



.list-export-bar {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;

    padding: 0.45rem 0.65rem;

    border-top: 1px solid var(--slate-200);

    background: var(--slate-25, #fcfcfd);

}



.list-export-label {

    font-size: var(--text-xs);

    color: var(--slate-500);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.list-export-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

}



.receipt-file-preview-pop {

    position: fixed;

    z-index: 1090;

    width: max-content;

    max-width: min(340px, calc(100vw - 16px));

    padding: 0.25rem;

    background: #fff;

    border: 1px solid var(--slate-200);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg, 0 12px 40px rgba(15, 23, 42, 0.12));

    pointer-events: auto;

    line-height: 0;

}



.receipt-file-preview-pop[hidden] {

    display: none !important;

}



.receipt-file-preview-inner {

    line-height: 0;

}



.receipt-file-preview-inner img {

    display: block;

    max-width: min(330px, calc(100vw - 24px));

    max-height: min(70vh, 440px);

    width: auto;

    height: auto;

    border-radius: var(--radius);

    object-fit: contain;

    object-position: center;

    background: transparent;

}



.receipt-file-preview-pdf {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.25rem;

    min-width: 140px;

    padding: 1rem 0.85rem;

    color: var(--slate-700);

    text-align: center;

    line-height: 1.35;

}



.receipt-file-preview-pdf i {

    font-size: 1.75rem;

    color: #dc2626;

}



.receipt-file-preview-pdf span {

    font-size: var(--text-sm);

    font-weight: 600;

}



.receipt-file-preview-pdf small {

    font-size: var(--text-xs);

    color: var(--slate-500);

}



.row-actions-dropdown .dropdown-toggle::after {

    display: none;

}



.item-row-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 0.25rem;

}



.pay-body {

    min-height: 100vh;

    margin: 0;

    background: #eef2f6;

    color: #0f172a;

    font-family: Inter, "Segoe UI", sans-serif;

}



.pay-card {

    max-width: 420px;

    margin: 2.5rem auto;

    padding: 1.75rem 1.5rem 1.5rem;

    background: #fff;

    border-radius: 16px;

    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);

}



.pay-brand {

    font-weight: 700;

    letter-spacing: 0.02em;

    color: #0f766e;

    margin-bottom: 0.35rem;

}



.pay-kicker {

    color: #64748b;

    font-size: 0.9rem;

}



.pay-amount {

    font-size: 2rem;

    font-weight: 700;

    margin: 0 0 0.5rem;

}



.pay-qr {

    text-align: center;

    margin: 1rem 0 1.25rem;

}



.pay-qr img {

    width: 220px;

    height: 220px;

    background: #fff;

}



.pay-facts {

    display: grid;

    gap: 0.65rem;

    margin: 0 0 1rem;

}



.pay-facts div {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    border-top: 1px solid #f1f5f9;

    padding-top: 0.5rem;

}



.pay-facts dt {

    margin: 0;

    color: #64748b;

    font-weight: 500;

    font-size: 0.85rem;

}



.pay-facts dd {

    margin: 0;

    font-weight: 600;

    text-align: right;

}



.pay-foot {

    margin-top: 1rem;

    color: #64748b;

    font-size: 0.8rem;

}