/** * Boot splash — pixel-aligned with DASHBOARD_SKELETON_LAYOUT + moduleCardSkeletonLayout. * Values map 1:1 to Tailwind (gap-3 = 0.75rem, rounded-xl = 0.75rem, …). */ :root { --boot-background: oklch(1 0 0); --boot-foreground: oklch(0.1 0 0); --boot-card: oklch(1 0 0); --boot-muted: oklch(0.97 0 0); --boot-border: oklch(0.922 0 0); --boot-primary: oklch(0.704 0.14 182.503); --boot-primary-foreground: oklch(1 0 0); --boot-font: AR One Sans, ui-sans-serif, sans-serif, system-ui; --boot-radius: 0.625rem; --boot-radius-md: 0.375rem; --boot-radius-lg: 0.5rem; --boot-radius-xl: 0.75rem; --boot-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); } /* Resolved theme: class on from theme-init.js (vite-ui-theme in localStorage). */ html.dark { color-scheme: dark; --boot-background: oklch(0.12 0 0); --boot-foreground: oklch(0.97 0 0); --boot-card: oklch(0.175 0 0); --boot-muted: oklch(0.22 0 0); --boot-border: oklch(0.36 0 0); --boot-primary: oklch(0.511 0.096 186.391); --boot-primary-foreground: oklch(1 0 0); --boot-shadow-sm: none; } /* Cold-load variant: theme script sets html.admin-entry on /admin paths. */ html.admin-entry #app-boot-skeleton { display: none !important; } html:not(.admin-entry) #app-boot-skeleton-admin { display: none !important; } html.admin-datatable-entry #app-boot-skeleton-admin .boot-admin-hub { display: none !important; } #app-boot-skeleton-admin .boot-admin-list { display: none; } html.admin-datatable-entry #app-boot-skeleton-admin .boot-admin-list { display: flex; } #app-boot-skeleton .boot-dashboard-list { display: none; } html.dashboard-datatable-entry #app-boot-skeleton .boot-dashboard-list { display: flex; } html.dashboard-datatable-entry #app-boot-skeleton .boot-content { display: none !important; } html.light { color-scheme: light; } html { background-color: var(--boot-background); color: var(--boot-foreground); } #app-boot-skeleton, #app-boot-skeleton-admin { box-sizing: border-box; min-height: 100dvh; margin: 0; background: var(--boot-background); color: var(--boot-foreground); font-family: var(--boot-font); -webkit-font-smoothing: antialiased; } #app-boot-skeleton { display: flex; flex-direction: column; } #app-boot-skeleton *, #app-boot-skeleton *::before, #app-boot-skeleton *::after, #app-boot-skeleton-admin *, #app-boot-skeleton-admin *::before, #app-boot-skeleton-admin *::after { box-sizing: border-box; } @keyframes boot-shimmer-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } :is(#app-boot-skeleton, #app-boot-skeleton-admin, .page-skeleton) .boot-shimmer { position: relative; overflow: hidden; background: var(--boot-muted); border-radius: var(--boot-radius); } :is(#app-boot-skeleton, #app-boot-skeleton-admin, .page-skeleton) .boot-shimmer--sm { border-radius: 0.25rem; } #app-boot-skeleton .boot-shimmer--lg { border-radius: var(--boot-radius-lg); } #app-boot-skeleton .boot-shimmer--xl { border-radius: var(--boot-radius-xl); } #app-boot-skeleton .boot-shimmer--pill { border-radius: 9999px; } :is(#app-boot-skeleton, #app-boot-skeleton-admin, .page-skeleton) .boot-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent 0%, color-mix(in oklch, var(--boot-background) 55%, transparent) 45%, color-mix(in oklch, var(--boot-background) 70%, transparent) 55%, transparent 100% ); animation: boot-shimmer-slide 1.6s ease-in-out infinite; } #app-boot-skeleton .boot-shimmer--on-primary { background: color-mix( in oklch, var(--boot-primary-foreground) 22%, transparent ); border-radius: var(--boot-radius); } #app-boot-skeleton .boot-shimmer--on-primary.boot-shimmer--sm { border-radius: 0.25rem; } #app-boot-skeleton .boot-shimmer--on-primary::after { background: linear-gradient( 90deg, transparent 0%, color-mix(in oklch, var(--boot-primary-foreground) 35%, transparent) 50%, transparent 100% ); } /* Navbar — px-5 py-2, left gap-4, right gap-2 */ #app-boot-skeleton .boot-nav { display: flex; flex-shrink: 0; flex-direction: row; align-items: center; justify-content: space-between; background: var(--boot-primary); padding: 0.5rem 1.25rem; } #app-boot-skeleton .boot-nav__start { display: flex; align-items: center; gap: 1rem; } #app-boot-skeleton .boot-nav__menu { width: 2.5rem; height: 2.5rem; } #app-boot-skeleton .boot-nav__brand { display: flex; flex-direction: column; } #app-boot-skeleton .boot-nav__brand-line + .boot-nav__brand-line { margin-top: 0.125rem; } #app-boot-skeleton .boot-nav__actions { display: flex; width: fit-content; align-items: center; gap: 0.5rem; } #app-boot-skeleton .boot-nav__action { width: 2rem; height: 2rem; } /* Breadcrumb — gap-3, border-b, px-6 py-3; company switcher h-10 w-56 md:w-64 */ #app-boot-skeleton .boot-breadcrumb { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--boot-border); padding: 0.75rem 1.5rem; } #app-boot-skeleton .boot-breadcrumb__trail { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.75rem; } #app-boot-skeleton .boot-breadcrumb__icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } #app-boot-skeleton .boot-breadcrumb__label { height: 1rem; width: 7rem; max-width: 40%; border-radius: var(--boot-radius-md); } #app-boot-skeleton .boot-breadcrumb__switcher { margin-left: auto; flex-shrink: 0; height: 2.5rem; width: 14rem; border-radius: var(--boot-radius-md); } @media (min-width: 768px) { #app-boot-skeleton .boot-breadcrumb__switcher { width: 16rem; } } /* Content — gap-12, px-6, py-10 md:py-12 */ #app-boot-skeleton .boot-main { flex: 1; overflow: hidden; } #app-boot-skeleton .boot-content { display: flex; max-width: 80rem; flex-direction: column; gap: 3rem; margin: 0 auto; padding: 2.5rem 1.5rem; } @media (min-width: 768px) { #app-boot-skeleton .boot-content { padding-top: 3rem; padding-bottom: 3rem; } } /* Section — gap-4; heading — gap-0.5 (centered) */ #app-boot-skeleton .boot-section { display: flex; flex-direction: column; gap: 1rem; } #app-boot-skeleton .boot-section-head { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; text-align: center; } #app-boot-skeleton .boot-eyebrow { height: 0.625rem; width: 4rem; } #app-boot-skeleton .boot-section-title { height: 1.75rem; width: 10rem; } #app-boot-skeleton .boot-section-desc { height: 1.25rem; width: min(28rem, 100%); } /* Modules list — vertical stack (gap-3); mirrors index.lazy.tsx flex flex-col gap-3 */ #app-boot-skeleton .boot-grid { display: flex; flex-direction: column; gap: 0.75rem; } /* Module row — header + section chips; mirrors card-module.tsx ModuleCard */ :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card { box-sizing: border-box; overflow: hidden; border: 1px solid var(--boot-border); border-radius: var(--boot-radius-xl); background: var(--boot-card); box-shadow: var(--boot-shadow-sm); } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__inner { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__head { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--boot-radius-lg); } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__stack { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.375rem; min-width: 0; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__title { height: 0.875rem; width: 7rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__line { height: 0.75rem; width: 10rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__chips { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 0.375rem; min-width: 0; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__chip { height: 1.5rem; width: 6rem; border-radius: 9999px; } @media (min-width: 1024px) { :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__inner { flex-direction: row; align-items: center; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__head { width: 16rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-card__chips { border-left: 1px solid var(--boot-border); padding-left: 1rem; } } /* Favorites empty — gap-3, rounded-xl, px-6 py-10; inner gap-1 */ #app-boot-skeleton .boot-favorites { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; border: 1px dashed var(--boot-border); border-radius: var(--boot-radius-xl); background: color-mix(in oklch, var(--boot-muted) 20%, transparent); padding: 2.5rem 1.5rem; text-align: center; } #app-boot-skeleton .boot-favorites__icon { width: 2.5rem; height: 2.5rem; } #app-boot-skeleton .boot-favorites__copy { display: flex; width: 100%; max-width: 20rem; flex-direction: column; align-items: center; gap: 0.25rem; } #app-boot-skeleton .boot-favorites__title { height: 0.875rem; width: 10rem; border-radius: var(--boot-radius-md); } #app-boot-skeleton .boot-favorites__desc { height: 0.75rem; width: 100%; border-radius: 0.25rem; } /* Admin hub boot — mirrors AdminBootstrapSkeleton + ADMIN_SKELETON_LAYOUT */ #app-boot-skeleton-admin .boot-admin-shell { display: flex; min-height: 100dvh; } #app-boot-skeleton-admin .boot-admin-sidebar { display: none; width: 16rem; flex-shrink: 0; flex-direction: column; border-right: 1px solid var(--boot-border); background: var(--boot-card); transition: width 200ms ease-linear; } html.sidebar-collapsed #app-boot-skeleton-admin .boot-admin-sidebar { width: 3rem; } @media (min-width: 768px) { #app-boot-skeleton-admin .boot-admin-sidebar { display: flex; } } #app-boot-skeleton-admin .boot-admin-sidebar__brand { display: flex; min-width: 0; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--boot-border); padding: 1rem 0.75rem; } html.sidebar-collapsed #app-boot-skeleton-admin .boot-admin-sidebar__brand { justify-content: center; padding: 1rem 0.5rem; } #app-boot-skeleton-admin .boot-admin-sidebar__logo { height: 1.5rem; width: 1.5rem; flex-shrink: 0; border-radius: var(--boot-radius); } #app-boot-skeleton-admin .boot-admin-sidebar__brand-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.25rem; } html.sidebar-collapsed #app-boot-skeleton-admin .boot-admin-sidebar__brand-text { display: none; } #app-boot-skeleton-admin .boot-admin-sidebar__eyebrow { height: 0.625rem; width: 6rem; } #app-boot-skeleton-admin .boot-admin-sidebar__title { height: 1.25rem; width: 8rem; max-width: 100%; } #app-boot-skeleton-admin .boot-admin-sidebar__group { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; } #app-boot-skeleton-admin .boot-admin-sidebar__label { height: 0.625rem; width: 5rem; padding: 0 0.5rem; } html.sidebar-collapsed #app-boot-skeleton-admin .boot-admin-sidebar__label { display: none; } #app-boot-skeleton-admin .boot-admin-sidebar__item { height: 2rem; width: 100%; border-radius: var(--boot-radius-md); } html.sidebar-collapsed #app-boot-skeleton-admin .boot-admin-sidebar__item { width: 2rem; height: 2rem; margin: 0 auto; } #app-boot-skeleton-admin .boot-admin-main { display: flex; min-width: 0; flex: 1; flex-direction: column; overflow: hidden; } #app-boot-skeleton-admin .boot-admin-header { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--boot-border); padding: 0.5rem 1rem; } #app-boot-skeleton-admin .boot-admin-header__trigger { width: 2rem; height: 2rem; flex-shrink: 0; } #app-boot-skeleton-admin .boot-admin-header__crumb { height: 1.5rem; width: 7rem; max-width: 40%; } #app-boot-skeleton-admin .boot-admin-header__actions { display: none; margin-left: auto; align-items: center; gap: 0.25rem; } @media (min-width: 1024px) { #app-boot-skeleton-admin .boot-admin-header__actions { display: flex; } } #app-boot-skeleton-admin .boot-admin-header__action { width: 2rem; height: 2rem; border-radius: 9999px; } #app-boot-skeleton-admin .boot-admin-content { flex: 1; min-height: 0; overflow-y: auto; } #app-boot-skeleton-admin .boot-admin-hub { margin: 0 auto; display: flex; width: 100%; max-width: 80rem; flex: 1; flex-direction: column; gap: 2.5rem; padding: 2rem 1.5rem; } @media (min-width: 768px) { #app-boot-skeleton-admin .boot-admin-hub { padding-top: 2.5rem; padding-bottom: 2.5rem; } } #app-boot-skeleton-admin .boot-admin-hero { display: flex; flex-direction: column; gap: 0.25rem; } #app-boot-skeleton-admin .boot-admin-hero__eyebrow { height: 0.625rem; width: 6rem; } #app-boot-skeleton-admin .boot-admin-hero__title { height: 2rem; width: min(18rem, 100%); } @media (min-width: 768px) { #app-boot-skeleton-admin .boot-admin-hero__title { height: 2.25rem; } } #app-boot-skeleton-admin .boot-admin-hero__desc { height: 1.25rem; width: min(42rem, 100%); } #app-boot-skeleton-admin .boot-admin-section { display: flex; flex-direction: column; gap: 1rem; } #app-boot-skeleton-admin .boot-admin-section__head { display: flex; flex-direction: column; gap: 0.125rem; } #app-boot-skeleton-admin .boot-admin-section__eyebrow { height: 0.625rem; width: 4rem; } #app-boot-skeleton-admin .boot-admin-section__title { height: 1.75rem; width: 10rem; } #app-boot-skeleton-admin .boot-admin-grid { display: grid; gap: 0.75rem; } #app-boot-skeleton-admin .boot-admin-grid--metrics { grid-template-columns: repeat(2, 1fr); } @media (min-width: 1024px) { #app-boot-skeleton-admin .boot-admin-grid--metrics { grid-template-columns: repeat(4, 1fr); } } #app-boot-skeleton-admin .boot-admin-grid--tiles { grid-template-columns: 1fr; } @media (min-width: 640px) { #app-boot-skeleton-admin .boot-admin-grid--tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { #app-boot-skeleton-admin .boot-admin-grid--tiles { grid-template-columns: repeat(4, 1fr); } } #app-boot-skeleton-admin .boot-admin-kpi, #app-boot-skeleton-admin .boot-admin-tile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid var(--boot-border); border-radius: var(--boot-radius-xl); background: var(--boot-card); padding: 0.75rem 1rem; box-shadow: var(--boot-shadow-sm); } #app-boot-skeleton-admin .boot-admin-kpi__copy, #app-boot-skeleton-admin .boot-admin-tile__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.25rem; } #app-boot-skeleton-admin .boot-admin-kpi__label { height: 0.625rem; width: 5rem; } #app-boot-skeleton-admin .boot-admin-kpi__value { height: 1.75rem; width: 3.5rem; } #app-boot-skeleton-admin .boot-admin-kpi__icon, #app-boot-skeleton-admin .boot-admin-tile__icon { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: var(--boot-radius-lg); } @media (min-width: 640px) { #app-boot-skeleton-admin .boot-admin-kpi__icon, #app-boot-skeleton-admin .boot-admin-tile__icon { width: 2.25rem; height: 2.25rem; } } #app-boot-skeleton-admin .boot-admin-tile__title { height: 1rem; width: 60%; } #app-boot-skeleton-admin .boot-admin-tile__line { height: 0.75rem; width: 100%; } #app-boot-skeleton-admin .boot-admin-grid--clusters { grid-template-columns: 1fr; } @media (min-width: 768px) { #app-boot-skeleton-admin .boot-admin-grid--clusters { grid-template-columns: repeat(3, 1fr); } } #app-boot-skeleton-admin .boot-admin-cluster { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--boot-border); border-radius: var(--boot-radius-xl); background: var(--boot-card); box-shadow: var(--boot-shadow-sm); } #app-boot-skeleton-admin .boot-admin-cluster__head { display: flex; align-items: center; gap: 0.625rem; border-bottom: 1px solid var(--boot-border); background: color-mix(in oklch, var(--boot-muted) 40%, transparent); padding: 0.75rem 1rem; } @media (min-width: 640px) { #app-boot-skeleton-admin .boot-admin-cluster__head { padding: 0.875rem 1.25rem; } } #app-boot-skeleton-admin .boot-admin-cluster__bar { width: 0.125rem; height: 1rem; flex-shrink: 0; border-radius: 9999px; } #app-boot-skeleton-admin .boot-admin-cluster__title { height: 0.75rem; width: 7rem; } #app-boot-skeleton-admin .boot-admin-cluster__badge { margin-left: auto; height: 1.25rem; width: 1.5rem; border-radius: var(--boot-radius); } #app-boot-skeleton-admin .boot-admin-cluster__body { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; } @media (min-width: 640px) { #app-boot-skeleton-admin .boot-admin-cluster__body { padding: 1.25rem; } } #app-boot-skeleton-admin .boot-admin-cluster__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; } #app-boot-skeleton-admin .boot-admin-cluster__icon { width: 1rem; height: 1rem; flex-shrink: 0; border-radius: 0.25rem; } #app-boot-skeleton-admin .boot-admin-cluster__label { height: 1rem; flex: 1; } #app-boot-skeleton-admin .boot-admin-attention-empty { border: 1px solid var(--boot-border); border-radius: var(--boot-radius-xl); background: var(--boot-card); padding: 1.5rem 1rem; text-align: center; } #app-boot-skeleton-admin .boot-admin-attention-empty__line { margin: 0 auto; height: 1rem; width: 14rem; max-width: 100%; } /* Admin list page — boot splash + React `page-skeleton` (no Tailwind required). Width matches `data-table-companies.tsx` main: max-w-[calc(100dvw-255px)] / 47px. Header stays full width; table block uses the calc (same as real page). */ #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list { display: flex; width: 100%; flex: 1; flex-direction: column; gap: 0; box-sizing: border-box; } .page-skeleton.boot-admin-list, .page-skeleton.boot-admin-list * { box-sizing: border-box; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header { display: flex; flex-shrink: 0; flex-direction: column; gap: 0.25rem; padding: 1.5rem 1.5rem 0; } /* Title block inside `px-6 pt-6` — parent supplies spacing (matches `AdminPageHeader` routes). */ :is(.page-skeleton.boot-dashboard-list) .px-6.pt-6 > .boot-admin-page-header { padding: 0; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__eyebrow { height: 0.625rem; width: 6rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__title { height: 2rem; width: min(14rem, 100%); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__desc { height: 1.25rem; width: min(36rem, 100%); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__action { height: 2.25rem; width: 7.5rem; border-radius: var(--boot-radius-md); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__actions .boot-admin-page-header__action:last-child { width: 6rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__row { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__row { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1.5rem; } } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-page-header__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.25rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-list-body { display: flex; width: 100%; max-width: calc(100dvw - 255px); flex: 1; flex-direction: column; gap: 1rem; min-height: 0; padding: 1.5rem; } html.sidebar-collapsed :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-list-body, .page-skeleton.boot-admin-list.page-skeleton--sidebar-collapsed .boot-admin-list-body { max-width: calc(100dvw - 47px); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-toolbar { display: flex; height: 3rem; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.5rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-toolbar__left { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.5rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-toolbar__search { height: 2.25rem; min-width: 10rem; flex: 1; max-width: 20dvw; border-radius: var(--boot-radius-md); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-toolbar__toggle { display: none; height: 2rem; width: 7rem; border-radius: var(--boot-radius-md); } @media (min-width: 640px) { :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-toolbar__toggle { display: block; } } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-toolbar__filter { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--boot-radius-md); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-toolbar__right { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-toolbar__action { height: 2.25rem; width: 7rem; border-radius: var(--boot-radius-md); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table { overflow: hidden; border: 1px solid var(--boot-border); border-radius: var(--boot-radius-md); background: linear-gradient( to bottom, color-mix(in oklch, var(--boot-muted) 8%, transparent), color-mix(in oklch, var(--boot-muted) 18%, transparent) ); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table__head { display: grid; grid-template-columns: 2fr repeat(6, 1fr) 3rem; gap: 0.5rem; border-bottom: 1px solid var(--boot-border); background: color-mix(in oklch, var(--boot-muted) 35%, transparent); padding: 0.625rem 0.5rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table__head-cell { height: 1rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table__body { display: flex; flex-direction: column; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table__row { display: grid; grid-template-columns: 2fr repeat(6, 1fr) 3rem; gap: 0.5rem; border-bottom: 1px solid var(--boot-border); padding: 0.75rem 0.5rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table__row:last-child { border-bottom: none; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table__cell { height: 1rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table__cell--pill { height: 1.25rem; width: 5rem; border-radius: 9999px; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-table__cell--action { width: 2rem; height: 2rem; margin-inline: auto; border-radius: var(--boot-radius-md); } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-pagination__size { height: 2rem; width: 8rem; } :is( #app-boot-skeleton-admin .boot-admin-list, #app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-admin-list, .page-skeleton.boot-dashboard-list ) .boot-admin-pagination__nav { height: 2rem; width: 12rem; } /* Dashboard list body — full width, matches `data-table-companies.tsx` (non-admin). */ .page-skeleton.boot-dashboard-list, .page-skeleton.boot-dashboard-list * { box-sizing: border-box; } :is(#app-boot-skeleton .boot-dashboard-list, .page-skeleton.boot-dashboard-list) .boot-dashboard-list-body { display: flex; width: 100%; max-width: 100%; flex: 1; flex-direction: column; gap: 1rem; min-height: 0; padding: 1.5rem; } /* Dashboard home — React skeleton (`.page-skeleton.boot-dashboard-home`) mirrors `#app-boot-skeleton`. */ .page-skeleton.boot-dashboard-home, .page-skeleton.boot-dashboard-home *, .page-skeleton.boot-dashboard-shell, .page-skeleton.boot-dashboard-shell * { box-sizing: border-box; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-shimmer--lg { border-radius: var(--boot-radius-lg); } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-shimmer--pill { border-radius: 9999px; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-shimmer--on-primary { background: color-mix( in oklch, var(--boot-primary-foreground) 22%, transparent ); border-radius: var(--boot-radius); } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-shimmer--on-primary.boot-shimmer--sm { border-radius: 0.25rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-shimmer--on-primary::after { background: linear-gradient( 90deg, transparent 0%, color-mix(in oklch, var(--boot-primary-foreground) 35%, transparent) 50%, transparent 100% ); } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-nav { display: flex; flex-shrink: 0; flex-direction: row; align-items: center; justify-content: space-between; background: var(--boot-primary); padding: 0.5rem 1.25rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-nav__start { display: flex; align-items: center; gap: 1rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-nav__menu { width: 2.5rem; height: 2.5rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-nav__brand { display: flex; flex-direction: column; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-nav__brand-line + .boot-nav__brand-line { margin-top: 0.125rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-nav__actions { display: flex; width: fit-content; align-items: center; gap: 0.5rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-shell) .boot-nav__action { width: 2rem; height: 2rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-breadcrumb { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--boot-border); padding: 0.75rem 1.5rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-breadcrumb__trail { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.75rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-breadcrumb__icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-breadcrumb__label { height: 1rem; width: 7rem; max-width: 40%; border-radius: var(--boot-radius-md); } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-breadcrumb__switcher { margin-left: auto; flex-shrink: 0; height: 2.5rem; width: 14rem; border-radius: var(--boot-radius-md); } @media (min-width: 768px) { :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-breadcrumb__switcher { width: 16rem; } } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-main { flex: 1; overflow: hidden; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-content { display: flex; max-width: 80rem; flex-direction: column; gap: 3rem; margin: 0 auto; padding: 2.5rem 1.5rem; } @media (min-width: 768px) { :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-content { padding-top: 3rem; padding-bottom: 3rem; } } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-section { display: flex; flex-direction: column; gap: 1rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-section-head { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; text-align: center; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-eyebrow { height: 0.625rem; width: 4rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-section-title { height: 1.75rem; width: 10rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-section-desc { height: 1.25rem; width: min(28rem, 100%); } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-grid { display: flex; flex-direction: column; gap: 0.75rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-favorites { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; border: 1px dashed var(--boot-border); border-radius: var(--boot-radius-xl); background: color-mix(in oklch, var(--boot-muted) 20%, transparent); padding: 2.5rem 1.5rem; text-align: center; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-favorites__icon { width: 2.5rem; height: 2.5rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-favorites__copy { display: flex; width: 100%; max-width: 20rem; flex-direction: column; align-items: center; gap: 0.25rem; } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-favorites__title { height: 0.875rem; width: 10rem; border-radius: var(--boot-radius-md); } :is(#app-boot-skeleton, .page-skeleton.boot-dashboard-home) .boot-favorites__desc { height: 0.75rem; width: 100%; border-radius: 0.25rem; }