/* ============================================
rptBadge - Report Badge System
Plant property badges for nursery reports
============================================
USAGE (background-image version - no inline SVG needed)
-------------------------------------------------------
Bud
Young
Bloom
Excellent
Landscape
Seasonal
Specialty
Icons are embedded as CSS background-image data URIs.
Icon colors are hardcoded to match each badge's text color.
COLOR ASSIGNMENTS
-----------------
rptBadge_1 Gold Bud (seed, dormant)
rptBadge_2 Green Young (growing)
rptBadge_3 Pink Bloom (flowering)
rptBadge_4 Orange Excellent (peak quality)
rptBadge_5 Gray Landscape (ready but plain)
rptBadge_6 Blue (utility, text-only)
rptBadge_7 Purple (utility, text-only)
GROWTH PROGRESSION
------------------
Bud (gold) -> Young (green) -> Bloom (pink)
============================================ */
/* Base
-------------------------------------------- */
.rptBadge_1, .rptBadge_2, .rptBadge_3, .rptBadge_4,
.rptBadge_5, .rptBadge_6, .rptBadge_7, .rptBadge_8 {
display: inline-flex;
align-items: center;
padding: 0 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 400;
height: 22px;
box-sizing: border-box;
white-space: nowrap;
}
/* 1 - Gold (Bud)
Icon: Solid acorn, 18x18
padding-left: 7px edge + 18px icon + 2px gap = 27px
-------------------------------------------- */
.rptBadge_1 {
background: #FAF3E0;
color: #8B6914;
border: 1px solid rgba(139, 105, 20, 0.2);
padding-left: 27px;
padding-right: 11px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20fill=%22%238B6914%22%3E%3Cpath%20d=%22M4%207.5c0%202.8%201.6%205%204%206.5%202.4-1.5%204-3.7%204-6.5H4z%22/%3E%3Cpath%20d=%22M3.2%207c-.1-2%202.1-3.5%204.8-3.5S12.9%205%2012.8%207H3.2z%22%20opacity=%22.55%22/%3E%3Crect%20x=%227.3%22%20y=%221.5%22%20width=%221.4%22%20height=%222.5%22%20rx=%22.7%22%20opacity=%22.55%22/%3E%3C/svg%3E");
background-size: 18px 18px;
background-position: 7px center;
background-repeat: no-repeat;
background-position: left center;
}
/* 2 - Green (Young)
Icon: Outline flower (stroke 1.5), 14x14
padding-left: 10px edge + 14px icon + 4px gap = 28px
-------------------------------------------- */
.rptBadge_2 {
background: #E0FAE8;
color: #138B3B;
border: 1px solid rgba(19, 139, 59, 0.2);
padding-left: 28px;
padding-right: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20stroke=%22%23138B3B%22%3E%3Cellipse%20cx=%228%22%20cy=%223.8%22%20rx=%222%22%20ry=%223%22%20stroke-width=%221.5%22/%3E%3Cellipse%20cx=%2211.8%22%20cy=%226.8%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(72%2011.8%206.8)%22%20stroke-width=%221.5%22/%3E%3Cellipse%20cx=%2210.3%22%20cy=%2211.2%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(144%2010.3%2011.2)%22%20stroke-width=%221.5%22/%3E%3Cellipse%20cx=%225.7%22%20cy=%2211.2%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(216%205.7%2011.2)%22%20stroke-width=%221.5%22/%3E%3Cellipse%20cx=%224.2%22%20cy=%226.8%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(288%204.2%206.8)%22%20stroke-width=%221.5%22/%3E%3Ccircle%20cx=%228%22%20cy=%227.8%22%20r=%221.2%22%20fill=%22%23138B3B%22%20stroke=%22none%22/%3E%3C/svg%3E");
background-size: 14px 14px;
background-position: 10px center;
background-repeat: no-repeat;
background-position: left center;
}
/* 3 - Pink (Bloom)
Icon: Solid flower with petal outlines, 16x16
padding-left: 10px edge + 16px icon + 4px gap = 30px
NOTE: Petal outline stroke #FAE0E8 is hardcoded to pink bg.
-------------------------------------------- */
.rptBadge_3 {
background: #FAE0E8;
color: #8B133B;
border: 1px solid rgba(139, 19, 59, 0.2);
padding-left: 30px;
padding-right: 11px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Cellipse%20cx=%228%22%20cy=%223.8%22%20rx=%222%22%20ry=%223%22%20fill=%22%238B133B%22/%3E%3Cellipse%20cx=%2211.8%22%20cy=%226.8%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(72%2011.8%206.8)%22%20fill=%22%238B133B%22/%3E%3Cellipse%20cx=%2210.3%22%20cy=%2211.2%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(144%2010.3%2011.2)%22%20fill=%22%238B133B%22/%3E%3Cellipse%20cx=%225.7%22%20cy=%2211.2%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(216%205.7%2011.2)%22%20fill=%22%238B133B%22/%3E%3Cellipse%20cx=%224.2%22%20cy=%226.8%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(288%204.2%206.8)%22%20fill=%22%238B133B%22/%3E%3Cellipse%20cx=%228%22%20cy=%223.8%22%20rx=%222%22%20ry=%223%22%20fill=%22none%22%20stroke=%22%23FAE0E8%22%20stroke-width=%22.4%22/%3E%3Cellipse%20cx=%2211.8%22%20cy=%226.8%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(72%2011.8%206.8)%22%20fill=%22none%22%20stroke=%22%23FAE0E8%22%20stroke-width=%22.4%22/%3E%3Cellipse%20cx=%2210.3%22%20cy=%2211.2%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(144%2010.3%2011.2)%22%20fill=%22none%22%20stroke=%22%23FAE0E8%22%20stroke-width=%22.4%22/%3E%3Cellipse%20cx=%225.7%22%20cy=%2211.2%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(216%205.7%2011.2)%22%20fill=%22none%22%20stroke=%22%23FAE0E8%22%20stroke-width=%22.4%22/%3E%3Cellipse%20cx=%224.2%22%20cy=%226.8%22%20rx=%222%22%20ry=%223%22%20transform=%22rotate(288%204.2%206.8)%22%20fill=%22none%22%20stroke=%22%23FAE0E8%22%20stroke-width=%22.4%22/%3E%3Ccircle%20cx=%228%22%20cy=%227.8%22%20r=%221.8%22%20fill=%22%238B133B%22%20opacity=%22.4%22/%3E%3C/svg%3E");
background-size: 16px 16px;
background-position: 10px center;
background-repeat: no-repeat;
background-position: left center;
}
/* 4 - Orange (Excellent)
Icon: Solid star, 15x15
padding-left: 9px edge + 15px icon + 4px gap = 28px
-------------------------------------------- */
.rptBadge_4 {
background: #F9E6DF;
color: #8B3114;
border: 1px solid rgba(139, 49, 20, 0.2);
padding-left: 28px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%3E%3Cpath%20d=%22M8%201.5L9.8%205.8%2014.5%206.3%2011%209.5%2012%2014.2%208%2011.8%204%2014.2%205%209.5%201.5%206.3%206.2%205.8Z%22%20fill=%22%238B3114%22/%3E%3C/svg%3E");
background-size: 15px 15px;
background-position: 9px center;
background-repeat: no-repeat;
background-position: left center;
}
/* 5 - Gray (Landscape)
Icon: Drooping plant, 14x14 (lowered 1px via viewBox)
padding-left: 10px edge + 14px icon + 4px gap = 28px
-------------------------------------------- */
.rptBadge_5 {
background: #E8E4E4;
color: #544A4A;
border: 1px solid rgba(84, 74, 74, 0.2);
padding-left: 28px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%221.5%20-1%2013%2015%22%20fill=%22%23544A4A%22%3E%3Crect%20x=%227%22%20y=%229%22%20width=%222%22%20height=%225%22%20rx=%22.5%22/%3E%3Cpath%20d=%22M8%209c-5%200-7.5-3.5-6-7%204%20.5%205.5%203.5%206%207z%22/%3E%3Cpath%20d=%22M8%209c5%200%207.5-3.5%206-7-4%20.5-5.5%203.5-6%207z%22/%3E%3Cpath%20d=%22M8%205.5c-2-1-3.5-3.5-2-5.5%202.5.5%203%203%202%205.5z%22%20opacity=%22.7%22/%3E%3Cpath%20d=%22M8%205.5c2-1%203.5-3.5%202-5.5-2.5.5-3%203-2%205.5z%22%20opacity=%22.7%22/%3E%3C/svg%3E");
background-size: 14px 14px;
background-position: 10px center;
background-repeat: no-repeat;
background-position: left center;
}
/* 6 - Blue (utility, text-only)
-------------------------------------------- */
.rptBadge_6 {
background: #E0EDFA;
color: #134F8B;
border: 1px solid rgba(19, 79, 139, 0.2);
}
/* 7 - Purple (utility, text-only)
-------------------------------------------- */
.rptBadge_7 {
background: #ECDFF9;
color: #4F148B;
border: 1px solid rgba(79, 20, 139, 0.2);
}
/* ============================================
SPECIFICATIONS
============================================
Base
----
Font size: 12px
Font weight: 400
Height: 22px (fixed)
Border radius: 12px
Padding: 0 10px (base)
Per-badge overrides
-------------------
rptBadge_1 (Bud): padding: 0 11px 0 27px (7px edge + 18px icon + 2px gap)
rptBadge_2 (Young): padding: 0 10px 0 28px (10px edge + 14px icon + 4px gap)
rptBadge_3 (Bloom): padding: 0 11px 0 30px (10px edge + 16px icon + 4px gap)
rptBadge_4 (Excellent): padding: 0 10px 0 28px (9px edge + 15px icon + 4px gap)
rptBadge_5 (Landscape): padding: 0 10px 0 28px (10px edge + 14px icon + 4px gap)
Icon sizes
----------
Bud: 18x18 (solid acorn, +2px wider body)
Young: 14x14 (outline 5-petal flower, stroke 1.5)
Bloom: 16x16 (solid 5-petal flower, petal outline stroke #FAE0E8)
Excellent: 15x15 (solid star)
Landscape: 14x14 (drooping plant, lowered 1px via viewBox)
Colors (bg / text / border)
---------------------------
Gold: #FAF3E0 / #8B6914 / rgba(139, 105, 20, 0.2)
Green: #E0FAE8 / #138B3B / rgba(19, 139, 59, 0.2)
Pink: #FAE0E8 / #8B133B / rgba(139, 19, 59, 0.2)
Orange: #F9E6DF / #8B3114 / rgba(139, 49, 20, 0.2)
Gray: #E8E4E4 / #544A4A / rgba(84, 74, 74, 0.2)
Blue: #E0EDFA / #134F8B / rgba(19, 79, 139, 0.2)
Purple: #ECDFF9 / #4F148B / rgba(79, 20, 139, 0.2)
============================================ */