/* ==========================================================================
   style_custom.css — Custom CSS pro vTiger 6.5 CRM.

   Tyto styly jsou theme-agnostic — fungují stejně pod softed, respo i jinou
   skin. Registruj v `header.tpl` vedle dashboard.css.

   Obsah:
   0)  Module search input v Moduly dropdownu (jen mobile/tablet)
   1)  Status badges (zelene "odeslano", cervene "nezaplaceno" pillsy)
   2)  Filter bar (year tabs + period drilldown + status select)
   3)  Pagination (modern pills misto Bootstrap btn-primary/btn-dark)
   4)  Row actions dropdown (mobile: "Akce ▾" toggle, desktop: inline buttony)
   5)  Dochazka modul mobile - kompaktni user dlazdice

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


/* ==========================================================================
   5) DOCHAZKA MODUL - mobile kompaktni user dlazdice (max-width: 768 px)
   Puvodne ma wrapper <div style="width: 70%; padding-left: 35px"> + user
   tile s padding 10 px + h1 font-size 20 px = na mobilu zbytecne velke.
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* Wrapper div (width 70%, padding-left 35px) - dej plnou sirku */
  body:has(input[name="module"][value="dochazka"]) #rightPanel center > div[style*="padding-left"] {
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box;
  }
  /* User tile <table id="dochazkaXXX"> - tighter margin mezi dlazdicemi */
  body:has(input[name="module"][value="dochazka"]) table[id^="dochazka"] {
    margin-bottom: 6px !important;
  }
  /* Modrá hlavička TD - mensi padding */
  body:has(input[name="module"][value="dochazka"]) table[id^="dochazka"] > tbody > tr > td {
    padding: 8px 10px !important;
  }
  /* H1 se jmenem uzivatele - mensi font, tight line-height */
  body:has(input[name="module"][value="dochazka"]) table[id^="dochazka"] td h1 {
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  /* "zobrazit" link - kompaktni button */
  body:has(input[name="module"][value="dochazka"]) table[id^="dochazka"] td h1 a {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
}


/* ==========================================================================
   0) MODULE SEARCH v Moduly dropdownu (jen mobile/tablet ≤ 1024 px)
   JS (script_custom.js) vklada <input.modul-search> jako prvni child do
   <.shortDropdown>. Filtruje .moduleNames + skryva strong/hr separatory.

   Parent <.shortDropdown> ma padding: 10px (box-sizing: content-box).
   Input s width: 100% + box-sizing: border-box vyplni cely content area
   (= 100% sirky shortDropdown bez paddingu).
   ========================================================================== */
@media screen and (max-width: 1024px) {
  li.dropdown.tabs > .dropdown-menu > .shortDropdown > .modul-search {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding: 14px 14px !important;
    min-height: 48px !important;
    border: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #fff !important;
    display: block !important;
    order: -200; /* drzi se vzdy nahore */
  }
  li.dropdown.tabs > .dropdown-menu > .shortDropdown > .modul-search:focus {
    outline: none;
    border-bottom-color: #1560bd !important;
    background: #f9fcff !important;
  }
}
/* Desktop: input v multi-column .moreMenus (#commonMoreMenu/#largeNav).
   Display block + width:100% aby zabral celou sirku dropdownu nad sloupci.
   Inline SVG lupa jako background-image (padding-left dela misto pro ikonu). */
@media screen and (min-width: 1025px) {
  #commonMoreMenu .moreMenus > .modul-search,
  li.dropdown.tabs > .dropdown-menu > .shortDropdown > .modul-search {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px 0 !important;
    padding: 10px 14px 10px 38px !important;
    min-height: 42px !important;
    border: 1px solid #d0d7de !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #2b2b2b !important;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 12px center !important;
    background-size: 16px 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  #commonMoreMenu .moreMenus > .modul-search:focus,
  li.dropdown.tabs > .dropdown-menu > .shortDropdown > .modul-search:focus {
    outline: none;
    border-color: #1560bd !important;
    background-color: #f9fcff !important;
    box-shadow: 0 0 0 3px rgba(21, 96, 189, 0.15) !important;
  }
  #commonMoreMenu .moreMenus > .modul-search::placeholder,
  li.dropdown.tabs > .dropdown-menu > .shortDropdown > .modul-search::placeholder {
    color: #8a94a0;
  }
}


/* ==========================================================================
   1) STATUS BADGES — fakbot listView
   Inline <span style="color:green">odeslano</span> -> zeleny pill
   Inline <span style="color:red">nezaplaceno</span> -> cerveny pill
   ========================================================================== */
body:has(input[name="module"][value="fakbot"]) .listViewEntriesTable td span[style*="color: green"],
body:has(input[name="module"][value="fakbot"]) .listViewEntriesTable td span[style*="color:green"] {
  display: inline-block;
  background: #d4edda;
  color: #155724 !important;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 2px;
}
body:has(input[name="module"][value="fakbot"]) .listViewEntriesTable td span[style*="color: red"],
body:has(input[name="module"][value="fakbot"]) .listViewEntriesTable td span[style*="color:red"] {
  display: inline-block;
  background: #f8d7da;
  color: #721c24 !important;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}


/* ==========================================================================
   2) MODERN FILTER BAR — fakbot ListProjekty
   PHP renderuje:
     .fakbot-filterbar
       .fakbot-year-tabs         (2026, 2025, ..., 2020, Vse)
       .fakbot-period-row        (Cely rok, 1.Q-4.Q, mesice)
       .fakbot-secondary-filters (Stav select)
   Plus VOLBACLOVEKA -> <select.fakbot-osoba-select>
   ========================================================================== */
body:has(input[name="module"][value="fakbot"]) .fakbot-filterbar {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 14px;
  margin: 12px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* === Year tabs (Vse / 2026 / 2025 / ...) === */
body:has(input[name="module"][value="fakbot"]) .fakbot-year-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
  flex-wrap: wrap;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-year-tab {
  padding: 8px 18px;
  color: #666;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s ease;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-year-tab:hover {
  color: #1560bd;
  background: rgba(21,96,189,0.04);
  text-decoration: none;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-year-tab.fakbot-tab-active {
  color: #1560bd;
  border-bottom-color: #1560bd;
}

/* === Period drilldown row (Cely rok, kvartaly, mesice) === */
body:has(input[name="module"][value="fakbot"]) .fakbot-period-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-period-btn {
  padding: 5px 12px;
  background: #f5f5f7;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  color: #444;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.1s ease;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-period-btn:hover {
  background: #e8f0fa;
  border-color: #1560bd;
  color: #1560bd;
  text-decoration: none;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-period-btn.fakbot-tab-active {
  background: #1560bd;
  color: #fff;
  border-color: #1560bd;
  font-weight: 600;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-period-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #d8d8d8;
  margin: 0 6px;
}

/* === Secondary filters (Stav select) === */
body:has(input[name="module"][value="fakbot"]) .fakbot-secondary-filters {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  margin-top: 2px;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-secondary-filters label,
body:has(input[name="module"][value="fakbot"]) .fakbot-osoba-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-weight: 500;
}
body:has(input[name="module"][value="fakbot"]) .fakbot-status-select,
body:has(input[name="module"][value="fakbot"]) .fakbot-osoba-select {
  padding: 4px 8px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  min-width: 140px;
}

/* === Mobile / tablet pod 1024 px - tabs scroll horizontalne === */
@media screen and (max-width: 1024px) {
  body:has(input[name="module"][value="fakbot"]) .fakbot-year-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    border-bottom-width: 1px;
  }
  body:has(input[name="module"][value="fakbot"]) .fakbot-year-tab {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 13px;
  }
  body:has(input[name="module"][value="fakbot"]) .fakbot-period-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  body:has(input[name="module"][value="fakbot"]) .fakbot-secondary-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


/* ==========================================================================
   3) PAGINATION — fakbot ListProjekty
   Stranky se renderuji jako <a class="btn btn-primary|btn-dark" href="?page=N">
   primo v .listViewPageDiv bez wrappera. Targetujeme pres [href*="page="].
   ========================================================================== */
body:has(input[name="module"][value="fakbot"]) .listViewPageDiv > a.btn[href*="page="] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  margin: 0 2px;
  border: 1px solid #d0d0d0 !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all 0.1s ease;
  vertical-align: middle;
}
body:has(input[name="module"][value="fakbot"]) .listViewPageDiv > a.btn[href*="page="]:hover {
  background: #e8f0fa !important;
  border-color: #1560bd !important;
  color: #1560bd !important;
  text-decoration: none;
}
/* Aktivni stranka (btn-primary) */
body:has(input[name="module"][value="fakbot"]) .listViewPageDiv > a.btn.btn-primary[href*="page="] {
  background: #1560bd !important;
  border-color: #1560bd !important;
  color: #fff !important;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}
body:has(input[name="module"][value="fakbot"]) .listViewPageDiv > a.btn.btn-primary[href*="page="]:hover {
  background: #1560bd !important;
}
body:has(input[name="module"][value="fakbot"]) .listViewPageDiv > a.btn[href*="page="]:first-of-type {
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  body:has(input[name="module"][value="fakbot"]) .listViewPageDiv > a.btn[href*="page="] {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
    padding: 0 6px;
    margin: 0 1px;
  }
}


/* ==========================================================================
   4) ROW ACTIONS DROPDOWN (checkbox-hack) — fakbot ListProjekty
   PHP renderuje pro kazdy radek:
     <input type="checkbox" class="fakbot-actions-toggle">
     <label class="fakbot-actions-label">Akce ▾</label>
     <div class="fakbot-row-actions">[forms / spans / anchors]</div>
   Desktop (>=769 px): skryj checkbox + label, div inline jako predtim.
   Mobile (<769 px): label = "Akce ▾" button; :checked = expand div.
   ========================================================================== */

/* Checkbox vzdy visually-hidden (drzi jen :checked stav) */
body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* === DESKTOP (>= 769 px): inline as before, label hidden === */
@media screen and (min-width: 769px) {
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-label {
    display: none !important;
  }
  body:has(input[name="module"][value="fakbot"]) .fakbot-row-actions {
    display: inline;
  }
}

/* === MOBILE (< 769 px): label trigger, actions collapsed === */
@media screen and (max-width: 768px) {
  body:has(input[name="module"][value="fakbot"]) .fakbot-row-actions-cell {
    text-align: left !important;
    position: relative;
  }
  /* Label = clickable "Akce ▾" button */
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-label {
    display: inline-block;
    padding: 8px 14px;
    background: #1560bd;
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
  }
  /* Actions div schovany dokud checkbox neni :checked */
  body:has(input[name="module"][value="fakbot"]) .fakbot-row-actions {
    display: none;
  }
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle:checked ~ .fakbot-row-actions {
    display: block;
    margin-top: 6px;
  }
  /* Open state: change label background, rotate caret */
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle:checked ~ .fakbot-actions-label {
    background: #0b3161;
  }
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle:checked ~ .fakbot-actions-label .fakbot-caret {
    transform: rotate(180deg);
    display: inline-block;
  }
  /* Action buttons stacked when open */
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle:checked ~ .fakbot-row-actions > form,
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle:checked ~ .fakbot-row-actions > span,
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle:checked ~ .fakbot-row-actions > a {
    display: block;
    margin-top: 6px;
  }
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle:checked ~ .fakbot-row-actions > form input[type="submit"],
  body:has(input[name="module"][value="fakbot"]) .fakbot-actions-toggle:checked ~ .fakbot-row-actions > a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}