/* ══════════════════════════════════════════════════════════════
   Helpado — Custom stylesheet
   Rule: Colors come from the SAP theme.
         This file owns only: layout, spacing, shape, elevation.
   ══════════════════════════════════════════════════════════════ */

/* ── Utility ──────────────────────────────────────────────────── */
.textCenter { text-align: center; }
.fontBold   { font-weight: 700; }
.smallText  { font-size: 0.9rem; }
.errorText  { font-size: 0.8rem; }

/* ══════════════════════════════════════════════════════════════
   HEADER — collapsed to 2 items (bell + avatar)
   ══════════════════════════════════════════════════════════════ */
.hhHeaderRight {
    gap: 4px;
    align-items: center;
    padding-right: 4px;
}
/* The header bar inherits line-height 57.2px, so UI5's flex-item wrappers are
   sized by that line box rather than their content, and the inline-block
   children (buttons, avatar, wordmark) sit on its BASELINE instead of being
   centred. Measured on device: the bar centres at 22, but the wordmark sat at
   11, bell and globe at 15 and the avatar at 13 — four different heights.
   Resetting the line box and centring the wrapper puts all four on 22. */
header .sapMBar .sapMFlexBox,
header .sapMBar .sapMFlexItem {
    line-height: normal !important;
}
header .sapMBar .sapMFlexItem {
    display: flex !important;
    align-items: center !important;
}
/* Header icon buttons — one 44px touch target each. The bell was pinned to 44px
   but the language globe was left at UI5's default 36px, so the two sat on a
   different rhythm. */
.hhHeaderRight .sapMBtn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
}
/* Avatar in header. The old margin-left made the globe->avatar gap 6px while
   bell->globe was 4px; the flex gap already spaces these evenly. */
.hhHeaderAvatar {
    cursor: pointer;
}
.hhHeaderAvatar.sapFAvatar {
    width: 32px !important;
    height: 32px !important;
}

/* ══════════════════════════════════════════════════════════════
   SAFE AREA — notch + home indicator
   ══════════════════════════════════════════════════════════════ */
/* Pad the <header> element ONLY. UI5 puts sapMPageHeader on that element AND
   on the Bar inside it, so the old ".sapMPage > header, .sapMPageHeader"
   selector applied the inset twice (header 59pt + bar 59pt on an iPhone with
   the WebView under the status bar). */
.sapMPage > header {
    padding-top: env(safe-area-inset-top) !important;
}
/* sap.m.Page positions its content section at a fixed top equal to the
   UNPADDED header height, so the padded header covered the first inset-height
   of every page — seen on iOS as the map and the dashboard title sitting
   under the header. Shift the section by the same inset; on web/Android the
   inset is 0 and nothing moves. */
.sapMNav > .sapMPage.sapMPageWithHeader:not(.sapMPageWithSubHeader) > section {
    top: calc(2.75rem + env(safe-area-inset-top)) !important;   /* 2.75rem = 44px, the cozy header height UI5 uses */
}

/* ══════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR — Page footer aggregation
   SAP Page footer renders below content automatically — no
   position:fixed hacks needed.
   ══════════════════════════════════════════════════════════════ */
/* ── Bottom navigation bar ────────────────────────────────────── */
.hhBottomNav.sapMBar {
    height: auto !important;
    min-height: 64px !important;
    padding: 0 0 env(safe-area-inset-bottom) 0 !important;
    border-top: 1px solid var(--sapContent_ForegroundBorderColor) !important;
    box-shadow: 0 -2px 12px rgba(15,23,42,0.08) !important;
    display: flex !important;
    align-items: stretch !important;
    z-index: 0 !important;
}
/* Hide the bottom nav while any dialog is open (class toggled in Component.js) so it
   cannot show through or under a full-screen dialog. */
body.hhDialogOpen .hhBottomNav.sapMBar {
    display: none !important;
}
/* A stretched dialog left a strip of background uncovered along the bottom.
   Measured on a Galaxy S21 FE (SM-G990B, innerHeight 805): the dialog rendered
   761px tall, so 44px showed through. SAP's own .sapMDialogStretched rule is
   correct (top/bottom 0, height auto) — but UI5's JS writes an INLINE
   max-height (805 - 88 = 717px) onto the element, and an inline style beats the
   stylesheet. Only !important can win that, so this cannot be fixed from the
   Dialog API. Verified on the device: bottom gap 44px -> 0.
   Emulated viewports never reproduced it; the real WebView was needed. */
.sapMDialog.sapMDialogStretched {
    max-height: 100% !important;
}
/* SAP positions the dialog title bar (.sapMDialogTitleGroup) absolutely at top:0
   (~40px). The scrollable content had no matching top padding, so the title
   overlapped and hid the first field/label. Offset the content so it clears the title. */
.sapMDialog .sapMDialogSection {
    padding-top: 2.75rem !important;
}
/* Dialogs that ALSO have a subHeader need to clear both bars. Measured: the
   title group occupies 0-44px and the subHeader 44-92px, while the section only
   padded 44px — so the first row of content (the task's status chip and budget)
   rendered underneath the subHeader and was invisible. */
.sapMDialog.hhDialogWithSubHeader .sapMDialogSection,
/* UI5's own phone pickers (ComboBox / MultiComboBox / Select value help) carry
   sapMDialogWithSubHeader and put their search field in that subHeader — the
   first list row ("Cleaning" in the profile's category picker) sat under it and
   could not be tapped. Same offset. */
.sapMDialog.sapMDialogWithSubHeader .sapMDialogSection {
    padding-top: 5.75rem !important;
}
/* A stretched dialog fills the WebView. When the WebView runs under the status
   bar (iOS, before the StatusBar plugin has resized it — a state that can last
   the whole session) the title bar and its Close/✕ sat in the system strip,
   where taps never reach the page: the category picker could not be closed.
   Shift the title bar, the sub-header and the content by the inset, exactly
   as the page header/section are. On web/Android the inset is 0. */
.sapMDialog.sapMDialogStretched .sapMDialogTitleGroup {
    top: env(safe-area-inset-top) !important;
}
.sapMDialog.sapMDialogStretched .sapMDialogSubHeader {
    top: calc(2.75rem + env(safe-area-inset-top)) !important;
}
.sapMDialog.sapMDialogStretched .sapMDialogSection {
    padding-top: calc(2.75rem + env(safe-area-inset-top)) !important;
}
.sapMDialog.sapMDialogStretched.hhDialogWithSubHeader .sapMDialogSection,
.sapMDialog.sapMDialogStretched.sapMDialogWithSubHeader .sapMDialogSection {
    padding-top: calc(5.75rem + env(safe-area-inset-top)) !important;
}
.hhBottomNav .sapMBarMiddle,
.hhBottomNav .sapMBarPH {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
}
.hhBottomNavRow {
    width: 100% !important;
    padding: 6px 4px !important;
}
/* Equal-width cells */
.hhBottomNavRow > .sapMFlexItem {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
}
/* Tasks and Messages sit inside an extra HBox (it anchors their badge), so they
   were not direct flex children and sized to their label instead: measured
   45px for "Tasks" against 79px for "Schedule". The selected pill therefore
   changed width as you moved between tabs. */
.hhBottomNav .hhNavBtnWrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
/* UI5 wraps every HBox child in its own .sapMFlexItem, so the button inside the
   badge wrapper sits one level deeper than the row rule reaches and collapsed to
   its label width — 38px for "Tasks" beside 79px for "Schedule". */
/* The badge <core:HTML> is a sibling of the button inside this wrapper, so an
   even flex share gave the button only half the cell. The badge itself is
   absolutely positioned and needs no width of its own. */
.hhBottomNav .hhNavBtnWrap > .sapMFlexItem {
    flex: 0 0 0 !important;
    min-width: 0 !important;
}
.hhBottomNav .hhNavBtnWrap > .sapMFlexItem:first-child {
    flex: 1 1 0 !important;
}
/* The badge's core:HTML sits in its own zero-width .sapMFlexItem at the button's
   right edge, and UI5 makes that item position:relative — so it, not the wrap,
   was the badge's containing block. Make it static so the (relative) wrap is. */
.hhBottomNav .hhNavBtnWrap > .sapMFlexItem:last-child {
    position: static !important;
}
/* ── Selected tab ────────────────────────────────────────────────────────
   Selection used type="Emphasized" — UI5's PRIMARY ACTION style, a solid
   #5DBF8A fill with near-black text. In a nav bar that reads as a button
   someone dropped in, not as the current tab. Now: a soft tint plus brand
   green at a heavier weight, so selection is carried by colour, weight and
   background together rather than by a slab of green.
   Unselected was #4bb87d on white — 2.48:1, below WCAG AA. The polish pass
   removed the old override expecting sapButton_TextColor to cover it, but
   transparent buttons do not read that token, so the contrast fix regressed
   here. #4A5568 measures 7.53:1. */
.hhBottomNav .hhNavBtn .sapMBtnContent {
    color: #4A5568 !important;
    transition: color 0.15s ease;
}
/* The glyph sits in the same 40px mint square as a service tile's icon
   (.fiSvcIconWrap / .fiSvcIcon: same radius, tint and green), so the bar and
   the grid read as one set. Before, the bar had dark-grey glyphs a size larger
   than the tiles' and a pale pill for selection, and looked like a different
   app's footer. Selection is the tiles' hover state: solid green, white glyph. */
.hhBottomNav .hhNavBtn .sapMBtnIcon.sapUiIcon {
    color: #10b981 !important;
    background: rgba(16,185,129,0.12) !important;
    width: 40px !important;
    height: 40px !important;
    /* sapMBtnIconLeft adds padding-right:6px (gap to a label beside it) and
       the theme caps the glyph at max-height:38px; both would squash the square
       to 46x38. */
    max-height: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease, background 0.15s ease;
}
.hhBottomNav .hhNavBtn[data-hhsel="true"] .sapMBtnInner {
    background: transparent !important;
    border-color: transparent !important;
}
.hhBottomNav .hhNavBtn[data-hhsel="true"] .sapMBtnIcon.sapUiIcon {
    background: #10b981 !important;
    color: #fff !important;
}
.hhBottomNav .hhNavBtn[data-hhsel="true"] .sapMBtnContent {
    color: #1C7449 !important;   /* 6.9:1 on white */
    font-weight: 600 !important;
}
/* Nav button outer — fills cell, no side effects */
.hhNavBtn.sapMBtn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    border-radius: 12px !important;
    gap: 0;
    transition: background 0.15s ease !important;
}
/* SAP inner span — layout only, let SAP handle hover/focus visuals */
.hhNavBtn .sapMBtnInner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    gap: 3px !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}
.hhNavBtn .sapMBtnIcon.sapUiIcon {
    font-size: 1.25rem !important;   /* = .fiSvcIcon, the tile glyph size */
    margin: 0 !important;
    line-height: 1 !important;
}
.hhNavBtn .sapMBtnContent {
    /* 0.65rem (10.4px) truncated "Messages" to "Mes...s". 0.7rem still fits the
       75px tab at 375px and is far more legible. */
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.01em;
    display: block !important;
}
/* Higher specificity to beat SAP Bar theme hiding labels */
.hhBottomNav .hhNavBtn .sapMBtnContent { display: block !important; }
/* Badge on Tasks / Messages */
.hhNavBtnWrap {
    position: relative;
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}
.hhNavBadge {
    position: absolute;
    /* Containing block is .hhNavBtnWrap (see the position:static rule above),
       whose top edge is the icon's top edge — so top:0 lands the badge on the
       icon's upper-right corner. (The old -30px offset was measured from UI5's
       zero-height flex item level with the label; against the wrap it pushed
       the badge above the bar, where sapMBarPH's overflow:hidden clipped it.)
       Horizontally: anchor to the ICON, not the tab's right edge. The wrap is a
       centred flex row, so its midpoint is the icon's midpoint; right:10px put
       the badge at the far edge of a wide desktop tab, on the border to the
       next one, so the Tasks count read as the Messages count. */
    top: 0; left: calc(50% + 6px); right: auto;
    background: #ef4444; color: #fff;
    font-size: 0.58rem; font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 10px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
/* Small phones — tighten slightly */
@media (max-width: 380px) {
    .hhNavBtn.sapMBtn { padding: 5px 0 !important; }
    /* Was 0.6rem (9.6px) — this is the rule 375px phones actually hit, and it
       was both the truncation and the legibility problem. */
    .hhNavBtn .sapMBtnContent { font-size: 0.7rem !important; }
}
/* Very narrow — hide labels */
@media (max-width: 320px) {
    .hhNavBtn .sapMBtnContent { display: none !important; }
}

/* ── Brand wordmark ───────────────────────────────────────────
   The header showed "Helpado" as plain bold text, indistinguishable from a
   page title. Tie it to the mark: brand green (#2F855A, the AA-safe shade
   used for nav labels) with slightly tightened tracking so it reads as a
   wordmark rather than a heading. */
.hhWordmark.sapMTitle {
    color: #2F855A !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.015em !important;
}

/* ── Login ────────────────────────────────────────────────────── */
.loginCard {
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(15,23,42,0.12);
    padding: 24px 20px;
}
.maxWidth400 { max-width: 420px; }

@media (max-width: 480px) {
    .loginCard { padding: 16px 14px; border-radius: 14px; }
}

/* ── Expert / helper cards ────────────────────────────────────── */
.expertCard   { border-radius: 14px; }
.helperCardActions { min-width: 90px; }
.helperCardBtn { width: 100%; }

@media (max-width: 480px) {
    .helperCardActions {
        min-width: unset;
        width: 100%;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
        align-items: center !important;
    }
    .helperCardActions .sapMBtn { width: auto !important; min-width: 0; }
    .helperCardBtn { width: auto !important; }
}

/* ── Map ──────────────────────────────────────────────────────── */
/* The map div carries the height and .hhMapBox wraps it. They used to be set
   independently (26vh box, 260px/180px div), so on a tall phone a blank strip
   sat between the map and the Show/Hide button and on a short desktop window
   the box cropped the attribution. */
.mapDiv   { height: 26vh; min-height: 180px; width: 100%; z-index: 0; }
#googleMap { width: 100%; }

/* ── Chat bubbles — raw HTML injected via core:HTML ── */
#chatBubbles     { display: flex; flex-direction: column; gap: 8px; padding: 12px; }

/* ── DM chat bubbles ──────────────────────────────────────────────────────
   Rendered by real UI5 controls (List/CustomListItem in DmChatDialog); only
   the bubble shape/colour lives here, driven by theme variables so it follows
   the brand instead of hardcoded hex values. hhown is written to the DOM by
   sap.ui.core.CustomData. */
.hhBubble {
    max-width: 80%;
    margin: 0 8px;
    padding: 8px 12px;
    border-radius: 16px;
}
/* A message removed by moderation or unsent by its sender: the reader sees the
   i18n placeholder in a secondary colour. On the own (green) bubble grey was
   unreadable, so it is translucent white there. */
.hhBubble .sapMText[data-hhremoved="true"] { color: #556b82; font-style: italic; }
.hhBubble[data-hhown="true"] .sapMText[data-hhremoved="true"] { color: rgba(255,255,255,.85); }

/* ── Bottom sheet (SheetMixin) ───────────────────────────────────────────────
   One sap.m.Dialog pinned to the bottom edge, full width on phones and a
   centred 30rem card on wider screens; rounded top corners, no header. */
.sapMDialog.hhSheet {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 30rem !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 30px rgba(19,30,41,.18) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sapMDialog.hhSheet .sapMDialogSection { padding-top: 0 !important; }   /* no title bar to clear */
.sapMDialog.hhSheet .sapMDialogScrollCont { padding: 0 !important; }
.hhSheetHandle { width: 36px; height: 4px; border-radius: 2px; background: #d9d9d9; margin: 10px auto 6px; }
.hhSheetRows { padding: 0 8px; }
.hhSheet .hhSheetRow.sapMBtn { height: 3rem !important; }
.hhSheet .hhSheetRow .sapMBtnInner { justify-content: flex-start !important; padding-left: 0.75rem !important; }
.hhSheet .hhSheetRow .sapMBtnContent, .hhSheet .hhSheetRow .sapMBtnIcon { color: #131e29 !important; font-size: 1rem !important; }
.hhSheet .hhSheetRow.hhSheetDanger .sapMBtnContent, .hhSheet .hhSheetRow.hhSheetDanger .sapMBtnIcon { color: #B00020 !important; }
.hhSheet .hhSheetRow.hhSheetCancel { border-top: 1px solid #ececec; margin: 6px 0 4px; }
.hhSheet .hhSheetRow.hhSheetCancel .sapMBtnInner { justify-content: center !important; padding-left: 0 !important; }
.hhSheet .hhSheetRow.hhSheetCancel .sapMBtnContent { color: #556b82 !important; font-weight: 600; }
/* confirm variant */
.hhSheetBody { padding: 4px 20px 12px; }
.hhSheetTitle { font-size: 1.125rem; font-weight: 700; color: #131e29; display: block; margin-bottom: 6px; }
.hhSheetText  { color: #556b82; display: block; margin-bottom: 14px; }
.hhSheetButtons .sapMBtn { min-width: 6rem; }
.hhSheet .hhSheetCancelBtn .sapMBtnContent { color: #556b82 !important; font-weight: 600; }
.hhSheet .hhSheetConfirmBtn .sapMBtnContent { color: #B00020 !important; font-weight: 700; }
/* A tap leaves focus on the row; the theme then draws a green frame around it,
   which reads as a selected state. Sheets are touch UI: no focus frame here. */
.hhSheet .sapMBtn:focus::after,
.hhSheet .sapMBtn .sapMBtnFocusDiv,
.hhSheet .sapMBtnInner::before { display: none !important; }   /* the theme draws its 2px focus frame as ::before */
.hhSheet .sapMBtn:focus > .sapMBtnInner,
.hhSheet .sapMBtnInner:focus,
.hhSheet .sapMBtnInner.sapMBtnTransparent { border-color: transparent !important; box-shadow: none !important; outline: none !important; }

.hhBubble[data-hhown="true"] {
    background: var(--sapButton_Emphasized_Background, #4FB584);
    color: var(--sapButton_Emphasized_TextColor, #fff);
    border-bottom-right-radius: 4px;
}
.hhBubble[data-hhown="false"] {
    background: var(--sapNeutralBackground, #eff1f2);
    color: var(--sapTextColor, #1e293b);
    border-bottom-left-radius: 4px;
}
/* Composer — a comfortable typing/tap target (44px, the usual minimum on
   phones) matched to the Send button. UI5 Input has no height property, and
   the height has to be set on the root too or sapMInputBaseHeightMargin
   keeps it at 36px and the taller inner field overflows it. */
.sapMInputBase.hhComposerInput,
.hhComposerInput .sapMInputBaseContentWrapper,
.hhComposerInput .sapMInputBaseInner {
    min-height: 2.75rem;
    height: auto;
}
.hhComposerSend {
    min-height: 2.75rem;
}

.hhBubbleMeta {
    font-size: 0.6875rem;
    opacity: 0.75;
}

/* ── Booking list ─────────────────────────────────────────────── */
.bookingInfoBox   { flex: 1 1 auto; min-width: 0; }
.bookingActionsBox { flex: 0 0 auto; min-width: 100px; }

@media (max-width: 480px) {
    .bookingActionsBox { min-width: unset; width: 100%; align-items: flex-start !important; margin-top: 6px; }
}

/* ── Notification badge (bell) ────────────────────────────────── */
.hhNotifBtnWrap { position: relative; display: inline-flex !important; align-items: center; }
.hhNotifBadge {
    position: absolute;
    top: -4px; right: -4px;
    background: #ef4444; color: #fff;
    font-size: 0.65rem; font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 10px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ── In-app toast ─────────────────────────────────────────────── */
.hhInAppToast {
    position: fixed; top: 16px; left: 50%;
    transform: translateX(-50%) translateY(-80px);
    z-index: 9999;
    border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: flex-start; gap: 10px;
    min-width: 260px; max-width: 92vw;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(.175,.885,.32,1.275), opacity 0.3s ease;
}
.hhInAppToastSlide { transform: translateX(-50%) translateY(0); opacity: 1; }
.hhToastIcon  { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.hhToastBody  { flex: 1; min-width: 0; }
.hhToastBody strong { display: block; font-size: 14px; margin-bottom: 2px; }
.hhToastBody div    { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hhToastClose { background: none; border: none; font-size: 16px; cursor: pointer; padding: 0; flex-shrink: 0; margin-top: 2px; }

/* ── Messages tab ─────────────────────────────────────────────── */
/* Bottom-nav clearance. The nav sits at the foot of the page but the tab's
   ScrollContainer runs underneath it, so without this the last conversation
   stays behind the nav at maximum scroll and cannot be brought into view —
   measured at 35px clipped with a full list. .hhTaskList and .fiServicesGrid
   already carried the same 80px; Messages and My Schedule were simply missed. */
.hhMsgTab         { padding-bottom: 80px; }
.hhMsgSearchWrap  { padding: 12px 16px 10px; position: sticky; top: 0; z-index: 10; }
.hhMsgSectionHdr  { padding: 16px 18px 6px; gap: 6px; }
.hhMsgSectionLabel { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; }
.hhMsgSectionLabelSpaced { padding: 16px 18px 6px; display: block; }

.hhMsgItem        { margin: 3px 12px; border-radius: 16px; overflow: hidden; transition: box-shadow 0.15s, transform 0.1s; }
.hhMsgItem:active { transform: scale(0.99); }
.hhMsgItemInner   { padding: 12px 14px; gap: 12px; min-width: 0; }
.hhMsgAvatar      { flex-shrink: 0; }
.hhMsgContent     { flex: 1; min-width: 0; gap: 2px; }
.hhMsgName.sapMText    { font-size: 15px !important; font-weight: 500 !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
/* Unread conversation styling. Driven by data-hhunread (sap.ui.core.CustomData
   with writeToDom) rather than a bound class: UI5 does not evaluate binding
   expressions in "class", so the previous
   class="{= ${unread_count} > 0 ? 'hhMsgItem hhMsgItemUnread' : 'hhMsgItem'}"
   silently produced no classes at all — not even the base one. */
.hhMsgItem[data-hhunread="true"] {
    background: var(--sapList_Hover_Background, #f0f7e5);
}
.hhMsgItem[data-hhunread="true"] .hhMsgName.sapMText {
    font-weight: 700 !important;
}
.hhMsgItem[data-hhunread="true"] .hhMsgTime.sapMText {
    color: var(--sapButton_Emphasized_Background, #4FB584) !important;
    font-weight: 700 !important;
}
.hhMsgItem[data-hhunread="true"] .hhMsgPreview.sapMText {
    font-weight: 700 !important;
    color: var(--sapTextColor, #131e29) !important;
}
.hhMsgTime.sapMText    { font-size: 11px !important; flex-shrink: 0; white-space: nowrap; }
.hhMsgPreview.sapMText { font-size: 13px !important; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; line-height: 1.4; }

.hhUnreadBadge.sapMText {
    background: #ef4444 !important; color: #fff !important;
    border-radius: 10px !important; font-size: 11px !important;
    font-weight: 700 !important; padding: 2px 7px !important;
    min-width: 20px; text-align: center; flex-shrink: 0; line-height: 1.6;
}

.hhMsgEmpty     { padding: 56px 32px 32px; text-align: center; }
.hhMsgEmptyIcon { font-size: 52px !important; margin-bottom: 12px; opacity: 0.55; color: var(--sapContent_IconColor); }

/* ── Filter pills ─────────────────────────────────────────────── */
.hhFilterPill   { border-radius: 20px; font-size: 13px; }
.hhTaskToggle   { border-radius: 20px; }
@media (max-width: 480px) { .hhTaskToggle { font-size: 13px; } }

/* ── Tasks tab ────────────────────────────────────────────────── */
.hhTasksTab     { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.hhTasksTopBar  { padding: 10px 16px 0; flex-shrink: 0; border-bottom: 1.5px solid; }
.hhUnderlineTabs { gap: 0; }

.hhUTab.sapMBtn {
    height: 40px !important; min-width: 0 !important;
    padding: 0 16px !important; font-size: 0.9rem !important; font-weight: 600 !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    background: transparent !important; position: relative;
}
.hhUTab.sapMBtn.sapMBtnEmphasized {
    background: transparent !important; box-shadow: none !important;
}

.hhPostTaskBtn.sapMBtn {
    border-radius: 10px !important; font-weight: 700 !important;
    font-size: 0.85rem !important; height: 36px !important; padding: 0 14px !important;
}

.hhTasksSearchWrap { padding: 0 16px 10px; flex-shrink: 0; }
.hhTasksSearchField.sapMSF { border-radius: 12px !important; box-shadow: none !important; height: 42px !important; }

.hhCatDropWrap  { padding: 8px 16px 10px; flex-shrink: 0; }
.hhCatDropBtn.sapMBtn {
    border-radius: 10px !important; height: 36px !important;
    padding: 0 14px !important; font-size: 0.85rem !important; font-weight: 500 !important;
}

.hhTaskListScroll { flex: 1; }
.hhTaskListScroll .sapMScrollCont { height: calc(100dvh - 56px - 64px - 48px - 44px - 44px) !important; overflow-y: auto !important; }
.hhTaskList.sapMList { background: transparent !important; padding-bottom: 80px; }
.hhTaskList .sapMLIBBorderTop,
.hhTaskList .sapMLIBBorderBottom { display: none !important; }

.hhTaskCardItem.sapMLIB {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 4px 16px !important; margin: 0 !important;
}
.hhTaskCardItem.sapMLIB:hover,
.hhTaskCardItem.sapMLIB:focus { background: transparent !important; }

.hhTaskCard {
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15,23,42,0.07);
    border: 1px solid;
    padding: 14px 16px;
    transition: box-shadow 0.2s ease, transform 0.18s ease;
    cursor: pointer; margin-bottom: 4px;
}
.hhTaskCardItem:hover .hhTaskCard {
    box-shadow: 0 8px 28px rgba(15,23,42,0.13);
    transform: translateY(-2px);
}

.hhTaskCardTop  { margin-bottom: 8px; gap: 8px; align-items: flex-start; }
.hhTaskTitle .sapMTitle { font-size: 0.97rem !important; font-weight: 700 !important; line-height: 1.35 !important; }
.hhTaskStatusBadge { flex-shrink: 0; }
.hhTaskStatusBadge .sapMObjStatusText { font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.5px; text-transform: uppercase; }

.hhTaskBudgetRow { gap: 5px; margin-bottom: 6px; align-items: center; flex-wrap: nowrap; }
.hhBudgetIcon.sapUiIcon { font-size: 0.8rem !important; flex-shrink: 0; }
.hhBudgetText.sapMText  { font-weight: 700 !important; font-size: 0.85rem !important; white-space: nowrap; }
.hhMetaDot.sapMText     { font-size: 0.8rem !important; }
.hhTimeIcon.sapUiIcon   { font-size: 0.78rem !important; flex-shrink: 0; }
.hhTimeText.sapMText    { font-size: 0.8rem !important; white-space: nowrap; }
.hhDueText.sapMText     { font-weight: 600 !important; font-size: 0.8rem !important; white-space: nowrap; }

.hhTaskLocRow  { gap: 5px; margin-bottom: 8px; }
.hhLocIcon.sapUiIcon { font-size: 0.78rem !important; flex-shrink: 0; }
.hhLocText.sapMText  { font-size: 0.8rem !important; }

.hhTaskDivider { height: 1px; margin: 4px 0 10px; }
.hhTaskFooter  { align-items: center; }
.hhTaskPosterRow { gap: 5px; align-items: center; }
.hhPosterIcon.sapUiIcon   { font-size: 0.85rem !important; flex-shrink: 0; }
.hhTaskPosterName.sapMText { font-size: 0.8rem !important; font-weight: 500 !important; }

.hhApplicantPill {
    gap: 4px; border-radius: 20px;
    padding: 3px 10px; align-items: center;
}
.hhApplicantIcon.sapUiIcon { font-size: 0.75rem !important; }
.hhApplicantText.sapMText  { font-size: 0.75rem !important; font-weight: 600 !important; white-space: nowrap; }

/* ── Find Help tab ────────────────────────────────────────────── */
.fiTabContent   { padding: 24px 16px 0; }
.fiPageTitle    { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 6px; line-height: 1.2; }
.fiPageSubtitle { font-size: 14px; margin: 0 0 24px; line-height: 1.5; }

.fiServicesGrid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px; padding-bottom: 80px;
    flex-wrap: unset !important; flex-direction: unset !important; align-items: unset !important;
    width: 100%;
}
@media (max-width: 480px) { .fiServicesGrid { grid-template-columns: repeat(2, 1fr) !important; } }

.fiSvcCard {
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(15,23,42,0.07) !important;
    border: 1px solid !important;
    transition: box-shadow 0.2s, transform 0.18s !important;
    cursor: pointer !important;
}
.fiSvcCard:hover {
    box-shadow: 0 6px 24px rgba(15,23,42,0.13) !important;
    transform: translateY(-3px) !important;
}
.fiSvcCard:hover .fiSvcIconWrap {
    background: #10b981 !important;
}
.fiSvcCard:hover .fiSvcIcon { color: #fff !important; }
/* The SVG tiles are <img>, so no color to inherit: turn every painted pixel
   white on hover, the same as the icon-font glyphs. Cut-outs stay transparent. */
.fiSvcCard:hover .fiSvcImg { filter: brightness(0) invert(1); }

.fiSvcCardInner {
    /* Was 22/18px padding, 10px gap, 100px min-height -> a 153px tile, roughly a
       third of a 375x812 viewport each, so ten categories took several screens.
       Tightened to ~115px without crowding the icon or label. */
    padding: 14px 10px 12px !important;
    gap: 6px !important; min-height: 76px;
}
.fiSvcIconWrap {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    background: rgba(16,185,129,0.12) !important;
    transition: background 0.2s ease !important;
    margin-bottom: 4px !important;
}
.fiSvcIcon.sapUiIcon {
    color: #10b981 !important;   /* the SVG tiles are drawn in this same green */
    font-size: 1.25rem !important;
    transition: color 0.2s ease !important;
}
.fiSvcImg { transition: filter 0.2s ease; }

/* ── Category icons: one colour everywhere ──────────────────────────────
   Six categories are hand-drawn SVGs in the brand green; the rest are
   icon-font glyphs, which take the text colour of whatever control they sit
   in. Where a picker shows both side by side the glyphs came out near-black
   (Post Task category Select, onboarding interest chips) or the old SVG
   green (task category filter menu), so each list read as two icon sets.
   Glyphs get the SVG green; on an emphasized (selected) chip both go white,
   the SVG via the same filter the tiles use on hover. */
.hhCatPicker .sapMSelectListItemIcon.sapUiIcon,
.hhInterestChip .sapMBtnIcon.sapUiIcon,
.hhCatMenuIcon.sapUiIcon { color: #10b981 !important; }
/* UI5 puts the type class on .sapMBtnInner, not on the button root. */
.hhInterestChip .sapMBtnInner.sapMBtnEmphasized .sapMBtnIcon.sapUiIcon { color: #fff !important; }
.hhInterestChip .sapMBtnInner.sapMBtnEmphasized img.sapMBtnIcon { filter: brightness(0) invert(1); }
/* A Button sizes an image icon (sapMBtnCustomIcon) to its full inner height,
   2.125rem, while a glyph is a 1rem character in a 34px line — so the SVG
   chips were twice the size of the glyph chips. Give the image the glyph's
   1rem and the same margins, so both occupy the identical 22x34 box. */
.hhInterestChip img.sapMBtnCustomIcon {
    width: 1rem !important; height: 1rem !important; max-height: none !important;
    margin: 0.5625rem 0.1875rem !important; box-sizing: content-box !important;
}
.fiSvcName {
    font-size: 13px !important; font-weight: 600 !important;
    text-align: center !important; line-height: 1.3 !important; white-space: normal !important;
}

/* ── My Schedule tab ──────────────────────────────────────────── */
/* Same bottom-nav clearance as the Messages and Tasks lists above — the
   bookings list scrolls too, so its last card was clipped the same way. */
.fiScheduleTab      { padding: 0 0 80px; }
.fiScheduleTitle.sapMTitle { padding: 16px 16px 0 !important; }

/* Filter row — same pattern as notification chips */
.fiScheduleFilters  {
    gap: 6px; padding: 10px 16px 8px;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fiScheduleFilters::-webkit-scrollbar { display: none; }

/* Booking list — no default SAP separators / backgrounds */
.fiCardList.sapMList { background: transparent !important; padding: 0 0 80px !important; }
.fiCardList .sapMLIBBorderTop,
.fiCardList .sapMLIBBorderBottom { display: none !important; }

/* Card item */
.fiBookingCard.sapMLIB {
    padding: 0 !important;
    margin: 0 12px 8px !important;
    border-radius: 12px !important;
    background: var(--sapTile_Background, #fff) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
    overflow: hidden;
}
.fiBookingCardInner { padding: 14px 16px; gap: 8px; display: flex; flex-direction: column; }
.fiBookingActions   { gap: 6px; flex-wrap: wrap; }

/* ── Saved tab ────────────────────────────────────────────────── */
.fiSavedTab       { padding: 16px; }
.fiPersonCardInner { padding: 12px 14px; }

/* ══════════════════════════════════════════════════════════════
   Local Experts page
   ══════════════════════════════════════════════════════════════ */

/* Map */
.hhMapWrap      { position: relative; }
.hhMapBox       { width: 100%; overflow: hidden; }   /* height comes from .mapDiv */
.hhMapToggleBtn.sapMBtn {
    width: 100% !important; border-radius: 0 !important;
    height: 32px !important; font-size: 0.78rem !important;
    border-top: 1px solid !important; border-bottom: 1px solid !important;
}

/* Filter bar */
.hhExpertFilters  { padding: 12px 14px 4px; gap: 8px; }
.hhExpertSearch.sapMSF { border-radius: 10px !important; }
.hhExpertPills    { gap: 6px; flex-wrap: wrap; padding-bottom: 4px; }
.hhFilterPill.sapMBtn { border-radius: 20px !important; height: 30px !important; padding: 0 12px !important; font-size: 0.8rem !important; }

.hhExpertSliderRow { gap: 8px; align-items: center; padding: 4px 0; }
.hhDistanceSlider  { flex: 1 !important; }
.hhSliderIcon      { font-size: 1rem !important; flex-shrink: 0; }
.hhSliderLabel     { font-size: 0.8rem !important; min-width: 80px; text-align: right; flex-shrink: 0; }

.hhExpertLangRow  { gap: 8px; align-items: center; padding: 2px 0 8px; }
.hhLangInput.sapMInput { border-radius: 8px !important; height: 34px !important; }
.hhResetBtn.sapMBtn    { font-size: 0.78rem !important; }

/* Heading */
.hhExpertHeading { padding: 8px 14px 4px; }

/* Ad slot */
.hhAdSlot  { margin: 6px 14px; border-radius: 8px; overflow: hidden; min-height: 52px; background: #f8f8f8; display: flex; align-items: center; justify-content: center; position: relative; }
.hhAdLabel { position: absolute; font-size: 10px; opacity: 0.4; font-family: sans-serif; }

/* Empty state */
.hhExpertEmpty { padding: 40px 20px; }

/* List */
.hhExpertList { background: transparent !important; }

/* Card item wrapper */
.hhExpertCardItem.sapMLIB {
    background: transparent !important;
    border: none !important;
    padding: 4px 14px !important;
}

/* Card */
.hhExpertCard {
    border-radius: 14px;
    border: 1px solid;
    box-shadow: 0 2px 10px rgba(15,23,42,0.07);
    padding: 14px;
    gap: 10px;
    transition: box-shadow 0.18s, transform 0.15s;
}
.hhExpertCard:hover {
    box-shadow: 0 6px 20px rgba(15,23,42,0.12);
    transform: translateY(-2px);
}

/* Card top row */
.hhExpertCardTop  { gap: 10px; }
.hhExpertCardLeft { gap: 10px; flex: 1; min-width: 0; }
.hhExpertAvatar   { flex-shrink: 0; }
.hhExpertNameBox  { flex: 1; min-width: 0; gap: 2px; }
.hhExpertName     { font-size: 1rem !important; }
.hhExpertMeta     { gap: 6px; margin-top: 2px; }
.hhExpertDist     { font-weight: 600 !important; }
.hhExpertPriceBox { flex-shrink: 0; align-items: flex-end; gap: 2px; }
.hhExpertPrice    { font-size: 0.9rem !important; }

/* Tags row */
.hhExpertTags     { gap: 6px; flex-wrap: wrap; }
.hhExpertTag      { font-size: 0.75rem !important; }
.hhExpertTagPlain { opacity: 0.65; }

/* Actions row */
/* Action row. Message used to wrap onto a line of its own — odd, since on a
   marketplace it is at least as important as Book. Keep the row on one line:
   the favourite star stays icon-sized, Profile shrinks to its icon-plus-label
   minimum, and Book/Message share the remaining width. */
.hhExpertActions  { gap: 6px; align-items: center; flex-wrap: nowrap; padding-top: 4px; border-top: 1px solid; }
.hhExpertIconBtn.sapMBtn   { width: 34px !important; height: 34px !important; min-width: 34px !important; flex: 0 0 auto; padding: 0 !important; border-radius: 50% !important; }
.hhExpertProfileBtn.sapMBtn { font-size: 0.78rem !important; padding: 0 4px !important; flex: 0 0 auto; }
.hhExpertBookBtn.sapMBtn    { border-radius: 8px !important; height: 34px !important; font-size: 0.78rem !important; font-weight: 600 !important; flex: 1 1 0; min-width: 0 !important; }
.hhExpertMsgBtn.sapMBtn     { border-radius: 8px !important; height: 34px !important; font-size: 0.78rem !important; flex: 1 1 0; min-width: 0 !important; }

/* Availability/price column: "Unavailable" is wider than "Available" and was
   squeezing the left column until "1.5 km away" wrapped, so cards had uneven
   heights. Fix the column width so every card lines up, and keep the distance
   on one line — pinning the column alone just made every card wrap instead. */
.hhExpertPriceBox { min-width: 84px; flex: 0 0 auto; }
.hhExpertDist.sapMText { white-space: nowrap !important; }

/* ── iOS scroll ───────────────────────────────────────────────── */
section { -webkit-overflow-scrolling: touch; }
.mainContent { padding-bottom: 40px; }
.flexBasis65 { padding-bottom: 60px; }

/* ── Profile Settings tab ─────────────────────────────────────────── */
.hhSettingsGroup {
    background: var(--sapBaseColor, #f5f5f5);
    border-radius: 12px;
    padding: 12px 14px 6px;
    margin-bottom: 12px;
    gap: 0;
}

.hhSettingsGroupHeader {
    gap: 8px;
    margin-bottom: 4px;
}

.hhSettingsGroupIcon.sapUiIcon {
    font-size: 1rem;
    color: var(--sapContent_IconColor, #0070f2);
    width: 18px;
    text-align: center;
}

.hhSettingsGroupHint {
    opacity: 0.65;
    margin-bottom: 8px !important;
    padding-left: 26px;
    line-height: 1.4;
}

.hhSettingsBtn.sapMBtn {
    border-radius: 8px !important;
    height: 40px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    justify-content: flex-start !important;
}

.hhSettingsBtn.sapMBtn .sapMBtnContent {
    justify-content: flex-start !important;
}

.hhSettingsInfoRow {
    min-height: 32px;
    padding: 0 4px;
    border-bottom: 1px solid var(--sapContent_ForegroundBorderColor, #e0e0e0);
}

.hhSettingsInfoRow:last-child {
    border-bottom: none;
}

/* ── Activity strip ──────────────────────────────────────────────────────── */
.fiActivityStrip {
    background: var(--sapList_HeaderBackground, #f5f5f5);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
    /* Three nowrap items exceeded 375px and the third was clipped off-screen.
       Wrapping keeps every stat visible. */
    gap: 4px 14px;
    gap: 4px;
}

.fiActivityItem {
    gap: 4px;
}

.fiActivityIcon.sapUiIcon {
    font-size: 0.85rem;
    color: var(--sapBrandColor, #0070f3);
}

.fiActivityText.sapMText {
    font-size: 0.78rem;
    color: var(--sapContent_LabelColor, #6a6d70);
    white-space: nowrap;
}

/* ── Primary CTA ─────────────────────────────────────────────────────────── */
.fiPrimaryCta {
    margin-bottom: 14px;
}

.fiCtaBtn.sapMBtn {
    border-radius: 10px !important;
    height: 44px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* ── Hero badge on service tile ──────────────────────────────────────────── */
.fiHeroBadge .sapMObjStatusText {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
}

.fiHeroBadge.sapMObjStatus {
    margin-top: 2px;
    padding: 1px 5px !important;
    border-radius: 6px !important;
    background: rgba(48, 164, 108, 0.12) !important;
}

/* ── Sponsored badge ─────────────────────────────────────────────────────── */
.fiSponsoredBadge .sapMObjStatusText {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
}

/* ── Pro badge ───────────────────────────────────────────────────────────── */
.fiProBadge .sapMObjStatusText {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

/* ── Native inline ad slot ───────────────────────────────────────────────── */
.fiAdNative {
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--sapList_HeaderBackground, #f5f5f5);
    border: 1px dashed var(--sapContent_ForegroundBorderColor, #e0e0e0);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ── Earnings chip ───────────────────────────────────────────────────────── */
.fiEarningsChip.sapMObjStatus {
    font-size: 0.78rem !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    background: rgba(0, 112, 243, 0.08) !important;
}

/* ── ActionSheet cancel button ────────────────────────────────────────────────
 * sap.m.ActionSheet hardcodes type: ButtonType.Reject on the cancel button it
 * creates (ActionSheet.js _createCancelButton), and offers no property to change
 * it — cancelButtonText is the only hook the API gives. In this theme Reject is a
 * filled pink (--sapButton_Reject_Background: #ffd6e9), so the one harmless,
 * dismissive action in the sheet was the only thing painted as destructive,
 * sitting right under "Block User". UI5 itself adds sapMBtnTransparent and
 * sapMBtnInverted to that button, so a neutral look is the intended one; those
 * classes just lose to the theme's Reject rule.
 *
 * Scoped to .sapMActionSheetCancelButton, the class UI5 puts there for exactly
 * this purpose, so Reject stays red everywhere it means danger — Block, Decline,
 * Cancel Booking. Three classes beats the theme's two, so this wins on
 * specificity and does not depend on stylesheet order (library.css loads after
 * this file).
 */
.sapMActionSheetCancelButton .sapMBtnInner.sapMBtnReject {
    background-image: none;
    background-color: var(--sapButton_Background);
    border-color: var(--sapButton_BorderColor);
}

/* Every item in the sheet, cancel included, drew its text in the theme's light
 * green #4bb87d on white — 2.48:1, well under the 4.5:1 WCAG AA needs at this
 * 14px weight. #2F855A measures 4.54:1 and is the same green already used for
 * the bottom navigation, so the sheet stays on palette while being readable. */
.sapMActionSheet .sapMBtnInner,
.sapMActionSheet .sapMBtnInner .sapMBtnContent,
.sapMActionSheetCancelButton .sapMBtnInner.sapMBtnReject {
    color: #2F855A;
}

.sapMActionSheet .sapMBtnInner .sapUiIcon {
    color: #2F855A;
}

.sapMActionSheetCancelButton .sapMBtnInner.sapMBtnReject:hover {
    background-color: var(--sapButton_Hover_Background);
    border-color: var(--sapButton_BorderColor);
}

.sapMActionSheetCancelButton .sapMBtnInner.sapMBtnReject:active,
.sapMActionSheetCancelButton .sapMBtnInner.sapMBtnReject.sapMBtnActive {
    background-color: var(--sapButton_Active_Background);
    border-color: var(--sapButton_BorderColor);
    color: #2F855A;
}