/* =========================================================
   MOBILE / ANDROID APP CSS — Centralised mobile overrides
   =========================================================
   Loaded AFTER css/style.css in index.php so these rules
   override the desktop/tablet/Redmi-specific fixes.
   Targets all mobile browsers and Capacitor WebViews up to 768px.
*/

@media (max-width: 768px) {

  /* ----- Viewport / body shell ----- */
  html,
  body {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .app-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    order: 1 !important;
  }

  .top-bar {
    position: relative !important;
    flex-shrink: 0 !important;
    order: 0 !important;
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    padding:
      calc(0.5rem + env(safe-area-inset-top))
      calc(0.75rem + env(safe-area-inset-right))
      0.5rem
      calc(0.75rem + env(safe-area-inset-left)) !important;
    gap: 0.5rem !important;
  }

  .top-bar #view-title {
    font-size: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 50vw !important;
  }

  .view-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding:
      0.75rem
      calc(0.75rem + env(safe-area-inset-right))
      calc(0.75rem + env(safe-area-inset-bottom))
      calc(0.75rem + env(safe-area-inset-left)) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  /* ----- Sidebar overlay ----- */
  .sidebar-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999 !important;
  }
  .sidebar-overlay.active {
    display: block !important;
  }

  /* ----- Sidebar as slide-in overlay ----- */
  .app-layout .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(300px, 85vw) !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: translateX(-110%) !important;
    z-index: 1000 !important;
    background-color: var(--bg-sidebar) !important;
    border-right: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .app-layout .sidebar.open {
    transform: translateX(0%) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.35) !important;
  }
  .app-layout .sidebar.collapsed {
    width: min(300px, 85vw) !important;
    max-width: 85vw !important;
  }

  /* Force sidebar children to stretch the full width of the drawer */
  .app-layout .sidebar-header,
  .app-layout .sidebar-menu,
  .app-layout .sidebar-footer {
    align-self: stretch !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .app-layout .sidebar-header {
    padding: 1.25rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .app-layout .brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-size: 1.1rem !important;
    color: #fff !important;
  }
  .app-layout .brand img {
    max-width: 48px !important;
    max-height: 48px !important;
    margin-right: 0 !important;
  }
  .app-layout .brand span,
  .app-layout .role-indicator {
    display: inline-block !important;
  }
  .app-layout .role-indicator {
    font-size: 0.7rem !important;
    margin-top: 0.25rem !important;
  }

  .app-layout .sidebar-menu {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.5rem 0 !important;
    list-style: none !important;
  }
  .app-layout .sidebar-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Mobile: show all side menu items regardless of the hidden flag; server enforces permissions */
  .app-layout .sidebar-menu li,
  .app-layout .sidebar-menu li.hidden,
  .app-layout .sidebar-menu li:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Menu links: full row, icon + text on one line, always visible */
  .app-layout .sidebar-menu li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.85rem 1.25rem !important;
    color: var(--text-on-sidebar) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 0 !important;
  }

  .app-layout .sidebar-menu li > a > i {
    font-size: 1.1rem !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  .app-layout .sidebar-menu li > a > span {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
  }

  .app-layout .sidebar-menu li.active {
    border-left: 3px solid var(--primary) !important;
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.08) 0%, transparent 100%) !important;
  }
  .app-layout .sidebar-menu li.active > a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }

  .app-layout .sidebar-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .app-layout .user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .app-layout .user-profile .info {
    display: block !important;
  }
  .app-layout .btn-sidebar-logout {
    flex-shrink: 0 !important;
  }

  /* ----- Layout helpers ----- */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }
  .kpi-card {
    padding: 0.75rem !important;
  }
  .kpi-card .card-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  .section-row,
  .form-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin: 0 !important;
  }
  .grid-col-3,
  .grid-col-4,
  .grid-col-5,
  .grid-col-6,
  .grid-col-7,
  .grid-col-8,
  .grid-col-9,
  .grid-col-12,
  .responsive-form .col-3,
  .responsive-form .col-4,
  .responsive-form .col-6,
  .responsive-form .col-8,
  .responsive-form .col-9,
  .responsive-form .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0.5rem 0 !important;
  }

  .form-actions {
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }
  .form-actions button,
  .form-actions .btn {
    width: 100% !important;
  }

  .table-container,
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .report-filters-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .filter-item {
    width: 100% !important;
  }

  /* ----- Timeline on mobile ----- */
  .timeline-filters {
    display: block !important;
  }
  .timeline-filters .right {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
  }
  .timeline-hour-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .timeline-time-col {
    width: 100% !important;
    padding: 0.4rem 0.5rem !important;
    font-weight: 600 !important;
    background: var(--primary-light) !important;
    border-radius: var(--radius-sm) !important;
  }
  .timeline-events-col {
    width: 100% !important;
  }
  .timeline-timeline-wrapper {
    min-width: 0 !important;
  }
  .timeline-event-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px !important;
  }

  /* ----- Collector view ----- */
  .collector-split-layout {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
  }
  .collector-tasks-panel,
  .collector-workflow-panel {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
  }
}

/* ----- Very small phones (<= 400px) ----- */
@media (max-width: 400px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .app-layout .sidebar {
    width: min(280px, 88vw) !important;
    max-width: 88vw !important;
  }
  .app-layout .sidebar-menu li > a {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

/* ----- Landscape on small phones ----- */
@media (max-height: 450px) and (orientation: landscape) {
  .top-bar {
    min-height: 48px !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }
  .app-layout .sidebar-menu li > a {
    min-height: 44px !important;
    padding: 0.6rem 1rem !important;
  }
}