/* TIM-OE 2026-05-02
   Correct file fix for the REAL React worker panel (static/js/main.brandingcachefix.20260418.js).
   Desktop is untouched. Only mobile layout + menu clickability is fixed.
*/

@media (max-width: 768px) {
  /* Keep mobile sidebar/menu rows clickable. Previous mobile patches could leave layers over the menu. */
  body.timoe-vibiz-admin aside[class*="xl:hidden"],
  body.timoe-vibiz-admin aside[class*="fixed"][class*="left-0"],
  body.timoe-vibiz-admin aside[data-timoe-sidebar="vibiz"] {
    pointer-events: auto !important;
  }

  body.timoe-vibiz-admin aside[class*="xl:hidden"] *,
  body.timoe-vibiz-admin aside[class*="fixed"][class*="left-0"] *,
  body.timoe-vibiz-admin aside[data-timoe-sidebar="vibiz"] *,
  body.timoe-vibiz-admin nav *,
  body.timoe-vibiz-admin [role="navigation"] * {
    pointer-events: auto !important;
  }

  body.timoe-vibiz-admin aside[class*="xl:hidden"] button,
  body.timoe-vibiz-admin aside[class*="xl:hidden"] a,
  body.timoe-vibiz-admin aside[class*="fixed"][class*="left-0"] button,
  body.timoe-vibiz-admin aside[class*="fixed"][class*="left-0"] a,
  body.timoe-vibiz-admin aside[data-timoe-sidebar="vibiz"] button,
  body.timoe-vibiz-admin aside[data-timoe-sidebar="vibiz"] a {
    position: relative !important;
    z-index: 5 !important;
    cursor: pointer !important;
  }

  /* Worker React panel: make the real "Meine Arbeitsliste / Lista ime e punës" table readable on phone. */
  body.timoe-worker-react-panel .timoe-real-worker-worklist {
    overflow: visible !important;
  }

  body.timoe-worker-react-panel .timoe-real-worker-worklist table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
  }

  body.timoe-worker-react-panel .timoe-real-worker-worklist thead {
    display: none !important;
  }

  body.timoe-worker-react-panel .timoe-real-worker-worklist tbody {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.timoe-worker-react-panel .timoe-real-worker-worklist tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.06) !important;
  }

  body.timoe-worker-react-panel .timoe-real-worker-worklist td {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    color: #0f172a !important;
    font-size: .86rem !important;
    line-height: 1.35 !important;
  }

  body.timoe-worker-react-panel .timoe-real-worker-worklist td::before {
    content: attr(data-timoe-label);
    min-width: 0 !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
  }

  body.timoe-worker-react-panel .timoe-real-worker-worklist td:empty {
    display: none !important;
  }

  body.timoe-worker-react-panel .timoe-real-worker-worklist td button,
  body.timoe-worker-react-panel .timoe-real-worker-worklist td a {
    width: 100% !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  /* If the table is wrapped in an overflow-x container, disable horizontal scroll only for this list. */
  body.timoe-worker-react-panel .timoe-real-worker-worklist [class*="overflow-x"],
  body.timoe-worker-react-panel .timoe-real-worker-worklist [style*="overflow-x"] {
    overflow-x: visible !important;
  }
}