:root {
  font-family: Calibri, Arial, sans-serif;
  color: #20251f;
  background: #eef2ec;
  --green: #407a52;
  --dark: #1f3326;
  --line: #cdd6ca;
  --muted: #657163;
  --warn: #a94235;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid #9fb49e;
  border-radius: 5px;
  background: #edf4ed;
  color: #213c2a;
  cursor: pointer;
}
.buttonLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid #9fb49e;
  border-radius: 5px;
  background: #edf4ed;
  color: #213c2a;
  cursor: pointer;
  text-decoration: none;
}
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: .62;
}
button.primary { background: var(--green); border-color: var(--green); color: white; }
button.danger { background: #fff2ef; border-color: #d7a49a; color: #8b3126; }
button.ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: white; }
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  background: var(--dark);
  color: white;
}
h1, h2, h3, p { margin-top: 0; }
header p { margin-bottom: 0; color: rgba(255,255,255,.75); }
main { padding: 16px; }
.hidden { display: none !important; }
.authGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 420px));
  gap: 16px;
  align-items: start;
  justify-content: center;
}
.appGrid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(520px, 1fr);
  gap: 16px;
}
#customerView.sidebarCollapsed {
  grid-template-columns: 54px minmax(520px, 1fr);
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
form.panel { display: grid; gap: 12px; padding: 16px; }
.panelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.panelHead h2, .panelHead h3 { margin: 0; }
.panelHead.slim { padding: 10px 0; border-bottom: 0; }
.actions, .session { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.settingsMenu {
  position: relative;
}
.settingsPanel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  display: grid;
  gap: 8px;
  min-width: 170px;
  padding: 10px;
  border: 1px solid #9fb49e;
  border-radius: 8px;
  background: white;
  box-shadow: 0 12px 28px rgba(13, 25, 17, .22);
}
.settingsPanel button {
  width: 100%;
  justify-content: center;
}
.customerHeaderActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.sidebar {
  position: relative;
}
.sidebarExpand {
  display: none;
}
#customerView.sidebarCollapsed .sidebar {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: start center;
  padding-top: 12px;
}
#customerView.sidebarCollapsed .sidebarContent {
  display: none;
}
#customerView.sidebarCollapsed .sidebarExpand {
  display: block;
  width: 38px;
  min-height: 120px;
  padding: 8px 5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.iconButton {
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.catalogOrderActions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}
.catalogOrderActions button {
  min-height: 34px;
  padding: 7px 9px;
  white-space: nowrap;
  min-width: 0;
}
.newOrderWrap {
  position: relative;
  display: grid;
  justify-items: end;
}
.newOrderCallout {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 30;
  width: min(220px, 72vw);
  padding: 10px 12px;
  border: 1px solid #9fb49e;
  border-radius: 7px;
  background: #fffdf4;
  box-shadow: 0 10px 24px rgba(31,51,38,.18);
  color: #213c2a;
  font-size: 13px;
  font-weight: 700;
}
.newOrderCallout::before {
  content: "";
  position: absolute;
  right: 22px;
  top: -8px;
  width: 14px;
  height: 14px;
  border-left: 1px solid #9fb49e;
  border-top: 1px solid #9fb49e;
  background: #fffdf4;
  transform: rotate(45deg);
}
.submitOrderWrap {
  position: relative;
  display: inline-grid;
}
.submitDeliveryCallout {
  right: 0;
  top: calc(100% + 12px);
  width: min(260px, 78vw);
  text-align: left;
  white-space: normal;
}
.catalogOrderActions .submitDeliveryCallout {
  z-index: 45;
}
.catalogDeliveryPrompt {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #dfc180;
  border-radius: 7px;
  background: var(--cream);
  color: #3c3423;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.submittedChangesReminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #dfc180;
  background: #fff6d9;
  color: #3d321c;
}
.submittedChangesReminder b,
.submittedChangesReminder span {
  display: block;
}
.submittedChangesReminder span {
  margin-top: 2px;
  font-size: 13px;
}
label { display: grid; gap: 5px; color: #4f5d4d; font-size: 13px; }
input, select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid #b8c4b5;
  border-radius: 5px;
  background: white;
  color: #20251f;
}
textarea { min-height: 90px; resize: vertical; }
.hint, .meta, .orderMetaText { color: var(--muted); font-size: 12px; }
.orderMeta {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .7fr) 160px 160px;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.builder {
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(300px, .8fr);
  gap: 16px;
  padding: 12px 14px;
}
.sidebar { min-height: calc(100vh - 120px); }
.workspace {
  min-height: calc(100vh - 120px);
  overflow: visible;
}
.list {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  max-height: calc(100vh - 220px);
  overflow: auto;
}
.orderCard, .notification {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px;
  border: 1px solid #dfe5dc;
  border-radius: 6px;
  background: white;
  color: #20251f;
  text-align: left;
}
.orderCard.active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(64,122,82,.18); }
.orderCard b { font-size: 14px; }
.orderCard span, .notification span { color: var(--muted); font-size: 12px; }
.search { margin: 12px 14px 0; width: calc(100% - 28px); }
.search.compact { margin: 0; width: min(320px, 100%); }
.catalogSearchRow {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -1px 0 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: white;
  box-shadow: 0 8px 18px rgba(31,51,38,.08);
}
.sectionFilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: white;
  box-shadow: 0 8px 18px rgba(31,51,38,.08);
}
.sectionFilters button {
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}
.sectionFilters button.active {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.sectionFilters span {
  margin-left: 4px;
  color: inherit;
  font-size: 12px;
  opacity: .78;
}
.catalogSearchRow .search.compact {
  width: 100%;
  max-width: 420px;
  flex: 1 1 260px;
}
.catalogSearchRow button {
  flex: 0 0 auto;
}
.customerTabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #f7f9f5;
}
.customerTabs button.active {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.customerPanel { display: none; }
.customerPanel.active { display: block; }
.adminPanel { display: none; }
.adminPanel.active { display: block; }
.sidePad { padding-left: 14px; padding-right: 14px; }
.flowerGrid {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}
.miniButton {
  min-height: 28px;
  padding: 4px 8px;
  margin-top: 5px;
  font-size: 12px;
}
#customerView.sidebarCollapsed #flowerList .flowerGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#customerView.sidebarCollapsed #flowersPanel .builder {
  grid-template-columns: minmax(760px, 1.55fr) minmax(300px, .65fr);
}
#customerView.sidebarCollapsed #flowerList .flowerCard {
  grid-template-columns: 78px minmax(0, 1fr) 96px;
}
.flowerCard {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 112px;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dfe5dc;
  border-radius: 6px;
  background: white;
  align-items: start;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 132px;
}
.catalogDetails {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.flowerImage {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #dfe5dc;
  border-radius: 6px;
  background: #edf4ed;
  object-fit: cover;
}
.flowerImageButton {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.flowerImageButton .flowerImage {
  grid-row: auto;
  display: block;
}
.flowerPlaceholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.flowerCard b { overflow-wrap: anywhere; }
.flowerCard span { color: var(--muted); font-size: 12px; }
.plantInfo {
  font-size: 12px;
}
.plantInfo summary {
  color: #213c2a;
  cursor: pointer;
  font-weight: 700;
}
.plantInfo dl {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 8px;
  border: 1px solid #dfe5dc;
  border-radius: 6px;
  background: #f7f9f5;
}
.plantInfo dl div {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
}
.plantInfo dt {
  color: #40503f;
  font-weight: 700;
}
.plantInfo dd {
  margin: 0;
  color: var(--muted);
}
.customSizeDetails {
  display: grid;
  gap: 7px;
}
.customSizeRow {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 78px;
  gap: 8px;
  align-items: end;
}
.customSizeRow input,
.customSizeRow select {
  min-height: 34px;
  padding: 6px 8px;
}
.customRequestStatus {
  margin-left: 6px;
  font-weight: 700;
}
.customRequestSummary {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.customRequestSummary h3 {
  margin: 0;
  font-size: 14px;
}
.customRequestLine {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #dce5d8;
  border-radius: 8px;
  background: #fff;
}
.customRequestLine p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.customPending {
  opacity: .68;
}
.customApproved {
  opacity: 1;
  border-color: #9ec39b;
}
.customDeclined {
  border-color: #dfb7ae;
  background: #fff7f4;
}
.customAdminGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
}
.customRequestAdminSection {
  display: grid;
  gap: 8px;
}
.customRequestAdminSection h3 {
  margin: 4px 0 0;
  font-size: 14px;
}
.productionSettingsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 260px)) max-content;
  gap: 10px;
  align-items: end;
}
.productionSection {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.productionRows {
  display: grid;
  gap: 8px;
}
.productionRow {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(100px, .7fr) max-content minmax(140px, 1fr) max-content;
  gap: 8px;
  align-items: end;
}
.productionRow[data-lead-rule] {
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(95px, .5fr) max-content;
}
.checkboxLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}
.capacityOver td {
  background: #fff2ef;
}
.plantingTotalRow summary {
  cursor: pointer;
}
.plantingTaskSummary {
  display: grid;
  grid-template-columns: max-content minmax(220px, 1fr) minmax(190px, 300px) max-content;
  gap: 12px;
  align-items: center;
}
.plantingTaskCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}
.plantingTaskCheck input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
}
.plantingTaskName {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.plantingTaskName b,
.plantingTaskName small {
  overflow-wrap: anywhere;
}
.plantingTaskLocation {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.plantingTaskLocation input {
  min-height: 32px;
  padding: 6px 8px;
}
.plantingTaskSummary button {
  min-height: 32px;
  padding: 6px 10px;
}
.plantingCalendarHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.plantingCalendarHead h3 {
  margin: 0;
}
.plantingCalendarWeekdays,
.plantingCalendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.plantingCalendarWeekdays {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #56665a;
  text-align: center;
}
.plantingCalendarDay {
  min-height: 74px;
  padding: 7px;
  border: 1px solid #d8e2d8;
  background: #fff;
  color: #173926;
  display: grid;
  gap: 3px;
  align-content: start;
  text-align: left;
}
.plantingCalendarDay.outside {
  opacity: .45;
}
.plantingCalendarDay.hasPlanting {
  border-color: #81ad87;
  background: #edf6ed;
}
.plantingCalendarDay.selected {
  outline: 2px solid #2f6d3b;
}
.plantingCalendarDay b,
.plantingCalendarDay small {
  display: block;
  line-height: 1.2;
}
.plantingTaskMeta {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) max-content;
  gap: 8px;
  align-items: end;
  margin: 10px 0;
}
.completedPlantingTask {
  border-color: #8cb98f;
  background: #f4fbf4;
}
.supplierSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 8px;
}
.historyMatchRow {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 360px) max-content;
  gap: 10px;
  align-items: end;
  width: 100%;
}
#customerHistoryList .historyMatchRow {
  grid-template-columns: minmax(240px, 1fr) max-content;
}
.historyMatchRow label {
  margin: 0;
}
.historicalOrderCard summary {
  cursor: pointer;
}
.customRequestAdminHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.iconButton {
  min-height: 30px;
  padding: 5px 9px;
}
.adminFlowerCard {
  grid-template-columns: 84px minmax(0, 1fr) 132px;
}
.catalogActions {
  display: grid;
  gap: 6px;
  align-content: start;
}
.catalogActions input {
  width: 100%;
  min-height: 34px;
}
.catalogActions button {
  width: 100%;
  min-height: 34px;
  min-width: 0;
  padding: 6px 8px;
}
.adminCatalogTools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #f7f9f5;
}
.adminOrderTools {
  display: grid;
  gap: 8px;
  padding: 12px 14px 0;
}
.adminOrderTools button {
  width: 100%;
}
.price {
  font-weight: 800;
  color: #213c2a;
  white-space: nowrap;
}
.totalLine {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dfe5dc;
  border-radius: 6px;
  background: #f7f9f5;
  font-weight: 800;
}
.sizeTotals {
  margin: 8px 0 10px;
}
.sizeTotals h3 {
  margin: 0 0 6px;
  font-size: 14px;
}
.sizeTotals table {
  margin-bottom: 8px;
}
.sizeTotals th,
.sizeTotals td {
  font-weight: 800;
}
.summaryQty {
  width: 76px;
  min-height: 32px;
  padding: 5px 7px;
}
.productEditor {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #dfe5dc;
  border-radius: 6px;
  background: #f7f9f5;
}
.productEditor .wide { grid-column: 1 / -1; }
.requestForm {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dfe5dc;
  border-radius: 7px;
  background: #f7f9f5;
}
.orderMetaCompact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.orderMetaCompact b {
  display: block;
  color: #213327;
  font-size: 15px;
}
.orderMetaCompact span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.dueDateCallout {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #d6ad55;
  border-radius: 8px;
  background: #fff7df;
  color: #5d3c00;
}
.dueDateCallout span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.dueDateCallout b {
  font-size: 20px;
}
.catalogMetaFields {
  display: grid;
  gap: 8px;
}
.customRequestPrompt {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dfe5dc;
  border-radius: 7px;
  background: #f7f9f5;
}
.customRequestPrompt p {
  margin: 0;
  color: var(--muted);
}
.list.flush {
  max-height: 260px;
  padding: 0;
}
#allOrdersSummary {
  max-height: none;
  overflow: visible;
}
.property {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #dfe5dc;
  border-radius: 7px;
  background: #f7f9f5;
}
.propertyHead {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 8px;
  align-items: end;
}
.itemEntry {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 90px minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: end;
}
table { width: 100%; border-collapse: collapse; background: white; border: 1px solid #dfe5dc; }
th, td { padding: 8px; border-bottom: 1px solid #e5ebe2; text-align: left; vertical-align: top; font-size: 14px; }
th { background: #edf4ed; color: #40503f; }
.changeBox {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: #edf4ed;
  color: #213c2a;
  font-size: 12px;
}
.weekPicker {
  position: absolute;
  z-index: 50;
  width: 280px;
  padding: 10px;
  border: 1px solid #9fb49e;
  border-radius: 7px;
  background: white;
  box-shadow: 0 12px 28px rgba(31,51,38,.18);
}
.weekPickerHead {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  text-align: center;
}
.weekPickerGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.weekPickerDays {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.weekPickerGrid button {
  min-width: 0;
  min-height: 32px;
  padding: 4px;
  border-radius: 4px;
  background: white;
}
.weekPickerGrid button.muted {
  color: #98a394;
  background: #f7f9f5;
}
.weekPickerGrid button.selectedWeek {
  background: #407a52;
  border-color: #407a52;
  color: white;
}
.imageLightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  place-items: center;
  gap: 12px;
  padding: 24px;
  background: rgba(20, 28, 22, .82);
}
.imageLightbox img {
  max-width: min(92vw, 900px);
  max-height: 78vh;
  border-radius: 8px;
  background: white;
  object-fit: contain;
}
.imageLightbox button {
  justify-self: end;
  background: white;
}
#lightboxCaption {
  color: white;
  font-weight: 700;
  text-align: center;
}

/* Visual polish layer */
:root {
  --green: #3f7352;
  --green-dark: #213c2b;
  --dark: #1e3026;
  --line: #d8e0d5;
  --muted: #667266;
  --surface: #ffffff;
  --soft: #f6f8f3;
  --cream: #fffaf0;
  --gold: #b9852f;
  --shadow: 0 14px 34px rgba(31, 51, 38, .09);
  --shadow-sm: 0 8px 20px rgba(31, 51, 38, .07);
}

body {
  background: #eef3ee;
  color: #1e261f;
}

header {
  padding: 18px 24px;
  background: #1f3327;
  box-shadow: 0 8px 24px rgba(21, 33, 25, .18);
}

header h1 {
  margin-bottom: 4px;
  font-size: 26px;
  line-height: 1.12;
}

header p {
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
}

main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
}

button {
  min-height: 38px;
  padding: 8px 13px;
  border-color: #b8c8b4;
  border-radius: 8px;
  background: #f6faf4;
  color: #213c2a;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

button:hover:not(:disabled) {
  border-color: #88a783;
  background: #edf5eb;
  box-shadow: 0 5px 14px rgba(31, 51, 38, .08);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  box-shadow: none;
  transform: translateY(0);
}

button.primary {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 8px 18px rgba(63, 115, 82, .18);
}

button.primary:hover:not(:disabled) {
  background: #356746;
  border-color: #356746;
}

button.danger {
  background: #fff7f4;
  border-color: #e0b5ac;
}

button.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .38);
}

.themeToggle {
  min-width: 98px;
}

input, select, textarea {
  min-height: 40px;
  border-color: #c4d0c0;
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  border-color: #5d8d67;
  box-shadow: 0 0 0 3px rgba(64, 122, 82, .16);
}

label {
  color: #536150;
  font-weight: 700;
}

.authGrid {
  padding-top: 24px;
}

.appGrid {
  gap: 18px;
}

.panel {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

form.panel {
  padding: 18px;
}

.panelHead {
  padding: 14px 16px;
  background: #fbfcf8;
}

.panelHead h2 {
  color: #213327;
  font-size: 19px;
}

.panelHead h3 {
  color: #2f4435;
  font-size: 15px;
}

.sidebar,
.workspace {
  box-shadow: var(--shadow);
}

.customerTabs {
  padding: 12px 14px;
  background: #f2f6ef;
}

.customerTabs button {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.customerTabs button.active {
  background: #fff;
  border-color: #bad0b6;
  color: #213c2a;
  box-shadow: 0 5px 16px rgba(31, 51, 38, .08);
}

.list {
  gap: 10px;
}

.orderCard, .notification {
  gap: 5px;
  padding: 12px;
  border-color: #dce5d8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(31, 51, 38, .04);
}

button.orderCard:hover:not(:disabled) {
  background: #fbfdf9;
  transform: none;
}

.orderCard.active {
  border-color: #7da37a;
  box-shadow: inset 4px 0 0 var(--green), 0 7px 18px rgba(31, 51, 38, .08);
}

.orderCard b {
  color: #233528;
}

.status {
  background: #ecf4ea;
  color: #294b34;
  font-weight: 700;
}

.orderMeta,
.builder,
.changeBox {
  padding: 14px 16px;
}

.catalogSearchRow {
  margin: 0;
  padding: 12px 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 22px rgba(31, 51, 38, .08);
}

.sectionFilters {
  background: rgba(255, 255, 255, .96);
}

#adminCatalogPanel .catalogSearchRow {
  padding-left: 16px;
  padding-right: 16px;
}

.flowerGrid {
  gap: 10px;
  padding: 14px 16px;
}

#flowerList .flowerGrid {
  padding-left: 0;
  padding-right: 0;
}

.flowerCard {
  gap: 12px;
  padding: 12px;
  border-color: #dce5d8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(31, 51, 38, .05);
}

.flowerCard:hover {
  border-color: #c4d7bf;
  box-shadow: 0 9px 22px rgba(31, 51, 38, .08);
}

.flowerImage {
  border-color: #d6e0d2;
  border-radius: 8px;
}

.catalogDetails {
  gap: 5px;
}

.catalogDetails b {
  color: #233528;
}

.price {
  color: #305f40;
}

.plantInfo dl,
.requestForm,
.customRequestPrompt,
.property,
.productEditor {
  border-color: #dce5d8;
  border-radius: 8px;
  background: var(--soft);
}

.totalLine {
  border-color: #d7e2d3;
  border-radius: 8px;
  background: #f7faf4;
  color: #213327;
}

table {
  border-color: #dce5d8;
  border-radius: 8px;
  border-spacing: 0;
  overflow: hidden;
}

th {
  background: #f0f5ec;
  color: #40503f;
  font-size: 13px;
}

td {
  background: #fff;
}

tr:last-child td {
  border-bottom: 0;
}

.newOrderCallout {
  border-color: #dfc180;
  background: var(--cream);
  box-shadow: 0 12px 28px rgba(80, 60, 25, .16);
  color: #3c3423;
}

.newOrderCallout::before {
  border-color: #dfc180;
  background: var(--cream);
}

.weekPicker {
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(31,51,38,.2);
}

body.darkMode {
  --green: #78a983;
  --green-dark: #101f19;
  --dark: #101a17;
  --line: #314039;
  --muted: #a6b2aa;
  --surface: #17221e;
  --soft: #1d2a25;
  --cream: #2f2819;
  --gold: #d4ad63;
  --shadow: 0 16px 38px rgba(0, 0, 0, .28);
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, .22);
  background: #0f1714;
  color: #e6ece5;
}

body.darkMode header {
  background: #0d1512;
  border-bottom: 1px solid #26342e;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}

body.darkMode header p,
body.darkMode .hint,
body.darkMode .meta,
body.darkMode .orderMetaText,
body.darkMode .orderCard span,
body.darkMode .notification span,
body.darkMode .flowerCard span,
body.darkMode .customRequestPrompt p {
  color: var(--muted);
}

body.darkMode .panel,
body.darkMode .orderCard,
body.darkMode .notification,
body.darkMode .flowerCard,
body.darkMode table,
body.darkMode td,
body.darkMode .weekPicker {
  background: var(--surface);
  color: #e6ece5;
}

body.darkMode .panel,
body.darkMode .orderCard,
body.darkMode .notification,
body.darkMode .flowerCard,
body.darkMode .flowerImage,
body.darkMode table,
body.darkMode th,
body.darkMode td,
body.darkMode .totalLine,
body.darkMode .requestForm,
body.darkMode .customRequestPrompt,
body.darkMode .property,
body.darkMode .productEditor,
body.darkMode .plantInfo dl {
  border-color: var(--line);
}

body.darkMode .orderMetaCompact b {
  color: #edf4ec;
}

body.darkMode .dueDateCallout {
  border-color: #b78a35;
  background: #342818;
  color: #ffd98b;
}

body.darkMode .panelHead,
body.darkMode .customerTabs,
body.darkMode .catalogSearchRow,
body.darkMode .sectionFilters,
body.darkMode .adminCatalogTools,
body.darkMode th {
  background: #1b2823;
}

body.darkMode .panelHead h2,
body.darkMode .panelHead h3,
body.darkMode .orderCard b,
body.darkMode .catalogDetails b {
  color: #edf4ec;
}

body.darkMode button {
  border-color: #3e5048;
  background: #21312b;
  color: #e6ece5;
}

body.darkMode button:hover:not(:disabled) {
  border-color: #5f796c;
  background: #2a3b34;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

body.darkMode button.primary {
  background: #6f9d78;
  border-color: #6f9d78;
  color: #08120d;
}

body.darkMode button.primary:hover:not(:disabled) {
  background: #82b08a;
  border-color: #82b08a;
}

body.darkMode button.danger {
  background: #3a2422;
  border-color: #72443d;
  color: #ffd8d2;
}

body.darkMode button.ghost {
  border-color: #3a4a43;
  background: rgba(255, 255, 255, .04);
  color: #e6ece5;
}

body.darkMode .settingsPanel {
  border-color: #3e5048;
  background: #18241f;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}

body.darkMode input,
body.darkMode select,
body.darkMode textarea {
  border-color: #405249;
  background: #101a17;
  color: #edf4ec;
}

body.darkMode input::placeholder,
body.darkMode textarea::placeholder {
  color: #7f8c84;
}

body.darkMode input:focus,
body.darkMode select:focus,
body.darkMode textarea:focus,
body.darkMode button:focus-visible {
  border-color: #8fb997;
  box-shadow: 0 0 0 3px rgba(120, 169, 131, .22);
}

body.darkMode label {
  color: #bfcbc2;
}

body.darkMode .customerTabs button.active {
  background: #24352f;
  border-color: #526a5e;
  color: #eff7ef;
}

body.darkMode .sectionFilters button.active {
  background: #6f9d78;
  border-color: #6f9d78;
  color: #08120d;
}

body.darkMode .orderCard.active {
  border-color: #7eaa87;
  box-shadow: inset 4px 0 0 #82b08a, 0 9px 24px rgba(0, 0, 0, .24);
}

body.darkMode .status {
  background: #263d31;
  color: #b9dfbf;
}

body.darkMode .price {
  color: var(--gold);
}

body.darkMode .totalLine,
body.darkMode .requestForm,
body.darkMode .customRequestPrompt,
body.darkMode .property,
body.darkMode .productEditor,
body.darkMode .plantInfo dl {
  background: var(--soft);
}

body.darkMode .totalLine {
  border-color: #4a604f;
  background: #223229;
  color: #f3f7ef;
  box-shadow: inset 0 0 0 1px rgba(143, 185, 151, .08);
}

body.darkMode .totalLine span,
body.darkMode .totalLine b {
  color: #f3f7ef;
}

body.darkMode .totalLine span:last-child {
  color: #f0c979;
}

body.darkMode th {
  background: #26382f;
  color: #cfe2d1;
  border-bottom-color: #43574c;
}

body.darkMode td {
  color: #edf4ec;
  border-bottom-color: #2f4038;
}

body.darkMode td:nth-child(n + 2) {
  color: #dceade;
}

body.darkMode #allOrdersSummary table,
body.darkMode #catalogOrderSummary table {
  border-color: #3f5248;
}

body.darkMode #allOrdersSummary th,
body.darkMode #catalogOrderSummary th {
  color: #d9eadb;
}

body.darkMode #allOrdersSummary td,
body.darkMode #catalogOrderSummary td {
  color: #f1f6f0;
}

body.darkMode .plantInfo summary {
  color: #b9d9bd;
}

body.darkMode .plantInfo summary:hover {
  color: #d5ead7;
}

body.darkMode .plantInfo dl {
  background: #18251f;
}

body.darkMode .plantInfo dt {
  color: #c9dcca;
}

body.darkMode .plantInfo dd {
  color: #e2ece1;
}

body.darkMode .plantInfo a {
  color: #f0c979;
}

body.darkMode .customRequestLine {
  border-color: #3f5248;
  background: #17221e;
}

body.darkMode .customApproved {
  border-color: #6e9676;
}

body.darkMode .plantingCalendarWeekdays {
  color: #9fb0a6;
}

body.darkMode .plantingCalendarDay {
  border-color: #32463d;
  background: #17251f;
  color: #edf4ec;
}

body.darkMode .plantingCalendarDay.hasPlanting {
  border-color: #7ba684;
  background: #233a2c;
  color: #f3f8f0;
}

body.darkMode .plantingCalendarDay.selected {
  outline-color: #d4ad63;
  box-shadow: inset 0 0 0 1px rgba(212, 173, 99, .45);
}

body.darkMode .plantingCalendarDay.outside {
  color: #7f8c84;
}

body.darkMode .plantingCalendarDay small {
  color: #c9d8ce;
}

body.darkMode .plantingCalendarDay.outside small {
  color: #7f8c84;
}

body.darkMode .completedPlantingTask {
  border-color: #6e9676;
  background: #16271d;
}

body.darkMode .customDeclined {
  border-color: #7a4c45;
  background: #2a1d1b;
}

body.darkMode .newOrderCallout {
  border-color: #8f7443;
  background: #2d2618;
  color: #f2dfb8;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

body.darkMode .catalogDeliveryPrompt {
  border-color: #8f7443;
  background: #2d2618;
  color: #f2dfb8;
}

body.darkMode .submittedChangesReminder {
  border-color: #8f7443;
  background: #2d2618;
  color: #f2dfb8;
}

body.darkMode .newOrderCallout::before {
  border-color: #8f7443;
  background: #2d2618;
}

body.darkMode .flowerPlaceholder {
  background: #1d2a25;
  color: #8c9a91;
}

body.darkMode .imageLightbox {
  background: rgba(4, 8, 7, .88);
}

body.darkMode #lightboxCaption {
  color: #edf4ec;
}

@media (max-width: 900px) {
  header {
    align-items: flex-start;
    flex-direction: column;
  }
  main {
    padding: 12px;
  }
  .authGrid,
  .appGrid,
  .builder,
  .orderMeta {
    grid-template-columns: 1fr;
  }
  .sidebar,
  .workspace {
    min-height: auto;
  }
  .list {
    max-height: none;
  }
  .propertyHead,
  .itemEntry,
  .customSizeRow,
  .customAdminGrid {
    grid-template-columns: 1fr;
  }
  .flowerCard,
  .adminFlowerCard {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .flowerCard .catalogActions,
  .adminFlowerCard .catalogActions {
    grid-column: 1 / -1;
    grid-template-columns: minmax(80px, 110px) minmax(96px, 1fr);
    align-items: center;
  }
  .catalogActions button:nth-child(n + 3) {
    grid-column: 1 / -1;
  }
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  th,
  td {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  body {
    background: white;
  }
  header {
    padding: 14px;
  }
  header h1 {
    font-size: 24px;
    line-height: 1.15;
  }
  header p {
    font-size: 14px;
  }
  main {
    padding: 0;
  }
  .authGrid {
    padding: 12px;
  }
  .panel {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .appGrid {
    gap: 0;
  }
  .panelHead {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }
  .panelHead.slim {
    align-items: center;
    flex-direction: row;
    padding: 10px 0;
  }
  .panelHead .actions,
  .session {
    width: 100%;
  }
  .panelHead .actions button,
  .session button {
    flex: 1 1 130px;
  }
  .panelHead .catalogOrderActions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .panelHead .catalogOrderActions button {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  .customerTabs {
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }
  .orderMeta,
  .builder,
  .flowerGrid,
  .list,
  .changeBox {
    padding-left: 12px;
    padding-right: 12px;
  }
  .catalogSearchRow {
    padding: 0 12px 10px;
  }
  .catalogSearchRow button,
  .catalogSearchRow .search.compact {
    width: 100%;
    max-width: none;
    flex-basis: 100%;
  }
  .flowerCard,
  .adminFlowerCard {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }
  .flowerCard .catalogActions,
  .adminFlowerCard .catalogActions {
    grid-template-columns: 86px minmax(96px, 1fr);
    gap: 8px;
  }
  .catalogActions input,
  .catalogActions button,
  button,
  input,
  select {
    min-height: 42px;
  }
  .plantInfo dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .productEditor {
    grid-template-columns: 1fr;
  }
  .totalLine {
    align-items: flex-start;
    flex-direction: column;
  }
  .summaryQty {
    width: 100%;
    max-width: 120px;
  }
  .weekPicker {
    left: 12px !important;
    right: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
  }
  .imageLightbox {
    padding: 12px;
  }
  .imageLightbox img {
    max-width: 96vw;
    max-height: 74vh;
  }
}

@media (max-width: 420px) {
  header h1 {
    font-size: 21px;
  }
  .flowerCard,
  .adminFlowerCard {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .flowerCard .catalogActions,
  .adminFlowerCard .catalogActions {
    grid-template-columns: 1fr;
  }
  .catalogActions button:nth-child(n + 3) {
    grid-column: auto;
  }
  .actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}