:root {
  --bg:           #0d0f14;
  --surface:      #141720;
  --surface2:     #1a1e2a;
  --border:       #252b3b;
  --border2:      #2e364a;
  --accent:       #3b6fd4;
  --accent2:      #2a52a8;
  --accent-glow:  rgba(59,111,212,0.15);
  --danger:       #c0392b;
  --warn:         #d4770f;
  --success:      #1a7a4a;
  --text:         #e8ecf4;
  --text2:        #8b95ab;
  --text3:        #4a5468;
  --radius:       8px;
  --radius2:      12px;
  --font-fa:      'Segoe UI', Tahoma, Arial, sans-serif;
}

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

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-fa);
  font-size:   14px;
  line-height: 1.6;
  min-height:  100vh;
  direction:   rtl;
}

/* ── Topbar ─────────────────────────────────── */
.topbar {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  padding:       0 2rem;
  height:        56px;
  display:       flex;
  align-items:   center;
  gap:           1rem;
  position:      sticky;
  top:           0;
  z-index:       100;
}

.topbar-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   15px;
  font-weight: 600;
  color:       var(--text);
}

.topbar-brand .icon-wrap {
  width:           32px;
  height:          32px;
  background:      var(--accent);
  border-radius:   6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
}

.topbar-sep { flex: 1; }

.badge-admin {
  background:    var(--accent-glow);
  border:        1px solid var(--accent);
  color:         var(--accent);
  font-size:     11px;
  padding:       3px 10px;
  border-radius: 20px;
  font-weight:   600;
  white-space:   nowrap;
}

/* ── Page layout ─────────────────────────────── */
.page-wrap {
  max-width: 1000px;
  margin:    0 auto;
  padding:   2rem 1.5rem 4rem;
}

.page-header {
  margin-bottom: 2rem;
  display:       flex;
  align-items:   flex-start;
  justify-content: space-between;
  gap:           1rem;
}

.page-header h1 {
  font-size:   22px;
  font-weight: 700;
  color:       var(--text);
  margin-bottom: 6px;
}

.page-header p {
  font-size: 13px;
  color:     var(--text2);
  line-height: 1.7;
}

#ticket-id {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       8px 14px;
  font-size:     12px;
  color:         var(--text2);
  white-space:   nowrap;
  font-family:   monospace;
  flex-shrink:   0;
}

/* ── Card ────────────────────────────────────── */
.form-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius2);
  overflow:      hidden;
  margin-bottom: 14px;
}

.section-header {
  background:    var(--surface2);
  border-bottom: 1px solid var(--border);
  padding:       13px 20px;
  display:       flex;
  align-items:   center;
  gap:           10px;
}

.section-header .section-icon {
  width:           28px;
  height:          28px;
  border-radius:   6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  flex-shrink:     0;
}

.section-header h2 {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
}

.section-body { padding: 20px; }

/* ── Grids ───────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr;     gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ── Fields ──────────────────────────────────── */
.field {
  display:        flex;
  flex-direction: column;
  gap:            7px;
  min-width:      0;
}

.field label {
  font-size:      11px;
  font-weight:    700;
  color:          var(--text2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space:    nowrap;
}

.field label .req { color: var(--danger); margin-right: 2px; }

.field input,
.field select,
.field textarea {
  background:    var(--surface2);
  border:        1px solid var(--border2);
  border-radius: var(--radius);
  color:         var(--text);
  font-size:     14px;
  font-family:   var(--font-fa);
  padding:       10px 14px;
  direction:     rtl;
  width:         100%;
  min-width:     0;
  transition:    border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline:    none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.field textarea {
  resize:     vertical;
  min-height: 100px;
  line-height: 1.7;
}

.field select option { background: var(--surface2); }

.field .hint {
  font-size:   11px;
  color:       var(--text3);
  line-height: 1.5;
}

.spacer-sm { height: 14px; }
.spacer-xs { height:  8px; }

/* ── Severity ────────────────────────────────── */
.severity-group {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   8px;
}

.sev-btn {
  background:      var(--surface2);
  border:          1px solid var(--border2);
  border-radius:   var(--radius);
  padding:         12px 8px;
  text-align:      center;
  cursor:          pointer;
  transition:      all 0.15s;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             5px;
  user-select:     none;
}

.sev-btn input[type="radio"] { display: none; }
.sev-btn .sev-icon  { font-size: 20px; }
.sev-btn .sev-label { font-size: 12px; font-weight: 600; color: var(--text); }
.sev-btn .sev-desc  { font-size: 10px; color: var(--text3); }

.sev-btn[data-level="critical"]:has(input:checked),
.sev-btn[data-level="critical"]:hover { border-color:#c0392b; background:rgba(192,57,43,.12); }
.sev-btn[data-level="critical"]:has(input:checked) .sev-label { color:#e74c3c; }

.sev-btn[data-level="high"]:has(input:checked),
.sev-btn[data-level="high"]:hover { border-color:#d4770f; background:rgba(212,119,15,.12); }
.sev-btn[data-level="high"]:has(input:checked) .sev-label { color:#e67e22; }

.sev-btn[data-level="medium"]:has(input:checked),
.sev-btn[data-level="medium"]:hover { border-color:#1a7a4a; background:rgba(26,122,74,.12); }
.sev-btn[data-level="medium"]:has(input:checked) .sev-label { color:#27ae60; }

.sev-btn[data-level="low"]:has(input:checked),
.sev-btn[data-level="low"]:hover { border-color:#1a6a9a; background:rgba(26,106,154,.12); }
.sev-btn[data-level="low"]:has(input:checked) .sev-label { color:#3498db; }

/* ── Steps ───────────────────────────────────── */
.steps-area { display: flex; flex-direction: column; gap: 8px; }

.step-row {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.step-num {
  width:           26px;
  height:          26px;
  min-width:       26px;
  background:      var(--accent);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     700;
  color:           #fff;
}

.step-row input {
  flex:          1;
  min-width:     0;
  background:    var(--surface2);
  border:        1px solid var(--border2);
  border-radius: var(--radius);
  color:         var(--text);
  font-size:     14px;
  font-family:   var(--font-fa);
  padding:       9px 12px;
  direction:     rtl;
  transition:    border-color 0.15s;
}

.step-row input:focus { outline: none; border-color: var(--accent); }

.remove-step {
  background:    none;
  border:        none;
  color:         var(--text3);
  cursor:        pointer;
  padding:       5px 7px;
  border-radius: 4px;
  font-size:     12px;
  transition:    color 0.15s;
  flex-shrink:   0;
}
.remove-step:hover { color: var(--danger); }

.add-step-btn {
  background:      none;
  border:          1px dashed var(--border2);
  border-radius:   var(--radius);
  color:           var(--text2);
  font-size:       13px;
  font-family:     var(--font-fa);
  padding:         9px 14px;
  cursor:          pointer;
  width:           100%;
  transition:      all 0.15s;
  display:         flex;
  align-items:     center;
  gap:             8px;
  justify-content: center;
  margin-top:      8px;
}
.add-step-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Environment grid ────────────────────────── */
.env-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}

.env-item {
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       10px 14px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  min-width:     0;
}

.env-item label {
  font-size:   12px;
  color:       var(--text2);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.env-item input,
.env-item select {
  flex:          1;
  min-width:     0;
  background:    transparent;
  border:        none;
  border-bottom: 1px solid var(--border2);
  border-radius: 0;
  color:         var(--text);
  font-size:     13px;
  font-family:   var(--font-fa);
  padding:       2px 0;
  direction:     rtl;
}

.env-item input:focus,
.env-item select:focus { outline: none; border-bottom-color: var(--accent); }

/* ── Checklist ───────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: 10px; }

.check-item {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  cursor:      pointer;
}

.check-item input[type="checkbox"] {
  width:       16px;
  height:      16px;
  min-width:   16px;
  margin-top:  3px;
  accent-color: var(--accent);
  cursor:      pointer;
}

.check-item span {
  font-size:   13px;
  color:       var(--text2);
  line-height: 1.6;
}

/* ── Attachments ─────────────────────────────── */
.file-upload-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.file-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       10px 14px;
  font-size:     13px;
  color:         var(--text2);
  min-width:     0;
}

/* preview image inside file-item */
.file-item .file-preview {
  width:         40px;
  height:        40px;
  min-width:     40px;
  border-radius: 4px;
  object-fit:    cover;
  background:    var(--surface);
  display:       flex;
  align-items:   center;
  justify-content: center;
  overflow:      hidden;
}

.file-item .file-preview img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.file-item .file-preview .file-icon {
  font-size: 18px;
  color:     var(--accent);
}

.file-item .file-info {
  flex:      1;
  min-width: 0;
}

.file-item .file-name {
  font-size:     13px;
  color:         var(--text);
  font-weight:   500;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.file-item .file-size {
  font-size: 11px;
  color:     var(--text3);
  margin-top: 2px;
}

.file-remove {
  cursor:      pointer;
  color:       var(--text3);
  font-size:   13px;
  flex-shrink: 0;
  padding:     4px;
  border-radius: 4px;
  transition:  color 0.15s;
}
.file-remove:hover { color: var(--danger); }

.attach-note {
  font-size:  11px;
  color:      var(--text3);
  margin-top: 8px;
  display:    none;
}

/* ── Form footer ─────────────────────────────── */
.form-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         16px 20px;
  background:      var(--surface2);
  border-top:      1px solid var(--border);
}

.footer-info {
  font-size:   12px;
  color:       var(--text3);
  display:     flex;
  align-items: center;
  gap:         6px;
}

.btn-group { display: flex; gap: 10px; }

.btn {
  border:        none;
  border-radius: var(--radius);
  padding:       10px 22px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   var(--font-fa);
  display:       flex;
  align-items:   center;
  gap:           8px;
  transition:    all 0.15s;
  white-space:   nowrap;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent2); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color:      var(--text2);
  border:     1px solid var(--border2);
}
.btn-ghost:hover { border-color: var(--border); color: var(--text); }

/* ── Toast ───────────────────────────────────── */
.toast {
  position:      fixed;
  bottom:        2rem;
  left:          50%;
  transform:     translateX(-50%) translateY(100px);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius2);
  padding:       14px 20px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  box-shadow:    0 8px 32px rgba(0,0,0,.4);
  transition:    transform 0.3s ease;
  z-index:       999;
  font-size:     14px;
}

.toast.show    { transform: translateX(-50%) translateY(0); }
.toast.success { border-color: #1a7a4a; }
.toast.error   { border-color: var(--danger); }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 700px) {
  .grid-2, .grid-3    { grid-template-columns: 1fr; }
  .severity-group      { grid-template-columns: 1fr 1fr; }
  .env-grid            { grid-template-columns: 1fr; }
  .topbar              { padding: 0 1rem; }
  .page-wrap           { padding: 1.5rem 1rem 3rem; }
  .form-footer         { flex-direction: column; align-items: stretch; }
  .btn-group           { justify-content: stretch; }
  .btn-group .btn      { flex: 1; justify-content: center; }
  .page-header         { flex-direction: column; }
}