/* BASE STYLES */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; height: 100vh; width: 100vw; overflow: hidden; background: #1a1a2e; color: #1a202c; -webkit-font-smoothing: antialiased; }

/* DEBUG CONSOLE */
#debugConsole {
    position: fixed; bottom: 20px; left: 20px; width: 300px;
    background: rgba(15, 23, 42, 0.95); color: #10b981; font-family: monospace; font-size: 11px;
    padding: 12px 16px; border-radius: 8px; z-index: 99999; pointer-events: none;
    border-left: 4px solid #10b981; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: opacity 0.5s ease, transform 0.5s ease; 
    opacity: 0; transform: translateY(10px);
}
#debugConsole.error { color: #ef4444; border-left-color: #ef4444; }

/* SCREENS */
.screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.screen.active { display: flex; z-index: 10; }

/* LOGIN */
#loginScreen { background: #1a1a2e; }
#loginScreen.active { display: block; }
#loginMapBackground { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; opacity: 0.6; width: 100%; height: 100%; }

/* ==========================================
   LOGIN SCREEN REFINEMENTS
   ========================================== */
.login-card {
    position: absolute; 
    left: 50%; top: 50%; 
    transform: translate(-50%, -50%);
    background: white; 
    border-radius: 12px; 
    padding: 40px; 
    width: 380px; /* Default for Laptop */
    max-width: 95%; /* Safety for smaller screens */
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5); 
    z-index: 10;
    transition: all 0.3s ease;
}

.login-header h1 { font-size: 28px; font-weight: 700; color: #00264b; margin-bottom: 5px; }
.login-header p { font-size: 13px; color: #64748b; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 6px; letter-spacing: 0.2px; }

.label-with-action { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.label-action-link { font-size: 10px; color: #0284c7; cursor: pointer; font-weight: 700; transition: 0.2s; text-transform: uppercase; letter-spacing: 0.5px; }
.label-action-link:hover { color: #0369a1; text-decoration: underline; }

.form-input { width: 100%; padding: 12px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; background: #f8fafc; transition: 0.2s; color: #0f172a; }
.form-input:focus { outline: none; border-color: #00264b; background: #fff; box-shadow: 0 4px 12px rgba(0,38,75,0.08); }
.btn-access { width: 100%; padding: 14px; background: #00264b; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-access:hover { background: #001d3a; transform: translateY(-1px); box-shadow: 0 6px 15px rgba(0,38,75,0.2); }

/* DASHBOARD LAYOUT */
.sidebar { width: 380px; background: white; display: flex; flex-direction: column; z-index: 20; box-shadow: 4px 0 24px rgba(0,0,0,0.1); height: 100vh; }
.main-content { flex: 1; position: relative; height: 100vh; background: #e2e8f0; }

/* SIDEBAR HEADER */
.sidebar-header { padding: 0; background: #00264b; color: white; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.sidebar-logo-container { background: #fff; width: 100%; height: 110px; padding: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; }
.sidebar-logo-container img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.sidebar-header p { margin: 0; padding: 14px 0; opacity: 0.9; font-size: 10px; letter-spacing: 2px; font-weight: 600; text-transform: uppercase; }

.user-profile { padding: 18px 24px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.avatar { width: 36px; height: 36px; background: #00264b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; box-shadow: 0 2px 8px rgba(0,38,75,0.2); }
.logout-link { font-size: 10px; color: #ef4444; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.2s; }
.logout-link:hover { color: #dc2626; }

/* CUSTOM SIDEBAR SEARCH & MODERN FILTER */
.sidebar-search-container { padding: 16px 24px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.search-row { display: flex; align-items: center; gap: 8px; position: relative; width: 100%; }

.search-input-wrapper { display: flex; align-items: center; background: #f1f5f9; border: 1px solid transparent; border-radius: 10px; padding: 0 14px; height: 44px; position: relative; transition: 0.2s; }
.search-input-wrapper:focus-within { border-color: #00264b; background: #fff; box-shadow: 0 4px 15px rgba(0,38,75,0.06); }
.search-input-wrapper input { flex: 1; border: none; background: transparent; padding: 0 12px; font-size: 14px; color: #1e293b; outline: none; width: 100%; }
.search-input-wrapper input::placeholder { color: #94a3b8; font-weight: 400; }
.search-input-wrapper .clear-btn { background: #e2e8f0; border: none; color: #64748b; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.search-input-wrapper .clear-btn:hover { background: #cbd5e1; color: #0f172a; }

.modern-filter-btn { background: #f8fafc; border: 1px solid transparent; color: #64748b; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.modern-filter-btn:hover, .modern-filter-btn.active { background: #e2e8f0; color: #00264b; border-color: #cbd5e1; }

.modern-filter-dropdown { position: absolute; top: 52px; right: 0; background: white; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,38,75,0.1); width: 200px; z-index: 100; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: 0.2s ease; overflow: hidden; display: flex; flex-direction: column; }
.modern-filter-dropdown.active { opacity: 1; pointer-events: all; transform: translateY(0); }

.filter-option { padding: 12px 16px; font-size: 13px; color: #475569; font-weight: 500; cursor: pointer; transition: 0.2s; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f8fafc; }
.filter-option:last-child { border-bottom: none; }
.filter-option:hover { background: #f1f5f9; color: #0f172a; }
.filter-option.selected { color: #0284c7; font-weight: 600; background: #f0f9ff; }
.filter-option.selected::after { content: '✓'; font-weight: bold; font-size: 14px; }

/* ADMIN DASHBOARD WIDGETS */
.admin-dashboard-widgets { 
    position: absolute; top: 24px; right: 24px; left: auto;
    background: rgba(255, 255, 255, 0.45); 
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.15); 
    z-index: 10; border: 1px solid rgba(255,255,255,0.7); 
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex; flex-direction: column; width: 340px;
    overflow: hidden;
}
.admin-dashboard-widgets.hidden { opacity: 0; pointer-events: none; transform: translateY(-15px); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 20px 10px 20px; }
.stat-card { background: rgba(255, 255, 255, 0.9); padding: 18px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.03); text-align: center; transition: transform 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,38,75,0.08); }
.stat-value { font-size: 26px; font-weight: 700; color: #00264b; margin-bottom: 4px; line-height: 1; letter-spacing: -0.5px; }
.stat-label { font-size: 10px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;}

/* Interactive Dashboard Enhancements */
.stat-card.clickable { cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; }
.stat-card.clickable:hover { border-color: rgba(2, 132, 199, 0.4); background: #f0f9ff; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(2, 132, 199, 0.15); }
.stat-card.active-filter { border-color: #0284c7; background: #e0f2fe; }

.kpi-row { text-align: right; font-size: 11px; font-weight: 600; color: #64748b; margin-top: 10px; letter-spacing: 0.5px; }
.kpi-row span { color: #0284c7; font-size: 13px; font-weight: 700; margin-left: 4px; }

/* FILTER BAR */
.filter-bar { display: flex; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; align-items: center; overflow: hidden; }
.filter-bar > div { display: flex; gap: 8px !important; width: 100%; justify-content: space-between; }
.filter-btn { flex: 1; text-align: center; background: white; border: 1px solid #cbd5e1; padding: 8px 0; border-radius: 20px; font-size: 12px; font-weight: 500; color: #64748b; cursor: pointer; transition: 0.2s; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.02); }
.filter-btn.active { background: #00264b; color: white; border-color: #00264b; box-shadow: 0 4px 12px rgba(0,38,75,0.25); font-weight: 600; }
.btn-new-report { background: #10b981; color: white; border-color: #10b981; font-weight: 700; box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
.btn-new-report:hover { background: #059669; border-color: #059669; transform: translateY(-1px); }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 20px 24px; background: #fff; }

/* CARD ITEMS */
.card-item { background: white; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; margin-bottom: 16px; cursor: pointer; transition: 0.2s; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.card-item:hover { border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,38,75,0.08); }
/* ACTIVE SIDEBAR CARD STATE */
.card-item.active-card { 
    border-color: #0284c7 !important; 
    background: #f0f9ff !important; 
    transform: translateX(4px) !important; 
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.15) !important; 
}
.card-item.active-card .report-card-icon { 
    background: #0284c7 !important; 
    color: white !important; 
    border-color: #0284c7 !important; 
}

/* --- MODERN CLIENT CARDS --- */
.client-card { 
    display: flex; flex-direction: column; padding: 24px; text-align: left; 
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    cursor: pointer;
}
.client-card:hover .btn-view-details { background: #f1f5f9; border-color: #94a3b8; }

.client-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.client-card-header img { height: 45px; width: auto; max-width: 180px; object-fit: contain; object-position: left; }
.client-card-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; color: #64748b; flex-shrink: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }

.client-card-title { font-weight: 800; font-size: 22px; color: #0f172a; margin-bottom: 16px; letter-spacing: -0.5px;}

.client-stat-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.client-stat-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #334155; font-weight: 500; }
.client-stat-row svg { width: 16px; height: 16px; color: #64748b; flex-shrink: 0; }
.client-stat-row a { color: #0f172a; text-decoration: none; transition: 0.2s; }
.client-stat-row a:hover { color: #0284c7; text-decoration: underline; }

.lifetime-rev-box { border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; background: white; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.02); margin-bottom: 16px; }
.rev-label { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.rev-value { font-size: 32px; font-weight: 800; color: #0f172a; margin: 4px 0 16px 0; letter-spacing: -1px;}

.vip-progress-track { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: visible; position: relative; margin: 0 10px 16px 10px; }
.vip-progress-fill { height: 100%; background: #10b981; border-radius: 3px; position: relative; }
.vip-progress-thumb { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: white; border: 2px solid #cbd5e1; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.vip-badge { display: inline-block; background: #d1fae5; color: #047857; padding: 6px 14px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; }

.btn-view-details { padding: 10px 20px; border: 1px solid #cbd5e1; background: white; border-radius: 8px; font-size: 11px; font-weight: 700; color: #0f172a; cursor: pointer; align-self: flex-end; transition: 0.2s; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }

.report-card-icon { width: 44px; height: 44px; background: #f0f9ff; border: 1px solid #e0f2fe; color: #0284c7; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.2s; }
.card-item:hover .report-card-icon { background: #0284c7; color: white; border-color: #0284c7; transform: scale(1.05); }

.premise-card-image { height: 150px; background: #cbd5e1; border-radius: 8px; margin-bottom: 14px; overflow: hidden; position: relative; }
.premise-card-image img { width: 100%; height: 100%; object-fit: cover; }

/* STATUS PILLS */
.status-pill, select.status-select { padding: 5px 14px; border-radius: 20px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: white; border: 1px solid transparent; white-space: nowrap; }
.premise-card-image .status-pill { position: absolute; top: 10px; right: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
.reports-table .status-pill, .reports-table .status-select { position: relative; display: inline-block; }
.status-pill { pointer-events: none; }
select.status-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 16px; outline: none; transition: all 0.2s ease; background-repeat: no-repeat; background-position: right 8px center; background-size: 10px auto; }
select.status-select:hover { filter: brightness(0.95); }

.complete-status, .status-pill.complete, .status-select.complete { border-color: #10b981; background: #ecfdf5; color: #047857; }
.invoice-status, .status-pill.invoice, .status-select.invoice { border-color: #f43f5e; background: #fff1f2; color: #be123c; }
.inspection-status, .status-pill.inspection, .status-select.inspection { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.new-status, .status-pill.new, .status-select.new { border-color: #0ea5e9; background: #f0f9ff; color: #0369a1; }
.report-status, .status-pill.report, .status-select.report { border-color: #6366f1; background: #eef2ff; color: #4338ca; }
.advice-status, .status-pill.advice, .status-select.advice { border-color: #d946ef; background: #fdf4ff; color: #a21caf; }
.cancelled-status, .status-pill.cancelled, .status-select.cancelled { border-color: #4b443085; background: #5854492d; color: #4b443098; }
.active-status, .status-pill.active, .status-select.active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }

.card-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: #0f172a; }
.card-meta { font-size: 13px; color: #64748b; font-weight: 400; }

#adminMap, #premisesMap, gmp-map-3d { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
gmp-map-3d { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* DETAIL PANEL */
.detail-panel { position: absolute; top: 24px; left: 24px; bottom: 24px; width: 560px; background: white; border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,0.3); z-index: 50; display: none; flex-direction: column; overflow: hidden; border: 1px solid #e2e8f0; }
.detail-panel.active { display: flex; }
.detail-image { width: 100%; aspect-ratio: 10 / 8; background: #1e293b; position: relative; overflow: hidden; }
.detail-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; transition: opacity 0.3s; }
.video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(255,255,255,0.9); backdrop-filter: blur(5px); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(0,0,0,0.3); cursor: pointer; z-index: 10; transition: 0.2s; }
.video-overlay:hover { transform: translate(-50%, -50%) scale(1.1); background: white; }
.close-detail, .minimize-detail { width: 36px; height: 36px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); color: #0f172a; font-weight: 600; font-size: 14px; transition: 0.2s; }
.close-detail:hover, .minimize-detail:hover { transform: scale(1.1); }

/* Minimized Detail Panel State */
.detail-panel.minimized {
    width: 380px !important;
    bottom: auto !important;
    height: auto !important;
}
.detail-panel.minimized .detail-image {
    display: none !important;
}
.detail-panel.minimized .detail-content {
    padding-top: 65px !important; /* Leave space for absolute buttons */
    padding-bottom: 20px !important;
}
.detail-panel.minimized .detail-address,
.detail-panel.minimized .detail-grid,
.detail-panel.minimized .reports-header,
.detail-panel.minimized .reports-table {
    display: none !important;
}

.gallery-nav { position: absolute; top: 0; bottom: 0; width: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; opacity: 0; transition: 0.2s; background: rgba(0,0,0,0.2); color: white; font-size: 28px; font-weight: 600; }
.gallery-prev { left: 0; }
.gallery-next { right: 0; }
.detail-image:hover .gallery-nav { opacity: 1; }
.gallery-nav:hover { background: rgba(0,0,0,0.5); }
.gallery-counter { position: absolute; bottom: 16px; right: 16px; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); color: white; padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 500; z-index: 5; letter-spacing: 0.5px; }

/* New Maximize Button Style */
.maximize-detail {
    width: 36px; height: 36px; background: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    color: #0f172a; transition: 0.2s;
}
.maximize-detail:hover { transform: scale(1.1); background: #f0f9ff; color: #0284c7; }

/* --- TRUE LIGHTBOX MODE --- */
.detail-panel.fullscreen-gallery {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.95) !important; /* Deep dark backdrop */
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Hide the play button overlay specifically in lightbox mode */
.detail-panel.fullscreen-gallery .video-overlay {
    display: none !important;
}

.detail-panel.fullscreen-gallery .detail-image {
    flex: 1 !important; /* Take up all available space */
    height: 100% !important;
    width: 100% !important;
    background: transparent !important;
}

.detail-panel.fullscreen-gallery .detail-image img {
    object-fit: contain !important; /* Ensures full image is visible without cropping */
    background: #000;
}

/* Hide the text content entirely when in lightbox mode */
.detail-panel.fullscreen-gallery .detail-content {
    display: none !important;
}

/* Position the controls to float over the top of the image */
.detail-panel.fullscreen-gallery .panel-controls {
    top: 24px !important;
    left: 24px !important;
}

/* Style the counter to be more visible in fullscreen */
.detail-panel.fullscreen-gallery .gallery-counter {
    bottom: 30px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.detail-content { padding: 28px; overflow-y: auto; flex: 1; }
.detail-title { font-size: 22px; font-weight: 600; color: #0f172a; margin-bottom: 6px; letter-spacing: -0.3px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.data-label { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.data-value { font-size: 14px; font-weight: 500; color: #1e293b; }

.reports-table { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: auto; }
.reports-table th { text-align: left; font-size: 10px; color: #64748b; padding: 10px 4px; border-bottom: 2px solid #e2e8f0; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; }
.reports-table td { font-size: 12px; padding: 10px 4px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #334155; }

/* --- REPORTS TABLE LONG TEXT HOVER EXPANSION --- */
/* Target the first column (Property Name) */
.reports-table td:first-child {
    max-width: 160px; /* Forces the clipping boundary */
    white-space: nowrap; /* Keeps it on one line by default */
    overflow: hidden; 
    text-overflow: ellipsis; /* Adds the "..." */
    transition: all 0.2s ease;
}

/* When the user hovers over the cell, unwrap the text */
.reports-table td:first-child:hover {
    white-space: normal !important; /* Allows the text to drop to the next line */
    word-break: break-word; /* Prevents super long unbroken words from stretching the table */
}

.icon-btn { color: #00264b; transition: 0.2s; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 0; cursor: pointer; }
.icon-btn:hover { background: #00264b; color: white; border-color: #00264b; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,38,75,0.2); }
.icon-btn svg { width: 14px; height: 14px; }

.back-btn { font-size: 11px; color: #0284c7; font-weight: 600; cursor: pointer; float: right; padding: 10px; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.2s; }
.back-btn:hover { color: #0369a1; }

.marker-selected { width: 56px; height: 56px; background: white; border: 3px solid white; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; z-index: 2; position: relative; }
.marker-selected:hover, .marker-selected.marker-active { transform: scale(1.15); z-index: 100; box-shadow: 0 12px 30px rgba(0,0,0,0.4); border-color: #0284c7; }.marker-selected img { width: 100%; height: 100%; object-fit: cover; }
.marker-dot { width: 24px; height: 24px; background: #00264b; border: 3px solid white; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.2s; z-index: 1; }
.marker-dot:hover, .marker-dot.marker-active { transform: scale(1.3); z-index: 100; background: #0284c7; }

.spin { animation: rotation 2s infinite linear; }
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }

/* FLOATING BUTTON */
#requestReportBtn { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 100; display: none; }
.btn-float { background: #00264b; border: 2px solid rgba(255,255,255,0.2); padding: 14px 32px; border-radius: 30px; font-weight: 600; font-size: 14px; color: white; box-shadow: 0 12px 35px rgba(0,38,75,0.4); cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); letter-spacing: 0.5px; }
.btn-float:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(0,38,75,0.5); background: #001d3a; }

/* NATIVE MAPBOX CONTROLS */
.mapboxgl-ctrl-group { background: transparent !important; box-shadow: none !important; border: none !important; margin-right: 24px !important; margin-bottom: 30px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass { background: white !important; width: 40px !important; height: 40px !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important; border: 1px solid rgba(255,255,255,0.8) !important; transition: 0.2s !important; }
.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; }
.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { filter: invert(13%) sepia(50%) saturate(5000%) hue-rotate(200deg) brightness(80%) contrast(120%) !important; }
.mapboxgl-ctrl-group button.icon-ctrl-btn { background: white !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important; border: 1px solid rgba(255,255,255,0.8) !important; transition: 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; position: relative !important; }
.mapboxgl-ctrl-group button.icon-ctrl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; }
.auto-fix-status { position: absolute; right: 55px; top: 50%; transform: translateY(-50%); background: white; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #00264b; box-shadow: 0 6px 20px rgba(0,0,0,0.15); white-space: nowrap; pointer-events: none; border: 1px solid #e2e8f0; }
.mapboxgl-ctrl-bottom-right { z-index: 100 !important; }

/* MODALS */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-overlay.sub-modal { z-index: 10000; }
.modal-card { background: white; width: 580px; max-width: 90%; border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,0.4); overflow: hidden; transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(255,255,255,0.5); }
.modal-overlay.active .modal-card { transform: translateY(0) scale(1); }
.modal-header { background: #00264b; color: white; padding: 24px 28px; display: flex; justify-content: space-between; align-items: flex-start; }
.modal-header h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 4px; }
.modal-header h4 { font-weight: 500; font-size: 12px; color: #94a3b8; letter-spacing: 0.2px; margin: 0; }
.modal-close { cursor: pointer; color: white; font-size: 24px; opacity: 0.7; transition: 0.2s; background: none; border: none; padding: 0; margin-top: -2px; }
.modal-close:hover { opacity: 1; transform: scale(1.1); }
.modal-body { padding: 28px; max-height: 75vh; overflow-y: auto; }
.form-row { display: flex; gap: 16px; margin-bottom: 16px; }
.form-row .form-group { flex: 1; margin-bottom: 0; }
.file-upload-box { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 20px; text-align: center; background: #f8fafc; cursor: pointer; transition: 0.2s; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 100px; }
.file-upload-box:hover { border-color: #00264b; background: #f1f5f9; box-shadow: inset 0 0 0 1px rgba(0,38,75,0.05); }
.file-upload-box input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-label-text { font-size: 13px; font-weight: 600; color: #475569; }
.file-name-display { font-size: 11px; color: #0284c7; margin-top: 8px; font-weight: 500; word-break: break-all; }
.modal-footer { padding: 20px 28px; background: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 12px; }
.btn-cancel { padding: 12px 24px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; font-weight: 600; color: #475569; cursor: pointer; transition: 0.2s; }
.btn-cancel:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }

/* --- ZOOMED OUT MARKER OVERRIDES --- */
/* When the map zooms out, transform image markers into standard blue dots */
.zoomed-out .marker-selected {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background-color: #00264b !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important; /* Keep it perfectly centered */
}

/* Hide the actual image inside the marker when zoomed out */
.zoomed-out .marker-selected img {
    display: none !important;
}

.zoomed-out .marker-selected.marker-active { background-color: #0284c7 !important; transform: translate(-50%, -50%) scale(1.5) !important; }

/* Hide the mobile elements by default (Desktop view) */
.mobile-layout { display: none !important; }
.mobile-layout-dot { display: none !important; }
.mobile-only { display: none !important; } /* <--- THIS PREVENTS LEAKS! */

/* ==========================================
   📱 DEVICE SIMULATOR & TIERED RESPONSIVENESS
   ========================================== */

/* 1. Workbench Setup */
html:has(body.sim-mobile), html:has(body.sim-foldable), html:has(body.sim-tablet) {
    background: #cbd5e1; display: flex; align-items: center; justify-content: center; min-height: 100vh;
}

/* 2. Simulator Shapes */
body.sim-mobile, body.sim-foldable, body.sim-tablet { 
    border: 14px solid #0f172a; box-shadow: 0 25px 80px rgba(0,0,0,0.5); transform: translateZ(0); position: relative; margin: 0 !important; overflow: hidden; 
}
body.sim-mobile   { border-radius: 40px; }
body.sim-foldable { border-radius: 30px; }
body.sim-tablet   { border-radius: 24px; }

/* ----------------------------------------------------
   🛠️ TIER 1: ALL MOBILE, FOLDABLE & TABLET PORTRAIT (< 900px)
   ---------------------------------------------------- */
@media (max-width: 900px) {
    .screen { position: absolute !important; height: 100% !important; width: 100% !important; overflow: hidden !important; }
    .sidebar { width: 100% !important; height: 100% !important; border: none !important; z-index: 10; position: absolute; top: 0; left: 0; box-shadow: none !important; overflow: hidden !important; }
    .sidebar-scroll { overflow-x: hidden !important; overflow-y: auto; width: 100%; } 
    
    /* Removed #clientListScreen .main-content from the display: none block */
    #tabQuotesBtn, #btnEnrichData { display: none !important; }
    
    /* AGGRESSIVE SCROLLBAR REMOVAL & SWIPE CONTAINER (Now applies to BOTH screens) */
    #premisesScreen .main-content, #clientListScreen .main-content { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
        z-index: -1; opacity: 0; pointer-events: none; 
        display: flex !important; flex-direction: row !important; 
        overflow-x: auto !important; overflow-y: hidden !important; 
        scroll-snap-type: x mandatory; scroll-behavior: smooth; background: #e2e8f0; 
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }
    #premisesScreen .main-content::-webkit-scrollbar, #clientListScreen .main-content::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
    
    /* Reveal the container when the Detail Panel is clicked */
    #premisesScreen:has(.detail-panel.active) .main-content, 
    #clientListScreen:has(.detail-panel.active) .main-content { 
        z-index: 50; opacity: 1; pointer-events: all; 
    }
    
    /* Make sure BOTH maps behave correctly in the swipe row */
    .detail-panel { position: relative !important; width: 100% !important; height: 100% !important; flex-shrink: 0; scroll-snap-align: start; border-radius: 0 !important; order: 1 !important; overflow: hidden !important; }
    #premisesMap, #adminMap { position: relative !important; width: 100% !important; height: 100% !important; flex-shrink: 0; scroll-snap-align: start; order: 2 !important; overflow: hidden !important; }

    .detail-content { overflow-y: auto !important; overflow-x: hidden !important; } /* THE ONLY ALLOWED SCROLLBAR */

    /* Login Compression */
    .login-card { width: 330px; padding: 24px !important; }
    .login-header h1 { font-size: 24px; }
    .login-header p { font-size: 11px; margin-bottom: 20px; }
    .form-group { margin-bottom: 15px; }

    .desktop-layout { display: none !important; }
    .mobile-layout { display: flex !important; }
    .mobile-layout-dot { display: block !important; }
    .client-card { padding: 24px 16px !important; }
    
    .detail-image { aspect-ratio: auto !important; height: 30vh !important; min-height: 220px !important; max-height: 350px !important; }
}

/* ----------------------------------------------------
   🛠️ PHONE LANDSCAPE SPECIFIC 
   ---------------------------------------------------- */
@media (max-height: 500px) and (max-width: 900px) {
    .login-card { top: 60%; width: 450px; max-width: 95%; padding: 16px 24px !important; display: flex; flex-direction: column; }
    .login-header { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 10px; }
    .login-header h1 { font-size: 20px; margin: 0; }
    .login-header p { display: none; } 
    .login-card .form-group { margin-bottom: 8px; }
    .form-label { margin-bottom: 2px; font-size: 11px; }
    .form-input { padding: 8px 12px; font-size: 13px; }
    .btn-access { padding: 10px; margin-top: 5px; }
    .detail-image { min-height: 180px !important; height: 180px !important; }
}

/* ----------------------------------------------------
   🛠️ TIER 2: FOLDABLES & TABLET PORTRAIT (481px - 900px)
   ---------------------------------------------------- */
@media (min-width: 481px) and (max-width: 900px) {
    .detail-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px; }
    .detail-grid > div:nth-child(5) { grid-column: span 4 !important; }
    .reports-table { display: table !important; width: 100% !important; }
    
    #clientList, #premisesList { 
        display: grid !important; 
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
        grid-auto-rows: max-content !important; 
        gap: 16px !important; 
        align-items: stretch !important;
        height: auto !important;
        width: 100% !important;
    }
    #clientList .card-item, #premisesList .card-item { margin-bottom: 0 !important; height: auto !important; }
}

/* ----------------------------------------------------
   🛠️ TIER 3: TINY PHONES PORTRAIT (< 480px)
   ---------------------------------------------------- */
@media (max-width: 480px) {
    .login-card { width: 90%; padding: 20px !important; }
    .detail-grid { grid-template-columns: 1fr 1fr; }
    .reports-table { display: block; overflow-x: auto; }
}

/* ----------------------------------------------------
   SIMULATOR OVERRIDES 
   ---------------------------------------------------- */

body.sim-mobile .screen, body.sim-foldable .screen, body.sim-tablet .screen { position: absolute !important; height: 100% !important; width: 100% !important; overflow: hidden !important; }
body.sim-mobile .sidebar, body.sim-foldable .sidebar, body.sim-tablet .sidebar { height: 100% !important; }
body.sim-mobile .main-content, body.sim-foldable .main-content, body.sim-tablet .main-content { height: 100% !important; }

body.sim-mobile .sidebar, body.sim-foldable .sidebar, body.sim-tablet.sim-portrait .sidebar { width: 100% !important; border: none !important; z-index: 10; position: absolute; top: 0; left: 0; box-shadow: none !important; overflow-x: hidden !important; }
body.sim-mobile .sidebar-scroll, body.sim-foldable .sidebar-scroll, body.sim-tablet.sim-portrait .sidebar-scroll { overflow-x: hidden !important; width: 100%; }

body.sim-mobile #clientListScreen .main-content, body.sim-foldable #clientListScreen .main-content, body.sim-tablet.sim-portrait #clientListScreen .main-content { display: none !important; }
/* Removed clientListScreen .main-content from display: none */
body.sim-mobile #tabQuotesBtn, body.sim-foldable #tabQuotesBtn, body.sim-tablet.sim-portrait #tabQuotesBtn { display: none !important; }

/* AGGRESSIVE SCROLLBAR REMOVAL FOR SIMULATOR SWIPE CONTAINER (BOTH SCREENS) */
body.sim-mobile #premisesScreen .main-content, body.sim-foldable #premisesScreen .main-content, body.sim-tablet.sim-portrait #premisesScreen .main-content,
body.sim-mobile #clientListScreen .main-content, body.sim-foldable #clientListScreen .main-content, body.sim-tablet.sim-portrait #clientListScreen .main-content { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; display: flex !important; flex-direction: row !important; 
    overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; 
    scrollbar-width: none !important; -ms-overflow-style: none !important;
}

body.sim-mobile #premisesScreen .main-content::-webkit-scrollbar, body.sim-foldable #premisesScreen .main-content::-webkit-scrollbar, body.sim-tablet.sim-portrait #premisesScreen .main-content::-webkit-scrollbar,
body.sim-mobile #clientListScreen .main-content::-webkit-scrollbar, body.sim-foldable #clientListScreen .main-content::-webkit-scrollbar, body.sim-tablet.sim-portrait #clientListScreen .main-content::-webkit-scrollbar { 
    display: none !important; width: 0 !important; height: 0 !important; 
}

body.sim-mobile #premisesScreen:has(.detail-panel.active) .main-content, body.sim-foldable #premisesScreen:has(.detail-panel.active) .main-content, body.sim-tablet.sim-portrait #premisesScreen:has(.detail-panel.active) .main-content,
body.sim-mobile #clientListScreen:has(.detail-panel.active) .main-content, body.sim-foldable #clientListScreen:has(.detail-panel.active) .main-content, body.sim-tablet.sim-portrait #clientListScreen:has(.detail-panel.active) .main-content { 
    z-index: 50; opacity: 1; pointer-events: all; 
}

/* FIX: Absolute geometry reset to ensure zero bleeding between panels */
body.sim-mobile .detail-panel, body.sim-foldable .detail-panel, body.sim-tablet.sim-portrait .detail-panel { 
    position: relative !important; width: 100% !important; height: 100% !important; flex-shrink: 0; scroll-snap-align: start; order: 1 !important; overflow: hidden !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important;
}

/* Added #adminMap to the swipe logic */
body.sim-mobile #premisesMap, body.sim-foldable #premisesMap, body.sim-tablet.sim-portrait #premisesMap,
body.sim-mobile #adminMap, body.sim-foldable #adminMap, body.sim-tablet.sim-portrait #adminMap { 
    position: relative !important; width: 100% !important; height: 100% !important; flex-shrink: 0; scroll-snap-align: start; order: 2 !important; overflow: hidden !important; 
    top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; margin: 0 !important; border: none !important;
}

body.sim-mobile .detail-content, body.sim-foldable .detail-content, body.sim-tablet.sim-portrait .detail-content { overflow-y: auto !important; overflow-x: hidden !important; }

body.sim-mobile .login-card, body.sim-foldable .login-card, body.sim-tablet.sim-portrait .login-card { padding: 20px !important; max-height: 90%; overflow-y: auto; width: 320px; }
body.sim-mobile.sim-landscape .login-card, body.sim-foldable.sim-landscape .login-card { width: 450px; max-width: 95%; padding: 15px 24px !important; }
body.sim-mobile.sim-landscape .login-header p, body.sim-foldable.sim-landscape .login-header p { display: none; }

body.sim-mobile .desktop-layout, body.sim-foldable .desktop-layout, body.sim-tablet.sim-portrait .desktop-layout { display: none !important; }
body.sim-mobile .mobile-layout, body.sim-foldable .mobile-layout, body.sim-tablet.sim-portrait .mobile-layout { display: flex !important; }
body.sim-mobile .mobile-layout-dot, body.sim-foldable .mobile-layout-dot, body.sim-tablet.sim-portrait .mobile-layout-dot { display: block !important; }

body.sim-foldable #clientList, body.sim-tablet.sim-portrait #clientList, body.sim-foldable #premisesList, body.sim-tablet.sim-portrait #premisesList {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: max-content !important; gap: 16px !important; align-items: stretch !important; height: auto !important; width: 100% !important;
}
body.sim-foldable #clientList .card-item, body.sim-tablet.sim-portrait #clientList .card-item, body.sim-foldable #premisesList .card-item, body.sim-tablet.sim-portrait #premisesList .card-item { margin-bottom: 0 !important; height: auto !important; }

body.sim-mobile .detail-image, body.sim-foldable .detail-image, body.sim-tablet.sim-portrait .detail-image { aspect-ratio: auto !important; height: 30vh !important; min-height: 220px !important; max-height: 350px !important; }
body.sim-landscape .detail-image { min-height: 180px !important; height: 180px !important; }

/* ==========================================
   🚨 CRITICAL VISIBILITY OVERRIDES 
   ========================================== */
.mobile-only { display: none !important; }
@media (max-width: 900px) { .mobile-only { display: flex !important; } }
body.sim-mobile .mobile-only, body.sim-foldable .mobile-only, body.sim-tablet.sim-portrait .mobile-only { display: flex !important; }

@media (max-width: 900px) { #btnEnrichData { display: none !important; } }
body.sim-mobile #btnEnrichData, body.sim-foldable #btnEnrichData, body.sim-tablet.sim-portrait #btnEnrichData { display: none !important; }

/* ----------------------------------------------------
   TABLET LANDSCAPE 3-COLUMN OVERRIDE
   ---------------------------------------------------- */
body.sim-tablet.sim-landscape #clientList, 
body.sim-tablet.sim-landscape #premisesList {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ==========================================
   🚨 MODAL RESPONSIVENESS & SIMULATOR FIXES
   ========================================== */

/* 1. Fix for real mobile/tablet screens */
@media (max-width: 900px) {
    .modal-card { width: 95% !important; max-height: 90% !important; display: flex; flex-direction: column; }
    .modal-body { flex: 1; overflow-y: auto; max-height: none !important; }
}

/* 2. Trapping the overlay strictly inside the simulator */
body.sim-mobile .modal-overlay, 
body.sim-foldable .modal-overlay, 
body.sim-tablet .modal-overlay {
    position: absolute !important; 
    width: 100% !important; 
    height: 100% !important;
}

/* 3. Overriding the inline 750px width and 75vh height */
body.sim-mobile .modal-card, 
body.sim-foldable .modal-card, 
body.sim-tablet .modal-card { 
    width: 95% !important; 
    max-height: 90% !important; 
    display: flex !important; 
    flex-direction: column !important; 
}

/* 4. Forcing the inner body to handle the scroll so the header/footer stay visible */
body.sim-mobile .modal-body, 
body.sim-foldable .modal-body, 
body.sim-tablet .modal-body { 
    flex: 1 !important; 
    overflow-y: auto !important; 
    max-height: none !important; 
}

/* ==========================================
   🚨 MODAL SCROLLING & FORM WRAPPER FIX
   ========================================== */

/* 1. Fix for real mobile/tablet screens */
@media (max-width: 900px) {
    .modal-card form { 
        display: flex !important; 
        flex-direction: column !important; 
        flex: 1 !important; 
        min-height: 0 !important; 
    }
}

/* 2. Fix for all Simulator shapes */
body.sim-mobile .modal-card form, 
body.sim-foldable .modal-card form, 
body.sim-tablet .modal-card form { 
    display: flex !important; 
    flex-direction: column !important; 
    flex: 1 !important; 
    min-height: 0 !important; 
}

/* ==========================================
   🚨 MODAL HEADER SQUISH FIX (PHONES)
   ========================================== */

@media (max-width: 480px) {
    /* Stacks "Property Manager" and "+ Add New Contact" */
    .label-with-action { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 6px; 
    }
    /* Stacks "Premises Details" and "+ Add Another Premise" */
    #requestReportForm .modal-body > div[style*="space-between"] { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 12px; 
    }
}

/* Apply the exact same logic to the Laptop Simulator */
body.sim-mobile .label-with-action { 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 6px; 
}
body.sim-mobile #requestReportForm .modal-body > div[style*="space-between"] { 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 12px; 
}

/* ==========================================
   🚨 DYNAMIC MODAL FORM SQUISH FIX
   ========================================== */

/* 1. Foldable & Tablet Portrait (Intermediate Size - Drops from 4 cols to 2 cols) */
@media (max-width: 900px) {
    .form-row { flex-direction: column; gap: 12px; }
    .premise-req-row div[style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
    .premise-req-row [style*="grid-column: span 4"] { grid-column: span 2 !important; }
}
body.sim-foldable .form-row, body.sim-tablet.sim-portrait .form-row { flex-direction: column; gap: 12px; }
body.sim-foldable .premise-req-row div[style*="repeat(4, 1fr)"], body.sim-tablet.sim-portrait .premise-req-row div[style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
body.sim-foldable .premise-req-row [style*="grid-column: span 4"], body.sim-tablet.sim-portrait .premise-req-row [style*="grid-column: span 4"] { grid-column: span 2 !important; }

/* 2. Phone (Tiny Size - Drops EVERYTHING to a single column, reclaims padding) */
@media (max-width: 480px) {
    /* Removed the ">" so it targets NESTED inline grids too! */
    .premise-req-row div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .premise-req-row [style*="grid-column"] { grid-column: span 1 !important; }
    /* Reclaim wasted space on tiny screens */
    .premise-req-row { padding: 16px !important; } 
    .premise-req-row > div[style*="padding: 20px"] { padding: 12px !important; } 
}
body.sim-mobile .form-row { flex-direction: column; gap: 12px; }
body.sim-mobile .premise-req-row div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
body.sim-mobile .premise-req-row [style*="grid-column"] { grid-column: span 1 !important; }
body.sim-mobile .premise-req-row { padding: 16px !important; }
body.sim-mobile .premise-req-row > div[style*="padding: 20px"] { padding: 12px !important; }

/* Style the Xero Multi-Select Dropdowns */
.xero-select-box {
    width: 100%;
    height: 120px; /* Taller so you can see more names */
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    padding: 8px;
    color: #334155;
    background-color: #ffffff;
}

.xero-select-box option {
    padding: 6px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.xero-select-box option:checked {
    background-color: #0ea5e9 !important;
    color: white;
}