html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li,
pre,
code,
address,
variable,
form,
fieldset,
blockquote {
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: normal;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th,
caption {
  font-weight: normal;
  text-align: left;
}
img,
fieldset {
  border: 0;
}
ol {
  padding-left: 1.4em;
  list-style: decimal;
}
q:before,
q:after {
  content: "";
}

/* End of CSS Reset  */

body {
  font-family: Verdana, "Arial Black", Helvetica, sans-serif;
  font-size: 80%;
  background-color: black;
  color: #c7c1bb;
  box-sizing: border-box;
}

a:focus {
  outline: 0 !important;
}

a:link,
a:visited,
a:active {
  font-family: Verdana, "Arial Black", Helvetica, sans-serif;
  color: #ff9a31;
  text-decoration: none;
  opacity: 0.6;
  transition:
    opacity 0.3s ease-out,
    color 0.3s ease-out;
}

a:hover {
  color: #ffad58;
  opacity: 1;
}

a.ajax_colorbox {
  outline: 0;
  vertical-align: inherit;
  opacity: 0.5;
  transition: opacity 0.5s ease-out;
}

a.ajax_colorbox:hover {
  opacity: 1;
}

/* Major section styles */

div.work_body {
  padding: 0px 2px 2px 10px;
  font-size: 1.08em;
}

.work_section {
  padding: 2px 2px 2px 2px;

  margin: 2px 2px 4px 0px;
}

.workstate_section {
  border: 1px groove #607b8b;
}
/* Fieldset/form Styles */

fieldset {
  padding: 2px;
  margin: 2px 2px;
}

input,
textarea,
select {
  color: #c6aead;
  background-color: #080808;
  border: 1px solid #607b8b;
  padding: 1px 1px 1px 1px;
  margin: 2px 2px 2px 2px;
}

/* Labels for fieldset/form items */

label {
  float: left;
  width: 15%;
  margin-right: 0.2em;
  padding-top: 0.3em;
}

label.work {
  float: left;
  width: 112px;
  margin-right: 0.2em;
  text-align: right;
  color: #e6c200;
}

/* Styles for Top Bar */

.workbar {
  padding: 4px 0px 4px 0px;
  margin: 0 auto;
  color: #c1a281;
  width: 1050px;
  height: 77px;
}

.workbar_subsection {
  display: inline-block;
  vertical-align: top;
}

#workbar_left {
  width: 140px;
  margin: 5px 5px 0px 33px;
  text-align: center;
  font-size: 1.2em;
}

#workbar_left p {
  margin: 0px 0px 3px 0px;
}

#workbar_left #mechanic_logged_in_name {
  font-size: 1.4em;
  font-weight: bold;
  color: rgb(237, 210, 24);
  border: #607b8b groove 1px;
  background-color: #111111;
  margin: 1px 1px 4px 1px;
}

#workbar_left * {
  padding: 1px;
}

#workbar_middle {
  position: relative;
  width: 661px;
  background-image: url(images/Banner_newer.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 80px;
}

#workbar_right {
  width: 140px;
  padding-top: 2px;
  margin: 0px 10px 0px 16px;
  text-align: center;
}

/* Manager totals (secret hover) */
#manager_ylt {
  display: none;
  position: absolute;
  left: 16px;
  top: 1px;
}

#manager_secret_hover {
  position: absolute;
  width: 6px;
  height: 10px;
  left: 2px;
  top: 2px;
}

/* Manager data - logged in mechanics display */
#all_loggedin_mechanics_outer {
  text-align: center;
  background-color: #000;
  position: absolute;
  left: 128px;
  top: 47px;
  padding: 4px;
}

#all_loggedin_mechanics {
  margin-left: auto;
  margin-right: auto;
}

.each_mechanic {
  display: inline-block;
  font-size: 1.2em;
  color: #000;
  padding: 2px;
}

/* Recent jobs dropdown */
#recent_jobs {
  float: right;
  width: 160px;
}

#recent_jobs p {
  display: block;
  background: #302E2E;
  margin: 2px 16px 0px 4px;
  padding: 3px 5px 4px 5px;
  border-radius: 5px;
}

#recent_jobs ul {
  position: absolute;
  z-index: 500;
  display: none;
  max-width: 182px;
}

#recent_jobs ul li {
  background: #302E2E;
  margin: 5px 4px 0px 4px;
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
  max-width: 180px;
}

/* Lavalamp menu animation */
.lavalamp-object {
  border-bottom: 2px grey solid;
  background-color: rgba(61, 50, 50, 0.5);
  border-radius: 4px;
}

/* Mechanic clocking options (colorbox popup) */
#mechanic_clocking_options {
  padding: 10px;
  width: 360px;
}

#mechanic_clocking_options img {
  opacity: 0.4;
}

#mechanic_clocking_options h2 {
  color: gold;
}

#lunch_taken,
#van_driver,
#not_fixing_bikes,
#holiday_half_day {
  padding: 4px;
  margin: 6px 0px;
  border: #607b8b groove 1px;
  background-color: #111111;
  font-size: 16px;
}

#not_fixing_bikes #NFB_detail {
  display: none;
  padding: 8px 2px 2px 6px;
}

#NFB_detail_show {
  display: none;
  border: 1px rgb(144, 106, 90) groove;
  padding: 6px;
}

#NFB_detail_show #NFB_detail_text {
  color: rgb(182, 174, 174);
  opacity: 1;
}

#lunch_taken span,
#van_driver span,
#not_fixing_bikes span,
#holiday_half_day span {
  opacity: 0.2;
  cursor: pointer;
  color: #ff9a31;
}

#lunch_taken span.mechanic_clocking_option_active,
#van_driver span.mechanic_clocking_option_active,
#not_fixing_bikes span.mechanic_clocking_option_active,
#holiday_half_day span.mechanic_clocking_option_active {
  opacity: 1;
}

p {
  padding: 2px 0px 1px 0px;
}

#target_figures {
  font-size: 22px;
  padding: 3px 8px 0px 0px;
  float: right;
  color: rgb(237, 210, 24);
  text-align: right;
}

#month_target {
  display: none;
  color: #f4e474;
}

#top_bar_lab_avs {
  font-size: 14px;
  padding: 2px 4px 0px 0px;
  float: right;
  color: rgb(237, 210, 24);
}

#top_bar_lab_avs td,
#top_bar_lab_avs th {
  border: 1px #931627 solid;
  text-align: center;
  word-wrap: break-word;
  max-width: 60px;
  min-width: 44px;
}

#top_bar_lab_avs th {
  color: #ffad58;
}

#top_bar_lab_avs th:nth-of-type(1) {
  font-style: italic;
  font-weight: bold;
}

#top_bar_lab_avs td:nth-of-type(1) {
  color: #ffad58;
}

#top_bar_lab_avs tr:nth-of-type(3) td:nth-of-type(3),
#top_bar_lab_avs tr:nth-of-type(3) td:nth-of-type(4) {
  font-weight: bold;
}

/* Styles for Search bar */

#search_bar {
  font-size: 1.2em;
  margin: 2px 5px 10px 0px;
  padding: 7px 5px 4px 10px;
  background: #0f0e0e;
  overflow: hidden;
}

div.availability {
  float: right;
  padding-right: 16px;
  font-weight: bold;
  color: #c1a281;
}

div.availability_today_toggle {
  display: inline;
  background-color: rgba(255, 242, 0, 0.82);
  color: #dd3424;
  padding: 1px 4px 1px 4px;
}

/* Styles for workbar_simple (links and recent jobs) */

.workbar_simple {
  margin: 2px 5px 10px 0px;
  padding: 4px 5px 7px 10px;
  background: #0f0e0e;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.workbar_simple ul {
  list-style: none;
}

.workbar_simple ul li {
  float: left;
  display: inline-block;
  margin: 2px 4px 2px 4px;
  padding: 2px 5px 2px 5px;
}

.workbar_simple ul li.active a {
  opacity: 1;
  color: #ffce31;
}

#ActiveWarranty {
  background-color: #9966cc;
  color: #09bd0d;
  font-weight: bold;
  padding: 2px 2px 2px 2px;
}

/* Legend for forms/fieldsets */

legend.work_section {
  padding: 0px 0px 7px 80px;
  color: #ff9a31;
  font-size: 1.4em;
  font-weight: bold;
}

/* Style for All standard submit buttons */

.worksubmit {
  font-size: 9pt;
}

.combine_cust_button {
  cursor: pointer;
  font-size: 0.6em !important;
}
.cust-merge-confirm-strip {
  margin: 8px 0;
  padding: 12px 16px;
  background: #f8f0e0;
  border: 2px solid #cc7733;
  border-radius: 4px;
}
.cust-merge-confirm-text {
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.cust-merge-confirm-text strong {
  color: #cc3333;
}
.cust-merge-confirm-btns {
  display: flex;
  gap: 8px;
}
.cust-merge-confirm-btns .cust-merge-do {
  background: #cc3333;
  color: #fff;
  border: 1px solid #aa2222;
  padding: 4px 12px;
  cursor: pointer;
}
.cust-merge-confirm-btns .cust-merge-cancel {
  padding: 4px 12px;
  cursor: pointer;
}
.merge-results {
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
}
.merge-results h2 {
  color: #cc3333;
  font-size: 14px;
  margin-bottom: 8px;
}
/* More details expandable section (customer edit) */
.cust-more-toggle {
  margin-left: 8px;
  font-size: 10px;
  color: #555;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.cust-more-toggle:hover {
  color: #888;
}
.cust-more-section {
  padding: 0 0 4px 0;
  border-top: 1px solid #1e3050;
  margin-top: 2px;
}
.cust-secondary-emails {
  display: inline-block;
  vertical-align: top;
}
.cust-email-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
}
.cust-email-addr {
  color: #c6aead;
}
.cust-email-remove {
  color: #666;
  text-decoration: none;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  transition: all 0.15s;
}
.cust-email-remove:hover {
  color: #cc4444;
  background: #2a1a1a;
}
.cust-email-add-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}
.cust-email-add-input {
  font-size: 11px;
  padding: 2px 4px;
}
.cust-email-add-btn {
  font-size: 9pt;
  padding: 2px 8px;
}
.cust-email-confirm {
  font-size: 11px;
  color: #dfbcb5;
  padding: 4px 0;
}
.cust-email-confirm strong {
  color: #f59412;
}
.cust-email-confirm .cust-email-confirm-yes {
  background: #cc3333;
  border-color: #aa2222;
  color: #fff;
  font-size: 9pt;
  padding: 1px 8px;
  margin-left: 4px;
}
.cust-email-confirm .cust-email-confirm-no {
  font-size: 9pt;
  padding: 1px 8px;
}

/*Styles For Search results display */

.search_results_bar {
  padding: 4px 6px 4px 8px;
  margin: 6px 6px 1px 8px;
  width: 500px;
  color: #dfbcb5;
  background-color: #153e57;
  font-size: 18px;
  font-weight: Bold;
  border-radius: 15px;
}

.search_section {
  color: #efdfc6;
  font-size: 14px;
  padding: 4px 0px 6px 20px;
  margin: 10px 20px;
  border: 1px solid rgba(219, 103, 81, 0.28);
  background-color: #0a0c0e;
  width: 960px;
  border-radius: 10px;
}
.search_section > h2 {
  font-size: 20px;
}

.search_section > p {
  padding: 4px 2px;
  font-size: 1.2em;
}

.search_section .search_result_actions a {
  font-size: 15px;
  padding: 4px 8px 4px 8px;
  margin: 2px 2px;
  border: 1px solid rgba(219, 103, 81, 0.28);
  border-radius: 6px;
  background-color: #232930;
  transition: background-color 0.5s ease-out;
}
.search_section .search_result_actions a:hover {
  background-color: #153e57;
}

.search_section a.search_result_actions_clicked,
.search_section a.search_result_actions_clicked:hover {
  background-color: #5b7789;
  box-shadow: 3px 3px 3px #948b8b;
  color: #e7f35e;
}

.search_section .search_sub_label {
  color: gold;
  opacity: 0.8;
}

.search_sub_section {
  color: #7b5542;
  font-size: 12px;
  padding: 4px 0px 2px 30px;
}

.search_sub_section_warranty {
  color: #907060;
  background-color: #7e2217;
  font-size: 12px;
  padding: 4px 0px 3px 30px;
  margin-right: 350px;
}

/* Styles for cust history - used both for the search and light box*/

.search_cust_history {
  display: none;
}

/* Customer history lightbox — .ch-* styles */
.ch-header {
  background: #1a1a1a;
  border-bottom: 1px solid #333;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ch-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: #f9a825;
  margin: 0;
}
.ch-header h2 span {
  color: #ddd;
  font-weight: normal;
}
.ch-header-left {
  min-width: 0;
  flex: 1;
}
.ch-header-contact {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  flex-wrap: wrap;
  font-size: 11px;
}
.ch-contact-item {
  color: #999;
  text-decoration: none;
}
a.ch-contact-item:hover {
  color: #f9a825;
}
.ch-contact-sep {
  color: #555;
  margin: 0 2px;
}
.ch-contact-email {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #333;
}
.ch-contact-postcode {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #333;
  color: #777;
}
.ch-book-btn {
  background: #f9a825;
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ch-book-btn:hover {
  background: #ffba42;
}
.ch-book-btn:disabled {
  background: #555;
  color: #999;
  cursor: wait;
}
.ch-tabs {
  display: flex;
  background: #151515;
  border-bottom: 1px solid #333;
  padding: 0 20px;
}
.ch-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  transition: color 0.15s;
}
.ch-tab:hover { color: #aaa; }
.ch-tab.active {
  color: #f59412;
  border-bottom-color: #f59412;
}
.ch-summary {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #333;
  background: #151515;
}
.ch-stat {
  flex: 1;
  padding: 10px 20px;
  border-right: 1px solid #282828;
  text-align: center;
}
.ch-stat:last-child { border-right: none; }
.ch-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #ddd;
}
.ch-stat-value.green { color: #4CAF50; }
.ch-stat-label {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.ch-body {
  padding: 0;
  max-height: 82vh;
  overflow-y: auto;
}
.ch-body::-webkit-scrollbar { width: 6px; }
.ch-body::-webkit-scrollbar-track { background: #111; }
.ch-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.ch-body::-webkit-scrollbar-thumb:hover { background: #555; }
.ch-table {
  width: 100%;
  border-collapse: collapse;
}
.ch-table thead th {
  position: sticky;
  top: 0;
  background: #1a1a1a;
  color: #888;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #333;
  z-index: 2;
}
.ch-table thead th:last-child { text-align: center; }
.ch-table tbody tr.ch-job-row {
  border-bottom: 1px solid #1e1e1e;
  cursor: pointer;
  transition: background 0.1s;
}
.ch-table tbody tr.ch-job-row:hover { background: #1a1a1a; }
.ch-table tbody tr.ch-job-row.expanded { background: #1a1a1a; }
.ch-table tbody td {
  padding: 8px 12px;
  font-size: 12px;
  vertical-align: middle;
}
.ws-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.ws-delivered  { background: rgba(76,175,80,0.15); color: #81c784; border: 1px solid rgba(76,175,80,0.3); }
.ws-finished   { background: rgba(139,195,74,0.15); color: #aed581; border: 1px solid rgba(139,195,74,0.3); }
.ws-active     { background: rgba(33,150,243,0.15); color: #64b5f6; border: 1px solid rgba(33,150,243,0.3); }
.ws-collected  { background: rgba(255,152,0,0.15); color: #ffb74d; border: 1px solid rgba(255,152,0,0.3); }
.ws-booked     { background: rgba(33,150,243,0.12); color: #90caf9; border: 1px solid rgba(33,150,243,0.2); }
.ws-cancelled  { background: rgba(239,68,68,0.12); color: #ef5350; border: 1px solid rgba(239,68,68,0.2); }
.ws-warranty   { background: rgba(244,67,54,0.2); color: #ef9a9a; border: 1px solid rgba(244,67,54,0.3); }
.ch-cost { font-weight: 600; color: #ddd; }
.ch-cost.zero { color: #555; }
.ch-expand {
  text-align: center;
  color: #555;
  font-size: 10px;
  transition: all 0.2s;
}
.ch-table tbody tr.ch-job-row:hover .ch-expand { color: #f59412; }
.ch-expand.open { color: #f59412; transform: rotate(90deg); display: inline-block; }
.ch-detail-row td {
  padding: 0 !important;
  border-bottom: 1px solid #333 !important;
}
.ch-detail {
  background: #151515;
  border-top: 1px solid #2a2a2a;
  animation: ch-slide 0.2s ease-out;
}
@keyframes ch-slide {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 900px; }
}
.ch-detail-inner {
  display: flex;
  gap: 0;
}
.ch-detail-left {
  flex: 2;
  min-width: 0;
}
.ch-detail-right {
  flex: 3;
  min-width: 0;
}
.ch-detail-resize {
  width: 5px;
  cursor: col-resize;
  background: #282828;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
}
.ch-detail-resize:hover,
.ch-detail-resize.dragging {
  background: #f59412;
}
.ch-detail-resize::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  right: -3px;
  bottom: 0;
}
.ch-section {
  padding: 10px 16px;
  border-bottom: 1px solid #222;
}
.ch-section:last-child { border-bottom: none; }
.ch-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #f9a825;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ch-section-content {
  font-size: 12px;
  color: #ddd;
  line-height: 1.6;
}
.ch-map-link {
  font-size: 11px;
  color: #6ba5d7;
  text-decoration: none;
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid #2a3a4a;
  border-radius: 3px;
  background: #0e1a28;
  transition: all 0.15s;
}
.ch-map-link:hover {
  color: #8bbce8;
  border-color: #4a6a8a;
  background: #142438;
}
.ch-section-content .label {
  color: #888;
  font-size: 11px;
}
.ch-invoice-preview {
  background: #fff;
  color: #333;
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 12px;
  max-height: 250px;
  overflow-y: auto;
  line-height: 1.5;
}
.ch-invoice-preview::-webkit-scrollbar { width: 4px; }
.ch-invoice-preview::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.ch-notes {
  white-space: pre-wrap;
  font-size: 11px;
  color: #bbb;
  line-height: 1.5;
}
.ch-detail-actions {
  padding: 8px 16px;
  border-bottom: 1px solid #282828;
  background: #121212;
  display: flex;
  gap: 8px;
}
.ch-detail-btn {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #444;
  background: transparent;
  color: #888;
  transition: all 0.15s;
  text-decoration: none;
}
.ch-detail-btn:hover { border-color: #888; color: #ddd; }
.ch-detail-btn.primary { background: #f59412; border-color: #f59412; color: #000; font-weight: 600; }
.ch-detail-btn.primary:hover { background: #ffad58; }
.ch-detail-btn.warranty { border-color: #ef5350; color: #ef5350; }
.ch-detail-btn.warranty:hover { background: #ef5350; color: #fff; }
.ch-warranty-confirm {
  padding: 10px 16px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-top: none;
  border-bottom: none;
  font-size: 12px;
  color: #ccc;
}
.ch-warranty-confirm-text { margin-bottom: 8px; }
.ch-warranty-confirm-btns { display: flex; gap: 8px; }
.ch-warranty-bike-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ch-warranty-bike-pick { cursor: pointer; }
.ch-warranty-bike-pick:hover { border-color: #ef5350; color: #ef5350; }
.ch-warranty-bike-colour { color: #888; }
.ch-table tbody tr.warranty-row {
  border-left: 3px solid #ef5350;
}
.ch-table tbody tr.warranty-row td:first-child {
  padding-left: 9px;
}

.search_cust_history_table .column1 {
  width: 160px;
}
.search_cust_history_table .column2 {
  width: 110px;
}
.search_cust_history_table .column3 {
  width: 255px;
}
.search_cust_history_table .column4 {
  width: 105px;
}
.search_cust_history_table .column5 {
  width: 75px;
}
.search_cust_history_table .column6 {
  width: 65px;
  text-align: center;
}
.search_cust_history_table .column7 {
  width: 75px;
  text-align: center;
}

/* Legacy cust_history classes kept for Search_Cust_History.asp compatibility */
.cust_history_holder { width: auto; }
.cust_history_holder th { color: gold; font-weight: bold; font-style: italic; }
.cust_history_holder td, .cust_history_holder th { padding: 3px 2px 3px 3px; border: #000000 solid 2px; }
.cust_history_job_detail { font-size: 0.9em; }
.cust_history_work_view_hide { display: none; }

/* Styles for inline cust edit form at top of work_edit */
.custdetails_edit_inline {
  display: none;
}

/* Styles for customer details and pickup/drop off info above work edit form */

div.work_edit_custdetails {
  padding: 0px 8px 2px 0px;
}

div#cust_details_address_holder {
  vertical-align: top;
}

div.custdetails_notes {
  padding: 2px 2px 6px 2px;
}

div.custdetails_not_address {
  padding: 2px 2px 6px 2px;
}

div.custdetails_address1,
div.custdetails_address2,
div.custdetails_address_headers,
div.custdetails_address_workshop {
  border: 0px solid #607b8b;
  padding: 2px 3px 2px 0px;
}

span.custdetails_title {
  display: inline-block;
  text-align: right;
  width: 112px;
  height: 15px;
  padding-bottom: auto;
  padding-top: auto;
}
span.custdetails_body {
  display: inline-block;
  border: 1px solid #607b8b;

  background-color: #111619;
  padding: 4px;
  min-height: 15px;
  max-width: 560px;

  line-height: 16px;
}

span.custdetails_address {
  display: inline-block;
  text-align: right;
  max-width: 470px;
}

span.cust_pickup_radio_input,
span.cust_dropoff_radio_input,
span.custdetails_maplink {
  display: inline-block;
  width: 62px;
  text-align: center;
}

/* Style for report sub section title */

div.report_title {
  padding: 4px 0 5px 15px;
  font-size: 1.4em;
  font-weight: bold;
  color: #da842b;
}

/* Styles for work VIEW */

.work_view {
  padding: 5px 2px 5px 7px;
  margin: 6px 0px 8px 0px;
  border: #607b8b groove 2px;
  width: 870px;
  background-color: #1f0206;
}

/* Compact work view for warranty original job */
.work_view_compact {
  background-color: #1a1a1a;
  border: 1px solid #444;
  border-radius: 4px;
  margin: 10px 0;
  padding: 0;
}

.work_view_compact_header {
  background-color: #2d2d2d;
  padding: 10px 15px;
  border-bottom: 1px solid #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.work_view_compact_header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #f9a825;
}

.work_view_compact_meta {
  font-size: 12px;
  color: #aaa;
}

.work_view_compact_meta strong {
  color: #fff;
}

.work_view_compact_body {
  display: flex;
}

.work_view_compact_left {
  flex: 1;
  border-right: 1px solid #333;
}

.work_view_compact_right {
  flex: 1;
}

.work_view_compact_section {
  border-bottom: 1px solid #333;
  padding: 10px 15px;
}

.work_view_compact_section:last-child {
  border-bottom: none;
}

.work_view_compact_title {
  font-size: 11px;
  font-weight: bold;
  color: #f9a825;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.work_view_compact_content {
  font-size: 12px;
  color: #ddd;
  line-height: 1.5;
}

.work_view_compact_totals {
  color: #aaa;
}

.work_view_compact_totals strong {
  color: #4CAF50;
}


/* Styles for work edit outline */
div#work_edit_cont {
  /* Background/padding only when has content - use :has() for modern browsers */
}
div#work_edit_cont:has(*) {
  padding: 6px 0 8px 6px;
  background-color: #1b1919;
}
/* ========== WORK EDIT STYLES (Jan 2026) ========== */

/* Outer flex wrapper — form left, sidebar anchored right */
.work_edit_outer {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Main container overrides */
div#work_edit {
  width: auto;
  max-width: 1150px;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
}

#Edit_Work > fieldset {
  min-width: 0;
  overflow: hidden;
}

div.work_edit_float_left {
  float: none;
  border: none;
  padding: 0;
  width: auto;
  background: transparent;
}

div.work_edit_float_right {
  float: none;
  flex: 0 0 265px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  margin-left: auto;
  border: none;
  border-left: 1px solid #444;
  position: relative;
  padding-left: 8px;
}

div#clear_bar {
  display: none;
}

/* Legend/Title */
.work_edit_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #444;
}

#Edit_Work legend.work_section {
  font-size: 14pt;
  font-weight: bold;
  color: #e6c200;
  padding: 0;
  margin: 0;
  border: none;
  width: auto;
  float: none;
}

#Edit_Work fieldset {
  border: none !important;
  padding: 0;
  margin: 0;
}

/* ---- CUSTOMER DETAILS SECTION ---- */
div.work_edit_custdetails {
  background: transparent;
  border-radius: 0;
  padding: 0 0 8px 0;
  margin-bottom: 6px;
  border: none;
  border-bottom: 1px solid #444;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

/* Duplicate customer detection banner */
.dup-banner {
  background: #2a1a00;
  border: 1px solid #b8860b;
  border-radius: 4px;
  padding: 6px 10px;
  margin: 0 0 4px 0;
  font-size: 11px;
  color: #f0d060;
}
.dup-banner-item {
  margin: 3px 0 0 8px;
}
.dup-banner-signals {
  color: #c0a030;
}
.dup-banner .act-info,
.dup-banner .act-edit {
  width: auto;
  padding: 2px 6px;
  margin-left: 6px;
  font-size: 10px;
}
.dup-banner-merge.confirming {
  background: #a33 !important;
  border-color: #c44 !important;
  color: #fff !important;
}
.dup-banner-success {
  color: #6c6;
}
.dup-reload-link {
  color: #6cf;
  text-decoration: underline;
  cursor: pointer;
}
.dup-reload-link:hover {
  color: #8df;
}
.dup-compare-wrap {
  margin: 4px 0;
}
.dup-compare-loading {
  color: #888;
  font-size: 11px;
  padding: 8px;
}
.dup-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: #c6aead;
}
.dup-compare-table th {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid #333;
  color: #8899aa;
}
.dup-compare-table td {
  padding: 3px 8px;
  border-bottom: 1px solid #1a1a1a;
  vertical-align: top;
}
.dup-compare-label {
  color: #666;
  font-size: 10px;
  text-transform: uppercase;
  width: 70px;
  white-space: nowrap;
}
.dup-compare-diff td {
  background: rgba(184, 134, 11, 0.08);
  border-left: 2px solid #b8860b;
}
.dup-compare-diff td.dup-compare-label {
  border-left: none;
  background: none;
}
.dup-compare-richer {
  color: #e0d0cf;
  font-weight: bold;
}
.dup-compare-muted {
  color: #666;
  font-size: 10px;
}
.dup-compare-notes {
  font-size: 10px;
  color: #888;
  max-width: 200px;
  word-wrap: break-word;
}
.dup-compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.dup-compare-header .dup-keep-btn {
  width: auto;
  padding: 2px 8px;
  font-size: 10px;
}
.dup-merge-confirm {
  padding: 6px 10px;
  margin: 4px 0;
  background: #2a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 4px;
  font-size: 11px;
  color: #dfbcb5;
}
.dup-merge-confirm strong {
  color: #f59412;
}
.dup-merge-confirm .act-edit,
.dup-merge-confirm .act-info {
  width: auto;
  padding: 2px 8px;
  font-size: 10px;
  margin-left: 6px;
}

.custdetails_main {
  flex: 0 1 auto;
  min-width: 0;
}

div.custdetails_not_address,
div.custdetails_notes {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  border: none;
}

span.custdetails_title {
  display: inline-block;
  width: 60px;
  min-width: 60px;
  text-align: right;
  color: #e6c200;
  font-size: 11pt;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  margin-right: 10px;
  line-height: 1.4;
  height: auto;
}

span.custdetails_body {
  flex: 1;
  display: inline-block;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: #fff;
  font-size: 11pt;
  line-height: 1.4;
  max-width: none;
  min-height: auto;
}

span.custdetails_body a {
  color: #6cb3ff;
  margin: 0 3px;
}

span.custdetails_body a:hover {
  color: #99ccff;
}

/* Inline customer edit form */
.custdetails_edit_inline {
  display: none;
  background: #1a1a1a;
  border: 1px solid #444;
  padding: 12px 15px;
  margin-bottom: 10px;
}

.custdetails_edit_inline .work_section {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.custdetails_edit_inline fieldset {
  border: none !important;
  padding: 0;
  margin: 0;
}

.custdetails_edit_inline legend.work_section {
  font-size: 11pt;
  font-weight: bold;
  color: #e6c200;
  padding: 0 0 8px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #444;
  width: 100%;
  display: block;
}

.custdetails_edit_inline label.work {
  display: inline-block;
  width: 80px;
  min-width: 80px;
  text-align: right;
  color: #e6c200;
  font-size: 10pt;
  float: none;
  margin-right: 10px;
  padding: 0;
}

.custdetails_edit_inline input[type="text"],
.custdetails_edit_inline textarea {
  padding: 5px 8px;
  border: 1px solid #666;
  border-radius: 2px;
  background: #333;
  color: #fff;
  font-size: 10pt;
  margin: 3px 5px 3px 0;
}

.custdetails_edit_inline input[type="text"]:focus,
.custdetails_edit_inline textarea:focus {
  border-color: #e6c200;
  outline: none;
  box-shadow: 0 0 3px rgba(230, 194, 0, 0.3);
}

.custdetails_edit_inline textarea {
  vertical-align: top;
}

.custdetails_edit_inline br {
  display: block;
  margin-bottom: 6px;
  content: "";
}

.cust-edit-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  vertical-align: top;
}

.cust-edit-buttons .worksubmit,
.cust-edit-buttons #edit_cust_submit,
.cust-edit-buttons #edit_cust_cancel {
  padding: 6px 16px;
  font-size: 10pt;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  margin: 0;
}

.cust-edit-buttons #edit_cust_submit {
  background: linear-gradient(to bottom, #4a7c10, #3a6208);
  border: 1px solid #5a9c12;
  color: #fff;
}

.cust-edit-buttons #edit_cust_submit:hover {
  background: linear-gradient(to bottom, #5a9c12, #4a7c10);
}

.cust-edit-buttons #edit_cust_cancel {
  background: #333;
  border: 1px solid #555;
  color: #aaa;
}

.cust-edit-buttons #edit_cust_cancel:hover {
  background: #444;
  color: #ccc;
}

.custdetails_edit_inline #edit_cust_cancel:hover {
  background: #444;
  color: #ccc;
}

/* Inline alert for customer edit form */
.cust-edit-alert {
  background: #1a1a1a;
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cust-edit-alert-msg {
  flex: 1;
  color: #ccc;
  font-size: 12px;
}
.cust-edit-alert-dismiss {
  background: #333;
  color: #aaa;
  border: 1px solid #555;
  border-radius: 3px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}
.cust-edit-alert-dismiss:hover {
  background: #444;
  color: #ddd;
}

/* Address section */
div#cust_details_address_holder {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

div#cust_details_address_holder > span.custdetails_title {
  width: 55px;
  min-width: 55px;
  padding-top: 22px;
  align-self: flex-start;
}

div#cust_details_address_holder > span.custdetails_body {
  flex: 1;
}

div.custdetails_address_headers {
  display: flex;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid #333;
  margin-bottom: 2px;
}

div.custdetails_address_headers span {
  font-size: 8pt;
  text-transform: uppercase;
  color: #888;
}

div.custdetails_address1,
div.custdetails_address2,
div.custdetails_address_workshop {
  display: flex;
  align-items: center;
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  font-size: 10pt;
}

div.custdetails_address_workshop {
  border-bottom: none;
  color: #777;
  font-style: italic;
}

span.cust_pickup_radio_input,
span.cust_dropoff_radio_input {
  width: 45px;
  text-align: center;
}

span.custdetails_address {
  flex: 1;
  text-align: left;
  max-width: none;
  color: #ccc;
}

span.custdetails_maplink {
  width: 40px;
  text-align: right;
}

span.custdetails_maplink a {
  color: #6cb3ff;
  font-size: 9pt;
}

/* ---- COSTS SECTION ---- */
div.work_costs {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: 9pt;
  max-width: 265px;
}

div.work_costs h2 {
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #e6c200;
  text-decoration: none;
  margin: 8px 0 4px 0;
  padding-top: 8px;
  padding-bottom: 0;
  border-top: 1px solid #444;
  border-bottom: none;
}

div.work_costs .cost-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 9pt;
  color: #ccc;
}

div.work_costs .cost-row span {
  color: #e6c200;
  font-weight: bold;
}

div.work_costs .cost-row.total {
  border-top: 1px solid #444;
  margin-top: 4px;
  padding-top: 4px;
  font-weight: bold;
  color: #fff;
}

div.work_costs .cost-row.total span {
  font-size: 10pt;
}

div.work_costs .cost-row.discount {
  color: #5a5;
}

div.work_costs .cost-row.vat {
  font-size: 8pt;
  color: #777;
}

/* Activity/Timings container */
div[id^="responsecontainer_"] {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 50px;
  font-size: 9pt;
  line-height: 1.4;
}

div[id^="responsecontainer_"] p {
  margin: 0;
  padding: 2px 0;
  color: #ccc;
}

div[id^="responsecontainer_"] hr {
  border: none;
  border-top: 1px solid #444;
  margin: 6px 0;
}

div[id^="responsecontainer_"] span.work_active_label {
  color: #e6c200;
}

/* Form row groups */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 4px;
  padding: 2px 0;
}

.form-row.border-top {
  border-top: 1px solid #444;
  padding-top: 6px;
  margin-top: 4px;
}

/* Form groups within rows */
.form-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-group label {
  color: #e6c200;
  font-size: 10pt;
  min-width: auto;
  float: none;
  width: auto;
}

.form-group.stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.form-group.stacked label {
  font-weight: bold;
  color: #e6c200;
}

/* Section headers */
.form-section-title {
  display: inline-block;
  color: #da842b;
  font-size: 10pt;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 15px;
  padding: 0;
  border-bottom: none;
}

/* Input improvements */
#Edit_Work input[type="text"],
#Edit_Work select {
  padding: 5px 8px;
  border: 1px solid #666;
  border-radius: 2px;
  background: #333;
  color: #fff;
  font-size: 10pt;
}

#Edit_Work input[type="text"]::placeholder {
  color: #888;
}

#Edit_Work input[type="text"]:focus,
#Edit_Work select:focus {
  border-color: #e6c200;
  outline: none;
  box-shadow: 0 0 3px rgba(230, 194, 0, 0.3);
}

#Edit_Work textarea {
  padding: 8px;
  border: 1px solid #666;
  border-radius: 2px;
  background: #333;
  color: #fff;
  font-size: 10pt;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

#Edit_Work textarea:focus {
  border-color: #e6c200;
  outline: none;
}

/* Checkbox styling */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: transparent;
  border-radius: 0;
}

.checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checkbox-group label {
  cursor: pointer;
  font-size: 9pt;
  color: #ccc;
  white-space: nowrap;
  float: none;
  width: auto;
}

/* Improved submit button (bottom — inline in status row) */
#work_edit_submit {
  padding: 6px 20px;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(to bottom, #4a7c10, #3a6208);
  border: 1px solid #5a9c12;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s ease;
}

#work_edit_submit:hover {
  background: linear-gradient(to bottom, #5a9c12, #4a7c10);
  box-shadow: 0 2px 8px rgba(90, 156, 18, 0.4);
}

#work_edit_submit:active {
  transform: translateY(1px);
}

/* Submit button (top — header) */
.work_edit_header_actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.work_edit_submit_top {
  padding: 5px 14px;
  font-size: 9pt;
  font-weight: bold;
  background: linear-gradient(to bottom, #4a7c10, #3a6208);
  border: 1px solid #5a9c12;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.work_edit_submit_top:hover {
  background: linear-gradient(to bottom, #5a9c12, #4a7c10);
  box-shadow: 0 2px 8px rgba(90, 156, 18, 0.4);
}
.work_edit_submit_top:active {
  transform: translateY(1px);
}

/* Customer form submit buttons */
#add_cust_submit,
#edit_cust_submit {
  padding: 6px 20px;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(to bottom, #4a7c10, #3a6208);
  border: 1px solid #5a9c12;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  margin-top: 6px;
  transition: all 0.2s ease;
}
#add_cust_submit:hover,
#edit_cust_submit:hover {
  background: linear-gradient(to bottom, #5a9c12, #4a7c10);
  box-shadow: 0 2px 8px rgba(90, 156, 18, 0.4);
}
#add_cust_submit:active,
#edit_cust_submit:active {
  transform: translateY(1px);
}

/* Compact input sizes */
.input-date {
  width: 90px;
}
.input-time {
  width: 70px;
}
.input-small {
  width: 50px;
}
.input-medium {
  width: 120px;
}
.input-wide {
  width: 280px;
}

/* Status row highlight */
.form-row.status-row {
  background: transparent;
  padding: 2px 0;
  border-radius: 0;
  margin-top: 0;
}

/* Change Customer Search UI */
.change-cust-search {
  background: #1a1a1a;
  border: 1px solid #444;
  padding: 15px;
  margin: 10px 0;
  max-width: 600px;
}

.change-cust-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #444;
}

.change-cust-header .form-section-title {
  margin-right: 15px;
}

.change-cust-hint {
  color: #888;
  font-size: 9pt;
}

.change-cust-search input[type="text"] {
  padding: 6px 10px;
  border: 1px solid #666;
  border-radius: 2px;
  background: #333;
  color: #fff;
  font-size: 10pt;
  width: 200px;
}

.change-cust-search input[type="text"]:focus {
  border-color: #e6c200;
  outline: none;
}

.change-cust-search .worksubmit {
  padding: 6px 14px;
  font-size: 10pt;
  margin-left: 8px;
}

#change_cust_cancel {
  background: #444;
  border-color: #555;
}

#change_cust_cancel:hover {
  background: #555;
}

/* Change Customer Search Results */
#change_cust_search_results {
  margin: 10px 0;
  max-width: 900px;
}

#change_cust_search_results .search_section {
  width: auto;
  max-width: 100%;
  background-color: #151515;
  border-color: #444;
  margin: 10px 0;
  padding: 12px 15px;
}

#change_cust_search_results .search_results_bar {
  width: auto;
  background-color: #1a1a1a;
  margin: 0 0 10px 0;
  padding: 8px 12px;
  border-radius: 0;
  font-size: 14px;
}

#change_cust_search_results .change_cust_choose {
  background: linear-gradient(to bottom, #4a7c10, #3a6208);
  border: 1px solid #5a9c12;
  color: #fff;
}

#change_cust_search_results .change_cust_choose:hover {
  background: linear-gradient(to bottom, #5a9c12, #4a7c10);
}

#change_cust_search_results .cust_history_holder {
  width: auto;
  max-width: 100%;
  margin: 0;
}

/* Search customer history table - dark theme */
.search_cust_history_table {
  border-collapse: collapse;
  width: 100%;
  background-color: #1a1a1a;
  border: none;
}

.search_cust_history_table thead th {
  background-color: #252525;
  color: gold;
  font-weight: bold;
  font-style: italic;
  padding: 8px;
  text-align: left;
  border: none;
  border-bottom: 1px solid #444;
}

.search_cust_history_table tr {
  background-color: #1a1a1a;
}

.search_cust_history_table td {
  padding: 6px 8px;
  color: #ccc;
  background-color: #1a1a1a;
  border: none;
  border-bottom: 1px solid #333;
}

.search_cust_history_table tr:hover td {
  background-color: #252525;
}

.search_cust_history_table a {
  color: #7cb342;
}

.search_cust_history_table a:hover {
  color: #9ccc65;
}

/* Work notes full width */
.form-row.full-width {
  flex-direction: column;
  align-items: stretch;
}

.form-row.full-width .form-group {
  width: 100%;
}

/* Warranty form styling */
#work_edit_warranty {
  width: auto;
  max-width: 1150px;
  flex: 1 1 0%;
  min-width: 0;
  background: transparent;
  padding: 0;
  border: none;
}

.warranty-fieldset {
  border: 3px double #6b2020;
  background-color: #2d1515;
  padding: 12px 15px;
}

.warranty-legend {
  color: #fd8100;
  font-size: 16pt;
  font-weight: bold;
  padding: 0 8px;
}

#warranty_edit_submit {
  padding: 6px 20px;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(to bottom, #4a7c10, #3a6208);
  border: 1px solid #5a9c12;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  margin-top: 6px;
  transition: all 0.2s ease;
}

#warranty_edit_submit:hover {
  background: linear-gradient(to bottom, #5a9c12, #4a7c10);
  box-shadow: 0 2px 8px rgba(90, 156, 18, 0.4);
}

#warranty_edit_submit:active {
  transform: translateY(1px);
}

/* Warranty costs display */
.work_costs .cost-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px solid #333;
}

.work_costs .cost-row:last-child {
  border-bottom: none;
}

.work_costs .cost-label {
  color: #ccc;
}

.work_costs .cost-value {
  color: #e6c200;
  font-weight: bold;
}

.work_costs .cost-row.total {
  border-top: 1px solid #666;
  margin-top: 4px;
  padding-top: 4px;
}

div.warranty_work_activity_float {
  position: absolute;
  left: 790px;
  top: 220px;
  font-size: 8pt;
  text-align: left;
  border: #607b8b groove 1px;
  padding: 2px 4px 2px 4px;
  background-color: #561810;
}

/* Styles for REPORTS totala */

.report_totals {
  padding: 0px 0px 0px 0px;
  border-top: #607b8b ridge 1px;
  font-size: 8pt;
  font-weight: bold;
  color: #94a69c;
  text-align: center;
}

.mechanic_report_totals {
  padding: 0px 0px 0px 0px;
  border-top: #607b8b ridge 1px;
  font-size: 8pt;
  font-weight: bold;
  color: #fff200;
  text-align: center;
}

/* Styles for REPORT body - which is pretty much everything in a generated table */

.report_header {
  color: gold;
  font-size: 1.05em;
  font-weight: bold;
  font-style: italic;
}

.report_body div {
  padding: 1px 4px 4px 1px;
}

.report_body td {
  padding: 2px 2px 3px 1px;
  border: #000000 solid 2px;
}

#work_active .report_body tr:nth-child(even) {
  background-color: #080808;
}
#work_active .report_body tr.warranty_row {
  background-color: #7e2217;
}
#work_active .report_body tr.no_found_us_how {
  background-color: #151b54;
}

.report_body form {
  padding-left: auto;
  padding-right: auto;
}

.TXT_button_form {
  display: inline;
}

.TXT_button {
  margin: 0px 0px 1px 2px;

  font-size: 0.9em;
}

.TXT_button_sent {
  border: 1px solid grey;
  background-color: grey;
  font-size: 0.9em;
  color: black;
  margin: 0px 0px 1px 2px;
}

/* Styles for Mechanic Specific page sections */

.mechanic_work {
  padding: 5px 2px 5px 7px;
  margin: 6px 0px 8px 0px;
  border: #607b8b groove 2px;
  background-color: #180507;
  border-radius: 5px;
}

.mechanic_work p {
  margin: 5px 5px 5px 7px;
  padding: 5px 5px 0px 7px;
  width: 400px;
  font-size: 1.2em;
}

.mechanic_work td {
  padding: 1px 2px 1px 7px;
  border: #180507 solid 2px;
  text-align: left;
}

td.start_cont_button {
  text-align: center;
}

/* Mechanic Active Job Panel - Option D3: Compact Sidebar with Collapsible History */
.mechanic_work_active {
  background: linear-gradient(135deg, #1e2a1e 0%, #1a1a1a 100%);
  border: 1px solid #3a5a3a;
  border-radius: 4px;
  padding: 0;
  margin: 8px 0;
  overflow: hidden;
  font-size: 10pt;
  line-height: 1.4;
}

.mechanic_work_active.warranty {
  background: linear-gradient(135deg, #2a1a1a 0%, #1a1a1a 100%);
  border-color: #5a3a3a;
}

/* Header */
.mwa-header {
  background: linear-gradient(to right, #2a4a2a, #1a2a1a);
  padding: 4px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3a5a3a;
}

.mechanic_work_active.warranty .mwa-header {
  background: linear-gradient(to right, #3a2020, #2a1515);
  border-bottom-color: #5a3a3a;
}

.mwa-header h2 {
  margin: 0;
  padding: 0;
  font-size: 11pt;
  font-weight: normal;
  color: #8c8;
}

.mechanic_work_active.warranty .mwa-header h2 {
  color: #c88;
}

.mwa-header h2 span {
  color: #fff;
  font-weight: bold;
}

.mwa-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mwa-edit-btn {
  background: #3a6a3a;
  border: 1px solid #4a8a4a;
  color: #fff;
  padding: 3px 12px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 9pt;
}

.mwa-edit-btn:hover {
  background: #4a8a4a;
}

.mechanic_work_active.warranty .mwa-edit-btn {
  background: #6a3a3a;
  border-color: #8a4a4a;
}

.mechanic_work_active.warranty .mwa-edit-btn:hover {
  background: #8a4a4a;
}

/* Quote trigger + status badge */
.mwa-quote-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #2a2a1a;
  border: 1px solid #c8a84e;
  border-radius: 3px;
  color: #c8a84e;
  cursor: pointer;
  font-size: 9pt;
  font-weight: bold;
  transition: all 0.15s;
}
.mwa-quote-trigger:hover { background: #3a3a2a; color: #e8c86e; }

.mwa-quote-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mwa-quote-status:empty { display: none; }
.mwa-quote-status.needs-quote { background: #3a1a1a; color: #e87777; border: 1px solid #5a2a2a; }
.mwa-quote-status.draft { background: #2a2a1a; color: #d9c36a; border: 1px solid #4a4a2a; }
.mwa-quote-status.sent { background: #1a2a3a; color: #6ab5d9; border: 1px solid #2a4a5a; }
.mwa-quote-status.approved { background: #1a3a1a; color: #6ad96a; border: 1px solid #2a5a2a; }

/* Work_edit quote trigger + status badge (mirrors MWA styles) */
.we-quote-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #2a2a1a;
  border: 1px solid #c8a84e;
  border-radius: 3px;
  color: #c8a84e;
  cursor: pointer;
  font-size: 9pt;
  font-weight: bold;
  transition: all 0.15s;
}
.we-quote-trigger:hover { background: #3a3a2a; color: #e8c86e; }

.we-quote-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.we-quote-status:empty { display: none; }
.we-quote-status.needs-quote { background: #3a1a1a; color: #e87777; border: 1px solid #5a2a2a; }
.we-quote-status.draft { background: #2a2a1a; color: #d9c36a; border: 1px solid #4a4a2a; }
.we-quote-status.sent { background: #1a2a3a; color: #6ab5d9; border: 1px solid #2a4a5a; }
.we-quote-status.approved { background: #1a3a1a; color: #6ad96a; border: 1px solid #2a5a2a; }

/* Quote slideout panel */
.quote-slideout {
  position: fixed;
  top: 0;
  right: -820px;
  width: 800px;
  height: 100vh;
  background: #0e0e0e;
  border-left: 2px solid #c8a84e;
  z-index: 900;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,0.5);
}
.quote-slideout.open { right: 0; }
.quote-slideout-header {
  padding: 10px 16px;
  background: #111;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.quote-slideout-header h3 { margin: 0; font-size: 13px; color: #c8a84e; }
.quote-slideout-close {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.quote-slideout-close:hover { color: #ddd; }
.quote-slideout-body {
  flex: 1;
  overflow-y: scroll;
  padding: 12px;
}
.quote-slideout-body > div {
  max-width: 100%;
}

.mwa-warranty-badge {
  background: #8a2a2a;
  color: #fcc;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 8pt;
  font-weight: bold;
  text-transform: uppercase;
  animation: mwa-pulse 2s infinite;
}

@keyframes mwa-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Body - two column layout */
.mwa-body {
  display: flex;
}

.mwa-content {
  flex: 1;
  min-width: 0;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}

.mwa-section {
  background: #252525;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 5px 8px;
  flex: 1;
  min-width: 180px;
}

.mwa-section-title {
  color: #f9a825;
  font-size: 8pt;
  text-transform: uppercase;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #333;
}

.mwa-section-title a {
  float: right;
  font-size: 8pt;
}
.mwa-section-title .custdetails_actions {
  float: right;
  line-height: 1;
}
.mwa-section-title .custdetails_actions a {
  float: none;
  font-size: 8pt;
}
.mwa-section-title::after {
  content: '';
  display: table;
  clear: both;
}

.mwa-section p {
  margin: 2px 0;
}

.mwa-customer {
  border-left: 2px solid #4a7a9a;
}

.mwa-notes {
  border-left: 2px solid #9a7a4a;
  flex-basis: 100%;
}

/* Option 3 hybrid comms summary */
.mwa-comms-v3 {
  flex-basis: 100%;
  min-width: 0;
  overflow: hidden;
}
.mwa-comms-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.comms-summary-loading,
.comms-summary-error {
  font-size: 11px;
  color: #888;
}
.opt3-pills {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.opt3-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: #555;
}
.opt3-pill.sms { background: #4a8a4a; }
.opt3-pill.email { background: #4a6a9a; }
.opt3-pill.call { background: #8a6a3a; }
.opt3-pill.voicemail { background: #6a4a8a; }
.opt3-pill.none { background: #444; font-weight: normal; }

.opt3-latest {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opt3-latest-dir {
  font-size: 10px;
}
.opt3-latest-date {
  color: #777;
  font-size: 10px;
  margin-left: 4px;
}

.opt3-expand {
  padding: 2px 8px;
  font-size: 11px;
  background: #333;
  color: #ccc;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.opt3-expand:hover {
  background: #444;
  color: #fff;
}
.opt3-view-all {
  padding: 2px 8px;
  font-size: 11px;
  background: #4a90d9;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.opt3-view-all:hover {
  background: #357abd;
}

.mwa-comms-v3 .comms-panel-row {
  margin-top: 6px;
}
.mwa-comms-v3 .inline-comms-panel {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
}

/* Inline customer edit inside mechanic active panel */
.mwa-cust-edit-inline {
  flex-basis: 100%;
  border: 1px solid #f9a825;
  border-left: 3px solid #f9a825;
  background: #1a1a1a;
  box-shadow: 0 0 12px rgba(249, 168, 37, 0.15), inset 0 0 30px rgba(249, 168, 37, 0.03);
}
.mwa-cust-edit-inline .work_section {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.mwa-cust-edit-inline .form-section-title {
  color: #f9a825;
  font-size: 9pt;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #333;
}
.mwa-cust-edit-inline .form_row .field_group label {
  min-width: 55px;
  text-align: left;
  font-size: 9pt;
}
.mwa-cust-edit-inline form.cust_form input[type="text"],
.mwa-cust-edit-inline form.cust_form textarea {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
.mwa-cust-edit-inline form.cust_form textarea {
  resize: vertical;
  min-height: 36px;
}
.mwa-cust-edit-inline .form_row_notes_submit {
  align-items: flex-end;
  gap: 8px;
}
.mwa-cust-edit-inline .form_row_notes_submit .field_group {
  flex: 1;
}
.mwa-cust-edit-inline #edit_cust_submit {
  padding: 6px 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.mwa-cust-edit-inline .ajax_colorbox {
  display: none;
}

span.work_active_label {
  color: #f9a825;
  font-weight: bold;
}

/* Right sidebar for timer */
.mwa-sidebar {
  width: 230px;
  background: #202520;
  border-left: 1px solid #3a5a3a;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Draggable resize handle on left edge (reusable) */
.sidebar-resize {
  position: absolute;
  top: 0;
  left: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
}
.sidebar-resize:hover,
.sidebar-resize.dragging {
  background: rgba(140, 200, 140, 0.3);
}

.mechanic_work_active.warranty .mwa-sidebar {
  background: #252020;
  border-left-color: #5a3a3a;
}

.mwa-sidebar-header {
  background: #1a2a1a;
  padding: 4px 8px;
  border-bottom: 1px solid #3a5a3a;
}

.mechanic_work_active.warranty .mwa-sidebar-header {
  background: #2a1515;
  border-bottom-color: #5a3a3a;
}

.mwa-sidebar-header .mwa-section-title {
  margin: 0;
  padding: 0;
  border: none;
  color: #8c8;
}

.mechanic_work_active.warranty .mwa-sidebar-header .mwa-section-title {
  color: #c88;
}

/* Timer content */
.mwa-timer-content {
  flex: none;
  padding: 6px 8px;
  font-size: 9pt;
  line-height: 1.5;
}

.mwa-timer-content p {
  margin: 2px 0;
}

/* Collapsible history */
.mwa-history-toggle {
  display: block;
  width: 100%;
  padding: 4px 8px;
  margin: 5px 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 2px;
  color: #888;
  font-size: 8pt;
  cursor: pointer;
  text-align: left;
}

.mwa-history-toggle:hover {
  background: #222;
  color: #aaa;
}

.mwa-history-toggle::before {
  content: "\25B6  ";
  font-size: 7pt;
}

.mwa-history-toggle.expanded::before {
  content: "\25BC  ";
}

.mwa-history-entries {
  display: none;
  padding: 5px 8px;
  margin-bottom: 5px;
  background: #1a1a1a;
  border-radius: 2px;
  font-size: 8pt;
  color: #777;
  line-height: 1.4;
}

.mwa-history-entries.show {
  display: block;
}

.mwa-history-entries p {
  margin: 1px 0;
}

/* Sidebar footer with button */
.mwa-sidebar-footer {
  padding: 6px 8px;
  border-top: 1px solid #3a5a3a;
  background: #1a2a1a;
}

.mechanic_work_active.warranty .mwa-sidebar-footer {
  background: #2a1515;
  border-top-color: #5a3a3a;
}

/* Timer totals (loaded via AJAX into timer-content) */
.mwa-timer-totals {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid #3a5a3a;
}

.mechanic_work_active.warranty .mwa-timer-totals {
  border-top-color: #5a3a3a;
}

.mwa-timer-totals p {
  margin: 2px 0;
  font-size: 9pt;
}

#pause_resume_toggle {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(to bottom, #c9a030, #a98020);
  border: 1px solid #d9b040;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#pause_resume_toggle:hover {
  background: linear-gradient(to bottom, #d9b040, #c9a030);
}

#pause_resume_toggle.resume {
  background: linear-gradient(to bottom, #4a8a4a, #3a6a3a);
  border-color: #5a9a5a;
}

#pause_resume_toggle.resume:hover {
  background: linear-gradient(to bottom, #5a9a5a, #4a8a4a);
}

/* No active job state */
#mechanic_no_work_active {
  padding: 10px;
}

#mechanic_no_work_active h2 {
  color: #888;
  font-size: 10pt;
}

/* Styles for Mechanic Warranty (and other) Report */

#report_mech h1 {
  padding: 3px 15px 5px 15px;
  margin: 0px 0px 8px 2px;
  font-size: 13pt;
  font-weight: bold;
  color: #da842b;
  border: #607b8b groove 1px;
  width: 300px;
}

.stats_line {
  padding: 2px 2px 2px 20px;
  margin: 12px 2px 3px 0px;
  font-size: 1.2em;
  background-color: #3b3b3b;
  width: 90%;
}

.report_mechanic_warranty {
  padding: 8px 2px 2px 0px;
}

.report_mechanic_warranty td {
  padding: 1px 4px 1px 1px;
  border: #000000 solid 2px;
}

.stripe {
  background-color: #242424;
  border: solid 3px #242424;
}

.stripe_2nd {
  border: solid 3px #000000;
}

.report_mechanic_warranty td.report_header {
  padding: 1px 6px 8px 1px;
  border: #000000 solid 1px;
}

.warrantyjob_custdetails {
  font-size: 1.1em;
  line-height: 1.5em;
  padding: 1px 8px;
  margin: 3px 4px;
  width: 800px;
  float: left;
}

.warrantyjob_custnotes {
  font-size: 1.1em;
  line-height: 1.5em;
  padding: 1px 8px;
  margin: 3px 4px;
  width: 800px;
  float: left;
}

.warrantyjob_notes {
  font-size: 1.1em;
  line-height: 1.5em;
  padding: 4px 8px;
  margin: 4px 4px;
  clear: both;
}

.warrantyjob_OriginalWorkNotes {
  font-size: 1.1em;
  line-height: 1.5em;
  padding: 4px 8px 4px 8px;
  margin: 10px 20px 4px 20px;
  background-color: #111111;
  border: #607b8b groove 1px;
  clear: both;
}

/* Styles for Referalls */

.ref_history {
  padding: 2px 2px 2px 2px;
  margin: 0px 200px 0px 108px;
  border: #607b8b groove 1px;
}

/* Styles for Error page? */

.page_body {
  font-size: 10pt;
}

.left_tracks {
  background: url("images/left_tracksb.jpg") repeat-y;
}
.right_tracks {
  background: url("images/left_tracksb.jpg") repeat-y;
}
.top_tracks {
  background: url("images/top_tracksc.jpg") repeat-x;
}
.bot_tracks {
  background: url("images/bot_tracksb.jpg") repeat-x;
}

/* Styles for mechanic reports */

.mechanic_activity_totals {
  border-top: #607b8b solid 2px;
}

/* Styles for Parts Top Bar */

#parts_lhs_top {
  padding: 5px 5px 8px 5px;
  border-bottom: 1px solid #333;
  margin-bottom: 5px;
}
#parts_lhs_top h2 {
  font-size: 13pt;
  font-weight: bold;
  color: #da842b;
  display: inline-block;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
#parts_lhs_top form {
  display: inline-block;
  padding: 0;
  margin: 0 0 0 5px;
  border: none;
}
#toggle_master_edit_links_holder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}
#edit_links_all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 0;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 3px;
  font-size: 12px;
}

#toggle_master_edit_links_holder #not_displayed,
#edit_links_all {
  display: none;
}

/* Edit links styling */
#edit_links_all a {
  color: #f59412;
  text-decoration: none;
}
#edit_links_all a:hover {
  color: #ffdd44;
  text-decoration: underline;
}
.link_sep {
  color: #444;
  margin: 0 2px;
}
.link_group {
  color: #888;
}
.link_group a {
  margin: 0 3px;
}

/* Styles for Parts */

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#parts_main_body {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

#parts_lhs_holder {
  flex-shrink: 0;
  width: 210px;
  border-right: 1px solid #2a2a2a;
  padding-right: 10px;
}

#parts_main_bottom {
  clear: both;
}

#level1_cats {
  width: 100%;
  background-color: #110f0f;
  margin: 4px 0 10px 0;
  padding: 1px 1px 2px 1px;
}

.level1_cat {
  background-color: #0e0203;
  font-size: 1.1em;

  margin: 3px 3px 1px 3px;
  padding: 2px 3px 2px 5px;
}

.level1_cat_name {
  display: inline-block;
  margin: 0px 0px 0px 0px;
  padding: 2px 10px 2px 6px;
}

.level1_cat_name:hover {
  background-color: #962b19;
  color: #ffdd44;
  cursor: pointer;
}

.inline_block {
  display: inline-block;
}

.level1_cat_name.expanded {
  background-color: #7e2217;
  color: #ffdd44;
}

.level2_cats {
  padding: 1px 2px 1px 2px;
  font-size: 0.8em;
  width: 180px;
  text-align: left;
  display: none;
}

.edit_cat_level2,
.add_cat_level2,
.del_cat_level2,
.edit_part_level3_link,
.clone_part_level3_link {
  display: none;
}

.level2_cat {
  background-color: #110f0f;
  margin: 2px 3px 1px 3px;
  padding: 2px 2px 2px 6px;
}

.level2_cat_name {
  display: inline-block;
  margin: 0px 0px 0px 0px;
  padding: 1px 10px 1px 8px;
}

.level2_cat_name:hover {
  background-color: #962b19;
  color: #ffdd44;
  cursor: pointer;
}

#level3_holder {
  flex: 1;
  min-width: 0;
  padding: 0 1px 2px 1px;
}

A.low_stock_warning_inactive,
A.no_stock_warning_inactive,
A.stock_ordered_inactive,
A.stock_backorder_inactive,
A.Part_misc_ordered_inactive {
  opacity: 0.1;
}

/* Focus styles for keyboard navigation - visible but subtle */
#level3_holder :focus,
#parts_top_bar :focus,
.level1_cat_name:focus,
.level2_cat_name:focus {
  outline: 2px solid #ffdd44;
  outline-offset: 1px;
}

/* Match focus to hover for category names */
.level1_cat_name:focus,
.level2_cat_name:focus {
  background-color: #962b19;
  color: #ffdd44;
}

.contract_level3_data {
  display: none;
}

.level3_expanded_holder {
  background-color: #0f0e0e;
  border: #505050 solid 1px;
  border-top: none;
  margin: 3px 3px 3px 3px;
  padding: 5px 5px 5px 5px;
}
.level3_expanded_holder h3 {
  font-weight: bold;
  color: #b1e55a;
}

.level3_expanded_holder p {
  padding: 4px;
}

.level3_expanded_holder span {
  color: #ffff66;
}

/* Styles for Parts Master admin and level3_holder */
#master_admin_holder {
  margin: 3px 0px 3px 0px;
}

#master_admin_holder th,
#level3_holder table:not(.parts_table) th {
  padding: 3px 3px 3px 3px;
  font-weight: bold;
  color: gold;
}
#master_admin_holder td,
#level3_holder table:not(.parts_table) td {
  padding: 3px 3px 3px 3px;
  border: none;
  border-right: orange groove 1px;
  height: 26px;
}

.parts_master_stripe {
  background-color: #0f0e0e;
}

#master_admin_edit_part_form_holder {
  padding: 3px 3px 5px 8px;
  margin: 3px 3px 3px 3px;
  border: orange groove 2px;
}

#edit_part_form_holder {
  background-color: #110f0f;
  padding: 3px 3px 5px 8px;
  margin: 3px 3px 3px 3px;
  border: orange groove 1px;
}

#master_admin_edit_part_form_holder h2,
#level3_holder h2 {
  padding: 0px 3px 3px 3px;
  margin: 3px 3px 5px 0px;
  color: #f59412;
}

.inline_h2 {
  display: inline-block;
}

#edit_part_form input,
#edit_part_form select {
  padding: 3px 3px 3px 3px;
}

.level3_subdiv /*calls style for all level3 subdivs*/ {
  margin: 2px 0px 16px 0px;
}

/* Parts table styling - consistent dark theme */
.parts_table {
  border-collapse: collapse;
  width: 100%;
}
.parts_table thead th {
  background-color: transparent;
  color: #888;
  padding: 6px 8px;
  text-align: left;
  font-weight: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #444;
}
.parts_table td {
  padding: 6px 8px;
  color: #ccc;
  border-bottom: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;
  font-size: 12px;
  height: auto;
}
.parts_table td:first-child {
  border-left: 1px solid #2a2a2a;
}
.parts_table tbody tr:hover {
  background-color: #1a1a1a;
}

/* Filter bar styling */
.filter_bar {
  background-color: #1a1a1a;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter_bar label {
  color: #888;
  font-size: 11px;
  text-transform: uppercase;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* Search results styling */
.search_results_bar {
  background-color: #1a1a1a;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
  color: #888;
}
.search_highlight {
  color: #e85050;
  font-weight: bold;
}

/* Form styling for #level3_holder */
#level3_holder select,
#level3_holder input[type="text"],
.add_part_form select,
.add_part_form input[type="text"],
.edit_part_form select,
.edit_part_form input[type="text"] {
  background-color: #252525;
  border: 1px solid #444;
  color: #ddd;
  padding: 4px 6px;
  font-size: 12px;
}
#level3_holder select:focus,
#level3_holder input[type="text"]:focus,
.add_part_form select:focus,
.add_part_form input[type="text"]:focus,
.edit_part_form select:focus,
.edit_part_form input[type="text"]:focus {
  border-color: #666;
  outline: none;
}

/* Form validation error states */
.validation_error {
  border-color: #c44 !important;
  background-color: #3a1a1a !important;
}
.validation_error_message {
  background-color: #3a1a1a;
  border: 1px solid #c44;
  color: #f88;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
}
.validation_error_message ul {
  margin: 5px 0 0 0;
  padding-left: 20px;
  list-style: disc;
}
.validation_error_message li {
  margin: 2px 0;
}

/* Form row layout */
.form_row {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
}
.form_row .field_group {
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
}
.form_row label,
.add_part_form .field_group label,
.edit_part_form .field_group label {
  color: #999;
  font-size: 11px;
  padding-right: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  float: none;
  width: auto;
  margin: 0;
}

/* Customer form styling */
form.cust_form .form_row {
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
}
form.cust_form .form_row .field_group {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}
form.cust_form .form_row .field_group label {
  color: #e6c200;
  font-size: 10pt;
  min-width: 80px;
  text-align: right;
  padding-right: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
form.cust_form input[type="text"],
form.cust_form textarea {
  background-color: #252525;
  border: 1px solid #444;
  color: #fff;
  padding: 2px 4px;
  margin: 1px 0;
  font-size: 10pt;
}

/* Override for form inside table cells (inline edit) */
td form.cust_form .form_row,
.report_body form.cust_form .form_row {
  margin-bottom: 4px;
  padding: 0;
}

/* Inline edit form in work list - visual connection and button positioning */
.report_body .work_section {
  border-left: 3px solid #f9a825;
  margin-left: 10px;
  padding-left: 12px;
  background: linear-gradient(to right, rgba(249, 168, 37, 0.08) 0%, transparent 100px);
}
.report_body form.cust_form .form_row_notes_submit {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.report_body form.cust_form .form_row_notes_submit .field_group {
  flex: 0 0 auto;
}
.report_body form.cust_form .cust-edit-buttons .worksubmit {
  padding: 10px 25px;
  margin-bottom: 2px;
}
td form.cust_form input[type="text"],
td form.cust_form textarea,
.custdetails_edit_inline form.cust_form input[type="text"],
.custdetails_edit_inline form.cust_form textarea {
  padding: 2px 4px;
  margin: 1px 0;
}
/* Override #Edit_Work input padding for nested cust_form in warranty fieldset */
#Edit_Work .custdetails_edit_inline form.cust_form input[type="text"],
#Edit_Work .custdetails_edit_inline form.cust_form textarea {
  padding: 2px 4px;
  margin: 1px 0;
}
form.cust_form input[type="text"]:focus,
form.cust_form textarea:focus {
  border-color: #e6c200;
  outline: none;
}
form.cust_form textarea {
  vertical-align: top;
}
form.cust_form input.validation-error,
form.cust_form textarea.validation-error {
  border-color: #cc3333;
  background-color: #3a2020;
}
form.cust_form .field_group.validation-error label {
  color: #cc3333;
}

/* Add Customer Form - Version B compact style */
.form-card-add-cust {
  background: #1a1a1a;
  border-radius: 6px;
  border: 1px solid #333;
  border-left: 3px solid #e6c200;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.form-card-add-cust .form-header {
  color: #e6c200;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}
.form-card-add-cust .form-row {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.form-card-add-cust .form-row:last-child {
  margin-bottom: 0;
}
.form-card-add-cust .field-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.form-card-add-cust .field-group label {
  color: #f59412;
  font-size: 10px;
  font-weight: bold;
  margin-right: 6px;
  flex-shrink: 0;
}
.form-card-add-cust .field-group input[type="text"] {
  background-color: #080808;
  border: 1px solid #607b8b;
  color: #c6aead;
  font-size: 11px;
  padding: 4px 6px;
}
.form-card-add-cust .field-group input[type="text"]:focus {
  border-color: #f59412;
  outline: none;
}
.form-card-add-cust .field-group input[name="CustName"] { width: 160px; }
.form-card-add-cust .field-group input[name="Phone"] { width: 100px; }
.form-card-add-cust .field-group input[name="Phone2"] { width: 100px; }
.form-card-add-cust .field-group input[name="EMailAddress"] { width: 160px; }
.form-card-add-cust .field-group input[name="Address"] { width: 220px; }
.form-card-add-cust .field-group input[name="PostCode"] { width: 70px; }
.form-card-add-cust .field-group.notes {
  flex: 1;
}
.form-card-add-cust .field-group.notes textarea {
  flex: 1;
  height: 24px;
  min-height: 24px;
  resize: vertical;
  background-color: #080808;
  border: 1px solid #607b8b;
  color: #c6aead;
  font-size: 11px;
  padding: 4px 6px;
}
.form-card-add-cust .field-group.notes textarea:focus {
  border-color: #f59412;
  outline: none;
}
.form-card-add-cust .worksubmit {
  padding: 6px 18px;
}

/* Add/Edit part form containers */
#level3_add_part,
#add_part_cat_known_holder {
  display: none;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #333;
  background-color: #1a1a1a;
}

/*Parts Search styles where needed*/
.parts_search_cat_title {
  padding: 1px 2px 1px 2px;
  margin: 0px 2px 0px 2px;
  color: #f59412;
}

#parts_misc_item_add_form {
  background-color: #110f0f;
  padding: 3px 3px 5px 8px;
  margin: 10px 200px 10px 30px;
  border: #3f1414 groove 1px;
}

/*invisble div at bottom of parts page to hold data from ajax load calls - is there a better way to do this? - also now used on work.asp*/
#invisible_div {
  display: none;
}

/* animated gif to show something is loading - hidden by default */
.loading {
  background: url(images/ajax-loader.gif) no-repeat 1px;
  height: 16px;
  width: 20px;
  display: none;
}

/* Styles for Perf2012 */

#Perf_Staff_table td {
  padding: 4px 2px 4px 2px;
  font-size: 11px;
  border: grey groove 1px;
}

#Perf_Staff_table th,
#Perf_Staff_table tfoot td {
  color: #da842b;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 2px 4px 2px;
  border: grey groove 1px;
}

.perf2012_difs {
  color: #ea6c48;
}

.period_split {
  background-color: #76230e;
  color: black;
}

/*Dec 2016*/
.ui-tooltip {
  white-space: pre-line;
}
/*Styling for tool tips*/
/*pma - parts marked activity*/
.pma_row:nth-of-type(even),
.stv_row:nth-of-type(even) {
  background-color: rgba(128, 128, 128, 0.32);
}

.pma_row span,
.stv_row span {
  display: inline-block;
  padding: 3px 2px 3px 4px;
}
.pma_row span:nth-of-type(1) {
  width: 60px;
}
.pma_row span:nth-of-type(2) {
  width: 74px;
}
.pma_row span:nth-of-type(3) {
  width: 130px;
}

.stv_row span:nth-of-type(1) {
  width: 74px;
}
.stv_row span:nth-of-type(2) {
  width: 130px;
}

A.no-tooltip {
  opacity: 0.3;
}

.ui-dialog-content {
  font-size: 120% !important;
}

/* Invoice error dialog */
.invoice-error-dialog .ui-dialog-titlebar {
  background: #8b2020;
  border: none;
  border-radius: 4px 4px 0 0;
  padding: 8px 12px;
}
.invoice-error-dialog .ui-dialog-title {
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}
.invoice-error-dialog .ui-dialog-titlebar-close {
  display: none;
}
.invoice-error-dialog.ui-dialog {
  border: 1px solid #8b2020;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.invoice-error-dialog .ui-dialog-content {
  background: #1a1a1a;
  color: #e0c0c0;
  padding: 20px 16px;
  font-size: 13px !important;
  line-height: 1.6;
}
.invoice-error-dialog .ui-dialog-buttonpane {
  background: #1a1a1a;
  border-top: 1px solid #333;
  padding: 8px 12px;
}
.invoice-error-dialog .ui-dialog-buttonpane .ui-button {
  background: #8b2020;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 20px;
  cursor: pointer;
}
.invoice-error-dialog .ui-dialog-buttonpane .ui-button:hover {
  background: #a52a2a;
}

.service_tracker_views {
}

/* ========== MECHANIC FEEDBACK STYLES ========== */

/* Feedback link in top bar */
.workbar_right_inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#feedback_link {
  font-size: 9pt;
  color: #666 !important;
  opacity: 0.8;
  margin-top: 2px;
}
#feedback_link:hover {
  color: #ff9a31 !important;
  opacity: 1;
}

/* Feedback form (ColorBox content) */
#feedback_form_holder {
  padding: 12px 15px;
  background: #1a1a1a;
  color: #ccc;
}
#feedback_form_holder h2 {
  color: #e6c200;
  font-size: 12pt;
  margin: 0 0 10px 0;
  padding: 0;
}
.feedback_field {
  margin-bottom: 10px;
}
.feedback_field label {
  display: block;
  color: #e6c200;
  font-size: 10pt;
  margin-bottom: 4px;
  float: none;
  width: auto;
}
.feedback_field select,
.feedback_field textarea {
  width: 100%;
  padding: 6px 8px;
  background: #333;
  border: 1px solid #555;
  color: #fff;
  font-size: 10pt;
  box-sizing: border-box;
}
.feedback_field select:focus,
.feedback_field textarea:focus {
  border-color: #e6c200;
  outline: none;
}
.feedback_field textarea {
  resize: vertical;
  min-height: 80px;
}
.feedback_actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.feedback_submit_btn {
  padding: 8px 20px;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(to bottom, #4a7c10, #3a6208);
  border: 1px solid #5a9c12;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
}
.feedback_submit_btn:hover {
  background: linear-gradient(to bottom, #5a9c12, #4a7c10);
}
.feedback_submit_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.feedback_cancel_btn {
  padding: 8px 20px;
  font-size: 10pt;
  background: #444;
  border: 1px solid #555;
  border-radius: 3px;
  color: #ccc;
  cursor: pointer;
}
.feedback_cancel_btn:hover {
  background: #555;
}
.feedback_success {
  background: #1a3a1a;
  border: 1px solid #2a5a2a;
  color: #5a5;
  padding: 12px 15px;
  border-radius: 3px;
}
.feedback_error {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  color: #f88;
  padding: 12px 15px;
  border-radius: 3px;
}

/* Feedback admin view */
.feedback_filters {
  background: #1a1a1a;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 3px;
}
.feedback_filter_form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.feedback_filter_form label {
  color: #888;
  font-size: 10pt;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
.feedback_filter_form select {
  padding: 4px 8px;
  background: #333;
  border: 1px solid #555;
  color: #fff;
  font-size: 10pt;
}
.feedback_filter_btn {
  padding: 5px 15px;
  background: #444;
  border: 1px solid #555;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-size: 10pt;
}
.feedback_filter_btn:hover {
  background: #555;
}
.feedback_clear_filter {
  color: #888 !important;
  font-size: 10pt;
}

.feedback_table {
  width: 100%;
  border-collapse: collapse;
  background: #1a1a1a;
}
.feedback_table th {
  background: #252525;
  color: #e6c200;
  padding: 10px 8px;
  text-align: left;
  font-weight: bold;
  border-bottom: 1px solid #444;
}
.feedback_table td {
  padding: 10px 8px;
  border-bottom: 1px solid #333;
  color: #ccc;
  vertical-align: top;
}
.feedback_table tbody tr:hover {
  background: #222;
}
.feedback_row_new {
  background: #1a2a1a;
}
.feedback_row_resolved {
  opacity: 0.6;
}
.feedback_time {
  color: #666;
  font-size: 9pt;
}
.feedback_text_cell {
  max-width: 400px;
  white-space: pre-wrap;
  word-break: break-word;
}
.feedback_type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9pt;
}
.feedback_type_bug_report {
  background: #5a2a2a;
  color: #f88;
}
.feedback_type_feature_request {
  background: #2a3a5a;
  color: #8af;
}
.feedback_type_work_suggestion {
  background: #3a3a2a;
  color: #cc8;
}
.feedback_type_other {
  background: #3a3a3a;
  color: #aaa;
}
.feedback_status_select {
  padding: 4px 6px;
  background: #333;
  border: 1px solid #555;
  color: #fff;
  font-size: 9pt;
}
.feedback_status_result {
  font-size: 9pt;
  margin-left: 5px;
}
.feedback_no_results {
  text-align: center;
  color: #666;
  padding: 30px !important;
}

/* Feedback view in ColorBox (compact version) */
#feedback_view_holder {
  padding: 12px 15px;
  background: #1a1a1a;
  color: #ccc;
}
.feedback_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
}
.feedback_header h2 {
  color: #e6c200;
  font-size: 13pt;
  margin: 0;
  padding: 0;
}
.feedback_back_btn {
  font-size: 10pt;
  color: #888 !important;
  padding: 4px 10px;
  background: #333;
  border-radius: 3px;
  text-decoration: none !important;
}
.feedback_back_btn:hover {
  background: #444;
  color: #ccc !important;
}
.feedback_filters_compact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 10pt;
}
.feedback_filters_compact label {
  color: #888;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
.feedback_filters_compact select {
  padding: 3px 6px;
  background: #333;
  border: 1px solid #555;
  color: #fff;
  font-size: 9pt;
}
.feedback_table_wrap {
  max-height: 400px;
  overflow-y: auto;
}
.feedback_table_compact {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
}
.feedback_table_compact th {
  background: #252525;
  color: #e6c200;
  padding: 6px 5px;
  text-align: left;
  font-weight: bold;
  font-size: 9pt;
  border-bottom: 1px solid #444;
  position: sticky;
  top: 0;
}
.feedback_table_compact td {
  padding: 5px;
  border-bottom: 1px solid #333;
  color: #ccc;
  vertical-align: top;
}
.feedback_table_compact tbody tr:hover {
  background: #222;
}
.feedback_date_cell {
  white-space: nowrap;
  font-size: 9pt;
  color: #888;
}
.feedback_text_cell_sm {
  max-width: 300px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 9pt;
}
.feedback_type_sm {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 8pt;
}
.feedback_status_select_sm {
  padding: 2px 4px;
  background: #333;
  border: 1px solid #555;
  color: #fff;
  font-size: 8pt;
}

/* ============================================
   INVOICE FORM STYLES (moved from Invoice_form.asp)
   ============================================ */

/* Invoice Modal */
.modal th,
.modal td {
  padding: 4px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 16px;
  color: black;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
}

.modal-content a {
  color: #6d3a06;
  font-weight: bold;
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.modal .close {
  color: #fff;
  float: right;
  font-size: 24px;
  font-weight: bold;
}

.modal .close:hover,
.modal .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Invoice Links */
.load_invoice_links {
  display: inline-flex;
  gap: 8px;
}

.load_invoice_links a {
  display: inline-block;
  padding: 5px 12px;
  font-size: 9pt;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.load_invoice_links a.invoice_view_toggle {
  background: #2a5a8a;
  border: 1px solid #3a7aba;
  color: #fff;
}

.load_invoice_links a.invoice_view_toggle:hover {
  background: #3a7aba;
}

.load_invoice_links a.invoice_view_toggle.invoice_visible {
  background: #6a4a2a;
  border-color: #8a6a3a;
}

.load_invoice_links a.invoice_print {
  background: #4a4a4a;
  border: 1px solid #666;
  color: #ddd;
}

.load_invoice_links a.invoice_print:hover {
  background: #5a5a5a;
  color: #fff;
}

/* Invoice Form - hidden by default, shown via JS toggle */
/* Note: Initial hide is via inline style in Invoice_form.asp */

.invoice_form {
  width: 100%;
}

.invoice_form textarea {
  width: 100%;
  box-sizing: border-box;
}

.invoice_form_controls {
  padding: 6px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid #444;
}

.invoice_form_controls input {
  font-size: 10pt;
  padding: 4px 10px;
  cursor: pointer;
  background: #3a6a3a;
  border: 1px solid #4a8a4a;
  color: #fff;
  border-radius: 3px;
}

.invoice_form_controls input:hover {
  background: #4a8a4a;
}

/* Start/Continue job buttons - compact inline for table rows */
.mechanic_action_form {
  display: inline;
  margin: 0;
  padding: 0;
}

.gocont_button {
  padding: 1px 4px;
  font-size: 7pt;
  background: #3a5a1a;
  border: 1px solid #4a6a2a;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  margin-right: 3px;
  vertical-align: middle;
}

.gocont_button:hover {
  background: #5a9a3a;
  border-color: #6aaa4a;
}

.gocont_button.loading {
  background: #444;
  border-color: #555;
  color: #999;
  cursor: wait;
}

/* ========== WORK NOTES OPTION A STYLES ========== */

/* Container */
.work-notes-container {
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
}

.work-notes-container.warranty {
  border-color: #5a3a3a;
}

.work-notes-container.conclusions {
  border-color: #3a5a5a;
}

/* Header */
.work-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #333;
  border-bottom: 1px solid #444;
}

.work-notes-container.warranty .work-notes-header {
  background: #3a2a2a;
}

.work-notes-container.conclusions .work-notes-header {
  background: #2a3a3a;
}

.work-notes-title {
  color: #e6c200;
  font-weight: bold;
  font-size: 10pt;
}

.work-notes-container.warranty .work-notes-title {
  color: #c88;
}

.work-notes-container.conclusions .work-notes-title {
  color: #4a9;
}

.work-notes-count {
  color: #888;
  font-size: 9pt;
}

/* Add note section */
.work-notes-add {
  padding: 8px 10px;
  background: #2d2d2d;
  border-bottom: 1px solid #3a3a3a;
}

.work-notes-container.warranty .work-notes-add {
  background: #352a2a;
}

.work-notes-container.conclusions .work-notes-add {
  background: #2a3535;
}

.work-notes-add textarea {
  width: 100%;
  min-height: 50px;
  background: #252525;
  border: 1px solid #555;
  border-radius: 3px;
  color: #ddd;
  padding: 6px;
  font-family: inherit;
  font-size: 10pt;
  resize: vertical;
}

.work-notes-add textarea:focus {
  border-color: #e6c200;
  outline: none;
  box-shadow: 0 0 3px rgba(230, 194, 0, 0.3);
}

.work-notes-add-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.work-notes-add-info {
  color: #777;
  font-size: 9pt;
}

.work-notes-add-info strong {
  color: #e6c200;
}

.work-notes-container.warranty .work-notes-add-info strong {
  color: #c88;
}

.work-notes-container.conclusions .work-notes-add-info strong {
  color: #6b9;
}

.work-notes-add-btn {
  background: linear-gradient(to bottom, #4a7a2a, #3a6020);
  border: 1px solid #5a8a3a;
  color: #fff;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9pt;
}

.work-notes-add-btn:hover {
  background: linear-gradient(to bottom, #5a8a3a, #4a7a2a);
}

.work-notes-add-btn:disabled {
  background: #444;
  border-color: #555;
  color: #888;
  cursor: not-allowed;
}

.work-notes-container.warranty .work-notes-add-btn {
  background: linear-gradient(to bottom, #7a3a3a, #5a2a2a);
  border-color: #8a4a4a;
}

.work-notes-container.warranty .work-notes-add-btn:hover {
  background: linear-gradient(to bottom, #8a4a4a, #7a3a3a);
}

.work-notes-container.conclusions .work-notes-add-btn {
  background: linear-gradient(to bottom, #3a6a5a, #2a5a4a);
  border-color: #4a7a6a;
}

/* Notes list */
.work-notes-list {
  max-height: 300px;
  overflow-y: auto;
}

.work-notes-list:empty::after {
  content: "No notes yet";
  display: block;
  padding: 15px;
  color: #666;
  font-style: italic;
  text-align: center;
}

/* Individual note card */
.work-note-card {
  padding: 8px 10px;
  border-bottom: 1px solid #353535;
  transition: background 0.15s;
}

.work-note-card:last-child {
  border-bottom: none;
}

.work-note-card:hover {
  background: #303030;
}

.work-note-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.work-note-meta {
  font-size: 9pt;
}

.work-note-mechanic {
  color: #6af;
  font-weight: bold;
}

.work-note-date {
  color: #777;
  margin-left: 8px;
}

.work-note-edited {
  color: #a86;
  font-size: 8pt;
  font-style: italic;
  display: block;
  margin-top: 2px;
}

.work-note-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}

.work-note-card:hover .work-note-actions {
  opacity: 1;
}

.work-note-edit-btn,
.work-note-save-btn,
.work-note-cancel-btn {
  background: transparent;
  border: 1px solid #555;
  color: #888;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 8pt;
}

.work-note-edit-btn:hover {
  background: #404040;
  color: #aaa;
}

.work-note-save-btn {
  background: #3a5a2a;
  border-color: #4a7a3a;
  color: #cfc;
}

.work-note-save-btn:hover {
  background: #4a7a3a;
}

.work-note-cancel-btn:hover {
  background: #404040;
}

.work-note-content {
  color: #ccc;
  font-size: 10pt;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.work-note-content a {
  color: #6af;
}

.work-note-content a:hover {
  color: #8cf;
  text-decoration: underline;
}

/* Edit mode */
.work-note-card.editing {
  background: #353025;
}

.work-note-card.editing .work-note-content {
  display: none;
}

.work-note-card.editing .work-note-actions {
  opacity: 1;
}

.work-note-card:not(.editing) .work-note-save-btn,
.work-note-card:not(.editing) .work-note-cancel-btn {
  display: none;
}

.work-note-card.editing .work-note-edit-btn {
  display: none;
}

.work-note-edit-textarea {
  width: 100%;
  min-height: 60px;
  background: #252525;
  border: 1px solid #e6c200;
  border-radius: 3px;
  color: #ddd;
  padding: 6px;
  font-family: inherit;
  font-size: 10pt;
  display: none;
  margin-top: 4px;
  resize: vertical;
}

.work-note-card.editing .work-note-edit-textarea {
  display: block;
}

/* Legacy notes (old WorkNotes field) */
.work-notes-legacy {
  background: #252525;
  border-top: 1px solid #444;
  padding: 8px 10px;
}

.work-notes-legacy-title {
  color: #888;
  font-size: 8pt;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.work-notes-legacy-content {
  color: #999;
  font-size: 9pt;
  line-height: 1.4;
  white-space: pre-wrap;
  max-height: 150px;
  overflow-y: auto;
}

.work-notes-legacy-content.expanded {
  max-height: none;
  overflow-y: visible;
}

.work-notes-legacy-expand {
  background: none;
  border: 1px solid #444;
  border-radius: 3px;
  color: #777;
  font-size: 8px;
  cursor: pointer;
  padding: 1px 5px;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 8px;
  transition: color 0.15s, border-color 0.15s;
}

.work-notes-legacy-expand:hover {
  color: #bbb;
  border-color: #666;
}

.work-notes-legacy-expand.expanded {
  color: #aaa;
}

.work-notes-legacy-toggle {
  display: block;
  width: 100%;
  padding: 6px 10px;
  background: #252525;
  border: none;
  border-top: 1px solid #353535;
  color: #666;
  font-size: 8pt;
  cursor: pointer;
  text-align: center;
}

.work-notes-legacy-toggle:hover {
  background: #2a2a2a;
  color: #888;
}

.work-notes-legacy-toggle::before {
  content: "\25BC  ";
  font-size: 7pt;
}

.work-notes-legacy-toggle.collapsed::before {
  content: "\25B6  ";
}

/* TinyMCE 7: remove default focus highlight */
.tox.tox-edit-focus .tox-edit-area::before { opacity: 0 !important; }