/* /Layout/MainLayout.razor.rz.scp.css */
/* =====================================================================
MainLayout.razor.css · DGbooking
The dashboard shell is now styled by the global dashboard.css
(the collapse/drawer state on .dg-shell must reach nav links inside
the NavMenu child component, which scoped CSS cannot do cleanly).
Keep this file for any future styles that target plain HTML elements
written directly inside MainLayout.razor.
===================================================================== */
/* /Layout/NavMenu.razor.rz.scp.css */
/* =====================================================================
NavMenu.razor.css · DGbooking
---------------------------------------------------------------------
NOTE ON BLAZOR CSS ISOLATION
This component renders only Radzen components ()
with no plain HTML elements, so Blazor attaches no scope attribute
here and `::deep` has nothing to anchor to — scoped rules in THIS
file cannot reach the rendered menu markup.
The previous contents targeted Bootstrap classes (.navbar-brand,
.nav-item a, .bi-*) that the Radzen menu never emits, so they had no
effect. They have been removed.
All navigation styling now lives in MainLayout.razor.css (reached via
::deep from the .desktop-layout / .mobile-layout wrappers) and in the
theme (css/themes/light.css, dark.css) panel-menu tokens. Style the menu there.
===================================================================== */
/* Intentionally minimal. Keep this file for future component-local
styles that target real HTML elements added directly in NavMenu.razor. */
/* /Layout/SwitchLangaugeComponent.razor.rz.scp.css */
/* /Pages/AdminComponenets/AgenderDashBoardAdminComponent.razor.rz.scp.css */
.notification[b-uxikr3jpfn] {
position: relative;
}
.notification[b-uxikr3jpfn]::after {
content: attr(data-notification);
position: absolute;
top: -10px;
right: -10px;
background-color: red;
color: white;
font-size: 12px;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
/* /Pages/AdminComponenets/AiRequestsPage.razor.rz.scp.css */
.ai-page[b-tx6q8nb95w] {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.ai-head[b-tx6q8nb95w] {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 24px;
}
.ai-head h1[b-tx6q8nb95w] {
margin: 0;
font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
font-weight: 700;
}
.ai-head p[b-tx6q8nb95w] { margin: 4px 0 0; color: var(--dg-text-dim); }
.ai-status[b-tx6q8nb95w],
.ai-filters[b-tx6q8nb95w] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ai-chip[b-tx6q8nb95w] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border: 1px solid var(--dg-border);
border-radius: 999px;
font-size: .82rem;
}
.ai-chip.on[b-tx6q8nb95w] { border-color: #7c5cff; color: var(--dg-text); }
.ai-chip.on[b-tx6q8nb95w] .rzi { color: #7c5cff; }
.ai-chip.off[b-tx6q8nb95w] { color: var(--dg-text-dim); text-decoration: line-through; text-decoration-color: var(--dg-border); }
.ai-chip[b-tx6q8nb95w] .rzi { font-size: 1rem; }
.ai-note[b-tx6q8nb95w],
.ai-message[b-tx6q8nb95w] {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: .9rem;
}
.ai-note[b-tx6q8nb95w] { color: var(--dg-text-dim); }
.ai-message.good[b-tx6q8nb95w] .rzi { color: #0ca30c; }
.ai-message.bad[b-tx6q8nb95w] .rzi { color: #d03b3b; }
.ai-filter[b-tx6q8nb95w] {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 6px 14px;
border: 1px solid var(--dg-border);
border-radius: 999px;
background: var(--dg-surface);
color: var(--dg-text);
font: inherit;
font-size: .88rem;
cursor: pointer;
}
.ai-filter.active[b-tx6q8nb95w] {
border-color: var(--dg-nav-active-bg);
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
}
.ai-count[b-tx6q8nb95w] {
min-width: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--dg-nav-hover-bg);
font-size: .75rem;
font-weight: 700;
text-align: center;
}
.ai-filter.active .ai-count[b-tx6q8nb95w] { background: color-mix(in srgb, var(--dg-nav-active-fg) 22%, transparent); }
.ai-list[b-tx6q8nb95w] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
gap: 12px;
}
.ai-card[b-tx6q8nb95w] {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
padding: 14px 16px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
color: var(--dg-text);
}
.ai-card header[b-tx6q8nb95w] {
display: flex;
align-items: flex-start;
gap: 10px;
}
.ai-source[b-tx6q8nb95w] {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--dg-nav-hover-bg);
}
.ai-card-title[b-tx6q8nb95w] {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.ai-card-title strong[b-tx6q8nb95w] { overflow-wrap: anywhere; }
.ai-card-title span[b-tx6q8nb95w] { color: var(--dg-text-dim); font-size: .8rem; overflow-wrap: anywhere; }
.ai-badge[b-tx6q8nb95w] {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .8rem;
font-weight: 600;
white-space: nowrap;
}
.ai-badge[b-tx6q8nb95w] .rzi { font-size: 1.05rem; }
.ai-badge.good[b-tx6q8nb95w] .rzi { color: #0ca30c; }
.ai-badge.todo[b-tx6q8nb95w] .rzi { color: #c27c0e; }
.ai-badge.bad[b-tx6q8nb95w] .rzi { color: #d03b3b; }
.ai-badge.muted[b-tx6q8nb95w] { color: var(--dg-text-dim); }
.ai-missing[b-tx6q8nb95w] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: .8rem;
color: var(--dg-text-dim);
}
.ai-tag[b-tx6q8nb95w] {
padding: 1px 10px;
border: 1px solid #c27c0e;
border-radius: 999px;
color: var(--dg-text);
}
.ai-reason[b-tx6q8nb95w],
.ai-error[b-tx6q8nb95w] {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: .85rem;
}
.ai-reason span[b-tx6q8nb95w] { color: var(--dg-text-dim); }
.ai-error[b-tx6q8nb95w] { color: #d03b3b; overflow-wrap: anywhere; }
.ai-text[b-tx6q8nb95w] {
max-height: 260px;
overflow: auto;
padding: 10px 12px;
border-radius: 10px;
background: var(--dg-nav-hover-bg);
font-size: .85rem;
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ai-card footer[b-tx6q8nb95w] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
}
.ai-actions[b-tx6q8nb95w] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ai-btn[b-tx6q8nb95w] {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 6px 12px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: var(--dg-surface);
color: var(--dg-text);
font: inherit;
font-size: .85rem;
text-decoration: none;
cursor: pointer;
}
.ai-btn:hover:not(:disabled)[b-tx6q8nb95w] { background: var(--dg-nav-hover-bg); color: var(--dg-text); }
.ai-btn.primary[b-tx6q8nb95w] {
border-color: var(--dg-nav-active-bg);
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
font-weight: 600;
}
.ai-btn.primary:hover:not(:disabled)[b-tx6q8nb95w] { background: var(--dg-nav-active-bg); color: var(--dg-nav-active-fg); box-shadow: var(--dg-shadow-3); }
.ai-btn:disabled[b-tx6q8nb95w] { opacity: .5; cursor: not-allowed; }
.ai-btn[b-tx6q8nb95w] .rzi { font-size: 1.05rem; }
.ai-btn:focus-visible[b-tx6q8nb95w],
.ai-filter:focus-visible[b-tx6q8nb95w],
.ai-link:focus-visible[b-tx6q8nb95w] {
outline: 2px solid var(--dg-text);
outline-offset: 2px;
}
.ai-link[b-tx6q8nb95w] {
border: 0;
background: none;
color: var(--dg-text-dim);
font: inherit;
font-size: .85rem;
text-decoration: underline;
cursor: pointer;
}
.ai-empty[b-tx6q8nb95w] {
margin: 0;
padding: 40px 0;
text-align: center;
color: var(--dg-text-dim);
}
.ai-skeleton[b-tx6q8nb95w] {
height: 220px;
border-radius: 14px;
background: var(--dg-nav-hover-bg);
animation: ai-pulse-b-tx6q8nb95w 1.2s ease-in-out infinite;
}
@keyframes ai-pulse-b-tx6q8nb95w { 50% { opacity: .5; } }
@media (max-width: 600px) {
.ai-head .ai-btn[b-tx6q8nb95w] { width: 100%; justify-content: center; }
.ai-card[b-tx6q8nb95w] { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.ai-skeleton[b-tx6q8nb95w] { animation: none; }
}
/* /Pages/AdminComponenets/AnalyticsPage.razor.rz.scp.css */
/* Chart colors: validated categorical palette (blue, orange, aqua), fixed order.
Dark mode uses its own steps, validated against the dark surface (#1f232a). */
.dg-analytics[b-dtbn2225kx] {
--dg-chart-1: #2a78d6;
--dg-chart-2: #eb6834;
--dg-chart-3: #1baf7a;
/* Radzen's default chart scheme reads these */
--rz-series-1: var(--dg-chart-1);
--rz-series-2: var(--dg-chart-2);
--rz-series-3: var(--dg-chart-3);
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.dg-shell.dg-dark .dg-analytics[b-dtbn2225kx] {
--dg-chart-1: #3987e5;
--dg-chart-2: #d95926;
--dg-chart-3: #199e70;
}
/* Lines stay stroke-only; markers get a surface ring so they read on top of the line. */
.dg-analytics[b-dtbn2225kx] .rz-line-series path {
fill: none;
}
.dg-analytics[b-dtbn2225kx] .rz-marker {
stroke: var(--dg-surface);
stroke-width: 2px;
}
/* Recessive grid and axis text */
.dg-analytics[b-dtbn2225kx] .rz-grid-line {
stroke: var(--dg-border);
opacity: .6;
}
.dg-analytics[b-dtbn2225kx] .rz-tick-text,
.dg-analytics[b-dtbn2225kx] .rz-legend-item-text {
fill: var(--dg-text-dim);
color: var(--dg-text-dim);
}
.dg-analytics[b-dtbn2225kx] .rz-series-data-label {
fill: var(--dg-text);
}
/* ---------- header and period filter ---------- */
.dg-an-head h1[b-dtbn2225kx] {
margin: 0;
font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
font-weight: 700;
}
.dg-an-head p[b-dtbn2225kx] {
margin: 4px 0 0;
color: var(--dg-text-dim);
}
.dg-an-filters[b-dtbn2225kx] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.dg-an-chip[b-dtbn2225kx] {
min-height: 36px;
padding: 6px 14px;
border: 1px solid var(--dg-border);
border-radius: 999px;
background: var(--dg-surface);
color: var(--dg-text);
font: inherit;
font-size: .875rem;
cursor: pointer;
transition: background-color .15s var(--dg-ease);
}
.dg-an-chip:hover[b-dtbn2225kx] {
background: var(--dg-nav-hover-bg);
}
.dg-an-chip.active[b-dtbn2225kx] {
border-color: var(--dg-nav-active-bg);
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
}
.dg-an-chip:focus-visible[b-dtbn2225kx] {
outline: 2px solid var(--dg-text);
outline-offset: 2px;
}
.dg-an-range[b-dtbn2225kx] {
margin-inline-start: auto;
color: var(--dg-text-dim);
font-size: .85rem;
font-variant-numeric: tabular-nums;
}
.dg-an-error[b-dtbn2225kx] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 12px 16px;
border: 1px solid #d03b3b;
border-radius: 12px;
}
.dg-an-error[b-dtbn2225kx] .rzi {
color: #d03b3b;
}
/* ---------- layout ---------- */
.dg-an-tiles[b-dtbn2225kx] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
gap: 12px;
}
/* Two columns from ~900px of content width, one column below. */
.dg-an-charts[b-dtbn2225kx] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
gap: 16px;
}
/* ---------- hostess pool: one stacked bar + labeled legend ---------- */
.dg-pool[b-dtbn2225kx] {
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px 0 12px;
}
.dg-pool-total strong[b-dtbn2225kx] {
font-size: 2rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.dg-pool-total span[b-dtbn2225kx] {
color: var(--dg-text-dim);
}
.dg-pool-bar[b-dtbn2225kx] {
display: flex;
gap: 2px; /* surface gap between segments */
height: 22px;
overflow: hidden;
border-radius: 4px;
}
.dg-pool-seg[b-dtbn2225kx] {
flex-basis: 0;
min-width: 4px;
}
.dg-pool-seg.s1[b-dtbn2225kx], .dg-pool-key.s1[b-dtbn2225kx] { background: var(--dg-chart-1); }
.dg-pool-seg.s2[b-dtbn2225kx], .dg-pool-key.s2[b-dtbn2225kx] { background: var(--dg-chart-2); }
.dg-pool-seg.s3[b-dtbn2225kx], .dg-pool-key.s3[b-dtbn2225kx] { background: var(--dg-chart-3); }
.dg-pool-legend[b-dtbn2225kx] {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.dg-pool-legend li[b-dtbn2225kx] {
display: grid;
grid-template-columns: 12px 1fr auto 3.5rem;
align-items: center;
gap: 10px;
font-variant-numeric: tabular-nums;
}
.dg-pool-key[b-dtbn2225kx] {
width: 12px;
height: 12px;
border-radius: 3px;
}
.dg-pool-name[b-dtbn2225kx] {
color: var(--dg-text);
}
.dg-pool-share[b-dtbn2225kx] {
color: var(--dg-text-dim);
text-align: end;
}
@media (max-width: 600px) {
.dg-an-range[b-dtbn2225kx] {
width: 100%;
margin-inline-start: 0;
}
}
@media (forced-colors: active) {
.dg-pool-seg[b-dtbn2225kx], .dg-pool-key[b-dtbn2225kx] { forced-color-adjust: none; }
}
/* /Pages/AdminComponenets/DgChartCard.razor.rz.scp.css */
.dg-chart-card[b-dc6xgnyhlb] {
display: flex;
flex-direction: column;
min-width: 0;
padding: 18px 18px 12px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
color: var(--dg-text);
}
.dg-chart-card.wide[b-dc6xgnyhlb] {
grid-column: 1 / -1;
}
.dg-chart-head[b-dc6xgnyhlb] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.dg-chart-titles[b-dc6xgnyhlb] {
min-width: 0;
}
.dg-chart-titles h2[b-dc6xgnyhlb] {
margin: 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
}
.dg-chart-titles p[b-dc6xgnyhlb] {
margin: 2px 0 0;
color: var(--dg-text-dim);
font-size: .8rem;
}
.dg-chart-toggle[b-dc6xgnyhlb] {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px; /* touch target */
padding: 6px 10px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: transparent;
color: var(--dg-text-dim);
font: inherit;
font-size: .8rem;
cursor: pointer;
}
.dg-chart-toggle:hover[b-dc6xgnyhlb] {
background: var(--dg-nav-hover-bg);
color: var(--dg-text);
}
.dg-chart-toggle:focus-visible[b-dc6xgnyhlb] {
outline: 2px solid var(--dg-nav-active-bg);
outline-offset: 2px;
}
.dg-chart-body[b-dc6xgnyhlb] {
flex: 1;
min-width: 0;
}
.dg-chart-empty[b-dc6xgnyhlb] {
margin: 0;
padding: 48px 0;
text-align: center;
color: var(--dg-text-dim);
}
.dg-chart-skeleton[b-dc6xgnyhlb] {
height: 280px;
border-radius: 10px;
background: var(--dg-nav-hover-bg);
animation: dg-pulse-b-dc6xgnyhlb 1.2s ease-in-out infinite;
}
@keyframes dg-pulse-b-dc6xgnyhlb {
50% { opacity: .5; }
}
.dg-chart-table[b-dc6xgnyhlb] {
max-height: 320px;
overflow: auto;
}
/* plain table for the "show table" view */
.dg-chart-table[b-dc6xgnyhlb] table {
width: 100%;
border-collapse: collapse;
font-size: .85rem;
}
.dg-chart-table[b-dc6xgnyhlb] th,
.dg-chart-table[b-dc6xgnyhlb] td {
padding: 7px 8px;
border-bottom: 1px solid var(--dg-border);
text-align: start;
white-space: nowrap;
}
.dg-chart-table[b-dc6xgnyhlb] th {
position: sticky;
top: 0;
background: var(--dg-surface);
color: var(--dg-text-dim);
font-weight: 600;
}
.dg-chart-table[b-dc6xgnyhlb] td.num,
.dg-chart-table[b-dc6xgnyhlb] th.num {
text-align: end;
font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
.dg-chart-card[b-dc6xgnyhlb] { padding: 14px 12px 8px; }
.dg-chart-toggle span[b-dc6xgnyhlb] { display: none; } /* icon only on phones */
}
@media (prefers-reduced-motion: reduce) {
.dg-chart-skeleton[b-dc6xgnyhlb] { animation: none; }
}
/* /Pages/AdminComponenets/DgStatTile.razor.rz.scp.css */
.dg-tile[b-s2zzfvrtu8] {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 16px 18px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
color: var(--dg-text);
text-decoration: none;
transition: box-shadow .2s var(--dg-ease), transform .15s var(--dg-ease), border-color .2s var(--dg-ease);
}
.dg-tile-link:hover[b-s2zzfvrtu8] {
box-shadow: var(--dg-shadow-3);
transform: translateY(-1px);
color: var(--dg-text);
}
.dg-tile-link:focus-visible[b-s2zzfvrtu8] {
outline: 2px solid var(--dg-nav-active-bg);
outline-offset: 2px;
}
.dg-tile-label[b-s2zzfvrtu8] {
display: flex;
align-items: center;
gap: 8px;
color: var(--dg-text-dim);
font-size: .85rem;
font-weight: 500;
line-height: 1.3;
}
.dg-tile-label[b-s2zzfvrtu8] .dg-tile-icon {
font-size: 1.15rem;
}
.dg-tile-value[b-s2zzfvrtu8] {
font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
font-weight: 600;
line-height: 1.15;
overflow-wrap: anywhere;
}
.dg-tile-skeleton[b-s2zzfvrtu8] {
display: block;
width: 60%;
height: 1.9rem;
border-radius: 8px;
background: var(--dg-nav-hover-bg);
animation: dg-pulse-b-s2zzfvrtu8 1.2s ease-in-out infinite;
}
@keyframes dg-pulse-b-s2zzfvrtu8 {
50% { opacity: .5; }
}
.dg-tile-hint[b-s2zzfvrtu8] {
color: var(--dg-text-dim);
font-size: .8rem;
}
/* change vs previous period: icon + signed value + label, never color alone */
.dg-tile-delta[b-s2zzfvrtu8] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: .8rem;
color: var(--dg-text-dim);
}
.dg-tile-delta[b-s2zzfvrtu8] .rzi {
font-size: 1.1rem;
}
.dg-tile-delta.good[b-s2zzfvrtu8] .rzi,
.dg-tile-delta.good strong[b-s2zzfvrtu8] {
color: #0ca30c;
}
.dg-tile-delta.bad[b-s2zzfvrtu8] .rzi,
.dg-tile-delta.bad strong[b-s2zzfvrtu8] {
color: #d03b3b;
}
@media (max-width: 480px) {
.dg-tile[b-s2zzfvrtu8] { padding: 12px 14px; gap: 4px; }
.dg-tile-label[b-s2zzfvrtu8] { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
.dg-tile[b-s2zzfvrtu8], .dg-tile-skeleton[b-s2zzfvrtu8] { transition: none; animation: none; }
}
/* /Pages/AdminComponenets/IndexAdminComponenet.razor.rz.scp.css */
.dg-dash[b-nr4wwkhall] {
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
.dg-dash-head[b-nr4wwkhall] {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 24px;
}
.dg-dash-head h1[b-nr4wwkhall] {
margin: 0;
font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
font-weight: 700;
}
.dg-dash-head p[b-nr4wwkhall] {
margin: 4px 0 0;
color: var(--dg-text-dim);
}
.dg-dash-cta[b-nr4wwkhall] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
border-radius: 12px;
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
font-weight: 600;
text-decoration: none;
transition: box-shadow .2s var(--dg-ease), transform .15s var(--dg-ease);
}
.dg-dash-cta:hover[b-nr4wwkhall] {
color: var(--dg-nav-active-fg);
box-shadow: var(--dg-shadow-3);
transform: translateY(-1px);
}
.dg-dash-cta:focus-visible[b-nr4wwkhall] {
outline: 2px solid var(--dg-text);
outline-offset: 2px;
}
.dg-dash-section[b-nr4wwkhall] {
margin: 0 0 12px;
font-size: 1rem;
font-weight: 600;
color: var(--dg-text);
}
/* tiles: as many columns as fit (two on phones), stretched to fill the row */
.dg-dash-tiles[b-nr4wwkhall] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
gap: 12px;
}
.dg-dash-card[b-nr4wwkhall] {
min-width: 0;
padding: 18px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
}
.dg-dash-error[b-nr4wwkhall] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid #d03b3b;
color: var(--dg-text);
}
.dg-dash-error[b-nr4wwkhall] .rzi {
color: #d03b3b;
}
@media (max-width: 600px) {
.dg-dash[b-nr4wwkhall] { gap: 20px; }
.dg-dash-cta[b-nr4wwkhall] { width: 100%; justify-content: center; }
.dg-dash-card[b-nr4wwkhall] { padding: 12px; }
}
/* /Pages/AdminComponenets/ListHostessComponent.razor.rz.scp.css */
/* Keep aspect ratio; do not stretch to the cell size */
.hostess-photo[b-ftwa6xn1ce] {
width: 14px;
height: 14px;
display: block;
object-fit: contain; /* ensures no distortion if both dimensions are constrained */
border-radius: 6px; /* optional, remove if not desired */
}
/* Center the image in the grid cell */
.rz-datagrid td .hostess-photo[b-ftwa6xn1ce] {
margin: 0 auto;
}
/* /Pages/AdminComponenets/ProjectGroupbyWeeksComponent.razor.rz.scp.css */
/* Layout reacts to the card width (container query), not the window,
so it works the same with the sidebar open, as a rail, or hidden. */
.weeks-root[b-e6syh7v8g7] {
container-type: inline-size;
min-width: 0;
}
.weeks-layout[b-e6syh7v8g7] {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.week-panel[b-e6syh7v8g7] {
min-width: 0;
}
.week-caption[b-e6syh7v8g7] {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
margin: 0 0 10px;
font-size: 1rem;
font-weight: 600;
}
.week-caption small[b-e6syh7v8g7] {
color: var(--dg-text-dim);
font-weight: 400;
}
.grid-scroll[b-e6syh7v8g7] {
max-height: calc(100vh - 220px);
overflow: auto;
border: 1px solid var(--dg-border);
border-radius: 12px;
background: var(--dg-surface);
}
/* ---------- week list ---------- */
.weeks-sidebar[b-e6syh7v8g7] {
position: sticky;
top: 12px;
border: 1px solid var(--dg-border);
border-radius: 12px;
background: var(--dg-surface);
overflow: hidden;
}
.weeks-sidebar-header[b-e6syh7v8g7] {
padding: 12px 12px 8px;
border-bottom: 1px solid var(--dg-border);
}
.weeks-title[b-e6syh7v8g7] {
font-weight: 600;
}
.weeks-cards[b-e6syh7v8g7] {
display: flex;
flex-direction: column;
gap: 8px;
max-height: calc(100vh - 260px);
padding: 12px;
overflow: auto;
}
.week-card[b-e6syh7v8g7] {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
width: 100%;
min-height: 44px; /* touch target */
padding: 10px 44px 10px 12px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: transparent;
color: var(--dg-text);
font: inherit;
text-align: start;
cursor: pointer;
transition: background-color .15s var(--dg-ease), border-color .15s var(--dg-ease);
}
.week-card:hover[b-e6syh7v8g7] {
background: var(--dg-nav-hover-bg);
}
.week-card:focus-visible[b-e6syh7v8g7] {
outline: 2px solid var(--dg-text);
outline-offset: 2px;
}
.week-card.active[b-e6syh7v8g7] {
border-color: var(--dg-nav-active-bg);
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
}
.week-card-top[b-e6syh7v8g7] {
display: flex;
align-items: baseline;
gap: 8px;
}
.week-kw[b-e6syh7v8g7] {
font-weight: 700;
white-space: nowrap;
}
.week-year[b-e6syh7v8g7],
.week-range[b-e6syh7v8g7] {
font-size: .85rem;
opacity: .8;
font-variant-numeric: tabular-nums;
}
.all-card .week-range[b-e6syh7v8g7] {
font-size: .95rem;
font-weight: 600;
opacity: 1;
}
/* count, pinned to the right of the card */
.count-badge[b-e6syh7v8g7] {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 7px;
border-radius: 999px;
background: var(--dg-nav-hover-bg);
color: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.week-card.active .count-badge[b-e6syh7v8g7] {
background: color-mix(in srgb, var(--dg-nav-active-fg) 20%, transparent);
}
.weeks-actions[b-e6syh7v8g7] {
padding: 12px;
border-top: 1px solid var(--dg-border);
}
.weeks-empty[b-e6syh7v8g7] {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 24px 0;
color: var(--dg-text-dim);
}
/* ---------- narrow card: weeks become a swipeable row above the table ---------- */
@container (max-width: 760px) {
.weeks-layout[b-e6syh7v8g7] {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.weeks-sidebar[b-e6syh7v8g7] {
position: static;
border: 0;
background: transparent;
overflow: visible;
}
.weeks-sidebar-header[b-e6syh7v8g7] {
display: none;
}
.weeks-cards[b-e6syh7v8g7] {
flex-direction: row;
max-height: none;
padding: 2px 2px 8px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
}
.week-card[b-e6syh7v8g7] {
flex: 0 0 auto;
width: auto;
min-width: 128px;
scroll-snap-align: start;
}
.weeks-actions[b-e6syh7v8g7] {
padding: 0;
border-top: 0;
}
.grid-scroll[b-e6syh7v8g7] {
max-height: 70vh;
}
}
/* /Pages/AdminComponenets/ValidationComponent.razor.rz.scp.css */
.dg-switch[b-9w14fv5mjx] {
display: inline-block;
position: relative;
line-height: 1;
cursor: pointer;
user-select: none;
}
.dg-switch input[b-9w14fv5mjx] {
display: none;
}
.dg-switch .track[b-9w14fv5mjx] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 160px;
height: 36px;
padding: 2px;
border-radius: 18px;
background: var(--rz-base-200);
border: 1px solid var(--rz-base-300);
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
box-shadow: var(--rz-shadow-1);
}
/* Sliding thumb */
.dg-switch .track[b-9w14fv5mjx]::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: calc(50% - 4px);
height: calc(100% - 4px);
border-radius: 16px;
background: var(--rz-primary-lighter);
box-shadow: var(--rz-shadow-2);
transition: left .2s ease, background .2s ease;
}
.dg-switch .txt[b-9w14fv5mjx] {
position: relative;
z-index: 1;
width: 50%;
text-align: center;
font-weight: 600;
font-size: .85rem;
transition: color .2s ease, opacity .2s ease;
color: var(--rz-text-secondary-color);
}
.dg-switch .txt.off[b-9w14fv5mjx] {
padding-left: 2px;
}
.dg-switch .txt.on[b-9w14fv5mjx] {
padding-right: 2px;
}
/* Checked (Germany) */
.dg-switch input:checked + .track[b-9w14fv5mjx]::before {
left: calc(50% + 2px);
background: var(--rz-primary);
}
.dg-switch input:checked + .track .txt.on[b-9w14fv5mjx] {
color: var(--rz-primary-contrast);
}
.dg-switch input:checked + .track .txt.off[b-9w14fv5mjx] {
color: var(--rz-text-tertiary-color);
}
/* Hover focus */
.dg-switch:hover .track[b-9w14fv5mjx] {
box-shadow: var(--rz-shadow-2);
}
/* /Pages/AdminComponenets/WhatsAppInbox.razor.rz.scp.css */
/* WhatsApp-like colours; dark mode has its own steps */
.wa-inbox[b-u7pukae3fs] {
--wa-wall: #efeae2;
--wa-in: #ffffff;
--wa-out: #d9fdd3;
--wa-bubble-text: #111b21;
--wa-meta: #667781;
--wa-day: #ffffffe6;
--wa-template: #e7f3ff;
--wa-accent: #1a8754;
--wa-read: #2a78d6;
display: grid;
grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
height: max(480px, calc(100dvh - 250px));
min-width: 0;
overflow: hidden;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
}
.dg-shell.dg-dark .wa-inbox[b-u7pukae3fs] {
--wa-wall: #0b141a;
--wa-in: #202c33;
--wa-out: #005c4b;
--wa-bubble-text: #e9edef;
--wa-meta: #8696a0;
--wa-day: #182229;
--wa-template: #1d3347;
--wa-accent: #25d366;
--wa-read: #53bdeb;
}
/* ---------- chat list ---------- */
.wa-list[b-u7pukae3fs] {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
border-right: 1px solid var(--dg-border);
}
.wa-search[b-u7pukae3fs] {
display: flex;
align-items: center;
gap: 8px;
margin: 10px;
padding: 0 12px;
border-radius: 10px;
background: var(--dg-nav-hover-bg);
color: var(--dg-text-dim);
}
.wa-search input[b-u7pukae3fs] {
flex: 1;
min-width: 0;
min-height: 40px;
border: 0;
outline: 0;
background: transparent;
color: var(--dg-text);
font: inherit;
}
.wa-search:focus-within[b-u7pukae3fs] {
outline: 2px solid var(--dg-text);
outline-offset: 1px;
}
.wa-list-body[b-u7pukae3fs] {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.wa-conv[b-u7pukae3fs] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 68px;
padding: 10px 14px;
border: 0;
border-bottom: 1px solid var(--dg-border);
background: transparent;
color: var(--dg-text);
font: inherit;
text-align: start;
cursor: pointer;
}
.wa-conv:hover[b-u7pukae3fs] { background: var(--dg-nav-hover-bg); }
.wa-conv.active[b-u7pukae3fs] { background: var(--dg-nav-hover-bg); box-shadow: inset 3px 0 0 var(--wa-accent); }
.wa-conv:focus-visible[b-u7pukae3fs] {
outline: 2px solid var(--dg-text);
outline-offset: -2px;
}
.wa-avatar[b-u7pukae3fs] {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
font-weight: 700;
font-size: .9rem;
}
.wa-conv-main[b-u7pukae3fs] {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
.wa-conv-top[b-u7pukae3fs],
.wa-conv-bottom[b-u7pukae3fs] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.wa-conv-top strong[b-u7pukae3fs] {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.wa-conv-top time[b-u7pukae3fs] {
flex: none;
color: var(--dg-text-dim);
font-size: .75rem;
}
.wa-conv-top time.unread[b-u7pukae3fs] { color: var(--wa-accent); font-weight: 600; }
.wa-conv-text[b-u7pukae3fs] {
display: flex;
align-items: center;
gap: 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--dg-text-dim);
font-size: .85rem;
}
.wa-unread[b-u7pukae3fs] {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--wa-accent);
color: #fff;
font-size: .75rem;
font-weight: 700;
}
.dg-shell.dg-dark .wa-unread[b-u7pukae3fs] { color: #0b141a; }
.wa-conv-skeleton[b-u7pukae3fs] {
height: 52px;
margin: 10px 14px;
border-radius: 10px;
background: var(--dg-nav-hover-bg);
animation: wa-pulse-b-u7pukae3fs 1.2s ease-in-out infinite;
}
@keyframes wa-pulse-b-u7pukae3fs { 50% { opacity: .5; } }
.wa-empty[b-u7pukae3fs] {
margin: 0;
padding: 32px 16px;
text-align: center;
color: var(--dg-text-dim);
}
/* ---------- chat ---------- */
.wa-chat[b-u7pukae3fs] {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--wa-wall);
}
.wa-chat-empty[b-u7pukae3fs] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--wa-meta);
}
.wa-chat-empty[b-u7pukae3fs] .rzi { font-size: 3rem; }
.wa-chat-head[b-u7pukae3fs] {
display: flex;
align-items: center;
gap: 12px;
min-height: 60px;
padding: 8px 14px;
border-bottom: 1px solid var(--dg-border);
background: var(--dg-surface);
}
.wa-chat-title[b-u7pukae3fs] {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.wa-chat-title strong[b-u7pukae3fs] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-chat-title span[b-u7pukae3fs] { color: var(--dg-text-dim); font-size: .8rem; }
.wa-icon-button[b-u7pukae3fs] {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--dg-text);
cursor: pointer;
text-decoration: none;
}
.wa-icon-button:hover[b-u7pukae3fs] { background: var(--dg-nav-hover-bg); color: var(--dg-text); }
.wa-icon-button:focus-visible[b-u7pukae3fs] { outline: 2px solid var(--dg-text); outline-offset: 1px; }
.wa-back[b-u7pukae3fs] { display: none; }
/* newest message last on screen, but first in the markup: opens at the bottom */
.wa-messages[b-u7pukae3fs] {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column-reverse;
gap: 4px;
padding: 14px 6%;
overflow-y: auto;
}
.wa-loading[b-u7pukae3fs] {
margin: auto;
color: var(--wa-meta);
}
.wa-day[b-u7pukae3fs] {
display: flex;
justify-content: center;
margin: 8px 0;
}
.wa-day span[b-u7pukae3fs] {
padding: 4px 12px;
border-radius: 8px;
background: var(--wa-day);
color: var(--wa-meta);
font-size: .75rem;
box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-row[b-u7pukae3fs] {
display: flex;
}
.wa-row.out[b-u7pukae3fs] { justify-content: flex-end; }
.wa-bubble[b-u7pukae3fs] {
position: relative;
display: flex;
flex-direction: column;
max-width: min(78%, 560px);
padding: 6px 8px 4px 10px;
border-radius: 8px;
background: var(--wa-in);
color: var(--wa-bubble-text);
font-size: .9rem;
line-height: 1.38;
box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
overflow-wrap: anywhere;
}
.wa-row.out .wa-bubble[b-u7pukae3fs] { background: var(--wa-out); }
.wa-row.out .wa-bubble.template[b-u7pukae3fs] { background: var(--wa-template); }
.wa-bubble.failed[b-u7pukae3fs] { outline: 1px solid #d03b3b; }
.wa-text[b-u7pukae3fs] { white-space: pre-wrap; }
.wa-media[b-u7pukae3fs],
.wa-tap[b-u7pukae3fs] {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--wa-meta);
font-style: italic;
}
.wa-tap[b-u7pukae3fs] {
color: var(--wa-bubble-text);
font-style: normal;
font-weight: 600;
}
.wa-tap[b-u7pukae3fs] .rzi,
.wa-media[b-u7pukae3fs] .rzi { font-size: 1.1rem; }
.wa-meta[b-u7pukae3fs] {
display: inline-flex;
align-items: center;
align-self: flex-end;
gap: 4px;
margin-top: 2px;
color: var(--wa-meta);
font-size: .7rem;
}
.wa-auto[b-u7pukae3fs] {
padding: 0 5px;
border: 1px solid currentColor;
border-radius: 6px;
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .03em;
}
.wa-meta[b-u7pukae3fs] .wa-tick { font-size: 1rem; }
.wa-inbox[b-u7pukae3fs] .wa-tick.read { color: var(--wa-read); }
.wa-inbox[b-u7pukae3fs] .wa-tick.failed { color: #d03b3b; }
.wa-conv-text[b-u7pukae3fs] .wa-tick { font-size: 1rem; flex: none; }
.wa-fail-reason[b-u7pukae3fs] {
margin-top: 2px;
color: #d03b3b;
font-size: .75rem;
}
/* ---------- composer ---------- */
.wa-composer[b-u7pukae3fs] {
padding: 10px 14px;
border-top: 1px solid var(--dg-border);
background: var(--dg-surface);
}
.wa-compose-row[b-u7pukae3fs] {
display: flex;
align-items: flex-end;
gap: 8px;
}
.wa-compose-row textarea[b-u7pukae3fs],
.wa-compose-row select[b-u7pukae3fs] {
flex: 1;
min-width: 0;
min-height: 44px;
max-height: 160px;
padding: 10px 12px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: var(--dg-surface);
color: var(--dg-text);
font: inherit;
resize: vertical;
}
.wa-compose-row textarea:focus-visible[b-u7pukae3fs],
.wa-compose-row select:focus-visible[b-u7pukae3fs] {
outline: 2px solid var(--dg-text);
outline-offset: 1px;
}
.wa-send[b-u7pukae3fs] {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--wa-accent);
color: #fff;
cursor: pointer;
}
.dg-shell.dg-dark .wa-send[b-u7pukae3fs] { color: #0b141a; }
.wa-send:disabled[b-u7pukae3fs] { opacity: .45; cursor: not-allowed; }
.wa-send:focus-visible[b-u7pukae3fs] { outline: 2px solid var(--dg-text); outline-offset: 2px; }
.wa-window[b-u7pukae3fs],
.wa-closed p[b-u7pukae3fs],
.wa-send-error[b-u7pukae3fs] {
display: flex;
align-items: center;
gap: 6px;
margin: 6px 0 0;
color: var(--dg-text-dim);
font-size: .78rem;
}
.wa-closed p:first-child[b-u7pukae3fs] {
margin: 0 0 8px;
color: var(--dg-text);
font-size: .85rem;
}
.wa-closed[b-u7pukae3fs] .rzi,
.wa-window[b-u7pukae3fs] .rzi { font-size: 1rem; }
.wa-hint a[b-u7pukae3fs] { color: inherit; text-decoration: underline; }
.wa-template-preview[b-u7pukae3fs] {
display: block;
margin-top: 8px;
padding: 8px 10px;
border-radius: 8px;
background: var(--dg-nav-hover-bg);
white-space: pre-wrap;
}
.wa-send-error[b-u7pukae3fs] { color: #d03b3b; }
/* ---------- phones: list or chat, like the WhatsApp app ---------- */
@media (max-width: 760px) {
.wa-inbox[b-u7pukae3fs] {
grid-template-columns: minmax(0, 1fr);
height: max(460px, calc(100dvh - 210px));
}
.wa-list[b-u7pukae3fs] { border-right: 0; }
.wa-chat[b-u7pukae3fs] { display: none; }
.wa-inbox.has-chat .wa-list[b-u7pukae3fs] { display: none; }
.wa-inbox.has-chat .wa-chat[b-u7pukae3fs] { display: flex; }
.wa-back[b-u7pukae3fs] { display: inline-flex; }
.wa-messages[b-u7pukae3fs] { padding: 12px 10px; }
.wa-bubble[b-u7pukae3fs] { max-width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
.wa-conv-skeleton[b-u7pukae3fs] { animation: none; }
}
/* /Pages/AdminComponenets/WhatsAppPage.razor.rz.scp.css */
.dg-wa[b-xlk45qugyx] {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.dg-wa-head h1[b-xlk45qugyx] {
margin: 0;
font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
font-weight: 700;
}
.dg-wa-head p[b-xlk45qugyx] {
margin: 4px 0 0;
color: var(--dg-text-dim);
}
/* ---------- tabs ---------- */
.dg-wa-tabs[b-xlk45qugyx] {
display: flex;
gap: 4px;
overflow-x: auto;
border-bottom: 1px solid var(--dg-border);
scrollbar-width: none;
}
.dg-wa-tabs a[b-xlk45qugyx] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 14px;
border-bottom: 3px solid transparent;
color: var(--dg-text-dim);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.dg-wa-tabs a:hover[b-xlk45qugyx] { color: var(--dg-text); background: var(--dg-nav-hover-bg); border-radius: 10px 10px 0 0; }
.dg-wa-tabs a.active[b-xlk45qugyx] {
border-bottom-color: var(--dg-nav-active-bg);
color: var(--dg-text);
}
.dg-wa-tabs a:focus-visible[b-xlk45qugyx] { outline: 2px solid var(--dg-text); outline-offset: -2px; }
.dg-wa-badge[b-xlk45qugyx] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: #1a8754;
color: #fff;
font-size: .72rem;
font-weight: 700;
}
.dg-wa-error[b-xlk45qugyx] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 12px 16px;
border: 1px solid #d03b3b;
border-radius: 12px;
}
.dg-wa-error[b-xlk45qugyx] .rzi { color: #d03b3b; }
/* ---------- top tiles ---------- */
.dg-wa-tiles[b-xlk45qugyx] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 12px;
}
.dg-wa-status[b-xlk45qugyx] {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
padding: 16px 18px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
}
.dg-wa-status[b-xlk45qugyx] .rzi { font-size: 1.8rem; }
.dg-wa-status.good[b-xlk45qugyx] .rzi { color: #0ca30c; }
.dg-wa-status.warn[b-xlk45qugyx] .rzi { color: #c27c0e; }
.dg-wa-status.off[b-xlk45qugyx] .rzi { color: var(--dg-text-dim); }
.dg-wa-status div[b-xlk45qugyx] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.dg-wa-status strong[b-xlk45qugyx] { font-size: 1.15rem; }
.dg-wa-status span[b-xlk45qugyx] {
color: var(--dg-text-dim);
font-size: .8rem;
overflow-wrap: anywhere;
}
/* ---------- cards ---------- */
.dg-wa-columns[b-xlk45qugyx] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: 16px;
}
.dg-wa-card[b-xlk45qugyx] {
min-width: 0;
padding: 18px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
color: var(--dg-text);
}
.dg-wa-card h2[b-xlk45qugyx] {
margin: 0 0 12px;
font-size: 1rem;
font-weight: 600;
}
.dg-wa-dim[b-xlk45qugyx] { color: var(--dg-text-dim); font-size: .85rem; }
.dg-wa-dim.block[b-xlk45qugyx] { display: block; }
.dg-wa-how[b-xlk45qugyx] {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.dg-wa-how li[b-xlk45qugyx] {
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.4;
}
.dg-wa-how[b-xlk45qugyx] .rzi {
flex: none;
margin-top: 1px;
color: var(--dg-text-dim);
}
.dg-wa-settings[b-xlk45qugyx] {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 6px 16px;
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--dg-border);
font-size: .85rem;
}
.dg-wa-settings dt[b-xlk45qugyx] { color: var(--dg-text-dim); }
.dg-wa-settings dd[b-xlk45qugyx] { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }
/* ---------- test message ---------- */
.dg-wa-test[b-xlk45qugyx] {
display: flex;
flex-direction: column;
gap: 6px;
}
.dg-wa-test label[b-xlk45qugyx] { font-size: .85rem; color: var(--dg-text-dim); }
.dg-wa-test-row[b-xlk45qugyx] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dg-wa-test-row input[b-xlk45qugyx] {
flex: 1 1 200px;
min-width: 0;
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: var(--dg-surface);
color: var(--dg-text);
font: inherit;
}
.dg-wa-test-row input:focus-visible[b-xlk45qugyx],
.dg-wa-button:focus-visible[b-xlk45qugyx],
.dg-wa-link:focus-visible[b-xlk45qugyx],
.dg-wa-back:focus-visible[b-xlk45qugyx] {
outline: 2px solid var(--dg-text);
outline-offset: 2px;
}
.dg-wa-button[b-xlk45qugyx] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 8px 16px;
border: 0;
border-radius: 10px;
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.dg-wa-button:disabled[b-xlk45qugyx] { opacity: .5; cursor: not-allowed; }
.dg-wa-result[b-xlk45qugyx] {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 0 0;
font-size: .9rem;
overflow-wrap: anywhere;
}
.dg-wa-result.good[b-xlk45qugyx] .rzi { color: #0ca30c; }
.dg-wa-result.bad[b-xlk45qugyx] .rzi { color: #d03b3b; }
/* ---------- tables ---------- */
.dg-wa-table[b-xlk45qugyx] {
max-height: 560px;
overflow: auto;
border: 1px solid var(--dg-border);
border-radius: 10px;
}
.dg-wa-table table[b-xlk45qugyx] {
width: 100%;
border-collapse: collapse;
font-size: .875rem;
}
.dg-wa-table th[b-xlk45qugyx],
.dg-wa-table td[b-xlk45qugyx] {
padding: 10px 12px;
border-bottom: 1px solid var(--dg-border);
text-align: start;
vertical-align: top;
}
.dg-wa-table th[b-xlk45qugyx] {
position: sticky;
top: 0;
z-index: 1;
background: var(--dg-surface);
color: var(--dg-text-dim);
font-weight: 600;
white-space: nowrap;
}
.dg-wa-table tbody tr:last-child td[b-xlk45qugyx] { border-bottom: 0; }
.dg-wa-table tbody tr:hover[b-xlk45qugyx] { background: var(--dg-nav-hover-bg); }
.dg-wa-table .num[b-xlk45qugyx] {
text-align: end;
font-variant-numeric: tabular-nums;
}
.dg-wa-table .nowrap[b-xlk45qugyx] { white-space: nowrap; }
.dg-wa-table .answer[b-xlk45qugyx] { min-width: 150px; }
.dg-wa-table .bad[b-xlk45qugyx] { color: #d03b3b; font-weight: 600; }
.dg-wa-link[b-xlk45qugyx] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 160px;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.dg-wa-link strong[b-xlk45qugyx] { text-decoration: underline; text-underline-offset: 3px; }
.dg-wa-link span[b-xlk45qugyx] { color: var(--dg-text-dim); font-size: .8rem; }
.dg-wa-answer[b-xlk45qugyx] {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 600;
}
.dg-wa-answer.bad[b-xlk45qugyx] { color: #d03b3b; }
.dg-wa-answer[b-xlk45qugyx] .rzi { font-size: 1rem; }
.dg-wa-detail-head[b-xlk45qugyx] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
margin-bottom: 12px;
}
.dg-wa-detail-head h2[b-xlk45qugyx] { margin: 0; }
.dg-wa-detail-head h2 span[b-xlk45qugyx] { color: var(--dg-text-dim); font-weight: 400; }
.dg-wa-back[b-xlk45qugyx] {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 6px 12px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: transparent;
color: var(--dg-text);
font: inherit;
font-size: .85rem;
cursor: pointer;
}
.dg-wa-back:hover[b-xlk45qugyx] { background: var(--dg-nav-hover-bg); }
.dg-wa-empty[b-xlk45qugyx] {
margin: 0;
padding: 32px 0;
text-align: center;
color: var(--dg-text-dim);
}
.dg-wa-skeleton[b-xlk45qugyx] {
display: block;
width: 60%;
height: 2rem;
border-radius: 8px;
background: var(--dg-nav-hover-bg);
animation: dg-wa-pulse-b-xlk45qugyx 1.2s ease-in-out infinite;
}
.dg-wa-skeleton.tall[b-xlk45qugyx] { width: 100%; height: 200px; }
@keyframes dg-wa-pulse-b-xlk45qugyx { 50% { opacity: .5; } }
@media (max-width: 600px) {
.dg-wa-card[b-xlk45qugyx] { padding: 14px 12px; }
.dg-wa-button[b-xlk45qugyx] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.dg-wa-skeleton[b-xlk45qugyx] { animation: none; }
}
/* /Pages/AdminComponenets/WhatsAppTemplatesPanel.razor.rz.scp.css */
.wa-tpl[b-d8na79tj9f] {
--wa-wall: #efeae2;
--wa-bubble: #ffffff;
--wa-bubble-text: #111b21;
--wa-meta: #667781;
--wa-link: #027eb5;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.dg-shell.dg-dark .wa-tpl[b-d8na79tj9f] {
--wa-wall: #0b141a;
--wa-bubble: #202c33;
--wa-bubble-text: #e9edef;
--wa-meta: #8696a0;
--wa-link: #53bdeb;
}
.wa-tpl-card[b-d8na79tj9f] {
min-width: 0;
padding: 18px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
color: var(--dg-text);
}
.wa-tpl-card h2[b-d8na79tj9f],
.wa-tpl-h2[b-d8na79tj9f] {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 600;
}
.wa-tpl-h2[b-d8na79tj9f] { margin-bottom: 12px; }
.wa-tpl-dim[b-d8na79tj9f] { color: var(--dg-text-dim); font-size: .82rem; }
.wa-tpl-notice[b-d8na79tj9f] {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border: 1px solid #c27c0e;
border-radius: 12px;
font-size: .9rem;
}
.wa-tpl-notice[b-d8na79tj9f] .rzi { color: #c27c0e; }
/* ---------- which template for which message ---------- */
.wa-tpl-use[b-d8na79tj9f] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 12px 24px;
margin-top: 12px;
}
.wa-tpl-use-row[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.wa-tpl-use-row label[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 2px;
}
.wa-tpl-warn[b-d8na79tj9f] {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
color: #c27c0e;
font-size: .8rem;
}
/* ---------- toolbar + messages ---------- */
.wa-tpl-toolbar[b-d8na79tj9f] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wa-tpl-button[b-d8na79tj9f] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 14px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: var(--dg-surface);
color: var(--dg-text);
font: inherit;
font-size: .9rem;
cursor: pointer;
}
.wa-tpl-button:hover:not(:disabled)[b-d8na79tj9f] { background: var(--dg-nav-hover-bg); }
.wa-tpl-button.primary[b-d8na79tj9f] {
border-color: var(--dg-nav-active-bg);
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
font-weight: 600;
}
.wa-tpl-button.primary:hover:not(:disabled)[b-d8na79tj9f] { background: var(--dg-nav-active-bg); box-shadow: var(--dg-shadow-3); }
.wa-tpl-button:disabled[b-d8na79tj9f] { opacity: .5; cursor: not-allowed; }
.wa-tpl-button:focus-visible[b-d8na79tj9f],
.wa-tpl-icon:focus-visible[b-d8na79tj9f],
.wa-tpl-fields button:focus-visible[b-d8na79tj9f],
.wa-tpl-form input:focus-visible[b-d8na79tj9f],
.wa-tpl-form select:focus-visible[b-d8na79tj9f],
.wa-tpl-form textarea:focus-visible[b-d8na79tj9f],
.wa-tpl-use-row select:focus-visible[b-d8na79tj9f] {
outline: 2px solid var(--dg-text);
outline-offset: 1px;
}
.wa-tpl-message[b-d8na79tj9f] {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: .9rem;
}
.wa-tpl-message.good[b-d8na79tj9f] .rzi { color: #0ca30c; }
.wa-tpl-message.bad[b-d8na79tj9f] .rzi { color: #d03b3b; }
/* ---------- editor ---------- */
.wa-tpl-editor[b-d8na79tj9f] {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr);
gap: 24px;
margin-top: 12px;
}
.wa-tpl-form[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.wa-tpl-form label[b-d8na79tj9f],
.wa-tpl-use-row select[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
font-size: .85rem;
}
.wa-tpl-form label > span[b-d8na79tj9f] { font-weight: 600; }
.wa-tpl-form label em[b-d8na79tj9f] { color: var(--dg-text-dim); font-style: normal; font-weight: 400; }
.wa-tpl-form small[b-d8na79tj9f] { color: var(--dg-text-dim); font-size: .75rem; }
.wa-tpl-form input:not([type="radio"])[b-d8na79tj9f],
.wa-tpl-form select[b-d8na79tj9f],
.wa-tpl-form textarea[b-d8na79tj9f],
.wa-tpl-use-row select[b-d8na79tj9f] {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: var(--dg-surface);
color: var(--dg-text);
font: inherit;
font-size: .9rem;
}
.wa-tpl-form textarea[b-d8na79tj9f] { resize: vertical; line-height: 1.45; }
.wa-tpl-grid3[b-d8na79tj9f] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
gap: 12px;
}
.wa-tpl-purpose[b-d8na79tj9f] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
}
.wa-tpl-purpose legend[b-d8na79tj9f] {
margin-bottom: 6px;
font-size: .85rem;
font-weight: 600;
}
.wa-tpl-purpose label[b-d8na79tj9f] {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 6px 12px;
border: 1px solid var(--dg-border);
border-radius: 999px;
cursor: pointer;
}
.wa-tpl-purpose label.on[b-d8na79tj9f] {
border-color: var(--dg-nav-active-bg);
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
}
.wa-tpl-purpose input[b-d8na79tj9f] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: currentColor; }
.wa-tpl-purpose label span[b-d8na79tj9f] { white-space: nowrap; }
.wa-tpl-purpose label:focus-within[b-d8na79tj9f] { outline: 2px solid var(--dg-text); outline-offset: 1px; }
.wa-tpl-fields[b-d8na79tj9f] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: -6px;
font-size: .8rem;
color: var(--dg-text-dim);
}
.wa-tpl-fields button[b-d8na79tj9f] {
min-height: 32px;
padding: 4px 10px;
border: 1px dashed var(--dg-border);
border-radius: 999px;
background: transparent;
color: var(--dg-text);
font: inherit;
cursor: pointer;
}
.wa-tpl-fields button:hover[b-d8na79tj9f] { background: var(--dg-nav-hover-bg); }
.wa-tpl-errors[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 10px 12px;
border: 1px solid #d03b3b;
border-radius: 10px;
list-style: none;
font-size: .85rem;
}
.wa-tpl-errors li[b-d8na79tj9f] { display: flex; align-items: center; gap: 6px; }
.wa-tpl-errors[b-d8na79tj9f] .rzi { color: #d03b3b; font-size: 1rem; }
.wa-tpl-actions[b-d8na79tj9f] { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---------- live preview, like on the phone ---------- */
.wa-tpl-preview[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.wa-tpl-phone[b-d8na79tj9f] {
position: sticky;
top: 12px;
display: flex;
flex-direction: column;
gap: 3px;
padding: 18px 14px;
border-radius: 14px;
background: var(--wa-wall);
}
.wa-tpl-bubble[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 92%;
padding: 8px 10px 6px;
border-radius: 8px 8px 8px 0;
background: var(--wa-bubble);
color: var(--wa-bubble-text);
font-size: .9rem;
line-height: 1.4;
box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
overflow-wrap: anywhere;
}
.wa-tpl-bubble .body[b-d8na79tj9f] { white-space: pre-wrap; }
.wa-tpl-bubble .foot[b-d8na79tj9f] { color: var(--wa-meta); font-size: .8rem; }
.wa-tpl-bubble .time[b-d8na79tj9f] { align-self: flex-end; color: var(--wa-meta); font-size: .7rem; }
.wa-tpl-pbutton[b-d8na79tj9f] {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
max-width: 92%;
padding: 9px;
border-radius: 8px;
background: var(--wa-bubble);
color: var(--wa-link);
font-size: .88rem;
font-weight: 500;
box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-tpl-pbutton[b-d8na79tj9f] .rzi { font-size: 1.05rem; }
/* ---------- template list ---------- */
.wa-tpl-list[b-d8na79tj9f] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
gap: 12px;
}
.wa-tpl-item[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
padding: 14px 16px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
}
.wa-tpl-item header[b-d8na79tj9f],
.wa-tpl-item footer[b-d8na79tj9f] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.wa-tpl-item footer[b-d8na79tj9f] { align-items: center; margin-top: auto; }
.wa-tpl-item-title[b-d8na79tj9f] {
display: flex;
flex-direction: column;
min-width: 0;
}
.wa-tpl-item-title strong[b-d8na79tj9f] { overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.wa-tpl-status[b-d8na79tj9f] {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .8rem;
font-weight: 600;
}
.wa-tpl-status[b-d8na79tj9f] .rzi { font-size: 1.05rem; }
.wa-tpl-status.good[b-d8na79tj9f] .rzi { color: #0ca30c; }
.wa-tpl-status.bad[b-d8na79tj9f] .rzi { color: #d03b3b; }
.wa-tpl-status.wait[b-d8na79tj9f] .rzi { color: #c27c0e; }
.wa-tpl-tags[b-d8na79tj9f] { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-tpl-tag[b-d8na79tj9f] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 10px;
border-radius: 999px;
background: var(--dg-nav-hover-bg);
font-size: .75rem;
}
.wa-tpl-tag.inuse[b-d8na79tj9f] {
background: var(--dg-nav-active-bg);
color: var(--dg-nav-active-fg);
font-weight: 600;
}
.wa-tpl-tag.button[b-d8na79tj9f] { border: 1px solid var(--dg-border); background: transparent; }
.wa-tpl-tag[b-d8na79tj9f] .rzi { font-size: .95rem; }
.wa-tpl-item-body[b-d8na79tj9f] {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 180px;
overflow: auto;
padding: 10px;
border-radius: 10px;
background: var(--dg-nav-hover-bg);
font-size: .85rem;
line-height: 1.4;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.wa-tpl-reason[b-d8na79tj9f] {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
color: #d03b3b;
font-size: .8rem;
}
.wa-tpl-icon[b-d8na79tj9f] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--dg-text-dim);
cursor: pointer;
}
.wa-tpl-icon:hover:not(:disabled)[b-d8na79tj9f] { background: var(--dg-nav-hover-bg); color: #d03b3b; }
.wa-tpl-icon:disabled[b-d8na79tj9f] { opacity: .4; cursor: not-allowed; }
.wa-tpl-empty[b-d8na79tj9f] {
margin: 0;
padding: 28px 0;
text-align: center;
color: var(--dg-text-dim);
}
.wa-tpl-skeleton[b-d8na79tj9f] {
height: 180px;
border-radius: 14px;
background: var(--dg-nav-hover-bg);
animation: wa-tpl-pulse-b-d8na79tj9f 1.2s ease-in-out infinite;
}
@keyframes wa-tpl-pulse-b-d8na79tj9f { 50% { opacity: .5; } }
@media (max-width: 900px) {
.wa-tpl-editor[b-d8na79tj9f] { grid-template-columns: minmax(0, 1fr); }
.wa-tpl-phone[b-d8na79tj9f] { position: static; }
}
@media (max-width: 600px) {
.wa-tpl-card[b-d8na79tj9f] { padding: 14px 12px; }
.wa-tpl-toolbar .wa-tpl-button[b-d8na79tj9f] { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.wa-tpl-skeleton[b-d8na79tj9f] { animation: none; }
}
/* /Pages/AiFormAssistant.razor.rz.scp.css */
.ai-assist[b-3g3oq9jdrt] {
margin: 0 0 20px;
border: 1px solid var(--dg-border);
border-radius: 14px;
background: var(--dg-surface);
color: var(--dg-text);
overflow: hidden;
}
.ai-assist.open[b-3g3oq9jdrt] {
border-color: #7c5cff;
box-shadow: 0 0 0 3px rgba(124, 92, 255, .12);
}
.ai-assist-head[b-3g3oq9jdrt] {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 12px 16px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: 600;
text-align: start;
cursor: pointer;
}
.ai-assist-head[b-3g3oq9jdrt] .rzi { color: #7c5cff; }
.ai-assist-head[b-3g3oq9jdrt] .ai-assist-chevron { margin-inline-start: auto; color: var(--dg-text-dim); }
.ai-assist-head:hover[b-3g3oq9jdrt] { background: var(--dg-nav-hover-bg); }
.ai-assist-head:focus-visible[b-3g3oq9jdrt] { outline: 2px solid var(--dg-text); outline-offset: -2px; }
.ai-assist-body[b-3g3oq9jdrt] {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 16px 16px;
}
.ai-assist-hint[b-3g3oq9jdrt] {
margin: 0;
color: var(--dg-text-dim);
font-size: .88rem;
}
.ai-assist textarea[b-3g3oq9jdrt] {
width: 100%;
min-height: 140px;
padding: 10px 12px;
border: 1px solid var(--dg-border);
border-radius: 10px;
background: var(--dg-surface);
color: var(--dg-text);
font: inherit;
font-size: .92rem;
line-height: 1.45;
resize: vertical;
}
.ai-assist textarea:focus-visible[b-3g3oq9jdrt] { outline: 2px solid #7c5cff; outline-offset: 1px; }
.ai-assist-actions[b-3g3oq9jdrt] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.ai-assist-button[b-3g3oq9jdrt] {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 18px;
border: 0;
border-radius: 10px;
background: #7c5cff;
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.ai-assist-button:disabled[b-3g3oq9jdrt] { opacity: .55; cursor: not-allowed; }
.ai-assist-button:focus-visible[b-3g3oq9jdrt] { outline: 2px solid var(--dg-text); outline-offset: 2px; }
.ai-assist-link[b-3g3oq9jdrt] {
border: 0;
background: none;
color: var(--dg-text-dim);
font: inherit;
font-size: .88rem;
text-decoration: underline;
cursor: pointer;
}
.ai-assist-spinner[b-3g3oq9jdrt] {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, .45);
border-top-color: #fff;
border-radius: 50%;
animation: ai-spin-b-3g3oq9jdrt .8s linear infinite;
}
@keyframes ai-spin-b-3g3oq9jdrt { to { transform: rotate(360deg); } }
.ai-assist-result[b-3g3oq9jdrt] {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 12px 14px;
border-radius: 10px;
font-size: .9rem;
}
.ai-assist-result p[b-3g3oq9jdrt] { display: flex; align-items: center; gap: 8px; margin: 0; }
.ai-assist-result.good[b-3g3oq9jdrt] { background: rgba(12, 163, 12, .08); }
.ai-assist-result.warn[b-3g3oq9jdrt] { background: rgba(194, 124, 14, .1); }
.ai-assist-result.bad[b-3g3oq9jdrt] { flex-direction: row; align-items: center; gap: 8px; background: rgba(208, 59, 59, .08); }
.ai-assist-result.good[b-3g3oq9jdrt] .rzi { color: #0ca30c; }
.ai-assist-result.warn[b-3g3oq9jdrt] .rzi { color: #c27c0e; }
.ai-assist-result.bad[b-3g3oq9jdrt] .rzi { color: #d03b3b; }
.ai-assist-missing-title[b-3g3oq9jdrt] { font-weight: 600; }
.ai-assist-missing[b-3g3oq9jdrt] {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.ai-assist-missing li[b-3g3oq9jdrt] {
padding: 2px 10px;
border: 1px solid #c27c0e;
border-radius: 999px;
font-size: .8rem;
}
.ai-assist-check[b-3g3oq9jdrt] { color: var(--dg-text-dim); font-size: .82rem; }
@media (prefers-reduced-motion: reduce) {
.ai-assist-spinner[b-3g3oq9jdrt] { animation: none; }
}
/* /Pages/AskForDevisComponent.razor.rz.scp.css */
/* Allow step headers to wrap nicely */
[b-grx44969d9] .rz-steps .rz-steps-items {
flex-wrap: wrap;
row-gap: .5rem;
}
/* Each step header: reduce minimum width so more fit per row */
[b-grx44969d9] .rz-steps .rz-steps-item {
min-width: 140px;
}
/* Title text tweaks */
[b-grx44969d9] .rz-steps .rz-steps-title {
white-space: normal; /* allow wrapping */
line-height: 1.25;
word-break: break-word; /* break long words if needed */
}
/* Icon + title alignment */
[b-grx44969d9] .rz-steps .rz-steps-item .rz-steps-link {
display: flex;
align-items: center;
gap: .4rem;
}
/* Mobile: compact layout */
@media (max-width: 640px) {
[b-grx44969d9] .rz-steps .rz-steps-items {
justify-content: center;
}
[b-grx44969d9] .rz-steps .rz-steps-item {
flex: 1 1 45%; /* two columns */
max-width: 48%;
}
[b-grx44969d9] .rz-steps .rz-steps-title {
font-size: .9rem;
}
}
/* Very small screens: stack vertically for maximum clarity */
@media (max-width: 420px) {
[b-grx44969d9] .rz-steps .rz-steps-items {
flex-direction: column;
align-items: stretch;
}
[b-grx44969d9] .rz-steps .rz-steps-item {
max-width: 100%;
flex: 1 1 auto;
}
[b-grx44969d9] .rz-steps .rz-steps-link {
padding: .5rem .75rem;
}
[b-grx44969d9] .rz-steps .rz-steps-title {
font-size: .95rem;
}
}
/* /Pages/ClientComponenets/BookingProjectAcceptComponent.razor.rz.scp.css */
/* Responsive scroll-snap carousel (pure CSS) */
.hostess-carousel[b-k0zjnhipc9] {
--gap: 1rem;
--columns: 2; /* default small screens: 2 per view */
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.hostess-carousel .track[b-k0zjnhipc9] {
display: flex;
gap: var(--gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-bottom: .5rem;
margin: 0 auto;
}
/* Hide scrollbar (optional) */
.hostess-carousel .track[b-k0zjnhipc9]::-webkit-scrollbar {
height: 8px;
}
.hostess-carousel .track[b-k0zjnhipc9]::-webkit-scrollbar-thumb {
background: var(--rz-secondary);
border-radius: 4px;
}
.hostess-carousel .track[b-k0zjnhipc9]::-webkit-scrollbar-track {
background: transparent;
}
/* Each item takes 1/N of the viewport width minus gaps */
.hostess-carousel .item[b-k0zjnhipc9] {
scroll-snap-align: start;
flex: 0 0 calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
display: flex; /* allow the card to stretch full height */
}
.hostess-card[b-k0zjnhipc9] {
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* Keep picture and name stacked nicely */
.hostess-head[b-k0zjnhipc9] {
gap: .75rem;
flex-direction: column;
}
/* Breakpoints: 2 / 3 / 4 cards per view */
@media (min-width: 768px) {
.hostess-carousel[b-k0zjnhipc9] {
--columns: 3;
}
}
@media (min-width: 1200px) {
.hostess-carousel[b-k0zjnhipc9] {
--columns: 4;
}
}
/* Minor card polish for small screens */
@media (max-width: 479.98px) {
.hostess-head .rz-image[b-k0zjnhipc9] {
width: 8rem !important;
height: 8rem !important;
}
}
/* /Pages/ClientComponenets/IndexClientComponent.razor.rz.scp.css */
.dashboard-container[b-28fqftaoos] {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
.dashboard-item[b-28fqftaoos] {
box-sizing: border-box;
padding: 10px;
}
.box-container[b-28fqftaoos] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px; /* Adjust the gap between boxes as needed */
height: 100%; /* Ensure the container takes the full height of the parent */
}
.box[b-28fqftaoos] {
/* Adjust the background color as needed */
border: 1px solid #ccc; /* Adjust the border as needed */
padding: 20px; /* Adjust the padding as needed */
text-align: center; /* Center the text inside the box */
/* Adjust the border radius as needed */
}
.box1[b-28fqftaoos] {
grid-area: box1; /* Assign to the first area */
}
.box2[b-28fqftaoos] {
grid-area: box2; /* Assign to the second area */
}
.box3[b-28fqftaoos] {
grid-area: box3; /* Assign to the third area */
}
.dashboard-table[b-28fqftaoos] {
grid-column: span 2;
box-sizing: border-box;
padding: 10px;
}
@media (max-width: 768px) {
.dashboard-container[b-28fqftaoos] {
grid-template-columns: 1fr;
}
.box-container[b-28fqftaoos] {
grid-template-columns: 1fr; /* Single column layout for smaller screens */
grid-template-areas:
"box1"
"box2"
"box3"; /* Stack all boxes vertically */
}
.dashboard-item[b-28fqftaoos] {
flex: 1 1 100%;
}
}
/* /Pages/ClientComponenets/PageShowHostessComponent.razor.rz.scp.css */
.profile-image-container[b-smua1ne8xn] {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
display: inline-block;
}
.profile-image[b-smua1ne8xn] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid black;
}
@media (max-width: 600px) {
.profile-image-container[b-smua1ne8xn] {
width: 120px;
height: 120px;
}
}
@media (max-width: 400px) {
.profile-image-container[b-smua1ne8xn] {
width: 80px;
height: 80px;
}
}
.gallery[b-smua1ne8xn] {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next row */
gap: 1rem; /* Space between items */
justify-content: center; /* Centers items horizontally */
}
.dropzone-container[b-smua1ne8xn] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
padding: 1rem;
}
.dropzone-item[b-smua1ne8xn] {
display: flex;
justify-content: center;
align-items: center;
}
.dropzone[b-smua1ne8xn] {
width: 100%;
height: 400px;
min-height: 400px;
}
img[b-smua1ne8xn] {
width: 100%; /* Makes images responsive */
height: auto; /* Preserves aspect ratio */
border-radius: 5px; /* Optional: Matches rounded corners */
}
@media (max-width: 768px) {
.responsive-column[b-smua1ne8xn] {
width: 100% !important;
margin: 0 !important;
}
.responsive-dropzone[b-smua1ne8xn] {
width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
}
}
.background-image-card[b-smua1ne8xn] {
background-size: cover;
background-position: center;
height: 100%;
}
.gallery-item[b-smua1ne8xn] {
display: flex;
align-items: center;
justify-content: center;
}
/* /Pages/ConversationComponenets/IndexConversationComponent.razor.rz.scp.css */
/* =====================================================================
IndexConversationComponent.razor.css · DGbooking chat shell
Theme-aware (light + dark) via --rz-* tokens. Same class names/markup.
===================================================================== */
.background-indexconv[b-flupm6jj8l] {
display: flex;
background-color: var(--rz-base-background-color);
border-radius: 18px;
height: 86vh;
border: 1px solid var(--rz-border-color, var(--rz-base-300));
box-shadow: var(--rz-shadow-2);
overflow: hidden;
}
.listconv[b-flupm6jj8l] {
flex: 0 0 22%; /* conversation list rail */
min-width: 280px;
max-width: 24rem;
display: flex;
flex-direction: column;
min-height: 0;
}
.conv[b-flupm6jj8l] {
flex: 1; /* message thread takes the rest */
min-width: 0;
display: flex;
flex-direction: column;
}
/* Header toggle button (kept for parity with markup) */
.buttondetail[b-flupm6jj8l] {
background-color: transparent;
padding: 0.5rem 1rem;
font-size: 1.2rem;
border-radius: 12px 12px 0 0;
border: 0;
color: var(--rz-text-color);
}
.buttondetail i[b-flupm6jj8l] {
font-size: 1.5rem;
margin-right: 1rem;
color: var(--rz-text-secondary-color, var(--rz-base-500));
cursor: pointer;
transition: color 200ms cubic-bezier(.2,0,0,1);
}
.buttondetail i:hover[b-flupm6jj8l] {
color: var(--rz-primary);
}
.desktop-layout[b-flupm6jj8l] {
display: block;
}
.mobile-layout[b-flupm6jj8l] {
display: none;
}
@media (max-width: 768px) {
.desktop-layout[b-flupm6jj8l] {
display: none;
}
.mobile-layout[b-flupm6jj8l] {
display: block;
}
}
/* /Pages/ConversationComponenets/ListConversationComponent.razor.rz.scp.css */
/* =====================================================================
ListConversationComponent.razor.css · DGbooking
Conversation list rail. Theme-aware (light + dark) via --rz-* tokens.
Same class names/markup preserved.
===================================================================== */
.contacts-bg[b-cw92jzs2ee] {
height: 86vh;
width: 100%;
max-width: 24rem;
overflow-y: auto;
box-sizing: border-box;
border-radius: 18px 0 0 18px;
border-right: 1px solid var(--rz-border-color, var(--rz-base-300));
background-color: var(--rz-base-background-color);
color: var(--rz-text-color);
transition: transform 400ms cubic-bezier(.2,0,0,1);
}
@media (max-width: 768px) {
.contacts-bg[b-cw92jzs2ee] {
max-width: 100%;
border-radius: 0;
border-right: none;
border-bottom: none;
height: 100%;
}
}
/* ---- Header ---- */
.contacts-head[b-cw92jzs2ee] {
position: sticky;
top: 0;
z-index: 2;
background-color: var(--rz-base-background-color);
height: auto;
display: flex;
align-items: center;
padding: 1.25rem 1.25rem 0.75rem;
border-bottom: 1px solid var(--rz-border-color, var(--rz-base-200));
}
.contacts-head h2[b-cw92jzs2ee],
.contacts-head label[b-cw92jzs2ee] {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--rz-text-color) !important;
margin: 0 !important;
letter-spacing: -.3px;
}
/* ---- Search ---- */
.search[b-cw92jzs2ee] {
padding: 0.75rem 1rem;
}
.search .search-container[b-cw92jzs2ee] {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--rz-input-background-color, var(--rz-base-100));
border: 1px solid var(--rz-border-color, var(--rz-base-300));
border-radius: 999px;
box-shadow: none;
padding: 9px 16px;
width: 100%;
transition: border-color .2s cubic-bezier(.2,0,0,1), box-shadow .2s cubic-bezier(.2,0,0,1);
}
.search .search-container:focus-within[b-cw92jzs2ee] {
border-color: var(--rz-primary);
box-shadow: 0 0 0 3px var(--rz-primary-lighter);
}
.search .search-container .search-input[b-cw92jzs2ee] {
border: none;
outline: none;
flex-grow: 1;
font-size: 0.95rem;
background-color: transparent;
color: var(--rz-text-color);
}
.search .search-container button[b-cw92jzs2ee] {
border: none;
width: auto;
background-color: transparent;
color: var(--rz-text-secondary-color, var(--rz-base-500));
cursor: pointer;
}
.search-input[b-cw92jzs2ee]::placeholder {
color: var(--rz-text-tertiary-color, var(--rz-base-400));
}
/* ---- Contact rows ---- */
.contact[b-cw92jzs2ee],
.selected[b-cw92jzs2ee] {
position: relative;
margin: 0.25rem 0.5rem;
padding: 0 1rem 0 1rem;
min-height: 4.25rem;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 14px;
border-bottom: none;
cursor: pointer;
transition: background-color .2s cubic-bezier(.2,0,0,1), transform .15s cubic-bezier(.2,0,0,1);
}
.contact:hover[b-cw92jzs2ee] {
background-color: var(--rz-primary-lighter);
transform: translateX(2px);
}
/* Selected: brand navy pill with accent bar */
.selected[b-cw92jzs2ee] {
background-color: var(--rz-primary);
color: var(--rz-on-primary, #fff);
box-shadow: var(--rz-shadow-1);
}
.selected[b-cw92jzs2ee]::before {
content: "";
position: absolute;
left: -0.5rem;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 56%;
border-radius: 999px;
background: var(--rz-secondary);
}
.selected .name[b-cw92jzs2ee],
.selected .message[b-cw92jzs2ee],
.selected .seen[b-cw92jzs2ee] {
color: var(--rz-on-primary, #fff) !important;
}
.selected .message[b-cw92jzs2ee] {
opacity: .85;
}
.contact .pic[b-cw92jzs2ee] {
position: absolute;
left: 0;
}
.contact .name[b-cw92jzs2ee],
.selected .name[b-cw92jzs2ee] {
font-weight: 600;
margin-bottom: 0.15rem;
color: var(--rz-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact .message[b-cw92jzs2ee],
.contact .seen[b-cw92jzs2ee] {
font-size: 0.85rem;
color: var(--rz-text-secondary-color, var(--rz-base-500));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact .message i[b-cw92jzs2ee],
.selected .message i[b-cw92jzs2ee] {
margin-right: .4rem;
opacity: .7;
}
/* Unread badge */
.contact .badge[b-cw92jzs2ee] {
box-sizing: border-box;
position: absolute;
min-width: 1.4rem;
height: 1.4rem;
text-align: center;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.4rem;
padding: 0 .35rem;
border-radius: 999px;
top: 0.6rem;
right: 0.8rem;
left: auto;
background: var(--rz-danger);
color: #fff;
}
.desktop-layout[b-cw92jzs2ee] {
display: block;
}
.mobile-layout[b-cw92jzs2ee] {
display: none;
}
@media (max-width: 768px) {
.desktop-layout[b-cw92jzs2ee] {
display: none;
}
.mobile-layout[b-cw92jzs2ee] {
display: block;
}
}
/* /Pages/ConversationComponenets/MessageConversationComponent.razor.rz.scp.css */
/* =====================================================================
MessageConversationComponent.razor.css · DGbooking
Message thread. Theme-aware (light + dark) via --rz-* tokens.
Same class names / markup preserved (.chat, .messages, .message,
.message.parker = my messages, .message.stark = others, .input, etc.)
===================================================================== */
.chat[b-8hez98dje2] {
height: 86vh;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 2;
box-sizing: border-box;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
background: var(--rz-base-background-color);
min-width: 0;
}
/* ---- Top bar ---- */
.chat .contact.bar[b-8hez98dje2] {
background-color: var(--rz-base-background-color);
margin: 0;
box-sizing: border-box;
height: auto;
border-bottom: 1px solid var(--rz-border-color, var(--rz-base-200));
padding: 0.85rem 1.25rem;
border-top-right-radius: 18px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 3;
}
.chat .contact.bar .left-section[b-8hez98dje2] {
display: flex;
flex-direction: column;
}
.chat .contact.bar .col.name[b-8hez98dje2] {
margin-bottom: 0;
cursor: pointer;
}
.chat .contact.bar .col.name p[b-8hez98dje2] {
font-size: 0.7rem;
color: var(--rz-text-secondary-color, var(--rz-base-500));
}
.chat .contact.bar .users-badge[b-8hez98dje2] {
display: flex;
flex-wrap: wrap;
gap: .25rem;
}
.chat .header[b-8hez98dje2] {
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
margin-left: auto;
}
/* ---- Message scroll area ---- */
.chat .messages[b-8hez98dje2] {
padding: 1.25rem 1.25rem 0.5rem;
background: var(--rz-body-background-color);
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column-reverse;
box-shadow: inset 0 1.5rem 1.5rem -1.75rem rgba(0,0,0,0.06), inset 0 -1.5rem 1.5rem -1.75rem rgba(0,0,0,0.06);
}
.chat .messages .time[b-8hez98dje2] {
font-size: 0.75rem;
background: var(--rz-base-200);
padding: 0.25rem 0.9rem;
border-radius: 999px;
color: var(--rz-text-secondary-color, var(--rz-base-600));
width: fit-content;
margin: 0.5rem auto;
}
.chat i[b-8hez98dje2] {
font-size: 1.4rem;
margin-right: 1rem;
color: var(--rz-text-secondary-color, var(--rz-base-500));
cursor: pointer;
transition: color 200ms cubic-bezier(.2,0,0,1);
}
/* ---- Bubbles ---- */
.chat .messages .message[b-8hez98dje2] {
box-sizing: border-box;
padding: 0.6rem 0.95rem;
margin: 0.4rem 1rem;
background: var(--rz-base-background-color);
color: var(--rz-text-color);
border-radius: 16px 16px 16px 4px;
width: fit-content;
max-width: 68%;
box-shadow: var(--rz-shadow-1);
line-height: 1.45;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.chat .messages .message p[b-8hez98dje2] {
font-size: 0.72rem;
font-weight: 700;
color: var(--rz-primary);
margin: 0 0 0.15rem;
}
/* My messages (parker) = brand navy, right aligned */
.chat .messages .message.parker[b-8hez98dje2] {
margin: 0.4rem 1rem 0.4rem auto;
border-radius: 16px 16px 4px 16px;
background: var(--rz-primary);
color: var(--rz-on-primary, #fff);
}
.chat .messages .message.parker a[b-8hez98dje2],
.chat .messages .message.parker p[b-8hez98dje2] {
color: var(--rz-on-primary, #fff) !important;
}
.chat .messages .message a[b-8hez98dje2] {
color: var(--rz-primary);
font-weight: 600;
}
/* Typing indicator */
.chat .messages .message .typing[b-8hez98dje2] {
display: inline-block;
width: 0.6rem;
height: 0.6rem;
margin-right: 0.1rem;
box-sizing: border-box;
background: var(--rz-base-400);
border-radius: 50%;
}
.chat .messages .message .typing.typing-1[b-8hez98dje2] {
animation: typing-b-8hez98dje2 3s infinite;
}
.chat .messages .message .typing.typing-2[b-8hez98dje2] {
animation: typing-b-8hez98dje2 3s 250ms infinite;
}
.chat .messages .message .typing.typing-3[b-8hez98dje2] {
animation: typing-b-8hez98dje2 3s 500ms infinite;
}
@keyframes typing-b-8hez98dje2 {
0%, 75%, 100% {
transform: translate(0, 0.25rem) scale(0.9);
opacity: 0.5;
}
25% {
transform: translate(0, -0.25rem) scale(1);
opacity: 1;
}
}
/* ---- Composer ---- */
.chat .input[b-8hez98dje2] {
box-sizing: border-box;
flex-basis: 4.25rem;
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
gap: .5rem;
border-top: 1px solid var(--rz-border-color, var(--rz-base-200));
background: var(--rz-base-background-color);
border-bottom-right-radius: 18px;
}
.chat .details[b-8hez98dje2] {
box-sizing: border-box;
flex-basis: 4rem;
flex-shrink: 0;
display: flex;
align-items: center;
}
.chat .input i[b-8hez98dje2] {
font-size: 1.4rem;
margin-right: 0.25rem;
color: var(--rz-text-secondary-color, var(--rz-base-500));
cursor: pointer;
transition: color 200ms cubic-bezier(.2,0,0,1);
}
.chat .input i:hover[b-8hez98dje2] {
color: var(--rz-primary);
}
.chat .input input[b-8hez98dje2],
.chat .input textarea[b-8hez98dje2],
.chat .input audio[b-8hez98dje2] {
border: 1px solid var(--rz-border-color, var(--rz-base-300));
background-color: var(--rz-input-background-color, var(--rz-base-100));
color: var(--rz-text-color);
padding: 0.6rem 1rem;
margin: 0;
border-radius: 14px;
flex-grow: 2;
box-shadow: none;
font-family: inherit;
font-weight: 400;
letter-spacing: 0.01em;
resize: none;
transition: border-color .2s cubic-bezier(.2,0,0,1), box-shadow .2s cubic-bezier(.2,0,0,1);
}
.chat .input input:focus[b-8hez98dje2],
.chat .input textarea:focus[b-8hez98dje2] {
outline: none;
border-color: var(--rz-primary);
box-shadow: 0 0 0 3px var(--rz-primary-lighter);
}
.chat .input input[b-8hez98dje2]::placeholder,
.chat .input textarea[b-8hez98dje2]::placeholder {
color: var(--rz-text-tertiary-color, var(--rz-base-400));
}
/* Send button affordance on the paper-plane */
.chat .input .far.fa-paper-plane[b-8hez98dje2],
.chat .input .fa-paper-plane[b-8hez98dje2] {
color: var(--rz-primary);
font-size: 1.5rem;
}
.chat .input .fa-paper-plane:hover[b-8hez98dje2] {
color: var(--rz-primary-dark);
transform: translateY(-1px);
}
/* Online pulse */
.animated-circle[b-8hez98dje2] {
color: var(--rz-success);
font-size: 24px;
position: absolute;
animation: moveCircle-b-8hez98dje2 5s linear infinite;
}
@keyframes moveCircle-b-8hez98dje2 {
0% {
left: 0;
}
100% {
left: calc(100% - 24px);
}
}
/* button-6 (attachment/secondary) themed */
.button-6[b-8hez98dje2] {
background-color: var(--rz-base-background-color);
border: 1px solid var(--rz-border-color, var(--rz-base-300));
border-radius: 10px;
box-shadow: var(--rz-shadow-1);
box-sizing: border-box;
color: var(--rz-text-color);
justify-content: center;
align-items: center;
padding-top: 0.3rem;
transition: box-shadow .2s cubic-bezier(.2,0,0,1), border-color .2s cubic-bezier(.2,0,0,1), transform .2s cubic-bezier(.2,0,0,1);
}
.button-6:hover[b-8hez98dje2], .button-6:focus[b-8hez98dje2] {
border-color: var(--rz-primary);
box-shadow: var(--rz-shadow-2);
color: var(--rz-primary);
}
.button-6:hover[b-8hez98dje2] {
transform: translateY(-1px);
}
.button-6:active[b-8hez98dje2] {
background-color: var(--rz-base-100);
box-shadow: var(--rz-shadow-1);
transform: translateY(0);
}
.button-6 i[b-8hez98dje2] {
padding: 0;
margin: 0;
color: inherit;
}
/* /Pages/ForgetPasswordComponent.razor.rz.scp.css */
.background-container[b-sdr6b480bv] {
background-image: url('Background login.jpg');
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.header-logo-container[b-sdr6b480bv] {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
background-color: #F6F5FF
}
.side-image-container[b-sdr6b480bv] {
position: absolute;
right: 0;
bottom: 0;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 800px) {
.side-image-container[b-sdr6b480bv] {
display: none;
}
}
.side-image[b-sdr6b480bv] {
height: 100%;
width: auto;
}
.content-container[b-sdr6b480bv] {
width: 100%;
max-width: 600px;
z-index: 1;
}
.steps-container[b-sdr6b480bv] {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 600px;
height: 600px;
margin: auto;
}
.steps-header[b-sdr6b480bv] {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.step-number[b-sdr6b480bv] {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
}
.step-number.completed[b-sdr6b480bv] {
border-color: rgb(204, 194, 143);
background-color: rgb(204, 194, 143);
color: white;
}
.step-line[b-sdr6b480bv] {
flex-grow: 1;
height: 4px;
background-color: #ccc;
margin: 0 5px;
border-radius: 2px;
}
.step-line.completed[b-sdr6b480bv] {
background-color: rgb(204, 194, 143);
}
.step[b-sdr6b480bv] {
padding: 1rem;
}
.transparent-card[b-sdr6b480bv] {
background-color: transparent; /* Make the card background transparent */
backdrop-filter: blur(20px); /* Apply blur effect to the card background */
-webkit-backdrop-filter: blur(20px); /* Apply blur effect for Safari */
width: 100%;
max-width: 600px;
}
/* /Pages/HostessComponenets/BookingPageComponent.razor.rz.scp.css */
.profile-image-container[b-wo6w7ghyne] {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
display: inline-block;
}
.profile-image[b-wo6w7ghyne] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid black;
}
@media (max-width: 600px) {
.profile-image-container[b-wo6w7ghyne] {
width: 120px;
height: 120px;
}
}
@media (max-width: 400px) {
.profile-image-container[b-wo6w7ghyne] {
width: 80px;
height: 80px;
}
}
.gallery[b-wo6w7ghyne] {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next row */
gap: 1rem; /* Space between items */
justify-content: center; /* Centers items horizontally */
}
.dropzone-container[b-wo6w7ghyne] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
padding: 1rem;
}
.dropzone-item[b-wo6w7ghyne] {
display: flex;
justify-content: center;
align-items: center;
}
.dropzone[b-wo6w7ghyne] {
width: 100%;
height: 400px;
min-height: 400px;
}
img[b-wo6w7ghyne] {
width: 100%; /* Makes images responsive */
height: auto; /* Preserves aspect ratio */
border-radius: 5px; /* Optional: Matches rounded corners */
}
@media (max-width: 768px) {
.responsive-column[b-wo6w7ghyne] {
width: 100% !important;
margin: 0 !important;
}
.responsive-dropzone[b-wo6w7ghyne] {
width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
}
}
.background-image-card[b-wo6w7ghyne] {
background-size: cover;
background-position: center;
height: 100%;
}
.gallery-item[b-wo6w7ghyne] {
display: flex;
align-items: center;
justify-content: center;
}
/* /Pages/HostessComponenets/HostessAgenderComponent.razor.rz.scp.css */
/* ================= Design tokens =================
All colors come from the Radzen Material3 theme (css/themes/light.css
and css/themes/dark.css) so the calendar follows light / dark mode. */
.dg-cal[b-34a3olrfj9] {
--surface: var(--rz-base-background-color); /* card / cell surface */
--panel: var(--rz-body-background-color); /* subtle contrast strips */
--border: var(--rz-base-300); /* structural dividers (flips per theme) */
--line: var(--rz-base-300); /* grid lines */
--text: var(--rz-text-color);
--muted: var(--rz-text-secondary-color);
--accent: var(--rz-primary);
--on-accent: var(--rz-on-primary);
--today: var(--rz-primary-lighter); /* primary state layer */
--hover: color-mix(in srgb, var(--rz-text-color) 7%, transparent);
--radius: 14px;
--shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .10);
display: flex;
flex-direction: column;
height: min(78vh, 880px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
color: var(--text);
margin: 10px 0;
}
/* ================= Toolbar ================= */
.cal-toolbar[b-34a3olrfj9] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.cal-nav[b-34a3olrfj9] {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.nav-arrows[b-34a3olrfj9] { display: inline-flex; gap: 4px; }
.nav-btn[b-34a3olrfj9] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 38px;
padding: 0 14px;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, transform .05s;
}
.nav-btn:hover[b-34a3olrfj9] { background: var(--hover); }
.nav-btn:active[b-34a3olrfj9] { transform: translateY(1px); }
.icon-btn[b-34a3olrfj9] { width: 38px; padding: 0; color: var(--muted); }
.cal-title[b-34a3olrfj9] {
margin: 0 0 0 4px;
font-size: 20px;
font-weight: 700;
letter-spacing: -.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
color: var(--text);
}
.cal-views[b-34a3olrfj9] {
display: inline-flex;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 4px;
gap: 2px;
}
.view-btn[b-34a3olrfj9] {
border: none;
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 600;
padding: 8px 14px;
border-radius: 9px;
cursor: pointer;
transition: all .15s;
}
.view-btn:hover[b-34a3olrfj9] { color: var(--text); }
.view-btn.active[b-34a3olrfj9] {
background: var(--surface);
color: var(--accent);
box-shadow: 0 0 0 1px var(--border);
}
/* ================= Body ================= */
.cal-body[b-34a3olrfj9] {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
background: var(--surface);
}
.cal-body.is-month[b-34a3olrfj9] { overflow: hidden; }
/* ================= Month ================= */
.month[b-34a3olrfj9] { display: flex; flex-direction: column; height: 100%; }
.month-weekdays[b-34a3olrfj9] {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
border-bottom: 1px solid var(--border);
background: var(--panel);
}
.wd[b-34a3olrfj9] {
padding: 10px 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
color: var(--muted);
text-align: right;
}
.month-grid[b-34a3olrfj9] {
flex: 1;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
min-height: 0;
}
.day-cell[b-34a3olrfj9] {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 0;
overflow: hidden;
cursor: pointer;
transition: background .12s;
}
.day-cell:hover[b-34a3olrfj9] { background: var(--hover); }
.day-cell.out[b-34a3olrfj9] { background: color-mix(in srgb, var(--rz-text-color) 4%, transparent); }
.day-cell.out .day-num[b-34a3olrfj9] { color: var(--muted); opacity: .6; }
.day-top[b-34a3olrfj9] { display: flex; justify-content: flex-end; }
.day-num[b-34a3olrfj9] {
font-size: 13px;
font-weight: 600;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--text);
}
.day-cell.today .day-num[b-34a3olrfj9] {
background: var(--accent);
color: var(--on-accent);
}
.day-events[b-34a3olrfj9] {
display: flex;
flex-direction: column;
gap: 3px;
overflow: hidden;
min-height: 0;
}
.chip[b-34a3olrfj9] {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
border: none;
text-align: left;
background: var(--rz-base-200); /* fallback when color-mix is unsupported */
background: color-mix(in srgb, var(--c) 20%, var(--surface));
color: var(--text);
border-left: 3px solid var(--c);
border-radius: 6px;
padding: 3px 7px;
font-size: 12px;
line-height: 1.3;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
transition: filter .12s;
}
.chip:hover[b-34a3olrfj9] { filter: brightness(1.06); }
.chip-dot[b-34a3olrfj9] { display: none; }
.chip-time[b-34a3olrfj9] { font-weight: 700; color: var(--c); flex-shrink: 0; }
.chip-text[b-34a3olrfj9] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chip-more[b-34a3olrfj9] {
font-size: 11px;
font-weight: 700;
color: var(--muted);
padding: 1px 6px;
}
.day-dots[b-34a3olrfj9] { display: none; gap: 4px; padding: 2px; flex-wrap: wrap; }
.dot[b-34a3olrfj9] { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
/* ================= Time grid (Week / Day) ================= */
.timegrid[b-34a3olrfj9] { display: flex; flex-direction: column; min-width: 100%; }
.timegrid.week[b-34a3olrfj9] { min-width: 760px; }
.tg-head[b-34a3olrfj9] {
display: grid;
position: sticky;
top: 0;
z-index: 5;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.tg-corner[b-34a3olrfj9] {
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: var(--muted);
border-right: 1px solid var(--line);
}
.tg-dhead[b-34a3olrfj9] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 4px;
border-right: 1px solid var(--line);
}
.dh-dow[b-34a3olrfj9] {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: var(--muted);
}
.dh-num[b-34a3olrfj9] {
font-size: 18px;
font-weight: 700;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--text);
}
.tg-dhead.today .dh-num[b-34a3olrfj9] { background: var(--accent); color: var(--on-accent); }
.tg-dhead.today .dh-dow[b-34a3olrfj9] { color: var(--accent); }
.tg-grid[b-34a3olrfj9] { display: grid; }
.tg-hours[b-34a3olrfj9] { position: relative; }
.tg-hour[b-34a3olrfj9] {
height: 56px; /* keep in sync with HourHeight in the .razor */
position: relative;
border-right: 1px solid var(--line);
}
.tg-hour span[b-34a3olrfj9] {
position: absolute;
top: -8px;
right: 8px;
font-size: 11px;
font-weight: 600;
color: var(--muted);
background: var(--surface);
padding: 0 2px;
}
.tg-col[b-34a3olrfj9] {
position: relative;
border-right: 1px solid var(--line);
background-repeat: repeat;
}
.tg-col.today[b-34a3olrfj9] { background-color: var(--today); }
.tg-event[b-34a3olrfj9] {
position: absolute;
border: none;
border-left: 3px solid var(--c);
background: var(--rz-base-200); /* fallback when color-mix is unsupported */
background: color-mix(in srgb, var(--c) 22%, var(--surface));
color: var(--text);
border-radius: 8px;
padding: 4px 8px;
text-align: left;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
transition: filter .12s, transform .05s;
}
.tg-event:hover[b-34a3olrfj9] { filter: brightness(1.06); }
.tg-event:active[b-34a3olrfj9] { transform: scale(.998); }
.te-time[b-34a3olrfj9] { font-size: 11px; font-weight: 700; color: var(--c); }
.te-title[b-34a3olrfj9] {
font-size: 12px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================= Agenda ================= */
.agenda[b-34a3olrfj9] { padding: 10px 14px 24px; }
.agenda-day[b-34a3olrfj9] {
display: flex;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.agenda-date[b-34a3olrfj9] {
flex-shrink: 0;
width: 62px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4px;
}
.ad-dow[b-34a3olrfj9] { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.ad-num[b-34a3olrfj9] { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--text); }
.ad-mon[b-34a3olrfj9] { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.agenda-date.today .ad-num[b-34a3olrfj9] { color: var(--accent); }
.agenda-date.today .ad-dow[b-34a3olrfj9] { color: var(--accent); }
.agenda-items[b-34a3olrfj9] { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.agenda-item[b-34a3olrfj9] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 12px;
padding: 10px 14px;
text-align: left;
cursor: pointer;
transition: background .12s, border-color .12s, box-shadow .12s;
}
.agenda-item:hover[b-34a3olrfj9] {
background: var(--hover);
border-color: var(--c);
box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
.ai-bar[b-34a3olrfj9] { width: 4px; align-self: stretch; border-radius: 4px; background: var(--c); flex-shrink: 0; }
.ai-time[b-34a3olrfj9] {
font-size: 13px;
font-weight: 700;
color: var(--c);
flex-shrink: 0;
min-width: 96px;
}
.ai-main[b-34a3olrfj9] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-title[b-34a3olrfj9] { font-size: 14px; font-weight: 600; color: var(--text); }
.ai-desc[b-34a3olrfj9] { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty[b-34a3olrfj9] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 20px;
color: var(--muted);
text-align: center;
}
/* ================= Responsive ================= */
@media (max-width: 820px) {
.dg-cal[b-34a3olrfj9] { height: min(82vh, 760px); border-radius: 12px; }
.cal-toolbar[b-34a3olrfj9] { padding: 12px; }
.cal-title[b-34a3olrfj9] { font-size: 17px; }
.cal-views[b-34a3olrfj9] { width: 100%; justify-content: space-between; }
.view-btn[b-34a3olrfj9] { flex: 1; text-align: center; padding: 8px 6px; }
.wd[b-34a3olrfj9] { padding: 8px 6px; font-size: 10px; }
/* Month cells: swap chips for compact dots */
.day-events[b-34a3olrfj9] { display: none; }
.day-dots[b-34a3olrfj9] { display: flex; }
.day-cell[b-34a3olrfj9] { padding: 4px; align-items: center; }
.day-top[b-34a3olrfj9] { justify-content: center; }
.day-num[b-34a3olrfj9] { width: 24px; height: 24px; font-size: 12px; }
.ai-time[b-34a3olrfj9] { min-width: 78px; font-size: 12px; }
.agenda-date[b-34a3olrfj9] { width: 48px; }
}
@media (max-width: 480px) {
.cal-nav[b-34a3olrfj9] { width: 100%; justify-content: space-between; }
.cal-title[b-34a3olrfj9] { order: 3; width: 100%; margin: 4px 0 0; font-size: 16px; }
.nav-btn[b-34a3olrfj9] { height: 34px; font-size: 13px; }
}
/* /Pages/HostessComponenets/HostessImgComponent.razor.rz.scp.css */
.cardimg[b-lyajlv8dbx] {
height: 200px;
width: 150px;
}
.gallery[b-lyajlv8dbx] {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next row */
gap: 1rem; /* Space between items */
justify-content: center; /* Centers items horizontally */
}
.dropzone-container[b-lyajlv8dbx] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
padding: 1rem;
}
.dropzone-item[b-lyajlv8dbx] {
display: flex;
justify-content: center;
align-items: center;
}
.dropzone[b-lyajlv8dbx] {
width: 100%;
height: 400px;
min-height: 400px;
}
img[b-lyajlv8dbx] {
width: 100%; /* Makes images responsive */
height: auto; /* Preserves aspect ratio */
border-radius: 5px; /* Optional: Matches rounded corners */
}
.dashboard-mobile[b-lyajlv8dbx] {
display: none;
}
/* Breakpoint: adjust as needed (768px or 992px etc.) */
@media (max-width: 768px) {
.dashboard-container[b-lyajlv8dbx] {
display: none;
}
.dashboard-mobile[b-lyajlv8dbx] {
display: block;
}
}
@media (max-width: 768px) {
.responsive-column[b-lyajlv8dbx] {
width: 100% !important;
margin: 0 !important;
}
.responsive-dropzone[b-lyajlv8dbx] {
width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
}
}
.background-image-card[b-lyajlv8dbx] {
background-size: cover;
background-position: center;
height: 100%;
}
.gallery-item[b-lyajlv8dbx] {
display: flex;
align-items: center;
justify-content: center;
}
:deep(.custom-upload.rz-fileupload)[b-lyajlv8dbx] {
--rz-upload-button-bar-background-color: transparent;
--rz-upload-button-bar-padding: 0;
width: 100%;
}
:deep(.custom-upload.rz-fileupload .rz-fileupload-buttonbar)[b-lyajlv8dbx] {
width: 100%;
padding: 0;
}
:deep(.custom-upload.rz-fileupload .rz-fileupload-buttonbar .rz-fileupload-choose)[b-lyajlv8dbx] {
width: 100%;
min-height: 220px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
box-shadow: none;
border-radius: 15px;
border: 2px dashed var(--rz-primary, #888);
position: relative; /* critical so input can overlay */
cursor: pointer;
transition: border-color .2s, background-color .2s;
padding: 0; /* avoid huge padding that displaces input */
}
:deep(.custom-upload.rz-fileupload .rz-fileupload-buttonbar .rz-fileupload-choose:hover)[b-lyajlv8dbx] {
background: rgba(0,0,0,0.04);
}
:deep(.custom-upload.rz-fileupload.rz-state-dragover .rz-fileupload-buttonbar .rz-fileupload-choose)[b-lyajlv8dbx] {
background: rgba(0,0,0,0.07);
}
:deep(.custom-upload.rz-fileupload .rz-fileupload-buttonbar .rz-fileupload-choose input[type="file"])[b-lyajlv8dbx] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
}
/* /Pages/HostessComponenets/HostessImgMobileComponent.razor.rz.scp.css */
.gallery[b-ac9saefyww] {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next row */
gap: 1rem; /* Space between items */
justify-content: center; /* Centers items horizontally */
}
.dropzone-container[b-ac9saefyww] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
padding: 1rem;
}
.dropzone-item[b-ac9saefyww] {
display: flex;
justify-content: center;
align-items: center;
}
.dropzone[b-ac9saefyww] {
width: 100%;
height: 400px;
min-height: 400px;
}
img[b-ac9saefyww] {
width: 100%; /* Makes images responsive */
height: auto; /* Preserves aspect ratio */
border-radius: 5px; /* Optional: Matches rounded corners */
}
@media (max-width: 768px) {
.responsive-column[b-ac9saefyww] {
width: 100% !important;
margin: 0 !important;
}
.responsive-dropzone[b-ac9saefyww] {
width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
}
}
.background-image-card[b-ac9saefyww] {
background-size: cover;
background-position: center;
height: 100%;
}
.gallery-item[b-ac9saefyww] {
display: flex;
align-items: center;
justify-content: center;
}
:deep(.custom-upload.rz-fileupload)[b-ac9saefyww] {
--rz-upload-button-bar-background-color: transparent;
--rz-upload-button-bar-padding: 0;
width: 100%;
}
:deep(.custom-upload.rz-fileupload .rz-fileupload-buttonbar)[b-ac9saefyww] {
width: 100%;
padding: 0;
}
:deep(.custom-upload.rz-fileupload .rz-fileupload-buttonbar .rz-fileupload-choose)[b-ac9saefyww] {
width: 100%;
min-height: 220px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
box-shadow: none;
border-radius: 15px;
border: 2px dashed var(--rz-primary, #888);
position: relative; /* critical so input can overlay */
cursor: pointer;
transition: border-color .2s, background-color .2s;
padding: 0; /* avoid huge padding that displaces input */
}
:deep(.custom-upload.rz-fileupload .rz-fileupload-buttonbar .rz-fileupload-choose:hover)[b-ac9saefyww] {
background: rgba(0,0,0,0.04);
}
:deep(.custom-upload.rz-fileupload.rz-state-dragover .rz-fileupload-buttonbar .rz-fileupload-choose)[b-ac9saefyww] {
background: rgba(0,0,0,0.07);
}
:deep(.custom-upload.rz-fileupload .rz-fileupload-buttonbar .rz-fileupload-choose input[type="file"])[b-ac9saefyww] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
margin: 0;
}
/* /Pages/HostessComponenets/IndexHostess.razor.rz.scp.css */
.dashboard-container[b-v4jkjnt0ql] {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.dashboard-item[b-v4jkjnt0ql] {
box-sizing: border-box;
width: 100%;
}
/* ---- Dashboard grid ---- */
.box-container[b-v4jkjnt0ql] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
width: 100%;
margin-bottom: 20px;
}
/* ---- Tiles (RadzenCard is a child component -> reach it with ::deep) ---- */
.box-container[b-v4jkjnt0ql] .box {
border: none !important;
border-radius: 18px;
padding: 18px 16px !important;
text-align: center;
min-width: 0; /* stop cards forcing horizontal scroll in a grid */
min-height: 148px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .08);
transition: transform .18s ease, box-shadow .18s ease;
}
/* soft light glow in the top-right corner for depth */
.box-container[b-v4jkjnt0ql] .box::before {
content: "";
position: absolute;
top: -40%;
right: -20%;
width: 160px;
height: 160px;
background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
pointer-events: none;
z-index: -1; /* keep the glow behind the tile text */
}
.box-container[b-v4jkjnt0ql] .box:hover {
transform: translateY(-4px);
box-shadow: 0 12px 26px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .10);
}
/* Big tile icons -> render as a soft rounded badge.
The selector matches only the large icons (their inline style carries 40px),
so the small "help" icon on the profile tile is left untouched. */
.box-container[b-v4jkjnt0ql] .rzi[style*="40px"] {
background: rgba(255, 255, 255, .16);
border-radius: 16px;
padding: 12px;
line-height: 1;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
/* Titles: slightly smaller + tighter for compact tiles */
.box-container[b-v4jkjnt0ql] .rz-text-display-h6 {
font-size: 1rem;
line-height: 1.25;
letter-spacing: .2px;
opacity: .95;
}
.dashboard-table[b-v4jkjnt0ql] {
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.dashboard-mobile[b-v4jkjnt0ql] {
display: none;
}
/* ================= Responsive ================= */
/* 6 → 4 columns on smaller desktops / large laptops */
@media (max-width: 1400px) {
.box-container[b-v4jkjnt0ql] {
grid-template-columns: repeat(4, 1fr);
}
}
/* 4 → 3 columns on tablets / small laptops */
@media (max-width: 1024px) {
.box-container[b-v4jkjnt0ql] {
grid-template-columns: repeat(3, 1fr);
}
}
/* 3 → 2 columns on large phones / small tablets */
@media (max-width: 768px) {
.box-container[b-v4jkjnt0ql] {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.box-container[b-v4jkjnt0ql] .box {
min-height: 128px;
padding: 14px 12px !important;
border-radius: 16px;
}
}
/* 2 → 1 column (stacked) on small phones */
@media (max-width: 420px) {
.box-container[b-v4jkjnt0ql] {
grid-template-columns: 1fr;
}
.box-container[b-v4jkjnt0ql] .box {
min-height: 104px;
}
}
/* /Pages/HostessComponenets/ListProjectAvelebleComponent.razor.rz.scp.css */
.dashboard-mobile[b-iak4tdp58q] {
display: none;
}
/* Breakpoint: adjust as needed (768px or 992px etc.) */
@media (max-width: 768px) {
.dashboard-container[b-iak4tdp58q] {
display: none;
}
.dashboard-mobile[b-iak4tdp58q] {
display: block;
}
}
/* /Pages/HostessComponenets/ListProjectHosstessInComponent.razor.rz.scp.css */
.dashboard-mobile[b-4urga2vfxb] {
display: none;
}
/* Breakpoint: adjust as needed (768px or 992px etc.) */
@media (max-width: 768px) {
.dashboard-container[b-4urga2vfxb] {
display: none;
}
.dashboard-mobile[b-4urga2vfxb] {
display: block;
}
}
/* /Pages/HostessComponenets/ProfileHostessComponenet.razor.rz.scp.css */
.dashboard-mobile[b-ve9ns1buo7] {
display: none;
}
/* Breakpoint: adjust as needed (768px or 992px etc.) */
@media (max-width: 768px) {
.dashboard-container[b-ve9ns1buo7] {
display: none;
}
.dashboard-mobile[b-ve9ns1buo7] {
display: block;
}
}
/* /Pages/HostessComponenets/ProjectHostessInComponent.razor.rz.scp.css */
/* /Pages/HostessComponenets/SignatureContractComponent.razor.rz.scp.css */
.signature-canvas-wrap[b-btdyle95qc] {
display: flex;
justify-content: center;
}
.signature-actions[b-btdyle95qc] {
max-width: 500px;
width: 100%;
margin: 0 auto; /* center horizontally */
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 4px 0;
}
/* Make buttons share space evenly and wrap gracefully on narrow screens */
.signature-actions .rz-button[b-btdyle95qc] {
flex: 1 1 0;
}
@media (max-width: 480px) {
.signature-actions[b-btdyle95qc] {
flex-direction: column;
align-items: stretch;
}
}
/* /Pages/HostessProfilePDFComponent.razor.rz.scp.css */
.pdf-frame[b-ksslbvpj1x] {
width: 100%;
height: 80vh;
border: none;
}
/* Desktop default: show iframe, hide download link */
.pdf-desktop[b-ksslbvpj1x] { display: block; }
.pdf-mobile[b-ksslbvpj1x] { display: none; }
/* Mobile: hide iframe, show download link */
@media (max-width: 768px) {
.pdf-desktop[b-ksslbvpj1x] { display: none; }
.pdf-mobile[b-ksslbvpj1x] { display: block; }
}
/* Button-like anchor */
.download-link[b-ksslbvpj1x] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: 0.75rem 1.25rem;
border-radius: 8px;
background-color: #2563eb; /* blue */
border: 1px solid #1d4ed8;
color: #fff;
text-decoration: none;
font-weight: 600;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 8px rgba(37,99,235,.25);
transition: background-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
.download-link:hover[b-ksslbvpj1x] {
background-color: #1d4ed8;
box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 3px 12px rgba(37,99,235,.30);
}
.download-link:active[b-ksslbvpj1x] {
transform: translateY(1px);
}
.download-link:focus-visible[b-ksslbvpj1x] {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.download-hint[b-ksslbvpj1x] {
margin-top: .5rem;
color: #6b7280;
font-size: .875rem;
}
/* Mobile-friendly sizing */
@media (max-width: 768px) {
.download-link[b-ksslbvpj1x] {
display: block;
width: 100%;
min-height: 44px; /* comfortable tap target */
text-align: center;
}
}
/* /Pages/InscriptionHostesseComponent.razor.rz.scp.css */
.background-container[b-3lwl3a9ikh] {
background-image: url('Background hostess.jpg');
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* Add in a CSS file or