/* ===== Existing NDAP Styles (yours) ===== */
:root {
    --dark-blue: #0A114D;
    --mid-blue: #1A236B;
    --light-blue-glow: #3A479F;
    --white: #FFFFFF;
    --dodgerblue: #1E90FF;
    --darkorange: #FF8C00;
    --pink: #FF0066;
	--googleblue: #03a9f4;
	--lightblue: #fce2d4;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #CBDCEB;
	overflow-y: scroll;
}

/* 🔹 Candlestick Background Layer */
#candlestick-bg {
    position: absolute;
    width: 100%;
    height: 100%;
	top: 0;
    left: 0;
	/* CRITICAL: Must be absolute to position correctly within the relative parent */
    opacity: 0.07; /* Increased for visibility */
    z-index: 15;
    pointer-events: none; /* ensures no interference with clicks */
}

#candlestick-bg canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    background: #222 !important; /* Debug: make canvas visible */
    z-index: 1000;
}

.ndap-dash-container {
    width: 100%;
    min-height: 100vh; /* at least one full screen height */
    background: #0C134F;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    position: relative;
    overflow: hidden;
    padding: 2rem; /* use relative unit for scaling */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10;
}

/* 🖥️ Large screens (desktops) */
@media (min-width: 1024px) {
    .ndap-dash-container {
        width: calc(100vw - 160px); /* adjust if you have a sidebar */
        min-height: 100vh;
        padding: 2.5rem;
    }
}

/* 📱 Tablets */
@media (max-width: 1023px) and (min-width: 600px) {
    .ndap-dash-container {
        width: 100vw;
        min-height: 120vh;
        padding: 1.5rem;
    }
}

/* 📱 Mobile phones */
@media (max-width: 599px) {
    .ndap-dash-container {
        width: 100vw;
        min-height: auto; /* let content decide height */
        padding: 1rem;
        border-radius: 0; /* optional: cleaner on small screens */
    }
}


/* New/Updated Styles */
.neo-ad-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}

/*
* ADDED: Pushes the 5th card ("DEA-Datasets") and all subsequent siblings to the far right.
* This assumes the cards are laid out in a single row by Flexbox.
*/
.neo-ad-container .neo-card:nth-child(5) {
    margin-left: auto;
}

/* Time Granularity card full-width under Datasets row */
.neo-card:nth-child(7) {
  flex: 1 1 100%;
  max-width: 100%;
}

/* === The Rest of Your Styles Remain Unchanged === */
.neo-header {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    padding-left: 10px;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    opacity: 0.9;
}

.logo-neo {
    font-size: 1rem;
    font-weight: 400;
    color: var(--dodgerblue);
    opacity: .9	;
}

.neo-card {
  flex: 0 0 180px;
  max-width: 180px;
  background: rgba(0, 0, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 5px 20px;
  text-align: center;
  color: white;
  position: relative;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Clickable overlay inside card to make whole card clickable without changing layout */
#ministry-card-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  cursor: pointer;
  background: transparent;
}

/* Expandable ministry list container placed below the cards; it is in normal flow so it pushes content down */
/* CORRECTED CSS */
.ministry-list {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 16px;
  margin-top: 18px;
  color: var(--lightblue);
  
  /* === KEY FIXES FOR RETRACTION === */
  /* 1. Set initial height to 0 and hide content */
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  /* 2. Transition both max-height and opacity */
  transition: max-height 500ms ease-out, opacity 300ms ease, padding 500ms ease-out;
  
  /* Initial state */
  opacity: 0;
}

.ministry-list.open {
  /* 3. Set a large enough max-height when open */
  max-height: 2000px; /* Adjust this value to be larger than the list's max possible height */
  opacity: 1;
  /* Restore padding when open */
  padding-top: 10px;
  padding-bottom: 10px;
  /* Add margin/padding transitions if necessary, to push content smoothly */
}

.ministry-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
}

.ministry-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 4px 0px;
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--lightblue);
  word-break: break-word;
}

.ministry-list .ministry-empty {
  color: rgba(255,255,255,0.6);
  padding: 6px 0;
  grid-column: 1 / -1;
}
#ministry-list-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#ministry-list-content li {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.ministry-name {
  flex-grow:1;
  padding-right: 15px;
  font-weight: 300;
}

.dataset-count {
  flex-shrink: 0;
  font-weight: 600;
  color: #6cc24a;
}

.card-text {
    color: var(--dodgerblue);
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 3px;
    opacity: 0.9;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
    padding-bottom: 1px; 
}

.rate-container {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.rate-number {
    color: var(--white);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
}

.rate-number2 {
    color: var(--white);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
}

/*.background-chart-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 20px),
        linear-gradient(180deg, transparent 50%, var(--light-blue-glow) 100%);
    opacity: 0.3;
    z-index: 0;
    transform: perspective(500px) rotateX(20deg);
    filter: blur(1px);
}
*/
.ndap-dash-container::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--light-blue-glow) 0%, transparent 70%);
    opacity: 0.4;
    z-index: 0;
}
/* Make time granularity card full-width below first row */
.neo-card#time-card {
  display: block;
  max-width: 180px;
  text-align: center;
  overflow-y: visible;
  max-height: none;
  vertical-align: top;
}
/* Inner scroll area */

/* NOTE: Removed unused ::-webkit-scrollbar definition */

#time-granularity-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Changed to match .frequency-item: use flexbox for space-between alignment */
.time-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  white-space: nowrap;
}

/* Added a dedicated class for the label, similar to frequency-item-label */
.time-item-label {
  display: flex;
  align-items: center;
}

/* Matched to .frequency-total: Total row uses flexbox for space-between */
.time-total {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  color: var(--darkorange);
  font-weight: 600;
}

/* Matched to frequency styles */
#time-granularity-container .time-item {
  font-size: 1rem;
  font-weight: 300;
  color: var(--lightblue); /* Using var(--lightblue) for consistency */
}

/* Matched to frequency styles: Bullet point for the label */
#time-granularity-container .time-item-label::before {
  content: "•";
  color: var(--darkorange); /* small orange bullet to distinguish visually */
  margin-right: 6px;
}

/* NOTE: Removed unused .granularity-row, .label, and .value classes */



/* ===== Update Frequency Card Styles (Modified) ===== */
.neo-card#frequency-card {
  display: block;
  max-width: 180px;
  text-align: center;
  overflow-y: visible;
  max-height: none;
  vertical-align: top;
}

#update-frequency-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Changed to use flexbox for space-between alignment */
.frequency-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  white-space: nowrap;
}

/* Matched to Location styles */
#update-frequency-container .frequency-item {
  font-size: 1rem;
  font-weight: 300;
  color: var(--lightblue); /* Using var(--lightblue) for consistency */
}

/* Added a dedicated class for the label, similar to location-item-label */
.frequency-item-label {
  display: flex;
  align-items: center;
  /* Font size/weight should match the parent or count span */
}

/* Matched to Location styles: Total row uses flexbox for space-between */
.frequency-total {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  color: var(--darkorange);
  font-weight: 600;
}

/* Matched to Location styles: Bullet point for the label */
#update-frequency-container .frequency-item-label::before {
  content: "•";
  color: var(--darkorange); /* small orange bullet to distinguish visually */
  margin-right: 6px;
}

/* ===== Location Granularity Card Styles ===== */
.neo-card#location-card {
  display: block;
  max-width: 180px;
  text-align: center;
  overflow-y: visible;
  max-height: none;
  vertical-align: top;
}

#location-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-item {
display: flex;
justify-content: space-between;
width: 100%;
white-space: nowrap;
}


.location-total {
  display: flex;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  color: var(--darkorange);
  font-weight: 600;
}
#location-container .location-item {
  font-size: 1rem;
  font-weight: 300;
  color: var(--lightblue); /* blue numbers for consistency */
}
.location-item-label {
  display: flex;
  align-items: center; /* Ensures bullet and text are vertically centered */
}
.location-total span {
    /* If the fonts are different sizes or weights, alignment can break.
       Ensure they are using the same basic text properties */
    font-size: 1em; /* or inherit */
}


#location-container .location-item-label::before {
  content: "•";
  color: var(--darkorange); /* small orange bullet to distinguish visually */
  margin-right: 6px;
}

/* ===== Sprint Card Styles ===== */
.neo-card#sprint-card {
  display: block;	
  max-width: 180px;
  text-align: center;
  overflow-y: visible;
  max-height: none;
  vertical-align: top;
}

#sprint-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sprint-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  white-space: nowrap;
}
.sprint-total {
  display: flex;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  color: var(--darkorange);
  font-weight: 600;
}
#sprint-container .sprint-item {
  font-size: 1rem;
  font-weight: 300;
  color: var(--lightblue); /* blue numbers for consistency */
}

/* NEW RULE: This is the key fix.
  It turns the label itself into a flex container to group the bullet and text tightly.
*/
.sprint-item-label {
  display: flex;
  align-items: center; /* Ensures bullet and text are vertically centered */
}
.sprint-total span {
    /* If the fonts are different sizes or weights, alignment can break.
       Ensure they are using the same basic text properties */
    font-size: 1em; /* or inherit */
}

/* MODIFIED RULE: Use margin for spacing instead of a space in 'content'. 
  This is more reliable for alignment.
*/