/* Bootstrap 5 Fold Device Optimization */
/* Điều chỉnh các breakpoint của Bootstrap để hỗ trợ Samsung Galaxy Fold */

/* =============================================================================
   FOLD DEVICE BREAKPOINT ADJUSTMENTS
   ============================================================================= */

/* Samsung Galaxy Z Fold dimensions:
   - Cover screen (folded): 374px × 832px
   - Main screen (unfolded): 768px × 884px (portrait), 884px × 768px (landscape)
*/

/* Override Bootstrap's XS breakpoint cho cover screen của fold */
@media (max-width: 374.98px) {
  /* Container adjustments cho cover screen */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* Grid gutter adjustment cho màn hình hẹp */
  .row {
    --bs-gutter-x: 1rem;
  }
  
  /* Force columns về single column layout khi cần thiết */
  .col-12 { width: 100% !important; }
  
  /* Typography scaling cho cover screen */
  .h1, h1 { font-size: calc(1.25rem + 0.3vw); }
  .h2, h2 { font-size: calc(1.2rem + 0.25vw); }
  .h3, h3 { font-size: calc(1.15rem + 0.2vw); }
  .h4, h4 { font-size: calc(1.1rem + 0.15vw); }
  .h5, h5 { font-size: 1.05rem; }
  .h6, h6 { font-size: 1rem; }
  
  .display-1 { font-size: calc(2.5rem + 1vw); }
  .display-2 { font-size: calc(2rem + 0.8vw); }
  .display-3 { font-size: calc(1.75rem + 0.6vw); }
  .display-4 { font-size: calc(1.5rem + 0.4vw); }
  .display-5 { font-size: calc(1.25rem + 0.2vw); }
  .display-6 { font-size: 1.1rem; }
}

/* Điều chỉnh SM breakpoint để bắt đầu từ main screen của fold */
@media (min-width: 375px) and (max-width: 767.98px) {
  /* Điều này bao gồm cả cover screen lớn và một số tablet nhỏ */
  .container,
  .container-sm {
    max-width: 100%;
  }
}

/* Điều chỉnh MD breakpoint cho fold main screen portrait */
@media (min-width: 768px) and (max-width: 883.98px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 720px; /* Slightly smaller for fold main screen */
  }
  
  /* Tối ưu grid cho fold main screen */
  .row {
    --bs-gutter-x: 1.5rem;
  }
}

/* Điều chỉnh LG breakpoint để bắt đầu từ fold landscape/tablet mode */
@media (min-width: 884px) and (max-width: 1199.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 840px; /* Optimized for fold wide screen */
  }
}

/* =============================================================================
   COMPONENT ADJUSTMENTS FOR FOLD DEVICES
   ============================================================================= */

/* Navbar adjustments cho cover screen */
@media (max-width: 374.98px) {
  .navbar-brand {
    font-size: 1rem;
    padding: 0.25rem 0;
  }
  
  .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
  }
  
  .navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }
  
  .navbar-collapse {
    margin-top: 0.5rem;
  }
}

/* Button adjustments cho cover screen */
@media (max-width: 374.98px) {
  .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
  }
  
  .btn-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .btn-group .btn {
    flex: 1;
  }
  
  .btn-group-vertical .btn {
    width: 100%;
  }
}

/* Card adjustments cho fold devices */
@media (max-width: 374.98px) {
  .card {
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
  }
  
  .card-body {
    padding: 0.75rem;
  }
  
  .card-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .card-text {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }
  
  .card-header,
  .card-footer {
    padding: 0.5rem 0.75rem;
  }
}

/* Form adjustments cho cover screen */
@media (max-width: 374.98px) {
  .form-control,
  .form-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  
  .form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .form-label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  
  .form-text {
    font-size: 0.75rem;
  }
  
  .input-group-text {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* Modal adjustments cho fold devices */
@media (max-width: 374.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  .modal-content {
    border-radius: 0.5rem;
  }
  
  .modal-header,
  .modal-footer {
    padding: 0.75rem;
  }
  
  .modal-body {
    padding: 0.75rem;
  }
  
  .modal-title {
    font-size: 1rem;
  }
}

/* Table adjustments cho cover screen */
@media (max-width: 374.98px) {
  .table {
    font-size: 0.75rem;
  }
  
  .table td,
  .table th {
    padding: 0.375rem;
  }
  
  .table-sm td,
  .table-sm th {
    padding: 0.25rem;
  }
  
  /* Responsive table behavior */
  .table-responsive {
    border: none;
  }
}

/* Alert adjustments */
@media (max-width: 374.98px) {
  .alert {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
  }
  
  .alert-heading {
    font-size: 1rem;
  }
}

/* Badge and label adjustments */
@media (max-width: 374.98px) {
  .badge {
    font-size: 0.7em;
    padding: 0.25em 0.5em;
  }
}

/* Breadcrumb adjustments */
@media (max-width: 374.98px) {
  .breadcrumb {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    font-size: 0.75rem;
  }
}

/* Pagination adjustments */
@media (max-width: 374.98px) {
  .pagination {
    margin-bottom: 0.75rem;
  }
  
  .page-link {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .page-link-lg {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .page-link-sm {
    padding: 0.25rem 0.375rem;
    font-size: 0.7rem;
  }
}

/* =============================================================================
   SPACING ADJUSTMENTS FOR FOLD
   ============================================================================= */

/* Reduce default spacing cho cover screen */
@media (max-width: 374.98px) {
  /* Margin utilities with smaller values */
  .my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
  .mt-5 { margin-top: 2rem !important; }
  .mb-5 { margin-bottom: 2rem !important; }
  
  .my-4 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
  .mt-4 { margin-top: 1.25rem !important; }
  .mb-4 { margin-bottom: 1.25rem !important; }
  
  /* Padding utilities with smaller values */
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .pt-5 { padding-top: 2rem !important; }
  .pb-5 { padding-bottom: 2rem !important; }
  
  .py-4 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .pt-4 { padding-top: 1.25rem !important; }
  .pb-4 { padding-bottom: 1.25rem !important; }
}

/* =============================================================================
   UTILITY CLASS ADJUSTMENTS
   ============================================================================= */

/* Text utilities cho cover screen */
@media (max-width: 374.98px) {
  .fs-1 { font-size: calc(1.25rem + 0.3vw) !important; }
  .fs-2 { font-size: calc(1.2rem + 0.25vw) !important; }
  .fs-3 { font-size: calc(1.15rem + 0.2vw) !important; }
  .fs-4 { font-size: calc(1.1rem + 0.15vw) !important; }
  .fs-5 { font-size: 1.05rem !important; }
  .fs-6 { font-size: 1rem !important; }
  
  .lh-1 { line-height: 1.1 !important; }
  .lh-sm { line-height: 1.2 !important; }
  .lh-base { line-height: 1.4 !important; }
  .lh-lg { line-height: 1.6 !important; }
}

/* Border radius adjustments */
@media (max-width: 374.98px) {
  .rounded { border-radius: 0.375rem !important; }
  .rounded-1 { border-radius: 0.25rem !important; }
  .rounded-2 { border-radius: 0.375rem !important; }
  .rounded-3 { border-radius: 0.5rem !important; }
  .rounded-lg { border-radius: 0.5rem !important; }
}

/* =============================================================================
   GRID SYSTEM ENHANCEMENTS
   ============================================================================= */

/* Enhanced column behavior cho different fold states */
@media (max-width: 374.98px) {
  /* Single column preference for very narrow screens */
  .col-auto { 
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
}

/* Fold main screen optimizations */
@media (min-width: 768px) and (max-width: 883.98px) {
  /* Slightly adjust column widths for fold main screen aspect ratio */
  .container,
  .container-md {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Fold wide screen (landscape/tablet mode) */
@media (min-width: 884px) and (max-width: 1199.98px) {
  .container,
  .container-lg {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =============================================================================
   FLEXBOX UTILITIES ADJUSTMENTS
   ============================================================================= */

@media (max-width: 374.98px) {
  /* Flex direction adjustments cho narrow screens */
  .flex-row { flex-direction: row !important; }
  .flex-column { flex-direction: column !important; }
  
  /* Justify content with better spacing for small screens */
  .justify-content-between { justify-content: space-between !important; }
  .justify-content-around { justify-content: space-around !important; }
  .justify-content-evenly { justify-content: space-evenly !important; }
}

/* =============================================================================
   VISIBILITY UTILITIES FOR FOLD STATES
   ============================================================================= */

/* Hide content on cover screen if needed */
@media (max-width: 374.98px) {
  .d-fold-cover-none { display: none !important; }
  .d-fold-cover-block { display: block !important; }
  .d-fold-cover-flex { display: flex !important; }
}

/* Hide content on main screen if needed */
@media (min-width: 768px) and (max-width: 883.98px) {
  .d-fold-main-none { display: none !important; }
  .d-fold-main-block { display: block !important; }
  .d-fold-main-flex { display: flex !important; }
}

/* Show only on fold devices */
@media (max-width: 883.98px) {
  .d-fold-only { display: block !important; }
}

@media (min-width: 884px) {
  .d-fold-only { display: none !important; }
}