/**
* WEDA App — stratul de prezentare.
*
* DE CE ARATĂ ALTFEL DECÂT CSS-UL ACTUAL AL PORTALULUI
*
* Portalul de azi are o singură media query la 5.041 de linii, de 9 ori 100vh,
* `html,body{overflow:hidden}` și un iframe cu înălțime calculată în pixeli din
* JavaScript. Combinația asta e motivul pentru care pe telefon conținutul apare
* tăiat și nu se poate derula: bara de adrese schimbă înălțimea ferestrei, deci
* 100vh e mereu greșit, iar overflow:hidden blochează și derularea nativă care
* ar fi salvat situația.
*
* Aici, invers:
* - nicio unitate vh, nicio înălțime fixă — înălțimea o dă conținutul;
* - nicio lățime în pixeli; totul în procente, fr, ch și minmax();
* - un singur punct de rupere (720px), sub care tabelul devine listă de carduri
* prin CSS pur, folosind atributele data-label din view;
* - ținte de atins de minimum 44px pe mobil (recomandarea de accesibilitate),
* ca butoanele să poată fi apăsate cu degetul.
*
* TEMĂ: tokenii se adaptează la clasa `.wo-light` de pe , aceeași pe care
* o folosește deja portalul — deci comutatorul Zi/Noapte existent funcționează
* fără nicio modificare în codul lui.
*/
.wapp {
--wapp-bg: #1a1d21;
--wapp-card: #212529;
--wapp-raised: #2a2f34;
--wapp-border: #32383e;
--wapp-text: #ced4da;
--wapp-heading: #f3f6f9;
--wapp-muted: #878a99;
--wapp-accent: #4a5c9c;
--wapp-info: #299cdb;
--wapp-success: #0ab39c;
--wapp-warning: #f7b84b;
--wapp-danger: #f06548;
--wapp-radius: 4px;
--wapp-radius-lg: 6px;
--wapp-gap: clamp(0.75rem, 2vw, 1.125rem);
box-sizing: border-box;
width: 100%;
max-width: 78rem;
margin-inline: auto;
padding: var(--wapp-gap);
color: var(--wapp-text);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 0.875rem;
line-height: 1.55;
}
.wo-light .wapp {
--wapp-bg: #f3f3f9;
--wapp-card: #ffffff;
--wapp-raised: #f3f6f9;
--wapp-border: #e9ebec;
--wapp-text: #212529;
--wapp-heading: #212529;
--wapp-muted: #878a99;
--wapp-accent: #405189;
--wapp-danger: #e14d2a;
}
.wapp *,
.wapp *::before,
.wapp *::after { box-sizing: inherit; }
/* ── Antet ─────────────────────────────────────────────────────── */
.wapp-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--wapp-gap);
margin-bottom: var(--wapp-gap);
}
.wapp-head-main { flex: 1 1 20rem; min-width: 0; }
.wapp-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 0.35rem;
color: var(--wapp-heading);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.wapp-intro {
margin: 0;
max-width: 68ch;
color: var(--wapp-muted);
font-size: 0.8125rem;
}
.wapp-chip {
padding: 0.125rem 0.5rem;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.wapp-chip--live { background: rgba(10, 179, 156, 0.15); color: var(--wapp-success); }
.wapp-chip--sandbox { background: rgba(247, 184, 75, 0.15); color: var(--wapp-warning); }
/* Selector de limbă — legături obișnuite, fără JavaScript */
.wapp-lang { display: flex; gap: 0.25rem; flex-shrink: 0; }
.wapp-lang-opt {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0.25rem 0.6rem;
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
color: var(--wapp-muted);
font-size: 0.75rem;
text-decoration: none;
}
.wapp-lang-opt:hover { color: var(--wapp-heading); border-color: var(--wapp-accent); }
.wapp-lang-opt.is-active { background: var(--wapp-accent); border-color: var(--wapp-accent); color: #fff; }
/* ── Filtru ────────────────────────────────────────────────────── */
.wapp-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: var(--wapp-gap);
}
.wapp-filter-label { color: var(--wapp-muted); font-size: 0.75rem; }
.wapp-select,
.wapp-btn {
min-height: 2.25rem;
padding: 0.4rem 0.75rem;
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
background: var(--wapp-card);
color: var(--wapp-text);
font: inherit;
font-size: 0.8125rem;
}
.wapp-select { flex: 1 1 14rem; max-width: 100%; }
.wapp-btn {
background: var(--wapp-accent);
border-color: var(--wapp-accent);
color: #fff;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.wapp-btn--quiet { background: var(--wapp-card); border-color: var(--wapp-border); color: var(--wapp-text); font-weight: 500; }
.wapp-btn:hover { filter: brightness(1.08); }
/* ── Statistici ────────────────────────────────────────────────── */
.wapp-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
gap: 0.75rem;
margin-bottom: var(--wapp-gap);
}
.wapp-stat {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.875rem 1rem;
background: var(--wapp-card);
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
}
.wapp-stat-label {
color: var(--wapp-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wapp-stat-value { color: var(--wapp-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.wapp-stat--info { border-inline-start: 3px solid var(--wapp-info); }
.wapp-stat--accent { border-inline-start: 3px solid var(--wapp-accent); }
.wapp-stat--success { border-inline-start: 3px solid var(--wapp-success); }
/* ── Card generic ──────────────────────────────────────────────── */
.wapp-card {
background: var(--wapp-card);
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
padding: 1rem 1.125rem;
margin-bottom: var(--wapp-gap);
}
.wapp-card--flush { padding: 0; overflow: hidden; }
.wapp-card-title,
.wapp-section-title {
margin: 0 0 0.875rem;
color: var(--wapp-heading);
font-size: 0.9375rem;
font-weight: 600;
}
.wapp-section-title { margin-bottom: 0.75rem; }
/* ── Bare de distribuție ───────────────────────────────────────── */
.wapp-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.wapp-bar-row {
display: grid;
grid-template-columns: minmax(6rem, 10rem) 1fr minmax(5rem, auto);
align-items: center;
gap: 0.75rem;
}
.wapp-bar-name { text-align: end; font-size: 0.8125rem; overflow-wrap: anywhere; }
.wapp-bar-value { color: var(--wapp-muted); font-size: 0.75rem; white-space: nowrap; }
.wapp-bar-track {
height: 0.5rem;
border-radius: 999px;
background: var(--wapp-raised);
overflow: hidden;
}
.wapp-bar-fill {
display: block;
height: 100%;
border-radius: 999px;
background: var(--wapp-accent);
}
/* ── Tabel ─────────────────────────────────────────────────────── */
.wapp-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.wapp-table th {
padding: 0.625rem 0.75rem;
background: var(--wapp-raised);
border-bottom: 1px solid var(--wapp-border);
color: var(--wapp-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.03em;
text-align: start;
text-transform: uppercase;
}
.wapp-table td {
padding: 0.625rem 0.75rem;
border-bottom: 1px solid var(--wapp-border);
vertical-align: top;
overflow-wrap: anywhere;
}
.wapp-table tbody tr:last-child td { border-bottom: 0; }
.wapp-table tbody tr:hover td { background: var(--wapp-raised); }
.wapp-td-quiet { color: var(--wapp-muted); }
.wapp-td-strong { color: var(--wapp-heading); font-weight: 600; }
.wapp-stack-1 { display: block; }
.wapp-stack-2 { display: block; color: var(--wapp-muted); font-size: 0.75rem; }
.wapp-tag {
display: inline-block;
margin: 0.0625rem 0.25rem 0.0625rem 0;
padding: 0.0625rem 0.5rem;
border-radius: 999px;
background: var(--wapp-raised);
color: var(--wapp-text);
font-size: 0.6875rem;
font-weight: 600;
}
.wapp-tag--info { background: rgba(41, 156, 219, 0.16); color: var(--wapp-info); }
.wapp-tag--accent { background: rgba(74, 92, 156, 0.24); color: #93a3dd; }
.wapp-tag--success { background: rgba(10, 179, 156, 0.16); color: var(--wapp-success); }
.wo-light .wapp-tag--accent { background: rgba(64, 81, 137, 0.12); color: var(--wapp-accent); }
/* ── Gol ───────────────────────────────────────────────────────── */
.wapp-empty {
padding: 2rem 1.25rem;
border: 1px dashed var(--wapp-border);
border-radius: var(--wapp-radius);
background: var(--wapp-card);
text-align: center;
}
.wapp-empty-title { margin: 0 0 0.25rem; color: var(--wapp-heading); font-weight: 600; }
.wapp-empty-body { margin: 0; color: var(--wapp-muted); font-size: 0.8125rem; }
/* ── Paginare ──────────────────────────────────────────────────── */
.wapp-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.875rem;
}
.wapp-pager-info,
.wapp-pager-pos { color: var(--wapp-muted); font-size: 0.75rem; }
.wapp-pager-nav { display: flex; align-items: center; gap: 0.5rem; }
/* ── Mesaje (sandbox, monedă mixtă) ────────────────────────────── */
.wapp-alert {
padding: 0.75rem 1rem;
margin-bottom: var(--wapp-gap);
border: 1px solid var(--wapp-border);
border-inline-start-width: 3px;
border-radius: var(--wapp-radius);
background: var(--wapp-card);
font-size: 0.8125rem;
}
.wapp-alert--warning { border-inline-start-color: var(--wapp-warning); }
.wapp-alert--info { border-inline-start-color: var(--wapp-info); }
.wapp-alert strong { color: var(--wapp-heading); }
/* ── Bară de filtre ────────────────────────────────────────────── */
.wapp-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wapp-gap);
margin-bottom: var(--wapp-gap);
}
.wapp-toolbar .wapp-filter { margin-bottom: 0; }
.wapp-pills {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
padding: 0.1875rem;
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
background: var(--wapp-card);
}
.wapp-pill {
display: inline-flex;
align-items: center;
min-height: 1.875rem;
padding: 0.25rem 0.7rem;
border-radius: 3px;
color: var(--wapp-muted);
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.wapp-pill:hover { color: var(--wapp-heading); background: var(--wapp-raised); }
.wapp-pill.is-active { background: var(--wapp-accent); color: #fff; }
/* ── Grilă KPI ─────────────────────────────────────────────────── */
.wapp-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: 0.75rem;
margin-bottom: var(--wapp-gap);
}
/* Grilă KPI folosită în interiorul unui card — fără margine dublă dedesubt */
.wapp-kpis--tight { margin-bottom: 0; margin-top: 0.75rem; }
.wapp-kpi {
position: relative;
display: flex;
flex-direction: column;
gap: 0.35rem;
min-height: 6rem;
padding: 0.875rem 1rem;
background: var(--wapp-card);
border: 1px solid var(--wapp-border);
border-inline-start: 3px solid var(--wapp-border);
border-radius: var(--wapp-radius);
}
.wapp-kpi--success { border-inline-start-color: var(--wapp-success); }
.wapp-kpi--accent { border-inline-start-color: var(--wapp-accent); }
.wapp-kpi--info { border-inline-start-color: var(--wapp-info); }
.wapp-kpi--warning { border-inline-start-color: var(--wapp-warning); }
.wapp-kpi.is-dim { opacity: 0.55; }
.wapp-kpi-label {
color: var(--wapp-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wapp-kpi-value {
color: var(--wapp-heading);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.15;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.wapp-kpi-cur {
margin-inline-start: 0.25rem;
color: var(--wapp-muted);
font-size: 0.75rem;
font-weight: 500;
}
.wapp-kpi-sub { color: var(--wapp-muted); font-size: 0.6875rem; margin-top: auto; }
/* Slot personalizabil */
.wapp-kpi--slot.is-empty {
align-items: center;
justify-content: center;
border-style: dashed;
border-inline-start-style: dashed;
}
.wapp-kpi-edit {
position: absolute;
inset-block-start: 0.375rem;
inset-inline-end: 0.375rem;
min-height: 1.5rem;
padding: 0.125rem 0.5rem;
border: 1px solid var(--wapp-border);
border-radius: 3px;
background: var(--wapp-raised);
color: var(--wapp-muted);
font: inherit;
font-size: 0.6875rem;
cursor: pointer;
}
.wapp-kpi-edit:hover { color: var(--wapp-heading); border-color: var(--wapp-accent); }
.wapp-kpi-picker {
position: absolute;
inset-block-start: calc(100% + 0.25rem);
inset-inline-end: 0;
z-index: 20;
min-width: 13rem;
padding: 0.625rem;
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
background: var(--wapp-card);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.wapp-kpi-picker[hidden] { display: none; }
.wapp-kpi-picker-title {
margin: 0 0 0.5rem;
color: var(--wapp-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wapp-kpi-picker-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.125rem; }
.wapp-kpi-picker-opt {
display: block;
padding: 0.4rem 0.5rem;
border-radius: 3px;
color: var(--wapp-text);
font-size: 0.75rem;
text-decoration: none;
}
.wapp-kpi-picker-opt:hover { background: var(--wapp-raised); }
.wapp-kpi-picker-opt.is-active { background: var(--wapp-accent); color: #fff; }
.wapp-kpi-picker-opt--reset { color: var(--wapp-muted); }
/* ── Grafic ────────────────────────────────────────────────────── */
.wapp-chart { min-height: 20rem; }
.wapp-chart text { fill: var(--wapp-muted); }
/* ── Coloane numerice ──────────────────────────────────────────── */
.wapp-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ══════════════════════════════════════════════════════════════════
PAGINA DE EVENIMENT + CHECKOUT (prefix .wev-)
══════════════════════════════════════════════════════════════════ */
.wev-hero {
position: relative;
min-height: 17rem;
display: flex;
align-items: flex-end;
margin-bottom: var(--wapp-gap);
border-radius: var(--wapp-radius-lg);
background: var(--wapp-raised) center/cover no-repeat;
overflow: hidden;
}
.wev-hero.is-empty { min-height: 11rem; border: 1px dashed var(--wapp-border); }
.wev-hero-in {
position: relative;
width: 100%;
padding: clamp(1rem, 3vw, 2rem);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}
.wev-hero.is-empty .wev-hero-in { background: none; }
.wev-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.wev-title {
margin: 0 0 0.4rem;
color: #fff;
font-size: clamp(1.35rem, 4vw, 2.1rem);
font-weight: 700;
line-height: 1.15;
}
.wev-hero.is-empty .wev-title { color: var(--wapp-heading); }
.wev-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: #dfe4ea; font-size: 0.875rem; }
.wev-hero.is-empty .wev-meta { color: var(--wapp-muted); }
.wev-hero-gap { margin-top: 0.75rem; }
/* Două coloane */
.wev-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) 21rem;
gap: var(--wapp-gap);
align-items: start;
}
.wev-main { display: grid; gap: var(--wapp-gap); min-width: 0; }
.wev-side { position: sticky; top: 1rem; display: grid; gap: var(--wapp-gap); }
.wev-prose { font-size: 0.9375rem; }
.wev-prose p { margin: 0 0 0.7rem; }
.wev-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.8rem; }
.wev-fine { font-size: 0.75rem; margin: 0.5rem 0 0; }
/* Program */
.wev-slot {
display: grid;
grid-template-columns: 3.5rem 1fr;
gap: 0.75rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--wapp-border);
}
.wev-slot:last-child { border-bottom: 0; }
.wev-slot time { color: var(--wapp-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.wev-slot b { display: block; color: var(--wapp-heading); font-size: 0.875rem; }
.wev-slot span { font-size: 0.8125rem; }
/* Carduri bilet */
.wev-tk {
padding: 0.8rem 0.9rem;
margin-bottom: 0.55rem;
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
background: var(--wapp-raised);
}
.wev-tk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.wev-tk-name { color: var(--wapp-heading); font-weight: 600; font-size: 0.875rem; }
.wev-tk-price { color: var(--wapp-heading); font-weight: 700; font-size: 1.0625rem; white-space: nowrap; }
.wev-tk-desc { margin: 0.35rem 0 0.6rem; color: var(--wapp-muted); font-size: 0.78rem; }
.wev-tk-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.wev-stock { font-size: 0.72rem; font-weight: 600; }
.wev-stock--ok { color: var(--wapp-success); }
.wev-stock--low { color: var(--wapp-warning); }
.wev-stock--out { color: #f06548; }
.wapp-btn.is-disabled { background: var(--wapp-raised); color: var(--wapp-muted); border-color: var(--wapp-border); cursor: not-allowed; }
/* Artiști */
.wev-artists { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wev-artist {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.25rem 0.7rem 0.25rem 0.25rem;
border: 1px solid var(--wapp-border);
border-radius: 99px;
background: var(--wapp-raised);
color: var(--wapp-text);
font-size: 0.8125rem;
text-decoration: none;
}
.wev-artist:hover { border-color: var(--wapp-accent); color: var(--wapp-heading); }
.wev-artist.is-plain { opacity: 0.72; }
.wev-artist-pic {
width: 1.6rem; height: 1.6rem;
border-radius: 50%;
background: var(--wapp-card) center/cover no-repeat;
border: 1px solid var(--wapp-border);
flex-shrink: 0;
}
.wev-venue { margin: 0 0 0.7rem; font-size: 0.9375rem; }
/* Organizator */
.wev-org-top { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 0.7rem; }
.wev-org-logo {
flex-shrink: 0;
width: 3.25rem; height: 3.25rem;
display: flex; align-items: center; justify-content: center;
border: 1px dashed var(--wapp-border);
border-radius: var(--wapp-radius);
background: var(--wapp-raised);
color: var(--wapp-muted);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.wev-org-name { color: var(--wapp-heading); font-weight: 600; font-size: 0.9375rem; }
.wev-stars { color: var(--wapp-warning); font-size: 0.8125rem; letter-spacing: 1px; }
/* ── Marcaje de goluri ── */
.wev-gap {
display: block;
margin: 0.5rem 0;
padding: 0.5rem 0.65rem;
border-inline-start: 3px solid;
border-radius: 0;
background: var(--wapp-raised);
font-size: 0.78rem;
line-height: 1.5;
}
.wev-gap--fill { border-color: var(--wapp-warning); }
.wev-gap--build { border-color: var(--wapp-accent); }
.wev-gap-tag {
display: inline-block;
margin-inline-end: 0.4rem;
padding: 0.05rem 0.45rem;
border-radius: 99px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.wev-gap--fill .wev-gap-tag { background: rgba(247, 184, 75, 0.18); color: var(--wapp-warning); }
.wev-gap--build .wev-gap-tag { background: rgba(123, 118, 201, 0.22); color: #a8a3e0; }
.wo-light .wev-gap--build .wev-gap-tag { color: var(--wapp-accent); }
.wev-gap-text { color: var(--wapp-text); }
/* ── Checkout ── */
.wev-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: var(--wapp-gap); font-size: 0.8125rem; }
.wev-step { display: flex; align-items: center; gap: 0.45rem; color: var(--wapp-muted); }
.wev-step b {
width: 1.4rem; height: 1.4rem;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--wapp-border); border-radius: 50%;
background: var(--wapp-raised);
font-size: 0.72rem;
}
.wev-step.is-on { color: var(--wapp-heading); }
.wev-step.is-on b { background: var(--wapp-accent); border-color: var(--wapp-accent); color: #fff; }
.wev-step.is-done b { background: rgba(10, 179, 156, 0.18); border-color: var(--wapp-success); color: var(--wapp-success); }
.wev-sep { color: var(--wapp-border); }
.wev-line { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; }
.wev-line-name { color: var(--wapp-heading); font-weight: 600; font-size: 0.875rem; }
.wev-line-right { text-align: end; }
.wev-qty { display: inline-flex; align-items: center; border: 1px solid var(--wapp-border); border-radius: var(--wapp-radius); overflow: hidden; }
.wev-qty a { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--wapp-raised); color: var(--wapp-text); text-decoration: none; }
.wev-qty span { width: 2.4rem; text-align: center; font-size: 0.875rem; }
.wev-person { padding: 0.9rem; margin-bottom: 0.65rem; border: 1px solid var(--wapp-border); border-radius: var(--wapp-radius); background: var(--wapp-raised); }
.wev-person h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; color: var(--wapp-heading); font-size: 0.8125rem; font-weight: 600; }
.wev-copy { color: var(--wapp-accent); font-size: 0.75rem; font-weight: 600; }
.wev-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.wev-grid2 label { display: block; margin-bottom: 0.2rem; color: var(--wapp-muted); font-size: 0.72rem; }
.wev-grid2 input {
width: 100%; min-height: 2.25rem;
padding: 0.4rem 0.6rem;
border: 1px solid var(--wapp-border); border-radius: var(--wapp-radius);
background: var(--wapp-card); color: var(--wapp-text);
font: inherit; font-size: 0.875rem;
}
/* Formulare Settings */
.wapp textarea {
width: 100%;
padding: 0.55rem 0.7rem;
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
background: var(--wapp-card);
color: var(--wapp-text);
font: inherit;
font-size: 0.875rem;
line-height: 1.55;
resize: vertical;
}
.wapp label { display: block; margin-bottom: 0.25rem; color: var(--wapp-muted); font-size: 0.75rem; }
.wapp-check { display: flex; align-items: center; gap: 0.5rem; }
.wapp-check input { width: 1.05rem; height: 1.05rem; }
.wapp-check span { color: var(--wapp-text); font-size: 0.875rem; }
/* Adresa publică a organizatorului. Rădăcina site-ului stă lipită de câmp, ca
omul să vadă adresa întreagă în timp ce o scrie, nu doar bucata lui. */
.wapp-slug-row {
display: flex;
align-items: stretch;
flex-wrap: wrap;
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
background: var(--wapp-card);
overflow: hidden;
}
.wapp-slug-root,
.wapp-slug-tail {
display: flex;
align-items: center;
padding: 0 0.4rem;
color: var(--wapp-muted);
font-size: 0.8125rem;
white-space: nowrap;
}
.wapp-slug-root { padding-inline-start: 0.7rem; }
.wapp-slug-tail { padding-inline-end: 0.7rem; }
.wapp-slug-row input {
flex: 1 1 8rem;
min-width: 6rem;
border: 0;
border-radius: 0;
background: transparent;
padding-inline: 0;
}
.wapp-slug-aliases { margin: 0.35rem 0 0; padding-inline-start: 1.1rem; }
.wapp-slug-aliases code { font-size: 0.75rem; color: var(--wapp-muted); }
.wapp-alert--success { border-inline-start-color: var(--wapp-success); }
.wapp-alert--danger { border-inline-start-color: #f06548; }
.wev-sum { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.28rem 0; font-size: 0.875rem; }
.wev-sum span:first-child { color: var(--wapp-muted); }
.wev-sum--total { margin-top: 0.5rem; padding-top: 0.7rem; border-top: 1px solid var(--wapp-border); font-size: 1.0625rem; font-weight: 700; }
.wev-sum--total span { color: var(--wapp-heading); }
.wev-tc { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.9rem 0 0; font-size: 0.8125rem; line-height: 1.5; }
.wev-tc input { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.15rem; }
.wev-pay { display: block; width: 100%; text-align: center; margin-top: 0.9rem; padding: 0.85rem; font-size: 0.9375rem; }
.wev-secure { text-align: center; }
@media (max-width: 56rem) {
.wev-cols { grid-template-columns: 1fr; }
.wev-side { position: static; order: -1; }
.wev-grid2 { grid-template-columns: 1fr; }
.wev-hero { min-height: 12rem; }
}
/* ══════════════════════════════════════════════════════════════════
MOBIL — un singur punct de rupere.
Tabelul se pliază în carduri: fiecare rând devine un bloc, iar
antetul coloanei apare în fața valorii, luat din data-label.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 45rem) {
.wapp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wapp-table,
.wapp-table tbody,
.wapp-table tr,
.wapp-table td { display: block; width: 100%; }
.wapp-card--flush { padding: 0.75rem; background: transparent; border: 0; }
.wapp-table tr {
margin-bottom: 0.75rem;
padding: 0.25rem 0.875rem;
background: var(--wapp-card);
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius);
}
.wapp-table td {
display: grid;
grid-template-columns: minmax(6rem, 38%) 1fr;
gap: 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--wapp-border);
}
.wapp-table td::before {
content: attr(data-label);
color: var(--wapp-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.wapp-table tr td:last-child { border-bottom: 0; }
/* Coloana de acțiuni n-are etichetă: pe card, butoanele stau singure,
pe toată lățimea, nu într-o coloană de 1%. */
.wapp-col-actions {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
.wapp-col-actions::before { content: none; }
/* Rândul de defalcare ocupă tot cardul, fără etichetă în față. */
.wapp-row-detail > td { display: block; }
.wapp-row-detail > td::before { content: none; }
.wapp-table tbody tr:hover td { background: transparent; }
.wapp-bar-row { grid-template-columns: 1fr; gap: 0.25rem; }
.wapp-bar-name { text-align: start; font-weight: 600; }
.wapp-bar-value { text-align: end; }
.wapp-select { flex-basis: 100%; }
/* Ținte de atins confortabile cu degetul */
.wapp-btn,
.wapp-select,
.wapp-lang-opt { min-height: 2.75rem; }
/* Pe mobil coloanele numerice stau lipite de etichetă, nu la dreapta */
.wapp-num { text-align: start; }
.wapp-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.wapp-pill { min-height: 2.25rem; }
.wapp-kpi-picker {
position: static;
min-width: 0;
margin-top: 0.5rem;
box-shadow: none;
}
.wapp-chart { min-height: 16rem; }
}
/* Panoul organizatorului — conținut real */
.wev-org-logo { background-size: cover; background-position: center; }
.wev-org-bio { margin: 0.6rem 0 0; font-size: 0.875rem; }
.wev-org-contact { margin-top: 0.7rem; display: grid; gap: 0.15rem; color: var(--wapp-muted); font-size: 0.8125rem; }
.wev-org-links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; }
.wev-org-links a {
padding: 0.2rem 0.65rem;
border: 1px solid var(--wapp-border);
border-radius: 99px;
color: var(--wapp-muted);
font-size: 0.75rem;
text-decoration: none;
}
.wev-org-links a:hover { color: var(--wapp-heading); border-color: var(--wapp-accent); }
.wev-terms summary { cursor: pointer; color: var(--wapp-accent); font-size: 0.875rem; font-weight: 600; }
.wev-terms .wev-prose { margin-top: 0.7rem; }
/* ══════════════════════════════════════════════════════════════════
* SHELL + ROUTER (Faza 0) — cadrul Portalului nou
*
* Referința vizuală: DEMO Screenshots/demo-portal-nou-shell.html
* (ROADMAP-Portal-Nou.md §2b). Aceleași reguli ca tot fișierul:
* nicio unitate vh, nicio lățime în px, un singur punct de rupere,
* ținte de atins de minimum 2.75rem (44px) pe mobil.
* ════════════════════════════════════════════════════════════════ */
.wapp-shell {
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
padding: 0;
max-width: none;
background: var(--wapp-bg);
border: 1px solid var(--wapp-border);
border-radius: var(--wapp-radius-lg);
overflow: hidden;
}
/* Ecranele randate în shell își păstrează clasa .wapp, dar cadrul
(lățime maximă, centrare) îl dă shell-ul — nu se dublează. */
.wapp-shell .wapp {
max-width: none;
margin: 0;
padding: 0;
}
/* ── Sidebar ── */
.wapp-side {
background: var(--wapp-card);
border-inline-end: 1px solid var(--wapp-border);
display: flex;
flex-direction: column;
min-width: 0;
}
.wapp-brand {
display: flex;
align-items: center;
/* Același token ca bara de sus — vezi comentariul de la `.wapp-top`. */
height: var(--wapp-topbar, 3.5rem);
flex-shrink: 0;
padding: 0 1.125rem;
border-bottom: 1px solid var(--wapp-border);
color: var(--wapp-heading);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.wapp-brand em { color: var(--wapp-accent); font-style: normal; }
/* Logo-ul ales din WEDA Admin. Înălțimea e legată de bara de sus, nu scrisă
în pixeli: orice imagine urcată intră în același spațiu, indiferent cât e
de mare. `width:auto` păstrează proporțiile — un logo turtit e mai rău
decât niciun logo. */
.wapp-brand-logo {
height: 1.625rem;
width: auto;
max-width: 8rem;
object-fit: contain;
flex-shrink: 0;
}
.wapp-brand-word { white-space: nowrap; }
/* Cuvântul de după logo. Ceva mai stins decât marca: e o precizare, nu
o a doua marcă. */
.wapp-brand-suffix {
margin-inline-start: 0.5rem;
color: var(--wapp-muted);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0;
white-space: nowrap;
}
.wapp-nav { padding: 0.75rem 0; flex: 1; }
/* Eticheta unei intrări de meniu. Există ca element separat ca să poată
dispărea la meniul strâns — un text gol între pictogramă și insignă
n-ar avea de ce se prinde. */
.wapp-nav-text { min-width: 0; }
.wapp-nav-group {
padding: 0.75rem 1.125rem 0.375rem;
color: var(--wapp-muted);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.wapp-nav a {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0.0625rem 0.5rem;
padding: 0.6rem 0.7rem;
min-height: 2.75rem;
border-radius: var(--wapp-radius);
color: var(--wapp-text);
font-size: 0.875rem;
text-decoration: none;
}
.wapp-nav a:hover { background: var(--wapp-raised); }
.wapp-nav a.is-active {
background: var(--wapp-raised);
color: var(--wapp-heading);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--wapp-accent);
}
.wapp-ic { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; opacity: 0.85; }
/* Limba în sidebar — vizibilă doar pe mobil, în sertar (§2b). */
.wapp-nav-group--lang, .wapp-nav-lang { display: none; }
/* ── Topbar ── */
.wapp-shell-main { display: flex; flex-direction: column; min-width: 0; }
/* Bara de sus și blocul mărcii trebuie să aibă EXACT aceeași înălțime, ca
liniile lor de jos să continue una pe alta. Cu `min-height`, orice element
adus de tema WordPress în interior (marginea implicită a unui