/*
 * Title-block preview (resources/views/filament/title-block-preview.blade.php, project page -> Title block ->
 * Template -> Preview). Registered with FilamentAsset and published by `php artisan filament:assets`; plain CSS on
 * Filament's colour variables (--gray-*, --primary-*, --danger-*), light and dark. The sheet itself is paper: white
 * in both modes, with the values in black like the printed sheet.
 */

/* The full-screen modal: its content fills the window and the preview fills the content. */
.tbp-modal .fi-modal-content { min-height: 0; padding-block: .75rem; }
.tbp { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: var(--gray-950, #030712); }
.dark .tbp { color: #fff; }
.tbp-empty { color: var(--gray-500, #6b7280); }

/* toolbar */
.tbp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.tbp-zoom { display: inline-flex; align-items: center; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .5rem; padding: 1px; }
.dark .tbp-zoom { border-color: rgb(255 255 255 / .12); }
.tbp-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.875rem; padding: 0 .5rem; border: 0; border-radius: .4rem; background: transparent; color: var(--gray-600, #4b5563); font: inherit; font-weight: 500; font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.tbp-btn:hover { background: var(--gray-100, #f3f4f6); color: var(--gray-950, #030712); }
.dark .tbp-btn { color: var(--gray-300, #d1d5db); }
.dark .tbp-btn:hover { background: rgb(255 255 255 / .06); color: #fff; }
.tbp-btn:focus-visible { outline: 2px solid var(--primary-500, #3b82f6); outline-offset: -1px; }
.tbp-btn svg { width: 1rem; height: 1rem; }
.tbp-zoom-level { min-width: 3.75rem; }
.tbp-fit.is-active { background: var(--primary-50, #eff6ff); color: var(--primary-700, #1d4ed8); }
.dark .tbp-fit.is-active { background: rgb(255 255 255 / .08); color: var(--primary-300, #93c5fd); }

.tbp-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--gray-600, #4b5563); }
.dark .tbp-legend { color: var(--gray-400, #9ca3af); }
.tbp-legend li { display: inline-flex; align-items: center; gap: .375rem; }
.tbp-count { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-950, #030712); }
.dark .tbp-count { color: #fff; }
.tbp-swatch { width: .75rem; height: .75rem; border-radius: .2rem; border: 1px solid var(--gray-300, #d1d5db); background: #fff; }
.tbp-legend .is-value .tbp-swatch { background: #111; border-color: #111; }
.tbp-legend .is-drawing .tbp-swatch { background: var(--gray-300, #d1d5db); border-color: var(--gray-400, #9ca3af); }
.tbp-legend .is-missing .tbp-swatch { background: var(--danger-600, #dc2626); border-color: var(--danger-600, #dc2626); }
.tbp-legend .is-blank .tbp-swatch { background: #fff; border-style: dashed; }
.dark .tbp-legend .is-value .tbp-swatch { border-color: var(--gray-400, #9ca3af); }

.tbp-status { margin: 0; font-size: .8125rem; color: var(--gray-500, #6b7280); }
.tbp-status.is-error { color: var(--danger-600, #dc2626); }
.dark .tbp-status.is-error { color: var(--danger-400, #f87171); }
.tbp-note { margin: 0; font-size: .8125rem; color: var(--gray-500, #6b7280); }

/* the desk the sheet lies on: scrolls when zoomed in */
.tbp-viewport { position: relative; flex: 1; min-height: 20rem; overflow: auto; border-radius: .5rem; background: var(--gray-100, #f3f4f6); overscroll-behavior: contain; }
.dark .tbp-viewport { background: var(--gray-950, #09090b); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.tbp-viewport:focus-visible { outline: 2px solid var(--primary-500, #3b82f6); outline-offset: 2px; }
.tbp-stage { display: flex; box-sizing: border-box; min-width: 100%; min-height: 100%; width: max-content; padding: 1rem; }
.tbp-sheet { position: relative; flex: none; margin: auto; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .18), 0 8px 24px rgb(0 0 0 / .12); }
.dark .tbp-sheet { box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 8px 24px rgb(0 0 0 / .5); }
.tbp-canvas, .tbp-canvas canvas, .tbp-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the values, in PDF points (the SVG's viewBox is the page) */
.tbp-overlay { overflow: visible; font-family: Arial, 'Liberation Sans', Helvetica, sans-serif; }
/* Widths are pinned with textLength (title-block-preview.js), so hinting at small sizes cannot widen the text. */
.tbp-overlay text { white-space: pre; }
.tbp-mask { fill: #fff; }
.tbp-value { fill: #000; }
.tbp-field.is-drawing .tbp-ph { fill: var(--gray-400, #9ca3af); }
.tbp-field.is-missing .tbp-ph { fill: var(--danger-600, #dc2626); }
.tbp-field.is-missing .tbp-hit { fill: var(--danger-500, #ef4444); fill-opacity: .07; }
.tbp-value.is-overflow { fill: var(--danger-700, #b91c1c); }
.tbp-logo-fallback { display: none; }
.tbp-field.is-logo-missing .tbp-logo { display: none; }
.tbp-field.is-logo-missing .tbp-logo-fallback { display: inline; fill: var(--danger-600, #dc2626); }
.tbp-hit { fill: transparent; stroke: transparent; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: all; }
.tbp-field.has-warning .tbp-hit { stroke: var(--danger-500, #ef4444); stroke-dasharray: 3 2; }
.tbp-field:hover .tbp-hit { stroke: var(--primary-500, #3b82f6); stroke-dasharray: none; fill: var(--primary-500, #3b82f6); fill-opacity: .06; }