/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Copyright (C) 2024-2026 Philippe Naveau — contact@perfshop.io */
/* PerfShop — JMeter UI — https://perfshop.io */

/**
 * modals.css — Styling for the three overlay modals.
 *
 *   .sm-*   → Scenario Manager (tree of .jmx files with drag-and-drop)
 *   .jmx-*  → JMX Editor (form-edited test plan with reset / dirty / vars)
 *   (Reports overlay reuses .sm-modal layout and report-row from components.)
 *
 * Loaded last so its higher specificity overrides any layout default.
 */

/* ══ Scenario manager ═════════════════════════════════════════════ */
.sm-modal {
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  16px;
  width:          min(780px, 96vw);
  max-height:     85vh;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  box-shadow:     0 24px 80px rgba(0, 0, 0, .6);
}
.sm-modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 22px 14px;
  border-bottom:   1px solid var(--border);
}
.sm-btn-close {
  background:      rgba(255, 255, 255, .06);
  border:          1px solid var(--border);
  border-radius:   8px;
  color:           var(--text2);
  width:           32px;
  height:          32px;
  cursor:          pointer;
  font-size:       1rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all .15s;
}
.sm-btn-close:hover {
  background:   rgba(255, 71, 87, .15);
  border-color: var(--danger);
  color:        var(--danger);
}

.sm-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  padding:         12px 22px;
  border-bottom:   1px solid var(--border);
  background:      rgba(255, 255, 255, .02);
}
.sm-toolbar-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.sm-dir-input {
  flex:          1;
  max-width:     200px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  color:         var(--text);
  padding:       .4rem .75rem;
  font-size:     .85rem;
  font-family:   'DM Sans', sans-serif;
  outline:       none;
  transition:    border-color .2s;
}
.sm-dir-input:focus { border-color: var(--accent); }

.sm-body {
  flex:           1;
  overflow-y:     auto;
  padding:        16px 22px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}
.sm-modal-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 22px;
  border-top:      1px solid var(--border);
}

.sm-group {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 12px;
  overflow:      hidden;
  transition:    border-color .2s, box-shadow .2s;
}
.sm-group.sm-drop-target { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(102, 126, 234, .25); }
.sm-group-header {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 14px;
  background:    rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--border);
}
.sm-folder-icon  { font-size: 1rem; }
.sm-group-name   { font-weight: 700; font-size: .88rem; flex: 1; }
.sm-group-count  {
  font-size:     .7rem;
  color:         var(--text2);
  background:    rgba(255, 255, 255, .06);
  padding:       2px 8px;
  border-radius: 10px;
  font-family:   var(--mono);
}
.sm-group-actions { display: flex; gap: 4px; align-items: center; }

.sm-btn-icon {
  background:    transparent;
  border:        1px solid transparent;
  border-radius: 6px;
  color:         var(--text2);
  cursor:        pointer;
  padding:       3px 7px;
  font-size:     .85rem;
  transition:    all .15s;
}
.sm-btn-icon:hover { background: rgba(255, 255, 255, .08); border-color: var(--border); color: var(--text); }
.sm-delete-btn:hover { background: rgba(255, 71, 87, .12); border-color: var(--danger); color: var(--danger); }

.sm-files {
  padding:        8px;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-height:     44px;
}
.sm-file {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 10px;
  border-radius: 8px;
  border:        1px solid transparent;
  cursor:        grab;
  user-select:   none;
  transition:    background .15s, border-color .15s;
}
.sm-file:hover { background: rgba(255, 255, 255, .05); border-color: var(--border); }
.sm-file.sm-dragging { opacity: .4; border-style: dashed; border-color: var(--accent); }
.sm-file-icon { font-size: .9rem; flex-shrink: 0; }
.sm-file-name {
  flex:          1;
  min-width:     0;
  font-size:     .83rem;
  font-family:   var(--mono);
  color:         var(--text);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.sm-drop-hint {
  text-align:     center;
  font-size:      .75rem;
  color:          var(--text2);
  padding:        10px;
  opacity:        .5;
  pointer-events: none;
}
.sm-loading, .sm-empty, .sm-error {
  text-align: center;
  padding:    24px;
  color:      var(--text2);
  font-size:  .85rem;
}
.sm-error { color: var(--danger); }

.sm-toast {
  position:       fixed;
  bottom:         28px;
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  10px;
  padding:        10px 20px;
  font-size:      .83rem;
  font-family:    'DM Sans', sans-serif;
  box-shadow:     0 8px 30px rgba(0, 0, 0, .4);
  z-index:        2000;
  transition:     opacity .4s;
  pointer-events: none;
  opacity:        0;
}
.sm-toast-error { border-color: var(--danger); color: var(--danger); }
.sm-toast-ok    { border-color: rgba(46, 213, 115, .4); color: var(--success); }

/* ══ JMX editor ═══════════════════════════════════════════════════ */
.jmx-section {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 12px;
  overflow:      hidden;
}
.jmx-section-hdr {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 16px;
  background:    rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--border);
  font-weight:   700;
  font-size:     .85rem;
}
.jmx-section-hdr .jmx-badge {
  font-size:     .65rem;
  padding:       2px 8px;
  border-radius: 8px;
  font-family:   var(--mono);
  font-weight:   600;
}
.jmx-badge-setup    { background: rgba(56, 189, 248, .12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, .3); }
.jmx-badge-main     { background: rgba(102, 126, 234, .12); color: var(--accent); border: 1px solid rgba(102, 126, 234, .3); }
.jmx-badge-teardown { background: rgba(120, 120, 160, .1); color: var(--text2); border: 1px solid rgba(120, 120, 160, .3); }

.jmx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 16px; }
@media (max-width: 620px) { .jmx-grid { grid-template-columns: repeat(2, 1fr); } }

.jmx-field { display: flex; flex-direction: column; gap: 4px; }
.jmx-field label {
  font-size:      .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--text2);
  font-weight:    600;
}
.jmx-input {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 7px;
  color:         var(--text);
  padding:       .35rem .65rem;
  font-size:     .88rem;
  font-family:   var(--mono);
  font-weight:   600;
  outline:       none;
  transition:    border-color .2s;
  width:         100%;
}
.jmx-input:focus { border-color: var(--accent); }
.jmx-input.jmx-readonly { opacity: .45; cursor: not-allowed; background: rgba(255, 255, 255, .02); }

.jmx-select {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 7px;
  color:         var(--text);
  padding:       .35rem .65rem;
  font-size:     .82rem;
  font-family:   'DM Sans', sans-serif;
  outline:       none;
  width:         100%;
}
.jmx-divider { height: 1px; background: var(--border); margin: 0 16px; }

.jmx-timers { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.jmx-timer-row { display: grid; grid-template-columns: 1fr 100px 100px; gap: 8px; align-items: center; }
.jmx-timer-label {
  font-size:     .8rem;
  color:         var(--text2);
  font-family:   var(--mono);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.jmx-samplers { padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; }
.jmx-sampler-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       5px 8px;
  border-radius: 6px;
  background:    rgba(255, 255, 255, .025);
}
.jmx-method {
  font-size:     .7rem;
  font-family:   var(--mono);
  font-weight:   700;
  padding:       2px 6px;
  border-radius: 4px;
  min-width:     44px;
  text-align:    center;
}
.jmx-method-get  { background: rgba(46, 213, 115, .12); color: var(--success); }
.jmx-method-post { background: rgba(255, 165, 2, .12);  color: var(--warning); }
.jmx-method-put, .jmx-method-patch { background: rgba(102, 126, 234, .12); color: var(--accent); }
.jmx-method-del  { background: rgba(255, 71, 87, .12); color: var(--danger); }

.jmx-sub-title {
  font-size:      .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--text2);
  font-weight:    700;
  padding:        8px 16px 4px;
  opacity:        .7;
}

/* Bandeau variables JMeter */
.jmx-vars-banner {
  background:     rgba(102, 126, 234, .07);
  border:         1px solid rgba(102, 126, 234, .25);
  border-radius:  10px;
  padding:        12px 16px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
}
.jmx-vars-title {
  font-size:      .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--accent);
  font-weight:    700;
}
.jmx-vars-list { display: flex; flex-wrap: wrap; gap: 8px; }
.jmx-var-chip {
  display:       flex;
  align-items:   center;
  gap:           6px;
  background:    var(--surface2);
  border:        1px solid rgba(102, 126, 234, .3);
  border-radius: 7px;
  padding:       5px 10px;
  cursor:        pointer;
  transition:    all .15s;
}
.jmx-var-chip:hover { border-color: var(--accent); background: rgba(102, 126, 234, .1); }
.jmx-var-code { font-family: var(--mono); font-size: .78rem; color: var(--accent); }
.jmx-var-desc { font-size: .72rem; color: var(--text2); }
.jmx-var-copy { font-size: .65rem; color: var(--text2); opacity: .6; }

/* Reset button & dirty indicator */
.jmx-field-wrap { display: flex; flex-direction: column; gap: 4px; }
.jmx-input-row  { display: flex; gap: 4px; align-items: center; }
.jmx-reset-btn {
  background:    transparent;
  border:        1px solid transparent;
  border-radius: 5px;
  color:         var(--text2);
  cursor:        pointer;
  padding:       2px 5px;
  font-size:     .8rem;
  opacity:       .5;
  transition:    all .15s;
  flex-shrink:   0;
}
.jmx-reset-btn:hover { opacity: 1; border-color: var(--warning); color: var(--warning); }
.jmx-dirty {
  border-color: rgba(255, 165, 2, .5) !important;
  background:   rgba(255, 165, 2, .04) !important;
}