/* css/kacheln.css - einheitliches Kachel-Layout fuer Uebersichtsseiten
   (05.10.2026), angelehnt an die Funktionskacheln der Partnerportal-
   Startseite (.pp-funktion in css/partnerportal.css): ganze Kachel klickbar,
   Symbolfeld links, Titel + Kurzbeschreibung, Rahmen/Schatten beim
   Ueberfahren. Ueber framework/js/head.php auf jeder Seite (versioniert)
   geladen. Nur zentrale Farbvariablen (Dunkelmodus). Hover setzt immer
   Hintergrund UND Schriftfarbe (Hover-Kontrast-Regel).

   1. .tc-adm-*      gruppierte Administrationsuebersicht (administration/index.php)
   2. .tc-admin-hub-grid  bestehende Unterseiten-Hubs (Administration >
      Warenwirtschaft/Kooperationspartner/API-Konfiguration/Datenbankpflege,
      Warenwirtschaft > Bewegungen/Bestaende): dasselbe Erscheinungsbild ohne
      Markup-Umbau. Gilt nur fuer Karten, deren Titel einen Link enthaelt
      (Kennzahl-Karten ohne Link bleiben unveraendert). */

/* ---- 1. Gruppierte Administrationsuebersicht ---- */
.tc-adm-uebersicht { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.tc-adm-gruppe-titel {
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-border);
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
}
.tc-adm-kacheln,
.tc-admin-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

a.tc-adm-kachel,
a.tc-adm-kachel:link,
a.tc-adm-kachel:visited,
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a) {
	box-sizing: border-box;
	min-height: 92px;
	margin: 0;
	background-color: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium, 8px);
	box-shadow: var(--shadow-small);
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
a.tc-adm-kachel,
a.tc-adm-kachel:link,
a.tc-adm-kachel:visited {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
}
a.tc-adm-kachel:hover,
a.tc-adm-kachel:focus-visible {
	background-color: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-medium, 0 4px 14px rgba(0, 0, 0, .08));
	text-decoration: none;
}
a.tc-adm-kachel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.tc-adm-kachel-symbol {
	flex: 0 0 40px;
	height: 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-info-subtle);
	color: var(--color-primary);
}
.tc-adm-kachel-symbol svg { width: 22px; height: 22px; }
.tc-adm-kachel-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tc-adm-kachel-titel { font-weight: 650; font-size: 15.5px; color: var(--color-text); }
.tc-adm-kachel-beschreibung { font-size: 13.5px; color: var(--color-text-muted); }

/* ---- 2. Bestehende Unterseiten-Hubs im selben Erscheinungsbild ----
   Die Karte ist bereits position:relative und ueber .tc-admin-hub-titel a::before
   vollstaendig klickbar (css/styles.css); das Symbol im Titel wird hier als
   Symbolfeld an den linken Kartenrand gesetzt. */
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a) {
	padding: 14px 16px 14px 68px;
}
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:hover),
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:focus-visible) {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-medium, 0 4px 14px rgba(0, 0, 0, .08));
}
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel {
	font-size: 15.5px;
	font-weight: 650;
	margin: 0 0 3px;
}
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel > .tc-icon {
	position: absolute;
	left: 16px;
	top: 14px;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 9px;
	margin: 0;
	border-radius: 10px;
	background-color: var(--color-info-subtle);
	color: var(--color-primary);
}
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel a,
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel a:hover,
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel a:focus-visible {
	color: var(--color-text);
	background-color: transparent;
	text-decoration: none;
}
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-beschreibung {
	font-size: 13.5px;
	color: var(--color-text-muted);
}
/* Lange Einzelwoerter (z. B. "Produkt-/Konditionszuordnung") umbrechen statt ueberzulaufen. */
.tc-adm-kachel-titel, .tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel { overflow-wrap: anywhere; hyphens: auto; }
/* Einzelne breite Hub-Karte (z. B. Datenbankpflege > Benutzer-Massenpflege) ueber die volle Zeile. */
.tc-admin-hub-grid > .tc-form-card--breit { grid-column: 1 / -1; }

/* ---- 3. Hover-Effekt wie Partnerportal-Startseite (css/partnerportal.css,
   Block "02.10.2026: Startseite"): gleich hohe Kacheln je Zeile, Kachel hebt
   sich an, weicher Schatten, Akzentleiste oben, Symbol fuellt sich und kippt
   leicht. Dunkle Schrift auf heller Flaeche bleibt erhalten. ---- */
.tc-adm-kacheln, .tc-admin-hub-grid { grid-auto-rows: 1fr; }
a.tc-adm-kachel { height: 100%; }
a.tc-adm-kachel,
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a) {
	position: relative;
	overflow: hidden;
	transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
a.tc-adm-kachel::before,
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a)::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--color-primary), #5B8DEF);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s cubic-bezier(.2, .8, .2, 1);
	pointer-events: none;
}
a.tc-adm-kachel:hover,
a.tc-adm-kachel:focus-visible,
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:hover),
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:focus-visible) {
	transform: translateY(-4px);
	background-color: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-primary);
	box-shadow: 0 12px 28px rgba(31, 58, 138, .16), 0 2px 6px rgba(31, 58, 138, .08);
}
a.tc-adm-kachel:hover::before,
a.tc-adm-kachel:focus-visible::before,
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:hover)::before,
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:focus-visible)::before { transform: scaleX(1); }

a.tc-adm-kachel:hover .tc-adm-kachel-titel,
a.tc-adm-kachel:focus-visible .tc-adm-kachel-titel,
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel a:hover,
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel a:focus-visible { color: var(--color-primary-dark); }

.tc-adm-kachel-symbol,
.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel > .tc-icon {
	transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .22s ease, color .22s ease;
}
a.tc-adm-kachel:hover .tc-adm-kachel-symbol,
a.tc-adm-kachel:focus-visible .tc-adm-kachel-symbol,
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:hover) > .tc-admin-hub-titel > .tc-icon,
.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:focus-visible) > .tc-admin-hub-titel > .tc-icon {
	background-color: var(--color-primary);
	color: #fff;
	transform: scale(1.08) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
	a.tc-adm-kachel, a.tc-adm-kachel::before, .tc-adm-kachel-symbol,
	.tc-admin-hub-grid > .tc-form-card, .tc-admin-hub-grid > .tc-form-card::before,
	.tc-admin-hub-grid > .tc-form-card > .tc-admin-hub-titel > .tc-icon { transition: none; }
	a.tc-adm-kachel:hover, a.tc-adm-kachel:hover .tc-adm-kachel-symbol,
	.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:hover),
	.tc-admin-hub-grid > .tc-form-card:has(> .tc-admin-hub-titel a:hover) > .tc-admin-hub-titel > .tc-icon { transform: none; }
}

/* ---- 4. Reiter (05.10.2026) - Rollenbearbeitung und Benutzerseiten
   (tc_benutzer_kontextkopf()); hier zentral, da global geladen. ---- */
.tc-ro-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-medium, 8px); background-color: var(--color-surface); }
button.tc-ro-reiter-knopf, a.tc-ro-reiter-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius-small, 6px); background-color: transparent; color: var(--color-text); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; }
button.tc-ro-reiter-knopf .tc-icon, a.tc-ro-reiter-knopf .tc-icon { width: 18px; height: 18px; }
button.tc-ro-reiter-knopf:hover, button.tc-ro-reiter-knopf:focus-visible, a.tc-ro-reiter-knopf:hover, a.tc-ro-reiter-knopf:focus-visible { background-color: var(--color-background); color: var(--color-text); border-color: var(--color-border-strong); text-decoration: none; }
button.tc-ro-reiter-knopf--aktiv, button.tc-ro-reiter-knopf--aktiv:hover, button.tc-ro-reiter-knopf--aktiv:focus-visible, a.tc-ro-reiter-knopf--aktiv, a.tc-ro-reiter-knopf--aktiv:hover, a.tc-ro-reiter-knopf--aktiv:focus-visible { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); }
button.tc-ro-reiter-knopf:disabled { opacity: .45; cursor: not-allowed; background-color: transparent; color: var(--color-text); }
a.tc-ro-reiter-knopf--link { margin-left: auto; }
.tc-ro-reiter-zahl { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 999px; background-color: var(--color-background); color: var(--color-text); font-size: 13px; font-weight: 700; text-align: center; }
.tc-ro-reiter-knopf--aktiv .tc-ro-reiter-zahl { background-color: rgba(255, 255, 255, .25); color: #fff; }
.tc-ro-speichern .tc-form-hinweis { margin-left: 10px; }
@media (max-width: 767px) {
	/* Smartphone: kompaktes Zwei-Spalten-Raster statt vieler ungleich hoher Zeilen */
	.tc-ro-reiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	button.tc-ro-reiter-knopf > span:not(.tc-ro-reiter-zahl), a.tc-ro-reiter-knopf > span:not(.tc-ro-reiter-zahl) { min-width: 0; overflow-wrap: break-word; text-align: left; }
	/* Symbole ausblenden, damit die Namen ungeteilt in die Spalte passen */
	button.tc-ro-reiter-knopf .tc-icon, a.tc-ro-reiter-knopf .tc-icon { display: none; }
	.tc-admin-kontext--reiter { padding: 12px; }
	button.tc-ro-reiter-knopf, a.tc-ro-reiter-knopf { min-width: 0; gap: 6px; justify-content: flex-start; min-height: 44px; height: auto; margin: 0; padding: 8px 10px; font-size: 15px; line-height: 1.2; }
	.tc-ro-reiter-zahl { min-width: 20px; padding: 1px 6px; }
	a.tc-ro-reiter-knopf--link { margin-left: 0; }
	.tc-ro-reiter-zahl { margin-left: auto; }
}
.tc-admin-kontext--reiter .tc-ro-reiter { margin: 0; padding: 8px 0 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; }
@media (max-width: 479px) {	/* schmale Smartphones: einspaltige Liste - jeder Reiter eine volle Zeile, Zahl rechts */	.tc-ro-reiter { grid-template-columns: 1fr; }	button.tc-ro-reiter-knopf .tc-icon, a.tc-ro-reiter-knopf .tc-icon { display: inline-block; }}