/* * Supplement to the captured Time2book stylesheet (vendor/time2book/app.css). * 1) Utilities the purged source build lacks, written with the same Tailwind names/values. * 2) Small TCS hooks: class colours (data), checkbox/radio marks, focus visibility, dialogs, Japanese font fallback. * No new visual language: values follow the source tokens (neutral-900 #171717, radii 10/12/16px, Inter Variable). */ /* Japanese text: Inter has no CJK glyphs; use the platform's Japanese UI fonts honestly (nothing downloaded). */ :lang(ja) body, :lang(ja) button, :lang(ja) input, :lang(ja) select, :lang(ja) textarea {font-family: "Inter Variable", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;} body {background: #fff; color: #171717;} /* Missing utilities (Tailwind v3 semantics) */ .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;} .invisible-scrollbar {scrollbar-width: none;} .invisible-scrollbar::-webkit-scrollbar {display: none;} .min-h-\[60px\] {min-height: 60px;} .min-h-\[44px\] {min-height: 44px;} .min-h-\[96px\] {min-height: 96px;} .basis-40 {flex-basis: 10rem;} .-m-3 {margin: -.75rem;} .\!h-auto {height: auto !important;} .resize-y {resize: vertical;} .pr-9 {padding-right: 2.25rem;} .pt-0\.5 {padding-top: .125rem;} .border-y {border-top-width: 1px; border-bottom-width: 1px;} .hover\:bg-red-100:hover {background-color: rgb(254 226 226);} .break-words {overflow-wrap: break-word;} @media (min-width: 768px) {.md\:border-y-0 {border-top-width: 0; border-bottom-width: 0;} .md\:inline {display: inline;}} @media (min-width: 1024px) {.lg\:mx-0 {margin-left: 0; margin-right: 0;} .lg\:px-0 {padding-left: 0; padding-right: 0;}} /* Focus visibility: the source removes outlines on buttons; restore a neutral ring for keyboard users. */ :focus-visible {outline: 2px solid #171717 !important; outline-offset: 2px !important;} input:focus-visible, select:focus-visible, textarea:focus-visible {outline-offset: 0 !important;} /* Class colours are data (Time2book stores a colour per service). Default = the source sky card. */ .tcs-card {background: var(--tcs-50, #f0f9ff);} a.tcs-card:hover {background: var(--tcs-100, #e0f2fe);} .tcs-bar {background: var(--tcs-300, #7dd3fc);} .tcs-ink {color: var(--tcs-950, #082f49);} .tcs-color-sky {--tcs-50: #f0f9ff; --tcs-100: #e0f2fe; --tcs-300: #7dd3fc; --tcs-950: #082f49;} .tcs-color-amber {--tcs-50: #fffbeb; --tcs-100: #fef3c7; --tcs-300: #fcd34d; --tcs-950: #451a03;} .tcs-color-violet {--tcs-50: #f5f3ff; --tcs-100: #ede9fe; --tcs-300: #c4b5fd; --tcs-950: #2e1065;} .tcs-color-emerald {--tcs-50: #ecfdf5; --tcs-100: #d1fae5; --tcs-300: #6ee7b7; --tcs-950: #022c22;} .tcs-color-neutral {--tcs-50: #fafafa; --tcs-100: #f5f5f5; --tcs-300: #d4d4d4; --tcs-950: #171717;} .tcs-dot {width: .75rem; height: .75rem; border-radius: 9999px; background: var(--tcs-300); flex-shrink: 0;} /* Checkbox / radio marks drawn over the source controls */ .tcs-check {position: relative;} .tcs-check-mark {position: absolute; color: #fff; pointer-events: none; display: none;} .tcs-check input:checked + .tcs-check-mark {display: block;} .tcs-check input:disabled:checked + .tcs-check-mark {color: #737373;} .tcs-radio-dot svg {display: none;} .tcs-radio-card:has(input:checked) {border-color: #171717; outline: 2px solid #171717; outline-offset: -1.5px;} .tcs-radio-card:has(input:checked) .tcs-radio-dot {background: #171717;} .tcs-radio-card:has(input:checked) .tcs-radio-dot svg {display: block;} .tcs-radio-card:has(input:focus-visible) {outline: 2px solid #171717; outline-offset: 2px;} /* Validation */ .tcs-invalid {border-color: #dc2626 !important;} .tcs-field-error {font-size: .875rem; line-height: 1.25rem; color: #b91c1c;} /* Dialogs: native carrying the source panel classes; the backdrop matches the source "bg-black/20" layer. */ dialog.tcs-dialog {padding: 0; margin: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;} /* Panel motion uses the acquired Time2book classes (right-transition / center-bottom-transition in vendor/time2book/transitions.css), applied by ui.js on open and before teardown. The source backdrop is a plain bg-black/20 layer; it fades with the panel's timing. */ dialog.tcs-dialog::backdrop {background: rgb(0 0 0 / .2); transition: opacity .2s cubic-bezier(.4, 0, .2, 1);} dialog.tcs-dialog[open]::backdrop {animation: tcs-backdrop-in .3s cubic-bezier(.4, 0, .2, 1);} @media (min-width: 1024px) {dialog.tcs-dialog[open]::backdrop {animation-duration: .2s;}} dialog.tcs-leaving::backdrop {opacity: 0;} dialog.tcs-dialog[data-closing] {pointer-events: none;} /* no second action while the sheet is leaving */ @keyframes tcs-backdrop-in {from {opacity: 0;}} /* Pinned sheet header and action footer (TCS adaptation of the source sheet, which scrolls as one piece): overflow: clip keeps the rounded corners without making the panel a scroll container, so sticky works inside the scrolling dialog. */ dialog.tcs-dialog .tcs-panel {overflow: clip;} .tcs-sheet-head {position: sticky; top: 0; background: #fff; margin: -1.5rem -1.5rem -1rem; padding: 1.5rem 1.5rem 1rem;} /* margin-top: auto keeps a short sheet's actions at the bottom of the sheet (the utility mt-auto would be overridden here). */ .tcs-sheet-foot {position: sticky; bottom: 0; background: #fff; margin: auto -1.5rem -1.5rem; padding: 1rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgb(23 23 23 / .1);} @media (min-width: 1024px) { .tcs-drawer .tcs-sheet-head {margin: -2.5rem -2.5rem -1rem; padding: 2.5rem 2.5rem 1rem;} .tcs-drawer .tcs-sheet-foot {margin: auto -2.5rem -2.5rem; padding: 1.25rem 2.5rem 2.5rem;} .tcs-modal .tcs-sheet-head {margin: -2rem -2rem -1rem; padding: 2rem 2rem 1rem;} .tcs-modal .tcs-sheet-foot {margin: auto -2rem -2rem; padding: 1.25rem 2rem 2rem; border-top-width: 0;} } /* The mobile sheet's drag handle sits above the pinned header. */ .tcs-panel > .md\:hidden {position: relative; z-index: 41;} @keyframes tcs-flash {from {background: #f0f9ff;} to {background: transparent;}} .tcs-updated {animation: tcs-flash .18s ease-out; border-radius: 6px;} /* Toast regions (07-booking-detail-attendees toast) */ .tcs-toasts [hidden] {display: none !important;} /* Mobile: the source bottom tab bar is fixed; keep page content above it. */ @media (max-width: 1023px) {.tcs-staff-main {padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));}} /* viewport-fit=cover: keep the fixed bar, toasts, pages and sheets clear of the home indicator and (landscape) the notch. */ @media (max-width: 1023px) { nav.ui-sidebar {left: 0; padding-bottom: calc(.25rem + env(safe-area-inset-bottom, 0px)); padding-left: max(.25rem, env(safe-area-inset-left, 0px)); padding-right: max(.25rem, env(safe-area-inset-right, 0px));} #toast.tcs-toasts {bottom: calc(5rem + env(safe-area-inset-bottom, 0px));} dialog.tcs-dialog [data-dialog-frame] {padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);} } body {padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);} .min-h-\[48px\] {min-height: 48px;} @media (prefers-reduced-motion: reduce) { *, *::before, *::after {animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;} } /* Skip link (visible on keyboard focus) and the first-paint placeholder */ .tcs-skip {position: absolute; left: 1rem; top: -4rem; z-index: 60; background: #171717; color: #fff; padding: .625rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 500;} .tcs-skip:focus {top: 1rem;} .tcs-loading {padding: 1.5rem; font-size: .875rem; opacity: .6;} /* More utilities the purged source build lacks (same Tailwind v3 names and values) */ .-mt-3 {margin-top: -.75rem;} .pt-3 {padding-top: .75rem;} .pr-4 {padding-right: 1rem;} .pb-14 {padding-bottom: 3.5rem;} .pl-\[42px\] {padding-left: 42px;} .w-40 {width: 10rem;} .w-max {width: max-content;} .max-w-2xl {max-width: 42rem;} .max-w-\[16rem\] {max-width: 16rem;} .size-1\.5 {width: .375rem; height: .375rem;} .right-3\.5 {right: .875rem;} .top-1\/2 {top: 50%;} .gap-y-2\.5 {row-gap: .625rem;} .gap-x-8 {column-gap: 2rem;} .leading-6 {line-height: 1.5rem;} .tracking-wide {letter-spacing: .025em;} .break-all {word-break: break-all;} .whitespace-normal {white-space: normal;} .whitespace-pre-wrap {white-space: pre-wrap;} .bg-yellow-500 {background-color: rgb(234 179 8);} .\!bg-white {background-color: #fff !important;} .pointer-events-auto {pointer-events: auto;} .hover\:decoration-neutral-900\/60:hover {text-decoration-color: rgb(23 23 23 / .6);} @media (min-width: 640px) {.sm\:grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr));} .sm\:items-end {align-items: flex-end;} .sm\:w-40 {width: 10rem;} .sm\:w-44 {width: 11rem;} .sm\:w-56 {width: 14rem;}} @media (min-width: 768px) {.md\:items-end {align-items: flex-end;} .md\:grid-cols-4 {grid-template-columns: repeat(4, minmax(0, 1fr));}} @media (min-width: 1024px) {.lg\:grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr));} .lg\:col-span-2 {grid-column: span 2 / span 2;} .lg\:gap-12 {gap: 3rem;} .lg\:p-5 {padding: 1.25rem;}} /* Today dashboard: on phones "Needs attention" follows today's classes; on desktop it is the right column (as before). */ @media (min-width: 768px) {.md\:pt-0 {padding-top: 0;}} @media (min-width: 1024px) { .tcs-dash {grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr;} .tcs-dash-today {grid-column: 1 / 3; grid-row: 1;} .tcs-dash-next {grid-column: 1 / 3; grid-row: 2;} .tcs-dash-side {grid-column: 3; grid-row: 1 / 3;} } /* The hidden attribute must win over display utilities (e.g. a hidden .flex list). */ [hidden] {display: none !important;} /* Headings receive focus after navigation so screen readers announce the new screen; they are not controls, so no ring. */ h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus {outline: none !important;} /* Disabled buttons read as unavailable (busy buttons keep full opacity while their label says "Please wait…"). */ button:disabled:not([aria-busy="true"]):not([data-busy="true"]) {opacity: .45; cursor: not-allowed;} /* The drawn radio dot sits over the real input; clicks pass through to it. */ .tcs-radio-dot {pointer-events: none;} /* Grid columns inside a screen may shrink below their content's min width (long names, wide tables scroll inside instead). */ .tcs-view .grid > * {min-width: 0;} .basis-56 {flex-basis: 14rem;} /* Current demo role card on the sign-in screen */ .tcs-current-role {border-color: rgb(23 23 23 / .5);} /* Phone labels: the source bottom bar uses 10px; TCS uses 11px for readability on a phone (documented adaptation). */ @media (max-width: 1023px) {.text-\[11px\] {font-size: 11px; line-height: 14px;}} /* below lg only, so lg:text-sm / lg:text-xs keep working */ /* Utilities used by the mobile refinement (same Tailwind names/values) */ .w-36 {width: 9rem;} .scroll-mt-4 {scroll-margin-top: 1rem;} .\!text-red-600 {color: rgb(220 38 38) !important;} @media (min-width: 640px) {.sm\:block {display: block;}} @media (min-width: 768px) {.md\:block {display: block;}} .\*\:flex-1 > * {flex: 1 1 0%;} /* Route details keep the original Time2book sheet, with one readable column at every viewport. */ .tcs-detail-content > section { display: flex; flex-direction: column; gap: 24px; padding-top: 0; } .tcs-detail-content > div:first-child:has(h1) { padding-top: 0; } .tcs-detail-content > div:first-child:has(h1) > a { display: none; } .tcs-detail-content h1 { font-size: 20px; line-height: 28px; } .tcs-detail-content > header { padding-top: 0; padding-bottom: 16px; } .tcs-detail-content > header > a { display: none; } .tcs-detail-content > header a:has(svg) { display: none; } [data-route-detail] [data-mobile-actions] { display: flex; padding-top: 0; width: 100%; } /* Custom dropdown (dropdown.js + t2b select()): the real