/* arqu_ui — engine-owned layout + chrome styles.
*
* Hand-authored (UNLIKE styles.css, which is generated from the KTUI dist and
* must not be edited). The admin/app layout chrome lives here so it survives a
* styles.css regeneration: the vendored dist scopes the sidebar shell under a
* non-semantic template class nothing in a real app carries — this file
* re-authors that layout under the SEMANTIC .kt-admin-layout the shipped layouts
* put on , adds the fixed positioning the dist assumed but never declared,
* wires the responsive off-canvas drawer, and defines the shared chrome regions
* both engine layouts reference.
*
* Engine-owned responsiveness: the responsive drawer-enable (.kt-drawer-responsive)
* and the drawer-toggle hide (.kt-drawer-toggle) are declared HERE with real
* @media queries rather than relying on the dist's compiled Tailwind utilities
* (lg:hidden, lg:[--kt-drawer-enable:false]) — those utilities are tree-shaken
* from the generated dist and absent in a non-Tailwind host, so engine-critical
* behavior must not depend on them.
*
* Single desktop breakpoint: 64rem. CSS @media cannot read a custom property in
* its condition, so the literal is repeated across the queries in THIS file
* only — change the breakpoint here.
*
* Cascade: loaded after styles.css, and the dist declares
* `@layer theme, base, components, utilities`, so these @layer components rules
* order after the dist's component rules (locked by a test asserting the dist
* declares that layer). Light-only; theme tokens only.
*/
/* Accessibility token override — UNLAYERED on purpose.
*
* The generated styles.css sets the light-theme --primary to var(--color-blue-500)
* (oklch 62.3% ≈ #2b7fff): white button text on it is 3.76:1, which FAILS WCAG 2.1
* AA (needs 4.5:1 for normal text) — axe-core flags .kt-btn-primary as a serious
* color-contrast violation across every consumer (#93). Darken --primary to
* var(--color-blue-600) (oklch 54.6%), the value the dist already uses in its
* other theme context, which clears AA with white text.
*
* This MUST be unlayered: styles.css declares --primary in an UNLAYERED :root
* rule, and an unlayered declaration beats any @layer rule regardless of order —
* so a layered override here (the rest of this file lives in @layer components)
* would LOSE to the dist token. Being unlayered too, this override wins by source
* order: _head loads styles.css then layout.css, so this later :root declaration
* takes precedence. styles.css is generated/do-not-edit, so the fix lives here as
* a token override — the README's sanctioned per-engine theming mechanism. */
:root {
--primary: var(--color-blue-600);
}
/* Self-hosted Inter (#104) — UNLAYERED, like the --primary override above.
*
* Metronic's whole type scale is Inter. The engine used to load it from
* fonts.googleapis.com via a _head + two preconnects, but on a consumer's
* auth/admin pages that leaks sign-in metadata off-origin and hard-depends on
* Google for a security-sensitive surface (CodeRabbit, arqu-co/id#96). Post-#92
* the engine owns the base + Inter, so we vendor the four static woff2 weights
* Metronic uses (app/assets/fonts/arqu_ui/inter/, shipped by the gemspec's
* app/**/* glob) and declare them here. Propshaft flattens the asset load path,
* so a font at app/assets/fonts/arqu_ui/inter/Inter-Regular.woff2 is served at
* arqu_ui/inter/Inter-Regular.woff2 — from this stylesheet (logical arqu_ui/)
* the relative url("/assets/arqu_ui/inter/Inter-Regular-0c7c28ff.woff2") resolves there, mirroring exactly
* how keenicons.css references its own vendored faces. font-display: swap paints
* text immediately in the fallback then swaps to Inter once loaded. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/arqu_ui/inter/Inter-Regular-0c7c28ff.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/arqu_ui/inter/Inter-Medium-061ba9f2.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/arqu_ui/inter/Inter-SemiBold-adf8f9dc.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/arqu_ui/inter/Inter-Bold-ebe00c8d.woff2") format("woff2");
}
/* Make Inter the first family of the resolved sans stack. The generated
* styles.css resolves the body through --default-font-family: var(--font-sans),
* but its --font-sans is the bare Tailwind system stack (no Inter) — so without
* this the self-hosted face would never paint and the body would fall back to
* the system UA face, not Inter. UNLAYERED so it beats the dist's unlayered
* :root --font-sans by source order (styles.css then layout.css), the same
* precedence mechanism the --primary override above relies on. The tail mirrors
* the dist's stack so a host with Inter unavailable still degrades gracefully. */
:root, :host {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Keenicon hide override — UNLAYERED on purpose.
*
* keenicons.css sets `display: inline-flex` on the icon base classes
* (.ki-filled / .ki-duotone / .ki-outline / .ki-solid) with NO @layer, while the
* generated styles.css emits Tailwind's `.hidden { display: none }` inside
* `@layer utilities`. An UNLAYERED declaration beats ANY layered rule regardless
* of specificity, so the icon's `display: inline-flex` wins over `.hidden` — a
* keenicon tagged `hidden` still renders. That silently breaks every component
* that toggles an icon's visibility with `.hidden`: CopyButtonComponent ships its
* check icon as `ki-filled ki-check hidden` and swaps the two on copy, so without
* this fix BOTH icons show at once and the checkmark leaks in the idle state.
*
* Restore the intent by re-asserting the hide UNLAYERED (so it is not outranked by
* the unlayered icon rule) and at specificity 0,2,0 (`.ki-*.hidden` beats the
* 0,1,0 `.ki-*` base), which wins on specificity among the two unlayered rules.
* styles.css/keenicons.css are generated/do-not-edit, so the fix lives here. */
.ki-filled.hidden,
.ki-duotone.hidden,
.ki-outline.hidden,
.ki-solid.hidden {
display: none;
}
@layer components {
/* ---- admin sidebar-shell layout (semantic .kt-admin-layout scope) ------- */
.kt-admin-layout {
--sidebar-transition-duration: 0.3s;
--sidebar-transition-timing: ease;
--sidebar-width: 280px;
--header-height: 70px;
}
@media (max-width: 64rem) {
.kt-admin-layout {
--header-height: 60px;
}
}
.kt-admin-layout .kt-header {
height: var(--header-height);
transition: inset-inline-start var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}
.kt-admin-layout .kt-sidebar {
width: var(--sidebar-width);
}
.kt-admin-layout .kt-wrapper {
transition: padding-inline-start var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}
/* Desktop (>=64rem): pin the sidebar + header and offset the content. The dist
shipped the offsets (padding/inset) but never the fixed positioning they
assume, so the chrome never actually pinned. */
@media (min-width: 64rem) {
.kt-admin-layout.kt-sidebar-fixed .kt-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
z-index: 20;
transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}
.kt-admin-layout.kt-header-fixed .kt-header {
position: fixed;
inset-block-start: 0;
inset-inline-end: 0;
z-index: 10;
}
.kt-admin-layout .kt-sidebar .kt-sidebar-header {
height: var(--header-height);
}
.kt-admin-layout.kt-sidebar-fixed .kt-wrapper {
padding-inline-start: var(--sidebar-width);
}
.kt-admin-layout.kt-sidebar-fixed.kt-header-fixed .kt-header {
inset-inline-start: var(--sidebar-width);
}
/* Reserve the fixed header's height. Scoped to the desktop breakpoint where
the header is actually position: fixed — below it the header is in normal
flow, so a base-scope padding-top is a dead gap above the header on mobile
(#101). Keyed on .kt-header-fixed (not sidebar-fixed): the offset pairs
with the fixed header regardless of the sidebar's fixed state. */
.kt-admin-layout.kt-header-fixed .kt-wrapper {
padding-top: var(--header-height);
}
/* Fill the viewport below the fixed header so the footer pins to the bottom
of the page on short content. The header is fixed here (out of flow) and
the wrapper reserves its height via padding-top, so the content column
fills exactly the remaining viewport: 100dvh - header. */
.kt-admin-layout.kt-header-fixed .kt-sidebar-wrapper {
min-block-size: calc(100dvh - var(--header-height));
}
}
/* Sidebar as a flex column with a scrollable content region; this is also the
off-canvas drawer surface below the breakpoint (KTDrawer adds
.kt-drawer/.kt-drawer-start, which styles.css positions + slides). */
.kt-admin-layout .kt-sidebar {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--background);
border-inline-end: 1px solid var(--border);
}
/* Brand header: center the brand mark with the page padding, like Metronic's
kt-sidebar-header (flex items-center px-6). Without this the brand sits at
the sidebar's top-left and clips. shrink-0 keeps it from collapsing. */
.kt-admin-layout .kt-sidebar-header {
display: flex;
align-items: center;
flex-shrink: 0;
padding-inline: 1.5rem;
}
.kt-admin-layout .kt-sidebar-content {
flex: 1 1 auto;
overflow-y: auto;
}
/* The content column: the sidebar's sibling that stacks the header + main.
Engine-owned here (the dist only defined a same-named class as a .kt-sidebar
descendant — a different DOM position — and that inert rule was curated out
of styles.css). min-width:0 lets long content shrink instead of overflowing. */
.kt-admin-layout .kt-sidebar-wrapper {
display: flex;
flex-direction: column;
min-width: 0;
}
/* The main region grows to fill the content column, so a short page still
pushes the footer to the bottom instead of letting it float up under the
content (Metronic's kt-wrapper is `flex grow flex-col`; the engine content
column mirrors that growth here). */
.kt-admin-layout .kt-admin-main {
flex: 1 0 auto;
padding: calc(var(--spacing) * 5);
}
/* ---- engine-owned responsive drawer primitives (no dist Tailwind) -------- */
/* KTDrawer reads --kt-drawer-enable off the element: enabled (live off-canvas
drawer) below the breakpoint, disabled (static chrome) at/above it. Replaces
the dist's lg:[--kt-drawer-enable:false] utility so it survives regen and
works without Tailwind in the host. */
.kt-drawer-responsive {
--kt-drawer-enable: true;
}
@media (min-width: 64rem) {
.kt-drawer-responsive {
--kt-drawer-enable: false;
}
}
/* The drawer toggle (hamburger) is only needed while the drawer is off-canvas;
hide it once the sidebar is the static fixed chrome. Replaces lg:hidden. */
@media (min-width: 64rem) {
.kt-drawer-toggle {
display: none;
}
}
/* ---- shared chrome: referenced by BOTH the admin and app layouts --------- */
.kt-admin-layout .kt-header,
.kt-app-layout .kt-header {
display: flex;
align-items: center;
background-color: var(--background);
border-block-end: 1px solid var(--border);
}
.kt-admin-layout .kt-header-container,
.kt-app-layout .kt-header-container {
display: flex;
align-items: center;
gap: calc(var(--spacing) * 2);
width: 100%;
}
/* The header's primary nav region (the optional :header_nav slot) sits in the
header flex row, left of the auto-pushed user menu. */
.kt-admin-layout .kt-header-nav,
.kt-app-layout .kt-header-nav {
display: flex;
align-items: center;
}
.kt-admin-layout .kt-header-user-menu,
.kt-app-layout .kt-header-user-menu {
margin-inline-start: auto;
}
.kt-brand {
display: inline-flex;
align-items: center;
gap: calc(var(--spacing) * 2);
font-weight: 600;
color: var(--foreground);
}
.kt-brand-name {
font-weight: 600;
}
.kt-brand-logo {
height: calc(var(--spacing) * 8);
width: auto;
}
/* ---- app-layout-only chrome: the top-nav brand + horizontal primary nav ----
The app (top-nav) layout references kt-header-brand, kt-header-nav and
kt-app-main; the shared chrome above styles the header shell, but these
app-only regions need their own structural rules or they render unstyled. */
.kt-app-layout {
--header-height: 70px;
}
@media (max-width: 64rem) {
.kt-app-layout {
--header-height: 60px;
}
}
.kt-app-layout .kt-header {
height: var(--header-height);
}
/* The app layout is a fixed top-nav surface (no sidebar/drawer), so — unlike
the admin header, which only pins at the desktop breakpoint — the app header
pins at every width when kt-header-fixed is set, and the content region
offsets by the header height so nothing hides behind it. */
.kt-app-layout.kt-header-fixed .kt-header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 10;
}
.kt-app-layout .kt-header-brand {
display: flex;
align-items: center;
flex-shrink: 0;
margin-inline-end: calc(var(--spacing) * 4);
}
/* The horizontal primary nav: space the top-level items so host-supplied
links (or a horizontal MenuComponent) read as a nav row, not a run-on. */
.kt-app-layout .kt-header-nav {
gap: calc(var(--spacing) * 5);
}
/* The content region below the top bar: vertical breathing room to match the
admin main (kt-container-fixed already supplies the centered max-width +
horizontal padding). */
.kt-app-layout .kt-app-main {
padding-block: calc(var(--spacing) * 5);
}
/* When the header is fixed it leaves the flow, so the content must clear it:
offset the top by the header height plus the same breathing room. */
.kt-app-layout.kt-header-fixed .kt-app-main {
padding-top: calc(var(--header-height) + var(--spacing) * 5);
}
/* ---- app top-nav responsive drawer -------------------------------------
The app shell has no sidebar, so below the desktop breakpoint the horizontal
primary nav has nowhere to go and its trailing items clip off-screen. Mirror
the admin shell's proven off-canvas story: the SAME engine-owned
.kt-drawer-responsive enable + .kt-drawer-toggle hide primitives above drive
KTDrawer, and these rules give the collapsed .kt-header-nav its panel shape.
KTDrawer's .kt-drawer (from the dist) supplies the fixed position, --popover
background, and slide transition but sizes only to content; scope the panel
shape to .kt-header-nav.kt-drawer so it applies ONLY when KTDrawer has added
the off-canvas class (below 64rem) — at/above the breakpoint the drawer is
disabled and the nav renders inline in the header exactly as before. */
.kt-app-layout {
--app-drawer-width: 280px;
}
/* The collapsed nav as an off-canvas panel: a definite width and a vertical
stack with breathing room, overriding the inline header-row rules
(align-items: center, the wide row gap) that only make sense horizontally. */
.kt-app-layout .kt-header-nav.kt-drawer {
width: var(--app-drawer-width);
max-width: 90%;
align-items: stretch;
gap: calc(var(--spacing) * 1);
padding: calc(var(--spacing) * 4);
}
/* A host's horizontal MenuComponent (.kt-menu, a flex row) reflows to a
vertical list inside the narrow drawer so every top-level item stacks and
stays reachable — the whole point of the collapse. */
.kt-app-layout .kt-header-nav.kt-drawer .kt-menu {
flex-direction: column;
align-items: stretch;
width: 100%;
}
/* ---- auth-layout chrome: the centered sign-in card surface --------------
The auth layout is a chrome-free, single-card surface — no header, sidebar,
nav or user-menu (an unauthenticated visitor has none). Its four regions
(kt-auth-layout on , kt-auth-wrapper, kt-auth-brand, kt-auth-card)
carried NO styling and rendered the sign-in card full-bleed at the top-left
of the viewport; this section is that missing chrome. The kt-card
already ships a border + subtle shadow, so painting the page in the semantic
var(--background) is enough to read the card as a distinct surface —
separation comes from the card's own edge, not a heavy backdrop. */
.kt-auth-layout {
display: grid;
place-items: center;
min-block-size: 100dvh;
background-color: var(--background);
}
/* The centered column stacks the brand above the card with vertical rhythm,
capped at a comfortable sign-in width so the card never stretches full-bleed.
Inline padding keeps the card off the edges on a narrow viewport; block
padding gives breathing room when a tall form makes the page scroll. */
.kt-auth-wrapper {
display: flex;
flex-direction: column;
gap: calc(var(--spacing) * 6);
inline-size: 100%;
max-inline-size: 25rem;
padding-block: calc(var(--spacing) * 10);
padding-inline: calc(var(--spacing) * 5);
}
/* Center the brand mark above the card. */
.kt-auth-brand {
display: flex;
justify-content: center;
}
/* The card fills the column's constrained width. */
.kt-auth-card {
inline-size: 100%;
}
}
/* Visually-hidden utility — re-authored here because the generated styles.css is
* Tailwind-tree-shaken from the design-system dist, whose curated templates never
* use `.sr-only`, so the utility is absent from the shipped stylesheet. But engine
* components DO depend on it: CopyButtonComponent hides its live-region status text
* (and an icon-only button's label) with `.sr-only`, and PaginationComponent labels
* its prev/next controls the same way. Without this rule those nodes render visibly
* (e.g. a duplicated "Copied" next to the button, a leaked "Previous"/"Next"),
* breaking both fidelity and the accessible-name contract. Same precedent as the
* tree-shaken responsive utilities re-authored above: the engine owns what the dist
* dropped. This is the standard accessible-hiding rule (Tailwind's `.sr-only`);
* placed in @layer utilities so it composes with the dist's utility layer. */
@layer utilities {
.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;
}
}
/* Popover token utilities — engine-owned because the dist tree-shook them.
*
* styles.css is a compiled Tailwind v4 artifact: a `bg-X` / `text-X` utility
* survives into the shipped stylesheet only if something INSIDE arqu-ui used it,
* so Tailwind could keep it. Nothing here uses `bg-popover`, so `.bg-popover` and
* `.text-popover-foreground` were tree-shaken out of the dist entirely — and every
* consumer that composes a popover with `bg-popover` (loading styles.css as a plain
* design layer, the README-documented path) rendered it TRANSPARENT (#194).
*
* Re-author the pair here, pointing at the theme-scoped RUNTIME vars exactly the way
* the dist's own `.bg-muted { background-color: var(--muted) }` does — not the
* `--color-*` alias — so light and dark are covered for free (the runtime var flips
* per theme context: white in light, zinc-950 in dark). Same precedent as the
* tree-shaken responsive/.sr-only utilities above: the engine owns what the dist
* dropped. @layer utilities so they compose with the dist's utility layer (order
* after component rules, overridable by a caller's more-specific utility). */
@layer utilities {
.bg-popover {
background-color: var(--popover);
}
.text-popover-foreground {
color: var(--popover-foreground);
}
}
/* Popover theme-alias parity — UNLAYERED :root, like the --font-sans/--primary
* overrides above. styles.css exports the --color-popover theme alias but NOT its
* --color-popover-foreground companion (muted/primary ship both). Register the
* missing half so the exported popover token pair reaches parity (#194). */
:root {
--color-popover-foreground: var(--popover-foreground);
}
/* Read-only input styling — engine-owned because the dist ships none.
*
* The generated styles.css styles `.kt-input:disabled` (muted: opacity 60% +
* cursor not-allowed) but declares NO read-only rule, so a readonly field —
* which FormFieldComponent(readonly: true) emits, and which stays focusable and
* form-submitting unlike a disabled one — would render identical to an editable
* input, giving no signal it can't be typed into. The DS field is the opinionated
* default, so it owns that affordance: mirror the dist's own non-editable
* treatment (opacity + not-allowed) for read-only inputs.
*
* Target the `[readonly]` ATTRIBUTE, not the `:read-only` pseudo-class: the
* pseudo-class also matches inputs that are inherently non-editable regardless of
* the attribute — notably `type="file"`, which the dist explicitly styles as
* `.kt-input[type=file]` — so `.kt-input:read-only` would wrongly mute a normal
* file input. `[readonly]` matches only a control the component actually marked
* readonly. Same precedent as the rules above: the engine owns what the dist
* dropped. @layer components so it orders after (and matches the specificity
* origin of) the dist's `.kt-input:disabled` rule in that same layer.
*
* The textarea shares this: the dist styles `.kt-textarea:disabled` but no
* read-only rule, so a read-only `