/* =============================================================
   TradeWise Pro Tools — tools.css
   ============================================================= */

:root {
  --tw-gold:    #C9A84C;
  --tw-gold-l:  #E8C96A;
  --tw-dark:    #0A0D12;
  --tw-dark2:   #111620;
  --tw-dark3:   #181E2B;
  --tw-dark4:   #1E2636;
  --tw-border:  #252D3E;
  --tw-text:    #D4DBE8;
  --tw-muted:   #7A8499;
  --tw-green:   #2DD885;
  --tw-red:     #FF5A70;
  --tw-blue:    #3D8EF8;
  --tw-radius:  12px;
  --tw-font-h:  'Playfair Display', Georgia, serif;
  --tw-font-b:  'Source Sans 3', 'Helvetica Neue', sans-serif;
  --tw-font-m:  'JetBrains Mono', 'Courier New', monospace;
}

/* ============ SHARED WIDGET STYLES ============ */
.tw-market-widget,
.tw-calculator,
.tw-economic-calendar {
  background: var(--tw-dark3);
  border: 1px solid var(--tw-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  font-family: var(--tw-font-b);
}

.tw-widget-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--tw-border);
  background: rgba(255,255,255,.02);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.tw-widget-title {
  font-family: var(--tw-font-h);
  font-size: 18px; font-weight: 800;
  color: #fff; margin: 0;
  display: flex; align-items: center; gap: 10px;
}

.tw-widget-subtitle {
  color: var(--tw-muted); font-size: 13px;
  margin: 0; margin-top: 4px;
  width: 100%;
}

/* Live dot */
.tw-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--tw-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--tw-green);
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; box-shadow: 0 0 6px var(--tw-green); }
  50%      { opacity: .6; box-shadow: 0 0 16px var(--tw-green); }
}

/* ============ MARKET TABLE ============ */
.tw-widget-controls {
  display: flex; gap: 6px;
}
.tw-filter-btn {
  background: var(--tw-dark4); color: var(--tw-muted);
  border: 1px solid var(--tw-border); border-radius: 8px;
  padding: 5px 12px; font-size: 12px; cursor: pointer;
  font-family: var(--tw-font-b); transition: all .2s;
}
.tw-filter-btn:hover, .tw-filter-btn.active {
  background: var(--tw-gold); border-color: var(--tw-gold);
  color: var(--tw-dark); font-weight: 700;
}

.tw-market-table-wrap { overflow-x: auto; }

.tw-market-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--tw-font-b);
}
.tw-market-table thead th {
  padding: 12px 16px;
  text-align: left; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--tw-muted); font-weight: 700;
  border-bottom: 1px solid var(--tw-border);
  background: rgba(0,0,0,.15);
}
.tw-market-table tbody tr {
  border-bottom: 1px solid rgba(37,45,62,.5);
  transition: background .15s;
}
.tw-market-table tbody tr:last-child { border-bottom: none; }
.tw-market-table tbody tr:hover { background: rgba(255,255,255,.025); }

.tw-market-table td {
  padding: 13px 16px; vertical-align: middle;
}

.tw-asset-info { display: flex; align-items: center; gap: 10px; }
.tw-asset-icon {
  width: 36px; height: 36px;
  background: var(--tw-dark4);
  border-radius: 50%; border: 1px solid var(--tw-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--tw-gold);
  font-family: var(--tw-font-m); flex-shrink: 0;
}
.tw-asset-sym {
  font-weight: 700; color: #fff; font-size: 14px; display: block;
}
.tw-asset-cat {
  font-size: 10px; color: var(--tw-muted);
  text-transform: uppercase; letter-spacing: .5px;
}

.tw-price-val {
  font-family: var(--tw-font-m);
  font-size: 15px; font-weight: 700; color: #fff;
}

.tw-change-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  font-family: var(--tw-font-m); font-size: 12px; font-weight: 700;
}
.tw-change-badge.up { background: rgba(45,216,133,.12); color: var(--tw-green); }
.tw-change-badge.dn { background: rgba(255,90,112,.12);  color: var(--tw-red);   }

.tw-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.tw-sparkline-bar {
  width: 5px; border-radius: 2px 2px 0 0;
  transition: height .3s ease;
  min-height: 4px;
}
.tw-sparkline-bar.up { background: var(--tw-green); opacity: .7; }
.tw-sparkline-bar.dn { background: var(--tw-red);   opacity: .7; }

.tw-market-footer {
  display: flex; justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--tw-border);
  font-size: 11px; color: var(--tw-muted);
  font-family: var(--tw-font-m);
  background: rgba(0,0,0,.1);
  flex-wrap: wrap; gap: 8px;
}

/* Loading */
.tw-loading-row td { text-align: center; padding: 40px !important; }
.tw-loader { display: flex; align-items: center; gap: 12px; justify-content: center; color: var(--tw-muted); }
.tw-spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--tw-border);
  border-top-color: var(--tw-gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tw-spinner-sm {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--tw-border);
  border-top-color: var(--tw-gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ============ CALCULATRICE ============ */
.tw-calc-body {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0;
}
@media(max-width:768px) {
  .tw-calc-body { grid-template-columns: 1fr; }
}

.tw-calc-inputs {
  padding: 24px;
  border-right: 1px solid var(--tw-border);
  display: flex; flex-direction: column; gap: 18px;
}
@media(max-width:768px) {
  .tw-calc-inputs { border-right: none; border-bottom: 1px solid var(--tw-border); }
}

.tw-input-group { display: flex; flex-direction: column; gap: 7px; }
.tw-input-group label {
  font-size: 13px; font-weight: 700; color: var(--tw-text);
  letter-spacing: .2px;
}
.tw-input-wrap { position: relative; display: flex; align-items: center; }
.tw-input-wrap input,
.tw-calc-inputs select {
  width: 100%;
  background: var(--tw-dark4);
  border: 1px solid var(--tw-border);
  color: var(--tw-text);
  padding: 11px 14px 11px 38px;
  border-radius: 10px;
  font-size: 15px; font-family: var(--tw-font-m); font-weight: 600;
  outline: none; transition: border-color .2s;
  -moz-appearance: textfield;
}
.tw-input-wrap input::-webkit-outer-spin-button,
.tw-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tw-input-wrap input:focus,
.tw-calc-inputs select:focus { border-color: var(--tw-gold); }
.tw-input-prefix {
  position: absolute; left: 14px;
  color: var(--tw-gold); font-weight: 700;
  font-family: var(--tw-font-m); font-size: 14px; z-index: 1;
}
.tw-input-suffix {
  position: absolute; right: 14px;
  color: var(--tw-gold); font-weight: 700;
  font-family: var(--tw-font-m); font-size: 14px;
}
.tw-input-wrap input[type="number"] { padding-right: 40px; }
.tw-calc-inputs select {
  padding-left: 14px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8499' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.tw-rate-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tw-preset {
  background: var(--tw-dark4); color: var(--tw-muted);
  border: 1px solid var(--tw-border); border-radius: 6px;
  padding: 4px 10px; font-size: 11px; cursor: pointer;
  font-family: var(--tw-font-b); transition: all .2s;
}
.tw-preset:hover, .tw-preset.active {
  border-color: var(--tw-gold); color: var(--tw-gold);
  background: rgba(201,168,76,.08);
}

.tw-calc-submit {
  background: var(--tw-gold); color: var(--tw-dark);
  border: none; padding: 13px 20px; border-radius: 10px;
  font-size: 15px; font-weight: 800; cursor: pointer;
  font-family: var(--tw-font-b); transition: all .25s;
  letter-spacing: .3px; margin-top: 4px;
}
.tw-calc-submit:hover {
  background: var(--tw-gold-l);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,.3);
}

/* Résultats */
.tw-calc-results {
  padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}

.tw-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media(max-width:500px) { .tw-results-grid { grid-template-columns: 1fr 1fr; } }

.tw-result-card {
  background: var(--tw-dark4);
  border: 1px solid var(--tw-border);
  border-radius: 12px; padding: 16px;
  text-align: center; position: relative;
  transition: border-color .2s, transform .2s;
}
.tw-result-card:hover { border-color: var(--tw-gold); transform: translateY(-2px); }
.tw-result-card.highlighted {
  border-color: var(--tw-gold);
  background: rgba(201,168,76,.06);
}
.tw-result-card.gold {
  background: linear-gradient(135deg, rgba(201,168,76,.08), rgba(201,168,76,.03));
  border-color: rgba(201,168,76,.3);
}
.tw-result-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--tw-gold); color: var(--tw-dark);
  font-size: 10px; font-weight: 800; padding: 3px 10px;
  border-radius: 10px; letter-spacing: .5px; text-transform: uppercase;
  white-space: nowrap;
}
.tw-result-period {
  font-size: 12px; font-weight: 700; color: var(--tw-muted);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.tw-result-total {
  font-family: var(--tw-font-m); font-size: 22px; font-weight: 800;
  color: #fff; margin-bottom: 6px; line-height: 1;
}
.tw-result-profit {
  font-family: var(--tw-font-m); font-size: 13px;
  color: var(--tw-green); font-weight: 600;
}
.tw-result-roi {
  font-size: 11px; color: var(--tw-muted);
  font-family: var(--tw-font-m); margin-top: 4px;
}

/* Monthly table */
.tw-table-title {
  font-family: var(--tw-font-h); font-size: 16px;
  color: #fff; font-weight: 700; margin-bottom: 12px;
}
.tw-table-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid var(--tw-border); }
.tw-monthly-table { width: 100%; border-collapse: collapse; }
.tw-monthly-table th {
  background: rgba(0,0,0,.2);
  padding: 10px 12px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--tw-muted); font-weight: 700;
  text-align: right; white-space: nowrap;
}
.tw-monthly-table th:first-child { text-align: center; }
.tw-monthly-table td {
  padding: 9px 12px; font-family: var(--tw-font-m); font-size: 12px;
  color: var(--tw-muted); border-top: 1px solid rgba(37,45,62,.5);
  text-align: right;
}
.tw-monthly-table td:first-child { text-align: center; color: var(--tw-gold); font-weight: 700; }
.tw-monthly-table td.profit { color: var(--tw-green); }
.tw-monthly-table tr:hover td { background: rgba(255,255,255,.02); }

/* Chart */
.tw-chart-wrap { }
canvas#tw-gain-chart { max-width: 100%; display: block; }

.tw-disclaimer-calc {
  background: rgba(255,90,112,.05);
  border: 1px solid rgba(255,90,112,.15);
  border-radius: 8px; padding: 12px 14px;
  font-size: 11px; color: var(--tw-muted); line-height: 1.6;
}

/* ============ CALENDRIER ÉCONOMIQUE ============ */
.tw-calendar-wrap {
  padding: 0;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
.tw-calendar-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--tw-border);
  font-size: 12px; align-items: center;
  background: rgba(0,0,0,.1);
}
.tw-impact { display: flex; align-items: center; gap: 5px; font-family: var(--tw-font-m); }
.tw-impact.high   { color: #ff5a70; }
.tw-impact.medium { color: #f59e0b; }
.tw-impact.low    { color: #2dd885; }
.tw-calendar-credit { margin-left: auto; color: var(--tw-muted); font-size: 11px; }

/* ============ LIVE TICKER BAR ============ */
.tw-live-ticker-bar {
  background: var(--tw-dark2);
  border: 1px solid var(--tw-border);
  border-radius: 10px;
  padding: 8px 16px;
  overflow: hidden;
  font-family: var(--tw-font-m);
  font-size: 12px;
  margin-bottom: 24px;
}
.tw-ticker-loading {
  display: flex; align-items: center; gap: 8px;
  color: var(--tw-muted);
}
.tw-ticker-scroll {
  display: flex; gap: 32px;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
}
.tw-ticker-scroll:hover { animation-play-state: paused; }
.tw-ticker-item-live {
  display: inline-flex; align-items: center; gap: 8px;
}
.tw-ticker-item-live .sym { color: #fff; font-weight: 700; }
.tw-ticker-item-live .val-up { color: var(--tw-green); }
.tw-ticker-item-live .val-dn { color: var(--tw-red);   }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ RESPONSIVE ============ */
@media(max-width: 600px) {
  .tw-widget-header { flex-direction: column; align-items: flex-start; }
  .tw-market-table thead th:last-child,
  .tw-market-table td:last-child { display: none; }
  .tw-results-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tw-result-total { font-size: 17px; }
  .tw-calc-inputs, .tw-calc-results { padding: 16px; }
}