/* Inventory-specific responsive layout; every section and table column remains accessible. */ .inventory-page-actions { display: flex; flex-wrap: wrap; gap: 10px; } .inventory-page-actions .btn { margin-right: 0 !important; } .inventory-table-shell { min-width: 0; max-width: 100%; } .cage-inventory-page .cage-inventory-table th, .cage-inventory-page .cage-inventory-table td { padding: 12px !important; } .cage-inventory-page .cage-list-cell-main { min-width: 240px; } .cw-inventory-warning { max-width: 22rem; min-width: 12rem; margin-top: .35rem; color: #ffcc80; font-size: .82rem; line-height: 1.5; white-space: normal; } .cw-inventory-warning summary { cursor: pointer; width: fit-content; padding: .25rem 0; font-weight: 600; } .cw-inventory-warning summary:focus-visible { outline: 2px solid #8ab9ff; outline-offset: 2px; } .cw-inventory-warning > div { margin-top: .35rem; color: #d6deeb; overflow-wrap: break-word; } .cage-section-navigation { display: none; } #cageDetailsModal .cage-location-navigation { flex-wrap: wrap; gap: 10px; } #cageDetailsModal .cage-location-edit-button { position: static; width: auto; height: auto; min-height: 44px; padding: 8px 14px; } #cageDetailsModal .cage-grid-scroll { width: 100%; max-width: 100%; overflow-x: auto; padding-bottom: 8px; overscroll-behavior-x: contain; } #cageDetailsModal .cage-table { margin: 0 auto; } #cageDetailsModal .cage-slot-cell { width: 100px; height: 100px; min-width: 64px; border: 1px solid #111827; } #cageDetailsModal .cage-slot-label { padding: 25px 3px 5px; pointer-events: none; line-height: 1.2; } #cageDetailsModal .cage-slot-menu-button { inset: 0; width: 100%; height: 100%; min-height: 64px; border-radius: 0; background: transparent; font-size: 14px; color: inherit; line-height: normal; } #cageDetailsModal .cage-slot-menu-button:hover { background: rgba(10,18,35,.08); } #cageDetailsModal .cage-slot-menu-button:focus-visible { outline: 3px solid #1572e8; outline-offset: -3px; } .cage-slot-menu-button > i { position: absolute; top: 8px; right: 9px; color: #15233a; } .cage-slot-number { position: absolute; top: 7px; left: 7px; font-weight: 700; color: #15233a; font-size: 12px; } #cageDetailsModal .cage-slot-empty .cage-slot-menu-button > i, #cageDetailsModal .cage-slot-empty .cage-slot-number { color: #fff; } #cageDetailsModal .cage-slot-menu { top: 29px; } #cageDetailsModal .cage-slot-menu-item { min-height: 44px; } #cageDetailsModal .slot-note-body, #cageDetailsModal .slot-note-meta, #cageDetailsModal .slot-note-snapshot { overflow-wrap: anywhere; } #cageDetailsModal .inventory-history-scroll { max-width: 100%; overflow-x: auto; } .inventory-history-date { display: block; white-space: normal; } .inventory-history-date small { display: block; color: #c6d1e2; } #cageDetailsModal #settings .data-item { min-width: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); } #cageDetailsModal #settings .data-item > .row { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } #cageDetailsModal #settings .data-item > .row > .col { min-width: 0; padding: 0; gap: 6px; } #cageDetailsModal #settings .value { margin-left: 0 !important; overflow-wrap: anywhere; } #cageDetailsModal #settings .edit-input { width: 100%; min-width: 0; margin: 0 !important; } #cageDetailsModal #settings :is(.edit-btn,.confirm-btn,.cancel-btn) { min-width: 44px; min-height: 44px; margin: 0 !important; padding: 8px 12px; } #cageDetailsModal #settings .edit-btn { color: #c3d9ff !important; border: 1px solid #75a7eb !important; background: transparent !important; } #cageDetailsModal #settings .edit-btn:hover, #cageDetailsModal #settings .edit-btn:focus-visible { color: #fff !important; background: #225596 !important; } /* Keep cage configuration compact and revisions grouped by physical device. */ #cageDetailsModal .cage-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 28px; margin: 20px 0 28px; } #cageDetailsModal .cage-settings-grid h5 { font-size: 14px; color: #bac4d3; } #cageDetailsModal .cage-settings-grid .value { font-size: 16px; } #cageDetailsModal .cage-device-section-title { margin-bottom: 14px; } #cageDetailsModal .cage-device-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } #cageDetailsModal .cage-device-card { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(255,255,255,.025); } #cageDetailsModal .cage-device-card[hidden] { display: none; } #cageDetailsModal .cage-device-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; } #cageDetailsModal .cage-device-title { margin: 0; font-size: 16px; } #cageDetailsModal #settings .cage-transponder-identity { margin-bottom: 16px; padding: 0; border: 0; } #cageDetailsModal .cage-transponder-identity .row { margin-top: 8px !important; } #cageDetailsModal .cage-device-revisions { margin: auto 0 0; } #cageDetailsModal #settings .cage-device-revisions .data-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border: 0; } #cageDetailsModal .cage-device-revisions dt { color: #bac4d3; font-size: 13px; font-weight: 400; } #cageDetailsModal .cage-device-revisions dd { margin: 0; text-align: right; font-weight: 600; } @media (min-width: 768px) { #cageDetailsModal .cage-settings-grid, #cageDetailsModal .cage-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #cageDetailsModal .cage-setting-wide, #cageDetailsModal .has-expansion .cage-device-transponder { grid-column: 1 / -1; } } @media (min-width: 992px) { #cageDetailsModal .cage-device-grid.has-expansion { grid-template-columns: repeat(3, minmax(0, 1fr)); } #cageDetailsModal .has-expansion .cage-device-transponder { grid-column: auto; } } #vendorInventoryMap .mapboxgl-ctrl-group button, #singleCageMap .mapboxgl-ctrl-group button, #vendorInventoryMap .cagewatch-map-style-control button, #singleCageMap .cagewatch-map-style-control button { min-width: 44px; height: 44px; line-height: 44px; } .cagewatch-map-popup .mapboxgl-popup-close-button { width: 44px; height: 44px; top: 0; right: 0; } .cagewatch-map-popup { z-index: 4; } body.portal-shell #vendorInventoryMap .cagewatch-map-popup .btn-outline-primary { color: #165aa7 !important; border-color: #165aa7 !important; background: transparent !important; } body.portal-shell #vendorInventoryMap .cagewatch-map-popup .btn-outline-primary:hover, body.portal-shell #vendorInventoryMap .cagewatch-map-popup .btn-outline-primary:focus-visible { color: #fff !important; border-color: #165aa7 !important; background: #165aa7 !important; } body.portal-shell #vendorInventoryMap .cagewatch-map-popup .btn-outline-primary:focus-visible { outline: 2px solid #165aa7; outline-offset: 2px; } @media (max-width: 991.98px) { #cageDetailsModal .modal-dialog, #cageDetailsModal .modal-dialog.slot-tools-dialog-expanded { max-width: calc(100% - 32px); } #cageDetailsModal .modal-content { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); } #cageDetailsModal .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #cageDetailsModal .slot-tools-body { overscroll-behavior: contain; } .cage-inventory-page .inventory-page-actions { margin-top: 12px; } } @media (max-width: 767.98px) { .cage-inventory-page .inventory-page-actions .btn { flex: 1 1 150px; min-height: 44px; padding: 10px 14px; } .cage-inventory-page .cage-list-cell-main { min-width: 180px; width: 180px; } .cage-inventory-page .cage-list-identity { max-width: 220px; overflow-wrap: anywhere; white-space: normal; gap: 5px; } .cage-inventory-page .cage-mobile-details { display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 44px; } .cage-inventory-page :is(.cage-list-meta,.cage-list-subtitle,.cage-status-subtext) { color: #bac4d3; } #addCageModal .modal-dialog, #cageDetailsModal .modal-dialog, #cageDetailsModal .modal-dialog.slot-tools-dialog-expanded, #deleteCageConfirmationModal .modal-dialog, #cagePhotoViewerModal .modal-dialog { width: auto; max-width: none; margin: 8px; } #addCageModal .modal-content, #cageDetailsModal .modal-content, #deleteCageConfirmationModal .modal-content, #cagePhotoViewerModal .modal-content { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } #addCageModal .modal-body, #cageDetailsModal .modal-body, #deleteCageConfirmationModal .modal-body, #cagePhotoViewerModal .modal-body { min-height: 0; max-height: none; overflow-y: auto; padding: 14px; overscroll-behavior: contain; } #cageDetailsModal .modal-body > .container, #cageDetailsModal .modal-body > .container > .row > .col-md-12 { max-width: 100%; padding: 0; } #cageDetailsModal .modal-body > .container > .row { margin: 0; } #addCageModal .modal-header, #cageDetailsModal .modal-header, #cagePhotoViewerModal .modal-header, #deleteCageConfirmationModal .modal-header { padding: 12px 14px; align-items: center; } #addCageModal .modal-title, #cageDetailsModal .modal-title, #cagePhotoViewerModal .modal-title { font-size: 20px; min-width: 0; overflow-wrap: anywhere; } #addCageModal .close, #cageDetailsModal .close, #cagePhotoViewerModal .close, #deleteCageConfirmationModal .close { flex: 0 0 44px; width: 44px; height: 44px; margin: -6px -6px -6px 8px; padding: 0; } #addCageModal .modal-footer, #cageDetailsModal .modal-footer, #deleteCageConfirmationModal .modal-footer { flex: 0 0 auto; gap: 8px; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); } #addCageModal .modal-footer .btn, #cageDetailsModal .modal-footer .btn, #deleteCageConfirmationModal .modal-footer .btn { flex: 1 1 90px; margin: 0 !important; min-height: 44px; } #addCageModal .form-control, #cageDetailsModal .form-control { min-height: 44px; font-size: 16px; } #addCageModal .form-group { padding: 8px 0; margin-bottom: 6px; } #addCageModal .form-group.row { row-gap: 14px; margin-right: 0; margin-left: 0; } #addCageModal .form-group.row > [class*="col-"] { padding-right: 0; padding-left: 0; } #addCageModal .form-group.row > [class*="col-"] + [class*="col-"] { padding-left: 8px; } #addCageModal .inventory-assignment-option { padding: 10px 14px; min-height: 44px; } #addCageModal .inventory-assignment-option .form-check-label { display: block; padding-left: 28px; text-align: left; } #cageDetailsModal .cage-detail-tabs { display: none; } #cageDetailsModal .cage-section-navigation { display: block; margin-bottom: 14px; } #cageDetailsModal .cage-section-navigation label { display: block; margin-bottom: 6px; color: #c6d1e2; font-size: 13px; } #cageDetailsModal #overview > .card > .my-3 > .row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; gap: 8px; padding: 0 8px; } #cageDetailsModal #overview > .card > .my-3 > .row > .col { min-width: 0; padding: 0; } #cageDetailsModal #overview .card .col .row { margin: 0; max-width: 100%; } #cageDetailsModal #overview .card h5 { font-size: 13px; line-height: 1.3; text-align: center; } #cageDetailsModal #overview .card .data-item { margin: 4px 0 0 !important; max-width: 100%; text-align: center; overflow-wrap: anywhere; } #cageDetailsModal #overview .card .value { font-size: 16px; line-height: 1.4; } #cageDetailsModal .cage-table { width: 100%; table-layout: fixed; border-spacing: 4px; } #cageDetailsModal .cage-slot-cell { width: auto; height: 78px; } #cageDetailsModal .cage-slot-label { font-size: 12px; } #cageUpdateTime { font-size: 12px; line-height: 1.5; } #cageDetailsModal .cage-location-map { height: 44vh; height: 44svh; min-height: 240px; } #cageDetailsModal .cage-location-navigation > .btn { flex: 1 1 110px; min-height: 44px; } #cageDetailsModal .cage-location-edit-panel { flex-direction: column; align-items: stretch; gap: 10px; } #cageDetailsModal .cage-location-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } #cageDetailsModal .cage-location-actions .btn { min-height: 44px; } #cageDetailsModal #settings .data-item > .row:has(.edit-input) { grid-template-columns: minmax(0,1fr); } #cageDetailsModal #settings .data-item > .row:has(.edit-input) > .col:last-child { justify-content: flex-start !important; } #cageDetailsModal #settings .data-item > .row:has(.edit-input) .btn { flex: 1; } #cageDetailsModal .slot-tools-header { padding: 14px; align-items: flex-start; } #cageDetailsModal .slot-tools-header > div { min-width: 0; } #cageDetailsModal .slot-tools-subtitle { overflow-wrap: anywhere; } #cageDetailsModal .slot-tools-body { padding: 14px; } #cageDetailsModal .slot-tools-tabs { display: flex; flex-wrap: nowrap; } #cageDetailsModal .slot-tools-tabs > .nav-item { flex: 1; } #cageDetailsModal .slot-tools-tabs .nav-link { min-height: 44px; padding: 10px 8px; text-align: center; } #cageDetailsModal .slot-history-canvas-wrap { height: 260px; } #cageDetailsModal .slot-history-threshold-key { gap: 8px; } #cageDetailsModal .slot-note-card-header { flex-wrap: wrap; } #cageDetailsModal :is(.slot-note-form-footer,.slot-note-card-header) .btn { min-height: 44px; } #cageDetailsModal .slot-note-count { margin-right: auto; } #cageDetailsModal #cage-history-datatable th, #cageDetailsModal #cage-history-datatable td { padding: 10px 6px !important; white-space: normal; font-size: 13px; overflow-wrap: anywhere; } #cageDetailsModal #cage-history-datatable td:first-child { width: 32px; } #cageDetailsModal #cage-history-datatable .avatar { width: 28px; height: 28px; font-size: 12px; } #cageDetailsModal #cage-history-datatable td:last-child { min-width: 80px; } #cageDetailsModal #cage-reminder-panel { padding: 0 !important; } #cageDetailsModal #cage-reminder-panel .btn { min-height: 44px; white-space: normal; } #cageDetailsModal #cage-reminder-panel .form-row { row-gap: 8px; } #cageDetailsModal #cage-reminder-preview { padding: 12px !important; } #cageDetailsModal #cage-reminder-preview .btn { margin-top: 8px; width: 100%; } #cageDetailsModal .cw-photo-gallery button, #cagePhotoViewerModal .cw-photo-gallery button { min-height: 44px; flex-shrink: 0; } .inventory-map-page .card-body { padding: 12px; } .inventory-map-page #vendorInventoryMap { height: 62vh; height: 62svh; min-height: 360px; border-radius: 8px; } .cagewatch-map-popup .inventory-map-popup-body { padding: 16px 12px 8px; } .cagewatch-map-popup .inventory-map-popup h3 { font-size: 17px; margin-right: 30px; } .cagewatch-map-popup .inventory-map-popup-customer { margin-right: 30px; } .cagewatch-map-popup .inventory-map-popup-metrics { gap: 4px; } .cagewatch-map-popup .inventory-map-popup-metrics strong { font-size: 18px; } .cagewatch-map-popup .inventory-map-popup-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px 12px; } .cagewatch-map-popup .inventory-map-popup-actions .btn { min-height: 44px; padding: 10px 6px; margin: 0; font-size: 12px; white-space: normal; } .cagewatch-map-popup .inventory-map-popup-actions .btn:nth-child(3) { grid-column: 1 / -1; } }