/* CSS VARIABLES SECTION */
:root {
  --text-color: #18011f; /* Default text color for light mode */
  --clipboard-bg: rgba(
    242,
    250,
    247,
    0.2
  ); /* Semi-transparent clipboard background for light mode */
  --clipboard-bg-out: rgba(
    242,
    250,
    247,
    0.1
  ); /* Semi-transparent clipboard background for light mode */
  --shadow-color: rgba(
    0,
    0,
    0,
    0.1
  ); /* Shadow color for elements in light mode */
  --border-color: #ccc; /* Border color for elements in light mode */
  --gradient-light: linear-gradient(
    135deg,
    #eb7893,
    #7969f0
  ); /* Light theme gradient (pink to purple) */
  --gradient-dark: linear-gradient(
    135deg,
    #1a1a2e,
    #4a1f6c
  ); /* Dark theme gradient (dark blue to darker blue) */
  --clipboard-bg-dark: rgba(
    30,
    30,
    40,
    0.5
  ); /* Semi-transparent clipboard background for dark mode */
  --clipboard-bg-dark-out: rgba(
    30,
    30,
    40,
    0.3
  ); /* Semi-transparent clipboard background for dark mode */
  --footer-color: rgba(0, 0, 0, 0.7); /* Footer text color for light mode */
  --footer-color-dark: rgba(
    255,
    255,
    255,
    0.8
  ); /* Footer text color for dark mode */
}

/* BODY STYLES - LIGHT MODE */
body {
  padding: 20px; /* Space around the edges of the page */
  background: var(--gradient-light); /* Use the light gradient background */
  height: 100vh; /* Make sure the body fills the whole screen height */
  margin: 0; /* Remove default margins */
  font-family: Arial, sans-serif; /* Default font for the page */
  transition: background 0.5s ease; /* Smooth transition when changing themes */
  color: var(--text-color); /* Default text color */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack elements vertically */
  box-sizing: border-box;
  overflow: hidden;
}

/* BODY STYLES - DARK MODE */
body.dark-mode {
  --text-color: #f0f0f0; /* Light text color for dark mode */
  --clipboard-bg: var(--clipboard-bg-dark); /* Input clipboard background */
  --clipboard-bg-out: var(
    --clipboard-bg-dark-out
  ); /* Output clipboard background */
  --shadow-color: rgba(0, 0, 0, 0.3); /* Darker shadow for dark mode */
  --border-color: #444; /* Darker border for dark mode */
  background: var(--gradient-dark); /* Apply dark gradient background */
  color: var(--text-color); /* Update text color for dark mode */
}

/* HEADER STYLES */
h1 {
  text-align: center; /* Center the text */
  margin: 20px auto; /* Space above and below, center horizontally */
  font-family: "Press Start 2P", cursive; /* Use the pixelated retro font */
  font-variant: small-caps; /* Convert text to small caps */
  font-size: 64px; /* Large font size */
  color: var(--text-color); /* Use theme-aware text color */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  transition: color 0.3s ease; /* Smooth color transition when themes change */
}

/* MAIN CONTENT CONTAINER */
.clipboard-panel {
  flex-grow: 1; /* Take up available space */
  display: flex; /* Use flexbox for internal layout */
  flex-direction: column; /* Stack elements vertically */
  gap: 20px; /* Space between elements */
  margin-bottom: 20px; /* Space before footer */
  min-height: 0;
}

/* Positioning of the div for in and output tab buttons */
.tab-switcher {
  position: relative;
  top: 1px; /* overlaps the panel border by 1px */
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

/* General tab button stuff */
.tab-switcher button {
  border: 1px solid var(--border-color); /* Border color (changes with theme) */
  border-bottom: none; /* active tab has no bottom border */
  border-radius: 8px 8px 0 0; /* rounded top corners only */
  font-family: "Courier New", monospace;
  font-size: 12px;
}

#tabIn {
  background-color: var(--clipboard-bg);
}

#tabOut {
  background-color: var(--clipboard-bg-out);
}

.tab-switcher button.inactive {
  background: var(--clipboard-bg-out); /* visually behind */
  border-bottom: 1px solid var(--border-color); /* border restored */
}

/* TEXT AREA STYLES (separated for clipboard and redaction areas) */
#clipboardOut {
  display: none; /* hidden by default */
  background-color: var(--clipboard-bg-out);
}

#clipboardIn {
  background-color: var(--clipboard-bg);
}

#clipboardIn,
#clipboardOut {
  flex: 1; /* grow to fill remaining space*/
  min-height: 0; /* allow shrinking below natural size */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 0 15px var(--shadow-color); /* Shadow for depth (changes with theme) */
  padding: 20px; /* Internal spacing */
  margin: 0 auto; /* Center horizontally */
  width: 80%; /* Take 80% of the width */
  max-width: 800px; /* Maximum width */
  border: 1px solid var(--border-color); /* Border color (changes with theme) */
  color: var(--text-color); /* Text color (changes with theme) */
  outline: none; /* Remove default focus outline */
  transition: all 0.3s ease; /* Smooth transitions for all properties */
  resize: none; /* Disable manual resizing */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
  font-family: "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5; /* Line spacing for readability */
}

#redactPatterns {
  flex: none; /* grow to fill remaining space*/
  min-height: 0; /* allow shrinking below natural size */
  height: 90px; /* */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 0 15px var(--shadow-color); /* Shadow for depth (changes with theme) */
  padding: 20px; /* Internal spacing */
  margin: 0 auto; /* Center horizontally */
  width: 80%; /* Take 80% of the width */
  max-width: 800px; /* Maximum width */
  border: 1px solid var(--border-color); /* Border color (changes with theme) */
  background-color: var(--clipboard-bg);
  color: var(--text-color); /* Text color (changes with theme) */
  outline: none; /* Remove default focus outline */
  transition: all 0.3s ease; /* Smooth transitions for all properties */
  resize: none; /* Disable manual resizing */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
  font-family: "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5; /* Line spacing for readability */
}

/* REDACTION PATTERNS BOX SPECIFIC STYLES */
#redactPatterns {
  min-height: 25px; /* Smaller minimum height */
  border-top: 1px solid var(--border-color); /* Top border for visual separation */
}

/* BUTTON CONTAINER */
.button-container-exp {
  flex-wrap: wrap;
  display: flex;
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  gap: 20px; /* Space between buttons */
  margin: 20px auto; /* Center and add margin */
  width: 80%;
  max-width: 800px;
  padding: 40px 20px 40px 20px; /* Add padding inside box */
  background-color: rgba(200, 200, 200, 0.15); /* Slight gray shade */
  border-radius: 12px; /* Rounded corners */
  position: relative; /* For positioning the label */
  font-family: "Courier New", monospace;
}

/* BUTTON CONTAINER FOR CUSTOM TEXT */
.button-container {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center buttons horizontally */
  gap: 20px; /* Space between buttons */
  margin: 10px auto; /* Center and add margin */
  width: 80%; /* Match text area width */
  max-width: 800px; /* Maximum width */
}

.experimental-label {
  position: absolute; /* Position in upper left */
  top: 8px;
  left: 15px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  letter-spacing: 1px;
}

/* TOGGLE BUTTON CONTAINER */
.toggle-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  /* z-index: 1000; */
}

.placeholder-toggle {
  width: 100%; /* forces a new line in the flex container */
  text-align: center;
  font-family: "Press Start 2P", cursive;
  font-size: 12px;
}

/* BUTTON STYLES (applies to both toggle and redaction buttons)  */
.toggle-btn,
.redact-btn {
  background: var(--text-color); /* Button background matches text color */
  color: #ffffff; /* White text */
  border: none; /* No border */
  padding: 10px 20px; /* Internal spacing */
  border-radius: 20px; /* Rounded corners */
  font-family: "Press Start 2P", cursive;
  font-size: 12px;
  cursor: pointer; /* Show hand cursor on hover */
  transition: all 0.3s ease; /* Smooth transitions for all properties */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* BUTTON STYLES IN DARK MODE */
body.dark-mode .toggle-btn,
body.dark-mode .redact-btn {
  background: #f0f0f0; /* Light background in dark mode */
  color: #121212; /* Dark text in dark mode */
}

/* BUTTON HOVER EFFECTS */
.toggle-btn:hover,
.redact-btn:hover {
  transform: scale(1.05); /* Slightly enlarge the button */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

/* PLACEHOLDER TEXT STYLES IN TEXT FIELDS */
#clipboardText:empty::before,
#redactPatterns:empty::before {
  content: attr(placeholder); /* Show the placeholder attribute content */
  color: #888; /* Gray color */
  font-style: italic; /* Italic text */
}

/* FOOTER STYLES */
.footer {
  text-align: center; /* Center the text */
  padding: 10px; /* Internal spacing */
  margin-top: auto; /* Push to bottom */
  color: var(--footer-color); /* Footer text color (changes with theme) */
  font-family: "Consolas", monospace; /* Monospace font */
  font-size: 10px; /* Small font size */
  transition: color 0.3s ease; /* Smooth color transition */
}

/* FOOTER STYLES IN DARK MODE */
body.dark-mode .footer {
  color: var(--footer-color-dark); /* Dark mode footer color */
}

/*FOOTER TEXT TOGGLE */
.footer-dark {
  display: none; /* Hide dark mode text by default */
}
body.dark-mode .footer-light {
  display: none; /* Hide light mode text in dark mode */
}
body.dark-mode .footer-dark {
  display: block; /* Show dark mode text in dark mode */
}