/* FlowOps v31.22.5 — isolated tablet / iPad Pro layout stability layer. Applied only when the early FlowOps device bootstrap adds .flowops-tablet to . Existing laptop and phone rules remain untouched. */html.flowops-tablet{ --flowops-tablet-gutter: clamp(20px, 3vw, 34px); --flowops-tablet-content-max: 1240px; }html.flowops-tablet, html.flowops-tablet body{ min-height: 100%; }html.flowops-tablet body{ overflow-x: hidden; overscroll-behavior-x: none; } /* -------------------------------------------------------------------------- Authentication / public account screens -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-auth-body{ min-height: 100dvh; }html.flowops-tablet body.flowops-auth-body .flowops-auth-topbar{ height: 72px; padding-inline: clamp(28px, 5vw, 76px); }html.flowops-tablet body.flowops-auth-body .flowops-auth-shell, html.flowops-tablet body.flowops-auth-body .flowops-auth-split, html.flowops-tablet body.flowops-auth-body .flowops-auth-wrap, html.flowops-tablet body.flowops-auth-body .flowops-invite-wrap{ min-height: 100dvh; padding: 104px clamp(30px, 6vw, 92px) 44px !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-card, html.flowops-tablet body.flowops-auth-body .flowops-invite-card{ width: min(460px, calc(100vw - 88px)) !important; padding: 32px 34px 28px !important; border-radius: 28px !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-card-register{ width: min(520px, calc(100vw - 88px)) !important; padding: 34px 38px 30px !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-card-otp{ width: min(450px, calc(100vw - 88px)) !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-card-wide, html.flowops-tablet body.flowops-auth-body .flowops-invite-card{ width: min(560px, calc(100vw - 88px)) !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-card-logo{ width: 54px; height: 54px; margin-bottom: 20px; }html.flowops-tablet body.flowops-auth-body .flowops-auth-card-logo img{ width: 35px; height: 35px; }html.flowops-tablet body.flowops-auth-body .flowops-auth-card h1, html.flowops-tablet body.flowops-auth-body .flowops-auth-card h2, html.flowops-tablet body.flowops-auth-body .flowops-invite-hero h1{ font-size: 25px !important; line-height: 1.12 !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-intro, html.flowops-tablet body.flowops-auth-body .flowops-invite-hero p, html.flowops-tablet body.flowops-auth-body .flowops-auth-panel p{ max-width: 360px; margin-bottom: 22px !important; font-size: 14px !important; }html.flowops-tablet body.flowops-auth-body .flowops-form-stack, html.flowops-tablet body.flowops-auth-body .flowops-form-grid, html.flowops-tablet body.flowops-auth-body .flowops-form-grid-2{ gap: 12px !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-input, html.flowops-tablet body.flowops-auth-body .flowops-auth-card input[type="text"], html.flowops-tablet body.flowops-auth-body .flowops-auth-card input[type="email"], html.flowops-tablet body.flowops-auth-body .flowops-auth-card input[type="password"], html.flowops-tablet body.flowops-auth-body .flowops-invite-card input[type="text"], html.flowops-tablet body.flowops-auth-body .flowops-invite-card input[type="email"], html.flowops-tablet body.flowops-auth-body .flowops-invite-card input[type="password"]{ height: 52px !important; min-height: 52px !important; padding-inline: 18px !important; font-size: 15px !important; line-height: 52px !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-input::placeholder, html.flowops-tablet body.flowops-auth-body .flowops-auth-card input::placeholder, html.flowops-tablet body.flowops-auth-body .flowops-invite-card input::placeholder{ line-height: 52px !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-field-password{ min-height: 52px; }html.flowops-tablet body.flowops-auth-body .flowops-btn, html.flowops-tablet body.flowops-auth-body .flowops-auth-card button, html.flowops-tablet body.flowops-auth-body .flowops-invite-card button, html.flowops-tablet body.flowops-auth-body .flowops-auth-card .button, html.flowops-tablet body.flowops-auth-body .flowops-invite-card .button{ min-height: 50px !important; height: 50px; font-size: 14.5px !important; }html.flowops-tablet body.flowops-auth-body .flowops-auth-checkbox, html.flowops-tablet body.flowops-auth-body .flowops-auth-check{ font-size: 12.75px !important; }html.flowops-tablet body.flowops-auth-body .flowops-message{ padding: 12px 14px !important; font-size: 12.75px !important; } /* Keyboard-open iPad layout: keep the active card visible without turning the whole public page into a phone layout. */html.flowops-tablet.flowops-tablet-keyboard body.flowops-auth-body .flowops-auth-shell, html.flowops-tablet.flowops-tablet-keyboard body.flowops-auth-body .flowops-auth-split, html.flowops-tablet.flowops-tablet-keyboard body.flowops-auth-body .flowops-auth-wrap, html.flowops-tablet.flowops-tablet-keyboard body.flowops-auth-body .flowops-invite-wrap{ align-items: flex-start; padding-top: 88px !important; padding-bottom: 24px !important; } /* -------------------------------------------------------------------------- Shared app shell -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-app-body .flowops-content{ min-width: 0; padding: 24px var(--flowops-tablet-gutter) 32px; }html.flowops-tablet body.flowops-app-body .flowops-content > *{ max-width: var(--flowops-tablet-content-max); margin-inline: auto; }html.flowops-tablet body.flowops-app-body input, html.flowops-tablet body.flowops-app-body select, html.flowops-tablet body.flowops-app-body textarea, html.flowops-tablet body.flowops-control-center-body input, html.flowops-tablet body.flowops-control-center-body select, html.flowops-tablet body.flowops-control-center-body textarea{ font-size: 16px; }html.flowops-tablet body.flowops-app-body .flowops-topbar{ padding-inline: 20px; gap: 12px; }html.flowops-tablet body.flowops-app-body .flowops-shell-menu__panel{ max-width: min(420px, calc(100vw - 40px)); }html.flowops-tablet body.flowops-app-body .flowops-page-head, html.flowops-tablet body.flowops-app-body .flowops-section-head, html.flowops-tablet body.flowops-app-body .flowops-bookings-head, html.flowops-tablet body.flowops-app-body .flowops-myjobs-head, html.flowops-tablet body.flowops-app-body .flowops-calendar-console-head, html.flowops-tablet body.flowops-app-body .flowops-team-console-head, html.flowops-tablet body.flowops-app-body .flowops-create-head-v3110, html.flowops-tablet body.flowops-app-body .flowops-ai-console-head, html.flowops-tablet body.flowops-app-body .flowops-profile-v52-head, html.flowops-tablet body.flowops-app-body .flowops-settings-v98-head, html.flowops-tablet body.flowops-app-body .flowops-billing-v94-head, html.flowops-tablet body.flowops-app-body .flowops-messages-page__head{ gap: 16px; flex-wrap: wrap; }html.flowops-tablet body.flowops-app-body .flowops-actions, html.flowops-tablet body.flowops-app-body .flowops-bookings-head__actions, html.flowops-tablet body.flowops-app-body .flowops-myjobs-head__actions, html.flowops-tablet body.flowops-app-body .flowops-calendar-console-head__actions, html.flowops-tablet body.flowops-app-body .flowops-team-console-head__actions, html.flowops-tablet body.flowops-app-body .flowops-create-head-actions-v3110, html.flowops-tablet body.flowops-app-body .flowops-ai-console-head-actions, html.flowops-tablet body.flowops-app-body .flowops-messages-page__actions{ flex-wrap: wrap; }html.flowops-tablet body.flowops-app-body .flowops-form-grid-2, html.flowops-tablet body.flowops-app-body .flowops-form-grid-3, html.flowops-tablet body.flowops-app-body .flowops-inline-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }html.flowops-tablet body.flowops-app-body .flowops-form-grid-3 > .is-wide, html.flowops-tablet body.flowops-app-body .flowops-form-grid-2 > .is-wide{ grid-column: 1 / -1; } /* -------------------------------------------------------------------------- Portrait tablet shell: maximise usable width and use the existing off-canvas navigation instead of squeezing a desktop sidebar into portrait space. -------------------------------------------------------------------------- */html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body{ overflow: auto; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-app{ min-height: 100dvh; height: auto; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-sidebar{ position: fixed; inset: 0 auto 0 0; z-index: 600; width: min(44vw, 360px); flex-basis: auto; transform: translateX(-105%); transition: transform .22s ease; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-sidebar-toggle{ display: flex; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar{ height: auto; min-height: 70px; padding: 12px 18px; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar__title-wrap, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar__right{ display: none; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar-mobile{ display: flex; align-items: center; justify-content: space-between; width: 100%; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-main{ min-height: 100dvh; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body.flowops-sidebar-open .flowops-sidebar, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-sidebar-open .flowops-sidebar{ transform: translateX(0); }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-content{ padding: 22px 24px 32px; } /* -------------------------------------------------------------------------- Landscape tablet shell: keep desktop navigation, but make it proportionate. -------------------------------------------------------------------------- */html.flowops-tablet.flowops-tablet-landscape body.flowops-app-body{ --flowops-sidebar-width: 220px; }html.flowops-tablet.flowops-tablet-landscape body.flowops-app-body .flowops-sidebar{ width: var(--flowops-sidebar-width); flex: 0 0 var(--flowops-sidebar-width); padding-inline: 10px; }html.flowops-tablet.flowops-tablet-landscape body.flowops-app-body .flowops-nav-link{ padding: 9px 10px; font-size: 13px; }html.flowops-tablet.flowops-tablet-landscape body.flowops-app-body .flowops-topbar{ padding-inline: 20px; }html.flowops-tablet.flowops-tablet-landscape body.flowops-app-body .flowops-context-card{ min-width: 154px; } /* -------------------------------------------------------------------------- Dashboard -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-app-body .flowops-dash18-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }html.flowops-tablet body.flowops-app-body .flowops-dash18-primary-grid, html.flowops-tablet body.flowops-app-body .flowops-dash18-lower-grid{ grid-template-columns: 1fr; }html.flowops-tablet body.flowops-app-body .flowops-dash18-secondary-grid, html.flowops-tablet body.flowops-app-body .flowops-dashboard-action-grid, html.flowops-tablet body.flowops-app-body .flowops-pulse-grid, html.flowops-tablet body.flowops-app-body .flowops-profile-summary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }html.flowops-tablet body.flowops-app-body .flowops-weekly-layout{ grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-weekly-layout{ grid-template-columns: 1fr; } /* -------------------------------------------------------------------------- Bookings -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-app-body .flowops-bookings-toolbar{ grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) auto auto !important; }html.flowops-tablet body.flowops-app-body .flowops-bookings-toolbar > label:nth-of-type(3), html.flowops-tablet body.flowops-app-body .flowops-bookings-toolbar > label:nth-of-type(4){ display: none !important; }html.flowops-tablet body.flowops-app-body .flowops-bookings-more-filters > div{ width: min(560px, calc(100vw - 72px)) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }html.flowops-tablet body.flowops-app-body .flowops-bookings-board-v3090{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }html.flowops-tablet body.flowops-app-body .flowops-bookings-board-column:nth-child(2n){ border-right: 0 !important; }html.flowops-tablet body.flowops-app-body .flowops-bookings-agenda-event{ min-width: 0; } /* -------------------------------------------------------------------------- My Jobs -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-app-body .flowops-myjob-row__main{ grid-template-columns: 92px minmax(0, 1fr) minmax(150px, .62fr) auto !important; gap: 14px !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-myjob-row__main{ grid-template-columns: 86px minmax(0, 1fr) auto !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-myjob-row__assignment{ grid-column: 2 / -1; }html.flowops-tablet body.flowops-app-body .flowops-myjobs-tabs, html.flowops-tablet body.flowops-app-body .flowops-bookings-quickfilters, html.flowops-tablet body.flowops-app-body .flowops-bookings-tabs, html.flowops-tablet body.flowops-app-body .flowops-calendar-view-tabs, html.flowops-tablet body.flowops-app-body .flowops-ai-view-tabs{ -webkit-overflow-scrolling: touch; scrollbar-width: none; }html.flowops-tablet body.flowops-app-body .flowops-myjobs-tabs::-webkit-scrollbar, html.flowops-tablet body.flowops-app-body .flowops-bookings-quickfilters::-webkit-scrollbar, html.flowops-tablet body.flowops-app-body .flowops-bookings-tabs::-webkit-scrollbar, html.flowops-tablet body.flowops-app-body .flowops-calendar-view-tabs::-webkit-scrollbar, html.flowops-tablet body.flowops-app-body .flowops-ai-view-tabs::-webkit-scrollbar{ display: none; } /* -------------------------------------------------------------------------- Calendar -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-app-body .flowops-calendar-toolbar{ gap: 14px !important; }html.flowops-tablet body.flowops-app-body .flowops-calendar-toolbar__actions{ flex-wrap: wrap !important; }html.flowops-tablet body.flowops-app-body .flowops-calendar-filterbar{ display: grid !important; grid-template-columns: minmax(240px, 1fr) minmax(180px, .55fr) auto !important; gap: 10px !important; }html.flowops-tablet body.flowops-app-body .flowops-calendar-search, html.flowops-tablet body.flowops-app-body .flowops-calendar-assignee-filter{ width: 100% !important; max-width: none !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-calendar-filterbar{ grid-template-columns: 1fr 1fr !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-calendar-filter-count{ grid-column: 1 / -1; }html.flowops-tablet body.flowops-app-body .flowops-calendar-drawer, html.flowops-tablet body.flowops-app-body .flowops-calendar-drawer-v3050{ width: min(500px, 72vw) !important; height: 100dvh !important; } /* -------------------------------------------------------------------------- Team, Settings, Profile, Billing and AI -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-app-body .flowops-team-edit-grid, html.flowops-tablet body.flowops-app-body .flowops-settings-v98-console, html.flowops-tablet body.flowops-app-body .flowops-profile-v52-console, html.flowops-tablet body.flowops-app-body .flowops-billing-v94-console{ min-width: 0; }html.flowops-tablet body.flowops-app-body .flowops-team-edit-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }html.flowops-tablet body.flowops-app-body .flowops-team-edit-grid__wide{ grid-column: 1 / -1; }html.flowops-tablet body.flowops-app-body .flowops-settings-v98-console, html.flowops-tablet body.flowops-app-body .flowops-profile-v52-console{ grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-settings-v98-console, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-profile-v52-console{ grid-template-columns: 1fr; }html.flowops-tablet body.flowops-app-body .flowops-ai-console-v316 .flowops-ai-console-layout{ grid-template-columns: 1fr !important; }html.flowops-tablet body.flowops-app-body .flowops-ai-console-v316 .flowops-ai-context-rail{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* -------------------------------------------------------------------------- Messages -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-app-body .flowops-messages-shell{ grid-template-columns: minmax(260px, 32%) minmax(0, 1fr); min-width: 0; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-messages-shell{ grid-template-columns: minmax(250px, 36%) minmax(0, 1fr); }html.flowops-tablet body.flowops-app-body .flowops-message-history, html.flowops-tablet body.flowops-app-body .flowops-conversation-pane{ min-width: 0; } /* -------------------------------------------------------------------------- Control Center / platform admin -------------------------------------------------------------------------- */html.flowops-tablet body.flowops-control-center-body .flowops-console-status-grid-v2870.four, html.flowops-tablet body.flowops-control-center-body .flowops-console-status-grid-v2870.five, html.flowops-tablet body.flowops-control-center-body .flowops-console-mini-grid-v2870, html.flowops-tablet body.flowops-control-center-body .flowops-dashboard-metric-strip-v2970, html.flowops-tablet body.flowops-control-center-body .flowops-platform-status-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }html.flowops-tablet body.flowops-control-center-body .flowops-console-layout-v2870, html.flowops-tablet body.flowops-control-center-body .flowops-platform-layout-v2870, html.flowops-tablet body.flowops-control-center-body .flowops-dashboard-layout-v2970, html.flowops-tablet body.flowops-control-center-body .flowops-dashboard-layout-lower-v2970, html.flowops-tablet body.flowops-control-center-body .flowops-dashboard-balanced-v2980{ grid-template-columns: 1fr !important; }html.flowops-tablet body.flowops-control-center-body .flowops-console-subnav-v2870, html.flowops-tablet body.flowops-control-center-body .flowops-console-subnav-v2890, html.flowops-tablet body.flowops-control-center-body .flowops-operations-subnav{ position: relative !important; top: auto !important; display: flex !important; overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }html.flowops-tablet body.flowops-control-center-body .flowops-console-subnav-v2870 a, html.flowops-tablet body.flowops-control-center-body .flowops-console-subnav-v2890 a, html.flowops-tablet body.flowops-control-center-body .flowops-operations-subnav a{ white-space: nowrap !important; }html.flowops-tablet body.flowops-control-center-body .flowops-admin-table-wrap, html.flowops-tablet body.flowops-control-center-body .flowops-console-table-wrap-v2870, html.flowops-tablet body.flowops-control-center-body .flowops-platform-table-wrap-v2870{ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- Portrait refinements -------------------------------------------------------------------------- */html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-dash18-metrics, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-stat-grid, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-dashboard-stats, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-dashboard-action-grid, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-pulse-grid, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-plan-grid, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-team-grid, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-profile-summary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-bookings-toolbar{ grid-template-columns: minmax(0, 1fr) auto auto !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-bookings-toolbar > label:nth-of-type(2), html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-bookings-toolbar > label:nth-of-type(3), html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-bookings-toolbar > label:nth-of-type(4){ display: none !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-bookings-board-v3090{ grid-template-columns: 1fr 1fr !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-calendar-console-head__actions, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-bookings-head__actions, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-myjobs-head__actions, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-create-head-actions-v3110, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-team-console-head__actions{ width: 100%; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-calendar-drawer, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-calendar-drawer-v3050{ width: min(560px, 78vw) !important; } /* Keep phone and laptop behaviour outside the tablet class completely untouched. */ /* ======================================================================== FlowOps v31.22.6 — Tablet shell and booking schedule correction Scope: tablet layer only. Existing laptop and phone styles stay untouched. ======================================================================== */ /* Keep all primary workspace actions visible on tablet portrait. The first tablet pass intentionally switched to the mobile title block but hid the action rail; this restores the complete FlowOps top bar in a compact form. */html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar{ display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 70px !important; padding: 12px 16px !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar__left{ display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar__right, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar__right--control{ display: flex !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; gap: 6px !important; margin-left: auto !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar-mobile{ display: flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar-mobile-main{ display: flex !important; align-items: center !important; gap: 9px !important; min-width: 0 !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar-mobile-copy{ min-width: 0 !important; max-width: clamp(88px, 18vw, 180px) !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar-mobile-copy strong, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-topbar-mobile-copy span{ display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-sidebar-toggle, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-shell-search-btn, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-shell-icon-btn, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-shell-menu > summary.flowops-shell-icon-btn, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-context-card{ width: 42px !important; min-width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 13px !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-shell-search-btn{ display: flex !important; padding: 0 !important; justify-content: center !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-shell-search-btn__label, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-shell-search-btn kbd, html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-context-card__user{ display: none !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-context-card{ padding: 5px !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-context-card__avatar{ width: 30px !important; min-width: 30px !important; height: 30px !important; } /* Keep tablet popovers within the actual viewport even when the full action rail is visible. */html.flowops-tablet body.flowops-app-body .flowops-topbar .flowops-shell-menu__panel--right, html.flowops-tablet body.flowops-app-body .flowops-topbar .flowops-shell-menu__panel--notifications{ max-width: min(420px, calc(100vw - 32px)) !important; } /* ------------------------------------------------------------------------ New Booking: dedicated tablet Schedule layout. Portrait uses Date on its own row and Start/End side-by-side. Landscape keeps the natural three-column schedule. This prevents quick-time chips and the calculated end time from being squeezed into generic form-grid widths. ------------------------------------------------------------------------ */html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127{ gap: 16px 18px !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 > .flowops-field:first-child{ grid-column: 1 / -1 !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 .flowops-readonly-value-v3120{ background: var(--fo-white) !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-quick-times-v3120{ align-items: flex-start !important; flex-direction: column !important; gap: 8px !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-quick-times-v3120, html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-time-chips{ min-width: 0 !important; max-width: 100% !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-time-chips{ display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-time-chips button{ flex: 0 0 auto !important; min-width: 0 !important; } /* The footer must remain comfortable on tablet even when Back + Continue or Back + Create booking are both present. */html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-actions-v3110{ gap: 16px !important; padding: 12px 14px !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-actions-v3110 > div{ flex-wrap: wrap !important; } /* ======================================================================== FlowOps v31.22.7 — Tablet schedule grid correction The previous schedule selector used :first-of-type, but the Schedule grid is not the first DIV inside the booking panel. This dedicated class now guarantees the tablet layout is applied only to Date / Start / End. ======================================================================== */html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127{ display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, .96fr) minmax(0, .96fr) !important; gap: 18px !important; align-items: start !important; width: 100% !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 > .flowops-field{ min-width: 0 !important; width: 100% !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 > .flowops-field:nth-child(1){ grid-column: 1 !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 > .flowops-field:nth-child(2){ grid-column: 2 !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 > .flowops-field:nth-child(3){ grid-column: 3 !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 input[type="date"], html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 input[type="time"], html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 .flowops-readonly-value-v3120{ inline-size: 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; min-height: 46px !important; box-sizing: border-box !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 .flowops-readonly-value-v3120{ display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 0 13px !important; border: 1px solid #d0d5dd !important; border-radius: 8px !important; background: #f9fafb !important; color: #344054 !important; font-size: 12px !important; font-weight: 720 !important; line-height: 1.2 !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 .flowops-quick-times-v3120{ display: flex !important; align-items: flex-start !important; flex-direction: column !important; gap: 7px !important; margin-top: 9px !important; min-width: 0 !important; max-width: 100% !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 .flowops-quick-times-v3120 > div:first-child{ display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 5px 7px !important; min-width: 0 !important; }html.flowops-tablet body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 .flowops-time-chips{ display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 0 !important; min-width: 0 !important; max-width: 100% !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 17px 18px !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 > .flowops-field:nth-child(1){ grid-column: 1 / -1 !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 > .flowops-field:nth-child(2){ grid-column: 1 !important; }html.flowops-tablet.flowops-tablet-portrait body.flowops-app-body .flowops-new-booking-console-v3110 .flowops-create-schedule-grid-v3127 > .flowops-field:nth-child(3){ grid-column: 2 !important; } /* v33.0.7 Bookings integrity: tablet must keep Status, Assignment and Sort accessible. */html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-toolbar{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-toolbar>.flowops-bookings-search{ grid-column:1/-1!important; }html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-toolbar>label:nth-of-type(2), html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-toolbar>label:nth-of-type(3), html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-toolbar>label:nth-of-type(4){ display:block!important; }html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-toolbar>.flowops-btn-secondary, html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-more-filters{ grid-row:auto!important; }html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-more-filters{ grid-column:1/-1!important; justify-self:stretch!important; }html.flowops-tablet body.flowops-app-body.flowops-v33-bookings .flowops-bookings-more-filters summary{ width:100%!important; } /* v35.3.31 profile heading transparency on tablet */html.flowops-tablet body.flowops-app-body.flowops-page-profile .flowops-profile-v52 > .flowops-profile-v52-head, html.flowops-tablet body.flowops-app-body.flowops-page-profile .flowops-profile-v52 > .flowops-profile-v52-head > .flowops-profile-v52-title{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;}