/**
 * Responsive Enhancements and Fixes
 * Addresses text contrast, responsive issues, and component improvements
 */

/* ===== TEXT COLOR CONTRAST FIXES ===== */

/* Override hardcoded text colors in core.css for better contrast */
body {
  color: #495057;
}

/* Typography - Adaptive colors based on background */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #343a40 !important;
}

p {
  color: #495057 !important;
}

/* Dark background text colors */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark .h1, .bg-dark .h2, .bg-dark .h3, .bg-dark .h4, .bg-dark .h5, .bg-dark .h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5, .bg-info h6,
.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6,
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 {
  color: #ffffff !important;
}

.bg-dark p,
.bg-primary p,
.bg-success p,
.bg-info p,
.bg-danger p,
.bg-warning p,
.card-header p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Light background text colors */
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6,
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6,
.card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6 {
  color: #343a40 !important;
}

.bg-light p,
.bg-white p,
.card-body p {
  color: #495057 !important;
}

/* ===== IMPROVED MODAL RESPONSIVENESS ===== */

@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  .modal-content {
    border-radius: var(--radius-lg, 0.75rem);
  }
  
  .modal-header {
    padding: 1rem;
    border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
  }
  
  .modal-body {
    padding: 1rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  
  .modal-footer {
    padding: 0.75rem 1rem;
    flex-direction: column;
    border-radius: 0 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem);
  }
  
  .modal-footer .btn {
    width: 100%;
    margin: 0.25rem 0;
  }
  
  .modal-title {
    font-size: 1.125rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .modal-dialog {
    max-width: 540px;
    margin: 1rem auto;
  }
  
  .modal-body {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
  }
}

/* ===== ENHANCED TABLE RESPONSIVENESS ===== */

/* Keep desktop table layout on all screen sizes with horizontal scroll */
@media (max-width: 991.98px) {
  .table-responsive {
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ensure table doesn't shrink too much */
  .table {
    min-width: 700px;
  }
}

@media (max-width: 767.98px) {
  /* Keep normal table structure with horizontal scroll */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Maintain table structure */
  .table {
    min-width: 600px;
  }
  
  /* Reduce padding for mobile to fit more content */
  .table thead th,
  .table tbody td {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
  }
  
  /* Table header styling adjustments */
  .card-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch !important;
  }
  
  .card-header .card-title {
    text-align: center;
    margin: 0;
  }
  
  .card-header .card-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .card-header .dropdown .btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  /* Even smaller screens - still maintain table structure with scroll */
  .table {
    min-width: 500px;
  }
  
  .table thead th,
  .table tbody td {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ===== CARD RESPONSIVE ENHANCEMENTS ===== */

@media (max-width: 575.98px) {
  .card {
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .card-header {
    padding: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-footer {
    padding: 0.75rem 1rem;
  }
  
  /* Stack cards in columns */
  .row > [class*="col-"] {
    margin-bottom: 1rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .card {
    margin-bottom: 1.25rem;
  }
  
  .card-header,
  .card-body {
    padding: 1.25rem;
  }
}

/* ===== FORM RESPONSIVE ENHANCEMENTS ===== */

@media (max-width: 575.98px) {
  .form-control,
  .form-select {
    font-size: 1rem; /* Prevent zoom on iOS */
    padding: 0.625rem 0.875rem;
  }
  
  .form-label {
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
  }
  
  .input-group {
    flex-direction: column;
  }
  
  .input-group-text {
    width: 100%;
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: none;
  }
  
  .input-group > .form-control,
  .input-group > .form-select {
    border-radius: 0 0 0.5rem 0.5rem;
  }
  
  .input-group > .form-control:not(:last-child),
  .input-group > .form-select:not(:last-child) {
    border-radius: 0;
  }
  
  /* Stack form rows */
  .form-row {
    flex-direction: column;
  }
  
  .form-row > [class*="col-"] {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* ===== BUTTON RESPONSIVE ENHANCEMENTS ===== */

@media (max-width: 575.98px) {
  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }
  
  .btn-group {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .btn-group > .btn {
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem;
  }
  
  /* Toolbar buttons */
  .btn-toolbar {
    flex-direction: column;
  }
  
  .btn-toolbar .btn-group {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ===== NAVIGATION RESPONSIVE ENHANCEMENTS ===== */

@media (max-width: 991.98px) {
  .navbar-collapse {
    padding: 1rem 0;
  }
  
  .navbar-nav {
    align-items: stretch;
  }
  
  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand img {
    height: 32px;
  }
  
  .navbar-toggler {
    padding: 0.5rem;
  }
}

/* ===== DROPDOWN RESPONSIVE ENHANCEMENTS ===== */

@media (max-width: 575.98px) {
  .dropdown-menu {
    width: 100%;
    max-width: 100%;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
  }
  
  .dropdown-item {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }
}

/* ===== DASHBOARD CARDS RESPONSIVE ===== */

@media (max-width: 991.98px) {
  .statistics .card2 {
    margin-bottom: 1rem;
  }
  
  .statistics .stamp {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
  }
  
  .statistics .number {
    font-size: 1.75rem !important;
  }
  
  /* Order buttons responsive */
  .order_btn_group {
    gap: 0.375rem;
    padding: 0.375rem;
  }
  
  .order_btn_group .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 575.98px) {
  .statistics .card2 {
    padding: 1rem !important;
  }
  
  .statistics .stamp {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
  }
  
  .statistics .number {
    font-size: 1.5rem !important;
  }
  
  .statistics .text-muted {
    font-size: 0.8125rem;
  }
  
  /* Order buttons stack on small screens */
  .order_btn_group {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
  }
  
  .order_btn_group .btn {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }
}

/* ===== PAGINATION RESPONSIVE ===== */

@media (max-width: 575.98px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .page-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin: 0.125rem;
  }
}

/* ===== BADGES RESPONSIVE ===== */

@media (max-width: 575.98px) {
  .badge {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
  }
}

/* ===== ALERTS RESPONSIVE ===== */

@media (max-width: 575.98px) {
  .alert {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
  }
  
  .alert-dismissible .btn-close {
    padding: 0.75rem;
  }
}

/* ===== UTILITY RESPONSIVE CLASSES ===== */

/* Text alignment utilities for small screens */
@media (max-width: 575.98px) {
  .text-sm-start { text-align: left !important; }
  .text-sm-end { text-align: right !important; }
  .text-sm-center { text-align: center !important; }
}

/* Display utilities for extra small screens */
@media (max-width: 575.98px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
}

/* Spacing adjustments for small screens */
@media (max-width: 575.98px) {
  .p-sm-1 { padding: 0.25rem !important; }
  .p-sm-2 { padding: 0.5rem !important; }
  .p-sm-3 { padding: 1rem !important; }
  .m-sm-1 { margin: 0.25rem !important; }
  .m-sm-2 { margin: 0.5rem !important; }
  .m-sm-3 { margin: 1rem !important; }
}

/* ===== CONTAINER RESPONSIVE ===== */

@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ===== IMPROVED ACCESSIBILITY ===== */

/* Focus states for better keyboard navigation on all screen sizes */
a:focus,
button:focus,
.btn:focus,
.form-control:focus,
.form-select:focus {
  outline: 2px solid #467fcf;
  outline-offset: 2px;
}

/* Touch target size for mobile */
@media (max-width: 767.98px) {
  a, button, .btn, .nav-link, .dropdown-item {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .form-check-input,
  .form-radio-input {
    min-width: 1.5rem;
    min-height: 1.5rem;
  }
}

/* ===== GRID RESPONSIVE IMPROVEMENTS ===== */

@media (max-width: 575.98px) {
  .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  
  .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ===== OFFCANVAS RESPONSIVE ===== */

@media (max-width: 575.98px) {
  .offcanvas {
    width: 85vw !important;
    max-width: 320px;
  }
}

/* ===== OVERFLOW HANDLING ===== */

@media (max-width: 767.98px) {
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Allow content to wrap */
  .text-nowrap {
    white-space: normal !important;
  }
  
  /* Responsive images and embeds */
  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }
}

/* ===== PRINT RESPONSIVE ===== */

@media print {
  /* Hide unnecessary elements */
  .navbar,
  .btn,
  .pagination,
  .modal,
  .alert-dismissible .btn-close {
    display: none !important;
  }
  
  /* Optimize for printing */
  body {
    color: #000;
    background: #fff;
  }
  
  .card,
  .table {
    page-break-inside: avoid;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    page-break-after: avoid;
  }
  
  p {
    color: #000 !important;
  }
}