/*
 * ALC LMS — Mobile Responsive Stylesheet
 * Comprehensive mobile-first layout fixes for ALL dashboard views.
 * Loaded after app.css so it has full override authority.
 */

/* ============================================================
   PIN NUMPAD (auth.js)
   ============================================================ */
.pin-numpad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	max-width: 280px;
	margin: 0 auto 16px;
}
.pin-btn {
	height: 56px;
	font-size: 20px;
	font-weight: 700;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: #fff;
	cursor: pointer;
	transition: all var(--transition-fast);
	color: var(--color-text-primary);
}
.pin-btn:active {
	transform: scale(0.94);
	background: var(--color-brand-blue-light);
}
.pin-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--color-brand-blue);
	background: transparent;
	transition: all 0.15s ease;
}
.pin-dot.filled {
	background: var(--color-brand-blue);
}

/* ============================================================
   MOBILE HEADER BAR (app.js)
   ============================================================ */
.mobile-header-bar {
	display: none;
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: 54px;
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(0,0,0,0.08);
	padding: 0 14px;
	align-items: center;
	justify-content: space-between;
}
#mobile-menu-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 8px;
	border: 1px solid var(--color-border);
	background: #fff;
	cursor: pointer;
}

/* ============================================================
   RESPONSIVE BREAKPOINT — TABLET & MOBILE (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {

	/* GLOBAL */
	* { -webkit-tap-highlight-color: transparent; }

	body { overflow-x: hidden; }

	/* Show mobile bar */
	.mobile-header-bar { display: flex; }

	/* SHELL — convert sidebar to off-canvas drawer */
	.app-shell {
		display: block;
		min-height: 100vh;
	}

	.app-sidebar {
		position: fixed;
		top: 54px;
		left: 0;
		bottom: 0;
		width: 80%;
		max-width: 320px;
		height: calc(100vh - 54px);
		z-index: 999;
		background: rgba(255,255,255,0.98);
		backdrop-filter: blur(24px);
		-webkit-backdrop-filter: blur(24px);
		border-right: 1px solid rgba(0,0,0,0.08);
		overflow-y: auto;
		padding: 20px 14px 32px;
		transform: translateX(-110%);
		transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
		box-shadow: none;
	}

	.app-sidebar.mobile-open {
		transform: translateX(0);
		box-shadow: 4px 0 24px rgba(0,0,0,0.12);
	}

	/* Sidebar nav tabs — bigger touch targets */
	.nav-tabs { gap: 2px; }
	.nav-tab {
		height: 46px;
		font-size: 14px;
		border-radius: 10px;
		padding: 0 14px;
	}

	/* Viewport */
	#main-view-viewport {
		height: auto;
		min-height: calc(100vh - 54px);
		padding: 14px 12px 28px;
		overflow-x: hidden;
	}

	/* DASHBOARD CONTAINERS */
	.dashboard-container {
		padding: 0;
		gap: 16px;
	}

	/* Page title rows: stack vertically */
	.dashboard-title-row,
	[style*="justify-content: space-between"][style*="display: flex"],
	[style*="justify-content:space-between"][style*="display:flex"] {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}

	/* Stat tiles — 2 columns */
	.dashboard-grid-top {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}
	.dashboard-grid-top .card {
		padding: 14px 12px !important;
	}

	/* All major 2-col splits → single col */
	.dashboard-split-grid,
	[style*="grid-template-columns: 1fr 1fr"],
	[style*="grid-template-columns:1fr 1fr"],
	[style*="grid-template-columns: 2fr 1fr"],
	[style*="grid-template-columns:2fr 1fr"],
	[style*="grid-template-columns: 2fr 1fr 1fr"],
	[style*="grid-template-columns:2fr 1fr 1fr"] {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
	}

	/* Fixed-width side panel grids (messages, teacher schedule) → single col */
	[style*="grid-template-columns: 280px"],
	[style*="grid-template-columns:280px"],
	[style*="grid-template-columns: 320px"],
	[style*="grid-template-columns:320px"] {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
	}

	/* Widen minmax grid items on mobile */
	[style*="minmax(280px"],
	[style*="minmax(240px"] {
		grid-template-columns: 1fr !important;
	}
	[style*="minmax(160px"],
	[style*="minmax(140px"],
	[style*="minmax(130px"],
	[style*="minmax(180px"] {
		grid-template-columns: 1fr 1fr !important;
	}

	/* 4-col → 2-col */
	[style*="repeat(4, 1fr)"],
	[style*="repeat(4,1fr)"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Cards */
	.card {
		padding: 16px 14px !important;
		border-radius: 16px !important;
	}

	/* Forms */
	.form-control {
		font-size: 16px !important; /* prevents iOS auto-zoom */
		min-height: 44px !important;
	}
	.form-group { margin-bottom: 14px !important; }

	/* Buttons */
	.btn {
		min-height: 42px !important;
		font-size: 13px !important;
	}

	/* Tables → horizontal scroll */
	table {
		display: block !important;
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		white-space: nowrap !important;
	}
	th, td {
		padding: 10px 12px !important;
		font-size: 12px !important;
	}

	/* TOOLS GRID */
	.tools-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	.tool-card { padding: 14px 10px !important; }

	/* SEGMENTED CONTROLS */
	.apple-segmented-control {
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.apple-segmented-control::-webkit-scrollbar { display: none; }
	.apple-segmented-control button {
		flex: 1;
		white-space: nowrap;
		font-size: 12px !important;
		padding: 7px 10px !important;
	}

	/* MESSAGES */
	.messages-box {
		height: 260px !important;
	}
	.message-bubble {
		max-width: 90% !important;
		font-size: 13px !important;
	}

	/* SCHEDULE ITEMS */
	.schedule-item {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}
	.schedule-item .btn-join {
		width: 100% !important;
	}

	/* MODAL */
	.modal-content {
		max-width: 100% !important;
		width: calc(100vw - 20px) !important;
		padding: 20px 14px !important;
		border-radius: 20px !important;
		max-height: 92vh !important;
	}

	/* TOAST */
	#alc-toast-container {
		bottom: 14px !important;
		right: 12px !important;
		left: 12px !important;
		max-width: none !important;
	}

	/* PROFICIENCY ITEMS */
	.proficiency-item {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}

	/* SCHEDULE LIST */
	.schedule-list { max-height: none !important; }

	/* CHILD SELECTOR PILLS */
	.child-selector-pills {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	/* PIN display on mobile */
	.pin-btn { height: 52px !important; font-size: 18px !important; }

	/* Teachers/schedule sidebar panel fix */
	[style*="min-height: 500px"] { min-height: 0 !important; }
	[style*="height: 680px"],
	[style*="height:680px"] { height: auto !important; }

	/* Remove fixed heights on any flexbox panels */
	[style*="height: calc(84vh"],
	[style*="height:calc(84vh"] { height: auto !important; }
}

/* ============================================================
   SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
	/* Stat tiles go 1 column on tiny screens */
	.dashboard-grid-top {
		grid-template-columns: 1fr 1fr !important;
	}

	/* Tools grid → 1 col */
	.tools-grid {
		grid-template-columns: 1fr !important;
	}

	/* 4-col → 1-col */
	[style*="repeat(4, 1fr)"],
	[style*="repeat(4,1fr)"] {
		grid-template-columns: 1fr !important;
	}

	/* 2-col minmax on narrow → 1 col */
	[style*="minmax(160px"],
	[style*="minmax(140px"],
	[style*="minmax(130px"],
	[style*="minmax(180px"] {
		grid-template-columns: 1fr !important;
	}

	.brand-title { font-size: 14px !important; }
	.nav-tab { font-size: 13px !important; }
	.dashboard-grid-top .card h3 { font-size: 18px !important; }

	/* Auth card fill screen on phones */
	.card.apple-glass-card {
		border-radius: 20px !important;
		padding: 28px 18px !important;
	}
}