/* ═══════════════════════════════════════════════════════════════════════════
   UNIMAT — Mobile & Tablet Responsive Overrides
   Vsetko scoped do @media queries → nulovy vplyv na desktop
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 0. BASE: skryť mobile-only prvky na desktope ────────────────────── */
#mobile-eshop-bar { display: none; }
#mobile-eshop-breadcrumb { display: none; }

/* ─── A. GLOBALNE TOUCH & iOS OPRAVY ──────────────────────────────────── */

@media (max-width: 1023px) {
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    /* Prevent iOS zoom on input focus — font-size must be >=16px */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Smooth momentum scrolling on overflow containers */
    .overflow-x-auto,
    [style*="overflow-x:auto"],
    [style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── B. NAVIGACIA ────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Smooth slide for mobile menu */
    #mobile-menu {
        transition: max-height 0.3s ease, opacity 0.25s ease;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }
    #mobile-menu:not(.hidden) {
        max-height: 600px;
        opacity: 1;
    }

    /* Body scroll lock — toggled via JS class */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
    }

    /* Navbar padding tighter on mobile */
    #navbar .py-3 { padding-top: 8px !important; padding-bottom: 8px !important; }

    /* Logo na mobile — homepage 64px s presahom, podstranky 34px */
    .navbar-logo-hero-img { height: 64px !important; }
    #navbar.navbar-scrolled .navbar-logo-hero-img { height: 34px !important; }
    .navbar-logo-img:not(.navbar-logo-hero-img) { height: 34px !important; }

    /* Eshop pages — navbar(64) + červený pruh(48) + breadcrumb(~39) = 151 */
    .eshop-page-wrap { padding-top: 151px !important; }
    /* Zmenšiť vnútorný padding Tailwind py-8 na mobile aby nebolo príliš prázdno */
    .eshop-page-wrap > .max-w-7xl.py-8,
    .eshop-page-wrap > div > .max-w-7xl.py-8 { padding-top: 12px !important; padding-bottom: 16px !important; }

    /* Červený eshop pruh + mobile breadcrumb — len mobile */
    #mobile-eshop-bar { display: flex !important; }
    #mobile-eshop-breadcrumb { display: block !important; }
    .eshop-fixed-breadcrumb { display: none !important; }
    .eshop-bc-spacer { display: none !important; }

    /* Hide breadcrumb search toggle on mobile — search is in toolbar */
    .bc-search-form { display: none !important; }
}

/* ─── C. PRODUCT CARDS ────────────────────────────────────────────────── */

@media (max-width: 639px) {
    /* Enlarge tap targets on product cards */
    .pcard-qty-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
    }
    .pcard-qty-input {
        width: 38px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
    .pcard-cart-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .pcard-qty-row .pcard-cart-btn {
        width: 34px !important;
        height: 34px !important;
    }

    /* Tighter card padding */
    .pcard-info { padding: 8px 10px 10px !important; }
    .pcard-name { font-size: 13px !important; min-height: 34px !important; }
    .pcard-price-main { font-size: 15px !important; }

    /* Product grid gap */
    #productsGrid { gap: 8px !important; }
}

@media (max-width: 374px) {
    /* Very small phones — single column */
    #productsGrid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── D. PRODUCT DETAIL ───────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Add-to-cart form — inline v riadku, nie sticky dole */
    .add-to-cart-form {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100%;
    }
    .add-to-cart-form button[type="submit"] {
        flex: 1 1 auto !important;
        min-width: 0;
    }

    /* Product image area */
    .lg\:flex > div:first-child[class*="relative"] {
        min-height: 200px !important;
    }
    .lg\:flex > div:first-child[class*="relative"] img {
        max-height: 280px !important;
    }
}

/* ─── E. KOSIK — CARD LAYOUT NA MOBILE ────────────────────────────────── */

@media (max-width: 767px) {
    /* Hide desktop header */
    .cart-header {
        display: none !important;
    }

    /* Convert grid items to card layout */
    .cart-item {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        padding: 14px 16px !important;
        position: relative;
    }

    /* Product — full width top row */
    .cart-cell-product {
        grid-column: 1 / -1 !important;
        padding-right: 36px !important; /* space for remove btn */
    }

    /* Qty — left side bottom */
    .cart-cell-qty {
        justify-content: flex-start !important;
    }
    .cart-cell-qty .cart-qty-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
    }
    .cart-cell-qty .cart-qty-input {
        width: 44px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    /* Hide bez DPH */
    .cart-cell-bez {
        display: none !important;
    }

    /* S DPH — right side bottom, prominent */
    .cart-cell-sdph {
        text-align: right !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        align-self: center;
    }

    /* Remove — absolute top right */
    .cart-cell-remove {
        position: absolute !important;
        top: 10px;
        right: 10px;
        width: 32px !important;
        height: 32px !important;
    }

    /* Cart summary — full width */
    .cart-item + div[style*="background:#f8fafc"] {
        padding: 14px 16px !important;
    }

    /* Checkout buttons — stack vertical */
    .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
    }
    .flex.flex-col.sm\:flex-row > * {
        flex: unset !important;
        width: 100%;
    }
}

/* ─── F. UZIVATELSKE OBJEDNAVKY — CARD LAYOUT ─────────────────────────── */

@media (max-width: 767px) {
    /* Hide desktop header */
    .orders-header {
        display: none !important;
    }

    /* Convert order rows to cards */
    .order-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 12px !important;
        padding: 14px 16px !important;
        align-items: center !important;
    }

    /* Order number — bold, first line */
    .order-cell-cislo {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    /* Status badge — next to cislo */
    .order-cell-stav {
        margin-left: auto;
    }

    /* Date — subtle, full width new line */
    .order-cell-datum {
        width: 100%;
        font-size: 12px !important;
        color: #94a3b8 !important;
        order: 3;
    }

    /* Hide bez DPH */
    .order-cell-bez {
        display: none !important;
    }

    /* S DPH — prominent, full width */
    .order-cell-sdph {
        font-size: 16px !important;
        font-weight: 700 !important;
        text-align: left !important;
        order: 4;
    }

    /* Actions — right aligned */
    .order-cell-akcie {
        margin-left: auto;
        order: 4;
    }
    .order-cell-akcie a,
    .order-cell-akcie button {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ─── G. DETAIL OBJEDNAVKY (UZIVATEL) — CARD LAYOUT ──────────────────── */

@media (max-width: 767px) {
    /* Hide desktop items header */
    .order-items-header {
        display: none !important;
    }

    /* Convert item rows to cards */
    .order-item-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 10px !important;
        padding: 12px 16px !important;
        align-items: center;
    }

    /* Image */
    .oi-cell-img {
        width: 40px !important;
        flex-shrink: 0;
    }

    /* Name — takes remaining space */
    .oi-cell-name {
        flex: 1 !important;
        min-width: 0;
        font-size: 13px !important;
    }

    /* Hide DPH %, bez DPH, s DPH per unit */
    .oi-cell-dph,
    .oi-cell-bez,
    .oi-cell-sdph {
        display: none !important;
    }

    /* Qty */
    .oi-cell-qty {
        font-size: 13px !important;
        text-align: left !important;
        width: auto;
    }

    /* Total — right aligned, prominent */
    .oi-cell-total {
        margin-left: auto;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    /* Order summary — stack vertically */
    .order-summary-row {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    .order-summary-row > div[style*="gap:24px"],
    .order-summary-row > div[style*="gap: 24px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .order-summary-row div[style*="text-align:right"] {
        text-align: left !important;
    }

    /* Action buttons larger */
    .order-detail-actions a,
    .order-detail-actions button {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* ─── H. ADMIN OBJEDNAVKY — TABLE TO CARDS ────────────────────────────── */

@media (max-width: 1023px) {
    /* Stats bar — 2 columns */
    .admin-stats-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .admin-stats-bar > div {
        min-width: unset !important;
    }

    /* Filter pills — horizontal scroll */
    .admin-filter-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .admin-filter-pills::-webkit-scrollbar { display: none; }
    .admin-filter-pills > a {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Table → card layout */
    .admin-orders-table thead {
        display: none !important;
    }
    .admin-orders-table,
    .admin-orders-table tbody {
        display: block !important;
    }
    .admin-orders-table tr {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 12px;
        padding: 14px 16px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        align-items: center;
        cursor: pointer;
    }

    .admin-orders-table td {
        padding: 0 !important;
        border: none !important;
    }

    /* Cislo — bold, left */
    .admin-orders-table td[data-label="Cislo"] {
        font-size: 14px !important;
        font-weight: 700 !important;
        order: 1;
    }

    /* Status — right side of first row */
    .admin-orders-table td[data-label="Stav"] {
        margin-left: auto;
        order: 2;
        text-align: right !important;
    }
    .admin-orders-table td[data-label="Stav"] select {
        min-width: 100px !important;
        font-size: 12px !important;
    }

    /* Customer — full width second row */
    .admin-orders-table td[data-label="Zakaznik"] {
        width: 100%;
        order: 3;
    }

    /* Date — subtle */
    .admin-orders-table td[data-label="Datum"] {
        order: 4;
        font-size: 12px !important;
        color: #94a3b8 !important;
    }

    /* S DPH — prominent */
    .admin-orders-table td[data-label="S DPH"] {
        font-size: 15px !important;
        font-weight: 700 !important;
        order: 5;
    }

    /* Hide items count and bez DPH on mobile */
    .admin-orders-table td[data-label="Poloziek"],
    .admin-orders-table td[data-label="Bez DPH"] {
        display: none !important;
    }

    /* Actions — full width bottom row */
    .admin-orders-table td[data-label="Akcie"] {
        width: 100%;
        order: 6;
        text-align: left !important;
        padding-top: 8px !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px;
    }
    .admin-orders-table td[data-label="Akcie"] a,
    .admin-orders-table td[data-label="Akcie"] button {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ─── I. ADMIN DETAIL OBJEDNAVKY ──────────────────────────────────────── */

@media (max-width: 1023px) {
    /* Stack customer + delivery */
    .admin-detail-grid {
        grid-template-columns: 1fr !important;
    }

    /* Summary bar — stack vertically */
    .admin-summary-bar {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    .admin-summary-bar > div:first-child {
        flex-direction: column !important;
        gap: 12px !important;
    }
    /* Hide vertical dividers */
    .admin-summary-bar div[style*="width:1px"] {
        display: none !important;
    }

    /* Items table — horizontal scroll with hint */
    .admin-order-items {
        display: block !important;
    }
    .admin-order-items-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Minimum widths so table doesn't collapse */
    .admin-order-items th,
    .admin-order-items td {
        white-space: nowrap;
    }
    /* Hide barcode column */
    .admin-order-items td[data-label="Kod"],
    .admin-order-items th:nth-child(4) {
        display: none !important;
    }

    /* Final summary — stack */
    .admin-order-recap {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    .admin-order-recap > div:last-child {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .admin-order-recap div[style*="border-left"] {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 2px solid #e2e8f0;
        padding-top: 12px !important;
    }
    .admin-order-recap div[style*="font-size:28px"] {
        font-size: 24px !important;
    }

    /* Header card — stack actions below */
    .admin-order-header-actions {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100%;
    }
    .admin-order-header-actions select {
        width: 100% !important;
    }
    .admin-order-header-actions a {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ─── J. ADMIN DASHBOARD ──────────────────────────────────────────────── */

@media (max-width: 639px) {
    /* Status cards — force 2-col */
    .admin-status-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Revenue cards — single column */
    .admin-revenue-grid {
        grid-template-columns: 1fr !important;
    }

    /* Chart bars — smaller labels */
    .admin-chart-label {
        font-size: 8px !important;
    }

    /* Quick links — stack vertically */
    .admin-quick-links {
        flex-direction: column !important;
    }
    .admin-quick-links > a {
        width: 100% !important;
    }
}

/* ─── K. VYHLADAVANIE ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Search dropdown — full width */
    #liveSearchDropdown {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: unset !important;
        max-width: unset !important;
        max-height: 60vh !important;
        z-index: 999 !important;
    }

    /* Search input — larger */
    #liveSearchInput {
        width: 100% !important;
        max-width: none !important;
        min-width: unset !important;
        height: 42px !important;
    }

    /* Search result items — larger touch targets */
    #liveSearchDropdown > a {
        padding: 12px 14px !important;
        min-height: 52px;
    }
}

/* ─── L. STRANKOVANIE ─────────────────────────────────────────────────── */

@media (max-width: 639px) {
    /* Larger page buttons */
    nav[style*="justify-content:center"] > a,
    nav[style*="justify-content: center"] > a {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ─── M. CHECKOUT ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Delivery options — larger touch area */
    label[id^="label_"] {
        padding: 14px 16px !important;
    }
    label[id^="label_"] input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
    }

    /* Terms checkbox larger */
    #agreeTerms {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ─── N. E-SHOP MOBILE CATEGORIES ─────────────────────────────────────── */

@media (max-width: 1023px) {
    /* Mobile cat panel — improved styling */
    .eshop-mobile-cats button {
        min-height: 48px;
    }

    /* Category tree items in mobile panel — larger touch */
    #mobileCatPanel a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ─── O. FOOTER ───────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    /* Tighter footer on small screens */
    footer .max-w-7xl { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ─── P. LIST VIEW NA MOBILE ──────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Product rows — hide some columns */
    .prow-logged {
        grid-template-columns: 40px 1fr 80px 80px !important;
    }
    .prow-logged > div:nth-child(3), /* PLU */
    .prow-logged > div:nth-child(4)  /* Bez DPH */
    {
        display: none !important;
    }
    .prow-guest {
        grid-template-columns: 40px 1fr 70px !important;
    }
}

/* ─── Q. PROFILE PAGE ─────────────────────────────────────────────────── */

@media (max-width: 639px) {
    /* Force single column on small screens */
    div[style*="repeat(auto-fit, minmax(220px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ─── R. AUTH PAGES (LOGIN/REGISTER) ──────────────────────────────────── */

@media (max-width: 639px) {
    /* Login card padding */
    .auth-card {
        padding: 24px 20px !important;
        margin: 0 12px;
    }

    /* Register form sections */
    .register-section {
        padding: 20px 16px !important;
    }
}

/* ─── S. FLASH MESSAGES ───────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Warning banners — tighter */
    div[style*="padding:14px 20px"][style*="background:#fef3c7"] {
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    div[style*="padding:14px 20px"][style*="background:#fef3c7"] span {
        font-size: 13px !important;
    }
}

/* ─── T. GENERAL SPACING ON SMALL SCREENS ─────────────────────────────── */

@media (max-width: 639px) {
    /* Container padding tighter */
    .max-w-7xl { padding-left: 12px !important; padding-right: 12px !important; }

    /* Section padding reduction */
    div[style*="padding:32px 16px"] {
        padding: 20px 12px !important;
    }
    div[style*="padding:24px 16px"] {
        padding: 16px 12px !important;
    }
}

/* ─── U. BREADCRUMB MOBILE ────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Breadcrumb — horizontal scroll, no wrap */
    .breadcrumb-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    .breadcrumb-nav::-webkit-scrollbar { display: none; }

    /* View toggle buttons larger */
    .view-btn {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ─── V. HERO SECTION MOBILE ──────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Hero — presne vyska viewportu (svh = small viewport height, zohladnuje URL bar) */
    #domov.min-h-screen {
        min-height: 100svh !important;
        min-height: 100vh !important; /* fallback pre starsie prehliadace */
        max-height: 100svh;
        max-height: 100vh;
    }
    /* Inner flex container — rovnako */
    #domov > .min-h-screen {
        min-height: 100svh !important;
        min-height: 100vh !important;
        max-height: 100svh;
        max-height: 100vh;
    }

    /* Text section — menej top padding, flex-shrink povoleny */
    #domov .flex-1 {
        padding-bottom: 4px !important;
        flex-shrink: 1 !important;
        overflow: hidden;
    }
    #domov .flex-1 > div {
        padding-top: 50px !important;
    }
    /* Heading mensi na mobile */
    #domov .flex-1 h1 {
        margin-bottom: 8px !important;
    }
    /* Popis text kompaktnejsi */
    #domov .flex-1 p {
        margin-bottom: 14px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    /* CTA buttons kompaktnejsie */
    #domov .flex-1 a[style*="border-radius:12px"] {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* Sale bar — nikdy sa nescvrkne, vzdy viditelny */
    .hero-sale-bar {
        position: relative;
        z-index: 10;
        flex-shrink: 0 !important;
    }

    /* Sale items — mensie na mobile aby sa viac zmestilo */
    .hero-sale-item {
        min-width: 220px !important;
        padding: 8px 12px 8px 8px !important;
        gap: 10px !important;
    }
    .hero-sale-img {
        width: 48px !important;
        height: 48px !important;
    }
    .hero-sale-name {
        font-size: 12px !important;
    }
    .hero-sale-price {
        font-size: 14px !important;
    }

    /* Akcny chip — kompaktnejsi */
    .hero-sale-chip {
        padding: 5px 14px 5px 5px !important;
        gap: 8px !important;
    }
    .hero-sale-icon-wrap {
        width: 28px !important;
        height: 28px !important;
    }
    .hero-sale-title { font-size: 12px !important; }
    .hero-sale-subtitle { font-size: 10px !important; }

    /* Track padding kompaktnejsi */
    .hero-sale-track-wrap {
        padding: 6px 0 4px !important;
    }
    .hero-sale-header {
        padding: 4px 0 !important;
    }
    .hero-sale-bar {
        padding-bottom: 12px !important;
    }
}

@media (max-width: 639px) {
    /* Hero CTA buttons — stack vertically */
    .hero-cta-wrap {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100%;
    }
    .hero-cta-wrap > a {
        width: 100% !important;
        justify-content: center !important;
    }
}