/* ==========================================================================
   Retrodus — Mobile & tablet responsive layout
   ========================================================================== */

/* --- Base mobile nav (hidden on desktop) --- */
.nav-bar,
.nav-logo,
.nav-toggle {
	display: none;
}

/* --- Tablet: stack columns --- */
@media screen and (max-width: 1100px) {
	.feedContainer {
		flex-direction: column;
	}

	.leftPane,
	.rightPane {
		flex: 1 1 100%;
		min-width: 0;
		width: 100%;
	}

	.rightPane {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 12px;
		max-width: none;
	}

	.rightPane .well,
	.rightPane .widget {
		margin-bottom: 0;
	}

	.banner {
		height: 96px;
		padding: 8px 12px;
	}

	.banner-logo {
		max-height: 78px;
	}

	.wiki-body {
		padding: 16px 18px;
	}

	.helpdesk-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Mobile navigation --- */
@media screen and (max-width: 900px) {
	body.nav-menu-open {
		overflow: hidden;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 10px 0;
		gap: 12px;
	}

	.nav-logo {
		display: inline-flex;
		align-items: center;
		flex: 1;
		min-width: 0;
	}

	.nav-logo-img {
		height: 32px;
		max-width: 150px;
	}

	.nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 10px;
		border: 1px solid var(--color-panel-border);
		border-radius: var(--radius);
		background: rgba(255, 255, 255, 0.55);
		flex-shrink: 0;
	}

	.nav-toggle-bar {
		display: block;
		width: 100%;
		height: 2px;
		background: var(--color-primary-dark);
		border-radius: 2px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	#siteNav.nav-open .nav-toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	#siteNav.nav-open .nav-toggle-bar:nth-child(2) {
		opacity: 0;
	}
	#siteNav.nav-open .nav-toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	nav .nav-container {
		flex-direction: column;
		align-items: stretch;
		padding: 0 12px;
	}

	nav .nav-menus {
		display: none;
		width: 100%;
		flex-direction: column;
		gap: 0;
		padding-bottom: 8px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#siteNav.nav-open .nav-menus {
		display: flex;
	}

	nav .nav-primary,
	nav .nav-actions {
		width: 100%;
		float: none;
	}

	nav .nav-primary > ul,
	nav .nav-actions > ul {
		flex-direction: column;
		width: 100%;
		align-items: stretch;
	}

	nav .nav-primary > ul > li,
	nav .nav-actions > ul > li {
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--color-panel-separator);
	}

	.banner {
		display: none;
	}

	nav .nav-menus > div > ul > li > a {
		padding: 14px 12px;
		font-size: 15px;
		min-height: 48px;
		border-left: none;
		border-radius: 0;
	}

	nav .nav-menus > div > ul > li > a i {
		display: inline-block;
		width: 20px;
		margin-right: 8px;
		text-align: center;
	}

	nav .nav-menus > div > ul > li > ul {
		display: none;
		position: static;
		box-shadow: none;
		border: none;
		border-top: 1px solid var(--color-panel-separator);
		background: rgba(255, 255, 255, 0.35);
		padding: 0;
		min-width: 0;
	}

	nav .nav-menus > div > ul > li.sub-open > ul {
		display: block;
	}

	nav .nav-menus > div > ul > li.has-submenu > a::after {
		content: '+';
		float: right;
		font-weight: 700;
		font-size: 16px;
		opacity: 0.6;
	}

	nav .nav-menus > div > ul > li.sub-open > a::after {
		content: '−';
	}

	nav .nav-menus > div > ul > li > ul > li > a {
		padding: 12px 12px 12px 36px;
		font-size: 14px;
		min-height: 44px;
	}

	nav .nav-actions {
		border-top: 2px solid var(--color-panel-border);
		margin-top: 4px;
		padding-top: 4px;
	}

	nav .nav-actions > ul > li > a {
		background: rgba(31, 127, 184, 0.08);
	}
}

/* --- Phone layout --- */
@media screen and (max-width: 768px) {
	.main {
		padding: 8px 8px 24px;
	}

	.banner {
		height: 84px;
		margin-left: -8px;
		margin-right: -8px;
		width: calc(100% + 16px);
		border-radius: 0;
		padding: 6px 10px;
	}

	.banner-logo {
		max-height: 68px;
		max-width: 98%;
	}

	.feedContainer {
		margin: 10px 0;
		gap: 10px;
	}

	.wiki-body {
		padding: 14px 14px;
		border-radius: var(--radius);
	}

	.wiki-hero-title {
		font-size: 24px;
		line-height: 1.2;
	}

	.wiki-hero-sub {
		font-size: 13px;
	}

	.leftPane > h1 {
		font-size: 22px;
	}

	.leftPane > h2 {
		font-size: 18px;
	}

	.link-pills {
		gap: 8px;
	}

	.link-pill {
		flex: 1 1 calc(50% - 8px);
		justify-content: center;
		text-align: center;
		padding: 10px 12px;
		font-size: 13px;
		min-height: 44px;
		align-items: center;
	}

	/* Touch-friendly forms */
	input,
	select,
	textarea,
	input[type="submit"],
	button,
	.submitButton,
	.btn,
	.helpdesk-submit {
		font-size: 16px;
		min-height: 44px;
	}

	.loginForm input[type="submit"] {
		width: 100%;
		padding: 12px 16px;
	}

	.loginForm input {
		font-size: 16px;
		padding: 10px 0;
	}

	ul.linkbuttons li {
		flex: 1 1 100%;
	}

	ul.linkbuttons li a {
		padding: 12px 10px;
		font-size: 14px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Scrollable tables */
	.wiki-body,
	.leftPane,
	.well .body {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	table {
		min-width: 520px;
	}

	/* Homepage feed */
	.changelog-item--line,
	.changelog-item--expandable > summary {
		grid-template-columns: 1fr;
	}

	.changelog-item--line {
		grid-template-columns: 1fr;
	}

	.changelog-item--expandable-wrap {
		grid-template-columns: 1fr;
	}

	.home-admin-actions--inline {
		justify-content: flex-start;
		margin-top: 6px;
	}

	.changelog-item__full {
		padding-left: 0;
	}

	.news-card__hero img { max-height: 220px; }

	.news-pagination__btn { padding: 0 10px; }

	/* Sidebar single column on phone */
	.rightPane {
		grid-template-columns: 1fr;
	}

	/* Security & helpdesk */
	.security-grid,
	.helpdesk-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.helpdesk-header h1 {
		font-size: 22px;
	}

	.helpdesk-thread {
		max-height: 50vh;
	}

	.helpdesk-message-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.helpdesk-admin-actions {
		flex-direction: column;
	}

	.helpdesk-admin-actions form,
	.helpdesk-admin-actions button {
		width: 100%;
	}

	/* Admin ticket bubble — full width panel */
	.admin-ticket-bubble {
		right: 12px;
		bottom: 12px;
	}

	.admin-ticket-bubble-btn {
		width: 52px;
		height: 52px;
	}

	.admin-ticket-panel {
		width: calc(100vw - 24px);
		max-width: 400px;
		right: 0;
		bottom: 62px;
		max-height: min(70vh, 520px);
	}

	.admin-ticket-panel[hidden],
	.admin-ticket-panel.is-closed {
		display: none !important;
	}

	.admin-ticket-panel-body {
		max-height: calc(70vh - 48px);
	}

	/* Footer */
	footer {
		flex-direction: column;
		text-align: center;
		gap: 6px;
		padding: 14px 12px;
	}

	footer p {
		font-size: 11px;
		line-height: 1.5;
	}

	/* Search widget */
	.search_widget input {
		width: 100%;
		float: none;
		margin-bottom: 8px;
	}

	.search_widget label {
		float: none;
		display: block;
		padding: 0 0 8px;
	}

	.search_widget form {
		display: flex;
		flex-direction: column;
	}

	.search_widget #name_suggestion {
		position: static;
		width: 100%;
		left: auto;
		margin-top: 8px;
	}

	/* Forum / misc */
	.forumReply,
	textarea.forumReply {
		width: 100% !important;
		max-width: 100%;
	}

	.alert-box {
		font-size: 14px;
		line-height: 1.5;
	}

	.wiki-grid {
		grid-template-columns: 1fr;
	}

	.security-qr img {
		max-width: 100%;
	}
}

/* --- Small phones --- */
@media screen and (max-width: 480px) {
	.nav-logo {
		font-size: 16px;
	}

	.banner {
		height: 72px;
		margin-left: -8px;
		margin-right: -8px;
		width: calc(100% + 16px);
		padding: 5px 8px;
	}

	.banner-logo {
		max-height: 58px;
	}

	.wiki-hero-title {
		font-size: 20px;
	}

	.link-pill {
		flex: 1 1 100%;
	}

	.helpdesk-card,
	.security-card {
		padding: 14px 14px;
	}

	td, th {
		padding: 10px 8px;
		font-size: 12px;
	}

	.admin-ticket-panel {
		width: calc(100vw - 16px);
		right: -4px;
	}
}

/* --- Landscape phone --- */
@media screen and (max-width: 900px) and (orientation: landscape) {
	#siteNav.nav-open .nav-menus {
		max-height: 55vh;
	}

	.banner {
		height: 64px;
		margin-left: -8px;
		margin-right: -8px;
		width: calc(100% + 16px);
		padding: 4px 8px;
	}

	.banner-logo {
		max-height: 52px;
	}
}

/* Prevent iOS zoom on focus when 16px inputs are used — handled above */

/* Safe area for notched phones */
@supports (padding: max(0px)) {
	.main {
		padding-left: max(8px, env(safe-area-inset-left));
		padding-right: max(8px, env(safe-area-inset-right));
	}

	.admin-ticket-bubble {
		right: max(12px, env(safe-area-inset-right));
		bottom: max(12px, env(safe-area-inset-bottom));
	}
}