/* * timetable.css * ───────────────────────────────────────────────────────────────────────────── * Styles for the Coach Timetable Modal (Park & Ride booking). * * Load in your layout : * * ───────────────────────────────────────────────────────────────────────────── */ /* ── Design tokens ─────────────────────────────────────────────────────────── */ :root { --tm-brand: #1A4F8A; --tm-brand-dark: #0f3160; --tm-brand-light: #E8F0FA; --tm-surface: #FFFFFF; --tm-surface-2: #F7F9FC; --tm-border: #D4DCE8; --tm-text: #1C2B3A; --tm-text-muted: #6B7E93; --tm-success: #16A34A; --tm-radius-lg: 16px; --tm-radius-md: 10px; --tm-radius-sm: 6px; --tm-shadow: 0 24px 64px rgba(26,79,138,.18), 0 4px 16px rgba(0,0,0,.08); } /* ── Modal shell ────────────────────────────────────────────────────────────── */ #timetableModal .modal-dialog { max-width: 640px; } #timetableModal .modal-content { border: none; border-radius: var(--tm-radius-lg); box-shadow: var(--tm-shadow); overflow: hidden; } #timetableModal .modal-body { padding: 0; } /* ── Header ─────────────────────────────────────────────────────────────────── */ .tm-header { background: var(--tm-brand); color: #fff; padding: 1.4rem 1.6rem 1.2rem; position: relative; } .tm-header .modal-title { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; margin: 0; } .tm-header .tm-subtitle { font-size: .8rem; opacity: .75; margin-top: .25rem; margin-left: 1.85rem; } .tm-header .btn-close { position: absolute; right: 1.2rem; top: 1.2rem; filter: invert(1) grayscale(1); opacity: .8; } /* ── Day stepper (hidden for single-day) ────────────────────────────────────── */ .tm-stepper { display: flex; align-items: center; padding: .9rem 1.4rem; background: var(--tm-brand-light); border-bottom: 1px solid var(--tm-border); overflow-x: auto; scrollbar-width: none; gap: 0; } .tm-stepper::-webkit-scrollbar { display: none; } .tm-day-step { display: flex; flex-direction: column; align-items: center; cursor: pointer; flex: 1; min-width: 72px; position: relative; padding: 0 4px; } .tm-day-step .tm-bubble { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--tm-border); background: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--tm-text-muted); transition: all .2s ease; position: relative; z-index: 1; } .tm-day-step .tm-step-label { font-size: .65rem; color: var(--tm-text-muted); margin-top: .3rem; text-align: center; white-space: nowrap; font-weight: 500; } .tm-day-step .tm-step-time { font-size: .6rem; font-family: 'DM Mono', monospace; color: var(--tm-success); font-weight: 600; margin-top: .1rem; text-align: center; } /* connector line between steps */ .tm-day-step:not(:first-child)::before { content: ''; position: absolute; top: 17px; left: calc(-50% + 17px); right: calc(50% + 17px); height: 2px; background: var(--tm-border); z-index: 0; transition: background .2s; } .tm-day-step.active .tm-bubble { background: var(--tm-brand); border-color: var(--tm-brand); color: #fff; } .tm-day-step.active .tm-step-label { color: var(--tm-brand); font-weight: 700; } .tm-day-step.completed .tm-bubble { background: var(--tm-success); border-color: var(--tm-success); color: #fff; } .tm-day-step.completed:not(:first-child)::before { background: var(--tm-success); } .tm-day-step.active:not(:first-child)::before { background: var(--tm-brand); } /* ── Body ───────────────────────────────────────────────────────────────────── */ .tm-body { padding: 1.4rem 1.5rem; background: var(--tm-surface-2); } .tm-day-heading { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .tm-day-badge { background: var(--tm-brand); color: #fff; border-radius: var(--tm-radius-sm); padding: .2rem .6rem; font-size: .75rem; font-weight: 700; } .tm-day-heading h6 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--tm-text); } /* ── Info banner ────────────────────────────────────────────────────────────── */ .tm-info-banner { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: var(--tm-radius-sm); padding: .6rem .9rem; font-size: .78rem; color: #1D4ED8; display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; } /* ── Time grid ──────────────────────────────────────────────────────────────── */ .tm-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: .55rem; } .tm-slot { background: #fff; border: 2px solid var(--tm-border); border-radius: var(--tm-radius-md); padding: .7rem .5rem; text-align: center; cursor: pointer; transition: all .18s ease; user-select: none; position: relative; } .tm-slot:hover { border-color: var(--tm-brand); background: var(--tm-brand-light); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,79,138,.12); } .tm-slot.selected { border-color: var(--tm-brand); background: var(--tm-brand); color: #fff; box-shadow: 0 4px 14px rgba(26,79,138,.3); } .tm-slot.full { opacity: .45; cursor: not-allowed; background: #f0f0f0; } .tm-slot.full:hover { border-color: var(--tm-border); background: #f0f0f0; transform: none; box-shadow: none; } .tm-slot .ts-time { font-family: 'DM Mono', monospace; font-size: 1rem; font-weight: 600; letter-spacing: .02em; display: block; } .tm-slot .ts-avail { font-size: .65rem; margin-top: .15rem; display: block; opacity: .7; } .tm-slot.selected .ts-avail { opacity: .85; color: rgba(255,255,255,.85); } .tm-slot .ts-check { position: absolute; top: 5px; right: 7px; font-size: .7rem; opacity: 0; transition: opacity .15s; } .tm-slot.selected .ts-check { opacity: 1; } .tm-slot .ts-full-badge { display: none; font-size: .6rem; background: #dc3545; color: #fff; border-radius: 3px; padding: 0 4px; margin-top: .2rem; } .tm-slot.full .ts-full-badge { display: inline-block; } .tm-slot.full .ts-avail { display: none; } /* ── Summary panel (multi-day) ──────────────────────────────────────────────── */ .tm-summary { background: #fff; border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); padding: .9rem 1rem; margin-top: 1rem; } .tm-summary h6 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tm-text-muted); margin-bottom: .6rem; } .tm-summary-row { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0; border-bottom: 1px solid #f0f0f0; font-size: .82rem; } .tm-summary-row:last-child { border: none; } .tm-summary-row .sr-day { color: var(--tm-text-muted); } .tm-summary-row .sr-time { font-family: 'DM Mono', monospace; font-weight: 600; color: var(--tm-brand); } .tm-summary-row .sr-time.unset { color: var(--tm-text-muted); font-family: inherit; font-weight: 400; font-style: italic; font-size: .78rem; } /* ── Footer ─────────────────────────────────────────────────────────────────── */ .tm-footer { padding: 1rem 1.5rem; background: #fff; border-top: 1px solid var(--tm-border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .tm-footer-progress { font-size: .78rem; color: var(--tm-text-muted); } /* ── Mobile ──────────────────────────────────────────────────────────────────── */ @media (max-width: 575px) { #timetableModal .modal-dialog { margin: .5rem; } .tm-body { padding: 1rem; } .tm-time-grid { grid-template-columns: repeat(3, 1fr); } .tm-footer { flex-wrap: wrap; } .tm-footer-progress { width: 100%; text-align: center; order: -1; } } /* ── Fade animation ──────────────────────────────────────────────────────────── */ #timetableModal.fade .modal-dialog { transform: translateY(-16px) scale(.98); } #timetableModal.show .modal-dialog { transform: none; }