/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand Colors */
  --color-blinc-blue: #2E5AA7;
  --color-deep-navy: #1A3A6D;
  --color-pure-black: #000000;
  --color-clean-white: #FFFFFF;
  --color-subtle-gray: #F8F9FA;
  --color-border: #E0E0E0;

  /* Status Colors */
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  /* Standard warning, adjusted if needed */
  --color-danger: #E53935;
  --color-neutral: #9E9E9E;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: 1px solid rgba(255, 255, 255, 0.5);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-subtle-gray);
  color: var(--color-pure-black);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Layout */
.container {
  max-width: 1200px;
  /* Dashboard width */
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* Header / Launch Snapshot */
.header-card {
  background: var(--color-clean-white);
  border-radius: 12px;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  border: 1px solid var(--color-border);
}

.brand-logo {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: var(--spacing-sm);
  display: inline-flex;
  align-items: center;
}

.brand-logo .bl {
  color: var(--color-pure-black);
}

.brand-logo .inc {
  color: var(--color-blinc-blue);
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
  width: 100%;
}

.snapshot-item label {
  display: block;
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.snapshot-item .value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-deep-navy);
}

/* Sections */
.dashboard-section {
  margin-bottom: var(--spacing-xl);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--color-deep-navy);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Milestones */
.milestones-container {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: var(--spacing-sm);
}

.milestone-card {
  flex: 1;
  min-width: 200px;
  background: var(--color-clean-white);
  padding: var(--spacing-md);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-neutral);
}

.milestone-card.status-complete {
  border-left-color: var(--color-success);
}

.milestone-card.status-in-progress {
  border-left-color: var(--color-blinc-blue);
}

.milestone-card.status-blocked {
  border-left-color: var(--color-danger);
}

.m-name {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  font-size: 14px;
}

.m-status {
  font-size: 12px;
  color: #666;
}

.m-owner {
  font-size: 11px;
  color: #999;
  margin-top: var(--spacing-xs);
}

/* Issues */
.issues-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 buckets */
  gap: var(--spacing-lg);
}

.severity-bucket {
  background: var(--color-clean-white);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.bucket-header {
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

.bucket-header.critical {
  background: #FFEBEE;
  color: var(--color-danger);
}

.bucket-header.major {
  background: #FFF3E0;
  color: var(--color-warning);
}

.bucket-header.minor {
  background: #E3F2FD;
  color: var(--color-blinc-blue);
}

.bucket-header.resolved {
  background: #E8F5E9;
  color: var(--color-success);
}

.issue-list {
  padding: var(--spacing-md);
  max-height: 300px;
  overflow-y: auto;
}

.issue-item {
  padding: var(--spacing-sm);
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

.issue-item:last-child {
  border-bottom: none;
}

.issue-title {
  font-weight: 500;
  font-size: 14px;
}

.issue-impact {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* Confidence */
.confidence-card {
  background: var(--color-clean-white);
  padding: var(--spacing-xl);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  text-align: left;
}

.confidence-status {
  font-size: 48px;
  font-weight: 700;
  /* margin-bottom removed since side-by-side */
  min-width: 120px;
  text-align: center;
}

.confidence-content {
  flex: 1;
  border-left: 1px solid var(--color-border);
  padding-left: var(--spacing-xl);
}

.confidence-high {
  color: var(--color-success);
}

.confidence-medium {
  color: var(--color-warning);
}

.confidence-low {
  color: var(--color-danger);
}

.reasons-list {
  color: #444;
}

/* Utility */
.badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Auth Overlay */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.auth-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  width: 350px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.form-group {
  text-align: left;
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
}

.form-group input,
.form-control {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
}

.btn-primary {
  background: var(--color-blinc-blue);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.btn-primary:hover {
  background: var(--color-deep-navy);
}

.btn-secondary {
  background: white;
  color: #666;
  border: 1px solid #ccc;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.btn-secondary:hover {
  background: #f5f5f5;
  color: #333;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
}

.btn-sm:hover {
  background: #eee;
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}/* ... existing styles ... */

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .container {
    padding: var(--spacing-md);
  }

  /* Header */
  .header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-card .actions {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
  }
  
  /* Hide management buttons on mobile if desired, or just style them smaller */
  /* User said "mostly for viewers", so maybe hide manage buttons? 
     But editors might view on mobile. Let's keep them but ensure they fit.
     The absolute positioning might conflict with logo if title is long.
     Let's just stack them normally.
  */
  
  .header-card {
    display: block; /* Reset flex */
    position: relative;
    padding-top: 50px; /* Space for actions if absolute, or just let them flow */
  }

  .header-card .actions {
     top: 15px;
     right: 15px;
  }
  
  /* Re-adjust header layout strategy for mobile */
  .header-card {
      padding: var(--spacing-md);
      display: flex;
      flex-direction: column;
  }
  
  /* Reset Actions to flow normally or stay at top */
  .header-card .actions {
      position: static;
      margin-top: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: var(--spacing-md);
      order: -1; /* Move actions (logout/tz) to top */
  }
  
  .brand-logo {
      font-size: 20px; 
  }

  .snapshot-grid {
    grid-template-columns: 1fr 1fr; /* 2x2 grid */
    gap: var(--spacing-sm);
  }
  
  .snapshot-item label {
      font-size: 10px;
  }
  
  .snapshot-item .value {
      font-size: 14px;
  }

  /* Milestones */
  /* Keep horizontal scroll but reduced padding handled by container */
  
  /* Confidence */
  .confidence-card {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    text-align: center;
  }
  
  .confidence-content {
      border-left: none;
      border-top: 1px solid var(--color-border);
      padding-left: 0;
      padding-top: var(--spacing-md);
      width: 100%;
      text-align: left;
  }
  
  .confidence-status {
      min-width: auto;
      margin-bottom: 0;
  }

  /* Issues */
  .issues-row {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: var(--spacing-md);
  }
  
  /* Hide empty buckets on mobile to save space? 
     User didn't ask for that, just "mobile friendly". Stacking is safest.
  */
}