/* Add here all your CSS customizations */

/* Slimmer .page-header bar — Porto's default is 50px tall; this app uses
   a more compact 34px. .inner-wrapper's padding-top must stay in sync
   (60px fixed .header + this bar's height), since .page-header is
   position:fixed and isn't part of the normal document flow. */
html.fixed.has-top-menu .inner-wrapper {
	padding-top: 94px;
}

.page-header {
	height: 34px;
}

.page-header h2 {
	height: 34px;
	line-height: 34px;
	font-size: 15px;
}

.page-header .breadcrumbs {
	line-height: 34px;
}

/* .page-header h2 is float:left, but .right-wrapper (the breadcrumb) has
   no width/float of its own in Porto's base CSS — it's a plain block, so
   it renders at the *full* .page-header width (overlapping the h2's float
   box), relying on text-align:right (.text-end) to visually push the
   breadcrumb to the right edge. That's fragile: a long $heading can push
   the right-aligned breadcrumb past the visible edge ("going offside").
   Floating it properly constrains it to its own content width instead.
   padding-right: Porto's own page-header has zero right padding too — in
   the real theme, the breadcrumb never touches the edge because a
   trailing 50px .sidebar-right-toggle button sits after it as a buffer.
   We don't implement that right-sidebar feature, so there's nothing left
   to create that gap; add it back explicitly instead. */
.page-header .right-wrapper {
	float: right;
	padding-right: 20px;
}

/* Header-right (search / separators / notifications / userbox): use flex
   centering instead of relying on inline-block vertical-align:middle,
   which doesn't reliably center elements of different heights against
   each other — and a margin-top hack on one element (tried earlier) just
   shifts the shared line box and throws off its *siblings* instead
   (this is why the separators were rendering only a few px tall/shifted:
   the margin-top fix for .search's alignment pushed them down too).
   flexbox centers every child independently and robustly. */
.header.header-nav-menu .header-right {
	display: flex;
	align-items: center;
}

/* Porto's .search/.notifications/.userbox carry asymmetric top/bottom
   margins meant for the old inline-block/mobile-stacking layout (e.g.
   .search has margin-bottom:13px, .notifications has margin-top:4px).
   flexbox align-items:center centers the *margin box*, so an asymmetric
   margin still skews the visible content off-center. Zero them out so
   centering is based purely on content height. */
.header.header-nav-menu .header-right > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Wider search box per request — Porto's default was 170px. */
.header .search {
	width: 220px;
}

/* Logo icon: a little larger (25px -> 40px) and properly vertically
   centered in the 60px header. Porto's `.header .logo` rule sets a fixed
   margin: 10px 0 0 15px (correct for its own default 25px-tall logo, but
   not centered for any other height) — must match its specificity
   (`.header .logo`, not just `.logo`) to actually override margin-top.
   Relying on line-height + vertical-align:middle to center the icon and
   text (Porto's default approach) proved fragile at this larger size —
   measured ~2.4px off from the true header center (same class of bug as
   the earlier header-right icon centering issue). Using flexbox instead,
   which centers both children by their actual box height regardless of
   font-metric quirks. margin-top still needed to position the whole flex
   box at the header's effective vertical center (30.4px, matching the
   nav menu and header-right icons — not the naive 30px geometric
   midpoint). `.logo-container` itself sits 2.4px below the header top
   (Porto's own base CSS), so margin-top has to account for that offset
   too: 30.4 - 40/2 - 2.4 = 8px. Verified via getBoundingClientRect(). */
.header .logo {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	margin-top: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #000;
}

.header .logo img {
	height: 40px;
	width: 40px;
}

/* Dyn DataTable toolbar (Print/Excel/PDF buttons + Search, same line — see
   system/dynamic-table.php's `dyn-toolbar-actions` sDom column). Bootstrap's
   `.form-control { width: 100% }` on the DataTables search input, inside a
   flex column with no width of its own, could stretch the input (dragging
   the buttons with it, since they share the row) past the column and, on
   some viewport widths, past the browser window's right edge entirely —
   this is what "search box going out of window" was. Give the input a
   fixed width like the header search box, and let the row wrap onto a
   second line as a fallback if the buttons + search still don't fit. */
.dyn-toolbar-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	row-gap: 8px;
}

/* !important needed: theme.css's own `.dataTables_wrapper .dataTables_filter
   input { width: 100% !important; }` (Filter section) otherwise always wins
   regardless of selector specificity, since !important beats specificity. */
.dyn-toolbar-actions .dataTables_filter input {
	width: 200px !important;
	max-width: 100%;
}

.dyn-toolbar-actions .dataTables_filter label {
	width: auto;
}

/* Remove the gap between the table and the pagination controls on Dyn
   DataTables. theme.css's `.dataTables_wrapper .pagination { margin-top:
   20px !important; }` (Pagination section) is the source — every live
   jQuery DataTable in this app is a Dyn table (Condensed tables are plain
   static HTML with no pagination), so this override applies app-wide to
   exactly the tables it should. !important needed to beat theme.css's own
   !important. */
.dataTables_wrapper .pagination {
	margin-top: 0 !important;
}

/* Center label-less checkboxes (e.g. cbox()/cbox1() called with an empty
   label) inside a `text-center` table cell — used throughout the app's
   permission-matrix tables (Menu/View/New/Edit/Delete columns). BS5's
   .form-check reserves a fixed padding-left for the label, which
   text-align:center on the <td> doesn't account for — that padding just
   shifts the checkbox left of true-center. Scoped to `td.text-center
   .form-check` rather than changing cbox()/cbox1() themselves, since most
   other callers pass a real visible label that still needs that padding. */
td.text-center .form-check {
	display: flex;
	justify-content: center;
	padding-left: 0;
	margin-bottom: 0;
}

td.text-center .form-check .form-check-input {
	float: none;
	margin-left: 0;
}

/* Tighten the gap between the black .page-header bar and each module
   page's own content. Porto's .content-body carries a 40px padding-top
   by default; -24px here leaves a modest ~16px gap. (This used to be
   -50px, calibrated against ~22px of stray whitespace that leaked from
   a UTF-8 BOM at the start of several legacy module/system files -
   those BOMs have since been stripped, so that extra offset no longer
   exists and -50px overshot into the page-header bar, hiding the top
   of every page's action buttons - New/Edit/Save - behind it. If a
   *newly added* module file reintroduces a leading BOM, re-check this
   value rather than assuming margin drift is this rule's fault.) */
.content-body > .container-fluid {
	margin-top: -24px;
}

/* Header search autocomplete dropdown (porto/js/global-search.js) - the
   input's .input-group already has position:relative set inline by the
   script, so this just needs to sit below it, full width, above
   everything else in the header. */
.global-search-results {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	background: #fff;
	border: 1px solid #EDEDED;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	max-height: 360px;
	overflow-y: auto;
	margin-top: 4px;
}

.global-search-group {
	padding: 6px 12px 2px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: #999;
}

.global-search-item {
	padding: 8px 12px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.global-search-item:hover,
.global-search-item.active {
	background: #f4f4f4;
}

.global-search-item .gs-label {
	font-size: 13px;
	color: #212529;
}

.global-search-item .gs-sublabel {
	font-size: 11px;
	color: #999;
	white-space: nowrap;
}

.global-search-empty {
	padding: 10px 12px;
	font-size: 13px;
	color: #999;
}