/*
* Demo project visual chrome — InvoiceStar
*
* Plan: docs-vault/plans/demo_company.md
*
* Watermark scope (intentional, per user 2026-05-12):
* - YES: data-viewer page when viewing a demo analysis (PR 6/7)
* - YES: cégadatok / AI modals via `.demo-modal` on `.modal-content`
* - NO: dashboard partial — banner + locked button only, no watermark
*
* Anything wrapped in a `.demo-context` element gets:
* - A faint diagonal "DEMO PROJEKT" watermark (gray, ~20% opacity)
* - A subtle striped backdrop so it's distinguishable at a glance
*
* Modals carry their own `.demo-modal` class which scopes the watermark
* to the modal-content surface.
*
* Banner / pill / badge utility classes are also defined here so all
* demo-specific UI shares one stylesheet.
*/
/* ---------------------------------------------------------------------- */
/* Watermark — diagonal "DEMO PROJEKT" overlay */
/* ---------------------------------------------------------------------- */
.demo-context {
position: relative;
/* Two-layer backdrop:
1) A repeating diagonal "DEMO PROJEKT" SVG, tile size 480x320, so the
text appears in a fixed grid across however tall the container is.
2) A subtle diagonal-stripe pattern on top of (1) to break up the
background and add depth.
Both are static images — no GPU compositing cost, scrolls naturally.
Color: rgba(80,80,80,0.20) — ~20% opacity gray per the plan. */
background-image:
repeating-linear-gradient(
45deg,
transparent 0,
transparent 120px,
rgba(120, 120, 120, 0.025) 120px,
rgba(120, 120, 120, 0.025) 160px
),
url("data:image/svg+xml;utf8,");
background-repeat: repeat, repeat;
background-position: 0 0, 0 0;
}
/* Keep actual content above the watermark layer (the background sits at z=0
by default; positioned children climb above it). */
.demo-context > * {
position: relative;
z-index: 1;
}
/* Modal-scoped variant — the watermark covers the modal-content surface,
not the full viewport. The Bootstrap backdrop stays untouched. */
.modal-content.demo-modal {
position: relative;
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-position: 0 0;
}
.modal-content.demo-modal > * {
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------------- */
/* Banner — non-dismissible "this is a demo" alert at the top */
/* ---------------------------------------------------------------------- */
.demo-banner {
position: relative;
z-index: 2; /* sit above the watermark */
border: 1px solid #ffe69c;
background-color: #fff8e1;
color: #5a4500;
padding: 0.85rem 1.1rem;
margin-bottom: 1.25rem;
border-radius: 0.5rem;
font-size: 0.95rem;
line-height: 1.4;
}
.demo-banner strong {
color: #4a3500;
}
.demo-banner .demo-banner-icon {
font-size: 1.15rem;
margin-right: 0.4rem;
vertical-align: -0.1em;
}
/* ----------------------------------------------------------------------
Consolidated demo header card — Round 7 (2026-05-27).
Single unit replacing the old demo_banner alert + the separate
Demo anyagok card. Warm yellow gradient surface + sun-icon left,
warning text middle, action buttons (Példa fájl dropdown +
Visszaállítás) right. Stacks gracefully on narrow viewports.
---------------------------------------------------------------------- */
.demo-header-card {
position: relative;
z-index: 2;
background: linear-gradient(135deg, rgba(255, 248, 225, 0.85) 0%, rgba(255, 243, 205, 0.65) 100%);
border: 1px solid rgba(240, 195, 74, 0.30);
border-radius: 16px;
padding: 12px 18px;
/* Horizontal margin matches the .project-widget-grid's 16px
padding so the demo header lines up with the widgets below
instead of stretching edge-to-edge of the content area. Top
margin matches the widget grid's `padding-top: 14px` so the
vertical rhythm above and below the demo header feels the
same as between widgets. */
margin: 14px 16px 0;
box-shadow:
0 1px 2px rgba(240, 195, 74, 0.08),
0 8px 20px -14px rgba(240, 195, 74, 0.20);
}
.demo-header-card .demo-header-body {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.demo-header-card .demo-header-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(240, 195, 74, 0.22);
color: #b88200;
font-size: 1.1rem;
}
.demo-header-card .demo-header-text {
flex: 1 1 250px;
min-width: 0;
}
.demo-header-card .demo-header-title {
font-weight: 700;
color: #4a3500;
font-size: 0.95rem;
margin-bottom: 2px;
line-height: 1.3;
}
.demo-header-card .demo-header-desc {
color: #6b5a1e;
font-size: 0.825rem;
line-height: 1.5;
}
.demo-header-card .demo-header-tip {
color: #8a7228;
font-style: italic;
}
.demo-header-card .demo-header-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
align-items: center;
flex-wrap: wrap;
}
/* Drop the outline-warning button's default Bootstrap colors — use
a softer ink-amber palette so it pairs with the card's warm tone. */
.demo-header-card .btn-outline-warning {
border-color: rgba(240, 195, 74, 0.50);
color: #8a6708;
}
.demo-header-card .btn-outline-warning:hover {
background-color: rgba(240, 195, 74, 0.18);
border-color: rgba(240, 195, 74, 0.70);
color: #5a4500;
}
/* ---------------------------------------------------------------------- */
/* "DEMO" pill — small chip used in dashboard sidebar list items */
/* ---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
Round 7 (2026-05-27) — modernized demo pill + project-item demo variant.
The old demo styling was visually loud: gray pill, heavy yellow tint
on the row, dark amber active state. Now it's a subtle amber accent
that signals "demo" without dominating the sidebar — pairs with the
modernized project-list look in dashboard.html.
---------------------------------------------------------------------- */
.demo-pill {
display: inline-flex;
align-items: center;
margin-left: auto; /* push pill to the right edge of the row */
padding: 0.12rem 0.5rem;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(240, 195, 74, 0.18);
color: #a07410;
border: 1px solid rgba(240, 195, 74, 0.40);
border-radius: 999px;
vertical-align: middle;
white-space: nowrap;
flex: 0 0 auto;
}
/* Demo project sidebar row — same chrome as a regular row but with a
gold left accent + faint amber wash so it's identifiable at a glance.
No more heavy yellow tint dominating the sidebar. */
.project-item.demo-project {
background: rgba(255, 248, 225, 0.40);
border-color: rgba(240, 195, 74, 0.18);
}
.project-item.demo-project::before {
background: rgba(240, 195, 74, 0.55) !important; /* override the blue accent */
}
.project-item.demo-project:hover {
background: rgba(255, 243, 205, 0.65);
border-color: rgba(240, 195, 74, 0.30);
}
.project-item.demo-project:hover::before {
background: rgba(240, 195, 74, 0.80) !important;
}
/* Active demo project — warm gold gradient with deep amber text.
Distinct from the brand-blue active state so users can tell which
"selected" they're looking at. */
.project-item.demo-project.active {
background: linear-gradient(135deg, #ffc107 0%, #f0a800 100%);
color: #3d2f00;
border-color: rgba(240, 195, 74, 0.50);
box-shadow: 0 6px 16px -8px rgba(240, 195, 74, 0.60);
}
.project-item.demo-project.active::before {
background: transparent !important;
}
.project-item.demo-project.active i {
color: #3d2f00 !important;
}
/* DEMO pill on the active row inherits a darker chip so it stays readable
on the gold background. */
.project-item.demo-project.active .demo-pill {
background: rgba(61, 47, 0, 0.18);
color: #3d2f00;
border-color: rgba(61, 47, 0, 0.28);
}
/* DEMO pill on a blue-active row (non-demo project shouldn't have this,
but defensive override in case the order ever flips). */
.project-item.active:not(.demo-project) .demo-pill {
background: rgba(255, 255, 255, 0.22);
color: white;
border-color: rgba(255, 255, 255, 0.30);
}
/* ---------------------------------------------------------------------- */
/* Yellow "AI is pre-baked" badge — for AI-related modal titles (PR 7) */
/* ---------------------------------------------------------------------- */
.demo-ai-badge {
display: inline-block;
background-color: #fff3cd;
color: #664d03;
border: 1px solid #ffe69c;
padding: 0.15rem 0.55rem;
border-radius: 0.35rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-left: 0.6rem;
vertical-align: 0.15em;
white-space: nowrap;
}
/* ---------------------------------------------------------------------- */
/* Locked-field visual treatment — slight visual hint that this is locked */
/* (the inputs are also `disabled` server-side, this is just styling) */
/* ---------------------------------------------------------------------- */
.demo-locked-note {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background-color: #f3f4f6;
color: #555;
font-size: 0.85rem;
padding: 0.4rem 0.7rem;
border-radius: 0.35rem;
border: 1px dashed #cfd2d6;
}
.demo-locked-note .bi {
font-size: 1rem;
color: #888;
}