/* --------------------------------------------------------------------------- * Tailwind v4 -> v3 parity shims * * The React source builds with Tailwind v4; this port loads the v3 Play CDN * (partials/header.php). Two v4 behaviours the v3 CDN does not provide are * restated here so the rendered page matches the source. Verified by measuring * both apps in a real browser, not by reading class names. * ------------------------------------------------------------------------- */ /* 1. FONT-SIZE / LINE-HEIGHT PAIRING. * v3 pairs each font-size utility with an ABSOLUTE line-height * (.text-xs { font-size:.75rem; line-height:1rem }), so a smaller * descendant - text-[10px], text-[9px] - inherits a fixed 16px line box. * v4 pairs them with UNITLESS ratios (calc(1 / 0.75)), so the descendant * scales its own line box instead. Restating v4's ratios leaves each * element's OWN computed line-height byte-identical (0.75rem * 4/3 = 1rem) * and only corrects what descendants inherit. Without this, dense rows run * 2-3px taller per line than the source (e.g. the admin permission matrix * measured 59px/row here vs 56px/row in React). * The :not() guard keeps an explicit leading-* utility winning, as in v4. */ .text-xs:not([class*="leading-"]) { line-height: calc(1 / 0.75); } .text-sm:not([class*="leading-"]) { line-height: calc(1.25 / 0.875); } .text-base:not([class*="leading-"]) { line-height: calc(1.5 / 1); } .text-lg:not([class*="leading-"]) { line-height: calc(1.75 / 1.125); } .text-xl:not([class*="leading-"]) { line-height: calc(1.75 / 1.25); } .text-2xl:not([class*="leading-"]) { line-height: calc(2 / 1.5); } .text-3xl:not([class*="leading-"]) { line-height: calc(2.25 / 1.875); } @media (min-width: 640px) { .sm\:text-sm:not([class*="leading-"]) { line-height: calc(1.25 / 0.875); } .sm\:text-lg:not([class*="leading-"]) { line-height: calc(1.75 / 1.125); } .sm\:text-2xl:not([class*="leading-"]) { line-height: calc(2 / 1.5); } } /* 2. SHADOW SCALE. * v4 renamed the scale: its shadow-xs is v3's shadow-sm, its shadow-sm is * v3's bare shadow, and shadow-2xs is new. The port's markup uses the v4 * names, so .shadow-xs / .shadow-2xs / .hover:shadow-xs currently resolve to * nothing at all (box-shadow: none) and .shadow-sm renders v3's much fainter * value. These use v3's own --tw-shadow composition so ring-* utilities on * the same element still compose (e.g. shadow-xs + ring-2 in trs_cards_view). */ .shadow-2xs { --tw-shadow: 0 1px rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-xs, .hover\:shadow-xs:hover { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } /* 3. space-y-* AND LEADING HIDDEN INPUTS. * v4 spaces with `> :not(:last-child) { margin-bottom }`, so a display:none * child contributes no gap. v3 uses `> :not([hidden]) ~ :not([hidden]) * { margin-top }` - and an has no `hidden` ATTRIBUTE, * so it still counts as a spacing sibling. Every form here that opens with * csrf_field() therefore pushes its first visible child down by the full * gap (measured: the Telegram credentials card sat 20px lower than the * source). Zero that stray margin on the first visible child only; a hidden * input BETWEEN two visible children is left alone, since v3 and v4 agree * there. */ [class*="space-y-"][class] > input[type="hidden"]:first-child + :not([hidden]), [class*="space-y-"][class] > input[type="hidden"]:first-child + input[type="hidden"] + :not([hidden]), [class*="space-y-"][class] > input[type="hidden"]:first-child + input[type="hidden"] + input[type="hidden"] + :not([hidden]), [class*="space-y-"][class] > input[type="hidden"]:first-child + input[type="hidden"] + input[type="hidden"] + input[type="hidden"] + :not([hidden]) { margin-top: 0; } /* 4. space-y-* GAP vs A CHILD'S OWN mt-*. * v4 emits the gap as margin-bottom on the PREVIOUS sibling, so a child's * own mt-* ADDS to it (8px + 4px = 12px). v3 emits margin-top on the child * with higher specificity than .mt-1, so it REPLACES it (8px). Rewriting * all 165 space-y containers to v4's model would risk shifting spacing * app-wide, so restore the sum only where the two actually combine: the * empty-state "Start New Report" / "Start New Task" buttons. * (Measured: 12px in React vs 8px here before this rule.) */ .space-y-2.space-y-2 > :not([hidden]) ~ .mt-1 { margin-top: 0.75rem; } .badge-success { background: #d1fae5; color: #047857; } .badge-info { background: #dbeafe; color: #1d4ed8; } .badge-warning { background: #fef3c7; color: #b45309; } .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; } .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .sig-canvas { touch-action: none; cursor: crosshair; background: linear-gradient(0deg, transparent 24%, rgba(148,163,184,.15) 25%, rgba(148,163,184,.15) 26%, transparent 27%, transparent 74%, rgba(148,163,184,.15) 75%, rgba(148,163,184,.15) 76%, transparent 77%, transparent), #fff; } @media print { .no-print { display: none !important; } body { background: #fff !important; } .printable-document { box-shadow: none !important; border: none !important; } }