/* Consolidated CroStat styles: layout, cards, footer, and utilities */

/* ============================================
   LAYOUT: Maximum width utilization
   ============================================ */
:root {
  --quarto-body-width: 100%;
  --quarto-margin-width: 0px;
  --quarto-body-padding-x: 0;
  --cs-content-max: 1800px;
  --cs-gap: 16px;
}

/* Full-width content area */
.page-content,
.quarto-container.page-columns.page-navbar,
#quarto-content,
main.content {
  max-width: var(--cs-content-max) !important;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Remove default Quarto sidebar margin stealing */
.page-columns .content {
  grid-column: page-start / page-end !important;
}

/* TOC: floating on right side, doesn't steal content width */
#quarto-sidebar,
#TOC {
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

/* ============================================
   CHART GRID SYSTEM
   ============================================ */

/* Two-column chart grid */
.chart-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cs-gap);
  margin-bottom: 24px;
}

/* Three-column chart grid */
.chart-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cs-gap);
  margin-bottom: 24px;
}

/* Chart item wrapper */
.chart-item {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chart-item h2,
.chart-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333;
}

.chart-item .chart-desc {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Charts inside grid items */
.chart-item .html-widget.echarts4r {
  height: 320px !important;
  width: 100% !important;
}

/* Responsive: tablet - 2 columns max */
@media (max-width: 1200px) {
  .chart-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .chart-item .html-widget.echarts4r {
    height: 300px !important;
  }
}

/* Responsive: mobile - single column */
@media (max-width: 768px) {
  .chart-grid-2,
  .chart-grid-3 {
    grid-template-columns: 1fr;
  }
  .chart-item .html-widget.echarts4r {
    height: 280px !important;
  }
}

/* ============================================
   LEGACY QUARTO COLUMNS (improved)
   ============================================ */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-gap);
  margin-bottom: 24px;
}

.columns .column {
  flex: 1 1 400px;
  min-width: 0;
  padding: 0;
}

/* Charts in Quarto columns */
.columns .html-widget.echarts4r {
  height: 340px !important;
}

/* Monitor cards */
.monitor-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  align-items: start;
  width: 100%;
  justify-content: flex-start;
}
.monitor-cards > div {
  width: 100%;
}
.monitor-card {
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.monitor-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.monitor-card .html-widget.echarts4r {
  height: 260px !important;
}

/* Charts: default height from widgets; adjust on smaller screens */
@media (max-width: 1100px) {
  .html-widget.echarts4r {
    height: 420px !important;
  }
}

@media (max-width: 768px) {
  .html-widget.echarts4r {
    height: 360px !important;
  }

  /* Make navbar title wrap nicely and save space */
  .navbar .navbar-brand,
  .navbar .navbar-title {
    white-space: normal;
    line-height: 1.2;
  }

  /* Reduce horizontal padding in nav links */
  .navbar-nav .nav-link {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  /* Give main content a bit more breathing room when sidebar exists */
  #quarto-content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Footer strip */
.cs-footer {
  border-top: 1px solid #e0e0e0;
  padding: 10px 16px;
  font-size: 14px;
  color: #3366cc;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cs-footer-left {
  color: #666;
  font-weight: 500;
  margin-right: 16px;
}
.cs-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cs-footer a {
  color: #3366cc;
  text-decoration: none;
}
.cs-footer a:hover {
  text-decoration: underline;
}
.cs-footer .cs-sep {
  color: #999;
  margin: 0 4px;
}
.cs-footer-feedback {
  margin-left: auto;
  font-weight: 700;
}
.cs-mail {
  margin-right: 6px;
}

@media (max-width: 768px) {
  .cs-footer {
    justify-content: center;
    gap: 8px 12px;
  }
  .cs-footer-left {
    width: 100%;
    text-align: center;
    margin-right: 0;
  }
  .cs-footer-links {
    justify-content: center;
  }
  .cs-footer-feedback {
    margin-left: 0;
  }
}

/* Navbar logo sizing */
.navbar-brand-logo img,
.navbar-brand-logo {
  max-height: 72px;
  width: auto !important;
}

/* Floating feedback button */
.cs-feedback-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #c00000;
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  text-decoration: none;
  z-index: 2000;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}
.cs-feedback-fab:hover {
  background: #a00000;
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
  transform: translateY(-1px);
}
.cs-feedback-fab:active {
  transform: translateY(0);
}

/* Cookie banner */
.cs-cookie-banner {
  position: fixed;
  bottom: 84px; /* small offset so it does not overlap the floating button */
  right: 16px;
  max-width: 480px;
  width: calc(100% - 32px);
  background: #f5f5f5;
  padding: 15px;
  font-size: 0.9em;
  border: 1px solid #ccc;
  border-radius: 8px;
  z-index: 1600;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  display: none;
}
.cs-cookie-button {
  margin-left: 10px;
}
.cs-cookie-link {
  margin-left: 10px;
}
@media (max-width: 768px) {
  .cs-cookie-banner {
    bottom: 84px;
    right: 12px;
    width: calc(100% - 24px);
  }
}

/* AI sažetak blok u Analizi */
.ai-summary {
  background: #f5f7fb;
  border: 1px solid #dfe5f2;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 16px 0;
  font-size: 0.97rem;
  line-height: 1.45;
}
.ai-summary strong {
  display: inline-block;
  margin-right: 6px;
}
.ai-summary.muted {
  color: #666;
  background: #f9fafc;
  border-color: #e6eaf2;
}

/* Ensure echarts remain interactive (tooltips, hover) */
.html-widget.echarts4r,
.html-widget.echarts4r canvas {
  pointer-events: auto !important;
  user-select: auto;
}

/* ============================================
   TOC SIDEBAR: Hide completely to prevent overlap
   ============================================ */

/* Hide TOC sidebar completely - prevents overlap with charts */
#quarto-margin-sidebar,
.quarto-margin-sidebar,
nav#TOC,
.sidebar.toc-left {
  display: none !important;
}

/* Content uses full width without TOC */
#quarto-content > main,
#quarto-content .page-columns > .content,
.page-columns .content {
  max-width: 100% !important;
  margin-right: 0 !important;
}

/* Ensure chart containers have proper z-index for tooltips */
.chart-item,
.chart-grid-2,
.chart-grid-3 {
  position: relative;
  z-index: 200;
}

/* ECharts tooltip container - ensure it's above everything */
.echarts-tooltip,
div[style*="echarts"] {
  z-index: 9999 !important;
  pointer-events: none;
}