/* ============================================
   RESPONSIVE STYLES FOR SMALL SCREENS
   ============================================ */

/* Document index filters - NOT fixed, flows with content on small screens */
@media (max-width: 959px) {
  .document-index .document-index-filters-column {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 2;
    background: white;
    padding: 8px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    max-height: none;
    overflow-y: visible;
    margin-bottom: 8px;
    border-radius: 4px;
  }
  
  .document-index .document-index-filters-column .mud-paper {
    margin: 0;
    box-shadow: none;
  }
}

/* Fix input/select placeholder overflow on small AND medium screens */
@media (max-width: 959px) {
  /* MudSelect and MudAutocomplete placeholder/label fix */
  .mud-input-label,
  .mud-input-label-inputcontrol,
  .mud-input-label-outlined {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
  }
  
  .mud-input.mud-input-outlined .mud-input-slot,
  .mud-select-input .mud-input-slot {
    font-size: 12px !important;
    padding-right: 24px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Make select inputs more compact */
  .mud-select .mud-input-control-input-container,
  .mud-autocomplete .mud-input-control-input-container {
    min-width: 0;
  }
  
  .mud-input-adornment-end {
    position: absolute;
    right: 4px;
  }
  
  .mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 28px;
  }
  
  /* Fix icon buttons in inputs */
  .mud-input-adornment .mud-icon-button {
    padding: 4px !important;
    width: 28px !important;
    height: 28px !important;
  }
  
  .mud-input-adornment .mud-icon-root {
    font-size: 16px !important;
  }
  
  /* Grid items full width on small/medium screens for better input display */
  .mud-grid-item.mud-grid-item-lg-5,
  .mud-grid-item.mud-grid-item-lg-6 {
    flex-basis: 100%;
    max-width: 100%;
  }
  
  /* Dialog content more compact */
  .mud-dialog-content {
    padding: 8px !important;
  }
  
  .mud-tabs-panels {
    padding: 4px !important;
  }
}

/* ============================================
   MudTable responsive styles for small screens
   ============================================ */
@media (max-width: 599px) {
  /* Ensure table container allows content */
  .mud-xs-table .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* ===== Table Footer with "AJOUTER UNE LIGNE" button ===== */
  /* Force table footer to be visible */
  .mud-xs-table .mud-table-foot,
  .mud-xs-table tfoot,
  .mud-table tfoot {
    display: block !important;
    width: 100%;
  }
  
  .mud-xs-table tfoot tr,
  .mud-table tfoot tr {
    display: block !important;
    width: 100%;
  }
  
  /* Button in table footer - force visibility */
  .mud-xs-table tfoot .mud-button-root,
  .mud-xs-table .mud-table-foot .mud-button-root,
  .mud-table tfoot .mud-button-root,
  tfoot > tr > .mud-button-root,
  tfoot .mud-button-root {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 12px 0 !important;
    padding: 8px 16px !important;
  }
  
  /* ===== Responsive card layout styling ===== */
  /* Style the responsive row cards */
  .mud-xs-table .mud-table-body .mud-table-row {
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  
  /* Style cells in responsive mode */
  .mud-xs-table .mud-table-body .mud-table-cell {
    padding: 6px 8px !important;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
  }
  
  .mud-xs-table .mud-table-body .mud-table-cell:last-child {
    border-bottom: none;
  }
  
  /* Label styling in responsive table */
  .mud-xs-table .mud-table-cell .mud-table-cell-label {
    font-weight: 600;
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
  }
  
  /* Smaller inputs in responsive table */
  .mud-xs-table .mud-input-root {
    font-size: 13px !important;
  }
  
  .mud-xs-table .mud-input-control {
    margin: 0 !important;
  }
  
  /* Status badges in responsive table */
  .mud-xs-table .mud-chip {
    font-size: 11px !important;
    height: 24px !important;
  }
  
  /* Action buttons in responsive table */
  .mud-xs-table .mud-icon-button {
    padding: 4px !important;
  }
  
  .mud-xs-table .mud-icon-button .mud-icon-root {
    font-size: 18px !important;
  }
}

/* ===== Ensure all SVG icons are visible ===== */
@media (max-width: 599px) {
  /* Force all icons/SVGs to be visible */
  .mud-button-root .mud-icon-root,
  .mud-button-root svg,
  .mud-icon-button .mud-icon-root,
  .mud-icon-button svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}