/** * Hubliq layout + visual consistency (mobile-first, desktop cap). * Load after Bootstrap + base.css. See plan: mobile-first global UI. * * `base.html` wraps `{% block content %}` in `.hubliq-block-root` for a single place to cap * width and soften cards on “plain” app pages. Full-bleed / bespoke layouts opt out via :has() * (e.g. `.mobile-home-page-2026`, `.hubliq-content-shell`, `.profile-detail-shell`, `.screen`, * `.welcome-shell`, `.feed-container`, `.dashboard-container`, `.booking-page-wrapper`). * Legacy form footers (card-body forms and direct form children with submit buttons) reuse the * same mobile stacking behavior as `.hubliq-form-actions` via rules at the end of this file. * * Global scale ceiling for viewports ≥801px lives in `hubliq-global-scale-cap.css` (loaded last in base.html). * * Last-mile mobile overrides (safe-area on nav, 16px inputs, touch targets): static/css/hubliq-touch-safe.css * (linked at end of in templates/base.html, after inline styles). */ :root { --hubliq-navy: #001f3f; --hubliq-text-on-navy: #ffffff; --hubliq-muted-on-navy: rgba(255, 255, 255, 0.78); --hubliq-form-max: min(720px, 100%); --hubliq-dashboard-max: min(1280px, 100%); --hubliq-content-max: min(1200px, 100%); --hubliq-page-gutter: clamp(0.5rem, 2.5vw, 1.25rem); } /* Centered reading / dashboard column; full width on small screens */ .hubliq-content-shell { width: 100%; max-width: var(--hubliq-dashboard-max); margin-left: auto; margin-right: auto; padding-left: max(var(--hubliq-page-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--hubliq-page-gutter), env(safe-area-inset-right, 0px)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem); box-sizing: border-box; } .hubliq-content-shell.profile-detail-shell { padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); } .hubliq-content-shell--narrow { max-width: var(--hubliq-form-max); } .hubliq-content-shell--wide { max-width: var(--hubliq-content-max); } /* Opt out of max-width when a section must span edge-to-edge inside a shell parent */ .hubliq-bleed { width: 100%; max-width: none; margin-left: calc(-1 * max(var(--hubliq-page-gutter), env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(var(--hubliq-page-gutter), env(safe-area-inset-right, 0px))); padding-left: max(var(--hubliq-page-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--hubliq-page-gutter), env(safe-area-inset-right, 0px)); box-sizing: border-box; } @media (min-width: 1280px) { .hubliq-content-shell { padding-left: clamp(1rem, 2vw, 1.5rem); padding-right: clamp(1rem, 2vw, 1.5rem); } } /* ---- Contrast: navy / primary backgrounds must not use Bootstrap blue text ---- */ .card-header.bg-primary, .card-header.bg-primary.text-white, .hubliq-on-navy { color: var(--hubliq-text-on-navy); } .card-header.bg-primary .text-primary, .card-header.bg-primary .bi.text-primary, .hubliq-on-navy .text-primary, .hubliq-on-navy .bi.text-primary, .quick-book-popup-header .text-primary, .quick-book-popup-header .bi.text-primary { color: var(--hubliq-text-on-navy) !important; } .quick-book-popup-header h5, .quick-book-popup-header { color: var(--hubliq-text-on-navy); } /* ---- Category / tag pills (discovery cards, etc.) ---- */ .hubliq-pill-row { display: flex; flex-wrap: wrap; gap: 0.2rem 0.35rem; align-items: center; min-width: 0; } .hubliq-pill { display: inline-flex; align-items: center; align-self: flex-start; max-width: min(100%, 12rem); font-size: clamp(0.58rem, 2.5vw, 0.72rem); font-weight: 600; line-height: 1.2; padding: 0.12rem 0.4rem; border-radius: 0.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .hubliq-pill--sm { font-size: clamp(0.54rem, 2.3vw, 0.68rem); padding: 0.08rem 0.32rem; max-width: min(100%, 10rem); } .hubliq-pill--on-dark { background: rgba(59, 130, 246, 0.2); border: 1px solid rgba(59, 130, 246, 0.35); color: rgba(255, 255, 255, 0.92); } .hubliq-pill--violet { background: rgba(139, 92, 246, 0.2); border: 1px solid rgba(139, 92, 246, 0.35); color: rgba(255, 255, 255, 0.92); } .hubliq-pill--green { background: rgba(34, 197, 94, 0.2); border: 1px solid rgba(34, 197, 94, 0.35); color: rgba(255, 255, 255, 0.92); } .hubliq-pill--amber { background: rgba(251, 191, 36, 0.2); border: 1px solid rgba(251, 191, 36, 0.35); color: rgba(255, 255, 255, 0.92); } /* Two-up category row on narrow discovery cards */ .hubliq-pill-row--half .hubliq-pill { flex: 0 1 calc(50% - 2px); max-width: calc(50% - 2px); } /* Detail panel tags (slightly roomier) */ .hubliq-pill--info { padding: 0.18rem 0.38rem; border-radius: 0.35rem; max-width: min(100%, 14rem); } /* Horizontal chip scroller (discovery filters): responsive type, keep flex-shrink */ .chips.hubliq-chip-scroll .chip, .chips.hubliq-chip-scroll a.chip { flex-shrink: 0; border-radius: 20px; font-size: clamp(0.65rem, 2.8vw, 0.75rem) !important; font-weight: 600 !important; padding: 0.35rem 0.65rem !important; text-decoration: none; white-space: nowrap; scroll-snap-align: start; } /* ---- Bottom safe area: optional inner clearance above fixed mobile nav. Default: base.html adds calc(var(--bottom-safe) + 1rem) on main for all pages except .profile-detail-shell. Use this class only when a nested scroll root or full-bleed strip still clips the last control. ---- */ .hubliq-bottom-scroll-clear { padding-bottom: calc(var(--bottom-safe, 100px) + 1rem) !important; } @media (min-width: 1442px) { .hubliq-bottom-scroll-clear { padding-bottom: 2rem !important; } } /* ---- Detail pages (organization/location/professional): premium, unified, mobile-first ---- */ .hubliq-detail-doc-layout { --hubliq-detail-surface: rgba(255, 255, 255, 0.03); --hubliq-detail-border: rgba(255, 255, 255, 0.12); --hubliq-detail-muted: rgba(255, 255, 255, 0.86); --hubliq-detail-title: rgba(255, 255, 255, 0.96); --hubliq-detail-accent: #3b82f6; --hubliq-detail-radius: 20px; --hubliq-detail-gap: clamp(0.75rem, 2vw, 1.25rem); } .hubliq-detail-doc-layout .hubliq-detail-viewport { max-width: min(1180px, 100%); margin-inline: auto; } .hubliq-detail-doc-layout .hubliq-detail-page-inner { border-radius: var(--hubliq-detail-radius) !important; border: 1px solid var(--hubliq-detail-border) !important; background: var(--hubliq-detail-surface) !important; box-shadow: 0 14px 40px rgba(2, 6, 23, 0.28) !important; /* clip: trim horizontal bleed without forcing overflow-y to auto (hidden+crops tab pills) */ overflow-x: clip !important; overflow-y: visible !important; padding-bottom: 0.25rem !important; } .hubliq-detail-doc-layout .hubliq-detail-sticky-head { background: linear-gradient( 180deg, rgba(18, 26, 47, 0.92) 0%, rgba(18, 26, 47, 0.86) 100% ) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow: visible !important; padding-bottom: 0.65rem !important; } /* Inline-wrapped tab row on detail pages: avoid clipping the bottom of selected pills */ .hubliq-detail-doc-layout .hubliq-detail-sticky-head .orgTabsCard > div:first-child, .hubliq-detail-doc-layout .hubliq-detail-sticky-head .proTabsCard > div:first-child, .hubliq-detail-doc-layout .hubliq-detail-sticky-head .locTabsCard > div:first-child { overflow: visible !important; padding-bottom: 0.25rem !important; } .hubliq-detail-doc-layout .hubliq-detail-scroll-body { padding: clamp(0.25rem, 1.2vw, 0.75rem) 0 clamp(1.25rem, 3vw, 2rem); } /* Tab panels: do not clip last row; safe-area for iOS home indicator */ .hubliq-detail-doc-layout .hubliq-detail-scroll-body .tab-content, .hubliq-detail-doc-layout .hubliq-detail-scroll-body #myTabContent { overflow: visible !important; } .hubliq-detail-doc-layout .hubliq-detail-scroll-body .tab-content > .tab-pane, .hubliq-detail-doc-layout .hubliq-detail-scroll-body #myTabContent > .tab-pane { overflow: visible !important; padding-bottom: max(1.1rem, env(safe-area-inset-bottom, 0px)) !important; } .hubliq-detail-doc-layout .breadcrumb { margin-bottom: 0.85rem; gap: 0.1rem; } .hubliq-detail-doc-layout .breadcrumb-item, .hubliq-detail-doc-layout .breadcrumb-item a { font-size: clamp(0.78rem, 2.3vw, 0.86rem); } .hubliq-detail-doc-layout h1 { color: var(--hubliq-detail-title) !important; letter-spacing: -0.01em; line-height: 1.15; } .hubliq-detail-doc-layout p, .hubliq-detail-doc-layout .text-muted, .hubliq-detail-doc-layout small { color: var(--hubliq-detail-muted) !important; } /* Extra contrast guardrails for detail pages on dark-blue surfaces */ .hubliq-detail-doc-layout .text-secondary, .hubliq-detail-doc-layout .text-dark, .hubliq-detail-doc-layout .text-body, .hubliq-detail-doc-layout .text-black-50, .hubliq-detail-doc-layout .text-muted.small, .hubliq-detail-doc-layout .badge { color: rgba(255, 255, 255, 0.9) !important; } .hubliq-detail-doc-layout .badge.bg-light, .hubliq-detail-doc-layout .badge.text-dark, .hubliq-detail-doc-layout .btn-light, .hubliq-detail-doc-layout .btn-outline-secondary { color: #ffffff !important; } /* Create & Import panes (org + freelancer): Bootstrap outline-light defaults to dark contrast text — invisible on navy until :focus */ .hubliq-detail-doc-layout #createImportManagement .btn-outline-light, .hubliq-detail-doc-layout #technician-freelancer-create-import .btn-outline-light { color: rgba(255, 255, 255, 0.94) !important; border-color: rgba(255, 255, 255, 0.48) !important; background-color: rgba(255, 255, 255, 0.07) !important; } .hubliq-detail-doc-layout #createImportManagement .btn-outline-light:hover, .hubliq-detail-doc-layout #createImportManagement .btn-outline-light:focus-visible, .hubliq-detail-doc-layout #technician-freelancer-create-import .btn-outline-light:hover, .hubliq-detail-doc-layout #technician-freelancer-create-import .btn-outline-light:focus-visible { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.65) !important; background-color: rgba(255, 255, 255, 0.14) !important; } /* Inner tab strips (e.g. technician settings): keep horizontal scroll. Main profile tabs use .hubliq-main-tabs — separate rules below (wrap / grid). */ .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs:not(.hubliq-main-tabs) { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0.35rem; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.65rem 0.9rem 0.75rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs:not(.hubliq-main-tabs)::-webkit-scrollbar { display: none; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs:not(.hubliq-main-tabs) .nav-item { flex: 0 0 auto !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs:not(.hubliq-main-tabs) .nav-link { min-height: 44px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; padding: 0.52rem 0.85rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem; color: rgba(255, 255, 255, 0.84) !important; background: rgba(255, 255, 255, 0.03) !important; white-space: nowrap; font-size: clamp(0.78rem, 2.2vw, 0.9rem); font-weight: 600; transition: background-color 0.15s ease, color 0.15s ease; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs:not(.hubliq-main-tabs) .nav-link:hover { color: rgba(255, 255, 255, 0.98) !important; background: rgba(255, 255, 255, 0.07) !important; /* Same 1px border as default — no extra ring on hover/active */ border-color: rgba(255, 255, 255, 0.14) !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs:not(.hubliq-main-tabs) .nav-link.active { color: #ffffff !important; background: rgba(59, 130, 246, 0.28) !important; border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; } /* Org / location / professional — primary tab row: mobile-first, all tabs visible, 2 columns on small screens */ .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 0.38rem !important; row-gap: 0.42rem !important; overflow-x: visible !important; overflow-y: visible !important; padding: 0.55rem 0.65rem 1.7rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-item { flex: 1 1 calc(50% - 0.25rem) !important; min-width: min(140px, 100%) !important; max-width: 100% !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link { width: 100% !important; min-height: 38px !important; border-radius: 12px !important; /* Constant 1px border all states — avoids layout shift / “extra” ring when selected */ border: 1px solid rgba(255, 255, 255, 0.14) !important; padding: 0.38rem 0.5rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.28rem; color: rgba(255, 255, 255, 0.88) !important; background: rgba(255, 255, 255, 0.04) !important; white-space: normal !important; text-align: center !important; line-height: 1.18 !important; word-break: break-word !important; font-size: clamp(0.68rem, 2.4vw, 0.82rem) !important; font-weight: 600 !important; transition: background-color 0.15s ease, color 0.15s ease; box-sizing: border-box !important; box-shadow: none !important; outline: none !important; border-width: 1px !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link:hover { color: rgba(255, 255, 255, 0.98) !important; border-color: rgba(255, 255, 255, 0.14) !important; background: rgba(255, 255, 255, 0.08) !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link.active { color: #ffffff !important; background: rgba(59, 130, 246, 0.28) !important; border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; outline: none !important; border-width: 1px !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link:focus { box-shadow: none !important; outline: none !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link:focus-visible, .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link:active { box-shadow: none !important; outline: none !important; border-color: rgba(255, 255, 255, 0.14) !important; border-width: 1px !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link i { flex-shrink: 0 !important; font-size: 0.78em !important; } @media (min-width: 769px) { .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-item { flex: 0 1 auto !important; min-width: 0 !important; max-width: none !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link { width: auto !important; min-width: 7.5rem; white-space: nowrap !important; font-size: clamp(0.74rem, 1.1vw, 0.86rem) !important; } } @media (max-width: 768px) { .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.38rem !important; width: 100% !important; box-sizing: border-box !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; padding-bottom: 1.7rem !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-item { width: 100% !important; min-width: 0 !important; flex: none !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs.hubliq-main-tabs .nav-link { min-height: 34px !important; padding: 0.34rem 0.42rem !important; font-size: 0.68rem !important; } } .hubliq-detail-doc-layout .btn { border-radius: 12px !important; min-height: 42px; font-weight: 600; letter-spacing: 0.01em; } .hubliq-detail-doc-layout .btn.btn-sm { min-height: 36px; padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; } /* Square icon buttons: keep fixed size (global .btn min-height would stretch them). */ .hubliq-detail-doc-layout .btn.hubliq-icon-btn { min-height: 34px !important; min-width: 34px !important; padding: 0 !important; line-height: 1 !important; } .hubliq-detail-doc-layout .badge { border-radius: 999px !important; padding: 0.34rem 0.56rem !important; } .hubliq-detail-doc-layout .row.align-items-start > [class*="col-md-"] { margin-bottom: 0.5rem; } .hubliq-detail-doc-layout .hubliq-social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-bottom: 0.85rem; } .hubliq-detail-doc-layout .hubliq-icon-btn { width: 34px; height: 34px; padding: 0 !important; border-radius: 10px !important; border-color: rgba(255, 255, 255, 0.24) !important; color: rgba(255, 255, 255, 0.76) !important; background: rgba(255, 255, 255, 0.04) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .hubliq-detail-doc-layout .hubliq-icon-btn:hover { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.42) !important; background: rgba(255, 255, 255, 0.1) !important; } .hubliq-detail-doc-layout .hubliq-quickbook-card { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 14px !important; padding: 0.9rem !important; box-shadow: 0 8px 24px rgba(2, 6, 23, 0.2); } .hubliq-detail-doc-layout .hubliq-quickbook-title { color: rgba(255, 255, 255, 0.92) !important; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 0.65rem !important; } .hubliq-detail-doc-layout .hubliq-hero-title { font-size: clamp(1.4rem, 3.4vw, 1.78rem) !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.97) !important; } .hubliq-detail-doc-layout .hubliq-hero-subtitle { color: rgba(255, 255, 255, 0.9) !important; font-size: 0.94rem !important; } @media (max-width: 768px) { .hubliq-detail-doc-layout { --hubliq-detail-radius: 16px; } .hubliq-detail-doc-layout { padding-bottom: calc(var(--bottom-safe, 100px) + 1.1rem) !important; } .hubliq-detail-doc-layout .hubliq-detail-page-inner { border-radius: var(--hubliq-detail-radius) !important; } .hubliq-detail-doc-layout h1 { font-size: clamp(1.35rem, 5.3vw, 1.72rem) !important; } .hubliq-detail-doc-layout .hubliq-detail-sticky-head { position: static !important; } .hubliq-detail-doc-layout .nav.nav-tabs.card-header-tabs:not(.hubliq-main-tabs) .nav-link { min-height: 40px !important; padding: 0.48rem 0.72rem !important; } } /* Org detail → Management → Organization: delete zone stays in viewport, stacked */ #organizationManagement .hubliq-danger-zone { max-width: 100%; overflow-x: hidden; box-sizing: border-box; } #organizationManagement .hubliq-danger-zone form { width: 100%; margin-top: 0.5rem; } #organizationManagement .hubliq-danger-zone .btn-danger { width: 100%; max-width: 100%; font-size: clamp(0.8rem, 3.2vw, 0.9rem); padding: 0.35rem 0.75rem; white-space: normal; line-height: 1.25; } /* Multi-step form actions: never clip off-screen on narrow widths */ .hubliq-form-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; justify-content: space-between; width: 100%; max-width: 100%; box-sizing: border-box; } .hubliq-form-actions > .hubliq-form-actions-start, .hubliq-form-actions > .hubliq-form-actions-end { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; } .hubliq-form-actions-start:empty, .hubliq-form-actions-end:empty { display: none !important; } /* Single-sided actions (e.g. save-only): keep primary control on the trailing edge on desktop */ .hubliq-form-actions:not(:has(.hubliq-form-actions-start > *)) { justify-content: flex-end; } @media (max-width: 576px) { .hubliq-form-actions:not(:has(.hubliq-form-actions-start > *)) { justify-content: stretch; } .hubliq-form-actions:not(:has(.hubliq-form-actions-start > *)) .hubliq-form-actions-end { width: 100%; } .hubliq-form-actions { flex-direction: column; align-items: stretch; } .hubliq-form-actions > .hubliq-form-actions-start, .hubliq-form-actions > .hubliq-form-actions-end { width: 100%; justify-content: stretch; } .hubliq-form-actions .btn-lg { font-size: 1rem !important; padding: 0.55rem 0.85rem !important; } } /* ---- Global block root (wraps {% block content %} in base.html): cap width + rhythm for “plain” app pages ---- Skipped when the page already brings its own shell (hubliq-content-shell), full-bleed marketing (mobile-home-page-2026), profile detail layout, auth hero (.screen), welcome landing (.welcome-shell), community feed, dashboards, or legacy full-width calendar wrappers. */ .hubliq-block-root { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } .hubliq-block-root:not(:has(.mobile-home-page-2026)):not(:has(.profile-detail-shell)):not(:has(.hubliq-content-shell)):not(:has(.screen)):not(:has(.welcome-shell)):not(:has(.feed-container)):not(:has(.dashboard-container)):not(:has(.booking-page-wrapper)) { max-width: var(--hubliq-dashboard-max); padding-top: clamp(0.35rem, 1.5vw, 0.85rem); /* Bottom scroll slack: base.html main > .hubliq-block-root (+ body/main --bottom-safe). Omit duplicate padding here. */ } /* Dashboards / feeds / calendars: reserve space above fixed mobile bottom nav. Do NOT cap at 1rem — that overrode template padding and hid the last rows behind the nav. */ @media (max-width: 1441px) { .hubliq-block-root:has(.dashboard-container) .dashboard-container { padding-bottom: max(1.5rem, var(--bottom-safe)) !important; } .hubliq-block-root:has(.booking-page-wrapper) .booking-page-wrapper { padding-bottom: max(1.25rem, var(--bottom-safe)) !important; } .hubliq-block-root:has(.bookings-calendar-shell) .bookings-calendar-shell { padding-bottom: max(1.25rem, var(--bottom-safe)) !important; } } @media (min-width: 1442px) { .hubliq-block-root:has(.dashboard-container) .dashboard-container { padding-bottom: max(1.5rem, 2rem) !important; } .hubliq-block-root:has(.booking-page-wrapper) .booking-page-wrapper { padding-bottom: 1.25rem !important; } } .hubliq-block-root:has(.feed-container) .feed-container { padding-bottom: 0.75rem; } .hubliq-block-root:not(:has(.mobile-home-page-2026)):not(:has(.profile-detail-shell)):not(:has(.hubliq-content-shell)):not(:has(.screen)):not(:has(.welcome-shell)):not(:has(.feed-container)):not(:has(.dashboard-container)):not(:has(.booking-page-wrapper)) .card { border-radius: clamp(12px, 2.2vw, 18px); } .hubliq-block-root:not(:has(.mobile-home-page-2026)):not(:has(.profile-detail-shell)):not(:has(.hubliq-content-shell)):not(:has(.screen)):not(:has(.welcome-shell)):not(:has(.feed-container)):not(:has(.dashboard-container)):not(:has(.booking-page-wrapper)) .card.shadow-sm { border: 1px solid rgba(0, 31, 63, 0.08); box-shadow: 0 4px 16px rgba(0, 31, 63, 0.07) !important; } @media (max-width: 576px) { .hubliq-block-root:not(:has(.mobile-home-page-2026)):not(:has(.profile-detail-shell)):not(:has(.hubliq-content-shell)):not(:has(.screen)):not(:has(.welcome-shell)):not(:has(.feed-container)):not(:has(.dashboard-container)):not(:has(.booking-page-wrapper)) .card-body { padding-left: clamp(0.85rem, 3.5vw, 1.1rem); padding-right: clamp(0.85rem, 3.5vw, 1.1rem); } } /* ---- Legacy form action rows → same mobile behavior as .hubliq-form-actions (no template edits required) ---- Scoped off profile detail (complex tab layouts). Skips grid cells (.col-*), align-items-end rows, and direct-form rows that use justify-content-end (handled below). */ .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-between:has(button[type="submit"]), .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-between:has(input[type="submit"]) { flex-wrap: wrap; gap: 0.5rem; align-items: stretch; justify-content: space-between; width: 100%; max-width: 100%; box-sizing: border-box; } .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-end:has(button[type="submit"]), .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-end:has(input[type="submit"]) { flex-wrap: wrap; gap: 0.5rem; align-items: stretch; justify-content: flex-end; width: 100%; max-width: 100%; box-sizing: border-box; } .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.gap-2:has(button[type="submit"]), .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.gap-3:has(button[type="submit"]) { flex-wrap: wrap; gap: 0.5rem !important; align-items: stretch; width: 100%; max-width: 100%; box-sizing: border-box; } .hubliq-block-root:not(:has(.profile-detail-shell)) form > .d-flex:has(button[type="submit"]):not([class*="col-"]):not(.align-items-end):not(.justify-content-end) { flex-wrap: wrap; gap: 0.5rem; align-items: stretch; justify-content: flex-start; width: 100%; max-width: 100%; box-sizing: border-box; } .hubliq-block-root:not(:has(.profile-detail-shell)) form > .d-flex.justify-content-end:has(button[type="submit"]):not([class*="col-"]):not(.align-items-end) { flex-wrap: wrap; gap: 0.5rem; align-items: stretch; justify-content: flex-end; width: 100%; max-width: 100%; box-sizing: border-box; } @media (max-width: 576px) { .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-between:has(button[type="submit"]), .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-between:has(input[type="submit"]), .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-end:has(button[type="submit"]), .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-end:has(input[type="submit"]) { flex-direction: column; align-items: stretch; } .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-between:has(button[type="submit"]) > *, .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-between:has(input[type="submit"]) > *, .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-end:has(button[type="submit"]) > *, .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.justify-content-end:has(input[type="submit"]) > * { width: 100%; } .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.gap-2:has(button[type="submit"]) > *, .hubliq-block-root:not(:has(.profile-detail-shell)) .card-body > form .d-flex.gap-3:has(button[type="submit"]) > *, .hubliq-block-root:not(:has(.profile-detail-shell)) form > .d-flex:has(button[type="submit"]):not([class*="col-"]):not(.align-items-end):not(.justify-content-end) > *, .hubliq-block-root:not(:has(.profile-detail-shell)) form > .d-flex.justify-content-end:has(button[type="submit"]):not([class*="col-"]):not(.align-items-end) > * { width: 100%; } } /* Less horizontal rubber-band when root is overflow-x clipped (common on iOS) */ html { overscroll-behavior-x: none; }