/* Lightweight polish + fallback styles. The UI uses Tailwind utility classes (compiled locally into assets/css/tailwind.css). This file adds a few niceties and keeps the app readable if the CDN is unavailable. */ html, body { height: 100%; } :root { /* Primary accent (overridden per-branch via inline style on ) */ --accent: #0ea5e9; --accent-solid: #0369a1; --accent-solid-hover: #075985; --accent-on-solid: #ffffff; --accent-text: #0369a1; --accent-text-strong: #075985; --accent-text-dark: #bae6fd; color-scheme: light; } .dark { color-scheme: dark; } /* Prevent mobile browsers (notably iOS Safari) from auto-inflating small text in dense admin tables. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.45; font-size: 14px; } /* ------------------------------ Cashbook V2: Attachment action buttons ------------------------------ Some browsers / CSS resets can make small action buttons inside tables lose their borders/backgrounds inconsistently. These classes act as a reliable safety net for the Cashbook attachment actions. */ .cb2-att-btn { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(226, 232, 240, 0.95) !important; /* slate-200 */ } .cb2-att-btn:hover { background: rgba(248, 250, 252, 0.98) !important; /* slate-50 */ } .dark .cb2-att-btn { background: rgba(15, 23, 42, 0.75) !important; /* slate-900 */ border-color: rgba(51, 65, 85, 0.90) !important; /* slate-700 */ } .dark .cb2-att-btn:hover { background: rgba(30, 41, 59, 0.72) !important; /* slate-800 */ } .cb2-att-btn-danger { background: rgba(254, 242, 242, 0.96) !important; /* rose-50 */ border: 1px solid rgba(254, 202, 202, 0.95) !important; /* rose-200 */ color: rgb(190, 18, 60) !important; /* rose-700 */ } .cb2-att-btn-danger:hover { background: rgba(254, 226, 226, 0.98) !important; /* rose-100 */ } .dark .cb2-att-btn-danger { background: rgba(76, 5, 25, 0.35) !important; border-color: rgba(127, 29, 29, 0.55) !important; color: rgb(254, 202, 202) !important; } .dark .cb2-att-btn-danger:hover { background: rgba(76, 5, 25, 0.50) !important; } /* ------------------------------ Money / receipt amount alignment ------------------------------ */ .ui-money { display: inline-block; max-width: 100%; max-inline-size: 100%; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.15; transform: none; transform-origin: right center; overflow: visible; } .ui-money-lg { font-size: clamp(1.05rem, 3.4vw, 1.5rem); letter-spacing: -0.025em; } .ui-money-card { min-width: 0; overflow: hidden; } .ui-money-card .ui-money { display: block; width: 100%; max-inline-size: 100%; text-align: left; } .ui-receipt-payment-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) !important; } .ui-receipt-amount-card { min-inline-size: min(100%, 12rem); } .ui-receipt-amount-card.ui-money-card-wide { grid-column: 1 / -1; } .ui-receipt-amount-card.ui-money-card-wide .ui-money-lg { font-size: clamp(1.05rem, 4.5vw, 1.5rem); } .ui-money-is-fitted { letter-spacing: -0.035em; } .ui-money-too-long { letter-spacing: -0.045em; } .ui-money-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; min-width: 0; } .ui-money-row > :first-child { min-width: 0; overflow-wrap: anywhere; } .ui-money-row > .ui-money, .ui-money-row > :last-child { flex: 1 1 auto; min-width: 0; max-width: min(68%, 18rem); text-align: right; } .ui-receipt-line, .ui-receipt-item-line { min-width: 0; } .ui-receipt-line > :first-child, .ui-receipt-item-line > :first-child { min-width: 0; } .ui-receipt-line > :last-child { flex: 0 1 auto; min-width: 0; max-width: 62%; text-align: right; } .ui-receipt-item-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7.25rem, 44%); align-items: start; gap: 0.75rem; } .ui-receipt-item-amount { min-width: 0; max-width: 100%; text-align: right; justify-self: stretch; overflow: visible; } .ui-receipt-item-amount .ui-money { max-width: 100%; } .ui-money-stack, .ui-receipt-item-line.ui-money-stack { grid-template-columns: minmax(0, 1fr); } .ui-money-stack > :last-child, .ui-receipt-item-line.ui-money-stack .ui-receipt-item-amount { justify-self: end; max-width: 100%; margin-left: auto; } .receipt-paper, .invoice-print { overflow-wrap: anywhere; } .receipt-paper .ui-money, .invoice-print .ui-money { max-inline-size: 100%; } .receipt-paper .flex.items-start.justify-between:has(.ui-money), .invoice-print .flex.items-start.justify-between:has(.ui-money) { min-width: 0; } .receipt-paper .flex.items-start.justify-between:has(.ui-money) > :last-child, .invoice-print .flex.items-start.justify-between:has(.ui-money) > :last-child { min-width: 0; max-width: 62%; text-align: right; } .ui-print-items-table { width: 100%; table-layout: fixed; } .ui-print-items-table th, .ui-print-items-table td { min-width: 0; vertical-align: top; } .ui-print-items-table th:first-child, .ui-print-items-table td:first-child { width: 42%; overflow-wrap: anywhere; word-break: normal; } .ui-print-items-table th:nth-child(2), .ui-print-items-table td:nth-child(2) { width: 14%; } .ui-print-items-table th:nth-child(3), .ui-print-items-table td:nth-child(3), .ui-print-items-table th:nth-child(4), .ui-print-items-table td:nth-child(4) { width: 22%; } .ui-print-items-table .ui-money { display: block; width: 100%; max-width: 100%; text-align: right; } @media (max-width: 520px) { .ui-money-row { gap: 0.5rem; } .ui-money-row > .ui-money, .ui-money-row > :last-child { max-width: 68%; } .ui-receipt-line .ui-money { font-size: 0.875rem; } .ui-receipt-item-line { grid-template-columns: minmax(0, 1fr) minmax(7rem, 48%); } } @media (max-width: 420px) { .ui-money-card { grid-column: 1 / -1; } .ui-receipt-line { align-items: flex-start; } .ui-money-card .ui-money-lg { font-size: clamp(1rem, 6.2vw, 1.25rem); } .ui-receipt-item-line { grid-template-columns: minmax(0, 1fr); } .ui-receipt-item-amount { justify-self: end; max-width: 100%; margin-left: auto; } } @media (max-width: 340px) { .ui-money-row { display: grid; grid-template-columns: 1fr; } .ui-money-row > .ui-money, .ui-money-row > :last-child { justify-self: end; max-width: 100%; } .ui-receipt-line { flex-wrap: wrap; } .ui-receipt-line > :last-child { max-width: 100%; margin-left: auto; } } @media print { .ui-money { white-space: nowrap !important; } .ui-money-lg { font-size: 1.2rem; } .receipt-paper .ui-receipt-item-line { grid-template-columns: minmax(0, 1fr) minmax(8rem, 46%); } .receipt-paper .ui-receipt-item-line.ui-money-stack { grid-template-columns: minmax(0, 1fr); } .invoice-print .ui-table-wrap { overflow: visible !important; } .invoice-print .ui-print-items-table { table-layout: fixed; width: 100% !important; min-width: 0 !important; font-size: 11px; } .invoice-print .ui-print-items-table th, .invoice-print .ui-print-items-table td { padding-left: 0.55rem !important; padding-right: 0.55rem !important; } } /* Receipt view summary: keep Method/Received by side-by-side, then make the amount a full-width total row. This gives large or negative amounts room without clipping or forcing the text to become tiny. */ .ui-receipt-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ui-receipt-payment-grid > .ui-receipt-amount-card { grid-column: 1 / -1 !important; } .ui-receipt-amount-card { min-inline-size: 0; overflow: visible; } .ui-receipt-total-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-width: 0; } .ui-receipt-total-row > :first-child { flex: 1 1 auto; min-width: 0; } .ui-receipt-amount-card.ui-money-card .ui-money { display: inline-block; width: auto; max-width: 100%; margin-left: auto; text-align: right; } .ui-receipt-amount-card .ui-money-lg { font-size: clamp(1.15rem, 4.25vw, 1.65rem); } @media (max-width: 639px) { .ui-receipt-payment-grid { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 420px) { .ui-receipt-total-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .ui-receipt-total-row .ui-money { justify-self: end; } } /* ------------------------------ Compact defaults ------------------------------ */ /* Make data tables a bit tighter everywhere (keeps admin UIs readable and information-dense). */ @media screen { main table { font-size: 12px; } main table th { font-size: 11px; } main table th, main table td { padding: 6px 10px !important; /* override Tailwind padding utilities for consistent compactness */ vertical-align: top; } } @media screen { /* Optional: tighter spacing (user-controlled) */ body.density-compact main table { font-size: 11px; } body.density-compact main table th { font-size: 10px; } body.density-compact main table th, body.density-compact main table td { padding: 4px 8px !important; } } /* Subtle background wash for the light theme */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(900px circle at 10% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%), radial-gradient(900px circle at 100% 20%, rgba(59,130,246,0.10), transparent 45%), radial-gradient(900px circle at 20% 100%, rgba(16,185,129,0.10), transparent 50%); opacity: 1; z-index: -2; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.35; z-index: -1; } /* ------------------------------ Dark mode refinements ------------------------------ */ .dark body::before { background: radial-gradient(900px circle at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%), radial-gradient(900px circle at 100% 20%, rgba(99,102,241,0.10), transparent 45%), radial-gradient(900px circle at 20% 100%, rgba(16,185,129,0.08), transparent 50%); opacity: 0.7; } .dark body::after { background-image: linear-gradient(to right, rgba(148,163,184,0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,184,0.10) 1px, transparent 1px); opacity: 0.18; } body ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent) !important; } .dark body ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; } .dark .nav-link { color: #e2e8f0; } .dark .nav-link:hover { background: rgba(148, 163, 184, 0.12); } .dark .nav-icon { border-color: rgba(51, 65, 85, 0.9); /* slate-700 */ background: rgba(15, 23, 42, 0.6); /* slate-900 */ } /* Active navigation uses the branch accent */ .nav-active { background: color-mix(in srgb, var(--accent) 12%, white); border: 1px solid color-mix(in srgb, var(--accent) 22%, white); } .dark .nav-active { background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); color: #e2e8f0; } .dark .nav-active .nav-icon { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); } /* ------------------------------ Branch theming ------------------------------ */ /* Treat Tailwind's "sky" token as the app-wide accent, but allow per-branch override via --accent. Solid controls use contrast-safe tokens computed in the layout, so light branch colors remain readable on buttons, topbar badges and hover states. */ .bg-sky-600, .bg-blue-600, .bg-indigo-600 { background-color: var(--accent-solid) !important; } .bg-sky-700, .bg-blue-700, .bg-indigo-700 { background-color: var(--accent-solid-hover) !important; } .hover\:bg-sky-700:hover, .hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover { background-color: var(--accent-solid-hover) !important; } [class~="bg-sky-600"][class~="text-white"], [class~="bg-blue-600"][class~="text-white"], [class~="bg-indigo-600"][class~="text-white"], [class~="bg-sky-700"][class~="text-white"], [class~="bg-blue-700"][class~="text-white"], [class~="bg-indigo-700"][class~="text-white"] { color: var(--accent-on-solid) !important; } .bg-sky-50, .bg-blue-50, .bg-indigo-50 { background-color: color-mix(in srgb, var(--accent) 12%, white) !important; } .text-sky-600, .text-sky-700, .text-sky-800, .text-blue-600, .text-blue-700, .text-blue-800, .text-indigo-600, .text-indigo-700, .text-indigo-800 { color: var(--accent-text) !important; } .text-sky-900, .text-blue-900, .text-indigo-900 { color: var(--accent-text-strong) !important; } .hover\:text-sky-800:hover, .hover\:text-blue-800:hover, .hover\:text-indigo-800:hover { color: var(--accent-text-strong) !important; } .border-sky-200, .border-blue-200, .border-indigo-200 { border-color: color-mix(in srgb, var(--accent) 28%, white) !important; } .focus\:border-sky-400:focus { border-color: var(--accent-solid) !important; } .ring-sky-200 { --tw-ring-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; } .focus\:ring-sky-200:focus { --tw-ring-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; } .dark .bg-sky-50, .dark .bg-blue-50, .dark .bg-indigo-50 { background-color: color-mix(in srgb, var(--accent) 14%, transparent) !important; } .dark .text-sky-300, .dark .text-sky-200, .dark .text-blue-300, .dark .text-blue-200, .dark .text-indigo-300, .dark .text-indigo-200 { color: var(--accent-text-dark) !important; } .dark .border-sky-200, .dark .border-blue-200, .dark .border-indigo-200 { border-color: color-mix(in srgb, var(--accent) 28%, transparent) !important; } .dark .focus\:ring-sky-500\/30:focus { --tw-ring-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; } /* Contrast-safe soft accent utilities. These normalize light/blue/indigo accent washes used by cards, icons, tabs and badges so branch accent colors stay readable everywhere. */ .bg-sky-100, .bg-blue-100, .bg-indigo-100 { background-color: color-mix(in srgb, var(--accent) 16%, white) !important; } .bg-sky-100\/70, .bg-blue-100\/70, .bg-indigo-100\/70 { background-color: color-mix(in srgb, var(--accent) 13%, white) !important; } .bg-sky-500\/10, .bg-blue-500\/10, .bg-indigo-500\/10 { background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important; } .bg-sky-500\/15, .bg-blue-500\/15, .bg-indigo-500\/15 { background-color: color-mix(in srgb, var(--accent) 14%, transparent) !important; } .bg-sky-500\/20, .bg-blue-500\/20, .bg-indigo-500\/20 { background-color: color-mix(in srgb, var(--accent) 18%, transparent) !important; } .border-sky-500\/25, .border-blue-500\/25, .border-indigo-500\/25 { border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; } .hover\:bg-sky-50:hover, .hover\:bg-blue-50:hover, .hover\:bg-indigo-50:hover { background-color: color-mix(in srgb, var(--accent) 8%, white) !important; } .hover\:border-sky-200:hover, .hover\:border-blue-200:hover, .hover\:border-indigo-200:hover { border-color: color-mix(in srgb, var(--accent) 24%, white) !important; } .dark .bg-sky-100, .dark .bg-blue-100, .dark .bg-indigo-100 { background-color: color-mix(in srgb, var(--accent) 18%, transparent) !important; } .dark .bg-sky-100\/70, .dark .bg-blue-100\/70, .dark .bg-indigo-100\/70 { background-color: color-mix(in srgb, var(--accent) 16%, transparent) !important; } .dark .bg-sky-500\/10, .dark .bg-blue-500\/10, .dark .bg-indigo-500\/10 { background-color: color-mix(in srgb, var(--accent) 12%, transparent) !important; } .dark .bg-sky-500\/15, .dark .bg-blue-500\/15, .dark .bg-indigo-500\/15 { background-color: color-mix(in srgb, var(--accent) 16%, transparent) !important; } .dark .bg-sky-500\/20, .dark .bg-blue-500\/20, .dark .bg-indigo-500\/20 { background-color: color-mix(in srgb, var(--accent) 20%, transparent) !important; } .dark .border-sky-500\/25, .dark .border-blue-500\/25, .dark .border-indigo-500\/25 { border-color: color-mix(in srgb, var(--accent) 34%, transparent) !important; } .dark .hover\:bg-sky-50:hover, .dark .hover\:bg-blue-50:hover, .dark .hover\:bg-indigo-50:hover { background-color: color-mix(in srgb, var(--accent) 16%, transparent) !important; } .dark .hover\:border-sky-200:hover, .dark .hover\:border-blue-200:hover, .dark .hover\:border-indigo-200:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; } /* Reusable clickable action tiles for dashboards/quick-start panels. */ .ui-action-tile { display: block; border-radius: 0.85rem; border: 1px solid var(--ui-control-border); background: color-mix(in srgb, var(--ui-control-bg) 94%, white); color: var(--ui-control-text); padding: 0.58rem 0.72rem; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease; } .ui-action-tile:hover { background: color-mix(in srgb, var(--accent) 7%, white); border-color: color-mix(in srgb, var(--accent) 22%, white); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .ui-action-tile:active { transform: translateY(1px); } .dark .ui-action-tile { background: rgba(15, 23, 42, 0.72); border-color: rgba(51, 65, 85, 0.88); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20); } .dark .ui-action-tile:hover { background: color-mix(in srgb, var(--accent) 13%, rgb(15 23 42)); border-color: color-mix(in srgb, var(--accent) 28%, rgb(51 65 85)); } .ui-action-tile-title { display: flex; align-items: center; gap: 0.42rem; color: rgba(15, 23, 42, 0.96); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; } .dark .ui-action-tile-title { color: rgba(241, 245, 249, 0.96); } .ui-action-tile-title .action-icon { color: var(--accent-text); } .dark .ui-action-tile-title .action-icon { color: var(--accent-text-dark); } .ui-action-tile-desc { margin-top: 0.12rem; color: var(--ui-control-muted); font-size: 0.6875rem; line-height: 1.25; } /* Native form controls (checkboxes/radios/range) */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); } .dark .form-field { background: rgba(15, 23, 42, 0.75); border-color: rgba(51, 65, 85, 0.85); color: #e2e8f0; } .dark .form-field::placeholder { color: rgba(148, 163, 184, 0.7); } .dark .toast { background: rgba(15, 23, 42, 0.9); border-color: rgba(51, 65, 85, 0.85); } .dark .ui-table thead th { /* Opaque header prevents row text bleeding through on zebra/hover rows */ /* Slightly lighter than card background so headers stay readable */ background: #1e293b; /* slate-800 */ color: rgba(203, 213, 225, 0.95); border-bottom-color: rgba(71, 85, 105, 0.85); box-shadow: 0 1px 0 rgba(71, 85, 105, 1); } .dark .ui-table tbody tr:nth-child(even):not([class*="bg-"]) { background: rgba(148, 163, 184, 0.06); } .dark .ui-table tbody tr:hover:not([class*="bg-"]) { background: color-mix(in srgb, var(--accent) 18%, transparent); } /* Dark-mode consistency safety net. Some screens still use light-only Tailwind color utilities. These overrides keep text, surfaces and borders readable in dark mode without having to refactor every view. */ /* Only apply these overrides when the element does NOT already specify a dark:* variant for the same property. (Prevents overriding screens like the dashboard that already handle dark mode correctly.) */ /* Text */ .dark [class~="text-slate-900"]:not([class*="dark:text-"]) { color: rgb(241 245 249); } .dark [class~="text-slate-800"]:not([class*="dark:text-"]) { color: rgb(226 232 240); } .dark [class~="text-slate-700"]:not([class*="dark:text-"]) { color: rgb(226 232 240); } .dark [class~="text-slate-600"]:not([class*="dark:text-"]) { color: rgb(203 213 225); } .dark [class~="text-slate-500"]:not([class*="dark:text-"]) { color: rgb(148 163 184); } .dark [class~="text-slate-400"]:not([class*="dark:text-"]) { color: rgb(148 163 184); } /* Surfaces */ .dark [class~="bg-white"]:not([class*="dark:bg-"]) { background-color: rgb(15 23 42); } .dark [class~="bg-slate-50"]:not([class*="dark:bg-"]) { background-color: rgb(30 41 59); } .dark [class~="bg-slate-100"]:not([class*="dark:bg-"]) { background-color: rgb(30 41 59); } .dark [class~="bg-white/70"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.70); } .dark [class~="bg-white/80"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.80); } .dark [class~="bg-white/90"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.90); } /* Borders & dividers */ .dark [class~="border-slate-200"]:not([class*="dark:border-"]) { border-color: rgb(30 41 59); } .dark [class~="border-slate-300"]:not([class*="dark:border-"]) { border-color: rgb(51 65 85); } .dark [class~="divide-slate-200"]:not([class*="dark:divide-"]) > :not([hidden]) ~ :not([hidden]) { border-color: rgb(30 41 59); } /* Hover utilities used in legacy tables (keep them subtle in dark mode). */ .dark [class~="hover:bg-slate-50"]:not([class*="dark:hover:bg-"]):hover { background-color: rgba(148, 163, 184, 0.06); } .dark [class~="hover:bg-slate-100"]:not([class*="dark:hover:bg-"]):hover { background-color: rgba(148, 163, 184, 0.10); } /* Table headers that use light-only bg/text utilities. */ .dark thead[class~="bg-slate-50"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.9); } .dark thead[class~="text-slate-600"]:not([class*="dark:text-"]) { color: rgba(203, 213, 225, 0.95); } /* Translucent light surfaces (common in sticky headers, subtle cards). */ .dark [class~="bg-slate-50/80"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.80); } .dark [class~="bg-slate-50/70"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.70); } .dark [class~="bg-slate-50/60"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.60); } .dark [class~="bg-slate-50/50"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.50); } .dark [class~="hover:bg-slate-50/50"]:not([class*="dark:hover:bg-"]):hover { background-color: rgba(148, 163, 184, 0.06); } /* Accent badges & highlight cards (used in invoices/receipts lists and detail pages). */ .dark [class~="bg-sky-50"]:not([class*="dark:bg-"]) { background-color: color-mix(in srgb, var(--accent) 14%, transparent); } .dark [class~="bg-emerald-50"]:not([class*="dark:bg-"]) { background-color: rgba(16, 185, 129, 0.14); } .dark [class~="bg-amber-50"]:not([class*="dark:bg-"]) { background-color: rgba(245, 158, 11, 0.14); } .dark [class~="bg-rose-50"]:not([class*="dark:bg-"]) { background-color: rgba(244, 63, 94, 0.12); } .dark [class~="bg-indigo-50"]:not([class*="dark:bg-"]) { background-color: rgba(99, 102, 241, 0.12); } .dark [class~="border-sky-200"]:not([class*="dark:border-"]) { border-color: color-mix(in srgb, var(--accent) 28%, transparent); } .dark [class~="border-emerald-200"]:not([class*="dark:border-"]) { border-color: rgba(16, 185, 129, 0.35); } .dark [class~="border-amber-200"]:not([class*="dark:border-"]) { border-color: rgba(245, 158, 11, 0.35); } .dark [class~="border-rose-200"]:not([class*="dark:border-"]) { border-color: rgba(244, 63, 94, 0.35); } .dark [class~="border-indigo-200"]:not([class*="dark:border-"]) { border-color: rgba(99, 102, 241, 0.35); } .dark [class~="text-sky-900"]:not([class*="dark:text-"]) { color: var(--accent-text-dark); } .dark [class~="text-sky-800"]:not([class*="dark:text-"]) { color: var(--accent-text-dark); } .dark [class~="text-sky-700"]:not([class*="dark:text-"]) { color: var(--accent-text-dark); } .dark [class~="text-emerald-900"]:not([class*="dark:text-"]) { color: rgb(167 243 208); } .dark [class~="text-emerald-800"]:not([class*="dark:text-"]) { color: rgb(167 243 208); } .dark [class~="text-emerald-700"]:not([class*="dark:text-"]) { color: rgb(110 231 183); } .dark [class~="text-amber-900"]:not([class*="dark:text-"]) { color: rgb(253 230 138); } .dark [class~="text-amber-800"]:not([class*="dark:text-"]) { color: rgb(253 230 138); } .dark [class~="text-amber-700"]:not([class*="dark:text-"]) { color: rgb(252 211 77); } .dark [class~="text-rose-900"]:not([class*="dark:text-"]) { color: rgb(254 205 211); } .dark [class~="text-rose-800"]:not([class*="dark:text-"]) { color: rgb(254 205 211); } .dark [class~="text-rose-700"]:not([class*="dark:text-"]) { color: rgb(253 164 175); } .dark [class~="text-indigo-900"]:not([class*="dark:text-"]) { color: rgb(199 210 254); } .dark [class~="text-indigo-800"]:not([class*="dark:text-"]) { color: rgb(199 210 254); } .dark [class~="text-indigo-700"]:not([class*="dark:text-"]) { color: rgb(199 210 254); } /* Extended dark-mode safety net for remaining legacy/light-only utility patterns. */ .dark [class~="text-sky-600"]:not([class*="dark:text-"]) { color: var(--accent-text-dark); } .dark [class~="text-gray-700"]:not([class*="dark:text-"]) { color: rgb(226 232 240); } .dark [class~="text-violet-900"]:not([class*="dark:text-"]) { color: rgb(221 214 254); } .dark [class~="text-violet-800"]:not([class*="dark:text-"]) { color: rgb(221 214 254); } .dark [class~="text-violet-700"]:not([class*="dark:text-"]) { color: rgb(196 181 253); } .dark [class~="bg-white/60"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.60); } .dark [class~="bg-slate-200"]:not([class*="dark:bg-"]) { background-color: rgb(51 65 85); } .dark [class~="bg-slate-50/40"]:not([class*="dark:bg-"]) { background-color: rgba(15, 23, 42, 0.40); } .dark [class~="bg-slate-100/50"]:not([class*="dark:bg-"]) { background-color: rgba(30, 41, 59, 0.50); } .dark [class~="bg-sky-100"]:not([class*="dark:bg-"]) { background-color: color-mix(in srgb, var(--accent) 18%, transparent); } .dark [class~="bg-sky-100/70"]:not([class*="dark:bg-"]) { background-color: color-mix(in srgb, var(--accent) 16%, transparent); } .dark [class~="bg-sky-200/60"]:not([class*="dark:bg-"]) { background-color: color-mix(in srgb, var(--accent) 18%, transparent); } .dark [class~="bg-amber-50/40"]:not([class*="dark:bg-"]) { background-color: rgba(245, 158, 11, 0.10); } .dark [class~="bg-violet-50"]:not([class*="dark:bg-"]) { background-color: rgba(139, 92, 246, 0.12); } .dark [class~="bg-fuchsia-50"]:not([class*="dark:bg-"]) { background-color: rgba(217, 70, 239, 0.12); } .dark [class~="bg-gray-50"]:not([class*="dark:bg-"]) { background-color: rgb(30 41 59); } .dark [class~="border-slate-100"]:not([class*="dark:border-"]) { border-color: rgb(30 41 59); } .dark [class~="divide-slate-100"]:not([class*="dark:divide-"]) > :not([hidden]) ~ :not([hidden]) { border-color: rgb(30 41 59); } .dark [class~="border-gray-200"]:not([class*="dark:border-"]) { border-color: rgb(30 41 59); } .dark [class~="border-violet-200"]:not([class*="dark:border-"]) { border-color: rgba(139, 92, 246, 0.35); } .dark [class~="hover:bg-white"]:not([class*="dark:hover:bg-"]):hover { background-color: rgba(148, 163, 184, 0.08); } .dark [class~="hover:bg-slate-200"]:not([class*="dark:hover:bg-"]):hover { background-color: rgba(148, 163, 184, 0.12); } .dark [class~="hover:bg-sky-50"]:not([class*="dark:hover:bg-"]):hover { background-color: color-mix(in srgb, var(--accent) 18%, transparent); } .dark [class~="hover:bg-rose-50"]:not([class*="dark:hover:bg-"]):hover, .dark [class~="hover:bg-rose-100"]:not([class*="dark:hover:bg-"]):hover { background-color: rgba(244, 63, 94, 0.14); } .dark [class~="hover:bg-amber-50"]:not([class*="dark:hover:bg-"]):hover { background-color: rgba(245, 158, 11, 0.14); } /* Light-only gradient cards (notably error/auth shells) need dark gradient stops too. */ .dark [class~="from-slate-50"]:not([class*="dark:from-"]) { --tw-gradient-from: rgb(15 23 42) var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dark [class~="from-sky-50"]:not([class*="dark:from-"]) { --tw-gradient-from: color-mix(in srgb, var(--accent) 14%, rgb(15 23 42)) var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dark [class~="from-amber-50"]:not([class*="dark:from-"]) { --tw-gradient-from: rgba(245, 158, 11, 0.14) var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dark [class~="from-rose-50"]:not([class*="dark:from-"]) { --tw-gradient-from: rgba(244, 63, 94, 0.12) var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dark [class~="to-white"]:not([class*="dark:to-"]) { --tw-gradient-to: rgb(15 23 42) var(--tw-gradient-to-position); } .dark select option, .dark input[list]::-webkit-calendar-picker-indicator { background-color: rgb(15 23 42); color: rgb(226 232 240); } a { color: inherit; text-decoration: none; } *, *::before, *::after { box-sizing: border-box; } /* App-shell structural helpers. NOTE: Do not redefine Tailwind utility classnames (e.g. `.hidden`, `.flex`, `.inline-flex`) here — that breaks responsive variants like `md:hidden`. */ .app-shell { display: flex; min-height: 100vh; width: 100%; } .app-main { display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; } .app-content { padding: 0.75rem; } @media (min-width: 768px) { .app-content { padding: 1rem; } } @media (min-width: 1280px) { .app-content { padding: 1.25rem; } } /* Admin sidebar breakpoint Project rule: 640px and below is mobile/off-canvas; 641px and above is non-mobile. The permanent desktop sidebar starts immediately above the mobile breakpoint. */ .app-sidebar { flex: 0 0 16rem; max-width: min(16rem, 88vw); } @media (max-width: 640px) { #sidebar.app-sidebar { position: fixed; inset: 0 auto 0 0; width: 16rem; max-width: min(16rem, 88vw); } .app-sidebar-open, .app-sidebar-close { display: inline-flex !important; } } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 641px) { #sidebar.app-sidebar { position: relative !important; inset: auto !important; left: auto !important; width: 16rem !important; max-width: 16rem !important; flex: 0 0 16rem !important; transform: translateX(0) !important; } #sidebar .app-sidebar-inner { height: 100vh !important; position: sticky !important; top: 0 !important; box-shadow: none !important; } .app-sidebar-open, .app-sidebar-close, .app-sidebar-overlay { display: none !important; } } /* Responsive admin topbar Keeps the Control Panel title, search, branch switcher and utility actions inside the app column at tablet widths and when branch/user names are long. */ .app-topbar { width: 100%; max-width: 100%; } .app-topbar-inner { width: 100%; min-width: 0; } .app-topbar-title { flex: 1 1 12rem; min-width: 0; } .app-topbar-actions { flex: 1 1 30rem; min-width: 0; max-width: 100%; flex-wrap: wrap; } .app-topbar-form { min-width: 0; max-width: 100%; } .app-topbar-chip { flex: 0 1 auto; min-width: 0; max-width: min(18rem, 100%); } .app-topbar-chip > svg, .app-topbar-chip > span[aria-hidden="true"] { flex: 0 0 auto; } .app-topbar-chip .app-topbar-select { width: auto; min-width: 0; max-width: min(14rem, 46vw); text-overflow: ellipsis; } .app-topbar-chip > span.truncate { min-width: 0; max-width: min(14rem, 46vw); } .app-topbar .cmdk-launch { flex: 1 1 14rem; min-width: 0; max-width: 18rem; } .app-topbar-logout-form { flex: 0 0 auto; } @media (min-width: 641px) { .app-topbar .cmdk-launch-icon { display: none !important; } .app-topbar-actions { display: flex !important; } } @media (min-width: 641px) and (max-width: 1279.98px) { .app-topbar-actions { order: 10; flex: 1 0 100%; justify-content: flex-start; } .app-topbar .cmdk-launch { max-width: none; } } @media (min-width: 1280px) { .app-topbar-inner { flex-wrap: nowrap; } .app-topbar-actions { flex: 0 1 auto; flex-wrap: nowrap; } .app-topbar-chip .app-topbar-select, .app-topbar-chip > span.truncate { max-width: 13rem; } } @media (max-width: 420px) { .app-topbar-title { flex-basis: 9rem; } .app-topbar-logout { padding-left: 0.65rem !important; padding-right: 0.65rem !important; } } /* ------------------------------ Footer brand logo ------------------------------ */ /* Keep the footer logo clean (no border box), but still readable on dark backgrounds. */ .footer-brand { border-radius: 0.75rem; } .footer-brand-img { display: block; } /* The logo includes dark text; add a soft light halo in dark mode so it stays visible. */ .dark .footer-brand-img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.22)); } .dark .footer-brand:hover .footer-brand-img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.28)); } /* Sidebar width fallback (Tailwind's w-64) */ #sidebar { width: 16rem; flex: 0 0 16rem; } input, button, select, textarea { font: inherit; } button { cursor: pointer; } /* Helpful fallback classes. If the Tailwind CDN is blocked/unavailable, these rules keep key UI elements readable. */ .nav-link { display: flex; font-size: 13px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; color: #334155; /* slate-700 */ } .nav-link:hover { background: #f1f5f9; /* slate-100 */ } .nav-icon { width: 32px; height: 32px; border-radius: 14px; display: grid; place-items: center; border: 1px solid #e2e8f0; /* slate-200 */ background: #f1f5f9; /* slate-100 */ } .nav-active { background: color-mix(in srgb, var(--accent) 12%, white); border: 1px solid color-mix(in srgb, var(--accent) 22%, white); color: #0f172a; /* slate-900 */ } .nav-active .nav-icon { background: color-mix(in srgb, var(--accent) 14%, white); border-color: color-mix(in srgb, var(--accent) 22%, white); } .form-field { border: 1px solid #cbd5e1; /* slate-300 */ border-radius: 14px; background: #fff; color: #0f172a; /* slate-900 */ } .form-field::placeholder { color: #94a3b8; /* slate-400 */ } .form-field:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 80%, #000); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .btn-primary { background: var(--accent-solid); color: var(--accent-on-solid); border: 1px solid color-mix(in srgb, var(--accent-solid) 82%, #000); } .btn-primary:hover { background: var(--accent-solid-hover); filter: none; } .btn-primary:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* Toast fallback (Tailwind handles this normally) */ .toast { background: #fff; border: 1px solid rgba(203, 213, 225, 0.9); /* slate-300 */ border-radius: 16px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); /* makes checks clearly visible on light theme */ } /* Keyboard visibility: consistent focus ring even when Tailwind utilities hide outlines */ :where(a, button, input, select, textarea, summary, [role="button"], [role="menuitem"], [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent) !important; outline-offset: 3px; } .dark :where(a, button, input, select, textarea, summary, [role="button"], [role="menuitem"], [tabindex]):focus-visible { outline-color: color-mix(in srgb, var(--accent) 70%, white) !important; } /* Skip link (appears only when focused) */ .skip-link { position: absolute; left: 12px; top: 12px; transform: translateY(-200%); transition: transform 160ms ease; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(226, 232, 240, 1); color: rgba(15, 23, 42, 1); font-weight: 600; z-index: 90; box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12); } .skip-link:focus { transform: translateY(0); } .dark .skip-link { background: rgba(15, 23, 42, 0.95); border-color: rgba(51, 65, 85, 0.85); color: rgba(241, 245, 249, 1); } /* Small, readable keyboard key styling (used in shortcuts modal) */ .ui-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 10px; border: 1px solid rgba(226, 232, 240, 1); background: rgba(248, 250, 252, 1); color: rgba(71, 85, 105, 1); font-size: 11px; font-weight: 700; line-height: 1; } .dark .ui-kbd { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.8); color: rgba(203, 213, 225, 1); } /* Slightly nicer scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.22); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.32); } ::-webkit-scrollbar-track { background: rgba(226,232,240,0.8); } .dark ::-webkit-scrollbar-track { background: rgba(15,23,42,0.8); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------ Print styles ------------------------------ */ @media print { /* Remove decorative backgrounds */ body::before, body::after { display: none !important; } body { background: #fff !important; } /* Utility helpers */ .no-print { display: none !important; } .print-break-avoid { break-inside: avoid; page-break-inside: avoid; } /* Make bordered tables read well on paper */ table { border-collapse: collapse !important; } th, td { border-color: #cbd5e1 !important; } /* Avoid printing links as underlined blue by default */ a { color: inherit !important; text-decoration: none !important; } } /* ------------------------------ Better Forms (inline validation, searchable selects, input helpers) ------------------------------ */ .ui-field-error { margin-top: 4px; font-size: 11px; line-height: 1.2; color: #e11d48; /* rose-600 */ } .dark .ui-field-error { color: #fb7185; /* rose-400 */ } .ui-invalid, .ui-invalid.form-field { border-color: rgba(225, 29, 72, 0.6) !important; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12) !important; } .dark .ui-invalid, .dark .ui-invalid.form-field { border-color: rgba(251, 113, 133, 0.55) !important; box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.12) !important; } /* ------------------------------ Guided Forms (subtle guidance, less "data entry" feel) ------------------------------ */ /* Form-level helper bar injected by JS for eligible forms */ /* Safety rule for JS-injected guide bars inside grid/flex forms. Several compact admin forms use Tailwind grids like `grid md:grid-cols-5`. The guide bar is injected as the first direct child; without a full-row rule it becomes a narrow grid cell and wraps words vertically. Keep this generic so future grid forms do not need one-off CSS patches. */ .ui-form.grid > .ui-guidebar { grid-column: 1 / -1; width: 100%; min-width: 0; } .ui-form.flex > .ui-guidebar { flex: 1 0 100%; width: 100%; min-width: 0; } .ui-form > .ui-guidebar { box-sizing: border-box; max-width: 100%; } .ui-guidebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.95); background: rgba(248, 250, 252, 0.92); } .dark .ui-guidebar { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.60); } .ui-guidebar .ui-guide-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ui-guidebar .ui-guide-title { font-size: 11px; font-weight: 700; color: rgba(15, 23, 42, 0.92); } .dark .ui-guidebar .ui-guide-title { color: rgba(241, 245, 249, 0.95); } .ui-guidebar .ui-guide-sub { font-size: 11px; color: rgba(71, 85, 105, 1); } .dark .ui-guidebar .ui-guide-sub { color: rgba(148, 163, 184, 1); } .ui-guidebar .ui-guide-progress { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .ui-guidebar progress { width: 140px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(226, 232, 240, 0.9); } .dark .ui-guidebar progress { background: rgba(51, 65, 85, 0.9); } .ui-guidebar progress::-webkit-progress-bar { background: rgba(226, 232, 240, 0.9); } .ui-guidebar progress::-webkit-progress-value { background: color-mix(in srgb, var(--accent) 92%, #000); } .ui-guidebar progress::-moz-progress-bar { background: color-mix(in srgb, var(--accent) 92%, #000); } .ui-guidebar .ui-guide-count { font-size: 11px; font-weight: 700; color: rgba(15, 23, 42, 0.92); } .dark .ui-guidebar .ui-guide-count { color: rgba(241, 245, 249, 0.95); } /* Required marker appended to labels */ .ui-required { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; line-height: 1; margin-left: 4px; color: rgba(225, 29, 72, 0.9); } .dark .ui-required { color: rgba(251, 113, 133, 0.95); } /* Field wrappers (JS adds .ui-field where safe) */ .ui-field { padding: 10px; border-radius: 16px; border: 1px solid transparent; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .ui-field.is-active { background: rgba(2, 6, 23, 0.02); border-color: rgba(226, 232, 240, 0.95); box-shadow: 0 10px 18px rgba(2, 6, 23, 0.04); } .dark .ui-field.is-active { background: rgba(148, 163, 184, 0.06); border-color: rgba(51, 65, 85, 0.85); box-shadow: 0 10px 18px rgba(2, 6, 23, 0.22); } /* Sticky action rows (JS adds .ui-form-actions on likely button rows) */ .ui-form-actions { position: sticky; bottom: 10px; z-index: 5; padding: 12px; border-radius: 18px; border: 1px solid rgba(226, 232, 240, 0.95); background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); box-shadow: 0 12px 28px rgba(2, 6, 23, 0.10); } .dark .ui-form-actions { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.72); box-shadow: 0 12px 28px rgba(2, 6, 23, 0.28); } /* Searchable select modal (lightweight, dependency-free) */ .ui-select-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.35); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 60; } .ui-select-overlay[data-open="1"] { display: flex; } .ui-select-modal { width: min(680px, 96vw); max-height: min(76vh, 720px); overflow: hidden; border-radius: 18px; background: rgba(255,255,255,0.95); border: 1px solid rgba(226,232,240,0.95); box-shadow: 0 12px 35px rgba(2,6,23,0.18); } .dark .ui-select-modal { background: rgba(15,23,42,0.95); border-color: rgba(51,65,85,0.8); } .ui-select-list { overflow: auto; max-height: 52vh; } .ui-select-item { display: flex; gap: 10px; padding: 10px 12px; font-size: 13px; cursor: pointer; border-top: 1px solid rgba(226,232,240,0.75); } .dark .ui-select-item { border-top-color: rgba(51,65,85,0.65); } .ui-select-item:hover { background: rgba(148,163,184,0.12); } .ui-select-item[aria-selected="true"] { background: rgba(14,165,233,0.14); } .ui-select-item.is-active { background: rgba(14,165,233,0.10); } .dark .ui-select-item.is-active { background: rgba(14,165,233,0.16); } .ui-select-kbd { margin-left: auto; font-size: 11px; color: #64748b; /* slate-500 */ } .dark .ui-select-kbd { color: rgba(148,163,184,0.85); } /* Most "button-looking" links are inline-flex; keep them consistent too */ main a.inline-flex { font-size: 13px; padding: 6px 10px; } /* Slightly tighter tables */ .table-compact th, .table-compact td { padding-top: 6px; padding-bottom: 6px; } /* --- Data table UX --- */ .ui-table { width: 100%; border-collapse: separate; border-spacing: 0; /* Create a stacking context so sticky header z-index behaves consistently */ position: relative; isolation: isolate; } /* Keeps the toolbar and the table together inside any layout (grid/flex/etc). */ .ui-dt-block { max-width: 100%; min-width: 0; } /* Header: consistent (non-sticky by default to avoid overlap in scroll containers) */ .ui-table thead th { background: #f8fafc; /* slate-50 */ color: #475569; /* slate-600 */ font-weight: 700; border-bottom: 1px solid #e2e8f0; /* slate-200 */ position: static; background-clip: padding-box; } /* Sticky header (opt-in with .table-sticky on the table) Keeps headers readable while scrolling long admin lists. */ .ui-table.table-sticky thead th { position: sticky; top: 0; z-index: 25; /* A tiny shadow helps the header stay distinct over zebra/hover rows */ box-shadow: 0 1px 0 rgba(226, 232, 240, 0.95); } .dark .ui-table.table-sticky thead th { box-shadow: 0 1px 0 rgba(51, 65, 85, 0.85); } /* Selection column helpers */ .ui-table .dt-select-col { width: 38px; white-space: nowrap; } .ui-table .dt-select-col input[type="checkbox"] { transform: translateY(1px); } /* --- Data table toolbar (search / pager) --- */ .ui-dt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 0.95); /* slate-200 */ background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); /* Keep toolbars in normal flow to avoid covering table headers/rows */ position: relative; z-index: 5; } .dark .ui-dt-toolbar { border-color: rgba(51, 65, 85, 0.85); /* slate-700 */ background: rgba(15, 23, 42, 0.72); } .ui-dt-toolbar .ui-dt-left, .ui-dt-toolbar .ui-dt-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ui-dt-count { font-size: 12px; color: rgba(100, 116, 139, 0.95); /* slate-500 */ } .dark .ui-dt-count { color: rgba(148, 163, 184, 0.95); } .ui-dt-search { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; min-width: 180px; } .ui-dt-search input[type="search"], .ui-dt-search .ui-dt-search-input { width: min(420px, 100%); max-width: 100%; } .ui-dt-btn { border: 1px solid rgba(203, 213, 225, 0.95); background: rgba(255, 255, 255, 0.85); border-radius: 14px; padding: 6px 10px; font-size: 12px; color: rgba(51, 65, 85, 0.95); } .ui-dt-btn:hover { filter: brightness(0.98); } .ui-dt-btn:disabled { opacity: 0.5; cursor: not-allowed; } .dark .ui-dt-btn { border-color: rgba(51, 65, 85, 0.9); background: rgba(15, 23, 42, 0.8); color: rgba(226, 232, 240, 0.95); } .ui-dt-select { border: 1px solid rgba(203, 213, 225, 0.95); background: rgba(255, 255, 255, 0.85); border-radius: 14px; padding: 6px 10px; font-size: 12px; } .dark .ui-dt-select { border-color: rgba(51, 65, 85, 0.9); background: rgba(15, 23, 42, 0.8); color: rgba(226, 232, 240, 0.95); } .ui-dt-pager { display: flex; align-items: center; gap: 6px; } .ui-dt-page { font-size: 12px; color: rgba(71, 85, 105, 0.95); } .dark .ui-dt-page { color: rgba(203, 213, 225, 0.95); } /* Density (optional) */ body.density-compact .ui-dt-toolbar { padding: 6px 8px; margin-bottom: 6px; border-radius: 14px; } body.density-compact .ui-dt-count { font-size: 11px; } body.density-compact .ui-dt-btn, body.density-compact .ui-dt-select { padding: 5px 8px; font-size: 11px; border-radius: 12px; } body.density-compact .ui-dt-search { gap: 5px; } /* Sort indicators */ .ui-table thead th.dt-sortable { cursor: pointer; user-select: none; } .ui-table thead th.dt-sortable:hover { filter: brightness(0.98); } .dt-sort-ind { display: inline-block; margin-left: 6px; font-size: 10px; opacity: 0.45; transform: translateY(-1px); } .ui-table thead th.dt-sorted-asc .dt-sort-ind, .ui-table thead th.dt-sorted-desc .dt-sort-ind { opacity: 0.9; } /* Zebra rows + hover */ .ui-table tbody tr:nth-child(even):not([class*="bg-"]) { background: rgba(15, 23, 42, 0.02); } .ui-table tbody tr:hover:not([class*="bg-"]) { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* Clickable rows */ .ui-table tbody tr[data-row-href] { cursor: pointer; } /* Make horizontal-scroll wrappers look intentional */ .ui-table-wrap { -webkit-overflow-scrolling: touch; } /* Don't try to stick headers on printouts */ @media print { .ui-table thead th { position: static !important; } } /* --- Collapsible nav section headers --- */ .nav-section-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 4px; border-radius: 12px; color: #64748b; /* slate-500 */ font-size: 11px; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; } .nav-section-btn:hover { background: rgba(148, 163, 184, 0.18); } /* --- Loading state (form submits) --- */ .btn-spinner { display: inline-block; width: 14px; height: 14px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, 0.55); border-top-color: color-mix(in srgb, var(--accent) 85%, transparent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ------------------------------ Command Palette (Ctrl/Cmd+K) ------------------------------ */ .cmdk-modal { position: fixed; inset: 0; z-index: 70; } .cmdk-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.40); backdrop-filter: blur(6px); } .cmdk-wrap { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 16px; } .cmdk-panel { width: 100%; max-width: 42rem; margin-top: 64px; border-radius: 16px; border: 1px solid rgba(226, 232, 240, 1); background: #ffffff; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18); overflow: hidden; } /* ------------------------------ Keyboard Shortcuts modal ------------------------------ */ /* Ensure the shortcuts modal always renders above any sticky headers/toolbars that may exist on the underlying page. */ #shortcutsModal { position: fixed; inset: 0; z-index: 99999; } /* When the shortcuts modal is open, neutralize sticky positioning on the underlying page to avoid browser/stacking-context quirks where sticky elements can paint above fixed overlays. */ body.shortcuts-open .sticky, body.shortcuts-open [class*="sticky"], body.shortcuts-open thead th, body.shortcuts-open .ui-table thead th { position: static !important; top: auto !important; } /* Some pages contain sticky table headers or sticky toolbars. Inside a modal, sticky elements can visually "escape" their container and overlap the dialog chrome. Prevent that within the shortcuts modal. */ #shortcutsModal thead th, #shortcutsModal .ui-table thead th, #shortcutsModal .sticky { position: static !important; top: auto !important; } .dark .cmdk-panel { background: rgba(15, 23, 42, 0.95); border-color: rgba(51, 65, 85, 0.85); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42); } .cmdk-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(226, 232, 240, 1); background: rgba(248, 250, 252, 0.85); } .dark .cmdk-top { border-bottom-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.65); } .cmdk-icon { display: grid; place-items: center; color: rgba(100, 116, 139, 1); } .dark .cmdk-icon { color: rgba(148, 163, 184, 1); } .cmdk-input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13px; color: rgba(15, 23, 42, 1); } .dark .cmdk-input { color: rgba(241, 245, 249, 1); } .cmdk-input::placeholder { color: rgba(100, 116, 139, 0.85); } .dark .cmdk-input::placeholder { color: rgba(148, 163, 184, 0.75); } .cmdk-close { border: 1px solid rgba(226, 232, 240, 1); background: #ffffff; color: rgba(71, 85, 105, 1); border-radius: 12px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; } .cmdk-close:hover { background: rgba(248, 250, 252, 1); } .dark .cmdk-close { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.85); color: rgba(226, 232, 240, 1); } .dark .cmdk-close:hover { background: rgba(30, 41, 59, 0.85); } .cmdk-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 11px; color: rgba(100, 116, 139, 1); border-bottom: 1px solid rgba(226, 232, 240, 1); } .cmdk-meta-left { min-width: 0; } .cmdk-meta-right { display: inline-flex; align-items: center; gap: 8px; } .dark .cmdk-meta { color: rgba(148, 163, 184, 1); border-bottom-color: rgba(51, 65, 85, 0.85); } .cmdk-kbd { border: 1px solid rgba(226, 232, 240, 1); background: rgba(248, 250, 252, 1); border-radius: 10px; padding: 2px 7px; font-size: 11px; color: rgba(71, 85, 105, 1); } .dark .cmdk-kbd { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.8); color: rgba(203, 213, 225, 1); } .cmdk-help { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 12px; border: 1px solid rgba(226, 232, 240, 1); background: rgba(248, 250, 252, 1); color: rgba(71, 85, 105, 1); cursor: pointer; user-select: none; } .cmdk-help:hover { background: rgba(241, 245, 249, 1); } .dark .cmdk-help { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.8); color: rgba(203, 213, 225, 1); } .dark .cmdk-help:hover { background: rgba(30, 41, 59, 0.85); } .cmdk-results { max-height: 60vh; overflow: auto; padding: 6px; } .cmdk-section-title { padding: 8px 10px 6px; font-size: 11px; font-weight: 700; color: rgba(100, 116, 139, 1); letter-spacing: 0.02em; text-transform: uppercase; } .dark .cmdk-section-title { color: rgba(148, 163, 184, 1); } .cmdk-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 14px; cursor: pointer; border: 1px solid transparent; background: transparent; text-align: left; } .cmdk-item:hover { background: rgba(248, 250, 252, 1); } .dark .cmdk-item:hover { background: rgba(148, 163, 184, 0.08); } .cmdk-item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 26%, transparent); } .dark .cmdk-item.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .cmdk-item-icon { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(226, 232, 240, 1); background: rgba(248, 250, 252, 1); color: rgba(51, 65, 85, 1); flex: 0 0 auto; } .dark .cmdk-item-icon { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.75); color: rgba(226, 232, 240, 1); } .cmdk-item-main { min-width: 0; flex: 1; } .cmdk-item-label { font-size: 13px; font-weight: 600; color: rgba(15, 23, 42, 1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .cmdk-item-label { color: rgba(241, 245, 249, 1); } .cmdk-item-sub { margin-top: 2px; font-size: 11px; color: rgba(100, 116, 139, 1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .cmdk-item-sub { color: rgba(148, 163, 184, 1); } .cmdk-item-hint { font-size: 11px; color: rgba(100, 116, 139, 1); border: 1px solid rgba(226, 232, 240, 1); background: rgba(248, 250, 252, 1); border-radius: 10px; padding: 2px 6px; flex: 0 0 auto; } .dark .cmdk-item-hint { color: rgba(203, 213, 225, 1); border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.8); } .cmdk-loading, .cmdk-empty { padding: 14px 10px; font-size: 12px; color: rgba(100, 116, 139, 1); } .dark .cmdk-loading, .dark .cmdk-empty { color: rgba(148, 163, 184, 1); } /* Topbar launch button */ .cmdk-launch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; min-width: 280px; border-radius: 14px; border: 1px solid rgba(226, 232, 240, 1); background: rgba(255, 255, 255, 0.85); color: rgba(15, 23, 42, 1); } .cmdk-launch:hover { background: rgba(248, 250, 252, 1); } .dark .cmdk-launch { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.65); color: rgba(241, 245, 249, 1); } .dark .cmdk-launch:hover { background: rgba(15, 23, 42, 0.85); } .cmdk-launch-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .cmdk-launch-left svg { color: rgba(100, 116, 139, 1); } .dark .cmdk-launch-left svg { color: rgba(148, 163, 184, 1); } .cmdk-launch-text { font-size: 12px; color: rgba(100, 116, 139, 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .cmdk-launch-text { color: rgba(148, 163, 184, 1); } .cmdk-launch-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .cmdk-launch-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(226, 232, 240, 1); background: #fff; color: rgba(51, 65, 85, 1); } .cmdk-launch-icon:hover { background: rgba(248, 250, 252, 1); } .dark .cmdk-launch-icon { border-color: rgba(51, 65, 85, 0.85); background: rgba(15, 23, 42, 0.85); color: rgba(203, 213, 225, 1); } .dark .cmdk-launch-icon:hover { background: rgba(15, 23, 42, 0.95); } /* Dashboard range select: remove native arrows (keeps our custom chevron) */ select.ui-range-select{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; background-color: transparent !important; } select.ui-range-select::-ms-expand{ display:none; } /* Inline SVG icon alignment (replaces emojis in buttons/labels) */ .ui-icon{ display:inline-block; vertical-align:middle; } .action-icon{ display:inline-block; vertical-align:-0.125em; } /* Filter bars (GET list filters): presets + quick ranges + active count */ .ui-filterbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid rgba(226,232,240,1); background: rgba(248,250,252,1); border-radius:16px; margin-bottom:10px; } .dark .ui-filterbar{ border-color: rgba(51,65,85,0.85); background: rgba(15,23,42,0.55); } .ui-filterbar-left{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; } .ui-filterbar-right{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .ui-filterbar-title{ font-weight:700; color: rgba(51,65,85,1); font-size:12px; letter-spacing:0.01em; display:flex; align-items:center; gap:8px; } .dark .ui-filterbar-title{ color: rgba(226,232,240,0.95); } .ui-filterbar-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 8px; border-radius:999px; border:1px solid rgba(203,213,225,1); background:#fff; color: rgba(51,65,85,1); font-size:11px; font-weight:600; } .dark .ui-filterbar-badge{ border-color: rgba(71,85,105,0.9); background: rgba(2,6,23,0.35); color: rgba(226,232,240,0.95); } .ui-filterbar-btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:14px; border:1px solid rgba(226,232,240,1); background:#fff; color: rgba(51,65,85,1); font-size:12px; font-weight:500; cursor:pointer; user-select:none; } .ui-filterbar-btn:hover{ filter: brightness(0.98); } .ui-filterbar-btn:disabled{ opacity:0.55; cursor:not-allowed; } .dark .ui-filterbar-btn{ border-color: rgba(51,65,85,0.9); background: rgba(2,6,23,0.35); color: rgba(226,232,240,0.95); } /* Mobile-only: collapse/expand toggle (shown when a form opts into collapsible filters). */ .ui-filterbar-toggle{ display:none; } @media (max-width: 640px){ .ui-filterbar-toggle{ display:inline-flex; } } .ui-filterbar-select{ padding:7px 10px; border-radius:14px; border:1px solid rgba(226,232,240,1); background:#fff; color: rgba(51,65,85,1); font-size:12px; font-weight:500; min-width: 180px; } .dark .ui-filterbar-select{ border-color: rgba(51,65,85,0.9); background: rgba(2,6,23,0.35); color: rgba(226,232,240,0.95); } .ui-filterbar-chips{ display:flex; flex-wrap:wrap; gap:6px; } .ui-filterbar-chip{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(226,232,240,1); background:#fff; color: rgba(51,65,85,1); font-size:11px; font-weight:600; cursor:pointer; } .ui-filterbar-chip:hover{ filter: brightness(0.98); } .dark .ui-filterbar-chip{ border-color: rgba(51,65,85,0.9); background: rgba(2,6,23,0.35); color: rgba(226,232,240,0.95); } body.density-compact .ui-filterbar{ padding:8px 10px; border-radius:14px; margin-bottom:8px; } body.density-compact .ui-filterbar-btn, body.density-compact .ui-filterbar-select{ padding:6px 9px; border-radius:12px; font-size:11px; } body.density-compact .ui-filterbar-chip{ padding:5px 9px; font-size:10px; } /* ========================================================= Dashboard: control-room upgrades ========================================================= */ /* KPI customization panel (small popover). */ .ui-dash-kpi-panel{ position:absolute; right:0; top:100%; margin-top:8px; width: 320px; max-width: calc(100vw - 24px); border:1px solid rgba(226,232,240,1); background: rgba(255,255,255,0.98); border-radius: 18px; box-shadow: 0 18px 38px rgba(2,6,23,0.14); padding: 12px; z-index: 60; } .dark .ui-dash-kpi-panel{ border-color: rgba(51,65,85,0.9); background: rgba(2,6,23,0.92); } .ui-dash-kpi-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 8px; border-radius:14px; } .ui-dash-kpi-row:hover{ background: rgba(15,23,42,0.04); } .dark .ui-dash-kpi-row:hover{ background: rgba(148,163,184,0.08); } .ui-dash-kpi-row input{ width:16px; height:16px; } .ui-dash-drag-handle{ cursor: grab; user-select: none; padding: 6px 9px; line-height: 1; } .ui-dash-row-drop{ background: rgba(14,165,233,0.08); } .dark .ui-dash-row-drop{ background: rgba(14,165,233,0.14); } .ui-dash-row-dragging{ opacity: 0.65; } /* Front desk focus mode: hide deep analytics, keep actions + KPIs. */ body.dash-focus [data-dash-focus-hide="1"]{ display:none !important; } /* ========================================================= Member portal: mobile-first "app-like" shell ========================================================= */ .portal-shell{ -webkit-tap-highlight-color: transparent; } /* PWA install prompt button (best-effort; shown only when supported). It is intentionally mobile-only so desktop staff/member screens stay clean. */ .pwa-install-btn{ position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(226,232,240,1); background: rgba(255,255,255,0.98); box-shadow: 0 16px 38px rgba(2,6,23,0.16); font-size: 12px; font-weight: 500; color: rgba(15,23,42,0.95); } .pwa-install-btn:hover{ filter: brightness(0.99); } .pwa-install-btn:disabled{ opacity: 0.6; cursor: default; } .dark .pwa-install-btn{ border-color: rgba(51,65,85,0.9); background: rgba(2,6,23,0.92); color: rgba(226,232,240,0.95); } /* Portal has a bottom tab bar on phones: lift the button above it. */ .portal-shell .pwa-install-btn{ bottom: calc(96px + env(safe-area-inset-bottom)); } @media (min-width: 641px){ .pwa-install-btn{ display: none !important; } } @media (max-width: 640px){ /* Ensure bottom tab bar doesn't cover content */ .portal-content{ padding-bottom: calc(92px + env(safe-area-inset-bottom)); } } .portal-bottom-nav{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(248,250,252,0.78); border-top: 1px solid rgba(226,232,240,0.95); backdrop-filter: blur(14px); } .dark .portal-bottom-nav{ background: rgba(2,6,23,0.72); border-top-color: rgba(51,65,85,0.9); } .portal-bottom-nav{ display:flex; gap:8px; justify-content:space-between; } .portal-nav-item{ flex: 1 1 0; min-width: 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding: 8px 6px; border-radius: 16px; text-decoration:none; color: rgba(71,85,105,1); font-weight: 600; font-size: 10px; } .portal-nav-item .portal-nav-icon{ opacity:0.85; } .dark .portal-nav-item{ color: rgba(148,163,184,0.95); } .dark .portal-nav-item .portal-nav-icon{ opacity:0.75; } .portal-nav-item.is-active{ background: rgba(14,165,233,0.12); color: rgba(2,132,199,1); } .portal-nav-item.is-active .portal-nav-icon{ opacity:1; } .dark .portal-nav-item.is-active{ background: rgba(14,165,233,0.18); color: rgba(125,211,252,0.98); } .dark .portal-nav-item.is-active .portal-nav-icon{ opacity:1; } .portal-nav-label{ line-height:1; } /* Small "quick action" tiles used on the portal dashboard (mobile). */ .portal-quick-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding: 10px 8px; border-radius: 18px; border: 1px solid rgba(226,232,240,1); background: rgba(255,255,255,0.8); text-decoration:none; } .portal-quick-tile:hover{ filter: brightness(0.99); } .portal-quick-ico{ opacity:0.88; } .portal-quick-label{ font-size:11px; font-weight:600; color: rgba(15,23,42,0.92); line-height:1; } .dark .portal-quick-tile{ border-color: rgba(51,65,85,0.9); background: rgba(2,6,23,0.35); } .dark .portal-quick-label{ color: rgba(226,232,240,0.95); } /* Responsive patterns used in portal lists (cards on mobile, tables on desktop) */ .portal-mobile-cards{ display:none; } @media (max-width: 640px){ .portal-mobile-cards{ display:block; } .portal-desktop-table{ display:none; } } /* QR screen helpers */ .portal-qr-hero{ border:1px solid rgba(226,232,240,1); background:#fff; border-radius: 22px; box-shadow: 0 10px 28px rgba(2,6,23,0.08); padding: 14px; } .dark .portal-qr-hero{ border-color: rgba(51,65,85,0.9); background: rgba(2,6,23,0.35); } .portal-qr-box{ width: min(78vw, 340px); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 18px; overflow:hidden; background: #fff; border:1px solid rgba(226,232,240,1); } .dark .portal-qr-box{ border-color: rgba(51,65,85,0.9); background:#fff; } .portal-qr-overlay{ position: fixed; inset: 0; z-index: 100; background: #fff; display:none; align-items:center; justify-content:center; padding: 24px; } .portal-qr-overlay.is-open{ display:flex; } .portal-qr-overlay .portal-qr-box{ width: min(86vw, 520px); border:none; border-radius: 24px; } .portal-qr-overlay-close{ position: absolute; top: 12px; right: 12px; height: 44px; width: 44px; border-radius: 18px; border:1px solid rgba(226,232,240,1); background: rgba(255,255,255,0.9); display:grid; place-items:center; } .portal-qr-print{ border-top:1px dashed rgba(226,232,240,1); margin-top: 14px; padding-top: 14px; } .dark .portal-qr-print{ border-top-color: rgba(51,65,85,0.9); } /* ------------------------------ Accessibility + premium polish ------------------------------ */ /* Disabled states: clearer affordance without looking "broken" */ :where(button, [role="button"], input, select, textarea)[disabled], :where(button, [role="button"])[aria-disabled="true"] { cursor: not-allowed !important; opacity: 0.65; } :where(a)[aria-disabled="true"] { cursor: not-allowed !important; opacity: 0.65; pointer-events: none; } :where(input, select, textarea)[disabled] { background: rgba(241, 245, 249, 0.85); color: rgba(71, 85, 105, 0.95); } .dark :where(input, select, textarea)[disabled] { background: rgba(2, 6, 23, 0.40); color: rgba(148, 163, 184, 0.95); } /* Skeleton loaders (used for notifications + command palette search) */ .ui-skeleton { position: relative; overflow: hidden; background: rgba(148, 163, 184, 0.20); } .dark .ui-skeleton { background: rgba(148, 163, 184, 0.12); } .ui-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: ui-shimmer 1.15s ease-in-out infinite; } .dark .ui-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent); } @keyframes ui-shimmer { 100% { transform: translateX(100%); } } /* High-contrast preference: slightly stronger outlines/borders */ @media (prefers-contrast: more) { :where(a, button, input, select, textarea, summary, [role="button"], [role="menuitem"], [tabindex]):focus-visible { outline-width: 4px !important; outline-offset: 4px; } .form-field { border-color: rgba(71, 85, 105, 0.85) !important; } .dark .form-field { border-color: rgba(148, 163, 184, 0.55) !important; } .toast { border-width: 2px; } } /* Ensure icon baselines look crisp when used inline with text (especially in badges) */ .ui-icon { vertical-align: middle; } /* ------------------------------ Unified controls, labels, buttons and badges ------------------------------ The app has many modules and older views with hand-written Tailwind class strings. These rules provide one consistent design-system layer for native inputs, labels, action buttons and colored status labels without requiring every view to be rewritten at once. */ :root { --ui-control-bg: rgba(255, 255, 255, 0.96); --ui-control-border: rgba(203, 213, 225, 0.95); --ui-control-text: rgba(15, 23, 42, 0.96); --ui-control-muted: rgba(100, 116, 139, 0.86); --ui-control-hover: rgba(248, 250, 252, 0.98); --ui-action-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .dark { --ui-control-bg: rgba(15, 23, 42, 0.78); --ui-control-border: rgba(51, 65, 85, 0.92); --ui-control-text: rgba(241, 245, 249, 0.96); --ui-control-muted: rgba(148, 163, 184, 0.86); --ui-control-hover: rgba(30, 41, 59, 0.82); --ui-action-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } .ui-control, #appContent input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.cmdk-input):not(.flatpickr-input), #appContent select, #appContent textarea, .portal-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.cmdk-input):not(.flatpickr-input), .portal-shell select, .portal-shell textarea { border: 1px solid var(--ui-control-border); border-radius: 0.75rem; background-color: var(--ui-control-bg); color: var(--ui-control-text); min-height: 2.35rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34); transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease; } .ui-control:not([type="file"]), #appContent input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not(.cmdk-input):not(.flatpickr-input), #appContent select, #appContent textarea, .portal-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]):not(.cmdk-input):not(.flatpickr-input), .portal-shell select, .portal-shell textarea { padding: 0.5rem 0.75rem; } .ui-control::placeholder, #appContent input::placeholder, #appContent textarea::placeholder, .portal-shell input::placeholder, .portal-shell textarea::placeholder { color: var(--ui-control-muted); } .ui-control:disabled, #appContent input:disabled, #appContent select:disabled, #appContent textarea:disabled, .portal-shell input:disabled, .portal-shell select:disabled, .portal-shell textarea:disabled { opacity: 0.62; cursor: not-allowed; background-color: color-mix(in srgb, var(--ui-control-bg) 82%, #94a3b8); } .ui-control:focus, #appContent input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.cmdk-input):focus, #appContent select:focus, #appContent textarea:focus, .portal-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.cmdk-input):focus, .portal-shell select:focus, .portal-shell textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 78%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); } input[type="file"].ui-control, #appContent input[type="file"], .portal-shell input[type="file"] { padding: 0.35rem; } input[type="file"].ui-control::file-selector-button, #appContent input[type="file"]::file-selector-button, .portal-shell input[type="file"]::file-selector-button { margin-right: 0.7rem; border: 0; border-radius: 0.65rem; background: color-mix(in srgb, var(--accent) 12%, white); color: color-mix(in srgb, var(--accent) 74%, #0f172a); font-weight: 500; padding: 0.38rem 0.7rem; cursor: pointer; } .dark input[type="file"].ui-control::file-selector-button, .dark #appContent input[type="file"]::file-selector-button, .dark .portal-shell input[type="file"]::file-selector-button { background: color-mix(in srgb, var(--accent) 18%, transparent); color: color-mix(in srgb, var(--accent) 62%, white); } .ui-check, #appContent input[type="checkbox"], #appContent input[type="radio"], .portal-shell input[type="checkbox"], .portal-shell input[type="radio"] { width: 1rem; height: 1rem; border-color: var(--ui-control-border); background-color: var(--ui-control-bg); color: var(--accent); accent-color: var(--accent); } .ui-label { display: flex; width: fit-content; align-items: center; gap: 0.35rem; color: rgba(51, 65, 85, 0.98); font-size: 0.76rem; font-weight: 700; line-height: 1.2; } .dark .ui-label { color: rgba(203, 213, 225, 0.96); } .ui-label-muted { color: rgba(100, 116, 139, 0.95); font-size: 0.75rem; } .dark .ui-label-muted { color: rgba(148, 163, 184, 0.95); } .ui-choice-label, #appContent label:has(input[type="checkbox"]), #appContent label:has(input[type="radio"]), .portal-shell label:has(input[type="checkbox"]), .portal-shell label:has(input[type="radio"]) { color: rgba(51, 65, 85, 0.98); } .dark .ui-choice-label, .dark #appContent label:has(input[type="checkbox"]), .dark #appContent label:has(input[type="radio"]), .dark .portal-shell label:has(input[type="checkbox"]), .dark .portal-shell label:has(input[type="radio"]) { color: rgba(226, 232, 240, 0.96); } .ui-action-control { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.15rem; border-radius: 0.75rem; border: 1px solid transparent; font-size: 0.8125rem; font-weight: 500; line-height: 1.15; letter-spacing: 0; box-shadow: var(--ui-action-shadow); transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, filter 140ms ease, box-shadow 140ms ease, transform 80ms ease; } .ui-action-control:not(.ui-icon-button) { padding: 0.48rem 0.78rem; } .ui-action-control:hover { filter: brightness(0.98); } .ui-action-control:active { transform: translateY(1px); } .ui-action-control:disabled, .ui-action-control[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } .ui-action-primary { background: var(--accent-solid); border-color: color-mix(in srgb, var(--accent-solid) 82%, #000); color: var(--accent-on-solid); } .ui-action-primary:hover { background: var(--accent-solid-hover); filter: none; } .ui-action-secondary { background: var(--ui-control-bg); border-color: var(--ui-control-border); color: rgba(51, 65, 85, 0.98); } .ui-action-secondary:hover { background: var(--ui-control-hover); } .dark .ui-action-secondary { color: rgba(226, 232, 240, 0.98); } .ui-action-danger { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.28); color: rgb(190, 18, 60); } .ui-action-danger:hover { background: rgba(244, 63, 94, 0.15); } .dark .ui-action-danger { background: rgba(127, 29, 29, 0.34); border-color: rgba(244, 63, 94, 0.34); color: rgb(254, 205, 211); } .ui-action-success { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.28); color: rgb(4, 120, 87); } .dark .ui-action-success { background: rgba(6, 78, 59, 0.34); border-color: rgba(16, 185, 129, 0.34); color: rgb(167, 243, 208); } .ui-icon-button { aspect-ratio: 1 / 1; padding: 0 !important; } .ui-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 1.35rem; border-radius: 999px; border: 1px solid transparent; padding: 0.16rem 0.56rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.12; letter-spacing: 0; white-space: nowrap; vertical-align: middle; } .ui-badge-soft { background: rgba(100, 116, 139, 0.10); border-color: rgba(100, 116, 139, 0.22); color: rgb(51, 65, 85); } .dark .ui-badge-soft { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.22); color: rgb(203, 213, 225); } .ui-badge-primary { background: color-mix(in srgb, var(--accent) 12%, white); border-color: color-mix(in srgb, var(--accent) 26%, white); color: var(--accent-text); } .dark .ui-badge-primary { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--accent-text-dark); } .ui-badge-success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.28); color: rgb(4, 120, 87); } .dark .ui-badge-success { background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.34); color: rgb(167, 243, 208); } .ui-badge-warning { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.30); color: rgb(146, 64, 14); } .dark .ui-badge-warning { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.36); color: rgb(253, 230, 138); } .ui-badge-danger { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.30); color: rgb(190, 18, 60); } .dark .ui-badge-danger { background: rgba(244, 63, 94, 0.16); border-color: rgba(244, 63, 94, 0.36); color: rgb(254, 205, 211); } .ui-badge-info { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.28); color: rgb(67, 56, 202); } .dark .ui-badge-info { background: rgba(99, 102, 241, 0.16); border-color: rgba(99, 102, 241, 0.34); color: rgb(199, 210, 254); } /* Common hand-written badge color utilities get normalized even before JS runs. */ :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-slate-"], :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-xl[class*="bg-slate-"] { background: rgba(100, 116, 139, 0.10); border-color: rgba(100, 116, 139, 0.22); color: rgb(51, 65, 85); } .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-slate-"], .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-xl[class*="bg-slate-"] { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.22); color: rgb(203, 213, 225); } :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-emerald-"], :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-green-"] { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.28); color: rgb(4, 120, 87); } .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-emerald-"], .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-green-"] { background: rgba(16, 185, 129, 0.16); border-color: rgba(16, 185, 129, 0.34); color: rgb(167, 243, 208); } :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-amber-"], :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-yellow-"] { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.30); color: rgb(146, 64, 14); } .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-amber-"], .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-yellow-"] { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.36); color: rgb(253, 230, 138); } :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-rose-"], :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-red-"] { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.30); color: rgb(190, 18, 60); } .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-rose-"], .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-red-"] { background: rgba(244, 63, 94, 0.16); border-color: rgba(244, 63, 94, 0.36); color: rgb(254, 205, 211); } :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-sky-"], :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-blue-"] { background: color-mix(in srgb, var(--accent) 12%, white); border-color: color-mix(in srgb, var(--accent) 26%, white); color: var(--accent-text); } .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-sky-"], .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-blue-"] { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--accent-text-dark); } :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-indigo-"], :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-violet-"], :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-purple-"], :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-fuchsia-"] { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.28); color: rgb(67, 56, 202); } .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-indigo-"], .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-violet-"], .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-purple-"], .dark :where(#appContent, .portal-shell) :where(span, a, button, div).inline-flex.rounded-full[class*="bg-fuchsia-"] { background: rgba(99, 102, 241, 0.16); border-color: rgba(99, 102, 241, 0.34); color: rgb(199, 210, 254); } /* Preserve intentionally solid semantic action buttons while keeping text/link dangers soft. */ .ui-action-danger[class~="bg-rose-600"], .ui-action-danger[class~="bg-rose-700"], .ui-action-danger[class~="bg-red-600"], .ui-action-danger[class~="bg-red-700"] { background: rgb(225, 29, 72); border-color: rgb(190, 18, 60); color: #fff; } .ui-action-success[class~="bg-emerald-600"], .ui-action-success[class~="bg-emerald-700"], .ui-action-success[class~="bg-green-600"], .ui-action-success[class~="bg-green-700"] { background: rgb(5, 150, 105); border-color: rgb(4, 120, 87); color: #fff; } /* ------------------------------ Consistent, lighter button and badge typography ------------------------------ Keep controls readable without the overly-heavy 700/800 weights that can make small button and badge labels feel dense across modules. */ .ui-action-control, .btn-primary, .ui-filterbar-btn, .pwa-install-btn, .ui-dt-btn, .cb2-att-btn, .cb2-att-btn-danger { font-weight: 500 !important; letter-spacing: 0 !important; } :where(#appContent, .portal-shell, .invoice-print, .topbar, header, nav) :where(a, button, input[type="button"], input[type="submit"]).inline-flex:not(.ui-badge):not(.rounded-full) { font-weight: 500 !important; letter-spacing: 0 !important; } .ui-badge, .ui-filterbar-badge, .ui-filterbar-chip, :where(#appContent, .portal-shell, .invoice-print, .topbar, header, nav) :where(span, a, button, div).inline-flex.rounded-full, :where(#appContent, .portal-shell, .invoice-print, .topbar, header, nav) :where(span, a, button, div).inline-flex.rounded-xl[class*="bg-"] { font-weight: 600 !important; letter-spacing: 0 !important; } /* ========================================================= Project-wide responsive safety net ========================================================= Older modules mix custom Tailwind strings, wide reports, action rows and data tables. These guardrails keep content inside the app shell on phones and tablets while preserving horizontal scroll where tables genuinely need it. */ html, body { max-width: 100%; overflow-x: hidden; } #appShell, #appMain, #appContent, .portal-shell, .portal-content { width: 100%; max-width: 100%; min-width: 0; } :where(#appContent, .portal-content) > *, :where(#appContent, .portal-content) :where(.grid, .flex, form, fieldset, section, article, aside, header, footer) { min-width: 0; max-width: 100%; } :where(#appContent, .portal-content) :where(.grid, .flex) > * { min-width: 0; } :where(#appContent, .portal-content) :where(img, video, canvas, iframe, object, embed) { max-width: 100%; height: auto; } :where(#appContent, .portal-content) :where(pre, code) { max-width: 100%; } :where(#appContent, .portal-content) pre { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre; } /* Long IDs, invoice numbers, email addresses and file names should not push cards wider than the viewport. */ :where(#appContent, .portal-content) :where(.ui-card, .rounded-2xl, .rounded-xl, td, th, p, li, dd, .ui-action-tile-desc, .cmdk-item-sub) { overflow-wrap: anywhere; } /* Keep arbitrary/fixed widths from overflowing phones. */ :where(#appContent, .portal-content, .app-topbar, .portal-shell) [class*="w-["], :where(#appContent, .portal-content, .app-topbar, .portal-shell) [class*="max-w-["] { max-width: 100% !important; } :where(#appContent, .portal-content, .app-topbar, .portal-shell) :where(form, .ui-filterbar, .ui-dt-toolbar, .ui-form-actions, .app-topbar-actions, .portal-bottom-nav) [class*="min-w-["] { min-width: 0 !important; } /* Tables: every unwrapped legacy table is wrapped by JS. CSS is also safe if JS is unavailable. */ .ui-table-wrap, .ui-responsive-table-wrap, :where(#appContent, .portal-content) .overflow-x-auto, :where(#appContent, .portal-content) .overflow-auto { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ui-responsive-table-wrap { width: 100%; border-radius: 1rem; } :where(#appContent, .portal-content) table { max-width: 100%; } @media (max-width: 640px) { :where(#appContent, .portal-content) table:not([data-responsive-off]) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(#appContent, .portal-content) :where(th, td) { white-space: normal; } /* Numeric/action columns may keep nowrap, but they must not force the page itself wider. */ :where(#appContent, .portal-content) :where(td, th).whitespace-nowrap, :where(#appContent, .portal-content) :where(.whitespace-nowrap):not(.ui-action-control):not(.ui-badge):not(.portal-nav-label) { white-space: normal !important; } :where(#appContent, .portal-content) :where(.ui-action-control, .ui-filterbar-btn, .ui-dt-btn, .ui-filterbar-chip, .ui-badge) { white-space: normal; text-align: center; } } /* Forms, filter bars and action rows should wrap instead of overflowing. */ :where(#appContent, .portal-content) :where(.ui-filterbar, .ui-filterbar-left, .ui-filterbar-right, .ui-form-actions, .ui-dt-toolbar, .ui-dt-left, .ui-dt-right, .ui-dt-pager) { flex-wrap: wrap; min-width: 0; } :where(#appContent, .portal-content) :where(form .inline-flex, form .flex, .ui-form-actions .inline-flex, .ui-form-actions .flex) { min-width: 0; max-width: 100%; } @media (max-width: 640px) { :where(#appContent, .portal-content) :where(form .inline-flex, form .flex, .ui-form-actions .inline-flex, .ui-form-actions .flex) { flex-wrap: wrap; } :where(#appContent, .portal-content) :where(.ui-control, .form-field, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { width: 100%; max-width: 100%; } :where(#appContent, .portal-content) :where(.ui-filterbar-select, .ui-dt-search, .ui-dt-search input[type="search"], .ui-dt-search-input) { width: 100%; min-width: 0; } :where(#appContent, .portal-content) :where(.ui-dt-toolbar, .ui-dt-left, .ui-dt-right) { align-items: stretch; } :where(#appContent, .portal-content) :where(.ui-dt-left, .ui-dt-right, .ui-dt-search) { width: 100%; } :where(#appContent, .portal-content) :where(.ui-dt-pager) { width: 100%; justify-content: space-between; } } /* Mobile cards and panels: never let absolute panels spill past the viewport. */ :where(#appContent, .portal-content) :where([role="dialog"], .ui-dash-kpi-panel, [data-notify-panel], .cmdk-panel, .ui-select-modal) { max-width: calc(100vw - 1.5rem); } /* Topbar notification center width fix. The global topbar overflow guard clamps arbitrary max-width utilities to 100% so absolute panels inside a 40px icon container can become unreadably narrow. Keep the bell dropdown sized against the viewport instead of the icon button. */ .app-topbar [data-notify-panel] { width: min(360px, calc(100vw - 1.5rem)) !important; max-width: calc(100vw - 1.5rem) !important; } @media (max-width: 640px) { .app-topbar [data-notify-panel] { position: fixed !important; left: 0.75rem !important; right: 0.75rem !important; top: 3.75rem !important; width: auto !important; max-width: calc(100vw - 1.5rem) !important; margin-top: 0 !important; } .app-topbar [data-notify-list] { max-height: min(360px, calc(100vh - 9.5rem)); } } @media (max-width: 640px) { .cmdk-wrap { padding: 10px; } .cmdk-panel { margin-top: 18px; max-height: calc(100vh - 36px); } .cmdk-results { max-height: calc(100vh - 180px); } .ui-dash-kpi-panel { left: 0; right: auto; width: min(320px, calc(100vw - 24px)); } } /* Portal topbar and bottom nav: keep labels from causing horizontal scroll. */ .portal-shell header, .portal-bottom-nav { max-width: 100%; overflow-x: clip; } .portal-nav-label, .portal-quick-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* App sidebar should never contribute to horizontal page overflow while off-canvas. */ @media (max-width: 1024px) { #sidebar { max-width: min(16rem, 88vw); } } .ui-responsive-action-row { min-width: 0; max-width: 100%; } @media (max-width: 640px) { .ui-responsive-action-row { flex-wrap: wrap !important; } .ui-responsive-action-row > * { min-width: 0; } } /* ========================================================= Production auth shell and staff login polish ========================================================= */ .auth-public-shell { background: radial-gradient(900px circle at 12% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 44%), radial-gradient(700px circle at 90% 80%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%), linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%); } .dark .auth-public-shell { background: radial-gradient(900px circle at 12% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 44%), radial-gradient(700px circle at 90% 80%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%), linear-gradient(135deg, #020617 0%, #0f172a 100%); } .auth-hero-card, .auth-login-card { box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12); } .dark .auth-hero-card, .dark .auth-login-card { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); } .auth-card-header { background: radial-gradient(620px circle at 0% 0%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 48%), linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 82%, #020617), #0f172a 72%); } /* Generic auth logo sizing: supports square, portrait, and wide logos without cropping. */ .auth-brand-row { display: flex; align-items: center; gap: 0.85rem; min-width: 0; } .auth-brand-copy { min-width: 0; flex: 1 1 auto; } .auth-login-title { line-height: 1.18; overflow-wrap: anywhere; word-break: normal; hyphens: auto; } .auth-logo-frame { flex: 0 0 auto; width: clamp(6.25rem, 24vw, 9rem); height: clamp(3.75rem, 12vw, 5.25rem); max-width: 42%; display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 0.75rem; border-radius: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.18); background: #ffffff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16); } .auth-logo-frame--login { width: clamp(7rem, 30vw, 12rem); height: clamp(4rem, 12vw, 5.5rem); max-width: 52%; } .auth-logo-frame--compact { width: clamp(5.75rem, 22vw, 8rem); height: clamp(3.4rem, 10vw, 4.75rem); } .auth-logo-frame--pill { width: auto; min-width: 2.25rem; max-width: 11.5rem; height: 2.35rem; padding: 0.25rem 0.55rem; border-radius: 0.9rem; border-color: #e2e8f0; box-shadow: none; } .auth-logo-img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .auth-logo-frame--pill .auth-logo-img { width: auto; max-width: 10.25rem; } .dark .auth-logo-frame--pill { border-color: #334155; } @media (max-width: 420px) { .auth-brand-row { align-items: flex-start; gap: 0.7rem; } .auth-logo-frame--login { width: clamp(5.75rem, 36vw, 7.5rem); height: 4rem; max-width: 42%; padding: 0.45rem 0.55rem; } .auth-login-title { font-size: 1.05rem; } } .auth-password-field { position: relative; display: block; } .auth-password-field .auth-password-input { padding-right: 5.75rem !important; } .auth-password-toggle { position: absolute; top: 50%; right: 0.5rem; z-index: 2; transform: translateY(-50%); min-width: 4.25rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 0.75rem; padding: 0 0.75rem; font-size: 0.75rem; line-height: 1; font-weight: 600; color: #475569; background: transparent; border: 1px solid transparent; } .auth-password-toggle:hover, .auth-password-toggle:focus-visible { color: #0f172a; background: #f1f5f9; border-color: #e2e8f0; outline: none; } .dark .auth-password-toggle { color: #cbd5e1; } .dark .auth-password-toggle:hover, .dark .auth-password-toggle:focus-visible { color: #ffffff; background: #1e293b; border-color: #334155; } .auth-input:focus { border-color: var(--accent-solid) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) !important; } .auth-submit-btn[disabled] { cursor: wait; opacity: 0.82; } .auth-login-form a { color: var(--accent-text); } .dark .auth-login-form a { color: var(--accent-text-dark); } /* Login pages: let transparent brand logos sit directly on the dark header. */ .auth-card-header .auth-logo-frame--login { background: transparent; border-color: transparent; box-shadow: none; padding: 0; } .auth-card-header .auth-logo-frame--login .auth-logo-img { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28)); } /* Staff auth hero panel: match the transparent logo treatment used on login cards. */ .auth-public-shell .auth-hero-card { color: #ffffff; border-color: rgba(255, 255, 255, 0.18) !important; background: radial-gradient(620px circle at 0% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 48%), linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 76%, #020617), #0f172a 72%) !important; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18); } .auth-public-shell .auth-hero-brand-pill, .auth-public-shell .auth-hero-mini-card, .auth-public-shell .auth-hero-notice { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: rgba(255, 255, 255, 0.78) !important; box-shadow: none; backdrop-filter: blur(10px); } .auth-public-shell .auth-hero-brand-pill { color: #ffffff !important; } .auth-public-shell .auth-hero-card .auth-logo-frame--pill { background: transparent; border-color: transparent; box-shadow: none; padding: 0; } .auth-public-shell .auth-hero-card .auth-logo-frame--pill .auth-logo-img { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28)); } .auth-public-shell .auth-hero-card h1, .auth-public-shell .auth-hero-card .font-semibold { color: #ffffff !important; } .auth-public-shell .auth-hero-card h1 .text-sky-700 { color: rgba(186, 230, 253, 0.96) !important; } .auth-public-shell .auth-hero-card p, .auth-public-shell .auth-hero-card .text-slate-600 { color: rgba(255, 255, 255, 0.74) !important; } /* ========================================================= Premium auth experience v2: member + staff login polish ========================================================= */ .auth-public-shell { position: relative; isolation: isolate; overflow: hidden; } .auth-public-shell::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background-image: linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%); } .dark .auth-public-shell::before { background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); } .auth-public-shell::after { content: ""; position: fixed; inset: auto auto -18rem -16rem; width: 44rem; height: 44rem; border-radius: 999px; pointer-events: none; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%); filter: blur(10px); opacity: 0.82; } .auth-public-shell--member { background: radial-gradient(860px circle at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 54%), radial-gradient(680px circle at 88% 82%, rgba(14, 165, 233, 0.10), transparent 48%), linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%); } .dark .auth-public-shell--member { background: radial-gradient(860px circle at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 54%), radial-gradient(680px circle at 88% 82%, rgba(14, 165, 233, 0.13), transparent 48%), linear-gradient(135deg, #020617 0%, #0f172a 100%); } .auth-public-shell--staff { background: radial-gradient(980px circle at 8% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%), radial-gradient(760px circle at 92% 88%, rgba(59, 130, 246, 0.11), transparent 52%), linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%); } .dark .auth-public-shell--staff { background: radial-gradient(980px circle at 8% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 48%), radial-gradient(760px circle at 92% 88%, rgba(59, 130, 246, 0.12), transparent 52%), linear-gradient(135deg, #020617 0%, #0f172a 100%); } .auth-public-main { position: relative; z-index: 1; } .auth-staff-grid { gap: clamp(1.25rem, 3vw, 2.5rem) !important; } .auth-login-wrap { animation: authFadeUp 520ms ease both; } .auth-login-card { position: relative; overflow: hidden; border: 1px solid rgba(148, 163, 184, 0.24) !important; border-radius: 1.6rem !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 28px 90px rgba(15, 23, 42, 0.18) !important; backdrop-filter: blur(18px) saturate(140%); } .dark .auth-login-card { border-color: rgba(148, 163, 184, 0.18) !important; background: rgba(15, 23, 42, 0.78) !important; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42) !important; } .auth-login-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42); } .dark .auth-login-card::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); } .auth-card-header { position: relative; overflow: hidden; min-height: 10.4rem; padding: 1.35rem 1.35rem 1.15rem !important; } .auth-card-header--member { background: radial-gradient(520px circle at 10% 0%, rgba(255, 255, 255, 0.16), transparent 45%), radial-gradient(420px circle at 95% 110%, color-mix(in srgb, var(--accent) 52%, transparent), transparent 56%), linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 70%, #0f172a), #172554 76%) !important; } .auth-card-header--staff { background: radial-gradient(520px circle at 0% 0%, color-mix(in srgb, var(--accent) 54%, transparent), transparent 48%), linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 72%, #020617), #0f172a 76%) !important; } .auth-card-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 34%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px); opacity: 0.95; } .auth-card-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.10); padding: 0.32rem 0.68rem; color: rgba(255, 255, 255, 0.78); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; backdrop-filter: blur(12px); } .auth-status-dot { width: 0.48rem; height: 0.48rem; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16), 0 0 20px rgba(34, 197, 94, 0.52); } .auth-icon-fallback { width: 3.6rem; height: 3.6rem; border-radius: 1.25rem; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22); } .auth-card-header .auth-logo-frame--login { width: clamp(7.25rem, 28vw, 11rem); height: clamp(4.1rem, 11vw, 5.4rem); max-width: 52%; } .auth-card-header .auth-logo-frame--login .auth-logo-img { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.34)); } .auth-header-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; } .auth-header-chips span { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.7rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 0.28rem 0.62rem; color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.09); font-size: 0.7rem; font-weight: 700; backdrop-filter: blur(12px); } .auth-login-body { padding: 1.35rem !important; } .auth-form-field label { font-weight: 700; color: #0f172a; } .dark .auth-form-field label { color: #f8fafc; } .auth-field-help { margin-top: 0.4rem; color: #64748b; font-size: 0.71rem; line-height: 1.35; } .dark .auth-field-help { color: #94a3b8; } .auth-input-shell { position: relative; } .auth-input-icon { position: absolute; top: 50%; left: 0.85rem; z-index: 2; transform: translateY(-50%); color: #94a3b8; pointer-events: none; } .auth-input-with-icon { padding-left: 2.65rem !important; } .auth-password-field .auth-password-input.auth-input-with-icon { padding-left: 2.65rem !important; padding-right: 5.75rem !important; } .auth-input { min-height: 2.9rem; border-radius: 1rem !important; border-color: rgba(148, 163, 184, 0.40) !important; background: rgba(248, 250, 252, 0.82) !important; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease; } .dark .auth-input { border-color: rgba(71, 85, 105, 0.78) !important; background: rgba(2, 6, 23, 0.44) !important; } .auth-input:focus { background: rgba(255, 255, 255, 0.96) !important; transform: translateY(-1px); } .dark .auth-input:focus { background: rgba(15, 23, 42, 0.92) !important; } .auth-input-shell:focus-within .auth-input-icon { color: var(--accent-solid); } .auth-password-toggle { right: 0.52rem; border-radius: 0.82rem; background: rgba(255, 255, 255, 0.54); border-color: rgba(148, 163, 184, 0.28); } .dark .auth-password-toggle { background: rgba(15, 23, 42, 0.50); border-color: rgba(71, 85, 105, 0.46); } .auth-submit-btn { min-height: 2.95rem; border-radius: 1rem !important; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-solid) 74%, #ffffff 18%) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 92%, #ffffff), var(--accent-solid-hover)) !important; box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-solid) 26%, transparent) !important; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .auth-submit-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.25), transparent 42%); pointer-events: none; } .auth-submit-btn:hover:not([disabled]), .auth-submit-btn:focus-visible:not([disabled]) { transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 18px 40px color-mix(in srgb, var(--accent-solid) 32%, transparent) !important; } .auth-submit-btn span { position: relative; z-index: 1; } .auth-assist-box { border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 1.2rem; padding: 0.85rem; color: #475569; background: radial-gradient(180px circle at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), rgba(248, 250, 252, 0.82); font-size: 0.75rem; line-height: 1.45; } .dark .auth-assist-box { border-color: rgba(71, 85, 105, 0.58); color: #cbd5e1; background: radial-gradient(180px circle at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), rgba(2, 6, 23, 0.34); } .auth-assist-title { display: flex; align-items: center; gap: 0.5rem; color: #0f172a; font-weight: 800; } .dark .auth-assist-title { color: #f8fafc; } .auth-login-footer-note a { color: var(--accent-text) !important; } .dark .auth-login-footer-note a { color: var(--accent-text-dark) !important; } /* Premium staff hero */ .auth-public-shell .auth-hero-card { position: relative; border-radius: 1.8rem !important; min-height: 31rem; border-color: rgba(255, 255, 255, 0.16) !important; background: radial-gradient(700px circle at 5% 0%, color-mix(in srgb, var(--accent) 44%, transparent), transparent 50%), radial-gradient(560px circle at 100% 100%, rgba(59, 130, 246, 0.26), transparent 54%), linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 72%, #020617), #0f172a 72%) !important; box-shadow: 0 32px 100px rgba(15, 23, 42, 0.22) !important; } .auth-public-shell .auth-hero-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 34%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 16px); pointer-events: none; } .auth-hero-content { position: relative; z-index: 1; } .auth-hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .auth-hero-secure-badge { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; border: 1px solid rgba(34, 197, 94, 0.34); border-radius: 999px; padding: 0.45rem 0.7rem; color: #bbf7d0; background: rgba(22, 163, 74, 0.14); font-size: 0.74rem; font-weight: 800; backdrop-filter: blur(10px); } .auth-hero-eyebrow { display: inline-flex; margin-top: 2.2rem; color: rgba(255, 255, 255, 0.64); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .auth-hero-title { max-width: 32rem; color: #ffffff !important; font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.05 !important; } .auth-hero-lede { max-width: 34rem; font-size: 0.98rem; } .auth-hero-mini-grid { align-items: stretch; } .auth-public-shell .auth-hero-mini-card { min-height: 8rem; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; } .auth-public-shell .auth-hero-mini-card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.24) !important; } .auth-mini-icon { width: 2rem; height: 2rem; display: grid; place-items: center; margin-bottom: 0.85rem; border-radius: 0.9rem; color: #e0f2fe; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.14); } .auth-public-shell .auth-hero-notice { display: flex; align-items: center; gap: 0.45rem; border-radius: 1.25rem !important; } .auth-public-shell .auth-hero-notice::before { content: ""; width: 0.55rem; height: 0.55rem; flex: 0 0 auto; border-radius: 999px; background: #38bdf8; box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.14); } .auth-public-shell .auth-hero-brand-pill, .auth-public-shell .auth-hero-mini-card, .auth-public-shell .auth-hero-notice, .auth-hero-secure-badge, .auth-card-eyebrow, .auth-header-chips span { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .auth-public-shell .auth-hero-card .auth-logo-frame--pill { height: 2.45rem; } .auth-public-shell .auth-hero-card .auth-logo-frame--pill .auth-logo-img { max-height: 2.45rem; } @keyframes authFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .auth-login-wrap, .auth-submit-btn, .auth-input, .auth-public-shell .auth-hero-mini-card { animation: none !important; transition: none !important; } } @media (max-width: 1024px) { .auth-public-main--staff { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; } } @media (max-width: 640px) { .auth-card-header { min-height: auto; padding: 1.15rem !important; } .auth-login-body { padding: 1.15rem !important; } .auth-header-chips { gap: 0.36rem; } .auth-header-chips span { font-size: 0.66rem; padding-inline: 0.5rem; } .auth-card-header .auth-logo-frame--login { width: clamp(5.8rem, 35vw, 7.4rem); height: 4rem; max-width: 42%; } } @media (max-width: 380px) { .auth-header-chips span:nth-child(3) { display: none; } .auth-card-eyebrow { font-size: 0.62rem; } } /* Login highlight chips: keep short labels readable instead of squeezing words together. */ .auth-header-chips { align-items: center; justify-content: flex-start; row-gap: 0.55rem; column-gap: 0.5rem; } .auth-header-chips span { flex: 0 0 auto; min-width: max-content; white-space: nowrap; line-height: 1; justify-content: center; } .auth-header-chips span svg { flex: 0 0 auto; } @media (max-width: 640px) { .auth-header-chips { justify-content: center; row-gap: 0.48rem; } .auth-header-chips span { font-size: 0.68rem; padding: 0.34rem 0.58rem; } } @media (max-width: 380px) { .auth-header-chips span:nth-child(3) { display: inline-flex; } } /* Login highlight chips: hard cap inline SVG icon size. Some generated utility classes such as w-3.5/h-3.5 may not exist in the built CSS, so the inline SVG can fall back to its browser default size and crush the chip label. */ .auth-header-chips span { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.42rem !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; line-height: 1.1 !important; } .auth-header-chips span > svg, .auth-header-chips span > .ui-icon, .auth-header-chips span > .action-icon { width: 0.875rem !important; height: 0.875rem !important; min-width: 0.875rem !important; max-width: 0.875rem !important; min-height: 0.875rem !important; max-height: 0.875rem !important; flex: 0 0 0.875rem !important; display: block !important; } @media (max-width: 420px) { .auth-header-chips span > svg, .auth-header-chips span > .ui-icon, .auth-header-chips span > .action-icon { width: 0.8125rem !important; height: 0.8125rem !important; min-width: 0.8125rem !important; max-width: 0.8125rem !important; min-height: 0.8125rem !important; max-height: 0.8125rem !important; flex-basis: 0.8125rem !important; } } /* ========================================================= Project-wide premium polish v3 ========================================================= A scoped, low-risk visual layer for the full product UI. It improves the admin shell, member portal, cards, tables, forms, alerts and empty states without changing controllers, routes, permissions or database logic. */ .ui-polish-v3 { --ui-surface: rgba(255, 255, 255, 0.88); --ui-surface-strong: rgba(255, 255, 255, 0.96); --ui-surface-soft: rgba(248, 250, 252, 0.78); --ui-border-subtle: rgba(203, 213, 225, 0.72); --ui-border-strong: rgba(148, 163, 184, 0.42); --ui-text: rgba(15, 23, 42, 0.96); --ui-muted: rgba(71, 85, 105, 0.80); --ui-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 48px rgba(15, 23, 42, 0.07); --ui-shadow-card-hover: 0 3px 8px rgba(15, 23, 42, 0.07), 0 22px 58px rgba(15, 23, 42, 0.10); --ui-radius-card: 1.15rem; } .dark .ui-polish-v3, .ui-polish-v3.dark { --ui-surface: rgba(15, 23, 42, 0.78); --ui-surface-strong: rgba(15, 23, 42, 0.92); --ui-surface-soft: rgba(2, 6, 23, 0.38); --ui-border-subtle: rgba(51, 65, 85, 0.72); --ui-border-strong: rgba(100, 116, 139, 0.34); --ui-text: rgba(241, 245, 249, 0.96); --ui-muted: rgba(203, 213, 225, 0.74); --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 20px 55px rgba(0, 0, 0, 0.24); --ui-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.28), 0 26px 70px rgba(0, 0, 0, 0.32); } .ui-polish-v3 #appContent, .ui-polish-v3 .portal-content { position: relative; isolation: isolate; } .ui-polish-v3 #appContent::before, .ui-polish-v3 .portal-content::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(720px circle at 18% 2%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 44%), radial-gradient(620px circle at 88% 8%, rgba(99, 102, 241, 0.06), transparent 46%); } .dark .ui-polish-v3 #appContent::before, .dark .ui-polish-v3 .portal-content::before { background: radial-gradient(720px circle at 18% 2%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%), radial-gradient(620px circle at 88% 8%, rgba(99, 102, 241, 0.08), transparent 46%); } /* Admin shell */ .ui-polish-v3 #sidebar > div { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.88)) !important; border-right-color: var(--ui-border-subtle) !important; box-shadow: 8px 0 36px rgba(15, 23, 42, 0.05) !important; backdrop-filter: blur(18px) saturate(1.25); } .dark .ui-polish-v3 #sidebar > div { background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.86)) !important; box-shadow: 10px 0 44px rgba(0, 0, 0, 0.22) !important; } .ui-polish-v3 #sidebar img[alt="Gym logo"] { background: transparent !important; border-color: transparent !important; box-shadow: none !important; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.16)); } .dark .ui-polish-v3 #sidebar img[alt="Gym logo"] { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.86)) drop-shadow(0 7px 14px rgba(255, 255, 255, 0.10)); } .ui-polish-v3 .nav-link { position: relative; min-height: 2.6rem; border: 1px solid transparent; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease; } .ui-polish-v3 .nav-link:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--accent) 12%, transparent); background: color-mix(in srgb, var(--accent) 7%, white) !important; } .dark .ui-polish-v3 .nav-link:hover { background: color-mix(in srgb, var(--accent) 13%, transparent) !important; } .ui-polish-v3 .nav-active { color: var(--accent-text-strong) !important; border-color: color-mix(in srgb, var(--accent) 24%, white) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, white), rgba(255, 255, 255, 0.78)) !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent) !important; } .dark .ui-polish-v3 .nav-active { color: #f8fafc !important; border-color: color-mix(in srgb, var(--accent) 34%, transparent) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), rgba(15, 23, 42, 0.62)) !important; } .ui-polish-v3 .nav-icon { border-radius: 0.9rem; background: rgba(248, 250, 252, 0.86); transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease; } .ui-polish-v3 .nav-link:hover .nav-icon, .ui-polish-v3 .nav-active .nav-icon { transform: scale(1.04); } .ui-polish-v3 .nav-active .nav-icon { color: var(--accent-text-strong); background: color-mix(in srgb, var(--accent) 18%, white) !important; border-color: color-mix(in srgb, var(--accent) 30%, white) !important; } .dark .ui-polish-v3 .nav-active .nav-icon { color: #e0f2fe; background: color-mix(in srgb, var(--accent) 24%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 38%, transparent) !important; } .ui-polish-v3 .app-topbar, .ui-polish-v3 .portal-shell > header { border-bottom-color: var(--ui-border-subtle) !important; background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(20px) saturate(1.25); box-shadow: 0 10px 34px rgba(15, 23, 42, 0.055); } .dark .ui-polish-v3 .app-topbar, .dark .ui-polish-v3 .portal-shell > header { background: rgba(2, 6, 23, 0.68) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.20); } .ui-polish-v3 .app-topbar-chip, .ui-polish-v3 .cmdk-launch, .ui-polish-v3 .portal-shell > header a, .ui-polish-v3 .portal-shell > header button { border-color: var(--ui-border-subtle) !important; background-color: rgba(255, 255, 255, 0.72) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .dark .ui-polish-v3 .app-topbar-chip, .dark .ui-polish-v3 .cmdk-launch, .dark .ui-polish-v3 .portal-shell > header a, .dark .ui-polish-v3 .portal-shell > header button { background-color: rgba(15, 23, 42, 0.72) !important; } .ui-polish-v3 .cmdk-launch:hover, .ui-polish-v3 .app-topbar-chip:hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--ui-border-subtle)) !important; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07); } /* Cards and content panels */ .ui-polish-v3 .ui-card, .ui-polish-v3 .ui-card-premium, .ui-polish-v3 #appContent :where(section, article, div).ui-card-premium, .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-white"], .ui-polish-v3 #appContent :where(section, article, div).rounded-3xl[class*="bg-white"], .ui-polish-v3 .portal-content :where(section, article, div).rounded-2xl[class*="bg-white"], .ui-polish-v3 .portal-content :where(section, article, div).rounded-3xl[class*="bg-white"] { border-color: var(--ui-border-subtle) !important; background: linear-gradient(180deg, var(--ui-surface-strong), var(--ui-surface)) !important; box-shadow: var(--ui-shadow-card) !important; backdrop-filter: blur(14px) saturate(1.12); } .dark .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-white"], .dark .ui-polish-v3 #appContent :where(section, article, div).rounded-3xl[class*="bg-white"], .dark .ui-polish-v3 .portal-content :where(section, article, div).rounded-2xl[class*="bg-white"], .dark .ui-polish-v3 .portal-content :where(section, article, div).rounded-3xl[class*="bg-white"] { background: linear-gradient(180deg, rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.72)) !important; } .ui-polish-v3 .ui-card-premium, .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="shadow-sm"], .ui-polish-v3 .portal-content :where(section, article, div).rounded-2xl[class*="shadow-sm"] { transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease, background-color 170ms ease; } @media (hover: hover) { .ui-polish-v3 .ui-card-premium:hover, .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="shadow-sm"]:hover, .ui-polish-v3 .portal-content :where(section, article, div).rounded-2xl[class*="shadow-sm"]:hover { border-color: color-mix(in srgb, var(--accent) 18%, var(--ui-border-subtle)) !important; box-shadow: var(--ui-shadow-card-hover) !important; } } /* KPI/stat cards: make numbers feel intentional and premium. */ .ui-polish-v3 #appContent :where(.text-2xl, .text-3xl, .text-4xl).font-semibold, .ui-polish-v3 #appContent :where(.text-2xl, .text-3xl, .text-4xl).font-bold, .ui-polish-v3 .portal-content :where(.text-2xl, .text-3xl, .text-4xl).font-semibold, .ui-polish-v3 .portal-content :where(.text-2xl, .text-3xl, .text-4xl).font-bold { letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .ui-polish-v3 #appContent h1, .ui-polish-v3 .portal-content h1 { letter-spacing: -0.035em; } .ui-polish-v3 #appContent h2, .ui-polish-v3 .portal-content h2 { letter-spacing: -0.025em; } /* Soft information panels and alerts */ .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-slate-50"], .ui-polish-v3 .portal-content :where(section, article, div).rounded-2xl[class*="bg-slate-50"] { border-color: var(--ui-border-subtle) !important; background: radial-gradient(260px circle at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%), var(--ui-surface-soft) !important; } .dark .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-slate-50"], .dark .ui-polish-v3 .portal-content :where(section, article, div).rounded-2xl[class*="bg-slate-50"] { background: radial-gradient(260px circle at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 72%), rgba(2, 6, 23, 0.36) !important; } .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-amber-50"], .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-rose-50"], .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-emerald-50"], .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-sky-50"] { box-shadow: 0 12px 34px rgba(15, 23, 42, 0.055); } /* Tables */ .ui-polish-v3 .ui-table-wrap, .ui-polish-v3 .ui-responsive-table-wrap { border-radius: 1rem; border: 1px solid var(--ui-border-subtle); background: var(--ui-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .dark .ui-polish-v3 .ui-table-wrap, .dark .ui-polish-v3 .ui-responsive-table-wrap { background: rgba(15, 23, 42, 0.70); } .ui-polish-v3 .ui-table { border-collapse: separate !important; border-spacing: 0; } .ui-polish-v3 .ui-table thead th { color: rgba(71, 85, 105, 0.92); background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92)) !important; border-bottom: 1px solid var(--ui-border-subtle) !important; font-weight: 700 !important; letter-spacing: 0.02em; text-transform: uppercase; } .dark .ui-polish-v3 .ui-table thead th { color: rgba(203, 213, 225, 0.92); background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.86)) !important; } .ui-polish-v3 .ui-table tbody td { border-color: rgba(226, 232, 240, 0.82) !important; } .dark .ui-polish-v3 .ui-table tbody td { border-color: rgba(51, 65, 85, 0.74) !important; } .ui-polish-v3 .ui-table tbody tr { transition: background-color 120ms ease; } .ui-polish-v3 .ui-table tbody tr:hover:not([class*="bg-"]) { background: color-mix(in srgb, var(--accent) 8%, white) !important; } .dark .ui-polish-v3 .ui-table tbody tr:hover:not([class*="bg-"]) { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; } .ui-polish-v3 .ui-dt-toolbar, .ui-polish-v3 .ui-filterbar { border-color: var(--ui-border-subtle) !important; background: var(--ui-surface) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); backdrop-filter: blur(12px); } /* Forms */ .ui-polish-v3 fieldset, .ui-polish-v3 #appContent form > .rounded-2xl, .ui-polish-v3 .portal-content form > .rounded-2xl { border-color: var(--ui-border-subtle); } .ui-polish-v3 .ui-control, .ui-polish-v3 .form-field, .ui-polish-v3 #appContent input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.cmdk-input):not(.flatpickr-input), .ui-polish-v3 #appContent select, .ui-polish-v3 #appContent textarea, .ui-polish-v3 .portal-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.cmdk-input):not(.flatpickr-input), .ui-polish-v3 .portal-shell select, .ui-polish-v3 .portal-shell textarea { border-radius: 0.86rem !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 1px 2px rgba(15, 23, 42, 0.035); } .dark .ui-polish-v3 .ui-control, .dark .ui-polish-v3 .form-field, .dark .ui-polish-v3 #appContent input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.cmdk-input):not(.flatpickr-input), .dark .ui-polish-v3 #appContent select, .dark .ui-polish-v3 #appContent textarea, .dark .ui-polish-v3 .portal-shell input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.cmdk-input):not(.flatpickr-input), .dark .ui-polish-v3 .portal-shell select, .dark .ui-polish-v3 .portal-shell textarea { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.18); } .ui-polish-v3 .ui-action-control { border-radius: 0.86rem; } .ui-polish-v3 .ui-action-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 92%, white), var(--accent-solid-hover)) !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-solid) 18%, transparent) !important; } .ui-polish-v3 .ui-action-primary:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-solid) 24%, transparent) !important; } /* Empty states */ .ui-polish-v3 .ui-empty-state, .ui-polish-v3 td[colspan] .py-10.text-center, .ui-polish-v3 td[colspan] .py-8.text-center { border-radius: 1rem; margin: 0.45rem; background: radial-gradient(260px circle at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); } .ui-polish-v3 .ui-empty-state .rounded-2xl, .ui-polish-v3 td[colspan] .py-10.text-center .rounded-2xl, .ui-polish-v3 td[colspan] .py-8.text-center .rounded-2xl { background: color-mix(in srgb, var(--accent) 9%, white) !important; border-color: color-mix(in srgb, var(--accent) 20%, white) !important; color: var(--accent-text-strong) !important; } .dark .ui-polish-v3 .ui-empty-state .rounded-2xl, .dark .ui-polish-v3 td[colspan] .py-10.text-center .rounded-2xl, .dark .ui-polish-v3 td[colspan] .py-8.text-center .rounded-2xl { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 28%, transparent) !important; color: var(--accent-text-dark) !important; } /* Member portal */ .ui-polish-v3 .portal-bottom-nav { background: rgba(255, 255, 255, 0.82) !important; border-color: var(--ui-border-subtle) !important; box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.10) !important; backdrop-filter: blur(20px) saturate(1.2); } .dark .ui-polish-v3 .portal-bottom-nav { background: rgba(2, 6, 23, 0.76) !important; box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.26) !important; } .ui-polish-v3 .portal-nav-item { border-radius: 1rem; transition: background-color 140ms ease, color 140ms ease, transform 120ms ease; } .ui-polish-v3 .portal-nav-item:hover { background: color-mix(in srgb, var(--accent) 8%, white); transform: translateY(-1px); } .dark .ui-polish-v3 .portal-nav-item:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } .ui-polish-v3 .portal-nav-item.is-active { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 13%, transparent); } .ui-polish-v3 .portal-quick-tile { border-radius: 1.15rem; box-shadow: var(--ui-shadow-card); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; } .ui-polish-v3 .portal-quick-tile:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-card-hover); border-color: color-mix(in srgb, var(--accent) 20%, var(--ui-border-subtle)); } /* Mobile refinements */ @media (max-width: 640px) { .ui-polish-v3 .app-content, .ui-polish-v3 .portal-content { padding: 0.85rem !important; } .ui-polish-v3 #appContent h1, .ui-polish-v3 .portal-content h1 { font-size: clamp(1.25rem, 6vw, 1.6rem); } .ui-polish-v3 .ui-action-control:not(.ui-icon-button) { min-height: 2.35rem; } .ui-polish-v3 .ui-card, .ui-polish-v3 .ui-card-premium, .ui-polish-v3 #appContent :where(section, article, div).rounded-2xl[class*="bg-white"], .ui-polish-v3 .portal-content :where(section, article, div).rounded-2xl[class*="bg-white"] { border-radius: 1rem !important; } } /* ========================================================= Regression fixes: staff auth hero + responsive table scrolling ========================================================= The broad project polish intentionally upgraded generic rounded white cards, but the staff login hero is a special dark brand panel and should not inherit the normal white card surface. Tables should also scroll horizontally on small screens instead of compressing/wrapping cells into unreadable columns. */ .ui-polish-v3 .auth-public-shell--staff #appContent .auth-hero-card, .ui-polish-v3 .auth-public-shell--staff .auth-hero-card { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; background: radial-gradient(720px circle at 4% 0%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 52%), radial-gradient(560px circle at 100% 100%, rgba(59, 130, 246, 0.28), transparent 56%), linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 74%, #020617), #0f172a 72%) !important; box-shadow: 0 32px 100px rgba(15, 23, 42, 0.24) !important; backdrop-filter: blur(16px) saturate(1.1) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-card:hover { transform: none !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-brand-pill, .ui-polish-v3 .auth-public-shell--staff .auth-hero-mini-card, .ui-polish-v3 .auth-public-shell--staff .auth-hero-notice { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: rgba(255, 255, 255, 0.78) !important; box-shadow: none !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-brand-pill, .ui-polish-v3 .auth-public-shell--staff .auth-hero-card .font-semibold, .ui-polish-v3 .auth-public-shell--staff .auth-hero-notice .font-semibold, .ui-polish-v3 .auth-public-shell--staff .auth-hero-title { color: #ffffff !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-card .text-sky-700, .ui-polish-v3 .auth-public-shell--staff .auth-hero-card .dark\:text-sky-200 { color: rgba(186, 230, 253, 0.96) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-card p, .ui-polish-v3 .auth-public-shell--staff .auth-hero-card .text-slate-600, .ui-polish-v3 .auth-public-shell--staff .auth-hero-card .dark\:text-slate-300 { color: rgba(255, 255, 255, 0.74) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-mini-icon { color: #e0f2fe !important; background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.14) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-card .auth-logo-frame--pill { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* Tables: preserve real table layout and put overflow on the wrapper. */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) { display: block; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) > table:not([data-responsive-off]) { display: table !important; width: max-content !important; min-width: 100% !important; max-width: none !important; table-layout: auto !important; overflow: visible !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) > table:not([data-responsive-off]) :where(th, td) { overflow-wrap: normal !important; word-break: normal !important; } @media (max-width: 768px) { :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) > table:not([data-responsive-off]) { display: table !important; width: max-content !important; min-width: 48rem !important; max-width: none !important; overflow: visible !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) > table.ui-table:not([data-responsive-off]) { min-width: 54rem !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) > table:not([data-responsive-off]) :where(th, td) { white-space: nowrap !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) > table:not([data-responsive-off]) :where(th, td) :where(.whitespace-normal, .break-words, .break-all) { white-space: normal !important; overflow-wrap: anywhere !important; } } @media (max-width: 480px) { :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) > table.ui-table:not([data-responsive-off]) { min-width: 50rem !important; } } /* ========================================================= Final staff login hero readability fix ========================================================= Keep the left-side staff portal panel dark/glass and readable. The broad polish rules and the original Tailwind utility classes can otherwise create pale tiles over the dark background. */ .ui-polish-v3 .auth-public-shell--staff .auth-hero-card { color: #ffffff !important; background: radial-gradient(680px circle at 4% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 54%), radial-gradient(520px circle at 100% 100%, rgba(14, 165, 233, 0.22), transparent 58%), linear-gradient(135deg, color-mix(in srgb, var(--accent-solid) 70%, #020617), #0b1222 74%) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-card::before { background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 34%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 16px) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-card > .absolute { opacity: 0.24 !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-brand-pill, .ui-polish-v3 .auth-public-shell--staff .auth-hero-mini-card, .ui-polish-v3 .auth-public-shell--staff .auth-hero-notice { background: rgba(2, 6, 23, 0.38) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: rgba(255, 255, 255, 0.88) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 42px rgba(2, 6, 23, 0.16) !important; -webkit-backdrop-filter: blur(14px) saturate(1.1) !important; backdrop-filter: blur(14px) saturate(1.1) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-mini-card { min-width: 0; background: rgba(15, 23, 42, 0.46) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-mini-card .font-semibold, .ui-polish-v3 .auth-public-shell--staff .auth-hero-notice .font-semibold, .ui-polish-v3 .auth-public-shell--staff .auth-hero-brand-pill .font-semibold { color: #ffffff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.20); } .ui-polish-v3 .auth-public-shell--staff .auth-hero-mini-card .text-slate-600, .ui-polish-v3 .auth-public-shell--staff .auth-hero-mini-card .dark\:text-slate-300, .ui-polish-v3 .auth-public-shell--staff .auth-hero-notice, .ui-polish-v3 .auth-public-shell--staff .auth-hero-notice .text-slate-600, .ui-polish-v3 .auth-public-shell--staff .auth-hero-notice .dark\:text-slate-300 { color: rgba(255, 255, 255, 0.76) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-hero-notice { background: rgba(2, 6, 23, 0.54) !important; line-height: 1.45; } .ui-polish-v3 .auth-public-shell--staff .auth-mini-icon { background: rgba(56, 189, 248, 0.13) !important; border-color: rgba(186, 230, 253, 0.22) !important; color: rgba(240, 249, 255, 0.96) !important; } .ui-polish-v3 .auth-public-shell--staff .auth-mini-icon svg { width: 1.05rem !important; height: 1.05rem !important; stroke-width: 2.25 !important; } /* ========================================================= Responsive module headers, tabs and action bars ========================================================= Fixes module link groups that sit beside page headers (Communication, Admin Tools, Assessments, and similar screens). These are not tables, so they must use their own scroll/wrap behavior instead of table wrappers. */ .ui-page-header, :where(#appContent, .portal-content) > :where(.flex).mb-4 { min-width: 0; max-width: 100%; } .ui-page-header > *, :where(#appContent, .portal-content) > :where(.flex).mb-4 > * { min-width: 0; max-width: 100%; } .ui-header-actions, .ui-header-action-stack { min-width: 0; max-width: 100%; } .ui-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ui-module-tabs { width: 100%; max-width: 100%; min-width: 0; } .ui-module-tabs-scroll { width: 100%; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; padding: 0.1rem 0 0.35rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; } .ui-module-tab { flex: 0 0 auto; white-space: nowrap !important; line-height: 1; max-width: none; } .ui-module-tab .action-icon, .ui-module-tab .ui-icon { flex: 0 0 auto; width: 1rem !important; height: 1rem !important; } .ui-polish-v3 .ui-module-tab { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .ui-polish-v3 .ui-module-tab.is-active { box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-solid) 12%, transparent); } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { .ui-module-tabs-scroll { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; } } @media (max-width: 1024px) { .ui-page-header, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) { align-items: stretch !important; } .ui-header-action-stack, .ui-page-header > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child { width: 100%; min-width: 0; max-width: 100%; } .ui-module-tabs-scroll { justify-content: flex-start !important; } } @media (max-width: 640px) { .ui-header-actions { align-items: stretch; } .ui-header-actions > :where(a, button, input[type="submit"], input[type="button"]) { min-width: min(12rem, 100%); justify-content: center; } .ui-module-tabs-scroll { margin-inline: -0.1rem; padding-inline: 0.1rem; } } /* Keep table scroll wrappers from accidentally styling non-table tab/action scrollers. */ .ui-module-tabs.ui-table-wrap, .ui-module-tabs-scroll.ui-table-wrap { border: 0 !important; background: transparent !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- Consistent module/header section actions -------------------------------------------------------------------------- Communication, Admin Tools, Assessments and Cashbook previously mixed scrollable tab strips, left-aligned menus and Settings-style header buttons. Keep these navigation groups visually and responsively consistent with the Settings page action buttons: normal wrapping, stable chip width, active highlight and no accidental table/scroller behavior. */ .ui-section-nav { width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; } .ui-section-actions { width: auto; max-width: 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .ui-section-action { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: nowrap !important; line-height: 1.15; } .ui-section-action .action-icon, .ui-section-action .ui-icon, .ui-section-action svg { flex: 0 0 auto; width: 1rem !important; height: 1rem !important; } .ui-section-action.is-active, .ui-polish-v3 .ui-section-action.is-active { color: rgb(12 74 110) !important; border-color: rgb(186 230 253) !important; background: linear-gradient(135deg, rgba(240, 249, 255, 0.98), rgba(224, 242, 254, 0.92)) !important; box-shadow: 0 10px 24px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; } .ui-section-action.is-active:hover { background: linear-gradient(135deg, rgba(224, 242, 254, 1), rgba(186, 230, 253, 0.9)) !important; } .dark .ui-section-action.is-active, .dark .ui-polish-v3 .ui-section-action.is-active { color: rgb(224 242 254) !important; border-color: rgba(14, 165, 233, 0.45) !important; background: linear-gradient(135deg, rgba(7, 89, 133, 0.46), rgba(12, 74, 110, 0.34)) !important; box-shadow: 0 12px 28px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } /* Legacy module tabs now behave like header actions instead of independent horizontal scrollers if any older include still uses them. */ .ui-module-tabs { width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; } .ui-module-tabs-scroll { width: auto; max-width: 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.5rem; overflow: visible; padding: 0; } @media (min-width: 768px) { :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > .ui-section-nav, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :where(.ui-section-nav, .ui-module-tabs), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child .ui-section-actions { justify-content: flex-end; } } @media (max-width: 767.98px) { .ui-section-nav, .ui-section-actions, .ui-module-tabs, .ui-module-tabs-scroll { width: 100%; } .ui-section-action { justify-content: center; } } @media (max-width: 420px) { .ui-section-action { width: 100%; } } /* ========================================================= Final responsive section-header fix ========================================================= Module menus such as Communication/Admin Tools can contain many buttons. At medium widths they were sharing one row with the title, leaving the description column only a few pixels wide, so text wrapped one character per line. Keep section menus on a stable row underneath until there is genuinely enough horizontal room. */ :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-content: stretch !important; gap: 0.85rem !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) > *, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) > :first-child { max-inline-size: 72rem !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) > :first-child :where(p, .text-slate-500, .text-slate-600), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) > :first-child :where(p, .text-slate-500, .text-slate-600) { max-inline-size: 64rem !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) :where(.ui-section-nav, .ui-module-tabs), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) :where(.ui-section-nav, .ui-module-tabs) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) :where(.ui-section-actions, .ui-module-tabs-scroll), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) :where(.ui-section-actions, .ui-module-tabs-scroll) { width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; align-items: center !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) :where(.ui-section-action, .ui-module-tab), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) :where(.ui-section-action, .ui-module-tab) { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; white-space: nowrap !important; } /* On very wide screens we can place a short module menu beside the title, but never allow the title/description to become unreadably narrow. */ @media (min-width: 1500px) { :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) { grid-template-columns: minmax(22rem, 1fr) minmax(0, auto) !important; align-items: center !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) > :last-child { width: auto !important; justify-self: end !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) :where(.ui-section-actions, .ui-module-tabs-scroll), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) :where(.ui-section-actions, .ui-module-tabs-scroll) { width: auto !important; justify-content: flex-end !important; } } @media (max-width: 480px) { :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) :where(.ui-section-action, .ui-module-tab), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) :where(.ui-section-action, .ui-module-tab) { flex: 1 1 calc(50% - 0.5rem) !important; justify-content: center !important; } } @media (max-width: 340px) { :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-section-nav) :where(.ui-section-action, .ui-module-tab), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(.ui-module-tabs) :where(.ui-section-action, .ui-module-tab) { flex-basis: 100% !important; } } /* ========================================================= Final product-hardening pass ========================================================= These overrides keep the now-standard section/header/menu/table patterns stable across legacy module views without touching controller logic. */ /* Page headers: titles should never get crushed by action/menu groups. */ .ui-page-header, .ui-page-heading, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) { min-width: 0 !important; max-width: 100% !important; gap: 0.85rem !important; } :where(#appContent, .portal-content) :where(h1, h2, h3) { overflow-wrap: normal; word-break: normal; hyphens: none; } :where(#appContent, .portal-content) :where(h1 + p, h2 + p, .ui-page-header p, .ui-page-heading p) { max-width: min(100%, 70rem); overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } /* Header action groups and module menus use one button system everywhere. */ .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; } .ui-section-action, .ui-module-tab, .ui-header-actions > :where(a, button, input[type="submit"], input[type="button"]) { min-height: 2.25rem; max-width: 100%; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; } .ui-section-action svg, .ui-module-tab svg, .ui-header-actions svg { flex: 0 0 auto; width: 1rem !important; height: 1rem !important; } .ui-section-count { color: rgb(51 65 85); background: rgba(226, 232, 240, 0.9); } .ui-section-action.is-active .ui-section-count { color: rgb(7 89 133); background: rgba(255, 255, 255, 0.7); } .dark .ui-section-count { color: rgb(226 232 240); background: rgba(51, 65, 85, 0.85); } .dark .ui-section-action.is-active .ui-section-count { color: rgb(224 242 254); background: rgba(2, 132, 199, 0.25); } @media (max-width: 560px) { .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll { align-items: stretch !important; } .ui-section-action, .ui-module-tab, .ui-header-actions > :where(a, button, input[type="submit"], input[type="button"]) { flex: 1 1 calc(50% - 0.5rem) !important; justify-content: center !important; text-align: center !important; } } @media (max-width: 360px) { .ui-section-action, .ui-module-tab, .ui-header-actions > :where(a, button, input[type="submit"], input[type="button"]) { flex-basis: 100% !important; } } /* Tables: preserve real table layout and put the scroll on the wrapper. This avoids crushed columns / vertical text when screens become narrow. */ :where(#appContent, .portal-content) .ui-table-wrap, :where(#appContent, .portal-content) .ui-responsive-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } :where(#appContent, .portal-content) .ui-table-wrap > table:not([data-responsive-off]), :where(#appContent, .portal-content) .ui-responsive-table-wrap > table:not([data-responsive-off]) { display: table !important; width: max-content !important; min-width: 100% !important; max-width: none !important; table-layout: auto !important; } :where(#appContent, .portal-content) .ui-table-wrap :where(th, td), :where(#appContent, .portal-content) .ui-responsive-table-wrap :where(th, td) { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; vertical-align: top; } @media (max-width: 768px) { :where(#appContent, .portal-content) .ui-table-wrap > table.ui-table:not([data-responsive-off]), :where(#appContent, .portal-content) .ui-responsive-table-wrap > table.ui-table:not([data-responsive-off]), :where(#appContent, .portal-content) .ui-table-wrap > table.table-sticky:not([data-responsive-off]), :where(#appContent, .portal-content) .ui-responsive-table-wrap > table.table-sticky:not([data-responsive-off]) { min-width: max(100%, 46rem) !important; } :where(#appContent, .portal-content) .ui-table-wrap :where(th, td) { white-space: nowrap; } :where(#appContent, .portal-content) .ui-table-wrap :where(td .whitespace-normal, td [class*="line-clamp"], td p, td .max-w-xs, td .max-w-sm, td .max-w-md) { white-space: normal; } } /* Do not allow older mobile table rules to turn tables into blocks. */ @media (max-width: 640px) { :where(#appContent, .portal-content) .ui-table-wrap table:not([data-responsive-off]), :where(#appContent, .portal-content) .ui-responsive-table-wrap table:not([data-responsive-off]) { display: table !important; overflow: visible !important; } } /* Forms/filter rows: consistent stacking without breaking compact controls. */ @media (max-width: 640px) { :where(#appContent, .portal-content) :where(.ui-filterbar, .ui-dt-toolbar, .ui-form-actions) { align-items: stretch !important; } :where(#appContent, .portal-content) :where(.ui-filterbar, .ui-dt-toolbar, .ui-form-actions) > * { min-width: 0 !important; } } /* Topbar controls stay readable at awkward tablet widths. */ .app-topbar, .app-topbar-actions, .portal-shell header { min-width: 0; max-width: 100%; } @media (max-width: 900px) { .app-topbar-actions { flex-wrap: wrap; justify-content: flex-end; } } /* ========================================================= Mobile two-column action/menu grids ========================================================= Small phone widths such as 390px should feel intentional rather than like uneven wrapped pills. Any page/header/module action row becomes a clean two-column grid on phones, with the last odd item stretching across the row. */ @media (max-width: 560px) { :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > .flex:last-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > .flex:last-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > .flex:last-child, :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.55rem !important; overflow: visible !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"]), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"]), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"]), :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid) > :where(a, button, input[type="submit"], input[type="button"], .ui-section-action, .ui-module-tab) { flex: 1 1 calc(50% - 0.55rem) !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.45rem !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; } :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > .flex:last-child > :where(a, button) svg, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > .flex:last-child > :where(a, button) svg, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > .flex:last-child > :where(a, button) svg, :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid) svg { flex: 0 0 auto !important; width: 1rem !important; height: 1rem !important; } } @media (max-width: 360px) { :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"]), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"]), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"]), :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid) > :where(a, button, input[type="submit"], input[type="button"], .ui-section-action, .ui-module-tab) { flex-basis: 100% !important; } } /* ========================================================= 390px mobile consistency pass ========================================================= Normalizes page header action groups, module menus, back buttons, status filters, quick links and card header actions at phone widths. The goal is a predictable two-column action grid below the title instead of mixed wrapping, oversized side tiles, or actions floating beside page copy. */ @media (max-width: 560px) { :where(#appContent, .portal-content) :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) :where(.flex):has(> div > h1):has(> .flex), :where(#appContent, .portal-content) :where(.flex):has(> .min-w-0 > h1):has(> .flex) { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) :where(.flex).mb-3:has(h1) > :first-child, :where(#appContent, .portal-content) :where(.flex).mb-4:has(h1) > :first-child, :where(#appContent, .portal-content) :where(.flex).mb-5:has(h1) > :first-child, :where(#appContent, .portal-content) :where(.flex).mb-6:has(h1) > :first-child, :where(#appContent, .portal-content) :where(.flex):has(> div > h1):has(> .flex) > :first-child, :where(#appContent, .portal-content) :where(.flex):has(> .min-w-0 > h1):has(> .flex) > :first-child { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(h1 + p, h1 + .text-slate-500, h1 + .text-slate-600) { max-width: 100% !important; line-height: 1.35 !important; } /* Header actions, tabs, filters-as-buttons and quick-link rows. */ :where(#appContent, .portal-content) :where( .ui-mobile-action-grid, .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .flex.flex-wrap.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> a), .flex.gap-2:has(> .ui-action-control) ) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.55rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } :where(#appContent, .portal-content) :where( .ui-mobile-action-grid, .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .flex.flex-wrap.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> a), .flex.gap-2:has(> .ui-action-control) ) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.5rem !important; justify-content: center !important; text-align: center !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; line-height: 1.15 !important; } :where(#appContent, .portal-content) :where( .ui-mobile-action-grid, .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .flex.flex-wrap.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> a), .flex.gap-2:has(> .ui-action-control) ) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab):last-child:nth-child(odd) { grid-column: 1 / -1 !important; } :where(#appContent, .portal-content) :where( .ui-mobile-action-grid, .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .flex.flex-wrap.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> a), .flex.gap-2:has(> .ui-action-control) ) svg { flex: 0 0 auto !important; width: 1rem !important; height: 1rem !important; } /* Dashboard: keep date/range controls full-width, then action buttons grid below. */ :where(#appContent) [data-dashboard="1"] :where(.flex).mb-4:has(h1) > .flex:last-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.55rem !important; width: 100% !important; } :where(#appContent) [data-dashboard="1"] :where(.flex).mb-4:has(h1) > .flex:last-child > form[data-ui-filters="1"] { grid-column: 1 / -1 !important; width: 100% !important; margin-right: 0 !important; } :where(#appContent) [data-dashboard="1"] :where(.flex).mb-4:has(h1) > .flex:last-child > form[data-ui-filters="1"] > * { width: 100% !important; } :where(#appContent) [data-dashboard="1"] :where(.flex).mb-4:has(h1) > .flex:last-child > :where(a, button) { width: 100% !important; min-height: 2.5rem !important; justify-content: center !important; } :where(#appContent) [data-dashboard="1"] .ui-range-select { width: min(100%, 9.5rem) !important; } /* Card/list headers with a single right-side action, e.g. Import history. */ :where(#appContent, .portal-content) :where(.ui-card, .card, .rounded-2xl[class*="bg-white"]) > :where(.flex.items-start.justify-between, .flex.items-center.justify-between):has(h2), :where(#appContent, .portal-content) :where(.ui-card, .card, .rounded-2xl[class*="bg-white"]) > :where(.flex.items-start.justify-between, .flex.items-center.justify-between):has(.font-semibold) { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; } :where(#appContent, .portal-content) :where(.ui-card, .card, .rounded-2xl[class*="bg-white"]) > :where(.flex.items-start.justify-between, .flex.items-center.justify-between):has(h2) > :where(a, button, .ui-action-control), :where(#appContent, .portal-content) :where(.ui-card, .card, .rounded-2xl[class*="bg-white"]) > :where(.flex.items-start.justify-between, .flex.items-center.justify-between):has(.font-semibold) > :where(a, button, .ui-action-control) { width: 100% !important; justify-content: center !important; } } @media (max-width: 360px) { :where(#appContent, .portal-content) :where( .ui-mobile-action-grid, .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .flex.flex-wrap.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> .ui-action-control), .flex.items-center.gap-2:has(> a), .flex.gap-2:has(> .ui-action-control) ) { grid-template-columns: 1fr !important; } } @media (max-width: 560px) { :where(#appContent, .portal-content) .ui-mobile-action-grid > :where(.ui-section-nav, .ui-module-tabs) { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) .ui-mobile-action-grid > :where(.ui-section-nav, .ui-module-tabs) + :where(a, button, .ui-action-control) { grid-column: 1 / -1 !important; } } /* ========================================================= Dashboard mobile QA fixes: range, checklist and cashflow cards ========================================================= These are intentionally dashboard-scoped so the project-wide mobile menu grid rules do not turn small dashboard controls into oversized tiles. */ [data-dashboard="1"] .dash-range-form, [data-dashboard="1"] .dash-range-control, [data-dashboard="1"] .dash-custom-range, [data-dashboard="1"] .dash-checklist-row, [data-dashboard="1"] .dashboard-cashflow-summary > * { min-width: 0 !important; max-width: 100% !important; } [data-dashboard="1"] .dash-range-control { min-height: 2.55rem; } [data-dashboard="1"] .dash-range-control > .inline-flex { min-width: 0; } [data-dashboard="1"] .dash-range-control .ui-range-select { min-width: 0 !important; max-width: 100% !important; } [data-dashboard="1"] .dash-checklist-list { display: grid; gap: 0.5rem; } [data-dashboard="1"] .dash-checklist-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; min-height: 2.85rem; } [data-dashboard="1"] .dash-checklist-item { min-width: 0; } [data-dashboard="1"] .dash-checklist-item input { flex: 0 0 auto; } [data-dashboard="1"] .dash-checklist-link-wrap { display: flex; justify-content: flex-end; align-items: center; min-width: max-content; } [data-dashboard="1"] .dash-checklist-open { display: inline-flex !important; width: auto !important; min-width: 4rem !important; min-height: 1.85rem !important; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(59, 130, 246, 0.22); background: rgba(239, 246, 255, 0.78); padding: 0.35rem 0.7rem; line-height: 1; text-decoration: none !important; white-space: nowrap !important; } [data-dashboard="1"] .dash-checklist-open:hover { background: rgba(219, 234, 254, 0.95); } .dark [data-dashboard="1"] .dash-checklist-open { border-color: rgba(56, 189, 248, 0.28); background: rgba(14, 165, 233, 0.12); } [data-dashboard="1"] .dashboard-cashflow-summary { align-items: stretch; } [data-dashboard="1"] .dashboard-cashflow-summary > * { display: flex; flex-direction: column; justify-content: center; min-height: 4.45rem; } [data-dashboard="1"] .dashboard-money { display: block; max-width: 100%; font-variant-numeric: tabular-nums; line-height: 1.22; overflow-wrap: normal; word-break: normal; } @media (max-width: 560px) { [data-dashboard="1"] .dash-header-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.55rem !important; width: 100% !important; align-items: stretch !important; } [data-dashboard="1"] .dash-range-form { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0.55rem !important; width: 100% !important; margin-right: 0 !important; } [data-dashboard="1"] .dash-range-control { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; padding: 0.65rem 0.75rem !important; } [data-dashboard="1"] .dash-range-control > .inline-flex { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; width: 100% !important; min-width: 0 !important; } [data-dashboard="1"] .dash-range-control .ui-range-select { width: 100% !important; min-width: 0 !important; } [data-dashboard="1"] .dash-custom-range { display: grid !important; grid-template-columns: 1fr !important; gap: 0.55rem !important; width: 100% !important; } [data-dashboard="1"] .dash-custom-range.hidden { display: none !important; } [data-dashboard="1"] .dash-custom-range :where(input, button) { width: 100% !important; justify-content: center !important; } [data-dashboard="1"] .dash-header-actions > :where(a, button) { width: 100% !important; min-height: 2.5rem !important; justify-content: center !important; } [data-dashboard="1"] .dash-checklist-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 0.75rem !important; } [data-dashboard="1"] .dash-checklist-reset { width: auto !important; min-width: 6rem !important; justify-content: center !important; } [data-dashboard="1"] .dash-checklist-row { grid-template-columns: minmax(0, 1fr) auto !important; min-height: 3rem; padding-block: 0.65rem !important; } [data-dashboard="1"] .dash-checklist-open { min-width: 4.5rem !important; } [data-dashboard="1"] .dashboard-cashflow-summary { grid-template-columns: 1fr !important; } [data-dashboard="1"] .dashboard-cashflow-summary > * { min-height: auto; padding: 0.85rem 1rem !important; } [data-dashboard="1"] .dashboard-money { font-size: 0.95rem; } } @media (max-width: 380px) { [data-dashboard="1"] .dash-checklist-header { grid-template-columns: 1fr !important; } [data-dashboard="1"] .dash-checklist-reset { width: 100% !important; } } /* ========================================================= Mobile controls consistency pass (390px QA): compact tables, stable form controls, and clean one-action headers. ========================================================= */ @media (max-width: 560px) { /* Dashboard range: use the native select arrow and suppress the extra SVG that could be pushed below the control by global mobile grid rules. */ [data-dashboard="1"] .dash-range-control { display: flex !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; min-height: 2.75rem !important; } [data-dashboard="1"] .dash-range-control > span { flex: 0 0 auto !important; } [data-dashboard="1"] .dash-range-control > .inline-flex { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; position: relative !important; } [data-dashboard="1"] .dash-range-control .pointer-events-none { display: none !important; } [data-dashboard="1"] .dash-range-control select.ui-range-select { appearance: auto !important; -webkit-appearance: auto !important; -moz-appearance: auto !important; width: 100% !important; max-width: 100% !important; padding-right: 1.75rem !important; line-height: 1.2 !important; background: transparent !important; } /* Single back/settings links should not become large blank tiles on create/edit screens. */ :where(#appContent, .portal-content) .ui-header-action-stack:has(> .ui-back-action:only-child), :where(#appContent, .portal-content) .ui-header-actions:has(> .ui-back-action:only-child) { display: flex !important; justify-content: flex-start !important; align-items: center !important; width: 100% !important; } :where(#appContent, .portal-content) .ui-header-action-stack > .ui-back-action:only-child, :where(#appContent, .portal-content) .ui-header-actions > .ui-back-action:only-child { width: auto !important; min-width: 7.5rem !important; max-width: 12rem !important; min-height: 2.5rem !important; grid-column: auto !important; justify-self: start !important; } /* Keep table action cells compact. These buttons live inside horizontally scrollable tables; they should not inherit the page-header 2-column grid. */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td.ui-table-actions-cell, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(.ui-action-control) { min-width: 9rem !important; width: auto !important; text-align: right !important; white-space: nowrap !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td.ui-table-actions-cell > :where(.flex, .inline-flex), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(.ui-action-control) > :where(.flex, .inline-flex), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) .ui-table-actions-row { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.35rem !important; width: auto !important; max-width: 12rem !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td.ui-table-actions-cell form, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(.ui-action-control) form { display: inline-flex !important; margin: 0 !important; width: auto !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td.ui-table-actions-cell .ui-action-control, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(.ui-action-control) .ui-action-control { width: auto !important; min-width: 4.35rem !important; max-width: 7.25rem !important; min-height: 2.15rem !important; padding: 0.42rem 0.65rem !important; border-radius: 0.85rem !important; font-size: 0.75rem !important; line-height: 1.1 !important; justify-content: center !important; white-space: nowrap !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td.ui-table-actions-cell .ui-icon-button, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(.ui-action-control) .ui-icon-button { width: 2.5rem !important; min-width: 2.5rem !important; max-width: 2.5rem !important; padding-inline: 0 !important; } /* Data-table toolbars and filters: consistent textbox/button heights without forcing every control to become a huge tile. */ :where(#appContent, .portal-content) :where(.ui-control, .form-field, select.ui-control, input.ui-control) { min-height: 2.65rem !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"] :where(.ui-action-control, button, input[type="submit"]) { min-height: 2.65rem !important; justify-content: center !important; } :where(#appContent, .portal-content) :where(.ui-dt-toolbar, .ui-filterbar) :where(.ui-action-control, .ui-dt-btn, button, a) { min-height: 2.35rem !important; border-radius: 0.9rem !important; } /* Form/edit pages: reduce the mobile whitespace added by the guided-form wrapper and make save/cancel bars look intentional rather than oversized. */ :where(#appContent, .portal-content) .ui-field { padding: 0.35rem 0 !important; border-radius: 0.9rem !important; } :where(#appContent, .portal-content) .ui-form-actions { position: static !important; bottom: auto !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; margin-top: 1rem !important; padding: 0.65rem !important; border-radius: 1rem !important; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important; } :where(#appContent, .portal-content) .ui-form-actions > :where(a, button, input[type="submit"], .ui-action-control) { width: auto !important; min-width: 6.5rem !important; max-width: 100% !important; min-height: 2.45rem !important; justify-content: center !important; } /* Header CTA groups keep two equal columns when there are two real actions, but table/card action rows opt out via the table rules above. */ :where(#appContent, .portal-content) .ui-header-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { min-height: 2.55rem !important; } } @media (max-width: 400px) { :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td.ui-table-actions-cell .ui-action-control, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(.ui-action-control) .ui-action-control { min-width: 4rem !important; max-width: 6.75rem !important; padding-inline: 0.55rem !important; } } /* ========================================================= Final table action consistency pass Table actions should stay compact like the smallest row action chip, not inherit page/header button sizing. Applies only inside real table scroll wrappers so normal page buttons keep their current sizing. ========================================================= */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:has(> .flex .ui-action-control), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:has(> .inline-flex .ui-action-control), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child { white-space: nowrap; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td :where(.ui-table-actions-row, .flex, .inline-flex):has(> .ui-action-control), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child > :where(.flex, .inline-flex) { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 0.35rem !important; width: auto !important; max-width: none !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td form { display: inline-flex !important; align-items: center !important; margin: 0 !important; width: auto !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td :where(a.ui-action-control, button.ui-action-control, input.ui-action-control[type="submit"], .ui-action-control), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td :where(a[class*="ui-action-"], button[class*="ui-action-"]) { width: auto !important; min-width: 3.65rem !important; max-width: none !important; min-height: 1.9rem !important; height: 1.9rem !important; padding: 0.28rem 0.62rem !important; border-radius: 0.7rem !important; font-size: 0.74rem !important; line-height: 1 !important; gap: 0.28rem !important; justify-content: center !important; align-items: center !important; white-space: nowrap !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td :where(a.ui-action-control, button.ui-action-control) svg, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td .ui-action-control .action-icon, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td .ui-action-control .ui-icon { width: 0.85rem !important; height: 0.85rem !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td :where(.ui-icon-button, button.ui-icon-button, a.ui-icon-button) { width: 2rem !important; min-width: 2rem !important; max-width: 2rem !important; height: 1.9rem !important; min-height: 1.9rem !important; padding-inline: 0 !important; } /* Disabled/non-clickable action chips should visually match clickable row chips. */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child > span.inline-flex, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td :where(.flex, .inline-flex) > span.inline-flex { min-height: 1.9rem !important; height: 1.9rem !important; padding: 0.28rem 0.62rem !important; border-radius: 0.7rem !important; font-size: 0.74rem !important; line-height: 1 !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 560px) { :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td.ui-table-actions-cell, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(.ui-action-control), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(button), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td:last-child:has(a) { min-width: auto !important; width: auto !important; text-align: right !important; white-space: nowrap !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td :where(a.ui-action-control, button.ui-action-control, input.ui-action-control[type="submit"], .ui-action-control), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) td :where(a[class*="ui-action-"], button[class*="ui-action-"]) { min-width: 3.65rem !important; min-height: 1.9rem !important; height: 1.9rem !important; padding: 0.28rem 0.62rem !important; border-radius: 0.7rem !important; font-size: 0.74rem !important; } } /* ========================================================= Strong global table button compacting pass Previous table-action rules were too dependent on action-cell detection. This is intentionally table-scoped: every real link/button inside a data table body is compact, consistent and chip-sized, while page/header/filter buttons outside tables keep their normal sizing. ========================================================= */ #appContent .ui-table-wrap table.ui-table tbody td a, #appContent .ui-table-wrap table.ui-table tbody td button, #appContent .ui-table-wrap table.ui-table tbody td input[type="submit"], #appContent .ui-responsive-table-wrap table.ui-table tbody td a, #appContent .ui-responsive-table-wrap table.ui-table tbody td button, #appContent .ui-responsive-table-wrap table.ui-table tbody td input[type="submit"], .portal-content .ui-table-wrap table.ui-table tbody td a, .portal-content .ui-table-wrap table.ui-table tbody td button, .portal-content .ui-table-wrap table.ui-table tbody td input[type="submit"], .portal-content .ui-responsive-table-wrap table.ui-table tbody td a, .portal-content .ui-responsive-table-wrap table.ui-table tbody td button, .portal-content .ui-responsive-table-wrap table.ui-table tbody td input[type="submit"], .ui-table-action-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 3.45rem !important; max-width: max-content !important; height: 1.85rem !important; min-height: 1.85rem !important; padding: 0.24rem 0.55rem !important; border-radius: 0.7rem !important; font-size: 0.73rem !important; line-height: 1 !important; gap: 0.28rem !important; white-space: nowrap !important; text-align: center !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important; } #appContent .ui-table-wrap table.ui-table tbody td a svg, #appContent .ui-table-wrap table.ui-table tbody td button svg, #appContent .ui-responsive-table-wrap table.ui-table tbody td a svg, #appContent .ui-responsive-table-wrap table.ui-table tbody td button svg, .portal-content .ui-table-wrap table.ui-table tbody td a svg, .portal-content .ui-table-wrap table.ui-table tbody td button svg, .portal-content .ui-responsive-table-wrap table.ui-table tbody td a svg, .portal-content .ui-responsive-table-wrap table.ui-table tbody td button svg, .ui-table-action-btn svg { width: 0.8rem !important; height: 0.8rem !important; flex: 0 0 auto !important; } #appContent .ui-table-wrap table.ui-table tbody td form, #appContent .ui-responsive-table-wrap table.ui-table tbody td form, .portal-content .ui-table-wrap table.ui-table tbody td form, .portal-content .ui-responsive-table-wrap table.ui-table tbody td form { display: inline-flex !important; width: auto !important; margin: 0 !important; padding: 0 !important; vertical-align: middle !important; } #appContent .ui-table-wrap table.ui-table tbody td:has(a, button, input[type="submit"]), #appContent .ui-responsive-table-wrap table.ui-table tbody td:has(a, button, input[type="submit"]), .portal-content .ui-table-wrap table.ui-table tbody td:has(a, button, input[type="submit"]), .portal-content .ui-responsive-table-wrap table.ui-table tbody td:has(a, button, input[type="submit"]) { white-space: nowrap !important; } #appContent .ui-table-wrap table.ui-table tbody td > .flex, #appContent .ui-table-wrap table.ui-table tbody td > .inline-flex, #appContent .ui-responsive-table-wrap table.ui-table tbody td > .flex, #appContent .ui-responsive-table-wrap table.ui-table tbody td > .inline-flex, .portal-content .ui-table-wrap table.ui-table tbody td > .flex, .portal-content .ui-table-wrap table.ui-table tbody td > .inline-flex, .portal-content .ui-responsive-table-wrap table.ui-table tbody td > .flex, .portal-content .ui-responsive-table-wrap table.ui-table tbody td > .inline-flex { gap: 0.3rem !important; align-items: center !important; flex-wrap: nowrap !important; } /* Non-clickable placeholders such as disabled Delete chips should match. */ #appContent .ui-table-wrap table.ui-table tbody td > span.inline-flex, #appContent .ui-responsive-table-wrap table.ui-table tbody td > span.inline-flex, .portal-content .ui-table-wrap table.ui-table tbody td > span.inline-flex, .portal-content .ui-responsive-table-wrap table.ui-table tbody td > span.inline-flex, #appContent .ui-table-wrap table.ui-table tbody td > .flex > span.inline-flex, #appContent .ui-responsive-table-wrap table.ui-table tbody td > .flex > span.inline-flex, .portal-content .ui-table-wrap table.ui-table tbody td > .flex > span.inline-flex, .portal-content .ui-responsive-table-wrap table.ui-table tbody td > .flex > span.inline-flex { min-height: 1.85rem !important; height: 1.85rem !important; padding: 0.24rem 0.55rem !important; border-radius: 0.7rem !important; font-size: 0.73rem !important; line-height: 1 !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 560px) { #appContent .ui-table-wrap table.ui-table tbody td a, #appContent .ui-table-wrap table.ui-table tbody td button, #appContent .ui-table-wrap table.ui-table tbody td input[type="submit"], #appContent .ui-responsive-table-wrap table.ui-table tbody td a, #appContent .ui-responsive-table-wrap table.ui-table tbody td button, #appContent .ui-responsive-table-wrap table.ui-table tbody td input[type="submit"], .portal-content .ui-table-wrap table.ui-table tbody td a, .portal-content .ui-table-wrap table.ui-table tbody td button, .portal-content .ui-table-wrap table.ui-table tbody td input[type="submit"], .portal-content .ui-responsive-table-wrap table.ui-table tbody td a, .portal-content .ui-responsive-table-wrap table.ui-table tbody td button, .portal-content .ui-responsive-table-wrap table.ui-table tbody td input[type="submit"], .ui-table-action-btn { min-width: 3.45rem !important; height: 1.85rem !important; min-height: 1.85rem !important; padding: 0.24rem 0.55rem !important; border-radius: 0.7rem !important; font-size: 0.73rem !important; } } /* ========================================================= 390px table action overlap fix Compact buttons only work if the action column is allowed to be wide enough for the complete action group. These rules keep data tables horizontally scrollable and prevent row actions from stacking on top of each other in Members, Compliance, Resources and similar modules. ========================================================= */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table { border-collapse: separate !important; border-spacing: 0 !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table :where(th, td) { position: relative; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table :where(th:last-child, td:last-child), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td.ui-table-actions-cell, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td:has(> .flex a, > .flex button, > .inline-flex a, > .inline-flex button, > form, > a, > button) { min-width: max-content !important; width: max-content !important; white-space: nowrap !important; overflow: visible !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td.ui-table-actions-cell > :where(.flex, .inline-flex), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td:last-child > :where(.flex, .inline-flex), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td .ui-table-actions-row { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 0.3rem !important; width: max-content !important; min-width: max-content !important; max-width: none !important; overflow: visible !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td.ui-table-actions-cell form, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td:last-child form, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td form:has(button, input[type="submit"]) { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td :where(a, button, input[type="submit"], .ui-table-action-btn) { flex: 0 0 auto !important; } @media (max-width: 560px) { :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table { min-width: max(100%, 54rem) !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td.ui-table-actions-cell, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td:last-child { min-width: max-content !important; width: max-content !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td.ui-table-actions-cell > :where(.flex, .inline-flex), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td:last-child > :where(.flex, .inline-flex), :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) table.ui-table td .ui-table-actions-row { width: max-content !important; min-width: max-content !important; flex-wrap: nowrap !important; } } /* ========================================================= Tablet landscape / 1024px consistency pass ========================================================= At 1024px the app remains in the tablet/off-canvas shell. These rules keep headers, module menus, filters, side-by-side forms and dashboard widgets from behaving like a full desktop layout. */ @media (min-width: 768px) and (max-width: 1279.98px) { /* Page titles and their action/menu groups should stack at constrained tablet-landscape widths. This makes Attendance, Compliance, Settings, Admin Tools and similar pages use one consistent header pattern. */ :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) > :where(.flex):has(> div > h1):has(> .flex), :where(#appContent, .portal-content) > :where(.flex):has(> .min-w-0 > h1):has(> .flex) { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.8rem !important; width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll), :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > .flex:last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > .flex:last-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > .flex:last-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > .flex:last-child { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.55rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab), :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > .flex:last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 1 auto !important; width: auto !important; min-width: 7rem !important; max-width: 100% !important; min-height: 2.35rem !important; justify-content: center !important; white-space: nowrap !important; text-align: center !important; } /* Data/filter cards: do not force a full desktop single-row form through 1024px. This fixes Invoices/PT Sessions vertical text and squeezed controls. */ :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) > * { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) :where(input, select, textarea, .ui-control) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) > :where(.flex, .inline-flex):has(> button, > a, > input[type="submit"]) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.55rem !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) > :where(.flex, .inline-flex):has(> button, > a, > input[type="submit"]) > :where(a, button, input[type="submit"], .ui-action-control) { flex: 0 1 auto !important; min-width: 6.5rem !important; justify-content: center !important; } /* Card headers containing a filter/search form stack cleanly rather than placing a text block and a form into an over-tight row. */ :where(#appContent, .portal-content) :where(.card, .ui-card, [class*="rounded-2xl"]) > :where(.flex).items-center.justify-between:has(> form[data-ui-filters="1"]), :where(#appContent, .portal-content) :where(.card, .ui-card, [class*="rounded-2xl"]) > :where(.flex).items-start.justify-between:has(> form[data-ui-filters="1"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.75rem !important; } /* Side-by-side module layouts with narrow form sidebars should wait for a wider desktop before splitting. This improves Cashbook accounts and locker day-use panels through 1024px. */ :where(#appContent, .portal-content) .grid.lg\:grid-cols-3:has(> .lg\:col-span-1), :where(#appContent, .portal-content) .grid.lg\:grid-cols-3:has(> .lg\:col-span-2) { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) :where(.lg\:col-span-1, .lg\:col-span-2, .lg\:col-span-3) { grid-column: auto !important; } /* Cashbook branch switcher: keep the label and select from clipping at the edge of the module nav. */ :where(#appContent, .portal-content) .ui-section-nav + form { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) .ui-section-nav + form label { flex: 0 0 auto !important; min-width: max-content !important; } :where(#appContent, .portal-content) .ui-section-nav + form select { flex: 1 1 14rem !important; width: auto !important; max-width: 100% !important; min-width: 12rem !important; } /* Dashboard urgent cards should not use five columns inside the narrow constrained tablet-landscape content area. */ [data-dashboard="1"] #dashWidgetGrid { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)) !important; } [data-dashboard="1"] #dashWidgetGrid > a { min-width: 0 !important; width: 100% !important; } [data-dashboard="1"] #dashWidgetGrid > a > .flex { align-items: flex-start !important; } [data-dashboard="1"] .dash-header-actions { justify-content: flex-start !important; } [data-dashboard="1"] .dash-range-form { flex: 0 1 21rem !important; width: auto !important; max-width: 100% !important; margin-right: 0 !important; } [data-dashboard="1"] .dash-range-control { width: 100% !important; max-width: 100% !important; } [data-dashboard="1"] .dash-range-control > .inline-flex { min-width: 0 !important; flex: 1 1 auto !important; } [data-dashboard="1"] .dash-range-control .ui-range-select { width: 100% !important; min-width: 0 !important; } } @media (min-width: 1280px) { [data-dashboard="1"] #dashWidgetGrid { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)) !important; } } /* Table actions: keep all row action groups consistently right-aligned and compact at every width while preserving horizontal scroll for wide tables. */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto) table.ui-table td:last-child, :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto) table.ui-table th:last-child, :where(#appContent, .portal-content) table.ui-table td.ui-table-actions-cell, :where(#appContent, .portal-content) table.ui-table th.ui-table-actions-cell { text-align: right !important; white-space: nowrap !important; } :where(#appContent, .portal-content) table.ui-table td:last-child > :where(.flex, .inline-flex), :where(#appContent, .portal-content) table.ui-table td.ui-table-actions-cell > :where(.flex, .inline-flex), :where(#appContent, .portal-content) table.ui-table td .ui-table-actions-row { justify-content: flex-end !important; align-items: center !important; gap: 0.32rem !important; flex-wrap: nowrap !important; margin-left: auto !important; } :where(#appContent, .portal-content) table.ui-table td:last-child :where(a, button, input[type="submit"], .ui-action-control), :where(#appContent, .portal-content) table.ui-table td.ui-table-actions-cell :where(a, button, input[type="submit"], .ui-action-control) { min-width: 3.45rem !important; height: 1.85rem !important; min-height: 1.85rem !important; padding: 0.24rem 0.55rem !important; border-radius: 0.7rem !important; font-size: 0.73rem !important; line-height: 1 !important; white-space: nowrap !important; } /* Tablet-landscape dashboard widget refinement: keep urgent KPI cards wide enough to avoid squeezed labels/numbers at intermediate widths. */ @media (min-width: 768px) and (max-width: 1279.98px) { [data-dashboard="1"] #dashWidgetGrid { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important; } [data-dashboard="1"] #dashWidgetGrid > a { min-height: 7.25rem !important; } [data-dashboard="1"] #dashWidgetGrid > a > .flex:first-child { align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; } [data-dashboard="1"] #dashWidgetGrid > a > .flex:first-child > div:first-child { min-width: 0 !important; max-width: calc(100% - 2.5rem) !important; line-height: 1.2 !important; } [data-dashboard="1"] #dashWidgetGrid > a > .flex:first-child > div:last-child { flex: 0 0 2rem !important; } } /* -------------------------------------------------------------------------- 1440px desktop consistency pass Keeps page headers, section menus, filters, dashboard KPIs and table actions aligned consistently once the desktop sidebar is visible. -------------------------------------------------------------------------- */ @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) > .ui-page-header { display: grid !important; grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr) !important; align-items: start !important; justify-content: stretch !important; gap: 1rem !important; width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :first-child, :where(#appContent, .portal-content) > .ui-page-header > :first-child { width: auto !important; max-width: 20rem !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child, :where(#appContent, .portal-content) > .ui-page-header > :last-child, :where(#appContent, .portal-content) .ui-header-action-stack { justify-self: stretch !important; align-self: start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 0.55rem !important; } :where(#appContent, .portal-content) .ui-header-actions, :where(#appContent, .portal-content) .ui-section-actions, :where(#appContent, .portal-content) .ui-module-tabs-scroll, :where(#appContent, .portal-content) .ui-header-action-stack > :where(.flex, .inline-flex) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.55rem !important; overflow: visible !important; } :where(#appContent, .portal-content) .ui-section-nav, :where(#appContent, .portal-content) .ui-module-tabs { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block !important; } :where(#appContent, .portal-content) .ui-header-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab) { flex: 0 0 auto !important; min-height: 2.25rem !important; white-space: nowrap !important; justify-content: center !important; } } @media (min-width: 1025px) and (max-width: 1279.98px) { :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) > .ui-page-header { grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr) !important; } } /* Cashbook branch selector: prevent the Branch label from clipping when it shares a row with the section menu. */ :where(#appContent, .portal-content) .ui-branch-switcher, :where(#appContent, .portal-content) .ui-section-nav + form { overflow: visible !important; min-width: max-content !important; padding-left: 0.35rem !important; } :where(#appContent, .portal-content) .ui-branch-switcher label, :where(#appContent, .portal-content) .ui-section-nav + form label { display: inline-flex !important; align-items: center !important; padding-inline-start: 0.15rem !important; line-height: 1.2 !important; white-space: nowrap !important; } :where(#appContent, .portal-content) .ui-branch-switcher select, :where(#appContent, .portal-content) .ui-section-nav + form select { min-width: 11rem !important; } /* Dashboard urgent widgets: keep the number/caption from squeezing even on wide desktop screens where the side checklist still shares the row. */ [data-dashboard="1"] #dashWidgetGrid > a { min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } [data-dashboard="1"] #dashWidgetGrid > a > .flex:first-child { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; gap: 0.65rem !important; } [data-dashboard="1"] #dashWidgetGrid > a > .mt-2, [data-dashboard="1"] #dashWidgetGrid > a > .mt-1 { white-space: nowrap !important; line-height: 1.15 !important; } [data-dashboard="1"] #dashWidgetGrid > a > .mt-2 { font-variant-numeric: tabular-nums !important; letter-spacing: -0.015em !important; } @media (min-width: 1280px) { [data-dashboard="1"] #dashWidgetGrid { grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)) !important; } [data-dashboard="1"] #dashWidgetGrid > a { min-height: 7rem !important; } } @media (min-width: 1280px) and (max-width: 1535.98px) { [data-dashboard="1"] [data-dashboard-control-room="1"] .grid.xl\:grid-cols-3 { grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.95fr) !important; } } /* Forms/cards: full-width form pages should use the available content area on desktop unless they are print/error/dialog pages. */ :where(#appContent) > .ui-card:has(> form), :where(#appContent) > div > .ui-card:has(> form) { max-width: 100% !important; } /* Compact search forms in card headers should not create overstuffed rows. */ :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-center.justify-between:has(form[data-ui-filterbar-off]) { align-items: flex-start !important; gap: 1rem !important; } :where(#appContent, .portal-content) form[data-ui-filterbar-off] { display: flex !important; flex-wrap: wrap !important; align-items: end !important; gap: 0.55rem !important; min-width: min(22rem, 100%) !important; } :where(#appContent, .portal-content) form[data-ui-filterbar-off] :where(input, select, textarea) { flex: 1 1 14rem !important; min-width: 0 !important; } /* Filter toolbar consistency at desktop widths. */ @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { :where(#appContent, .portal-content) .ui-filterbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; } :where(#appContent, .portal-content) .ui-filterbar-right { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.45rem !important; } :where(#appContent, .portal-content) .ui-filterbar-select { min-width: 12rem !important; max-width: 18rem !important; } } /* Table action buttons: consistent compact neutral styling inside real tables. Danger/primary actions keep their semantic color. */ :where(#appContent, .portal-content) table.ui-table :where(td.ui-table-actions-cell, td:last-child) :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-table-action-btn) { min-width: 3.25rem !important; height: 1.8rem !important; min-height: 1.8rem !important; padding: 0.22rem 0.5rem !important; border-radius: 0.7rem !important; font-size: 0.72rem !important; line-height: 1 !important; gap: 0.3rem !important; white-space: nowrap !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important; } :where(#appContent, .portal-content) table.ui-table :where(td.ui-table-actions-cell, td:last-child) :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-table-action-btn):not(.ui-action-primary):not(.ui-action-danger):not(.btn-primary) { background: rgba(241, 245, 249, 0.92) !important; border-color: rgba(203, 213, 225, 0.95) !important; color: #334155 !important; } /* Table action danger colors: keep solid danger buttons white, but keep soft danger buttons readable. The previous broad .ui-action-danger selector made pale Delete/Deactivate/Void buttons render white text on pale red backgrounds. */ :where(#appContent, .portal-content) table.ui-table :where(td.ui-table-actions-cell, td:last-child) :where( .ui-action-danger[class~="bg-rose-600"], .ui-action-danger[class~="bg-rose-700"], .ui-action-danger[class~="bg-red-600"], .ui-action-danger[class~="bg-red-700"], .bg-rose-600, .bg-red-600 ) { color: #fff !important; } :where(#appContent, .portal-content) table.ui-table :where(td.ui-table-actions-cell, td:last-child) :where( .ui-action-soft-danger, .ui-action-danger[class~="bg-rose-50"], .ui-action-danger[class~="border-rose-200"] ) { background: rgba(255, 241, 242, 0.96) !important; border-color: rgba(254, 205, 211, 0.98) !important; color: rgb(190, 18, 60) !important; } .dark :where(#appContent, .portal-content) table.ui-table :where(td.ui-table-actions-cell, td:last-child) :where( .ui-action-soft-danger, .ui-action-danger[class~="bg-rose-50"], .ui-action-danger[class~="border-rose-200"] ) { background: rgba(76, 5, 25, 0.42) !important; border-color: rgba(244, 63, 94, 0.38) !important; color: rgb(254, 205, 211) !important; } :where(#appContent, .portal-content) table.ui-table td.ui-table-actions-cell, :where(#appContent, .portal-content) table.ui-table td:last-child { min-width: max-content !important; } :where(#appContent, .portal-content) table.ui-table td.ui-table-actions-cell > :where(.flex, .inline-flex), :where(#appContent, .portal-content) table.ui-table td:last-child > :where(.flex, .inline-flex) { justify-content: flex-end !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.35rem !important; } /* Make production helper/callout copy look intentional rather than like stray notes when it appears beside forms. */ :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium) :where(.text-\[11px\], .text-\[12px\]).text-slate-500, :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium) :where(.text-\[11px\], .text-\[12px\]).text-slate-600 { line-height: 1.45 !important; } /* ========================================================= Final desktop header/action consistency override ========================================================= Desktop page headers must not inherit phone/tablet action-grid behavior. At 1025px+ keep the title on the left and keep menu/action buttons compact on the right. This fixes wide full-row bars on Locker Management, Class Schedule, Settings and keeps Communication tabs aligned consistently across all Communication sub-pages. */ @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) > .ui-page-header { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 1rem !important; width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :first-child, :where(#appContent, .portal-content) > .ui-page-header > :first-child { flex: 1 1 18rem !important; width: auto !important; max-width: 30rem !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child, :where(#appContent, .portal-content) > .ui-page-header > :last-child, :where(#appContent, .portal-content) .ui-header-action-stack { flex: 0 1 auto !important; width: auto !important; max-width: min(64rem, 100%) !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; align-content: flex-start !important; gap: 0.55rem !important; overflow: visible !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child > *, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child > *, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child > *, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child > *, :where(#appContent, .portal-content) > .ui-page-header > :last-child > * { flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where( .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid, .ui-section-nav, .ui-module-tabs ) { flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.55rem !important; overflow: visible !important; padding: 0 !important; } :where(#appContent, .portal-content) :where(.ui-section-nav, .ui-module-tabs) > :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll) { width: auto !important; max-width: 100% !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) :where( .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid ) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab), :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 2.25rem !important; white-space: nowrap !important; justify-content: center !important; text-align: center !important; } /* Keep extra badges/secondary action rows in Communication compact rather than forcing them below or across the full header width. */ :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child .flex.flex-wrap, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child .flex.flex-wrap, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child .flex.flex-wrap { width: auto !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.55rem !important; } } /* Stronger desktop override for headers that contain section/module navs. This intentionally beats older section-header grid rules. */ @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { #appContent > .flex.mb-3:has(.ui-section-nav), #appContent > .flex.mb-4:has(.ui-section-nav), #appContent > .flex.mb-5:has(.ui-section-nav), #appContent > .flex.mb-6:has(.ui-section-nav), #appContent > .flex.mb-3:has(.ui-module-tabs), #appContent > .flex.mb-4:has(.ui-module-tabs), #appContent > .flex.mb-5:has(.ui-module-tabs), #appContent > .flex.mb-6:has(.ui-module-tabs) { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 1rem !important; } #appContent > .flex.mb-3:has(.ui-section-nav) > :first-child, #appContent > .flex.mb-4:has(.ui-section-nav) > :first-child, #appContent > .flex.mb-5:has(.ui-section-nav) > :first-child, #appContent > .flex.mb-6:has(.ui-section-nav) > :first-child, #appContent > .flex.mb-3:has(.ui-module-tabs) > :first-child, #appContent > .flex.mb-4:has(.ui-module-tabs) > :first-child, #appContent > .flex.mb-5:has(.ui-module-tabs) > :first-child, #appContent > .flex.mb-6:has(.ui-module-tabs) > :first-child { flex: 1 1 18rem !important; width: auto !important; max-width: 30rem !important; min-width: 0 !important; } #appContent > .flex.mb-3:has(.ui-section-nav) > :last-child, #appContent > .flex.mb-4:has(.ui-section-nav) > :last-child, #appContent > .flex.mb-5:has(.ui-section-nav) > :last-child, #appContent > .flex.mb-6:has(.ui-section-nav) > :last-child, #appContent > .flex.mb-3:has(.ui-module-tabs) > :last-child, #appContent > .flex.mb-4:has(.ui-module-tabs) > :last-child, #appContent > .flex.mb-5:has(.ui-module-tabs) > :last-child, #appContent > .flex.mb-6:has(.ui-module-tabs) > :last-child { flex: 0 1 auto !important; width: auto !important; max-width: min(64rem, 100%) !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.55rem !important; } } /* ========================================================= Member portal final consistency pass - Compact footer - Consistent glass headers/cards/actions - Safer mobile/tablet content grids - QR links open a dedicated page/new tab from nav ========================================================= */ .portal-shell { background: radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.12), transparent 28rem), radial-gradient(circle at 94% 16%, rgba(59, 130, 246, 0.10), transparent 30rem), linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.96) 100%); } .dark .portal-shell { background: radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.12), transparent 28rem), radial-gradient(circle at 94% 16%, rgba(37, 99, 235, 0.12), transparent 30rem), linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%); } .portal-content { width: 100%; max-width: 1180px; margin-inline: auto; } /* Member portal footer should feel like the staff shell footer, not a large block. */ .portal-shell footer { margin-top: 1rem !important; background: rgba(255, 255, 255, 0.48) !important; border-top-color: rgba(203, 213, 225, 0.65) !important; } .portal-shell footer > div { padding-block: 0.45rem !important; } .portal-shell .footer-brand { border-radius: 0.9rem !important; padding: 0.35rem !important; box-shadow: none !important; ring-offset-width: 1px !important; } .portal-shell .footer-brand-img { height: 1.05rem !important; } @media (min-width: 768px){ .portal-shell .footer-brand-img { height: 1.2rem !important; } } .dark .portal-shell footer { background: rgba(2, 6, 23, 0.38) !important; border-top-color: rgba(51, 65, 85, 0.78) !important; } /* Portal topbar: keep branding and menu compact, polished and consistent. */ .portal-shell > header { background: rgba(248, 250, 252, 0.84) !important; backdrop-filter: blur(16px) saturate(1.1); } .portal-shell > header img[alt="Gym logo"] { background: transparent !important; border-color: rgba(203, 213, 225, 0.7) !important; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); } .portal-shell > header nav a { min-height: 2.25rem; white-space: nowrap; } @media (min-width: 641px) { .portal-shell > header nav { justify-content: center !important; gap: 0.45rem !important; } } @media (max-width: 767.98px) { .portal-shell > header .truncate { max-width: min(58vw, 18rem); } } /* Page headers in portal: match the premium staff/admin page header language. */ .portal-content > :where(.flex).mb-3:has(h1), .portal-content > :where(.flex).mb-4:has(h1), .portal-content > :where(.flex).mb-5:has(h1), .portal-content > :where(.flex).mb-6:has(h1), .portal-content > .ui-page-header { border: 1px solid rgba(203, 213, 225, 0.72) !important; border-radius: 1.25rem !important; padding: 1rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(239, 246, 255, 0.58)), radial-gradient(circle at 10% 0%, rgba(125, 211, 252, 0.18), transparent 20rem) !important; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important; } .dark .portal-content > :where(.flex).mb-3:has(h1), .dark .portal-content > :where(.flex).mb-4:has(h1), .dark .portal-content > :where(.flex).mb-5:has(h1), .dark .portal-content > :where(.flex).mb-6:has(h1), .dark .portal-content > .ui-page-header { border-color: rgba(51, 65, 85, 0.88) !important; background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.64)), radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.12), transparent 20rem) !important; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24) !important; } .portal-content h1 { letter-spacing: -0.03em; } .portal-content h1 + p, .portal-content h1 ~ p { max-width: 48rem; line-height: 1.45; } /* Keep header actions clean: desktop compact right side, mobile two-column grid. */ .portal-content > :where(.flex).mb-3:has(h1) > :last-child, .portal-content > :where(.flex).mb-4:has(h1) > :last-child, .portal-content > :where(.flex).mb-5:has(h1) > :last-child, .portal-content > :where(.flex).mb-6:has(h1) > :last-child { gap: 0.55rem !important; } @media (max-width: 640px) { .portal-content > :where(.flex).mb-3:has(h1), .portal-content > :where(.flex).mb-4:has(h1), .portal-content > :where(.flex).mb-5:has(h1), .portal-content > :where(.flex).mb-6:has(h1) { padding: 0.85rem !important; } .portal-content > :where(.flex).mb-3:has(h1) > :last-child, .portal-content > :where(.flex).mb-4:has(h1) > :last-child, .portal-content > :where(.flex).mb-5:has(h1) > :last-child, .portal-content > :where(.flex).mb-6:has(h1) > :last-child { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .portal-content > :where(.flex).mb-3:has(h1) > :last-child > :only-child, .portal-content > :where(.flex).mb-4:has(h1) > :last-child > :only-child, .portal-content > :where(.flex).mb-5:has(h1) > :last-child > :only-child, .portal-content > :where(.flex).mb-6:has(h1) > :last-child > :only-child, .portal-content > :where(.flex).mb-3:has(h1) > :last-child > :last-child:nth-child(odd), .portal-content > :where(.flex).mb-4:has(h1) > :last-child > :last-child:nth-child(odd), .portal-content > :where(.flex).mb-5:has(h1) > :last-child > :last-child:nth-child(odd), .portal-content > :where(.flex).mb-6:has(h1) > :last-child > :last-child:nth-child(odd) { grid-column: 1 / -1; } .portal-content > :where(.flex).mb-3:has(h1) > :last-child > :where(a, button), .portal-content > :where(.flex).mb-4:has(h1) > :last-child > :where(a, button), .portal-content > :where(.flex).mb-5:has(h1) > :last-child > :where(a, button), .portal-content > :where(.flex).mb-6:has(h1) > :last-child > :where(a, button) { width: 100% !important; justify-content: center !important; } } /* Cards and stat blocks: consistent with the staff shell cards. */ .portal-shell .ui-card, .portal-shell .ui-card-premium, .portal-shell .rounded-2xl.bg-white:not(.portal-bottom-nav):not(.portal-qr-box) { border-color: rgba(203, 213, 225, 0.74) !important; background: rgba(255, 255, 255, 0.88) !important; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important; } .dark .portal-shell .ui-card, .dark .portal-shell .ui-card-premium, .dark .portal-shell .rounded-2xl.bg-white:not(.portal-bottom-nav):not(.portal-qr-box) { border-color: rgba(51, 65, 85, 0.88) !important; background: rgba(15, 23, 42, 0.78) !important; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22) !important; } .portal-shell .ui-card :where(.text-2xl, .text-xl) { overflow-wrap: anywhere; } .portal-shell .grid > .ui-card, .portal-shell .grid > .ui-card-premium { min-width: 0; } /* Portal dashboard quick actions should not feel cramped or uneven. */ .portal-quick-tile { min-height: 4.35rem; border-color: rgba(203, 213, 225, 0.78) !important; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.86)) !important; } .portal-quick-tile .ui-icon { width: 1.25rem !important; height: 1.25rem !important; } @media (max-width: 390px) { .portal-quick-label { font-size: 10px; } .portal-quick-tile { padding-inline: 0.35rem; } } /* Member portal mobile bottom nav: smaller, consistent footer-like height. */ .portal-bottom-nav { padding: 6px 10px calc(8px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08); } .portal-nav-item { padding: 6px 5px !important; border-radius: 14px !important; gap: 1px !important; } .portal-nav-item .portal-nav-icon .ui-icon, .portal-nav-item .portal-nav-icon svg { width: 1.15rem !important; height: 1.15rem !important; } .portal-nav-label { font-size: 9.5px !important; } @media (max-width: 640px){ .portal-content{ padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; } } /* Portal tables/forms: preserve staff/admin consistency. */ .portal-shell .ui-table-wrap { border-radius: 1.15rem !important; background: rgba(255,255,255,0.9); } .portal-shell table.ui-table th, .portal-shell table.ui-table td { vertical-align: middle; } .portal-shell form :where(input, select, textarea), .portal-shell .ui-control { min-height: 2.5rem; } @media (max-width: 640px) { .portal-shell form :where(input, select, textarea), .portal-shell .ui-control { min-height: 2.75rem; } } /* QR pages opened from nav are dedicated scan/print surfaces. */ a[target="_blank"][href*="/portal/card"]::after { content: ""; } /* ========================================================= Member portal compact page spacing fix ========================================================= Portal subpages such as Progress should never render a huge empty glass panel with only a Back button. These explicit classes keep portal page headers compact and give empty states a consistent small card. */ .portal-content > .portal-page { width: 100%; max-width: 1180px; margin-inline: auto; } .portal-page-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 1rem !important; min-height: 0 !important; height: auto !important; padding: 1rem !important; border: 1px solid rgba(203, 213, 225, 0.72) !important; border-radius: 1.25rem !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 246, 255, 0.58)), radial-gradient(circle at 10% 0%, rgba(125, 211, 252, 0.14), transparent 18rem) !important; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important; } .dark .portal-page-header { border-color: rgba(51, 65, 85, 0.88) !important; background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.64)), radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.12), transparent 18rem) !important; } .portal-page-header > :first-child { min-width: 0 !important; } .portal-page-header > :last-child { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; flex: 0 0 auto !important; } .portal-empty-state { border: 1px dashed rgba(148, 163, 184, 0.55); border-radius: 1rem; background: rgba(248, 250, 252, 0.78); padding: 0.85rem; } .dark .portal-empty-state { border-color: rgba(71, 85, 105, 0.78); background: rgba(15, 23, 42, 0.54); } .portal-empty-title { color: #0f172a; font-weight: 700; font-size: 0.875rem; } .dark .portal-empty-title { color: #f8fafc; } .portal-empty-copy { color: #64748b; font-size: 0.78rem; line-height: 1.45; margin-top: 0.25rem; } .dark .portal-empty-copy { color: #cbd5e1; } @media (max-width: 640px) { .portal-page-header { flex-direction: column !important; align-items: stretch !important; padding: 0.85rem !important; } .portal-page-header > :last-child { width: 100% !important; justify-content: stretch !important; } .portal-page-header > :last-child > :where(a, button) { width: 100% !important; justify-content: center !important; } } /* ========================================================= Member portal full compact-spacing guardrail ========================================================= Applies the compact portal page-header language to all member portal subpages, including invoices/bookings/waivers/security. This prevents legacy flex headers from becoming oversized empty panels and keeps Back actions close to the page title/content. */ .portal-shell .portal-page-header { margin-bottom: 1rem !important; min-height: 0 !important; height: auto !important; flex-wrap: wrap !important; align-content: flex-start !important; } .portal-shell .portal-page-header > :first-child { flex: 1 1 18rem !important; min-width: 0 !important; } .portal-shell .portal-page-header > :last-child { align-self: flex-start !important; } .portal-shell .portal-page-header > :where(a, button), .portal-shell .portal-page-header > :last-child > :where(a, button) { min-height: 2.35rem !important; } .portal-shell .portal-page-header + :where(.ui-card, .ui-card-premium, .grid, form, .rounded-2xl) { margin-top: 0 !important; } .portal-shell .portal-empty-state { min-height: 0 !important; height: auto !important; margin-bottom: 0 !important; } .portal-shell .portal-empty-state + .portal-empty-state { margin-top: 0.5rem !important; } .portal-shell .portal-content > :where(.flex).mb-3:has(h1), .portal-shell .portal-content > :where(.flex).mb-4:has(h1), .portal-shell .portal-content > :where(.flex).mb-5:has(h1), .portal-shell .portal-content > :where(.flex).mb-6:has(h1) { min-height: 0 !important; height: auto !important; align-items: flex-start !important; align-content: flex-start !important; } .portal-shell .portal-content > :where(.flex).mb-3:has(h1) > :last-child, .portal-shell .portal-content > :where(.flex).mb-4:has(h1) > :last-child, .portal-shell .portal-content > :where(.flex).mb-5:has(h1) > :last-child, .portal-shell .portal-content > :where(.flex).mb-6:has(h1) > :last-child { align-self: flex-start !important; } @media (max-width: 640px) { .portal-shell .portal-page-header > :first-child, .portal-shell .portal-page-header > :last-child { width: 100% !important; flex: 1 1 auto !important; } } /* ========================================================= Member portal desktop footer/nav corrections ========================================================= The mobile bottom tab bar must never appear on tablet/desktop. Earlier portal polish rules set .portal-bottom-nav to display:flex globally, which overrode Tailwind's sm:hidden at large widths. Keep the app-like bottom nav mobile-only while letting the member footer use the shared staff footer UI. */ .portal-profile-page { width: 100%; } .portal-profile-page > .portal-page-header { margin-bottom: 1rem !important; } /* Mobile tab bar: hidden by default, shown only below 640px. */ .portal-bottom-nav { display: none !important; } @media (max-width: 640px) { .portal-bottom-nav { display: flex !important; } } @media (min-width: 641px) { .portal-bottom-nav, .portal-shell .portal-bottom-nav { display: none !important; } .portal-shell .portal-content { padding-bottom: 1.25rem !important; } .portal-shell .pwa-install-btn { display: none !important; } } /* Member portal uses the same footer partial/styles as the staff shell. On phones, leave room for the fixed portal tab bar so the footer is not covered. */ @media (max-width: 640px) { .portal-shell footer { margin-bottom: calc(82px + env(safe-area-inset-bottom)) !important; } } /* Ensure portal pages take the same available content width as other portal screens. */ .portal-content > .portal-page, .portal-profile-page, .portal-shell .portal-content > :where(.portal-page, .portal-profile-page) { max-width: 100% !important; width: 100%; margin-inline: 0 !important; } /* ========================================================= Member portal polish: staff-sized footer + profile typography ========================================================= The member portal uses the same shared footer partial as the staff portal. These rules deliberately keep the footer compact and add hard caps so the footer logo cannot render at its natural image size on member/public PWA screens if Tailwind utilities are unavailable or cached. */ .app-footer, .portal-shell .app-footer, .auth-public-shell .app-footer { flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; margin-top: auto !important; border-top-width: 1px !important; } .app-footer .app-footer-inner, .portal-shell .app-footer .app-footer-inner, .auth-public-shell .app-footer .app-footer-inner { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .app-footer .footer-brand, .portal-shell .app-footer .footer-brand, .auth-public-shell .app-footer .footer-brand { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0.375rem !important; border-radius: 0.75rem !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important; } .app-footer .footer-brand-img, .portal-shell .app-footer .footer-brand-img, .auth-public-shell .app-footer .footer-brand-img { display: block !important; width: auto !important; height: 1.25rem !important; max-height: 1.25rem !important; max-width: min(13rem, 78vw) !important; object-fit: contain !important; aspect-ratio: auto !important; } @media (min-width: 768px) { .app-footer .footer-brand-img, .portal-shell .app-footer .footer-brand-img, .auth-public-shell .app-footer .footer-brand-img { height: 1.5rem !important; max-height: 1.5rem !important; } } @media (max-width: 640px) { .portal-shell .app-footer { margin-bottom: calc(82px + env(safe-area-inset-bottom)) !important; } } .auth-public-shell .app-footer { margin-top: 0 !important; } /* Keep portal page titles/body copy consistent, including Profile. */ .ui-polish-v3 .portal-content .portal-page-header h1 { font-size: 1.125rem !important; line-height: 1.75rem !important; font-weight: 600 !important; letter-spacing: -0.025em !important; } @media (min-width: 768px) { .ui-polish-v3 .portal-content .portal-page-header h1 { font-size: 1.25rem !important; line-height: 1.75rem !important; } } .ui-polish-v3 .portal-content .portal-page-header p { font-size: 12px !important; line-height: 1.35 !important; margin-top: 0.125rem !important; } /* The profile form should use the shared ui_input()/ui_label() sizes. Avoid page-specific overrides so it matches the rest of the member portal. */ .ui-polish-v3 .portal-profile-page :where(input, select, textarea, button, a) { font-family: inherit !important; } /* ========================================================= Footer compact hard cap v4 ========================================================= */ .app-footer { flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; max-height: 3.75rem !important; overflow: hidden !important; margin-top: auto !important; } .app-footer .app-footer-inner { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; height: auto !important; max-height: 3.75rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .app-footer .footer-brand { box-sizing: border-box !important; width: 14rem !important; max-width: 78vw !important; height: 2.35rem !important; max-height: 2.35rem !important; min-width: 0 !important; min-height: 0 !important; padding: 0.25rem 0.5rem !important; border-radius: 0.75rem !important; overflow: hidden !important; line-height: 1 !important; } .app-footer .footer-brand-logo { display: block !important; width: 13rem !important; max-width: 100% !important; height: 1.6rem !important; max-height: 1.6rem !important; min-width: 0 !important; min-height: 0 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; line-height: 1 !important; overflow: hidden !important; } .app-footer .footer-brand-img { width: 13rem !important; max-width: 100% !important; height: 1.6rem !important; max-height: 1.6rem !important; object-fit: contain !important; } @media (max-width: 640px) { .portal-shell .app-footer { margin-bottom: calc(82px + env(safe-area-inset-bottom)) !important; } .auth-public-shell .app-footer { margin-bottom: 0 !important; } } /* ========================================================= v8: Tablet-desktop header gap fix (1025-1279px) ========================================================= In this desktop-start band, the remaining content column is still tablet-sized. Treat module/page headers as compact stacked headers so action rows do not reserve a wide desktop column or create a large empty band above tabs/tables. */ @media (min-width: 1025px) and (max-width: 1279.98px) { :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) > .ui-page-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; align-content: flex-start !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin-bottom: 1rem !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :first-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :first-child, :where(#appContent, .portal-content) > .ui-page-header > :first-child { flex: 0 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child, :where(#appContent, .portal-content) > .ui-page-header > :last-child, :where(#appContent, .portal-content) .ui-header-action-stack { flex: 0 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; align-content: flex-start !important; gap: 0.55rem !important; overflow: visible !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child > *, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child > *, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child > *, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child > *, :where(#appContent, .portal-content) > .ui-page-header > :last-child > * { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.ui-section-nav, .ui-module-tabs), :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll) { width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; } } /* ========================================================= v9 intermediate-width layout stability pass ========================================================= 768px-1279px is a hybrid band: Tailwind md/lg grids are active, and from 1025px the fixed desktop sidebar is also active. Many module screens still have less usable content width than a real desktop, so desktop 12-column filters and right-aligned action rows can squeeze or overflow. Keep headers and filter forms fluid in this band, then let the desktop rules take over at 1280px. */ @media (min-width: 768px) and (max-width: 1279.98px) { :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) > .ui-page-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > *, :where(#appContent, .portal-content) > .ui-page-header > * { flex: 0 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where( .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid ), :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child, :where(#appContent, .portal-content) > .ui-page-header > :last-child { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; align-content: flex-start !important; gap: 0.55rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } :where(#appContent, .portal-content) :where( .ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid ) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab) { flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: min(7rem, 100%) !important; min-height: 2.25rem !important; white-space: nowrap !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) :where(.ui-section-nav, .ui-module-tabs) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block !important; } /* Override md/lg col-span utilities inside filter forms. Those utilities are correct on wide desktops, but in this hybrid band they make inputs span a desktop 12-column grid and leave tiny columns for selects/buttons. */ :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) > * { grid-column: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) > :where([class*="col-span-12"], .ui-filter-full) { grid-column: 1 / -1 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) :where(label) { display: block !important; max-width: 100% !important; min-width: 0 !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) :where(input, select, textarea, .ui-control) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) > :where(.flex, .inline-flex):has(> button, > a, > input[type="submit"], > input[type="button"]) { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.55rem !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off]) > :where(.flex, .inline-flex):has(> button, > a, > input[type="submit"], > input[type="button"]) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; } } /* Restore compact right-aligned desktop headers only after the content column has enough space for them. */ @media (min-width: 1280px) { :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child, :where(#appContent, .portal-content) > .ui-page-header > :last-child, :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-section-actions, .ui-module-tabs-scroll, .ui-mobile-action-grid) { justify-content: flex-end !important; } } /* ========================================================= v10 pre-production responsive guardrails ========================================================= These rules are intentionally last in the cascade. They protect the app's constrained width range where tablet layouts and the desktop sidebar can overlap: 768px through 1279px. The goal is to keep shared headers, tabs, filters, side panels and action groups readable across modules without needing page-by-page CSS patches. */ :where(#appContent, .portal-content), :where(#appContent, .portal-content) * { box-sizing: border-box; } :where(#appContent, .portal-content) :where(.grid, .flex, .inline-flex, .ui-card, .ui-card-premium, .rounded-2xl, form, fieldset) { min-width: 0; } :where(#appContent, .portal-content) :where(input, select, textarea, button, a, .ui-control, .form-field) { max-width: 100%; } :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) :where(.truncate, .min-w-0, p, h1, h2, h3, h4, h5, h6) { min-width: 0; } /* Prevent very long names, email addresses, references and notes from forcing cards wider than the available page width. Tables keep their horizontal scrolling behavior through .ui-table-wrap rules below. */ :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, .portal-page-header, .ui-page-header) :where(p, span, div, dd, dt, li):not(.whitespace-nowrap) { overflow-wrap: anywhere; } /* All scrollable table/card wrappers must fit the visible content column and scroll internally instead of pushing the entire page sideways. */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .overflow-x-auto, .overflow-auto) { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; } @media (min-width: 768px) and (max-width: 1279.98px) { /* Final override after desktop header rules: in this range, page headers and their action groups stack/wrap cleanly instead of acting like wide desktop. */ :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) > .ui-page-header, :where(#appContent, .portal-content) .portal-page-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > *, :where(#appContent, .portal-content) > .ui-page-header > *, :where(#appContent, .portal-content) .portal-page-header > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child, :where(#appContent, .portal-content) > .ui-page-header > :last-child, :where(#appContent, .portal-content) .portal-page-header > :last-child, :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-header-action-stack, .ui-section-actions, .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll, .ui-mobile-action-grid) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; align-content: flex-start !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; white-space: normal !important; } :where(#appContent, .portal-content) :where(.ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll) { padding-bottom: 0.1rem !important; } :where(#appContent, .portal-content) :where(.ui-header-actions, .ui-header-action-stack, .ui-section-actions, .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll, .ui-mobile-action-grid) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab), :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 6.25rem !important; min-height: 2.25rem !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } /* Filters and search forms: make the actual controls fluid, not tiny fixed md/lg column fragments. This protects Leads, Reports, Billing, Settings, Resources and similar modules. */ :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off="1"]) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)) !important; align-items: end !important; gap: 0.7rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off="1"]) > *, :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off="1"]) > [class*="col-span"], :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off="1"]) > [class*="md:col-span"], :where(#appContent, .portal-content) form[data-ui-filters="1"]:not([data-ui-filterbar-off="1"]) > [class*="lg:col-span"] { grid-column: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"] :where(input, select, textarea, .ui-control, .form-field) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"] :where(.w-72, .w-80, .w-96, [class*="w-\["], [class*="min-w-\["], [class*="max-w-\["]) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"] > :where(.flex, .inline-flex):has(> a, > button, > input[type="submit"], > input[type="button"]) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"] > :where(.flex, .inline-flex):has(> a, > button, > input[type="submit"], > input[type="button"]) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 1 auto !important; min-width: 6rem !important; justify-content: center !important; } /* Any filter/control row inside a card that still uses a raw flex layout gets room to wrap. This catches older screens not yet converted to ui classes. */ :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-center.justify-between, :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-start.justify-between { flex-wrap: wrap !important; align-items: flex-start !important; gap: 0.75rem !important; } :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-center.justify-between > *, :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-start.justify-between > * { min-width: 0 !important; } /* Narrow desktop layouts with sidebar/form columns should wait for 1280px before splitting. This prevents squeezed left sidebars on Resources, Cashbook, Lockers, PT, POS and reports detail screens. */ :where(#appContent, .portal-content) .grid[class*="lg:grid-cols-"]:has(> [class*="lg:col-span-"]), :where(#appContent, .portal-content) .grid[class*="xl:grid-cols-"]:has(> [class*="xl:col-span-"]) { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) :where([class*="lg:col-span-"], [class*="xl:col-span-"]) { grid-column: auto !important; } /* Do not let fixed-width helper controls stretch the page in the middle range; they may be full-width inside their parent instead. */ :where(#appContent, .portal-content) :where(.w-72, .w-80, .w-96, [class*="w-\["], [class*="min-w-\["], [class*="max-w-\["]) { max-width: 100% !important; } /* Header cards/stat grids should choose usable cards, not too many narrow columns. */ :where(#appContent, .portal-content) .grid[class*="md:grid-cols-"]:has(> :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"])) { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)) !important; } } @media (max-width: 767.98px) { /* Phone and small tablet: filters become a single readable column and action buttons can expand to full width. */ :where(#appContent, .portal-content) form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.65rem !important; width: 100% !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"] > *, :where(#appContent, .portal-content) form[data-ui-filters="1"] :where(input, select, textarea, .ui-control, .form-field) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"] > :where(.flex, .inline-flex):has(> a, > button, > input[type="submit"], > input[type="button"]) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)) !important; gap: 0.5rem !important; width: 100% !important; } :where(#appContent, .portal-content) form[data-ui-filters="1"] > :where(.flex, .inline-flex):has(> a, > button, > input[type="submit"], > input[type="button"]) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; justify-content: center !important; } } @media (min-width: 1280px) { /* Wide desktop can keep compact right-aligned module navigation. */ :where(#appContent, .portal-content) .ui-filterbar-right, :where(#appContent, .portal-content) .ui-header-actions, :where(#appContent, .portal-content) .ui-header-action-stack, :where(#appContent, .portal-content) .ui-section-actions, :where(#appContent, .portal-content) .ui-section-nav, :where(#appContent, .portal-content) .ui-module-tabs, :where(#appContent, .portal-content) .ui-module-tabs-scroll { min-width: 0; } } /* ========================================================= v11 intermediate-width card/header stability patch ========================================================= Keep compact card labels readable in the 768px-1279px range. The v10 guardrails intentionally allow card header rows to wrap, but paired with the global `overflow-wrap:anywhere` rule they can make short labels split one character per line when cards become narrow. These final overrides preserve wrapping for action-heavy headers while preventing title/label text from breaking inside words. Dashboard KPI/widget cards get a stronger no-wrap treatment because their labels are fixed short headings. */ @media (min-width: 768px) and (max-width: 1279.98px) { /* Generic card headers across modules: wrap the row if needed, but never break headings/labels character-by-character. */ :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-center.justify-between > :first-child, :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-start.justify-between > :first-child, :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-center.justify-between > :first-child :where(h1, h2, h3, h4, h5, h6, .text-xs, .text-sm, .text-\[11px\]), :where(#appContent, .portal-content) :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) > :where(.flex).items-start.justify-between > :first-child :where(h1, h2, h3, h4, h5, h6, .text-xs, .text-sm, .text-\[11px\]) { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } /* Dashboard urgent widget row: use card widths that can hold the heading and keep the icon as a fixed, non-shrinking column. */ [data-dashboard="1"] #dashWidgetGrid { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important; } [data-dashboard="1"] #dashWidgetGrid > [data-widget-id] { min-width: 0 !important; min-height: 7.25rem !important; overflow: hidden !important; } [data-dashboard="1"] #dashWidgetGrid > [data-widget-id] > .flex:first-child { display: grid !important; grid-template-columns: minmax(0, 1fr) 2rem !important; align-items: center !important; justify-content: stretch !important; gap: 0.5rem !important; flex-wrap: nowrap !important; } [data-dashboard="1"] #dashWidgetGrid > [data-widget-id] > .flex:first-child > :first-child { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } [data-dashboard="1"] #dashWidgetGrid > [data-widget-id] > .flex:first-child > :last-child { width: 2rem !important; min-width: 2rem !important; max-width: 2rem !important; height: 2rem !important; flex: 0 0 2rem !important; justify-self: end !important; } /* Dashboard main KPI cards use the same title/icon pattern. */ [data-dashboard="1"] [data-kpi-grid="1"] [data-kpi-id] > .flex:first-child { flex-wrap: nowrap !important; align-items: center !important; } [data-dashboard="1"] [data-kpi-grid="1"] [data-kpi-id] > .flex:first-child > :first-child, [data-dashboard="1"] [data-kpi-grid="1"] [data-kpi-id] > .flex:first-child > :first-child > :first-child { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } [data-dashboard="1"] [data-kpi-grid="1"] [data-kpi-id] > .flex:first-child > :last-child { flex: 0 0 auto !important; } } @media (min-width: 1280px) { [data-dashboard="1"] #dashWidgetGrid > [data-widget-id] > .flex:first-child > :first-child, [data-dashboard="1"] [data-kpi-grid="1"] [data-kpi-id] > .flex:first-child > :first-child > :first-child { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } } /* ========================================================= v12 full-project responsive hardening pass ========================================================= Implements the responsive audit across modules: safe labels/titles, controlled token wrapping, auto-fit grids, shared filter/card/table patterns, and viewport-specific protections for phones, tablets and ultra-wide screens. */ .ui-text-safe{min-width:0;overflow-wrap:break-word!important;word-break:normal!important;hyphens:auto} .ui-label-safe,.ui-title-safe,.ui-button-label,.ui-card-title,.ui-kpi-title{min-width:0;overflow-wrap:normal!important;word-break:normal!important;hyphens:manual!important} .ui-truncate-safe{min-width:0;max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important} .ui-token-break{min-width:0;overflow-wrap:anywhere!important;word-break:normal!important} :where(#appContent,.portal-content,.portal-shell) :where(label,legend,summary,button,a.inline-flex,.ui-action-control,.ui-filterbar-btn,.ui-dt-btn,.ui-badge,.ui-filterbar-badge,.ui-filterbar-chip,.portal-nav-label,.nav-link,.nav-section-btn,h1,h2,h3,h4,h5,h6,.ui-label-safe,.ui-title-safe,.ui-button-label,.ui-card-title,.ui-kpi-title):not(.ui-token-break){overflow-wrap:normal!important;word-break:normal!important;hyphens:manual!important} :where(#appContent,.portal-content,.portal-shell) :where(p,dd,li,.text-slate-500,.text-slate-600,.text-slate-700,.ui-card-subtitle,.ui-action-tile-desc):not(.ui-label-safe):not(.ui-title-safe):not(.ui-truncate-safe):not(.ui-token-break){overflow-wrap:break-word;word-break:normal} :where(#appContent,.portal-content,.portal-shell) :where([href^="mailto:"],[data-token],.email,.filename,.file-name,.invoice-no,.reference,code,pre,td.ui-token-break,th.ui-token-break){overflow-wrap:anywhere!important;word-break:normal!important} .ui-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;min-width:0;max-width:100%} .ui-card-header>:first-child,.ui-card-header-main{min-width:0;flex:1 1 auto;max-width:100%} .ui-card-actions,.ui-section-actions,.ui-header-actions,.ui-table-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%} .ui-card-actions,.ui-header-actions,.ui-section-actions{justify-content:flex-end;flex:0 1 auto}.ui-card-title{font-weight:700;line-height:1.2}.ui-card-subtitle{min-width:0;overflow-wrap:break-word;word-break:normal} @media (max-width:560px){.ui-card-header{flex-direction:column!important;align-items:stretch!important}.ui-card-actions,.ui-header-actions,.ui-section-actions{justify-content:flex-start!important;width:100%}.ui-card-actions>:where(a,button,input[type="submit"],input[type="button"],.ui-action-control),.ui-header-actions>:where(a,button,input[type="submit"],input[type="button"],.ui-action-control),.ui-section-actions>:where(a,button,input[type="submit"],input[type="button"],.ui-action-control){flex:1 1 min(11rem,100%);justify-content:center}} .ui-auto-grid-xs{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr))!important;gap:.65rem}.ui-auto-grid-sm{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))!important;gap:.75rem}.ui-auto-grid-md{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))!important;gap:1rem}.ui-auto-grid-lg{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))!important;gap:1rem}.ui-auto-grid-fill{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ui-grid-min,14rem)),1fr))!important}.ui-auto-grid-xs>*,.ui-auto-grid-sm>*,.ui-auto-grid-md>*,.ui-auto-grid-lg>*,.ui-auto-grid-fill>*{min-width:0} .ui-filter-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))!important;gap:.75rem!important;align-items:end!important;width:100%;min-width:0;max-width:100%}.ui-filter-grid>*,.ui-filter-grid :where(label,.ui-field,.form-field,input,select,textarea,.ui-control){min-width:0!important;max-width:100%!important}.ui-filter-grid :where(input,select,textarea,.form-field,.ui-control){width:100%!important}.ui-filter-grid>:where(.flex,.inline-flex):has(:where(button,a,input[type="submit"],input[type="button"])){flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:.5rem!important}.ui-filter-grid>:where(.flex,.inline-flex):has(:where(button,a,input[type="submit"],input[type="button"]))>:where(button,a,input[type="submit"],input[type="button"],.ui-action-control){flex:1 1 min(8.5rem,100%);justify-content:center}@media (min-width:900px){.ui-filter-grid>.ui-filter-full{grid-column:1/-1}} .ui-table-wrap,.ui-responsive-table-wrap,.ui-map-scroll,.ui-kanban-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto!important;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.ui-table-wrap>table:not([data-responsive-off]),.ui-responsive-table-wrap>table:not([data-responsive-off]){display:table!important;min-width:100%!important;max-width:none!important;table-layout:auto}.ui-table-actions-cell{width:1%;min-width:max-content!important;white-space:nowrap!important}.ui-table-actions-cell .ui-table-actions-row,.ui-table-actions-row{display:inline-flex!important;flex-wrap:nowrap!important;justify-content:flex-end;width:max-content;max-width:none;white-space:nowrap}.ui-table-actions-row>:where(a,button,form,input[type="submit"],input[type="button"],.ui-action-control){flex:0 0 auto}:where(#appContent,.portal-content) .ui-table :where(th,td){vertical-align:top}:where(#appContent,.portal-content) .ui-table :where(th,td) :where(.ui-truncate-safe){display:inline-block} @media (max-width:768px){.ui-table-wrap>table.ui-table:not([data-responsive-off]),.ui-responsive-table-wrap>table.ui-table:not([data-responsive-off]){min-width:max(48rem,100%)!important}.ui-table-wrap>table.ui-table.ui-table-compact-mobile:not([data-responsive-off]),.ui-responsive-table-wrap>table.ui-table.ui-table-compact-mobile:not([data-responsive-off]){min-width:max(36rem,100%)!important}} @media (max-width:420px){.ui-table-wrap>table.ui-table:not([data-responsive-off]),.ui-responsive-table-wrap>table.ui-table:not([data-responsive-off]){min-width:max(44rem,100%)!important}} @media (max-width:1279.98px){:where(#appContent,.portal-content) :where(.grid[class*="md:grid-cols-4"],.grid[class*="md:grid-cols-5"],.grid[class*="md:grid-cols-6"],.grid[class*="lg:grid-cols-4"],.grid[class*="lg:grid-cols-5"],.grid[class*="lg:grid-cols-6"]):not([data-ui-fixed-grid="1"]):not(.dashboard-cashflow-summary){grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))!important}:where(#appContent,.portal-content) :where(.grid[class*="md:grid-cols-4"],.grid[class*="md:grid-cols-5"],.grid[class*="md:grid-cols-6"],.grid[class*="lg:grid-cols-4"],.grid[class*="lg:grid-cols-5"],.grid[class*="lg:grid-cols-6"]):not([data-ui-fixed-grid="1"])>*{min-width:0!important}:where(#appContent,.portal-content) :where([class*="w-["],[class*="min-w-["],[class*="max-w["],[class*="max-w-["],.w-72,.w-80,.w-96){max-width:100%!important}:where(#appContent,.portal-content) :where(form,.ui-filter-grid,.ui-card-header,.ui-form-actions,.ui-dt-toolbar,.ui-filterbar) :where([class*="w-["],[class*="min-w-["],[class*="max-w-["],.w-72,.w-80,.w-96){width:100%!important;min-width:0!important}} @media (max-width:640px){:where(#appContent,.portal-content) .ui-responsive-action-row,:where(#appContent,.portal-content) :where(form,.ui-form-actions,.ui-card-header,.ui-filterbar,.ui-dt-toolbar) :where(.flex,.inline-flex):has(>:where(a,button,input[type="submit"],input[type="button"])){flex-wrap:wrap!important;max-width:100%}:where(#appContent,.portal-content) .ui-responsive-action-row>:where(a,button,input[type="submit"],input[type="button"],.ui-action-control){flex:1 1 min(10rem,100%);justify-content:center}:where(#appContent,.portal-content) :where(input,select,textarea,.form-field,.ui-control){max-width:100%}} [data-dashboard="1"] [data-kpi-grid="1"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))!important}[data-dashboard="1"] [data-kpi-id],[data-dashboard="1"] [data-widget-id]{min-width:0;overflow:hidden}[data-dashboard="1"] :where([data-kpi-id],[data-widget-id]) :where(.text-\[11px\],.text-xs,h1,h2,h3){overflow-wrap:normal!important;word-break:normal!important} :where(#appContent) :where([data-pos-sale],.pos-sale,.inventory-items-table,#itemsTable,#cartTable){min-width:0}:where(#appContent) :where(#itemsTable,#cartTable,table[id*="items" i],table[id*="cart" i]) :where(input,select,textarea){min-width:5rem} :where(#appContent) :where(.kanban,.kanban-board,[data-kanban],.locker-map,[data-locker-map]){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.portal-bottom-nav,.portal-nav-item{min-width:0}.portal-nav-label{display:block;max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}@media (max-width:360px){.portal-bottom-nav .portal-nav-label{font-size:.625rem!important}} .auth-public-shell,.auth-hero-card,.auth-form-card{max-width:100%;min-width:0}@media (max-width:767.98px){.auth-public-shell :where(.grid,.flex){min-width:0}} @media print{html,body{overflow:visible!important;max-width:none!important}.ui-table-wrap,.ui-responsive-table-wrap{overflow:visible!important}.ui-card-header{display:flex!important}.ui-filterbar,.ui-dt-toolbar,.no-print{display:none!important}} /* ========================================================= v13 sidebar-state + container-width responsive audit patch ========================================================= The admin shell loses 16rem of usable content when the desktop sidebar is expanded. Viewport-only breakpoints can misclassify intermediate-width screens as desktop even though the content column is tablet-sized. These rules make responsive decisions from the app content container and add a real, testable desktop collapsed sidebar state. */ html, body, #appShell, #appMain, #appContent, .portal-shell, .portal-content { max-width: 100%; min-width: 0; } html, body { overflow-x: hidden; } @supports (overflow: clip) { html, body, #appContent, .portal-content { overflow-x: clip; } } #appShell { --app-sidebar-width: 16rem; --app-sidebar-collapsed-width: 4.75rem; } #appMain { container-name: app-main; container-type: inline-size; } #appContent, .portal-content { container-name: app-content; container-type: inline-size; } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 641px) { #sidebar.app-sidebar { width: var(--app-sidebar-width, 16rem) !important; max-width: var(--app-sidebar-width, 16rem) !important; flex: 0 0 var(--app-sidebar-width, 16rem) !important; transition: width .18s ease, flex-basis .18s ease, max-width .18s ease, transform .18s ease !important; } #appShell.is-sidebar-collapsed { --app-sidebar-width: var(--app-sidebar-collapsed-width); } #appShell:not(.is-sidebar-collapsed) #sidebar .app-sidebar-close { display: inline-flex !important; } #appShell:not(.is-sidebar-collapsed) .app-topbar .app-sidebar-open { display: none !important; } #appShell.is-sidebar-collapsed .app-topbar .app-sidebar-open { display: inline-flex !important; } #appShell.is-sidebar-collapsed #sidebar .app-sidebar-inner { overflow-x: hidden !important; } #appShell.is-sidebar-collapsed #sidebar > .app-sidebar-inner > .px-4.py-3 { justify-content: center !important; padding-inline: .5rem !important; } #appShell.is-sidebar-collapsed #sidebar > .app-sidebar-inner > .px-4.py-3 a { justify-content: center !important; gap: 0 !important; min-width: 0 !important; } #appShell.is-sidebar-collapsed #sidebar > .app-sidebar-inner > .px-4.py-3 a > div, #appShell.is-sidebar-collapsed #sidebar > .app-sidebar-inner > .px-4.pb-2, #appShell.is-sidebar-collapsed #sidebar .app-sidebar-close { display: none !important; } #appShell.is-sidebar-collapsed #sidebar nav { padding-inline: .45rem !important; } #appShell.is-sidebar-collapsed #sidebar nav a.nav-link, #appShell.is-sidebar-collapsed #sidebar nav a.group { justify-content: center !important; gap: 0 !important; padding-inline: .45rem !important; width: 100% !important; min-width: 0 !important; } #appShell.is-sidebar-collapsed #sidebar nav a > :not(:first-child) { display: none !important; } #appShell.is-sidebar-collapsed #sidebar .nav-section-btn { justify-content: center !important; padding: .45rem !important; min-height: 1.4rem !important; } #appShell.is-sidebar-collapsed #sidebar .nav-section-btn > * { display: none !important; } #appShell.is-sidebar-collapsed #sidebar .nav-section-btn::before { content: ""; width: .42rem; height: .42rem; border-radius: 999px; background: rgba(100, 116, 139, .55); } #appShell.is-sidebar-collapsed #sidebar .nav-icon, #appShell.is-sidebar-collapsed #sidebar nav a > :first-child { flex: 0 0 2rem !important; width: 2rem !important; height: 2rem !important; min-width: 2rem !important; } } /* App-main container queries: treat the page by actual remaining content width, not the browser width. This covers desktop sidebar expanded/collapsed, iPad landscape, split-screen windows and future sidebar widths. */ @container app-main (max-width: 980px) { #appContent > :where(.flex).mb-3:has(h1), #appContent > :where(.flex).mb-4:has(h1), #appContent > :where(.flex).mb-5:has(h1), #appContent > :where(.flex).mb-6:has(h1), #appContent > .ui-page-header, .portal-content > :where(.flex).mb-3:has(h1), .portal-content > :where(.flex).mb-4:has(h1), .portal-content > :where(.flex).mb-5:has(h1), .portal-content > :where(.flex).mb-6:has(h1), .portal-content > .ui-page-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .8rem !important; } #appContent > :where(.flex).mb-3:has(h1) > *, #appContent > :where(.flex).mb-4:has(h1) > *, #appContent > :where(.flex).mb-5:has(h1) > *, #appContent > :where(.flex).mb-6:has(h1) > *, #appContent > .ui-page-header > *, .portal-content > :where(.flex).mb-3:has(h1) > *, .portal-content > :where(.flex).mb-4:has(h1) > *, .portal-content > :where(.flex).mb-5:has(h1) > *, .portal-content > :where(.flex).mb-6:has(h1) > *, .portal-content > .ui-page-header > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll) { width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; align-items: center !important; overflow: visible !important; } :where(#appContent, .portal-content) :where(.ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab) { flex: 0 1 auto !important; min-width: min(8rem, 100%) !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } :where(#appContent, .portal-content) :where(.grid[class*="lg:grid-cols-"], .grid[class*="xl:grid-cols-"]):has(> [class*="lg:col-span-"], > [class*="xl:col-span-"]) { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) :where([class*="lg:col-span-"], [class*="xl:col-span-"]) { grid-column: auto !important; } :where(#appContent, .portal-content) :where(.grid[class*="md:grid-cols-4"], .grid[class*="md:grid-cols-5"], .grid[class*="md:grid-cols-6"], .grid[class*="lg:grid-cols-4"], .grid[class*="lg:grid-cols-5"], .grid[class*="lg:grid-cols-6"], .grid[class*="xl:grid-cols-4"], .grid[class*="xl:grid-cols-5"], .grid[class*="xl:grid-cols-6"]):not([data-ui-fixed-grid="1"]):not(.dashboard-cashflow-summary) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; } [data-dashboard="1"] #dashWidgetGrid, [data-dashboard="1"] [data-kpi-grid="1"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) !important; } } @container app-main (max-width: 760px) { :where(#appContent, .portal-content) :where(form[data-ui-filters="1"], .ui-filter-grid) { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) :where(.ui-card-header, .ui-filterbar, .ui-dt-toolbar) { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) :where(.ui-card-actions, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row) { justify-content: flex-start !important; width: 100% !important; } } @container app-content (max-width: 560px) { :where(#appContent, .portal-content) :where(.ui-card-actions, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 min(11rem, 100%) !important; justify-content: center !important; } :where(#appContent, .portal-content) :where(.grid[class*="grid-cols-"]):not([data-ui-fixed-grid="1"]):not(.dashboard-cashflow-summary) { grid-template-columns: minmax(0, 1fr) !important; } } /* Last-mile anti-vertical-text guard. Short labels, titles and actions may truncate or wrap between words, but they should never break letter-by-letter. */ :where(#appContent, .portal-content, .portal-shell, #sidebar) :where(label, legend, summary, button, a.inline-flex, a.nav-link, .nav-section-btn, .ui-action-control, .ui-badge, .ui-filterbar-chip, .ui-label-safe, .ui-title-safe, .ui-button-label, .ui-card-title, .ui-kpi-title, h1, h2, h3, h4, h5, h6):not(.ui-token-break) { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; } /* Native controls with fixed/long contents should shrink within the available card/form width instead of forcing the page wider. */ :where(#appContent, .portal-content) :where(input, select, textarea, .ui-control, .form-field) { max-width: 100%; min-width: 0; } /* Allow very large viewports without stretching text columns into unreadable lines while still letting dashboards/reports use the available width. */ @media (min-width: 1920px) { :where(#appContent, .portal-content) > :where(.ui-card, .ui-card-premium, [class*="rounded-2xl"]) { max-width: 100%; } :where(#appContent, .portal-content) :where(.ui-readable, .prose, .max-w-prose) { max-width: 78ch !important; } } /* v13.1: Explicitly include 12-column form/detail grids in the responsive guardrails. These appear in Assessments, Leads, Compliance, Portal progress and management reports. */ @media (max-width: 1279.98px) { :where(#appContent, .portal-content) :where(.grid[class*="md:grid-cols-12"], .grid[class*="lg:grid-cols-12"], .grid[class*="xl:grid-cols-12"]):not([data-ui-fixed-grid="1"]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; } :where(#appContent, .portal-content) :where(.grid[class*="md:grid-cols-12"], .grid[class*="lg:grid-cols-12"], .grid[class*="xl:grid-cols-12"]):not([data-ui-fixed-grid="1"]) > :where([class*="col-span-"], [class*="md:col-span-"], [class*="lg:col-span-"], [class*="xl:col-span-"]) { grid-column: auto !important; min-width: 0 !important; } } @container app-main (max-width: 980px) { :where(#appContent, .portal-content) :where(.grid[class*="md:grid-cols-12"], .grid[class*="lg:grid-cols-12"], .grid[class*="xl:grid-cols-12"]):not([data-ui-fixed-grid="1"]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important; } :where(#appContent, .portal-content) :where(.grid[class*="md:grid-cols-12"], .grid[class*="lg:grid-cols-12"], .grid[class*="xl:grid-cols-12"]):not([data-ui-fixed-grid="1"]) > :where([class*="col-span-"], [class*="md:col-span-"], [class*="lg:col-span-"], [class*="xl:col-span-"]) { grid-column: auto !important; min-width: 0 !important; } } /* ========================================================= v14 focused fixes: dashboard control-room height, Cashbook alignment, and consistent button sizing. ========================================================= */ /* Legacy Cashbook views use the short `.card` class instead of ui_card(). Give it the same panel behavior so Cashbook pages align like the rest of the app. */ :where(#appContent, .portal-content) .card { min-width: 0; max-width: 100%; border-radius: 1rem; border: 1px solid rgba(226, 232, 240, 0.92); background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)); box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06); } .dark :where(#appContent, .portal-content) .card { border-color: rgba(51, 65, 85, 0.86); background: linear-gradient(180deg, rgba(15,23,42,0.90), rgba(15,23,42,0.72)); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22); } /* Dashboard urgent-actions card must size to its own contents. Without this, CSS grid stretches it to the height of the side checklist and leaves a large blank area under the five urgent cards on wide screens. */ [data-dashboard="1"] .dash-control-grid { align-items: start !important; } [data-dashboard="1"] .dash-urgent-card, [data-dashboard="1"] .dash-checklist-card { align-self: start !important; height: auto !important; min-height: 0 !important; } [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid { margin-bottom: 0 !important; } @media (min-width: 1280px) { [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid > [data-widget-id] { min-height: 6.55rem !important; } } @media (min-width: 1280px) and (max-width: 1535.98px) { [data-dashboard="1"] .dash-control-grid { grid-template-columns: minmax(0, 2fr) minmax(17rem, 0.8fr) !important; } } @container app-main (max-width: 1050px) { [data-dashboard="1"] .dash-control-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* Consistent button behavior: content-sized on desktop, wrapped by the parent when space is limited. This neutralizes older guardrails that gave some header/filter buttons an arbitrary 8-11rem width while other buttons stayed label-sized. */ :where(#appContent, .portal-content, .portal-shell) :where(a.ui-action-control, button.ui-action-control, input.ui-action-control[type="submit"], input.ui-action-control[type="button"]) { width: auto !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.5rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; white-space: nowrap !important; text-align: center !important; line-height: 1 !important; } :where(#appContent, .portal-content, .portal-shell) :where(.ui-header-actions, .ui-header-action-stack, .ui-section-actions, .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll, .ui-mobile-action-grid, .dash-header-actions) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab) { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content, .portal-shell) :where(.ui-action-control) :where(svg, .ui-icon, .action-icon) { flex: 0 0 auto !important; } @media (max-width: 420px) { :where(#appContent, .portal-content) :where(.ui-form-actions, .ui-responsive-action-row) > :where(a.ui-action-control, button.ui-action-control, input.ui-action-control[type="submit"], input.ui-action-control[type="button"]) { flex: 1 1 min(10rem, 100%) !important; } } /* Keep table row actions compact even after the global button consistency rule above. */ :where(#appContent, .portal-content) table.ui-table :where(td.ui-table-actions-cell, td:last-child) :where(a.ui-action-control, button.ui-action-control, input.ui-action-control[type="submit"], input.ui-action-control[type="button"], .ui-table-action-btn) { width: auto !important; min-width: 3.4rem !important; min-height: 1.85rem !important; height: 1.85rem !important; flex: 0 0 auto !important; padding-top: 0.24rem !important; padding-bottom: 0.24rem !important; font-size: 0.73rem !important; } /* Cashbook module alignment: headers, stats, filters, tables and action rows. */ [data-module="cashbook"] { width: 100%; max-width: 100%; min-width: 0; } [data-module="cashbook"] > .flex.items-start.justify-between:first-child { flex-wrap: wrap !important; align-items: flex-start !important; gap: 0.75rem !important; } [data-module="cashbook"] > .flex.items-start.justify-between:first-child > :first-child { min-width: min(100%, 16rem) !important; flex: 1 1 18rem !important; } [data-module="cashbook"] > .flex.items-start.justify-between:first-child > :last-child { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 0.5rem !important; min-width: 0 !important; max-width: 100% !important; } [data-module="cashbook"] .card { overflow: hidden; } [data-module="cashbook"] .card.p-4 { overflow: visible; } [data-module="cashbook"] .grid { min-width: 0; } [data-module="cashbook"] .grid > * { min-width: 0; } [data-module="cashbook"] .text-2xl.font-extrabold, [data-module="cashbook"] .text-2xl.font-semibold { font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important; line-height: 1.15 !important; overflow-wrap: normal !important; word-break: normal !important; } [data-module="cashbook"] .card > .px-4.py-3.flex, [data-module="cashbook"] .card > .px-4.py-3.border-b.flex { flex-wrap: wrap !important; align-items: center !important; gap: 0.75rem !important; } [data-module="cashbook"] .card > .px-4.py-3.flex > :first-child, [data-module="cashbook"] .card > .px-4.py-3.border-b.flex > :first-child { min-width: 0 !important; flex: 1 1 14rem !important; } [data-module="cashbook"] .card > .px-4.py-3.flex > :last-child, [data-module="cashbook"] .card > .px-4.py-3.border-b.flex > :last-child { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 0.5rem !important; min-width: 0 !important; } [data-module="cashbook"] form[data-ui-filters="1"] > .grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)) !important; gap: 0.75rem !important; align-items: end !important; } [data-module="cashbook"] form[data-ui-filters="1"] > .grid > :where([class*="md:col-span-"], [class*="lg:col-span-"], [class*="xl:col-span-"]) { grid-column: auto !important; } [data-module="cashbook"] form[data-ui-filters="1"] > .grid > :where(.flex, .inline-flex):has(> :where(button, a, input[type="submit"], input[type="button"])) { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; } @media (min-width: 641px) { [data-module="cashbook"] form[data-ui-filters="1"] > .grid > :where(.flex, .inline-flex):has(> :where(button, a, input[type="submit"], input[type="button"])) > :where(a.ui-action-control, button.ui-action-control, input.ui-action-control[type="submit"], input.ui-action-control[type="button"]) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; } } [data-module="cashbook"] :where(.ui-table-wrap, .overflow-x-auto) { width: 100%; max-width: 100%; min-width: 0; } [data-module="cashbook"] table.ui-table { min-width: max(52rem, 100%) !important; } [data-module="cashbook"] table.ui-table :where(th, td) { vertical-align: top !important; } [data-module="cashbook"] table.ui-table :where(td, th) :where(div, span):not(.ui-badge):not(.inline-flex) { min-width: 0; } @media (max-width: 560px) { [data-module="cashbook"] > .flex.items-start.justify-between:first-child > :last-child, [data-module="cashbook"] .card > .px-4.py-3.flex > :last-child, [data-module="cashbook"] .card > .px-4.py-3.border-b.flex > :last-child { width: 100% !important; justify-content: flex-start !important; } [data-module="cashbook"] > .flex.items-start.justify-between:first-child > :last-child > :where(a.ui-action-control, button.ui-action-control), [data-module="cashbook"] .card > .px-4.py-3.flex > :last-child > :where(a.ui-action-control, button.ui-action-control), [data-module="cashbook"] .card > .px-4.py-3.border-b.flex > :last-child > :where(a.ui-action-control, button.ui-action-control) { flex: 1 1 min(10rem, 100%) !important; } } /* ========================================================= v15 regression fixes: keep responsive hardening targeted. Broad responsive guardrails were catching branch switchers and stacked dashboard helper panels. These overrides restore predictable layout without undoing the safety rules for real filters/tables/cards. ========================================================= */ /* Dashboard: when the app content column is not wide enough for the side checklist, do not let that helper panel create an invisible/awkward second grid row between Urgent actions and the KPI cards. The urgent panel remains compact and the KPI grid follows immediately. */ [data-dashboard="1"] .dash-control-grid { align-items: start !important; grid-auto-rows: max-content !important; margin-bottom: 0.85rem !important; } [data-dashboard="1"] .dash-urgent-card { align-self: start !important; height: auto !important; min-height: 0 !important; } [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid { align-items: stretch !important; margin-bottom: 0 !important; } [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid > [data-widget-id] { height: auto !important; min-height: 7rem !important; } @container app-main (max-width: 1180px) { [data-dashboard="1"] .dash-control-grid { display: block !important; } [data-dashboard="1"] .dash-checklist-card { display: none !important; } } @media (max-width: 1279.98px) { [data-dashboard="1"] .dash-control-grid { display: block !important; } [data-dashboard="1"] .dash-checklist-card { display: none !important; } } @media (min-width: 1280px) { [data-dashboard="1"] .dash-control-grid { display: grid !important; } } /* Cashbook: a branch switcher is navigation state, not a filter form. Keep it out of the filterbar/preset system and align it with the section tabs. */ [data-module="cashbook"] .ui-branch-switcher, [data-module="cashbook"] form.ui-branch-switcher[data-ui-filterbar-off] { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; } [data-module="cashbook"] .ui-branch-switcher > label { flex: 0 0 auto !important; margin: 0 !important; white-space: nowrap !important; } [data-module="cashbook"] .ui-branch-switcher > select, [data-module="cashbook"] .ui-branch-switcher .ui-control, [data-module="cashbook"] .ui-branch-switcher .form-field { flex: 0 1 22rem !important; width: min(22rem, 100%) !important; min-width: 12rem !important; max-width: 22rem !important; } [data-module="cashbook"] .ui-section-nav { min-width: 0 !important; max-width: 100% !important; } [data-module="cashbook"] .ui-section-nav .ui-header-actions, [data-module="cashbook"] .ui-section-nav .ui-section-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; width: auto !important; } [data-module="cashbook"] .mt-4 > .flex.flex-col.md\:flex-row { align-items: center !important; } @media (max-width: 767.98px) { [data-module="cashbook"] .mt-4 > .flex.flex-col.md\:flex-row { align-items: stretch !important; } [data-module="cashbook"] .ui-branch-switcher, [data-module="cashbook"] form.ui-branch-switcher[data-ui-filterbar-off] { width: 100% !important; justify-content: flex-start !important; flex-wrap: wrap !important; } [data-module="cashbook"] .ui-branch-switcher > select, [data-module="cashbook"] .ui-branch-switcher .ui-control, [data-module="cashbook"] .ui-branch-switcher .form-field { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } /* Avoid toolbar controls floating as a separate visual object inside Cashbook module nav areas. Real Cashbook filters still live inside their own cards. */ [data-module="cashbook"] > .mt-4 .ui-filterbar { display: none !important; } /* ========================================================= v16 targeted regression cleanup: dashboard spacing + Cashbook menu parity. Keep this block narrow: do not change generic grids, filters or buttons. ========================================================= */ /* Dashboard: the urgent-actions panel is a standalone row. The optional checklist helper must never participate in the same CSS grid row because its height is what created the large blank space before the KPI cards. */ [data-dashboard="1"] .dash-control-grid { display: block !important; grid-template-columns: none !important; grid-auto-rows: auto !important; align-items: start !important; margin-bottom: 0.85rem !important; min-height: 0 !important; height: auto !important; } [data-dashboard="1"] .dash-urgent-card { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; align-self: start !important; } [data-dashboard="1"] .dash-checklist-card { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid { display: grid !important; width: 100% !important; max-width: 100% !important; align-items: stretch !important; margin-bottom: 0 !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)) !important; } [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid > [data-widget-id] { min-height: 6.6rem !important; height: auto !important; } [data-dashboard="1"] [data-kpi-grid="1"] { margin-top: 0 !important; } @media (min-width: 1280px) { [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } @media (max-width: 767.98px) { [data-dashboard="1"] .dash-urgent-card #dashWidgetGrid { grid-template-columns: minmax(0, 1fr) !important; } } /* Cashbook section menu: match the Admin Tools tab treatment while preventing global filter/header hardening from stretching the tabs or branch switcher into unrelated columns. */ [data-module="cashbook"] .cashbook-section-bar { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; margin-top: 1rem !important; } [data-module="cashbook"] .cashbook-tabs { width: auto !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; display: block !important; overflow: visible !important; } [data-module="cashbook"] .cashbook-tabs .ui-section-actions { width: auto !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; overflow: visible !important; } [data-module="cashbook"] .cashbook-tabs .ui-section-action { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 2.25rem !important; white-space: nowrap !important; justify-content: center !important; } [data-module="cashbook"] .cashbook-branch-form, [data-module="cashbook"] form.cashbook-branch-form.ui-branch-switcher[data-ui-filterbar-off] { flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } [data-module="cashbook"] .cashbook-branch-label { flex: 0 0 auto !important; min-width: max-content !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; padding: 0 !important; margin: 0 !important; } [data-module="cashbook"] .cashbook-branch-select { flex: 0 1 14rem !important; width: 14rem !important; max-width: min(100%, 14rem) !important; min-width: 12rem !important; } [data-module="cashbook"] .cashbook-export-actions { flex: 0 0 auto !important; justify-content: flex-end !important; } @media (max-width: 1024px) { [data-module="cashbook"] .cashbook-section-bar { align-items: stretch !important; } [data-module="cashbook"] .cashbook-tabs, [data-module="cashbook"] .cashbook-branch-form, [data-module="cashbook"] .cashbook-export-actions { flex: 1 1 100% !important; width: 100% !important; } [data-module="cashbook"] .cashbook-tabs .ui-section-actions { justify-content: flex-start !important; } [data-module="cashbook"] .cashbook-branch-form { justify-content: flex-start !important; } [data-module="cashbook"] .cashbook-branch-select { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } [data-module="cashbook"] .cashbook-export-actions { justify-content: flex-start !important; } } @media (max-width: 520px) { [data-module="cashbook"] .cashbook-tabs .ui-section-action { flex: 1 1 calc(50% - 0.5rem) !important; } [data-module="cashbook"] .cashbook-branch-form { flex-wrap: wrap !important; } [data-module="cashbook"] .cashbook-branch-label, [data-module="cashbook"] .cashbook-branch-select { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } /* ========================================================= v17 Cashbook header parity with Admin Tools. The Cashbook section menu now lives in the page header, like Admin Tools. Branch/export controls and page actions are a separate compact toolbar so they cannot pull the tab menu onto a lower, misaligned row. ========================================================= */ [data-module="cashbook"] .cashbook-page-header { width: 100% !important; max-width: 100% !important; min-width: 0 !important; align-items: center !important; } [data-module="cashbook"] .cashbook-page-header > :first-child { min-width: 0 !important; max-width: 100% !important; } [data-module="cashbook"] .cashbook-page-header .cashbook-tabs { justify-self: end !important; width: auto !important; max-width: 100% !important; flex: 0 1 auto !important; } [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-actions { width: auto !important; justify-content: flex-end !important; align-items: center !important; gap: 0.5rem !important; } [data-module="cashbook"] .cashbook-page-toolbar { width: 100% !important; max-width: 100% !important; min-width: 0 !important; align-items: center !important; } [data-module="cashbook"] .cashbook-toolbar-left, [data-module="cashbook"] .cashbook-toolbar-actions, [data-module="cashbook"] .cashbook-section-tools { min-width: 0 !important; max-width: 100% !important; } [data-module="cashbook"] .cashbook-section-tools { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.75rem !important; } [data-module="cashbook"] .cashbook-toolbar-actions { justify-content: flex-end !important; } [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-action, [data-module="cashbook"] .cashbook-page-toolbar .ui-action-control { flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; } @media (min-width: 768px) { [data-module="cashbook"] .cashbook-page-header { display: grid !important; grid-template-columns: minmax(18rem, 1fr) minmax(0, auto) !important; column-gap: 1rem !important; row-gap: 0.75rem !important; } } @media (max-width: 767.98px) { [data-module="cashbook"] .cashbook-page-header { align-items: stretch !important; } [data-module="cashbook"] .cashbook-page-header .cashbook-tabs, [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-actions { width: 100% !important; justify-content: flex-start !important; } [data-module="cashbook"] .cashbook-page-toolbar { align-items: stretch !important; } [data-module="cashbook"] .cashbook-section-tools, [data-module="cashbook"] .cashbook-toolbar-actions { width: 100% !important; justify-content: flex-start !important; } } @media (max-width: 520px) { [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-action { flex: 1 1 calc(50% - 0.5rem) !important; justify-content: center !important; } [data-module="cashbook"] .cashbook-page-toolbar .ui-action-control { flex: 1 1 min(10rem, 100%) !important; } } @media (max-width: 340px) { [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-action { flex-basis: 100% !important; } } /* ========================================================= v18 Desktop collapsed-sidebar polish. Fixes the janky close feel, removes the ambiguous section dots, keeps the footer/user card readable, and supports JS hover labels. ========================================================= */ @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 641px) { #sidebar.app-sidebar { transform: none !important; transition: none !important; will-change: auto !important; contain: layout paint style; } #appShell.is-sidebar-collapsed #sidebar.app-sidebar { width: var(--app-sidebar-collapsed-width, 4.75rem) !important; max-width: var(--app-sidebar-collapsed-width, 4.75rem) !important; flex-basis: var(--app-sidebar-collapsed-width, 4.75rem) !important; } #appShell.is-sidebar-collapsed #sidebar .app-sidebar-inner { overflow: hidden !important; } #appShell.is-sidebar-collapsed #sidebar nav { padding: .5rem .55rem .75rem !important; scrollbar-width: thin; } #appShell.is-sidebar-collapsed #sidebar nav::-webkit-scrollbar { width: .35rem; } /* The previous collapsed state turned section headers into dots. Those dots did not communicate anything useful, so collapsed mode now hides section headers and leaves only the actual navigation icons. */ #appShell.is-sidebar-collapsed #sidebar nav > .pt-2, #appShell.is-sidebar-collapsed #sidebar .nav-section-btn { display: none !important; } #appShell.is-sidebar-collapsed #sidebar [data-nav-section] { margin-top: .25rem !important; } #appShell.is-sidebar-collapsed #sidebar nav a.nav-link, #appShell.is-sidebar-collapsed #sidebar nav a.group { position: relative !important; justify-content: center !important; align-items: center !important; width: 2.75rem !important; min-width: 2.75rem !important; max-width: 2.75rem !important; height: 2.75rem !important; margin-inline: auto !important; padding: .35rem !important; border-radius: 1rem !important; gap: 0 !important; } #appShell.is-sidebar-collapsed #sidebar nav a.nav-link > :not(:first-child), #appShell.is-sidebar-collapsed #sidebar nav a.group > :not(:first-child) { display: none !important; } #appShell.is-sidebar-collapsed #sidebar .nav-icon, #appShell.is-sidebar-collapsed #sidebar nav a > :first-child { flex: 0 0 2rem !important; width: 2rem !important; height: 2rem !important; min-width: 2rem !important; margin: 0 !important; } #appShell.is-sidebar-collapsed #sidebar > .app-sidebar-inner > .mt-auto, #appShell.is-sidebar-collapsed #sidebar .mt-auto.p-3 { padding: .55rem !important; } #appShell.is-sidebar-collapsed #sidebar .sidebar-user-card { width: 2.75rem !important; min-width: 2.75rem !important; max-width: 2.75rem !important; height: 2.75rem !important; margin-inline: auto !important; padding: .35rem !important; border-radius: 1rem !important; } #appShell.is-sidebar-collapsed #sidebar .sidebar-user-card .flex { justify-content: center !important; align-items: center !important; gap: 0 !important; } #appShell.is-sidebar-collapsed #sidebar .sidebar-user-card .w-9.h-9 { width: 2rem !important; height: 2rem !important; min-width: 2rem !important; border-radius: .85rem !important; } #appShell.is-sidebar-collapsed #sidebar .sidebar-user-card .min-w-0 { display: none !important; } } .sidebar-collapsed-tooltip { position: fixed; z-index: 10000; transform: translateY(-50%) translateX(-.25rem); opacity: 0; pointer-events: none; max-width: min(18rem, calc(100vw - 7rem)); padding: .45rem .65rem; border-radius: .75rem; border: 1px solid rgba(148, 163, 184, .32); background: rgba(15, 23, 42, .94); color: #fff; box-shadow: 0 18px 45px rgba(15, 23, 42, .22); font-size: .78rem; font-weight: 700; line-height: 1.15; white-space: nowrap; transition: opacity .12s ease, transform .12s ease; } .sidebar-collapsed-tooltip.is-visible { opacity: 1; transform: translateY(-50%) translateX(0); } .dark .sidebar-collapsed-tooltip { border-color: rgba(148, 163, 184, .45); background: rgba(2, 6, 23, .96); } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 641px) { /* In the compact rail, keep menu destinations available even if a section was collapsed while the full sidebar was open. The section labels themselves are hidden, so the icons need to remain reachable. */ #appShell.is-sidebar-collapsed #sidebar [data-nav-section].hidden { display: block !important; } } /* Leads: keep the filter form aligned at all desktop/sidebar widths. The global responsive hardening adds .ui-filter-grid to GET filters; this screen has a custom Search / Stage / Assigned-to / Filter layout, so lock it to a sane grid instead of mixing auto-fit columns with old md:col-span-* spans. */ :where(#appContent, .portal-content) form[data-leads-filter="1"] { display: grid !important; grid-template-columns: minmax(18rem, 2fr) minmax(12rem, 1fr) minmax(12rem, 1fr) minmax(7rem, auto) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-leads-filter="1"] > * { min-width: 0 !important; max-width: 100% !important; width: auto !important; } :where(#appContent, .portal-content) form[data-leads-filter="1"] :where(input, select, textarea) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-leads-filter="1"] .leads-filter-submit { width: auto !important; min-width: 7rem !important; justify-content: stretch !important; } :where(#appContent, .portal-content) form[data-leads-filter="1"] .leads-filter-submit > :where(button, input[type="submit"], a) { width: 100% !important; min-width: 7rem !important; justify-content: center !important; } :where(#appContent, .portal-content) form[data-leads-filter="1"] .leads-filter-help { grid-column: 1 / -1 !important; width: 100% !important; } @media (max-width: 1180px) { :where(#appContent, .portal-content) form[data-leads-filter="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) form[data-leads-filter="1"] .leads-filter-search { grid-column: 1 / -1 !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) form[data-leads-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form[data-leads-filter="1"] .leads-filter-search, :where(#appContent, .portal-content) form[data-leads-filter="1"] .leads-filter-help { grid-column: auto !important; } :where(#appContent, .portal-content) form[data-leads-filter="1"] .leads-filter-submit, :where(#appContent, .portal-content) form[data-leads-filter="1"] .leads-filter-submit > :where(button, input[type="submit"], a) { width: 100% !important; } } /* Subscriptions: stable Search / Scope / Filter / Reset layout. This form is intentionally opted out of the broad filter-grid normalizer so the buttons do not become oversized at intermediate desktop/tablet widths. */ :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] { display: grid !important; grid-template-columns: minmax(16rem, 1.35fr) minmax(13rem, .9fr) max-content !important; align-items: end !important; gap: .75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] > * { min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] :where(input, select, textarea) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] .subscriptions-filter-actions { display: flex !important; align-items: end !important; justify-content: flex-start !important; gap: .5rem !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; } :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] .subscriptions-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.75rem !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 900px) { :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] .subscriptions-filter-actions { grid-column: 1 / -1 !important; justify-content: flex-start !important; min-width: 0 !important; } } @media (max-width: 560px) { :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] .subscriptions-filter-actions { width: 100% !important; flex-wrap: wrap !important; } :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] .subscriptions-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 min(9rem, 100%) !important; width: auto !important; } } /* Subscriptions: Sell Membership back action should remain a normal button. Earlier broad page-header rules can make direct header children width:100%; keep this page's Back link label-sized on desktop/tablet and small screens. */ :where(#appContent, .portal-content) .subscription-create-header { align-items: flex-start !important; } :where(#appContent, .portal-content) .subscription-create-back-wrap { width: auto !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .subscription-create-back { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @container app-main (max-width: 980px) { :where(#appContent, .portal-content) .subscription-create-header > .subscription-create-back-wrap { width: auto !important; align-self: flex-start !important; justify-content: flex-start !important; } } @container app-content (max-width: 560px) { :where(#appContent, .portal-content) .subscription-create-header .subscription-create-back { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; } } /* Compact inline search forms used on pick/member-step screens. These are lookup controls, not full filter panels. Keep the Search button label-sized on desktop/tablet, matching Lockers and other compact pickers. */ :where(#appContent, .portal-content) .ui-inline-search-form { display: flex !important; grid-template-columns: none !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .ui-inline-search-form > :where(input, select, textarea, .ui-control, .form-field) { flex: 1 1 14rem !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) .ui-inline-search-form > :where(button, a, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 5.5rem !important; max-width: max-content !important; justify-content: center !important; white-space: nowrap !important; padding-inline: 1rem !important; } @container app-content (max-width: 420px) { :where(#appContent, .portal-content) .ui-inline-search-form { flex-wrap: wrap !important; } :where(#appContent, .portal-content) .ui-inline-search-form > :where(input, select, textarea, .ui-control, .form-field) { flex-basis: 100% !important; width: 100% !important; } } /* Billing → Invoices: keep Search / Status / Scope / actions balanced at intermediate widths so Filter / Reset / Export do not turn into oversized stacked buttons while the inputs remain compact. */ :where(#appContent, .portal-content) form[data-invoices-filter="1"] { display: grid !important; grid-template-columns: minmax(18rem, 1.45fr) minmax(13rem, .9fr) minmax(13rem, .9fr) max-content !important; align-items: end !important; gap: .75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-invoices-filter="1"] > * { min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-invoices-filter="1"] :where(input, select, textarea, .ui-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-invoices-filter="1"] .invoices-filter-actions { display: flex !important; align-items: end !important; justify-content: flex-start !important; gap: .5rem !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; } :where(#appContent, .portal-content) form[data-invoices-filter="1"] .invoices-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.75rem !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 1100px) { :where(#appContent, .portal-content) form[data-invoices-filter="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) form[data-invoices-filter="1"] .invoices-filter-actions { grid-column: 1 / -1 !important; justify-content: flex-start !important; min-width: 0 !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) form[data-invoices-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form[data-invoices-filter="1"] .invoices-filter-actions { width: 100% !important; flex-wrap: wrap !important; } :where(#appContent, .portal-content) form[data-invoices-filter="1"] .invoices-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 min(9rem, 100%) !important; width: auto !important; } } /* Billing → Receive Payment: keep the customer picker search compact. This is a search form, not a full filter panel, so it needs stable action sizing instead of the broad filter-grid behavior. */ :where(#appContent, .portal-content) form[data-receive-payment-search="1"] { display: grid !important; grid-template-columns: minmax(14rem, .9fr) minmax(16rem, 1.25fr) max-content !important; align-items: end !important; gap: .75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] > * { min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] :where(input, select, textarea, .ui-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] .receive-payment-search-actions { display: flex !important; align-items: end !important; justify-content: flex-start !important; gap: .5rem !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] .receive-payment-search-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 7rem !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 900px) { :where(#appContent, .portal-content) form[data-receive-payment-search="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] .receive-payment-search-actions { grid-column: 1 / -1 !important; justify-content: flex-start !important; min-width: 0 !important; } } @media (max-width: 560px) { :where(#appContent, .portal-content) form[data-receive-payment-search="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] .receive-payment-search-actions { width: 100% !important; flex-wrap: wrap !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] .receive-payment-search-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 min(9rem, 100%) !important; width: auto !important; } } /* Billing → Receive Payment regression fix: keep the customer finder vertically stacked so it never overlaps the Payment panel when the page is in a narrow content area or the 2-panel layout kicks in. */ :where(#appContent, .portal-content) form[data-receive-payment-search="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: end !important; gap: .75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] .receive-payment-search-actions { grid-column: auto !important; width: 100% !important; min-width: 0 !important; flex-wrap: wrap !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] .receive-payment-search-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 7rem !important; max-width: 100% !important; } @media (min-width: 760px) and (max-width: 1279px) { :where(#appContent, .portal-content) form[data-receive-payment-search="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) form[data-receive-payment-search="1"] .receive-payment-search-actions { grid-column: 1 / -1 !important; } } /* Billing -> Credits: keep the search action compact like the Invoices filter. The generic filter-grid makes direct submit buttons use a full flexible column; this screen only needs a search field plus a normal-sized action button. */ :where(#appContent, .portal-content) form[data-credits-filter="1"] { display: grid !important; grid-template-columns: minmax(18rem, 1fr) max-content !important; align-items: end !important; gap: .75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] > * { min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] :where(input, select, textarea, .ui-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] .credits-filter-actions { display: flex !important; align-items: end !important; justify-content: flex-start !important; gap: .5rem !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] .credits-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 7rem !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 720px) { :where(#appContent, .portal-content) form[data-credits-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] .credits-filter-actions { width: 100% !important; min-width: 0 !important; flex-wrap: wrap !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] .credits-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 min(9rem, 100%) !important; width: auto !important; } } /* Billing -> Receipts: compact filter actions. This screen only has one search input and two actions, so keep Filter / Reset label-sized like the fixed Invoices and Credits filters instead of letting the broad filter normalizer stretch them into oversized columns. */ :where(#appContent, .portal-content) form[data-receipts-filter="1"] { display: grid !important; grid-template-columns: minmax(18rem, 1fr) max-content !important; align-items: end !important; gap: .75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-receipts-filter="1"] > * { min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-receipts-filter="1"] :where(input, select, textarea, .ui-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form[data-receipts-filter="1"] .receipts-filter-actions { display: flex !important; align-items: end !important; justify-content: flex-start !important; gap: .5rem !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; } :where(#appContent, .portal-content) form[data-receipts-filter="1"] .receipts-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.75rem !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 760px) { :where(#appContent, .portal-content) form[data-receipts-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form[data-receipts-filter="1"] .receipts-filter-actions { width: 100% !important; min-width: 0 !important; flex-wrap: wrap !important; } :where(#appContent, .portal-content) form[data-receipts-filter="1"] .receipts-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 min(9rem, 100%) !important; width: auto !important; } } /* Cashbook toolbar action polish: keep New transaction / New transfer and related page actions compact. These are toolbar buttons, not mobile tiles. */ :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { align-items: center !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions.ui-mobile-action-grid { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; justify-content: flex-end !important; gap: .5rem !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; align-self: center !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 2.5rem !important; padding-top: .55rem !important; padding-bottom: .55rem !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { align-items: stretch !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { width: 100% !important; justify-content: flex-start !important; } } @media (max-width: 420px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 min(10rem, 100%) !important; white-space: normal !important; } } /* Cashbook toolbar alignment refinement: Keep branch/export controls and primary page actions in a predictable two-column toolbar on tablet/desktop. The previous flex row centered the action buttons against a taller left control group, which made New transaction/New transfer appear to float between the branch selector and export buttons. */ @media (min-width: 768px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: start !important; column-gap: 1rem !important; row-gap: .75rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-left { grid-column: 1 !important; min-width: 0 !important; align-self: start !important; justify-self: start !important; width: 100% !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { grid-column: 2 !important; align-self: start !important; justify-self: end !important; margin-top: 0 !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-section-tools { align-items: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { justify-content: flex-start !important; } } @media (min-width: 768px) and (max-width: 900px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { grid-column: 1 !important; justify-self: start !important; justify-content: flex-start !important; } } /* Cashbook toolbar final tablet-width guardrail: Between tablet and smaller desktop widths, the left control group wraps into multiple rows. Keep the page actions in their own left-aligned row instead of letting them float midway beside Branch/Export controls. */ @media (min-width: 768px) and (max-width: 1279.98px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-items: start !important; column-gap: 0 !important; row-gap: .75rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-left, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-self: start !important; align-self: start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-section-tools { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-items: start !important; gap: .75rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-branch-form { width: min(100%, 28rem) !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: .5rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; } } /* Cashbook toolbar responsive reset (final): use the available content width, not just viewport width. This avoids the awkward tablet/desktop-sidebar state where Branch/Export controls wrap while New transaction/New transfer float in the middle of the toolbar. */ :where(#appContent, .portal-content) [data-module="cashbook"].cashbook-page { container-type: inline-size; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; grid-template-areas: "tools actions" !important; align-items: start !important; justify-items: stretch !important; column-gap: 1rem !important; row-gap: .875rem !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-left { grid-area: tools !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { grid-area: actions !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: .5rem !important; align-self: start !important; justify-self: end !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-section-tools { display: grid !important; grid-template-columns: minmax(15rem, 26rem) minmax(0, auto) !important; align-items: end !important; justify-content: start !important; gap: .75rem !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-branch-form { width: 100% !important; max-width: 26rem !important; min-width: 0 !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { width: auto !important; min-width: 0 !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: .5rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: auto !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; white-space: nowrap !important; justify-content: center !important; min-height: 2.6rem !important; padding-top: .6rem !important; padding-bottom: .6rem !important; } @container (max-width: 1100px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "actions" "tools" !important; row-gap: .875rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { width: 100% !important; justify-self: start !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-section-tools { grid-template-columns: minmax(0, 1fr) !important; justify-items: start !important; align-items: start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-branch-form { width: min(100%, 28rem) !important; max-width: 28rem !important; } } @container (max-width: 740px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; flex: initial !important; white-space: normal !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-branch-form { width: 100% !important; max-width: 100% !important; } } @container (max-width: 380px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { grid-template-columns: minmax(0, 1fr) !important; } } /* Media-query fallback for older browsers without container queries. */ @media (max-width: 1279.98px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "actions" "tools" !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { width: 100% !important; justify-self: start !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-section-tools { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 740px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; white-space: normal !important; } } @media (max-width: 380px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { grid-template-columns: minmax(0, 1fr) !important; } } /* Cashbook toolbar/header final ordering fix: At constrained desktop/tablet widths the previous reset stacked the action buttons above Branch/Export and left the section tabs floating to the far right. Keep the Cashbook navigation/controls in natural reading order: title, tabs, branch/export tools, then page actions. */ :where(#appContent, .portal-content) [data-module="cashbook"].cashbook-page { container-type: inline-size; } @container (max-width: 1180px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: .8rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header .cashbook-tabs, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-actions { width: 100% !important; justify-self: start !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "tools" "actions" !important; align-items: start !important; justify-items: start !important; gap: .875rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-left, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-self: start !important; align-self: start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { justify-content: flex-start !important; } } /* Fallback for browsers without container queries. */ @media (max-width: 1279.98px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: .8rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header .cashbook-tabs, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-actions { width: 100% !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "tools" "actions" !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { width: 100% !important; justify-self: start !important; justify-content: flex-start !important; } } /* Cashbook header parity with Admin Tools Keep Cashbook section tabs and page action buttons using the same compact header-action chip treatment as Admin Tools. This intentionally overrides the earlier broad Cashbook toolbar patches, which caused the tabs/actions to drift at several intermediate widths. */ :where(#appContent, .portal-content) [data-module="cashbook"].cashbook-page { container-type: inline-size; } @media (min-width: 768px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 1rem !important; width: 100% !important; margin-bottom: 1rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header > :first-child { flex: 1 1 18rem !important; min-width: 14rem !important; max-width: 32rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header .cashbook-tabs { flex: 0 1 auto !important; width: auto !important; max-width: calc(100% - 18rem) !important; margin-left: auto !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-actions { width: auto !important; justify-content: flex-end !important; align-items: center !important; gap: .5rem !important; } } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-tabs .ui-section-action, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-header-action { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.55rem !important; padding: .62rem .95rem !important; border-radius: 1rem !important; line-height: 1 !important; white-space: nowrap !important; justify-content: center !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-header-action-primary { color: rgb(12 74 110) !important; border-color: rgb(186 230 253) !important; background: linear-gradient(135deg, rgba(240, 249, 255, 0.98), rgba(224, 242, 254, 0.92)) !important; box-shadow: 0 10px 24px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-header-action-primary:hover { background: linear-gradient(135deg, rgba(224, 242, 254, 1), rgba(186, 230, 253, 0.9)) !important; } .dark :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-header-action-primary { color: rgb(224 242 254) !important; border-color: rgba(14, 165, 233, 0.45) !important; background: linear-gradient(135deg, rgba(7, 89, 133, 0.46), rgba(12, 74, 110, 0.34)) !important; box-shadow: 0 12px 28px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: .875rem 1rem !important; width: 100% !important; max-width: 100% !important; margin-bottom: 1rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-left { flex: 1 1 34rem !important; width: auto !important; min-width: min(100%, 22rem) !important; max-width: 100% !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: .5rem !important; margin-left: auto !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-section-tools { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: end !important; justify-content: flex-start !important; gap: .75rem !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-branch-form { flex: 1 1 20rem !important; width: auto !important; min-width: min(100%, 17rem) !important; max-width: 26rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: .5rem !important; } @container (max-width: 980px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-left, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions { width: 100% !important; flex: 0 1 auto !important; margin-left: 0 !important; justify-content: flex-start !important; } } @media (max-width: 767.98px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .75rem !important; margin-bottom: .875rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header .cashbook-tabs, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-header .cashbook-tabs .ui-section-actions { width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-page-toolbar { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-left, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-section-tools, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-branch-form, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; justify-content: flex-start !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; } :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; white-space: normal !important; } } @media (max-width: 380px) { :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-toolbar-actions, :where(#appContent, .portal-content) [data-module="cashbook"] .cashbook-export-actions { grid-template-columns: minmax(0, 1fr) !important; } } /* Cashbook create actions: match Members screen action-button styling exactly. Cashbook tabs/export controls keep their Cashbook/Admin-style layout rules, but New transaction / New transfer should use the shared app button design. */ :where(#appContent, .portal-content) [data-module="cashbook"] [data-cashbook-member-actions="1"] > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.35rem !important; height: auto !important; padding: .48rem .78rem !important; border-radius: .75rem !important; line-height: 1 !important; font-size: 13px !important; font-weight: 500 !important; white-space: nowrap !important; box-shadow: var(--ui-action-shadow) !important; } :where(#appContent, .portal-content) [data-module="cashbook"] [data-cashbook-member-actions="1"] > :where(.btn-primary, .ui-action-primary) { color: var(--accent-on-solid) !important; border: 1px solid color-mix(in srgb, var(--accent-solid) 82%, #000) !important; background: var(--accent-solid) !important; } :where(#appContent, .portal-content) [data-module="cashbook"] [data-cashbook-member-actions="1"] > :where(.btn-primary, .ui-action-primary):hover { background: var(--accent-solid-hover) !important; filter: none !important; } :where(#appContent, .portal-content) [data-module="cashbook"] [data-cashbook-member-actions="1"] > :where(.ui-action-secondary) { color: rgba(51, 65, 85, 0.98) !important; border-color: var(--ui-control-border) !important; background: var(--ui-control-bg) !important; } :where(#appContent, .portal-content) [data-module="cashbook"] [data-cashbook-member-actions="1"] > :where(.ui-action-secondary):hover { background: var(--ui-control-hover) !important; } .dark :where(#appContent, .portal-content) [data-module="cashbook"] [data-cashbook-member-actions="1"] > :where(.ui-action-secondary) { color: rgba(226, 232, 240, 0.98) !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) [data-module="cashbook"] [data-cashbook-member-actions="1"] > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-height: 2.5rem !important; white-space: normal !important; text-align: center !important; justify-content: center !important; } } /* Corporate clients filters: keep action buttons compact and aligned. This screen has only one search input plus Filter/Reset, so do not let the global responsive filter-grid rules stretch those two actions into oversized tiles. The toolbar/preset strip above the form remains unchanged. */ #appContent form.corporate-clients-filter-form[data-ui-filters="1"], .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-search, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-search { grid-column: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions { grid-column: auto !important; display: inline-flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; gap: 0.5rem !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.25rem !important; max-width: max-content !important; min-height: 2.5rem !important; padding-inline: 0.85rem !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { #appContent form.corporate-clients-filter-form[data-ui-filters="1"], .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0.65rem !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-search, #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-search, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-self: stretch !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } @media (max-width: 360px) { #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions { grid-template-columns: minmax(0, 1fr) !important; } } /* Corporate: Add/Edit Client header should keep the Back control compact. This matches the rest of the project's secondary action buttons instead of stretching the Back link into a full-width panel. */ :where(#appContent, .portal-content) .corporate-client-form-header { align-items: flex-start !important; } :where(#appContent, .portal-content) .corporate-client-form-header > :first-child { min-width: 0 !important; } :where(#appContent, .portal-content) .corporate-client-form-back-wrap { width: auto !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .corporate-client-form-back { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .corporate-client-form-header { gap: 0.75rem !important; } :where(#appContent, .portal-content) .corporate-client-form-header > .corporate-client-form-back-wrap { width: auto !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) .corporate-client-form-header > .corporate-client-form-back-wrap > .corporate-client-form-back { width: auto !important; min-width: 0 !important; } } /* Billing / Add Expense: match the Cashbook mobile action layout. Keep Cancel + Record Expense as a clean two-column row on mobile, while preserving compact right-aligned actions on larger screens. */ :where(#appContent, .portal-content) .billing-expense-form-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .billing-expense-form-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: auto !important; min-width: 6.5rem !important; max-width: 100% !important; justify-content: center !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .billing-expense-form-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .billing-expense-form-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Corporate / Add Client: mobile action buttons should use the same two-column layout as the Cashbook-style action rows. */ :where(#appContent, .portal-content) .corporate-client-form-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .corporate-client-form-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: auto !important; min-width: 6.5rem !important; max-width: 100% !important; justify-content: center !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .corporate-client-form-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .corporate-client-form-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* POS sale page: prevent the two-column layout from activating too early, and keep the product/results area readable at in-between widths. */ :where(#appContent, .portal-content) .pos-sale-layout { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) .pos-sale-left, :where(#appContent, .portal-content) .pos-sale-right { min-width: 0 !important; } @media (min-width: 1440px) { :where(#appContent, .portal-content) .pos-sale-layout { grid-template-columns: minmax(0, 1.55fr) minmax(21rem, 0.95fr) !important; align-items: start !important; } } :where(#appContent, .portal-content) .pos-sale-results-table-wrap, :where(#appContent, .portal-content) .pos-sale-results-card, :where(#appContent, .portal-content) .pos-sale-results-table { min-width: 0 !important; } :where(#appContent, .portal-content) .pos-sale-results-table { table-layout: auto !important; } :where(#appContent, .portal-content) .pos-sale-results-table th, :where(#appContent, .portal-content) .pos-sale-results-table td { vertical-align: middle !important; } :where(#appContent, .portal-content) .pos-sale-results-table td:first-child, :where(#appContent, .portal-content) .pos-sale-results-table th:first-child { min-width: 10rem !important; } :where(#appContent, .portal-content) .pos-sale-results-table td:last-child, :where(#appContent, .portal-content) .pos-sale-results-table th:last-child { white-space: nowrap !important; } :where(#appContent, .portal-content) .pos-sale-add-form { flex-wrap: nowrap !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .pos-sale-add-form input[name="qty"] { width: 4rem !important; min-width: 4rem !important; flex: 0 0 4rem !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) .pos-sale-header-actions { flex-wrap: wrap !important; } :where(#appContent, .portal-content) .pos-sale-search-form > button, :where(#appContent, .portal-content) .pos-sale-header-actions > :where(a, button) { width: 100% !important; justify-content: center !important; } :where(#appContent, .portal-content) .pos-sale-results-table th, :where(#appContent, .portal-content) .pos-sale-results-table td { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* POS checkout: primary Complete sale action should be full-width on mobile, with a compact desktop presentation. */ :where(#appContent, .portal-content) .pos-sale-checkout-actions { display: flex !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .pos-sale-complete-btn { width: auto !important; min-width: 12rem !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) .pos-sale-checkout-actions { display: block !important; } :where(#appContent, .portal-content) .pos-sale-complete-btn { width: 100% !important; min-width: 0 !important; } } /* POS Sales: keep Filter and Reset together at tablet / narrow-desktop widths. The global responsive filter normalizer intentionally stacks many filter action groups, but this screen only has one search field and two compact actions, so they should remain a paired row until the phone breakpoint. */ :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-search { grid-column: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions { grid-column: auto !important; display: inline-flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; gap: 0.5rem !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.25rem !important; max-width: max-content !important; min-height: 2.65rem !important; padding-inline: 0.9rem !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0.65rem !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-search, :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-self: stretch !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } @media (max-width: 360px) { :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions { grid-template-columns: minmax(0, 1fr) !important; } } /* POS / Cash Movements: the New movement submit action should fill the form width. This overrides global compact button rules that force .ui-action-control back to auto width. */ :where(#appContent, .portal-content) .pos-cash-movement-actions { display: block !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) .pos-cash-movement-actions > .pos-cash-movement-save, :where(#appContent, .portal-content) button.pos-cash-movement-save.ui-action-control { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 auto !important; justify-content: center !important; } /* Attendance: make primary form actions easy to tap on mobile. Check in, Lookup, and Search should fill the available form width on mobile, while remaining compact and right-aligned on desktop/tablet. */ :where(#appContent, .portal-content) .attendance-form-action-wrap { display: flex !important; justify-content: flex-end !important; width: auto !important; min-width: 0 !important; } :where(#appContent, .portal-content) .attendance-form-action-button, :where(#appContent, .portal-content) button.attendance-form-action-button.ui-action-control { width: auto !important; min-width: 7.5rem !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) .attendance-fast-checkin-form, :where(#appContent, .portal-content) .attendance-trial-lookup-form, :where(#appContent, .portal-content) .attendance-member-search-form { align-items: stretch !important; } :where(#appContent, .portal-content) .attendance-form-action-wrap { display: block !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) .attendance-form-action-button, :where(#appContent, .portal-content) button.attendance-form-action-button.ui-action-control { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; } } /* Attendance logs: dedicated responsive filter grid. The actions must never share the same squeezed row as the input controls. */ #appContent form.attendance-logs-filter-form[data-ui-filters="1"], .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > *, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > * { min-width: 0 !important; max-width: 100% !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-search, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-search { grid-column: span 2 !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: max-content max-content minmax(0, 1fr) !important; align-items: center !important; justify-content: end !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { display: inline-flex !important; width: auto !important; min-width: 7.5rem !important; max-width: max-content !important; justify-content: center !important; white-space: nowrap !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > .ml-auto, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > .ml-auto { margin-left: 0 !important; justify-self: end !important; align-self: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { #appContent form.attendance-logs-filter-form[data-ui-filters="1"], .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-search, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-search, #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions { grid-column: 1 / -1 !important; } } @media (max-width: 640px) { #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > .ml-auto, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > .ml-auto { grid-column: 1 / -1 !important; justify-self: start !important; } } @media (max-width: 420px) { #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions { grid-template-columns: minmax(0, 1fr) !important; } } /* Attendance denials: keep Filter and Export CSV together without making them full-width on desktop. Fields use a stable grid; actions get their own row at tighter widths so the two buttons stay side-by-side. */ #appContent form.attendance-denials-filter-form[data-ui-filters="1"], .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > *, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > * { min-width: 0 !important; max-width: 100% !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-branch, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-branch { grid-column: span 3 !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-from, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-from, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-to, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-to, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-resolved, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-resolved { grid-column: span 2 !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search { grid-column: span 3 !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { display: inline-flex !important; width: auto !important; min-width: 8.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 1024px) { #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-branch, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-branch, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-from, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-from, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-to, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-to, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-resolved, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-resolved, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search { grid-column: span 6 !important; } } @media (max-width: 640px) { #appContent form.attendance-denials-filter-form[data-ui-filters="1"], .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-branch, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-branch, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-from, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-from, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-to, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-to, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-resolved, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-resolved, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search, #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions { grid-column: 1 / -1 !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } @media (max-width: 420px) { #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions { grid-template-columns: minmax(0, 1fr) !important; } } /* Attendance denials refinement: balance the lower filter row. Keep Search and the action buttons on the same row on desktop/tablet, with compact buttons on the right and a wider search field on the left. */ @media (min-width: 641px) { #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search { grid-column: span 6 !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions { grid-column: span 6 !important; width: auto !important; align-self: end !important; justify-content: flex-end !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: auto !important; min-width: 8.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; } } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-search { grid-column: span 5 !important; } #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions { grid-column: span 7 !important; } } @media (max-width: 640px) { #appContent form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions, .portal-content form.attendance-denials-filter-form[data-ui-filters="1"] > .attendance-denials-filter-actions { width: 100% !important; } } /* Attendance Cards: keep Search compact on desktop. The global filter grid can otherwise stretch the Search button across half the card on wide screens. */ #appContent form.attendance-cards-search-form[data-ui-filters="1"], .portal-content form.attendance-cards-search-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; } #appContent form.attendance-cards-search-form[data-ui-filters="1"] > .attendance-cards-search-field, .portal-content form.attendance-cards-search-form[data-ui-filters="1"] > .attendance-cards-search-field { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.attendance-cards-search-form[data-ui-filters="1"] > .attendance-cards-search-button, .portal-content form.attendance-cards-search-form[data-ui-filters="1"] > .attendance-cards-search-button { width: auto !important; min-width: 9rem !important; max-width: max-content !important; justify-self: end !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { #appContent form.attendance-cards-search-form[data-ui-filters="1"], .portal-content form.attendance-cards-search-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } #appContent form.attendance-cards-search-form[data-ui-filters="1"] > .attendance-cards-search-button, .portal-content form.attendance-cards-search-form[data-ui-filters="1"] > .attendance-cards-search-button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-self: stretch !important; } } /* Attendance Rules: keep both Save rules buttons the same size on mobile. The top Save button already becomes full-width through the mobile action grid; the bottom Save button needs the same treatment. */ @media (max-width: 560px) { :where(#appContent, .portal-content) .attendance-rules-top-save-wrap, :where(#appContent, .portal-content) .attendance-rules-bottom-save-wrap { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .attendance-rules-save-button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; } } @media (min-width: 561px) { :where(#appContent, .portal-content) .attendance-rules-bottom-save-wrap { justify-content: flex-end !important; } :where(#appContent, .portal-content) .attendance-rules-save-button { width: auto !important; min-width: 8.5rem !important; max-width: max-content !important; } } /* Lockers dashboard: key mobile operational actions should fill the card width. The global compact button rule forces action controls to width:auto, so this restores the intended full-width mobile treatment for Check-in / Check-out and New rental. */ @media (max-width: 767.98px) { :where(#appContent, .portal-content) .lockers-dashboard-primary-action, :where(#appContent, .portal-content) a.lockers-dashboard-primary-action.ui-action-control { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; display: inline-flex !important; justify-content: center !important; } } /* Lockers day-use: Issue key should fill the available width on mobile. This overrides the global compact action-control rules for this primary form action. */ @media (max-width: 767.98px) { :where(#appContent, .portal-content) .lockers-day-use-issue-key-button, :where(#appContent, .portal-content) button.lockers-day-use-issue-key-button.ui-action-control { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; display: inline-flex !important; justify-content: center !important; } } /* Lockers / Rentals: keep Search and Reset compact on desktop. The global filter rules can stretch direct buttons; this page should use a balanced search field with compact desktop actions and two-column mobile actions. */ :where(#appContent, .portal-content) form.lockers-rentals-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(16rem, 28rem) auto auto !important; align-items: center !important; justify-content: start !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) form.lockers-rentals-filter-form[data-ui-filters="1"] > .lockers-rentals-filter-search { width: 100% !important; min-width: 0 !important; max-width: 28rem !important; } :where(#appContent, .portal-content) form.lockers-rentals-filter-form[data-ui-filters="1"] > .lockers-rentals-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) form.lockers-rentals-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; } :where(#appContent, .portal-content) form.lockers-rentals-filter-form[data-ui-filters="1"] > .lockers-rentals-filter-search { grid-column: 1 / -1 !important; max-width: none !important; } :where(#appContent, .portal-content) form.lockers-rentals-filter-form[data-ui-filters="1"] > .lockers-rentals-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Lockers / Create Rental: primary/supporting actions should fill the card width on mobile, matching the rest of the mobile action pattern. */ @media (max-width: 767.98px) { :where(#appContent, .portal-content) .lockers-rental-create-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .lockers-rental-create-action, :where(#appContent, .portal-content) .lockers-rental-create-action.ui-action-control { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; } } /* Lockers / Rentals table: keep normal rows clean by hiding the early-end refund/void options behind a single End rental disclosure. */ :where(#appContent, .portal-content) .lockers-rentals-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } :where(#appContent, .portal-content) .lockers-rentals-actions-cell { min-width: 9.5rem !important; vertical-align: top !important; } :where(#appContent, .portal-content) .lockers-rentals-end-disclosure { display: inline-block !important; max-width: min(48rem, calc(100vw - 2rem)) !important; text-align: left !important; } :where(#appContent, .portal-content) .lockers-rentals-end-disclosure > summary { cursor: pointer !important; list-style: none !important; } :where(#appContent, .portal-content) .lockers-rentals-end-disclosure > summary::-webkit-details-marker { display: none !important; } :where(#appContent, .portal-content) .lockers-rentals-open-end { width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; justify-content: center !important; white-space: nowrap !important; } :where(#appContent, .portal-content) .lockers-rentals-end-panel { margin-top: 0.5rem !important; margin-left: auto !important; width: min(48rem, calc(100vw - 2rem)) !important; padding: 0.75rem !important; border: 1px solid #dbeafe !important; border-radius: 1rem !important; background: #fff !important; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important; } :where(#appContent, .portal-content) .lockers-rentals-end-panel-title { font-size: 0.75rem !important; line-height: 1rem !important; font-weight: 700 !important; color: #0f172a !important; } :where(#appContent, .portal-content) .lockers-rentals-end-help, :where(#appContent, .portal-content) .lockers-rentals-end-note { margin-top: 0.25rem !important; font-size: 0.6875rem !important; line-height: 1rem !important; color: #64748b !important; } :where(#appContent, .portal-content) .lockers-rentals-end-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; margin-top: 0.75rem !important; align-items: end !important; } :where(#appContent, .portal-content) .lockers-rentals-end-control { display: grid !important; gap: 0.25rem !important; min-width: 0 !important; white-space: normal !important; font-size: 0.6875rem !important; line-height: 1rem !important; color: #475569 !important; } :where(#appContent, .portal-content) .lockers-rentals-end-check { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; min-height: 2.5rem !important; padding: 0.5rem 0.625rem !important; border: 1px solid #e2e8f0 !important; border-radius: 0.75rem !important; background: #f8fafc !important; font-size: 0.6875rem !important; line-height: 1rem !important; color: #475569 !important; white-space: normal !important; } :where(#appContent, .portal-content) .lockers-rentals-end-input, :where(#appContent, .portal-content) .lockers-rentals-end-select { width: 100% !important; min-width: 0 !important; height: 2.5rem !important; padding: 0.5rem 0.625rem !important; border: 1px solid #cbd5e1 !important; border-radius: 0.75rem !important; background: #fff !important; font-size: 0.75rem !important; color: #0f172a !important; } :where(#appContent, .portal-content) .lockers-rentals-end-note { padding: 0.5rem 0.625rem !important; border: 1px dashed #cbd5e1 !important; border-radius: 0.75rem !important; background: #f8fafc !important; } :where(#appContent, .portal-content) .lockers-rentals-end-note-invoice { grid-column: 1 / -1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } :where(#appContent, .portal-content) .lockers-rentals-end-actions { display: flex !important; justify-content: flex-end !important; margin-top: 0.75rem !important; } :where(#appContent, .portal-content) .lockers-rentals-end-button { width: auto !important; min-width: 9rem !important; max-width: max-content !important; justify-content: center !important; white-space: nowrap !important; } @media (min-width: 641px) { :where(#appContent, .portal-content) .lockers-rentals-end-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .lockers-rentals-actions-cell { min-width: 8rem !important; text-align: right !important; } :where(#appContent, .portal-content) .lockers-rentals-end-disclosure { width: auto !important; max-width: max-content !important; text-align: right !important; } :where(#appContent, .portal-content) .lockers-rentals-open-end { width: auto !important; min-width: 0 !important; max-width: max-content !important; height: 2rem !important; min-height: 2rem !important; padding: 0 0.625rem !important; font-size: 0.6875rem !important; line-height: 1 !important; border-radius: 0.625rem !important; } :where(#appContent, .portal-content) .lockers-rentals-end-disclosure[open] { width: calc(100vw - 2rem) !important; max-width: calc(100vw - 2rem) !important; } :where(#appContent, .portal-content) .lockers-rentals-end-disclosure[open] > summary { margin-left: auto !important; } :where(#appContent, .portal-content) .lockers-rentals-end-panel { width: calc(100vw - 2rem) !important; max-width: calc(100vw - 2rem) !important; text-align: left !important; } :where(#appContent, .portal-content) .lockers-rentals-end-grid { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) .lockers-rentals-end-actions, :where(#appContent, .portal-content) .lockers-rentals-end-button { width: 100% !important; } :where(#appContent, .portal-content) .lockers-rentals-end-button { max-width: 100% !important; } } /* Resources / Bookings: Create booking is the primary form action, so it should fill the available width on mobile while staying compact on desktop. */ @media (max-width: 767.98px) { :where(#appContent, .portal-content) .resources-booking-create-button, :where(#appContent, .portal-content) button.resources-booking-create-button.ui-action-control { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; display: inline-flex !important; justify-content: center !important; } } /* Resources / Reports: keep Apply and Reset together at mid widths. The global filter helpers can make these actions wrap into separate rows; this page only has two short actions, so keep them as a single action group. */ :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(10rem, 13.75rem) minmax(10rem, 13.75rem) auto !important; align-items: end !important; justify-content: start !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-field { width: 100% !important; min-width: 0 !important; max-width: 13.75rem !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-actions > .resources-reports-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-field { max-width: none !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-actions > .resources-reports-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Resources / Create: make all form actions easy to tap on mobile, while keeping them compact/right-aligned on tablet and desktop. */ :where(#appContent, .portal-content) .resources-create-actions { align-items: stretch !important; } :where(#appContent, .portal-content) .resources-create-actions > .resources-create-action { justify-content: center !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) .resources-create-actions { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .resources-create-actions > .resources-create-action, :where(#appContent, .portal-content) .resources-create-actions > button.resources-create-action.ui-action-control, :where(#appContent, .portal-content) .resources-create-actions > a.resources-create-action.ui-action-control { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; display: inline-flex !important; justify-content: center !important; } } @media (min-width: 768px) { :where(#appContent, .portal-content) .resources-create-actions { align-items: center !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .resources-create-actions > .resources-create-action { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } } /* Classes / Schedule: keep Filter and Reset together at tablet and narrow-desktop widths instead of letting the action pair wrap into two rows. */ :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(10rem, 13.75rem) minmax(10rem, 13.75rem) auto !important; align-items: end !important; justify-content: start !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-field { width: 100% !important; min-width: 0 !important; max-width: 13.75rem !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-actions > .classes-schedule-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-field { max-width: none !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-actions > .classes-schedule-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Classes / Types: keep Filter and Reset together at tablet and narrow-desktop widths instead of wrapping the action pair into two rows. */ :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(14rem, 26rem) auto !important; align-items: end !important; justify-content: start !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-field { width: 100% !important; min-width: 0 !important; max-width: 26rem !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-actions > .classes-types-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-field { max-width: none !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-actions > .classes-types-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Communication / Templates: keep Filter compact on larger screens, but make it full-width and easy to tap on mobile. */ :where(#appContent, .portal-content) form.communication-templates-filter-form[data-ui-filters="1"] > .communication-templates-filter-actions { width: auto !important; min-width: 0 !important; } :where(#appContent, .portal-content) form.communication-templates-filter-form[data-ui-filters="1"] .communication-templates-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) form.communication-templates-filter-form[data-ui-filters="1"] > .communication-templates-filter-actions { width: 100% !important; } :where(#appContent, .portal-content) form.communication-templates-filter-form[data-ui-filters="1"] .communication-templates-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Communication / Templates form: Back should be easy to tap on mobile, but remain compact in the desktop header. */ :where(#appContent, .portal-content) .communication-template-form-back-row { width: auto !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .communication-template-form-back { width: auto !important; max-width: max-content !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .communication-template-form-header-stack, :where(#appContent, .portal-content) .communication-template-form-back-row { width: 100% !important; max-width: 100% !important; align-items: stretch !important; } :where(#appContent, .portal-content) .communication-template-form-back-row { display: block !important; } :where(#appContent, .portal-content) .communication-template-form-back { width: 100% !important; max-width: 100% !important; } } /* Communication / Templates create/edit: the header stacks below lg, so the Back action must become full-width across that entire stacked/mobile range. */ @media (max-width: 1024px) { :where(#appContent, .portal-content) .communication-template-form-header-stack, :where(#appContent, .portal-content) .communication-template-form-back-row { width: 100% !important; max-width: 100% !important; align-items: stretch !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .communication-template-form-back-row { display: block !important; } :where(#appContent, .portal-content) .communication-template-form-back { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; } } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { :where(#appContent, .portal-content) .communication-template-form-back-row { width: auto !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .communication-template-form-back { width: auto !important; min-width: 0 !important; max-width: max-content !important; } } /* Communication templates create/edit header: Back is full-width only on phone. Tablet and desktop should keep the Back control compact. */ :where(#appContent, .portal-content) .communication-template-form-header { min-width: 0 !important; } :where(#appContent, .portal-content) .communication-template-form-header-stack, :where(#appContent, .portal-content) .communication-template-form-tabs-wrap, :where(#appContent, .portal-content) .communication-template-form-back-row { min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) .communication-template-form-back { display: inline-flex !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 767.98px) { :where(#appContent, .portal-content) .communication-template-form-header { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .communication-template-form-header-stack, :where(#appContent, .portal-content) .communication-template-form-tabs-wrap, :where(#appContent, .portal-content) .communication-template-form-back-row { width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) .communication-template-form-back-row { display: block !important; } :where(#appContent, .portal-content) .communication-template-form-back-row > .communication-template-form-back { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } @media (min-width: 768px) { :where(#appContent, .portal-content) .communication-template-form-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } :where(#appContent, .portal-content) .communication-template-form-header > * { width: auto !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .communication-template-form-header-stack { width: auto !important; flex: 0 0 auto !important; align-items: flex-end !important; } :where(#appContent, .portal-content) .communication-template-form-tabs-wrap, :where(#appContent, .portal-content) .communication-template-form-back-row { width: auto !important; max-width: max-content !important; } :where(#appContent, .portal-content) .communication-template-form-back-row { display: flex !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .communication-template-form-back-row > .communication-template-form-back { width: auto !important; min-width: 0 !important; max-width: max-content !important; } } /* Communication template create/edit: Back button responsive correction. Phone widths use a full-width Back button; small tablet and up keep it compact. */ @media (max-width: 575.98px) { :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-header-stack, :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back-row { width: 100% !important; max-width: 100% !important; min-width: 0 !important; align-items: stretch !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; justify-content: center !important; } } @media (min-width: 576px) { :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back-row { width: auto !important; max-width: max-content !important; min-width: 0 !important; align-self: flex-start !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back { width: auto !important; max-width: max-content !important; min-width: 7.5rem !important; flex: 0 0 auto !important; justify-content: center !important; } } @media (min-width: 768px) { :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back-row { align-self: flex-end !important; justify-content: flex-end !important; } } /* Final correction: /templates/create Back button. Full-width only at 560px and below; compact from 561px upward. */ @media (max-width: 560px) { :where(#appContent, .portal-content) .communication-template-form-header { align-items: stretch !important; } :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-header-stack, :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back-row { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; align-self: stretch !important; } :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back-row > .communication-template-form-back { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; } } @media (min-width: 560.02px) { :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back-row { display: flex !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; align-self: flex-start !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back-row > .communication-template-form-back { display: inline-flex !important; width: auto !important; min-width: 7.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; } } @media (min-width: 768px) { :where(#appContent, .portal-content) .communication-template-form-header .communication-template-form-back-row { align-self: flex-end !important; justify-content: flex-end !important; } } /* Plans create: action buttons should be full-width on mobile only. */ :where(#appContent, .portal-content) .plans-create-actions { align-items: center !important; } :where(#appContent, .portal-content) .plans-create-actions > .plans-create-action { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .plans-create-actions { align-items: stretch !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .plans-create-actions > .plans-create-action { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; } } /* Plans edit: Save changes and Cancel are full-width on mobile only. */ :where(#appContent, .portal-content) .plans-edit-actions { align-items: center !important; } :where(#appContent, .portal-content) .plans-edit-actions > .plans-edit-action { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .plans-edit-actions { flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .plans-edit-actions > .plans-edit-action { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; } } /* Communication / Logs: Filter and Reset should be full-width tap targets on phone screens, while staying compact on tablet and desktop. */ :where(#appContent, .portal-content) .communication-logs-filter-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .communication-logs-filter-action { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .communication-logs-filter-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .communication-logs-filter-action { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; } } /* Communication / Automations create/edit: Back is full-width only on phone screens and compact on tablet/desktop. */ :where(#appContent, .portal-content) .communication-automation-form-back-row { display: flex !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; align-self: flex-start !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) .communication-automation-form-back { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } @media (max-width: 560px) { :where(#appContent, .portal-content) .communication-automation-form-header { align-items: stretch !important; } :where(#appContent, .portal-content) .communication-automation-form-back-row { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; align-self: stretch !important; } :where(#appContent, .portal-content) .communication-automation-form-back { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; } } @media (min-width: 768px) { :where(#appContent, .portal-content) .communication-automation-form-back-row { align-self: flex-end !important; justify-content: flex-end !important; } } /* Communication / Automations create/edit: final mobile Back width fix. The action wrapper must also stretch on phone widths; otherwise the Back button can only fill its content-sized parent. */ @media (max-width: 560px) { :where(#appContent, .portal-content) .communication-automation-form-header, :where(#appContent, .portal-content) .communication-automation-form-actions, :where(#appContent, .portal-content) .communication-automation-form-back-row { width: 100% !important; max-width: none !important; min-width: 0 !important; align-self: stretch !important; } :where(#appContent, .portal-content) .communication-automation-form-actions { display: flex !important; align-items: stretch !important; } :where(#appContent, .portal-content) .communication-automation-form-back { display: flex !important; width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; } } @media (min-width: 561px) { :where(#appContent, .portal-content) .communication-automation-form-actions, :where(#appContent, .portal-content) .communication-automation-form-back-row, :where(#appContent, .portal-content) .communication-automation-form-back { width: auto !important; max-width: max-content !important; } } /* Communication / Automations create: verified Back button width behavior. Phone/mobile widths use full width; tablet and desktop stay compact. */ @media (max-width: 640px) { .communication-automation-form-header { align-items: stretch !important; } .communication-automation-form-actions, .communication-automation-form-back-row { width: 100% !important; min-width: 0 !important; max-width: none !important; align-self: stretch !important; } .communication-automation-form-actions { display: flex !important; align-items: stretch !important; } .communication-automation-form-back-row { display: flex !important; justify-content: stretch !important; } .communication-automation-form-back-row > .communication-automation-form-back { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 auto !important; justify-content: center !important; } } @media (min-width: 641px) { .communication-automation-form-actions, .communication-automation-form-back-row, .communication-automation-form-back-row > .communication-automation-form-back { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } .communication-automation-form-back-row { justify-content: flex-end !important; } } /* Communication / Automations create: definitive Back width breakpoint. Default the row/button to full width, then only compact them above 560px. This avoids Tailwind sm/lg utilities and earlier compact overrides winning. */ .communication-automation-form-header .communication-automation-form-actions, .communication-automation-form-header .communication-automation-form-back-row, .communication-automation-form-header .communication-automation-form-back-row > .communication-automation-form-back { box-sizing: border-box !important; } @media (max-width: 560.98px) { .communication-automation-form-header, .communication-automation-form-header .communication-automation-form-actions, .communication-automation-form-header .communication-automation-form-back-row { width: 100% !important; min-width: 0 !important; max-width: none !important; align-items: stretch !important; align-self: stretch !important; } .communication-automation-form-header .communication-automation-form-actions, .communication-automation-form-header .communication-automation-form-back-row { display: flex !important; justify-content: stretch !important; } .communication-automation-form-header .communication-automation-form-back-row > .communication-automation-form-back { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; } } @media (min-width: 561px) { .communication-automation-form-header .communication-automation-form-actions { width: auto !important; max-width: max-content !important; align-self: flex-start !important; align-items: flex-start !important; } .communication-automation-form-header .communication-automation-form-back-row { width: auto !important; max-width: max-content !important; align-self: flex-start !important; justify-content: flex-start !important; } .communication-automation-form-header .communication-automation-form-back-row > .communication-automation-form-back { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; } } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { .communication-automation-form-header .communication-automation-form-actions, .communication-automation-form-header .communication-automation-form-back-row { align-self: flex-end !important; align-items: flex-end !important; justify-content: flex-end !important; } } /* Staff: keep Filter and Reset together at intermediate widths. Desktop/tablet actions remain compact; phone actions use a clean two-column row. */ :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(16rem, 1fr) auto !important; align-items: end !important; gap: 0.75rem !important; } :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] > .staff-filter-search { min-width: 0 !important; width: 100% !important; } :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] > .staff-filter-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: end !important; justify-content: flex-end !important; gap: 0.5rem !important; width: auto !important; min-width: max-content !important; max-width: none !important; } :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] > .staff-filter-actions > .staff-filter-action { width: auto !important; min-width: 6.5rem !important; max-width: none !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 700px) { :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] > .staff-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; min-width: 0 !important; justify-content: stretch !important; } :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] > .staff-filter-actions > .staff-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Staff / Create: keep the Back control compact on tablet/small desktop, but make it genuinely full-width on phone screens. Also make form actions full-width on mobile despite global compact action rules. */ :where(#appContent, .portal-content) .staff-create-header { align-items: flex-start !important; } :where(#appContent, .portal-content) .staff-create-title { min-width: 0 !important; } :where(#appContent, .portal-content) .staff-create-back-wrap { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } :where(#appContent, .portal-content) .staff-create-back { width: auto !important; min-width: 0 !important; max-width: max-content !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) .staff-create-actions { width: auto !important; max-width: 100% !important; } :where(#appContent, .portal-content) .staff-create-action { width: auto !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } @media (max-width: 560px) { :where(#appContent, .portal-content) .staff-create-header { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .staff-create-back-wrap, :where(#appContent, .portal-content) .staff-create-back { width: 100% !important; max-width: none !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .staff-create-form-footer { align-items: stretch !important; } :where(#appContent, .portal-content) .staff-create-actions, :where(#appContent, .portal-content) .staff-create-action { width: 100% !important; max-width: none !important; } } /* Staff / Create: final Back button phone-width correction. Keep tablet/small desktop compact, but make the Back control span the full row on mobile. */ @media (max-width: 640px) { :where(#appContent, .portal-content) .staff-create-header { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .staff-create-back-wrap { display: block !important; width: 100% !important; max-width: none !important; flex: 0 0 100% !important; align-self: stretch !important; } :where(#appContent, .portal-content) .staff-create-back-wrap > .staff-create-back { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 auto !important; justify-content: center !important; text-align: center !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) .staff-create-header { flex-direction: row !important; align-items: flex-start !important; } :where(#appContent, .portal-content) .staff-create-back-wrap { width: auto !important; flex: 0 0 auto !important; align-self: auto !important; } :where(#appContent, .portal-content) .staff-create-back-wrap > .staff-create-back { width: auto !important; max-width: max-content !important; } } /* Staff / Create: hard override for phone-width Back button. 560px and below must span the full available row; above that it stays compact. */ @media (max-width: 560px) { html body #appContent .staff-create-header, html body .portal-content .staff-create-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } html body #appContent .staff-create-back-wrap, html body .portal-content .staff-create-back-wrap { display: block !important; width: 100% !important; min-width: 100% !important; max-width: none !important; flex: 0 0 100% !important; align-self: stretch !important; } html body #appContent .staff-create-back-wrap > a.staff-create-back, html body .portal-content .staff-create-back-wrap > a.staff-create-back, html body a.staff-create-back.ui-action-control { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } } @media (min-width: 561px) { html body #appContent .staff-create-header, html body .portal-content .staff-create-header { flex-direction: row !important; align-items: flex-start !important; } html body #appContent .staff-create-back-wrap, html body .portal-content .staff-create-back-wrap { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; align-self: auto !important; } html body #appContent .staff-create-back-wrap > a.staff-create-back, html body .portal-content .staff-create-back-wrap > a.staff-create-back, html body a.staff-create-back.ui-action-control { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } } /* Project mobile breakpoint standardization. Treat 640px and below as phone/mobile for full-width primary/navigation actions; keep tablet and desktop compact from 641px upward. */ @media (max-width: 640px) { html body #appContent .staff-create-header, html body .portal-content .staff-create-header, html body #appContent .communication-template-form-header, html body .portal-content .communication-template-form-header, html body #appContent .communication-automation-form-header, html body .portal-content .communication-automation-form-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } html body #appContent .staff-create-back-wrap, html body .portal-content .staff-create-back-wrap, html body #appContent .communication-template-form-header .communication-template-form-header-stack, html body .portal-content .communication-template-form-header .communication-template-form-header-stack, html body #appContent .communication-template-form-header .communication-template-form-back-row, html body .portal-content .communication-template-form-header .communication-template-form-back-row, html body #appContent .communication-automation-form-header .communication-automation-form-actions, html body .portal-content .communication-automation-form-header .communication-automation-form-actions, html body #appContent .communication-automation-form-header .communication-automation-form-back-row, html body .portal-content .communication-automation-form-header .communication-automation-form-back-row { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; align-self: stretch !important; align-items: stretch !important; justify-content: stretch !important; box-sizing: border-box !important; } html body #appContent .staff-create-back-wrap > a.staff-create-back, html body .portal-content .staff-create-back-wrap > a.staff-create-back, html body #appContent a.staff-create-back.ui-action-control, html body .portal-content a.staff-create-back.ui-action-control, html body #appContent .communication-template-form-header .communication-template-form-back-row > .communication-template-form-back, html body .portal-content .communication-template-form-header .communication-template-form-back-row > .communication-template-form-back, html body #appContent .communication-automation-form-header .communication-automation-form-back-row > .communication-automation-form-back, html body .portal-content .communication-automation-form-header .communication-automation-form-back-row > .communication-automation-form-back { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } } @media (min-width: 641px) { html body #appContent .staff-create-header, html body .portal-content .staff-create-header, html body #appContent .communication-template-form-header, html body .portal-content .communication-template-form-header, html body #appContent .communication-automation-form-header, html body .portal-content .communication-automation-form-header { flex-direction: row !important; align-items: flex-start !important; } html body #appContent .staff-create-back-wrap, html body .portal-content .staff-create-back-wrap, html body #appContent .communication-template-form-header .communication-template-form-back-row, html body .portal-content .communication-template-form-header .communication-template-form-back-row, html body #appContent .communication-automation-form-header .communication-automation-form-actions, html body .portal-content .communication-automation-form-header .communication-automation-form-actions, html body #appContent .communication-automation-form-header .communication-automation-form-back-row, html body .portal-content .communication-automation-form-header .communication-automation-form-back-row { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; align-self: flex-start !important; align-items: flex-start !important; justify-content: flex-start !important; } html body #appContent .staff-create-back-wrap > a.staff-create-back, html body .portal-content .staff-create-back-wrap > a.staff-create-back, html body #appContent a.staff-create-back.ui-action-control, html body .portal-content a.staff-create-back.ui-action-control, html body #appContent .communication-template-form-header .communication-template-form-back-row > .communication-template-form-back, html body .portal-content .communication-template-form-header .communication-template-form-back-row > .communication-template-form-back, html body #appContent .communication-automation-form-header .communication-automation-form-back-row > .communication-automation-form-back, html body .portal-content .communication-automation-form-header .communication-automation-form-back-row > .communication-automation-form-back { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } } /* Staff / Roles / Create: Save role follows the project mobile rule. Full width on phone/mobile (640px and below), compact on tablet/desktop. */ :where(#appContent, .portal-content) .staff-role-form-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .staff-role-save-btn { width: auto !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .staff-role-form-actions { width: 100% !important; align-items: stretch !important; } :where(#appContent, .portal-content) .staff-role-save-btn { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) .staff-role-save-btn { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } } /* Inventory / Products: apply the project 640px mobile action rule. Header and filter actions become full-width on phones, while tablet/desktop stay compact. Table row actions remain compact to avoid tall mobile rows. */ :where(#appContent, .portal-content) .inventory-products-header-actions, :where(#appContent, .portal-content) .inventory-products-filter-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .inventory-products-action, :where(#appContent, .portal-content) .inventory-products-filter-action, :where(#appContent, .portal-content) .inventory-products-empty-action { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) .inventory-products-table-actions { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.35rem !important; white-space: nowrap !important; } :where(#appContent, .portal-content) .inventory-products-row-action-form { display: inline-flex !important; margin: 0 !important; } :where(#appContent, .portal-content) .inventory-products-row-action { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .inventory-products-header { align-items: stretch !important; } :where(#appContent, .portal-content) .inventory-products-header-actions, :where(#appContent, .portal-content) .inventory-products-filter-actions { width: 100% !important; align-items: stretch !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .inventory-products-action, :where(#appContent, .portal-content) .inventory-products-filter-action, :where(#appContent, .portal-content) .inventory-products-empty-action { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) .inventory-products-header-actions, :where(#appContent, .portal-content) .inventory-products-filter-actions { width: auto !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .inventory-products-action, :where(#appContent, .portal-content) .inventory-products-filter-action, :where(#appContent, .portal-content) .inventory-products-empty-action { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } } /* Inventory / Products: refine responsive action layout. - Header actions stay in one balanced two-column row on mobile. - Filter + Reset stay grouped together at tablet/desktop widths and use a two-column row on mobile instead of wrapping apart. */ @media (max-width: 640px) { :where(#appContent, .portal-content) .inventory-products-header-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .inventory-products-header-actions > .inventory-products-action { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: initial !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } :where(#appContent, .portal-content) .inventory-products-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .inventory-products-filter-actions > .inventory-products-filter-action { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: initial !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) .inventory-products-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 220px) max-content !important; align-items: end !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .inventory-products-filter-form[data-ui-filters="1"] > * { min-width: 0 !important; } :where(#appContent, .portal-content) .inventory-products-filter-actions { display: inline-flex !important; width: auto !important; flex-wrap: nowrap !important; align-items: end !important; justify-content: flex-end !important; justify-self: end !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .inventory-products-filter-actions > .inventory-products-filter-action { width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } } /* Inventory / Products: final filter action stabilization. At tablet / narrow desktop widths, keep Filter and Reset grouped together on one compact row instead of letting them stack or spread apart. */ #appContent form.inventory-products-filter-form[data-ui-filters="1"], .portal-content form.inventory-products-filter-form[data-ui-filters="1"] { min-width: 0 !important; } @media (min-width: 641px) and (max-width: 900px) { #appContent form.inventory-products-filter-form[data-ui-filters="1"], .portal-content form.inventory-products-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(12rem, 220px) !important; align-items: end !important; gap: 0.5rem !important; } #appContent form.inventory-products-filter-form[data-ui-filters="1"] > .inventory-products-filter-actions, .portal-content form.inventory-products-filter-form[data-ui-filters="1"] > .inventory-products-filter-actions { grid-column: 1 / -1 !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; min-width: 0 !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; gap: 0.5rem !important; } #appContent form.inventory-products-filter-form[data-ui-filters="1"] > .inventory-products-filter-actions > .inventory-products-filter-action, .portal-content form.inventory-products-filter-form[data-ui-filters="1"] > .inventory-products-filter-actions > .inventory-products-filter-action { width: auto !important; max-width: max-content !important; min-width: 6.5rem !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (min-width: 901px) { #appContent form.inventory-products-filter-form[data-ui-filters="1"], .portal-content form.inventory-products-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 220px) max-content !important; align-items: end !important; gap: 0.5rem !important; } #appContent form.inventory-products-filter-form[data-ui-filters="1"] > .inventory-products-filter-actions, .portal-content form.inventory-products-filter-form[data-ui-filters="1"] > .inventory-products-filter-actions { grid-column: auto !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; flex-wrap: nowrap !important; justify-self: end !important; justify-content: flex-end !important; gap: 0.5rem !important; } #appContent form.inventory-products-filter-form[data-ui-filters="1"] > .inventory-products-filter-actions > .inventory-products-filter-action, .portal-content form.inventory-products-filter-form[data-ui-filters="1"] > .inventory-products-filter-actions > .inventory-products-filter-action { width: auto !important; max-width: max-content !important; min-width: 6.5rem !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } /* Inventory / Product create-edit form: apply the project 640px mobile action rule. Mobile (640px and below) uses full-width navigation/actions; tablet and desktop stay compact. */ :where(#appContent, .portal-content) .inventory-product-form-header { align-items: flex-start !important; justify-content: space-between !important; min-width: 0 !important; } :where(#appContent, .portal-content) .inventory-product-form-back-wrap { display: flex !important; justify-content: flex-end !important; width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; min-width: 0 !important; } :where(#appContent, .portal-content) .inventory-product-form-back { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } :where(#appContent, .portal-content) .inventory-product-form-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .inventory-product-form-actions > .inventory-product-form-action { width: auto !important; max-width: max-content !important; min-width: 6.5rem !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .inventory-product-form-header { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .inventory-product-form-back-wrap { display: block !important; width: 100% !important; max-width: none !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content) .inventory-product-form-back { width: 100% !important; max-width: none !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) .inventory-product-form-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .inventory-product-form-actions > .inventory-product-form-action { width: 100% !important; max-width: none !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } } /* Inventory product form: final Back button breakpoint fix. Phone/mobile is 640px and below. The wrapper and link must both stretch; otherwise the link may keep a compact visual width even when width:100% is applied. */ @media (max-width: 640px) { .inventory-product-form-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } .inventory-product-form-header > .inventory-product-form-back-wrap, .inventory-product-form-back-wrap { display: flex !important; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; align-self: stretch !important; justify-content: stretch !important; } .inventory-product-form-back-wrap > .inventory-product-form-back, a.inventory-product-form-back { display: inline-flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; align-self: stretch !important; justify-content: center !important; text-align: center !important; } } @media (min-width: 641px) { .inventory-product-form-header > .inventory-product-form-back-wrap, .inventory-product-form-back-wrap { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; align-self: flex-start !important; justify-content: flex-end !important; } .inventory-product-form-back-wrap > .inventory-product-form-back, a.inventory-product-form-back { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; } } /* Inventory product create/edit: hard enforce mobile Back button width. Previous utility/global button rules could keep the visual button compact even when the wrapper was full width. This block is intentionally last and specific. */ @media screen and (max-width: 640px) { html body #appContent .inventory-product-form-header, html body .portal-content .inventory-product-form-header { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; } html body #appContent .inventory-product-form-header > .inventory-product-form-back-wrap, html body .portal-content .inventory-product-form-header > .inventory-product-form-back-wrap, html body #appContent .inventory-product-form-back-wrap, html body .portal-content .inventory-product-form-back-wrap { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; flex: 0 0 100% !important; align-self: stretch !important; justify-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; } html body #appContent .inventory-product-form-header > .inventory-product-form-back-wrap > a.inventory-product-form-back.ui-action-control, html body .portal-content .inventory-product-form-header > .inventory-product-form-back-wrap > a.inventory-product-form-back.ui-action-control, html body #appContent a.inventory-product-form-back.ui-action-control, html body .portal-content a.inventory-product-form-back.ui-action-control { display: flex !important; width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; box-sizing: border-box !important; flex: 0 0 100% !important; align-self: stretch !important; justify-self: stretch !important; justify-content: center !important; text-align: center !important; margin-left: 0 !important; margin-right: 0 !important; } } @media screen and (min-width: 641px) { html body #appContent .inventory-product-form-header > .inventory-product-form-back-wrap, html body .portal-content .inventory-product-form-header > .inventory-product-form-back-wrap, html body #appContent a.inventory-product-form-back.ui-action-control, html body .portal-content a.inventory-product-form-back.ui-action-control { width: auto !important; inline-size: auto !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; } } /* Inventory suppliers: phone-width action controls follow the 640px mobile rule. - /inventory/suppliers: Filter becomes a full-width tap target on phones. - /inventory/suppliers/create: Back is full width on phones only, compact on tablet/PC. */ @media screen and (max-width: 640px) { html body #appContent .inventory-suppliers-filter-action-wrap, html body .portal-content .inventory-suppliers-filter-action-wrap { display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; align-self: stretch !important; } html body #appContent .inventory-suppliers-filter-action, html body .portal-content .inventory-suppliers-filter-action { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } html body #appContent .inventory-supplier-form-header, html body .portal-content .inventory-supplier-form-header { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; width: 100% !important; } html body #appContent .inventory-supplier-form-back-wrap, html body .portal-content .inventory-supplier-form-back-wrap { display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; align-self: stretch !important; justify-self: stretch !important; } html body #appContent a.inventory-supplier-form-back, html body .portal-content a.inventory-supplier-form-back { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; } } @media screen and (min-width: 641px) { html body #appContent .inventory-suppliers-filter-action-wrap, html body .portal-content .inventory-suppliers-filter-action-wrap, html body #appContent .inventory-supplier-form-back-wrap, html body .portal-content .inventory-supplier-form-back-wrap { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } html body #appContent .inventory-suppliers-filter-action, html body .portal-content .inventory-suppliers-filter-action, html body #appContent a.inventory-supplier-form-back, html body .portal-content a.inventory-supplier-form-back { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; } } /* Inventory purchases: apply the 640px mobile action rule. - /inventory/purchases: Filter is a full-width tap target on phones. - /inventory/purchases/create: Cancel and Receive stock are full-width on phones, while staying compact/right-aligned on tablet and desktop. */ @media screen and (max-width: 640px) { html body #appContent .inventory-purchases-filter-action-wrap, html body .portal-content .inventory-purchases-filter-action-wrap { display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; align-self: stretch !important; } html body #appContent .inventory-purchases-filter-action, html body .portal-content .inventory-purchases-filter-action { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } html body #appContent .inventory-purchase-form-actions, html body .portal-content .inventory-purchase-form-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; width: 100% !important; } html body #appContent .inventory-purchase-form-action, html body .portal-content .inventory-purchase-form-action { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; } } @media screen and (min-width: 641px) { html body #appContent .inventory-purchases-filter-action-wrap, html body .portal-content .inventory-purchases-filter-action-wrap { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } html body #appContent .inventory-purchases-filter-action, html body .portal-content .inventory-purchases-filter-action, html body #appContent .inventory-purchase-form-action, html body .portal-content .inventory-purchase-form-action { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; } } /* Inventory purchases/create: hard fix for Cancel + Receive stock actions. Phone/mobile is 640px and below: both actions must use the full card width. Tablet/desktop is 641px and above: actions return to compact/right-aligned. */ .inventory-purchase-form-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } .inventory-purchase-form-actions > .inventory-purchase-form-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { .inventory-purchase-form-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; justify-items: stretch !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } .inventory-purchase-form-actions > .inventory-purchase-form-action, .inventory-purchase-form-actions > a.inventory-purchase-form-action, .inventory-purchase-form-actions > button.inventory-purchase-form-action { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-self: stretch !important; align-self: stretch !important; justify-content: center !important; text-align: center !important; } } @media screen and (min-width: 641px) { .inventory-purchase-form-actions > .inventory-purchase-form-action, .inventory-purchase-form-actions > a.inventory-purchase-form-action, .inventory-purchase-form-actions > button.inventory-purchase-form-action { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; } } /* Inventory suppliers/create: hard fix for Cancel + Save supplier actions. Phone/mobile is 640px and below: both actions must use the full card width. Tablet/desktop is 641px and above: actions return to compact/right-aligned. */ .inventory-supplier-form-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } .inventory-supplier-form-actions > .inventory-supplier-form-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { .inventory-supplier-form-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; justify-items: stretch !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } .inventory-supplier-form-actions > .inventory-supplier-form-action, .inventory-supplier-form-actions > a.inventory-supplier-form-action, .inventory-supplier-form-actions > button.inventory-supplier-form-action { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-self: stretch !important; align-self: stretch !important; justify-content: center !important; text-align: center !important; } } @media screen and (min-width: 641px) { .inventory-supplier-form-actions > .inventory-supplier-form-action, .inventory-supplier-form-actions > a.inventory-supplier-form-action, .inventory-supplier-form-actions > button.inventory-supplier-form-action { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; } } /* Inventory transfers: keep Filter and Reset grouped on tablet/small desktop. Use the project mobile rule: 640px and below switches to a full-width two-column action row. */ :where(#appContent, .portal-content) form.inventory-transfers-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; column-gap: 0.75rem !important; row-gap: 0.75rem !important; } :where(#appContent, .portal-content) form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-search { min-width: 0 !important; } :where(#appContent, .portal-content) form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: max-content !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions > .inventory-transfers-filter-action { width: auto !important; min-width: 6.5rem !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) form.inventory-transfers-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; justify-content: stretch !important; } :where(#appContent, .portal-content) form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions > .inventory-transfers-filter-action { width: 100% !important; min-width: 0 !important; } } /* Inventory transfers: hard fix for Filter/Reset at tablet and small desktop widths. Keep the whole filter bar on one row above the mobile breakpoint, and keep Filter + Reset grouped together instead of splitting into two rows. */ @media screen and (min-width: 641px) { #appContent form.inventory-transfers-filter-form[data-ui-filters="1"], .portal-content form.inventory-transfers-filter-form[data-ui-filters="1"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: end !important; justify-content: space-between !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-search, .portal-content form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-search { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; } #appContent form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions, .portal-content form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions { display: inline-flex !important; flex: 0 0 auto !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: auto !important; max-width: max-content !important; min-width: max-content !important; justify-self: end !important; } #appContent form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions > .inventory-transfers-filter-action, .portal-content form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions > .inventory-transfers-filter-action { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; min-width: 6.5rem !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media screen and (max-width: 640px) { #appContent form.inventory-transfers-filter-form[data-ui-filters="1"], .portal-content form.inventory-transfers-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.65rem !important; } #appContent form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions, .portal-content form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions > .inventory-transfers-filter-action, .portal-content form.inventory-transfers-filter-form[data-ui-filters="1"] > .inventory-transfers-filter-actions > .inventory-transfers-filter-action { width: 100% !important; max-width: none !important; min-width: 0 !important; } } /* Inventory transfers/create: Cancel + Create transfer actions. Phone/mobile is 640px and below: both actions use the full card width. Tablet/desktop is 641px and above: actions stay compact/right-aligned. */ .inventory-transfer-form-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } .inventory-transfer-form-actions > .inventory-transfer-form-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { .inventory-transfer-form-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; justify-items: stretch !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } .inventory-transfer-form-actions > .inventory-transfer-form-action, .inventory-transfer-form-actions > a.inventory-transfer-form-action, .inventory-transfer-form-actions > button.inventory-transfer-form-action { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-self: stretch !important; align-self: stretch !important; justify-content: center !important; text-align: center !important; } } @media screen and (min-width: 641px) { .inventory-transfer-form-actions > .inventory-transfer-form-action, .inventory-transfer-form-actions > a.inventory-transfer-form-action, .inventory-transfer-form-actions > button.inventory-transfer-form-action { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; } } /* Inventory adjustments: keep Filter and Reset grouped on tablet/desktop widths. Mobile follows the project rule: 640px and below uses a clean two-column row. */ @media screen and (min-width: 641px) { #appContent form.inventory-adjustments-filter-form[data-ui-filters="1"], .portal-content form.inventory-adjustments-filter-form[data-ui-filters="1"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: end !important; justify-content: space-between !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-search, .portal-content form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-search { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; } #appContent form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-actions, .portal-content form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-actions { display: inline-flex !important; flex: 0 0 auto !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: auto !important; max-width: max-content !important; min-width: max-content !important; } #appContent form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-actions > .inventory-adjustments-filter-action, .portal-content form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-actions > .inventory-adjustments-filter-action { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; min-width: 6.5rem !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media screen and (max-width: 640px) { #appContent form.inventory-adjustments-filter-form[data-ui-filters="1"], .portal-content form.inventory-adjustments-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.65rem !important; } #appContent form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-actions, .portal-content form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-actions > .inventory-adjustments-filter-action, .portal-content form.inventory-adjustments-filter-form[data-ui-filters="1"] > .inventory-adjustments-filter-actions > .inventory-adjustments-filter-action { width: 100% !important; max-width: none !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } } /* Inventory adjustment create: use the project mobile breakpoint. At 640px and below the Back and Save adjustment controls fill the row; at tablet/desktop widths they return to compact button sizing. */ @media screen and (max-width: 640px) { #appContent .inventory-adjustment-create-header, .portal-content .inventory-adjustment-create-header { align-items: stretch !important; } #appContent .inventory-adjustment-create-back-wrap, .portal-content .inventory-adjustment-create-back-wrap, #appContent .inventory-adjustment-create-actions, .portal-content .inventory-adjustment-create-actions { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; justify-content: stretch !important; align-items: stretch !important; } #appContent .inventory-adjustment-create-back, .portal-content .inventory-adjustment-create-back, #appContent .inventory-adjustment-create-save, .portal-content .inventory-adjustment-create-save { display: inline-flex !important; width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; } } @media screen and (min-width: 641px) { #appContent .inventory-adjustment-create-back-wrap, .portal-content .inventory-adjustment-create-back-wrap, #appContent .inventory-adjustment-create-actions, .portal-content .inventory-adjustment-create-actions { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: flex-end !important; } #appContent .inventory-adjustment-create-back, .portal-content .inventory-adjustment-create-back, #appContent .inventory-adjustment-create-save, .portal-content .inventory-adjustment-create-save { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; } } /* PT / Sessions filter layout: keep controls aligned and keep Filter + Reset grouped. Mobile rule: 640px and below uses the full-width/two-column action pattern. */ #appContent form.pt-sessions-filter-form[data-ui-filters="1"], .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] { display: grid !important; gap: 0.75rem !important; align-items: end !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > :where(.pt-sessions-date-field, .pt-sessions-trainer-field, .pt-sessions-status-field, .pt-sessions-search-field), .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > :where(.pt-sessions-date-field, .pt-sessions-trainer-field, .pt-sessions-status-field, .pt-sessions-search-field) { min-width: 0 !important; width: 100% !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] :where(input, select), .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] :where(input, select) { width: 100% !important; max-width: 100% !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.5rem !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action { justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { #appContent form.pt-sessions-filter-form[data-ui-filters="1"], .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action { width: 100% !important; max-width: none !important; min-width: 0 !important; } } @media screen and (min-width: 641px) { #appContent form.pt-sessions-filter-form[data-ui-filters="1"], .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-search-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-search-field, #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { grid-column: 1 / -1 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { justify-self: end !important; width: auto !important; max-width: max-content !important; min-width: max-content !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action { flex: 0 0 auto !important; width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; } } @media screen and (min-width: 900px) and (max-width: 1199.98px) { #appContent form.pt-sessions-filter-form[data-ui-filters="1"], .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-date-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-date-field { grid-column: span 2 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-trainer-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-trainer-field, #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-status-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-status-field { grid-column: span 3 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-search-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-search-field { grid-column: span 4 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { grid-column: span 2 !important; justify-self: end !important; align-self: end !important; } } @media screen and (min-width: 1200px) { #appContent form.pt-sessions-filter-form[data-ui-filters="1"], .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(9.75rem, 10.75rem) minmax(9.75rem, 10.75rem) minmax(12rem, 13.75rem) minmax(10.5rem, 12rem) minmax(14rem, 1fr) auto !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > :where(.pt-sessions-date-field, .pt-sessions-trainer-field, .pt-sessions-status-field, .pt-sessions-search-field, .pt-sessions-filter-actions), .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > :where(.pt-sessions-date-field, .pt-sessions-trainer-field, .pt-sessions-status-field, .pt-sessions-search-field, .pt-sessions-filter-actions) { grid-column: auto !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { align-self: end !important; justify-self: end !important; } } /* PT / Sessions final responsive guard: prevent Filter/Reset from being clipped at tablet and small-desktop widths while keeping the grouped action layout. */ @media screen and (min-width: 641px) { #appContent form.pt-sessions-filter-form[data-ui-filters="1"], .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-search-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-search-field, #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { grid-column: 1 / -1 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { justify-self: end !important; width: min(100%, 20rem) !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action { width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; white-space: nowrap !important; } } @media screen and (min-width: 900px) and (max-width: 1399.98px) { #appContent form.pt-sessions-filter-form[data-ui-filters="1"], .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-date-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-date-field { grid-column: span 2 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-trainer-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-trainer-field, #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-status-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-status-field { grid-column: span 3 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-search-field, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-search-field { grid-column: span 4 !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { grid-column: span 2 !important; align-self: end !important; justify-self: stretch !important; width: 100% !important; max-width: 100% !important; } } @media screen and (min-width: 1400px) { #appContent form.pt-sessions-filter-form[data-ui-filters="1"], .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(8rem, 10rem) minmax(8rem, 10rem) minmax(10rem, 12rem) minmax(9rem, 10.5rem) minmax(12rem, 1fr) minmax(14rem, 14rem) !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > :where(.pt-sessions-date-field, .pt-sessions-trainer-field, .pt-sessions-status-field, .pt-sessions-search-field, .pt-sessions-filter-actions), .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > :where(.pt-sessions-date-field, .pt-sessions-trainer-field, .pt-sessions-status-field, .pt-sessions-search-field, .pt-sessions-filter-actions) { grid-column: auto !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { align-self: end !important; justify-self: stretch !important; width: 100% !important; } } /* PT / Sessions final fix: on non-mobile widths keep Filter + Reset compact. They should not become two full-width columns; that pattern is mobile-only. */ @media screen and (min-width: 641px) { #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; grid-template-columns: none !important; align-items: end !important; justify-content: flex-end !important; justify-self: end !important; width: auto !important; min-width: max-content !important; max-width: max-content !important; gap: 0.5rem !important; } #appContent form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action, .portal-content form.pt-sessions-filter-form[data-ui-filters="1"] > .pt-sessions-filter-actions > .pt-sessions-filter-action { flex: 0 0 auto !important; width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; justify-content: center !important; white-space: nowrap !important; } } /* PT / Sessions create: keep search/reset compact on non-mobile and Back compact outside mobile. Project breakpoint: 640px and below is mobile. */ #appContent .pt-session-create-header, .portal-content .pt-session-create-header { align-items: flex-start !important; } #appContent .pt-session-create-back-wrap, .portal-content .pt-session-create-back-wrap { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; } #appContent .pt-session-create-back, .portal-content .pt-session-create-back { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; text-align: center !important; justify-content: center !important; white-space: nowrap !important; } #appContent form.pt-session-create-search-form[data-ui-filters="1"], .portal-content form.pt-session-create-search-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; gap: 0.5rem !important; width: 100% !important; } #appContent form.pt-session-create-search-form[data-ui-filters="1"] > .pt-session-create-search-input, .portal-content form.pt-session-create-search-form[data-ui-filters="1"] > .pt-session-create-search-input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.pt-session-create-search-form[data-ui-filters="1"] > .pt-session-create-search-actions, .portal-content form.pt-session-create-search-form[data-ui-filters="1"] > .pt-session-create-search-actions { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; align-items: center !important; gap: 0.5rem !important; width: auto !important; max-width: max-content !important; min-width: max-content !important; } #appContent form.pt-session-create-search-form[data-ui-filters="1"] .pt-session-create-search-action, .portal-content form.pt-session-create-search-form[data-ui-filters="1"] .pt-session-create-search-action { width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { #appContent .pt-session-create-header, .portal-content .pt-session-create-header { align-items: stretch !important; } #appContent .pt-session-create-back-wrap, .portal-content .pt-session-create-back-wrap, #appContent .pt-session-create-back, .portal-content .pt-session-create-back { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; } #appContent form.pt-session-create-search-form[data-ui-filters="1"], .portal-content form.pt-session-create-search-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } #appContent form.pt-session-create-search-form[data-ui-filters="1"] > .pt-session-create-search-actions, .portal-content form.pt-session-create-search-form[data-ui-filters="1"] > .pt-session-create-search-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } #appContent form.pt-session-create-search-form[data-ui-filters="1"] .pt-session-create-search-action, .portal-content form.pt-session-create-search-form[data-ui-filters="1"] .pt-session-create-search-action { width: 100% !important; max-width: none !important; min-width: 0 !important; } } /* PT packages: keep Filter and Reset grouped on non-mobile widths. 640px and below follows the project's mobile action rule. */ #appContent form.pt-packages-filter-form[data-ui-filters="1"], .portal-content form.pt-packages-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.5rem !important; align-items: end !important; width: 100% !important; max-width: 100% !important; } #appContent form.pt-packages-filter-form[data-ui-filters="1"] > :where(input, select), .portal-content form.pt-packages-filter-form[data-ui-filters="1"] > :where(input, select) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions, .portal-content form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions > .pt-packages-filter-action, .portal-content form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions > .pt-packages-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; white-space: nowrap !important; } @media (min-width: 641px) { #appContent form.pt-packages-filter-form[data-ui-filters="1"], .portal-content form.pt-packages-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #appContent form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions, .portal-content form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; max-width: 100% !important; } #appContent form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions > .pt-packages-filter-action, .portal-content form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions > .pt-packages-filter-action { width: auto !important; min-width: 7rem !important; max-width: max-content !important; flex: 0 0 auto !important; } } @media (min-width: 900px) { #appContent form.pt-packages-filter-form[data-ui-filters="1"], .portal-content form.pt-packages-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(16rem, 1fr) minmax(11rem, 0.45fr) max-content !important; } #appContent form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions, .portal-content form.pt-packages-filter-form[data-ui-filters="1"] > .pt-packages-filter-actions { grid-column: auto !important; width: auto !important; justify-content: flex-start !important; } } /* PT packages create/edit: Back is full-width only on mobile (<=640px), compact on tablet/desktop. */ #appContent .pt-package-form-header, .portal-content .pt-package-form-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 0.75rem !important; } #appContent .pt-package-form-header-actions, .portal-content .pt-package-form-header-actions { width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; display: flex !important; justify-content: flex-end !important; } #appContent .pt-package-form-back, .portal-content .pt-package-form-back { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media (max-width: 640px) { #appContent .pt-package-form-header, .portal-content .pt-package-form-header { flex-direction: column !important; align-items: stretch !important; } #appContent .pt-package-form-header-actions, .portal-content .pt-package-form-header-actions, #appContent .pt-package-form-back, .portal-content .pt-package-form-back { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } } @media (min-width: 641px) { #appContent .pt-package-form-header, .portal-content .pt-package-form-header { flex-direction: row !important; align-items: flex-start !important; } #appContent .pt-package-form-header-actions, .portal-content .pt-package-form-header-actions, #appContent .pt-package-form-back, .portal-content .pt-package-form-back { width: auto !important; max-width: max-content !important; } } /* Compliance signed waivers: keep Filter and Reset together on non-mobile widths. Mobile follows the project rule: 640px and below uses a two-column action row. */ #appContent form.compliance-signed-filter-form[data-ui-filters="1"], .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.75rem !important; align-items: end !important; width: 100% !important; max-width: 100% !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] > *, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] > * { min-width: 0 !important; max-width: 100% !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] :where(input, select), .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] :where(input, select) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-action, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media (min-width: 641px) { #appContent form.compliance-signed-filter-form[data-ui-filters="1"], .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions { grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-action, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-action { width: auto !important; min-width: 7rem !important; max-width: max-content !important; flex: 0 0 auto !important; } } @media (min-width: 1400px) { #appContent form.compliance-signed-filter-form[data-ui-filters="1"], .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(16rem, 1.25fr) minmax(12rem, 0.8fr) minmax(20rem, 1fr) max-content !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-search, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-search, #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions { grid-column: auto !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions { width: auto !important; justify-content: flex-start !important; } } /* Compliance signed waivers: avoid clipping Filter/Reset on medium desktop widths. Keep actions as a compact row below the fields until there is enough room for a true one-line layout. */ @media (min-width: 641px) and (max-width: 1399.98px) { #appContent form.compliance-signed-filter-form[data-ui-filters="1"], .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] { overflow: visible !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-actions { grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-action, .portal-content form.compliance-signed-filter-form[data-ui-filters="1"] .compliance-signed-filter-action { width: auto !important; min-width: 7rem !important; max-width: max-content !important; flex: 0 0 auto !important; } } /* Settings / General: Save settings is a primary form action. Use full-width touch target on mobile, compact alignment above 640px. */ #appContent .settings-general-save-actions, .portal-content .settings-general-save-actions { display: flex !important; justify-content: flex-end !important; width: 100% !important; } #appContent .settings-general-save-button, .portal-content .settings-general-save-button { width: auto !important; justify-content: center !important; text-align: center !important; } @media (max-width: 640px) { #appContent .settings-general-save-actions, .portal-content .settings-general-save-actions { justify-content: stretch !important; } #appContent .settings-general-save-button, .portal-content .settings-general-save-button { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* Settings / Branch form: mobile uses full-width primary navigation/actions; tablet and desktop keep the compact action-button behavior. */ :where(#appContent, .portal-content) .settings-branch-form-back-wrap, :where(#appContent, .portal-content) .settings-branch-form-actions { display: flex !important; justify-content: flex-end !important; width: auto !important; } :where(#appContent, .portal-content) .settings-branch-form-back, :where(#appContent, .portal-content) .settings-branch-form-save { width: auto !important; min-width: 0 !important; max-width: max-content !important; justify-content: center !important; text-align: center !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .settings-branch-form-header { align-items: stretch !important; } :where(#appContent, .portal-content) .settings-branch-form-back-wrap, :where(#appContent, .portal-content) .settings-branch-form-actions { width: 100% !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .settings-branch-form-back, :where(#appContent, .portal-content) .settings-branch-form-save { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } } /* Settings / Branches create/edit: hard mobile Back width override. The project-wide action-control rules use strong max-content widths, so this page-specific rule must target both the wrapper and anchor directly. */ @media (max-width: 640px) { #appContent .settings-branch-form-header, .portal-content .settings-branch-form-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } #appContent .settings-branch-form-header .settings-branch-form-back-wrap, .portal-content .settings-branch-form-header .settings-branch-form-back-wrap { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; justify-content: stretch !important; align-items: stretch !important; } #appContent .settings-branch-form-header .settings-branch-form-back-wrap > a.settings-branch-form-back, #appContent .settings-branch-form-header .settings-branch-form-back-wrap > a.settings-branch-form-back.ui-action-control, .portal-content .settings-branch-form-header .settings-branch-form-back-wrap > a.settings-branch-form-back, .portal-content .settings-branch-form-header .settings-branch-form-back-wrap > a.settings-branch-form-back.ui-action-control { display: inline-flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; } } @media (min-width: 641px) { #appContent .settings-branch-form-header .settings-branch-form-back-wrap, .portal-content .settings-branch-form-header .settings-branch-form-back-wrap { width: auto !important; flex: 0 0 auto !important; justify-content: flex-end !important; } #appContent .settings-branch-form-header .settings-branch-form-back-wrap > a.settings-branch-form-back, #appContent .settings-branch-form-header .settings-branch-form-back-wrap > a.settings-branch-form-back.ui-action-control, .portal-content .settings-branch-form-header .settings-branch-form-back-wrap > a.settings-branch-form-back, .portal-content .settings-branch-form-header .settings-branch-form-back-wrap > a.settings-branch-form-back.ui-action-control { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } } /* Settings / Payment methods: keep header Back/Settings controls compact above the mobile breakpoint, and only expand them for true mobile widths. */ @media (min-width: 641px) { #appContent .settings-payment-methods-header, .portal-content .settings-payment-methods-header, #appContent .settings-payment-method-form-header, .portal-content .settings-payment-method-form-header { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; } #appContent .settings-payment-methods-header-actions, .portal-content .settings-payment-methods-header-actions, #appContent .settings-payment-method-form-back-wrap, .portal-content .settings-payment-method-form-back-wrap { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; } #appContent .settings-payment-methods-header-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content .settings-payment-methods-header-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), #appContent .settings-payment-method-form-back-wrap > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content .settings-payment-method-form-back-wrap > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; grid-column: auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (max-width: 640px) { #appContent .settings-payment-methods-header, .portal-content .settings-payment-methods-header, #appContent .settings-payment-method-form-header, .portal-content .settings-payment-method-form-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } #appContent .settings-payment-methods-header-actions, .portal-content .settings-payment-methods-header-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.55rem !important; width: 100% !important; max-width: 100% !important; } #appContent .settings-payment-method-form-back-wrap, .portal-content .settings-payment-method-form-back-wrap { display: flex !important; width: 100% !important; justify-content: stretch !important; align-items: stretch !important; } #appContent .settings-payment-methods-header-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content .settings-payment-methods-header-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), #appContent .settings-payment-method-form-back-wrap > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content .settings-payment-method-form-back-wrap > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; } } /* Settings / Payment methods: keep the Apply action compact on tablet/desktop. Phone widths still get an easy full-width tap target. */ :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filters="1"] { display: flex !important; align-items: stretch !important; gap: 0.5rem !important; width: 100% !important; } :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filters="1"] > select { min-width: 0 !important; } :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filters="1"] > .settings-payment-methods-apply { width: auto !important; min-width: 5.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filters="1"] { flex-direction: column !important; } :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filters="1"] > .settings-payment-methods-apply { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 auto !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filters="1"] { flex-direction: row !important; align-items: center !important; } :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filters="1"] > select { flex: 0 1 20rem !important; max-width: 20rem !important; } } /* Settings / Payment methods: prevent the branch dropdown from inheriting the generic filterbar-off flex-basis as vertical height on mobile. */ @media (max-width: 640px) { :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filters="1"] > select, :where(#appContent, .portal-content) form.settings-payment-methods-filter-form[data-ui-filterbar-off] > select { flex: 0 0 auto !important; width: 100% !important; height: 2.75rem !important; min-height: 2.75rem !important; max-height: 2.75rem !important; line-height: 1.25rem !important; align-self: stretch !important; } } /* Settings / Payment methods create/edit: Save follows the 640px mobile rule. The wrapper and button both need explicit widths so global compact action rules cannot keep the visual button narrow on phones. */ @media (max-width: 640px) { #appContent .settings-payment-method-form-actions, .portal-content .settings-payment-method-form-actions { display: flex !important; width: 100% !important; justify-content: stretch !important; align-items: stretch !important; } #appContent .settings-payment-method-form-actions > .settings-payment-method-form-save, #appContent .settings-payment-method-form-actions > .settings-payment-method-form-save.ui-action-control, .portal-content .settings-payment-method-form-actions > .settings-payment-method-form-save, .portal-content .settings-payment-method-form-actions > .settings-payment-method-form-save.ui-action-control { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; } } @media (min-width: 641px) { #appContent .settings-payment-method-form-actions, .portal-content .settings-payment-method-form-actions { display: flex !important; justify-content: flex-end !important; width: 100% !important; } #appContent .settings-payment-method-form-actions > .settings-payment-method-form-save, #appContent .settings-payment-method-form-actions > .settings-payment-method-form-save.ui-action-control, .portal-content .settings-payment-method-form-actions > .settings-payment-method-form-save, .portal-content .settings-payment-method-form-actions > .settings-payment-method-form-save.ui-action-control { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } } /* Settings / Add-ons create/edit: Back and Save follow the 640px mobile rule. On phones they fill the row; on tablet/desktop they remain compact. */ @media (max-width: 640px) { #appContent .settings-addon-form-header, .portal-content .settings-addon-form-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } #appContent .settings-addon-form-back-wrap, .portal-content .settings-addon-form-back-wrap, #appContent .settings-addon-form-actions, .portal-content .settings-addon-form-actions { display: flex !important; width: 100% !important; max-width: none !important; justify-content: stretch !important; align-items: stretch !important; } #appContent .settings-addon-form-back-wrap > .settings-addon-form-back, #appContent .settings-addon-form-actions > .settings-addon-form-save, .portal-content .settings-addon-form-back-wrap > .settings-addon-form-back, .portal-content .settings-addon-form-actions > .settings-addon-form-save { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (min-width: 641px) { #appContent .settings-addon-form-back-wrap, .portal-content .settings-addon-form-back-wrap, #appContent .settings-addon-form-actions, .portal-content .settings-addon-form-actions { display: flex !important; width: auto !important; justify-content: flex-end !important; align-items: center !important; } #appContent .settings-addon-form-back-wrap > .settings-addon-form-back, #appContent .settings-addon-form-actions > .settings-addon-form-save, .portal-content .settings-addon-form-back-wrap > .settings-addon-form-back, .portal-content .settings-addon-form-actions > .settings-addon-form-save { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } /* Settings / Tax rates create/edit: Back and Save follow the 640px mobile rule. On phones they fill the row; on tablet/desktop they remain compact. */ @media (max-width: 640px) { #appContent .settings-tax-rate-form-header, .portal-content .settings-tax-rate-form-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } #appContent .settings-tax-rate-form-back-wrap, .portal-content .settings-tax-rate-form-back-wrap, #appContent .settings-tax-rate-form-actions, .portal-content .settings-tax-rate-form-actions { display: flex !important; width: 100% !important; max-width: none !important; justify-content: stretch !important; align-items: stretch !important; } #appContent .settings-tax-rate-form-back-wrap > .settings-tax-rate-form-back, #appContent .settings-tax-rate-form-actions > .settings-tax-rate-form-save, .portal-content .settings-tax-rate-form-back-wrap > .settings-tax-rate-form-back, .portal-content .settings-tax-rate-form-actions > .settings-tax-rate-form-save { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (min-width: 641px) { #appContent .settings-tax-rate-form-back-wrap, .portal-content .settings-tax-rate-form-back-wrap, #appContent .settings-tax-rate-form-actions, .portal-content .settings-tax-rate-form-actions { display: flex !important; width: auto !important; justify-content: flex-end !important; align-items: center !important; } #appContent .settings-tax-rate-form-back-wrap > .settings-tax-rate-form-back, #appContent .settings-tax-rate-form-actions > .settings-tax-rate-form-save, .portal-content .settings-tax-rate-form-back-wrap > .settings-tax-rate-form-back, .portal-content .settings-tax-rate-form-actions > .settings-tax-rate-form-save { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } /* Settings / Feature flags: Apply stays compact on non-mobile screens, while flag action buttons follow the 640px mobile full-width rule. */ :where(#appContent, .portal-content) form.settings-feature-flags-scope-form[data-ui-filters="1"] { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) form.settings-feature-flags-scope-form[data-ui-filters="1"] > select { flex: 0 1 22.5rem !important; width: min(100%, 22.5rem) !important; max-width: 22.5rem !important; min-height: 2.75rem !important; } :where(#appContent, .portal-content) form.settings-feature-flags-scope-form[data-ui-filters="1"] > .settings-feature-flags-apply { width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } :where(#appContent, .portal-content) .settings-feature-flags-card-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .settings-feature-flags-toggle-form, :where(#appContent, .portal-content) .settings-feature-flags-reset-form, :where(#appContent, .portal-content) .settings-feature-flags-custom-actions { width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content) .settings-feature-flags-toggle-btn, :where(#appContent, .portal-content) .settings-feature-flags-reset-btn, :where(#appContent, .portal-content) .settings-feature-flags-save-flag { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) form.settings-feature-flags-scope-form[data-ui-filters="1"] { flex-direction: column !important; align-items: stretch !important; width: 100% !important; } :where(#appContent, .portal-content) form.settings-feature-flags-scope-form[data-ui-filters="1"] > select, :where(#appContent, .portal-content) form.settings-feature-flags-scope-form[data-ui-filters="1"] > .settings-feature-flags-apply { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; } :where(#appContent, .portal-content) .settings-feature-flags-card-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; } :where(#appContent, .portal-content) .settings-feature-flags-toggle-form, :where(#appContent, .portal-content) .settings-feature-flags-reset-form, :where(#appContent, .portal-content) .settings-feature-flags-custom-actions { display: flex !important; width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } :where(#appContent, .portal-content) .settings-feature-flags-toggle-btn, :where(#appContent, .portal-content) .settings-feature-flags-reset-btn, :where(#appContent, .portal-content) .settings-feature-flags-save-flag { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; } } /* Settings / Security: Save security settings follows the project 640px mobile rule. */ @media (max-width: 640px) { #appContent .settings-security-actions, .portal-content .settings-security-actions { display: flex !important; width: 100% !important; max-width: none !important; align-items: stretch !important; justify-content: stretch !important; } #appContent .settings-security-actions > .settings-security-save, .portal-content .settings-security-actions > .settings-security-save { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (min-width: 641px) { #appContent .settings-security-actions, .portal-content .settings-security-actions { display: flex !important; width: auto !important; align-items: center !important; justify-content: flex-end !important; } #appContent .settings-security-actions > .settings-security-save, .portal-content .settings-security-actions > .settings-security-save { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } /* Settings / Compliance: Apply and Reset to global follow the project 640px mobile rule. */ @media (max-width: 640px) { #appContent .settings-compliance-scope-form, .portal-content .settings-compliance-scope-form { align-items: stretch !important; } #appContent .settings-compliance-apply-wrap, .portal-content .settings-compliance-apply-wrap { display: flex !important; width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } #appContent .settings-compliance-apply, .portal-content .settings-compliance-apply, #appContent .settings-compliance-reset, .portal-content .settings-compliance-reset { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (min-width: 641px) { #appContent .settings-compliance-apply-wrap, .portal-content .settings-compliance-apply-wrap { display: flex !important; width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } #appContent .settings-compliance-apply, .portal-content .settings-compliance-apply, #appContent .settings-compliance-reset, .portal-content .settings-compliance-reset { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } /* Settings / Audit: keep Filter and Reset together on non-mobile widths. The generic filter styling can split these into separate rows at mid widths; this screen needs compact grouped actions above the 640px mobile breakpoint. */ :where(#appContent, .portal-content) form.settings-audit-filter-form[data-ui-filters="1"] { align-items: end !important; } :where(#appContent, .portal-content) .settings-audit-filter-actions { display: flex !important; flex-wrap: nowrap !important; align-items: end !important; justify-content: flex-end !important; gap: 0.5rem !important; min-width: max-content !important; } :where(#appContent, .portal-content) .settings-audit-filter-action { width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (min-width: 641px) and (max-width: 1100px) { :where(#appContent, .portal-content) form.settings-audit-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) form.settings-audit-filter-form[data-ui-filters="1"] > :first-child { grid-column: span 2 / span 2 !important; } :where(#appContent, .portal-content) .settings-audit-filter-actions { grid-column: span 2 / span 2 !important; justify-content: flex-end !important; } } @media (min-width: 1101px) { :where(#appContent, .portal-content) form.settings-audit-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(14rem, 2fr) minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(8rem, 1fr) max-content !important; } :where(#appContent, .portal-content) form.settings-audit-filter-form[data-ui-filters="1"] > :first-child { grid-column: auto !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) form.settings-audit-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) .settings-audit-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; min-width: 0 !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .settings-audit-filter-action { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Settings / Audit final override: keep Filter + Reset as a single compact pair on every non-mobile width. Mobile follows the universal 640px rule. */ @media (min-width: 641px) and (max-width: 1399.98px) { #appContent form.settings-audit-filter-form[data-ui-filters="1"], .portal-content form.settings-audit-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: end !important; } #appContent form.settings-audit-filter-form[data-ui-filters="1"] > :first-child, .portal-content form.settings-audit-filter-form[data-ui-filters="1"] > :first-child { grid-column: span 4 / span 4 !important; } #appContent form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions, .portal-content form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions { grid-column: span 4 / span 4 !important; display: inline-grid !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important; align-items: center !important; justify-content: end !important; justify-items: end !important; gap: 0.5rem !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex-wrap: nowrap !important; } } @media (min-width: 1400px) { #appContent form.settings-audit-filter-form[data-ui-filters="1"], .portal-content form.settings-audit-filter-form[data-ui-filters="1"] { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) max-content !important; align-items: end !important; } #appContent form.settings-audit-filter-form[data-ui-filters="1"] > :first-child, .portal-content form.settings-audit-filter-form[data-ui-filters="1"] > :first-child, #appContent form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions, .portal-content form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions { grid-column: auto !important; } #appContent form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions, .portal-content form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions { display: inline-grid !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important; align-items: center !important; justify-content: end !important; justify-items: end !important; gap: 0.5rem !important; width: auto !important; min-width: max-content !important; max-width: max-content !important; flex-wrap: nowrap !important; } } @media (min-width: 641px) { #appContent .settings-audit-filter-actions > .settings-audit-filter-action, .portal-content .settings-audit-filter-actions > .settings-audit-filter-action, #appContent .settings-audit-filter-actions > :where(a, button, input[type="submit"], input[type="button"]), .portal-content .settings-audit-filter-actions > :where(a, button, input[type="submit"], input[type="button"]) { display: inline-flex !important; width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } @media (max-width: 640px) { #appContent .settings-audit-filter-actions, .portal-content .settings-audit-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; width: 100% !important; } #appContent .settings-audit-filter-actions > .settings-audit-filter-action, .portal-content .settings-audit-filter-actions > .settings-audit-filter-action, #appContent .settings-audit-filter-actions > :where(a, button, input[type="submit"], input[type="button"]), .portal-content .settings-audit-filter-actions > :where(a, button, input[type="submit"], input[type="button"]) { width: 100% !important; min-width: 0 !important; max-width: none !important; justify-content: center !important; text-align: center !important; } } /* Settings / Audit compact action correction: on non-mobile widths the Filter + Reset pair must behave like the other compact filter actions, not like a stretched two-column mobile row. */ @media (min-width: 641px) { #appContent form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions, .portal-content form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: max-content !important; min-width: max-content !important; max-width: max-content !important; justify-self: end !important; margin-left: auto !important; } #appContent form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions > .settings-audit-filter-action, .portal-content form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions > .settings-audit-filter-action, #appContent form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions > :where(a, button, input[type="submit"], input[type="button"]), .portal-content form.settings-audit-filter-form[data-ui-filters="1"] > .settings-audit-filter-actions > :where(a, button, input[type="submit"], input[type="button"]) { width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } } /* Settings / Communication: keep action buttons compact on non-mobile, but make save and verification actions full width at the universal mobile breakpoint. */ :where(#appContent, .portal-content) .settings-communication-save-actions { display: flex !important; justify-content: flex-end !important; align-items: center !important; } :where(#appContent, .portal-content) .settings-communication-save-button, :where(#appContent, .portal-content) .settings-communication-verify-button { width: auto !important; min-width: max-content !important; justify-content: center !important; } :where(#appContent, .portal-content) .settings-communication-verify-form > div:last-child { display: flex !important; justify-content: flex-end !important; min-width: 0 !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .settings-communication-save-actions, :where(#appContent, .portal-content) .settings-communication-verify-form > div:last-child { display: block !important; width: 100% !important; } :where(#appContent, .portal-content) .settings-communication-save-button, :where(#appContent, .portal-content) .settings-communication-verify-button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Admin Tools: apply the project 640px mobile action rule. Phone/mobile (<=640px) uses full-width touch targets; tablet/desktop remains compact. */ :where(#appContent, .portal-content) .admin-tools-health-heading, :where(#appContent, .portal-content) .admin-tools-imports-heading, :where(#appContent, .portal-content) .admin-tools-db-index-heading { align-items: flex-start !important; } :where(#appContent, .portal-content) .admin-tools-health-view-logs, :where(#appContent, .portal-content) .admin-tools-imports-download-template, :where(#appContent, .portal-content) .admin-tools-backup-create-button, :where(#appContent, .portal-content) .admin-tools-db-action-button, :where(#appContent, .portal-content) .admin-tools-system-logs-filter-button, :where(#appContent, .portal-content) .admin-tools-system-logs-reset-button { width: auto !important; min-width: 7.5rem !important; max-width: 100% !important; justify-content: center !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content) .admin-tools-backup-create-actions, :where(#appContent, .portal-content) .admin-tools-db-maintenance-actions, :where(#appContent, .portal-content) .admin-tools-system-logs-filter-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .admin-tools-db-action-form, :where(#appContent, .portal-content) .admin-tools-db-apply-indexes-form { display: inline-flex !important; width: auto !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content) .admin-tools-system-logs-filter-actions { justify-content: flex-end !important; } :where(#appContent, .portal-content) .admin-tools-system-logs-count { margin-left: 0.25rem !important; white-space: nowrap !important; } @media (min-width: 641px) { :where(#appContent, .portal-content) .admin-tools-system-logs-filter-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; align-items: center !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .admin-tools-health-heading, :where(#appContent, .portal-content) .admin-tools-imports-heading, :where(#appContent, .portal-content) .admin-tools-db-index-heading { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .admin-tools-health-view-logs, :where(#appContent, .portal-content) .admin-tools-imports-download-template, :where(#appContent, .portal-content) .admin-tools-backup-create-button, :where(#appContent, .portal-content) .admin-tools-db-action-button { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; } :where(#appContent, .portal-content) .admin-tools-db-apply-indexes-form, :where(#appContent, .portal-content) .admin-tools-db-action-form { width: 100% !important; flex: 1 1 100% !important; } :where(#appContent, .portal-content) .admin-tools-backup-create-actions, :where(#appContent, .portal-content) .admin-tools-db-maintenance-actions { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .admin-tools-system-logs-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .admin-tools-system-logs-filter-button, :where(#appContent, .portal-content) .admin-tools-system-logs-reset-button { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; } :where(#appContent, .portal-content) .admin-tools-system-logs-count { grid-column: 1 / -1 !important; margin-left: 0 !important; white-space: normal !important; } } /* Admin Tools / System Logs final layout fix: keep Filter + Reset as one compact pair on non-mobile widths, and make the mobile action row occupy the full card width at <=640px. */ :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form { min-width: 0 !important; width: 100% !important; } :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { grid-column: 1 / -1 !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; } @media (min-width: 641px) { :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; overflow: hidden !important; } :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button { width: auto !important; min-width: 7.5rem !important; max-width: none !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count { order: -1 !important; flex: 1 1 auto !important; min-width: 0 !important; margin-left: 0 !important; margin-right: auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 auto !important; justify-content: center !important; } :where(#appContent, .portal-content) form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; margin-left: 0 !important; white-space: normal !important; } } /* Admin Tools / System Logs hard layout fix. Separate the status text from the Filter/Reset button pair so the buttons cannot wrap into two rows on tablet/desktop, and use the 640px mobile rule. */ #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-buttons, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-buttons { grid-column: 2 !important; grid-row: 1 !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; justify-self: end !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button { width: auto !important; min-width: 7.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media (max-width: 640px) { #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 0.5rem !important; width: 100% !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-buttons, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-buttons { grid-column: 1 !important; grid-row: 1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; justify-self: stretch !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 auto !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } } /* Admin Tools / System Logs: final tightened filter layout. Keep actions close to the filter inputs and compact on non-mobile screens; keep the mobile <=640px two-column action rule. */ #appContent form.admin-tools-system-logs-filter-form, .portal-content form.admin-tools-system-logs-filter-form { display: grid !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; gap: 0.75rem !important; row-gap: 0.75rem !important; align-items: end !important; overflow: visible !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field { min-width: 0 !important; max-width: 100% !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { margin-top: 0 !important; padding-top: 0 !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; overflow: visible !important; } @media (min-width: 641px) and (max-width: 899.98px) { #appContent form.admin-tools-system-logs-filter-form, .portal-content form.admin-tools-system-logs-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field { grid-column: auto !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-search, #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-search, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { grid-column: 1 / -1 !important; } } @media (min-width: 900px) { #appContent form.admin-tools-system-logs-filter-form, .portal-content form.admin-tools-system-logs-filter-form { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-level, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-level { grid-column: span 3 !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-search, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-search { grid-column: span 5 !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-from, #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-to, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-from, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field-to { grid-column: span 2 !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: center !important; gap: 0.75rem !important; } } @media (min-width: 641px) { #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-buttons, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-buttons { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; gap: 0.5rem !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button { width: auto !important; min-width: 7.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count { min-width: 0 !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } @media (max-width: 640px) { #appContent form.admin-tools-system-logs-filter-form, .portal-content form.admin-tools-system-logs-filter-form { grid-template-columns: minmax(0, 1fr) !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field, #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-field, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { grid-column: 1 / -1 !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.5rem !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-buttons, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-filter-button, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-reset-button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #appContent form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count, .portal-content form.admin-tools-system-logs-filter-form .admin-tools-system-logs-count { width: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } } /* Account / Security: all primary account action buttons follow the 640px mobile full-width rule. */ @media (min-width: 641px) { #appContent .account-security-page .account-security-actions, .portal-content .account-security-page .account-security-actions { width: auto !important; } #appContent .account-security-page .account-security-action-form, #appContent .account-security-page .account-security-row-action-form, .portal-content .account-security-page .account-security-action-form, .portal-content .account-security-page .account-security-row-action-form { width: auto !important; } #appContent .account-security-page .account-security-action-btn, .portal-content .account-security-page .account-security-action-btn { width: auto !important; max-width: 100% !important; justify-content: center !important; } } @media (max-width: 640px) { #appContent .account-security-page .account-security-header, .portal-content .account-security-page .account-security-header { align-items: stretch !important; } #appContent .account-security-page .account-security-actions, .portal-content .account-security-page .account-security-actions { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; } #appContent .account-security-page .account-security-action-form, #appContent .account-security-page .account-security-row-action-form, .portal-content .account-security-page .account-security-action-form, .portal-content .account-security-page .account-security-row-action-form { display: block !important; width: 100% !important; max-width: 100% !important; } #appContent .account-security-page .account-security-disable-2fa-form, .portal-content .account-security-page .account-security-disable-2fa-form { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 0.5rem !important; } #appContent .account-security-page .account-security-disable-2fa-form input, .portal-content .account-security-page .account-security-disable-2fa-form input { width: 100% !important; } #appContent .account-security-page .account-security-action-btn, .portal-content .account-security-page .account-security-action-btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } #appContent .account-security-page .ui-table-wrap .account-security-row-action-form, .portal-content .account-security-page .ui-table-wrap .account-security-row-action-form { min-width: 7.5rem !important; } } /* ========================================================= v25 project breakpoint contract Mobile: 0-640px; tablet: 641-1024px; desktop: 1025px+. Keep text inputs/selects full-width on phones and make primary form action rows full-width, while preserving compact table/icon action controls. ========================================================= */ @media (max-width: 640px) { :where(#appContent, .portal-content) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea, .form-field, .ui-control) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"]) { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; max-width: 100% !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) :where(.ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"]) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, form) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; justify-content: center !important; } :where(#appContent, .portal-content) :where(.ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"]) > form > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; max-width: 100% !important; justify-content: center !important; } /* Exception: table rows stay compact and horizontally scrollable instead of turning every row action into a full-width block. */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) :where(.ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"]) { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; max-width: none !important; gap: 0.3rem !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap) :where(.ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"]) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, form) { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; } } /* ========================================================= Pre-JS responsive action-row sizing ========================================================= The JS normalizer adds .ui-responsive-action-row after DOM load. On slower mobile page loads, rows with two or more action controls can briefly render compact before that class is added. This CSS mirrors the same mobile layout from first paint, without changing the final normalized design. */ @media (max-width: 640px) { :where(#appContent, .portal-content) :where(.flex, .inline-flex):has(> :where(a, button, input[type="submit"], input[type="button"], form) ~ :where(a, button, input[type="submit"], input[type="button"], form)):not(.ui-table-actions-row):not(.portal-bottom-nav):not(.portal-nav-item) { flex-wrap: wrap !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where(.flex, .inline-flex):has(> :where(a, button, input[type="submit"], input[type="button"], form) ~ :where(a, button, input[type="submit"], input[type="button"], form)):not(.ui-table-actions-row):not(.portal-bottom-nav):not(.portal-nav-item) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, form) { flex: 1 1 calc(50% - 0.55rem) !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.45rem !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) :where(.flex, .inline-flex):has(> :where(a, button, input[type="submit"], input[type="button"], form) ~ :where(a, button, input[type="submit"], input[type="button"], form)):not(.ui-table-actions-row):not(.portal-bottom-nav):not(.portal-nav-item) > form > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; max-width: 100% !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) :where(.flex, .inline-flex):has(> :where(a, button, input[type="submit"], input[type="button"], form) ~ :where(a, button, input[type="submit"], input[type="button"], form)):not(.ui-table-actions-row):not(.portal-bottom-nav):not(.portal-nav-item) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control):only-child, :where(#appContent, .portal-content) :where(.flex, .inline-flex):has(> :where(a, button, input[type="submit"], input[type="button"], form) ~ :where(a, button, input[type="submit"], input[type="button"], form)):not(.ui-table-actions-row):not(.portal-bottom-nav):not(.portal-nav-item) > form:only-child, :where(#appContent, .portal-content) :where(.flex, .inline-flex):has(> :where(a, button, input[type="submit"], input[type="button"], form) ~ :where(a, button, input[type="submit"], input[type="button"], form)):not(.ui-table-actions-row):not(.portal-bottom-nav):not(.portal-nav-item) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control):last-child:nth-child(odd) { flex-basis: 100% !important; width: 100% !important; } /* Keep table rows and pagers compact; they are meant to scroll horizontally. */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .ui-dt-pager, .pagination) :where(.flex, .inline-flex):has(> :where(a, button, input[type="submit"], input[type="button"], form) ~ :where(a, button, input[type="submit"], input[type="button"], form)) { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; max-width: none !important; gap: 0.3rem !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .ui-dt-pager, .pagination) :where(.flex, .inline-flex):has(> :where(a, button, input[type="submit"], input[type="button"], form) ~ :where(a, button, input[type="submit"], input[type="button"], form)) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, form) { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; min-width: 0 !important; min-height: 0 !important; } } /* ========================================================= v26 mobile action-width alignment Phones start at <=640px in this project, so page/header/card/form action rows must also switch at 640px instead of waiting for legacy 560px rules. Table/icon/pagination controls are explicitly restored to compact behavior. ========================================================= */ @media (max-width: 640px) { :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1), :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1), :where(#appContent, .portal-content) > .ui-page-header, :where(#appContent, .portal-content) :where(.ui-card-header):has(:where(.ui-card-actions, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row)) { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.8rem !important; } :where(#appContent, .portal-content) > :where(.flex).mb-3:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-4:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-5:has(h1) > *, :where(#appContent, .portal-content) > :where(.flex).mb-6:has(h1) > *, :where(#appContent, .portal-content) > .ui-page-header > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) :where( .ui-card-actions, .ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row, .ui-mobile-action-grid, .dash-header-actions, .ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"] ) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.55rem !important; overflow: visible !important; } :where(#appContent, .portal-content) :where(.ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.55rem !important; overflow: visible !important; } :where(#appContent, .portal-content) :where( .ui-card-actions, .ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row, .ui-mobile-action-grid, .dash-header-actions, .ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"], .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll ) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab, form) { flex: 1 1 calc(50% - 0.55rem) !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.45rem !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) :where( .ui-card-actions, .ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row, .ui-mobile-action-grid, .dash-header-actions, .ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"], .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll ) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab):only-child, :where(#appContent, .portal-content) :where( .ui-card-actions, .ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row, .ui-mobile-action-grid, .dash-header-actions, .ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"], .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll ) > form:only-child, :where(#appContent, .portal-content) :where( .ui-card-actions, .ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row, .ui-mobile-action-grid, .dash-header-actions, .ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"], .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll ) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab):last-child:nth-child(odd) { flex-basis: 100% !important; width: 100% !important; } :where(#appContent, .portal-content) :where( .ui-card-actions, .ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row, .ui-mobile-action-grid, .dash-header-actions, .ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"] ) > form > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; max-width: 100% !important; justify-content: center !important; } /* Keep compact table/action controls from becoming giant stacked buttons. */ :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .ui-dt-pager, .pagination) :where( .ui-card-actions, .ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row, .ui-mobile-action-grid, .ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"], .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll ) { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; max-width: none !important; gap: 0.3rem !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .ui-dt-pager, .pagination) :where( .ui-card-actions, .ui-header-action-stack, .ui-header-actions, .ui-section-actions, .ui-responsive-action-row, .ui-mobile-action-grid, .ui-form-actions, .ui-mobile-actions, [data-mobile-full-actions="1"], .ui-section-nav, .ui-module-tabs, .ui-module-tabs-scroll ) > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, .ui-section-action, .ui-module-tab, form) { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; min-width: 0 !important; min-height: 0 !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .ui-dt-pager, .pagination) :where(.ui-icon-button, button.ui-icon-button, a.ui-icon-button) { width: 2.25rem !important; min-width: 2.25rem !important; max-width: 2.25rem !important; flex: 0 0 2.25rem !important; aspect-ratio: 1 / 1 !important; } } /* ========================================================= Subscriptions / Renew header action sizing ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, Back to member spans the row. - Tablet/small tablet/desktop: 641px+, Back to member stays compact. These selectors are intentionally specific because the app has broad mobile action-row rules that can otherwise make page-header links full width. */ html body :where(#appContent, .portal-content) > .subscription-renew-header { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-title { min-width: 0 !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-back-wrap { box-sizing: border-box !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-back-wrap > a.subscription-renew-back.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; box-sizing: border-box !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) > .subscription-renew-header { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-title, html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-back-wrap { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; align-self: stretch !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-back-wrap { display: block !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-back-wrap > a.subscription-renew-back.ui-action-control { width: 100% !important; inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; min-width: 0 !important; flex: 1 1 100% !important; white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) > .subscription-renew-header { flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-title { width: auto !important; max-width: none !important; flex: 1 1 auto !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-back-wrap { display: flex !important; width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; align-self: flex-start !important; align-items: flex-start !important; justify-content: flex-end !important; justify-self: end !important; grid-column: auto !important; } html body :where(#appContent, .portal-content) > .subscription-renew-header > .subscription-renew-back-wrap > a.subscription-renew-back.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: flex-start !important; justify-self: end !important; grid-column: auto !important; } } /* ========================================================= Members / Membership history header action sizing ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, the Open Subscriptions module action spans the row. - Tablet/small tablet/desktop: 641px+, the action stays compact and right aligned. */ html body :where(#appContent, .portal-content) .memberships-module-header { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) .memberships-module-title { min-width: 0 !important; } html body :where(#appContent, .portal-content) .memberships-module-action { box-sizing: border-box !important; } html body :where(#appContent, .portal-content) .memberships-module-action > a.members-open-subscriptions-btn.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; line-height: 1.15 !important; } html body :where(#appContent, .portal-content) .memberships-module-action > a.members-open-subscriptions-btn.ui-action-control > .members-open-subscriptions-label { display: block !important; max-width: 100% !important; min-width: 0 !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .memberships-module-header { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .memberships-module-title, html body :where(#appContent, .portal-content) .memberships-module-action { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; align-self: stretch !important; } html body :where(#appContent, .portal-content) .memberships-module-action { display: block !important; } html body :where(#appContent, .portal-content) .memberships-module-action > a.members-open-subscriptions-btn.ui-action-control { width: 100% !important; inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; min-width: 0 !important; flex: 1 1 100% !important; white-space: normal !important; min-height: 2.5rem !important; } html body :where(#appContent, .portal-content) .memberships-module-action > a.members-open-subscriptions-btn.ui-action-control > .members-open-subscriptions-label { white-space: normal !important; text-align: center !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .memberships-module-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .memberships-module-title { width: auto !important; max-width: none !important; flex: 1 1 auto !important; } html body :where(#appContent, .portal-content) .memberships-module-action { display: flex !important; width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; align-self: center !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; } html body :where(#appContent, .portal-content) .memberships-module-action > a.members-open-subscriptions-btn.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; justify-self: end !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .memberships-module-action > a.members-open-subscriptions-btn.ui-action-control > .members-open-subscriptions-label { white-space: nowrap !important; text-align: center !important; } } /* ========================================================= Subscriptions / Create header back button sizing ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, Back spans the row for easy tapping. - Tablet/small tablet/desktop: 641px+, Back stays compact and right aligned. */ html body :where(#appContent, .portal-content) > .subscription-create-header { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-title { min-width: 0 !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-back-wrap { box-sizing: border-box !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-back-wrap > a.subscription-create-back.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; line-height: 1.15 !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) > .subscription-create-header { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-title, html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-back-wrap { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; align-self: stretch !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-back-wrap { display: block !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-back-wrap > a.subscription-create-back.ui-action-control { width: 100% !important; inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; min-width: 0 !important; flex: 1 1 100% !important; white-space: normal !important; min-height: 2.5rem !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) > .subscription-create-header { flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-title { width: auto !important; max-width: none !important; flex: 1 1 auto !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-back-wrap { display: flex !important; width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; align-self: flex-start !important; align-items: flex-start !important; justify-content: flex-end !important; justify-self: end !important; grid-column: auto !important; } html body :where(#appContent, .portal-content) > .subscription-create-header > .subscription-create-back-wrap > a.subscription-create-back.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: flex-start !important; justify-self: end !important; white-space: nowrap !important; grid-column: auto !important; } } /* ========================================================= Subscriptions / Create member search button sizing ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, Search spans the row below the input. - Tablet/small tablet/desktop: 641px+, Search stays compact and aligned. */ html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; gap: 0.5rem !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > .subscription-create-member-search-input { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > button.subscription-create-member-search-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; line-height: 1.15 !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > button.subscription-create-member-search-button.ui-action-control > .subscription-create-member-search-label { display: inline-block !important; text-align: center !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > .subscription-create-member-search-input, html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > button.subscription-create-member-search-button.ui-action-control { width: 100% !important; inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; min-width: 0 !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > button.subscription-create-member-search-button.ui-action-control { min-height: 2.5rem !important; white-space: normal !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > button.subscription-create-member-search-button.ui-action-control > .subscription-create-member-search-label { width: 100% !important; white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] { flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > .subscription-create-member-search-input { width: auto !important; inline-size: auto !important; flex: 1 1 14rem !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > button.subscription-create-member-search-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; justify-self: start !important; white-space: nowrap !important; grid-column: auto !important; padding-inline: 1rem !important; } html body :where(#appContent, .portal-content) form.subscription-create-member-search[data-subscription-create-member-search="1"] > button.subscription-create-member-search-button.ui-action-control > .subscription-create-member-search-label { white-space: nowrap !important; } } /* ========================================================= Members / Index filter button sizing ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, Filter spans the row below the controls. - Tablet/small tablet/desktop: 641px+, Filter stays compact and aligned. */ html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] > :where(.members-filter-search, .members-filter-status, .members-filter-visibility, .members-filter-actions) { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] :where(input, select, textarea) { max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] .members-filter-actions { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] button.members-filter-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; box-sizing: border-box !important; text-align: center !important; line-height: 1.15 !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] button.members-filter-button.ui-action-control > :where(svg, .ui-icon, .action-icon) { flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] button.members-filter-button.ui-action-control > .members-filter-button-label { display: inline-block !important; text-align: center !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] > :where(.members-filter-search, .members-filter-status, .members-filter-visibility, .members-filter-actions), html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] :where(input, select, textarea, .members-filter-status-select), html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] button.members-filter-button.ui-action-control { width: 100% !important; inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; min-width: 0 !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] .members-filter-actions { width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] button.members-filter-button.ui-action-control { min-height: 2.5rem !important; white-space: normal !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] button.members-filter-button.ui-action-control > .members-filter-button-label { white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] { flex-direction: row !important; align-items: end !important; justify-content: flex-start !important; flex-wrap: wrap !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] > .members-filter-search { width: auto !important; inline-size: auto !important; flex: 1 1 18rem !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] > .members-filter-status { width: 13.75rem !important; inline-size: 13.75rem !important; flex: 0 1 13.75rem !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] > .members-filter-visibility { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] > .members-filter-actions { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; align-self: flex-end !important; align-items: center !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] button.members-filter-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; white-space: nowrap !important; padding-block: 0.48rem !important; padding-inline: 1rem !important; line-height: 1.15 !important; } html body :where(#appContent, .portal-content) form.members-filter-form[data-members-filter="1"] button.members-filter-button.ui-action-control > .members-filter-button-label { white-space: nowrap !important; } } /* ========================================================= Members / Create bottom action buttons ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, actions stack full width with centered text. - Tablet/small tablet/desktop: 641px+, actions stay compact and right-aligned. */ html body :where(#appContent, .portal-content) .members-create-actions { display: flex !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } html body :where(#appContent, .portal-content) .members-create-actions > .members-create-action, html body :where(#appContent, .portal-content) .members-create-actions > button.members-create-action.ui-action-control, html body :where(#appContent, .portal-content) .members-create-actions > a.members-create-action.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-width: 0 !important; text-align: center !important; line-height: 1.15 !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .members-create-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .members-create-actions > .members-create-action, html body :where(#appContent, .portal-content) .members-create-actions > button.members-create-action.ui-action-control, html body :where(#appContent, .portal-content) .members-create-actions > a.members-create-action.ui-action-control { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .members-create-actions { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .members-create-actions > .members-create-action, html body :where(#appContent, .portal-content) .members-create-actions > button.members-create-action.ui-action-control, html body :where(#appContent, .portal-content) .members-create-actions > a.members-create-action.ui-action-control { width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; white-space: nowrap !important; } } /* ========================================================= Members / Create wizard header action buttons ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, Standard form and Back stack full width with centered text. - Tablet/small tablet/desktop: 641px+, buttons stay compact and aligned to the right. */ html body :where(#appContent, .portal-content) .members-create-wizard-header, html body :where(#appContent, .portal-content) .members-create-wizard-actions { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .members-create-wizard-actions { display: flex !important; gap: 0.5rem !important; } html body :where(#appContent, .portal-content) .members-create-wizard-actions > .members-create-wizard-action, html body :where(#appContent, .portal-content) .members-create-wizard-actions > a.members-create-wizard-action.ui-action-control, html body :where(#appContent, .portal-content) .members-create-wizard-actions > button.members-create-wizard-action.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-width: 0 !important; text-align: center !important; line-height: 1.15 !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .members-create-wizard-header { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .members-create-wizard-header-copy, html body :where(#appContent, .portal-content) .members-create-wizard-actions { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; } html body :where(#appContent, .portal-content) .members-create-wizard-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .members-create-wizard-actions > .members-create-wizard-action, html body :where(#appContent, .portal-content) .members-create-wizard-actions > a.members-create-wizard-action.ui-action-control, html body :where(#appContent, .portal-content) .members-create-wizard-actions > button.members-create-wizard-action.ui-action-control { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .members-create-wizard-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .members-create-wizard-header-copy { flex: 1 1 auto !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .members-create-wizard-actions { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) .members-create-wizard-actions > .members-create-wizard-action, html body :where(#appContent, .portal-content) .members-create-wizard-actions > a.members-create-wizard-action.ui-action-control, html body :where(#appContent, .portal-content) .members-create-wizard-actions > button.members-create-wizard-action.ui-action-control { width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; white-space: nowrap !important; } } /* ========================================================= Attendance / Rules Save rules buttons ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, Save rules buttons fill the available row with centered text. - Tablet/small tablet/desktop: 641px+, Save rules buttons stay compact and right-aligned. */ html body :where(#appContent, .portal-content) .attendance-rules-top-save-wrap, html body :where(#appContent, .portal-content) .attendance-rules-bottom-save-wrap { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .attendance-rules-save-button, html body :where(#appContent, .portal-content) button.attendance-rules-save-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-height: 2.35rem !important; line-height: 1.15 !important; text-align: center !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .attendance-rules-top-save-wrap, html body :where(#appContent, .portal-content) .attendance-rules-bottom-save-wrap { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; } html body :where(#appContent, .portal-content) .attendance-rules-save-button, html body :where(#appContent, .portal-content) button.attendance-rules-save-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .attendance-rules-top-save-wrap { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; margin-left: auto !important; align-self: flex-end !important; justify-content: flex-end !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) .attendance-rules-bottom-save-wrap { width: 100% !important; inline-size: 100% !important; justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .attendance-rules-save-button, html body :where(#appContent, .portal-content) button.attendance-rules-save-button.ui-action-control { width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; white-space: nowrap !important; } } /* ========================================================= Billing / Receive payment action buttons ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, Search/Clear/Receive payment fill the row with centered text. - Tablet/small tablet/desktop: 641px+, actions stay compact, aligned, and normal-height. */ html body :where(#appContent, .portal-content) form.receive-payment-search-form[data-receive-payment-search="1"] .receive-payment-search-actions, html body :where(#appContent, .portal-content) .receive-payment-form-actions { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .receive-payment-action, html body :where(#appContent, .portal-content) button.receive-payment-action.ui-action-control, html body :where(#appContent, .portal-content) a.receive-payment-action.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; box-sizing: border-box !important; min-height: 2.5rem !important; line-height: 1.15 !important; text-align: center !important; vertical-align: middle !important; } html body :where(#appContent, .portal-content) .receive-payment-action > :where(svg, .ui-icon, .action-icon) { flex: 0 0 auto !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) form.receive-payment-search-form[data-receive-payment-search="1"] .receive-payment-search-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; gap: 0.5rem !important; } html body :where(#appContent, .portal-content) .receive-payment-form-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; inline-size: 100% !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) .receive-payment-auto-allocate-label { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .receive-payment-action, html body :where(#appContent, .portal-content) button.receive-payment-action.ui-action-control, html body :where(#appContent, .portal-content) a.receive-payment-action.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) form.receive-payment-search-form[data-receive-payment-search="1"] .receive-payment-search-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: 100% !important; max-inline-size: 100% !important; gap: 0.5rem !important; } html body :where(#appContent, .portal-content) .receive-payment-form-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; inline-size: 100% !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) .receive-payment-action, html body :where(#appContent, .portal-content) button.receive-payment-action.ui-action-control, html body :where(#appContent, .portal-content) a.receive-payment-action.ui-action-control { width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.5rem !important; min-height: 2.5rem !important; max-height: 2.5rem !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; white-space: nowrap !important; padding-block: 0.5rem !important; padding-inline: 1rem !important; } html body :where(#appContent, .portal-content) .receive-payment-submit-button { margin-left: auto !important; } } /* Members -> Edit: keep side-card action buttons responsive and consistent. Mobile (0-640px) uses full-width stacked actions; tablet/desktop (641px+) keeps buttons compact, normal-height, and right-aligned like the rest of the app. */ :where(#appContent, .portal-content) .members-edit-billing-balance-row { align-items: flex-end !important; justify-content: space-between !important; gap: .75rem !important; flex-wrap: wrap !important; width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .members-edit-card-action-row { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: .5rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; } :where(#appContent, .portal-content) .members-edit-billing-balance-row > .members-edit-action, :where(#appContent, .portal-content) .members-edit-card-action-row > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 7.25rem !important; max-width: 100% !important; min-height: 2.15rem !important; padding-block: .48rem !important; justify-content: center !important; text-align: center !important; line-height: 1.15 !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .members-edit-billing-balance-row { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .members-edit-card-action-row { justify-content: stretch !important; } :where(#appContent, .portal-content) .members-edit-billing-balance-row > .members-edit-action, :where(#appContent, .portal-content) .members-edit-card-action-row > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; } } /* Assessments / Create: responsive action controls. Mobile (0-640px) uses full-width stacked actions; tablet/desktop (641px+) keeps buttons compact, aligned, normal-height, and readable. */ html body :where(#appContent, .portal-content) .assessments-create-member-card-row, html body :where(#appContent, .portal-content) .assessments-create-metrics-header, html body :where(#appContent, .portal-content) .assessments-create-form-actions, html body :where(#appContent, .portal-content) .assessments-create-quick-actions { min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-create-quick-actions, html body :where(#appContent, .portal-content) .assessments-create-form-actions { align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; } html body :where(#appContent, .portal-content) .assessments-create-action, html body :where(#appContent, .portal-content) a.assessments-create-action.ui-action-control, html body :where(#appContent, .portal-content) button.assessments-create-action.ui-action-control { flex: 0 0 auto !important; width: auto !important; min-width: 6.75rem !important; max-width: 100% !important; min-height: 2.15rem !important; height: auto !important; padding-block: .48rem !important; justify-content: center !important; text-align: center !important; line-height: 1.15 !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .assessments-remove-metric-action, html body :where(#appContent, .portal-content) table.ui-table td:last-child button.assessments-remove-metric-action.ui-action-danger { background: #e11d48 !important; border-color: #be123c !important; color: #fff !important; min-width: 4.75rem !important; min-height: 1.8rem !important; height: 1.8rem !important; padding: .22rem .65rem !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .assessments-remove-metric-action:hover, html body :where(#appContent, .portal-content) table.ui-table td:last-child button.assessments-remove-metric-action.ui-action-danger:hover { background: #be123c !important; border-color: #9f1239 !important; color: #fff !important; } @media (max-width: 640px) { html body :where(#appContent, .portal-content) .assessments-create-member-card-row, html body :where(#appContent, .portal-content) .assessments-create-metrics-header { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .assessments-create-quick-actions, html body :where(#appContent, .portal-content) .assessments-create-form-actions { flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-create-action, html body :where(#appContent, .portal-content) a.assessments-create-action.ui-action-control, html body :where(#appContent, .portal-content) button.assessments-create-action.ui-action-control { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; } } @media (min-width: 641px) { html body :where(#appContent, .portal-content) .assessments-create-member-card-row, html body :where(#appContent, .portal-content) .assessments-create-metrics-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .assessments-create-quick-actions, html body :where(#appContent, .portal-content) .assessments-create-form-actions { flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; } } /* Assessments / Member dashboard: align header actions, tabs, card actions, filters, and history action buttons consistently with related assessment screens. Mobile (0-640px) stacks full-width controls; tablet/desktop (641px+) keeps controls compact, normal-height, and aligned. */ html body :where(#appContent, .portal-content) .assessments-member-header, html body :where(#appContent, .portal-content) .assessments-member-card-header, html body :where(#appContent, .portal-content) .assessments-member-section-nav, html body :where(#appContent, .portal-content) .assessments-member-section-actions, html body :where(#appContent, .portal-content) .assessments-member-metric-filter, html body :where(#appContent, .portal-content) .assessments-member-photos-actions, html body :where(#appContent, .portal-content) .assessments-member-table-actions { min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-header-actions, html body :where(#appContent, .portal-content) .assessments-member-section-actions, html body :where(#appContent, .portal-content) .assessments-member-photos-actions, html body :where(#appContent, .portal-content) .assessments-member-table-actions { flex-wrap: wrap !important; align-items: center !important; } html body :where(#appContent, .portal-content) .assessments-member-header-actions, html body :where(#appContent, .portal-content) .assessments-member-photos-actions, html body :where(#appContent, .portal-content) .assessments-member-table-actions { justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .assessments-member-section-actions { justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .assessments-member-action, html body :where(#appContent, .portal-content) .assessments-member-tab-action, html body :where(#appContent, .portal-content) a.assessments-member-action.ui-action-control, html body :where(#appContent, .portal-content) button.assessments-member-action.ui-action-control, html body :where(#appContent, .portal-content) a.assessments-member-tab-action.ui-section-action, html body :where(#appContent, .portal-content) .assessments-member-table-action, html body :where(#appContent, .portal-content) a.assessments-member-table-action.ui-action-control { flex: 0 0 auto !important; width: auto !important; min-width: 5.25rem !important; max-width: 100% !important; min-height: 2.15rem !important; height: auto !important; padding-block: .48rem !important; justify-content: center !important; text-align: center !important; line-height: 1.15 !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .assessments-member-table-action, html body :where(#appContent, .portal-content) a.assessments-member-table-action.ui-action-control { min-width: 4.25rem !important; min-height: 1.85rem !important; padding-block: .32rem !important; padding-inline: .7rem !important; } html body :where(#appContent, .portal-content) .assessments-member-action > span, html body :where(#appContent, .portal-content) .assessments-member-tab-action > span, html body :where(#appContent, .portal-content) .assessments-member-table-action > span { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; } html body :where(#appContent, .portal-content) .assessments-member-metric-filter > .form-field, html body :where(#appContent, .portal-content) .assessments-member-metric-filter > select { min-width: 12rem !important; max-width: 100% !important; } @media (max-width: 640px) { html body :where(#appContent, .portal-content) .assessments-member-header, html body :where(#appContent, .portal-content) .assessments-member-card-header, html body :where(#appContent, .portal-content) .assessments-member-metric-filter, html body :where(#appContent, .portal-content) .assessments-member-photos-actions { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .assessments-member-header-copy, html body :where(#appContent, .portal-content) .assessments-member-card-title, html body :where(#appContent, .portal-content) .assessments-member-header-actions, html body :where(#appContent, .portal-content) .assessments-member-section-actions, html body :where(#appContent, .portal-content) .assessments-member-metric-filter, html body :where(#appContent, .portal-content) .assessments-member-photos-actions { width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-header-actions, html body :where(#appContent, .portal-content) .assessments-member-section-actions, html body :where(#appContent, .portal-content) .assessments-member-table-actions { flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; } html body :where(#appContent, .portal-content) .assessments-member-action, html body :where(#appContent, .portal-content) .assessments-member-tab-action, html body :where(#appContent, .portal-content) a.assessments-member-action.ui-action-control, html body :where(#appContent, .portal-content) button.assessments-member-action.ui-action-control, html body :where(#appContent, .portal-content) a.assessments-member-tab-action.ui-section-action, html body :where(#appContent, .portal-content) .assessments-member-table-action, html body :where(#appContent, .portal-content) a.assessments-member-table-action.ui-action-control, html body :where(#appContent, .portal-content) .assessments-member-metric-filter > .form-field, html body :where(#appContent, .portal-content) .assessments-member-metric-filter > select { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; } } @media (min-width: 641px) { html body :where(#appContent, .portal-content) .assessments-member-header, html body :where(#appContent, .portal-content) .assessments-member-card-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .assessments-member-header-copy, html body :where(#appContent, .portal-content) .assessments-member-card-title { flex: 1 1 auto !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .assessments-member-header-actions, html body :where(#appContent, .portal-content) .assessments-member-metric-filter, html body :where(#appContent, .portal-content) .assessments-member-photos-actions { flex: 0 0 auto !important; width: auto !important; flex-direction: row !important; align-items: center !important; } html body :where(#appContent, .portal-content) .assessments-member-header-actions, html body :where(#appContent, .portal-content) .assessments-member-photos-actions, html body :where(#appContent, .portal-content) .assessments-member-table-actions { justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .assessments-member-section-actions { width: auto !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; } } /* Assessments member area v2 polish: - Header actions now match the compact Admin Tools health action style. - Mobile assessment section tabs scroll horizontally instead of growing oversized. - Photos tab uses a single-column full-width Upload/Gallery flow at every breakpoint. */ html body :where(#appContent, .portal-content) .assessments-member-header { min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-header-actions { min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; } html body :where(#appContent, .portal-content) .assessments-member-header-button, html body :where(#appContent, .portal-content) a.assessments-member-header-button.ui-action-control, html body :where(#appContent, .portal-content) button.assessments-member-header-button.ui-action-control { width: auto !important; min-width: 7.5rem !important; max-width: 100% !important; flex: 0 0 auto !important; min-height: 2.25rem !important; height: auto !important; padding-block: 0.5rem !important; justify-content: center !important; text-align: center !important; line-height: 1.15 !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .assessments-member-section-nav { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; } html body :where(#appContent, .portal-content) .assessments-member-section-actions { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; } html body :where(#appContent, .portal-content) .assessments-member-tab-action, html body :where(#appContent, .portal-content) a.assessments-member-tab-action.ui-section-action { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; min-height: 2.25rem !important; padding: 0.5rem 0.75rem !important; justify-content: center !important; white-space: nowrap !important; line-height: 1.15 !important; } html body :where(#appContent, .portal-content) .assessments-member-tab-action .action-icon, html body :where(#appContent, .portal-content) .assessments-member-tab-action svg { flex: 0 0 auto !important; width: 1rem !important; height: 1rem !important; } html body :where(#appContent, .portal-content) .assessments-member-photos-layout, html body :where(#appContent, .portal-content) .assessments-member-upload-card, html body :where(#appContent, .portal-content) .assessments-member-gallery-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .assessments-member-photos-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .assessments-member-gallery-grid { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)) !important; } html body :where(#appContent, .portal-content) .assessments-member-form-actions { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .assessments-member-photo-upload-button, html body :where(#appContent, .portal-content) .assessments-member-pr-save-button, html body :where(#appContent, .portal-content) .assessments-member-photo-delete-button, html body :where(#appContent, .portal-content) .assessments-member-pr-delete-button { width: auto !important; min-width: 7.5rem !important; max-width: 100% !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; } @media (max-width: 640px) { html body :where(#appContent, .portal-content) .assessments-member-header { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .assessments-member-header-copy, html body :where(#appContent, .portal-content) .assessments-member-header-actions { width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-header-actions { flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; } html body :where(#appContent, .portal-content) .assessments-member-header-button, html body :where(#appContent, .portal-content) a.assessments-member-header-button.ui-action-control, html body :where(#appContent, .portal-content) button.assessments-member-header-button.ui-action-control, html body :where(#appContent, .portal-content) .assessments-member-photo-upload-button, html body :where(#appContent, .portal-content) .assessments-member-pr-save-button { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .assessments-member-section-nav { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 0.125rem !important; } html body :where(#appContent, .portal-content) .assessments-member-section-actions, html body :where(#appContent, .portal-content) .assessments-member-section-nav .assessments-member-section-actions.ui-section-actions, html body :where(#appContent, .portal-content) .assessments-member-section-nav .ui-header-actions.ui-section-actions { width: max-content !important; min-width: 100% !important; max-width: none !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .assessments-member-tab-action, html body :where(#appContent, .portal-content) a.assessments-member-tab-action.ui-section-action { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: none !important; padding-inline: 0.72rem !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .assessments-member-gallery-grid { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) .assessments-member-form-actions { flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; } } @media (min-width: 641px) { html body :where(#appContent, .portal-content) .assessments-member-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .assessments-member-header-copy { flex: 1 1 auto !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .assessments-member-header-actions { flex: 0 0 auto !important; width: auto !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .assessments-member-section-nav { overflow: visible !important; } } /* Assessments member header: mirror the Admin Tools page-header pattern. The page title/description and section navigation live together in the header. Secondary actions sit below as compact actions on non-mobile. */ html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-content: stretch !important; gap: 0.85rem !important; margin-bottom: 1rem !important; } html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) > .assessments-member-header-copy, html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) > .assessments-member-section-nav { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) .assessments-member-header-copy p, html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) .assessments-member-header-copy .text-slate-500 { max-inline-size: 64rem !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) .assessments-member-section-actions { width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .assessments-member-page-actions { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; } @media (min-width: 1500px) { html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) { grid-template-columns: minmax(22rem, 1fr) minmax(0, auto) !important; align-items: center !important; } html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) > .assessments-member-section-nav { width: auto !important; justify-self: end !important; } html body :where(#appContent, .portal-content) .assessments-member-header:has(.assessments-member-section-nav) .assessments-member-section-actions { width: auto !important; justify-content: flex-end !important; } } @media (max-width: 640px) { html body :where(#appContent, .portal-content) .assessments-member-page-actions { flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; } html body :where(#appContent, .portal-content) .assessments-member-page-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; } } /* Assessments / Member PRs: align layout and actions with the polished member dashboard/photos screens. Keep PR cards/forms single-column through tablet widths (0-1024px) and only split the Best PRs/Add PR cards on desktop (1025px+), matching the project's requested breakpoint rules. */ html body :where(#appContent, .portal-content) .assessments-member-prs-layout, html body :where(#appContent, .portal-content) .assessments-member-prs-best-card, html body :where(#appContent, .portal-content) .assessments-member-prs-form-card, html body :where(#appContent, .portal-content) .assessments-member-pr-form, html body :where(#appContent, .portal-content) .assessments-member-prs-form-heading, html body :where(#appContent, .portal-content) .assessments-member-pr-card-row { min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-prs-layout { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; } html body :where(#appContent, .portal-content) .assessments-member-prs-best-card, html body :where(#appContent, .portal-content) .assessments-member-prs-form-card { width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-prs-form-heading { flex-wrap: wrap !important; align-items: flex-start !important; } html body :where(#appContent, .portal-content) .assessments-member-prs-form-heading > :first-child { flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) .assessments-member-prs-form-heading > :last-child { flex: 1 1 14rem !important; min-width: 0 !important; text-align: right !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-card-row > :first-child { min-width: 0 !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-card-row > :last-child { flex: 0 0 auto !important; text-align: right !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-history-actions-cell { text-align: right !important; vertical-align: middle !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-delete-form { display: inline-flex !important; justify-content: flex-end !important; align-items: center !important; width: auto !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-history-actions-cell .assessments-member-pr-delete-button, html body :where(#appContent, .portal-content) .assessments-member-pr-delete-form .assessments-member-pr-delete-button, html body :where(#appContent, .portal-content) .assessments-member-pr-delete-form button.assessments-member-table-action { width: auto !important; min-width: 4.75rem !important; max-width: max-content !important; flex: 0 0 auto !important; min-height: 1.9rem !important; height: auto !important; padding-block: 0.34rem !important; padding-inline: 0.75rem !important; white-space: nowrap !important; justify-content: center !important; text-align: center !important; } @media (max-width: 640px) { html body :where(#appContent, .portal-content) .assessments-member-prs-layout { gap: 1rem !important; } html body :where(#appContent, .portal-content) .assessments-member-prs-form-heading { flex-direction: column !important; align-items: stretch !important; gap: 0.35rem !important; } html body :where(#appContent, .portal-content) .assessments-member-prs-form-heading > :last-child { flex: 0 1 auto !important; width: 100% !important; text-align: left !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-card-row { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-card-row > :last-child { text-align: left !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form > .assessments-member-form-actions, html body :where(#appContent, .portal-content) .assessments-member-pr-form .assessments-member-pr-save-button, html body :where(#appContent, .portal-content) .assessments-member-pr-form button.assessments-member-pr-save-button.ui-action-control { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form > .assessments-member-form-actions { flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; } } @media (min-width: 641px) { html body :where(#appContent, .portal-content) .assessments-member-prs-form-heading { flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form > .assessments-member-form-actions { flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form .assessments-member-pr-save-button, html body :where(#appContent, .portal-content) .assessments-member-pr-form button.assessments-member-pr-save-button.ui-action-control { width: auto !important; min-width: 7.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; } } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { html body :where(#appContent, .portal-content) .assessments-member-prs-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; } } /* Assessments / Member PRs v2: keep the guided required-fields bar readable inside the Add PR form and make Save PR compact on phones. The guidebar is injected as the first child of the CSS grid form, so it must span the whole form instead of occupying a single narrow grid column. */ html body :where(#appContent, .portal-content) .assessments-member-pr-form > .ui-guidebar { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form > .ui-guidebar .ui-guide-meta, html body :where(#appContent, .portal-content) .assessments-member-pr-form > .ui-guidebar .ui-guide-title, html body :where(#appContent, .portal-content) .assessments-member-pr-form > .ui-guidebar .ui-guide-sub { min-width: 0 !important; max-width: 100% !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } @media (max-width: 640px) { html body :where(#appContent, .portal-content) .assessments-member-pr-form > .ui-guidebar { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.55rem !important; padding: 0.75rem !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form > .ui-guidebar .ui-guide-progress { width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; gap: 0.6rem !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form > .ui-guidebar progress { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form > .assessments-member-form-actions { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-form .assessments-member-pr-save-button, html body :where(#appContent, .portal-content) .assessments-member-pr-form button.assessments-member-pr-save-button.ui-action-control { width: auto !important; min-width: 6.75rem !important; max-width: 100% !important; flex: 0 0 auto !important; min-height: 2.15rem !important; padding-block: 0.48rem !important; padding-inline: 0.78rem !important; white-space: nowrap !important; line-height: 1.15 !important; } } /* Assessments / Member PRs v3: fix Add PR field sizing and Save PR mobile behavior. The PR form now owns its grid so global 12-column guardrails do not squeeze inputs like Type/Recorded at into unreadable widths. */ html body :where(#appContent, .portal-content) .assessments-member-pr-form[data-ui-fixed-grid="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field, html body :where(#appContent, .portal-content) .assessments-member-pr-field label, html body :where(#appContent, .portal-content) .assessments-member-pr-field :where(input, select, textarea, .form-field) { min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field { width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field label { display: inline-flex !important; align-items: center !important; gap: 0.2rem !important; margin-bottom: 0.28rem !important; line-height: 1.2 !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field :where(input.form-field, select.form-field, textarea.form-field) { display: block !important; width: 100% !important; min-height: 2.45rem !important; height: auto !important; padding: 0.55rem 0.75rem !important; font-size: 0.875rem !important; line-height: 1.25 !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field select.form-field { padding-right: 2.25rem !important; text-overflow: clip !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field input[type="datetime-local"].form-field { min-width: 0 !important; font-size: 0.84rem !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field textarea.form-field { min-height: 5rem !important; resize: vertical !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-notes, html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions, html body :where(#appContent, .portal-content) .assessments-member-pr-form[data-ui-fixed-grid="1"] > .ui-guidebar { grid-column: 1 / -1 !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions .assessments-member-pr-save-button, html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions button.assessments-member-pr-save-button.ui-action-control { min-height: 2.35rem !important; height: auto !important; padding-block: 0.52rem !important; padding-inline: 0.9rem !important; line-height: 1.15 !important; white-space: nowrap !important; text-align: center !important; justify-content: center !important; } @media (max-width: 640px) { html body :where(#appContent, .portal-content) .assessments-member-pr-form[data-ui-fixed-grid="1"] { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions { align-items: stretch !important; justify-content: stretch !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions .assessments-member-pr-save-button, html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions button.assessments-member-pr-save-button.ui-action-control { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; } } @media (min-width: 641px) { html body :where(#appContent, .portal-content) .assessments-member-pr-form[data-ui-fixed-grid="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-exercise, html body :where(#appContent, .portal-content) .assessments-member-pr-field-notes, html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions { grid-column: 1 / -1 !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions .assessments-member-pr-save-button, html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions button.assessments-member-pr-save-button.ui-action-control { width: auto !important; min-width: 7.25rem !important; max-width: max-content !important; flex: 0 0 auto !important; } } @media (min-width: 900px) { html body :where(#appContent, .portal-content) .assessments-member-pr-form[data-ui-fixed-grid="1"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-exercise, html body :where(#appContent, .portal-content) .assessments-member-pr-field-type, html body :where(#appContent, .portal-content) .assessments-member-pr-field-recorded, html body :where(#appContent, .portal-content) .assessments-member-pr-field-trainer { grid-column: span 3 !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-value, html body :where(#appContent, .portal-content) .assessments-member-pr-field-unit, html body :where(#appContent, .portal-content) .assessments-member-pr-field-reps { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .assessments-member-pr-field-notes, html body :where(#appContent, .portal-content) .assessments-member-pr-field-actions { grid-column: 1 / -1 !important; } } /* ========================================================= Assessments / Index filter and Create search controls ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, action buttons are full-width tap targets. - Tablet/small tablet/desktop: 641px+, buttons stay compact, aligned, normal-height, and readable like the rest of the app controls. */ html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"], html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: .75rem !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; } html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] { display: flex !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] > :where(.assessments-index-filter-search, .assessments-index-filter-date, .assessments-index-filter-trainer, .assessments-index-filter-actions), html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] > :where(.assessments-create-member-search-input, .assessments-create-member-search-button) { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] :where(input.form-field, select.form-field), html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] input.form-field { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] .assessments-index-filter-actions { display: flex !important; align-items: center !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] button.assessments-index-filter-button.ui-action-control, html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] button.assessments-create-member-search-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; text-align: center !important; line-height: 1.15 !important; min-height: 2.5rem !important; padding-block: .5rem !important; padding-inline: 1rem !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] button.assessments-index-filter-button.ui-action-control > .assessments-index-filter-button-label, html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] button.assessments-create-member-search-button.ui-action-control > .assessments-create-member-search-label { display: inline-block !important; text-align: center !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"], html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] > :where(.assessments-index-filter-search, .assessments-index-filter-date, .assessments-index-filter-trainer, .assessments-index-filter-actions), html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] > :where(.assessments-create-member-search-input, .assessments-create-member-search-button), html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] :where(input.form-field, select.form-field), html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] button.assessments-index-filter-button.ui-action-control, html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] button.assessments-create-member-search-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] .assessments-index-filter-actions { width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] button.assessments-index-filter-button.ui-action-control, html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] button.assessments-create-member-search-button.ui-action-control { white-space: normal !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] button.assessments-index-filter-button.ui-action-control > .assessments-index-filter-button-label, html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] button.assessments-create-member-search-button.ui-action-control > .assessments-create-member-search-label { white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] { flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] { flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] > .assessments-index-filter-search { width: auto !important; inline-size: auto !important; flex: 1 1 18rem !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] > .assessments-index-filter-date { width: 11rem !important; inline-size: 11rem !important; flex: 0 1 11rem !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] > .assessments-index-filter-trainer { width: 15rem !important; inline-size: 15rem !important; flex: 0 1 15rem !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] > .assessments-index-filter-actions { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; align-self: flex-end !important; align-items: center !important; } html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] > .assessments-create-member-search-input { width: auto !important; inline-size: auto !important; flex: 1 1 16rem !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] button.assessments-index-filter-button.ui-action-control, html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] button.assessments-create-member-search-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) form.assessments-index-filter-form[data-assessments-filter="1"] button.assessments-index-filter-button.ui-action-control > .assessments-index-filter-button-label, html body :where(#appContent, .portal-content) form.assessments-create-member-search[data-assessments-create-search="1"] button.assessments-create-member-search-button.ui-action-control > .assessments-create-member-search-label { white-space: nowrap !important; } } /* ========================================================= Loyalty action buttons: wallet, rewards, referrals ========================================================= Breakpoint contract: - Phone/mobile: 0px-640px, action buttons are full-width tap targets. - Tablet/small tablet/desktop: 641px+, buttons stay compact, aligned, normal-height, and readable like the rest of the app controls. */ html body :where(#appContent, .portal-content) :where( .loyalty-wallet-search-form, .loyalty-rewards-rules-form, .loyalty-rewards-catalog-form, .loyalty-referrals-filter-form ) { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: .75rem !important; } html body :where(#appContent, .portal-content) :where( .loyalty-wallet-search-field, .loyalty-wallet-search-actions, .loyalty-rewards-rules-actions, .loyalty-rewards-catalog-actions, .loyalty-referrals-filter-actions ) { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) :where( .loyalty-wallet-search-button, .loyalty-wallet-clear-button, .loyalty-rewards-save-button, .loyalty-rewards-add-button, .loyalty-referrals-filter-button, .loyalty-referrals-reset-button ).ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-height: 2.5rem !important; padding-block: .5rem !important; padding-inline: 1rem !important; line-height: 1.15 !important; text-align: center !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) :where( .loyalty-wallet-search-button, .loyalty-wallet-clear-button, .loyalty-rewards-save-button, .loyalty-rewards-add-button, .loyalty-referrals-filter-button, .loyalty-referrals-reset-button ).ui-action-control > .loyalty-button-label { display: inline-block !important; text-align: center !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions, html body :where(#appContent, .portal-content) .loyalty-referrals-filter-actions { display: flex !important; gap: .5rem !important; min-width: 0 !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions, html body :where(#appContent, .portal-content) .loyalty-referrals-filter-actions { width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) :where( .loyalty-wallet-search-button, .loyalty-wallet-clear-button, .loyalty-rewards-save-button, .loyalty-rewards-add-button, .loyalty-referrals-filter-button, .loyalty-referrals-reset-button ).ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; } html body :where(#appContent, .portal-content) :where( .loyalty-wallet-search-button, .loyalty-wallet-clear-button, .loyalty-rewards-save-button, .loyalty-rewards-add-button, .loyalty-referrals-filter-button, .loyalty-referrals-reset-button ).ui-action-control > .loyalty-button-label { white-space: normal !important; } html body :where(#appContent, .portal-content) .loyalty-referrals-row-count { width: 100% !important; margin-left: 0 !important; text-align: left !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-field { width: auto !important; inline-size: auto !important; flex: 1 1 18rem !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions, html body :where(#appContent, .portal-content) .loyalty-referrals-filter-actions { flex-direction: row !important; align-items: center !important; width: auto !important; inline-size: auto !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions { flex: 0 0 auto !important; align-self: flex-end !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions { justify-self: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: end !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form > :nth-child(3), html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form > :nth-child(4), html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form > :nth-child(7), html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form > :nth-child(8), html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form > :nth-child(5), html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form > :nth-child(6) { grid-column: span 1 !important; } html body :where(#appContent, .portal-content) .loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: end !important; } html body :where(#appContent, .portal-content) .loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(1) { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(2), html body :where(#appContent, .portal-content) .loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(3), html body :where(#appContent, .portal-content) .loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(4), html body :where(#appContent, .portal-content) .loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(5) { grid-column: span 1 !important; } html body :where(#appContent, .portal-content) .loyalty-referrals-filter-actions { grid-column: 1 / -1 !important; justify-content: flex-start !important; align-self: end !important; } html body :where(#appContent, .portal-content) .loyalty-referrals-row-count { margin-left: auto !important; text-align: right !important; } html body :where(#appContent, .portal-content) :where( .loyalty-wallet-search-button, .loyalty-wallet-clear-button, .loyalty-rewards-save-button, .loyalty-rewards-add-button, .loyalty-referrals-filter-button, .loyalty-referrals-reset-button ).ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) :where( .loyalty-wallet-search-button, .loyalty-wallet-clear-button, .loyalty-rewards-save-button, .loyalty-rewards-add-button, .loyalty-referrals-filter-button, .loyalty-referrals-reset-button ).ui-action-control > .loyalty-button-label { white-space: nowrap !important; } } /* ========================================================= Loyalty rewards screen layout correction ========================================================= The JS guidebar is injected as the first direct child of forms. This screen needs explicit named field classes instead of nth-child grid placement so the guidebar cannot squeeze the reward form into tiny columns. */ html body :where(#appContent, .portal-content) .loyalty-rewards-page-header, html body :where(#appContent, .portal-content) .loyalty-rewards-layout, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-card, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-card, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form, html body :where(#appContent, .portal-content) .loyalty-reward-field, html body :where(#appContent, .portal-content) .loyalty-rewards-table-wrap { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-header-actions { flex-wrap: wrap !important; justify-content: flex-end !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 1rem !important; align-items: start !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-card, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-card { grid-column: auto !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .75rem !important; align-items: end !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar { grid-column: 1 / -1 !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; align-self: stretch !important; overflow: hidden !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-meta, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-meta { flex: 1 1 14rem !important; min-width: 12rem !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-title, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-sub, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-title, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-sub { white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-progress, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-progress { flex: 0 0 auto !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar progress, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar progress { width: clamp(7rem, 18vw, 10rem) !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field { grid-column: auto !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field :where(input, select, textarea) { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.65rem !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { grid-column: 1 / -1 !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-row-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: .45rem !important; flex-wrap: wrap !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-row-actions > form { display: inline-flex !important; margin: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-toggle-button, html body :where(#appContent, .portal-content) .loyalty-rewards-delete-button { min-height: 2rem !important; height: 2rem !important; padding-block: .35rem !important; padding-inline: .7rem !important; line-height: 1.1 !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-delete-button { color: #be123c !important; background: #fff1f2 !important; border-color: #fecdd3 !important; box-shadow: none !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-delete-button:hover { color: #9f1239 !important; background: #ffe4e6 !important; border-color: #fda4af !important; } .dark html body :where(#appContent, .portal-content) .loyalty-rewards-delete-button, html.dark body :where(#appContent, .portal-content) .loyalty-rewards-delete-button { color: #fecdd3 !important; background: rgba(127, 29, 29, .35) !important; border-color: rgba(251, 113, 133, .55) !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-rewards-page-header { align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-header-actions { width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-header-actions > a { width: 100% !important; inline-size: 100% !important; justify-content: center !important; text-align: center !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions .loyalty-rewards-add-button, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions .loyalty-rewards-save-button { width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-progress, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-progress { width: 100% !important; inline-size: 100% !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar progress, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar progress { flex: 1 1 auto !important; width: auto !important; } } @media screen and (min-width: 641px) and (max-width: 1024px) { html body :where(#appContent, .portal-content) .loyalty-rewards-layout { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: repeat(2, minmax(14rem, 1fr)) !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { grid-column: 1 / -1 !important; } } @media screen and (min-width: 1025px) { html body :where(#appContent, .portal-content) .loyalty-rewards-layout { grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr) !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field-name, html body :where(#appContent, .portal-content) .loyalty-reward-field-description, html body :where(#appContent, .portal-content) .loyalty-reward-field-cost, html body :where(#appContent, .portal-content) .loyalty-reward-field-type, html body :where(#appContent, .portal-content) .loyalty-reward-field-amount, html body :where(#appContent, .portal-content) .loyalty-reward-field-percent { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { grid-column: 1 / -1 !important; } } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-meta, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-meta { min-width: 0 !important; flex-basis: auto !important; } } /* ========================================================= Loyalty rewards screen final pass: catalog grid + buttons ========================================================= Keeps the project breakpoint contract: - Phone/mobile: 0px-640px, action buttons are full-width tap targets. - Tablet/small tablet: 641px-1024px, single-column page, compact buttons. - Desktop: 1025px+, two-column page with a wider catalog and readable fields. */ html body :where(#appContent, .portal-content) .loyalty-rewards-page-header, html body :where(#appContent, .portal-content) .loyalty-rewards-layout, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-card, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-card, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"], html body :where(#appContent, .portal-content) .loyalty-reward-field, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-table-wrap { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 1rem !important; align-items: start !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-card, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-card { width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { display: grid !important; gap: 1rem !important; align-items: end !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar { grid-column: 1 / -1 !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-meta, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-meta { min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-title, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-sub, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-title, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-sub { white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field { width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field > label { display: block !important; margin-bottom: .35rem !important; line-height: 1.2 !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field :where(input, select, textarea) { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.65rem !important; height: 2.65rem !important; line-height: 1.2 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { display: flex !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-save-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-rewards-add-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-height: 2.65rem !important; height: 2.65rem !important; line-height: 1.15 !important; text-align: center !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-row-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: .45rem !important; flex-wrap: wrap !important; min-width: max-content !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-row-actions > form { display: inline-flex !important; margin: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-toggle-button, html body :where(#appContent, .portal-content) .loyalty-rewards-delete-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 2rem !important; height: 2rem !important; padding-block: .35rem !important; padding-inline: .7rem !important; line-height: 1.1 !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-delete-button { color: #be123c !important; background: #fff1f2 !important; border-color: #fecdd3 !important; box-shadow: none !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-delete-button:hover { color: #9f1239 !important; background: #ffe4e6 !important; border-color: #fda4af !important; } .dark html body :where(#appContent, .portal-content) .loyalty-rewards-delete-button, html.dark body :where(#appContent, .portal-content) .loyalty-rewards-delete-button { color: #fecdd3 !important; background: rgba(127, 29, 29, .35) !important; border-color: rgba(251, 113, 133, .55) !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-rewards-page-header { align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-header-actions { display: flex !important; width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .5rem !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-header-actions > a { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; justify-content: center !important; text-align: center !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-layout, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-reward-field-name, html body :where(#appContent, .portal-content) .loyalty-reward-field-description, html body :where(#appContent, .portal-content) .loyalty-reward-field-cost, html body :where(#appContent, .portal-content) .loyalty-reward-field-type, html body :where(#appContent, .portal-content) .loyalty-reward-field-amount, html body :where(#appContent, .portal-content) .loyalty-reward-field-percent, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { grid-column: 1 / -1 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar .ui-guide-progress, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar .ui-guide-progress { width: 100% !important; inline-size: 100% !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar progress, html body :where(#appContent, .portal-content) .loyalty-rewards-rules-form > .ui-guidebar progress { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-save-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-rewards-add-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-table-wrap table { min-width: 42rem !important; } } @media screen and (min-width: 641px) and (max-width: 1024px) { html body :where(#appContent, .portal-content) .loyalty-rewards-layout { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { grid-column: 1 / -1 !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field-name, html body :where(#appContent, .portal-content) .loyalty-reward-field-description, html body :where(#appContent, .portal-content) .loyalty-reward-field-cost, html body :where(#appContent, .portal-content) .loyalty-reward-field-type, html body :where(#appContent, .portal-content) .loyalty-reward-field-amount, html body :where(#appContent, .portal-content) .loyalty-reward-field-percent { grid-column: span 1 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-save-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-rewards-add-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; max-width: max-content !important; flex: 0 0 auto !important; white-space: nowrap !important; } } @media screen and (min-width: 1025px) { html body :where(#appContent, .portal-content) .loyalty-rewards-layout { grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { grid-column: 1 / -1 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-name, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-description { grid-column: span 4 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-cost, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-type { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-amount, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-percent { grid-column: span 4 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-save-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-rewards-add-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; max-width: max-content !important; flex: 0 0 auto !important; white-space: nowrap !important; } } /* ========================================================= Loyalty rewards narrow catalog/mobile cleanup ========================================================= The rewards card can be narrow even when the viewport reports tablet width because the app shell/sidebar and screenshots scale the available content. Use the catalog card width as the source of truth so the form behaves like mobile whenever the card itself is phone-sized. */ html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-card { container-type: inline-size !important; container-name: loyaltyRewardsCatalog; } @media screen and (max-width: 768px) { html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: .95rem !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-rewards-catalog-actions { grid-column: 1 / -1 !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field :where(input, select, textarea) { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; flex-direction: column !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions .loyalty-rewards-add-button.ui-action-control { display: flex !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; justify-content: center !important; text-align: center !important; flex: 0 0 auto !important; } } @supports (container-type: inline-size) { @container loyaltyRewardsCatalog (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: .95rem !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-rewards-catalog-actions { grid-column: 1 / -1 !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-reward-field :where(input, select, textarea) { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; flex-direction: column !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions .loyalty-rewards-add-button.ui-action-control { display: flex !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; justify-content: center !important; text-align: center !important; flex: 0 0 auto !important; } } } /* ========================================================= Loyalty rewards rules Save button narrow/mobile fix ========================================================= Use full-width Save only at the phone breakpoint. Above 640px, the Save action should stay compact like other app action buttons. */ html body :where(#appContent, .portal-content) .loyalty-rewards-rules-card { container-type: inline-size !important; container-name: loyaltyRewardsRules !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions { display: flex !important; width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions .loyalty-rewards-save-button.ui-action-control { display: flex !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; justify-content: center !important; text-align: center !important; flex: 0 0 auto !important; } } @supports (container-type: inline-size) { @container loyaltyRewardsRules (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions { display: flex !important; width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions .loyalty-rewards-save-button.ui-action-control { display: flex !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; justify-content: center !important; text-align: center !important; flex: 0 0 auto !important; } } } /* ========================================================= Loyalty rewards desktop Add reward placement ========================================================= On wide, non-mobile screens the Add reward button belongs in the final form row beside Value amount / Value percent. Keeping it on its own full row leaves excessive whitespace and makes the action feel detached. Mobile and narrow-card behavior remains full-width from the existing rules above. */ @media screen and (min-width: 1025px) { html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-rewards-catalog-actions { grid-column: span 4 !important; align-self: end !important; justify-content: flex-end !important; align-items: flex-end !important; min-height: 2.65rem !important; padding-top: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions .loyalty-rewards-add-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; max-width: max-content !important; white-space: nowrap !important; } } /* ========================================================= Loyalty wallet search button final responsive alignment ========================================================= Keeps the /loyalty/wallet Search/Clear controls full-width when the actual card is narrow, even if the outer app viewport is wider than 640px. */ html body :where(#appContent, .portal-content) .loyalty-wallet-search-card { container-type: inline-size !important; container-name: loyaltyWalletSearch !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { display: flex !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; gap: .75rem !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-field, html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions { display: flex !important; gap: .5rem !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-clear-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-height: 2.5rem !important; padding-block: .5rem !important; padding-inline: 1rem !important; line-height: 1.15 !important; text-align: center !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: inline-block !important; text-align: center !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-field, html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions { width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-clear-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { white-space: normal !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-field { flex: 1 1 18rem !important; width: auto !important; inline-size: auto !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions { flex: 0 0 auto !important; flex-direction: row !important; align-items: center !important; align-self: flex-end !important; justify-content: flex-start !important; width: auto !important; inline-size: auto !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-clear-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; flex: 0 0 auto !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { white-space: nowrap !important; } } @supports (container-type: inline-size) { @container loyaltyWalletSearch (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-field, html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions { width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-clear-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { white-space: normal !important; } } } /* ========================================================= Loyalty wallet search layout hardening ========================================================= The previous narrow-card fallback could make the Search action full-width while the form still behaved like a row, squeezing the field into a thin column. This block opts the wallet search out of generic filterbar behavior and drives the entire form with a single scoped grid. */ html body :where(#appContent, .portal-content) .loyalty-wallet-search-card { container-type: inline-size !important; container-name: loyaltyWalletSearchFinal !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { display: grid !important; grid-template-columns: minmax(16rem, 1fr) max-content !important; align-items: end !important; gap: .75rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-field, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-actions { grid-column: auto !important; box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-field { width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-field label, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-field .text-slate-500 { display: block !important; width: 100% !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-field :where(input, select, textarea, .ui-control, .form-field) { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; align-self: end !important; gap: .5rem !important; width: auto !important; inline-size: auto !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; padding-block: .5rem !important; padding-inline: 1rem !important; line-height: 1.15 !important; text-align: center !important; white-space: nowrap !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: inline-block !important; white-space: nowrap !important; word-break: normal !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-actions { width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; white-space: normal !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { white-space: normal !important; } } @supports (container-type: inline-size) { @container loyaltyWalletSearchFinal (max-width: 640px) { html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-actions { width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; white-space: normal !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { white-space: normal !important; } } } /* ========================================================= Loyalty wallet search row placement + mobile actions ========================================================= Keeps Search/Clear beside the input on non-mobile screens and moves the helper text below the entire row. On phone/narrow cards the input and actions stack, and both buttons become full-width centered tap targets. */ html body :where(#appContent, .portal-content) .loyalty-wallet-search-card { container-type: inline-size !important; container-name: loyaltyWalletSearchRow !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] > .loyalty-wallet-search-field { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: center !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-top: .25rem !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row > :where(input, select, textarea, .ui-control, .form-field), html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row > input[name="q"] { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; align-self: center !important; gap: .5rem !important; width: auto !important; inline-size: auto !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; padding-block: .5rem !important; padding-inline: 1rem !important; line-height: 1.15 !important; text-align: center !important; white-space: nowrap !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-help { display: block !important; width: 100% !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions { width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: inline-block !important; width: 100% !important; text-align: center !important; white-space: normal !important; } } @supports (container-type: inline-size) { @container loyaltyWalletSearchRow (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions { width: 100% !important; inline-size: 100% !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: inline-block !important; width: 100% !important; text-align: center !important; white-space: normal !important; } } } /* ========================================================= Loyalty wallet search mobile/narrow full-width actions ========================================================= Strong final override: the Search/Clear actions live inside the input row, so the row itself must stack before the buttons can become full-width. */ @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .625rem !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 1 1 100% !important; box-sizing: border-box !important; margin-inline: auto !important; text-align: center !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: block !important; width: 100% !important; text-align: center !important; } } @supports (container-type: inline-size) { @container loyaltyWalletSearchRow (max-width: 720px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .625rem !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 1 1 100% !important; box-sizing: border-box !important; margin-inline: auto !important; text-align: center !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card .loyalty-wallet-search-input-row .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: block !important; width: 100% !important; text-align: center !important; } } } /* ========================================================= Loyalty wallet search final layout reset ========================================================= This form is custom-scoped and no longer participates in the generic data-ui-filters/filterbar rules. Keep the input/button row stable: - 0-640px and narrow card: input first, Search/Clear full-width stacked - 641px+: buttons sit beside the input, compact and normal-height */ html body :where(#appContent, .portal-content) .loyalty-wallet-search-card { container-type: inline-size !important; container-name: loyaltyWalletSearchFixed !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-field { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: center !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-top: .25rem !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > input[name="q"] { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; flex: 0 0 auto !important; line-height: 1.2 !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: .5rem !important; width: auto !important; inline-size: auto !important; min-width: 0 !important; max-width: 100% !important; align-self: center !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; padding-block: .5rem !important; padding-inline: 1rem !important; line-height: 1.15 !important; text-align: center !important; white-space: nowrap !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-help { display: block !important; width: 100% !important; max-width: 100% !important; margin-top: .35rem !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; inline-size: 100% !important; justify-content: stretch !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; margin-inline: 0 !important; white-space: normal !important; } } @supports (container-type: inline-size) { @container loyaltyWalletSearchFixed (max-width: 640px) { html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; inline-size: 100% !important; justify-content: stretch !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-clear-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; margin-inline: 0 !important; white-space: normal !important; } } } /* ========================================================= Loyalty wallet search mobile/narrow button width final fix ========================================================= The wallet search row is custom-scoped. This final rule makes Search/Clear full-width whenever the phone viewport or the card itself is narrow, while leaving desktop/tablet-wide cards compact beside the search input. */ @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .625rem !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > input[name="q"] { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-clear-button.ui-action-control { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; box-sizing: border-box !important; margin: 0 !important; text-align: center !important; white-space: normal !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: block !important; width: 100% !important; text-align: center !important; } } @supports (container-type: inline-size) { @container loyaltyWalletSearchFixed (max-width: 760px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .625rem !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > input[name="q"] { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-clear-button.ui-action-control { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; box-sizing: border-box !important; margin: 0 !important; text-align: center !important; white-space: normal !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: block !important; width: 100% !important; text-align: center !important; } } } /* ========================================================= Loyalty rewards Add reward row alignment finalization ========================================================= Non-mobile screens should keep the primary Add reward action attached to the reward value row instead of dropping it into its own whitespace row. Mobile/narrow-card behavior remains stacked and full-width from 0-640px. */ @media screen and (min-width: 641px) and (max-width: 1024px) { html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: end !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .ui-guidebar { grid-column: 1 / -1 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-name, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-description { grid-column: span 3 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-cost { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-type { grid-column: span 4 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-amount, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-percent, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-rewards-catalog-actions { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { align-self: end !important; align-items: flex-end !important; justify-content: flex-end !important; padding-top: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions .loyalty-rewards-add-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; max-width: max-content !important; white-space: nowrap !important; } } @media screen and (min-width: 1025px) { html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-amount, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-percent, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-rewards-catalog-actions { grid-column: span 4 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { align-self: end !important; align-items: flex-end !important; justify-content: flex-end !important; padding-top: 0 !important; } } @supports (container-type: inline-size) { @container loyaltyRewardsCatalog (min-width: 641px) and (max-width: 900px) { html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: end !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-name, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-description { grid-column: span 3 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-cost { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-type { grid-column: span 4 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-amount, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-reward-field-percent, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-form[data-loyalty-rewards-catalog="1"] > .loyalty-rewards-catalog-actions { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { flex-direction: row !important; align-items: flex-end !important; justify-content: flex-end !important; padding-top: 0 !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions .loyalty-rewards-add-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; max-width: max-content !important; white-space: nowrap !important; } } } /* ========================================================= Loyalty referrals filter buttons final alignment ========================================================= Screen: /loyalty/referrals Contract: - 0px-640px phone/mobile: Filter and Reset stack full-width with centered text. - 641px+ tablet/desktop: Filter and Reset stay compact, aligned, normal-height. - Narrow filter cards also use the mobile button layout, even when the viewport is wider than the phone breakpoint. */ html body :where(#appContent, .portal-content) .loyalty-referrals-filter-card { container-type: inline-size !important; container-name: loyaltyReferralsFilter !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] { display: grid !important; gap: .75rem !important; align-items: end !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > div, html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-actions { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] :where(input, select, textarea, .form-field, .ui-control) { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-actions { display: flex !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-reset-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; padding-block: .5rem !important; padding-inline: 1rem !important; line-height: 1.15 !important; text-align: center !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-reset-button.ui-action-control > .loyalty-button-label { display: inline-block !important; text-align: center !important; width: 100% !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > div, html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-actions { grid-column: 1 / -1 !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-reset-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; white-space: normal !important; margin-inline: 0 !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-row-count { width: 100% !important; inline-size: 100% !important; margin-left: 0 !important; text-align: left !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(1) { grid-column: span 2 !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(2), html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(3), html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(4), html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > :nth-child(5) { grid-column: span 1 !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-actions { grid-column: 1 / -1 !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-reset-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-row-count { margin-left: auto !important; text-align: right !important; } } @supports (container-type: inline-size) { @container loyaltyReferralsFilter (max-width: 640px) { html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] > div, html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-actions { grid-column: 1 / -1 !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-filter-button.ui-action-control, html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-reset-button.ui-action-control { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; white-space: normal !important; margin-inline: 0 !important; } html body :where(#appContent, .portal-content) form.loyalty-referrals-filter-form[data-loyalty-referrals-filter="1"] .loyalty-referrals-row-count { width: 100% !important; inline-size: 100% !important; margin-left: 0 !important; text-align: left !important; } } } /* ========================================================= Loyalty wallet search non-mobile width correction ========================================================= Per app breakpoints, full-width Search/Clear actions are phone-only (0-640px). From 641px upward, keep the buttons compact beside the search field even if the card/container is narrow. */ @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: center !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > input[name="q"] { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: .5rem !important; width: auto !important; inline-size: auto !important; min-width: 0 !important; max-width: max-content !important; align-self: center !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-search-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-clear-button.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; padding-block: .5rem !important; padding-inline: 1rem !important; box-sizing: border-box !important; margin: 0 !important; text-align: center !important; white-space: nowrap !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-search-button.ui-action-control > .loyalty-button-label, html body :where(#appContent, .portal-content) .loyalty-wallet-search-card form.loyalty-wallet-search-form[data-loyalty-wallet-search="1"] .loyalty-wallet-search-input-row > .loyalty-wallet-search-actions > .loyalty-wallet-clear-button.ui-action-control > .loyalty-button-label { display: inline-block !important; width: auto !important; text-align: center !important; white-space: nowrap !important; } } /* ========================================================= Targeted mobile action-width fixes ========================================================= App breakpoint rule: phone/mobile is 0-640px. These overrides keep the affected action buttons full-width on mobile without changing tablet or desktop layouts. */ @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] .subscriptions-filter-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; } html body :where(#appContent, .portal-content) form[data-subscriptions-filter="1"] .subscriptions-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { display: flex !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; white-space: normal !important; } html body :where(#appContent, .portal-content) .billing-invoice-void-submit.ui-action-control, html body :where(#appContent, .portal-content) button.billing-invoice-void-submit.ui-action-control, html body :where(#appContent, .portal-content) .billing-invoice-payment-submit.ui-action-control, html body :where(#appContent, .portal-content) button.billing-invoice-payment-submit.ui-action-control { display: flex !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; white-space: normal !important; } } /* Reports -> Management: keep the report filters usable when desktop viewport starts at 1025px but the sidebar leaves a tablet-sized content column. The generic filter-grid normalizer is intentionally broad; this screen needs a compact Run action on non-mobile and a cleaner wrapped filter toolbar. */ :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] { display: grid !important; grid-template-columns: minmax(16rem, 1.6fr) minmax(8.5rem, .75fr) minmax(8.5rem, .75fr) minmax(12rem, 1fr) minmax(6rem, .45fr) max-content !important; align-items: end !important; gap: .75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > * { min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] :where(input, select, textarea, .ui-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions { display: flex !important; align-items: end !important; justify-content: flex-start !important; gap: .5rem !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions > .reports-management-run-button { flex: 0 0 auto !important; width: auto !important; min-width: 5.5rem !important; max-width: max-content !important; justify-content: center !important; white-space: nowrap !important; } @container app-content (max-width: 980px) { :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-report-field, :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-branch-field { grid-column: span 2 !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions { grid-column: auto !important; width: auto !important; min-width: 0 !important; } } @container app-content (max-width: 760px) { :where(#appContent, .portal-content) .reports-management-filter-card > .ui-filterbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; justify-content: stretch !important; gap: .65rem !important; } :where(#appContent, .portal-content) .reports-management-filter-card > .ui-filterbar > .ui-filterbar-left, :where(#appContent, .portal-content) .reports-management-filter-card > .ui-filterbar > .ui-filterbar-right { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) .reports-management-filter-card > .ui-filterbar .ui-filterbar-select { flex: 1 1 12rem !important; min-width: min(12rem, 100%) !important; max-width: 100% !important; } } @container app-content (max-width: 560px) { :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-report-field, :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-branch-field, :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions { grid-column: 1 / -1 !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions { width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions > .reports-management-run-button { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } /* Reports -> Management: viewport-based mobile override. Container queries keep the sidebar-expanded desktop layout compact, but the product breakpoint rule says phones are 0-640px by viewport. This guarantees the Run action is full width throughout the entire mobile range, including widths where the content container is wider than the earlier 560px cutoff. */ @media (max-width: 640px) { html body :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } html body :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-report-field, html body :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-branch-field, html body :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions { grid-column: 1 / -1 !important; } html body :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions > .reports-management-run-button, html body :where(#appContent, .portal-content) form.reports-management-filter-form[data-reports-management-filter="1"] button.reports-management-run-button { display: flex !important; flex: 1 1 100% !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; justify-content: center !important; text-align: center !important; } } /* Reports -> Management: final Run button breakpoint lock. Default the Run action to full-width, then opt it back to compact only from 641px upward. This avoids any container-query/desktop/sidebar rule making it compact inside the 0-640px mobile range. */ html body main#appContent form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions, html body .portal-content form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions { display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: stretch !important; justify-self: stretch !important; grid-column: 1 / -1 !important; width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; } html body main#appContent form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions > button.reports-management-run-button, html body main#appContent form.reports-management-filter-form[data-reports-management-filter="1"] button.reports-management-run-button, html body .portal-content form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions > button.reports-management-run-button, html body .portal-content form.reports-management-filter-form[data-reports-management-filter="1"] button.reports-management-run-button { display: flex !important; flex: 1 1 100% !important; width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; justify-content: center !important; text-align: center !important; white-space: normal !important; } @media screen and (min-width: 641px) { html body main#appContent form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions, html body .portal-content form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions { grid-column: auto !important; width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: 100% !important; max-inline-size: 100% !important; justify-self: start !important; justify-content: flex-start !important; align-items: end !important; flex-wrap: nowrap !important; } html body main#appContent form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions > button.reports-management-run-button, html body main#appContent form.reports-management-filter-form[data-reports-management-filter="1"] button.reports-management-run-button, html body .portal-content form.reports-management-filter-form[data-reports-management-filter="1"] > .reports-management-filter-actions > button.reports-management-run-button, html body .portal-content form.reports-management-filter-form[data-reports-management-filter="1"] button.reports-management-run-button { flex: 0 0 auto !important; width: auto !important; inline-size: auto !important; min-width: 5.5rem !important; min-inline-size: 5.5rem !important; max-width: max-content !important; max-inline-size: max-content !important; white-space: nowrap !important; } } /* Reports dashboard KPI buttons: phone/mobile is 0-640px, so these six top-card actions are full-width by default and only become compact from 641px upward. This mirrors the final /reports/management Run button lock. */ html body main#appContent a.reports-dashboard-kpi-action, html body .portal-content a.reports-dashboard-kpi-action { display: flex !important; width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; white-space: normal !important; } @media screen and (min-width: 641px) { html body main#appContent a.reports-dashboard-kpi-action, html body .portal-content a.reports-dashboard-kpi-action { width: auto !important; inline-size: auto !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } } /* Reports dashboard date/branch filter actions: keep Apply and Reset aligned with the report filter fields after the mobile breakpoint. Contract: - 0px-640px: controls stack and Apply/Reset are full-width tap targets. - 641px+: fields wrap naturally, while Apply/Reset stay compact and aligned to the bottom of the filter row. */ html body :where(#appContent, .portal-content) .reports-dashboard-filter-card { container-type: inline-size !important; container-name: reportsDashboardFilter !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"], html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: .75rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-field, html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-field { flex: 1 1 100% !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] :where(input, select, textarea, .ui-control, .form-field), html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] :where(input, select, textarea, .ui-control, .form-field) { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-actions, html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; gap: .5rem !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-actions > .reports-dashboard-filter-action, html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-actions > .reports-dashboard-filter-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; min-height: 2.65rem !important; white-space: nowrap !important; text-align: center !important; } @media screen and (min-width: 641px) { html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"], html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-end !important; justify-content: flex-start !important; gap: .75rem !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-date, html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-date { flex: 0 1 13.75rem !important; width: 13.75rem !important; inline-size: 13.75rem !important; min-width: 10.5rem !important; min-inline-size: 10.5rem !important; max-width: 13.75rem !important; max-inline-size: 13.75rem !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-branch, html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-branch { flex: 0 1 16.25rem !important; width: 16.25rem !important; inline-size: 16.25rem !important; min-width: 12rem !important; min-inline-size: 12rem !important; max-width: 16.25rem !important; max-inline-size: 16.25rem !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-actions, html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-actions { display: flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; align-items: flex-end !important; justify-content: flex-start !important; align-self: flex-end !important; width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: 100% !important; max-inline-size: 100% !important; } html body main#appContent form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-actions > .reports-dashboard-filter-action, html body .portal-content form.reports-dashboard-filter-form[data-reports-dashboard-filter="1"] > .reports-dashboard-filter-actions > .reports-dashboard-filter-action { flex: 0 0 auto !important; width: auto !important; inline-size: auto !important; min-width: 6.25rem !important; min-inline-size: 6.25rem !important; max-width: max-content !important; max-inline-size: max-content !important; padding-inline: 1rem !important; } } /* Dashboard: keep Focus mode as a normal pill button at every width. Some broad mobile/header action rules can squeeze this control down into an icon-sized square when the dashboard header wraps near breakpoints. */ html body :where(#appContent, .portal-content) [data-dashboard="1"] #dashFocusBtn.dash-focus-mode-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; box-sizing: border-box !important; aspect-ratio: auto !important; min-height: 2.5rem !important; height: auto !important; padding-inline: 0.9rem !important; min-width: min(8.5rem, 100%) !important; min-inline-size: min(8.5rem, 100%) !important; max-width: 100% !important; max-inline-size: 100% !important; white-space: nowrap !important; line-height: 1.15 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] #dashFocusBtn.dash-focus-mode-btn > .dash-focus-mode-icon, html body :where(#appContent, .portal-content) [data-dashboard="1"] #dashFocusBtn.dash-focus-mode-btn > .dash-focus-mode-icon svg { flex: 0 0 auto !important; width: 1rem !important; height: 1rem !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] #dashFocusBtn.dash-focus-mode-btn > .dash-focus-mode-label { display: inline !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { /* Mobile contract: keep Focus mode a real full-width text button from 0-640px. This deliberately overrides the generic two-up action grid and any icon-button/aspect-ratio rules that can turn it into a square. */ html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-header-actions > #dashFocusBtn.dash-focus-mode-btn { display: inline-flex !important; grid-column: 1 / -1 !important; flex: 0 0 100% !important; flex-basis: 100% !important; width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; min-height: 2.5rem !important; height: 2.5rem !important; max-height: 2.75rem !important; padding-inline: 0.9rem !important; aspect-ratio: auto !important; white-space: nowrap !important; align-self: stretch !important; justify-self: stretch !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-header-actions > #dashFocusBtn.dash-focus-mode-btn > .dash-focus-mode-label { display: inline !important; visibility: visible !important; opacity: 1 !important; } } /* Communication > Quick WhatsApp: keep the member lookup controls aligned with the app's 640px mobile contract. The generic filter fallback uses 767px for legacy screens; this screen should switch back to compact at 641px. */ html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"], html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-field, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-field { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-button, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: end !important; flex: 0 0 auto !important; width: auto !important; inline-size: auto !important; min-width: 6.5rem !important; min-inline-size: 6.5rem !important; max-width: max-content !important; max-inline-size: max-content !important; min-height: 2.5rem !important; padding-inline: 1rem !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"], html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0.65rem !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-button, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-button { width: 100% !important; inline-size: 100% !important; min-width: 100% !important; min-inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; } } /* ========================================================= Communication > Quick WhatsApp lookup layout final fix ========================================================= The generic filter preset toolbar is inserted as a sibling before the GET form. Keep that toolbar and the Find member search form inside one managed wrapper, then let the selected-member card span the full row underneath. */ html body :where(#appContent, .portal-content) .communication-quick-lookup-card { container-type: inline-size !important; container-name: communicationQuickLookup !important; } html body :where(#appContent, .portal-content) .communication-quick-lookup-panel, html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap, html body :where(#appContent, .portal-content) .communication-quick-selected-member-card { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .communication-quick-lookup-panel { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.85rem !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap { display: grid !important; grid-template-columns: minmax(20rem, 0.9fr) minmax(22rem, 1.1fr) !important; gap: 0.75rem !important; align-items: end !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar { margin: 0 !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; align-self: end !important; min-height: 3.5rem !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar > .ui-filterbar-left, html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar > .ui-filterbar-right { min-width: 0 !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar .ui-filterbar-select { min-width: min(12rem, 100%) !important; width: min(12rem, 100%) !important; max-width: 100% !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"], html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] { display: block !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; align-self: end !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-row, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-row { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; align-items: end !important; gap: 0.55rem !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-field, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-field { display: block !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-button, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: end !important; width: auto !important; inline-size: auto !important; min-width: 6.5rem !important; min-inline-size: 6.5rem !important; max-width: max-content !important; max-inline-size: max-content !important; min-height: 2.5rem !important; height: 2.5rem !important; padding-inline: 1rem !important; white-space: nowrap !important; flex: 0 0 auto !important; } @media screen and (max-width: 900px) { html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap { grid-template-columns: minmax(0, 1fr) !important; } } @media screen and (max-width: 640px) { html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-row, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-row { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-button, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-button { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; } } @supports (container-type: inline-size) { @container communicationQuickLookup (max-width: 900px) { html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap { grid-template-columns: minmax(0, 1fr) !important; } } @container communicationQuickLookup (max-width: 640px) { html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-row, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-row { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-button, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-button { width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; } } } /* ========================================================= Communication > Quick WhatsApp lookup layout narrow-tablet fix ========================================================= At intermediate content widths the preset toolbar was being squeezed into two rows while the Find member search remained beside it. Treat this as a narrow content state: stack the preset toolbar above the member search until there is enough actual card width for both blocks to sit side-by-side. */ html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap { grid-template-columns: minmax(24rem, 0.95fr) minmax(26rem, 1.05fr) !important; } @media screen and (max-width: 1180px) { html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar, html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"], html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] { align-self: stretch !important; } } @supports (container-type: inline-size) { @container communicationQuickLookup (max-width: 1180px) { html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap { grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar, html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"], html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] { align-self: stretch !important; } } } @media screen and (min-width: 641px) { html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-row, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] > .communication-quick-member-search-row { grid-template-columns: minmax(0, 1fr) max-content !important; } html body main#appContent form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-button, html body .portal-content form.communication-quick-member-search-form[data-communication-quick-search="1"] .communication-quick-member-search-button { width: auto !important; inline-size: auto !important; min-width: 6.5rem !important; min-inline-size: 6.5rem !important; max-width: max-content !important; max-inline-size: max-content !important; } } /* ========================================================= Communication > Quick WhatsApp preset toolbar row fix ========================================================= Keep the injected preset controls in a single clean row from 641px up. The wider lookup layout can stack above the member search, but the preset buttons themselves should not break into two uneven rows around tablet widths. */ @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; justify-content: stretch !important; column-gap: 0.75rem !important; row-gap: 0.5rem !important; min-height: 0 !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar > .ui-filterbar-left { display: flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; min-width: max-content !important; width: max-content !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar > .ui-filterbar-right { display: grid !important; grid-template-columns: minmax(12rem, 16rem) max-content max-content max-content !important; align-items: center !important; justify-content: end !important; justify-items: stretch !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-wrap: nowrap !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar .ui-filterbar-select { width: 100% !important; min-width: 12rem !important; max-width: 16rem !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar .ui-filterbar-btn { width: auto !important; min-width: 0 !important; max-width: max-content !important; white-space: nowrap !important; justify-content: center !important; } } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar { display: flex !important; flex-wrap: wrap !important; } } /* ========================================================= Communication > Quick WhatsApp mobile preset toolbar match ========================================================= Match the Communication module's standard filter-card feel on mobile: label on its own row, preset selector full width, then compact action buttons underneath. The app mobile contract remains 0-640px. */ @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.65rem !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar > .ui-filterbar-left { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar > .ui-filterbar-right { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.55rem !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar .ui-filterbar-select { display: flex !important; flex: 1 1 100% !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; } html body :where(#appContent, .portal-content) .communication-quick-filter-search-wrap > .ui-filterbar .ui-filterbar-btn { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; inline-size: auto !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: max-content !important; max-inline-size: max-content !important; justify-content: center !important; white-space: nowrap !important; } } /* Inventory / Products: mobile header export action sizing. Keep product header actions readable on the full project mobile range (0px-640px). The Export XLSX button can become cramped in a two-column mobile header, so the header actions stack as full-width controls on phones. Tablet/desktop widths remain compact. */ @media (max-width: 640px) { #appContent .inventory-products-header-actions, .portal-content .inventory-products-header-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.5rem !important; } #appContent .inventory-products-header-actions > .inventory-products-action, .portal-content .inventory-products-header-actions > .inventory-products-action { width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 2.5rem !important; flex: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.375rem !important; text-align: center !important; white-space: nowrap !important; } } @media (min-width: 641px) { #appContent .inventory-products-header-actions, .portal-content .inventory-products-header-actions { display: inline-flex !important; width: auto !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; } #appContent .inventory-products-header-actions > .inventory-products-action, .portal-content .inventory-products-header-actions > .inventory-products-action { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; white-space: nowrap !important; } } /* POS sale: keep monetary values readable when amounts have many digits. The amount beside product/cart lines should not wrap into two lines; the surrounding row is allowed to scroll/wrap instead of splitting currency. */ :where(#appContent, .portal-content) .pos-sale-layout .pos-money, :where(#appContent, .portal-content) .pos-sale-results-table .pos-sale-product-price, :where(#appContent, .portal-content) .pos-sale-cart-line-total, :where(#appContent, .portal-content) .pos-sale-cart-unit-price .pos-money { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; font-variant-numeric: tabular-nums !important; } :where(#appContent, .portal-content) .pos-sale-results-table .pos-sale-product-price { min-width: 7.5rem !important; } :where(#appContent, .portal-content) .pos-sale-cart-line { min-width: 0 !important; } :where(#appContent, .portal-content) .pos-sale-cart-line-total { width: auto !important; min-width: 7.5rem !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content) .pos-sale-cart-product { min-width: 0 !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .pos-sale-cart-line { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "product product" "qty remove" "amount amount" !important; align-items: center !important; gap: 0.65rem !important; } :where(#appContent, .portal-content) .pos-sale-cart-product { grid-area: product !important; } :where(#appContent, .portal-content) .pos-sale-cart-qty { grid-area: qty !important; width: 100% !important; max-width: 9rem !important; } :where(#appContent, .portal-content) .pos-sale-cart-line-total { grid-area: amount !important; min-width: 0 !important; width: 100% !important; text-align: right !important; } :where(#appContent, .portal-content) .pos-sale-cart-line > button[type="submit"] { grid-area: remove !important; justify-self: end !important; } } /* Settings / Add-ons list filter: keep Apply compact and aligned after the 640px mobile breakpoint. */ @media (max-width: 640px) { #appContent form.settings-addons-filter[data-ui-filters="1"], .portal-content form.settings-addons-filter[data-ui-filters="1"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; width: 100% !important; } #appContent form.settings-addons-filter[data-ui-filters="1"] > *, .portal-content form.settings-addons-filter[data-ui-filters="1"] > * { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; } #appContent form.settings-addons-filter[data-ui-filters="1"] > :where(button, input[type="submit"], .ui-action-control), .portal-content form.settings-addons-filter[data-ui-filters="1"] > :where(button, input[type="submit"], .ui-action-control) { justify-content: center !important; text-align: center !important; } } @media (min-width: 641px) { #appContent form.settings-addons-filter[data-ui-filters="1"], .portal-content form.settings-addons-filter[data-ui-filters="1"] { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.5rem !important; width: 100% !important; } #appContent form.settings-addons-filter[data-ui-filters="1"] > select, .portal-content form.settings-addons-filter[data-ui-filters="1"] > select { width: min(100%, 20rem) !important; max-width: 20rem !important; min-width: 12rem !important; flex: 0 1 20rem !important; } #appContent form.settings-addons-filter[data-ui-filters="1"] > :where(button, input[type="submit"], .ui-action-control), .portal-content form.settings-addons-filter[data-ui-filters="1"] > :where(button, input[type="submit"], .ui-action-control) { width: auto !important; max-width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; align-self: center !important; justify-content: center !important; white-space: nowrap !important; text-align: center !important; } } /* Inventory / Product groups: keep Add group action responsive. Mobile (640px and below) uses the project form-submit full-width pattern; tablet/desktop stay compact so the card action does not look oversized. */ :where(#appContent, .portal-content) .inventory-product-groups-add-button { width: auto !important; max-width: max-content !important; min-width: 7.25rem !important; flex: 0 0 auto !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .inventory-product-groups-add-button { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 100% !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) .inventory-product-groups-add-button { width: auto !important; max-width: max-content !important; min-width: 7.25rem !important; flex: 0 0 auto !important; } } /* Server-rendered pagination for high-volume list pages. */ .ui-server-pagination { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid #e2e8f0; background: #fff; font-size: 0.75rem; color: #475569; } .ui-server-pagination-summary strong { color: #0f172a; font-weight: 700; } .ui-server-pagination-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; flex-wrap: wrap; } .ui-server-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: 0.375rem 0.625rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; background: #fff; color: #0f172a; font-weight: 650; text-decoration: none; line-height: 1; } .ui-server-page-btn:hover { background: #f8fafc; } .ui-server-page-btn.is-current { border-color: #0f172a; background: #0f172a; color: #fff; } .ui-server-page-btn.is-disabled { opacity: 0.45; cursor: not-allowed; } .ui-server-page-ellipsis, .ui-server-per { padding: 0 0.125rem; color: #64748b; } @media (max-width: 640px) { .ui-server-pagination { align-items: stretch; flex-direction: column; padding: 0.75rem; } .ui-server-pagination-actions { justify-content: flex-start; } .ui-server-page-btn { min-height: 1.875rem; border-radius: 0.625rem; font-size: 0.6875rem; } } /* Dashboard tablet/intermediate header layout. Between mobile and wide desktop the dashboard header should not switch to the full desktop row too early. Keep the title on its own row, keep range controls together, and let action buttons wrap cleanly underneath. */ @media screen and (min-width: 641px) and (max-width: 1024px) { html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-page-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.85rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-page-title { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-header-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.65rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: end !important; gap: 0.65rem !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-right: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control { width: min(100%, 28rem) !important; max-width: 100% !important; min-width: 0 !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control .ui-range-select { width: min(100%, 13rem) !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; align-items: end !important; gap: 0.65rem !important; width: min(100%, 38rem) !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range.hidden { display: none !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range > input[type="date"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range > button[type="submit"] { width: auto !important; max-width: max-content !important; min-width: 6.75rem !important; justify-content: center !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-header-actions > :where(a, button):not(#dashKpiPanel):not(#dashWidgetsPanel) { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; min-width: 0 !important; min-height: 2.5rem !important; white-space: nowrap !important; justify-content: center !important; } } /* Dashboard small-desktop/tablet header: force a clean stacked control-room layout until there is enough width for the true desktop header. */ @media screen and (min-width: 641px) and (max-width: 1535px) { html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-page-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.9rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-page-title { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-page-title h1, html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-page-title p { max-width: 34rem !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-header-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.65rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-form { flex: 0 0 100% !important; display: grid !important; grid-template-columns: minmax(14rem, 22rem) minmax(0, 34rem) !important; align-items: center !important; gap: 0.7rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-right: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 2.75rem !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control > .inline-flex { min-width: 0 !important; flex: 1 1 auto !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control .ui-range-select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; align-items: center !important; gap: 0.7rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range.hidden { display: none !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range > input[type="date"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range > button[type="submit"] { width: auto !important; max-width: max-content !important; min-width: 6.75rem !important; min-height: 2.55rem !important; justify-content: center !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-header-actions > :where(a, button):not(#dashKpiPanel):not(#dashWidgetsPanel) { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; min-width: 0 !important; min-height: 2.55rem !important; padding-inline: 0.9rem !important; white-space: nowrap !important; justify-content: center !important; } } @media screen and (min-width: 641px) and (max-width: 899px) { html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-form { grid-template-columns: minmax(0, 1fr) !important; max-width: 34rem !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; } } /* ========================================================= Staff / Create bottom action buttons ========================================================= Match Members / Create behavior: - Phone/mobile: 0px-640px, actions stack full width with centered text. - Tablet/small tablet/desktop: 641px+, actions stay compact and right-aligned. This intentionally overrides the earlier sm:flex-row utility at exactly 640px. */ html body :where(#appContent, .portal-content) .staff-create-form-footer { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) .staff-create-actions { display: flex !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } html body :where(#appContent, .portal-content) .staff-create-actions > .staff-create-action, html body :where(#appContent, .portal-content) .staff-create-actions > button.staff-create-action.ui-action-control, html body :where(#appContent, .portal-content) .staff-create-actions > a.staff-create-action.ui-action-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-width: 0 !important; text-align: center !important; line-height: 1.15 !important; overflow: visible !important; } @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .staff-create-form-footer { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .staff-create-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; } html body :where(#appContent, .portal-content) .staff-create-actions > .staff-create-action, html body :where(#appContent, .portal-content) .staff-create-actions > button.staff-create-action.ui-action-control, html body :where(#appContent, .portal-content) .staff-create-actions > a.staff-create-action.ui-action-control { width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; white-space: normal !important; min-height: 2.5rem !important; padding-inline: 0.75rem !important; } } @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .staff-create-form-footer { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .staff-create-actions { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; inline-size: auto !important; margin-left: auto !important; } html body :where(#appContent, .portal-content) .staff-create-actions > .staff-create-action, html body :where(#appContent, .portal-content) .staff-create-actions > button.staff-create-action.ui-action-control, html body :where(#appContent, .portal-content) .staff-create-actions > a.staff-create-action.ui-action-control { width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; white-space: nowrap !important; } } /* Staff / Edit: match create-page mobile action behavior. 640px and below: Back, Save changes, Reset password, and Clear login limits are full-width with centered labels. Tablet/desktop stays compact where applicable. */ :where(#appContent, .portal-content) .staff-edit-header { align-items: flex-start !important; } :where(#appContent, .portal-content) .staff-edit-title { min-width: 0 !important; } :where(#appContent, .portal-content) .staff-edit-back-wrap { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } :where(#appContent, .portal-content) .staff-edit-back, :where(#appContent, .portal-content) .staff-edit-save, :where(#appContent, .portal-content) .staff-edit-reset-password, :where(#appContent, .portal-content) .staff-edit-clear-login { justify-content: center !important; text-align: center !important; min-width: 0 !important; box-sizing: border-box !important; } @media (max-width: 640px) { html body #appContent .staff-edit-header, html body .portal-content .staff-edit-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } html body #appContent .staff-edit-back-wrap, html body .portal-content .staff-edit-back-wrap { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; align-self: stretch !important; } html body #appContent .staff-edit-back-wrap > a.staff-edit-back, html body .portal-content .staff-edit-back-wrap > a.staff-edit-back, html body #appContent a.staff-edit-back.ui-action-control, html body .portal-content a.staff-edit-back.ui-action-control, html body #appContent button.staff-edit-save, html body .portal-content button.staff-edit-save, html body #appContent button.staff-edit-reset-password, html body .portal-content button.staff-edit-reset-password, html body #appContent button.staff-edit-clear-login, html body .portal-content button.staff-edit-clear-login { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; box-sizing: border-box !important; } html body #appContent .staff-edit-form-footer, html body .portal-content .staff-edit-form-footer { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; } html body #appContent .staff-edit-active, html body .portal-content .staff-edit-active { align-self: flex-start !important; } } @media (min-width: 641px) { html body #appContent .staff-edit-header, html body .portal-content .staff-edit-header { flex-direction: row !important; align-items: flex-start !important; } html body #appContent .staff-edit-back-wrap, html body .portal-content .staff-edit-back-wrap { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; align-self: auto !important; } html body #appContent .staff-edit-back-wrap > a.staff-edit-back, html body .portal-content .staff-edit-back-wrap > a.staff-edit-back, html body #appContent a.staff-edit-back.ui-action-control, html body .portal-content a.staff-edit-back.ui-action-control, html body #appContent button.staff-edit-save, html body .portal-content button.staff-edit-save { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } } /* Staff / Edit: fix phone-size Save changes button height. It should be full-width and centered on 640px and below, but it must not flex-grow vertically inside the form footer. */ @media screen and (max-width: 640px) { html body :where(#appContent, .portal-content) .staff-edit-form-footer > button.staff-edit-save.ui-action-control, html body #appContent .staff-edit-form-footer > button.staff-edit-save, html body .portal-content .staff-edit-form-footer > button.staff-edit-save { display: inline-flex !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.15 !important; min-height: 2.25rem !important; height: auto !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; white-space: normal !important; box-sizing: border-box !important; } html body :where(#appContent, .portal-content) button.staff-edit-reset-password.ui-action-control, html body :where(#appContent, .portal-content) button.staff-edit-clear-login.ui-action-control { flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; align-items: center !important; justify-content: center !important; line-height: 1.15 !important; min-height: 2.25rem !important; height: auto !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; white-space: normal !important; } } /* ========================================================= Footer MWM logo exact-lockup correction + mobile pagination polish ========================================================= */ .app-footer { max-height: 5.25rem !important; overflow: hidden !important; } .app-footer .app-footer-inner { max-height: 5.25rem !important; padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; } .app-footer .footer-brand { width: auto !important; max-width: 82vw !important; height: 4.35rem !important; max-height: 4.35rem !important; padding: 0.25rem 0.45rem !important; } .app-footer .footer-brand-img { display: block !important; width: auto !important; height: 3.75rem !important; max-height: 3.75rem !important; max-width: 82vw !important; object-fit: contain !important; } @media (max-width: 640px) { .app-footer { max-height: 5.05rem !important; } .app-footer .app-footer-inner { max-height: 5.05rem !important; padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; } .app-footer .footer-brand { max-width: 84vw !important; height: 4.1rem !important; max-height: 4.1rem !important; padding: 0.22rem 0.4rem !important; } .app-footer .footer-brand-img { height: 3.55rem !important; max-height: 3.55rem !important; max-width: 84vw !important; } } .ui-server-pagination-pages, .ui-server-pagination-size { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.375rem; min-width: 0; } .ui-server-pagination-size { margin-left: 0.25rem; } @media (max-width: 640px) { .ui-server-pagination { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; justify-items: stretch !important; gap: 0.625rem !important; padding: 0.75rem 0.625rem !important; text-align: center !important; } .ui-server-pagination-summary { width: 100% !important; line-height: 1.35 !important; text-align: center !important; } .ui-server-pagination-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; gap: 0.55rem !important; justify-items: center !important; } .ui-server-pagination-pages, .ui-server-pagination-size { width: 100% !important; max-width: 100% !important; justify-content: center !important; gap: 0.3rem !important; margin-left: 0 !important; } .ui-server-pagination-size { padding-top: 0.55rem !important; border-top: 1px solid rgba(226, 232, 240, 0.95) !important; } .dark .ui-server-pagination-size { border-top-color: rgba(51, 65, 85, 0.85) !important; } .ui-server-page-btn { min-width: 2rem !important; min-height: 2rem !important; padding: 0.375rem 0.52rem !important; border-radius: 0.65rem !important; font-size: 0.7rem !important; line-height: 1 !important; } .ui-server-page-prev, .ui-server-page-next { min-width: 3.25rem !important; } .ui-server-page-ellipsis, .ui-server-per { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 2rem !important; padding: 0 0.15rem !important; } } /* ========================================================= Mobile back/action header consistency for form/detail pages ========================================================= Scope is opt-in via .ui-mobile-back-header so report pages keep their existing two-column mobile action layout. */ @media screen and (max-width: 640px) { :where(#appContent, .portal-content) .ui-mobile-back-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .ui-mobile-back-header > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .ui-mobile-back-header > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) .ui-mobile-back-header > :last-child > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) .ui-mobile-back-header > :last-child > form > :where(button, input[type="submit"], input[type="button"], .ui-action-control), :where(#appContent, .portal-content) .ui-mobile-back-header .ui-mobile-back-control { display: inline-flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: normal !important; line-height: 1.15 !important; min-height: 2.35rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; box-sizing: border-box !important; } :where(#appContent, .portal-content) .ui-mobile-back-header > :last-child { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) .ui-mobile-back-header > :last-child > form { display: block !important; width: 100% !important; margin: 0 !important; } } /* Assessments / Member dashboard layout fix: Keep the Metric Trend selector and Go button aligned on tablet/desktop, and prevent the dashboard cards from being forced into one column by the global 12-column responsive guardrails on wider screens. */ html body :where(#appContent, .portal-content) .assessments-member-dashboard-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 1rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .assessments-member-dashboard-grid > *, html body :where(#appContent, .portal-content) .assessments-member-metric-card, html body :where(#appContent, .portal-content) .assessments-member-side-cards { min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-metric-card, html body :where(#appContent, .portal-content) .assessments-member-side-cards { grid-column: 1 / -1 !important; } html body :where(#appContent, .portal-content) .assessments-member-metric-card { align-self: start !important; } html body :where(#appContent, .portal-content) .assessments-member-side-cards { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-content: start !important; gap: 1rem !important; } html body :where(#appContent, .portal-content) .assessments-member-metric-header { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 0.75rem !important; } html body :where(#appContent, .portal-content) .assessments-member-metric-filter { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: center !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) .assessments-member-metric-filter > .form-field, html body :where(#appContent, .portal-content) .assessments-member-metric-filter > select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .assessments-member-filter-action, html body :where(#appContent, .portal-content) button.assessments-member-filter-action.ui-action-control { width: 100% !important; min-width: 0 !important; justify-content: center !important; } @media (min-width: 641px) { html body :where(#appContent, .portal-content) .assessments-member-metric-header { grid-template-columns: minmax(8rem, 1fr) minmax(16rem, 34rem) !important; align-items: start !important; justify-content: space-between !important; } html body :where(#appContent, .portal-content) .assessments-member-metric-filter { justify-self: end !important; grid-template-columns: minmax(12rem, 1fr) max-content !important; width: min(100%, 34rem) !important; } html body :where(#appContent, .portal-content) .assessments-member-filter-action, html body :where(#appContent, .portal-content) button.assessments-member-filter-action.ui-action-control { width: auto !important; min-width: 5.25rem !important; flex: 0 0 auto !important; white-space: nowrap !important; } } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { html body :where(#appContent, .portal-content) .assessments-member-dashboard-grid { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) .assessments-member-dashboard-grid > .assessments-member-metric-card { grid-column: span 7 / span 7 !important; } html body :where(#appContent, .portal-content) .assessments-member-dashboard-grid > .assessments-member-side-cards { grid-column: span 5 / span 5 !important; } } /* Billing / Expenses: fixed responsive filter layout. This page opts out of the automatic filter toolbar and uses a predictable page-specific grid so controls do not jump around at 641px+ or <=640px. */ html body :where(#appContent, .portal-content) form.billing-expenses-filter-form[data-ui-filterbar-off="1"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 0.9rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-fields { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-field { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form :where(input, select, textarea) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-footer { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-summary { width: 100% !important; max-width: 100% !important; min-width: 0 !important; line-height: 1.35 !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0.55rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { display: inline-flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 2.55rem !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-export-btn { grid-column: 1 / -1 !important; } @media (min-width: 641px) { html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-footer { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-actions { grid-template-columns: minmax(6.75rem, 7.5rem) minmax(6.75rem, 7.5rem) minmax(9rem, 10rem) !important; width: auto !important; justify-content: end !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-export-btn { grid-column: auto !important; } } @media (min-width: 641px) { html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-fields { grid-template-columns: minmax(16rem, 2fr) minmax(12rem, 1fr) minmax(10rem, 1fr) minmax(10rem, 1fr) !important; } } @media (max-width: 640px) { html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body :where(#appContent, .portal-content) form.billing-expenses-filter-form .billing-expenses-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { white-space: normal !important; line-height: 1.15 !important; } } /* ========================================================= Member portal responsive polish: topbar, buttons, profile tools ========================================================= */ .portal-topbar .portal-brand { flex: 1 1 auto; max-width: min(34rem, calc(100vw - 11.5rem)); overflow: hidden; } .portal-topbar .portal-brand-logo { flex: 0 0 auto; } .portal-topbar .portal-brand-copy { display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0; line-height: 1.05; } .portal-topbar .portal-brand-name { display: inline-block; min-width: 0; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-topbar .portal-brand-sub { flex: 0 0 auto; color: #94a3b8; font-weight: 500; white-space: nowrap; } .dark .portal-topbar .portal-brand-sub { color: #94a3b8; } .portal-shell .ui-action-control, .portal-content .ui-action-control { justify-content: center !important; text-align: center !important; } .portal-dashboard-page .dashboard-statement-action > .ui-action-control { justify-content: center !important; } .portal-profile-page > .portal-page-header > a.ui-action-control { width: auto !important; flex: 0 0 auto !important; justify-content: center !important; } .portal-profile-page .mt-3.grid > a { min-height: 3rem; align-items: center !important; } .portal-profile-page .mt-3.grid > form { width: 100%; min-width: 0; } .portal-profile-page .mt-3.grid > form > button { width: 100% !important; justify-content: center !important; min-height: 3rem; } @media (max-width: 640px) { .portal-topbar .portal-brand { max-width: calc(100vw - 9.25rem); align-items: center; } .portal-topbar .portal-brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; } .portal-topbar .portal-brand-name { max-width: 100%; font-size: 0.86rem; line-height: 1.05rem; } .portal-topbar .portal-brand-separator { display: none; } .portal-topbar .portal-brand-sub { display: block; font-size: 0.68rem; line-height: 0.8rem; letter-spacing: 0.02em; } .portal-topbar .portal-brand-logo { width: 2rem !important; height: 2rem !important; } .portal-dashboard-page .dashboard-statement-action > .ui-action-control { width: 100% !important; } .portal-profile-page > .portal-page-header > a.ui-action-control { width: 100% !important; } .portal-profile-page .mt-3.grid > a, .portal-profile-page .mt-3.grid > form > button { min-height: 2.75rem !important; padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; } } @media (min-width: 641px) { .portal-profile-page > .portal-page-header { align-items: flex-start !important; } .portal-profile-page > .portal-page-header > a.ui-action-control { max-width: max-content !important; } } /* ========================================================= Member portal fixes: profile header/tools + QR PWA flow ========================================================= */ .portal-profile-page > .portal-page-header { min-height: 0 !important; height: auto !important; align-content: flex-start !important; } .portal-profile-page > .portal-page-header > :first-child { min-width: 0 !important; } .portal-profile-page > .portal-page-header > .portal-profile-back-action { min-width: 0 !important; justify-content: center !important; text-align: center !important; } .portal-profile-tools { align-items: stretch !important; } .portal-profile-tool { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 0.75rem !important; min-height: 3rem !important; width: 100% !important; line-height: 1.15 !important; } .portal-profile-tool-main, .portal-profile-tool-arrow, .portal-profile-tool .action-icon { display: inline-flex !important; align-items: center !important; } .portal-profile-tool-arrow { justify-content: center !important; width: 1.15rem !important; height: 1.15rem !important; flex: 0 0 1.15rem !important; } .portal-profile-tool :where(svg, .ui-icon) { display: block !important; width: 1rem !important; height: 1rem !important; } .portal-profile-tool-label { line-height: 1.15 !important; } .portal-profile-logout { min-height: 3rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } @media (min-width: 641px) { .portal-profile-page > .portal-page-header { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 1rem !important; padding: 1rem !important; } .portal-profile-page > .portal-page-header > :first-child { flex: 1 1 auto !important; width: auto !important; max-width: calc(100% - 9rem) !important; } .portal-profile-page > .portal-page-header > .portal-profile-back-action { flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; align-self: flex-start !important; } } @media (max-width: 640px) { .portal-profile-page > .portal-page-header, .portal-profile-page > .portal-page-header > :first-child, .portal-profile-page > .portal-page-header > .portal-profile-back-action { flex: 0 0 auto !important; } .portal-profile-page > .portal-page-header > .portal-profile-back-action { width: 100% !important; } .portal-profile-tool { min-height: 2.55rem !important; padding: 0.55rem 0.7rem !important; border-radius: 1rem !important; } .portal-profile-logout { min-height: 2.6rem !important; padding-block: 0.55rem !important; border-radius: 1rem !important; } } /* ========================================================= Member portal print/statement action polish ========================================================= Keep portal header buttons readable and centered at narrow tablet/mobile widths, and avoid the long "Print / Save PDF" action being clipped. */ .portal-page-header .portal-header-actions { min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; align-items: center !important; } .portal-page-header .portal-header-actions > :where(a, button, .ui-action-control) { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-width: max-content !important; max-width: 100% !important; white-space: normal !important; line-height: 1.15 !important; } .portal-statement-header .portal-statement-actions > :where(a, button, .ui-action-control), .portal-invoice-view-header .portal-invoice-view-actions > :where(a, button, .ui-action-control) { padding-left: 0.85rem !important; padding-right: 0.85rem !important; } .invoice-print-toolbar .invoice-print-toolbar-inner { gap: 0.75rem !important; min-width: 0 !important; } .invoice-print-toolbar .invoice-print-toolbar-actions { min-width: 0 !important; flex-wrap: wrap !important; } .invoice-print-toolbar .invoice-print-action { min-width: 5rem !important; justify-content: center !important; text-align: center !important; } .invoice-print-toolbar .invoice-print-action > span { display: inline-block !important; width: 100% !important; text-align: center !important; } @media (max-width: 767.98px) { .portal-statement-header, .portal-invoice-view-header { flex-direction: column !important; align-items: stretch !important; } .portal-statement-header > :first-child, .portal-invoice-view-header > :first-child, .portal-statement-header > .portal-header-actions, .portal-invoice-view-header > .portal-header-actions { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; } .portal-statement-header > .portal-header-actions, .portal-invoice-view-header > .portal-header-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; } .portal-statement-header > .portal-header-actions > :where(a, button, .ui-action-control), .portal-invoice-view-header > .portal-header-actions > :where(a, button, .ui-action-control) { width: 100% !important; min-width: 0 !important; white-space: normal !important; } .invoice-print-toolbar .invoice-print-toolbar-inner { align-items: stretch !important; } .invoice-print-toolbar .invoice-print-toolbar-actions { flex: 1 1 auto !important; } } @media (max-width: 420px) { .portal-statement-header > .portal-header-actions, .portal-invoice-view-header > .portal-header-actions { grid-template-columns: 1fr !important; } .invoice-print-toolbar .invoice-print-toolbar-inner { flex-direction: column !important; } .invoice-print-toolbar .invoice-print-toolbar-actions, .invoice-print-toolbar .invoice-print-action { width: 100% !important; } } /* ========================================================= Member portal header/action layout follow-up ========================================================= Statement and invoice headers were still being caught by broad tablet guardrails, which could stretch the header card and push actions to the bottom. These page-specific overrides keep the cards compact and make mobile actions full-width where the member portal expects it. */ .portal-shell .portal-statement-header, .portal-shell .portal-invoices-header { min-height: 0 !important; height: auto !important; max-height: none !important; align-content: flex-start !important; justify-content: space-between !important; overflow: visible !important; } .portal-shell .portal-statement-header > *, .portal-shell .portal-invoices-header > * { min-height: 0 !important; height: auto !important; flex-grow: 0 !important; } .portal-shell .portal-statement-header > :first-child, .portal-shell .portal-invoices-header > :first-child { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } .portal-shell .portal-statement-header > .portal-header-actions, .portal-shell .portal-invoices-header > :last-child { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; align-self: flex-start !important; justify-content: flex-end !important; } .portal-shell .portal-statement-header > .portal-header-actions > :where(a, button, .ui-action-control), .portal-shell .portal-invoices-header > :last-child > :where(a, button, .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; } @media (min-width: 768px) { .portal-shell .portal-statement-header, .portal-shell .portal-invoices-header { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 1rem !important; } .portal-shell .portal-statement-header > .portal-header-actions, .portal-shell .portal-invoices-header > :last-child { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; } } @media (min-width: 641px) and (max-width: 767.98px) { .portal-shell .portal-statement-header, .portal-shell .portal-invoices-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.75rem !important; } .portal-shell .portal-statement-header > :first-child, .portal-shell .portal-invoices-header > :first-child, .portal-shell .portal-statement-header > .portal-header-actions, .portal-shell .portal-invoices-header > :last-child { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .portal-shell .portal-statement-header > .portal-header-actions, .portal-shell .portal-invoices-header > :last-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; } .portal-shell .portal-statement-header > .portal-header-actions > :where(a, button, .ui-action-control), .portal-shell .portal-invoices-header > :last-child > :where(a, button, .ui-action-control) { width: 100% !important; min-width: 0 !important; } } @media (max-width: 640px) { .portal-shell .portal-statement-header, .portal-shell .portal-invoices-header { justify-content: flex-start !important; } .portal-shell .portal-statement-header > .portal-header-actions, .portal-shell .portal-invoices-header > :last-child, .portal-shell .portal-statement-update-row, .portal-shell .portal-statement-balance-actions, .portal-shell .portal-invoices-balance-actions, .portal-shell .portal-invoice-card-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .portal-shell .portal-statement-update-row > *, .portal-shell .portal-statement-balance-actions > :where(a, button, .ui-action-control), .portal-shell .portal-invoices-balance-actions > :where(a, button, .ui-action-control), .portal-shell .portal-invoice-card-actions > :where(a, button, .ui-action-control), .portal-shell .portal-statement-header > .portal-header-actions > :where(a, button, .ui-action-control), .portal-shell .portal-invoices-header > :last-child > :where(a, button, .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; text-align: center !important; } .portal-shell .portal-statement-update-row > .text-\[12px\] { text-align: center !important; } } /* ========================================================= Member portal statement filter update button patch ========================================================= In the 641px-767px band the generic filter grid can place the Update row into only one auto-fit column, making the button look half-width. On member portal statement this action should span the full filter row on phone/small tablet widths. */ @media (max-width: 767.98px) { .portal-shell form[action*="/portal/statement"] .portal-statement-update-row, .portal-shell .portal-statement-update-row { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .portal-shell .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } } /* ========================================================= Member portal statement update action layout refinement ========================================================= Keep the statement Update action underneath the From/To fields and full width until a proper desktop width is available. This avoids the awkward half-width/right-column placement between 768px and 1023px. */ @media (max-width: 640px) { .portal-shell form[action*="/portal/statement"] .portal-statement-update-row, .portal-shell .portal-statement-update-row { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0.55rem !important; align-items: stretch !important; } .portal-shell form[action*="/portal/statement"] .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } .portal-shell form[action*="/portal/statement"] .portal-statement-update-row > .text-\[12px\], .portal-shell .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 100% !important; text-align: center !important; } } @media (min-width: 641px) { .portal-shell form[action*="/portal/statement"] .portal-statement-update-row, .portal-shell .portal-statement-update-row { grid-column: auto / span 3 !important; } } /* ========================================================= Member portal statement final responsive layout correction ========================================================= Keep the statement date filter balanced: mobile/small tablet uses a full-width Update row, while desktop returns to a compact action column. Also prevent the desktop portal topbar from covering content during viewport checks responsive widths or when users scroll midway down a page. */ .portal-shell .portal-statement-filter-form { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .portal-shell .portal-statement-filter-form > .portal-statement-date-field, .portal-shell .portal-statement-filter-form > .portal-statement-update-row { min-width: 0 !important; max-width: 100% !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0.55rem !important; align-items: stretch !important; width: 100% !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; text-align: center !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 100% !important; text-align: center !important; } @media (max-width: 640px) { .portal-shell .portal-statement-filter-form { grid-template-columns: 1fr !important; } } @media (min-width: 641px) and (max-width: 1024px) { .portal-shell .portal-statement-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .portal-shell .portal-statement-filter-form > .portal-statement-date-field { grid-column: auto !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { grid-column: 1 / -1 !important; } } @media (min-width: 641px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) minmax(14rem, 0.85fr) !important; align-items: end !important; } .portal-shell .portal-statement-filter-form > .portal-statement-date-field, .portal-shell .portal-statement-filter-form > .portal-statement-update-row { grid-column: auto !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { align-self: end !important; justify-self: stretch !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { width: 100% !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { text-align: left !important; } } @media (min-width: 641px) { .portal-shell .portal-topbar.sticky { position: relative !important; top: auto !important; } } /* ========================================================= Member portal statement action column final override ========================================================= The statement filter needs a compact action column on desktop, but full-width action rows on mobile/tablet. Keep these rules at the end of the stylesheet so they override earlier generic filter-form hardening and old Tailwind grid helper classes. */ .portal-shell .portal-statement-filter-form { display: grid !important; gap: 0.75rem !important; align-items: end !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .portal-shell .portal-statement-filter-form > .ui-filterbar, .portal-shell .portal-statement-filter-form > [data-ui-filterbar], .portal-shell .portal-statement-filter-form > .ui-filter-toolbar, .portal-shell .portal-statement-filter-form > .ui-filter-presets { grid-column: 1 / -1 !important; min-width: 0 !important; max-width: 100% !important; } .portal-shell .portal-statement-filter-form > .portal-statement-date-field, .portal-shell .portal-statement-filter-form > .portal-statement-update-row { min-width: 0 !important; max-width: 100% !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-end !important; gap: 0.55rem !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { justify-content: center !important; text-align: center !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { line-height: 1.35 !important; } @media (max-width: 640px) { .portal-shell .portal-statement-filter-form { grid-template-columns: 1fr !important; } .portal-shell .portal-statement-filter-form > .portal-statement-date-field, .portal-shell .portal-statement-filter-form > .portal-statement-update-row { grid-column: 1 / -1 !important; width: 100% !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 100% !important; text-align: center !important; } } @media (min-width: 641px) and (max-width: 1024px) { .portal-shell .portal-statement-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .portal-shell .portal-statement-filter-form > .portal-statement-date-field { grid-column: auto !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { grid-column: 1 / -1 !important; width: 100% !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 100% !important; text-align: center !important; } } @media (min-width: 641px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1fr) minmax(13.5rem, 17rem) !important; } .portal-shell .portal-statement-filter-form > .portal-statement-date-field { grid-column: auto !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { grid-column: auto !important; width: 100% !important; max-width: 17rem !important; justify-self: end !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { width: 100% !important; max-width: 17rem !important; min-width: 0 !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 17rem !important; text-align: left !important; } } /* ========================================================= Member portal statement filter final alignment fix ========================================================= Explicit grid areas prevent the generated preset/filter toolbar and the Update action from fighting earlier generic filter-grid rules. Desktop keeps the action compact and aligned with the date inputs; tablet/mobile keep it full-width underneath the dates. */ .portal-shell .portal-statement-filter-form > .portal-statement-from-field { grid-area: portalStatementFrom !important; } .portal-shell .portal-statement-filter-form > .portal-statement-to-field { grid-area: portalStatementTo !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { grid-area: portalStatementAction !important; } .portal-shell .portal-statement-filter-form > .ui-filterbar, .portal-shell .portal-statement-filter-form > [data-ui-filterbar], .portal-shell .portal-statement-filter-form > .ui-filter-toolbar, .portal-shell .portal-statement-filter-form > .ui-filter-presets { grid-area: portalStatementFilters !important; } @media (max-width: 640px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "portalStatementFilters" "portalStatementFrom" "portalStatementTo" "portalStatementAction" !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: 100% !important; max-width: 100% !important; padding-top: 0 !important; justify-self: stretch !important; align-self: stretch !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 100% !important; text-align: center !important; } } @media (min-width: 641px) and (max-width: 1024px) { .portal-shell .portal-statement-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "portalStatementFilters portalStatementFilters" "portalStatementFrom portalStatementTo" "portalStatementAction portalStatementAction" !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: 100% !important; max-width: 100% !important; padding-top: 0 !important; justify-self: stretch !important; align-self: stretch !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 100% !important; text-align: center !important; } } @media (min-width: 641px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1fr) minmax(13.5rem, 17rem) !important; grid-template-areas: "portalStatementFilters portalStatementFilters portalStatementFilters" "portalStatementFrom portalStatementTo portalStatementAction" !important; align-items: start !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: 100% !important; max-width: 17rem !important; min-width: 0 !important; justify-self: end !important; align-self: start !important; justify-content: flex-start !important; padding-top: 1.45rem !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { width: 100% !important; max-width: 17rem !important; min-width: 0 !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 17rem !important; text-align: left !important; } } /* ========================================================= Member portal statement update button final width rule ========================================================= Full-width actions are mobile-only. From 641px upward the Statement Update action stays compact like other portal buttons, while the date inputs keep a clean responsive grid. */ @media (max-width: 640px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "portalStatementFilters" "portalStatementFrom" "portalStatementTo" "portalStatementAction" !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: 100% !important; max-width: 100% !important; justify-self: stretch !important; align-self: stretch !important; padding-top: 0 !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 100% !important; text-align: center !important; } } @media (min-width: 641px) and (max-width: 767.98px) { .portal-shell .portal-statement-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "portalStatementFilters portalStatementFilters" "portalStatementFrom portalStatementTo" ". portalStatementAction" !important; align-items: end !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: min(100%, 17rem) !important; max-width: 17rem !important; justify-self: end !important; align-self: end !important; padding-top: 0 !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 17rem !important; text-align: left !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { justify-content: center !important; text-align: center !important; } } @media (min-width: 768px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) minmax(12rem, 17rem) !important; grid-template-areas: "portalStatementFilters portalStatementFilters portalStatementFilters" "portalStatementFrom portalStatementTo portalStatementAction" !important; align-items: end !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: min(100%, 17rem) !important; max-width: 17rem !important; justify-self: end !important; align-self: end !important; justify-content: flex-end !important; padding-top: 1.45rem !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 17rem !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { justify-content: center !important; text-align: center !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { text-align: left !important; } } /* ========================================================= Member portal statement form hard reset (final) ========================================================= The statement date form intentionally does NOT use the generic auto filterbar. That filterbar was injecting extra controls into the same grid and could force the Update button to stretch/overlap at widths above 640px. These rules keep the Update button full-width only on true mobile and compact everywhere else. */ .portal-shell .portal-statement-filter-form { display: grid !important; gap: 0.85rem !important; align-items: end !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } .portal-shell .portal-statement-filter-form > * { min-width: 0 !important; max-width: 100% !important; position: relative !important; z-index: auto !important; } .portal-shell .portal-statement-filter-form > .portal-statement-from-field { grid-area: portalStatementFromFinal !important; } .portal-shell .portal-statement-filter-form > .portal-statement-to-field { grid-area: portalStatementToFinal !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { grid-area: portalStatementActionFinal !important; display: flex !important; flex-direction: column !important; gap: 0.5rem !important; min-width: 0 !important; position: static !important; transform: none !important; } .portal-shell .portal-statement-filter-form > .portal-statement-date-field input { width: 100% !important; max-width: 100% !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control) { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-width: 0 !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { line-height: 1.35 !important; } @media (max-width: 640px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "portalStatementFromFinal" "portalStatementToFinal" "portalStatementActionFinal" !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: 100% !important; max-width: 100% !important; justify-self: stretch !important; align-self: stretch !important; padding-top: 0 !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 100% !important; text-align: center !important; } } @media (min-width: 641px) and (max-width: 767.98px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "portalStatementFromFinal portalStatementToFinal" ". portalStatementActionFinal" !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: min(100%, 15rem) !important; max-width: 15rem !important; justify-self: end !important; align-self: start !important; padding-top: 0 !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 15rem !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { text-align: left !important; } } @media (min-width: 768px) { .portal-shell .portal-statement-filter-form { grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) minmax(11rem, 16rem) !important; grid-template-areas: "portalStatementFromFinal portalStatementToFinal portalStatementActionFinal" !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row { width: min(100%, 16rem) !important; max-width: 16rem !important; justify-self: end !important; align-self: start !important; padding-top: 1.45rem !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > :where(button, input[type="submit"], .ui-action-control), .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { width: 100% !important; max-width: 16rem !important; } .portal-shell .portal-statement-filter-form > .portal-statement-update-row > .text-\[12px\] { text-align: left !important; } } /* ========================================================= Member portal statement date form - clean final layout ========================================================= This form intentionally uses unique classes so it is not affected by the generic filter-toolbar/grid rules. Update is full width only at 640px and below; from 641px upward it stays as a compact action button aligned with the date fields. The old helper text under the button was removed from the view to keep the card height tight. */ html body .portal-shell form.member-portal-statement-form, html body .portal-content form.member-portal-statement-form { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(8.5rem, 22vw, 14rem) !important; gap: 0.75rem !important; align-items: end !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } html body .portal-shell form.member-portal-statement-form > *, html body .portal-content form.member-portal-statement-form > * { min-width: 0 !important; max-width: 100% !important; position: static !important; transform: none !important; } html body .portal-shell form.member-portal-statement-form .member-portal-statement-field input, html body .portal-content form.member-portal-statement-form .member-portal-statement-field input { width: 100% !important; max-width: 100% !important; } html body .portal-shell form.member-portal-statement-form .member-portal-statement-action, html body .portal-content form.member-portal-statement-form .member-portal-statement-action { display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; width: 100% !important; max-width: 14rem !important; justify-self: end !important; } html body .portal-shell form.member-portal-statement-form .member-portal-statement-update, html body .portal-content form.member-portal-statement-form .member-portal-statement-update { width: 100% !important; max-width: 14rem !important; min-width: 0 !important; min-height: 2.75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; margin: 0 !important; } @media (max-width: 640px) { html body .portal-shell form.member-portal-statement-form, html body .portal-content form.member-portal-statement-form { grid-template-columns: minmax(0, 1fr) !important; } html body .portal-shell form.member-portal-statement-form .member-portal-statement-action, html body .portal-content form.member-portal-statement-form .member-portal-statement-action, html body .portal-shell form.member-portal-statement-form .member-portal-statement-update, html body .portal-content form.member-portal-statement-form .member-portal-statement-update { width: 100% !important; max-width: 100% !important; justify-self: stretch !important; } } /* ========================================================= Final compact powered-by footer ========================================================= */ html body .app-footer { flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; margin-top: auto !important; padding: 0 !important; } html body .app-footer .app-footer-inner { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 0.5rem 1rem !important; } html body .app-footer .footer-brand-line { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.55rem !important; min-width: 0 !important; max-width: 100% !important; color: rgb(100 116 139) !important; font-size: 0.75rem !important; line-height: 1.2 !important; white-space: nowrap !important; } html body .app-footer .footer-copy { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; color: rgb(100 116 139) !important; } html body .app-footer .footer-powered-by { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; outline-offset: 0.2rem !important; overflow: visible !important; color: rgb(100 116 139) !important; text-decoration: none !important; line-height: 1.2 !important; } html body .app-footer .footer-powered-by:hover { color: rgb(51 65 85) !important; text-decoration: none !important; } html body .app-footer .footer-powered-text { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; color: currentColor !important; } html body .app-footer .footer-brand-img { display: block !important; flex: 0 0 auto !important; width: auto !important; height: 1.45rem !important; max-height: 1.45rem !important; max-width: 5.75rem !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } html.dark body .app-footer .footer-brand-line, html.dark body .app-footer .footer-copy, html.dark body .app-footer .footer-powered-by { color: rgb(148 163 184) !important; } html.dark body .app-footer .footer-powered-by:hover { color: rgb(203 213 225) !important; } html.dark body .app-footer .footer-brand-img { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)) !important; } @media (max-width: 640px) { html body .app-footer .app-footer-inner { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; } html body .app-footer .footer-brand-line { gap: 0.45rem !important; font-size: 0.7rem !important; } html body .app-footer .footer-brand-img { height: 1.25rem !important; max-height: 1.25rem !important; max-width: 5rem !important; } html body .portal-shell .app-footer { margin-bottom: calc(82px + env(safe-area-inset-bottom)) !important; } } @media (max-width: 360px) { html body .app-footer .footer-copy { display: none !important; } } /* ========================================================= Final footer brand lockup: logo mark + readable company name ========================================================= */ html body .app-footer .footer-brand-line { flex-wrap: wrap !important; row-gap: 0.2rem !important; column-gap: 0.45rem !important; } html body .app-footer .footer-separator { display: inline-flex !important; align-items: center !important; color: rgb(148 163 184) !important; line-height: 1 !important; } html body .app-footer .footer-powered-by { gap: 0.45rem !important; } html body .app-footer .footer-brand-lockup { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.45rem !important; min-width: 0 !important; max-width: 100% !important; line-height: 1.05 !important; } html body .app-footer .footer-brand-mark { display: block !important; flex: 0 0 auto !important; width: auto !important; height: 1.55rem !important; max-height: 1.55rem !important; max-width: 4.4rem !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } html body .app-footer .footer-brand-name { display: inline-flex !important; align-items: center !important; flex: 0 1 auto !important; min-width: 0 !important; color: rgb(51 65 85) !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.01em !important; line-height: 1.1 !important; white-space: nowrap !important; } html.dark body .app-footer .footer-separator { color: rgb(71 85 105) !important; } html.dark body .app-footer .footer-brand-name { color: rgb(203 213 225) !important; } html.dark body .app-footer .footer-brand-mark { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)) !important; } @media (max-width: 640px) { html body .app-footer .app-footer-inner { padding-top: 0.42rem !important; padding-bottom: 0.42rem !important; } html body .app-footer .footer-brand-line { column-gap: 0.38rem !important; row-gap: 0.16rem !important; font-size: 0.68rem !important; } html body .app-footer .footer-powered-by, html body .app-footer .footer-brand-lockup { gap: 0.34rem !important; } html body .app-footer .footer-brand-mark { height: 1.28rem !important; max-height: 1.28rem !important; max-width: 3.6rem !important; } html body .app-footer .footer-brand-name { font-size: 0.7rem !important; } } @media (max-width: 420px) { html body .app-footer .footer-brand-line { flex-direction: column !important; gap: 0.22rem !important; } html body .app-footer .footer-separator { display: none !important; } } @media (max-width: 340px) { html body .app-footer .footer-brand-name { font-size: 0.66rem !important; } html body .app-footer .footer-brand-mark { height: 1.15rem !important; max-height: 1.15rem !important; max-width: 3.2rem !important; } } /* ========================================================= Final footer wordmark lockup: designed MWM Tech Solutions text ========================================================= */ html body .app-footer .footer-brand-line { gap: 0.5rem !important; } html body .app-footer .footer-powered-by { gap: 0.5rem !important; } html body .app-footer .footer-brand-lockup { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: 100% !important; } html body .app-footer .footer-brand-wordmark { display: block !important; width: auto !important; height: 1.35rem !important; max-height: 1.35rem !important; max-width: min(15.5rem, 42vw) !important; min-width: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.14)) !important; } html.dark body .app-footer .footer-brand-wordmark { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) !important; } @media (max-width: 640px) { html body .app-footer .footer-brand-line { gap: 0.36rem !important; } html body .app-footer .footer-powered-by { gap: 0.36rem !important; } html body .app-footer .footer-brand-wordmark { height: 1.05rem !important; max-height: 1.05rem !important; max-width: min(12rem, 62vw) !important; } } @media (max-width: 420px) { html body .app-footer .footer-brand-line { flex-direction: column !important; gap: 0.18rem !important; } html body .app-footer .footer-powered-by { flex-wrap: nowrap !important; } html body .app-footer .footer-separator { display: none !important; } html body .app-footer .footer-brand-wordmark { height: 1rem !important; max-height: 1rem !important; max-width: 78vw !important; } } @media (max-width: 340px) { html body .app-footer .footer-copy { display: none !important; } html body .app-footer .footer-brand-wordmark { height: 0.92rem !important; max-height: 0.92rem !important; max-width: 76vw !important; } } /* ========================================================= Final footer brand lockup: logo mark + designed wordmark ========================================================= */ html body .app-footer .footer-powered-by { gap: 0.5rem !important; } html body .app-footer .footer-brand-lockup { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.38rem !important; min-width: 0 !important; max-width: 100% !important; line-height: 1 !important; white-space: nowrap !important; } html body .app-footer .footer-brand-mark { display: block !important; flex: 0 0 auto !important; width: auto !important; height: 1.35rem !important; max-height: 1.35rem !important; max-width: 3.5rem !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12)) !important; } html body .app-footer .footer-brand-wordmark { display: block !important; flex: 0 1 auto !important; width: auto !important; height: 1.18rem !important; max-height: 1.18rem !important; max-width: min(13.5rem, 38vw) !important; min-width: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.14)) !important; } html.dark body .app-footer .footer-brand-mark, html.dark body .app-footer .footer-brand-wordmark { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) !important; } @media (max-width: 640px) { html body .app-footer .footer-powered-by { gap: 0.34rem !important; } html body .app-footer .footer-brand-lockup { gap: 0.28rem !important; } html body .app-footer .footer-brand-mark { height: 1.08rem !important; max-height: 1.08rem !important; max-width: 2.85rem !important; } html body .app-footer .footer-brand-wordmark { height: 0.92rem !important; max-height: 0.92rem !important; max-width: min(10.75rem, 56vw) !important; } } @media (max-width: 420px) { html body .app-footer .footer-brand-line { flex-direction: column !important; gap: 0.18rem !important; } html body .app-footer .footer-powered-by { flex-wrap: nowrap !important; } html body .app-footer .footer-brand-lockup { max-width: 100% !important; } html body .app-footer .footer-separator { display: none !important; } } @media (max-width: 340px) { html body .app-footer .footer-powered-text { display: none !important; } html body .app-footer .footer-brand-wordmark { max-width: 11.5rem !important; } } /* ========================================================= Footer copyright client name ========================================================= */ html body .app-footer .footer-brand-line { white-space: normal !important; } html body .app-footer .footer-copy { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: min(46vw, 32rem) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } @media (max-width: 640px) { html body .app-footer .footer-copy { max-width: 92vw !important; text-align: center !important; } } @media (max-width: 420px) { html body .app-footer .footer-copy { display: inline-flex !important; max-width: 92vw !important; } } @media (max-width: 340px) { html body .app-footer .footer-copy { display: inline-flex !important; max-width: 92vw !important; font-size: 0.66rem !important; } } /* ========================================================= Invoice print toolbar final alignment hardening ========================================================= The invoice print page opens separately, so keep this rule explicit and narrow. On <=640px the toolbar stacks cleanly and the Print label stays centered even if older global button rules are present in production. */ .invoice-print-toolbar .invoice-print-action, .invoice-print-toolbar .invoice-print-action:where(button, a) { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .invoice-print-toolbar .invoice-print-action > span, .invoice-print-toolbar .invoice-print-action-label { display: block !important; width: 100% !important; text-align: center !important; line-height: 1 !important; } @media (max-width: 640px) { .invoice-print-toolbar .invoice-print-toolbar-inner { flex-direction: column !important; align-items: stretch !important; } .invoice-print-toolbar .invoice-print-toolbar-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; width: 100% !important; } .invoice-print-toolbar .invoice-print-toolbar-actions > a, .invoice-print-toolbar .invoice-print-action { width: 100% !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } } @media (max-width: 360px) { .invoice-print-toolbar .invoice-print-toolbar-actions { grid-template-columns: 1fr !important; } } /* ========================================================= Staff dashboard mobile refresh button alignment Keep the Refresh label visually centered when the button becomes full width. ========================================================= */ @media (max-width: 640px) { html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-urgent-card > .flex.items-start.justify-between.gap-3 { flex-direction: column !important; align-items: stretch !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] #dashRefreshBtn { position: relative !important; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; padding-left: 2.75rem !important; padding-right: 2.75rem !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] #dashRefreshBtn > span[aria-hidden="true"] { position: absolute !important; left: 1rem !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; flex: 0 0 auto !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] #dashRefreshBtn > span:not([aria-hidden]) { display: block !important; width: 100% !important; text-align: center !important; } } /* ========================================================= Locker reports responsive cleanup ========================================================= */ :where(#appContent, .portal-content) .locker-report-grid, :where(#appContent, .portal-content) .locker-report-card, :where(#appContent, .portal-content) .locker-report-note, :where(#appContent, .portal-content) .locker-report-summary-grid { min-width: 0; max-width: 100%; } :where(#appContent, .portal-content) .locker-report-card { overflow: hidden; } :where(#appContent, .portal-content) .locker-report-card-title { display: flex; align-items: center; gap: 0.45rem; min-width: 0; max-width: 100%; line-height: 1.25; } :where(#appContent, .portal-content) .locker-report-card-title svg, :where(#appContent, .portal-content) .locker-report-card-title .ui-action-icon { flex: 0 0 auto; } :where(#appContent, .portal-content) .locker-report-card-title span, :where(#appContent, .portal-content) .locker-report-card-desc, :where(#appContent, .portal-content) .locker-report-note { min-width: 0; max-width: 100%; overflow-wrap: break-word; word-break: normal; hyphens: auto; } :where(#appContent, .portal-content) .locker-report-filter { display: grid !important; grid-template-columns: 1fr; align-items: end; gap: 0.75rem; width: 100%; max-width: 100%; min-width: 0; } :where(#appContent, .portal-content) .locker-report-field { display: block; width: 100%; min-width: 0; max-width: 100%; } :where(#appContent, .portal-content) .locker-report-label { display: block; margin-bottom: 0.25rem; font-size: 12px; font-weight: 700; color: rgb(51 65 85); } :where(#appContent, .portal-content) .locker-report-field input, :where(#appContent, .portal-content) .locker-report-field select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) .locker-report-actions { display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.55rem; width: 100%; max-width: 100%; min-width: 0; } :where(#appContent, .portal-content) .locker-report-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media (min-width: 641px) { :where(#appContent, .portal-content) .locker-report-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; } :where(#appContent, .portal-content) .locker-report-actions { flex-direction: row !important; flex-wrap: nowrap !important; align-items: end !important; justify-content: flex-end !important; width: auto !important; min-width: max-content !important; max-width: 100% !important; } :where(#appContent, .portal-content) .locker-report-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.5rem !important; max-width: 100% !important; } :where(#appContent, .portal-content) .locker-report-actions > a { min-width: 9.25rem !important; } } @media (min-width: 641px) and (max-width: 767.98px) { :where(#appContent, .portal-content) .locker-report-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } :where(#appContent, .portal-content) .locker-report-actions { grid-column: 1 / -1; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .locker-report-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 1 auto !important; width: auto !important; } } @media (min-width: 768px) and (max-width: 980px) { :where(#appContent, .portal-content) .locker-report-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } :where(#appContent, .portal-content) .locker-report-actions { grid-column: 1 / -1; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; } } /* Locker report detail filters: match the management report filter pattern. Export stays in the page header; the filter card only runs the date range. */ html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"], html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] { display: grid !important; grid-template-columns: minmax(8.5rem, 14rem) minmax(8.5rem, 14rem) max-content !important; align-items: end !important; justify-content: start !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"] > *, html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] > * { min-width: 0 !important; max-width: 100% !important; } html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"] :where(input, select, textarea, .ui-control), html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] :where(input, select, textarea, .ui-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"] > .reports-management-filter-actions, html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] > .reports-management-filter-actions { grid-column: auto !important; justify-self: start !important; width: auto !important; inline-size: auto !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: 100% !important; max-inline-size: 100% !important; justify-content: flex-start !important; align-items: end !important; flex-wrap: nowrap !important; } html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"] > .reports-management-filter-actions > button.reports-management-run-button, html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"] button.reports-management-run-button, html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] > .reports-management-filter-actions > button.reports-management-run-button, html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] button.reports-management-run-button { flex: 0 0 auto !important; width: auto !important; inline-size: auto !important; min-width: 5.5rem !important; min-inline-size: 5.5rem !important; max-width: max-content !important; max-inline-size: max-content !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; } @media screen and (max-width: 640px) { html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"], html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] { grid-template-columns: minmax(0, 1fr) !important; } html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"] > .reports-management-filter-actions, html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] > .reports-management-filter-actions { grid-column: 1 / -1 !important; justify-self: stretch !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; justify-content: stretch !important; } html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"] > .reports-management-filter-actions > button.reports-management-run-button, html body main#appContent form.reports-management-filter-form[data-locker-report-filter="1"] button.reports-management-run-button, html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] > .reports-management-filter-actions > button.reports-management-run-button, html body .portal-content form.reports-management-filter-form[data-locker-report-filter="1"] button.reports-management-run-button { flex: 1 1 100% !important; width: 100% !important; inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; max-width: 100% !important; max-inline-size: 100% !important; } } /* ========================================================= Targeted stacked mobile form actions ========================================================= Use this marker only on long or 3+ button form footers that should stack fully on phones. Do not apply it to intentional two-button mobile rows. */ @media (max-width: 640px) { :where(#appContent, .portal-content) [data-mobile-full-actions="1"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; max-width: 100% !important; gap: 0.5rem !important; } :where(#appContent, .portal-content) [data-mobile-full-actions="1"] > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control, form) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) [data-mobile-full-actions="1"] > form > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; max-width: 100% !important; justify-content: center !important; text-align: center !important; } :where(#appContent, .portal-content) :where(.ui-table-wrap, .ui-responsive-table-wrap, .ui-dt-pager, .pagination) [data-mobile-full-actions="1"] { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: auto !important; max-width: none !important; } } /* ========================================================= Leads create action row - targeted mobile stacking ========================================================= This row has three actions with one longer label. Keep the tested desktop alignment, but force a stable full-width stack on <=640px so it is not picked up by the generic two-column mobile action-grid rules. */ @media (max-width: 640px) { #appContent .leads-create-actions[data-mobile-full-actions="1"], .portal-content .leads-create-actions[data-mobile-full-actions="1"] { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 0.5rem !important; overflow: visible !important; } #appContent .leads-create-actions[data-mobile-full-actions="1"] > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content .leads-create-actions[data-mobile-full-actions="1"] > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; white-space: normal !important; overflow: visible !important; line-height: 1.2 !important; } } @media (min-width: 641px) { #appContent .leads-create-actions[data-mobile-full-actions="1"], .portal-content .leads-create-actions[data-mobile-full-actions="1"] { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; max-width: 100% !important; gap: 0.5rem !important; } } /* ========================================================= Final confirmed filter breakpoint cleanup --------------------------------------------------------- Keep the app-wide action contract on confirmed problem screens only: - 0px-640px: mobile buttons may stack/fill for tap comfort. - 641px+: filter actions stay compact/aligned. This avoids changing unrelated, already-tested pages. ========================================================= */ @media (min-width: 641px) { /* Billing credits */ :where(#appContent, .portal-content) form[data-credits-filter="1"] { grid-template-columns: minmax(18rem, 1fr) max-content !important; align-items: end !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] .credits-filter-actions { width: auto !important; min-width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] .credits-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 7rem !important; max-width: max-content !important; white-space: nowrap !important; } /* Billing receipts */ :where(#appContent, .portal-content) form[data-receipts-filter="1"] { grid-template-columns: minmax(18rem, 1fr) max-content !important; align-items: end !important; } :where(#appContent, .portal-content) form[data-receipts-filter="1"] .receipts-filter-actions { width: auto !important; min-width: max-content !important; max-width: 100% !important; flex-wrap: nowrap !important; justify-content: flex-start !important; } :where(#appContent, .portal-content) form[data-receipts-filter="1"] .receipts-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.75rem !important; max-width: max-content !important; white-space: nowrap !important; } /* Staff list */ :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(16rem, 1fr) auto !important; align-items: end !important; } :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] > .staff-filter-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: auto !important; min-width: max-content !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] > .staff-filter-actions > .staff-filter-action { flex: 0 0 auto !important; width: auto !important; min-width: 6.5rem !important; max-width: max-content !important; white-space: nowrap !important; } /* Corporate clients */ #appContent form.corporate-clients-filter-form[data-ui-filters="1"], .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) max-content !important; gap: 0.75rem !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-search, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-search { grid-column: auto !important; width: 100% !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions { grid-column: auto !important; display: inline-flex !important; flex-wrap: nowrap !important; width: auto !important; min-width: max-content !important; justify-self: end !important; justify-content: flex-end !important; } #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.25rem !important; max-width: max-content !important; white-space: nowrap !important; } /* POS sales */ :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] { grid-template-columns: minmax(0, 1fr) max-content !important; gap: 0.75rem !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-search, :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions { grid-column: auto !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions { display: inline-flex !important; flex-wrap: nowrap !important; width: auto !important; min-width: max-content !important; justify-self: end !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { flex: 0 0 auto !important; width: auto !important; min-width: 6.25rem !important; max-width: max-content !important; white-space: nowrap !important; } /* Attendance logs */ #appContent form.attendance-logs-filter-form[data-ui-filters="1"], .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-search, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-search { grid-column: span 2 !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions, .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: max-content max-content minmax(0, 1fr) !important; justify-content: end !important; width: 100% !important; } #appContent form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.attendance-logs-filter-form[data-ui-filters="1"] > .attendance-logs-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: auto !important; min-width: 7.5rem !important; max-width: max-content !important; white-space: nowrap !important; } /* Attendance cards */ #appContent form.attendance-cards-search-form[data-ui-filters="1"], .portal-content form.attendance-cards-search-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) auto !important; } #appContent form.attendance-cards-search-form[data-ui-filters="1"] > .attendance-cards-search-button, .portal-content form.attendance-cards-search-form[data-ui-filters="1"] > .attendance-cards-search-button { width: auto !important; min-width: 9rem !important; max-width: max-content !important; justify-self: end !important; } /* Resources reports */ :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(10rem, 13.75rem) minmax(10rem, 13.75rem) auto !important; justify-content: start !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-field { max-width: 13.75rem !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-actions { display: flex !important; flex-wrap: nowrap !important; width: auto !important; max-width: max-content !important; } :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-actions > .resources-reports-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; flex: 0 0 auto !important; white-space: nowrap !important; } /* Classes schedule */ :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(10rem, 13.75rem) minmax(10rem, 13.75rem) auto !important; justify-content: start !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-field { max-width: 13.75rem !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-actions { display: flex !important; flex-wrap: nowrap !important; width: auto !important; max-width: max-content !important; } :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-actions > .classes-schedule-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; flex: 0 0 auto !important; white-space: nowrap !important; } /* Classes types */ :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] { grid-template-columns: minmax(14rem, 26rem) auto !important; justify-content: start !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-field { max-width: 26rem !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-actions { display: flex !important; flex-wrap: nowrap !important; width: auto !important; max-width: max-content !important; } :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-actions > .classes-types-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; flex: 0 0 auto !important; white-space: nowrap !important; } /* Communication templates */ :where(#appContent, .portal-content) form.communication-templates-filter-form[data-ui-filters="1"] > .communication-templates-filter-actions { width: auto !important; min-width: 0 !important; } :where(#appContent, .portal-content) form.communication-templates-filter-form[data-ui-filters="1"] .communication-templates-filter-action { width: auto !important; min-width: 5.75rem !important; max-width: max-content !important; white-space: nowrap !important; } /* Loyalty rewards */ html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; inline-size: auto !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-save-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-rewards-add-button.ui-action-control { width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; white-space: nowrap !important; } } @media (max-width: 640px) { /* Keep confirmed mobile filter actions full-width only at the phone breakpoint. */ :where(#appContent, .portal-content) form[data-credits-filter="1"], :where(#appContent, .portal-content) form[data-receipts-filter="1"], :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"], #appContent form.corporate-clients-filter-form[data-ui-filters="1"], .portal-content form.corporate-clients-filter-form[data-ui-filters="1"], :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"], #appContent form.attendance-cards-search-form[data-ui-filters="1"], .portal-content form.attendance-cards-search-form[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) form[data-credits-filter="1"] .credits-filter-actions, :where(#appContent, .portal-content) form[data-receipts-filter="1"] .receipts-filter-actions, :where(#appContent, .portal-content) form.staff-filter-form[data-ui-filters="1"] > .staff-filter-actions, #appContent form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions, .portal-content form.corporate-clients-filter-form[data-ui-filters="1"] > .corporate-clients-filter-actions, :where(#appContent, .portal-content) form.pos-sales-filter-form[data-pos-sales-filter="1"] > .pos-sales-filter-actions, :where(#appContent, .portal-content) form.resources-reports-filter-form[data-ui-filters="1"] > .resources-reports-filter-actions, :where(#appContent, .portal-content) form.classes-schedule-filter-form[data-ui-filters="1"] > .classes-schedule-filter-actions, :where(#appContent, .portal-content) form.classes-types-filter-form[data-ui-filters="1"] > .classes-types-filter-actions, :where(#appContent, .portal-content) form.communication-templates-filter-form[data-ui-filters="1"] > .communication-templates-filter-actions { width: 100% !important; min-width: 0 !important; } } /* ========================================================= Loyalty rewards Save button breakpoint correction --------------------------------------------------------- The older rules-card container query is intentionally stronger for phone widths, but it must not keep Save full-width above 640px. Contract: <=640px full-width, 641px+ compact. ========================================================= */ @media screen and (min-width: 641px) { html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; inline-size: auto !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) .loyalty-rewards-rules-actions .loyalty-rewards-save-button.ui-action-control, html body :where(#appContent, .portal-content) .loyalty-rewards-catalog-actions .loyalty-rewards-add-button.ui-action-control { display: inline-flex !important; width: fit-content !important; inline-size: fit-content !important; min-width: max-content !important; min-inline-size: max-content !important; max-width: max-content !important; max-inline-size: max-content !important; flex: 0 0 auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; white-space: nowrap !important; justify-content: center !important; text-align: center !important; } } /* ========================================================= Dashboard range control - 640px mobile contract --------------------------------------------------------- The dashboard range picker previously had an older 560px mobile cutoff, so between 561px and 640px the custom range controls could still behave like compact tablet controls. Keep this scoped to the dashboard header: - 0px-640px: range/custom dates/apply stack cleanly full width. - 641px+: keep the existing compact/tablet dashboard layout. ========================================================= */ @media (max-width: 640px) { html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-form { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-right: 0 !important; gap: 0.55rem !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 2.75rem !important; padding: 0.65rem 0.75rem !important; gap: 0.75rem !important; box-sizing: border-box !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control > span { flex: 0 0 auto !important; white-space: nowrap !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control > .inline-flex { display: flex !important; align-items: center !important; justify-content: space-between !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-range-control .ui-range-select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-right: 1.75rem !important; text-overflow: ellipsis !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 0.55rem !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range.hidden { display: none !important; } html body :where(#appContent, .portal-content) [data-dashboard="1"] .dash-custom-range > :where(input[type="date"], button[type="submit"]) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; box-sizing: border-box !important; } } /* Inventory location transfer create: show the stock that matters before moving items. The source/destination preview stays generic and follows the app's 640px mobile rule. */ .inventory-location-transfer-context { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.75rem !important; } .inventory-location-transfer-context-card { min-width: 0 !important; border: 1px solid rgba(226, 232, 240, 1) !important; border-radius: 1rem !important; background: rgba(248, 250, 252, 0.85) !important; padding: 0.75rem !important; } .inventory-location-transfer-context-label { font-size: 11px !important; font-weight: 600 !important; color: rgb(100, 116, 139) !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; } .inventory-location-transfer-context-value { margin-top: 0.15rem !important; min-width: 0 !important; overflow-wrap: anywhere !important; font-size: 13px !important; font-weight: 700 !important; color: rgb(15, 23, 42) !important; } .inventory-location-transfer-context-help { margin-top: 0.2rem !important; font-size: 11px !important; color: rgb(100, 116, 139) !important; line-height: 1.35 !important; } .inventory-location-transfer-table-wrap { max-width: 100% !important; } .inventory-location-transfer-table { min-width: 980px !important; } .inventory-location-transfer-table th, .inventory-location-transfer-table td { vertical-align: top !important; } .inventory-location-transfer-preview { display: grid !important; gap: 0.15rem !important; font-size: 11px !important; line-height: 1.35 !important; color: rgb(71, 85, 105) !important; } .inventory-location-transfer-warning, .inventory-location-transfer-page-warning { border: 1px solid rgba(252, 165, 165, 0.75) !important; border-radius: 0.75rem !important; background: rgba(254, 242, 242, 0.95) !important; color: rgb(185, 28, 28) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.35 !important; padding: 0.45rem 0.55rem !important; } .inventory-location-transfer-warning { margin-top: 0.35rem !important; } .inventory-location-transfer-qty-invalid { border-color: rgb(248, 113, 113) !important; box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3) !important; } @media screen and (max-width: 640px) { .inventory-location-transfer-context { grid-template-columns: minmax(0, 1fr) !important; } .inventory-location-transfer-table { min-width: 900px !important; } } /* Member/compliance polish: keep action buttons full-width at 640px and below, compact above 640px. */ :where(#appContent, .portal-content) .ui-mobile-full-action { width: auto; justify-content: center; } @media (max-width: 640px) { :where(#appContent, .portal-content) .ui-mobile-full-action { width: 100% !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) .ui-back-action { width: auto !important; flex: 0 0 auto !important; } } /* Compliance UI polish: data request modal, incident form, and incident filters. */ :where(#appContent, .portal-content) .compliance-incident-form-page { width: 100% !important; max-width: none !important; } :where(#appContent, .portal-content) .compliance-incident-form-grid, :where(#appContent, .portal-content) .compliance-incident-main, :where(#appContent, .portal-content) .compliance-incident-side { min-width: 0 !important; max-width: 100% !important; } @media (min-width: 641px) { :where(#appContent, .portal-content) .compliance-incident-form-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } :where(#appContent, .portal-content) .compliance-incident-form-header .ui-header-actions { width: auto !important; max-width: max-content !important; margin-left: auto !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .compliance-incident-form-header .ui-back-action { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content) .compliance-incident-main-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .compliance-incident-main-fields > .compliance-incident-title, :where(#appContent, .portal-content) .compliance-incident-main-fields > .compliance-incident-location { grid-column: 1 / -1 !important; } :where(#appContent, .portal-content) .compliance-incident-textareas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .compliance-incident-followup { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .compliance-incident-submit-row > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) .compliance-incident-main-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .compliance-incident-main-fields > .compliance-incident-title { grid-column: span 2 !important; } :where(#appContent, .portal-content) .compliance-incident-main-fields > .compliance-incident-location { grid-column: 1 / -1 !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .compliance-incident-form-page .ui-header-actions, :where(#appContent, .portal-content) .compliance-incident-form-page .ui-responsive-action-row { width: 100% !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .compliance-incident-form-page .ui-header-actions > :where(a, button, .ui-action-control), :where(#appContent, .portal-content) .compliance-incident-form-page .ui-responsive-action-row > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } } #appContent form.compliance-incidents-filter[data-ui-filters="1"], .portal-content form.compliance-incidents-filter[data-ui-filters="1"] { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > *, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > * { min-width: 0 !important; max-width: 100% !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-search, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-search { grid-column: span 4 !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-status, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-status, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-severity, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-severity, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-followup, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-followup { grid-column: span 4 !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-from, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-from, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-to, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-to { grid-column: span 3 !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions { grid-column: span 6 !important; display: flex !important; flex-wrap: nowrap !important; align-items: end !important; justify-content: flex-end !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { display: inline-flex !important; width: auto !important; min-width: 7.5rem !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; white-space: nowrap !important; } @media (max-width: 1024px) and (min-width: 641px) { #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-search, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-search { grid-column: span 6 !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-status, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-status, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-severity, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-severity, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-followup, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-followup, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-from, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-from, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-to, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-to { grid-column: span 6 !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions { grid-column: 1 / -1 !important; } } @media (max-width: 640px) { #appContent form.compliance-incidents-filter[data-ui-filters="1"], .portal-content form.compliance-incidents-filter[data-ui-filters="1"] { grid-template-columns: minmax(0, 1fr) !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-search, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-search, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-status, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-status, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-severity, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-severity, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-followup, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-followup, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-from, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-from, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-to, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-to, #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions { grid-column: 1 / -1 !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions, .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; } #appContent form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control), .portal-content form.compliance-incidents-filter[data-ui-filters="1"] > .ci-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* Compliance incident/data request final layout fixes. */ :where(#appContent, .portal-content) .compliance-incident-form-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 1rem !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } :where(#appContent, .portal-content) .compliance-incident-form-grid > .ui-guidebar { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .compliance-incident-main, :where(#appContent, .portal-content) .compliance-incident-side, :where(#appContent, .portal-content) .compliance-incident-member-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } @media (min-width: 641px) { :where(#appContent, .portal-content) .compliance-incident-form-grid { grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 0.95fr) !important; } :where(#appContent, .portal-content) .compliance-incident-main { grid-column: 1 !important; } :where(#appContent, .portal-content) .compliance-incident-side { grid-column: 2 !important; } } @media (min-width: 1280px) { :where(#appContent, .portal-content) .compliance-incident-form-grid { grid-template-columns: minmax(0, 1.75fr) minmax(22rem, 0.95fr) !important; gap: 1.25rem !important; } } @media (min-width: 1536px) { :where(#appContent, .portal-content) .compliance-incident-form-grid { grid-template-columns: minmax(0, 1.85fr) minmax(24rem, 0.95fr) !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .compliance-incident-form-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0.875rem !important; } :where(#appContent, .portal-content) .compliance-incident-form-grid > .ui-guidebar { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .compliance-incident-form-grid > .ui-guidebar .ui-guide-progress, :where(#appContent, .portal-content) .compliance-incident-form-grid > .ui-guidebar progress { width: 100% !important; } } body > .data-request-update-modal { position: fixed !important; inset: 0 !important; z-index: 9999 !important; overflow-y: auto !important; overscroll-behavior: contain !important; } body > .data-request-update-modal.hidden { display: none !important; } body > .data-request-update-modal:not(.hidden) { display: block !important; } body > .data-request-update-modal .data-request-update-modal-shell { min-height: 100dvh !important; align-items: center !important; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)) !important; } @media (max-width: 640px) { body > .data-request-update-modal .data-request-update-modal-shell { align-items: flex-start !important; padding-top: 1rem !important; } } /* Data request update modal: responsive sizing and confirmation stacking fix. */ #confirmModal { z-index: 10080 !important; } body > .data-request-update-modal .data-request-update-modal-shell { max-width: none !important; } body > .data-request-update-modal .data-request-update-modal-card { width: min(100%, 34rem) !important; max-height: min(86dvh, 42rem) !important; display: flex !important; flex-direction: column !important; } body > .data-request-update-modal .data-request-update-modal-form { overflow-y: auto !important; } @media (min-width: 641px) and (max-width: 900px) { body > .data-request-update-modal .data-request-update-modal-card { width: min(100%, 30rem) !important; } } @media (max-width: 640px) { body > .data-request-update-modal .data-request-update-modal-card { width: 100% !important; max-height: calc(100dvh - 2rem) !important; border-radius: 1rem !important; } body > .data-request-update-modal .data-request-update-modal-form { padding: 0.875rem !important; } } /* Compliance tablet layout correction: keep desktop grids from starting too early. Buttons still follow the app rule: <=640px mobile/full-width, >=641px compact. */ :where(#appContent, .portal-content) .compliance-data-requests-layout, :where(#appContent, .portal-content) .compliance-data-requests-create, :where(#appContent, .portal-content) .compliance-data-requests-results { min-width: 0 !important; max-width: 100% !important; } :where(#appContent, .portal-content) .compliance-data-requests-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 1rem !important; width: 100% !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: end !important; gap: 0.75rem !important; width: 100% !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > * { min-width: 0 !important; max-width: 100% !important; } @media (min-width: 641px) { :where(#appContent, .portal-content) .compliance-data-requests-filter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-search, :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-actions { grid-column: 1 / -1 !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-actions { justify-content: flex-end !important; flex-wrap: nowrap !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: auto !important; max-width: max-content !important; min-width: 7.5rem !important; flex: 0 0 auto !important; } } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { :where(#appContent, .portal-content) .compliance-data-requests-layout { grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.65fr) !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-search { grid-column: span 5 !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-status { grid-column: span 2 !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-type { grid-column: span 2 !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-age { grid-column: span 2 !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-actions { grid-column: 1 / -1 !important; } } @media (min-width: 1536px) { :where(#appContent, .portal-content) .compliance-data-requests-layout { grid-template-columns: minmax(20rem, 0.7fr) minmax(0, 1.9fr) !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .compliance-data-requests-filter > .dr-filter-actions > :where(a, button, input[type="submit"], input[type="button"], .ui-action-control) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } @media (min-width: 641px) and (max-width: 959.98px) { :where(#appContent, .portal-content) .compliance-incident-form-grid { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) .compliance-incident-main, :where(#appContent, .portal-content) .compliance-incident-side { grid-column: 1 / -1 !important; } :where(#appContent, .portal-content) .compliance-incident-main-fields, :where(#appContent, .portal-content) .compliance-incident-textareas, :where(#appContent, .portal-content) .compliance-incident-followup { grid-template-columns: minmax(0, 1fr) !important; } :where(#appContent, .portal-content) .compliance-incident-main-fields > .compliance-incident-title, :where(#appContent, .portal-content) .compliance-incident-main-fields > .compliance-incident-location { grid-column: 1 / -1 !important; } } @media (min-width: 960px) { :where(#appContent, .portal-content) .compliance-incident-form-grid { grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.9fr) !important; } :where(#appContent, .portal-content) .compliance-incident-main { grid-column: 1 !important; } :where(#appContent, .portal-content) .compliance-incident-side { grid-column: 2 !important; } :where(#appContent, .portal-content) .compliance-incident-main-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .compliance-incident-textareas, :where(#appContent, .portal-content) .compliance-incident-followup { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1280px) { :where(#appContent, .portal-content) .compliance-incident-form-grid { grid-template-columns: minmax(0, 1.75fr) minmax(22rem, 0.95fr) !important; } } /* Compliance incident back button: exact 640px rule. */ @media (max-width: 640px) { :where(#appContent, .portal-content) .compliance-incident-form-header { flex-direction: column !important; align-items: stretch !important; } :where(#appContent, .portal-content) .compliance-incident-form-header .ui-header-actions { display: flex !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .compliance-incident-form-header .compliance-incident-back-action { display: inline-flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; justify-content: center !important; } } @media (min-width: 641px) { :where(#appContent, .portal-content) .compliance-incident-form-header .ui-header-actions { display: flex !important; width: auto !important; max-width: max-content !important; margin-left: auto !important; justify-content: flex-end !important; } :where(#appContent, .portal-content) .compliance-incident-form-header .compliance-incident-back-action { width: auto !important; min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; justify-content: center !important; } } /* Final mobile incident create polish. Keep the 640px mobile contract exact while preventing the staff topbar and incident header actions from wrapping into awkward, half-width controls. */ @media (max-width: 640px) { html, body, #appShell, #appMain { max-width: 100vw !important; overflow-x: hidden !important; } #appContent.app-content { width: 100% !important; max-width: 100vw !important; min-width: 0 !important; padding-left: 0.625rem !important; padding-right: 0.625rem !important; } .app-topbar-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.375rem !important; padding-left: 0.625rem !important; padding-right: 0.625rem !important; } .app-topbar-title { flex: 1 1 auto !important; flex-basis: auto !important; min-width: 0 !important; max-width: none !important; } .app-topbar-title > div:first-child { gap: 0.25rem !important; } .app-topbar-title .text-base, .app-topbar-title .md\:text-lg { font-size: 0.875rem !important; line-height: 1.15rem !important; } .app-topbar .app-sidebar-open, .app-topbar .cmdk-launch-icon, .app-topbar [data-notify-toggle], .app-topbar [data-theme-toggle], .app-topbar [data-density-toggle] { width: 2.25rem !important; height: 2.25rem !important; min-width: 2.25rem !important; flex: 0 0 2.25rem !important; border-radius: 0.75rem !important; } .app-topbar-logout-form { flex: 0 0 auto !important; margin-left: 0 !important; } .app-topbar-logout { min-height: 2.25rem !important; padding: 0.45rem 0.65rem !important; border-radius: 0.75rem !important; font-size: 0.75rem !important; line-height: 1rem !important; white-space: nowrap !important; } #appContent .compliance-incident-form-page { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #appContent .compliance-incident-form-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; } #appContent .compliance-incident-form-header > .ui-header-actions { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; justify-content: stretch !important; } #appContent .compliance-incident-form-header > .ui-header-actions > a.compliance-incident-back-action { display: inline-flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; justify-content: center !important; } #appContent .compliance-incident-main, #appContent .compliance-incident-side, #appContent .compliance-incident-member-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } @media (max-width: 420px) { .app-topbar-title > div:first-child { display: none !important; } } @media (min-width: 641px) { #appContent .compliance-incident-form-header > .ui-header-actions > a.compliance-incident-back-action { width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; } } /* Dashboard compliance/risk summary polish */ :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; align-items: stretch; } @media (min-width: 641px) { :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile { min-height: 6.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; padding: 0.85rem; border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(255, 255, 255, 0.86); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-title { min-width: 0; color: #0f172a; font-size: 0.72rem; line-height: 1.15; font-weight: 700; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-value { color: #0f172a; font-size: 1.55rem; line-height: 1; font-weight: 800; letter-spacing: -0.035em; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-subtext { color: #475569; font-size: 0.72rem; line-height: 1.2; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-icon { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; border: 1px solid currentColor; background: rgba(255, 255, 255, 0.62); } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--amber { border-color: rgba(245, 158, 11, 0.38); background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 251, 235, 0.7)); } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--amber .dash-risk-icon { color: #b45309; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--amber .dash-risk-title { color: #92400e; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--rose { border-color: rgba(244, 63, 94, 0.36); background: linear-gradient(135deg, rgba(255, 241, 242, 0.98), rgba(255, 241, 242, 0.68)); } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--rose .dash-risk-icon { color: #be123c; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--rose .dash-risk-title { color: #9f1239; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--sky { border-color: rgba(14, 165, 233, 0.34); background: linear-gradient(135deg, rgba(240, 249, 255, 0.99), rgba(224, 242, 254, 0.68)); } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--sky .dash-risk-icon { color: #0369a1; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--sky .dash-risk-title { color: #075985; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--violet { border-color: rgba(139, 92, 246, 0.32); background: linear-gradient(135deg, rgba(245, 243, 255, 0.99), rgba(237, 233, 254, 0.66)); } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--violet .dash-risk-icon { color: #6d28d9; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--violet .dash-risk-title { color: #5b21b6; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--slate { border-color: rgba(148, 163, 184, 0.42); background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86)); } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--slate .dash-risk-icon { color: #475569; } :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--slate .dash-risk-title { color: #334155; } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile { background: rgba(15, 23, 42, 0.72); border-color: rgba(148, 163, 184, 0.22); box-shadow: none; } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-title, .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-value { color: #f8fafc; } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-subtext { color: #cbd5e1; } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-icon { background: rgba(15, 23, 42, 0.48); } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--amber .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--amber .dash-risk-title { color: #fcd34d; } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--rose .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--rose .dash-risk-title { color: #fda4af; } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--sky .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--sky .dash-risk-title { color: #7dd3fc; } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--violet .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--violet .dash-risk-title { color: #c4b5fd; } .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--slate .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-compliance] .dash-risk-tile--slate .dash-risk-title { color: #cbd5e1; } /* Training workflows: dashboard, filters, forms, and responsive actions */ :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; align-items: stretch; } @media (min-width: 641px) { :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile { min-height: 6.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; padding: 0.85rem; border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(255, 255, 255, 0.86); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-title { min-width: 0; color: #0f172a; font-size: 0.72rem; line-height: 1.15; font-weight: 700; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-value { color: #0f172a; font-size: 1.55rem; line-height: 1; font-weight: 800; letter-spacing: -0.035em; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-subtext { color: #475569; font-size: 0.72rem; line-height: 1.2; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-icon { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; border: 1px solid currentColor; background: rgba(255, 255, 255, 0.62); } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--sky { border-color: rgba(14, 165, 233, 0.34); background: linear-gradient(135deg, rgba(240, 249, 255, 0.99), rgba(224, 242, 254, 0.68)); } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--sky .dash-risk-icon { color: #0369a1; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--sky .dash-risk-title { color: #075985; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--emerald { border-color: rgba(16, 185, 129, 0.34); background: linear-gradient(135deg, rgba(236, 253, 245, 0.99), rgba(209, 250, 229, 0.68)); } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--emerald .dash-risk-icon { color: #047857; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--emerald .dash-risk-title { color: #065f46; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--amber { border-color: rgba(245, 158, 11, 0.38); background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 251, 235, 0.7)); } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--amber .dash-risk-icon { color: #b45309; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--amber .dash-risk-title { color: #92400e; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--slate { border-color: rgba(148, 163, 184, 0.42); background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86)); } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--slate .dash-risk-icon { color: #475569; } :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--slate .dash-risk-title { color: #334155; } .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile { background: rgba(15, 23, 42, 0.72); border-color: rgba(148, 163, 184, 0.22); box-shadow: none; } .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-title, .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-value { color: #f8fafc; } .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-subtext { color: #cbd5e1; } .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-icon { background: rgba(15, 23, 42, 0.48); } .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--sky .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--sky .dash-risk-title { color: #7dd3fc; } .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--emerald .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--emerald .dash-risk-title { color: #6ee7b7; } .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--amber .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--amber .dash-risk-title { color: #fcd34d; } .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--slate .dash-risk-icon, .dark :where(#appContent, .portal-content) [data-dashboard-training] .dash-risk-tile--slate .dash-risk-title { color: #cbd5e1; } :where(#appContent, .portal-content) .training-wide-grid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { :where(#appContent, .portal-content) .training-wide-grid { grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr); } } :where(#appContent, .portal-content) .training-filter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: end; } @media (min-width: 641px) { :where(#appContent, .portal-content) .training-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(#appContent, .portal-content) .training-filter-actions { grid-column: 1 / -1; justify-content: flex-end; } } @media (min-width: 1100px) { :where(#appContent, .portal-content) .training-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } :where(#appContent, .portal-content) .training-filter-actions { grid-column: auto; } } :where(#appContent, .portal-content) .training-filter-actions, :where(#appContent, .portal-content) .training-table-actions, :where(#appContent, .portal-content) .training-form-actions, :where(#appContent, .portal-content) .training-action-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } :where(#appContent, .portal-content) .training-filter-actions, :where(#appContent, .portal-content) .training-form-actions { justify-content: flex-end; } :where(#appContent, .portal-content) .training-inline-search { align-items: center; } :where(#appContent, .portal-content) .training-plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } @media (min-width: 960px) { :where(#appContent, .portal-content) .training-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(#appContent, .portal-content) .training-span-2 { grid-column: 1 / -1; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-action-row, :where(#appContent, .portal-content) .training-filter-actions, :where(#appContent, .portal-content) .training-form-actions, :where(#appContent, .portal-content) .training-inline-search { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; justify-content: stretch !important; } :where(#appContent, .portal-content) .training-action-row > *, :where(#appContent, .portal-content) .training-filter-actions > *, :where(#appContent, .portal-content) .training-form-actions > *, :where(#appContent, .portal-content) .training-inline-search > *, :where(#appContent, .portal-content) .training-mobile-full { width: 100% !important; max-width: 100% !important; justify-content: center !important; } :where(#appContent, .portal-content) .training-table-actions { justify-content: flex-end; } :where(#appContent, .portal-content) .training-table-actions details > div { position: fixed !important; left: 1rem !important; right: 1rem !important; top: 4.5rem !important; width: auto !important; max-height: calc(100vh - 6rem); overflow-y: auto; } } /* Training workflows polish: production layout, responsive forms and member picker. */ :where(#appContent, .portal-content) [data-module="training"], :where(#appContent, .portal-content) .training-page { width: 100%; max-width: 100%; min-width: 0; } :where(#appContent, .portal-content) [data-module="training"] :where(.ui-control, .form-field, input, select, textarea) { font-weight: 400 !important; } :where(#appContent, .portal-content) [data-module="training"] :where(input::placeholder, textarea::placeholder) { font-weight: 400 !important; } :where(#appContent, .portal-content) .training-page-head { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 641px) { :where(#appContent, .portal-content) .training-page-head { flex-direction: row; align-items: center; justify-content: space-between; } } :where(#appContent, .portal-content) .training-library-layout, :where(#appContent, .portal-content) .training-assignments-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; } @media (min-width: 1180px) { :where(#appContent, .portal-content) .training-library-layout { grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr); } :where(#appContent, .portal-content) .training-assignments-layout { grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr); } } :where(#appContent, .portal-content) .training-compact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } @media (min-width: 641px) { :where(#appContent, .portal-content) .training-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } :where(#appContent, .portal-content) .training-member-picker { position: relative; width: 100%; } :where(#appContent, .portal-content) .training-member-trigger { width: 100%; min-height: 2.35rem; border-radius: 0.86rem; border: 1px solid var(--ui-control-border); background: var(--ui-control-bg); color: var(--ui-control-text); padding: 0.5rem 0.75rem; text-align: left; font-size: 13px; font-weight: 400; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 1px 2px rgba(15,23,42,.035); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(#appContent, .portal-content) .training-member-trigger:disabled { opacity: 0.75; cursor: not-allowed; } :where(#appContent, .portal-content) .training-member-panel { position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 0.45rem); padding: 0.65rem; border: 1px solid rgba(203, 213, 225, 0.95); border-radius: 1rem; background: rgba(255,255,255,0.98); box-shadow: 0 18px 50px rgba(15,23,42,.18); } .dark :where(#appContent, .portal-content) .training-member-panel { border-color: rgba(51, 65, 85, 0.95); background: rgba(15,23,42,0.98); } :where(#appContent, .portal-content) .training-member-options { margin-top: 0.5rem; display: grid; gap: 0.35rem; max-height: min(18rem, 46vh); overflow-y: auto; padding-right: 0.15rem; } :where(#appContent, .portal-content) .training-member-option { display: flex; flex-direction: column; gap: 0.1rem; width: 100%; border: 1px solid transparent; border-radius: 0.8rem; padding: 0.55rem 0.65rem; text-align: left; background: transparent; color: inherit; } :where(#appContent, .portal-content) .training-member-option:hover, :where(#appContent, .portal-content) .training-member-option.is-selected { border-color: color-mix(in srgb, var(--accent) 24%, transparent); background: color-mix(in srgb, var(--accent) 8%, white); } .dark :where(#appContent, .portal-content) .training-member-option:hover, .dark :where(#appContent, .portal-content) .training-member-option.is-selected { background: color-mix(in srgb, var(--accent) 14%, rgb(15 23 42)); } :where(#appContent, .portal-content) .training-member-option-name { font-size: 13px; font-weight: 600; color: #0f172a; } .dark :where(#appContent, .portal-content) .training-member-option-name { color: #f8fafc; } :where(#appContent, .portal-content) .training-member-option-meta, :where(#appContent, .portal-content) .training-member-empty { font-size: 11px; color: #64748b; } .dark :where(#appContent, .portal-content) .training-member-option-meta, .dark :where(#appContent, .portal-content) .training-member-empty { color: #94a3b8; } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-member-panel { position: fixed; left: 1rem; right: 1rem; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-table-scroll { overflow-x: visible; } :where(#appContent, .portal-content) .training-data-table, :where(#appContent, .portal-content) .training-data-table thead, :where(#appContent, .portal-content) .training-data-table tbody, :where(#appContent, .portal-content) .training-data-table th, :where(#appContent, .portal-content) .training-data-table td, :where(#appContent, .portal-content) .training-data-table tr { display: block; width: 100%; } :where(#appContent, .portal-content) .training-data-table thead { display: none; } :where(#appContent, .portal-content) .training-data-table tbody { display: grid; gap: 0.75rem; padding: 0.75rem; } :where(#appContent, .portal-content) .training-data-table tr { border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 1rem; background: rgba(255,255,255,0.82); overflow: hidden; } .dark :where(#appContent, .portal-content) .training-data-table tr { border-color: rgba(51, 65, 85, 0.95); background: rgba(15,23,42,0.55); } :where(#appContent, .portal-content) .training-data-table td { display: grid; grid-template-columns: minmax(6.5rem, 0.45fr) minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.65rem 0.75rem !important; text-align: left !important; border-bottom: 1px solid rgba(226, 232, 240, 0.72); } .dark :where(#appContent, .portal-content) .training-data-table td { border-bottom-color: rgba(51, 65, 85, 0.72); } :where(#appContent, .portal-content) .training-data-table td:last-child { border-bottom: 0; } :where(#appContent, .portal-content) .training-data-table td::before { content: attr(data-label); font-size: 11px; font-weight: 700; color: #64748b; } .dark :where(#appContent, .portal-content) .training-data-table td::before { color: #94a3b8; } :where(#appContent, .portal-content) .training-data-table td :where(input, select, textarea) { min-width: 0 !important; width: 100% !important; } } /* Training exercise library responsive result cards and form polish. */ :where(#appContent, .portal-content) .training-exercise-cards { display: none; } :where(#appContent, .portal-content) .training-exercise-card, :where(#appContent, .portal-content) .training-empty-card { border: 1px solid rgba(226, 232, 240, 0.92); border-radius: 1rem; background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05); } .dark :where(#appContent, .portal-content) .training-exercise-card, .dark :where(#appContent, .portal-content) .training-empty-card { border-color: rgba(51, 65, 85, 0.9); background: rgba(15, 23, 42, 0.62); box-shadow: none; } :where(#appContent, .portal-content) .training-exercise-card { display: grid; gap: 0.8rem; padding: 0.9rem; } :where(#appContent, .portal-content) .training-empty-card { padding: 1rem; text-align: center; color: #64748b; font-size: 0.875rem; } :where(#appContent, .portal-content) .training-exercise-card-head { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; min-width: 0; } :where(#appContent, .portal-content) .training-exercise-name { font-size: 0.95rem; font-weight: 700; color: #0f172a; line-height: 1.25; overflow-wrap: anywhere; } .dark :where(#appContent, .portal-content) .training-exercise-name { color: #f8fafc; } :where(#appContent, .portal-content) .training-exercise-instructions, :where(#appContent, .portal-content) .training-exercise-used { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.35; color: #64748b; overflow-wrap: anywhere; } .dark :where(#appContent, .portal-content) .training-exercise-instructions, .dark :where(#appContent, .portal-content) .training-exercise-used { color: #94a3b8; } :where(#appContent, .portal-content) .training-exercise-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } :where(#appContent, .portal-content) .training-exercise-meta-grid > div { min-width: 0; border: 1px solid rgba(226, 232, 240, 0.78); border-radius: 0.85rem; background: rgba(248, 250, 252, 0.82); padding: 0.62rem 0.7rem; } .dark :where(#appContent, .portal-content) .training-exercise-meta-grid > div { border-color: rgba(51, 65, 85, 0.78); background: rgba(15, 23, 42, 0.48); } :where(#appContent, .portal-content) .training-exercise-meta-grid span { display: block; font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.02em; } :where(#appContent, .portal-content) .training-exercise-meta-grid strong { display: block; margin-top: 0.16rem; font-size: 0.8rem; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; } .dark :where(#appContent, .portal-content) .training-exercise-meta-grid span { color: #94a3b8; } .dark :where(#appContent, .portal-content) .training-exercise-meta-grid strong { color: #f8fafc; } :where(#appContent, .portal-content) .training-exercise-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; border-top: 1px solid rgba(226, 232, 240, 0.72); padding-top: 0.75rem; } .dark :where(#appContent, .portal-content) .training-exercise-card-actions { border-top-color: rgba(51, 65, 85, 0.72); } :where(#appContent, .portal-content) .training-card-details { position: relative; } :where(#appContent, .portal-content) .training-card-details > summary { list-style: none; } :where(#appContent, .portal-content) .training-card-details > summary::-webkit-details-marker { display: none; } :where(#appContent, .portal-content) .training-card-editor { position: absolute; right: 0; z-index: 35; margin-top: 0.5rem; width: min(22rem, calc(100vw - 3rem)); border: 1px solid rgba(203, 213, 225, 0.95); border-radius: 1rem; background: rgba(255, 255, 255, 0.98); padding: 0.75rem; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18); } .dark :where(#appContent, .portal-content) .training-card-editor { border-color: rgba(51, 65, 85, 0.95); background: rgba(15, 23, 42, 0.98); } @media (max-width: 900px) { :where(#appContent, .portal-content) .training-exercise-results { overflow: visible !important; } :where(#appContent, .portal-content) .training-exercise-cards { display: grid; gap: 0.75rem; padding: 0.75rem; } :where(#appContent, .portal-content) .training-exercise-table-wrap { display: none !important; } } @media (min-width: 901px) { :where(#appContent, .portal-content) .training-exercise-table-wrap { display: block; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-library-form-card form label, :where(#appContent, .portal-content) .training-library-filter-card form label { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.35rem !important; width: 100% !important; } :where(#appContent, .portal-content) .training-library-form-card form :where(input, select, textarea), :where(#appContent, .portal-content) .training-library-filter-card form :where(input, select, textarea) { width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) .training-exercise-card-head, :where(#appContent, .portal-content) .training-exercise-meta-grid, :where(#appContent, .portal-content) .training-exercise-card-actions { grid-template-columns: minmax(0, 1fr); } :where(#appContent, .portal-content) .training-exercise-card-head { display: grid; } :where(#appContent, .portal-content) .training-exercise-card-head > .badge, :where(#appContent, .portal-content) .training-exercise-card-head > span { justify-self: start; } :where(#appContent, .portal-content) .training-exercise-card-actions { display: grid !important; width: 100%; } :where(#appContent, .portal-content) .training-exercise-card-actions > *, :where(#appContent, .portal-content) .training-exercise-card-actions button, :where(#appContent, .portal-content) .training-exercise-card-actions summary { width: 100% !important; justify-content: center !important; } :where(#appContent, .portal-content) .training-card-editor { position: static; width: 100%; margin-top: 0.55rem; } } /* Training exercise library add form: keep labels and required markers aligned cleanly. */ :where(#appContent, .portal-content) .training-exercise-add-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; width: 100%; max-width: 100%; } :where(#appContent, .portal-content) .training-exercise-add-form .training-field { display: flex; min-width: 0; flex-direction: column; gap: 0.35rem; } :where(#appContent, .portal-content) .training-exercise-add-form .ui-label { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 0.1rem; line-height: 1.2; } :where(#appContent, .portal-content) .training-exercise-add-form .ui-required { margin-left: 0.25rem; transform: translateY(-0.02rem); } :where(#appContent, .portal-content) .training-exercise-add-form :where(input, select, textarea) { width: 100%; max-width: 100%; min-width: 0; } :where(#appContent, .portal-content) .training-exercise-submit { display: flex; align-items: flex-end; } @media (min-width: 901px) { :where(#appContent, .portal-content) .training-exercise-add-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } :where(#appContent, .portal-content) .training-exercise-instructions-field { grid-column: span 2; } :where(#appContent, .portal-content) .training-exercise-submit { align-self: end; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-exercise-submit, :where(#appContent, .portal-content) .training-exercise-submit > * { width: 100% !important; } } /* Final exercise library hardening: required marker, responsive breakpoints and safe actions. */ :where(#appContent, .portal-content) .training-exercise-add-form .training-label-required { display: inline-flex; align-items: center; gap: 0.15rem; width: max-content; max-width: 100%; white-space: nowrap; line-height: 1.2; } :where(#appContent, .portal-content) .training-exercise-add-form .training-label-required .ui-required { margin-left: 0.15rem; transform: none; flex: 0 0 auto; } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-exercise-add-form label.ui-label { display: block !important; width: 100% !important; } :where(#appContent, .portal-content) .training-exercise-add-form label.ui-label .training-label-required { display: inline-flex !important; width: auto !important; } } :where(#appContent, .portal-content) .training-exercise-results { overflow: visible !important; } :where(#appContent, .portal-content) .training-exercise-desktop-table { min-width: 1080px; table-layout: fixed; } :where(#appContent, .portal-content) .training-exercise-col-main { width: 44%; } :where(#appContent, .portal-content) .training-exercise-col-muscle { width: 18%; } :where(#appContent, .portal-content) .training-exercise-col-equipment { width: 14%; } :where(#appContent, .portal-content) .training-exercise-col-status { width: 10%; } :where(#appContent, .portal-content) .training-exercise-col-actions { width: 14%; min-width: 12rem; } :where(#appContent, .portal-content) .training-exercise-desktop-table td, :where(#appContent, .portal-content) .training-exercise-desktop-table th { vertical-align: top; } :where(#appContent, .portal-content) .training-exercise-desktop-table td[data-label="Actions"] { min-width: 12rem; overflow: visible; } :where(#appContent, .portal-content) .training-exercise-desktop-table .training-table-actions { justify-content: flex-end; align-items: flex-start; gap: 0.45rem; } :where(#appContent, .portal-content) .training-exercise-desktop-table .training-table-actions details { position: static !important; } :where(#appContent, .portal-content) .training-exercise-desktop-table .training-table-actions details[open] { flex-basis: 100%; order: 5; } :where(#appContent, .portal-content) .training-exercise-desktop-table .training-table-actions details > div { position: static !important; width: 100% !important; min-width: 16rem; margin-top: 0.55rem; text-align: left; } @media (max-width: 1180px) { :where(#appContent, .portal-content) .training-exercise-results { overflow: visible !important; } :where(#appContent, .portal-content) .training-exercise-cards { display: grid !important; gap: 0.75rem; padding: 0.75rem; } :where(#appContent, .portal-content) .training-exercise-table-wrap { display: none !important; } } @media (min-width: 1181px) { :where(#appContent, .portal-content) .training-exercise-cards { display: none !important; } :where(#appContent, .portal-content) .training-exercise-table-wrap { display: block !important; overflow-x: auto; overflow-y: visible; } } /* Exercise edit modal: keep edit forms out of table rows so desktop/tablet actions never stretch or clip. */ body > .training-exercise-edit-modal:not(.hidden) { display: block !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-shell { min-height: 100dvh !important; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)) !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-card { width: min(100%, 34rem) !important; max-height: min(88dvh, 42rem) !important; display: flex !important; flex-direction: column !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-form { overflow-y: auto !important; } :where(#appContent, .portal-content) .training-exercise-edit-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } :where(#appContent, .portal-content) .training-exercise-edit-modal-actions { display: flex; justify-content: flex-end; gap: 0.65rem; border-top: 1px solid rgba(226, 232, 240, 0.85); padding-top: 0.85rem; } .dark :where(#appContent, .portal-content) .training-exercise-edit-modal-actions { border-top-color: rgba(51, 65, 85, 0.85); } :where(#appContent, .portal-content) .training-exercise-desktop-table tr { height: auto !important; } :where(#appContent, .portal-content) .training-exercise-desktop-table .training-table-actions { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; gap: 0.45rem !important; min-width: 0 !important; } :where(#appContent, .portal-content) .training-exercise-desktop-table td[data-label="Actions"] { width: 12rem !important; min-width: 12rem !important; white-space: normal !important; } @media (max-width: 640px) { body > .training-exercise-edit-modal .training-exercise-edit-modal-shell { align-items: flex-start !important; padding-top: 1rem !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-card { width: 100% !important; max-height: calc(100dvh - 2rem) !important; } :where(#appContent, .portal-content) .training-exercise-edit-modal-grid { grid-template-columns: minmax(0, 1fr); } :where(#appContent, .portal-content) .training-exercise-edit-modal-actions { display: grid; grid-template-columns: minmax(0, 1fr); } :where(#appContent, .portal-content) .training-exercise-edit-modal-actions > * { width: 100% !important; justify-content: center !important; } } body > .training-exercise-edit-modal .training-exercise-edit-modal-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-actions { display: flex !important; justify-content: flex-end !important; gap: 0.65rem !important; border-top: 1px solid rgba(226, 232, 240, 0.85) !important; padding-top: 0.85rem !important; } .dark body > .training-exercise-edit-modal .training-exercise-edit-modal-actions { border-top-color: rgba(51, 65, 85, 0.85) !important; } @media (max-width: 640px) { body > .training-exercise-edit-modal .training-exercise-edit-modal-grid { grid-template-columns: minmax(0, 1fr) !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-actions > * { width: 100% !important; justify-content: center !important; } } /* Training exercise final modal/form production polish. */ :where(#appContent, .portal-content) .training-exercise-add-form label.training-field-label { display: inline-flex !important; width: fit-content !important; max-width: 100% !important; align-items: center !important; gap: 0.25rem !important; line-height: 1.2 !important; white-space: nowrap !important; } :where(#appContent, .portal-content) .training-exercise-add-form label.training-field-label .ui-required { display: inline-flex !important; margin-left: 0 !important; transform: none !important; position: static !important; flex: 0 0 auto !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-exercise-add-form label.training-field-label { display: inline-flex !important; width: fit-content !important; grid-template-columns: none !important; } } body > .training-exercise-edit-modal .training-exercise-edit-modal-card { width: min(100%, 40rem) !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.95rem !important; padding: 1rem !important; overflow-y: auto !important; } body > .training-exercise-edit-modal .training-modal-field { display: flex !important; min-width: 0 !important; flex-direction: column !important; gap: 0.38rem !important; } body > .training-exercise-edit-modal .training-modal-label { display: inline-flex !important; width: fit-content !important; max-width: 100% !important; align-items: center !important; gap: 0.25rem !important; line-height: 1.2 !important; white-space: nowrap !important; } body > .training-exercise-edit-modal .training-modal-label .ui-required { display: inline-flex !important; margin-left: 0 !important; transform: none !important; position: static !important; flex: 0 0 auto !important; } body > .training-exercise-edit-modal :where(input, textarea, select) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; font-weight: 400 !important; } body > .training-exercise-edit-modal textarea { min-height: 7.25rem !important; resize: vertical !important; line-height: 1.45 !important; } body > .training-exercise-edit-modal :where(input, textarea, select):focus { outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent) !important; outline-offset: 1px !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent) !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.95rem !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-actions { display: flex !important; justify-content: flex-end !important; gap: 0.65rem !important; border-top: 1px solid rgba(226, 232, 240, 0.85) !important; padding-top: 0.95rem !important; } .dark body > .training-exercise-edit-modal .training-exercise-edit-modal-actions { border-top-color: rgba(51, 65, 85, 0.85) !important; } @media (max-width: 640px) { body > .training-exercise-edit-modal .training-exercise-edit-modal-card { width: 100% !important; max-height: calc(100dvh - 2rem) !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-form { padding: 0.9rem !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0.9rem !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; } body > .training-exercise-edit-modal .training-exercise-edit-modal-actions > * { width: 100% !important; justify-content: center !important; } } /* Training workout plan form final responsive polish. */ :where(#appContent, .portal-content) .training-workout-plan-form, :where(#appContent, .portal-content) .training-plan-form-card, :where(#appContent, .portal-content) .training-workout-items-card { min-width: 0; max-width: 100%; } :where(#appContent, .portal-content) .training-plan-form-card .ui-field { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } :where(#appContent, .portal-content) .training-plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.95rem; align-items: start; } :where(#appContent, .portal-content) .training-plan-field { display: flex; flex-direction: column; gap: 0.38rem; min-width: 0; width: 100%; } :where(#appContent, .portal-content) .training-plan-field :where(input, select, textarea, .training-member-picker, .training-member-trigger) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .training-plan-label { display: inline-flex !important; width: fit-content !important; align-items: center !important; gap: 0.25rem !important; line-height: 1.2 !important; white-space: nowrap !important; } :where(#appContent, .portal-content) .training-plan-label .ui-required { position: static !important; margin-left: 0 !important; transform: none !important; flex: 0 0 auto !important; } :where(#appContent, .portal-content) .training-plan-field--notes textarea { min-height: 7.25rem; resize: vertical; line-height: 1.45; } @media (min-width: 641px) { :where(#appContent, .portal-content) .training-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(#appContent, .portal-content) .training-plan-field--member, :where(#appContent, .portal-content) .training-plan-field--notes { grid-column: 1 / -1; } } @media (min-width: 1181px) { :where(#appContent, .portal-content) .training-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(#appContent, .portal-content) .training-plan-field--member, :where(#appContent, .portal-content) .training-plan-field--name, :where(#appContent, .portal-content) .training-plan-field--goal, :where(#appContent, .portal-content) .training-plan-field--notes { grid-column: span 2; } :where(#appContent, .portal-content) .training-plan-field--trainer, :where(#appContent, .portal-content) .training-plan-field--status, :where(#appContent, .portal-content) .training-plan-field--starts, :where(#appContent, .portal-content) .training-plan-field--ends { grid-column: span 1; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-plan-form-card { padding-left: 0.9rem !important; padding-right: 0.9rem !important; } } :where(#appContent, .portal-content) .training-workout-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; } :where(#appContent, .portal-content) .training-plan-table { width: 100%; border-collapse: separate; border-spacing: 0; } :where(#appContent, .portal-content) .training-plan-table :where(input, select, textarea) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } @media (min-width: 1181px) { :where(#appContent, .portal-content) .training-plan-table { min-width: 1120px; table-layout: fixed; } :where(#appContent, .portal-content) .training-plan-table th:nth-child(1), :where(#appContent, .portal-content) .training-plan-table td:nth-child(1) { width: 10%; } :where(#appContent, .portal-content) .training-plan-table th:nth-child(2), :where(#appContent, .portal-content) .training-plan-table td:nth-child(2) { width: 24%; } :where(#appContent, .portal-content) .training-plan-table th:nth-child(3), :where(#appContent, .portal-content) .training-plan-table td:nth-child(3), :where(#appContent, .portal-content) .training-plan-table th:nth-child(4), :where(#appContent, .portal-content) .training-plan-table td:nth-child(4) { width: 7.5%; } :where(#appContent, .portal-content) .training-plan-table th:nth-child(5), :where(#appContent, .portal-content) .training-plan-table td:nth-child(5), :where(#appContent, .portal-content) .training-plan-table th:nth-child(6), :where(#appContent, .portal-content) .training-plan-table td:nth-child(6), :where(#appContent, .portal-content) .training-plan-table th:nth-child(7), :where(#appContent, .portal-content) .training-plan-table td:nth-child(7) { width: 8%; } :where(#appContent, .portal-content) .training-plan-table th:nth-child(8), :where(#appContent, .portal-content) .training-plan-table td:nth-child(8) { width: 27%; } } @media (max-width: 1180px) { :where(#appContent, .portal-content) .training-workout-table-wrap { overflow: visible !important; } :where(#appContent, .portal-content) .training-plan-table, :where(#appContent, .portal-content) .training-plan-table thead, :where(#appContent, .portal-content) .training-plan-table tbody, :where(#appContent, .portal-content) .training-plan-table tr, :where(#appContent, .portal-content) .training-plan-table th, :where(#appContent, .portal-content) .training-plan-table td { display: block; width: 100%; } :where(#appContent, .portal-content) .training-plan-table thead { display: none; } :where(#appContent, .portal-content) .training-plan-table tbody { display: grid; gap: 0.85rem; padding: 0.85rem; } :where(#appContent, .portal-content) .training-plan-table tr { border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 1rem; background: rgba(255, 255, 255, 0.86); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045); overflow: hidden; } .dark :where(#appContent, .portal-content) .training-plan-table tr { border-color: rgba(51, 65, 85, 0.95); background: rgba(15, 23, 42, 0.58); box-shadow: none; } :where(#appContent, .portal-content) .training-plan-table td { display: grid; grid-template-columns: minmax(7.25rem, 0.34fr) minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.7rem 0.85rem !important; border-bottom: 1px solid rgba(226, 232, 240, 0.75); text-align: left !important; } .dark :where(#appContent, .portal-content) .training-plan-table td { border-bottom-color: rgba(51, 65, 85, 0.72); } :where(#appContent, .portal-content) .training-plan-table td:last-child { border-bottom: 0; } :where(#appContent, .portal-content) .training-plan-table td::before { content: attr(data-label); font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.02em; } .dark :where(#appContent, .portal-content) .training-plan-table td::before { color: #94a3b8; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-plan-table tbody { padding: 0.75rem; } :where(#appContent, .portal-content) .training-plan-table td { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; align-items: stretch; } :where(#appContent, .portal-content) .training-plan-table td::before { font-size: 10.5px; } } /* Final workout-plan exercise row layout: clean cards on mobile/tablet, table only on wide screens. */ @media (max-width: 1180px) { :where(#appContent, .portal-content) .training-workout-items-card { overflow: hidden !important; } :where(#appContent, .portal-content) .training-workout-table-wrap { overflow-x: visible !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; } :where(#appContent, .portal-content) .training-plan-table, :where(#appContent, .portal-content) .training-plan-table thead, :where(#appContent, .portal-content) .training-plan-table tbody, :where(#appContent, .portal-content) .training-plan-table tr, :where(#appContent, .portal-content) .training-plan-table th, :where(#appContent, .portal-content) .training-plan-table td { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .training-plan-table thead { display: none !important; } :where(#appContent, .portal-content) .training-plan-table tbody { display: grid !important; gap: 0.9rem !important; padding: 0.85rem !important; counter-reset: workout-row; } :where(#appContent, .portal-content) .training-plan-table tr.training-workout-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.78rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0.9rem !important; border: 1px solid rgba(203, 213, 225, 0.92) !important; border-radius: 1.05rem !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055) !important; overflow: hidden !important; } .dark :where(#appContent, .portal-content) .training-plan-table tr.training-workout-row { border-color: rgba(51, 65, 85, 0.95) !important; background: rgba(15, 23, 42, 0.62) !important; box-shadow: none !important; } :where(#appContent, .portal-content) .training-plan-table tr.training-workout-row::before { counter-increment: workout-row; content: "Exercise " counter(workout-row); display: flex !important; grid-column: 1 / -1 !important; align-items: center !important; justify-content: space-between !important; min-width: 0 !important; margin-bottom: 0.1rem !important; padding-bottom: 0.55rem !important; border-bottom: 1px solid rgba(226, 232, 240, 0.88) !important; color: #0f172a !important; font-size: 0.86rem !important; font-weight: 750 !important; letter-spacing: -0.01em !important; } .dark :where(#appContent, .portal-content) .training-plan-table tr.training-workout-row::before { border-bottom-color: rgba(51, 65, 85, 0.88) !important; color: #f8fafc !important; } :where(#appContent, .portal-content) .training-plan-table td { display: flex !important; flex-direction: column !important; gap: 0.34rem !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; background: transparent !important; } :where(#appContent, .portal-content) .training-plan-table td::before { content: attr(data-label) !important; display: inline-flex !important; align-items: center !important; width: fit-content !important; max-width: 100% !important; min-width: 0 !important; color: #475569 !important; font-size: 0.68rem !important; font-weight: 760 !important; letter-spacing: 0.018em !important; line-height: 1.2 !important; text-transform: uppercase !important; } .dark :where(#appContent, .portal-content) .training-plan-table td::before { color: #94a3b8 !important; } :where(#appContent, .portal-content) .training-plan-table td[data-label="Exercise"], :where(#appContent, .portal-content) .training-plan-table td[data-label="Notes"] { grid-column: 1 / -1 !important; } :where(#appContent, .portal-content) .training-plan-table td :where(input, select, textarea) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-plan-table tbody { padding: 0.75rem !important; gap: 0.85rem !important; } :where(#appContent, .portal-content) .training-plan-table tr.training-workout-row { grid-template-columns: minmax(0, 1fr) !important; gap: 0.72rem !important; padding: 0.82rem !important; } :where(#appContent, .portal-content) .training-plan-table td[data-label="Exercise"], :where(#appContent, .portal-content) .training-plan-table td[data-label="Notes"] { grid-column: auto !important; } } @media (min-width: 1181px) { :where(#appContent, .portal-content) .training-workout-table-wrap { overflow-x: auto !important; } :where(#appContent, .portal-content) .training-plan-table td::before, :where(#appContent, .portal-content) .training-plan-table tr.training-workout-row::before { content: none !important; display: none !important; } } /* Workout plan exercise rows: no horizontal scrolling on mobile and small tablets. */ /* Workout editor width guard: keep card borders inside the available content width. */ :where(#appContent, .portal-content) .training-workout-items-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } :where(#appContent, .portal-content) .training-workout-row > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-workout-items-card, :where(#appContent, .portal-content) .training-workout-table-wrap, :where(#appContent, .portal-content) .training-plan-table, :where(#appContent, .portal-content) .training-plan-table tbody, :where(#appContent, .portal-content) .training-plan-table tr.training-workout-row, :where(#appContent, .portal-content) .training-plan-table td, :where(#appContent, .portal-content) .training-plan-table td > * { box-sizing: border-box !important; max-width: 100% !important; } :where(#appContent, .portal-content) .training-workout-items-card, :where(#appContent, .portal-content) .training-workout-table-wrap { width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; } :where(#appContent, .portal-content) .training-plan-table { width: 100% !important; min-width: 0 !important; table-layout: auto !important; overflow: visible !important; } :where(#appContent, .portal-content) .training-plan-table tbody { width: 100% !important; min-width: 0 !important; padding: 0.75rem !important; overflow: visible !important; } :where(#appContent, .portal-content) .training-plan-table tr.training-workout-row { width: 100% !important; min-width: 0 !important; grid-template-columns: minmax(0, 1fr) !important; overflow: hidden !important; } :where(#appContent, .portal-content) .training-plan-table td, :where(#appContent, .portal-content) .training-plan-table td[data-label="Exercise"], :where(#appContent, .portal-content) .training-plan-table td[data-label="Notes"] { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .training-plan-table td :where(input, select, textarea) { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } } /* Workout plan exercise editor: div-based rows to prevent mobile/tablet horizontal scrolling. */ :where(#appContent, .portal-content) .training-workout-table-wrap { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } :where(#appContent, .portal-content) .training-workout-list { display: grid !important; gap: 0.85rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0.85rem !important; overflow: visible !important; box-sizing: border-box !important; } :where(#appContent, .portal-content) .training-workout-grid { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } :where(#appContent, .portal-content) .training-workout-header { display: none; } :where(#appContent, .portal-content) .training-workout-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem !important; margin: 0 !important; padding: 0.9rem !important; border: 1px solid rgba(203, 213, 225, 0.92) !important; border-radius: 1rem !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045) !important; overflow: hidden !important; } .dark :where(#appContent, .portal-content) .training-workout-row { border-color: rgba(51, 65, 85, 0.92) !important; background: rgba(15, 23, 42, 0.62) !important; box-shadow: none !important; } :where(#appContent, .portal-content) .training-workout-card-title { grid-column: 1 / -1; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(226, 232, 240, 0.88); color: #0f172a; font-size: 0.86rem; font-weight: 750; line-height: 1.25; } .dark :where(#appContent, .portal-content) .training-workout-card-title { border-bottom-color: rgba(51, 65, 85, 0.88); color: #f8fafc; } :where(#appContent, .portal-content) .training-workout-field { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1; } :where(#appContent, .portal-content) .training-workout-field-label { display: inline-flex; width: fit-content; max-width: 100%; color: #475569; font-size: 0.68rem; font-weight: 760; letter-spacing: 0.018em; line-height: 1.2; text-transform: uppercase; } .dark :where(#appContent, .portal-content) .training-workout-field-label { color: #94a3b8; } :where(#appContent, .portal-content) .training-workout-field :where(input, select, textarea) { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Workout editor width guard: keep card borders inside the available content width. */ :where(#appContent, .portal-content) .training-workout-items-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } :where(#appContent, .portal-content) .training-workout-row > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } @media (max-width: 640px) { :where(#appContent, .portal-content) .training-workout-items-card, :where(#appContent, .portal-content) .training-workout-table-wrap, :where(#appContent, .portal-content) .training-workout-list, :where(#appContent, .portal-content) .training-workout-row, :where(#appContent, .portal-content) .training-workout-field, :where(#appContent, .portal-content) .training-workout-field > * { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } :where(#appContent, .portal-content) .training-workout-items-card, :where(#appContent, .portal-content) .training-workout-table-wrap, :where(#appContent, .portal-content) .training-workout-list { overflow-x: hidden !important; } :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: minmax(0, 1fr) !important; margin: 0 !important; padding: 0.82rem !important; } :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: auto !important; } } @media (min-width: 641px) and (max-width: 1024px) { :where(#appContent, .portal-content) .training-workout-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: 1 / -1 !important; } } @media (min-width: 1025px) { :where(#appContent, .portal-content) .training-workout-list { gap: 0 !important; padding: 0 !important; border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 1rem; overflow: hidden !important; } .dark :where(#appContent, .portal-content) .training-workout-list { border-color: rgba(51, 65, 85, 0.95); } :where(#appContent, .portal-content) .training-workout-grid { display: grid !important; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.9fr) minmax(0, 0.55fr) minmax(0, 0.55fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.65fr); align-items: center; width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: fixed; } :where(#appContent, .portal-content) .training-workout-header { display: grid !important; background: rgba(248, 250, 252, 0.95); border-bottom: 1px solid rgba(226, 232, 240, 0.95); } .dark :where(#appContent, .portal-content) .training-workout-header { background: rgba(2, 6, 23, 0.45); border-bottom-color: rgba(51, 65, 85, 0.95); } :where(#appContent, .portal-content) .training-workout-header > div, :where(#appContent, .portal-content) .training-workout-field { padding: 0.62rem 0.58rem !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden; } :where(#appContent, .portal-content) .training-workout-field :where(input, select, textarea) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } :where(#appContent, .portal-content) .training-workout-header > div { color: #334155; font-size: 0.72rem; font-weight: 800; } .dark :where(#appContent, .portal-content) .training-workout-header > div { color: #cbd5e1; } :where(#appContent, .portal-content) .training-workout-row { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(226, 232, 240, 0.75) !important; box-shadow: none !important; background: transparent !important; } .dark :where(#appContent, .portal-content) .training-workout-row { border-bottom-color: rgba(51, 65, 85, 0.75) !important; background: transparent !important; } :where(#appContent, .portal-content) .training-workout-card-title, :where(#appContent, .portal-content) .training-workout-field-label { display: none !important; } :where(#appContent, .portal-content) .training-workout-field--exercise, :where(#appContent, .portal-content) .training-workout-field--notes { grid-column: auto; } } /* Training workout select enhancement fix: keep only one visible Exercise control. The global searchable-select enhancer hides large