/* ====== Base mobile improvements ====== */
:root {
  --gap: 12px;
  --gap-lg: 16px;
  --radius: 10px;
}

/* Reduce default horizontal overflow on small screens */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make containers breathe on mobile */
@media (max-width: 768px) {
  .container, .content, .dialog, .thread, .tickets, .page-content, .search, .tab_content {
    padding-left: var(--gap);
    padding-right: var(--gap);
  }
}

/* Typography for readability */
@media (max-width: 768px) {
  body, p, li, td, th, input, select, textarea, button {
    font-size: 16px;
    line-height: 1.45;
  }
}

/* Forms: make inputs & selects truly full width */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="search"], input[type="url"],
  select, textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Buttons stack gracefully */
@media (max-width: 768px) {
  .action-buttons a, .action-buttons button,
  .buttons a, .buttons button,
  .btn, .button {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 !important;
    text-align: center;
    border-radius: var(--radius);
  }
}

/* Tables: allow horizontal scroll instead of breaking layout */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  min-width: 640px; /* keep columns readable */
}

/* If osTicket tables don’t have a wrapper, add overflow to table containers */
@media (max-width: 768px) {
  table, .list, .tickets, .thread-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Ticket thread spacing & bubbles feel */
@media (max-width: 768px) {
  .thread-entry, .message, .response, .note, .thread-body {
    border-radius: var(--radius);
    padding: var(--gap-lg);
    margin-bottom: var(--gap-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    background: #fff; /* staff may already be white—safe anyway */
  }
  .thread-entry .meta, .message .meta, .response .meta {
    margin-bottom: 6px;
    opacity: .8;
    font-size: 0.9em;
  }
}

/* Navigation: keep top nav from wrapping awkwardly */
@media (max-width: 992px) {
  .nav, .nav ul, .nav li {
    flex-wrap: wrap;
  }
  .nav li a {
    padding: 10px 12px;
  }
}

/* Client portal header/logo area — center on mobile */
@media (max-width: 768px) {
  #header, .header, .logo, .pull-right, .pull-left {
    float: none !important;
    text-align: center !important;
  }
  .logo img {
    max-width: 180px;
    height: auto;
  }
}

/* Search and filter bars collapse nicely */
@media (max-width: 768px) {
  .search, .filters, .toolbar, .actions {
    display: grid;
    gap: var(--gap);
  }
}

/* Reduce giant margins and weird gaps */
@media (max-width: 768px) {
  .hero, .lead, .intro, .page-header {
    margin-top: var(--gap-lg) !important;
    margin-bottom: var(--gap-lg) !important;
  }
}

/* Login & new ticket pages: center + spacing */
@media (max-width: 768px) {
  .login, .register, .newticket, .contact, .profile {
    margin: 0 auto;
    max-width: 560px;
  }
}

/* Footer: smaller padding */
@media (max-width: 768px) {
  #footer, .footer {
    padding: var(--gap-lg) var(--gap);
  }
}

/* Staff side tweaks */
@media (max-width: 1024px) {
  #nav, #main-nav, .sidebar {
    position: relative;
    width: 100%;
  }
  .sidebar {
    margin-bottom: var(--gap-lg);
  }
}

/* Optional: compact badges/labels so they don’t overflow */
@media (max-width: 768px) {
  .label, .status, .priority, .dept {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* Optional: shrink column gaps in ticket lists */
@media (max-width: 768px) {
  .tickets td, .tickets th, .list td, .list th {
    padding: 10px 8px;
    vertical-align: middle;
  }
}

/* Hide purely decorative breadcrumbs on very small screens */
@media (max-width: 480px) {
  .breadcrumbs, .breadcrump, .crumbs {
    display: none !important;
  }
}