/* Technician book */
div.form-list-tech-append {
  height: 100%;
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-content: flex-start;
  /* Outer container: no transform, just layout and scroll */
}

/* Scale wrapper: inner container that applies transform */
div.form-list-tech-append .scale-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: var(--px-16);
  /* padding: 0 var(--px-12); */
  align-content: flex-start;
  transform-origin: top left;
  flex-flow: row;
}

div.form-list-tech-append.list-tech-locked-out,
div.form-list-tech-append.list-tech-locked {
  display: flex;
  flex-flow: wrap;
  align-content: flex-start;
  align-items: flex-start;
  background: #f1f1f1;
}

div.form-list-tech-append .wrap-tech-detail {
  width: fit-content;
}

div.form-list-tech-append::-webkit-scrollbar {
  max-width: 8px;
  max-height: 8px;
}

div.form-list-tech-append div.tech-detail {
  /**/
  z-index: 2;
  display: grid;
  grid-template-rows: 7.7fr 2.3fr;
  overflow: hidden;
  user-select: none;
  position: relative;
  touch-action: none;
  /* sizes are controlled by zoom; use base values */
  width: 210px;
  height: 252px;
  flex-direction: column;
  border-radius: var(--px-8);
  box-shadow: var(--shadow-1);
  background: var(--bs-surface-bg);
  border: 1px solid var(--theme-mode-border);
}

div.form-list-tech-append div.tech-detail.dragEnter {
  z-index: 100;
}

div.form-list-tech-append div.tech-detail .option-more-action-btn {
  top: var(--px-4);
  right: -4px;
  padding: 0;
  z-index: 1112;
  display: flex;
  position: absolute;
  border-radius: 4px;
  align-items: center;
  width: var(--px-20);
  height: var(--px-16);
  justify-content: center;
  color: var(--theme-mode-text-dark);
  transform: rotate(90deg);
  background: none;
  border: none;
}
div.form-list-tech-append div.tech-detail .option-more-action-btn i {
  position: relative;
  line-height: 0px;
}

div.form-list-tech-append div.tech-detail .option-more2 {
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #e0e5ec;
  border-radius: 0px;
}
div.form-list-tech-append div.tech-detail .option-more2:active {
  transform: translateY(0);
  box-shadow:
    inset 6px 6px 12px #b8b9be,
    inset -6px -6px 12px #ffffff;
}

div.form-list-tech-append div.tech-detail .dropdown-menu button {
  border: 0;
  outline: 0;
  display: grid;
  align-items: center;
  height: var(--px-50);
  min-width: var(--px-200);
  max-width: var(--px-240);
  padding: var(--px-14);
  color: var(--theme-mode-text);
  grid-template-columns: var(--px-32) 1fr;
}

div.form-list-tech-append div.tech-detail .dropdown-menu button i {
  color: var(--bs-blue);
  font-size: var(--px-16);
}

div.form-list-tech-append div.tech-detail .dropdown-menu button p {
  text-align: start;
  font-size: var(--s-16);
}

div.form-list-tech-append div.tech-detail .background-rotate {
  display: flex;
  width: 6px;
  height: 100%;
  right: 0;
  top: 0px;
  position: absolute;
  overflow: hidden;
  z-index: 0;
  background: #fff;
}

div.form-list-tech-append div.tech-detail .techs-photo {
  height: 100%;
  flex: 2;
  gap: 4px;
  z-index: 1;
  padding: 2px;
  position: relative;
  border-bottom: 2px solid var(--theme-mode-border);
  background: linear-gradient(to right bottom, rgb(239, 246, 255), rgb(219, 234, 254));
}

div.form-list-tech-append div.tech-detail .techs-photo p {
  white-space: nowrap;
  text-transform: capitalize;
  color: var(--bs-surface-bg);
  font-size: var(--s-13);
}

div.form-list-tech-append div.tech-detail .techs-photo p i {
  margin-right: 3px;
  color: var(--text-black);
}

div.form-list-tech-append div.tech-detail .techs-photo .index-tech {
  display: flex;
  width: var(--px-28);
  align-items: center;
  height: var(--px-28);
  justify-content: center;
  border-radius: 100%;
  font-size: var(--s-14);
  border: 1px solid var(--theme-mode-border);
  background: var(--bs-surface-bg);
  position: absolute;
  right: 88px;
  top: 4px;
  line-height: 15px;
}

div.form-list-tech-append div.tech-detail .techs-info {
  flex: 3;
  gap: 4px;
  width: 100%;
  display: grid;
  position: relative;
  align-items: center;
  grid-template-columns: 1fr 2fr;
  padding: var(--px-16) var(--px-8) var(--px-8);
}

div.form-list-tech-append div.tech-detail .techs-info.normal {
  background: var(--bs-surface-bg) !important;
}

div.form-list-tech-append div.tech-detail .techs-info .icon-tech-text {
  color: var(--theme-mode-text);
  font-size: var(--s-12);
  text-transform: uppercase;
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--px-12) * -1);
  height: var(--px-28);
  /* border-radius: var(--px-12); */
  /* box-shadow: 0 0 2px var(--theme-mode-border); */
  /* background: var(--bs-surface-bg); */
  /* border: 1px solid var(--theme-mode-bs-100); */
  display: flex;
  align-items: center;
  justify-content: center;
}

div.form-list-tech-append div.tech-detail .techs-info .tech-time {
  display: grid;
  grid-gap: 2px var(--px-16);
  color: var(--theme-mode-text);
  grid-template-columns: 1fr 1fr;
  font: normal normal 700 var(--s-13);
  gap: 0px;
  position: relative;
}
div.form-list-tech-append div.tech-detail .techs-info .tech-time::after {
  position: absolute;
  top: 47%;
  left: 10%;
  content: "";
  width: 75%;
  height: 1px;
  background: var(--theme-mode-border);
}
div.form-list-tech-append div.tech-detail .techs-info .tech-time::before {
  position: absolute;
  top: 10%;
  left: 50%;
  content: "";
  height: 75%;
  width: 1px;
  background: var(--theme-mode-border);
}

div.form-list-tech-append div.tech-detail .techs-info .tech-time {
  grid-column: span 2;
  row-gap: 4px;
  column-gap: 16px;
  padding: 4px 0;
  border-bottom: 1.6px dashed var(--theme-mode-border);
}

div.form-list-tech-append div.tech-detail .techs-info .tech-time span {
  display: flex;
  gap: 4px;
  justify-content: space-between;
}
div.form-list-tech-append div.tech-detail .techs-info .tech-time span strong {
  color: var(--bs-gray-800);
  font: normal normal 400 var(--s-12);
}
div.form-list-tech-append div.tech-detail .techs-info .tech-time span p {
  position: relative;
  top: 1px;
}

div.form-list-tech-append div.tech-detail .tech-last-checkout {
  gap: 4px;
  width: 100%;
  display: flex;
  grid-column: span 2;
  align-items: self-end;
  justify-content: space-between;
  flex-direction: column;
}

div.form-list-tech-append div.tech-detail .tech-last-checkout .last-done-time {
  width: 100%;
  padding: 2px;
  display: flex;
  border-radius: 4px;
  align-items: center;
  min-width: max-content;
  color: var(--theme-mode-text);
  justify-content: space-between;
  font: normal normal 500 var(--s-12);
  border: 1px dashed var(--bs-main-300);
}

div.form-list-tech-append div.tech-detail .techs-info .tech-tix-amount {
  width: 100%;
  display: flex;
  grid-column: span 2;
  font: normal normal 700 var(--s-13);
  justify-content: space-between;
}

div.form-list-tech-append div.tech-detail .techs-info .tech-tix-amount i {
  font-size: var(--px-14);
  color: var(--bs-orange);
  font-weight: 300;
}

div.form-list-tech-append div.tech-detail .techs-info .tech-tix-amount .info-turn {
  display: grid;
  align-items: center;
  grid-template-columns: var(--px-20) 1fr;
}

div.form-list-tech-append div.tech-detail .techs-info .tech-tix-amount i.fa-circle-dollar {
  font-size: var(--px-12);
  color: var(--bs-green);
}

div.form-list-tech-append div.tech-detail .show-next-appt-btn {
  width: 100%;
  border: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
  height: var(--px-22);
  min-width: max-content;
  color: var(--theme-mode-text);
  justify-content: space-between;
  background: var(--theme-mode-border);
  font: normal normal 500 var(--s-13);
}

div.form-list-tech-append div.tech-detail .show-next-appt-btn:hover {
  background: var(--bs-main-hover);
  color: var(--bs-surface-bg);
}

div.form-list-tech-append div.tech-detail .show-next-appt-btn:hover i {
  color: var(--bs-surface-bg) !important;
}

div.form-list-tech-append div.tech-detail .techs-info .tech-tix-amount .serAmount {
  font: normal normal 700 var(--s-13);
}

div.form-list-tech-append div.tech-detail .techs-info .icon-tech-money {
  display: flex;
  flex-direction: row;
  font: normal normal 600 var(--s-13);
  width: 100%;
  justify-content: space-between;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

div.form-list-tech-append div.tech-detail .techs-info .icon-tech-money .fa-regular {
  color: #262626;
}

div.form-list-tech-append div.tech-detail .techs-info .icon-tech-money .serAmount {
  font: normal normal 700 var(--s-15);
}

div.form-list-tech-append div.tech-detail .techs-photo span.track-img-error-box,
div.form-list-tech-append div.tech-detail .techs-photo img {
  display: flex;
  grid-row: span 2;
  overflow: hidden;
  align-items: center;
  width: var(--px-124);
  height: var(--px-124);
  justify-content: center;
  text-transform: uppercase;
  border-radius: 100%;
  color: var(--theme-mode-text);
  font: normal normal 700 var(--s-22);
  background: var(--bs-surface-bg);
}
div.form-list-tech-append div.tech-detail .techs-photo .processing-freetime {
  position: relative;
  height: 24px;
}
div.form-list-tech-append div.tech-detail .techs-photo .processing-freetime .processing {
  display: none;
  font: normal normal 600 var(--s-13);
}
div.form-list-tech-append div.tech-detail .techs-photo .processing-freetime .freetime {
  width: 60%;
  height: 20px;
  position: absolute; /* absolute */
  top: 6px; /* top-0 */
  left: 50%; /* left-1/2 */
  transform: translateX(-50%); /* -translate-x-1/2 */
  z-index: 30; /* z-30 */
  transition-property: all; /* transition-all */
  transition-duration: 300ms; /* duration-300 */
}
div.form-list-tech-append div.tech-detail .techs-photo .processing-freetime .freetime .freetime-1 {
  position: absolute; /* absolute */
  inset: 0; /* inset-0 */
  border-radius: 10px;
  border-style: solid; /* border-b border-l border-r */
  border-width: 0 1px 1px 1px;
  border-color: rgba(255, 255, 255, 0.5); /* border-white/50 */

  background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));

  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    inset 0 -2px 4px rgba(0, 0, 0, 0.02);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
div.form-list-tech-append
  div.tech-detail
  .techs-photo
  .processing-freetime
  .freetime
  .freetime-1
  .freetime-2 {
  position: absolute; /* absolute */
  inset: 0; /* inset-0 => top/right/bottom/left: 0 */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  gap: 4px; /* gap-1 (4px) */
  color: #10b981;
}

.techs-photo .wrap-phototech-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding-top: 2px;
}
.techs-photo .wrap-phototech-index .container-phototech-index {
  position: relative;
}

div.form-list-tech-append div.tech-detail.hide-line-1 .tech-time {
  display: none;
}

div.form-list-tech-append div.tech-detail.hide-line-2 .tech-tix-amount {
  display: none;
}

#static-change-tech-modal .tech-detail .show-next-appt-btn {
  display: none;
}

/* ============================================
   COMPACT VIEW STYLES FOR NEW TECH CARD DESIGN
   Based on reference: smaller cards, smaller avatar,
   show only % at top, hide progress bar, show ticket #
   ============================================ */

div.form-list-tech-append {
  transition: all 0.3s ease-in-out;
}

.btn-compact-toggle i {
  font: normal normal 700 var(--s-15);
}

/* Compact View - Smaller Card */
div.form-list-tech-append.compact-view div.tech-detail {
  width: 130px;
  height: auto;
  min-height: 180px;
  padding: 8px;
  padding-top: 24px;
  transition: all 0.3s ease-in-out;
}

/* management tech */
div.form-list-tech-append.management-tech div.tech-detail {
  width: 100px;
  height: auto;
  padding: 4px;
}

#static-clockinout-tech-modal div.form-list-tech-append.management-tech div.tech-detail {
  height: 168px !important;
  min-height: 168px;
}

/* Compact View - Adjust card content */
div.form-list-tech-append.compact-view .tech-card-content {
  padding-top: 0;
  gap: 8px;
}

/* Compact View - Smaller Avatar */
div.form-list-tech-append.compact-view .tech-avatar-wrapper {
  width: 104px;
  height: 104px;
}

div.form-list-tech-append.management-tech .tech-avatar-wrapper {
  width: 70px;
  height: 70px;
  box-shadow:
    rgb(0 0 0 / 7%) 0px 20px 40px -12px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

div.form-list-tech-append.management-tech .tech-card-content {
  padding-top: 0px;
}

div.form-list-tech-append.management-tech .tech-card-content .btn.btn-clock {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--px-4);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background-color: white;
}
div.form-list-tech-append.management-tech .tech-card-content .btn.btn-clock.in {
  border: 1px solid var(--bs-green);
  color: var(--bs-green);
}
div.form-list-tech-append.management-tech .tech-card-content .btn.btn-clock.out {
  border: 1px solid var(--bs-main);
  color: var(--bs-main);
}

/* Management Attendance uses the same compact card language as Salon Center v2. */
#static-clockinout-tech-modal div.form-list-tech-append.management-tech.sc2-tech-list {
  --sc2-frame-border: var(--bs-border-color);
  --sc2-header-fg: #1f2733;
  --sc2-muted: #5f6b7a;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  overflow: auto;
  align-content: start;
}

#static-clockinout-tech-modal
  div.form-list-tech-append.management-tech
  .management-attendance-card-wrap {
  width: 100%;
  min-width: 0;
}

#static-clockinout-tech-modal .management-attendance-card .sc2-tech__status {
  pointer-events: none;
}

#static-clockinout-tech-modal .management-attendance-card.sc2-tech--profile.sc2-tech--compact {
  --sc2-tech-avatar-offset: 28px;
  --sc2-tech-avatar-size: min(
    76px,
    100cqw,
    calc(var(--sc2-tech-card-height) - var(--sc2-tech-avatar-offset) - 44px)
  );
  padding-top: var(--sc2-tech-avatar-offset);
  justify-content: flex-start;
}

#static-clockinout-tech-modal
  .management-attendance-card.sc2-tech--profile.sc2-tech--compact[data-layout="grid"]
  .sc2-tech__name {
  margin-top: 18px;
}

#static-clockinout-tech-modal .management-attendance-card__action {
  position: absolute;
  z-index: 5;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

#static-clockinout-tech-modal .management-attendance-card__action:is(:hover, :focus-visible) {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

@media (pointer: coarse) {
  #static-clockinout-tech-modal .management-attendance-card.sc2-tech--profile.sc2-tech--compact {
    --sc2-tech-avatar-offset: 48px;
  }

  #static-clockinout-tech-modal .management-attendance-card__action {
    top: 2px;
    right: 2px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    font-size: 18px;
  }
}

#static-clockinout-tech-modal .management-attendance-card__action.in {
  color: var(--bs-green);
}

#static-clockinout-tech-modal .management-attendance-card__action.out {
  color: var(--bs-red);
}

@media (min-width: 769px) {
  #static-clockinout-tech-modal div.form-list-tech-append.management-tech.sc2-tech-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }
}

div.form-list-tech-append.management-tech .tech-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-text);
  text-align: center;
  max-width: 100%;
  padding-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  min-height: calc(2 * 1.4em);
}

div.form-list-tech-append.compact-view .tech-avatar-wrapper {
  border-width: 3px;
}

/* Compact View - Smaller Status Badge */
div.form-list-tech-append.compact-view .tech-status-badge {
  left: 50%;
  transform: translate(-50%);
  padding: 2px 6px;
  font-size: 12px;
  gap: 2px;
}

.double-ring {
  animation: doubleRing 2s infinite;
}

@keyframes doubleRing {
  0% {
    box-shadow:
      0 0 0 0 rgba(239, 68, 68, 0.7),
      0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(239, 68, 68, 0.3),
      0 0 0 10px rgba(239, 68, 68, 0.1);
  }
  100% {
    box-shadow:
      0 0 0 10px rgba(239, 68, 68, 0),
      0 0 0 20px rgba(239, 68, 68, 0);
  }
}

div.form-list-tech-append.compact-view .tech-status-badge i {
  position: relative;
  font-size: 13px;
  top: 1px;
}

/* Compact View - Smaller Index Number */
div.form-list-tech-append.compact-view .tech-index-number {
  top: 28px;
  left: 6px;
  width: 28px;
  height: 28px;
  font-size: 13px;
}

/* Compact View - Smaller Name */
div.form-list-tech-append.compact-view .tech-name {
  font-size: 16px;
  padding-top: 2px;
}

/* Compact View - Smaller Info Row */
div.form-list-tech-append.compact-view .tech-info-row {
  font-size: 10px;
  gap: 6px;
}

div.form-list-tech-append.compact-view .tech-clock-time i,
div.form-list-tech-append.compact-view .tech-ticket-count i {
  font-size: 10px;
}

div.form-list-tech-append.compact-view .tech-info-divider {
  width: 3px;
  height: 3px;
}

/* Compact View - Hide full progress bar, show only percentage */
div.form-list-tech-append.compact-view .tech-progress-container {
  width: 100px;
  padding: 3px 6px;
}

div.form-list-tech-append.compact-view .tech-progress-labels {
  font-size: 10px;
}

div.form-list-tech-append.compact-view .tech-progress-elapsed,
div.form-list-tech-append.compact-view .tech-progress-total {
  display: none !important;
}

div.form-list-tech-append.compact-view .tech-progress-percent {
  font-size: 12px;
  font-weight: 700;
}

/* Compact View - Hide full service info */
div.form-list-tech-append.compact-view .tech-service-info {
  display: none !important;
}

/* Compact View - Show ticket number in compact format */
div.form-list-tech-append.compact-view .tech-service-ticket-compact {
  display: flex !important;
  justify-content: center;
  padding: 4px 8px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
}

/* Normal View - Hide compact ticket number */
div.form-list-tech-append:not(.compact-view) .tech-service-ticket-compact {
  display: none !important;
}

/* Compact View - Hide upcoming info */
div.form-list-tech-append.compact-view .tech-upcoming-info {
  display: none !important;
}

/* Compact View - Adjust incoming info */
div.form-list-tech-append.compact-view .tech-incoming-info {
  margin-top: 2px;
  padding-top: 4px;
}

div.form-list-tech-append.compact-view .tech-incoming-text {
  font-size: 10px;
}

/* Compact View - Remove incoming and compact ticket lines */
div.form-list-tech-append.compact-view .tech-incoming-info {
  display: none !important;
}

div.form-list-tech-append.compact-view .tech-service-ticket-compact {
  display: none !important;
}

div.form-list-tech-append.compact-view .tech-card-content .tech-info-row {
  display: none !important;
}

/* Compact View - Hide option button */
div.form-list-tech-append.compact-view div.tech-detail .option-more-action-btn {
  display: none !important;
}

/* Smooth transition for all child elements */
div.form-list-tech-append div.tech-detail * {
  transition: all 0.3s ease-in-out;
}

/* ── Popup Change Tech: always compact ── */
#form-list-tech-append-id div.tech-detail {
  width: 130px;
  height: auto;
}

#form-list-tech-append-id .tech-card-content {
  padding-top: 0;
  gap: 8px;
}

#form-list-tech-append-id .tech-avatar-wrapper {
  width: 104px;
  height: 104px;
}

#form-list-tech-append-id .tech-avatar-wrapper {
  border-width: 3px;
}

#form-list-tech-append-id .tech-status-badge {
  left: 50%;
  transform: translate(-50%);
}

#form-list-tech-append-id .tech-status-badge i {
  position: relative;
  font-size: 13px;
}

#form-list-tech-append-id .tech-index-number {
  top: 28px;
  left: 6px;
}

#form-list-tech-append-id .tech-name {
  font-size: 16px;
  padding-top: 2px;
}

#form-list-tech-append-id .tech-info-row,
#form-list-tech-append-id .tech-service-info,
#form-list-tech-append-id .tech-upcoming-info,
#form-list-tech-append-id .tech-incoming-info,
#form-list-tech-append-id .tech-service-ticket-compact,
#form-list-tech-append-id .tech-card-content .tech-info-row,
#form-list-tech-append-id div.tech-detail .option-more-action-btn {
  display: none !important;
}

#form-list-tech-append-id .tech-progress-container {
  width: 100px;
  padding: 3px 6px;
}

#form-list-tech-append-id .tech-progress-labels {
  font-size: 10px;
}

#form-list-tech-append-id .tech-progress-elapsed,
#form-list-tech-append-id .tech-progress-total {
  display: none !important;
}

#form-list-tech-append-id .tech-progress-percent {
  font-size: 12px;
  font-weight: 700;
}

/* ============================================
   NEW TECH CARD REDESIGN - Override old styles
   ============================================ */

/* Tech Card Container */
div.form-list-tech-append div.tech-detail {
  width: 210px;
  height: 252px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--bs-border-color);
  padding: 16px;
  overflow: visible;
  transition: all 0.3s ease;
  overflow: hidden;
}

div.form-list-tech-append div.tech-detail:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Busy Tech Card - Pink gradient background */
div.form-list-tech-append div.tech-detail.tech-busy {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.15), rgba(225, 29, 72, 0.05));
  border: 2px solid rgba(225, 29, 72, 0.3);
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.15);
}

/* Hide old structure elements */
div.form-list-tech-append div.tech-detail .techs-photo,
div.form-list-tech-append div.tech-detail .techs-info,
div.form-list-tech-append div.tech-detail .processing-freetime,
div.form-list-tech-append div.tech-detail .wrap-phototech-index {
  display: none !important;
}

/* Status Badge (Ready/Busy) */
.tech-status-badge {
  position: absolute;
  bottom: -8px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
}

.tech-status-badge.ready {
  top: 0px;
  bottom: auto;
  left: 50%;
  border-radius: unset;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #d1fae5;
  color: #065f46;
  padding: 2px 8px;
  transform: translateX(-50%);
}

.tech-status-badge.ready i {
  color: #10b981;
  font-size: 15px;
}

.tech-status-badge.busy {
  background: #e11d48;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
}

.tech-status-badge.busy i {
  color: #ffffff;
  font-size: 12px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Index Number */
.tech-index-number {
  position: absolute;
  top: 32px;
  left: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tech-color, #3b82f6);
  color: white;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Card Content */
.tech-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 6px;
}

/* Avatar Container */
.tech-avatar-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tech-avatar-container.tech-avatar-clickable {
  cursor: pointer;
}

.tech-avatar-wrapper {
  position: relative;
  width: 144px;
  height: 144px;
  border-radius: 50%;
}

/* Colored border on wrapper so it persists when img is replaced by error-box */
.tech-avatar-wrapper {
  background: white;
  border: 2px solid var(--tech-color, #e5e7eb);
  overflow: hidden;
  box-shadow:
    rgb(0 0 0 / 44%) 0px 20px 40px -12px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.tech-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f4f6;
}

/* Tech Name */
.tech-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--bs-text);
  text-align: center;
  max-width: 100%;
  padding-top: 4px;
}

/* Info Row (Clock + Ticket Count) */
.tech-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
}

.tech-clock-time,
.tech-ticket-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tech-clock-time i,
.tech-ticket-count i {
  font-size: 14px;
}

.tech-info-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d1d5db;
}

/* Service Info */
.tech-service-info {
  width: 100%;
  padding: 4px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.tech-service-content {
  width: 100%;
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--bs-text);
  font-weight: 500;
}

.tech-service-text {
  flex: 1 1 auto;
  min-width: 0; /* allow shrinking inside flex for ellipsis */
  width: 140px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progress Container - Above Avatar */
.tech-progress-container {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 162px;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  align-items: center;
  padding: 6px;
  z-index: 11;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.15);
}

.tech-progress-labels {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: #e11d48;
  font-weight: 700;
}

.tech-progress-elapsed,
.tech-progress-total {
  color: #64748b;
  font-weight: 600;
}

.tech-progress-percent {
  color: #e11d48;
}

.tech-progress-bar {
  width: 84%;
  height: 6px;
  background: #d8d8d8;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tech-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 3px;
  transition:
    width 0.3s ease,
    background 0.3s ease;
}

/* Progress bar colors based on time remaining - Pink/Rose theme for busy */
.tech-progress-fill.time-green {
  background: linear-gradient(90deg, #10b981, #059669);
}

.tech-progress-fill.time-yellow {
  background: linear-gradient(90deg, #fb923c, #f97316);
}

.tech-progress-fill.time-red {
  background: linear-gradient(90deg, #f43f5e, #e11d48);
}

.tech-progress-fill.overtime {
  background: linear-gradient(90deg, #e11d48, #be123c);
  animation: pulse-progress 2s infinite;
}

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

/* Upcoming Info */
.tech-upcoming-info {
  width: fit-content;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
}

/* In Coming Info for Ready Tech */
.tech-incoming-info {
  width: 100%;
  margin-top: 4px;
  border-top: 1px solid #d8d8d8;
  text-align: center;
  line-height: 12px;
}

.tech-incoming-text {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
}

/* Option More Button */
.option-more-action-btn.for-tech {
  top: 8px;
  right: 40px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--bs-border-color);
  color: #6b7280;
  opacity: 0;
  transition: all 0.2s ease;
}

div.form-list-tech-append div.tech-detail:hover .option-more-action-btn.for-tech {
  opacity: 1;
}

.option-more-action-btn.for-tech:hover {
  background: var(--bs-body-bg);
  color: var(--bs-text);
}

/* ============================================
   TECH DETAIL PANEL - RIGHT SIDE (Updated Design)
   ============================================ */

.tech-detail-panel {
  --tech-detail-panel-width: min(470px, calc(100vw - 56px));
  --tech-panel-ink: #172033;
  --tech-panel-muted: #7b8ba3;
  --tech-panel-border: #e1e5eb;
  --tech-panel-surface: #f7f8f8;
  --tech-panel-accent: var(--bs-main, #30981c);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.tech-detail-panel.dis-none {
  display: none;
}

.tech-detail-panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  pointer-events: all;
}

.tech-detail-panel-content {
  position: relative;
  width: var(--tech-detail-panel-width);
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  animation: slideInRight 0.25s ease-out;
  pointer-events: all;
  display: flex;
  flex-direction: column;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tech-detail-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.tech-detail-panel-footer {
  flex: none;
  background: #fff;
  border-top: 1px solid var(--bs-border-color);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

#tech-detail-panel .tech-detail-panel-body {
  background: var(--tech-panel-surface);
}

#tech-detail-panel .tech-detail-section {
  padding: 12px 16px;
  border-color: var(--tech-panel-border);
  background: white;
}

#tech-detail-panel .tech-detail-section-header {
  margin-bottom: 10px;
  color: var(--tech-panel-ink);
  font-size: 13px;
  font-weight: 600;
}

#tech-detail-panel .tech-detail-panel-footer {
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgb(15 23 42 / 4%);
}

.tech-detail-panel-body::-webkit-scrollbar {
  width: 5px;
}

.tech-detail-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.tech-detail-panel-body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.tech-detail-panel .tech-detail-panel-close {
  position: absolute;
  top: 16px;
  right: calc(var(--tech-detail-panel-width) + 8px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d3d3d3;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: auto;
  font-size: 18px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.tech-detail-panel-close:hover {
  color: var(--bs-text);
}

/* ============================================
   HEADER SECTION
   ============================================ */

.tech-detail-header {
  display: flex;
  align-items: center;
  gap: 4px 12px;
  padding: 16px;
  background: white;
  border-bottom: 1px solid var(--bs-border-color);
}

#tech-detail-panel .tech-detail-header {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: minmax(58px, auto);
  align-items: start;
  padding: 10px 16px;
  border-bottom-color: var(--tech-panel-border);
}

#tech-detail-panel .tech-detail-panel-title {
  display: none;
}

#tech-detail-panel .tech-detail-avatar {
  width: 62px;
  height: 62px;
}

#tech-detail-panel .tech-detail-header.sc2-tech--profile {
  --sc2-tech-avatar-size: 100%;
  --sc2-tech-soft-border: color-mix(in srgb, var(--sc2-tech-color) 56%, #fff);
  --sc2-tech-activity-height: 24px;
  --sc2-muted: var(--tech-panel-muted);
  text-align: left;
}

#tech-detail-panel .tech-detail-header.sc2-tech--profile:hover {
  box-shadow: none;
}

#tech-detail-panel .tech-detail-header.sc2-tech--profile .sc2-tech__avatar-wrap {
  width: 100%;
  height: 100%;
}

#tech-detail-panel .tech-detail-header.sc2-tech--profile .sc2-tech__initials {
  font-size: 22px;
}



#tech-detail-panel .tech-detail-header.sc2-tech--profile .sc2-tech__status {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#tech-detail-panel #tech-detail-progress[hidden],
#tech-detail-panel #tech-detail-progress:has(> [hidden]) {
  display: none;
}

#tech-detail-panel .tech-detail-header.sc2-tech--profile .sc2-tech__progress {
  width: 100%;
  min-height: 0;
}

#tech-detail-panel .tech-detail-name {
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--tech-panel-ink);
}

#tech-detail-panel .tech-detail-meta {
  flex-wrap: wrap;
  row-gap: 4px;
}

.tech-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 0;
}

#tech-detail-panel .tech-detail-header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #667085;
  font-size: 14px;
  box-shadow: none;
}

#tech-detail-panel .tech-detail-header-action > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--tech-panel-border);
  border-radius: 8px;
  background: white;
  pointer-events: none;
}

#tech-detail-panel .tech-detail-header-action:hover > i {
  background: var(--tech-panel-surface);
  color: var(--tech-panel-ink);
}

#tech-detail-panel .tech-detail-header-action--danger {
  color: #d64545;
}

#tech-detail-panel .tech-detail-header-action--danger:hover > i {
  border-color: #f0cccc;
  background: #fff5f5;
  color: #c53030;
}

#tech-detail-panel .tech-detail-change-photo {
  position: absolute;
  top: auto;
  left: -2px;
  bottom: -2px;
  transform: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #667085;
  font-size: 11px;
  box-shadow: none;
}

#tech-detail-panel .tech-detail-change-photo > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--tech-panel-border);
  border-radius: 50%;
  background: white;
  pointer-events: none;
}

#tech-detail-panel .tech-detail-change-photo:hover > i {
  border-color: var(--tech-panel-accent);
  background: var(--tech-panel-surface);
  color: var(--tech-panel-accent);
}

#tech-detail-panel :is(.tech-detail-header-action, .tech-detail-change-photo, .tech-detail-gallery-upload):focus-visible {
  outline: 2px solid var(--tech-panel-accent);
  outline-offset: 0;
}

#tech-detail-panel .tech-detail-change-photo[hidden] {
  display: none;
}

.tech-detail-turn-action {
  display: contents;
}

@media (max-width: 768px) {
  #tech-detail-panel {
    --tech-detail-panel-width: 100%;
    inset: 0;
    height: 100dvh;
    z-index: 1040;
  }

  #tech-detail-panel .tech-detail-panel-close {
    top: env(safe-area-inset-top, 0px);
    right: max(8px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tech-panel-ink);
    box-shadow: none;
  }

  #tech-detail-panel .tech-detail-panel-close > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--tech-panel-border);
    border-radius: 8px;
    background: white;
    font-size: 14px;
    pointer-events: none;
  }

  #tech-detail-panel .tech-detail-panel-close:focus-visible {
    outline: 2px solid var(--bs-main);
    outline-offset: 2px;
  }

  #tech-detail-panel .tech-detail-header {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-template-rows: 44px minmax(58px, auto);
    gap: 8px 12px;
    padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  }

  #tech-detail-panel .tech-detail-panel-title {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: stretch;
    align-items: center;
    margin: 0 calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left)));
    padding: 0 max(60px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--tech-panel-border);
    color: var(--tech-panel-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
  }

  #tech-detail-panel .tech-detail-avatar {
    grid-column: 1;
    grid-row: 2;
  }

  #tech-detail-panel .tech-detail-info {
    grid-column: 2;
    grid-row: 2;
  }

  #tech-detail-panel .tech-detail-header-actions {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    flex-wrap: nowrap;
  }

  #tech-detail-panel .tech-detail-panel-body {
    overscroll-behavior: contain;
  }

  #tech-detail-panel .tech-detail-panel-footer {
    max-height: 50dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  #tech-detail-panel .tech-detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #tech-detail-panel .tech-action-btn {
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
  }

  #tech-detail-panel .tech-action-btn span {
    overflow-wrap: anywhere;
  }
}

.tech-detail-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tech-detail-avatar .tech-avatar-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.tech-detail-avatar .tech-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.tech-detail-avatar .track-img-error-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  color: var(--tech-color, #6366f1) !important;
  font-size: 16px !important;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 1;
}

#tech-detail-panel .tech-panel-index {
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: auto;
  right: auto;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  border-radius: 50%;
  color: white;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgb(15 23 42 / 12%);
  pointer-events: none;
  z-index: 3;
}

.tech-detail-info {
  flex: 1;
  min-width: 0;
}

.tech-detail-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--bs-text);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tech-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tech-detail-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.tech-detail-status-badge.ready {
  background: #d1fae5;
  color: #065f46;
}

.tech-detail-status-badge.busy {
  background: #fee2e2;
  color: #dc2626;
}

.tech-detail-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.tech-detail-time i {
  font-size: 12px;
  color: #9ca3af;
}

/* ============================================
   SECTION STYLES
   ============================================ */

.tech-detail-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bs-border-color);
}

.tech-detail-section:last-child {
  border-bottom: none;
}

.tech-detail-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-text);
  margin-bottom: 12px;
}

.tech-detail-section-header i {
  color: #6b7280;
  font-size: 14px;
}

/* ============================================
   TODAY'S STATS
   ============================================ */

#tech-detail-panel .tech-detail-gallery[hidden] {
  display: none;
}

#tech-detail-panel .tech-detail-gallery {
  padding-top: 8px;
  padding-bottom: 8px;
}

#tech-detail-panel .tech-detail-gallery-header {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}

#tech-detail-panel .tech-detail-gallery-header .tech-detail-section-header {
  margin: 0;
}

#tech-detail-panel .tech-detail-gallery-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #344054;
  font-size: 12px;
  white-space: nowrap;
}

#tech-detail-panel .tech-detail-gallery-upload-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--tech-panel-border);
  border-radius: 8px;
  background: white;
}

#tech-detail-panel .tech-detail-gallery-upload:hover .tech-detail-gallery-upload-label {
  background: var(--tech-panel-surface);
}

#tech-detail-panel .tech-detail-gallery-strip[hidden] {
  display: none;
}

#tech-detail-panel .tech-detail-gallery-strip {
  --tech-gallery-size: 64px;
  --tech-gallery-gap: 8px;
  display: flex;
  gap: var(--tech-gallery-gap);
}

#tech-detail-panel .tech-detail-gallery-strip:not([hidden]):not(:empty) {
  margin-top: 12px;
}

#tech-detail-panel .tech-detail-gallery-tile {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: min(100%, var(--tech-gallery-size));
  max-width: 64px;
  height: auto;
  max-height: 64px;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe3e6;
  border-radius: 6px;
  background: #f5f7f6;
  color: #374151;
  box-shadow: none;
  cursor: pointer;
}

#tech-detail-panel .tech-detail-gallery-tile img,
.tech-gallery-viewer .tech-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

#tech-detail-panel .tech-detail-gallery-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  pointer-events: none;
}

#tech-detail-panel .tech-detail-gallery-tile:hover {
  border-color: #24845b;
}

.tech-gallery-unavailable {
  display: none;
}

#tech-detail-panel .is-unavailable img,
.tech-gallery-viewer .is-unavailable img {
  display: none;
}

#tech-detail-panel .is-unavailable .tech-gallery-unavailable,
.tech-gallery-viewer .is-unavailable .tech-gallery-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
}

dialog.tech-gallery-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #101213;
  color: #f4f5f6;
  letter-spacing: 0;
}

.tech-gallery-viewer[open] {
  display: flex;
  flex-direction: column;
}

.tech-gallery-viewer::backdrop {
  background: #101213;
}

.tech-gallery-viewer .tech-gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  min-height: 64px;
  padding: 8px 16px;
  border-bottom: 1px solid #303436;
}

.tech-gallery-viewer .tech-gallery-toolbar h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
}

.tech-gallery-viewer .tech-gallery-counter {
  flex: none;
  margin-left: auto;
  color: #cbd0d2;
  font-size: 13px;
  white-space: nowrap;
}

.tech-gallery-viewer button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #25292b;
  color: #f4f5f6;
  font-size: 18px;
  box-shadow: none;
  cursor: pointer;
}

.tech-gallery-viewer button:hover:not(:disabled) {
  background: #373d40;
}

.tech-gallery-viewer button:disabled {
  opacity: 0.3;
  cursor: default;
}

#tech-detail-panel .tech-detail-gallery-tile:focus-visible,
.tech-gallery-viewer button:focus-visible {
  outline: 2px solid #38b77d;
  outline-offset: 2px;
}

.tech-gallery-viewer .tech-gallery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px;
  flex: 1 1 0;
  min-height: 0;
}

.tech-gallery-viewer .tech-gallery-stage {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 16px;
}

.tech-gallery-viewer .tech-gallery-figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.tech-gallery-viewer .tech-gallery-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.tech-gallery-viewer [hidden] {
  display: none;
}

.tech-gallery-viewer .tech-gallery-image-error {
  align-self: center;
  text-align: center;
  color: #cbd0d2;
}

.tech-gallery-viewer figcaption {
  max-height: 88px;
  padding-top: 12px;
  overflow-y: auto;
  overflow-wrap: anywhere;
  text-align: center;
  color: #cbd0d2;
  font-size: 13px;
}

.tech-gallery-viewer .tech-gallery-rail {
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
  border-left: 1px solid #383e40;
  background: #272b2d;
}

.tech-gallery-viewer .tech-gallery-date-group {
  margin-bottom: 16px;
}

.tech-gallery-viewer .tech-gallery-date-group h3 {
  margin: 0 0 8px;
  color: #cbd0d2;
  font-size: 11px;
  font-weight: 500;
}

.tech-gallery-viewer .tech-gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tech-gallery-viewer .tech-gallery-thumbnail {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 2px;
}

.tech-gallery-viewer .tech-gallery-thumbnail[aria-pressed="true"] {
  border-color: #69b2fa;
}

@media (max-width: 600px) {
  .tech-gallery-viewer .tech-gallery-toolbar {
    gap: 8px;
    padding: 8px;
  }

  .tech-gallery-viewer .tech-gallery-toolbar h2 {
    font-size: 14px;
  }

  .tech-gallery-viewer .tech-gallery-layout {
    display: flex;
    flex-direction: column;
  }

  .tech-gallery-viewer .tech-gallery-stage {
    flex: 1 1 0;
    gap: 4px;
    padding: 8px;
  }

  .tech-gallery-viewer .tech-gallery-rail {
    display: flex;
    gap: 16px;
    flex: none;
    height: 120px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #383e40;
    border-left: 0;
  }

  .tech-gallery-viewer .tech-gallery-date-group {
    flex: none;
    margin: 0;
  }

  .tech-gallery-viewer .tech-gallery-thumbnails {
    display: flex;
  }

  .tech-gallery-viewer .tech-gallery-thumbnail {
    flex: none;
    width: 64px;
    height: 64px;
  }
}

.tech-detail-stats {
  display: flex;
  width: 100%;
  gap: 8px;
}

.tech-stat-item[hidden] {
  display: none;
}

.tech-stat-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: var(--bs-body-bg);
  border-radius: 4px;
  border: 1px solid var(--bs-border-color);
}

.tech-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--bs-text);
  line-height: 1.2;
}

.tech-stat-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin-top: 2px;
}

.tech-stat-item.tech-stat-revenue .tech-stat-value {
  color: #10b981;
}

#tech-detail-panel .tech-detail-stats {
  gap: 0;
}

#tech-detail-panel .tech-stat-item {
  min-height: 0;
  padding: 0 12px;
  align-items: flex-start;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#tech-detail-panel .tech-stat-item:not([hidden]) ~ .tech-stat-item:not([hidden]) {
  box-shadow: inset 1px 0 0 var(--tech-panel-border);
}

#tech-detail-panel .tech-stat-value {
  max-width: 100%;
  color: var(--tech-panel-ink);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#tech-detail-panel .tech-stat-label {
  order: -1;
  margin-top: 0;
  line-height: 1.2;
}

#tech-detail-panel .tech-stat-label,
#tech-detail-panel .tech-detail-time {
  color: var(--tech-panel-muted);
}

/* ============================================
   CURRENT TICKETS
   ============================================ */

.tech-ticket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bs-body-bg);
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
}

.tech-ticket-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tech-ticket-type {
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-text);
}

.tech-ticket-service {
  font-size: 12px;
  color: #6b7280;
}

.tech-ticket-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tech-ticket-time {
  font-size: 12px;
  color: #6b7280;
}

.tech-ticket-checkout {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #10b981;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.tech-ticket-checkout:hover {
  color: #059669;
}

.tech-ticket-checkout i {
  font-size: 10px;
}

/* ============================================
   CURRENT TICKETS + WAITING LIST (TicketCard)
   ============================================ */

/* Host mang scope .sc2 để card nhận token; bỏ khung full-height của root Salon Center. */
.tech-detail-panel .sc2.tech-ticket-host {
  --sc2-ticket-resize-width: 100%;
  height: auto;
  overflow: visible;
  background: transparent;
  isolation: auto;
}

#tech-detail-panel .tech-ticket-host .sc2-ticket-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@media (min-width: 360px) {
  #tech-detail-panel .tech-ticket-host .sc2-ticket-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tech-waiting-hint {
  display: none;
}

#tech-detail-panel .tech-waiting-section {
  padding: 0 16px 16px;
  background: transparent;
}

#tech-detail-panel .tech-waiting-header-host {
  container-type: inline-size;
  margin: 0 -16px 12px;
}

.tech-detail-panel .tech-waiting-search {
  margin: 0 0 12px;
}

.tech-detail-panel .tech-waiting-search:not(.is-open) {
  display: none;
}

@container (width <= 380px) {
  #tech-waiting-header .sc2-frame-header__tabs {
    display: none;
  }

  #tech-waiting-header .sc2-frame-header__select {
    display: inline-flex;
  }
}

@media (max-width: 768px) {
  #tech-waiting-header .sc2-frame-header {
    --sc2-header-h: 44px;
    --sc2-header-tool-size: 44px;
  }
}

.tech-detail-panel .tech-waiting-section.is-collapsed #tech-waiting-body {
  display: none;
}

/* ============================================
   QUICK ACTIONS - 2x2 Grid
   ============================================ */

.tech-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tech-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: white;
  border: 1.5px solid var(--bs-border-color);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bs-text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tech-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tech-action-btn i {
  font-size: 14px;
}

/* Add Ticket - Blue */
.tech-action-add-ticket {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.tech-action-add-ticket:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.tech-action-add-ticket i {
  color: #3b82f6;
}

/* Add Note - Orange/Yellow */
.tech-action-add-note {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.tech-action-add-note:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}

.tech-action-add-note i {
  color: #f59e0b;
}

#tech-detail-panel .tech-action-btn {
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--tech-panel-border);
  border-radius: 8px;
  background: white;
  color: #344054;
  font-size: 13px;
  font-weight: 600;
}

#tech-detail-panel .tech-action-btn > i {
  color: currentColor;
  font-size: 13px;
}

#tech-detail-panel .tech-action-btn:hover {
  border-color: #c8d0dc;
  background: var(--tech-panel-surface);
  transform: none;
  box-shadow: none;
}

#tech-detail-panel .tech-action-add-ticket {
  border-color: var(--tech-panel-accent);
  background: var(--tech-panel-accent);
  color: white;
}

#tech-detail-panel .tech-action-add-ticket:hover {
  border-color: color-mix(in srgb, var(--tech-panel-accent) 90%, #000);
  background: color-mix(in srgb, var(--tech-panel-accent) 90%, #000);
}

#tech-detail-panel .tech-action-btn:focus-visible {
  outline: 2px solid var(--tech-panel-accent);
  outline-offset: 2px;
}

/* Edit Staff - Purple */
.tech-action-edit-staff {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

.tech-action-edit-staff:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}

.tech-action-edit-staff i {
  color: #8b5cf6;
}

/* Checkout - Green */
.tech-action-checkout {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.tech-action-checkout:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.tech-action-checkout i {
  color: #10b981;
}

/* ============================================
   ADD STAFF NOTE MODAL
   ============================================ */

.staff-note-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.staff-note-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.staff-note-modal {
  width: 100%;
  max-width: 480px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  transform: scale(0.95) translateY(10px);
  transition: all 0.25s ease;
  overflow: hidden;
}

.staff-note-modal-overlay.show .staff-note-modal {
  transform: scale(1) translateY(0);
}

/* Modal Header */
.staff-note-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bs-border-color);
}

.staff-note-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--bs-text);
}

.staff-note-modal-title i {
  color: #f59e0b;
  font-size: 18px;
}

.staff-note-modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.staff-note-modal-close:hover {
  background: var(--bs-body-bg);
  color: var(--bs-text);
}

/* Modal Body */
.staff-note-modal-body {
  padding: 20px;
}

.staff-note-staff-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #6b7280;
}

.staff-note-staff-info i {
  color: #9ca3af;
  font-size: 14px;
}

.staff-note-staff-name {
  font-weight: 500;
  color: var(--bs-text);
}

/* Textarea */
.staff-note-textarea-wrapper {
  position: relative;
  border: 2px solid var(--bs-main);
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.staff-note-textarea-wrapper:focus-within {
  border-color: var(--bs-main-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-main) 10%, transparent);
}

.staff-note-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: var(--bs-text);
  resize: vertical;
  outline: none;
  font-family: inherit;
}

.staff-note-textarea::placeholder {
  color: #9ca3af;
}

.staff-note-char-count {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  color: #9ca3af;
}

.staff-note-char-count.warning {
  color: #f59e0b;
}

.staff-note-char-count.error {
  color: #ef4444;
}

/* Hint */
.staff-note-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: #9ca3af;
}

.staff-note-hint i {
  font-size: 12px;
}

.staff-note-hint kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  color: var(--bs-text);
}

/* Modal Footer */
.staff-note-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}

.staff-note-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.staff-note-btn-cancel {
  background: white;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.staff-note-btn-cancel:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.staff-note-btn-submit {
  background: var(--bs-main);
  border: 1px solid var(--bs-main);
  color: white;
}

.staff-note-btn-submit:hover {
  background: var(--bs-main-hover);
  border-color: var(--bs-main-hover);
}

.staff-note-btn-submit:disabled {
  background: #d1d5db;
  border-color: var(--bs-border-color);
  cursor: not-allowed;
}

/* Mobile: present the note form as a bottom sheet. */
@media (max-width: 768px) {
  #staff-note-modal.staff-note-modal-overlay {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }

  #staff-note-modal .staff-note-modal {
    width: 100%;
    max-width: none;
    max-height: min(88dvh, 680px);
    display: flex;
    flex-direction: column;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  #staff-note-modal .staff-note-modal::before {
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    content: "";
    background: #d1d5db;
    border-radius: 999px;
  }

  #staff-note-modal.staff-note-modal-overlay.show .staff-note-modal {
    transform: translateY(0);
  }

  #staff-note-modal .staff-note-modal-header {
    padding-top: 12px;
  }

  #staff-note-modal .staff-note-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  #staff-note-modal .staff-note-modal-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Clockin/Clockout tech */
.area-clockin-clockout-tech {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.area-clockin-clockout-tech .header-clock {
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  padding: var(--px-16);
  border-bottom: 1px solid var(--theme-mode-border);
}
.header-clock p {
  font: normal normal 700 var(--s-22);
}

.area-clockin-clockout-tech .area-clockin-tech,
.area-clockin-clockout-tech .area-clockout-tech {
  height: calc(50% - 26px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bs-surface-bg);
  padding: 0px var(--px-16);
  overflow: hidden;
  transition: height 0.3s;
}
.area-clockin-tech .title-descriptions,
.area-clockout-tech .title-descriptions {
  display: grid;
  align-items: center;
  grid-gap: var(--px-10);
  padding: var(--px-8) 0;
  grid-template-columns: var(--px-32) 1fr max-content max-content;
}
.area-clockin-tech .title-descriptions span,
.area-clockout-tech .title-descriptions span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-blue);
  text-transform: uppercase;
  font: normal normal 700 var(--s-16);
}

#static-clockinout-tech-modal .title-descriptions .descriptions .chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eaf3ff;
  border: 1px solid #bfdbff;
  color: var(--bs-blue);
  font: normal normal 700 var(--s-12);
  line-height: 1;
}
.area-clockin-tech .title-descriptions small,
.area-clockout-tech .title-descriptions small {
  font: italic normal 400 var(--s-14);
}

.area-clockin-tech .title-descriptions i.fa-user-clock {
  color: var(--bs-main);
  font-size: var(--px-20);
}

.area-clockin-tech .title-descriptions i.fa-user-slash {
  color: var(--bs-gray-light);
  font-size: var(--px-20);
}

.area-clockin-tech .title-descriptions .descriptions,
.area-clockout-tech .title-descriptions .descriptions {
  gap: 6px;
  display: flex;
  flex-direction: column;
}

.area-clockin-tech .title-descriptions .btn.btn-clock,
.area-clockout-tech .title-descriptions .btn.btn-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-surface-bg);
  background: var(--bs-blue);
}

.area-clockin-tech .title-descriptions .btn.btn-clock {
  background: var(--bs-blue);
}

.area-clockout-tech .title-descriptions .btn.btn-clock.in {
  background: var(--bs-green);
}

/* Toggle section button */
.btn-toggle-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--theme-mode-border);
  border-radius: var(--px-4);
  background: transparent;
  color: var(--bs-gray);
  cursor: pointer;
  transition: transform 0.3s;
}
.btn-toggle-section:hover {
  background: var(--bs-gray-100, #f3f4f6);
}

/* Collapsed section - only shows title-descriptions */
.area-clockin-clockout-tech .area-clockin-tech.collapsed .form-list-tech-append,
.area-clockin-clockout-tech .area-clockout-tech.collapsed .form-list-tech-append {
  display: none;
}
.area-clockin-clockout-tech .area-clockin-tech.collapsed,
.area-clockin-clockout-tech .area-clockout-tech.collapsed {
  height: auto;
  overflow: visible;
  flex: 0 0 auto;
}
/* When one is collapsed, sibling fills remaining space */
.area-clockin-clockout-tech:has(.collapsed) > :not(.collapsed):not(.header-clock) {
  height: auto;
  flex: 1 1 auto;
}
.area-clockin-tech.collapsed .btn-toggle-section,
.area-clockout-tech.collapsed .btn-toggle-section {
  transform: rotate(-90deg);
}

#static-clockinout-tech-modal .modal-right-side {
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#static-clockinout-tech-modal .management-attd {
  width: var(--px-40);
  height: var(--px-40);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--px-16);
  border-radius: var(--px-40);
  color: var(--theme-mode-text);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-surface-bg);
  box-shadow: var(--bs-shadow-lg);
  right: var(--px-12);
  top: var(--px-6);
}

@media (min-width: 769px) {
  #static-clockinout-tech-modal .modal-right-side,
  #static-clockinout-tech-modal .modal-content {
    height: 100%;
  }

  #static-clockinout-tech-modal .modal-right-side {
    margin-top: 0;
  }
}

/* =====================================================================
   RESPONSIVE – Management Attendance
   Backup: salon-technicians.css.backup
   ===================================================================== */

/* ─── Tablet ≤ 1024px ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Modal width */
  #static-clockinout-tech-modal.static-right-side {
    width: 70vw;
  }

  /* Header compact */
  .area-clockin-clockout-tech .header-clock {
    height: 44px;
    flex: 0 0 44px;
    padding: 0 var(--px-16);
  }

  .header-clock p {
    font: normal normal 700 var(--s-18);
  }

  /* Title descriptions compact */
  .area-clockin-tech .title-descriptions,
  .area-clockout-tech .title-descriptions {
    padding: var(--px-8) var(--px-12);
    gap: var(--px-8);
    grid-template-columns: var(--px-24) 1fr max-content max-content;
  }

  .area-clockin-tech .title-descriptions small,
  .area-clockout-tech .title-descriptions small {
    font: italic normal 400 var(--s-12);
  }

  .area-clockin-tech .title-descriptions .btn.btn-clock,
  .area-clockout-tech .title-descriptions .btn.btn-clock {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Tech cards smaller */
  div.form-list-tech-append.management-tech div.tech-detail {
    width: 85px;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech div.tech-detail {
    height: 152px !important;
    min-height: 152px;
  }

  div.form-list-tech-append.management-tech .tech-avatar-wrapper {
    width: 58px;
    height: 58px;
  }

  div.form-list-tech-append.management-tech .tech-name {
    font-size: 11px;
  }

  div.form-list-tech-append.management-tech .tech-card-content .btn.btn-clock {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* ─── Tablet Portrait ≤ 768px ───────────────────────────────────────── */
@media (max-width: 768px) {
  #static-clockinout-tech-modal .management-attd {
    width: var(--px-32);
    height: var(--px-32);
    top: var(--px-4);
    padding: 0px;
  }
  #static-clockinout-tech-modal.static-right-side {
    width: 80vw;
    box-shadow: none;
  }

  .area-clockin-clockout-tech .header-clock {
    height: 40px;
    flex: 0 0 40px;
    padding: 0 var(--px-12);
  }

  .header-clock p {
    font: normal normal 700 var(--s-16);
  }

  /* Title: stack layout on narrow screens */
  .area-clockin-tech .title-descriptions,
  .area-clockout-tech .title-descriptions {
    grid-template-columns: var(--px-24) 1fr max-content max-content;
    padding: var(--px-6) var(--px-10);
    gap: var(--px-6);
  }

  .area-clockin-tech .title-descriptions small,
  .area-clockout-tech .title-descriptions small {
    font: italic normal 400 var(--s-11);
  }

  .area-clockin-tech .title-descriptions span,
  .area-clockout-tech .title-descriptions span {
    font: normal normal 700 var(--s-13);
    gap: 6px;
  }

  #static-clockinout-tech-modal .title-descriptions .descriptions .chip-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font: normal normal 700 var(--s-11);
  }

  .area-clockin-tech .title-descriptions .btn.btn-clock,
  .area-clockout-tech .title-descriptions .btn.btn-clock {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--px-4);
  }

  /* Tech cards: smaller grid */
  div.form-list-tech-append.management-tech div.tech-detail {
    width: 75px;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech div.tech-detail {
    height: 138px !important;
    min-height: 138px;
  }

  div.form-list-tech-append.management-tech .tech-avatar-wrapper {
    width: 50px;
    height: 50px;
  }

  div.form-list-tech-append.management-tech .tech-name {
    font-size: 10px;
  }

  div.form-list-tech-append.management-tech .tech-card-content .btn.btn-clock {
    font-size: 9px;
    padding: 2px 5px;
  }

  /* Toggle button smaller */
  .btn-toggle-section {
    width: var(--px-28);
    height: var(--px-28);
  }
  #static-clockinout-tech-modal .modal-right-side {
    height: calc(100vh - var(--px-60));
    width: 100%;
    box-shadow:
      0 4px 6px 0 rgba(0, 0, 0, 0.14),
      0 1px 10px 0 rgba(0, 0, 0, 0.12),
      0 2px 6px -1px rgba(0, 0, 0, 0.2);
  }
  #static-clockinout-tech-modal .modal-right-side .btn-clock {
    height: 24px;
  }
  #static-clockinout-tech-modal .modal-right-side .title-descriptions .descriptions {
    gap: 0px;
  }
}

/* ─── Mobile ≤ 480px ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #static-clockinout-tech-modal .management-attd {
    width: var(--px-28);
    height: var(--px-28);
    top: var(--px-4);
    padding: 0px;
  }
  #static-clockinout-tech-modal.static-right-side {
    width: 82vw;
    bottom: -32px;
  }

  .area-clockin-clockout-tech .header-clock {
    height: 36px;
    flex: 0 0 36px;
    padding: 0 var(--px-8);
  }

  .header-clock p {
    font: normal normal 700 var(--s-14);
  }

  /* Title: icon + description row, buttons below */
  .area-clockin-tech .title-descriptions,
  .area-clockout-tech .title-descriptions {
    grid-template-columns: var(--px-20) 1fr max-content max-content;
    padding: var(--px-6) var(--px-8);
    gap: var(--px-4);
  }

  .area-clockin-tech .title-descriptions i.fa-user-clock,
  .area-clockin-tech .title-descriptions i.fa-user-slash {
    font-size: var(--px-14);
  }

  .area-clockin-tech .title-descriptions span,
  .area-clockout-tech .title-descriptions span {
    font: normal normal 700 var(--s-11);
    gap: 4px;
  }

  #static-clockinout-tech-modal .title-descriptions .descriptions .chip-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font: normal normal 700 var(--s-10);
  }

  .area-clockin-tech .title-descriptions small,
  .area-clockout-tech .title-descriptions small {
    font: italic normal 400 var(--s-10);
  }

  .area-clockin-tech .title-descriptions .btn.btn-clock,
  .area-clockout-tech .title-descriptions .btn.btn-clock {
    font-size: 9px;
    padding: 2px 6px;
  }

  /* Tech cards: fit 4 per row on small screen */
  div.form-list-tech-append.management-tech div.tech-detail {
    width: 70px;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech div.tech-detail {
    height: 126px !important;
    min-height: 126px;
  }

  div.form-list-tech-append.management-tech .tech-avatar-wrapper {
    width: 44px;
    height: 44px;
  }

  div.form-list-tech-append.management-tech .tech-name {
    font-size: 9px;
  }

  div.form-list-tech-append.management-tech .tech-card-content .btn.btn-clock {
    font-size: 8px;
    padding: 1px 4px;
  }

  /* Toggle + close button */
  .btn-toggle-section {
    width: var(--px-24);
    height: var(--px-24);
  }

  #static-clockinout-tech-modal .minimum-form-book {
    width: var(--px-28);
    height: var(--px-28);
    font-size: var(--px-12);
    padding: 0px;
    left: -32px;
  }
}

#static-clockinout-tech-modal .area-clockin-clockout-tech {
  --attendance-header-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: #fff;
}

#static-clockinout-tech-modal .area-clockin-clockout-tech > :is(.area-clockin-tech, .area-clockout-tech) {
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--attendance-header-height);
  height: auto;
  min-height: var(--attendance-header-height);
  padding: 0;
  overflow: visible;
  background: #fff;
  transition: flex-grow 240ms ease;
}

#static-clockinout-tech-modal .area-clockin-clockout-tech > :is(.area-clockin-tech, .area-clockout-tech).collapsed {
  flex-grow: 0;
}

#static-clockinout-tech-modal .area-clockin-clockout-tech > .area-clockin-tech {
  position: relative;
}

#static-clockinout-tech-modal .area-clockin-clockout-tech > .area-clockin-tech::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  border-bottom: 1px solid #e9edeb;
  pointer-events: none;
  z-index: 11;
}

#static-clockinout-tech-modal .area-clockout-tech {
  margin-top: 0;
}

#static-clockinout-tech-modal :is(.area-clockin-tech, .area-clockout-tech) > .title-descriptions {
  position: relative;
  top: auto;
  z-index: 10;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  height: var(--attendance-header-height);
  min-height: var(--attendance-header-height);
  padding: 10px 0;
  box-sizing: border-box;
  background: #fff;
}

#static-clockinout-tech-modal .attendance-section-heading {
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

#static-clockinout-tech-modal .attendance-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 40px;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--bs-main-700);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
  letter-spacing: 0;
}

#static-clockinout-tech-modal .area-clockout-tech .attendance-section-toggle {
  color: #59656a;
}

#static-clockinout-tech-modal .attendance-section-toggle > span {
  color: inherit;
  font: inherit;
  text-transform: none;
}

#attendance-clockin-heading > button > span:nth-child(2),
#attendance-clockout-heading > button > span:nth-child(2) {
  min-width: 92px;
}

#static-clockinout-tech-modal .attendance-section-toggle .quantity {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: var(--bs-main-50);
  font-size: 12px;
  line-height: 1;
}

#static-clockinout-tech-modal .area-clockout-tech .quantity {
  background: #eef0f1;
}

#static-clockinout-tech-modal .attendance-section-toggle .attendance-section-icon {
  flex: none;
  color: inherit;
  font-size: 18px;
}

#static-clockinout-tech-modal .attendance-section-chevron {
  flex: none;
  margin-left: 2px;
  color: #718078;
  font-size: 11px;
  transition: transform 0.16s ease;
}

#static-clockinout-tech-modal .attendance-section-toggle[aria-expanded="false"] .attendance-section-chevron {
  transform: rotate(-90deg);
}

#static-clockinout-tech-modal .attendance-section-toggle:hover {
  background: #f3f5f4;
}

#static-clockinout-tech-modal .attendance-section-toggle:focus-visible,
#static-clockinout-tech-modal .title-descriptions .btn-clock:focus-visible {
  outline: 2px solid var(--bs-main);
  outline-offset: 2px;
}

#static-clockinout-tech-modal :is(.area-clockin-tech, .area-clockout-tech) .title-descriptions .btn.btn-clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 124px;
  width: auto;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  background: #fff;
  color: var(--bs-red);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

#static-clockinout-tech-modal .title-descriptions .btn-clock span {
  color: inherit;
  font: inherit;
  text-transform: none;
}

#static-clockinout-tech-modal .area-clockout-tech .title-descriptions .btn.btn-clock.in {
  background: var(--bs-main);
  border-color: var(--bs-main);
  color: #fff;
}

#static-clockinout-tech-modal .title-descriptions .btn-clock.out:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bs-red) 6%, #fff);
}

#static-clockinout-tech-modal .title-descriptions .btn-clock.in:hover:not(:disabled) {
  background: var(--bs-main-700);
}

#static-clockinout-tech-modal .title-descriptions .btn-clock:disabled {
  opacity: 0.5;
  cursor: default;
}

#static-clockinout-tech-modal .attendance-section-body {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: #f2f3f3;
}

#static-clockinout-tech-modal .attendance-section-body[hidden],
#static-clockinout-tech-modal .attendance-empty[hidden] {
  display: none;
}

#static-clockinout-tech-modal .attendance-section-body > div.form-list-tech-append.management-tech.sc2-tech-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  height: auto;
  min-height: 0;
  padding: 12px;
  overflow: visible;
  background: transparent;
  transition: none;
}

#static-clockinout-tech-modal .attendance-section-body > div.form-list-tech-append:empty {
  display: none;
}

#static-clockinout-tech-modal .attendance-empty {
  margin: 0;
  padding: 28px 12px;
  color: #697574;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  #static-clockinout-tech-modal .area-clockin-clockout-tech {
    padding-left: 10px;
    padding-right: 10px;
  }

  #static-clockinout-tech-modal .attendance-section-body > div.form-list-tech-append.management-tech.sc2-tech-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 8px;
  }
}

@media (max-width: 480px) {
  #static-clockinout-tech-modal .area-clockin-clockout-tech {
    --attendance-header-height: 108px;
  }

  #static-clockinout-tech-modal :is(.area-clockin-tech, .area-clockout-tech) > .title-descriptions {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 8px 0;
  }

  #static-clockinout-tech-modal :is(.area-clockin-tech, .area-clockout-tech) .title-descriptions .btn.btn-clock {
    justify-self: end;
    min-height: 44px;
  }

  #static-clockinout-tech-modal .attendance-section-toggle {
    min-height: 44px;
  }

  #static-clockinout-tech-modal .attendance-section-body > div.form-list-tech-append.management-tech.sc2-tech-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  #static-clockinout-tech-modal .attendance-section-toggle,
  #static-clockinout-tech-modal :is(.area-clockin-tech, .area-clockout-tech) .title-descriptions .btn.btn-clock {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #static-clockinout-tech-modal .attendance-section-chevron,
  #static-clockinout-tech-modal .area-clockin-clockout-tech > :is(.area-clockin-tech, .area-clockout-tech) {
    transition: none;
  }
}

/* Mobile attendance uses a full-screen workspace and Technician-style rows. */
@media (max-width: 768px) {
  #static-clockinout-tech-modal.static-right-side {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: var(--sc2-visual-viewport-h, 100dvh);
    bottom: auto;
    overflow: hidden;
    background: var(--bs-surface-bg, #fff);
    box-shadow: none;
    z-index: 1060;
  }

  #static-clockinout-tech-modal.menu-shell-close-outside {
    overflow: visible;
  }

  #static-clockinout-tech-modal .modal-right-side {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #static-clockinout-tech-modal .modal-content,
  #static-clockinout-tech-modal .area-clockin-clockout-tech {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  #static-clockinout-tech-modal .area-clockin-clockout-tech .header-clock {
    height: 52px;
    flex: 0 0 52px;
    padding: 0 56px 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--bs-border-color);
  }

  #static-clockinout-tech-modal .header-clock p {
    margin: 0;
    color: var(--bs-text);
    font-size: 16px;
    font-weight: 700;
  }

  #static-clockinout-tech-modal .management-attd {
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: #475569;
    box-shadow: none;
    z-index: 2;
  }

  #static-clockinout-tech-modal .title-descriptions > i {
    justify-self: center;
    font-size: 16px;
  }

  #static-clockinout-tech-modal .title-descriptions .descriptions {
    min-width: 0;
    gap: 1px;
  }

  #static-clockinout-tech-modal .title-descriptions .descriptions > span {
    gap: 6px;
    font-size: 12px;
    line-height: 18px;
  }

  #static-clockinout-tech-modal .title-descriptions .descriptions > small {
    max-width: 100%;
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    line-height: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #static-clockinout-tech-modal .title-descriptions .btn.btn-clock {
    min-width: 88px;
    height: 36px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  #static-clockinout-tech-modal .btn-toggle-section {
    display: none;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    height: 100%;
    padding: 10px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bs-body-bg);
    overscroll-behavior: contain;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech .wrap-tech-detail {
    width: 100%;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech div.tech-detail {
    box-sizing: border-box;
    width: 100%;
    height: 72px !important;
    min-height: 72px;
    padding: 10px 10px 10px 12px;
    border-width: 2px !important;
    border-color: color-mix(in srgb, var(--tech-color, #f05a7e) 82%, #fff) !important;
    border-radius: 10px;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech .tech-card-content {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 96px;
    grid-template-rows: 24px 20px;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech .tech-avatar-container {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech .tech-avatar-wrapper {
    width: 46px;
    height: 46px;
    border: 2px solid var(--tech-color, #f05a7e);
    box-shadow: none;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech .tech-name {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--bs-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: initial;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech .attendance-tech-status {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 4px;
    height: 19px;
    padding: 1px 6px;
    border: 1px solid #a7e3c5;
    border-radius: 5px;
    background: #ecfdf5;
    color: #047857;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
  }

  #static-clockinout-tech-modal
    div.form-list-tech-append.management-tech
    .attendance-tech-status.busy {
    border-color: #bfd0ff;
    background: #eff4ff;
    color: #1d4ed8;
  }

  #static-clockinout-tech-modal div.form-list-tech-append.management-tech .tech-name::after {
    display: none;
    content: none;
  }

  #static-clockinout-tech-modal
    div.form-list-tech-append.management-tech
    .tech-card-content
    .btn.btn-clock {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-content: center;
    width: 96px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
  }

}

dialog.tech-gallery-confirm {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 24px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #263238;
}
.tech-gallery-confirm::backdrop { background: rgba(0, 0, 0, .55); }
.tech-gallery-confirm h2 { margin: 0 0 12px; font-size: 18px; }
.tech-gallery-confirm p { margin: 0 0 24px; font-size: 14px; }
.tech-gallery-confirm form > div { display: flex; justify-content: flex-end; gap: 8px; }
.tech-gallery-confirm button {
  width: auto;
  height: auto;
  padding: 8px 16px;
  border: 1px solid #d8dde0;
  background: #fff;
  color: #263238;
  font-size: 14px;
}
.tech-gallery-confirm button.tech-gallery-confirm-remove { background: #dc2626; border-color: #dc2626; color: #fff; }
dialog.tech-gallery-confirm button:hover,
dialog.tech-gallery-confirm button:focus-visible { background: #edf1f3; color: #263238; }
dialog.tech-gallery-confirm button.tech-gallery-confirm-remove:hover,
dialog.tech-gallery-confirm button.tech-gallery-confirm-remove:focus-visible { background: #b91c1c; color: #fff; }
#tech-detail-panel .tech-detail-gallery-item { position: relative; flex: 0 0 var(--tech-gallery-size, 64px); width: var(--tech-gallery-size, 64px); }
#tech-detail-panel .tech-detail-gallery-item .tech-detail-gallery-tile { width: 100%; }
#tech-detail-panel .tech-detail-gallery-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
#tech-detail-panel .tech-detail-gallery-item:hover .tech-detail-gallery-remove,
#tech-detail-panel .tech-detail-gallery-item:focus-within .tech-detail-gallery-remove { opacity: 1; pointer-events: auto; }
#tech-detail-panel .tech-detail-gallery-remove:hover { background: #b91c1c; color: #fff; }
#tech-detail-panel .tech-detail-gallery-remove:disabled { opacity: .4; cursor: wait; }
#tech-detail-gallery-error { color: #b91c1c; margin: 8px 0; font-size: 13px; }
@media (hover: none) { #tech-detail-panel .tech-detail-gallery-remove { opacity: 1; pointer-events: auto; } }

/* Technician detail panel follows the active POS dark palette. */
html[data-pos-appearance="dark"] #tech-detail-panel {
  --tech-panel-ink: var(--pos-text, #e5e7eb);
  --tech-panel-muted: var(--pos-muted, #a2adba);
  --tech-panel-border: var(--pos-border, #374151);
  --tech-panel-surface: var(--pos-canvas, #14191f);
  --tech-panel-accent: var(--pos-primary, #7bd46a);
  color: var(--tech-panel-ink);
  color-scheme: dark;
}
html[data-pos-appearance="dark"] #tech-detail-panel :is(
  .tech-detail-panel-content, .tech-detail-header, .tech-detail-section,
  .tech-detail-header-action > i, .tech-detail-change-photo > i,
  .tech-detail-gallery-upload-label, .tech-detail-panel-close,
  .tech-detail-panel-close > i, .tech-detail-avatar,
  .tech-detail-avatar .track-img-error-box
) {
  background: var(--pos-surface, #1b222b);
  border-color: var(--tech-panel-border);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-waiting-section {
  background: transparent;
}
html[data-pos-appearance="dark"] #tech-detail-panel :is(
  .tech-detail-header-action, .tech-detail-change-photo,
  .tech-detail-gallery-upload, .tech-detail-panel-close,
  .tech-detail-section-header i, .tech-detail-time i
) {
  color: var(--tech-panel-muted);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-detail-gallery-tile {
  background: var(--pos-surface2, #252e38);
  border-color: var(--tech-panel-border);
  color: var(--tech-panel-muted);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-action-btn:not(.tech-action-add-ticket) {
  background: var(--pos-surface, #1b222b);
  border-color: var(--tech-panel-border);
  color: var(--tech-panel-ink);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-action-add-ticket {
  background: var(--pos-primary-fill, #30981c);
  border-color: var(--pos-primary-fill, #30981c);
  color: var(--pos-primary-fill-ink, #fff);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-action-add-ticket:hover {
  background: var(--pos-primary-fill-hover, #278218);
  border-color: var(--pos-primary-fill-hover, #278218);
}
html[data-pos-appearance="dark"] #tech-detail-panel :is(
  .tech-detail-header-action:hover > i, .tech-detail-change-photo:hover > i,
  .tech-detail-gallery-upload:hover .tech-detail-gallery-upload-label,
  .tech-action-btn:not(.tech-action-add-ticket):hover, .tech-detail-panel-close:hover
) {
  background: var(--pos-surface2, #252e38);
  color: var(--tech-panel-ink);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-detail-header-action--danger,
html[data-pos-appearance="dark"] #tech-detail-panel .tech-detail-header-action--danger:hover > i {
  color: var(--pos-danger-ink, #f87171);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-detail-header-action--danger:hover > i {
  background: var(--pos-danger-soft, #3c2025);
  border-color: var(--pos-danger-ink, #f87171);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-panel-index {
  border-color: var(--pos-surface, #1b222b);
}
html[data-pos-appearance="dark"] #tech-detail-panel .tech-detail-panel-body::-webkit-scrollbar-thumb {
  background: var(--tech-panel-border);
}