/* Fix dropdown menus being clipped by overflow:hidden on parent containers */

/* Dashlet: both .dashlet-container and .dashlet have overflow:hidden which clips
   header dropdown menus. Force visible on both layers. The panel-body inside
   already handles its own scrolling via overflow-y:auto. */
.dashlets .dashlet-container {
    overflow: visible !important;
}
.dashlet-container .dashlet {
    overflow: visible !important;
}

/* List row action buttons: table cells have overflow:hidden from theme */
.list > table td.cell[data-name="buttons"],
.list > table th.action-cell {
    overflow: visible !important;
}

/* Dashlet header dropdown: open to the left so it doesn't go off-screen */
.dashlet .panel-heading .dropdown-menu {
    right: 0;
    left: auto;
}

/* Ensure dropdown z-index is above panels */
.dropdown-menu {
    z-index: 1050 !important;
}

/* Hide browser default focus ring on navigation/buttons when activated by mouse,
   keep it for keyboard-focus (accessibility). */
.navbar a:focus:not(:focus-visible),
.navbar button:focus:not(:focus-visible),
.tabs a:focus:not(:focus-visible),
.tabs button:focus:not(:focus-visible),
.tabs li > a:focus:not(:focus-visible),
.more-dropdown a:focus:not(:focus-visible),
.more-dropdown button:focus:not(:focus-visible),
#nav a:focus:not(:focus-visible),
#nav button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.dropdown-toggle:focus:not(:focus-visible),
[class*="more-tabs"]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Editovateľné polia — celý EspoCRM, viditeľné ohraničenie
   Aby používateľ vždy vedel, do čoho môže klikať/písať.
   ────────────────────────────────────────────────────────────────────────── */

/* Editovateľné inputy v record edit/detail view + modaloch.
   Scope obmedzený na konkrétne kontextové kontajnery aby sa neovplyvňovala
   navigácia, sidebar, dashlety, atď. */
.record .edit .form-control:not(.selectize-control),
.record .detail .form-control:not(.selectize-control),
.modal-body .form-control:not(.selectize-control),
.dialog-fullscreen-quotation .form-control:not(.selectize-control),
.record .edit textarea,
.record .detail textarea,
.modal-body textarea,
.dialog-fullscreen-quotation textarea,
.record .edit select,
.record .detail select,
.modal-body select,
.dialog-fullscreen-quotation select {
    background: #f4f9ff !important;
    border: 1px solid #b9d4f0 !important;
    border-radius: 4px;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.record .edit .form-control:not(.selectize-control):hover,
.record .detail .form-control:not(.selectize-control):hover,
.modal-body .form-control:not(.selectize-control):hover,
.dialog-fullscreen-quotation .form-control:not(.selectize-control):hover,
.record .edit textarea:hover,
.record .detail textarea:hover,
.modal-body textarea:hover,
.dialog-fullscreen-quotation textarea:hover,
.record .edit select:hover,
.record .detail select:hover,
.modal-body select:hover,
.dialog-fullscreen-quotation select:hover {
    border-color: #4a90e2 !important;
    background: #ecf4ff !important;
}

.record .edit .form-control:not(.selectize-control):focus,
.record .detail .form-control:not(.selectize-control):focus,
.modal-body .form-control:not(.selectize-control):focus,
.dialog-fullscreen-quotation .form-control:not(.selectize-control):focus,
.record .edit textarea:focus,
.record .detail textarea:focus,
.modal-body textarea:focus,
.dialog-fullscreen-quotation textarea:focus,
.record .edit select:focus,
.record .detail select:focus,
.modal-body select:focus,
.dialog-fullscreen-quotation select:focus {
    border-color: #1976d2 !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25) !important;
    outline: none !important;
}

.record .edit .form-control:not(.selectize-control)[readonly],
.record .detail .form-control:not(.selectize-control)[readonly],
.modal-body .form-control:not(.selectize-control)[readonly],
.record .edit .form-control:not(.selectize-control):disabled,
.record .detail .form-control:not(.selectize-control):disabled,
.modal-body .form-control:not(.selectize-control):disabled {
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    color: #777 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Detail view — visible field boxes
   Each field's value cell gets a subtle background + border so user vidí
   ako "obsahy v boxoch", a inline-editovateľné polia majú jasnejší hover hint.
   ────────────────────────────────────────────────────────────────────────── */

/* Field wrapper — only in DETAIL view (record detail page), NOT in list views */
.record .detail .detail .field,
.record .detail .panel-body .field {
    background: #fafbfc;
    border: 1px solid #e5e9ee;
    border-radius: 4px;
    padding: 6px 10px;
    transition: border-color .12s ease, background .12s ease;
    position: relative;
}

.record .detail .detail .field:hover,
.record .detail .panel-body .field:hover {
    background: #ecf4ff;
    border-color: #4a90e2;
}

/* When field is being edited → suppress wrapper, keep input border only */
.record .detail .field.in-edit,
.record .detail .field:has(input.form-control:not([type="hidden"])),
.record .detail .field:has(textarea),
.record .detail .field:has(select.form-control),
.record .detail .field:has(.selectize-control) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Read-only / not inline-editable */
.record .detail .field[data-inline-edit-disabled="true"] {
    background: #f5f5f5;
    border-color: #e0e0e0;
}
.record .detail .field[data-inline-edit-disabled="true"]:hover {
    background: #f5f5f5;
    border-color: #e0e0e0;
    cursor: default;
}

/* Field labels — detail AND edit must agree; detail is the established look
   (customer has been looking at it for weeks). BUG FOUND 2026-07-26: this
   rule was scoped to `.record .detail .label-text` only. Edit-mode fields
   share the exact same `label.control-label > span.label-text` markup
   (`client/res/templates/record/panels/side.tpl`, and the equivalent JS-built
   cell in the main form/side panel), but their container carries `.edit`
   instead of `.detail`, so they fell through to the raw theme default
   (13.5px, weight 400, no uppercase) instead of the small grey caps used
   everywhere else. Widening also fixes the SAME bug in the side panel
   (Assigned User / Teams column) and in every modal create/edit form, since
   both render inside a `.record .edit` container too — confirmed live via
   DOM ancestor chain, not assumed. Does not touch relationship-panel lists
   or the stream composer: neither renders a `.label-text` span at all. */
.record .detail .label-text,
.record .edit .label-text {
    font-size: 11px;
    color: #777;
    margin-bottom: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.record .detail .cell-label {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Checkboxes — slightly bigger to make them obviously interactive */
.record .edit input[type="checkbox"],
.record .detail input[type="checkbox"],
.modal-body input[type="checkbox"] {
    transform: scale(1.1);
    cursor: pointer;
    accent-color: #1976d2;
}

/* Selectize widgets (Espo's dropdown library).
   The border belongs on THIS element only. Its wrapper .selectize-control also
   carries .form-control, so the blanket .form-control rules above exclude
   .selectize-control -- otherwise both draw a line and the field shows a
   double border.
   Radius and height are pinned to the same values as a plain text input:
   the theme's --border-radius is 25px (a pill) and its --form-control-height
   renders 39px here, which left dropdowns rounder and 5px taller than every
   field beside them. */
.record .edit .selectize-input,
.record .detail .selectize-input,
.modal-body .selectize-input {
    background: #f4f9ff !important;
    border: 1px solid #b9d4f0 !important;
    border-radius: 4px !important;
    min-height: 34px !important;
    height: 34px !important;
    transition: border-color .12s ease, background .12s ease;
}
.record .edit .selectize-input:hover,
.record .detail .selectize-input:hover,
.modal-body .selectize-input:hover {
    border-color: #4a90e2 !important;
    background: #ecf4ff !important;
}
.record .edit .selectize-input.focus,
.record .detail .selectize-input.focus,
.modal-body .selectize-input.focus {
    border-color: #1976d2 !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Finanční údaje na stánku — defaultně rozmazané, přepínač "Zobrazit finance".
   Třída .mm-finance-blur je na detail record view (Project) ve výchozím stavu;
   tlačítko ji odebere/přidá. Viz custom:views/project/record/detail.
   ────────────────────────────────────────────────────────────────────────── */
.mm-finance-blur .field[data-name="costs"],
.mm-finance-blur .field[data-name="profit"],
.mm-finance-blur .field[data-name="revenues"],
.mm-finance-blur .field[data-name="incomes"],
.mm-finance-blur .field[data-name="orderPrice"],
.mm-finance-blur .field[data-name="plannedCosts"],
.mm-finance-blur .field[data-name="totalPlannedCosts"],
.mm-finance-blur .field[data-name="additionalCosts"],
.mm-finance-blur .field[data-name="additionalExpenses"],
.mm-finance-blur .field[data-name="devCosts"],
.mm-finance-blur .field[data-name="actualCosts"],
.mm-finance-blur .field[data-name="actualRevenues"],
.mm-finance-blur .field[data-name="plannedRevenues"],
.mm-finance-blur .field[data-name="totalOrderedAmount"],
.mm-finance-blur .field[data-name="grandTotalAmount"],
.mm-finance-blur .field[data-name="priceMarginPercentage"],
/* In quote/finance list panels blur ONLY the price columns, not the whole table */
.mm-finance-blur .panel[data-name="preEstimates"] td.cell[data-name="subtotalCost"],
.mm-finance-blur .panel[data-name="preEstimates"] td.cell[data-name="totalAfterMultiplier"],
.mm-finance-blur .panel[data-name="preEstimates"] td.cell[data-name="totalWithVat"],
.mm-finance-blur .panel[data-name="quotationsFinal"] td.cell[data-name="subtotalCost"],
.mm-finance-blur .panel[data-name="quotationsFinal"] td.cell[data-name="totalAfterMultiplier"],
.mm-finance-blur .panel[data-name="quotationsFinal"] td.cell[data-name="totalWithVat"],
.mm-finance-blur .panel[data-name="quotes"] td.cell[data-name="amount"],
.mm-finance-blur .panel[data-name="projectRevenues"] td.cell[data-name="amount"],
.mm-finance-blur .panel[data-name="projectCosts"] td.cell[data-name="amount"],
.mm-finance-blur .panel[data-name="projectCosts"] td.cell[data-name="unitPrice"] {
    filter: blur(6px);
    -webkit-filter: blur(6px);
    transition: filter .12s ease;
    pointer-events: none;
    user-select: none;
}

button[data-name="toggleFinance"] {
    color: #1976d2;
}

/* ──────────────────────────────────────────────────────────────────────────
   StockItem — list thumbnail + e-shop style category mega-menu
   (custom:views/stock-item/list + custom:views/stock-item/fields/photos-list)
   ────────────────────────────────────────────────────────────────────────── */

/* Thumbnail in list */
.mm-stock-thumb-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 6px;
    overflow: hidden;
}
.mm-stock-thumb {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.mm-stock-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    border: 1px dashed #d8dde3;
    border-radius: 6px;
    color: #c2c8d0;
    font-size: 16px;
}
/* keep the photo cell tight + vertically centered */
.list > table td.cell[data-name="photos"] {
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: middle;
}

/* Category mega-menu */
.mm-cat-menu {
    margin: 0 0 12px 0;
}
.mm-cat-bar {
    list-style: none;
    margin: 0;
    padding: 4px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
}
.mm-cat-item {
    position: relative;
}
.mm-cat-link {
    display: block;
    padding: 7px 13px;
    color: #34404d;
    font-weight: 600;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.mm-cat-link:hover,
.mm-cat-link:focus {
    background: #e7eefc;
    color: #1769d6;
    text-decoration: none;
}
.mm-cat-item.active > .mm-cat-link {
    background: #1976d2;
    color: #fff;
}
.mm-caret {
    display: inline-block;
    margin-left: 5px;
    border-top: 4px solid currentColor;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    vertical-align: middle;
    opacity: .65;
}

/* Dropdown */
.mm-cat-dropdown {
    list-style: none;
    margin: 2px 0 0 0;
    padding: 6px;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 45, 61, 0.16);
    z-index: 1050;
    display: none;
}
.mm-cat-item.has-children:hover > .mm-cat-dropdown {
    display: block;
}
/* hover bridge so the gap between item and dropdown doesn't close it */
.mm-cat-item.has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 6px;
}
.mm-cat-sub > a {
    display: block;
    padding: 7px 12px;
    color: #44505d;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.mm-cat-sub > a:hover {
    background: #eef4ff;
    color: #1769d6;
    text-decoration: none;
}
.mm-cat-sub.active > a {
    background: #1976d2;
    color: #fff;
}

/* keep right-edge dropdowns from overflowing the screen */
.mm-cat-item:nth-last-child(-n+3) .mm-cat-dropdown {
    left: auto;
    right: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Dashlet list tiles — reclaim the dead band above the first row.
   A list view's .list-buttons-container carries its action buttons; inside a
   dashlet those are suppressed, so the row renders 32px tall plus a 10px
   margin to hold nothing but the record count. With .panel-body's 14px top
   padding that is 56px of emptiness on every list tile.
   Scoped to .dashlet-body so real list views keep their button row intact.
   ────────────────────────────────────────────────────────────────────────── */
.dashlet-body .list-buttons-container {
    min-height: 0;
    height: auto;
    margin-bottom: 2px;
}

/* The row's whole height came from the count itself: the theme gives
   .total-count padding 7px 0, so 18px of text rendered as 32px. */
.dashlet-body .list-buttons-container > div.total-count {
    padding: 0;
}

/* A field that renders a whole table — composite panels such as the nomination
   hierarchy — is not an editable value box. The wrapper chrome above (box,
   border, hover tint) is meant for single values; on a full-width grid it
   paints the entire section blue on hover, which reads as "this is clickable"
   when it is not. Matched by :has(table) rather than by field name so any
   future composite field is covered without another rule. */
.record .detail .detail .field:has(table),
.record .detail .panel-body .field:has(table) {
    background: transparent;
    border: none;
    padding: 0;
}

.record .detail .detail .field:has(table):hover,
.record .detail .panel-body .field:has(table):hover {
    background: transparent;
    border-color: transparent;
}

/* ── Quotation detail: the line editor inline, locked but readable ──────────────
   The same editor the `Otevřít v editoru` modal renders, mounted as a bottom panel
   (clientDefs.bottomPanels.detail -> custom:views/quotation/panels/inline-editor).
   The lock itself is in the view — readonly/disabled attributes plus no mutating
   handlers. These rules only take the "switched off" look away: the customer asked
   for cells that read as values, not as dead inputs.

   The selectors carry the `.record .detail` prefix on purpose: the global readonly
   styling ~350 lines up (`.record .detail .form-control:not(.selectize-control)[readonly]`)
   is `!important` at specificity (0,5,0), so anything shorter loses to it. That rule
   stays as it is — it is right for a genuinely disabled field elsewhere; here the whole
   panel is a view and none of it should read as switched off. */
.quotation-inline-editor .quotation-step {
    height: 70vh;
}

/* The grid was drawn for a 96vw modal; a bottom panel beside the side panel is about
   920px, which squeezes the price and currency columns until their values are cut off.
   The columns keep their proportions and the table scrolls inside the panel instead —
   the detail page itself never scrolls sideways. */
.quotation-inline-editor .quotation-sidebar {
    width: 170px;
}

.quotation-inline-editor .quotation-body {
    overflow-x: auto;
}

.quotation-inline-editor .quotation-items-table {
    min-width: 980px;
}

/* Two prefixes, one rule. As a bottom panel the editor sits inside `.record .detail`, so
   it needs that prefix to outrank the global readonly styling. As the "Položkový rozpočet"
   view mode it IS the main area and that ancestor is gone — the mode container carries the
   specificity instead. Same declarations either way: the grid is locked in both places and
   must read the same in both. */
.record .detail .quotation-inline-editor .form-control:not(.selectize-control)[readonly],
.record .detail .quotation-inline-editor .form-control:not(.selectize-control):disabled,
.quotation-items-mode.quotation-inline-editor .form-control:not(.selectize-control)[readonly],
.quotation-items-mode.quotation-inline-editor .form-control:not(.selectize-control):disabled {
    background: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
    opacity: 1;
    cursor: default;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    /* No box means no box padding — the 8px each side was clipping short values
       like "35" once the grid lost the modal's width. */
    padding-left: 0;
    padding-right: 0;
}

/* Selects need the vertical padding gone too, not only the horizontal.
   Measured on the locked Měna cell: height 34px fixed by the theme, padding 9px top and
   bottom, line-height 22px — 9+22+9 = 40 into a 32px content box, so the text was cut
   through the middle ("CZK" read as "C7K") and the header controls sat off their baseline.
   A native select centres its text itself; `appearance: none` above takes that away, so the
   line box has to do it. Height stays 34px so the rows keep their rhythm. */
.record .detail .quotation-inline-editor select.form-control:disabled,
.record .detail .quotation-inline-editor select.form-control[readonly],
.quotation-items-mode.quotation-inline-editor select.form-control:disabled,
.quotation-items-mode.quotation-inline-editor select.form-control[readonly] {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 32px;
}

.quotation-inline-editor input[type="checkbox"][disabled] {
    opacity: 1;
    cursor: default;
}

/* ── Stánek → Projektová dokumentace: folders as sections, files dropped onto them ──────
   Widget: `custom:views/project/fields/documents-by-folder` (the `Project.documents` field).

   The vocabulary is the facelift's own (`mistrymont-facelift.css` section 1 tokens, section
   10 panel-heading typography), restated through `var(--mm-*, <literal>)` so this component
   still reads correctly if that stylesheet is ever rolled back — its rollback is a single
   `cssList` entry and must not take this panel's layout with it.

   `drop-active` / `drop-hover` are Espo's own drag class names (`views/record/kanban.js:584`),
   reused rather than reinvented; the folder carries a transparent 1px border at rest so the
   drag state cannot shift the layout. */

/* Same reasoning as the `:has(table)` rule ~80 lines up: this field is a component, not an
   editable value, so the value-box chrome and its hover tint would paint the whole panel
   blue whenever the cursor is anywhere inside it — and here that tint would also fight the
   drop highlight. Stated as its own rule rather than by widening that selector list, since
   this file has several writers. */
.record .detail .detail .field:has(.documents-by-folder),
.record .detail .panel-body .field:has(.documents-by-folder),
.record .detail .detail .field:has(.documents-by-folder):hover,
.record .detail .panel-body .field:has(.documents-by-folder):hover {
    background: transparent;
    border-color: transparent;
    padding: 0;
}

.documents-by-folder .dbf-folder {
    border: 1px solid transparent;
    border-radius: var(--mm-radius-sm, 6px);
    padding: 2px 0 6px;
}

.documents-by-folder .dbf-folder + .dbf-folder {
    margin-top: 2px;
}

.documents-by-folder .dbf-folder-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--mm-line, #E3E7EC);
}

/* The folder name reads as a section heading — same micro-label typography the panel
   headings use, so a folder never competes with the file names inside it. */
.documents-by-folder .dbf-folder-label {
    font-family: var(--mm-cond, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mm-steel, #5C6B7C);
}

/* A count is rendered only when there is something to count. */
.documents-by-folder .dbf-count {
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 10px;
    background-color: var(--mm-surface-2, #FBFCFD);
    border: 1px solid var(--mm-line, #E3E7EC);
    color: var(--mm-steel-2, #7B8896);
}

.documents-by-folder .dbf-icon {
    color: var(--mm-steel-2, #7B8896);
    width: 1em;
    text-align: center;
}

/* An empty folder stays a quiet heading — no "— empty —" line, no zero. */
.documents-by-folder .dbf-folder-empty .dbf-folder-label,
.documents-by-folder .dbf-folder-empty .dbf-icon {
    opacity: .55;
}

/* The "+" is present on every folder but only asserts itself on hover or focus. */
.documents-by-folder .dbf-add {
    margin-left: auto;
    padding: 0 4px;
    opacity: .3;
    color: var(--mm-steel, #5C6B7C);
    transition: opacity .1s ease;
}

.documents-by-folder .dbf-folder:hover .dbf-add,
.documents-by-folder .dbf-add:focus {
    opacity: 1;
    color: var(--mm-accent, #E0007A);
}

.documents-by-folder .dbf-doc {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px 4px 15px;
    border-radius: 4px;
}

.documents-by-folder .dbf-doc:hover {
    background-color: #F6F8FA;
}

.documents-by-folder .dbf-doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-by-folder .dbf-doc-download {
    margin-left: auto;
    opacity: .35;
}

.documents-by-folder .dbf-doc:hover .dbf-doc-download,
.documents-by-folder .dbf-doc-download:focus {
    opacity: 1;
}

/* Drag state — every target visible, the one under the cursor unmistakable. */
.documents-by-folder .dbf-drop.drop-active {
    border-color: var(--mm-line, #E3E7EC);
    border-style: dashed;
    background-color: var(--mm-surface-2, #FBFCFD);
}

.documents-by-folder .dbf-drop.drop-hover {
    border-color: var(--mm-accent, #E0007A);
    border-style: dashed;
    background-color: var(--mm-accent-pale, #FDEAF3);
}