/* ============================================================= A4 feature-complete preview — design tokens + utility layer Light + dark themes via [data-theme="dark"] on . Mirrors handoff admin Tailwind palette without the framework. ============================================================= */ :root { --brand: #CA0AFF; --brand-deep: #A308CC; --brand-tint: #fbe5f1; --lime: #C5FF3D; --amber: #FFB347; --emerald: #2c8a4f; --rose: #c33333; --paper: #FBFBFD; --surface: #FFFFFF; --surface-soft: #F5F5F8; --ink: #0E0F12; --ink-soft: #4a4a52; --ink-mute: #7a7a85; --line: #e5e5ec; --line-strong: #c8c8d0; --display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 6px 18px rgba(0,0,0,.08); --shadow-lg: 0 24px 60px rgba(0,0,0,.18); --shadow-glow: 0 0 0 4px rgba(202, 10, 255, 0.18); /* Shooter palette */ --shooter-erin-bg: #F4EAFA; --shooter-erin-fg: #7A2A95; --shooter-erin-dot: #CA0AFF; --shooter-jordan-bg: #E5F2EE; --shooter-jordan-fg: #2F6B62; --shooter-jordan-dot: #3DE5C0; --shooter-casey-bg: #FAEAEE; --shooter-casey-fg: #A14758; --shooter-casey-dot: #FF6B8B; --shooter-unass-bg: #EEEEF1; --shooter-unass-fg: #5A5F66; --shooter-unass-dot: #8C8AAE; /* Status palette */ --status-pending-bg: #FEF6E0; --status-pending-fg: #92660A; --status-confirmed-bg: #E5F2EE; --status-confirmed-fg: #2F6B62; --status-progress-bg: #E0EBFA; --status-progress-fg: #1E4A8A; --status-completed-bg: #EAF6E0; --status-completed-fg: #3F6B19; --status-cancelled-bg: #FAEAEE; --status-cancelled-fg: #A14758; --status-resched-bg: #F4EAFA; --status-resched-fg: #7A2A95; } [data-theme="dark"] { --paper: #06060f; --surface: #0E0E1F; --surface-soft: #14142A; --ink: #fafafa; --ink-soft: #b8b6d6; --ink-mute: #6f6e92; --line: #1f1f3a; --line-strong: #2a2a4a; --brand-tint: rgba(202, 10, 255, 0.18); } /* ============================================================= Reset + base ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; min-height: 100vh; } button { font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } input, textarea, select { font: inherit; color: inherit; } /* ============================================================= Preview banner ============================================================= */ .preview-banner { position: sticky; top: 0; left: 0; right: 0; background: var(--ink); color: var(--lime); padding: 6px 16px; font-size: .76rem; z-index: 1000; font-family: var(--mono); display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); } .preview-banner__title { font-weight: 700; color: var(--brand); } .preview-banner__hint { color: rgba(255,255,255,0.55); } .preview-banner__link { margin-left: auto; color: var(--lime); text-decoration: underline; background: none; border: none; font: inherit; } .boot { padding: 80px; text-align: center; color: var(--ink-mute); font-family: var(--mono); } /* ============================================================= Shell (sidebar + main + bottom-nav on mobile) ============================================================= */ .shell { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 28px); } @media (max-width: 800px) { .shell { grid-template-columns: 1fr; } } .shell__side { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 14px 18px 18px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 28px; align-self: start; height: calc(100vh - 28px); overflow-y: auto; } @media (max-width: 800px) { .shell__side { display: none; } } .shell__logo { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .05em; color: var(--ink); margin-bottom: 18px; padding: 4px; } .shell__logo .accent { color: var(--brand); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); color: var(--ink-soft); font-size: .92rem; font-weight: 500; text-decoration: none; transition: background .12s, color .12s; } .nav-item:hover { background: var(--surface-soft); color: var(--ink); } .nav-item.is-active { background: var(--brand); color: white; } .nav-item.is-active:hover { background: var(--brand); color: white; } .nav-item__icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; } .shell__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--ink-mute); } .shell__foot strong { color: var(--ink); font-weight: 600; display: block; } .shell__foot button.linkish { background: none; border: none; padding: 4px 0; color: var(--ink-soft); text-align: left; font-size: .82rem; } .shell__foot button.linkish:hover { color: var(--brand); } .shell__main { padding: 24px 32px 80px; max-width: 1400px; width: 100%; } @media (max-width: 800px) { .shell__main { padding: 16px 14px 80px; } } /* Mobile bottom nav */ .shell__mob { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 50; padding: 6px 8px env(safe-area-inset-bottom); justify-content: space-around; } @media (max-width: 800px) { .shell__mob { display: flex; } .shell__main { padding-bottom: 80px; } } .shell__mob .nav-item { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: .65rem; } .shell__mob .nav-item.is-active { background: transparent; color: var(--brand); } /* ============================================================= Typography ============================================================= */ h1, h2, h3, h4 { font-family: var(--display); margin: 0; font-weight: 700; line-height: 1.15; } .h1 { font-size: 1.9rem; font-weight: 800; } .h2 { font-size: 1.3rem; } .h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--ink-mute); } .h-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); font-weight: 700; } .muted { color: var(--ink-mute); } .subtle { color: var(--ink-soft); } .code, .mono { font-family: var(--mono); } /* ============================================================= Cards + utilities ============================================================= */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .card--brand { border-color: rgba(202, 10, 255, 0.3); background: rgba(202, 10, 255, 0.05); } .card--warn { border-color: rgba(255, 179, 71, 0.4); background: rgba(255, 179, 71, 0.08); } .card--ghost { background: transparent; } .card-pad-lg { padding: 22px; } .stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; align-items: center; gap: 10px; } .row-baseline { display: flex; align-items: baseline; gap: 8px; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1; } .spacer { flex: 1; } .gap-sm { gap: 6px; } .gap-md { gap: 12px; } .gap-lg { gap: 22px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================= Buttons ============================================================= */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 500; transition: background .12s, border-color .12s, transform .08s; } .btn:hover { background: var(--surface-soft); } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn--primary { background: var(--brand); color: white; border-color: var(--brand); } .btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .btn--danger { background: var(--rose); color: white; border-color: var(--rose); } .btn--ghost { background: transparent; border-color: transparent; } .btn--ghost:hover { background: var(--surface-soft); } .btn--sm { padding: 5px 10px; font-size: .82rem; } .btn--lg { padding: 10px 18px; font-size: 1rem; } /* Input */ .input, textarea.input, select.input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: .94rem; transition: border-color .12s, box-shadow .12s; } .input:focus, textarea.input:focus, select.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-glow); } .input--sm { padding: 6px 10px; font-size: .85rem; } textarea.input { min-height: 80px; resize: vertical; font-family: inherit; } .field { display: flex; flex-direction: column; gap: 4px; } .field label, .field__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); font-weight: 700; } .field__hint { font-size: .78rem; color: var(--ink-mute); } .field__error { font-size: .78rem; color: var(--rose); } /* QuickCreate / appointment-detail duration block */ .qc-duration { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-soft); } .qc-duration__total { display: flex; align-items: baseline; gap: 12px; font-size: 1.05rem; } .qc-duration__total strong { font-size: 1.3rem; font-weight: 700; color: var(--brand); } .qc-duration__ends { font-size: .82rem; color: var(--ink-mute); } .qc-duration__parts { display: flex; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-mute); } .qc-duration__parts strong { color: var(--ink); font-weight: 600; } .qc-duration__parts .sep { opacity: .4; } .qc-duration__extra { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: .85rem; } .qc-duration__extra > span:first-child { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); font-weight: 700; } .qc-duration__extra .input--sm { width: 80px; } /* ============================================================= MapPreview — Map / Satellite toggle + Google Maps iframe ============================================================= */ .map-preview { display: flex; flex-direction: column; gap: 6px; } .map-preview__tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .map-preview__tab { padding: 4px 12px; background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: .76rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .map-preview__tab:hover { background: var(--surface-soft); border-color: var(--line-strong); } .map-preview__tab.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } .map-preview__link { margin-left: auto; font-size: .76rem; color: var(--ink-mute); text-decoration: none; padding: 4px 8px; border-radius: var(--r-sm); } .map-preview__link:hover { color: var(--brand); background: var(--surface-soft); } .map-preview__frame { width: 100%; height: 280px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-soft); } /* ============================================================= AddressAutocomplete — Nominatim-backed suggestion dropdown ============================================================= */ .addr-ac { position: relative; } .addr-ac__input { width: 100%; } .addr-ac__spinner { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: addr-ac-spin .7s linear infinite; pointer-events: none; } @keyframes addr-ac-spin { to { transform: translateY(-50%) rotate(360deg); } } .addr-ac__list { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 50; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); max-height: 280px; overflow-y: auto; } .addr-ac__list li { margin: 0; } .addr-ac__item { display: block; width: 100%; text-align: left; padding: 8px 10px; background: transparent; border: none; border-radius: var(--r-sm); font: inherit; color: var(--ink); cursor: pointer; font-size: .85rem; line-height: 1.3; } .addr-ac__item:hover, .addr-ac__item.is-active { background: var(--brand-tint, var(--surface-soft)); color: var(--brand); } /* ============================================================= Appointment-detail side panel Opens over the right side of the viewport so the calendar stays visible + interactive on the left. Closing the panel preserves every bit of calendar state (date, view, shooter filter, drafts). ============================================================= */ .apt-panel { position: fixed; /* The preview banner is sticky at top:0 with z-index 1000. Start the panel BELOW it so the panel header (status pills + × button) isn't hidden. 28px matches the banner's measured height. */ top: 28px; right: 0; bottom: 0; width: 480px; max-width: 100vw; z-index: 100; background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18), -1px 0 0 var(--line-strong); display: flex; flex-direction: column; overflow: hidden; animation: apt-panel-slide-in .18s cubic-bezier(.22, 1, .36, 1); } @keyframes apt-panel-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .apt-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft); flex-shrink: 0; } .apt-panel__head-meta { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .apt-panel__head-addr { font-weight: 600; font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .apt-panel__close { width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--ink-mute); font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, color .12s, border-color .12s; } .apt-panel__close:hover { background: var(--surface-soft); color: var(--ink); border-color: var(--line-strong); } .apt-panel__body { flex: 1; overflow-y: auto; padding: 16px 20px 96px; } /* The sticky action bar inside the detail body should stick to the panel's bottom edge (not the viewport bottom). */ .apt-panel__body .sticky-action-bar, .apt-panel__body [class*="sticky"] { position: sticky; bottom: 0; } @media (max-width: 720px) { .apt-panel { width: 100vw; border-left: none; } } /* ============================================================= Agenda view — per-shooter columns with day-break headers ============================================================= */ .agenda-scope { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft); flex-wrap: wrap; } .agenda-scope__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); font-weight: 700; margin-right: 4px; } .agenda-scope__btn { padding: 4px 12px; font-size: .8rem; font-weight: 600; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .agenda-scope__btn:hover { background: var(--surface); border-color: var(--line-strong); } .agenda-scope__btn.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } .agenda-grid { flex: 1; min-height: 0; display: grid; gap: 14px; padding: 14px; overflow: auto; grid-template-columns: 1fr; } .agenda-grid--cols-2 { grid-template-columns: repeat(2, minmax(280px, 1fr)); } .agenda-grid--cols-3 { grid-template-columns: repeat(3, minmax(260px, 1fr)); } .agenda-grid--cols-4 { grid-template-columns: repeat(4, minmax(240px, 1fr)); } .agenda-empty { flex: 1; display: flex; align-items: center; justify-content: center; } .agenda-col { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .agenda-col__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-soft); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; } .agenda-col__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--col-dot, #8C8AAE); } .agenda-col__name { flex: 1; font-weight: 700; font-size: .95rem; color: var(--col-fg, var(--ink)); } .agenda-col__count { font-family: var(--mono); font-size: .72rem; color: var(--ink-mute); letter-spacing: .04em; } .agenda-col__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 14px; } .agenda-day { margin-top: 12px; } .agenda-day:first-child { margin-top: 4px; } .agenda-day__head { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px; position: sticky; top: 0; background: var(--surface); z-index: 1; } .agenda-day__dow { font-weight: 700; font-size: .9rem; color: var(--ink); } .agenda-day__date { font-family: var(--mono); font-size: .78rem; color: var(--ink-mute); } .agenda-day__count { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: var(--ink-mute); letter-spacing: .04em; } .agenda-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 6px; cursor: pointer; font: inherit; color: inherit; transition: background .12s, border-color .12s, transform .08s; } .agenda-row:hover { background: var(--surface-soft); border-color: var(--line-strong); transform: translateX(1px); } .agenda-row__time { font-family: var(--mono); font-size: .85rem; font-weight: 600; color: var(--ink); min-width: 70px; display: flex; flex-direction: column; gap: 1px; } .agenda-row__dur { font-weight: 400; font-size: .68rem; color: var(--ink-mute); } .agenda-row__main { flex: 1; min-width: 0; } .agenda-row__title { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda-row__addr { font-size: .78rem; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda-row__meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } @media (max-width: 720px) { .agenda-grid, .agenda-grid--cols-2, .agenda-grid--cols-3, .agenda-grid--cols-4 { grid-template-columns: 1fr; gap: 10px; padding: 10px; } .agenda-scope { padding: 8px 10px; } } /* ============================================================= Pills + chips + status ============================================================= */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-family: var(--mono); font-size: .7rem; font-weight: 500; background: var(--surface-soft); border: 1px solid var(--line); color: var(--ink-soft); } .pill--brand { background: rgba(202, 10, 255, 0.12); color: var(--brand-deep); border-color: rgba(202, 10, 255, 0.3); } .pill--lime { background: rgba(197, 255, 61, 0.15); color: #3F6B19; border-color: rgba(197, 255, 61, 0.4); } .pill--amber { background: rgba(255, 179, 71, 0.15); color: #92660A; border-color: rgba(255, 179, 71, 0.4); } .pill--pnwrf { background: rgba(255, 208, 0, 0.15); color: #856200; border-color: rgba(255, 208, 0, 0.4); } .pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--r-pill); font-family: var(--display); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; } .status-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .status-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); } .status-confirmed { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); } .status-in_progress { background: var(--status-progress-bg); color: var(--status-progress-fg); } .status-completed { background: var(--status-completed-bg); color: var(--status-completed-fg); } .status-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); } .status-rescheduled { background: var(--status-resched-bg); color: var(--status-resched-fg); } /* Chips */ .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-soft); font-size: .82rem; font-family: var(--display); font-weight: 600; } .chip:hover { background: var(--surface-soft); } .chip.is-active { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); } .chip__count { font-family: var(--mono); font-size: .7rem; color: var(--ink-mute); } .chip.is-active .chip__count { color: var(--brand-deep); } .chip__dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); } /* ============================================================= Avatar ============================================================= */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #C9A0DC; color: #fff; font-family: var(--display); font-weight: 700; font-size: .85rem; user-select: none; } .avatar--sm { width: 28px; height: 28px; font-size: .7rem; } .avatar--lg { width: 48px; height: 48px; font-size: 1.05rem; } .avatar--xl { width: 64px; height: 64px; font-size: 1.4rem; } /* ============================================================= KPI ============================================================= */ .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .kpi--brand { border-color: rgba(202, 10, 255, 0.3); background: rgba(202, 10, 255, 0.04); } .kpi--warn { border-color: rgba(255, 179, 71, 0.4); background: rgba(255, 179, 71, 0.07); } .kpi__label { font-size: .65rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); font-weight: 700; font-family: var(--display); } .kpi__value { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; margin-top: 6px; } .kpi__sub { font-size: .78rem; color: var(--ink-mute); margin-top: 4px; } /* ============================================================= Calendar grid ============================================================= */ .calendar-host { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .cal-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); } .cal-views { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .cal-views button { background: var(--surface); border: none; padding: 4px 14px; font-size: .82rem; color: var(--ink-soft); border-right: 1px solid var(--line); } .cal-views button:last-child { border-right: none; } .cal-views button.is-active { background: var(--brand); color: white; } .cal-nav { display: inline-flex; align-items: center; gap: 4px; } .cal-nav button { background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 9px; font-size: .82rem; color: var(--ink-soft); } .cal-nav button:hover { background: var(--surface-soft); } .cal-title { font-family: var(--display); font-weight: 700; font-size: 1.1rem; min-width: 200px; text-align: center; } /* Drill-back button — appears when the user clicked a day inside Week/Month to land on Day view. Restores the previous view. */ .cal-back { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--brand); color: var(--brand); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; } .cal-back:hover { background: var(--brand); color: #fff; } /* Day view (single day with resource columns) */ .cal-day { display: grid; grid-template-columns: 60px 1fr; height: 700px; overflow: auto; } .cal-day__times { background: var(--surface-soft); border-right: 1px solid var(--line); } .cal-day__time-row { height: 60px; font-size: .7rem; color: var(--ink-mute); text-align: right; padding: 2px 6px 0 0; border-bottom: 1px solid var(--line); } .cal-day__cols { display: grid; } .cal-day__col { border-right: 1px solid var(--line); position: relative; background: var(--surface); } .cal-day__col:last-child { border-right: none; } .cal-day__col-head { position: sticky; top: 0; background: var(--surface); padding: 6px 8px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; font-size: .85rem; display: flex; align-items: center; gap: 6px; z-index: 2; } .cal-day__col-head .col-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; } .cal-day__col-grid { position: relative; height: 1320px; /* 22 slots × 60px */ } .cal-day__half { position: absolute; left: 0; right: 0; height: 30px; border-bottom: 1px dashed var(--line); } .cal-day__half.hour-mark { border-bottom-style: solid; } .cal-day__half.drop-hot { background: var(--brand-tint); } /* Week view */ .cal-week { display: grid; grid-template-columns: 60px repeat(7, 1fr); height: 700px; overflow: auto; } .cal-week__col { position: relative; border-right: 1px solid var(--line); background: var(--surface); } .cal-week__col-head { position: sticky; top: 0; background: var(--surface); padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; font-family: var(--display); z-index: 2; } .cal-week__col-head .dow { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); } .cal-week__col-head .dom { font-size: 1.4rem; font-weight: 800; line-height: 1; margin-top: 2px; } .cal-week__col-head.is-today .dom { color: var(--brand); } .cal-week__col-grid { position: relative; height: 1320px; } /* Month view */ .cal-month { padding: 8px; } .cal-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; } .cal-month__cell { background: var(--surface); min-height: 110px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; } .cal-month__cell:hover { background: var(--surface-soft); } .cal-month__cell--other { background: var(--surface-soft); color: var(--ink-mute); } .cal-month__cell--today { background: var(--brand-tint); } .cal-month__cell-head { font-family: var(--display); font-weight: 700; font-size: .9rem; } .cal-month__evt { font-size: .7rem; padding: 1px 6px; border-radius: var(--r-sm); border-left: 3px solid currentColor; background: var(--surface-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-month__dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: 1px; } .cal-month__dow { background: var(--surface-soft); text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); padding: 6px 0; font-weight: 700; } /* Event blocks */ .evt { position: absolute; left: 4px; right: 4px; border-radius: var(--r-sm); padding: 4px 8px; font-size: .78rem; cursor: grab; overflow: hidden; border-left: 3px solid var(--ev-fg, var(--brand)); background: var(--ev-bg, var(--brand-tint)); color: var(--ev-fg, var(--brand-deep)); transition: box-shadow .12s, transform .08s; user-select: none; z-index: 1; touch-action: none; } .evt:hover { box-shadow: var(--shadow-md); } .evt:active { cursor: grabbing; } .evt.is-dragging { opacity: .35; cursor: grabbing; } .evt__resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; background: linear-gradient(180deg, transparent 0%, currentColor 100%); opacity: 0.15; border-radius: 0 0 var(--r-sm) var(--r-sm); } .evt:hover .evt__resize { opacity: 0.35; } .evt__time { font-family: var(--mono); font-size: .68rem; font-weight: 600; } .evt__title { font-weight: 600; line-height: 1.15; } .evt__addr { color: inherit; opacity: .85; font-size: .7rem; } .evt__pills { display: flex; gap: 3px; margin-top: 2px; flex-wrap: wrap; } .evt__pills .pill { font-size: .62rem; padding: 0 6px; } /* ============================================================= Modal ============================================================= */ .modal-bg { position: fixed; inset: 0; background: rgba(14, 15, 18, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 500; } .modal { background: var(--surface); color: var(--ink); border-radius: var(--r-xl); border: 1px solid var(--line); width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); animation: modal-in .18s ease; } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal--md { max-width: 600px; } .modal--lg { max-width: 880px; } .modal__head { padding: 18px 22px 12px; display: flex; align-items: flex-start; gap: 14px; } .modal__head h2 { font-size: 1.1rem; flex: 1; } .modal__head__desc { font-size: .85rem; color: var(--ink-mute); margin-top: 2px; } .modal__close { background: transparent; border: none; font-size: 1.5rem; color: var(--ink-mute); width: 28px; height: 28px; border-radius: 50%; } .modal__close:hover { background: var(--surface-soft); } .modal__body { padding: 4px 22px 18px; overflow-y: auto; flex: 1; } .modal__foot { padding: 12px 22px; border-top: 1px solid var(--line); background: var(--surface-soft); display: flex; gap: 8px; justify-content: flex-end; align-items: center; } /* ============================================================= Toasts ============================================================= */ .toasts { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 600; display: flex; flex-direction: column; gap: 6px; width: min(380px, calc(100% - 32px)); } .toast { background: var(--ink); color: white; border-radius: var(--r-md); padding: 10px 14px; font-size: .85rem; box-shadow: var(--shadow-md); animation: toast-in .18s ease; display: flex; align-items: center; gap: 10px; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .toast--success { background: var(--emerald); } .toast--error { background: var(--rose); } /* ============================================================= Timeline ============================================================= */ .timeline { position: relative; padding-left: 18px; } .timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .timeline__item { position: relative; padding: 6px 0 6px 12px; } .timeline__item::before { content: ""; position: absolute; left: -16px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-mute); box-shadow: 0 0 0 3px var(--surface); } .timeline__item--good::before { background: var(--emerald); } .timeline__item--warn::before { background: var(--amber); } .timeline__hd { font-size: .85rem; display: flex; gap: 6px; align-items: baseline; } .timeline__hd .actor { font-weight: 600; } .timeline__hd .when { color: var(--ink-mute); font-size: .72rem; font-family: var(--mono); } .timeline__body { color: var(--ink-soft); font-size: .82rem; margin-top: 2px; } /* ============================================================= Reschedule modal internals ============================================================= */ .rs-diff { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; display: grid; gap: 8px; } .rs-diff__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: .9rem; } .rs-diff__row--meta { font-size: .82rem; color: var(--ink-mute); } .rs-diff__label { flex: 0 0 60px; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); font-weight: 700; } .rs-diff__from { text-decoration: line-through; color: var(--ink-mute); } .rs-diff__to { font-weight: 600; } .rs-diff__arrow { color: var(--ink-mute); } .rs-diff__delta { margin-left: auto; padding: 2px 8px; border-radius: var(--r-pill); font-size: .7rem; background: var(--brand-tint); color: var(--brand-deep); } .rs-notify { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); } .rs-notify input { margin-top: 3px; } .rs-notify__text { display: flex; flex-direction: column; gap: 2px; flex: 1; } .rs-notify__hint { font-size: .82rem; color: var(--ink-mute); } .rs-notify__audit { font-size: .7rem; color: var(--ink-mute); font-style: italic; } /* ============================================================= Sticky action bar ============================================================= */ .action-bar { position: sticky; bottom: 0; margin: 24px -32px -80px; padding: 14px 32px; background: var(--surface); border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; z-index: 30; } @media (max-width: 800px) { .action-bar { margin: 16px -14px 16px; padding: 12px 14px; } } /* ============================================================= Misc ============================================================= */ .divider { height: 1px; background: var(--line); margin: 14px 0; } .dim { opacity: .35; } /* ============================================================= SIMPLE DISPATCHER (works first, elegant second) ============================================================= */ .disp { width: 100%; height: 100%; background: radial-gradient(ellipse 60% 50% at 25% 0%, rgba(201, 162, 75, 0.08), transparent 60%), linear-gradient(180deg, #0c0a16 0%, #07060e 100%); display: flex; flex-direction: column; font-family: "Inter", sans-serif; color: #F2E8D5; overflow: hidden; } .disp__head { padding: 16px 28px 14px; border-bottom: 1px solid rgba(201, 162, 75, 0.22); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .disp__title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .disp__weekday { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 2.4rem; line-height: 1; color: #F2E8D5; letter-spacing: -0.02em; } .disp__mdash { color: rgba(201, 162, 75, 0.6); font-style: italic; } .disp__date { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.1rem; color: #C9A24B; } .disp__totals { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.78rem; font-weight: 500; color: #B5A992; letter-spacing: 0.04em; text-transform: uppercase; } .disp__totals strong { color: #F2E8D5; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; margin-right: 3px; } .disp__totals .sep { color: rgba(201, 162, 75, 0.4); } .disp__totals .accent strong { color: #C9A24B; } .disp__totals .warn strong { color: #D4A87A; } /* Board: time axis on left, shooter columns across */ .disp__board-wrap { flex: 1; display: flex; gap: 0; padding: 8px 28px 28px; overflow: auto; position: relative; } .disp__time-axis { flex: 0 0 64px; position: relative; /* Hour-tick alignment with the slot grid is done in JS (each tick's inline `top` includes COL_HEAD_HEIGHT). CSS padding-top has no effect on absolutely-positioned children — they anchor to the padding-box edge, which is the inside of the border, before the padding. */ } .disp__tick { position: absolute; right: 10px; font-family: "Cormorant Garamond", serif; font-style: italic; line-height: 1; color: #C9A24B; } .disp__tick-num { font-weight: 600; font-size: 1.4rem; display: block; } .disp__tick-ap { font-size: 0.7rem; color: rgba(201, 162, 75, 0.55); letter-spacing: 0.04em; } .disp__board { flex: 1; display: grid; gap: 10px; min-width: 0; } /* Shooter column */ .disp__col { background: linear-gradient(180deg, rgba(22, 18, 32, 0.55), rgba(10, 8, 18, 0.55)); border: 1px solid rgba(201, 162, 75, 0.18); border-radius: 2px; display: flex; flex-direction: column; min-width: 220px; } .disp__col-head { padding: 10px 14px 8px; border-bottom: 1px solid rgba(201, 162, 75, 0.18); background: linear-gradient(180deg, rgba(201, 162, 75, 0.06), transparent); height: 62px; box-sizing: border-box; } .disp__col-name-row { display: flex; align-items: baseline; gap: 8px; } .disp__col-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col-dot); box-shadow: 0 0 8px var(--col-dot); flex-shrink: 0; align-self: center; } .disp__col-name { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.25rem; color: #F2E8D5; letter-spacing: -0.015em; } .disp__col-stats { margin-top: 4px; font-size: 0.7rem; font-weight: 500; color: #B5A992; letter-spacing: 0.02em; display: flex; gap: 6px; flex-wrap: wrap; } .disp__col-stats strong { color: #F2E8D5; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 0.85rem; font-weight: 600; margin-right: 2px; } .disp__col-stats .drive strong { color: #C9A24B; } .disp__col-stats .warn { color: #D4A87A; font-weight: 600; } .disp__col-stats .sep { color: rgba(201, 162, 75, 0.35); } .disp__col-body { position: relative; /* IMPORTANT: do NOT use flex:1 here — the inline `height: 1320px` set by calendar-3d.js is the canonical timeline height. flex-grow/shrink would override it, collapsing the column and pushing every card off its real time slot. flex-shrink:0 pins us at the explicit height. */ flex: 0 0 auto; } /* Slots — backdrop grid; pointer-events:auto so elementFromPoint finds them */ .disp__slot { position: absolute; left: 0; right: 0; border-bottom: 1px solid rgba(201, 162, 75, 0.04); /* IMPORTANT: pointer-events must stay default so drag can detect target */ } .disp__slot.is-hour { border-bottom-color: rgba(201, 162, 75, 0.16); } .disp__slot.is-drop { background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.18), transparent); outline: 1px dashed #C9A24B; outline-offset: -2px; } /* Drive connector — HTML divs, no SVG */ .disp__band { position: absolute; left: 6px; right: 6px; pointer-events: none; z-index: 4; /* sit above cards (z=5 trims to the band's column only) */ display: flex; align-items: center; justify-content: center; } .disp__band-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-1.5px); background: var(--rail-c); opacity: 0.85; border-radius: 2px; box-shadow: 0 0 8px var(--rail-c); } .disp__band--ok { --rail-c: #7AC1A2; } .disp__band--tight { --rail-c: #D4A87A; } .disp__band--impossible { --rail-c: #C97A6F; } .disp__band--impossible .disp__band-rail { background: repeating-linear-gradient(180deg, #C97A6F 0 6px, transparent 6px 12px); opacity: 1; box-shadow: 0 0 10px rgba(201, 122, 111, 0.6); } .disp__band-chip { position: relative; background: rgba(8, 6, 16, 0.98); border: 1px solid var(--rail-c); border-radius: 4px; padding: 4px 12px; display: inline-flex; align-items: baseline; gap: 8px; font-family: "Cormorant Garamond", serif; font-size: 0.82rem; color: #F2E8D5; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(8, 6, 16, 0.4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .disp__band-mins { font-style: italic; font-weight: 600; color: var(--rail-c); font-size: 1.05rem; } .disp__band-mins small { font-style: italic; font-weight: 400; color: rgba(181, 169, 146, 0.7); font-size: 0.65rem; margin-left: 2px; } .disp__band-sep { color: rgba(201, 162, 75, 0.35); } .disp__band-mi { font-style: italic; color: #B5A992; } .disp__band-slack { font-style: italic; font-weight: 600; color: var(--rail-c); } .disp__band-slack.is-over { font-family: "JetBrains Mono", monospace; font-style: normal; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; } .disp__band-rush { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; color: #C97A6F; text-transform: uppercase; margin-left: 4px; } /* Cards */ .disp__card { position: absolute; left: 8px; right: 8px; background: linear-gradient(180deg, rgba(28, 22, 40, 0.96), rgba(14, 10, 22, 0.96)); border-left: 3px solid var(--card-fg); border-top: 1px solid rgba(201, 162, 75, 0.35); border-right: 1px solid rgba(201, 162, 75, 0.15); border-bottom: 1px solid rgba(201, 162, 75, 0.15); padding: 8px 12px 10px; cursor: grab; user-select: none; z-index: 5; display: flex; flex-direction: column; gap: 2px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); transition: top .25s cubic-bezier(.22, 1, .36, 1), transform .15s ease, box-shadow .15s ease, opacity .15s; } .disp__card:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 16px rgba(201, 162, 75, 0.18); z-index: 6; } .disp__card:active { cursor: grabbing; } .disp__card.is-dragging { opacity: 0.18; pointer-events: none; } /* During a drag, ALL cards become hit-through so elementFromPoint sees the slot grid underneath even in foreign columns. */ body.disp-dragging .disp__card { pointer-events: none; } body.disp-dragging .disp__band { pointer-events: none; } .disp__card--ghost { cursor: grabbing; opacity: 0.94 !important; transform: rotate(0.5deg) scale(1.02); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(201, 162, 75, 0.28); } .disp__card-time { display: flex; align-items: baseline; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; color: #C9A24B; letter-spacing: 0.04em; } .disp__card-time .t { font-weight: 600; } .disp__card-time .d { color: rgba(181, 169, 146, 0.75); font-weight: 500; } .disp__card-city { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.45rem; line-height: 1.05; color: #F2E8D5; letter-spacing: -0.02em; margin-top: 2px; } .disp__card-street { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 0.78rem; color: rgba(181, 169, 146, 0.85); } .disp__card-client { font-weight: 500; font-size: 0.82rem; color: #F2E8D5; margin-top: 6px; } .disp__card-pkg { font-size: 0.68rem; font-weight: 500; color: #B5A992; letter-spacing: 0.1em; text-transform: uppercase; } .disp__card-pkg em { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.78rem; color: rgba(181, 169, 146, 0.85); } .disp__card-prefs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 0.76rem; } .disp__pref { display: inline-flex; align-items: center; gap: 3px; } .disp__pref--ok { color: #7AC1A2; } .disp__pref--warn { color: #D4A87A; } .disp__pref--req { color: #C97A6F; font-weight: 600; } /* Drop pill follows cursor during drag */ .disp__drop-pill { position: fixed; pointer-events: none; background: linear-gradient(180deg, rgba(22, 18, 32, 0.97), rgba(8, 6, 14, 0.97)); border: 1px solid #C9A24B; padding: 10px 18px; z-index: 3000; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(201, 162, 75, 0.32); min-width: 160px; } .disp__drop-pill-shooter { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 0.88rem; color: #C9A24B; letter-spacing: 0.04em; } .disp__drop-pill-time { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.45rem; color: #F2E8D5; margin-top: 2px; } /* ============================================================= WEEK ============================================================= */ .disp__week { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 8px 28px 28px; overflow: hidden; min-height: 0; } .disp__week-day { background: rgba(20, 16, 32, 0.5); border: 1px solid rgba(201, 162, 75, 0.16); padding: 12px 12px 14px; display: flex; flex-direction: column; min-height: 0; } .disp__week-day.is-today { border-color: #C9A24B; box-shadow: 0 0 16px rgba(201, 162, 75, 0.18); } .disp__week-day-head { margin-bottom: 8px; } .disp__week-day-head .dow { display: block; font-family: "Cormorant Garamond", serif; font-style: italic; color: #C9A24B; font-size: 0.82rem; } .disp__week-day-head .dom { display: block; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 2.5rem; line-height: 1; color: #F2E8D5; letter-spacing: -0.03em; } .disp__week-day.is-today .disp__week-day-head .dom { color: #C9A24B; } .disp__week-empty { font-family: "Cormorant Garamond", serif; font-style: italic; color: rgba(181, 169, 146, 0.5); text-align: center; padding: 20px 0; } .disp__week-list { display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; } .disp__week-item { background: rgba(20, 16, 32, 0.6); border: none; border-left: 2px solid var(--col-fg); padding: 6px 10px; text-align: left; cursor: pointer; font: inherit; color: inherit; } .disp__week-item:hover { background: rgba(30, 24, 44, 0.85); } .disp__week-item .t { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; color: #C9A24B; letter-spacing: 0.04em; } .disp__week-item .c { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1rem; color: #F2E8D5; margin-top: 1px; } .disp__week-item .m { font-size: 0.7rem; color: #B5A992; margin-top: 2px; } /* ============================================================= MONTH ============================================================= */ .disp__month { flex: 1; display: flex; flex-direction: column; padding: 8px 28px 28px; min-height: 0; } .disp__month-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; } .disp__month-dow > div { text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic; color: #C9A24B; font-size: 0.78rem; padding: 4px 0; } .disp__month-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; min-height: 0; } .disp__month-cell { background: rgba(14, 10, 22, 0.65); border: 1px solid rgba(201, 162, 75, 0.14); padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-height: 64px; } .disp__month-cell.is-other { opacity: 0.4; } .disp__month-cell.is-today { border-color: #C9A24B; box-shadow: inset 0 0 12px rgba(201, 162, 75, 0.18); } .disp__month-day { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 1.1rem; color: #F2E8D5; } .disp__month-cell.is-today .disp__month-day { color: #C9A24B; } .disp__month-day--btn { display: inline-block; background: transparent; border: none; padding: 0 4px; margin: -2px -4px; cursor: pointer; border-radius: 3px; transition: background .12s, color .12s; } .disp__month-day--btn:hover { background: rgba(201, 162, 75, 0.12); color: #C9A24B; } .disp__month-evt { background: rgba(22, 16, 32, 0.7); border: none; border-left: 2px solid var(--col-fg); padding: 2px 6px; cursor: pointer; display: flex; gap: 6px; align-items: baseline; text-align: left; font: inherit; color: inherit; } .disp__month-evt:hover { background: rgba(34, 26, 50, 0.9); } .disp__month-evt .t { font-family: "JetBrains Mono", monospace; font-size: 0.6rem; color: #C9A24B; } .disp__month-evt .c { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 0.78rem; color: #F2E8D5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .disp__month-more { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 0.68rem; color: rgba(181, 169, 146, 0.6); } /* ============================================================= YEAR ============================================================= */ .disp__year { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; padding: 12px 28px 28px; min-height: 0; } .disp__year-tile { background: linear-gradient(180deg, rgba(22, 18, 36, 0.7), rgba(10, 8, 18, 0.7)); border: 1px solid rgba(201, 162, 75, 0.18); padding: 16px 22px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, transform .15s; } .disp__year-tile:hover { border-color: #C9A24B; transform: translateY(-2px); } .disp__year-tile.is-current { border-color: #C9A24B; background: linear-gradient(180deg, rgba(40, 28, 14, 0.7), rgba(20, 14, 8, 0.7)); } .disp__year-tile .m { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 1.55rem; line-height: 1; color: #F2E8D5; letter-spacing: -0.02em; } .disp__year-tile.is-current .m { color: #C9A24B; } .disp__year-tile .n { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 2.2rem; line-height: 1; color: #C9A24B; margin-top: 12px; } .disp__year-tile .n small { font-style: italic; font-weight: 400; font-size: 0.72rem; color: rgba(181, 169, 146, 0.7); margin-left: 6px; } /* ============================================================= PANORAMIC EDITORIAL SPREAD (legacy, no longer used) PNWRF gold-on-ink, Cormorant italic display, Zune-style panorama with weekday bleeding off the edge. ============================================================= */ .spread { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Cormorant Garamond", Georgia, serif; color: #F2E8D5; background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(201, 162, 75, 0.10), transparent 70%), radial-gradient(ellipse 70% 60% at 80% 100%, rgba(20, 16, 42, 0.6), transparent 70%), linear-gradient(180deg, #0a0810 0%, #0a0814 50%, #050308 100%); isolation: isolate; } .spread::before { /* Subtle film grain */ content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.64 0 0 0 0 0.30 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.45; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } /* Huge italic weekday word bleeding off the bottom-left */ .spread__bg-word { position: absolute; bottom: -8vh; left: -3vw; font-style: italic; font-weight: 300; font-size: 32vh; line-height: 0.85; color: rgba(242, 232, 213, 0.045); letter-spacing: -0.04em; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; } /* Vignette */ .spread__bg-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 0; } /* Header */ .spread__head { position: relative; z-index: 2; padding: 22px 36px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid rgba(201, 162, 75, 0.22); } .spread__title { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; } .spread__weekday { font-style: italic; font-weight: 500; font-size: 3.6rem; line-height: 1; color: #F2E8D5; letter-spacing: -0.025em; } .spread__sep { color: rgba(201, 162, 75, 0.5); font-style: italic; font-size: 2rem; } .spread__date { font-style: italic; font-weight: 400; font-size: 1.4rem; color: #C9A24B; letter-spacing: -0.01em; } .spread__stats { display: flex; gap: 10px; flex-wrap: wrap; font-family: "Inter", sans-serif; font-size: .78rem; color: #B5A992; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; } .spread__stat strong { color: #F2E8D5; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: -0.01em; margin-right: 4px; } .spread__stat--accent strong { color: #C9A24B; } .spread__stat--warn strong { color: #D4A87A; } .spread__stat-sep { color: rgba(201, 162, 75, 0.4); } /* Board: ruler + cols */ .spread__board { position: relative; z-index: 2; display: flex; flex: 1; min-height: 0; padding: 6px 36px 24px; gap: 14px; overflow: auto; } /* Time ruler (left) */ .spread__ruler { position: relative; flex: 0 0 84px; padding-top: 70px; /* room for col-head */ } .spread__tick { position: absolute; right: 12px; text-align: right; font-style: italic; color: rgba(201, 162, 75, 0.65); line-height: 1; transform: translateY(70px); } .spread__tick-num { font-weight: 500; font-size: 1.45rem; color: #C9A24B; display: block; } .spread__tick-ap { font-weight: 400; font-size: .72rem; color: rgba(201, 162, 75, 0.5); letter-spacing: 0.04em; } /* Shooter columns flex */ .spread__cols { display: flex; gap: 14px; flex: 1; min-width: 0; } .spread__col { flex: 1; min-width: 240px; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(20, 16, 32, 0.45), rgba(10, 8, 18, 0.45)); border: 1px solid rgba(201, 162, 75, 0.18); border-radius: 2px; position: relative; } .spread__col-head { padding: 12px 16px 10px; border-bottom: 1px solid rgba(201, 162, 75, 0.22); background: linear-gradient(180deg, rgba(201, 162, 75, 0.08), transparent); } .spread__col-name { display: flex; align-items: baseline; gap: 8px; } .spread__col-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col-dot); display: inline-block; box-shadow: 0 0 10px var(--col-dot); flex-shrink: 0; align-self: center; } .spread__col-label { font-style: italic; font-weight: 600; font-size: 1.45rem; color: #F2E8D5; letter-spacing: -0.015em; } .spread__col-meta { margin-top: 6px; font-family: "Inter", sans-serif; font-size: .72rem; font-weight: 500; color: #B5A992; letter-spacing: 0.02em; } .spread__col-shoot { color: #C9A24B; } .spread__col-drive { color: #B5A992; } .spread__col-warn { color: #D4A87A; font-weight: 600; } .spread__col-body { position: relative; flex: 1; min-height: 0; } /* Slot grid (background lines) */ .spread__slot { position: absolute; left: 0; right: 0; border-bottom: 1px solid rgba(201, 162, 75, 0.06); pointer-events: none; z-index: 1; } .spread__slot.is-hour { border-bottom-color: rgba(201, 162, 75, 0.18); } .spread__slot.is-drop-target { background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.22), transparent); pointer-events: auto; z-index: 2; } .spread__slot.is-drop-target::after { content: ""; position: absolute; inset: 0; border: 1px solid #C9A24B; border-style: dashed; } /* Cards */ .spread__card { position: absolute; left: 10px; right: 10px; background: linear-gradient(180deg, rgba(28, 22, 40, 0.95) 0%, rgba(14, 10, 22, 0.95) 100%); border-top: 1.5px solid var(--card-fg); border-bottom: 1px solid rgba(201, 162, 75, 0.35); padding: 10px 14px 12px; cursor: grab; user-select: none; transition: top .3s cubic-bezier(.22,1,.36,1), transform .15s ease, box-shadow .2s ease, opacity .15s; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); z-index: 5; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .spread__card-edge { position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--card-fg); opacity: 0.7; } .spread__card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(201, 162, 75, 0.18); z-index: 6; } .spread__card:active { cursor: grabbing; } .spread__card.is-dragging { opacity: 0.2; pointer-events: none; } .spread__card--ghost { cursor: grabbing; opacity: 0.92 !important; transform: rotate(0.6deg) scale(1.02); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 28px rgba(201, 162, 75, 0.28); } .spread__card-time-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .spread__card-time { font-style: italic; font-weight: 600; font-size: 1rem; color: #C9A24B; letter-spacing: -0.005em; } .spread__card-dur { font-style: italic; font-size: .78rem; color: #B5A992; } .spread__card-city { font-style: italic; font-weight: 600; font-size: 1.65rem; color: #F2E8D5; line-height: 1.05; letter-spacing: -0.02em; margin-top: 2px; } .spread__card-street { font-style: italic; font-size: .82rem; color: rgba(181, 169, 146, 0.85); margin-top: 2px; } .spread__card-client { font-family: "Inter", sans-serif; font-weight: 500; font-size: .85rem; color: #F2E8D5; margin-top: 8px; line-height: 1.3; } .spread__card-sep { color: rgba(201, 162, 75, 0.35); } .spread__card-broker { font-style: italic; color: #B5A992; font-family: "Cormorant Garamond", serif; font-size: .9rem; } .spread__card-pkg { font-family: "Inter", sans-serif; font-size: .72rem; font-weight: 500; color: #B5A992; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px; } .spread__card-prefs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: .8rem; } .spread__pref { display: inline-flex; align-items: center; gap: 4px; } .spread__pref--ok { color: #7AC1A2; } .spread__pref--warn { color: #D4A87A; } .spread__pref--req { color: #C97A6F; font-weight: 600; } /* SVG connector */ .spread__connector { position: absolute; inset: 0; width: 100%; pointer-events: none; z-index: 3; overflow: visible; } /* Drive band floating label */ .spread__band-label { position: absolute; left: 50%; transform: translate(-50%, -50%); background: rgba(10, 8, 18, 0.95); padding: 5px 14px; border-top: 1px solid var(--band-c, #C9A24B); border-bottom: 1px solid var(--band-c, #C9A24B); display: inline-flex; align-items: baseline; gap: 8px; font-family: "Cormorant Garamond", serif; font-size: .82rem; white-space: nowrap; z-index: 4; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } .spread__band-mins { font-style: italic; font-weight: 600; font-size: 1.05rem; color: var(--band-c, #C9A24B); } .spread__band-mins small { font-style: italic; font-weight: 400; font-size: .65rem; color: rgba(181, 169, 146, 0.7); margin-left: 2px; } .spread__band-sep { color: rgba(201, 162, 75, 0.4); } .spread__band-mi { font-style: italic; color: #B5A992; } .spread__band-slack { font-style: italic; color: var(--band-c, #C9A24B); font-weight: 600; } .spread__band-slack.is-over { color: #C97A6F; text-transform: uppercase; font-style: normal; font-family: "JetBrains Mono", monospace; font-size: .68rem; letter-spacing: 0.1em; } .spread__band-rush { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: .62rem; font-weight: 700; letter-spacing: 0.14em; color: #C97A6F; text-transform: uppercase; margin-left: 4px; } /* Drag target pill (follows cursor) */ .spread__drag-pill { position: fixed; pointer-events: none; background: linear-gradient(180deg, rgba(22, 18, 32, 0.97), rgba(8, 6, 14, 0.97)); border: 1px solid #C9A24B; padding: 12px 22px; font-family: "Cormorant Garamond", serif; z-index: 2500; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 28px rgba(201, 162, 75, 0.32); min-width: 180px; border-radius: 2px; } .spread__drag-pill-line { line-height: 1.15; } .spread__drag-pill-shooter { font-style: italic; font-weight: 500; font-size: .92rem; color: #C9A24B; letter-spacing: 0.04em; } .spread__drag-pill-time { font-style: italic; font-weight: 600; font-size: 1.55rem; color: #F2E8D5; margin-top: 2px; letter-spacing: -0.01em; } /* ============================================================= WEEK spread ============================================================= */ .spread--week .spread__week-grid { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding: 6px 36px 24px; min-height: 0; } .spread__week-day { background: linear-gradient(180deg, rgba(20, 16, 32, 0.45), rgba(10, 8, 18, 0.45)); border: 1px solid rgba(201, 162, 75, 0.18); padding: 14px 14px 18px; display: flex; flex-direction: column; } .spread__week-day.is-today { border-color: #C9A24B; box-shadow: 0 0 22px rgba(201, 162, 75, 0.18); } .spread__week-day-head { margin-bottom: 14px; } .spread__week-dow { display: block; font-style: italic; color: #C9A24B; font-size: .88rem; letter-spacing: 0.03em; } .spread__week-dom { display: block; font-style: italic; font-weight: 500; font-size: 3rem; line-height: 1; color: #F2E8D5; letter-spacing: -0.03em; margin-top: 2px; } .spread__week-day.is-today .spread__week-dom { color: #C9A24B; } .spread__week-empty { font-style: italic; color: rgba(181, 169, 146, 0.5); text-align: center; padding: 24px 0; } .spread__week-list { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow-y: auto; } .spread__week-item { text-align: left; background: rgba(20, 16, 30, 0.65); border: none; border-left: 2px solid var(--card-fg); padding: 6px 10px; cursor: pointer; color: inherit; font: inherit; transition: background .12s; } .spread__week-item:hover { background: rgba(30, 24, 44, 0.85); } .spread__week-item-time { font-family: "JetBrains Mono", monospace; font-size: .68rem; color: #C9A24B; letter-spacing: 0.05em; } .spread__week-item-city { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: 1.05rem; color: #F2E8D5; margin-top: 1px; } .spread__week-item-meta { font-family: "Inter", sans-serif; font-size: .68rem; color: #B5A992; margin-top: 2px; } /* ============================================================= MONTH spread ============================================================= */ .spread--month .spread__month-grid { position: relative; z-index: 2; flex: 1; padding: 6px 36px 24px; display: flex; flex-direction: column; min-height: 0; } .spread__month-dow-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; } .spread__month-dow { text-align: center; font-style: italic; color: #C9A24B; font-size: .82rem; letter-spacing: 0.04em; padding: 4px 0; } .spread__month-cells { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; min-height: 0; } .spread__month-cell { background: rgba(15, 12, 24, 0.7); border: 1px solid rgba(201, 162, 75, 0.15); padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-height: 70px; } .spread__month-cell.is-other { opacity: 0.4; } .spread__month-cell.is-today { border-color: #C9A24B; box-shadow: inset 0 0 16px rgba(201, 162, 75, 0.15); } .spread__month-day-num { font-style: italic; font-weight: 500; font-size: 1.15rem; color: #F2E8D5; letter-spacing: -0.01em; } .spread__month-cell.is-today .spread__month-day-num { color: #C9A24B; } .spread__month-evt { text-align: left; background: rgba(20, 16, 32, 0.65); border: none; border-left: 2px solid var(--card-fg); padding: 2px 6px; cursor: pointer; color: inherit; font: inherit; display: flex; gap: 6px; align-items: baseline; } .spread__month-evt:hover { background: rgba(30, 24, 44, 0.85); } .spread__month-evt .t { font-family: "JetBrains Mono", monospace; font-size: .62rem; color: #C9A24B; } .spread__month-evt .c { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: .82rem; color: #F2E8D5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spread__month-more { font-style: italic; font-size: .7rem; color: rgba(181, 169, 146, 0.6); padding: 2px 0; } /* ============================================================= YEAR spread ============================================================= */ .spread--year .spread__year-grid { position: relative; z-index: 2; flex: 1; padding: 12px 36px 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; min-height: 0; } .spread__year-tile { background: linear-gradient(180deg, rgba(22, 18, 36, 0.65), rgba(10, 8, 18, 0.65)); border: 1px solid rgba(201, 162, 75, 0.18); padding: 18px 22px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, transform .15s; } .spread__year-tile:hover { border-color: #C9A24B; transform: translateY(-2px); } .spread__year-tile.is-current { border-color: #C9A24B; background: linear-gradient(180deg, rgba(40, 28, 14, 0.7), rgba(20, 14, 8, 0.7)); box-shadow: 0 0 22px rgba(201, 162, 75, 0.15); } .spread__year-month { font-style: italic; font-weight: 500; font-size: 1.7rem; color: #F2E8D5; letter-spacing: -0.02em; line-height: 1; } .spread__year-tile.is-current .spread__year-month { color: #C9A24B; } .spread__year-count { font-style: italic; font-size: 2.4rem; font-weight: 500; color: #C9A24B; letter-spacing: -0.02em; line-height: 1; margin-top: 16px; } .spread__year-count small { font-style: italic; font-weight: 400; font-size: .75rem; color: rgba(181, 169, 146, 0.7); letter-spacing: 0; margin-left: 6px; } @media (prefers-reduced-motion: reduce) { .spread__card, .spread__year-tile { transition: none; } } /* ============================================================= PNWRF magazine-in-motion 3D stage (legacy — unused now, kept in case any old screen uses these classes) ============================================================= */ .mag-stage { width: 100%; height: 100%; position: relative; background: radial-gradient(ellipse 80% 60% at 50% 35%, rgba(201, 162, 75, 0.10), transparent 70%), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(110, 86, 38, 0.08), transparent 65%), linear-gradient(180deg, #0a0810 0%, #050308 100%); overflow: hidden; font-family: 'Cormorant Garamond', serif; } /* Subtle film grain overlay for editorial feel */ .mag-stage::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' /%3E%3CfeColorMatrix values='0 0 0 0 0.788 0 0 0 0 0.635 0 0 0 0 0.294 0 0 0 0.06 0' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E"); pointer-events: none; opacity: 0.4; mix-blend-mode: overlay; } .mag-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 4; } /* Drag pill — the headline "you're dropping here" indicator */ .mag-drag-pill { position: fixed; pointer-events: none; background: linear-gradient(180deg, rgba(20, 16, 28, 0.96), rgba(10, 8, 16, 0.96)); border: 1px solid #C9A24B; padding: 12px 22px; z-index: 1500; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 24px rgba(201, 162, 75, 0.25); min-width: 180px; border-radius: 2px; /* Editorial corner-marks */ background-image: linear-gradient(45deg, transparent calc(100% - 10px), #C9A24B calc(100% - 10px), #C9A24B calc(100% - 9px), transparent calc(100% - 9px)), linear-gradient(-45deg, transparent calc(100% - 10px), #C9A24B calc(100% - 10px), #C9A24B calc(100% - 9px), transparent calc(100% - 9px)); } .mag-drag-pill__row { line-height: 1.15; } .mag-drag-pill__shooter { font-style: italic; font-weight: 500; font-size: 0.92rem; color: #C9A24B; letter-spacing: 0.04em; } .mag-drag-pill__time { font-style: italic; font-weight: 600; font-size: 1.5rem; color: #F2E8D5; margin-top: 2px; } .mag-drag-pill__day { font-style: italic; font-size: 0.78rem; color: #B5A992; margin-top: 4px; letter-spacing: 0.02em; } /* Drive band labels — small editorial pills floating between cards */ .mag-band { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font-family: 'Cormorant Garamond', serif; white-space: nowrap; } .mag-band__core { display: inline-flex; align-items: baseline; gap: 10px; padding: 5px 14px; background: rgba(10, 8, 18, 0.92); border-top: 1px solid var(--c, #C9A24B); border-bottom: 1px solid var(--c, #C9A24B); color: #F2E8D5; font-size: 0.9rem; letter-spacing: 0.02em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .mag-band__mins { font-style: italic; font-weight: 600; color: var(--c, #C9A24B); font-size: 1.15rem; } .mag-band__mins small { font-style: italic; font-weight: 500; color: #B5A992; font-size: 0.7rem; margin-left: 2px; } .mag-band__sep { color: #6a5a3a; } .mag-band__mi { font-style: italic; color: #B5A992; } .mag-band__slack { font-style: italic; color: var(--c, #C9A24B); font-weight: 500; } .mag-band__slack--over { color: #C97A6F; font-weight: 700; text-transform: uppercase; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; } .mag-band__rush { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; color: #C97A6F; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .mag-band__core { transition: none; } } /* ============================================================= Zoom HUD — top-left corner overlay on the 3D scene ============================================================= */ .zoom-hud { position: absolute; top: 14px; left: 14px; background: rgba(10, 10, 24, 0.78); border: 1px solid rgba(202, 10, 255, 0.4); border-radius: 10px; padding: 10px 14px; font-family: var(--mono); color: #e6e4ff; pointer-events: auto; backdrop-filter: blur(8px); box-shadow: 0 6px 22px rgba(0,0,0,0.45); z-index: 6; } .zoom-hud__label { font-family: var(--display); font-weight: 900; font-size: 1.1rem; letter-spacing: .14em; color: #C5FF3D; text-shadow: 0 0 16px rgba(197, 255, 61, 0.55); } .zoom-hud__sub { font-size: .72rem; color: #888aae; margin-bottom: 8px; } .zoom-hud__presets { display: flex; gap: 4px; } .zoom-preset { background: rgba(0,0,0,0.4); color: #aaa8c8; border: 1px solid rgba(255,255,255,0.08); padding: 3px 9px; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; border-radius: 4px; cursor: pointer; transition: background .12s, color .12s; } .zoom-preset:hover { background: rgba(255,255,255,0.06); color: #fff; } .zoom-preset.is-active { background: rgba(202, 10, 255, 0.25); color: #fff; border-color: #CA0AFF; box-shadow: 0 0 12px rgba(202, 10, 255, 0.5); } /* ============================================================= Suggestions side panel — slim sidekick over the calendar (the canvas itself is the workspace; this is just ideas) ============================================================= */ .opt-panel { position: absolute; top: 60px; right: 12px; bottom: 12px; width: 300px; background: linear-gradient(180deg, rgba(10, 10, 22, 0.92), rgba(6, 6, 14, 0.92)); border: 1px solid rgba(202, 10, 255, 0.28); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); z-index: 30; display: flex; flex-direction: column; overflow: hidden; backdrop-filter: blur(6px); font-family: var(--body); color: #e6e4ff; } .opt-panel__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 11px 14px 9px; border-bottom: 1px solid rgba(202, 10, 255, 0.16); background: linear-gradient(180deg, rgba(202, 10, 255, 0.06), rgba(0,0,0,0)); } .opt-panel__mark { font-size: 1.15rem; color: #CA0AFF; line-height: 1; opacity: .85; } .opt-panel__title { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: #fafafa; } .opt-panel__sub { font-size: .72rem; color: #888aae; font-family: var(--mono); } .opt-panel__close { background: transparent; border: none; font-size: 1.4rem; color: #aaa8c8; width: 28px; height: 28px; border-radius: 50%; } .opt-panel__close:hover { background: rgba(255,255,255,0.06); color: #fff; } .opt-panel__body { padding: 14px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; } .opt-panel__field { display: flex; flex-direction: column; gap: 6px; } .opt-panel__field label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #888aae; font-weight: 700; } .opt-panel__input { background: rgba(0,0,0,0.4); border: 1px solid rgba(202, 10, 255, 0.25); border-radius: 8px; color: #fafafa; padding: 8px 10px; font-family: var(--body); font-size: .85rem; line-height: 1.4; width: 100%; box-sizing: border-box; resize: vertical; } .opt-panel__input:focus { outline: none; border-color: #CA0AFF; box-shadow: 0 0 0 3px rgba(202, 10, 255, 0.2); } .opt-panel__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .opt-panel__chip { font-size: .68rem; font-family: var(--mono); font-weight: 700; padding: 2px 8px; background: rgba(61, 229, 192, 0.12); color: #6FEAD0; border: 1px solid rgba(61, 229, 192, 0.35); border-radius: 999px; } .opt-panel__sep { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; } .opt-panel__sep::before, .opt-panel__sep::after { content: ""; flex: 1; height: 1px; background: rgba(202, 10, 255, 0.18); } .opt-panel__sep span { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: #888aae; font-weight: 700; } /* Scenario card */ .opt-plan { background: rgba(8, 8, 22, 0.88); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 12px; transition: border-color .15s, box-shadow .15s, transform .12s; } .opt-plan { cursor: pointer; } .opt-plan:hover, .opt-plan:focus-within { border-color: rgba(202, 10, 255, 0.55); box-shadow: 0 0 0 1px rgba(202, 10, 255, 0.25), 0 8px 22px rgba(202, 10, 255, 0.18); } .opt-plan.is-pinned { border-color: #CA0AFF; background: rgba(28, 8, 36, 0.94); box-shadow: 0 0 0 1px rgba(202, 10, 255, 0.45), 0 10px 28px rgba(202, 10, 255, 0.28); } .opt-plan__pin-hint { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(202, 10, 255, 0.55); margin: 2px 0 6px; transition: color .14s ease; } .opt-plan.is-pinned .opt-plan__pin-hint { color: #CA0AFF; font-weight: 700; } .opt-plan.is-previewed { border-color: #CA0AFF; box-shadow: 0 0 22px rgba(202, 10, 255, 0.35), inset 0 0 0 1px rgba(202, 10, 255, 0.18); } .opt-plan__head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; } .opt-plan__name { font-family: var(--display); font-weight: 800; font-size: 1rem; color: #fafafa; line-height: 1.2; } .opt-plan__desc { font-size: .78rem; color: #b8b6d6; margin-top: 2px; line-height: 1.4; } .opt-plan__saved { text-align: right; flex-shrink: 0; } .opt-plan__saved-num { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: #C5FF3D; text-shadow: 0 0 12px rgba(197, 255, 61, 0.4); } .opt-plan__saved-flat { font-family: var(--display); font-weight: 700; color: #888aae; } .opt-plan__saved-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; color: #888aae; font-weight: 700; } .opt-plan__stats { font-family: var(--mono); font-size: .78rem; color: #b8b6d6; margin: 10px 0 6px; display: flex; gap: 6px; flex-wrap: wrap; } .opt-plan__stats strong { color: #fafafa; } .opt-plan__sep { color: #6f6e92; } .opt-plan__highlights { list-style: none; padding: 0; margin: 4px 0 10px; display: flex; flex-direction: column; gap: 3px; font-size: .76rem; color: #b8b6d6; } .opt-plan__highlights li { padding-left: 14px; position: relative; line-height: 1.4; } .opt-plan__highlights li::before { content: "›"; position: absolute; left: 4px; color: #CA0AFF; } .opt-plan__actions { display: flex; gap: 6px; } .opt-plan__actions .btn { flex: 1; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #e6e4ff; } .opt-plan__actions .btn:hover { background: rgba(255,255,255,0.08); } .opt-plan__actions .btn--primary { background: #CA0AFF; color: white; border-color: #CA0AFF; box-shadow: 0 0 14px rgba(202, 10, 255, 0.35); } /* ============================================================= 3D route HUD overlays — pin to canvas at road midpoints ============================================================= */ .hud-overlay { font-family: var(--mono); } .route-hud { position: absolute; transform: translate(-50%, -50%); background: rgba(8, 8, 22, 0.78); backdrop-filter: blur(6px); border: 1px solid rgba(120, 200, 200, 0.35); border-radius: 6px; padding: 6px 10px; font-size: .7rem; color: #d8d6f0; white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); pointer-events: none; min-width: 160px; /* Subtle scanline corner-mark for hi-tech feel */ background-image: linear-gradient(to right, transparent 0, transparent calc(100% - 14px), currentColor calc(100% - 14px), currentColor calc(100% - 12px), transparent calc(100% - 12px)), linear-gradient(to bottom, transparent 0, transparent 12px, currentColor 12px, currentColor 14px, transparent 14px); } .route-hud--ok { border-color: rgba(61, 229, 192, 0.7); color: #6FEAD0; box-shadow: 0 4px 16px rgba(61, 229, 192, 0.18); } .route-hud--tight { border-color: rgba(255, 179, 71, 0.7); color: #FFC57A; box-shadow: 0 4px 16px rgba(255, 179, 71, 0.22); } .route-hud--impossible { border-color: rgba(255, 107, 107, 0.85); color: #FF8585; box-shadow: 0 4px 16px rgba(255, 107, 107, 0.28); animation: hud-impossible 1.6s ease-in-out infinite; } @keyframes hud-impossible { 0%, 100% { box-shadow: 0 4px 16px rgba(255, 107, 107, 0.28); } 50% { box-shadow: 0 4px 22px rgba(255, 107, 107, 0.55); } } .route-hud__core { display: flex; flex-direction: column; gap: 2px; } .route-hud__row { display: flex; align-items: center; gap: 6px; font-weight: 600; } .route-hud__miles { font-size: .82rem; color: #C5FF3D; } .route-hud__minutes { color: #d8d6f0; } .route-hud__sep { opacity: .35; } .route-hud__slack { color: inherit; font-weight: 700; font-size: .72rem; } .route-hud__cong { padding: 0 6px; border-radius: 3px; font-size: .58rem; letter-spacing: .12em; font-weight: 800; } .route-hud__cong--rush { background: rgba(255, 107, 107, 0.18); color: #FF8585; } .route-hud__cong--normal { background: rgba(120, 120, 160, 0.18); color: #aaa8c8; } .route-hud__cong--off-peak { background: rgba(61, 229, 192, 0.15); color: #6FEAD0; } .route-hud__bar { margin-top: 4px; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; } .route-hud__bar-fill { height: 100%; background: currentColor; transition: width .3s ease; } .route-hud__from { margin-top: 4px; font-size: .62rem; color: rgba(216, 214, 240, 0.55); font-family: var(--body); font-weight: 500; text-overflow: ellipsis; overflow: hidden; max-width: 240px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } .route-hud--impossible { animation: none; } } /* ============================================================= DISPATCHER · WEEK MATRIX (shooter rows × day columns) Lives inside .disp, so inherits the gold-on-ink type. ============================================================= */ .disp__week-matrix-wrap { flex: 1; min-height: 0; overflow: auto; padding: 6px 14px 20px; } .disp__week-matrix { display: grid; gap: 4px; align-items: stretch; min-width: 980px; } .disp__week-corner { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(201, 162, 75, 0.55); padding: 14px 12px 10px; border-bottom: 1px solid rgba(201, 162, 75, 0.22); background: linear-gradient(180deg, rgba(201, 162, 75, 0.05), transparent); } .disp__week-colhead { display: flex; align-items: baseline; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid rgba(201, 162, 75, 0.22); font-family: "Cormorant Garamond", Georgia, serif; color: #F2E8D5; } .disp__week-colhead .dow { font-size: .72rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(201, 162, 75, 0.75); font-weight: 600; } .disp__week-colhead .dom { font-size: 1.6rem; font-style: italic; font-weight: 500; color: #F2E8D5; line-height: 1; } .disp__week-colhead .cnt { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: rgba(201, 162, 75, 0.7); padding: 1px 6px; border: 1px solid rgba(201, 162, 75, 0.25); border-radius: 999px; } .disp__week-colhead.is-today { background: linear-gradient(180deg, rgba(201, 162, 75, 0.10), transparent); } .disp__week-colhead.is-today .dom { color: #C9A24B; } button.disp__week-colhead { width: 100%; text-align: left; background: transparent; cursor: pointer; font: inherit; color: inherit; transition: background .12s; } .disp__week-colhead.is-clickable:hover { background: linear-gradient(180deg, rgba(201, 162, 75, 0.18), transparent); } .disp__week-colhead.is-clickable:hover .dom { color: #C9A24B; } .disp__week-rowhead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(20, 16, 32, 0.55); border-right: 1px solid rgba(201, 162, 75, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.04); min-height: 96px; position: sticky; left: 0; z-index: 2; } .disp__week-rowdot { width: 10px; height: 10px; border-radius: 50%; background: var(--col-dot, #C9A24B); box-shadow: 0 0 8px var(--col-dot, #C9A24B); flex-shrink: 0; } .disp__week-rowname { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.05rem; color: #F2E8D5; flex: 1; line-height: 1.2; } .disp__week-rowcnt { font-family: var(--mono); font-size: .7rem; color: rgba(201, 162, 75, 0.7); font-weight: 700; } .disp__week-cell { background: rgba(10, 8, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 5px; min-height: 96px; display: flex; flex-direction: column; gap: 4px; transition: background-color .12s, border-color .12s; position: relative; } .disp__week-cell.is-drop { background: rgba(201, 162, 75, 0.10); border-color: rgba(201, 162, 75, 0.55); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, 0.35); } .disp__week-cell-empty { flex: 1; min-height: 86px; /* Subtle hint that the cell is a valid drop target */ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 4px, transparent 4px 12px); border-radius: 4px; } /* Week mini-cards — same visual grammar as Day cards (dark surface, gold + Cormorant accents, JetBrains Mono for time). The earlier version used the LIGHT-mode palette bg as the card background, which read as harsh pastel chips on the dark dispatcher board. */ .disp__week-mini { background: linear-gradient(180deg, rgba(28, 22, 40, 0.96), rgba(14, 10, 22, 0.96)); border: 1px solid rgba(201, 162, 75, 0.15); border-left: 3px solid var(--card-fg, #C9A24B); border-radius: 4px; padding: 6px 8px 7px; cursor: grab; user-select: none; font-family: var(--body); color: #E8DFCE; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; min-width: 0; transition: transform .12s, border-color .12s, box-shadow .12s; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .disp__week-mini:hover { transform: translateX(1px); border-color: rgba(201, 162, 75, 0.4); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(201, 162, 75, 0.12); } .disp__week-mini:active { cursor: grabbing; } .disp__week-mini.is-dragging { opacity: 0.32; } .disp__week-mini-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; } .disp__week-mini-time { font-family: "JetBrains Mono", monospace; font-size: .68rem; font-weight: 700; color: #C9A24B; letter-spacing: .06em; flex-shrink: 0; } .disp__week-mini-dur { font-family: "JetBrains Mono", monospace; font-size: .58rem; font-weight: 500; color: rgba(181, 169, 146, 0.7); letter-spacing: .04em; flex-shrink: 0; } .disp__week-mini-title { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: .9rem; color: #F2E8D5; line-height: 1.18; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .disp__week-mini-sep { color: rgba(201, 162, 75, 0.45); font-style: normal; margin: 0 1px; } .disp__week-mini-addr { font-family: var(--body); font-size: .66rem; color: rgba(181, 169, 146, 0.7); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Compact drive-time chip between two consecutive mini-cards in the Week matrix. Same colour grammar as Day-view bands. */ .disp__week-band { display: flex; align-items: baseline; gap: 4px; margin: 2px 4px; padding: 2px 6px; border-left: 2px solid var(--rail-c, #7AC1A2); background: rgba(8, 6, 16, 0.55); border-radius: 3px; font-family: "JetBrains Mono", monospace; font-size: .58rem; letter-spacing: .04em; color: #B5A992; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .disp__week-band--ok { --rail-c: #7AC1A2; } .disp__week-band--tight { --rail-c: #D4A87A; } .disp__week-band--impossible { --rail-c: #C97A6F; background: rgba(201, 122, 111, 0.12); } .disp__week-band-arrow { color: var(--rail-c); opacity: .8; font-size: .7rem; line-height: 1; } .disp__week-band-mins { color: var(--rail-c); font-weight: 700; font-size: .68rem; } .disp__week-band-mins small { color: rgba(181, 169, 146, 0.65); font-weight: 400; margin-left: 1px; } .disp__week-band-sep { color: rgba(201, 162, 75, 0.25); } .disp__week-band-mi { color: rgba(181, 169, 146, 0.85); } .disp__week-band-slack { color: var(--rail-c); font-weight: 600; margin-left: 2px; } .disp__week-band-slack.is-over { color: #FF8585; } .disp__week-band-rush { margin-left: 2px; color: #C97A6F; font-weight: 700; font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; } /* While dragging, every card on the board becomes hit-through so the cursor reads the cell underneath, not a sibling card. */ body.disp-dragging .disp__card, body.disp-dragging .disp__week-mini, body.disp-dragging .disp__month-evt { pointer-events: none; } /* Month chip drop-target state — same accent as Week */ .disp__month-cell.is-drop { background: rgba(201, 162, 75, 0.10); box-shadow: inset 0 0 0 1px rgba(201, 162, 75, 0.45); } .disp__month-evt { cursor: grab; user-select: none; } .disp__month-evt:active { cursor: grabbing; } .disp__month-evt.is-dragging { opacity: 0.32; } /* Year tile — make button styling consistent */ .disp__year-tile { cursor: pointer; } /* Generic .muted utility within .disp totals row */ .disp__totals .muted { color: rgba(181, 169, 146, 0.55); font-style: italic; } /* ============================================================= DRAFT / PENDING-CHANGE STATE The dispatcher is a working copy until Erin commits. Anything touched gets a gold dashed outline + a DRAFT pill so the uncommitted state is obvious at a glance. ============================================================= */ .pending-bar { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; margin-bottom: 8px; background: linear-gradient(180deg, rgba(201, 162, 75, 0.18), rgba(201, 162, 75, 0.08)), rgba(12, 10, 22, 0.92); border: 1px solid rgba(201, 162, 75, 0.55); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(201, 162, 75, 0.18) inset; color: #F2E8D5; font-family: var(--body); animation: pending-bar-in .18s ease; } .pending-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .pending-bar__bulk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(201, 162, 75, 0.45); border-radius: 999px; font-size: .78rem; color: #F2E8D5; cursor: pointer; user-select: none; } .pending-bar__bulk input[type="checkbox"] { appearance: none; width: 13px; height: 13px; border: 1.5px solid rgba(201, 162, 75, 0.7); border-radius: 3px; background: transparent; cursor: pointer; display: inline-block; position: relative; margin: 0; flex-shrink: 0; } .pending-bar__bulk input[type="checkbox"]:checked { background: #C9A24B; border-color: #C9A24B; } .pending-bar__bulk input[type="checkbox"]:checked::after { content: "✓"; position: absolute; inset: -2px 0 0 1px; color: #0c0a16; font-size: 10px; font-weight: 800; line-height: 1; text-align: center; } .pending-bar__bulk input[type="checkbox"]:indeterminate { background: rgba(201, 162, 75, 0.45); border-color: #C9A24B; } .pending-bar__bulk input[type="checkbox"]:indeterminate::after { content: "–"; position: absolute; inset: -3px 0 0 0; color: #0c0a16; font-size: 12px; font-weight: 800; line-height: 1; text-align: center; } .pending-bar__bulk-count { font-family: var(--mono); font-size: .68rem; color: rgba(242, 232, 213, 0.7); letter-spacing: .04em; margin-left: 2px; } /* Expanded review list */ .pending-bar__list { list-style: none; padding: 6px 0 2px; margin: 0; border-top: 1px solid rgba(201, 162, 75, 0.25); display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; } .pending-bar__item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border-bottom: 1px dashed rgba(201, 162, 75, 0.12); font-size: .8rem; } .pending-bar__item:last-child { border-bottom: none; } .pending-bar__item-notify { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; cursor: pointer; font-family: var(--mono); font-size: .62rem; color: rgba(242, 232, 213, 0.7); letter-spacing: .08em; text-transform: uppercase; padding-top: 1px; } .pending-bar__item-notify input[type="checkbox"] { appearance: none; width: 12px; height: 12px; border: 1.5px solid rgba(201, 162, 75, 0.6); border-radius: 3px; background: transparent; cursor: pointer; position: relative; margin: 0; } .pending-bar__item-notify input[type="checkbox"]:checked { background: #C9A24B; border-color: #C9A24B; } .pending-bar__item-notify input[type="checkbox"]:checked::after { content: "✓"; position: absolute; inset: -3px 0 0 0; color: #0c0a16; font-size: 10px; font-weight: 800; line-height: 1; text-align: center; } .pending-bar__item-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .pending-bar__item-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .pending-bar__item-head strong { font-family: var(--display); font-weight: 700; color: #F2E8D5; } .pending-bar__item-addr { font-size: .72rem; color: rgba(181, 169, 146, 0.75); } .pending-bar__item-diff { display: flex; flex-wrap: wrap; gap: 10px 14px; font-family: var(--mono); font-size: .72rem; color: rgba(181, 169, 146, 0.85); } .pending-bar__item-diff .diff { display: inline-flex; gap: 4px; align-items: baseline; } .pending-bar__item-diff .o { color: rgba(181, 169, 146, 0.55); text-decoration: line-through; text-decoration-thickness: 1px; } .pending-bar__item-diff .n { color: #F2E8D5; font-weight: 600; } @keyframes pending-bar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .pending-bar__info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; } .pending-bar__dot { width: 9px; height: 9px; border-radius: 50%; background: #C9A24B; box-shadow: 0 0 8px rgba(201, 162, 75, 0.7); animation: pending-pulse 1.6s ease-in-out infinite; } @keyframes pending-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(201, 162, 75, 0.45); } 50% { box-shadow: 0 0 12px rgba(201, 162, 75, 0.95); } } .pending-bar__count { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.1rem; color: #F2E8D5; } .pending-bar__count strong { font-style: normal; font-weight: 700; color: #C9A24B; font-family: var(--display); margin-right: 4px; } .pending-bar__hint { font-size: .78rem; color: rgba(181, 169, 146, 0.85); } .pending-bar__actions { display: flex; gap: 8px; flex-shrink: 0; } .pending-bar__actions .btn { white-space: nowrap; } /* Card draft outline — same hue as the pending bar's dashed edge */ .disp__card.is-pending { outline: 1.5px dashed #C9A24B; outline-offset: -1.5px; box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.2), 0 2px 14px rgba(201, 162, 75, 0.16); } .disp__week-mini.is-pending { outline: 1.5px dashed #C9A24B; outline-offset: -1.5px; position: relative; } .disp__month-evt.is-pending { outline: 1.5px dashed #C9A24B; outline-offset: -1.5px; position: relative; } /* DRAFT pill — small badge in the corner of a draft card */ .disp__draft-pill { position: absolute; top: 4px; right: 4px; font-family: var(--mono); font-size: .55rem; letter-spacing: .12em; font-weight: 800; color: #0A0810; background: #C9A24B; padding: 1px 5px; border-radius: 2px; z-index: 2; pointer-events: none; } .disp__draft-pill--mini { top: 2px; right: 2px; font-size: .5rem; letter-spacing: 0; padding: 0 3px; line-height: 1.2; } /* Preview pill — magenta, for cards currently floating in an optimizer-hover preview */ .disp__draft-pill--preview { background: #CA0AFF; color: #FFFFFF; box-shadow: 0 0 6px rgba(202, 10, 255, 0.55); } /* Card outline while previewing: solid magenta + soft glow */ .disp__card.is-preview { outline: 1.5px solid #CA0AFF; outline-offset: -1.5px; box-shadow: 0 0 0 1px rgba(202, 10, 255, 0.28), 0 2px 18px rgba(202, 10, 255, 0.32); transition: top .22s cubic-bezier(.22, 1, .36, 1), left .22s ease, box-shadow .15s ease; } .disp__week-mini.is-preview { outline: 1.5px solid #CA0AFF; outline-offset: -1.5px; box-shadow: 0 0 10px rgba(202, 10, 255, 0.25); } /* Half-hour minor tick (visual subdivision between full hours) */ .disp__slot.is-half { /* Lighter than .is-hour but more visible than a quarter-hour */ border-top: 1px dashed rgba(201, 162, 75, 0.08); } /* Optimizer hint banner — explains the draft model */ .opt-panel__hint { font-size: .82rem; line-height: 1.4; padding: 10px 12px; background: rgba(201, 162, 75, 0.08); border: 1px solid rgba(201, 162, 75, 0.25); border-radius: 8px; color: #d6c9a5; } .opt-panel__hint strong { color: #C9A24B; font-weight: 700; } /* Applied scenario state — sit it apart from the previous "is-previewed" */ .opt-plan.is-applied { border-color: rgba(201, 162, 75, 0.6); box-shadow: 0 0 16px rgba(201, 162, 75, 0.18), inset 0 0 0 1px rgba(201, 162, 75, 0.18); } .opt-plan__applied-hint { margin-top: 8px; font-size: .72rem; color: #C9A24B; font-style: italic; } /* ============================================================= CALENDAR PAGE HEIGHT — accounts for mobile bottom nav ============================================================= */ .calendar-page { height: calc(100vh - 70px); min-height: 600px; } @media (max-width: 800px) { .calendar-page { /* Bottom nav (~60px) + breathing room subtracted from viewport */ height: calc(100vh - 130px); min-height: 480px; } } /* ============================================================= MOBILE LAYOUT FIXES The dispatcher and all forms inherited desktop-only grids. Below 800px we collapse multi-column grids, make the calendar horizontally scrollable with sticky axes, and turn the floating optimizer / pending-bar into mobile-first sheets. ============================================================= */ @media (max-width: 800px) { /* --- Stop the dispatcher's wide grid from pushing the entire page horizontally. The disp__board has a fixed minimum content width (4 × 180px); without these clamps it propagates up through the flex chain and the whole body ends up scrolling. ---------------------------- */ html, body { overflow-x: hidden; } .shell__main { overflow-x: hidden; max-width: 100vw; } .calendar-page, .calendar-host, .disp, .disp__board-wrap, .disp__head { min-width: 0; max-width: 100%; } /* --- Preview banner -------------------------------------- */ /* Hide the mid-banner hint; keep the title and reset link. */ .preview-banner__hint { display: none; } .preview-banner { font-size: .68rem; padding: 4px 10px; gap: 8px; } .preview-banner__title { font-size: .68rem; } /* --- Grids: kill inline column-spans on stacked grids --- */ /* Inline `grid-column: span N` on cells doesn't collapse on its own when the parent goes to 1fr; force every child to occupy the single column so nothing overflows. */ .grid-3 > *, .grid-2 > * { grid-column: 1 / -1; } /* --- Page chrome --------------------------------------- */ .h1 { font-size: 1.45rem; } .h2 { font-size: 1.1rem; } /* Header on Calendar / Customers / etc. wraps neatly */ .stack > header.row { gap: 10px; } .stack > header.row .btn { font-size: .8rem; padding: 7px 11px; } /* Long page-helper paragraphs eat space and get clipped on phones */ .stack > header p.muted, .stack > header > div > p.muted { display: none; } /* --- Calendar shell ------------------------------------ */ .calendar-host { overflow: hidden; } .cal-header { flex-wrap: wrap; gap: 8px; padding: 8px 10px; } .cal-views { flex-wrap: wrap; } .cal-views button { padding: 6px 10px; font-size: .8rem; } .cal-title { flex-basis: 100%; text-align: left; font-size: 1rem; min-width: 0; order: 5; } .cal-nav { gap: 4px; } .cal-nav button { padding: 4px 10px; font-size: .82rem; } /* Filter-chip row stays scrollable horizontally if needed */ .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .chips::-webkit-scrollbar { height: 4px; } .chip { flex-shrink: 0; } /* --- Drive-time connectors: smaller chip on mobile so it fits inside a 180px-wide column ------------------- */ .disp__band-chip { padding: 3px 8px; font-size: .72rem; gap: 5px; } .disp__band-mins { font-size: .88rem; } .disp__band-mins small { font-size: .58rem; } .disp__band-slack.is-over { font-size: .58rem; } .disp__band-rush { font-size: .55rem; } /* Keep the rail visible even when chip squeezes */ .disp__band-rail { width: 3px; opacity: 0.9; } /* --- Dispatcher: Day view ------------------------------ */ .disp__head { padding: 10px 12px 10px; gap: 8px; } .disp__weekday { font-size: 1.6rem; } .disp__date { font-size: .9rem; } .disp__totals { font-size: .68rem; gap: 6px; } .disp__totals strong { font-size: .85rem; } .disp__board-wrap { padding: 6px 12px 16px; } /* Sticky time axis so it stays visible while panning columns. Background must be fully opaque so columns scrolling underneath (including DRAFT-outlined cards) don't bleed through. */ .disp__time-axis { flex: 0 0 44px; position: sticky; left: 0; background: #07060E; box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.55); z-index: 3; padding-top: 60px; } .disp__tick-num { font-size: 1.05rem; } .disp__tick-ap { font-size: .58rem; } /* Narrower minimum so two columns can be visible at once */ .disp__board { grid-template-columns: repeat(var(--n, 4), minmax(180px, 1fr)) !important; } .disp__col-head { padding: 8px 8px; } .disp__col-name { font-size: .92rem; } .disp__col-stats { font-size: .65rem; gap: 4px; } /* --- Dispatcher: Week matrix --------------------------- */ .disp__week-matrix-wrap { padding: 4px 8px 16px; } .disp__week-matrix { grid-template-columns: 110px repeat(7, minmax(105px, 1fr)) !important; gap: 3px; min-width: 0; } .disp__week-corner { padding: 8px 6px 6px; font-size: .55rem; } .disp__week-colhead { padding: 8px 6px 6px; gap: 4px; } .disp__week-colhead .dow { font-size: .62rem; } .disp__week-colhead .dom { font-size: 1.1rem; } .disp__week-rowhead { padding: 6px 8px; min-height: 70px; } .disp__week-rowname { font-size: .82rem; } .disp__week-cell { min-height: 70px; padding: 3px; } .disp__week-mini { padding: 5px 6px; } .disp__week-mini-time { font-size: .62rem; } .disp__week-mini-dur { font-size: .54rem; } .disp__week-mini-title { font-size: .82rem; } .disp__week-mini-addr { font-size: .6rem; } /* --- Dispatcher: Month -------------------------------- */ .disp__month { padding: 4px 8px 16px; } .disp__month-dow > div { font-size: .58rem; padding: 4px; } .disp__month-cell { min-height: 64px; padding: 3px 4px; } .disp__month-day { font-size: .82rem; } .disp__month-evt { font-size: .58rem; padding: 0 4px; min-height: 14px; } .disp__month-evt .t { display: none; } /* keep just the city to fit */ /* --- Dispatcher: Year tiles --------------------------- */ .disp__year { grid-template-columns: repeat(2, 1fr) !important; padding: 8px 12px 16px; gap: 8px; } .disp__year-tile { padding: 14px 16px; min-height: 110px; } .disp__year-tile .m { font-size: 1.4rem; } .disp__year-tile .n { font-size: 1.6rem; } /* --- Pending bar -------------------------------------- */ .pending-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 9px 12px; } .pending-bar__row { flex-direction: column; align-items: stretch; gap: 8px; } .pending-bar__info { font-size: .78rem; flex-wrap: wrap; } .pending-bar__hint { width: 100%; font-size: .72rem; } .pending-bar__actions { justify-content: space-between; flex-wrap: wrap; } .pending-bar__actions .btn { flex: 1; } .pending-bar__bulk { flex-basis: 100%; justify-content: center; } .pending-bar__item { font-size: .76rem; } .pending-bar__item-diff { font-size: .68rem; gap: 6px 10px; } /* --- Optimizer as draggable half-sheet ----------------- */ /* Sits in the bottom half of the screen by default so the calendar above is visible AND interactive — you can drag appointments while looking at scenarios. Tap the grabber or expand button to grow it to (nearly) full height for browsing the constraint list / scenario details. */ .opt-panel { position: fixed; top: auto; left: 0; right: 0; bottom: 60px; /* sit above mobile bottom nav */ width: 100%; height: 48vh; min-height: 280px; max-height: calc(100vh - 90px); border-radius: 14px 14px 0 0; box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(201, 162, 75, 0.45); z-index: 60; transition: height .22s ease; } .opt-panel.is-expanded { height: calc(100vh - 90px); } /* Grabber bar at top — visual cue + secondary toggle */ .opt-panel__grabber { position: absolute; top: 0; left: 0; right: 0; height: 18px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .opt-panel__grabber-bar { width: 44px; height: 4px; background: rgba(201, 162, 75, 0.5); border-radius: 2px; transition: background .15s; } .opt-panel__grabber:hover .opt-panel__grabber-bar, .opt-panel__grabber:active .opt-panel__grabber-bar { background: #C9A24B; } /* Expand chevron in the head */ .opt-panel__expand { background: transparent; border: 1px solid rgba(202, 10, 255, 0.35); color: #e6e4ff; width: 28px; height: 28px; border-radius: 6px; font-size: 1rem; line-height: 1; padding: 0; cursor: pointer; } .opt-panel__expand:hover { background: rgba(255, 255, 255, 0.06); border-color: #CA0AFF; } /* Push the head down a touch so the grabber doesn't overlap */ .opt-panel__head { padding: 16px 14px 8px; } .opt-panel__title { font-size: .76rem; } .opt-panel__sub { font-size: .68rem; } .opt-panel__body { padding: 8px 14px 14px; gap: 8px; } .opt-panel__hint { font-size: .74rem; padding: 7px 10px; line-height: 1.3; } .opt-panel__field label { font-size: .62rem; } .opt-panel__input { font-size: .82rem; padding: 6px 9px; line-height: 1.3; } .opt-panel__sep { margin: 6px 0 2px; } .opt-panel__sep span { font-size: .62rem; } /* Scenario cards: extra compact so a couple fit in the half-sheet */ .opt-plan { padding: 9px 10px; } .opt-plan__name { font-size: .9rem; } .opt-plan__desc { font-size: .7rem; margin-top: 1px; } .opt-plan__saved-num { font-size: 1.1rem; } .opt-plan__saved-label { font-size: .55rem; } .opt-plan__stats { font-size: .68rem; margin: 5px 0 3px; } .opt-plan__highlights { font-size: .65rem; gap: 1px; } .opt-plan__highlights li { padding-left: 11px; line-height: 1.25; } .opt-plan__actions .btn { font-size: .76rem; padding: 6px 10px; } .opt-plan__applied-hint { font-size: .62rem; } /* Tighten the inner content so more fits before scrolling */ .opt-panel__head { padding: 10px 14px 8px; } .opt-panel__title { font-size: .76rem; } .opt-panel__sub { font-size: .68rem; } .opt-panel__body { padding: 10px 14px 14px; gap: 8px; } .opt-panel__hint { font-size: .76rem; padding: 8px 10px; line-height: 1.35; } .opt-panel__field label { font-size: .62rem; } .opt-panel__input { font-size: .82rem; padding: 6px 9px; line-height: 1.35; } .opt-panel__sep { margin: 6px 0 2px; } .opt-panel__sep span { font-size: .62rem; } /* Scenario cards: compact on mobile */ .opt-plan { padding: 10px; } .opt-plan__name { font-size: .94rem; } .opt-plan__desc { font-size: .72rem; margin-top: 1px; } .opt-plan__saved-num { font-size: 1.2rem; } .opt-plan__saved-label { font-size: .55rem; } .opt-plan__stats { font-size: .72rem; margin: 6px 0 4px; } .opt-plan__highlights { font-size: .7rem; } .opt-plan__highlights li { padding-left: 12px; line-height: 1.3; } .opt-plan__actions .btn { font-size: .78rem; padding: 6px 10px; } .opt-plan__applied-hint { font-size: .65rem; } /* --- Outbox ------------------------------------------- */ /* The list+preview becomes a single column where the preview pane drops below the list. The preview's sticky position is removed so it sits inline. */ .outbox-preview { position: static !important; } /* --- Archive ------------------------------------------ */ /* Filter sidebar above results */ .archive-filters { position: static; } /* --- Detail-page sticky action bar -------------------- */ .action-bar { flex-wrap: wrap; margin: 16px -14px; padding: 10px 14px; } .action-bar .btn { font-size: .82rem; padding: 7px 12px; } /* --- Modal sizing ------------------------------------- */ .modal { max-width: 100%; max-height: 100vh; border-radius: 0; } .modal__head { padding: 14px 16px 8px; } .modal__head h2 { font-size: 1rem; } .modal__body { padding: 4px 16px 14px; } .modal__foot { padding: 10px 16px; flex-wrap: wrap; } .modal__foot .btn { font-size: .82rem; padding: 7px 12px; } /* --- Touch-action: stop browser pan during card drags - */ .disp__card, .disp__week-mini, .disp__month-evt, .evt { touch-action: none; } /* Backboards remain pan-scrollable */ .disp__board-wrap, .disp__week-matrix-wrap, .disp__month { touch-action: pan-x pan-y; } } /* Product row — wrap inputs+buttons on mobile so they don't get crushed */ @media (max-width: 800px) { .product-row { flex-wrap: wrap; row-gap: 6px; } .product-row input { font-size: .85rem; } } /* Very narrow phones — extra clamps */ @media (max-width: 420px) { .disp__board { grid-template-columns: repeat(var(--n, 4), minmax(165px, 1fr)) !important; } .disp__week-matrix { grid-template-columns: 100px repeat(7, minmax(95px, 1fr)) !important; } .pending-bar__count { font-size: 1rem; } .h1 { font-size: 1.3rem; } }