/* The agent pages. Tokens come from style.css, which every page loads first. */

.agent-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.agent-nav a {
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 600;
}

.agent-nav a:hover { text-decoration: underline; }
.agent-logout { margin-inline-start: auto; }

.agent-title { color: var(--question); font-size: 24px; margin: 0 0 16px; }
.card h2 { color: var(--question); font-size: 19px; margin: 24px 0 8px; }
.agent-hint { color: #4b5563; font-size: 15px; margin: 0 0 12px; }

.agent-errors {
  margin: 0 0 18px;
  padding: 12px 32px 12px 14px;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: #fff;
  color: var(--danger);
}

.agent-saved {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--question);
  font-weight: 600;
}

.agent-form { margin-top: 8px; }
.agent-field { display: block; margin-bottom: 18px; }

/* The brand colour: one text field, which is what the form posts, and the
   native picker beside it, which only writes into that field. */
.agent-color { display: flex; align-items: center; gap: 10px; }

.agent-color input[type="color"] {
  flex: none;
  width: 46px;
  height: 42px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.agent-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--answer);
  font: inherit;
  resize: vertical;
}

.agent-field input[type="password"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--answer);
  font: inherit;
}

.agent-url,
.agent-code {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  margin: 0 0 10px;
  font-weight: 600;
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: start;
}

.agent-code { letter-spacing: 2px; font-size: 20px; }

.agent-recovery {
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.agent-recovery h2 { margin-top: 0; }

.agent-copied { color: var(--primary-dark); font-weight: 600; margin-inline-start: 10px; }

.agent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.agent-table th,
.agent-table td {
  text-align: start;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(13, 146, 233, 0.15);
  overflow-wrap: anywhere;
}

.agent-table th { color: var(--question); background: var(--card); }
.agent-table tr:last-child td { border-bottom: none; }

/* The submissions list and one submission. */

.agent-warning {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: #fff;
  color: var(--danger);
}

.agent-paging {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin: 14px 0 0;
}

.agent-paging a { color: var(--primary-dark); font-weight: 600; }

/* The button rules in style.css sit on the element, so an anchor that has to
   look like a button repeats the shape, exactly as .btn-wide does there. */
.agent-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px 0 8px;
}

.agent-actions a {
  display: inline-block;
  font: inherit;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 28px;
  text-decoration: none;
}

.agent-actions a.btn-secondary { border-color: var(--border); }
.agent-inline { display: inline; margin: 0; }

.btn-danger {
  background: #fff;
  color: var(--danger);
  border-color: var(--danger);
}

.actions a.btn-secondary {
  display: inline-block;
  font: inherit;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 11px 28px;
  text-decoration: none;
  color: var(--question);
  background: #fff;
}

.agent-block { margin-top: 26px; }
.agent-block h2 { margin-top: 0; }

.agent-answers { margin: 0; }

.agent-answers .row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(13, 146, 233, 0.15);
}

.agent-answers dt { color: #4b5563; font-size: 15px; flex: 1 1 45%; min-width: 130px; }

.agent-answers dd {
  margin: 0;
  color: var(--answer);
  font-weight: 600;
  flex: 1 1 45%;
  min-width: 130px;
  overflow-wrap: anywhere;
}

.agent-answers dd a { color: var(--primary-dark); }

.agent-signature {
  max-width: 260px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.agent-sub { padding-inline-start: 26px; color: #4b5563; }

/* The Surense section of the settings page. */
.agent-check {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-weight: 600;
}

.agent-check .hint { display: block; font-weight: 400; margin-top: 4px; }
.agent-check-ok { color: var(--question); }
.agent-check-invalid_client,
.agent-check-missing_scope,
.agent-check-network,
.agent-check-unexpected { color: var(--danger); }

.agent-check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.agent-check-field input { width: 18px; height: 18px; }

/* The connect popup. showModal paints the backdrop and traps the focus; a
   browser without it shows the same box as a plain block, and every rule
   here holds either way. */
.agent-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 20px 22px;
  width: min(440px, calc(100vw - 32px));
  color: var(--answer);
  direction: rtl;
}

.agent-dialog::backdrop { background: rgba(6, 31, 49, 0.45); }
.agent-dialog h2 { margin-top: 0; }

.agent-dialog .actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}

/* A client id and a client secret are Latin. In a right-to-left box the
   caret starts on the wrong side and a pasted key reads back scrambled, so
   these two fields run left to right inside an otherwise rtl dialog. */
.agent-key { direction: ltr; text-align: start; }

/* The public form's stylesheet is the Surense customer screen now: no card,
   and .actions is a sticky bar pulled out to the page gutters with an icon
   before every button. An agent page is a plain document with a form in a
   box, so the two shapes are put back here rather than in style.css, which
   the form owns. */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  display: block;
}

.card .actions {
  position: static;
  order: 0;
  justify-content: flex-start;
  background: none;
  border-bottom: 0;
  margin-inline: 0;
  margin-block: 20px 0;
  padding: 0;
}

/* The check and the undo arrow belong to "המשך" and "חזרה" on the form; an
   agent button says what it does in words. */
.card .actions button::before { content: none; }

/* The field switches: one row per field of the catalogue, a detail row
   indented under the gate it follows so the list reads the way the form
   does. */
.agent-subhead {
  color: var(--question);
  font-size: 16px;
  font-weight: 600;
  margin: 18px 0 6px;
}

.agent-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.agent-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 14px;
}

.agent-field-row + .agent-field-row { border-top: 1px solid var(--border); }
.agent-field-detail { padding-inline-start: 44px; }
.agent-field-label { color: var(--answer); }
.agent-fields .agent-check-field { margin: 0; }

/* style.css gives .btn-secondary a look only inside the form's action bar,
   where it is the orange "cancel". On an agent page it is an ordinary
   secondary button and needs the outline back. Scoped to the agent card and
   nav so the public form keeps main's own buttons. */
.card .btn-secondary,
.agent-nav .btn-secondary {
  background: #fff;
  color: var(--question);
  border: 1px solid var(--border);
}