/* * Mobile layer. * * Loaded after the Metronic bundles so it wins specificity ties. Three bands: * < 992px phones and small tablets — Metronic's own sidebar-drawer breakpoint, * so the bottom nav and header changes line up with it exactly * < 768px touch sizing, forms, stacked tables, collapsed filter bars * < 576px modals become bottom sheets * Nothing here touches ≥ 992px, which is how the desktop stays untouched. */ /* The logo's size used to be an inline !important, which nothing below could override; this is that rule, now overridable. */ /* The header logo slot is narrow; cap the image by its container as well as by px, so a tall logo can never slide under the search box. */ .app-header-logo-img { max-height: 65px; max-width: min(250px, 100%); object-fit: contain; } /* The avatar container carried an inline `width: 30px !important`, which beat the 44px touch target below it — an inline !important outranks any stylesheet. The width lives here now so each breakpoint can own it. `flex: 0 0 auto` fixes a separate, older bug: as a shrinkable flex item the container collapsed to 10px at 1400px and 3px at 1024px, so the photo spilled out of its own box on desktop. The search field beside it grows and shrinks; the avatar should not. */ #kt_header_user_menu_toggle { width: 30px; flex: 0 0 auto; } /* ───────────────────────── < 992px: chrome ───────────────────────── */ @media (max-width: 991.98px) { :root { --lp-nav-h: 60px; } /* Header: one calm row. The logo was allowed 65px, which alone ate a third of a phone's header height. */ .app-header .app-header-logo-img { max-height: 34px; max-width: 130px; } /* The flash-message wrapper is w-100 inside the navbar; on a phone that 100% plus the buttons is wider than the row. Its content is fixed- positioned anyway. */ #kt_app_header_navbar > .w-100 { width: auto !important; flex: 0 0 0; min-width: 0; } .app-header .app-navbar-item { margin-inline: .1rem !important; } .app-header .app-navbar-item .btn-icon { width: 40px !important; height: 40px !important; } /* 44px to fit the touch target, and the same 9px inset the mobile sidebar toggle has at the other end of the row — .1rem left the photo hanging 13px off the edge of the screen. */ #kt_header_user_menu_toggle { width: 44px !important; margin-inline-end: 9px !important; } #kt_header_user_menu_toggle .symbol { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } #kt_header_user_menu_toggle .symbol img { width: 36px; height: 36px; } .app-header { overflow: visible; } /* The sessions dashboard pins two panels: its stats card (sticky at 65px) and its filter grid (sticky at 50px). Beside a wide desktop table that reads well. On a phone they are 186px and 570px tall and pin at different offsets, so the stats card floats over the filters and between them they claim 756px of a 900px screen — there is nothing left for the list being filtered. Let both scroll away with the page. */ .sd-tabs, .sd-filters { position: static !important; } /* The dashboard's widget-settings gear is a secondary control, but the blanket 40px icon-button floor below turned it into a bright 40px circle competing with the page title beside it. 36px is still comfortably tappable and sits back where it belongs. */ #kt_app_toolbar .btn.btn-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } #kt_app_toolbar .btn.btn-icon > i { font-size: 15px !important; } /* Metronic parks the scroll-to-top button at bottom: 23px, which is inside the 60px bottom navigation — it sat on top of the "More" tab. Lift it clear of the bar and the home-indicator inset. 30px was also below the touch target every other control here uses. */ .scrolltop { bottom: calc(var(--lp-nav-h, 60px) + env(safe-area-inset-bottom, 0px) + 12px) !important; width: 40px !important; height: 40px !important; } /* Search: the same block the desktop shows inline drops down under the header on demand, so the global-search JS keeps its single input. */ .app-header-search { display: none; position: absolute; top: 100%; inset-inline: 0; z-index: 5; padding: .5rem .75rem .75rem; background: var(--bs-app-header-base-bg-color, var(--bs-body-bg, #fff)); border-bottom: 1px solid var(--bs-gray-200); box-shadow: 0 8px 20px rgba(0, 0, 0, .06); } body.lp-search-open .app-header-search { display: flex; } .app-header-search .header-search { max-width: none; } .app-header-search .form-control { min-height: 44px; font-size: 16px; } /* Room to scroll above the bottom nav; the empty footer and the desktop shortcut rail have no job on a phone. */ .app-content { padding-bottom: calc(var(--lp-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem) !important; } .app-footer, #side-shortcuts, .app-aside { display: none !important; } /* The sidebar drawer doubles as the "More" menu. */ .app-sidebar .menu .menu-item .menu-link { min-height: 46px; } .app-sidebar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); } .lp-drawer-footer__row { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 48px; padding: .5rem 1rem; border: 0; background: none; border-radius: .5rem; color: var(--bs-gray-800); font-weight: 600; font-size: 14px; text-align: start; } .lp-drawer-footer__row:hover, .lp-drawer-footer__row:active { background: var(--bs-gray-100); color: var(--bs-primary); } .lp-drawer-footer__row.text-danger:hover { color: var(--bs-danger); } } /* While a field is being typed into, the bar steps aside: on Android the viewport shrinks to the keyboard and a fixed bar would otherwise sit on top of the very field being edited. (Set by mobile.js on focusin/focusout.) */ body.lp-keyboard-open .lp-mobile-nav { transform: translateY(110%); } body.lp-keyboard-open .lp-form-actions { position: static; } .lp-mobile-nav { transition: transform .15s ease-out; } /* ───────────────────── Bottom navigation (d-lg-none) ─────────────── */ .lp-mobile-nav { position: fixed; bottom: 0; inset-inline: 0; z-index: 100; display: flex; height: calc(var(--lp-nav-h, 60px) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bs-app-header-base-bg-color, var(--bs-body-bg, #fff)); border-top: 1px solid var(--bs-gray-200); box-shadow: 0 -6px 18px rgba(0, 0, 0, .05); } .lp-mobile-nav__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--bs-gray-600); text-decoration: none; -webkit-tap-highlight-color: transparent; } .lp-mobile-nav__icon { font-size: 20px; line-height: 1; } .lp-mobile-nav__label { font-size: 11px; font-weight: 600; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-mobile-nav__item.is-active { color: var(--bs-primary); } .lp-mobile-nav__item:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; border-radius: .5rem; } [data-bs-theme="dark"] .lp-mobile-nav { border-top-color: rgba(255, 255, 255, .08); } /* ─────────────────── < 768px: touch, forms, tables ───────────────── */ @media (max-width: 767.98px) { /* 44px targets, and 16px text so iOS does not zoom the page on focus. */ .form-control, .form-select, .select2-container--bootstrap5 .select2-selection { min-height: 44px; font-size: 16px !important; } .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered { line-height: 2.4; } .btn:not(.btn-icon):not(.lp-mobile-nav__item):not(.page-link) { min-height: 44px; } .btn-sm:not(.btn-icon) { min-height: 40px; } .btn.btn-icon, .btn-icon.btn-sm { min-width: 40px; min-height: 40px; } /* Checkboxes: the box grows to 26px and, where the label wraps the input (every Metronic .form-check), the 44px row is the target. Written at Metronic's own specificity so it wins the tie. */ .form-check.form-check-custom .form-check-input, .form-check.form-check-solid .form-check-input, .form-check .form-check-input { width: 24px; height: 24px; } .form-check { min-height: 44px; display: flex; align-items: center; } .form-check-label { padding-block: .5rem; } label.form-check, .form-check.form-check-inline { display: inline-flex; align-items: center; min-height: 44px; } /* Switches: their caption sits outside the control, so the control itself must be the target. The utility sizes (h-20px/w-35px) are !important, hence the same here. */ .form-check.form-switch .form-check-input, .form-switch .form-check-input { width: 52px !important; height: 30px !important; } .pagination .page-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .nav-pills .nav-link, .nav-tabs .nav-link { min-height: 42px; } /* Hierarchy without giant type; less air inside cards. */ .page-heading, h1.fs-1 { font-size: 20px !important; } .card-header .card-title h2 { font-size: 16px; } .card > .card-body { padding: 1rem; } .card > .card-header { padding-inline: 1rem; } .app-container { padding-inline: .75rem !important; } .app-toolbar-wrapper > .d-flex { flex-wrap: wrap; } /* Long words — case subjects, emails, URLs — wrap instead of pushing the layout out of the viewport. */ /* break-word (not anywhere): "anywhere" also collapses a flex item's min-content width to a single character, squeezing labels. */ .card-body, td, .menu-title, .breadcrumb-item { overflow-wrap: break-word; } /* Tables become stacked records. mobile.js reads the header row, writes each cell's heading into data-label and adds .lp-stacked; the CSS then lays every row out as a card. Opt out with .table-mobile-scroll. */ .table-responsive:has(> table.lp-stacked) { overflow: visible; } table.lp-stacked { display: block; width: 100%; } table.lp-stacked thead { display: none; } table.lp-stacked tbody, table.lp-stacked tr { display: block; width: 100%; } table.lp-stacked tr { border: 1px solid var(--bs-gray-200); border-radius: .85rem; margin-bottom: .75rem; padding: .35rem .85rem; background: var(--bs-body-bg); } table.lp-stacked td { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .45rem 0 !important; border: 0 !important; border-bottom: 1px dashed var(--bs-gray-200) !important; text-align: start !important; width: auto !important; min-width: 0 !important; } table.lp-stacked td:last-child { border-bottom: 0 !important; } /* _data_table_styles pins the 2nd column (serial #) to 50px with !important and an RTL variant of higher specificity; a stacked record has no columns, so out-specify it here. */ table.table.lp-stacked td:nth-child(n) { width: auto !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: start !important; } /* Cell values are user data (emails, IBANs, long numbers): break them anywhere rather than let them push the record sideways. */ table.lp-stacked td { overflow-wrap: anywhere; } /* Client profile "label / value" rows: a 175px label leaves no room for the value on a phone, and an email must be able to break. */ .card .d-flex.fs-7.py-2 > .min-w-175px { min-width: 110px !important; flex: 0 0 110px; } .card .d-flex.fs-7.py-2 > .text-gray-900 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } table.lp-stacked td::before { content: attr(data-label); flex: 0 0 36%; color: var(--bs-gray-500); font-size: 12px; font-weight: 600; } table.lp-stacked td:not([data-label])::before, table.lp-stacked td[data-label=""]::before { display: none; } table.lp-stacked td.lp-td-actions { justify-content: flex-start; flex-wrap: wrap; gap: .5rem; padding-top: .6rem !important; } table.lp-stacked td.lp-td-actions .btn { min-height: 40px; } table.lp-stacked td.lp-td-check { display: none; } table.lp-stacked td.lp-td-hide { display: none; } table.lp-stacked td.lp-td-empty { justify-content: center; } table.lp-stacked td .text-truncate { max-width: 100% !important; white-space: normal; } /* The value side must take the room the label leaves; without min-width:0 a truncating link shrank to a 2px sliver. */ table.lp-stacked td > a, table.lp-stacked td > div, table.lp-stacked td > span { flex: 1 1 auto; min-width: 0; } /* The record's title link is its main tap target: a full-height row, not a line of text. */ table.lp-stacked td > a { display: flex; align-items: center; min-height: 40px; } /* Fixed minimum widths sized for a desktop column have no place inside a 320px viewport; a select2 given min-w-300px was the last overflow. */ .min-w-250px, .min-w-300px, .min-w-350px, .w-300px { min-width: 0 !important; max-width: 100% !important; } /* DataTables chrome under a stacked table. */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: start; } .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; margin-top: .75rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 40px; min-height: 40px; } /* List pages share one card header: a page-length select, a 220px search box and a row of 30px buttons on a single non-wrapping line. On a phone that line is wider than the screen, so it becomes a stacked block with a full-width search — the same eight index pages, one rule. */ .card-header .card-title, .card-header .card-toolbar { width: 100%; } .card-header .card-title > .d-flex.flex-nowrap { flex-wrap: wrap !important; gap: .5rem; width: 100%; } .card-header .card-title .position-relative { width: 100%; } .card-header .card-title input.form-control { width: 100% !important; max-width: 100%; } /* Widget headers pinned to one line (Bootstrap's !important) must wrap too. */ .card-header.flex-nowrap { flex-wrap: wrap !important; row-gap: 4px; } .card-header.flex-nowrap > .overflow-auto { width: 100%; order: 3; } /* These widget headers hold a title, a "view all" button and a tab strip. The blanket .card-toolbar rule above hands the button the full width, so it claimed a row of its own and the header stood 169px tall — a fifth of the screen — before any content. Title and button fit side by side. */ .card-header.flex-nowrap { margin-block: 4px !important; min-height: 0 !important; } .card-header.flex-nowrap > .card-toolbar { width: auto; margin-block: 0; } /* Icon-only dashboard tabs. Four icon+label pills needed 351px inside a 300px strip, so the last one clipped mid-word. The icons carry the meaning and each anchor keeps an aria-label, so nothing is lost to a screen reader. */ .nav-pills-custom .lp-tab-text { display: none; } .nav-pills-custom .nav-link { padding-inline: 10px !important; } .nav-pills-custom .nav-link .badge { margin-inline-start: 2px; } .card-header .h-30px { height: auto !important; min-height: 44px; } .card-header .w-100px { width: auto !important; min-width: 96px; } .card-header .w-125px { width: auto !important; } .card-header .card-toolbar { justify-content: flex-start; flex-wrap: wrap; gap: .5rem; } .card-header .card-toolbar > .d-flex { flex-wrap: wrap; gap: .5rem; } .card-header[style*="min-height: 35px"] { min-height: 0 !important; padding-block: .75rem; } /* GET filter bars: only the keyword box stays out; the rest opens under a "Filters (n)" button. */ /* !important: a column may carry d-flex, which is itself !important */ .lp-filter-form:not(.is-open) .lp-filter-field { display: none !important; } .lp-filter-form.is-open .lp-filter-field { display: block; } .lp-filter-form.is-open .lp-filter-actions { position: sticky; bottom: calc(var(--lp-nav-h, 60px) + env(safe-area-inset-bottom, 0px)); background: var(--bs-body-bg); padding-top: .5rem; z-index: 2; } .lp-filter-actions .btn { flex: 1 1 auto; } /* Long forms: the save row rides just above the bottom nav so it is never a scroll away. */ .lp-form-actions { position: sticky; bottom: calc(var(--lp-nav-h, 60px) + env(safe-area-inset-bottom, 0px)); z-index: 3; margin-inline: -.75rem; padding: .75rem !important; background: var(--bs-body-bg); border-top: 1px solid var(--bs-gray-200); } .lp-form-actions .btn { flex: 1 1 auto; } } @media (min-width: 768px) { .lp-filter-toggle { display: none !important; } } /* ───────────────────── < 576px: modals as sheets ─────────────────── */ @media (max-width: 767.98px) { /* Detail pages (task / case / consultation overview): "label … value" rows keep their value on one line on desktop. On a phone a long case subject or client name would push the whole page sideways, so let it wrap under the label instead. */ .card .flex-stack > .text-nowrap, .card .flex-stack > .text-end > .text-nowrap, .card .card-title h2.text-nowrap { white-space: normal !important; overflow-wrap: break-word; min-width: 0; } } @media (max-width: 767.98px) { /* A long record title next to its status badges was laying out in one unbreakable row and pushing the page sideways. */ .card h1, .card h2, .card h3, .app-content h1, .app-content h2 { overflow-wrap: break-word; min-width: 0; } } @media (max-width: 767.98px) { /* Some switches carry Metronic's own w-35px/h-20px utilities, which are !important and beat the generic rule; and every check row gets a 44px hit area even when the control itself is drawn smaller. */ .form-switch .form-check-input.w-35px, .form-switch .form-check-input.h-20px { width: 52px !important; height: 30px !important; } .form-check { min-height: 44px; display: flex; align-items: center; } } @media (max-width: 575.98px) { /* KPI card footers: the completion text and its status badge sit on one line, which fits in Arabic but not in English ("0% Complete" + "0 Scheduled") at 320px. Let the badge drop instead of pushing the page. */ [data-row-id="hero"] .d-flex.flex-stack { flex-wrap: wrap; gap: .25rem; } [data-row-id="hero"] .d-flex.flex-stack > .badge { flex-shrink: 0; } } @media (max-width: 575.98px) { /* Header row budget: logo + sidebar toggle (185px) + five navbar items (202px) exceed 360-414px phones and clip the avatar at the end edge. The language switch also lives in the drawer footer, so it is the one control the row can spare on a phone. */ .app-header .lp-lang-switch { display: none !important; } /* Stat tiles (events index): two per row leaves no room for icon + number + label side by side, so stack them. */ .lp-stat-card .card-body { flex-direction: column; align-items: flex-start; gap: .5rem !important; } .modal-dialog:not(.modal-fullscreen) { margin: 0; width: 100%; max-width: 100%; min-height: 100%; display: flex; align-items: flex-end; } .modal-dialog:not(.modal-fullscreen) .modal-content { border-radius: 1.25rem 1.25rem 0 0; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; } .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-header .btn-icon, .modal-header [data-bs-dismiss] { min-width: 44px; min-height: 44px; } .modal-footer { flex-wrap: wrap; gap: .5rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } .modal-footer .btn { flex: 1 1 45%; } /* Nothing that pops up may be wider than the screen. */ .menu.menu-sub-dropdown { max-width: calc(100vw - 1.5rem) !important; } .select2-dropdown { max-width: calc(100vw - 1.5rem); } } /* ─────────────────────── Login (standalone page) ─────────────────── */ @media (max-width: 575.98px) { /* The card is 460px wide inside a shrink-to-fit centred column, so the column grew to 460 and the page scrolled sideways on every phone. */ #kt_app_root > .d-flex > .d-flex { width: 100%; padding: 1rem !important; } .glass-card { width: 100%; } .glass-card .px-8 { padding-inline: 1.25rem !important; } .glass-card .lang-btn, .glass-card .hover-link { min-height: 44px; display: inline-flex; align-items: center; padding-inline: .5rem; } } /* ─────────────────────── Calendar page ───────────────────────────── */ @media (max-width: 767.98px) { /* The page's own