body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f5f7;
    margin: 0;
    color: #222;
}

.page-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.card {
    background: #fff;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 320px;
}

.card h1 {
    font-size: 20px;
    margin-top: 0;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.field input,
.field select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button, .btn {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

button:hover, .btn:hover {
    background: #1d4ed8;
}

.error {
    background: #fee2e2;
    color: #991b1b;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

.success {
    background: #dcfce7;
    color: #166534;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

.topbar {
    background: #1e293b;
    color: #fff;
    padding: 4px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    line-height: 1.4;
}

.topbar a {
    color: #fff;
}

.container {
    padding: 8px 12px;
}

/* Единичен посредник (не "Обединен изглед") -- максимално работно
   пространство: свиваме допълнителния текст и отстъпите. */
body.single-broker-mode .container {
    padding: 6px 10px;
}

body.single-broker-mode .hint {
    display: none;
}

table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
    font-size: 14px;
}

table th {
    background: #f1f5f9;
}

/* ---- admin.php ---- */

.admin-cards {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 24px;
}

.admin-cards .card {
    flex: 1 1 380px;
    max-width: 480px;
    width: auto;
}

/* Таблица с бутон "Деактивирай"/"Активирай" може да е по-широка от картата
   си (особено на тесен екран) -- скролва ВЪТРЕ в себе си, вместо визуално
   да прелива извън картата. */
.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.table-scroll table {
    min-width: 320px;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.toolbar {
    display: flex;
    /* Групите се редят плътно една до друга отляво (табове -> дата -> история),
       за да е календарът "плътно до Обединен изглед" -- искане на Велизар,
       2026-09-02. Преди тук имаше space-between, което ги разпръскваше по
       цялата ширина на екрана. Zoom контролът се избутва сам вдясно. */
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar .zoom-control {
    margin-left: auto;
}

.tabs {
    display: flex;
    gap: 6px;
}

.tab-btn {
    background: #fff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.tab-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.date-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.date-picker input {
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
}

/* Видимото поле за дата (дд.мм.гггг) и скритото до него нативно <input
   type="date">. Нативното НЕ е display:none -- браузърът отказва да отвори
   календара (showPicker) за елемент, който изобщо не се рисува. Затова е
   свито до 1px и прозрачно, точно под видимото поле. */
.date-field {
    position: relative;
    display: inline-flex;
}

.date-picker input.date-text {
    width: 88px;
    text-align: center;
}

.date-picker input.date-native {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.date-open-btn {
    padding: 2px 6px;
    font-size: 13px;
    line-height: 1.2;
    background: #e2e8f0;
    color: #334155;
}

.date-open-btn:hover {
    background: #cbd5e1;
}

.quick-days {
    display: inline-flex;
    gap: 3px;
    margin-left: 2px;
}

.quick-day-btn {
    padding: 3px 8px;
    font-size: 12px;
    background: #e2e8f0;
    color: #334155;
    min-width: 32px;
}

.quick-day-btn:hover:not(:disabled) {
    background: #cbd5e1;
}

.quick-day-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Бутонът, чиято дата е заредена в момента -- при четири бутона иначе се
   губи усещането "къде съм". */
.quick-day-btn.active {
    background: #2563eb;
    color: #fff;
}

/* Празните редове под данните са по-високи от истинските -- в тях се цели с
   мишката, за да се въведе нова сделка, а при нормална височина е трудно да
   се улучи конкретен ред (искане на Велизар, 2026-09-02).
   Първо бяха 60px ("колкото три сегашни реда"), но на живо се оказа твърде
   много -- намалени наполовина на 30px (собственикът, 2026-09-02). */
.trades-table tr.placeholder-row td {
    height: calc(30px * var(--zoom));
}

.time-travel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.time-travel input {
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
}

.time-travel button {
    padding: 3px 8px;
    font-size: 12px;
    background: #e2e8f0;
    color: #334155;
}

.time-travel button:hover {
    background: #cbd5e1;
}

.as-of-banner {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 13px;
}

.as-of-banner button {
    background: #92400e;
    color: #fff;
    padding: 3px 10px;
    font-size: 12px;
}

.history-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow-y: auto;
    padding: 12px;
}

.history-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

#history-table {
    font-size: 12px;
}

#history-table th, #history-table td {
    padding: 4px 6px;
}

.history-goto-btn {
    background: #e2e8f0;
    color: #334155;
    padding: 3px 8px;
    font-size: 11px;
    white-space: nowrap;
}

.history-goto-btn:hover {
    background: #cbd5e1;
}

.zoom-control {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.zoom-control button {
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1.2;
    background: #e2e8f0;
    color: #334155;
}

.zoom-control button:hover {
    background: #cbd5e1;
}

.zoom-control .zoom-value {
    min-width: 38px;
    text-align: center;
    color: #475569;
}

/* ---- Собствена таблица (замества Tabulator.js, виж Фаза 6.7) ---- */

/* Височината се задава от JS (виж updateTableHeight в app.js) точно колкото
   остава до долния ръб на прозореца. Стойностите тук са само първоначални,
   докато скриптът се намеси -- преди това "calc(100vh - 130px)" избутваше
   дъното на таблицата ПОД видимия екран заедно с хоризонталната лента, а
   без нея на PC няма как да се върнеш наляво (докладвано от Рени,
   2026-09-03 -- на лаптоп с тъчпад проблемът не си личи). */
#trades-table {
    --zoom: 1;
    background: #fff;
    border: 1px solid #cbd5e1;
    height: 65vh;
    overflow: auto;
    position: relative;
}

body.single-broker-mode #trades-table {
    height: 70vh;
}

/* По-дебела и по-контрастна лента за скролване -- да се хваща лесно с мишка.
   Firefox ползва scrollbar-*, Chrome/Edge -- ::-webkit-scrollbar. */
#trades-table {
    scrollbar-width: auto;
    scrollbar-color: #94a3b8 #e2e8f0;
}

#trades-table::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

#trades-table::-webkit-scrollbar-track {
    background: #e2e8f0;
}

#trades-table::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 7px;
    border: 3px solid #e2e8f0;
}

#trades-table::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

#trades-table::-webkit-scrollbar-corner {
    background: #e2e8f0;
}

.trades-table {
    border-collapse: collapse;
    table-layout: fixed;
    /* Собствената селекция на клетки (.cell-selected/.range-selected) не е
       нативно текстово селектиране -- изключваме го изцяло тук, за да не се
       появява едновременно синьото очертание И нативно осветен текст при
       влачене с мишката. .cell-input вътре в редактирана клетка си остава
       нормално редактируемо поле, user-select не му пречи. */
    user-select: none;
}

.trades-table th,
.trades-table td {
    border: 1px solid #e2e8f0;
    padding: calc(3px * var(--zoom)) calc(6px * var(--zoom));
    font-size: calc(12px * var(--zoom));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trades-table thead th {
    background: #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 3;
    white-space: normal; /* заглавията се пренасят на нов ред (Excel "Wrap Text") */
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
}

/* Заглавието е на ДВА реда: буквите (A, B, C...) отгоре, имената отдолу.
   Досега само долният ред залепваше при скролване надолу, а буквите се
   изплъзваха нагоре -- при 130 реда жените не знаеха коя колона гледат
   (искане на Ками и Зори, 2026-09-03). Сега горният ред стои на top: 0, а
   долният -- точно под него. Отместването се мери от JS
   (updateStickyHeaderOffsets), защото височината на буквения ред зависи от
   мащаба (виж променливата --zoom). */
.trades-table thead th.col-label {
    /* Стойността идва от updateStickyHeaderOffsets() като променлива върху
       #trades-table. 20px е само резервата за частицата от секундата преди
       първото измерване. */
    top: var(--header-label-top, 20px);
}

/* Дръжка за преоразмеряване на колона (десен ръб на заглавието). */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
}

.col-resize-handle:hover {
    background: rgba(37, 99, 235, 0.35);
}

/* Дръжка за преоразмеряване на височината на реда (долен ръб на клетката №). */
.row-resize-handle {
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 6px;
    cursor: row-resize;
    z-index: 5;
}

.row-resize-handle:hover {
    background: rgba(37, 99, 235, 0.35);
}

.trades-table th.sticky-col {
    z-index: 4;
}

/* Клетките носят абсолютно позиционирани дечица -- дръжката за височина на
   реда ("№") и дръжката за издърпване (долния десен ъгъл на селекцията) --
   и им трябва контейнер, спрямо който да се подредят.
   ВАЖНО: това правило стои НАД sticky-а нарочно. При еднаква тежест печели
   по-долното, тоест замразената клетка си остава sticky. Ако някой ден
   разместиш двете, замразяването тихо ще спре да работи.
   Тази нужда НЕ бива да се покрива с inline style от JS -- inline-ът бие
   всичко и точно това счупи колона A (виж showFillHandle в app.js). */
.trades-table td[data-row-select],
.trades-table td[data-col] {
    position: relative;
}

.trades-table td.sticky-col {
    position: sticky;
    background: #fff;
    z-index: 2;
}

/* Отместванията идват от updateStickyOffsets() като променливи върху
   #trades-table. Резервните стойности (0px) важат само за частицата от
   секундата преди първото смятане -- и за колона "Последно", която винаги е
   най-вляво. */
.trades-table .sticky-1 { left: var(--sticky-1-left, 0px); }
.trades-table .sticky-2 { left: var(--sticky-2-left, 0px); }
.trades-table .sticky-3 { left: var(--sticky-3-left, 0px); }
.trades-table .sticky-4 { left: var(--sticky-4-left, 0px); }
.trades-table .sticky-5 { left: var(--sticky-5-left, 0px); }

.trades-table td.wrap-cell {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
}

.trades-table td.align-right { text-align: right; }
.trades-table td.align-center { text-align: center; }
.trades-table td.align-left { text-align: left; }

.trades-table td.ro-cell {
    background: #f1f5f9;
    color: #64748b;
}

.trades-table tr.group-header td {
    background: #dbeafe;
    color: #1e3a8a;
    font-weight: 600;
    text-align: left;
    padding: calc(4px * var(--zoom)) calc(8px * var(--zoom));
}

.trades-table td.cell-selected {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    background-color: rgba(37, 99, 235, 0.08);
}

/* Останалите клетки от диапазон при влачене с мишката (по-лек цвят от
   активната клетка, за да се различават). */
.trades-table td.range-selected {
    outline: 1px solid rgba(37, 99, 235, 0.5);
    outline-offset: -1px;
    background-color: rgba(37, 99, 235, 0.12);
}

.trades-table td[data-col] {
    cursor: cell;
}

.trades-table td.is-editing {
    padding: 0;
}

.trades-table .cell-input {
    /* Връщаме нормално текстово селектиране вътре в активно редактираното
       поле -- .trades-table има user-select:none за клетъчната селекция
       (виж по-горе), но то не бива да пречи на маркиране на текст, докато
       пишеш/редактираш формула вътре в самото input поле. */
    user-select: text;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    font: inherit;
    padding: calc(3px * var(--zoom)) calc(6px * var(--zoom));
    background: #fff;
}

/* Колона I ("Тип операция") е падащо меню: малка стрелка в десния край
   показва това още преди клик, а самото меню се отваря с ЕДИН клик
   (искане на собственика, 2026-09-28 -- виж handleGridClick в app.js).
   Стрелката се рисува с ::after, за да не влиза в текста на клетката --
   така копирането (Ctrl+C) и износът в CSV остават чисти. */
.trades-table td.dropdown-cell {
    position: relative;
    padding-right: calc(14px * var(--zoom));
    cursor: pointer;
}

.trades-table td.dropdown-cell::after {
    content: '';
    position: absolute;
    right: calc(4px * var(--zoom));
    top: 50%;
    margin-top: -1px;
    border-left: calc(3px * var(--zoom)) solid transparent;
    border-right: calc(3px * var(--zoom)) solid transparent;
    border-top: calc(4px * var(--zoom)) solid #64748b;
    opacity: 0.55;
    pointer-events: none; /* кликът да минава към клетката, не да спира в стрелката */
}

/* Докато менюто е отворено, самият <select> има своя стрелка. */
.trades-table td.dropdown-cell.is-editing {
    padding-right: 0;
}

.trades-table td.dropdown-cell.is-editing::after {
    display: none;
}

/* Падащото меню запълва клетката и изглежда като нея, за да не "подскача"
   редът при отваряне. */
.trades-table select.cell-input {
    cursor: pointer;
    padding-right: 0;
    appearance: auto;
}

.trades-table td.empty-placeholder {
    text-align: center;
    color: #94a3b8;
    padding: 20px;
    white-space: normal;
}

.formula-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 6px;
}

.formula-bar-label {
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
    min-width: 180px;
}

.formula-bar input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
}

.formula-bar input:disabled {
    background: #f1f5f9;
}

#formula-picker {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    color: #334155;
    background: #fff;
    max-width: 140px;
}

#formula-picker:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.formula-bar.active {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.formula-bar button {
    background: #e2e8f0;
    color: #334155;
    padding: 4px 10px;
    font-size: 12px;
}

.formula-bar button:hover {
    background: #cbd5e1;
}

.format-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.format-bar-label,
.format-bar-group-label {
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
}

.format-bar #fmt-bold {
    background: #e2e8f0;
    color: #334155;
    padding: 4px 10px;
    font-size: 12px;
}

.format-bar #fmt-bold:hover {
    background: #cbd5e1;
}

.format-bar #fmt-decimals-minus,
.format-bar #fmt-decimals-plus {
    background: #e2e8f0;
    color: #334155;
    padding: 4px 8px;
    font-size: 12px;
    font-family: 'Consolas', 'Courier New', monospace;
}

.format-bar #fmt-decimals-minus:hover,
.format-bar #fmt-decimals-plus:hover {
    background: #cbd5e1;
}

.format-swatches {
    display: inline-flex;
    gap: 4px;
}

.format-bar .swatch {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    cursor: pointer;
}

.format-bar .swatch:hover {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.format-bar #fmt-clear {
    background: #e2e8f0;
    color: #334155;
    padding: 4px 10px;
    font-size: 12px;
    margin-left: auto;
}

.format-bar #fmt-clear:hover {
    background: #cbd5e1;
}

/* Деактивирано състояние -- когато избраните клетки не са в P-Z (или няма
   избрана клетка изобщо), за да е ясно ВЕДНАГА, без да се налага да кликнеш
   и нищо да не стане. */
.format-bar #fmt-bold:disabled,
.format-bar .swatch:disabled,
.format-bar #fmt-clear:disabled,
.format-bar #fmt-decimals-minus:disabled,
.format-bar #fmt-decimals-plus:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.format-bar #fmt-bold:disabled:hover,
.format-bar #fmt-clear:disabled:hover,
.format-bar #fmt-decimals-minus:disabled:hover,
.format-bar #fmt-decimals-plus:disabled:hover {
    background: #e2e8f0;
}

.format-bar .swatch:disabled:hover {
    outline: none;
}

.hint {
    font-size: 13px;
    color: #64748b;
    margin-top: 10px;
}

/* ---- Фаза 7: "живи" известия (звук + Pop Up) ---- */

.notify-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
}

.notify-toast {
    background: #1e293b;
    color: #fff;
    border-left: 4px solid #2563eb;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    animation: notify-toast-in 0.15s ease-out;
}

.notify-toast:hover {
    background: #334155;
}

.notify-toast .notify-toast-title {
    font-weight: 700;
    margin-bottom: 2px;
}

.notify-toast .notify-toast-sub {
    color: #cbd5e1;
    font-size: 12px;
}

@keyframes notify-toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ---------------------------------------------------------------------
   Лента "Сума / Брой / Средно" за селектираните клетки + плаващото бутонче
   "Имейл" до селекция в колона P (искания на Драго, 2026-09-02).
   --------------------------------------------------------------------- */

.selection-summary {
    position: fixed;
    right: 12px;
    bottom: 10px;
    z-index: 40;
    display: flex;
    gap: 14px;
    align-items: center;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
    /* Лентата е чисто информативна -- кликът минава "през" нея към таблицата,
       за да не пречи, ако застане над последните редове. */
    pointer-events: none;
    max-width: 90vw;
    flex-wrap: wrap;
}

.selection-summary b {
    color: #94a3b8;
    font-weight: 600;
}

.selection-summary-warn {
    color: #fbbf24;
}

.email-fab {
    position: absolute;
    z-index: 45;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
}

.email-fab:hover {
    background: #15803d;
}

/* ---------------------------------------------------------------------
   Дръжка за издърпване (fill handle), преглед на запълването и скритото
   поле за клипборда. Виж applyFill()/initClipboard() в app.js.
   --------------------------------------------------------------------- */

.trades-table .fill-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 7px;
    height: 7px;
    background: #2563eb;
    border: 1px solid #fff;
    cursor: crosshair;
    z-index: 2;
}

/* Клетките, които ще бъдат запълнени, ако сега пуснеш бутона на мишката. */
.trades-table td.fill-preview {
    outline: 1px dashed #2563eb;
    outline-offset: -1px;
    background-color: rgba(37, 99, 235, 0.06);
}

/* Невидимото поле, през което минава копирането/поставянето. Не бива да е
   display:none -- браузърът не праща copy/paste събития към скрит елемент. */
#clipboard-proxy {
    position: fixed;
    top: 0;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
}

/* Бутоните "Назад/Напред" се избутват вдясно в лентата за форматиране. */
.format-bar-spacer {
    flex: 1 1 auto;
}

/* Малък текстов бутон до заглавие (напр. "Покажи изтритите" в админ панела). */
.btn-sm-link {
    font-size: 12px;
    font-weight: normal;
    margin-left: 10px;
    color: #2563eb;
}

/* ---------------------------------------------------------------------
   Условно форматиране по стойност (виж conditionalCellClass в app.js).
   Цветовете са същите, които Excel ползва по подразбиране за червено
   условно форматиране -- познати и достатъчно контрастни за четене.

   В МОМЕНТА никое правило не слага този клас: единственото (колона L
   "Плащане" в червено при "да") отпадна на 2026-09-08. Стилът остава
   готов, ако утре потрябва ново правило.

   Нарочно стои СЛЕД правилата за селекция: така клетката остава червена
   и докато е избрана (иначе синият фон на селекцията я скрива), а че е
   избрана се вижда от синия контур, който този клас не пипа.
   --------------------------------------------------------------------- */
.trades-table td.cond-red {
    background-color: #ffc7ce;
    color: #9c0006;
    font-weight: 600;
}

/* Бутон за еднократно разрешаване на известията на Windows. Сам изчезва,
   щом разрешението е дадено (виж initDesktopNotifications в app.js). */
.notify-enable-btn {
    padding: 3px 10px;
    font-size: 12px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    white-space: nowrap;
}

.notify-enable-btn:hover:not(:disabled) {
    background: #fde68a;
}

/* Разрешени известия -- зелено, за да личи от пръв поглед на чий екран
   работят и на чий не (виж initDesktopNotifications в app.js). */
.notify-enable-btn.notify-on {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.notify-enable-btn.notify-on:hover:not(:disabled) {
    background: #bbf7d0;
}

.notify-enable-btn:disabled {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
    cursor: default;
}

/* Полето за IBAN в админ панела -- номерът е дълъг, затова полето е широко
   и с моноширинен шрифт, за да се различават 0/O и 1/l при проверка. */
.iban-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

/* Насрещният посредник -- по чиято сметка отиват парите при ПРОДАВА
   (виж save_posrednik в admin.php). Стои в същия ред с IBAN-а, защото
   двете се записват с един бутон. */
.counterparty-select {
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-width: 200px;
}

.iban-input {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 230px;
    max-width: 100%;
}

/* ---- Меню с десен бутон върху таблицата (Рени, 2026-09-03) ---- */

.context-menu {
    position: fixed;
    z-index: 100;
    min-width: 210px;
    padding: 4px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    font-size: 13px;
}

.context-menu hr {
    margin: 4px 6px;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
}

.context-menu-item:hover:not(:disabled) {
    background: #eff6ff;
}

.context-menu-item:disabled {
    color: #94a3b8;
    cursor: default;
}

.context-menu-hint {
    color: #94a3b8;
    font-size: 12px;
}

/* ---------------------------------------------------------------------
   Прозорец с готовия текст за имейл (виж openEmailModal в app.js) и
   полетата за същите текстове в админ панела.
   --------------------------------------------------------------------- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Над всичко останало в портала -- лентата за формули, известията и
       плаващото бутонче "Имейл" не бива да стърчат върху прозореца. */
    z-index: 90;
}

.modal-box {
    background: #fff;
    border-radius: 6px;
    width: min(760px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.35);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
}

.modal-close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.modal-close:hover {
    background: none;
    color: #0f172a;
}

.modal-sub {
    font-size: 12px;
    color: #475569;
    margin: 4px 0 10px;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.btn-secondary {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-secondary:hover {
    background: #cbd5e1;
}

#email-modal-text {
    flex: 1;
    min-height: 280px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
}

/* Полетата в админ панела -- по едно на посредник, едно до друго. */
.email-templates {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 24px;
}

.email-templates .card {
    flex: 1 1 380px;
    max-width: 480px;
    width: auto;
}

.email-templates textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
}