/* Tixpro 1.1.6 — targeted product changes without redesigning the interface. */
:root {
  --tixpro-font-sans:
    "Jakarta Sans", "Plus Jakarta Sans", Inter, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tixpro-page-heading-size: clamp(20px, 1.45vw, 26px);
  --tixpro-page-subtitle-size: 15px;
  --tixpro-section-heading-size: 22px;
  --tixpro-card-heading-size: 16px;
  --tixpro-body-size: 13px;
  --tixpro-caption-size: 11px;
}

/* 1.0.89 - Give the public ticketing event banner more vertical room. */
.ticket-store-shell .ticket-public-banner {
  min-height: 235px !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-public-banner {
    min-height: 220px !important;
  }
}

/* 1.0.7 - Final media/session polish: taller public banner and smaller operator scanner. */
.ticket-store-shell .ticket-public-banner {
  min-height: 270px !important;
}

.ticket-store-shell .ticket-public-banner-video {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.operator-app .scanner-frame {
  transform: scale(0.92) !important;
  transform-origin: center center !important;
  max-height: calc(100svh - 285px) !important;
}

.operator-image-upload > .operator-preview-stage {
  min-height: 230px !important;
  border: 1.5px solid rgba(205, 255, 97, 0.34) !important;
  background-color: #061f15 !important;
  box-shadow:
    inset 0 0 0 1px rgba(205, 255, 97, 0.1),
    0 18px 38px rgba(4, 20, 15, 0.2) !important;
}

.operator-preview-phone {
  width: min(72%, 340px) !important;
  height: min(72%, 188px) !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: #f8fbff !important;
  border-radius: 0 !important;
}

.operator-preview-phone::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(205, 255, 97, 0.58),
    transparent
  );
  box-shadow: 0 0 18px rgba(205, 255, 97, 0.34);
}

@media (max-width: 1100px) {
  .operator-app .scanner-frame {
    max-height: min(54svh, 580px) !important;
  }
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-public-banner {
    min-height: 250px !important;
  }

  .operator-app .scanner-frame {
    transform: scale(0.94) !important;
  }
}

html,
body,
button,
input,
select,
textarea,
table,
.admin-app,
.login-shell,
.operator-shell,
.ticket-public-page {
  font-family: var(--tixpro-font-sans) !important;
}

.admin-app {
  --tixpro-page-heading-size: clamp(20px, 1.45vw, 26px);
  --tixpro-page-subtitle-size: 15px;
  --tixpro-section-heading-size: 22px;
  --tixpro-card-heading-size: 16px;
  --tixpro-body-size: 13px;
  --tixpro-caption-size: 11px;
}

.admin-app[data-text-size="small"] {
  --tixpro-page-heading-size: clamp(18px, 1.25vw, 23px);
  --tixpro-page-subtitle-size: 14px;
  --tixpro-section-heading-size: 20px;
  --tixpro-card-heading-size: 15px;
  --tixpro-body-size: 12px;
  --tixpro-caption-size: 10px;
}

.admin-app[data-text-size="large"] {
  --tixpro-page-heading-size: clamp(22px, 1.7vw, 30px);
  --tixpro-page-subtitle-size: 16px;
  --tixpro-section-heading-size: 24px;
  --tixpro-card-heading-size: 18px;
  --tixpro-body-size: 14px;
  --tixpro-caption-size: 12px;
}

.admin-app
  :is(
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .ticket-dashboard-view > h1
  ) {
  font-size: var(--tixpro-page-heading-size) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-weight: 400 !important;
}

.admin-app :is(.page-title p, .page-heading-row p, .campaign-page-lead) {
  font-size: var(--tixpro-page-subtitle-size) !important;
  line-height: 1.55 !important;
}

.admin-app
  :is(
    .overview-section-heading h3,
    .ticket-report-toolbar strong,
    .report-card-title,
    .panel-title
  ) {
  font-size: var(--tixpro-section-heading-size);
}

.admin-app :is(p, label, td, th, input, select, textarea, button) {
  font-size: var(--tixpro-body-size);
}

.admin-app :is(small, .eyebrow, .settings-tab-note) {
  font-size: var(--tixpro-caption-size);
}
.event-builder-dialog .ticket-add-category {
  color: #fff;
  background: #007cff;
  border-color: #007cff;
}

.event-capacity-title strong,
.event-capacity-editor > div:first-child {
  font-size: 13px;
}

.event-banner-preview {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.event-banner-builder:not(.is-editing)
  .event-banner-controls
  > :not(.event-banner-upload-button) {
  display: none;
}

.event-banner-builder.is-editing {
  position: fixed;
  z-index: 130;
  inset: 50% auto auto 50%;
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 30px 90px rgba(3, 20, 48, 0.38);
}

.event-banner-builder.is-editing::before {
  content: "Editor banner";
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 3;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}

.event-banner-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.event-banner-editor-actions button {
  min-height: 38px;
  cursor: pointer;
  color: #24405f;
  background: #fff;
  border: 1px solid #d5e2f1;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 850;
}

.event-banner-editor-actions button:last-child {
  color: #fff;
  background: #007cff;
  border-color: #007cff;
}

.event-builder-dialog label > small {
  color: #758298;
  margin-top: -3px;
  font-size: 10px;
}

.logout-confirm-dialog > div button:last-child {
  color: #fff;
  background: #007cff;
  border-color: #007cff;
}

.notification-shell {
  position: relative;
}

.toast {
  top: 24px !important;
  right: 24px !important;
  bottom: auto !important;
  transform: translateY(-12px) !important;
}

.toast.toast-visible {
  transform: translateY(0) !important;
}

.scan-result-backdrop {
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(0, 124, 255, 0.18),
      transparent 42%
    ),
    rgba(4, 15, 32, 0.68) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  pointer-events: auto !important;
}

.scan-result-popup {
  position: relative !important;
  width: min(620px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 48px) !important;
  margin: 0 !important;
  overflow: auto !important;
  pointer-events: auto !important;
  text-align: center !important;
  isolation: isolate !important;
  color: #eaf4ff !important;
  background: linear-gradient(
    145deg,
    rgba(12, 32, 58, 0.98),
    rgba(5, 17, 35, 0.98)
  ) !important;
  border: 1px solid rgba(139, 180, 255, 0.3) !important;
  border-radius: 28px !important;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.scan-result-popup.result-success {
  border-color: rgba(60, 230, 150, 0.42) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.24), transparent 44%),
    linear-gradient(145deg, rgba(10, 48, 43, 0.98), rgba(5, 17, 35, 0.98)) !important;
}

.scan-result-popup.result-error,
.scan-result-popup.result-duplicate {
  border-color: rgba(248, 113, 113, 0.42) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.24), transparent 44%),
    linear-gradient(145deg, rgba(56, 20, 32, 0.98), rgba(5, 17, 35, 0.98)) !important;
}

.scan-result-popup .scan-popup-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  color: #eaf4ff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(203, 218, 240, 0.22) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
}

.operator-stat-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.operator-stat-grid article {
  min-width: 0;
}

.scan-result-popup .result-content {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 34px !important;
}

.scan-result-popup .result-icon {
  display: grid !important;
  place-items: center !important;
  width: 72px !important;
  height: 72px !important;
  color: #fff !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

.scan-result-popup.result-success .result-icon {
  background: linear-gradient(135deg, #22c55e, #10b981) !important;
}

.scan-result-popup.result-error .result-icon,
.scan-result-popup.result-duplicate .result-icon {
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
}

.scan-result-popup .result-kicker {
  color: #b9d5ff !important;
  letter-spacing: 0.16em !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
}

.scan-result-popup.result-success .result-kicker {
  color: #bbf7d0 !important;
}

.scan-result-popup.result-error .result-kicker,
.scan-result-popup.result-duplicate .result-kicker {
  color: #fecaca !important;
}

.scan-result-popup h2 {
  color: #fff !important;
  font-size: clamp(34px, 4.4vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  margin: 0 !important;
}

.scan-result-popup .result-detail {
  color: #f8fbff !important;
  font-size: 23px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  margin: 2px 0 0 !important;
}

.scan-result-popup .result-person {
  width: min(100%, 430px) !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px !important;
  text-align: left !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(203, 218, 240, 0.16) !important;
  border-radius: 18px !important;
}

.scan-result-popup .result-person > span {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  color: #08213f !important;
  background: #eaf4ff !important;
  border-radius: 18px !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.scan-result-popup .result-person strong {
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
}

.scan-result-popup .result-person small {
  color: #b7c9dd !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.scan-result-popup .result-ticket-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.scan-result-popup .result-ticket-grid > div {
  min-width: 0 !important;
  padding: 13px !important;
  text-align: left !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(203, 218, 240, 0.14) !important;
  border-radius: 16px !important;
}

.scan-result-popup .result-ticket-grid span {
  display: block !important;
  color: #9fb3c9 !important;
  margin-bottom: 5px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 850 !important;
}

.scan-result-popup .result-ticket-grid strong {
  color: #fff !important;
  display: block !important;
  overflow-wrap: anywhere !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

.scan-result-popup .result-auto-close {
  color: #a9bfd8 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.scan-result-popup .result-content > button {
  min-height: 48px !important;
  padding: 0 24px !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  color: #08213f !important;
  background: #eaf4ff !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
}

.operator-event strong {
  font-size: clamp(18px, 1.7vw, 28px) !important;
  line-height: 1.12 !important;
}

.operator-clock {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

.operator-clock time {
  font-size: 20px !important;
  line-height: 1 !important;
}

.operator-clock > strong {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.operator-connection {
  font-size: 14px !important;
  line-height: 1 !important;
}

.operator-connection svg {
  width: 22px !important;
  height: 22px !important;
}

.operator-menu-button svg {
  width: 25px !important;
  height: 25px !important;
}

.operator-menu-panel {
  font-size: 15px !important;
}

.operator-menu-panel button {
  font-size: 15px !important;
}

.operator-menu-panel button > svg {
  width: 23px !important;
  height: 23px !important;
}

.operator-menu-panel strong {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.operator-menu-panel small {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.operator-menu-panel .eyebrow {
  font-size: 12px !important;
}

.operator-menu-profile > span:first-child {
  font-size: 16px !important;
}

.operator-menu-profile strong {
  font-size: 17px !important;
}

.operator-last-participant .recent-check svg {
  width: 18px !important;
  height: 18px !important;
}

.scanner-divider span,
.manual-scan input,
.manual-scan button,
.manual-scan-toggle,
.stop-camera,
.camera-empty strong,
.camera-empty small,
.camera-empty button {
  font-size: 16px !important;
}

.operator-stat-grid article small {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.operator-stat-grid article strong {
  font-size: clamp(28px, 3vw, 44px) !important;
  line-height: 1 !important;
}

.operator-stat-grid article em {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.operator-stat-grid article > span svg {
  width: 26px !important;
  height: 26px !important;
}

.scan-fiesta {
  position: absolute;
  inset: -42px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.scan-fiesta span {
  position: absolute;
  width: 9px;
  height: 18px;
  border-radius: 3px;
  background: #2fdcff;
  opacity: 0;
  animation: scan-fiesta-burst 1.35s ease-out infinite;
}

.scan-fiesta span:nth-child(4n + 1) {
  background: #00e28b;
}

.scan-fiesta span:nth-child(4n + 2) {
  background: #ffd43b;
}

.scan-fiesta span:nth-child(4n + 3) {
  background: #ff6b9a;
}

.scan-fiesta span:nth-child(1) {
  left: 7%;
  top: 6%;
  animation-delay: 0s;
}
.scan-fiesta span:nth-child(2) {
  left: 18%;
  top: 1%;
  animation-delay: 0.08s;
}
.scan-fiesta span:nth-child(3) {
  left: 34%;
  top: 4%;
  animation-delay: 0.16s;
}
.scan-fiesta span:nth-child(4) {
  left: 52%;
  top: 1%;
  animation-delay: 0.24s;
}
.scan-fiesta span:nth-child(5) {
  left: 70%;
  top: 5%;
  animation-delay: 0.32s;
}
.scan-fiesta span:nth-child(6) {
  left: 88%;
  top: 8%;
  animation-delay: 0.4s;
}
.scan-fiesta span:nth-child(7) {
  right: 1%;
  top: 24%;
  animation-delay: 0.1s;
}
.scan-fiesta span:nth-child(8) {
  right: 4%;
  top: 46%;
  animation-delay: 0.2s;
}
.scan-fiesta span:nth-child(9) {
  right: 2%;
  top: 68%;
  animation-delay: 0.3s;
}
.scan-fiesta span:nth-child(10) {
  right: 10%;
  bottom: 7%;
  animation-delay: 0.4s;
}
.scan-fiesta span:nth-child(11) {
  left: 78%;
  bottom: 1%;
  animation-delay: 0.48s;
}
.scan-fiesta span:nth-child(12) {
  left: 62%;
  bottom: 5%;
  animation-delay: 0.56s;
}
.scan-fiesta span:nth-child(13) {
  left: 45%;
  bottom: 1%;
  animation-delay: 0.64s;
}
.scan-fiesta span:nth-child(14) {
  left: 29%;
  bottom: 4%;
  animation-delay: 0.72s;
}
.scan-fiesta span:nth-child(15) {
  left: 12%;
  bottom: 6%;
  animation-delay: 0.8s;
}
.scan-fiesta span:nth-child(16) {
  left: 2%;
  top: 72%;
  animation-delay: 0.18s;
}
.scan-fiesta span:nth-child(17) {
  left: 4%;
  top: 52%;
  animation-delay: 0.28s;
}
.scan-fiesta span:nth-child(18) {
  left: 2%;
  top: 28%;
  animation-delay: 0.38s;
}
.scan-fiesta span:nth-child(19) {
  left: 22%;
  top: 15%;
  animation-delay: 0.48s;
}
.scan-fiesta span:nth-child(20) {
  right: 22%;
  top: 16%;
  animation-delay: 0.58s;
}
.scan-fiesta span:nth-child(21) {
  right: 18%;
  bottom: 18%;
  animation-delay: 0.68s;
}
.scan-fiesta span:nth-child(22) {
  left: 18%;
  bottom: 18%;
  animation-delay: 0.78s;
}
.scan-fiesta span:nth-child(23) {
  left: 49%;
  top: 10%;
  animation-delay: 0.88s;
}
.scan-fiesta span:nth-child(24) {
  left: 50%;
  bottom: 10%;
  animation-delay: 0.98s;
}
@keyframes scan-fiesta-burst {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 34px, 0) rotate(210deg) scale(1);
  }
}

.notification-popover {
  position: absolute;
  z-index: 90;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  max-height: 480px;
  overflow: auto;
  padding: 12px;
  color: #1d3353;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #d8e4f1;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(8, 34, 70, 0.22);
}

.notification-popover > strong {
  display: block;
  margin: 3px 4px 10px;
  font-size: 13px;
}

.notification-popover article {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 4px;
  border-top: 1px solid #e8eef5;
}

.notification-popover article b {
  font-size: 11px;
}

.notification-popover article span,
.notification-popover article small,
.notification-popover p {
  color: #6f7f94;
  font-size: 9px;
}

.settings-top-tabs {
  overflow-x: auto;
}

.participant-field-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.participant-field-checklist label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  background: #f7faff;
  border: 1px solid #dfe8f3;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.participant-field-checklist input {
  width: 17px;
  height: 17px;
  accent-color: #007cff;
}

.participant-quantity-control {
  display: grid;
  grid-template-columns: 52px minmax(90px, 1fr) 52px;
  align-items: stretch;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid #dbe4df;
  border-radius: 14px;
  background: #fff;
}

.participant-quantity-control button,
.participant-quantity-control input {
  border: 0;
  background: transparent;
  color: #1a2b22;
  font: inherit;
  font-weight: 800;
}

.participant-quantity-control button {
  cursor: pointer;
  font-size: 21px;
}

.participant-quantity-control button:hover {
  background: rgba(0, 124, 255, 0.08);
}

.admin-app[data-theme-mode="night"] .participant-quantity-control button {
  color: #ffffff !important;
}

.participant-quantity-control input {
  width: 100%;
  text-align: center;
  border-inline: 1px solid #dbe4df;
  font-size: 17px;
}

.participant-quantity-control input:focus {
  outline: 2px solid rgba(0, 124, 255, 0.24);
  outline-offset: -2px;
}

.gate-event-summary + .gate-event-summary {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e1e8f1;
}

.gate-event-summary ul {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  color: #65758a;
  font-size: 10px;
}

.ticket-chart-tabs {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.ticket-chart-tabs button {
  cursor: pointer;
  padding: 7px 11px;
  color: #52657e;
  background: #f5f8fc;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
}

.ticket-chart-tabs button.is-active {
  color: #fff;
  background: #007cff;
  border-color: #007cff;
}

.ticket-qr-code {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.qris-unavailable {
  max-width: 260px;
  padding: 16px;
  color: #8a5b13;
  background: #fff7e6;
  border: 1px solid #f2d29a;
  border-radius: 10px;
  font-size: 10px;
  text-align: center;
}

.admin-app[data-theme-mode="night"]
  :is(
    .panel,
    .metric-card,
    .reservation-summary-grid article,
    .ticket-catalog-toolbar,
    .ticket-report-toolbar,
    .ticket-report-summary article,
    .toolbar-card,
    .event-card,
    .participant-summary article,
    .settings-form-card,
    .notification-popover,
    .ticket-admin-card
  ) {
  color: #dce8f8 !important;
  background: #14243a !important;
  border-color: #2d405a !important;
}

.admin-app[data-theme-mode="night"]
  :is(input, select, textarea, .data-table td, .data-table th) {
  color: #dce8f8 !important;
  background: #1a2d46 !important;
  border-color: #354b67 !important;
}

.admin-app[data-theme-mode="night"] :is(h1, h2, h3, strong, b) {
  color: #f0f6ff;
}

.admin-app[data-theme-mode="night"] :is(p, small, span, label, em) {
  color: #aebed2;
}

@media (max-width: 620px) {
  .toast {
    top: 16px !important;
    right: 16px !important;
    left: 16px !important;
    max-width: none !important;
  }

  .scan-result-backdrop {
    display: grid !important;
    place-items: center !important;
    padding: 16px !important;
  }

  .scan-result-popup {
    width: 100% !important;
  }

  .notification-popover {
    position: fixed;
    top: 72px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* Event date and time controls keep the existing form layout, with clearer input mechanics. */
.event-date-control,
.event-time-control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #233329;
  background: #fff;
  border: 1px solid #d7e0dc;
  border-radius: 9px;
}

.event-date-control:focus-within,
.event-time-control:focus-within {
  border-color: #007cff;
  box-shadow: 0 0 0 3px rgba(0, 124, 255, 0.12);
}

.event-date-control .event-date-display {
  width: 100%;
  height: 42px;
  padding-right: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.event-date-control > button {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 42px;
  color: #60748a;
  cursor: pointer;
  border-left: 1px solid #e2e8e5;
}

.event-native-date-input {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.event-time-control {
  display: inline-grid;
  grid-template-columns: 64px 12px 64px;
  justify-content: start;
  gap: 0;
  width: 100%;
  padding: 0 8px;
}

.event-time-control input[type="number"] {
  width: 64px;
  min-width: 0;
  height: 40px;
  padding: 0 5px;
  text-align: center;
  background: transparent;
  border: 0;
}

.event-time-control > b {
  color: #566a7e;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.event-time-control select {
  width: 76px;
  height: 34px;
  margin-left: auto;
  padding: 0 7px;
  background: #f5f8fb;
  border: 1px solid #dce4ea;
  border-radius: 7px;
}

/* A single banner surface opens the file picker; editing remains a focused crop modal. */
.event-banner-builder:not(.is-editing) {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.event-banner-builder:not(.is-editing) .event-banner-controls {
  display: none;
}

.event-banner-builder:not(.is-editing) .event-banner-preview {
  width: 100%;
  min-height: 210px;
  color: #879298;
  background: #fbfcfc;
  border: 2px dashed #b9c3c7;
  border-radius: 13px;
  cursor: pointer;
}

.event-banner-builder:not(.is-editing) .event-banner-preview.is-empty {
  gap: 18px;
}

.event-banner-builder:not(.is-editing) .event-banner-preview.is-empty > div {
  position: static;
  color: #919ba0;
  text-align: center;
}

.event-banner-builder:not(.is-editing) .event-banner-preview strong {
  color: inherit;
  font-size: 15px;
  font-weight: 700;
}

.event-banner-builder:not(.is-editing)
  .event-banner-preview.has-image
  > div:not(.event-banner-image-layer) {
  z-index: 2;
  align-self: center;
  padding: 7px 12px;
  color: #fff;
  background: rgba(4, 24, 58, 0.72);
  border-radius: 999px;
}

.event-banner-preview.has-image::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(4, 24, 58, 0.82),
    rgba(4, 24, 58, 0.1)
  );
}

.event-banner-builder.is-editing .event-banner-preview.has-image::before {
  content: none;
}

.event-banner-preview .event-banner-image-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  transition:
    transform 0.16s ease,
    object-position 0.16s ease;
}

.event-banner-builder.is-editing
  .event-banner-preview
  .event-banner-image-layer {
  object-fit: contain;
  transform: none !important;
}

.event-banner-builder.is-editing {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(760px, calc(100vw - 32px));
  padding: 76px 26px 24px;
  border: 1px solid #e0e5e8;
  border-radius: 17px;
  box-shadow:
    0 0 0 100vmax rgba(9, 18, 28, 0.52),
    0 30px 90px rgba(3, 20, 48, 0.38);
}

.event-banner-builder.is-editing::before {
  content: "Potong Gambar";
  top: 22px;
  left: 28px;
  color: #20262b;
  font-size: 22px;
  font-weight: 850;
}

.event-banner-builder.is-editing .event-banner-preview {
  min-height: 390px;
  border-radius: 11px;
}

.event-banner-builder.is-editing
  .event-banner-preview
  > div:not(.event-banner-image-layer) {
  display: none;
}

.event-banner-builder.is-editing .event-banner-preview::after {
  content: none !important;
}

.event-banner-builder.is-editing .event-banner-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.event-banner-builder.is-editing .event-banner-upload-button {
  display: none !important;
}

.event-crop-close {
  display: none;
}

.event-banner-builder.is-editing .event-crop-close {
  position: absolute;
  top: 19px;
  right: 22px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #323b40;
  cursor: pointer;
  border-radius: 9px;
}

.event-banner-builder.is-editing .event-rotate-actions,
.event-banner-builder.is-editing .event-banner-editor-actions {
  grid-column: 1 / -1;
}

.event-banner-builder.is-editing .event-banner-editor-actions {
  display: flex;
  justify-content: flex-end;
}

.event-banner-builder.is-editing .event-banner-editor-actions button {
  min-width: 110px;
}

.participant-list-title {
  margin: 7px 0 9px;
  font-family:
    "Plus Jakarta Sans", "Jakarta Sans", Inter, system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 26px) !important;
  letter-spacing: -0.025em;
}

.blast-script-field {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: column;
  gap: 14px !important;
  margin-top: 18px !important;
  clear: both;
}

.blast-fullscreen-modal .blast-modal-form {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.blast-fullscreen-modal .blast-modal-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.28fr);
  gap: 22px 28px !important;
  align-items: stretch;
  height: auto !important;
  min-height: 368px !important;
  margin-bottom: 18px !important;
}

.blast-fullscreen-modal .blast-script-field {
  position: relative;
  z-index: 1;
  margin-top: 12px !important;
  padding-top: 34px !important;
}

.blast-fullscreen-modal .blast-script-field::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: #d9e5f2;
}

.blast-fullscreen-modal .blast-participants-card,
.blast-fullscreen-modal .blast-config-card {
  margin-bottom: 0 !important;
}

/* Extend the proven ticket-report night palette to every dashboard card and table. */
.admin-app[data-theme-mode="night"]
  :is(
    .admin-content [class*="-card"],
    .admin-content [class*="-panel"],
    .admin-content [class*="-toolbar"],
    .admin-content .active-filters,
    .admin-content .table-scroll,
    .admin-content .event-capacity-editor,
    .admin-content .ticket-price-editor,
    .settings-top-tabs,
    .modal-card,
    .blast-fullscreen-modal,
    .blast-config-card,
    .blast-participants-card,
    .blast-script-field,
    .operator-auth-dialog
  ) {
  color: #dce8f8 !important;
  background: #14243a !important;
  border-color: #2d405a !important;
}

.admin-app[data-theme-mode="night"] .settings-top-tabs button {
  color: #aebed2 !important;
  background: transparent !important;
}

.admin-app[data-theme-mode="night"] .settings-top-tabs button.is-active {
  color: #eef6ff !important;
  background: #203650 !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    table,
    thead,
    tbody,
    tr,
    th,
    td,
    .event-capacity-editor > div,
    .ticket-price-editor > div,
    .ticket-admin-prices > div,
    .ticket-payment-methods > div,
    .ticket-category-performance > div,
    .participant-field-checklist label,
    .event-date-control,
    .event-time-control
  ) {
  color: #dce8f8 !important;
  background: #1a2d46 !important;
  border-color: #354b67 !important;
}

.admin-app[data-theme-mode="night"] :is(input, select, textarea) {
  color-scheme: dark;
}

.admin-app[data-theme-mode="night"] :is(input, textarea)::placeholder {
  color: #7f94ad !important;
}

.admin-app[data-theme-mode="night"] .event-time-control select {
  background: #203650 !important;
}

@media (max-width: 620px) {
  .event-time-control input[type="number"] {
    width: 54px;
  }

  .event-banner-builder.is-editing {
    padding: 68px 16px 18px;
  }

  .event-banner-builder.is-editing .event-banner-preview {
    min-height: 260px;
  }

  .event-banner-builder.is-editing .event-banner-controls {
    grid-template-columns: 1fr;
  }

  .event-banner-builder.is-editing .event-rotate-actions,
  .event-banner-builder.is-editing .event-banner-editor-actions {
    grid-column: 1;
  }
}

.organization-password-grid {
  margin-top: 18px;
}

.organization-logo-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 16px 0 20px;
  padding: 16px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94),
    rgba(240, 248, 255, 0.86)
  );
  border: 1px solid #dbe8f5;
  border-radius: 18px;
}

.organization-logo-preview {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  overflow: hidden;
  color: #58708d;
  background: #f3f7fb;
  border: 1px dashed #bfd0e3;
  border-radius: 999px;
}

.organization-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  border-radius: 999px;
  background: #fff;
}

.organization-logo-preview svg {
  width: 44px;
  height: 44px;
}

.organization-logo-preview span,
.organization-logo-card > div:last-child {
  display: grid;
  gap: 7px;
}

.organization-logo-preview small,
.organization-logo-card small {
  color: #7a8aa0;
  font-size: 11px;
}

.organization-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
}

.organization-logo-actions .secondary-button {
  width: auto;
  min-width: 134px;
  min-height: 42px;
  padding: 0 18px;
}

.organization-password-dialog .admin-password-form {
  gap: 14px;
}

.password-reset-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin: 0;
  color: #17243a;
  font-size: 12px;
  font-weight: 650;
}

.password-reset-link {
  padding: 0;
  color: #007cff;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.password-reset-link:hover {
  text-decoration: underline;
}

.password-reset-link:disabled {
  cursor: progress;
  opacity: 0.62;
}

.organization-settings-actions {
  gap: 18px !important;
}

.organization-logo-crop-backdrop {
  align-items: center;
  justify-content: center;
}

.organization-logo-crop-dialog {
  width: min(520px, calc(100vw - 32px));
}

.organization-logo-crop-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    linear-gradient(45deg, #eef4fb 25%, transparent 25%),
    linear-gradient(-45deg, #eef4fb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef4fb 75%),
    linear-gradient(-45deg, transparent 75%, #eef4fb 75%);
  background-color: #f8fbff;
  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0;
  background-size: 24px 24px;
  border: 1px solid #d9e6f5;
  border-radius: 22px;
}

.organization-logo-crop-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.organization-logo-crop-frame {
  position: absolute;
  cursor: move;
  border: 2px dashed #fff;
  border-radius: 999px;
  box-shadow:
    0 0 0 999px rgba(11, 31, 55, 0.45),
    0 12px 36px rgba(3, 23, 55, 0.18),
    inset 0 0 0 1px rgba(0, 124, 255, 0.58);
  touch-action: none;
}

.organization-logo-crop-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 2px solid #007cff;
  border-radius: 999px;
  box-shadow: 0 4px 13px rgba(0, 64, 140, 0.25);
  touch-action: none;
}

.organization-logo-crop-handle.nw {
  top: -9px;
  left: -9px;
  cursor: nwse-resize;
}

.organization-logo-crop-handle.ne {
  top: -9px;
  right: -9px;
  cursor: nesw-resize;
}

.organization-logo-crop-handle.sw {
  bottom: -9px;
  left: -9px;
  cursor: nesw-resize;
}

.organization-logo-crop-handle.se {
  right: -9px;
  bottom: -9px;
  cursor: nwse-resize;
}

.profile-avatar {
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  border-radius: 999px;
  background: #fff;
}

.organization-password-grid label,
.smtp-settings-card label,
.operator-config-row label {
  gap: 8px;
}

.operator-management {
  padding: 20px;
}

.operator-management-heading {
  align-items: flex-start;
  gap: 16px;
}

.operator-management-heading .settings-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  transform: none;
}

.operator-management-heading h2 {
  margin-bottom: 5px;
  font-size: 18px;
}

.operator-management-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.operator-add-button {
  align-self: center;
  margin-top: 0;
  min-width: 168px;
}

.operator-add-button:disabled {
  color: #8090a4;
  background: #eef2f6;
  border-color: #d8e1eb;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}

.event-loading-panel {
  padding: 22px;
  color: #6e7d90;
  font-size: 14px;
}

.operator-account-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.operator-config-row {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.72fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
  background: #f7faff;
  border: 1px solid #dfe8f3;
  border-radius: 14px;
}

.operator-config-row-new {
  grid-template-columns: minmax(420px, 1fr);
}

.operator-config-row-new .operator-primary-fields {
  max-width: none;
  grid-template-columns:
    minmax(180px, 1fr) minmax(180px, 1fr) minmax(130px, 0.72fr)
    46px;
}

.operator-inline-new-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.operator-inline-new-fields {
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr) minmax(180px, 1fr) minmax(130px, 0.72fr)
    46px;
  gap: 12px;
  align-items: center;
  padding-top: 2px;
}

.operator-inline-new-fields input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: inherit;
  background: #fff;
  border: 1px solid #d9e3ef;
  border-radius: 9px;
}

.operator-inline-new-fields input::placeholder {
  color: #8fa0b5;
}

.operator-management-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}

.operator-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.operator-footer-actions .secondary-button,
.operator-footer-actions .primary-button {
  min-width: 118px;
}

.operator-primary-fields {
  grid-template-columns:
    minmax(180px, 1fr) minmax(180px, 1fr) minmax(130px, 0.72fr)
    46px;
  align-items: end;
}

.operator-primary-fields .operator-pin-field {
  grid-column: auto;
  max-width: none;
}

.operator-primary-fields,
.operator-pin-media {
  display: grid;
  gap: 12px;
  align-content: start;
}

.operator-pin-media {
  align-content: start;
  grid-template-columns: 1fr;
  gap: 12px;
}

.operator-position-control {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.operator-position-control select {
  width: 132px;
  max-width: 46%;
  min-height: 38px;
  padding: 0 32px 0 12px;
}

.operator-scanner-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.operator-delete-button {
  min-height: 42px;
  padding: 0 14px;
  color: #b42318;
  background: #fff7f6;
  border: 1px solid #ffd7d2;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 800;
}

.operator-delete-icon-button {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  align-self: end;
  color: #dc2626 !important;
  background: #fff5f5 !important;
  border-color: #ffc9c9 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.08);
}

.operator-delete-icon-button svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.operator-delete-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.operator-delete-confirm-backdrop {
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 14, 26, 0.48);
  backdrop-filter: blur(10px);
}

.operator-delete-confirm-dialog {
  width: min(460px, calc(100vw - 36px));
  padding: 0;
  overflow: hidden;
  color: #17251e;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 252, 255, 0.94)
  );
  border: 1px solid rgba(209, 224, 239, 0.9);
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(4, 18, 38, 0.26);
}

.operator-delete-confirm-head {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  padding: 24px 24px 16px;
  align-items: start;
}

.operator-delete-confirm-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #dc2626;
  background: #fff2f2;
  border: 1px solid #ffd1d1;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.operator-delete-confirm-dialog h2 {
  margin: 0 0 7px;
  color: #17251e;
  font-size: 22px;
  letter-spacing: -0.035em;
}

.operator-delete-confirm-dialog p {
  margin: 0;
  color: #65748a;
  font-size: 13px;
  line-height: 1.55;
}

.operator-delete-confirm-dialog strong {
  color: #1d2f26;
  font-weight: 850;
}

.operator-delete-confirm-note {
  margin: 0 24px 20px !important;
  padding: 12px 14px;
  color: #8a4b16 !important;
  background: #fff8eb;
  border: 1px solid #ffe0aa;
  border-radius: 14px;
}

.operator-delete-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 24px 24px;
  background: rgba(246, 250, 255, 0.84);
  border-top: 1px solid #e6eef7;
}

.operator-delete-confirm-actions button {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 850;
}

.danger-confirm-button {
  color: #fff !important;
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 14px 26px rgba(239, 68, 68, 0.18);
}

.danger-confirm-button:hover:not(:disabled) {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.admin-app[data-theme-mode="night"] .operator-inline-new-fields input {
  color: #dce8f8;
  background: rgba(255, 255, 255, 0.045);
  border-color: #395471;
}

.admin-app[data-theme-mode="night"] .operator-delete-confirm-dialog {
  color: #eaf3ff;
  background: linear-gradient(
    145deg,
    rgba(20, 36, 58, 0.98),
    rgba(12, 29, 49, 0.96)
  );
  border-color: #35506e;
}

.admin-app[data-theme-mode="night"] .operator-delete-confirm-dialog h2,
.admin-app[data-theme-mode="night"] .operator-delete-confirm-dialog strong {
  color: #f2f7ff;
}

.admin-app[data-theme-mode="night"] .operator-delete-confirm-dialog p {
  color: #b7c6d8;
}

.admin-app[data-theme-mode="night"] .operator-delete-confirm-note {
  color: #ffd79b !important;
  background: rgba(255, 183, 77, 0.12);
  border-color: rgba(255, 213, 153, 0.28);
}

.admin-app[data-theme-mode="night"] .operator-delete-confirm-actions {
  background: rgba(8, 22, 39, 0.72);
  border-top-color: #304967;
}

.operator-image-upload input {
  display: none;
}

.operator-image-upload > span {
  display: grid;
  place-items: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
  min-height: 150px;
  color: #62748a;
  background: #fff;
  background-position: center;
  background-size: cover;
  border: 1.5px dashed #b9c7d8;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.operator-preview-phone,
.operator-preview-scanline {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.operator-preview-phone {
  width: min(72%, 340px);
  height: min(72%, 188px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #f7fbff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.operator-preview-phone::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#d8ff61, #d8ff61) left top / 54px 4px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left top / 4px 54px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right top / 54px 4px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right top / 4px 54px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left bottom / 54px 4px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left bottom / 4px 54px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right bottom / 54px 4px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right bottom / 4px 54px no-repeat;
  border-radius: 18px;
  filter: drop-shadow(0 0 14px rgba(216, 255, 97, 0.24));
}

.operator-preview-phone small {
  display: none;
}

.operator-preview-camera-mark {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 255, 97, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.operator-preview-camera-mark::before {
  content: "";
  width: 24px;
  height: 18px;
  border: 3px solid #d8ff61;
  border-radius: 6px;
  box-sizing: border-box;
}

.operator-preview-camera-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 3px solid #d8ff61;
  border-radius: 999px;
  box-sizing: border-box;
}

.operator-preview-phone strong {
  position: relative;
  z-index: 2;
  font-size: 17px;
  line-height: 1.2;
  opacity: 0.98;
}

.operator-preview-phone em {
  display: none;
}

.operator-preview-phone b {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #f8fbff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.operator-preview-phone b::before {
  content: "";
  width: 17px;
  height: 13px;
  border: 2.5px solid currentColor;
  border-radius: 4px;
  box-sizing: border-box;
}

.operator-preview-scanline {
  width: clamp(110px, 40%, 164px);
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 211, 238, 0.95),
    rgba(0, 124, 255, 0.95),
    transparent
  );
  border-radius: 99px;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.52);
}

.scanner-position-center .operator-preview-phone {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scanner-position-center .operator-preview-scanline {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scanner-position-top .operator-preview-phone {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.scanner-position-top .operator-preview-scanline {
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
}

.scanner-position-bottom .operator-preview-phone {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.scanner-position-bottom .operator-preview-scanline {
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
}

.scanner-position-left .operator-preview-phone {
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

.scanner-position-left .operator-preview-scanline {
  top: 50%;
  left: 26px;
  transform: translateY(-50%);
}

.scanner-position-right .operator-preview-phone {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.scanner-position-right .operator-preview-scanline {
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
}

.gate-event-modern {
  padding: 18px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(243, 249, 255, 0.9)
  );
  border: 1px solid #dce8f5;
  border-radius: 18px;
}

.gate-event-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.gate-event-heading h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.gate-event-heading p {
  margin: 0;
  color: #6b7b8f;
}

.gate-event-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  color: #087cff;
  background: rgba(0, 124, 255, 0.1);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.gate-event-heading .gate-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.gate-event-heading .gate-event-status,
.gate-event-heading .gate-public-link,
.gate-event-heading .gate-enable-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(42, 120, 190, 0.32);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.gate-event-heading .gate-enable-button {
  color: #0b6eea;
  background: rgba(13, 126, 255, 0.08);
  cursor: pointer;
}

.gate-event-heading .gate-enable-button.is-active {
  background: #087cff;
  border-color: #087cff;
  color: #fff;
}

.gate-event-heading .gate-enable-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.gate-event-heading .gate-event-status {
  color: #087cff;
  background: rgba(0, 124, 255, 0.1);
}

.gate-event-heading .gate-public-link {
  color: #0b6eea;
  background: rgba(233, 243, 255, 0.92);
  text-decoration: none;
}

.gate-table-shell {
  overflow-x: auto;
}

.gate-modern-table {
  min-width: 980px;
}

.gate-modern-table th,
.gate-modern-table td {
  padding: 13px 14px;
}

body[data-mode="gate"] {
  margin: 0;
  background: #061d37;
}

.gate-public-page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 48px 20px;
  color: #fff;
  background: #061d37;
  isolation: isolate;
}

.gate-public-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  filter: brightness(0.55);
  transform: scale(1.02);
}

.gate-public-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gate-public-media.is-empty {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(0, 124, 255, 0.45),
      transparent 34%
    ),
    linear-gradient(135deg, #061d37, #020916);
}

.gate-public-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(2, 9, 22, 0.18),
    rgba(2, 9, 22, 0.7)
  );
}

.gate-public-card {
  width: min(760px, 92vw);
  padding: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 28px;
  background: rgba(5, 22, 45, 0.68);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  text-align: center;
  backdrop-filter: blur(18px);
}

.gate-public-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 214, 89, 0.16);
  color: #ffd35f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gate-public-status.live {
  background: rgba(28, 202, 128, 0.16);
  color: #72f0b5;
}

.gate-public-kicker {
  margin: 26px 0 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gate-public-card h1 {
  margin: 8px 0 12px;
  font-size: clamp(42px, 8vw, 92px);
  line-height: 0.98;
  letter-spacing: 0;
}

.gate-public-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(18px, 2vw, 26px);
}

.gate-public-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.gate-public-meta span {
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gate-public-meta strong {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

body[data-theme="dark"] .gate-event-heading .gate-public-link,
body[data-theme="dark"] .gate-event-heading .gate-enable-button,
body[data-theme="dark"] .gate-event-heading .gate-event-status {
  border-color: rgba(110, 174, 255, 0.35);
  background: rgba(9, 35, 64, 0.78);
  color: #dceaff;
}

body[data-theme="dark"] .gate-event-heading .gate-enable-button.is-active {
  background: #087cff;
  border-color: #087cff;
  color: #fff;
}

@media (max-width: 720px) {
  .gate-event-heading {
    flex-direction: column;
  }

  .gate-event-heading .gate-heading-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .gate-public-card {
    padding: 30px 20px;
    border-radius: 22px;
  }

  .gate-public-meta {
    grid-template-columns: 1fr;
  }
}

.smtp-settings-card .smtp-test-field .smtp-test-control input::placeholder {
  color: #a8b4c2 !important;
  opacity: 1 !important;
}

.operator-image-upload input:disabled + span {
  cursor: not-allowed;
  opacity: 0.62;
}

.smtp-settings-card {
  display: grid;
  gap: 18px;
}

.smtp-settings-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 14px;
}

.smtp-settings-card > .panel-heading {
  margin-left: -2px;
}

.smtp-settings-card > .panel-heading h3 {
  margin: 0;
}

.smtp-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  gap: 12px;
  align-items: start;
}

.smtp-sender-field,
.smtp-test-field {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center !important;
  gap: 12px !important;
  max-width: 720px;
}

.smtp-sender-field > span,
.smtp-test-field > span {
  color: #17243a;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.smtp-sender-field input,
.smtp-test-control input {
  min-height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #d5e2f1;
  border-radius: 11px;
  color: #18263b;
  font-weight: 400 !important;
}

.smtp-sender-field input {
  width: 380px;
  max-width: 100%;
  justify-self: start;
}

.smtp-sender-field input::placeholder,
.smtp-test-control input::placeholder {
  color: #c2ccd8;
  font-weight: 400 !important;
  opacity: 1;
}

.smtp-test-control {
  display: grid;
  grid-template-columns: 380px auto;
  gap: 8px;
  align-items: center;
  justify-content: start;
}

.smtp-test-control input {
  width: 380px;
  min-width: 0;
}

.smtp-sender-field input,
.smtp-sender-field input:disabled,
.smtp-test-control input,
.smtp-test-control input:disabled {
  font-weight: 400 !important;
  -webkit-text-fill-color: #18263b;
}

.smtp-password-control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.smtp-password-control input {
  width: 100%;
  padding-right: 48px !important;
}

.smtp-password-toggle {
  position: absolute;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #1c2d42;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.smtp-password-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.smtp-test-button {
  min-height: 44px;
  padding-inline: 18px;
  background: #007cff !important;
  border-color: #007cff !important;
  color: #fff !important;
  white-space: nowrap;
}

.whatsapp-test-row {
  display: grid;
  grid-template-columns: 320px auto;
  gap: 26px;
  align-items: end;
  width: min(100%, 540px);
  margin-bottom: 16px;
}

.whatsapp-test-row label {
  display: grid !important;
  gap: 8px !important;
}

.whatsapp-test-row label > span {
  color: #17243a;
  font-size: 12px;
  font-weight: 850;
}

.whatsapp-test-row input {
  min-height: 44px;
  padding: 0 14px;
  color: #18263b;
  background: #fff;
  border: 1px solid #d5e2f1;
  border-radius: 11px;
  font-weight: 500;
}

.whatsapp-test-row input:placeholder-shown {
  color: #a8b4c2 !important;
  -webkit-text-fill-color: #a8b4c2 !important;
}

.whatsapp-test-row input::placeholder,
.whatsapp-test-row input::-webkit-input-placeholder {
  color: #a8b4c2 !important;
  -webkit-text-fill-color: #a8b4c2 !important;
  opacity: 1;
  font-weight: 400;
}

.whatsapp-test-row input:not(:placeholder-shown) {
  color: #18263b !important;
  -webkit-text-fill-color: #18263b !important;
}

.whatsapp-test-button {
  min-height: 44px;
  min-width: 148px;
  padding-inline: 22px;
  background: #007cff !important;
  border-color: #007cff !important;
  color: #fff !important;
  white-space: nowrap;
}

.whatsapp-settings-grid {
  grid-template-columns: repeat(2, minmax(260px, 320px)) !important;
  align-items: end;
  justify-content: start;
  gap: 16px 22px !important;
  margin-top: 22px !important;
}

.whatsapp-settings-grid label {
  max-width: 320px;
  font-weight: 400 !important;
}

.whatsapp-settings-grid label > span {
  font-weight: 400 !important;
}

.whatsapp-settings-grid input {
  width: 100%;
  min-height: 44px;
  font-weight: 400 !important;
}

.whatsapp-settings-actions {
  gap: 14px;
  justify-content: flex-end;
}

.operator-pending-app
  :is(.manual-scan input, .manual-scan button, .operator-menu-button:disabled) {
  cursor: not-allowed;
  opacity: 0.58;
}

.operator-pending-stage {
  filter: saturate(0.85);
}

.operator-pending-exit {
  position: fixed;
  z-index: 72;
  right: 22px;
  bottom: 22px;
  min-height: 42px;
  padding: 0 16px;
  color: #fff;
  background: rgba(19, 39, 66, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(5, 18, 36, 0.28);
}

.settings-form-card .settings-field-grid input:disabled {
  color: #7d8ea4;
  background: rgba(246, 250, 255, 0.72);
  cursor: not-allowed;
}

.admin-app
  :is(
    input:disabled,
    select:disabled,
    textarea:disabled,
    button:disabled,
    [aria-disabled="true"]
  ) {
  cursor: not-allowed !important;
}

.smtp-bottom-grid {
  margin-top: 2px;
}

.smtp-advanced-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.smtp-safe-note {
  margin: 0;
  color: #6d7d90;
  font-size: 11px;
}

.smtp-history-card,
.smtp-deliverability-card {
  position: relative;
  padding: 16px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 12px;
}

.smtp-history-menu {
  position: absolute;
  z-index: 8;
  top: 48px;
  right: 16px;
  min-width: 150px;
  padding: 6px;
  background: #fff;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(14, 42, 78, 0.18);
}

.smtp-history-menu button {
  width: 100%;
  padding: 9px 11px;
  color: #b42318;
  background: #fff7f6;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
}

.admin-app
  .smtp-settings-card
  .smtp-test-field
  .smtp-test-control
  input:placeholder-shown {
  color: #a8b4c2 !important;
  -webkit-text-fill-color: #a8b4c2 !important;
  font-weight: 400 !important;
}

.admin-app
  .smtp-settings-card
  .smtp-test-field
  .smtp-test-control
  input::placeholder,
.admin-app
  .smtp-settings-card
  .smtp-test-field
  .smtp-test-control
  input::-webkit-input-placeholder {
  color: #a8b4c2 !important;
  -webkit-text-fill-color: #a8b4c2 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.admin-app
  .smtp-settings-card
  .smtp-test-field
  .smtp-test-control
  input:not(:placeholder-shown) {
  color: #18263b !important;
  -webkit-text-fill-color: #18263b !important;
}

.campaign-active-events {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  color: #7e8b83 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.consent-channel {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.consent-channel > div:not(.channel-meter) {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 6px;
  justify-items: start;
  align-content: start;
  min-width: 0;
}

.consent-channel .campaign-active-events {
  grid-area: auto !important;
  margin-top: 0;
  text-align: left;
  justify-self: start;
}

.consent-channel .channel-meter {
  grid-column: 1 / -1;
}

.campaign-page-title {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid rgba(205, 225, 246, 0.86);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.8),
      rgba(239, 247, 255, 0.62)
    ),
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.92),
      transparent 46%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 18px 48px rgba(16, 62, 118, 0.09);
  backdrop-filter: blur(18px) saturate(150%);
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 1.04 !important;
}

.campaign-delivery-breakdown {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  min-width: 0;
  margin-top: 3px;
}

.campaign-delivery-breakdown span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.campaign-delivery-breakdown small {
  color: #7d8d9f;
  font-size: 8px;
  font-weight: 750;
}

.campaign-delivery-breakdown strong {
  color: #13221a;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.admin-app .channel-card.email-channel > div > span,
.admin-app .channel-card.whatsapp-channel > div > span,
.admin-app .channel-card.consent-channel > div > span {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.campaign-qr-token {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-ticket-link {
  color: #087cff;
  font-weight: 800;
  text-decoration: none;
}

.campaign-ticket-link:hover {
  text-decoration: underline;
}

.campaign-table-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.86),
      rgba(240, 248, 255, 0.68)
    ),
    radial-gradient(
      circle at top right,
      rgba(0, 124, 255, 0.12),
      transparent 40%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(255, 255, 255, 0.72),
      transparent 34%
    );
  border-color: rgba(204, 225, 247, 0.92);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 24px 70px rgba(21, 59, 99, 0.11);
  backdrop-filter: blur(22px) saturate(150%);
}

.campaign-table-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.38),
    transparent 34%,
    rgba(255, 255, 255, 0.18)
  );
}

.campaign-table-panel > * {
  position: relative;
  z-index: 1;
}

.campaign-panel-description {
  margin: 6px 0 0;
  color: #6f8196;
  font-size: 12px;
  font-weight: 650;
}

.campaign-toolbar-actions {
  display: inline-flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.campaign-action-button {
  width: 128px;
  min-width: 128px;
  height: 44px;
  justify-content: center;
  padding-inline: 12px;
  font-size: 12px;
}

.campaign-delete-button {
  border-color: rgba(244, 63, 94, 0.22);
  color: #be123c;
  background: rgba(255, 241, 242, 0.9);
}

.campaign-delete-button:not(:disabled):hover {
  border-color: rgba(244, 63, 94, 0.42);
  background: rgba(255, 228, 230, 0.98);
}

.campaign-select-column {
  width: 44px;
  min-width: 44px;
  text-align: center;
}

.campaign-select-column input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  accent-color: #007cff;
  cursor: pointer;
}

.campaign-delete-confirm-backdrop {
  z-index: 180;
}

.campaign-delete-confirm-dialog {
  width: min(420px, calc(100vw - 36px));
  padding: 24px;
  text-align: center;
  border-radius: 22px;
}

.campaign-delete-confirm-dialog h3 {
  margin: 0;
  color: #15251d;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.campaign-delete-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.campaign-delete-confirm-actions button {
  min-width: 108px;
  justify-content: center;
}

.smtp-history-table td {
  vertical-align: middle;
}

.smtp-history-status-cell {
  white-space: nowrap;
}

.smtp-history-status-text {
  color: #17243a;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.smtp-deliverability-card > p {
  margin: 6px 0 14px;
  color: #75859a;
  font-size: 11px;
}

.smtp-deliverability-card > .panel-heading {
  margin-left: 0;
}

.smtp-deliverability-card > .panel-heading h3 {
  color: #17243a;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}

.smtp-deliverability-list {
  display: grid;
  gap: 10px;
}

.smtp-deliverability-list article {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) 88px minmax(220px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid #e2eaf4;
  border-radius: 10px;
}

.room-occupancy-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.room-occupancy-list article {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 14px;
}

.room-occupancy-list article > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.room-occupancy-list strong {
  color: #17243a;
  font-size: 13px;
  font-weight: 900;
}

.room-occupancy-list span {
  color: #62748a;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.report-hero-copy {
  display: grid;
  gap: 8px;
}

.report-hero-scope {
  margin: 0;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 0.95;
  font-weight: 500;
}

.venue-gate-table {
  margin-top: 24px;
  width: 100%;
}

.venue-gate-table th,
.venue-gate-table td {
  text-align: left;
  vertical-align: middle;
}

.venue-gate-table th:nth-child(3),
.venue-gate-table th:nth-child(4),
.venue-gate-table td:nth-child(3),
.venue-gate-table td:nth-child(4) {
  text-align: center;
}

.venue-gate-table td {
  color: #17243a;
  font-size: 14px;
  font-weight: 500;
}

.report-funnel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.report-funnel article {
  position: relative;
  overflow: hidden;
  min-height: 98px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fbff, #eef6ff);
  border: 1px solid #dbe8f6;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(24, 66, 118, 0.08);
}

.report-funnel article::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -26px;
  width: 86px;
  height: 86px;
  background: rgba(0, 124, 255, 0.12);
  border-radius: 999px;
}

.report-funnel span {
  position: relative;
  z-index: 1;
  display: block;
  color: #6e7f96;
  font-size: 10px;
  font-weight: 900;
}

.report-funnel strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 12px;
  color: #10213d;
  letter-spacing: -0.04em;
  font-size: 28px;
  font-weight: 900;
}

.infrastructure-health-stack {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.infrastructure-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.infrastructure-summary article {
  min-width: 0;
  min-height: 112px;
}

.infrastructure-summary article strong {
  overflow-wrap: anywhere;
}

.server-health-chart {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dfe8f3;
  border-radius: 14px;
}

.server-health-chart-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.server-health-chart-heading strong {
  color: #17243a;
  font-size: 13px;
  font-weight: 900;
}

.server-health-chart-heading small {
  color: #718197;
  text-align: right;
  font-size: 9px;
  font-weight: 750;
}

.server-health-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(34px, 1fr);
  align-items: end;
  gap: 8px;
  min-height: 130px;
  overflow-x: auto;
}

.server-health-bars span {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  height: 118px;
}

.server-health-bars i {
  width: 100%;
  max-width: 42px;
  min-height: 8px;
  background: linear-gradient(180deg, #007cff, #004fcb);
  border-radius: 12px 12px 5px 5px;
  box-shadow: 0 8px 18px rgba(0, 95, 220, 0.22);
}

.server-health-bars small {
  color: #748298;
  white-space: nowrap;
  font-size: 7px;
  font-weight: 800;
}

.server-health-bars p {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  color: #7a899d;
  font-size: 10px;
}

.report-section-eyebrow {
  display: block;
  margin: 4px 0 18px !important;
  line-height: 1.2 !important;
}

.server-health-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.server-health-metric {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(207, 222, 239, 0.9);
  border-radius: 13px;
}

.server-health-metric > span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.server-health-metric small {
  color: #718197;
  font-size: 8px;
  font-weight: 850;
}

.server-health-metric strong {
  overflow: hidden;
  color: #17243a;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-health-metric i {
  display: block;
  width: 100%;
  min-width: 6px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #007cff, #33bfff);
}

.server-health-metric.metric-green i {
  background: linear-gradient(90deg, #16a36a, #58d79b);
}

.server-health-metric.metric-purple i {
  background: linear-gradient(90deg, #7c5cff, #b59cff);
}

.server-health-metric.metric-orange i {
  background: linear-gradient(90deg, #f59e0b, #ffd166);
}

.server-health-metric.metric-red i {
  background: linear-gradient(90deg, #ef4444, #fb9a9a);
}

@media (max-width: 1080px) {
  .server-health-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .server-health-metrics {
    grid-template-columns: 1fr;
  }
}

.smtp-deliverability-list article strong {
  justify-self: start;
  padding: 5px 10px;
  color: #057647;
  background: #e9fbf2;
  border-radius: 999px;
  font-size: 10px;
}

.smtp-deliverability-list article small {
  color: #66788f;
  line-height: 1.45;
}

.participant-field-checklist input:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.toolbar-filters .event-filter-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  border: 1px solid #d8e2ee;
  border-radius: 14px;
  background: #fff;
}

.toolbar-filters .event-filter-select select {
  width: 100%;
  min-width: 134px;
  height: 45px;
  padding: 0 38px 0 14px;
  color: #405269;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.toolbar-filters .event-period-filter select {
  min-width: 116px;
}

.toolbar-filters .event-filter-select svg {
  position: absolute;
  right: 14px;
  color: #526a80;
  pointer-events: none;
}

.toolbar-card,
.toolbar-filters {
  overflow: visible;
}

.toolbar-filters .event-filter-dropdown {
  position: relative;
  display: inline-flex;
  min-width: 156px;
}

.toolbar-filters .event-period-filter {
  min-width: 134px;
}

.toolbar-filters .event-filter-trigger {
  width: 100%;
  height: 45px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #405269;
  background: #fff;
  border: 1px solid #d8e2ee;
  border-radius: 14px;
  outline: 0;
  box-shadow: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.toolbar-filters .event-filter-trigger svg {
  flex: 0 0 auto;
  color: #526a80;
  pointer-events: none;
}

.toolbar-filters .event-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  gap: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid #d8e2ee;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(16, 42, 82, 0.16);
}

.toolbar-filters .event-filter-menu button {
  width: 100%;
  padding: 10px;
  color: #405269;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  font-weight: 750;
}

.toolbar-filters .event-filter-menu button:hover,
.toolbar-filters .event-filter-menu button.is-selected {
  color: #096ad8;
  background: #eaf4ff;
}

.event-date-range-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #d8e2ee;
  border-radius: 14px;
}

.event-date-range-filter input {
  width: 126px;
  height: 34px;
  padding: 0 9px;
  color: #405269;
  background: #f8fbff;
  border: 1px solid #e2ebf5;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

.event-date-range-filter span {
  color: #7d8da0;
  font-size: 9px;
  font-weight: 800;
}

.typography-settings-card {
  display: grid;
  gap: 16px;
}

.typography-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  background: #f7faff;
  border: 1px solid #dfe8f3;
  border-radius: 12px;
}

.typography-switch-row strong {
  display: block;
  font-size: 13px;
}

.typography-switch-row small {
  color: #73849a;
  font-size: 10px;
}

.typography-size-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  padding: 4px;
  background: #eaf1f8;
  border: 1px solid #d9e5f1;
  border-radius: 999px;
}

.typography-size-switch button {
  min-height: 34px;
  color: #60748a;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  text-transform: capitalize;
}

.typography-size-switch button.is-active {
  color: #fff;
  background: #007cff;
}

.switch-control {
  position: relative;
  width: 78px;
  height: 38px;
  padding: 3px;
  color: #62748a;
  background: #dbe6f2;
  border: 1px solid #cad8e7;
  border-radius: 999px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  text-align: right;
}

.switch-control::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(15, 35, 60, 0.22);
  transition: transform 0.18s ease;
}

.switch-control span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 8px 9px 0 0;
}

.switch-control.is-on {
  color: #fff;
  background: #007cff;
  border-color: #007cff;
  text-align: left;
}

.switch-control.is-on::before {
  transform: translateX(38px);
}

.switch-control.is-on span {
  padding-right: 0;
  padding-left: 9px;
}

.event-banner-builder.is-editing .event-banner-preview::after {
  content: none;
}

.event-crop-box {
  position: absolute;
  z-index: 6;
  display: block !important;
  border: 2px dashed rgba(255, 255, 255, 0.98);
  cursor: move;
  box-shadow:
    0 0 0 999px rgba(3, 13, 28, 0.24),
    inset 0 0 0 1px rgba(0, 124, 255, 0.9);
  touch-action: none;
  background: transparent;
  box-sizing: border-box;
}

.event-banner-builder.is-editing .event-banner-preview > .event-crop-box {
  display: block !important;
}

.event-crop-box::before {
  content: none;
}

.event-crop-box .crop-handle {
  position: absolute;
  width: 28px;
  height: 28px;
  background: #ffffff;
  border: 2px solid #007cff;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(6, 31, 62, 0.22);
  touch-action: none;
}

.operator-participant-list-backdrop,
.operator-lock-backdrop {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(3, 13, 28, 0.68);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.operator-participant-list-dialog {
  width: min(1180px, calc(100vw - 36px));
  max-height: min(760px, calc(100vh - 36px));
  overflow: hidden;
  color: #eaf4ff;
  background: linear-gradient(
    145deg,
    rgba(13, 34, 58, 0.98),
    rgba(7, 22, 43, 0.98)
  );
  border: 1px solid rgba(139, 180, 255, 0.28);
  border-radius: 24px;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
}

.operator-participant-list-dialog > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(139, 180, 255, 0.18);
}

.operator-participant-list-dialog h2 {
  margin: 8px 0 4px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.operator-participant-list-dialog p {
  margin: 0;
  color: #9fb3c9;
  font-size: 12px;
}

.operator-participant-list-dialog > header > button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  cursor: pointer;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(203, 218, 240, 0.22);
  border-radius: 13px;
}

.operator-participant-searchbar {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 18px 18px 12px;
  padding: 0 16px;
  min-height: 52px;
  color: #b7c9dd;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(139, 180, 255, 0.24);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.operator-participant-searchbar input {
  width: 100%;
  min-width: 0;
  color: #eaf4ff;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
  font-weight: 650;
}

.operator-participant-searchbar input::placeholder {
  color: rgba(183, 201, 221, 0.68);
}

.operator-participant-table-wrap {
  overflow: auto;
  padding: 0 18px 20px;
}

.operator-participant-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
}

.operator-participant-table th,
.operator-participant-table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(139, 180, 255, 0.14);
  text-align: left;
  font-size: 12px;
}

.operator-participant-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #9fb3c9;
  background: rgba(9, 25, 47, 0.96);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 900;
}

.operator-participant-table td {
  color: #dbeafe;
}

.operator-participant-quantity {
  text-align: center !important;
  font-weight: 850;
}

.operator-participant-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}

.operator-participant-status.is-checked {
  color: #b7f7d2;
  background: rgba(34, 197, 94, 0.16);
}

.operator-participant-status.is-pending {
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.16);
}

.operator-participant-status.is-failed {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.16);
}

.operator-manual-checkin {
  min-height: 32px;
  padding: 0 12px;
  color: #fff;
  cursor: pointer;
  background: #007cff;
  border: 1px solid #1f8cff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 850;
}

.operator-manual-checkin:disabled {
  cursor: not-allowed;
  color: #9fb3c9;
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.18);
}

.operator-participant-empty {
  text-align: center !important;
  color: #9fb3c9 !important;
  padding: 36px !important;
}

.operator-lock-dialog {
  width: min(430px, calc(100vw - 36px));
  color: #eaf4ff;
  text-align: center;
  background: linear-gradient(
    145deg,
    rgba(13, 34, 58, 0.98),
    rgba(7, 22, 43, 0.98)
  );
  border: 1px solid rgba(139, 180, 255, 0.28);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.42);
}

.operator-lock-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  color: #fff;
  background: #007cff;
  border-radius: 18px;
}

.operator-lock-dialog h2 {
  margin: 0 0 8px;
  font-size: 26px;
  letter-spacing: -0.04em;
}

.operator-lock-dialog p {
  margin: 0 0 20px;
  color: #9fb3c9;
  font-size: 12px;
  line-height: 1.6;
}

.operator-lock-dialog form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.operator-lock-dialog input {
  width: 100%;
  min-height: 50px;
  color: #eaf4ff;
  text-align: center;
  letter-spacing: 0.18em;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(139, 180, 255, 0.28);
  border-radius: 14px;
  outline: 0;
  font-weight: 850;
}

.operator-lock-dialog input::placeholder {
  color: #7e93ad;
  letter-spacing: normal;
}

.operator-lock-dialog small {
  color: #fca5a5;
  font-size: 11px;
}

.operator-lock-dialog button {
  min-height: 48px;
  color: #fff;
  cursor: pointer;
  background: #007cff;
  border: 1px solid #1f8cff;
  border-radius: 14px;
  font-weight: 900;
}

.operator-manual-pin-dialog {
  width: min(470px, calc(100vw - 36px));
}

.operator-manual-pin-dialog form {
  gap: 14px;
}

.operator-manual-pin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin-top: 14px;
  padding-top: 4px;
}

.operator-manual-pin-actions button {
  min-width: 0;
  min-height: 52px;
  border-radius: 16px;
  font-weight: 900;
}

.operator-manual-pin-actions button[type="button"] {
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(139, 180, 255, 0.32);
}

.operator-manual-pin-actions button[type="submit"] {
  color: #fff;
  background: #007cff;
  border-color: #1f8cff;
  box-shadow: 0 14px 30px rgba(0, 124, 255, 0.22);
}

.participant-directory-table {
  min-width: 1680px;
}

.participant-directory-table th {
  padding: 15px 14px;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.35;
}

.participant-directory-table td {
  padding: 16px 14px;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  vertical-align: middle;
}

.participant-directory-table td strong {
  color: #111827 !important;
  font-size: 12px;
  font-weight: 400 !important;
}

.participant-directory-table .table-subtext,
.participant-directory-table .category-chip {
  color: #111827 !important;
  font-weight: 400 !important;
}

.participant-directory-table .category-chip {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.participant-directory-table {
  min-width: 1940px;
}

.participant-directory-table tr,
.participant-directory-table td {
  overflow: visible;
}

.participant-select-column {
  width: 54px;
  min-width: 54px;
  text-align: center;
  vertical-align: middle !important;
}

.participant-directory-table th.participant-select-column,
.participant-directory-table td.participant-select-column {
  padding-inline: 0 !important;
  text-align: center !important;
}

.participant-select-column input[type="checkbox"] {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  accent-color: #007cff;
  cursor: pointer;
}

.participant-directory-table th:nth-child(6),
.participant-directory-table .participant-quantity-column {
  text-align: center !important;
}

.participant-bulk-delete-button {
  color: #d65b73 !important;
  border-color: #ffd3dd !important;
  background: #fff7fa !important;
}

.participant-bulk-delete-button:hover {
  background: #fff0f5 !important;
}

.participant-directory-table .participant-action-cell {
  position: relative;
  min-width: 230px;
}

.participant-panel .table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  min-height: 650px;
  padding-bottom: 18px;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

.participant-panel .table-footer {
  padding-block: 30px 58px;
  min-height: 112px;
}

.participant-empty-row td {
  height: 58px;
  border-top: 1px solid #edf1f5;
}

.participant-action-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.participant-action-cell > span {
  min-width: 0;
  flex: 1;
}

.participant-action-cell .table-menu {
  flex: none;
}

.participant-action-menu-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

.participant-action-menu {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  bottom: auto;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 158px;
  padding: 7px;
  box-sizing: border-box;
  overflow: hidden;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(15, 35, 62, 0.18);
}

.participant-export-menu-wrap {
  position: relative;
  display: inline-flex;
}

.participant-export-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 85;
  min-width: 128px;
  padding: 7px;
  background: #fff;
  border: 1px solid #dbe6f2;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(15, 35, 62, 0.18);
}

.participant-export-menu button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  color: #111827;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}

.participant-export-menu button:hover {
  background: #f2f7ff;
}

.participant-action-menu button {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  box-sizing: border-box;
  color: #1d3658;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.participant-action-menu button:hover {
  background: #f2f7ff;
}

.participant-action-menu button.is-danger {
  color: #c0392b;
}

.participant-menu-bullet {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  line-height: 1;
}

.blast-select-column {
  width: 42px;
  min-width: 42px;
  text-align: center;
}

.blast-select-column input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  accent-color: #007cff;
  cursor: pointer;
}

.event-crop-box .crop-nw {
  top: -15px;
  left: -15px;
  cursor: nwse-resize;
}

.event-crop-box .crop-ne {
  top: -15px;
  right: -15px;
  cursor: nesw-resize;
}

.event-crop-box .crop-sw {
  bottom: -15px;
  left: -15px;
  cursor: nesw-resize;
}

.event-crop-box .crop-se {
  right: -15px;
  bottom: -15px;
  cursor: nwse-resize;
}

.event-banner-image-layer {
  inset: 0 !important;
  width: 100%;
  height: 100%;
}

.event-banner-builder.is-editing .event-banner-preview {
  overflow: visible;
}

.event-banner-builder.is-editing
  .event-banner-preview
  .event-banner-image-layer {
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  overflow: hidden;
  border-radius: 11px;
}

.event-banner-builder.is-editing .event-crop-box::before {
  content: none;
}

.event-crop-box {
  min-width: 2px;
  min-height: 2px;
}

.event-crop-box .crop-n {
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.event-crop-box .crop-e {
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.event-crop-box .crop-s {
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.event-crop-box .crop-w {
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.event-card-cover.no-banner,
.operator-preview-stage:not([style*="background-image"]) {
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(0, 124, 255, 0.22),
      transparent 30%
    ),
    linear-gradient(135deg, #f7fbff 0%, #e7f3ff 48%, #fff9e8 100%) !important;
}

.event-card-cover.no-banner .event-monogram {
  color: rgba(0, 94, 200, 0.42);
}

.organization-groups-card {
  overflow: hidden;
}

.event-banner-builder.is-editing {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(980px, calc(100vw - 28px));
  padding: 74px 28px 28px;
  color: #f5f7fb;
  background: #111214;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow:
    0 0 0 100vmax rgba(7, 10, 14, 0.62),
    0 32px 92px rgba(0, 0, 0, 0.46);
}

.event-banner-builder.is-editing::before {
  content: "Pangkas & putar";
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #f2f5f8;
  font-size: 25px;
  font-weight: 520;
  letter-spacing: 0;
}

.event-banner-builder.is-editing .event-crop-close {
  top: 22px;
  left: 22px;
  right: auto;
  width: 42px;
  height: 42px;
  color: #e7ebef;
  border: 0;
  background: transparent;
}

.event-banner-builder.is-editing .event-crop-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.event-banner-builder.is-editing .event-banner-preview {
  min-height: min(56vh, 560px);
  padding: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: #111214;
  border: 0;
  border-radius: 0;
}

.event-banner-builder.is-editing .event-banner-preview:active {
  cursor: grabbing;
}

.event-banner-builder.is-editing
  .event-banner-preview
  .event-banner-image-layer {
  inset: auto !important;
  left: var(--crop-image-left) !important;
  top: var(--crop-image-top) !important;
  width: var(--crop-image-width) !important;
  height: var(--crop-image-height) !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  transform: var(--crop-image-transform) !important;
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  border-radius: 0;
  transition: transform 0.08s linear;
}

.event-banner-builder.is-editing .event-crop-box {
  z-index: 7;
  pointer-events: auto;
  border: 2px solid rgba(245, 247, 250, 0.9);
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.48);
  cursor: grab;
}

.event-banner-builder.is-editing .event-crop-box .crop-handle {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
  touch-action: none;
}

.event-banner-builder.is-editing .event-crop-box .crop-nw {
  top: -7px;
  left: -7px;
  border-top: 7px solid #fff;
  border-left: 7px solid #fff;
  cursor: nwse-resize;
}

.event-banner-builder.is-editing .event-crop-box .crop-ne {
  top: -7px;
  right: -7px;
  border-top: 7px solid #fff;
  border-right: 7px solid #fff;
  cursor: nesw-resize;
}

.event-banner-builder.is-editing .event-crop-box .crop-se {
  right: -7px;
  bottom: -7px;
  border-right: 7px solid #fff;
  border-bottom: 7px solid #fff;
  cursor: nwse-resize;
}

.event-banner-builder.is-editing .event-crop-box .crop-sw {
  bottom: -7px;
  left: -7px;
  border-bottom: 7px solid #fff;
  border-left: 7px solid #fff;
  cursor: nesw-resize;
}

.event-banner-builder.is-editing .event-banner-controls {
  display: block;
}

.event-banner-builder.is-editing .event-banner-editor-actions {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
}

.event-crop-zoom-control {
  display: grid !important;
  grid-template-columns: 58px minmax(150px, 1fr);
  align-items: center;
  gap: 12px !important;
  margin: 0;
}

.event-crop-zoom-control span {
  color: rgba(245, 247, 250, 0.82) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.event-crop-zoom-control input[type="range"] {
  width: 100%;
  min-height: 30px;
  padding: 0;
  accent-color: #a9c9ff;
}

.event-banner-builder.is-editing .event-banner-editor-actions button {
  min-width: 116px;
  min-height: 44px;
  color: #dfe7f4;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

.event-banner-builder.is-editing
  .event-banner-editor-actions
  button:last-child {
  color: #0b2b60;
  background: #a9c9ff;
  border-color: #a9c9ff;
}

.event-crop-rotate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@media (width <= 700px) {
  .event-banner-builder.is-editing {
    width: min(100%, calc(100vw - 20px));
    padding: 68px 16px 18px;
    border-radius: 18px;
  }

  .event-banner-builder.is-editing .event-banner-preview {
    min-height: 360px;
  }

  .event-banner-builder.is-editing .event-banner-editor-actions {
    grid-template-columns: 1fr 1fr;
  }

  .event-crop-zoom-control {
    grid-column: 1 / -1;
  }
}

.organization-groups-scroll {
  margin-top: 18px;
  border: 1px solid #dce9f7;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
}

.organization-groups-table th,
.organization-groups-table td {
  white-space: nowrap;
}

.organization-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  color: #087a4a;
  font-size: 12px;
  font-weight: 800;
  background: #e9fff5;
  border: 1px solid #baf0d7;
  border-radius: 999px;
}

.whatsapp-history-card {
  margin-top: 18px;
}

.ticket-dashboard-view {
  gap: 24px;
}

.ticket-dashboard-view .ticket-report-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 22px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(239, 248, 255, 0.76)
  );
  border: 1px solid #d8e8fb;
  border-radius: 28px;
  box-shadow: 0 22px 55px rgba(31, 95, 171, 0.08);
}

.ticket-dashboard-view .ticket-report-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 18px;
}

.ticket-dashboard-view .ticket-report-summary article {
  min-height: 142px;
  padding: 24px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(242, 248, 255, 0.88)
  );
  border: 1px solid #dbe9fb;
  border-radius: 26px;
  box-shadow: 0 20px 45px rgba(20, 75, 145, 0.08);
}

.ticket-dashboard-view .ticket-report-summary strong {
  display: block;
  margin: 12px 0 6px;
  color: #071728;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
}

.ticket-dashboard-view .ticket-report-summary small {
  color: #7b8ca3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticket-dashboard-view .ticket-report-summary em {
  color: #6d8098;
  font-style: normal;
}

.ticket-dashboard-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
}

.dashboard-report-card {
  min-height: 230px;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(0, 124, 255, 0.14),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(239, 248, 255, 0.82)
    );
  border: 1px solid rgba(190, 220, 255, 0.92);
  border-radius: 30px;
  box-shadow: 0 28px 68px rgba(18, 80, 154, 0.1);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.dashboard-report-metrics,
.dashboard-ticket-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.dashboard-report-metrics > div,
.dashboard-ticket-counts > div,
.dashboard-ticket-counts > p {
  min-height: 98px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(205, 224, 246, 0.9);
  border-radius: 22px;
}

.dashboard-report-metrics small,
.dashboard-ticket-counts small {
  display: block;
  margin-bottom: 10px;
  color: #75879e;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-report-metrics strong,
.dashboard-ticket-counts strong {
  display: block;
  color: #071728;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
}

.dashboard-ticket-counts em {
  display: block;
  margin-top: 10px;
  color: #7b8ba0;
  font-size: 12px;
  font-style: normal;
}

.dashboard-ticket-counts > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #6d8098;
}

@media (max-width: 1100px) {
  .ticket-dashboard-view .ticket-report-summary {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .ticket-dashboard-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ticket-dashboard-view .ticket-report-toolbar,
  .ticket-dashboard-view .ticket-report-summary,
  .dashboard-report-metrics,
  .dashboard-ticket-counts {
    grid-template-columns: 1fr;
  }
}

/* 1.2.59 — operator account password visibility control. */
.admin-app .operator-password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-app .settings-field-grid .operator-password-field input {
  width: 100%;
  padding-right: 48px !important;
}

.admin-app .operator-password-eye {
  position: absolute;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #58708b;
  background: rgba(15, 92, 180, 0.08);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.admin-app .operator-password-eye:hover:not(:disabled) {
  color: #0b7cff;
  background: rgba(11, 124, 255, 0.14);
}

.admin-app .operator-password-eye:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.admin-app[data-theme-mode="night"] .operator-password-eye {
  color: #b8cfff;
  background: rgba(137, 180, 255, 0.15);
}

/* 1.0.24 — admin password modal visibility toggles. */
.admin-app .admin-password-visibility-field {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-app .admin-password-visibility-field input {
  width: 100%;
  padding-right: 54px !important;
}

.admin-app .admin-password-eye {
  position: absolute;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #53687f;
  background: rgba(15, 92, 180, 0.08);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.admin-app .admin-password-eye:hover:not(:disabled) {
  color: #0b7cff;
  background: rgba(11, 124, 255, 0.14);
}

.admin-app .admin-password-eye:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.admin-app[data-theme-mode="night"] .admin-password-eye {
  color: #10233a;
  background: rgba(238, 246, 255, 0.94);
}

.admin-app[data-theme-mode="night"] .admin-password-eye svg {
  stroke: #10233a;
}

.pin-secure-input {
  -webkit-text-security: disc;
  text-security: disc;
}

.admin-app .operator-password-field input.is-masked {
  -webkit-text-security: disc;
  text-security: disc;
}

.operator-menu-panel .operator-last-participant .eyebrow,
.operator-menu-panel .operator-exit-button strong {
  color: #fff !important;
}

.operator-menu-panel .operator-last-participant strong,
.operator-menu-panel .operator-last-participant small,
.operator-menu-panel .operator-exit-button small {
  color: rgba(255, 255, 255, 0.76) !important;
}

/* 1.0.65 — ticket catalog card actions. */
.ticket-admin-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ticket-admin-actions button {
  white-space: nowrap;
}

.ticket-catalog-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ticket-catalog-toolbar-actions button {
  white-space: nowrap;
}

/* 1.0.66 — line chart presentation for ticket report time tabs. */
.ticket-report-view:not(.ticket-dashboard-view) .ticket-revenue-panel {
  overflow: visible;
}

.ticket-chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ticket-chart-controls .ticket-chart-tabs {
  margin-top: 0;
}

.ticket-chart-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ticket-chart-period-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ticket-chart-period-controls select,
.ticket-chart-date-range input {
  min-height: 40px;
  min-width: 142px;
  border: 1px solid rgba(188, 205, 229, 0.86);
  border-radius: 10px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.82);
  color: #24364f;
  font:
    800 12px/1.2 "Plus Jakarta Sans",
    system-ui,
    sans-serif;
  color-scheme: light;
}

.ticket-chart-period-controls select {
  min-width: 154px;
}

.ticket-chart-date-range span {
  color: #7a858d;
  font-size: 13px;
  font-weight: 900;
}

.ticket-revenue-line-chart {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: minmax(300px, 38vh) auto;
  gap: 10px 14px;
  margin-top: 18px;
  min-width: 0;
}

.ticket-revenue-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0 24px;
}

.ticket-revenue-y-axis span,
.ticket-revenue-x-axis span {
  color: #4d5a5c;
  font-size: 13px;
  font-weight: 800;
}

.ticket-revenue-plot {
  position: relative;
  min-height: 260px;
  border-bottom: 2px solid rgba(96, 103, 106, 0.34);
}

.ticket-revenue-grid-lines {
  position: absolute;
  inset: 4px 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.ticket-revenue-grid-lines i {
  display: block;
  height: 1px;
  background: rgba(96, 103, 106, 0.28);
}

.ticket-revenue-plot svg {
  position: absolute;
  inset: 4px 0 24px;
  width: 100%;
  height: calc(100% - 28px);
  overflow: visible;
}

.ticket-revenue-line,
.ticket-revenue-baseline {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.ticket-revenue-line {
  stroke: #ff7a2a;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 20px rgba(255, 122, 42, 0.18));
}

.ticket-revenue-baseline {
  stroke: #ffd900;
  stroke-width: 4;
  stroke-linecap: round;
}

.ticket-revenue-point {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.ticket-revenue-point > i {
  display: block;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #ff7a2a;
  box-shadow: 0 4px 14px rgba(9, 27, 49, 0.2);
}

.ticket-revenue-point > b {
  position: absolute;
  left: 14px;
  top: 14px;
  display: none;
  min-width: 138px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(54, 78, 92, 0.94);
  border-radius: 6px;
  box-shadow: 0 16px 38px rgba(12, 28, 42, 0.24);
  font-style: normal;
}

.ticket-revenue-point:hover > b,
.ticket-revenue-point:focus-within > b {
  display: grid;
  gap: 4px;
}

.ticket-revenue-point > b strong,
.ticket-revenue-point > b small {
  color: #fff !important;
  font-size: 12px;
}

.ticket-revenue-x-axis {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(
    var(--ticket-chart-points, 24),
    minmax(38px, 1fr)
  );
  gap: 4px;
}

.ticket-revenue-x-axis span {
  text-align: center;
  white-space: nowrap;
  font-size: clamp(9px, 0.72vw, 12px);
}

.ticket-revenue-legend {
  display: none !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(220, 226, 232, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 36px rgba(19, 43, 70, 0.1);
}

/* 1.0.72 - Ticket report graph follows Privacy Event dashboard chart style. */
.admin-app .ticket-simple-chart-wrap {
  min-width: 0 !important;
  margin-top: 20px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 8px !important;
}

.admin-app .ticket-simple-chart {
  display: grid !important;
  grid-template-columns: repeat(
    var(--ticket-chart-points, 24),
    minmax(var(--ticket-chart-slot-width, 64px), 1fr)
  ) !important;
  align-items: end !important;
  gap: clamp(5px, 0.78vw, 12px) !important;
  min-width: var(--ticket-chart-min-width, 1536px) !important;
  min-height: clamp(270px, 38vh, 430px) !important;
  padding: 26px 0 0 !important;
  border-bottom: 2px solid rgba(96, 103, 106, 0.34) !important;
}

.admin-app .ticket-simple-chart span {
  justify-self: center !important;
  width: min(30px, 76%) !important;
  min-height: 8px !important;
  border-radius: 14px 14px 5px 5px !important;
  background: linear-gradient(180deg, #2197ff 0%, #0b78ff 100%) !important;
  box-shadow: 0 12px 22px rgba(0, 124, 255, 0.14) !important;
}

.admin-app .ticket-simple-chart span.is-active {
  background: linear-gradient(180deg, #7c4dff 0%, #26c1ad 100%) !important;
  box-shadow: 0 16px 32px rgba(78, 94, 255, 0.22) !important;
}

.admin-app .ticket-simple-chart span b {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 8px) !important;
  transform: translateX(-50%) !important;
  color: #7f98bd !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.admin-app .ticket-simple-axis {
  display: grid !important;
  grid-template-columns: repeat(
    var(--ticket-chart-points, 24),
    minmax(var(--ticket-chart-slot-width, 64px), 1fr)
  ) !important;
  gap: clamp(5px, 0.78vw, 12px) !important;
  min-width: var(--ticket-chart-min-width, 1536px) !important;
  margin-top: 16px !important;
  color: var(--muted, #75849a) !important;
  font-size: clamp(11px, 0.78vw, 13px) !important;
  font-weight: 850 !important;
  text-align: center !important;
}

.admin-app .ticket-simple-axis span {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  justify-self: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.admin-app[data-theme-mode="night"] .ticket-simple-chart {
  border-bottom-color: rgba(164, 190, 222, 0.28) !important;
}

.admin-app[data-theme-mode="night"] .ticket-simple-axis,
.admin-app[data-theme-mode="night"] .ticket-simple-chart span b {
  color: rgba(218, 230, 246, 0.74) !important;
}

.ticket-revenue-legend article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 104px;
  padding: 15px;
  border-right: 1px solid rgba(220, 226, 232, 0.82);
}

.ticket-revenue-legend article:last-child {
  border-right: 0;
}

.ticket-revenue-legend article > span {
  display: block;
  position: relative;
  width: 92px;
  height: 8px;
  border-radius: 999px;
  background: #ff7a2a;
}

.ticket-revenue-legend article > span i {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ff7a2a;
  transform: translateY(-50%);
}

.ticket-revenue-legend strong {
  color: #3d4448;
  font-size: 13px;
  font-weight: 850;
}

.ticket-revenue-legend small {
  color: #7a858d;
  font-size: 10px;
  font-weight: 800;
}

.admin-app[data-theme-mode="night"] .ticket-revenue-y-axis span,
.admin-app[data-theme-mode="night"] .ticket-revenue-x-axis span,
.admin-app[data-theme-mode="night"] .ticket-revenue-legend strong {
  color: #dce8f8 !important;
}

.admin-app[data-theme-mode="night"] .ticket-revenue-grid-lines i {
  background: rgba(164, 190, 222, 0.22);
}

.admin-app[data-theme-mode="night"] .ticket-chart-period-controls select,
.admin-app[data-theme-mode="night"] .ticket-chart-date-range input {
  border-color: rgba(78, 116, 164, 0.52);
  background: rgba(11, 35, 61, 0.84);
  color: #dce8f8;
  color-scheme: dark;
}

.admin-app[data-theme-mode="night"] .ticket-chart-date-range span {
  color: #aebed2;
}

.admin-app[data-theme-mode="night"] .ticket-revenue-plot {
  border-bottom-color: rgba(164, 190, 222, 0.28);
}

.admin-app[data-theme-mode="night"] .ticket-revenue-legend {
  background: rgba(13, 32, 56, 0.92);
  border-color: rgba(78, 116, 164, 0.45);
  box-shadow: none;
}

.admin-app[data-theme-mode="night"] .ticket-revenue-legend article {
  border-color: rgba(78, 116, 164, 0.35);
}

.admin-app[data-theme-mode="night"] .ticket-revenue-legend small {
  color: #aebed2 !important;
}

@media (max-width: 760px) {
  .ticket-chart-controls {
    align-items: stretch;
  }

  .ticket-chart-date-range {
    width: 100%;
    margin-left: 0;
  }

  .ticket-chart-period-controls {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .ticket-chart-period-controls select,
  .ticket-chart-date-range input {
    flex: 1;
    min-width: 0;
  }

  .ticket-revenue-line-chart {
    grid-template-columns: 44px minmax(520px, 1fr);
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .ticket-revenue-legend {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
  }
}

/* 1.0.4 — event banner media can be image or video, including operator preview/live. */
.event-banner-preview.has-video,
.ticket-public-banner.has-video,
.ticket-admin-banner.has-video,
.ticket-banner-preview.has-video,
.event-card-cover.has-video,
.operator-preview-stage.has-video,
.operator-theme-background.has-video {
  position: relative !important;
  overflow: hidden !important;
  background-image: none !important;
}

.event-banner-video-layer,
.ticket-public-banner-video,
.ticket-admin-banner-video,
.ticket-banner-preview-video,
.event-card-banner-video,
.operator-preview-media,
.operator-theme-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.event-banner-video-layer,
.event-card-banner-video,
.operator-preview-media,
.operator-theme-video {
  z-index: 0 !important;
}

.ticket-public-banner-video {
  z-index: 0 !important;
}

.ticket-public-banner.has-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(4, 25, 62, 0.84),
    rgba(4, 25, 62, 0.18)
  );
}

.ticket-public-banner.has-video > :not(.ticket-public-banner-video),
.ticket-admin-banner.has-video > :not(.ticket-admin-banner-video),
.ticket-banner-preview.has-video > :not(.ticket-banner-preview-video),
.operator-preview-stage.has-video > :not(.operator-preview-media) {
  position: relative;
  z-index: 2;
}

.ticket-admin-banner.has-video::before,
.ticket-banner-preview.has-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 24, 58, 0.08),
    rgba(4, 24, 58, 0.78)
  );
}

.operator-theme-background.has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(3, 14, 28, 0.18);
}

.scanner-frame {
  transform: scale(0.96);
  transform-origin: center center;
}

.admin-app[data-theme-mode="night"]
  :is(
    .admin-main,
    .admin-content,
    .page-heading-row,
    .overview-welcome-card,
    .overview-import-card,
    .overview-chart-card,
    .overview-attendance-card,
    .report-hero,
    .report-funnel article,
    .room-occupancy-list article,
    .reservation-filter-bar,
    .reservation-table-panel,
    .ticket-admin-empty,
    .ticket-catalog-dialog,
    .ticket-banner-preview,
    .smtp-history-card,
    .smtp-deliverability-card,
    .smtp-deliverability-list article,
    .room-occupancy-list article,
    .report-funnel article,
    .server-health-chart,
    .typography-switch-row,
    .operator-config-row,
    .operator-image-upload > span,
    .organization-logo-card,
    .organization-logo-preview,
    .organization-logo-crop-stage,
    .whatsapp-test-row input,
    .event-banner-builder:not(.is-editing) .event-banner-preview
  ) {
  color: #dce8f8 !important;
  background-color: #14243a !important;
  border-color: #2d405a !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td,
    .reservation-order-table td,
    .reservation-order-table th,
    .participant-summary article,
    .report-summary-grid article,
    .infrastructure-summary article,
    .overview-email-grid article,
    .ticket-catalog-toolbar,
    .ticket-admin-prices > div,
    .ticket-price-editor > div,
    .ticket-payment-methods > div
  ) {
  color: #dce8f8 !important;
  background-color: #1a2d46 !important;
  border-color: #354b67 !important;
}

.admin-app[data-theme-mode="night"] .data-table tbody tr:nth-child(even) td {
  background-color: #172942 !important;
}

.admin-app[data-theme-mode="night"]
  :is(.secondary-button, .icon-button, .menu-button) {
  color: #eaf4ff !important;
  background: #203650 !important;
  border-color: #3b5571 !important;
}

.admin-app[data-theme-mode="night"] .typography-size-switch {
  background: #203650 !important;
  border-color: #3b5571 !important;
}

.admin-app[data-theme-mode="night"] .password-reset-copy {
  color: #eaf4ff !important;
}

.admin-app[data-theme-mode="night"] .organization-logo-crop-frame {
  box-shadow:
    0 0 0 999px rgba(2, 12, 28, 0.58),
    0 12px 36px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(73, 163, 255, 0.72);
}

.admin-app[data-theme-mode="night"] .whatsapp-test-row label > span {
  color: #eaf4ff !important;
}

.admin-app[data-theme-mode="night"]
  .typography-size-switch
  button:not(.is-active),
.admin-app[data-theme-mode="night"] .switch-control:not(.is-on) {
  color: #b9c8dc !important;
  background: transparent !important;
}

.admin-app[data-theme-mode="night"] .smtp-deliverability-list article strong {
  color: #92f3bf !important;
  background: rgba(24, 160, 93, 0.18) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .room-occupancy-list strong,
    .report-funnel strong,
    .server-health-chart-heading strong
  ) {
  color: #eaf4ff !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .room-occupancy-list span,
    .report-funnel span,
    .server-health-chart-heading small,
    .server-health-bars small
  ) {
  color: #b8c9df !important;
}

.overview-invitation-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dce8f4;
  border-radius: 24px;
  box-shadow: 0 18px 55px rgba(13, 55, 106, 0.08);
  display: grid;
  gap: 22px;
  padding: 26px;
}

.overview-invitation-card .overview-section-heading h3 {
  color: #0f1d32;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.035em;
  margin: 0;
}

.admin-app[data-theme-mode="night"] .overview-invitation-card {
  background: rgba(19, 36, 58, 0.92);
  border-color: #314b6c;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
}

.admin-app[data-theme-mode="night"]
  .overview-invitation-card
  .overview-section-heading
  h3 {
  color: #eaf4ff;
}

/* 1.0.45 - Privacy Event dashboard invitation and delivery cards. */
.admin-app .overview-invitation-card .overview-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.admin-app .overview-invitation-card .overview-metric-card {
  min-width: 0 !important;
  padding: 24px 22px !important;
}

.admin-app .overview-invitation-card .overview-metric-card > p {
  display: none !important;
}

.admin-app .overview-invitation-card .overview-metric-card small,
.admin-app .overview-invitation-card .overview-metric-card strong,
.admin-app .overview-invitation-card .overview-metric-card em {
  overflow-wrap: anywhere;
}

.admin-app .overview-import-card .overview-email-grid {
  display: grid !important;
  grid-template-columns: 1.18fr repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(92px, auto) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.admin-app
  .overview-import-card
  .overview-email-grid
  .email-status-tile.is-invitation-total {
  grid-row: span 2;
  align-content: center;
}

.admin-app .overview-import-card .email-status-tile {
  min-width: 0 !important;
}

@media (max-width: 1280px) {
  .admin-app .overview-invitation-card .overview-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .admin-app .overview-import-card .overview-email-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-app
    .overview-import-card
    .overview-email-grid
    .email-status-tile.is-invitation-total {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .admin-app .overview-invitation-card .overview-metric-grid,
  .admin-app .overview-import-card .overview-email-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .operator-config-row,
  .operator-primary-fields,
  .operator-scanner-actions,
  .infrastructure-summary,
  .smtp-top-grid,
  .report-funnel,
  .blast-fullscreen-modal .blast-modal-grid,
  .smtp-deliverability-list article {
    grid-template-columns: 1fr;
  }

  .smtp-test-control {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .operator-position-control {
    grid-column: 1;
  }

  .operator-pin-media {
    grid-template-columns: 1fr;
  }

  .typography-switch-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* 1.2.48 — final UI-only pass: consistent Jakarta Sans scale and industrial night mode. */
.admin-app,
.login-shell,
.operator-shell,
.ticket-public-page,
.admin-app * {
  font-family: var(--tixpro-font-sans) !important;
}

.admin-app[data-text-size="small"] {
  --tixpro-page-heading-size: clamp(34px, 3.65vw, 56px);
  --tixpro-page-subtitle-size: 14px;
  --tixpro-section-heading-size: 20px;
  --tixpro-card-heading-size: 15px;
  --tixpro-body-size: 12px;
  --tixpro-caption-size: 10px;
}

.admin-app[data-text-size="standard"],
.admin-app:not([data-text-size]),
.admin-app[data-text-size=""] {
  --tixpro-page-heading-size: clamp(40px, 4.15vw, 64px);
  --tixpro-page-subtitle-size: 15px;
  --tixpro-section-heading-size: 22px;
  --tixpro-card-heading-size: 16px;
  --tixpro-body-size: 13px;
  --tixpro-caption-size: 11px;
}

.admin-app[data-text-size="large"] {
  --tixpro-page-heading-size: clamp(46px, 4.65vw, 72px);
  --tixpro-page-subtitle-size: 16px;
  --tixpro-section-heading-size: 24px;
  --tixpro-card-heading-size: 18px;
  --tixpro-body-size: 14px;
  --tixpro-caption-size: 12px;
}

.admin-app
  :is(
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .report-hero-scope,
    .ticket-dashboard-view .page-title h1
  ) {
  color: #0f241a;
  font-size: var(--tixpro-page-heading-size) !important;
  font-weight: 560;
  line-height: 0.96 !important;
  letter-spacing: -0.06em !important;
}

.admin-app
  :is(
    .page-title p,
    .page-heading-row p,
    .campaign-page-lead,
    .report-hero-copy p,
    .ticket-dashboard-view .page-title p
  ) {
  color: #637466;
  font-size: var(--tixpro-page-subtitle-size) !important;
  line-height: 1.55 !important;
}

.admin-app
  :is(
    .overview-section-heading h3,
    .ticket-report-toolbar strong,
    .dashboard-report-card h3,
    .settings-form-card h3,
    .panel-title
  ) {
  font-size: var(--tixpro-section-heading-size);
  line-height: 1.2;
}

.admin-app
  :is(
    .data-table th,
    .organization-groups-table th,
    .reservation-order-table th
  ) {
  font-size: var(--tixpro-caption-size) !important;
}

.admin-app
  :is(
    .data-table td,
    .organization-groups-table td,
    .reservation-order-table td
  ) {
  font-size: var(--tixpro-body-size) !important;
}

.admin-app[data-theme-mode="night"] {
  --tixpro-night-bg: #07182b;
  --tixpro-night-surface: rgba(16, 31, 51, 0.96);
  --tixpro-night-surface-2: rgba(12, 27, 46, 0.96);
  --tixpro-night-field: #10243d;
  --tixpro-night-border: #2d4665;
  --tixpro-night-border-soft: rgba(99, 137, 180, 0.34);
  --tixpro-night-ink: #e8f2ff;
  --tixpro-night-muted: #a9bad0;
  --tixpro-night-faint: #7f91aa;
  color: var(--tixpro-night-ink) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 124, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #091d34 0%, var(--tixpro-night-bg) 100%) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .admin-main,
    .admin-content,
    .view-stack,
    .settings-page,
    .event-page,
    .dashboard-page
  ) {
  color: var(--tixpro-night-ink) !important;
  background:
    radial-gradient(
      circle at 78% 10%,
      rgba(0, 124, 255, 0.08),
      transparent 32%
    ),
    linear-gradient(180deg, #091d34 0%, var(--tixpro-night-bg) 100%) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .panel,
    .modal-card,
    .blast-fullscreen-modal,
    .blast-config-card,
    .blast-participants-card,
    .blast-script-field,
    .notification-popover,
    .overview-welcome-card,
    .overview-import-card,
    .overview-chart-card,
    .overview-attendance-card,
    .overview-invitation-card,
    .overview-email-grid article,
    .overview-status-card,
    .overview-stat-card,
    .event-card,
    .event-empty-card,
    .event-filter-bar,
    .event-toolbar,
    .event-capacity-editor,
    .event-banner-builder,
    .event-banner-preview,
    .participant-summary article,
    .participant-table-shell,
    .participant-filter-bar,
    .reservation-filter-bar,
    .reservation-table-panel,
    .campaign-summary-card,
    .campaign-report-card,
    .report-hero,
    .report-summary-grid article,
    .report-funnel article,
    .report-gate-table,
    .room-occupancy-list article,
    .infrastructure-summary article,
    .server-health-chart,
    .ticket-report-toolbar,
    .ticket-report-summary article,
    .ticket-admin-card,
    .ticket-admin-empty,
    .ticket-admin-prices > div,
    .ticket-price-editor > div,
    .ticket-payment-methods > div,
    .ticket-category-performance > div,
    .ticket-dashboard-panels,
    .dashboard-report-card,
    .dashboard-report-metrics > div,
    .dashboard-ticket-counts > div,
    .dashboard-ticket-counts > p,
    .settings-top-tabs,
    .settings-form-card,
    .organization-logo-card,
    .organization-logo-preview,
    .organization-groups-scroll,
    .participant-field-checklist label,
    .typography-switch-row,
    .operator-config-card,
    .operator-active-card,
    .operator-inline-new-fields,
    .operator-image-upload > span,
    .gate-event-summary,
    .smtp-history-card,
    .whatsapp-history-card,
    .operator-auth-dialog
  ) {
  color: var(--tixpro-night-ink) !important;
  background: linear-gradient(
    145deg,
    rgba(18, 35, 58, 0.97),
    rgba(10, 24, 42, 0.94)
  ) !important;
  border-color: var(--tixpro-night-border) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    table,
    thead,
    tbody,
    tr,
    th,
    td,
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td,
    .organization-groups-table,
    .organization-groups-table th,
    .organization-groups-table td,
    .reservation-order-table,
    .reservation-order-table th,
    .reservation-order-table td
  ) {
  color: var(--tixpro-night-ink) !important;
  background-color: var(--tixpro-night-surface-2) !important;
  border-color: var(--tixpro-night-border-soft) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .data-table thead th,
    .organization-groups-table thead th,
    .reservation-order-table thead th
  ) {
  color: #9fb1c9 !important;
  background-color: #0a1f38 !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .data-table tbody tr:nth-child(even) td,
    .organization-groups-table tbody tr:nth-child(even) td,
    .reservation-order-table tbody tr:nth-child(even) td
  ) {
  background-color: #102640 !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    input,
    select,
    textarea,
    .event-date-control,
    .event-time-control,
    .participant-quantity-control,
    .smtp-test-control input,
    .whatsapp-test-row input
  ) {
  color: var(--tixpro-night-ink) !important;
  background: var(--tixpro-night-field) !important;
  border-color: #395674 !important;
  color-scheme: dark;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .smtp-sender-field input,
.admin-app[data-theme-mode="night"] .smtp-sender-field input:disabled,
.admin-app[data-theme-mode="night"] .smtp-test-control input,
.admin-app[data-theme-mode="night"]
  .smtp-test-control
  input:not(:placeholder-shown),
.admin-app[data-theme-mode="night"] .smtp-test-control input:disabled {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.admin-app[data-theme-mode="night"] .smtp-test-control input::placeholder,
.admin-app[data-theme-mode="night"]
  .smtp-test-control
  input::-webkit-input-placeholder {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1;
}

.admin-app[data-theme-mode="night"] .smtp-password-toggle {
  color: #eaf4ff !important;
  background: rgba(23, 48, 79, 0.76) !important;
  border: 1px solid #385674 !important;
}

.admin-app[data-theme-mode="night"] .smtp-history-status-text {
  color: #ffffff !important;
}

.admin-app[data-theme-mode="night"] .whatsapp-test-row input,
.admin-app[data-theme-mode="night"]
  .whatsapp-test-row
  input:not(:placeholder-shown) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.admin-app[data-theme-mode="night"]
  .whatsapp-history-table
  tbody
  td:nth-child(2) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.admin-app[data-theme-mode="night"] .smtp-history-table tbody td:nth-child(2) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.admin-app[data-theme-mode="night"] :is(input, textarea)::placeholder {
  color: #7588a1 !important;
  opacity: 1;
}

.admin-app[data-theme-mode="night"]
  :is(
    h1,
    h2,
    h3,
    h4,
    strong,
    b,
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .report-hero-scope,
    .dashboard-report-card strong,
    .ticket-dashboard-view .ticket-report-summary strong
  ) {
  color: var(--tixpro-night-ink) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    p,
    small,
    span,
    label,
    em,
    .page-title p,
    .page-heading-row p,
    .campaign-page-lead,
    .report-hero-copy p,
    .dashboard-ticket-counts em,
    .ticket-dashboard-view .ticket-report-summary em
  ) {
  color: var(--tixpro-night-muted) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .secondary-button,
    .icon-button,
    .menu-button,
    .export-option,
    .event-row-menu button,
    .participant-row-menu button
  ) {
  color: #eaf4ff !important;
  background: #17304f !important;
  border-color: #385674 !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"]
  :is(.primary-button, .blue-button, button[class*="primary"]) {
  color: #fff !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .active-filters,
    .dropdown-menu,
    .event-scope-menu,
    .export-menu,
    .participant-row-menu,
    .campaign-delete-confirm-dialog,
    .operator-delete-confirm-dialog,
    .password-change-dialog
  ) {
  color: var(--tixpro-night-ink) !important;
  background: rgba(13, 29, 49, 0.98) !important;
  border-color: var(--tixpro-night-border) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .status-pill,
    .organization-status-pill,
    .event-card .pill,
    .summary-pill
  ) {
  color: #bfe2ff !important;
  background: rgba(0, 124, 255, 0.16) !important;
  border-color: rgba(73, 163, 255, 0.3) !important;
}

.admin-app[data-theme-mode="night"]
  :is(.danger-button, .delete-button, button[aria-label*="Hapus"]) {
  color: #ffb4b4 !important;
  background: rgba(255, 70, 70, 0.12) !important;
  border-color: rgba(255, 104, 104, 0.35) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .settings-top-tabs button.is-active,
    .typography-size-switch button.is-active
  ) {
  color: #ffffff !important;
  background: rgba(0, 124, 255, 0.22) !important;
  border-color: rgba(95, 174, 255, 0.58) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .report-hero-scope
  ) {
  color: #f3f8ff !important;
  text-shadow: 0 16px 46px rgba(0, 0, 0, 0.18);
}

.admin-app[data-theme-mode="night"] .admin-sidebar {
  background: linear-gradient(180deg, #0088ff 0%, #0077ee 100%) !important;
}

/* 1.2.50 — UI-only pass: smaller blue liquid-glass headers and balanced sidebar text. */
.admin-app {
  --tixpro-page-heading-size: clamp(27px, 2.35vw, 38px);
  --tixpro-page-subtitle-size: 15px;
}

.admin-app[data-text-size="small"] {
  --tixpro-page-heading-size: clamp(24px, 2.05vw, 34px);
  --tixpro-page-subtitle-size: 14px;
}

.admin-app[data-text-size="large"] {
  --tixpro-page-heading-size: clamp(31px, 2.7vw, 44px);
  --tixpro-page-subtitle-size: 16px;
}

.admin-app
  :is(
    .overview-welcome-card h2,
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .report-hero-scope,
    .ticket-dashboard-view > h1,
    .ticket-dashboard-view .page-title h1
  ) {
  font-family: var(--tixpro-font-sans) !important;
  font-size: var(--tixpro-page-heading-size) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
}

.admin-app
  :is(
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .report-hero-scope,
    .ticket-dashboard-view > h1,
    .ticket-dashboard-view .page-title h1
  ) {
  display: inline-flex !important;
  width: fit-content;
  max-width: min(100%, 980px);
  align-items: center;
  padding: 8px 19px 10px;
  border: 1px solid rgba(111, 181, 255, 0.42);
  border-radius: 23px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.76),
      rgba(229, 244, 255, 0.46)
    ),
    radial-gradient(circle at 8% 0%, rgba(0, 132, 255, 0.18), transparent 38%),
    radial-gradient(
      circle at 95% 100%,
      rgba(61, 153, 255, 0.12),
      transparent 42%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 14px 38px rgba(22, 103, 186, 0.11);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.admin-app
  :is(
    .page-title p,
    .page-heading-row p,
    .campaign-page-lead,
    .report-hero-copy p,
    .ticket-dashboard-view .page-title p
  ) {
  font-size: var(--tixpro-page-subtitle-size) !important;
}

.admin-sidebar .nav-section-label {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  line-height: 1.2 !important;
}

.admin-sidebar .sidebar-nav button {
  min-height: 46px;
  gap: 11px;
}

.admin-sidebar .sidebar-nav button > span {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.admin-sidebar .sidebar-nav button.is-active > span {
  font-weight: 720 !important;
}

.admin-sidebar .sidebar-nav button > small {
  font-size: 11px !important;
  font-weight: 760 !important;
}

.admin-sidebar .sidebar-workspace strong {
  font-size: 15px !important;
  font-weight: 820 !important;
}

.admin-sidebar .sidebar-workspace small {
  font-size: 12px !important;
  font-weight: 720 !important;
}

.admin-sidebar .sidebar-workspace small,
.admin-sidebar .sidebar-profile small {
  font-size: 11px !important;
}

.admin-sidebar .sidebar-workspace small {
  font-size: 12px !important;
  font-weight: 720 !important;
}

.admin-sidebar .sidebar-profile strong {
  font-size: 13px !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .report-hero-scope,
    .ticket-dashboard-view > h1,
    .ticket-dashboard-view .page-title h1
  ) {
  color: #f3f8ff !important;
  border-color: rgba(86, 160, 255, 0.38);
  background:
    linear-gradient(135deg, rgba(19, 45, 78, 0.74), rgba(8, 28, 52, 0.54)),
    radial-gradient(circle at 10% 0%, rgba(0, 132, 255, 0.26), transparent 42%),
    radial-gradient(
      circle at 92% 100%,
      rgba(61, 153, 255, 0.18),
      transparent 44%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 54px rgba(0, 0, 0, 0.28) !important;
  text-shadow: none !important;
}

.admin-app .report-hero {
  border-color: rgba(111, 181, 255, 0.38) !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.7),
      rgba(229, 244, 255, 0.42)
    ),
    radial-gradient(circle at 8% 0%, rgba(0, 132, 255, 0.16), transparent 40%),
    radial-gradient(
      circle at 96% 100%,
      rgba(61, 153, 255, 0.12),
      transparent 45%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 18px 48px rgba(22, 103, 186, 0.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

.admin-app .report-hero .eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
}

.admin-app .report-hero .report-hero-scope {
  font-size: clamp(25px, 2.2vw, 36px) !important;
  padding: 7px 17px 9px !important;
}

.admin-app[data-theme-mode="night"] .report-hero {
  border-color: rgba(86, 160, 255, 0.35) !important;
  background:
    linear-gradient(135deg, rgba(18, 45, 78, 0.74), rgba(7, 24, 46, 0.6)),
    radial-gradient(circle at 8% 0%, rgba(0, 132, 255, 0.22), transparent 42%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 54px rgba(0, 0, 0, 0.24) !important;
}

@media (max-width: 760px) {
  .admin-app
    :is(
      .page-title h1,
      .page-heading-row h1,
      .campaign-page-title,
      .report-hero-scope,
      .ticket-dashboard-view > h1,
      .ticket-dashboard-view .page-title h1
    ) {
    padding: 9px 16px 11px;
    border-radius: 22px;
  }

  .admin-sidebar .sidebar-nav button > span {
    font-size: 14px !important;
  }
}

/* 1.2.51 — laporan peserta cleanup + dashboard tiket invitation/public parity */
.admin-app .report-section-eyebrow {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 18px !important;
  padding: 0 24px !important;
  line-height: 1.2 !important;
}

.admin-app .panel > .report-section-eyebrow:first-child {
  margin-left: 0 !important;
}

.admin-app .dashboard-report-description {
  margin: -6px 0 18px;
  color: var(--muted, #75849a);
  font-size: var(--tixpro-page-subtitle-size, 14px);
  font-weight: 650;
}

.admin-app .dashboard-whatsapp-grid {
  margin-top: 16px;
}

.admin-app .dashboard-ticket-gate-card {
  grid-column: 1 / -1;
}

.admin-app .dashboard-ticket-hour-chart {
  min-height: 190px;
  margin-top: 18px;
}

.admin-app .dashboard-ticket-hour-axis {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted, #75849a);
  font-size: 12px;
  font-weight: 760;
  text-align: center;
}

.admin-app[data-theme-mode="night"] .dashboard-report-description,
.admin-app[data-theme-mode="night"] .dashboard-ticket-hour-axis {
  color: rgba(218, 230, 246, 0.74);
}

/* 1.2.54 — hard-lock compact page headers + wider Dashboard Tiket WhatsApp status. */
.admin-app {
  --tixpro-page-heading-size: clamp(20px, 1.45vw, 26px);
}

.admin-app[data-text-size="small"] {
  --tixpro-page-heading-size: clamp(18px, 1.25vw, 23px);
}

.admin-app[data-text-size="large"] {
  --tixpro-page-heading-size: clamp(22px, 1.7vw, 30px);
}

.admin-app
  :is(
    .overview-welcome-card h2,
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .report-hero-scope,
    .ticket-dashboard-view > h1,
    .ticket-dashboard-view .page-title h1
  ) {
  font-size: var(--tixpro-page-heading-size) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  max-width: min(100%, 680px) !important;
  white-space: normal !important;
}

.admin-app
  :is(
    .page-title h1,
    .page-heading-row h1,
    .campaign-page-title,
    .report-hero-scope,
    .ticket-dashboard-view > h1,
    .ticket-dashboard-view .page-title h1
  ) {
  padding: 8px 14px !important;
  border-radius: 22px !important;
}

.admin-app .overview-welcome-card h2 {
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-app .overview-welcome-card {
  padding: 28px 36px !important;
}

.admin-app .report-hero .report-hero-scope {
  font-size: var(--tixpro-page-heading-size) !important;
  max-width: 420px !important;
}

.admin-app .dashboard-ticket-whatsapp-card,
.admin-app .ticket-dashboard-view .dashboard-ticket-purchase-card,
.admin-app .ticket-dashboard-view .dashboard-ticket-count-card,
.admin-app .ticket-dashboard-view .dashboard-ticket-status-card {
  grid-column: 1 / -1;
}

.admin-app .dashboard-ticket-whatsapp-card .dashboard-whatsapp-grid,
.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-purchase-card
  .dashboard-report-metrics,
.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-status-card
  .dashboard-whatsapp-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch;
}

.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-count-card
  .dashboard-ticket-counts {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  overflow-x: auto !important;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-count-card
  .dashboard-ticket-counts
  > div,
.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-count-card
  .dashboard-ticket-counts
  > p {
  flex: 0 0 min(260px, 24vw) !important;
  min-width: 210px !important;
  grid-column: auto !important;
}

.organization-account-details {
  margin: 0 0 16px;
}

.organization-account-details > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(0, 124, 255, 0.28);
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(0, 124, 255, 0.95),
    rgba(28, 126, 255, 0.76)
  );
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 124, 255, 0.18);
  list-style: none;
}

.organization-account-details > summary::-webkit-details-marker {
  display: none;
}

.organization-account-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  margin: 0 0 16px;
  padding: 0 18px;
  border: 1px solid rgba(0, 124, 255, 0.28);
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(0, 124, 255, 0.95),
    rgba(28, 126, 255, 0.76)
  );
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 124, 255, 0.18);
}

.organization-account-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(205, 224, 246, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
}

.organization-account-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.organization-account-form span {
  color: #6f8298;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.organization-account-form input,
.organization-account-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(205, 224, 246, 0.94);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #10223a;
  font: inherit;
  padding: 0 12px;
}

.organization-group-backdrop {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.organization-group-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.organization-group-dialog .modal-heading {
  margin-bottom: 0;
}

.organization-group-modal-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.organization-date-control {
  display: block;
  position: relative;
}

.organization-date-control input {
  padding-right: 46px;
}

.organization-date-control::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border: 2px solid #6f8298;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: inset 0 4px 0 rgba(111, 130, 152, 0.18);
}

.organization-group-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.organization-group-form-actions button {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 14px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.organization-group-cancel-button {
  border: 1px solid rgba(205, 224, 246, 0.94);
  background: rgba(255, 255, 255, 0.9);
  color: #263f35;
}

.organization-group-save-button {
  border: 1px solid rgba(0, 124, 255, 0.28);
  background: linear-gradient(135deg, #007cff, #1569e9);
  color: #fff;
}

.organization-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.organization-status-pill.is-active {
  background: rgba(35, 186, 108, 0.14);
  color: #13844f;
}

.organization-status-pill.is-inactive {
  background: rgba(239, 68, 68, 0.12);
  color: #b4232a;
}

.admin-app[data-theme-mode="night"] .organization-account-form {
  border-color: rgba(137, 180, 255, 0.24);
  background: rgba(10, 32, 63, 0.78);
}

.admin-app[data-theme-mode="night"] .organization-account-form span {
  color: rgba(226, 238, 255, 0.72);
}

.admin-app[data-theme-mode="night"] .organization-account-form input,
.admin-app[data-theme-mode="night"] .organization-account-form select {
  border-color: rgba(137, 180, 255, 0.28);
  background: rgba(16, 43, 77, 0.92);
  color: #eaf4ff;
}

.admin-app[data-theme-mode="night"] .organization-date-control::after {
  border-color: rgba(226, 238, 255, 0.78);
  box-shadow: inset 0 4px 0 rgba(226, 238, 255, 0.12);
}

.admin-app[data-theme-mode="night"] .organization-group-cancel-button {
  border-color: rgba(137, 180, 255, 0.28);
  background: rgba(16, 43, 77, 0.92);
  color: #eaf4ff;
}

.admin-app[data-theme-mode="night"] .organization-status-pill.is-active {
  background: rgba(35, 186, 108, 0.18);
  color: #92f2bd;
}

.admin-app[data-theme-mode="night"] .organization-status-pill.is-inactive {
  background: rgba(239, 68, 68, 0.18);
  color: #ffb4b4;
}

@media (max-width: 980px) {
  .admin-app .dashboard-ticket-whatsapp-card .dashboard-whatsapp-grid,
  .admin-app
    .ticket-dashboard-view
    .dashboard-ticket-purchase-card
    .dashboard-report-metrics,
  .admin-app
    .ticket-dashboard-view
    .dashboard-ticket-status-card
    .dashboard-whatsapp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .organization-account-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-app .dashboard-ticket-whatsapp-card .dashboard-whatsapp-grid,
  .admin-app
    .ticket-dashboard-view
    .dashboard-ticket-purchase-card
    .dashboard-report-metrics,
  .admin-app
    .ticket-dashboard-view
    .dashboard-ticket-status-card
    .dashboard-whatsapp-grid {
    grid-template-columns: 1fr !important;
  }

  .organization-account-form {
    grid-template-columns: 1fr;
  }

  .organization-group-form-actions {
    flex-direction: column-reverse;
  }

  .organization-group-form-actions button {
    width: 100%;
  }
}

/* 1.2.57 — final UI lock: compact, consistent page headers. */
.admin-app {
  --tixpro-page-heading-size: clamp(22px, 1.55vw, 28px) !important;
  --tixpro-page-subtitle-size: 13px !important;
}

.admin-app[data-text-size="small"] {
  --tixpro-page-heading-size: clamp(19px, 1.25vw, 24px) !important;
  --tixpro-page-subtitle-size: 12px !important;
}

.admin-app[data-text-size="large"] {
  --tixpro-page-heading-size: clamp(24px, 1.8vw, 32px) !important;
  --tixpro-page-subtitle-size: 14px !important;
}

.admin-app .overview-welcome-card h2,
.admin-app .page-title h1,
.admin-app .page-heading-row h1,
.admin-app .page-heading-row h1.participant-list-title,
.admin-app .page-heading-row h1.campaign-page-title,
.admin-app .campaign-page-title,
.admin-app .report-hero .report-hero-scope,
.admin-app .report-hero-scope,
.admin-app .ticket-dashboard-view > h1,
.admin-app .ticket-dashboard-view .page-title h1 {
  display: inline-block !important;
  width: auto !important;
  max-width: min(100%, 760px) !important;
  margin: 0 !important;
  font-size: var(--tixpro-page-heading-size) !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  white-space: normal !important;
}

.admin-app .overview-welcome-card h2 {
  display: block !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-app .page-title h1,
.admin-app .page-heading-row h1,
.admin-app .campaign-page-title,
.admin-app .ticket-dashboard-view > h1,
.admin-app .ticket-dashboard-view .page-title h1,
.admin-app .report-hero .report-hero-scope {
  padding: 7px 13px !important;
  border-radius: 18px !important;
}

.admin-app .overview-welcome-card {
  padding: 24px 30px !important;
}

.admin-app .report-hero .report-hero-scope {
  max-width: 340px !important;
}

.admin-app .page-title p,
.admin-app .page-heading-row p,
.admin-app .overview-welcome-card p,
.admin-app .campaign-page-lead,
.admin-app .report-hero-copy p,
.admin-app .ticket-dashboard-view .page-title p {
  font-size: var(--tixpro-page-subtitle-size) !important;
  line-height: 1.45 !important;
}

@media (max-width: 720px) {
  .admin-app {
    --tixpro-page-heading-size: clamp(20px, 6vw, 25px) !important;
  }
  .admin-app .page-title h1,
  .admin-app .page-heading-row h1,
  .admin-app .campaign-page-title,
  .admin-app .ticket-dashboard-view > h1,
  .admin-app .ticket-dashboard-view .page-title h1,
  .admin-app .report-hero .report-hero-scope {
    padding: 6px 10px !important;
    border-radius: 16px !important;
  }
}

/* 1.2.66 — WhatsApp SWTP: spacing turun sedikit dan teks input regular. */
.whatsapp-settings-grid .settings-token-field {
  max-width: 360px;
  min-width: 0;
}

.settings-secret-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.settings-secret-input-wrap input {
  width: 100%;
  padding-right: 52px !important;
}

.settings-secret-toggle {
  position: absolute;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #58708b;
  background: rgba(15, 92, 180, 0.08);
  cursor: pointer;
  opacity: 1;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.settings-secret-toggle:hover {
  color: #0b7cff;
  background: rgba(11, 124, 255, 0.14);
}

.settings-secret-toggle.is-locked {
  opacity: 0.86;
}

.settings-secret-toggle.has-secret {
  color: #0b7cff;
  background: rgba(11, 124, 255, 0.14);
}

.admin-app[data-theme-mode="night"] .settings-secret-toggle {
  color: #b8cfff;
  background: rgba(137, 180, 255, 0.15);
}

.admin-app[data-theme-mode="night"] .settings-secret-toggle.has-secret {
  color: #d8e7ff;
  background: rgba(40, 132, 255, 0.24);
}

/* 1.0.32 — Campaign page wording, method filter, and report table polish. */
.admin-app .campaign-title-event {
  margin: 8px 0 0 !important;
  color: #738195 !important;
  font-size: var(--tixpro-page-subtitle-size, 13px) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.admin-app[data-theme-mode="night"] .campaign-title-event {
  color: rgba(255, 255, 255, 0.78) !important;
}

.campaign-toolbar-title-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: nowrap;
}

.campaign-toolbar-title-row h3 {
  margin: 0 !important;
  color: #17253b;
  font-weight: 900 !important;
  white-space: nowrap;
}

.campaign-method-filter {
  display: inline-flex;
  align-items: center;
  min-width: 178px;
}

.campaign-method-filter select {
  width: 100%;
  min-height: 38px;
  padding: 0 36px 0 13px;
  border: 1px solid rgba(184, 205, 229, 0.92);
  border-radius: 10px;
  color: #24364f;
  background: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 800;
  outline: 0;
}

.campaign-total-blasting {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-top: 3px;
}

.campaign-total-blasting strong {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #17253b;
  font-weight: 900;
}

.campaign-total-blasting small {
  overflow: hidden;
  color: #7d8d9f;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-total-blasting b {
  color: #14243f;
  font-size: 16px;
  font-weight: 900;
}

.campaign-table-panel .table-scroll {
  overflow-x: auto;
}

.campaign-table {
  min-width: 1320px;
}

.campaign-table th,
.campaign-table td,
.campaign-table td strong,
.campaign-table .table-subtext,
.campaign-table .campaign-status {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.campaign-table th,
.campaign-table td {
  white-space: nowrap;
}

.campaign-table th:nth-child(4) {
  min-width: 160px;
  white-space: nowrap !important;
}

.blast-modal-header p {
  max-width: min(980px, calc(100vw - 220px));
  white-space: nowrap;
}

.blast-target-summary .blast-target-count {
  display: block;
}

.blast-target-summary .blast-target-help {
  display: block;
  margin-top: 6px;
}

.blast-participants-card .reservation-empty .blast-empty-help {
  font-size: 10px !important;
  font-weight: 800 !important;
}

.admin-app[data-theme-mode="night"] .campaign-toolbar-title-row h3,
.admin-app[data-theme-mode="night"] .campaign-total-blasting strong,
.admin-app[data-theme-mode="night"] .campaign-total-blasting b {
  color: #eef6ff !important;
}

.admin-app[data-theme-mode="night"]
  .blast-fullscreen-modal
  .blast-modal-close-button,
.admin-app[data-theme-mode="night"]
  .blast-fullscreen-modal
  .blast-target-summary,
.admin-app[data-theme-mode="night"]
  .blast-fullscreen-modal
  .blast-method-state {
  color: #dce8f8 !important;
  background: #102842 !important;
  border-color: rgba(106, 151, 198, 0.42) !important;
}

.admin-app[data-theme-mode="night"]
  .blast-fullscreen-modal
  .blast-target-summary
  :is(strong, span, small, svg),
.admin-app[data-theme-mode="night"] .blast-fullscreen-modal .blast-target-count,
.admin-app[data-theme-mode="night"] .blast-fullscreen-modal .blast-target-help {
  color: #dce8f8 !important;
}

.admin-app[data-theme-mode="night"] .campaign-method-filter select {
  color: #dce8f8 !important;
  background: #102842 !important;
  border-color: rgba(106, 151, 198, 0.42) !important;
}

.admin-app[data-theme-mode="night"] .campaign-method-filter option {
  color: #dce8f8;
  background: #102842;
}

@media (max-width: 860px) {
  .campaign-toolbar-title-row {
    display: grid;
    width: 100%;
  }

  .campaign-method-filter {
    width: min(100%, 260px);
  }

  .blast-modal-header p {
    max-width: 100%;
    white-space: normal;
  }
}

/* 1.0.5 — night mode color polish only: reduce bright controls, icons, and placeholders. */
.admin-app[data-theme-mode="night"] {
  --tixpro-night-control: #102842;
  --tixpro-night-control-2: #14304d;
  --tixpro-night-control-hover: #19395b;
  --tixpro-night-control-border: rgba(106, 151, 198, 0.42);
  --tixpro-night-icon-bg: rgba(145, 176, 212, 0.12);
  --tixpro-night-icon-bg-soft: rgba(145, 176, 212, 0.16);
  --tixpro-night-placeholder: #778aa3;
  --tixpro-night-chip-bg: rgba(132, 163, 199, 0.14);
  --tixpro-night-chip-border: rgba(132, 163, 199, 0.24);
}

.admin-app[data-theme-mode="night"]
  :is(
    input,
    select,
    textarea,
    .search-box,
    .reservation-search,
    .event-filter-trigger,
    .event-filter-select,
    .event-date-range-filter input,
    .toolbar-filters .event-filter-select,
    .toolbar-filters .event-filter-trigger,
    .toolbar-filters .event-period-filter,
    .ticket-report-toolbar select,
    .participant-filter-bar select,
    .reservation-toolbar select,
    .data-toolbar select
  ) {
  color: #dce8f8 !important;
  background: var(--tixpro-night-control) !important;
  border-color: var(--tixpro-night-control-border) !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] :is(input, textarea)::placeholder,
.admin-app[data-theme-mode="night"]
  :is(input, textarea)::-webkit-input-placeholder {
  color: var(--tixpro-night-placeholder) !important;
  opacity: 1 !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .search-box svg,
    .reservation-search svg,
    .event-filter-trigger svg,
    .event-filter-select svg,
    .settings-icon svg,
    .metric-card-top svg,
    .email-status-tile svg,
    .ticket-report-toolbar svg,
    .ticket-report-summary svg,
    .dashboard-report-card svg,
    .participant-summary svg,
    .overview-metric-card svg,
    .event-card svg,
    .empty-state svg,
    .data-toolbar svg
  ) {
  color: #9fb4cf !important;
  stroke: currentColor !important;
}

.admin-app[data-theme-mode="night"] .toolbar-filters .event-filter-menu {
  background: #0f2438;
  border-color: rgba(106, 151, 198, 0.42);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.admin-app[data-theme-mode="night"] .toolbar-filters .event-filter-menu button {
  color: #dce8f8;
}

.admin-app[data-theme-mode="night"]
  .toolbar-filters
  .event-filter-menu
  button:hover,
.admin-app[data-theme-mode="night"]
  .toolbar-filters
  .event-filter-menu
  button.is-selected {
  color: #fff;
  background: rgba(23, 129, 255, 0.18);
}

.admin-app[data-theme-mode="night"]
  :is(
    .settings-icon,
    .metric-card-top > span,
    .email-status-tile > span,
    .channel-icon,
    .overview-metric-card .metric-card-top > span,
    .ticket-report-toolbar .settings-icon,
    .checkout-review-icon,
    .operator-access-icon
  ) {
  color: #9fb4cf !important;
  background: var(--tixpro-night-icon-bg-soft) !important;
  border-color: rgba(132, 163, 199, 0.22) !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"]
  :is(.metric-purple .metric-card-top > span, .tile-purple > span) {
  color: #b8aef5 !important;
  background: rgba(139, 116, 246, 0.15) !important;
}

.admin-app[data-theme-mode="night"] :is(.metric-blue .metric-card-top > span) {
  color: #96c7ff !important;
  background: rgba(58, 141, 255, 0.15) !important;
}

.admin-app[data-theme-mode="night"]
  :is(.metric-orange .metric-card-top > span, .tile-orange > span) {
  color: #e8c98b !important;
  background: rgba(220, 158, 65, 0.15) !important;
}

.admin-app[data-theme-mode="night"]
  :is(.metric-green .metric-card-top > span, .tile-green > span) {
  color: #9eddb8 !important;
  background: rgba(66, 170, 112, 0.15) !important;
}

.admin-app[data-theme-mode="night"]
  :is(.metric-red .metric-card-top > span, .tile-red > span) {
  color: #f0aaaa !important;
  background: rgba(224, 88, 88, 0.14) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .overview-event-filter,
    .status-chip,
    .event-mode-row span,
    .event-card .pill,
    .summary-pill,
    .payment-ledger-status,
    .ticket-catalog-status,
    .organization-status-pill,
    .operator-participant-status
  ) {
  color: #b8cbe2 !important;
  background: var(--tixpro-night-chip-bg) !important;
  border-color: var(--tixpro-night-chip-border) !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .overview-event-filter strong,
.admin-app[data-theme-mode="night"] .overview-event-filter span {
  color: #dce8f8 !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .secondary-button,
    .icon-button,
    .menu-button,
    .event-card-actions button,
    .event-card-body button,
    .new-event-card > span,
    .ticket-chart-tabs button:not(.is-active),
    .event-banner-editor-actions button:not(:last-child)
  ) {
  color: #c9d8ea !important;
  background: var(--tixpro-night-control-2) !important;
  border-color: var(--tixpro-night-control-border) !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .secondary-button:hover,
    .icon-button:hover,
    .menu-button:hover,
    .event-card-actions button:hover,
    .event-card-body button:hover,
    .ticket-chart-tabs button:not(.is-active):hover
  ) {
  background: var(--tixpro-night-control-hover) !important;
  border-color: rgba(128, 176, 230, 0.52) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .event-card-actions button[disabled],
    .secondary-button:disabled,
    .primary-button:disabled,
    button:disabled
  ) {
  color: rgba(164, 181, 204, 0.48) !important;
  background: rgba(24, 44, 68, 0.72) !important;
  border-color: rgba(106, 151, 198, 0.2) !important;
  opacity: 1 !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .participant-select-column input[type="checkbox"],
    .blast-select-column input,
    .campaign-select-column input,
    .data-table input[type="checkbox"],
    .reservation-order-table input[type="checkbox"]
  ) {
  accent-color: #3b8cff;
  background-color: #172943 !important;
  border-color: rgba(150, 172, 199, 0.45) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .overview-metric-card i,
    .event-card-cover.no-banner,
    .operator-preview-stage:not([style*="background-image"])
  ) {
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(65, 137, 224, 0.16),
      transparent 30%
    ),
    linear-gradient(135deg, rgba(24, 47, 76, 0.92), rgba(11, 25, 43, 0.96)) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .overview-hour-chart span,
    .dashboard-ticket-hour-chart span,
    .ticket-revenue-bars i
  ) {
  background: linear-gradient(180deg, #1c8cff, #0865d8) !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .active-filters {
  background: rgba(12, 29, 49, 0.96) !important;
  border-color: rgba(88, 128, 174, 0.34) !important;
}

.admin-app[data-theme-mode="night"] .active-filters label {
  min-height: 44px;
  padding: 0 !important;
  overflow: hidden;
  background: #102842 !important;
  border: 1px solid rgba(106, 151, 198, 0.42) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .active-filters label > span {
  display: none !important;
}

.admin-app[data-theme-mode="night"] .active-filters select {
  width: 100%;
  min-height: 42px;
  padding: 0 36px 0 14px !important;
  color: #dce8f8 !important;
  background: #102842 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .active-filters select option {
  color: #dce8f8;
  background: #102842;
}

/* 1.0.7 — header text contrast and rectangular liquid-glass page titles. */
.admin-app {
  --tixpro-page-heading-size: clamp(24px, 1.65vw, 30px) !important;
}

.admin-app[data-text-size="small"] {
  --tixpro-page-heading-size: clamp(21px, 1.35vw, 26px) !important;
}

.admin-app[data-text-size="large"] {
  --tixpro-page-heading-size: clamp(26px, 1.9vw, 34px) !important;
}

.admin-app .page-title h1,
.admin-app .page-heading-row h1,
.admin-app .page-heading-row h1.participant-list-title,
.admin-app .page-heading-row h1.campaign-page-title,
.admin-app .campaign-page-title,
.admin-app .ticket-dashboard-view > h1,
.admin-app .ticket-dashboard-view .page-title h1,
.admin-app .report-hero .report-hero-scope,
.admin-app .report-hero-scope {
  padding: 8px 16px !important;
  border-radius: 12px !important;
}

.admin-app[data-theme-mode="night"] .overview-welcome-card h2,
.admin-app[data-theme-mode="night"] .page-title h1,
.admin-app[data-theme-mode="night"] .page-heading-row h1,
.admin-app[data-theme-mode="night"] .page-heading-row h1.participant-list-title,
.admin-app[data-theme-mode="night"] .page-heading-row h1.campaign-page-title,
.admin-app[data-theme-mode="night"] .campaign-page-title,
.admin-app[data-theme-mode="night"] .ticket-dashboard-view > h1,
.admin-app[data-theme-mode="night"] .ticket-dashboard-view .page-title h1,
.admin-app[data-theme-mode="night"] .report-hero .report-hero-scope,
.admin-app[data-theme-mode="night"] .report-hero-scope,
.admin-app[data-theme-mode="night"] .overview-event-filter strong {
  color: #ffffff !important;
}

.admin-app[data-theme-mode="night"] .overview-event-filter span {
  color: rgba(255, 255, 255, 0.72) !important;
}

.admin-app[data-theme-mode="night"] .page-title h1,
.admin-app[data-theme-mode="night"] .page-heading-row h1,
.admin-app[data-theme-mode="night"] .page-heading-row h1.participant-list-title,
.admin-app[data-theme-mode="night"] .page-heading-row h1.campaign-page-title,
.admin-app[data-theme-mode="night"] .campaign-page-title,
.admin-app[data-theme-mode="night"] .ticket-dashboard-view > h1,
.admin-app[data-theme-mode="night"] .ticket-dashboard-view .page-title h1,
.admin-app[data-theme-mode="night"] .report-hero .report-hero-scope,
.admin-app[data-theme-mode="night"] .report-hero-scope {
  border-color: rgba(96, 166, 255, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(18, 48, 84, 0.82), rgba(9, 28, 52, 0.66)),
    radial-gradient(circle at 12% 0%, rgba(47, 142, 255, 0.26), transparent 44%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 42px rgba(0, 0, 0, 0.22) !important;
}

@media (max-width: 720px) {
  .admin-app .page-title h1,
  .admin-app .page-heading-row h1,
  .admin-app .campaign-page-title,
  .admin-app .ticket-dashboard-view > h1,
  .admin-app .ticket-dashboard-view .page-title h1,
  .admin-app .report-hero .report-hero-scope {
    padding: 7px 12px !important;
    border-radius: 11px !important;
  }
}

/* 1.0.8 — keep event/ticket banner images visible in night mode. */
.admin-app[data-theme-mode="night"]
  :is(
    .event-card-cover.has-banner,
    .ticket-admin-banner,
    .ticket-banner-preview,
    .ticket-public-banner,
    .operator-preview-stage[style*="background-image"],
    .gate-event-modern[style*="background-image"]
  ) {
  background-color: #0b1f38 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
}

.admin-app[data-theme-mode="night"] .event-card-cover.has-banner {
  min-height: 230px;
}

.admin-app[data-theme-mode="night"] .event-card-cover.has-banner::before,
.admin-app[data-theme-mode="night"] .event-card-cover.has-banner::after,
.admin-app[data-theme-mode="night"] .ticket-admin-banner::before,
.admin-app[data-theme-mode="night"] .ticket-admin-banner::after,
.admin-app[data-theme-mode="night"] .ticket-banner-preview::before,
.admin-app[data-theme-mode="night"] .ticket-banner-preview::after,
.admin-app[data-theme-mode="night"] .ticket-public-banner::before,
.admin-app[data-theme-mode="night"] .ticket-public-banner::after {
  pointer-events: none;
}

.admin-app[data-theme-mode="night"]
  .event-card-cover.has-banner
  .event-monogram {
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.admin-app[data-theme-mode="night"]
  .event-banner-preview.has-image
  .event-banner-image-layer {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 1.0.10 — keep event card banners visible in night mode with a real image layer. */
.event-card-cover.has-banner {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.event-card-banner-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.event-card-cover.has-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 22, 45, 0.04),
    rgba(8, 22, 45, 0.68)
  );
}

.event-card-cover.has-banner > :not(.event-card-banner-img) {
  position: relative;
  z-index: 2;
}

.admin-app[data-theme-mode="night"] .event-card-cover.has-banner {
  background: #0b1f38 !important;
}

.admin-app[data-theme-mode="night"] .event-card-banner-img {
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

.admin-app[data-theme-mode="night"] .event-card-cover.has-banner::after {
  background: linear-gradient(
    180deg,
    rgba(5, 18, 39, 0.08),
    rgba(5, 18, 39, 0.58)
  ) !important;
}

.admin-app[data-theme-mode="night"]
  .event-card-cover.has-banner
  .event-monogram {
  opacity: 0.28;
}

/* 1.0.9 — slightly larger dashboard welcome headline. */
.admin-app .overview-welcome-card h2 {
  font-size: clamp(27px, 2.05vw, 38px) !important;
  line-height: 1.1 !important;
}

.admin-app[data-theme-mode="night"] .overview-welcome-card h2 {
  color: #ffffff !important;
}

/* 1.0.16 — normalize password typography with email fields. */
:is(
    .auth-form,
    .operator-auth-dialog form,
    .admin-password-form,
    .admin-password-dialog,
    .settings-field-grid,
    .modal-card
  )
  label:has(input[type="password"])
  > span,
:is(
    .auth-form,
    .operator-auth-dialog form,
    .admin-password-form,
    .admin-password-dialog,
    .settings-field-grid,
    .modal-card
  )
  label:has(.password-field)
  > span,
:is(
    .auth-form,
    .operator-auth-dialog form,
    .admin-password-form,
    .admin-password-dialog,
    .settings-field-grid,
    .modal-card
  )
  label:has(.operator-password-field)
  > span {
  font-family: var(--tixpro-font-sans) !important;
  font-size: max(var(--tixpro-body-size, 13px), 13px) !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

:is(
  input[type="password"],
  .password-field input,
  .operator-password-field input,
  .admin-password-form input,
  .admin-password-dialog input
) {
  font-family: var(--tixpro-font-sans) !important;
  font-size: max(var(--tixpro-body-size, 13px), 13px) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

:is(
  input[type="password"],
  .password-field input,
  .operator-password-field input,
  .admin-password-form input,
  .admin-password-dialog input
)::placeholder {
  font-family: var(--tixpro-font-sans) !important;
  font-size: max(var(--tixpro-body-size, 13px), 13px) !important;
  letter-spacing: 0 !important;
}

/* 1.0.18 — login password value must visually match the email value. */
.auth-form .password-field input {
  font-family: var(--tixpro-font-sans) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

.auth-form .password-field input::placeholder {
  font-family: var(--tixpro-font-sans) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* 1.0.20 — login email and visible password values use the same balanced type scale. */
.auth-form > label > input,
.auth-form .password-field,
.auth-form .password-field input {
  font-family: var(--tixpro-font-sans) !important;
  font-size: clamp(18px, 1.2vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.auth-form .password-field input::placeholder {
  font-size: clamp(18px, 1.2vw, 24px) !important;
  font-weight: 400 !important;
}

/* 1.0.23 — event cards and banner cropper follow the requested operator-safe flow. */
.event-card-cover .event-monogram,
.event-card-title > button {
  display: none !important;
}

/* 1.0.109 — event card metadata readability. */
.admin-app .event-card-title > div > span {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
}

.admin-app .event-mode-row span {
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  padding: 6px 9px !important;
}

.admin-app .event-capacity span {
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.admin-app .event-capacity strong {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.admin-app .event-capacity strong small {
  font-size: 11px !important;
  font-weight: 850 !important;
}

.event-builder-dialog.is-cropping-banner {
  width: min(820px, 100%) !important;
  max-height: min(92vh, 860px) !important;
  overflow: auto !important;
  color: #f5f7fb !important;
  background: #111214 !important;
}

.event-builder-dialog.is-cropping-banner > header,
.event-builder-dialog.is-cropping-banner form > :not(.event-banner-builder) {
  display: none !important;
}

.event-builder-dialog.is-cropping-banner form {
  margin: 0 !important;
}

.event-builder-dialog.is-cropping-banner .event-banner-builder.is-editing {
  width: 100% !important;
  padding: 74px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing::before {
  top: 18px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-crop-close {
  top: 14px !important;
  left: 0 !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-preview {
  min-height: min(54vh, 460px) !important;
  cursor: default !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-preview:active {
  cursor: default !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-crop-box {
  cursor: move !important;
  touch-action: none !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-crop-box:active {
  cursor: grabbing !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-controls {
  padding-top: 18px !important;
}

@media (width <= 700px) {
  .event-builder-dialog.is-cropping-banner .event-banner-builder.is-editing {
    padding-top: 68px !important;
  }

  .event-builder-dialog.is-cropping-banner
    .event-banner-builder.is-editing
    .event-banner-preview {
    min-height: 340px !important;
  }
}

/* 1.0.25 — remove bright overview chart/table surfaces in night mode. */
.admin-app[data-theme-mode="night"] .overview-metric-card .metric-card-top em,
.admin-app[data-theme-mode="night"]
  .overview-attendance-card
  .overview-section-heading
  em {
  color: #c7d8ee !important;
  background: rgba(36, 58, 86, 0.82) !important;
  border: 1px solid rgba(129, 163, 207, 0.24) !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .overview-metric-card .metric-card-top em i,
.admin-app[data-theme-mode="night"]
  .overview-attendance-card
  .overview-section-heading
  em
  i {
  background: #49a7ff !important;
  box-shadow: 0 0 0 4px rgba(73, 167, 255, 0.16) !important;
}

.admin-app[data-theme-mode="night"]
  .overview-attendance-card
  .attendance-donut {
  background: conic-gradient(
    #2fc7bd 0 var(--attendance),
    rgba(78, 102, 135, 0.38) var(--attendance) 100%
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(155, 184, 223, 0.14),
    0 18px 42px rgba(0, 0, 0, 0.18) !important;
}

.admin-app[data-theme-mode="night"]
  .overview-attendance-card
  .attendance-donut::before {
  background: radial-gradient(
    circle at 50% 38%,
    rgba(35, 57, 86, 0.98),
    rgba(17, 35, 57, 0.99)
  ) !important;
  border: 1px solid rgba(141, 170, 208, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.admin-app[data-theme-mode="night"]
  .overview-attendance-card
  .attendance-donut
  > span {
  color: #dce8f8 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"]
  .overview-attendance-card
  .attendance-donut
  small,
.admin-app[data-theme-mode="night"]
  .overview-attendance-card
  .attendance-donut
  em {
  color: #aebfd6 !important;
}

.admin-app[data-theme-mode="night"]
  .overview-attendance-card
  .attendance-donut
  strong {
  color: #f1f7ff !important;
}

.admin-app[data-theme-mode="night"] .attendance-mini-grid > div {
  color: #dce8f8 !important;
  background: rgba(22, 40, 64, 0.92) !important;
  border: 1px solid rgba(139, 171, 211, 0.26) !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .attendance-mini-grid small {
  color: #aebfd6 !important;
}

.admin-app[data-theme-mode="night"] .attendance-mini-grid strong {
  color: #eaf4ff !important;
}

/* 1.0.26 — keep the event crop toolbar aligned with the image box and easier to drag. */
.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-preview,
.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-controls {
  width: min(920px, calc(100vw - 48px)) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-controls {
  padding-top: 18px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-editor-actions {
  grid-template-columns: minmax(180px, 360px) repeat(3, minmax(118px, auto)) !important;
  justify-content: end !important;
  gap: 12px !important;
}

.event-builder-dialog.is-cropping-banner .event-crop-zoom-control {
  min-width: 180px !important;
  max-width: 360px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-crop-zoom-control
  input[type="range"] {
  max-width: 290px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-crop-box {
  cursor: move !important;
  outline: 1px solid rgba(255, 255, 255, 0.98) !important;
  outline-offset: -1px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-crop-box
  .crop-handle {
  z-index: 8 !important;
}

@media (width <= 760px) {
  .event-builder-dialog.is-cropping-banner
    .event-banner-builder.is-editing
    .event-banner-preview,
  .event-builder-dialog.is-cropping-banner
    .event-banner-builder.is-editing
    .event-banner-controls {
    width: calc(100vw - 32px) !important;
  }

  .event-builder-dialog.is-cropping-banner
    .event-banner-builder.is-editing
    .event-banner-editor-actions {
    grid-template-columns: 1fr 1fr !important;
    justify-content: stretch !important;
  }

  .event-builder-dialog.is-cropping-banner .event-crop-zoom-control {
    grid-column: 1 / -1 !important;
    max-width: none !important;
  }

  .event-builder-dialog.is-cropping-banner
    .event-crop-zoom-control
    input[type="range"] {
    max-width: none !important;
  }
}

/* 1.0.33 — Cropper.js engine for event banner images only. */
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.is-cropper-stage {
  align-items: center !important;
  background-color: #777 !important;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.16) 75%) !important;
  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0 !important;
  background-size: 24px 24px !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.event-builder-dialog.is-cropping-banner .event-banner-preview.uses-cropper-js {
  touch-action: none !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js::after,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  > div:not(.cropper-container) {
  display: none !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.is-cropper-stage:not(.uses-cropper-js)
  > .event-banner-image-layer {
  display: block !important;
  height: auto !important;
  inset: auto !important;
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  position: static !important;
  transform: none !important;
  width: auto !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  > .event-banner-image-layer {
  display: none !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-container,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-wrap-box,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-canvas {
  display: block !important;
  max-height: 100% !important;
  max-width: 100% !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-container {
  z-index: 5 !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-crop-box,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-view-box,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-face,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-line,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-point {
  display: block !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-bg {
  background-image: none !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-modal {
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-view-box {
  outline: 2px solid #168dff !important;
  outline-color: #168dff !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-face {
  background-color: rgba(22, 141, 255, 0.16) !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.74) !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-line,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-point {
  background-color: #168dff !important;
  opacity: 1 !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-point {
  border-radius: 2px !important;
  height: 10px !important;
  width: 10px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-line.line-e,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-line.line-w {
  width: 4px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-line.line-n,
.event-builder-dialog.is-cropping-banner
  .event-banner-preview.uses-cropper-js
  .cropper-line.line-s {
  height: 4px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-editor-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.event-builder-dialog.is-cropping-banner
  .event-banner-builder.is-editing
  .event-banner-editor-actions
  button {
  min-width: 132px !important;
}

@media (width <= 700px) {
  .event-builder-dialog.is-cropping-banner
    .event-banner-builder.is-editing
    .event-banner-editor-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 1.0.28 — ticket participant ledger columns and inventory status labels. */
.reservation-order-table {
  min-width: 1880px !important;
}

.reservation-order-table th,
.reservation-order-table td {
  vertical-align: top !important;
}

.reservation-order-table th:first-child,
.reservation-order-table td:first-child {
  min-width: 138px !important;
}

.reservation-order-table th:nth-child(2),
.reservation-order-table td:nth-child(2) {
  min-width: 180px !important;
}

.reservation-order-table th:nth-child(10),
.reservation-order-table td:nth-child(10) {
  min-width: 150px !important;
}

.reservation-order-table th:nth-child(11),
.reservation-order-table td:nth-child(11) {
  min-width: 148px !important;
}

.reservation-order-table th:nth-child(12),
.reservation-order-table td:nth-child(12) {
  min-width: 120px !important;
}

.reservation-order-table th:nth-child(13),
.reservation-order-table td:nth-child(13) {
  min-width: 170px !important;
}

.admin-app .reservation-order-table td,
.admin-app .reservation-order-table td strong,
.admin-app .reservation-order-table td small,
.admin-app .reservation-order-table td a,
.admin-app .reservation-plain-text,
.admin-app .reservation-plain-status,
.admin-app .reservation-verify-actions button,
.admin-app .reservation-verify-static {
  font-family:
    "Plus Jakarta Sans", "Jakarta Sans", Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.admin-app .reservation-order-table td strong {
  font-weight: 700 !important;
}

.admin-app .reservation-plain-text,
.admin-app .reservation-plain-status,
.admin-app .reservation-category-text {
  display: inline !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.admin-app .reservation-proof-link {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #087fff !important;
  cursor: pointer !important;
  font: inherit !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.admin-app .reservation-proof-link:hover {
  text-decoration: underline !important;
}

.admin-app .reservation-qr-link {
  display: block !important;
  max-width: 250px !important;
  overflow: hidden !important;
  color: #087fff !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.admin-app .reservation-qr-link:hover {
  text-decoration: underline !important;
}

.admin-app .reservation-column-visibility-cell {
  width: 56px !important;
  min-width: 56px !important;
}

.admin-app .reservation-verify-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.admin-app .reservation-verify-actions button {
  border: 1px solid rgba(8, 127, 255, 0.28) !important;
  border-radius: 10px !important;
  background: rgba(8, 127, 255, 0.1) !important;
  color: #087fff !important;
  font-weight: 800 !important;
  padding: 8px 10px !important;
}

.admin-app .reservation-verify-actions button:last-child {
  border-color: rgba(207, 50, 65, 0.28) !important;
  background: rgba(207, 50, 65, 0.08) !important;
  color: #cf3241 !important;
}

.admin-app .reservation-verify-actions button:disabled {
  cursor: wait !important;
  opacity: 0.62 !important;
}

.admin-app .reservation-verify-static {
  color: var(--muted) !important;
  font-weight: 700 !important;
}

/* 1.0.27 — night-mode parity for public ticketing and access/exit dialogs. */
.admin-app[data-theme-mode="night"] .logout-confirm-backdrop,
.operator-app[data-theme-mode="night"] .operator-access-backdrop {
  background: rgba(3, 12, 28, 0.78) !important;
}

.admin-app[data-theme-mode="night"] .logout-confirm-dialog,
.admin-app[data-theme-mode="night"] .operator-access-dialog,
.operator-app[data-theme-mode="night"] .operator-access-dialog,
.ticket-store-shell[data-theme-mode="night"] .ticket-payment-dialog {
  color: #eaf4ff !important;
  background: linear-gradient(
    145deg,
    rgba(20, 40, 66, 0.98),
    rgba(9, 25, 46, 0.98)
  ) !important;
  border-color: rgba(143, 176, 219, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 90px rgba(0, 0, 0, 0.44) !important;
}

.admin-app[data-theme-mode="night"] .logout-confirm-dialog h2,
.admin-app[data-theme-mode="night"] .operator-access-dialog h2,
.operator-app[data-theme-mode="night"] .operator-access-dialog h2,
.ticket-store-shell[data-theme-mode="night"] .ticket-payment-dialog h2 {
  color: #f3f8ff !important;
}

.admin-app[data-theme-mode="night"] .logout-confirm-dialog p,
.admin-app[data-theme-mode="night"] .operator-access-dialog p,
.operator-app[data-theme-mode="night"] .operator-access-dialog p,
.ticket-store-shell[data-theme-mode="night"] .ticket-payment-dialog p,
.admin-app[data-theme-mode="night"]
  .operator-access-dialog
  label
  > span:first-child,
.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  label
  > span:first-child {
  color: #b5c7dd !important;
}

.admin-app[data-theme-mode="night"] .operator-access-dialog header,
.operator-app[data-theme-mode="night"] .operator-access-dialog header {
  background: rgba(12, 31, 52, 0.98) !important;
  border-bottom-color: rgba(139, 171, 211, 0.24) !important;
}

.admin-app[data-theme-mode="night"] .operator-access-dialog form,
.operator-app[data-theme-mode="night"] .operator-access-dialog form {
  background: rgba(10, 29, 50, 0.98) !important;
  border-top-color: rgba(139, 171, 211, 0.18) !important;
}

.admin-app[data-theme-mode="night"] .operator-access-dialog header > button,
.operator-app[data-theme-mode="night"] .operator-access-dialog header > button,
.admin-app[data-theme-mode="night"] .logout-confirm-dialog button:first-child {
  color: #eaf4ff !important;
  background: rgba(21, 43, 70, 0.94) !important;
  border-color: rgba(139, 171, 211, 0.34) !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .operator-access-dialog select,
.admin-app[data-theme-mode="night"] .operator-access-dialog input,
.operator-app[data-theme-mode="night"] .operator-access-dialog select,
.operator-app[data-theme-mode="night"] .operator-access-dialog input {
  color: #edf6ff !important;
  background: #0b233d !important;
  border-color: rgba(141, 174, 216, 0.42) !important;
  color-scheme: dark !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .operator-access-dialog select:focus,
.admin-app[data-theme-mode="night"] .operator-access-dialog input:focus,
.operator-app[data-theme-mode="night"] .operator-access-dialog select:focus,
.operator-app[data-theme-mode="night"] .operator-access-dialog input:focus {
  border-color: #49a7ff !important;
  box-shadow: 0 0 0 3px rgba(73, 167, 255, 0.18) !important;
}

.admin-app[data-theme-mode="night"] .operator-access-dialog select option,
.operator-app[data-theme-mode="night"] .operator-access-dialog select option {
  color: #edf6ff !important;
  background: #0b233d !important;
}

.admin-app[data-theme-mode="night"] .operator-select-wrap em,
.operator-app[data-theme-mode="night"] .operator-select-wrap em {
  color: #70e0a7 !important;
  background: rgba(34, 197, 94, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.26) !important;
}

.operator-app:not([data-theme-mode="night"]) .operator-access-dialog {
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #d8e1ee !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 30px 90px rgba(15, 23, 42, 0.22) !important;
}

.operator-app:not([data-theme-mode="night"]) .operator-access-dialog header,
.operator-app:not([data-theme-mode="night"]) .operator-access-dialog form,
.operator-app:not([data-theme-mode="night"]) .operator-access-actions {
  background: #ffffff !important;
  border-color: #e5edf7 !important;
}

.operator-app:not([data-theme-mode="night"]) .operator-access-dialog h2 {
  color: #111827 !important;
}

.operator-app:not([data-theme-mode="night"]) .operator-access-dialog p,
.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  label
  > span:first-child {
  color: #475569 !important;
}

.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  header
  > button,
.operator-app:not([data-theme-mode="night"])
  .operator-access-actions
  button:first-child {
  color: #334155 !important;
  background: #ffffff !important;
  border-color: #cfd8e6 !important;
  box-shadow: none !important;
}

.operator-app:not([data-theme-mode="night"]) .operator-access-dialog select,
.operator-app:not([data-theme-mode="night"]) .operator-access-dialog input,
.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  .operator-picker-button {
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #cfd8e6 !important;
  color-scheme: light !important;
  box-shadow: none !important;
}

.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  input::placeholder {
  color: #94a3b8 !important;
}

.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  .operator-picker-button:disabled {
  color: #94a3b8 !important;
  background: #f8fafc !important;
}

.operator-app
  .operator-access-dialog
  .operator-picker-button
  .operator-picker-placeholder {
  color: #94a3b8 !important;
}

.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  .operator-picker-button
  > i {
  border-top-color: #536176 !important;
}

.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  .operator-picker-menu {
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #d4dce9 !important;
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18) !important;
}

.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  .operator-picker-menu
  button {
  color: #172033 !important;
  background: #ffffff !important;
}

.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  .operator-picker-menu
  button:hover,
.operator-app:not([data-theme-mode="night"])
  .operator-access-dialog
  .operator-picker-menu
  button[aria-selected="true"] {
  color: #005fd1 !important;
  background: #eef5ff !important;
}

.operator-app[data-theme-mode="night"] .operator-access-actions {
  background: rgba(10, 29, 50, 0.98) !important;
  border-color: rgba(139, 171, 211, 0.18) !important;
}

.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  .operator-picker-button,
.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  .operator-picker-menu {
  color: #edf6ff !important;
  background: #0b233d !important;
  border-color: rgba(141, 174, 216, 0.42) !important;
  color-scheme: dark !important;
}

.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  .operator-picker-button:disabled {
  color: #6f839a !important;
  background: #10283f !important;
}

.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  .operator-picker-button
  > i {
  border-top-color: #b8c7d9 !important;
}

.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  .operator-picker-menu {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42) !important;
}

.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  .operator-picker-menu
  button {
  color: #edf6ff !important;
  background: #0b233d !important;
}

.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  .operator-picker-menu
  button:hover,
.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  .operator-picker-menu
  button[aria-selected="true"] {
  color: #ffffff !important;
  background: #123a63 !important;
}

.operator-app[data-theme-mode="night"]
  .operator-access-dialog
  input::placeholder {
  color: #8da0b8 !important;
}

.admin-app[data-theme-mode="night"] .logout-confirm-icon {
  color: #ffbd8c !important;
  background: rgba(255, 139, 76, 0.14) !important;
}

.admin-app[data-theme-mode="night"] .logout-confirm-dialog button:last-child {
  color: #fff !important;
  background: #0b82ff !important;
  border-color: #0b82ff !important;
}

.ticket-store-shell[data-theme-mode="night"] {
  color: #eaf4ff !important;
  background:
    radial-gradient(circle at 78% 4%, rgba(0, 124, 255, 0.2), transparent 32%),
    linear-gradient(180deg, #061d3d 0%, #041326 100%) !important;
  color-scheme: dark !important;
}

.ticket-store-shell[data-theme-mode="night"] .ticket-store-header {
  background: rgba(4, 23, 49, 0.88) !important;
  border-bottom-color: rgba(139, 171, 211, 0.25) !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(.ticket-checkout-section, .ticket-order-card, .ticket-payment-dialog) {
  color: #eaf4ff !important;
  background: rgba(14, 31, 52, 0.96) !important;
  border-color: rgba(139, 171, 211, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 48px rgba(0, 0, 0, 0.28) !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(
    .ticket-checkout-section h2,
    .ticket-checkout-section h3,
    .ticket-order-card h2,
    .ticket-order-card strong,
    .ticket-order-card dd,
    .checkout-review-dialog h2,
    .checkout-review-list dd,
    .ticket-quantity-row strong,
    .payment-method-grid strong,
    .qris-note strong,
    .bank-options button,
    .ticket-tier-card h3
  ) {
  color: #f3f8ff !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(
    .checkout-section-heading p,
    .ticket-event-select > span,
    .buyer-form-grid label > span,
    .ticket-tier-card > p,
    .ticket-tier-card li,
    .ticket-stock-line small,
    .ticket-quantity-row small,
    .payment-method-grid small,
    .qris-note small,
    .order-card-eyebrow,
    .order-ticket-summary small,
    .ticket-order-card dl > div,
    .checkout-terms,
    .checkout-security small,
    .checkout-review-dialog p,
    .checkout-review-list > div
  ) {
  color: #aebfd6 !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(
    .checkout-section-heading > span,
    .payment-method-grid > button > span,
    .order-ticket-summary > span,
    .checkout-review-icon
  ) {
  color: #bfe0ff !important;
  background: rgba(0, 124, 255, 0.18) !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(
    .ticket-event-select select,
    .buyer-form-grid input,
    .ticket-quantity-row input
  ) {
  color: #edf6ff !important;
  background: #0b233d !important;
  border-color: rgba(141, 174, 216, 0.42) !important;
  color-scheme: dark !important;
  box-shadow: none !important;
}

.ticket-store-shell[data-theme-mode="night"]
  .ticket-event-select
  select
  option {
  color: #edf6ff !important;
  background: #0b233d !important;
}

.ticket-store-shell[data-theme-mode="night"]
  .buyer-form-grid
  input::placeholder {
  color: #7388a2 !important;
  opacity: 1 !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(.ticket-tier-card, .payment-method-grid > button) {
  color: #eaf4ff !important;
  background: rgba(11, 31, 53, 0.9) !important;
  border-color: rgba(139, 171, 211, 0.28) !important;
  box-shadow: none !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(.ticket-tier-card:hover, .payment-method-grid > button:hover) {
  border-color: rgba(73, 167, 255, 0.58) !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(
    .ticket-tier-card.is-selected,
    .payment-method-grid > button.is-selected
  ) {
  background: rgba(0, 124, 255, 0.16) !important;
  border-color: #49a7ff !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(
    .ticket-tier-card > span:last-child,
    .ticket-quantity-row button,
    .bank-options button,
    .checkout-secondary
  ) {
  color: #dcecff !important;
  background: rgba(21, 43, 70, 0.94) !important;
  border-color: rgba(139, 171, 211, 0.34) !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(.ticket-tier-card.is-selected > span:last-child, .checkout-primary) {
  color: #fff !important;
  background: #0b82ff !important;
  border-color: #0b82ff !important;
}

.ticket-store-shell[data-theme-mode="night"]
  :is(
    .ticket-stock-line,
    .ticket-quantity-row,
    .bank-options,
    .qris-note,
    .order-ticket-summary,
    .checkout-review-list
  ) {
  color: #dcecff !important;
  background: rgba(19, 42, 69, 0.86) !important;
  border-color: rgba(139, 171, 211, 0.24) !important;
}

.ticket-store-shell[data-theme-mode="night"]
  .ticket-order-card
  dl
  > div:last-child {
  color: #f3f8ff !important;
  border-top-color: rgba(139, 171, 211, 0.26) !important;
}

.ticket-store-shell[data-theme-mode="night"] .checkout-security {
  color: #70e0a7 !important;
}

@media (prefers-color-scheme: dark) {
  .ticket-store-shell {
    color: #eaf4ff !important;
    background:
      radial-gradient(
        circle at 78% 4%,
        rgba(0, 124, 255, 0.2),
        transparent 32%
      ),
      linear-gradient(180deg, #061d3d 0%, #041326 100%) !important;
    color-scheme: dark !important;
  }

  .ticket-store-header {
    background: rgba(4, 23, 49, 0.88) !important;
    border-bottom-color: rgba(139, 171, 211, 0.25) !important;
  }

  .ticket-checkout-section,
  .ticket-order-card,
  .ticket-payment-dialog {
    color: #eaf4ff !important;
    background: rgba(14, 31, 52, 0.96) !important;
    border-color: rgba(139, 171, 211, 0.3) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 18px 48px rgba(0, 0, 0, 0.28) !important;
  }

  .ticket-checkout-section h2,
  .ticket-checkout-section h3,
  .ticket-order-card h2,
  .ticket-order-card strong,
  .ticket-order-card dd,
  .checkout-review-dialog h2,
  .checkout-review-list dd,
  .ticket-quantity-row strong,
  .payment-method-grid strong,
  .qris-note strong,
  .bank-options button,
  .ticket-tier-card h3 {
    color: #f3f8ff !important;
  }

  .checkout-section-heading p,
  .ticket-event-select > span,
  .buyer-form-grid label > span,
  .ticket-tier-card > p,
  .ticket-tier-card li,
  .ticket-stock-line small,
  .ticket-quantity-row small,
  .payment-method-grid small,
  .qris-note small,
  .order-card-eyebrow,
  .order-ticket-summary small,
  .ticket-order-card dl > div,
  .checkout-terms,
  .checkout-security small,
  .checkout-review-dialog p,
  .checkout-review-list > div {
    color: #aebfd6 !important;
  }

  .checkout-section-heading > span,
  .payment-method-grid > button > span,
  .order-ticket-summary > span,
  .checkout-review-icon {
    color: #bfe0ff !important;
    background: rgba(0, 124, 255, 0.18) !important;
  }

  .ticket-event-select select,
  .buyer-form-grid input,
  .ticket-quantity-row input {
    color: #edf6ff !important;
    background: #0b233d !important;
    border-color: rgba(141, 174, 216, 0.42) !important;
    color-scheme: dark !important;
    box-shadow: none !important;
  }

  .ticket-event-select select option {
    color: #edf6ff !important;
    background: #0b233d !important;
  }

  .buyer-form-grid input::placeholder {
    color: #7388a2 !important;
    opacity: 1 !important;
  }

  .ticket-tier-card,
  .payment-method-grid > button {
    color: #eaf4ff !important;
    background: rgba(11, 31, 53, 0.9) !important;
    border-color: rgba(139, 171, 211, 0.28) !important;
    box-shadow: none !important;
  }

  .ticket-tier-card:hover,
  .payment-method-grid > button:hover {
    border-color: rgba(73, 167, 255, 0.58) !important;
  }

  .ticket-tier-card.is-selected,
  .payment-method-grid > button.is-selected {
    background: rgba(0, 124, 255, 0.16) !important;
    border-color: #49a7ff !important;
  }

  .ticket-tier-card > span:last-child,
  .ticket-quantity-row button,
  .bank-options button,
  .checkout-secondary {
    color: #dcecff !important;
    background: rgba(21, 43, 70, 0.94) !important;
    border-color: rgba(139, 171, 211, 0.34) !important;
  }

  .ticket-tier-card.is-selected > span:last-child,
  .checkout-primary {
    color: #fff !important;
    background: #0b82ff !important;
    border-color: #0b82ff !important;
  }

  .ticket-stock-line,
  .ticket-quantity-row,
  .bank-options,
  .qris-note,
  .order-ticket-summary,
  .checkout-review-list {
    color: #dcecff !important;
    background: rgba(19, 42, 69, 0.86) !important;
    border-color: rgba(139, 171, 211, 0.24) !important;
  }

  .ticket-order-card dl > div:last-child {
    color: #f3f8ff !important;
    border-top-color: rgba(139, 171, 211, 0.26) !important;
  }

  .checkout-security {
    color: #70e0a7 !important;
  }
}

/* 1.0.30 - Ticketing manual transfer checkout */
.manual-transfer-panel {
  display: grid !important;
  gap: 14px !important;
  padding: 16px !important;
}

.manual-bank-select,
.manual-transfer-form label {
  display: grid !important;
  gap: 8px !important;
}

.manual-bank-select > span,
.manual-transfer-form label > span {
  color: #607087 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

.manual-bank-select select,
.manual-transfer-form input {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid rgba(169, 186, 209, 0.55) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #132033 !important;
  font:
    500 15px/1.35 "Plus Jakarta Sans",
    system-ui,
    sans-serif !important;
  padding: 0 14px !important;
}

.manual-bank-card {
  display: grid !important;
  gap: 6px !important;
  border: 1px solid rgba(0, 124, 255, 0.18) !important;
  border-radius: 14px !important;
  background: rgba(235, 244, 255, 0.72) !important;
  padding: 14px !important;
}

.manual-bank-card strong {
  color: #102033 !important;
  font-size: 16px !important;
}

.manual-bank-card span {
  color: #007cff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.manual-bank-card small,
.manual-transfer-proof small {
  color: #6e7f95 !important;
  font-weight: 700 !important;
}

.manual-transfer-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.manual-transfer-proof {
  grid-column: 1 / -1 !important;
  position: relative !important;
  display: grid !important;
  gap: 10px !important;
  border: 1px dashed rgba(0, 124, 255, 0.38) !important;
  border-radius: 18px !important;
  background: linear-gradient(
    135deg,
    rgba(237, 246, 255, 0.94),
    rgba(255, 255, 255, 0.96)
  ) !important;
  padding: 16px !important;
  cursor: pointer !important;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease !important;
}

.manual-transfer-proof input {
  align-content: center !important;
  min-height: 52px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.66) !important;
  padding: 12px 14px !important;
}

.manual-transfer-proof:hover {
  border-color: rgba(0, 124, 255, 0.72) !important;
  box-shadow: 0 16px 36px rgba(0, 124, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

.manual-transfer-proof > span {
  color: #12345d !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.manual-transfer-proof > span svg {
  color: #007cff !important;
}

.manual-transfer-proof > span strong {
  color: #12345d !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.manual-transfer-instruction {
  display: grid !important;
  gap: 8px !important;
  border: 1px solid rgba(0, 124, 255, 0.22) !important;
  border-radius: 18px !important;
  background: rgba(235, 244, 255, 0.84) !important;
  padding: 18px !important;
  text-align: left !important;
}

.manual-transfer-instruction > span {
  color: #65748a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.manual-transfer-instruction > strong {
  color: #132033 !important;
  font-size: 18px !important;
}

.manual-transfer-instruction > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 12px 14px !important;
}

.manual-transfer-instruction b {
  color: #007cff !important;
  font-size: 22px !important;
}

.manual-transfer-instruction button {
  display: inline-grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  border: 1px solid rgba(0, 124, 255, 0.24) !important;
  border-radius: 12px !important;
  color: #007cff !important;
  background: #eef6ff !important;
}

.manual-transfer-instruction small,
.manual-transfer-instruction p {
  color: #66758a !important;
  margin: 0 !important;
}

.manual-transfer-instruction p strong {
  color: #132033 !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-transfer-panel,
.ticket-store-shell[data-theme-mode="night"] .manual-transfer-instruction {
  color: #dcecff !important;
  background: rgba(19, 42, 69, 0.86) !important;
  border-color: rgba(139, 171, 211, 0.24) !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-bank-select > span,
.ticket-store-shell[data-theme-mode="night"] .manual-transfer-form label > span,
.ticket-store-shell[data-theme-mode="night"]
  .manual-transfer-instruction
  > span,
.ticket-store-shell[data-theme-mode="night"] .manual-transfer-instruction small,
.ticket-store-shell[data-theme-mode="night"] .manual-transfer-instruction p,
.ticket-store-shell[data-theme-mode="night"] .manual-transfer-proof small {
  color: #aebfd6 !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-transfer-proof {
  background: linear-gradient(
    135deg,
    rgba(10, 34, 70, 0.9),
    rgba(8, 26, 55, 0.94)
  ) !important;
  border-color: rgba(135, 178, 238, 0.32) !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-transfer-proof > span,
.ticket-store-shell[data-theme-mode="night"]
  .manual-transfer-proof
  > span
  strong {
  color: rgba(239, 247, 255, 0.94) !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-transfer-proof input {
  background: rgba(255, 255, 255, 0.08) !important;
}

.ticket-terms-dialog {
  width: min(680px, calc(100vw - 28px)) !important;
}

.ticket-terms-dialog p {
  max-width: 560px !important;
}

.ticket-terms-list {
  display: grid !important;
  gap: 10px !important;
  max-height: min(46vh, 430px) !important;
  margin: 4px 0 2px !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

.ticket-terms-list li {
  color: #45566d !important;
  background: #f5f9ff !important;
  border: 1px solid #dce8f7 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.checkout-terms button {
  color: #007cff !important;
  cursor: pointer !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.ticket-store-shell[data-theme-mode="night"] .ticket-terms-list li {
  color: rgba(230, 241, 255, 0.86) !important;
  background: rgba(10, 34, 70, 0.88) !important;
  border-color: rgba(135, 178, 238, 0.24) !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-bank-select select,
.ticket-store-shell[data-theme-mode="night"] .manual-transfer-form input,
.ticket-store-shell[data-theme-mode="night"]
  .manual-transfer-instruction
  > div {
  color: #edf6ff !important;
  background: #0b233d !important;
  border-color: rgba(141, 174, 216, 0.42) !important;
  color-scheme: dark !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-bank-card {
  background: rgba(11, 31, 53, 0.92) !important;
  border-color: rgba(139, 171, 211, 0.28) !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-bank-card strong,
.ticket-store-shell[data-theme-mode="night"]
  .manual-transfer-instruction
  > strong,
.ticket-store-shell[data-theme-mode="night"]
  .manual-transfer-instruction
  p
  strong {
  color: #f3f8ff !important;
}

.ticket-store-shell[data-theme-mode="night"] .manual-bank-card span,
.ticket-store-shell[data-theme-mode="night"] .manual-transfer-instruction b {
  color: #75bdff !important;
}

@media (prefers-color-scheme: dark) {
  .manual-transfer-panel,
  .manual-transfer-instruction {
    color: #dcecff !important;
    background: rgba(19, 42, 69, 0.86) !important;
    border-color: rgba(139, 171, 211, 0.24) !important;
  }

  .manual-bank-select > span,
  .manual-transfer-form label > span,
  .manual-transfer-instruction > span,
  .manual-transfer-instruction small,
  .manual-transfer-instruction p,
  .manual-transfer-proof small {
    color: #aebfd6 !important;
  }

  .manual-bank-select select,
  .manual-transfer-form input,
  .manual-transfer-instruction > div {
    color: #edf6ff !important;
    background: #0b233d !important;
    border-color: rgba(141, 174, 216, 0.42) !important;
    color-scheme: dark !important;
  }

  .manual-bank-card {
    background: rgba(11, 31, 53, 0.92) !important;
    border-color: rgba(139, 171, 211, 0.28) !important;
  }

  .manual-bank-card strong,
  .manual-transfer-instruction > strong,
  .manual-transfer-instruction p strong {
    color: #f3f8ff !important;
  }

  .manual-bank-card span,
  .manual-transfer-instruction b {
    color: #75bdff !important;
  }
}

@media (max-width: 760px) {
  .manual-transfer-form {
    grid-template-columns: 1fr !important;
  }
}

/* 1.0.31 - Peserta Undangan page title and participant metrics */
.admin-app .page-heading-row h1.participant-list-title {
  border-radius: 999px !important;
  margin-left: -18px !important;
  display: inline-grid !important;
  gap: 6px !important;
  align-items: start !important;
  padding: 10px 18px !important;
}

.admin-app .participant-title-main {
  display: block !important;
  line-height: 1.12 !important;
}

.admin-app
  .page-heading-row
  h1.participant-list-title
  .participant-title-event {
  display: block !important;
  margin: 6px 0 0 !important;
  color: #758295 !important;
  font-size: 0.62em !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.admin-app[data-theme-mode="night"]
  .page-heading-row
  h1.participant-list-title
  .participant-title-event {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* 1.0.33 - Peserta Undangan filters and blasting table typography. */
.admin-app .participant-panel .active-filters {
  grid-template-columns: minmax(180px, 250px) 1fr !important;
}

.admin-app .participant-directory-table th,
.admin-app .participant-directory-table td,
.admin-app .participant-directory-table td strong,
.admin-app .participant-directory-table td small,
.admin-app .campaign-table th,
.admin-app .campaign-table td,
.admin-app .campaign-table td strong,
.admin-app .campaign-table td small,
.admin-app .campaign-table td a,
.admin-app .campaign-table .table-subtext,
.admin-app .campaign-table .campaign-status {
  font-family: var(--tixpro-font-sans) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.admin-app .participant-directory-table td strong,
.admin-app .campaign-table td strong {
  font-weight: 800 !important;
}

.admin-app .campaign-table td,
.admin-app .campaign-table td strong,
.admin-app .campaign-table td small,
.admin-app .campaign-table td a,
.admin-app .campaign-table .campaign-status {
  white-space: nowrap !important;
}

.admin-app .campaign-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(210, 224, 240, 0.72);
}

.admin-app .campaign-pagination button,
.admin-app .campaign-pagination input {
  width: 38px;
  height: 34px;
  min-height: 34px;
  border: 1px solid rgba(189, 207, 229, 0.9);
  border-radius: 10px;
  color: #24364f;
  background: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.admin-app .campaign-pagination input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.admin-app .campaign-pagination input::-webkit-outer-spin-button,
.admin-app .campaign-pagination input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.admin-app .campaign-pagination button {
  cursor: pointer;
}

.admin-app .campaign-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.admin-app .campaign-pagination span {
  color: #75849a;
  font-size: 12px;
  font-weight: 800;
}

.admin-app[data-theme-mode="night"] .campaign-pagination {
  border-top-color: rgba(90, 130, 176, 0.34);
}

.admin-app[data-theme-mode="night"] .campaign-pagination button,
.admin-app[data-theme-mode="night"] .campaign-pagination input {
  color: #dce8f8 !important;
  background: #102842 !important;
  border-color: rgba(106, 151, 198, 0.42) !important;
}

.admin-app[data-theme-mode="night"] .campaign-pagination span {
  color: rgba(220, 232, 248, 0.72) !important;
}

/* 1.0.35 - Compact participant/campaign tables and column visibility controls. */
.admin-app .participant-toolbar-filter,
.admin-app .participant-toolbar-filter select {
  min-width: 190px;
}

.admin-app .participant-toolbar-filter select {
  min-height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid rgba(184, 205, 229, 0.92);
  border-radius: 10px;
  color: #24364f;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 800;
  outline: 0;
}

.admin-app .participant-directory-table th,
.admin-app .participant-directory-table td,
.admin-app .campaign-table th,
.admin-app .campaign-table td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.admin-app .participant-empty-row td {
  height: 48px !important;
  padding: 0 !important;
}

.admin-app .campaign-table tbody tr td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.admin-app .column-visibility-cell {
  position: relative;
  width: 54px;
  min-width: 54px;
  text-align: right;
}

.admin-app .column-visibility-wrap {
  display: inline-flex;
  position: relative;
  justify-content: flex-end;
}

.admin-app .column-visibility-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(183, 204, 229, 0.92);
  border-radius: 10px;
  color: #0875ee;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.admin-app .column-visibility-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  width: 210px;
  max-height: 330px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(190, 208, 230, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 45px rgba(19, 45, 78, 0.18);
  text-align: left;
}

.admin-app .column-visibility-menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 8px;
  color: #24364f;
  font-size: 11px;
  font-weight: 800;
}

.admin-app .column-visibility-menu label.is-required {
  color: #68798e;
}

.admin-app .column-visibility-menu input {
  width: 14px;
  height: 14px;
  accent-color: #087cff;
}

.admin-app .campaign-pagination {
  justify-content: flex-end;
}

.admin-app .campaign-pagination .campaign-pagination-label {
  margin-right: auto;
}

.admin-app .page-heading-row > div {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.admin-app .page-heading-row h1.campaign-page-title {
  margin-left: -18px !important;
  display: inline-grid !important;
  gap: 6px !important;
  align-items: start !important;
}

.admin-app .campaign-title-main {
  display: block !important;
  line-height: 1.12 !important;
}

.admin-app .page-heading-row h1.campaign-page-title .campaign-title-event {
  display: block !important;
  margin: 6px 0 0 !important;
  color: #758295 !important;
  font-size: 0.62em !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.admin-app .report-hero .report-hero-scope {
  margin-left: -18px !important;
}

.admin-app[data-theme-mode="night"] .participant-toolbar-filter select,
.admin-app[data-theme-mode="night"] .column-visibility-button {
  color: #dce8f8 !important;
  background: #102842 !important;
  border-color: rgba(106, 151, 198, 0.42) !important;
}

.admin-app[data-theme-mode="night"] .column-visibility-menu {
  background: #10243d !important;
  border-color: rgba(106, 151, 198, 0.42) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.34) !important;
}

.admin-app[data-theme-mode="night"] .column-visibility-menu label {
  color: #dce8f8 !important;
}

.admin-app[data-theme-mode="night"] .column-visibility-menu label.is-required {
  color: rgba(220, 232, 248, 0.68) !important;
}

.admin-app[data-theme-mode="night"]
  .page-heading-row
  h1.campaign-page-title
  .campaign-title-event {
  color: rgba(255, 255, 255, 0.78) !important;
}

.admin-app .participant-directory-view {
  gap: 18px !important;
}

.admin-app .participant-directory-view .participant-summary {
  margin-top: 0 !important;
}

.admin-app .participant-directory-view .participant-panel .table-scroll {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

.admin-app .participant-directory-view .participant-panel .table-footer {
  min-height: 0 !important;
  padding: 14px 18px 18px !important;
}

.admin-app .participant-directory-view .participant-empty-row {
  display: none !important;
}

.admin-app .participant-directory-view .participant-directory-table,
.admin-app .campaign-table {
  width: max-content !important;
  table-layout: auto !important;
}

.admin-app .participant-directory-view .participant-directory-table {
  min-width: 0 !important;
}

.admin-app .campaign-table {
  min-width: 0 !important;
}

.admin-app .participant-directory-view .participant-directory-table th,
.admin-app .participant-directory-view .participant-directory-table td,
.admin-app .campaign-table th,
.admin-app .campaign-table td {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.admin-app
  .participant-directory-view
  .participant-directory-table
  th:not(.participant-select-column):not(.column-visibility-cell),
.admin-app
  .participant-directory-view
  .participant-directory-table
  td:not(.participant-select-column):not(.column-visibility-cell),
.admin-app .campaign-table th:not(.column-visibility-cell),
.admin-app .campaign-table td:not(.column-visibility-cell) {
  min-width: 132px;
  max-width: 260px;
}

.admin-app
  .participant-directory-view
  .participant-directory-table
  .participant-quantity-column {
  min-width: 116px !important;
}

.admin-app
  .participant-directory-view
  .participant-directory-table
  .participant-action-cell {
  min-width: 170px !important;
}

.admin-app .campaign-table .campaign-participant-cell {
  min-width: 220px !important;
}

.admin-app .campaign-table .campaign-ticket-cell {
  min-width: 310px !important;
  max-width: 360px !important;
}

.admin-app .campaign-table .campaign-ticket-code {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.admin-app .campaign-table .campaign-qr-preview {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  padding: 4px !important;
}

.admin-app .campaign-table .campaign-ticket-cell .campaign-qr-token {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-menu-panel,
.operator-menu-panel * {
  font-family: var(--tixpro-font-sans) !important;
}

.operator-menu-panel button {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

.operator-menu-panel button > svg {
  align-self: center !important;
  justify-self: center !important;
}

.operator-menu-panel button > span {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
}

.operator-menu-panel .operator-last-participant {
  font-family: var(--tixpro-font-sans) !important;
}

.operator-menu-panel .operator-last-participant .eyebrow {
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
}

.operator-menu-panel .operator-last-participant > div {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

.operator-menu-panel .operator-last-participant > div > span:last-child {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.operator-menu-panel .operator-last-participant strong {
  font-size: 17px !important;
  line-height: 1.22 !important;
}

.operator-menu-panel .operator-last-participant small {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.operator-menu-panel .operator-last-participant > small {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.operator-menu-panel .operator-last-participant .recent-check {
  display: inline-grid !important;
  place-items: center !important;
}

.operator-connection strong {
  font-size: 16px !important;
  line-height: 1 !important;
}

.admin-app .campaign-table-panel {
  --campaign-toolbar-offset: 78px;
  max-height: calc(100vh - 188px);
  overflow: auto;
  isolation: isolate;
}

.admin-app .campaign-table-panel .campaign-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
}

.admin-app .campaign-table-panel .table-scroll {
  overflow: visible !important;
}

.admin-app .campaign-table thead th {
  position: sticky;
  top: var(--campaign-toolbar-offset, 78px);
  z-index: 35;
}

.admin-app .campaign-table th.campaign-select-column,
.admin-app .campaign-table td.campaign-select-column {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

.admin-app .campaign-table td.campaign-select-column {
  transform: translateX(-6px);
}

.admin-app .campaign-table th.campaign-select-column input,
.admin-app .campaign-table td.campaign-select-column input {
  display: block;
  margin: 0 auto;
}

.admin-app .campaign-table th.column-visibility-cell,
.admin-app .campaign-table td.column-visibility-cell {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
}

/* 1.0.44 - Campaign sticky table polish. */
.admin-app .campaign-table-panel {
  background-color: #f7fbff !important;
}

.admin-app[data-theme-mode="night"] .campaign-table-panel {
  background-color: #0b2138 !important;
}

.admin-app .campaign-table-panel .campaign-toolbar {
  min-height: var(--campaign-toolbar-offset, 78px) !important;
  z-index: 30 !important;
  background: linear-gradient(135deg, #f7fbff 0%, #eef7ff 100%) !important;
  box-shadow:
    0 1px 0 rgba(210, 224, 240, 0.72),
    0 58px 0 0 #f7fbff,
    0 18px 34px rgba(18, 46, 78, 0.08) !important;
}

.admin-app[data-theme-mode="night"] .campaign-table-panel .campaign-toolbar {
  background: linear-gradient(135deg, #122842 0%, #0c1f36 100%) !important;
  box-shadow:
    0 1px 0 rgba(92, 132, 178, 0.34),
    0 58px 0 0 #0b2138,
    0 18px 34px rgba(0, 0, 0, 0.24) !important;
}

.admin-app .campaign-table thead th {
  z-index: 45 !important;
  background: #eef6ff !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 -1px 0 rgba(188, 209, 233, 0.72),
    0 12px 24px rgba(18, 46, 78, 0.08) !important;
}

.admin-app[data-theme-mode="night"] .campaign-table thead th {
  color: #c9d9eb !important;
  background: #09243d !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 -1px 0 rgba(84, 126, 172, 0.42),
    0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

.admin-app .campaign-table th.campaign-select-column,
.admin-app .campaign-table td.campaign-select-column {
  position: relative !important;
  transform: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-clip: padding-box !important;
}

.admin-app .campaign-table td.campaign-select-column {
  background: inherit !important;
}

.admin-app .campaign-table td.campaign-select-column::after,
.admin-app .campaign-table th.campaign-select-column::after {
  content: none !important;
}

.admin-app .campaign-table th.campaign-select-column input,
.admin-app .campaign-table td.campaign-select-column input {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 auto !important;
}

/* 1.0.47 - Restore Campaign table header and add viewport-safe dashboard/operator layouts. */
.admin-app .campaign-table-panel {
  --campaign-toolbar-offset: 0px !important;
  max-height: none !important;
  overflow: visible !important;
}

.admin-app .campaign-table-panel .campaign-toolbar {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  min-height: auto !important;
  background: linear-gradient(135deg, #f7fbff 0%, #eef7ff 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(210, 224, 240, 0.72),
    0 14px 28px rgba(18, 46, 78, 0.08) !important;
}

.admin-app[data-theme-mode="night"] .campaign-table-panel .campaign-toolbar {
  background: linear-gradient(135deg, #122842 0%, #0c1f36 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(92, 132, 178, 0.34),
    0 14px 28px rgba(0, 0, 0, 0.22) !important;
}

.admin-app .campaign-table-panel .table-scroll {
  position: relative !important;
  max-height: min(70svh, 760px) !important;
  min-height: 360px !important;
  overflow: auto !important;
  isolation: isolate !important;
  scrollbar-gutter: stable both-edges !important;
  background: #f7fbff !important;
}

.admin-app[data-theme-mode="night"] .campaign-table-panel .table-scroll {
  background: #0b2138 !important;
}

.admin-app .campaign-table {
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.admin-app .campaign-table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 55 !important;
}

.admin-app .campaign-table thead tr {
  background: #eef6ff !important;
}

.admin-app[data-theme-mode="night"] .campaign-table thead tr {
  background: #09243d !important;
}

.admin-app .campaign-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 56 !important;
  background: #eef6ff !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 -1px 0 rgba(188, 209, 233, 0.72),
    0 10px 22px rgba(18, 46, 78, 0.08) !important;
}

.admin-app[data-theme-mode="night"] .campaign-table thead th {
  color: #dce8f8 !important;
  background: #09243d !important;
  box-shadow:
    inset 0 -1px 0 rgba(84, 126, 172, 0.42),
    0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

.admin-app .campaign-table th.campaign-select-column,
.admin-app .campaign-table td.campaign-select-column {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding-inline: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  transform: none !important;
  box-shadow: none !important;
}

.admin-app .campaign-table th.campaign-select-column {
  background: #eef6ff !important;
}

.admin-app[data-theme-mode="night"] .campaign-table th.campaign-select-column {
  background: #09243d !important;
}

.admin-app .campaign-table td.campaign-select-column {
  background: inherit !important;
  border-right: 0 !important;
}

.admin-app .campaign-table th.campaign-select-column input,
.admin-app .campaign-table td.campaign-select-column input {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 auto !important;
  transform: none !important;
}

.admin-app
  :is(
    .view-stack,
    .dashboard-page,
    .ticket-dashboard-view,
    .participant-directory-view
  ) {
  max-width: 100% !important;
  min-width: 0 !important;
}

.admin-app
  :is(
    .channel-grid,
    .participant-summary,
    .report-summary-grid,
    .infrastructure-summary,
    .ticket-report-summary,
    .reservation-summary-grid
  ) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(220px, 100%), 1fr)
  ) !important;
}

.admin-app
  :is(
    .overview-invitation-card .overview-metric-grid,
    .overview-import-card .overview-email-grid
  ) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(190px, 100%), 1fr)
  ) !important;
}

.admin-app :is(.panel, .table-scroll, .data-toolbar) {
  max-width: 100% !important;
  min-width: 0 !important;
}

.admin-app .table-scroll {
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
}

.operator-app {
  min-height: 100svh !important;
  overflow: auto !important;
}

.operator-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  flex-wrap: wrap !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
}

.operator-event {
  min-width: min(320px, 100%) !important;
}

.operator-stage {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(300px, 1.25fr) minmax(280px, 0.75fr) !important;
  align-items: start !important;
  gap: clamp(14px, 2vw, 26px) !important;
}

.operator-scanner-zone,
.scanner-column,
.scanner-frame {
  min-width: 0 !important;
  max-width: 100% !important;
}

.scanner-frame {
  max-height: calc(100svh - 260px) !important;
}

.operator-stat-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(180px, 100%), 1fr)
  ) !important;
}

@media (max-width: 1100px) {
  .operator-stage {
    grid-template-columns: 1fr !important;
  }

  .scanner-frame {
    max-height: min(58svh, 620px) !important;
  }
}

@media (max-width: 860px) {
  .admin-app .campaign-table-panel .campaign-toolbar {
    align-items: stretch !important;
    gap: 12px !important;
  }

  .admin-app .campaign-toolbar-actions {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .admin-app .campaign-table-panel .table-scroll {
    max-height: 64svh !important;
  }

  .admin-app .campaign-table th,
  .admin-app .campaign-table td {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 720px) {
  .admin-app :is(.admin-content, .view-stack) {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  .operator-header {
    align-items: flex-start !important;
  }

  .operator-header-actions,
  .operator-clock {
    width: 100% !important;
  }

  .operator-clock {
    align-items: flex-start !important;
  }

  .scanner-frame {
    max-height: 52svh !important;
  }
}

@media (max-width: 560px) {
  .admin-app .campaign-table-panel .table-scroll {
    min-height: 320px !important;
    max-height: 60svh !important;
  }

  .operator-stage {
    gap: 12px !important;
  }

  .operator-stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 1.0.48 - Remove remaining bright surfaces in night mode. */
.admin-app[data-theme-mode="night"] .event-scope-menu button.is-selected,
.admin-app[data-theme-mode="night"] .event-scope-menu button.is-selected:hover {
  color: #f3f8ff !important;
  background: linear-gradient(
    135deg,
    rgba(31, 67, 105, 0.98),
    rgba(18, 43, 74, 0.98)
  ) !important;
  border: 1px solid rgba(120, 168, 222, 0.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.24) !important;
}

.admin-app[data-theme-mode="night"] .event-scope-menu button.is-selected small,
.admin-app[data-theme-mode="night"]
  .event-scope-menu
  button.is-selected
  .scope-status {
  color: rgba(220, 232, 248, 0.78) !important;
}

/* 1.0.49 - Operator phone footer uses a 2-2-1 stat layout. */
@media (max-width: 720px) {
  .operator-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .operator-stat-grid .stat-invitation-total {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(100%, 280px) !important;
  }
}

@media (max-width: 430px) {
  .operator-stat-grid {
    gap: 10px !important;
  }

  .operator-stat-grid .stat-invitation-total {
    width: min(100%, 240px) !important;
  }
}

.admin-app[data-theme-mode="night"]
  .event-scope-menu
  button.is-selected
  .scope-status.is-live {
  color: #6ee7a8 !important;
}

.admin-app[data-theme-mode="night"]
  .event-scope-menu
  button.is-selected
  .scope-status.is-finished {
  color: #ff9b9b !important;
}

/* 1.0.107 - Event status labels follow the event date phase. */
.event-scope-menu .scope-status.is-waiting {
  color: #d88b00;
}

.event-scope-menu .scope-status.is-complete {
  color: #d55353;
}

.event-scope-menu button.is-selected .scope-status.is-waiting {
  color: #9a6400;
}

.event-scope-menu button.is-selected .scope-status.is-complete {
  color: #b73d3d;
}

.status-chip.status-waiting {
  color: #9a6400;
  background: #fff4d6;
  border-color: #ffe2a6;
}

.status-chip.status-waiting i {
  background: #f5a623;
}

.status-chip.status-complete {
  color: #b94b4b;
  background: #fff0f0;
  border-color: #ffd4d4;
}

.status-chip.status-complete i {
  background: #ef5b5b;
}

.admin-app[data-theme-mode="night"]
  .event-scope-menu
  button.is-selected
  .scope-status.is-waiting {
  color: #ffd166 !important;
}

.admin-app[data-theme-mode="night"]
  .event-scope-menu
  button.is-selected
  .scope-status.is-complete {
  color: #ff9b9b !important;
}

.admin-app[data-theme-mode="night"] .status-chip.status-waiting {
  color: #ffd166 !important;
  background: rgba(245, 166, 35, 0.14) !important;
  border-color: rgba(245, 166, 35, 0.35) !important;
}

.admin-app[data-theme-mode="night"] .status-chip.status-complete {
  color: #ffb4b4 !important;
  background: rgba(224, 88, 88, 0.14) !important;
  border-color: rgba(224, 88, 88, 0.32) !important;
}

.admin-app[data-theme-mode="night"] .sidebar-nav button.is-active {
  color: #f3f8ff !important;
  background: linear-gradient(
    135deg,
    rgba(30, 66, 106, 0.96),
    rgba(16, 39, 72, 0.96)
  ) !important;
  border: 1px solid rgba(127, 178, 235, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 14px 30px rgba(0, 38, 88, 0.28) !important;
}

.admin-app[data-theme-mode="night"] .sidebar-nav button.is-active svg,
.admin-app[data-theme-mode="night"] .sidebar-nav button.is-active span {
  color: #f3f8ff !important;
}

.admin-app[data-theme-mode="night"] .sidebar-nav button.is-active small {
  color: #d6e7ff !important;
  background: rgba(137, 180, 255, 0.16) !important;
}

.admin-app[data-theme-mode="night"] .server-health-metric {
  color: #eaf4ff !important;
  background: linear-gradient(
    135deg,
    rgba(22, 45, 73, 0.98),
    rgba(12, 30, 53, 0.98)
  ) !important;
  border-color: rgba(92, 132, 178, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

.admin-app[data-theme-mode="night"] .server-health-metric small {
  color: rgba(199, 216, 236, 0.72) !important;
}

.admin-app[data-theme-mode="night"] .server-health-metric strong {
  color: #f5f9ff !important;
}

/* 1.0.50 - Participant invitation sticky table and compact server metrics. */
.admin-app .participant-directory-view .participant-panel .table-scroll {
  position: relative !important;
  max-height: min(70svh, 760px) !important;
  min-height: 360px !important;
  overflow: auto !important;
  isolation: isolate !important;
  scrollbar-gutter: stable both-edges !important;
  background: #f7fbff !important;
}

.admin-app[data-theme-mode="night"]
  .participant-directory-view
  .participant-panel
  .table-scroll {
  background: #0b2138 !important;
}

.admin-app .participant-directory-table {
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.admin-app .participant-directory-table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 55 !important;
}

.admin-app .participant-directory-table thead tr {
  background: #f3f8ff !important;
}

.admin-app[data-theme-mode="night"] .participant-directory-table thead tr {
  background: #09243d !important;
}

.admin-app .participant-directory-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 56 !important;
  background: #f3f8ff !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 -1px 0 rgba(188, 209, 233, 0.72),
    0 10px 22px rgba(18, 46, 78, 0.08) !important;
}

.admin-app[data-theme-mode="night"] .participant-directory-table thead th {
  color: #dce8f8 !important;
  background: #09243d !important;
  box-shadow:
    inset 0 -1px 0 rgba(84, 126, 172, 0.42),
    0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

.admin-app .server-health-metrics {
  grid-template-columns: repeat(5, minmax(128px, 1fr)) !important;
  gap: 8px !important;
}

.admin-app .server-health-metric {
  padding: 11px !important;
  border-radius: 12px !important;
}

.admin-app .server-health-metric strong {
  font-size: clamp(12px, 0.82vw, 15px) !important;
}

@media (max-width: 980px) {
  .admin-app .server-health-metrics {
    overflow-x: auto !important;
    grid-template-columns: repeat(5, minmax(128px, 1fr)) !important;
    scrollbar-gutter: stable !important;
  }
}

/* 1.0.51 - Final dashboard/table mobile polish. */
.admin-app .overview-import-card .overview-email-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(92px, auto) !important;
}

.admin-app
  .overview-import-card
  .overview-email-grid
  .email-status-tile.is-invitation-total {
  grid-row: auto !important;
  grid-column: auto !important;
}

.admin-app .overview-hour-chart {
  position: relative !important;
  isolation: isolate !important;
}

.admin-app .overview-hour-chart .overview-hour-line {
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.admin-app .overview-hour-chart .overview-hour-line polyline {
  fill: none !important;
  stroke: rgba(93, 190, 255, 0.92) !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
  filter: drop-shadow(0 8px 16px rgba(0, 124, 255, 0.28)) !important;
}

.admin-app .overview-hour-chart span {
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}

/* 1.0.109 — show hour values as clear in-bar labels for check-in and ticket charts. */
.admin-app .overview-hour-chart span b {
  position: absolute !important;
  top: 8px !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 4 !important;
  min-width: 28px !important;
  padding: 2px 6px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #163355 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(18, 52, 88, 0.14) !important;
  pointer-events: none !important;
}

.admin-app .overview-hour-chart span b:empty {
  display: none !important;
}

.admin-app[data-theme-mode="night"] .overview-hour-chart span b {
  border-color: rgba(210, 232, 255, 0.2) !important;
  background: rgba(8, 25, 50, 0.88) !important;
  color: rgba(236, 246, 255, 0.96) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26) !important;
}

.admin-app .overview-hour-filter {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.admin-app .overview-section-heading.compact > .overview-hour-filter {
  justify-content: flex-end !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}

.admin-app .overview-hour-filter select,
.admin-app .overview-hour-filter input {
  height: 34px !important;
  color: #24364f !important;
  background: #ffffff !important;
  border: 1px solid #d5deea !important;
  border-radius: 10px !important;
  outline: 0 !important;
  padding: 0 10px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.admin-app .overview-hour-filter select {
  min-width: 128px !important;
  cursor: pointer !important;
}

.admin-app .overview-hour-custom-range {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.admin-app .overview-hour-custom-range em {
  color: #8a96aa !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.admin-app[data-theme-mode="night"] .overview-hour-filter select,
.admin-app[data-theme-mode="night"] .overview-hour-filter input {
  color: #e8f2ff !important;
  background: #10243d !important;
  border-color: #2d4665 !important;
  color-scheme: dark !important;
}

.admin-app[data-theme-mode="night"] .overview-hour-custom-range em {
  color: #a9bad0 !important;
}

@media (max-width: 760px) {
  .admin-app .overview-section-heading.compact > .overview-hour-filter {
    justify-content: flex-start !important;
  }

  .admin-app .overview-hour-filter,
  .admin-app .overview-hour-custom-range {
    width: 100% !important;
  }

  .admin-app .overview-hour-filter select,
  .admin-app .overview-hour-filter input {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }
}

.admin-app .campaign-table-panel .campaign-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 70 !important;
  background: linear-gradient(135deg, #f7fbff 0%, #eef7ff 100%) !important;
}

.admin-app[data-theme-mode="night"] .campaign-table-panel .campaign-toolbar {
  background: linear-gradient(135deg, #122842 0%, #0c1f36 100%) !important;
}

.admin-app .campaign-table-panel .table-scroll,
.admin-app .participant-directory-view .participant-panel .table-scroll {
  max-height: min(70svh, 760px) !important;
  overflow: auto !important;
  background: #f7fbff !important;
}

.admin-app[data-theme-mode="night"] .campaign-table-panel .table-scroll,
.admin-app[data-theme-mode="night"]
  .participant-directory-view
  .participant-panel
  .table-scroll {
  background: #0b2138 !important;
}

.admin-app .campaign-table thead,
.admin-app .participant-directory-table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 65 !important;
}

.admin-app .campaign-table thead th,
.admin-app .participant-directory-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 66 !important;
}

.admin-app .server-health-metrics {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(96px, 1fr)) !important;
  gap: 7px !important;
  overflow-x: auto !important;
}

.admin-app .server-health-metric {
  min-width: 0 !important;
  padding: 10px !important;
}

.admin-app .server-health-metric small {
  font-size: clamp(6px, 0.58vw, 8px) !important;
}

.admin-app .server-health-metric strong {
  font-size: clamp(11px, 0.72vw, 14px) !important;
}

@media (min-width: 981px) {
  .admin-app .server-health-metrics {
    overflow-x: visible !important;
  }
}

@media (max-width: 900px) {
  .admin-app .overview-import-card .overview-email-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 720px) {
  .admin-app .admin-topbar {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  .admin-app .topbar-actions {
    gap: 8px !important;
    justify-content: flex-end !important;
  }

  .admin-app .sidebar-brand-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .operator-header {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    align-items: center !important;
  }

  .operator-brand-cluster {
    min-width: 0 !important;
  }

  .operator-logo-shell {
    flex: 0 1 150px !important;
    max-width: 42vw !important;
  }

  .operator-header-actions,
  .operator-clock {
    width: auto !important;
    min-width: 0 !important;
  }

  .operator-clock {
    align-items: flex-end !important;
  }
}

@media (max-width: 460px) {
  .operator-header {
    gap: 10px !important;
  }

  .operator-logo-shell {
    max-width: 38vw !important;
  }

  .operator-clock time,
  .operator-clock > strong {
    font-size: 11px !important;
  }
}

/* 1.0.54 - Privacy dashboard delivery layout and account workspace icon. */
.admin-app .overview-import-card .overview-email-grid {
  grid-template-columns: minmax(170px, 1.08fr) repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(96px, auto) !important;
  align-items: stretch !important;
}

.admin-app
  .overview-import-card
  .overview-email-grid
  .email-status-tile.is-invitation-total {
  grid-row: span 2 !important;
  grid-column: auto !important;
  align-content: center !important;
  min-height: 100% !important;
}

.admin-app .sidebar-workspace .workspace-avatar svg {
  color: #10213d !important;
  stroke: currentColor !important;
}

.admin-app[data-theme-mode="night"] .sidebar-workspace .workspace-avatar {
  color: #10213d !important;
  background: rgba(245, 249, 255, 0.94) !important;
}

.admin-app[data-theme-mode="night"] .sidebar-workspace .workspace-avatar svg {
  color: #10213d !important;
  stroke: currentColor !important;
}

@media (max-width: 900px) {
  .admin-app .overview-import-card .overview-email-grid {
    grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(140px, 1fr)) !important;
    overflow-x: auto !important;
  }

  .admin-app
    .overview-import-card
    .overview-email-grid
    .email-status-tile.is-invitation-total {
    grid-row: span 2 !important;
  }
}

@media (max-width: 640px) {
  .admin-app .overview-import-card .overview-email-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-app
    .overview-import-card
    .overview-email-grid
    .email-status-tile.is-invitation-total {
    grid-row: auto !important;
  }
}

/* 1.0.55 - Keep summary metric tables in one row. */
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scrollbar-gutter: stable !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-summary
  article {
  min-width: 0 !important;
  min-height: 108px !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-summary
  small,
.admin-app .reservation-summary-grid article small,
.admin-app .server-health-metric small {
  font-size: clamp(8px, 0.66vw, 11px) !important;
  line-height: 1.15 !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-summary
  strong {
  margin: 8px 0 5px !important;
  font-size: clamp(18px, 1.45vw, 28px) !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-summary
  em {
  font-size: clamp(8px, 0.62vw, 10px) !important;
  line-height: 1.25 !important;
}

.admin-app .reservation-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scrollbar-gutter: stable !important;
}

.admin-app .reservation-summary-grid article {
  min-width: 0 !important;
  min-height: 112px !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

.admin-app .reservation-summary-grid .settings-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
}

.admin-app .reservation-summary-grid article strong {
  font-size: clamp(20px, 1.55vw, 30px) !important;
  line-height: 1 !important;
}

.admin-app .reservation-summary-grid article em {
  font-size: clamp(8px, 0.62vw, 10px) !important;
  line-height: 1.25 !important;
}

/* 1.0.69 - Pembelian tiket stock detail and selectable rows. */
.admin-app .reservation-stock-detail-button {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #087fff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family:
    "Plus Jakarta Sans", "Jakarta Sans", Arial, Helvetica, sans-serif !important;
  font-size: clamp(10px, 0.72vw, 12px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

.admin-app .reservation-filter-bar {
  grid-template-columns: minmax(340px, 1fr) auto minmax(170px, 210px) !important;
  gap: 12px !important;
  align-items: center !important;
}

.admin-app .reservation-bulk-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.admin-app .reservation-bulk-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(8, 127, 255, 0.24) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #087fff, #0b63d8) !important;
  box-shadow: 0 10px 22px rgba(8, 127, 255, 0.22) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.admin-app .reservation-bulk-actions button:first-child {
  color: #ffffff !important;
  border-color: rgba(207, 50, 65, 0.42) !important;
  background: linear-gradient(135deg, #e05261, #c93445) !important;
  box-shadow: 0 10px 22px rgba(207, 50, 65, 0.18) !important;
}

.admin-app .reservation-bulk-actions button:disabled {
  color: rgba(118, 134, 156, 0.72) !important;
  border-color: rgba(118, 134, 156, 0.24) !important;
  background: rgba(118, 134, 156, 0.1) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.admin-app .reservation-payment-method {
  display: inline-block !important;
  max-width: 128px !important;
  overflow: hidden !important;
  vertical-align: top !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: help !important;
}

.admin-app .reservation-pagination {
  margin-top: 0 !important;
  border-top: 1px solid rgba(168, 190, 214, 0.26) !important;
}

.admin-app .reservation-order-table th:nth-child(4),
.admin-app .reservation-order-table td:nth-child(4) {
  min-width: 220px !important;
  width: 220px !important;
  white-space: nowrap !important;
}

.admin-app .reservation-order-table td:nth-child(4) strong {
  display: inline-block !important;
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-app .reservation-order-table th {
  white-space: nowrap !important;
}

.admin-app .reservation-select-column {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.admin-app .reservation-select-column input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 auto !important;
}

.admin-app .reservation-stock-backdrop {
  align-items: center !important;
  justify-content: center !important;
}

.admin-app .reservation-stock-dialog {
  width: min(640px, calc(100vw - 32px)) !important;
  color: var(--ink) !important;
}

.admin-app .reservation-stock-dialog header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.admin-app .reservation-stock-dialog h2 {
  margin: 5px 0 0 !important;
  font-size: clamp(24px, 2vw, 34px) !important;
}

.admin-app .reservation-stock-dialog header button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(120, 145, 176, 0.32) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  color: inherit !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.admin-app .reservation-stock-total,
.admin-app .reservation-stock-list article {
  border: 1px solid rgba(178, 208, 242, 0.7) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

.admin-app .reservation-stock-total {
  display: grid !important;
  gap: 6px !important;
  padding: 18px !important;
}

.admin-app .reservation-stock-total span,
.admin-app .reservation-stock-list article strong {
  font-weight: 800 !important;
}

.admin-app .reservation-stock-total strong {
  font-size: clamp(24px, 2vw, 32px) !important;
}

.admin-app .reservation-stock-total small,
.admin-app .reservation-stock-list article small {
  color: var(--muted) !important;
  font-weight: 700 !important;
}

.admin-app .reservation-stock-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.admin-app .reservation-stock-list article {
  display: grid !important;
  gap: 8px !important;
  padding: 15px !important;
}

.admin-app .reservation-stock-list article span {
  color: #087fff !important;
  font-weight: 900 !important;
}

.admin-app[data-theme-mode="night"] .reservation-stock-detail-button {
  color: #7db7ff !important;
}

.admin-app[data-theme-mode="night"] .reservation-stock-dialog {
  color: #eaf4ff !important;
  background: linear-gradient(
    145deg,
    rgba(20, 40, 66, 0.98),
    rgba(9, 25, 46, 0.98)
  ) !important;
  border-color: rgba(143, 176, 219, 0.3) !important;
}

.admin-app[data-theme-mode="night"] .reservation-stock-dialog header button,
.admin-app[data-theme-mode="night"] .reservation-stock-total,
.admin-app[data-theme-mode="night"] .reservation-stock-list article {
  color: #eaf4ff !important;
  background: rgba(13, 33, 56, 0.92) !important;
  border-color: rgba(143, 176, 219, 0.28) !important;
}

/* 1.0.88 - Manual payment proof preview. */
.admin-app .reservation-proof-dialog {
  width: min(720px, calc(100vw - 32px)) !important;
  color: var(--ink) !important;
}

.admin-app .reservation-proof-dialog header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.admin-app .reservation-proof-dialog h2 {
  margin: 5px 0 0 !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
}

.admin-app .reservation-proof-dialog header button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(120, 145, 176, 0.32) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  color: inherit !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.admin-app .reservation-proof-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.admin-app .reservation-proof-meta span,
.admin-app .reservation-proof-preview {
  border: 1px solid rgba(178, 208, 242, 0.7) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

.admin-app .reservation-proof-meta span {
  display: grid !important;
  gap: 5px !important;
  padding: 13px 15px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.admin-app .reservation-proof-meta strong {
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.admin-app .reservation-proof-preview {
  padding: 14px !important;
  text-align: center !important;
}

.admin-app .reservation-proof-preview img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 62vh !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
}

.admin-app .reservation-proof-file-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  color: #087fff !important;
  font-weight: 900 !important;
}

.admin-app[data-theme-mode="night"] .reservation-proof-link {
  color: #7db7ff !important;
}

.admin-app[data-theme-mode="night"] .reservation-proof-dialog {
  color: #eaf4ff !important;
  background: linear-gradient(
    145deg,
    rgba(20, 40, 66, 0.98),
    rgba(9, 25, 46, 0.98)
  ) !important;
  border-color: rgba(143, 176, 219, 0.3) !important;
}

.admin-app[data-theme-mode="night"] .reservation-proof-dialog header button,
.admin-app[data-theme-mode="night"] .reservation-proof-meta span,
.admin-app[data-theme-mode="night"] .reservation-proof-preview {
  color: #eaf4ff !important;
  background: rgba(13, 33, 56, 0.92) !important;
  border-color: rgba(143, 176, 219, 0.28) !important;
}

.admin-app[data-theme-mode="night"] .reservation-proof-meta strong {
  color: #eaf4ff !important;
}

@media (max-width: 920px) {
  .admin-app .reservation-filter-bar {
    grid-template-columns: 1fr !important;
  }

  .admin-app .reservation-bulk-actions {
    justify-content: stretch !important;
  }

  .admin-app .reservation-bulk-actions button {
    flex: 1 1 0 !important;
  }

  .admin-app .reservation-stock-list {
    grid-template-columns: 1fr !important;
  }

  .admin-app .reservation-proof-meta {
    grid-template-columns: 1fr !important;
  }
}

.admin-app .server-health-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scrollbar-gutter: stable !important;
}

.admin-app .server-health-metric {
  min-width: 0 !important;
  min-height: 116px !important;
  gap: 9px !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

.admin-app .server-health-metric strong {
  font-size: clamp(17px, 1.45vw, 28px) !important;
  line-height: 1.08 !important;
}

@media (max-width: 1100px) {
  .admin-app
    .ticket-report-view:not(.ticket-dashboard-view)
    .ticket-report-summary {
    grid-template-columns: repeat(6, minmax(132px, 1fr)) !important;
  }

  .admin-app .reservation-summary-grid {
    grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
  }

  .admin-app .server-health-metrics {
    grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
  }
}

/* 1.0.56 - Keep long sidebar labels on one line. */
.admin-sidebar .sidebar-nav button {
  grid-template-columns: 23px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  padding-inline: 11px 8px !important;
}

.admin-sidebar .sidebar-nav button > span {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-sidebar .sidebar-nav button > small {
  flex: none !important;
  min-width: 28px !important;
  justify-self: end !important;
  text-align: center !important;
}

.admin-sidebar .sidebar-nav button.nav-participants > span {
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
}

/* 1.0.57 - Monitoring Server summary stays in a single five-card row. */
.admin-app .infrastructure-card .infrastructure-summary {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scrollbar-gutter: stable !important;
}

.admin-app .infrastructure-card .infrastructure-summary article {
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

.admin-app .infrastructure-card .infrastructure-summary article span {
  font-size: clamp(8px, 0.62vw, 11px) !important;
  line-height: 1.15 !important;
}

.admin-app .infrastructure-card .infrastructure-summary article strong {
  font-size: clamp(17px, 1.45vw, 28px) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1100px) {
  .admin-app .infrastructure-card .infrastructure-summary {
    grid-template-columns: repeat(5, minmax(145px, 1fr)) !important;
  }
}

/* 1.0.60 - Align participant/report title cards with the summary tables below. */
.admin-app .participant-directory-view {
  align-items: stretch !important;
}

.admin-app .admin-content > .page-heading-row:has(.participant-list-title),
.admin-app .report-hero {
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.admin-app
  .admin-content
  > .page-heading-row:has(.participant-list-title)
  > div,
.admin-app .report-hero-copy {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.admin-app .page-heading-row h1.participant-list-title,
.admin-app .report-hero .report-hero-scope {
  margin-left: 0 !important;
}

/* 1.0.62 - Dashboard Tiket public report refinements. */
.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-status-card
  .dashboard-whatsapp-grid {
  display: grid !important;
  grid-template-columns: minmax(170px, 1.05fr) repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(96px, auto) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-status-card
  .dashboard-whatsapp-grid
  .email-status-tile.is-delivery-total {
  grid-row: span 2 !important;
  align-items: center !important;
}

.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-status-card
  .dashboard-whatsapp-grid
  .email-status-tile.is-delivery-total
  strong {
  font-size: clamp(28px, 2.7vw, 44px) !important;
}

.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-gate-card
  .overview-hour-chart {
  position: relative !important;
}

.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-gate-card
  .overview-hour-chart
  span {
  position: relative !important;
  z-index: 2 !important;
}

.admin-app
  .ticket-dashboard-view
  .dashboard-ticket-gate-card
  .overview-hour-line {
  z-index: 3 !important;
}

@media (max-width: 900px) {
  .admin-app
    .ticket-dashboard-view
    .dashboard-ticket-status-card
    .dashboard-whatsapp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-app
    .ticket-dashboard-view
    .dashboard-ticket-status-card
    .dashboard-whatsapp-grid
    .email-status-tile.is-delivery-total {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
  }
}

/* 1.0.63 - Peserta Tiket menu and table cleanup. */
.admin-app .reservation-filter-bar {
  align-items: center !important;
}

.admin-app .reservation-filter-bar label:not(.reservation-search) {
  justify-content: center !important;
}

.admin-app .reservation-filter-bar label:not(.reservation-search) select {
  min-height: 44px !important;
}

.admin-app .reservation-order-table th:nth-child(3),
.admin-app .reservation-order-table td:nth-child(3) {
  min-width: 280px !important;
}

/* 1.0.64 - Laporan Tiket simplified toolbar and consistent report table text. */
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  th,
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  td,
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  td
  strong,
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status {
  font-family:
    "Plus Jakarta Sans", "Jakarta Sans", Arial, Helvetica, sans-serif !important;
  font-size: clamp(13px, 0.9vw, 15px) !important;
  line-height: 1.35 !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  td,
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  td
  strong,
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status {
  color: inherit !important;
  font-weight: 700 !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status
  i {
  display: none !important;
}

/* 1.0.73 - Daftar Pembelian Tiket: clearer active bulk buttons and tighter first columns. */
.admin-app .reservation-order-table th:first-child,
.admin-app .reservation-order-table td:first-child,
.admin-app .reservation-order-table th.reservation-select-column,
.admin-app .reservation-order-table td.reservation-select-column {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.admin-app .reservation-order-table th:nth-child(2),
.admin-app .reservation-order-table td:nth-child(2) {
  min-width: 148px !important;
  width: 148px !important;
}

.admin-app .reservation-order-table th:nth-child(3),
.admin-app .reservation-order-table td:nth-child(3) {
  min-width: 230px !important;
  width: 230px !important;
}

.admin-app .reservation-order-table th:nth-child(4),
.admin-app .reservation-order-table td:nth-child(4) {
  min-width: 190px !important;
  width: 190px !important;
}

.admin-app .reservation-order-table th:nth-child(5),
.admin-app .reservation-order-table td:nth-child(5) {
  min-width: 260px !important;
  width: 260px !important;
}

.admin-app .reservation-order-table td:nth-child(4) strong {
  max-width: 190px !important;
}

/* 1.0.80 - Ticketing checkout readability and Midtrans payment UI polish. */
.ticket-store-shell .ticket-store-hero-logo {
  width: 198px !important;
  height: 70px !important;
  overflow: visible !important;
}

.ticket-store-shell .ticket-store-hero-logo img {
  object-fit: contain !important;
  padding: 3px !important;
}

.ticket-store-shell .ticket-store-event-card small {
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
}

.ticket-store-shell .ticket-store-event-card p {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.ticket-store-shell .ticket-store-event-card p svg {
  width: 15px !important;
  height: 15px !important;
}

.ticket-store-shell .ticket-tier-card small,
.ticket-store-shell .ticket-tier-card li,
.ticket-store-shell .ticket-tier-card > p,
.ticket-store-shell .ticket-stock-line small,
.ticket-store-shell .ticket-stock-line span,
.ticket-store-shell .payment-method-grid small,
.ticket-store-shell .qris-note strong {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.ticket-store-shell .ticket-tier-card h3 {
  font-size: 24px !important;
  line-height: 1.16 !important;
}

.ticket-store-shell .public-ticket-price del {
  font-size: 11px !important;
}

.ticket-store-shell .public-ticket-price strong {
  font-size: 21px !important;
}

.ticket-store-shell .public-ticket-price b {
  font-size: 9px !important;
}

.ticket-store-shell .ticket-tier-card > span:last-child {
  font-size: 12px !important;
}

.ticket-store-shell .ticket-quantity-row strong {
  font-size: 18px !important;
}

.ticket-store-shell .ticket-order-card h2 {
  font-size: 19px !important;
}

.ticket-store-shell .order-ticket-summary strong {
  font-size: 15px !important;
}

.ticket-store-shell .order-ticket-summary small {
  font-size: 12px !important;
}

.ticket-store-shell .ticket-order-card dl dt,
.ticket-store-shell .ticket-order-card dl dd {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.ticket-store-shell .ticket-order-card dl dd {
  color: #1a2a3f !important;
  font-weight: 850 !important;
}

.ticket-store-shell .ticket-order-card dl > div:last-child dt {
  font-size: 14px !important;
}

.ticket-store-shell .ticket-order-card dl > div:last-child dd {
  font-size: 24px !important;
}

.ticket-store-shell .checkout-terms {
  align-items: flex-start !important;
  color: #111827 !important;
  font-size: 14.5px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

.ticket-store-shell .checkout-terms button {
  color: #007cff !important;
  font-size: inherit !important;
}

.ticket-store-shell .manual-transfer-proof {
  min-height: 74px !important;
  place-items: center !important;
  padding: 12px 16px !important;
  text-align: center !important;
}

.ticket-store-shell .manual-transfer-proof input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.ticket-store-shell .manual-transfer-proof > span {
  justify-content: center !important;
}

.ticket-store-shell .manual-transfer-proof > span strong {
  font-size: 14px !important;
}

.ticket-store-shell .manual-transfer-proof small {
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.ticket-store-shell[data-theme-mode="night"] .ticket-order-card dl dd,
.ticket-store-shell[data-theme-mode="night"] .checkout-terms {
  color: #f3f8ff !important;
}

@media (prefers-color-scheme: dark) {
  .ticket-store-shell .ticket-order-card dl dd,
  .ticket-store-shell .checkout-terms {
    color: #f3f8ff !important;
  }
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-store-hero-logo {
    width: 178px !important;
    height: 62px !important;
  }
}

/* 1.0.81 - QRIS instruction dialog cleanup. */
.ticket-store-shell .payment-instruction {
  width: min(820px, calc(100vw - 32px)) !important;
}

.ticket-store-shell .payment-instruction > p {
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.ticket-store-shell .qris-payment-box {
  padding: 26px !important;
  gap: 14px !important;
}

.ticket-store-shell .qris-remote {
  width: min(360px, 72vw) !important;
  height: min(360px, 72vw) !important;
  border-radius: 18px !important;
  background-size: contain !important;
}

.ticket-store-shell .qris-payment-box > small {
  max-width: 560px !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.ticket-store-shell .payment-total {
  align-items: center !important;
}

.ticket-store-shell .payment-total span {
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

.ticket-store-shell .payment-total strong {
  font-size: 30px !important;
}

.ticket-store-shell .payment-countdown {
  justify-content: center !important;
  gap: 10px !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

.ticket-store-shell .payment-countdown strong {
  color: #111827 !important;
  font-size: 18px !important;
}

.ticket-store-shell .payment-countdown b {
  color: #007cff !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
}

.ticket-store-shell .payment-instruction .ticket-payment-actions {
  grid-template-columns: 1fr !important;
}

.ticket-store-shell .payment-instruction .ticket-payment-actions button {
  min-height: 58px !important;
  font-size: 18px !important;
}

.ticket-store-shell[data-theme-mode="night"] .payment-instruction > p,
.ticket-store-shell[data-theme-mode="night"] .qris-payment-box > small,
.ticket-store-shell[data-theme-mode="night"] .payment-total span,
.ticket-store-shell[data-theme-mode="night"] .payment-countdown,
.ticket-store-shell[data-theme-mode="night"] .payment-countdown strong {
  color: #f3f8ff !important;
}

@media (prefers-color-scheme: dark) {
  .ticket-store-shell .payment-instruction > p,
  .ticket-store-shell .qris-payment-box > small,
  .ticket-store-shell .payment-total span,
  .ticket-store-shell .payment-countdown,
  .ticket-store-shell .payment-countdown strong {
    color: #f3f8ff !important;
  }
}

@media (max-width: 760px) {
  .ticket-store-shell .qris-payment-box {
    padding: 18px !important;
  }

  .ticket-store-shell .qris-remote {
    width: min(300px, 78vw) !important;
    height: min(300px, 78vw) !important;
  }

  .ticket-store-shell .payment-total {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
  }
}

/* 1.0.82 - Ticketing header logo and checkout control polish. */
.ticket-store-shell .ticket-store-header {
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 76px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
  width: 150px !important;
  height: 48px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.ticket-store-shell .ticket-store-header .ticket-store-hero-logo img {
  object-fit: contain !important;
  padding: 2px !important;
}

.ticket-store-shell .ticket-store-hero .ticket-store-hero-logo {
  display: none !important;
}

.ticket-store-shell .ticket-store-hero {
  padding-top: 20px !important;
}

.ticket-store-shell .ticket-event-select {
  gap: 0 !important;
}

.ticket-store-shell .ticket-event-select > span {
  display: none !important;
}

.ticket-store-shell .ticket-order-card dl > div:last-child dd {
  color: #007cff !important;
}

.ticket-store-shell .checkout-terms {
  align-items: center !important;
  display: flex !important;
  gap: 9px !important;
  white-space: nowrap !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

.ticket-store-shell .checkout-terms input {
  flex: 0 0 auto !important;
}

.ticket-store-shell .checkout-terms span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ticket-store-shell .checkout-primary {
  min-height: 60px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.ticket-store-shell .checkout-primary svg {
  width: 20px !important;
  height: 20px !important;
}

.ticket-store-shell .ticket-quantity-row button {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
}

.ticket-store-shell .ticket-quantity-row button svg {
  width: 23px !important;
  height: 23px !important;
  stroke-width: 2.8 !important;
}

.ticket-store-shell .ticket-quantity-row input {
  width: 70px !important;
  height: 48px !important;
  min-height: 48px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-store-header {
    min-height: 68px !important;
    padding-inline: 18px !important;
  }

  .ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
    width: 132px !important;
    height: 42px !important;
  }

  .ticket-store-shell .checkout-terms {
    white-space: normal !important;
    font-size: 12px !important;
  }
}

/* 1.0.83 - QRIS payment dialog alignment and scan size. */
.ticket-store-shell .payment-instruction {
  width: min(880px, calc(100vw - 32px)) !important;
}

.ticket-store-shell .qris-payment-box {
  padding: 28px 30px !important;
}

.ticket-store-shell .qris-remote {
  width: min(430px, 76vw) !important;
  height: min(430px, 76vw) !important;
  border-radius: 20px !important;
}

.ticket-store-shell .payment-total {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
}

.ticket-store-shell .payment-total span,
.ticket-store-shell .payment-total strong {
  text-align: center !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .qris-payment-box {
    padding: 20px !important;
  }

  .ticket-store-shell .qris-remote {
    width: min(340px, 82vw) !important;
    height: min(340px, 82vw) !important;
  }
}

/* 1.0.84 - Ticketing form readability and checkout sizing. */
.ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
  width: 124px !important;
  height: 40px !important;
}

.ticket-store-shell .ticket-store-header .ticket-store-hero-logo img {
  padding: 1px !important;
}

.ticket-store-shell .public-ticket-price del {
  font-size: 13px !important;
  font-weight: 800 !important;
}

.ticket-store-shell .buyer-form-grid label > span {
  color: #18283d !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.ticket-store-shell .buyer-form-grid input {
  font-size: 16px !important;
}

.ticket-store-shell .checkout-primary {
  min-height: 54px !important;
  font-size: 17px !important;
}

.ticket-store-shell .checkout-primary svg {
  width: 18px !important;
  height: 18px !important;
}

.ticket-store-shell .checkout-terms {
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  font-size: 11.6px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
}

.ticket-store-shell .checkout-terms span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.ticket-store-shell .checkout-terms button {
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
    width: 112px !important;
    height: 36px !important;
  }

  .ticket-store-shell .checkout-terms {
    font-size: 10.8px !important;
    white-space: nowrap !important;
  }
}

/* 1.0.85 - Ticketing compact header, footer, selector, and QRIS scan polish. */
.ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
  width: 88px !important;
  height: 30px !important;
}

.ticket-store-shell .ticket-store-header .ticket-store-hero-logo img {
  padding: 0 !important;
}

.ticket-store-shell .ticket-store-event-card small {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.ticket-store-shell .ticket-event-select {
  max-width: 560px !important;
}

.ticket-store-shell .ticket-event-select select {
  width: 100% !important;
}

.ticket-store-shell .ticket-tier-card > span:last-child {
  min-height: 50px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.ticket-store-shell .ticket-quantity-row input::-webkit-outer-spin-button,
.ticket-store-shell .ticket-quantity-row input::-webkit-inner-spin-button {
  margin: 0 !important;
  -webkit-appearance: none !important;
}

.ticket-store-shell .ticket-quantity-row input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.ticket-store-shell .checkout-terms {
  font-size: 10.5px !important;
  gap: 6px !important;
}

.ticket-store-shell .checkout-security {
  grid-template-columns: auto 1fr !important;
}

.ticket-store-shell .ticket-store-footer {
  justify-content: flex-start !important;
}

.ticket-store-shell .ticket-store-footer > span {
  color: #007cff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.ticket-store-shell .ticket-store-footer > div {
  display: none !important;
}

.ticket-store-shell .qris-remote {
  width: min(500px, 78vw) !important;
  height: min(500px, 78vw) !important;
  background-size: 112% !important;
  background-position: center !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
    width: 78px !important;
    height: 27px !important;
  }

  .ticket-store-shell .checkout-terms {
    font-size: 9.5px !important;
  }

  .ticket-store-shell .qris-remote {
    width: min(380px, 84vw) !important;
    height: min(380px, 84vw) !important;
  }
}

/* 1.0.86 - Final ticketing header logo, hero title, and terms scale lock. */
.ticket-store-shell .ticket-store-header {
  min-height: 70px !important;
  padding-block: 10px !important;
}

.ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
  display: block !important;
  flex: 0 0 64px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 22px !important;
  max-height: 22px !important;
  overflow: hidden !important;
}

.ticket-store-shell .ticket-store-header .ticket-store-hero-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.ticket-store-shell .ticket-store-hero h1 {
  max-width: 800px !important;
  font-size: clamp(42px, 4.6vw, 78px) !important;
  line-height: 1.04 !important;
}

.ticket-store-shell .checkout-terms {
  font-size: 9.2px !important;
  line-height: 1.12 !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.ticket-store-shell .checkout-terms span,
.ticket-store-shell .checkout-terms button {
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-store-header {
    min-height: 60px !important;
  }

  .ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
    flex-basis: 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 19px !important;
    max-height: 19px !important;
  }

  .ticket-store-shell .ticket-store-hero h1 {
    font-size: clamp(30px, 7vw, 42px) !important;
  }

  .ticket-store-shell .checkout-terms {
    font-size: 8.2px !important;
    letter-spacing: 0 !important;
  }
}

/* 1.0.87 - Restore visible cropped ticketing logo and tighten terms text. */
.ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 32px !important;
  max-height: 32px !important;
  overflow: hidden !important;
  position: relative !important;
}

.ticket-store-shell .ticket-store-header .ticket-store-hero-logo img {
  width: 180px !important;
  max-width: none !important;
  height: 135px !important;
  max-height: none !important;
  object-fit: contain !important;
  position: absolute !important;
  inset: auto auto auto auto !important;
  top: -54px !important;
  left: -41px !important;
}

.ticket-store-shell .checkout-terms {
  font-size: 8.4px !important;
  line-height: 1.1 !important;
  gap: 4px !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-store-header .ticket-store-hero-logo {
    flex-basis: 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  .ticket-store-shell .ticket-store-header .ticket-store-hero-logo img {
    width: 154px !important;
    height: 116px !important;
    top: -46px !important;
    left: -35px !important;
  }

  .ticket-store-shell .checkout-terms {
    font-size: 7.6px !important;
  }
}

/* 1.0.90 - Ticketing dark footer, QRIS dialog balance, and manual proof metadata. */
.ticket-store-shell[data-theme-mode="night"] .ticket-store-footer {
  background: linear-gradient(
    180deg,
    rgba(5, 18, 35, 0.98),
    rgba(4, 14, 28, 1)
  ) !important;
  border-top: 1px solid rgba(139, 171, 211, 0.22) !important;
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  .ticket-store-shell .ticket-store-footer {
    background: linear-gradient(
      180deg,
      rgba(5, 18, 35, 0.98),
      rgba(4, 14, 28, 1)
    ) !important;
    border-top: 1px solid rgba(139, 171, 211, 0.22) !important;
    color: #ffffff !important;
  }
}

.ticket-store-shell[data-theme-mode="night"] .ticket-store-footer > span {
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  .ticket-store-shell .ticket-store-footer > span {
    color: #ffffff !important;
  }
}

.ticket-store-shell .payment-instruction {
  width: min(760px, calc(100vw - 32px)) !important;
  padding: clamp(24px, 3vw, 34px) !important;
}

.ticket-store-shell .qris-payment-box {
  padding: 20px !important;
  gap: 12px !important;
}

.ticket-store-shell .qris-remote {
  width: min(390px, 72vw) !important;
  height: min(390px, 72vw) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.ticket-store-shell .qris-payment-box > small {
  display: block !important;
  max-width: 520px !important;
  margin-inline: auto !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.ticket-store-shell .payment-total {
  margin-top: 12px !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .payment-instruction {
    width: min(560px, calc(100vw - 20px)) !important;
    padding: 20px !important;
  }

  .ticket-store-shell .qris-remote {
    width: min(330px, 82vw) !important;
    height: min(330px, 82vw) !important;
  }
}

.admin-app .reservation-proof-meta {
  position: relative !important;
  z-index: 1 !important;
}

.admin-app .reservation-proof-meta span {
  min-height: 70px !important;
}

/* 1.0.91 - Keep Campaign ticket QR visible like Daftar Pembelian Tiket. */
.admin-app .campaign-table td.campaign-ticket-cell {
  min-width: 300px !important;
  width: 300px !important;
}

.admin-app .campaign-table .campaign-ticket-code {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.admin-app .campaign-table .campaign-ticket-code .campaign-qr-preview {
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  padding: 5px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(131, 154, 185, 0.28) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.admin-app .campaign-table .campaign-ticket-code .campaign-qr-preview svg,
.admin-app .campaign-table .campaign-ticket-code .campaign-qr-preview canvas {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}

.admin-app .campaign-table .campaign-ticket-code > span:last-child {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.admin-app .campaign-table .campaign-ticket-code strong {
  color: var(--text-strong) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.admin-app .campaign-table .campaign-ticket-code .campaign-ticket-link {
  display: block !important;
  max-width: 220px !important;
  color: #087cff !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 1.0.92 - Payment confirmation and QRIS dialog spacing/readability. */
.ticket-store-shell .checkout-review-dialog {
  width: min(760px, calc(100vw - 28px)) !important;
  padding: clamp(24px, 3vw, 34px) !important;
}

.ticket-store-shell .checkout-review-dialog > p {
  max-width: 620px !important;
  margin-inline: auto !important;
  color: #1f2f46 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.ticket-store-shell .checkout-review-list {
  gap: 12px !important;
  padding: 18px 20px !important;
}

.ticket-store-shell .checkout-review-list > div {
  align-items: center !important;
  gap: 18px !important;
  font-size: 16px !important;
}

.ticket-store-shell .checkout-review-list dt {
  color: #586a82 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.ticket-store-shell .checkout-review-list dd {
  color: #10213d !important;
  font-size: 17px !important;
  font-weight: 850 !important;
}

.ticket-store-shell .payment-instruction {
  width: min(700px, calc(100vw - 24px)) !important;
  padding: clamp(22px, 2.4vw, 30px) !important;
  gap: 12px !important;
}

.ticket-store-shell .payment-instruction h2 {
  margin-bottom: 2px !important;
}

.ticket-store-shell .qris-payment-box {
  padding: 16px !important;
  gap: 10px !important;
}

.ticket-store-shell .qris-remote {
  width: min(420px, 72vw) !important;
  height: min(420px, 72vw) !important;
}

.ticket-store-shell .payment-status {
  align-self: center !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
}

.ticket-store-shell .payment-total {
  justify-content: center !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-top: 2px !important;
  text-align: center !important;
}

.ticket-store-shell .payment-total span,
.ticket-store-shell .payment-total strong {
  color: #111827 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

.ticket-store-shell .payment-total strong::before {
  content: ": ";
  font-weight: 850;
}

.ticket-store-shell .payment-countdown {
  justify-content: center !important;
  margin: 0 auto !important;
  color: #1f2f46 !important;
  font-size: 16px !important;
}

.ticket-store-shell .payment-countdown strong,
.ticket-store-shell .payment-countdown b {
  font-size: 16px !important;
}

.ticket-store-shell .payment-instruction .ticket-payment-actions {
  margin-top: 2px !important;
}

.ticket-store-shell .payment-instruction .ticket-payment-actions button {
  min-height: 54px !important;
  font-size: 18px !important;
}

/* 1.0.93 - Manual transfer payment dialog compact status layout. */
.ticket-store-shell .payment-instruction.is-manual-payment > p {
  max-width: 520px !important;
  margin: 0 auto !important;
  color: #1f2f46 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.ticket-store-shell .payment-instruction.is-manual-payment .payment-countdown {
  display: grid !important;
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  gap: 4px 8px !important;
}

.ticket-store-shell
  .payment-instruction.is-manual-payment
  .payment-countdown
  b {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  font-size: 20px !important;
  letter-spacing: 0.02em !important;
}

.ticket-store-shell[data-theme-mode="night"]
  .payment-instruction.is-manual-payment
  > p {
  color: #f3f8ff !important;
}

@media (prefers-color-scheme: dark) {
  .ticket-store-shell .payment-instruction.is-manual-payment > p {
    color: #f3f8ff !important;
  }
}

.ticket-store-shell[data-theme-mode="night"] .checkout-review-dialog > p,
.ticket-store-shell[data-theme-mode="night"] .checkout-review-list dt,
.ticket-store-shell[data-theme-mode="night"] .payment-countdown,
.ticket-store-shell[data-theme-mode="night"] .payment-total span,
.ticket-store-shell[data-theme-mode="night"] .payment-total strong {
  color: #f3f8ff !important;
}

@media (prefers-color-scheme: dark) {
  .ticket-store-shell .checkout-review-dialog > p,
  .ticket-store-shell .checkout-review-list dt,
  .ticket-store-shell .payment-countdown,
  .ticket-store-shell .payment-total span,
  .ticket-store-shell .payment-total strong {
    color: #f3f8ff !important;
  }
}

@media (max-width: 760px) {
  .ticket-store-shell .checkout-review-dialog,
  .ticket-store-shell .payment-instruction {
    width: min(560px, calc(100vw - 18px)) !important;
    padding: 20px !important;
  }

  .ticket-store-shell .checkout-review-list > div {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    font-size: 15px !important;
  }

  .ticket-store-shell .qris-remote {
    width: min(350px, 82vw) !important;
    height: min(350px, 82vw) !important;
  }

  .ticket-store-shell .payment-total span,
  .ticket-store-shell .payment-total strong {
    font-size: 18px !important;
  }
}

/* 1.0.94 - Keep manual transfer confirmation title and proof details tidy. */
.ticket-store-shell .checkout-review-dialog #checkout-review-title {
  max-width: 100% !important;
  white-space: nowrap !important;
  font-size: clamp(26px, 2.85vw, 38px) !important;
  line-height: 1.1 !important;
}

.admin-app .reservation-proof-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .checkout-review-dialog #checkout-review-title {
    font-size: clamp(20px, 4.4vw, 28px) !important;
  }

  .admin-app .reservation-proof-meta {
    grid-template-columns: 1fr !important;
  }
}

/* 1.0.95 - Ticketing hero scale and one-line payment total. */
.ticket-store-shell .ticket-store-hero h1 {
  max-width: 720px !important;
  font-size: clamp(38px, 3.75vw, 64px) !important;
  line-height: 1.05 !important;
}

.ticket-store-shell .ticket-store-hero p {
  max-width: 760px !important;
  font-size: clamp(17px, 1.2vw, 22px) !important;
  line-height: 1.55 !important;
}

.ticket-store-shell .payment-total {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.ticket-store-shell .payment-total span,
.ticket-store-shell .payment-total strong {
  display: inline !important;
  width: auto !important;
  text-align: inherit !important;
  line-height: 1.2 !important;
}

.ticket-store-shell .payment-total strong::before {
  content: ": " !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-store-hero h1 {
    font-size: clamp(34px, 8vw, 46px) !important;
  }

  .ticket-store-shell .ticket-store-hero p {
    font-size: 16px !important;
  }

  .ticket-store-shell .payment-total span,
  .ticket-store-shell .payment-total strong {
    font-size: 18px !important;
  }
}

/* 1.0.101 - Remove the extra outer QRIS card so the payment popup stays compact. */
.ticket-store-shell .payment-instruction {
  width: min(640px, calc(100vw - 24px)) !important;
  padding: clamp(18px, 2vw, 24px) !important;
  gap: 8px !important;
}

.ticket-store-shell .payment-instruction h2 {
  margin: 0 0 4px !important;
  font-size: clamp(25px, 2.45vw, 34px) !important;
  line-height: 1.1 !important;
}

.ticket-store-shell .payment-instruction.is-qris-payment h2 {
  font-size: clamp(22px, 2.05vw, 28px) !important;
}

.ticket-store-shell .qris-payment-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 8px !important;
}

.ticket-store-shell .qris-remote {
  width: min(390px, 68vw) !important;
  height: min(390px, 68vw) !important;
  box-shadow: 0 18px 42px rgba(4, 20, 44, 0.18) !important;
}

.ticket-store-shell .qris-payment-box .qris-payment-status {
  align-self: center !important;
  margin: -2px auto 0 !important;
  padding: 7px 14px 6px !important;
  font-size: 11px !important;
}

.ticket-store-shell .qris-payment-box > small {
  max-width: min(390px, 68vw) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

.ticket-store-shell .payment-total {
  margin-top: 2px !important;
}

.ticket-store-shell .payment-instruction.is-qris-payment .payment-total strong {
  color: #087cff !important;
}

.ticket-store-shell .payment-countdown {
  gap: 7px !important;
  font-size: 15px !important;
}

.ticket-store-shell .payment-countdown strong,
.ticket-store-shell .payment-countdown b {
  font-size: 15px !important;
}

.ticket-store-shell .payment-instruction .ticket-payment-actions {
  margin-top: 0 !important;
}

.ticket-store-shell .payment-instruction .ticket-payment-actions button {
  min-height: 44px !important;
  padding: 0 18px !important;
  font-size: 16px !important;
}

.ticket-store-shell
  .payment-instruction.is-qris-payment
  .ticket-payment-actions
  button {
  min-height: 38px !important;
  padding: 0 16px !important;
}

.ticket-store-shell .qris-payment-footer {
  display: grid !important;
  grid-template-columns: max-content minmax(180px, 260px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.ticket-store-shell .qris-payment-footer .payment-status {
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  font-size: 10.5px !important;
  white-space: nowrap !important;
}

.ticket-store-shell .qris-payment-footer button {
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .payment-instruction {
    width: min(520px, calc(100vw - 18px)) !important;
    padding: 16px !important;
    gap: 7px !important;
  }

  .ticket-store-shell .qris-remote {
    width: min(310px, 78vw) !important;
    height: min(310px, 78vw) !important;
  }

  .ticket-store-shell .qris-payment-box > small {
    font-size: 12px !important;
  }

  .ticket-store-shell .payment-instruction .ticket-payment-actions button {
    min-height: 42px !important;
    font-size: 15px !important;
  }

  .ticket-store-shell
    .payment-instruction.is-qris-payment
    .ticket-payment-actions
    button {
    min-height: 38px !important;
  }

  .ticket-store-shell .qris-payment-footer {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ticket-store-shell .qris-payment-footer .payment-status {
    justify-self: center !important;
  }

  .ticket-store-shell .qris-payment-footer button {
    justify-self: center !important;
    width: min(260px, 100%) !important;
  }
}

/* 1.0.90 - Final public ticketing banner height lock after all overrides. */
.ticket-store-shell .ticket-public-banner {
  min-height: 235px !important;
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-public-banner {
    min-height: 220px !important;
  }
}

/* 1.0.7-final - Must stay after the legacy banner lock. */
.ticket-store-shell .ticket-public-banner {
  min-height: 270px !important;
}

.ticket-store-shell .ticket-public-banner-video {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.operator-app .scanner-frame {
  transform: scale(0.92) !important;
  transform-origin: center center !important;
  max-height: calc(100svh - 285px) !important;
}

@media (max-width: 1100px) {
  .operator-app .scanner-frame {
    max-height: min(54svh, 580px) !important;
  }
}

@media (max-width: 760px) {
  .ticket-store-shell .ticket-public-banner {
    min-height: 250px !important;
  }

  .operator-app .scanner-frame {
    transform: scale(0.94) !important;
  }
}

/* 1.0.16-final - Keep these report/close-button refinements after legacy overrides. */
.admin-app .report-hero .report-hero-scope small {
  display: block !important;
  margin: 6px 0 0 !important;
  color: #758295 !important;
  font-size: 0.62em !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.admin-app .participant-summary.report-summary-grid article > span {
  font-size: 15px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
}

.admin-app .report-hero ~ section.panel .data-table td strong,
.admin-app .report-hero ~ section.panel .data-table td .table-subtext {
  font-size: 15px !important;
  line-height: 1.28 !important;
}

.admin-app .infrastructure-summary article > span,
.admin-app .server-health-metric small {
  font-size: 10px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}

.admin-app .server-health-chart-heading {
  align-items: center !important;
}

.admin-app .server-health-chart-heading strong {
  font-size: 15px !important;
}

.admin-app[data-theme-mode="night"] .report-hero .report-hero-scope small {
  color: rgba(255, 255, 255, 0.78) !important;
}

.admin-app section.panel:has(> .report-section-eyebrow + .venue-gate-table) {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.admin-app section.panel > .report-section-eyebrow:first-child {
  margin-top: 5px !important;
  margin-bottom: 10px !important;
}

.admin-app
  section.panel
  > .report-section-eyebrow:first-child
  + .venue-gate-table {
  margin-top: 10px !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .modal-card header > button,
    .event-crop-close,
    .blast-modal-close-button,
    .scan-popup-close,
    .mobile-close
  ) {
  color: #dfeaff !important;
  background: #10233a !important;
  border-color: rgba(111, 163, 220, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.28) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .modal-card header > button,
    .event-crop-close,
    .blast-modal-close-button,
    .scan-popup-close,
    .mobile-close
  )
  svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* 1.0.20 - Daftar Pembelian Tiket heading, summary labels, and empty-state copy. */
.admin-app .page-heading-row h1.reservation-page-title {
  margin-bottom: 2px !important;
}

.admin-app .reservation-summary-grid article small {
  font-size: clamp(10px, 0.78vw, 13px) !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.admin-app .reservation-empty span {
  font-size: clamp(10px, 0.76vw, 12px) !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

/* 1.0.21 - Laporan Tiket title, filters, cards, and status framing. */
.admin-app .page-heading-row h1.ticket-report-page-title {
  margin-bottom: 2px !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .panel-heading
  > button[aria-label="Menu"] {
  display: none !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-summary {
  align-items: stretch !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-summary
  article
  small {
  font-size: clamp(10px, 0.78vw, 13px) !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-summary
  article
  em {
  font-size: clamp(9.5px, 0.72vw, 12px) !important;
  line-height: 1.34 !important;
  font-weight: 800 !important;
}

/* 1.0.101 - Operator live scanner controls and event video background. */
.operator-app .operator-theme-background,
.operator-app .operator-theme-background.has-video {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background-position: center center !important;
  background-size: cover !important;
}

.operator-app .operator-theme-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.operator-app .operator-theme-background.has-video::after {
  background: linear-gradient(
    180deg,
    rgba(4, 13, 28, 0.26),
    rgba(4, 13, 28, 0.44)
  ) !important;
}

.operator-app :is(.operator-header, .operator-stage) {
  position: relative !important;
  z-index: 1 !important;
}

.operator-app .scanner-column {
  gap: clamp(10px, 1.4vw, 18px) !important;
}

.operator-app .scanner-frame {
  position: relative !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.operator-app .scanner-divider {
  display: none !important;
}

.operator-app .stop-camera {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 7 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
}

.operator-app .stop-camera .operator-camera-off-symbol {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
}

.operator-app .stop-camera .operator-camera-off-symbol svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  transform: translate(-1px, 1px) !important;
}

.operator-app .manual-scan-toggle {
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(220, 232, 248, 0.28) !important;
  border-radius: 14px !important;
  background: rgba(17, 38, 61, 0.86) !important;
  color: #f4f9ff !important;
  font-weight: 850 !important;
  box-shadow: 0 12px 24px rgba(3, 14, 28, 0.24) !important;
}

.operator-app .manual-scan-toggle:hover {
  border-color: rgba(238, 246, 255, 0.46) !important;
  background: rgba(24, 52, 82, 0.92) !important;
}

.operator-app .operator-manual-icon-toggle {
  position: absolute !important;
  top: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  transform: none !important;
  z-index: 8 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(5, 24, 48, 0.58) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.18) !important;
}

.operator-app .operator-manual-icon-toggle:hover {
  border-color: rgba(238, 246, 255, 0.46) !important;
  background: rgba(13, 55, 91, 0.72) !important;
  color: #ffffff !important;
}

.operator-app .operator-manual-icon-toggle.is-open {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(13, 55, 91, 0.72) !important;
  color: #ffffff !important;
}

.operator-app .operator-manual-icon-toggle svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.operator-app .manual-scan {
  width: 92% !important;
  max-width: 92% !important;
  margin: 0 auto !important;
}

@media (max-width: 700px) {
  .operator-app .operator-manual-icon-toggle {
    right: 12px !important;
    bottom: 12px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .operator-app .manual-scan {
    width: 94% !important;
    max-width: 94% !important;
  }
}

.admin-app .ticket-chart-period-controls {
  position: relative !important;
  align-items: flex-start !important;
}

.admin-app .ticket-chart-period-controls .ticket-chart-period-dropdown {
  min-width: 170px !important;
  position: relative !important;
}

.admin-app
  .ticket-chart-period-controls
  .ticket-chart-period-dropdown
  .event-filter-trigger {
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.admin-app
  .ticket-chart-period-controls
  .ticket-chart-period-dropdown
  .event-filter-menu {
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 170px !important;
  z-index: 40 !important;
}

.admin-app .ticket-payment-method-panel {
  align-content: start !important;
}

.admin-app .ticket-payment-method-panel .ticket-category-inline {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(145, 170, 201, 0.24) !important;
}

.admin-app .ticket-payment-method-panel .ticket-category-inline h4 {
  margin: 0 0 10px !important;
  color: #10243c !important;
  font-size: clamp(15px, 1.05vw, 19px) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.admin-app .ticket-payment-method-panel .ticket-category-performance {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-app .ticket-payment-method-panel .ticket-category-performance > div {
  min-height: 72px !important;
  padding: 12px !important;
  align-items: flex-start !important;
}

.admin-app .ticket-payment-method-panel .ticket-payment-methods {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-app .ticket-payment-method-panel .ticket-payment-methods > div {
  min-height: 72px !important;
  padding: 12px !important;
  align-items: center !important;
}

.admin-app
  .ticket-payment-method-panel
  .ticket-payment-methods
  > div
  span
  strong {
  color: #1b2e4d !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.admin-app
  .ticket-payment-method-panel
  .ticket-payment-methods
  > div
  span
  small {
  color: #7c8998 !important;
  font-size: 7px !important;
  font-weight: 700 !important;
}

.admin-app .ticket-payment-method-panel .ticket-payment-methods > div b {
  color: #006fe4 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-payment-method-panel
  .ticket-payment-methods
  > div
  span
  strong {
  color: #f3f8ff !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-payment-method-panel
  .ticket-payment-methods
  > div
  span
  small {
  color: #b8c7dc !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-payment-method-panel
  .ticket-payment-methods
  > div
  b {
  color: #abd4ff !important;
}

.admin-app .ticket-payment-method-panel .ticket-category-performance p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

.admin-app .ticket-report-performance-grid {
  grid-template-columns: 1fr !important;
}

.admin-app .ticket-event-performance-panel {
  overflow: hidden !important;
  border-color: rgba(154, 185, 222, 0.45) !important;
}

.admin-app .ticket-event-performance-panel .table-scroll {
  overflow: auto !important;
  border: 1px solid rgba(154, 185, 222, 0.36) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.38) !important;
}

.admin-app .ticket-event-performance-panel .data-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  min-width: 820px !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  min-width: 48px !important;
  padding: 6px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status
  i {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  flex: 0 0 7px !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-paid {
  color: #0f7a48 !important;
  background: rgba(42, 190, 112, 0.14) !important;
  border-color: rgba(42, 190, 112, 0.38) !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-paid
  i {
  background: #2abe70 !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-pending {
  color: #a86600 !important;
  background: rgba(255, 183, 53, 0.18) !important;
  border-color: rgba(255, 183, 53, 0.45) !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-pending
  i {
  background: #ffad1f !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-cancel {
  color: #b73535 !important;
  background: rgba(255, 82, 82, 0.14) !important;
  border-color: rgba(255, 82, 82, 0.36) !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-cancel
  i {
  background: #ff5a5a !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-sold {
  color: #075db8 !important;
  background: rgba(8, 124, 255, 0.13) !important;
  border-color: rgba(8, 124, 255, 0.36) !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-sold
  i {
  background: #087cff !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-payment-method-panel
  .ticket-category-inline {
  border-top-color: rgba(111, 163, 220, 0.25) !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-payment-method-panel
  .ticket-category-inline
  h4 {
  color: #f3f8ff !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-event-performance-panel
  .table-scroll {
  background: rgba(9, 28, 48, 0.72) !important;
  border-color: rgba(111, 163, 220, 0.34) !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-paid {
  color: #9af0bf !important;
  background: rgba(42, 190, 112, 0.18) !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-pending {
  color: #ffd88c !important;
  background: rgba(255, 183, 53, 0.18) !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-cancel {
  color: #ffb2b2 !important;
  background: rgba(255, 82, 82, 0.17) !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-table
  .payment-ledger-status.is-sold {
  color: #abd4ff !important;
  background: rgba(8, 124, 255, 0.18) !important;
}

/* 1.0.22 - Laporan Tiket empty data and left-aligned report copy. */
.admin-app .ticket-report-view:not(.ticket-dashboard-view) .panel-heading {
  justify-content: space-between !important;
  text-align: left !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .panel-heading
  > div {
  align-items: flex-start !important;
  text-align: left !important;
}

.admin-app .ticket-report-view:not(.ticket-dashboard-view) .panel-heading h3 {
  text-align: left !important;
  font-weight: 900 !important;
}

.admin-app .ticket-payment-method-panel,
.admin-app .ticket-payment-method-panel .ticket-payment-methods,
.admin-app .ticket-payment-method-panel .ticket-category-inline,
.admin-app .ticket-payment-method-panel .ticket-category-performance {
  text-align: left !important;
}

.admin-app .ticket-payment-method-panel .ticket-payment-methods > p,
.admin-app .ticket-payment-method-panel .ticket-category-performance > p {
  justify-self: start !important;
  align-self: start !important;
  text-align: left !important;
  margin-left: 0 !important;
  color: #66788f !important;
  font-size: clamp(14px, 0.95vw, 16px) !important;
  font-weight: 750 !important;
}

.admin-app .ticket-payment-method-panel .ticket-category-inline h4 {
  text-align: left !important;
  font-weight: 900 !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-empty-row
  td {
  color: #283b52 !important;
  font-weight: 800 !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-payment-method-panel
  .ticket-payment-methods
  > p,
.admin-app[data-theme-mode="night"]
  .ticket-payment-method-panel
  .ticket-category-performance
  > p {
  color: #b8c7dc !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-report-empty-row
  td {
  color: #dbe8fa !important;
}

/* 1.0.25 - Laporan Tiket report headings and empty copy should read regular. */
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-revenue-panel
  .panel-heading,
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-payment-method-panel
  .panel-heading {
  margin-left: -8px !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-revenue-panel
  .panel-heading
  h3,
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-payment-method-panel
  .panel-heading
  h3,
.admin-app .ticket-payment-method-panel .ticket-category-inline h4,
.admin-app .ticket-payment-method-panel .ticket-payment-methods > p,
.admin-app .ticket-payment-method-panel .ticket-category-performance > p {
  font-weight: 400 !important;
}

/* 1.0.23 - Night mode close/X buttons should read dark, not bright white. */
.admin-app[data-theme-mode="night"]
  :is(
    button[aria-label="Tutup"],
    button[aria-label="Close"],
    button[aria-label="Tutup menu"],
    button[aria-label="Tutup blasting"],
    button[aria-label="Tutup detail stok tiket"],
    button[aria-label="Tutup bukti bayar"],
    button[aria-label="Tutup editor gambar"],
    button[aria-label="Tutup menu operator"],
    button[aria-label="Tutup daftar peserta"],
    .modal-card header > button,
    .event-crop-close,
    .blast-modal-close-button,
    .scan-popup-close,
    .mobile-close
  ) {
  color: #10233a !important;
  background: rgba(238, 246, 255, 0.94) !important;
  border-color: rgba(145, 171, 202, 0.56) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    button[aria-label="Tutup"],
    button[aria-label="Close"],
    button[aria-label="Tutup menu"],
    button[aria-label="Tutup blasting"],
    button[aria-label="Tutup detail stok tiket"],
    button[aria-label="Tutup bukti bayar"],
    button[aria-label="Tutup editor gambar"],
    button[aria-label="Tutup menu operator"],
    button[aria-label="Tutup daftar peserta"],
    .modal-card header > button,
    .event-crop-close,
    .blast-modal-close-button,
    .scan-popup-close,
    .mobile-close
  )
  svg {
  color: #10233a !important;
  stroke: #10233a !important;
}

/* 1.0.97 - Penjualan Tiket page refinements. */
.ticket-sales-page-title .campaign-title-event {
  margin-top: 8px;
}

.ticket-catalog-toolbar small {
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.45;
}

.ticket-admin-banner {
  position: relative;
}

.ticket-admin-banner .ticket-catalog-status {
  position: absolute;
  top: auto;
  right: 18px;
  bottom: 14px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(3, 14, 28, 0.58);
}

.ticket-admin-banner .ticket-catalog-status i {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.ticket-catalog-dialog .ticket-banner-preview {
  min-height: 320px;
}

.ticket-price-editor > div:first-child span {
  font-size: 14px;
}

.ticket-price-editor > div:not(:first-child) input,
.ticket-price-editor > div:not(:first-child) strong {
  font-size: 16px;
}

.ticket-price-editor > div:not(:first-child) strong {
  line-height: 1.35;
}

.ticket-admin-delete-button {
  color: #c43d3d;
  border-color: rgba(196, 61, 61, 0.28);
}

.ticket-admin-delete-button svg {
  stroke: currentColor;
}

.ticket-admin-delete-button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.admin-app[data-theme-mode="night"] .ticket-admin-delete-button {
  color: #ffd8d8;
  border-color: rgba(255, 216, 216, 0.26);
}

/* 1.0.99 - Ticketing empty state copy and readability. */
.ticket-store-empty > h1 {
  white-space: nowrap;
  width: max-content;
  max-width: calc(100vw - 48px);
}

.ticket-store-empty > p {
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.55;
  max-width: min(92vw, 860px);
}

@media (max-width: 640px) {
  .ticket-store-empty > h1 {
    font-size: clamp(22px, 6vw, 30px);
  }

  .ticket-store-empty > p {
    font-size: 16px;
  }
}

/* 1.0.110 - Participant list pagination and participant report title parity. */
.admin-app
  .participant-directory-view
  .pagination-controls
  input[type="number"]::-webkit-outer-spin-button,
.admin-app
  .participant-directory-view
  .pagination-controls
  input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.admin-app
  .participant-directory-view
  .pagination-controls
  input[type="number"] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

.admin-app .report-hero .report-hero-scope {
  display: inline-grid !important;
  gap: 6px !important;
  align-items: start !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(205, 225, 246, 0.86) !important;
  border-radius: 12px !important;
  max-width: min(100%, 760px) !important;
}

.admin-app .report-hero .report-hero-scope .participant-report-title-event {
  display: block !important;
  margin: 0 !important;
  color: #758295 !important;
  font-size: 0.62em !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.admin-app[data-theme-mode="night"]
  .report-hero
  .report-hero-scope
  .participant-report-title-event {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* 1.0.111 - Make ticket report period filter match dashboard chart filter UI. */
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-chart-period-controls.overview-hour-filter {
  margin-top: 0 !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-chart-period-controls.overview-hour-filter
  select,
.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-chart-period-controls.overview-hour-filter
  input {
  height: 34px !important;
  min-height: 34px !important;
  min-width: 128px !important;
  color: #24364f !important;
  background: #ffffff !important;
  border: 1px solid #d5deea !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-chart-period-controls.overview-hour-filter
  select {
  width: 128px !important;
  cursor: pointer !important;
}

.admin-app
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-chart-date-range.overview-hour-custom-range {
  margin-left: 0 !important;
}

.admin-app[data-theme-mode="night"]
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-chart-period-controls.overview-hour-filter
  select,
.admin-app[data-theme-mode="night"]
  .ticket-report-view:not(.ticket-dashboard-view)
  .ticket-chart-period-controls.overview-hour-filter
  input {
  color: #e8f2ff !important;
  background: #10243d !important;
  border-color: #2d4665 !important;
  color-scheme: dark !important;
}

/* 1.0.112 - Square participant report heading frame to match Campaign heading. */
.admin-app .report-hero:has(.participant-report-title-event) {
  border-radius: 12px !important;
}

.admin-app
  .report-hero:has(.participant-report-title-event)
  .report-hero-scope {
  border-radius: 12px !important;
}

/* 1.0.113 - Operator settings scanner preview and Gate slider control. */
.admin-app .operator-image-upload > .operator-preview-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 320px !important;
  aspect-ratio: 1.36 / 1 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 28px !important;
  background-color: #062417 !important;
  background-position: center center !important;
  background-size: cover !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.admin-app .operator-image-upload > .operator-preview-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(2, 18, 12, 0.16), rgba(2, 18, 12, 0.32)),
    radial-gradient(
      circle at 50% 48%,
      rgba(205, 255, 97, 0.08),
      transparent 38%
    ) !important;
}

.admin-app .operator-preview-stage .operator-preview-media {
  z-index: 0 !important;
}

.admin-app .operator-preview-stage .operator-preview-phone,
.admin-app .operator-preview-stage .operator-preview-scanline,
.admin-app .operator-preview-stage .operator-preview-switch,
.admin-app .operator-preview-stage .operator-preview-edit {
  z-index: 3 !important;
}

.admin-app .operator-preview-stage .operator-preview-phone {
  width: min(42%, 260px) !important;
  height: min(46%, 148px) !important;
  gap: 10px !important;
  color: #f8fbff !important;
}

.admin-app .operator-preview-stage .operator-preview-phone::before {
  background:
    linear-gradient(#d8ff61, #d8ff61) left top / 42px 4px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left top / 4px 42px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right top / 42px 4px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right top / 4px 42px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left bottom / 42px 4px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left bottom / 4px 42px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right bottom / 42px 4px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right bottom / 4px 42px no-repeat !important;
  filter: drop-shadow(0 0 14px rgba(216, 255, 97, 0.28)) !important;
}

.admin-app .operator-preview-stage .operator-preview-phone::after {
  left: 16% !important;
  right: 16% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(205, 255, 97, 0.52),
    transparent
  ) !important;
  box-shadow: 0 0 18px rgba(205, 255, 97, 0.28) !important;
}

.admin-app .operator-preview-stage .operator-preview-camera-mark {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.admin-app .operator-preview-stage .operator-preview-phone strong {
  font-size: clamp(13px, 1.35vw, 17px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

.admin-app .operator-preview-stage .operator-preview-phone b {
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  font-size: clamp(11px, 1.2vw, 15px) !important;
  font-weight: 900 !important;
}

.admin-app .operator-preview-stage .operator-preview-phone b::before {
  display: none !important;
}

.admin-app .operator-preview-button-camera {
  position: relative !important;
  width: 16px !important;
  height: 12px !important;
  border: 2px solid currentColor !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

.admin-app .operator-preview-button-camera::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  border: 1.7px solid currentColor !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
}

.admin-app
  .operator-preview-stage.scanner-position-center
  .operator-preview-phone {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.admin-app
  .operator-preview-stage.scanner-position-center
  .operator-preview-scanline {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.admin-app .operator-preview-switch,
.admin-app .operator-preview-edit {
  position: absolute !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(5, 24, 48, 0.58) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.18) !important;
}

.admin-app .operator-preview-switch {
  top: 16px !important;
  left: 16px !important;
}

.admin-app .operator-preview-edit {
  right: 18px !important;
  bottom: 18px !important;
}

.admin-app .operator-preview-switch::before,
.admin-app .operator-preview-edit::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.admin-app .operator-preview-switch::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h9l2 3v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7l3-3Z'/%3E%3Ccircle cx='11' cy='14' r='3'/%3E%3Cpath d='M16 5l2 2-2 2M18 7h-4M8 19l-2-2 2-2M6 17h4'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h9l2 3v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7l3-3Z'/%3E%3Ccircle cx='11' cy='14' r='3'/%3E%3Cpath d='M16 5l2 2-2 2M18 7h-4M8 19l-2-2 2-2M6 17h4'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.admin-app .operator-preview-edit::before {
  color: #d8ff61 !important;
  background-color: #d8ff61 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4 20h4L19.5 8.5a2.1 2.1 0 0 0 0-3L18.5 4.5a2.1 2.1 0 0 0-3 0L4 16v4Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4 20h4L19.5 8.5a2.1 2.1 0 0 0 0-3L18.5 4.5a2.1 2.1 0 0 0-3 0L4 16v4Z'/%3E%3C/svg%3E") !important;
}

.admin-app .gate-event-heading .gate-enable-switch {
  position: relative !important;
  width: 58px !important;
  height: 32px !important;
  min-width: 58px !important;
  padding: 0 !important;
  border: 1px solid rgba(123, 145, 172, 0.34) !important;
  border-radius: 999px !important;
  background: #dce5ef !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 3px rgba(10, 31, 55, 0.14) !important;
}

.admin-app .gate-event-heading .gate-enable-switch span {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 9px rgba(10, 31, 55, 0.2) !important;
  transition: transform 0.18s ease !important;
}

.admin-app .gate-event-heading .gate-enable-switch.is-active {
  border-color: #087cff !important;
  background: #087cff !important;
}

.admin-app .gate-event-heading .gate-enable-switch.is-active span {
  transform: translateX(26px) !important;
}

.admin-app .gate-event-heading .gate-enable-switch:disabled {
  opacity: 0.68 !important;
  cursor: progress !important;
}

.admin-app .gate-event-heading .gate-public-link {
  min-width: 74px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
}

.admin-app[data-theme-mode="night"] .gate-event-heading .gate-enable-switch {
  border-color: rgba(110, 174, 255, 0.35) !important;
  background: rgba(138, 163, 191, 0.35) !important;
}

.admin-app[data-theme-mode="night"]
  .gate-event-heading
  .gate-enable-switch.is-active {
  border-color: #087cff !important;
  background: #087cff !important;
}

/* 1.0.114 - Final global dashboard typography controls. */
.admin-app,
.admin-app[data-text-size="standard"] {
  --tixpro-page-heading-size: clamp(24px, 1.65vw, 30px) !important;
  --tixpro-page-subtitle-size: 13px !important;
  --tixpro-section-heading-size: 22px !important;
  --tixpro-card-heading-size: 16px !important;
  --tixpro-body-size: 13px !important;
  --tixpro-caption-size: 11px !important;
}

.admin-app[data-text-size="small"],
.admin-app[data-text-size="large"] {
  --tixpro-page-heading-size: clamp(24px, 1.65vw, 30px) !important;
  --tixpro-page-subtitle-size: 13px !important;
  --tixpro-section-heading-size: 22px !important;
  --tixpro-card-heading-size: 16px !important;
  --tixpro-body-size: 13px !important;
  --tixpro-caption-size: 11px !important;
}

.admin-app[data-bold-text="on"],
.admin-app[data-bold-text="on"] *,
.admin-app[data-bold-text="on"]
  :is(
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    small,
    label,
    td,
    th,
    button,
    input,
    select,
    textarea,
    option,
    strong,
    b,
    a,
    li,
    summary,
    legend,
    figcaption
  ) {
  font-weight: 850 !important;
}

/* 1.0.115 - Night mode QA guard: keep admin UI surfaces dark by default. */
.admin-app[data-theme-mode="night"] {
  --paper: #071525 !important;
  --card: #0b2138 !important;
  --line: #24415f !important;
  --ink: #edf6ff !important;
  --ink-soft: #9fb4ce !important;
  --muted: #8fa4bf !important;
  color-scheme: dark !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(8, 124, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #07111f 0%, #08182a 100%) !important;
  color: #edf6ff !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .admin-content,
    .content-shell,
    .dashboard-shell,
    .panel,
    .metric-card,
    .overview-card,
    .event-card,
    .event-detail-card,
    .toolbar-card,
    .settings-form-card,
    .ticket-admin-card,
    .ticket-catalog-toolbar,
    .ticket-report-toolbar,
    .ticket-report-summary article,
    .ticket-report-table,
    .ticket-revenue-panel,
    .ticket-payment-method-panel,
    .ticket-event-performance-panel,
    .reservation-summary-grid article,
    .reservation-stock-dialog,
    .reservation-stock-total,
    .reservation-stock-list article,
    .reservation-proof-dialog,
    .reservation-proof-preview,
    .campaign-table-panel,
    .participant-panel,
    .participant-directory-view .participant-panel,
    .report-hero,
    .report-hero-scope,
    .modal-card,
    .dialog-card,
    .notification-popover,
    .theme-options,
    .language-options,
    .event-scope-menu,
    .column-visibility-menu,
    .operator-access-dialog,
    .operator-auth-dialog,
    .logout-confirm-dialog,
    .event-filter-menu,
    .table-scroll
  ) {
  background-color: #0b2138 !important;
  color: #edf6ff !important;
  border-color: #24415f !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34) !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    input,
    select,
    textarea,
    .event-filter-trigger,
    .operator-picker-button,
    .participant-toolbar-filter select,
    .column-visibility-button,
    .ticket-chart-period-controls select,
    .ticket-chart-period-controls input,
    .overview-hour-filter select,
    .overview-hour-filter input,
    .campaign-pagination input,
    .campaign-pagination button,
    .secondary-button,
    .icon-button
  ) {
  background-color: #0a1b30 !important;
  color: #edf6ff !important;
  border-color: #2d4665 !important;
}

.admin-app[data-theme-mode="night"]
  :is(input::placeholder, textarea::placeholder) {
  color: #7890ad !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    option,
    .event-filter-menu button,
    .theme-options button,
    .language-options button,
    .event-scope-menu button,
    .operator-picker-menu button,
    .column-visibility-menu label
  ) {
  background-color: #0b2138 !important;
  color: #edf6ff !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .data-table,
    .campaign-table,
    .participant-directory-table,
    .ticket-report-table table,
    table
  )
  :is(thead, tbody, tr, th, td) {
  background-color: transparent !important;
  color: #edf6ff !important;
  border-color: #24415f !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    p,
    small,
    label,
    .muted,
    .panel-heading p,
    .page-heading-row p,
    .report-hero-scope small,
    .ticket-report-summary article small,
    .metric-card span,
    .metric-card small,
    .event-card small,
    .event-card p
  ) {
  color: #9fb4ce !important;
}

.admin-app[data-theme-mode="night"]
  :is(h1, h2, h3, h4, strong, th, .panel-heading h3, .page-heading-row h1) {
  color: #f5f9ff !important;
}

.admin-app[data-theme-mode="night"]
  :is(
    .primary-button,
    button[type="submit"],
    .sidebar-nav button.is-active,
    .event-filter-menu button.is-active,
    .event-filter-menu button[aria-selected="true"]
  ) {
  background-color: #087cff !important;
  border-color: #087cff !important;
  color: #ffffff !important;
}

/* 1.0.108-opfix29 — reservation date alignment and campaign failure detail UX. */
.admin-app .reservation-order-table tbody td.reservation-select-column {
  vertical-align: middle !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.admin-app
  .reservation-order-table
  tbody
  td.reservation-select-column
  input[type="checkbox"] {
  display: block !important;
  margin: 0 auto !important;
}

/* 1.0.108-opfix32 — optical alignment: checkbox center follows the DATE text line. */
.admin-app .reservation-order-table tbody td.reservation-select-column,
.admin-app .reservation-order-table tbody td:nth-child(2) {
  vertical-align: top !important;
  padding-top: 28px !important;
}

.admin-app .reservation-order-table tbody td.reservation-select-column {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.admin-app
  .reservation-order-table
  tbody
  td.reservation-select-column
  input[type="checkbox"] {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 1px auto 0 !important;
}

/* 1.0.137-final — final winning rules for Operator Settings scanner position + logo crop modal. */
.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-center
  .operator-preview-phone {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-top
  .operator-preview-phone {
  top: 24px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-bottom
  .operator-preview-phone {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-left
  .operator-preview-phone {
  top: 50% !important;
  left: 28px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-right
  .operator-preview-phone {
  top: 50% !important;
  left: auto !important;
  right: 28px !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-center
  .operator-preview-scanline {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-top
  .operator-preview-scanline {
  top: 62px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-bottom
  .operator-preview-scanline {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 62px !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-left
  .operator-preview-scanline {
  top: 50% !important;
  left: 56px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-right
  .operator-preview-scanline {
  top: 50% !important;
  left: auto !important;
  right: 56px !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app .organization-logo-crop-dialog {
  width: min(680px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 32px) !important;
  gap: 16px !important;
  overflow: hidden !important;
  padding: 64px 22px 22px !important;
}

.admin-app .organization-logo-crop-stage {
  width: min(100%, 520px) !important;
  height: min(520px, calc(100vw - 76px), calc(100svh - 224px)) !important;
  min-height: 280px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-container,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-wrap-box,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-canvas {
  width: 100% !important;
  height: 100% !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box {
  border-radius: 999px !important;
  outline: 2px solid rgba(22, 141, 255, 0.96) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.58) inset !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  border-radius: 999px !important;
  background-color: rgba(22, 141, 255, 0.1) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.48) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  background-color: #168dff !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  width: 8px !important;
  height: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px !important;
}

/* 1.0.138-logo-crop-final-eof — keep as last logo crop override. */
.admin-app .organization-logo-crop-backdrop {
  background: rgba(3, 20, 52, 0.58) !important;
}

.admin-app .organization-logo-crop-dialog {
  width: min(520px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 28px) !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding: 52px 18px 18px !important;
  background: linear-gradient(180deg, #0f3a72 0%, #082650 100%) !important;
  border: 1px solid rgba(125, 184, 255, 0.36) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(4, 20, 48, 0.46) !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading h2 {
  font-size: 21px !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading p {
  color: rgba(235, 244, 255, 0.78) !important;
  font-size: 12px !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading > button {
  top: 14px !important;
  left: 14px !important;
  color: #eaf3ff !important;
}

.admin-app .organization-logo-crop-stage {
  width: min(100%, 390px) !important;
  height: min(390px, calc(100vw - 72px), calc(100svh - 210px)) !important;
  min-height: 240px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  background-color: #0b2b58 !important;
  border-radius: 14px !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-container,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-wrap-box {
  width: 100% !important;
  height: 100% !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-canvas {
  max-width: none !important;
  max-height: none !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  border-radius: 0 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box {
  outline: 2px solid #5ab1ff !important;
  box-shadow: none !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  background-color: rgba(90, 177, 255, 0.08) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-modal {
  background: rgba(5, 26, 62, 0.42) !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.42) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  background-color: #5ab1ff !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  width: 7px !important;
  height: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 2px !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions {
  gap: 10px !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(158, 202, 255, 0.22) !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions button {
  min-width: 110px !important;
  min-height: 40px !important;
  color: #eaf3ff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(180, 215, 255, 0.24) !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions button:last-child {
  color: #062654 !important;
  background: #9ac7ff !important;
  border-color: #9ac7ff !important;
}

/* 1.0.139-logo-crop-single-image — show only the original logo image, no cloned crop preview layer. */
.admin-app
  .organization-logo-crop-stage.uses-cropper-js
  .cropper-view-box
  > img {
  opacity: 0 !important;
  visibility: hidden !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-modal {
  background: rgba(5, 26, 62, 0.16) !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  background-color: rgba(90, 177, 255, 0.05) !important;
}

/* 1.0.138-logo-crop-final — compact blue rectangular logo cropper. */
.admin-app .organization-logo-crop-backdrop {
  background: rgba(3, 20, 52, 0.58) !important;
}

.admin-app .organization-logo-crop-dialog {
  width: min(520px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 28px) !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding: 52px 18px 18px !important;
  background: linear-gradient(180deg, #0f3a72 0%, #082650 100%) !important;
  border: 1px solid rgba(125, 184, 255, 0.36) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(4, 20, 48, 0.46) !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading h2 {
  font-size: 21px !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading p {
  color: rgba(235, 244, 255, 0.78) !important;
  font-size: 12px !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading > button {
  top: 14px !important;
  left: 14px !important;
  color: #eaf3ff !important;
}

.admin-app .organization-logo-crop-stage {
  width: min(100%, 390px) !important;
  height: min(390px, calc(100vw - 72px), calc(100svh - 210px)) !important;
  min-height: 240px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  background-color: #0b2b58 !important;
  border-radius: 14px !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-container,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-wrap-box {
  width: 100% !important;
  height: 100% !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-canvas {
  max-width: none !important;
  max-height: none !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  border-radius: 0 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box {
  outline: 2px solid #5ab1ff !important;
  box-shadow: none !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  background-color: rgba(90, 177, 255, 0.08) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-modal {
  background: rgba(5, 26, 62, 0.42) !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.42) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  background-color: #5ab1ff !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  width: 7px !important;
  height: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 2px !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions {
  gap: 10px !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(158, 202, 255, 0.22) !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions button {
  min-width: 110px !important;
  min-height: 40px !important;
  color: #eaf3ff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(180, 215, 255, 0.24) !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions button:last-child {
  color: #062654 !important;
  background: #9ac7ff !important;
  border-color: #9ac7ff !important;
}

/* 1.0.137 — Pengaturan Operator scanner positions and proportional logo crop modal. */
.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-center
  .operator-preview-phone {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-top
  .operator-preview-phone {
  top: 24px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-bottom
  .operator-preview-phone {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-left
  .operator-preview-phone {
  top: 50% !important;
  left: 28px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-right
  .operator-preview-phone {
  top: 50% !important;
  left: auto !important;
  right: 28px !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-center
  .operator-preview-scanline {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-top
  .operator-preview-scanline {
  top: 62px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-bottom
  .operator-preview-scanline {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 62px !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-left
  .operator-preview-scanline {
  top: 50% !important;
  left: 56px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-right
  .operator-preview-scanline {
  top: 50% !important;
  left: auto !important;
  right: 56px !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app .organization-logo-crop-dialog {
  width: min(680px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 32px) !important;
  gap: 16px !important;
  overflow: hidden !important;
  padding: 64px 22px 22px !important;
}

.admin-app .organization-logo-crop-stage {
  width: min(100%, 520px) !important;
  height: min(520px, calc(100vw - 76px), calc(100svh - 224px)) !important;
  min-height: 280px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-container,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-wrap-box,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-canvas {
  width: 100% !important;
  height: 100% !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box {
  border-radius: 999px !important;
  outline: 2px solid rgba(22, 141, 255, 0.96) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.58) inset !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  border-radius: 999px !important;
  background-color: rgba(22, 141, 255, 0.1) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.48) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  background-color: #168dff !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  width: 8px !important;
  height: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px !important;
}

/* 1.0.135-opnight — keep Operator Settings image/video preview visible in night mode. */
.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage {
  background-color: #062417 !important;
  background-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate !important;
}

.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage[style*="background-image"] {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage.has-video {
  background-image: none !important;
}

.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-media {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage::after {
  z-index: 1 !important;
  opacity: 1 !important;
  background:
    linear-gradient(180deg, rgba(2, 18, 12, 0.06), rgba(2, 18, 12, 0.18)),
    radial-gradient(
      circle at 50% 48%,
      rgba(205, 255, 97, 0.05),
      transparent 38%
    ) !important;
}

/* 1.0.135 - Logo cropper parity and ticket action night colors. */
.admin-app .organization-logo-crop-stage.uses-cropper-js {
  touch-action: none !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js > img {
  display: none !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-container,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-wrap-box,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-canvas {
  display: block !important;
  max-height: 100% !important;
  max-width: 100% !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-container {
  z-index: 5 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-modal {
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box {
  border-radius: 999px !important;
  outline: 2px solid #168dff !important;
  outline-color: #168dff !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  border-radius: 999px !important;
  background-color: rgba(22, 141, 255, 0.16) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.74) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  display: block !important;
  background-color: #168dff !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  width: 10px !important;
  height: 10px !important;
  border-radius: 2px !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line.line-e,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line.line-w {
  width: 4px !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line.line-n,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line.line-s {
  height: 4px !important;
}

.admin-app .ticket-catalog-toolbar-actions :is(a, button) {
  white-space: nowrap !important;
}

.admin-app .ticket-buy-link-button {
  text-decoration: none !important;
}

.admin-app[data-theme-mode="night"] .ticket-buy-link-button,
.admin-app[data-theme-mode="night"] .ticket-admin-actions button {
  color: #dbe8fa !important;
  background: #0b2138 !important;
  border: 1px solid #2d4665 !important;
  box-shadow: none !important;
}

.admin-app[data-theme-mode="night"] .ticket-buy-link-button svg,
.admin-app[data-theme-mode="night"] .ticket-admin-actions button svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

.admin-app[data-theme-mode="night"] .ticket-admin-delete-button {
  color: #ffb6b6 !important;
  background: rgba(120, 34, 48, 0.34) !important;
  border-color: rgba(255, 150, 150, 0.34) !important;
}

.admin-app[data-theme-mode="night"] .ticket-admin-delete-button:disabled {
  opacity: 0.58 !important;
}

/* 1.0.124 — Ticketing page targeted readability bump. */
.ticket-store-shell .ticket-public-banner small {
  font-size: clamp(13px, 1.25vw, 15px) !important;
  line-height: 1.45 !important;
}

.ticket-store-shell .ticket-quantity-row > div:first-child small {
  font-size: clamp(12px, 1.1vw, 14px) !important;
  line-height: 1.4 !important;
}

.ticket-store-shell .checkout-section-heading p {
  font-size: clamp(13px, 1.15vw, 15px) !important;
  line-height: 1.55 !important;
}

.ticket-store-shell .payment-method-grid button div strong {
  font-size: clamp(14px, 1.25vw, 16px) !important;
  line-height: 1.25 !important;
}

.ticket-store-shell .payment-method-grid button div small {
  font-size: clamp(12px, 1.05vw, 14px) !important;
  line-height: 1.45 !important;
}

/* 1.0.122 — final operator settings preview centering + logo cropper visual parity. */
.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-phone {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(128px, 21%, 132px) !important;
  height: clamp(72px, 23%, 76px) !important;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: center center !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-scanline {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(64px, 12%, 76px) !important;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: center center !important;
}

.admin-app .organization-logo-crop-backdrop {
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(7, 10, 14, 0.62) !important;
}

.admin-app .organization-logo-crop-dialog {
  width: min(980px, calc(100vw - 28px)) !important;
  max-height: calc(100svh - 28px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  overflow: auto !important;
  padding: 74px 28px 28px !important;
  color: #f5f7fb !important;
  background: #111214 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 100vmax rgba(7, 10, 14, 0.62),
    0 32px 92px rgba(0, 0, 0, 0.46) !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading {
  position: static !important;
  justify-content: center !important;
  text-align: center !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading span {
  display: none !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading h2 {
  margin: 0 !important;
  color: #f2f5f8 !important;
  font-size: 25px !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading p {
  margin: 8px 0 0 !important;
  color: rgba(245, 247, 250, 0.74) !important;
  font-size: 13px !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading > button {
  position: absolute !important;
  top: 22px !important;
  left: 22px !important;
  right: auto !important;
  width: 42px !important;
  height: 42px !important;
  color: #e7ebef !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading > button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.admin-app .organization-logo-crop-stage {
  width: 100% !important;
  min-height: min(56vh, 560px) !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  cursor: grab !important;
  touch-action: none !important;
  background-color: #777 !important;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.16) 75%) !important;
  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0 !important;
  background-size: 24px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.admin-app .organization-logo-crop-stage:active {
  cursor: grabbing !important;
}

.admin-app .organization-logo-crop-stage img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  user-select: none !important;
  pointer-events: none !important;
}

.admin-app .organization-logo-crop-frame {
  border: 2px solid rgba(245, 247, 250, 0.92) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.48) !important;
  cursor: grab !important;
}

.admin-app .organization-logo-crop-frame:active {
  cursor: grabbing !important;
}

.admin-app .organization-logo-crop-handle {
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.admin-app .organization-logo-crop-handle.nw {
  top: -7px !important;
  left: -7px !important;
  border-top: 7px solid #fff !important;
  border-left: 7px solid #fff !important;
}

.admin-app .organization-logo-crop-handle.ne {
  top: -7px !important;
  right: -7px !important;
  border-top: 7px solid #fff !important;
  border-right: 7px solid #fff !important;
}

.admin-app .organization-logo-crop-handle.sw {
  bottom: -7px !important;
  left: -7px !important;
  border-bottom: 7px solid #fff !important;
  border-left: 7px solid #fff !important;
}

.admin-app .organization-logo-crop-handle.se {
  right: -7px !important;
  bottom: -7px !important;
  border-right: 7px solid #fff !important;
  border-bottom: 7px solid #fff !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions button {
  min-width: 132px !important;
  min-height: 44px !important;
  color: #dfe7f4 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions button:last-child {
  color: #0b2b60 !important;
  background: #a9c9ff !important;
  border-color: #a9c9ff !important;
}

/* 1.0.123 — Data Peserta actions need clearer button spacing. */
.admin-app .participant-data-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 18px !important;
}

/* 1.0.119 — compact and stable operator settings scanner preview only. */
.admin-app .operator-image-upload > .operator-preview-stage {
  min-height: 260px !important;
  aspect-ratio: 1.62 / 1 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-phone {
  width: clamp(128px, 21%, 132px) !important;
  height: clamp(72px, 23%, 76px) !important;
  gap: 4px !important;
  transform-origin: center center !important;
  z-index: 4 !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-center
  .operator-preview-phone {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-top
  .operator-preview-phone {
  top: 24px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-bottom
  .operator-preview-phone {
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-left
  .operator-preview-phone {
  top: 50% !important;
  left: 28px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-right
  .operator-preview-phone {
  top: 50% !important;
  right: 28px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-phone::before {
  background:
    linear-gradient(#d8ff61, #d8ff61) left top / 22px 3px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left top / 3px 22px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right top / 22px 3px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right top / 3px 22px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left bottom / 22px 3px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) left bottom / 3px 22px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right bottom / 22px 3px no-repeat,
    linear-gradient(#d8ff61, #d8ff61) right bottom / 3px 22px no-repeat !important;
  border-radius: 10px !important;
  filter: drop-shadow(0 0 8px rgba(216, 255, 97, 0.24)) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-phone::after {
  left: 18% !important;
  right: 18% !important;
  height: 1px !important;
  box-shadow: 0 0 8px rgba(205, 255, 97, 0.24) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-camera-mark {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-camera-mark::before {
  width: 13px !important;
  height: 10px !important;
  border-width: 2px !important;
  border-radius: 4px !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-camera-mark::after {
  width: 4px !important;
  height: 4px !important;
  border-width: 2px !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-phone
  strong {
  max-width: 112px !important;
  font-size: 9px !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-phone
  b {
  min-height: 18px !important;
  max-width: 112px !important;
  gap: 4px !important;
  padding: 0 7px !important;
  border-radius: 6px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-button-camera {
  width: 10px !important;
  height: 8px !important;
  border-width: 1.6px !important;
  border-radius: 3px !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-button-camera::before {
  width: 3px !important;
  height: 3px !important;
  border-width: 1.2px !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-scanline {
  width: clamp(64px, 12%, 76px) !important;
  height: 1px !important;
  z-index: 3 !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-center
  .operator-preview-scanline {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-switch,
.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-edit {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  z-index: 5 !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-switch {
  top: 16px !important;
  left: 16px !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-edit {
  right: 20px !important;
  bottom: 20px !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-switch::before,
.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-edit::before {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* 1.0.120 — remove settings preview corner icons and force uniform scanner preview across events. */
.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-switch,
.admin-app
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-edit {
  display: none !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage:is(
    .scanner-position-center,
    .scanner-position-top,
    .scanner-position-bottom,
    .scanner-position-left,
    .scanner-position-right
  )
  .operator-preview-phone {
  width: clamp(128px, 21%, 132px) !important;
  height: clamp(72px, 23%, 76px) !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage:is(
    .scanner-position-center,
    .scanner-position-top,
    .scanner-position-bottom,
    .scanner-position-left,
    .scanner-position-right
  )
  .operator-preview-scanline {
  width: clamp(64px, 12%, 76px) !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.admin-app .campaign-failure-preview {
  display: inline-flex !important;
  align-items: baseline !important;
  max-width: 100% !important;
  color: inherit !important;
  line-height: 1.35 !important;
}

.admin-app .campaign-failure-preview > span {
  min-width: 0 !important;
}

.admin-app .campaign-failure-detail-button {
  appearance: none !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  color: #0b6ff2 !important;
  font: inherit !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 0 0 0 2px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.admin-app .campaign-failure-detail-dialog {
  width: min(560px, calc(100vw - 32px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.admin-app .campaign-failure-detail-dialog header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 22px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.admin-app .campaign-failure-detail-dialog h3 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.admin-app .campaign-failure-detail-dialog header > button {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  cursor: pointer !important;
  color: #26364c !important;
  background: #f7fafc !important;
  border: 1px solid #d7e1ec !important;
  border-radius: 12px !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

.admin-app .campaign-failure-detail-dialog p {
  margin: 0 !important;
  padding: 22px 24px 26px !important;
  color: #26364c !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.admin-app[data-theme-mode="night"] .campaign-failure-detail-button {
  color: #7db7ff !important;
}

.admin-app[data-theme-mode="night"] .campaign-failure-detail-dialog header {
  border-color: #24415f !important;
}

.admin-app[data-theme-mode="night"]
  .campaign-failure-detail-dialog
  header
  > button {
  color: #edf6ff !important;
  background: #0a1b30 !important;
  border-color: #2d4665 !important;
}

.admin-app[data-theme-mode="night"] .campaign-failure-detail-dialog p {
  color: #d8e7f7 !important;
}

/* 1.0.108-opfix30 — internal admin approval fields must not trigger browser password warnings. */
.admin-app .admin-secret-input,
.operator-live-shell .admin-secret-input {
  -webkit-text-security: disc !important;
  text-security: disc !important;
}

/* 1.0.127 — suppress Chrome Password Checkup popup without deleting saved passwords. */
.auth-form input.is-password-check-suppressed,
.operator-auth-dialog input.is-password-check-suppressed,
.admin-app input.is-password-check-suppressed {
  -webkit-text-security: disc !important;
  text-security: disc !important;
}

/* 1.0.108-opfix31 — place reservation row checkbox directly beside the date text. */
.admin-app .reservation-order-table tbody td.reservation-select-column {
  vertical-align: top !important;
  padding-top: 30px !important;
  padding-bottom: 14px !important;
}

.admin-app
  .reservation-order-table
  tbody
  td.reservation-select-column
  input[type="checkbox"] {
  display: block !important;
  margin: 0 auto !important;
}

/* 1.0.108-opfix32-final — final winning rule for checkbox/date visual alignment. */
.admin-app .reservation-order-table tbody td.reservation-select-column,
.admin-app .reservation-order-table tbody td:nth-child(2) {
  vertical-align: top !important;
  padding-top: 28px !important;
}

.admin-app
  .reservation-order-table
  tbody
  td.reservation-select-column
  input[type="checkbox"] {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 1px auto 0 !important;
}

/* 1.0.137-final-tail — final winning rules for Operator Settings scanner position + logo crop modal. */
.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-center
  .operator-preview-phone {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-top
  .operator-preview-phone {
  top: 24px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-bottom
  .operator-preview-phone {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-left
  .operator-preview-phone {
  top: 50% !important;
  left: 28px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-right
  .operator-preview-phone {
  top: 50% !important;
  left: auto !important;
  right: 28px !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-center
  .operator-preview-scanline {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-top
  .operator-preview-scanline {
  top: 62px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-bottom
  .operator-preview-scanline {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 62px !important;
  transform: translate3d(-50%, 0, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-left
  .operator-preview-scanline {
  top: 50% !important;
  left: 56px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.scanner-position-right
  .operator-preview-scanline {
  top: 50% !important;
  left: auto !important;
  right: 56px !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}

.admin-app .organization-logo-crop-dialog {
  width: min(680px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 32px) !important;
  gap: 16px !important;
  overflow: hidden !important;
  padding: 64px 22px 22px !important;
}

.admin-app .organization-logo-crop-stage {
  width: min(100%, 520px) !important;
  height: min(520px, calc(100vw - 76px), calc(100svh - 224px)) !important;
  min-height: 280px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-container,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-wrap-box,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-canvas {
  width: 100% !important;
  height: 100% !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box {
  border-radius: 999px !important;
  outline: 2px solid rgba(22, 141, 255, 0.96) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.58) inset !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  border-radius: 999px !important;
  background-color: rgba(22, 141, 255, 0.1) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.48) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  background-color: #168dff !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  width: 8px !important;
  height: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px !important;
}

/* 1.0.138-logo-crop-final-tail — compact blue rectangular logo cropper. */
.admin-app .organization-logo-crop-backdrop {
  background: rgba(3, 20, 52, 0.58) !important;
}

.admin-app .organization-logo-crop-dialog {
  width: min(520px, calc(100vw - 32px)) !important;
  max-height: calc(100svh - 28px) !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding: 52px 18px 18px !important;
  background: linear-gradient(180deg, #0f3a72 0%, #082650 100%) !important;
  border: 1px solid rgba(125, 184, 255, 0.36) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(4, 20, 48, 0.46) !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading h2 {
  font-size: 21px !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading p {
  color: rgba(235, 244, 255, 0.78) !important;
  font-size: 12px !important;
}

.admin-app .organization-logo-crop-dialog .modal-heading > button {
  top: 14px !important;
  left: 14px !important;
  color: #eaf3ff !important;
}

.admin-app .organization-logo-crop-stage {
  width: min(100%, 390px) !important;
  height: min(390px, calc(100vw - 72px), calc(100svh - 210px)) !important;
  min-height: 240px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  background-color: #0b2b58 !important;
  border-radius: 14px !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-container,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-wrap-box {
  width: 100% !important;
  height: 100% !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-canvas {
  max-width: none !important;
  max-height: none !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  border-radius: 0 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-view-box {
  outline: 2px solid #5ab1ff !important;
  box-shadow: none !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  background-color: rgba(90, 177, 255, 0.08) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-modal {
  background: rgba(5, 26, 62, 0.42) !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.42) !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-line,
.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  background-color: #5ab1ff !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-point {
  width: 7px !important;
  height: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 2px !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions {
  gap: 10px !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(158, 202, 255, 0.22) !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions button {
  min-width: 110px !important;
  min-height: 40px !important;
  color: #eaf3ff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(180, 215, 255, 0.24) !important;
}

.admin-app .organization-logo-crop-dialog .modal-actions button:last-child {
  color: #062654 !important;
  background: #9ac7ff !important;
  border-color: #9ac7ff !important;
}

/* 1.0.139-logo-crop-single-image-eof — final override: one original image only, no cloned crop preview layer. */
.admin-app
  .organization-logo-crop-stage.uses-cropper-js
  .cropper-view-box
  > img {
  opacity: 0 !important;
  visibility: hidden !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-modal {
  background: rgba(5, 26, 62, 0.16) !important;
  opacity: 1 !important;
}

.admin-app .organization-logo-crop-stage.uses-cropper-js .cropper-face {
  background-color: rgba(90, 177, 255, 0.05) !important;
}

/* 1.0.140-operator-night-media-final — keep Operator Settings banner image/video visible in night mode. */
.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage[style*="background-image"],
.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage.has-video {
  background-color: #061d37 !important;
  background-blend-mode: normal !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: none !important;
  opacity: 1 !important;
}

.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage[style*="background-image"]::after,
.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage.has-video::after {
  background: transparent !important;
  opacity: 0 !important;
}

.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage
  .operator-preview-media {
  display: block !important;
  filter: none !important;
  height: 100% !important;
  inset: 0 !important;
  mix-blend-mode: normal !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  position: absolute !important;
  visibility: visible !important;
  width: 100% !important;
  z-index: 0 !important;
}

.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage
  :is(.operator-preview-phone, .operator-preview-scanline) {
  z-index: 4 !important;
}

/* 1.0.141-organization-logo-preview-fit — keep cropped logo result fully visible in the round preview frame. */
.admin-app .organization-logo-preview {
  overflow: hidden !important;
  padding: 10px !important;
}

.admin-app .organization-logo-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* 1.0.142-logo-preview-and-operator-media-final — remove logo mask clipping and render operator media as real visible media. */
.admin-app .organization-logo-preview {
  overflow: visible !important;
  padding: 8px !important;
  border-radius: 18px !important;
}

.admin-app .organization-logo-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.admin-app .profile-avatar:has(img) {
  overflow: visible !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

.admin-app .profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 4px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.has-image,
.admin-app
  .operator-image-upload
  > .operator-preview-stage.has-video {
  background-image: none !important;
  background-color: #061d37 !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.has-image
  .operator-preview-media,
.admin-app
  .operator-image-upload
  > .operator-preview-stage.has-video
  .operator-preview-media {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 0 !important;
}

.admin-app
  .operator-image-upload
  > .operator-preview-stage.has-image::after,
.admin-app
  .operator-image-upload
  > .operator-preview-stage.has-video::after,
.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage.has-image::after,
.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage.has-video::after {
  background: transparent !important;
  opacity: 0 !important;
}

.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage.has-image,
.admin-app[data-theme-mode="night"]
  .operator-image-upload
  > .operator-preview-stage.has-video {
  background-image: none !important;
  background-color: #061d37 !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 1.0.144-organization-logo-round-safe-preview — round frame, full safe square logo visible. */
.admin-app .organization-logo-preview {
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

.admin-app .organization-logo-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.admin-app .profile-avatar:has(img) {
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}

.admin-app .profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* 1.0.146-organization-logo-contained-round-final — show the saved logo canvas fully inside the round frame. */
.admin-app .organization-logo-preview {
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  transform: none !important;
}

.admin-app .organization-logo-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  background: transparent !important;
}

.admin-app .profile-avatar:has(img) {
  overflow: hidden !important;
  border-radius: 999px !important;
  clip-path: none !important;
  transform: none !important;
}

.admin-app .profile-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  background: transparent !important;
}