/* Dynamic OG Image Generator — Admin & Gutenberg styles */

/* ---- Brand header (PlugUpp logo on the title row, cross-plugin standard) ---- */
.doig-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 4px;
}

.doig-page-head h1 {
	margin: 0;
	padding: 9px 0 4px;
}

.doig-brand-logo img {
	height: 32px;
	width: auto;
	display: block;
}

/* ---- Admin footer (version + brand byline, cross-plugin standard) ---- */
.doig-admin-footer {
	color: #646970;
	margin-top: 24px;
	font-size: 12px;
}

/* ---- Settings page ---- */
.doig-wrap h2 {
	margin-top: 1.5em;
}

.doig-api-key-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

#doig-test-result {
	font-weight: 500;
}

#doig-test-result.doig-ok  { color: #1a7f37; }
#doig-test-result.doig-err { color: #d63638; }

.doig-cache-action {
	margin: 0 0 20px;
}

.doig-cache-action .description {
	margin-top: 6px;
}

.doig-inline-result {
	font-weight: 500;
}

.doig-inline-result.doig-ok  { color: #1a7f37; }
.doig-inline-result.doig-err { color: #d63638; }

/* ---- Tab nav: contextual docs link, aligned right ---- */
/*
 * The nav-tab-wrapper renders its tab links on the left in the normal
 * flow. The docs link is the last child and floats right so it sits in
 * the empty space at the right end of the tab strip. Vertical alignment
 * matches the WP tab baseline; styling is intentionally low-key
 * (subtle link, no tab background) so the eye still treats the tabs as
 * the primary navigation and the docs link as a secondary affordance.
 *
 * The dashicons icons get the same line-height as the link text so they
 * sit on the baseline rather than dropping below it.
 */
.doig-nav-tab-wrapper .doig-docs-link {
	float: right;
	margin: 9px 0 0;
	padding: 4px 8px;
	text-decoration: none;
	font-size: 13px;
	color: #2271b1;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.doig-nav-tab-wrapper .doig-docs-link:hover,
.doig-nav-tab-wrapper .doig-docs-link:focus {
	color: #135e96;
	text-decoration: underline;
}

.doig-nav-tab-wrapper .doig-docs-link .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

/* ---- Premium tab nav accent (CONVENTIONS 2026-06-24) ----
   Standard says the Premium tab itself should be visually accented so
   it stands out among the grey nav tabs - a small blue star (the
   banner's dashicons-star-filled, ~14px) before the label and the label
   in the banner blue (#2271b1). The icon alone is too easy to skim past;
   together they catch the eye without screaming. Decorative star is
   aria-hidden in markup so screen readers ignore it - the word
   "Premium" carries the meaning. */
.doig-nav-tab-wrapper .nav-tab.doig-nav-tab--premium {
	color: #2271b1;
}

.doig-nav-tab-wrapper .nav-tab.doig-nav-tab--premium:hover,
.doig-nav-tab-wrapper .nav-tab.doig-nav-tab--premium:focus,
.doig-nav-tab-wrapper .nav-tab.doig-nav-tab--premium.nav-tab-active {
	color: #2271b1;
}

.doig-nav-tab-wrapper .nav-tab.doig-nav-tab--premium .dashicons-star-filled {
	color: #2271b1;
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1;
	vertical-align: -2px;
	margin-right: 4px;
}

/* ---- Settings group headings and sub-fields ---- */
.form-table tr.doig-group-heading th {
	padding-top: 20px;
	padding-bottom: 4px;
}
.form-table tr.doig-group-heading td {
	padding: 0;
}
.form-table tr.doig-sub-field th {
	padding-left: 2em;
}
.form-table tr.doig-group-end th,
.form-table tr.doig-group-end td {
	padding-bottom: 20px;
	border-bottom: 1px solid #dcdcde;
}

/* ---- Custom post types sub-group heading (Premium) ----
   Sits between the Pages row and the CPT rows below it. Previously
   used `<p class="description">` (washed-out grey) with a tight top
   margin, which Steve flagged 2026-06-25 as looking broken: too quiet
   to read as a heading, too unique to blend in as a row label.
   Standard text colour now (so it stops reading as disabled) and a
   bigger top margin (so it separates visibly from the Pages row above).
   Font size deliberately left at the inherited default - the spacing
   change is what makes it feel like a heading, no need to bump size
   and break the row-label rhythm of the rows below. */
.doig-cpts-heading {
	color: #1d2327;
	margin: 16px 0 6px;
}
/* ---- Setup banner (shown when Freemius is not yet activated) ---- */

.doig-setup-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff8e5;
	border: 1px solid #f0c674;
	border-left: 4px solid #dba617;
	border-radius: 3px;
	padding: 14px 18px;
	max-width: 760px;
	margin-top: 16px;
}

.doig-setup-banner__icon {
	flex-shrink: 0;
	color: #dba617;
	font-size: 22px;
	width: 22px;
	height: 22px;
	line-height: 1;
}

.doig-setup-banner__content {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex-grow: 1;
}

.doig-setup-banner__content strong {
	font-size: 13px;
	color: #1d2327;
}

.doig-setup-banner__content span {
	font-size: 12px;
	color: #50575e;
}

.doig-setup-banner__button {
	flex-shrink: 0;
}

/* ---- Upgrade banner (2.4.0 M1.4: SSAA 1.0.13 pattern port) ----
   Bordered card with star icon, named-features sub-line, and a
   standalone "Try Premium" button. Shown on every Settings sub-tab
   except the Premium tab; suppressed on the Dashboard entirely (the
   Dashboard's own quota line implies the upsell ambiently). Pre-M1.4
   was a clickable <a class="doig-upgrade-banner"> wrapping the whole
   card; the new structure is a <div> containing an icon span, a
   content div, and a separate <a class="button button-primary"> for
   the CTA. */

.doig-upgrade-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #f0f6fc;
	border: 1px solid #c5d9ed;
	border-left: 4px solid #2271b1;
	border-radius: 3px;
	padding: 14px 18px;
	max-width: 760px;
	margin: 16px 0;
}

.doig-upgrade-banner__icon {
	color: #2271b1;
	font-size: 22px;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.doig-upgrade-banner__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.doig-upgrade-banner__content strong {
	font-size: 14px;
}

.doig-upgrade-banner__content span {
	color: #50575e;
}

.doig-upgrade-banner__button {
	flex-shrink: 0;
	margin-left: auto;
}

/* ---- Premium tab (2.4.0 M1.4: SSAA 1.0.13 pattern port) ----
   Prose feature comparison surface. Rendered only when ! is_premium().
   Intro paragraph, top + bottom CTA rows, four feature-group cards in a
   2x2 grid (1-col on mobile), licence-expiry reassurance paragraph. No
   form fields, no mock UI, no implementation traces. */

.doig-premium-tab {
	max-width: 760px;
	margin-top: 12px;
}

.doig-premium-intro {
	font-size: 14px;
	line-height: 1.6;
	color: #50575e;
	max-width: 680px;
}

.doig-premium-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0;
}

.doig-premium-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin: 20px 0;
}

.doig-premium-group {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 14px 18px;
}

.doig-premium-group h3 {
	margin: 0 0 8px;
	font-size: 14px;
}

.doig-premium-group ul {
	margin: 0;
	list-style: disc;
	padding-left: 18px;
}

.doig-premium-group li {
	margin: 4px 0;
	color: #3c434a;
}

@media screen and (max-width: 782px) {
	.doig-premium-groups {
		grid-template-columns: 1fr;
	}
}

/* ---- Dashboard summary boxes (2.4.0 M1.4: port from M1.2 inline styles) ----
   Four-box grid at the top of the Dashboard sub-page showing Cached
   screenshots / Pending / Failed / Last captured. Same shape as SSAA's
   summary boxes but adapted to DOIG's four-column status surface. */

.doig-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 24px;
}

.doig-summary-box {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 14px 18px;
}

.doig-summary-value {
	display: block;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.doig-summary-value--pending {
	color: #dba617;
}

.doig-summary-value--failed {
	color: #b32d2e;
}

.doig-summary-value--time {
	font-size: 14px;
	line-height: 1.4;
	padding-top: 6px;
}

.doig-summary-label {
	color: #50575e;
}

@media screen and (max-width: 782px) {
	.doig-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Dashboard status tables (2.5.2) ----
   The three tables are WP_List_Table subclasses, so the title font, the
   hover-revealed `Edit | View` row actions and the responsive toggle all
   come from core's list-tables CSS. Nothing here restyles them - these
   rules are column widths (core's tables are `table-layout: fixed`) plus
   the DOIG-specific cell chrome. The table class comes from each table's
   `plural` arg. */

.doig-recent .column-image {
	width: 110px;
}

.doig-recent .column-type,
.doig-pending .column-type,
.doig-failed .column-type {
	width: 10%;
}

.doig-recent .column-source {
	width: 18%;
}

.doig-recent .column-captured,
.doig-pending .column-queued {
	width: 14%;
}

.doig-pending .column-attempts {
	width: 10%;
}

.doig-pending .column-job_id {
	width: 24%;
}

.doig-failed .column-reason {
	width: 45%;
}

/* Fixed-size preview of the cached WebP. 90x47 keeps the OG 1200x630 ratio;
   the column is width-locked so rows without an image (dash fallback) stay
   aligned. */
.doig-recent-thumb {
	display: block;
	width: 90px;
	height: 47px;
	object-fit: cover;
	border: 1px solid #dcdcde;
	border-radius: 2px;
	background: #f0f0f1;
}

.doig-zoomable {
	cursor: zoom-in;
}

.doig-job-id {
	font-size: 11px;
}

.doig-attempts--exhausted {
	color: #b32d2e;
	font-weight: 600;
}

.doig-error-code {
	font-size: 11px;
	background: #fef0f0;
	color: #b32d2e;
	padding: 2px 6px;
	border-radius: 3px;
}

.doig-error-msg {
	color: #50575e;
}

.doig-warning-label {
	color: #b32d2e;
}

/* ---- Dashboard image lightbox (2.5.2) ----
   Click a Recent activity thumbnail to see the full-size capture. Vanilla
   jQuery, no library; mirrors SSAA's preview lightbox. Visibility is driven
   by the [hidden] attribute; `.doig-open` is only a JS state flag. */

.doig-img-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba( 0, 0, 0, 0.75 );
}

.doig-img-lightbox[hidden] {
	display: none;
}

.doig-img-lightbox img {
	display: block;
	max-width: 92vw;
	max-height: 80vh;
	border-radius: 4px;
	background: #fff;
}

.doig-lightbox-stage {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 92vw;
}

.doig-lightbox-imgwrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	overflow: hidden;
	border-radius: 4px;
}

.doig-img-lightbox-close {
	position: absolute;
	top: 12px;
	right: 18px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.doig-modal-open {
	overflow: hidden;
}

/* ---- Gutenberg sidebar ---- */
.doig-status-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.doig-status-label {
	font-weight: 500;
	color: var(--wp-components-color-foreground, #1e1e1e);
}

/* Status badges */
.doig-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.doig-badge--ready   { background: #d1e7dd; color: #0a3622; }
.doig-badge--pending { background: #fff3cd; color: #664d03; }
.doig-badge--failed  { background: #f8d7da; color: #58151c; }
.doig-badge--quota   { background: #fde8d0; color: #7b3200; }
.doig-badge--none    { background: #e9ecef; color: #495057; }

/* Timestamp */
.doig-timestamp {
	margin: 0;
	font-size: 12px;
	color: var(--wp-components-color-foreground-muted, #757575);
}

/* Preview thumbnail */
.doig-preview-wrap {
	width: 100%;
}

.doig-preview-img {
	width: 100%;
	height: auto;
	border: 1px solid var(--wp-components-color-border, #ddd);
	border-radius: 3px;
	display: block;
}

/* ---- Proxy status indicator ---- */
.doig-proxy-status {
	font-weight: 500;
}

.doig-proxy-status--checking { color: #757575; }
.doig-proxy-status--ok        { color: #1a7f37; }
.doig-proxy-status--err       { color: #d63638; }

/* ---- Gutenberg sidebar Premium feature card ----
 * Description-only upsell card at the bottom of the main panel for
 * free-build users. Yoast Premium SEO Analysis card pattern: visual
 * mark + lead line + bulleted named features + lock-icon CTA. No
 * mock UI, no greyed inputs.
 */
.doig-sidebar-premium-card__row {
	padding: 0;
}

.doig-sidebar-premium-card {
	border: 1px solid #c2d8f0;
	border-left: 4px solid #2271b1;
	background: #f0f6fc;
	border-radius: 3px;
	padding: 12px 14px;
	width: 100%;
	font-size: 12px;
	color: #1d2327;
}

.doig-sidebar-premium-card__head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	margin-bottom: 6px;
}

.doig-sidebar-premium-card__head-icon {
	color: #2271b1;
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

.doig-sidebar-premium-card__lead {
	margin: 0 0 8px;
	color: #50575e;
}

.doig-sidebar-premium-card__features {
	margin: 0 0 10px;
	padding-left: 0;
	list-style: none;
}

.doig-sidebar-premium-card__features li {
	margin: 0 0 4px;
	padding-left: 14px;
	position: relative;
	line-height: 1.4;
}

.doig-sidebar-premium-card__features li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: #2271b1;
	font-weight: 600;
}

.doig-sidebar-premium-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: #2271b1;
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	font-weight: 600;
}

.doig-sidebar-premium-card__cta:hover,
.doig-sidebar-premium-card__cta:focus {
	background: #135e96;
	color: #fff;
}

.doig-sidebar-premium-card__cta .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1;
}

/* Logs tab styles come from the shared-logging component (inline in
   DOIG_Log_UI::render_tab() - the cross-plugin plugupp-log-* classes). */
