@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

.item-name {
    width: 100%;
    font-family: 'Source Code Pro', monospace;
    color: linen;
    display: flex;
    align-items: center; /* allinea l'immagine e il contenitore testo */
    gap: 12px;
    margin-bottom: 8px;
    flex-direction: row;
    position: relative;
    background-color: #222;
    border-radius: 5px;
}

.item-name > img {
    width: 60px;
    height: 60px;
    border: 1px solid #555;
    border-radius: 5px;
}

.text-container {
    display: flex;
    flex-direction: column;
    position: relative;
    /* Altezza della container uguale all'immagine per calcolare l'allineamento */
    height: 60px;
    justify-content: flex-start; /* Link parte dall'alto */
    gap: 4px;
}


.link {
    font-size: 13px;
    margin-top: 7px; /* metà altezza title stimata */
    left: 0;
    right: 0;
    transform: translateY(-30%);
    color:lightgrey;
    white-space: nowrap;       /* Non andare a capo */
    overflow: hidden;          /* Nascondi overflow */
    text-overflow: ellipsis;   /* Mostra "..." se troppo lungo */
    color:#5a6f8f;
}

/* contenitore title */
.title-wrapper {
  display: flex;
  align-items: center; /* centra verticalmente */
  gap: 6px;            /* spazio tra titolo e bottone */
}

.title {
    font-size: 21px;
    line-height: 1;
    left: 0;
    right: 0;
}

/* stili tabelle ordini */

.sell-table {
    flex-shrink: 1;
    height: 250px;      /* altezza fissa uguale per entrambe */
    scrollbar-width: none; /* Firefox */
    overflow: hidden;  /* nessuno scroll sull'intero contenitore */
    position: relative;
    border:1px solid orange;
    background-color: #222;
    border-radius: 5px;

    box-shadow: 
        0 0 10px #ff45004D,  /* 30% opacità */
        0 0 2px  #ff450033,  /* 20% opacità */
        0 0 10px #ff450033;  /* 20% opacità */
}

.buy-table {
    flex-shrink: 1;
    height: 250px;     /* altezza fissa uguale per entrambe */
    margin-top: 13px;  /* puoi regolare margini separatamente se vuoi */
    scrollbar-width: none; /* Firefox */
    overflow: hidden;  /* nessuno scroll sull'intero contenitore */
    position: relative;
    border:1px solid #00bfff;
    background-color: #222;
    border-radius: 5px;

    box-shadow: 
        0 0 10px #00bfff4D,
        0 0 2px  #00bfff33,
        0 0 10px #00bfff33;
}

.sell-table::-webkit-scrollbar,
.buy-table::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Tabelle: base comune */
.sell-table table,
.buy-table table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    color: #B0B0B0;
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
}

/* Colonne larghezza e allineamento */

/* intestazioni  colonne */
th {
    height: 24px;
    text-align: left;
    box-sizing: border-box;
    background-color: #333;
}

td {
    height: 22px;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    text-align: left;
    box-sizing: border-box;
}

/* Wrapper interno per testo + pulsanti */

.th-wrapper {

  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

/* Colonna location */
.location {
  width: 380px;
  padding-left: 10px;
  box-sizing: border-box;
  position: relative; /* per posizionare figli assoluti dentro */
  overflow: hidden;   /* evita overflow visivo */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Contenitore dei pulsanti */
/* Pulsanti filtro */
.filter-buttons {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
  pointer-events: auto; /* assicura che i bottoni siano cliccabili */
  z-index: 10;
}

/* Pulsanti filtro base */
 .filter-btn {
  width: 17px;
  height: 17px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.2s, transform 0.1s;
  filter: grayscale(30%) brightness(1.2);

  --filter-color: transparent; /* fallback */
  background-color: var(--filter-color);
}


/* Colori distinti per fascia di sec-status */

.filter-btn.filter-high {
  --filter-color: #60d9a3;
}
.filter-btn.filter-mid {
  --filter-color: #da6c07;
}
.filter-btn.filter-low {
  --filter-color: red;
}

/* Stato attivo per highlight */
.filter-buttons .filter-btn.active {
  opacity: 1;
  transform: scale(0.8); /* più piccolo */
  filter: none;
  box-shadow: 0 0 5px var(--filter-color), 0 0 8px var(--filter-color);

}

/* Forza larghezza fissa per colonne */
.region {
    width: 160px;
    text-align: left;
    padding-left: 10px;
}

.volume {
    width: 130px;
    text-align: right;
    padding-right: 10px;
}

.price {
    width: 210px;
    text-align: right;
    padding-right: 10px;
}

.location-status {
    margin-right: 5px;
}

/* Colori per security status */
.sec-1_0 { color: #2b73df; }
.sec-0_9 { color: #3a99e8; }
.sec-0_8 { color: #4dccf6; }
.sec-0_7 { color: #60d9a3; }
.sec-0_6 { color: #71e554; }
.sec-0_5 { color: #f5ff83; }
.sec-0_4 { color: #da6c07; }
.sec-0_3 { color: #cb430f; }
.sec-0_2 { color: #b91117; }
.sec-0_1 { color: #8A2E2E; }
.sec-0_0, .sec-neg0_1, .sec-neg0_2, .sec-neg0_3, .sec-neg0_4, .sec-neg0_5, .sec-neg0_6, .sec-neg0_7,
.sec-neg0_8, .sec-neg0_9, .sec-neg1_0 {
    color: #A04077;
}


.expired, .expires {
    width: 120px;
    text-align: right;
    padding-right: 15px;
    font-family: monospace;
}

/* Evidenzia ordini in scadenza */
.soon-expiring {
    color: #FFA500;
}

/* STILI MENU SCROLL */

/* Rende scrollabile solo il corpo della tabella */
.scrollable-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

.scrollable-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.scrollable-table tbody {
    display: block;
    max-height: 196px; /* spazio per scroll */
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none; /* Firefox */
}

/* Serve per far funzionare il layout fisso delle colonne anche con tbody block */
.scrollable-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.scrollable-table tbody tr:hover {
    background-color: #333;
}

.scrollable-table tbody::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */
}
.scrollable-table tbody::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px;
}
.scrollable-table tbody::-webkit-scrollbar-track {
    background: #222;
}

/* ALTRO */

.no-selected-item {
    text-align: center;
    font-family: monospace;
    font-size: 20px;
    color: #B0B0B0;
    padding:5px;
    max-width: 1200px;
}

.sellers {
    color:orange;
}

.buyers {
    color:#00bfff;
}
.sellers,
.buyers {
    margin: 0;
    padding: 4px 8px;
    font-family: monospace;
    font-size: 14px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}