/* Dashboard Grid Layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.packs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Panel Styles */
.recipients-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Letter content styles */
.letter-preview {
  background: white;
  border: 2px solid var(--color-border);
  padding: 2rem;
  font-family: var(--font-family-serif);
  line-height: 1.6;
  margin: 2rem 0;
  border-radius: 4px;
}

/* Component layout styles */
.actions-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-group {
  display: flex;
  gap: 0.5rem;
}

/* Signature styles */
.signature-image {
  max-width: 200px;
  height: auto;
  border: 1px solid var(--color-border);
  padding: 0.5rem;
  background: white;
}

.signature-canvas {
  border: 1px solid var(--color-border);
  background: white;
  cursor: crosshair;
  display: block;
  border-radius: 4px;
  object-fit: contain;
  width: 100%;
  height: 250px;
}

/* Responsive Design */
@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
  }
  
  .recipients-panel {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
  }

  .packs-grid {
    grid-template-columns: 1fr 1fr;
  }

  .actions-content {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }


}

@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }

  .packs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.system-status-marquee {
  background-color: var(--color-primary);
  color: white;
  font-family: 'CommitMonoIndustrial', monospace;
  font-size: 10px;
  padding: 1px 0;
  overflow: hidden;
  white-space: nowrap;
}

.system-status-marquee marquee {
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 768px) {
  .system-status-marquee {
    font-size: 9px;
  }
  
  /* Hide marquee element on mobile */
  .system-status-marquee marquee {
    display: none !important;
  }
  
  /* Show mobile version */
  .system-status-marquee .mobile-marquee {
    display: inline-block !important;
    color: white;
    text-transform: uppercase;
    white-space: nowrap;
    animation: mobile-scroll 10s linear infinite;
  }
}

/* Hide mobile version on desktop */
.system-status-marquee .mobile-marquee {
  display: none;
}

@keyframes mobile-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}