/*
 * Modern app layout, adapted from the ara Social Reporting dashboard
 * (~/projects/ara-social-monitor/web/modern.css).
 * Loaded after ara.css: sidebar, floating app bar, rounded tiles on a warm grey
 * canvas, pill controls. Colors and typography stay ara CI, the logo is never
 * placed on the left.
 */

:root {
	--canvas: #ece7e4;
	--tile: #ffffff;
	--tile-2: var(--ara-warm-white);
	--rad: 24px;
	--rad-s: 16px;
	--shadow: 0 1px 2px rgba(35, 35, 40, 0.04), 0 8px 24px rgba(35, 35, 40, 0.05);
	--side: 248px;
	--red-gradient: radial-gradient(130% 120% at 100% 0%, #e22a41 0%, var(--ara-red) 50%, #9b1022 100%);

	--bs-body-bg: var(--canvas);
	--bs-border-radius: var(--rad-s);
	--bs-border-radius-sm: 12px;
	--bs-border-radius-lg: var(--rad);
	--bs-border-radius-pill: 999px;
}

html,
body {
	background: var(--canvas);
}

body {
	display: block;
	min-height: 100vh;
}

/* ---------- App frame ---------- */

.app {
	display: grid;
	grid-template-columns: var(--side) minmax(0, 1fr);
	gap: 20px;
	max-width: 1520px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 20px;
}

.app-guest {
	grid-template-columns: minmax(0, 1fr);
	max-width: 1240px;
}

.side {
	position: sticky;
	top: 20px;
	align-self: start;
	height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 18px 18px;
	background: var(--tile);
	border-radius: var(--rad);
	box-shadow: var(--shadow);
	overflow-y: auto;
}

.side-title {
	padding: 0 10px 18px;
	font: 500 26px/1.05 var(--ara-font-serif);
	color: var(--ara-red);
}

.side-title b {
	display: block;
	margin-top: 8px;
	font: 700 11px/1.2 var(--ara-font-sans);
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: var(--ara-muted);
}

.side-label {
	padding: 18px 10px 8px;
	font: 700 10.5px/1 var(--ara-font-sans);
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: var(--ara-muted);
}

.side a.nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 500;
	color: #4b4a50;
	text-decoration: none;
}

.side a.nav svg {
	flex: none;
	width: 20px;
	height: 20px;
}

.side a.nav:hover {
	background: var(--tile-2);
	color: var(--ara-soft-black);
}

.side a.nav[aria-current="page"] {
	background: var(--tile-2);
	color: var(--ara-soft-black);
	font-weight: 700;
}

.side a.nav[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 8px;
	bottom: 8px;
	width: 5px;
	border-radius: 0 6px 6px 0;
	background: var(--ara-red);
}

.side a.nav[aria-current="page"] svg {
	color: var(--ara-red);
}

.side-card {
	position: relative;
	display: grid;
	gap: 10px;
	margin-top: auto;
	padding: 20px;
	border-radius: 20px;
	color: #fff;
	background: radial-gradient(120% 90% at 100% 0%, #e0283f 0%, var(--ara-red) 45%, #8f0e20 100%);
	overflow: hidden;
}

/* decorative ring, like the dashboard's sidebar card */
.side-card::after {
	content: "";
	position: absolute;
	inset: auto -40px -60px auto;
	width: 180px;
	height: 180px;
	border: 28px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
}

.side-card .claim {
	font: 500 21px/1.1 var(--ara-font-serif);
}

.side-card .stand {
	position: relative;
	z-index: 1;
	font-size: 12px;
	opacity: 0.9;
	word-break: break-word;
}

.side-card a {
	position: relative;
	z-index: 1;
	font: 700 12px/1 var(--ara-font-ext);
	color: #fff;
	text-decoration: none;
}

.mainc {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.appbar {
	position: sticky;
	top: 20px;
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	padding: 12px 14px 12px 22px;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-radius: var(--rad);
	box-shadow: var(--shadow);
}

.appbar .title {
	margin-right: auto;
	font: 700 11.5px/1 var(--ara-font-sans);
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: var(--ara-muted);
}

.appbar .title b {
	color: var(--ara-soft-black);
}

.appbar .logo {
	display: flex;
	align-items: center;
	padding: 6px 8px;
}

.appbar .logo img {
	display: block;
	width: auto;
	height: 26px;
}

/* segmented pill switch (language) */
.seg {
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	background: var(--tile-2);
	border-radius: 999px;
}

.seg-btn {
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ara-soft-black);
	text-decoration: none;
}

.seg-btn:hover {
	color: var(--ara-red);
}

.seg-btn.active {
	background: var(--ara-red);
	color: #fff;
}

/* ---------- Page content as tiles ---------- */

main.ara-main {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.hero {
	padding: 30px 30px 26px;
	background: var(--tile);
	border-radius: var(--rad);
	box-shadow: var(--shadow);
}

.hero .ara-headline {
	font-size: clamp(34px, 3.6vw, 48px);
}

.hero-intro {
	max-width: 62ch;
	margin: 12px 0 0;
	color: var(--ara-muted);
}

.page {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* Bootstrap containers inside the frame use the full column */
.page .container {
	max-width: none;
	margin: 0 !important;
	padding: 0;
}

.page .row {
	--bs-gutter-x: 20px;
}

.card {
	--bs-card-bg: var(--tile);
	--bs-card-border-radius: var(--rad);
	--bs-card-inner-border-radius: var(--rad);
	--bs-card-cap-bg: transparent;
	box-shadow: var(--shadow) !important;
}

/* top level cards should not push each other apart, the gap does that */
.page > .card,
.page > div > .card,
.page > .mt-5 {
	margin-top: 0 !important;
}

/* nested cards are warm tiles, like the KPI cells of the dashboard */
.card .card {
	--bs-card-bg: var(--tile-2);
	--bs-card-border-radius: var(--rad-s);
	--bs-card-inner-border-radius: var(--rad-s);
	border: 0;
	box-shadow: none !important;
}

.card-footer {
	background: transparent;
	border-top: 1px solid rgba(35, 35, 40, 0.08);
}

.card-img-top {
	border-radius: var(--rad-s) var(--rad-s) 0 0;
}

/* ---------- Tables ---------- */

.page table {
	border-collapse: separate;
	border-spacing: 0;
	background: var(--tile);
	border-radius: var(--rad);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.card table {
	background: var(--tile-2);
	border-radius: var(--rad-s);
	box-shadow: none;
}

.table > thead th,
table th {
	background: transparent;
	border-bottom: 1px solid rgba(35, 35, 40, 0.1);
	color: var(--ara-muted);
}

table th:first-child,
table td:first-child {
	padding-left: 22px;
}

table th:last-child,
table td:last-child {
	padding-right: 22px;
}

table tbody tr:last-child td {
	border-bottom: 0;
}

table tbody tr:hover td {
	background: rgba(245, 240, 238, 0.7);
}

/* ---------- Controls as pills ---------- */

.btn {
	--bs-btn-border-radius: 999px;
	--bs-btn-padding-x: 20px;
	letter-spacing: 0.06em;
}

.btn-sm {
	--bs-btn-padding-x: 12px;
}

.btn-primary {
	box-shadow: 0 6px 16px rgba(200, 20, 45, 0.18);
}

.form-control,
.form-select {
	background-color: var(--tile-2);
	border-color: transparent;
	border-radius: 14px;
}

.form-control:focus,
.form-select:focus {
	background-color: var(--tile);
}

/* search: one pill with the buttons inside, like the dashboard switches */
.input-group {
	gap: 4px;
	padding: 4px;
	background: var(--tile-2);
	border-radius: 999px;
}

.input-group > .form-control {
	background: transparent;
	box-shadow: none;
}

.input-group > .form-control,
.input-group > .btn {
	border-radius: 999px !important;
}

.input-group > .btn-secondary {
	border-color: transparent;
}

.input-group-lg > .form-control {
	padding-left: 20px;
}

.badge {
	--bs-badge-border-radius: 999px;
	padding: 0.4em 0.75em;
}

.alert {
	padding: 16px 22px;
	border: 0;
	border-radius: var(--rad-s);
	background: var(--tile);
	box-shadow: var(--shadow);
}

.alert-danger {
	background: var(--red-gradient);
	color: #fff;
}

.alert-warning {
	background: var(--tile-2);
	box-shadow: none;
}

#dropZone {
	border-radius: 20px;
}

.progress-bar {
	border-radius: 999px !important;
}

/* ---------- Fundament: rounded red tile at the end of the column ---------- */

.ara-fundament {
	margin-top: 0;
	padding: 30px 32px 22px;
	border-radius: var(--rad);
}

/* ---------- Login: red gradient tile + form tile ---------- */

.ara-login {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 20px;
	flex: 1 0 auto;
}

.ara-login-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 440px;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--rad);
	background: var(--red-gradient);
	color: #fff;
	overflow: hidden;
}

.ara-login-hero::after {
	content: "";
	position: absolute;
	top: -90px;
	right: -90px;
	width: 300px;
	height: 300px;
	border: 44px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
}

/* typography on Leading Red is white (guideline: Farben) */
.ara-login-hero .ara-eyebrow,
.ara-login-hero .ara-headline {
	color: #fff;
}

.ara-login-hero .ara-headline {
	position: relative;
	z-index: 1;
	font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.ara-login-intro {
	position: relative;
	z-index: 1;
	max-width: 46ch;
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.9);
}

.ara-login-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3.5vw, 44px);
	background: var(--tile);
	border-radius: var(--rad);
	box-shadow: var(--shadow);
}

.ara-login-card h2 {
	margin-bottom: 24px;
	font-size: 1.9rem;
}

/* ---------- Mobile ---------- */

@media (max-width: 980px) {
	.app {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 12px;
		padding: 12px;
	}

	.side {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
		height: auto;
		padding: 14px;
	}

	.side-title {
		margin-right: auto;
		padding: 0 8px;
		font-size: 19px;
	}

	.side-title b,
	.side-label,
	.side-card {
		display: none;
	}

	.side a.nav {
		padding: 9px 12px;
		font-size: 14px;
	}

	.side a.nav[aria-current="page"]::before {
		display: none;
	}

	.mainc,
	main.ara-main,
	.page {
		gap: 12px;
	}

	.appbar {
		top: 8px;
		padding: 10px 12px 10px 18px;
	}

	.ara-login {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.ara-login-hero {
		min-height: 0;
	}
}

@media (max-width: 640px) {
	.side a.nav svg {
		display: none;
	}

	.hero,
	.ara-fundament {
		padding: 20px 18px;
		border-radius: 20px;
	}

	.appbar {
		position: static;
	}

	.appbar .title {
		font-size: 10.5px;
	}

	.page table {
		display: block;
		overflow-x: auto;
	}
}

@media print {
	.side,
	.appbar {
		display: none;
	}

	.app {
		display: block;
		padding: 0;
	}
}

/* ---------- KPI strip, first tile red (like the dashboard) ---------- */

.kpis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 22px;
}

.kpi {
	position: relative;
	display: grid;
	align-content: space-between;
	gap: 8px;
	min-height: 150px;
	padding: 20px 20px 18px;
	background: var(--tile-2);
	border-radius: 20px;
	min-width: 0;
}

.kpi::after {
	content: "↗";
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid #cfc3bd;
	border-radius: 50%;
	font-size: 15px;
	color: var(--ara-soft-black);
}

.kpi-label {
	padding-right: 40px;
	font: 700 11px/1.2 var(--ara-font-sans);
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: var(--ara-soft-black);
}

.kpi-value {
	font: 500 clamp(34px, 3.2vw, 46px)/1 var(--ara-font-serif);
	color: var(--ara-soft-black);
}

.kpi-hint {
	overflow: hidden;
	font-size: 12.5px;
	color: var(--ara-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kpi:first-child {
	background: var(--red-gradient);
}

.kpi:first-child .kpi-label,
.kpi:first-child .kpi-value,
.kpi:first-child .kpi-hint {
	color: #fff;
}

.kpi:first-child::after {
	background: #fff;
	border-color: #fff;
	color: var(--ara-red);
}

/* active output formats in the processor */
.card .card.task-on {
	--bs-card-bg: transparent;
	background: var(--red-gradient);
	color: #fff;
}

.card .card.task-on .form-check-label {
	color: #fff;
	font-weight: 700;
}

.card .card.task-on .badge.bg-light {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
}

.card .card.task-on .badge.bg-secondary,
.card .card.task-on .badge.bg-success,
.card .card.task-on .badge.bg-warning,
.card .card.task-on .badge.bg-primary {
	background: #fff !important;
	color: var(--ara-red) !important;
}

.card .card.task-on .form-check-input:checked {
	background-color: #fff;
	border-color: #fff;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c8142d'/%3e%3c/svg%3e");
}

/* long hints in badges may wrap instead of widening the page */
.card .header .badge {
	white-space: normal;
	text-align: left;
}

@media (max-width: 640px) {
	.kpis {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.kpi-value {
		font-size: 32px;
	}

	/* app bar: title and logo in one row, language switch below (like the dashboard) */
	.appbar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
	}

	.appbar .title {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
	}

	.appbar .logo {
		grid-column: 2;
		grid-row: 1;
	}

	.appbar .seg {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.kpi {
		min-height: 0;
	}
}

/* "Alle auswählen" */
.ara-select-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ara-select-all .form-check-input {
	margin: 0;
}

.form-check-input:indeterminate {
	background-color: var(--ara-red);
	border-color: var(--ara-red);
}

/* channels sharing one output format */
.task-desc {
	margin: 4px 0 8px;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--ara-muted);
}

.card .card.task-on .task-desc {
	color: rgba(255, 255, 255, 0.85);
}

/* long FTP paths wrap inside the job tile */
.badge.task-path {
	white-space: normal;
	word-break: break-all;
	text-align: left;
}

/* season switch above the jobs */
.season-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 18px;
	padding: 14px 18px;
	background: var(--tile-2);
	border-radius: var(--rad-s);
}

.season-bar .seg {
	background: var(--tile);
}

.season-label {
	font: 700 11px/1 var(--ara-font-sans);
	letter-spacing: 0.075em;
	text-transform: uppercase;
	color: var(--ara-red);
}

.season-hint {
	font-size: 0.75rem;
	color: var(--ara-muted);
}

button.seg-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
}

button.seg-btn.active {
	background: var(--ara-red);
	color: #fff;
}

.season-bar .seg {
	flex-wrap: wrap;
	max-width: 100%;
}

.season-bar .seg-btn {
	white-space: nowrap;
}

/* warning on the index page if a folder of the app is not accessible */
.folder-warning {
	padding: 16px 20px 0;
}

.folder-warning-box {
	max-width: 900px;
	margin: 0 auto;
	padding: 16px 18px;
	border: 1px solid rgba(226, 42, 65, 0.35);
	border-left: 4px solid var(--ara-red);
	border-radius: var(--rad-s);
	background: #fff8f8;
}

.folder-warning-head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ara-red);
	font: 700 13px/1.3 var(--ara-font-sans);
}

.folder-warning-text {
	margin: 6px 0 0;
	color: var(--ara-muted);
	font-size: 0.85rem;
}

.folder-warning-list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}

.folder-warning-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 0.8rem;
}

.folder-warning-list code {
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(226, 42, 65, 0.1);
	color: var(--ara-red);
}

.folder-warning-path {
	color: var(--ara-muted);
	word-break: break-all;
}

.folder-warning-reason {
	font-weight: 700;
	color: var(--ara-red);
}