/* ===============================
   Exchange rate board (Datatec + Spreads)
   =============================== */
.table-scrollable {
   max-height: 640px;
   overflow-y: auto;
   overflow-x: auto;
   position: relative;
   scrollbar-width: thin;
   scrollbar-color: rgba(28, 99, 254, 0.25) transparent;
}

.table-scrollable::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

.table-scrollable::-webkit-scrollbar-track {
   background: transparent;
}

.table-scrollable::-webkit-scrollbar-thumb {
   background-color: rgba(28, 99, 254, 0.25);
   border-radius: 999px;
   border: 2px solid transparent;
}

.table-scrollable::-webkit-scrollbar-thumb:hover {
   background-color: rgba(28, 99, 254, 0.4);
}

.table-scrollable thead th {
   position: sticky !important;
   top: 0 !important;
   z-index: 10 !important;
   background-color: #002546 !important;
   color: #ffffff;
}

#fx-spread-table th {
   font-size: 0.75rem;
   padding: 0.5rem 0.2rem !important;
   text-align: center;
}

#fx-spread-table td {
   font-size: 0.8rem;
   padding: 0.4rem 0.2rem !important;
}

.fx-spread-cell {
   cursor: pointer;
   text-align: center;
   font-weight: 500;
   transition: all 0.2s ease;
   position: relative;
}

.fx-spread-cell:hover {
   opacity: 0.85;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fx-spread-cell .copy-icon {
   opacity: 0;
   margin-left: 4px;
   font-size: 0.75rem;
   transition: opacity 0.2s;
}

.fx-spread-cell:hover .copy-icon {
   opacity: 0.6;
}

.fx-spread-cell .copy-icon:hover {
   opacity: 1 !important;
}

.fx-spread-cell.locked {
   background-color: #e9ecef !important;
   color: #6c757d !important;
   cursor: not-allowed;
}

.fx-spread-cell.recommended {
   background-color: #cfe6ff !important;
   color: #06325e !important;
}

.fx-spread-cell.massive {
   background-color: #a8e0a0 !important;
   color: #0b3d12 !important;
}

.fx-spread-cell.user-selected {
   background-color: #1d63ff !important;
   color: #ffffff !important;
}

.fx-spread-cell.user-selected.copy-icon {
   color: #ffffff !important;
}

.datatec-card {
   border: 1px solid #e2e8f0;
   border-radius: 18px;
   padding: 1rem;
   background: #ffffff;
   box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.datatec-card__title {
   font-size: 1rem;
   font-weight: 600;
   color: #101828;
   margin-bottom: 0.75rem;
}

.datatec-card__row {
   display: flex;
   justify-content: space-between;
   gap: 0.75rem;
   align-items: center;
}

.datatec-card__label {
   font-size: 0.85rem;
   letter-spacing: 0.02em;
   color: #6b7280;
   margin-bottom: 0.35rem;
}

.datatec-card__timestamp {
   font-size: 0.725rem;
   color: #9ca3af;
   margin-bottom: 0;
   white-space: normal;
   word-break: break-word;
}

.datatec-card__value {
   font-size: 1rem;
   font-weight: 800;
   text-align: right;
   line-height: 1;
   font-variant-numeric: tabular-nums;
}

.datatec-card__value--bid {
   color: #1d63ff;
}

.datatec-card__value--ask {
   color: #475467;
}

.datatec-card__divider {
   height: 1px;
   background: linear-gradient(
      90deg,
      rgba(226, 232, 240, 0),
      rgba(226, 232, 240, 1),
      rgba(226, 232, 240, 0)
   );
   margin: 0.85rem 0;
}

@media (max-width: 576px) {
   .datatec-card__row {
      flex-direction: column;
      gap: 0.75rem;
   }

   .datatec-card__value {
      text-align: left;
   }
}

@media (min-width: 992px) and (max-width: 1199px) {
   .datatec-card__row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
   }

   .datatec-card__value {
      text-align: left;
   }
}