/* =============================================================
   CRC Dashboard — shortcode styles
   Palette: #0C1B4F (navy ink)  #FECA03 (signal yellow)
   Typeface: Arial
   Usage: embed [crc_dashboard] on a full-width WordPress page.
   All classes are prefixed .crc-db to avoid theme collisions.
   ============================================================= */

/* ── Design tokens (mirrors crc-cases.css so both plugins share
      the same palette when loaded together on a page) ── */
:root {
	--crc-ink:        #0C1B4F;
	--crc-ink-2:      #2A376B;
	--crc-mark:       #FECA03;
	--crc-mark-soft:  #FFF2B8;
	--crc-page:       #FAFAF7;
	--crc-card:       #FFFFFF;
	--crc-rule:       #E6E6E0;
	--crc-rule-2:     #F0F0EC;
	--crc-muted:      #6B6B6B;
	--crc-muted-2:    #8F8F8F;
	--crc-radius:     2px;
	--crc-shell-max:  1280px;
	--crc-gutter:     40px;
}

/* ── Scope reset ── */
.crc-db,
.crc-db * {
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

.crc-db {
	/* Break out of narrow content columns on most themes */
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	overflow-x: hidden;

	background: var(--crc-page);
	color: var(--crc-ink);
	padding-bottom: 80px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.crc-db a   { text-decoration: none; color: inherit; }
.crc-db h1,
.crc-db h2,
.crc-db h3  { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* ── Shell (centered content wrapper) ── */
.crc-db-shell {
	max-width: var(--crc-shell-max);
	margin: 0 auto;
	padding: 0 var(--crc-gutter);
}

/* =========================================================
   MASTHEAD
   ========================================================= */
.crc-db-masthead {
	background: var(--crc-ink);
	color: #fff;
	padding: 20px 0 44px;
	position: relative;
	overflow: hidden;
}

/* Decorative right-edge yellow stripe — same as taxonomy archive */
.crc-db-masthead::before {
	content: "";
	position: absolute;
	inset: 0 0 0 0;
	background: linear-gradient(
		90deg,
		transparent 0,
		transparent calc(100% - 6px),
		var(--crc-mark) calc(100% - 6px),
		var(--crc-mark) 100%
	);
	pointer-events: none;
}

/* Subtle texture / depth gradient */
.crc-db-masthead::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 60% at 10% 50%, rgba(254,202,3,0.06) 0%, transparent 70%);
	pointer-events: none;
}

/* ── Breadcrumbs ── */
.crc-db-crumbs {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 28px;
	position: relative; /* above ::after pseudo */
	z-index: 1;
}
.crc-db-crumbs a                { color: rgba(255, 255, 255, 0.75); }
.crc-db-crumbs a:hover          { color: var(--crc-mark); }
.crc-db-crumbs span             { margin: 0 8px; color: rgba(255, 255, 255, 0.35); }
.crc-db-crumbs-current          { color: #fff !important; margin-left: 0 !important; }

/* ── Two-column masthead body: title left, stats right ── */
.crc-db-masthead-body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: end;
	position: relative;
	z-index: 1;
}

.crc-db-masthead-title { min-width: 0; }

/* ── Eyebrow label ── */
.crc-db-eyebrow {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--crc-mark);
	padding-bottom: 8px;
}
.crc-db-eyebrow::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--crc-mark);
	vertical-align: middle;
	margin-left: 10px;
}

/* ── H1 ── */
.crc-db-h1 {
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.04;
	margin-top: 12px;
	letter-spacing: -0.02em;
	color: #fff;
}

/* ── Subtitle / description ── */
.crc-db-masthead-desc {
	margin: 14px 0 0;
	max-width: 56ch;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	line-height: 1.6;
}

/* ── Stats panel (right side of masthead) ── */
.crc-db-masthead-meta {
	display: flex;
	gap: 32px;
	align-items: flex-end;
	padding-bottom: 4px;
	flex-shrink: 0;
}

.crc-db-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}
.crc-db-stat-num {
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--crc-mark);
	line-height: 1;
}
.crc-db-stat-label {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	text-align: right;
}

/* =========================================================
   BODY
   ========================================================= */
.crc-db-body {
	padding-top: 40px;
}

/* =========================================================
   TILE GRID
   ========================================================= */
.crc-db-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

/* =========================================================
   INDIVIDUAL TILE
   ========================================================= */
.crc-db-tile {
	position: relative;
	display: flex;
	background: var(--crc-card);
	border: 1px solid var(--crc-rule);
	border-radius: var(--crc-radius);
	overflow: hidden;
	transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
	color: var(--crc-ink);
	cursor: pointer;
}

.crc-db-tile:hover {
	border-color: var(--crc-ink);
	box-shadow: 0 3px 0 0 var(--crc-ink);
	transform: translateY(-2px);
}

/* ── Left accent bar ── */
.crc-db-tile-accent {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--crc-ink);
	flex-shrink: 0;
	transition: background 160ms ease, width 160ms ease;
}
.crc-db-tile:hover .crc-db-tile-accent {
	background: var(--crc-mark);
	width: 6px;
}

/* ── Inner layout ── */
.crc-db-tile-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 20px 28px;
	min-width: 0;
	flex: 1;
}

/* ── Top row: index number + case count ── */
.crc-db-tile-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.crc-db-tile-index {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--crc-muted-2);
}

.crc-db-tile-count {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	background: var(--crc-mark);
	color: var(--crc-ink);
	padding: 3px 10px;
	border-radius: var(--crc-radius);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
	flex-shrink: 0;
}
.crc-db-tile-count-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ── Category name ── */
.crc-db-tile-name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--crc-ink);
	margin: 0;
	transition: color 120ms ease;
}
.crc-db-tile:hover .crc-db-tile-name {
	color: var(--crc-ink-2);
}

/* ── Optional description ── */
.crc-db-tile-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--crc-muted);
}

/* ── Sub-category tags ── */
.crc-db-tile-subs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.crc-db-tile-subs li {
	font-size: 10px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--crc-muted);
	border: 1px solid var(--crc-rule);
	padding: 3px 7px;
	border-radius: var(--crc-radius);
	line-height: 1.4;
	transition: border-color 120ms ease, color 120ms ease;
}
.crc-db-tile:hover .crc-db-tile-subs li {
	border-color: rgba(12, 27, 79, 0.25);
	color: var(--crc-ink-2);
}
.crc-db-tile-more {
	font-style: italic;
	border-style: dashed !important;
	color: var(--crc-muted-2) !important;
}

/* ── "Browse →" CTA ── */
.crc-db-tile-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--crc-muted);
	transition: color 140ms ease;
	padding-top: 6px;
	border-top: 1px solid var(--crc-rule-2);
}
.crc-db-tile:hover .crc-db-tile-cta {
	color: var(--crc-ink);
}
.crc-db-arrow {
	transition: transform 160ms ease;
	flex-shrink: 0;
}
.crc-db-tile:hover .crc-db-arrow {
	transform: translateX(4px);
}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.crc-db-empty {
	background: var(--crc-card);
	border: 1px solid var(--crc-rule);
	padding: 80px 40px;
	text-align: center;
	border-radius: var(--crc-radius);
}
.crc-db-empty-mark {
	width: 48px;
	height: 48px;
	margin: 0 auto 20px;
	background:
		linear-gradient(var(--crc-ink), var(--crc-ink)) 0 50%/100% 2px no-repeat,
		linear-gradient(var(--crc-mark), var(--crc-mark)) 50% 0/2px 100% no-repeat;
}
.crc-db-empty h2 {
	font-size: 22px;
	margin-bottom: 8px;
}
.crc-db-empty p {
	color: var(--crc-muted);
	margin: 0 0 20px;
	font-size: 14px;
}

/* ── Shared button ── */
.crc-db-btn {
	display: inline-block;
	background: var(--crc-ink);
	color: #fff;
	padding: 12px 22px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: var(--crc-radius);
	transition: background 140ms ease, color 140ms ease;
}
.crc-db-btn:hover { background: var(--crc-mark); color: var(--crc-ink); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
	.crc-db-masthead-body {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.crc-db-masthead-meta {
		justify-content: flex-start;
		gap: 24px;
	}
	.crc-db-stat { align-items: flex-start; }
	.crc-db-stat-label { text-align: left; }

	.crc-db-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 16px;
	}
}

@media (max-width: 640px) {
	:root { --crc-gutter: 20px; }

	.crc-db-masthead { padding: 16px 0 32px; }
	.crc-db-crumbs   { margin-bottom: 20px; }

	.crc-db-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.crc-db-tile-inner {
		padding: 16px 16px 14px 20px;
		gap: 8px;
	}
	.crc-db-tile-name { font-size: 15px; }
	.crc-db-tile-desc { display: none; }
}

@media (max-width: 400px) {
	.crc-db-grid { grid-template-columns: 1fr; }
}