/* ==========================================================
   Tschakka App – Global Styles
   style.css
   ========================================================== */

/* ==========================================================
   Base Layout
   ========================================================== */

html,
body {
	min-height: 100%;
}

body {
	background-color: var(--myweek-bg);
	overflow-x: hidden;
}

.page-wrapper {
	max-width: 68.75rem; /* 1100px */
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ==========================================================
   Typography
   ========================================================== */

h1,
h2,
h3,
h4,
h5 {
	color: var(--myweek-green);
}

h5 {
	font-size: 1rem;
}

/* ==========================================================
   Global Link Theme (Projektweit)
   Alle Links grün – außer Tabbar (.tab-item)
   Buttons (.btn) bleiben unberührt
   ========================================================== */

:root {
	--app-link-color: var(--myweek-green);
	--app-link-hover: var(--myweek-green-dark);

	--focus-ring-size: 0.125rem;
	--focus-ring-radius: 0.25rem;

	/* Fallback für ältere Browser (kein color-mix Support) */
	--focus-ring-color: rgba(76, 175, 80, 0.5);

	/* Moderne Browser überschreiben den Fallback */
	--focus-ring-color: color-mix(
		in srgb,
		var(--app-link-color) 50%,
		transparent
	);
}

a:not(.tab-item):not(.btn),
a:not(.tab-item):not(.btn):visited {
	color: var(--app-link-color);
	text-decoration: none;
}

a:not(.tab-item):not(.btn):hover,
a:not(.tab-item):not(.btn):focus,
a:not(.tab-item):not(.btn):active {
	color: var(--app-link-hover);
	text-decoration: none;
}

a:not(.tab-item):not(.btn):focus-visible {
	outline: none;
	box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
	border-radius: var(--focus-ring-radius);
}

/* ==========================================================
   Global Table Theme (Bootstrap Override)
   ========================================================== */

.table {
	--bs-table-bg: var(--myweek-bg);
	--bs-table-striped-bg: var(--myweek-bg);

	--bs-table-hover-bg: #f0eadc; /* fallback */
	--bs-table-hover-bg: color-mix(in srgb, var(--myweek-bg) 92%, black);

	--bs-table-border-color: color-mix(
		in srgb,
		var(--myweek-green-dark) 35%,
		transparent
	);

	color: var(--myweek-green);
}

.table > :not(caption) > * > * {
	background-color: var(--myweek-bg);
	color: var(--myweek-green);
	border-color: var(--bs-table-border-color);
}

.table-hover > tbody > tr:hover > * {
	background-color: var(--bs-table-hover-bg);
	color: var(--myweek-green);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: var(--myweek-bg);
}

td,
th {
	border: none;
}

.current-day {
	font-weight: bold;
}

/* ==========================================================
   Global List-Group Theme
   ========================================================== */

.list-group {
	--bs-list-group-bg: transparent;
}

.list-group-item {
	background-color: var(--myweek-bg);
	color: var(--myweek-green);

	border-color: #f0eadc; /* fallback */
	border-color: color-mix(in srgb, var(--myweek-green-dark) 35%, transparent);

	padding-left: 1rem;
	padding-right: 1rem;
}

a.list-group-item,
a.list-group-item:visited,
a.list-group-item-action,
a.list-group-item-action:visited {
	color: var(--myweek-green);
	background-color: var(--myweek-bg);
	text-decoration: none;
}

a.list-group-item-action:hover,
a.list-group-item-action:focus,
a.list-group-item-action:active {
	color: var(--myweek-green);
	text-decoration: none;

	background-color: #f0eadc; /* fallback */
	background-color: color-mix(in srgb, var(--myweek-bg) 92%, black);
}

/* Konsistenter Focus-Ring */
.list-group-item:focus-within {
	outline: none;
	box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
	border-radius: var(--focus-ring-radius);
}

/* ==========================================================
   Links innerhalb von Tabellenzellen
   ========================================================== */

td ul {
	padding-left: 1.2rem;
	margin-bottom: 0;
}

td ul a {
	color: var(--myweek-green);
	text-decoration: none;
}

td ul a:hover,
td ul a:focus {
	color: var(--myweek-green-dark);
	text-decoration: none;
	font-weight: 600;
}

td ul a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
	border-radius: var(--focus-ring-radius);
}

/* ==========================================================
   App Icon
   ========================================================== */

.app-icon {
	max-width: 13.75rem;
	height: auto;
}

@media (max-width: 24rem) {
	.app-icon {
		max-width: 11.25rem;
	}
}