/* small CSS to make tables readable and tabs look OK */
.ashtaka-tabs { 
  display:flex; 
  gap:6px; 
  margin-bottom:8px; 
  flex-wrap:wrap; 
}

.ashtaka-tab { 
  padding:6px 10px; 
  border:1px solid #ccc; 
  border-radius:6px; 
  cursor:pointer; 
  background:#f7f7f7; }

.ashtaka-tab.active { 
  background:#e2f0ff; 
  border-color:#7fb3ff; 
}


/* Scrollable wrapper for overflow on small screens */
.ashtaka-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin-bottom: 15px;
}

/* Chart wrapper controls layout */
.chart-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* Scrollable table container */
.table-scroll {
    flex: 1 1 60%;
    max-width: 60%;
    overflow-x: visible; /* ✅ no scroll on desktop */
    margin: 0 auto;
    text-align: center;
}

.table-scroll table {
    margin: 0 auto;
    min-width: 600px; /* ensures scroll on small devices */
}

.tab-content {
  width: 100%;
  margin-left: 10%;
  margin-right: 10%;
}

/* SVG Chart */
.bav-svg-chart {
    flex: 1 1 40%;
    max-width: 40%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.ashtaka-spark { 
  width:100px; 
  height:22px; 
  display:inline-block; 
  vertical-align:middle; 
}

.ashtaka-sort-btn { 
  margin-left:8px; 
  cursor:pointer; 
  padding:4px 8px; 
  border-radius:4px; 
  border:1px solid #ccc; 
  background:#fafafa; 
}

.bav-planet-table {
  margin-bottom: 30px;
}

.sav-planet-table {
  margin-bottom: 30px;
}

/* Make table auto-size properly on big screens */
@media (min-width: 992px) {
    .table-scroll table {
        min-width: unset; /* ✅ removes forced width */
        width: 100%;
    }
}

/* ✅ Mobile-friendly adjustments */
/* On smaller screens, stack vertically */
@media (max-width: 768px) {
    .chart-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .tab-content {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 5px;
      padding-right: 5px;
    }

    
    .table-scroll {
        overflow-x: auto; /* ✅ enable scroll */
        margin: 0;
        padding: 0;
        width: 100%; /* take full width */
        -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    }

    .table-scroll table {
        min-width: auto; /* REMOVE the 400px constraint */
        width: 100%; /* fit to container */
    }

    .bav-svg-chart {
        width: 100%;
        max-width: 100%;
    }
}

.bavChartElements {
    fill: #fff9e6;
    stroke: orange;
    stroke-width: 2;
}

.bavTextElements {
    font-family: Arial, sans-serif;
    font-size: 14px;
    fill: #333;
}

.bavBinduText {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    fill: #000;
}

.bavCenterText {
    font-family: Arial, sans-serif;
    text-anchor: middle;
    stroke: orange;
    font-size: medium;
}