body {
	font-family: Inter !important;
	margin: 0;
	padding: 20px;
	color: var(--text-primary) 87%;
	// box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

.card {
	margin-bottom: 20px;
}

/* ---------- Responsive Layout Classes ---------- */
.header-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: visible;

  @media (max-width: 1023px) {
    flex-direction: column;
  }
}

.header-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  @media (max-width: 1023px) {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;

    > * {
      margin-left: 0 !important;
      width: 100%;
      margin-bottom: 10px;
    }
  }
}

.content-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;

  @media (max-width: 1023px) {
    flex-direction: column; /* Graph goes last naturally */
  }
}

.history-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  width: 960px;

@media(max-width:767px)
{
	width: 100%;
}
}

.graph-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 320px;
  max-width: 100%;

  @media (max-width: 1023px) {
    flex: auto;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

.column {
	display: flex;
	flex-direction: column;
}

.name {
	font-family: Inter !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0%;
	color: var(--text-primary);
	margin: 0;
	/* Optional: Remove extra spacing */
}

.code {
	font-family: Inter !important;
	font-weight: 400;
	font-size: 11px;
	line-height: 150%;
	letter-spacing: 0%;
	color: var(--text-primary);
	margin: 0;
	/* Optional: Remove extra spacing */
}

.dep {
	font-family: Inter !important;
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0%;
	color: var(--text-primary);
	margin: 0;
}

.des {
	font-family: Inter !important;
	font-weight: 400;
	font-size: 11px;
	line-height: 150%;
	letter-spacing: 0%;
	color: var(--text-primary);
	margin: 0;
}

.section-title {
	font-family: Inter !important;
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0%;
	color: var(--text-primary);
}

table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 12px;
}

th {
	padding: 10px;
}

.leave-Detail th {
	background: var(--bg-subtle);
	color: var(--text-secondary);
	font-family: Inter !important;
	font-weight: 700;
	font-size: 12px;
	line-height: 150%;
	letter-spacing: 0%;
}

tr:nth-child(even) {
	background: var(--bg-surface);
}

.balance {
	font-weight: bold;
	color: #5e00a1;
}

.leave-table th {
	z-index: 99999;
	height: 37px;
	color: var(--text-secondary);
	padding: 10px;
	font-family: Inter !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
}

// .leave-table tr {
// 	background: var(--bg-surface);

// }

.leave-table td {
	// padding: 10px;
	font-family: Inter !important;
	font-size: 14px;
	color: var(--text-primary);
}

// .leave-table tr:nth-child(odd) {
// 	background-color: #FFFFFF;
// }

.leave-table tr:nth-child(even) {
	background-color: var(--bg-surface);
}

.leave-Detailtr:nth-child(even) {
	background-color: var(--bg-surface);
}

.leave-Detail tr:nth-child(odd) {
	background-color: var(--bg-surface);
}

.status-icon-wrapper {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: orange;
	display: flex;
	justify-content: center;
	align-items: center;
}

.status-icon-wrapper mat-icon {
	color: white;
	font-size: 20px;

	display: flex;
	align-items: center;
}

.status-text {
	font-weight: 500;
	color: #333;
}

.status-icon {
	font-size: 20px;
	vertical-align: middle;
}

.status-icon.approved {
	color: #4ACFAC;
	/* green */
}

.status-icon.pending {
	color: #F5A623;
	/* orange */
}

.status-icon.rejected {
	color: #E63946;

	/* red */
}

.bar-chart {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	height: 100px;
	padding: 10px;
	background-color: #f6f0ff;
	border-radius: 10px;
	width: 410px;
}

.bar {
	position: relative;
	width: 40px;
	background: linear-gradient(93.56deg, #B695EB 17.42%, #834DD0 88.7%);
	width: 20px;
	height: 15.600000381469727px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-radius: 10px 10px 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.bar span {
	position: absolute;
	top: -20px;
	color: #6a1db5;
	font-weight: bold;
	font-size: 14px;
}

.bar-labels {
	display: flex;
	justify-content: space-between;
	width: 410px;
	margin-top: 5px;
	padding: 0 10px;
	font-size: 14px;
	color: #444;
}


.user-thumbnail {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #eee;
}

.bar-chart-container svg {
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(180, 142, 225, 0.2);
}

.leave-chart-section {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bar-chart-container {
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	-webkit-overflow-scrolling: touch;
}

.bar-chart-container svg {
	background-color: var(--bg-surface);
	border-radius: 4px;
}

.bar {
	transition: all 0.3s ease;
	cursor: pointer;
}

.bar:hover {
	opacity: 0.8;
	transform: translateY(-2px);
}

.thhistory {
	color: #FFFFFF;
	font-weight: 700;
	padding: 10px;
}

.tdhistory {
	padding: 10px;
}

.historycontainer {
  width: 960px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px #00000033;
  overflow: hidden;

 @media (max-width: 767px) {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.thsummary {
	font-family: Inter !important;
	color: var(--text-primary);
	font-weight: 700;
	font-size: 12px;
	line-height: 150%;
	letter-spacing: 0%;
	padding: 12px 16px;
	text-align: center;
	border: none;
}

.thtypesummary {
	font-family: Inter !important;
	color: var(--text-primary);
	font-weight: 700;
	font-size: 12px;
	line-height: 150%;
	letter-spacing: 0%;
	padding: 12px 16px;
	text-align: left;
	border: none;
}

.tdsummary {
	background-color: var(--bg-surface);
	font-family: Inter !important;
	color: var(--text-primary);
	font-size: 12px;
	font-weight: 400;
	padding: 8px 16px;
	text-align: center;
	border-bottom: 1px solid var(--border-subtle);
}
.pagination-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-top: 1px solid var(--border-subtle);
}

.pagination-info {
	font-weight: 600;
	color: var(--button-primary-bg-default);
	font-size: 14px;
	min-width: 110px;
}

.pagination-controls {
	display: flex;
	gap: 8px;
}

.leavepage-btn {
	width: 35px;
	height: 35px;
	border-radius: 10px;
	border: 1px solid var(--button-primary-bg-default);
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--button-primary-bg-default);
	transition: background 0.2s;
}

.leavepage-btn:hover:not(:disabled) {
	background-color: var(--bg-subtle);
	border:1px solid var(--button-primary-bg-default);

}

.leavepage-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	border: 1px solid var(--button-primary-bg-default);

}

// /* Chart axis styling */
// .bar-chart-container .domain {
//   stroke: #e2e8f0;
// }

// .bar-chart-container .tick line {
//   stroke: #e2e8f0;
// }

// .bar-chart-container .tick text {
//   fill: #4a5568;
//   font-size: 12px;
// }

/* Label styling */
.label {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	user-select: none;
}

/* Loading state */
.chart-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
	color: #718096;
	font-size: 14px;
}

::ng-deep gb-filter .filterbutton {
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

// /* Responsive design */
// @media (max-width: 768px) {
//   .bar-chart-container {
//     height: 220px;
//     padding: 10px;
//   }

//   .leave-chart-section {
//     margin: 10px 0;
//     padding: 15px;
//   }
// }