/* PASS / Systam — shared mobile usability stylesheet
 * Loaded after Bootstrap 3 and dark_theme.css.
 * Goal: make the app acceptable on phones (<= 720px) without redesigning desktop.
 */

@media (max-width: 720px) {

	/* ---------- Layout / chrome ---------- */
	body { font-size: 14px; }
	.container, .container-fluid { padding-left: 10px; padding-right: 10px; }
	.page-header, .h1.page-header { font-size: 20px; line-height: 1.25; margin: 14px 0 12px; padding-bottom: 8px; }
	h1, .h1 { font-size: 22px; }
	h2, .h2 { font-size: 18px; }
	h3, .h3 { font-size: 16px; }

	/* Navbar: allow wrapping, shrink */
	.navbar .navbar-brand { font-size: 14px; padding-left: 10px; padding-right: 10px; }
	.navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }
	.navbar-collapse { max-height: 80vh; overflow-y: auto; }

	/* Customer / install strip */
	.customer-strip, .customer-info, .asiakas-strip { font-size: 12px; padding: 6px 8px; }

	/* Buttons in headers wrap nicely */
	.btn-toolbar, .btn-group { flex-wrap: wrap; }
	.btn { white-space: normal; }

	/* Forms: full-width inputs */
	.form-control, select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.input-group { width: 100%; }

	/* ---------- Modern table -> stacked card view ---------- */
	.table-responsive.modern-table-wrap, .modern-table-wrap { overflow-x: visible; border: 0; }
	.modern-table, .modern-table thead, .modern-table tbody, .modern-table tr, .modern-table td, .modern-table th { display: block; width: 100%; }
	.modern-table thead { display: none; }
	.modern-table tbody tr {
		border: 1px solid #e2e7ee;
		border-radius: 10px;
		margin-bottom: 12px;
		padding: 10px 12px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(20,30,50,0.04);
	}
	.modern-table tbody tr.odd { background: #f8fafc; }
	.modern-table tbody td {
		border: 0 !important;
		padding: 4px 0 !important;
		text-align: left !important;
		font-size: 14px;
	}
	.modern-table tbody td[data-label]:not([data-label=""])::before {
		content: attr(data-label) ":";
		display: inline-block;
		min-width: 92px;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #7a8a9b;
		margin-right: 8px;
		vertical-align: top;
	}
	.modern-table tbody td.icon {
		text-align: right !important;
		padding-top: 8px !important;
		border-top: 1px solid #eef1f6 !important;
		margin-top: 6px;
		white-space: normal !important;
	}
	.modern-table tbody td.icon .btn {
		font-size: 13px;
		padding: 6px 10px;
		margin-bottom: 4px;
	}

	/* Permission expanded row inside stacked card */
	.modern-table tbody tr.perm-row { padding: 0; border: 1px dashed #d6e3f4; background: #f8fafc; margin-top: -10px; margin-bottom: 12px; }
	.modern-table tbody tr.perm-row > td { padding: 12px !important; }
	.perm-groups { flex-direction: column; gap: 10px; }
	.perm-group { min-width: 0; }

	/* Sortable headers (when displayed, e.g. above the cards in some views) */
	.sort-header, .modern-sort-header { white-space: normal; }

	/* Userlist toolbar: stack search + create */
	.userlist-search-row { flex-direction: column; }
	.userlist-search-create-btn { justify-content: center; width: 100%; }

	/* ---------- Generic Bootstrap tables fallback ---------- */
	.table-responsive { -webkit-overflow-scrolling: touch; }
	table.table-mobile-stack, table.table-mobile-stack thead, table.table-mobile-stack tbody, table.table-mobile-stack tr, table.table-mobile-stack td, table.table-mobile-stack th { display: block; width: 100%; }
	table.table-mobile-stack thead { display: none; }
	table.table-mobile-stack tbody tr { border: 1px solid #e2e7ee; border-radius: 8px; margin-bottom: 10px; padding: 8px 10px; background: #fff; }
	table.table-mobile-stack td { border: 0 !important; padding: 4px 0 !important; }
	table.table-mobile-stack td[data-label]:not([data-label=""])::before {
		content: attr(data-label) ":";
		display: inline-block;
		min-width: 92px;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		color: #7a8a9b;
		margin-right: 8px;
	}

	/* ---------- viewuser ---------- */
	.viewuser-page { padding: 0 4px; }
	.viewuser-card-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
	.viewuser-card-body { padding: 12px; }
	.vu-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
	.vu-avatar { width: 56px; height: 56px; font-size: 22px; }
	.vu-info-grid { grid-template-columns: 1fr !important; }
	.vu-rights-table { font-size: 12px; }

	/* ---------- create user form ---------- */
	.cu-wrap { padding: 0 4px; }
	.cu-card { padding: 12px; }
	.cu-row { grid-template-columns: 1fr !important; gap: 4px; }
	.cu-row > label { padding-top: 0; }

	/* ---------- tilastot / tilastohaku ---------- */
	.tilastot-card, .tilastot-page { padding: 12px; }
	.tilastot-page .page-header { font-size: 18px; }
	.kpi-tile { padding: 10px; }
	.credit-card { flex-direction: column; }

	/* ---------- suoritus / induction toolbar ---------- */
	.suoritus-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
	.toolbar-dates { flex-wrap: wrap; gap: 6px; }
	.toolbar-dates label { width: 100%; }
	.quick-filters { display: flex; flex-wrap: wrap; gap: 4px; }
	.quick-filters .btn { flex: 1 1 auto; }

	/* ---------- Hide noisy things on phones ---------- */
	.hide-on-mobile, .visible-desktop-only { display: none !important; }

	/* ---------- Suoritukset / userlist-modern-table (user.php) ---------- */
	.userlist-modern-table { table-layout: auto !important; border-spacing: 0 !important; border-collapse: separate !important; }
	.userlist-modern-table, .userlist-modern-table thead, .userlist-modern-table tbody, .userlist-modern-table tr, .userlist-modern-table td, .userlist-modern-table th { display: block; width: 100%; }
	.userlist-modern-table > thead { display: none; }
	.userlist-modern-table > tbody > tr.userlist-main-row { border: 1px solid #e2e7ee; border-radius: 12px; margin-bottom: 12px; padding: 10px; background: #fff; box-shadow: 0 1px 2px rgba(20,30,50,0.04); }
	.userlist-modern-table > tbody > tr.userlist-main-row > td { background: transparent !important; border: 0 !important; padding: 6px 0 !important; border-radius: 0 !important; box-shadow: none !important; }
	.userlist-modern-table > tbody > tr.userlist-main-row > td.userlist-identity-cell { padding-bottom: 8px !important; border-bottom: 1px solid #eef1f6 !important; margin-bottom: 6px; }
	.userlist-modern-table > tbody > tr.userlist-main-row > td[data-label]:not([data-label=""])::before {
		content: attr(data-label) ":";
		display: inline-block;
		min-width: 100px;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #7a8a9b;
		margin-right: 8px;
		vertical-align: top;
	}
	.userlist-modern-table .userlist-identity-wrap { gap: 8px; align-items: flex-start; }
	.userlist-modern-table .userlist-avatar { width: 36px; height: 36px; font-size: 14px; }
	.userlist-modern-table .userlist-name { font-size: 14px; }
	.userlist-modern-table .userlist-email { font-size: 12px; word-break: break-all; }
	.userlist-modern-table .userlist-user-fields { flex-direction: column; gap: 2px; }
	.userlist-modern-table .userlist-progress-inline { display: flex; align-items: center; gap: 8px; }
	.userlist-modern-table .userlist-progress-track { flex: 1 1 auto; }
	.userlist-modern-table .userlist-cell-title { font-size: 13px; }
	.userlist-modern-table .userlist-cell-meta { font-size: 12px; }
	.userlist-modern-table .userlist-inline-meta { display: block; font-size: 11px; color: #7a8a9b; margin-top: 2px; }

	/* Expand row inside suoritukset cards */
	.userlist-modern-table > tbody > tr.userlist-expand-row { border: 1px dashed #d6e3f4; background: #f8fafc; border-radius: 10px; margin-top: -10px; margin-bottom: 12px; }
	.userlist-modern-table > tbody > tr.userlist-expand-row > td { padding: 10px !important; }
	.userlist-expand-panel { padding: 6px !important; }
	.userlist-expand-toolbar { flex-direction: column; gap: 8px; align-items: stretch; }
	.userlist-content-list, .userlist-details-content-list { font-size: 13px; }
	.userlist-content-item { flex-wrap: wrap; gap: 6px; }
	.userlist-content-name-link { word-break: break-word; }

	/* Sort headers / bulk toolbar */
	.userlist-bulk-toolbar { flex-wrap: wrap; gap: 6px; }
	.userlist-bulk-toolbar .btn { flex: 1 1 auto; }

	/* Footer: collapse */
	footer, .footer { font-size: 11px; padding: 10px; }
}

/* Tablet tweaks */
@media (min-width: 721px) and (max-width: 991px) {
	.cu-row { grid-template-columns: 180px 1fr !important; }
	.vu-info-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Dark mode overrides for mobile stacked rows ---------- */
@media (max-width: 720px) {
	html[data-theme="dark"] .modern-table tbody tr { background: #1c1f27; border-color: #333845; box-shadow: none; }
	html[data-theme="dark"] .modern-table tbody tr.odd { background: #242833; }
	html[data-theme="dark"] .modern-table tbody td.icon { border-top-color: #333845 !important; }
	html[data-theme="dark"] .modern-table tbody td[data-label]:not([data-label=""])::before { color: #a3a9b6; }
	html[data-theme="dark"] .modern-table tbody tr.perm-row { background: #1c1f27; border-color: #3a4358; }
	html[data-theme="dark"] table.table-mobile-stack tbody tr { background: #1c1f27; border-color: #333845; }
	html[data-theme="dark"] table.table-mobile-stack td[data-label]:not([data-label=""])::before { color: #a3a9b6; }
	html[data-theme="dark"] .userlist-modern-table > tbody > tr.userlist-main-row { background: #1c1f27; border-color: #333845; box-shadow: none; }
	html[data-theme="dark"] .userlist-modern-table > tbody > tr.userlist-main-row > td.userlist-identity-cell { border-bottom-color: #333845 !important; }
	html[data-theme="dark"] .userlist-modern-table > tbody > tr.userlist-main-row > td[data-label]:not([data-label=""])::before { color: #a3a9b6; }
	html[data-theme="dark"] .userlist-modern-table > tbody > tr.userlist-expand-row { background: #1c1f27; border-color: #3a4358; }
}