/* ================================================================
   ANALYSE PAGE - Complete Refactor (Removes all inline styles)
   ================================================================ */

/* SECTION 1: KPI CARDS */
.kpi-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.kpi-compact {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border-left: 4px solid transparent;
}

.kpi-compact:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.kpi-compact.kpi-primary {
  border-left-color: var(--color-primary);
}

.kpi-compact.kpi-success {
  border-left-color: var(--color-success, #10b981);
}

.kpi-compact.kpi-info {
  border-left-color: var(--color-info, #3b82f6);
}

.kpi-compact.kpi-warning {
  border-left-color: var(--color-warning, #f59e0b);
}

.kpi-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.kpi-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* SECTION 2: DETAIL METRICS */
.detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.detail-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metric-label {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  font-weight: 600;
}

.metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* SECTION 3: CHARTS & CARDS */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.chart-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-text);
}

/* SECTION 4: TOP SECTIONS (Types, Zones, Equipments) */
.top-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Types List */
.types-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.type-item {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  padding: 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.type-header {
  display: grid;
  grid-template-columns: 14px 1fr 28px;
  align-items: center;
  gap: 0.15rem;
  padding: 0.05rem 0.1rem;
}

.rank-badge {
  background: var(--color-primary);
  color: white;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.45rem;
}

.type-name {
  font-size: 0.6rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-count {
  text-align: center;
  background: var(--color-primary);
  color: white;
  padding: 0.08rem 0.2rem;
  border-radius: 2px;
  font-size: 0.5rem;
  font-weight: 600;
}

.type-stats {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.05rem 0.1rem;
}

.stat-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 1px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
  transition: width 0.3s ease;
}

.stat-mini {
  display: flex;
  gap: 0.15rem;
  font-size: 0.48rem;
}

.mini-stat {
  background: rgba(0, 0, 0, 0.04);
  padding: 0.04rem 0.1rem;
  border-radius: 1px;
  color: var(--color-text-dim);
}

.mini-stat.high-priority {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Zones List */
.zones-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.zone-item {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  padding: 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.zone-header {
  display: grid;
  grid-template-columns: 14px 1fr 28px;
  align-items: center;
  gap: 0.15rem;
  padding: 0.05rem 0.1rem;
}

.zone-name {
  font-size: 0.6rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-count {
  text-align: center;
  background: var(--color-primary);
  color: white;
  padding: 0.08rem 0.2rem;
  border-radius: 2px;
  font-size: 0.5rem;
  font-weight: 600;
}

.zone-stats {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.05rem 0.1rem;
}

/* Simple List */
.simple-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.simple-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.1rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 2px;
  font-size: 0.6rem;
}

.simple-item .rank-badge {
  flex-shrink: 0;
}

.simple-item .label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-item .count {
  background: var(--color-primary);
  color: white;
  padding: 0.04rem 0.08rem;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.5rem;
}

/* SECTION 5: CONTEXT SECTIONS (Par étage) */
.context-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.etages-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.etage-item {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  padding: 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.etage-header {
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 0.15rem;
  padding: 0.05rem 0.1rem;
}

.etage-name {
  font-size: 0.6rem;
  font-weight: 500;
}

.etage-count {
  text-align: center;
  background: var(--color-primary);
  color: white;
  padding: 0.08rem 0.2rem;
  border-radius: 2px;
  font-size: 0.5rem;
  font-weight: 600;
}

.etage-stats {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.05rem 0.1rem;
}

/* SECTION 6: EMPTY STATE */
.empty-state {
  padding: 1rem 0;
  text-align: center;
  color: var(--color-text-dim);
  font-size: 0.9rem;
}

/* SECTION 7: STOCK ANALYSIS SECTION */
#stock-container {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-top: 1rem;
}

.table-wrap table {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: collapse;
}

.table-wrap thead {
  background: rgba(0, 0, 0, 0.05);
}

.table-wrap th {
  text-align: left;
  padding: 0.5rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

.table-wrap td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.table-wrap tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* PRINT MEDIA */
@media print {
  .kpi-section {
    grid-template-columns: repeat(4, 1fr);
  }

  .detail-metrics {
    grid-template-columns: repeat(4, 1fr);
  }

  .top-sections {
    grid-template-columns: repeat(3, 1fr);
  }

  .context-sections {
    grid-template-columns: repeat(2, 1fr);
  }

  .card,
  .chart-card {
    page-break-inside: avoid;
  }

  button {
    display: none;
  }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .analytics-page .card,
  .analytics-page .chart-card,
  .analytics-page .detail-card,
  .analytics-page .kpi-compact {
    background: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #e5e5e5 !important;
  }
  
  .analytics-page .kpi-value {
    color: #3b82f6 !important;
  }
  
  .analytics-page .kpi-compact.kpi-primary .kpi-value {
    color: #3b82f6 !important;
  }
  
  .analytics-page .kpi-compact.kpi-success .kpi-value {
    color: #22c55e !important;
  }
  
  .analytics-page .kpi-compact.kpi-info .kpi-value {
    color: #3b82f6 !important;
  }
  
  .analytics-page .kpi-compact.kpi-warning .kpi-value {
    color: #f59e0b !important;
  }
  
  .analytics-page .card h3,
  .analytics-page .metric-label,
  .analytics-page .kpi-label,
  .analytics-page .metric-value {
    color: #e5e5e5 !important;
  }
  
  .analytics-page .type-item,
  .analytics-page .zone-item,
  .analytics-page .etage-item,
  .analytics-page .simple-item {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .analytics-page .stat-bar {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .analytics-page .mini-stat {
    background: rgba(255, 255, 255, 0.05);
    color: #a0a0a0;
  }
  
  .analytics-page .table-wrap thead {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .analytics-page .table-wrap th,
  .analytics-page .table-wrap td {
    border-color: #3a3a3a;
    color: #e5e5e5;
  }
  
  .analytics-page .table-wrap tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .top-sections {
    grid-template-columns: repeat(2, 1fr);
  }

  .context-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .kpi-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .top-sections {
    grid-template-columns: 1fr;
  }

  .context-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .kpi-section {
    grid-template-columns: 1fr;
  }

  .detail-metrics {
    grid-template-columns: 1fr;
  }
}


:root { --header-height: 72px; }

.app-logo-link { display:flex; align-items:center; height: var(--header-height); padding-left:12px; }
.app-logo { height:56px; width:auto; max-width:260px; object-fit:contain; display:block; }

.app-content { padding-top: calc(var(--header-height) + 16px); }

#app-loader {
  position: fixed; inset: 0; background:#1e1e1e;
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
#app-loader img { height:72px; animation: fadePulse 1.4s ease-in-out infinite; }
@keyframes fadePulse { 0%,100%{opacity:.6} 50%{opacity:1} }

@media (max-width:768px){
  :root{ --header-height: 60px; }
  .app-logo{ height:44px; max-width:200px; }
}

/* --- Mobile robustness: keep topbar/menu clickable on analyse page --- */
@media (max-width: 900px){
  header, .main-header, .topbar, .nav-drawer, #navDrawer {
    position: relative;
    z-index: 7000 !important;
    pointer-events: auto !important;
  }
  /* Avoid full-page panels/overlays blocking header taps */
  .analyse-page, .page-analyse, .analyse-container, main, .content {
    position: relative;
    z-index: 1;
  }
  .overlay, .backdrop, .modal-backdrop, .analyse-backdrop {
    z-index: 6000 !important;
  }
}