/* dashboard.component.css */

.data-grid {
  grid-column: 1 / span 1;
}

.charts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.options {
  padding: 20px;
  margin-top: 20px;
  background-color: rgba(191, 191, 191, 0.15);
}

.caption {
  font-size: 18px;
  font-weight: 500;
}

.option {
  margin-top: 10px;
}

.donut-wrapper {
  position: relative;
  display: inline-block;
}
.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none; /* Prevent blocking chart hover */
}

.donut-center .total {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.donut-center .caption {
  font-size: 12px;
  color: #666;
  background: none;
}
.dx-datagrid-header-panel {
    display: none !important;
}
/* Background for the entire tab header strip */
::ng-deep .dx-tabpanel .dx-tabs {
  background-color: #f5f7fa; /* light gray/blue */
  border-bottom: 1px solid #ddd;
}

/* Default (inactive) tab styles */
::ng-deep .dx-tab {
  background-color: #e9ecef;
  color: #333;
  font-weight: 500;
  padding: 8px 16px;
  margin-right: 4px;
}

/* Active tab styles */
::ng-deep .dx-tab-selected {
    background: #2b4c81 !important;
    color: #FFF !important;
  font-weight: 600;
}
::ng-deep .dx-tabpanel > .dx-tabpanel-tabs .dx-tab.dx-tab-selected .dx-tab-content {
    color: #ffff !important;
}
/* Optional: Hover effect */
::ng-deep .dx-tab:hover {
  background-color: #d6d9dc;
  cursor: pointer;
}

.charts-container {
  display: flex;
  padding: 15px;
      background: #ffffff;
  gap: 20px; /* spacing between columns */
}

.chart-box {
  flex: 1;               /* each takes 50% */
  min-width: 0;          /* prevents overflow */
}
/* Header row background */
#gridContainer .dx-datagrid-headers {
  background-color: #007bff;   /* Blue header */
  color: #fff;                 /* White text */
  font-weight: bold;
}
.chart-box .custom-chart {
  height: 350px;
  width: 100%; /* or fixed value */
}

.summary-cards {
  display: flex;
  flex-wrap: wrap;       /* allow wrapping on smaller screens */
  gap: 15px;
  margin-bottom: 20px;
  width: 100%;
}
/* Apply to all DevExtreme grids */
.dx-datagrid {
    font-family: 'Helvetica Neue', 'Roboto', Arial !important;
}
.content-header{
      background: #007bff;
    color: #ffffff;
}
.subheader-title {
    color: #ffffff;
    padding: 5px;
    text-shadow: none;
}
.summary-cards .card {
  flex: 1 1 127px;       /* grow/shrink, min-width 200px */
  box-sizing: border-box;
}
.summary-cards .card h5 {
font-size: 17px;
    text-align: center;
    min-height: 45px;
    margin: 0 0 10px;
    font-weight: 600;
    color: #1c81c1;
}
.summary-cards .card h6 {
    font-size: 14px;      /* adjust as needed */
    text-align: center;   /* center the text */
    margin: 5px 0;
    font-weight: 600;;            /* optional: remove default margin */
}