/*
 * Koktl Business Suite mobile / small-screen overrides.
 *
 * Loaded after bs5-compat.css and custom.css. Everything in here is wrapped
 * in a media query so desktop layouts (>= 992px) stay byte-for-byte the
 * same as before the responsive pass.
 */

/* ============================================================
 * 1. Page chrome - prevent any accidental horizontal scroll on phones
 * ============================================================ */
@media (max-width: 991.98px) {
	html, body { max-width: 100%; overflow-x: hidden; }
	.container, .container-fluid { padding-left: 12px; padding-right: 12px; }
	body.mobile-nav-mode-app {
		padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}
}

/* ============================================================
 * 2. Forms - .form-horizontal label/input pairs collapse to a single
 * column on phones, and the BS3-era .col-sm-* offsets that push Save
 * buttons under the input column are zeroed out.
 * ============================================================ */
@media (max-width: 575.98px) {
	/* Stop col-sm-* and offset-sm-* from indenting form rows on phones. */
	.form-horizontal .form-group > [class*="col-sm-"],
	.form-horizontal .form-group > [class*="col-md-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0 !important;
	}
	.form-horizontal .col-form-label,
	.form-horizontal .control-label {
		text-align: left;
		padding-top: 0;
		padding-bottom: .25rem;
		font-weight: 500;
	}

	/* The product/user/etc. modals use a colon-only middle label
	 * (`<label class="col-sm-1">: </label>`) for desktop alignment.
	 * Hide it on phones so it doesn't take a whole stacked row. */
	.form-horizontal .form-group > label.col-sm-1 {
		display: none;
	}

	/* Prevent iOS Safari's auto-zoom on focus (triggers when font < 16px). */
	input.form-control,
	select.form-control,
	select.form-select,
	textarea.form-control {
		font-size: 16px;
	}

	/* Make form action buttons flow full width when they're alone in a row. */
	.form-group .btn {
		min-height: 40px;
	}
}

/* ============================================================
 * 3. Modals - many Koktl Business Suite modals use plain .modal-dialog and a hard-coded
 * pixel max-height on .modal-body. On phones we promote them to the
 * fullscreen variant so they fill the screen and scroll naturally.
 * ============================================================ */
@media (max-width: 575.98px) {
	.modal-dialog {
		width: auto;
		max-width: none;
		min-height: 100%;
		margin: 0;
	}
	.modal-content {
		min-height: 100vh;
		border: 0;
		border-radius: 0;
	}
	/* Override the inline style="max-height:450px; overflow:auto;" on the
	 * Add Product modal body and similar - the fullscreen modal scrolls
	 * its own body, so a fixed pixel cap just creates a tiny inner scroll. */
	.modal-body {
		max-height: none !important;
		overflow-y: auto;
	}
	.modal-header,
	.modal-footer {
		flex-wrap: wrap;
		gap: .5rem;
	}
}
@media (max-width: 767.98px) {
	/* Stretch .modal-lg dialogs (View/Add Order) on small tablets too. */
	.modal-dialog.modal-lg {
		max-width: 100%;
		margin: 0;
	}
	.modal-dialog.modal-lg .modal-content {
		min-height: 100vh;
		border: 0;
		border-radius: 0;
	}
}

/* ============================================================
 * 4. Navbar - the toggler already collapses the menu, but the dropdown
 * sub-menus default to a floated panel. Make them inline + tap-friendly.
 * ============================================================ */
@media (max-width: 991.98px) {
	body.mobile-nav-mode-app .navbar-toggler {
		display: none;
	}
	body.mobile-nav-mode-app .navbar-collapse {
		display: none !important;
	}
	.navbar-collapse .navbar-nav .nav-link {
		padding: .75rem .75rem;
		min-height: 44px;
	}
	.navbar-collapse .dropdown-menu {
		position: static;
		float: none;
		width: 100%;
		margin: 0;
		padding-left: 1rem;
		background-color: transparent;
		border: 0;
		box-shadow: none;
	}
	.navbar-collapse .dropdown-menu .dropdown-item,
	.navbar-collapse .dropdown-menu > li > a {
		padding: .65rem .75rem;
		min-height: 40px;
	}

	/* Re-show the username on phones (header.php line 59 hides it at 991px),
	 * but truncate so a long name doesn't shove the role chip off-screen. */
	.nav-account .nav-account-name {
		display: inline-block !important;
		max-width: 60vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
	}

	/* Brand image shouldn't outgrow the navbar height on phones, but we still
	   give it a roomy box so the logo is legible on small screens. */
	.navbar-brand img {
		max-height: 48px;
		max-width: 200px;
		width: auto;
		height: auto;
		object-fit: contain;
	}

	.mobile-bottom-nav {
		--ims-mobile-nav-surface: color-mix(in srgb, var(--bs-body-bg) 84%, var(--bs-body-color) 16%);
		--ims-mobile-nav-panel: color-mix(in srgb, var(--bs-body-bg) 90%, var(--bs-body-color) 10%);
		--ims-mobile-nav-border: color-mix(in srgb, var(--bs-border-color) 72%, transparent);
		--ims-mobile-nav-text: var(--bs-secondary-color);
		--ims-mobile-nav-text-active: color-mix(in srgb, var(--bs-primary, #0d6efd) 82%, var(--bs-emphasis-color) 18%);
		--ims-mobile-nav-active-bg: color-mix(in srgb, var(--bs-primary, #0d6efd) 14%, var(--bs-body-bg) 86%);
		--ims-mobile-nav-active-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
		--ims-mobile-nav-press-bg: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, var(--bs-body-bg) 90%);
		--ims-mobile-nav-sheet-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
		--ims-mobile-nav-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1035;
		padding: 14px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background:
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--bs-body-bg) 0%, transparent) 0%,
				color-mix(in srgb, var(--bs-body-bg) 24%, transparent) 28%,
				color-mix(in srgb, var(--bs-body-bg) 62%, transparent) 68%,
				color-mix(in srgb, var(--bs-body-bg) 92%, transparent) 100%
			);
		backdrop-filter: blur(16px) saturate(135%);
		-webkit-backdrop-filter: blur(16px) saturate(135%);
	}
	.mobile-bottom-nav__inner {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 6px;
		max-width: 760px;
		margin: 0 auto;
		padding: 7px;
		border: 1px solid var(--ims-mobile-nav-border);
		border-radius: 22px;
		background:
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--ims-mobile-nav-panel) 92%, #fff 8%) 0%,
				var(--ims-mobile-nav-panel) 100%
			);
		box-shadow: var(--ims-mobile-nav-shadow);
	}
	.mobile-bottom-nav__link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 58px;
		padding: 7px 4px;
		border: 0;
		border-radius: 16px;
		background: transparent;
		color: var(--ims-mobile-nav-text);
		text-decoration: none;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.1;
		transition:
			transform .18s ease,
			background-color .2s ease,
			color .2s ease,
			box-shadow .2s ease,
			opacity .2s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.mobile-bottom-nav__link span {
		max-width: 100%;
		white-space: nowrap;
		transition: inherit;
	}
	.mobile-bottom-nav__link i {
		font-size: 18px;
		transition: transform .18s ease, color .2s ease;
	}
	.mobile-bottom-nav__link.active {
		background: var(--ims-mobile-nav-active-bg);
		color: var(--ims-mobile-nav-text-active);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary, #0d6efd) 14%, transparent), var(--ims-mobile-nav-active-shadow);
	}
	.mobile-bottom-nav__link.active i {
		transform: translateY(-1px);
	}
	.mobile-bottom-nav__link:active,
	.mobile-bottom-nav__link:hover,
	.mobile-bottom-nav__link:focus {
		color: var(--ims-mobile-nav-text-active);
		text-decoration: none;
		background: var(--ims-mobile-nav-press-bg);
		outline: none;
	}
	.mobile-bottom-nav__link:active {
		transform: translateY(1px) scale(0.985);
	}
	.mobile-bottom-nav__link:focus-visible {
		color: var(--ims-mobile-nav-text-active);
		text-decoration: none;
		background: var(--ims-mobile-nav-press-bg);
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary, #0d6efd) 28%, transparent);
	}
	.mobile-bottom-nav__link--primary {
		position: relative;
		transform: translateY(-10px);
		padding-top: 11px;
		padding-bottom: 11px;
		border-radius: 19px;
		background: linear-gradient(180deg, color-mix(in srgb, var(--bs-primary, #0d6efd) 86%, #fff 14%) 0%, var(--bs-primary, #0d6efd) 100%);
		color: #fff;
		box-shadow:
			0 14px 30px color-mix(in srgb, var(--bs-primary, #0d6efd) 28%, transparent),
			inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
	}
	.mobile-bottom-nav__link--primary.active {
		background: linear-gradient(180deg, color-mix(in srgb, var(--bs-primary, #0d6efd) 84%, #fff 16%) 0%, var(--bs-primary, #0d6efd) 100%);
		color: #fff;
	}
	.mobile-bottom-nav__link--primary i {
		font-size: 20px;
	}
	.mobile-bottom-nav__link--primary:hover,
	.mobile-bottom-nav__link--primary:focus,
	.mobile-bottom-nav__link--primary:active,
	.mobile-bottom-nav__link--primary:focus-visible {
		background: linear-gradient(180deg, color-mix(in srgb, var(--bs-primary, #0d6efd) 80%, #fff 20%) 0%, color-mix(in srgb, var(--bs-primary, #0d6efd) 92%, #000 8%) 100%);
		color: #fff;
	}
	.mobile-bottom-nav__link--primary:active {
		transform: translateY(-7px) scale(0.985);
	}
	.mobile-nav-sheet {
		height: auto;
		max-height: min(80vh, 640px);
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		background: var(--bs-body-bg);
		color: var(--bs-body-color);
		border-top: 1px solid var(--bs-border-color);
		box-shadow: var(--ims-mobile-nav-sheet-shadow);
	}
	.mobile-nav-sheet .offcanvas-header {
		padding: 16px 16px 8px;
		align-items: start;
		border-bottom: 1px solid var(--bs-border-color);
	}
	.mobile-nav-sheet .offcanvas-body {
		padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	}
	.mobile-nav-sheet__eyebrow {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--bs-secondary-color);
		margin-bottom: 4px;
	}
	.mobile-nav-sheet__role {
		margin-bottom: 12px;
	}
	.mobile-nav-sheet__links {
		border-top: 1px solid var(--bs-border-color);
	}
	.mobile-nav-sheet__links .list-group-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
		border-right: 0;
		font-weight: 500;
		background: transparent;
		color: var(--bs-body-color);
		border-top-color: var(--bs-border-color);
		border-bottom-color: var(--bs-border-color);
	}
	.mobile-nav-sheet__links .list-group-item i {
		width: 18px;
		text-align: center;
		color: var(--bs-secondary-color);
	}
	.mobile-nav-sheet__links .list-group-item.active {
		background: transparent;
		color: var(--bs-primary, #0d6efd);
		border-color: var(--bs-border-color);
	}
	.mobile-nav-sheet__links .list-group-item:hover,
	.mobile-nav-sheet__links .list-group-item:focus {
		background: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, transparent);
		color: var(--bs-emphasis-color);
	}
	.mobile-nav-sheet__links .list-group-item.active i,
	.mobile-nav-sheet__links .list-group-item.text-danger i {
		color: inherit;
	}
	body.mobile-nav-mode-app.mobile-has-checkout-footer {
		padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px));
	}
	body.mobile-nav-mode-app.mobile-has-checkout-footer .mobile-bottom-nav {
		display: none;
	}
}

/* ============================================================
 * 5. Buttons - tap targets inside DataTables row actions
 * ============================================================ */
@media (max-width: 575.98px) {
	td .btn,
	td .btn-xs,
	td .btn-sm {
		min-height: 36px;
		padding: .35rem .6rem;
		margin-bottom: .25rem;
	}
	td .btn + .btn { margin-left: .25rem; }

	/* Float-end action bars (Add Product / Add Brand / Add User buttons)
	 * should span the row on phones so they're easy to tap. */
	.div-action.float-end,
	.div-action {
		float: none !important;
		width: 100%;
	}
	.div-action .btn { width: 100%; }
}

/* ============================================================
 * 6. Tables - .table-responsive wrappers we add in markup keep all
 * columns visible and let the user swipe horizontally. Add a small
 * visual hint that the table is scrollable.
 * ============================================================ */
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
	.table-responsive > table { margin-bottom: 0; }
	/* Drop hard-coded min widths on Add/Edit Order item header cells so the
	 * inner table can shrink before the wrapper has to scroll. */
	#productTable thead th { min-width: 0; white-space: nowrap; }
	#productTable td { vertical-align: middle; }
}

/* ============================================================
 * 7. DataTables Responsive - polish the auto-collapse expand control
 * ============================================================ */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
	padding-left: 30px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
	top: 50%;
	transform: translateY(-50%);
}
@media (max-width: 575.98px) {
	/* DataTables top toolbar (length, search, pagination) wraps awkwardly
	 * on phones - stack the rows and let each child take the full width. */
	div.dataTables_wrapper div.dataTables_length,
	div.dataTables_wrapper div.dataTables_filter,
	div.dataTables_wrapper div.dataTables_info,
	div.dataTables_wrapper div.dataTables_paginate {
		text-align: left;
		float: none;
		width: 100%;
		margin-bottom: .5rem;
	}
	div.dataTables_wrapper div.dataTables_filter input { width: 100%; }
	.dt-layout-row { flex-wrap: wrap; }
	.dt-layout-cell { flex: 1 1 100%; max-width: 100%; }
}

/* ============================================================
 * 8. Dashboard - tighten header + KPI cards on small screens
 * ============================================================ */
@media (max-width: 575.98px) {
	.dash-header {
		padding: 5px 0 8px;
		margin-bottom: 8px;
	}
	.dash-header h2 { font-size: 18px; }
	.dash-header .dash-sub {
		font-size: 11px;
		line-height: 1.35;
	}
	.dash-header .dash-date {
		font-size: 11px;
		padding: 4px 8px;
	}
	.kpi-row {
		margin: 0 -5px 8px;
	}
	.kpi-col {
		width: 50%;
		padding: 0 5px 10px;
	}
	.kpi-row > .kpi-col:last-child:nth-child(odd) {
		width: 100%;
	}

	.kpi-card {
		padding: 11px 12px;
		border-radius: 9px;
	}
	.kpi-icon {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		font-size: 15px;
		margin-right: 9px;
		border-radius: 10px;
	}
	.kpi-body { min-width: 0; }
	.kpi-value {
		font-size: 15px;
		line-height: 1.1;
	}
	.kpi-label {
		font-size: 9px;
		margin-bottom: 2px;
	}
	.kpi-sub {
		font-size: 10px;
		margin-top: 2px;
		line-height: 1.2;
	}
	.dash-panel {
		display: none;
	}
}

/* ============================================================
 * 9. Login screen - the .vertical wrapper (custom.css line 43) leaves a
 * 150px top gap which pushes the login card below the fold on phones.
 * ============================================================ */
@media (max-width: 575.98px) {
	.vertical {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	body > .container[style*="margin-top: 10vh"] {
		margin-top: 24px !important;
	}
}

/* ============================================================
 * 10. Breadcrumb / page-heading wrap on phones
 * ============================================================ */
@media (max-width: 575.98px) {
	body.mobile-nav-mode-app .breadcrumb {
		display: none;
	}
	.breadcrumb {
		font-size: 13px;
		padding: .5rem .75rem;
	}
	.page-heading {
		font-size: 1rem;
		line-height: 1.3;
	}
	fieldset > legend {
		font-size: 1rem;
	}
}