@font-face {
  font-family: 'icomoon';
  src:  url('/assets/fonts/icomoon.eot?966bn0');
  src:  url('/assets/fonts/icomoon.eot?966bn0#iefix') format('embedded-opentype'),
        url('/assets/fonts/icomoon.ttf?966bn0') format('truetype'),
        url('/assets/fonts/icomoon.woff?966bn0') format('woff'),
        url('/assets/fonts/icomoon.svg?966bn0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-BryghtLabsLogo2024 .path1:before {
  content: "\e900";
  color: rgb(255, 255, 255);
}
.icon-BryghtLabsLogo2024 .path2:before {
  content: "\e901";
  margin-left: -0.7822265625em;
  color: rgb(0, 0, 0);
}
.icon-BryghtLabsLogo2024 .path3:before {
  content: "\e902";
  margin-left: -0.7822265625em;
  color: rgb(0, 0, 0);
}
.icon-BryghtLabsLogo2024 .path4:before {
  content: "\e903";
  margin-left: -0.7822265625em;
  color: rgb(255, 255, 255);
}

/* Hover effect for the connected boards card */
.connected-boards-card {
  cursor: pointer;
  position: relative;
}

/* Hover effect for the Live Game Card */
.live-Game-card {
  cursor: pointer;
  position: relative;
}

/* Default transition for all cards */
.card {
  transition: box-shadow 0.3s ease-in-out; /* Smooth shadow transition */
  box-shadow: none; /* No shadow by default */
}

/* Intense lavender shadow only when hovered and the game is active */
.card.is-active:hover {
  box-shadow: 0 8px 16px rgba(180, 150, 255, 0.6); /* Intense lavender shadow */
}

/* No transition or shadow for inactive cards */
.card:not(.is-active) {
  transition: none;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); 
}

.bg-light-green {
  background-color: rgba(144, 238, 144, 0.2); /* Light green with transparency */
}

.bg-light-blue {
  background-color: rgba(25, 125, 250, 0.1); /* 20% opacity */
}

.bg-light-gold {
  background-color: rgba(255, 223, 94, 0.2); /* Subtle yellow-gold with 20% opacity */
}

.bg-light-teal {
  background-color: rgba(0, 170, 169, 0.15); /* Calm teal with 15% opacity */
}

.bg-light-lavender {
  background-color: rgba(180, 150, 255, 0.15); /* Gentle lavender with 15% opacity */
}

.bg-light-red {
  background-color: rgba(255, 99, 71, 0.2); /* Tomato red with 20% opacity */
}

.text-gold-dark {
  color: #665D1E; /* Dark, earthy brownish-gray */
}

.text-teal-dark {
  color: #004D4C; /* Dark teal */
}

.text-lavender-dark {
  color: #4B3B66; /* Soft, muted purple */
}

.text-red-dark {
  color: #8B0000; /* Dark Red */
}

:root {
  --bot-game-color: #9C64F7;
  --host-abandoned-game-color: #6104b9;
}

.text-bot-indigo {
  color: var(--bot-game-color);
}

.border-left-indigo {
  border-left: 0.25rem solid var(--bot-game-color) !important;
}

.text-host-abandoned {
  color: var(--host-abandoned-game-color);
}

.border-left-host-abandoned {
  border-left: 0.25rem solid var(--host-abandoned-game-color) !important;
}

.text-human-pink {
  color: #355BE7;
}

.text-chessup-blue {
  color: #355BE7
}

.fw-medium {
    font-weight: 500;
}

.text-lichess-gold {
  color: #B68435;
}

.border-left-pink {
  border-left: 0.25rem solid #355BE7 !important;
}

.border-left-gold {
  border-left: 0.25rem solid #B68435 !important;
}

.text-adoption-color {
  color: #8075F7
}

.border-adoption-color {
  border-left: 0.25rem solid #8075F7 !important;
}

/* Style for the connected board map view */
#connectedBoardMapView {
  height: 600px; /* Adjust this value as needed */
  width: 100%; /* Ensure it spans the container width */
}

/* Activity Type Marker shared base styles */
[class*="marker-activity-"] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  animation: marker-pulse 2.5s ease-in-out infinite;
}

/* Slow pulsating glow effect — shadow only, no displacement */
@keyframes marker-pulse {
  0%   { box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);  opacity: 1;   }
  50%  { box-shadow: 0 0 14px rgba(0, 0, 0, 0.45); opacity: 0.8; }
  100% { box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);  opacity: 1;   }
}

/* Activity Type Marker colors (index 0-9) */
.marker-activity-0 { background-color: #9C64F7; } /* CDC Bot Game - Purple */
.marker-activity-1 { background-color: #1041f1; } /* CDC Friendly - Blue */
.marker-activity-2 { background-color: #FF6B35; } /* CDC Random - Orange */
.marker-activity-3 { background-color: #2EC4B6; } /* OTB Game - Teal */
.marker-activity-4 { background-color: #E71D36; } /* AI Game - Red */
.marker-activity-5 { background-color: #5C6BC0; } /* Editor Game - Indigo */
.marker-activity-6 { background-color: #795548; } /* LiChess Game - Brown */
.marker-activity-7 { background-color: #F72585; } /* ChessUp Game - Pink */
.marker-activity-8 { background-color: #00897B; } /* BLE Game - Dark Teal */
.marker-activity-9 { background-color: #8ceb0f; } /* No Game Active - Neon Green */

.shadow-custom {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* Adjust values as needed */
}

/* Intense lavender shadow for active boards */
.shadow-intense-lavender {
  box-shadow: 0 8px 16px rgba(180, 150, 255, 0.6); /* Intense lavender shadow */
  transition: box-shadow 0.3s ease-in-out;
}

#kt_app_sidebar {
  background-color: #197dfa !important; /* Replace with your desired color */
  color: #ffffff !important; /* Ensures text color contrasts */
}

#kt_app_sidebar .menu-link,
#kt_app_sidebar .menu-title,
#kt_app_sidebar .app-sidebar-logo a {
    color: #ffffff !important; /* Ensures text color contrasts with the background */
}

.flash-green {
  animation: flashGreen 1s ease-in-out;
}

@keyframes flashGreen {
  0% {
      background-color: #8cd89d; /* Green */
  }
  100% {
      background-color: transparent; /* Original background color */
  }
}

#gameLogsScrollView span {
  white-space: pre-wrap;
}

.new-log {
  background-color: rgba(255, 255, 0, 0.2); /* Light yellow background */
  border-left: 3px solid #ffcc00; /* Subtle border highlight */
}

.new-move {
  background-color: rgba(255, 255, 0, 0.2); /* Light yellow background */
  border-left: 3px solid #ffcc00; /* Subtle border highlight */
}

/* Map + Legend wrapper: places legend to the right of the map */
.map-legend-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

.map-legend-wrapper #connectedBoardMapView {
  flex: 1;
}

/* Legend container styles — vertical, right side */
.map-legend {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

/* --- Previous legend layout (horizontal, below map) ---
.map-legend {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 10px;
  gap: 15px;
  font-family: 'Inter', sans-serif;
}
--- end previous layout --- */

/* Legend table styles */
.legend-table {
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  width: 100%;
}

.legend-table th {
  font-size: 0.75rem;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 10px;
  border-bottom: 2px solid #e0e0e0;
}

.legend-table td {
  text-align: center;
  vertical-align: middle;
  padding: 5px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.legend-table tr:last-child td {
  border-bottom: none;
}

/* Legend color swatch */
.legend-color {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 3px;
}

/* Legend activity name */
.legend-label {
  font-size: 0.85rem;
  color: #333;
  font-weight: 600;
  white-space: nowrap;
}

/* Legend count */
.legend-count {
  font-size: 0.85rem;
  font-weight: bold;
  color: #555;
}

/* Used for Today Count text */
.todayCount {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;           /* Matches Bootstrap's fw-bold */
  font-size: 0.75rem;         /* Matches Bootstrap's text-xs */
  margin-bottom: 0;           /* Matches Bootstrap's mb-0 */
}

.todayCountHuman {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;           /* Matches Bootstrap's fw-bold */
  font-size: 0.75rem;         /* Matches Bootstrap's text-xs */
  margin-bottom: 0;           /* Matches Bootstrap's mb-0 */
}

.todayCountInterruptedGames {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;           /* Matches Bootstrap's fw-bold */
  font-size: 0.75rem;         /* Matches Bootstrap's text-xs */
  margin-bottom: 0;           /* Matches Bootstrap's mb-0 */
}

.percentilePairTimeMetric {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;           /* Matches Bootstrap's fw-bold */
  font-size: 0.75rem;         /* Matches Bootstrap's text-xs */
  margin-bottom: 0;           /* Matches Bootstrap's mb-0 */
}

.cdcInterruptPercentage {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;           /* Matches Bootstrap's fw-bold */
  font-size: 1rem;         /* Matches Bootstrap's text-xs */
  margin-bottom: 0;           /* Matches Bootstrap's mb-0 */
}

.boardInterruptPercentage {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;           /* Matches Bootstrap's fw-bold */
  font-size: 1rem;         /* Matches Bootstrap's text-xs */
  margin-bottom: 0;           /* Matches Bootstrap's mb-0 */
}

.tapDataMetricTile {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;           /* Matches Bootstrap's fw-bold */
  font-size: 0.75rem;         /* Matches Bootstrap's text-xs */
  margin-bottom: 0;           /* Matches Bootstrap's mb-0 */
}

.todayCountBot {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;           /* Matches Bootstrap's fw-bold */
  font-size: 0.75rem;         /* Matches Bootstrap's text-xs */
  margin-bottom: 0;           /* Matches Bootstrap's mb-0 */
}

#togglePassword {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #6c757d; /*Optional: Match input text color*/
}

#togglePassword:focus {
  outline: none;
}

#pushNotificationContainer .row > [class*="col-"] {
  margin-bottom: 10px; /* Adjust this value to control vertical spacing */
}

.subtle-link {
  color: inherit;
}

.subtle-link:hover {
  color: var(--bs-primary);
}

/* Top-level menu in chessupConfig.ejs */
.menu-item > .menu-link .menu-title {
    font-weight: 800 !important;
}

/* Submenu items in chessupConfig.ejs */
.menu-sub .menu-item .menu-title {
    font-weight: 700 !important;
}

#firmwareContextWrapper {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
#firmwareContextWrapper.show {
  opacity: 1;
}

#incompleteGamesTableContainer td.created-at-cell {
  white-space: nowrap;
  font-size: 0.85rem;
}

.connected-countries-card .card-body {
  min-height: 80px;
}
.connected-countries-card img {
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

/* Make pairing modal wider than default modal-xl */
.pairing-modal-wide {
    max-width: 80vw;   /* up to 80% of viewport width */
}

@media (min-width: 1400px) {
    .pairing-modal-wide {
        max-width: 1600px;
    }
}

.fen-cell::-webkit-scrollbar {
  height: 6px;
}

.fen-cell {
  user-select: text;
}

.fen-cell {
  max-width: 150px;
  white-space: nowrap;
  overflow-x: auto;
  border: 1px solid #b6d4fe;
  background-color: #b8d2f9;
  border-radius: 6px;
  padding: 3px 6px;
  font-family: monospace;
}

.interrupted-details-table {
  font-size: 1rem;     /* Smaller text overall */
}

.interrupted-details-table td,
.interrupted-details-table th {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.created-at-cell {
  font-size: 0.75rem;   /* Smaller than normal text */
  color: #6c757d;       /* Optional: muted Bootstrap gray */
  white-space: nowrap;  /* Keeps timestamp on one line */
}

/* Outline Blue Button */
.btn-outline-blue {
    color: #355BE7;
    border: 1px solid #355BE7;
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}

.btn-outline-blue:hover,
.btn-outline-blue:focus {
    background-color: #355BE7;
    color: #ffffff;
    border-color: #355BE7;
}

.btn-outline-blue:active {
    background-color: #2c4fd1; /* Slightly darker for press */
    border-color: #2c4fd1;
    color: #ffffff;
}

/* =========================================================================
   Production Batch Analysis — Tile Detail Styles
   =========================================================================
   These classes control the per-batch breakdown rows inside the
   "Production Batch Analysis" tile and its modal header.

   Usage in index.ejs:
     <span class="prod-batch-label">Batch 1:</span>
     <span class="prod-batch-alltime">All Time: <span>28</span></span>
     <span class="prod-batch-delta">Delta: <span>+1</span></span>
     <span class="prod-batch-delta-summary">(+4 / 1 week)</span>
   ========================================================================= */

/* Batch row — 3-column CSS grid so "Batch X:", "All Time:", and "Delta:"
   line up vertically across all rows like invisible table columns.
   Applied to each <div> that holds one batch's data. */
.prod-batch-row {
  display: grid;
  grid-template-columns: 5.5rem 9rem auto; /* label | all-time | delta */
  align-items: baseline;
  gap: 0 0.25rem;                          /* no row gap, small column gap */
}

/* Batch label — "Batch 1:", "Batch 2:", "Batch 3:"
   Adoption purple, bold, slightly larger than sibling text to anchor
   each row visually. */
.prod-batch-label {
  color: #8075F7;            /* Matches the adoption/tile accent color */
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;   /* Slight spacing for readability at small sizes */
}

/* All Time value — "All Time: 28"
   Dark, semi-bold text so the cumulative count reads clearly. */
.prod-batch-alltime {
  color: var(--bs-secondary); /* Matches Bootstrap's text-secondary */
  font-weight: 700;
  font-size: 0.78rem;
}

/* Delta value — "Delta: +1"
   Green accent to visually signal growth / new connections. */
.prod-batch-delta {
  color: #1cc88a;            /* Bootstrap-style success green (matches Batch 2 chart line) */
  font-weight: 700;
  font-size: 0.78rem;
}

/* Grand delta summary — "(+4 / 1 week)"
   Sits beside the headline number.  Muted but readable, with slightly
   larger text than the per-batch rows to maintain hierarchy. */
.prod-batch-delta-summary {
  color: #858796;            /* SB Admin 2 secondary gray */
  font-weight: 600;
  font-size: 0.82rem;
}

/* ── Modal-header overrides ──
   When batch rows appear inside the blue modal header (bg-primary),
   the tile colours (purple, gray, green) are unreadable on the dark
   background.  These scoped overrides keep the same grid layout and
   weight but swap to light tones that read clearly on blue.
   Also widen the label column to accommodate "Other/Unknown:". */
.modal-header .prod-batch-row {
  grid-template-columns: 8rem 9rem auto; /* wider label for "Other/Unknown:" */
}
.modal-header .prod-batch-label {
  color: rgba(255, 255, 255, 0.95);      /* near-white for contrast */
}
.modal-header .prod-batch-alltime {
  color: rgba(255, 255, 255, 0.75);      /* slightly muted white */
}
.modal-header .prod-batch-delta {
  color: #5ee5b0;                        /* light mint-green visible on blue */
}