/* ===========================================================================
   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") ------------------------- */
	/* Portlets stehen am Desktop per float nebeneinander und haben feste
	   Pixelbreiten aus der Maskenkonfiguration. Mobil: volle Breite,
	   untereinander; breite Tabellen darin scrollen seitlich.              */
	div.portlet_outer {
		float: none !important;
		width: auto !important;
		max-width: 100%;
		height: auto !important;
		margin: 0 0 12px 0 !important;
		box-sizing: border-box;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	div.portlet_outer > div {
		max-width: 100%;
	}

	.commonbox {
		float: none;
		width: auto;
	}

	/* --- Felder: Beschriftung UEBER dem Feld, volle Breite ---------------- */
	/* Jedes Feld ist ein div.singleFieldArea mit fester Pixel-Breite UND
	   -Hoehe (PBWOAsso_htmlString.m); Beschriftung (descrArea*), Eingabe
	   (editArea/editAreaTA) und Bezeichnung (bezArea) liegen darin absolut
	   auf Pixelkoordinaten. Wird nur die Breite freigegeben, bricht der
	   Inhalt um, sprengt die feste Hoehe und ueberlappt das naechste Feld.
	   Daher mobil alles in den normalen Fluss holen.                       */
	div.singleFieldArea {
		float: none !important;
		display: block;
		position: relative;
		width: auto !important;
		height: auto !important;
		max-width: 100%;
		margin: 0 0 10px 0;
		clear: both;
	}

	div.singleFieldArea > div {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		max-width: 100%;
		line-height: 1.4 !important;
		text-indent: 0 !important;
		white-space: normal !important;
		overflow: visible !important;
	}

	/* Beschriftung klein und grau ueber dem Feld */
	div.singleFieldArea > div[class^="descrArea"] {
		padding: 0 0 3px 0;
		font-size: 13px;
		color: #607D8B;
	}

	div.singleFieldArea input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
	div.singleFieldArea select,
	div.singleFieldArea textarea {
		width: 100% !important;
		height: auto;
		min-height: 40px;
		box-sizing: border-box;
	}

	div.singleFieldArea textarea {
		min-height: 90px;
	}

	/* Feldraster-Tabellen (Masken mit <tab>) nicht breiter als der Schirm */
	div.detail table {
		max-width: 100%;
	}

	/* 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;
	}
}


/* ===========================================================================
   MENUE ALS AUFKLAPPER (nur Handy, Klassen setzt js/zz_mobile.js)
   Das lange Bereichsmenue steht sonst VOR dem Inhalt. Mobil ist es daher
   zugeklappt und wird ueber den Knopf "Menue" geoeffnet.
   =========================================================================== */
.mobile-menu-toggle {
	display: none;
}

@media screen and (max-width: 820px) {

	html.is-mobile .mobile-menu-toggle {
		display: block;
		width: calc(100% - 16px);
		margin: 8px;
		padding: 12px 16px;
		min-height: 44px;
		border: 0;
		border-radius: 6px;
		background: #009688;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		text-align: left;
		cursor: pointer;
	}

	html.is-mobile div.menu,
	html.is-mobile div.menu2 {
		display: none;
	}

	html.is-mobile.menu-open div.menu,
	html.is-mobile.menu-open div.menu2 {
		display: block;
		max-height: none;
		overflow: visible;
	}
}


/* ===========================================================================
   LOGIN (<= 820px)
   Login.css ist selbst responsive (auch am Handy geladen, siehe
   Scripts/LoginUser/htmlString.script). Hier nur: 16px verhindert, dass
   iOS Safari beim Antippen der Felder hineinzoomt (Login.css hat 15px).
   =========================================================================== */
@media screen and (max-width: 820px) {

	div.center {
		max-width: 520px;
	}

	div.center table td[align="center"] img {
		max-width: 240px;
	}

	div.center table td[style*="text-align:right"] {
		font-size: 15px;
		padding-top: 22px;
	}

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

	div.center .ke-btn {
		font-size: 18px;
		padding: 16px;
		min-height: 54px;
	}
}