/* ================================================================
   MOBILE.CSS – Aryavart Ticket Portal
   Responsive fixes and mobile-friendly enhancements
   ================================================================ */

/* ── Prevent ANY horizontal overflow ─────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

/* ── Ensure footer always sits at the bottom ──────────────────── */
.app-footer {
  margin-top: auto !important;
  flex-shrink: 0;
}

/* ── Fix: main-content fills height for sticky footer ─────────── */
.main-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

.content-area {
  flex: 1 1 auto;
  max-width: 100%;
  overflow-x: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── App layout full width ────────────────────────────────────── */
.app-layout {
  max-width: 100%;
  overflow-x: hidden;
}

/* ================================================================
   MOBILE BREAKPOINTS (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* ── Core layout ─────────────────────────────────────────────── */
  .main-content {
    margin-left: 0 !important;
    padding-bottom: 70px !important; /* space for bottom-nav */
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .content-area {
    padding: 12px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ── Footer on mobile ────────────────────────────────────────── */
  .app-footer {
    padding: 14px 16px !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    font-size: 12px !important;
    margin-top: auto !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .app-footer span { display: inline !important; }
  .app-footer span:nth-child(2) { display: inline !important; margin: 0 2px !important; } /* show "|" separator */

  /* ── Tables: prevent overflow, use card layout ───────────────── */
  .table-wrap {
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ticket-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .ticket-table thead { display: none !important; }
  .ticket-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .ticket-table tr {
    display: block !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 14px !important;
    box-shadow: var(--shadow-sm) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .ticket-table td {
    display: block !important;
    padding: 2px 0 !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Grid layouts for specific table containers */
  #adminTicketList .ticket-table tr,
  #ticketResults .ticket-table tr,
  #guestResults .ticket-table tr,
  #recentActivityList .ticket-table tr,
  #recentTickets .ticket-table tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 14px !important;
  }

  /* Admin ticket list columns */
  #adminTicketList .ticket-table td:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  #adminTicketList .ticket-table td:nth-child(5) { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
  #adminTicketList .ticket-table td:nth-child(2) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #adminTicketList .ticket-table td:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  #adminTicketList .ticket-table td:nth-child(6) { grid-column: 2 !important; grid-row: 3 !important; justify-self: end !important; }
  #adminTicketList .ticket-table td:nth-child(3) { grid-column: 1 !important; grid-row: 4 !important; font-size: 12px !important; color: var(--text2) !important; }
  #adminTicketList .ticket-table td:nth-child(7) { grid-column: 2 !important; grid-row: 4 !important; justify-self: end !important; }
  #adminTicketList .ticket-table td:nth-child(8) { display: none !important; }

  /* My-tickets & guest results */
  #ticketResults .ticket-table td:nth-child(1),
  #guestResults .ticket-table td:nth-child(1)  { grid-column: 1 !important; grid-row: 1 !important; }
  #ticketResults .ticket-table td:nth-child(4),
  #guestResults .ticket-table td:nth-child(4)  { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
  #ticketResults .ticket-table td:nth-child(2),
  #guestResults .ticket-table td:nth-child(2)  { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #ticketResults .ticket-table td:nth-child(3),
  #guestResults .ticket-table td:nth-child(3)  { grid-column: 1 !important; grid-row: 3 !important; }
  #ticketResults .ticket-table td:nth-child(5),
  #guestResults .ticket-table td:nth-child(5)  { grid-column: 2 !important; grid-row: 3 !important; justify-self: end !important; }

  /* Recent activity (admin dashboard) */
  #recentActivityList .ticket-table td:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  #recentActivityList .ticket-table td:nth-child(5) { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
  #recentActivityList .ticket-table td:nth-child(2) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #recentActivityList .ticket-table td:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  #recentActivityList .ticket-table td:nth-child(3) { grid-column: 2 !important; grid-row: 3 !important; justify-self: end !important; font-size: 12px !important; }

  /* Recent tickets (home page) */
  #recentTickets .ticket-table td:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  #recentTickets .ticket-table td:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
  #recentTickets .ticket-table td:nth-child(2) { grid-column: 1 / span 2 !important; grid-row: 2 !important; }
  #recentTickets .ticket-table td:nth-child(4) { grid-column: 1 / span 2 !important; grid-row: 3 !important; font-size: 12px !important; }

  /* Users list */
  #usersList .ticket-table tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #usersList .ticket-table td:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  #usersList .ticket-table td:nth-child(4) { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
  #usersList .ticket-table td:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; font-size: 12px !important; }
  #usersList .ticket-table td:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; font-size: 12px !important; }
  #usersList .ticket-table td:nth-child(5) { grid-column: 1 !important; grid-row: 3 !important; }
  #usersList .ticket-table td:nth-child(6) { grid-column: 2 !important; grid-row: 3 !important; justify-self: end !important; }

  /* ── Grids: stack to single column ──────────────────────────── */
  .home-grid      { grid-template-columns: 1fr !important; }
  .stats-grid     { grid-template-columns: 1fr 1fr !important; }
  .filter-grid,
  .reports-grid,
  .metrics-grid,
  .settings-grid  { grid-template-columns: 1fr !important; }
  .form-row       { grid-template-columns: 1fr !important; }
  .dashboard-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .charts-grid-2,
  .charts-grid-3  { grid-template-columns: 1fr !important; }
  .kpi-strip      { grid-template-columns: 1fr 1fr 1fr !important; }
  .detail-grid    { grid-template-columns: 1fr !important; }

  /* ── Ticket detail page ──────────────────────────────────────── */
  .ticket-detail-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "info" "status" "chat" !important;
  }

  /* ── Home page header ────────────────────────────────────────── */
  .home-header-wrap {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .home-title {
    font-size: 20px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  .home-card { padding: 20px !important; }

  /* ── Topbar improvements ─────────────────────────────────────── */
  .topbar         { padding: 0 12px !important; gap: 6px !important; }
  .topbar-title   { font-size: 14px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 160px); }
  .topbar-actions { gap: 8px !important; }
  .topbar-user    { display: none !important; }

  /* ── Filter bar ──────────────────────────────────────────────── */
  .filter-bar { flex-direction: column !important; align-items: stretch !important; }
  .filter-bar .input { width: 100% !important; min-width: 0 !important; }
  .filter-bar > div {
    width: 100% !important; overflow-x: auto !important; padding-bottom: 6px !important;
    display: flex !important; gap: 8px !important; -webkit-overflow-scrolling: touch !important;
  }
  .filter-tab { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* ── Cards ───────────────────────────────────────────────────── */
  .card { overflow: hidden; max-width: 100%; }
  .card-body { overflow-x: auto; }

  /* ── Forms ───────────────────────────────────────────────────── */
  .input, select, textarea, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .no-print form {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ── Chat ────────────────────────────────────────────────────── */
  .chat-msg { max-width: 90% !important; }

  /* ── Priority + status badges wrap ──────────────────────────── */
  .priority-group, .status-group { flex-wrap: wrap !important; }

  /* ── Sidebar toggle ──────────────────────────────────────────── */
  .sidebar      { display: none; }
  .hamburger    { display: block !important; }
  .sidebar.open { display: flex !important; }
  .sidebar-close { display: flex !important; }

  /* ── Bottom nav ──────────────────────────────────────────────── */
  .bottom-nav { display: flex !important; }
}

/* ================================================================
   VERY SMALL SCREENS (≤ 480px)
   ================================================================ */
@media (max-width: 480px) {
  .content-area { padding: 10px !important; }

  .home-title { font-size: 18px !important; }
  .home-header-wrap { gap: 6px !important; }

  .kpi-strip { grid-template-columns: 1fr 1fr !important; }
  .stats-grid { grid-template-columns: 1fr !important; }

  .topbar-title { font-size: 13px !important; max-width: calc(100vw - 130px) !important; }

  .btn { font-size: 13px !important; padding: 8px 14px !important; }

  .app-footer { padding: 12px 6px !important; font-size: 10.5px !important; gap: 4px !important; }
}