/* ============================================
   CASA APPLE - MOBILE RESPONSIVE OPTIMIZATIONS
   Complete mobile-first responsive design
   ============================================ */

/* ========== MOBILE BREAKPOINTS ========== */
/* 
  Mobile: < 768px
  Tablet: 768px - 1024px
  Desktop: > 1024px
*/

/* ========== MOBILE NAVIGATION ========== */
@media (max-width: 1024px) {
  .app-header {
    padding: 8px 12px !important;
    height: auto !important;
  }

  .app-header-inner {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  .app-header-left {
    justify-content: center;
  }

  .app-logo {
    width: 32px !important;
    height: 32px !important;
  }

  .app-title-main {
    font-size: 18px !important;
  }

  .app-title-sub {
    font-size: 12px !important;
  }

  /* Mobile Navigation - Horizontal Scroll */
  .app-nav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0 !important;
    gap: 8px;
    margin: 0 -12px;
    padding: 0 12px !important;
    
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .app-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }

  .app-nav a {
    flex-shrink: 0;
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap;
    min-width: auto !important;
  }
}

/* ========== MOBILE CONTENT LAYOUT ========== */
@media (max-width: 768px) {
  /* Main container adjustments */
  .app-main {
    padding: 12px !important;
  }

  .page-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* Typography adjustments */
  h1 { font-size: 22px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 16px !important; }
  
  /* Reduce excessive spacing */
  .section {
    margin-bottom: 20px !important;
  }

  .page-header {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }

  .page-title {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }

  .page-subtitle {
    font-size: 13px !important;
  }
}

/* ========== MOBILE FORMS ========== */
@media (max-width: 768px) {
  /* Form layout */
  .form-grid,
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .form-group {
    margin-bottom: 14px !important;
  }

  .form-label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .form-textarea {
    min-height: 100px !important;
  }

  /* Touch-friendly buttons */
  .btn,
  .button,
  button:not(.actions-more-button) {
    min-height: 44px !important; /* iOS touch target */
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  .btn-sm,
  .button-sm {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
  }

  .btn-lg,
  .button-lg {
    min-height: 50px !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
  }

  /* Button groups */
  .button-group,
  .form-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .button-group .btn,
  .form-actions .btn {
    width: 100% !important;
  }
}

/* ========== MOBILE TABLES ========== */
@media (max-width: 768px) {
  /* Convert tables to cards on mobile */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  table {
    font-size: 13px !important;
  }

  thead th {
    padding: 10px 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  tbody td {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }

  /* Hide less important columns on mobile */
  .hide-mobile {
    display: none !important;
  }

  /* Stack table cells vertically for very narrow screens */
  @media (max-width: 480px) {
    .table-card-mobile {
      display: block !important;
      border: 0 !important;
    }

    .table-card-mobile thead {
      display: none !important;
    }

    .table-card-mobile tr {
      display: block !important;
      background: white;
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .table-card-mobile td {
      display: block !important;
      text-align: left !important;
      padding: 8px 0 !important;
      border: 0 !important;
      position: relative;
      padding-left: 120px !important;
    }

    .table-card-mobile td:before {
      content: attr(data-label);
      position: absolute;
      left: 0;
      width: 110px;
      font-weight: 600;
      font-size: 12px;
      color: var(--text-tertiary);
      text-transform: uppercase;
    }

    .table-card-mobile td:last-child {
      padding-bottom: 0 !important;
    }
  }
}

/* ========== MOBILE CARDS & GRIDS ========== */
@media (max-width: 768px) {
  /* Card grid layouts */
  .card-grid,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .card-header {
    padding: 12px 14px !important;
    font-size: 16px !important;
  }

  .card-body {
    padding: 14px !important;
  }

  .card-footer {
    padding: 12px 14px !important;
  }

  /* Stats cards */
  .stats-card,
  .metric-card {
    padding: 16px !important;
  }

  .stat-value,
  .metric-value {
    font-size: 24px !important;
  }

  .stat-label,
  .metric-label {
    font-size: 12px !important;
  }
}

/* ========== MOBILE MODALS & DIALOGS ========== */
@media (max-width: 768px) {
  .modal,
  .dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  .modal-header,
  .dialog-header {
    padding: 16px !important;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-bottom: 1px solid var(--separator-light);
  }

  .modal-body,
  .dialog-body {
    padding: 16px !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .modal-footer,
  .dialog-footer {
    padding: 16px !important;
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid var(--separator-light);
  }
}

/* ========== MOBILE FILTERS & SEARCH ========== */
@media (max-width: 768px) {
  .filters-container,
  .search-container {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .filter-group {
    width: 100% !important;
  }

  .search-input {
    width: 100% !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  /* Collapsible filters on mobile */
  .filters-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  .filters-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .filters-content.expanded {
    max-height: 2000px;
  }
}

/* ========== MOBILE ACTION MENUS ========== */
@media (max-width: 768px) {
  .actions-dropdown {
    min-width: 200px !important;
    max-width: calc(100vw - 32px) !important;
  }

  .actions-dropdown a,
  .actions-dropdown button {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
}

/* ========== MOBILE BADGES & TAGS ========== */
@media (max-width: 768px) {
  .badge,
  .tag {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .badge-lg,
  .tag-lg {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ========== MOBILE SPACING UTILITIES ========== */
@media (max-width: 768px) {
  /* Reduce margins and padding */
  .mb-1, .my-1 { margin-bottom: 4px !important; }
  .mb-2, .my-2 { margin-bottom: 8px !important; }
  .mb-3, .my-3 { margin-bottom: 12px !important; }
  .mb-4, .my-4 { margin-bottom: 16px !important; }
  .mb-5, .my-5 { margin-bottom: 20px !important; }

  .mt-1, .my-1 { margin-top: 4px !important; }
  .mt-2, .my-2 { margin-top: 8px !important; }
  .mt-3, .my-3 { margin-top: 12px !important; }
  .mt-4, .my-4 { margin-top: 16px !important; }
  .mt-5, .my-5 { margin-top: 20px !important; }

  .p-1 { padding: 4px !important; }
  .p-2 { padding: 8px !important; }
  .p-3 { padding: 12px !important; }
  .p-4 { padding: 16px !important; }
  .p-5 { padding: 20px !important; }
}

/* ========== MOBILE-SPECIFIC UTILITIES ========== */
/* Show/hide elements based on screen size */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-flex {
    display: flex !important;
  }

  .mobile-inline-flex {
    display: inline-flex !important;
  }
}

/* ========== TOUCH-FRIENDLY IMPROVEMENTS ========== */
@media (max-width: 768px) {
  /* Larger touch targets */
  a, button, input, select, textarea {
    -webkit-tap-highlight-color: rgba(0, 122, 255, 0.1);
  }

  /* Prevent double-tap zoom on buttons */
  button, .btn, .button {
    touch-action: manipulation;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Fix iOS input zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ========== LANDSCAPE PHONE OPTIMIZATIONS ========== */
@media (max-width: 896px) and (orientation: landscape) {
  .app-header {
    padding: 6px 12px !important;
  }

  .app-logo {
    width: 28px !important;
    height: 28px !important;
  }

  .app-title-main {
    font-size: 16px !important;
  }

  .app-title-sub {
    display: none !important;
  }

  .app-nav a {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .app-main {
    padding: 8px !important;
  }

  .page-card {
    padding: 12px !important;
  }
}

/* ========== VERY SMALL SCREENS (< 375px) ========== */
@media (max-width: 374px) {
  .app-logo {
    width: 28px !important;
    height: 28px !important;
  }

  .app-title-main {
    font-size: 16px !important;
  }

  .app-nav a {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  .btn, .button {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}

/* ========== PRINT STYLES ========== */
@media print {
  .app-header,
  .app-nav,
  .filters-container,
  .button-group,
  .actions-more,
  .mobile-only {
    display: none !important;
  }

  .app-main {
    padding: 0 !important;
  }

  .page-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  table {
    page-break-inside: avoid;
  }
}

/* ========== ORDERS LIST MOBILE OPTIMIZATION ========== */
@media (max-width: 768px) {
  /* Orders header compacting */
  .orders-header-compact {
    margin-bottom: 12px !important;
  }

  .orders-header-main {
    padding: 12px !important;
  }

  .orders-title-section {
    width: 100%;
  }

  .orders-title-section h2 {
    font-size: 18px !important;
  }

  .orders-stats-badge {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  .orders-actions {
    width: 100%;
    gap: 6px !important;
  }

  .orders-actions .btn,
  .orders-actions button {
    flex: 1;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  /* Filters panel mobile */
  .orders-filters-content {
    padding: 0 12px 12px 12px !important;
  }

  .orders-search-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .orders-search-row label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
  }

  .orders-search-row select,
  .orders-search-row input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 10px !important;
  }

  .orders-search-row label[style*="flex"] {
    display: flex !important;
    gap: 8px;
    margin-top: 4px;
  }

  .orders-quick-filters {
    gap: 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .orders-quick-filters .btn {
    flex-shrink: 0;
    min-width: 110px;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  /* STATUS COUNTERS - ALWAYS VISIBLE on mobile when filters expanded */
  .status-counter,
  .status-count,
  [class*="status-"],
  .orders-quick-filters .badge,
  .orders-quick-filters span.badge,
  button .badge {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure status counters in filters panel are visible */
  .orders-filters .status-counter,
  .orders-filters .badge,
  .orders-search-row .badge {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .orders-stats-row {
    flex-direction: column;
    gap: 4px !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin-top: 8px !important;
  }

  /* CRITICAL: Ensure status counters are ALWAYS visible when filters are expanded */
  .orders-filters-content .orders-stats-row,
  .filters-content .orders-stats-row,
  .orders-stats-row,
  .filters-panel .orders-stats-row,
  #filters .orders-stats-row,
  [class*="filter"] .orders-stats-row {
    display: flex !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  .orders-stats-row span,
  .orders-stats-row .stat-item,
  .orders-stats-row > span,
  .orders-stats-row > div,
  .orders-stats-row > * {
    display: inline-block !important;
    margin: 2px 8px 2px 0 !important;
    font-size: 12px !important;
    white-space: nowrap;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  /* Override any hidden/collapsed states for counters */
  .filters-panel[style*="display: block"] .orders-stats-row,
  .filters-panel.show .orders-stats-row,
  .filters-content:not([style*="display: none"]) .orders-stats-row {
    display: flex !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     MOBILE ORDERS TABLE - SIMPLIFIED CARD LAYOUT
     Shows ALL columns with labels - works reliably
     ═══════════════════════════════════════════════════════════════ */
  
  /* Hide mobile-only buttons on desktop */
  .btn-mobile-only {
    display: none !important;
  }

  #table-wrapper table {
    display: block;
    width: 100%;
  }

  #table-wrapper table thead {
    display: none !important;
  }

  #table-wrapper table tbody {
    display: block;
  }

  #table-wrapper table tbody tr {
    display: block;
    margin-bottom: 12px;
    background: white;
    border-radius: 12px;
    padding: 14px;
    padding-top: 10px !important; /* Less top padding since header is inline */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    position: relative;
  }
  
  /* Create a flex container for the header row */
  #table-wrapper table tbody tr::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    margin-bottom: 10px;
  }

  /* All cells: block display with inline label */
  #table-wrapper table tbody td {
    display: block !important;
    text-align: left !important;
    padding: 6px 0 !important;
    border: none !important;
    font-size: 13px !important;
    line-height: 1.5;
  }

  #table-wrapper table tbody td::before {
    content: "";
    font-weight: 600;
    color: #666;
    display: inline-block;
    margin-right: 10px;
    font-size: 10px;
    text-transform: uppercase;
    min-width: 80px;
    letter-spacing: 0.5px;
  }

  /* ═══ HEADER ROW: Order#, Status, and Actions ═══ */
  /* Create a horizontal header bar with Order# | Status | 3-dot */
  #table-wrapper table tbody td:first-child,
  #table-wrapper table tbody td:nth-child(2) {
    display: inline-block !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }

  #table-wrapper table tbody td:first-child {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #007aff !important;
    margin-right: 10px !important;
  }

  #table-wrapper table tbody td:first-child::before,
  #table-wrapper table tbody td:nth-child(2)::before {
    display: none !important;
  }

  #table-wrapper table tbody td:nth-child(2) {
    flex: 1 !important;
  }

  #table-wrapper table tbody td:nth-child(2) .badge {
    padding: 5px 11px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
  }

  /* DIVIDER after header row - FULL WIDTH */
  #table-wrapper table tbody td:nth-child(2)::after {
    content: "";
    display: block !important;
    width: calc(100% + 28px) !important;
    height: 1px !important;
    background-color: #ddd !important;
    margin: 10px 0 10px -14px !important;
    clear: both !important;
  }

  /* ═══ CONTENT FIELDS with labels ═══ */
  #table-wrapper table tbody td:nth-child(3)::before { content: "👤 Cliente" !important; }
  #table-wrapper table tbody td:nth-child(4)::before { content: "📱 Equipo" !important; }
  #table-wrapper table tbody td:nth-child(5)::before { content: "🔧 Motivo" !important; }

  /* ═══ 3-DOT BUTTON positioned in header (top right, inline with order#/status) ═══ */
  #table-wrapper table tbody td:last-child {
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
  }

  #table-wrapper table tbody td:last-child::before {
    display: none !important;
  }

  /* Hide primary buttons (Edit/PDF/WhatsApp) - they'll be in dropdown */
  #table-wrapper table tbody td:last-child .actions-primary > button:first-child,
  #table-wrapper table tbody td:last-child .actions-primary > a {
    display: none !important;
  }

  /* Show only .actions-more container */
  #table-wrapper table tbody td:last-child .actions-primary {
    display: block !important;
  }

  #table-wrapper table tbody td:last-child .actions-more {
    display: block !important;
  }

  /* 3-DOT BUTTON STYLING - COMPACT & BLUE */
  #table-wrapper table tbody td:last-child .btn-more {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: #007aff !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
    cursor: pointer !important;
  }

  /* DROPDOWN MENU - Contains ALL actions including Edit/PDF/WhatsApp */
  #table-wrapper table tbody td:last-child .actions-dropdown {
    position: absolute !important;
    top: 45px !important;
    right: 0 !important;
    display: none !important;
    width: 250px !important;
    background: white !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #ddd !important;
    z-index: 100 !important;
  }

  #table-wrapper table tbody td:last-child .actions-dropdown[style*="display: block"] {
    display: block !important;
  }

  /* Show Edit/PDF/WhatsApp buttons INSIDE dropdown on mobile */
  .btn-mobile-only {
    display: block !important;
  }

  /* Hide desktop-only buttons on mobile */
  .btn-desktop-only {
    display: none !important;
  }

  /* Make Edit/PDF/WhatsApp buttons visible in dropdown */
  #table-wrapper table tbody .actions-primary > button:first-child,
  #table-wrapper table tbody .actions-primary > a {
    display: none !important;
  }

  #table-wrapper table tbody td:last-child .actions-dropdown .btn-dropdown {
    width: 100% !important;
    padding: 13px 15px !important;
    font-size: 14px !important;
    min-height: 46px !important;
    text-align: left !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
    display: block !important;
    background: white !important;
    border: 1px solid #e9ecef !important;
    color: #212529 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
  }

  #table-wrapper table tbody td:last-child .actions-dropdown .btn-dropdown:hover {
    background: #f8f9fa !important;
  }

  #table-wrapper table tbody td:last-child .actions-dropdown .btn-dropdown:last-child {
    margin-bottom: 0 !important;
  }

  /* History section - HIDE per user request */
  #table-wrapper table tbody tr div[id^="history-"] {
    display: none !important;
  }
  
  /* ═══ SMART COLUMN MANAGEMENT - Use classes to control visibility ═══ */
  
  /* Hide optional columns on mobile */
  #table-wrapper table tbody td.col-prometida,
  #table-wrapper table tbody td.col-tecnico,
  #table-wrapper table tbody td.col-imei,
  #table-wrapper table tbody td.col-prioridad {
    display: none !important;
  }
  
  /* Show and style the Ingreso column */
  #table-wrapper table tbody td.col-ingreso {
    display: block !important;
    background: #f0f7ff !important;
    padding: 10px !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
    font-size: 14px !important;
  }
  
  #table-wrapper table tbody td.col-ingreso::before {
    content: "📅 Ingreso" !important;
    display: block !important;
    font-weight: 700 !important;
    color: #007aff !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
  }
  
  #table-wrapper table tbody td.col-ingreso small {
    display: block !important;
    margin-top: 4px !important;
    font-weight: 600 !important;
    color: #666 !important;
    font-size: 13px !important;
  }
  
  /* Show and style the Total column */
  #table-wrapper table tbody td.col-total {
    display: block !important;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%) !important;
    padding: 12px !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
    border: 1px solid #a5d6a7 !important;
  }
  
  #table-wrapper table tbody td.col-total::before {
    content: "💰 Total" !important;
    display: block !important;
    font-weight: 700 !important;
    color: #2e7d32 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
  }
  
  #table-wrapper table tbody td.col-total {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2e7d32 !important;
  }
  
  #table-wrapper table tbody td.col-total small {
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #c62828 !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens - Card layout remains compact */
  #table-wrapper table tbody tr {
    padding: 12px;
  }

  #table-wrapper table tbody td {
    font-size: 13px !important;
    padding: 5px 0 !important;
  }

  #table-wrapper table tbody td::before {
    font-size: 10px !important;
    min-width: 80px;
  }

  #table-wrapper table tbody td:nth-child(1) {
    font-size: 16px !important;
    max-width: calc(100% - 80px) !important;
  }

  #table-wrapper table tbody td:last-child .btn-more {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  #table-wrapper table tbody td:last-child .actions-dropdown {
    width: 200px;
  }

  #table-wrapper table tbody td:last-child .actions-dropdown .btn-dropdown {
    padding: 10px 12px !important;
    font-size: 13px !important;
    min-height: 42px;
  }
}

/* ========== CATALOG LIST MOBILE OPTIMIZATION ========== */
@media (max-width: 768px) {
  /* Catalog toolbar */
  .toolbar {
    margin-bottom: 12px !important;
  }

  .toolbar > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .toolbar input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 10px !important;
    margin: 0 !important;
  }

  .toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 14px;
  }

  .toolbar .btn {
    margin: 0 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* Quick filters horizontal scroll */
  .toolbar > div:nth-child(2) {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 6px;
    margin: 8px -12px 0 -12px;
    padding: 0 12px 8px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .toolbar > div:nth-child(2)::-webkit-scrollbar {
    display: none;
  }

  .toolbar > div:nth-child(2) strong {
    flex-shrink: 0;
    align-self: center;
    margin-right: 4px;
  }

  .toolbar > div:nth-child(2) button {
    flex-shrink: 0;
    width: auto !important;
    min-width: 100px;
    white-space: nowrap;
    padding: 8px 16px !important;
    font-size: 13px !important;
    margin: 0 !important;
  }

  /* Catalog table - Convert to card layout */
  table.table {
    display: block;
  }

  table.table thead {
    display: none;
  }

  table.table tbody {
    display: block;
  }

  table.table tbody tr {
    display: block;
    margin-bottom: 12px;
    background: white;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
  }

  table.table tbody td {
    display: block;
    text-align: left !important;
    padding: 6px 0 !important;
    border: none !important;
    font-size: 14px !important;
  }

  table.table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 8px;
    font-size: 11px;
    text-transform: uppercase;
    min-width: 90px;
  }

  /* Catalog column labels */
  table.table tbody td:nth-child(1)::before {
    content: "ID:";
  }

  table.table tbody td:nth-child(2)::before {
    content: "";
  }

  table.table tbody td:nth-child(3)::before {
    content: "Categoría:";
  }

  table.table tbody td:nth-child(4)::before {
    content: "Precio:";
  }

  table.table tbody td:nth-child(5)::before {
    content: "Costo:";
  }

  table.table tbody td:nth-child(6)::before {
    content: "Activo:";
  }

  table.table tbody td:nth-child(7)::before {
    content: "";
  }

  /* ID and Service name on same line */
  table.table tbody td:nth-child(1) {
    display: inline-block !important;
    width: auto !important;
    font-size: 13px !important;
    font-weight: 600;
    color: #666;
    padding: 0 !important;
    margin: 0 10px 0 0 !important;
    vertical-align: middle;
  }

  /* Service name - Make prominent */
  table.table tbody td:nth-child(2) {
    display: inline-block !important;
    width: auto !important;
    font-size: 16px !important;
    font-weight: 700;
    color: #007aff;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
  }

  /* Add divider after header */
  table.table tbody td:nth-child(2)::after {
    content: "";
    display: block;
    height: 1px;
    background: #e0e0e0;
    margin: 10px 0;
  }

  /* Actions - Make touch-friendly */
  table.table tbody td:last-child {
    padding-top: 12px !important;
    margin-top: 12px !important;
    border-top: 1px solid #e0e0e0 !important;
  }

  table.table tbody td:last-child .btn,
  table.table tbody td:last-child button,
  table.table tbody td:last-child a {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    min-height: 44px;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
  }
}

/* ========== MOBILE-SPECIFIC UTILITIES ========== */
/* Show/hide elements based on screen size */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-flex {
    display: flex !important;
  }

  .mobile-inline-flex {
    display: inline-flex !important;
  }
}

/* ========== TOUCH-FRIENDLY IMPROVEMENTS ========== */
@media (max-width: 768px) {
  /* Larger touch targets */
  a, button, input, select, textarea {
    -webkit-tap-highlight-color: rgba(0, 122, 255, 0.1);
  }

  /* Prevent double-tap zoom on buttons */
  button, .btn, .button {
    touch-action: manipulation;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Fix iOS input zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ========== LANDSCAPE PHONE OPTIMIZATIONS ========== */
@media (max-width: 896px) and (orientation: landscape) {
  .app-header {
    padding: 6px 12px !important;
  }

  .app-logo {
    width: 28px !important;
    height: 28px !important;
  }

  .app-title-main {
    font-size: 16px !important;
  }

  .app-title-sub {
    display: none !important;
  }

  .app-nav a {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .app-main {
    padding: 8px !important;
  }

  .page-card {
    padding: 12px !important;
  }
}

/* ========== VERY SMALL SCREENS (< 375px) ========== */
@media (max-width: 374px) {
  .app-logo {
    width: 28px !important;
    height: 28px !important;
  }

  .app-title-main {
    font-size: 16px !important;
  }

  .app-nav a {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  .btn, .button {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}

/* ========== PRINT STYLES ========== */
@media print {
  .app-header,
  .app-nav,
  .filters-container,
  .actions-container,
  .mobile-only {
    display: none !important;
  }

  body {
    font-size: 12pt;
  }

  .page-card {
    box-shadow: none !important;
    border: 1px solid #000;
  }
}