/*
 * TDR Staff Portal
 * ============================================================================
 *
 * Every rule in this file is scoped to `.tdr-portal` or `body.tdr-portal-page`.
 * An unscoped rule here, or a portal rule added to style.css, reintroduces the
 * bug this file exists to fix. See PRODUCT.md, "Environment: the portal is under
 * attack from its own stack".
 *
 * Why this file exists
 * --------------------
 * The parent theme enqueues this theme's style.css as `wellinor-main` and only
 * then its own two sheets (wellinor/functions.php:372-374). Portal CSS living in
 * style.css therefore loads first and loses every equal-specificity tie. The
 * conflicts are all at element level, which is the category a class scope wins:
 *
 *   a { color: #02ad88 }                        wellinor/assets/css/style.css:37
 *   h1..h6 { font-weight: normal; line-height: 1.6em; margin: 0 }          :52
 *   ul, li { list-style: none; padding: 0; margin: 0 }                    :169
 *   .elementor-kit-526 button { … }             uploads/elementor/css/post-526.css
 *   Bootstrap 3 .progress-bar / .badge / .btn / .table / .pagination
 *
 * This sheet is enqueued by tdr_enqueue_portal_styles() at priority 20 with the
 * parent handles as dependencies, so it loads last as well as scoped.
 *
 * House rules
 * -----------
 * 1. No `!important`. There is one documented exception, marked in place.
 * 2. Absolute px, never rem. PRODUCT.md principle 2; a rem scale silently
 *    resolves smaller inside these wrappers and has already regressed once.
 * 3. Minimum specificity (0,2,0): `.tdr-portal` plus at least one class.
 *    `.tdr-portal .tdr-btn` (0,2,0) beats `.elementor-kit-526 button` (0,1,1)
 *    regardless of load order. Elements that need styling get a class.
 * 4. `.tdr-portal` itself is a pure scope: inherited and paint properties only,
 *    never padding, margin, max-width, border or display. Box properties live on
 *    `.dashboard-container`. This keeps the wrapper idempotent when nested.
 * 5. Tokens are defined once, in assets/css/compliance.css `:root`. That file is
 *    shared with the wp-admin compliance screen, which has no `.tdr-portal`, so
 *    the token block cannot move here.
 *
 * Things the JavaScript requires. Breaking one of these produces a bug that
 * looks exactly like the ones this restyle is fixing.
 * -------------------------------------------------------------------------
 * - `.hidden-upcoming` must hide via `display` and nothing else. dashboard.js:3
 *   uses jQuery .show(), which writes inline `display: list-item`.
 * - `li.user-item.cert-staff-row` must stay `display: list-item`; its layout goes
 *   on the inner `.cert-staff-row__head`. admin-certificates.js:20-30 .show()
 *   writes inline `display: list-item` and would overwrite flex or grid.
 * - `.expanded-courses` / `.expanded-certificates` may set `display`, but never
 *   with `!important`, and must not set `height` or `overflow`.
 *   admin-dashboard.js:100-128 uses slideUp/slideDown, which writes height and
 *   overflow inline mid-animation and clears the inline `display: none` the
 *   template ships. The stylesheet value is what the panel opens to, so the
 *   existing `display: flex` is load-bearing; an `!important` there would defeat
 *   the closed state instead.
 * - `.cert-tabs__panel` must never be forced visible. certificate-tabs.js:41-43
 *   toggles both the `is-active` class and the `hidden` property, so gate on
 *   `:not(.is-active)` as the sheet does; a bare `display` on the panel would
 *   override `[hidden]`.
 * - Never style on `data-index`. admin-dashboard.js:131 injects `li.user-item`
 *   without it, unlike the server-rendered rows.
 * - `.progress-fill` carries an inline `width` from dashboard-content.php:154.
 *   No `width` here.
 */


/* ===========================================================================
   SCOPE AND BASE
   =========================================================================== */

/* A pure scope: paint and inherited properties only, never box properties.
   Box properties belong on .dashboard-container, which every portal template
   root already carries. Keeping this rule pure is what makes the wrapper
   idempotent when dynamic_resource_tabs_shortcode() nests one inside another. */
.tdr-portal {
	background: var(--tdr-bg);
	color: var(--tdr-ink);
}

/* --tdr-bg has been defined in compliance.css and referenced nowhere, so every
   card border and shadow in this sheet has been rendering on white with nothing
   to lift off. Applying the ground is the single largest visual change here.

   It goes on .tdr-portal rather than the shell because style.css still carries
   #mepr-account-content { background: white !important }, which paints over
   anything set further out. That rule also serves MemberPress's own account
   tabs, so narrowing it is separate work; body.tdr-portal-page is the scope the
   remaining chrome rules use.

   The ground is deliberately NOT painted on body.tdr-portal-page itself. The
   site background is the Elementor kit's, set on the kit class that lands on
   <body> (.elementor-kit-526 { background-color: var(--e-global-color-primary) },
   i.e. black), and the Elementor footer template draws its CTA straight onto
   that ground: a white heading, a white paragraph, and Footer-Background.png,
   which is a transparent arrow outline. body.tdr-portal-page is (0,1,1) and the
   kit class is (0,1,0), so a background here wins and repaints the footer CTA
   in --tdr-bg, leaving that white text invisible on a cream ground. The three
   scopes below -- .mepr-account-container, #mepr-account-content and
   .tdr-portal -- already cover every cell of the portal shell, so the body rule
   bought nothing the shell rules were not already painting. */

/* The parent theme's base element rules load after this theme's style.css and
   reset things the portal depends on. Restating them inside the scope wins on
   specificity, so it no longer matters that the parent loads later. The list
   reset is the exception: every portal list sets its own list-style, margin and
   padding, so the parent stripping them changes nothing and no counter-rule is
   needed. The other three are restated below.

     a { color: #02ad88 }                        wellinor/assets/css/style.css:37
     a:hover, a:focus, a:visited { outline: none }                          :47
     h1..h6 { font-weight: normal; line-height: 1.6em; margin: 0 }          :52
     ul, li { list-style: none; padding: 0; margin: 0 }                    :169

   Teal links were the most visible symptom: any portal link without a
   class-scoped rule of its own inherited #02ad88. */
.tdr-portal a {
	color: var(--tdr-ink);
	transition: color .2s var(--tdr-ease);
}

.tdr-portal a:hover {
	color: var(--tdr-yellow-deep);
}

/* The rule above is (0,1,1), and so is MemberPress's
   .mepr-account-container a { color: #06429e } from css/readylaunch/account.css,
   which the pro-account-tabs block on this page enqueues as 'mp-pro-account'.
   A tie is decided by load order, and the block enqueues during render, so it
   wins: that is why resource titles rendered blue while every component with its
   own (0,2,1) rule rendered correctly.

   Two classes beat one class plus one element, so this settles it on specificity.
   The unscoped rule above still covers the shortcode path, where the portal can
   render outside .mepr-account-container and there is no antagonist. */
body.tdr-portal-page .tdr-portal a {
	color: var(--tdr-ink);
}

body.tdr-portal-page .tdr-portal a:hover {
	color: var(--tdr-yellow-deep);
}

/* PRODUCT.md makes visible focus a requirement, not a checkbox, and the parent
   reset removed it. Ink rather than the accent so the ring stays visible when
   the control it surrounds is itself yellow. */
.tdr-portal a:focus-visible,
.tdr-portal button:focus-visible,
.tdr-portal input:focus-visible,
.tdr-portal select:focus-visible,
.tdr-portal [tabindex]:focus-visible {
	outline: 2px solid var(--tdr-ink);
	outline-offset: 2px;
}

/* Weight and measure for headings the parent flattened to font-weight: normal
   and line-height: 1.6em. Components that set their own weight still win at
   (0,2,1). */
.tdr-portal h1,
.tdr-portal h2,
.tdr-portal h3,
.tdr-portal h4 {
	line-height: 1.25;
	font-weight: 600;
}


/* ===========================================================================
   THE ACCOUNT SHELL
   ===========================================================================

   .tdr-portal wraps the tab CONTENT only. The nav, the container and the
   welcome panel are rendered by MemberPress's pro-account-tabs block, outside
   that wrapper, so they are scoped on body.tdr-portal-page instead.

   What is actually styling them: the block enqueues 'mp-pro-account' →
   memberpress/css/readylaunch/account.css (registered at
   MeprBlocksCtrl.php:1125). That sheet sets .mepr-account-container to
   display: grid with min-height: 100vh, paints #mepr-account-nav #06429e,
   colours .mepr-account-container a #06429e, and draws an icomoon glyph on
   every nav item through .mepr-nav-item a::before. It carries no !important, so
   specificity alone is enough, but note the ID: #mepr-account-nav
   .mepr-nav-item a is (1,1,1), so a counter-rule needs an ID too.
   =========================================================================== */

/* The nav is a full-height column of white-on-dark links with no visible
   current state, which is most of what still reads as dated here. Ink rather
   than #06429e so it belongs to the portal, and the current tab is marked with
   the accent, which is the one thing on the page worth marking. */
body.tdr-portal-page #mepr-account-nav {
	background: var(--tdr-ink);
}

body.tdr-portal-page #mepr-account-nav .mepr-nav-item a {
	justify-content: flex-start;
	gap: .1rem;
	padding: .7rem 1.1rem;
	color: var(--tdr-on-ink);
	font-size: var(--tdr-fs-sm);
	font-weight: 500;
	border-left: 0;
	transition: background-color .2s var(--tdr-ease), color .2s var(--tdr-ease);
}

body.tdr-portal-page #mepr-account-nav .mepr-nav-item a:hover {
	background: rgba(255, 255, 255, .06);
	color: var(--tdr-surface);
}

/* MemberPress marks the current tab with .mepr-active-nav-tab; this theme's own
   tabs (functions.php:78-109) mark it with .active. Both, so the state is
   visible whichever emitted the item. */
body.tdr-portal-page #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a,
body.tdr-portal-page #mepr-account-nav .mepr-nav-item.active a {
	background: rgba(255, 255, 255, .10);
	color: var(--tdr-yellow);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--tdr-yellow);
}

/* The container is a grid with min-height: 100vh, which is what leaves a tall
   empty panel under a short page. The nav column still needs its full height,
   so the ground is painted on the container and the content keeps its own. */
body.tdr-portal-page .mepr-account-container {
	background: var(--tdr-bg);
	/* readylaunch/account.css sets min-height: 100vh on this grid, so a short
	   page reserved a full screen and left a tall empty band between the last
	   card and the site footer. The grid still stretches its two columns to the
	   taller of nav and content, which is all the height it needs. */
	min-height: 0;
}

/* The content cell can be taller than .tdr-portal when the nav column is the
   taller of the two, so it carries the ground as well. Without this the excess
   showed as a white slab. */
body.tdr-portal-page #mepr-account-content {
	background: var(--tdr-bg);
}

/* Compliance report filters -------------------------------------------------

   Five native selects rendered full width and stacked, because the wrapping
   <label> is a block inside the flex row. compliance.css cannot fix this
   without also changing the wp-admin screen it shares, so it is corrected here,
   on the front end only. */
body.tdr-portal-page .tdr-portal .tdr-report-filters label {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	font-weight: 400;
}

body.tdr-portal-page .tdr-portal .tdr-report-filters select {
	width: auto;
	min-width: 11rem;
	height: 38px;
}

body.tdr-portal-page .tdr-portal .tdr-report-filters button {
	height: 38px;
}


/* The one !important in this file.

   Elementor's kit emits an unqualified h2 { font-size: 35px !important } below
   450px, from Site Settings > Custom CSS
   (wp-content/uploads/elementor/css/post-526.css). An !important declaration can
   only be beaten by another !important: specificity is irrelevant, and a portal
   h2 cannot escape an unqualified element selector.

   35px is a headline, and 450px is the width a technician actually reads this at,
   in a van, one-handed. The urgent-notifications header is an h2, so without this
   the loudest thing on a phone is a label.

   The real fix is deleting that rule in Elementor, where it is affecting far more
   than the portal. This holds the line until someone does. */
@media only screen and (max-width: 450px) {
	.tdr-portal h2 {
		font-size: var(--tdr-fs-lg) !important;
	}
}


/* Design tokens live in assets/css/compliance.css so the wp-admin compliance
   screens can share them. See tdr_enqueue_scripts(). */

/******************
DASHBOARD
******************/

.tdr-portal .dashboard-container {
	max-width: 1500px;
	margin: 0 auto;
	padding: 3.5rem 2rem 5rem;
	color: var(--tdr-ink);
	font-size: var(--tdr-fs-base);
}

/* Page header --------------------------------------------------------------- */

.tdr-portal .dashboard-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--tdr-line);
}

/* The summary draws its own rule, so the header gives up its one and tightens
   the gap. Without :has() support the fallback is a second hairline, which is
   untidy rather than broken. */
.tdr-portal .dashboard-header:has(+ .tdr-summary) {
	margin-bottom: 1.25rem;
	padding-bottom: 0;
	border-bottom: 0;
}

.tdr-portal .dashboard-header h1 {
	color: var(--tdr-ink);
	font-size: var(--tdr-fs-2xl);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 .35rem;
}

.tdr-portal .dashboard-header p {
	color: var(--tdr-ink-soft);
	font-size: var(--tdr-fs-md);
	margin: 0;
}

/* Grid ---------------------------------------------------------------------- */

.tdr-portal .dashboard-grid {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 1.25rem;
	/* Cards size to their content. Stretching every card to the tallest in its
	   row left short cards mostly empty, which read as missing data rather than
	   as a tidy grid. */
	align-items: start;
}

.tdr-portal .dashboard-grid.cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The admin dashboard puts seven independent widgets in one grid. Rows meant
   each one reserved the height of the tallest card beside it, so short cards
   left a column of dead space below them. These widgets do not relate to each
   other row-wise, so they pack instead. */
.tdr-portal .dashboard-grid.cols-3 {
	display: block;
	columns: 3;
	column-gap: 1.25rem;
}

.tdr-portal .dashboard-grid.cols-3 > .dashboard-card {
	break-inside: avoid;
	margin-bottom: 1.25rem;
	width: 100%;
}

/* Cards --------------------------------------------------------------------- */

.tdr-portal .dashboard-card {
	background: var(--tdr-surface);
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-md);
	box-shadow: var(--tdr-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .25s var(--tdr-ease), border-color .25s var(--tdr-ease);
}

.tdr-portal .dashboard-card:hover {
	box-shadow: var(--tdr-shadow-lift);
	border-color: var(--tdr-line-soft);
}

/* The header used to have its background and its separator both commented out,
   so it read as one undifferentiated white block with the card body. */
.tdr-portal .card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .95rem 1.25rem;
	background: var(--tdr-surface-alt);
	border-bottom: 1px solid var(--tdr-line);
}

.tdr-portal .card-header h3 {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-size: var(--tdr-fs-sm);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tdr-ink-soft);
}

/* Icons were rendering at 2rem beside 18px headings, which made them the
   loudest thing on the page. */
.tdr-portal .dashboard-card .card-header i,
.tdr-portal .dashboard-card i {
	font-style: normal;
	font-size: var(--tdr-fs-base);
	width: auto;
	padding: 0;
	color: var(--tdr-yellow-deep);
}

.tdr-portal .card-header a {
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	color: var(--tdr-ink-soft);
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: color .2s var(--tdr-ease), border-color .2s var(--tdr-ease);
}

.tdr-portal .card-header a:hover {
	color: var(--tdr-ink);
	border-bottom-color: var(--tdr-yellow);
}

.tdr-portal .card-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
	font-size: var(--tdr-fs-base);
	color: var(--tdr-ink);
}

.tdr-portal .card-content h4 {
	font-size: var(--tdr-fs-md);
	font-weight: 600;
	margin: 0 0 .5rem;
	color: var(--tdr-ink);
}

.tdr-portal .card-content > p:last-child {
	color: var(--tdr-ink-soft);
	margin: 0;
}

/* Lists --------------------------------------------------------------------- */

.tdr-portal .card-content .dashboard-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tdr-portal .dashboard-list li {
	position: relative;
	padding: .7rem 0;
	border-bottom: 1px solid var(--tdr-line-soft);
}

.tdr-portal .dashboard-list li:first-child {
	padding-top: 0;
}

.tdr-portal .dashboard-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.tdr-portal .card-content .dashboard-list a,
.tdr-portal .card-content .dashboard-list a:visited {
	display: inline-flex;
	align-items: baseline;
	gap: .55rem;
	color: var(--tdr-ink);
	font-weight: 500;
	transition: color .2s var(--tdr-ease);
}

.tdr-portal .card-content .dashboard-list a:hover {
	color: var(--tdr-yellow-deep);
}

.tdr-portal .dashboard-list .resource-acknowledgement-date,
.tdr-portal .dashboard-list .recent-acknowledgement {
	display: block;
	margin: .2rem 0 0;
	font-size: var(--tdr-fs-xs);
	color: var(--tdr-ink-mute);
}

.tdr-portal .more-items {
	margin: .75rem 0 0;
	font-size: var(--tdr-fs-xs);
	color: var(--tdr-ink-mute);
}

/* Badges -------------------------------------------------------------------- */

/* One primitive. This used to be four near-identical pill recipes at three
   different radii, in Flat-UI colours unrelated to anything else on the page. */
.tdr-portal .tdr-badge,
.tdr-portal .completion-badge,
.tdr-portal .unread-count,
.tdr-portal .overdue-count,
.tdr-portal .certificate-count,
.tdr-portal .certificate-status,
.tdr-portal .progress-info,
.tdr-portal .overdue-course,
.tdr-portal .expanded-course {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .55rem;
	border-radius: var(--tdr-r-pill);
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	background: var(--tdr-idle-bg);
	color: var(--tdr-idle);
}

.tdr-portal .completion-badge,
.tdr-portal .certificate-count,
.tdr-portal .certificate-status--valid,
.tdr-portal .certificate-status--permanent,
.tdr-portal .tdr-badge--in_date {
	background: var(--tdr-ok-bg);
	color: var(--tdr-ok);
}

.tdr-portal .overdue-count,
.tdr-portal .overdue-course,
.tdr-portal .expanded-course,
.tdr-portal .certificate-status--expiring,
.tdr-portal .tdr-badge--expiring {
	background: var(--tdr-warn-bg);
	color: var(--tdr-warn);
}

.tdr-portal .unread-count,
.tdr-portal .certificate-status--expired,
.tdr-portal .tdr-badge--expired {
	background: var(--tdr-bad-bg);
	color: var(--tdr-bad);
}

.tdr-portal .tdr-badge--in_progress {
	background: var(--tdr-yellow-soft);
	color: var(--tdr-warn);
}

/* Staff rows ---------------------------------------------------------------- */

/* Targeted directly rather than as `.user-list li`, because admin-dashboard.js
   appends `.user-item` nodes that would otherwise inherit by accident. */
.tdr-portal .user-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tdr-portal .user-list .user-item {
	padding: .8rem 0;
	border-bottom: 1px solid var(--tdr-line-soft);
}

.tdr-portal .user-list .user-item:first-child {
	padding-top: 0;
}

.tdr-portal .user-list .user-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.tdr-portal .user-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .15rem;
}

.tdr-portal .user-name {
	font-size: var(--tdr-fs-base);
	font-weight: 600;
	color: var(--tdr-ink);
}

.tdr-portal .user-email {
	font-size: var(--tdr-fs-xs);
	color: var(--tdr-ink-mute);
}

.tdr-portal .overdue-courses,
.tdr-portal .expanded-courses,
.tdr-portal .user-certificates,
.tdr-portal .expanded-certificates {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: .5rem;
}

.tdr-portal .more-courses-toggle,
.tdr-portal .more-certificates-toggle {
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	color: var(--tdr-ink-soft);
	cursor: pointer;
	border-bottom: 1px solid var(--tdr-yellow);
	transition: color .2s var(--tdr-ease);
}

.tdr-portal .more-courses-toggle:hover,
.tdr-portal .more-certificates-toggle:hover {
	color: var(--tdr-ink);
}

.tdr-portal .certificate-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .4rem .75rem;
	width: 100%;
}

.tdr-portal .certificate-item__link {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	min-width: 0;
	font-size: var(--tdr-fs-sm);
}

/* A lapsed certificate with no archived copy is named but not linked, because
   the only link we could offer is MemberPress's error page. */
.tdr-portal .certificate-item__link--inert,
.tdr-portal .certificate-card__link--inert {
	color: var(--tdr-ink-soft);
	cursor: default;
}

.tdr-portal .certificate-item__link--inert .certificate-item__title,
.tdr-portal .certificate-card__link--inert .certificate-card__title {
	text-decoration: line-through;
	text-decoration-color: var(--tdr-ink-mute);
}

.tdr-portal .certificate-item i.muted,
.tdr-portal .certificate-card i.muted {
	color: var(--tdr-ink-mute);
}

.tdr-portal .certificate-item__meta {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4rem .6rem;
}

/* PRODUCT.md principle 1: the date is the content and the title is a label.
   These ran at 13px in the faintest of the three inks while the certificate
   title ran at 16px, and only an already-expired date got weight or colour. So
   the one thing a compliance admin is scanning for was the quietest thing in the
   row, and an in-date expiry, which is the answer to "was this technician
   certified on the day of that job", was quieter still. */
.tdr-portal .certificate-expiry,
.tdr-portal .certificate-completion {
	font-size: var(--tdr-fs-sm);
	font-style: normal;
	color: var(--tdr-ink-soft);
	white-space: nowrap;
}

/* The label names the field; the value is the content. */
.tdr-portal .certificate-expiry .meta-label,
.tdr-portal .certificate-completion .meta-label {
	font-size: var(--tdr-fs-xs);
	color: var(--tdr-ink-mute);
}

.tdr-portal .certificate-expiry .meta-value,
.tdr-portal .certificate-completion .meta-value {
	font-weight: 600;
	color: var(--tdr-ink);
}

/* The note is genuinely supplementary, so it stays quiet. */
.tdr-portal .certificate-note {
	font-size: var(--tdr-fs-xs);
	font-style: italic;
	color: var(--tdr-ink-mute);
	white-space: nowrap;
}

.tdr-portal .certificate-item--expired .certificate-expiry .meta-value {
	color: var(--tdr-bad);
	font-weight: 600;
}

/* Certificate tabs ---------------------------------------------------------- */

.tdr-portal .cert-tabs__nav {
	display: flex;
	gap: .25rem;
	margin-bottom: .85rem;
	border-bottom: 1px solid var(--tdr-line);
}

.tdr-portal .cert-tabs__btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	margin: 0 0 -1px;
	padding: .5rem .9rem;
	background: none;
	border: 1px solid transparent;
	border-bottom-color: transparent;
	border-radius: var(--tdr-r-sm) var(--tdr-r-sm) 0 0;
	font-size: var(--tdr-fs-sm);
	font-weight: 600;
	color: var(--tdr-ink-soft);
	cursor: pointer;
	transition: color .2s var(--tdr-ease), background .2s var(--tdr-ease);
}

.tdr-portal .cert-tabs__btn:hover {
	color: var(--tdr-ink);
	background: var(--tdr-surface-alt);
}

.tdr-portal .cert-tabs__btn.is-active {
	color: var(--tdr-ink);
	background: var(--tdr-surface);
	border-color: var(--tdr-line);
	border-bottom-color: var(--tdr-surface);
}

.tdr-portal .cert-tabs__count {
	padding: .1rem .45rem;
	border-radius: var(--tdr-r-pill);
	background: var(--tdr-idle-bg);
	color: var(--tdr-idle);
	font-size: var(--tdr-fs-xs);
	font-variant-numeric: tabular-nums;
}

.tdr-portal .cert-tabs__btn[data-cert-tab="expired"] .cert-tabs__count {
	background: var(--tdr-bad-bg);
	color: var(--tdr-bad);
}

.tdr-portal .cert-tabs__panel:not(.is-active) {
	display: none;
}

.tdr-portal .cert-tabs__empty {
	margin: 0;
	padding: .85rem 0;
	font-size: var(--tdr-fs-sm);
	color: var(--tdr-ink-mute);
}

.tdr-portal .certificate-rows {
	display: flex;
	flex-direction: column;
}

.tdr-portal .certificate-rows > .certificate-item {
	padding: .7rem 0;
	border-bottom: 1px solid var(--tdr-line-soft);
}

.tdr-portal .certificate-rows > .certificate-item:first-child {
	padding-top: 0;
}

.tdr-portal .certificate-rows > .certificate-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* The portal renders inside MemberPress's own stylesheet, which colours every
   link in .mepr-account-container. Matches the .dashboard-list rules above. */
.tdr-portal .card-content .certificate-item a,
.tdr-portal .card-content .certificate-item a:visited {
	color: var(--tdr-ink);
	font-weight: 500;
	transition: color .2s var(--tdr-ease);
}

.tdr-portal .card-content .certificate-item a:hover {
	color: var(--tdr-yellow-deep);
}

.tdr-portal .card-content .certificate-item i.yellow {
	color: var(--tdr-yellow-deep);
}

.tdr-portal .certificate-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

/* Summary line -------------------------------------------------------------

   This was four bordered, shadowed, hover-lifting stat cards. PRODUCT.md rejects
   centred stat showcases and "sidebar plus KPI row as a reflex", and the four
   numbers are not what an admin came for: the exception lists below are. One
   dense line reads faster and gives the height back to the widgets.

   Status colour marks only the two counts an admin can act on, and the templates
   apply the modifier only when the count is non-zero, because red on a 0 is
   noise rather than information. The label carries the meaning either way, so
   nothing here depends on colour alone.

   Used by the admin dashboard and by the certificates and resource-history page
   headers, which had a second, near-identical pill treatment of their own. */

.tdr-portal .tdr-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem 2.5rem;
	margin: 0 0 2rem;
	padding: 0 0 1.25rem;
	list-style: none;
	border-bottom: 1px solid var(--tdr-line);
}

.tdr-portal .tdr-summary__item {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

.tdr-portal .tdr-summary__num {
	font-size: var(--tdr-fs-lg);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--tdr-ink);
}

.tdr-portal .tdr-summary__label {
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tdr-ink-soft);
}

.tdr-portal .tdr-summary__item--warn .tdr-summary__num {
	color: var(--tdr-warn);
}

.tdr-portal .tdr-summary__item--bad .tdr-summary__num {
	color: var(--tdr-bad);
}

/* Progress ------------------------------------------------------------------ */

.tdr-portal .progress-bar {
	position: relative;
	width: 100%;
	height: 8px;
	margin: 1.75rem 0 .25rem;
	background: var(--tdr-line-soft);
	border: 0;
	border-radius: var(--tdr-r-pill);
	overflow: visible;
}

.tdr-portal .progress-fill {
	height: 100%;
	background: var(--tdr-yellow);
	border-radius: var(--tdr-r-pill);
	transition: width .5s var(--tdr-ease);
}

/* Lifted out of the bar so the bar can be a bar rather than a 35px block with
   text inside it. */
.tdr-portal .progress-text {
	position: absolute;
	right: 0;
	bottom: calc(100% + .45rem);
	margin: 0;
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	color: var(--tdr-ink-soft);
	white-space: nowrap;
}

.tdr-portal .current-lesson {
	font-size: var(--tdr-fs-sm);
	color: var(--tdr-ink-soft);
	margin: 0 0 .35rem;
}

.tdr-portal .deadline {
	font-size: var(--tdr-fs-sm);
	color: var(--tdr-ink-soft);
	margin: 0;
}

.tdr-portal .deadline.overdue,
.tdr-portal .deadline-info .overdue {
	color: var(--tdr-bad);
	font-weight: 600;
}

.tdr-portal .deadline-info .due-soon {
	color: var(--tdr-warn);
	font-weight: 600;
}

.tdr-portal .deadline-info .due-date {
	color: var(--tdr-ink-soft);
}

.tdr-portal .inner-card {
	display: flex;
	flex-direction: column;
}

/* Deadlines list ------------------------------------------------------------ */

.tdr-portal .upcoming-deadlines-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tdr-portal .upcoming-deadline-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .65rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--tdr-line-soft);
}

.tdr-portal .upcoming-deadline-item:last-child {
	border-bottom: 0;
}

.tdr-portal .dashboard-card .deadline-icon i {
	font-size: var(--tdr-fs-xs);
	color: var(--tdr-ink-mute);
}

.tdr-portal .upcoming-deadline-item .course-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--tdr-fs-sm);
	color: var(--tdr-ink-soft);
}

/* Same inversion as the certificate rows: the due date was the smallest text in
   the item and the course title the largest. A technician wants to know when,
   and an unremarkable due date needs to be legible, not just the overdue one. */
.tdr-portal .deadline-info {
	font-size: var(--tdr-fs-sm);
	font-weight: 600;
	text-align: right;
}

.tdr-portal .hidden-upcoming {
	display: none;
}

/* Buttons ------------------------------------------------------------------- */

.tdr-portal .staff-btn,
.tdr-portal a.staff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin-top: auto;
	padding: .6rem 1.1rem;
	border: 1px solid var(--tdr-yellow);
	border-radius: var(--tdr-r-sm);
	background: var(--tdr-yellow);
	color: var(--tdr-ink);
	font-size: var(--tdr-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background .2s var(--tdr-ease), border-color .2s var(--tdr-ease);
}

.tdr-portal a.staff-btn:hover {
	background: var(--tdr-yellow-deep);
	border-color: var(--tdr-yellow-deep);
	color: var(--tdr-ink);
}

.tdr-portal .load-more-container {
	margin-top: auto;
	padding-top: .9rem;
	text-align: center;
}

.tdr-portal button.load-more-btn {
	padding: .4rem .8rem;
	border: 0;
	border-radius: var(--tdr-r-sm);
	background: transparent;
	color: var(--tdr-ink-soft);
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s var(--tdr-ease), color .2s var(--tdr-ease);
}

.tdr-portal button.load-more-btn:hover {
	background: var(--tdr-yellow-soft);
	color: var(--tdr-ink);
}

/* Quick actions ------------------------------------------------------------- */

.tdr-portal .quick-actions {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.tdr-portal .quick-actions a,
.tdr-portal .quick-actions a:visited {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .65rem .9rem;
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-sm);
	background: var(--tdr-surface-alt);
	color: var(--tdr-ink);
	font-size: var(--tdr-fs-sm);
	font-weight: 500;
	transition: background .2s var(--tdr-ease), border-color .2s var(--tdr-ease);
}

.tdr-portal .quick-actions a:hover {
	background: var(--tdr-yellow-soft);
	border-color: var(--tdr-yellow-line);
}

.tdr-portal .quick-actions #tdr-send-reminder-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin-top: .25rem;
	padding: .65rem .9rem;
	border: 1px solid var(--tdr-yellow);
	border-radius: var(--tdr-r-sm);
	background: var(--tdr-yellow);
	color: var(--tdr-ink);
	font-size: var(--tdr-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background .2s var(--tdr-ease);
}

.tdr-portal .quick-actions #tdr-send-reminder-btn:hover {
	background: var(--tdr-yellow-deep);
}

.tdr-portal .quick-actions #tdr-send-reminder-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.tdr-portal .tdr-reminder-status {
	display: block;
	margin-top: .5rem;
	font-size: var(--tdr-fs-xs);
	color: var(--tdr-ink-soft);
	text-align: center;
}

/* Acknowledgement feed ------------------------------------------------------ */

.tdr-portal .recent-acknowledgements-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tdr-portal .acknowledgement-item {
	padding: .7rem 0;
	border-bottom: 1px solid var(--tdr-line-soft);
}

.tdr-portal .acknowledgement-item:last-child {
	border-bottom: 0;
}

.tdr-portal .acknowledgement-info {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	align-items: baseline;
}

.tdr-portal .acknowledged-text {
	font-size: var(--tdr-fs-sm);
	color: var(--tdr-ink-mute);
}

.tdr-portal .acknowledgement-info .resource-title {
	font-size: var(--tdr-fs-sm);
	color: var(--tdr-ink-soft);
}

.tdr-portal .acknowledgement-date {
	margin-top: .15rem;
	font-size: var(--tdr-fs-xs);
	color: var(--tdr-ink-mute);
}

/* Full-width certificates card ---------------------------------------------- */

.tdr-portal .certificates-card .card-content .dashboard-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

/* Responsive ---------------------------------------------------------------- */

/* The old sheet collapsed both cols-2 and cols-3 straight to a single column at
   1024px, which was the worst layout moment in the product. */
@media (max-width: 1180px) {
	.tdr-portal .dashboard-grid.cols-3 {
		columns: 2;
	}

}

@media (max-width: 768px) {
	.tdr-portal .dashboard-container {
		padding: 2rem 1.25rem 3rem;
	}

	.tdr-portal .dashboard-grid.cols-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.tdr-portal .dashboard-grid.cols-3 {
		columns: 1;
	}

	.tdr-portal .dashboard-header h1 {
		font-size: var(--tdr-fs-xl);
	}

	.tdr-portal .user-info,
	.tdr-portal .certificate-item {
		flex-direction: column;
		align-items: flex-start;
		gap: .3rem;
	}

	.tdr-portal .upcoming-deadline-item {
		grid-template-columns: auto 1fr;
	}

	.tdr-portal .upcoming-deadline-item .course-title {
		white-space: normal;
	}

	.tdr-portal .deadline-info {
		grid-column: 2;
		text-align: left;
	}
}

@media (max-width: 480px) {
	/* Stack the summary one per line rather than letting it wrap unevenly. */
	.tdr-portal .tdr-summary {
		gap: .6rem 0;
	}

	.tdr-portal .tdr-summary__item {
		flex-basis: 100%;
	}
}

/******************
URGENT NOTIFICATIONS
******************/

.tdr-portal .urgent-notifications-section {
	margin-bottom: 1.25rem;
	background: var(--tdr-surface);
	border: 1px solid var(--tdr-yellow-line);
	border-radius: var(--tdr-r-md);
	box-shadow: var(--tdr-shadow);
	overflow: hidden;
}

.tdr-portal .notifications-header {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .95rem 1.25rem;
	background: var(--tdr-yellow-soft);
	border-bottom: 1px solid var(--tdr-yellow-line);
}

.tdr-portal .notifications-header h2 {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	color: var(--tdr-ink);
	font-size: var(--tdr-fs-sm);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tdr-portal .notifications-header h2 i {
	font-style: normal;
	padding: 0;
	font-size: var(--tdr-fs-base);
	color: var(--tdr-warn);
}

.tdr-portal .notifications-header p {
	display: none;
}

.tdr-portal .notifications-grid {
	display: flex;
	flex-direction: column;
	padding: 0 1.25rem;
}

.tdr-portal .notification-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
}

.tdr-portal .notification-item:not(:last-child) {
	border-bottom: 1px solid var(--tdr-line-soft);
}

.tdr-portal .notification-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--tdr-r-sm);
	background: var(--tdr-yellow-soft);
}

.tdr-portal .notification-icon i {
	font-style: normal;
	padding: 0;
	width: auto;
	font-size: var(--tdr-fs-base);
	color: var(--tdr-warn);
}

.tdr-portal .notification-content {
	flex: 1;
	min-width: 0;
}

.tdr-portal .notification-content h4 {
	margin: 0 0 .15rem;
	font-size: var(--tdr-fs-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tdr-ink-mute);
}

.tdr-portal .notification-content p {
	margin: 0;
	font-size: var(--tdr-fs-base);
	color: var(--tdr-ink);
}

.tdr-portal .notification-description {
	color: var(--tdr-ink-soft);
	font-size: var(--tdr-fs-sm);
	margin-top: .15rem;
}

.tdr-portal .urgent-btn,
.tdr-portal a.urgent-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	padding: .55rem 1rem;
	border: 1px solid var(--tdr-yellow);
	border-radius: var(--tdr-r-sm);
	background: var(--tdr-yellow);
	color: var(--tdr-ink);
	font-size: var(--tdr-fs-sm);
	font-weight: 600;
	transition: background .2s var(--tdr-ease);
}

.tdr-portal a.urgent-btn:hover {
	background: var(--tdr-yellow-deep);
	color: var(--tdr-ink);
}

.tdr-portal .urgent-btn i {
	font-style: normal;
	padding: 0;
	width: auto;
	font-size: var(--tdr-fs-xs);
	transition: transform .2s var(--tdr-ease);
}

.tdr-portal .urgent-btn:hover i {
	transform: translateX(2px);
}

@media (max-width: 768px) {
	.tdr-portal .notification-item {
		flex-wrap: wrap;
	}

	.tdr-portal .notification-action {
		width: 100%;
	}

	.tdr-portal .urgent-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Compliance report styles live in assets/css/compliance.css. */

/* Main layout structure */
.tdr-portal .dynamic-resource-container {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.tdr-portal .main-category-sidebar {
	flex: 0 0 250px;
}

.tdr-portal .main-content-area {
	flex: 1;
}

/* Main category navigation (vertical sidebar) */
.tdr-portal ul.main-category-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.tdr-portal .main-category-nav li {
	margin-bottom: 10px;
}

.tdr-portal .main-category-nav a {
	padding: 15px 20px;
	display: block;
	text-decoration: none;
	color: #333;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.tdr-portal .main-category-nav li.active a {
	font-weight: bold;
	background-color: var(--tdr-yellow);
	color: white;
}

.tdr-portal .main-category-nav a:hover {
	background-color: #f5f5f5;
}

/* Subcategory navigation (horizontal tabs) */
.tdr-portal .nested-category-container {
	display: flex;
	flex-direction: column;
}

.tdr-portal .subcategory-tabs {
	margin-bottom: 20px;
}

.tdr-portal ul.subcategory-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.tdr-portal .subcategory-nav li {
	margin: 0;
}

.tdr-portal .subcategory-nav a {
	display: block;
	padding: 10px 15px;
	background: #f5f5f5;
	text-decoration: none;
	border-radius: 10px;
	transition: background 0.3s ease;
	border: 1px solid #ddd;
	white-space: nowrap;
}

.tdr-portal .subcategory-nav a:hover {
	background: #e9e9e9;
}

.tdr-portal .subcategory-nav li.active a {
	background: var(--tdr-yellow);
	color: white;
	border-color: var(--tdr-yellow);
}

.tdr-portal .subcategory-content {
	flex: 1;
}

.tdr-portal .subcategory-tab-content {
	display: none;
}

.tdr-portal .subcategory-tab-content.active {
	display: block;
}

.tdr-portal .resource-tab-content {
	display: none;
}

.tdr-portal .resource-category {
	font-size: 14px;
}

.tdr-portal .resource-acknowledgement-wrapper {
	align-items: center;
	margin-top: auto;
}

.tdr-portal .resource-acknowledgement-wrapper input,
.tdr-portal .resource-acknowledgement-wrapper label {
	margin: 0;
	color: black;
	font-weight: 400;
}

.tdr-portal .resource-tab-content.active {
	display: block;
}

.tdr-portal .resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.tdr-portal .resource-item {
	border: 1px solid black;
	padding: 15px;
	border-radius: 10px;
	transition: all 0.3s ease;
	height: 100%;
	justify-content: space-between;
	display: flex;
	flex-direction: column;
}

.tdr-portal .resource-item.read {
	background-color: #f8f9fa;
	border-color: #dee2e6;
}

.tdr-portal .resource-item.unread {
	background-color: #fff;
}

.tdr-portal .resource-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.tdr-portal .resource-header .document-icon {
	font-size: 1.2em;
	text-decoration: none;
	transition: color 0.3s ease;
}

/* View button styling */
.tdr-portal .resource-actions {
	margin: 15px 0;
}

.tdr-portal .view-btn {
	display: inline-block;
	padding: 8px 16px;
	background: var(--tdr-yellow);
	color: white;
	text-decoration: none;
	border-radius: var(--tdr-r-sm);
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	border: 1px solid var(--tdr-yellow);
	text-align: center;
}

.tdr-portal .view-btn:hover {
	background: white;
	color: var(--tdr-yellow);
	border-color: var(--tdr-yellow);
}


.tdr-portal .resource-header h4 {
	margin: 0;
	flex: 1;
	padding-left: 1em;
	font-weight: 600;
}

.tdr-portal .resource-header h4 a {
	transition: all 0.3s ease;
}

.tdr-portal .resource-header .document-icon,
.tdr-portal .resource-header .document-icon i,
.tdr-portal .resource-header h4 a {
	transition: color 0.3s ease;
}

.tdr-portal .resource-header:hover .document-icon,
.tdr-portal .resource-header:hover .document-icon i,
.tdr-portal .resource-header:hover h4 a {
	color: var(--tdr-yellow);
}

.tdr-portal .resource-header i {
	font-style: normal;
}

/* ====================================================================
	Resource Acknowledgement Styles
==================================================================== */

/* Disclaimer styling */
.tdr-portal .acknowledgement-disclaimer {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}

.tdr-portal .acknowledgement-disclaimer p {
    margin: 0;
    color: #856404;
    font-size: 14px;
}

/* Resources page disclaimer - full width styling */
.tdr-portal .resources-page-disclaimer {
    width: 100%;
	flex: 0 0 100%;
}

/* Checkbox container */
.tdr-portal .acknowledgement-checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.tdr-portal .acknowledgement-checkbox-container input[type="checkbox"] {
    margin-top: 3px;
}

.tdr-portal .acknowledgement-checkbox-container label {
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}


.tdr-portal .acknowledgement-date small {
	text-wrap: wrap;
    text-align: left;
}

.tdr-portal .acknowledgement-date .fas {
    color: var(--tdr-ok);
}

/* Dashboard resource acknowledgement dates */
.tdr-portal .resource-acknowledgement-date {
    margin-top: 5px;
    color: var(--tdr-ink-soft);
}

.tdr-portal .resource-acknowledgement-date small {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--tdr-fs-xs);
}

.tdr-portal .resource-acknowledgement-date .fas {
    color: var(--tdr-ok);
}

/* Admin dashboard acknowledgement styles */
.tdr-portal .user-recent-acknowledgements {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--tdr-line-soft);
}

.tdr-portal .recent-acknowledgement {
    margin-top: 2px;
}

/* An acknowledgement date at 11px, on the card an admin opens to check who has
   acknowledged what. PRODUCT.md: nothing below 13px, ever. */
.tdr-portal .recent-acknowledgement small {
    color: var(--tdr-ink-soft);
    font-size: var(--tdr-fs-xs);
}

/* Recent acknowledgements card */
.tdr-portal .recent-acknowledgements-card .acknowledgement-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--tdr-line-soft);
}

.tdr-portal .recent-acknowledgements-card .acknowledgement-item:last-child {
    border-bottom: none;
}

.tdr-portal .acknowledgement-info {
    flex: 1;
}

.tdr-portal .acknowledgement-date {
    text-align: left;
    white-space: nowrap;
    margin-left: 10px;
}

.tdr-portal .acknowledgement-date small {
    color: var(--tdr-ink-soft);
    font-size: var(--tdr-fs-xs);
}

/* Enhanced styling for dashboard lists */
.tdr-portal .dashboard-list li {
    position: relative;
}

.tdr-portal .dashboard-list .resource-acknowledgement-date,
.tdr-portal .dashboard-list .recent-acknowledgement {
    margin-left: 20px;
}

/* Responsive adjustments for acknowledgements */
@media (max-width: 768px) {
    .tdr-portal .recent-acknowledgements-card .acknowledgement-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .tdr-portal .acknowledgement-date {
        text-align: left;
        margin-left: 0;
        margin-top: 4px;
    }
    
    .tdr-portal .acknowledgement-checkbox-container {
        flex-direction: column;
        gap: 5px;
    }
    
    .tdr-portal .acknowledgement-checkbox-container input[type="checkbox"] {
        margin-top: 0;
    }
}

/* Urgent notifications are defined with the dashboard design tokens above.
   The block that used to sit here was the only card in the product with a
   coloured header, and the only rule referencing the Elementor global
   directly; both are now expressed through the shared token set. */

/* ============================================================================
   ADMIN PAGES — CERTIFICATES & RESOURCE HISTORY
   Shared design system for the admin-only staff-portal pages.
   ========================================================================= */

/* Page header --------------------------------------------------------------- */

.tdr-portal .admin-page-header {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--tdr-line);
}

.tdr-portal .admin-page-header__main h1 {
	color: var(--tdr-ink);
	margin: 0 0 6px 0;
	letter-spacing: -0.01em;
}

.tdr-portal .admin-page-header__main p {
	color: var(--tdr-ink-soft);
	margin: 0;
	max-width: 60ch;
}

/* Full-width search bar (certificates page) -------------------------------- */

.tdr-portal .admin-certificates-page .cert-search-bar {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 24px;
	background: var(--tdr-surface);
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-sm);
	transition: background-color .2s var(--tdr-ease), border-color .2s var(--tdr-ease), box-shadow .25s var(--tdr-ease);
}

.tdr-portal .admin-certificates-page .cert-search-bar:focus-within {
	border-color: var(--tdr-yellow-deep);
	box-shadow: 0 0 0 4px rgba(254, 211, 50, 0.25);
}

.tdr-portal .cert-search-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	color: var(--tdr-ink);
	flex: 0 0 auto;
}

.tdr-portal .admin-certificates-page .cert-search-bar__icon i {
	color: var(--tdr-ink);
	margin: 0;
	font-style: normal;
}

.tdr-portal .cert-search-bar__icon i {
	font-style: normal;
}

.tdr-portal .cert-search-bar__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 64px;
	padding: 0 16px 0 0;
	border: 0;
	background: transparent;
	color: var(--tdr-ink);
	outline: none;
	font-family: inherit;
}

.tdr-portal .cert-search-bar__input::placeholder {
	color: var(--tdr-ink-soft);
	opacity: 1;
}

.tdr-portal .cert-search-bar__count {
	flex: 0 0 auto;
	padding: 0 20px;
	color: var(--tdr-ink-soft);
	border-left: 1px solid var(--tdr-line);
	height: 32px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.tdr-portal .cert-search-bar__count:empty {
	display: none;
}

/* Certificates: staff list ------------------------------------------------- */

.tdr-portal .cert-staff-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tdr-portal .cert-staff-list .cert-staff-row {
	background: var(--tdr-surface);
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-md);
	padding: 0;
	transition: background-color .2s var(--tdr-ease), border-color .2s var(--tdr-ease), box-shadow .25s var(--tdr-ease);
	overflow: hidden;
	position: relative;
}

.tdr-portal .cert-staff-row__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px 18px 28px;
	border-bottom: 1px solid var(--tdr-line);
	background: var(--tdr-surface-alt);
}

.tdr-portal .cert-staff-row__identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tdr-portal .cert-staff-row__identity .user-name {
	font-weight: 700;
	color: var(--tdr-ink);
	letter-spacing: -0.005em;
}

.tdr-portal .cert-staff-row__identity .user-email {
	color: var(--tdr-ink-soft);
}

/* This was a filled yellow pill on every single row, which is yellow marking
   nothing. It reads as a count, so it gets the badge treatment, and the row that
   has expired certificates is the one that earns colour. */
.tdr-portal .cert-staff-row__count {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 5px 12px;
	background: var(--tdr-surface-alt);
	border: 1px solid var(--tdr-line);
	color: var(--tdr-ink);
	border-radius: var(--tdr-r-pill);
	font-size: var(--tdr-fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.tdr-portal .cert-staff-row__count:has(.cert-staff-row__expired) {
	background: var(--tdr-bad-bg);
	border-color: var(--tdr-bad);
	color: var(--tdr-bad);
}

.tdr-portal .cert-staff-row__count span {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tdr-portal .admin-certificates-page .user-certificates.full-list {
	display: block;
	padding: 18px 22px 22px 28px;
	margin-top: 0;
}

.tdr-portal .admin-certificates-page .certificate-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	background: var(--tdr-surface);
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-sm);
	transition: background-color .2s var(--tdr-ease), border-color .2s var(--tdr-ease), box-shadow .25s var(--tdr-ease);
	margin: 0;
}

.tdr-portal .admin-certificates-page .certificate-card:hover {
	border-color: var(--tdr-yellow-deep);
	background: var(--tdr-yellow-soft);
	transform: translateY(-1px);
}

.tdr-portal .admin-certificates-page .certificate-card__link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
	color: var(--tdr-ink);
	text-decoration: none;
	line-height: 1.4;
}

.tdr-portal .admin-certificates-page .certificate-card__link {
	color: var(--tdr-ink);
}

.tdr-portal .admin-certificates-page .certificate-card__link:hover {
	color: var(--tdr-ink);
	text-decoration: underline;
	text-decoration-color: var(--tdr-yellow-deep);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tdr-portal .admin-certificates-page .certificate-card__link i {
	margin: 0;
	flex: 0 0 auto;
	margin-top: 2px;
}

.tdr-portal .admin-certificates-page .certificate-card__link i.yellow {
	color: var(--tdr-yellow-deep);
}

.tdr-portal .admin-certificates-page .certificate-card__title {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}

.tdr-portal .admin-certificates-page .certificate-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tdr-portal .admin-certificates-page .certificate-completion,
.tdr-portal .admin-certificates-page .certificate-expiry {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--tdr-surface-alt);
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-sm);
	font-style: normal;
	color: var(--tdr-ink-soft);
	margin: 0;
}

.tdr-portal .admin-certificates-page .certificate-completion .meta-label,
.tdr-portal .admin-certificates-page .certificate-expiry .meta-label {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: var(--tdr-ink-soft);
}

.tdr-portal .admin-certificates-page .certificate-completion .meta-value,
.tdr-portal .admin-certificates-page .certificate-expiry .meta-value {
	font-weight: 600;
	color: var(--tdr-ink);
}

.tdr-portal .admin-certificates-page .certificate-card--expired {
	background: var(--tdr-surface-alt);
	border-color: var(--tdr-line);
}

.tdr-portal .admin-certificates-page .certificate-card--expired:hover {
	border-color: var(--tdr-bad);
	background: var(--tdr-bad-bg);
}

.tdr-portal .admin-certificates-page .certificate-card--expired .certificate-expiry .meta-value {
	color: var(--tdr-bad);
}

.tdr-portal .cert-staff-row__expired {
	display: inline-block;
	margin-left: .4rem;
	padding: .1rem .45rem;
	border-radius: var(--tdr-r-pill);
	background: var(--tdr-bad-bg);
	color: var(--tdr-bad);
	font-style: normal;
	font-weight: 700;
	font-size: var(--tdr-fs-xs);
}

.tdr-portal .admin-certificates-page .no-results-msg {
	margin-top: 20px;
	padding: 24px;
	text-align: center;
	background: var(--tdr-surface);
	border: 1px dashed var(--tdr-line);
	border-radius: var(--tdr-r-md);
	color: var(--tdr-ink-soft);
}

/* Resource history: full-page card + table -------------------------------- */

.tdr-portal .admin-resource-history-page .full-page-card {
	background: var(--tdr-surface);
	border: 1px solid var(--tdr-line);
	border-radius: var(--tdr-r-md);
	box-shadow: var(--tdr-shadow);
}

.tdr-portal .admin-resource-history-page .full-page-card .card-content {
	padding: 0;
}

.tdr-portal .history-card__topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--tdr-line);
	background: var(--tdr-surface-alt);
}

.tdr-portal .admin-resource-history-page .history-meta {
	margin: 0;
	color: var(--tdr-ink-soft);
}

.tdr-portal .admin-resource-history-page .history-meta strong {
	color: var(--tdr-ink);
	font-weight: 700;
}

.tdr-portal .admin-resource-history-page .history-meta--muted {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.tdr-portal .resource-history-table-wrap {
	overflow-x: auto;
}

.tdr-portal .resource-history-table {
	width: 100%;
	border-collapse: collapse;
}

.tdr-portal .resource-history-table thead th {
	position: sticky;
	top: 0;
	background: var(--tdr-surface-alt);
	color: var(--tdr-ink-soft);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	padding: 14px 20px;
	white-space: nowrap;
	/* border: 0 used to sit at the end of this rule and reset the border-bottom
	   set above it. Order matters for the shorthand. */
	border: 0;
	border-bottom: 1px solid var(--tdr-line);
}

.tdr-portal .resource-history-table thead th:first-child {
	padding-left: 24px;
}

.tdr-portal .resource-history-table thead th:last-child {
	padding-right: 24px;
}

.tdr-portal .resource-history-table tbody tr {
	transition: background 0.2s ease;
	border-bottom: 1px solid var(--tdr-line);
}

.tdr-portal .resource-history-table tbody tr:nth-child(even) {
	background: var(--tdr-surface-alt);
}

.tdr-portal .resource-history-table tbody tr:hover {
	background: var(--tdr-yellow-soft);
}

.tdr-portal .resource-history-table tbody tr:last-child {
	border-bottom: 0;
}

.tdr-portal .resource-history-table td {
	padding: 14px 20px;
	color: var(--tdr-ink);
	vertical-align: middle;
	border: 0;
}

.tdr-portal .resource-history-table td:first-child {
	padding-left: 24px;
}

.tdr-portal .resource-history-table td:last-child {
	padding-right: 24px;
}

.tdr-portal .rh-name {
	font-weight: 700;
	color: var(--tdr-ink);
}

.tdr-portal .rh-email {
	color: var(--tdr-ink-soft);
	word-break: break-all;
}

.tdr-portal .rh-resource {
	font-weight: 500;
	color: var(--tdr-ink);
}

.tdr-portal .rh-date {
	display: block;
	font-weight: 600;
	color: var(--tdr-ink);
	font-variant-numeric: tabular-nums;
}

.tdr-portal .rh-time {
	display: block;
	color: var(--tdr-ink-soft);
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}

/* Pagination --------------------------------------------------------------- */

.tdr-portal .resource-history-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	border-top: 1px solid var(--tdr-line);
	background: var(--tdr-surface-alt);
	flex-wrap: wrap;
}

.tdr-portal .resource-history-pagination .page-link {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--tdr-yellow);
	border: 1px solid var(--tdr-yellow);
	border-radius: var(--tdr-r-sm);
	color: var(--tdr-ink);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s var(--tdr-ease), border-color .2s var(--tdr-ease), box-shadow .25s var(--tdr-ease);
	white-space: nowrap;
}

.tdr-portal .resource-history-pagination a.page-link:hover {
	background: var(--tdr-ink);
	color: white;
	border-color: var(--tdr-ink);
}

.tdr-portal .resource-history-pagination .page-link--disabled {
	background: var(--tdr-surface);
	border: 1px solid var(--tdr-line);
	color: var(--tdr-ink-soft);
	cursor: not-allowed;
	opacity: 0.6;
}

.tdr-portal .resource-history-pagination .page-current {
	color: var(--tdr-ink-soft);
	letter-spacing: 0.02em;
}

.tdr-portal .resource-history-pagination .page-current strong {
	color: var(--tdr-ink);
	font-weight: 700;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 900px) {
	.tdr-portal .cert-search-bar__icon {
		width: 48px;
		height: 48px;
	}

	.tdr-portal .cert-search-bar__input {
		height: 48px;
	}

	.tdr-portal .cert-search-bar__count {
		padding: 0 12px;
	}

	.tdr-portal .cert-staff-row__head {
		padding: 14px 18px 14px 22px;
	}

	.tdr-portal .admin-certificates-page .user-certificates.full-list {
		grid-template-columns: 1fr;
		padding: 14px 18px 18px 22px;
		gap: 10px;
	}

	.tdr-portal .resource-history-pagination {
		justify-content: center;
	}

	.tdr-portal .resource-history-pagination .page-current {
		order: -1;
		flex-basis: 100%;
		text-align: center;
	}
}

@media (max-width: 640px) {
	/* Stack the table into card-like rows on small screens */
	.tdr-portal .resource-history-table thead {
		display: none;
	}

	.tdr-portal .resource-history-table,
	.tdr-portal .resource-history-table tbody,
	.tdr-portal .resource-history-table tr,
	.tdr-portal .resource-history-table td {
		display: block;
		width: 100%;
	}

	.tdr-portal .resource-history-table tbody tr {
		padding: 12px 18px;
		border-bottom: 1px solid var(--tdr-line);
	}

	.tdr-portal .resource-history-table tbody tr:nth-child(even) {
		background: var(--tdr-surface-alt);
	}

	.tdr-portal .resource-history-table td {
		padding: 6px 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.tdr-portal .resource-history-table td::before {
		content: attr(data-label);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-weight: 700;
		color: var(--tdr-ink-soft);
	}

	.tdr-portal .history-card__topbar {
		flex-direction: column;
		align-items: flex-start;
		padding: 14px 18px;
	}
}