/* ===== IBMS BRAND RESPONSIVE STYLES ===== */
/* Enhanced responsive design for desktop, tablet, and mobile */

/* ===== MOBILE FIRST: BASE STYLES (0-767px) ===== */
/* These apply to all screen sizes and are overridden for larger screens */

/* Base Container */
.container-fluid,
.container {
  padding-left: 15px;
  padding-right: 15px;
}

/* Touch-friendly Navigation */
.navbar-toggler {
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  border-width: 2px;
}

/* Mobile Menu Styles */
@media (max-width: 767px) {
  /* Header adjustments */
  .navbar-brand {
    font-size: 1.2rem !important;
  }
  
  .navbar-brand small {
    display: none;
  }
  
  /* Mobile navigation */
  .navbar-collapse {
    background: var(--brand-header-bg, #ffffff);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .navbar-nav {
    gap: 0.5rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
    border-radius: 8px;
    font-size: 1rem;
  }
  
  /* Dropdown menus */
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    border: none;
    box-shadow: none;
    background: rgba(94, 93, 246, 0.05);
    margin-top: 0.5rem;
  }
  
  /* Content sections */
  .content-section,
  .main-content {
    padding: 1rem 0;
  }
  
  /* Cards */
  .card {
    margin-bottom: 1rem;
    border-radius: 8px;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-header {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  
  /* Tables - Horizontal scroll */
  .table-responsive {
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table {
    font-size: 0.875rem;
    min-width: 600px;
  }
  
  .table th,
  .table td {
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
  }
  
  /* Alternative: Card view for tables */
  .table-card-view {
    display: block;
  }
  
  .table-card-view tbody,
  .table-card-view tr {
    display: block;
    margin-bottom: 1rem;
  }
  
  .table-card-view thead {
    display: none;
  }
  
  .table-card-view tr {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
  }
  
  .table-card-view td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border: none;
  }
  
  .table-card-view td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 1rem;
  }
  
  /* Forms */
  .form-control,
  .form-select {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 0.75rem;
  }
  
  .form-label {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }
  
  /* Single column forms on mobile */
  .row > [class*="col-"] {
    margin-bottom: 1rem;
  }
  
  /* Buttons */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .btn-group .btn {
    border-radius: 8px !important;
  }
  
  /* Touch targets - minimum 48px */
  a,
  button,
  .btn,
  .nav-link,
  .dropdown-item {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  
  /* Modal adjustments */
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-content {
    border-radius: 12px;
  }
  
  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
  
  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }
  
  /* Spacing adjustments */
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  /* Footer */
  .footer {
    padding: 2rem 0;
    text-align: center;
  }
  
  .footer .row > div {
    margin-bottom: 1.5rem;
  }
}

/* ===== SMALL MOBILE DEVICES (0-480px) ===== */
@media (max-width: 480px) {
  .navbar-brand {
    font-size: 1rem !important;
  }
  
  .card-body {
    padding: 0.75rem;
  }
  
  .btn {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
}

/* ===== TABLET: PORTRAIT & LANDSCAPE (768px - 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Container */
  .container-fluid,
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  /* Header */
  .navbar-brand {
    font-size: 1.4rem;
  }
  
  /* Two-column layouts */
  .row > [class*="col-md-6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  /* Cards */
  .card-body {
    padding: 1.25rem;
  }
  
  /* Tables */
  .table {
    font-size: 0.9rem;
  }
  
  .table th,
  .table td {
    padding: 0.75rem 0.5rem;
  }
  
  /* Forms - Two column */
  .form-row-tablet-2col .form-group {
    flex: 0 0 48%;
    max-width: 48%;
  }
  
  /* Buttons */
  .btn {
    width: auto;
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
  }
  
  .btn-group {
    flex-direction: row;
    gap: 0.75rem;
  }
  
  /* Hide mobile-only */
  .mobile-only {
    display: none !important;
  }
  
  /* Show tablet+ elements */
  .tablet-up {
    display: block !important;
  }
  
  /* Modal */
  .modal-dialog {
    margin: 1.75rem auto;
    max-width: 600px;
  }
}

/* ===== DESKTOP: STANDARD (1024px - 1439px) ===== */
@media (min-width: 1024px) {
  /* Container */
  .container {
    max-width: 1200px;
  }
  
  /* Header */
  .navbar-brand {
    font-size: 1.5rem;
  }
  
  /* Full navigation visible */
  .navbar-collapse {
    display: flex !important;
  }
  
  .navbar-toggler {
    display: none;
  }
  
  /* Cards */
  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(29, 25, 76, 0.15);
  }
  
  /* Tables */
  .table {
    font-size: 1rem;
  }
  
  /* Forms - Multi-column */
  .form-row-desktop-3col > div {
    flex: 0 0 32%;
    max-width: 32%;
  }
  
  /* Buttons */
  .btn {
    padding: 0.6rem 1.5rem;
  }
  
  /* Hide mobile/tablet only */
  .mobile-only,
  .tablet-only {
    display: none !important;
  }
  
  /* Show desktop elements */
  .desktop-only {
    display: block !important;
  }
  
  /* Modal */
  .modal-dialog {
    max-width: 800px;
  }
  
  /* Sidebar layouts */
  .sidebar {
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
  }
}

/* ===== LARGE DESKTOP (1440px+) ===== */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  
  .card-body {
    padding: 2rem;
  }
  
  /* Larger typography */
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  /* Modal */
  .modal-dialog {
    max-width: 900px;
  }
}

/* ===== LANDSCAPE ORIENTATION ADJUSTMENTS ===== */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce header size in landscape */
  .navbar {
    padding: 0.5rem 0;
  }
  
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  /* Compact spacing */
  .content-section,
  .main-content {
    padding: 1rem 0;
  }
  
  .card {
    margin-bottom: 0.75rem;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .navbar,
  .footer,
  .btn,
  .mobile-only,
  .desktop-only {
    display: none !important;
  }
  
  .content-section,
  .main-content {
    background: white !important;
    color: black !important;
  }
  
  .card {
    border: 1px solid #000;
    box-shadow: none;
    break-inside: avoid;
  }
  
  a {
    text-decoration: underline;
    color: black !important;
  }
}

/* ===== UTILITY CLASSES FOR RESPONSIVE CONTROL ===== */
.show-mobile {
  display: block;
}

.show-tablet {
  display: none;
}

.show-desktop {
  display: none;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
  
  .show-tablet {
    display: block;
  }
}

@media (min-width: 1024px) {
  .show-tablet {
    display: none;
  }
  
  .show-desktop {
    display: block;
  }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn,
  .nav-link,
  a {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
  }
  
  /* Remove hover effects on touch devices */
  .card:hover {
    transform: none;
  }
  
  /* Tap highlight color */
  * {
    -webkit-tap-highlight-color: rgba(94, 93, 246, 0.2);
  }
}