/* ============================================================================ Dog details slide-over panel Two things live here: 1. the #dogDetailsPanel chrome, which reuses Bootstrap's .offcanvas CSS, 2. the .dd-* field vocabulary the read-only body uses, which must be global because dogs/partials/profile-details.blade.php also renders full-page in dogs/show.blade.php. Why an offcanvas and not a second modal: a nested .modal cannot work in this app. partials/datatable.blade.php refuses to show one while another modal is open, its hidden.bs.modal handler removes the booking modal outright, layouts/app.blade.php has a global bubble-phase Escape that hides any .modal.show, and select2-fix.css forces .modal-backdrop to z-index 1040 and hides sibling backdrops. .offcanvas-backdrop is a different class, so none of that applies to it. IMPORTANT: public/css/bootstrap.min.css is the RTL-compiled build (.me-3 { margin-left: 1rem }, .text-start { text-align: right }). Its .offcanvas.offcanvas-start is already { top: 0; right: 0; transform: translateX(100%) }, i.e. it slides in from the physical right, which is correct under dir="rtl". Do NOT add direction overrides here. ============================================================================ */ /* ---------- Panel chrome ---------- */ #dogDetailsPanel { --bs-offcanvas-width: min(480px, 92vw); --bs-offcanvas-bg: var(--bb-surface, #fff); --bs-offcanvas-color: var(--bb-text, #1e293b); /* The panel is appended INTO the open .modal, which select2-fix.css pins at position: fixed; z-index: 1050, making it its own stacking context. So the panel only has to clear its sibling .modal-dialog, which is z-index: auto. When there is no host modal the panel sits at level and Bootstrap's own --bs-offcanvas-zindex: 1045 applies instead. */ z-index: 2; } #dogDetailsPanel + .offcanvas-backdrop, .modal.show > .offcanvas-backdrop { z-index: 1; } #dogDetailsPanel .offcanvas-header { border-bottom: 1px solid var(--bb-border, #e2e8f0); background: var(--bb-surface-2, #f8fafc); padding: 0.75rem 1rem; } #dogDetailsPanel .offcanvas-title { font-size: var(--bb-fs-base, 1rem); font-weight: var(--bb-fw-semibold, 600); margin: 0; } #dogDetailsPanel .offcanvas-body { padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Stop a scroll that reaches the end of the panel from chaining to the booking form behind it, which on iOS reads as the page jumping under your thumb. */ overscroll-behavior: contain; /* Notched phones: the sheet is full-bleed at the bottom. */ padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } /* Loading and error states, both rendered by dog-details-panel.js */ .dd-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 180px; color: var(--bb-text-muted, #64748b); text-align: center; } /* ---------- Mobile: bottom sheet ---------- */ @media (max-width: 767.98px) { #dogDetailsPanel { /* dvh so the sheet does not jump when mobile Safari's toolbar collapses. vh fallback first for browsers without dvh. */ --bs-offcanvas-height: 88vh; --bs-offcanvas-height: 88dvh; border-top-right-radius: var(--bb-radius-lg, 16px); border-top-left-radius: var(--bb-radius-lg, 16px); } /* The grab handle. Purely decorative; the header close button is the real control. */ #dogDetailsPanel .offcanvas-header::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: var(--bb-border-strong, #cbd5e1); } #dogDetailsPanel .offcanvas-header { position: relative; padding-top: 1rem; border-top-right-radius: inherit; border-top-left-radius: inherit; } } /* ---------- Read-only field vocabulary ---------- */ .dd-body { font-size: var(--bb-fs-sm, 0.875rem); color: var(--bb-text, #1e293b); } .dd-head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--bb-border, #e2e8f0); margin-bottom: 0.75rem; } .dd-photo img { width: 64px; height: 64px; border-radius: var(--bb-radius, 12px); object-fit: cover; display: block; background: var(--bb-surface-2, #f8fafc); } .dd-head-text { min-width: 0; flex: 1; } .dd-name { margin: 0 0 0.35rem; font-size: var(--bb-fs-lg, 1.125rem); font-weight: var(--bb-fw-bold, 700); word-break: break-word; } .dd-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; } .dd-chip { background: var(--bb-primary-soft, #eff6ff); color: var(--bb-primary, #2563eb); font-weight: var(--bb-fw-medium, 500); font-size: var(--bb-fs-xs, 0.75rem); } .dd-warnings { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; } .dd-warning { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: var(--bb-radius-pill, 999px); background: var(--bb-warning-soft, #fef3c7); color: var(--bb-warning-hover, #92400e); font-size: var(--bb-fs-xs, 0.75rem); font-weight: var(--bb-fw-semibold, 600); } .dd-section { margin-bottom: 1.1rem; } .dd-section:last-child { margin-bottom: 0; } .dd-section-title { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; padding-bottom: 0.35rem; border-bottom: 2px solid color-mix(in srgb, var(--bb-primary, #2563eb) 12%, transparent); font-size: var(--bb-fs-xs, 0.75rem); font-weight: var(--bb-fw-bold, 700); letter-spacing: 0.06em; color: var(--bb-primary, #2563eb); text-transform: uppercase; } .dd-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.5rem; border-radius: var(--bb-radius-sm, 8px); background: var(--bb-surface-2, #f8fafc); height: 100%; } .dd-label { font-size: var(--bb-fs-xs, 0.75rem); color: var(--bb-text-subtle, #94a3b8); line-height: 1.2; } .dd-value { font-weight: var(--bb-fw-semibold, 600); word-break: break-word; white-space: pre-line; } .dd-value-danger { color: var(--bb-danger, #dc2626); } .dd-value-warn { color: var(--bb-warning-hover, #92400e); } .dd-note { display: block; font-size: var(--bb-fs-xs, 0.75rem); font-weight: 400; color: var(--bb-text-muted, #64748b); } .dd-paragraph { margin: 0; white-space: pre-line; word-break: break-word; } .dd-link { color: var(--bb-primary, #2563eb); text-decoration: none; } .dd-link:hover, .dd-link:focus-visible { text-decoration: underline; } .dd-link-out { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; font-size: var(--bb-fs-xs, 0.75rem); } .dd-files { display: flex; flex-direction: column; gap: 0.35rem; } .dd-file { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; padding: 0.45rem 0.7rem; border: 1px solid var(--bb-border, #e2e8f0); border-radius: var(--bb-radius-sm, 8px); background: var(--bb-surface, #fff); color: var(--bb-text, #1e293b); text-decoration: none; font-size: var(--bb-fs-xs, 0.75rem); /* 44px minimum touch target on phones */ min-height: 40px; } .dd-file:hover, .dd-file:focus-visible { border-color: var(--bb-primary, #2563eb); color: var(--bb-primary, #2563eb); } .dd-history { margin-top: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--bb-radius-sm, 8px); background: var(--bb-surface-2, #f8fafc); } .dd-history-title { font-size: var(--bb-fs-xs, 0.75rem); font-weight: var(--bb-fw-semibold, 600); color: var(--bb-text-muted, #64748b); margin-bottom: 0.3rem; } .dd-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; } .dd-history-list li { display: flex; gap: 0.5rem; font-size: var(--bb-fs-xs, 0.75rem); } .dd-history-date { font-weight: var(--bb-fw-semibold, 600); white-space: nowrap; /* Dates stack in a column and should align digit-for-digit. */ font-variant-numeric: tabular-nums; } .dd-history-type { color: var(--bb-text-muted, #64748b); } /* ---------- The trigger button on a dog card ---------- */ .js-dog-details { width: 100%; min-height: 44px; /* Kills the 300ms double-tap-zoom delay on the one control an owner taps most. */ touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in srgb, var(--bb-primary, #2563eb) 10%, transparent); } /* In calendar-details the trigger sits inline next to the dog name rather than filling a card, so it must not stretch. */ .dd-inline-trigger.js-dog-details { width: auto; min-height: 36px; } @media (prefers-reduced-motion: reduce) { #dogDetailsPanel { transition: none; } }