/* Visual direction from the 7thPortal_Wireframes.docx pack (2026-07-19) - applied as a layout/style refresh only. Purple/green/yellow/teal palette, top nav + role-specific left sidebar, accent-bordered cards, pill buttons. New pages/features shown in that pack (Messages, Help, photo reporting, contributor permissions) are deliberately NOT included here - scope was agreed as "redesign the layout only" pending open policy questions the pack itself raises. */ /* Nunito Sans - self-hosted so the app looks the same on every device (a bare system font stack renders as Segoe UI / San Francisco / Roboto depending on the OS). Two subsets of the variable font (weight axis 400-800); font-display:swap shows the system fallback until it loads. Files live in webroot/fonts/ (served from /fonts/). */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(../fonts/nunito-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(../fonts/nunito-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Brand primary. Production (live) is teal; the test/demo site overrides these to the legacy purple below (see :root[data-env="test"]), so the two are never confused. The token is still named --purple for historical reasons - it means "brand primary", whatever hue that currently is. */ --purple: #0f766e; --purple-dark: #0b5b54; --navy: #1b1533; --green: #0f9d78; --yellow: #f5b800; --teal-dark: #0f3d3d; --red: #b3261e; --amber: #b5730a; --blue: #2a5fb0; --bg: #eef3f2; --card: #ffffff; --border: #d6e4e1; --text: #221c2e; --muted: #6b6478; /* Brand-tinted UI accents (swap with the brand hue between environments). */ --nav-tint: #d8ede9; /* sidebar / drawer hover + active background */ --row-hover: #f1f6f5; /* table row hover */ --card-glow: 15,118,110; /* rgb triplet for the clickable-card hover glow */ --radius: 10px; --radius-pill: 999px; /* Semantic status tints (v1.1 restyle) — one tinted pill per state, icon+word, never colour alone. Each status family funnels here via the JS badge-key maps. */ --ready-bg: #e4f4ee; --ready-ink: #0a5f49; --attn-bg: #fbeed6; --attn-ink: #8a5606; --block-bg: #f9e2e0; --block-ink: #8a1c16; --pending-bg: #e2ebf7; --pending-ink: #1e4684; --neutral-bg: #ece9f1; --neutral-ink: #4a4557; --demo-bg: #efe6fb; --demo-ink: #55299e; /* Soft layered shadows (v1.1 restyle) — warmth without heaviness on dense screens. */ --shadow-sm: 0 1px 2px rgba(27,21,51,.04); --shadow: 0 1px 2px rgba(27,21,51,.04), 0 6px 18px rgba(27,21,51,.05); --shadow-lg: 0 2px 6px rgba(27,21,51,.06), 0 16px 40px rgba(27,21,51,.12); --radius-card: 14px; } /* ── Test / demo environment theme ─────────────────────────────────────────── Production (live) is teal; the test/demo site recolours the whole app to the legacy purple, so you can never mistake one for the other. Applied via data-env="test" on , set in api.js (by hostname) and reaffirmed in nav.js (by the demo-mode flag). Every environment-specific value is a token, so this is a straight swap of the token set - no per-selector overrides needed. */ :root[data-env="test"] { --purple: #6d28d9; /* legacy purple, in place of the live teal */ --purple-dark: #4c1d95; --bg: #f6f4f0; /* the warmer original ground */ --border: #e3ddf0; --nav-tint: #efe9fb; /* lavender sidebar/drawer accents */ --row-hover: #faf9fc; --card-glow: 109,40,217; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Nunito Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } a { color: var(--purple); } /* ── Top bar ─────────────────────────────────────────────────────────── */ .app-nav { background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; flex-wrap: wrap; gap: 0.75rem; } .app-nav .brand-block { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .app-nav .brand { font-weight: 800; font-size: 1.15rem; text-decoration: none; color: #fff; } .app-nav .tagline { font-size: 0.8rem; opacity: 0.85; white-space: nowrap; } .app-nav .app-version { font-size: 0.72rem; opacity: 0.7; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .app-nav .app-version:not(:empty)::before { content: "·"; margin-right: 0.4rem; opacity: 0.7; } .app-nav .page-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .app-nav .page-nav a { color: #fff; text-decoration: none; opacity: 0.85; font-size: 0.92rem; padding-bottom: 0.3rem; border-bottom: 2px solid transparent; } .app-nav .page-nav a:hover { opacity: 1; } .app-nav .page-nav a.active { opacity: 1; font-weight: 700; border-bottom-color: var(--yellow); } .app-nav .nav-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .app-nav .role-pill { background: #fff; color: var(--purple); font-weight: 700; font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: var(--radius-pill); text-decoration: none; } .app-nav .user-info { font-size: 0.82rem; opacity: 0.9; } .app-nav .logout-link { color: #fff; opacity: 0.85; text-decoration: none; font-size: 0.85rem; } .app-nav .logout-link:hover { opacity: 1; text-decoration: underline; } .demo-banner { background: var(--amber); color: #fff; text-align: center; padding: 0.4rem 1rem; font-size: 0.85rem; } .demo-banner a { color: #fff; text-decoration: underline; } /* Prominent, sticky demo/test banner with a warning stripe (DEMO-AUTH-003) */ .demo-banner-strong { position: sticky; top: 0; z-index: 200; font-size: 0.9rem; font-weight: 600; padding: 0.55rem 1rem; color: #1b1533; text-align: center; background: repeating-linear-gradient(45deg, var(--yellow), var(--yellow) 14px, #ffd84d 14px, #ffd84d 28px); border-bottom: 2px solid var(--amber); } .demo-banner-strong a { color: var(--purple-dark); text-decoration: underline; font-weight: 700; } .demo-badge { display: inline-block; background: var(--purple); color: #fff; border-radius: 5px; padding: 0.05rem 0.45rem; margin-right: 0.4rem; font-weight: 800; letter-spacing: 0.06em; font-size: 0.78rem; } .demo-persona { text-decoration: none; color: inherit; transition: border-color 0.15s; } .demo-persona:hover { border-color: var(--purple); } /* ── Layout: left sidebar + main content ────────────────────────────── */ .app-layout { display: flex; align-items: flex-start; max-width: 1280px; margin: 0 auto; } .app-sidebar { width: 200px; flex-shrink: 0; padding: 1.5rem 1rem; display: none; } .app-sidebar .sidebar-role { color: var(--purple); font-weight: 800; font-size: 1rem; margin: 0 0 1rem 0.75rem; } .app-sidebar nav { display: flex; flex-direction: column; gap: 0.15rem; } .app-sidebar nav a, .app-sidebar nav button { display: block; text-align: left; color: var(--text); text-decoration: none; font-size: 0.92rem; padding: 0.55rem 0.75rem; border-radius: var(--radius); background: none; border: none; cursor: pointer; font-family: inherit; width: 100%; } .app-sidebar nav a:hover, .app-sidebar nav button:hover { background: var(--nav-tint); } .app-sidebar nav a.active, .app-sidebar nav button.active { background: var(--nav-tint); color: var(--purple); font-weight: 700; } /* Secondary ("More") divider + account footer group (v3.1 G51 nav consolidation). */ .nav-sep { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; padding: 0.9rem 0.75rem 0.25rem; } .app-sidebar .nav-account { margin-top: 0.8rem; padding-top: 0.5rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.15rem; } .app-sidebar .nav-account a { color: var(--muted); font-size: 0.85rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); text-decoration: none; } .app-sidebar .nav-account a:hover { background: var(--nav-tint); } /* Top-bar notifications bell (alert surface). */ .app-nav .nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; text-decoration: none; font-size: 1.15rem; line-height: 1; color: #fff; } .app-nav .nav-bell:hover, .app-nav .nav-bell.active { background: rgba(255,255,255,0.16); } .app-nav .nav-bell-count { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--yellow); color: var(--navy); font-size: 0.64rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px var(--purple); } .app-main { flex: 1; min-width: 0; } @media (min-width: 900px) { .app-sidebar { display: block; } } .container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; } .container.narrow { max-width: 640px; } .app-main .container { max-width: none; margin: 0; } /* ── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); } .card.clickable { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; display: block; text-decoration: none; color: inherit; } .card.clickable:hover { box-shadow: 0 4px 10px rgba(27,21,51,.06), 0 14px 30px rgba(var(--card-glow),0.14); transform: translateY(-1px); } .card.clickable:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; } .card-accent { border-left: 4px solid var(--purple); } .card-accent.accent-green { border-left-color: var(--green); } .card-accent.accent-yellow { border-left-color: var(--yellow); } .card-accent.accent-teal { border-left-color: var(--teal-dark); } h1 { font-size: 1.5rem; margin: 0 0 0.75rem; } h2 { font-size: 1.15rem; margin: 0 0 0.75rem; } h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; } .grid { display: grid; gap: 1rem; } @media (min-width: 700px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; } tr:hover td { background: var(--row-hover); } /* Status pills (v1.1 restyle): tinted background + same-hue ink, so status reads softly and never depends on colour alone (the label text carries the meaning). Default is the neutral tint; each canonical badge-key maps to a semantic family. */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em; background: var(--neutral-bg); color: var(--neutral-ink); } .badge[data-status="active"], .badge[data-status="published"], .badge[data-status="good"], .badge[data-completed="true"] { background: var(--ready-bg); color: var(--ready-ink); } .badge[data-status="pending_approval"] { background: var(--pending-bg); color: var(--pending-ink); } .badge[data-status="suspended"], .badge[data-status="watch"], .badge[data-status="full"], .badge[data-completed="false"] { background: var(--attn-bg); color: var(--attn-ink); } .badge[data-status="deleted"], .badge[data-status="over"] { background: var(--block-bg); color: var(--block-ink); } .badge[data-status="draft"], .badge[data-status="archived"], .badge[data-status="inactive"], .badge[data-status="unset"] { background: var(--neutral-bg); color: var(--neutral-ink); } /* Finance approval groups (admin): group card + member chips */ .inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.4rem 0; } .inline-form input, .inline-form select { flex: 1 1 auto; min-width: 12rem; } .inline-form .btn { flex: 0 0 auto; } .approval-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.85rem; margin-bottom: 0.7rem; } .approval-group .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; } .chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: var(--surface-2, #eee); font-size: 0.85rem; } .chip-x { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); padding: 0; } .chip-x:hover { color: var(--red); } label.check { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; } tr.row-warn > td { background: color-mix(in srgb, var(--amber) 12%, transparent); } .badge[data-role="admin"] { background: var(--demo-bg); color: var(--demo-ink); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-block; border: none; border-radius: var(--radius-pill); padding: 0.6rem 1.3rem; font-size: 0.9rem; cursor: pointer; font-weight: 700; text-decoration: none; } .btn-primary { background: var(--yellow); color: var(--navy); } .btn-primary:hover { background: #e0a900; } .btn-success { background: var(--green); color: #fff; } .btn-danger { background: var(--red); color: #fff; } .btn-secondary { background: #ece7f2; color: var(--text); } .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } label { display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.9rem; } .field { margin-bottom: 1rem; } .field .help { color: var(--muted); font-size: 0.8rem; margin-top: 0.25rem; } .field .error { color: var(--red); font-size: 0.8rem; margin-top: 0.25rem; } input[type="text"], input[type="email"], input[type="date"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], select, textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.92rem; font-family: inherit; background: #fff; } textarea { min-height: 5rem; resize: vertical; } .alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem; } .alert-error { background: #fbe9e7; color: var(--red); border: 1px solid #f3c8c4; } .alert-info { background: #e6f2fb; color: #14508c; border: 1px solid #c7dffb; } .alert-success { background: #e6f4ea; color: var(--green); border: 1px solid #bfe3cc; } .alert-warning { background: #fdf2e2; color: var(--amber); border: 1px solid #f6ddb0; } .muted { color: var(--muted); } .empty-state { text-align: center; padding: 2rem; color: var(--muted); } .tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .tabs button { background: none; border: none; padding: 0.6rem 0.9rem; cursor: pointer; font-size: 0.9rem; color: var(--muted); border-bottom: 2px solid transparent; } .tabs button.active { color: var(--purple); border-bottom-color: var(--purple); font-weight: 600; } .actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } /* ── Hero (public landing + section pages) ──────────────────────────── */ .hero { background: linear-gradient(135deg, var(--navy), var(--purple)); color: #fff; padding: 3rem 1.5rem; border-radius: var(--radius); } .hero h1 { font-size: 2.1rem; color: #fff; margin: 0 0 0.6rem; } .hero p { opacity: 0.92; max-width: 600px; margin: 0 0 1.5rem; } .hero .actions-row { margin-top: 0; } .hero .btn-secondary { background: rgba(255,255,255,0.12); color: #fff; } .hero .btn-secondary:hover { background: rgba(255,255,255,0.2); } .feature-cards { margin-top: 1.5rem; } .child-card { display: flex; align-items: center; gap: 1rem; } .child-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .section-hero { background: linear-gradient(135deg, var(--navy), var(--purple)); color: #fff; padding: 2rem 1.5rem; border-radius: var(--radius); } .section-hero h1 { color: #fff; margin: 0 0 0.25rem; } .section-hero .meta { opacity: 0.9; font-size: 0.95rem; } .osm-link-row { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.85rem; } .stat-tile { flex: 1; min-width: 130px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; } .stat-tile .num { font-size: 1.6rem; font-weight: 700; color: var(--purple); } .stat-tile .label { font-size: 0.8rem; color: var(--muted); } .summary-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .notice-card { border-left: 4px solid var(--yellow); } .notice-card .date { font-size: 0.8rem; color: var(--muted); } .gallery-terms { background: #fdf2e2; border: 1px solid #f6ddb0; color: var(--amber); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.85rem; margin-bottom: 1.25rem; } .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .album-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; display: block; } .album-tile:hover { box-shadow: 0 4px 14px rgba(var(--card-glow),0.14); } .album-tile .thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #ece7f2; display: block; } .album-tile .info { padding: 0.75rem; } .album-tile .info strong { display: block; } .album-tile .info .muted { font-size: 0.8rem; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; } .photo-tile { position: relative; border-radius: var(--radius); overflow: hidden; background: #ece7f2; } .photo-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } .photo-tile .remove-btn { position: absolute; top: 4px; right: 4px; } .lightbox-backdrop { position: fixed; inset: 0; background: rgba(23,36,42,0.92); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; } .lightbox-backdrop img { max-width: 100%; max-height: 80vh; border-radius: 4px; user-select: none; -webkit-user-drag: none; } .lightbox-nav { position: fixed; top: 0; bottom: 0; width: 15%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; } .lightbox-nav.prev { left: 0; } .lightbox-nav.next { right: 0; } .lightbox-close { position: fixed; top: 1rem; right: 1.5rem; color: #fff; font-size: 1.8rem; cursor: pointer; background: none; border: none; } .lightbox-caption { position: fixed; bottom: 1rem; left: 0; right: 0; text-align: center; color: #fff; font-size: 0.85rem; opacity: 0.85; } .dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: var(--muted); } .dropzone.dragover { border-color: var(--purple); background: #f5f0fa; } .footer-note { text-align: center; padding: 1.5rem; color: var(--muted); font-size: 0.82rem; } .footer-note a { color: var(--muted); } /* Sections & capacity (FRD 29) */ .cap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .cap-big { font-size: 1.6rem; font-weight: 700; margin-top: 0.15rem; } .cap-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cap-head h2 { margin: 0; } .cap-actions { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; } /* ── Canonical PageHeader + breadcrumb (v3.0 design system) ────────────── One shared page anatomy: breadcrumb (detail screens only) → one H1 with optional status badge beside it → role/context chip shown separately → lede → right-aligned actions. Rendered by js/pageheader.js. */ .page-header { margin: 0 0 1.25rem; } .breadcrumb { font-size: 0.82rem; margin-bottom: 0.5rem; line-height: 1.4; } .breadcrumb .bc-trail { display: inline; color: var(--muted); } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--purple); text-decoration: underline; } .breadcrumb .bc-sep { margin: 0 0.4rem; color: var(--muted); opacity: 0.7; } .breadcrumb .bc-here { color: var(--text); font-weight: 600; } .breadcrumb .bc-back { display: none; align-items: center; gap: 0.3rem; color: var(--muted); text-decoration: none; font-weight: 600; } .breadcrumb .bc-back:hover { color: var(--purple); } .page-header .ph-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .page-header .ph-titlewrap { min-width: 0; } .page-header .ph-titleline { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .page-header h1.ph-title { margin: 0; } .page-header .ph-context { display: inline-block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; } .page-header .ph-desc { margin: 0.5rem 0 0; max-width: 62ch; } .page-header .ph-actions { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; } @media (max-width: 640px) { /* Long trails compress to a single "‹ Back to " affordance (FR-UX-004). */ .breadcrumb .bc-trail { display: none; } .breadcrumb .bc-back { display: inline-flex; } .page-header .ph-actions { width: 100%; } } /* Patrol Points setup wizard stepper (Basics → Teams → Scoring → Review). */ .wiz-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin: 0.8rem 0 1rem; } .wiz-step { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0; cursor: pointer; font: inherit; color: var(--muted); font-weight: 600; padding: 0.3rem 0.4rem; border-radius: var(--radius); } .wiz-step .wiz-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--neutral-bg); color: var(--neutral-ink); font-size: 0.78rem; font-weight: 800; } .wiz-step.active { color: var(--purple); } .wiz-step.active .wiz-num { background: var(--purple); color: #fff; } .wiz-step.done .wiz-num { background: var(--ready-bg); color: var(--ready-ink); } .wiz-sep { color: var(--muted); opacity: 0.6; } .wiz-adv { margin: 0.4rem 0; } .wiz-adv summary { cursor: pointer; color: var(--purple); font-weight: 600; font-size: 0.9rem; } .af-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.35rem 1rem; } .af-sec-opt { display: flex; align-items: center; gap: 0.45rem; font-weight: 400; padding: 0.15rem 0; } .af-sec-opt input { width: auto; margin: 0; } /* Activity Approval - approval route stepper + progress bar */ .af-route { list-style: none; display: flex; margin: 0; padding: 0; } .af-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 0.25rem; min-width: 64px; } .af-step::before { content: ''; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; } .af-step:first-child::before { display: none; } .af-step-dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; background: var(--card); border: 2px solid var(--border); color: var(--muted); } .af-step-label { margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.25; color: var(--text); } .af-step-sub { display: block; font-size: 0.7rem; color: var(--muted); } .af-step[data-state="done"] .af-step-dot { background: var(--green); border-color: var(--green); color: #fff; } .af-step[data-state="done"]::before { background: var(--green); } .af-step[data-state="current"] .af-step-dot { border-color: var(--purple); color: var(--purple); } .af-step[data-state="current"] .af-step-label { font-weight: 600; } .af-progress { margin-bottom: 0.7rem; } .af-progress-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; } .af-progress-bar span { display: block; height: 100%; background: var(--green); transition: width 0.2s ease; } /* Patrol Points teams & members */ .pp-team { padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .pp-team:last-child { border-bottom: 0; } .pp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .pp-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.15rem 0.3rem 0.15rem 0.6rem; font-size: 0.85rem; } .pp-chip select { font: inherit; font-size: 0.78rem; padding: 0.1rem 0.2rem; border: 1px solid var(--border); border-radius: 5px; background: var(--card); } .pp-chip-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.2rem; } .pp-chip-x:hover { color: var(--red); } /* Quick Score one-screen surface */ .pp-qs-group { margin-bottom: 1rem; } .pp-qs-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.6rem; } .pp-qs-multi { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; } .pp-qs-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pp-qs-chip { font: inherit; font-size: 1rem; min-height: 46px; min-width: 52px; padding: 0.5rem 0.9rem; border: 1.5px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; } .pp-qs-chip:hover { border-color: var(--purple); } .pp-qs-chip.selected { background: var(--purple); border-color: var(--purple); color: #fff; font-weight: 600; } .pp-qs-num { font: inherit; min-height: 46px; width: 110px; padding: 0.5rem 0.6rem; border: 1.5px solid var(--border); border-radius: 10px; } .pp-qs-note { font: inherit; width: 100%; margin-top: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; } .pp-qs-submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.8rem; } .pp-qs-submit .btn { font-size: 1.05rem; padding: 0.6rem 1.4rem; } .pp-qs-recent { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; } /* Demo feedback floating button */ .demo-fb-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; background: var(--purple); color: #fff; border: 0; border-radius: var(--radius-pill); padding: 0.65rem 1.1rem; font: inherit; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,0.2); cursor: pointer; } .demo-fb-btn:hover { background: var(--purple-dark); } /* Printable equipment labels */ .eq-label-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .eq-label { border: 1px solid #999; border-radius: 6px; padding: 0.5rem; text-align: center; break-inside: avoid; } .eq-label-name { font-weight: 700; font-size: 0.95rem; line-height: 1.2; } .eq-label-meta { color: #555; font-size: 0.72rem; margin: 0.1rem 0 0.35rem; } .eq-label-barcode svg { max-width: 100%; height: 44px; } .eq-label-code { font-family: ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.06em; margin-top: 0.15rem; } @media print { .app-nav, .app-sidebar, .nav-drawer, .bottom-nav, .demo-banner, .demo-fb-btn, #eq-labels-toolbar, .page-header, .no-print { display: none !important; } .app-layout, .app-main, .container { margin: 0; padding: 0; max-width: none; display: block; } .eq-label { border-color: #000; } .eq-label-grid { gap: 0.2rem; } } .data-table th, .data-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .data-table tfoot .fin-total td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 700; } .data-table input { padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 5px; font: inherit; } /* Capacity RAG statuses (good/watch/full/over/unset) inherit the shared status-pill tints defined with the .badge rules above — no separate solid-fill rules needed. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(23,36,42,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; } .modal-box { background: var(--card); border-radius: var(--radius-card); padding: 1.5rem; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; box-shadow: var(--shadow-lg); } .modal-box h2 { margin-top: 0; } /* Mobile-first (v1.1 restyle): on a phone a long modal form pushes its Save button below the fold. Pin the action row to the bottom of the scrolling modal so the primary action stays thumb-reachable. Only sets position/background/border — the inline display/gap/margin the modals already carry are untouched, so it layers on with no JS change. */ @media (max-width: 640px) { .modal-box { padding-bottom: 0.6rem; } .modal-box .modal-actions, .modal-box .eq-form-actions { position: sticky; bottom: 0; z-index: 3; background: var(--card); padding-top: 0.7rem; padding-bottom: 0.35rem; border-top: 1px solid var(--border); } .modal-box .modal-actions .btn, .modal-box .eq-form-actions .btn { flex: 1 1 auto; text-align: center; } } /* Progressive Add/Edit Equipment form (FRD v2.4.4). */ .eq-form .eq-track-opt { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; margin: 0.35rem 0; cursor: pointer; } .eq-form .eq-track-opt input { margin-top: 0.2rem; } .eq-form .eq-track-hint { display: block; font-size: 0.8rem; } .eq-form .eq-section { border: 1px solid var(--border); border-radius: 6px; margin: 0.5rem 0; padding: 0 0.6rem; } .eq-form .eq-section > summary { cursor: pointer; padding: 0.55rem 0; font-weight: 600; } .eq-form .eq-section[open] { padding-bottom: 0.6rem; } .eq-form .eq-locked { font-size: 0.85rem; color: var(--muted); background: var(--bg-subtle, rgba(0,0,0,0.03)); border-radius: 6px; padding: 0.5rem 0.6rem; } .eq-state-panel { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.3rem 0; } .eq-state { flex: 1 1 120px; border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; } .eq-state span { display: block; font-size: 0.72rem; } .eq-state strong { font-size: 1.1rem; } .eq-state-note { font-size: 0.8rem; margin: 0.2rem 0 0.4rem; } .eq-form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; flex-wrap: wrap; } .eq-form-actions .eq-delete { margin-left: auto; } /* One-column, no horizontal scroll at the 360px responsive baseline (FR-QM-034). */ @media (max-width: 560px) { .eq-form .cap-actions { display: flex; flex-direction: column; align-items: stretch; } .eq-form .cap-actions .field { width: 100%; } .eq-form .cap-actions input, .eq-form .cap-actions select { width: 100% !important; } .eq-form-actions .eq-delete { margin-left: 0; } } /* Key/value detail table (Quartermaster booking, etc.) */ .kv-table { width: 100%; border-collapse: collapse; } .kv-table td { padding: 0.35rem 0.6rem 0.35rem 0; vertical-align: top; border-bottom: 1px solid var(--border); } .kv-table td:first-child { width: 34%; white-space: nowrap; } .kv-table tr:last-child td { border-bottom: none; } /* ── Mobile foundation (responsive handoff pack) ───────────────────────── */ .nav-burger { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.5rem; } .nav-drawer { display: none; } .nav-drawer.open { display: block; } .nav-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 60; } .nav-drawer-panel { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: var(--card); z-index: 61; padding: 1rem 0.9rem; overflow-y: auto; box-shadow: 2px 0 22px rgba(0,0,0,0.28); display: flex; flex-direction: column; gap: 0.35rem; animation: drawer-in 0.18s ease-out; } @keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; } .nav-drawer-head .sidebar-role { margin: 0; color: var(--purple); font-weight: 800; } .nav-drawer-close { background: none; border: none; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 0.3rem; } .nav-drawer-switch { margin: 0.2rem 0 0.5rem; } .nav-drawer nav { display: flex; flex-direction: column; gap: 0.1rem; } .nav-drawer nav a { display: block; padding: 0.7rem 0.75rem; border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 1rem; } .nav-drawer nav a.active { background: var(--nav-tint); color: var(--purple); font-weight: 700; } .nav-drawer nav a:active { background: var(--nav-tint); } .nav-drawer-logout { margin-top: auto; padding: 0.75rem; color: var(--purple); text-decoration: none; font-weight: 600; } /* Admin feature-availability toggle: checkbox + status pill on one line. */ .feature-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; } .feature-toggle input { width: auto; margin: 0; } /* Mobile bottom navigation (FRD v1.3): hidden on desktop, shown below the sidebar breakpoint. See the .bottom-nav rules inside the max-width:899px block below. */ .bottom-nav { display: none; } @media (max-width: 899px) { .nav-burger { display: inline-flex; align-items: center; } .app-nav { flex-wrap: wrap; gap: 0.4rem 0.6rem; } .app-nav .tagline, .app-nav .user-info { display: none; } .btn { min-height: 42px; } input, select, textarea { font-size: 16px; } /* stop iOS zoom-on-focus */ /* Contain dense tables below the sidebar breakpoint so they scroll inside their own box - otherwise a wide table's min-content width (e.g. the equipment register's action-button column) pushes the whole page sideways in the 700-899px band where the sidebar is hidden but the table isn't yet contained. */ .card table.data-table, .card > table:not(.kv-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Fixed task-led bottom bar (Today · Actions · Events · More). */ .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(27,21,51,.08); padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom, 0px)); } .bottom-nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 46px; padding: 0.3rem 0.15rem; border-radius: 10px; background: none; border: none; cursor: pointer; text-decoration: none; color: var(--muted); font: inherit; font-size: 0.68rem; font-weight: 600; } .bottom-nav-item .bn-icon { font-size: 1.15rem; line-height: 1; } .bottom-nav-item .bn-label { line-height: 1; } .bottom-nav-item.active { color: var(--purple); } .bottom-nav-item:active { background: var(--nav-tint); } /* Keep page content and the floating feedback button clear of the bar. */ body.has-bottom-nav .app-main { padding-bottom: 4.6rem; } body.has-bottom-nav .demo-fb-btn { bottom: 4.9rem; } } @media (max-width: 640px) { .container { padding: 1rem; } .modal-backdrop { padding: 0.5rem; } } /* Responsive "cards" tables: on phones a collapses each row into a card, each cell showing its data-label. High-use journeys use this instead of a side-scrolling table. Cells: add data-label; give the actions cell class "rcard-actions" and any full-width heading cell "rcard-title". */ @media (max-width: 640px) { table.rcards, table.rcards tbody { display: block; overflow: visible; } table.rcards thead { display: none; } /* flex column so cells keep DOM order on desktop but can be re-ordered on mobile */ table.rcards tr { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; background: var(--card); } table.rcards td.rcard-title { order: -1; } table.rcards td.rcard-actions { order: 99; } table.rcards td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.3rem 0; border: none; text-align: right; } table.rcards td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; flex: 0 0 38%; } table.rcards td[data-label=""]::before { content: ""; flex: 0; } table.rcards td.rcard-title { justify-content: flex-start; font-weight: 700; font-size: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; padding-bottom: 0.4rem; } table.rcards td.rcard-title::before { content: ""; flex: 0; } table.rcards td.rcard-actions { justify-content: flex-start; padding-top: 0.5rem; } table.rcards td.rcard-actions::before { content: ""; flex: 0; } table.rcards td.rcard-actions .btn { flex: 1 1 auto; text-align: center; } table.rcards td select, table.rcards td input { max-width: 62%; } } /* Admin tab strip for mobile (sidebar tabs are hidden on phones) */ .admin-mobile-tabs { display: none; } @media (max-width: 899px) { .admin-mobile-tabs { display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.6rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--border); } .admin-mobile-tabs .admin-tab-btn { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); font: inherit; font-size: 0.85rem; cursor: pointer; } .admin-mobile-tabs .admin-tab-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); } } /* Dual-role Parent/Leader view switcher (top nav) */ .view-switcher { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--card); } .view-switch { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; padding: 0.2rem 0.7rem; cursor: pointer; } .view-switch.active { background: var(--purple); color: #fff; } .view-switch:not(.active):hover { background: var(--bg); } /* Internal calendar (month grid with spanning event bars) */ .cal-toolbar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .cal-toolbar .cal-title { font-size: 1.2rem; font-weight: 600; margin-left: 0.4rem; min-width: 10rem; } .cal-nav-btn { border: 1px solid var(--border); background: var(--card); color: var(--text); width: 2rem; height: 2rem; border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .cal-nav-btn:hover { background: var(--bg); } .cal-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.9rem; font-size: 0.78rem; color: var(--muted); } .cal-legend span { display: inline-flex; align-items: center; gap: 0.4rem; } .cal-dot { width: 0.75rem; height: 0.6rem; border-radius: 3px; display: inline-block; } .cal-scroll { overflow-x: auto; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 700px; background: var(--card); } .cal-dow { padding: 0.45rem 0.6rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); text-align: right; border-bottom: 1px solid var(--border); background: var(--bg); } .cal-dow + .cal-dow, .cal-cell:not(:nth-child(7n+1)) { border-left: 1px solid var(--border); } .cal-cell { min-height: 104px; padding: 0.25rem 0.2rem 0.3rem; display: flex; flex-direction: column; } .cal-cell:nth-child(n+9) { border-top: 1px solid var(--border); } .cal-cell.other-month { background: color-mix(in srgb, var(--card) 94%, var(--muted)); } .cal-cell.other-month .cal-daynum { opacity: 0.45; } .cal-cell-head { display: flex; justify-content: flex-end; padding: 0 0.35rem 0.15rem; } .cal-daynum { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5rem; } .cal-cell.today .cal-daynum { background: var(--purple); color: #fff; border-radius: 999px; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .cal-cell.clickable-day { cursor: pointer; } .cal-cell.clickable-day:hover { background: color-mix(in srgb, var(--card) 90%, var(--purple)); } /* Event lanes: fixed-height rows so multi-day bars line up across adjacent days */ .cal-lanes { display: flex; flex-direction: column; gap: 2px; } .cal-seg, .cal-seg-empty { height: 1.15rem; } .cal-seg { display: flex; align-items: center; font-size: 0.72rem; line-height: 1; color: #fff; padding: 0 0.4rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0; } .cal-seg.is-start { border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-left: 3px; } .cal-seg.is-end { border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-right: 3px; } .cal-seg[data-src="entry"] { background: var(--purple); } .cal-seg[data-src="event"] { background: var(--green); } .cal-seg[data-src="qm"] { background: #d99a00; } .cal-seg[data-status="draft"] { background: repeating-linear-gradient(45deg, var(--purple), var(--purple) 6px, color-mix(in srgb, var(--purple) 80%, #fff) 6px, color-mix(in srgb, var(--purple) 80%, #fff) 12px); } .cal-seg[data-flag="1"] { box-shadow: inset 0 0 0 2px #c62828; } .cal-seg .cal-seg-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.9); margin-right: 0.35rem; flex: 0 0 auto; } .cal-more { font-size: 0.7rem; color: var(--purple); font-weight: 600; cursor: pointer; padding: 0.1rem 0.4rem; } .cal-more:hover { text-decoration: underline; } @media (max-width: 640px) { .cal-cell { min-height: 84px; } .cal-seg, .cal-seg-empty { height: 1rem; } } /* Calendar Month/Agenda toggle + agenda list */ .cal-viewtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-left: auto; } .cal-vt { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; padding: 0.25rem 0.85rem; cursor: pointer; } .cal-vt.active { background: var(--purple); color: #fff; } .cal-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.2rem 0 0.8rem; } .cal-filter { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 0.3rem 0.85rem; font: inherit; font-size: 0.8rem; cursor: pointer; } .cal-filter.active { background: var(--purple); color: #fff; border-color: var(--purple); } .cal-agenda-day { margin-bottom: 1rem; } .cal-agenda-date { font-weight: 700; font-size: 0.85rem; color: var(--muted); padding: 0.3rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; } .cal-agenda-day.today .cal-agenda-date { color: var(--purple); } .cal-agenda-row { display: flex; gap: 0.6rem; align-items: stretch; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius); padding: 0.55rem 0.35rem; cursor: pointer; } .cal-agenda-row:hover { background: var(--bg); } .cal-agenda-bar { flex: 0 0 4px; border-radius: 3px; } .cal-agenda-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .cal-agenda-title { font-weight: 600; font-size: 0.95rem; } .cal-agenda-meta { font-size: 0.8rem; } /* Key/value detail table (Quartermaster booking, etc.) */ .build-tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--border); color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; } /* Respect reduced-motion: keep the restyle's hover lift and drawer slide off when the viewer has asked for less movement. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .card.clickable:hover { transform: none; } } /* Camera-first uploads (v1.1 restyle): the "Take photo" button is only useful on a device with a camera and a touch (coarse) pointer — hidden on mouse/desktop, where "Choose file" already opens the file picker. */ .camera-only { display: none; } @media (pointer: coarse) { .camera-only { display: inline-block; } }