/*
 * Crew-Call — Mobile-Responsive Overrides
 *
 * Global responsive CSS loaded via base.html.
 * Works with Bootstrap 5.3.2 CDN already in place.
 * No build tools — served directly by WhiteNoise.
 *
 * Breakpoints (Bootstrap defaults):
 *   sm:  576px
 *   md:  768px
 *   lg:  992px
 *   xl: 1200px
 */

/* ============================================================
   TOUCH TARGETS — minimum 44x44px for all interactive elements
   ============================================================ */

@media (max-width: 767.98px) {
  .btn-sm {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  .btn-icon-only {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .form-select-sm,
  .form-control-sm {
    min-height: 44px;
    font-size: 0.9375rem;
  }

  /* Larger pagination links for touch */
  .pagination .page-link {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Larger dropdown items for touch */
  .dropdown-item {
    padding: 0.625rem 1rem;
  }
}


/* ============================================================
   MOBILE CARD VIEW / DESKTOP TABLE VIEW toggle
   Uses visibility approach to not conflict with Bootstrap's
   card flex display or other component display values.
   ============================================================ */

.mobile-card-view {
  display: none !important;
}

.desktop-table-view {
  /* Don't override display - let Bootstrap handle it */
}

@media (max-width: 767.98px) {
  .mobile-card-view {
    display: block !important;
  }

  .desktop-table-view {
    display: none !important;
  }
}


/* ============================================================
   GLOBAL SPACING — reduce padding/margins on mobile
   ============================================================ */

@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Tighter card spacing */
  .card-body {
    padding: 0.875rem;
  }

  /* Summary stat cards — compact */
  .card .card-body.text-center h4 {
    font-size: 1.25rem;
  }

  /* Page headers */
  h2, .h2 {
    font-size: 1.5rem;
  }

  h3, .h3 {
    font-size: 1.25rem;
  }

  /* Filter forms — single column */
  .filter-form .row > [class*="col-md"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .card-body {
    padding: 0.75rem;
  }
}


/* ============================================================
   NAVBAR — ensure hamburger menu is usable
   ============================================================ */

@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    border: none;
    box-shadow: none;
    padding-left: 1rem;
  }

  .navbar-nav .nav-link {
    padding: 0.625rem 0;
  }
}


/* ============================================================
   TABLES — responsive enhancements
   ============================================================ */

@media (max-width: 767.98px) {
  /* Hide less-important columns on phone */
  .table .d-mobile-none {
    display: none !important;
  }

  /* Compact table cells */
  .table > :not(caption) > * > * {
    padding: 0.5rem 0.375rem;
  }

  .table .badge {
    font-size: 0.7rem;
  }
}


/* ============================================================
   FORMS — full-width on mobile
   ============================================================ */

@media (max-width: 767.98px) {
  .form-inline-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .form-inline-actions .btn {
    width: 100%;
  }
}


/* ============================================================
   STAFFING BOARD — sidebar to offcanvas on mobile
   ============================================================ */

/* Floating action button to show workers panel */
.staffing-fab {
  position: fixed !important;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  /* Ensure it stays fixed regardless of parent transforms */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

@media (max-width: 991.98px) {
  /* Offcanvas worker panel — remove card chrome inside offcanvas */
  #workersOffcanvas .card {
    border: none !important;
    box-shadow: none !important;
  }
  #workersOffcanvas #available-workers-list {
    max-height: none;
  }

  /* Position cards — simplified layout */
  .staffing-board .worker-card {
    padding: 0.5rem 0.75rem;
  }

  .staffing-board .worker-photo {
    width: 32px;
    height: 32px;
  }

  /* Position-first assignment mode */
  .staffing-board .position-card.selected {
    box-shadow: 0 0 0 3px var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }

  .staffing-board .position-card.selected .card-header {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  }

  /* Worker card in assignment mode - shows as tappable */
  .staffing-board .worker-card:not(.worker-assigned) {
    cursor: pointer;
  }

  .staffing-board .worker-card:not(.worker-assigned):active {
    transform: scale(0.98);
    opacity: 0.8;
  }

  /* Assigning state animation */
  .staffing-board .worker-card.assigning {
    pointer-events: none;
    animation: pulse 0.5s ease-in-out;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.3; }
  }


  /* Stats bar compact */
  .staffing-stats .col-md-2 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

@media (max-width: 575.98px) {
  .staffing-board .position-card .card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  .staffing-fab {
    bottom: 1rem;
    left: 1rem;
  }
}


/* ============================================================
   CALENDAR — responsive container
   ============================================================ */

@media (max-width: 767.98px) {
  #calendar {
    font-size: 0.8125rem;
  }

  /* Compact calendar toolbar */
  .fc .fc-toolbar {
    flex-direction: column;
    gap: 0.5rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1.125rem;
  }

  .fc .fc-button {
    min-height: 44px;
    padding: 0.375rem 0.5rem;
  }
}


/* ============================================================
   WORKER-FACING — large action buttons on mobile
   ============================================================ */

@media (max-width: 767.98px) {
  /* Accept/decline offer buttons */
  .offer-actions .btn {
    min-height: 48px;
    font-size: 1rem;
  }

  /* Check-in/out buttons */
  .checkin-btn {
    min-height: 56px;
    font-size: 1.125rem;
    font-weight: 600;
  }

  /* My assignments cards */
  .assignment-card .btn {
    min-height: 44px;
  }
}


/* ============================================================
   MOBILE CARD STYLES — for list view replacements
   ============================================================ */

.mobile-list-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.875rem;
  margin-bottom: 0.5rem;
  background: var(--bs-body-bg);
  transition: background-color 0.15s ease;
}

a .mobile-list-card:active {
  background-color: var(--bs-gray-100);
}

.mobile-list-card .card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.mobile-list-card .card-subtitle {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

.mobile-list-card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}


/* ============================================================
   PRINT — hide non-essential elements
   ============================================================ */

@media print {
  .navbar,
  .staffing-fab,
  .pagination,
  .filter-form,
  .btn:not(.btn-print) {
    display: none !important;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }
}