/* ===========================================================================
   zz_mobile.css - Responsive Anpassungen fuer Smartphones und Tablets
   ---------------------------------------------------------------------------
   Wird von Session.m automatisch aus Resources/css/ geladen, alphabetisch
   sortiert und NACH IntarS_MaterialStyle.css + _Custom.css eingebunden.
   Der Praefix "zz_" stellt sicher, dass diese Regeln zuletzt greifen.

   Alle Regeln stehen in @media-Blocks: am Desktop aendert sich dadurch
   nichts. Zum Deaktivieren genuegt es, diese Datei zu entfernen.

   Breakpoints:
     <= 1024px  Tablet   - Menue schmaler, Inhalt nutzt Restbreite
     <=  820px  Handy    - Menue klappt nach oben, einspaltig
   =========================================================================== */


/* ===========================================================================
   TABLET (<= 1024px)
   Das Menue ist fest 200px breit, div.Home liegt absolut auf left:200px mit
   width:89% - das laeuft rechts heraus. Hier nur schmaler + Breite korrekt.
   =========================================================================== */
@media screen and (max-width: 1024px) {

	div.menu,
	div.menu2 {
		width: 160px;
		min-height: 0;
	}

	div.Home,
	div.Home2 {
		left: 160px;
		/* statt fixer 89%: exakt die Restbreite neben dem Menue */
		width: calc(100% - 180px);
		margin-left: 10px;
	}

	div.Home .detail,
	div.Home2 .detail {
		width: auto;
	}
}


/* ===========================================================================
   HANDY (<= 820px)
   Menue wird vom Seiten-Float zum normalen Block oben, Inhalt einspaltig.
   =========================================================================== */
@media screen and (max-width: 820px) {

	/* --- Grundlayout: kein horizontales Scrollen ------------------------- */
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	body {
		margin: 0;
	}

	/* --- Menue: aus dem Float loesen, oben anordnen ---------------------- */
	/* Wichtig: das Menue ist sehr lang (alle Bereiche). Ungebremst fuellt es
	   den ganzen Bildschirm und der eigentliche Inhalt ist erst nach langem
	   Scrollen erreichbar. Daher stark begrenzte Hoehe mit eigenem Scroll.  */
	div.menu,
	div.menu2 {
		float: none;
		width: 100%;
		min-height: 0;
		padding-top: 0;
		/* bewusst niedrig: der Inhalt soll ohne langes Scrollen sichtbar
		   sein. Das Menue behaelt seinen eigenen Scrollbereich.            */
		max-height: 22vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* sichtbare Abgrenzung zum Inhalt darunter */
		border-bottom: 3px solid #009688;
	}

	/* Das :after-Pseudoelement der Menuepunkte (Aufklapp-Pfeil) ist im
	   Custom-CSS mit margin-left:175px auf die 200px-Menuebreite gerechnet.
	   Mobil sitzt es dadurch falsch -> rechtsbuendig ausrichten.            */
	.unselectedMenuItem:after {
		position: absolute;
		right: 12px;
		margin-left: 0;
		margin-top: -20px;
	}

	/* Menueeintraege als Touch-Ziele: >= 44px Hoehe (Apple/Google HIG) */
	div.menu ul li a,
	div.menu2 ul li a {
		padding: 12px 10px;
		margin: 0 0 0 10px;
		line-height: 20px;
		min-height: 44px;
		box-sizing: border-box;
	}

	div.menu ul ul li a,
	div.menu2 ul ul li a {
		padding: 12px 0 12px 20px;
		line-height: 20px;
		min-height: 44px;
		/* Untermenue-Eintraege duerfen auf dem Handy umbrechen statt
		   abgeschnitten zu werden (Framework setzt nowrap + hidden) */
		white-space: normal;
		overflow: visible;
	}

	div.menu ul li ul,
	div.menu2 ul li ul {
		margin: 4px 0 0 12px;
	}

	/* --- Inhalt: absolute Positionierung neben dem Menue aufheben -------- */
	div.Home,
	div.Home2 {
		position: static;
		left: auto;
		width: auto;
		margin: 10px 8px;
	}

	div.Home .detail,
	div.Home2 .detail {
		width: auto;
		margin: 0;
		padding: 5px;
	}

	/* =====================================================================
	   KOPFBEREICH
	   Aufbau im HTML: eine <table class="Navigation"> mit einer Zeile:
	     td 1 = Home-Icon + Favoriten (gepinnte Module)
	     td 2 = Platzhalter (width=80)
	     td 3 = Suche + Kalender/Profil/Hilfe-Icons
	   Auf dem Handy passt das nicht nebeneinander. Loesung: die Tabelle
	   und ihre Zellen als Bloecke rendern, sodass die drei Bereiche
	   UNTEREINANDER stehen - Favoriten bekommen eine eigene Zeile.
	   ===================================================================== */
	table.Navigation {
		display: block;
		width: 100%;
		padding-left: 0;
		height: auto;
	}

	table.Navigation tbody,
	table.Navigation tr {
		display: block;
		width: 100%;
	}

	/* Platzhalterzelle (width=80) entfaellt mobil */
	table.Navigation td[width="80"] {
		display: none;
	}

	table.Navigation td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
		text-align: left !important;
		padding: 0;
	}

	/* --- Favoritenzeile: waagerecht wischbar ----------------------------- */
	/* Die Favoriten (Home, Projekte, Benutzer, Auftrag, ...) bleiben in
	   EINER Zeile und werden seitlich gewischt. Auf einer Tabellenzelle
	   wirkt overflow nur, wenn sie als Block gerendert wird - siehe oben. */
	table.Navigation td:first-child {
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		padding: 0 4px;
		/* duenne Trennlinie zur Suchzeile darunter */
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	/* Reiter kompakter: 21px padding + 68px Zeilenhoehe sind mobil zu viel */
	a.PBActionLinkModul,
	a.PBActionLinkModulActive {
		display: inline-block;
		padding: 0 12px;
		line-height: 44px;
		font-size: 15px;
		border-bottom-width: 3px;
	}

	/* Die Kopf-Icons sind absolut auf top:16px gesetzt - passt zur 68px
	   hohen Desktop-Leiste, nicht zur kompakten mobilen.                   */
	.topicon {
		position: static;
		top: auto;
		margin-left: 0;
		vertical-align: middle;
	}

	/* --- Suchzeile ------------------------------------------------------- */
	table.Navigation td:last-child {
		padding: 6px 8px;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.search-container {
		display: inline-flex;
		align-items: center;
		max-width: 100%;
	}

	/* Die Tastenkuerzel-Hinweise (STRG + K) sind am Handy sinnlos */
	.search-container .shortcut {
		display: none;
	}

	input#search {
		width: 100%;
		min-width: 120px;
		margin-right: 8px !important;
	}

	/* Suchergebnis-Popup: 160px sind auf dem Handy zu schmal */
	#results {
		width: auto;
		min-width: 200px;
		max-width: calc(100vw - 16px);
		left: 8px;
		right: 8px;
		top: auto;
	}

	/* Produktlogo kostet auf dem Handy nur Platz */
	.header_logo {
		display: none;
	}

	/* Profil-Popup: rechts fixiert wuerde herauslaufen */
	#profile {
		right: 8px;
		width: auto;
		min-width: 200px;
		max-width: calc(100vw - 16px);
	}

	/* --- Tabellen: seitlich scrollbar statt Seite sprengen --------------- */
	/* .content ist die Hauptmaske (TopDetail/TableView/Detail).
	   Statt die Tabelle umzubrechen - das zerstoert den Spaltenbezug -
	   wird der Bereich horizontal scrollbar gemacht.                       */
	table.content {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- Buttonleiste: umbrechen statt abschneiden ----------------------- */
	table.Buttons {
		height: auto;
		padding: 6px;
	}

	table.Buttons a,
	table.Buttons .PBActionLinkSmallDisabledNoBlock {
		display: inline-block;
		margin: 3px 2px;
		padding: 10px 14px;
		min-height: 40px;
		box-sizing: border-box;
	}

	/* --- Entwickler-Buttons (.adminButtons) ------------------------------- */
	/* Das sind KEINE Favoriten, sondern die Root-Werkzeuge aus
	   htmlString_DeveloperButtons (reloadScripts, Debug, Logs, Translations).
	   Nur fuer Admins sichtbar - das bleibt so. Sie sollen aber nicht den
	   Bildschirm blockieren: Custom-CSS setzt sie auf position:fixed unten
	   rechts, wodurch sie am Handy quer aus dem Bild laufen.
	   Mobil daher: ans Seitenende, klein, waagerecht wischbar.             */
	.adminButtons {
		position: static !important;
		float: none !important;
		bottom: auto !important;
		right: auto !important;
		height: auto !important;
		margin: 24px 0 0 0 !important;
		padding: 6px 8px !important;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		background-color: #ECEFF1;
		border-top: 1px solid #CFD8DC;
		opacity: .75;
	}

	.adminButtons a,
	.PBRegisterNeutral .adminButtons a.PBActionLinkSmallNoBlock {
		display: inline-block !important;
		min-width: 32px;
		margin: 0 3px !important;
		padding: 6px 8px !important;
		font-size: 12px;
		line-height: 20px;
		text-align: center;
		box-sizing: border-box;
	}

	/* --- Eingabefelder --------------------------------------------------- */
	/* 16px verhindert den automatischen Zoom von iOS Safari beim Fokus. */
	input[type="text"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
		max-width: 100%;
		box-sizing: border-box;
	}

	input[type="search"] {
		height: auto;
		padding: 6px;
	}

	/* Checkboxen/Radios als brauchbare Touch-Ziele */
	input[type="checkbox"],
	input[type="radio"] {
		width: 20px;
		height: 20px;
		vertical-align: middle;
	}

	/* --- Registerleiste (Org / Verkauf / Fortschritt / ...) --------------- */
	/* Custom-CSS fixiert die Hoehe auf 43px; mobil brauchen die Reiter
	   mehrere Zeilen, sonst werden sie abgeschnitten.                      */
	div.PBRegisterLink {
		height: auto !important;
		float: none;
		width: auto;
		padding-left: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	ul.PBRegisterLink {
		display: flex;
		flex-wrap: nowrap;
		padding-left: 0;
		margin: 0;
	}

	li.PBRegisterLink,
	li.PBRegisterNeutral {
		float: none;
		flex: 0 0 auto;
	}

	li.PBRegisterLink a,
	li.PBRegisterLink span,
	li.PBRegisterNeutral a {
		display: inline-block;
		padding: 10px 12px;
		white-space: nowrap;
	}

	/* --- Portlets / Boxen (z.B. "Meine Aufgaben") ------------------------- */
	/* Die Boxen haben oft feste Pixelbreiten aus der Maskenkonfiguration;
	   mobil muessen sie auf die Bildschirmbreite zusammenschrumpfen,
	   sonst ueberlappen die Inhalte (siehe Screenshot).                     */
	div.portlet_outer {
		width: auto !important;
		max-width: 100%;
		margin: 0 0 10px 0;
		overflow-x: auto;
	}

	/* Feldbereiche nebeneinander -> untereinander */
	div.singleFieldArea {
		float: none !important;
		width: auto !important;
		max-width: 100%;
		position: static;
	}

	/* Kopfzeile der Boxen: negatives margin sprengt mobil den Rand */
	.header {
		margin: 0;
		padding: 8px;
	}

	/* --- Trefferlisten-Buttonleiste (Lupe, Blaettern) --------------------- */
	table[summary="TableView-Buttons"] {
		width: 100%;
		padding: 6px !important;
		margin-bottom: 0 !important;
	}

	/* --- DataTables: Bedienelemente umbrechen lassen ---------------------- */
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_paginate {
		float: none;
		width: auto;
		text-align: left;
		white-space: normal;
	}

	table.dataTable {
		width: 100% !important;
	}

	/* --- Bilder nie breiter als der Viewport ----------------------------- */
	img {
		max-width: 100%;
		height: auto;
	}
}


/* ===========================================================================
   LOGIN (<= 820px)
   Login.css / Login_Mobile.css setzen div.center auf feste Pixelbreite
   (620px) mit negativem margin-left - auf dem Handy laeuft das heraus.
   =========================================================================== */
@media screen and (max-width: 820px) {

	div.center {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		margin: 24px 12px;
		padding: 16px;
		box-sizing: border-box;
	}

	div.center table {
		width: 100%;
		font-size: 16px;
	}

	div.center input,
	div.center select,
	div.center textarea {
		width: 100%;
		font-size: 16px;
		padding: 10px;
		box-sizing: border-box;
	}

	/* Login_Mobile.css setzt hier 40-60px - auf dem Handy viel zu gross */
	div.center td {
		font-size: 16px !important;
		height: auto !important;
	}

	div.center input[type="text"],
	div.center input[type="password"] {
		font-size: 16px !important;
	}

	div.center img {
		max-width: 70%;
		height: auto;
	}

	.copyright {
		position: static;
		top: auto;
		font-size: 12px;
		margin: 16px 12px;
	}
}