/* ============================================================
   Pulse Mobile Responsive Styles
   Applied via CSS media queries + body class overrides
   
   Strategy:
   - @media (max-width: 767px) rules auto-activate on mobile
   - body.force-desktop overrides mobile rules (user toggle)
   - body.force-mobile applies mobile rules on desktop (user toggle)
   
   Tables with class .grid-table transform into card lists on mobile.
   Each <td> should have a data-label attribute for the card key.
   Primary column uses class .primary-cell (no label, bold link).
   Description columns use class .description-cell (2-line clamp).
   Hidden columns: .pk-col, .created-col, .usage-col
   
   See PRD_MobileImprove.md for full specification.
   ============================================================ */

/* --- Auto-detect Mobile (viewport ≤ 767px) --- */
@media (max-width: 767px) {

  /* --- Table → Card Transformation --- */
  body:not(.force-desktop) .grid-table thead {
    display: none;
  }

  body:not(.force-desktop) .grid-table tbody tr {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E5E5EA;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  body:not(.force-desktop) .grid-table tbody tr:hover {
    background: #F9F9FB;
  }

  body:not(.force-desktop) .grid-table tbody tr.even-row {
    background: #FFFFFF;
  }

  body:not(.force-desktop) .grid-table tbody td {
    display: block;
    padding: 2px 0;
    border: none;
  }

  /* Apply label prefix before each cell value */
  body:not(.force-desktop) .grid-table tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    font-size: 12px;
    color: #636366;
  }

  /* Primary column — no label, bold link style */
  body:not(.force-desktop) .grid-table tbody td.primary-cell::before {
    content: none;
  }

  body:not(.force-desktop) .grid-table tbody td.primary-cell {
    font-size: 16px;
    font-weight: 600;
    color: #007AFF;
    margin-bottom: 4px;
  }

  body:not(.force-desktop) .grid-table tbody td.primary-cell a {
    color: #007AFF;
    text-decoration: none;
  }

  body:not(.force-desktop) .grid-table tbody td.primary-cell a:hover {
    text-decoration: underline;
    color: #0051D5;
  }

  /* Description cell — 2-line clamp */
  body:not(.force-desktop) .grid-table tbody td.description-cell::before {
    content: none;
  }

  body:not(.force-desktop) .grid-table tbody td.description-cell {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    color: #1C1C1E;
    margin: 4px 0;
  }

  /* Tags cell — flex wrap */
  body:not(.force-desktop) .grid-table tbody td.tags-cell::before {
    content: none;
  }

  body:not(.force-desktop) .grid-table tbody td.tags-cell {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    width: auto;
    min-width: 0;
  }

  /* Link/file cell — compact badge */
  body:not(.force-desktop) .grid-table tbody td.link-file-cell::before {
    content: none;
  }

  body:not(.force-desktop) .grid-table tbody td.link-file-cell {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #636366;
    background: #E8F4FF;
    padding: 2px 8px;
    border-radius: 3px;
    margin-top: 4px;
  }

  /* Hide low-priority columns on mobile */
  body:not(.force-desktop) .grid-table .pk-col,
  body:not(.force-desktop) .grid-table .created-col,
  body:not(.force-desktop) .grid-table .usage-col,
  body:not(.force-desktop) .grid-table .col-updated,
  body:not(.force-desktop) .grid-table .link-file-col {
    display: none;
  }

  /* Remove table borders between cells in card mode */
  body:not(.force-desktop) .grid-table tbody td,
  body:not(.force-desktop) .grid-table tbody th {
    border: none;
  }

  /* --- Filter Bar Stacking --- */
  body:not(.force-desktop) .controls,
  body:not(.force-desktop) .filter-bar {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  body:not(.force-desktop) .controls select,
  body:not(.force-desktop) .controls input[type="text"],
  body:not(.force-desktop) .controls input[type="search"],
  body:not(.force-desktop) .controls .search-input,
  body:not(.force-desktop) .controls .filter-select,
  body:not(.force-desktop) .filter-bar select,
  body:not(.force-desktop) .filter-bar input[type="text"],
  body:not(.force-desktop) .filter-bar input[type="search"],
  body:not(.force-desktop) .filter-bar .search-input,
  body:not(.force-desktop) .filter-bar .filter-select {
    width: 100%;
    min-width: unset;
    box-sizing: border-box;
  }

  body:not(.force-desktop) .controls button,
  body:not(.force-desktop) .controls .btn,
  body:not(.force-desktop) .filter-bar button,
  body:not(.force-desktop) .filter-bar .btn {
    width: 100%;
    box-sizing: border-box;
  }

  body:not(.force-desktop) .filter-bar a {
    display: inline-block;
    text-align: center;
  }

  /* --- Container Full Width --- */
  body:not(.force-desktop) .container {
    padding: 8px 12px;
  }

  /* --- Page Heading --- */
  body:not(.force-desktop) h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  body:not(.force-desktop) h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  /* --- Modal Responsive --- */
  body:not(.force-desktop) [id^="editDialog"],
  body:not(.force-desktop) .modal-style {
    min-width: unset !important;
    width: 95vw !important;
    max-width: unset !important;
    left: 2.5vw !important;
    transform: none !important;
    top: 10px !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* --- Modal Overlay --- */
  body:not(.force-desktop) #overlay {
    -webkit-overflow-scrolling: touch;
  }

  /* --- Pagination Compact --- */
  body:not(.force-desktop) .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  body:not(.force-desktop) .pagination a,
  body:not(.force-desktop) .pagination span {
    padding: 6px 10px;
    font-size: 13px;
  }

  /* --- Touch-friendly Buttons --- */
  body:not(.force-desktop) button,
  body:not(.force-desktop) .btn,
  body:not(.force-desktop) a.btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* --- Back Links --- */
  body:not(.force-desktop) .back-link {
    font-size: 14px;
    margin-bottom: 8px;
  }

  /* --- Custom Multiselect on Mobile --- */
  body:not(.force-desktop) .custom-multiselect {
    width: 100%;
  }

  body:not(.force-desktop) .custom-multiselect-dropdown {
    max-height: 200px;
    overflow-y: auto;
  }

  /* --- Table Scroll Wrapper (for force-desktop on mobile) --- */
  body:not(.force-desktop) .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Mobile ID Badge (inline with tags) --- */
  body:not(.force-desktop) .mobile-id-badge {
    display: inline-flex;
    padding: 2px 8px;
    background-color: #F0F0F5;
    color: #636366;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  

  /* --- Status Badges on Mobile --- */
  body:not(.force-desktop) .tag-badge {
    display: inline-flex;
    padding: 2px 8px;
    background-color: #E8F4FF;
    color: #417690;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
  }

  /* --- Legacy Row (pink bg) override for cards --- */
  body:not(.force-desktop) .grid-table tbody tr.legacy-row {
    background: #FFFFFF;
    border-left: 3px solid #FF3B30;
  }

  body:not(.force-desktop) .grid-table tbody tr.legacy-row:hover {
    background: #FFF5F5;
  }

  /* --- Archived Row (grey/opaque) override for cards --- */
  body:not(.force-desktop) .grid-table tbody tr.archived-row,
  body:not(.force-desktop) .grid-table tbody tr[style*="opacity"] {
    opacity: 0.7;
  }
}

/* --- Mobile-only badges: hidden on desktop, shown on mobile via body:not(.force-desktop) --- */
.mobile-id-badge {
  display: none;
}

.mobile-source-badge {
  display: none;
}

/* --- Force Desktop Override --- */
body.force-desktop .grid-table thead {
  display: table-header-group;
}

body.force-desktop .grid-table tbody tr {
  display: table-row;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

body.force-desktop .grid-table tbody td {
  display: table-cell;
  padding: 4px 10px;
  border: 1px solid #E5E5EA;
}

body.force-desktop .grid-table tbody td::before {
  content: none;
}

body.force-desktop .grid-table .pk-col,
body.force-desktop .grid-table .created-col,
body.force-desktop .grid-table .usage-col {
  display: table-cell;
}

body.force-desktop .controls,
body.force-desktop .filter-bar {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Ensure force-desktop has horizontal scroll for tables */
body.force-desktop .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Force Mobile Override --- */
body.force-mobile .grid-table thead {
  display: none;
}

body.force-mobile .grid-table tbody tr {
  display: block;
  background: #FFFFFF;
  border: 1px solid #E5E5EA;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.force-mobile .grid-table tbody tr:hover {
  background: #F9F9FB;
}

body.force-mobile .grid-table tbody td {
  display: block;
  padding: 2px 0;
  border: none;
}

body.force-mobile .grid-table tbody td::before {
  content: attr(data-label) ": ";
  font-weight: 600;
  font-size: 12px;
  color: #636366;
}

body.force-mobile .grid-table tbody td.primary-cell::before {
  content: none;
}

body.force-mobile .grid-table tbody td.primary-cell {
  font-size: 16px;
  font-weight: 600;
  color: #007AFF;
  margin-bottom: 4px;
}

body.force-mobile .grid-table tbody td.primary-cell a {
  color: #007AFF;
  text-decoration: none;
}

body.force-mobile .grid-table tbody td.primary-cell a:hover {
  text-decoration: underline;
  color: #0051D5;
}

body.force-mobile .grid-table tbody td.description-cell::before {
  content: none;
}

body.force-mobile .grid-table tbody td.description-cell {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: #1C1C1E;
  margin: 4px 0;
}

body.force-mobile .grid-table tbody td.tags-cell::before {
  content: none;
}

body.force-mobile .grid-table tbody td.tags-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  width: auto;
  min-width: 0;
}

body.force-mobile .grid-table tbody td.link-file-cell::before {
  content: none;
}

body.force-mobile .grid-table tbody td.link-file-cell {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #636366;
  background: #E8F4FF;
  padding: 2px 8px;
  border-radius: 3px;
  margin-top: 4px;
}

  body.force-mobile .grid-table .pk-col,
  body.force-mobile .grid-table .created-col,
  body.force-mobile .grid-table .usage-col,
  body.force-mobile .grid-table .col-updated,
  body.force-mobile .grid-table .link-file-col {
    display: none;
  }

body.force-mobile .grid-table tbody td,
body.force-mobile .grid-table tbody th {
  border: none;
}

body.force-mobile .controls,
body.force-mobile .filter-bar {
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

body.force-mobile .controls select,
body.force-mobile .controls input[type="text"],
body.force-mobile .controls input[type="search"],
body.force-mobile .controls .search-input,
body.force-mobile .controls .filter-select,
body.force-mobile .filter-bar select,
body.force-mobile .filter-bar input[type="text"],
body.force-mobile .filter-bar input[type="search"],
body.force-mobile .filter-bar .search-input,
body.force-mobile .filter-bar .filter-select {
  width: 100%;
  min-width: unset;
  box-sizing: border-box;
}

body.force-mobile .controls button,
body.force-mobile .controls .btn,
body.force-mobile .filter-bar button,
body.force-mobile .filter-bar .btn {
  width: 100%;
  box-sizing: border-box;
}

body.force-mobile .filter-bar a {
  display: inline-block;
  text-align: center;
}

body.force-mobile .container {
  padding: 8px 12px;
}

body.force-mobile [id^="editDialog"],
body.force-mobile .modal-style {
  min-width: unset !important;
  width: 95vw !important;
  max-width: unset !important;
  left: 2.5vw !important;
  transform: none !important;
  top: 10px !important;
  max-height: 90vh;
  overflow-y: auto;
}

body.force-mobile .pagination {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

body.force-mobile .mobile-source-badge {
  display: inline-flex;
  padding: 2px 8px;
  background-color: #ECEEF4;
  color: #5B6178;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.force-mobile .mobile-id-badge {
  display: inline-flex;
  padding: 2px 8px;
  background-color: #F0F0F5;
  color: #636366;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.force-mobile .tag-badge {
  display: inline-flex;
  padding: 2px 8px;
  background-color: #E8F4FF;
  color: #417690;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

/* --- Compact Detail View (Mobile) --- */
@media (max-width: 767px) {
  body:not(.force-desktop) .detail-view {
    padding: 16px;
  }

  body:not(.force-desktop) .detail-view .detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
  }

  body:not(.force-desktop) .detail-view .detail-label {
    font-weight: 600;
    font-size: 12px;
    color: #636366;
  }

  body:not(.force-desktop) .detail-view .detail-value {
    font-size: 14px;
    color: #1C1C1E;
  }

  body:not(.force-desktop) .detail-view .detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
  }

  body:not(.force-desktop) .detail-view .detail-actions button,
  body:not(.force-desktop) .detail-view .detail-actions a.btn {
    width: 100%;
    box-sizing: border-box;
  }
}