/**
 * Prompt Enhancer - Stylesheet
 *
 * Dark theme inspired by Diskrot with gradient background
 * Responsive design with mobile-first approach
 */

/* ===== GLOBAL RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== BODY & BACKGROUND ===== */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    /* Complex gradient background with radial and linear gradients */
    background: radial-gradient(circle at 20% 20%, rgba(102,0,0,0.7), transparent 60%),
                radial-gradient(circle at 80% 80%, rgba(0,0,102,0.7), transparent 60%),
                linear-gradient(135deg, #330000, #000033);
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ===== TOP NAVIGATION ===== */
.top-nav {
    width: 100%;
    background-color: black;
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.top-nav a {
    font-size: 0.75em;
    color: white;
    text-decoration: none;
    margin-right: 20px;
    cursor: pointer;
}

/* Diskrot branding link style */
.diskrot-link {
    color: red;
}

.top-nav-link:hover {
    text-decoration: none;
    color: black;
    background-color: white;
}

/* ===== LAYOUT STRUCTURE ===== */
.container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    flex-direction: column;
    padding-top: 40px; /* Account for fixed navigation */
    align-items: center;
    justify-content: flex-start;
}

.main-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    margin: 0 auto;
    overflow-y: auto;
}

/* Navigation content positioning */
.nav-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    position: absolute;
    left: 45%;
    bottom: 6%;
}

/* ===== NAVIGATION LINKS ===== */
.nav-link {
    font-size: 2rem;
    margin: 15px 0;
    text-decoration: none;
    color: white;
    transition: color 0.3s;
    text-align: left;
}

.nav-link:hover {
    background-color: white;
    color: black;
}

/* ===== CONTENT SECTIONS ===== */
.content {
    display: none;
    padding: 20px;
    width: 100%;
    max-width: 800px;
    text-align: left; /* left align everything by default */
}

/* Middle Finger section - monospace font styling */
.middleFinger {
    font-size: 0.85em;
    font-weight: lighter;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
}

.middleFinger p {
    margin-bottom: 20px;
}

.middleFinger ul {
    padding-left: 20px;
}

.middleFinger li {
    list-style-type: square;
}

/* ===== TEAM SECTION ===== */
.human {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.team {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.team img {
    padding: 5px;
    border-radius: 10%;
}

.teamLabel {
    font-weight: bolder;
    letter-spacing: 0.1em;
}

/* ===== WHAT SECTION ===== */
#what {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px;
    margin-top: 150px;
    align-items: center;
    text-align: center;
}

/* ===== TYPOGRAPHY ===== */
blockquote {
    position: relative;
    font-size: 1.5rem;
}

blockquote p {
    font-weight: bold;
}

/* Code section with large monospace font */
.code-font {
    font-family: monospace;
    font-size: 2.5em;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px;
    margin-top: 10px;
    align-items: center;
}

.code-link {
    color: black;
    background-color: white;
    padding: 5px;
    word-spacing: 1em;
    text-decoration: none;
    transition: color 0.3s;
    border-radius: 0.12em;
}

.code-link:hover {
    color: white;
    background-color: black;
}

/* ===== MISCELLANEOUS STYLES ===== */
#signature {
    text-align: right;
}

/* Diskrot branding styles */
.diskrot-red {
    color: #000;
    background-color: #fff;
    font-weight: bold;
}

.bio-link,
.humanLabel {
    color: black;
    background-color: white;
    border-radius: .2em;
    text-decoration: none;
    padding: 2px;
    margin-bottom: 5px;
}

.bio-link:hover {
    color: black;
    background-color: white;
}

.humanLabel {
    float: left;
    position: absolute;
    margin-top: 180px;
}

/* ===== RESPONSIVE DESIGN ===== */
/* Tablet breakpoint */
@media (max-width: 768px) {
    .main-content {
        padding: 15px;
        max-width: 100%;
    }

    .content {
        padding: 15px;
        max-width: 100%;
    }

    .team img {
        height: 100px;
    }

    .humanLabel {
        display: none;
    }

    .nav-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        position: absolute;
        left: 25%;
        bottom: 10%;
    }
}

/* Mobile breakpoint
 * - Trim padding for compact layout
 * - Center headers and text button rows
 * - Keep icon clusters pinned to the right
 */
@media (max-width: 480px) {
  .main-content {
    padding: 10px;
  }

  .content {
    padding: 10px;
  }

  .input-group {
    margin-bottom: 0.75rem;
  }

  button {
    width: auto; /* keep buttons at their natural size */
    margin-bottom: 0.25rem; /* tighten vertical spacing */
    margin-right: 0;
  }

  h1,
  .output h2 {
    text-align: center; /* center main heading and output titles */
  }

  .label-row label {
    flex-basis: 100%; /* stack label above buttons on narrow screens */
    margin: 0 auto; /* center label when it spans full width */
    text-align: center; /* ensure label text is centered */
  }

  /* Center text-based controls but keep icon clusters pinned right */
  .label-row .button-col {
    width: 100%;
    margin-left: 0; /* drop desktop right alignment */
    justify-content: center; /* default to middle for text buttons */
  }
  .label-row .button-col .icon-button:first-of-type {
    margin-left: auto; /* first icon nudges its group to the edge */
  }

  /* allow button stacks to size naturally so icon groups stay intact */
}

/* ===== FORM ELEMENTS ===== */
h1 {
    margin-bottom: 1rem;
}

/* Input group container */
.input-group {
    margin-bottom: 1rem;
    width: 100%;
}

.input-group label {
    display: block;
    margin-bottom: 0.25rem;
}

/* Textarea styling */
textarea {
    width: 100%;
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 0.5rem;
    min-height: 15vh;
}

/* Specific textarea heights */
#base-input,
#neg-input {
    min-height: 10vh;
}

textarea[id^="base-order-input"],
textarea[id^="pos-order-input"],
textarea[id^="neg-order-input"],
textarea[id^="divider-order-input"],
textarea[id^="pos-depth-input"],
textarea[id^="neg-depth-input"] {
    min-height: 2em;
}

/* Select dropdown styling */
select {
    width: 100%;
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Number input styling */
input[type=number] {
    width: 100%;
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

/* Button styling */
button {
    margin-right: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff;
    color: #000;
    border: none;
    cursor: pointer;
}

#generate {
    display: block;
    margin: 1rem auto; /* center the generate button */
}

/* Checkbox label styling */
/* Flex container wraps buttons on narrow screens to prevent overflow */
.label-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
  flex-wrap: wrap; /* drop controls to new line instead of overshooting */
}

.label-row label {
  margin-right: auto; /* push button stack to the right */
  /* When wrapping occurs, label stays on top while buttons follow */
}


/* Toggle buttons replacing the sliders */
.toggle-button {
    background: transparent;
    border: 1px solid #888;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-button:not(.hide-button).active {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  border-color: transparent;
}

/* Copy button styling */
.copy-button {
  background: transparent;
  border: 1px solid #888;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}

.copy-button:hover {
  background: #444;
}

.copied {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  border-color: transparent;
  transition: background 0.3s;
}

/* Row layout for textarea/input with save button */
.input-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.input-row textarea,
.input-row input[type=number],
.input-row pre {
  flex: 1;
}

/* Shared layout for button clusters.
 * Text groups sit before icons while icons still hug the edge. */
.button-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto; /* keep button groups flush right */
  flex-wrap: wrap;
  justify-content: flex-start; /* text buttons lead, icons float right */
}
.button-col.text-button-group {
  margin-left: 0; /* keep text toggles adjacent so icon group can sit separately */
  justify-content: flex-start; /* let toggles flow naturally on wide screens; mobile override centers */
}

/* On narrow screens, center text-only groups without affecting icon clusters */
@media (max-width: 480px) {
  .button-col.text-button-group {
    justify-content: center; /* align lyrics toggles with other centered buttons */
  }
}
.button-col .icon-button {
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
/* first icon pushes remaining icons as a unit to the edge */
.button-col .icon-button:first-of-type {
  margin-left: auto;
}

.toggle-button.icon-button {
  background: transparent;
  border: 1px solid #888;
  color: #fff;
}

.random-button.active {
  background: linear-gradient(45deg, #0d6efd, #6610f2);
  border-color: transparent;
}

.random-button.indeterminate {
  background: repeating-linear-gradient(
    45deg,
    #0d6efd,
    #0d6efd 5px,
    #6610f2 5px,
    #6610f2 10px
  );
  border-color: transparent;
}

.toggle-button.indeterminate:not(.hide-button) {
  background: repeating-linear-gradient(
    45deg,
    #0d6efd,
    #0d6efd 5px,
    #6610f2 5px,
    #6610f2 10px
  );
  border-color: transparent;
}

.hide-button {
  font-size: 1rem;
}

/* Save and delete button styling */
.save-button,
.delete-button {
  background: transparent;
  border: 1px solid #888;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.save-button:hover,
.delete-button:hover {
  background: #444;
}

/* ===== OUTPUT SECTION ===== */
.output h2 {
    display: flex;
    align-items: center;
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.output h2 span:first-child {
    margin-right: auto;
}

.output h2 .button-col {
  margin-left: auto;
}
.output h2 .toggle-button {
  margin-left: 0.25rem;
}

.output pre {
    background: #222;
    padding: 0.5rem;
    border: 1px solid #444;
    white-space: pre-wrap; /* Wrap long lines */
    font-family: inherit;
    margin-bottom: 1rem;
}

.stack-block {
  margin-bottom: 1rem;
}

.section-data,
.section-actions,
.section-divider,
.section-base,
.section-positive,
.section-negative,
.section-length,
.section-lyrics {
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #444;
}

.section-base {
  background: linear-gradient(45deg, rgba(13, 110, 253, 0.3), rgba(102, 16, 242, 0.3));
}

.section-positive {
  background: linear-gradient(45deg, rgba(0, 100, 0, 0.3), rgba(0, 170, 85, 0.3));
}

.section-negative {
  background: linear-gradient(45deg, rgba(102, 18, 0, 0.3), rgba(221, 44, 0, 0.3));
}

.section-divider {
  background: linear-gradient(45deg, rgba(138, 97, 0, 0.3), rgba(218, 165, 32, 0.3));
}

.section-length {
  background: linear-gradient(45deg, rgba(0, 95, 115, 0.3), rgba(10, 147, 150, 0.3));
}

.section-lyrics {
  background: linear-gradient(45deg, rgba(75, 0, 130, 0.3), rgba(138, 43, 226, 0.3));
}

.section-actions,
.section-data {
  background: linear-gradient(45deg, rgba(80, 80, 80, 0.3), rgba(40, 40, 40, 0.3));
}

/* Help mode tooltip styling */
.help-tooltip {
  position: absolute;
  background: #000;
  color: #fff;
  border: 1px solid #444;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  max-width: 200px;
  pointer-events: none;
  z-index: 2000;
}