/* RUTS SDG Assessment Manager & Google Docs Importer (THE 2027 Edition) Styles */
.ruts-sdg-self-contained {
	max-width: 1080px;
	margin: 24px auto;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
	padding: 32px;
	font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #1e293b;
	line-height: 1.7;
}
.ruts-sdg-header-box {
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 24px;
	margin-bottom: 28px;
}
.ruts-sdg-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.ruts-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}
.ruts-badge-primary { background: #dc2626; color: #fff; }
.ruts-badge-indicator { background: #1e293b; color: #38bdf8; }
.ruts-badge-year { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.ruts-badge-public { background: #dcfce7; color: #166534; border: 1px solid #22c55e; }
.ruts-sdg-title {
	font-size: 26px;
	font-weight: 800;
	color: #0f172a;
	margin: 8px 0 18px;
	line-height: 1.35;
}
.ruts-sdg-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	font-size: 14px;
}
.ruts-meta-item strong {
	display: block;
	color: #475569;
	font-size: 12px;
	text-transform: uppercase;
}
.ruts-sdg-policy-banner {
	background: #ecfdf5;
	border-left: 4px solid #059669;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	color: #065f46;
	font-size: 14px;
}
.ruts-sdg-exec-summary {
	background: #eff6ff;
	border-left: 4px solid #2563eb;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14.5px;
	color: #1e3a8a;
}
.ruts-sdg-subheading {
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	margin: 28px 0 10px;
	padding-left: 12px;
	border-left: 4px solid #0284c7;
}
.ruts-sdg-criteria-pill {
	display: inline-block;
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
	padding: 3px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 12px;
}
.ruts-sdg-paragraph {
	margin-bottom: 16px;
	font-size: 16px;
	color: #334155;
}
.ruts-sdg-figure-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 20px 0;
}
.ruts-sdg-figure, .ruts-sdg-gallery-item {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 10px;
	margin: 0;
	text-align: center;
}
.ruts-sdg-figure img, .ruts-sdg-gallery-item img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	max-height: 320px;
	object-fit: cover;
}
.ruts-sdg-figure figcaption, .ruts-sdg-gallery-item figcaption {
	font-size: 13px;
	color: #475569;
	margin-top: 8px;
	font-weight: 500;
}
.ruts-sdg-table-wrap {
	overflow-x: auto;
	margin: 22px 0;
}
.ruts-sdg-summary-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.ruts-sdg-summary-table th {
	background: #0f172a;
	color: #ffffff;
	padding: 10px 14px;
	text-align: left;
}
.ruts-sdg-summary-table td {
	border: 1px solid #cbd5e1;
	padding: 10px 14px;
	vertical-align: top;
}
.ruts-sdg-summary-table tr:nth-child(even) {
	background: #f8fafc;
}
.ruts-sdg-gallery-section {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 2px dashed #cbd5e1;
}
.ruts-sdg-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 14px;
}
.ruts-sdg-footer-box {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 2px solid #e2e8f0;
	background: #f8fafc;
	padding: 20px;
	border-radius: 12px;
}
/* Admin styles */
.ruts-sdg-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: 20px;
	margin-top: 16px;
}
.ruts-sdg-admin-card {
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ruts-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
}
.status-ready { background: #dcfce7; color: #166534; }
.status-revise { background: #fef3c7; color: #92400e; }
.status-pending { background: #f1f5f9; color: #475569; }