/* ============================================================================
   MOBILE RESPONSIVE FIXES (Phase 7)
   All rules live inside media queries so the desktop layout stays untouched.
   Direction-agnostic: works for both LTR (English) and RTL (Arabic).
   ============================================================================ */

/* Small tablets in portrait and below */
@media (max-width: 991px) {

	.content-wrapper {
		margin-left: 0 !important;
	}

	.main-sidebar {
		padding-top: 50px;
	}

	.content {
		padding: 10px 12px;
	}

	.box {
		border-radius: 3px;
	}

	.box-header {
		padding: 12px;
	}

	.box-body {
		padding: 12px;
	}

	/* Filters / inline forms should wrap instead of overflowing */
	.form-inline .form-group {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
		display: block;
	}

	.form-inline .form-control {
		width: 100%;
		max-width: 100%;
	}
}

/* Phones */
@media (max-width: 767px) {

	body {
		-webkit-text-size-adjust: 100%;
	}

	.content-wrapper {
		margin-left: 0 !important;
	}

	.content {
		padding: 8px 8px 40px 8px;
	}

	.box-header {
		padding: 10px;
	}

	.box-body {
		padding: 10px;
	}

	.box-title {
		font-size: 15px;
	}

	/* Make wide tables horizontally scrollable instead of squishing the page */
	.dataTables_wrapper,
	.box-body .table,
	.box-body > .table-responsive,
	.content .table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.dataTables_wrapper .table,
	.box-body .table {
		width: 100% !important;
		white-space: nowrap;
	}

	/* Search box and length menu in dataTables should take full width */
	.dataTables_wrapper .dataTables_filter {
		width: 100%;
		margin-bottom: 8px;
	}

	.dataTables_wrapper .dataTables_filter input {
		width: 100%;
		max-width: 100%;
		display: block;
	}

	.dataTables_wrapper .dataTables_length {
		margin-bottom: 8px;
	}

	.dataTables_wrapper .dataTables_paginate {
		margin-top: 8px;
	}

	/* Stack buttons on small screens */
	.btn {
		white-space: normal;
		word-break: break-word;
	}

	.content .btn {
		margin-bottom: 4px;
	}

	/* Form controls full width for easier touch input */
	.form-control {
		font-size: 16px;
		height: 38px;
	}

	/* Navbar should not overflow on small screens */
	.navbar-custom-menu .navbar-nav > li > a {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.navbar-custom-menu .navbar-nav > li > a > i {
		font-size: 20px;
	}

	/* Alert / info boxes readable on phones */
	.callout {
		margin-left: 4px;
		margin-right: 4px;
	}

	/* Sidebar safe width on phones */
	.sidebar {
		max-width: 260px;
	}

	/* Login page tweaks */
	.login-box,
	.register-box {
		margin-top: 7vh;
		max-width: 92%;
	}

	.login-logo {
		padding: 0 8px;
	}

	.login-page .login-box-body {
		padding: 20px 15px;
	}

	.login-box-body .form-control {
		font-size: 16px;
	}

	/* Content headings should scale down slightly */
	.content-header > h1 {
		font-size: 20px;
	}

	.content-header > .breadcrumb {
		display: none;
	}

	/* Small utility tables (invoice / quotation totals) */
	.table-condensed {
		font-size: 13px;
	}

	/* Selection dropdowns (Select2) full width */
	.select2-container {
		width: 100% !important;
	}

	/* Prefer vertical stacking of two-column statistic boxes */
	.small-box,
	.info-box {
		min-height: 0;
	}

	/* Modal dialogs are full-width on phones */
	.modal-dialog {
		margin: 8px;
		width: auto;
	}

	.modal-content {
		padding: 4px;
	}

	/* Make sure copy/print action buttons do not wrap the page */
	.print-invoice .invoice {
		margin: 6px;
		padding: 10px;
	}
}