/* PQC Specific Styles */

/* Ensure consistent height for panels in editor-area */
@media (min-width: 900px) {
  .editor-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
      "priv pub"
      "input output1"
      "input output2";
    gap: 20px;
    margin-top: 0;
  }

  .editor-area.mlkem-encaps-mode,
  .editor-area.mlkem-decaps-mode {
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
      "priv pub"
      "input output2";
  }

  .editor-area.mlkem-encaps-mode #outputPanel1,
  .editor-area.mlkem-decaps-mode #outputPanel1 {
    display: none;
  }

  .editor-area.mldsa-sign-mode,
  .editor-area.slhdsa-sign-mode,
  .editor-area.fndsa-sign-mode {
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
      "priv pub"
      "input output1";
  }

  .editor-area.mldsa-verify-mode,
  .editor-area.slhdsa-verify-mode,
  .editor-area.fndsa-verify-mode {
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
      "priv pub"
      "input output1"
      "result result";
  }

  #verifyResultPanel { grid-area: result; display: none; flex-direction: column; }
  
  #privKeyPanel { grid-area: priv; display: flex; flex-direction: column; }
  #pubKeyPanel { grid-area: pub; display: flex; flex-direction: column; }
  #inputPanel { grid-area: input; display: flex; flex-direction: column; }
  #outputPanel1 { grid-area: output1; display: flex; flex-direction: column; }
  #outputPanel2 { grid-area: output2; display: flex; flex-direction: column; }
  
  .panel.full-width {
    grid-column: span 2;
  }
}

.verify-result {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 24px;
  font-weight: bold;
  min-height: 120px;
  border: 1px solid #1f2937;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 0;
  padding: 10px 10px 10px 12px;
}

.light-theme .verify-result {
  background: #ffffff;
  border-color: #d1d5db;
}

.verify-result.success {
  color: #10b981;
}

.verify-result.error {
  color: #ef4444;
}

.editor-area.has-result #output1,
.editor-area.has-result #output2 {
  display: none;
}

.editor-area.has-result #verifyResult {
  display: flex !important;
}

.panel-body textarea {
  min-height: 120px;
}