/* Ensure full viewport height and prevent clipping */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent browser scrolling */
  box-sizing: border-box;
  background-color: #000000;
}

* {
  box-sizing: border-box;
}

#vt100 a { 
  text-decoration:  none;
  color:            inherit;
}

#vt100 a:hover { 
  text-decoration:  underline;
}

#vt100 #reconnect {
  position:         absolute;
  z-index:          2;
}

#vt100 #reconnect input { 
  padding:          1ex;
  font-weight:      bold;
  font-size:        x-large;
}

#vt100 #cursize {
  background:       #EEEEEE;
  border:           1px solid black;
  font-family:      sans-serif;
  font-size:        large;
  font-weight:      bold;
  padding:          1ex;
  position:         absolute;
  z-index:          2;
}

#vt100 pre { 
  margin:           0px;
}

#vt100 pre pre {
  overflow:         hidden;
}

#vt100 #scrollable {
  overflow:         hidden;   /* Prevent scrolling within terminal */
  position:         relative;
  padding:          20px;     /* Consistent padding */
  margin-bottom:    20px;     /* Reduced margin for fixed terminal */
  height:           528px;    /* Fixed height: 24 rows * 20px + 40px padding */
  width:            auto;     /* Auto width to accommodate content */
  max-width:        none;     /* Allow expansion */
  max-height:       528px;    /* Prevent expansion */
}

/* VT52 Font Definition */
@font-face {
  font-family: 'VT52';
  src: url('vt52.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#vt100 #console, #vt100 #alt_console, #vt100 #cursor, #vt100 #lineheight { 
  font-family:      "VT52", "DejaVu Sans Mono", "Everson Mono", FreeMono, "Andale Mono", "Lucida Console", monospace;
}

#vt100 #lineheight { 
  position:         absolute;
  visibility:       hidden;
}

#vt100 #cursor {
  position:         absolute;
  left:             0px;
  top:              0px;
  overflow:         hidden;
  z-index:          10;
  width:            8px;      /* Fixed character width (7px character + 1px gap) */
  height:           20px;     /* Fixed character height */
  background-color: #00ff00;  /* Bright green background */
  color:            #000000;  /* Black text for contrast */
  border:           none;
  pointer-events:   none;     /* Prevent cursor from interfering with text selection */
  animation:        blink 1s infinite;
}

/* Cursor blink animation */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Cursor states */
#vt100 #cursor.bright {
  background-color: #00ff00;  /* Bright green */
  opacity:          1;
}

#vt100 #cursor.dim {
  background-color: #004400;  /* Dim green */
  opacity:          0.7;
}

#vt100 #cursor.inactive {
  background-color: transparent;
  border:           1px solid #00ff00;
  opacity:          0.5;
}

/* Disk Drive Icons */
#disk-drives {
  position:         fixed;
  top:              10px;
  right:            10px;
  display:          flex;
  flex-direction:   column;
  gap:              8px;
  z-index:          1000;
  background:       rgba(0, 0, 0, 0.8);
  padding:          12px;
  border-radius:    8px;
  border:           2px solid #00ff00;
  box-shadow:       0 4px 8px rgba(0, 0, 0, 0.5);
}

.disk-drive {
  display:          flex;
  align-items:      center;
  gap:              8px;
  padding:          8px;
  background:       rgba(0, 0, 0, 0.6);
  border:           1px solid #00ff00;
  border-radius:    4px;
  cursor:           pointer;
  transition:       all 0.2s ease;
  min-width:        200px;
}

.disk-drive:hover {
  background:       rgba(0, 255, 0, 0.1);
  border-color:     #00ff00;
  transform:        translateX(-2px);
}

.disk-drive.mounted {
  border-color:     #00ff00;
  background:       rgba(0, 255, 0, 0.05);
}

.disk-drive.empty {
  border-color:     #666;
  opacity:          0.7;
}

.disk-drive.locked {
  opacity:           0.4;
  cursor:            not-allowed;
}

.disk-drive.locked:hover {
  background:        rgba(0, 0, 0, 0.6);
  transform:         none;
}

.disk-icon {
  font-size:        20px;
  width:            24px;
  text-align:       center;
  color:            #00ff00;
}

.disk-label {
  font-family:      "VT52", "Courier New", monospace;
  font-weight:      bold;
  color:            #00ff00;
  min-width:        20px;
}

.disk-name {
  font-family:      "VT52", "Courier New", monospace;
  font-size:        12px;
  color:            #00ff00;
  flex:             1;
  overflow:         hidden;
  text-overflow:    ellipsis;
  white-space:      nowrap;
}

.disk-status {
  font-family:      "VT52", "Courier New", monospace;
  font-size:        10px;
  color:            #888;
  text-align:       right;
  min-width:        60px;
}

#vt100 #cursor.bright { 
  background-color: #00ff00;  /* Bright green background */
  color:            #000000;  /* Black text for contrast */
  visibility:       visible;
}

#vt100 #cursor.dim {
  background-color: #004400;  /* Dim green background */
  color:            #000000;  /* Black text for contrast */
  visibility:       visible;
}

#vt100 #cursor.inactive {
  border:           1px solid #00ff00;  /* Green border */
  margin:           -1px;
}

#vt100 #padding { 
  visibility:       hidden;
  width:            1px;
  height:           0px;
  overflow:         hidden;
}

#vt100 .hidden {
  position:         absolute;
  top:              -10000px;
  left:             -10000px;
  width:            0px;
  height:           0px;
}

#vt100 #menu { 
  overflow:         visible;
  position:         absolute;
  z-index:          3;
}

#vt100 #menu .popup {
  background-color: #EEEEEE;
  border:           1px solid black;
  font-family:      sans-serif;
  position:         absolute;
}

#vt100 #menu .popup ul { 
  list-style-type:  none;
  padding:          0px;
  margin:           0px;
  min-width:        10em;
}

#vt100 #menu .popup li { 
  padding:          3px 0.5ex 3px 0.5ex;
}

#vt100 #menu .popup li.hover {
  background-color: #444444;
  color:            white;
}

#vt100 #menu .popup li.disabled {
  color:            #AAAAAA;
}

#vt100 #menu .popup hr { 
  margin:           0.5ex 0px 0.5ex 0px;
}

#vt100 #menu img { 
  margin-right:     0.5ex;
  width:            1ex;
  height:           1ex;
}

/* Classic green-on-black terminal colors */
#vt100 #scrollable { 
  color:            #00ff00;  /* Bright green text */
  background-color: #000000;  /* Black background */
}

#vt100 #scrollable.inverted { 
  color:            #ffffff;
  background-color: #000000; 
}

/* Additional styles to ensure content is visible */
#vt100 #console, #vt100 #alt_console {
  padding-bottom:   60px;     /* Increased bottom padding to console content */
  min-height:       100%;     /* Ensure console takes full height */
  margin-bottom:    20px;     /* Additional margin for safety */
  position:         relative; /* Ensure proper positioning context */
}

/* Ensure console content respects container padding */
#vt100 #console div, #vt100 #alt_console div {
  position:         relative; /* Ensure proper positioning */
  /* Remove padding-left and margin-left resets to allow container padding to work */
}

/* Ensure the main vt100 container has proper spacing */
#vt100 {
  padding:          20px;     /* Consistent padding */
  margin:           0 auto;   /* Center the terminal */
  display:          flex;     /* Use flexbox for centering */
  flex-direction:   column;   /* Stack elements vertically */
  align-items:      center;   /* Center horizontally */
  justify-content:  center;   /* Center vertically */
  min-height:       100vh;    /* Take full viewport height */
}

@media print {
  #vt100 .scrollback {
    display:        none;
  }

  #vt100 #reconnect, #vt100 #cursor, #vt100 #menu { 
    visibility:     hidden;
  }

  #vt100 #scrollable { 
    overflow:       hidden;
  }

  #vt100 #console, #vt100 #alt_console { 
    overflow:       hidden;
    width:          1000000ex;
  }
}