/* 
 * Mobile Optimizations for Shifts
 * 
 * This file contains responsive design improvements for mobile devices
 * Overrides AdminKit Pro default styles for better readability and touch interaction
 */

@media (max-width: 575.98px) {

  /*
   * Typography improvements for mobile (phones only)
   */
  body {
    font-size: 16px !important;
  }

  /* Headings */
  h1,
  .h1 {
    font-size: 1.85rem !important;
  }

  h2,
  .h2 {
    font-size: 1.6rem !important;
  }

  h3,
  .h3 {
    font-size: 1.4rem !important;
  }

  h4,
  .h4 {
    font-size: 1.25rem !important;
  }

  h5,
  .h5 {
    font-size: 1.15rem !important;
  }

  h6,
  .h6 {
    font-size: 1.05rem !important;
  }

  .content {
    padding: .75rem .75rem .75rem .75rem !important;
  }

  /* Card elements */
  .card-title {
    font-size: 1.2rem !important;
  }

  .card-header {
    padding: 0.85rem 1rem !important;
  }

  .card-body {
    padding: 1.25rem !important;
  }

  /* List group elements */
  .list-group-item {
    padding: 0.85rem 1rem !important;
  }

  /* Regular text elements */
  .text-muted {
    font-size: 0.925rem !important;
  }

  p,
  div,
  span:not(.badge),
  li,
  label,
  td,
  th {
    font-size: 1rem !important;
  }

  .fw-medium {
    font-size: 1.05rem !important;
  }

  .small,
  small {
    font-size: 0.875rem !important;
  }

  /* Badges and chips */
  .badge {
    font-size: 0.825rem !important;
    padding: 0.35em 0.65em !important;
  }

  /* Buttons and form elements */
  .btn {
    font-size: 0.95rem !important;
    padding: 0.375rem 0.85rem !important;
  }

  .btn-sm {
    font-size: 0.875rem !important;
    padding: 0.25rem 0.7rem !important;
  }

  .btn-lg {
    font-size: 1.05rem !important;
    padding: 0.5rem 1rem !important;
  }

  /* Form controls */
  .form-control,
  .form-select {
    font-size: 1rem !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 42px !important;
  }

  .form-label {
    font-size: 0.95rem !important;
    margin-bottom: 0.3rem !important;
  }

  /* Checkboxes and radio buttons */
  .form-check-input {
    width: 1.2em !important;
    height: 1.2em !important;
    margin-top: 0.15em !important;
  }

  /*
   * Spacing improvements for mobile
   */
  /*
  .container, .container-fluid {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }*/

  /* Reduce margin/padding in tight spaces */
  .card {
    margin-bottom: 1rem !important;
  }

  /* Table improvements */
  .table {
    font-size: 0.95rem !important;
  }

  .table td,
  .table th {
    padding: 0.75rem 0.5rem !important;
  }

  /* Modal improvements */
  .modal-body {
    padding: 1.25rem !important;
  }

  .modal-header,
  .modal-footer {
    padding: 1rem 1.25rem !important;
  }

  /*
   * Touch target improvements
   */

  /* Make dropdown items more tappable */
  .dropdown-item {
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
  }

  /* Increase icon sizes for better visibility */
  .feather,
  [data-feather] {
    width: 24px !important;
    height: 24px !important;
  }

  /* Improve form controls accessibility */
  .form-control,
  .form-select,
  .form-check,
  .btn {
    margin-bottom: 0.75rem !important;
  }

  /* Navigation improvements */
  .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
  }

  /* Search box improvements */
  input[type="search"] {
    font-size: 1rem !important;
    height: 42px !important;
  }

  /* Hamburger icon fix for mobile */
  .hamburger,
  .hamburger:before,
  .hamburger:after {
    height: 3px !important;
    width: 24px !important;
    background: #495057 !important;
    display: block !important;
  }

  .hamburger {
    position: relative !important;
  }

  .hamburger:before {
    position: absolute !important;
    top: -7.5px !important;
    content: "" !important;
  }

  .hamburger:after {
    position: absolute !important;
    bottom: -7.5px !important;
    width: 16px !important;
    content: "" !important;
  }

  /* Increase the touch target size for the sidebar toggle */
  .sidebar-toggle.js-sidebar-toggle {
    padding: 12px !important;
    margin: -12px !important;
  }

  /* Add a larger hit area for the mobile hamburger */
  .mobile-friendly-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 
   * Dashboard-specific mobile optimizations 
   */

  /* Improve table responsiveness on dashboard */
  .table-responsive {
    border: none !important;
    margin-bottom: 0 !important;
  }

  /* Stack greeting, attendance, and upcoming shift cards */
  .dashboard-greeting-row .col-md-4 {
    margin-bottom: 1rem !important;
  }

  /* Make today's schedule cards full width on mobile */
  .today-shifts-card .col-md-6,
  .today-shifts-card .col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Optimize shift details layout */
  .shift-details-card {
    padding: 0.75rem !important;
  }

  /* Make the calendar date more compact */
  .calendar-date {
    width: 50px !important;
    height: 60px !important;
  }

  .calendar-day {
    line-height: 38px !important;
  }

  /* Optimize stats layout */
  .stats-card .stat-item {
    margin-bottom: 1rem !important;
  }

  /* Reduce padding in stat circles */
  .stat-circle {
    width: 40px !important;
    height: 40px !important;
  }

  /* Hide less important columns in tables on very small screens */
  @media (max-width: 575.98px) {
    .dashboard-table .hide-xs {
      display: none !important;
    }

    /* Add horizontal scrolling for tables on very small screens */
    .table-responsive {
      overflow-x: auto !important;
    }
  }

  /* Show vertical action buttons instead of dropdowns on mobile */
  .dashboard-mobile-actions {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(0, 0, 0, .1) !important;
    margin-top: 0.5rem !important;
  }

  .dashboard-mobile-actions a {
    margin-bottom: 0.5rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Make quicklinks more touch-friendly */
  .quicklinks-card .btn {
    margin: 0.3rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Simplify card headers with actions */
  .card-header-with-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .card-header-with-actions .btn-group,
  .card-header-with-actions .header-actions {
    margin-top: 0.75rem !important;
    align-self: flex-start !important;
  }

  /* Update greetings card for better mobile display */
  .greeting-card .avatar {
    width: 64px !important;
    height: 64px !important;
  }

  /*
   * Sidebar mobile optimizations - hide specific sections
   */

  /* Class for hiding elements on mobile */
  .hide-on-mobile {
    display: none !important;
  }

  /* Slide-in mobile sidebar overlay */
  .mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 80vw;
    max-width: 320px;
    background: #fff;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    padding-top: 56px;
    /* adjust for navbar height */
  }

  body.mobile-sidebar-open .mobile-sidebar {
    transform: translateX(0);
    pointer-events: auto;
  }

  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.32);
    z-index: 1049;
    transition: opacity 0.3s cubic-bezier(.4, 0, .2, 1);
    opacity: 0;
    pointer-events: none;
  }

  body.mobile-sidebar-open .mobile-sidebar-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /* Make sure all links in the mobile sidebar are clickable */
  .mobile-sidebar a {
    display: block;
    position: relative;
    z-index: 1051;
    cursor: pointer;
    pointer-events: auto;
  }

  /* Prevent background scroll when sidebar is open */
  body.mobile-sidebar-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Mobile-friendly notification dropdown */
  .navbar .dropdown-menu[aria-labelledby="alertsDropdown"] {
    width: 95vw !important;
    max-width: 95vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 56px !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    position: fixed !important;
    z-index: 2000 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  .navbar .dropdown-menu[aria-labelledby="alertsDropdown"] .dropdown-menu-header,
  .navbar .dropdown-menu[aria-labelledby="alertsDropdown"] .dropdown-menu-footer {
    padding: 1rem 1.25rem !important;
    font-size: 1.1rem !important;
  }

  .navbar .dropdown-menu[aria-labelledby="alertsDropdown"] .list-group-item {
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
    border: none !important;
    border-bottom: 1px solid #f1f1f1 !important;
  }

  .navbar .dropdown-menu[aria-labelledby="alertsDropdown"] .list-group-item:last-child {
    border-bottom: none !important;
  }

  .navbar .dropdown-menu[aria-labelledby="alertsDropdown"] .text-muted.small {
    font-size: 0.95rem !important;
  }

  @media (max-width: 575.98px) {
    .navbar .dropdown-menu[aria-labelledby="alertsDropdown"] {
      top: 48px !important;
    }
  }

  .nav-item .indicator {
    top: 0px !important;
    right: -12px !important;
    width: 24px !important;
    height: 20px !important;
    font-size: 0.6rem !important;
  }
}