/* Prevent horizontal page scroll site-wide; only inner scroll containers (e.g. ticket table) scroll */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Icon color utilities */
.icon-green { fill: #22c55e; }
.icon-red   { fill: #ef4444; }
.icon-gray  { fill: #9ca3af; }

html.dark .icon-green { fill: #4ade80; } /* brighter in dark */
html.dark .icon-red   { fill: #f97373; }
html.dark .icon-gray  { fill: #d1d5db; }

/* Map page styles */
/* Ensure proper layout within base template constraints */
.map-container {
    min-height: 400px;
    max-width: 100%;
}

.map-wrapper {
    position: relative;
}

/* Prevent any overflow issues that could push footer off-screen */
#map {
    max-width: 100%;
    background-color: #f0f0f0;
}

/* Keep Leaflet attribution but make it smaller */
.leaflet-control-attribution {
    font-size: 10px;
    background-color: rgba(255, 255, 255, 0.8);
}

/* Style the layer control */
.leaflet-control-layers {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-family: inherit;
}

.leaflet-control-layers-expanded {
    padding: 10px 12px;
    min-width: 150px;
}

.leaflet-control-layers label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 4px 0;
}

.leaflet-control-layers input[type="radio"] {
    margin-right: 8px;
    cursor: pointer;
}

.leaflet-control-layers-separator {
    margin: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Custom camera marker styling */
.custom-camera-marker {
    background: none !important;
    border: none !important;
}

/* Popup styling improvements */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.leaflet-popup-content {
    margin: 12px;
    line-height: 1.4;
}

/* Combined controls panel */
.combined-control {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    min-width: 220px;
    pointer-events: auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.combined-control.minimized {
    min-width: auto;
    width: auto;
    padding: 12px;
}

.combined-control.minimized .control-content {
    display: none;
}

.control-toggle-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1002;
    transition: opacity 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-toggle-btn img,
.control-toggle-btn svg {
    height: 20px;
    width: 20px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.control-toggle-btn:hover img,
.control-toggle-btn:hover svg {
    opacity: 1;
}

.toggle-icon {
    display: block;
}

.combined-control.minimized .control-toggle-btn {
    position: static;
    display: block;
}

.control-content {
    padding-right: 32px;
}

/* Hide mobile message on desktop */
.edit-mode-mobile-message {
    display: none;
}

.combined-control label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.transparency-slider {
    width: 100%;
    margin-bottom: 8px;
}

/* Section separator within combined control */
.control-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.control-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.edit-toggle-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin: 0 auto;
    display: block;
    width: 100%;
    transition: background-color 0.2s;
}

.edit-toggle-btn:hover {
    background-color: #0056b3;
}

.edit-toggle-btn.active {
    background-color: #dc3545;
}

.edit-mode-controls {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.edit-mode-controls.active {
    display: block;
}

.control-group {
    margin-bottom: 10px;
}

.control-group label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
}

.control-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 11px;
}

.control-row {
    display: flex;
    gap: 8px;
}

.control-row .control-input {
    flex: 1;
}

.save-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
}

.save-btn:hover {
    background-color: #1e7e34;
}

.undo-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
}

.undo-btn:hover:not(:disabled) {
    background-color: #5a6268;
}

.undo-btn:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/* Edit mode visual indicators */
.image-overlay-editing {
    border: 3px dashed #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3) !important;
}

.corner-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #007bff;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1002;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.corner-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
.corner-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
.corner-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.corner-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }

/* Camera List Panel Styles */
.camera-list-panel {
    width: 300px;
    background: white;
    border-left: 1px solid #ddd;
    overflow-y: auto;
    padding: 15px;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

html.dark .camera-list-panel {
    background: #1a1a1a;
    border-left: 1px solid #444;
}

.filter-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.7;
}

.filter-btn.active {
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.filter-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.camera-item {
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

html.dark .camera-item {
    border: 1px solid #444;
    background: #2a2a2a;
}

.camera-item:hover {
    background: #e9ecef;
    border-color: #007bff;
    transform: translateX(2px);
}

html.dark .camera-item:hover {
    background: #333;
    border-color: #007bff;
}

.camera-item.has-alerts {
    border-left: 4px solid #ff8800;
}

.camera-name {
    font-weight: bold;
    color: #333;
    font-size: 13px;
    margin-bottom: 4px;
}

html.dark .camera-name {
    color: #e5e7eb;
}

.camera-location {
    color: #666;
    font-size: 11px;
    margin-bottom: 4px;
}

html.dark .camera-location {
    color: #9ca3af;
}

.camera-status {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.camera-alerts {
    color: #ff8800;
    font-weight: bold;
}

.camera-coords {
    color: #888;
    font-family: monospace;
}

html.dark .camera-coords {
    color: #9ca3af;
}

/* Camera list panel title and controls */
.camera-list-panel h4 {
    margin: 0;
    color: #333;
    font-size: 16px;
}

html.dark .camera-list-panel h4 {
    color: #e5e7eb;
}

.camera-list-panel input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: white;
}

html.dark .camera-list-panel input[type="text"] {
    border: 1px solid #555;
    color: #e5e7eb;
    background: #2a2a2a;
}

.camera-list-panel input[type="text"]::placeholder {
    color: #999;
}

html.dark .camera-list-panel input[type="text"]::placeholder {
    color: #666;
}

#alertListMessage {
    font-size: 13px;
    color: #666;
    text-align: center;
    padding: 10px 5px;
}

html.dark #alertListMessage {
    color: #9ca3af;
}

/* Layer selection buttons */
.layer-buttons {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.layer-btn {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.layer-btn:hover {
    background-color: #e9ecef;
    border-color: #007bff;
}

.layer-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .map-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: calc(100vh - 160px);
        gap: 0 !important;
    }
    
    #map,
    .map-wrapper {
        flex: none !important;
        width: 100% !important;
        height: 50vh !important;
        min-height: 300px;
        max-height: 500px;
    }
    
    .camera-list-panel {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #ddd !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-height: calc(50vh - 20px);
        min-height: 200px;
    }

    html.dark .camera-list-panel {
        border-top: 1px solid #444 !important;
    }
    
    .combined-control {
        top: 5px !important;
        right: 5px !important;
        left: auto !important;
        min-width: auto !important;
        max-width: calc(100% - 10px);
        padding: 12px !important;
        font-size: 11px;
    }
    
    .combined-control.minimized {
        left: auto !important;
        right: 5px !important;
        padding: 12px !important;
    }
    
    .control-toggle-btn {
        top: 8px !important;
        right: 8px !important;
        padding: 4px !important;
    }
    
    .control-toggle-btn img,
    .control-toggle-btn svg {
        height: 18px !important;
        width: 18px !important;
    }
    
    .control-content {
        padding-right: 32px !important;
    }
    
    .combined-control label {
        font-size: 11px !important;
    }
    
    .layer-btn {
        font-size: 10px !important;
        padding: 5px 6px !important;
    }
    
    .transparency-slider {
        margin-bottom: 6px !important;
    }
    
    .control-section {
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
    }
    
    .edit-toggle-btn,
    .save-btn,
    .undo-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
    
    /* Hide Edit Mode button on mobile, show message instead */
    .edit-toggle-btn {
        display: none !important;
    }
    
    .edit-mode-mobile-message {
        display: block !important;
    }
    
    .edit-mode-controls {
        display: none !important;
    }
    
    .edit-mode-mobile-message {
        margin-top: 8px;
    }
    
    .edit-mode-mobile-message div {
        text-align: center;
        line-height: 1.5;
    }
    
    .camera-item {
        padding: 8px !important;
    }
    
    .camera-name {
        font-size: 12px !important;
    }
    
    .camera-location {
        font-size: 10px !important;
    }
    
    .camera-status {
        font-size: 9px !important;
    }
    
    .filter-btn {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
    
    #cameraFilter {
        font-size: 13px !important;
        padding: 6px !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    #map,
    .map-wrapper {
        height: 40vh !important;
        min-height: 250px;
    }
    
    .camera-list-panel {
        max-height: calc(60vh - 20px);
    }
    
    .combined-control {
        padding: 6px !important;
        font-size: 10px !important;
    }
    
    .layer-btn {
        font-size: 9px !important;
        padding: 4px 5px !important;
    }
}

/* Base template styles */
[x-cloak] {
    display: none !important;
}

/* Alerts: Large thumbnails toggle (2x size) */
#alertsPageRoot.enlarge-thumbs .alert-thumb--table {
    width: calc(5rem * 2) !important;   /* w-20 = 5rem -> 10rem */
    height: calc(3.5rem * 2) !important; /* h-14 = 3.5rem -> 7rem */
}
#alertsPageRoot.enlarge-thumbs .alert-thumb--card {
    width: calc(3.5rem * 2) !important;  /* w-14 = 3.5rem -> 7rem */
    height: calc(3.5rem * 2) !important; /* h-14 = 3.5rem -> 7rem */
}

/* Hide scrollbar on mobile off-canvas sidebar (scroll still works) */
#mobile-sidebar,
#mobile-sidebar > div {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#mobile-sidebar::-webkit-scrollbar,
#mobile-sidebar > div::-webkit-scrollbar {
    display: none;
}

/* Add notch-safe spacing above navbar in iOS Capacitor app */
@media (max-width: 767px) {
    .content-wrapper.capacitor-mobile.capacitor-ios > .w-full:first-child {
        margin-top: 2.5rem;
    }
}

/* Android Capacitor app spacing can be tuned separately if needed */
@media (max-width: 767px) {
    .content-wrapper.capacitor-mobile.capacitor-android > .w-full:first-child {
        margin-top: 0;
    }
}

/* Rules engine page: make button container wide enough to fit both buttons on mobile */
@media (max-width: 767px) {
    .rules-engine-top-actions {
        min-width: max-content !important;
        width: max-content !important;
        max-width: none !important;
        overflow-x: visible !important;
    }
    .rules-engine-top-actions > div:first-child {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        min-width: max-content !important;
        width: max-content !important;
        max-width: none !important;
        overflow-x: visible !important;
    }
    .rules-engine-top-actions > div:first-child > button,
    .rules-engine-top-actions > div:first-child > span {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .rules-engine-top-actions > div:first-child > button + button,
    .rules-engine-top-actions > div:first-child > button + span,
    .rules-engine-top-actions > div:first-child > span + button,
    .rules-engine-top-actions > div:first-child > span + span {
        margin-left: 0 !important;
    }
    .rules-engine-top-actions > div:first-child > span {
        display: inline-flex !important;
    }
    .rules-engine-top-actions > div:first-child > span > button,
    .rules-engine-top-actions > div:first-child > button {
        width: max-content !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

/* Alerts page: on mobile, show Manage Folders only above alerts section; hide from top bar */
@media (max-width: 767px) {
    .manage-folders-desktop {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .manage-folders-mobile-wrapper {
        display: none !important;
    }
}

/* Manage Folders modal (alerts page): mobile – wider modal, Add button not cut off */
@media (max-width: 767px) {
    /* Widen modal: positioning wrapper full viewport width with padding; override Tailwind max-w-* */
    #manageTagsModal > div.relative.mx-auto {
        max-width: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box !important;
    }
    /* Card: reduce horizontal margin so modal uses the padded area */
    #manageTagsModal > div.relative.mx-auto > div {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    #manageTagsModal div.space-y-3 > div.flex.gap-2 {
        flex-wrap: nowrap;
        min-width: 0;
    }
    #manageTagsModal div.space-y-3 > div.flex.gap-2 > input {
        min-width: 0;
        flex: 1 1 0%;
    }
    #manageTagsModal div.space-y-3 > div.flex.gap-2 > button {
        flex-shrink: 0 !important;
        min-width: max-content !important;
    }
}

/* Manage Folders modal: folder list constrained to modal width – nothing cut off */
#manageTagsModal #tagsList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}
#manageTagsModal #tagsList > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
#manageTagsModal #tagsList > div > div:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 0% !important;
    width: auto !important;
}
#manageTagsModal #tagsList > div > div:last-child {
    flex-shrink: 0 !important;
    width: auto !important;
}

/* Manage Folders modal: inset focus ring so it is not clipped by overflow-hidden */
#manageTagsModal input:focus,
#manageTagsModal input:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #3b82f6 !important;
}
.dark #manageTagsModal input:focus,
.dark #manageTagsModal input:focus-visible {
    box-shadow: inset 0 0 0 2px #60a5fa !important;
}

/* Folder Details (shareTagModal): mobile – constrain to modal width, everything visible */
@media (max-width: 767px) {
    #shareTagModal > div.relative.mx-auto {
        max-width: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box !important;
    }
    #shareTagModal > div.relative.mx-auto > div {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    #shareTagModal #shareMembersList,
    #shareTagModal #shareAddSection,
    #shareTagModal #shareSearchResults {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    #shareTagModal #shareAddSection > div.flex.items-center.gap-2 {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }
    #shareTagModal #shareAddSection > div.flex.items-center.gap-2 > input {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #shareTagModal #shareAddSection > div.flex.items-center.gap-2 > select,
    #shareTagModal #shareAddSection > div.flex.items-center.gap-2 > button {
        flex-shrink: 0 !important;
        width: auto !important;
    }
}
#shareTagModal input:focus,
#shareTagModal input:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #3b82f6 !important;
}
.dark #shareTagModal input:focus,
.dark #shareTagModal input:focus-visible {
    box-shadow: inset 0 0 0 2px #60a5fa !important;
}

/* Archived Rules modal: keep Prev/Next compact (proportional to text) */
#archivedRulesModal button[onclick*="archivedRulesChangePage"] {
    min-height: auto !important;
    padding: 0.125rem 0.375rem !important;
}

/* Rule detail modal: three buttons identical size, same line as title (mobile only) */
@media (max-width: 1024px) {
    #ruleDetailModal div:has(#ruleDetailMoreBtn) {
        flex-wrap: nowrap;
        align-items: center;
    }
    #ruleDetailModal #ruleDetailMoreBtn,
    #ruleDetailModal #ruleDetailEditBtn,
    #ruleDetailModal #archiveAlertModalBtn {
        min-height: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.25;
    }
}

/* Define Regions (ROI) modal: stack Include/Exclude/Reset vertically on mobile */
@media (max-width: 767px) {
    .roi-toolbar-modes {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}

/* Define Regions (ROI) modal: keep Prev/Next compact (match page counter height); override any global button min-height */
#roiDesignerModal div.flex.flex-col.gap-1 > div.flex.items-center.gap-2 > button {
    min-height: auto !important;
    height: auto !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    align-self: auto !important;
}

/* Create rule modal – Step 1 Type section: wrap vertically on mobile */
@media (max-width: 767px) {
    #ruleTypeWrap {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    #ruleTypeWrap > label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* Rules engine top bar: buttons sized to content (text + icon), left-aligned, minimal gap – mobile only (legacy class) */
@media (max-width: 767px) {
    .rules-engine-top-bar {
        align-items: center;
        justify-content: flex-start !important;
        gap: 0;
        overflow: visible !important;
    }
    .rules-engine-top-bar > div:first-child {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.25rem !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    /* Each button (or wrapper) takes equal width so text doesn’t wrap */
    .rules-engine-top-bar > div:first-child > button,
    .rules-engine-top-bar > div:first-child > span {
        flex: none !important;
        width: auto !important;
        min-width: min-content !important;
    }
    .rules-engine-top-bar > div:first-child > span {
        display: inline-flex !important;
        overflow: visible !important;
    }
    .rules-engine-top-bar > div:first-child > span > button {
        width: auto !important;
        min-width: min-content !important;
    }
    .rules-engine-top-bar button {
        padding: 0.375rem 0.5rem !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
}

/* Add padding above page title (H2) on mobile */
@media (max-width: 767px) {
    /* Add top padding to the page title (H2) in mobile header */
    /* Target the h2 with text-center and text-2xl classes in mobile header */
    h2.text-center.text-2xl.font-semibold {
        padding-top: 1.5rem !important;
    }
    
    /* Fix header buttons - override the min-height rule that affects other buttons */
    /* Target buttons in the mobile header specifically (header is in partials/header.html) */
    /* The header structure: div.space-y-2 > div.flex.items-center.gap-2 > buttons */
    /* This targets the header buttons without affecting users page buttons */
    div.space-y-2:not(.bg-gray-100):not([class*="bg-gray"]) > div.flex.items-center.gap-2 > button,
    div.space-y-2:not(.bg-gray-100):not([class*="bg-gray"]) > div.flex.items-center.gap-2 > a {
        min-height: auto !important;
        height: auto !important;
        align-self: auto !important;
    }
}

/* Homepage mini-map styles */
.home-quick-btn {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.62rem 0.75rem;
    transition: background-color 120ms ease, color 120ms ease;
}

.home-quick-btn-primary {
    background: #1aa7f3;
    color: #ffffff;
}

.home-quick-btn-primary:hover {
    background: #1197e0;
}

.home-quick-btn-secondary {
    background: #e7f5fd;
    color: #157bb5;
}

.home-quick-btn-secondary:hover {
    background: #d7edf9;
}

.minimap-container {
    position: relative;
    height: 100%;
    width: 100%;
}

.minimap-container #minimap {
    height: 100%;
    width: 100%;
    cursor: pointer;
}

/* Tiny attribution */
.minimap-container .leaflet-control-attribution {
    font-size: 8px;
    background-color: rgba(255, 255, 255, 0.74);
    color: #4b5563;
    padding: 0 4px;
}

/* Camera marker styling */
.minimap-camera-marker {
    background: none !important;
    border: none !important;
}

/* Homepage camera status banner styles */
.camera-status-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f7f8fa;
    border: 1px solid #e3e7ec;
    border-radius: 0.75rem;
    /* height set dynamically in marquee mode; natural height in no-marquee */
}

.camera-status-track {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    white-space: nowrap;
    gap: 8px;
    padding: 8px;
    will-change: transform;
    animation: marquee 320s linear infinite;
}

.camera-status-banner:hover .camera-status-track {
    animation-play-state: paused;
}

/* Disable animation & absolute positioning when we don't need marquee */
.camera-status-banner.no-marquee .camera-status-track {
    position: static;
    animation: none;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 8px;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.cam-card {
    display: inline-block;
    min-width: 180px;
    max-width: 200px;
    border-radius: 0.55rem;
    border: 1px solid;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    background: #ffffff;
}

.cam-card .title {
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.05rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cam-card .sub {
    margin-top: 2px;
    font-size: 0.69rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cam-icons {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    align-items: center;
}

/* Light theme status backgrounds */
.cam-up     { background: #effaf1; border-color: #b7e2c1; }
.cam-down   { background: #fff1f2; border-color: #fecdd3; }
.cam-partial{ background: #fff7ed; border-color: #fed7aa; }
.cam-unk    { background: #f3f4f6; border-color: #e5e7eb; }

/* SVG icon sizing + color tokens */
.sig {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: #4b5563;
}

.sig svg {
    width: 13px;
    height: 13px;
}

/* Optional: reduce card width on small screens */
@media (max-width: 640px) {
    .cam-card { 
        min-width: 168px;
        max-width: 178px;
    }
    #camHealthCounts {
        white-space: normal;
        text-align: right;
    }
}

.cam-card.clickable {
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    outline: none;
}

.cam-card.clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

html.dark .cam-card.clickable:hover {
    box-shadow: 0 12px 26px rgba(0,0,0,0.8);
}

.cam-card.clickable:focus-visible {
    box-shadow: 0 0 0 3px rgba(26,173,250,0.35);
}

/* Rules engine responsive table styles */
@media (max-width: 1024px) {
    .rules-table-container .flex.justify-between.items-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .rules-table-container .flex.justify-between.items-center > * {
        width: 100%;
    }

    .rules-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .rules-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > * {
        margin-left: 0 !important;
        flex: 1 1 12rem;
        min-width: 12rem;
    }

    #rules-table-wrapper {
        overflow: visible;
    }

    #rules-table-wrapper table {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
    }

    #rules-table-wrapper thead {
        display: none;
    }

    #rules-table-wrapper tbody {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background: transparent;
    }

    #rules-table-wrapper tbody > tr:first-child {
        display: none;
    }

    #rules-table-wrapper tbody > tr {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: space-evenly;
        gap: 0.5rem 0;
        border: 1px solid rgba(203, 213, 225, 0.7);
        border-radius: 0.75rem;
        background-color: #ffffff;
        padding: 0.75rem 1rem;
        box-shadow: 0 10px 25px -20px rgba(15, 23, 42, 0.5);
        border-top: none !important;
        position: relative;
    }

    .dark #rules-table-wrapper tbody > tr {
        border-color: rgba(39, 39, 42, 0.9);
        background-color: #18181b;
        box-shadow: 0 12px 28px -22px rgba(15, 23, 42, 0.8);
    }

    #rules-table-wrapper tbody > tr > td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 0;
        border-bottom: none !important;
    }

    /* Card grid placement: row 1 = checkbox + rule title (title centered in full card), then Active/Type/Category, etc. */
    #rules-table-wrapper tbody > tr > td[data-label="Select"] {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Name"] {
        grid-column: 1 / -1;
        grid-row: 1;
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Name"] > *:not(.rules-cell-label) {
        pointer-events: auto;
    }
    /* Active, Type, Category: label on top, value under it; evenly spaced across full card width */
    #rules-table-wrapper tbody > tr > td[data-label="Active"],
    #rules-table-wrapper tbody > tr > td[data-label="Type"],
    #rules-table-wrapper tbody > tr > td[data-label="Category"] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.25rem;
        padding: 0.5rem 0.25rem 0;
        margin-top: 0.5rem;
        min-width: 0;
        width: max-content;
        text-align: center;
        box-sizing: border-box;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Active"] {
        grid-column: 1;
        grid-row: 2;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Type"] {
        grid-column: 2;
        grid-row: 2;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Category"] {
        grid-column: 3;
        grid-row: 2;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Active"] .rules-cell-label,
    #rules-table-wrapper tbody > tr > td[data-label="Type"] .rules-cell-label,
    #rules-table-wrapper tbody > tr > td[data-label="Category"] .rules-cell-label {
        margin-bottom: 0;
        white-space: nowrap;
        text-align: center;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Active"] > *:not(.rules-cell-label),
    #rules-table-wrapper tbody > tr > td[data-label="Type"] > *:not(.rules-cell-label),
    #rules-table-wrapper tbody > tr > td[data-label="Category"] > *:not(.rules-cell-label) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Sensitivity"] {
        grid-column: 1 / -1;
        grid-row: 3;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Creator"] {
        grid-column: 1 / -1;
        grid-row: 4;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Created"] {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    /* Mobile: hide "Select" and "Name" labels only */
    #rules-table-wrapper tbody > tr > td[data-label="Select"] .rules-cell-label,
    #rules-table-wrapper tbody > tr > td[data-label="Name"] .rules-cell-label {
        display: none !important;
    }

    /* Rule name: bold, centered on card (same line as checkbox) */
    #rules-table-wrapper tbody > tr > td[data-label="Name"] > *:not(.rules-cell-label) {
        font-weight: 700;
        text-align: center;
    }

    /* Sensitivity: label left, percentage right on one line */
    #rules-table-wrapper tbody > tr > td[data-label="Sensitivity"] {
        display: grid;
        grid-template-columns: min-content 1fr;
        align-items: center;
        gap: 0.5rem;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Sensitivity"]:not(:has(.rules-cell-label))::before {
        content: attr(data-label);
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
    }
    .dark #rules-table-wrapper tbody > tr > td[data-label="Sensitivity"]::before {
        color: #9ca3af;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Sensitivity"] .rules-cell-label {
        grid-column: 1;
        margin-bottom: 0;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Sensitivity"] .rules-cell-value {
        grid-column: 2;
    }

    /* Creator: label and value on one line */
    #rules-table-wrapper tbody > tr > td[data-label="Creator"] {
        display: grid;
        grid-template-columns: min-content 1fr;
        align-items: center;
        gap: 0.5rem;
    }
    #rules-table-wrapper tbody > tr > td[data-label="Creator"] .rules-cell-label {
        margin-bottom: 0;
    }

    /* Mobile only: hide Window and Days */
    #rules-table-wrapper tbody > tr > td[data-label="Window"],
    #rules-table-wrapper tbody > tr > td[data-label="Days"] {
        display: none !important;
    }

    .rules-cell-label {
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 0.15rem;
    }

    .dark .rules-cell-label {
        color: #9ca3af;
    }
}

@media (max-width: 640px) {
    .rules-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > * {
        width: 100%;
        flex: 1 1 100%;
    }

    #rules-table-wrapper tbody > tr {
        padding: 0.75rem;
    }

    .rules-cell-label {
        font-size: 0.65rem;
    }
}

/* Users page mobile-responsive table styles */
@media (max-width: 768px) {
    /* Make Add User and View Invited Users buttons equal width (50/50) */
    /* Target the header container with buttons */
    .space-y-2 > div.w-full.flex.justify-between > div.flex.items-center.gap-2,
    div.w-full.flex.justify-between > div.flex.items-center.gap-2 {
        width: 100% !important;
        gap: 0.5rem !important;
        flex: 1 1 auto !important;
    }
    
    /* Make wrapper spans also flex and stretch to match height */
    .space-y-2 > div.w-full.flex.justify-between > div.flex.items-center.gap-2 > span,
    div.w-full.flex.justify-between > div.flex.items-center.gap-2 > span {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: stretch !important;
    }
    
    /* Make the button container stretch items to match height */
    .space-y-2 > div.w-full.flex.justify-between > div.flex.items-center.gap-2,
    div.w-full.flex.justify-between > div.flex.items-center.gap-2 {
        align-items: stretch !important;
    }
    
    /* Wrap direct button children in a flex container by making them flex too */
    .space-y-2 > div.w-full.flex.justify-between > div.flex.items-center.gap-2 > button:not(span > button),
    div.w-full.flex.justify-between > div.flex.items-center.gap-2 > button:not(span > button) {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    
    /* Make each button in the header take equal width and height - ALL buttons */
    /* Target direct button children first */
    .space-y-2 > div.w-full.flex.justify-between > div.flex.items-center.gap-2 > button,
    div.w-full.flex.justify-between > div.flex.items-center.gap-2 > button {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        align-self: stretch !important;
        min-height: 3.5rem !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
        box-sizing: border-box !important;
    }
    
    /* Target buttons inside spans */
    .space-y-2 > div.w-full.flex.justify-between > div.flex.items-center.gap-2 > span > button,
    div.w-full.flex.justify-between > div.flex.items-center.gap-2 > span > button {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 3.5rem !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
        box-sizing: border-box !important;
    }
    
    /* Also target buttons more broadly to catch all cases */
    div.flex.items-center.gap-2 button {
        min-height: 3.5rem !important;
        align-self: stretch !important;
    }
    /* ROI modal Prev/Next: keep compact (override above) */
    #roiDesignerModal div.flex.flex-col.gap-1 > div.flex.items-center.gap-2 > button {
        min-height: auto !important;
        height: auto !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        align-self: auto !important;
    }

    /* Manage Folders modal: row fits in modal; first child not 100% (override [justify-between] > div:first-child); buttons not 100% */
    #manageTagsModal #tagsList > div > div:first-child {
        width: auto !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    #manageTagsModal #tagsList > div > div:last-child,
    #manageTagsModal #tagsList > div > div:last-child button {
        width: auto !important;
        min-width: auto !important;
    }
    #manageTagsModal #tagsList > div > div:last-child button {
        min-height: auto !important;
        height: auto !important;
        flex: none !important;
    }

    /* Folder Details modal: keep controls compact, nothing full-width or oversized */
    #shareTagModal #shareAddSection .flex.items-center.gap-2 > *,
    #shareTagModal #shareAddSection .flex.items-center.gap-2 button {
        width: auto !important;
        min-width: auto !important;
        min-height: auto !important;
        height: auto !important;
    }

    /* Ensure button text wraps if needed and centers */
    .space-y-2 > div.w-full.flex.justify-between > div.flex.items-center.gap-2 > button span,
    .space-y-2 > div.w-full.flex.justify-between > div.flex.items-center.gap-2 > span > button span,
    div.w-full.flex.justify-between > div.flex.items-center.gap-2 > button span,
    div.w-full.flex.justify-between > div.flex.items-center.gap-2 > span > button span {
        white-space: normal !important;
        text-align: center !important;
        word-break: break-word !important;
    }
    
    /* CRITICAL: Force all flex containers with justify-between to stack vertically */
    .bg-gray-100 .flex.justify-between,
    .dark\\:bg-zinc-900 .flex.justify-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    
    /* CRITICAL: Force all flex containers with space-x-4 to stack vertically */
    .bg-gray-100 .flex.space-x-4,
    .dark\\:bg-zinc-900 .flex.space-x-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    
    /* Fix the main content wrapper that has p-4 padding */
    main .flex-1.overflow-y-auto {
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    /* Rules engine page: allow top bar buttons to be visible (don’t clip) */
    main .flex-1.overflow-y-auto:has(.rules-engine-top-actions) {
        overflow-x: visible !important;
    }
    
    /* Prevent any horizontal overflow on the entire page content */
    /* Exclude Add Person modal form - it needs overflow visible for focus ring and proper padding */
    .space-y-2:not(#addPersonForm) {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Rules engine: do not clip top bar (base template main content has overflow-x-hidden) */
    main div.overflow-x-hidden:has(.rules-engine-top-bar) {
        overflow-x: visible !important;
    }
    /* Rules engine (rules-engine-top-actions): do not clip top bar buttons */
    main div.overflow-x-hidden:has(.rules-engine-top-actions) {
        overflow-x: visible !important;
    }
    /* Rules engine: wrapper .space-y-2 and top bar row must not clip buttons */
    .space-y-2:has(.rules-engine-top-bar),
    .space-y-2:has(.rules-engine-top-actions) {
        overflow-x: visible !important;
    }
    .space-y-2:has(.rules-engine-top-bar) > div:first-child,
    .space-y-2:has(.rules-engine-top-actions) > div:first-child {
        overflow-x: visible !important;
    }
    
    /* Fix parent divs (exclude Add Person form descendants) */
    .space-y-2:not(#addPersonForm) > div {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Rules engine: top bar and inner row must not clip buttons (override above) */
    .space-y-2:has(.rules-engine-top-bar) > div:first-child,
    .space-y-2:has(.rules-engine-top-actions) > div:first-child,
    .rules-engine-top-bar > div:first-child,
    .rules-engine-top-actions > div:first-child {
        overflow-x: visible !important;
    }
    
    /* Fix nested divs (exclude Add Person form descendants) */
    .space-y-2:not(#addPersonForm) > div > div {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Rules engine: inner button row must not clip second button */
    .rules-engine-top-bar > div.flex.space-x-2,
    .rules-engine-top-actions > div.flex.space-x-2 {
        overflow-x: visible !important;
    }

    /* Rules engine: wrapper and top bar must not clip (override Fix parent/nested divs above) */
    .space-y-2:has(.rules-engine-top-bar),
    .space-y-2:has(.rules-engine-top-bar) > div:first-child,
    .space-y-2:has(.rules-engine-top-actions),
    .space-y-2:has(.rules-engine-top-actions) > div:first-child,
    .rules-engine-top-bar,
    .rules-engine-top-actions {
        overflow-x: visible !important;
    }
    
    /* Universal fix for smart_table container - catch it anywhere */
    /* Target by multiple class combinations to ensure we catch it */
    div.bg-gray-100.p-4.rounded-xl,
    div.dark\\:bg-zinc-900.p-4.rounded-xl,
    div.bg-gray-100.p-4.space-y-4,
    div.dark\\:bg-zinc-900.p-4.space-y-4,
    .bg-gray-100.p-4,
    .dark\\:bg-zinc-900.p-4 {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        /* Ensure border is included in width calculation */
        border-left-width: 1px !important;
        border-right-width: 1px !important;
    }
    
    /* Make sure border doesn't add to width */
    div.border {
        box-sizing: border-box !important;
    }
    
    /* Ensure the rounded-xl border doesn't cause overflow */
    div.rounded-xl {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Catch any element with border that might be causing overflow */
    div.border {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Stack Actions, Search, and Filter controls vertically on mobile */
    /* Target with maximum specificity - chain multiple classes */
    div.bg-gray-100.p-4.rounded-xl.border div.flex.justify-between.items-center,
    div.dark\\:bg-zinc-900.p-4.rounded-xl.border div.flex.justify-between.items-center,
    div.bg-gray-100 div.flex.justify-between.items-center,
    div.dark\\:bg-zinc-900 div.flex.justify-between.items-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Make the right side controls container stack vertically */
    div.bg-gray-100.p-4.rounded-xl.border div.flex.items-center.space-x-4,
    div.dark\\:bg-zinc-900.p-4.rounded-xl.border div.flex.items-center.space-x-4,
    div.bg-gray-100 div.flex.items-center.space-x-4,
    div.dark\\:bg-zinc-900 div.flex.items-center.space-x-4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Also target with class attribute selector as fallback */
    [class*="bg-gray-100"] [class*="flex"][class*="justify-between"][class*="items-center"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    [class*="bg-gray-100"] [class*="flex"][class*="items-center"][class*="space-x-4"],
    [class*="bg-zinc-900"] [class*="flex"][class*="items-center"][class*="space-x-4"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    /* Remove horizontal spacing from space-x-4 children */
    .space-x-4 > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Make Actions dropdown container full width */
    div.flex.justify-between.items-center > div:first-child,
    [class*="flex"][class*="justify-between"] > div:first-child {
        width: 100% !important;
    }
    
    /* Make Actions dropdown button full width - target Alpine.js component and all buttons */
    div[x-data] button,
    [class*="flex"][class*="justify-between"] [x-data] button,
    [class*="flex"][class*="justify-between"] button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Rules engine top bar: buttons sized to content, left-aligned – override full-width rule above */
    .rules-engine-top-bar > div:first-child > button,
    .rules-engine-top-bar > div:first-child > span {
        width: auto !important;
        flex: none !important;
        min-width: 0 !important;
    }

    /* Pagination prev/next: keep compact on mobile (match supervisor tools) - overrides above */
    .table-pagination-controls button,
    .table-pagination-controls a {
        width: auto !important;
        min-width: auto !important;
        justify-content: center !important;
    }
    
    /* Make search input container full width - target the div with border */
    div.flex.items-center.bg-gray-100.border,
    div.flex.items-center.bg-zinc-900.border,
    [class*="flex"][class*="items-center"][class*="space-x-4"] > div.flex.items-center {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Make filter and sort buttons full width - target relative containers */
    div.relative,
    [class*="flex"][class*="items-center"][class*="space-x-4"] > div.relative {
        width: 100% !important;
    }
    
    /* Make buttons inside relative containers full width */
    div.relative > button,
    [class*="flex"][class*="items-center"][class*="space-x-4"] div.relative > button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Org modal list rows: keep Actions button compact but with even padding */
    #orgManageModal .org-list-actions-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: none !important;
        padding: 0.25rem 0.5rem !important; /* equal padding all around */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.2 !important;
        font-size: 0.75rem !important; /* match text-xs used by "+ New" buttons */
    }

    /* Org modal – Departments & Sections list items (mobile-only layout) */
    #orgManageModal #deptList .org-dept-row,
    #orgManageModal #sectList .org-dept-row {
        display: block;
        width: 100%;
    }

    #orgManageModal #deptList .org-dept-row-inner,
    #orgManageModal #sectList .org-dept-row-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto; /* left text column + right Actions column */
        align-items: flex-start;
        column-gap: 0.5rem;
        width: 100%;
    }

    /* Ensure the Actions container stays right-aligned and does not expand full width */
    #orgManageModal #deptList .org-dept-row-inner > .relative,
    #orgManageModal #sectList .org-dept-row-inner > .relative {
        justify-self: flex-end;
        width: auto !important;
    }

    /* Make the Actions dropdown a bit wider for mobile usability */
    #orgManageModal #deptList .org-dept-row-inner > .relative > div,
    #orgManageModal #sectList .org-dept-row-inner > .relative > div {
        min-width: 9rem; /* ~144px, wider than default w-32 (128px) */
    }

    #orgManageModal #deptList .org-dept-row-main,
    #orgManageModal #sectList .org-dept-row-main {
        text-align: left;
        overflow: hidden;
    }

    /* Keep title and description visible but prevent row wrapping into a second line layout */
    #orgManageModal #deptList .org-dept-row-main > div,
    #orgManageModal #sectList .org-dept-row-main > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Make clear filters button full width */
    #clearFiltersWrapper-active,
    [class*="flex"][class*="items-center"][class*="space-x-4"] #clearFiltersWrapper-active {
        width: 100% !important;
        display: block !important;
    }
    
    #clearFiltersWrapper-active button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Ensure all direct children of space-x-4 container are full width */
    [class*="space-x-4"] > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix the smart_table container - target the bg-gray-100 container with all its classes */
    .bg-gray-100.p-4.rounded-xl,
    .dark\\:bg-zinc-900.p-4.rounded-xl,
    div.bg-gray-100.dark\\:bg-zinc-900.p-4,
    .space-y-2 .bg-gray-100,
    .space-y-2 .dark\\:bg-zinc-900 {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Target any div with bg-gray-100 that contains the table */
    div[class*="bg-gray-100"][class*="p-4"] {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Target dark mode variant */
    div[class*="bg-zinc-900"][class*="p-4"] {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Prevent any horizontal overflow */
    #users-table-wrapper-active {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure parent containers don't overflow */
    #users-table-wrapper-active * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Remove min-width from table */
    #users-table-wrapper-active table.min-w-full {
        min-width: 0 !important;
    }
    
    /* Hide table header on mobile */
    #users-table-wrapper-active table thead {
        display: none;
    }
    
    /* Remove default table styling */
    #users-table-wrapper-active table {
        border: none;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        margin: 0;
        padding: 0;
    }
    
    /* Remove any horizontal padding/margins from hr elements */
    #users-table-wrapper-active hr {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* Make table rows display as cards */
    #users-table-wrapper-active table tbody tr {
        display: block;
        margin-bottom: 1rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: 1px solid rgb(229 231 235);
        border-radius: 0.5rem;
        background-color: rgb(249 250 251);
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .dark #users-table-wrapper-active table tbody tr {
        border-color: rgb(39 39 42);
        background-color: rgb(24 24 27);
    }
    
    /* Make table cells display as block with labels - stack vertically */
    #users-table-wrapper-active table tbody tr td {
        display: block;
        padding: 0.75rem;
        border: none;
        border-bottom: 1px solid rgb(229 231 235);
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .dark #users-table-wrapper-active table tbody tr td {
        border-bottom-color: rgb(39 39 42);
    }
    
    #users-table-wrapper-active table tbody tr td:last-child {
        border-bottom: none;
    }
    
    /* Checkbox cell styling - special handling */
    #users-table-wrapper-active table tbody tr td:first-child {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid rgb(229 231 235);
        padding-bottom: 0.75rem;
    }
    
    .dark #users-table-wrapper-active table tbody tr td:first-child {
        border-bottom-color: rgb(39 39 42);
    }
    
    #users-table-wrapper-active table tbody tr td:first-child::before {
        content: none;
    }
    
    /* Add labels before cell content using data attributes */
    #users-table-wrapper-active table tbody tr td[data-col]::before {
        content: attr(data-col);
        display: block;
        font-weight: 500;
        color: rgb(107 114 128);
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        text-transform: capitalize;
    }
    
    .dark #users-table-wrapper-active table tbody tr td[data-col]::before {
        color: rgb(161 161 170);
    }
    
    /* Specific label text for each column */
    #users-table-wrapper-active table tbody tr td[data-col="name"]::before {
        content: "Name:";
    }
    
    #users-table-wrapper-active table tbody tr td[data-col="email"]::before {
        content: "Email:";
    }
    
    #users-table-wrapper-active table tbody tr td[data-col="phone"]::before {
        content: "Phone:";
    }
    
    #users-table-wrapper-active table tbody tr td[data-col="telegram"]::before {
        content: "Telegram:";
    }
    
    #users-table-wrapper-active table tbody tr td[data-col="role"]::before {
        content: "Role:";
    }
    
    #users-table-wrapper-active table tbody tr td[data-col="last-active"]::before {
        content: "Last Active:";
    }
    
    #users-table-wrapper-active table tbody tr td[data-col="date-added"]::before {
        content: "Date Added:";
    }
    
    /* Content alignment - left align for better readability */
    #users-table-wrapper-active table tbody tr td[data-col] {
        text-align: left;
    }
    
    #users-table-wrapper-active table tbody tr td[data-col] > * {
        text-align: left;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* Role chip - constrain width and make it fit */
    #users-table-wrapper-active table tbody tr td[data-col="role"] {
        display: block !important;
    }
    
    #users-table-wrapper-active table tbody tr td[data-col="role"].flex {
        display: block !important;
    }
    
    #users-table-wrapper-active table tbody tr td[data-col="role"] > div {
        display: inline-block !important;
        max-width: 100%;
        word-break: break-word;
        white-space: normal;
        box-sizing: border-box;
    }
    
    /* Telegram link - make it wrap properly */
    #users-table-wrapper-active table tbody tr td[data-col="telegram"] > a {
        display: inline-block;
        max-width: 100%;
        word-break: break-word;
        white-space: normal;
        box-sizing: border-box;
    }
    
    /* Empty telegram cells */
    #users-table-wrapper-active table tbody tr td[data-col="telegram"]:empty::after {
        content: "—";
        color: rgb(156 163 175);
        display: block;
    }
    
    .dark #users-table-wrapper-active table tbody tr td[data-col="telegram"]:empty::after {
        color: rgb(113 113 122);
    }
    
    /* Prevent any inline styles or classes from causing overflow */
    #users-table-wrapper-active table tbody tr td[data-col] span {
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: break-word;
        display: inline-block;
    }
    
    /* Ensure all content within cells wraps */
    #users-table-wrapper-active table tbody tr td[data-col] * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Alerts page responsive table styles */
@media (max-width: 1024px) {
    .alerts-table-container .flex.justify-between.items-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .alerts-table-container .flex.justify-between.items-center > * {
        width: 100%;
    }

    .alerts-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .alerts-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > * {
        margin-left: 0 !important;
        flex: 1 1 12rem;
        min-width: 12rem;
    }

    #alerts-table-wrapper {
        overflow: visible;
    }

    #alerts-table-wrapper table {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
    }

    #alerts-table-wrapper thead {
        display: none;
    }

    #alerts-table-wrapper tbody {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background: transparent;
    }

    #alerts-table-wrapper tbody > tr:first-child {
        display: none;
    }

    #alerts-table-wrapper tbody > tr {
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(203, 213, 225, 0.7);
        border-radius: 0.75rem;
        background-color: #ffffff;
        padding: 1rem;
        gap: 0.75rem;
        box-shadow: 0 10px 25px -20px rgba(15, 23, 42, 0.5);
        border-top: none !important;
    }

    .dark #alerts-table-wrapper tbody > tr {
        border-color: rgba(39, 39, 42, 0.9);
        background-color: #18181b;
        box-shadow: 0 12px 28px -22px rgba(15, 23, 42, 0.8);
    }

    #alerts-table-wrapper tbody > tr > td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 0;
        border-bottom: none !important;
    }

    #alerts-table-wrapper tbody > tr > td + td {
        margin-top: 0.5rem;
    }

    .alerts-cell-label {
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 0.15rem;
    }

    .dark .alerts-cell-label {
        color: #9ca3af;
    }

    #alerts-table-wrapper tbody > tr > td.text-center {
        text-align: left;
    }

    #alerts-table-wrapper tbody > tr > td[data-label="Images"] > div {
        width: 100%;
    }

    #alerts-table-wrapper tbody > tr > td[data-label="Images"] img {
        width: 3.25rem;
        height: 3.25rem;
    }
}

@media (max-width: 640px) {
    .alerts-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > * {
        width: 100%;
        flex: 1 1 100%;
    }

    #alerts-table-wrapper tbody > tr {
        padding: 0.75rem;
    }

    .alerts-cell-label {
        font-size: 0.65rem;
    }

    #alerts-table-wrapper tbody > tr > td[data-label="Images"] img {
        width: 3rem;
        height: 3rem;
    }
}

#alerts-table-wrapper tbody > tr.alert-cleared {
    opacity: 0.55;
}

#alerts-table-wrapper tbody > tr.alert-cleared:hover {
    opacity: 0.8;
}

.dark #alerts-table-wrapper tbody > tr.alert-cleared {
    opacity: 0.65;
}

/* Local Registry page responsive table styles */
@media (max-width: 1024px) {
    .registry-table-container .flex.justify-between.items-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .registry-table-container .flex.justify-between.items-center > * {
        width: 100%;
    }

    .registry-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .registry-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > * {
        margin-left: 0 !important;
        flex: 1 1 12rem;
        min-width: 12rem;
    }

    #registry-table-wrapper {
        overflow: visible;
    }

    #registry-table-wrapper table {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
    }

    #registry-table-wrapper thead {
        display: none;
    }

    #registry-table-wrapper tbody {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background: transparent;
    }

    #registry-table-wrapper tbody > tr:first-child {
        display: none;
    }

    #registry-table-wrapper tbody > tr {
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(203, 213, 225, 0.7);
        border-radius: 0.75rem;
        background-color: #ffffff;
        padding: 1rem;
        gap: 0.75rem;
        box-shadow: 0 10px 25px -20px rgba(15, 23, 42, 0.5);
        border-top: none !important;
    }

    .dark #registry-table-wrapper tbody > tr {
        border-color: rgba(39, 39, 42, 0.9);
        background-color: #18181b;
        box-shadow: 0 12px 28px -22px rgba(15, 23, 42, 0.8);
    }

    #registry-table-wrapper tbody > tr > td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 0;
        border-bottom: none !important;
    }

    #registry-table-wrapper tbody > tr > td + td {
        margin-top: 0.5rem;
    }

    .registry-cell-label {
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 0.15rem;
    }

    .dark .registry-cell-label {
        color: #9ca3af;
    }

    #registry-table-wrapper tbody > tr > td[data-label="Feature Image"] > div,
    #registry-table-wrapper tbody > tr > td[data-label="Feature Image"] > img {
        width: 100%;
    }

    #registry-table-wrapper tbody > tr > td[data-label="Feature Image"] img {
        width: 3.25rem;
        height: 3.25rem;
    }

    #registry-table-wrapper tbody > tr > td.flex {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .registry-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > * {
        width: 100%;
        flex: 1 1 100%;
    }

    #registry-table-wrapper tbody > tr {
        padding: 0.75rem;
    }

    .registry-cell-label {
        font-size: 0.65rem;
    }

    #registry-table-wrapper tbody > tr > td[data-label="Feature Image"] img {
        width: 3rem;
        height: 3rem;
    }
}

/* Supervisor tools page responsive table styles */
@media (max-width: 1024px) {
    .supervisor-table-container .flex.justify-between.items-center {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .supervisor-table-container .flex.justify-between.items-center > * {
        width: 100%;
    }

    /* Remove any hr spacing before table */
    .supervisor-table-container .flex.justify-between.items-center ~ hr,
    .supervisor-table-container div.space-y-4 > .flex.justify-between.items-center ~ hr,
    .supervisor-table-container div.space-y-4 > hr + div.overflow-x-auto {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: none !important;
    }

    /* Stack search/filter controls vertically on mobile */
    .supervisor-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        width: 100%;
    }

    /* Make actions dropdown container full width */
    .supervisor-table-container .flex.justify-between.items-center > div:first-child {
        width: 100% !important;
    }

    .supervisor-table-container .flex.justify-between.items-center > div:first-child > div.relative {
        width: 100% !important;
    }

    /* Make all filter/search/action buttons identical size on mobile */
    .supervisor-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > *,
    .supervisor-table-container .flex.justify-between.items-center > div:first-child button {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Make search input container full width */
    .supervisor-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > div.flex.items-center {
        width: 100% !important;
    }

    /* Make all buttons, dropdowns, and search inputs the same height and full width */
    .supervisor-table-container .flex.justify-between.items-center button,
    .supervisor-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 button,
    .supervisor-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > div button,
    .supervisor-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > div.flex.items-center,
    .supervisor-table-container .flex.justify-between.items-center > div:first-child button,
    .supervisor-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > div.relative button {
        min-height: 44px !important;
        height: 44px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Make search input container match button height */
    .supervisor-table-container .flex.justify-between.items-center .flex.items-center.space-x-4 > div.flex.items-center {
        min-height: 44px !important;
        height: 44px !important;
    }

    #assoc-table-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    #assoc-table-wrapper table {
        display: table;
        width: 100%;
        min-width: 800px;
        border-collapse: collapse;
    }

    #assoc-table-wrapper thead {
        display: table-header-group;
    }

    #assoc-table-wrapper tbody {
        display: table-row-group;
    }

    #assoc-table-wrapper tbody > tr {
        display: table-row;
        border: none;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .dark #assoc-table-wrapper tbody > tr {
        border: none;
        background: transparent;
        box-shadow: none;
    }

    #assoc-table-wrapper tbody > tr > td {
        display: table-cell;
        padding: 0.75rem;
        border-bottom: 1px solid rgba(203, 213, 225, 0.3);
    }

    .dark #assoc-table-wrapper tbody > tr > td {
        border-bottom: 1px solid rgba(39, 39, 42, 0.5);
    }

    .supervisor-cell-label {
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 0.15rem;
    }

    .dark .supervisor-cell-label {
        color: #9ca3af;
    }

    /* Pagination controls (all pages) - supervisor-tools look: compact Prev/Next row, mobile only */
    .table-pagination-controls {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
        padding-left: 0 !important;
        flex-wrap: nowrap !important;
    }

    .table-pagination-controls button,
    .table-pagination-controls a {
        padding: 0.25rem 0.5rem !important;
        min-width: auto !important;
        width: auto !important;
        font-size: 0.75rem !important;
        display: inline-block !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
    }

    .table-pagination-controls .table-pagination-indicator {
        font-size: 0.75rem !important;
        margin: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1.5 !important;
        flex: 1 !important;
        text-align: center !important;
    }

    #assoc-table-wrapper tbody > tr > td.align-middle {
        align-items: flex-start;
    }

    #assoc-table-wrapper tbody > tr > td.text-center {
        text-align: left;
    }

    /* Same page buttons (Prev/Next) styling for Audit Log and Manage Users on mobile */
    #pagination-controls-audit,
    #pagination-controls-active {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
        padding-left: 0 !important;
        flex-wrap: nowrap !important;
    }

    #pagination-controls-audit button,
    #pagination-controls-audit a,
    #pagination-controls-active button,
    #pagination-controls-active a {
        padding: 0.25rem 0.5rem !important;
        min-width: auto !important;
        width: auto !important;
        font-size: 0.75rem !important;
        display: inline-block !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
    }

    #pagination-controls-audit .table-pagination-indicator,
    #pagination-controls-active .table-pagination-indicator {
        font-size: 0.75rem !important;
        margin: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1.5 !important;
        flex: 1 !important;
        text-align: center !important;
    }

    @media (max-width: 640px) {
        #assoc-table-wrapper tbody > tr {
            padding: 0.75rem;
            gap: 0.5rem 0.5rem;
        }
    }
}

/* Database Search page responsive table styles */
@media (max-width: 1024px) {
    #db-search-table-wrapper {
        overflow: visible;
    }

    #db-search-table-wrapper table {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
    }

    #db-search-table-wrapper thead {
        display: none;
    }

    #db-search-table-wrapper tbody {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background: transparent;
    }

    #db-search-table-wrapper tbody > tr:first-child {
        display: none;
    }

    #db-search-table-wrapper tbody > tr {
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(203, 213, 225, 0.7);
        border-radius: 0.75rem;
        background-color: #ffffff;
        padding: 1rem;
        gap: 0.75rem;
        box-shadow: 0 10px 25px -20px rgba(15, 23, 42, 0.5);
        border-top: none !important;
    }

    .dark #db-search-table-wrapper tbody > tr {
        border-color: rgba(39, 39, 42, 0.9);
        background-color: #18181b;
        box-shadow: 0 12px 28px -22px rgba(15, 23, 42, 0.8);
    }

    #db-search-table-wrapper tbody > tr > td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 0;
        border-bottom: none !important;
    }

    #db-search-table-wrapper tbody > tr > td + td {
        margin-top: 0.5rem;
    }

    .db-search-cell-label {
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 0.15rem;
    }

    .dark .db-search-cell-label {
        color: #9ca3af;
    }

    #db-search-table-wrapper tbody > tr > td[data-label="Image"] > div {
        display: flex;
        align-items: center;
    }

    #db-search-table-wrapper tbody > tr > td[data-label="Image"] img {
        width: 3.25rem;
        height: 3.25rem;
        flex-shrink: 0;
    }

    #db-search-table-wrapper tbody > tr > td[data-label="Category"] > div {
        width: 100%;
    }
}

@media (max-width: 640px) {
    #db-search-table-wrapper tbody > tr {
        padding: 0.75rem;
    }

    .db-search-cell-label {
        font-size: 0.65rem;
    }

    #db-search-table-wrapper tbody > tr > td[data-label="Image"] img {
        width: 3rem;
        height: 3rem;
        flex-shrink: 0;
    }
}

/* Users page: hide View Invited / View Archived buttons */
#viewInvitedBtnWrapper,
#viewArchivedBtnWrapper {
    display: none !important;
}

/* Add Person modal - mobile only: fix focus highlight clipping, Type row Add button */
/* Use 768px to match the media query that applies .space-y-2 overrides */
@media (max-width: 768px) {
    /* Form padding - .space-y-2 exclusion above prevents padding:0 override */
    #addPersonModal #addPersonForm {
        padding-left: 0.5rem !important;
        padding-right: 1rem !important;
    }

    /* Use INSET focus ring so it's never clipped by overflow-hidden ancestors */
    #addPersonModal #addPersonForm input:focus,
    #addPersonModal #addPersonForm input:focus-visible,
    #addPersonModal #addPersonForm textarea:focus,
    #addPersonModal #addPersonForm textarea:focus-visible,
    #addPersonModal #addPersonForm select:focus,
    #addPersonModal #addPersonForm select:focus-visible {
        outline: none !important;
        box-shadow: inset 0 0 0 2px #3b82f6 !important;
    }

    .dark #addPersonModal #addPersonForm input:focus,
    .dark #addPersonModal #addPersonForm input:focus-visible,
    .dark #addPersonModal #addPersonForm textarea:focus,
    .dark #addPersonModal #addPersonForm textarea:focus-visible,
    .dark #addPersonModal #addPersonForm select:focus,
    .dark #addPersonModal #addPersonForm select:focus-visible {
        box-shadow: inset 0 0 0 2px #60a5fa !important;
    }

    /* Type row: shorter dropdown and Add button; Add button fixed width, right-aligned */
    #addPersonModal .add-person-type-row {
        flex-wrap: nowrap !important;
    }

    #addPersonModal .add-person-type-row select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
        min-height: unset !important;
    }

    #addPersonModal .add-person-type-add-btn {
        width: 4.25rem !important;
        min-width: 4.25rem !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        flex: 0 0 4.25rem !important;
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
        min-height: unset !important;
    }
}

/* Global alert popup - matches site styling, light/dark, mobile-friendly */
.global-alert-popup {
    -webkit-tap-highlight-color: transparent;
}
.global-alert-popup a:active {
    -webkit-tap-highlight-color: transparent;
}
.global-alert-popup-dismiss {
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 767px) {
    .global-alert-popup .global-alert-popup-dismiss {
        min-width: 48px;
        min-height: 48px;
    }
}

/* Notification Panel Styles */
.notification-panel {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100%;
    align-self: stretch;
}

/* Hide notification panel on mobile by default, show on desktop */
.notification-panel-desktop {
    display: none;
}

@media (min-width: 768px) {
    .notification-panel-desktop {
        display: flex !important;
    }
}

/* Show notification panel on mobile when opened */
@media (max-width: 767px) {
    .notification-panel-mobile-open {
        position: fixed;
        top: 80px !important; /* Start below navbar */
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        display: flex !important;
        height: auto !important;
    }
    
    /* Hide the toggle button bar on mobile */
    .notification-panel-mobile-open .notification-toggle-btn {
        display: none;
    }
    
    /* Position close button centered in panel header on mobile - right side */
    /* Use relative positioning within the header to avoid jumping */
    .notification-panel-mobile-open .notification-panel-header {
        position: relative;
    }
    
    .notification-panel-mobile-open .notification-panel-header .notification-close-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 20px !important;
        z-index: 10001 !important;
        width: auto !important;
        min-width: 24px !important;
        height: 32px !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
    
    /* Make panel content full width on mobile and position it below navbar */
    .notification-panel-mobile-open .notification-panel-content {
        position: fixed !important;
        top: 80px !important; /* Start below navbar */
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 80px) !important; /* Full height minus navbar */
    }
    
    /* Ensure header/navbar stays above the panel */
    main .md\\:hidden.space-y-2 {
        position: relative;
        z-index: 10001;
    }
    
    /* Make toast narrower on mobile */
    #toast {
        max-width: calc(100vw - 32px) !important;
        width: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    #toast > div {
        max-width: 100%;
        min-width: 0;
    }
    
}


.notification-toggle-btn {
    position: relative;
    width: 48px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #ddd;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 16px;
    gap: 12px;
    flex-shrink: 0;
    z-index: 1;
}

.notification-category-btn {
    position: relative;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease;
    border-radius: 6px;
}

.notification-category-btn:hover {
    background: #e5e5e5;
}

.notification-category-btn-active {
    background: #e5e5e5;
}

.notification-category-btn-active:hover {
    background: #d1d5db;
}

.notification-icon-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.notification-toggle-btn:hover .notification-icon-wrapper {
    background: #e5e5e5;
}

.notification-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    stroke: currentColor;
    fill: none;
}

.dark .notification-icon {
    color: #e5e7eb;
    stroke: #e5e7eb;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    padding: 0 4px;
    border: 2px solid #fff;
}

.notification-panel-content {
    position: fixed;
    top: 0;
    right: 48px;
    width: 380px;
    max-width: calc(100vw - 48px);
    height: 100vh;
    background: #fff;
    border-left: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    background: #f8f9fa;
}

.notification-panel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

.notification-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #666;
    transition: all 0.2s ease;
    padding: 0;
}

.notification-close-btn:hover {
    background: #e5e5e5;
    color: #111;
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-message {
    padding: 16px 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* Alert card styles - matching map page */
.alert-card {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
}

.alert-card:hover {
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.alert-card .alert-type-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f1f1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.alert-card .alert-metric {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.alert-card .alert-meta {
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.alert-card .alert-meta span:last-child {
    color: #007bff;
    font-weight: 600;
}

/* Dark mode support */
.dark .notification-toggle-btn {
    background: #1a1a1a;
    border-color: #444;
}

.dark .notification-toggle-btn:hover {
    background: #2a2a2a;
}

.dark .notification-toggle-btn:hover .notification-icon-wrapper {
    background: #333;
}

.dark .notification-category-btn {
    color: #e5e7eb;
}

.dark .notification-category-btn:hover {
    background: #333;
}

.dark .notification-category-btn-active {
    background: #333;
}

.dark .notification-category-btn-active:hover {
    background: #444;
}

.dark .notification-panel-content {
    background: #1a1a1a;
    border-color: #444;
}

.dark .notification-panel-header {
    background: #2a2a2a;
    border-color: #444;
}

.dark .notification-panel-title {
    color: #f3f4f6;
}

.dark .notification-close-btn {
    color: #9ca3af;
}

.dark .notification-close-btn:hover {
    background: #333;
    color: #e5e7eb;
}

/* Dark mode support for alert cards */
.dark .alert-card {
    background: #2a2a2a;
    border-color: #444;
}

.dark .alert-card:hover {
    border-color: #007bff;
}

.dark .alert-card .alert-type-chip {
    background: #1a1a1a;
    color: #e5e7eb;
}

.dark .alert-card .alert-metric {
    color: #e5e7eb;
}

.dark .alert-card .alert-meta {
    color: #9ca3af;
}

.dark .alert-card .alert-meta span:last-child {
    color: #007bff;
}

/* Override inline styles for alert card text in dark mode */
.dark .alert-card div[style*="color: #111"] {
    color: #e5e7eb !important;
}

.dark .alert-card div[style*="color: #555"] {
    color: #9ca3af !important;
}

.dark .notification-message {
    color: #9ca3af;
}

.dark .notification-badge {
    border-color: #1a1a1a;
}

/* Clear all button styling - matches map page */
.alert-clear-all-btn {
    background: #dc2626;
    width: 100%;
    text-align: center;
}

.alert-clear-all-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Individual alert clear button - matches map page */
.alert-clear-btn {
    border: 1px solid #dc2626;
    background: #fff;
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.alert-clear-btn:hover {
    background: #fee2e2;
}

.alert-clear-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Dark mode support for clear buttons */
.dark .alert-clear-btn {
    background: #1a1a1a;
    border-color: #dc2626;
    color: #dc2626;
}

.dark .alert-clear-btn:hover {
    background: #2a1a1a;
}

.dark .alert-clear-all-btn {
    background: #dc2626;
}