/* chart_style.css - shared chart styles + loader */
@font-face { font-family: "me_quran"; src: url("/fonts/me_quran.ttf") format("truetype"); }

.chart-wrapper {
  background: #fff;
  border: 1px solid #c9dec9;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin: 8px 0;
}

.chart-controls { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.chart-btn {
  background: #0d3b24; color:#fff; border:none; padding:7px 12px; border-radius:6px; cursor:pointer;
  font-family: 'me_quran','Scheherazade', serif; font-size:14px;
}
.chart-btn.secondary { background:#fff; color:#0d3b24; border:1px solid #0d3b24; }
.chart-btn:hover { opacity:0.95; }

/* scroll area */
.chart-scroll-area {
  height: 300px;            /* fixed height */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 10px;
}

/* each column */
.chart-col {
  display:inline-flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-end;
  width:72px;
  margin:0 8px;
  vertical-align:bottom;
}
.chart-count {
  font-size:13px;
  color: #0d3b24;
  font-weight:700;
  margin-bottom:6px;
}
.chart-bar {
  width:100%;
  background:#0d3b24;
  border-radius:8px 8px 0 0;
  transition: transform .12s;
}
.chart-bar:hover { transform: translateY(-6px); }
.chart-letter {
  font-family:'me_quran','Scheherazade',serif;
  font-size:28px;
  color:#0d3b24;
  margin-top:8px;
  line-height:1;
  text-align:center;
}
.chart-percent {
  margin-top:6px;
  font-size:12px;
  color:#333;
}

/* loader: simple circular CSS spinner */
.chart-loader {
  border: 6px solid #eaf6ee;
  border-top: 6px solid #0d3b24;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  animation: spin 1s linear infinite;
  margin: 18px auto;
  display: none;
}
@keyframes spin { 0%{transform:rotate(0)}100%{transform:rotate(360deg)} }

@media (max-width:600px){
  .chart-col { width:56px; margin:0 6px; }
  .chart-letter { font-size:28px; }
  .chart-scroll-area { height:260px; }
}

/* minimal compatibility: do not break your table */
.breakdown-table th, .breakdown-table td { border-bottom: 1px solid #ccc; padding: 8px; font-size: 22px; text-align: center; vertical-align: middle; }