body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
}


button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.role-select,
.filter-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2rem; /* Necháme miesto pre šípku */
    background-image: none;
}
.responsive-table {
    table-layout: fixed;
    width: 100%; /* Pre istotu explicitne definujeme plnú šírku */
}
.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
#customer-modal.is-new-customer-view .editable-section {
    background-color: #fefce8; /* bg-yellow-50 */
    border: 1px solid #fde047; /* border-yellow-300 */
    border-radius: 0.75rem;
}

/* Zašednutie sekcií, ktoré sa nedajú vyplniť */
#customer-modal.is-new-customer-view .disabled-section {
    opacity: 0.5;
    filter: grayscale(80%);
    transition: all 0.3s ease-in-out;
}
.select-wrapper .lucide-chevron-down {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Aby sa dalo kliknúť cez ikonu na select */
    color: #6b7280;
}

/* Loading spinner */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.loader-small {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.timeline-item {
    position: relative;
    padding-left: 2.5rem;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.timeline-line {
    position: absolute;
    left: 1rem;
    top: 2rem;
    bottom: 0;
    width: 2px;
    background-color: #e2e8f0;
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.metric-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.modal {
    /* Pozícia a centrovanie */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;

    /* Vnútorné usporiadanie */
    flex-direction: column;
    max-height: 90vh;
    
    /* OPRAVA: Vymazané overflow: hidden, ktoré spôsobovalo miznutie okien */
    /* overflow: hidden; */ 
    
    background-color: white; 
}
.modal-body {
    overflow-y: auto; /* Umožní rolovanie IBA v tele modálu */
    flex-grow: 1;     /* Telo sa natiahne, aby vyplnilo všetko voľné miesto v modále */
    min-height: 0;    /* Dôležitý trik pre správne fungovanie flexboxu */
}

.modal form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.scrollable-table-container {
    max-height: 60vh; /* Maximálna výška, môžete si upraviť podľa potreby */
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.collapsible-content.expanded {
    max-height: 500px; /* Dostatočne veľká hodnota, aby sa zmestil obsah */
}
.collapsible-trigger {
    cursor: pointer;
}
.shortcut-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* medium */
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #e2e8f0; /* slate-200 */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.shortcut-btn:hover {
    background-color: #e2e8f0; /* slate-200 */
    border-color: #cbd5e1; /* slate-300 */
    color: #1e293b; /* slate-800 */
}
.metric-value {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* bold */
    margin-top: 0.5rem; /* mt-2 */
}

.metric-value-small {
    font-size: 1.125rem; /* text-xl */
    font-weight: 600; /* semibold */
    margin-top: 0.5rem; /* mt-2 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-good {
    color: #16a34a; /* green-600 */
}
.metric-info {
    color: #3b82f6; /* blue-500 */
}
.warning-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #f97316; /* amber-500 */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
}

.metric-bad {
    color: #dc2626; /* red-600 */
}
.metric-warning {
    color: #f59e0b; /* amber-500 */
}

.goal-progress-bar {
    background-color: #e2e8f0; /* slate-200 */
    border-radius: 9999px;
    height: 1.25rem; /* h-5 */
    width: 100%;
    overflow: hidden;
}

.goal-progress-fill {
    background-color: #2563eb; /* blue-600 */
    height: 100%;
    text-align: center;
    color: white;
    font-size: 0.75rem; /* text-xs */
    line-height: 1.25rem; /* leading-5 */
    transition: width 0.5s ease-in-out;
}

.metric-comparison {
    font-size: 0.875rem; /* text-sm */
    color: #64748b; /* slate-500 */
    font-weight: 500; /* medium */
}

.metric-warning {
    color: #f59e0b; /* amber-500 */
}

.metric-gold {
    color: #ca8a04; /* yellow-600 */
    text-shadow: 0 0 8px rgba(202, 138, 4, 0.3);
}
.toggle-label {
    cursor: pointer;
    width: 44px; height: 24px;
    background: #cbd5e1; /* slate-300 */
    display: block;
    border-radius: 100px;
    position: relative;
}
.toggle-label:after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}
.channel-toggle:checked + .toggle-label {
    background: #2563eb; /* blue-600 */
}
.channel-toggle:checked + .toggle-label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}
main.flex-1 {
    min-height: 0;
}
.lead-view-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    background-color: #f1f5f9;
    color: #475569;
    transition: all 0.2s ease-in-out;
}
.filter-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border: 1px solid #e2e8f0; /* slate-200 */
    background-color: white;
    color: #475569; /* slate-600 */
}

.filter-btn:hover {
    background-color: #f1f5f9; /* slate-100 */
}
.stat-item {
    background-color: white;
    padding: 1rem; /* 16px */
    border-radius: 0.75rem; /* 12px */
    border: 1px solid #e2e8f0; /* slate-200 */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.stat-label {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: #64748b; /* slate-500 */
    margin-bottom: 0.5rem; /* 8px */
}

.stat-value {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    color: #1e293b; /* slate-800 */
    line-height: 1;
}

.stat-sub-value {
    font-size: 0.875rem; /* 14px */
    color: #475569; /* slate-600 */
    margin-top: 0.25rem; /* 4px */
}

/* Štýly pre nový panel s nástrojmi */
.control-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem; /* 24px */
    padding: 1rem; /* 16px */
    background-color: white;
    border-radius: 0.75rem; /* 12px */
    border: 1px solid #e2e8f0; /* slate-200 */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.filter-btn.active-filter {
    background-color: #4f46e5; /* indigo-600 */
    color: white;
    border-color: #4f46e5;
}
.bestseller-text {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    color: #1e293b; /* slate-800 */
    line-height: 1.3; /* Mierne väčšie riadkovanie pre čitateľnosť */
    margin-top: 0.5rem;
    word-break: break-word; /* Kľúčová vlastnosť pre zalomenie dlhých slov */
    flex-grow: 1; /* Zabezpečí, že text vyplní dostupný priestor */
}
.lead-view-btn:hover {
    background-color: #e2e8f0;
}
.lead-view-btn.active-view-btn {
    background-color: #3b82f6;
    color: white;
    font-weight: 600;
}
aside#sidebar {
    transition: transform 0.3s ease-in-out;
}
aside#sidebar.is-open {
    transform: translateX(0);
}
/* Responzívne štýly pre tabuľky na mobiloch */
@media (max-width: 767px) {
    /* Skryjeme hlavičku tabuľky */
    .responsive-table thead {
        display: none;
    }

    /* Riadok tabuľky sa zmení na kartu */
    .responsive-table tr {
        display: block;
        border-bottom: 2px solid #e2e8f0; /* slate-200 */
        margin-bottom: 1rem;
    }
    
    .responsive-table td {
        display: block;
        text-align: right; /* Zarovnáme obsah bunky doprava */
        padding-left: 50%; /* Vytvoríme miesto pre popisok */
        position: relative;
        border-bottom: 1px solid #f1f5f9; /* Jemná čiara medzi "riadkami" karty */
    }

    .responsive-table td:last-child {
        border-bottom: 0;
    }
    #sales-script-questions li {
    background-color: #f1f5f9; /* farba: slate-100 */
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem; /* zaoblenie: rounded-md */
    border: 1px solid #e2e8f0; /* farba orámovania: slate-200 */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    font-size: 0.875rem; /* veľkosť písma: text-sm */
    color: #334155; /* farba textu: slate-700 */
    display: flex; /* pre zarovnanie ikony a textu */
    align-items: center; /* vertikálne centrovanie */
}
.sortable-header {
    cursor: pointer;
    user-select: none; /* Zabráni označovaniu textu pri klikaní */
}
.sortable-header:hover {
    background-color: #e2e8f0; /* slate-200 */
}
.sort-icon {
    display: inline-block;
    width: 1em;
    vertical-align: middle;
}
#sales-script-questions li:hover {
    background-color: #e2e8f0; /* farba: slate-200 */
    border-color: #cbd5e1; /* farba orámovania: slate-300 */
}

    /* Vytvoríme popisky z data-label atribútu */
    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem; /* px-3 */
        width: calc(50% - 1.5rem);
        padding-right: 0.75rem;
        text-align: left;
        font-weight: 600; /* semibold */
        color: #475569; /* slate-600 */
    }
}  
/* ===== NOVÉ ŠTÝLY PRE FUNNEL KARTU (APPLE ŠTÝL) ===== */

/* Hlavný kontajner pre nový vizuál funnelu */
.funnel-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Medzera medzi prvkami */
    padding: 1rem 0; /* Vnútorný padding */
}

/* Blok pre jednotlivý krok vo funneli */
.funnel-step {
    background-color: #f8fafc; /* Veľmi svetlo šedá (slate-50) */
    border-radius: 0.75rem; /* Zaoblené rohy */
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1; /* Bloky sa roztiahnu, aby vyplnili priestor */
    border: 1px solid #e2e8f0; /* Jemný okraj (slate-200) */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* Jemný tieň */
    transition: all 0.2s ease-in-out;
}

/* Ikona nad číslom */
.funnel-step-icon {
    margin: 0 auto 0.75rem auto; /* Vycentrovanie a spodný margin */
    background-color: #eef2ff; /* Svetlo indigová (indigo-100) */
    color: #4f46e5; /* Tmavá indigová (indigo-600) */
    border-radius: 50%; /* Urobí z nej kruh */
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Veľké číslo metriky */
.funnel-step-value {
    font-size: 2.25rem; /* Veľkosť písma */
    line-height: 2.5rem;
    font-weight: 700; /* Tučné */
    color: #1e293b; /* Tmavšia šedá (slate-800) */
}

/* Popisok pod číslom */
.funnel-step-label {
    margin-top: 0.25rem;
    font-size: 0.875rem; /* Menšie písmo */
    line-height: 1.25rem;
    color: #64748b; /* Stredne šedá (slate-500) */
    min-height: 24px; /* Zabezpečí rovnakú výšku aj pri rôzne dlhých textoch */
}
/* Štýly pre prepínanie záložiek v karte zákazníka */
.customer-task-tab-link {
    border-bottom: 2px solid transparent;
    padding: 8px 4px;
    font-weight: 500;
    color: #64748b; /* slate-500 */
}
.customer-task-tab-link:hover {
    border-bottom-color: #94a3b8; /* slate-400 */
    color: #334155; /* slate-700 */
}
.customer-task-tab-link.active-tab {
    border-bottom-color: #3b82f6; /* blue-500 */
    color: #1e40af; /* blue-800 */
}

/* Jemné animácie pre zoznam úloh */
#my-tasks-list > div, #assigned-tasks-list > div {
    transition: all 0.2s ease-in-out;
}
#my-tasks-list > div:hover, #assigned-tasks-list > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
/* Styly pre zalozky v Ulohach */
.tasks-tab-link {
    padding: 8px 4px;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    color: #64748b; /* slate-500 */
}
.tasks-tab-link:hover {
    border-bottom-color: #94a3b8; /* slate-400 */
    color: #334155; /* slate-700 */
}
.tasks-tab-link.active-tab {
    border-bottom-color: #3b82f6; /* blue-500 */
    color: #1e40af; /* blue-800 */
}
.is-editing {
    background-color: #FFFBEB !important; /* Svetložltá farba (Tailwind: bg-yellow-50) */
    border-color: #FBBF24 !important;    /* Tmavšia žltá (Tailwind: border-yellow-400) */
}
/* Štýl pre zelenú guličku s číslom (úlohy na dnes) */
.notification-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background-color: #22c55e; /* Zelená farba */
    border-radius: 50%;
    box-shadow: 0 0 0 2px white; /* Biely okraj vytvorený cez tieň */
}
/* Šípka a konverzný pomer medzi blokmi */
.funnel-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Zamedzí zmenšovaniu */
    min-width: 120px;
}

/* "Pilulka" pre konverzný pomer */
.funnel-conversion-pill {
    margin-top: 0.5rem;
    background-color: #f1f5f9; /* Svetlejšia šedá (slate-100) */
    color: #334155; /* Tmavšia šedá (slate-700) */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Plne zaoblené */
    font-size: 0.875rem;
    font-weight: 600; /* Mierne tučné */
}
/* ===== NOVÉ ŠTÝLY PRE VIZUÁL PREPÍNAČA ===== */

/* Skryje pôvodný, škaredý checkbox */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Základný vzhľad "koľajničky" prepínača */
.toggle-label {
    position: relative;
    display: inline-block;
    width: 44px;  /* Šírka prepínača */
    height: 24px; /* Výška prepínača */
    background-color: #cbd5e1; /* Predvolená sivá farba (slate-300) */
    border-radius: 9999px; /* Úplne zaoblené rohy */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
/* Štýl pre notifikačnú bodku priamo pri úlohe */
.comment-notification-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px; /* Zmenšené z 10px */
    height: 8px; /* Zmenšené z 10px */
    border-radius: 50%;
    border: 1px solid white; /* Zmenšené z 2px */
}
/* Kontajner pre notifikácie v hlavnom menu */
.badge-container {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 5px; /* ZMENA: Pridali sme medzeru medzi číslo a bodky */
}
.notification-badge-wrapper {
    position: relative;
    /* ZMENA: Odstránený z-index: 5; */
}
.dots-wrapper {
    display: flex;
    position: relative;
    /* ZMENA: Odstránený z-index: 10; a margin-left: -8px; */
}

/* Štýl pre notifikačné bodky (žltá/červená) */
.menu-notification-dot {
    width: 9px;   /* ZMENA: Zmenšené z 12px */
    height: 9px;  /* ZMENA: Zmenšené z 12px */
    border-radius: 50%;
    box-shadow: 0 0 0 1px white; /* ZMENA: Tenší biely okraj */
    margin-left: -3px; /* ZMENA: Upravené prekrytie pre menšiu veľkosť */
}
/* Zlepší viditeľnosť odkazov v modrej bubline komentára */
.bg-blue-500 a.text-blue-600 {
    color: white;
    text-decoration: underline;
}

.bg-blue-500 a.text-blue-600:hover {
    text-decoration: none;
}
/* Štýly pre nový multi-select dropdown */
#task-assignee-multiselect .assignee-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
}

#task-assignee-multiselect .assignee-option:hover {
    background-color: #f1f5f9; /* slate-100 */
}

#task-assignee-multiselect .assignee-option input[type="checkbox"] {
    margin-right: 10px;
    height: 16px;
    width: 16px;
    border-radius: 4px;
    border-color: #cbd5e1; /* slate-300 */
    color: #3b82f6; /* blue-500 */
}
#add-task-form-container.is-editing #cancel-task-edit-btn {
    display: block;
}
#task-assignee-multiselect .assignee-option input[type="checkbox"]:focus {
    box-shadow: 0 0 0 2px #3b82f6; /* blue-500 */
}

/* Vzhľad bieleho "gombíka" prepínača */
.toggle-label::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* ===== NOVÉ ŠTÝLY PRE SEKCIU STAROSTLIVOSŤ ===== */

.client-care-card {
    background-color: white;
    border-radius: 0.75rem; /* 12px */
    border: 1px solid #e2e8f0; /* slate-200 */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: all 0.2s ease-in-out;
}

.client-care-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.pulse-status-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pulse-status-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--pulse-color, #22c55e); /* Predvolená zelená */
    transform: rotate(45deg);
    transition: transform 0.5s ease-out;
    transform: rotate(calc(45deg + var(--pulse-progress, 0) * 3.6deg));
}

.pulse-ok { --pulse-color: #22c55e; background-color: #f0fdf4; color: #166534; } /* green */
.pulse-due { --pulse-color: #f59e0b; background-color: #fffbeb; color: #92400e; } /* amber */
.pulse-overdue { --pulse-color: #ef4444; background-color: #fef2f2; color: #991b1b; } /* red */

.attendance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); /* ZVÄČŠENÉ */
    gap: 0.5rem;
}

.attendance-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;  /* ZVÄČŠENÉ */
    height: 48px; /* ZVÄČŠENÉ */
    border-radius: 50%;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    font-size: 0.875rem; /* 14px - Ponecháme pôvodnú veľkosť */
}

.attendance-day.present {
    background-color: #dcfce7; /* green-100 */
    color: #166534; /* green-800 */
    border-color: #22c55e; /* green-500 */
}

.attendance-day.absent {
    background-color: #fee2e2; /* red-100 */
    color: #991b1b; /* red-800 */
    border-color: #ef4444; /* red-500 */
}

.attendance-day:not(.present):not(.absent) {
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
}

.attendance-day:hover:not(.present):not(.absent) {
    transform: scale(1.1);
    background-color: #e2e8f0;
}

.high-priority-badge {
    display: inline-flex; /* Kľúčová vlastnosť pre zarovnanie ikony a textu */
    align-items: center;   /* Vertikálne vycentruje obsah */
    gap: 0.25rem;          /* Vytvorí malú medzeru medzi ikonou a textom */
    flex-shrink: 0;        /* Zamedzí zmenšovaniu odznaku */
    background-color: #dc2626; /* red-600 */
    color: white;
    font-size: 0.75rem; /* text-xs */
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
/* ===== Štýly pre vizuálnu dochádzku na karte ===== */
.attendance-dot-container {
    display: flex;
    gap: 6px; /* Medzera medzi guličkami */
    align-items: center;
}

.attendance-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.attendance-dot.present {
    background-color: #22c55e; /* Zelená */
}

.attendance-dot.absent {
    background-color: #ef4444; /* Červená */
}

.attendance-dot.pending {
    background-color: #e2e8f0; /* Sivá */
}
.warning-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #f59e0b; /* amber-500 */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
}

/* KĽÚČOVÁ ČASŤ: Pravidlo pre zmenu vzhľadu, keď je prepínač ZAPNUTÝ */
input:checked + .toggle-label {
    background-color: #3b82f6; /* Modrá farba (blue-500) */
}

input:checked + .toggle-label::before {
    transform: translateX(20px); /* Posunie biely gombík doprava */
}
/* ===== NOVÉ ŠTÝLY PRE KARTU LEADU (Apple Redesign) ===== */

/* Základné sekcie v pravom paneli */
.info-section {
    padding-bottom: 1.5rem; /* 24px */
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
}
.info-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.info-section-title {
    display: flex;
    align-items: center;
    font-size: 1rem; /* 16px */
    font-weight: 600; /* semibold */
    color: #334155; /* slate-700 */
    margin-bottom: 1rem; /* 16px */
}
.info-section-icon {
    width: 1.125rem; /* 18px */
    height: 1.125rem; /* 18px */
    margin-right: 0.75rem; /* 12px */
    color: #94a3b8; /* slate-400 */
}

/* Štýly pre inputy a labely v pravom paneli */
.info-label {
    display: block;
    font-size: 0.75rem; /* 12px */
    font-weight: 500; /* medium */
    color: #64748b; /* slate-500 */
}
.info-input {
    margin-top: 0.25rem; /* 4px */
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem; /* 8px 12px */
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 0.5rem; /* 8px */
    background-color: white;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-size: 0.875rem; /* 14px */
}
.info-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 2px #bfdbfe; /* blue-200 */
}

/* Štýly pre malé kartičky so statusom */
.status-card {
    background-color: white;
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.75rem; /* 12px */
    padding: 0.75rem; /* 12px */
}
.status-card-label {
    display: flex;
    align-items: center;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    color: #475569; /* slate-600 */
}
.status-card-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 0.25rem 1.5rem 0.25rem 0;
    font-weight: 600;
    color: #1e293b; /* slate-800 */
    font-size: 0.875rem; /* 14px */
}
.status-card-select:focus {
    outline: none;
}

/* Štýly pre interaktívny skript */
.sales-script-question-pill {
    padding: 0.375rem 0.875rem; /* 6px 14px */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
    border-radius: 9999px; /* rounded-full */
    border: 1px solid #e2e8f0; /* slate-200 */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.sales-script-question-pill:hover {
    background-color: #e2e8f0; /* slate-200 */
    border-color: #cbd5e1; /* slate-300 */
    color: #1e293b; /* slate-800 */
    transform: translateY(-1px);
}
/* ===== FINÁLNA OPRAVA ZOBRAZENIA DLHÝCH NÁZVOV ÚLOH ===== */

/* Krok 1: Prikážeme obom kontajnerom (vľavo aj vpravo), aby sa v prípade potreby zmenšili.
           Toto je kľúčový fix pre flexbox layout. */
#my-tasks-list .min-w-0, 
#assigned-tasks-list .min-w-0 {
    flex-shrink: 1;
}

/* Krok 2: V detaile úlohy (v modálnom okne) zabezpečíme správne zalomenie na viac riadkov. */
#task-detail-title {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
/* ===== ČASŤ 2 (UPRAVENÁ): ZALOMENIE SA MENÍ NA SKRÁTENIE S TROMI BODKAMI ===== */

#my-tasks-list .min-w-0, 
#assigned-tasks-list .min-w-0 {
    flex-shrink: 1; /* Toto zostáva, je to dôležité pre flexbox */
}

#my-tasks-list .view-task-detail-btn,
#assigned-tasks-list .view-task-detail-btn {
    white-space: nowrap;      /* KĽÚČOVÁ ZMENA: Zabraňuje zalomeniu na viac riadkov */
    overflow: hidden;         /* KĽÚČOVÁ ZMENA: Skryje text, ktorý preteká */
    text-overflow: ellipsis;  /* KĽÚČOVÁ ZMENA: Pridá "..." na koniec skrytého textu */
    display: block;           /* Zostáva, zabezpečí správne správanie */
}

/* Toto pravidlo pre titulok v detaile úlohy (v modálnom okne) necháme, tam je zalomenie v poriadku */
#task-detail-title {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
.key-info-input {
    margin-top: 0.25rem;
    display: block;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
}
#key-info-display p { /* Pre lepšie formátovanie zobrazených textov */
    white-space: pre-wrap;
    margin-top: 0.1rem;
}
/* --- Štýly pre animáciu dokončenia úlohy --- */
.task-item.completing {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.4s ease-in-out 0.1s;
    opacity: 0;
    transform: translateX(-20px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: -1px; /* Aby sa prvky pod ňou plynulejšie posunuli */
    border-width: 0;
    overflow: hidden;
}
/* Toto je hlavný prepínač. Keď má body túto triedu, všetko sa rozmaže */
body.privacy-mode-enabled .blur-stats {
    filter: blur(6px);
    transition: filter 0.2s ease-in-out;
    user-select: none; /* Zabráni označeniu a kopírovaniu textu */
    pointer-events: none; /* Zabráni hover efektom na rozmazaných číslach */
}

body.privacy-mode-enabled .metric-value,
body.privacy-mode-enabled .stat-value,
body.privacy-mode-enabled .funnel-step-value,
body.privacy-mode-enabled .funnel-conversion-pill,
body.privacy-mode-enabled .metric-comparison strong,
body.privacy-mode-enabled .stat-sub-value,
body.privacy-mode-enabled #metric-customer-ltv,
body.privacy-mode-enabled #metric-customer-orders,
body.privacy-mode-enabled #metric-mrr,
body.privacy-mode-enabled #metric-active-subscribers,
body.privacy-mode-enabled #metric-avg-sub-duration,
body.privacy-mode-enabled #metric-churn-rate,
body.privacy-mode-enabled #metric-arpa,
body.privacy-mode-enabled #metric-mrr-ltv,
body.privacy-mode-enabled #metric-new-subs-30d,
body.privacy-mode-enabled #metric-projected-mrr,
body.privacy-mode-enabled #metric-custom-churn-rate,
body.privacy-mode-enabled #marketing-total-spend-card,
body.privacy-mode-enabled #marketing-all-time-spend-card,
body.privacy-mode-enabled #metric-waiting-reply-clients,
body.privacy-mode-enabled #metric-warning-clients,
body.privacy-mode-enabled #metric-high-priority-clients,
body.privacy-mode-enabled #metric-payback-multiplier,
body.privacy-mode-enabled #metric-payback-actual,
body.privacy-mode-enabled #metric-payback-target,
body.privacy-mode-enabled #metric-bestseller,
body.privacy-mode-enabled #metric-bestseller-sales {
    filter: blur(10px);
    transition: filter 0.2s ease-in-out;
    user-select: none;
    pointer-events: none;
}

/* Špeciálne pravidlá pre tabuľky */
body.privacy-mode-enabled [data-label="LTV"],
body.privacy-mode-enabled [data-label="LTGP"],
body.privacy-mode-enabled [data-label="CAC"],
body.privacy-mode-enabled .leaderboard-value,
body.privacy-mode-enabled .marketing-spend-value,
body.privacy-mode-enabled .subscription-ltgp-cell,
body.privacy-mode-enabled .purchase-price-cell,
body.privacy-mode-enabled .subscription-price-cell,
body.privacy-mode-enabled .deposit-price-cell,
body.privacy-mode-enabled [title*="Marža"],
body.privacy-mode-enabled .product-price-cell,
/* --- PRIDANÉ PRE MARŽU V TABUĽKE --- */
body.privacy-mode-enabled .product-margin-cell {
    filter: blur(10px);
    transition: filter 0.2s ease-in-out;
    user-select: none;
    pointer-events: none;
}
/* ===== APPLE STYLE TIER BADGE ===== */
.customer-tier-badge {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 10px;          /* Veľmi malé, elegantné písmo */
    font-weight: 700;         /* Tučné pre čitateľnosť */
    text-transform: uppercase; /* Všetko veľkým */
    letter-spacing: 0.05em;   /* Jemne roztiahnuté písmená */
    
    padding: 3px 8px;         /* Vnútorný priestor */
    border-radius: 999px;     /* Plne zaoblené (pill shape) */
    
    /* Jemný okraj a tieň pre hĺbku */
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    
    white-space: nowrap;      /* Zabráni zalomeniu textu */
    line-height: 1;           /* Vertikálne centrovanie */
    display: inline-flex;     /* Flex pre centrovanie obsahu */
    align-items: center;
    
    /* Prechod pri hoveri (voliteľné) */
    transition: transform 0.2s ease;
}

.customer-tier-badge:hover {
    transform: scale(1.02);
}
/* ===== APPLE-STYLE KOMUNIKAČNÉ TLAČIDLÁ ===== */

.comms-bar {
    display: flex;
    align-items: center;
    gap: 8px; /* Medzera medzi tlačidlami */
    padding-left: 8px;
}

.btn-apple-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; /* O niečo väčšie pre lepší dotyk */
    height: 42px;
    border-radius: 12px; /* iOS Squircle shape */
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); /* Jemný tieň */
    position: relative;
    overflow: hidden;
}

/* Hover efekt - jemné nadvihnutie */
.btn-apple-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    filter: brightness(1.05);
}

/* Klik efekt - stlačenie */
.btn-apple-action:active {
    transform: scale(0.94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Farby podľa značiek --- */

/* WhatsApp - Oficiálna zelená s jemným gradientom */
.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

/* iMessage / SMS - Apple Blue */
.btn-imessage {
    background: linear-gradient(135deg, #007AFF, #0062cc);
}

/* Telefón - iOS Green */
.btn-call-ios {
    background: linear-gradient(135deg, #34C759, #28a745);
}

/* Knižnica - Neutrálna, sklenený efekt */
.btn-library {
    background-color: #F3F4F6; /* Slate 100 */
    color: #475569; /* Slate 600 */
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.btn-library:hover {
    background-color: #ffffff;
    color: #2563eb; /* Blue pri hoveri */
    border-color: #bfdbfe;
}

/* Ikona vnútri tlačidla */
.btn-apple-action i, 
.btn-apple-action svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5px; /* Trochu hrubšie čiary pre moderný vzhľad */
}
/* ===== APPLE SMART REPLIES UI ===== */

/* Sklenený panel */
.smart-replies-modal {
    background-color: rgba(255, 255, 255, 0.85); /* Mliečne sklo */
    backdrop-filter: blur(20px); /* Rozmazanie pozadia */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    animation: slideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpFade {
    from { transform: translateY(20px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Kategórie (Zoznam skriptov) */
.smart-script-item {
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smart-script-item:hover {
    background-color: rgba(0, 122, 255, 0.1); /* Apple Blue Tint */
    color: #007AFF;
}

/* Bubliny správ */
.reply-bubble {
    background: white;
    padding: 12px 16px;
    border-radius: 18px;
    border-bottom-right-radius: 4px; /* Efekt bubliny */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    color: #1e293b;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    text-align: left;
    display: block;
    width: 100%;
}

.reply-bubble:hover {
    transform: scale(1.02) translateX(5px);
    box-shadow: 0 8px 15px rgba(0, 122, 255, 0.15);
    border-color: #007AFF;
    background: linear-gradient(135deg, #ffffff, #f0f9ff);
}

.reply-bubble:active {
    transform: scale(0.98);
}

/* Tag pre premenné v texte (napr. Meno) */
.variable-highlight {
    background-color: #dbeafe;
    color: #1d4ed8;
    padding: 0 4px;
    border-radius: 4px;
    font-weight: 600;
}
/* ===== ZBALENIE BOČNÉHO MENU (COLLAPSE) ===== */

/* 1. Zúženie postranného panela - LEN PRE DESKTOP */
@media (min-width: 768px) {
    body.sidebar-collapsed aside#sidebar {
        width: 5rem !important; /* 80px */
    }
}

/* 2. Posunutie hlavného obsahu doľava */
@media (min-width: 768px) {
    body.sidebar-collapsed main {
        left: 5rem !important; /* 80px */
    }
}

/* 3. Skrytie všetkých textov v menu */
body.sidebar-collapsed .sidebar-text {
    display: none !important;
}

/* 4. Centrovanie ikoniek a úprava paddingov */
body.sidebar-collapsed #main-nav a {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
body.sidebar-collapsed #main-nav a i {
    margin-right: 0;
}

/* 5. Úprava hlavičky a profilu */
body.sidebar-collapsed #sidebar-header {
    padding-left: 1rem;
    padding-right: 1rem;
    justify-content: center;
}
body.sidebar-collapsed #user-profile img {
    margin-right: 0;
}
body.sidebar-collapsed #user-profile {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
/* Skrytie tlačidla na odhlásenie textu */
body.sidebar-collapsed #sign-out-btn span {
    display: none;
}
body.sidebar-collapsed #sign-out-btn {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
body.sidebar-collapsed #sign-out-btn i {
    margin-right: 0;
}
/* Úprava tlačidla "Skryť štatistiky" pri zbalenom menu */
body.sidebar-collapsed #toggle-privacy-mode {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed #toggle-privacy-mode i {
    margin-right: 0;
}
/* ===== OPRAVA CENTROVANIA PRI ZBALENOM MENU ===== */

/* 1. Vycentrovanie tlačidla v hlavičke */
body.sidebar-collapsed #sidebar-header {
    justify-content: center !important; /* Vycentruje obsah */
    padding-left: 0 !important;         /* Zruší bočné odsadenie */
    padding-right: 0 !important;
}

/* 2. Vycentrovanie kontajnera profilu */
body.sidebar-collapsed #user-profile {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. Oprava obrázku profilu (zrušenie medzery vpravo) */
body.sidebar-collapsed #user-avatar {
    margin-right: 0 !important; /* Toto je kľúčové - inak obrázok "uhýba" neviditeľnému textu */
}

/* 4. Oprava kontajnera pre profilový text (pre istotu ho skryjeme úplne, ak robí šarapatu) */
body.sidebar-collapsed #user-profile .sidebar-text {
    display: none !important;
}
/* Zámok proti horizontálnemu scrollovaniu na mobile */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    touch-action: pan-y; /* Povolí len vertikálny posun */
}

/* Oprava pre tabuľky a kontajnery */
.overflow-x-auto {
    max-width: 100vw; /* Kontajner nikdy nebude širší ako obrazovka */
}

/* Oprava pre modálne okná na mobile */
.modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important; /* Na mobile bez oblých rohov, šetrí miesto */
}

@media (min-width: 768px) {
    /* 1. Základné nastavenie pre všetky okná (aby neboli scvrknuté) */
    .modal {
        width: 100% !important;
        border-radius: 0.75rem !important;
    }

    /* 2. Veľké okná (Zákazníci, Leady, Výzva, Tím) - max šírka cca 1150px */
    #customer-modal, 
    #lead-modal, 
    #manage-participant-modal {
        max-width: 72rem !important; /* zodpovedá max-w-6xl */
    }

    /* 3. Stredné okná (Grafy, História, Nastavenia, Veľké zoznamy) - max šírka cca 900px */
    #source-chart-modal,
    #task-detail-modal, 
    #history-modal,
    #survey-stats-modal,
    #client-reassignment-modal,
    #challenge-group-modal,
    #coach-profile-modal {
        max-width: 56rem !important; /* zodpovedá max-w-4xl */
    }

    /* 4. Malé okná (Úlohy, Produkty, Zmeny stavov) - max šírka cca 670px */
    #add-task-modal,
    #product-modal,
    #edit-onetime-purchase-modal,
    #edit-subscription-modal,
    #deposit-management-modal,
    #reservation-management-modal,
    #change-plan-modal,
    #edit-spend-modal,
    #permissions-modal {
        max-width: 42rem !important; /* zodpovedá max-w-2xl */
    }
    
    /* 5. Najmenšie okná (Rýchle potvrdenia, Editácia Tieru) */
    #edit-tier-modal,
    #call-disposition-modal {
        max-width: 24rem !important; /* zodpovedá max-w-sm */
    }
}
/* ===== OPRAVA: SKRYTIE TLAČIDLA ZABALIŤ NA MOBILE ===== */

/* 1. Predvolene tlačidlo skryjeme (pre mobily) */
#collapse-btn {
    display: none !important;
}

/* 2. Zobrazíme ho iba na obrazovkách širších ako 768px (tablety a PC) */
@media (min-width: 768px) {
    #collapse-btn {
        display: block !important;
    }
}
/* Žiadna ďalšia zátvorka tu nemá byť */
/* ========================================= */
/* ===== OZNAMY (ANNOUNCEMENTS) ===== */
/* ========================================= */

/* Animácia príchodu */
@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animácia odchodu (keď sa zavrie) */
@keyframes slideUpFadeOut {
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.announcement-bar {
    pointer-events: auto; /* Aby sa dalo kliknúť na kartu */
    animation: slideDownFade 0.5s ease-out;
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%); /* Zlatá/Oranžová */
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    /* Prechod pre hladké zmeny veľkosti alebo pozície */
    transition: all 0.3s ease;
}

/* Trieda, ktorú pridáme cez JS pri zatváraní */
.announcement-bar.closing {
    animation: slideUpFadeOut 0.3s ease-in forwards;
}

/* Štýl pre tlačidlo X */
.announcement-close-btn {
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
}

.announcement-close-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
}
/* Štýl pre oddeľovač sekcií v tabuľke leadov */
.leads-section-header {
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
}

/* Jemné podfarbenie pre odhlásené leady */
.lead-row-unsubscribed {
    background-color: #fef2f2; /* red-50 */
}
.lead-row-unsubscribed:hover {
    background-color: #fee2e2; /* red-100 */
}
/* ===== SMART SCRIPT VYLEPŠENIA ===== */

/* Prepínač platformy */
.platform-toggle-container {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.platform-toggle-btn {
    flex: 1;
    text-align: center;
    padding: 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    color: #64748b;
    transition: all 0.2s;
}

.platform-toggle-btn.active.whatsapp {
    background: #dcfce7;
    color: #166534;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.platform-toggle-btn.active.sms {
    background: #dbeafe;
    color: #1e40af;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Sekcie skriptu */
.script-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 16px;
    margin-bottom: 8px;
    padding-left: 4px;
    border-left: 2px solid #e2e8f0;
}

/* Bublina správy */
.script-message-bubble {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
    transition: all 0.2s;
}

.script-message-bubble:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.script-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Akcie bubliny (Copy/Send) */
.bubble-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #f1f5f9;
}

.bubble-action-btn {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-copy { background: #f8fafc; color: #475569; }
.btn-copy:hover { background: #e2e8f0; }

.btn-send { background: #eff6ff; color: #2563eb; }
.btn-send:hover { background: #dbeafe; }

/* Značka "Naposledy použité" */
.last-used-badge {
    position: absolute;
    top: -8px;
    right: 10px;
    background: #fef3c7; /* amber-100 */
    color: #92400e; /* amber-800 */
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: 1px solid #fde68a;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

/* Legenda v nastaveniach */
.script-legend-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
}
.script-legend-key {
    font-family: monospace;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    font-weight: bold;
    border: 1px solid #cbd5e1;
}
/* ===== FIX PRE EDITOR SKRIPTOV (Dokumentový štýl) ===== */

/* Input názvu ako nadpis */
.script-title-input {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    width: 100%;
    padding: 4px 0;
    transition: border-color 0.2s;
}
.script-title-input:focus {
    outline: none;
    border-bottom-color: #3b82f6;
}

/* Kompaktné selecty */
.compact-select {
    font-size: 0.75rem;
    padding: 4px 24px 4px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background-color: white;
    cursor: pointer;
    font-weight: 500;
    color: #475569;
}

/* --- KĽÚČOVÉ PRE SCROLLOVANIE --- */
#active-script-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* Skryje scrollbar na hlavnom kontajneri */
}

/* Toolbar ostane fixný, editor sa roluje */
.ql-toolbar {
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #f8fafc;
    flex-shrink: 0; /* Nezmenšovať */
}

.ql-container {
    border: none !important;
    flex-grow: 1; /* Roztiahnuť na zvyšok miesta */
    overflow-y: auto; /* Povoliť scrollovanie len tu */
    background: white;
    font-size: 15px;
}

.ql-editor {
    min-height: 100%;
    padding: 24px 32px; /* Apple-style padding */
}
/* === VYLEPŠENÉ SKRIPTY === */

/* Výraznejší ale užší nadpis sekcie s čiarami */
.script-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0 8px 0; /* Zúžené vertikálne medzery */
    opacity: 0.9;
}

.script-section-header::before,
.script-section-header::after {
    content: '';
    height: 1px;
    flex-grow: 1;
    background-color: #e2e8f0; /* slate-200 */
}

.script-section-label {
    font-size: 11px;
    font-weight: 800; /* Extra tučné */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b; /* slate-500 */
    background-color: #f1f5f9; /* slate-100 */
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

/* Varovná ikona pre manuálne premenné [text] */
.manual-var-warning {
    position: absolute;
    left: -8px; /* Vysunuté vľavo von z bubliny */
    top: -8px;  /* Vysunuté hore */
    background-color: #ef4444; /* Červená */
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    z-index: 10;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Zvýraznenie textu v hranatej zátvorke */
.highlight-placeholder {
    background-color: #fee2e2; /* red-100 */
    color: #991b1b; /* red-800 */
    font-weight: 700;
    padding: 0 2px;
    border-radius: 2px;
    border-bottom: 1px dashed #ef4444;
}