/* ============================================================================
 * pages/insights.css — Insights (Ordres + Liste) — CIBLE PROPRE
 * - Styles strictement scoppés à la page Insights
 * - Les tokens (couleurs, radius, spacing...) viennent de tokens.css
 * ========================================================================== */

/* Page wrapper */
.page-insights .insights-page{
  display:block;
}

/* Info panel (tab: orders) */
.page-insights .orders-info{
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--gradient-surface);
}

/* Carousel */
.page-insights .orders-carousel{
  display:flex;
  align-items:stretch;
  gap: .5rem;
  margin-top: .75rem;
}

.page-insights .orders-carousel .nav{
  width: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: var(--color-text);
  cursor: pointer;
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.page-insights .orders-carousel .nav:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--border-2);
  transform: translateY(-1px);
}

.page-insights .orders-carousel .viewport{
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}

.page-insights .orders-carousel .viewport::-webkit-scrollbar{
  height: 10px;
}
.page-insights .orders-carousel .viewport::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}
.page-insights .orders-carousel .viewport::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}

.page-insights .orders-carousel .track{
  display:flex;
  gap: .75rem;
  padding: .25rem;
  min-height: 100%;
}

/* Order card (rendered by insights.app.js) */
.page-insights .order-card{
  scroll-snap-align: start;
  min-width: 340px;
  max-width: 420px;
  width: 92%;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.page-insights .order-card__head{
  display:flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem .65rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.page-insights .order-card__title{
  display:flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.page-insights .order-card__title .ticker{
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 1.05rem;
}
.page-insights .order-card__title .name{
  font-size: .9rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.page-insights .order-card__meta{
  display:flex;
  flex-direction: column;
  gap: .25rem;
  align-items: flex-end;
  text-align: right;
  color: var(--text-muted);
  font-size: .85rem;
}

.page-insights .order-card__body{
  padding: .75rem 1rem;
}

.page-insights .order-pills{
  display:flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .6rem;
}

.page-insights .order-pill{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  padding: .22rem .55rem;
  font-size: .78rem;
  color: var(--color-text);
  white-space: nowrap;
}

.page-insights .order-pill strong{
  font-weight: 700;
}

.page-insights .order-mini-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}

.page-insights .order-mini-table th,
.page-insights .order-mini-table td{
  padding: .45rem .55rem;
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.page-insights .order-mini-table th{
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  background: rgba(255,255,255,.03);
}

.page-insights .order-mini-table td{
  color: var(--color-text);
}

.page-insights .order-mini-table tr:last-child td{
  border-bottom: none;
}

/* Footer inputs */
.page-insights .order-card__foot{
  padding: .75rem 1rem 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.page-insights .order-actions{
  display:flex;
  gap: .5rem;
  align-items:center;
  flex-wrap: wrap;
}

.page-insights .order-actions input[type="number"]{
  width: 130px;
  padding: .45rem .55rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--color-text);
}

.page-insights .order-actions input[type="number"]::placeholder{
  color: rgba(233,239,255,.55);
}

.page-insights .order-actions .btn{
  padding: .45rem .7rem;
}

.page-insights .order-tags{
  margin-top: .6rem;
  color: var(--text-muted);
  font-size: .82rem;
}

/* Instrument strip */
.page-insights .orders-instrument-strip{
  display:flex;
  gap: .5rem;
  margin-top: .75rem;
  padding-bottom: .25rem;
  overflow-x: auto;
}

.page-insights .orders-instrument-strip::-webkit-scrollbar{
  height: 10px;
}
.page-insights .orders-instrument-strip::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}

.page-insights .orders-ticker-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--color-text);
  border-radius: 999px;
  padding: .35rem .65rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.page-insights .orders-ticker-btn:hover{
  border-color: var(--border-2);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.page-insights .orders-ticker-btn.active{
  border-color: rgba(79,156,255,.45);
  background: rgba(79,156,255,.12);
}

/* Filters (tab: list) */
.page-insights .filters-v2.sticky{
  position: sticky;
  top: calc(var(--header-h) + .75rem);
  z-index: 5;
}

.page-insights .filters-v2{
  margin-top: .75rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(8px);
}

.page-insights .filters-row{
  display:flex;
  gap: .6rem;
  align-items: end;
  flex-wrap: wrap;
}

.page-insights .filter-group{
  display:flex;
  gap: .4rem;
  align-items: center;
}

.page-insights .filter-group label{
  color: var(--text-muted);
  font-size: .85rem;
}

.page-insights .filter-group input,
.page-insights .filter-group select{
  height: 36px;
  padding: .42rem .55rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--color-text);
}

.page-insights .filter-group select{
  cursor:pointer;
}

.page-insights .custom-range{
  display:inline-flex;
  gap: .35rem;
  align-items: center;
  padding: .1rem .1rem;
}

.page-insights .custom-range input[type="date"]{
  width: 145px;
}

.page-insights .icon-btn{
  height: 36px;
  width: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--color-text);
  cursor: pointer;
}

/* Table container */
.page-insights .insights-table-container{
  margin-top: .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.page-insights .insights-table{
  width: 100%;
}

.page-insights .insights-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
}

.page-insights .insights-table td{
  vertical-align: top;
}

.page-insights .insights-table td.mono{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .86rem;
}

/* Responsive */
@media (max-width: 920px){
  .page-insights .order-card{ min-width: 300px; }
  .page-insights .filters-v2.sticky{ top: calc(var(--header-h) + .5rem); }
}

@media (max-width: 720px){
  .page-insights .orders-carousel .nav{ width: 40px; }
  .page-insights .custom-range input[type="date"]{ width: 132px; }
}