/* ────────────────────────────────────────── Reduced-motion support (WCAG 2.3.3) User-level OS setting disables all non-essential animation/transition. ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ────────────────────────────────────────── CSS Custom Properties ────────────────────────────────────────── */ :root { --primary: #4361EE; --primary-dark: #3451d1; --accent: #F72585; --teal: #2EC4B6; --orange: #FF9F1C; --green: #06D6A0; --bg: #F5F7FA; --surface: #FFFFFF; --surface-raised:#FFFFFF; --surface-sunken:#EEF1F6; --border: #E5E9F0; --border-subtle:#EEF1F6; --text: #1A1A2E; --muted: #4B5563; /* 7.0:1 on white, 4.9:1 on --bg #F5F7FA — WCAG AA */ --nav-height: 60px; --sidebar-w: 220px; /* Radius scale */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; /* Spacing scale — use instead of ad-hoc gap/padding values */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Type scale */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Elevation */ --shadow-xs: 0 1px 2px rgba(15,23,42,.04); --shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); --shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.04); /* Motion */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* Browser chrome (scrollbar, form controls) — re-themed in dark */ color-scheme: light; } /* ────────────────────────────────────────── Dark theme tokens Activated by data-theme="dark" on , or by prefers-color-scheme when data-theme="auto" (default for users who haven't chosen). ────────────────────────────────────────── */ [data-theme="dark"], [data-theme="auto"] { color-scheme: light; } @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --bg: #0F1117; --surface: #161922; --surface-raised: #1B1F2B; --surface-sunken: #0B0D13; --border: #2A2F3D; --border-subtle: #1F2432; --text: #E6E8EE; --muted: #9AA1B0; --primary: #6B86F5; --primary-dark: #4F6CDC; --shadow-xs: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3); --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35); } } [data-theme="dark"] { color-scheme: dark; --bg: #0F1117; --surface: #161922; --surface-raised: #1B1F2B; --surface-sunken: #0B0D13; --border: #2A2F3D; --border-subtle: #1F2432; --text: #E6E8EE; --muted: #9AA1B0; --primary: #6B86F5; --primary-dark: #4F6CDC; --shadow-xs: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3); --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35); } /* Smooth theme transitions on common paint properties. Disabled automatically under prefers-reduced-motion via the top rule. */ html, body, .page-wrap, .card, .modal-panel, .tab-btn, .bottom-nav, .top-nav { transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out); } /* Bootstrap overrides — let Bootstrap utility classes inherit our tokens */ [data-theme="dark"] .bg-light, [data-theme="auto"] .bg-light { background-color: var(--surface-sunken) !important; color: var(--text); } [data-theme="dark"] .text-muted, [data-theme="auto"] .text-muted { color: var(--muted) !important; } [data-theme="dark"] .table, [data-theme="auto"] .table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .form-check-input { background-color: var(--surface-sunken); border-color: var(--border); color: var(--text); } [data-theme="dark"] .form-control::placeholder { color: var(--muted); } [data-theme="dark"] .alert-warning { background: color-mix(in srgb, #FF9F1C 18%, var(--surface)); color: var(--text); border-color: color-mix(in srgb, #FF9F1C 30%, var(--border)); } [data-theme="dark"] .alert-success { background: color-mix(in srgb, #06D6A0 15%, var(--surface)); color: var(--text); border-color: color-mix(in srgb, #06D6A0 30%, var(--border)); } [data-theme="dark"] .alert-danger { background: color-mix(in srgb, #EF4444 18%, var(--surface)); color: var(--text); border-color: color-mix(in srgb, #EF4444 30%, var(--border)); } [data-theme="dark"] .alert-info { background: color-mix(in srgb, var(--primary) 15%, var(--surface)); color: var(--text); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); } /* ────────────────────────────────────────── Base ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Fully disable iOS/Android pull-to-refresh. `contain` alone isn't enough on Chrome Android — `none` also suppresses the refresh gesture. */ overscroll-behavior-y: none; overscroll-behavior-x: contain; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ────────────────────────────────────────── App Layout ────────────────────────────────────────── */ .app-layout { min-height: 100vh; display: flex; flex-direction: column; } .app-main { flex: 1; padding: clamp(14px, 3vw, 24px) clamp(14px, 4vw, 32px); padding-left: max(clamp(14px, 4vw, 32px), env(safe-area-inset-left)); padding-right: max(clamp(14px, 4vw, 32px), env(safe-area-inset-right)); padding-bottom: max(24px, env(safe-area-inset-bottom)); max-width: 1200px; margin: 0 auto; width: 100%; } @media (max-width: 768px) { /* Reserve roughly half a viewport of empty space at the bottom of the page so the last activity card can be scrolled all the way up to the centre of the screen on mobile — necessary for comfortably tapping the kebab / edit buttons on that card without the FAB or bottom nav in the way. Why this much: with only ~180px of padding the last card sits at the very bottom of the scroll area, behind the FAB / nav. Bumping to roughly 50vh lets the scroll machinery place the last card in the middle of the visible area. The extra blank space below is harmless (the user only sees it when scrolled to the absolute bottom). */ .app-main { padding-bottom: calc(50vh + env(safe-area-inset-bottom)); } .day-content { padding-bottom: 40px; } } /* ────────────────────────────────────────── Mobile bottom tab bar ────────────────────────────────────────── */ .bottom-nav { display: none; } @media (max-width: 768px) { .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 95; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -1px 6px rgba(0,0,0,.06); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); /* iOS Safari fix — force GPU compositing layer so the URL bar collapse/expand and rubber-band overscroll don't detach the nav from the viewport bottom. Reported as 'loses anchor when you scroll up on My Trips'. */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .bottom-nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; min-height: 52px; font-size: .7rem; font-weight: 500; color: var(--muted); text-decoration: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: color .15s; } .bottom-nav-item:hover { text-decoration: none; color: var(--text); } .bottom-nav-item.active { color: var(--primary); } .bottom-nav-icon { display: inline-flex; line-height: 1; } .bottom-nav-label { letter-spacing: .01em; } } /* ────────────────────────────────────────── SVG icons (Lucide inline) ────────────────────────────────────────── */ .icon { display: inline-block; vertical-align: -.15em; flex-shrink: 0; } .icon-fill { fill: currentColor; } /* ────────────────────────────────────────── Navigation ────────────────────────────────────────── */ .app-nav { min-height: var(--nav-height); height: auto; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; padding-top: env(safe-area-inset-top); padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--text); white-space: nowrap; flex-shrink: 0; } .nav-brand:hover { text-decoration: none; } .nav-brand-icon { font-size: 1.4rem; } .nav-user { display: flex; align-items: center; gap: 8px; } .nav-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 600; font-size: .85rem; text-decoration: none; line-height: 1; flex-shrink: 0; /* Ensure touch target meets 44px minimum via padding */ padding: 4px; box-sizing: content-box; } .nav-avatar:hover { background: color-mix(in srgb, var(--primary) 80%, #000); color: #fff; text-decoration: none; } .nav-avatar-wrapper { position: relative; } .nav-avatar-backdrop { position: fixed; inset: 0; z-index: 999; } .nav-avatar-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--card-bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 1000; padding: 4px 0; animation: fadeIn .12s ease; } .nav-avatar-header { padding: 10px 14px 8px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 4px; } .nav-avatar-name { font-weight: 600; font-size: .85rem; color: var(--text); } .nav-avatar-item { display: block; width: 100%; padding: 7px 14px; font-size: .85rem; color: var(--text); text-decoration: none; background: none; border: none; text-align: left; cursor: pointer; } .nav-avatar-item:hover { background: color-mix(in srgb, var(--primary) 8%, var(--card-bg, #fff)); color: var(--primary); text-decoration: none; } .nav-avatar-signout { color: #dc2626; } .nav-avatar-signout:hover { background: #fef2f2; color: #b91c1c; } .nav-avatar-divider { margin: 4px 0; border-color: var(--border, #e5e7eb); } /* Settings page */ .settings-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 24px; max-width: 600px; } .settings-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; } /* Hamburger button — hidden on desktop */ .nav-hamburger { display: none; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text); padding: 8px 10px; border-radius: 6px; min-width: 44px; min-height: 44px; } .nav-hamburger:hover { background: var(--bg); } /* nav-menu is a flex row on desktop, collapses on mobile */ .nav-menu { display: flex; align-items: center; } /* ── Mobile nav ────────────────────────────────────────────── */ @media (max-width: 640px) { .app-nav { height: auto; min-height: var(--nav-height); flex-wrap: wrap; padding: 0 16px; gap: 0; } .nav-brand { padding: 12px 0; font-size: 0.9rem; } .nav-brand-icon { font-size: 1.1rem; } .nav-hamburger { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; } .nav-menu { display: none !important; width: 100%; border-top: 1px solid var(--border); padding: 12px 0 16px; } .nav-menu.open { display: flex !important; flex-direction: column; } .nav-user { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } .nav-user a, .nav-user .nav-pro-badge, .nav-user span { display: block; width: 100%; } .nav-user .nav-link, .nav-user .nav-admin-link { padding: 8px 4px; font-size: 1rem; } .nav-user .nav-avatar { margin: 8px auto; } .nav-user .nav-link-icon { padding: 8px 4px; font-size: 1.2rem; } .nav-user .btn-upgrade-nav, .nav-user .btn-outline-secondary { width: 100%; text-align: center; margin: 4px 0; } .nav-user form.d-inline { display: block !important; width: 100%; } .nav-user .nav-pro-badge { text-align: center; } } /* ────────────────────────────────────────── Page Header ────────────────────────────────────────── */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .page-title { font-size: 1.8rem; font-weight: 800; margin: 0; } .page-subtitle { color: var(--muted); margin: 4px 0 0; font-size: .9rem; } /* ────────────────────────────────────────── Filter Tabs ────────────────────────────────────────── */ .filter-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; width: fit-content; } .trip-list-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .trip-search { position: relative; flex: 1 1 240px; max-width: 360px; } .trip-search input { padding-right: 34px; } .trip-search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px 8px; border-radius: 6px; line-height: 1; } .trip-search-clear:hover { background: var(--bg); color: var(--text); } @media (max-width: 480px) { .trip-list-controls { flex-direction: column; align-items: stretch; } .filter-tabs { width: 100%; } .trip-search { max-width: 100%; } } .filter-tab { background: none; border: none; padding: 8px 16px; min-height: 40px; border-radius: 8px; font-size: .875rem; font-weight: 500; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } @media (pointer: coarse) { .filter-tab { min-height: 44px; } } .filter-tab:hover { color: var(--text); background: var(--bg); } .filter-tab.active { background: var(--primary); color: white; } .filter-count { background: rgba(255,255,255,.25); border-radius: 10px; padding: 1px 6px; font-size: .75rem; } .filter-tab:not(.active) .filter-count { background: var(--border); color: var(--muted); } /* ────────────────────────────────────────── Trip Grid & Cards ────────────────────────────────────────── */ .trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } @media (max-width: 480px) { .trip-grid { grid-template-columns: 1fr; gap: 12px; } } .trip-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .2s, box-shadow .2s; position: relative; } .trip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .trip-card-cover { height: 120px; display: flex; align-items: center; justify-content: center; position: relative; } .trip-card-emoji { font-size: 3rem; } .trip-card-status { position: absolute; top: 10px; left: 10px; font-size: .7rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; letter-spacing: .5px; text-transform: uppercase; } .badge-upcoming { background: rgba(255,255,255,.9); color: var(--primary); } .badge-ongoing { background: rgba(6,214,160,.9); color: #fff; } .badge-past { background: rgba(0,0,0,.35); color: #fff; } .trip-card-body { padding: 14px 16px 16px; } .trip-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 4px; } .trip-card-title a { color: inherit; text-decoration: none; /* On hover, hint at link-ness without going full default-blue. */ transition: color .15s; } .trip-card-title a:hover { color: var(--primary); text-decoration: underline; } .trip-card-dest { color: var(--muted); font-size: .85rem; margin: 0 0 8px; } .trip-card-meta { font-size: .8rem; color: var(--muted); margin-bottom: 8px; } .trip-card-stats { display: flex; gap: 8px; } .trip-stat { background: var(--bg); border-radius: 6px; padding: 3px 8px; font-size: .75rem; font-weight: 500; color: var(--muted); } .trip-card-delete { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.45); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, background .15s; } .trip-card-delete:hover { background: rgba(0,0,0,.65); } .trip-card:hover .trip-card-delete { opacity: 1; } /* Touch devices: hover never fires — always show the delete affordance. */ @media (hover: none) { .trip-card-delete { opacity: .85; } } /* ────────────────────────────────────────── Trip Hero Banner ────────────────────────────────────────── */ .trip-hero { margin: -24px -32px 0; /* Compacted from 20px/24px to give the hero a shorter footprint — moving the country flags up into the header row reclaims the vertical space the trip-hero-countries block used to occupy. */ padding: 14px 32px 18px; color: white; } .trip-hero-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .trip-hero-back { color: rgba(255,255,255,.85); font-size: .875rem; display: inline-block; } .trip-hero-back:hover { color: white; text-decoration: none; } /* Country flags pulled out of the title block and into the header row. */ .trip-hero-header-flags { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; margin: 0 8px; } .trip-hero-header-flags .country-flag-badge { box-shadow: 0 0 1px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.18); } /* ── Trip hero kebab menu ─────────────────────────────────── */ .trip-hero-menu-wrapper { position: relative; } .trip-hero-menu-btn { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); color: white; /* Bigger touch target — was 4px×10px with 1.3rem font, easy to miss on phones. Now a comfortable 44px square that meets the touch- target minimum and looks intentional. */ font-size: 1.5rem; min-width: 44px; min-height: 44px; padding: 0; line-height: 1; border-radius: 10px; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; } .trip-hero-menu-btn:hover { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.5); } .trip-hero-menu-backdrop { position: fixed; inset: 0; z-index: 1040; } .trip-hero-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1041; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.22); padding: 6px; min-width: 180px; display: flex; flex-direction: column; gap: 1px; } .trip-hero-dropdown button { background: none; border: none; text-align: left; padding: 9px 14px; border-radius: 6px; font-size: .92rem; cursor: pointer; color: var(--text); transition: background .1s; white-space: nowrap; width: 100%; } .trip-hero-dropdown button:hover { background: var(--bg); } .trip-hero-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } .trip-hero-dropdown-danger { color: #dc2626 !important; } .trip-hero-dropdown-danger:hover { background: #fee2e2 !important; } .trip-edit-btn { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); color: white; font-size: 1.2rem; padding: 8px 12px; border-radius: 8px; transition: all .2s; } .trip-edit-btn:hover { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.5); transform: scale(1.05); } .trip-hero-content { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; } .trip-hero-emoji { font-size: 3.5rem; } .trip-hero-title { font-size: 2rem; font-weight: 800; margin: 0 0 6px; } .trip-hero-meta { opacity: .9; font-size: .9rem; margin: 0; } .trip-hero-desc { opacity: .8; font-size: .875rem; margin: 6px 0 0; } .trip-hero-location { opacity: .8; font-size: .875rem; margin: 6px 0 0; } .trip-hero-countries { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; } .country-flag-badge { width: 1.4em; line-height: 1em; border-radius: 2px; cursor: default; box-shadow: 0 0 1px rgba(0,0,0,.3); } .country-flag-tile-img { width: 2rem; line-height: 1.5rem; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,.25); } .trip-hero-stats { display: flex; gap: 24px; } .hero-stat { text-align: center; } .hero-stat-value { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; } .hero-stat-label { font-size: .75rem; opacity: .8; text-transform: uppercase; letter-spacing: .5px; } /* ────────────────────────────────────────── Tab Navigation ────────────────────────────────────────── */ .tab-nav { display: flex; border-bottom: 2px solid var(--border); margin: 20px 0 28px; } .tab-btn { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 12px 20px; font-size: .9rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: all .15s; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .tab-content-area { min-height: 400px; } /* ────────────────────────────────────────── Itinerary / Journal Layout ────────────────────────────────────────── */ /* ── Day Navigator ────────────────────────────────────────── */ .day-nav-wrapper { display: flex; align-items: stretch; gap: 4px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; position: sticky; top: calc(var(--nav-height) + 4px); z-index: 50; box-shadow: 0 2px 6px rgba(0,0,0,.06); } .day-nav-strip { flex: 1; display: flex; gap: 4px; overflow-x: hidden; scroll-behavior: smooth; min-width: 0; } .day-nav-btn { flex-shrink: 0; width: 40px; min-height: 44px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; } .day-nav-btn:hover { background: var(--primary); color: white; border-color: var(--primary); } .day-tab { flex-shrink: 0; min-width: 78px; min-height: 44px; background: none; border: none; border-radius: 6px; padding: 8px 10px; text-align: center; cursor: pointer; transition: background .15s; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; } .day-tab:hover { background: var(--bg); } .day-tab.active { background: var(--primary); } .day-tab.active .day-tab-num, .day-tab.active .day-tab-date, .day-tab.active .day-tab-count, .day-tab.active .day-tab-has-entry { color: white; } .day-tab.day-tab-drag-over { background: #e0e7ff; outline: 2px dashed var(--primary); outline-offset: -2px; } .activity-card-dragging { opacity: 0.45; } .day-tab-num { font-size: .78rem; font-weight: 700; color: var(--primary); } .day-tab-date { font-size: .72rem; color: var(--muted); } .day-tab-count { font-size: .68rem; color: var(--muted); } .day-tab-has-entry { font-size: .75rem; color: var(--teal); } .day-tab-hotel-badges { display: flex; gap: 3px; margin-top: 2px; justify-content: center; } .day-tab-badge { font-size: .62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; } .day-tab-badge-in { background: rgba(46,196,182,.18); color: #1a8a82; } .day-tab-badge-out { background: rgba(247,37,133,.12); color: #c01870; } .day-content, .journal-content { min-height: 200px; } .day-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .day-header > div { min-width: 0; } .day-title { font-size: 1.2rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ────────────────────────────────────────── Activity Cards ────────────────────────────────────────── */ .activity-list { display: flex; flex-direction: column; gap: 12px; } .activity-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow); transition: box-shadow .15s; /* draggable="true" makes mobile browsers start a drag on long-touch, which can hijack vertical scroll. Limit touch gestures to vertical panning so the page always scrolls cleanly on phones. */ touch-action: pan-y; } .activity-card:hover { box-shadow: var(--shadow-md); } /* Spanning (multi-day) activity cards */ .activity-card-span { cursor: pointer; opacity: .88; } .span-staying { border-left-color: var(--muted); background: color-mix(in srgb, var(--surface) 92%, var(--muted)); } .span-end { border-left-color: var(--orange); background: color-mix(in srgb, var(--surface) 92%, var(--orange)); } .span-start { border-left-color: var(--teal); background: color-mix(in srgb, var(--surface) 92%, var(--teal)); } .span-status-badge { font-size: .7rem; padding: 2px 7px; border-radius: 10px; font-weight: 600; white-space: nowrap; } .span-badge-staying { background: var(--muted); color: #fff; } .span-badge-end { background: var(--orange); color: #fff; } .span-badge-start { background: var(--teal); color: #fff; } .span-badge-depart { background: var(--primary); color: #fff; } .span-badge-arrive { background: var(--green); color: #fff; } /* ── Activity type colours — grouped by category ────────────────────────── Transport (blue) · Stay (teal) · Rental (orange) · Places (green) · Other (muted) ────────────────────────────────────────────────────────────────────────── */ .type-flight, .type-train, .type-ferry, .type-bus, .type-taxi, .type-drive, .type-cycle, .type-walk, .type-other-transport, .type-transport { border-left-color: var(--primary); } .type-hotel, .type-property-rental, .type-other-accommodation, .type-camping { border-left-color: var(--teal); } .type-car-rental, .type-motorhome-rental { border-left-color: var(--orange); } .type-attraction, .type-restaurant, .type-business-event, .type-guided-tour, .type-other-event { border-left-color: var(--green); } .type-cruise { border-left-color: var(--teal); } .geo-pin { font-size: 0.75rem; margin-left: 0.25rem; vertical-align: middle; } .nights-badge { font-size: .72rem; font-weight: 600; background: color-mix(in srgb, var(--teal) 15%, var(--bg)); color: var(--teal); border-radius: 8px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; } .type-parking, .type-note, .type-other { border-left-color: var(--muted); } .activity-type-badge { font-size: 1.4rem; flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 50%; } /* Badge background tinted to match the activity category colour */ .type-flight .activity-type-badge, .type-train .activity-type-badge, .type-ferry .activity-type-badge, .type-bus .activity-type-badge, .type-taxi .activity-type-badge, .type-drive .activity-type-badge, .type-cycle .activity-type-badge, .type-walk .activity-type-badge, .type-other-transport .activity-type-badge, .type-transport .activity-type-badge { background: color-mix(in srgb, var(--primary) 18%, var(--bg)); } .type-hotel .activity-type-badge, .type-property-rental .activity-type-badge, .type-other-accommodation .activity-type-badge, .type-camping .activity-type-badge, .type-cruise .activity-type-badge { background: color-mix(in srgb, var(--teal) 18%, var(--bg)); } .type-car-rental .activity-type-badge, .type-motorhome-rental .activity-type-badge { background: color-mix(in srgb, var(--orange) 18%, var(--bg)); } .type-attraction .activity-type-badge, .type-restaurant .activity-type-badge, .type-business-event .activity-type-badge, .type-guided-tour .activity-type-badge, .type-other-event .activity-type-badge { background: color-mix(in srgb, var(--green) 18%, var(--bg)); } .type-parking .activity-type-badge, .type-note .activity-type-badge, .type-other .activity-type-badge { background: color-mix(in srgb, var(--muted) 18%, var(--bg)); } /* Span-cards keep the activity's category-tinted badge (the same disc the home-day card uses), so a Hotel reads as the same teal disc on day 1, day 2, and check-out day. Only the card body's edge tint changes with role (teal / muted / orange) to communicate Start / Staying / End. */ .activity-info { flex: 1; } .activity-name { font-weight: 600; font-size: .95rem; margin-bottom: 4px; min-width: 0; } /* When the activity name is rendered as an edit button (non-readonly trips), strip the button chrome and keep it visually identical to the span version, but show a pointer + subtle hover hint so users know it's interactive. */ .activity-name-btn { background: none; border: none; padding: 0; text-align: left; color: inherit; cursor: pointer; font-family: inherit; line-height: inherit; transition: color .15s; } .activity-name-btn:hover { color: var(--primary); } .activity-name-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } .activity-address, .activity-time, .activity-notes, .activity-cost { font-size: .8rem; color: var(--muted); margin-top: 2px; } .activity-notes { background: var(--bg); padding: 4px 8px; border-radius: 6px; margin-top: 6px; font-style: italic; } .activity-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── Activity card kebab menu ─────────────────────────────── */ .activity-card-actions { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 2px; } .activity-card-action { padding: 6px; min-width: 32px; min-height: 32px; opacity: .6; color: var(--text); } .activity-card-action:hover { opacity: 1; background: var(--bg); } .activity-card:hover .activity-card-action { opacity: .85; } @media (hover: none) { .activity-card-action { opacity: .85; } } @media (max-width: 768px) { .activity-card-action { min-width: 44px; min-height: 44px; padding: 10px; } /* Dropdown items — comfortable 44px touch targets, full-width tap area. */ .activity-card-dropdown { padding: 8px; min-width: 220px; } .activity-card-dropdown button, .activity-card-dropdown a { min-height: 44px; padding: 12px 14px; font-size: .95rem; display: flex; align-items: center; gap: 8px; } .activity-card-menu-btn { min-width: 44px; min-height: 44px; } } .activity-card-menu { position: relative; } .activity-card { position: relative; } .activity-card-menu-btn { font-size: 1.2rem; padding: 2px 8px; opacity: 0.5; line-height: 1; } .activity-card-menu-btn:hover { opacity: 1; } .activity-card-backdrop { position: fixed; inset: 0; z-index: 1040; } .activity-card-dropdown { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1041; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; min-width: 170px; display: flex; flex-direction: column; gap: 1px; } .activity-card-dropdown button, .activity-card-dropdown a { display: block; background: none; border: none; text-align: left; padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; cursor: pointer; color: var(--text); text-decoration: none; transition: background .1s; white-space: nowrap; width: 100%; } .activity-card-dropdown button:hover, .activity-card-dropdown a:hover { background: var(--bg); } .activity-card-dropdown-danger { color: #dc2626 !important; } .activity-card-dropdown-danger:hover { background: #fee2e2 !important; } .activity-card-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } .activity-card-dropdown-label { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); padding: 4px 12px 2px; text-transform: uppercase; letter-spacing: .04em; } .activity-card-dropdown-submenu button { padding-left: 20px; font-size: .85rem; color: var(--muted); } .btn-icon { background: none; border: none; font-size: 1rem; cursor: pointer; padding: 8px 10px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; opacity: 0.6; transition: background .15s, opacity .15s; } @media (pointer: coarse) { /* Touch devices: honour WCAG 44px minimum. */ .btn-icon { min-width: 44px; min-height: 44px; } } .btn-icon:hover { background: var(--bg); opacity: 1; } .btn-icon-danger:hover { background: #fee2e2; } .copy-btn { background: none; border: none; font-size: .8rem; cursor: pointer; padding: 1px 4px; border-radius: 4px; color: var(--muted); opacity: 0.6; transition: color .15s, opacity .15s; vertical-align: middle; line-height: 1; } .copy-btn:hover { opacity: 1; color: var(--primary); } .copy-btn-done { color: #16a34a !important; opacity: 1 !important; } /* ────────────────────────────────────────── Map ────────────────────────────────────────── */ .map-container { display: grid; grid-template-columns: 240px 1fr; height: 65vh; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border); } .map-sidebar { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 12px; } .map-sidebar-title { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 10px; } .map-stop-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 6px; border: 1px solid transparent; transition: all .15s; } .map-stop-item:hover { background: var(--bg); border-color: var(--border); } .map-stop-item.no-coords { opacity: .5; cursor: default; } .map-stop-day { font-size: .7rem; font-weight: 600; color: var(--primary); margin-bottom: 2px; } .map-stop-name { font-size: .85rem; font-weight: 500; } .map-stop-addr { font-size: .75rem; color: var(--muted); } .map-stop-nocoords { font-size: .72rem; color: var(--accent); font-style: italic; } .map-area { position: relative; } .leaflet-map { width: 100%; height: 100%; } .custom-map-pin { background: none; border: none; } .map-pin-inner { width: 40px; height: 40px; background: var(--primary); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); } .map-pin-num { transform: rotate(45deg); color: white; font-size: .7rem; font-weight: 700; } .map-popup { font-size: .875rem; } /* ────────────────────────────────────────── Journal ────────────────────────────────────────── */ .journal-day-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .journal-editor { background: var(--surface); border-radius: var(--radius); padding: 24px; border: 1px solid var(--border); box-shadow: var(--shadow); } .mood-picker { display: flex; gap: 8px; flex-wrap: wrap; } .mood-btn { background: var(--bg); border: 2px solid transparent; border-radius: 8px; font-size: 1.5rem; padding: 4px 8px; cursor: pointer; transition: all .15s; } .mood-btn:hover { border-color: var(--border); transform: scale(1.1); } .mood-btn.selected { border-color: var(--primary); background: rgba(67,97,238,.08); } .journal-textarea { font-size: 1rem; line-height: 1.7; resize: vertical; min-height: 200px; } .journal-entry { background: var(--surface); border-radius: var(--radius); padding: 28px 32px; border: 1px solid var(--border); box-shadow: var(--shadow); } .journal-entry-mood { font-size: 2.5rem; margin-bottom: 10px; } .journal-entry-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; } .journal-entry-meta { margin-bottom: 20px; } .journal-entry-content { line-height: 1.8; } .journal-entry-content p { margin-bottom: 14px; } /* ────────────────────────────────────────── Modals ────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; animation: fadeIn .15s; } .modal-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border-radius: 16px; width: min(520px, 95vw); max-height: 90vh; overflow-y: auto; z-index: 201; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: slideUp .2s ease; } .modal-panel-large { width: min(720px, 95vw); } .modal-header-bar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; } .modal-header-bar h2 { font-size: 1.2rem; font-weight: 700; margin: 0; } .modal-header-title { flex: 1; font-size: 1.1rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modal-header-actions { display: flex; gap: 6px; flex-shrink: 0; } .modal-header-bar-sticky { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 16px 16px 0 0; } .modal-close { background: var(--bg); border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 1rem; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: var(--border); } .modal-body-content { padding: 16px 24px 24px; -webkit-overflow-scrolling: touch; } .family-member-card { background: var(--bg); transition: border-color .2s; } .family-member-card:hover { border-color: var(--primary) !important; } /* ────────────────────────────────────────── Empty / Loading States ────────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-state-icon { font-size: 3.5rem; display: block; margin-bottom: 12px; } .empty-state h3 { font-size: 1.2rem; color: var(--text); margin: 0 0 8px; } .day-empty { text-align: center; padding: 40px 20px; color: var(--muted); } .day-empty span { font-size: 2.5rem; display: block; margin-bottom: 8px; } .loading-state { display: flex; justify-content: center; padding: 60px; } /* ────────────────────────────────────────── Auth Pages ────────────────────────────────────────── */ .auth-body { background: linear-gradient(135deg, #4361EE 0%, #7B2FBE 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .auth-container { width: 100%; max-width: 420px; padding: 16px; } .auth-card { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,.2); } .auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; justify-content: center; } .auth-logo-icon { font-size: 2rem; } .auth-logo-text { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0; } .auth-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; text-align: center; } .auth-subtitle { color: var(--muted); text-align: center; margin-bottom: 28px; font-size: .9rem; } .btn-auth { height: 44px; font-weight: 600; font-size: 1rem; margin-top: 4px; } .auth-footer { text-align: center; margin: 20px 0 0; font-size: .875rem; color: var(--muted); } /* ────────────────────────────────────────── Add Stop Category Menu ────────────────────────────────────────── */ .add-stop-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .add-stop-menu-wrapper { position: relative; } .add-stop-backdrop { position: fixed; inset: 0; z-index: 1040; } .add-stop-dropdown { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1041; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.22); padding: 6px; min-width: 160px; display: flex; flex-direction: column; gap: 1px; } .add-stop-dropdown button { background: none; border: none; text-align: left; padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; cursor: pointer; color: var(--text); transition: background .1s; white-space: nowrap; width: 100%; display: inline-flex; align-items: center; gap: 8px; } .add-stop-menu-wrapper .btn-xs { display: inline-flex; align-items: center; gap: 6px; } .find-activities-btn { display: inline-flex; align-items: center; gap: 6px; } .add-stop-dropdown button:hover { background: var(--bg); } .btn-xs { padding: 3px 8px; font-size: 0.78rem; border-radius: 5px; white-space: nowrap; } /* Activity type badge in edit mode */ .activity-type-badge-row { display: flex; align-items: center; gap: 10px; } .activity-type-badge { font-size: 0.8rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--primary); color: #fff; white-space: nowrap; } .activity-type-change { flex: 1; font-size: 0.85rem; } /* Focus-reveal help text */ .field-hint { display: none; font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .field-with-hint:focus-within .field-hint { display: block; } /* ────────────────────────────────────────── DateTime Picker ────────────────────────────────────────── */ .dtp-wrapper { display: flex; flex-direction: column; gap: 2px; } .dtp-inputs { display: flex; align-items: center; gap: 4px; } .dtp-date { flex: 1 1 auto; min-width: 0; } /* ── Calendar-picker icon visibility ───────────────────────────────────── The user reported the calendar icon on hotel/camping date inputs was "blank" — the native ::-webkit-calendar-picker-indicator renders as a black SVG by default and disappears entirely against the dark surface colour in dark mode. Two-pronged fix: 1. color-scheme: light dark — tells the browser this input adapts to either theme, so it picks an icon that matches. 2. Explicit filter: invert in dark mode to flip the black SVG to white. Also bump opacity + cursor so the indicator reads as interactive in both themes. */ input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: light dark; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; padding: 4px; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); } /* Auto theme: respect the user's system preference. */ @media (prefers-color-scheme: dark) { [data-theme="auto"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="auto"] input[type="time"]::-webkit-calendar-picker-indicator, [data-theme="auto"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); } } .dtp-time { flex: 0 0 90px; padding-left: 8px; padding-right: 4px; text-align: center; } .dtp-clear { align-self: flex-end; background: none; border: none; color: var(--text-muted); font-size: 0.75rem; cursor: pointer; padding: 2px 6px; line-height: 1.4; } .dtp-clear:hover { color: var(--danger, #dc3545); } /* ────────────────────────────────────────── Emoji Picker ────────────────────────────────────────── */ .emoji-picker-wrapper { position: relative; display: inline-block; width: 100%; } .emoji-picker-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 1.5rem; line-height: 1; transition: border-color .15s; } .emoji-picker-toggle:hover { border-color: var(--primary); } .emoji-picker-preview { flex: 1; text-align: center; } .emoji-picker-caret { font-size: 0.6rem; color: var(--text-muted); } .emoji-picker-dropdown { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: 10px; width: 280px; max-height: 340px; overflow-y: auto; } .emoji-picker-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 8px 0 4px; } .emoji-picker-group-label:first-child { margin-top: 0; } .emoji-picker-grid { display: flex; flex-wrap: wrap; gap: 2px; } .emoji-picker-item { width: 36px; height: 36px; font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; background: transparent; border: 2px solid transparent; border-radius: 6px; cursor: pointer; transition: background .1s, border-color .1s; } .emoji-picker-item:hover { background: var(--bg); } .emoji-picker-item.selected { border-color: var(--primary); background: var(--bg); } /* ────────────────────────────────────────── Colour Picker ────────────────────────────────────────── */ .color-picker-row { display: flex; gap: 8px; flex-wrap: wrap; } .color-swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform .15s, border-color .15s; } .color-swatch:hover { transform: scale(1.15); } .color-swatch.selected { border-color: var(--text); transform: scale(1.15); } /* ────────────────────────────────────────── Bootstrap overrides ────────────────────────────────────────── */ .btn-primary { background: var(--primary); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } /* ────────────────────────────────────────── Blazor Error UI ────────────────────────────────────────── */ #blazor-error-ui { background: #ffdd57; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; } /* ────────────────────────────────────────── Animations ────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translate(-50%, -45%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } } @keyframes slideUpSheet { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ────────────────────────────────────────── Responsive ────────────────────────────────────────── */ @media (max-width: 960px) { .day-tab { min-width: 72px; padding: 7px 8px; } } @media (max-width: 768px) { /* Mobile padding override — use SHORTHAND-FREE properties so we don't clobber the padding-bottom: 50vh rule defined further up the sheet. Previously `padding: 16px` here silently won the cascade and reset the bottom padding to 16px, which is why the last activity card couldn't scroll above the bottom nav. */ .app-main { padding-top: 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); /* padding-bottom is intentionally NOT set here — see the @media (max-width: 768px) block earlier in this file that gives it calc(50vh + env(safe-area-inset-bottom)) so the last card can scroll into the centre of the screen. */ } .trip-hero { margin: -16px -16px 0; padding: 16px; } .day-tab { min-width: 66px; padding: 6px 6px; } .day-tab-count { display: none; } .map-container { grid-template-columns: 1fr; height: auto; } .map-sidebar { max-height: 180px; } .map-area { height: 50vh; } /* Hero stays horizontal on mobile too — emoji on the left, title text on the right — instead of stacking vertically (was taking too much vertical space). The emoji size drops so the row still fits the narrower viewport. */ .trip-hero-content { flex-direction: row; align-items: center; gap: 12px; text-align: left; } .trip-hero-emoji { font-size: 2.4rem; } .trip-hero-title { font-size: 1.4rem; } .trip-hero-stats { justify-content: flex-start; gap: 14px; } .trip-hero { padding: 12px 16px 16px; } /* Tab nav — single-line horizontal scroll with a fade hint on the right edge so users see there's more to scroll. flex-wrap stays nowrap. touch-action: pan-x means a finger swiping down on the tab row scrolls the page vertically instead of getting captured by the horizontal scroll. */ .tab-nav { flex-wrap: nowrap; overflow-x: auto; gap: 0; margin: 12px -16px 16px; padding: 0 16px 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x; border-bottom: 1px solid var(--border); mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%); } .tab-nav::-webkit-scrollbar { display: none; } .tab-btn { flex: 0 0 auto; scroll-snap-align: start; font-size: .82rem; padding: 10px 14px; white-space: nowrap; border-bottom: 3px solid transparent; } /* Admin tabs — wrap to multiple lines */ .admin-tabs { flex-wrap: wrap !important; overflow-x: visible !important; } .admin-tab { flex: 0 0 auto; } /* Booking checklist — stack label above actions, full-width wrapping buttons. */ .booking-checklist-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 14px; } .booking-checklist-day { width: auto; font-size: .75rem; font-weight: 600; } .booking-checklist-name { white-space: normal; } .booking-checklist-actions { flex-wrap: wrap; width: 100%; gap: 6px; } .booking-checklist-actions .btn-xs { flex: 1 1 auto; min-height: 36px; padding: 6px 10px; font-size: .78rem; text-align: center; } /* Modal — full-width bottom sheet on mobile */ .modal-panel { width: 100vw !important; max-width: 100vw !important; max-height: 92dvh; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; border-radius: 20px 20px 0 0; overflow-y: auto; animation: slideUpSheet .32s var(--ease-spring) !important; padding-top: 18px; box-shadow: 0 -8px 32px rgba(15,23,42,.18); } /* iOS-style drag handle on the sheet — purely visual affordance. */ .modal-panel::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: var(--border); pointer-events: none; } .modal-panel-large { width: 100vw !important; max-width: 100vw !important; } /* Admin payment filters — wrap */ .admin-payment-filters { flex-wrap: wrap; } /* DateTimePicker — shrink time input on mobile */ .dtp-time { flex: 0 0 78px; font-size: .85rem; } /* Form inputs — increase touch target height */ .modal-panel .form-control, .modal-panel .form-select { min-height: 44px; } /* Two-column form rows — force single column in modals on mobile */ .modal-panel .row > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; } /* Touch-target minimums — every interactive control ≥ 44px vertically. */ .form-control, .form-select, select, textarea { min-height: 44px; font-size: 16px; } .btn, .btn-sm { min-height: 44px; } .btn-xs { min-height: 36px; } /* Icon-only circular controls — 40px square minimum for thumb reach. */ .trip-card-delete { width: 36px; height: 36px; } .nav-hamburger { min-width: 44px; min-height: 44px; } /* Section tab nav scrolls away with the page on mobile — the sticky day strip below is the dominant sticky chrome for the itinerary view, and letting two sticky bars compete at top:60/64 caused jumpy overlap. */ .tab-nav { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; } .tab-btn { min-height: 44px; } /* Let horizontal day-strip scroll naturally on touch with inertia + snap. pan-x means the strip handles horizontal swipes; vertical swipes pass through to the page so the user can scroll the itinerary even when their finger starts on a day tab. */ .day-nav-strip { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x; } .day-nav-strip::-webkit-scrollbar { display: none; } .day-tab { scroll-snap-align: start; touch-action: pan-x; } /* Trim sticky day-nav-wrapper on mobile — every pixel of sticky chrome reduces visible itinerary area, which the user reported as a problem when a day has lots of activities. */ .day-nav-wrapper { padding: 4px; margin-bottom: 10px; transition: transform .22s var(--ease-out, ease-out); will-change: transform; } .day-nav-wrapper.day-nav-hidden { /* Slide up out of view when the user is scrolling down. JS in wwwroot/js/scrollUi.js toggles this class on scroll direction. */ transform: translateY(calc(-100% - var(--nav-height) - 8px)); pointer-events: none; } .day-tab-hotel-badges { margin-top: 1px; } /* Compact activity cards on mobile — collapse to a single-line summary (icon + name + time/status badges). Address, notes, cost, transport route, and booking ref appear only when the card is tapped/expanded. This lets users see far more activities per screen on a packed day. */ .activity-card:not(.activity-card-expanded) .activity-address, .activity-card:not(.activity-card-expanded) .activity-notes, .activity-card:not(.activity-card-expanded) .activity-cost, .activity-card:not(.activity-card-expanded) .activity-booking-ref, .activity-card:not(.activity-card-expanded) .activity-time { display: none; } .activity-card:not(.activity-card-expanded) { padding: 10px 12px; gap: 10px; } .activity-card:not(.activity-card-expanded) .activity-type-badge { width: 32px; height: 32px; font-size: 1.1rem; } /* Small hint that the card has more info hidden behind a tap. */ .activity-card:not(.activity-card-expanded)::after { content: '⌄'; position: absolute; bottom: 4px; right: 10px; color: var(--muted); font-size: .9rem; line-height: 1; opacity: .55; pointer-events: none; } } @media (max-width: 520px) { .day-tab { min-width: 60px; padding: 6px 4px; } /* DateTimePicker — stack date over time on very small screens */ .dtp-inputs { flex-wrap: wrap; } .dtp-date { flex: 1 1 100%; margin-bottom: 4px; } .dtp-time { flex: 0 0 80px; } } /* ────────────────────────────────────────── Subscription / Billing ────────────────────────────────────────── */ /* Nav badges */ .nav-pro-badge { display: inline-block; background: linear-gradient(135deg, #f72585, #7b2fbe); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .5px; margin-right: 8px; } .btn-upgrade-nav { background: linear-gradient(135deg, #f72585, #7b2fbe); color: #fff; border: none; font-size: .75rem; font-weight: 600; border-radius: 20px; padding: 4px 14px; } .btn-upgrade-nav:hover { opacity: .88; color: #fff; } /* Upgrade CTA button (used in Billing page and UpgradePrompt) */ .btn-upgrade { background: linear-gradient(135deg, #f72585, #7b2fbe); color: #fff; border: none; font-weight: 600; border-radius: 8px; padding: 10px 20px; } .btn-upgrade:hover { opacity: .88; color: #fff; } /* UpgradePrompt component */ .upgrade-prompt { text-align: center; padding: 60px 24px; max-width: 480px; margin: 0 auto; } .upgrade-prompt-icon { font-size: 3rem; margin-bottom: 16px; } .upgrade-prompt-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; } .upgrade-prompt-body { color: var(--text-muted); margin-bottom: 24px; } /* Billing page — current plan */ .billing-current-plan { display: flex; align-items: center; gap: 8px; } .billing-tier-badge { font-size: .85rem; font-weight: 700; padding: 4px 14px; border-radius: 20px; } .badge-free { background: var(--surface-2); color: var(--text-muted); } .badge-pro { background: linear-gradient(135deg, #f72585, #7b2fbe); color: #fff; } /* Plan comparison cards */ .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 720px; } @media (max-width: 600px) { .plan-grid { grid-template-columns: 1fr; } } .plan-card { background: var(--surface-1); border: 2px solid var(--border-color); border-radius: 16px; padding: 28px; } .plan-card-current { border-color: var(--primary); } .plan-card-pro { border-color: #c77dff; } .plan-card-header { margin-bottom: 20px; } .plan-badge { display: inline-block; font-size: .7rem; font-weight: 700; background: linear-gradient(135deg, #f72585, #7b2fbe); color: #fff; padding: 2px 10px; border-radius: 20px; margin-bottom: 8px; } .plan-name { font-size: 1.5rem; font-weight: 700; margin: 0; } .plan-price { font-size: 2rem; font-weight: 800; margin-top: 4px; } .plan-period { font-size: 1rem; font-weight: 400; color: var(--text-muted); } .plan-features { list-style: none; padding: 0; margin: 0; } .plan-features li { padding: 6px 0; font-size: .95rem; } .plan-feature-locked { color: var(--text-muted); } .plan-current-label { margin-top: 16px; text-align: center; color: var(--primary); font-weight: 600; font-size: .9rem; } /* ────────────────────────────────────────── Country Autocomplete ────────────────────────────────────────── */ .country-autocomplete { position: relative; } .country-dropdown { z-index: 1050; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: white; } .country-dropdown .list-group-item { padding: 10px 12px; min-height: 44px; display: flex; align-items: center; } .z-dropdown { z-index: 1050; } /* ────────────────────────────────────────── Profile Page ────────────────────────────────────────── */ .profile-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; } .profile-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; text-align: center; box-shadow: var(--shadow); } .profile-stat-highlight { background: var(--primary); border-color: var(--primary); color: white; } .profile-stat-highlight .profile-stat-label { color: rgba(255,255,255,.8); } .profile-stat-value { font-size: 2.2rem; font-weight: 800; line-height: 1; } .profile-stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 4px; } .section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .section-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .section-card-title { font-size: 1.1rem; font-weight: 700; margin: 0; } /* Flag wall */ .country-flag-wall { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px; } .country-flag-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); min-width: 72px; cursor: default; transition: transform .15s, box-shadow .15s; } .country-flag-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .country-flag-tile-emoji { font-size: 2rem; line-height: 1; } .country-flag-tile-name { font-size: .65rem; font-weight: 600; text-align: center; color: var(--muted); max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .country-breakdown { padding: 0 4px; } /* ────────────────────────────────────────── Day Weather Widget ────────────────────────────────────────── */ .weather-widget { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.15); backdrop-filter: blur(4px); border-radius: 20px; padding: 2px 10px; font-size: .85rem; white-space: nowrap; } .weather-emoji { font-size: 1.1rem; line-height: 1; } .weather-temp { font-weight: 600; font-size: .85rem; } .weather-temp-min { font-weight: 400; opacity: .75; } .weather-loading { min-width: 48px; justify-content: center; } /* ────────────────────────────────────────── Packing List ────────────────────────────────────────── */ .packing-luggage-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); } .packing-luggage-tab { background: none; border: none; padding: 8px 16px; font-size: .9rem; color: var(--muted); cursor: pointer; border-radius: 6px 6px 0 0; display: flex; align-items: center; gap: 6px; } .packing-luggage-tab .tab-count { background: var(--border); color: var(--muted); font-size: .72rem; padding: 1px 6px; border-radius: 10px; font-weight: 600; } .packing-luggage-tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); font-weight: 600; margin-bottom: -2px; } .packing-luggage-tab.active .tab-count { background: var(--primary); color: white; } .packing-category-header { font-size: .85rem; padding: 6px 2px; display: flex; align-items: center; } .packing-item { display: flex; align-items: center; cursor: pointer; user-select: none; padding: 8px 12px; gap: 6px; } .packing-item-packed .packing-item-name { text-decoration: line-through; color: var(--muted); } .packing-item-name { flex: 1; font-size: .9rem; } .packing-luggage-pill { font-size: .8rem; padding: 1px 6px; border-radius: 10px; background: var(--border); margin-left: auto; } .pill-hand { background: #e8f4fd; } .pill-hold { background: #f3f0ff; } .packing-delete-btn { background: none; border: none; color: var(--muted); font-size: .8rem; padding: 2px 6px; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .15s; } .packing-item:hover .packing-delete-btn { opacity: 1; } .packing-delete-btn:hover { background: #fee2e2; color: #dc2626; } /* ────────────────────────────────────────── Booking Status ────────────────────────────────────────── */ .activity-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; /* Reserve space on the right so the absolutely-positioned eye / edit / kebab buttons (.activity-card-actions) don't visually overlap a long activity name. The actions strip is ~120-150px wide. */ padding-right: 110px; min-height: 28px; } .activity-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; /* Same right-padding so time / status badges don't flow under the action buttons either — the issue the user reported when those buttons grew. */ padding-right: 110px; } .booking-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .booking-badge-booked { background: #d1fae5; color: #065f46; } .booking-badge-unbooked { background: #fef3c7; color: #92400e; } .overlap-badge { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #fee2e2; color: #991b1b; white-space: nowrap; } .jr-pass-badge { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #fef2f4; color: #bc002d; border: 1px solid color-mix(in srgb, #bc002d 30%, transparent); white-space: nowrap; } .overnight-badge { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #ede9fe; color: #5b21b6; white-space: nowrap; } .travel-duration-badge { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #dbeafe; color: #1e40af; white-space: nowrap; margin-left: 4px; } .timezone-diff-badge { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #fef3c7; color: #92400e; white-space: nowrap; margin-left: 4px; } .activity-card.needs-booking { border-left: 3px solid #f59e0b; } .activity-booking-ref { font-size: .82rem; margin-top: 4px; color: var(--text); } /* Booking Checklist */ .booking-checklist { margin-bottom: 16px; border: 1.5px solid #fde68a; border-radius: var(--radius); background: #fffbeb; overflow: hidden; } .booking-checklist-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: none; border: none; cursor: pointer; font-weight: 600; font-size: .9rem; color: #92400e; } .booking-checklist-header:hover { background: #fef3c7; } .booking-checklist-toggle { font-size: .75rem; } .booking-checklist-body { border-top: 1px solid #fde68a; padding: 4px 0; } .booking-checklist-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: .88rem; border-bottom: 1px solid #fef3c7; } .booking-checklist-row:last-child { border-bottom: none; } .booking-checklist-day { color: var(--muted); white-space: nowrap; width: 44px; flex-shrink: 0; } .booking-checklist-name { flex: 1; min-width: 0; font-weight: 500; } .booking-checklist-actions { display: flex; gap: 6px; flex-shrink: 0; } .btn-xs { padding: 2px 8px; font-size: .75rem; border-radius: 6px; } /* Booking Modal Section */ .booking-section { background: var(--bg); border-radius: 8px; padding: 14px; } .booking-section-title { font-size: .95rem; font-weight: 700; margin: 0 0 12px; } /* ────────────────────────────────────────── Parking Tab ────────────────────────────────────────── */ .parking-wrap { max-width: 800px; margin: 24px auto; padding: 0 16px; } .parking-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .unbooked-badge { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 20px; padding: 4px 12px; font-size: .82rem; font-weight: 600; } .parking-empty { text-align: center; padding: 60px 20px; color: var(--muted); } .parking-empty-icon { font-size: 3rem; margin-bottom: 12px; } .parking-grid { display: flex; flex-direction: column; gap: 14px; } .parking-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid #0ea5e9; border-radius: var(--radius); padding: 16px; } .parking-card-warn { border-left-color: #f59e0b; } .parking-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .parking-card-name { font-weight: 700; font-size: 1rem; } .parking-status-badge { padding: 2px 8px; border-radius: 20px; font-size: .75rem; font-weight: 600; white-space: nowrap; } .parking-status-booked { background: #d1fae5; color: #065f46; } .parking-status-unbooked { background: #fef3c7; color: #92400e; } .parking-status-notrequired { background: var(--bg); color: var(--muted); border: 1px solid var(--border); } .parking-detail { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; margin-bottom: 6px; color: var(--text); } .parking-detail-icon { flex-shrink: 0; width: 18px; } .parking-notes { margin-top: 10px; font-size: .85rem; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 8px 10px; } .parking-card-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } /* ────────────────────────────────────────── Admin Panel ────────────────────────────────────────── */ .admin-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px; } .admin-header { margin-bottom: 20px; } .admin-title { font-size: 1.6rem; font-weight: 700; margin: 0; } .admin-loading, .admin-denied { text-align: center; padding: 80px 20px; } .admin-empty { padding: 40px; text-align: center; color: var(--muted); } .admin-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .admin-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 8px 18px; font-size: .9rem; cursor: pointer; color: var(--muted); transition: color .15s; white-space: nowrap; flex-shrink: 0; } .admin-tab:hover { color: var(--text); } .admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .admin-stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; text-align: center; } .admin-stat-card.accent-pro { border-color: #6c63ff; } .admin-stat-card.accent-trip { border-color: #06b6d4; } .admin-stat-card.accent-admin { border-color: #f59e0b; } .admin-stat-value { font-size: 2rem; font-weight: 700; line-height: 1; } .admin-stat-label { font-size: .78rem; color: var(--muted); margin-top: 6px; } .admin-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .admin-search { max-width: 320px; } .admin-payment-filters { display: flex; gap: 6px; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .admin-table th { padding: 8px 12px; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--border); } .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table tr:hover td { background: var(--bg); } .admin-row-admin td { background: #fffbeb; } .admin-cell-email { font-size: .82rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-actions-row { display: flex; gap: 6px; flex-wrap: wrap; } .tier-badge { padding: 2px 8px; border-radius: 20px; font-size: .75rem; font-weight: 600; } .tier-pro { background: #ede9fe; color: #6c63ff; } .tier-free { background: var(--bg); color: var(--muted); border: 1px solid var(--border); } .payment-status { padding: 2px 8px; border-radius: 20px; font-size: .75rem; font-weight: 600; } .payment-succeeded { background: #d1fae5; color: #065f46; } .payment-failed { background: #fee2e2; color: #991b1b; } .payment-refunded { background: #fef3c7; color: #92400e; } .admin-sub-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .admin-sub-tab { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 14px; font-size: .82rem; cursor: pointer; color: var(--muted); transition: background .15s, color .15s; white-space: nowrap; } .admin-sub-tab:hover { background: var(--bg); color: var(--text); } .admin-sub-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; } .nav-admin-link { font-size: .82rem; color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); } .nav-admin-link:hover { color: var(--text); background: var(--bg); } /* Log viewer */ .admin-log-table td { padding: 6px 10px; vertical-align: top; } .log-level-badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; } .log-level-information { background: #dbeafe; color: #1e40af; } .log-level-warning { background: #fef3c7; color: #92400e; } .log-level-error { background: #fee2e2; color: #991b1b; } .log-level-critical { background: #fce7f3; color: #9d174d; } .log-level-debug { background: #f3f4f6; color: #6b7280; } .log-category { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .log-message { word-break: break-word; } .log-exception { font-size: .72rem; max-height: 180px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; background: #1e1e1e; color: #f8f8f2; padding: 8px; border-radius: 4px; margin-top: 4px; } .log-row.log-error td, .log-row.log-critical td { background: #fff5f5; } @media (max-width: 575.98px) { .admin-wrap { padding: 12px 10px; } .admin-tab { padding: 6px 12px; font-size: .82rem; } .admin-search { max-width: 100%; } .admin-toolbar { gap: 8px; } .admin-table { font-size: .80rem; } .admin-table th, .admin-table td { padding: 6px 8px; } .admin-stat-value { font-size: 1.5rem; } .admin-actions-row .btn { font-size: .72rem; padding: 2px 6px; } } .modal-panel-sm { max-width: 440px; } /* ────────────────────────────────────────── OAuth Buttons ────────────────────────────────────────── */ .auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: .85rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .oauth-buttons { display: flex; flex-direction: column; gap: 10px; } .oauth-buttons form { display: flex; flex-direction: column; gap: 10px; } .btn-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border-radius: 8px; font-weight: 500; font-size: .95rem; border: 1.5px solid var(--border); background: #fff; color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; } .btn-oauth:hover { background: var(--bg); border-color: #c0c8d8; } .btn-oauth-apple { background: #000; color: #fff; border-color: #000; } .btn-oauth-apple:hover { background: #222; border-color: #222; } /* ────────────────────────────────────────── Place Search ────────────────────────────────────────── */ .place-search-row { display: flex; gap: 8px; } .place-search-row .form-control { flex: 1; } .place-results { border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; max-height: 220px; overflow-y: auto; background: #fff; box-shadow: var(--shadow); } .place-result-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; } .place-result-item:last-child { border-bottom: none; } .place-result-item:hover { background: var(--bg); } .place-result-name { font-weight: 600; font-size: .9rem; color: var(--text); } .place-result-address { font-size: .8rem; color: var(--muted); } /* ────────────────────────────────────────── Sharing Modal ────────────────────────────────────────── */ .modal-panel-wide { max-width: 560px; } .share-section { margin-bottom: 4px; } .share-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; } .share-link-row { display: flex; gap: 8px; align-items: center; } .share-link-row .form-control { flex: 1; font-size: .8rem; } .invite-row { display: flex; gap: 8px; align-items: center; } .invite-row .form-control { flex: 1; } .invite-role-select { width: 120px; flex-shrink: 0; } .members-list { display: flex; flex-direction: column; gap: 10px; } .member-row { display: flex; align-items: center; gap: 10px; } .member-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; } .member-info { flex: 1; min-width: 0; } .member-name { font-weight: 600; font-size: .9rem; } .member-email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member-role-badge { font-size: .75rem; } .invite-pending-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .9rem; } /* ────────────────────────────────────────── Shared Trip Banner ────────────────────────────────────────── */ .shared-banner { background: linear-gradient(90deg, #4361ee, #7b2fbe); color: #fff; padding: 10px 24px; display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; } /* ────────────────────────────────────────── Map Links (in read-only activity cards) ────────────────────────────────────────── */ .map-links { margin-left: 8px; display: inline-flex; gap: 6px; } .map-link { font-size: .75rem; padding: 1px 8px; border: 1px solid var(--border); border-radius: 20px; background: #fff; color: var(--primary); white-space: nowrap; } .map-link:hover { background: var(--primary); color: #fff; text-decoration: none; } /* ────────────────────────────────────────── Shared trip cards on dashboard ────────────────────────────────────────── */ .trip-card-shared-badge { font-size: .7rem; padding: 2px 8px; border-radius: 20px; background: #e0f0ff; color: var(--primary); font-weight: 600; display: inline-block; margin-top: 4px; } /* ────────────────────────────────────────── Trip Bookings Summary ────────────────────────────────────────── */ .bookings-container { max-width: 860px; margin: 0 auto; } .bookings-tab-bar { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--border); padding-bottom: 0; } .bookings-tab { background: none; border: none; padding: 8px 14px; font-size: .9rem; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: color .15s; } .bookings-tab:hover { color: var(--text); } .bookings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; padding: 0 5px; } .tab-badge-empty { background: var(--border); color: var(--text-muted); } .booking-cards-list { display: flex; flex-direction: column; gap: 14px; } .booking-summary-card { border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; transition: box-shadow .15s; } .booking-summary-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); } .booking-summary-meta { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-size: .82rem; } .booking-day-label { font-weight: 600; color: var(--text-muted); } .booking-status-pill { font-size: .75rem; padding: 2px 10px; border-radius: 12px; font-weight: 600; } .pill-booked { background: #d4edda; color: #155724; } .pill-unbooked { background: #fff3cd; color: #856404; } .booking-card-body { padding: 14px 16px; } .booking-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 1rem; } .booking-type-emoji { font-size: 1.2rem; } .booking-route { display: flex; align-items: center; gap: 12px; background: var(--bg-secondary); border-radius: 8px; padding: 10px 14px; margin: 8px 0; } .booking-route-point { display: flex; flex-direction: column; gap: 1px; flex: 1; } .route-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .route-value { font-weight: 700; font-size: .95rem; } .route-time { font-size: .8rem; color: var(--text-muted); } .route-arrow { font-size: 1.2rem; color: var(--primary); flex-shrink: 0; } .booking-detail-row { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--text); padding: 3px 0; } .detail-icon { width: 20px; text-align: center; font-size: 1rem; } .booking-notes { margin-top: 8px; padding: 8px 10px; background: #fffbf0; border-left: 3px solid #ffc107; border-radius: 4px; font-size: .85rem; color: var(--text); } .booking-card-actions { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg-secondary); display: flex; justify-content: flex-end; } /* Error alerts — pre-wrap so dev stack traces render with correct line breaks */ .alert-danger { white-space: pre-wrap; font-family: monospace; font-size: 0.8rem; } /* ── Discover / Find Activity tab ─────────────────────────────────────────── */ .discover-container { padding: 20px; max-width: 900px; margin: 0 auto; } .discover-search-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; } .discover-search-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .discover-search-icon { font-size: 1.2rem; flex-shrink: 0; } .discover-input { flex: 1; min-width: 0; } .discover-search-btn { flex-shrink: 0; } .discover-filters { display: flex; flex-wrap: wrap; gap: 8px; } .discover-filter-btn { padding: 4px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); font-size: 0.85rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .discover-filter-btn:hover { background: var(--bg-hover, #f0f0f0); } .discover-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } .discover-loading { text-align: center; padding: 40px; color: var(--text-muted, #6c757d); } .discover-results-header { padding: 0 4px; } .discover-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .discover-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s; } .discover-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); } .discover-card-body { display: flex; gap: 12px; padding: 14px; flex: 1; } .discover-card-emoji { font-size: 2rem; flex-shrink: 0; line-height: 1; } .discover-card-info { min-width: 0; } .discover-card-name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; margin-bottom: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .discover-card-address { font-size: 0.78rem; color: var(--text-muted, #6c757d); margin-bottom: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .discover-type-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .discover-type-restaurant { background: #fff3cd; color: #856404; } .discover-type-hotel { background: #cff4fc; color: #055160; } .discover-type-attraction { background: #d1e7dd; color: #0a3622; } .discover-type-transport { background: #e2e3e5; color: #383d41; } .discover-type-other, .discover-type-place { background: #f0e6ff; color: #4a235a; } .discover-card-footer { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-secondary); border-top: 1px solid var(--border); } .discover-day-select { flex: 1; min-width: 0; font-size: 0.8rem; } .discover-add-btn { flex-shrink: 0; } .discover-empty-state { text-align: center; padding: 60px 20px 40px; } .discover-empty-state h3 { font-size: 1.3rem; margin: 12px 0 8px; } .discover-empty { text-align: center; padding: 40px 20px; color: var(--text-muted, #6c757d); } .discover-empty-icon { font-size: 3rem; margin-bottom: 8px; } .discover-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; } .discover-suggestion-chip { padding: 6px 16px; border-radius: 20px; border: 1px dashed var(--primary); background: transparent; color: var(--primary); font-size: 0.85rem; cursor: pointer; transition: background 0.15s; } .discover-suggestion-chip:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } /* ── Activity card expand panel ───────────────────────────────────────────── */ .activity-card-expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; } .activity-expand-panel { background: #f8f9ff; border: 1px solid #c7d2fe; border-top: none; border-radius: 0 0 8px 8px; padding: 12px 16px; margin-bottom: 12px; font-size: 0.875rem; } .expand-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; color: #374151; } .expand-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #6b7280; letter-spacing: .04em; min-width: 80px; flex-shrink: 0; } .expand-map-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e0e7ff; } .expand-map-links .map-link { font-size: 0.8rem; padding: 3px 10px; border-radius: 12px; background: #e0e7ff; color: #3730a3; text-decoration: none; white-space: nowrap; } .expand-map-links .map-link:hover { background: #c7d2fe; } /* ── Compact time badge on collapsed activity card ────────────────────────── */ .activity-time-badge { font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 7px; border-radius: 10px; background: #e0e7ff; color: #3730a3; white-space: nowrap; letter-spacing: .03em; } /* ── Map embed inside expand panel ───────────────────────────────────────── */ .expand-map-embed { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .expand-directions-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; background: var(--primary); color: #fff; text-decoration: none; align-self: flex-start; transition: background .15s; } .expand-directions-btn:hover { background: var(--primary-dark); color: #fff; text-decoration: none; } /* ── Booking dashboard page ───────────────────────────────────────────────── */ .booking-dashboard { max-width: 900px; margin: 0 auto; } .booking-trip-group { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; } .booking-trip-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 12px 16px; } .booking-dashboard-table { padding: 0; } .booking-dashboard-table table { margin-bottom: 0; } /* ── Activity form section label ──────────────────────────────────────────── */ .form-section-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin-bottom: 12px; } /* ── Nav icon link ────────────────────────────────────────────────────────── */ .nav-link-icon { font-size: 1.1rem; text-decoration: none; opacity: 0.8; transition: opacity 0.15s; } .nav-link-icon:hover { opacity: 1; } /* ── Cookie consent banner ────────────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #1f2937; color: #f9fafb; z-index: 9999; padding: 12px 24px; box-shadow: 0 -2px 12px rgba(0,0,0,0.3); } .cookie-banner-content { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; max-width: 960px; margin: 0 auto; font-size: 0.9rem; } .cookie-link { color: #93c5fd; } /* ────────────────────────────────────────── About page ────────────────────────────────────────── */ .about-page { max-width: 720px; margin: 0 auto; padding-bottom: 56px; } .about-hero { text-align: center; padding: 40px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 40px; } .about-hero-icon { font-size: 3rem; line-height: 1; margin-bottom: 12px; } .about-hero-title { font-size: 2rem; font-weight: 800; margin: 0 0 6px; } .about-hero-strapline { color: var(--muted); font-size: 1.05rem; margin: 0 0 14px; } .about-sections { display: flex; flex-direction: column; gap: 36px; } .about-section h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); display: inline-block; } .about-section p { color: var(--muted); line-height: 1.7; margin-bottom: 10px; } .about-section p:last-of-type { margin-bottom: 14px; } .about-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .about-feature-list li { display: flex; align-items: center; gap: 10px; font-size: .95rem; } .about-feature-icon { font-size: 1.1rem; flex-shrink: 0; } .about-footer-links { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); font-size: .85rem; } /* Nav version badge */ .nav-version { font-size: .68rem; color: var(--muted); opacity: 0.7; margin-left: 4px; } /* ────────────────────────────────────────── What's New / Changelog ────────────────────────────────────────── */ .whats-new-page { max-width: 760px; margin: 0 auto; padding-bottom: 48px; } .whats-new-header { margin-bottom: 32px; } .release-current-version { display: inline-block; margin-top: 8px; font-size: .82rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 3px 12px; } .release-block { display: grid; grid-template-columns: 120px 1fr; gap: 0 24px; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border); } .release-block:last-child { border-bottom: none; } .release-date-col { padding-top: 3px; } .release-version { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 2px; } .release-date { font-size: .78rem; color: var(--muted); white-space: nowrap; } .release-items { display: flex; flex-direction: column; gap: 14px; } .release-item { display: flex; gap: 12px; align-items: flex-start; } .release-badge { flex-shrink: 0; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; } .release-badge-feature { background: #dbeafe; color: #1d4ed8; } .release-badge-improvement { background: #d1fae5; color: #065f46; } .release-badge-fix { background: #fef3c7; color: #92400e; } .release-item-body strong { font-size: .95rem; } .release-item-desc { margin: 4px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; } @media (max-width: 600px) { .release-block { grid-template-columns: 1fr; gap: 8px; } .release-date-col { padding-top: 0; } } /* ────────────────────────────────────────── Tag Picker (Travel Preferences) ────────────────────────────────────────── */ .tag-picker { display: flex; flex-wrap: wrap; gap: 6px; } .tag-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .82rem; cursor: pointer; transition: all .15s ease; min-height: 36px; } .tag-pill:hover { border-color: var(--primary); color: var(--primary); } .tag-pill-selected { background: var(--primary); color: #fff; border-color: var(--primary); } .tag-pill-selected:hover { background: color-mix(in srgb, var(--primary) 85%, #000); } /* ── Admin: Notification Preferences ──────────────────────────────────── */ .notif-prefs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem; } .notif-pref-card { display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all .15s ease; background: var(--surface); } .notif-pref-card:hover { border-color: var(--primary); } .notif-pref-card.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); } .notif-pref-card input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); } .notif-pref-emoji { font-size: 1.75rem; line-height: 1; } .notif-pref-title { font-weight: 600; } /* ── Admin: Email Log ──────────────────────────────────────────────────── */ .email-log-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; align-items: end; } .email-log-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .email-log-status.status-sent { background: color-mix(in srgb, #06D6A0 18%, transparent); color: #067257; } .email-log-status.status-failed { background: color-mix(in srgb, #dc2626 18%, transparent); color: #b91c1c; } .email-log-status.status-pending { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #92400e; } .email-preview-wrapper { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; margin-top: 1rem; } .email-preview-subject { padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-size: .9rem; background: var(--bg); } .email-preview-iframe { width: 100%; min-height: 600px; border: 0; display: block; background: #fff; } /* ── Border Crossing Badge ──────────────────────────────────────────────── */ .border-crossing-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; padding: .15rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); white-space: nowrap; } .country-flag-sm { font-size: .85rem; } /* ── AI Suggest My Day ──────────────────────────────────────────────────── */ .suggest-day-container { max-width: 720px; } .suggest-day-list { display: flex; flex-direction: column; gap: .75rem; } .suggest-day-card { border: 1px solid var(--border); border-radius: 12px; padding: 1rem; background: var(--surface); transition: border-color .15s ease, opacity .25s ease; } .suggest-day-card:hover { border-color: var(--primary); } .suggest-day-card.accepted { border-color: #28a745; background: color-mix(in srgb, #28a745 6%, var(--surface)); opacity: .75; } .suggest-day-card.rejected { opacity: .45; } .suggest-day-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; } .suggest-day-emoji { font-size: 1.5rem; } .suggest-day-actions { display: flex; gap: .4rem; flex-shrink: 0; } .suggest-day-reason { margin: .5rem 0 0; color: var(--text-muted); font-size: .88rem; } .suggest-day-meta { display: flex; gap: 1rem; margin-top: .5rem; font-size: .82rem; color: var(--text-muted); } /* ── Admin Notifications tab ─────────────────────────────────────────── */ .notif-prefs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .notif-pref-card { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .notif-pref-card:hover { border-color: var(--primary); } .notif-pref-card.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); } .notif-pref-card input[type="checkbox"] { margin-top: .25rem; } .notif-pref-emoji { font-size: 1.5rem; line-height: 1; } .notif-pref-title { font-weight: 600; margin-bottom: .15rem; } /* ── Admin Email Log tab ─────────────────────────────────────────────── */ .email-log-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .email-log-filters > * { flex: 0 1 auto; } .email-log-filters input[placeholder^="Recipient"] { min-width: 220px; flex: 1 1 220px; } .email-log-status { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .email-log-status.status-sent { background: #d1f0da; color: #156c31; } .email-log-status.status-failed { background: #fadbd8; color: #922b21; } .email-log-status.status-pending { background: #fdf2cf; color: #8a6d1c; } .email-preview-wrapper { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); margin-top: 1rem; } .email-preview-subject { padding: .6rem .9rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); font-size: .9rem; } .email-preview-iframe { display: block; width: 100%; min-height: 480px; border: 0; background: #fff; } .modal-panel-large { max-width: 920px; width: 95%; } /* ────────────────────────────────────────── Typography scale — baseline sizing for h1–h6 and small text. Individual components can still override when needed. ────────────────────────────────────────── */ h1, .h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: var(--weight-bold); margin: 0 0 var(--space-3); letter-spacing: -0.02em; } h2, .h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: var(--weight-semibold); margin: 0 0 var(--space-3); letter-spacing: -0.01em; } h3, .h3 { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); } h4, .h4 { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); } h5, .h5 { font-size: var(--text-base);line-height: var(--leading-snug); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); } h6, .h6 { font-size: var(--text-sm); line-height: var(--leading-snug); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } /* ────────────────────────────────────────── Global focus ring — high-visibility amber outline on the active control. Uses :focus-visible (keyboard / sequential focus) plus :focus on form controls so touch users see the active input too. Mouse-clicked buttons do NOT light up, keeping the UI calm for pointer users. ────────────────────────────────────────── */ :root { --focus-ring: #fbbf24; /* amber-400 — strong on light & dark surfaces */ --focus-ring-soft: rgba(251, 191, 36, .35); } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Form controls — show the ring on plain :focus too, because touch users tap to focus an input and need to see which field they're editing. */ input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); box-shadow: 0 0 0 4px var(--focus-ring-soft); } /* ────────────────────────────────────────── Button hierarchy — primary / secondary / tertiary / destructive. Bootstrap .btn classes co-exist; use .btn-primary-app etc for the new scale. Micro-transitions (150ms) give a "modern" feel. Disabled under prefers-reduced-motion. ────────────────────────────────────────── */ .btn-primary-app, .btn-secondary-app, .btn-tertiary-app, .btn-destructive-app { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out), box-shadow .15s var(--ease-out); text-decoration: none; white-space: nowrap; user-select: none; } .btn-primary-app { background: var(--primary); color: #fff; box-shadow: var(--shadow-xs); } .btn-primary-app:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow); } .btn-primary-app:active:not(:disabled){ transform: translateY(0); box-shadow: var(--shadow-xs); } .btn-secondary-app { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary-app:hover:not(:disabled) { background: var(--surface-sunken); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .btn-tertiary-app { background: transparent; color: var(--primary); padding: 8px var(--space-3); } .btn-tertiary-app:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 10%, transparent); } .btn-destructive-app{ background: #EF4444; color: #fff; } .btn-destructive-app:hover:not(:disabled) { background: #DC2626; transform: translateY(-1px); } .btn-primary-app:disabled, .btn-secondary-app:disabled, .btn-tertiary-app:disabled, .btn-destructive-app:disabled { opacity: .55; cursor: not-allowed; transform: none !important; } /* ────────────────────────────────────────── Skeleton loaders — shimmering placeholders for content not yet loaded. Use
etc. ────────────────────────────────────────── */ .skeleton { display: block; background: linear-gradient( 90deg, color-mix(in srgb, var(--muted) 12%, transparent) 0%, color-mix(in srgb, var(--muted) 22%, transparent) 50%, color-mix(in srgb, var(--muted) 12%, transparent) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); } .skeleton-line { height: 1em; margin: var(--space-2) 0; width: 100%; } .skeleton-line.sm { width: 40%; } .skeleton-line.md { width: 65%; } .skeleton-title { height: 1.5em; width: 55%; margin: 0 0 var(--space-3); border-radius: var(--radius-sm); } .skeleton-card { height: 210px; border-radius: var(--radius); } .skeleton-avatar{ width: 40px; height: 40px; border-radius: 50%; } .trip-card-skeleton { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow-xs); } .trip-card-skeleton .skeleton-card { height: 140px; margin-bottom: var(--space-3); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: color-mix(in srgb, var(--muted) 18%, transparent); } } /* ────────────────────────────────────────── Toast notifications — fixed top-right stack. ────────────────────────────────────────── */ .toast-host { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--space-4)); right: var(--space-4); z-index: 3000; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; max-width: min(420px, calc(100vw - var(--space-5))); } .toast { pointer-events: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); animation: toast-in .25s var(--ease-spring); font-size: var(--text-sm); } .toast.leaving { animation: toast-out .2s var(--ease-out) forwards; } .toast-success { border-left-color: var(--green); } .toast-error { border-left-color: #EF4444; } .toast-warning { border-left-color: var(--orange); } .toast-info { border-left-color: var(--primary); } .toast-body { flex: 1; line-height: var(--leading-snug); } .toast-close { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0; font-size: var(--text-lg); line-height: 1; } .toast-close:hover { color: var(--text); } @keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(12px); } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.leaving { animation: none; opacity: 0; } } /* ────────────────────────────────────────── Empty state — shared styling for "no X yet" screens. ────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-6) var(--space-4); gap: var(--space-3); } .empty-state-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); margin-bottom: var(--space-2); } .empty-state-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0; } .empty-state-body { color: var(--muted); max-width: 42ch; margin: 0; line-height: var(--leading-snug); } .empty-state-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; justify-content: center; } /* ────────────────────────────────────────── Day summary strip — small pills under day header (stop count, total cost). ────────────────────────────────────────── */ .day-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: -10px 0 14px; } .day-summary-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); color: var(--text); font-size: .8rem; font-weight: 600; } /* ────────────────────────────────────────── Time-of-day divider inside an activity list (Morning / Afternoon / Evening). ────────────────────────────────────────── */ .time-of-day-divider { display: flex; align-items: center; gap: 10px; margin: 8px 2px 4px; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .time-of-day-divider::before, .time-of-day-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .time-of-day-divider span { padding: 0 4px; white-space: nowrap; } /* ────────────────────────────────────────── Improved empty-day card — replaces the bare ".day-empty" placeholder. ────────────────────────────────────────── */ .day-empty-card { text-align: center; padding: clamp(28px, 6vw, 56px) 20px; border: 2px dashed color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); margin: 16px 0; } .day-empty-icon { display: block; font-size: 3rem; line-height: 1; margin-bottom: 12px; } .day-empty-card h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; color: var(--text); } .day-empty-card p { margin: 0 auto 16px; color: var(--muted); max-width: 44ch; line-height: 1.5; } .day-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ────────────────────────────────────────── Floating action buttons (FAB) — circular pinned buttons over content. Mobile-only; on desktop the in-page add-stop bar is right there. ────────────────────────────────────────── */ .fab { display: none; position: fixed; z-index: 80; width: 56px; height: 56px; border-radius: 50%; border: none; align-items: center; justify-content: center; color: white; background: var(--primary); box-shadow: var(--shadow-lg); cursor: pointer; transition: transform .15s var(--ease-out), opacity .2s var(--ease-out), background .15s; } .fab:hover { background: var(--primary-dark, var(--primary)); } .fab-add-stop { right: 16px; /* Baseline `bottom` placement. scrollUi.js overrides this inline on iOS Chrome / Safari to track the visual viewport bottom precisely — the calc() value here is the fallback for browsers without visualViewport. */ bottom: calc(88px + env(safe-area-inset-bottom)); } @media (max-width: 768px) { .fab { display: inline-flex; } } /* ────────────────────────────────────────── Touch active-press feedback — gives buttons a tactile "click" on phones. Skipped on devices with a real hover (desktop), where the click is visible via cursor + hover state. ────────────────────────────────────────── */ @media (hover: none) { .btn:active, .btn-icon:active, .activity-card-action:active, .activity-card-menu-btn:active, .day-tab:active, .tab-btn:active, .fab:active { transform: scale(.96); transition: transform .08s ease-out; } } /* ────────────────────────────────────────── Destination essentials panel — collapsible card above the itinerary. Appears only when the trip is to a supported destination (currently Japan). ────────────────────────────────────────── */ .dest-essentials { margin-bottom: 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, #bc002d 22%, var(--border)); background: color-mix(in srgb, #bc002d 4%, var(--surface)); overflow: hidden; } .dest-essentials-header { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 12px 16px; cursor: pointer; text-align: left; font: inherit; color: var(--text); } .dest-essentials-flag { font-size: 1.4rem; line-height: 1; } .dest-essentials-title { font-weight: 700; font-size: .95rem; } .dest-essentials-subtle { font-size: .8rem; color: var(--muted); margin-left: 4px; } .dest-essentials-toggle { margin-left: auto; color: var(--muted); font-size: 1rem; } .dest-essentials-body { padding: 0 16px 16px; } .dest-essentials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 4px; } .dest-essentials-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .dest-essentials-card h4 { margin: 0 0 6px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 6px; } .dest-essentials-card p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--text); } .dest-essentials-phrases { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; } .dest-essentials-phrases summary { cursor: pointer; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 6px; color: var(--text); list-style: none; } .dest-essentials-phrases summary::-webkit-details-marker { display: none; } .dest-essentials-phrases table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: .85rem; } .dest-essentials-phrases th, .dest-essentials-phrases td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-subtle, var(--border)); vertical-align: top; } .dest-essentials-phrases th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; } .dest-essentials-phrases td[lang="ja"] { font-family: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; } .dest-essentials-disclaimer { margin: 12px 0 0; font-size: .72rem; color: var(--muted); font-style: italic; } /* ────────────────────────────────────────── Japan rail tips card — appears on train activities when the route is in Japan. ────────────────────────────────────────── */ .japan-tips { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, #bc002d 6%, var(--surface)); border: 1px solid color-mix(in srgb, #bc002d 22%, var(--border)); font-size: .85rem; line-height: 1.5; } .japan-tips-header { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); margin-bottom: 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; } .japan-tips-flag { font-size: 1.1rem; line-height: 1; } .japan-tips-list { margin: 0; padding-left: 18px; color: var(--text); } .japan-tips-list li { padding: 2px 0; } .japan-tips-list li + li { margin-top: 4px; } .japan-tips-list em { font-style: italic; color: #bc002d; } /* ────────────────────────────────────────── Earthquake advisory banner — appears when USGS reports >=M4 quakes near the trip in the last 30 days / trip window. ────────────────────────────────────────── */ .quake-advisory { margin-bottom: 14px; border-radius: 12px; border: 1px solid #fed7aa; background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%); overflow: hidden; } .quake-advisory-header { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 10px 14px; cursor: pointer; text-align: left; font: inherit; color: #7c2d12; } .quake-advisory-icon { font-size: 1.2rem; line-height: 1; } .quake-advisory-title { font-weight: 700; font-size: .9rem; } .quake-advisory-meta { font-size: .78rem; color: #9a3412; margin-left: 4px; } .quake-advisory-toggle { margin-left: auto; font-size: 1rem; color: #9a3412; } .quake-advisory-list { list-style: none; margin: 0; padding: 0 14px 12px; font-size: .85rem; color: var(--text); } .quake-advisory-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, #fed7aa 60%, transparent); } .quake-mag { font-weight: 700; padding: 2px 7px; border-radius: 6px; font-size: .75rem; background: #fde68a; color: #78350f; min-width: 50px; text-align: center; } .quake-mag-strong { background: #fdba74; color: #7c2d12; } .quake-mag-severe { background: #f87171; color: #ffffff; } .quake-place { font-weight: 600; } .quake-distance, .quake-time { color: var(--muted); font-size: .8rem; } .quake-link { margin-left: auto; font-size: .8rem; color: #9a3412; } .quake-advisory-disclaimer { margin: 0 14px 12px; font-size: .72rem; color: var(--muted); font-style: italic; } /* ────────────────────────────────────────── PWA install — iOS step list shown when the user can't trigger the install prompt programmatically (iOS Safari requires manual Add to Home Screen). ────────────────────────────────────────── */ .install-ios-steps { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); border-radius: 10px; padding: 14px 16px; color: var(--text); } .install-ios-steps p { margin: 0 0 8px; } .install-ios-steps ol { padding-left: 20px; } .install-ios-steps li { padding: 2px 0; line-height: 1.5; } /* ────────────────────────────────────────── Currency converter — collapsible inline widget on the itinerary day view. ────────────────────────────────────────── */ .currency-converter { margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .currency-converter-toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 10px 14px; cursor: pointer; text-align: left; font: inherit; color: var(--text); } .currency-converter-toggle:hover { background: var(--bg); } .currency-converter-icon { font-size: 1.2rem; line-height: 1; } .currency-converter-label { font-weight: 600; font-size: .9rem; } .currency-converter-caret { margin-left: auto; color: var(--muted); font-size: 1rem; } .currency-converter-body { padding: 0 14px 14px; } .currency-converter-row { display: flex; gap: 8px; align-items: flex-end; } .currency-converter-row + .currency-converter-row { margin-top: 10px; } .currency-converter-field { flex: 1 1 auto; min-width: 0; display: block; } .currency-converter-field-narrow { flex: 0 0 130px; } .currency-converter-field-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; } .currency-converter-result { min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; } .currency-converter-result.loading { color: var(--muted); } .currency-converter-swap-row { display: flex; justify-content: center; margin: 6px 0; } .currency-converter-swap { background: var(--surface); border: 1px solid var(--border); color: var(--muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; transition: all .15s; } .currency-converter-swap:hover { background: var(--primary); color: white; border-color: var(--primary); } .currency-converter-rate { margin: 10px 0 0; color: var(--muted); font-size: .78rem; text-align: right; } @media (max-width: 520px) { .currency-converter-field-narrow { flex: 0 0 110px; } .currency-converter-result { font-size: 1rem; padding: 8px 10px; min-height: 40px; } } /* ────────────────────────────────────────── Offline indicator — top-centre pill that appears when navigator.onLine flips to false. Sits below the toast host (z-index < 3000) so a toast surfaced at the moment connectivity drops still wins focus. Slides in/out for a subtle reveal. ────────────────────────────────────────── */ .offline-indicator { position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--space-3)); left: 50%; transform: translateX(-50%); z-index: 2900; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--orange); color: #fff; border-radius: 999px; box-shadow: var(--shadow-md); font-size: var(--text-sm); font-weight: var(--weight-semibold); animation: offline-indicator-in .25s var(--ease-spring); pointer-events: none; max-width: calc(100vw - var(--space-5)); text-align: center; } @keyframes offline-indicator-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { .offline-indicator { animation: none; } }