/* 1. Global Reset & Body Setup */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: black; /* Fills screen background */
}

/* 2. Wrapper & Layout Setup */
#wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  display: flex; /* Changed from inline-block to flex to remove whitespace gaps */
  flex-direction: column;
  background-color: black;
}

/* 3. Typography */
@font-face {
    font-family: 'ibm_3270regular';
    src: url('fonts/3270-regular-webfont.woff2') format('woff2'),
         url('fonts/3270-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 4. Structural Elements (Fixed Display & Conflict Rules) */
header, main, footer {
  display: block; /* Native block display removes inline-block margin gaps */
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  font-family: 'ibm_3270regular', monospace;
  background-color: black;
}

header {
  height: 10px;
}

main {
  flex: 1; /* Makes main take up all remaining screen height */
  padding: 20px 0;
}

footer {
  height: 0px;
}

/* 5. Date & Time Elements */
date {
  display: block;
  margin: 20px auto;
  font-family: 'ibm_3270regular', monospace;
  color: white;
  font-size: 28px;
}

/* 6. Media Containers */
.video-container {
  margin: 0 auto;
  display: block;
  width: 25%;
  min-width: 300px; 
  background-color: black;
}

.video-container video {
  width: 100%;
  height: auto;
  display: block; /* Removes thin whitespace beneath video tag */
}

/* 7. Grid Desktop Icons (Arranges them horizontally) */
.folder, .txt-doc {
  display: inline-block; /* Kept inline-block only for the desktop icons */
  vertical-align: top;
  width: 150px;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  font-family: 'ibm_3270regular', monospace;
  margin: 10px;
}

/* Focus / Active highlights */
.folder:focus, .folder:active, .txt-doc:focus, .txt-doc:active {
  background-color: rgba(255, 255, 255, 0.2);
  outline: 1px dotted rgba(255, 255, 255, 0.5);
}

.folder-icon, .txt-icon {
  font-size: 120px;
  margin-bottom: 5px;
}

/* Forced high-priority layer rendering for desktop emojis over hardware video containers */
.emoji {
  display: inline-block;
  position: relative;
  z-index: 9999; /* Forces icons onto the top visual layer of the desktop */
  color: initial; 
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

.folder-name, .doc-name {
  color: white;
  font-size: 12px;
  text-shadow: 1px 1px 1px black;
  word-break: break-word;
}

/* 8. Retro Popup Window System */
.window-overlay {
  display: none; /* Keeps them hidden until double-clicked */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Dims the background */
  z-index: 100000; /* Increased to stay directly ABOVE the desktop emoji icons */
  
  /* Forces the layout window boxes to center perfectly on the screen */
  justify-content: center;
  align-items: center;
}

.window-box {
  background-color: black;
  border: 2px solid white;
  width: 400px;
  max-width: 90%;
  font-family: 'ibm_3270regular', monospace;
  color: white;
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);
}

.window-header {
  background-color: white;
  color: black;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.close-btn {
  background: none;
  border: none;
  color: black;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
}

.close-btn:hover {
  color: red;
}

.window-body {
  padding: 20px;
  text-align: left;
  font-size: 16px;
  line-height: 1.4;
}

/* 9. Retro Input & Form Layout Styles */
.mail-window {
  width: 450px; /* Slightly wider layout to accommodate fields comfortably */
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form-group label {
  color: white;
  font-family: 'ibm_3270regular', monospace;
  font-size: 14px;
  margin-bottom: 5px;
}

.form-group input {
  background-color: black;
  border: 1px solid white;
  color: #00ff00; /* Distinct retro console text focus entry */
  padding: 8px 10px;
  font-family: 'ibm_3270regular', monospace;
  font-size: 16px;
  outline: none;
}

/* Adds highlight glow focus when working inside fields */
.form-group input:focus {
  border-color: #00ff00;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.terminal-submit-btn {
  background-color: white;
  color: black;
  border: 2px solid white;
  width: 100%;
  padding: 10px;
  font-family: 'ibm_3270regular', monospace;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.terminal-submit-btn:hover {
  background-color: black;
  color: white;
  border-color: white;
}

.terminal-submit-btn:active {
  background-color: #222;
}