/* iOS-style look and feel – use with viewport + safe areas for PWA / mobile */ /* Add to : for status bar */ :root { --ios-blue: #007AFF; --ios-blue-tap: #0051D5; --ios-gray-bg: #f2f2f7; --ios-gray-group: #e5e5ea; --ios-separator: rgba(60, 60, 67, 0.12); --ios-label: rgba(60, 60, 67, 0.6); --ios-red: #ff3b30; --ios-green: #34c759; --ios-radius: 12px; --ios-radius-sm: 10px; --ios-radius-lg: 14px; --ios-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --ios-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08); } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif; margin: 0; padding: 0; background: var(--ios-gray-bg); color: #1c1c1e; -webkit-font-smoothing: antialiased; padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); min-height: 100vh; } /* Large title (iOS nav style) */ .ios-nav { background: rgba(242, 242, 247, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ios-separator); padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); margin: 0 -env(safe-area-inset-left) 0 -env(safe-area-inset-right); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } .ios-nav-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .ios-title { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; margin: 0; } .ios-nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .ios-nav-links a { color: var(--ios-blue); text-decoration: none; font-size: 17px; font-weight: 400; padding: 8px 12px; border-radius: var(--ios-radius-sm); -webkit-tap-highlight-color: transparent; } .ios-nav-links a:active { background: var(--ios-gray-group); } /* Content area */ .ios-content { padding: 16px; max-width: 800px; margin-left: auto; margin-right: auto; padding-bottom: max(16px, env(safe-area-inset-bottom)); } /* Grouped list (iOS Settings style) */ .ios-group { margin-bottom: 24px; } .ios-group-title { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ios-label); padding: 8px 16px 6px; margin: 0; } .ios-card { background: #fff; border-radius: var(--ios-radius); box-shadow: var(--ios-shadow-card); overflow: hidden; margin-bottom: 16px; } .ios-card-section { padding: 16px; border-bottom: 1px solid var(--ios-separator); } .ios-card-section:last-child { border-bottom: none; } .ios-card h2, .ios-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; } /* Form elements */ .ios-label { display: block; font-size: 13px; color: var(--ios-label); margin-bottom: 4px; } .ios-input, .ios-select { width: 100%; padding: 12px 14px; font-size: 17px; font-family: inherit; border: none; border-radius: var(--ios-radius-sm); background: var(--ios-gray-bg); -webkit-appearance: none; appearance: none; } .ios-input:focus, .ios-select:focus { outline: none; box-shadow: 0 0 0 2px var(--ios-blue); } .ios-input::placeholder { color: var(--ios-label); } /* Buttons */ .ios-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; font-size: 17px; font-weight: 600; font-family: inherit; border: none; border-radius: var(--ios-radius-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s, background 0.15s; } .ios-btn:active { opacity: 0.85; } .ios-btn-primary { background: var(--ios-blue); color: #fff; } .ios-btn-primary:active { background: var(--ios-blue-tap); } .ios-btn-secondary { background: var(--ios-gray-group); color: var(--ios-blue); } .ios-btn-danger { background: var(--ios-red); color: #fff; } .ios-btn-sm { padding: 8px 14px; font-size: 15px; } /* Tables as grouped rows */ .ios-table { width: 100%; border-collapse: collapse; font-size: 15px; } .ios-table th, .ios-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--ios-separator); } .ios-table th { font-weight: 600; color: var(--ios-label); font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; } .ios-table tr:last-child td { border-bottom: none; } .ios-table tbody tr { background: #fff; } .ios-table tbody tr:active { background: var(--ios-gray-bg); } /* Blur panel (for map overlay) */ .ios-panel { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-radius: var(--ios-radius-lg); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); border: 1px solid rgba(255, 255, 255, 0.8); } /* Segmented control (Lead / NLA style) */ .ios-segmented { display: inline-flex; background: var(--ios-gray-group); border-radius: var(--ios-radius-sm); padding: 3px; } .ios-segmented select { font-size: 15px; padding: 8px 14px; border-radius: 8px; border: none; background: transparent; color: #1c1c1e; font-weight: 500; cursor: pointer; } /* Inline form row */ .ios-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .ios-inline .ios-input, .ios-inline .ios-select { width: auto; min-width: 100px; } /* Messages */ .ios-error { color: var(--ios-red); font-size: 13px; margin-top: 6px; } .ios-success { color: var(--ios-green); font-size: 13px; margin-top: 6px; } /* Badge */ .ios-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--ios-blue); color: #fff; } /* Full-width content (e.g. map page) */ .ios-fullscreen { padding: 0; max-width: none; } /* Map toolbar – top left (Dashboard, Filters, Report) */ .ios-map-toolbar-left { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 1200; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .ios-map-toolbar-left a, .ios-map-toolbar-left .ios-pill { color: var(--ios-blue); text-decoration: none; font-size: 14px; padding: 6px 12px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-radius: 20px; box-shadow: var(--ios-shadow); -webkit-tap-highlight-color: transparent; } .ios-map-toolbar-left .ios-pill { font-weight: 500; border: none; cursor: pointer; color: #1c1c1e; } .ios-map-toolbar-left .ios-pill:active { opacity: 0.9; } /* Map toolbar – top right (gear only) */ .ios-map-toolbar-right { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 1200; } /* Account block: gear icon + display name + dropdown (Profile, Logout) */ .ios-account { position: relative; display: flex; flex-direction: column; align-items: center; margin-left: auto; } .ios-account .ios-gear { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--ios-shadow); cursor: pointer; color: #1c1c1e; -webkit-tap-highlight-color: transparent; } .ios-nav .ios-account .ios-gear { background: var(--ios-gray-group); } .ios-account .ios-gear:hover, .ios-account .ios-gear:focus { opacity: 0.9; } .ios-account .ios-gear:active { opacity: 0.85; } .ios-account .ios-user-name { font-size: 12px; color: var(--ios-label); margin-top: 2px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .ios-account-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 130px; max-height: min(280px, calc(100vh - 100px)); max-height: min(280px, calc(100dvh - 100px)); overflow-y: auto; background: #fff; border-radius: var(--ios-radius-sm); box-shadow: var(--ios-shadow-card); padding: 4px 0; z-index: 1300; border: 1px solid var(--ios-separator); } .ios-account-menu[hidden] { display: none !important; } .ios-account-menu a { display: block; padding: 8px 12px; font-size: 14px; line-height: 1.3; color: var(--ios-blue); text-decoration: none; -webkit-tap-highlight-color: transparent; } .ios-account-menu a:hover, .ios-account-menu a:active { background: var(--ios-gray-bg); } .ios-account-menu a.logout { color: var(--ios-red); } /* Switch (iOS toggle) – keep native for accessibility, style container */ .ios-switch-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; } .ios-switch-wrap input[type="checkbox"] { width: 51px; height: 31px; accent-color: var(--ios-green); cursor: pointer; } /* ── Field-ready bottom sheets ── */ .bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 32px rgba(0,0,0,0.18); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); z-index: 1400; max-height: 92dvh; overflow-y: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); will-change: transform; } .bottom-sheet.open { transform: translateY(0); } .sheet-handle { width: 36px; height: 4px; background: #d1d1d6; border-radius: 2px; margin: 12px auto 4px; } .sheet-title { font-size: 17px; font-weight: 700; text-align: center; padding: 4px 16px 12px; margin: 0; border-bottom: 1px solid var(--ios-separator); } .sheet-body { padding: 12px 16px 8px; } /* ── Large toggle buttons (species, sex, type) ── */ .tog { flex: 1; min-height: 52px; padding: 10px 6px; font-size: 15px; font-weight: 600; font-family: inherit; border: 2px solid #e5e5ea; border-radius: 12px; background: #fff; color: #1c1c1e; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s, border-color 0.12s, color 0.12s; text-align: center; } .tog:active { opacity: 0.8; } .tog.on { background: var(--ios-blue); border-color: var(--ios-blue); color: #fff; } .tog.cull-on { background: var(--ios-red); border-color: var(--ios-red); color: #fff; } /* ── Filter chips ── */ .filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border: 2px solid #e5e5ea; border-radius: 20px; font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s, border-color 0.12s, color 0.12s; } .filter-chip.checked { background: var(--ios-blue); border-color: var(--ios-blue); color: #fff; } /* ── Map bottom bar ── */ .map-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid rgba(0,0,0,0.08); display: flex; align-items: stretch; padding-bottom: env(safe-area-inset-bottom); z-index: 1200; } .map-bar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 4px; min-height: 56px; border: none; background: transparent; color: #636366; font-size: 11px; font-weight: 500; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; } .map-bar-btn:active { background: rgba(0,0,0,0.05); }