/** * TrailsIQ — Maintenance App CSS * Mobile-first, theme-free styles for the standalone maintenance PWA. */ /* ── Reset / Base ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Ensure html element has a white background so any sub-pixel gap at the bottom (e.g. from WP admin-bar margin-top on html) shows white, not the theme background colour. */ html { background: #fff; } .tiq-ma-body { overflow: hidden; /* dvh fills exactly the visible viewport — no gaps above or below the browser chrome in both standalone and in-browser contexts. */ height: 100dvh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1b2e1a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* White background: any sub-pixel gap shows as white rather than dark green. The login/loading screens have their own dark backgrounds. */ background: #fff; } .tiq-ma-screen { position: fixed; /* Honour the top notch via safe-area-inset-top. Extend to bottom: 0 — the panel adds padding-bottom so content stays above the home indicator while the panel background covers the gap. */ top: env(safe-area-inset-top, 0px); right: 0; bottom: 0; left: 0; display: flex; } /* ── WP Admin bar offset ─────────────────────────────────────────── */ /* WordPress adds .admin-bar to and a 32px (desktop) / 46px (mobile) top bar. Shift all fixed screens down to sit below it. */ .admin-bar .tiq-ma-screen { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .tiq-ma-screen { top: 46px; } } /* ── Loading overlay ─────────────────────────────────────────────── */ #tiq-ma-loading { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: #1b2e1a; } #tiq-ma-loading[hidden] { display: none; } .tiq-ma-spinner { width: 44px; height: 44px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: tiq-ma-spin 0.75s linear infinite; } @keyframes tiq-ma-spin { to { transform: rotate(360deg); } } /* ── Login Screen ────────────────────────────────────────────────── */ #tiq-ma-login { align-items: center; justify-content: center; background: #1b2e1a; padding: 24px; } #tiq-ma-login[hidden] { display: none; } .tiq-ma-login-card { width: 100%; max-width: 360px; padding: 40px 32px 36px; background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); } .tiq-ma-login-logo { width: 60px; height: 60px; margin: 0 auto 20px; background: #1b2e1a; border-radius: 16px; display: flex; align-items: center; justify-content: center; } .tiq-ma-login-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; text-align: center; color: #1b2e1a; margin-bottom: 4px; } .tiq-ma-login-subtitle { font-size: 13px; color: #9ca3af; text-align: center; margin-bottom: 30px; } .tiq-ma-login-field { margin-bottom: 12px; } .tiq-ma-login-input { width: 100%; padding: 14px 16px; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 16px; /* 16px prevents iOS auto-zoom */ font-family: inherit; color: #1b2e1a; background: #f9fafb; outline: none; transition: border-color 0.15s, background 0.15s; -webkit-appearance: none; } .tiq-ma-login-input:focus { border-color: #1b2e1a; background: #fff; } .tiq-ma-login-err { font-size: 13px; color: #dc2626; margin-bottom: 12px; padding: 10px 14px; background: #fef2f2; border-radius: 10px; border-left: 3px solid #dc2626; line-height: 1.4; } .tiq-ma-login-btn { width: 100%; padding: 15px; margin-top: 4px; background: #1b2e1a; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; letter-spacing: -0.01em; transition: opacity 0.15s; -webkit-tap-highlight-color: transparent; } .tiq-ma-login-btn:disabled { opacity: 0.6; cursor: default; } .tiq-ma-login-btn:not(:disabled):active { opacity: 0.82; } /* ── App Screen ──────────────────────────────────────────────────── */ #tiq-ma-app { flex-direction: column; background: #f5f7f4; } #tiq-ma-app[hidden] { display: none; } /* ── Header ──────────────────────────────────────────────────────── */ .tiq-ma-header { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 54px; background: #1b2e1a; color: #fff; position: relative; z-index: 10; } .tiq-ma-header-logo { flex-shrink: 0; width: 32px; height: auto; display: block; } .tiq-ma-header-title { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tiq-ma-user-label { font-size: 12px; color: rgba(255, 255, 255, 0.55); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; } .tiq-ma-pending-badge { flex-shrink: 0; padding: 4px 10px; background: var(--tiq-primary, #dd9b36); color: #1b2e1a; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; } .tiq-ma-pending-badge:active { opacity: 0.75; } .tiq-ma-pending-badge[hidden] { display: none; } /* ── Header menu ─────────────────────────────────────────────────── */ .tiq-ma-menu-wrap { flex-shrink: 0; position: relative; } .tiq-ma-menu-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .tiq-ma-menu-btn:active { background: rgba(255, 255, 255, 0.2); } .tiq-ma-menu-btn span { display: block; width: 16px; height: 2px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; } .tiq-ma-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); overflow: hidden; z-index: 100; } .tiq-ma-menu[hidden] { display: none; } .tiq-ma-menu-item { display: block; width: 100%; padding: 14px 18px; background: none; border: none; border-top: 1px solid #f0f0f0; font-size: 15px; font-family: inherit; font-weight: 500; color: #1b2e1a; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s; } .tiq-ma-menu-item:first-child { border-top: none; } .tiq-ma-menu-item:active { background: #f5f7f4; } .tiq-ma-menu-item--danger { color: #dc2626; } /* ── Map ─────────────────────────────────────────────────────────── */ #tiq-ma-map { flex: none; height: 40dvh; position: relative; transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Expanded panel: shrink map to give the list more room */ #tiq-ma-app.tiq-panel-expanded #tiq-ma-map { height: 20dvh; } /* ── Bottom panel ────────────────────────────────────────────────── */ .tiq-ma-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); /* Pad content above the home indicator; panel background covers the gap. */ padding-bottom: env(safe-area-inset-bottom, 0px); } /* Drag handle */ .tiq-ma-panel-handle { flex-shrink: 0; display: flex; justify-content: center; align-items: center; padding: 10px 0 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tiq-ma-handle-bar { width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; transition: background 0.15s; } .tiq-ma-panel-handle:hover .tiq-ma-handle-bar, .tiq-ma-panel-handle:focus .tiq-ma-handle-bar { background: #9ca3af; } /* Filter chips */ .tiq-ma-chips { flex-shrink: 0; display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tiq-ma-chips::-webkit-scrollbar { display: none; } .tiq-ma-chip { flex-shrink: 0; padding: 5px 14px; border: 1.5px solid #e5e7eb; border-radius: 20px; background: #fff; font-size: 13px; font-weight: 500; font-family: inherit; color: #6b7280; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: all 0.15s; } .tiq-ma-chip.active { background: #1b2e1a; border-color: #1b2e1a; color: #fff; font-weight: 700; } /* Filter row wrapper */ .tiq-ma-filters { flex-shrink: 0; display: flex; flex-direction: column; gap: 0; } /* Dropdown row */ .tiq-ma-dropdowns { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tiq-ma-dropdowns::-webkit-scrollbar { display: none; } .tiq-ma-select { flex-shrink: 0; padding: 5px 10px; border: 1.5px solid #e5e7eb; border-radius: 20px; background: #fff; font-size: 12px; font-weight: 500; font-family: inherit; color: #6b7280; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; outline: none; appearance: none; -webkit-appearance: none; /* Custom caret */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 26px; } .tiq-ma-select:focus { border-color: #1b2e1a; color: #1b2e1a; } /* Keep chips above dropdowns in their column */ .tiq-ma-filters .tiq-ma-chips { padding-bottom: 6px; } /* Issue count label */ .tiq-ma-count { flex-shrink: 0; padding: 0 16px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; } /* Issue list */ .tiq-ma-issue-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .tiq-ma-empty { padding: 24px 16px; font-size: 14px; color: #9ca3af; text-align: center; } .tiq-ma-issue-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.1s; } .tiq-ma-issue-row:active { background: #f9fafb; } .tiq-ma-issue-row__left { flex-shrink: 0; } .tiq-ma-issue-row__body { flex: 1; min-width: 0; } .tiq-ma-issue-row__arrow { flex-shrink: 0; color: #d1d5db; font-size: 20px; line-height: 1; } .tiq-ma-issue-row__trail { font-size: 14px; font-weight: 600; color: #1b2e1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tiq-ma-issue-row__meta { font-size: 12px; color: #9ca3af; margin-top: 2px; } .tiq-ma-issue-row__status { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 5px; } .tiq-ma-issue-row__status--open { background: #fef3c7; color: #92400e; } .tiq-ma-issue-row__status--in_progress { background: #dbeafe; color: #1e40af; } .tiq-ma-issue-row__status--resolved { background: #dcfce7; color: #166534; } /* ── Detail panel ────────────────────────────────────────────────── */ #tiq-ma-detail { position: fixed; top: env(safe-area-inset-top, 0px); right: 0; bottom: env(safe-area-inset-bottom, 0px); left: 0; z-index: 100; display: flex; flex-direction: column; background: #fff; } #tiq-ma-detail[hidden] { display: none; } .tiq-ma-detail-header { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; } .tiq-ma-detail-close { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border: none; border-radius: 50%; font-size: 16px; line-height: 1; color: #374151; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tiq-ma-detail-header-title { font-size: 16px; font-weight: 700; color: #1b2e1a; } .tiq-ma-detail-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 32px; } .tiq-ma-detail-map-img { width: 100%; max-height: 180px; object-fit: cover; display: block; } .tiq-ma-detail-trail { padding: 16px 16px 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #1b2e1a; } .tiq-ma-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; } .tiq-ma-detail-status { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 6px; } .tiq-ma-detail-status--open { background: #fef3c7; color: #92400e; } .tiq-ma-detail-status--in_progress { background: #dbeafe; color: #1e40af; } .tiq-ma-detail-status--resolved { background: #dcfce7; color: #166534; } .tiq-ma-detail-pill { display: inline-block; font-size: 11px; color: #6b7280; padding: 4px 10px; background: #f3f4f6; border-radius: 6px; } .tiq-ma-detail-pill--priority { color: #92400e; background: #fef3c7; } .tiq-ma-detail-pill--loc { } .tiq-ma-detail-pill--loc.tiq-ma-detail-pill--gps { background: #dbeafe; color: #1d4ed8; } .tiq-ma-detail-pill--loc.tiq-ma-detail-pill--manual { background: #f3f4f6; color: #6b7280; } .tiq-ma-detail-info { display: flex; gap: 14px; padding: 0 16px 14px; font-size: 12px; color: #9ca3af; border-bottom: 1px solid #f3f4f6; } .tiq-ma-detail-section { padding: 16px; border-bottom: 1px solid #f3f4f6; } .tiq-ma-detail-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; margin-bottom: 8px; } .tiq-ma-detail-desc { font-size: 14px; color: #374151; line-height: 1.6; } .tiq-ma-detail-auto-desc { font-size: 13px; color: #6b7280; line-height: 1.6; font-style: italic; } .tiq-ma-detail-photo { width: 100%; border-radius: 10px; display: block; } /* Status toggle buttons */ .tiq-ma-status-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .tiq-ma-status-btn { flex: 1; min-width: 80px; padding: 11px 8px; border: 1.5px solid #e5e7eb; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; font-family: inherit; color: #6b7280; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; transition: all 0.15s; } .tiq-ma-status-btn.active { background: #1b2e1a; border-color: #1b2e1a; color: #fff; font-weight: 700; } /* Save row */ .tiq-ma-save-row { display: flex; align-items: center; gap: 14px; } .tiq-ma-save-btn { padding: 13px 28px; background: var(--tiq-primary, #dd9b36); color: #1b2e1a; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; } .tiq-ma-save-btn:disabled { opacity: 0.6; cursor: default; } .tiq-ma-save-btn:not(:disabled):active { opacity: 0.82; } .tiq-ma-save-msg { font-size: 13px; font-weight: 500; } .tiq-ma-save-msg--ok { color: #166534; } .tiq-ma-save-msg--err { color: #dc2626; }