/* ==========================================================================
   style_respo.css — Responzivni vylepseni nad puvodni vTiger 6.5 softed skin.

   Pouziti: Nahraj na server a registruj v header.tpl PO ostatnich CSS
   souborech (zvlast po `softed/style.css`), aby cascadou prebil puvodni
   pravidla.

   Obsah:
   0)  Overrides pro 3 problematicka puvodni softed pravidla
   1)  LeftPanel drawer + mainContainer min-width fix + general mobile polish
   2)  List view toolbar (Akce / filtr / strankovani) flex layout
   3)  Detail view + edit view stack labels + header search compact
   4)  Lead detail action buttons + hide vtiger.com docs links
   5)  "Vsechno" -> "▦ Moduly" tlacitko (jen mobile/tablet)
   6)  Detail view tab bar nahore (column-reverse / order trick)
   7)  Moduly dropdown bigger + scroll hint na tab bar
   8)  Navbar margin-top fix + secondary search hide + Sumarni tab hide
       + theme roller (brush) visible on mobile
   9)  Row hover na list view tabulkach (univerzalni)
   13) Pinned moduly v Moduly dropdownu (mobile/tablet only)

   Vytvoreno: 2026-05
   ========================================================================== */


/* ==========================================================================
   SECTION 0 - Overrides puvodnich softed pravidel
   Tyto rules v originale rozbijely mobile UX. Misto modifikace zdroje je
   prebijeme v cascadou-pozdejsim souboru.
   ========================================================================== */

/* 0.1) Puvodne mel softed `* { zoom: 1 !important; }` v rozmezi 960-1160 px,
   coz drobne lamalo escalable layouty. Vypnout. */
@media screen and (max-width: 1160px) and (min-width: 960px) {
  * { zoom: unset !important; }
}

/* 0.2) Puvodne softed schoval #toggleButton pri max-width 960px (zaroven s
   leftPanelem, mediumNav, headerLinksBig atd.). To rozbilo moznost otevrit
   levou navigaci na mobilu. Vratime mu viditelnost.
   POZN: prefix "html body" zvedne specificity (1,2,0) nad puvodni softed
   rule (1,0,0). Bez toho by softed/style.css (loaded after this file)
   prebil cascadou.

   POZN k #leftPanel: NEDAVAT sem - iter 1 nize ma vlastni logiku pres
   `#leftPanel:not(.hide)` (specificity 2,0,0) ktera vyhrava sama o sobe.
   Pridanim sem bychom prebili `.hide` mechanismus a leftPanel by se
   zobrazoval vzdy (i kdyz ma byt zavreny). */
@media screen and (max-width: 960px) {
  html body #toggleButton {
    display: revert !important;
  }
}

/* 0.4) Pro #headerLinksBig: softed taky schoval pri 960px. Iter 8 nize ho
   vraci viditelne, ale potrebuje vyssi specificity nez puvodni rule. */
@media screen and (max-width: 960px) {
  html body #headerLinksBig {
    display: inline-block !important;
  }
}

/* 0.3) Puvodne `.mainContainer { min-width: 1200px }` nutil horizontalni scroll
   na vsechno < 1200 px. Override viz section 1 (mainContainer fluid pod 1199 px). */


/* ==========================================================================
   RESPONSIVE-FIX 2026-05  (softed-responsive skin)
   Append-only overrides on top of original softed/style.css.
   Loads naturally after all earlier rules, so wins specificity ties.
   Toggle skin in vTiger: My Preferences -> User Advanced Options -> Theme.
   Remove this whole block to revert. Original softed skin is untouched.
   ========================================================================== */

/* (1) Free .mainContainer from rigid 1200px min-width below desktop ------- */
@media screen and (max-width: 1199px) {
  .mainContainer {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* (2) Keep #toggleButton visible and reachable on small screens ------------ */
@media screen and (max-width: 960px) {
  #toggleButton {
    display: block !important;
    position: fixed !important;
    top: 60px;
    left: 0;
    z-index: 1041;
    background: #1560bd;
    border: 0;
    border-radius: 0 4px 4px 0;
    padding: 10px 6px !important;
    width: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
  }
  #toggleButton .icon-chevron-right,
  #toggleButton .icon-chevron-left {
    filter: invert(1) brightness(2);
  }
}

/* (3) Turn #leftPanel into a slide-in drawer on small screens -------------- */
@media screen and (max-width: 960px) {
  /* Default: hidden (existing .hide class still works) */
  #leftPanel {
    display: none;
  }
  /* When user opens it via toggleButton (class .hide is removed) */
  #leftPanel:not(.hide) {
    display: block !important;
    position: fixed !important;
    top: 50px;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 340px;
    background: #eeeff2;
    z-index: 1040;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 12px rgba(0,0,0,.25);
    padding-top: 10px;
    -webkit-overflow-scrolling: touch;
  }
  /* When drawer is open, dim the rest (lightweight - no JS needed) */
  #leftPanel:not(.hide)::before {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: 340px;
    background: rgba(0,0,0,.35);
    z-index: -1;
  }
  /* RightPanel always full width on mobile (drawer overlays it) */
  #rightPanel {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* (4) List view tables scroll horizontally INSIDE content, not whole body -- */
@media screen and (max-width: 960px) {
  .listViewEntriesDiv,
  .listViewContentDiv,
  .related-tabs-action-container + .relatedContainer .listViewEntriesDiv {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  /* Min-width on the inner table so columns stay readable */
  .listViewEntriesTable {
    min-width: 720px;
  }
}

/* (5) Detail / Edit view: stack the two-column grid on mobile -------------- */
@media screen and (max-width: 768px) {
  .detailViewTable .blockContent .row-fluid > .span6,
  .detailViewContainer .row-fluid > .span6,
  .editViewContainer .row-fluid > .span6,
  .editViewPageDiv .row-fluid > .span6 {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  /* Larger touch targets in detail view rows */
  .detailViewTable td,
  .detailViewTable th {
    padding: 10px 8px !important;
    font-size: 13px;
  }
  /* Make inline-edit pencil icons always visible (no hover on touch) */
  .detailViewTable .hoverEditLink,
  .detailViewTable .editAction {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* (6) Modals: full-screen on mobile so they don't drown in tiny window ----- */
@media screen and (max-width: 768px) {
  .modal,
  .modalContainer,
  .ui-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .modal-body,
  .ui-dialog .ui-dialog-content {
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* (7) Larger touch targets for primary buttons and table rows -------------- */
@media (pointer: coarse), screen and (max-width: 768px) {
  .btn,
  button.btn,
  .listViewEntries tr td {
    min-height: 36px;
  }
  .btn {
    padding: 8px 14px;
  }
  .listViewEntries tr td a {
    display: inline-block;
    min-height: 28px;
    line-height: 28px;
  }
}

/* (8) Better header search input on narrow screens ------------------------- */
@media screen and (max-width: 960px) {
  #globalSearchEntry,
  .globalSearchInputs {
    width: 100% !important;
    max-width: 100%;
  }
}

/* (9) Body should never force horizontal scroll on mobile ------------------ */
@media screen and (max-width: 1199px) {
  html, body {
    overflow-x: hidden !important;
  }
  body {
    min-width: 0 !important;
  }
}

/* (10) Footer: hide "Powered by" line on mobile to save space -------------- */
@media screen and (max-width: 768px) {
  .footerContainer,
  .footer {
    font-size: 10px;
    padding: 6px 0;
    text-align: center;
  }
}

/* === END RESPONSIVE-FIX ================================================== */

/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 2)
   List view toolbar (Akce / filtr / stránkování / wrench) – přerovnání
   na úzké viewporty. Bootstrap 2 span4 grid neumí inteligentně wrappovat,
   proto přepneme na flexbox pod 768 px.
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* Toolbar -> flex container s wrapem */
  .listViewActionsDiv.row-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px !important;
    align-items: center;
  }
  /* span4 sloupce -> auto-sized flex items */
  .listViewActionsDiv > .span4,
  .listViewActionsDiv > .btn-toolbar.span4,
  .listViewActionsDiv > span.span4 {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    align-items: center !important;
  }
  /* Třetí sloupec (stránkování + wrench) – děti inline */
  .listViewActions {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }
  .listViewActions > .pageNumbers,
  .listViewActions > .btn-group,
  .listViewActions > .settingsIcon {
    display: inline-flex !important;
    margin: 0 !important;
    float: none !important;
    vertical-align: middle;
  }
  .listViewActions .btn-group .btn { margin: 0 !important; }
  .listViewActions .pageNumbers {
    line-height: 28px;
    font-size: 11px;
    white-space: nowrap;
  }
  /* Buttony v toolbaru – nezalamovat */
  .listViewActionsDiv .btn {
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: 12px;
  }
  /* Filtr dropdown – rozumná šířka */
  .listViewActionsDiv .customFilterMainSpan,
  .listViewActionsDiv .customFilterMainSpan .select2-container {
    width: auto !important;
    min-width: 130px !important;
    max-width: 200px;
  }
  .listViewActionsDiv .filterActionImages.hide { display: none !important; }
}

/* === END RESPONSIVE-FIX iter 2 =========================================== */

/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 3)
   Mobile detail view, edit view, header search, notifications.
   Vse pod 768 px, desktop nemenime.
   ========================================================================== */

/* ---- Header: yellow announcement bar ----------------------------------- */
@media screen and (max-width: 768px) {
  #announcement, .announcement {
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-wrap: break-word;
    overflow: visible !important;
    display: block !important;
  }
}

/* ---- Header: global search row compact ---------------------------------- */
@media screen and (max-width: 768px) {
  .menuBar .row-fluid > .span10,
  .menuBar .row-fluid > .span8 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  .menuBar.row-fluid {
    padding: 4px 6px !important;
  }
  /* Schovat sekundarni hledani (prohledanileadu - custom modifikace)
     na mobilu, primarni search staci a misto je vzacne. */
  .searchElement form[action*="hledani"],
  .searchElement input[name="prohledanileadu"],
  .searchElement input[name="prohledanileadu"] + input[type="submit"] {
    display: none !important;
  }
  /* Hide the wrapper span that holds the secondary search form */
  .searchElement > span:has(> form[action*="hledani"]) {
    display: none !important;
  }
  /* Navbar je na mobilu vyssi (search + announcement + commonActions = ~130 px),
     puvodni margin-top 90 px ho neclear-uje a prvni radek obsahu se schova
     pod navbar. Vetsi rezerva: */
  .mainContainer {
    margin-top: 140px !important;
  }
}

/* ---- Detail view: horizontal scrollable tab bar ------------------------- */
@media screen and (max-width: 768px) {
  .detailViewInfo .related.span2 {
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
    height: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .detailViewInfo .related.span2 > div {
    width: max-content !important;
    min-width: 100%;
  }
  .detailViewInfo .related .nav.nav-stacked,
  .detailViewInfo .related .nav-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }
  .detailViewInfo .related .nav.nav-stacked > li,
  .detailViewInfo .related .nav-pills > li {
    display: inline-block !important;
    float: none !important;
    margin: 0 4px 0 0 !important;
    flex-shrink: 0;
  }
  .detailViewInfo .related .nav.nav-stacked > li > a,
  .detailViewInfo .related .nav-pills > li > a {
    padding: 8px 12px !important;
    font-size: 12px;
    white-space: nowrap;
  }
  .detailViewInfo .span10.details {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
}

/* ---- Detail view: field rows stack label nad value ---------------------- */
@media screen and (max-width: 768px) {
  table.detailview-table {
    width: 100% !important;
    margin-bottom: 10px;
  }
  table.detailview-table .blockHeader,
  table.detailview-table th.blockHeader {
    padding: 8px 10px !important;
    font-size: 13px;
  }
  table.detailview-table tr {
    display: block;
    border-bottom: 1px solid #eee;
  }
  table.detailview-table tr:last-child {
    border-bottom: 0;
  }
  table.detailview-table td.fieldLabel,
  table.detailview-table td.fieldLabel.medium {
    display: block !important;
    width: 100% !important;
    padding: 6px 10px 0 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
  }
  table.detailview-table td.fieldLabel label,
  table.detailview-table td.fieldLabel.medium label {
    float: none !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: bold;
    color: #666;
    font-size: 11px;
  }
  table.detailview-table td.fieldValue,
  table.detailview-table td.value {
    display: block !important;
    width: 100% !important;
    padding: 2px 10px 8px !important;
    font-size: 13px;
    border-top: 0 !important;
    border-left: 0 !important;
  }
  /* Override resources/styles.css max-width: calc(46% - 8px) hack
     ktery srazil sirku komentaru v Podrobnem view na polovinu. */
  table.detailview-table td,
  table.detailview-table td.fieldLabel,
  table.detailview-table td.fieldValue,
  table.detailview-table td.fieldLabel.medium,
  table.detailview-table td.fieldValue.medium {
    flex: none !important;
    max-width: 100% !important;
  }
  table.detailview-table .hoverEditLink,
  table.detailview-table .editAction {
    opacity: 0.5 !important;
    visibility: visible !important;
  }
}

/* ---- Edit view: stack labels + full-width inputs ----------------------- */
@media screen and (max-width: 768px) {
  .editViewContainer table.blockContainer,
  table.blockContainer.showInlineTable,
  table.blockContainer.equalSplit {
    width: 100% !important;
    margin-bottom: 10px;
    table-layout: fixed;
  }
  .editViewContainer table.blockContainer tr {
    display: block !important;
    border-bottom: 1px solid #f0f0f0;
  }
  .editViewContainer table.blockContainer td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 4px 10px !important;
    border: 0 !important;
    text-align: left !important;
  }
  .editViewContainer table.blockContainer td.fieldLabel,
  .editViewContainer table.blockContainer td.fieldLabel.medium {
    padding: 8px 10px 2px !important;
    background: transparent !important;
  }
  .editViewContainer table.blockContainer td.fieldLabel label,
  .editViewContainer table.blockContainer td.fieldLabel.medium label {
    float: none !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: bold;
    font-size: 12px;
    color: #444;
  }
  .editViewContainer table.blockContainer td.fieldValue {
    padding: 2px 10px 10px !important;
  }
  .editViewContainer table.blockContainer input[type="text"],
  .editViewContainer table.blockContainer input[type="email"],
  .editViewContainer table.blockContainer input[type="tel"],
  .editViewContainer table.blockContainer input[type="number"],
  .editViewContainer table.blockContainer input[type="url"],
  .editViewContainer table.blockContainer input[type="password"],
  .editViewContainer table.blockContainer input[type="date"],
  .editViewContainer table.blockContainer textarea,
  .editViewContainer table.blockContainer select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 36px;
    font-size: 14px;
    padding: 6px 8px;
  }
  .editViewContainer table.blockContainer textarea {
    min-height: 80px;
  }
  .editViewContainer table.blockContainer .select2-container,
  .editViewContainer table.blockContainer .chzn-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .editViewContainer table.blockContainer td.fieldValue input.salutationType,
  .editViewContainer table.blockContainer td.fieldValue select.salutationType {
    width: 30% !important;
    display: inline-block !important;
    margin-right: 4px;
  }
  .editViewContainer table.blockContainer .blockHeader,
  .editViewContainer table.blockContainer th.blockHeader {
    padding: 8px 10px !important;
    font-size: 13px;
  }
  .editViewContainer table.blockContainer td.fieldLabel .redColor {
    margin-left: 4px;
  }
  .editViewContainer .submitButtonsContainer,
  .editViewContainer .submitButtons,
  .editViewContainer #EditView .recordSaveButtonsContainer {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 10px 8px;
    border-top: 1px solid #ddd;
    z-index: 100;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
    margin: 0 -8px;
  }
}

/* ---- List view: drobne finalni lesteni --------------------------------- */
@media screen and (max-width: 768px) {
  .listViewEntries td.listViewEntryValue {
    padding: 8px 6px !important;
    font-size: 12px;
  }
  .listViewEntriesTable input[type="text"] {
    font-size: 12px;
    padding: 4px 6px;
    min-height: 28px;
  }
}

/* === END RESPONSIVE-FIX iter 3 =========================================== */

/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 4)
   - Lead detail action toolbar (Upravit / Konvertovat / Vice / wrench)
     ve span7 ma 4 button-groupy v 204 px sloupcku -> stackuji se.
     Re-flow na flex s wrapem.
   - Skryti vtiger Dokumentace + Videonavod (vede na anglicke vtiger.com,
     pro uzivatele nepouzitelne) - globalne, ne jen mobile.
   ========================================================================== */

/* ---- Globalne (desktop + mobile): skryt vtiger.com doc odkazy ---------- */
#menubar_item_right_LBL_DOCUMENTATION,
#menubar_item_right_LBL_VIDEO_TUTORIAL {
  display: none !important;
}
li:has(> #menubar_item_right_LBL_DOCUMENTATION),
li:has(> #menubar_item_right_LBL_VIDEO_TUTORIAL) {
  display: none !important;
}

/* ---- Detail view title + action buttons ---------------------------------- */
@media screen and (max-width: 768px) {
  /* Title row - stack title side + buttons side full width */
  .detailViewTitle.row-fluid > .span12 {
    width: 100% !important;
  }
  .detailViewTitle .row-fluid > .span5,
  .detailViewTitle .row-fluid > .span7 {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  /* Action buttons container - full width, no float-right */
  .detailViewButtoncontainer.pull-right,
  .detailViewButtoncontainer {
    float: none !important;
    width: 100% !important;
    margin-top: 8px;
  }
  /* Buttons toolbar: flex with wrap */
  .detailViewButtoncontainer .btn-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .detailViewButtoncontainer .btn-toolbar .btn-group,
  .detailViewButtoncontainer .btn-toolbar > .btn {
    margin: 0 !important;
    float: none !important;
    display: inline-flex !important;
  }
  .detailViewButtoncontainer .btn-toolbar .btn {
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: 12px;
  }
  /* "Konvertovat prvni kontakt:" je dlouhe - povolit smrsteni */
  .detailViewButtoncontainer .btn-toolbar .btn-group:has(button[id*="Convert"]) {
    flex-shrink: 1;
  }
}

/* === END RESPONSIVE-FIX iter 4 =========================================== */

/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 5)
   "Vsechno" dropdown button (module switcher) je pro uzivatele neintuitivni.
   Prepiseme label na "Moduly", pridame grid ikonu (U+25A6) a vizualne
   zvyraznime jako tlacitko.
   2026-05: Omezeno JEN na mobile/tablet (< 1024 px), na desktopu zustava
   puvodni "Vsechno" - desktop uzivatele to pouzivaji a chteji jak je.
   ========================================================================== */

@media screen and (max-width: 1024px) {
  .menuBar a.dropdown-toggle[href*="collapsedMenu"],
  .menuBar a.dropdown-toggle[href*="moreMenu"] {
    background: rgba(255,255,255,0.15) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 0 !important;
    margin: 4px 8px 4px 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    line-height: 1 !important;
    text-decoration: none !important;
  }
  .menuBar a.dropdown-toggle[href*="collapsedMenu"]:hover,
  .menuBar a.dropdown-toggle[href*="moreMenu"]:hover {
    background: rgba(255,255,255,0.25) !important;
  }
  .menuBar a.dropdown-toggle[href*="collapsedMenu"]::before,
  .menuBar a.dropdown-toggle[href*="moreMenu"]::before {
    content: "\25A6  Moduly";
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
  }
  .menuBar a.dropdown-toggle[href*="collapsedMenu"] .caret,
  .menuBar a.dropdown-toggle[href*="moreMenu"] .caret {
    font-size: 14px !important;
    margin-left: 2px;
    border-top-color: #fff !important;
  }
}

/* === END RESPONSIVE-FIX iter 5 =========================================== */

/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 6)
   Detail view layout: rozsirit mobilni layout (tabs nahore horizontalne,
   obsah pod nimi v plne sirce) z 768 px az do 1024 px. Telefony v landscape
   i mensi tablety tim ziskaji plnou sirku komentaru, detailu a editu.
   Pri 1025+ px se vraci klasicke desktop dva-sloupcove rozlozeni.
   ========================================================================== */

@media screen and (max-width: 1024px) {
  /* Stack v poradi: tabs (.related) NAHORE, obsah (.details) POD nimi.
     V DOM je details prvni, related druhe -> pouzit order property
     (column-reverse flaky kvuli vnoreny formum + tables). */
  .detailViewInfo {
    display: flex !important;
    flex-direction: column !important;
  }
  .detailViewInfo .related.span2 { order: -1 !important; }
  .detailViewInfo .span10.details { order: 1 !important; }
  /* Tab bar - plna sirka, horizontalni scroll */
  .detailViewInfo .related.span2 {
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
    height: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .detailViewInfo .related.span2 > div {
    width: max-content !important;
    min-width: 100%;
  }
  .detailViewInfo .related .nav.nav-stacked,
  .detailViewInfo .related .nav-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }
  .detailViewInfo .related .nav.nav-stacked > li,
  .detailViewInfo .related .nav-pills > li {
    display: inline-block !important;
    float: none !important;
    margin: 0 4px 0 0 !important;
    flex-shrink: 0;
  }
  .detailViewInfo .related .nav.nav-stacked > li > a,
  .detailViewInfo .related .nav-pills > li > a {
    padding: 8px 14px !important;
    font-size: 13px;
    white-space: nowrap;
  }
  /* Obsah - plna sirka */
  .detailViewInfo .span10.details {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
}

/* === END RESPONSIVE-FIX iter 6 =========================================== */

/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 7)
   - Moduly dropdown: vetsi a touch-friendly na mobilu (~plna sirka viewportu,
     velke polozky 44+ px).
   - Scroll hint na tab bar v detail view: fade gradient na pravem okraji
     + animovana sipka pulzujici 5x prvnich 5 vterin (vizualni napoveda,
     ze tabs jdou posouvat prstem).
   ========================================================================== */

/* ---- Moduly dropdown (po kliku na "Moduly" tlacitko) -------------------- */
@media screen and (max-width: 768px) {
  .menuBar li.dropdown.tabs > .dropdown-menu,
  li.dropdown.tabs > .dropdown-menu {
    /* position: fixed oddeli dropdown od parent <li>, jinak Bootstrap
       pozicoval absolutne relativne k tlacitku (x=54 misto x=8). */
    position: fixed !important;
    top: 48px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 6px 0 !important;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    /* nad #toggleButton (z-index 1041) */
    z-index: 1050 !important;
  }
  /* Bigger touch items */
  li.dropdown.tabs > .dropdown-menu li > a,
  li.dropdown.tabs > .dropdown-menu a {
    padding: 12px 18px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  /* Category headers (Obchod, Podpora atd.) */
  li.dropdown.tabs > .dropdown-menu .menuHeader,
  li.dropdown.tabs > .dropdown-menu strong,
  li.dropdown.tabs > .dropdown-menu .nav-header {
    font-size: 11px !important;
    text-transform: uppercase;
    color: #999 !important;
    padding: 12px 18px 4px !important;
    letter-spacing: 0.5px;
    display: block;
    background: #f7f7f9;
    border-top: 1px solid #eee;
  }
  /* Hover/active state */
  li.dropdown.tabs > .dropdown-menu a:hover,
  li.dropdown.tabs > .dropdown-menu a:focus,
  li.dropdown.tabs > .dropdown-menu li.active > a {
    background: #1560bd !important;
    color: #fff !important;
  }
}

/* ---- Scroll hint na tab bar (Sumarni / Podrobne / Komentare / ...) -----
   Pulzuje 5x prvnich 5 vterin, pak fade out a UPLNE zmizi (jinak by gradient
   prekryval aktivni tab pri scrollovani). */
@media screen and (max-width: 1024px) {
  .detailViewInfo .related.span2 {
    position: relative !important;
  }
  /* Fade gradient - po 5s zmizi */
  .detailViewInfo .related.span2::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 8px;
    width: 36px;
    background: linear-gradient(to right,
      rgba(250,250,251,0) 0%,
      rgba(250,250,251,0.95) 70%,
      rgba(250,250,251,1) 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    animation: vt-tab-hint-fadeout 0.6s ease-out 5s 1 forwards;
  }
  /* Animovana sipka - pulzuje 5x, pak zmizi */
  .detailViewInfo .related.span2::before {
    content: '\203A';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    color: #1560bd;
    z-index: 3;
    pointer-events: none;
    animation:
      vt-tab-pulse    1s   ease-in-out 0s 5,
      vt-tab-hint-fadeout 0.6s ease-out 5s 1 forwards;
  }
}
@keyframes vt-tab-pulse {
  0%, 100% { transform: translate(-6px, -50%); opacity: 0.4; }
  50%      { transform: translate(6px,  -50%); opacity: 1; }
}
@keyframes vt-tab-hint-fadeout {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* === END RESPONSIVE-FIX iter 7 =========================================== */

/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 8)
   - Hide leftPanel toggle button (>) kdyz je Moduly dropdown otevreny.
     Reseni stacking-context konfliktu: dropdown je uvnitr navbar
     (z-index 1030 vlastni context), toggle je v root contextu (z 1041).
     Z-index nestaci, jen `:has()` selector funguje.
   - Skryt prvni tab (Sumarni / Podrobne Sumarni / ...) z horizontalni
     navigace v detail view - na desktopu i mobilu (uzivatel ho nepouziva).
   - Theme roller (stetec) zpristupnit na mobilu - v puvodnim
     softed/style.css je #headerLinksBig schovany pod 960px, schovava
     i theme picker. Pozice fixed vlevo od burger menu.
   ========================================================================== */

/* ---- Hide toggleButton when Moduly dropdown is open --------------------- */
body:has(li.dropdown.tabs.open) #toggleButton,
html:has(li.dropdown.tabs.open) #toggleButton {
  display: none !important;
}

/* ---- Hide Sumarni tab (prvni polozka horizontalni navigace) ------------- */
.detailViewInfo .related .nav.nav-stacked > li:first-child,
.detailViewInfo .related .nav-pills > li:first-child,
.detailViewInfo .related ul.nav > li:first-child {
  display: none !important;
}

/* ---- Theme roller (stetec) visible on mobile ---------------------------- */
@media screen and (max-width: 960px) {
  /* Override puvodni hide of #headerLinksBig, ale ukaz jen prvni ikonu */
  #headerLinksBig {
    display: inline-block !important;
    width: auto !important;
    position: fixed !important;
    top: 13px !important;  /* vyska zarovnana s ostatnimi ikonami */
    right: 70px !important;  /* hned vedle + a burger, gap ~8 px */
    z-index: 1045;
    line-height: 1 !important;
  }
  #headerLinksBig > * {
    display: none !important;
  }
  #headerLinksBig > .settingIcons:first-child,
  #headerLinksBig > span.dropdown:first-child {
    display: inline-block !important;
    vertical-align: middle;
  }
  /* Theme dropdown (themeMenuContainer) -> position fixed, escape navbar */
  #headerLinksBig .themeMenuContainer {
    position: fixed !important;
    top: 48px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 1050 !important;
    max-width: calc(100vw - 16px);
  }
  /* Bily/svetly stetec na modrem navbaru */
  #headerLinksBig > .settingIcons:first-child img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
    width: 22px;
    height: auto;
  }
}

/* === END RESPONSIVE-FIX iter 8 =========================================== */

/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 9)
   List view tabulky: sticky thead + row hover (univerzalne pro vsechny modul).
   Status badge: barevne pillsy v fakbot ListView (zalozeno na inline
   "color: green/red" spans, ktere puvodni PHP renderuje).
   ========================================================================== */

/* 1) Sticky table header - VYNECHANO (puvodne iter 9 melo position:sticky).
   Bug: v Chrome u listView tabulek se search row v tbody (Project, Contacts,
   Leads atd.) sticky thead i sticky <th> rozhodi layout tak, ze prvni data
   row se umisti pod sticky thead nebo prekryt. Bezpecnejsi je sticky nedavat.
   Pokud byses chtel sticky thead vratit, je potreba ho radne vyresetovat
   na search row uvnitr tbody. */

/* 2) Row hover universal */
.listViewEntriesTable tbody tr.listViewEntries:hover td {
  background-color: #fff9e6 !important;
  transition: background-color 0.1s ease-in;
}

/* 3) Status badges (fakbot) - PRESUNUTO do style_custom.css (theme-agnostic). */

/* === END RESPONSIVE-FIX iter 9 =========================================== */

/* === iter 10 (filter bar), iter 11 (pagination), iter 12 (actions dropdown)
   PRESUNUTY do style_custom.css (theme-agnostic, registrovany v header.tpl). === */


/* ==========================================================================
   RESPONSIVE-FIX 2026-05 (iter 13) - pinned moduly v Moduly dropdownu
   Souvisi s iter 5 (Vsechno -> "▦ Moduly" prepisem labelu). Tema-specificke.
   Pinned moduly (8): Kontakty, Leady (Prvni kontakty), Faktury (fakbot),
   Organizace (Accounts), Projekty (Project), Servisni smlouvy, Dochazka,
   Robocop. Pouziva flex order + :has() selector.
   Jen na mobilu/tabletu (<= 1024 px).
   ========================================================================== */

@media screen and (max-width: 1024px) {
  /* Polozky menu jsou v <div.shortDropdown> uvnitr <ul.dropdown-menu>.
     Format: <label.moduleNames><a href="...">Modul</a></label>
     Flex container musi byt na .shortDropdown (parent items), ne na ul. */
  li.dropdown.tabs.open > .dropdown-menu > .shortDropdown {
    display: flex !important;
    flex-direction: column !important;
  }

  /* "OBLÍBENÉ" header byl odstraneny - search input v style_custom.css
     a vizualni odliseni pres modry left border na pinned modulech staci. */

  /* Pinned moduly - targetuju .moduleNames (label) misto neexistujicich <li> */
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=Leads&"]) { order: -98; }
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=fakbot&"]) { order: -97; }
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=Accounts&"]) { order: -96; }
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=Project&"]) { order: -95; }
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=ServiceContracts&"]) { order: -94; }
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=dochazka&"]) { order: -93; }
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=robocop&"]) { order: -92; }

  /* Vsechny pinned dostavaji modry levy okraj pro vizualni odliseni */
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=Leads&"]),
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=fakbot&"]),
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=Accounts&"]),
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=Project&"]),
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=ServiceContracts&"]),
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=dochazka&"]),
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=robocop&"]) {
    background: #f5f9fc;
    border-left: 3px solid #1560bd;
  }

  /* Posledni pinned (robocop) ma silnejsi spodni border jako separator */
  li.dropdown.tabs > .dropdown-menu .moduleNames:has(a[href*="module=robocop&"]) {
    border-bottom: 2px solid #1560bd;
    margin-bottom: 4px;
  }
}

/* === END RESPONSIVE-FIX iter 13 ========================================== */