/* ===========================================================================
   Professional Dashboard (/user/dashboard)
   Tokens from DesignTokens_Reference_README_19072026.docx. Its "lucide-react"
   icon note targets the React design source; this Blazor app renders MudBlazor
   Material icons, so only the colour/type/spacing tokens apply here.
   Scoped under .pfl-dash-* so it cannot leak into the rest of the app.
   =========================================================================== */

/* PROF-410 — inside the shell the shared header drops the public site's
   centered 1440px container and snaps to the dashboard's own grid:
   · left: the logo's edge sits on the sidebar items' visual inset
     (16px sidebar padding + 12px navlink padding = 28px), so a vertical
     line through the logo falls on the icons below it;
   · right: the cluster's edge lands on the content cards' right edge. The
     content column is 1120px centred in the space right of the 240px
     sidebar with a 36px gutter, so the header's right padding mirrors that
     same computation — percentages resolve against the header's width,
     which is the same box the shell splits.
   Below 1024px the max() collapses to the plain gutters.

   Round three: /user/chat is in this selector list too. It renders in
   MainLayout (its sidebar entry leaves the shell), so it cannot pass
   InDashboardShell — the header spots the page's own marker class via
   :has() instead. Round two aligned that header to the chat's OWN content
   lines (16px/12px); her verdict was stacked-screenshot identity with the
   other tabs, so the chat now shares this very rule — logo and cluster
   cannot sit anywhere the dashboard tabs' don't. */
.pfl-header--shell .pfl-header-inner,
.mud-layout:has(.pfl-chat-head) .pfl-header-inner {
    max-width: none;
    padding: 0 max(36px, calc((100% - 240px - 1120px) / 2 + 36px)) 0 28px;
}

/* PROF-410 round three, point 4: the verification/rejection banner. On a
   dashboard tab it lives inside .pfl-dash-main — 1120px capped, centred in
   the space right of the 240px sidebar, 36px inner gutters — so its box
   spans [240 + slack + 36, 240 + slack + 1084] in viewport terms. On the
   chat page it lives in MudMainContent (p-3, full width), so this rule
   rebuilds the same box from inside that container: the 12px inset is
   already spent, hence 264px (= 240 + 36 - 12) plus the same centring
   slack, and the 1048px cap is the dashboard banner's own visible width.
   Below 1024px the dashboard hides its sidebar and the two pages agree
   near enough by themselves. */
@media (min-width: 1024.02px) {
    .mud-layout:has(.pfl-chat-head) .pfl-verif-banner {
        max-width: 1048px;
        margin-left: calc(264px + max(0px, (100% - 1336px) / 2));
        margin-right: 24px;
        /* Vertical too: .pfl-dash-main gives the tabs 28px above the banner;
           the chat's container gives 12, so the banner brings the other 16. */
        margin-top: 16px;
    }
}

.pfl-dash-shell {
    /* Mirrors .pfl-header-inner's height in global.css — 64px desktop, 56px
       below 1024px (see the media query at the end of this block). */
    --pfl-header-h: 64px;

    --dash-navy: #0F1F4B;
    --dash-indigo: #2B2E7C;
    --dash-text: #0F172A;
    --dash-muted: #64748B;
    --dash-border: #E2E8F0;
    --dash-alt: #F8FAFC;
    --dash-green: #16A34A;
    --dash-orange: #F2A35B;
    /* PROF-606 (f) — the amber the ticket names for «Σε εκκρεμότητα». Kept
       separate from --dash-orange (#F2A35B) rather than folded into it: they are
       two hairs apart and one of them is already spoken for elsewhere in this
       file, so reusing it would have quietly recoloured three unrelated things.
       Same hex as the protection icon in global.css, so it is not a new colour
       on the platform, only a new one in this palette. */
    --dash-amber: #E8933F;

    display: flex;
    /* PROF-168 issue 1: the shell now sits below the site header, so a full
       100vh here would push every dashboard page a header taller than the
       viewport and invent a scrollbar on short pages. The height is a token
       because the public header is 64px on desktop and 56px under 1024px —
       both offsets have to follow it or the sidebar drifts. */
    min-height: calc(100vh - var(--pfl-header-h));
    /* White page per PROF-91 — the cards keep reading as boxes through their
       #E2E8F0 borders. --dash-alt stays a token for hovers/empty states. */
    background: #FFFFFF;
    /* PROF-231: was this stack spelled out by hand. It omitted Open Sans, so
       Greek text here fell to a system font while the rest of the site fell to
       Open Sans. The token carries the whole chain. */
    font-family: var(--pfl-font, 'Manrope', 'Open Sans', sans-serif);
    color: var(--dash-text);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.pfl-dash-sidebar {
    width: 240px;
    flex: none;
    background: #FFFFFF;
    border-right: 1px solid var(--dash-border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 16px 20px;
    position: sticky;
    /* PROF-168 issue 1 / AC-H04: stick a header's height down so the sidebar's
       own top (avatar + name) is never hidden behind the sticky site header. */
    top: var(--pfl-header-h);
    align-self: flex-start;
    height: calc(100vh - var(--pfl-header-h));
}

.pfl-dash-sidebar__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--dash-border);
}

.pfl-dash-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dash-navy), var(--dash-indigo));
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    overflow: hidden;
}

.pfl-dash-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pfl-dash-sidebar__name {
    font-weight: 600;
    font-size: 15px;
    color: var(--dash-navy);
    line-height: 1.3;
}

.pfl-dash-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dash-green);
}

.pfl-dash-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dash-green);
}

.pfl-dash-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 18px;
    /* PROF-131: nav no longer grows to fill the column. Settings + Log out used
       to be pushed to the very bottom (a large gap); Eftychia's menu redesign
       wants them grouped directly under the nav list, separated only by the
       divider line. Icons unchanged — this is a layout-only change. */
    flex: 0 0 auto;
}

.pfl-dash-navlink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dash-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.pfl-dash-navlink:hover {
    background: var(--dash-alt);
    color: var(--dash-navy);
}

.pfl-dash-navlink .mud-icon-root {
    font-size: 20px;
}

/* PROF-299 AC-D-10 — a document was rejected and is waiting to be replaced.
   Pushed to the far end with margin-left:auto rather than sitting next to the
   label, so it lands in the same place on every entry regardless of how long
   the word is in either language. flex-shrink:0 because the nav is a flex row
   and a 8px dot is exactly the thing a squeeze would eat first. */
/* PROF-299 AC-D-04 — the "Προαιρετικό" badge. Light grey, per the README's
   status table, and deliberately the quietest thing on the row: it marks the
   documents that are NOT holding the account up, so anything with colour in it
   would compete with the ones that are. */
.pfl-doc-optional {
    background: #F2F4F6 !important;
    border-color: #E2E8F0 !important;
    color: #64748B !important;
}

/* PROF-299 AC-D-13 — the card the rejection email pointed at. Three seconds,
   once, then it is an ordinary row again: long enough for the eye to land on
   it after the scroll, short enough that it is not still shouting when the
   professional starts reading. Amber, matching the banner; red here would say
   "this is broken" about a document they are about to fix.

   forwards on the fill mode so it settles transparent rather than snapping
   back through the tint on the last frame. */
@keyframes pfl-doc-flash {
    0%   { background: #FDF3E3; box-shadow: 0 0 0 3px #FDF3E3; }
    70%  { background: #FDF3E3; box-shadow: 0 0 0 3px #FDF3E3; }
    100% { background: transparent; box-shadow: 0 0 0 3px transparent; }
}

.pfl-doc-flash {
    border-radius: 6px;
    animation: pfl-doc-flash 3s ease-out 1 forwards;
}

/* Respect a stated preference for less motion: keep the tint, drop the fade. */
@media (prefers-reduced-motion: reduce) {
    .pfl-doc-flash {
        animation: none;
        background: #FDF3E3;
    }
}

/* PROF-299 fix 5 / AC9 — a line in the per-category summary that jumps to its
   row below. It is a <button> so the keyboard and a screen reader treat it as
   the control it is; everything here is undoing the browser's button chrome so
   it reads as a line of the list it sits in. Full width and text-align left,
   or the flex row centres itself and stops lining up with its neighbours. */
/* PROF-477: every text element on the documents tab sits on ONE left line —
   the same one its section heading starts at. Three separate things pushed
   rows right of it and all three are undone here, scoped to this page's own
   classes so no other list on the site moves.

   MudBlazor 8.11 gives .mud-list-item a 32px left inset (a later rule beats
   .mud-list-item-gutters' 16px), which is why the rows started right of their
   own heading. Neutralised only inside .pfl-doclist. */
.pfl-doclist .mud-list-item {
    padding-left: 0;
    padding-inline-start: 0;
    padding-right: 0;
}
.pfl-doclist .mud-list-item-text { margin: 0; }
.pfl-doclist .mud-list-padding { padding: 0; }

/* The row's text column. Stacking the sub-lines here is what let the ml-7
   indents go: they existed to re-align blocks that were inline children of a
   row, and a flex column starts each of them at x=0 by construction. */
.pfl-docrow__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.pfl-doc-jump {
    width: 100%;
    padding: 2px 4px 2px 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;

    /* PROF-299 follow-up: the row is a full-width <button> laid out with
       d-flex, and it was coming out centred — text-align does not place flex
       items, and a button's own centring wins unless the axis is set here.
       Explicit, so the rows line up with the category heading above them. */
    justify-content: flex-start;
}

.pfl-doc-jump:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Keep a visible focus ring — removing the outline above would otherwise take
   the keyboard user's only indication of where they are. */
.pfl-doc-jump:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.pfl-dash-navdot {
    margin-left: auto;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C0392B;
}

.pfl-dash-navlink.is-active {
    background: #EEF2FF;
    color: var(--dash-indigo);
    font-weight: 600;
}

.pfl-dash-sidebar__footer {
    text-align: center;
    font-size: 12px;
    color: var(--dash-muted);
    padding-top: 16px;
    line-height: 1.5;
}

.pfl-dash-sidebar__footer strong {
    display: block;
    color: var(--dash-navy);
    font-weight: 600;
}

/* ── Main content ────────────────────────────────────────────────────────── */
.pfl-dash-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 28px 36px 48px;
    /* PROF-102: centre the content column in the space left of the sidebar.
       Without the auto margins the 1120px cap left-hugged the sidebar and
       dumped all the slack on the right — a lopsided empty band on wide
       screens. width:100% lets it fill up to the cap and shrink below it,
       and margin-inline:auto (flex-grow is treated as 0 once auto margins
       absorb the free space) balances the gutters. Applies to every menu
       page since they all render inside this one main. */
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
}

/* PROF-258: the contact form (Pages/Components/ContactForm.razor) is hosted by
   the public /contact page AND by /user/contact inside this shell. Its own
   .pfl-contact wrapper carries the PUBLIC page's standalone chrome — a white
   full-bleed band and 64px/40px/96px of padding — which stacks on top of
   .pfl-dash-main's 28px/36px/48px and leaves a dead band above the heading.
   Neutralised only when nested in the shell; the public page is untouched
   because this selector cannot match there. The card inside keeps its own
   720px cap and centring. */
.pfl-dash-main .pfl-contact {
    padding: 0;
    background: transparent;
}

.pfl-dash-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.pfl-dash-greeting {
    font-size: 26px;
    font-weight: 700;
    color: var(--dash-navy);
    margin: 0;
}

.pfl-dash-date {
    font-size: 13px;
    color: var(--dash-muted);
    white-space: nowrap;
}

/* Welcome banner */
.pfl-dash-welcome {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, var(--dash-navy), var(--dash-indigo));
    color: #FFFFFF;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 24px;
    font-size: 14px;
}

.pfl-dash-welcome__icon {
    flex: none;
    display: flex;
}

.pfl-dash-welcome__text {
    flex: 1 1 auto;
    line-height: 1.5;
}

.pfl-dash-welcome__text strong {
    font-weight: 700;
}

.pfl-dash-welcome__close {
    flex: none;
    background: transparent;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    opacity: .8;
    display: flex;
    padding: 2px;
    border-radius: 6px;
}

.pfl-dash-welcome__close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .12);
}

/* Stat cards */
.pfl-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* PROF-108 AC-01/02: the stat strip and the getting-started guide share one
   flex column so a brand-new professional (no bookings) is shown the guide
   first — direction before four zeroes — via `order`, no duplicated markup. */
.pfl-dash-priority { display: flex; flex-direction: column; }
.pfl-dash-priority--guide-first .pfl-dash-stats { order: 2; }
.pfl-dash-priority--guide-first .pfl-dash-guide  { order: 1; }

.pfl-dash-stat {
    background: #FFFFFF;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    padding: 18px 20px;
}

.pfl-dash-stat__label {
    font-size: 13px;
    color: var(--dash-muted);
    margin-bottom: 8px;
}

.pfl-dash-stat__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--dash-navy);
    line-height: 1.1;
}

.pfl-dash-stat__value--money {
    color: var(--dash-green);
}

.pfl-dash-stat__value--rating {
    color: var(--dash-orange);
}

.pfl-dash-stat__sub {
    font-size: 12px;
    color: var(--dash-muted);
    margin-top: 6px;
}

/* Generic card */
.pfl-dash-card {
    background: #FFFFFF;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    padding: 20px 24px;
}

.pfl-dash-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pfl-dash-card__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--dash-navy);
    margin: 0;
}

.pfl-dash-card__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-indigo);
    text-decoration: none;
    white-space: nowrap;
}

.pfl-dash-card__link:hover {
    color: #3840A0;
    text-decoration: underline;
}

.pfl-dash-card__sub {
    font-size: 13px;
    color: var(--dash-muted);
    margin: -8px 0 18px;
}

/* PROF-108 v1.1 §2.2: muted caption under the zero-stat strip for a brand-new
   pro. Sits with the stats in the guide-first layout (guide is order 1). */
.pfl-dash-stats-caption {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--dash-muted);
}
.pfl-dash-priority--guide-first .pfl-dash-stats-caption { order: 2; }

/* PROF-260 §B.2 — membership summary. Informational card: what plan, which
   cycle, when the next charge lands, and one link out. */
.pfl-dash-membership {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--pfl-border, #E2E8F0);
    border-radius: 10px;
    background: #FFFFFF;
}
.pfl-dash-membership__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #64748B;
    margin-bottom: 6px;
}
.pfl-dash-membership__plan {
    font-size: 18px;
    font-weight: 700;
    color: var(--pfl-navy, #0F1F4B);
}
.pfl-dash-membership__meta {
    margin-top: 2px;
    font-size: 13px;
    color: #64748B;
}
.pfl-dash-membership__link {
    display: inline-block;
    margin-top: 10px;
    color: var(--pfl-indigo, #2B2E7C);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.pfl-dash-membership__link:hover { text-decoration: underline; }

/* The one state with a real button rather than a link: nothing is subscribed,
   so this is an action, not a way to review something. */
.pfl-dash-membership__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 0 20px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.pfl-dash-membership__btn:hover { background: linear-gradient(90deg, #1A2D63, #3840A0); }

/* 🔴 PROF-334 all over again: it is an <a>, so the browser repaints the label
   link-blue on :active and :visited and one `color` on the base class does not
   survive either. Fourth element on this site to need every state pinned. */
.pfl-dash-membership__btn:link,
.pfl-dash-membership__btn:visited,
.pfl-dash-membership__btn:hover,
.pfl-dash-membership__btn:focus,
.pfl-dash-membership__btn:active { color: #FFFFFF; }

/* ── Availability quick-status widget (PROF-108 v1.1 §5) ──────────────────── */
.pfl-dash-availw { margin-bottom: 16px; }

.pfl-dash-availw__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pfl-dash-availw__titlewrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pfl-dash-availw__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.pfl-dash-availw__pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.pfl-dash-availw__pill.is-on  { color: var(--dash-green); background: #DCFCE7; }
.pfl-dash-availw__pill.is-off { color: var(--dash-muted); background: #F1F5F9; }

.pfl-dash-availw__schedule {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-navy);
}
.pfl-dash-availw__sep { color: var(--dash-border); }
.pfl-dash-availw__hours { color: var(--dash-text); font-weight: 500; }

.pfl-dash-availw__chips {
    display: flex;
    gap: 6px;
    margin: 12px 0 4px;
}
.pfl-dash-availw__chip {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: #F1F5F9;
    color: #94A3B8;
}
.pfl-dash-availw__chip.is-active {
    background: var(--dash-navy);
    color: #FFFFFF;
}

.pfl-dash-availw__rows {
    margin-top: 14px;
    border-top: 1px solid var(--dash-border);
}
.pfl-dash-availw__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--dash-border);
}
.pfl-dash-availw__rowlabel { color: var(--dash-muted); }
.pfl-dash-availw__rowval { color: var(--dash-text); font-weight: 600; }

.pfl-dash-availw__flag {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.pfl-dash-availw__flag.is-on  { color: var(--dash-green); background: #DCFCE7; }
.pfl-dash-availw__flag.is-off { color: var(--dash-muted); background: #F1F5F9; }

.pfl-dash-availw__edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-indigo);
    text-decoration: none;
}
.pfl-dash-availw__edit:hover { color: #3840A0; text-decoration: underline; }

/* Get-started steps */
.pfl-dash-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.pfl-dash-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    background: #FFFFFF;
}

.pfl-dash-step.is-done {
    border-color: #BBF7D0;
    background: #F0FDF4;
}

.pfl-dash-step__marker {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--dash-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.pfl-dash-step.is-done .pfl-dash-step__marker {
    background: var(--dash-green);
    border-color: var(--dash-green);
}

.pfl-dash-step__marker .mud-icon-root {
    font-size: 15px;
}

.pfl-dash-step__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dash-text);
    line-height: 1.35;
}

/* Two-column row */
.pfl-dash-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}

/* Empty states */
.pfl-dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 12px;
    color: var(--dash-muted);
    font-size: 13px;
    line-height: 1.5;
}

.pfl-dash-empty__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dash-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
}

/* Achievements list */
.pfl-dash-achievement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}

.pfl-dash-achievement + .pfl-dash-achievement {
    border-top: 1px solid var(--dash-border);
}

.pfl-dash-achievement__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FEF3E2;
    color: var(--dash-orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pfl-dash-achievement__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-navy);
}

.pfl-dash-achievement__sub {
    font-size: 12px;
    color: var(--dash-muted);
    margin-top: 2px;
}

/* Reviews card sits full-width */
.pfl-dash-reviews {
    margin-top: 24px;
}

/* Progress & Awards card (PROF-108 AC-05/06) — the badges panel moved below the
   bookings and reviews panels. A locked badge desaturates its icon and shows a
   progress bar toward its target, so a full-colour icon always means "earned". */
.pfl-dash-awards {
    margin-top: 24px;
}

.pfl-dash-badge__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.pfl-dash-badge.is-locked .pfl-dash-achievement__icon {
    background: #F1F5F9;
    color: #94A3B8;
    filter: grayscale(1);
}

.pfl-dash-badge__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.pfl-dash-badge__bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--dash-border, #E2E8F0);
    overflow: hidden;
}

.pfl-dash-badge__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--dash-orange, #F2A35B);
    transition: width 0.3s ease;
}

.pfl-dash-badge__count {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-muted, #64748B);
}

.pfl-dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--dash-navy), var(--dash-indigo));
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 10px;
    padding: 11px 22px;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease;
}

.pfl-dash-btn:hover {
    background: linear-gradient(90deg, #1A2D63, #3840A0);
    color: #FFFFFF;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .pfl-dash-stats { grid-template-columns: repeat(2, 1fr); }
    .pfl-dash-steps { grid-template-columns: repeat(2, 1fr); }
    .pfl-dash-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .pfl-dash-shell { flex-direction: column; }
    .pfl-dash-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        padding: 16px;
    }
    .pfl-dash-sidebar__profile {
        flex-direction: row;
        border-bottom: none;
        padding-bottom: 0;
        gap: 10px;
        text-align: left;
    }
    .pfl-dash-avatar { width: 40px; height: 40px; font-size: 15px; }
    .pfl-dash-nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 0;
        flex-basis: 100%;
    }
    .pfl-dash-sidebar__footer { display: none; }
    .pfl-dash-main { padding: 20px 16px 36px; }
    .pfl-dash-header { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pfl-dash-stats { grid-template-columns: 1fr 1fr; }
    .pfl-dash-steps { grid-template-columns: 1fr; }
}

/* ── Activation waiting room (PROF-86) ───────────────────────────────────
   Shown on the dashboard while the submitted application waits on its four
   activation gates. Colours are the standard status tokens: green passed,
   amber pending — nothing new is invented for this widget. */
.pfl-dash-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pfl-dash-act__shield {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EEF2FF;
    color: var(--dash-indigo);
    margin: 8px 0 16px;
}

.pfl-dash-act__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--dash-navy);
}

.pfl-dash-act__sub {
    margin: 0 0 20px;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dash-muted);
}

.pfl-dash-act__trial {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 720px;
    width: 100%;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #3730A3;
    text-align: left;
}

.pfl-dash-act__card {
    max-width: 720px;
    width: 100%;
    text-align: left;
}

.pfl-dash-act__gate {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--dash-border, #E2E8F0);
}

.pfl-dash-act__gate:last-child { border-bottom: none; }

.pfl-dash-act__gateicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
}

.pfl-dash-act__gateicon.is-done { background: #DCFCE7; color: #16A34A; }
.pfl-dash-act__gateicon.is-pending { background: #FEF3E2; color: #B45309; }

.pfl-dash-act__gatetext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pfl-dash-act__gatetitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-navy);
}

.pfl-dash-act__gatesub {
    font-size: 12px;
    color: var(--dash-muted);
}

.pfl-dash-act__chip {
    margin-left: auto;
    flex: none;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
}

.pfl-dash-act__chip.is-done { background: #DCFCE7; color: #15803D; }
.pfl-dash-act__chip.is-pending { background: #FEF3E2; color: #B45309; }

/* PROF-97 §4.2: a rejected/changes-requested gate — red icon and a red action
   link (in place of the status chip) back to the step that needs redoing. */
.pfl-dash-act__gateicon.is-rejected { background: #FEE2E2; color: #DC2626; }

.pfl-dash-act__action {
    margin-left: auto;
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: #DC2626;
    text-decoration: none;
    white-space: nowrap;
}

    .pfl-dash-act__action:hover { text-decoration: underline; }

.pfl-dash-act__hint {
    margin: 20px 0 0;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dash-muted);
}

/* Padlocked sidebar entries while the account is pending (PROF-86 mockup):
   greyed, non-interactive, with the lock pushed to the row's right edge. */
.pfl-dash-navlink.is-locked {
    opacity: 0.55;
    cursor: default;
}

.pfl-dash-navlock { margin-left: auto; }

/* ══════════════════ Settings page (/user/settings, PROF-87) ══════════════════
   The mockup's tabbed control panel inside the dashboard shell: underline
   tabs, white bordered cards, uppercase micro-labels, 48px inputs and the
   brand-gradient primary button. */

.pfl-set-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--dash-border, #E2E8F0);
    margin-bottom: 24px;
    overflow-x: auto;
}

.pfl-set-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 2px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-muted);
    cursor: pointer;
    white-space: nowrap;
}

.pfl-set-tab:hover { color: var(--dash-navy); }

.pfl-set-tab.is-active {
    color: var(--dash-navy);
    border-bottom-color: var(--dash-indigo);
}

/* The README's <640px behaviour: the bar collapses to a dropdown. */
.pfl-set-tabselect { display: none; }

@media (max-width: 639px) {
    .pfl-set-tabs { display: none; }

    .pfl-set-tabselect {
        display: block;
        width: 100%;
        height: 48px;
        margin-bottom: 20px;
        padding: 0 12px;
        border: 1.5px solid var(--dash-border, #E2E8F0);
        border-radius: 8px;
        background: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
        color: var(--dash-navy);
    }
}

.pfl-set-card {
    background: #FFFFFF;
    border: 1px solid var(--dash-border, #E2E8F0);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    max-width: 860px;
}

.pfl-set-cardtitle {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-navy);
}

/* PROF-201 §4.2/§4.3: section header with an action link pinned right
   ("Όλες οι συνδέσεις →", "Οι Πιστοποιήσεις μου →"). Mirrors
   .pfl-dash-card__head. The title's own bottom margin is dropped here so the
   row spaces the card once, not twice. */
.pfl-set-cardhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pfl-set-cardhead .pfl-set-cardtitle { margin-bottom: 0; }

.pfl-set-cardlink {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-navy);
    text-decoration: none;
    white-space: nowrap;
}

.pfl-set-cardlink:hover { text-decoration: underline; }

.pfl-set-cardsub {
    margin: -8px 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--dash-muted);
}

.pfl-set-field { margin-bottom: 16px; }

/* No text-transform here on purpose: palette.css enforces "no uppercase,
   anywhere" (uppercase Greek drops its accents) — the micro-label reads as
   one through size, weight and tracking alone. */
.pfl-set-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dash-muted);
}

.pfl-set-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 639px) {
    .pfl-set-grid2 { grid-template-columns: 1fr; }
}

.pfl-set-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--dash-border, #E2E8F0);
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 14px;
    color: var(--dash-navy);
    outline: none;
}

.pfl-set-input:focus {
    border-color: var(--dash-indigo);
    box-shadow: 0 0 0 4px rgba(43, 46, 124, 0.08);
}

.pfl-set-input:disabled {
    background: #F8FAFC;
    color: var(--dash-muted);
}

.pfl-set-input--error { border-color: #C0392B !important; }

.pfl-set-fielderror {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #C0392B;
}

.pfl-set-pwwrap { position: relative; }

.pfl-set-pwwrap .pfl-set-input { padding-right: 44px; }

.pfl-set-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: none;
    color: var(--dash-muted);
    cursor: pointer;
}

.pfl-set-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--pfl-grad-cta, linear-gradient(90deg, #0F1F4B, #2B2E7C));
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* PROF-123 FIX-01: a disabled primary button reads as a clear GREY control
   ("fill the form first"), not a washed-out gradient that looks broken/locked
   — the active state keeps the brand gradient (above). */
.pfl-set-btn:disabled {
    background: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
}

.pfl-set-btn--outline:disabled {
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #94A3B8;
}

/* PROF-123 AC-08: the pending verification badge is a link to the checklist. */
/* PROF-606 (f) — «το πράσινο #16A34A είναι δεσμευμένο αποκλειστικά για την
   επαλήθευση». It was not: this variant set only cursor and text-decoration, so
   the colour fell through to .pfl-dash-status's --dash-green and «Σε
   εκκρεμότητα» wore the verified green — dot and label both. A professional
   still waiting for review saw the platform's own signal for «checked».

   The --paused variant two rules below is the pattern: a state that is not
   green has to override BOTH the text colour and the ::before dot, because the
   base rule sets them separately. Overriding one leaves a green dot beside
   amber text, which is worse than either. */
.pfl-dash-status--pending {
    cursor: pointer;
    text-decoration: none;
    color: var(--dash-amber);
}

.pfl-dash-status--pending::before { background: var(--dash-amber); }

.pfl-dash-status--pending:hover {
    text-decoration: underline;
}

/* PROF-108 v1.1 AC-W05: a fully-active pro who paused new bookings — grey pill
   and dot, distinct from the green "Ενεργός" accepting state. */
.pfl-dash-status--paused { color: var(--dash-muted); }
.pfl-dash-status--paused::before { background: var(--dash-muted); }

.pfl-set-btn--outline {
    background: #FFFFFF;
    border: 1.5px solid var(--dash-indigo);
    color: var(--dash-indigo);
}

/* PROF-501 §3 — the same styling on an anchor. It stays an anchor because it
   navigates; only the underline has to go, which a <button> would never have
   had in the first place. */
a.pfl-set-btn {
    text-decoration: none;
}

.pfl-set-btn--ghost {
    background: none;
    color: var(--dash-muted);
}

.pfl-set-btn--danger {
    background: #FFFFFF;
    border: 1.5px solid #DC2626;
    color: #DC2626;
}

.pfl-set-btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pfl-set-banner {
    background: #EEF2FF;
    border-left: 3px solid var(--dash-indigo);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #3730A3;
}

.pfl-set-banner--ok {
    margin-top: 16px;
    margin-bottom: 0;
    background: #DCFCE7;
    border-left-color: #16A34A;
    color: #15803D;
}

/* Ζώνη Προσοχής — the mockup's pink danger card. */
.pfl-set-card--danger {
    background: #FEF2F2;
    border-color: #FECACA;
}

.pfl-set-cardtitle--danger { color: #C0392B; }

.pfl-set-dangertext {
    margin: 0 0 16px;
    max-width: 640px;
    font-size: 13px;
    line-height: 1.6;
    color: #7F1D1D;
}

/* Toggle rows (notifications + privacy tabs). */
.pfl-set-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--dash-border, #E2E8F0);
}

.pfl-set-toggle:last-child { border-bottom: 0; }

.pfl-set-toggletext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pfl-set-toggletitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-navy);
}

.pfl-set-togglesub {
    font-size: 12px;
    line-height: 1.5;
    color: var(--dash-muted);
}

/* Billing summary grid. */
.pfl-set-billgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.pfl-set-billvalue {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-navy);
}

.pfl-set-billsub {
    display: block;
    font-size: 12px;
    color: var(--dash-muted);
}

.pfl-set-billchip {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 12px;
    background: #EEF2FF;
    color: var(--dash-indigo);
}

/* Availability: day pills + blocked ranges. */
.pfl-set-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pfl-set-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 8px 14px;
    border: 1.5px solid var(--dash-border, #E2E8F0);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-muted);
    cursor: pointer;
    user-select: none;
}

.pfl-set-day.is-on {
    background: var(--pfl-grad-cta, linear-gradient(90deg, #0F1F4B, #2B2E7C));
    border-color: transparent;
    color: #FFFFFF;
}

.pfl-set-day input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pfl-set-blockadd {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 460px;
}

.pfl-set-blockadd .mud-picker { flex: 1 1 260px; }

.pfl-set-blocklist {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
}

.pfl-set-blockrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dash-border, #E2E8F0);
    font-size: 14px;
    color: var(--dash-navy);
}

.pfl-set-blockrow:last-child { border-bottom: 0; }

.pfl-set-blockdel {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dash-muted);
    cursor: pointer;
}

.pfl-set-blockdel:hover {
    background: #FEF2F2;
    color: #DC2626;
}

/* ══════════════ Dashboard tabs: Bookings / Revenue / Reviews (PROF-92) ══════════════ */

/* Sidebar bottom block — divider, Settings, red Log out (mockup order). */
.pfl-dash-sidebar__bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--dash-border);
}

.pfl-dash-navlink--logout {
    appearance: none;
    border: 0;
    background: none;
    /* PROF-181: inherit the FONT FAMILY only. A <button> otherwise uses the UA
       font family, which made «Έξοδος» look different from the <a> nav items.
       Using the `font` shorthand here (as before) also reset font-size/weight,
       so the logout rendered larger — inheriting family alone keeps the
       .pfl-dash-navlink 14px / 500 and lines it up with the links above. */
    font-family: inherit;
    /* PROF-131: the logout is a <button>, which does not stretch/left-align like the
       <a> nav items — force full width + left-aligned flex content so «Έξοδος» lines
       up with the rest of the menu. */
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    /* PROF-219 AC-BTN12: the sign-out is a DANGER TEXT LINK in the spec's own
       red — #C0392B, the same red every rejection and error already wears —
       rather than the Tailwind #DC2626 it had picked up. */
    color: #C0392B;
}

.pfl-dash-navlink--logout .mud-icon-root { color: #C0392B; }

.pfl-dash-navlink--logout:hover {
    background: #FEF2F2;
    color: #A93226;
}

/* Trial banner on the active dashboard — dark navy strip (mockup). */
.pfl-dash-trialbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    color: #FFFFFF;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
}

.pfl-dash-trialbar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pfl-dash-trialbar__text strong { font-size: 14px; }

.pfl-dash-trialbar__cta {
    flex: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    text-decoration: none;
}

.pfl-dash-trialbar__cta:hover { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }

/* Filter chips (bookings tab). */
.pfl-tab-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.pfl-tab-filter {
    appearance: none;
    cursor: pointer;
    border: 1.5px solid var(--dash-border);
    background: #FFFFFF;
    color: var(--dash-navy);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

.pfl-tab-filter.is-active {
    background: linear-gradient(90deg, #0F1F4B, #2B2E7C);
    border-color: transparent;
    color: #FFFFFF;
}

/* List rows shared by bookings + revenue payments. */
.pfl-tab-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
}

a.pfl-tab-row:hover { border-color: #C7D2FE; }

.pfl-tab-row--static {
    border: 0;
    border-bottom: 1px solid var(--dash-border);
    border-radius: 0;
    padding: 12px 0;
    margin-bottom: 0;
}

.pfl-tab-row--static:last-child { border-bottom: 0; }

.pfl-tab-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EEF2FF;
    color: var(--dash-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.pfl-tab-rowtext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.pfl-tab-rowtitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-navy);
}

.pfl-tab-rowsub {
    font-size: 12px;
    color: var(--dash-muted);
}

.pfl-tab-rowend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.pfl-tab-rowend--col {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.pfl-tab-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--dash-navy);
}

.pfl-tab-chip {
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
}

.pfl-tab-chip.is-pending { background: #FEF3E2; color: #B45309; }
.pfl-tab-chip.is-confirmed { background: #DCFCE7; color: #15803D; }
.pfl-tab-chip.is-done { background: #EEF2FF; color: var(--dash-indigo); }

.pfl-tab-emptysub {
    font-size: 12px;
    color: var(--dash-muted);
}

/* Revenue tab. */
.pfl-rev-stats { grid-template-columns: repeat(3, 1fr); }

.pfl-rev-week { color: var(--dash-green) !important; }

.pfl-rev-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 160px;
    padding-top: 8px;
}

.pfl-rev-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
}

.pfl-rev-bar {
    background: var(--dash-indigo);
    border-radius: 6px 6px 0 0;
    min-height: 4px;
}

.pfl-rev-month {
    text-align: center;
    font-size: 11px;
    color: var(--dash-muted);
}

/* Reviews tab. */
.pfl-revw-top {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.pfl-revw-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
}

.pfl-revw-scorenum {
    font-size: 40px;
    font-weight: 800;
    color: var(--dash-navy);
    line-height: 1.1;
}

/* Ratings are the one sanctioned orange surface (design tokens). */
.pfl-revw-stars .mud-rating-item { color: #F2A35B !important; }

.pfl-revw-basedon {
    font-size: 12px;
    color: var(--dash-muted);
}

.pfl-revw-crit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

.pfl-revw-critlabel {
    flex: 0 0 130px;
    font-size: 13px;
    color: #0F172A;
}

.pfl-revw-critbar {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: #EEF2FF;
    overflow: hidden;
}

.pfl-revw-critbar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--dash-indigo);
}

.pfl-revw-critpct {
    flex: 0 0 42px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-navy);
}

.pfl-revw-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--dash-border);
}

.pfl-revw-item:last-child { border-bottom: 0; }

.pfl-revw-itemtext { min-width: 0; flex: 1 1 auto; }

.pfl-revw-itemhead {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pfl-revw-itemstars { margin-left: auto; }

.pfl-revw-remark {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #0F172A;
}

.pfl-revw-reply {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--dash-indigo);
    background: #F8FAFC;
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    line-height: 1.6;
    color: #334155;
}

@media (max-width: 760px) {
    .pfl-revw-top { grid-template-columns: 1fr; }
    .pfl-rev-stats { grid-template-columns: 1fr; }
    .pfl-rev-chart { gap: 6px; }
}

/* ── Income tab (PROF-130) ─────────────────────────────────────────────── */
.pfl-inc-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.pfl-inc-periods { display: flex; gap: 6px; }
.pfl-inc-period {
    border: 1px solid var(--dash-border);
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pfl-inc-period.is-on { background: var(--dash-navy); color: #fff; border-color: var(--dash-navy); }
.pfl-inc-export, .pfl-inc-reportbtn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--dash-navy), var(--dash-indigo));
    color: #fff !important;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}
.pfl-inc-reportbtn { margin-left: 0; }
.pfl-inc-customrange { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.pfl-inc-customrange input[type=date] { padding: 6px 10px; border: 1px solid var(--dash-border); border-radius: 8px; }
.pfl-inc-apply { background: var(--dash-navy); color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; cursor: pointer; }

/* Stat cards */
.pfl-inc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.pfl-inc-stat {
    background: #fff;
    border: 1px solid var(--dash-border);
    border-top: 4px solid var(--dash-navy);
    border-radius: 12px;
    padding: 16px 18px;
}
.pfl-inc-stat--green { border-top-color: #16A34A; }
.pfl-inc-stat--amber { border-top-color: #F59E0B; }
.pfl-inc-stat--indigo { border-top-color: var(--dash-indigo); }
.pfl-inc-stat--navy { border-top-color: var(--dash-navy); }
.pfl-inc-stat__label { font-size: 12px; color: var(--dash-muted); }
.pfl-inc-stat__value { font-size: 30px; font-weight: 800; color: var(--dash-navy); line-height: 1.2; margin: 2px 0; }
.pfl-inc-stat__sub { font-size: 12px; color: var(--dash-muted); }
.pfl-inc-amber { color: #D97706 !important; }
.pfl-inc-green { color: #16A34A !important; }
.pfl-inc-red { color: #DC2626 !important; }
.pfl-inc-grey { color: var(--dash-muted) !important; }
.pfl-inc-trend { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: #16A34A; }
.pfl-inc-trend.down { color: #DC2626; }

/* Pills */
.pfl-inc-pill { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pfl-inc-pill--paid { background: #DCFCE7; color: #15803D; }
.pfl-inc-pill--pending { background: #FEF3C7; color: #B45309; }
.pfl-inc-pill--refunded { background: #FEE2E2; color: #B91C1C; }

/* Fee + VAT strips */
.pfl-inc-feestrip, .pfl-inc-vatstrip {
    background: #EEF2FF;
    border: 1px solid #E0E7FF;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.pfl-inc-vatstrip { background: #F5F7FB; border-color: var(--dash-border); }
.pfl-inc-feestrip__row, .pfl-inc-vatstrip__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: #0F172A; }
.pfl-inc-feesep { color: var(--dash-muted); }
.pfl-inc-feestrip__note { font-size: 11px; color: var(--dash-muted); margin-top: 4px; }
.pfl-inc-feelink { color: var(--dash-indigo); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Chart + payout row */
.pfl-inc-row { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-bottom: 16px; }
.pfl-inc-chartcard, .pfl-inc-payout {
    background: #fff;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    padding: 16px 18px;
}
.pfl-inc-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pfl-inc-chart-toggles { display: flex; gap: 6px; }
.pfl-inc-toggle { border: 1px solid var(--dash-border); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: #334155; }
.pfl-inc-toggle.is-on { background: var(--dash-indigo); color: #fff; border-color: var(--dash-indigo); }
.pfl-inc-chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 20px; }
.pfl-inc-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.pfl-inc-bar { width: 60%; max-width: 34px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--dash-indigo), var(--dash-navy)); }
.pfl-inc-barval { font-size: 11px; font-weight: 700; color: var(--dash-navy); margin-bottom: 4px; }
.pfl-inc-barlabel { margin-top: 6px; font-size: 11px; color: var(--dash-muted); }
.pfl-inc-nodata, .pfl-inc-servicelist { padding: 20px 0; }
.pfl-inc-servicerow { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.pfl-inc-servicename { flex: 0 0 150px; font-size: 13px; color: #0F172A; }
.pfl-inc-servicebar-track { flex: 1 1 auto; height: 10px; background: #EEF2FF; border-radius: 999px; overflow: hidden; }
.pfl-inc-servicebar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dash-navy), var(--dash-indigo)); }
.pfl-inc-serviceval { flex: 0 0 130px; text-align: right; font-size: 13px; font-weight: 700; color: var(--dash-navy); }
.pfl-inc-servicepct { color: var(--dash-muted); font-weight: 500; }

/* Payout card */
.pfl-inc-payout__block { padding: 10px 0; border-bottom: 1px solid var(--dash-border); }
.pfl-inc-payout__block:last-of-type { border-bottom: 0; }
.pfl-inc-payout__label { font-size: 12px; color: var(--dash-muted); }
.pfl-inc-payout__big { font-size: 20px; font-weight: 800; color: var(--dash-navy); margin: 2px 0; }
.pfl-inc-payout__status { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 2px; }
.pfl-inc-payout__sub { font-size: 12px; color: var(--dash-muted); }
.pfl-inc-payout__note { font-size: 11px; color: var(--dash-muted); margin-top: 10px; }

/* Transaction table */
.pfl-inc-txhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.pfl-inc-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pfl-inc-filter { border: 1px solid var(--dash-border); background: #fff; border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: #334155; }
.pfl-inc-filter.is-on { background: var(--dash-navy); color: #fff; border-color: var(--dash-navy); }
.pfl-inc-tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--dash-border); border-radius: 12px; }
.pfl-inc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pfl-inc-table th { text-align: left; padding: 12px 14px; font-size: 12px; color: var(--dash-muted); border-bottom: 1px solid var(--dash-border); white-space: nowrap; }
.pfl-inc-table td { padding: 12px 14px; border-bottom: 1px solid #F1F5F9; }
.pfl-inc-table tr:last-child td { border-bottom: 0; }
.pfl-inc-num { text-align: right; white-space: nowrap; }
.pfl-inc-table th.pfl-inc-num { text-align: right; }
.pfl-inc-ref { color: var(--dash-indigo); font-weight: 700; text-decoration: none; }
.pfl-inc-service { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfl-inc-date { color: var(--dash-muted); white-space: nowrap; }
.pfl-inc-dl { color: var(--dash-navy); }
.pfl-inc-empty-h { font-weight: 700; color: var(--dash-navy); }
.pfl-inc-cta { display: inline-block; margin: 8px 0; padding: 8px 18px; background: linear-gradient(135deg, var(--dash-navy), var(--dash-indigo)); color: #fff !important; border-radius: 10px; text-decoration: none; font-weight: 700; }
.pfl-inc-pager { display: flex; gap: 6px; justify-content: center; margin: 16px 0; }
.pfl-inc-pagebtn { min-width: 34px; height: 34px; border: 1px solid var(--dash-border); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; color: #334155; }
.pfl-inc-pagebtn.is-on { background: var(--dash-navy); color: #fff; border-color: var(--dash-navy); }
.pfl-inc-pagebtn:disabled { opacity: .4; cursor: default; }

@media (max-width: 900px) {
    .pfl-inc-stats { grid-template-columns: repeat(2, 1fr); }
    .pfl-inc-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pfl-inc-stats { grid-template-columns: 1fr; }
}

/* ── Bookings board (PROF-132) ─────────────────────────────────────────── */
.pfl-bk-head { margin-bottom: 16px; }
.pfl-bk-subtitle { font-size: 13px; color: var(--dash-muted); margin-top: 2px; }

.pfl-bk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.pfl-bk-stat { background: #fff; border: 1px solid var(--dash-border); border-left: 4px solid var(--dash-navy); border-radius: 12px; padding: 14px 18px; }
.pfl-bk-stat--indigo { border-left-color: var(--dash-indigo); background: #F5F7FF; }
.pfl-bk-stat--green { border-left-color: #16A34A; background: #F0FDF4; }
.pfl-bk-stat--navy { border-left-color: var(--dash-navy); }
.pfl-bk-stat__label { font-size: 12px; color: var(--dash-muted); }
.pfl-bk-stat__value { font-size: 28px; font-weight: 800; color: var(--dash-navy); line-height: 1.2; }
.pfl-bk-stat__sub { font-size: 12px; color: var(--dash-muted); }

.pfl-bk-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--dash-border); margin-bottom: 14px; }
.pfl-bk-tab { border: 0; background: none; padding: 10px 14px; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pfl-bk-tab.is-on { color: var(--dash-navy); border-bottom-color: var(--dash-navy); }
.pfl-bk-tabbadge { display: inline-block; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

.pfl-bk-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pfl-bk-search { flex: 1 1 220px; min-width: 180px; padding: 8px 12px; border: 1px solid var(--dash-border); border-radius: 8px; font-size: 13px; }
.pfl-bk-datefilter { display: flex; gap: 4px; }
.pfl-bk-dbtn { border: 1px solid var(--dash-border); background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: #334155; cursor: pointer; }
.pfl-bk-dbtn.is-on { background: var(--dash-navy); color: #fff; border-color: var(--dash-navy); }
.pfl-bk-servicesel { padding: 8px 10px; border: 1px solid var(--dash-border); border-radius: 8px; font-size: 13px; background: #fff; }

.pfl-bk-urgent { background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }

.pfl-bk-list { display: flex; flex-direction: column; gap: 12px; }
.pfl-bk-card { background: #fff; border: 1px solid var(--dash-border); border-left: 5px solid var(--dash-border); border-radius: 12px; padding: 14px 16px; }
.pfl-bk-card--pending { border-left-color: #F59E0B; }
.pfl-bk-card--confirmed { border-left-color: #16A34A; }
.pfl-bk-card--cancel { border-left-color: #DC2626; opacity: .85; }
.pfl-bk-card__main { display: flex; gap: 14px; align-items: flex-start; }
.pfl-bk-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
.pfl-bk-avatar.is-navy { background: var(--dash-navy); }
.pfl-bk-avatar.is-indigo { background: var(--dash-indigo); }
.pfl-bk-card__body { flex: 1 1 auto; min-width: 0; }
.pfl-bk-card__namerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pfl-bk-name { font-weight: 700; font-size: 15px; color: #0F172A; }
.pfl-bk-returning { background: #DBEAFE; color: #1D4ED8; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pfl-bk-card__meta { font-size: 13px; color: #475569; margin-top: 2px; }
.pfl-bk-card__date { font-size: 12px; color: var(--dash-muted); margin-top: 2px; }
.pfl-bk-card__notes { font-size: 11px; color: #64748B; margin-top: 4px; }
.pfl-bk-countdown { display: inline-block; margin-top: 6px; background: #FEF3C7; color: #B45309; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.pfl-bk-card__right { flex: 0 0 auto; text-align: right; }
.pfl-bk-gross { font-size: 17px; font-weight: 800; color: #16A34A; }
.pfl-bk-net { font-size: 11px; color: var(--dash-muted); }
.pfl-bk-toprice { font-size: 12px; color: var(--dash-muted); font-style: italic; }
.pfl-bk-pill { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pfl-bk-pill--pending { background: #FEF3C7; color: #B45309; }
.pfl-bk-pill--confirmed { background: #DCFCE7; color: #15803D; }
.pfl-bk-pill--active { background: #DBEAFE; color: #1D4ED8; }
.pfl-bk-pill--done { background: #E2E8F0; color: #334155; }
.pfl-bk-pill--cancel { background: #FEE2E2; color: #B91C1C; }

.pfl-bk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.pfl-bk-btn { border: 1px solid var(--dash-border); background: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 36px; }
.pfl-bk-btn:disabled { opacity: .5; cursor: default; }
.pfl-bk-btn--accept { background: linear-gradient(135deg, #16A34A, #15803D); color: #fff; border: 0; }
.pfl-bk-btn--decline { background: #fff; color: #DC2626; border-color: #DC2626; }
.pfl-bk-btn--cancel { background: #fff; color: #DC2626; border-color: #FCA5A5; }
.pfl-bk-btn--ghost { background: #fff; color: #334155; }
.pfl-bk-btn--icon { padding: 8px 10px; color: #475569; }

.pfl-bk-declinesheet { width: 100%; background: #F8FAFC; border: 1px solid var(--dash-border); border-radius: 10px; padding: 12px 14px; }
.pfl-bk-declinetitle { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pfl-bk-declineopt { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; cursor: pointer; }
.pfl-bk-declinebtns { display: flex; gap: 8px; margin-top: 10px; }

.pfl-bk-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 1400; }
.pfl-bk-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw; background: #fff; z-index: 1401; box-shadow: -6px 0 24px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.pfl-bk-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--dash-border); }
.pfl-bk-drawer__head h2 { font-size: 16px; margin: 0; color: var(--dash-navy); }
.pfl-bk-drawer__x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #64748B; }
.pfl-bk-drawer__body { padding: 16px 18px; overflow-y: auto; }
.pfl-bk-drawer__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #F1F5F9; font-size: 14px; }
.pfl-bk-drawer__row span { color: var(--dash-muted); }
.pfl-bk-drawer__notes { margin-top: 12px; padding: 10px 12px; background: #F8FAFC; border-radius: 8px; font-size: 13px; color: #475569; }
.pfl-bk-drawer__policy { margin-top: 16px; padding: 12px 14px; background: #FEF9F0; border: 1px solid #FDE68A; border-radius: 8px; font-size: 12px; color: #92400E; }
.pfl-bk-drawer__policytitle { font-weight: 700; margin-bottom: 4px; }

@media (max-width: 760px) {
    .pfl-bk-stats { grid-template-columns: 1fr; }
    .pfl-bk-card__main { flex-wrap: wrap; }
    .pfl-bk-card__right { text-align: left; width: 100%; }
}

/* ── Admin detail-page typography (PROF-148) ───────────────────────────────
   Clear label/value hierarchy on the Client & Professional detail pages:
   indigo semi-bold labels vs dark regular values. Scoped to `.admin-fields`
   grids so KPI cards (big number + small grey label) are untouched. */
:root {
    --admin-label-color: #3F52A2;   /* indigo — field labels */
    --admin-value-color: #1E293B;   /* dark slate — filled values */
    --admin-value-empty: #94A3B8;   /* muted grey — empty / dash */
    --admin-muted:       #64748B;
    --admin-border:      #E2E8F0;
}

.admin-fields .mud-typography-caption {
    color: var(--admin-label-color) !important;
    font-weight: 600;
    letter-spacing: .2px;
}

.admin-fields .mud-typography-body2 {
    color: var(--admin-value-color);
    font-weight: 400;
}

/* Empty / not-provided value — recedes visually. */
.admin-empty { color: var(--admin-value-empty) !important; }

/* Technical identifiers (Stripe / session ids) read as machine values. */
.admin-mono {
    font-family: "Roboto Mono", "Courier New", monospace;
    font-size: .78rem;
    color: var(--admin-muted);
}

/* ===========================================================================
   PROF-162 — Admin Questionnaires editor redesign (/admin/questionnaires)
   Palette from Questionnaires_Redesign_Mockup_27072026.html.
   =========================================================================== */
.pfl-qz-filterbar { display: flex; gap: 6px; margin-bottom: 16px; }
.pfl-qz-filter { padding: 6px 16px; border-radius: 20px; border: 1px solid #CBD2DB; background: #fff; font-size: 13px; cursor: pointer; color: #4A5568; font-weight: 600; transition: all .15s; }
.pfl-qz-filter.active { background: #1E3A5F; color: #fff; border-color: #1E3A5F; }
.pfl-qz-filter:hover:not(.active) { border-color: #2D7DD2; color: #2D7DD2; }
.pfl-qz-count { display: inline-flex; align-items: center; gap: 5px; background: #F0F2F5; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 700; color: #8A96A3; white-space: nowrap; }
.pfl-qz-count.has { background: #EBF5FB; color: #2D7DD2; }
.pfl-qz-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.pfl-qz-badge.enabled { background: #D5F5E3; color: #196F3D; }
.pfl-qz-badge.disabled { background: #F0F2F5; color: #8A96A3; }
.pfl-qz-dim { color: #8A96A3 !important; }

.pfl-qz-topbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #E2E6EC; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.pfl-qz-enabled-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 2px 10px 2px 4px; border-radius: 20px; }
.pfl-qz-enabled-pill.on { color: #196F3D; background: #EAF7EF; }
.pfl-qz-enabled-pill.off { color: #8A96A3; background: #F0F2F5; }

.pfl-qz-langbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pfl-qz-langlabel { font-size: 12px; font-weight: 600; color: #8A96A3; text-transform: uppercase; letter-spacing: .5px; }
.pfl-qz-langswitch { display: inline-flex; gap: 4px; background: #F0F2F5; border-radius: 8px; padding: 3px; }
.pfl-qz-langbtn { padding: 6px 20px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; background: transparent; color: #8A96A3; transition: all .15s; }
.pfl-qz-langbtn.active { background: #fff; color: #1E3A5F; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.pfl-qz-dirty { font-size: 12px; font-weight: 700; color: #C0392B; }

.pfl-qz-questions { display: flex; flex-direction: column; gap: 12px; }
.pfl-qz-card { background: #fff; border: 1px solid #E2E6EC; border-radius: 10px; overflow: hidden; }
.pfl-qz-card.expanded { border-color: #2D7DD2; box-shadow: 0 0 0 2px rgba(45,125,210,0.10); }
.pfl-qz-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.pfl-qz-card-head:hover { background: #FAFBFC; }
.pfl-qz-grip { color: #CBD2DB; font-size: 16px; cursor: grab; flex-shrink: 0; }
.pfl-qz-move { display: flex; flex-direction: column; }
.pfl-qz-move .mud-button-root { min-width: 0; padding: 0; height: 16px; width: 22px; }
.pfl-qz-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #1E3A5F; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pfl-qz-preview { flex: 1; min-width: 0; font-weight: 600; color: #24303f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfl-qz-opts { flex-shrink: 0; background: #F0F2F5; color: #4A5568; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.pfl-qz-status { flex-shrink: 0; font-size: 11px; font-weight: 700; }
.pfl-qz-status.on { color: #27AE60; }
.pfl-qz-status.off { color: #8A96A3; }
.pfl-qz-head-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.pfl-qz-chevron { color: #8A96A3; transition: transform .2s; }
.pfl-qz-card.expanded .pfl-qz-chevron { transform: rotate(180deg); }

/* PROF-249: the chevron is now the toggle, so it needs to look like one — it sits
   between two icon buttons that already carry a hover target. The rotate above
   still works: the class stayed on the icon, this wraps it. */
.pfl-qz-chev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s;
}
.pfl-qz-chev-btn:hover { background: #F0F2F5; }

.pfl-qz-card-body { padding: 4px 16px 14px; border-top: 1px solid #E2E6EC; }
.pfl-qz-role-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 0; }
@media (max-width: 900px) { .pfl-qz-role-cols { grid-template-columns: 1fr; } }
.pfl-qz-role-head { padding: 7px 12px; border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.pfl-qz-role-head.client { background: #EBF5FB; color: #1A5276; border: 1px solid #AED6F1; border-bottom: none; }
.pfl-qz-role-head.pro { background: #EAF5EA; color: #1D6A2C; border: 1px solid #A9DFBF; border-bottom: none; }
.pfl-qz-role-body { padding: 12px; border-radius: 0 0 8px 8px; background: #F8F9FB; }
.pfl-qz-role-body.client { border: 1px solid #AED6F1; }
.pfl-qz-role-body.pro { border: 1px solid #A9DFBF; }

.pfl-qz-options { border-top: 1px solid #E2E6EC; padding-top: 12px; margin-top: 2px; }
.pfl-qz-opts-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #8A96A3; margin-bottom: 8px; }
.pfl-qz-opt-heads, .pfl-qz-opt-row { display: grid; grid-template-columns: 30px minmax(0,1fr) minmax(0,1fr) 150px 58px 44px; gap: 8px; align-items: center; }
.pfl-qz-opt-heads { padding: 0 4px 4px; font-size: 11px; font-weight: 700; color: #8A96A3; text-transform: uppercase; letter-spacing: .3px; }
.pfl-qz-opt-row { padding: 6px 4px; border: 1px solid #E2E6EC; border-radius: 8px; margin-bottom: 6px; background: #fff; }
.pfl-qz-suboptions { margin: 0 0 8px 30px; padding: 10px 12px; background: #FBFCFD; border: 1px dashed #CBD2DB; border-radius: 8px; }
.pfl-qz-subitem { padding: 8px 0; border-bottom: 1px solid #E2E6EC; }
.pfl-qz-subitem:last-child { border-bottom: none; }
.pfl-qz-add-option { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 7px; background: #F8F9FB; border: 1px dashed #CBD2DB; border-radius: 8px; cursor: pointer; color: #8A96A3; font-size: 12px; font-weight: 700; transition: all .15s; }
.pfl-qz-add-option:hover { border-color: #2D7DD2; color: #2D7DD2; background: #EBF5FB; }

.pfl-qz-card-foot { border-top: 1px solid #E2E6EC; padding-top: 8px; margin-top: 10px; }
.pfl-qz-add-question { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border: 2px dashed #CBD2DB; border-radius: 10px; background: transparent; cursor: pointer; font-size: 14px; font-weight: 700; color: #8A96A3; transition: all .15s; }
.pfl-qz-add-question:hover { border-color: #2D7DD2; color: #2D7DD2; background: #EBF5FB; }
.pfl-qz-savebar { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; gap: 10px; background: #fff; border-top: 1px solid #E2E6EC; padding: 12px 16px; margin: 18px -12px -12px; box-shadow: 0 -2px 8px rgba(0,0,0,0.05); }

/* ── Membership page (PROF-185 / PROF-205 / PROF-206) ──────────────────────
   The monthly/annual control was two MudButtons whose Filled/Outlined pair read
   as "both selected" (AC-M02). One pill, one active half, no ambiguity. */
/* PROF-627 §2 — centred on the card grid.

   It was inline-flex with no auto margin, so it sat hard against the left
   edge while the three cards it controls are centred beneath it. The public
   page's own toggle has always been centred (.pfl-plans-billing uses
   `margin: 0 auto`); this brings the dashboard in line with it rather than
   inventing a second convention. */
.pfl-plan-toggle {
    display: flex;
    width: fit-content;
    margin: 0 auto 16px;
    padding: 4px;
    border-radius: 999px;
    background: #EEF1F8;
}
.pfl-plan-toggle__opt {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #5A6478;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.pfl-plan-toggle__opt.is-active {
    background: #FFFFFF;
    color: var(--dash-navy, #2B2E7C);
    box-shadow: 0 1px 3px rgba(15, 31, 75, 0.16);
}
/* PROF-409 made this the same pill as the landing page's; PROF-417 shaped
   it into the fully-rounded chip, and PROF-425 harmonised its colours with
   the banner family — lavender fill, indigo ink, same tokens as the landing
   savepill so the two surfaces cannot diverge. Still no .is-active gate:
   the chip reads as a distinct highlight whichever toggle half is on. */
.pfl-plan-toggle__note {
    display: inline-block;
    margin-left: 6px;
    background: var(--pfl-promo-pill, #D9E0FC);
    color: var(--pl-indigo, #2B2E7C);
    border: 1px solid var(--pfl-promo-pill-border, #A5B4FC);
    border-radius: 9999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

/* AC-M03 — full-width confirmation that annual billing is on. */
.pfl-plan-annualbanner {
    padding: 10px 16px;
    margin-bottom: 16px;
    border: 1px solid #A7E3BE;
    border-radius: 10px;
    background: #ECFDF3;
    color: #15803D;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* PROF-205 / AC-M06 — a readable amber pill, not a washed-out tinted chip. */
/* PROF-289 item 2: the badge used to sit IN the flow above the plan name, so
   the one card that has it pushed its own title down and the three titles no
   longer lined up. Lifted out of the flow — it now floats over the card's top
   edge, and every title starts at the same height whether the card is flagged
   or not.

   The height it used to occupy is given back as padding on the card itself,
   so the badge has somewhere to sit without overlapping the title. */
/* PROF-323: reserved for the current-plan chip, and kept at this height even
   when there is no chip to show. The chip is normal flow content while the
   "most popular" pill is absolutely positioned, so without this the card
   carrying the chip pushed its own title down and the three names stopped
   lining up — visible on whichever cycle the professional was actually on. */
.pfl-plan-badgerow {
    min-height: 26px;
    display: flex;
    align-items: center;
}

/* PROF-260 §A.2 — the free-month pill, deliberately identical to step 8's
   .pfl-wiz-plan-badge-free. Same tokens rather than the same hex: the point of
   the ticket is that the two screens stop looking like two products, and a
   copied colour drifts the first time either token moves. */
.pfl-plan-freebadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--pfl-chip-verified-bg);
    color: var(--pfl-chip-verified-text);
    font-size: 11px;
    font-weight: 700;
    /* No text-transform — Greek loses its accents under uppercase. */
}

/* PROF-215 AC-MC01 (Memberships_CardUI README §2) — the current-plan badge,
   lifted out of the card's flow onto its top edge.

   Deliberately the same geometry as .pfl-plan-popularwrap below rather than a
   second set of numbers: the two pills are alternatives to each other on the
   same edge, and the moment they disagree by a pixel it shows on whichever
   cycle the professional happens to be on. They never appear together — the
   popular pill renders only when !IsCurrent — so there is no collision to
   resolve, only an alignment to keep. */
.pfl-plan-currentwrap {
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.pfl-plan-currentbadge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--mud-palette-primary);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* PROF-215 AC-MC06 — the current card tinted and bordered, the other two given
   an explicit border of their own so the set reads as a comparison with one
   picked out. Border widths are 2px and 1.5px on purpose: equal-ish weight, so
   the cards do not change size when the current one moves between them. */
.pfl-plan-card {
    background: #FFFFFF;
    border: 1.5px solid #D0D4D8;
}

.pfl-plan-card.pfl-plan-card--current {
    background: #F4F6F9;
    border: 2px solid var(--mud-palette-primary);
}

/* PROF-405 — the CTA band is the same height on every card, sized for its
   tallest content (button + the Pro card's three-line waitlist note), so the
   divider and the feature list start level across the row. The current plan's
   card renders the band empty rather than skipping it — PROF-215's no-action
   rule without the divider jumping up. Measured on live GR, the tallest band
   runs ~99px; 100 with a hair of slack. */
.pfl-plan-ctazone {
    min-height: 100px;
}

.pfl-plan-popularwrap {
    position: absolute;
    /* PROF-323: two pixels higher, so the pill clears the card edge rather
       than resting on it. */
    top: -14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.pfl-plan-popular {
    display: inline-block;
    /* PROF-494: the uniform pill — 6px 16px and the canonical 9999px, the
       same three numbers the other two surfaces now carry. */
    padding: 6px 16px;
    border-radius: 9999px;
    /* PROF-409: navy, matching the landing page's badge — orange is reserved
       for exactly one thing now, the annual-savings pill. */
    background: #0F1F4B;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

/* PROF-304 (Subscriptions_Page_Redesign README §2) — "Όλα όσα περιλαμβάνει το
   Βασικό, και επιπλέον:". It frames the three bullets under it, so it is set
   apart from them rather than styled like a fourth one: smaller, muted, italic,
   and given the gap that separates a heading from its list. Block display
   because MudText's caption is inline and would otherwise sit on the same line
   as the first tick. */
.pfl-plan-inherits {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-style: italic;
    color: #64748B;
}

/* PROF-311 — plan name and price amount bold, to match onboarding step 8.
   MudBlazor's h5/h6 set their own font-weight, so these are qualified with
   .mud-typography to outrank it on specificity rather than relying on this
   file happening to be linked after MudBlazor.min.css.

   The suffix is pinned back to normal weight: the ticket asks for "€7,00" to
   stand out, not for "/ μήνα (χρεώνεται ετήσια)" to shout along with it. Its
   size and colour move here from an inline style at the same time — same
   values, one less place to look. */
/* PROF-324: matched to onboarding step 8 outright, not just in weight.
   PROF-311 made these bold but left MudBlazor's h6/h5 deciding the SIZE and the
   colour, so the two screens still did not read alike — the name was smaller
   and grey-black where step 8 has it 20px navy, and the amount was a different
   size again. The values below are step 8's own (.pfl-wiz-plan-name /
   .pfl-wiz-plan-amount), so a professional sees the same card whether they are
   signing up or changing plan.

   Still qualified with .mud-typography: MudBlazor's typography rules set size,
   weight and colour themselves, and without the extra specificity this file
   would only win by being linked afterwards. */
.mud-typography.pfl-plan-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--pfl-navy);
}

.mud-typography.pfl-plan-price {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.pfl-plan-price .pfl-plan-priceper {
    font-size: 14px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* AC-M04 — the monthly price the annual one replaces. */
.pfl-plan-oldprice {
    text-decoration: line-through;
    color: #94A3B8;
    margin-bottom: -2px;
}

/* AC-M05 — the trial banner is the page's call to action, so it is a card with a
   button, not a flat alert. Amber because it is a deadline, not an error. */
.pfl-plan-trialcard {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1.5px solid #F0B460;
    border-radius: 12px;
    background: #FFF9EF;
}

/* PROF-492 §5 — the banner wears the time it has left. The amber above stays
   the 3-7 day default; over a week is calm lavender, 0-2 days is red. */
.pfl-plan-trialcard--calm {
    border-color: #DCD2F0;
    background: #F5F2FC;
}

.pfl-plan-trialcard--urgent {
    border-color: #F0A9A9;
    background: #FDECEC;
}

/* PROF-492 §1 — the recommended card's frame, the same 2px indigo and soft
   shadow its /professionals twin wears. */
.pfl-plan-card--popular {
    border: 2px solid #2B2E7C;
    box-shadow: 0 6px 18px rgba(43, 46, 124, 0.12);
}
.pfl-plan-trialcard__icon { color: #D97706; flex: none; }
.pfl-plan-trialcard__body { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 0; }
.pfl-plan-trialcard__title { font-size: 14px; font-weight: 700; color: #92400E; }
.pfl-plan-trialcard__sub { font-size: 13px; color: #A16207; }
.pfl-plan-trialcard__cta {
    flex: none;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--pfl-grad-cta, linear-gradient(90deg, #0F1F4B, #2B2E7C));
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.pfl-plan-trialcard__cta:hover { color: #FFFFFF; opacity: .92; }

/* PROF-168 issue 1: keep the dashboard's header offset in step with the header
   itself, which drops to 56px at the same breakpoint (global.css). */
@media (max-width: 1023px) {
    .pfl-dash-shell { --pfl-header-h: 56px; }
}

/* ═══ Admin shell (PROF-246) ════════════════════════════════════════════════
   The admin area used a navy MudAppBar and a dark MudDrawer. It now wears the
   site header and a light shell, the same move ProDashboardLayout made in
   PROF-168; the tokens below are that layout's, reused rather than re-picked.

   The 28px top padding is deliberate, not taste: the old shell put content
   92px below the viewport top (80px margin clearing the fixed app bar + 12px
   of p-3). The new one is 64px of sticky header + 28px — the same 92px — so
   the hardcoded `calc(100vh - 180px/200px/230px)` panels on Categories, Faqs,
   SupportMessages, DisputeDetail and ReportDetail keep their intended size
   instead of silently overflowing. */
.pfl-admin-shell {
    /* Mirrors .pfl-header-inner in global.css — 64px desktop, 56px below 1024px. */
    --pfl-header-h: 64px;

    display: flex;
    min-height: calc(100vh - var(--pfl-header-h));
    background: #FFFFFF;
    color: #0F172A;
    font-family: var(--pfl-font, 'Manrope', sans-serif);
}

.pfl-admin-sidebar {
    width: 260px;
    flex: none;
    background: #FFFFFF;
    border-right: 1px solid #E2E8F0;
    padding: 16px 12px;
    position: sticky;
    top: var(--pfl-header-h);
    align-self: flex-start;
    height: calc(100vh - var(--pfl-header-h));
    overflow-y: auto;
}

.pfl-admin-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 28px 32px 48px;
}

/* The wordmark the MudAppBar used to carry. */
.pfl-admin-brand {
    padding: 8px 12px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #0F1F4B;
    cursor: pointer;
}

.pfl-admin-sidebar .mud-nav-link,
.pfl-admin-sidebar .mud-nav-link .mud-nav-link-text,
.pfl-admin-sidebar .mud-nav-link .mud-icon-root {
    color: #2B2E7C;
}

.pfl-admin-sidebar .mud-nav-link:hover {
    background: #F8FAFC;
    color: #0F1F4B;
}

.pfl-admin-sidebar .mud-nav-group > .mud-nav-link {
    color: #0F1F4B;
    font-weight: 600;
}

/* Point 3 of the ticket. MudBlazor's own typography is theme-driven and would
   otherwise win inside admin tables, inputs and tabs. Dialogs render into a
   portal outside this shell, so they are not covered — say so rather than
   reach for an unscoped rule that would touch the whole site. */
.pfl-admin-shell .mud-typography,
.pfl-admin-shell .mud-button-root,
.pfl-admin-shell .mud-input,
.pfl-admin-shell .mud-table,
.pfl-admin-shell .mud-tabs {
    font-family: inherit;
}

@media (max-width: 1023px) {
    .pfl-admin-shell { --pfl-header-h: 56px; }
}

@media (max-width: 960px) {
    .pfl-admin-shell { flex-direction: column; }

    .pfl-admin-sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid #E2E8F0;
    }

    .pfl-admin-main { padding: 20px 16px 36px; }
}