/*
* 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;
}
/* ---------------------------------------------------------------------- */
/* "DEMO" pill — small chip used in dashboard sidebar list items */
/* ---------------------------------------------------------------------- */
.demo-pill {
display: inline-block;
background-color: #6c757d;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.12rem 0.45rem;
border-radius: 0.25rem;
margin-left: 0.4rem;
vertical-align: 0.1em;
text-transform: uppercase;
}
/* Sidebar list item variant of the demo project — gentle yellow tint kept
across all three states (inactive, hover, active). On active we override
only what's needed to keep the label legible against the yellow tint:
text + icon color goes dark amber, border picks up the Bootstrap-primary
blue outline so the row reads as "selected". The blue box-shadow from
the global `.project-item.active` rule keeps applying since we don't
override it. */
.project-item.demo-project {
background-color: rgba(255, 248, 225, 0.6);
border-left: 3px solid #ffc107;
}
.project-item.demo-project:hover {
background-color: rgba(255, 243, 205, 0.95);
transform: none; /* suppress the "jump up" hover lift the global rule applies */
}
.project-item.demo-project.active {
background-color: rgba(255, 236, 179, 0.95); /* slightly stronger yellow signals "selected" */
color: #5a4500; /* dark amber — legible on yellow */
border-color: rgba(0, 0, 0, 0.08); /* keep neutral border on top/right/bottom (no blue) */
border-left: 3px solid #ffc107; /* yellow left accent stays */
box-shadow: none; /* override the blue glow from `.project-item.active` */
}
/* ---------------------------------------------------------------------- */
/* 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;
}