/* =====================================================================
   PMS Responsive CSS — Mobile / Tablet / Desktop
   Breakpoints:
     - Phone:   max-width: 576px
     - Tablet:  577px - 768px
     - Desktop: 769px+
   Loaded after all other stylesheets so overrides take effect.
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   NAVBAR — Hamburger menu on mobile/tablet
   ───────────────────────────────────────────────────────────────────── */

/* Sidebar wrapper — on desktop acts as transparent inline flex container */
.pms-nav-sidebar {
  display: contents;
}

/* Hamburger toggle button — hidden on desktop, shown on mobile */
.pms-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid #495057;
  border-radius: 4px;
  color: white;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

.pms-nav-toggle:hover {
  background-color: var(--pms-color-dark-grey-hover);
}

.pms-nav-toggle .bi-list {
  font-size: 1.5rem;
}

/* Tablet and below — switch to hamburger sidebar */
@media (max-width: 991px) {
  .pms-nav {
    padding: 8px 12px;
    justify-content: flex-start;
    position: relative;
  }

  .pms-nav-toggle {
    display: flex;
  }

  /* Left-align title bar and headings */
  .pms-title-bar {
    text-align: left;
  }

  .pms-title {
    text-align: left;
  }

  /* Sidebar panel — slides in from the left */
  .pms-nav-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100vh;
    background-color: #343a40;
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    overflow-y: auto;
    z-index: 9999;
    transition: left 0.25s ease;
    box-shadow: none;
  }

  .pms-nav-sidebar.pms-nav-open {
    left: 0;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.4);
  }

  /* Nav-left and nav-right stack inside the sidebar */
  .pms-nav-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
  }

  .pms-nav-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #495057;
  }

  /* Nav buttons in sidebar — all same width, left-justified text */
  #pms-nav-sidebar .pms-nav-left .pms-navbar,
  #pms-nav-sidebar .pms-nav-left a.pms-button,
  #pms-nav-sidebar .pms-nav-left button.pms-button,
  #pms-nav-sidebar .pms-nav-right .pms-navbar,
  #pms-nav-sidebar .pms-nav-right a.pms-button,
  #pms-nav-sidebar .pms-nav-right button.pms-button,
  #pms-nav-sidebar .pms-nav-right .pms-button {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    min-height: 40px;
    padding: 10px 14px !important;
    font-size: 0.9rem;
    min-width: 0 !important;
    border-radius: 4px !important;
    border: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
    background-color: #343a40;
    color: #ffffff !important;
  }

  #pms-nav-sidebar .pms-nav-left .pms-navbar:hover,
  #pms-nav-sidebar .pms-nav-left a.pms-button:hover,
  #pms-nav-sidebar .pms-nav-right .pms-navbar:hover,
  #pms-nav-sidebar .pms-nav-right a.pms-button:hover,
  #pms-nav-sidebar .pms-nav-right button.pms-button:hover,
  #pms-nav-sidebar .pms-nav-right .pms-button:hover {
    background-color: #495057;
  }

  /* Logout button keeps its red background */
  #pms-nav-sidebar .pms-nav-right button.pms-button.pms-red-bg {
    background-color: var(--pms-color-red);
  }

  #pms-nav-sidebar .pms-nav-right button.pms-button.pms-red-bg:hover {
    background-color: var(--pms-color-red-hover);
  }

  /* All nav-btn elements — remove fixed min-width on mobile */
  .pms-nav-btn {
    min-width: 0;
  }

  /* Hide spacers in sidebar */
  .pms-nav-spacer {
    display: none;
  }

  /* Emulation badge wraps nicely */
  .pms-nav-left .pms-emulating {
    width: 100%;
    font-size: 0.85rem;
  }

  /* Sidebar backdrop overlay */
  .pms-nav-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
  }

  .pms-nav-backdrop.pms-nav-backdrop-visible {
    display: block;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   TITLE BAR
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .pms-title-bar {
    padding: 8px 12px;
  }

  .pms-title {
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pms-location-selector-form {
    flex-direction: column;
    gap: 8px;
  }

  .pms-location-select {
    width: 100%;
  }

  .pms-location-note {
    display: block;
    font-size: 0.8rem;
    margin-top: 4px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   MAIN MENU GRID — Responsive columns
   ───────────────────────────────────────────────────────────────────── */

/* Tablet — 2 columns */
@media (max-width: 991px) and (min-width: 577px) {
  .main-menu-wrapper {
    max-width: 90vw;
    padding: 0 12px;
  }

  .main-menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-menu-grid.wide-last-two {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-menu-grid.wide-last-two .menu-cell,
  .main-menu-grid.wide-last-two .menu-cell-half {
    grid-column: span 1;
  }

  .main-menu-grid.wide-last-two .menu-cell-wide {
    grid-column: 1 / -1;
  }
}

/* Phone — 1 column */
@media (max-width: 576px) {
  .main-menu-welcome-bar {
    flex-direction: column;
    gap: 12px;
    padding: 20px 12px 12px 12px;
    text-align: center;
  }

  .main-menu-welcome-bar p {
    position: static;
    transform: none;
  }

  .main-menu-wrapper {
    max-width: 100%;
    padding: 0 12px;
  }

  .main-menu-grid,
  .main-menu-grid.wide-last-two {
    grid-template-columns: 1fr;
  }

  .main-menu-grid .menu-cell,
  .main-menu-grid.wide-last-two .menu-cell,
  .main-menu-grid.wide-last-two .menu-cell-half,
  .main-menu-grid.wide-last-two .menu-cell-wide {
    grid-column: 1 / -1;
    height: 64px;
    font-size: 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   TABLES — Horizontal scroll wrapper
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  /* Make all tables horizontally scrollable on mobile */
  .table-responsive,
  .pms-table-responsive,
  .report-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

  /* Wrap common table containers that aren't already scrollable */
  .booking-dates-table,
  .cs-orders-table,
  .volunteer-table,
  .expense-table,
  .individual-product-table,
  .staff-matrix-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Tighter table padding on mobile */
  .table th,
  .table td {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
  }

  .table thead th {
    font-size: 0.8rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   MODALS — Full-width on mobile
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .modal-dialog {
    max-width: 95vw;
    margin: 8px auto;
  }

  .modal-xl,
  .modal-xxl,
  .modal-lg {
    max-width: 95vw;
  }

  .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 12px;
  }

  .modal-title {
    font-size: 1rem;
  }

  /* Close buttons — touch friendly */
  .modal-header .btn-close,
  .pms-close {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 576px) {
  .modal-dialog {
    max-width: 98vw;
    margin: 4px auto;
  }

  .modal-content {
    max-height: 95vh;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   FORMS — Stack on mobile
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  /* Stack inline form groups */
  .form-inline,
  .form-row {
    flex-direction: column;
    gap: 8px;
  }

  /* Full-width inputs on mobile */
  .form-inline .form-control,
  .form-inline .form-select,
  .form-row .form-control,
  .form-row .form-select,
  .form-row .col {
    width: 100%;
  }

  /* Larger touch targets for checkboxes/radios */
  .form-check-input {
    min-width: 20px;
    min-height: 20px;
  }

  .form-check-label {
    padding-left: 4px;
    font-size: 0.95rem;
  }

  /* Submit buttons full-width */
  .form-inline .btn,
  .form-inline .pms-button {
    width: 100%;
  }
}

/* Phone — smaller form controls and prevent horizontal overflow */
@media (max-width: 576px) {
  /* Prevent page-level horizontal scroll */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .form-select,
  select.form-select,
  .form-control {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  .form-select option,
  select.form-select option,
  select option {
    font-size: 0.85rem;
  }

  .form-label {
    font-size: 0.8rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   CARDS & GRIDS — Stack on mobile
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .dashboard-grid .row,
  .page-grid {
    flex-direction: column;
  }

  .dashboard-grid .col,
  .dashboard-grid .col-md-6,
  .dashboard-grid .col-lg-4,
  .page-grid > * {
    width: 100%;
    margin-bottom: 12px;
  }

  .card {
    margin-bottom: 12px;
  }

  .card-header,
  .card-body {
    padding: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   BUTTONS — Touch-friendly sizing
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .pms-button {
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 0.95rem;
  }

  .pms-button.pms-sm {
    min-height: 38px;
    padding: 6px 12px !important;
    font-size: 0.85rem;
  }

  .pms-button.pms-xs {
    min-height: 32px;
    padding: 4px 8px !important;
    font-size: 0.8rem;
  }

  /* Button groups stack */
  .btn-group,
  .pms-button-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-group .pms-button,
  .pms-button-group .pms-button {
    width: 100% !important;
    border-radius: 4px !important;
    margin-bottom: 4px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   APP CONTENT — Reduce padding on mobile
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .app-content.container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }

  .pms-footer {
    padding: 12px 8px;
    font-size: 0.8rem;
    text-align: center;
  }

  .pms-footer .container-fluid {
    padding: 0 8px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   ALERTS — Full-width on mobile
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .alert {
    margin: 8px 0;
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   WEBMAIL — Responsive layout
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .webmail-layout,
  .webmail-container {
    flex-direction: column;
  }

  .webmail-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    max-height: 200px;
    overflow-y: auto;
  }

  .webmail-message-list {
    width: 100%;
  }

  .webmail-message-view {
    width: 100%;
  }

  .webmail-compose-body textarea {
    min-height: 200px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   REGIONAL MANAGEMENT — Calendar adjustments
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .months-grid {
    grid-template-columns: 1fr;
  }

  .annual-calendar {
    font-size: 0.7rem;
  }

  .annual-calendar .mini-month {
    min-width: 0;
  }

  /* Daily/weekly views stack */
  .weekly-view .day-column,
  .daily-view .detail-panel {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   MASTER SCHEDULE — Staff grid adjustments
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .staff-grid-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .staff-grid {
    min-width: 600px;
  }

  /* Calendar view — smaller cells */
  .master-schedule-calendar .calendar-day {
    min-height: 60px;
    font-size: 0.75rem;
  }
}

/* Phone — Master Schedule filter panel */
@media (max-width: 576px) {
  /* Stack the filter form vertically */
  #ms-filters-card .card-body form {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #ms-filters-card .card-body form > div {
    width: 100%;
  }

  #ms-filters-card .d-flex.gap-2.align-items-end {
    flex-direction: row;
    width: 100%;
  }

  #ms-filters-card .ms-month-filter,
  #ms-filters-card .ms-year-filter {
    flex: 1;
    width: auto;
  }

  /* Form selects — smaller font on phone, including options */
  #ms-filters-card select.form-select,
  #ms-filters-card .form-select {
    font-size: 0.8rem;
    padding: 6px 24px 6px 8px;
    height: auto;
  }

  #ms-filters-card select.form-select option {
    font-size: 0.8rem;
  }

  #ms-filters-card .form-label {
    font-size: 0.75rem;
    margin-bottom: 2px;
  }

  /* Province multiselect button */
  #ms-filters-card .province-multiselect-button {
    font-size: 0.8rem;
    padding: 6px 8px;
  }

  /* Staff grid — allow narrower minimum on phone */
  .staff-grid {
    min-width: 100%;
  }

  .staff-grid-container {
    max-width: 100vw;
  }

  /* Container-level overflow control */
  .master-schedule-container {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .master-schedule-container .staff-grid-container {
    overflow-x: auto;
    max-width: calc(100vw - 16px);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   STAFF ASSIGNMENTS — Stack buckets
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .staff-assignment-buckets {
    flex-direction: column;
  }

  .staff-bucket {
    width: 100%;
    margin-bottom: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   ORDERS LAYOUT — Stack on mobile
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .orders-layout,
  .montage-layout {
    flex-direction: column;
  }

  .orders-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 12px;
  }

  .orders-main {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PRODUCTION — Accordion adjustments
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .production-accordion .accordion-button {
    font-size: 0.9rem;
    padding: 10px 12px;
  }

  .production-accordion .accordion-body {
    padding: 10px 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   CUSTOMER SERVICE — Order columns stack
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .cs-orders-board {
    flex-direction: column;
  }

  .cs-orders-column {
    width: 100%;
    margin-bottom: 16px;
  }

  .cs-search-form {
    flex-direction: column;
    gap: 8px;
  }

  .cs-search-form .form-control,
  .cs-search-form .form-select {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   ACCOUNTING — Stack sections
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .accounting-section {
    flex-direction: column;
  }

  .accounting-card {
    width: 100%;
    margin-bottom: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   ADMIN DASHBOARD — Stack cards
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-stat-card {
    width: 100%;
    margin-bottom: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   LOGIN PAGE
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 576px) {
  .login-container {
    padding: 12px;
    min-height: 60vh;
  }

  .login-form {
    width: 100%;
    padding: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PRINT — Hide nav and footer
   ───────────────────────────────────────────────────────────────────── */

@media print {
  .pms-nav,
  .pms-footer,
  .pms-nav-toggle,
  .pms-title-bar {
    display: none !important;
  }

  .app-content {
    padding: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   NAVBAR — Right side in sidebar (override)
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  /* Logout form full-width in sidebar */
  #pms-nav-sidebar .pms-nav-logout-form,
  #pms-nav-sidebar .pms-nav-right form,
  #pms-nav-sidebar .pms-nav-right .button_to,
  #pms-nav-sidebar .pms-nav-right form .pms-button {
    display: block;
    width: 100%;
  }

  #pms-nav-sidebar .pms-nav-logout-form .pms-button {
    width: 100% !important;
    text-align: left !important;
    min-height: 40px;
    border-radius: 4px !important;
  }

  /* Webmail unread badge in menu */
  #pms-nav-sidebar .pms-nav-left .pms-webmail-nav-btn,
  #pms-nav-sidebar .pms-nav-right .pms-webmail-nav-btn {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }

  /* Emulation badge consistent */
  #pms-nav-sidebar .pms-nav-right .pms-emulating {
    width: 100%;
    font-size: 0.85rem;
  }
}