/*
 * Postlinkly dashboard page styles.
 *
 * Action cards, site-health panel with link-growth chart, and quick actions.
 * Loaded only on the Dashboard page.
 * Depends on admin-base.css for design tokens.
 *
 * @package Postlinkly
 * @since   1.1.0
 * @since   1.3.0 Action-first layout on the shared token set.
 */

/* ==========================================================================
   NOTICE BANNER (shown when nothing indexed yet)
   ========================================================================== */

.pl-dash-notice {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--pl-primary-tint);
	border-left: 4px solid var(--pl-primary);
	border-radius: var(--pl-radius);
	padding: 14px 20px;
	margin-bottom: 24px;
}
.pl-dash-notice__icon { color: var(--pl-primary); flex-shrink: 0; display: flex; }
.pl-dash-notice__body { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pl-dash-notice__body strong { color: var(--pl-ink); font-size: 14px; }
.pl-dash-notice__body span { color: var(--pl-muted); }

/* ==========================================================================
   ACTION CARDS
   ========================================================================== */

.pl-dash-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 22px;
}
.pl-dash-action {
	position: relative;
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius);
	padding: 18px 18px 16px;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.pl-dash-action:hover {
	transform: translateY(-1px);
	border-color: var(--pl-line-2);
	box-shadow: 0 12px 30px -24px rgba(15,45,75,.55);
}
.pl-dash-action--danger  { border-top: 3px solid var(--pl-red); }
.pl-dash-action--warning { border-top: 3px solid var(--pl-amber); }
.pl-dash-action--ai      { border-top: 3px solid var(--pl-primary); }
.pl-dash-action--good    { border-top: 3px solid var(--pl-green); }

.pl-dash-action__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pl-dash-action__icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pl-dash-action--danger  .pl-dash-action__icon { background: var(--pl-red-l); color: var(--pl-red); }
.pl-dash-action--warning .pl-dash-action__icon { background: var(--pl-amber-l); color: var(--pl-amber); }
.pl-dash-action--ai      .pl-dash-action__icon { background: var(--pl-primary-tint); color: var(--pl-primary); }
.pl-dash-action--good    .pl-dash-action__icon { background: var(--pl-green-l); color: var(--pl-green); }

.pl-dash-action__count { font-size: 29px; font-weight: 700; color: var(--pl-ink); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pl-dash-action__label { font-size: 13.5px; font-weight: 650; color: var(--pl-ink); margin-top: 13px; }
.pl-dash-action__desc  { font-size: 11.75px; color: var(--pl-faint); margin-top: 3px; line-height: 1.45; }
.pl-dash-action__link  { margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 650; color: var(--pl-primary); display: inline-flex; align-items: center; gap: 5px; width: max-content; }
.pl-dash-action:hover .pl-dash-action__link { text-decoration: underline; }

/* ==========================================================================
   MAIN: HEALTH + CHART (left) and QUICK ACTIONS (right)
   ========================================================================== */

.pl-dash-main {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 18px;
}
.pl-dash-panel {
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius);
	padding: 20px 22px;
}
.pl-dash-panel h2 { font-size: 15px; font-weight: 600; color: var(--pl-ink); margin: 0 0 14px; }

.pl-dash-health__score { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--pl-green); }
.pl-dash-health--good .pl-dash-health__score,
.pl-dash-health__score--good { color: var(--pl-green); }
.pl-dash-health__score--warn { color: var(--pl-amber); }
.pl-dash-health__score--bad  { color: var(--pl-red); }
.pl-dash-health__caption { font-size: 12px; color: var(--pl-muted); margin-top: 6px; }

/* Link-growth bar chart */
.pl-dash-chart {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	height: 150px;
	margin-top: 18px;
}
.pl-dash-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.pl-dash-chart__bar-wrap { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.pl-dash-chart__bar { width: 100%; background: var(--pl-primary-tint); border-radius: 4px 4px 0 0; min-height: 4px; transition: background .15s, transform .15s; }
.pl-dash-chart__col:hover .pl-dash-chart__bar { background: var(--pl-primary); transform: translateY(-2px); }
.pl-dash-chart__label { font-size: 11px; font-weight: 600; color: var(--pl-faint); }

/* Quick actions list */
.pl-dash-quick a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--pl-line);
	color: var(--pl-ink);
	text-decoration: none;
	font-size: 13px;
}
.pl-dash-quick a:last-child { border-bottom: 0; }
.pl-dash-quick a:hover { color: var(--pl-primary); }
.pl-dash-quick a span { color: var(--pl-faint); }
.pl-dash-quick a:hover span { color: var(--pl-primary); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1120px) {
	.pl-dash-actions { grid-template-columns: repeat(2, 1fr); }
	.pl-dash-main { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.pl-dash-actions { grid-template-columns: 1fr; }
}