/* ABOSS Events Portal — zelfstandige stylesheet (#43).
   De portal rendert een eigen shell (geen WP-thema), dus we definiëren hier
   onze eigen design-tokens — gedeeld met de boilerplate-theme/marketingsite
   (--sh-* palet) zodat portal en marketing dezelfde jas dragen.            */

:root {
	--sh-color-canvas:      #FFFFFF;
	--sh-color-surface:     #F5F5F5;
	--sh-color-surface-alt: #FAFAFA;
	--sh-color-border:      #E0E0E0;
	--sh-color-ink:         #353740;
	--sh-color-ink-soft:    #6B7280;
	--sh-color-ink-strong:  #000000;
	--sh-color-primary:      #459FF5;
	--sh-color-primary-soft: #6BB6FA;
	--sh-color-primary-ink:  #FFFFFF;
	--sh-color-warm:        #F75A39;
	--sh-color-alert:       #9B243E;
	--sh-color-night:       #0E1B3A;
	--sh-color-night-ink:   #F5F5F5;
	--sh-color-night-soft:  #A8B3CC;

	--sh-font-display: Georgia, 'Times New Roman', Times, serif;
	--sh-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
	--sh-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	--sh-radius-sm:  4px;
	--sh-radius-md:  8px;
	--sh-radius-lg:  16px;
	--sh-radius-pill: 9999px;
	--sh-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
}

/* ---- Base ---- */
.aboss-portal {
	margin: 0;
	background: var(--sh-color-surface);
	color: var(--sh-color-ink);
	font-family: var(--sh-font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.aboss-portal h1,
.aboss-portal h2,
.aboss-portal h3 { font-family: var(--sh-font-display); color: var(--sh-color-ink-strong); }
.aboss-portal h1 { font-size: 1.9rem; margin: 0 0 16px; }
.aboss-portal h2 { font-size: 1.3rem; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sh-color-border); }
.aboss-portal h3 { font-size: 1.05rem; margin: 12px 0 8px; }
.aboss-portal a { color: var(--sh-color-primary); }

/* ---- Shell: header ---- */
.aboss-portal-header {
	background: var(--sh-color-canvas);
	border-bottom: 1px solid var(--sh-color-border);
}
.aboss-portal-header__inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.aboss-portal-brand {
	font-family: var(--sh-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--sh-color-ink-strong) !important;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
}
/* Logo in de header (assets/logo.svg|png). width auto = behoudt verhouding. */
.aboss-portal-logo {
	display: block;
	height: 30px;
	width: auto;
}
/* Klein logo in de footer, naast de copyright-tekst. */
.aboss-portal-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.aboss-portal-footer__logo {
	height: 18px;
	width: auto;
	opacity: 0.65;
}

/* ---- Shell: nav (in header) ---- */
.aboss-portal-nav {
	display: flex;
	gap: 22px;
	align-items: center;
	flex-wrap: wrap;
	flex: 1;
}

/* ---- Taalswitcher (NL/EN) — rechts in de header ---- */
.aboss-portal-langswitch {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.aboss-portal-langswitch a {
	color: var(--sh-color-ink-soft);
	text-decoration: none;
	padding: 2px 5px;
	border-radius: 4px;
}
.aboss-portal-langswitch a:hover {
	color: var(--sh-color-ink-strong);
}
.aboss-portal-langswitch a.is-active {
	color: var(--sh-color-ink-strong);
	font-weight: 700;
}
.aboss-portal-nav a { color: var(--sh-color-ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.aboss-portal-nav a:hover { color: var(--sh-color-primary); }
.aboss-portal-nav a[aria-current="page"] { color: var(--sh-color-primary); }
.aboss-portal-nav-logout { margin-left: auto; color: var(--sh-color-ink-soft) !important; font-weight: 400 !important; }

/* ---- Shell: main + footer ---- */
.aboss-portal-main {
	max-width: 960px;
	margin: 0 auto;
	padding: 36px 24px 64px;
}
.aboss-portal-container { width: 100%; }
.aboss-portal-footer {
	border-top: 1px solid var(--sh-color-border);
	color: var(--sh-color-ink-soft);
	font-size: 0.85rem;
}
.aboss-portal-footer .aboss-portal-container {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---- Cards ---- */
.aboss-portal-card {
	background: var(--sh-color-canvas);
	border: 1px solid var(--sh-color-border);
	border-radius: var(--sh-radius-md);
	padding: 24px;
	margin: 0 0 16px;
}
.aboss-portal-license-card {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, transform .15s;
}
.aboss-portal-license-card:hover {
	border-color: var(--sh-color-primary);
	transform: translateY(-1px);
}

/* ---- Grid ---- */
.aboss-portal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

/* ---- Notices ---- */
.aboss-portal-notice {
	padding: 12px 16px;
	margin: 16px 0;
	border-left: 3px solid;
	border-radius: 0 var(--sh-radius-sm) var(--sh-radius-sm) 0;
	font-size: 0.95rem;
}
.aboss-portal-notice-success { background: #e7f4ec; border-color: #46b450; }
.aboss-portal-notice-error   { background: #fbeaea; border-color: var(--sh-color-alert); }
.aboss-portal-notice-warning { background: #fef8e7; border-color: var(--sh-color-warm); }

/* ---- Forms ---- */
.aboss-portal-form { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.aboss-portal-form label { font-size: 0.85rem; color: var(--sh-color-ink-soft); font-weight: 500; }
.aboss-portal-form input[type="email"],
.aboss-portal-form input[type="text"],
.aboss-portal-form select,
.aboss-portal-form textarea {
	padding: 10px 12px;
	border: 1px solid var(--sh-color-border);
	border-radius: var(--sh-radius-sm);
	font: inherit;
	background: var(--sh-color-canvas);
}
.aboss-portal-form textarea { resize: vertical; }
.aboss-portal-form input:focus,
.aboss-portal-form select:focus,
.aboss-portal-form textarea:focus { outline: 2px solid var(--sh-color-primary); outline-offset: -1px; border-color: var(--sh-color-primary); }
.aboss-portal-inline-form { display: inline-block; margin: 0; }

/* ---- Buttons ---- */
.aboss-portal-btn {
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--sh-radius-sm);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
}
.aboss-portal-btn-primary   { background: var(--sh-color-primary); color: var(--sh-color-primary-ink); }
.aboss-portal-btn-primary:hover { background: var(--sh-color-primary-soft); }
.aboss-portal-btn-secondary { background: var(--sh-color-canvas); color: var(--sh-color-ink); border-color: var(--sh-color-border); }
.aboss-portal-btn-secondary:hover { border-color: var(--sh-color-primary); color: var(--sh-color-primary); }
.aboss-portal-btn-danger    { background: var(--sh-color-canvas); color: var(--sh-color-alert); border-color: #d9b1ad; font-size: 0.85rem; padding: 6px 12px; }
.aboss-portal-btn-danger:hover { background: #fbeaea; }

/* ---- Tables ---- */
.aboss-portal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	margin: 8px 0;
}
.aboss-portal-table th,
.aboss-portal-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--sh-color-border);
	text-align: left;
	vertical-align: middle;
}
.aboss-portal-table th { color: var(--sh-color-ink-soft); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.aboss-portal-table-log td { font-size: 0.85rem; color: var(--sh-color-ink-soft); }

.aboss-portal-row-focus {
	background: #fff8d6 !important;
	animation: aboss-portal-flash 1.5s ease-out;
}
@keyframes aboss-portal-flash {
	0%   { background: #ffe066; }
	100% { background: #fff8d6; }
}

/* ---- Badges ---- */
.aboss-portal-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--sh-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.aboss-portal-badge-active   { background: #e7f4ec; color: #1e6a30; }
.aboss-portal-badge-expired  { background: #fef8e7; color: #7a5a00; }
.aboss-portal-badge-revoked  { background: #fbeaea; color: #911b1b; }
.aboss-portal-badge-unknown  { background: #eee; color: #444; }

/* ---- Definitions ---- */
.aboss-portal-defs { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; }
.aboss-portal-defs dt { font-weight: 600; color: var(--sh-color-ink-soft); font-size: 0.85rem; }
.aboss-portal-defs dd { margin: 0; }

/* ---- Sections + utility ---- */
.aboss-portal-section { margin: 24px 0; }
.aboss-portal-muted { color: var(--sh-color-ink-soft); font-size: 0.9rem; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.aboss-portal-defs { grid-template-columns: 1fr; gap: 4px; }
	.aboss-portal-defs dt { margin-top: 8px; }
	.aboss-portal-table th, .aboss-portal-table td { padding: 8px 6px; font-size: 0.85rem; }
	.aboss-portal-nav { gap: 14px; }
	.aboss-portal-header__inner { gap: 14px; }
}