/* ============================================================
   Globus (web-54) – mobilní úpravy hlavičky
   ============================================================ */

/* Hamburger menu: navbar má bílé pozadí, ale .navbar-inverse dává bílé
   pruhy ikony → bílé na bílém = neviditelné. Ztmavíme je.
   (html ... zvyšuje specificitu nad bootstrapí .navbar-inverse ...) */
html .navbar-inverse .navbar-toggle .icon-bar { background-color: #333; }
html .navbar-inverse .navbar-toggle { border-color: #ccc; }
/* na hover/focus dává bootstrap tmavé pozadí → tmavé pruhy by zase zmizely; necháme světlé */
html .navbar-inverse .navbar-toggle:hover,
html .navbar-inverse .navbar-toggle:focus { background-color: #f0f0f0; }

/* Zarovnání ikon (uživatel, košík, lupa) v tlačítkách hlavičky na svislý střed textu –
   bootstrap glyphicony sedí o ~2 px výš (vertical-align:baseline + top:1px). */
header .btn .glyphicon { vertical-align: middle; top: 0; }


/* ============================================================
   Přehled předobjednávek (/predobjednavky) – datagrid na mobilu
   ============================================================ */
/* Ublaboo tabulka má 7 sloupců a na mobilu se nevejde (byla širší než zbytek
   stránky – „rozdílná šířka" + vodorovný posuvník). Na mobilu z ní uděláme
   "karty": každý řádek = blok, popisek sloupce se doplní z col-třídy přes ::before.
   Tak to sedí na šířku displeje stejně jako výpis kategorie. */
@media (max-width: 767px) {
    .datagrid-itemsGrid #snippet-itemsGrid-grid { overflow-x: visible; }
    .datagrid-itemsGrid table.table,
    .datagrid-itemsGrid table.table > tbody { display: block; width: 100%; }
    .datagrid-itemsGrid table.table > thead { display: none; } /* hlavička i filtry skryté */
    .datagrid-itemsGrid table.table > tbody > tr {
        display: block;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 4px 10px;
        background: #fff;
    }
    .datagrid-itemsGrid table.table > tbody > tr > td {
        display: block;
        border: none !important;
        padding: 3px 0;
        text-align: left !important;
        white-space: normal;
    }
    .datagrid-itemsGrid table.table > tbody > tr > td::before {
        font-weight: bold;
        color: #888;
        margin-right: 6px;
    }
    .datagrid-itemsGrid td.col-campaign_name::before     { content: "Kampaň:"; }
    .datagrid-itemsGrid td.col-product_name::before      { content: "Produkt:"; display: block; }
    .datagrid-itemsGrid td.col-branch_name::before       { content: "Pobočka:"; display: block; }
    .datagrid-itemsGrid td.col-pcs::before               { content: "Počet ks:"; }
    .datagrid-itemsGrid td.col-internal_order_no::before { content: "Č. obj.:"; }
    .datagrid-itemsGrid td.col-note::before              { content: "Poznámka:"; }
    .datagrid-itemsGrid td.col-updated::before           { content: "Aktualizováno:"; }
}


/* ============================================================
   Datagrid footer (/ucty) – výběr počtu položek zarovnat doprava
   ============================================================ */
/* Ublaboo má ve footeru 3 inline-block sloupce 25%/50%/25% (součet přesně 100%),
   takže se třetí (výběr počtu položek) kvůli sub-pixel zaokrouhlení zalomí pod
   první sloupec a vypadá to vlevo. Vytrhneme ho z toku a připíchneme svisle
   vystředěný k pravému okraji. (html … kvůli specificitě nad datagrid.min.css) */
html .row-grid-bottom { position: relative; }
html .row-grid-bottom .col-per-page {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    text-align: right;
}