/* =========================================================
   Formal action buttons (V253 colours) + 3D feel only
   Delete  = small solid RED   #c62828
   Edit    = solid BLUE        #0a5f93
   Create / Add / Accept / Save = solid GREEN  #2f7a3e
   3D = edge shadow + hover lift + press-in (no hue change from V253)
   ========================================================= */

:root {
  --cp-btn-3d-ease: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  --cp-btn-red: #c62828;
  --cp-btn-red-press: #9b1c1c;
  --cp-btn-blue: #0a5f93;
  --cp-btn-blue-press: #08496f;
  --cp-btn-green: #2f7a3e;
  --cp-btn-green-press: #256432;
}

/* ---- Neat action rows (Edit + Delete side by side) ---- */
html body td.actions,
html body .actions,
html body .action-buttons,
html body .quote-actions,
html body .quote-toolbar,
html body .form-actions,
html body .completed-job-actions,
html body .dashboard-review-actions,
html body .pay-entry-actions,
html body .staff-bubble-actions,
html body .staff-profile-buttons,
html body .customer-save-actions,
html body .btn-row,
html body .page-heading .btn-row {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  white-space: normal !important;
}

html body td.actions form.inline-form,
html body .actions form.inline-form,
html body form.inline-form.delete-form,
html body form.delete-form {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  width: auto !important;
}

html body td.actions > a,
html body td.actions > button,
html body td.actions > form,
html body .actions > a,
html body .actions > button,
html body .actions > form {
  margin: 0 !important;
  vertical-align: middle !important;
}

/* ---- Shared pill + 3D transition ---- */
html body .btn-role-delete,
html body .btn-role-edit,
html body .btn-role-positive,
html body .btn-role-save,
html body a.btn-role-delete,
html body a.btn-role-edit,
html body a.btn-role-positive,
html body button.btn-role-delete,
html body button.btn-role-edit,
html body button.btn-role-positive,
html body button.btn-role-save,
html body .button.btn-role-delete,
html body .button.btn-role-edit,
html body .button.btn-role-positive,
html body .button.btn-role-save,
html body button.danger,
html body a.button.danger,
html body .button.danger,
html body .danger-button,
html body button[name="save_action"],
html body .complete-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  transition: var(--cp-btn-3d-ease) !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  text-shadow: none !important;
}

/* ---- DELETE — SMALL solid RED #c62828 + 3D depth ---- */
html body .btn-role-delete,
html body a.btn-role-delete,
html body button.btn-role-delete,
html body .button.btn-role-delete,
html body button.danger,
html body a.button.danger,
html body .button.danger,
html body .danger-button,
html body button.danger-button,
html body form button.danger,
html body form.inline-form button.danger,
html body form.inline-form button.btn-role-delete,
html body form.delete-form button,
html body form.delete-form .button,
html body .inline-form button.danger,
html body .inline-form .button.danger,
html body .inline-form .danger-button,
html body table .actions button.danger,
html body table .actions a.danger,
html body table .actions .btn-role-delete,
html body table .actions form button,
html body table .actions form .button,
html body td.actions form button,
html body td.actions form .button,
html body td.actions button.danger,
html body td.actions a.danger,
html body .actions button.danger,
html body .actions a.danger,
html body .delete-job-form button,
html body .customer-danger-zone .danger-button,
html body.admin-mode form.inline-form button.danger,
html body.admin-mode td.actions form button {
  min-height: 28px !important;
  max-height: 30px !important;
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  background: var(--cp-btn-red) !important;
  background-color: var(--cp-btn-red) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 3px 0 #7a1814, 0 5px 12px rgba(179, 38, 30, 0.28) !important;
  transform: translateY(0) !important;
  filter: none !important;
}

html body .btn-role-delete:hover,
html body button.danger:hover,
html body a.button.danger:hover,
html body .button.danger:hover,
html body .danger-button:hover,
html body form button.danger:hover,
html body form.inline-form button.danger:hover,
html body form.delete-form button:hover,
html body table .actions form button:hover,
html body td.actions form button:hover {
  background: var(--cp-btn-red) !important;
  background-color: var(--cp-btn-red) !important;
  background-image: none !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 #6a1410, 0 10px 16px rgba(179, 38, 30, 0.34) !important;
  filter: brightness(1.06) !important;
}

html body .btn-role-delete:active,
html body button.danger:active,
html body a.button.danger:active,
html body .button.danger:active,
html body .danger-button:active,
html body form button.danger:active,
html body form.inline-form button.danger:active,
html body form.delete-form button:active,
html body table .actions form button:active,
html body .btn-role-delete.cp-btn-pressed,
html body button.danger.cp-btn-pressed {
  background: var(--cp-btn-red-press) !important;
  background-color: var(--cp-btn-red-press) !important;
  background-image: none !important;
  color: #ffffff !important;
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: 0 1px 0 #5c100e, 0 2px 6px rgba(179, 38, 30, 0.2) !important;
  filter: brightness(0.97) !important;
}

/* Item-row × remove — tiny red 3D, same red as V253 */
html body .remove-quote-item,
html body.admin-mode .remove-quote-item,
html body .quote-item-row .remove-quote-item {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: var(--cp-btn-red) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 3px 0 #7a1814, 0 4px 10px rgba(179, 38, 30, 0.25) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: var(--cp-btn-3d-ease) !important;
  transform: translateY(0) !important;
}

html body .remove-quote-item:hover {
  background: var(--cp-btn-red) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 0 #6a1410, 0 8px 14px rgba(179, 38, 30, 0.3) !important;
  filter: brightness(1.06) !important;
}

html body .remove-quote-item:active,
html body .remove-quote-item.cp-btn-pressed {
  background: var(--cp-btn-red-press) !important;
  transform: translateY(2px) scale(0.96) !important;
  box-shadow: 0 1px 0 #5c100e, 0 2px 5px rgba(179, 38, 30, 0.2) !important;
  filter: brightness(0.97) !important;
}

/* ---- EDIT — solid BLUE #0a5f93 + 3D ---- */
html body .btn-role-edit,
html body a.btn-role-edit,
html body button.btn-role-edit,
html body .button.btn-role-edit,
html body a.button.btn-role-edit,
html body a.button.secondary.btn-role-edit,
html body table .actions a.btn-role-edit,
html body td.actions a.btn-role-edit {
  min-height: 28px !important;
  max-height: 30px !important;
  height: 28px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  background: var(--cp-btn-blue) !important;
  background-color: var(--cp-btn-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 3px 0 #054a6d, 0 5px 12px rgba(10, 95, 147, 0.28) !important;
  transform: translateY(0) !important;
  filter: none !important;
}

html body .btn-role-edit:hover,
html body a.btn-role-edit:hover,
html body button.btn-role-edit:hover {
  background: var(--cp-btn-blue) !important;
  background-color: var(--cp-btn-blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 #043a58, 0 10px 16px rgba(10, 95, 147, 0.34) !important;
  filter: brightness(1.08) !important;
}

html body .btn-role-edit:active,
html body a.btn-role-edit:active,
html body button.btn-role-edit:active,
html body .btn-role-edit.cp-btn-pressed {
  background: var(--cp-btn-blue-press) !important;
  background-color: var(--cp-btn-blue-press) !important;
  background-image: none !important;
  color: #ffffff !important;
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: 0 1px 0 #04304a, 0 2px 6px rgba(10, 95, 147, 0.2) !important;
  filter: brightness(0.97) !important;
}

/* ---- CREATE / ADD / ACCEPT / SAVE — solid GREEN #2f7a3e + 3D ---- */
html body .btn-role-positive,
html body .btn-role-save,
html body a.btn-role-positive,
html body a.btn-role-save,
html body button.btn-role-positive,
html body button.btn-role-save,
html body .button.btn-role-positive,
html body .button.btn-role-save,
html body button[name="save_action"],
html body .button.success,
html body button.success,
html body .complete-button {
  min-height: 36px !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px 17px !important;
  font-size: 13px !important;
  background: var(--cp-btn-green) !important;
  background-color: var(--cp-btn-green) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 #1e4f28, 0 6px 14px rgba(47, 122, 62, 0.3) !important;
  transform: translateY(0) !important;
  filter: none !important;
}

html body .btn-role-positive:hover,
html body .btn-role-save:hover,
html body button.btn-role-positive:hover,
html body button.btn-role-save:hover,
html body button[name="save_action"]:hover,
html body .complete-button:hover {
  background: var(--cp-btn-green) !important;
  background-color: var(--cp-btn-green) !important;
  background-image: none !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 #163c1e, 0 10px 16px rgba(47, 122, 62, 0.36) !important;
  filter: brightness(1.08) !important;
}

html body .btn-role-positive:active,
html body .btn-role-save:active,
html body button.btn-role-positive:active,
html body button.btn-role-save:active,
html body button[name="save_action"]:active,
html body .complete-button:active,
html body .btn-role-positive.cp-btn-pressed,
html body .btn-role-save.cp-btn-pressed {
  background: var(--cp-btn-green-press) !important;
  background-color: var(--cp-btn-green-press) !important;
  background-image: none !important;
  color: #ffffff !important;
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: 0 1px 0 #163c1e, 0 2px 6px rgba(47, 122, 62, 0.22) !important;
  filter: brightness(0.97) !important;
}

html body .page-heading a.btn-role-positive,
html body .page-heading .button.btn-role-positive,
html body .welcome a.btn-role-positive {
  min-height: 36px !important;
  padding: 8px 17px !important;
}

/* Secondary (Back / Cancel) — keep light style + 3D */
html body .button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save):not(.job-title-move),
html body button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save):not(.job-title-move),
html body a.button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save) {
  transition: var(--cp-btn-3d-ease) !important;
  box-shadow: 0 3px 0 #b7cdd9, 0 5px 12px rgba(12, 63, 89, 0.12) !important;
  transform: translateY(0) !important;
}

html body .button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save):not(.job-title-move):hover,
html body button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save):not(.job-title-move):hover,
html body a.button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 #8eb4c8, 0 10px 16px rgba(10, 95, 147, 0.16) !important;
  filter: brightness(1.02) !important;
}

html body .button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save):not(.job-title-move):active,
html body button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save):not(.job-title-move):active,
html body a.button.secondary:not(.btn-role-edit):not(.btn-role-delete):not(.btn-role-positive):not(.btn-role-save):active {
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: 0 1px 0 #b7cdd9, 0 2px 6px rgba(12, 63, 89, 0.1) !important;
  filter: brightness(0.98) !important;
}

/* Sign out — solid red (same family as Delete) */
html body a.header-signout,
html body .header-signout,
html body.admin-mode a.header-signout,
html body.staff-mode a.header-signout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--cp-btn-red) !important;
  background-color: var(--cp-btn-red) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 3px 0 #7a1814, 0 5px 12px rgba(179, 38, 30, 0.28) !important;
  transition: var(--cp-btn-3d-ease) !important;
  transform: translateY(0) !important;
}

html body a.header-signout:hover,
html body .header-signout:hover {
  background: var(--cp-btn-red) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 #6a1410, 0 10px 16px rgba(179, 38, 30, 0.34) !important;
  filter: brightness(1.06) !important;
}

html body a.header-signout:active,
html body .header-signout:active {
  background: var(--cp-btn-red-press) !important;
  color: #ffffff !important;
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: 0 1px 0 #5c100e, 0 2px 6px rgba(179, 38, 30, 0.2) !important;
}

/* Job title order arrows — compact secondary, not broken symbols */
html body .job-title-move {
  min-width: 32px !important;
  width: 32px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 30px !important;
  padding: 0 !important;
  font-size: 14px !important;
}

/* Job titles: Save same size as Remove, side by side */
html body .job-titles-table td.actions .btn-role-save,
html body .job-titles-table td.actions button.btn-role-save {
  min-height: 28px !important;
  max-height: 30px !important;
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

/* =========================================================
   NUCLEAR DELETE RED — beats v3-1 / ui-polish blue gradients
   Job edit: Delete only this occurrence / all occurrences
   ========================================================= */
html body .danger-zone button,
html body .danger-zone .danger-button,
html body .danger-zone button.danger-button,
html body .danger-zone button.danger,
html body .danger-zone button.btn-role-delete,
html body .danger-actions button,
html body .danger-actions .danger-button,
html body .danger-actions button.danger-button,
html body .danger-actions form button,
html body section.danger-zone form button,
html body section.panel.danger-zone form button,
html body.admin-mode .danger-zone button,
html body.admin-mode .danger-zone .danger-button,
html body.admin-mode section.danger-zone form button.danger-button,
html body button.danger-button,
html body .button.danger-button,
html body form button.danger-button,
html body form .danger-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  max-height: none !important;
  height: auto !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #c62828 !important;
  background-color: #c62828 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-shadow: none !important;
  box-shadow: 0 3px 0 #7a1814, 0 5px 12px rgba(179, 38, 30, 0.28) !important;
  cursor: pointer !important;
  transition: var(--cp-btn-3d-ease) !important;
  transform: translateY(0) !important;
  filter: none !important;
}

html body .danger-zone button:hover,
html body .danger-zone .danger-button:hover,
html body .danger-actions button:hover,
html body .danger-actions .danger-button:hover,
html body section.danger-zone form button:hover,
html body button.danger-button:hover,
html body form button.danger-button:hover {
  background: #c62828 !important;
  background-color: #c62828 !important;
  background-image: none !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 #6a1410, 0 10px 16px rgba(179, 38, 30, 0.34) !important;
  filter: brightness(1.06) !important;
}

html body .danger-zone button:active,
html body .danger-actions button:active,
html body button.danger-button:active {
  background: #9b1c1c !important;
  color: #ffffff !important;
  transform: translateY(2px) scale(0.98) !important;
  box-shadow: 0 1px 0 #5c100e, 0 2px 6px rgba(179, 38, 30, 0.2) !important;
}

html body .danger-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

/* List rows: Edit + Delete side by side, never stack full-width */
html body tr.clickable-row,
html body tr[data-href] {
  cursor: pointer !important;
}

html body tr.clickable-row:hover > td,
html body tr[data-href]:hover > td {
  background: #eef8fc !important;
}

html body td.actions,
html body tr.clickable-row td.actions,
html body table td.actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
  min-width: 150px !important;
}

html body td.actions a.button,
html body td.actions a.btn-role-edit,
html body td.actions button,
html body td.actions form {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}

html body a.quote-view-link {
  display: none !important;
}