/* Responsive Design Enhancements */

/* General responsive adjustments */
@media (max-width: 1199.98px) {
  .container {
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  
  h1, .h1 {
    font-size: 1.75rem;
  }
  
  h2, .h2 {
    font-size: 1.5rem;
  }
  
  /* Navbar extra optimization for laptops */
  .navbar-brand {
    max-width: 85px;
    overflow: hidden;
    white-space: nowrap;
  }
  
  /* Ensure navbar doesn't overflow */
  .container-fluid {
    max-width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Special breakpoint for slightly smaller screens */
@media (max-width: 1099.98px) {
  /* Only show icons in navbar */
  .navbar-nav .nav-link span {
    display: none;
  }
  
  .navbar-nav .nav-link {
    padding: 0.4rem;
  }
  
  /* Make icons more prominent */
  .navbar-nav .nav-link .fas {
    font-size: 1rem;
  }
}

/* Tablet adjustments */
@media (max-width: 991.98px) {
  .navbar-brand {
    font-size: 1.25rem;
    max-width: 100px;
  }
  
  .dashboard-card-icon {
    font-size: 2rem;
  }
  
  /* For collapsed navbar, show full text again */
  .navbar-collapse .navbar-nav .nav-link span {
    display: inline-block;
  }
  
  /* Simplify tables for tablets */
  .table-responsive {
    margin-bottom: 1rem;
  }
  
  /* Adjust form layouts */
  .form-group {
    margin-bottom: 1rem;
  }
  
  /* Adjust card spacing */
  .card {
    margin-bottom: 1.25rem;
  }
  
  /* Hide some elements on tablets */
  .d-tablet-none {
    display: none !important;
  }
  
  /* Improve spacing for modals */
  .modal-dialog {
    margin: 1rem;
  }
  
  /* Make buttons more touchable */
  .btn {
    padding: 0.5rem 1rem;
  }
}

/* Mobile phone adjustments */
@media (max-width: 767.98px) {
  body {
    font-size: 0.9rem;
  }
  
  /* Header adjustments */
  h1, .h1 {
    font-size: 1.5rem;
  }
  
  h2, .h2 {
    font-size: 1.25rem;
  }
  
  h3, .h3 {
    font-size: 1.125rem;
  }
  
  /* Table adjustments for mobile */
  .table-responsive-mobile {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Convert tables to cards on mobile for better UX */
  .table-to-cards {
    border: 0;
  }
  
  .table-to-cards thead {
    display: none;
  }
  
  .table-to-cards tbody tr {
    display: block;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px var(--shadow-color);
    background-color: var(--bg-primary);
  }
  
  .table-to-cards tbody td {
    display: flex;
    justify-content: space-between;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
  }
  
  .table-to-cards tbody td:last-child {
    border-bottom: 0;
  }
  
  .table-to-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    float: left;
    text-align: left;
  }
  
  /* Improve form layouts on mobile */
  .form-floating {
    margin-bottom: 1rem;
  }
  
  /* Adjust button groups */
  .btn-group {
    display: flex;
    width: 100%;
  }
  
  .btn-group > .btn {
    flex: 1;
  }
  
  /* Make buttons more touchable on mobile */
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
  }
  
  /* Simplify card layouts */
  .card-header {
    padding: 0.75rem 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  /* Hide elements on mobile */
  .d-mobile-none {
    display: none !important;
  }
  
  /* Show mobile-only elements */
  .d-mobile-block {
    display: block !important;
  }
  
  /* Drawer menu for mobile */
  .offcanvas {
    width: 80%;
    max-width: 300px;
  }
  
  /* Full-width modals on mobile */
  .modal-fullwidth-mobile .modal-dialog {
    margin: 0;
    max-width: none;
    height: 100vh;
  }
  
  .modal-fullwidth-mobile .modal-content {
    border-radius: 0;
    height: 100%;
  }
  
  /* Better form layout on mobile */
  .row > [class*="col-"] {
    margin-bottom: 1rem;
  }
  
  /* Improve calendar for mobile */
  .fc-header-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    margin-bottom: 1.5rem;
  }
  
  .fc-header-toolbar .fc-toolbar-chunk {
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
  }
  
  .fc-toolbar-chunk .btn-group {
    width: auto;
  }
  
  /* Improve dropdowns on mobile */
  .dropdown-menu {
    width: 100%;
    min-width: auto;
    position: fixed;
    max-height: 75vh;
    overflow-y: auto;
  }
}

/* Small phones and portrait orientation */
@media (max-width: 575.98px) {
  /* Further spacing reduction */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Improve button spacing on very small screens */
  .btn-group-sm {
    flex-direction: column;
  }
  
  .btn-group-sm .btn {
    margin-bottom: 0.5rem;
    border-radius: 0.5rem !important;
  }
  
  /* Simplify navigation further */
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  /* Adjust form inputs for small screens */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  /* Simplify card design */
  .border-left-primary, 
  .border-left-success, 
  .border-left-info, 
  .border-left-warning {
    border-left-width: 0.15rem;
  }
  
  /* Stack dashboard cards for better visibility */
  .dashboard-card .row {
    flex-direction: column;
  }
  
  .dashboard-card-icon {
    margin-top: 0.5rem;
    text-align: center;
  }
  
  /* Improve list groups */
  .list-group-item {
    padding: 0.75rem 1rem;
  }
}

/* Landscape orientation specific */
@media (max-height: 575.98px) and (orientation: landscape) {
  /* Adjust modal height for landscape mode on phones */
  .modal-dialog {
    max-height: 100vh;
    margin: 0 auto;
  }
  
  .modal-body {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  
  /* Adjust navbar for landscape */
  .navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]) {
    color-scheme: dark;
  }
}

/* RTL specific responsive adjustments */
html[dir="rtl"] {
  /* Adjust border positioning for RTL */
  .border-left-primary, 
  .border-left-success, 
  .border-left-info, 
  .border-left-warning {
    border-left-width: 0;
    border-right-width: 0.25rem;
    border-right-style: solid;
  }
  
  /* Fix dropdown alignment */
  .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
  }
  
  /* Reverse buttons in button groups */
  @media (max-width: 767.98px) {
    .btn-group {
      flex-direction: row-reverse;
    }
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .container {
    width: 100%;
    max-width: none;
  }
  
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd;
  }
  
  a {
    text-decoration: none !important;
  }
  
  /* Ensure tables are fully visible */
  .table {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .table td, .table th {
    background-color: #fff !important;
    box-shadow: none !important;
  }
  
  /* Remove hover effects */
  .card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Show collapsed content */
  .collapse {
    display: block !important;
    height: auto !important;
  }
  
  /* Ensure page breaks don't cut content awkwardly */
  h1, h2, h3, 
  .card-header, 
  tr, 
  .page-break-before {
    page-break-before: auto;
  }
  
  tr, 
  .card,
  .page-break-after {
    page-break-after: auto;
  }
  
  .card, 
  .no-page-break {
    page-break-inside: avoid;
  }
}