<!-- HTML Layout Structure -->
<div class="dashboard-container layout-split">
  <header class="dashboard-header">
    <div class="search-wrap"></div>
    <div class="user-avatar"></div>
  </header>
  <div class="dashboard-workspace">
    <aside class="dashboard-sidebar">
      <div class="nav-item active"></div>
      <div class="nav-item"></div>
    </aside>
    <main class="dashboard-main">
      <div class="grid-card-3"></div>
    </main>
  </div>
</div>

/* Responsive Layout Matrix CSS */
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #090d16;
}
.dashboard-workspace {
  display: flex;
  flex: 1;
}
/* Split view vs compact board triggers */
.layout-split .dashboard-sidebar { width: 240px; }
.layout-wide .dashboard-sidebar { width: 70px; }
.layout-glass .dashboard-sidebar {
  margin: 15px;
  border-radius: 12px;
  backdrop-filter: blur(15px);
}

<!-- HTML SVG Vector Charts -->
<div class="analytics-panel">
  <div class="area-chart">
    <svg viewBox="0 0 300 100">
      <path class="gradient-area" fill="url(#gradient)" d="..."></path>
      <path class="line-stroke" stroke="#eb6835" d="..."></path>
    </svg>
  </div>
  <div class="radial-metric">
    <svg viewBox="0 0 36 36">
      <path stroke-dasharray="85, 100" class="ring-fill"></path>
    </svg>
  </div>
</div>

/* SVG Telemetry Dashboard CSS */
.circular-chart-svg {
  width: 70px;
  height: 70px;
}
.circular-chart-svg .circle {
  fill: none;
  stroke: #7b61ff;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.col-bar {
  background: #eb6835;
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease-out;
}

<!-- HTML Sidebars -->
<!-- 1: Compact Collapsible Sidebar -->
<div class="mini-sidebar collapsed">
  <div class="brand"><span>⬡</span><h2>UIverse</h2></div>
  <ul class="menu">
    <li class="active"><a href="#"><i class="fa-solid fa-chart-line"></i><span>Overview</span></a></li>
  </ul>
  <button class="collapse-toggle"><i class="fa-solid fa-chevron-left"></i></button>
</div>

/* CSS Collapsible transitions */
.mini-sidebar {
  width: 200px;
  background: #0d121f;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}
.mini-sidebar.collapsed {
  width: 65px;
}
.mini-sidebar.collapsed span {
  display: none;
}
.glass-sidebar-demo {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

<!-- HTML Spotlight KPI Cards -->
<div class="kpi-spotlight-card" onmousemove="spotlight(event, this)">
  <div class="spotlight-glow"></div>
  <div class="card-head">
    <span>Daily Operations</span>
    <span class="trend up">+14.2%</span>
  </div>
  <h3 class="value">14,240</h3>
  <svg class="sparkline" viewBox="0 0 120 30">
    <path stroke="#10b981" d="..." fill="none"></path>
  </svg>
</div>

/* Spotlight Glow effect CSS */
.kpi-spotlight-card {
  position: relative;
  background: #0b0f19;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  padding: 20px;
}
.spotlight-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 80px at var(--x, 0px) var(--y, 0px), rgba(235, 104, 53, 0.15) 0%, transparent 80%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.kpi-spotlight-card:hover .spotlight-glow {
  opacity: 1;
}

<!-- HTML Directory Grid -->
<div class="directory-widget">
  <input type="text" id="search" placeholder="Search...">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox"></th>
        <th>User Profile</th>
        <th>Clearance</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td><img src="avatar.jpg"><strong>Marcus V.</strong></td>
        <td><span class="role">Lead</span></td>
      </tr>
    </tbody>
  </table>
</div>

/* High-Contrast Table CSS */
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background: #111522;
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
}
tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.3s;
}
tr:hover {
  background: rgba(255, 255, 255, 0.01);
}