/**
 * Frontend Responsive Styles
 *
 * @package SchoolsScheduling
 * @author Tobalt — https://tobalt.lt
 */

@media screen and (max-width: 768px) {
	/* Tabs scroll */
	.tobalt-schedule-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tobalt-schedule-tabs::-webkit-scrollbar {
		display: none;
	}

	.tobalt-schedule-tab {
		padding: 10px 18px;
		font-size: 13px;
		white-space: nowrap;
	}

	/* Smaller pills */
	.tobalt-class-btn,
	.tobalt-room-btn {
		padding: 6px 12px;
		font-size: 13px;
	}

	.tobalt-teacher-btn {
		font-size: 12px;
		padding: 6px 12px;
	}

	/* Hide desktop table */
	.tobalt-timetable {
		display: none;
	}

	/* Show mobile cards */
	.tobalt-mobile-schedule {
		display: block;
	}

	/* ── Mobile Day Accordion ───────────────── */
	.tobalt-mobile-day {
		margin-bottom: 12px;
		border-radius: var(--ts-radius);
		overflow: hidden;
		border: 1px solid var(--ts-border);
	}

	.tobalt-mobile-day-header {
		background: var(--ts-navy);
		color: #fff;
		padding: 14px 16px;
		font-weight: 700;
		font-size: 15px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		letter-spacing: 0.01em;
		-webkit-tap-highlight-color: transparent;
	}

	.tobalt-mobile-day-header::after {
		content: '';
		width: 8px;
		height: 8px;
		border-right: 2px solid rgba(255,255,255,.6);
		border-bottom: 2px solid rgba(255,255,255,.6);
		transform: rotate(45deg);
		transition: transform .25s ease;
		flex-shrink: 0;
	}

	.tobalt-mobile-day.collapsed .tobalt-mobile-day-header::after {
		transform: rotate(-45deg);
	}

	.tobalt-mobile-day-lessons {
		background: var(--ts-card);
		transition: max-height .3s ease;
	}

	.tobalt-mobile-day.collapsed .tobalt-mobile-day-lessons {
		display: none;
	}

	/* ── Mobile Lesson Row ──────────────────── */
	.tobalt-mobile-lesson {
		display: flex;
		padding: 12px 16px;
		border-bottom: 1px solid var(--ts-border-light);
		gap: 14px;
		align-items: flex-start;
	}

	.tobalt-mobile-lesson:last-child {
		border-bottom: none;
	}

	.tobalt-mobile-lesson-time {
		flex: 0 0 52px;
		text-align: center;
		padding-top: 2px;
	}

	.tobalt-mobile-lesson-time .period-num {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin: 0 auto 3px;
		background: var(--ts-navy);
		color: #fff;
		border-radius: 50%;
		font-size: 13px;
		font-weight: 700;
	}

	.tobalt-mobile-lesson-time .time-text {
		font-size: 10px;
		color: var(--ts-text-subtle);
		font-weight: 500;
	}

	.tobalt-mobile-lesson-content {
		flex: 1;
		min-width: 0;
	}

	.tobalt-mobile-lesson--empty {
		opacity: 0.35;
	}

	.tobalt-mobile-lesson--empty .tobalt-mobile-lesson-content {
		color: var(--ts-text-subtle);
	}

	/* Overview smaller cards */
	.tobalt-overview-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 10px;
	}

	.tobalt-overview-card-header {
		padding: 10px 12px;
		font-size: 15px;
	}

	/* Header */
	.tobalt-timetable-header {
		flex-wrap: wrap;
		gap: 10px;
	}

	.tobalt-timetable-title {
		font-size: 20px;
	}
}

/* Desktop: hide mobile layout */
@media screen and (min-width: 769px) {
	.tobalt-mobile-schedule {
		display: none;
	}
}

/* ── Print Styles ───────────────────────────── */
@page {
	size: landscape;
	margin: 12mm;
}

@media print {
	.tobalt-schedule-nav,
	.tobalt-schedule-selector,
	.tobalt-print-btn,
	.tobalt-mobile-schedule,
	.tobalt-schedule-loading {
		display: none !important;
	}

	.tobalt-timetable {
		display: table !important;
		box-shadow: none;
		font-size: 11px;
		width: 100%;
		border: 1px solid #ccc;
	}

	.tobalt-timetable th {
		background: var(--ts-navy) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.tobalt-lesson-cell,
	.tobalt-lesson-cell[rowspan="2"],
	.tobalt-timetable .tobalt-time-cell,
	.tobalt-timetable .tobalt-period-num {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.tobalt-lesson-cell:hover {
		background: var(--ts-amber-pale);
	}

	.tobalt-timetable td {
		padding: 4px 6px;
	}

	.tobalt-schedule-wrapper {
		max-width: none;
	}

	.tobalt-timetable,
	.tobalt-overview-card {
		break-inside: avoid;
	}

	.tobalt-overview-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.tobalt-overview-card {
		box-shadow: none;
		border: 1px solid #ccc;
	}

	.tobalt-overview-card:hover {
		transform: none;
		box-shadow: none;
	}

	.tobalt-overview-card-header {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.tobalt-overview-mini-table .mini-filled {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}