/* NC Portal Dashboard – Frontend – NC CI – WCAG 2.1 AA */

.ncpd-wrap {
	--ncpd-petrol:      #0090A7;
	--ncpd-petrol-dark: #04777C;
	--ncpd-rot:         #AC144C;
	--ncpd-gelb:        #f5b20f;
	--ncpd-gruen:       #4d7c15; /* dunkler als das CI-Grün: 4.5:1 auf Weiß */
	--ncpd-text:        #2a2a2a;
	--ncpd-text-light:  #706F6F;
	--ncpd-bg:          #f5f5f5;
	--ncpd-white:       #fff;
	--ncpd-border:      #e5e7eb;
	--ncpd-radius:      10px;
	--ncpd-shadow:      0 2px 12px rgba(0, 0, 0, .08);

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ncpd-text);
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem;
	box-sizing: border-box;
}

.ncpd-wrap *,
.ncpd-wrap *::before,
.ncpd-wrap *::after { box-sizing: border-box; }

.ncpd-wrap *:focus-visible {
	outline: 3px solid var(--ncpd-petrol);
	outline-offset: 3px;
}

.ncpd-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ncpd-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	height: 2.2rem;
	padding: 0 .4rem;
	/* Petrol #0090A7 auf Weiss ergibt nur 3.83:1 — fuer Text zu wenig.
	   Petrol-Dark #04777C liegt bei 5.34:1 und erfuellt WCAG 1.4.3 AA. */
	background: var(--ncpd-petrol-dark);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .05em;
	border-radius: 6px;
}

/* ── Header ─────────────────────────────────────────────── */

.ncpd-header {
	background: var(--ncpd-white);
	border: 1px solid var(--ncpd-border);
	border-radius: var(--ncpd-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--ncpd-shadow);
}

.ncpd-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
}

.ncpd-header-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: .6rem;
}

.ncpd-header-actions {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
}

.ncpd-user-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--ncpd-bg);
	border: 1px solid var(--ncpd-border);
	border-radius: 999px;
	padding: .35rem .8rem;
	font-size: .9rem;
}

/* Hart gesetzt inkl. !important – das Portal-Theme greift sonst in Link-Styles
   hinein und der Abmelden-Knopf verliert Farbe und Rahmen. */
.ncpd-wrap .ncpd-btn-logout,
.ncpd-wrap .ncpd-btn-logout:link,
.ncpd-wrap .ncpd-btn-logout:visited {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 44px;
	padding: .5rem 1rem;
	background: #AC144C !important;
	border: 1px solid #AC144C !important;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 6px;
	font-size: .9rem;
	font-weight: 600;
}

.ncpd-wrap .ncpd-btn-logout:hover,
.ncpd-wrap .ncpd-btn-logout:active {
	background: #8d1140 !important;
	border-color: #8d1140 !important;
	color: #fff !important;
	text-decoration: none !important;
}

.ncpd-greeting {
	margin: 1rem 0 0;
	display: flex;
	align-items: baseline;
	gap: .75rem;
	flex-wrap: wrap;
	font-size: 1.05rem;
}

.ncpd-greeting-date {
	color: var(--ncpd-text-light);
	font-size: .9rem;
}

/* ── Abschnitte ─────────────────────────────────────────── */

.ncpd-section { margin-bottom: 1.75rem; }

.ncpd-section-title {
	margin: 0 0 .75rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ncpd-text-light);
}

/* ── Hinweise ───────────────────────────────────────────── */

.ncpd-notices {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

/* Muss VOR .ncpd-notice stehen können und trotzdem gewinnen: die Klassenregel
   `display:flex` überschreibt sonst das UA-Stylesheet für [hidden], und die
   eingeklappten Hinweise wären doch sichtbar. */
.ncpd-notice[hidden] { display: none !important; }

.ncpd-notice {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	background: var(--ncpd-white);
	border: 1px solid var(--ncpd-border);
	border-left: 5px solid var(--ncpd-text-light);
	border-radius: var(--ncpd-radius);
	padding: .9rem 1rem;
	box-shadow: var(--ncpd-shadow);
}

/* Farbe ist nie das einzige Merkmal – Badge-Zeichen und Screenreader-Text
   tragen dieselbe Information (WCAG 1.4.1). */
.ncpd-notice--urgent { border-left-color: var(--ncpd-rot); }
.ncpd-notice--warn   { border-left-color: var(--ncpd-gelb); }
.ncpd-notice--info   { border-left-color: var(--ncpd-petrol); }

.ncpd-notice-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	font-weight: 700;
	font-size: .85rem;
	color: #fff;
	background: var(--ncpd-text-light);
	margin-top: .1rem;
}

.ncpd-notice--urgent .ncpd-notice-badge { background: var(--ncpd-rot); }
.ncpd-notice--warn   .ncpd-notice-badge { background: #8a6200; }
.ncpd-notice--info   .ncpd-notice-badge { background: var(--ncpd-petrol-dark); }

.ncpd-notice-body { flex: 1 1 auto; min-width: 0; }

.ncpd-notice-title {
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
}

.ncpd-notice-text {
	margin: .2rem 0 0;
	color: var(--ncpd-text-light);
	font-size: .9rem;
	line-height: 1.45;
}

.ncpd-notice-actions {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex: 0 0 auto;
	flex-wrap: wrap;
}

.ncpd-notice-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--ncpd-text-light);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}

.ncpd-notice-close:hover {
	background: var(--ncpd-bg);
	border-color: var(--ncpd-border);
	color: var(--ncpd-text);
}

.ncpd-more {
	margin-top: .75rem;
	background: none;
	border: 1px solid var(--ncpd-border);
	border-radius: 6px;
	padding: .5rem .9rem;
	min-height: 44px;
	cursor: pointer;
	font-size: .9rem;
	color: var(--ncpd-petrol-dark);
	font-weight: 600;
}

/* ── Bereichs-Streifen (bereichsübergreifend) ───────────── */

.ncpd-strip {
	border-radius: var(--ncpd-radius);
	padding: .85rem 1rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--ncpd-border);
	border-left: 5px solid var(--ncpd-text-light);
	background: var(--ncpd-white);
}

.ncpd-strip--urgent { border-left-color: var(--ncpd-rot);   background: #fdf2f6; }
.ncpd-strip--good   { border-left-color: var(--ncpd-gruen); background: #f4f9ec; }

.ncpd-strip-title {
	margin: 0 0 .5rem;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.ncpd-strip--urgent .ncpd-strip-title { color: #8d1140; }
.ncpd-strip--good   .ncpd-strip-title { color: #3d6211; }

.ncpd-strip .ncpd-notice {
	background: transparent;
	border: none;
	border-left: none;
	box-shadow: none;
	padding: .35rem 0;
}

/* ── Bereichs-Kacheln ───────────────────────────────────── */

.ncpd-areas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: .85rem;
}

.ncpd-area {
	background: var(--ncpd-white);
	border: 1px solid var(--ncpd-border);
	/* Die Bereichsfarbe kommt als --ncpd-area aus dem Provider. */
	border-top: 4px solid var(--ncpd-area, var(--ncpd-text-light));
	/* Keine runden Ecken oben: eine einseitige Akzentlinie und Rundung
	   vertragen sich nicht — die Linie würde an den Ecken ausfransen. */
	border-radius: 0 0 var(--ncpd-radius) var(--ncpd-radius);
	padding: 1rem;
	box-shadow: var(--ncpd-shadow);
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.ncpd-area-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.ncpd-area-icon {
	font-size: 1.15rem;
	line-height: 1;
	color: var(--ncpd-area, var(--ncpd-text-light));
}

.ncpd-area-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
}

.ncpd-wrap a.ncpd-figure,
.ncpd-wrap a.ncpd-figure:link,
.ncpd-wrap a.ncpd-figure:visited,
.ncpd-figure {
	display: flex;
	flex-direction: column;
	color: inherit !important;
	text-decoration: none !important;
	min-width: 0;
}

.ncpd-wrap a.ncpd-figure:hover .ncpd-figure-value { text-decoration: underline; }

.ncpd-figure-value {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ncpd-petrol-dark);
}

.ncpd-tone-good { color: var(--ncpd-gruen); }
.ncpd-tone-warn { color: #8a6200; }
.ncpd-tone-bad  { color: var(--ncpd-rot); }

.ncpd-figure-label { font-size: .85rem; font-weight: 600; margin-top: .1rem; }
.ncpd-figure-sub   { font-size: .78rem; color: var(--ncpd-text-light); }

/* Aufschlüsselung, z.B. Stunden je Mitarbeiterin. */
.ncpd-breakdown {
	border-top: 1px solid var(--ncpd-border);
	padding-top: .5rem;
}

.ncpd-breakdown-title {
	margin: 0 0 .3rem;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ncpd-text-light);
}

.ncpd-area-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.ncpd-area-rows li {
	display: flex;
	justify-content: space-between;
	gap: .75rem;
	font-size: .85rem;
}

.ncpd-row-label { color: var(--ncpd-text-light); }
.ncpd-row-value { font-weight: 600; white-space: nowrap; }

/* Hinweise innerhalb einer Kachel: flach, ohne zweite Rahmenebene. */
.ncpd-notices--inline {
	border-top: 1px solid var(--ncpd-border);
	padding-top: .5rem;
	gap: .35rem;
}

.ncpd-notices--inline .ncpd-notice {
	background: transparent;
	border: none;
	border-left: none;
	box-shadow: none;
	padding: .15rem 0;
	align-items: flex-start;
}

.ncpd-notices--inline .ncpd-notice-title { font-size: .85rem; font-weight: 400; }
.ncpd-notices--inline .ncpd-notice--warn .ncpd-notice-title { color: #8a6200; }

.ncpd-wrap .ncpd-area-link,
.ncpd-wrap .ncpd-area-link:link,
.ncpd-wrap .ncpd-area-link:visited {
	margin-top: auto;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ncpd-petrol-dark) !important;
	text-decoration: none !important;
}

.ncpd-wrap .ncpd-area-link:hover { text-decoration: underline !important; }

/* ── Werkzeuge ──────────────────────────────────────────── */

.ncpd-apps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: .75rem;
}

.ncpd-wrap .ncpd-app-link,
.ncpd-wrap .ncpd-app-link:link,
.ncpd-wrap .ncpd-app-link:visited {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 44px;
	padding: 1rem;
	background: var(--ncpd-white);
	border: 1px solid var(--ncpd-border);
	border-radius: var(--ncpd-radius);
	box-shadow: var(--ncpd-shadow);
	color: var(--ncpd-text) !important;
	text-decoration: none !important;
}

.ncpd-wrap .ncpd-app-link:hover {
	border-color: var(--ncpd-petrol);
	background: #fafdfe;
}

.ncpd-app-icon {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ncpd-area, var(--ncpd-text-light));
}
.ncpd-app-text { flex: 1 1 auto; min-width: 0; }
.ncpd-app-title { display: block; font-weight: 600; }

.ncpd-app-desc {
	display: block;
	font-size: .82rem;
	color: var(--ncpd-text-light);
	margin-top: .1rem;
}

.ncpd-app-badge {
	flex: 0 0 auto;
	background: var(--ncpd-rot);
	color: #fff;
	border-radius: 999px;
	min-width: 1.5rem;
	padding: .15rem .5rem;
	text-align: center;
	font-size: .8rem;
	font-weight: 700;
}

/* ── Meldungen, Leerzustand ─────────────────────────────── */

.ncpd-alert {
	border-radius: var(--ncpd-radius);
	padding: .85rem 1rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--ncpd-border);
	background: var(--ncpd-white);
	font-size: .92rem;
}

.ncpd-alert--error {
	border-left: 5px solid var(--ncpd-rot);
	background: #fdf2f6;
}

.ncpd-alert--warn {
	border-left: 5px solid var(--ncpd-gelb);
	background: #fffaf0;
}

.ncpd-empty {
	background: var(--ncpd-white);
	border: 1px dashed var(--ncpd-border);
	border-radius: var(--ncpd-radius);
	padding: 1.5rem;
	text-align: center;
	color: var(--ncpd-text-light);
}

.ncpd-empty p { margin: 0 0 .5rem; }

.ncpd-errors {
	margin: 0;
	padding-left: 1.2rem;
	font-size: .85rem;
	color: var(--ncpd-text-light);
}

/* ── Buttons ────────────────────────────────────────────── */

.ncpd-wrap .ncpd-btn,
.ncpd-wrap .ncpd-btn:link,
.ncpd-wrap .ncpd-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .55rem 1.1rem;
	border-radius: 6px;
	/* Petrol-Dark statt Petrol: 5.34:1 statt 3.83:1 gegen Weiss (WCAG 1.4.3). */
	border: 1px solid var(--ncpd-petrol-dark);
	background: var(--ncpd-petrol-dark);
	color: #fff !important;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
}

.ncpd-wrap .ncpd-btn:hover,
.ncpd-wrap .ncpd-btn:active {
	background: #035c60;
	border-color: #035c60;
	color: #fff !important;
}

.ncpd-wrap .ncpd-btn--small {
	min-height: 36px;
	padding: .35rem .8rem;
	font-size: .85rem;
}

.ncpd-wrap .ncpd-btn--ghost,
.ncpd-wrap .ncpd-btn--ghost:link,
.ncpd-wrap .ncpd-btn--ghost:visited {
	background: transparent;
	color: var(--ncpd-petrol-dark) !important;
}

.ncpd-wrap .ncpd-btn--primary { width: 100%; }

/* ── Login ──────────────────────────────────────────────── */

.ncpd-wrap--login {
	max-width: 420px;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.ncpd-login-box {
	background: var(--ncpd-white);
	border: 1px solid var(--ncpd-border);
	border-radius: var(--ncpd-radius);
	box-shadow: var(--ncpd-shadow);
	padding: 2rem 1.75rem;
}

.ncpd-login-head { text-align: center; margin-bottom: 1.5rem; }

.ncpd-login-title {
	margin: .75rem 0 .25rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.ncpd-login-sub {
	margin: 0;
	color: var(--ncpd-text-light);
	font-size: .9rem;
}

.ncpd-field { margin: 0 0 1rem; }

.ncpd-field label {
	display: block;
	margin-bottom: .3rem;
	font-size: .88rem;
	font-weight: 600;
}

.ncpd-field input[type="text"],
.ncpd-field input[type="password"] {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--ncpd-border);
	border-radius: 6px;
	/* 16px verhindert den Auto-Zoom von iOS Safari beim Fokus. */
	font-size: 16px;
	line-height: 1.4;
}

.ncpd-field--check {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.ncpd-field--check label {
	margin: 0;
	font-weight: 400;
	font-size: .9rem;
}

.ncpd-field--check input { width: 20px; height: 20px; }

.ncpd-login-foot {
	margin: 1rem 0 0;
	text-align: center;
	font-size: .85rem;
}

/* ── Mobil ──────────────────────────────────────────────── */

@media (max-width: 600px) {
	.ncpd-wrap { padding: 1rem; }

	.ncpd-notice {
		flex-wrap: wrap;
	}

	.ncpd-notice-actions {
		width: 100%;
		justify-content: flex-end;
	}

	.ncpd-tiles {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ncpd-wrap * {
		transition: none !important;
		animation: none !important;
	}
}

/* Hinweis-Zeilen tragen ihre Dringlichkeit über das Badge — in den Kacheln
   entfällt es, dort steht der Text allein. Der Screenreader-Text bleibt. */
.ncpd-notices--inline .ncpd-notice-badge,
.ncpd-strip .ncpd-notice-badge { display: none; }