/* Theme variables */
:root {
  --bg-primary: #FAFAF7;
  --bg-secondary: #f8f9fa;
  --text-primary: #212121;
  --text-secondary: #616161;
  --text-disabled: #9E9E9E;
  --border-color: #dee2e6;
  --progress-track: #e9ecef;
  --grad-stop1: 60%;
  --grad-stop2: 80%;
  --c0: #121212;
  --c1: #1E1E1E;
  --c2: #2C2C2C;
}
body.dark-mode {
  --bg-primary: #121212;
  --bg-secondary: #1E1E1E;
  --text-primary: #E0E0E0;
  --text-secondary: #A0A0A0;
  --text-disabled: #7E7E7E;
  --border-color: #2C2C2C;
  --progress-track: #2E2E2E;
  background: linear-gradient(180deg, var(--c0) 0%, var(--c0) var(--grad-stop1), var(--c1) var(--grad-stop2), var(--c2) 100%);
}

/* Basic styles for dashboard */
body {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-primary) var(--grad-stop1), #fff6d6 var(--grad-stop2), #ffe680 100%);
  color: var(--text-primary);
}

.dashboard-wrapper {
  height: 100vh;
  overflow-y: auto;
}
.info-block {
  margin-bottom: 1rem;
}

label,
.form-label {
  color: var(--text-secondary);
}

.form-text,
.hint {
  color: var(--text-disabled);
}

/* Text color helper classes */
.text-success {
  color: var(--bs-success);
}

.text-danger {
  color: var(--bs-danger);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-disabled {
  color: var(--text-disabled);
}

.text-gray {
  color: var(--text-secondary);
}

/* Status color helper classes */
.status-free,
.status-speaking,
.status-pause,
.status-wrapup,
.status-agentringing,
.status-default {
  background-color: transparent;
  color: inherit;
}

/* Queue color helper classes */
.queue-low {
  background-color: var(--bs-success);
  color: var(--bs-light);
}

.queue-medium {
  background-color: var(--bs-warning);
  color: var(--bs-dark);
}

.queue-high {
  background-color: var(--bs-danger);
  color: var(--bs-white);
}

/* Utility background color classes */
.bg-purple {
  background-color: #6f42c1 !important;
  color: #fff;
}

/* Responsive table wrapper */
.table-responsive {
  overflow-x: auto;
}

.ini-header {
  position: fixed;
  bottom: 5px;
  left: 5px;
  font-size: 0.8rem;
}

.card {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

table {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
table th,
table td {
  border-color: var(--border-color);
}

/* Queue cards */
.queue-cards {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.queue-card {
  width: 150px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.queue-card .card-value {
  font-size: 2.5rem;
  font-weight: bold;
}

.queue-card .card-label {
  font-size: 0.9rem;
}

.queue-card .icon {
  margin-right: 0.25rem;
  font-size: 1.2rem;
}

.progress {
  background-color: var(--progress-track);
}

/* Glow utility classes */
.glow-success {
  box-shadow: 0 0 6px var(--bs-success);
}

.glow-warning {
  box-shadow: 0 0 6px var(--bs-warning);
}

.glow-danger {
  box-shadow: 0 0 6px var(--bs-danger);
}

.glow-secondary {
  box-shadow: 0 0 6px var(--text-secondary);
}

/* Normalize card title size after heading-level change */
.card-title {
  font-size: 1.25rem;
}

/* Metric cards */
.metric-card .card-value {
  font-size: 2rem;
  font-weight: bold;
}

.period-cards .metric-card {
  width: 138px;
}

.period-cards .metric-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.info-block .card-body {
  position: relative;
}

.info-block-image {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 25%;
  height: auto;
}

.info-block .card-title {
  margin-bottom: 1.5rem;
  white-space: normal;
}

.info-block .card-text {
  margin-top: 1rem;
}

/* Fix period card widths when set via JS */
.period-card-fixed {
  flex: 0 0 auto;
}