:root {
  /* Knix theme (default) */
  --wt-bg: #000000;
  --wt-surface: rgba(255, 255, 255, 0.04);
  --wt-border: rgba(255, 255, 255, 0.35);
  --wt-border-subtle: rgba(255, 255, 255, 0.15);
  --wt-text: #ffffff;
  --wt-text-muted: rgba(255, 255, 255, 0.5);
  --wt-btn-bg: #000000;
  --wt-btn-border: #ffffff;
  --wt-btn-text: #ffffff;
  --wt-btn-hover-bg: #000000;
  --wt-input-bg: #000000;
  --wt-input-border: #ffffff;
  --wt-input-text: #ffffff;
  --wt-timer-color: #ffffff;
  --wt-timer-finished: #ffb3b3;
  --wt-copied-bg: #ffffff;
  --wt-copied-text: #000000;
  --wt-focus-inner: black;
  --wt-focus-outer: white;
  --wt-select-bg: #000000;
  --wt-select-text: #ffffff;
  --wt-select-border: rgba(255, 255, 255, 0.35);
  --wt-nav-link: #ffffff;
}

[data-theme="haswell"] {
  --wt-bg: #313338;
  --wt-surface: rgba(0, 0, 0, 0.18);
  --wt-border: rgba(255, 255, 255, 0.1);
  --wt-border-subtle: rgba(255, 255, 255, 0.06);
  --wt-text: #dbdee1;
  --wt-text-muted: #949ba4;
  --wt-btn-bg: #4752c4;
  --wt-btn-border: transparent;
  --wt-btn-text: #ffffff;
  --wt-btn-hover-bg: #3c45a5;
  --wt-input-bg: #1e1f22;
  --wt-input-border: rgba(255, 255, 255, 0.1);
  --wt-input-text: #dbdee1;
  --wt-timer-color: #dbdee1;
  --wt-timer-finished: #ed4245;
  --wt-copied-bg: #57f287;
  --wt-copied-text: #1e1f22;
  --wt-focus-inner: transparent;
  --wt-focus-outer: rgba(88, 101, 242, 0.5);
  --wt-select-bg: #1e1f22;
  --wt-select-text: #dbdee1;
  --wt-select-border: rgba(255, 255, 255, 0.1);
  --wt-nav-link: #dbdee1;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem var(--wt-focus-inner),
    0 0 0 0.25rem var(--wt-focus-outer);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--wt-bg);
  color: var(--wt-text);
}

a,
.nav-link,
p,
h1,
h2,
h3,
h4,
h5,
h6,
label,
span,
div {
  color: var(--wt-text);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.room-title {
  font-size: 2rem;
  color: var(--wt-text);
}

.room-title span {
  font-size: 0.5em;
}

.landing-panel {
  min-height: 70vh;
}

.landing-source-link {
  padding-bottom: 10vh;
}

.signalr-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.room-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem 0.45rem;
}

.room-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  line-height: 1;
}

.room-action-icon svg {
  width: 100%;
  height: 100%;
}

.room-action-copied {
  background-color: var(--wt-copied-bg) !important;
  color: var(--wt-copied-text) !important;
}

.room-action-copied svg path {
  fill: var(--wt-copied-text);
}

.signalr-connected {
  background-color: #22c55e;
  box-shadow: 0 0 4px #22c55e;
}

.signalr-reconnecting {
  background-color: #f59e0b;
  box-shadow: 0 0 4px #f59e0b;
  animation: signalr-pulse 1s infinite;
}

.signalr-disconnected {
  background-color: #ef4444;
  box-shadow: 0 0 4px #ef4444;
}

.alarm-panel {
  max-width: 420px;
  border: 1px solid var(--wt-border);
  border-radius: 12px;
  background: var(--wt-surface);
}

.alarm-panel-title {
  cursor: pointer;
  letter-spacing: 0.12em;
  list-style: none;
}

.alarm-panel-title::-webkit-details-marker {
  display: none;
}

.alarm-panel[open] .alarm-panel-title {
  margin-bottom: 0;
}

.alarm-input {
  width: 110px;
}

.alarm-sound-settings {
  border-top: 1px solid var(--wt-border-subtle);
}

@keyframes signalr-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

#timerDisplay {
  font-size: 6rem;
  font-family: monospace;
  font-weight: bold;
  color: var(--wt-timer-color);
  text-shadow: none;
}

.timer-display-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.timer-adjust-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 4.75rem;
  height: 3.5rem;
  padding: 0 0.9rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#timerDisplay.timer-finished {
  color: var(--wt-timer-finished);
}

.card,
.card-body,
.alert,
.form-control,
.form-select,
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--wt-input-bg) !important;
  color: var(--wt-input-text) !important;
  border-color: var(--wt-input-border) !important;
}

.controls {
  background-color: transparent !important;
}

.timer-preset-rows {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
}

.timer-preset-row {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: min(100%, 460px);
}

.timer-preset-field {
  min-width: 96px;
}

.timer-preset-input {
  width: 96px;
}

.timer-preset-start,
.timer-preset-remove {
  width: 40px;
  min-width: 40px;
  height: 30px;
  padding: 0.2rem 0.5rem;
}

.timer-preset-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.timer-preset-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.timer-preset-start-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
}

.timer-preset-start-icon svg {
  width: 100%;
  height: 100%;
}

.timer-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
}

.timer-action-icon svg {
  width: 100%;
  height: 100%;
}

.timer-preset-add {
  display: block;
  width: min(100%, 230px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.shared-control-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
}

.timer-preset-remove-hidden {
  visibility: hidden;
  pointer-events: none;
}

.btn,
button,
input[type="button"],
input[type="submit"] {
  background-color: var(--wt-btn-bg) !important;
  color: var(--wt-btn-text) !important;
  border: 1px solid var(--wt-btn-border) !important;
  box-shadow: none !important;
}

/* Remove hover effects on all buttons */
button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: var(--wt-btn-hover-bg) !important;
  border-color: var(--wt-btn-border) !important;
  color: var(--wt-btn-text) !important;
  filter: none !important;
  text-decoration: none !important;
  cursor: pointer;
}

/* Nav controls */
.wt-nav-select {
  background-color: var(--wt-select-bg) !important;
  color: var(--wt-select-text) !important;
  border-color: var(--wt-select-border) !important;
  /* Override the broad button rule that would otherwise apply */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-theme="haswell"] .wt-nav-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dbdee1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.wt-nav-link {
  color: var(--wt-nav-link) !important;
}

@media (max-width: 576px) {
  #timerDisplay {
    font-size: 4rem;
  }

  .timer-display-controls {
    gap: 0.75rem;
  }

  .timer-adjust-button {
    width: auto;
    min-width: 4.25rem;
    height: 3rem;
    padding: 0 0.7rem;
    font-size: 1rem;
  }
}