/**
 * ShapeOptions — dashboard overview and option-group list table.
 *
 * Loaded on the ShapeOptions Dashboard screen and on the option-group list
 * table only (see Shapeoptions_Dashboard::assets). Section 5 reaches into
 * WordPress list-table markup, so every selector there is scoped through
 * `.post-type-shapeoptions_group` — it can only apply on this plugin.s own
 * screen, never to another list table.
 *
 * TABLE OF CONTENTS
 * -----------------
 * 1. Badges & chips
 * 2. Dashboard layout
 * 3. Panels & tables
 * 4. Link lists
 * 5. Option-group list table
 * 6. Media queries
 */

/* === 1. Badges & chips === */
.shapeoptions-badge {
	display: inline-block;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.shapeoptions-badge--publish { background: #edfaef; color: #00753a; }
.shapeoptions-badge--draft   { background: #fcf9e8; color: #996800; }
.shapeoptions-badge--pending { background: #f0f6fc; color: #2271b1; }
.shapeoptions-badge--trash   { background: #fcf0f1; color: #b32d2e; }

.shapeoptions-chip {
	display: inline-block;
	background: #f0f0f1;
	border-radius: 4px;
	color: #50575e;
	font-size: 11px;
	line-height: 1;
	margin: 1px 2px 1px 0;
	padding: 4px 7px;
}

.shapeoptions-chip--more { background: transparent; }
.shapeoptions-chip--big  { font-size: 12px; padding: 6px 10px; }
.shapeoptions-chip--big b { color: #2271b1; }

.shapeoptions-count { font-size: 14px; }

/* === /1. Badges & chips === */

/* === 2. Dashboard layout === */
.shapeoptions-dash { max-width: 1200px; }

.shapeoptions-dash__hero {
	align-items: center;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin: 16px 0 20px;
	padding: 24px 28px;
}

.shapeoptions-dash__hero h1 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	padding: 0;
}

.shapeoptions-dash__hero h1 span { color: #2271b1; }

.shapeoptions-dash__tagline { color: #646970; margin: 6px 0 0; }

.shapeoptions-dash__hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.shapeoptions-dash__stats {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin-bottom: 20px;
}

.shapeoptions-stat {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	display: block;
	padding: 16px 18px;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.shapeoptions-stat:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }

.shapeoptions-stat__num {
	color: #1d2327;
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.shapeoptions-stat__label { color: #646970; font-size: 12px; }

.shapeoptions-dash__cols {
	align-items: flex-start;
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}

/* === /2. Dashboard layout === */

/* === 3. Panels & tables === */

.shapeoptions-panel {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	margin-bottom: 20px;
	padding: 6px 22px 16px;
}

.shapeoptions-panel h2 {
	border-bottom: 1px solid #f0f0f1;
	font-size: 15px;
	margin: 14px 0 12px;
	padding-bottom: 10px;
}

.shapeoptions-panel__empty { color: #646970; }

.shapeoptions-panel__chips { line-height: 2.2; }

.shapeoptions-table { border-collapse: collapse; width: 100%; }

.shapeoptions-table th,
.shapeoptions-table td {
	border-bottom: 1px solid #f0f0f1;
	font-size: 13px;
	padding: 9px 10px 9px 0;
	text-align: left;
	vertical-align: middle;
}

.shapeoptions-table th { color: #646970; font-weight: 600; }

/* === /3. Panels & tables === */

/* === 4. Link lists === */

.shapeoptions-links { margin: 0; }
.shapeoptions-links li { margin: 0 0 4px; }
.shapeoptions-links a { display: block; padding: 6px 4px; text-decoration: none; }
.shapeoptions-links a:hover { background: #f0f6fc; border-radius: 6px; }

/* === /4. Link lists === */

/* === 5. Option-group list table === */
.post-type-shapeoptions_group .wp-list-table .column-shapeoptions_status    { width: 90px; }
.post-type-shapeoptions_group .wp-list-table .column-shapeoptions_fields    { width: 220px; }
.post-type-shapeoptions_group .wp-list-table .column-shapeoptions_placement { width: 170px; }
.post-type-shapeoptions_group .wp-list-table .row-title { font-weight: 600; }

/* === /5. Option-group list table === */

/* === 6. Media queries === */

/* Grouped here so every responsive override lives in one place. */
@media ( max-width: 960px ) {
	.shapeoptions-dash__cols { grid-template-columns: 1fr; }
}

/* === /6. Media queries === */