/**
 * Mac OS X 10.0 Terminal.app Theme (Aqua style)
 */

/* Fonts loaded via HTML <link> tags */

:root {
  --aqua-chrome: linear-gradient(to bottom, #E8E8E8 0%, #D0D0D0 50%, #B8B8B8 100%);
  --aqua-border: #A0A0A0;
  --term-bg: #000000;
  --term-fg: #00FF00;
  --term-fg-dim: #00AA00;
  --term-cyan: #00FFFF;
  --term-blue: #5C8AFF;
  --term-yellow: #FFFF00;
  --term-red: #FF0000;
  --term-white: #FFFFFF;

  /* Traffic light colors */
  --btn-close: radial-gradient(circle at 30% 30%, #FF6057 0%, #FF3B30 60%, #D0251C 100%);
  --btn-min: radial-gradient(circle at 30% 30%, #FFBD2E 0%, #FFA500 60%, #D88000 100%);
  --btn-max: radial-gradient(circle at 30% 30%, #28CA41 0%, #00C851 60%, #00A041 100%);
}

body {
  font-family: 'Courier Prime', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
}

/* ==========================================
   TERMINAL WINDOW
   Aqua window with subtle shadow
   ========================================== */
.terminal {
  background: var(--aqua-chrome);
  border-radius: 10px 10px 6px 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid var(--aqua-border);
}

/* ==========================================
   WINDOW CHROME
   Aqua title bar with traffic lights
   ========================================== */
.title-bar {
  background: var(--aqua-chrome);
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #999;
  position: relative;
}

.window-controls {
  display: flex;
  gap: 8px;
  position: absolute;
  left: 8px;
}

.window-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5),
              0 1px 1px rgba(0, 0, 0, 0.3);
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  position: relative;
}

.btn-close {
  background: var(--btn-close);
}

.btn-min {
  background: var(--btn-min);
}

.btn-max {
  background: var(--btn-max);
}

/* Traffic light highlights */
.window-btn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.window-btn:hover {
  filter: brightness(1.1);
}

.window-title {
  flex: 1;
  text-align: center;
  color: #333;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  letter-spacing: 0.3px;
}

/* ==========================================
   TERMINAL CONTENT
   Classic Mac terminal with green on black
   ========================================== */
.terminal-content {
  background: var(--term-bg);
  color: var(--term-fg);
  padding: 8px 12px;
  font-weight: 500;
}

.prompt {
  color: var(--term-fg);
  font-weight: bold;
}

.prompt .host {
  color: var(--term-fg);
}

.prompt .symbol {
  color: var(--term-fg-dim);
}

.prompt .path {
  color: var(--term-fg);
}

.prompt .user {
  color: var(--term-fg);
}

#command-input {
  color: var(--term-fg);
  font-weight: 500;
}

.cursor {
  width: 7px;
  height: 14px;
  background: var(--term-fg);
  animation-duration: 0.6s;
}

/* Dim text style */
.dim {
  color: var(--term-fg-dim);
  opacity: 0.7;
}

/* Colors */
.color-cyan { color: var(--term-cyan); }
.color-blue { color: var(--term-blue); }
.color-yellow { color: var(--term-yellow); }
.color-red { color: var(--term-red); }
.color-white { color: var(--term-white); }
.color-green { color: var(--term-fg); }

/* Scrollbar - Aqua style */
.output::-webkit-scrollbar {
  width: 15px;
  background: #F0F0F0;
}

.output::-webkit-scrollbar-track {
  background: linear-gradient(to right, #E0E0E0 0%, #F0F0F0 50%, #E0E0E0 100%);
  border-left: 1px solid #C0C0C0;
}

.output::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #A0A0A0 0%, #B8B8B8 50%, #A0A0A0 100%);
  border-radius: 8px;
  border: 2px solid #F0F0F0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.output::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, #888 0%, #A0A0A0 50%, #888 100%);
}

.output::-webkit-scrollbar-button {
  height: 16px;
  background: linear-gradient(to bottom, #E0E0E0 0%, #D0D0D0 100%);
  border: 1px solid #C0C0C0;
}

.output::-webkit-scrollbar-button:vertical:decrement {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M5 3 L2 7 L8 7 Z" fill="%23666"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.output::-webkit-scrollbar-button:vertical:increment {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M5 7 L2 3 L8 3 Z" fill="%23666"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 600px) {
  .window-title {
    font-size: 10px;
  }
  .window-btn {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 500px) {
  body { font-size: 11px; }
  .terminal-content {
    padding: 6px 10px;
  }
}

@media (max-width: 380px) {
  body { font-size: 10px; }
  .window-btn {
    width: 9px;
    height: 9px;
  }
  .window-controls {
    gap: 6px;
  }
}