/* * 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; } /* ───────────────────────── < 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; } #kt_header_user_menu_toggle { width: 44px !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; } /* 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: .5rem; } .card-header.flex-nowrap > .overflow-auto { width: 100%; order: 3; } .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