/* RefReflect Responsive Design System */

/* Mobile First Breakpoints */
/* xs: 0-575px (default) */
/* sm: 576px+ */
/* md: 768px+ */
/* lg: 992px+ */
/* xl: 1200px+ */
/* xxl: 1400px+ */

/* Global Responsive Utilities */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Responsive Typography */
@media (max-width: 767px) {
  /* Global typography adjustments for mobile */
  body {
    font-size: 0.875rem !important;
  }
  
  h1, .h1 {
    font-size: 1.75rem !important;
  }
  
  h2, .h2 {
    font-size: 1.5rem !important;
  }
  
  h3, .h3 {
    font-size: 1.25rem !important;
  }
  
  h4, .h4 {
    font-size: 1.1rem !important;
  }
  
  h5, .h5 {
    font-size: 1rem !important;
  }
  
  h6, .h6 {
    font-size: 0.875rem !important;
  }
  
  .lead {
    font-size: 1rem !important;
  }
  
  /* Specific landing page adjustments */
  .landing-page h1 {
    font-size: 2.2rem !important;
  }
  
  .landing-page h2 {
    font-size: 1.8rem !important;
  }
  
  .landing-page h3 {
    font-size: 1.3rem !important;
  }
  
  .landing-page p {
    font-size: 1rem !important;
  }
  
  .landing-page .lead {
    font-size: 1.1rem !important;
  }
  
  .landing-page .card-title {
    font-size: 1.2rem !important;
  }
  
  .landing-page .text-muted {
    font-size: 0.95rem !important;
  }
  
  /* Dashboard titles */
  .page-header h1 {
    font-size: 1.5rem !important;
  }
  
  /* Card titles throughout app */
  .card-title {
    font-size: 1.1rem !important;
  }
  
  /* Form labels */
  .form-label {
    font-size: 0.875rem !important;
  }
  
  /* Badge text */
  .badge {
    font-size: 0.75rem !important;
  }
  
  /* Reduce button padding on mobile */
  .btn {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
  }
  
  .btn-lg {
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
}

/* Table Responsiveness Fixes */
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0.01%;
}

@media (max-width: 767px) {
  /* Stack table actions vertically on mobile */
  .table td .d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .table td .btn {
    width: 100%;
    margin-bottom: 0.25rem;
  }
  
  /* Make table cells more compact on mobile */
  .table td, .table th {
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Hide less important columns on mobile */
  .hide-mobile {
    display: none !important;
  }
}

/* Demo Buttons Mobile Fix */
@media (max-width: 575px) {
  .demo-buttons-container {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .demo-buttons-container .btn {
    width: 100% !important;
    margin-bottom: 0.75rem !important;
  }
  
  .demo-buttons-container .btn:last-child {
    margin-bottom: 0 !important;
  }
}

/* Card Responsive Improvements */
@media (max-width: 767px) {
  .card {
    margin-bottom: 1rem;
  }
  
  .card-body {
    padding: 1rem !important;
  }
  
  .card-actions {
    margin-top: 1rem;
  }
  
  /* Stack card actions on mobile */
  .card-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .card-header .card-title {
    margin-bottom: 1rem !important;
  }
}

/* Form Responsive Improvements */
@media (max-width: 767px) {
  /* Stack form controls vertically on mobile */
  .d-flex.flex-wrap.gap-2 {
    flex-direction: column !important;
  }
  
  .form-select[style*="width:auto"] {
    width: 100% !important;
  }
  
  /* Full width buttons in forms on mobile */
  form .btn {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* Navigation Mobile Improvements */
@media (max-width: 767px) {
  /* Reduce logo size on mobile */
  .navbar-brand-image {
    height: 2.5rem !important;
    max-height: 60px !important;
  }
  
  /* Mobile menu styling */
  .navbar-collapse {
    margin-top: 1rem;
  }
  
  .navbar-nav {
    padding: 1rem 0;
  }
  
  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }
  
  /* Full width nav buttons on mobile */
  .navbar-nav .btn {
    width: 100%;
    text-align: left;
  }
  
  /* Mobile dropdown improvements */
  .navbar-nav .dropdown-menu {
    position: static !important;
    width: 100%;
    margin-top: 0.5rem;
    transform: none !important;
  }
  
  /* Better spacing for profile dropdown */
  .navbar-nav .dropdown-toggle {
    width: 100%;
    text-align: left;
    background-color: #f1f5f9;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
  }
}

/* Ensure proper navbar toggle on tablets */
@media (max-width: 991px) {
  .navbar-expand-md .navbar-toggler {
    display: block;
  }
  
  .navbar-expand-md .navbar-collapse {
    flex-basis: 100%;
  }
}

/* Modal Responsive Fixes */
@media (max-width: 575px) {
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-content {
    border-radius: 0.5rem;
  }
}

/* Dropdown Mobile Improvements */
@media (max-width: 767px) {
  .dropdown-menu {
    width: 100%;
    position: relative !important;
    transform: none !important;
    margin-top: 0.5rem;
  }
  
  .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
  }
}

/* Grid System Mobile Improvements */
@media (max-width: 767px) {
  /* Ensure proper spacing on mobile */
  .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  
  .col, [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* Stack columns on mobile by default */
  .col-md-4, .col-lg-4, .col-md-6, .col-lg-6 {
    width: 100%;
  }
}

/* Utility Classes for Mobile */
@media (max-width: 575px) {
  .text-xs-center { text-align: center !important; }
  .text-xs-left { text-align: left !important; }
  .text-xs-right { text-align: right !important; }
  
  .d-xs-none { display: none !important; }
  .d-xs-block { display: block !important; }
  .d-xs-flex { display: flex !important; }
  
  .w-xs-100 { width: 100% !important; }
  .w-xs-auto { width: auto !important; }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch Target Improvements */
@media (pointer: coarse) {
  .btn,
  .nav-link,
  .dropdown-item,
  input[type="submit"],
  input[type="button"],
  button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
}

.page-wrapper {
  overflow-x: hidden;
}

/* Demo ribbon mobile fix */
@media (max-width: 767px) {
  .demo-ribbon .alert {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
  }
  
  .demo-ribbon .d-flex {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}