/* =====================================================================
   mobile.css — Mobile / responsive overrides for Web VM
   Loaded AFTER main.css and sidebar-themes.css so these win the cascade.
   All new classes are prefixed `wvm-mobile-` to keep them unique.
   No existing IDs are changed.
   ===================================================================== */

/* ---------- Mobile-only floating hamburger toggle (injected by mobile.js) ---------- */
.wvm-mobile-toggle-btn {
	display: none; /* hidden by default; only shown on small screens */
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1050;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 8px;
	background: #2c3034;
	color: #fff;
	font-size: 20px;
	line-height: 44px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
}

.wvm-mobile-toggle-btn:focus,
.wvm-mobile-toggle-btn:hover {
	outline: none;
	background: #1d1d1d;
	color: #fff;
}

.wvm-mobile-toggle-btn:active {
	transform: scale(0.97);
}

/* When sidebar is open, push the button to the right of the sidebar so it
   visually closes it — and also acts as a close affordance. */
.page-wrapper.toggled .wvm-mobile-toggle-btn {
	left: 240px;
	background: #c0392b;
}

/* ---------- Responsive layout for screens <= 768px ---------- */
@media screen and (max-width: 768px) {

	/* Show the floating hamburger button only on mobile */
	.wvm-mobile-toggle-btn {
		display: block;
	}

	/* Make sure the body never gets a horizontal scrollbar */
	body {
		overflow-x: hidden;
		-webkit-text-size-adjust: 100%;
	}

	/* Page wrapper takes full viewport */
	.page-wrapper {
		min-height: 100vh;
		height: auto;
	}

	/* Page content: remove any padding-left baked in for desktop sidebar.
	   Add room at the top so the floating hamburger doesn't sit on content.
	   The template uses `<main class="page-content pt-2">` and an inner
	   `<div class="container-fluid p-5">` — both bootstrap utility classes
	   carry !important, so we need !important here too. */
	.page-wrapper .page-content,
	.page-wrapper main.page-content.pt-2 {
		padding-left: 0 !important;
		padding-top: 60px !important;
		width: 100%;
		display: block;
	}

	/* Inner container has `p-5` (3rem all sides) which is huge on mobile —
	   tighten it. Use selector specificity rather than touching the markup. */
	.page-wrapper .page-content .container-fluid.p-5 {
		padding: 12px !important;
	}

	/* When toggled on mobile, do NOT push content over — the sidebar
	   should overlay instead. The existing rule already targets min-width:768
	   so it's a no-op here, but we force it explicitly to be safe. */
	.page-wrapper.toggled .page-content {
		padding-left: 0 !important;
	}

	/* Cancel desktop "pinned" behaviour entirely on mobile —
	   on mobile the sidebar is either fully open or fully closed. */
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper {
		width: 280px;
	}
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
		padding: 20px;
	}
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .user-pic {
		margin-right: 15px;
		width: 60px;
	}
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-search input,
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .user-info,
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-menu .header-menu,
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-menu .sidebar-submenu,
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-menu ul > li > a > span,
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-menu ul > li > a::after,
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-footer > div:not(.pinned-footer) {
		display: revert !important;
	}
	.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-footer > div.pinned-footer {
		display: none;
	}

	/* Hide the desktop pin-sidebar control on mobile (it doesn't apply) */
	#pin-sidebar {
		display: none !important;
	}

	/* The sidebar itself stays at 280px but slides off-screen by default
	   (already handled by main.css). Make sure scrolling works inside it. */
	.sidebar-wrapper {
		width: 280px;
		max-width: 85vw; /* never wider than the viewport */
	}
	.sidebar-wrapper .sidebar-content {
		-webkit-overflow-scrolling: touch;
		overflow-y: auto;
	}

	/* Overlay: ensure it is visible and tappable when sidebar is open.
	   main.css already shows it on toggle, but at z-index 998 — make sure
	   it's below the sidebar (z 999) and above content. */
	.page-wrapper .page-content .overlay {
		z-index: 998;
	}

	/* ---------- Container & typography ---------- */
	.container,
	.container-fluid {
		padding-left: 12px;
		padding-right: 12px;
	}

	.wvm-mobile-toggle-btn + .page-content h1,
	.page-content h1 { font-size: 1.4rem; }
	.page-content h2 {
		font-size: 1.4rem;
		font-weight: 700;
		color: #0f172a;
		margin-bottom: 16px;
		padding-bottom: 12px;
		border-bottom: 2px solid #e2e8f0;
		position: relative;
	}
	.page-content h2::after {
		content: "";
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 48px;
		height: 2px;
		background: linear-gradient(90deg, #0d9488 0%, #06b6d4 100%);
	}
	.page-content h3 { font-size: 1.1rem; }

	/* ---------- Voicemail message table → polished cards on mobile ----------
	   The server-rendered table has 8 columns:
	     [checkbox] [Date & Time] [Caller ID] [Duration] [Message/audio]
	     [Delete btn] [Email btn] [Move-to-folder select+btn]
	   On a phone we transform each <tr> into a card and stack the cells.
	   No HTML changes — pure CSS via display:block + nth-child labels. */

	.page-content table.table {
		display: block;
		width: 100%;
		border: none;
		background: transparent;
	}

	/* Hide the original <thead> rows entirely on mobile — labels are baked
	   into each card via td::before. The trailing spacer thead also hides. */
	.page-content table.table > thead {
		display: none;
	}

	.page-content table.table > tbody {
		display: block;
		width: 100%;
	}

	/* Each row becomes a card. Subtle gradient + accent stripe on the left
	   for an envelope/voicemail feel. Slight elevation gives depth. */
	.page-content table.table > tbody > tr {
		display: block;
		width: 100%;
		margin: 0 0 14px 0;
		padding: 16px 14px 14px 18px;
		border: 1px solid #e2e8f0;
		border-radius: 14px;
		background:
			linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
		box-shadow:
			0 1px 2px rgba(15, 23, 42, 0.04),
			0 4px 12px rgba(15, 23, 42, 0.05);
		position: relative;
		overflow: hidden;
	}

	/* Left accent stripe — uses the brand teal/cyan */
	.page-content table.table > tbody > tr::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 4px;
		background: linear-gradient(180deg, #0d9488 0%, #06b6d4 100%);
	}

	/* Each cell becomes a stacked block */
	.page-content table.table > tbody > tr > td {
		display: block;
		width: 100%;
		padding: 0;
		border: none;
		text-align: left;
		font-size: 0.95rem;
		min-height: 0;
		white-space: normal !important; /* override inline `nowrap` from Perl */
		color: #1e293b;
	}

	/* Generic uppercase label */
	.page-content table.table > tbody > tr > td::before {
		display: block;
		font-size: 0.65rem;
		font-weight: 700;
		color: #64748b;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		margin-bottom: 3px;
	}

	/* --- Per-cell layout (column order from vmwebapi.cgi) --- */

	/* 1: checkbox — top-right corner, bigger tap target, branded accent */
	.page-content table.table > tbody > tr > td:nth-child(1) {
		position: absolute;
		top: 14px;
		right: 14px;
		width: auto;
		padding: 0;
		margin: 0;
	}
	.page-content table.table > tbody > tr > td:nth-child(1)::before {
		content: none;
	}
	.page-content table.table > tbody > tr > td:nth-child(1) input[type="checkbox"] {
		width: 24px;
		height: 24px;
		accent-color: #0d9488;
		cursor: pointer;
	}

	/* 2: Date & Time — card title. Strong typography, room for checkbox. */
	.page-content table.table > tbody > tr > td:nth-child(2) {
		font-weight: 700;
		font-size: 1.05rem;
		color: #0f172a;
		padding-right: 40px;
		margin-bottom: 12px;
		line-height: 1.3;
	}

	/* 3 + 4: Caller ID + Duration — sit them side-by-side as a two-column
	   row. Caller ID gets the wider share. */
	.page-content table.table > tbody > tr > td:nth-child(3),
	.page-content table.table > tbody > tr > td:nth-child(4) {
		display: inline-block;
		vertical-align: top;
		margin-bottom: 14px;
	}
	.page-content table.table > tbody > tr > td:nth-child(3) {
		width: 65%;
		padding-right: 8px;
	}
	.page-content table.table > tbody > tr > td:nth-child(4) {
		width: 33%;
	}
	.page-content table.table > tbody > tr > td:nth-child(3)::before {
		content: "Caller ID";
	}
	.page-content table.table > tbody > tr > td:nth-child(4)::before {
		content: "Duration";
	}
	.page-content table.table > tbody > tr > td:nth-child(3),
	.page-content table.table > tbody > tr > td:nth-child(4) {
		font-weight: 500;
	}

	/* 5: Audio player — wrap it in a soft tinted "panel" so the default
	   browser audio control sits in a friendly container. */
	.page-content table.table > tbody > tr > td:nth-child(5) {
		background: #f1f5f9;
		border-radius: 10px;
		padding: 10px 12px;
		margin-bottom: 14px;
	}
	.page-content table.table > tbody > tr > td:nth-child(5)::before {
		content: "Voicemail";
		color: #475569;
	}
	.page-content table.table > tbody > tr > td:nth-child(5) audio {
		width: 100%;
		display: block;
		height: 40px;
		margin-top: 4px;
	}
	/* Round the audio player's own pill on iOS Safari for visual harmony */
	.page-content table.table > tbody > tr > td:nth-child(5) audio::-webkit-media-controls-panel {
		border-radius: 8px;
	}

	/* 6 + 7: Delete + Email — side-by-side action buttons. Bigger, branded.
	   The first cell carries the "Actions" label spanning both. */
	.page-content table.table > tbody > tr > td:nth-child(6),
	.page-content table.table > tbody > tr > td:nth-child(7) {
		display: inline-block;
		width: auto;
		vertical-align: top;
		margin-right: 8px;
		margin-bottom: 14px;
	}
	.page-content table.table > tbody > tr > td:nth-child(6)::before {
		content: "Actions";
		display: block;
		width: 100%;
		margin-bottom: 6px;
	}
	.page-content table.table > tbody > tr > td:nth-child(7)::before {
		content: "";
		display: block;
		height: 0.85em; /* match label line height for vertical alignment */
		margin-bottom: 6px;
	}
	/* Action buttons — overrides Bootstrap btn defaults for a fresh look.
	   Use !important because btn-secondary etc. carry strong specificity. */
	.page-content table.table > tbody > tr > td:nth-child(6) button,
	.page-content table.table > tbody > tr > td:nth-child(7) button {
		min-width: 48px;
		height: 44px;
		padding: 0 14px !important;
		border: none !important;
		border-radius: 10px !important;
		font-size: 15px !important;
		font-weight: 500;
		cursor: pointer;
		transition: transform 0.1s ease, box-shadow 0.15s ease;
	}
	.page-content table.table > tbody > tr > td:nth-child(6) button:active,
	.page-content table.table > tbody > tr > td:nth-child(7) button:active {
		transform: scale(0.96);
	}
	/* Delete = red. Already class vmg-btn-icon — keep red but polish. */
	.page-content table.table > tbody > tr > td:nth-child(6) button.vmg-btn-icon {
		background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
		color: #fff !important;
		box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
	}
	/* Email = neutral slate */
	.page-content table.table > tbody > tr > td:nth-child(7) button.btn-secondary {
		background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
		color: #fff !important;
		box-shadow: 0 2px 6px rgba(71, 85, 105, 0.25);
	}

	/* 8: Move-to-folder select + button — full width, separated */
	.page-content table.table > tbody > tr > td:nth-child(8) {
		display: block;
		width: 100%;
		padding-top: 14px;
		margin-top: 4px;
		border-top: 1px solid #e2e8f0;
	}
	.page-content table.table > tbody > tr > td:nth-child(8)::before {
		content: "Move to folder";
	}
	.page-content table.table > tbody > tr > td:nth-child(8) select.form-control,
	.page-content table.table > tbody > tr > td:nth-child(8) select#moveToID {
		display: block !important;
		width: calc(100% - 60px) !important;
		margin: 0 !important;
		float: left;
		height: 44px;
		border: 1px solid #cbd5e1;
		border-radius: 10px 0 0 10px;
		padding: 0 12px;
		background-color: #fff;
		font-size: 15px;
	}
	.page-content table.table > tbody > tr > td:nth-child(8) button.btn-info {
		float: left;
		width: 56px;
		height: 44px;
		padding: 0 !important;
		margin-left: -1px !important; /* merge borders with select */
		border: none !important;
		border-radius: 0 10px 10px 0 !important;
		background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
		color: #fff !important;
		font-size: 16px !important;
		box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
		transition: transform 0.1s ease;
	}
	.page-content table.table > tbody > tr > td:nth-child(8) button.btn-info:active {
		transform: scale(0.96);
	}
	.page-content table.table > tbody > tr > td:nth-child(8)::after {
		content: "";
		display: block;
		clear: both;
	}

	/* Empty-folder message: it uses colspan="8" — friendly empty state */
	.page-content table.table > tbody > tr > td[colspan="8"] {
		text-align: center;
		padding: 40px 20px;
		color: #64748b;
		background: #f8fafc;
		border-radius: 12px;
		font-size: 0.95rem;
	}
	.page-content table.table > tbody > tr > td[colspan="8"]::before {
		content: "📭";
		display: block;
		font-size: 2rem;
		margin-bottom: 8px;
		text-transform: none;
		letter-spacing: 0;
		color: inherit;
		font-weight: normal;
	}
	/* The tr containing the empty-state td shouldn't get the accent stripe */
	.page-content table.table > tbody > tr:has(> td[colspan="8"])::before {
		display: none;
	}
	.page-content table.table > tbody > tr:has(> td[colspan="8"]) {
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0;
	}

	/* "Delete Selected" button below the table */
	.page-content .vmg-btn-danger {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-top: 8px;
		padding: 12px 20px !important;
		border-radius: 10px !important;
		font-size: 15px !important;
		background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
		box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
	}

	/* ---------- Forms / modals ---------- */
	.modal-dialog {
		margin: 8px;
	}
	.modal-content {
		border-radius: 8px;
	}

	.form-control,
	.btn {
		font-size: 16px; /* iOS won't zoom on focus when input >= 16px */
	}

	/* Stack inline button groups */
	.btn-group {
		flex-wrap: wrap;
	}

	/* ---------- Cards built by script.js (HAM, voicemail tabs, etc.) ----------
	   Don't touch their structure, just stop them blowing past the viewport. */
	.page-content .card {
		max-width: 100%;
	}
	.page-content .card .card-body {
		overflow-x: auto;
	}

	/* ---------- Sidebar footer dropdowns: keep them on screen ---------- */
	.sidebar-wrapper .sidebar-footer .dropdown-menu {
		max-width: calc(100vw - 30px);
		max-height: 60vh;
		overflow-y: auto;
	}

	/* ---------- Theme switcher swatches (in sidebar): allow wrap ---------- */
	.page-wrapper .theme {
		margin: 4px;
	}
}

/* =====================================================================
   Login page mobile fixes (style.css)
   ===================================================================== */
@media screen and (max-width: 768px) {
	/* The login form has min-height:100vh which is fine, but the row is
	   half-width on tablet/lg-mobile because of col-md-8. On phones the
	   bg-image column is hidden via d-none d-md-flex, so the form column
	   is correctly full-width — but the inner col-md-9 col-lg-8 is still
	   constrained. Allow it to fill the screen on phones for usability. */
	.login {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}
	.login .container {
		padding-left: 16px;
		padding-right: 16px;
	}
	.login-heading {
		font-size: 1.4rem;
		margin-bottom: 1rem !important;
	}

	/* Stop iOS zoom on focus for the login inputs (>=16px font-size). */
	.form-label-group > input,
	.form-label-group > input.form-control {
		font-size: 16px;
	}

	/* The pill button has letter-spacing that pushes text past the edge on
	   very narrow screens — soften it. */
	.btn-login {
		letter-spacing: 0.02rem;
		padding: 0.7rem 0.9rem;
	}
}

/* ---------- Smaller phones ---------- */
@media screen and (max-width: 480px) {
	.sidebar-wrapper {
		width: 260px;
	}
	.page-wrapper.toggled .wvm-mobile-toggle-btn {
		left: 220px;
	}

	/* Tighter card padding for small phones */
	.page-content table.table > tbody > tr {
		padding: 14px 12px 12px 16px;
		margin-bottom: 12px;
	}
	.page-content table.table > tbody > tr > td:nth-child(2) {
		font-size: 1rem;
	}
}