/* ── PbxDatePicker ────────────────────────────────────────────────────────── The CRM's one calendar (Shared/PbxDatePicker.razor + js/datePicker.js). It shares its palette, radii, shadow and pop-in with the range picker in daterangepicker.css, so a single date and a date range read as the same control. Global rather than scoped CSS on purpose: `[data-theme="dark"] ::deep` never matches (the scope attribute lands on ), and the popup renders in the top layer where only inherited custom properties reach it — every colour below is a theme variable. Every button here sets padding, background, colour and border explicitly: app.css has a bare `button { padding: .75rem; background: #6c63ff; color: #fff }`. */ /* ── Field ─────────────────────────────────────────────────────────────────*/ .pbx-dp { position: relative; display: block; min-width: 0; } .pbx-dp > .pbx-dp-input { width: 100%; padding-right: 2.1rem; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .pbx-dp > .pbx-dp-input::placeholder { color: var(--text-muted, #9ca3af); opacity: 1; } .pbx-dp > .pbx-dp-toggle, .pbx-dp > .pbx-dp-clear { position: absolute; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted, #9ca3af); font-size: 0.9rem; font-weight: 400; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .pbx-dp > .pbx-dp-toggle { right: 4px; } .pbx-dp > .pbx-dp-clear { right: 29px; width: 22px; height: 22px; font-size: 0.62rem; opacity: 0; pointer-events: none; } .pbx-dp > .pbx-dp-toggle:hover, .pbx-dp > .pbx-dp-clear:hover { background: var(--tab-hover-bg, rgba(17, 24, 39, 0.055)); color: var(--text-primary, #1f2937); } .pbx-dp.is-open > .pbx-dp-toggle { color: var(--accent-ink, #605bac); } .pbx-dp > .pbx-dp-toggle:disabled { cursor: default; opacity: 0.5; background: transparent; } /* The inline × only where there is a hover to reveal it; touch clears from the popup. */ @media (hover: hover) { .pbx-dp:hover > .pbx-dp-clear { opacity: 1; pointer-events: auto; } } /* ── Popup ───────────────────────────────────────────────────────────────── `inset: auto; margin: 0` undo the popover UA centring; datePicker.js sets left/top. */ @keyframes pbx-dp-pop-in { 0% { opacity: 0; translate: 0 var(--pbx-dp-from, -8px); scale: 0.96; } 60% { opacity: 1; translate: 0 1px; scale: 1.005; } 100% { opacity: 1; translate: 0 0; scale: 1; } } .pbx-dp-pop { position: fixed; inset: auto; margin: 0; z-index: 2000; box-sizing: border-box; width: max-content; height: auto; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 10px; border: 1px solid var(--border-color, #e5e7eb); border-radius: var(--radius-lg, 14px); background: var(--bg-card, #fff); color: var(--text-primary, #1f2937); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13), 0 4px 12px rgba(0, 0, 0, 0.06); font-family: inherit; font-size: 0.8rem; line-height: 1.35; text-align: left; transform-origin: top left; animation: pbx-dp-pop-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .pbx-dp-pop.is-up { --pbx-dp-from: 8px; transform-origin: bottom left; } [data-theme="dark"] .pbx-dp-pop { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.32); } @media (prefers-reduced-motion: reduce) { .pbx-dp-pop { animation: none; } } .pbx-dp-pop button { font-family: inherit; margin: 0; box-shadow: none; -webkit-tap-highlight-color: transparent; } .pbx-dp-pop button:focus { outline: none; } .pbx-dp-pop button:focus-visible { outline: 2px solid var(--accent, #605bac); outline-offset: 1px; } .pbx-dp-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; } /* ── Header ────────────────────────────────────────────────────────────────*/ .pbx-dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 34px; margin-bottom: 6px; } .pbx-dp-pop .pbx-dp-title { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-primary, #1f2937); font-size: 0.9rem; font-weight: 650; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; } .pbx-dp-pop .pbx-dp-title i { font-size: 0.66rem; color: var(--text-muted, #9ca3af); transition: rotate 0.2s ease; } .pbx-dp-pop[data-view="months"] .pbx-dp-title i, .pbx-dp-pop[data-view="years"] .pbx-dp-title i { rotate: 180deg; } .pbx-dp-nav { display: flex; gap: 2px; } .pbx-dp-pop .pbx-dp-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary, #6b7280); font-size: 0.85rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .pbx-dp-pop .pbx-dp-title:hover, .pbx-dp-pop .pbx-dp-arrow:hover { background: var(--tab-hover-bg, rgba(17, 24, 39, 0.055)); color: var(--text-primary, #1f2937); } /* ── Views: one fixed height, so switching days / months / years never jumps ──*/ .pbx-dp-view { width: 266px; height: 250px; } .pbx-dp-week, .pbx-dp-grid { display: grid; grid-template-columns: repeat(7, 38px); } .pbx-dp-week { height: 28px; align-items: center; } .pbx-dp-week span { text-align: center; color: var(--text-muted, #9ca3af); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* Saturday and Sunday headers a touch softer, like a paper calendar. */ .pbx-dp-week span:nth-child(n + 6) { opacity: 0.7; } .pbx-dp-grid { grid-auto-rows: 34px; row-gap: 2px; } .pbx-dp-pop .pbx-dp-day { display: flex; align-items: center; justify-content: center; width: 36px; height: 34px; justify-self: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary, #1f2937); font-size: 0.8rem; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } .pbx-dp-pop .pbx-dp-day:hover { background: var(--tab-hover-bg, rgba(17, 24, 39, 0.055)); } .pbx-dp-pop .pbx-dp-day.is-outside { color: var(--text-muted, #9ca3af); opacity: 0.6; } /* Today: a ring rather than a fill, so it stays legible next to the selection. */ .pbx-dp-pop .pbx-dp-day.is-today:not(.is-selected), .pbx-dp-pop .pbx-dp-tile.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1.5px var(--accent-ink, #605bac); color: var(--accent-ink, #605bac); font-weight: 700; } .pbx-dp-pop .pbx-dp-day.is-selected, .pbx-dp-pop .pbx-dp-tile.is-selected, .pbx-dp-pop .pbx-dp-cell.is-selected { background: var(--accent, #605bac); color: #fff; font-weight: 600; opacity: 1; box-shadow: 0 3px 10px rgba(96, 91, 172, 0.32); } [data-theme="dark"] .pbx-dp-pop .pbx-dp-day.is-selected, [data-theme="dark"] .pbx-dp-pop .pbx-dp-tile.is-selected, [data-theme="dark"] .pbx-dp-pop .pbx-dp-cell.is-selected { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); } .pbx-dp-pop .pbx-dp-day.is-selected:hover, .pbx-dp-pop .pbx-dp-tile.is-selected:hover, .pbx-dp-pop .pbx-dp-cell.is-selected:hover { background: var(--accent-hover, #504c97); } .pbx-dp-pop .pbx-dp-day.is-disabled, .pbx-dp-pop .pbx-dp-day.is-disabled:hover { background: transparent; color: var(--text-muted, #9ca3af); opacity: 0.35; box-shadow: none; cursor: not-allowed; } /* Month and year tiles fill the same box as the day grid. */ .pbx-dp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; height: 100%; padding-top: 4px; box-sizing: border-box; } .pbx-dp-pop .pbx-dp-tile { padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary, #1f2937); font-size: 0.82rem; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .pbx-dp-pop .pbx-dp-tile:hover { background: var(--tab-hover-bg, rgba(17, 24, 39, 0.055)); } /* ── Time columns ──────────────────────────────────────────────────────────*/ .pbx-dp-time { display: flex; gap: 4px; } .pbx-dp-cal + .pbx-dp-time { padding-left: 10px; border-left: 1px solid var(--border-color, #e5e7eb); } .pbx-dp-col-wrap { display: flex; flex-direction: column; width: 54px; } .pbx-dp-col-head { display: flex; align-items: center; justify-content: center; height: 34px; margin-bottom: 6px; color: var(--text-muted, #9ca3af); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .pbx-dp-col { position: relative; /* offsetTop of the rows is measured against this */ display: flex; flex-direction: column; gap: 2px; height: 250px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } .pbx-dp-col::-webkit-scrollbar { display: none; } /* Time on its own: no calendar to match, so a shorter column. */ .pbx-dp-body > .pbx-dp-time:first-child .pbx-dp-col { height: 212px; } .pbx-dp-pop .pbx-dp-cell { flex: 0 0 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-primary, #1f2937); font-size: 0.8rem; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .pbx-dp-pop .pbx-dp-cell:hover { background: var(--tab-hover-bg, rgba(17, 24, 39, 0.055)); } /* ── Footer ────────────────────────────────────────────────────────────────*/ .pbx-dp-foot { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color, #e5e7eb); } .pbx-dp-spacer { flex: 1 1 auto; } .pbx-dp-pop .pbx-dp-link, .pbx-dp-pop .pbx-dp-done { height: 30px; padding: 0 11px; border: 0; border-radius: 8px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .pbx-dp-pop .pbx-dp-link { background: transparent; color: var(--accent-ink, #605bac); } .pbx-dp-pop .pbx-dp-link.is-muted { color: var(--text-secondary, #6b7280); } .pbx-dp-pop .pbx-dp-link:hover { background: var(--tab-hover-bg, rgba(17, 24, 39, 0.055)); } .pbx-dp-pop .pbx-dp-done { background: var(--accent, #605bac); color: #fff; } .pbx-dp-pop .pbx-dp-done:hover { background: var(--accent-hover, #504c97); } /* ── Phones ──────────────────────────────────────────────────────────────── Calendar plus time is ~400px; below that the time drops under the calendar. */ @media (max-width: 440px) { .pbx-dp-cal + .pbx-dp-time { flex: 1 1 100%; padding-left: 0; padding-top: 8px; border-left: 0; border-top: 1px solid var(--border-color, #e5e7eb); } .pbx-dp-cal + .pbx-dp-time .pbx-dp-col-wrap { flex: 1 1 0; width: auto; } .pbx-dp-cal + .pbx-dp-time .pbx-dp-col-head { height: 20px; margin-bottom: 2px; } .pbx-dp-cal + .pbx-dp-time .pbx-dp-col { height: 136px; } } @media (max-width: 340px) { .pbx-dp-view { width: 252px; } .pbx-dp-week, .pbx-dp-grid { grid-template-columns: repeat(7, 36px); } .pbx-dp-pop .pbx-dp-day { width: 34px; } }