/*
 * Responsive layout for the Desk, mobile first: base rules target phones, then widen at
 * 768px (tablet), 1200px (desktop) and 1600px (wide). Brand tokens from agileclix_brand.css.
 */

/* ---- Page shell: one continuous background, nothing that ends at the fold ---- */
.main-section,
.page-container,
.layout-main-section-wrapper {
	background: var(--ac-background) !important;
}

.page-container {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ---- Content width ---- */
.layout-main {
	width: 100%;
	max-width: 100% !important;
}

.layout-main-section {
	padding: 0.75rem !important;
}

/* Number cards, charts and link groups: one column on phones. Wider screens keep the
   workspace's own column widths, so this is capped rather than undone at 768px. */
@media (max-width: 767.98px) {
	.workspace .ce-block,
	.codex-editor .ce-block {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
}

/* ---- Touch: comfortable tap targets on phones and tablets ---- */
@media (pointer: coarse) {
	.desk-sidebar-item .item-anchor,
	.sidebar-item-container .item-anchor,
	.standard-sidebar-item,
	.ac-quickbar-item,
	.btn,
	.es-button {
		min-height: 40px;
	}
}

/* ---- Phones (base) ---- */
.agileclix-hero {
	padding: 0.85rem 1rem;
	gap: 0.75rem;
}

.agileclix-hero-logo {
	width: 36px;
	height: 36px;
}

.agileclix-hero-title {
	font-size: 0.98rem;
}

.ac-launcher-toolbar {
	max-width: none;
}

.ac-launcher-grid {
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.page-head .page-title .title-text {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Lists and reports scroll sideways instead of squeezing columns. */
.frappe-list .result,
.report-wrapper,
.datatable {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.modal-dialog {
	margin: 0.75rem;
}

/* Widget titles wrap rather than truncate ("Purchase Ord…") until there is room. */
@media (max-width: 1199.98px) {
	.widget .widget-title,
	.widget .widget-title .ellipsis,
	.widget-head .widget-title .ellipsis {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		line-height: 1.3;
	}
}

/* ---- Tablets ---- */
@media (min-width: 768px) {
	.layout-main-section {
		padding: 1rem 1.25rem !important;
	}

	.ac-launcher-toolbar {
		max-width: 420px;
	}

	.ac-launcher-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.agileclix-hero {
		padding: 1rem 1.25rem;
	}

	.agileclix-hero-logo {
		width: 44px;
		height: 44px;
	}

	.agileclix-hero-title {
		font-size: 1.05rem;
	}

	.modal-dialog {
		margin: 1.75rem auto;
	}
}

/* ---- Desktop: use the screen, up to a readable maximum ---- */
@media (min-width: 1200px) {
	.layout-main {
		max-width: 1440px !important;
		margin-left: auto;
		margin-right: auto;
	}

	.layout-main-section {
		padding: 1.25rem 1.75rem !important;
	}

	.ac-launcher-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}

/* ---- Wide screens ---- */
@media (min-width: 1600px) {
	.layout-main {
		max-width: 1560px !important;
	}
}