/* TWTwainJS demo2 - minimal step-by-step example.
   Bootstrap 4 does the layout; this file only adds the Terminalworks look, so the same
   markup works both standalone (demo2/index.html) and inside the Terminalworks site. */

.twainJs__body {
  background-color: rgb(247, 247, 247);
}

/* Main buttons, same as the full demo */
.twainJs__main-color__button {
  background: linear-gradient(180deg, rgba(92, 148, 212, 1) 0%, rgba(63, 116, 176, 1) 100%);
  border: none;
  min-width: 150px;
}

.twainJs__main-color__button:hover:enabled {
  background: linear-gradient(180deg, #3c69b0 0%, #1e4075 100%);
  cursor: pointer;
  border: none;
}

.twainJs__main-color__button:active,
.twainJs__main-color__button:focus,
.twainJs__main-color__button:visited,
.twainJs__main-color__button:focus-visible {
  background: linear-gradient(180deg, #3c69b0 0%, #1e4075 100%) !important;
  border: none;
  box-shadow: none !important;
}

/* Step cards */
.twainJs__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #e8f1fa;
  color: #1f73b7;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Scan / download progress message below a step button */
.twainJs__status-msg {
  background-color: #e8f1fa;
  color: #1f73b7;
  border-radius: 6px;
  font-weight: bold;
}

.form-check-input {
  accent-color: #1f73b7;
}

/* Toasts */
.toast.alert-danger,
.alert-danger .toast-header,
.alert-danger .toast-body {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.toast.alert-info,
.alert-info .toast-header,
.alert-info .toast-body {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.toast.alert-warning,
.alert-warning .toast-header,
.alert-warning .toast-body {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.toast-body {
  overflow: overlay;
}

/* Fixed, so the message stays visible however far the page is scrolled */
.twainJs_toastContainer {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 9999;
}

/* Dark theme of the Terminalworks site (no effect standalone) */
[data-theme="dark"] .twainJs__body {
  background-color: #0f1219;
  color: #e2e8f0;
}

/* Panels (.bg-white shadow-lg rounded): the global dark rule flattens .bg-white down to the
   body colour, so the panels lose their edge and the demo reads as one dark slab.
   Raise them to card level and give them a visible border. */
[data-theme="dark"] .bg-white {
  background-color: var(--tw-bg-card, #1a2332) !important;
  border: 1px solid var(--tw-border-light, #2a3444);
}

[data-theme="dark"] .twainJs__step-icon,
[data-theme="dark"] .twainJs__status-msg {
  background-color: #162444;
  color: #93c5fd;
}

[data-theme="dark"] .toast.alert-danger,
[data-theme="dark"] .alert-danger .toast-header,
[data-theme="dark"] .alert-danger .toast-body {
  color: #fca5a5;
  background-color: #4c1d1d;
  border-color: #b91c1c;
}

[data-theme="dark"] .toast.alert-info,
[data-theme="dark"] .alert-info .toast-header,
[data-theme="dark"] .alert-info .toast-body {
  color: #93c5fd;
  background-color: #0f2440;
  border-color: #1d4ed8;
}

[data-theme="dark"] .toast.alert-warning,
[data-theme="dark"] .alert-warning .toast-header,
[data-theme="dark"] .alert-warning .toast-body {
  color: #fde68a;
  background-color: #422006;
  border-color: #b45309;
}