/* Class names/structure deliberately mirror apps/bot/templates/jira-helper/{styles,sidepanel}.css
   in gorganize (read-only reference, not shared at runtime) so future edits can be ported
   between the extension and this mini app with minimal translation. */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--tg-theme-bg-color, #f4f5f7);
  color: var(--tg-theme-text-color, #172b4d);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

#zjh-app {
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.zjh-wrap {
  padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top, 0));
}

.zjh-card {
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--tg-theme-secondary-bg-color, #fff);
}

.zjh-card h3 { margin: 0 0 8px; }

.zjh-card label {
  display: block;
  margin-top: 12px;
  font-weight: 600;
}

.zjh-card input,
.zjh-card textarea,
.zjh-card select {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 10px 10px;
  border: 1px solid #c1c7d0;
  border-radius: 6px;
  font: inherit;
  font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
  background: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color, #172b4d);
}

.zjh-card button {
  width: 100%;
  margin-top: 14px;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--tg-theme-button-color, #0052cc);
  color: var(--tg-theme-button-text-color, #fff);
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}

.zjh-card button:disabled { opacity: 0.5; }

.zjh-secondary-button {
  background: #42526e !important;
}

.zjh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zjh-status {
  margin: 10px 0;
  font-size: 12px;
  color: #5e6c84;
  white-space: pre-wrap;
}
.zjh-status.is-error, .zjh-error { color: #de350b; }

.zjh-check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-weight: 400;
}
.zjh-check-row input { width: auto; margin: 0; }
.zjh-required { color: #de350b; font-weight: 700; }
.is-hidden { display: none !important; }

.zjh-empty { color: #5e6c84; }

.zjh-issue {
  margin: 10px 0;
  border: 2px solid #b3bac5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tg-theme-bg-color, #fff);
}
.zjh-issue.is-open { border-color: #0052cc; }

.zjh-issue-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.zjh-issue-toggle strong { display: block; font-size: 14px; }
.zjh-issue-toggle span { display: block; margin-top: 4px; color: #5e6c84; font-size: 12px; }

.zjh-status-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(9,30,66,0.06);
  border: 1px solid rgba(9,30,66,0.15);
  font-weight: 700;
  font-size: 11px;
}

.zjh-issue-details { padding: 0 12px 12px; border-top: 1px solid #dfe1e6; }
.zjh-detail-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid #dfe1e6; }
.zjh-detail-block:first-child { border-top: 0; margin-top: 8px; padding-top: 0; }
.zjh-detail-block pre, .zjh-comment pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 6px 0 0;
  font: inherit;
}
.zjh-comment { margin: 8px 0; padding: 8px; border-radius: 6px; background: rgba(9,30,66,0.04); }
.zjh-comment span { color: #6b778c; font-size: 12px; }

.zjh-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.zjh-tab-button {
  flex: 1;
  padding: 10px;
  border: 1px solid #c1c7d0;
  border-radius: 8px;
  background: var(--tg-theme-secondary-bg-color, #fff);
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}
.zjh-tab-button.is-active {
  background: var(--tg-theme-button-color, #0052cc);
  color: var(--tg-theme-button-text-color, #fff);
  border-color: transparent;
}

.zjh-file-manager { margin-top: 12px; padding: 10px; border: 1px dashed #c1c7d0; border-radius: 8px; }
.zjh-file-manager-title { font-weight: 700; margin-bottom: 8px; }
.zjh-hidden-file-input { display: none !important; }
.zjh-file-pick-button { margin-top: 8px !important; background: #42526e !important; }
.zjh-file-help { margin-top: 6px; color: #6b778c; font-size: 12px; font-weight: 400; }
.zjh-file-list { display: grid; gap: 6px; }
.zjh-selected-file {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px; border: 1px solid #dfe1e6; border-radius: 6px; background: rgba(9,30,66,0.03);
  font-weight: 500;
}
.zjh-selected-file small { color: #6b778c; font-weight: 400; }
.zjh-selected-file button {
  width: 24px !important; height: 24px !important; min-width: 24px !important;
  margin: 0 !important; padding: 0 !important; border-radius: 50% !important;
  background: #de350b !important; color: #fff; font-size: 16px; line-height: 1;
}