/* ============================================
   Layout Styles
   Desktop, content areas, and main structure
   ============================================ */

/* Boot Screen */
.boot-screen {
  position: fixed;
  inset: 0;
  background-color: #000000;
  z-index: var(--z-boot);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--duration-slow) var(--ease-out);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.boot-content {
  text-align: center;
  width: 300px;
}

.boot-logo {
  font-size: 80px;
  margin-bottom: var(--space-8);
  animation: pulse 2s var(--ease-in-out) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.boot-progress-container {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.boot-progress {
  height: 100%;
  background-color: #ffffff;
  width: 0%;
  transition: width var(--duration-slow) var(--ease-out);
  border-radius: var(--radius-full);
}

.boot-text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  font-weight: var(--weight-medium);
}

/* Desktop */
.desktop {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  background-size: 100px 100px;
  animation: desktopFadeIn var(--duration-base) var(--ease-out);
}

@keyframes desktopFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Desktop wallpaper */
.desktop[data-wallpaper] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Desktop Content Area */
.desktop-content {
  position: relative;
  flex: 1;
  overflow: hidden;
  margin-top: var(--menubar-height);
}

/* Utility layouts */
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }