/* --------------------------------------------------------------------------- Theme tokens. Every colour in this file comes from a token below, so a theme is defined in exactly one place. Light is the default; the dark block overrides the same names. Nothing else in the stylesheet needs to know which theme is active. `data-theme` is set on before first paint by the inline script in views/partials/header.ejs, which reads the `theme` cookie and falls back to the OS preference. That is why there is no `prefers-color-scheme` media query here: the script resolves system preference into an explicit value, which keeps the palette to a single definition instead of two copies. --------------------------------------------------------------------------- */ :root { /* Tells the browser to render native UI — scrollbars, date pickers, datalist dropdowns — to match. Easy to forget, very visible when wrong. */ color-scheme: light; --bg: #f6f7fb; --surface: #ffffff; /* Inputs match the card they sit on in light, and sit slightly below it in dark, where a same-colour field looks flat instead of fillable. */ --field-bg: #ffffff; --text: #1a1d29; --muted: #6b7280; --border: #e6e8ee; --primary: #2563eb; /* Read this as "primary, emphasised" rather than literally darker: it is the hover/active partner to --primary, and on a dark canvas it is lighter. */ --primary-dark: #1d4ed8; --on-primary: #ffffff; --danger: #dc2626; --success: #059669; --warn: #d97706; /* Subtle grey fills, faintest first: table headings, chips, pills, hovers. */ --fill-1: #fafbfd; --fill-2: #f3f4f8; --fill-3: #eef2f7; --fill-hover: #e8eaf2; --img-placeholder: #dde1ea; /* Badge and pill tints. Each is a wash plus a foreground that stays legible on it, so a badge only ever needs to name a pair. */ --accent-soft: #eef2ff; --accent-soft-fg: #1d4ed8; --ok-soft: #d1fae5; --ok-soft-fg: #065f46; --ok-wash: #ecfdf5; --bad-soft: #fee2e2; --bad-soft-fg: #991b1b; --bad-soft-hover: #fecaca; --warn-soft: #fef3c7; --warn-soft-fg: #92400e; --neutral-soft: #e5e7eb; --neutral-soft-fg: #4b5563; --info-soft: #dbeafe; --info-soft-fg: #1e40af; --violet-soft: #ede9fe; --violet-soft-fg: #5b21b6; --indigo-soft: #e0e7ff; --indigo-soft-fg: #3730a3; --pink-soft: #fce7f3; --pink-soft-fg: #9d174d; --note-bg: #fffbeb; --note-border: #fde68a; --warn-panel-bg: #fff7ed; --warn-panel-border: #fcd9b6; --track: #cbd5e1; --scrim: rgba(20, 24, 40, 0.45); --radius: 14px; --shadow: 0 4px 20px rgba(20, 24, 40, 0.06); --shadow-lg: 0 12px 40px rgba(20, 24, 40, 0.12); --shadow-pop: 0 8px 28px rgba(17, 24, 39, 0.14); /* Which glyph the theme toggle shows — see .theme-toggle. */ --icon-sun: none; --icon-moon: block; } [data-theme='dark'] { color-scheme: dark; --bg: #0f1116; --surface: #171a21; --field-bg: #12151c; --text: #e7e9ef; --muted: #98a1b2; --border: #2b303b; /* Bright enough to clear 4.5:1 as link text on --surface. Buttons pair it with a dark --on-primary rather than white, which white cannot do here. */ --primary: #7ea6f8; --primary-dark: #9dbcfb; --on-primary: #0d1017; --danger: #f87171; --success: #34d399; --warn: #fbbf24; --fill-1: #1a1d24; --fill-2: #1e222b; --fill-3: #232833; --fill-hover: #2b313d; --img-placeholder: #242932; /* Translucent washes rather than flat colours, so a tint reads correctly whether it sits on --surface or on the darker page --bg. */ --accent-soft: rgba(126, 166, 248, 0.18); --accent-soft-fg: #bfd4fd; --ok-soft: rgba(52, 211, 153, 0.16); --ok-soft-fg: #6ee7b7; --ok-wash: rgba(52, 211, 153, 0.14); --bad-soft: rgba(248, 113, 113, 0.16); --bad-soft-fg: #fca5a5; --bad-soft-hover: rgba(248, 113, 113, 0.28); --warn-soft: rgba(251, 191, 36, 0.16); --warn-soft-fg: #fcd34d; --neutral-soft: rgba(148, 163, 184, 0.18); --neutral-soft-fg: #cbd5e1; --info-soft: rgba(96, 165, 250, 0.20); --info-soft-fg: #93c5fd; --violet-soft: rgba(167, 139, 250, 0.2); --violet-soft-fg: #c4b5fd; --indigo-soft: rgba(129, 140, 248, 0.2); --indigo-soft-fg: #c7d2fe; --pink-soft: rgba(244, 114, 182, 0.2); --pink-soft-fg: #f9a8d4; --note-bg: rgba(251, 191, 36, 0.1); --note-border: rgba(251, 191, 36, 0.35); --warn-panel-bg: rgba(251, 146, 60, 0.1); --warn-panel-border: rgba(251, 146, 60, 0.35); --track: #3a4150; --scrim: rgba(0, 0, 0, 0.62); /* Soft shadows disappear on a dark canvas, so lean on depth of black. */ --shadow: 0 4px 20px rgba(0, 0, 0, 0.36); --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5); --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55); --icon-sun: block; --icon-moon: none; } * { box-sizing: border-box; } /* The hidden attribute must win even over components that set display (e.g. .btn). */ [hidden] { display: none !important; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.2; } /* Controls don't inherit colour from the page, so it has to be stated. The layout rules further down are scoped to `form`; this is not, because a field that happens to sit outside a
is invisible in dark mode otherwise. :where() keeps the specificity at zero so component rules still win. Checkboxes, radios and button-like inputs are skipped — a background here would interfere with how the browser draws them. */ :where(input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button']), select, textarea) { background-color: var(--field-bg); color: var(--text); } :where(button) { color: var(--text); } ::placeholder { color: var(--muted); opacity: 1; } /* ---- Shell: fixed nav rail on the left, page content on the right ---- */ .brand { font-weight: 800; font-size: 1.25rem; color: var(--text); letter-spacing: -0.5px; white-space: nowrap; } .brand span { color: var(--primary); } .brand:hover { text-decoration: none; } body.has-sidebar { display: flex; align-items: flex-start; min-height: 100vh; } .sidebar { flex: 0 0 244px; width: 244px; height: 100vh; position: sticky; top: 0; z-index: 60; background: var(--surface); border-right: 1px solid var(--border); padding: 22px 16px 18px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; } .sidebar > .brand { padding: 0 8px; } .side-links { display: flex; flex-direction: column; gap: 2px; } .side-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-weight: 500; padding: 10px 12px; border-radius: 10px; } .side-links a:hover { color: var(--text); background: var(--bg); text-decoration: none; } .side-links a.active { color: var(--primary-dark); background: var(--accent-soft); font-weight: 600; } /* Pinned to the bottom of the rail */ .side-account { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; display: grid; gap: 10px; } .side-account-actions { display: flex; align-items: center; gap: 8px; } .side-account-actions form { flex: 1; min-width: 0; } .side-user { display: block; padding: 6px 12px; border-radius: 10px; color: var(--text); } .side-user:hover { background: var(--bg); text-decoration: none; } .side-user.active { background: var(--accent-soft); } .side-user-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-user-role { display: block; font-size: 0.75rem; color: var(--muted); text-transform: capitalize; } .side-account form { margin: 0; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } .app-main > main { flex: 1; } .inline { display: inline; margin: 0; } /* Slim bar for signed-out pages, which have no rail */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---- Light/dark switch ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background: var(--fill-2); color: var(--text); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-toggle svg { width: 17px; height: 17px; } /* One glyph per theme, chosen by the palette itself so this needs no extra class bookkeeping when the theme changes. */ .theme-icon-sun { display: var(--icon-sun); } .theme-icon-moon { display: var(--icon-moon); } /* On the mobile bar the switch sits opposite the burger. */ .mobile-bar .theme-toggle { margin-left: auto; } /* Colours animate only while a switch is in flight — a standing transition on these properties would smear every ordinary hover and focus change. */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important; } @media (prefers-reduced-motion: reduce) { .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } } /* Mobile drawer: hidden on desktop, where the rail is always visible */ .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; } .mobile-bar { display: none; } .sidebar-scrim { display: none; } .nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; } .nav-toggle:focus-visible ~ .mobile-bar .nav-burger { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* Layout */ .container { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; width: 100%; } /* Full-bleed pages (e.g. the submission queue) sit snug against the sidebar. */ .container-wide { max-width: none; margin: 0; padding: 24px 20px 48px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; padding: 10px 18px; font-size: 0.95rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s ease; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-dark); color: var(--on-primary); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--bg); } .btn-danger { background: var(--bad-soft); color: var(--danger); } .btn-danger:hover { background: var(--bad-soft-hover); } .btn-lg { padding: 14px 26px; font-size: 1.05rem; } .btn-sm { padding: 6px 12px; font-size: 0.85rem; } .btn-block { width: 100%; } /* Flash */ .flash { padding: 12px 18px; border-radius: 10px; margin-bottom: 20px; font-weight: 500; } .flash-success { background: var(--ok-soft); color: var(--ok-soft-fg); } .flash-error { background: var(--bad-soft); color: var(--bad-soft-fg); } /* Hero */ .hero { background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff; border-radius: 20px; padding: 72px 48px; margin-bottom: 40px; } .hero-content { max-width: 620px; } .hero h1 { font-size: 2.6rem; margin: 0 0 16px; letter-spacing: -1px; } .hero p { font-size: 1.15rem; opacity: 0.92; margin: 0 0 28px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); } .hero .btn-ghost:hover { background: rgba(255,255,255,0.12); } /* Features */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } .feature-icon { font-size: 2rem; } .feature h3 { margin: 12px 0 6px; } .feature p { color: var(--muted); margin: 0; } /* Page head + filters */ .page-head { margin-bottom: 26px; } .page-head h1 { margin: 0 0 18px; } .filters { display: flex; gap: 12px; flex-wrap: wrap; } .filters select, .filters input { padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 0.95rem; background: var(--field-bg); color: var(--text); } .filters input { flex: 1; min-width: 200px; } /* Grid of cards */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease; color: var(--text); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; } .card-img { height: 180px; background-size: cover; background-position: center; background-color: var(--img-placeholder); position: relative; } .card-badge { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.65); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } .card-body { padding: 16px 18px 20px; } .card-body h3 { margin: 0 0 4px; font-size: 1.1rem; } .price { font-weight: 700; font-size: 1.05rem; margin: 8px 0 0; } .price span { font-weight: 500; color: var(--muted); font-size: 0.85rem; } .price.big { font-size: 1.5rem; } .muted { color: var(--muted); } /* Detail */ .back-link { display: inline-block; margin-bottom: 18px; color: var(--muted); } .detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; } .detail-img { border-radius: var(--radius); background-size: cover; background-position: center; background-color: var(--img-placeholder); min-height: 360px; position: relative; } .detail-info h1 { margin: 0 0 6px; } .desc { margin: 16px 0 24px; } .booking-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .booking-box h3 { margin: 0 0 14px; } /* Forms */ form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.9rem; } form input, form select, form textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 0.95rem; font-weight: 400; background: var(--field-bg); /* Fields don't inherit colour, so without this they keep the UA's dark text and vanish against a dark surface. */ color: var(--text); } form textarea { resize: vertical; } form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; } label.check input { width: auto; margin: 0; } small { font-weight: 400; } /* Auth */ .auth-card { max-width: 420px; margin: 24px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); } .auth-card h1 { margin: 0 0 4px; } .auth-card .muted { margin: 0 0 22px; } .auth-alt { text-align: center; margin: 18px 0 0; color: var(--muted); } /* Bookings list */ .booking-list { display: flex; flex-direction: column; gap: 14px; } .booking-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); } .booking-row.is-cancelled { opacity: 0.6; } .booking-thumb { width: 110px; height: 80px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--img-placeholder); } .booking-meta h3 { margin: 0 0 2px; font-size: 1.05rem; } .booking-meta p { margin: 2px 0; } .booking-side { text-align: right; } .booking-side .price { margin: 6px 0; } /* Status pills */ .status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: capitalize; background: var(--fill-3); color: var(--muted); } .status-confirmed { background: var(--ok-soft); color: var(--ok-soft-fg); } .status-cancelled { background: var(--bad-soft); color: var(--bad-soft-fg); } /* Empty / error */ .empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 40px; text-align: center; color: var(--muted); } .error-page { text-align: center; padding: 80px 0; } .error-page h1 { font-size: 4rem; margin: 0; color: var(--primary); } /* Admin */ .admin-head { margin-bottom: 24px; } .admin-head h1 { margin: 0 0 14px; } .admin-tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--border); } .admin-tabs a { padding: 10px 16px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; } .admin-tabs a:hover { color: var(--text); text-decoration: none; } .admin-tabs a.active { color: var(--primary); border-bottom-color: var(--primary); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 32px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .stat-num { display: block; font-size: 1.8rem; font-weight: 800; } .stat-label { color: var(--muted); font-size: 0.9rem; } .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .toolbar-actions { display: flex; align-items: center; gap: 10px; } .table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.92rem; vertical-align: middle; } .table th { background: var(--fill-1); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } .table tr:last-child td { border-bottom: none; } .row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .inline-form { display: inline; margin: 0; } .detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .form-card { max-width: 620px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } /* Field help popovers ("?" next to a label) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .help { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; } .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--fill-2); color: var(--muted); font-size: 0.72rem; font-weight: 700; line-height: 1; cursor: pointer; /* Labels are bold; the marker shouldn't inherit that weight or size. */ font-family: inherit; } .help-btn:hover { background: var(--fill-hover); color: var(--text); } .help-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .help.is-open .help-btn { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .help-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: max-content; max-width: min(320px, calc(100vw - 32px)); display: block; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); /* Labels set bold + tight sizing; help text must read as normal prose. */ font-weight: 400; font-size: 0.85rem; line-height: 1.5; color: var(--text); text-transform: none; letter-spacing: normal; white-space: normal; } .help-panel[hidden] { display: none; } .help-title { display: block; font-weight: 700; margin-bottom: 4px; } .help-body { display: block; color: var(--muted); } .help-list { display: block; margin-top: 8px; } .help-item { display: block; color: var(--muted); margin-top: 4px; } .help-item strong { color: var(--text); } /* A "?" rendered inline in prose, to point at the real buttons */ .help-inline { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--fill-2); font-size: 0.72rem; font-weight: 700; vertical-align: middle; } /* Documentation pages */ .docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; } .docs-nav { position: sticky; top: 24px; display: grid; gap: 2px; } .docs-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 0.9rem; font-weight: 600; } .docs-nav a:hover { background: var(--fill-2); color: var(--text); text-decoration: none; } .docs-guide { margin-bottom: 40px; scroll-margin-top: 24px; } .docs-guide > h2 { margin: 0 0 4px; font-size: 1.35rem; } .docs-intro { margin: 0 0 20px; color: var(--muted); } .docs-section { margin-bottom: 22px; } .docs-section h3 { margin: 0 0 8px; font-size: 1rem; } .docs-section p { margin: 0 0 10px; line-height: 1.65; } .docs-fields { display: grid; gap: 0; } .docs-field { padding: 14px 0; border-top: 1px solid var(--border); } .docs-field:first-child { border-top: 0; } .docs-field dt { font-weight: 700; margin-bottom: 4px; } .docs-field dd { margin: 0; color: var(--muted); line-height: 1.6; } .docs-field .help-item { margin-top: 6px; } @media (max-width: 820px) { .docs-layout { grid-template-columns: 1fr; gap: 20px; } .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; } .docs-nav a { background: var(--fill-2); } } /* Footer */ .footer { border-top: 1px solid var(--border); background: var(--surface); } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 24px; display: flex; justify-content: space-between; color: var(--muted); font-size: 0.9rem; } /* Expense-tracker specific */ .right { text-align: right; } .stat-warn { border-color: var(--warn-panel-border); background: var(--warn-panel-bg); } .stat-warn .stat-num { color: var(--warn); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .quick-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .detail-header h1 { margin: 0 0 4px; } .note-box { background: var(--note-bg); border: 1px solid var(--note-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; white-space: pre-wrap; } .mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } .mini { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); } .mini span { display: block; font-size: 0.8rem; } .mini strong { font-size: 1.15rem; } .over { color: var(--danger); } .under { color: var(--success); } .chip-list { display: flex; flex-wrap: wrap; gap: 12px; } .chip { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); color: var(--text); min-width: 200px; } .chip:hover { text-decoration: none; box-shadow: var(--shadow-lg); } .chip .status { align-self: flex-start; margin-top: 4px; } .disclosure { margin-top: 18px; } .disclosure summary { cursor: pointer; font-weight: 600; color: var(--primary); padding: 8px 0; } .file-list { list-style: none; padding: 0; margin: 0 0 14px; } .file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .upload-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .upload-form input[type="file"] { width: auto; margin: 0; } .txn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .txn-main { display: flex; align-items: center; gap: 20px; } .txn-amount { font-size: 1.8rem; font-weight: 800; color: var(--text); } .txn-main p { margin: 4px 0 0; } .matched-banner { margin-top: 16px; padding: 12px 16px; background: var(--ok-soft); color: var(--ok-soft-fg); border-radius: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tag { display: inline-block; background: var(--accent-soft); color: var(--accent-soft-fg); border-radius: 999px; padding: 2px 9px; font-size: 0.74rem; font-weight: 600; margin: 1px 2px; } .inline-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; } .inline-label input { width: auto; margin: 0; } .filters { align-items: center; } .status-partial { background: var(--warn-soft); color: var(--warn-soft-fg); } .alloc-summary { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; } .pill-warn { background: var(--warn-soft); color: var(--warn-soft-fg); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 0.82rem; } .pill-ok { background: var(--ok-soft); color: var(--ok-soft-fg); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 0.82rem; } .allocate-form { display: flex; gap: 6px; align-items: center; } .allocate-form input { width: 96px; margin: 0; padding: 7px 9px; } .flag-badge { display: inline-block; background: var(--warn-soft); color: var(--warn-soft-fg); border-radius: 6px; padding: 1px 6px; font-size: 0.72rem; font-weight: 700; margin-left: 6px; white-space: nowrap; } /* Nav pending-requests badge */ .nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 18px; } /* Charge Finder (accounting reverse-lookup) */ .finder-form { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 18px; } .finder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .finder-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--muted); } .finder-grid input, .finder-grid select { font-weight: 400; } .finder-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .finder-hint { font-size: 0.8rem; } .finder-count { margin: 4px 0 12px; color: var(--muted); } .finder-table td { vertical-align: top; } .match-chip { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--fill-3); color: var(--muted); } .match-chip.chip-strong { background: var(--ok-soft); color: var(--ok-soft-fg); } .match-chip.chip-ok { background: var(--accent-soft); color: var(--primary-dark); } .match-chip.chip-soft { background: var(--warn-soft); color: var(--warn-soft-fg); } .amt-exact { color: var(--ok-soft-fg); font-weight: 700; } .amt-near { color: var(--primary-dark); font-weight: 600; } .amt-far { color: var(--warn-soft-fg); } .tag-ok { background: var(--ok-soft); color: var(--ok-soft-fg); } @media (max-width: 820px) { .finder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .nav-badge-alert { background: #dc2626; color: #fff; } /* Dedicated "Access requests" notification item in the sidebar */ .side-links a.side-notify.has-alert { color: #dc2626; font-weight: 600; background: rgba(220, 38, 38, 0.08); } .side-links a.side-notify.has-alert:hover { background: rgba(220, 38, 38, 0.14); color: #dc2626; } .side-notify-zero { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--fill-3); color: var(--muted); font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 18px; } /* Travel request status badges */ .req-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: capitalize; background: var(--fill-3); color: var(--muted); } .req-pending { background: var(--warn-soft); color: var(--warn-soft-fg); } .req-approved { background: var(--ok-soft); color: var(--ok-soft-fg); } .req-rejected { background: var(--bad-soft); color: var(--bad-soft-fg); } .req-cancelled { background: var(--neutral-soft); color: var(--neutral-soft-fg); } .req-finalized { background: var(--accent-soft); color: var(--accent-soft-fg); } .req-mark { color: var(--danger); } .req-id { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--accent); white-space: nowrap; } /* Derived queue-status tags (shared by the queue, the table, and detail pages). */ .qs-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; background: var(--fill-3); color: var(--muted); } .qs-progress { background: var(--warn-soft); color: var(--warn-soft-fg); } .qs-ready { background: var(--info-soft); color: var(--info-soft-fg); } .qs-completed { background: var(--ok-soft); color: var(--ok-soft-fg); } .qs-rejected { background: var(--bad-soft); color: var(--bad-soft-fg); } .qs-cancelled { background: var(--neutral-soft); color: var(--neutral-soft-fg); } .qs-declined { background: var(--bad-soft); color: var(--bad-soft-fg); } /* ---- Submission queue: Jotform-style master/detail ---- */ .queue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .queue-toolbar h1 { margin: 0; } .queue-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .queue-chips-alt { margin-left: auto; } .queue-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .queue-chip:hover { background: var(--fill-2); text-decoration: none; } .queue-chip.is-active { border-color: transparent; background: var(--accent-soft); color: var(--accent-soft-fg); } .queue-chip .queue-chip-n { font-size: 0.74rem; background: var(--fill-3); color: var(--muted); border-radius: 999px; padding: 0 7px; font-weight: 700; } .queue-chip.is-active .queue-chip-n { background: rgba(255,255,255,0.35); color: inherit; } .queue-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } .queue-list { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; max-height: calc(100vh - 220px); overflow-y: auto; } .queue-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); } .queue-item:last-child { border-bottom: none; } .queue-item:hover { background: var(--fill-2); text-decoration: none; } .queue-item.is-active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-soft-fg); } .queue-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .queue-item-name { font-weight: 700; font-size: 0.95rem; } .queue-item-time { font-size: 0.74rem; color: var(--muted); white-space: nowrap; } .queue-item-sub { font-size: 0.82rem; color: var(--muted); margin: 2px 0 8px; } .queue-empty { padding: 24px; text-align: center; color: var(--muted); } .queue-detail { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 20px; min-height: 320px; } .queue-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .queue-detail-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .queue-detail .placeholder { color: var(--muted); text-align: center; padding: 60px 20px; } .queue-subline { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; } /* Hotel option links: kept deliberately tiny but still legible/clickable. */ .hotel-link { font-size: 0.68rem; line-height: 1.35; word-break: break-all; opacity: 0.95; } @media (max-width: 860px) { .queue-wrap { grid-template-columns: 1fr; } .queue-list { max-height: none; } } /* ---- Travel Requests cockpit: search, completeness, bookings, finalize ---- */ .req-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .req-search input[type="search"] { min-width: 240px; margin: 0; } /* Compact booking-progress badge (list + detail) */ .cbadge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; } .cbadge-done { background: var(--ok-soft); color: var(--ok-soft-fg); } .cbadge-partial { background: var(--warn-soft); color: var(--warn-soft-fg); } .cbadge-missing { background: var(--bad-soft); color: var(--bad-soft-fg); } .cbadge-none { background: var(--fill-3); color: var(--muted); } .cdots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; } .cdot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.7rem; font-weight: 700; } .cdot-complete { background: var(--ok-soft); color: var(--ok-soft-fg); } .cdot-attention { background: var(--warn-soft); color: var(--warn-soft-fg); } .cdot-partial { background: var(--warn-soft); color: var(--warn-soft-fg); } .cdot-missing { background: var(--bad-soft); color: var(--bad-soft-fg); } /* Inline booking cockpit on the request detail */ .cockpit-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .cockpit-head h3 { margin: 0; } .booking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .booking-card { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); padding: 12px; background: var(--surface); } .booking-card.bc-complete { border-left-color: var(--success); } .booking-card.bc-attention { border-left-color: var(--warn); } .booking-card.bc-partial { border-left-color: var(--warn); } .booking-card.bc-missing { border-left-color: var(--danger); } .bc-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .bc-title { font-weight: 700; } .bc-state { font-size: 0.78rem; color: var(--muted); } .detail-list.compact dt { margin-top: 4px; } .detail-list.compact dd { margin: 0 0 2px; } .cockpit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } /* Finalize confirm modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .modal-overlay.open { display: flex; } .modal { background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; } .modal h3 { margin-top: 0; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } .finalize-summary { margin: 12px 0; } .fs-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.9rem; } .fs-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 700; font-size: 0.75rem; flex: 0 0 auto; } .fs-complete .fs-icon { background: var(--ok-soft); color: var(--ok-soft-fg); } .fs-attention .fs-icon { background: var(--warn-soft); color: var(--warn-soft-fg); } .fs-partial .fs-icon, .fs-missing .fs-icon { background: var(--bad-soft); color: var(--bad-soft-fg); } .finalize-warn { background: var(--warn-panel-bg); border: 1px solid var(--warn-panel-border); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; } .finalize-warn ul { margin: 6px 0 0; padding-left: 18px; } .finalize-ok { color: var(--ok-soft-fg); font-weight: 600; } .archived-panel { border-left: 3px solid var(--accent-soft-fg); } /* Hotel credit-card authorization */ .ccauth { margin: 12px 0; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--fill-2); } .ccauth-body { margin-top: 10px; } .ccauth-show { align-self: end; } .ccauth-panel { border-left: 3px solid var(--warn); } .ccauth-panel h2, .ccauth-panel h3 { margin-top: 0; } /* Manager sign-off, shown alongside the request status badge */ .mgr-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--fill-3); color: var(--muted); white-space: nowrap; } .mgr-pending { background: var(--violet-soft); color: var(--violet-soft-fg); } .mgr-approved { background: var(--ok-soft); color: var(--ok-soft-fg); } .mgr-declined { background: var(--bad-soft); color: var(--bad-soft-fg); } .mgr-not_required { background: var(--fill-3); color: var(--muted); } .detail-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Sign-off summary on the coordinator's request page, tinted by outcome */ .mgr-panel { margin: 0 0 1rem; border-left: 4px solid var(--border); } .mgr-panel-pending { border-left-color: var(--violet-soft-fg); } .mgr-panel-approved { border-left-color: var(--success); } .mgr-panel-declined { border-left-color: var(--danger); } .override-form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); } /* Manager approval inbox */ .approval-list { display: grid; gap: 14px; margin-bottom: 28px; } .approval-card h3 { margin: 0 0 4px; } .approval-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .approval-head .muted { font-size: 0.82rem; white-space: nowrap; } .approval-needs { margin: 10px 0 14px; font-size: 0.9rem; color: var(--muted); } .approval-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); } .approval-foot .muted { font-size: 0.84rem; } .section-heading { margin: 28px 0 14px; font-size: 1.1rem; } .req-star { color: var(--danger); } /* Charge source badges */ .src-badge { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; background: var(--fill-3); color: var(--muted); white-space: nowrap; } .src-amex { background: var(--indigo-soft); color: var(--indigo-soft-fg); } .src-rep_card { background: var(--warn-soft); color: var(--warn-soft-fg); } .src-personal { background: var(--pink-soft); color: var(--pink-soft-fg); } .src-other { background: var(--neutral-soft); color: var(--neutral-soft-fg); } /* Tabs (request queue) */ .tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; } .tab { padding: 10px 16px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--text); text-decoration: none; } .tab-active { color: var(--primary); border-bottom-color: var(--primary); } .tab-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--fill-3); color: var(--muted); font-size: 0.72rem; font-weight: 700; text-align: center; } .tab-active .tab-count { background: var(--primary); color: var(--on-primary); } /* Second-level filter under the main status tabs */ .tabs-sub { border-bottom: 0; margin-top: -12px; gap: 6px; } .tabs-sub .tab { padding: 6px 12px; font-size: 0.85rem; border-bottom: 0; border-radius: 999px; } .tabs-sub .tab-active { background: var(--accent-soft); color: var(--accent-soft-fg); } /* Neutral detail panel (info cards on request/portal pages) */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; } .panel h3 { margin: 0 0 12px; font-size: 1.05rem; } /* Definition list for detail cards */ .detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; } .detail-list dt { color: var(--muted); font-size: 0.85rem; } .detail-list dd { margin: 0; font-weight: 600; } /* Checkbox fieldsets (request needs, insurance) */ .checks { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; } .checks legend { font-weight: 600; font-size: 0.85rem; color: var(--muted); padding: 0 6px; } .checks .check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 6px 0; } .checks .check input { width: auto; margin: 0; } .checks p { margin: 6px 0 0; } @media (max-width: 960px) { .two-col { grid-template-columns: 1fr; } .mini-stats { grid-template-columns: 1fr 1fr; } /* The rail slides in over the page instead of taking a column */ body.has-sidebar { display: block; } .mobile-bar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 55; height: 60px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--border); } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100%; width: 268px; flex-basis: auto; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); } .nav-toggle:checked ~ .sidebar { transform: none; } .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 56; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .nav-toggle:checked ~ .sidebar-scrim { opacity: 1; pointer-events: auto; } .app-main { min-height: 0; } .container { padding: 24px 18px 56px; } } @media (max-width: 620px) { .stats { grid-template-columns: 1fr 1fr; } .mini-stats { grid-template-columns: 1fr 1fr; } .toolbar { flex-wrap: wrap; gap: 12px; } .filters { flex-direction: column; align-items: stretch; } .filters input, .filters select, .filters .btn { width: 100%; } .detail-header { flex-direction: column; } .table { display: block; overflow-x: auto; white-space: nowrap; } .footer-inner { flex-direction: column; gap: 4px; } } /* ---- Travel request wizard ---- */ .wizard-progress { list-style: none; display: flex; gap: 6px; margin: 20px 0 24px; padding: 0; counter-reset: step; flex-wrap: wrap; } .wizard-progress li { flex: 1 1 auto; min-width: 90px; position: relative; padding: 8px 4px 8px 30px; font-size: 0.8rem; font-weight: 600; color: var(--muted); border-bottom: 3px solid var(--border); } .wizard-progress li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--fill-3); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; } .wizard-progress li.is-active { color: var(--primary-dark); border-bottom-color: var(--primary); } .wizard-progress li.is-active::before { background: var(--primary); color: var(--on-primary); } .wizard-step h2 { margin: 0 0 6px; font-size: 1.15rem; } .wizard-step h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--muted); } .conditional { border-left: 3px solid var(--border); padding-left: 16px; margin: 6px 0 4px; } .other-field { display: none; } .form-section { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .form-section:first-of-type { margin-top: 0; } .autofill { background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; } .autofill textarea { width: 100%; } .quick-add { display: flex; flex-wrap: wrap; gap: 8px; } .wizard-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; } .wizard-spacer { flex: 1; } .auth-card.center { text-align: center; } .auth-card.center .btn { margin-top: 18px; } .thanks-check { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; background: var(--ok-wash); color: var(--success); font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .warn-note { font-size: 0.8rem; color: var(--warn-soft-fg); } .ok-note { font-size: 0.8rem; color: var(--ok-soft-fg); } .approver-note { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; font-size: 0.88rem; } /* Multi-section "Add bookings" form */ .bk-section { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; background: var(--surface); } .bk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bg); } .bk-title { font-weight: 700; } .bk-section.is-off { opacity: 0.72; } .bk-section.is-off .bk-head { background: transparent; } .bk-body { padding: 14px 16px; } /* Toggle switch */ .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--track); transition: background 0.15s ease; flex: 0 0 auto; } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease; } .switch input:checked + .switch-track { background: var(--primary); } .switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); } .switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; } .switch-label { font-size: 0.85rem; color: var(--muted); font-weight: 600; } /* Collapsible create/edit panels (travel groups) */ .disclosure { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 14px 0; overflow: hidden; box-shadow: var(--shadow); } .disclosure > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary:hover { background: var(--fill-2); } .disclosure[open] > summary { border-bottom: 1px solid var(--border); } .disclosure .form-card { margin: 14px; box-shadow: none; } /* Quick client-side filter box above a table */ .filter-input { width: 100%; max-width: 360px; margin: 4px 0 14px; } /* Coordinate view: destination clusters and their bulk-bundle bar */ .cluster { margin-bottom: 18px; } .cluster-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .cluster-head h3 { margin: 0 0 4px; } .cluster-count { font-size: 0.78rem; font-weight: 600; color: var(--muted); background: var(--fill-2); border-radius: 999px; padding: 2px 10px; margin-left: 6px; vertical-align: middle; } .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .bulk-bar .bulk-group, .bulk-bar .bulk-name { margin: 0; max-width: 240px; } /* Bulk-approve bar shown at the head of a group's member list */ .bulk-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 12px; background: var(--fill-2); border-radius: var(--radius); } .bulk-inline .btn { margin: 0; } /* Stackable bookings filters */ .filters-stack { display: block; } .filters-stack .filters-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .filters-stack .filters-row input[name="q"] { flex: 1; min-width: 220px; } .filters-stack .filters-row select { min-width: 220px; } .filters-more { margin: 12px 0 0; } .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; padding: 14px; } .filters-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--muted); } .filters-actions { display: flex; gap: 8px; padding: 0 14px 14px; } /* Active-filter chips under the bookings filter bar */ .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .filter-chips .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text); background: var(--fill-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; text-decoration: none; } .filter-chips .chip:hover { background: var(--fill-3, var(--fill-2)); border-color: var(--muted); } .filter-chips .chip-x { color: var(--muted); font-weight: 700; } .filter-chips .chip-clear { color: var(--muted); background: transparent; border-style: dashed; } .result-count { margin: 6px 0 10px; } /* AI intake review: one card per extracted traveler */ .intake-person { border-left: 3px solid var(--accent, var(--border)); } .intake-person-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .intake-person-head .chip { font-size: 0.72rem; padding: 2px 10px; background: var(--fill-2); border: 1px solid var(--border); border-radius: 999px; } .intake-need { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px; background: var(--fill-2); border-radius: var(--radius); } .intake-need > .check { margin: 0; white-space: nowrap; min-width: 120px; } .intake-need .intake-need-fields { flex: 1; margin: 0; min-width: 200px; } .intake-need .row.intake-need-fields { display: flex; gap: 10px; }