/* Dashboard specific styles */

/* ---------- Unified filter bar (Project Name + Date Range) ----------
   One cohesive "filter card" instead of two mismatched controls: both
   fields share the same label style, control height, border, radius and
   padding so they read as a single filter section rather than a select box
   next to an unrelated button. */
.filter-card{
  display:flex;
  align-items:flex-end;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.filter-field{ display:flex; flex-direction:column; gap:6px; min-width:220px; }
.filter-field:first-child{ flex:1; max-width:560px; }
.filter-field:last-child{
  margin-left:auto;
}
.filter-field-label{
  font-size:.78rem;
  font-weight:700;
  color:var(--text-dark);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.filter-control{
  height:42px;
  border:1px solid #c9ccd6;
  border-radius:6px;
  padding:0 14px;
  font-size:.9rem;
  background:#fff;
  color:var(--text-dark);
}
.filter-control:focus{
  border-color:var(--blue-royal);
  box-shadow:0 0 0 .15rem rgba(84,104,212,.2);
  outline:none;
}

.date-range-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:240px;
  cursor:pointer;
  font-weight:600;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.date-range-trigger:hover{ border-color:var(--blue-royal); background:var(--blue-light); }
.date-range-trigger:focus-visible{
  border-color:var(--blue-royal);
  box-shadow:0 0 0 .15rem rgba(84,104,212,.2);
  outline:none;
}
.date-range-trigger .bi-calendar3{ color:var(--blue-royal); }
.date-range-trigger span{ flex:1; text-align:left; }
.date-range-trigger .trigger-caret{
  font-size:.72rem;
  color:var(--text-muted);
  transition:transform .15s ease;
}
.date-range-trigger[aria-expanded="true"] .trigger-caret{ transform:rotate(180deg); }

.project-header-band{
  background:var(--navy-deep);
  color:#fff;
  padding:14px 22px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:8px;
}
.project-header-band h5{ margin:0; font-weight:700; letter-spacing:.01em; }
.project-header-band .date-range-text{ font-size:.9rem; font-weight:600; }

.kpi-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.kpi-card{
  flex:1 1 150px;
  background:#fff;
  border:1px solid var(--grey-border);
  border-radius:10px;
  padding:16px 18px;
  box-shadow:var(--shadow-sm);
  border-top:4px solid var(--blue-royal);
  display:flex;
  align-items:center;
  gap:14px;
  transition:box-shadow .15s ease, transform .15s ease;
  cursor:default;
}
.kpi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.kpi-card .kpi-icon{
  width:42px; height:42px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  background:var(--blue-light);
  color:var(--blue-royal);
  flex-shrink:0;
}
.kpi-card .kpi-text{ min-width:0; }
.kpi-card .kpi-value{ font-size:1.65rem; font-weight:800; color:var(--navy-deep); line-height:1.1; }
.kpi-card .kpi-label{ font-size:.76rem; color:var(--text-muted); font-weight:600; margin-top:3px; text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-card.kpi-enroute{ border-top-color:#1f5fd6; }
.kpi-card.kpi-enroute .kpi-icon{ background:#e4edff; color:#1f5fd6; }
.kpi-card.kpi-delayed{ border-top-color:var(--orange); }
.kpi-card.kpi-delayed .kpi-icon{ background:#ffe6d6; color:var(--orange); }
.kpi-card.kpi-received{ border-top-color:var(--green); }
.kpi-card.kpi-received .kpi-icon{ background:#dff5e5; color:var(--green-dark); }
.kpi-card.kpi-week{ border-top-color:var(--yellow-dark); }
.kpi-card.kpi-week .kpi-icon{ background:#fdf3d3; color:var(--yellow-dark); }

.dashboard-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:20px;
  margin-bottom:24px;
  align-items:stretch;
}
.insights-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  align-items:stretch;
}
.dashboard-grid .box,
.insights-grid .box{
  background:#fff;
  border:1px solid var(--grey-border);
  border-radius:10px;
  padding:18px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease;
  min-width:0; /* prevents chart canvases from forcing grid-track overflow */
}
.dashboard-grid .box:hover,
.insights-grid .box:hover{ box-shadow:var(--shadow-md); }

.section-title-sm{
  font-weight:700;
  font-size:.92rem;
  color:var(--text-dark);
}
.chart-subtitle{
  font-size:.76rem;
  color:var(--text-muted);
  font-weight:600;
  white-space:nowrap;
}
.chart-canvas-wrap{
  position:relative;
  width:100%;
}
.chart-canvas-wrap canvas{
  max-width:100%;
}

.donut-legend{ display:flex; gap:16px; margin-top:12px; justify-content:center; flex-wrap:wrap; }
.donut-legend .legend-item{ display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--text-dark); }
.legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

/* Quantity progress by category */
.qty-progress-row{ margin-bottom:16px; }
.qty-progress-row:last-child{ margin-bottom:0; }
.qty-progress-row .qty-progress-head{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;
}
.qty-progress-row .qty-progress-label{ font-weight:700; font-size:.9rem; }
.qty-progress-row .qty-progress-pct{ font-size:.82rem; font-weight:700; color:var(--text-muted); }
.qty-progress-track{
  height:10px; border-radius:20px; background:#eef0f6; overflow:hidden;
}
.qty-progress-fill{
  height:100%; border-radius:20px; background:linear-gradient(90deg, var(--blue-royal), #7686e6);
  transition:width .5s ease;
}
.qty-progress-row.complete .qty-progress-fill{ background:linear-gradient(90deg, var(--green-dark), var(--green)); }
.qty-progress-meta{ font-size:.74rem; color:var(--text-muted); margin-top:4px; }

.expected-card{
  background:#fdf6dd;
  border:1px solid #f0e0a0;
  border-radius:8px;
  padding:14px 16px;
  height:100%;
}
.expected-card h6{ font-weight:700; margin-bottom:10px; }
.expected-card ol{ padding-left:20px; margin:0; }
.expected-card li{ margin-bottom:8px; font-size:.9rem; }

.filters-bar{
  display:flex;
  gap:14px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.filters-bar .filter-group{ display:flex; flex-direction:column; gap:4px; }
.filters-bar label{ font-weight:700; font-size:.85rem; }

.daterange-popover{
  position:absolute;
  top:calc(100% + 6px); right:0;
  background:#fff;
  border:1px solid var(--grey-border);
  box-shadow:var(--shadow-md);
  border-radius:8px;
  padding:16px;
  z-index:100;
  width:280px;
  display:none;
}
.daterange-popover.show{ display:block; }