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

/**
 * layout.css — Page-level layout, login screen, header, and form primitives.
 *
 * Loaded AFTER tokens.css. Provides the structural shell: body, header,
 * login card, main content area, panels, buttons, range and duration
 * pickers. Feature-specific styling lives in components.css / modals.css.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: var(--bg);
  color:      var(--text);
  min-height: 100vh;
}

/* ── Login screen ─────────────────────────────────────────────────── */
#loginScreen {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         1rem;
}
.login-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 16px;
  padding:       2.5rem;
  width:         100%;
  max-width:     400px;
}
.login-logo  { font-size: 2.5rem;  text-align: center; margin-bottom: 0.5rem; }
.login-card h1 { font-size: 1.3rem; font-weight: 700; text-align: center; margin-bottom: 0.25rem; }
.login-card p  { font-size: 0.8rem; color: var(--text2); text-align: center; font-family: var(--mono); margin-bottom: 1.75rem; }
.login-error {
  background:    rgba(255, 71, 87, .1);
  border:        1px solid rgba(255, 71, 87, .3);
  color:         #ff6b7a;
  border-radius: 8px;
  padding:       .75rem 1rem;
  margin-bottom: 1rem;
  font-size:     .85rem;
}
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .8rem; color: var(--text2); margin-bottom: .4rem; font-weight: 500; }
.field input {
  width:         100%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  color:         var(--text);
  padding:       .65rem .9rem;
  font-size:     .95rem;
  font-family:   'DM Sans', sans-serif;
  outline:       none;
  transition:    border-color .2s;
}
.field input:focus { border-color: var(--accent); }

/* ── Header ───────────────────────────────────────────────────────── */
header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 32px;
  border-bottom:   1px solid var(--border);
  background:      var(--surface);
}
.header-left h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.header-left p  { font-size: .78rem; color: var(--text2); margin-top: 2px; font-family: var(--mono); }
.header-right   { display: flex; align-items: center; gap: 10px; }

/* ── Main screen + content ────────────────────────────────────────── */
#mainScreen { display: flex; flex-direction: column; min-height: 100vh; }
.content    { padding: 28px 32px; max-width: 1100px; margin: 0 auto; width: 100%; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  padding:       9px 18px;
  border-radius: 8px;
  border:        none;
  cursor:        pointer;
  font-family:   'DM Sans', sans-serif;
  font-size:     .875rem;
  font-weight:   600;
  transition:    opacity .2s;
}
.btn:hover    { opacity: .8; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-primary  { background: var(--accent); color: #fff; }
.btn-danger   { background: rgba(255, 71, 87, .15); color: var(--danger); border: 1px solid rgba(255, 71, 87, .3); }
.btn-ghost    { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.btn-success  { background: rgba(46, 213, 115, .15); color: var(--success); border: 1px solid rgba(46, 213, 115, .3); }
.btn-sm       { padding: 6px 12px; font-size: .8rem; }

/* ── Panels ───────────────────────────────────────────────────────── */
.panel {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 12px;
  padding:       22px 24px;
  margin-bottom: 16px;
}
.panel-title {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text2);
  margin-bottom:  16px;
}

.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 750px) { .section-grid { grid-template-columns: 1fr; } }

/* ── Form primitives ──────────────────────────────────────────────── */
.form-label { font-size: .8rem; color: var(--text2); display: block; margin-bottom: .4rem; font-weight: 500; }

select, .text-input {
  width:         100%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 8px;
  color:         var(--text);
  padding:       .6rem .9rem;
  font-size:     .9rem;
  font-family:   'DM Sans', sans-serif;
  outline:       none;
  transition:    border-color .2s;
  appearance:    none;
}
select:focus, .text-input:focus { border-color: var(--accent); }
select optgroup { color: var(--text2); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: 4px; }
select option   { color: var(--text); font-size: .88rem; padding-left: 8px; }

/* ── Range slider + duration custom ───────────────────────────────── */
.range-wrap   { margin-bottom: 16px; }
.range-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.range-val    { font-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--accent); }
input[type=range] { width: 100%; accent-color: var(--accent); height: 4px; }

.duration-custom-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-top:    10px;
  padding:       8px 12px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 10px;
}
.duration-num-input {
  width:           72px;
  background:      transparent;
  border:          1px solid var(--border);
  border-radius:   7px;
  color:           var(--text);
  padding:         .35rem .6rem;
  font-size:       .88rem;
  font-family:     var(--mono);
  font-weight:     700;
  text-align:      center;
  outline:         none;
  transition:      border-color .2s;
  -moz-appearance: textfield;
}
.duration-num-input::-webkit-inner-spin-button,
.duration-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.duration-num-input:focus { border-color: var(--accent); }

.duration-unit-select {
  flex:                  1;
  background:            var(--surface2);
  border:                1px solid var(--border);
  border-radius:         7px;
  color:                 var(--text);
  padding:               .35rem .7rem;
  font-size:             .82rem;
  font-family:           'DM Sans', sans-serif;
  outline:               none;
  cursor:                pointer;
  transition:            border-color .2s;
  appearance:            none;
  background-image:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:     no-repeat;
  background-position:   right 10px center;
  padding-right:         28px;
}
.duration-unit-select:focus { border-color: var(--accent); }