/*
 * Koper-ICT Helpdesk — moderne laag voor het klantportaal en het
 * contactformulier (sinds v1.47.0). Puur CSS bovenop koperict-helpdesk.css;
 * gebruikt de --kp-* tokens van het thema (light + dark).
 */
.kihd-portaal { max-width: 820px; }

.kihd-melding {
	border-radius: 14px; border-left-width: 4px;
	box-shadow: var(--kp-card-shadow, 0 1px 2px rgba(15,23,42,.05), 0 6px 20px rgba(15,23,42,.06));
}

/* Topbalk als pil-kaart */
.kihd-topbar {
	padding: .7rem 1.1rem; border: 1px solid var(--kp-border, #ddd);
	border-radius: 99px; background: var(--kp-bg-card, #fff);
	box-shadow: var(--kp-card-shadow, 0 1px 2px rgba(15,23,42,.05));
}
/* Uitloggen: pilknop zonder onderstreping (ook niet bij hover/focus) */
.kihd-link-btn,
.kihd-link-btn:hover,
.kihd-link-btn:focus,
.kihd-link-btn:focus-visible { text-decoration: none !important; font-weight: 600; }

/* "← Terug naar overzicht": losse link in een <p> zonder klasse → ghost-pil */
.kihd-portaal > p:not([class]):has(> a:only-child) { margin: 0 0 1.2rem; }
/* Staat de knop onder een formulierkaart (nieuwe Melding), dan ruimte erboven */
.kihd-portaal > :is(.kihd-form, .kihd-contact-form) ~ p:not([class]):has(> a:only-child) { margin-top: 1.25rem; }
.kihd-portaal > p:not([class]):has(> a:only-child) > a {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .5rem 1.15rem; border-radius: 99px;
	border: 1px solid var(--kp-border, #ddd);
	background: var(--kp-glass, color-mix(in srgb, var(--kp-text, #222) 4%, transparent));
	color: var(--kp-text-muted, #64748b); font-size: .88rem; font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.kihd-portaal > p:not([class]):has(> a:only-child) > a:hover,
.kihd-portaal > p:not([class]):has(> a:only-child) > a:focus-visible {
	border-color: var(--kp-primary, #00547e); color: var(--kp-primary, #00547e);
	background: var(--kp-primary-soft, rgba(0,84,126,.1)); text-decoration: none;
	transform: translateX(-2px);
}

/* Inlogkaart */
.kihd-login-box {
	border-radius: 20px; padding: 2rem;
	box-shadow: var(--kp-card-shadow, 0 1px 2px rgba(15,23,42,.05), 0 10px 30px rgba(15,23,42,.08));
}

/* Formulieren: afronding, focusring, pillen-knoppen */
.kihd-form input[type="text"], .kihd-form input[type="email"], .kihd-form input[type="tel"],
.kihd-form input[type="file"], .kihd-form textarea, .kihd-form select,
.kihd-login-box input[type="text"], .kihd-login-box input[type="email"] {
	border-radius: 12px;
}
.kihd-form input[type="file"] {
	border: 1px dashed var(--kp-border, #ccc); background: transparent;
}
.kihd-form button, .kihd-login-box button { border-radius: 99px; }
.kihd-form button[type="submit"], .kihd-login-box button[type="submit"] {
	padding: .7rem 1.6rem; font-weight: 600;
}

/* Kaart rond het nieuwe-Melding-/contactformulier */
.kihd-contact-form, .kihd-portaal > .kihd-form {
	padding: 1.4rem 1.6rem; border: 1px solid var(--kp-border, #ddd);
	border-radius: 20px; background: var(--kp-bg-card, #fff);
	box-shadow: var(--kp-card-shadow, 0 1px 2px rgba(15,23,42,.05));
}

/* Meldingenlijst als kaart */
.kihd-tickets-tabel {
	border-collapse: separate; border-spacing: 0; overflow: hidden;
	border: 1px solid var(--kp-border, #ddd); border-radius: 16px;
	background: var(--kp-bg-card, #fff);
	box-shadow: var(--kp-card-shadow, 0 1px 2px rgba(15,23,42,.05));
}
.kihd-tickets-tabel th {
	font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--kp-text-muted, #64748b);
	background: color-mix(in srgb, var(--kp-text, #222) 4%, var(--kp-bg-card, #fff));
}
.kihd-tickets-tabel th, .kihd-tickets-tabel td { padding: .8rem 1rem; }
.kihd-tickets-tabel tr:last-child td { border-bottom: 0; }
.kihd-tickets-tabel tbody tr { transition: background .15s; }
.kihd-tickets-tabel tbody tr:hover td {
	background: color-mix(in srgb, var(--kp-primary, #00547e) 6%, transparent);
}

/* Statuspillen */
.kihd-status { padding: .22rem .75rem; font-size: .74rem; letter-spacing: .01em; }

/* Gesprek als chatbubbels */
.kihd-thread { gap: .6rem; }
.kihd-bericht {
	max-width: 88%; border-radius: 18px 18px 18px 4px; padding: .85rem 1.1rem;
	box-shadow: 0 1px 2px rgba(15,23,42,.04); line-height: 1.55;
	/* Een korte bubbel mag niet zo smal worden dat naam en datum aan elkaar plakken */
	min-width: min(100%, 17rem);
}
.kihd-bericht-medewerker {
	align-self: flex-end; border-radius: 18px 18px 4px 18px;
	background: color-mix(in srgb, var(--kp-primary, #00547e) 12%, var(--kp-bg-card, #fff));
	border-color: color-mix(in srgb, var(--kp-primary, #00547e) 25%, var(--kp-border, #ddd));
}
/* Naam links, datum rechts, altijd met ruimte ertussen (ook als de bubbel klein is) */
.kihd-bericht-meta {
	gap: .4rem 1.5rem; flex-wrap: wrap; align-items: baseline;
}
.kihd-bericht-meta > :last-child { margin-left: auto; white-space: nowrap; }
.kihd-gesloten-melding { border-radius: 14px; }

@media (max-width: 600px) {
	.kihd-topbar { border-radius: 16px; flex-wrap: wrap; gap: .4rem; }
	.kihd-bericht { max-width: 100%; }
	.kihd-contact-form, .kihd-portaal > .kihd-form { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.kihd-tickets-tabel tbody tr { transition: none; }
	.kihd-portaal > p:not([class]):has(> a:only-child) > a { transition: none; transform: none !important; }
}