/* Mobile-First Responsive Design */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  line-height: 1.6;
}

/* Mobile Typography */
@media (max-width: 767.98px) {
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.5rem; }
  h3, .h3 { font-size: 1.25rem; }
  h4, .h4 { font-size: 1.1rem; }
  h5, .h5 { font-size: 1rem; }
  h6, .h6 { font-size: 0.9rem; }
  
  .lead { font-size: 1rem; }
  .display-4 { font-size: 2rem; }
  .display-5 { font-size: 1.75rem; }
  .display-6 { font-size: 1.5rem; }
}

/* Tablet Typography */
@media (min-width: 768px) and (max-width: 991.98px) {
  html { font-size: 15px; }
  h1, .h1 { font-size: 2.25rem; }
  h2, .h2 { font-size: 1.875rem; }
  h3, .h3 { font-size: 1.5rem; }
}

/* Desktop Typography */
@media (min-width: 992px) {
  html { font-size: 16px; }
}

/* Mobile Spacing */
@media (max-width: 767.98px) {
  .container { padding-left: 15px; padding-right: 15px; }
  .card-body { padding: 1rem; }
  .card-header { padding: 0.75rem 1rem; }
  .btn { padding: 0.5rem 1rem; font-size: 0.9rem; }
  .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
  .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; }
  
  /* Reduce margins on mobile */
  .mb-5 { margin-bottom: 2rem !important; }
  .mb-4 { margin-bottom: 1.5rem !important; }
  .mb-3 { margin-bottom: 1rem !important; }
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* Mobile Table Improvements */
@media (max-width: 767.98px) {
  .table-responsive {
    border: none;
    border-radius: 0;
  }
  
  .table th,
  .table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.85rem;
    vertical-align: middle;
  }
  
  .table th {
    font-size: 0.8rem;
    font-weight: 600;
  }
  
  /* Stack table cells on very small screens */
  @media (max-width: 575.98px) {
    .table-responsive .table {
      display: block;
    }
    
    .table-responsive .table thead {
      display: none;
    }
    
    .table-responsive .table tbody,
    .table-responsive .table tr,
    .table-responsive .table td {
      display: block;
      width: 100%;
    }
    
    .table-responsive .table tr {
      margin-bottom: 1rem;
      border: 1px solid #dee2e6;
      border-radius: 0.375rem;
      padding: 0.75rem;
      background: #fff;
    }
    
    .table-responsive .table td {
      border: none;
      padding: 0.25rem 0;
      text-align: left;
    }
    
    .table-responsive .table td:before {
      content: attr(data-label) ": ";
      font-weight: 600;
      color: #6c757d;
      margin-right: 0.5rem;
    }
  }
}

/* Mobile Form Improvements */
@media (max-width: 767.98px) {
  .form-control,
  .form-select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.75rem 0.75rem;
  }
  
  .form-floating > .form-control,
  .form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
  }
  
  .form-floating > label {
    padding: 1rem 0.75rem;
  }
  
  .form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  
  /* Stack form groups on mobile */
  .row .col-md-6,
  .row .col-md-8,
  .row .col-md-4 {
    margin-bottom: 1rem;
  }
}

/* Mobile Card Improvements */
@media (max-width: 767.98px) {
  .card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }
  
  .card-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
  }
  
  .card-body {
    padding: 1rem;
  }
}

/* Mobile Button Improvements */
@media (max-width: 767.98px) {
  .btn-group-vertical .btn {
    margin-bottom: 0.25rem;
  }
  
  .d-grid {
    gap: 0.5rem;
  }
  
  /* Full-width buttons on mobile */
  .btn-mobile-full {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Logo and Brand Styling */
.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 0; /* Allow flex item to shrink */
}

.logo-img {
  border-radius: 4px;
  object-fit: contain;
  object-position: center;
  transition: transform 0.2s ease;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  display: block;
  /* Ensure logo maintains aspect ratio */
  aspect-ratio: auto;
  /* Prevent logo from being too wide */
  max-width: 200px;
}

.navbar-brand:hover .logo-img {
  transform: scale(1.05);
}

.brand-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Allow text to shrink */
}

/* Mobile Navigation Improvements */
@media (max-width: 767.98px) {
  .navbar-brand {
    font-size: 1.1rem;
    max-width: 70%;
    flex-wrap: nowrap;
  }
  
  .logo-img {
    height: 28px !important;
    width: auto;
    margin-right: 0.5rem;
  }
  
  .brand-text {
    font-size: 0.8rem;
    line-height: 1.2;
  }
}

/* Small Mobile Devices */
@media (max-width: 575.98px) {
  .navbar-brand {
    max-width: 60%;
  }
  
  .logo-img {
    height: 24px !important;
    margin-right: 0.25rem;
  }
  
  .brand-text {
    font-size: 0.75rem;
  }
  
  /* Hide text on very small screens, show only logo */
  @media (max-width: 400px) {
    .brand-text {
      display: none;
    }
    
    .logo-img {
      margin-right: 0;
    }
  }
}

/* Tablet Portrait */
@media (min-width: 768px) and (max-width: 991.98px) {
  .logo-img {
    height: 36px;
    width: auto;
  }
  
  .brand-text {
    font-size: 1rem;
  }
}

/* Desktop and Large Screens */
@media (min-width: 992px) {
  .logo-img {
    height: 40px;
    width: auto;
  }
  
  .brand-text {
    font-size: 1.1rem;
  }
}

/* Extra Large Screens */
@media (min-width: 1200px) {
  .logo-img {
    height: 44px;
    width: auto;
  }
  
  .brand-text {
    font-size: 1.2rem;
  }
}

/* Navbar Collapse Behavior */
@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: 0.5rem;
  }
  
  .navbar-brand {
    margin-bottom: 0;
  }
}

/* High DPI/Retina Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f8f9fa;
  }
  
  .dropdown-menu {
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  
  .dropdown-item {
    padding: 0.75rem 1.5rem;
  }
}

/* Mobile Badge Improvements */
@media (max-width: 767.98px) {
  .badge {
    font-size: 0.75em;
    padding: 0.35em 0.65em;
  }
  
  .badge + .badge {
    margin-left: 0.25rem;
  }
}

/* Mobile Alert Improvements */
@media (max-width: 767.98px) {
  .alert {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .alert-dismissible .btn-close {
    padding: 0.75rem;
  }
}

/* Mobile Modal Improvements */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .modal-footer {
    padding: 0.75rem 1rem;
    flex-direction: column;
  }
  
  .modal-footer .btn {
    width: 100%;
    margin: 0.25rem 0;
  }
}

/* Mobile Footer Improvements */
@media (max-width: 767.98px) {
  .footer {
    position: relative;
    margin-top: 2rem;
    padding: 1rem 0;
    text-align: center;
  }
  
  body {
    margin-bottom: 0;
  }
}

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

/* Focus and Accessibility */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav-link,
  .dropdown-item {
    min-height: 44px;
    min-width: 44px;
  }
  
  .form-control,
  .form-select {
    min-height: 44px;
  }
}