/* Improvara mobile + PWA layout. Desktop styles stay unchanged above the
breakpoints; these rules only tighten small-screen and standalone use. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
max-width: 100%;
}
/* iOS notch / home-indicator when installed to the home screen */
@media (display-mode: standalone) {
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}
.sidenav-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 17, 21, 0.45);
z-index: 1029;
}
@media (max-width: 1199.98px) {
body.g-sidenav-pinned .sidenav-backdrop {
display: block;
}
#sidenav-main {
z-index: 1031;
box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.12);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 1.5rem);
max-height: calc(100dvh - 1.5rem);
}
.navbar-main.fixed-top {
width: calc(100% - 1.5rem) !important;
}
#sidenav-main #iconSidenav {
display: block !important;
opacity: 0.7;
z-index: 2;
}
.main-content {
margin-left: 0 !important;
width: 100%;
max-width: 100%;
}
.main-content > .navbar-main {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
@media (max-width: 767.98px) {
html,
body {
overflow-x: clip;
}
.main-content > .navbar-main {
margin-left: 0.5rem;
margin-right: 0.5rem;
margin-top: 0.5rem;
}
.navbar-main .container-fluid {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.navbar-main .company-dropdown .dropdown-toggle {
max-width: 42vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0.4rem 0.65rem;
font-size: 0.8rem;
}
.navbar-main .company-dropdown .dropdown-menu {
max-width: min(90vw, 22rem);
}
/* Page headers used across modules: title + action buttons */
.container-fluid > .row > .col-12.d-flex.justify-content-between,
.container-fluid .col-12.d-flex.justify-content-between.align-items-center {
flex-wrap: wrap;
gap: 0.75rem;
}
.container-fluid > .row > .col-12.d-flex.justify-content-between > div:last-child,
.container-fluid .col-12.d-flex.justify-content-between > .d-flex {
flex-wrap: wrap;
gap: 0.4rem;
}
/* Touch-friendly controls; 16px inputs avoid iOS focus-zoom */
.btn {
min-height: 40px;
padding-left: 0.85rem;
padding-right: 0.85rem;
}
.btn-sm {
min-height: 38px;
}
.form-control,
.form-select,
select.form-control,
textarea.form-control,
input.form-control {
min-height: 42px;
font-size: 16px !important;
}
.form-check-input {
width: 1.15em;
height: 1.15em;
}
.form-check-label {
padding-left: 0.15rem;
}
.sidenav .nav-link {
min-height: 44px;
}
/* Wide tables / DataTables / heat maps scroll instead of overflowing.
Use :has(table) so dropdowns in ordinary cards are not clipped. */
.card-body:has(table),
.card-body:has(.dataTables_wrapper),
.table-responsive,
.org-tree-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.dataTables_wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
text-align: left !important;
float: none !important;
width: 100%;
margin-bottom: 0.5rem;
}
.dataTables_wrapper .dataTables_filter input {
width: 100% !important;
max-width: 100%;
margin-left: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .pagination {
justify-content: flex-start !important;
}
.heat-table-wrap,
.heat-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.heat-cell {
min-width: 48px;
padding: 8px 4px;
}
canvas {
max-width: 100% !important;
height: auto !important;
}
.modal-dialog {
margin: 0.5rem;
max-width: calc(100% - 1rem);
}
.dropdown-menu {
max-width: calc(100vw - 1.5rem);
}
#uploadToasts {
width: min(320px, calc(100vw - 24px)) !important;
right: 12px !important;
left: auto;
}
.ql-toolbar,
.ql-container {
max-width: 100%;
}
/* Login / auth cards */
.page-header.min-vh-50 {
min-height: 28vh !important;
padding-top: 3rem !important;
margin: 0.5rem !important;
}
.card {
max-width: 100%;
}
}
@media (max-width: 575.98px) {
h4 {
font-size: 1.15rem;
}
.container-fluid.py-4 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
/* ---- Larger icons throughout the app -----------------------------------
Relative sizing (em) keeps proportions; the pre-sized icon boxes and the
brand logo are left at their intended size so layouts don't break. */
.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-brands,
.svg-inline--fa {
font-size: 1.4em;
vertical-align: -0.05em;
}
.icon-shape .fa, .icon-shape .fas, .icon-shape .far, .icon-shape .fab, .icon-shape .svg-inline--fa,
.icon .fa, .icon .fas, .icon .far, .icon .fab, .icon .svg-inline--fa,
.navbar-brand .fa, .navbar-brand .svg-inline--fa,
.fa-2x, .fa-3x, .fa-lg { font-size: inherit; }
/* ---- Action icons ------------------------------------------------------
The Soft UI theme ships `.btn.btn-sm i { font-size: 0.5rem }` (8px), which
is sized for its own round icon-only buttons and is far too small for the
row actions used throughout this app. Two separate cases, because they
want different sizes:
1. Icon sitting BESIDE a label (" Add Risk").
Only needs to clear the 0.5rem rule — going much bigger makes the
icon tower over its own text.
2. Icon-only row actions (".btn btn-link p-0" — copy, delete, edit in
table rows). These need to be genuinely large, because a glyph's ink
fills only ~60% of its em box: 1.125rem renders a "times" that reads
as ~11px. They also need a real hit target and a hover affordance,
since with p-0 there is nothing to aim at.
Tunable via the custom properties below. Font Awesome 6 is loaded as JS,
which swaps for