/* dashboard.css */

/* Timeline chart */
/* dashboard.css */

/* --- Line chart area --- */

/* --- Area chart --- */
/* --- Traffic heat-style area chart --- */

.dashboard-area-wrapper {
    margin-top: 10px;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;       /* slate-200 */
    padding: 8px;
    background-color: #f9fafb;
    height: 190px;                    /* controls chart height */
  }
  
  #traffic-area-chart {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  /* Legend chips under chart */
  .dashboard-legend-block {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    display: inline-block;
  }
  
  .dashboard-legend-entry {
    background-color: #f59e0b;        /* amber-500 */
  }
  
  .dashboard-legend-exit {
    background-color: #ea580c;        /* orange-600 */
  }
  
  /* --- keep your utilisation donut styles below here --- */
  
  .dashboard-utilisation {
    font-size: 12px;
  }
  
  /* ... (the donut / dot styles you already had) ... */
  
  
  /* --- Utilisation styles from before (keep them) --- */
  
  .dashboard-utilisation {
    font-size: 12px;
  }
  
  .dashboard-donut {
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    background: conic-gradient(
      #22c55e 0deg 260deg,
      #e5e7eb 260deg 360deg
    ); /* ~72% */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .dashboard-donut-inner {
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
  }
  
  .dashboard-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    display: inline-block;
  }
  
  .dashboard-dot-occupied {
    background-color: #22c55e;
  }
  
  .dashboard-dot-free {
    background-color: #e5e7eb;
  }
  
  .dashboard-dot-reserved {
    background-color: #f97316;
  }
  
  /* Utilisation donut + dots */
  .dashboard-utilisation {
    font-size: 12px;
  }
  
  .dashboard-donut {
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    background: conic-gradient(
      #22c55e 0deg 260deg,
      #e5e7eb 260deg 360deg
    ); /* faked 72% utilisation */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .dashboard-donut-inner {
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
  }
  
  .dashboard-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    display: inline-block;
  }
  
  .dashboard-dot-occupied {
    background-color: #22c55e;
  }
  
  .dashboard-dot-free {
    background-color: #e5e7eb;
  }
  
  .dashboard-dot-reserved {
    background-color: #f97316;
  }