/* ============================================================
   styles/components.css — CrypView V2
   Header, sidebar, indicateurs-bar, menus contextuels, modal.
   ============================================================ */

/* ── Header ─────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--accent);
}
.logo span { color: var(--muted); font-weight: 400; }
a.logo { text-decoration: none; cursor: pointer; transition: opacity .2s; }
a.logo:hover { opacity: .7; }

/* ── Recherche symbole ───────────────────────────────────────── */
.sym-search-wrap { position: relative; flex-shrink: 0; }

#sym-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 30px 6px 10px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  border-radius: 4px;
  width: 130px;
  transition: border-color .15s, width .2s;
  outline: none;
  text-transform: uppercase;
}
#sym-input:focus    { border-color: var(--accent); width: 160px; }
#sym-input::placeholder { color: var(--muted); text-transform: none; }

.sym-search-icon {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted); font-size: 11px; pointer-events: none;
}

#sym-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 175px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  z-index: 200;
  max-height: 230px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
#sym-dropdown::-webkit-scrollbar       { width: 3px; }
#sym-dropdown::-webkit-scrollbar-thumb { background: var(--border); }
#sym-dropdown.open { display: block; }

.sym-opt {
  padding: 7px 12px; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(28,35,51,.5);
  transition: background .1s;
}
.sym-opt:last-child            { border-bottom: none; }
.sym-opt:hover, .sym-opt.focused { background: rgba(0,255,136,.07); color: var(--accent); }
.sym-opt .sym-base  { font-weight: 700; }
.sym-opt .sym-quote { color: var(--muted); font-size: 9px; }
.sym-empty { padding: 10px 12px; font-size: 10px; color: var(--muted); }

/* ── Timeframe strip ─────────────────────────────────────────── */
.tf-scroll-wrapper { position: relative; display: flex; align-items: center; }

.tf-scroll {
  display: flex; gap: 5px;
  overflow-x: auto;          /* ← était: overflow: hidden */
  width: 183px;
  scroll-behavior: smooth; cursor: grab;
  scrollbar-width: none;
}
.tf-scroll:active             { cursor: grabbing; }
.tf-scroll::-webkit-scrollbar { display: none; }

.tf-btn         { padding: 5px 9px; flex-shrink: 0; white-space: nowrap; }
.tf-btn.active  { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; }

.tf-scroll-wrapper::before,
.tf-scroll-wrapper::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 14px; pointer-events: none; z-index: 2;
}
.tf-scroll-wrapper::before { left:  0; background: linear-gradient(to right, var(--panel), transparent); }
.tf-scroll-wrapper::after  { right: 0; background: linear-gradient(to left,  var(--panel), transparent); }

/* ── Prix et statut ──────────────────────────────────────────── */
.price-display { margin-left: auto; display: flex; align-items: baseline; gap: 10px; }

#live-price {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 22px;
  transition: color .15s;
}
#price-change { font-size: 12px; }

.status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.dot.live { background: var(--accent); animation: pulse 1.5s infinite; }

@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* ── Bannière erreur ─────────────────────────────────────────── */
.err-banner {
  display: none;
  padding: 5px 14px;
  background: #ff3d5a15;
  border-bottom: 1px solid #ff3d5a33;
  font-size: 10px; color: #ff8899;
  flex-shrink: 0;
}

/* ── Barre indicateurs actifs (ind-bar) ──────────────────────── */
#ind-bar {
  display: none;
  align-items: center; gap: 6px;
  padding: 4px 14px;
  background: rgba(13,17,23,.95);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex-shrink: 0;
}
#ind-bar.visible { display: flex; }

.ind-tag {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  background: rgba(0,255,136,.07);
  border: 1px solid rgba(0,255,136,.2);
  border-radius: 3px; font-size: 9px; color: var(--accent);
}
.ind-dot    { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ind-remove { cursor: pointer; color: var(--muted); font-size: 10px; line-height: 1; margin-left: 2px; }
.ind-remove:hover { color: var(--red); }

/* ── Menu contextuel ─────────────────────────────────────────── */
#ctx-menu {
  display: none; position: fixed; z-index: 9999;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px; min-width: 210px;
  box-shadow: 0 16px 48px rgba(0,0,0,.85);
  padding: 6px 0; font-size: 11px;
  backdrop-filter: blur(14px);
}
#ctx-menu.visible { display: block; }

.ctx-cat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; cursor: pointer;
  transition: background .1s; white-space: nowrap; user-select: none;
}
.ctx-cat:hover, .ctx-cat.open { background: rgba(0,255,136,.07); color: var(--accent); }
.ctx-cat-left  { display: flex; align-items: center; gap: 9px; }
.ctx-cat-icon  { font-size: 13px; }
.ctx-cat-arrow { font-size: 9px; color: var(--muted); transition: transform .15s; }
.ctx-cat.open .ctx-cat-arrow { transform: rotate(90deg); color: var(--accent); }

.ctx-sep  { height: 1px; background: var(--border); margin: 4px 0; }

.ctx-sub {
  display: none; position: fixed; z-index: 10000;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px; min-width: 230px;
  box-shadow: 0 16px 48px rgba(0,0,0,.9);
  padding: 6px 0; font-size: 11px;
  backdrop-filter: blur(14px);
}
.ctx-sub.visible  { display: block; }
.ctx-sub-title {
  padding: 6px 14px 5px; font-size: 9px;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 1.2px; border-bottom: 1px solid var(--border);
  margin-bottom: 3px;
}

.ctx-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; cursor: pointer;
  transition: background .1s; white-space: nowrap;
}
.ctx-item:hover { background: rgba(0,255,136,.07); color: var(--accent); }

.ctx-check {
  width: 14px; height: 14px;
  border: 1px solid var(--border); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 9px; transition: all .12s; color: transparent;
}
.ctx-item.on .ctx-check          { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.ctx-item.on .ctx-check::after   { content: '✓'; }
.ctx-color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.ctx-danger        { color: var(--red) !important; }
.ctx-danger:hover  { background: rgba(255,61,90,.07) !important; }
.ctx-item.draw-active { background: rgba(0,255,136,.1); color: var(--accent); }

/* ── Modales partagées (injectées via templates.js) ──────────── */

/* Fond semi-transparent commun aux deux modales */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

/* Boîte centrale */
.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 95vw;
}

/* Variantes de largeur */
.modal-box--ind      { width: 560px; max-height: 82vh; }
.modal-box--settings { width: 420px; }

/* Variante alert-list — liste des alertes actives */
.modal-box--alert-list {
  width: 420px;
  max-height: 82vh;
}

/* Scrollbar discrète dans la liste d'alertes */
#alert-list-items::-webkit-scrollbar       { width: 4px; }
#alert-list-items::-webkit-scrollbar-track { background: transparent; }
#alert-list-items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* En-tête */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: .5px;
}

.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s;
}
.modal-close:hover { color: var(--red); border-color: transparent; }

/* Zone de recherche */
.modal-search-wrap {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Input de recherche (#ind-search) */
#ind-search {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  border-radius: 5px;
  outline: none;
  transition: border-color .15s;
}
#ind-search:focus { border-color: var(--accent); }
#ind-search::placeholder { color: var(--muted); }

/* Onglets (barre de catégories) */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar { display: none; }

/* Grille des cartes d'indicateurs */
.modal-grid {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
.modal-grid::-webkit-scrollbar       { width: 4px; }
.modal-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Pied de modal */
.modal-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--muted);
}

/* Bouton "Tout retirer" */
.modal-btn-danger {
  background: rgba(255, 61, 90, .1);
  border: 1px solid rgba(255, 61, 90, .3);
  color: var(--red);
  padding: 5px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.modal-btn-danger:hover {
  background: rgba(255, 61, 90, .2);
  border-color: var(--red);
}

/* Label de section dans la modal paramètres (ex: "Apparence") */
.modal-section-label {
  padding: 14px 18px 6px;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  flex-shrink: 0;
}

/* Grille de cartes paramètres */
.modal-settings-grid {
  padding: 0 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Onglets indicateurs (styles déjà en partie ici) ─────────── */
.ind-tab {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted); padding: 8px 14px;
  font-family: 'Space Mono', monospace;
  font-size: 10px; cursor: pointer;
  white-space: nowrap; transition: all .15s; letter-spacing: .4px;
}
.ind-tab:hover  { color: var(--text); }
.ind-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: 185px;
  border-left: 1px solid var(--border);
  background: var(--panel);
  display: flex; flex-direction: column;
  overflow: hidden; flex-shrink: 0;
}
.sidebar-title {
  padding: 9px 12px; font-size: 9px;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 1px; border-bottom: 1px solid var(--border);
}
.stats {
  padding: 12px; display: flex;
  flex-direction: column; gap: 11px;
  border-bottom: 1px solid var(--border);
}
.stat             { display: flex; flex-direction: column; gap: 2px; }
.stat-label       { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.stat-value       { font-size: 12px; }

.trades-list { flex: 1; overflow-y: auto; }
.trades-list::-webkit-scrollbar       { width: 3px; }
.trades-list::-webkit-scrollbar-thumb { background: var(--border); }

.trades-header {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 5px 12px; font-size: 9px; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.trade-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 3px 12px;
  border-bottom: 1px solid rgba(28,35,51,.4);
  animation: fadeIn .2s ease; font-size: 10px;
}
@keyframes fadeIn { from { background: rgba(0,255,136,.06) } to { background: transparent } }
.trade-row.buy  .t-price { color: var(--green); }
.trade-row.sell .t-price { color: var(--red); }
.t-price  { font-weight: 700; }
.t-qty, .t-time { color: var(--muted); text-align: right; font-size: 9px; }