/* =========================================================================
MedicalBot — app.css
Single source of truth dla design systemu.
Wdrożenie: projekt Blazor, .NET 8. Statyczny zasób, linkowany z _Host.cshtml.
Struktura pliku:
1. :root — design tokens (kolory, spacing, radius, typo, z-index, breakpointy)
2. Reset + base styles
3. Layout primitives (shell, sidebar, content)
4. Components (buttons, inputs, selects, tables, badges, alerts, cards, modal)
5. Module-specific (chat, access matrix)
Zasada: komponenty NIE używają hard-codowanych wartości — tylko zmienne z :root.
========================================================================= */
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
/* --- Color · Brand (granat ZARYS) ------------------------- */
--color-brand-50: #eef2f8;
--color-brand-100: #d9e2ef;
--color-brand-200: #b4c3db;
--color-brand-300: #7e97bd;
--color-brand-400: #4c6a97;
--color-brand-500: #1e3358;
--color-brand-600: #172845;
--color-brand-700: #0f1d36; /* sidebar bg */
--color-brand-800: #0a1528;
--color-brand-900: #050a18;
/* Aliasy semantyczne — używaj ich w komponentach */
--color-brand: var(--color-brand-700);
--color-brand-hover: var(--color-brand-600);
--color-brand-active: var(--color-brand-800);
--color-brand-accent: #79b4ff; /* niebieski akcent dla active state w sidebarze */
/* --- Color · Neutral (warm slate) ------------------------- */
--color-neutral-0: #ffffff;
--color-neutral-50: #f6f7f9; /* background app */
--color-neutral-100: #eef0f4; /* background sub (sidebar rozmów w chacie) */
--color-neutral-200: #e3e6eb; /* borders subtle */
--color-neutral-300: #ced2da; /* borders default */
--color-neutral-400: #9aa0ad; /* muted text, placeholders */
--color-neutral-500: #6b7180; /* secondary text */
--color-neutral-600: #4a4f5c;
--color-neutral-700: #2e323c;
--color-neutral-800: #1d2027; /* primary text */
--color-neutral-900: #0d0f14;
/* --- Color · State --------------------------------------- */
--color-success-50: #edf8f1;
--color-success-100: #d1ecdb;
--color-success-500: #1f9254;
--color-success-700: #155d37;
--color-warning-50: #fdf6e4;
--color-warning-100: #f8e7b0;
--color-warning-500: #a77905;
--color-warning-700: #6b4d02;
--color-danger-50: #fdeceb;
--color-danger-100: #f8cfcc;
--color-danger-500: #c42b1c;
--color-danger-700: #8a1c11;
--color-info-50: #eaf3fb;
--color-info-100: #c9e0f5;
--color-info-500: #1572cb;
--color-info-700: #0f548f;
/* --- Color · Semantic aliases (używaj w komponentach) ----- */
--color-bg: var(--color-neutral-50);
--color-bg-sub: var(--color-neutral-100);
--color-surface: var(--color-neutral-0);
--color-surface-raised: var(--color-neutral-0);
--color-text-primary: var(--color-neutral-800);
--color-text-secondary: var(--color-neutral-500);
--color-text-muted: var(--color-neutral-400);
--color-text-inverse: var(--color-neutral-0);
--color-text-brand: var(--color-brand-700);
--color-text-link: var(--color-brand-600);
--color-text-danger: var(--color-danger-500);
--color-border: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-focus: var(--color-brand-500);
/* --- Spacing (skala 4px) --------------------------------- */
--space-2xs: 2px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;
--space-4xl: 64px;
/* --- Radius --------------------------------------------- */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-full: 9999px;
/* --- Typography ----------------------------------------- */
--font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;
--font-size-2xs: 10px; /* captions, labels mono, counts */
--font-size-xs: 11px; /* metadata, timestamps */
--font-size-sm: 12px; /* small body, table cells dense */
--font-size-base: 13px; /* default UI text */
--font-size-md: 14px; /* body copy, primary text */
--font-size-lg: 15px; /* lede, card titles */
--font-size-xl: 17px; /* section headings */
--font-size-2xl: 24px; /* page H2 */
--font-size-3xl: 32px; /* page H1 */
--font-size-4xl: 40px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2; /* headings */
--line-height-snug: 1.35; /* UI elements, buttons */
--line-height-normal: 1.5; /* body */
--line-height-relaxed: 1.65; /* long-form (odpowiedzi chatu) */
--letter-spacing-tight: -0.02em; /* duże nagłówki */
--letter-spacing-snug: -0.01em; /* średnie nagłówki */
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.04em;
--letter-spacing-wider: 0.08em; /* uppercase labels */
--letter-spacing-widest: 0.12em; /* uppercase eyebrow labels */
/* --- Elevation ----------------------------------------- */
--shadow-xs: 0 1px 2px rgba(15, 29, 54, 0.04);
--shadow-sm: 0 1px 2px rgba(15, 29, 54, 0.06), 0 1px 3px rgba(15, 29, 54, 0.04);
--shadow-md: 0 4px 8px rgba(15, 29, 54, 0.06), 0 2px 4px rgba(15, 29, 54, 0.04);
--shadow-lg: 0 8px 20px rgba(15, 29, 54, 0.08), 0 4px 8px rgba(15, 29, 54, 0.04);
--shadow-xl: 0 20px 40px rgba(15, 29, 54, 0.12), 0 8px 16px rgba(15, 29, 54, 0.06);
/* --- Focus ring --------------------------------------- */
--focus-ring-width: 3px;
--focus-ring-color: rgba(30, 51, 88, 0.25);
--focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
/* --- Motion ------------------------------------------- */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 120ms;
--duration-normal: 200ms;
--duration-slow: 320ms;
/* --- Layout dimensions -------------------------------- */
--shell-sidebar-width: 248px;
--shell-content-max-width: 1200px;
--chat-convo-sidebar-width: 260px;
--chat-message-max-width: 780px;
--login-card-max-width: 420px;
/* --- Breakpoints (do użycia w @media) ------------------ */
/* uwaga: CSS nie wspiera var() w @media — te stałe są tylko referencją dla dev */
/* --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; */
/* --- Z-index scale ------------------------------------ */
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 800;
--z-modal: 900;
--z-toast: 1000;
--z-tooltip: 1100;
}
/* ============================================================
2. RESET + BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-text-primary);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
code, kbd, samp {
font-family: var(--font-mono);
font-size: 0.92em;
}
/* ============================================================
3. LAYOUT — SHELL
============================================================ */
.app-shell {
display: grid;
grid-template-columns: var(--shell-sidebar-width) 1fr;
height: 100vh;
background: var(--color-bg);
}
/* --- Sidebar (ciemny granat) ------------------------------ */
.app-sidebar {
background: var(--color-brand-700);
color: rgba(255, 255, 255, 0.78);
display: flex;
flex-direction: column;
min-height: 0;
}
.app-sidebar__brand {
display: flex;
align-items: center;
gap: var(--space-md);
padding: 22px var(--space-xl);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.app-sidebar__logo {
width: 30px; height: 30px;
border-radius: 7px;
background: var(--color-neutral-0);
color: var(--color-brand-700);
display: grid; place-items: center;
font-weight: var(--font-weight-bold);
flex-shrink: 0;
}
.app-sidebar__brand-name {
color: var(--color-neutral-0);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-md);
letter-spacing: -0.005em;
}
.app-sidebar__brand-meta {
color: rgba(255, 255, 255, 0.5);
font-size: var(--font-size-xs);
font-family: var(--font-mono);
margin-top: var(--space-2xs);
}
.app-sidebar__scroll {
flex: 1;
overflow-y: auto;
padding: 14px var(--space-md);
min-height: 0;
}
.app-sidebar__section-label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-widest);
color: rgba(255, 255, 255, 0.38);
font-weight: var(--font-weight-semibold);
padding: var(--space-md) 10px var(--space-xs);
}
/* Nav link w sidebarze */
.app-nav__link {
display: flex;
align-items: center;
gap: 11px;
padding: var(--space-sm) 10px;
margin: 1px 0;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
text-decoration: none;
position: relative;
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.app-nav__link:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--color-neutral-0);
text-decoration: none;
}
.app-nav__link:focus-visible {
outline: 2px solid var(--color-brand-accent);
outline-offset: -2px;
}
.app-nav__link[aria-current="page"],
.app-nav__link.is-active {
background: rgba(255, 255, 255, 0.09);
color: var(--color-neutral-0);
font-weight: var(--font-weight-medium);
}
.app-nav__link[aria-current="page"]::before,
.app-nav__link.is-active::before {
content: "";
position: absolute;
left: -12px;
top: 10px;
bottom: 10px;
width: 2px;
background: var(--color-brand-accent);
border-radius: 2px;
}
.app-nav__link[aria-disabled="true"] {
color: rgba(255, 255, 255, 0.28);
cursor: not-allowed;
pointer-events: none;
}
.app-nav__link--sub {
color: rgba(255, 255, 255, 0.66);
font-size: var(--font-size-sm);
padding-left: var(--space-md);
}
.app-nav__link--sub:hover { color: rgba(255, 255, 255, 0.92); }
.app-nav__count {
margin-left: auto;
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
background: rgba(255, 255, 255, 0.08);
padding: 1px 6px;
border-radius: var(--radius-full);
color: rgba(255, 255, 255, 0.7);
}
/* Footer sidebara — user + env */
.app-sidebar__foot {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: var(--space-md) var(--space-lg) 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.app-env {
display: flex; align-items: center; gap: 7px;
font-size: var(--font-size-2xs);
color: rgba(255, 255, 255, 0.5);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
padding: 0 var(--space-xs);
}
.app-env__pulse {
width: 6px; height: 6px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
animation: env-pulse 2s var(--ease-out) infinite;
}
@keyframes env-pulse {
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
100% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
.app-user {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-lg);
padding: var(--space-sm) var(--space-sm) var(--space-sm) 10px;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.app-user:hover { background: rgba(255, 255, 255, 0.07); }
.app-user:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.app-user__avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-brand-accent), var(--color-brand-500));
color: var(--color-neutral-0);
display: grid; place-items: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.app-user__meta { min-width: 0; }
.app-user__name {
color: var(--color-neutral-0);
font-size: 12.5px;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-user__role {
color: rgba(255, 255, 255, 0.5);
font-size: 10.5px;
font-family: var(--font-mono);
margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-user__menu-btn {
color: rgba(255, 255, 255, 0.5);
padding: var(--space-xs);
border-radius: var(--radius-sm);
}
.app-user__menu-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--color-neutral-0);
}
/* --- Main (content) ------------------------------------ */
.app-main {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-bg);
}
.app-main__scroll {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.app-page {
padding: 40px var(--space-3xl);
max-width: var(--shell-content-max-width);
}
/* --- Page header ---------------------------------------- */
.page-crumbs {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-bottom: var(--space-sm);
letter-spacing: var(--letter-spacing-wide);
}
.page-crumbs__current { color: var(--color-text-primary); }
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 28px;
}
.page-header__actions {
display: flex; gap: var(--space-sm);
flex-shrink: 0;
}
.page-title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
line-height: var(--line-height-tight);
max-width: 720px;
}
.page-lede {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
max-width: 620px;
margin-top: 10px;
line-height: 1.55;
}
/* --- KPI strip ----------------------------------------- */
.kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: 20px 0;
margin: var(--space-2xl) 0;
}
.kpi {
padding: 0 var(--space-xl);
border-right: 1px solid var(--color-border);
}
.kpi:last-child { border-right: none; }
.kpi:first-child { padding-left: 0; }
.kpi__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
}
.kpi__value {
font-size: 30px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
margin-top: 6px;
line-height: 1;
font-feature-settings: "tnum";
}
.kpi__delta {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: 6px;
font-family: var(--font-mono);
}
/* ============================================================
4. COMPONENTS
============================================================ */
/* --- Button --------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 34px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
white-space: nowrap;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn[disabled], .btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn--sm { height: 28px; padding: 0 10px; font-size: var(--font-size-sm); }
.btn--lg { height: 40px; padding: 0 18px; font-size: var(--font-size-md); }
/* variants */
.btn--primary {
background: var(--color-brand);
color: var(--color-text-inverse);
border-color: var(--color-brand);
}
.btn--primary:hover:not(:disabled) { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-brand-active); border-color: var(--color-brand-active); }
.btn--secondary {
background: var(--color-surface);
color: var(--color-text-primary);
border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-neutral-50); border-color: var(--color-neutral-400); }
.btn--secondary:active:not(:disabled) { background: var(--color-neutral-100); }
.btn--ghost {
background: transparent;
color: var(--color-text-secondary);
border-color: transparent;
}
.btn--ghost:hover:not(:disabled) { background: var(--color-neutral-100); color: var(--color-text-primary); }
.btn--ghost:active:not(:disabled) { background: var(--color-neutral-200); }
.btn--danger {
background: var(--color-danger-500);
color: var(--color-text-inverse);
border-color: var(--color-danger-500);
}
.btn--danger:hover:not(:disabled) { background: var(--color-danger-700); border-color: var(--color-danger-700); }
.btn--icon {
width: 34px; padding: 0;
}
.btn--icon.btn--sm { width: 28px; }
/* loading state */
.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.btn--loading::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 14px; height: 14px;
border: 2px solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
color: var(--color-text-inverse);
animation: btn-spin 0.7s linear infinite;
}
.btn--secondary.btn--loading::after,
.btn--ghost.btn--loading::after { color: var(--color-text-primary); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* --- Icon button (naked) ------------------------------- */
.icon-btn {
width: 28px; height: 28px;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
display: inline-grid; place-items: center;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--color-neutral-100); color: var(--color-text-primary); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* --- Input / Textarea / Select ------------------------ */
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.field__label--required::after {
content: "*";
color: var(--color-danger-500);
font-weight: var(--font-weight-regular);
}
.field__hint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: var(--line-height-snug);
}
.field__error {
font-size: var(--font-size-xs);
color: var(--color-danger-500);
line-height: var(--line-height-snug);
display: flex; align-items: center; gap: 5px;
}
.input,
.textarea,
.select {
width: 100%;
height: 34px;
padding: 0 10px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
color: var(--color-text-primary);
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:hover:not(:disabled):not([readonly]),
.textarea:hover:not(:disabled):not([readonly]),
.select:hover:not(:disabled) { border-color: var(--color-neutral-400); }
.input:focus,
.textarea:focus,
.select:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: var(--focus-ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
background: var(--color-neutral-100);
color: var(--color-text-muted);
cursor: not-allowed;
}
.input[readonly], .textarea[readonly] {
background: var(--color-neutral-50);
color: var(--color-text-secondary);
cursor: default;
}
.input.is-error,
.textarea.is-error,
.select.is-error {
border-color: var(--color-danger-500);
}
.input.is-error:focus,
.textarea.is-error:focus,
.select.is-error:focus {
box-shadow: 0 0 0 var(--focus-ring-width) rgba(196, 43, 28, 0.2);
}
.textarea { height: auto; min-height: 80px; padding: var(--space-sm) 10px; line-height: var(--line-height-normal); resize: vertical; }
.select {
appearance: none;
padding-right: 28px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
/* Search input (with icon slot) */
.input--search {
padding-left: 30px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 10px center;
}
/* Checkbox / Radio */
.checkbox, .radio {
width: 16px; height: 16px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-xs);
background: var(--color-surface);
display: inline-grid; place-items: center;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
appearance: none;
flex-shrink: 0;
}
.radio { border-radius: 50%; }
.checkbox:hover, .radio:hover { border-color: var(--color-neutral-400); }
.checkbox:focus-visible, .radio:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.checkbox:checked, .radio:checked {
background: var(--color-brand);
border-color: var(--color-brand);
}
.checkbox:checked::after {
content: "";
width: 9px; height: 5px;
border: 2px solid var(--color-neutral-0);
border-top: none; border-right: none;
transform: translateY(-1px) rotate(-45deg);
}
.radio:checked::after {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-neutral-0);
}
.checkbox:disabled, .radio:disabled { opacity: 0.5; cursor: not-allowed; }
/* --- Badge / Chip ------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
height: 20px;
padding: 0 var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
font-family: var(--font-mono);
white-space: nowrap;
}
.badge--neutral { background: var(--color-neutral-100); color: var(--color-text-secondary); }
.badge--brand { background: var(--color-brand-50); color: var(--color-brand-700); }
.badge--success { background: var(--color-success-50); color: var(--color-success-700); }
.badge--warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.badge--danger { background: var(--color-danger-50); color: var(--color-danger-700); }
.badge--info { background: var(--color-info-50); color: var(--color-info-700); }
/* Permission chip (None / Read / Write / Admin) */
.perm-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 10px;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
}
.perm-chip--none { background: var(--color-neutral-100); color: var(--color-text-muted); }
.perm-chip--access { background: var(--color-success-50); color: var(--color-success-700); }
/* --- Alert ----------------------------------------------- */
.alert {
display: grid;
grid-template-columns: 20px 1fr;
gap: 12px;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
align-items: start;
}
.alert__icon { color: var(--color-text-muted); flex-shrink: 0; margin-top: 2px; }
.alert__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: 3px;
}
.alert__body {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-normal);
}
.alert--info { background: var(--color-info-50); border-color: var(--color-info-100); }
.alert--info .alert__icon { color: var(--color-info-500); }
.alert--success { background: var(--color-success-50); border-color: var(--color-success-100); }
.alert--success .alert__icon { color: var(--color-success-500); }
.alert--warning { background: var(--color-warning-50); border-color: var(--color-warning-100); }
.alert--warning .alert__icon { color: var(--color-warning-500); }
.alert--danger { background: var(--color-danger-50); border-color: var(--color-danger-100); }
.alert--danger .alert__icon { color: var(--color-danger-500); }
/* --- Card ----------------------------------------------- */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.card--link {
cursor: pointer;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.card--link:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
text-decoration: none;
}
.card--link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-border-focus); }
.card__icon {
width: 40px; height: 40px;
border-radius: 9px;
background: var(--color-brand-50);
color: var(--color-brand-700);
display: grid; place-items: center;
margin-bottom: 14px;
}
.card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
}
.card__body {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: 1.55;
margin-top: 6px;
}
.card__foot {
margin-top: auto;
padding-top: var(--space-lg);
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
border-top: 1px solid var(--color-neutral-100);
}
.card__foot-cta { color: var(--color-text-link); font-weight: var(--font-weight-medium); }
/* --- Table ----------------------------------------------- */
.table-wrap {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--font-size-base);
}
.table th, .table td {
padding: var(--space-md) var(--space-lg);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.table th {
background: var(--color-neutral-50);
color: var(--color-text-secondary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
white-space: nowrap;
}
.table tbody tr {
transition: background var(--duration-fast) var(--ease-out);
}
.table tbody tr:hover { background: var(--color-neutral-50); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.is-selected { background: var(--color-brand-50); }
.table tbody tr.is-selected:hover { background: var(--color-brand-100); }
/* wiersz z niezapisanymi zmianami */
.table tbody tr.is-dirty {
background: var(--color-warning-50);
position: relative;
}
.table tbody tr.is-dirty td:first-child {
box-shadow: inset 3px 0 0 var(--color-warning-500);
}
.table tbody tr.is-dirty:hover { background: var(--color-warning-100); }
.table__empty {
padding: var(--space-4xl) var(--space-xl);
text-align: center;
color: var(--color-text-muted);
}
/* --- Modal ----------------------------------------------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 29, 54, 0.4);
display: grid;
place-items: center;
z-index: var(--z-modal);
padding: var(--space-xl);
}
.modal {
background: var(--color-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 480px;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal__head {
padding: var(--space-xl) var(--space-xl) var(--space-md);
display: flex;
justify-content: space-between;
align-items: start;
gap: var(--space-md);
}
.modal__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
}
.modal__body {
padding: 0 var(--space-xl) var(--space-xl);
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
overflow-y: auto;
}
.modal__foot {
padding: var(--space-lg) var(--space-xl);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
}
/* --- Auth / Login (split) ------------------------------- */
.auth-layout {
min-height: 100vh;
height: 100vh;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
background: var(--color-bg);
width: 100%;
max-width: 100%;
overflow: hidden;
}
.auth-layout > * { min-width: 0; min-height: 0; height: 100%; }
/* --- LEFT: hero with grid pattern, bottom-aligned content -- */
.auth-hero {
position: relative;
overflow: hidden;
color: var(--color-neutral-0);
background-color: #1e3477;
background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.05), transparent 60%), linear-gradient(165deg, #15265c 0%, #1e3477 55%, #274086 100%);
background-size: 48px 48px, 48px 48px, auto, auto;
background-position: 0 0, 0 0, 0 0, 0 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 64px;
}
.auth-hero__video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.35);
transform-origin: center center;
z-index: 0;
}
.auth-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
}
.auth-hero__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: rgba(255,255,255,.6);
margin-bottom: var(--space-md);
}
.auth-hero__eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #9ef0c8; box-shadow: 0 0 0 3px rgba(158,240,200,.22);
}
.auth-hero__brand {
display: flex; align-items: center; gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.auth-hero__logo {
width: 32px; height: 32px; border-radius: var(--radius-md);
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.24);
display: grid; place-items: center;
font-weight: var(--font-weight-bold); font-size: var(--font-size-md);
color: var(--color-neutral-0);
}
.auth-hero__brand-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
.auth-hero__brand-meta { color: rgba(255,255,255,.56); font-size: var(--font-size-sm); }
.auth-hero__title {
font-size: 40px;
line-height: 1.1;
letter-spacing: var(--letter-spacing-tight);
font-weight: var(--font-weight-semibold);
text-wrap: pretty;
max-width: 520px;
margin-bottom: var(--space-lg);
}
.auth-hero__lede {
font-size: var(--font-size-md);
color: rgba(255,255,255,.66);
line-height: var(--line-height-relaxed);
max-width: 440px;
margin-bottom: var(--space-2xl);
}
.auth-hero__modules {
display: flex; flex-direction: column; gap: var(--space-sm);
max-width: 420px;
}
.auth-hero__module {
display: grid;
grid-template-columns: 56px 1fr;
align-items: center;
gap: var(--space-md);
font-size: var(--font-size-sm);
color: rgba(255,255,255,.82);
}
.auth-hero__module-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-sm);
padding: 4px 8px;
text-align: center;
font-weight: var(--font-weight-medium);
}
/* --- RIGHT: form panel ------------------- */
.auth-pane {
display: flex; align-items: center; justify-content: center;
padding: var(--space-3xl) var(--space-2xl);
background: var(--color-neutral-0);
}
.auth-card {
width: 100%;
max-width: 400px;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
}
.auth-card__brand {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-2xl);
}
.auth-card__logo {
width: 36px; height: 36px;
border-radius: var(--radius-lg);
background: var(--color-brand-700);
color: var(--color-neutral-0);
display: grid; place-items: center;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.auth-card__title {
font-size: 28px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
margin-bottom: 6px;
}
.auth-card__subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-2xl);
}
.auth-card__row {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--font-size-sm);
}
.auth-card__link {
color: var(--color-brand-700);
text-decoration: none;
font-weight: var(--font-weight-medium);
}
.auth-card__link:hover { text-decoration: underline; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.auth-foot {
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
display: flex; justify-content: space-between;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
}
/* ============================================================
5. MODULE: CHAT
============================================================ */
.chat-layout {
display: grid;
grid-template-columns: var(--chat-convo-sidebar-width) 1fr;
height: 100%;
min-height: 0;
background: var(--color-bg);
}
.chat-convos {
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
background: var(--color-bg-sub);
min-height: 0;
}
.chat-convos__top {
padding: var(--space-lg) var(--space-lg) var(--space-md);
display: flex; flex-direction: column;
gap: 10px;
border-bottom: 1px solid var(--color-border);
}
.chat-convos__list {
flex: 1;
overflow-y: auto;
padding: var(--space-sm) var(--space-sm) var(--space-lg);
}
.chat-convos__group-label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
padding: var(--space-md) 10px var(--space-xs);
}
.chat-convo {
display: block;
padding: 9px 11px;
border-radius: var(--radius-md);
cursor: pointer;
line-height: var(--line-height-snug);
text-decoration: none;
color: inherit;
}
.chat-convo:hover { background: rgba(15, 29, 54, 0.04); text-decoration: none; }
.chat-convo.is-active,
.chat-convo[aria-current="true"] {
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-xs);
}
.chat-convo__title {
font-size: 12.5px;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-medium);
}
.chat-convo:not(.is-active):not([aria-current="true"]) .chat-convo__title {
font-weight: var(--font-weight-regular);
color: var(--color-text-secondary);
}
.chat-convo__meta {
font-size: 10.5px;
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-top: 2px;
}
/* Main chat area */
.chat-main {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 0;
}
.chat-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px var(--space-2xl);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
}
.chat-bar__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.chat-bar__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 2px; }
.chat-scroll { overflow-y: auto; padding: var(--space-xl) 0 var(--space-2xl); }
.chat-wrap { max-width: var(--chat-message-max-width); margin: 0 auto; padding: 0 var(--space-2xl); }
.chat-msg {
display: grid;
grid-template-columns: 32px 1fr;
gap: var(--space-lg);
padding: 20px 0;
}
.chat-msg + .chat-msg { border-top: 1px solid var(--color-border); }
.chat-msg__avatar {
width: 32px; height: 32px;
border-radius: var(--radius-lg);
display: grid; place-items: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.chat-msg--user .chat-msg__avatar {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
.chat-msg--bot .chat-msg__avatar {
background: var(--color-brand-700);
color: var(--color-neutral-0);
font-family: var(--font-mono);
font-size: var(--font-size-md);
}
.chat-msg__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.chat-msg__author { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); }
.chat-msg__time { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); }
.chat-msg__body {
font-size: 14.5px;
line-height: var(--line-height-relaxed);
color: var(--color-text-primary);
}
.chat-msg__body p + p { margin-top: 10px; }
.chat-msg__body ul { margin: var(--space-sm) 0; padding-left: 22px; }
.chat-msg__body li { margin: 3px 0; }
.chat-msg__body code {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
background: var(--color-neutral-100);
padding: 1px 5px;
border-radius: var(--radius-xs);
border: 1px solid var(--color-border);
}
.citation-pill {
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 5px;
margin: 0 1px;
vertical-align: 1px;
border-radius: var(--radius-xs);
background: var(--color-brand-50);
color: var(--color-brand-700);
border: 1px solid var(--color-brand-100);
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
font-weight: var(--font-weight-semibold);
cursor: pointer;
text-decoration: none;
line-height: 1;
}
.citation-pill:hover { background: var(--color-brand-100); text-decoration: none; }
.citations { margin-top: 14px; display: flex; flex-direction: column; gap: var(--space-sm); }
.citation-card {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: var(--space-md);
align-items: center;
padding: 10px 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
}
.citation-card:hover { border-color: var(--color-border-strong); text-decoration: none; }
.citation-card__thumb {
width: 44px; height: 44px;
border-radius: 5px;
border: 1px solid var(--color-border);
background: repeating-linear-gradient(45deg, var(--color-neutral-100), var(--color-neutral-100) 4px, var(--color-neutral-200) 4px, var(--color-neutral-200) 8px);
display: grid; place-items: center;
color: var(--color-text-muted);
font-size: 9px;
font-family: var(--font-mono);
}
.citation-card__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.citation-card__sub {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-top: 2px;
}
.citation-card__n {
width: 22px; height: 22px;
border-radius: 5px;
background: var(--color-brand-50);
color: var(--color-brand-700);
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
}
.citation-card__sku {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
display: block;
text-align: right;
margin-top: 3px;
}
.chat-msg__actions {
display: flex;
gap: 2px;
margin-top: var(--space-md);
color: var(--color-text-muted);
}
/* Composer */
.composer-wrap {
padding: var(--space-lg) var(--space-2xl) var(--space-xl);
border-top: 1px solid var(--color-border);
background: var(--color-bg);
}
.composer {
max-width: var(--chat-message-max-width);
margin: 0 auto;
border: 1px solid var(--color-border-strong);
border-radius: 14px;
background: var(--color-surface);
padding: var(--space-md) var(--space-lg);
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.composer:focus-within {
border-color: var(--color-border-focus);
box-shadow: var(--focus-ring);
}
.composer__textarea {
font-size: 14.5px;
color: var(--color-text-primary);
border: none;
outline: none;
resize: none;
background: transparent;
min-height: 22px;
width: 100%;
font-family: inherit;
line-height: var(--line-height-normal);
}
.composer__foot {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.composer__foot strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.composer__actions { display: flex; gap: var(--space-sm); align-items: center; }
/* ============================================================
6. MODULE: ACCESS MATRIX
============================================================ */
.access-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.access-toolbar__search { flex: 1; max-width: 320px; }
.access-save-bar {
position: sticky;
bottom: 0;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding: var(--space-md) var(--space-xl);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-md);
z-index: var(--z-sticky);
}
.access-save-bar__summary {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.access-save-bar__summary strong { color: var(--color-warning-700); font-weight: var(--font-weight-semibold); }
.access-save-bar__actions { display: flex; gap: var(--space-sm); }
/* ============================================================
7. MODULE: DATAQUALITY
============================================================ */
/* --- Status colors (4 states of (leaf, attribute) pair) --- */
:root {
--dq-global: var(--color-success-500);
--dq-global-bg: var(--color-success-50);
--dq-global-border: var(--color-success-100);
--dq-diff: var(--color-info-500);
--dq-diff-bg: var(--color-info-50);
--dq-diff-border: var(--color-info-100);
--dq-partial: var(--color-warning-500);
--dq-partial-bg: var(--color-warning-50);
--dq-partial-border: var(--color-warning-100);
--dq-missing: var(--color-neutral-400);
--dq-missing-bg: var(--color-neutral-100);
--dq-missing-border: var(--color-neutral-200);
}
/* Full-bleed workbench layout — catalog, gaps use this instead of .app-page */
.app-main__workbench {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.dq-workbench-head {
padding: 20px var(--space-2xl) var(--space-md);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-xl);
flex-shrink: 0;
}
.dq-workbench-head__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
line-height: 1.15;
}
.dq-workbench-head__crumbs {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
margin-bottom: 4px;
}
.dq-workbench-head__lede {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: 4px;
max-width: 720px;
}
.dq-workbench-head__meta {
display: flex;
align-items: center;
gap: var(--space-lg);
font-size: var(--font-size-xs);
font-family: var(--font-mono);
color: var(--color-text-muted);
}
.dq-workbench-head__meta strong {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
margin-left: 4px;
}
/* --- Status badge (Global / Differentiating / Partial / Missing) --- */
.dq-status {
display: inline-flex;
align-items: center;
gap: 5px;
height: 20px;
padding: 0 var(--space-sm) 0 7px;
border-radius: var(--radius-full);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
font-family: var(--font-mono);
white-space: nowrap;
border: 1px solid transparent;
}
.dq-status::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.dq-status--global { background: var(--dq-global-bg); color: var(--color-success-700); border-color: var(--dq-global-border); }
.dq-status--global::before { background: var(--dq-global); }
.dq-status--diff { background: var(--dq-diff-bg); color: var(--color-info-700); border-color: var(--dq-diff-border); }
.dq-status--diff::before { background: var(--dq-diff); }
.dq-status--partial { background: var(--dq-partial-bg); color: var(--color-warning-700); border-color: var(--dq-partial-border); }
.dq-status--partial::before { background: var(--dq-partial); }
.dq-status--missing { background: var(--dq-missing-bg); color: var(--color-text-secondary); border-color: var(--dq-missing-border); }
.dq-status--missing::before { background: var(--dq-missing); }
.dq-status--ignored { background: var(--color-neutral-100); color: var(--color-neutral-600); border-color: var(--color-neutral-300); }
.dq-status--ignored::before { background: var(--color-neutral-400); }
/* --- Coverage / Completeness bar --- */
.dq-bar {
display: inline-grid;
grid-template-columns: 1fr 56px;
align-items: center;
gap: var(--space-md);
width: 100%;
}
.dq-bar__track {
height: 6px;
border-radius: var(--radius-full);
background: var(--color-neutral-100);
overflow: hidden;
position: relative;
}
.dq-bar__fill {
height: 100%;
border-radius: var(--radius-full);
background: var(--color-brand-500);
transition: width var(--duration-slow) var(--ease-out);
}
.dq-bar__fill--global { background: var(--dq-global); }
.dq-bar__fill--diff { background: var(--dq-diff); }
.dq-bar__fill--partial { background: var(--dq-partial); }
.dq-bar__fill--danger { background: var(--color-danger-500); }
/* Segmented bar (global / diff / partial / missing breakdown) */
.dq-bar-seg {
display: flex;
height: 8px;
border-radius: var(--radius-full);
overflow: hidden;
background: var(--color-neutral-100);
width: 100%;
}
.dq-bar-seg__segment { height: 100%; transition: flex-basis var(--duration-slow) var(--ease-out); }
.dq-bar-seg__segment--global { background: var(--dq-global); }
.dq-bar-seg__segment--diff { background: var(--dq-diff); }
.dq-bar-seg__segment--partial { background: var(--dq-partial); }
.dq-bar-seg__segment--missing { background: var(--dq-missing); }
.dq-bar-seg__segment--ignored { background: var(--color-neutral-400); }
.dq-bar__value {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: right;
}
/* --- Hierarchy path breadcrumb --- */
.dq-path {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: var(--line-height-snug);
letter-spacing: 0;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
.dq-path__sep {
color: var(--color-neutral-300);
margin: 0 5px;
flex-shrink: 0;
}
.dq-path__leaf {
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
}
.dq-path--truncate {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* --- KPI grid (DQ-specific denser variant) --- */
.dq-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
margin-bottom: var(--space-xl);
}
.dq-stat {
padding: 14px var(--space-lg);
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.dq-stat:last-child { border-right: none; }
.dq-stat__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
}
.dq-stat__value {
font-size: 26px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
margin-top: 4px;
line-height: 1.05;
font-feature-settings: "tnum";
display: flex;
align-items: baseline;
gap: 6px;
}
.dq-stat__value-sub {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
font-family: var(--font-mono);
}
.dq-stat__foot {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-top: 6px;
}
.dq-stat__foot .dq-status { vertical-align: 1px; }
.dq-stat--emphasis { background: var(--color-brand-50); }
.dq-stat--emphasis .dq-stat__value { color: var(--color-brand-700); }
/* --- Split layouts ---------------------------------------- */
/* Catalog: three-pane (categories | tree | detail) */
.dq-split-3 {
flex: 1;
display: grid;
grid-template-columns: 280px 340px 1fr;
min-height: 0;
overflow: hidden;
}
.dq-split-3 > * { min-height: 0; min-width: 0; }
/* Gaps: master-detail (list | selected leaf) */
.dq-split-2 {
flex: 1;
display: grid;
grid-template-columns: 520px 1fr;
min-height: 0;
overflow: hidden;
}
.dq-split-2 > * { min-height: 0; min-width: 0; }
.dq-pane {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
}
.dq-pane:last-child { border-right: none; }
.dq-pane--muted { background: var(--color-neutral-50); }
.dq-pane__head {
padding: 12px var(--space-lg);
border-bottom: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--space-sm);
flex-shrink: 0;
background: var(--color-surface);
}
.dq-pane__title {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
display: flex;
justify-content: space-between;
align-items: center;
}
.dq-pane__title-count {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-wide);
}
.dq-pane__body {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.dq-pane__body--padded { padding: var(--space-lg) var(--space-xl) var(--space-2xl); }
/* --- Category row (flat list column A) --- */
.dq-cat-row {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 10px;
padding: 9px var(--space-lg);
cursor: pointer;
border-bottom: 1px solid var(--color-neutral-100);
align-items: center;
transition: background var(--duration-fast) var(--ease-out);
}
.dq-cat-row:hover { background: var(--color-neutral-50); }
.dq-cat-row.is-active {
background: var(--color-brand-50);
box-shadow: inset 3px 0 0 var(--color-brand-500);
}
.dq-cat-row__code {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
background: var(--color-neutral-100);
padding: 3px 6px;
border-radius: var(--radius-xs);
text-align: center;
letter-spacing: 0;
}
.dq-cat-row.is-active .dq-cat-row__code {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
.dq-cat-row__name {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: var(--line-height-snug);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-cat-row__count {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
/* --- Tree node (column B) --- */
.dq-tree { padding: var(--space-sm) 0; }
.dq-tree__node {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 6px;
align-items: center;
padding: 5px var(--space-lg) 5px 0;
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: var(--line-height-snug);
transition: background var(--duration-fast) var(--ease-out);
position: relative;
}
.dq-tree__node:hover { background: var(--color-neutral-50); }
.dq-tree__node.is-active {
background: var(--color-brand-50);
color: var(--color-brand-700);
font-weight: var(--font-weight-medium);
}
.dq-tree__node.is-active::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--color-brand-500);
}
.dq-tree__toggle {
color: var(--color-text-muted);
display: grid;
place-items: center;
width: 16px; height: 16px;
flex-shrink: 0;
}
.dq-tree__toggle--leaf { visibility: hidden; }
.dq-tree__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-tree__label--leaf {
color: inherit;
}
.dq-tree__label--inner {
color: var(--color-text-secondary);
}
.dq-tree__leaf-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--color-brand-400);
display: inline-block;
margin-right: 6px;
vertical-align: 2px;
}
.dq-tree__count {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.dq-tree__count strong {
color: var(--color-text-secondary);
font-weight: var(--font-weight-semibold);
}
.dq-tree__children {
border-left: 1px dashed var(--color-neutral-200);
margin-left: 14px;
padding-left: 2px;
}
.dq-tree__children--l2 { margin-left: 28px; }
.dq-tree__children--l3 { margin-left: 42px; }
/* --- Attribute row (reused Catalog + Gaps detail) --- */
.dq-attr-row {
display: grid;
grid-template-columns: 16px 1fr 140px 180px auto;
gap: var(--space-md);
align-items: center;
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-neutral-100);
}
.dq-attr-row:last-child { border-bottom: none; }
.dq-attr-row:hover { background: var(--color-neutral-50); }
.dq-attr-row__name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
}
.dq-attr-row__type {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
letter-spacing: 0;
flex-shrink: 0;
}
.dq-attr-row__val {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-attr-row__val strong {
color: var(--color-success-700);
font-weight: var(--font-weight-semibold);
}
/* --- Parameter pill (global parameter name=value) --- */
.dq-param {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 4px 10px;
background: var(--color-success-50);
border: 1px solid var(--color-success-100);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-success-700);
line-height: var(--line-height-snug);
}
.dq-param__key {
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
}
.dq-param__eq { color: var(--color-neutral-400); }
.dq-param__val {
color: var(--color-text-primary);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
}
.dq-param--diff {
background: var(--color-info-50);
border-color: var(--color-info-100);
color: var(--color-info-700);
}
.dq-param--diff .dq-param__val { color: var(--color-info-700); font-style: italic; }
/* --- Ready leaf card --- */
.dq-ready-group {
border: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
overflow: hidden;
}
.dq-ready-group__head {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-md);
align-items: center;
padding: var(--space-md) var(--space-xl);
background: var(--color-neutral-50);
border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
.dq-ready-group__title {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.dq-ready-group__caret {
color: var(--color-text-muted);
transition: transform var(--duration-fast) var(--ease-out);
}
.dq-ready-group.is-open .dq-ready-group__caret { transform: rotate(90deg); }
.dq-ready-group__count {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.dq-ready-group__body { display: none; }
.dq-ready-group.is-open .dq-ready-group__body { display: block; }
.dq-ready-leaf {
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--color-neutral-100);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-lg);
align-items: start;
}
.dq-ready-leaf:last-child { border-bottom: none; }
.dq-ready-leaf__head { min-width: 0; }
.dq-ready-leaf__name {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
letter-spacing: var(--letter-spacing-snug);
}
.dq-ready-leaf__meta {
display: flex;
gap: var(--space-md);
align-items: center;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-top: 3px;
}
.dq-ready-leaf__params {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--space-md);
}
.dq-ready-leaf__diff {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 10px;
}
.dq-ready-leaf__diff-label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
padding: 4px 0;
}
.dq-ready-leaf__stats {
text-align: right;
flex-shrink: 0;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
white-space: nowrap;
}
.dq-ready-leaf__stats strong {
display: block;
font-family: var(--font-sans);
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.01em;
margin-bottom: 2px;
}
/* --- Gaps master list (leaf row) --- */
.dq-leaf-row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-md);
padding: 12px var(--space-lg);
border-bottom: 1px solid var(--color-neutral-100);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
position: relative;
}
.dq-leaf-row:hover { background: var(--color-neutral-50); }
.dq-leaf-row.is-ready { opacity: 0.6; }
.dq-leaf-row.is-ready .dq-leaf-row__name { color: var(--color-text-secondary); }
.dq-leaf-row.is-ready:hover { opacity: 0.85; }
.dq-leaf-row.is-active {
background: var(--color-brand-50);
}
.dq-leaf-row.is-active::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--color-brand-500);
}
.dq-leaf-row__name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-leaf-row__path {
margin-top: 2px;
}
.dq-leaf-row__stats {
display: flex;
gap: var(--space-md);
margin-top: 8px;
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
.dq-leaf-row__stat {
display: flex;
align-items: center;
gap: 4px;
}
.dq-leaf-row__stat-num {
font-size: var(--font-size-sm);
font-family: var(--font-sans);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
text-transform: none;
}
.dq-leaf-row__severity {
width: 28px;
height: 4px;
border-radius: var(--radius-full);
background: linear-gradient(to right, var(--color-warning-500), var(--color-danger-500));
opacity: 0.9;
margin-top: 10px;
}
.dq-leaf-row__severity--low { background: var(--color-success-500); opacity: 0.5; }
.dq-leaf-row__severity--med { background: var(--color-warning-500); opacity: 0.75; }
.dq-leaf-row__severity--high { background: var(--color-danger-500); opacity: 0.9; }
/* --- Detail section headers --- */
.dq-section {
margin-bottom: var(--space-xl);
}
.dq-section__head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-sm) 0 10px;
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-sm);
}
.dq-section__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
letter-spacing: var(--letter-spacing-snug);
display: flex;
align-items: center;
gap: var(--space-sm);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
font-size: var(--font-size-xs);
}
.dq-section__desc {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
}
.dq-section__content {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.dq-section--globals .dq-section__title { color: var(--color-success-700); }
.dq-section--partials .dq-section__title { color: var(--color-warning-700); }
.dq-section--ignored .dq-section__title { color: var(--color-text-muted); }
.dq-attr-row--ignored { opacity: 0.85; grid-template-columns: 1fr 200px 1fr auto; }
.dq-attr-row--ignored:hover { background: transparent; }
.dq-attr-row--ignored .dq-attr-row__name { color: var(--color-text-muted); }
/* Expandable attr row for partials — shows missing products */
.dq-attr-expand {
border-bottom: 1px solid var(--color-neutral-100);
}
.dq-attr-expand:last-child { border-bottom: none; }
.dq-attr-expand__head {
display: grid;
grid-template-columns: 16px 1fr 140px 180px auto;
gap: var(--space-md);
align-items: center;
padding: var(--space-md) var(--space-lg);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dq-attr-expand__head:hover { background: var(--color-neutral-50); }
.dq-attr-expand__caret {
color: var(--color-text-muted);
transition: transform var(--duration-fast) var(--ease-out);
}
.dq-attr-expand.is-open .dq-attr-expand__caret { transform: rotate(90deg); }
.dq-attr-expand__name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
}
.dq-attr-expand__body {
display: none;
padding: 0 var(--space-lg) var(--space-md) 44px;
background: var(--color-neutral-50);
border-top: 1px solid var(--color-neutral-100);
}
.dq-attr-expand.is-open .dq-attr-expand__body { display: block; }
.dq-attr-expand__prods {
padding: var(--space-md) 0 var(--space-sm);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
font-weight: var(--font-weight-semibold);
}
.dq-sku-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.dq-sku {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
padding: 3px 7px;
color: var(--color-text-secondary);
}
/* --- Toggle switch (IsRequired) --- */
.dq-switch {
position: relative;
display: inline-block;
width: 30px;
height: 16px;
flex-shrink: 0;
}
.dq-switch input {
opacity: 0;
width: 0; height: 0;
}
.dq-switch__slider {
position: absolute;
inset: 0;
background: var(--color-neutral-300);
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dq-switch__slider::before {
content: "";
position: absolute;
height: 12px; width: 12px;
left: 2px; top: 2px;
background: var(--color-surface);
border-radius: 50%;
transition: transform var(--duration-fast) var(--ease-out);
box-shadow: var(--shadow-xs);
}
.dq-switch input:checked + .dq-switch__slider {
background: var(--color-success-500);
}
.dq-switch input:checked + .dq-switch__slider::before {
transform: translateX(14px);
}
.dq-switch input:focus-visible + .dq-switch__slider {
box-shadow: var(--focus-ring);
}
/* --- Ready header strip --- */
.dq-ready-header {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin-bottom: var(--space-xl);
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--space-2xl);
align-items: center;
}
.dq-ready-header__num {
font-size: 44px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
line-height: 1;
font-feature-settings: "tnum";
color: var(--color-text-primary);
}
.dq-ready-header__num-of {
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
font-size: 28px;
}
.dq-ready-header__caption {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
margin-top: var(--space-sm);
max-width: 520px;
}
.dq-ready-header__progress-label {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.dq-ready-header__progress-label strong {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
}
.dq-ready-header__legend {
display: flex;
gap: var(--space-md);
margin-top: var(--space-md);
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
color: var(--color-text-muted);
flex-wrap: wrap;
}
.dq-ready-header__legend-item {
display: flex; align-items: center; gap: 5px;
}
.dq-ready-header__legend-sw {
width: 8px; height: 8px; border-radius: 2px;
}
/* --- Product preview list (Catalog column C bottom) --- */
.dq-product-list {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.dq-product-row {
display: grid;
grid-template-columns: 100px 1fr auto;
gap: var(--space-md);
padding: 8px var(--space-md);
border-bottom: 1px solid var(--color-neutral-100);
align-items: center;
font-size: var(--font-size-xs);
}
.dq-product-row:last-child { border-bottom: none; }
.dq-product-row:hover { background: var(--color-neutral-50); }
.dq-product-row__sku {
font-family: var(--font-mono);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.dq-product-row__name {
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-product-row__brand {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
}
.dq-product-row__brand--own {
color: var(--color-brand-700);
background: var(--color-brand-50);
padding: 2px 6px;
border-radius: var(--radius-xs);
font-weight: var(--font-weight-semibold);
}
/* --- Gaps toolbar (sort / filter) --- */
.dq-toolbar {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
flex-shrink: 0;
}
.dq-toolbar__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
margin-right: var(--space-sm);
}
.dq-sort-group {
display: flex;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
overflow: hidden;
}
.dq-sort-group__btn {
padding: 5px 10px;
font-size: var(--font-size-xs);
font-family: var(--font-mono);
color: var(--color-text-secondary);
background: var(--color-surface);
border-right: 1px solid var(--color-border);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dq-sort-group__btn:last-child { border-right: none; }
.dq-sort-group__btn:hover { background: var(--color-neutral-50); }
.dq-sort-group__btn.is-active {
background: var(--color-brand-700);
color: var(--color-neutral-0);
}
/* --- Detail header (Gaps right pane) --- */
.dq-detail-head {
padding: var(--space-xl) var(--space-2xl) var(--space-md);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
flex-shrink: 0;
}
.dq-detail-head__path { margin-bottom: var(--space-sm); }
.dq-detail-head__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
line-height: 1.15;
margin-bottom: var(--space-sm);
}
.dq-detail-head__row {
display: flex;
gap: var(--space-xl);
margin-top: var(--space-md);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.dq-detail-head__row strong {
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
margin-right: 4px;
}
.dq-detail-head__row .dq-bar-seg { margin-top: 4px; max-width: 340px; }
/* --- Differentiating: value chips --- */
.dq-attr-expand__body--diff {
padding: var(--space-md) var(--space-lg) var(--space-md) 44px;
}
.dq-attr-expand__body--diff .dq-attr-expand__prods {
padding-top: 4px;
padding-bottom: 10px;
}
.dq-value-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dq-value-chip {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-sm);
overflow: hidden;
font-size: var(--font-size-xs);
line-height: 1;
cursor: default;
transition: border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.dq-value-chip__label {
padding: 6px 9px;
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
.dq-value-chip__count {
padding: 6px 9px;
background: var(--color-neutral-50);
border-left: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
}
/* --- Partial: clickable SKU chips --- */
.dq-sku--clickable {
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.dq-sku--clickable:hover {
border-color: var(--color-brand-500);
background: var(--color-brand-50);
color: var(--color-brand-700);
}
.dq-sku--clickable.is-active {
border-color: var(--color-brand-500);
background: var(--color-brand-700);
color: var(--color-neutral-0);
}
/* ============================================================
Drawer: parametry produktu
============================================================ */
.dq-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 29, 54, 0.18);
z-index: var(--z-overlay);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-normal) var(--ease-out);
}
.dq-drawer-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.dq-drawer {
position: fixed;
top: 0; right: 0;
height: 100vh;
width: 520px;
max-width: 92vw;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
z-index: var(--z-modal);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--duration-slow) var(--ease-out);
}
.dq-drawer.is-open { transform: translateX(0); }
.dq-drawer__head {
padding: var(--space-lg) var(--space-xl) var(--space-md);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
background: var(--color-surface);
}
.dq-drawer__topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.dq-drawer__nav {
display: flex;
align-items: center;
gap: 4px;
}
.dq-drawer__nav-pos {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin: 0 6px;
letter-spacing: var(--letter-spacing-wide);
font-variant-numeric: tabular-nums;
}
.dq-drawer__close {
width: 28px; height: 28px;
border-radius: var(--radius-sm);
display: grid; place-items: center;
color: var(--color-text-muted);
cursor: pointer;
background: transparent;
border: none;
padding: 0;
}
.dq-drawer__close:hover {
background: var(--color-neutral-100);
color: var(--color-text-primary);
}
.dq-drawer__sap {
font-family: var(--font-mono);
font-size: var(--font-size-md);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--color-neutral-50);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 3px 8px;
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out);
}
.dq-drawer__sap:hover {
border-color: var(--color-brand-500);
color: var(--color-brand-700);
}
.dq-drawer__sap-copy {
width: 10px; height: 10px;
opacity: 0.5;
}
.dq-drawer__name {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
letter-spacing: var(--letter-spacing-snug);
line-height: var(--line-height-snug);
margin-bottom: 6px;
}
.dq-drawer__path { margin-top: 4px; }
.dq-drawer__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
margin-top: 8px;
}
.dq-drawer__meta strong {
color: var(--color-text-primary);
font-family: var(--font-sans);
font-weight: var(--font-weight-semibold);
margin-right: 4px;
letter-spacing: 0;
}
.dq-drawer__context {
margin: var(--space-md) var(--space-xl) 0;
padding: 10px 12px;
background: var(--color-warning-50);
border: 1px solid var(--color-warning-100);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 10px;
font-size: var(--font-size-xs);
color: var(--color-warning-700);
}
.dq-drawer__context-icon {
flex-shrink: 0;
color: var(--color-warning-500);
}
.dq-drawer__context strong {
color: var(--color-warning-700);
font-weight: var(--font-weight-semibold);
}
.dq-drawer__body {
flex: 1;
overflow-y: auto;
padding: var(--space-lg) var(--space-xl) var(--space-2xl);
}
.dq-drawer-group { margin-bottom: var(--space-lg); }
.dq-drawer-group:last-child { margin-bottom: 0; }
.dq-drawer-group__head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0 6px;
margin-bottom: 4px;
}
.dq-drawer-group__title {
display: flex;
align-items: center;
gap: 6px;
}
.dq-drawer-group__count {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
}
.dq-drawer-attr {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--space-md);
padding: 8px 12px;
border-bottom: 1px solid var(--color-neutral-100);
font-size: var(--font-size-sm);
align-items: baseline;
}
.dq-drawer-attr:last-child { border-bottom: none; }
.dq-drawer-attr__name {
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
font-weight: var(--font-weight-semibold);
}
.dq-drawer-attr__val {
color: var(--color-text-primary);
word-break: break-word;
font-size: var(--font-size-sm);
}
.dq-drawer-attr__val code {
font-family: var(--font-mono);
font-size: 11.5px;
}
.dq-drawer-attr__val--inherited {
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.dq-drawer-attr__val--inherited::before {
content: "↑";
color: var(--color-success-500);
font-weight: bold;
font-size: 11px;
}
.dq-drawer-attr__val--empty {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-warning-700);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
}
.dq-drawer-attr__val--empty::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--color-warning-500);
flex-shrink: 0;
}
.dq-drawer-attr__val--ignored {
color: var(--color-text-muted);
font-style: italic;
}
.dq-drawer-attr--focus {
background: var(--color-warning-50);
border-bottom: 1px solid var(--color-warning-100);
box-shadow: inset 2px 0 0 var(--color-warning-500);
}
.dq-drawer__foot {
flex-shrink: 0;
padding: var(--space-md) var(--space-xl);
border-top: 1px solid var(--color-border);
background: var(--color-surface);
display: flex;
gap: var(--space-sm);
justify-content: space-between;
align-items: center;
}
.dq-drawer__foot-hint {
font-size: 10.5px;
color: var(--color-text-muted);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
}
.dq-drawer__foot-hint kbd {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 1px 5px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-text-secondary);
}
.dq-drawer__foot-actions {
display: flex;
gap: var(--space-sm);
}
/* ============================================================
7. UTILITIES (minimal — prefer komponenty)
============================================================ */
.u-visually-hidden {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
border: 0;
}
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-gap-sm { gap: var(--space-sm); }
.u-gap-md { gap: var(--space-md); }
.u-gap-lg { gap: var(--space-lg); }
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }
/* ============================================================
8. BLAZOR COMPONENT HELPERS
============================================================ */
/* Blazor reconnect overlay — opóźnienie 1500 ms ukrywa flash przy przejściach między modułami.
Po upływie czasu modal pojawia się normalnie (prawdziwa utrata połączenia). */
#components-reconnect-modal.components-reconnect-show {
animation: reconnect-show 200ms ease-out 1500ms both;
}
@keyframes reconnect-show {
from { opacity: 0; }
to { opacity: 1; }
}
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
animation: none;
opacity: 1;
}
/* UserMenu dropdown (details/summary wrapper) */
.app-user-details { position: relative; list-style: none; }
.app-user-details > summary { list-style: none; }
.app-user-details > summary::-webkit-details-marker { display: none; }
.app-user-dropdown {
position: absolute;
bottom: calc(100% + var(--space-xs));
left: 0; right: 0;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-xs);
z-index: var(--z-dropdown);
}
.app-user-dropdown__item {
display: block;
width: 100%;
text-align: left;
text-decoration: none;
}