/* ========================================
   STATS GRID
   ======================================== */

/* ========================================
   BASIC STAT CARD STYLES
   ======================================== */
.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.stat-card--big .stat-value {
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
}

/* ========================================
   HOME PAGE STATS
   ======================================== */
.home-stats .stats-grid {
  margin-bottom: 0;
}

/* ========================================
   STATS HEADER
   ======================================== */
.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.stats-more {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 700;
}

/* ========================================
   STATS GRID LAYOUT
   ======================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 80px;
  overflow: visible;
}

.cmporto-home .stats-grid .stat--datasets {
  --homepage-stats-datasets-color: #000F9F;
  background: var(--homepage-stats-datasets-color);
  color: var(--cf-white);
}

.cmporto-home .stats-grid .stat--activity,
.cmporto-home .stats-grid .stat--categories,
.cmporto-home .stats-grid .stat--orgs {
  --homepage-stats-datasets-color: #000F9F;
  background: var(--homepage-stats-datasets-color);
  color: var(--cf-white);
}

.cmporto-home .stats-grid .stat--activity .stat-label,
.cmporto-home .stats-grid .stat--categories .stat-label,
.cmporto-home .stats-grid .stat--orgs .stat-label,
.cmporto-home .stats-grid .stat--activity .stat-help,
.cmporto-home .stats-grid .stat--categories .stat-help,
.cmporto-home .stats-grid .stat--orgs .stat-help,
.cmporto-home .stats-grid .stat--activity .stat-value,
.cmporto-home .stats-grid .stat--categories .stat-value,
.cmporto-home .stats-grid .stat--orgs .stat-value {
  color: var(--cf-white);
}

/* ========================================
   GRID COLUMN SPANS FOR DIFFERENT STAT TYPES
   ======================================== */
.stat--datasets {
  --hero-datasets-color: #000F9F;
  grid-column: span 4;
  background: var(--hero-datasets-color);
  color: var(--cf-white);
}

.stat--activity {
  grid-column: span 8;
}

.stat--categories {
  grid-column: span 4;
}

.stat--categories-org {
  grid-column: span 4;
}

/* ========================================
   GENERAL MOBILE RESPONSIVENESS
   ======================================== */
@media (max-width: 1100px) {
  .stats-grid .stat--datasets,
  .stats-grid .stat--views,
  .stats-grid .stat--resources,
  .stats-grid .stat--activity,
  .stats-grid .stat--categories,
  .stats-grid .stat--orgs,
  .stats-grid .stat--dev-open,
  .stats-grid .stat--distribution {
    grid-column: span 12 !important;
  }

  .stats-grid[data-org] .stat--datasets,
  .stats-grid[data-org] .stat--categories,
  .stats-grid[data-org] .stat--views,
  .stats-grid[data-org] .stat--resources,
  .stats-grid[data-org] .stat--activity {
    grid-row: unset !important;
    height: auto !important;
  }

  .stats-grid[data-user] .stat--datasets,
  .stats-grid[data-user] .stat--views,
  .stats-grid[data-user] .stat--resources,
  .stats-grid[data-user] .stat--activity,
  .stats-grid[data-user] .stat--dev-open {
    grid-row: unset !important;
    height: auto !important;
  }

  .stats-grid .stat-card { height: auto; min-height: 260px; }

  .stats-grid .stat--activity,
  .stats-grid .stat--orgs { min-height: 320px; }

  .stat-value { font-size: 72px; }
}

/* ========================================
   ORGANIZATION PAGE STATS LAYOUT (3+2)
   ======================================== */
.stats-grid[data-org] .stat--datasets      { grid-column: 1 / span 4; grid-row: 1; }
.stats-grid[data-org] .stat--categories    { grid-column: 5 / span 4; grid-row: 1; }
.stats-grid[data-org] .stat--views         { grid-column: 9 / span 4; grid-row: 1; }
.stats-grid[data-org] .stat--resources     { grid-column: 1 / span 4; grid-row: 2; }
.stats-grid[data-org] .stat--activity      { grid-column: 5 / span 8; grid-row: 2; }


.stats-grid[data-org] .stat--dev-open {
  display: none;
}

.stats-grid[data-org] .stat--activity {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  min-width: 0;
  overflow: hidden;
}

.stats-grid[data-org] .stat--activity canvas {
  flex: 1 1 0;
  min-height: 220px;
  margin-top: 0 !important;
}

.stats-grid[data-org] .stat--categories {
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.stats-grid[data-org] .stat--categories canvas {
  flex: 1 1 0;
  min-height: 180px;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
}

@media (max-width: 1100px) {
  .stats-grid[data-org] .stat--datasets,
  .stats-grid[data-org] .stat--categories,
  .stats-grid[data-org] .stat--views,
  .stats-grid[data-org] .stat--resources,
  .stats-grid[data-org] .stat--activity {
    grid-column: span 12 !important;
    grid-row: auto !important;
  }
}

/* ========================================
   USER PROFILE STATS LAYOUT (3+2+1)
   ======================================== */
.stats-grid[data-user] .stat--datasets      { grid-column: 1 / span 4; grid-row: 1; }
.stats-grid[data-user] .stat--views         { grid-column: 5 / span 4; grid-row: 1; }
.stats-grid[data-user] .stat--resources     { grid-column: 9 / span 4; grid-row: 1; }
.stats-grid[data-user] .stat--activity      { grid-column: 1 / span 8; grid-row: 2; }
.stats-grid[data-user] .stat--dev-open      { grid-column: 9 / span 4; grid-row: 2; }

.stats-grid[data-user] .stat--views,
.stats-grid[data-user] .stat--resources,
.stats-grid[data-user] .stat--dev-open {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  overflow: hidden;
}
.stats-grid[data-user] .stat--views canvas,
.stats-grid[data-user] .stat--resources canvas,
.stats-grid[data-user] .stat--dev-open canvas {
  flex: 1 1 0;
  min-height: 130px;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 8px;
}

.stats-grid[data-user] .stat--activity {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.stats-grid[data-user] .stat--activity canvas {
  flex: 1 1 0;
  min-height: 220px;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
}
.stats-grid[data-user] .stat--categories {
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.stats-grid[data-user] .stat--categories canvas {
  flex: 1 1 0;
  min-height: 180px;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
}
.stats-grid[data-user] .stat--dev-open {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .stats-grid[data-user] .stat--datasets,
  .stats-grid[data-user] .stat--categories,
  .stats-grid[data-user] .stat--views,
  .stats-grid[data-user] .stat--resources,
  .stats-grid[data-user] .stat--activity,
  .stats-grid[data-user] .stat--dev-open {
    grid-column: span 12 !important;
    grid-row: auto !important;
  }
}


.stat--orgs {
  grid-column: span 8;
}

.stat--distribution {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
}

.stat--dev-open {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
}

/* Dual value layout (DEV + Dados Abertos) */
.stat-dual {
  display: flex;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}

.stat-dual-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.stat-dual-value {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}

.stat-dual-label {
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  opacity: 0.85;
  max-width: 120px;
}

.stat--resources {
  grid-column: span 4;
}

.stat--tags {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
}

.stat--tags canvas {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 0;
  min-height: 0;
  display: block !important;
  margin: 0 !important;
}

.stat--other {
  grid-column: span 4;
}

/* ========================================
   CANVAS POSITIONING
   ======================================== */
.stat-card canvas {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.stat--activity canvas {
  margin-top: 0 !important;
}

.stat--categories canvas {
  margin: 0 !important;
}

/* ========================================
   RESPONSIVE BREAKPOINT
   ======================================== */
@media (max-width: 1100px) {
  .stat--datasets,
  .stat--activity,
  .stat--categories,
  .stat--orgs,
  .stat--resources,
  .stat--tags,
  .stat--other {
    grid-column: span 12;
  }
  
  .stat-value {
    font-size: 72px;
  }
}

.stats-grid--opendata {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 80px;
}


.stats-grid--opendata .stat--datasets      { grid-column: 1 / span 4; grid-row: 1; }
.stats-grid--opendata .stat--orgs-top      { grid-column: 5 / span 4; grid-row: 1; }
.stats-grid--opendata .stat--categories    { grid-column: 9 / span 4; grid-row: 1; }


.stats-grid--opendata .stat--views         { grid-column: 1 / span 4; grid-row: 2; }
.stats-grid--opendata .stat--activity-wide { grid-column: 5 / span 8; grid-row: 2; }


.stats-grid--opendata .stat--resources-count  { grid-column: 1 / span 4; grid-row: 3; }
.stats-grid--opendata .stat--resources-format { grid-column: 5 / span 4; grid-row: 3; }
.stats-grid--opendata .stat--users            { grid-column: 9 / span 4; grid-row: 3; }


.cmporto-home .stats-grid--opendata .stat-card {
  background: var(--homepage-stats-datasets-color, #000F9F);
  color: var(--cf-white);
}
.cmporto-home .stats-grid--opendata .stat-card .stat-label,
.cmporto-home .stats-grid--opendata .stat-card .stat-help,
.cmporto-home .stats-grid--opendata .stat-card .stat-value {
  color: var(--cf-white);
}


.stats-grid--opendata .stat--activity-wide {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.stats-grid--opendata .stat--activity-wide canvas {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 0 !important;
}


.stats-grid--opendata .stat--orgs-top {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.stats-grid--opendata .stat--orgs-top canvas {
  flex: 1 1 0;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


.stats-grid--opendata .stat--resources-format {
  display: flex;
  flex-direction: column;
  min-height: 180px;
}
.stats-grid--opendata .stat--resources-format canvas {
  flex: 1 1 0;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


.stats-grid--opendata .stat--categories {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.stats-grid--opendata .stat--categories canvas {
  flex: 1 1 0;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
}


.stats-grid--opendata .stat--datasets,
.stats-grid--opendata .stat--views,
.stats-grid--opendata .stat--resources-count,
.stats-grid--opendata .stat--users {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.stats-grid--opendata .stat--datasets .stat-value,
.stats-grid--opendata .stat--views .stat-value,
.stats-grid--opendata .stat--resources-count .stat-value,
.stats-grid--opendata .stat--users .stat-value {
  font-size: clamp(80px, 9vw, 130px);
  font-weight: 800;
  line-height: 1;
  margin-top: auto;
}


@media (max-width: 1100px) {
  .stats-grid--opendata .stat--datasets,
  .stats-grid--opendata .stat--orgs-top,
  .stats-grid--opendata .stat--categories,
  .stats-grid--opendata .stat--views,
  .stats-grid--opendata .stat--activity-wide,
  .stats-grid--opendata .stat--resources-count,
  .stats-grid--opendata .stat--resources-format,
  .stats-grid--opendata .stat--users {
    grid-column: span 12 !important;
    grid-row: auto !important;
  }
}

/* ========================================
   ORGANIZATION PAGE STATS
   ======================================== */
.container.container--flush {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

.stats-grid .stat-card {
  background: var(--cf-blue-dark);
  color: var(--cf-white);
  border-radius: 16px;
  padding: 18px 20px 20px;
  border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  height: 357px;
  transition: all 0.3s ease;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
}

.stats-grid .stat-label {
  color: var(--cf-white);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
}

.stats-grid .stat-help {
  color: var(--cf-white);
  margin-bottom: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  line-height: 20px;
}

.stats-grid .stat-value {
  font-size: clamp(80px, 9vw, 130px);
  line-height: 1;
  font-weight: 800;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   GROUP SELECTED STATE (WHEN FILTERING BY TUTOR)
   ======================================== */
.stats-grid.group-selected .stat-card {
  background: var(--cf-white);
  color: var(--cf-primary-main);
  border: 3px solid var(--cf-primary-main);
}

.stats-grid.group-selected .stat-label {
  color: var(--cf-primary-main);
}

.stats-grid.group-selected .stat-help {
  color: var(--cf-primary-main);
}

.stats-grid.group-selected .stat-value {
  color: var(--cf-primary-main);
}

.stats-grid.group-selected .stat-dual-value,
.stats-grid.group-selected .stat-dual-label {
  color: var(--cf-primary-main);
}

/* ========================================
   CANVAS SPECIFIC STYLES
   ======================================== */
.stats-grid .stat-card canvas {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.stats-grid .stat--activity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.stats-grid .stat--activity canvas,
.stats-grid--opendata .stat--activity-wide canvas,
.stats-grid--estatisticas .stat-est--activity canvas,
.stats-grid[data-org] .stat--activity canvas,
.stats-grid[data-user] .stat--activity canvas {
  display: block;
  min-width: 0;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.stats-grid .stat--categories,
.stats-grid .stat--categories-org {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.stats-grid .stat--categories {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
}

/* Square wrapper created by JS — keeps doughnut perfectly circular */
.stats-grid .cat-donut-wrapper {
  flex: 1 1 0;
  min-height: 0;
  align-self: center;
  overflow: hidden;
}

.stats-grid .cat-donut-wrapper canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.stats-grid[data-user] .cat-donut-wrapper {
  margin-top: 8px;
}

/* Cards that contain a doughnut must clip it */
.stats-grid .stat-card:has(.cat-donut-wrapper) {
  overflow: hidden !important;
}

.stats-grid .stat--categories canvas,
.stats-grid .stat--categories-org canvas {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
}


#stats-categories-org,
#stats-est-categories,
#stats-resources-format,
#user-stats-categories,
#stats-est-resources-format {
  width: 100% !important;
  max-width: 100% !important;
}

.stats-grid .stat--categories .stat-help {
  margin-bottom: 16px !important;
}

/* Stats page: override padding already set above (same value, no-op — kept for clarity) */

.stats-grid .stat--orgs {
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
}

.stats-grid .stat--orgs canvas {
  flex: 1 1 0;
  min-height: 0;
  overflow: visible !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 1100px) {
  .stats-grid .stat--categories,
  .stats-grid .stat--orgs {
    height: auto;
    min-height: 360px;
  }

  .stats-grid .stat--categories canvas,
  .stats-grid .stat--orgs canvas {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .stats-grid .stat--categories,
  .stats-grid .stat--orgs {
    min-height: 320px;
  }

  .stats-grid .stat--categories canvas,
  .stats-grid .stat--orgs canvas {
    min-height: 210px;
  }
}

.stats-grid .stat--distribution canvas {
  flex: 1 1 0;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
}

.stat-orgs-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ========================================
   ESTATÍSTICAS PAGE — 3+2 LAYOUT
   ======================================== */
.stats-grid--estatisticas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 80px;
}

/* Row 1: 3 equal small boxes */
.stats-grid--estatisticas .stat-est--datasets   { grid-column: 1 / span 4; grid-row: 1; }
.stats-grid--estatisticas .stat-est--orgs       { grid-column: 5 / span 4; grid-row: 1; }
.stats-grid--estatisticas .stat-est--categories { grid-column: 9 / span 4; grid-row: 1; }

/* Row 2: small + wide */
.stats-grid--estatisticas .stat-est--views     { grid-column: 1 / span 4; grid-row: 2; }
.stats-grid--estatisticas .stat-est--activity  { grid-column: 5 / span 8; grid-row: 2; }

/* Row 3: recursos total | formatos (doughnut) | utilizadores */
.stats-grid--estatisticas .stat-est--resources         { grid-column: 1 / span 4; grid-row: 3; }
.stats-grid--estatisticas .stat-est--resources-format  { grid-column: 5 / span 4; grid-row: 3; }
.stats-grid--estatisticas .stat-est--users             { grid-column: 9 / span 4; grid-row: 3; }

/* Shared card styles (inherit from .stats-grid .stat-card) */
.stats-grid--estatisticas .stat-card {
  background: var(--cf-blue-dark);
  color: var(--cf-white);
  border-radius: 16px;
  padding: 18px 20px 20px;
  border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  min-height: 280px;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
}

.stats-grid--estatisticas .stat-label {
  color: var(--cf-white);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
}

.stats-grid--estatisticas .stat-help {
  color: var(--cf-white);
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 200;
  line-height: 20px;
}

.stats-grid--estatisticas .stat-value {
  font-size: clamp(64px, 7vw, 110px);
  line-height: 1;
  font-weight: 800;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cf-white);
}

/* Orgs card: flex canvas */
.stats-grid--estatisticas .stat-est--orgs {
  overflow: visible !important;
}

.stats-grid--estatisticas .stat-est--orgs canvas {
  flex: 1 1 0;
  min-height: 140px;
  margin-top: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Categories card: flex canvas */
.stats-grid--estatisticas .stat-est--categories {
  overflow: visible !important;
  padding-left: 12px;
  padding-right: 12px;
}

.stats-grid--estatisticas .stat-est--categories canvas {
  flex: 1 1 0;
  min-height: 160px;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Activity chart: wide, flex */
.stats-grid--estatisticas .stat-est--activity {
  min-height: 280px;
  min-width: 0;
  overflow: hidden;
}

.stats-grid--estatisticas .stat-est--activity canvas {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 0 !important;
}

/* Resources-format card: flex canvas */
.stats-grid--estatisticas .stat-est--resources-format {
  overflow: visible !important;
  padding-left: 12px;
  padding-right: 12px;
}

.stats-grid--estatisticas .stat-est--resources-format canvas {
  flex: 1 1 0;
  min-height: 160px;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

@media (max-width: 1100px) {
  .stats-grid--estatisticas .stat-est--datasets,
  .stats-grid--estatisticas .stat-est--orgs,
  .stats-grid--estatisticas .stat-est--categories,
  .stats-grid--estatisticas .stat-est--views,
  .stats-grid--estatisticas .stat-est--activity,
  .stats-grid--estatisticas .stat-est--resources,
  .stats-grid--estatisticas .stat-est--resources-format,
  .stats-grid--estatisticas .stat-est--users {
    grid-column: span 12 !important;
    grid-row: auto !important;
  }
}