/* ==========================================================================
   Skwirrel PIM Sync — Overview page redesign
   Same self-hosted brand fonts/icon font as the Debug and Settings tabs
   (Anek Latin, Roboto — both open-licensed Google Fonts — and Phosphor, MIT).
   Scoped to .skw-overview-page.
   ========================================================================== */

@font-face {
	font-family: 'Anek Latin';
	src: url('fonts/anek-latin-variable.woff2') format('woff2-variations');
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Phosphor';
	src: url('fonts/phosphor.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.skw-overview-page {
	--font-display: 'Anek Latin', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;

	--color-primary: hsl(220 100% 66%);
	--color-link: hsl(220 100% 40%);
	--color-link-hover: hsl(220 100% 32%);
	--color-lime: hsl(74 100% 71%);
	--color-neutral: hsl(220 10% 18%);
	--color-neutral-light: hsl(220 8% 40%);
	--color-lavender: hsl(245 55% 82%);
	--color-success-soft: hsl(120 50% 93%);
	--color-success-dark: hsl(145 55% 22%);
	--color-warning-soft: hsl(40 90% 93%);
	--color-warning-dark: hsl(30 70% 30%);
	--color-error: hsl(354 65% 58%);
	--color-error-soft: hsl(355 80% 95%);
	--color-error-dark: hsl(354 60% 32%);
	--radius-sm: 0.25rem;
	--radius-card: 10px;

	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1180px;
	font-family: var(--font-body);
	font-weight: 300;
	line-height: 1.7;
	color: var(--color-neutral);
}

.skw-overview-page a { color: var(--color-link); text-decoration: none; }
.skw-overview-page a:hover { color: var(--color-link-hover); text-decoration: underline; }

.skw-overview-page .ph {
	font-family: 'Phosphor' !important;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}
.skw-overview-page .ph-arrow-up-right:before { content: '\e092'; }
.skw-overview-page .ph-arrows-clockwise:before { content: '\e094'; }
.skw-overview-page .ph-bug:before { content: '\e5f4'; }
.skw-overview-page .ph-check-circle:before { content: '\e184'; }
.skw-overview-page .ph-clock:before { content: '\e19a'; }
.skw-overview-page .ph-clock-counter-clockwise:before { content: '\e1a0'; }
.skw-overview-page .ph-file-text:before { content: '\e23a'; }
.skw-overview-page .ph-gear:before { content: '\e270'; }
.skw-overview-page .ph-play:before { content: '\e3d0'; }
.skw-overview-page .ph-stack:before { content: '\e466'; }
.skw-overview-page .ph-warning-circle:before { content: '\e4e2'; }
.skw-overview-page .ph-warning-octagon:before { content: '\e4e4'; }
.skw-overview-page .ph.skw-spin { display: inline-block; }

/* -- Header -- */

.skw-overview-page .skw-ov-crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: -14px;
	font-size: 13px;
	color: var(--color-neutral-light);
}

.skw-overview-page .skw-ov-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.skw-overview-page .skw-ov-header h1 {
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	color: var(--color-neutral);
}
.skw-overview-page .skw-ov-header p {
	margin: 6px 0 0;
	color: var(--color-neutral-light);
	font-size: 14px;
	max-width: 62ch;
}
.skw-overview-page .skw-ov-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Design-system Button: variant "outline" size "sm", and variant "primary" size "md". */
.skw-overview-page .skw-ov-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 20px;
	border: 1px solid var(--color-neutral);
	border-radius: var(--radius-sm);
	background: transparent;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.25;
	color: var(--color-neutral);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.skw-overview-page .skw-ov-btn:hover,
.skw-overview-page .skw-ov-btn:focus { background: var(--color-neutral); color: #fff; text-decoration: none; box-shadow: none; }
.skw-overview-page .skw-ov-btn .ph { font-size: 16px; }
.skw-overview-page .skw-ov-btn.skw-ov-btn-solid {
	padding: 10px 24px;
	background: var(--color-neutral);
	color: #fff;
	font-size: 16px;
}
.skw-overview-page .skw-ov-btn.skw-ov-btn-solid:hover { background: hsl(220 10% 18% / .9); color: #fff; }
.skw-overview-page .skw-ov-btn.skw-ov-btn-disabled,
.skw-overview-page .skw-ov-btn.skw-ov-btn-disabled:hover { opacity: .5; cursor: default; background: var(--color-neutral); }

/* -- Last sync status (WP-notice style) -- */

.skw-overview-page .skw-ov-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #00a32a;
	box-shadow: 0 1px 1px rgb(0 0 0 / .04);
}
.skw-overview-page .skw-ov-status > .ph { font-size: 20px; color: #00a32a; }
.skw-overview-page .skw-ov-status.skw-ov-status-error { border-left-color: #d63638; }
.skw-overview-page .skw-ov-status.skw-ov-status-error > .ph { color: #d63638; }
.skw-overview-page .skw-ov-status-body { min-width: 240px; flex: 1; }
.skw-overview-page .skw-ov-status-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
}
.skw-overview-page .skw-ov-status-meta { color: #50575e; font-size: 13px; line-height: 1.5; }
.skw-overview-page .skw-ov-status-meta.skw-ov-status-warning { color: #996800; }

.skw-overview-page .skw-ov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.skw-overview-page .skw-ov-chip {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px;
	border: 1px solid #c3c4c7;
	background: #f6f7f7;
	color: #2c3338;
	font-size: 12px;
	line-height: 1.8;
}
.skw-overview-page .skw-ov-chip strong { font-weight: 600; }

/* -- Action cards -- */

.skw-overview-page .skw-ov-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.skw-overview-page .skw-ov-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: #fff;
	border: 1px solid transparent;
	border-radius: var(--radius-card);
	color: var(--color-neutral);
	text-decoration: none;
}
.skw-overview-page a.skw-ov-card:hover { background: hsl(220 100% 98%); color: var(--color-neutral); text-decoration: none; }
.skw-overview-page a.skw-ov-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: none; }
.skw-overview-page .skw-ov-card p { margin: 2px 0 0; font-size: 14px; color: var(--color-neutral-light); }
.skw-overview-page .skw-ov-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.skw-overview-page .skw-ov-card-arrow { font-size: 16px; color: var(--color-neutral-light); }
.skw-overview-page .skw-ov-card-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }

.skw-overview-page .skw-ov-card.skw-ov-card-primary { background: var(--color-lavender); }
.skw-overview-page a.skw-ov-card.skw-ov-card-primary:hover { background: hsl(245 55% 78%); }
.skw-overview-page .skw-ov-card-primary p,
.skw-overview-page .skw-ov-card-primary .skw-ov-card-arrow { color: var(--color-neutral); }
.skw-overview-page .skw-ov-card.skw-ov-card-disabled { opacity: .75; cursor: default; }

.skw-overview-page .skw-ov-card.skw-ov-card-danger { border-color: var(--color-error); }
.skw-overview-page a.skw-ov-card.skw-ov-card-danger:hover { background: var(--color-error-soft); }
.skw-overview-page .skw-ov-card-danger .skw-ov-card-title { color: var(--color-error); }

.skw-overview-page .skw-ov-tile {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--color-lime);
}
.skw-overview-page .skw-ov-tile .ph { font-size: 20px; color: var(--color-neutral); }
.skw-overview-page .skw-ov-tile.skw-ov-tile-blue { background: hsl(220 100% 96%); }
.skw-overview-page .skw-ov-tile-blue .ph { color: var(--color-primary); }
.skw-overview-page .skw-ov-tile.skw-ov-tile-red { background: var(--color-error-soft); }
.skw-overview-page .skw-ov-tile-red .ph { color: var(--color-error); }

/* -- Recent syncs -- */

.skw-overview-page .skw-ov-section {
	background: #fff;
	border-radius: var(--radius-card);
	overflow: hidden;
}
.skw-overview-page .skw-ov-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
}
.skw-overview-page .skw-ov-section-head-main { display: flex; gap: 14px; align-items: flex-start; }
.skw-overview-page .skw-ov-section h2 {
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.2;
	color: var(--color-neutral);
}
.skw-overview-page .skw-ov-section-head p { margin: 4px 0 0; color: var(--color-neutral-light); font-size: 14px; }
.skw-overview-page .skw-ov-link { font-size: 13px; }

/* The shared history table (render_history_table), restyled inside this section only. */
.skw-overview-page .skw-table-wrap { margin: 0; border-top: 1px solid rgb(28 31 38 / .1); }
.skw-overview-page .skw-table { font-size: 14px; font-family: var(--font-body); }
.skw-overview-page .skw-table thead tr { background: hsl(220 100% 98%); position: static; }
.skw-overview-page .skw-table th {
	padding: 10px 12px;
	border-bottom: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-neutral-light);
}
.skw-overview-page .skw-table th:first-child,
.skw-overview-page .skw-table td:first-child { padding-left: 24px; }
.skw-overview-page .skw-table th:last-child,
.skw-overview-page .skw-table td:last-child { padding-right: 24px; text-align: right; }
.skw-overview-page .skw-entry-row { border-top: 1px solid rgb(28 31 38 / .06); }
.skw-overview-page .skw-entry-row:hover { background: transparent; }
.skw-overview-page .skw-td-left,
.skw-overview-page .skw-td-right {
	padding: 12px;
	font-weight: 300;
	color: var(--color-neutral-light);
}
.skw-overview-page .skw-td-medium { font-weight: 300; color: var(--color-neutral); font-variant-numeric: tabular-nums; }
.skw-overview-page .skw-td-bold { font-weight: 500; color: var(--color-neutral); }
.skw-overview-page .skw-td-right a { color: var(--color-link); }
.skw-overview-page .skw-row-warning td { color: var(--color-warning-dark); }

.skw-overview-page .skw-badge {
	gap: 6px;
	padding: 2px 10px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1.7;
}
.skw-overview-page .skw-badge-green { background: var(--color-success-soft); color: var(--color-success-dark); }
.skw-overview-page .skw-badge-red { background: var(--color-error-soft); color: var(--color-error-dark); }
.skw-overview-page .skw-badge-yellow { background: var(--color-warning-soft); color: var(--color-warning-dark); }

/* "View log" reads as a plain link here, not a button. */
.skw-overview-page .skw-btn-log-view,
.skw-overview-page .skw-btn-log-view:hover {
	padding: 0;
	height: auto;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 13px;
	color: var(--color-link);
	cursor: pointer;
}
.skw-overview-page .skw-btn-log-view:hover { color: var(--color-link-hover); text-decoration: underline; }

.skw-overview-page .skw-table-note {
	margin: 0;
	padding: 14px 24px;
	border-top: 1px solid rgb(28 31 38 / .06);
	font-size: 13px;
	line-height: 1.7;
	color: var(--color-neutral-light);
}