/* ==========================================================================
   Ain Shams University - Central High-Performance Card & Container System
   Standardized heights, generous breathing room, and flexible content wrappers
   ========================================================================== */

/* 1. Portal Gateway & Navigation Cards */
.nav-card,
.portal-card,
.gateway-card {
  min-height: 380px !important;
  height: auto !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 20px !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.nav-card-desc,
.nav-card p,
.portal-card p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--text-secondary, #94a3b8) !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

/* 2. Theses Intelligence & Readiness Cards (v1 & v2) */
.thesis-card,
.readiness-card,
.doc-card {
  min-height: 490px !important;
  height: 100% !important;
  padding: 1.65rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.thesis-card .card-title,
.thesis-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  min-height: 58px !important;
  margin-bottom: 0.5rem !important;
  color: var(--text-primary, #ffffff) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.thesis-abstract,
.justification-preview,
.thesis-card .card-body p {
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
  color: var(--text-secondary, #94a3b8) !important;
  min-height: 60px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 3. KPI & Executive Metric Cards */
.kpi-card,
.stat-card,
.metric-summary-card {
  min-height: 140px !important;
  height: auto !important;
  padding: 24px 28px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.kpi-card .kpi-subtext,
.stat-card .stat-desc {
  font-size: 0.825rem !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
  color: var(--text-secondary, #94a3b8) !important;
}

/* 4. Tier 1 Institutional Standards Cards */
.standard-card,
.std-card,
.tier1-card {
  min-height: 380px !important;
  height: 100% !important;
  padding: 30px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border-radius: 20px !important;
}

.standard-card .standard-desc,
.std-desc {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--text-secondary, #94a3b8) !important;
  min-height: 72px !important;
}

/* 5. Analytics & Visualization Chart Cards */
.chart-card,
.analytics-card,
.graph-container-card {
  min-height: 460px !important;
  padding: 24px 28px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.chart-card .chart-header,
.analytics-card .card-header {
  margin-bottom: 18px !important;
}

.chart-card .chart-title,
.analytics-card h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.chart-card .chart-subtitle,
.analytics-card p {
  font-size: 0.825rem !important;
  line-height: 1.5 !important;
  color: var(--text-secondary, #94a3b8) !important;
  margin-top: 4px !important;
}

/* 6. Detailed Metric Breakdown Boxes (Modals & Deep Evaluation) */
.metric-box,
.evaluation-box,
.detail-item-card {
  min-height: 135px !important;
  padding: 16px 20px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.metric-justification,
.metric-box p,
.evaluation-reasoning {
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
  color: var(--text-secondary, #94a3b8) !important;
}

/* 7. Grid Alignment & Spacing Utilities */
.theses-grid,
.cards-grid,
.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* 8. Symmetric Date Filter Toolbar & Period Grid System */
.period-grid-container {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 6px !important;
  flex: 1 !important;
}

.period-btn-all {
  min-width: 105px !important;
  justify-content: center !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}

.quarter-pill-grid {
  grid-column: span 3 !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 6px 4px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.month-pill-grid {
  grid-column: span 1 !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 6px 2px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.filter-row-label,
.filter-label-fixed {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-secondary, #94a3b8) !important;
  width: 130px !important;
  flex: 0 0 130px !important;
}

@media (max-width: 768px) {
  .theses-grid,
  .cards-grid,
  .standards-grid {
    grid-template-columns: 1fr !important;
  }
  .thesis-card {
    min-height: 420px !important;
  }
  .period-grid-container {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .quarter-pill-grid {
    grid-column: span 2 !important;
  }
  .month-pill-grid {
    grid-column: span 1 !important;
  }
}