/* Mobile Enhancements */

/* Base mobile improvements */
@media (max-width: 768px) {
  body {
    font-size: 16px !important; /* Prevent zoom on input focus */
  }

  /* Touch-friendly tap targets */
  button:not(.nav-btn), a, input:not(.product-received-cb), select, textarea {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Dynamic overlay modals (convert, confirm, etc.) - compact sizing */
  div[style*="z-index:10000"] input,
  div[style*="z-index:10000"] select,
  div[style*="z-index:10000"] textarea,
  div[style*="z-index:10000"] button,
  div[style*="z-index: 10000"] input,
  div[style*="z-index: 10000"] select,
  div[style*="z-index: 10000"] textarea,
  div[style*="z-index: 10000"] button {
    min-height: 36px !important;
    font-size: 12px !important;
  }
  div[style*="z-index:10000"] label,
  div[style*="z-index: 10000"] label {
    font-size: 12px !important;
  }

  /* Nav buttons should be compact */
  .nav-btn {
    min-height: auto !important;
    height: auto !important;
  }

  /* Mobile menu toggle - hamburger icon */
  .mobile-menu-toggle {
    min-height: auto !important;
    min-width: auto !important;
    width: 44px !important;
    height: 44px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    outline: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    font-size: 24px !important;
    color: #1e293b !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 1001 !important;
  }

  /* When menu is open, move toggle to top-right of nav so it doesn't overlap logo */
  .mobile-menu-toggle.active {
    left: 228px !important;
    top: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white !important;
    font-size: 28px !important;
  }

  /* Responsive navigation */
  .main-nav {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 280px;
    transition: left 0.3s ease;
    z-index: 1000;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px !important;
  }

  .main-nav.mobile-open {
    left: 0;
  }

  .mobile-menu-toggle {
    display: block !important;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
  }

  /* Full-width forms */
  .form-group, .form-control {
    width: 100% !important;
  }

  /* Radio buttons and checkboxes - proper sizing on mobile */
  input[type="checkbox"] {
    accent-color: #3b82f6 !important;
  }

  /* Vertical form layouts */
  .form-row {
    flex-direction: column !important;
  }

  /* Horizontal table scrolling */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .settings-section .table-container {
    margin-top: 4px !important;
  }

  table {
    min-width: 600px;
  }

  /* Full-width modals */
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px !important;
  }

  /* Vertical kanban stacking */
  .kanban-board {
    flex-direction: column !important;
  }

  .kanban-column {
    width: 100% !important;
    margin-bottom: 20px;
  }

  /* Larger text for readability */
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }

  /* Spacing improvements */
  .view-container {
    padding: 15px !important;
  }

  /* Stack stat cards */
  .dashboard-stats {
    grid-template-columns: 1fr !important;
  }

  /* Better button spacing */
  .btn-group {
    flex-direction: column !important;
    gap: 10px !important;
  }

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

  /* Pre-Sales Kanban - stack columns vertically */
  #pre-sales-kanban-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  #pre-sales-kanban-view .kanban-board {
    flex-direction: column !important;
    overflow-x: visible !important;
  }

  #pre-sales-kanban-view .kanban-column {
    flex: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  #pre-sales-kanban-view .kanban-column .column-content {
    max-height: 400px !important;
    overflow-y: auto !important;
  }

  /* Post-Sales Kanban - pskanban-column class */
  .pskanban-column {
    flex: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  #kanban-board {
    flex-direction: column !important;
    overflow-x: visible !important;
  }

  /* Pre-Sales Dashboard - stack grids */
  #pre-sales-dashboard-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  #pre-sales-dashboard-view:not([style*="display: none"]) .dashboard-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #pre-sales-dashboard-view:not([style*="display: none"]) .dashboard-lists {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: auto !important;
  }

  #pre-sales-dashboard-view:not([style*="display: none"]) .list-card {
    max-height: 400px !important;
  }

  /* Expenses Dashboard - stack grids */
  #expenses-dashboard-view:not([style*="display: none"]) .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Expenses Dashboard - top 3 cards stack on mobile */
  #expenses-dashboard-view:not([style*="display: none"]) [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #expenses-dashboard-view:not([style*="display: none"]) .dashboard-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Fixed-height views should be auto on mobile */
  #leads-view:not([style*="display: none"]),
  #post-sales-view:not([style*="display: none"]),
  #post-sales-kanban-view:not([style*="display: none"]),
  #employees-view:not([style*="display: none"]),
  #expenses-view:not([style*="display: none"]),
  #archived-leads-view:not([style*="display: none"]),
  #tasks-kanban-view:not([style*="display: none"]),
  #my-tasks-view:not([style*="display: none"]),
  #active-tasks-view:not([style*="display: none"]),
  #completed-tasks-view:not([style*="display: none"]),
  #deleted-tasks-view:not([style*="display: none"]),
  #qc-active-view:not([style*="display: none"]),
  #qc-completed-view:not([style*="display: none"]),
  #qc-deleted-view:not([style*="display: none"]),
  #qc-kanban-view:not([style*="display: none"]),
  #qc-dashboard-view:not([style*="display: none"]),
  #dealers-view:not([style*="display: none"]),
  #deleted-dealers-view:not([style*="display: none"]),
  #dealer-shipments-view:not([style*="display: none"]),
  #dealers-dashboard-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  /* Dealers Dashboard - stack on mobile */
  #dealers-dashboard-view:not([style*="display: none"]) .dashboard-lists {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Dealer modals - full width on mobile */
  #dealer-modal .modal-content,
  #shipment-modal .modal-content,
  #dealer-details-modal .modal-content {
    width: 95% !important;
    max-width: 95% !important;
  }

  /* Dealer action buttons - 2 columns on mobile */
  .dealer-action-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tasks Kanban - stack columns vertically on mobile */
  #tasks-kanban-view .kanban-board {
    flex-direction: column !important;
    overflow-x: visible !important;
  }

  #tasks-kanban-view .kanban-column {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #tasks-kanban-view .kanban-column .column-content {
    max-height: 400px !important;
    overflow-y: auto !important;
  }

  /* QC Kanban - stack columns vertically on mobile */
  #qc-kanban-view .kanban-board {
    flex-direction: column !important;
    overflow-x: visible !important;
  }

  #qc-kanban-view .kanban-column {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #qc-kanban-view .kanban-column .column-content {
    max-height: 400px !important;
    overflow-y: auto !important;
  }

  /* Product tags - slightly taller on mobile for easier scrolling */
  #selected-products-tags,
  #pre-sale-selected-products,
  #ps-edit-product-tags {
    max-height: 120px !important;
  }

  /* Pre-sale detail modal - full width on mobile */
  #pre-sale-details-modal .modal-content.large {
    width: 95% !important;
    max-width: 95% !important;
    padding: 16px !important;
  }

  /* Pre-sale add modal - full width on mobile */
  #pre-sale-add-modal .modal-content {
    width: 95% !important;
    max-width: 95% !important;
  }

  /* Post-sale modal - proper scroll on mobile */
  #post-sale-modal .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
  }
  #post-sale-modal .modal-content > form {
    overflow: visible !important;
  }

  /* ===== Modals above hamburger menu ===== */
  .modal {
    z-index: 1100 !important;
  }

  /* ===== Lead Management Sub-Pages ===== */
  #active-leads-view:not([style*="display: none"]),
  #converted-leads-view:not([style*="display: none"]),
  #lost-leads-view:not([style*="display: none"]),
  #deleted-leads-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  /* ===== Pre-Sales Management Sub-Pages ===== */
  #active-pre-sales-view:not([style*="display: none"]),
  #converted-pre-sales-view:not([style*="display: none"]),
  #lost-pre-sales-view:not([style*="display: none"]),
  #deleted-pre-sales-view:not([style*="display: none"]),
  #pre-sales-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  /* ===== Pre-Sales Reports View ===== */
  #pre-sales-reports-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  #pre-sales-reports-view .list-card {
    padding: 12px !important;
  }

  #pre-sales-reports-view .daily-updates-table {
    font-size: 11px !important;
  }

  #pre-sales-reports-view .daily-updates-table th,
  #pre-sales-reports-view .daily-updates-table td {
    padding: 6px 8px !important;
  }

  /* Sales report period selector - stack on mobile */
  #pre-sales-reports-view [style*="display:flex"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #pre-sales-reports-view #sr-custom-dates {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* ===== Contacts/Customers View ===== */
  #contacts-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  /* ===== Post Sales Dashboard ===== */
  #post-sales-dashboard-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  #post-sales-dashboard-view:not([style*="display: none"]) .dashboard-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #post-sales-dashboard-view:not([style*="display: none"]) .dashboard-lists {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ===== Dashboard View ===== */
  #dashboard-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  #dashboard-view:not([style*="display: none"]) .dashboard-lists {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ===== View Headers with Branch Dropdown (flex-wrap) ===== */
  .view-header > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .view-header > div[style*="display:flex"] select {
    min-width: 120px !important;
    width: 100% !important;
  }

  .view-header > div[style*="display:flex"] h2 {
    width: 100% !important;
  }

  /* ===== View Header Buttons - Stack on Mobile ===== */
  .view-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .view-header > div {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .view-header .btn-primary,
  .view-header .btn-secondary {
    flex: 1 1 auto !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* ===== Deleted Post Sales - compact search box ===== */
  #deleted-post-sales-view .table-filters input[type="text"],
  #deleted-post-sales-view .table-filters input[type="search"] {
    min-height: 36px !important;
    height: 36px !important;
    flex: 0 0 auto !important;
  }

  /* ===== Deleted Post Sales View - auto height on mobile ===== */
  #deleted-post-sales-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  /* ===== Table Filters - Stack Vertically on All Pages ===== */
  .table-filters {
    flex-wrap: wrap !important;
  }

  .table-filters input[type="text"],
  .table-filters input[type="search"],
  .table-filters select,
  .table-filters input[type="date"]:not(.date-hidden) {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  .table-filters .btn-secondary,
  .table-filters button {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* ===== Dashboard Grid - Stack on Mobile ===== */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Force all inline grids inside view containers to stack on mobile */
  .view-container div[style*="grid-template-columns:1fr 1fr 1fr"],
  .view-container div[style*="grid-template-columns: 1fr 1fr 1fr"],
  .view-container div[style*="grid-template-columns:1fr 1fr;"],
  .view-container div[style*="grid-template-columns: 1fr 1fr;"],
  .view-container div[style*="grid-template-columns:repeat"] {
    grid-template-columns: 1fr !important;
  }

  /* ===== List Cards - Limit Height on Mobile ===== */
  .list-card {
    max-height: 500px !important;
    overflow-y: auto !important;
  }

  /* ===== Dashboard Date Filters (Expenses Dashboard) ===== */
  .dashboard-date-filter {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dashboard-date-filter select,
  .dashboard-date-filter input[type="date"]:not(.date-hidden) {
    width: 100% !important;
  }

  /* ===== Settings Views ===== */
  #settings-products-view:not([style*="display: none"]),
  #settings-product-categories-view:not([style*="display: none"]),
  #settings-stages-view:not([style*="display: none"]),
  #settings-priorities-view:not([style*="display: none"]),
  #settings-industries-view:not([style*="display: none"]),
  #settings-business-types-view:not([style*="display: none"]),
  #settings-expense-categories-view:not([style*="display: none"]),
  #settings-post-sale-types-view:not([style*="display: none"]),
  #settings-post-sale-statuses-view:not([style*="display: none"]),
  #settings-branches-view:not([style*="display: none"]),
  #settings-pre-sale-modes-view:not([style*="display: none"]),
  #settings-pre-sale-stages-view:not([style*="display: none"]),
  #settings-locations-view:not([style*="display: none"]),
  #settings-qc-checklist-view:not([style*="display: none"]),
  #settings-qc-statuses-view:not([style*="display: none"]),
  #settings-task-statuses-view:not([style*="display: none"]),
  #settings-task-types-view:not([style*="display: none"]) {
    height: auto !important;
    overflow-y: visible !important;
  }

  /* ===== Pagination on Mobile ===== */
  .pagination-container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 0 !important;
  }

  .pagination-container button {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* ===== Confirm Dialog on Mobile ===== */
  #confirm-dialog .confirm-dialog {
    min-width: auto !important;
    max-width: 90% !important;
    width: 90% !important;
  }

  /* ===== Toast on Mobile ===== */
  #toast-container {
    right: 10px !important;
    left: 10px !important;
  }

  .toast {
    min-width: auto !important;
    max-width: 100% !important;
  }

  /* Settings modals: fit content height, no blank space */
  #stage-modal .modal-content,
  #priority-modal .modal-content,
  #industry-modal .modal-content,
  #business-type-modal .modal-content,
  #expense-category-modal .modal-content,
  #post-sale-type-modal .modal-content,
  #post-sale-status-modal .modal-content,
  #branch-modal .modal-content,
  #product-category-modal .modal-content,
  #pre-sale-mode-modal .modal-content,
  #pre-sale-stage-modal .modal-content,
  #product-modal .modal-content {
    height: auto !important;
    max-height: fit-content !important;
  }

  /* Settings modals: center vertically on mobile */
  #stage-modal,
  #priority-modal,
  #industry-modal,
  #business-type-modal,
  #expense-category-modal,
  #post-sale-type-modal,
  #post-sale-status-modal,
  #branch-modal,
  #product-category-modal,
  #pre-sale-mode-modal,
  #pre-sale-stage-modal,
  #product-modal {
    align-items: center !important;
  }

  #stage-modal .modal-content form,
  #priority-modal .modal-content form,
  #industry-modal .modal-content form,
  #business-type-modal .modal-content form,
  #expense-category-modal .modal-content form,
  #post-sale-type-modal .modal-content form,
  #post-sale-status-modal .modal-content form,
  #branch-modal .modal-content form,
  #product-category-modal .modal-content form,
  #pre-sale-mode-modal .modal-content form,
  #pre-sale-stage-modal .modal-content form,
  #product-modal .modal-content form {
    max-height: none !important;
    overflow-y: visible !important;
    padding-bottom: 10px !important;
  }

  /* ===== QC Module Mobile ===== */
  #qc-entry-modal .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  #qc-entry-modal .form-row {
    flex-direction: column !important;
  }

  #qc-inspect-modal .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh !important;
  }

  #qc-inspect-modal .form-row {
    flex-direction: column !important;
  }

  /* QC checklist checkboxes - smaller on mobile */
  #qc-inspect-content input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
  }

  /* QC category toggle labels - compact on mobile */
  #qc-inspect-content [id^="qc-part-cats-"] label {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  #qc-inspect-content [id^="qc-part-cats-"] label span {
    font-size: 10px !important;
  }
  #qc-inspect-content [id^="qc-part-cats-"] input[type="checkbox"] {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
  }

  /* QC checklist item labels - compact on mobile */
  #qc-inspect-content [id^="qc-part-checklist-"] label {
    font-size: 12px !important;
    padding: 3px 0 !important;
  }

  /* QC inspection detail - single column on mobile */
  #qc-inspect-content .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    flex-direction: unset !important;
  }

  #qc-inspect-content .form-group {
    min-width: 0 !important;
  }

  #qc-inspect-content .view-label {
    display: block !important;
    font-size: 11px !important;
    color: #6B7280 !important;
    margin-bottom: 2px !important;
  }

  /* QC part name input - compact on mobile */
  #qc-inspect-content input[type="text"][placeholder*="Name this part"] {
    max-width: 120px !important;
    font-size: 11px !important;
    padding: 2px 4px !important;
  }

  /* QC part accordion header - wrap on mobile */
  #qc-inspect-content [style*="background:#f8fafc"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  #qc-active-view .table-filters,
  #qc-completed-view .table-filters {
    flex-direction: column !important;
    gap: 8px !important;
  }

  #qc-active-view .table-filters select,
  #qc-active-view .table-filters input,
  #qc-completed-view .table-filters select,
  #qc-completed-view .table-filters input {
    width: 100% !important;
    min-width: 0 !important;
  }

  #qc-dashboard-view .od-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* QC unlink buttons - compact on mobile */
  .qc-unlink-btn {
    min-height: auto !important;
    min-width: auto !important;
    height: auto !important;
    width: auto !important;
  }

  /* QC settings modals */
  #qc-checklist-modal .modal-content,
  #location-modal .modal-content {
    height: auto !important;
    max-height: fit-content !important;
  }

  #qc-checklist-modal,
  #location-modal {
    align-items: center !important;
  }

  #qc-checklist-modal .modal-content form,
  #location-modal .modal-content form {
    max-height: none !important;
    overflow-y: visible !important;
    padding-bottom: 10px !important;
  }
}

/* Tablet improvements */
@media (min-width: 769px) and (max-width: 1024px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tasks Kanban - 2 columns on tablet */
  #tasks-kanban-view .kanban-board {
    flex-wrap: wrap !important;
  }

  #tasks-kanban-view .kanban-column {
    flex: 0 0 calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
  }

  .main-nav {
    width: 220px;
  }

  /* Pre-Sales Kanban - 2 columns on tablet */
  #pre-sales-kanban-view .kanban-board {
    flex-wrap: wrap !important;
  }

  #pre-sales-kanban-view .kanban-column {
    flex: 0 0 calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
  }
}

/* Touch devices: kill all transitions so taps register instantly */
@media (hover: none) {
  * {
    transition: none !important;
  }
}