/* === graphique.css (extracted from graphique.html) === */
body {
  font-family: var(--kfk-font-family, 'Inter', sans-serif);
  background-color: var(--kfk-background, #f9fafb);
  color: var(--kfk-text, #1F2937);
}
.card-shadow { box-shadow: var(--kfk-shadow-soft, 0 4px 6px rgba(0,0,0,.05)); }
.positive { color: var(--kfk-success, #059669); }
.negative { color: var(--kfk-danger, #dc2626); }

/* Table UI comme portefeuille */
.table-wrap { border:1px solid #eef2f7; border-radius: .875rem; overflow:hidden; background:#fff; }
.table-scroll { overflow:auto; }
table thead th { position: sticky; top:0; background:#F9FAFB; z-index:1; white-space:nowrap; font-weight:600; font-size:.75rem; letter-spacing:.02em; }
table tbody tr:nth-child(even) { background:#FCFCFD; }
table td, table th { border-bottom:1px solid #f0f3f7; padding:.75rem .875rem; }
.tabular { font-variant-numeric: tabular-nums; letter-spacing:.2px; }

/* --- Indicator cards: unified UI/UX --- */
.ind-card{background:#fff;border-radius:0.75rem;border:1px solid #f3f4f6;padding:1rem;box-shadow:0 4px 6px rgba(0,0,0,.05)}
.ind-head{display:flex;align-items:center;justify-content:space-between}
.ind-title{font-size:.875rem;font-weight:600;color:#1f2937}
.ind-sub{font-size:.75rem;color:#6b7280}
.kv-main{margin-top:.5rem;font-size:1.5rem;font-weight:700}
.ind-badges .badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:9999px;background:#f3f4f6;color:#374151;font-size:.75rem}
.ind-foot{font-size:.75rem;color:#6b7280;margin-top:.25rem}
.ind-chart{background:linear-gradient(180deg,rgba(2,6,23,.03),rgba(2,6,23,.06));border-radius:.5rem}
.ind-chart canvas{display:block;width:100% !important;height:100% !important}

/* Indicator values: always single line, responsive font size, no wrapping */
.indicator-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  font-size: clamp(0.6rem, 0.85vw, 0.8rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile bottom nav */
.mobile-bottom-nav { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
.mobile-bottom-nav .tab-btn[aria-current="page"] .tab-label,
.mobile-bottom-nav .tab-btn[aria-current="page"] .tab-icon { color: var(--kfk-primary, #07A88D); }

/* Tooltip (moved from inline style) */
.volume-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #1f2937;
  max-width: 240px;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
@media (max-width: 768px) {
  .volume-tooltip {
    font-size: 12px;
    padding: 10px;
    max-width: 200px;
  }
}

.history-range-btn {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background-color: var(--kfk-surface, #ffffff);
  color: var(--kfk-text, #374151);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.history-range-btn:hover,
.history-range-btn:focus-visible {
  border-color: var(--kfk-primary, #07A88D);
  color: var(--kfk-primary, #07A88D);
  outline: none;
}

.range-toggle button[aria-pressed="true"] {
  border-color: var(--kfk-primary, #07A88D);
  color: var(--kfk-primary, #07A88D);
  background-color: color-mix(in srgb, var(--kfk-primary, #07A88D) 12%, transparent);
  box-shadow: 0 6px 12px color-mix(in srgb, var(--kfk-primary, #07A88D) 22%, transparent);
}

.chart-type-toggle {
  display: inline-flex;
  align-items: center;
  background-color: #f3f4f6;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  padding: 4px;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.2);
}

.chart-type-toggle button {
  border: none;
  background: transparent;
  color: #374151;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 9999px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.chart-type-toggle button:hover,
.chart-type-toggle button:focus-visible {
  background: rgba(255, 255, 255, 0.85);
  outline: none;
}

.chart-type-toggle button[aria-pressed="true"] {
  background: var(--kfk-primary, #07A88D);
  color: var(--kfk-surface, #ffffff);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--kfk-primary, #07A88D) 30%, transparent);
}

.timeframe-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 9999px;
  background-color: #f3f4f6;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.25);
}

.timeframe-toggle .timeframe-btn {
  border: none;
  background: transparent;
  color: var(--kfk-text, #1f2937);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 9999px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.timeframe-toggle .timeframe-btn:hover,
.timeframe-toggle .timeframe-btn:focus-visible {
  background: rgba(255, 255, 255, 0.85);
  outline: none;
}

.timeframe-toggle .timeframe-btn[aria-pressed="true"] {
  background: var(--kfk-primary, #07A88D);
  color: var(--kfk-surface, #ffffff);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--kfk-primary, #07A88D) 30%, transparent);
}

/* ============================================
   Chart Loading & Transition Animations
   ============================================ */

.chart-loading-overlay {
  position: fixed;
  top: 4rem; /* 64px - below header */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(249, 250, 251, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30; /* Below sidebar (z-50), header (z-40), and mobile nav (z-50) */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Adjust for mobile nav at bottom on small screens */
@media (max-width: 767px) {
  .chart-loading-overlay {
    bottom: 4rem; /* Space for mobile bottom nav */
  }
}

/* Adjust left offset when sidebar is visible on desktop */
@media (min-width: 768px) {
  body:not(.sidebar-collapsed) .chart-loading-overlay {
    left: 16rem; /* 256px = w-64 sidebar width */
  }
}

.chart-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
}

/* Spinner Animation */
.chart-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: var(--kfk-primary, #07A88D);
  border-radius: 50%;
  animation: chart-spin 0.8s linear infinite;
}

@keyframes chart-spin {
  to { transform: rotate(360deg); }
}

/* Loading Text */
.chart-loading-text {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
  margin-bottom: 0.5rem;
}

.chart-loading-subtext {
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b7280;
  text-align: center;
  animation: chart-pulse 1.5s ease-in-out infinite;
}

@keyframes chart-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Skeleton Loader for Chart */
.chart-loading-skeleton {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  width: 200px;
  padding: 1rem;
}

.skeleton-bar {
  flex: 1;
  background: linear-gradient(
    90deg,
    #e5e7eb 0%,
    #f3f4f6 50%,
    #e5e7eb 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-bar:nth-child(1) { height: 60%; }
.skeleton-bar:nth-child(2) { height: 85%; }
.skeleton-bar:nth-child(3) { height: 45%; }
.skeleton-bar:nth-child(4) { height: 70%; }
.skeleton-bar:nth-child(5) { height: 55%; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Chart Fade Transitions */
canvas {
  transition: opacity 0.2s ease-in-out;
}

/* Smooth state transitions */
.chart-transitioning {
  pointer-events: none;
  opacity: 0.5;
}