/* ============================================================
   OH Theme Management — mobile-nav.css v1.0.0
   Mobile Settings-Style Account Navigation
   Tasks: 3 (Mobile UI Redesign), 4 (List Design), 5 (Responsive)
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   BASE: Mobile nav is hidden on desktop/tablet
   Shown only at ≤768px via responsive block below
   ══════════════════════════════════════════════════════════════ */

.otm-mobile-nav {
	display: none;
}

/* ══════════════════════════════════════════════════════════════
   TASK 3 — MOBILE ACCOUNT UI: GROUPED NAVIGATION
   ══════════════════════════════════════════════════════════════ */

/* Nav wrapper — full-width padding container */
.otm-mobile-nav {
	padding: 0 12px 16px;
	display: none; /* hidden by default; shown at ≤768px */
}

/* Section group card */
.otm-mobile-nav-group {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 12px;
}

.otm-mobile-nav-group:last-child {
	margin-bottom: 0;
}

/* Section label inside group */
.otm-mobile-nav-label {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.67rem;
	font-weight: 700;
	color: #9ca3af;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 16px 8px;
	background: #f9fafb;
	border-bottom: 1px solid #f3f4f6;
	line-height: 1;
}

/* ══════════════════════════════════════════════════════════════
   TASK 4 — MOBILE LIST DESIGN
   Card-style list: icon · title · arrow
   .otm-mobile-nav-group
     .otm-mobile-item
       .otm-mobile-icon
       .otm-mobile-item-label
       .otm-mobile-arrow
   ══════════════════════════════════════════════════════════════ */

/* List item row */
.otm-mobile-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px;
	background: #ffffff;
	text-decoration: none;
	color: #111827;
	border-bottom: 1px solid #f3f4f6;
	transition: background 0.12s ease;
	position: relative;
	cursor: pointer;
}

.otm-mobile-item:last-child {
	border-bottom: none;
}

.otm-mobile-item:hover,
.otm-mobile-item:focus-visible {
	background: #fafafe;
	outline: none;
}

.otm-mobile-item:focus-visible {
	box-shadow: inset 0 0 0 2px #6366f1;
}

/* Active state */
.otm-mobile-item--active {
	background: #fafafe;
}

.otm-mobile-item--active .otm-mobile-icon {
	background: #eef2ff;
	color: #6366f1;
}

.otm-mobile-item--active .otm-mobile-item-label {
	color: #6366f1;
	font-weight: 700;
}

.otm-mobile-item--active .otm-mobile-arrow {
	color: #6366f1;
}

/* Icon container */
.otm-mobile-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #f3f4f6;
	color: #6b7280;
	transition: background 0.12s, color 0.12s;
}

.otm-mobile-icon svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.otm-mobile-item:hover .otm-mobile-icon {
	background: #eef2ff;
	color: #6366f1;
}

/* Danger icon variant (Sign Out) */
.otm-mobile-icon--danger {
	background: #fef2f2;
	color: #ef4444;
}

.otm-mobile-item--danger:hover .otm-mobile-icon--danger {
	background: #fee2e2;
	color: #dc2626;
}

/* Item label */
.otm-mobile-item-label {
	flex: 1;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #111827;
	line-height: 1.3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.otm-mobile-item--danger .otm-mobile-item-label {
	color: #ef4444;
}

.otm-mobile-item--danger:hover .otm-mobile-item-label {
	color: #dc2626;
}

/* Arrow indicator */
.otm-mobile-arrow {
	color: #d1d5db;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	transition: transform 0.15s ease, color 0.15s ease;
}

.otm-mobile-item:hover .otm-mobile-arrow {
	transform: translateX(3px);
	color: #6366f1;
}

.otm-mobile-item--danger:hover .otm-mobile-arrow {
	color: #ef4444;
}

/* Badge inside list item */
.otm-mobile-item .otm-account-nav-badge {
	margin-right: 4px;
}

/* ══════════════════════════════════════════════════════════════
   TASK 5 — RESPONSIVE BEHAVIOR
   ≤768px: show mobile nav; hide old mobile tab nav
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

	/* Show new settings-style mobile nav */
	.otm-mobile-nav {
		display: block;
	}

	/* Hide old horizontal tab bar (kept in DOM for non-breaking compat,
	   but replaced visually by the new list nav above) */
	.otm-mobile-tabs {
		display: none !important;
	}

	/* Suppress the sidebar entirely on mobile — nav is in .otm-mobile-nav */
	.otm-account-sidebar {
		display: none;
	}

	/* Account page layout: single column */
	.otm-account-layout {
		grid-template-columns: 1fr;
	}

	/* Mobile profile card: show */
	.otm-mobile-profile-card {
		display: flex;
		margin: 12px 12px 4px;
	}

	/* Reduce page padding */
	.otm-account-main {
		padding: 16px 12px 48px;
	}

}

/* Small phones ≤480px */
@media (max-width: 480px) {

	.otm-mobile-nav {
		padding: 0 10px 12px;
	}

	.otm-mobile-nav-group {
		border-radius: 12px;
		margin-bottom: 10px;
	}

	.otm-mobile-item {
		padding: 14px 14px;
	}

	.otm-mobile-icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
	}

	.otm-mobile-item-label {
		font-size: 0.875rem;
	}

}


/* ══════════════════════════════════════════════════════════════
   v2.3.0 — MOBILE PAGE-BASED ROUTING
   New modifier classes on .otm-account-page control visibility:
     .otm-account-page--mobile-hub      → /otm-account/
     .otm-account-page--mobile-subpage  → /otm-account/{tab}/
   ══════════════════════════════════════════════════════════════ */

/* ── Mobile Hub Page (/otm-account/) ─────────────────────────
   Show profile card + mobile nav.
   Hide the desktop sidebar/layout container entirely.
─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	/* Profile card: shown on hub only */
	.otm-account-page--mobile-hub .otm-mobile-profile-card {
		display: flex;
		margin: 16px 12px 8px;
	}

	/* Mobile nav: shown on hub only */
	.otm-account-page--mobile-hub .otm-mobile-nav {
		display: block;
		padding: 0 12px 24px;
	}

	/* Desktop/tablet layout container: hidden on mobile hub */
	.otm-account-page--mobile-hub .otm-container {
		display: none !important;
	}

	/* ── Mobile Sub-page (/otm-account/{tab}/) ─────────────────
	   Show mobile page header + full-width content area.
	   Hide profile card, mobile nav, and sidebar.
	──────────────────────────────────────────────────────────── */

	/* Mobile page header: shown on sub-pages only */
	.otm-account-page--mobile-subpage .otm-mobile-page-header {
		display: flex;
	}

	/* Sidebar: hidden on mobile sub-pages */
	.otm-account-page--mobile-subpage .otm-account-sidebar {
		display: none !important;
	}

	/* Single-column layout on mobile sub-pages */
	.otm-account-page--mobile-subpage .otm-account-layout {
		grid-template-columns: 1fr;
	}

	/* Main content: full width, comfortable mobile padding */
	.otm-account-page--mobile-subpage .otm-account-main {
		padding: 20px 16px 48px;
	}

	/* Container: always visible on sub-pages */
	.otm-account-page--mobile-subpage .otm-container {
		display: block;
	}

}

/* ── Mobile Page Header component ───────────────────────────────────────────
   Sticky top bar with back arrow + centred page title.
   Hidden by default; shown only on mobile sub-pages via the rules above.
─────────────────────────────────────────────────────────────────────────── */

.otm-mobile-page-header {
	display: none; /* shown via media query on sub-pages */
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	position: sticky;
	top: 0;
	z-index: 100;
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
	padding: 14px 16px;
	min-height: 56px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.otm-mobile-page-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #f3f4f6;
	color: #374151;
	text-decoration: none;
	flex-shrink: 0;
	transition: background 0.12s ease, color 0.12s ease;
}

.otm-mobile-page-back:hover,
.otm-mobile-page-back:focus-visible {
	background: #eef2ff;
	color: #6366f1;
	outline: none;
}

.otm-mobile-page-back:focus-visible {
	box-shadow: 0 0 0 2px #6366f1;
}

.otm-mobile-page-title {
	flex: 1;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Small phones ≤480px adjustments ───────────────────────────────────── */
@media (max-width: 480px) {

	.otm-account-page--mobile-hub .otm-mobile-nav {
		padding: 0 10px 20px;
	}

	.otm-mobile-page-header {
		padding: 12px 14px;
		min-height: 52px;
	}

	.otm-mobile-page-title {
		font-size: 0.95rem;
	}

	.otm-account-page--mobile-subpage .otm-account-main {
		padding: 16px 12px 40px;
	}

}