/* Email client extras — undo toast, scheduled banner, thread panel, list badges, AI dialog.
   Colours follow the AutoERP theme (primary blue #428bca-ish, info purple, success green). */
.email-undo-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2000;
    background: #23374d; color: #fff; border-radius: 8px; padding: 14px 20px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35); display: flex; align-items: center; gap: 16px;
    font-size: 16px; white-space: nowrap;
}
.email-undo-toast__undo { font-size: 15px; font-weight: 600; }
.email-undo-toast__close { color: #bbb; cursor: pointer; font-size: 22px; line-height: 1; }
.email-undo-toast__close:hover { color: #fff; text-decoration: none; }

.email-scheduled-banner {
    display: flex; align-items: center; gap: 14px; font-size: 15px; margin-bottom: 12px;
    border-left: 4px solid #5b8def;
}
.email-scheduled-banner .far { font-size: 18px; }

.email-cell-badges { margin: 3px 0 2px; }
.email-cell-badges .label, .email-badge-scheduled, .email-badge-category {
    font-size: 11px; font-weight: 600; letter-spacing: .2px; padding: 3px 7px; border-radius: 10px; vertical-align: middle;
}
.email-badge-scheduled, .email-badge-category { margin-left: 6px; }
.email-cell-badges .label { margin-right: 4px; }

.email-thread__table td { vertical-align: top; }
.email-thread__date { white-space: nowrap; width: 130px; color: #777; }
.email-thread__from { width: 220px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-thread__row--current { background: rgba(91,141,239,.12); }
.email-thread__row--current .email-thread__subject > a { font-weight: 600; }
.email-thread__row--unread .email-thread__subject > a { font-weight: bold; }
.email-thread__subject .label { margin-left: 4px; }
.email-thread__snippet { margin-top: 2px; max-height: 2.6em; overflow: hidden; }

.email-ai-assist .ai-result { min-height: 120px; max-height: 45vh; overflow: auto; background: #fff; white-space: pre-wrap; border-color: #d7c9ef; }
.email-ai-assist .ai-result p { white-space: normal; }
.email-schedule-send__presets { display: flex; gap: 8px; margin-bottom: 12px; }

/* AI actions: one recognisable violet accent everywhere */
.btn-ai-assist, button[data-name="aiTranslate"], button[data-name="aiClassify"], button[data-action="aiTranslate"], button[data-action="aiClassify"] {
    border-color: #7b4dbb; color: #6a3fb0; background: #f6f1fc;
}
.btn-ai-assist:hover, button[data-name="aiTranslate"]:hover, button[data-action="aiTranslate"]:hover, button[data-action="aiClassify"]:hover {
    background: #7b4dbb; color: #fff; border-color: #7b4dbb;
}
button[data-name="scheduleSend"] { border-color: #5b8def; color: #3b6fd6; background: #eef4ff; }
button[data-name="scheduleSend"]:hover { background: #5b8def; color: #fff; }

/* Pointer in the mail screens: a blue arrow instead of a hand (SUP-2463, Kozák 30. 10. 2026:
   "změnit kurzor na barevnou šipku, ta tlapa mi nevyhovuje, jenom ne černou"). AutoCRM gives
   every message row cursor: grab (rows drag onto folders) and its cells/links cursor: pointer.
   Covers the message list (plain and combined mode), the conversation rows and the folder list.
   #main outranks the AutoCRM and theme selectors without !important, so the drag itself keeps
   jQuery UI's "* { cursor: grabbing !important }" and the checkbox/inputs stay usable. */
:root {
    --email-arrow-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2v17l4.5-4.2 2.9 6.4 2.7-1.2-2.8-6.3h6.2z' fill='%231a56db' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default;
}
#main .email-list-container .list tbody tr[data-id],
#main .email-list-container .list tbody tr[data-id] *,
#main .email-thread__table tr[data-id],
#main .email-thread__table tr[data-id] *,
#main .email-combined .folder-list li,
#main .email-combined .folder-list li * { cursor: var(--email-arrow-cursor); }
.email-thread__table tr[data-id]:hover { background: rgba(91,141,239,.07); }
.email-thread__table tr[data-id]:focus-visible { outline: 2px solid #1a56db; outline-offset: -2px; }

/* Folder list (left column of Emaily) — WCAG AA: 4.5:1 text contrast, visible focus, 40 px targets */
.folders-container .folder-list {
    background: #f4f6f9; border: 1px solid #e1e5ea; border-radius: 10px; padding: 6px; margin-top: 4px;
}
.folders-container .folder-list > .list-group-item {
    border: 0; background: transparent; border-radius: 8px; margin: 1px 0; padding: 0;
    border-left: 4px solid transparent;
}
.folders-container .folder-list > .list-group-item > a.side-link {
    display: block; padding: 9px 12px 9px 10px; color: #1f2937; font-size: 14.5px; line-height: 22px;
    text-decoration: none; border-radius: 6px; min-height: 40px;
}
.folders-container .folder-list > .list-group-item > a.side-link.count {
    display: inline-block; float: right; min-height: 0; padding: 0; margin: 10px 10px 0 0;
    /* !important: a theme rule paints the count slate on the red badge, unreadable (mail 295012) */
    background: #e11d48; color: #fff !important; font-weight: 700; font-size: 12px; line-height: 20px;
    border-radius: 10px; min-width: 20px; text-align: center;
}
.folders-container .folder-list > .list-group-item > a.side-link.count:empty { display: none; }
.folders-container .folder-list > .list-group-item > a.side-link > .fas {
    width: 20px; text-align: center; margin-right: 6px; color: #64748b;
}
/* Folder icon for group/personal folders (the template gives them none). The attribute rule
   needs no :has() — browsers without :has() support (Firefox < 121, Chrome < 105) skip only the
   second rule, the group-folder one still applies. */
.folders-container .folder-list > .list-group-item[data-id^="group:"] > a.side-link:not(.count)::before,
.folders-container .folder-list > .list-group-item > a.side-link:not(.count):not(:has(> .fas))::before {
    /* !important: the AutocrmThemes autoerp.css sets content:"" on .folders-container .list-group > li > a:not(.count)::before */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important; font-weight: 900 !important; content: '\f07b' !important;
    /* the same theme rule makes it position:absolute; left:30px — it then sits over the label */
    position: static !important; display: inline-block; width: 20px; text-align: center; margin-right: 6px; color: #64748b; font-size: inherit !important;
}
.folders-container .folder-list > .list-group-item:hover { background: #e8edf5; }
.folders-container .folder-list > .list-group-item:hover > a.side-link { color: #111827; }
.folders-container .folder-list > .list-group-item.selected { background: #e3ecfd; border-left-color: #1a56db; }
.folders-container .folder-list > .list-group-item.selected > a.side-link { color: #1a3d9c; font-weight: 700; }
.folders-container .folder-list > .list-group-item.selected > a.side-link.count { background: #1a56db; color: #fff; }
.folders-container .folder-list > .list-group-item.selected > a.side-link > .fas,
.folders-container .folder-list > .list-group-item.selected > a.side-link::before { color: #1a56db; }
.folders-container .folder-list > .list-group-item > a.side-link:focus-visible {
    outline: 2px solid #1a56db; outline-offset: 1px;
}
.folders-container .folder-list > .list-group-item.droppable.ui-droppable-active { outline: 2px dashed #1a56db; }

/* Unread rows in the 3-pane list. The theme bolds only td[data-name="subject"] > a.text-bold
   (plain list); the combined cell keeps the same .text-bold marker on the subject link, so
   without this an unread mail looks exactly like a read one (bug report 36308). */
div.list[data-scope="Email"] tr.list-row:has(td[data-name="combinedCell"] .subject-container a.text-bold) {
    background-color: #e8f0fe;
    box-shadow: inset 4px 0 0 #1a56db;
}
div.list[data-scope="Email"] td[data-name="combinedCell"] .subject-container a.text-bold {
    font-weight: 700; color: #111827;
}
div.list[data-scope="Email"] td[data-name="combinedCell"] .subject-container a.text-bold::before {
    content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: #1a56db; margin-right: 7px; vertical-align: 1px;
}
div.list[data-scope="Email"] td[data-name="combinedCell"]:has(.subject-container a.text-bold) .person-string-data-container {
    font-weight: 700; color: #111827;
}

/* Unread rows in the plain list (SUP-2448, Kozák: "nepřečtené zprávy více zvýraznit"). The theme
   whitens unread rows only for td[data-name=subject] > a.text-bold, but our subject template wraps
   the link in two spans, so unread and read rows got the same grey and only a slightly bolder
   subject. Unread now gets a blue tint, a blue bar on the left, a dot and a bold sender. */
div.list[data-scope="Email"] table.table > tbody > tr.list-row:has(td[data-name="subject"] a.text-bold) > td {
    background-color: #e8f0fe !important;
}
div.list[data-scope="Email"] table.table > tbody > tr.list-row:has(td[data-name="subject"] a.text-bold) > td:first-child {
    box-shadow: inset 4px 0 0 #1a56db;
}
div.list[data-scope="Email"] table.table > tbody > tr.list-row:has(td[data-name="subject"] a.text-bold):hover > td {
    background-color: #dbe7fd !important;
}
div.list[data-scope="Email"] td[data-name="subject"] a.text-bold {
    font-weight: 700; color: #0b3a8f;
}
div.list[data-scope="Email"] td[data-name="subject"] a.text-bold::before {
    content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: #1a56db; margin-right: 7px; vertical-align: 1px;
}
div.list[data-scope="Email"] tr.list-row:has(td[data-name="subject"] a.text-bold) td[data-name="personStringData"] {
    font-weight: 700; color: #111827;
}

/* Hover icons of a list row (archive | trash | read | important). AutoCRM shows them in a
   100 px table cell that squeezes the subject and overlaps the date; with a fourth icon they
   became unreadable (Kozák, mail 241796). Now a small pill floats over the row's top-right
   corner, the row itself keeps its width. */
.email-list-container .list-row .hover-actions {
    width: 0 !important; min-width: 0; max-width: 0; position: relative; overflow: visible;
}
.email-list-container .list-row .hover-actions .container {
    position: absolute; right: 6px; top: 3px; height: auto; z-index: 2;
    display: flex; align-items: center; gap: 0; padding: 1px 3px;
    background: #fff; border: 1px solid #d5dbe3; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .14);
}
.email-list-container .list-row .hover-actions i {
    width: 24px; height: 22px; padding: 0; font-size: 12px; line-height: 22px; text-align: center;
    color: #4b5563; border-radius: 50%;
}
.email-list-container .list-row .hover-actions i:hover { background: #e8edf5; color: #111827; }
.email-list-container .list-row .hover-actions i:focus-visible { outline: 2px solid #1a56db; outline-offset: 1px; }

/* List header checkbox menu ("Vybrat vše / celý výsledek"): the theme right-aligns it, so on every
   list it opens LEFT under the sidebar and only "…SLEDEK" peeks out (Kozák mail 242496, 6. 9. 2026).
   Open it to the right of the checkbox instead. */
.list th.checkbox-cell .checkbox-dropdown .dropdown-menu,
.list-container th.checkbox-cell .checkbox-dropdown .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* Hover bubbles in the plain list mode (Kozák, 21. 9. 2026). AutoCRM shows them only in the
   3-pane view, where they are a table cell of their own; here they float over the right edge of
   the row so that the real columns of the list layout never move under the mouse. */
.email-combined:not(.is-combined) .list-row > td { position: relative; }
.email-combined:not(.is-combined) .list-row .hover-actions { display: none; }
@media (hover: hover) {
    .email-combined:not(.is-combined) .email-list-container .list-row:hover .hover-actions {
        display: block; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
        width: auto; padding: 2px 8px; z-index: 2;
        background: #fff; border: 1px solid #e1e5ea; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.14);
    }
}
.email-combined:not(.is-combined) .list-row .hover-actions .container {
    display: flex; flex-direction: row; align-items: center; gap: 2px; width: auto; padding: 0;
}
.email-combined:not(.is-combined) .list-row .hover-actions i { padding: .4em; cursor: pointer; border-radius: 50%; }
.email-combined:not(.is-combined) .list-row .hover-actions i:hover { background: #eef2f7; }
.email-combined:not(.is-combined) .list-row .hover-actions .read.active { color: yellowgreen; }
.email-combined:not(.is-combined) .list-row .hover-actions .important.active { color: orange; }
.email-combined:not(.is-combined) .list-row .hover-actions .trash.active { color: crimson; }

/* Labels (štítky) — Kozák, 21. 9. 2026 */
.email-badge-label { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 10px; margin-left: 6px; }
.email-labels-dialog { max-width: 520px; }
.email-labels-dialog .email-label-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.email-labels-dialog .email-label-option {
    display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.email-labels-dialog .email-label-option:hover { background: #f4f6f9; }
.email-labels-dialog .email-label-option .email-label-check { color: transparent; }
.email-labels-dialog .email-label-option.checked .email-label-check { color: #4a8f4a; }
.email-labels-dialog .email-label-option .label { font-size: 12px; padding: 4px 9px; border-radius: 10px; }
.email-labels-dialog .email-label-new { display: flex; gap: 8px; align-items: center; }
.email-labels-dialog .email-label-new input[name="newLabel"] { flex: 1 1 auto; }
.email-labels-dialog .email-label-new select { width: auto; }
.email-list-container .list-row .hover-actions .labels.active { color: #5b8def; }

/* Category tabs above the mail list (Kozák, mail 295012): one click narrows the folder. */
.email-category-bar {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; width: fit-content; max-width: 100%;
}
.email-category-bar .email-category-tab {
    border: 1px solid #d5dbe3; background: #fff; color: #1f2937; border-radius: 16px;
    padding: 5px 14px; font-size: 14px; line-height: 20px;
}
.email-category-bar .email-category-tab:hover { background: #eef3fb; border-color: #b8c4d6; }
.email-category-bar .email-category-tab.active {
    background: #1a56db; border-color: #1a56db; color: #fff; font-weight: 600;
}
.email-category-bar .email-category-tab:focus-visible { outline: 2px solid #1a56db; outline-offset: 1px; }

/* Helper row above the text in the composer: reply draft, one-click translation, ERP document. */
.compose-helper-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    margin: 0 0 8px; padding: 8px 10px; background: #f4f6f9; border: 1px solid #e1e5ea; border-radius: 8px;
}
.compose-helper-bar .compose-helper-label { color: #475569; margin-left: 4px; }
.compose-helper-bar .btn-group > .btn { min-width: 40px; font-weight: 600; }
.compose-helper-bar .compose-helper-busy { color: #475569; }
.compose-helper-bar .compose-helper-attach { margin-left: auto; }

/* "Přiložit doklad z ERP": big, readable document kinds. */
.attach-document-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
/* !important: the theme gives every .btn a fixed height, so a two-line label spilled out of it */
.attach-document-grid .btn {
    display: flex; align-items: center; gap: 8px; height: auto !important; min-height: 44px;
    text-align: left; padding: 8px 12px; font-size: 14.5px; line-height: 1.3; white-space: normal;
}
.attach-document-grid .btn > span { flex: 0 0 20px; text-align: center; color: #64748b; }
.attach-document-more { margin: 10px 0 6px; }
.attach-document-grid.attach-document-templates { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; }