/** * Oodlins UI semantic tokens — light (default) and .dark on . * Tailwind falcon-* colors reference these via tailwind.oodlins.preset.js. */ :root { color-scheme: light; --ui-falcon-canvas: 249 250 253; --ui-falcon-surface: 255 255 255; --ui-falcon-light: 249 250 253; --ui-falcon-soft: 244 246 249; --ui-falcon-soft-muted: 237 242 249; --ui-falcon-border: 227 233 240; --ui-falcon-border-subtle: 237 242 249; --ui-falcon-text: 52 64 80; --ui-falcon-muted: 116 129 148; --ui-falcon-scrim: 52 64 80; --ui-falcon-primary: 44 123 229; --ui-falcon-primary-dark: 24 98 198; --ui-falcon-primary-soft: 230 239 252; --ui-falcon-success: 0 210 122; --ui-falcon-success-soft: 224 249 238; --ui-falcon-warning: 245 128 62; --ui-falcon-warning-soft: 253 238 228; --ui-falcon-danger: 230 55 87; --ui-falcon-danger-soft: 252 228 233; --ui-shadow-float: 0 8px 24px -4px rgba(52, 64, 80, 0.12), 0 0 0 1px rgba(52, 64, 80, 0.05); --ui-shadow-modal: 0 16px 48px -12px rgba(52, 64, 80, 0.16), 0 0 0 1px rgba(52, 64, 80, 0.05); --ui-avatar-lavender-soft: 237 232 247; --ui-avatar-lavender-ink: 91 75 180; --ui-avatar-teal-soft: 223 245 243; --ui-avatar-teal-ink: 13 110 102; --ui-avatar-amber-soft: 254 243 220; --ui-avatar-amber-ink: 180 83 9; --ui-avatar-blue-soft: 227 239 252; --ui-avatar-blue-ink: 30 90 168; --ui-avatar-rose-soft: 252 232 238; --ui-avatar-rose-ink: 180 35 90; --ui-avatar-blush-soft: 255 241 246; --ui-avatar-blush-ink: 168 108 128; --ui-avatar-sage-soft: 229 242 232; --ui-avatar-sage-ink: 47 111 74; } .dark { color-scheme: dark; --ui-falcon-canvas: 11 23 39; --ui-falcon-surface: 35 46 60; --ui-falcon-light: 26 35 50; --ui-falcon-soft: 20 30 44; --ui-falcon-soft-muted: 35 46 60; --ui-falcon-border: 52 64 80; --ui-falcon-border-subtle: 42 53 69; --ui-falcon-text: 237 242 249; --ui-falcon-muted: 157 169 187; --ui-falcon-scrim: 0 0 0; --ui-falcon-primary: 88 157 242; --ui-falcon-primary-dark: 44 123 229; --ui-falcon-primary-soft: 30 58 95; --ui-falcon-success: 0 210 122; --ui-falcon-success-soft: 16 58 44; --ui-falcon-warning: 245 128 62; --ui-falcon-warning-soft: 72 42 24; --ui-falcon-danger: 240 82 110; --ui-falcon-danger-soft: 72 32 42; --ui-shadow-float: 0 8px 24px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); --ui-shadow-modal: 0 16px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); --ui-avatar-lavender-soft: 52 44 78; --ui-avatar-lavender-ink: 210 198 245; --ui-avatar-teal-soft: 24 58 54; --ui-avatar-teal-ink: 143 216 205; --ui-avatar-amber-soft: 72 48 22; --ui-avatar-amber-ink: 252 191 120; --ui-avatar-blue-soft: 28 48 78; --ui-avatar-blue-ink: 147 186 235; --ui-avatar-rose-soft: 72 36 50; --ui-avatar-rose-ink: 245 168 195; --ui-avatar-blush-soft: 68 42 54; --ui-avatar-blush-ink: 248 198 214; --ui-avatar-sage-soft: 32 58 42; --ui-avatar-sage-ink: 158 210 175; } /* Page shell — canvas behind surface cards */ .ui-page-canvas { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-canvas) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } /* 12-column form/grid row — replaces bulk-migrated Bootstrap row layout */ .ui-grid-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem; } /* Typography scale — 4-level hierarchy (use ui-type-* in views; components compose these) * * Level 1 — Section title 24px / semibold ui-type-section-title, ui-type-page-title * Level 2 — Card title 18px / medium ui-type-card-title * Level 3 — Metadata 14px / regular ui-type-metadata, ui-type-body, ui-type-muted * Level 4 — Helper text 12px / regular ui-type-helper, ui-type-muted-sm, ui-type-field-label */ .ui-type-page-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-type-page-subtitle { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-type-section-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-type-card-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-type-metadata { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-type-field-label { margin-bottom: 0.25rem; display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 600; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-type-helper { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-type-body { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.5; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-type-table { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.5; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-type-table-head { font-size: 0.75rem; line-height: 1rem; font-weight: 600; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-type-muted { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-type-muted-sm { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-type-error { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .ui-type-overline { font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-type-metric-value { margin-top: 0.25rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; line-height: 1.25; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-type-title-md { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } /* Buttons — reset Bootstrap/Falcon inherited button styles inside migrated UI */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; border-width: 0px; background-color: transparent; font-weight: 600; color: inherit; outline: 2px solid transparent; outline-offset: 2px; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-btn:disabled { pointer-events: none; opacity: 0.6; } .ui-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; border: none; box-shadow: none; } :is(button, a).ui-btn.ui-btn-secondary { border: none; outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; text-decoration: none; } :is(button, a).ui-btn.ui-btn-secondary:hover, :is(button, a).ui-btn.ui-btn-secondary:active { outline-color: rgb(var(--ui-falcon-primary) / 0.35); box-shadow: none; text-decoration: none; } :is(button, a).ui-btn.ui-btn-secondary:focus, :is(button, a).ui-btn.ui-btn-secondary:focus-visible { outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } .ui-btn-primary { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-btn-primary:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.35); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-btn-primary:hover, .ui-btn-primary:active { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-dark) / var(--tw-bg-opacity, 1)); } .ui-btn-primary:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.35); } /* Uniform 1px outline — exterior borders anti-alias unevenly on white Falcon surfaces */ .ui-btn-secondary { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-btn-secondary:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-btn-secondary { outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } .ui-btn-secondary:hover, .ui-btn-secondary:active { background-color: rgb(var(--ui-falcon-primary-soft) / 0.4); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); outline-color: rgb(var(--ui-falcon-primary) / 0.35); box-shadow: none; } .ui-btn-secondary:focus, .ui-btn-secondary:focus-visible { outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } .ui-btn-secondary:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.2); } .ui-btn-outline-primary { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-btn-outline-primary:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-btn-outline-primary { outline: 1px solid rgb(var(--ui-falcon-primary)); outline-offset: -1px; box-shadow: none; } .ui-btn-outline-primary:hover, .ui-btn-outline-primary:active { background-color: rgb(var(--ui-falcon-primary-soft) / 0.4); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); outline-color: rgb(var(--ui-falcon-primary)); box-shadow: none; } .ui-btn-outline-primary:focus, .ui-btn-outline-primary:focus-visible { outline: 1px solid rgb(var(--ui-falcon-primary)); outline-offset: -1px; box-shadow: none; } .ui-btn-outline-primary:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.25); } :is(button, a).ui-btn.ui-btn-outline-primary { border: none; text-decoration: none; } .ui-btn-danger { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-btn-danger:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-btn-danger:hover, .ui-btn-danger:active { background-color: color-mix(in srgb, rgb(var(--ui-falcon-danger)) 88%, black); } .ui-btn-danger:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-danger) / 0.35); } .ui-btn-ghost { background-color: transparent; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-btn-ghost:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-btn-ghost { box-shadow: none; } .ui-btn-ghost:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-btn-ghost:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-border) / 1); } .ui-btn-link { background-color: transparent; padding-left: 0px; padding-right: 0px; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-btn-link:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-btn-link { box-shadow: none; } .ui-btn-link:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary-dark) / var(--tw-text-opacity, 1)); text-decoration-line: underline; } .ui-btn-link:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.35); } .ui-btn--loading { position: relative; cursor: wait; } .ui-btn--loading .ui-btn-spinner { display: inline-flex; flex-shrink: 0; } .ui-btn-sm { gap: 0.375rem; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; } .ui-btn-md { gap: 0.5rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; } .ui-btn-lg { gap: 0.5rem; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 1rem; line-height: 1.5rem; } .ui-btn-pagination-active { display: inline-flex; min-width: 2rem; align-items: center; justify-content: center; border-radius: 0.75rem; border-width: 0px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); padding-left: 0.625rem; padding-right: 0.625rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-btn-pagination-disabled { display: inline-flex; min-width: 2rem; align-items: center; justify-content: center; border-radius: 0.75rem; border-width: 0px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); padding-left: 0.625rem; padding-right: 0.625rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); opacity: 0.6; outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } /* Icon buttons */ .ui-icon-btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-width: 0px; background-color: transparent; color: inherit; outline: 2px solid transparent; outline-offset: 2px; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-icon-btn:disabled { pointer-events: none; opacity: 0.6; } .ui-icon-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; border: none; box-shadow: none; } .ui-icon-btn--circle.ui-icon-btn-sm { height: 2rem; width: 2rem; border-radius: 9999px; } .ui-icon-btn--circle.ui-icon-btn-md { height: 2.25rem; width: 2.25rem; border-radius: 9999px; } .ui-icon-btn--circle.ui-icon-btn-lg { height: 2.5rem; width: 2.5rem; border-radius: 9999px; } .ui-icon-btn-sm { font-size: 0.75rem; line-height: 1rem; line-height: 1; } /* Toolbar / page-header — square, same height as ui-btn-sm (h-10) */ .ui-icon-btn--square.ui-icon-btn-sm { height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; } .ui-icon-btn--square.ui-icon-btn-md { height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; } .ui-icon-btn--square.ui-icon-btn-lg { height: 2.75rem; width: 2.75rem; border-radius: 0.75rem; } button.ui-icon-btn.ui-icon-btn-default { border: none; outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } button.ui-icon-btn.ui-icon-btn-default:hover { outline-color: rgb(var(--ui-falcon-primary) / 0.25); box-shadow: none; } button.ui-icon-btn.ui-icon-btn-default:focus, button.ui-icon-btn.ui-icon-btn-default:focus-visible { outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } .ui-icon-btn-default { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-icon-btn-default:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-icon-btn-default { outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } .ui-icon-btn-default:hover { background-color: rgb(var(--ui-falcon-primary-soft) / 0.5); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); outline-color: rgb(var(--ui-falcon-primary) / 0.25); box-shadow: none; } .ui-icon-btn-default:focus, .ui-icon-btn-default:focus-visible { outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } .ui-icon-btn-default:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.2); } .ui-icon-btn-primary { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-icon-btn-primary:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-icon-btn-primary { box-shadow: none; } .ui-icon-btn-primary:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-icon-btn-primary:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.35); } .ui-icon-btn-ghost { background-color: transparent; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-icon-btn-ghost:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-icon-btn-ghost { box-shadow: none; } .ui-icon-btn-ghost:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-icon-btn-ghost:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-border) / 1); } /* Split button (Create + caret menu) */ .ui-split-btn { position: relative; display: inline-flex; } .ui-split-btn-main { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .ui-split-btn-toggle { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left-width: 1px; border-color: rgb(255 255 255 / 0.25); padding-left: 0.5rem; padding-right: 0.5rem; } .ui-split-btn-toggle.ui-btn-secondary { outline: none; border-left: 1px solid rgb(var(--ui-falcon-border)); } .ui-page-header-actions .ui-btn-sm { height: 2.5rem; } .ui-page-header-actions .ui-icon-btn--circle.ui-icon-btn-sm { height: 2.5rem; width: 2.5rem; } /* Form fields — reset Bootstrap/Falcon inherited input styles inside migrated UI */ .ui-field, .ui-select, .ui-search-input-field { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; box-shadow: none; font-size: 0.875rem; line-height: 1.25rem; } .ui-field { display: block; height: 2.5rem; width: 100%; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0px; padding-bottom: 0px; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-field::-moz-placeholder { color: rgb(var(--ui-falcon-muted) / 0.55); } .ui-field::placeholder { color: rgb(var(--ui-falcon-muted) / 0.55); } .ui-field:focus { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.2); } .ui-field:disabled { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } input.ui-field[type='date'], input.ui-field[type='number'], input.ui-field[type='time'], input.ui-field[type='datetime-local'] { -moz-appearance: none; appearance: none; -webkit-appearance: none; } input.ui-field[type='number']::-webkit-outer-spin-button, input.ui-field[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input.ui-field[type='number'] { -moz-appearance: textfield; } input.ui-field:-moz-read-only { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } input.ui-field[readonly], input.ui-field:read-only { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-textarea, textarea.ui-field { height: auto; min-height: 5rem; resize: vertical; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 0.75rem; line-height: 1rem; line-height: 1.5; } .ui-field--sm { height: 2.25rem; font-size: 0.75rem; line-height: 1rem; } .ui-field--error { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-danger) / var(--tw-border-opacity, 1)); } .ui-field--error:focus { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-danger) / var(--tw-border-opacity, 1)); --tw-ring-color: rgb(var(--ui-falcon-danger) / 0.25); } .ui-select { display: block; height: 2.5rem; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); background-position: right 0.75rem center; background-repeat: no-repeat; padding-left: 0.75rem; padding-right: 0.75rem; padding-inline-end: 2.25rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-select:focus { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.2); } .ui-select:disabled { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23748194' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-size: 16px 12px; } .dark .ui-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239da9bb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .ui-search-input { display: inline-flex; height: 2.5rem; width: 100%; align-items: center; gap: 0.5rem; border-radius: 9999px; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-search-input:focus-within { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.2); } .ui-search-input--disabled { cursor: not-allowed; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); } .ui-search-input-icon { pointer-events: none; flex-shrink: 0; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-search-input-field { min-width: 0px; flex: 1 1 0%; border-width: 0px; background-color: transparent; padding: 0px; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ui-search-input-field::-moz-placeholder { color: rgb(var(--ui-falcon-muted) / 0.55); } .ui-search-input-field::placeholder { color: rgb(var(--ui-falcon-muted) / 0.55); } .ui-search-input-field:disabled { cursor: not-allowed; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-search-input-clear { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-width: 0px; background-color: transparent; padding: 0px; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-search-input-clear:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } /* Search combobox — typeahead picker inside form fields (single-select) */ .ui-search-combobox { display: flex; flex-direction: column; gap: 0.5rem; } .ui-search-combobox--error .ui-search-input { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-danger) / var(--tw-border-opacity, 1)); } .ui-search-combobox-hint, .ui-search-combobox-empty { padding-top: 0.125rem; padding-bottom: 0.125rem; } .ui-search-combobox-results { margin: 0px; max-height: 12rem; list-style-type: none; overflow-y: auto; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 0px; } .ui-search-combobox-result { display: flex; width: 100%; cursor: pointer; align-items: center; justify-content: space-between; gap: 0.75rem; border-width: 0px; border-bottom-width: 1px; border-style: solid; border-color: rgb(var(--ui-falcon-border) / 0.65); background-color: transparent; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: left; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; } .ui-search-combobox-results li:last-child .ui-search-combobox-result { border-bottom-width: 0px; } .ui-search-combobox-result:hover, .ui-search-combobox-result:focus-visible { background-color: rgb(var(--ui-falcon-soft) / 0.65); outline: 2px solid transparent; outline-offset: 2px; } .ui-search-combobox-result__name { min-width: 0px; } .ui-field-label { margin-bottom: 0.25rem; display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 600; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); margin-bottom: 0px; } .ui-field-label .ui-field-required { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); margin-left: 0.125rem; } .ui-field-hint { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-top: 0px; } .ui-field-error { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); margin-top: 0px; } .ui-field-group { display: flex; flex-direction: column; gap: 0.5rem; } /* Quantity equation — qty ± adjustment = result (modals, stock adjustments) */ .ui-qty-equation-section { padding-top: 1rem; border-top: 1px solid rgb(var(--ui-falcon-border)); } .ui-qty-equation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; -moz-column-gap: 0.75rem; column-gap: 0.75rem; row-gap: 0.5rem; } .ui-qty-equation-part { min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; } .ui-qty-equation-operator { display: flex; align-items: center; justify-content: center; height: 2.5rem; font-size: 1.125rem; font-weight: 600; line-height: 1; color: rgb(var(--ui-falcon-muted)); -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media (max-width: 639px) { .ui-qty-equation { grid-template-columns: 1fr; } .ui-qty-equation-operator { height: auto; padding: 0.125rem 0; } } /* Checkbox / radio */ .ui-choice { display: inline-flex; cursor: pointer; align-items: flex-start; gap: 0.5rem; } .ui-choice--disabled { cursor: not-allowed; opacity: 0.6; } .ui-choice-input { margin-top: 0.125rem; height: 1rem; width: 1rem; flex-shrink: 0; accent-color: rgb(var(--ui-falcon-primary) / 1); } .ui-choice-input--error { accent-color: rgb(var(--ui-falcon-danger) / 1); } .ui-choice-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-choice-group { display: flex; flex-direction: column; gap: 0.5rem; } .ui-choice-group--inline { flex-direction: row; flex-wrap: wrap; gap: 1rem; } .ui-checkbox-row { display: flex; align-items: center; gap: 0.5rem; } .ui-checkbox { height: 1rem; width: 1rem; flex-shrink: 0; cursor: pointer; accent-color: rgb(var(--ui-falcon-primary) / 1); } .ui-checkbox--error { accent-color: rgb(var(--ui-falcon-danger) / 1); } /* Date / time inputs */ .ui-date-input-wrap { position: relative; } .ui-date-input { min-width: 0px; padding-inline-end: 2.25rem; line-height: 2.5rem; } .ui-date-input::-webkit-date-and-time-value { display: flex; align-items: center; min-height: 2.5rem; line-height: 2.5rem; margin: 0; padding-top: 0; padding-bottom: 0; } .ui-date-input-icon { pointer-events: none; position: absolute; top: 0px; bottom: 0px; right: 0.75rem; display: flex; align-items: center; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-date-input-wrap:has(.ui-date-input:disabled) .ui-date-input-icon { opacity: 0.6; } .ui-date-input::-webkit-calendar-picker-indicator { position: absolute; right: 0px; top: 0px; margin: 0px; height: 100%; width: 2.5rem; cursor: pointer; padding: 0px; opacity: 0; } .ui-date-input::-webkit-calendar-picker-indicator:hover { opacity: 0; } /* Native multi-select — no chevron; keep browser listbox chrome */ .ui-select--multiple { height: auto; min-height: 5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-inline-end: 0.75rem; -moz-appearance: auto; appearance: auto; -webkit-appearance: listbox; background-image: none !important; } .ui-select--multiple option { border-radius: 0.25rem; padding-left: 0.25rem; padding-right: 0.25rem; padding-top: 0.125rem; padding-bottom: 0.125rem; } /* File upload */ .ui-file-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ui-file-upload--error .ui-file-upload-trigger { outline-style: solid; outline-width: 1px; outline-offset: -1px; outline-color: rgb(var(--ui-falcon-danger) / 1); } .ui-file-upload-name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } /* TipTap rich text editor */ .ui-rich-text { overflow: hidden; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-rich-text--focused { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.2); } .ui-rich-text--error { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-danger) / var(--tw-border-opacity, 1)); } .ui-rich-text--error.ui-rich-text--focused { --tw-ring-color: rgb(var(--ui-falcon-danger) / 0.25); } .ui-rich-text-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.375rem; padding-bottom: 0.375rem; } .ui-rich-text-btn { display: inline-flex; height: 1.75rem; width: 1.75rem; cursor: pointer; align-items: center; justify-content: center; border-radius: 0.5rem; border-width: 0px; background-color: transparent; font-size: 11px; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-rich-text-btn:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft-muted) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-rich-text-btn--label { width: auto; min-width: 1.75rem; padding-left: 0.375rem; padding-right: 0.375rem; font-size: 10px; } .ui-rich-text-btn.is-active { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-rich-text-divider { margin-left: 0.125rem; margin-right: 0.125rem; height: 1.25rem; width: 1px; flex-shrink: 0; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-bg-opacity, 1)); } .ui-rich-text-body { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-rich-text-prosemirror, .ui-rich-text-body .ProseMirror { min-height: 5rem; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 0.75rem; line-height: 1rem; line-height: 1.5; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); outline: 2px solid transparent; outline-offset: 2px; } .ui-rich-text-prosemirror p, .ui-rich-text-body .ProseMirror p { margin: 0px; margin-bottom: 0.5rem; } .ui-rich-text-prosemirror p:last-child, .ui-rich-text-body .ProseMirror p:last-child { margin-bottom: 0px; } .ui-rich-text-prosemirror h2, .ui-rich-text-body .ProseMirror h2 { margin-bottom: 0.5rem; margin-top: 0px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-rich-text-prosemirror h3, .ui-rich-text-body .ProseMirror h3 { margin-bottom: 0.5rem; margin-top: 0px; font-size: 0.75rem; line-height: 1rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-rich-text-prosemirror ul, .ui-rich-text-prosemirror ol, .ui-rich-text-body .ProseMirror ul, .ui-rich-text-body .ProseMirror ol { margin-top: 0.5rem; margin-bottom: 0.5rem; padding-inline-start: 1.25rem; } .ui-rich-text-prosemirror blockquote, .ui-rich-text-body .ProseMirror blockquote { margin-top: 0.5rem; margin-bottom: 0.5rem; border-inline-start-width: 2px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); padding-inline-start: 0.75rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-rich-text-prosemirror hr, .ui-rich-text-body .ProseMirror hr { margin-top: 0.75rem; margin-bottom: 0.75rem; border-width: 0px; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); } .ui-rich-text-prosemirror p.is-empty::before, .ui-rich-text-body .ProseMirror p.is-empty::before { pointer-events: none; float: left; height: 0px; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); content: attr(data-placeholder); } .ui-rich-text-prosemirror table, .ui-rich-text-body .ProseMirror table, .ui-rich-text-table { margin-top: 0.5rem; margin-bottom: 0.5rem; width: 100%; border-collapse: collapse; font-size: 0.75rem; line-height: 1rem; } .ui-rich-text-prosemirror th, .ui-rich-text-prosemirror td, .ui-rich-text-body .ProseMirror th, .ui-rich-text-body .ProseMirror td { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: left; vertical-align: top; } .ui-rich-text-prosemirror th, .ui-rich-text-body .ProseMirror th { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); font-weight: 600; } .ui-rich-text-prosemirror h1, .ui-rich-text-body .ProseMirror h1 { margin-bottom: 0.5rem; margin-top: 0px; font-size: 1rem; line-height: 1.5rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } /* Theme toggle */ .ui-theme-toggle { display: inline-flex; flex-wrap: wrap; gap: 0.125rem; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); padding: 0.125rem; } .ui-theme-toggle-btn { border-radius: 9999px; border-width: 0px; background-color: transparent; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-theme-toggle-btn:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-theme-toggle-btn.is-active { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-border) / var(--tw-ring-opacity, 1)); } /* Semantic tones */ .ui-tone-success { border-color: rgb(var(--ui-falcon-success) / 0.15); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-success-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-success) / var(--tw-text-opacity, 1)); } .ui-tone-warning { border-color: rgb(var(--ui-falcon-warning) / 0.15); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-warning-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-warning) / var(--tw-text-opacity, 1)); } .ui-tone-danger { border-color: rgb(var(--ui-falcon-danger) / 0.15); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .ui-tone-info { border-color: rgb(var(--ui-falcon-primary) / 0.15); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-tone-neutral { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-badge-solid-primary { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-badge-solid-success { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-success) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-badge-solid-warning { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-warning) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-badge-solid-danger { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-badge-solid-neutral { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-muted) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-badge-solid-info { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } /* Surfaces — layered borders + tonal backgrounds; no shadow elevation on cards */ .ui-surface { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-surface-section { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-surface-interactive { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-surface-interactive:hover { border-color: rgb(var(--ui-falcon-primary) / 0.4); } .ui-surface-metric { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); background-color: rgb(var(--ui-falcon-light) / 0.4); } .ui-surface-well { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); } .ui-surface-sunken { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .ui-alert { margin-bottom: 0px; border-radius: 0.75rem; border-width: 1px; border-style: solid; padding: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; } .ui-alert.ui-tone-success { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-success) / var(--tw-border-opacity, 1)); border-color: rgb(var(--ui-falcon-success) / 1) !important; } .ui-alert.ui-tone-warning { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-warning) / var(--tw-border-opacity, 1)); border-color: rgb(var(--ui-falcon-warning) / 1) !important; } .ui-alert.ui-tone-danger { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-danger) / var(--tw-border-opacity, 1)); border-color: rgb(var(--ui-falcon-danger) / 1) !important; } .ui-alert.ui-tone-info { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); border-color: rgb(var(--ui-falcon-primary) / 1) !important; } .ui-alert.ui-tone-neutral { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); border-color: rgb(var(--ui-falcon-border) / 1) !important; } .ui-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: 0.025em; display: inline-flex; align-items: center; border-radius: 9999px; padding-left: 0.625rem; padding-right: 0.625rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } .ui-badge-subtle-success { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-success-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-success) / var(--tw-text-opacity, 1)); } .ui-badge-subtle-warning { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-warning-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-warning) / var(--tw-text-opacity, 1)); } .ui-badge-subtle-primary { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-badge-subtle-danger { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .ui-badge-subtle-secondary { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-badge-subtle-info { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } /* Overlays & panels */ .ui-overlay { position: fixed; inset: 0px; z-index: 1055; display: flex; align-items: center; justify-content: center; background-color: rgb(var(--ui-falcon-scrim) / 0.35); padding: 1rem; --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } @media (min-width: 640px) { .ui-overlay { padding: 1.5rem; } } .ui-overlay-drawer { position: fixed; inset: 0px; z-index: 1045; background-color: rgb(var(--ui-falcon-scrim) / 0.4); } .ui-modal-panel { display: flex; max-height: calc(100dvh - 2rem); width: 100%; flex-direction: column; border-radius: 1rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--ui-shadow-modal); --tw-shadow-colored: var(--ui-shadow-modal); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-modal-panel-sm { display: flex; max-height: calc(100dvh - 2rem); width: 100%; max-width: 24rem; flex-direction: column; border-radius: 1rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--ui-shadow-modal); --tw-shadow-colored: var(--ui-shadow-modal); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-modal-panel-md { display: flex; max-height: calc(100dvh - 2rem); width: 100%; max-width: 32rem; flex-direction: column; border-radius: 1rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--ui-shadow-modal); --tw-shadow-colored: var(--ui-shadow-modal); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-modal-panel-lg { display: flex; max-height: calc(100dvh - 2rem); width: 100%; max-width: 42rem; flex-direction: column; border-radius: 1rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--ui-shadow-modal); --tw-shadow-colored: var(--ui-shadow-modal); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-modal-panel-xl { display: flex; max-height: calc(100dvh - 2rem); width: 100%; max-width: 56rem; flex-direction: column; border-radius: 1rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--ui-shadow-modal); --tw-shadow-colored: var(--ui-shadow-modal); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-modal-header { display: flex; width: 100%; flex-shrink: 0; align-items: center; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 0.25rem; padding-top: 1.25rem; } .ui-modal-header .ui-panel-header-row { width: 100%; } .ui-modal-header .ui-panel-header-title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; } .ui-modal-body { min-height: 0px; flex: 1 1 0%; overflow-y: auto; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 1rem; padding-top: 0px; } .ui-modal-panel > .ui-modal-body:first-child { padding-top: 1.25rem; } .ui-modal-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; border-top-width: 1px; border-color: rgb(var(--ui-falcon-border-subtle) / 0.7); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; } .ui-modal-footer > .ui-modal-footer-leading { margin-right: auto; } .ui-drawer-panel-sm { display: flex; height: 100%; width: 100%; max-width: 24rem; flex-direction: column; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } @media not all and (min-width: 768px) { .ui-drawer-panel-sm { max-width: 100%; } } .ui-drawer-panel-md { display: flex; height: 100%; width: 100%; max-width: 28rem; flex-direction: column; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } @media not all and (min-width: 768px) { .ui-drawer-panel-md { max-width: 100%; } } .ui-drawer-panel-lg { display: flex; height: 100%; width: 100%; max-width: 42rem; flex-direction: column; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } @media not all and (min-width: 768px) { .ui-drawer-panel-lg { max-width: 100%; } } .ui-drawer-panel-xl { display: flex; height: 100%; width: 100%; max-width: 56rem; flex-direction: column; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } @media not all and (min-width: 768px) { .ui-drawer-panel-xl { max-width: 100%; } } .ui-drawer-panel--right { margin-left: auto; border-left-width: 1px; border-style: solid; } .ui-drawer-panel--left { margin-right: auto; border-right-width: 1px; border-style: solid; } .ui-drawer-header { display: flex; min-height: 3.5rem; flex-shrink: 0; align-items: center; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; } .ui-drawer-body { flex: 1 1 0%; overflow-y: auto; padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-drawer-footer { border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-menu-panel { position: absolute; z-index: 50; margin-top: 0.25rem; width: 11rem; min-width: 11rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-top: 0.25rem; padding-bottom: 0.25rem; --tw-shadow: var(--ui-shadow-float); --tw-shadow-colored: var(--ui-shadow-float); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-menu-panel--start { inset-inline-start: 0px; } .ui-menu-panel--end { inset-inline-end: 0px; } .ui-menu-panel--wide { width: auto; min-width: 16rem; max-width: 20rem; } .ui-dropdown-item { display: block; width: 100%; border-width: 0px; background-color: transparent; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: left; font-size: 0.75rem; line-height: 1rem; font-weight: 400; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); text-decoration-line: none; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-dropdown-item:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); text-decoration-line: none; } .ui-dropdown-item { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .ui-dropdown-item--danger { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .ui-dropdown-item--danger:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } a.ui-dropdown-item--danger, button.ui-dropdown-item--danger, .dropdown-item.ui-dropdown-item--danger { color: rgb(var(--ui-falcon-danger)); } a.ui-dropdown-item--danger:hover, a.ui-dropdown-item--danger:focus, a.ui-dropdown-item--danger:active, button.ui-dropdown-item--danger:hover, button.ui-dropdown-item--danger:focus, button.ui-dropdown-item--danger:active, .dropdown-item.ui-dropdown-item--danger:hover, .dropdown-item.ui-dropdown-item--danger:focus, .dropdown-item.ui-dropdown-item--danger:active { color: rgb(var(--ui-falcon-danger)); background-color: rgb(var(--ui-falcon-danger-soft)); } .ui-dropdown-item-rich { display: flex; align-items: flex-start; gap: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-dropdown-item-rich__icon { display: flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.75rem; background-color: rgb(var(--ui-falcon-primary) / 0.1); font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-dropdown-item-rich__body { min-width: 0px; flex: 1 1 0%; } .ui-dropdown-item-rich__title { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-dropdown-item-rich__desc { margin-top: 0.125rem; display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-dropdown-divider { margin-top: 0.25rem; margin-bottom: 0.25rem; height: 1px; border-width: 0px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-border) / var(--tw-bg-opacity, 1)); } /* Tabs — segmented control (matches Enrollments pipeline Leads/Applications) */ .ui-tabs-list { display: inline-flex; flex-wrap: wrap; gap: 0.125rem; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); padding: 0.125rem; } .ui-tabs-list-vertical { display: flex; flex-direction: column; gap: 0.25rem; border-radius: 0.75rem; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); padding: 0.25rem; } .ui-tab { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border-width: 0px; background-color: transparent; padding-left: 1rem; padding-right: 1rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-tab:hover { background-color: rgb(var(--ui-falcon-surface) / 0.5); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-tab:focus { outline: 2px solid transparent; outline-offset: 2px; } .ui-tab:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.25); } .ui-tab { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; } .ui-tab--active { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-border) / var(--tw-ring-opacity, 1)); } .ui-tab--active:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-tab-panel { margin-top: 0.75rem; } /* Table */ .ui-table-wrap { overflow-x: auto; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-table { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.5; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); width: 100%; min-width: 100%; border-collapse: collapse; text-align: left; vertical-align: middle; } .ui-table thead th { font-size: 0.75rem; line-height: 1rem; font-weight: 600; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: start; } .ui-table tbody td { border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; vertical-align: middle; } .ui-table tbody tr { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-table tbody tr:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .ui-table tbody tr:last-child td { border-bottom-width: 0px; } .ui-table-compact { font-size: 0.75rem; line-height: 1rem; } .ui-table-compact tbody td { font-size: 0.75rem; line-height: 1rem; } /* Empty state */ .ui-empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; border-radius: 1rem; border-width: 1px; border-style: dashed; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 2rem; padding-bottom: 2rem; text-align: center; } .ui-empty-state-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); margin: 0px; } .ui-empty-state-description { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; max-width: 28rem; } .ui-empty-state-icon { display: flex; height: 4rem; width: 4rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .ui-empty-state--inset { align-items: flex-start; gap: 0.375rem; border-radius: 0px; border-width: 0px; background-color: transparent; padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; text-align: left; } .ui-empty-state--inset .ui-empty-state-title { font-size: 0.875rem; line-height: 1.25rem; line-height: 1.5; font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-empty-state--inset .ui-empty-state-description { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); max-width: none; } .ui-app-header-org-form.ui-empty-state--inset .ui-empty-state-icon { display: none; } .ui-empty-state--inset .ui-empty-state-icon { display: none; } .ui-empty-state--inset.ui-empty-state--quiet { padding-top: 0.5rem; padding-bottom: 0.5rem; } .ui-empty-state--inset.ui-empty-state--quiet .ui-empty-state-description { font-size: 0.75rem; line-height: 1rem; font-weight: 400; margin: 0px; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } /* Avatar */ .ui-avatar { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: 1rem; font-weight: 600; } .ui-avatar-sm { height: 2.5rem; width: 2.5rem; font-size: 0.75rem; line-height: 1rem; } /* Sticky action bar */ .ui-sticky-action-bar { position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 30; border-top-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-bottom: env(safe-area-inset-bottom, 0px); } @media (min-width: 640px) { .ui-sticky-action-bar--hide-sm.ui-app-header-org-form { display: none; } .ui-sticky-action-bar--hide-sm { display: none; } } @media (min-width: 768px) { .ui-sticky-action-bar--hide-md.ui-app-header-org-form { display: none; } .ui-sticky-action-bar--hide-md { display: none; } } @media (min-width: 1024px) { .ui-sticky-action-bar--hide-lg.ui-app-header-org-form { display: none; } .ui-sticky-action-bar--hide-lg { display: none; } } @media (min-width: 1280px) { .ui-sticky-action-bar--hide-xl.ui-app-header-org-form { display: none; } .ui-sticky-action-bar--hide-xl { display: none; } } /* Pagination */ .ui-pagination { display: flex; justify-content: flex-end; } .ui-pagination-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .ui-pagination-pages { margin-bottom: 0px; display: flex; list-style-type: none; align-items: center; gap: 0.25rem; padding: 0px; } .ui-pagination-page { min-width: 2rem; padding-left: 0.625rem; padding-right: 0.625rem; } .ui-pagination-ellipsis { display: inline-flex; min-width: 1.25rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; align-items: center; justify-content: center; padding-left: 0.125rem; padding-right: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } /* Composite layouts */ .ui-page-header { margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .ui-page-header-main { display: flex; min-width: 0px; flex: 1 1 0%; align-items: flex-start; gap: 0.75rem; } .ui-page-header-back { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-width: 0px; background-color: transparent; color: inherit; outline: 2px solid transparent; outline-offset: 2px; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-page-header-back:disabled { pointer-events: none; opacity: 0.6; } .ui-page-header-back { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; border: none; box-shadow: none; } .ui-icon-btn--circle.ui-page-header-back { height: 2rem; width: 2rem; border-radius: 9999px; } .ui-page-header-back { font-size: 0.75rem; line-height: 1rem; line-height: 1; } .ui-icon-btn--square.ui-page-header-back { height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; } button.ui-page-header-back.ui-icon-btn-default { border: none; outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } button.ui-page-header-back.ui-icon-btn-default:hover { outline-color: rgb(var(--ui-falcon-primary) / 0.25); box-shadow: none; } button.ui-page-header-back.ui-icon-btn-default:focus, button.ui-page-header-back.ui-icon-btn-default:focus-visible { outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } .ui-page-header-back { background-color: transparent; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-page-header-back:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-page-header-back { box-shadow: none; } .ui-page-header-back:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-page-header-back:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-border) / 1); } .ui-page-header-actions .ui-icon-btn--circle.ui-page-header-back { height: 2.5rem; width: 2.5rem; } .ui-page-header-back { margin-top: 0.125rem; flex-shrink: 0; } .ui-page-header-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-page-header-subtitle { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-date-navigator { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ui-date-navigator--reveal { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.25rem; } .ui-app-header-org-form.ui-date-navigator--reveal .ui-date-navigator-btn.ui-date-navigator-reveal,.ui-app-header-org-form .ui-date-navigator--reveal .ui-date-navigator-today.ui-date-navigator-reveal { display: none; } .ui-date-navigator--reveal .ui-date-navigator-btn.ui-date-navigator-reveal, .ui-date-navigator--reveal .ui-date-navigator-today.ui-date-navigator-reveal { display: none; flex-shrink: 0; } .ui-date-navigator--reveal:hover .ui-date-navigator-btn.ui-date-navigator-reveal, .ui-date-navigator--reveal:focus-within .ui-date-navigator-btn.ui-date-navigator-reveal { display: inline-flex; } .ui-date-navigator--reveal:hover .ui-date-navigator-today.ui-date-navigator-reveal, .ui-date-navigator--reveal:focus-within .ui-date-navigator-today.ui-date-navigator-reveal { display: inline; } .ui-date-navigator--reveal .ui-date-navigator-today.ui-date-navigator-reveal { margin-left: 0.25rem; white-space: nowrap; } .ui-date-navigator-form { margin: 0px; min-width: 0px; } .ui-date-navigator-picker { position: relative; margin: 0px; display: flex; min-width: 0px; cursor: pointer; align-items: center; gap: 0.5rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-date-navigator-picker:hover { border-color: rgb(var(--ui-falcon-primary) / 0.35); background-color: rgb(var(--ui-falcon-light) / 0.4); } .ui-date-navigator--reveal .ui-date-navigator-picker { gap: 0.25rem; border-color: transparent; background-color: transparent; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; } .ui-date-navigator--reveal .ui-date-navigator-picker:hover { border-color: transparent; background-color: transparent; } .ui-date-navigator--reveal:hover .ui-date-navigator-picker, .ui-date-navigator--reveal:focus-within .ui-date-navigator-picker { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .ui-date-navigator--reveal:hover .ui-date-navigator-picker:hover, .ui-date-navigator--reveal:focus-within .ui-date-navigator-picker:hover { border-color: rgb(var(--ui-falcon-primary) / 0.35); background-color: rgb(var(--ui-falcon-light) / 0.4); } .ui-date-navigator-label { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); white-space: nowrap; } .ui-date-navigator-calendar { display: flex; height: 1.75rem; width: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.5rem; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-app-header-org-form.ui-date-navigator--reveal .ui-date-navigator-calendar { display: none; } .ui-date-navigator--reveal .ui-date-navigator-calendar { display: none; } .ui-date-navigator--reveal:hover .ui-date-navigator-calendar, .ui-date-navigator--reveal:focus-within .ui-date-navigator-calendar { display: flex; } .ui-date-navigator-input { position: absolute; inset: 0px; cursor: pointer; opacity: 0; } .ui-date-navigator-btn.is-disabled { pointer-events: none; opacity: 0.35; } .ui-date-navigator-today { font-size: 0.75rem; line-height: 1rem; line-height: 1.375; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); flex-shrink: 0; font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-date-navigator-today:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary-dark) / var(--tw-text-opacity, 1)); text-decoration-line: underline; } .ui-page-header-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ui-filter-bar { margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 640px) { .ui-filter-bar { flex-direction: row; flex-wrap: wrap; align-items: center; } } .ui-filter-bar-search { width: 100%; } @media (min-width: 640px) { .ui-filter-bar-search { max-width: 20rem; flex: 1 1 0%; } } .ui-filter-bar .ui-search-input-field { font-size: 0.75rem; line-height: 1rem; line-height: 1.5; } .ui-filter-bar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ui-filter-bar-filters .ui-select { width: auto; min-width: 7.5rem; font-size: 0.75rem; line-height: 1rem; background-size: 14px 10px; } .ui-filter-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } @media (min-width: 640px) { .ui-filter-bar-actions { margin-left: auto; } } .ui-filter-bar-actions .ui-btn-sm { height: 2.5rem; padding-left: 0.75rem; padding-right: 0.75rem; } .ui-filter-field { display: flex; min-width: 0px; flex-direction: column; gap: 0.25rem; } .ui-filter-label { margin-bottom: 0px; display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-filter-field > .ui-select, .ui-filter-field > .ui-field, .ui-filter-field > .ui-search-input { flex: none; } /* Status / tag filter pills — enrollment leads, application stages */ .ui-filter-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; } .ui-filter-pill { display: inline-flex; cursor: pointer; align-items: center; gap: 0.375rem; border-radius: 9999px; border-width: 0px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 11px; font-weight: 600; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-filter-pill:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-filter-pill { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; box-shadow: none; outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; } .ui-filter-pill:hover { outline-color: rgb(var(--ui-falcon-border)); box-shadow: none; } .ui-filter-pill--active { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-filter-pill--active:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-dark) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-filter-pill--active { outline: none; box-shadow: none; } .ui-filter-pill--add { background-color: transparent; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-filter-pill--add:hover { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-filter-pill--add { outline-style: dashed; } .ui-filter-pill--add:hover { outline-color: rgb(var(--ui-falcon-primary)); } .ui-filter-pill-dot { height: 0.375rem; width: 0.375rem; flex-shrink: 0; border-radius: 9999px; } .ui-filter-pill-icon { font-size: 9px; } .ui-filter-pill-count { opacity: 0.7; } .ui-filter-pill--active .ui-filter-pill-count { color: rgb(255 255 255 / 0.8); opacity: 1; } .ui-crud-layout > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .ui-crud-layout-content { min-width: 0px; } .ui-form-section-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-form-section-description { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-form-section-body > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .ui-form-section-body { margin-top: 1rem; } .ui-table-actions { position: static; } /* Page layout patterns */ .ui-space-section > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .ui-space-form > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } /* Ops hub — compact widget rhythm (12px); use on multi-card dashboards */ .ui-p-card { padding: 1.5rem; } .ui-pattern-demo { overflow: hidden; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-pattern-demo-label { font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); border-bottom-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .ui-pattern-demo-body { padding: 1.5rem; } /* Card shell — single 1px border (avoid Tailwind `border` utility + header border-b stacking) */ .ui-card-shell { --ui-card-divider: rgb(var(--ui-falcon-border) / 1); box-sizing: border-box; overflow: hidden; border-radius: 0.75rem; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); border: 1px solid rgb(var(--ui-falcon-border) / 1); } .ui-card-shell--divided { display: flex; flex-direction: column; } .ui-card-shell-header { position: relative; flex-shrink: 0; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-card-shell-header::after { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background-color: var(--ui-card-divider); } /* Ops hub / zone card headers — toolbar strip (distinct from slide-panel .ui-panel-header-*) */ .ui-zone-header-title { margin: 0px; font-size: 1rem; line-height: 1.5rem; font-weight: 600; line-height: 1.375; letter-spacing: -0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-zone-header-subtitle { font-size: 0.75rem; line-height: 1rem; font-weight: 400; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; margin-top: 0.25rem; line-height: 1.375; } .ui-form-layout > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .ui-form-layout-body > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .ui-focused-layout { width: 100%; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-focused-layout-topbar { position: sticky; top: 0; z-index: 100; height: 3.75rem; background: rgb(var(--ui-falcon-surface)); border-bottom: 1px solid rgb(var(--ui-falcon-border)); display: flex; align-items: center; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; } .ui-focused-layout-topbar-inner { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ui-focused-layout-topbar-left { display: flex; align-items: center; gap: 0.875rem; min-width: 0; flex: 1; } .ui-focused-layout-back-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border: 1px solid rgb(var(--ui-falcon-border)); border-radius: 50%; color: rgb(var(--ui-falcon-muted)); background: none; text-decoration: none; font-size: 0.8125rem; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .ui-focused-layout-back-btn:hover { color: rgb(var(--ui-falcon-text)); border-color: rgb(var(--ui-falcon-text) / 0.3); background: rgb(var(--ui-falcon-light)); text-decoration: none; } .ui-focused-layout-title-group { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; } .ui-focused-layout-title { margin: 0; font-size: 0.9375rem; font-weight: 700; color: rgb(var(--ui-falcon-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-focused-layout-status-badge { flex-shrink: 0; } .ui-focused-layout-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .ui-focused-layout-body { min-height: calc(100vh - 3.75rem); padding: 0.875rem 1rem 3rem; } .ui-focused-layout-container { max-width: 1300px; margin: 0 auto; } @media (max-width: 767px) { .ui-focused-layout-actions .ui-btn:not(:last-child):not(:nth-last-child(2)) { display: none; } .ui-focused-layout-body { padding: 0.625rem 1rem 3rem; } } @media (max-width: 575px) { .ui-focused-layout-title { font-size: 0.875rem; } .ui-focused-layout-topbar-inner { padding: 0 0.875rem; } } .ui-table-layout { overflow: hidden; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-table-layout-toolbar { border-bottom-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .ui-table-layout-footer { border-top-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .ui-dashboard-layout > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .ui-dashboard-layout--ops > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .ui-dashboard-metrics { display: grid; width: 100%; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 640px) { .ui-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .ui-dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ui-dashboard-metrics > * { min-width: 0px; } @media (min-width: 640px) { .ui-dashboard-metrics--ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ui-dashboard-metrics--ops { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ui-attendance-metric-card { padding: 1.5rem; } .ui-attendance-metric-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-bottom: 0.75rem; } .ui-attendance-metric-card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .ui-attendance-metric-card-stat { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-attendance-metric-card-stat-value { margin-top: 0.25rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); margin: 0px; line-height: 1.25; } .ui-attendance-metric-card-stat-label { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; margin-top: 0.25rem; } .ui-attendance-metric-card-progress { margin-top: 0.75rem; height: 0.375rem; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .ui-attendance-metric-card-progress-bar { height: 100%; border-radius: 9999px; transition-property: width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .ui-attendance-metric-card-rate { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; margin-top: 0.5rem; } .ui-student-attendance-card { --ui-student-divider: var(--ui-card-divider, rgb(var(--ui-falcon-border) / 1)); } .ui-student-attendance-card-header { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-student-attendance-card-header::after { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background-color: var(--ui-student-divider); } .ui-student-attendance-card-title { margin: 0px; font-size: 1rem; line-height: 1.5rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-student-attendance-card-hero { position: relative; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-student-attendance-card-hero::after { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background-color: var(--ui-student-divider); } .ui-student-attendance-card-hero-value { margin: 0px; display: flex; flex-wrap: wrap; align-items: baseline; -moz-column-gap: 0.375rem; column-gap: 0.375rem; row-gap: 0px; } .ui-student-attendance-card-hero-present { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; line-height: 1; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-student-attendance-card-hero-of, .ui-student-attendance-card-hero-total { font-size: 1rem; line-height: 1.5rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-student-attendance-card-hero-meta { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; margin-top: 0.25rem; } .ui-student-attendance-card-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-student-attendance-card-stats::after { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background-color: var(--ui-student-divider); } .ui-student-attendance-card-stat { position: relative; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; } .ui-student-attendance-card-stat + .ui-student-attendance-card-stat::before { content: ''; pointer-events: none; position: absolute; bottom: 0px; left: 0px; top: 0px; width: 1px; background-color: var(--ui-student-divider); } .ui-student-attendance-card-stat-value { margin: 0px; font-size: 1.5rem; line-height: 2rem; font-weight: 700; line-height: 1; } .ui-student-attendance-card-stat-label { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; margin-top: 0.25rem; } .ui-student-attendance-card-list { margin: 0px; list-style-type: none; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 0px; } .ui-student-attendance-card-row { position: relative; display: flex; align-items: center; gap: 0.75rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: inherit; text-decoration-line: none; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-student-attendance-card-row:hover { background-color: rgb(var(--ui-falcon-light) / 0.3); text-decoration-line: none; } .ui-student-attendance-card-row:focus { text-decoration-line: none; } .ui-student-attendance-card-list > li + li .ui-student-attendance-card-row::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-student-divider); } .ui-student-attendance-card-dot { height: 0.5rem; width: 0.5rem; flex-shrink: 0; border-radius: 9999px; } .ui-student-attendance-card-row-main { min-width: 0px; flex: 1 1 0%; line-height: 1.375; } .ui-student-attendance-card-name { font-size: 0.875rem; line-height: 1.25rem; line-height: 1.5; display: block; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-student-attendance-card-badge { font-size: 11px; font-weight: 600; flex-shrink: 0; border-radius: 9999px; padding-left: 0.625rem; padding-right: 0.625rem; padding-top: 0.25rem; padding-bottom: 0.25rem; line-height: 1; } .ui-student-attendance-card-empty { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-teacher-attendance-card { --ui-teacher-divider: var(--ui-card-divider, rgb(var(--ui-falcon-border) / 1)); } .ui-teacher-attendance-card-header { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-teacher-attendance-card-header::after { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background-color: var(--ui-teacher-divider); } .ui-teacher-attendance-card-title { margin: 0px; font-size: 1rem; line-height: 1.5rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-teacher-attendance-card-summary { margin: 0px; display: flex; flex-wrap: wrap; align-items: baseline; -moz-column-gap: 0.25rem; column-gap: 0.25rem; row-gap: 0px; font-size: 0.875rem; line-height: 1.25rem; } .ui-teacher-attendance-card-summary-count { font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-teacher-attendance-card-summary-of, .ui-teacher-attendance-card-summary-label { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-teacher-attendance-card-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-teacher-attendance-card-stats::after { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background-color: var(--ui-teacher-divider); } .ui-teacher-attendance-card-stat { position: relative; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; } .ui-teacher-attendance-card-stat + .ui-teacher-attendance-card-stat::before { content: ''; pointer-events: none; position: absolute; bottom: 0px; left: 0px; top: 0px; width: 1px; background-color: var(--ui-teacher-divider); } .ui-teacher-attendance-card-stat-value { margin: 0px; font-size: 1.5rem; line-height: 2rem; font-weight: 700; line-height: 1; } .ui-teacher-attendance-card-stat-label { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; margin-top: 0.25rem; } .ui-teacher-attendance-card-list { margin: 0px; list-style-type: none; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 0px; } .ui-teacher-attendance-card-row { position: relative; display: flex; align-items: center; gap: 0.75rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: inherit; text-decoration-line: none; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-teacher-attendance-card-row:hover { background-color: rgb(var(--ui-falcon-light) / 0.3); text-decoration-line: none; } .ui-teacher-attendance-card-row:focus { text-decoration-line: none; } .ui-teacher-attendance-card-list > li + li .ui-teacher-attendance-card-row::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-teacher-divider); } .ui-teacher-attendance-card-dot { height: 0.5rem; width: 0.5rem; flex-shrink: 0; border-radius: 9999px; } .ui-teacher-attendance-card-row-main { min-width: 0px; flex: 1 1 0%; line-height: 1.375; } .ui-teacher-attendance-card-name { font-size: 0.875rem; line-height: 1.25rem; line-height: 1.5; display: block; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-teacher-attendance-card-detail { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-top: 0.125rem; display: block; } .ui-teacher-attendance-card-badge { font-size: 11px; font-weight: 600; flex-shrink: 0; border-radius: 9999px; padding-left: 0.625rem; padding-right: 0.625rem; padding-top: 0.25rem; padding-bottom: 0.25rem; text-transform: capitalize; line-height: 1; } .ui-teacher-attendance-card-empty { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-ops-layout { gap: 0.75rem; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 1024px) { .ui-ops-layout { grid-template-columns: 7fr 3fr; align-items: flex-start; } } .ui-ops-layout-main > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .ui-ops-layout-side > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .ui-school-health-bar { display: flex; flex-direction: column; gap: 1rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 1.5rem; } @media (min-width: 640px) { .ui-school-health-bar { flex-direction: row; align-items: center; justify-content: space-between; } } .ui-school-health-bar-summary { display: flex; flex-wrap: wrap; align-items: baseline; -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 0.25rem; } .ui-school-health-bar-score { display: flex; align-items: baseline; gap: 0.5rem; } .ui-school-health-bar-status { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.5; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-school-health-bar-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ui-school-health-check { display: flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); background-color: rgb(var(--ui-falcon-light) / 0.5); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } .ui-school-health-check-label { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-attention-list-items { margin: 0px; list-style-type: none; padding: 0px; } .ui-attention-item-link { position: relative; display: flex; min-height: 3.25rem; align-items: center; gap: 0.75rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-attention-item-link:hover { background-color: rgb(var(--ui-falcon-light) / 0.3); } .ui-attention-list-items > li + li .ui-attention-item-link::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-attention-item { list-style-type: none; } .ui-attention-item-icon { display: flex; height: 2.25rem; width: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-warning-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-warning) / var(--tw-text-opacity, 1)); } .ui-attention-item--danger .ui-attention-item-icon { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .ui-attention-item--info .ui-attention-item-icon { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-attention-item-body { min-width: 0px; flex: 1 1 0%; } .ui-attention-item-label { font-size: 0.875rem; line-height: 1.25rem; line-height: 1.5; display: block; font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-attention-item--stub .ui-attention-item-label { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-attention-item-chevron { flex-shrink: 0; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-quick-action-grid-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 640px) { .ui-quick-action-grid-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ui-quick-action-grid--bar .ui-quick-action-grid-items { display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.125rem; } .ui-quick-action-tile { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-quick-action-tile:hover { border-color: rgb(var(--ui-falcon-primary) / 0.4); } .ui-quick-action-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); padding: 1rem; text-align: center; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-quick-action-tile:hover { border-color: rgb(var(--ui-falcon-primary) / 0.35); } .ui-quick-action-tile--bar { flex-shrink: 0; flex-direction: row; gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: left; } .ui-quick-action-tile--bar .ui-quick-action-tile-icon { height: 2rem; width: 2rem; font-size: 0.875rem; line-height: 1.25rem; } .ui-quick-action-tile--bar .ui-quick-action-tile-label { white-space: nowrap; } .ui-daily-overview-header > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .ui-quick-action-tile-icon { display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-quick-action-tile-label { font-size: 0.75rem; line-height: 1rem; line-height: 1.375; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-ops-zone-card-body > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .ui-ops-subzone > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .ui-ops-subzone-stack > .ui-ops-subzone + .ui-ops-subzone { position: relative; padding-top: 1.5rem; } .ui-ops-subzone-stack > .ui-ops-subzone + .ui-ops-subzone::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-ops-subzone-title { margin: 0px; } .ui-ops-stat-panel { overflow: hidden; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-ops-stat-panel > * { position: relative; } .ui-ops-stat-panel > * + *::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-ops-stat-row { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .ui-ops-stat-row-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.5; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-ops-stat-row-value { font-size: 0.875rem; line-height: 1.25rem; line-height: 1.5; font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-ops-list { overflow: hidden; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-ops-list > * { position: relative; } .ui-ops-list > * + *::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-ops-list-item { display: flex; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: inherit; text-decoration-line: none; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-ops-list-item:hover { background-color: rgb(var(--ui-falcon-light) / 0.3); } .ui-ops-list-item-title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-ops-list-item-meta { font-size: 0.75rem; line-height: 1rem; font-weight: 400; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-top: 0.25rem; line-height: 1.375; } /* Zone cards: single outer border; flat lists inside padded body */ .ui-ops-zone-card .ui-ops-list, .ui-ops-zone-card .ui-ops-stat-panel { border-radius: 0px; border-width: 0px; background-color: transparent; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-ops-zone-card .ui-ops-list-item { padding-left: 0px; padding-right: 0px; padding-top: 0.5rem; padding-bottom: 0.5rem; } .ui-ops-zone-card .ui-ops-stat-row { padding-left: 0px; padding-right: 0px; padding-top: 0.5rem; padding-bottom: 0.5rem; } .ui-ops-zone-card .ui-empty-state--inset { padding-left: 0px; padding-right: 0px; padding-top: 0.75rem; padding-bottom: 0.75rem; } .ui-ops-zone-card .ui-alert { margin-left: 0px; margin-right: 0px; } .ui-ops-zone-card-footer { position: relative; margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; } .ui-ops-zone-card-footer::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-ops-calendar > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .ui-ops-calendar-group + .ui-ops-calendar-group { position: relative; padding-top: 1rem; } .ui-ops-calendar-group + .ui-ops-calendar-group::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-ops-calendar-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; margin-bottom: 0.5rem; } .ui-ops-calendar-events { margin: 0px; list-style-type: none; padding: 0px; } .ui-ops-calendar-event { position: relative; display: flex; align-items: flex-start; gap: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: inherit; text-decoration-line: none; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-ops-calendar-event:hover { background-color: rgb(var(--ui-falcon-light) / 0.3); } .ui-ops-calendar-events > li + li .ui-ops-calendar-event::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-ops-zone-card .ui-timeline > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .ui-ops-zone-card .ui-timeline-item { position: relative; display: flex; gap: 0.75rem; border-radius: 0px; border-width: 0px; background-color: transparent; padding: 0px; padding-top: 0.5rem; padding-bottom: 0.5rem; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-ops-zone-card .ui-timeline-item + .ui-timeline-item::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-ops-zone-card .ui-timeline-meta { margin-top: 0.5rem; border-width: 0px; padding-top: 0px; } .ui-absence-patterns-card { position: relative; } .ui-absence-patterns-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .ui-absence-patterns-card-title { margin: 0px; font-size: 1rem; line-height: 1.5rem; font-weight: 600; line-height: 1.375; letter-spacing: -0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-absence-patterns-card-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; -moz-column-gap: 0.5rem; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; } .ui-absence-patterns-card-summary-stat { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-absence-patterns-card-summary-divider { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-border) / var(--tw-text-opacity, 1)); } .ui-absence-patterns-card-summary-watch { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-absence-patterns-card-summary-watch--active { font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .ui-absence-patterns-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } @media (min-width: 640px) { .ui-absence-patterns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ui-absence-patterns-cell { position: relative; display: flex; min-height: 9.5rem; flex-direction: column; justify-content: space-between; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; } .ui-absence-patterns-grid > .ui-absence-patterns-cell::before { content: ''; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background-color: var(--ui-card-divider); } .ui-app-header-org-form.ui-absence-patterns-grid > .ui-absence-patterns-cell:first-child::before { display: none; } .ui-absence-patterns-grid > .ui-absence-patterns-cell:first-child::before { display: none; } .ui-absence-patterns-grid > .ui-absence-patterns-cell:nth-child(odd)::after { content: ''; } .ui-app-header-org-form.ui-absence-patterns-grid > .ui-absence-patterns-cell:nth-child(odd)::after { display: none; } .ui-absence-patterns-grid > .ui-absence-patterns-cell:nth-child(odd)::after { pointer-events: none; position: absolute; bottom: 0px; right: 0px; top: 0px; display: none; width: 1px; } @media (min-width: 640px) { .ui-absence-patterns-grid > .ui-absence-patterns-cell:nth-child(odd)::after { display: block; } } .ui-absence-patterns-grid > .ui-absence-patterns-cell:nth-child(odd)::after { background-color: var(--ui-card-divider); } @media (min-width: 640px) { .ui-app-header-org-form.ui-absence-patterns-grid > .ui-absence-patterns-cell:nth-child(-n + 2)::before { display: none; } .ui-absence-patterns-grid > .ui-absence-patterns-cell:nth-child(-n + 2)::before { display: none; } .ui-absence-patterns-grid > .ui-absence-patterns-cell:nth-child(n + 3)::before { display: block; } } .ui-absence-patterns-cell-main { min-width: 0px; } .ui-absence-patterns-cell-count { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; line-height: 1; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); margin: 0px; --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); letter-spacing: -0.025em; } .ui-absence-patterns-cell-meta { margin-top: 0.5rem; } .ui-absence-patterns-cell-label { margin: 0px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-absence-patterns-cell-sublabel { font-size: 0.75rem; line-height: 1rem; font-weight: 400; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; margin-top: 0.125rem; line-height: 1.375; } .ui-absence-patterns-cell-footer { margin-top: 1rem; display: flex; min-height: 2rem; align-items: center; } .ui-absence-patterns-cell-footer--empty { justify-content: center; } .ui-absence-patterns-cell-avatars { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; } .ui-absence-patterns-cell-avatar-link { display: inline-flex; text-decoration-line: none; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-absence-patterns-cell-avatar-link:hover { opacity: 0.8; } .ui-absence-patterns-cell-overflow { font-size: 0.75rem; line-height: 1rem; line-height: 1.375; font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-absence-patterns-cell-empty { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; font-style: italic; color: rgb(var(--ui-falcon-muted) / 0.75); } .ui-absence-patterns-cell--is-zero .ui-absence-patterns-cell-label { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-ops-calendar-event-time { width: 4.25rem; flex-shrink: 0; padding-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-ops-calendar-event-title { font-size: 0.875rem; line-height: 1.25rem; min-width: 0px; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-profile-layout > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .ui-profile-header { display: flex; flex-direction: column; gap: 1rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 1.5rem; } @media (min-width: 640px) { .ui-profile-header { flex-direction: row; align-items: center; } } .ui-profile-meta { min-width: 0px; flex: 1 1 0%; } .ui-tab-layout > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .ui-tab-layout { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 1.5rem; } .ui-slide-panel-layout { position: relative; min-height: 14rem; overflow: hidden; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-slide-panel-layout-main { padding: 0.75rem; padding-right: 42%; } .ui-slide-panel-inline { position: absolute; top: 0px; bottom: 0px; right: 0px; display: flex; width: 40%; min-width: 11rem; flex-direction: column; border-left-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); background-color: rgb(var(--ui-falcon-light) / 0.3); } .ui-slide-panel-inline-header { display: flex; min-height: 3.5rem; flex-shrink: 0; align-items: center; border-bottom-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; } .ui-panel-header-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; } .ui-panel-header-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); margin: 0px; min-width: 0px; } .ui-panel-header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; } .ui-slide-panel-inline-body { flex: 1 1 0%; overflow-y: auto; padding: 0.75rem; } .ui-modal-layout-preview { margin-left: auto; margin-right: auto; width: 100%; max-width: 28rem; overflow: hidden; border-radius: 1rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--ui-shadow-modal); --tw-shadow-colored: var(--ui-shadow-modal); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-drawer-layout-preview { position: relative; min-height: 12rem; overflow: hidden; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-drawer-layout-preview-main { padding: 0.75rem; } .ui-drawer-layout-preview-panel { position: absolute; top: 0px; bottom: 0px; right: 0px; display: flex; width: 45%; min-width: 10rem; flex-direction: column; border-left-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } /* Oodlins product patterns */ .ui-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; text-transform: none; letter-spacing: 0em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-student-card { display: block; width: 100%; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: left; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-student-card:hover { border-color: rgb(var(--ui-falcon-primary) / 0.35); } .ui-student-card--selected { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-primary) / var(--tw-ring-opacity, 1)); } .ui-student-card-main { display: flex; min-width: 0px; align-items: flex-start; gap: 0.75rem; } .ui-student-card-body { min-width: 0px; flex: 1 1 0%; } .ui-student-card-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ui-student-card-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-student-card-subtitle { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-student-card-meta { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-top: 0.375rem; display: flex; flex-wrap: wrap; align-items: center; -moz-column-gap: 0.75rem; column-gap: 0.75rem; row-gap: 0.25rem; } .ui-parent-card { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 1rem; } .ui-parent-card-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-parent-card-relationship { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-top: 0.125rem; } .ui-parent-card-contacts { margin-top: 0.5rem; } .ui-parent-card-contacts > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .ui-parent-card-contacts { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-parent-card-contact { display: flex; min-width: 0px; align-items: center; gap: 0.5rem; } .ui-staff-card { display: flex; align-items: center; gap: 0.75rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); padding: 1rem; } .ui-staff-card-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-staff-card-role { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-progress { height: 0.375rem; width: 100%; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .ui-progress-bar { height: 100%; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .ui-progress-bar--success { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-success) / var(--tw-bg-opacity, 1)); } .ui-progress-label-row { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-bottom: 0.25rem; display: flex; align-items: center; justify-content: space-between; font-weight: 400; } .ui-timeline { position: relative; } .ui-timeline > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .ui-timeline-item { position: relative; display: flex; gap: 0.75rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 1.5rem; } .ui-timeline-dot { position: relative; z-index: 1; margin-top: 0.25rem; height: 0.625rem; width: 0.625rem; flex-shrink: 0; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-opacity: 1; --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); box-shadow: 0 0 0 1px rgb(var(--ui-falcon-border)); } .ui-timeline-date { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-bottom: 0.25rem; font-weight: 400; text-transform: none; } .ui-timeline-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-timeline-description { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.5; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); margin-top: 0.25rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-timeline-meta { font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); padding-top: 0.75rem; } .ui-staff-card--inline { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); background-color: rgb(var(--ui-falcon-light) / 0.7); padding: 0.5rem; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } /* Toast notifications */ .ui-toast-stack { pointer-events: none; position: fixed; right: 1rem; top: 1rem; z-index: 1100; display: flex; width: 100%; max-width: 24rem; flex-direction: column; gap: 0.5rem; } .ui-toast { pointer-events: auto; display: flex; --tw-translate-x: 0.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); align-items: flex-start; gap: 0.75rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 0.75rem; opacity: 0; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border-left-width: 4px; } /* Drag-and-drop — only transient movement uses shadow */ .ui-toast.is-visible { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); opacity: 1; } .ui-toast-icon { margin-top: 0.125rem; flex-shrink: 0; font-size: 1rem; line-height: 1.5rem; line-height: 1; } .ui-toast--success .ui-toast-icon { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-success) / var(--tw-text-opacity, 1)); } .ui-toast--danger .ui-toast-icon { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .ui-toast--warning .ui-toast-icon { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-warning) / var(--tw-text-opacity, 1)); } .ui-toast--info .ui-toast-icon { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-toast-content { min-width: 0px; flex: 1 1 0%; } .ui-toast-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); margin: 0px; } .ui-toast-message { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 400; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); margin: 0px; } .ui-toast-title + .ui-toast-message { margin-top: 0.125rem; } .ui-toast-close { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-width: 0px; background-color: transparent; color: inherit; outline: 2px solid transparent; outline-offset: 2px; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-toast-close:disabled { pointer-events: none; opacity: 0.6; } .ui-toast-close { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; border: none; box-shadow: none; } button.ui-toast-close.ui-icon-btn-default { border: none; outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } button.ui-toast-close.ui-icon-btn-default:hover { outline-color: rgb(var(--ui-falcon-primary) / 0.25); box-shadow: none; } button.ui-toast-close.ui-icon-btn-default:focus, button.ui-toast-close.ui-icon-btn-default:focus-visible { outline: 1px solid rgb(var(--ui-falcon-border)); outline-offset: -1px; box-shadow: none; } .ui-toast-close { background-color: transparent; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-toast-close:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-offset-width: 2px; --tw-ring-offset-color: rgb(var(--ui-falcon-canvas) / 1); } .ui-toast-close { box-shadow: none; } .ui-toast-close:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-toast-close:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-border) / 1); } .ui-toast-close { margin-inline-end: -0.25rem; margin-top: -0.125rem; flex-shrink: 0; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } /* Sonner-style notifications (showcase / future migration) */ .ui-sonner-host { pointer-events: none; position: fixed; bottom: 1rem; right: 1rem; z-index: 1100; display: flex; width: 100%; max-width: 356px; flex-direction: column; gap: 0.5rem; } .ui-sonner-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); padding: 1rem; --tw-shadow: 0 4px 14px 0 rgba(65, 69, 88, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.03); --tw-shadow-colored: 0 4px 14px 0 var(--tw-shadow-color), 0 1px 4px 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); opacity: 0; transform: translateY(calc(100% + 0.5rem)) scale(calc(1 - var(--sonner-depth, 0) * 0.05)); transition: transform 400ms cubic-bezier(0.21, 1.02, 0.73, 1), opacity 400ms cubic-bezier(0.21, 1.02, 0.73, 1); will-change: transform, opacity; } .ui-sonner-toast.is-visible { opacity: 1; transform: translateY(calc(var(--sonner-depth, 0) * -0.5rem)) scale(calc(1 - var(--sonner-depth, 0) * 0.05)); } .ui-sonner-toast.is-leaving { opacity: 0; transform: translateY(-0.75rem) scale(0.96); transition-duration: 200ms; } .ui-sonner-toast-icon { margin-top: 0.125rem; display: flex; height: 1.25rem; width: 1.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; font-size: 10px; line-height: 1; } .ui-sonner-toast--success .ui-sonner-toast-icon { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-success-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-success) / var(--tw-text-opacity, 1)); } .ui-sonner-toast--danger .ui-sonner-toast-icon { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .ui-sonner-toast--warning .ui-sonner-toast-icon { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-warning-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-warning) / var(--tw-text-opacity, 1)); } .ui-sonner-toast--info .ui-sonner-toast-icon { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-sonner-toast-content { min-width: 0px; flex: 1 1 0%; } .ui-sonner-toast-title { margin: 0px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-sonner-toast-message { margin: 0px; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 1.375; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-sonner-toast-close { margin-inline-end: -0.25rem; margin-top: -0.125rem; display: inline-flex; height: 1.25rem; width: 1.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.5rem; border-width: 0px; background-color: transparent; padding: 0px; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-sonner-toast-close:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-sonner-showcase-host { position: relative; margin-left: auto; display: flex; width: 100%; max-width: 356px; flex-direction: column; gap: 0.5rem; } .ui-sonner-showcase-host .ui-sonner-toast:nth-child(1) { --sonner-depth: 2; } .ui-sonner-showcase-host .ui-sonner-toast:nth-child(2) { --sonner-depth: 1; } .ui-sonner-showcase-host .ui-sonner-toast:nth-child(3) { --sonner-depth: 0; } .ui-sonner-showcase-host .ui-sonner-toast.is-visible { opacity: 1; transform: translateY(calc(var(--sonner-depth, 0) * -0.5rem)) scale(calc(1 - var(--sonner-depth, 0) * 0.05)); } .oodlins-ui-showcase { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } /* Long-form wizard — main column + sticky section rail (Assessment Report Pro pattern) */ .ui-form-wizard-layout { margin-left: auto; margin-right: auto; display: flex; max-width: 72rem; align-items: flex-start; gap: 0.75rem; } .ui-form-wizard-main { min-width: 0px; flex: 1 1 0%; } .ui-form-section-nav { width: 15rem; flex-shrink: 0; align-self: flex-start; position: sticky; top: 4.5rem; z-index: 20; max-height: calc(100vh - 4.5rem); } .ui-app-header-org-form.ui-form-section-nav--responsive { display: none; } .ui-form-section-nav--responsive { display: none; } @media (min-width: 1024px) { .ui-form-section-nav--responsive { display: block; } } .ui-form-section-nav-rail { max-height: 100%; overflow-y: auto; padding-bottom: 0.5rem; scrollbar-width: thin; scrollbar-color: rgb(var(--ui-falcon-border) / 1) transparent; } .ui-form-section-nav-rail::-webkit-scrollbar { width: 6px; } .ui-form-section-nav-rail::-webkit-scrollbar-thumb { background-color: rgb(var(--ui-falcon-border) / 1); border-radius: 9999px; } .ui-form-section-scroll-target { scroll-margin-top: 4.5rem; } .ui-form-section-nav-panel { min-width: 0px; } .ui-form-section-nav-meta { margin-bottom: 0.375rem; } .ui-form-section-nav-meta > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .ui-form-section-nav-meta { border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); background-color: rgb(var(--ui-falcon-light) / 0.6); padding-left: 0.625rem; padding-right: 0.625rem; padding-top: 0.375rem; padding-bottom: 0.375rem; } .ui-form-section-nav-meta-row { display: flex; min-width: 0px; align-items: center; gap: 0.5rem; } .ui-form-section-nav-meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: 0.025em; flex-shrink: 0; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-form-section-nav-meta-value { min-width: 0px; flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-form-section-nav-context-select { min-height: 0px; width: 100%; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; } .ui-form-section-nav-progress { height: 0.25rem; flex: 1 1 0%; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .ui-form-section-nav-progress-bar { height: 100%; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .ui-form-section-nav-progress-count { flex-shrink: 0; font-size: 10px; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-form-section-nav-list { margin: 0px; list-style-type: none; } .ui-form-section-nav-list > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } .ui-form-section-nav-list { padding: 0px; } .ui-form-section-nav-item { display: flex; width: 100%; cursor: pointer; align-items: center; gap: 0.5rem; border-radius: 0.5rem; border-width: 1px; border-color: transparent; background-color: transparent; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.375rem; padding-bottom: 0.375rem; text-align: left; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .ui-form-section-nav-item:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .ui-form-section-nav-item--active { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); } .ui-form-section-nav-item--active:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); } .ui-form-section-nav-item--error { border-color: rgb(var(--ui-falcon-danger) / 0.4); background-color: rgb(var(--ui-falcon-danger-soft) / 0.3); } .ui-form-section-nav-item--error:hover { background-color: rgb(var(--ui-falcon-danger-soft) / 0.5); } .ui-form-section-nav-step { display: flex; height: 1rem; width: 1rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); font-size: 8px; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-form-section-nav-step--complete { border-width: 0px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-success) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-form-section-nav-step--error { border-width: 0px; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .ui-form-section-nav-label { min-width: 0px; flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-form-section-nav-item--active .ui-form-section-nav-label { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } /* Portal app shell + sidebar (warm school OS palette) */ .ui-app-shell { --ui-shell-bg: #fafaf8; --ui-shell-border: #ece7e1; --ui-shell-hover: #f3f0eb; --ui-shell-muted: #a3a09a; --ui-shell-text: #2d2d2d; } .ui-app-shell .container-fluid[data-layout='container'], .ui-app-shell__frame.container-fluid[data-layout='container'] { display: flex; min-height: 100vh; width: 100%; max-width: none; align-items: flex-start; gap: 0px; padding: 0px; } .ui-app-shell .content, .ui-app-shell__main.content { margin-left: 0 !important; } .ui-app-shell .\!content, .ui-app-shell__main.\!content { margin-left: 0 !important; } .ui-app-shell .content, .ui-app-shell__main.content { min-width: 0px; flex: 1 1 0%; } .ui-app-shell .\!content, .ui-app-shell__main.\!content { min-width: 0px; flex: 1 1 0%; } .ui-app-shell .content, .ui-app-shell__main.content { background-color: rgb(var(--ui-falcon-canvas)); padding-left: 0; } .ui-app-shell .\!content, .ui-app-shell__main.\!content { background-color: rgb(var(--ui-falcon-canvas)) !important; padding-left: 0 !important; } .ui-app-shell #app { min-width: 0px; padding-top: 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } @media (min-width: 1280px) { .ui-app-shell #app { padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 1199.98px) { .ui-app-shell #app { padding-top: 0; padding-left: 0; padding-right: 0; } } .ui-app-shell .navbar-vertical + .content { margin-left: 0 !important; } .ui-app-shell .navbar-vertical + .\!content { margin-left: 0 !important; } .ui-sidebar { --ui-sidebar-bg: var(--ui-shell-bg); --ui-sidebar-border: var(--ui-shell-border); --ui-sidebar-hover: var(--ui-shell-hover); --ui-sidebar-active-bg: #e8f1fc; --ui-sidebar-active-text: #2563b8; --ui-sidebar-section: #a3a09a; --ui-sidebar-item: #2d2d2d; --ui-sidebar-muted: #8a847c; --ui-sidebar-icon: #9a9a9a; --ui-sidebar-nested: #4a4a4a; --ui-sidebar-inset-x: 0.875rem; position: relative; z-index: 1040; display: flex; flex-shrink: 0; flex-direction: column; width: 15.75rem; max-width: 15.75rem; background-color: var(--ui-sidebar-bg); color: var(--ui-sidebar-item); min-height: 100vh; height: 100vh; top: 0; } .ui-sidebar__chrome { display: flex; min-height: 0px; flex: 1 1 0%; flex-direction: column; border-right: 1px solid var(--ui-sidebar-border); } @media (min-width: 1200px) { .ui-sidebar { position: sticky; align-self: flex-start; } } @media (max-width: 1199.98px) { .ui-sidebar { position: fixed; left: 0px; --tw-shadow: var(--ui-shadow-float); --tw-shadow-colored: var(--ui-shadow-float); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); transform: translateX(-100%); transition: transform 0.22s ease; } .ui-sidebar:has(#navbarVerticalCollapse.show) { transform: translateX(0); } .ui-app-shell__frame:has(#navbarVerticalCollapse.show)::before { content: ''; position: fixed; inset: 0px; z-index: 1035; background-color: rgb(var(--ui-falcon-scrim) / 0.35); } .ui-sidebar:has(#navbarVerticalCollapse.\!show) { transform: translateX(0) !important; } .ui-app-shell__frame:has(#navbarVerticalCollapse.\!show)::before { content: '' !important; position: fixed; inset: 0px; z-index: 1035; background-color: rgb(var(--ui-falcon-scrim) / 0.35); } .ui-sidebar:has(#navbarVerticalCollapse.\!show) { transform: translateX(0) !important; } .ui-app-shell__frame:has(#navbarVerticalCollapse.\!show)::before { content: '' !important; position: fixed; inset: 0px; z-index: 1035; background-color: rgb(var(--ui-falcon-scrim) / 0.35); } .ui-sidebar:has(#navbarVerticalCollapse.\!show) { transform: translateX(0) !important; } .ui-app-shell__frame:has(#navbarVerticalCollapse.\!show)::before { content: '' !important; position: fixed; inset: 0px; z-index: 1035; background-color: rgb(var(--ui-falcon-scrim) / 0.35); } } /* App shell header — unified with sidebar palette */ .ui-app-header { position: sticky; top: 0px; z-index: 30; flex-shrink: 0; background-color: var(--ui-shell-bg); border-bottom: 1px solid var(--ui-shell-border); } .ui-app-header__inner { display: flex; height: 3.5rem; align-items: center; gap: 0.625rem; padding-left: 1.5rem; padding-right: 1.5rem; } .ui-app-header__toggle { display: inline-flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.75rem; border-width: 0px; background-color: transparent; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-app-header__toggle:hover { background-color: var(--ui-shell-hover); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-app-header__toggle-icon { position: relative; display: inline-block; height: 0.625rem; width: 1rem; } .ui-app-header__toggle-line { position: absolute; left: 0px; display: block; height: 0.125rem; width: 100%; border-radius: 9999px; background-color: currentColor; } .ui-app-header__toggle-line:nth-child(1) { top: 0; } .ui-app-header__toggle-line:nth-child(2) { top: 50%; transform: translateY(-50%); } .ui-app-header__toggle-line:nth-child(3) { bottom: 0; } .ui-app-header__search { position: relative; display: flex; min-width: 0px; flex: 1 1 0%; max-width: 42rem; } .ui-app-header__search .ui-search-input { height: 2.25rem; gap: 0.375rem; background-color: var(--ui-shell-bg); padding-left: 0.625rem; padding-right: 0.625rem; } .ui-app-header__search .ui-search-input-icon { font-size: 10px; } .ui-app-header__search .ui-search-input-field { font-size: 0.75rem; line-height: 1rem; } .ui-app-header__actions { margin-inline-start: auto; display: flex; flex-shrink: 0; align-items: center; gap: 0.375rem; } .ui-app-header__pill { display: inline-flex; max-width: 14rem; align-items: center; gap: 0.375rem; border-radius: 0.75rem; border-width: 0px; background-color: transparent; padding-left: 0.625rem; padding-right: 0.625rem; padding-top: 0.375rem; padding-bottom: 0.375rem; text-align: left; font-size: 11px; font-weight: 500; color: var(--ui-shell-text); text-decoration-line: none; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-app-header__pill:hover { background-color: var(--ui-shell-hover); } .ui-app-header__pill-label { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-app-header__pill-chevron { flex-shrink: 0; font-size: 9px; color: var(--ui-shell-muted); } .ui-app-header__org-logo { height: 1.25rem; width: auto; max-width: 1.5rem; flex-shrink: 0; border-radius: 0.25rem; -o-object-fit: contain; object-fit: contain; } .ui-app-header__hub-link { display: inline-flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.75rem; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-app-header__hub-link:hover { background-color: var(--ui-shell-hover); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-app-header-search-panel { position: absolute; inset-inline-start: 0px; top: 100%; z-index: 50; margin-top: 0.25rem; width: 100%; min-width: 18rem; overflow: hidden; border-radius: 0.75rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); --tw-shadow: var(--ui-shadow-float); --tw-shadow-colored: var(--ui-shadow-float); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .ui-app-header-search-panel__body { max-height: 25rem; overflow-y: auto; } .ui-app-header-search-item { display: flex; cursor: pointer; align-items: center; gap: 0.75rem; border-width: 0px; border-bottom-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); background-color: transparent; padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: left; transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-app-header-search-item:last-child { border-bottom-width: 0px; } .ui-app-header-search-item:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .ui-app-header-search-item__icon { display: flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.5rem; --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-app-header-search-item__label { margin: 0px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .ui-app-header-search-item__type { margin: 0px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-app-header-search-loading, .ui-app-header-search-empty { padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: center; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-app-header-org-filter { padding-left: 0.75rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-top: 0.25rem; } .ui-app-header-org-list { max-height: 40vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; } .ui-app-header-org-list:hover, .ui-app-header-org-list:focus-within { scrollbar-color: rgb(180 174 166 / 0.45) transparent; } .ui-app-header-org-list::-webkit-scrollbar { width: 5px; } .ui-app-header-org-list::-webkit-scrollbar-track { background: transparent; } .ui-app-header-org-list::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 9999px; } .ui-app-header-org-list:hover::-webkit-scrollbar-thumb, .ui-app-header-org-list:focus-within::-webkit-scrollbar-thumb { background-color: rgb(180 174 166 / 0.55); } .ui-app-header-org-form { margin: 0px; display: block; width: 100%; } .ui-app-header-org-form.hidden { display: none !important; } .ui-app-header-org-item { display: flex; width: 100%; align-items: center; gap: 0.5rem; border-width: 0px; background-color: transparent; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; text-align: left; font-size: 11px; font-weight: 400; text-transform: none; line-height: 1.25; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ui-app-header-org-item:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-app-header-org-item { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; } .ui-app-header-org-item--active { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-app-header-org-item--active:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .ui-app-header-org-item--active .ui-app-header-org-item__name { font-weight: 500; } .ui-app-header-org-item__logo { display: flex; height: 1.5rem; width: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: 0.25rem; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .ui-app-header-org-item__logo img { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } .ui-app-header-org-item__logo-fallback { font-size: 9px; font-weight: 500; --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .ui-app-header-org-item__name { min-width: 0px; flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 400; line-height: 1.25; } .ui-app-header-org-dropdown .ui-menu-panel { min-width: 18rem; max-width: 22rem; border-width: 0px; padding-top: 0.5rem; padding-bottom: 0.5rem; } @media (max-width: 767.98px) { .ui-app-header-org-form.ui-app-header__search { display: none; } .ui-app-header__search { display: none; } .ui-app-header__inner { gap: 0.5rem; padding-left: 1rem; padding-right: 1rem; } } @media (min-width: 768px) { .ui-app-header-org-form.ui-app-header__mobile-search { display: none; } .ui-app-header__mobile-search { display: none; } } .ui-sidebar__brand { padding-left: var(--ui-sidebar-inset-x); padding-right: var(--ui-sidebar-inset-x); display: flex; flex-shrink: 0; align-items: center; padding-bottom: 0.5rem; padding-top: 0.75rem; } .ui-sidebar__brand-link { display: inline-flex; min-width: 0px; align-items: center; text-decoration-line: none; } .ui-sidebar__logo { height: 2rem; width: auto; max-width: 9rem; flex-shrink: 0; -o-object-fit: contain; object-fit: contain; } .ui-sidebar__body { display: flex; min-height: 0px; width: 100%; flex: 1 1 0%; flex-direction: column; overflow: hidden; padding: 0px; margin: 0; } .ui-sidebar .ui-sidebar__body.navbar-collapse { padding: 0 !important; margin: 0 !important; } @media (min-width: 1200px) { .ui-sidebar__body.collapse { display: flex !important; visibility: visible !important; } } .ui-sidebar__nav { display: flex; width: 100%; min-width: 0px; flex: 1 1 0%; flex-direction: column; gap: 0.125rem; overflow-y: auto; padding-bottom: 0.5rem; padding-top: 0.25rem; padding-left: 0; padding-right: 0.125rem; margin: 0; scrollbar-width: thin; scrollbar-color: transparent transparent; } .ui-sidebar__nav:hover { scrollbar-color: rgb(180 174 166 / 0.45) transparent; } .ui-sidebar__nav::-webkit-scrollbar { width: 5px; } .ui-sidebar__nav::-webkit-scrollbar-track { background: transparent; } .ui-sidebar__nav::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 9999px; } .ui-sidebar:hover .ui-sidebar__nav::-webkit-scrollbar-thumb, .ui-sidebar__nav:focus-within::-webkit-scrollbar-thumb { background-color: rgb(180 174 166 / 0.45); } .ui-sidebar__nav:hover::-webkit-scrollbar-thumb { background-color: rgb(180 174 166 / 0.55); } .ui-sidebar__group { display: flex; flex-direction: column; gap: 0.125rem; padding-top: 0.625rem; margin-bottom: 0; } .ui-sidebar__group--primary { padding-top: 0; } .ui-sidebar__list { margin: 0px; display: flex; list-style-type: none; flex-direction: column; gap: 0.125rem; padding: 0px; } .ui-sidebar__item { list-style-type: none; } .ui-sidebar-section-trigger { margin-bottom: 0.125rem; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.5rem; border-radius: 0.5rem; border-width: 0px; background-color: transparent; padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: left; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; padding-left: var(--ui-sidebar-inset-x); padding-right: var(--ui-sidebar-inset-x); color: var(--ui-sidebar-section); } .ui-sidebar-section-trigger:hover { background-color: var(--ui-sidebar-hover); } .ui-sidebar-section-label { font-weight: 400; text-transform: none; font-size: 12px; line-height: 1.3; letter-spacing: 0.02em; color: var(--ui-sidebar-section); } .ui-sidebar-chevron { display: inline-flex; flex-shrink: 0; transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; color: var(--ui-sidebar-section); } .ui-sidebar-section-trigger[aria-expanded='true'] .ui-sidebar-chevron, .ui-sidebar-link--group[aria-expanded='true'] .ui-sidebar-chevron { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); color: var(--ui-sidebar-active-text); } .ui-sidebar-section-panel { margin: 0px; display: flex; list-style-type: none; flex-direction: column; gap: 0.125rem; padding: 0px; } .ui-sidebar-section-panel--nested { border-inline-start-width: 1px; padding-inline-start: 0.375rem; margin-inline-start: var(--ui-sidebar-inset-x); border-color: var(--ui-sidebar-border); } /* Subsection divider labels — left inset matches .ui-sidebar-link (icon column) */ .ui-sidebar-subsection { list-style-type: none; margin: 0.75rem 0 0.25rem; padding-left: var(--ui-sidebar-inset-x); padding-right: var(--ui-sidebar-inset-x); } .ui-sidebar-section-panel > .ui-sidebar-subsection:first-child { margin-top: 0.25rem; } .ui-sidebar-subsection-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ui-sidebar-muted, #8a847c); line-height: 1.3; } .ui-sidebar-subsection-label::after { content: ''; flex: 1 1 auto; height: 1px; background-color: var(--ui-sidebar-border, #e8e6e1); } .ui-sidebar-link { display: flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 1.375; text-decoration-line: none; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; margin-left: 0; margin-right: 0; padding-left: var(--ui-sidebar-inset-x); padding-right: var(--ui-sidebar-inset-x); font-size: 15px; font-weight: 500; color: var(--ui-sidebar-item); } .ui-sidebar-link:hover { background-color: var(--ui-sidebar-hover); color: var(--ui-sidebar-active-text); } .ui-sidebar-link--nested { padding-top: 0.375rem; padding-bottom: 0.375rem; padding-inline-start: 0.75rem; font-size: 12px; font-weight: 400; color: var(--ui-sidebar-nested); } .ui-sidebar-link--active { background-color: var(--ui-sidebar-active-bg); color: var(--ui-sidebar-active-text); font-weight: 500; box-shadow: none; } .ui-sidebar-link--group { width: 100%; border-width: 0px; background-color: transparent; text-align: left; font-size: 15px; font-weight: 500; color: var(--ui-sidebar-item); } .ui-sidebar-link-icon { display: inline-flex; width: 1.125rem; flex-shrink: 0; justify-content: center; font-size: 0.875rem; color: var(--ui-sidebar-icon); } .ui-sidebar-link--active .ui-sidebar-link-icon, .ui-sidebar-link:hover .ui-sidebar-link-icon { color: var(--ui-sidebar-active-text); } .ui-sidebar-link-text { min-width: 0px; flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-sidebar-link-badge { margin-inline-start: 0.25rem; flex-shrink: 0; } .ui-sidebar-chevron--inline { margin-inline-start: auto; } .ui-sidebar__toolbar { padding-left: var(--ui-sidebar-inset-x); padding-right: var(--ui-sidebar-inset-x); flex-shrink: 0; padding-bottom: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--ui-sidebar-border); background-color: var(--ui-sidebar-bg); } .ui-sidebar__toolbar-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; } .ui-sidebar__toolbar-btn { display: inline-flex; height: 2.25rem; flex: 1 1 0%; align-items: center; justify-content: center; border-radius: 9999px; border-width: 0px; background-color: transparent; text-decoration-line: none; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; color: var(--ui-sidebar-section); } .ui-sidebar__toolbar-btn:hover { background-color: var(--ui-sidebar-hover); color: var(--ui-sidebar-active-text); } .ui-sidebar__toolbar-btn--muted:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } /* Dark theme — shell + sidebar (contrast-aligned with falcon tokens) */ .dark .ui-app-shell { --ui-shell-bg: rgb(var(--ui-falcon-light)); --ui-shell-border: rgb(var(--ui-falcon-border)); --ui-shell-hover: rgb(var(--ui-falcon-soft)); --ui-shell-muted: rgb(var(--ui-falcon-muted)); --ui-shell-text: rgb(var(--ui-falcon-text)); } .dark .ui-app-shell .content, .dark .ui-app-shell__main.content { background-color: rgb(var(--ui-falcon-canvas)); } .dark .ui-app-shell .\!content, .dark .ui-app-shell__main.\!content { background-color: rgb(var(--ui-falcon-canvas)) !important; } .dark .ui-sidebar { --ui-sidebar-active-bg: rgb(var(--ui-falcon-primary-soft)); --ui-sidebar-active-text: rgb(var(--ui-falcon-primary)); --ui-sidebar-section: rgb(var(--ui-falcon-muted)); --ui-sidebar-item: rgb(var(--ui-falcon-text)); --ui-sidebar-muted: rgb(var(--ui-falcon-muted)); --ui-sidebar-icon: rgb(var(--ui-falcon-muted)); --ui-sidebar-nested: rgb(var(--ui-falcon-muted)); } .dark .ui-sidebar__nav:hover { scrollbar-color: rgb(var(--ui-falcon-border) / 0.65) transparent; } .dark .ui-sidebar:hover .ui-sidebar__nav::-webkit-scrollbar-thumb, .dark .ui-sidebar__nav:focus-within::-webkit-scrollbar-thumb, .dark .ui-sidebar__nav:hover::-webkit-scrollbar-thumb { background-color: rgb(var(--ui-falcon-border) / 0.65); } .dark .ui-sidebar__toolbar-btn--muted { color: rgb(var(--ui-falcon-danger) / 0.9); } .dark .ui-sidebar__toolbar-btn--muted:hover { background-color: rgb(var(--ui-falcon-danger-soft)); color: rgb(var(--ui-falcon-danger)); } /* Dark theme — app header */ .dark .ui-app-header__search .ui-search-input { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .dark .ui-app-header__search .ui-search-input-field { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .dark .ui-app-header__search .ui-search-input-field::-moz-placeholder { color: rgb(var(--ui-falcon-muted) / 0.7); } .dark .ui-app-header__search .ui-search-input-field::placeholder { color: rgb(var(--ui-falcon-muted) / 0.7); } .dark .ui-app-header-org-list:hover, .dark .ui-app-header-org-list:focus-within { scrollbar-color: rgb(var(--ui-falcon-border) / 0.65) transparent; } .dark .ui-app-header-org-list:hover::-webkit-scrollbar-thumb, .dark .ui-app-header-org-list:focus-within::-webkit-scrollbar-thumb { background-color: rgb(var(--ui-falcon-border) / 0.65); } .dark .ui-app-shell #app { background-color: transparent; } /* Dark theme — inactive tab pills read better on canvas */ .dark .ui-filter-pill:not(.ui-filter-pill--active) { background-color: rgb(var(--ui-falcon-soft)); } .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; } .pointer-events-none { pointer-events: none; } .\!static { position: static !important; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .\!sticky { position: sticky !important; } .sticky { position: sticky; } .\!inset-auto { inset: auto !important; } .inset-0 { inset: 0px; } .inset-y-0 { top: 0px; bottom: 0px; } .-top-1\.5 { top: -0.375rem; } .bottom-0 { bottom: 0px; } .bottom-full { bottom: 100%; } .end-0 { inset-inline-end: 0px; } .left-0 { left: 0px; } .left-10 { left: 2.5rem; } .right-0 { right: 0px; } .right-1 { right: 0.25rem; } .right-1\.5 { right: 0.375rem; } .right-10 { right: 2.5rem; } .right-5 { right: 1.25rem; } .start-0 { inset-inline-start: 0px; } .top-0 { top: 0px; } .top-1 { top: 0.25rem; } .top-1\.5 { top: 0.375rem; } .top-10 { top: 2.5rem; } .top-2 { top: 0.5rem; } .top-3 { top: 0.75rem; } .top-7 { top: 1.75rem; } .top-full { top: 100%; } .z-10 { z-index: 10; } .z-30 { z-index: 30; } .z-50 { z-index: 50; } .z-\[1040\] { z-index: 1040; } .z-\[1044\] { z-index: 1044; } .z-\[1045\] { z-index: 1045; } .z-\[1050\] { z-index: 1050; } .z-\[1055\] { z-index: 1055; } .z-\[1060\] { z-index: 1060; } .z-\[1\] { z-index: 1; } .z-dropdown { z-index: 50; } .z-sticky { z-index: 30; } .order-1 { order: 1; } .order-2 { order: 2; } .col-auto { grid-column: auto; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-10 { grid-column: span 10 / span 10; } .col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } .col-span-9 { grid-column: span 9 / span 9; } .col-span-full { grid-column: 1 / -1; } .float-start { float: inline-start; } .float-end { float: inline-end; } .clear-right { clear: right; } .m-0 { margin: 0px; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-3 { margin: 0.75rem; } .m-8 { margin: 2rem; } .m-auto { margin: auto; } .-mx-1\.5 { margin-left: -0.375rem; margin-right: -0.375rem; } .mx-0 { margin-left: 0px; margin-right: 0px; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-0 { margin-top: 0px; margin-bottom: 0px; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; } .my-4 { margin-top: 1rem; margin-bottom: 1rem; } .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .my-8 { margin-top: 2rem; margin-bottom: 2rem; } .my-auto { margin-top: auto; margin-bottom: auto; } .\!mb-1 { margin-bottom: 0.25rem !important; } .mb-0 { margin-bottom: 0px; } .mb-1 { margin-bottom: 0.25rem; } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-lg { margin-bottom: 1rem; } .mb-md { margin-bottom: 0.75rem; } .mb-sm { margin-bottom: 0.5rem; } .mb-xs { margin-bottom: 0.25rem; } .me-1 { margin-inline-end: 0.25rem; } .me-1\.5 { margin-inline-end: 0.375rem; } .me-2 { margin-inline-end: 0.5rem; } .me-3 { margin-inline-end: 0.75rem; } .me-auto { margin-inline-end: auto; } .ml-1 { margin-left: 0.25rem; } .ml-10 { margin-left: 2.5rem; } .ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; } .ml-auto { margin-left: auto; } .mr-0\.5 { margin-right: 0.125rem; } .mr-1 { margin-right: 0.25rem; } .mr-1\.5 { margin-right: 0.375rem; } .mr-10 { margin-right: 2.5rem; } .mr-2 { margin-right: 0.5rem; } .mr-auto { margin-right: auto; } .ms-0 { margin-inline-start: 0px; } .ms-1 { margin-inline-start: 0.25rem; } .ms-2 { margin-inline-start: 0.5rem; } .ms-3 { margin-inline-start: 0.75rem; } .ms-4 { margin-inline-start: 1rem; } .ms-5 { margin-inline-start: 1.25rem; } .ms-auto { margin-inline-start: auto; } .mt-0 { margin-top: 0px; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.5rem; } .mt-2\.5 { margin-top: 0.625rem; } .mt-20 { margin-top: 5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-auto { margin-top: auto; } .mt-lg { margin-top: 1rem; } .mt-md { margin-top: 0.75rem; } .mt-sm { margin-top: 0.5rem; } .mt-xs { margin-top: 0.25rem; } .box-border { box-sizing: border-box; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .\!table { display: table !important; } .table { display: table; } .table-row { display: table-row; } .flow-root { display: flow-root; } .\!grid { display: grid !important; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .aspect-square { aspect-ratio: 1 / 1; } .\!h-6 { height: 1.5rem !important; } .\!h-7 { height: 1.75rem !important; } .\!h-auto { height: auto !important; } .h-1 { height: 0.25rem; } .h-1\.5 { height: 0.375rem; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-16 { height: 4rem; } .h-2 { height: 0.5rem; } .h-2\.5 { height: 0.625rem; } .h-3 { height: 0.75rem; } .h-3\.5 { height: 0.875rem; } .h-32 { height: 8rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-64 { height: 16rem; } .h-7 { height: 1.75rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-\[calc\(100vh-5rem\)\] { height: calc(100vh - 5rem); } .h-auto { height: auto; } .h-full { height: 100%; } .max-h-12 { max-height: 3rem; } .max-h-16 { max-height: 4rem; } .max-h-20 { max-height: 5rem; } .max-h-24 { max-height: 6rem; } .max-h-44 { max-height: 11rem; } .max-h-72 { max-height: 18rem; } .max-h-80 { max-height: 20rem; } .max-h-\[10rem\] { max-height: 10rem; } .max-h-\[120px\] { max-height: 120px; } .max-h-\[280px\] { max-height: 280px; } .max-h-\[40vh\] { max-height: 40vh; } .max-h-\[60vh\] { max-height: 60vh; } .max-h-\[70vh\] { max-height: 70vh; } .max-h-\[85vh\] { max-height: 85vh; } .max-h-\[8rem\] { max-height: 8rem; } .min-h-0 { min-height: 0px; } .min-h-\[18rem\] { min-height: 18rem; } .min-h-\[28rem\] { min-height: 28rem; } .min-h-\[2rem\] { min-height: 2rem; } .min-h-\[50vh\] { min-height: 50vh; } .min-h-\[560px\] { min-height: 560px; } .min-h-\[5rem\] { min-height: 5rem; } .min-h-\[6rem\] { min-height: 6rem; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .\!w-6 { width: 1.5rem !important; } .\!w-7 { width: 1.75rem !important; } .w-1 { width: 0.25rem; } .w-1\.5 { width: 0.375rem; } .w-10 { width: 2.5rem; } .w-11 { width: 2.75rem; } .w-12 { width: 3rem; } .w-14 { width: 3.5rem; } .w-16 { width: 4rem; } .w-2 { width: 0.5rem; } .w-2\.5 { width: 0.625rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-28 { width: 7rem; } .w-3 { width: 0.75rem; } .w-3\.5 { width: 0.875rem; } .w-32 { width: 8rem; } .w-36 { width: 9rem; } .w-4 { width: 1rem; } .w-40 { width: 10rem; } .w-44 { width: 11rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-60 { width: 15rem; } .w-64 { width: 16rem; } .w-7 { width: 1.75rem; } .w-8 { width: 2rem; } .w-9 { width: 2.25rem; } .w-auto { width: auto; } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .min-w-0 { min-width: 0px; } .min-w-\[1\.25rem\] { min-width: 1.25rem; } .min-w-\[11rem\] { min-width: 11rem; } .min-w-\[12rem\] { min-width: 12rem; } .min-w-\[140px\] { min-width: 140px; } .min-w-\[14rem\] { min-width: 14rem; } .min-w-\[160px\] { min-width: 160px; } .min-w-\[16rem\] { min-width: 16rem; } .min-w-\[190px\] { min-width: 190px; } .min-w-\[200px\] { min-width: 200px; } .min-w-\[240px\] { min-width: 240px; } .min-w-\[28px\] { min-width: 28px; } .min-w-\[6rem\] { min-width: 6rem; } .min-w-\[9rem\] { min-width: 9rem; } .min-w-full { min-width: 100%; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-6xl { max-width: 72rem; } .max-w-\[10rem\] { max-width: 10rem; } .max-w-\[11rem\] { max-width: 11rem; } .max-w-\[120px\] { max-width: 120px; } .max-w-\[12rem\] { max-width: 12rem; } .max-w-\[14rem\] { max-width: 14rem; } .max-w-\[160px\] { max-width: 160px; } .max-w-\[16rem\] { max-width: 16rem; } .max-w-\[200px\] { max-width: 200px; } .max-w-\[220px\] { max-width: 220px; } .max-w-\[260px\] { max-width: 260px; } .max-w-\[280px\] { max-width: 280px; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[55\%\] { max-width: 55%; } .max-w-\[600px\] { max-width: 600px; } .max-w-\[8rem\] { max-width: 8rem; } .max-w-\[min\(16rem\2c calc\(100vw-2rem\)\)\] { max-width: min(16rem, calc(100vw - 2rem)); } .max-w-full { max-width: 100%; } .max-w-lg { max-width: 32rem; } .max-w-md { max-width: 28rem; } .max-w-none { max-width: none; } .max-w-sm { max-width: 24rem; } .max-w-xs { max-width: 20rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .grow { flex-grow: 1; } .border-collapse { border-collapse: collapse; } .-rotate-90 { --tw-rotate: -90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-0 { --tw-rotate: 0deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-default { cursor: default; } .cursor-help { cursor: help; } .cursor-move { cursor: move; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .select-all { -webkit-user-select: all; -moz-user-select: all; user-select: all; } .resize-none { resize: none; } .resize-y { resize: vertical; } .resize-x { resize: horizontal; } .resize { resize: both; } .list-disc { list-style-type: disc; } .list-none { list-style-type: none; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid-cols-\[6\.5rem_minmax\(0\2c 1fr\)\] { grid-template-columns: 6.5rem minmax(0,1fr); } .grid-cols-\[7\.25rem_minmax\(0\2c 1fr\)\] { grid-template-columns: 7.25rem minmax(0,1fr); } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-evenly { justify-content: space-evenly; } .gap-0 { gap: 0px; } .gap-0\.5 { gap: 0.125rem; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-lg { gap: 1rem; } .gap-md { gap: 0.75rem; } .gap-sm { gap: 0.5rem; } .gap-xs { gap: 0.25rem; } .gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; } .gap-y-1 { row-gap: 0.25rem; } .gap-y-1\.5 { row-gap: 0.375rem; } .gap-y-3 { row-gap: 0.75rem; } .gap-y-4 { row-gap: 1rem; } .gap-y-lg { row-gap: 1rem; } .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .space-y-md > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-xl > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } .divide-falcon-border > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-divide-opacity, 1)); } .divide-falcon-border-subtle > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-divide-opacity, 1)); } .divide-falcon-soft\/80 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--ui-falcon-soft) / 0.8); } .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1)); } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-wrap { white-space: pre-wrap; } .text-wrap { text-wrap: wrap; } .text-nowrap { text-wrap: nowrap; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .rounded { border-radius: 0.25rem; } .rounded-\[2px\] { border-radius: 2px; } .rounded-\[4px\] { border-radius: 4px; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: 0.75rem; } .rounded-md { border-radius: 0.5rem; } .rounded-sm { border-radius: 0.25rem; } .rounded-xl { border-radius: 1rem; } .rounded-l-md { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .rounded-r-md { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .\!border-0 { border-width: 0px !important; } .border { border-width: 1px; } .border-0 { border-width: 0px; } .border-2 { border-width: 2px; } .border-4 { border-width: 4px; } .border-y { border-top-width: 1px; border-bottom-width: 1px; } .border-b { border-bottom-width: 1px; } .border-l { border-left-width: 1px; } .border-l-2 { border-left-width: 2px; } .border-l-4 { border-left-width: 4px; } .border-r { border-right-width: 1px; } .border-s { border-inline-start-width: 1px; } .border-t { border-top-width: 1px; } .border-solid { border-style: solid; } .border-dashed { border-style: dashed; } .border-amber-200 { --tw-border-opacity: 1; border-color: rgb(253 230 138 / var(--tw-border-opacity, 1)); } .border-blue-500 { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); } .border-blue-600 { --tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity, 1)); } .border-emerald-200 { --tw-border-opacity: 1; border-color: rgb(167 243 208 / var(--tw-border-opacity, 1)); } .border-emerald-600 { --tw-border-opacity: 1; border-color: rgb(5 150 105 / var(--tw-border-opacity, 1)); } .border-falcon-border { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); } .border-falcon-border-subtle { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border-subtle) / var(--tw-border-opacity, 1)); } .border-falcon-border-subtle\/70 { border-color: rgb(var(--ui-falcon-border-subtle) / 0.7); } .border-falcon-border\/60 { border-color: rgb(var(--ui-falcon-border) / 0.6); } .border-falcon-danger { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-danger) / var(--tw-border-opacity, 1)); } .border-falcon-primary { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); } .border-falcon-primary\/20 { border-color: rgb(var(--ui-falcon-primary) / 0.2); } .border-falcon-soft { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-soft) / var(--tw-border-opacity, 1)); } .border-falcon-success { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-success) / var(--tw-border-opacity, 1)); } .border-falcon-text { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-text) / var(--tw-border-opacity, 1)); } .border-falcon-warning\/30 { border-color: rgb(var(--ui-falcon-warning) / 0.3); } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } .border-rose-200 { --tw-border-opacity: 1; border-color: rgb(254 205 211 / var(--tw-border-opacity, 1)); } .border-rose-500 { --tw-border-opacity: 1; border-color: rgb(244 63 94 / var(--tw-border-opacity, 1)); } .border-rose-600 { --tw-border-opacity: 1; border-color: rgb(225 29 72 / var(--tw-border-opacity, 1)); } .border-slate-300 { --tw-border-opacity: 1; border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); } .border-transparent { border-color: transparent; } .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } .bg-\[\#25d366\] { --tw-bg-opacity: 1; background-color: rgb(37 211 102 / var(--tw-bg-opacity, 1)); } .bg-\[\#fcfcfa\] { --tw-bg-opacity: 1; background-color: rgb(252 252 250 / var(--tw-bg-opacity, 1)); } .bg-amber-50 { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); } .bg-black\/30 { background-color: rgb(0 0 0 / 0.3); } .bg-black\/40 { background-color: rgb(0 0 0 / 0.4); } .bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } .bg-emerald-50 { --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); } .bg-emerald-600 { --tw-bg-opacity: 1; background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1)); } .bg-falcon-border { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-border) / var(--tw-bg-opacity, 1)); } .bg-falcon-canvas { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-canvas) / var(--tw-bg-opacity, 1)); } .bg-falcon-danger-soft { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger-soft) / var(--tw-bg-opacity, 1)); } .bg-falcon-light { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); } .bg-falcon-light\/30 { background-color: rgb(var(--ui-falcon-light) / 0.3); } .bg-falcon-light\/40 { background-color: rgb(var(--ui-falcon-light) / 0.4); } .bg-falcon-light\/50 { background-color: rgb(var(--ui-falcon-light) / 0.5); } .bg-falcon-muted { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-muted) / var(--tw-bg-opacity, 1)); } .bg-falcon-primary { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary) / var(--tw-bg-opacity, 1)); } .bg-falcon-primary-soft { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); } .bg-falcon-primary-soft\/30 { background-color: rgb(var(--ui-falcon-primary-soft) / 0.3); } .bg-falcon-primary-soft\/40 { background-color: rgb(var(--ui-falcon-primary-soft) / 0.4); } .bg-falcon-soft { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .bg-falcon-soft\/50 { background-color: rgb(var(--ui-falcon-soft) / 0.5); } .bg-falcon-success { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-success) / var(--tw-bg-opacity, 1)); } .bg-falcon-success-soft { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-success-soft) / var(--tw-bg-opacity, 1)); } .bg-falcon-surface { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-surface) / var(--tw-bg-opacity, 1)); } .bg-falcon-surface-muted { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft-muted) / var(--tw-bg-opacity, 1)); } .bg-falcon-surface-muted\/30 { background-color: rgb(var(--ui-falcon-soft-muted) / 0.3); } .bg-falcon-surface-muted\/40 { background-color: rgb(var(--ui-falcon-soft-muted) / 0.4); } .bg-falcon-surface-muted\/45 { background-color: rgb(var(--ui-falcon-soft-muted) / 0.45); } .bg-falcon-surface-muted\/60 { background-color: rgb(var(--ui-falcon-soft-muted) / 0.6); } .bg-falcon-surface\/95 { background-color: rgb(var(--ui-falcon-surface) / 0.95); } .bg-falcon-text { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-text) / var(--tw-bg-opacity, 1)); } .bg-falcon-text\/30 { background-color: rgb(var(--ui-falcon-text) / 0.3); } .bg-falcon-text\/50 { background-color: rgb(var(--ui-falcon-text) / 0.5); } .bg-falcon-warning { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-warning) / var(--tw-bg-opacity, 1)); } .bg-falcon-warning-soft { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-warning-soft) / var(--tw-bg-opacity, 1)); } .bg-falcon-warning-soft\/40 { background-color: rgb(var(--ui-falcon-warning-soft) / 0.4); } .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .bg-gray-50\/60 { background-color: rgb(249 250 251 / 0.6); } .bg-rose-50 { --tw-bg-opacity: 1; background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1)); } .bg-rose-600 { --tw-bg-opacity: 1; background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1)); } .bg-transparent { background-color: transparent; } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-opacity-10 { --tw-bg-opacity: 0.1; } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .bg-left { background-position: left; } .bg-right { background-position: right; } .bg-no-repeat { background-repeat: no-repeat; } .object-contain { -o-object-fit: contain; object-fit: contain; } .object-cover { -o-object-fit: cover; object-fit: cover; } .\!p-0 { padding: 0px !important; } .p-0 { padding: 0px; } .p-0\.5 { padding: 0.125rem; } .p-1 { padding: 0.25rem; } .p-1\.5 { padding: 0.375rem; } .p-2 { padding: 0.5rem; } .p-2\.5 { padding: 0.625rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-lg { padding: 1rem; } .p-md { padding: 0.75rem; } .p-xl { padding: 1.5rem; } .\!px-0 { padding-left: 0px !important; padding-right: 0px !important; } .\!py-0 { padding-top: 0px !important; padding-bottom: 0px !important; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .px-lg { padding-left: 1rem; padding-right: 1rem; } .px-xl { padding-left: 1.5rem; padding-right: 1.5rem; } .py-0 { padding-top: 0px; padding-bottom: 0px; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-2xl { padding-top: 2rem; padding-bottom: 2rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-md { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-px { padding-top: 1px; padding-bottom: 1px; } .py-sm { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-xl { padding-top: 1.5rem; padding-bottom: 1.5rem; } .\!pb-2 { padding-bottom: 0.5rem !important; } .pb-0 { padding-bottom: 0px; } .pb-1 { padding-bottom: 0.25rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-3 { padding-bottom: 0.75rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-lg { padding-bottom: 1rem; } .pb-xl { padding-bottom: 1.5rem; } .pe-0 { padding-inline-end: 0px; } .pe-1 { padding-inline-end: 0.25rem; } .pe-10 { padding-inline-end: 2.5rem; } .pe-2 { padding-inline-end: 0.5rem; } .pe-3 { padding-inline-end: 0.75rem; } .pe-4 { padding-inline-end: 1rem; } .pe-5 { padding-inline-end: 1.25rem; } .pe-6 { padding-inline-end: 1.5rem; } .pe-7 { padding-inline-end: 1.75rem; } .pl-0 { padding-left: 0px; } .pl-1 { padding-left: 0.25rem; } .pl-3 { padding-left: 0.75rem; } .pl-4 { padding-left: 1rem; } .pl-5 { padding-left: 1.25rem; } .pr-0 { padding-right: 0px; } .pr-1 { padding-right: 0.25rem; } .pr-2 { padding-right: 0.5rem; } .pr-8 { padding-right: 2rem; } .ps-0 { padding-inline-start: 0px; } .ps-2 { padding-inline-start: 0.5rem; } .ps-3 { padding-inline-start: 0.75rem; } .ps-4 { padding-inline-start: 1rem; } .ps-5 { padding-inline-start: 1.25rem; } .pt-0 { padding-top: 0px; } .pt-0\.5 { padding-top: 0.125rem; } .pt-1 { padding-top: 0.25rem; } .pt-2 { padding-top: 0.5rem; } .pt-3 { padding-top: 0.75rem; } .pt-4 { padding-top: 1rem; } .pt-5 { padding-top: 1.25rem; } .pt-6 { padding-top: 1.5rem; } .pt-lg { padding-top: 1rem; } .pt-md { padding-top: 0.75rem; } .pt-xl { padding-top: 1.5rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-start { text-align: start; } .text-end { text-align: end; } .align-baseline { vertical-align: baseline; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .font-sans { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-\[1\.125rem\] { font-size: 1.125rem; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[12px\] { font-size: 12px; } .text-\[13px\] { font-size: 13px; } .text-\[8px\] { font-size: 8px; } .text-\[9px\] { font-size: 9px; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-black { font-weight: 900; } .font-bold { font-weight: 700; } .font-light { font-weight: 300; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } .italic { font-style: italic; } .ordinal { --tw-ordinal: ordinal; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-5 { line-height: 1.25rem; } .leading-6 { line-height: 1.5rem; } .leading-none { line-height: 1; } .leading-normal { line-height: 1.5; } .leading-relaxed { line-height: 1.625; } .leading-snug { line-height: 1.375; } .leading-tight { line-height: 1.25; } .tracking-\[0\.06em\] { letter-spacing: 0.06em; } .tracking-\[0\.08em\] { letter-spacing: 0.08em; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; } .text-\[\#333\] { --tw-text-opacity: 1; color: rgb(51 51 51 / var(--tw-text-opacity, 1)); } .text-amber-600 { --tw-text-opacity: 1; color: rgb(217 119 6 / var(--tw-text-opacity, 1)); } .text-amber-700 { --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity, 1)); } .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); } .text-emerald-700 { --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); } .text-emerald-800 { --tw-text-opacity: 1; color: rgb(6 95 70 / var(--tw-text-opacity, 1)); } .text-falcon-border { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-border) / var(--tw-text-opacity, 1)); } .text-falcon-danger { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .text-falcon-muted { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .text-falcon-muted\/50 { color: rgb(var(--ui-falcon-muted) / 0.5); } .text-falcon-primary { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .text-falcon-success { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-success) / var(--tw-text-opacity, 1)); } .text-falcon-text { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .text-falcon-warning { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-warning) / var(--tw-text-opacity, 1)); } .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); } .text-rose-600 { --tw-text-opacity: 1; color: rgb(225 29 72 / var(--tw-text-opacity, 1)); } .text-rose-700 { --tw-text-opacity: 1; color: rgb(190 18 60 / var(--tw-text-opacity, 1)); } .text-rose-800 { --tw-text-opacity: 1; color: rgb(159 18 57 / var(--tw-text-opacity, 1)); } .text-transparent { color: transparent; } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .text-white\/80 { color: rgb(255 255 255 / 0.8); } .underline { text-decoration-line: underline; } .line-through { text-decoration-line: line-through; } .no-underline { text-decoration-line: none; } .decoration-1 { text-decoration-thickness: 1px; } .decoration-2 { text-decoration-thickness: 2px; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-75 { opacity: 0.75; } .opacity-90 { opacity: 0.9; } .shadow { --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); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px 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-card { --tw-shadow: 0 4px 14px 0 rgba(65, 69, 88, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.03); --tw-shadow-colored: 0 4px 14px 0 var(--tw-shadow-color), 0 1px 4px 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-float { --tw-shadow: var(--ui-shadow-float); --tw-shadow-colored: var(--ui-shadow-float); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; 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 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-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .\!outline { outline-style: solid !important; } .outline { outline-style: solid; } .ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-2 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-falcon-primary { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--ui-falcon-primary) / var(--tw-ring-opacity, 1)); } .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .\!filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-filter { backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[padding\] { transition-property: padding; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-base { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-150 { transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .transition-base { transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Focused editor mode — hide app header, full-width content (sidebar stays) */ body.ui-focused-mode .ui-app-header, body.ui-focused-mode [data-ui-app-header], body.ui-focused-mode .navbar-top, body.ui-focused-mode .navbar-glass, body.ui-focused-mode nav.navbar-top { display: none !important; } body.ui-focused-mode .ui-app-shell__main.content, body.ui-focused-mode .ui-app-shell #app, body.ui-focused-mode #app { padding: 0 !important; margin-top: 0 !important; } body.ui-focused-mode #app { background: rgb(var(--ui-falcon-soft)); overflow-x: clip !important; } body.ui-focused-mode .ui-focused-layout-topbar { margin-left: 0; margin-right: 0; } /* ── Form picker (search + selectable list inside UiModal) Shared by UiTemplatePickerModal and Post form picker. [data-ui-vue-modal] covers Teleport target; .posts-page is Post fallback. ── */ [data-ui-vue-modal] .ui-form-picker, [data-ui-vue-modal] .posts-form-picker, .posts-page .ui-form-picker, .posts-page .posts-form-picker { display: flex; flex-direction: column; gap: 0.625rem; } [data-ui-vue-modal] .ui-form-picker__search, [data-ui-vue-modal] .posts-form-picker__search, .posts-page .ui-form-picker__search, .posts-page .posts-form-picker__search { position: relative; } [data-ui-vue-modal] .ui-form-picker__search-icon, [data-ui-vue-modal] .posts-form-picker__search-icon, .posts-page .ui-form-picker__search-icon, .posts-page .posts-form-picker__search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.6875rem; color: rgb(var(--ui-falcon-muted)); pointer-events: none; } [data-ui-vue-modal] .ui-form-picker__search-input, [data-ui-vue-modal] .posts-form-picker__search-input, .posts-page .ui-form-picker__search-input, .posts-page .posts-form-picker__search-input { display: block; width: 100%; height: 2.375rem; padding: 0 0.75rem 0 2.125rem; border: 1px solid rgb(var(--ui-falcon-border)); border-radius: 0.5rem; background: rgb(var(--ui-falcon-soft)); font-size: 0.8125rem; font-family: inherit; color: rgb(var(--ui-falcon-text)); transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none; -webkit-appearance: none; } [data-ui-vue-modal] .ui-form-picker__search-input::-moz-placeholder, [data-ui-vue-modal] .posts-form-picker__search-input::-moz-placeholder, .posts-page .ui-form-picker__search-input::-moz-placeholder, .posts-page .posts-form-picker__search-input::-moz-placeholder { color: rgb(var(--ui-falcon-muted) / 0.65); } [data-ui-vue-modal] .ui-form-picker__search-input::placeholder, [data-ui-vue-modal] .posts-form-picker__search-input::placeholder, .posts-page .ui-form-picker__search-input::placeholder, .posts-page .posts-form-picker__search-input::placeholder { color: rgb(var(--ui-falcon-muted) / 0.65); } [data-ui-vue-modal] .ui-form-picker__search-input:focus, [data-ui-vue-modal] .posts-form-picker__search-input:focus, .posts-page .ui-form-picker__search-input:focus, .posts-page .posts-form-picker__search-input:focus { border-color: rgb(var(--ui-falcon-primary)); background: rgb(var(--ui-falcon-surface)); box-shadow: 0 0 0 3px rgb(var(--ui-falcon-primary) / 0.12); } [data-ui-vue-modal] .ui-form-picker__list, [data-ui-vue-modal] .posts-form-picker__list, .posts-page .ui-form-picker__list, .posts-page .posts-form-picker__list { list-style: none !important; margin: 0; padding: 0; border: 1px solid rgb(var(--ui-falcon-border)); border-radius: 0.5rem; overflow: hidden; overflow-y: auto; max-height: 17rem; background: rgb(var(--ui-falcon-surface)); } [data-ui-vue-modal] .ui-form-picker__empty, [data-ui-vue-modal] .posts-form-picker__empty, .posts-page .ui-form-picker__empty, .posts-page .posts-form-picker__empty { padding: 1.5rem 1rem; text-align: center; font-size: 0.8125rem; color: rgb(var(--ui-falcon-muted)); background: rgb(var(--ui-falcon-surface)); border: 1px solid rgb(var(--ui-falcon-border)); border-radius: 0.5rem; } [data-ui-vue-modal] .ui-form-picker__item, [data-ui-vue-modal] .posts-form-picker__item, .posts-page .ui-form-picker__item, .posts-page .posts-form-picker__item { display: flex !important; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; cursor: pointer; border-bottom: 1px solid rgb(var(--ui-falcon-border)); background: rgb(var(--ui-falcon-surface)); transition: background 0.1s ease; outline: none; list-style: none !important; } [data-ui-vue-modal] .ui-form-picker__item:last-child, [data-ui-vue-modal] .posts-form-picker__item:last-child, .posts-page .ui-form-picker__item:last-child, .posts-page .posts-form-picker__item:last-child { border-bottom: none; } [data-ui-vue-modal] .ui-form-picker__item:hover, [data-ui-vue-modal] .posts-form-picker__item:hover, [data-ui-vue-modal] .ui-form-picker__item:focus-visible, [data-ui-vue-modal] .posts-form-picker__item:focus-visible, .posts-page .ui-form-picker__item:hover, .posts-page .posts-form-picker__item:hover, .posts-page .ui-form-picker__item:focus-visible, .posts-page .posts-form-picker__item:focus-visible { background: rgb(var(--ui-falcon-light)); } [data-ui-vue-modal] .ui-form-picker__item--selected, [data-ui-vue-modal] .posts-form-picker__item--selected, .posts-page .ui-form-picker__item--selected, .posts-page .posts-form-picker__item--selected { background: rgb(var(--ui-falcon-primary) / 0.06); } [data-ui-vue-modal] .ui-form-picker__item--selected:hover, [data-ui-vue-modal] .posts-form-picker__item--selected:hover, .posts-page .ui-form-picker__item--selected:hover, .posts-page .posts-form-picker__item--selected:hover { background: rgb(var(--ui-falcon-primary) / 0.1); } [data-ui-vue-modal] .ui-form-picker__item-icon, [data-ui-vue-modal] .posts-form-picker__item-icon, .posts-page .ui-form-picker__item-icon, .posts-page .posts-form-picker__item-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; flex-shrink: 0; border-radius: 0.3125rem; background: rgb(var(--ui-falcon-soft)); color: rgb(var(--ui-falcon-muted)); font-size: 0.625rem; transition: background 0.1s ease, color 0.1s ease; } [data-ui-vue-modal] .ui-form-picker__item--selected .ui-form-picker__item-icon, [data-ui-vue-modal] .ui-form-picker__item--selected .posts-form-picker__item-icon, [data-ui-vue-modal] .posts-form-picker__item--selected .posts-form-picker__item-icon, .posts-page .ui-form-picker__item--selected .ui-form-picker__item-icon, .posts-page .posts-form-picker__item--selected .posts-form-picker__item-icon { background: rgb(var(--ui-falcon-primary) / 0.12); color: rgb(var(--ui-falcon-primary)); } [data-ui-vue-modal] .ui-form-picker__item-name, [data-ui-vue-modal] .posts-form-picker__item-name, .posts-page .ui-form-picker__item-name, .posts-page .posts-form-picker__item-name { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 400; color: rgb(var(--ui-falcon-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } [data-ui-vue-modal] .ui-form-picker__item--selected .ui-form-picker__item-name, [data-ui-vue-modal] .ui-form-picker__item--selected .posts-form-picker__item-name, [data-ui-vue-modal] .posts-form-picker__item--selected .posts-form-picker__item-name, .posts-page .ui-form-picker__item--selected .ui-form-picker__item-name, .posts-page .posts-form-picker__item--selected .posts-form-picker__item-name { font-weight: 500; color: rgb(var(--ui-falcon-primary)); } [data-ui-vue-modal] .ui-form-picker__item-check, [data-ui-vue-modal] .posts-form-picker__item-check, .posts-page .ui-form-picker__item-check, .posts-page .posts-form-picker__item-check { font-size: 0.625rem; color: rgb(var(--ui-falcon-primary)); flex-shrink: 0; width: 0.875rem; text-align: center; } .ui-form-picker-empty--modal, .posts-empty-state--modal, .posts-page .ui-form-picker-empty--modal, .posts-page .posts-empty-state--modal { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; gap: 0.375rem; text-align: center; color: rgb(var(--ui-falcon-muted)); } .ui-form-picker-empty-icon, .posts-empty-state--modal .posts-empty-state-icon, .posts-page .ui-form-picker-empty-icon { font-size: 2rem; color: rgb(var(--ui-falcon-border)); margin-bottom: 0.25rem; } .ui-form-picker-empty-title, .posts-empty-state--modal .posts-empty-state-title, .posts-page .posts-empty-state--modal .posts-empty-state-title { margin: 0; font-size: 0.9375rem; font-weight: 500; font-style: italic; color: rgb(var(--ui-falcon-muted)); } .ui-form-picker-empty-hint, .posts-empty-state--modal .posts-empty-state-hint, .posts-page .posts-empty-state--modal .posts-empty-state-hint { margin: 0; font-size: 0.8125rem; font-style: italic; color: rgb(var(--ui-falcon-muted)); } .ui-template-modal-footer, .posts-template-modal-footer, [data-ui-vue-modal] .ui-template-modal-footer, [data-ui-vue-modal] .posts-template-modal-footer { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; flex: 1 1 100%; min-width: 0; } .ui-template-modal-footer-start, .posts-template-modal-footer-start { margin-right: auto; } .ui-template-modal-footer-actions, .posts-template-modal-footer-actions, [data-ui-vue-modal] .ui-template-modal-footer-actions, [data-ui-vue-modal] .posts-template-modal-footer-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.75rem; } /* ── Public form preview (/forms/{token}) ── */ .public-form-wrap { box-sizing: border-box; max-width: 42rem; margin: 1.5rem auto; padding: 0 1rem 2rem; color: rgb(var(--ui-falcon-text)); } .public-form-wrap *, .public-form-wrap *::before, .public-form-wrap *::after { box-sizing: border-box; } .public-form-card { padding: 1.5rem; } @media (min-width: 640px) { .public-form-card { padding: 2rem; } } .public-form-title { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 600; line-height: 1.375; color: rgb(var(--ui-falcon-text)); } .public-form-intro { margin-bottom: 1.5rem; font-size: 0.875rem; line-height: 1.625; color: rgb(var(--ui-falcon-muted)); white-space: pre-wrap; } .public-form { display: flex; flex-direction: column; gap: 1.5rem; } .public-form-question { display: flex; flex-direction: column; gap: 0.5rem; } .public-form-question .ui-field-label { display: block; margin-bottom: 0; white-space: pre-wrap; } .public-form-question .ui-field, .public-form-question .ui-select, .public-form-question .ui-date-input-wrap, .public-form-question .ui-textarea, .public-form-question .ui-file-upload { width: 100%; } .public-form-question .ui-date-input-wrap .ui-field { width: 100%; } .public-form-subheader { margin: 0.5rem 0 0; padding-top: 0.75rem; border-top: 1px solid rgb(var(--ui-falcon-border-subtle)); font-size: 1rem; font-weight: 600; line-height: 1.375; color: rgb(var(--ui-falcon-text)); white-space: pre-wrap; } .public-form-submit { display: flex; justify-content: flex-end; padding-top: 0.75rem; border-top: 1px solid rgb(var(--ui-falcon-border-subtle)); } .public-form-closed { text-align: center; padding: 2rem 1rem; color: rgb(var(--ui-falcon-muted)); } .public-form-closed strong { display: block; margin-bottom: 0.5rem; color: rgb(var(--ui-falcon-text)); } .public-form #sig { width: 100%; max-width: 100%; border: 1px solid rgb(var(--ui-falcon-border)); border-radius: 0.5rem; background: #fff; touch-action: none; } .public-form .invalid-feedback { display: block; margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.375; color: rgb(var(--ui-falcon-danger)); } .public-form .invalid-feedback .material-icons { font-size: 0.875rem; vertical-align: middle; } .public-form-other-input { margin-top: 0.5rem; margin-left: 1.625rem; max-width: 24rem; } /* Beat Falcon/Bootstrap inherited styles on the public layout */ .public-form-wrap .ui-field, .public-form-wrap .ui-select, .public-form-wrap .ui-textarea { display: block; width: 100%; max-width: 100%; border-width: 1px; border-style: solid; border-color: rgb(var(--ui-falcon-border)); border-radius: 0.75rem; background-color: rgb(var(--ui-falcon-surface)); box-shadow: none; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--ui-falcon-text)); } .public-form-wrap .ui-field:focus, .public-form-wrap .ui-select:focus, .public-form-wrap .ui-textarea:focus { border-color: rgb(var(--ui-falcon-primary)); outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px rgb(var(--ui-falcon-primary) / 0.2); } .public-form-wrap .ui-textarea { min-height: 5rem; padding: 0.75rem; } .public-form-wrap .ui-choice { align-items: center; } .public-form-wrap .ui-choice-input, .public-form-wrap .ui-checkbox { -moz-appearance: auto; appearance: auto; -webkit-appearance: auto; width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem; margin: 0; flex-shrink: 0; accent-color: rgb(var(--ui-falcon-primary)); background-image: none; border: none; box-shadow: none; } .public-form-wrap .ui-choice-input--error, .public-form-wrap .ui-checkbox--error { accent-color: rgb(var(--ui-falcon-danger)); } /* Unlayered shell overrides (must beat Bootstrap/Falcon) — inlined so they always ship with oodlins-ui.css */ @media (min-width: 768px) { .md\:hidden.ui-app-header-org-form { display: none !important; } } @media (min-width: 1024px) { .lg\:hidden.ui-app-header-org-form { display: none !important; } } @media (min-width: 1280px) { .xl\:hidden.ui-app-header-org-form { display: none !important; } } .file\:mr-3::file-selector-button { margin-right: 0.75rem; } .file\:rounded-full::file-selector-button { border-radius: 9999px; } .file\:border-0::file-selector-button { border-width: 0px; } .file\:border-falcon-border::file-selector-button { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); } .file\:bg-falcon-primary-soft::file-selector-button { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); } .file\:px-3::file-selector-button { padding-left: 0.75rem; padding-right: 0.75rem; } .file\:py-1\.5::file-selector-button { padding-top: 0.375rem; padding-bottom: 0.375rem; } .file\:text-\[11px\]::file-selector-button { font-size: 11px; } .file\:font-semibold::file-selector-button { font-weight: 600; } .file\:text-falcon-primary::file-selector-button { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .placeholder\:text-falcon-muted::-moz-placeholder { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .placeholder\:text-falcon-muted::placeholder { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-muted) / var(--tw-text-opacity, 1)); } .first\:pt-0:first-child { padding-top: 0px; } .last\:mb-0:last-child { margin-bottom: 0px; } .last\:border-0:last-child { border-width: 0px; } .last\:border-b-0:last-child { border-bottom-width: 0px; } .last\:border-r-0:last-child { border-right-width: 0px; } .last\:pb-0:last-child { padding-bottom: 0px; } .hover\:z-10:hover { z-index: 10; } .hover\:scale-110:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:border-blue-700:hover { --tw-border-opacity: 1; border-color: rgb(29 78 216 / var(--tw-border-opacity, 1)); } .hover\:border-emerald-700:hover { --tw-border-opacity: 1; border-color: rgb(4 120 87 / var(--tw-border-opacity, 1)); } .hover\:border-falcon-primary:hover { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); } .hover\:border-falcon-primary\/30:hover { border-color: rgb(var(--ui-falcon-primary) / 0.3); } .hover\:border-rose-700:hover { --tw-border-opacity: 1; border-color: rgb(190 18 60 / var(--tw-border-opacity, 1)); } .hover\:bg-blue-50:hover { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); } .hover\:bg-blue-700:hover { --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); } .hover\:bg-emerald-700:hover { --tw-bg-opacity: 1; background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1)); } .hover\:bg-falcon-danger:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger) / var(--tw-bg-opacity, 1)); } .hover\:bg-falcon-danger-soft:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-danger-soft) / var(--tw-bg-opacity, 1)); } .hover\:bg-falcon-light:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-light) / var(--tw-bg-opacity, 1)); } .hover\:bg-falcon-primary-dark:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-dark) / var(--tw-bg-opacity, 1)); } .hover\:bg-falcon-primary-soft:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-primary-soft) / var(--tw-bg-opacity, 1)); } .hover\:bg-falcon-primary-soft\/30:hover { background-color: rgb(var(--ui-falcon-primary-soft) / 0.3); } .hover\:bg-falcon-primary-soft\/70:hover { background-color: rgb(var(--ui-falcon-primary-soft) / 0.7); } .hover\:bg-falcon-soft:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft) / var(--tw-bg-opacity, 1)); } .hover\:bg-falcon-surface-muted:hover { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft-muted) / var(--tw-bg-opacity, 1)); } .hover\:bg-rose-50:hover { --tw-bg-opacity: 1; background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1)); } .hover\:bg-rose-700:hover { --tw-bg-opacity: 1; background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1)); } .hover\:bg-white\/20:hover { background-color: rgb(255 255 255 / 0.2); } .hover\:text-blue-700:hover { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); } .hover\:text-falcon-danger:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-danger) / var(--tw-text-opacity, 1)); } .hover\:text-falcon-primary:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-primary) / var(--tw-text-opacity, 1)); } .hover\:text-falcon-text:hover { --tw-text-opacity: 1; color: rgb(var(--ui-falcon-text) / var(--tw-text-opacity, 1)); } .hover\:text-rose-700:hover { --tw-text-opacity: 1; color: rgb(190 18 60 / var(--tw-text-opacity, 1)); } .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-80:hover { opacity: 0.8; } .hover\:opacity-85:hover { opacity: 0.85; } .focus\:border-blue-500:focus { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); } .focus\:border-falcon-primary:focus { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-primary) / var(--tw-border-opacity, 1)); } .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } .focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-blue-200:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1)); } .focus\:ring-emerald-200:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity, 1)); } .focus\:ring-falcon-primary\/15:focus { --tw-ring-color: rgb(var(--ui-falcon-primary) / 0.15); } .focus\:ring-rose-200:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity, 1)); } .focus\:ring-slate-200:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1)); } .disabled\:cursor-default:disabled { cursor: default; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:bg-falcon-surface-muted:disabled { --tw-bg-opacity: 1; background-color: rgb(var(--ui-falcon-soft-muted) / var(--tw-bg-opacity, 1)); } .disabled\:opacity-30:disabled { opacity: 0.3; } .disabled\:opacity-40:disabled { opacity: 0.4; } .disabled\:opacity-50:disabled { opacity: 0.5; } .group:hover .group-hover\:opacity-100 { opacity: 1; } @media (min-width: 640px) { .sm\:col-span-2 { grid-column: span 2 / span 2; } .sm\:col-span-6 { grid-column: span 6 / span 6; } .sm\:ml-auto { margin-left: auto; } .sm\:max-w-md { max-width: 28rem; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; } .sm\:flex-row { flex-direction: row; } .sm\:items-center { align-items: center; } .sm\:gap-3 { gap: 0.75rem; } .sm\:py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } } @media (min-width: 768px) { .md\:col-span-1 { grid-column: span 1 / span 1; } .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:col-span-3 { grid-column: span 3 / span 3; } .md\:col-span-4 { grid-column: span 4 / span 4; } .md\:col-span-5 { grid-column: span 5 / span 5; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-span-8 { grid-column: span 8 / span 8; } .md\:my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .md\:mb-0 { margin-bottom: 0px; } .md\:ms-4 { margin-inline-start: 1rem; } .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:min-h-screen { min-height: 100vh; } .md\:w-1\/2 { width: 50%; } .md\:w-48 { width: 12rem; } .md\:max-w-xs { max-width: 20rem; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:flex-row { flex-direction: row; } .md\:items-center { align-items: center; } .md\:border-r { border-right-width: 1px; } .md\:border-falcon-border { --tw-border-opacity: 1; border-color: rgb(var(--ui-falcon-border) / var(--tw-border-opacity, 1)); } .md\:p-4 { padding: 1rem; } .md\:p-5 { padding: 1.25rem; } .md\:pb-0 { padding-bottom: 0px; } .md\:pr-lg { padding-right: 1rem; } .md\:text-left { text-align: left; } .md\:text-end { text-align: end; } .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } } @media (min-width: 1024px) { .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-5 { grid-column: span 5 / span 5; } .lg\:col-span-6 { grid-column: span 6 / span 6; } .lg\:col-span-7 { grid-column: span 7 / span 7; } .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:col-span-9 { grid-column: span 9 / span 9; } .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:max-w-3xl { max-width: 48rem; } .lg\:max-w-xs { max-width: 20rem; } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:justify-end { justify-content: flex-end; } .lg\:pl-lg { padding-left: 1rem; } .lg\:pr-\[616px\] { padding-right: 616px; } .lg\:pr-lg { padding-right: 1rem; } } @media (min-width: 1280px) { .xl\:col-span-1 { grid-column: span 1 / span 1; } .xl\:col-span-2 { grid-column: span 2 / span 2; } .xl\:col-span-3 { grid-column: span 3 / span 3; } .xl\:col-span-4 { grid-column: span 4 / span 4; } .xl\:col-span-5 { grid-column: span 5 / span 5; } .xl\:col-span-8 { grid-column: span 8 / span 8; } .xl\:ms-auto { margin-inline-start: auto; } .xl\:hidden { display: none; } .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .xl\:flex-row { flex-direction: row; } .xl\:items-center { align-items: center; } } /** * Sidebar spacing shell (plain CSS, no @layer). * Bundled at the end of oodlins-ui.css so Bootstrap Reboot / Falcon cannot override * list padding or horizontal inset from @layer components. * * SCROLL / STICKY SAFETY — do not regress: * - .ui-app-shell__frame: align-items flex-start (sidebar must not stretch to page height) * - .ui-sidebar (xl+): position sticky, align-self flex-start, height 100vh * - NEVER overflow-x: hidden on .ui-app-shell__main.content (breaks sticky header) * - overflow-x: hidden only on #app; horizontal padding on #app (header full-bleed) */.ui-sidebar { --ui-sidebar-inset-x: 0.75rem; --ui-sidebar-width: 15.75rem; width: var(--ui-sidebar-width) !important; max-width: var(--ui-sidebar-width) !important; } .ui-app-shell__frame.container-fluid[data-layout='container'] { max-width: 100%; align-items: flex-start; } .ui-app-shell__main.content { margin-left: 0 !important; min-width: 0 !important; max-width: 100%; padding-left: 0 !important; } .ui-app-shell #app { min-width: 0; overflow-x: hidden; padding-top: 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } @media (min-width: 1280px) { .ui-app-shell #app { padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 1199.98px) { .ui-app-shell #app { padding-top: 0; padding-left: 0; padding-right: 0; } } @media (min-width: 1200px) { /* Flex stretch + overflow on ancestors break sticky; pin sidebar to viewport */ .ui-sidebar { position: sticky !important; top: 0 !important; align-self: flex-start !important; height: 100vh !important; max-height: 100vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } .ui-sidebar__brand { flex-shrink: 0; } .ui-sidebar__chrome { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } } .ui-sidebar ul.ui-sidebar__list, .ui-sidebar ul.ui-sidebar-section-panel, .ui-sidebar li.ui-sidebar__item { padding: 0 !important; margin: 0 !important; list-style: none !important; } .ui-sidebar .ui-sidebar__body.navbar-collapse { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } .ui-sidebar .ui-sidebar__group { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Single horizontal gutter for all nav content */ .ui-sidebar .ui-sidebar__nav { box-sizing: border-box; flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; max-width: 100%; padding-top: 0.25rem; padding-bottom: 0.5rem; padding-left: var(--ui-sidebar-inset-x) !important; padding-right: 0.25rem !important; margin: 0 !important; } .ui-sidebar .ui-sidebar__brand, .ui-sidebar .ui-sidebar__toolbar { padding-left: var(--ui-sidebar-inset-x) !important; padding-right: var(--ui-sidebar-inset-x) !important; } /* Pill breathing room — main gutter comes from nav */ .ui-sidebar .ui-sidebar-link { padding-left: 0.625rem !important; padding-right: 0.5rem !important; } .ui-sidebar .ui-sidebar-section-trigger { padding-left: 0.625rem !important; padding-right: 0.5rem !important; border-radius: 9999px; } .ui-sidebar .ui-sidebar-link, .ui-sidebar .ui-sidebar-link:hover, .ui-sidebar .ui-sidebar-link:focus, .ui-sidebar .ui-sidebar-link:active, .ui-sidebar .ui-sidebar__brand-link, .ui-sidebar .ui-sidebar__brand-link:hover, .ui-sidebar .ui-sidebar__toolbar-btn, .ui-sidebar .ui-sidebar__toolbar-btn:hover { text-decoration: none !important; } .ui-sidebar .ui-sidebar-link--nested { padding-left: 0.75rem !important; font-size: 12px !important; font-weight: 400; } /* Primary top links (Teacher Dashboard, Getting Started, etc.) */ .ui-sidebar .ui-sidebar__group--primary .ui-sidebar-link { font-size: 12px !important; font-weight: 400; line-height: 1.35; padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; } .ui-sidebar .ui-sidebar__group--primary .ui-sidebar-link--active { font-weight: 400; } .ui-sidebar .ui-sidebar__group--primary .ui-sidebar-link-icon { width: 1rem; font-size: 0.75rem; } /* Child items under section headers (Calendar, Event List, etc.) */ .ui-sidebar .ui-sidebar-section-panel .ui-sidebar-link { font-size: 12px !important; font-weight: 400; line-height: 1.35; padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; } .ui-sidebar .ui-sidebar-section-panel .ui-sidebar-link-icon { width: 1rem; font-size: 0.75rem; } .ui-sidebar .ui-sidebar-section-panel--nested { margin-inline-start: 0.5rem !important; padding-inline-start: 0.375rem !important; } /* Section headers — soft labels, not bold category titles */ .ui-sidebar .ui-sidebar-section-trigger { font-weight: 400 !important; color: var(--ui-sidebar-section); } .ui-sidebar .ui-sidebar-section-label { font-size: 12px; font-weight: 400 !important; line-height: 1.3; letter-spacing: 0.02em; color: var(--ui-sidebar-section); } .ui-sidebar .ui-sidebar-chevron { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; color: var(--ui-sidebar-muted); transition: transform 0.2s ease, color 0.2s ease; transform: rotate(0deg); } .ui-sidebar .ui-sidebar-chevron svg { display: block; width: 10px; height: 10px; } .ui-sidebar .ui-sidebar-section-trigger[aria-expanded='true'] .ui-sidebar-chevron, .ui-sidebar .ui-sidebar-link--group[aria-expanded='true'] .ui-sidebar-chevron { transform: rotate(90deg); color: var(--ui-sidebar-active-text); } /* Visual subsection headers — nav gutter is on .ui-sidebar__nav; match link pill inset */ .ui-sidebar .ui-sidebar-subsection { list-style: none !important; margin: 0.75rem 0 0.25rem !important; padding: 0 0.5rem 0 0.625rem !important; } .ui-sidebar .ui-sidebar-section-panel > .ui-sidebar-subsection:first-child { margin-top: 0.25rem !important; } .ui-sidebar .ui-sidebar-subsection-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ui-sidebar-muted, #8a847c); line-height: 1.3; } .ui-sidebar .ui-sidebar-subsection-label::after { content: ''; flex: 1 1 auto; height: 1px; background-color: var(--ui-sidebar-border, #e8e6e1); } /** * App header shell (plain CSS, no @layer). * Bundled at the end of oodlins-ui.css so Falcon navbar-glass / Bootstrap cannot override * sticky header background or layout. */ .ui-app-header { background-color: var(--ui-shell-bg, #fafaf8) !important; border-bottom: 1px solid var(--ui-shell-border, #ece7e1) !important; box-shadow: none !important; } .ui-app-header, .ui-app-header__inner { backdrop-filter: none !important; } .ui-app-shell__main.content > .ui-app-header, .ui-app-shell__main.content > nav.navbar-top { margin-left: 0 !important; } .ui-app-shell__main.content .navbar.navbar-top, .ui-app-shell__main.content .navbar-glass { background: transparent !important; box-shadow: none !important; } .ui-app-header { position: sticky !important; top: 0 !important; /* Above Bootstrap/Falcon .sticky-top (1015); below mobile nav scrim (1035) */ z-index: 1020 !important; } .ui-app-header-search-panel { background-color: rgb(var(--ui-falcon-surface)) !important; border: 1px solid rgb(var(--ui-falcon-border)) !important; } .ui-app-header__pill:focus-visible, .ui-app-header__toggle:focus-visible, .ui-app-header__hub-link:focus-visible { outline: 2px solid rgb(var(--ui-falcon-primary) / 0.35); outline-offset: 2px; } /* Bootstrap button defaults leak onto org switcher submit buttons */ .ui-app-header-org-item { border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.25 !important; font-weight: 400 !important; text-transform: none !important; color: rgb(var(--ui-falcon-text)) !important; } .ui-app-header-org-item:hover { background-color: rgb(var(--ui-falcon-soft)) !important; } .ui-app-header-org-item__name { font-size: 11px !important; line-height: 1.25 !important; color: inherit !important; } .ui-app-header-org-dropdown .ui-menu-panel { border: 1px solid rgb(var(--ui-falcon-border)) !important; background-color: rgb(var(--ui-falcon-surface)) !important; } .ui-app-header-org-item--active { background-color: rgb(var(--ui-falcon-primary-soft) / 1) !important; font-weight: 500 !important; } .ui-app-header-org-item--active .ui-app-header-org-item__name { font-weight: 500 !important; color: rgb(var(--ui-falcon-primary)) !important; } /* Dark theme — top bar */ .dark .ui-app-header { background-color: rgb(var(--ui-falcon-light)) !important; border-bottom-color: rgb(var(--ui-falcon-border)) !important; color: rgb(var(--ui-falcon-text)); } .dark .ui-app-header__toggle, .dark .ui-app-header__hub-link { color: rgb(var(--ui-falcon-muted)); } .dark .ui-app-header__toggle:hover, .dark .ui-app-header__hub-link:hover, .dark .ui-app-header__pill:hover { background-color: rgb(var(--ui-falcon-soft)) !important; color: rgb(var(--ui-falcon-text)) !important; } .dark .ui-app-header__pill, .dark .ui-app-header__pill-label { color: rgb(var(--ui-falcon-text)) !important; } .dark .ui-app-header__pill-chevron { color: rgb(var(--ui-falcon-muted)) !important; } .dark .ui-app-header__search .ui-search-input { background-color: rgb(var(--ui-falcon-soft)) !important; border-color: rgb(var(--ui-falcon-border)) !important; } .dark .ui-app-header__search .ui-search-input-icon { color: rgb(var(--ui-falcon-muted)) !important; } .dark .ui-app-header__search .ui-search-input-field { color: rgb(var(--ui-falcon-text)) !important; } .dark .ui-app-header__search .ui-search-input-field::-moz-placeholder { color: rgb(var(--ui-falcon-muted) / 0.7) !important; } .dark .ui-app-header__search .ui-search-input-field::placeholder { color: rgb(var(--ui-falcon-muted) / 0.7) !important; } .dark .ui-app-header-search-panel { background-color: rgb(var(--ui-falcon-surface)) !important; border-color: rgb(var(--ui-falcon-border)) !important; } .dark .ui-app-header-search-item:hover { background-color: rgb(var(--ui-falcon-soft)) !important; } .dark .ui-app-header-org-filter .ui-field { background-color: rgb(var(--ui-falcon-soft)) !important; border-color: rgb(var(--ui-falcon-border)) !important; color: rgb(var(--ui-falcon-text)) !important; }