/* ============================================
   USER.CSS - Orange theme for user-facing pages
   Import base.css first, then apply theme overrides
   ============================================ */

@import url('base.css');

/* === Orange Theme Variables === */
:root {
  /* Primary colors */
  --bg: #FBF1EB;
  --background: #FBF1EB;
  --accent: #FF7033;
  --primary: #FF7033;
  --accent-gradient: linear-gradient(135deg, #FF7033, #FF9068);

  /* Hover and interaction states */
  --accent-hover: #E65C28;
  --accent-light: #FFE5DB;
  --secondary-hover: #FFD4C4;
  --accent-shadow: rgba(255, 112, 51, 0.3);
  --focus-shadow: rgba(255, 112, 51, 0.15);
}

/* === User Dashboard Grid Layout === */
.dashboard-grid-container {
  display: grid;
  grid-template-areas:
    "announcement announcement announcement"
    "preparedness actions risk"
    "installed recommended saved";
  grid-template-columns: 1.7fr 1.05fr 1.2fr;
  grid-template-rows: auto auto auto;
  gap: var(--gap);
  width: 100%;
  margin: 0 auto;
}

.dashboard-announcement { grid-area: announcement; }
.dashboard-profile { grid-area: profile; }
.dashboard-recommended { grid-area: recommended; }
.dashboard-resilience { grid-area: resilience; }
.dashboard-risk { grid-area: risk; }
.dashboard-actions { grid-area: actions; }
.dashboard-badges { grid-area: badges; }

@media (max-width: 1300px) {
  .dashboard-grid-container {
    grid-template-areas:
      "announcement announcement"
      "preparedness risk"
      "actions actions"
      "installed recommended"
      "saved saved";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr auto;
  }
  .dashboard-risk { grid-area: risk; }
}

@media (max-width: 1000px) {
  .dashboard-grid-container {
    grid-template-areas:
      "announcement"
      "preparedness"
      "risk"
      "actions"
      "installed"
      "recommended"
      "saved";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}