/* Frutiger Aero Glassmorphism Styles */

/* Base glass effect for windows and cards */
.glass-window {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* Highlight edge effect for top of glass elements */
.glass-window::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

/* Left edge highlight */
.glass-window::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

/* Content area with subtle glass effect */
.glass-content {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dark glass variant for terminal and dark UI elements */
.glass-dark {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Dark content area */
.glass-dark-content {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Glass header for window headers */
.glass-header {
  background: rgba(18, 137, 167, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Glossy shine on header */
.glass-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
  pointer-events: none;
}

/* Glass buttons */
.glass-button {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.2s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.glass-button:active {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

/* Glossy button shine */
.glass-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 0.5rem 0.5rem 0 0;
  pointer-events: none;
}

/* Colored glass variants */
.glass-button.glass-orange {
  background: rgba(247, 159, 31, 0.4);
  border: 1px solid rgba(247, 159, 31, 0.5);
}

.glass-button.glass-orange:hover {
  background: rgba(247, 159, 31, 0.5);
}

.glass-button.glass-green {
  background: rgba(196, 229, 56, 0.3);
  border: 1px solid rgba(196, 229, 56, 0.5);
}

.glass-button.glass-green:hover {
  background: rgba(196, 229, 56, 0.4);
}

.glass-button.glass-red {
  background: rgba(234, 32, 39, 0.3);
  border: 1px solid rgba(234, 32, 39, 0.5);
}

.glass-button.glass-red:hover {
  background: rgba(234, 32, 39, 0.4);
}

.glass-button.glass-blue {
  background: rgba(18, 137, 167, 0.3);
  border: 1px solid rgba(18, 137, 167, 0.5);
}

.glass-button.glass-blue:hover {
  background: rgba(18, 137, 167, 0.4);
}

/* Content area with subtle glass effect */
.glass-content {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Icon background glass effect */
.glass-icon {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.2s ease;
}

.glass-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent);
  border-radius: 1rem;
  pointer-events: none;
}

/* Frosted glass for less prominent elements */
.glass-frosted {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}