/** * Field Officer — full-dashboard glass theme * Scoped to body.role-field-worker (other roles unchanged). * * Theme attribute lives on — dark rules use * html[data-theme="dark"] body.role-field-worker … * * Backup: _backup_pre_officer_glass/ (ask before deleting) */ /* ——— Light canvas ——— */ body.role-field-worker { background: radial-gradient(ellipse 90% 70% at 8% -10%, rgba(184, 224, 200, 0.55), transparent 52%), radial-gradient(ellipse 70% 55% at 100% 0%, rgba(13, 72, 50, 0.12), transparent 48%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(228, 242, 234, 0.7), transparent 55%), linear-gradient(180deg, #eef5ef 0%, #f3f6f3 40%, #e8f0ea 100%); background-attachment: fixed; } /* ——— Dark canvas (Clasy-inspired: charcoal + soft color blooms) ——— */ html[data-theme="dark"] body.role-field-worker { --glass-ink: #f4f7f5; --glass-ink-soft: #c5d0c9; --glass-ink-mute: #9aaba2; --glass-label: #9fe0bc; --glass-rim: rgba(255, 255, 255, 0.14); --glass-rim-strong: rgba(255, 255, 255, 0.22); --glass-panel: linear-gradient( 165deg, rgba(48, 58, 52, 0.92) 0%, rgba(28, 34, 31, 0.88) 45%, rgba(22, 26, 24, 0.9) 100% ); --glass-panel-soft: linear-gradient( 165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100% ); --glass-warm: #e2a878; --glass-mint: #7dcea0; color: var(--glass-ink); background: radial-gradient(ellipse 70% 55% at 12% 0%, rgba(226, 168, 120, 0.14), transparent 55%), radial-gradient(ellipse 65% 50% at 92% 8%, rgba(125, 206, 160, 0.14), transparent 50%), radial-gradient(ellipse 55% 45% at 50% 100%, rgba(80, 120, 100, 0.12), transparent 55%), linear-gradient(180deg, #0c0e0d 0%, #101312 42%, #0e1210 100%); background-attachment: fixed; } /* ——— Shell / sidebar ——— */ body.role-field-worker .app-shell, body.role-field-worker .app-main, body.role-field-worker .app-main > main, body.role-field-worker #app-header { background: transparent !important; } body.role-field-worker .app-sidebar, body.role-field-worker .sidebar-field { background: rgba(255, 255, 255, 0.42); border-right: 1px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 4px 0 32px rgba(13, 72, 50, 0.06), 1px 0 0 rgba(255, 255, 255, 0.4) inset; } html[data-theme="dark"] body.role-field-worker .app-sidebar, html[data-theme="dark"] body.role-field-worker .sidebar-field { background: linear-gradient(180deg, rgba(32, 38, 35, 0.92), rgba(18, 22, 20, 0.94)); border-right: 1px solid var(--glass-rim); box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45); } body.role-field-worker .sidebar-brand { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.35); } html[data-theme="dark"] body.role-field-worker .sidebar-brand { border-bottom-color: var(--glass-rim); } html[data-theme="dark"] body.role-field-worker .sidebar-brand-text strong, html[data-theme="dark"] body.role-field-worker .sidebar-brand-text { color: var(--glass-ink); } html[data-theme="dark"] body.role-field-worker .sidebar-brand-text span, html[data-theme="dark"] body.role-field-worker .sidebar-section-label, html[data-theme="dark"] body.role-field-worker .sidebar-foot .platform-owner-note { color: var(--glass-ink-mute) !important; } body.role-field-worker .sidebar-nav .tab { background: transparent; border: 1px solid transparent; border-radius: 14px; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } body.role-field-worker .sidebar-nav .tab:hover { background: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.5); color: var(--text); } body.role-field-worker .sidebar-nav .tab.active { background: rgba(228, 242, 234, 0.75); border-color: rgba(13, 72, 50, 0.14); color: #0d4832; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset; } body.role-field-worker .sidebar-nav .tab.active::before { background: #0d4832; border-radius: 999px; } html[data-theme="dark"] body.role-field-worker .sidebar-nav .tab { color: var(--glass-ink-soft); } html[data-theme="dark"] body.role-field-worker .sidebar-nav .tab:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--glass-rim); color: var(--glass-ink); } html[data-theme="dark"] body.role-field-worker .sidebar-nav .tab.active { background: linear-gradient(135deg, rgba(226, 168, 120, 0.95), rgba(210, 140, 90, 0.9)); border-color: rgba(226, 168, 120, 0.55); color: #14110e; box-shadow: 0 8px 22px rgba(226, 168, 120, 0.22); } html[data-theme="dark"] body.role-field-worker .sidebar-nav .tab.active::before { display: none; } body.role-field-worker .sidebar-foot { border-top: 1px solid rgba(255, 255, 255, 0.35); } html[data-theme="dark"] body.role-field-worker .sidebar-foot { border-top-color: var(--glass-rim); } /* Header buttons */ body.role-field-worker #app-header button.secondary, body.role-field-worker #app-header .toolbar-btn { background: rgba(255, 255, 255, 0.48); border: 1px solid rgba(255, 255, 255, 0.62); color: #0d4832; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; border-radius: 14px; } html[data-theme="dark"] body.role-field-worker #app-header button.secondary, html[data-theme="dark"] body.role-field-worker #app-header .toolbar-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-rim-strong); color: var(--glass-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; } html[data-theme="dark"] body.role-field-worker #app-header button.secondary:hover, html[data-theme="dark"] body.role-field-worker #app-header .toolbar-btn:hover { background: rgba(255, 255, 255, 0.14); } html[data-theme="dark"] body.role-field-worker .dash-title, html[data-theme="dark"] body.role-field-worker .map-title, html[data-theme="dark"] body.role-field-worker #app-header h1, html[data-theme="dark"] body.role-field-worker .header-user { color: var(--glass-ink) !important; } html[data-theme="dark"] body.role-field-worker .dash-subtitle, html[data-theme="dark"] body.role-field-worker .map-subtitle, html[data-theme="dark"] body.role-field-worker .meta, html[data-theme="dark"] body.role-field-worker #filter-summary { color: var(--glass-ink-mute) !important; } /* ——— Shared glass surfaces (light) ——— */ body.role-field-worker .dash-kpi, body.role-field-worker .dash-card, body.role-field-worker .dash-workload, body.role-field-worker .stat-card, body.role-field-worker .officer-case-card, body.role-field-worker .officer-next-row, body.role-field-worker .table-wrap, body.role-field-worker .reports-filters, body.role-field-worker .map-toolbar, body.role-field-worker .map-legend, body.role-field-worker #map-legend, body.role-field-worker .map-legend-panel, body.role-field-worker .notif-card, body.role-field-worker .notification-item, body.role-field-worker .inline-form, body.role-field-worker .dash-alert:not(.hidden) { background: rgba(255, 255, 255, 0.44); border: 1px solid rgba(255, 255, 255, 0.58); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 10px 32px rgba(13, 72, 50, 0.08), 0 1px 0 rgba(255, 255, 255, 0.65) inset; } /* Dark glass panels — lifted charcoal with rim light + top sheen */ html[data-theme="dark"] body.role-field-worker .dash-kpi, html[data-theme="dark"] body.role-field-worker .dash-card, html[data-theme="dark"] body.role-field-worker .dash-workload, html[data-theme="dark"] body.role-field-worker .stat-card, html[data-theme="dark"] body.role-field-worker .officer-case-card, html[data-theme="dark"] body.role-field-worker .officer-next-row, html[data-theme="dark"] body.role-field-worker .table-wrap, html[data-theme="dark"] body.role-field-worker .reports-filters, html[data-theme="dark"] body.role-field-worker .map-toolbar, html[data-theme="dark"] body.role-field-worker .map-legend, html[data-theme="dark"] body.role-field-worker #map-legend, html[data-theme="dark"] body.role-field-worker .map-legend-panel, html[data-theme="dark"] body.role-field-worker .notif-card, html[data-theme="dark"] body.role-field-worker .notification-item, html[data-theme="dark"] body.role-field-worker .inline-form, html[data-theme="dark"] body.role-field-worker .dash-alert:not(.hidden), html[data-theme="dark"] body.role-field-worker #tab-notifications li, html[data-theme="dark"] body.role-field-worker .notification-row { background: var(--glass-panel); border: 1px solid var(--glass-rim); color: var(--glass-ink); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 -1px 0 rgba(0, 0, 0, 0.35) inset; } html[data-theme="dark"] body.role-field-worker .dash-kpi:hover, html[data-theme="dark"] body.role-field-worker .officer-case-card:hover, html[data-theme="dark"] body.role-field-worker .officer-next-row:hover { border-color: var(--glass-rim-strong); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.16) inset; } /* ——— My Day ——— */ body.role-field-worker .dash-kpi { border-radius: 22px; padding: 20px 22px; min-height: 120px; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } body.role-field-worker .dash-kpi:hover { transform: translateY(-2px); } html[data-theme="dark"] body.role-field-worker .dash-kpi-label { color: var(--glass-ink-mute) !important; } html[data-theme="dark"] body.role-field-worker .dash-kpi-value { color: var(--glass-ink) !important; } html[data-theme="dark"] body.role-field-worker .dash-kpi-value.tone-info { color: var(--glass-mint) !important; } html[data-theme="dark"] body.role-field-worker .dash-kpi-value.tone-danger { color: #ff8a80 !important; } html[data-theme="dark"] body.role-field-worker .dash-kpi-value.tone-warning { color: #ffcc80 !important; } body.role-field-worker .dash-kpi-featured { background: linear-gradient(155deg, rgba(13, 72, 50, 0.88) 0%, rgba(26, 107, 74, 0.78) 100%) !important; border: 1px solid rgba(184, 224, 200, 0.4) !important; color: #fff; box-shadow: 0 16px 40px rgba(13, 72, 50, 0.28), 0 1px 0 rgba(255, 255, 255, 0.22) inset !important; } html[data-theme="dark"] body.role-field-worker .dash-kpi-featured { background: linear-gradient(160deg, #0d4832 0%, #166b4a 100%) !important; border: 1px solid rgba(184, 224, 200, 0.28) !important; color: #fff !important; box-shadow: 0 18px 44px rgba(13, 72, 50, 0.45), 0 1px 0 rgba(255, 255, 255, 0.18) inset !important; } html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-label, html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-value, html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-value.tone-info, html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-value.tone-danger, html[data-theme="dark"] body.role-field-worker .dash-kpi-featured .dash-kpi-value.tone-warning { color: #fff !important; } body.role-field-worker .dash-card { border-radius: 22px; padding: 18px 20px 14px; } html[data-theme="dark"] body.role-field-worker .dash-card-head h3, html[data-theme="dark"] body.role-field-worker .dash-card-head .linkish { color: var(--glass-ink) !important; } html[data-theme="dark"] body.role-field-worker .dash-list li { color: var(--glass-ink-soft); border-color: rgba(255, 255, 255, 0.08); } body.role-field-worker .dash-alert:not(.hidden) { border-radius: 18px; padding: 14px 16px; } html[data-theme="dark"] body.role-field-worker .dash-alert:not(.hidden) { background: linear-gradient(135deg, rgba(226, 168, 120, 0.18), rgba(125, 206, 160, 0.1)); border-color: rgba(226, 168, 120, 0.35); color: var(--glass-ink); } /* ——— Next up ——— */ body.role-field-worker .officer-next-row { border-radius: 16px; padding: 12px 14px; } html[data-theme="dark"] body.role-field-worker .officer-next-token { color: var(--glass-mint) !important; } html[data-theme="dark"] body.role-field-worker .officer-next-meta { color: var(--glass-ink-mute) !important; } html[data-theme="dark"] body.role-field-worker .officer-next-row.is-urgent { background: linear-gradient(165deg, rgba(90, 40, 40, 0.75), rgba(40, 24, 24, 0.85)); border-color: rgba(255, 138, 128, 0.35); } html[data-theme="dark"] body.role-field-worker .officer-next-row .status-advance-btn { background: linear-gradient(135deg, #7dcea0, #4ea87a); color: #0c1611; border: none; } html[data-theme="dark"] body.role-field-worker .officer-next-row .btn-officer-nav, html[data-theme="dark"] body.role-field-worker .officer-next-row .secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-rim-strong); color: var(--glass-ink); width: auto; margin-top: 0; } /* ——— My Cases ——— */ body.role-field-worker .officer-case-card { border-radius: 22px; min-height: 0; } html[data-theme="dark"] body.role-field-worker .officer-case-token { color: var(--glass-mint) !important; } html[data-theme="dark"] body.role-field-worker .officer-case-title, html[data-theme="dark"] body.role-field-worker .officer-case-title-btn { color: var(--glass-ink) !important; } html[data-theme="dark"] body.role-field-worker .officer-case-meta { color: var(--glass-ink-mute) !important; } html[data-theme="dark"] body.role-field-worker .officer-case-card.is-urgent { border-color: rgba(255, 138, 128, 0.4); background: linear-gradient(165deg, rgba(72, 36, 36, 0.85), rgba(28, 22, 22, 0.9)); } html[data-theme="dark"] body.role-field-worker .officer-case-card.is-selected { border-color: rgba(125, 206, 160, 0.55); box-shadow: 0 0 0 2px rgba(125, 206, 160, 0.25), 0 14px 40px rgba(0, 0, 0, 0.45); } body.role-field-worker .officer-chip { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html[data-theme="dark"] body.role-field-worker .officer-chip { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--glass-rim); color: var(--glass-ink-soft); box-shadow: none; } body.role-field-worker .officer-chip.active, html[data-theme="dark"] body.role-field-worker .officer-chip.active { background: linear-gradient(135deg, rgba(125, 206, 160, 0.95), rgba(78, 168, 122, 0.9)); border-color: rgba(125, 206, 160, 0.5); color: #0c1611; box-shadow: 0 8px 20px rgba(125, 206, 160, 0.2); } html[data-theme="dark"] body.role-field-worker .stat-card, html[data-theme="dark"] body.role-field-worker .stat-card strong { color: var(--glass-ink); } html[data-theme="dark"] body.role-field-worker .chip-sev-high, html[data-theme="dark"] body.role-field-worker .chip-sev-critical { background: rgba(255, 138, 128, 0.18) !important; color: #ffb4ae !important; border: 1px solid rgba(255, 138, 128, 0.28); } html[data-theme="dark"] body.role-field-worker .chip-status, html[data-theme="dark"] body.role-field-worker .chip-sev-low { background: rgba(125, 206, 160, 0.16) !important; color: #b6f0d0 !important; border: 1px solid rgba(125, 206, 160, 0.28); } html[data-theme="dark"] body.role-field-worker .chip-sev-medium { background: rgba(255, 204, 128, 0.16) !important; color: #ffe0a8 !important; border: 1px solid rgba(255, 204, 128, 0.28); } html[data-theme="dark"] body.role-field-worker .chip-assigned { background: rgba(144, 180, 255, 0.16) !important; color: #b8d0ff !important; border: 1px solid rgba(144, 180, 255, 0.28); } body.role-field-worker .reports-filters { border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; } body.role-field-worker .reports-filters input, body.role-field-worker .reports-filters select { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.65); } html[data-theme="dark"] body.role-field-worker .reports-filters input, html[data-theme="dark"] body.role-field-worker .reports-filters select { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--glass-rim); color: var(--glass-ink); } html[data-theme="dark"] body.role-field-worker .officer-case-actions .status-advance-btn { background: linear-gradient(135deg, #7dcea0, #4ea87a); color: #0c1611; border: none; box-shadow: 0 8px 20px rgba(125, 206, 160, 0.22); } html[data-theme="dark"] body.role-field-worker .officer-case-actions .btn-officer-nav, html[data-theme="dark"] body.role-field-worker .officer-case-actions .secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-rim-strong); color: var(--glass-ink); } /* ——— Field Map ——— */ body.role-field-worker .map-toolbar, body.role-field-worker .map-legend, body.role-field-worker #map-legend, body.role-field-worker .map-legend-panel { border-radius: 16px; padding: 12px 16px; } body.role-field-worker #map { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.55); } html[data-theme="dark"] body.role-field-worker #map { border: 1px solid var(--glass-rim); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] body.role-field-worker .map-legend-panel strong, html[data-theme="dark"] body.role-field-worker .map-legend, html[data-theme="dark"] body.role-field-worker #map-legend { color: var(--glass-ink-soft); } html[data-theme="dark"] body.role-field-worker .map-toolbar .toolbar-btn, html[data-theme="dark"] body.role-field-worker .map-toolbar button.secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-rim-strong); color: var(--glass-ink); width: auto; margin-top: 0; border-radius: 12px; } /* ——— Notifications ——— */ body.role-field-worker #tab-notifications li, body.role-field-worker .notification-row { border-radius: 14px; margin-bottom: 8px; padding: 12px 14px; } html[data-theme="dark"] body.role-field-worker .table-wrap th { color: var(--glass-ink-mute); background: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] body.role-field-worker .table-wrap td { color: var(--glass-ink-soft); border-bottom-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] body.role-field-worker .leaflet-popup-content-wrapper { background: linear-gradient(165deg, rgba(40, 48, 44, 0.96), rgba(22, 26, 24, 0.96)); border: 1px solid var(--glass-rim); color: var(--glass-ink); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] body.role-field-worker .leaflet-popup-content-wrapper .meta { color: var(--glass-ink-mute) !important; }