/* --- UNIVERSAL RESET --- */
html {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  box-sizing: inherit;
  max-width: 100%;
}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.5;
}

/* --- IMAGES, VIDEOS, IFRAME --- */
img, video, iframe, canvas {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* --- TABLES --- */
table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

/* --- FLEX & GRID CONTAINERS --- */
.responsive-flex, .responsive-grid, .row, .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.responsive-flex > *, .responsive-grid > * {
  flex: 1 1 300px;
  min-width: 0; /* Important for charts & panels */
}

/* --- SIDE PANELS --- */
.side-panel {
  min-width: 250px;
  flex: 1 1 250px;
}
@media (max-width: 768px) {
  .side-panel {
    flex: 1 1 100%;
  }
}

/* --- TEXT --- */
h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 4vw, 2rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); }
p, li, td, th { font-size: clamp(0.9rem, 2.5vw, 1.1rem); }

/* --- INPUTS & BUTTONS --- */
button, input, select, textarea {
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 100%;
}

/* --- CONTAINING CHARTS AND LARGE ELEMENTS --- */
.chart-container, .dashboard-widget {
  max-width: 100%;
  overflow-x: auto;
  flex: 1 1 100%;
  min-width: 0;
}

/* --- COLLAPSING MULTI-COLUMN ON MOBILE --- */
@media (max-width: 768px) {
  nav ul, .menu, .sidebar, .grid, .row, .responsive-flex, .responsive-grid {
    flex-direction: column !important;
    width: 100% !important;
  }
  .container, .content {
    padding: 1rem !important;
  }
}