/**
 * Document Portal — default front-end styles.
 *
 * HOW TO OVERRIDE:
 *   1. Easiest — override the variables below. Paste this into your
 *      theme's Additional CSS (Appearance → Customize → Additional CSS)
 *      or a child theme's style.css:
 *
 *        .docportal {
 *            --docportal-color-primary: #123456;
 *            --docportal-color-error: #b32d2e;
 *            --docportal-radius: 4px;
 *        }
 *
 *   2. Target any element directly — every element has a specific
 *      "docportal-{component}__{part}" class (see the templates in
 *      /templates), so `.docportal-upload-form__submit { ... }` will
 *      always win over the rule below it without needing !important.
 *
 *   3. Disable this file completely and provide your own from scratch:
 *      add this to your theme's functions.php —
 *
 *        add_filter( 'docportal_enqueue_default_styles', '__return_false' );
 *
 *      Every class name below is still applied to the markup, so your
 *      own stylesheet only needs to define rules for the classes you
 *      care about.
 */

.docportal {
	--docportal-color-primary: #2271b1;
	--docportal-color-primary-text: #ffffff;
	--docportal-color-text: #1e1e1e;
	--docportal-color-muted: #666666;
	--docportal-color-border: #dddddd;
	--docportal-color-success: #1e7e34;
	--docportal-color-success-bg: #eafaf0;
	--docportal-color-error: #b32d2e;
	--docportal-color-error-bg: #fbeaea;
	--docportal-color-notice-bg: #eef6fc;
	--docportal-color-badge-public-bg: #eafaf0;
	--docportal-color-badge-public-text: #1e7e34;
	--docportal-color-badge-teachers-bg: #fff6e5;
	--docportal-color-badge-teachers-text: #8a6100;
	--docportal-color-badge-pending-bg: #f0f0f0;
	--docportal-color-badge-pending-text: #555555;
	--docportal-color-badge-approved-bg: #eafaf0;
	--docportal-color-badge-approved-text: #1e7e34;
	--docportal-color-badge-rejected-bg: #fbeaea;
	--docportal-color-badge-rejected-text: #b32d2e;
	--docportal-radius: 4px;
	--docportal-spacing: 1em;
	--docportal-max-field-width: 480px;

	color: var(--docportal-color-text);
}

/* ---------------------------------------------------------------- */
/* Shared message banners (used by upload form + 2FA screens)        */
/* ---------------------------------------------------------------- */

.docportal-upload-form__message,
.docportal-2fa-setup__message,
.docportal-2fa-verify__message {
	padding: 0.75em 1em;
	border-radius: var(--docportal-radius);
	margin-bottom: var(--docportal-spacing);
	font-weight: 600;
}

.docportal-upload-form__message--success {
	color: var(--docportal-color-success);
	background: var(--docportal-color-success-bg);
}

.docportal-upload-form__message--error,
.docportal-2fa-setup__message--error,
.docportal-2fa-verify__message--error {
	color: var(--docportal-color-error);
	background: var(--docportal-color-error-bg);
}

.docportal-2fa-verify__message--notice {
	color: var(--docportal-color-text);
	background: var(--docportal-color-notice-bg);
}

/* ---------------------------------------------------------------- */
/* Upload form                                                       */
/* ---------------------------------------------------------------- */

.docportal-upload-form__field {
	margin-bottom: var(--docportal-spacing);
}

.docportal-upload-form__label,
.docportal-upload-form__legend {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.docportal-upload-form__required {
	color: var(--docportal-color-error);
}

.docportal-upload-form__input,
.docportal-upload-form__textarea,
.docportal-upload-form__select {
	width: 100%;
	max-width: var(--docportal-max-field-width);
	padding: 0.5em;
	border: 1px solid var(--docportal-color-border);
	border-radius: var(--docportal-radius);
}

.docportal-upload-form__input--file {
	border: none;
	padding: 0;
}

.docportal-upload-form__hint {
	display: block;
	font-size: 0.85em;
	color: var(--docportal-color-muted);
	margin-top: 0.25em;
}

.docportal-upload-form__radio-option {
	display: block;
	font-weight: normal;
	margin-bottom: 0.4em;
}

.docportal-upload-form__submit {
	background: var(--docportal-color-primary);
	color: var(--docportal-color-primary-text);
	border: none;
	border-radius: var(--docportal-radius);
	padding: 0.6em 1.4em;
	font-weight: 600;
	cursor: pointer;
}

.docportal-upload-form__submit:hover {
	filter: brightness(0.92);
}

/* ---------------------------------------------------------------- */
/* My Uploads table                                                   */
/* ---------------------------------------------------------------- */

.docportal-my-uploads__table {
	width: 100%;
	border-collapse: collapse;
}

.docportal-my-uploads__cell {
	border: 1px solid var(--docportal-color-border);
	padding: 0.5em 0.75em;
	text-align: left;
}

.docportal-my-uploads__row--head .docportal-my-uploads__cell {
	font-weight: 600;
	background: #fafafa;
}

.docportal-my-uploads__badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}

.docportal-my-uploads__badge--oeffentlich {
	background: var(--docportal-color-badge-public-bg);
	color: var(--docportal-color-badge-public-text);
}

.docportal-my-uploads__badge--fuer_lehrkraefte {
	background: var(--docportal-color-badge-teachers-bg);
	color: var(--docportal-color-badge-teachers-text);
}

.docportal-my-uploads__badge--pending {
	background: var(--docportal-color-badge-pending-bg);
	color: var(--docportal-color-badge-pending-text);
}

.docportal-my-uploads__badge--approved {
	background: var(--docportal-color-badge-approved-bg);
	color: var(--docportal-color-badge-approved-text);
}

.docportal-my-uploads__badge--rejected {
	background: var(--docportal-color-badge-rejected-bg);
	color: var(--docportal-color-badge-rejected-text);
}

.docportal-my-uploads__download-link {
	font-weight: 600;
}

/* Below this width, the 6-column table becomes unreadable/squished —
   switch each row into a stacked "card" instead, using each cell's
   data-label attribute (see templates/my-uploads.php) as its label.
   Adjust the breakpoint below if your theme's content column is
   narrower or wider than the WordPress default. */
@media screen and (max-width: 680px) {
	.docportal-my-uploads__table,
	.docportal-my-uploads__thead,
	.docportal-my-uploads__tbody,
	.docportal-my-uploads__row,
	.docportal-my-uploads__cell {
		display: block;
		width: 100%;
	}

	.docportal-my-uploads__thead {
		display: none; /* labels are shown per-cell instead, via data-label */
	}

	.docportal-my-uploads__row {
		border: 1px solid var(--docportal-color-border);
		border-radius: var(--docportal-radius);
		margin-bottom: 1em;
		padding: 0.5em 0.75em;
	}

	.docportal-my-uploads__cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1em;
		border: none;
		border-bottom: 1px solid var(--docportal-color-border);
		padding: 0.6em 0;
		text-align: right;
	}

	.docportal-my-uploads__cell:last-child {
		border-bottom: none;
	}

	.docportal-my-uploads__cell::before {
		content: attr(data-label);
		font-weight: 600;
		text-align: left;
		color: var(--docportal-color-muted);
	}
}

/* ---------------------------------------------------------------- */
/* 2FA screens (setup + verify)                                       */
/* ---------------------------------------------------------------- */

.docportal-2fa-setup,
.docportal-2fa-verify {
	max-width: 420px;
}

.docportal-2fa-setup__input,
.docportal-2fa-verify__input {
	font-size: 1.4em;
	letter-spacing: 0.2em;
	text-align: center;
	width: 100%;
	max-width: 220px;
	padding: 0.4em;
	border: 1px solid var(--docportal-color-border);
	border-radius: var(--docportal-radius);
	display: block;
	margin: 0.4em 0 0.8em;
}

.docportal-2fa-setup__qr-wrapper {
	margin: var(--docportal-spacing) 0;
}

.docportal-2fa-setup__secret {
	background: #f4f4f4;
	padding: 0.2em 0.5em;
	border-radius: var(--docportal-radius);
}

.docportal-2fa-setup__submit,
.docportal-2fa-verify__submit {
	background: var(--docportal-color-primary);
	color: var(--docportal-color-primary-text);
	border: none;
	border-radius: var(--docportal-radius);
	padding: 0.6em 1.4em;
	font-weight: 600;
	cursor: pointer;
}

.docportal-2fa-verify__submit--secondary {
	background: transparent;
	color: var(--docportal-color-primary);
	border: 1px solid var(--docportal-color-primary);
}

.docportal-2fa-verify__hidden-form {
	display: none;
}

.docportal-2fa-verify__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	margin-top: 0.5em;
}

.docportal-2fa-verify__fallback-intro,
.docportal-2fa-verify__intro {
	margin-top: var(--docportal-spacing);
	color: var(--docportal-color-muted);
}

/* ---------------------------------------------------------------- */
/* Login form                                                         */
/* ---------------------------------------------------------------- */

.docportal-login-form {
	max-width: 380px;
	padding: 1.5em;
	border: 1px solid var(--docportal-color-border);
	border-radius: var(--docportal-radius);
	background: #fff;
}

.docportal-login-form__heading {
	margin-top: 0;
	margin-bottom: var(--docportal-spacing);
}

.docportal-login-form__field {
	margin-bottom: var(--docportal-spacing);
}

.docportal-login-form__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.docportal-login-form__input {
	width: 100%;
	padding: 0.6em 0.7em;
	border: 1px solid var(--docportal-color-border);
	border-radius: var(--docportal-radius);
	box-sizing: border-box;
}

.docportal-login-form__checkbox-label {
	font-weight: normal;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.docportal-login-form__submit {
	width: 100%;
	background: var(--docportal-color-primary);
	color: var(--docportal-color-primary-text);
	border: none;
	border-radius: var(--docportal-radius);
	padding: 0.7em 1.4em;
	font-weight: 600;
	font-size: 1em;
	cursor: pointer;
}

.docportal-login-form__submit:hover {
	filter: brightness(0.92);
}

.docportal-login-form__lost-password {
	margin-top: 0.75em;
	margin-bottom: 0;
	font-size: 0.9em;
	text-align: center;
}

.docportal-login-form__intro {
	color: var(--docportal-color-muted);
	margin-bottom: var(--docportal-spacing);
}

.docportal-login-form__input--otp {
	font-size: 1.4em;
	letter-spacing: 0.2em;
	text-align: center;
}

.docportal-login-form__submit--secondary {
	background: transparent;
	color: var(--docportal-color-primary);
	border: 1px solid var(--docportal-color-primary);
}

.docportal-login-form__hidden-form {
	display: none;
}

.docportal-login-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
}

.docportal-login-form__actions .docportal-login-form__submit {
	width: auto;
}

/* ---------------------------------------------------------------- */
/* Dashboard tabs (pure CSS — no JavaScript required)                */
/* ---------------------------------------------------------------- */

.docportal-dashboard__tab-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.docportal-dashboard__tab-labels {
	display: flex;
	gap: 0.5em;
	border-bottom: 2px solid var(--docportal-color-border);
	margin-bottom: var(--docportal-spacing);
}

.docportal-dashboard__tab-label {
	display: inline-block;
	padding: 0.6em 1.2em;
	cursor: pointer;
	font-weight: 600;
	color: var(--docportal-color-muted);
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	user-select: none;
}

.docportal-dashboard__tab-label:hover {
	color: var(--docportal-color-text);
}

.docportal-dashboard__panel {
	display: none;
}

/* Show the panel and highlight the label matching whichever radio
   input is currently checked. Relies on document order: both radio
   inputs come first, so ~ (general sibling) reaches every label and
   panel that follows them. */
#docportal-tab-upload:checked ~ .docportal-dashboard__tab-labels label[for="docportal-tab-upload"],
#docportal-tab-my-uploads:checked ~ .docportal-dashboard__tab-labels label[for="docportal-tab-my-uploads"],
#docportal-tab-all-uploads:checked ~ .docportal-dashboard__tab-labels label[for="docportal-tab-all-uploads"] {
	color: var(--docportal-color-primary);
	border-bottom-color: var(--docportal-color-primary);
}

#docportal-tab-upload:checked ~ .docportal-dashboard__panel--upload,
#docportal-tab-my-uploads:checked ~ .docportal-dashboard__panel--my-uploads,
#docportal-tab-all-uploads:checked ~ .docportal-dashboard__panel--all-uploads {
	display: block;
}

/* ---------------------------------------------------------------- */
/* Superuser Dashboard (All Uploads) filter bar                       */
/* ---------------------------------------------------------------- */

.docportal-superuser__heading {
	margin-top: 0;
}

.docportal-superuser__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-end;
	padding: 1em;
	background: #fafafa;
	border: 1px solid var(--docportal-color-border);
	border-radius: var(--docportal-radius);
	margin-bottom: var(--docportal-spacing);
}

.docportal-superuser__filter-field {
	margin: 0;
}

.docportal-superuser__label {
	display: block;
	font-weight: 600;
	font-size: 0.85em;
	margin-bottom: 0.3em;
}

.docportal-superuser__input,
.docportal-superuser__select {
	padding: 0.5em;
	border: 1px solid var(--docportal-color-border);
	border-radius: var(--docportal-radius);
	min-width: 160px;
}

.docportal-superuser__submit {
	background: var(--docportal-color-primary);
	color: var(--docportal-color-primary-text);
	border: none;
	border-radius: var(--docportal-radius);
	padding: 0.6em 1.2em;
	font-weight: 600;
	cursor: pointer;
}

.docportal-superuser__clear-link {
	margin-left: 0.75em;
	font-size: 0.9em;
}

.docportal-superuser__delete-button {
	background: transparent;
	color: var(--docportal-color-error);
	border: 1px solid var(--docportal-color-error);
	border-radius: var(--docportal-radius);
	padding: 0.35em 0.8em;
	font-size: 0.85em;
	cursor: pointer;
}

.docportal-superuser__delete-button:hover {
	background: var(--docportal-color-error-bg);
}

@media screen and (max-width: 680px) {
	.docportal-superuser__filters {
		flex-direction: column;
		align-items: stretch;
	}

	.docportal-superuser__input,
	.docportal-superuser__select {
		width: 100%;
	}
}